@flanksource/clicky-ui 0.3.59 → 0.3.60

package/dist/overlay/DropdownMenu.cjs

@@ -18,22 +18,22 @@ let _floating_ui_react = require("@floating-ui/react");
 function DropdownMenu(props) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_floating_ui_react.FloatingTree, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownMenuRoot, { ...props }) });
 }
-function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline", size = "sm", trigger, items, children, header, footer, align = "right", onOpenChange, title, menuLabel, className, menuClassName }) {
+function DropdownMenuRoot({ role: popupRole = "menu", label, icon, hideChevron = false, variant = "outline", size = "sm", trigger, items, children, header, footer, align = "right", onOpenChange, title, menuLabel, className, menuClassName }) {
 	const [open, setOpen] = (0, react.useState)(false);
 	const [activeIndex, setActiveIndex] = (0, react.useState)(null);
 	const floatingZ = require_modalStack.useFloatingZIndex();
 	const tree = (0, _floating_ui_react.useFloatingTree)();
 	const nodeId = (0, _floating_ui_react.useFloatingNodeId)();
 	const elementsRef = (0, react.useRef)([]);
-	const onOpenChangeRef = (0, react.useRef)(onOpenChange);
-	onOpenChangeRef.current = onOpenChange;
-	(0, react.useEffect)(() => {
-		onOpenChangeRef.current?.(open);
-	}, [open]);
+	const changeOpen = (next) => {
+		if (next === open) return;
+		setOpen(next);
+		onOpenChange?.(next);
+	};
 	const { refs, floatingStyles, context } = (0, _floating_ui_react.useFloating)({
 		...nodeId ? { nodeId } : {},
 		open,
-		onOpenChange: setOpen,
+		onOpenChange: changeOpen,
 		placement: align === "right" ? "bottom-end" : "bottom-start",
 		whileElementsMounted: _floating_ui_react.autoUpdate,
 		middleware: [
@@ -45,7 +45,7 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 	});
 	const click = (0, _floating_ui_react.useClick)(context);
 	const dismiss = (0, _floating_ui_react.useDismiss)(context, { escapeKey: false });
-	const role = (0, _floating_ui_react.useRole)(context, { role: "menu" });
+	const role = (0, _floating_ui_react.useRole)(context, { role: popupRole });
 	const listNav = (0, _floating_ui_react.useListNavigation)(context, {
 		listRef: elementsRef,
 		activeIndex,
@@ -56,15 +56,17 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 		click,
 		dismiss,
 		role,
-		listNav
+		...popupRole === "menu" ? [listNav] : []
 	]);
 	const closeMenu = () => {
-		setOpen(false);
+		changeOpen(false);
 		if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
 	};
 	require_modalStack.useEscapeLayer(open, closeMenu);
 	const closeMenuRef = (0, react.useRef)(closeMenu);
-	closeMenuRef.current = closeMenu;
+	(0, react.useLayoutEffect)(() => {
+		closeMenuRef.current = closeMenu;
+	});
 	(0, react.useEffect)(() => {
 		if (!tree) return;
 		const onTreeClick = () => closeMenuRef.current();
@@ -78,7 +80,7 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 			children: [trigger ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_slot.Slot, {
 				ref: refs.setReference,
 				className: "inline-flex",
-				"aria-haspopup": "menu",
+				"aria-haspopup": popupRole,
 				"aria-expanded": open,
 				...getReferenceProps(),
 				children: trigger
@@ -88,7 +90,7 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 				variant,
 				size,
 				title,
-				"aria-haspopup": "menu",
+				"aria-haspopup": popupRole,
 				"aria-expanded": open,
 				...getReferenceProps(),
 				children: [
@@ -103,7 +105,8 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 					ref: refs.setFloating,
 					...getFloatingProps(),
-					role: "menu",
+					role: popupRole,
+					"aria-modal": popupRole === "dialog" ? false : void 0,
 					"aria-label": menuLabel,
 					...menuLabel ? { "aria-labelledby": void 0 } : {},
 					style: {

package/dist/overlay/DropdownMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.cjs","names":["FloatingTree","useState","useFloatingZIndex","useFloatingTree","useFloatingNodeId","useRef","useFloating","autoUpdate","offset","flip","shift","menuViewportSize","useClick","useDismiss","useRole","useListNavigation","useInteractions","FloatingNode","cn","Slot","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager","MenuContext","FloatingList","MenuItemList"],"sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\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 {\n  MENU_POPOVER_CLASS,\n  MenuContext,\n  menuViewportSize,\n} 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  /** Theme-aware classes applied to this item's icon. */\n  iconClassName?: string | undefined;\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  /** Editor or explanatory content above a submenu's choices. */\n  header?: ReactNode;\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  /** Custom trigger element. Its root receives menu state and interaction props. */\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: [\n      offset(4),\n      flip({ padding: 8 }),\n      shift({ padding: 8 }),\n      menuViewportSize,\n    ],\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, dismiss, role, listNav],\n  );\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      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          <Slot\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </Slot>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            // Opening a menu never submits the form the trigger sits in.\n            type=\"button\"\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role=\"menu\"\n                aria-label={menuLabel}\n                {...(menuLabel ? { \"aria-labelledby\": undefined } : {})}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </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\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.cjs","names":["FloatingTree","useState","useFloatingZIndex","useFloatingTree","useFloatingNodeId","useRef","useFloating","autoUpdate","offset","flip","shift","menuViewportSize","useClick","useDismiss","useRole","useListNavigation","useInteractions","FloatingNode","cn","Slot","Button","Icon","UiChevronDown","FloatingPortal","FloatingFocusManager","MenuContext","FloatingList","MenuItemList"],"sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\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 {\n  MENU_POPOVER_CLASS,\n  MenuContext,\n  menuViewportSize,\n} 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  /** Theme-aware classes applied to this item's icon. */\n  iconClassName?: string | undefined;\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  /** Editor or explanatory content above a submenu's choices. */\n  header?: ReactNode;\n};\n\nexport type DropdownMenuProps = {\n  role?: \"menu\" | \"dialog\";\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  /** Custom trigger element. Its root receives menu state and interaction props. */\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  role: popupRole = \"menu\",\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  // Every open/close goes through here, so the host hears each change from the\n  // event that caused it rather than from an effect after the render.\n  const changeOpen = (next: boolean) => {\n    if (next === open) return;\n    setOpen(next);\n    onOpenChange?.(next);\n  };\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: changeOpen,\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: [\n      offset(4),\n      flip({ padding: 8 }),\n      shift({ padding: 8 }),\n      menuViewportSize,\n    ],\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: popupRole });\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, dismiss, role, ...(popupRole === \"menu\" ? [listNav] : [])],\n  );\n\n  const closeMenu = () => {\n    changeOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      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  // The listener subscribes once per tree; it reads the latest closeMenu,\n  // which is published after each commit rather than during render.\n  const closeMenuRef = useRef(closeMenu);\n  useLayoutEffect(() => {\n    closeMenuRef.current = closeMenu;\n  });\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          <Slot\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup={popupRole}\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </Slot>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            // Opening a menu never submits the form the trigger sits in.\n            type=\"button\"\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup={popupRole}\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role={popupRole}\n                aria-modal={popupRole === \"dialog\" ? false : undefined}\n                aria-label={menuLabel}\n                {...(menuLabel ? { \"aria-labelledby\": undefined } : {})}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </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\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"mappings":"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"}

package/dist/overlay/DropdownMenu.d.ts

@@ -32,6 +32,7 @@ export type DropdownMenuItem = {
     header?: ReactNode;
 };
 export type DropdownMenuProps = {
+    role?: "menu" | "dialog";
     /** Trigger label. Ignored when `trigger` is provided. */
     label?: ReactNode;
     /** Icon shown before the trigger label. Ignored when `trigger` is provided. */

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;AAsBpE,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAU9D,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,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC;;;;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;IAC9B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,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;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,+BAMpD"}
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../src/overlay/DropdownMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAgD,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAsBrF,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,EAAQ,KAAK,mBAAmB,EAAE,MAAM,cAAc,CAAC;AAU9D,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,uDAAuD;IACvD,aAAa,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACnC;;;;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;IAC9B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IACzB,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,+BAMpD"}

package/dist/overlay/DropdownMenu.js

@@ -5,7 +5,7 @@ import { Button } from "../components/button.js";
 import { MenuContext, menuViewportSize } from "./dropdownMenuContext.js";
 import { useEscapeLayer, useFloatingZIndex } from "./modalStack.js";
 import { MenuItemList } from "./DropdownMenuSubmenu.js";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, autoUpdate, flip, offset, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingTree, useInteractions, useListNavigation, useRole } from "@floating-ui/react";
@@ -18,22 +18,22 @@ import { FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, Float
 function DropdownMenu(props) {
 	return /* @__PURE__ */ jsx(FloatingTree, { children: /* @__PURE__ */ jsx(DropdownMenuRoot, { ...props }) });
 }
-function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline", size = "sm", trigger, items, children, header, footer, align = "right", onOpenChange, title, menuLabel, className, menuClassName }) {
+function DropdownMenuRoot({ role: popupRole = "menu", label, icon, hideChevron = false, variant = "outline", size = "sm", trigger, items, children, header, footer, align = "right", onOpenChange, title, menuLabel, className, menuClassName }) {
 	const [open, setOpen] = useState(false);
 	const [activeIndex, setActiveIndex] = useState(null);
 	const floatingZ = useFloatingZIndex();
 	const tree = useFloatingTree();
 	const nodeId = useFloatingNodeId();
 	const elementsRef = useRef([]);
-	const onOpenChangeRef = useRef(onOpenChange);
-	onOpenChangeRef.current = onOpenChange;
-	useEffect(() => {
-		onOpenChangeRef.current?.(open);
-	}, [open]);
+	const changeOpen = (next) => {
+		if (next === open) return;
+		setOpen(next);
+		onOpenChange?.(next);
+	};
 	const { refs, floatingStyles, context } = useFloating({
 		...nodeId ? { nodeId } : {},
 		open,
-		onOpenChange: setOpen,
+		onOpenChange: changeOpen,
 		placement: align === "right" ? "bottom-end" : "bottom-start",
 		whileElementsMounted: autoUpdate,
 		middleware: [
@@ -45,7 +45,7 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 	});
 	const click = useClick(context);
 	const dismiss = useDismiss(context, { escapeKey: false });
-	const role = useRole(context, { role: "menu" });
+	const role = useRole(context, { role: popupRole });
 	const listNav = useListNavigation(context, {
 		listRef: elementsRef,
 		activeIndex,
@@ -56,15 +56,17 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 		click,
 		dismiss,
 		role,
-		listNav
+		...popupRole === "menu" ? [listNav] : []
 	]);
 	const closeMenu = () => {
-		setOpen(false);
+		changeOpen(false);
 		if (refs.domReference.current instanceof HTMLElement) refs.domReference.current.focus();
 	};
 	useEscapeLayer(open, closeMenu);
 	const closeMenuRef = useRef(closeMenu);
-	closeMenuRef.current = closeMenu;
+	useLayoutEffect(() => {
+		closeMenuRef.current = closeMenu;
+	});
 	useEffect(() => {
 		if (!tree) return;
 		const onTreeClick = () => closeMenuRef.current();
@@ -78,7 +80,7 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 			children: [trigger ? /* @__PURE__ */ jsx(Slot, {
 				ref: refs.setReference,
 				className: "inline-flex",
-				"aria-haspopup": "menu",
+				"aria-haspopup": popupRole,
 				"aria-expanded": open,
 				...getReferenceProps(),
 				children: trigger
@@ -88,7 +90,7 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 				variant,
 				size,
 				title,
-				"aria-haspopup": "menu",
+				"aria-haspopup": popupRole,
 				"aria-expanded": open,
 				...getReferenceProps(),
 				children: [
@@ -103,7 +105,8 @@ function DropdownMenuRoot({ label, icon, hideChevron = false, variant = "outline
 				children: /* @__PURE__ */ jsxs("div", {
 					ref: refs.setFloating,
 					...getFloatingProps(),
-					role: "menu",
+					role: popupRole,
+					"aria-modal": popupRole === "dialog" ? false : void 0,
 					"aria-label": menuLabel,
 					...menuLabel ? { "aria-labelledby": void 0 } : {},
 					style: {

package/dist/overlay/DropdownMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\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 {\n  MENU_POPOVER_CLASS,\n  MenuContext,\n  menuViewportSize,\n} 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  /** Theme-aware classes applied to this item's icon. */\n  iconClassName?: string | undefined;\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  /** Editor or explanatory content above a submenu's choices. */\n  header?: ReactNode;\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  /** Custom trigger element. Its root receives menu state and interaction props. */\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: [\n      offset(4),\n      flip({ padding: 8 }),\n      shift({ padding: 8 }),\n      menuViewportSize,\n    ],\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, dismiss, role, listNav],\n  );\n\n  const closeMenu = () => {\n    setOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      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          <Slot\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </Slot>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            // Opening a menu never submits the form the trigger sits in.\n            type=\"button\"\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup=\"menu\"\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role=\"menu\"\n                aria-label={menuLabel}\n                {...(menuLabel ? { \"aria-labelledby\": undefined } : {})}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </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\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"DropdownMenu.js","names":[],"sources":["../../src/overlay/DropdownMenu.tsx"],"sourcesContent":["import { useEffect, useLayoutEffect, useRef, useState, type ReactNode } from \"react\";\nimport { Slot } from \"@radix-ui/react-slot\";\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 {\n  MENU_POPOVER_CLASS,\n  MenuContext,\n  menuViewportSize,\n} 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  /** Theme-aware classes applied to this item's icon. */\n  iconClassName?: string | undefined;\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  /** Editor or explanatory content above a submenu's choices. */\n  header?: ReactNode;\n};\n\nexport type DropdownMenuProps = {\n  role?: \"menu\" | \"dialog\";\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  /** Custom trigger element. Its root receives menu state and interaction props. */\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  role: popupRole = \"menu\",\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  // Every open/close goes through here, so the host hears each change from the\n  // event that caused it rather than from an effect after the render.\n  const changeOpen = (next: boolean) => {\n    if (next === open) return;\n    setOpen(next);\n    onOpenChange?.(next);\n  };\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: changeOpen,\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: [\n      offset(4),\n      flip({ padding: 8 }),\n      shift({ padding: 8 }),\n      menuViewportSize,\n    ],\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: popupRole });\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, dismiss, role, ...(popupRole === \"menu\" ? [listNav] : [])],\n  );\n\n  const closeMenu = () => {\n    changeOpen(false);\n    if (refs.domReference.current instanceof HTMLElement)\n      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  // The listener subscribes once per tree; it reads the latest closeMenu,\n  // which is published after each commit rather than during render.\n  const closeMenuRef = useRef(closeMenu);\n  useLayoutEffect(() => {\n    closeMenuRef.current = closeMenu;\n  });\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          <Slot\n            ref={refs.setReference}\n            className=\"inline-flex\"\n            aria-haspopup={popupRole}\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {trigger}\n          </Slot>\n        ) : (\n          <Button\n            ref={refs.setReference as React.Ref<HTMLButtonElement>}\n            // Opening a menu never submits the form the trigger sits in.\n            type=\"button\"\n            variant={variant}\n            size={size}\n            title={title}\n            aria-haspopup={popupRole}\n            aria-expanded={open}\n            {...getReferenceProps()}\n          >\n            {icon && (\n              <Icon\n                {...(typeof icon === \"string\" ? { name: icon } : { icon })}\n              />\n            )}\n            {label}\n            {!hideChevron && <Icon icon={UiChevronDown} />}\n          </Button>\n        )}\n        {open && (\n          <FloatingPortal>\n            <FloatingFocusManager\n              context={context}\n              modal={false}\n              closeOnFocusOut={false}\n            >\n              <div\n                ref={refs.setFloating}\n                {...getFloatingProps()}\n                role={popupRole}\n                aria-modal={popupRole === \"dialog\" ? false : undefined}\n                aria-label={menuLabel}\n                {...(menuLabel ? { \"aria-labelledby\": undefined } : {})}\n                style={{ ...floatingStyles, zIndex: floatingZ }}\n                className={cn(MENU_POPOVER_CLASS, menuClassName)}\n              >\n                {header != null && (\n                  <div className=\"border-b border-border px-3 py-1.5\">\n                    {header}\n                  </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\">\n                    {footer}\n                  </div>\n                )}\n              </div>\n            </FloatingFocusManager>\n          </FloatingPortal>\n        )}\n      </div>\n    </FloatingNode>\n  );\n}\n"],"mappings":"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"}