Custom add and create flow polish

app/components/modals/ModalHeader/ModalHeader.container.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { memo } from "react";
+import { memo, useEffect, useId, useRef, useState } from "react";
 import { ModalHeaderView } from "./ModalHeader.view";
 import type { ModalHeaderProps } from "./ModalHeader.types";
 
@@ -10,7 +10,55 @@ import type { ModalHeaderProps } from "./ModalHeader.types";
  * (right) icon buttons.
  */
 const ModalHeaderContainer = memo<ModalHeaderProps>((props) => {
-  return <ModalHeaderView {...props} />;
+  const { menuItems = [] } = props;
+  const hasMenu = menuItems.length > 0;
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuId = useId();
+  const menuWrapRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!menuOpen || !hasMenu) return;
+    const onDoc = (event: MouseEvent) => {
+      if (
+        menuWrapRef.current &&
+        !menuWrapRef.current.contains(event.target as Node)
+      ) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [hasMenu, menuOpen]);
+
+  useEffect(() => {
+    if (!menuOpen || !hasMenu) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setMenuOpen(false);
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [hasMenu, menuOpen]);
+
+  return (
+    <div ref={menuWrapRef}>
+      <ModalHeaderView
+        {...props}
+        menuId={menuId}
+        menuOpen={menuOpen}
+        onToggleMenu={hasMenu ? () => setMenuOpen((open) => !open) : undefined}
+        onMenuItemClick={
+          hasMenu
+            ? (item) => {
+                item.onClick?.();
+                setMenuOpen(false);
+              }
+            : undefined
+        }
+      />
+    </div>
+  );
 });
 
 ModalHeaderContainer.displayName = "ModalHeader";