Custom add and create flow polish

app/components/modals/ModalHeader/ModalHeader.view.tsx

@@ -1,3 +1,5 @@
+import ListItem from "../../layout/ListItem";
+import Popover from "../Popover";
 import { getAssetPath } from "../../../../lib/assetUtils";
 import type { ModalHeaderProps } from "./ModalHeader.types";
 
@@ -11,8 +13,16 @@ export function ModalHeaderView({
   showMoreOptionsButton = true,
   closeButtonAriaLabel = "Close dialog",
   moreOptionsAriaLabel = "More options",
+  menuAriaLabel = "More options menu",
+  menuItems = [],
+  menuId,
+  menuOpen = false,
+  onToggleMenu,
+  onMenuItemClick,
   className = "",
 }: ModalHeaderProps) {
+  const hasMenu = menuItems.length > 0;
+
   return (
     <div
       className={`border-b border-[var(--color-border-default-secondary)] h-[48px] shrink-0 sticky top-0 bg-[var(--color-surface-default-primary)] z-[2] ${className}`}
@@ -41,9 +51,12 @@ export function ModalHeaderView({
       {showMoreOptionsButton && (
         <button
           type="button"
-          onClick={onMoreOptions}
+          onClick={hasMenu ? onToggleMenu : onMoreOptions}
           className={`${iconButtonClass} right-[24px] top-[12px]`}
           aria-label={moreOptionsAriaLabel}
+          aria-haspopup={hasMenu ? "menu" : undefined}
+          aria-expanded={hasMenu ? menuOpen : undefined}
+          aria-controls={hasMenu ? menuId : undefined}
         >
           <svg
             width="16"
@@ -58,6 +71,22 @@ export function ModalHeaderView({
           </svg>
         </button>
       )}
+      {showMoreOptionsButton && hasMenu && menuOpen ? (
+        <div className="absolute right-[24px] top-[44px] z-[300]">
+          <Popover id={menuId} menuAriaLabel={menuAriaLabel}>
+            {menuItems.map((item, index) => (
+              <ListItem
+                key={item.id}
+                showDivider={index < menuItems.length - 1}
+                leadingIcon={item.leadingIcon}
+                label={item.label}
+                variant={item.variant}
+                onClick={() => onMenuItemClick?.(item)}
+              />
+            ))}
+          </Popover>
+        </div>
+      ) : null}
     </div>
   );
 }