@flanksource/clicky-ui 0.3.9 → 0.3.11

package/dist/overlay/DropdownMenu.cjs

@@ -1,14 +1,19 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const react$1 = require("@floating-ui/react");
+const react$1 = require("react");
+const react = require("@floating-ui/react");
 const utils = require("../lib/utils.cjs");
 const button = require("../components/button.cjs");
 const Icon = require("../data/Icon.cjs");
+const dropdownMenuContext = require("./dropdownMenuContext.cjs");
+const DropdownMenuSubmenu = require("./DropdownMenuSubmenu.cjs");
 const modalStack = require("./modalStack.cjs");
 const UiChevronDown = require("../icons/components/UiChevronDown.cjs");
-function DropdownMenu({
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingTree, { children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuRoot, { ...props }) });
+}
+function DropdownMenuRoot({
   label,
   icon,
   hideChevron = false,
@@ -26,36 +31,40 @@ function DropdownMenu({
   className,
   menuClassName
 }) {
-  const [open, setOpen] = react.useState(false);
-  const [activeIndex, setActiveIndex] = react.useState(null);
+  const [open, setOpen] = react$1.useState(false);
+  const [activeIndex, setActiveIndex] = react$1.useState(null);
   const floatingZ = modalStack.useFloatingZIndex();
-  const listRef = react.useRef([]);
-  const onOpenChangeRef = react.useRef(onOpenChange);
+  const tree = react.useFloatingTree();
+  const nodeId = react.useFloatingNodeId();
+  const elementsRef = react$1.useRef([]);
+  const onOpenChangeRef = react$1.useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
-  react.useEffect(() => {
+  react$1.useEffect(() => {
     var _a;
     (_a = onOpenChangeRef.current) == null ? void 0 : _a.call(onOpenChangeRef, open);
   }, [open]);
-  const { refs, floatingStyles, context } = react$1.useFloating({
+  const { refs, floatingStyles, context } = react.useFloating({
+    // nodeId is always defined inside the FloatingTree; guard for the type only.
+    ...nodeId ? { nodeId } : {},
     open,
     onOpenChange: setOpen,
     // bottom-end / bottom-start reproduce the previous right/left alignment.
     placement: align === "right" ? "bottom-end" : "bottom-start",
-    whileElementsMounted: react$1.autoUpdate,
+    whileElementsMounted: react.autoUpdate,
     // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and
     // shift slides the menu back on-screen at the horizontal edges.
-    middleware: [react$1.offset(4), react$1.flip({ padding: 8 }), react$1.shift({ padding: 8 })]
+    middleware: [react.offset(4), react.flip({ padding: 8 }), react.shift({ padding: 8 })]
   });
-  const click = react$1.useClick(context);
-  const dismiss = react$1.useDismiss(context, { escapeKey: false });
-  const role = react$1.useRole(context, { role: "menu" });
-  const listNav = react$1.useListNavigation(context, {
-    listRef,
+  const click = react.useClick(context);
+  const dismiss = react.useDismiss(context, { escapeKey: false });
+  const role = react.useRole(context, { role: "menu" });
+  const listNav = react.useListNavigation(context, {
+    listRef: elementsRef,
     activeIndex,
     onNavigate: setActiveIndex,
     loop: true
   });
-  const { getReferenceProps, getFloatingProps, getItemProps } = react$1.useInteractions([
+  const { getReferenceProps, getFloatingProps, getItemProps } = react.useInteractions([
     click,
     dismiss,
     role,
@@ -66,7 +75,15 @@ function DropdownMenu({
     if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
   };
   modalStack.useEscapeLayer(open, closeMenu);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative inline-flex", className), children: [
+  const closeMenuRef = react$1.useRef(closeMenu);
+  closeMenuRef.current = closeMenu;
+  react$1.useEffect(() => {
+    if (!tree) return;
+    const onTreeClick = () => closeMenuRef.current();
+    tree.events.on("click", onTreeClick);
+    return () => tree.events.off("click", onTreeClick);
+  }, [tree]);
+  return /* @__PURE__ */ jsxRuntime.jsx(react.FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: utils.cn("relative inline-flex", className), children: [
     trigger ? /* @__PURE__ */ jsxRuntime.jsx(
       "span",
       {
@@ -94,62 +111,36 @@ function DropdownMenu({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react$1.FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
+    open && /* @__PURE__ */ jsxRuntime.jsx(react.FloatingPortal, { children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingFocusManager, { context, modal: false, closeOnFocusOut: false, children: /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
         ref: refs.setFloating,
         role: "menu",
         "aria-label": menuLabel,
         style: { ...floatingStyles, zIndex: floatingZ },
-        className: utils.cn(
-          "min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md",
-          menuClassName
-        ),
+        className: utils.cn(dropdownMenuContext.MENU_POPOVER_CLASS, menuClassName),
         ...getFloatingProps(),
         children: [
           header != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-border px-3 py-1.5", children: header }),
-          children ? children(closeMenu) : items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs(
-            "button",
+          children ? children(closeMenu) : /* @__PURE__ */ jsxRuntime.jsx(
+            dropdownMenuContext.MenuContext.Provider,
             {
-              ref: (node) => {
-                listRef.current[i] = node;
-              },
-              type: "button",
-              role: "menuitem",
-              tabIndex: i === activeIndex ? 0 : -1,
-              disabled: item.disabled,
-              title: item.title,
-              className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
-              ...getItemProps({
-                onClick: () => {
-                  item.onSelect();
-                  closeMenu();
+              value: {
+                getItemProps,
+                activeIndex,
+                setActiveIndex,
+                setHasFocusInside: () => {
                 },
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    item.onSelect();
-                    closeMenu();
-                  }
-                }
-              }),
-              children: [
-                item.icon && /* @__PURE__ */ jsxRuntime.jsx(
-                  Icon.Icon,
-                  {
-                    ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon }
-                  }
-                ),
-                item.label
-              ]
-            },
-            i
-          )),
+                isOpen: open
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(react.FloatingList, { elementsRef, children: /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuSubmenu.MenuItemList, { items: items ?? [] }) })
+            }
+          ),
           footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t border-border px-3 py-1.5", children: footer })
         ]
       }
     ) }) })
-  ] });
+  ] }) });
 }
 exports.DropdownMenu = DropdownMenu;
 //# sourceMappingURL=DropdownMenu.cjs.map

package/dist/overlay/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {header != null && (\n                <div className=\"border-b border-border px-3 py-1.5\">{header}</div>\n              )}\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n              {footer != null && (\n                <div className=\"border-t border-border px-3 py-1.5\">{footer}</div>\n              )}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":["useState","useFloatingZIndex","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","useEscapeLayer","cn","jsx","jsxs","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.cjs","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. Ignored when the item has `children`. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */\n  iconColor?: string;\n  /**\n   * Section header. A non-interactive header renders above the first item of\n   * each contiguous group — provide items pre-sorted by `group`. Items without\n   * a `group` render no header.\n   */\n  group?: string;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n  /**\n   * Nested submenu items. When present the item becomes a submenu trigger: it\n   * opens a flyout of `children` (recursively) on hover / click / ArrowRight\n   * instead of firing `onSelect`.\n   */\n  children?: DropdownMenuItem[];\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\n/**\n * A trigger + floating menu. Flat `items` render as a single list; an item with\n * `children` opens a flyout submenu. The FloatingTree lets every level cooperate\n * on focus and dismissal, so selecting any leaf closes the whole menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  return (\n    <FloatingTree>\n      <DropdownMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nfunction DropdownMenuRoot({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  // Selecting any leaf (at any depth) emits a tree-wide \"click\"; the root closes\n  // and restores focus to the trigger.\n  const closeMenuRef = useRef(closeMenu);\n  closeMenuRef.current = closeMenu;\n  useEffect(() => {\n    if (!tree) return;\n    const onTreeClick = () => closeMenuRef.current();\n    tree.events.on(\"click\", onTreeClick);\n    return () => tree.events.off(\"click\", onTreeClick);\n  }, [tree]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <div className={cn(\"relative inline-flex\", className)}>\n        {trigger ? (\n          <span\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </span>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager context={context} modal={false} closeOnFocusOut={false}>\n              <div\n                ref={refs.setFloating}\n                role=\"menu\"\n                aria-label={menuLabel}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n                {...getFloatingProps()}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">{header}</div>\n                )}\n                {children ? (\n                  children(closeMenu)\n                ) : (\n                  <MenuContext.Provider\n                    value={{\n                      getItemProps,\n                      activeIndex,\n                      setActiveIndex,\n                      setHasFocusInside: () => {},\n                      isOpen: open,\n                    }}\n                  >\n                    <FloatingList elementsRef={elementsRef}>\n                      <MenuItemList items={items ?? []} />\n                    </FloatingList>\n                  </MenuContext.Provider>\n                )}\n                {footer != null && (\n                  <div className=\"border-t border-border px-3 py-1.5\">{footer}</div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"names":["FloatingTree","jsx","useState","useFloatingZIndex","useFloatingTree","useFloatingNodeId","useRef","useEffect","useFloating","autoUpdate","offset","flip","shift","useClick","useDismiss","useRole","useListNavigation","useInteractions","useEscapeLayer","FloatingNode","jsxs","cn","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager","MENU_POPOVER_CLASS","MenuContext","FloatingList","MenuItemList"],"mappings":"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"}

package/dist/overlay/DropdownMenu.d.ts

@@ -4,14 +4,28 @@ import { StaticIconComponent } from '../data/Icon';
 export type DropdownMenuItem = {
     /** Visible label. */
     label: ReactNode;
-    /** Called when the item is chosen. */
+    /** Called when the item is chosen. Ignored when the item has `children`. */
     onSelect: () => void;
     /** Iconify name or imported icon component rendered before the label. */
     icon?: string | StaticIconComponent;
+    /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */
+    iconColor?: string;
+    /**
+     * Section header. A non-interactive header renders above the first item of
+     * each contiguous group — provide items pre-sorted by `group`. Items without
+     * a `group` render no header.
+     */
+    group?: string;
     /** Browser tooltip for the item. */
     title?: string;
     /** Disable selection. */
     disabled?: boolean;
+    /**
+     * Nested submenu items. When present the item becomes a submenu trigger: it
+     * opens a flyout of `children` (recursively) on hover / click / ArrowRight
+     * instead of firing `onSelect`.
+     */
+    children?: DropdownMenuItem[];
 };
 export type DropdownMenuProps = {
     /** Trigger label. Ignored when `trigger` is provided. */
@@ -47,5 +61,10 @@ export type DropdownMenuProps = {
     /** Classes applied to the floating menu. */
     menuClassName?: string;
 };
-export declare function DropdownMenu({ label, icon, hideChevron, variant, size, trigger, items, children, header, footer, align, onOpenChange, title, menuLabel, className, menuClassName, }: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * A trigger + floating menu. Flat `items` render as a single list; an item with
+ * `children` opens a flyout submenu. The FloatingTree lets every level cooperate
+ * on focus and dismissal, so selecting any leaf closes the whole menu.
+ */
+export declare function DropdownMenu(props: DropdownMenuProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/overlay/DropdownMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAI9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,IAAI,EACJ,WAAmB,EACnB,OAAmB,EACnB,IAAW,EACX,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,MAAM,EACN,KAAe,EACf,YAAY,EACZ,KAAK,EACL,SAAS,EACT,SAAS,EACT,aAAa,GACd,EAAE,iBAAiB,2CAgJnB"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA+B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAqBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAM9D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,qBAAqB;IACrB,KAAK,EAAE,SAAS,CAAC;IACjB,4EAA4E;IAC5E,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,yEAAyE;IACzE,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,+EAA+E;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oCAAoC;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,gBAAgB,EAAE,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,yDAAyD;IACzD,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,+EAA+E;IAC/E,IAAI,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;IACpC,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uDAAuD;IACvD,OAAO,CAAC,EAAE,WAAW,CAAC,SAAS,CAAC,CAAC;IACjC,oDAAoD;IACpD,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B,kFAAkF;IAClF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,oEAAoE;IACpE,KAAK,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC3B,yEAAyE;IACzE,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC;IAChD,iEAAiE;IACjE,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,+FAA+F;IAC/F,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,gEAAgE;IAChE,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,kDAAkD;IAClD,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC,kEAAkE;IAClE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4EAA4E;IAC5E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4CAA4C;IAC5C,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CAAC;AAEF;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CAMpD"}

package/dist/overlay/DropdownMenu.js

@@ -1,12 +1,17 @@
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from "react";
-import { useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useListNavigation, useInteractions, FloatingPortal, FloatingFocusManager } from "@floating-ui/react";
+import { FloatingTree, useFloatingTree, useFloatingNodeId, useFloating, autoUpdate, offset, flip, shift, useClick, useDismiss, useRole, useListNavigation, useInteractions, FloatingNode, FloatingPortal, FloatingFocusManager, FloatingList } from "@floating-ui/react";
 import { cn } from "../lib/utils.js";
 import { Button } from "../components/button.js";
 import { Icon } from "../data/Icon.js";
+import { MenuContext, MENU_POPOVER_CLASS } from "./dropdownMenuContext.js";
+import { MenuItemList } from "./DropdownMenuSubmenu.js";
 import { useFloatingZIndex, useEscapeLayer } from "./modalStack.js";
 import { UiChevronDown } from "../icons/components/UiChevronDown.js";
-function DropdownMenu({
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(DropdownMenuRoot, { ...props }) });
+}
+function DropdownMenuRoot({
   label,
   icon,
   hideChevron = false,
@@ -27,7 +32,9 @@ function DropdownMenu({
   const [open, setOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(null);
   const floatingZ = useFloatingZIndex();
-  const listRef = useRef([]);
+  const tree = useFloatingTree();
+  const nodeId = useFloatingNodeId();
+  const elementsRef = useRef([]);
   const onOpenChangeRef = useRef(onOpenChange);
   onOpenChangeRef.current = onOpenChange;
   useEffect(() => {
@@ -35,6 +42,8 @@ function DropdownMenu({
     (_a = onOpenChangeRef.current) == null ? void 0 : _a.call(onOpenChangeRef, open);
   }, [open]);
   const { refs, floatingStyles, context } = useFloating({
+    // nodeId is always defined inside the FloatingTree; guard for the type only.
+    ...nodeId ? { nodeId } : {},
     open,
     onOpenChange: setOpen,
     // bottom-end / bottom-start reproduce the previous right/left alignment.
@@ -48,7 +57,7 @@ function DropdownMenu({
   const dismiss = useDismiss(context, { escapeKey: false });
   const role = useRole(context, { role: "menu" });
   const listNav = useListNavigation(context, {
-    listRef,
+    listRef: elementsRef,
     activeIndex,
     onNavigate: setActiveIndex,
     loop: true
@@ -64,7 +73,15 @@ function DropdownMenu({
     if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
   };
   useEscapeLayer(open, closeMenu);
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), children: [
+  const closeMenuRef = useRef(closeMenu);
+  closeMenuRef.current = closeMenu;
+  useEffect(() => {
+    if (!tree) return;
+    const onTreeClick = () => closeMenuRef.current();
+    tree.events.on("click", onTreeClick);
+    return () => tree.events.off("click", onTreeClick);
+  }, [tree]);
+  return /* @__PURE__ */ jsx(FloatingNode, { id: nodeId, children: /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), children: [
     trigger ? /* @__PURE__ */ jsx(
       "span",
       {
@@ -92,62 +109,36 @@ function DropdownMenu({
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, children: /* @__PURE__ */ jsxs(
+    open && /* @__PURE__ */ jsx(FloatingPortal, { children: /* @__PURE__ */ jsx(FloatingFocusManager, { context, modal: false, closeOnFocusOut: false, children: /* @__PURE__ */ jsxs(
       "div",
       {
         ref: refs.setFloating,
         role: "menu",
         "aria-label": menuLabel,
         style: { ...floatingStyles, zIndex: floatingZ },
-        className: cn(
-          "min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md",
-          menuClassName
-        ),
+        className: cn(MENU_POPOVER_CLASS, menuClassName),
         ...getFloatingProps(),
         children: [
           header != null && /* @__PURE__ */ jsx("div", { className: "border-b border-border px-3 py-1.5", children: header }),
-          children ? children(closeMenu) : items == null ? void 0 : items.map((item, i) => /* @__PURE__ */ jsxs(
-            "button",
+          children ? children(closeMenu) : /* @__PURE__ */ jsx(
+            MenuContext.Provider,
             {
-              ref: (node) => {
-                listRef.current[i] = node;
-              },
-              type: "button",
-              role: "menuitem",
-              tabIndex: i === activeIndex ? 0 : -1,
-              disabled: item.disabled,
-              title: item.title,
-              className: "flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
-              ...getItemProps({
-                onClick: () => {
-                  item.onSelect();
-                  closeMenu();
+              value: {
+                getItemProps,
+                activeIndex,
+                setActiveIndex,
+                setHasFocusInside: () => {
                 },
-                onKeyDown: (event) => {
-                  if (event.key === "Enter" || event.key === " ") {
-                    event.preventDefault();
-                    item.onSelect();
-                    closeMenu();
-                  }
-                }
-              }),
-              children: [
-                item.icon && /* @__PURE__ */ jsx(
-                  Icon,
-                  {
-                    ...typeof item.icon === "string" ? { name: item.icon } : { icon: item.icon }
-                  }
-                ),
-                item.label
-              ]
-            },
-            i
-          )),
+                isOpen: open
+              },
+              children: /* @__PURE__ */ jsx(FloatingList, { elementsRef, children: /* @__PURE__ */ jsx(MenuItemList, { items: items ?? [] }) })
+            }
+          ),
           footer != null && /* @__PURE__ */ jsx("div", { className: "border-t border-border px-3 py-1.5", children: footer })
         ]
       }
     ) }) })
-  ] });
+  ] }) });
 }
 export {
   DropdownMenu

package/dist/overlay/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingPortal,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\nexport function DropdownMenu({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const listRef = useRef<(HTMLElement | null)[]>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  return (\n    <div className={cn(\"relative inline-flex\", className)}>\n      {trigger ? (\n        <span\n          ref={refs.setReference}\n          className=\"inline-flex\"\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {trigger}\n        </span>\n      ) : (\n        <Button\n          ref={refs.setReference as React.Ref<HTMLButtonElement>}\n          variant={variant}\n          size={size}\n          title={title}\n          aria-haspopup=\"menu\"\n          aria-expanded={open}\n          {...getReferenceProps()}\n        >\n          {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n          {label}\n          {!hideChevron && <Icon icon={UiChevronDown} />}\n        </Button>\n      )}\n      {open && (\n        <FloatingPortal>\n          <FloatingFocusManager context={context} modal={false}>\n            <div\n              ref={refs.setFloating}\n              role=\"menu\"\n              aria-label={menuLabel}\n              style={{ ...floatingStyles, zIndex: floatingZ }}\n              className={cn(\n                \"min-w-[8rem] rounded-md border border-border bg-popover py-1 shadow-md\",\n                menuClassName,\n              )}\n              {...getFloatingProps()}\n            >\n              {header != null && (\n                <div className=\"border-b border-border px-3 py-1.5\">{header}</div>\n              )}\n              {children\n                ? children(closeMenu)\n                : items?.map((item, i) => (\n                    <button\n                      key={i}\n                      ref={(node) => {\n                        listRef.current[i] = node;\n                      }}\n                      type=\"button\"\n                      role=\"menuitem\"\n                      tabIndex={i === activeIndex ? 0 : -1}\n                      disabled={item.disabled}\n                      title={item.title}\n                      className=\"flex w-full items-center gap-2 px-3 py-1.5 text-left text-xs text-popover-foreground hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50\"\n                      {...getItemProps({\n                        onClick: () => {\n                          item.onSelect();\n                          closeMenu();\n                        },\n                        onKeyDown: (event) => {\n                          if (event.key === \"Enter\" || event.key === \" \") {\n                            event.preventDefault();\n                            item.onSelect();\n                            closeMenu();\n                          }\n                        },\n                      })}\n                    >\n                      {item.icon && (\n                        <Icon\n                          {...(typeof item.icon === \"string\"\n                            ? { name: item.icon }\n                            : { icon: item.icon })}\n                        />\n                      )}\n                      {item.label}\n                    </button>\n                  ))}\n              {footer != null && (\n                <div className=\"border-t border-border px-3 py-1.5\">{footer}</div>\n              )}\n            </div>\n          </FloatingFocusManager>\n        </FloatingPortal>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport {\n  autoUpdate,\n  flip,\n  FloatingFocusManager,\n  FloatingList,\n  FloatingNode,\n  FloatingPortal,\n  FloatingTree,\n  offset,\n  shift,\n  useClick,\n  useDismiss,\n  useFloating,\n  useFloatingNodeId,\n  useFloatingTree,\n  useInteractions,\n  useListNavigation,\n  useRole,\n} from \"@floating-ui/react\";\nimport { cn } from \"../lib/utils\";\nimport { Button, type ButtonProps } from \"../components/button\";\nimport { Icon, type StaticIconComponent } from \"../data/Icon\";\nimport { UiChevronDown } from \"../icons\";\nimport { MENU_POPOVER_CLASS, MenuContext } from \"./dropdownMenuContext\";\nimport { MenuItemList } from \"./DropdownMenuSubmenu\";\nimport { useEscapeLayer, useFloatingZIndex } from \"./modalStack\";\n\nexport type DropdownMenuItem = {\n  /** Visible label. */\n  label: ReactNode;\n  /** Called when the item is chosen. Ignored when the item has `children`. */\n  onSelect: () => void;\n  /** Iconify name or imported icon component rendered before the label. */\n  icon?: string | StaticIconComponent;\n  /** CSS colour applied to this item's icon (the glyph fills `currentColor`). */\n  iconColor?: string;\n  /**\n   * Section header. A non-interactive header renders above the first item of\n   * each contiguous group — provide items pre-sorted by `group`. Items without\n   * a `group` render no header.\n   */\n  group?: string;\n  /** Browser tooltip for the item. */\n  title?: string;\n  /** Disable selection. */\n  disabled?: boolean;\n  /**\n   * Nested submenu items. When present the item becomes a submenu trigger: it\n   * opens a flyout of `children` (recursively) on hover / click / ArrowRight\n   * instead of firing `onSelect`.\n   */\n  children?: DropdownMenuItem[];\n};\n\nexport type DropdownMenuProps = {\n  /** Trigger label. Ignored when `trigger` is provided. */\n  label?: ReactNode;\n  /** Icon shown before the trigger label. Ignored when `trigger` is provided. */\n  icon?: string | StaticIconComponent;\n  /** Hide the trailing chevron on the default trigger. */\n  hideChevron?: boolean;\n  /** Variant forwarded to the default Button trigger. */\n  variant?: ButtonProps[\"variant\"];\n  /** Size forwarded to the default Button trigger. */\n  size?: ButtonProps[\"size\"];\n  /** Fully custom trigger. Receives no props; the menu wraps it with open state. */\n  trigger?: ReactNode;\n  /** Declarative menu items. Provide this or `children`, not both. */\n  items?: DropdownMenuItem[];\n  /** Custom menu content. Use `closeMenu` to dismiss after a selection. */\n  children?: (closeMenu: () => void) => ReactNode;\n  /** Rendered at the top of the menu, above the items/children. */\n  header?: ReactNode;\n  /** Rendered at the bottom of the menu, below the items/children (e.g. a \"Show more…\" link). */\n  footer?: ReactNode;\n  /** Horizontal alignment of the menu relative to the trigger. */\n  align?: \"left\" | \"right\";\n  /** Notified whenever the menu opens or closes. */\n  onOpenChange?: (open: boolean) => void;\n  /** Browser tooltip / accessible label for the default trigger. */\n  title?: string;\n  /** Accessible label (`aria-label`) for the floating menu element itself. */\n  menuLabel?: string;\n  /** Classes applied to the wrapper. */\n  className?: string;\n  /** Classes applied to the floating menu. */\n  menuClassName?: string;\n};\n\n/**\n * A trigger + floating menu. Flat `items` render as a single list; an item with\n * `children` opens a flyout submenu. The FloatingTree lets every level cooperate\n * on focus and dismissal, so selecting any leaf closes the whole menu.\n */\nexport function DropdownMenu(props: DropdownMenuProps) {\n  return (\n    <FloatingTree>\n      <DropdownMenuRoot {...props} />\n    </FloatingTree>\n  );\n}\n\nfunction DropdownMenuRoot({\n  label,\n  icon,\n  hideChevron = false,\n  variant = \"outline\",\n  size = \"sm\",\n  trigger,\n  items,\n  children,\n  header,\n  footer,\n  align = \"right\",\n  onOpenChange,\n  title,\n  menuLabel,\n  className,\n  menuClassName,\n}: DropdownMenuProps) {\n  const [open, setOpen] = useState(false);\n  const [activeIndex, setActiveIndex] = useState<number | null>(null);\n  const floatingZ = useFloatingZIndex();\n  const tree = useFloatingTree();\n  const nodeId = useFloatingNodeId();\n  const elementsRef = useRef<Array<HTMLElement | null>>([]);\n\n  const onOpenChangeRef = useRef(onOpenChange);\n  onOpenChangeRef.current = onOpenChange;\n  useEffect(() => {\n    onOpenChangeRef.current?.(open);\n  }, [open]);\n\n  const { refs, floatingStyles, context } = useFloating<HTMLDivElement>({\n    // nodeId is always defined inside the FloatingTree; guard for the type only.\n    ...(nodeId ? { nodeId } : {}),\n    open,\n    onOpenChange: setOpen,\n    // bottom-end / bottom-start reproduce the previous right/left alignment.\n    placement: align === \"right\" ? \"bottom-end\" : \"bottom-start\",\n    whileElementsMounted: autoUpdate,\n    // offset(4) ≈ the previous mt-1; flip opens upward at the bottom edge and\n    // shift slides the menu back on-screen at the horizontal edges.\n    middleware: [offset(4), flip({ padding: 8 }), shift({ padding: 8 })],\n  });\n\n  const click = useClick(context);\n  // useDismiss is React-tree aware: a press inside anything rendered through the\n  // menu's `children` render-prop — including a Modal that portals to\n  // document.body — propagates via React's synthetic events to the floating\n  // element and counts as \"inside\", so it won't dismiss the menu (which would\n  // unmount that child Modal). A Modal owned by a sibling/parent instead of this\n  // menu correctly does dismiss the menu, which is harmless since closing the\n  // menu does not unmount a Modal it doesn't own.\n  const dismiss = useDismiss(context, { escapeKey: false });\n  const role = useRole(context, { role: \"menu\" });\n  const listNav = useListNavigation(context, {\n    listRef: elementsRef,\n    activeIndex,\n    onNavigate: setActiveIndex,\n    loop: true,\n  });\n\n  const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([\n    click,\n    dismiss,\n    role,\n    listNav,\n  ]);\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();\n  };\n  useEscapeLayer(open, closeMenu);\n\n  // Selecting any leaf (at any depth) emits a tree-wide \"click\"; the root closes\n  // and restores focus to the trigger.\n  const closeMenuRef = useRef(closeMenu);\n  closeMenuRef.current = closeMenu;\n  useEffect(() => {\n    if (!tree) return;\n    const onTreeClick = () => closeMenuRef.current();\n    tree.events.on(\"click\", onTreeClick);\n    return () => tree.events.off(\"click\", onTreeClick);\n  }, [tree]);\n\n  return (\n    <FloatingNode id={nodeId}>\n      <div className={cn(\"relative inline-flex\", className)}>\n        {trigger ? (\n          <span\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </span>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && <Icon {...(typeof icon === \"string\" ? { name: icon } : { icon })} />}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager context={context} modal={false} closeOnFocusOut={false}>\n              <div\n                ref={refs.setFloating}\n                role=\"menu\"\n                aria-label={menuLabel}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n                {...getFloatingProps()}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">{header}</div>\n                )}\n                {children ? (\n                  children(closeMenu)\n                ) : (\n                  <MenuContext.Provider\n                    value={{\n                      getItemProps,\n                      activeIndex,\n                      setActiveIndex,\n                      setHasFocusInside: () => {},\n                      isOpen: open,\n                    }}\n                  >\n                    <FloatingList elementsRef={elementsRef}>\n                      <MenuItemList items={items ?? []} />\n                    </FloatingList>\n                  </MenuContext.Provider>\n                )}\n                {footer != null && (\n                  <div className=\"border-t border-border px-3 py-1.5\">{footer}</div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"names":[],"mappings":"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"}