@gridui/dropdown-menu 1.1.7 → 2.0.0

package/README.md

@@ -1,9 +1,17 @@
 # @gridui/dropdown-menu
 
-Core family. Public API: `ContextMenu`, `ContextMenuProps`, `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuContentProps`, `DropdownMenuItem`, `DropdownMenuItemProps`, `DropdownMenuLabel`, `DropdownMenuLabelProps`, `DropdownMenuProps`, `DropdownMenuRadioGroup`, `DropdownMenuRadioGroupProps`, `DropdownMenuRadioItem`, `DropdownMenuRadioItemProps`, `DropdownMenuTrigger`, `DropdownMenuTriggerProps`, `dropdownContentStyles`, `dropdownIndicatorStyles`, `dropdownItemStyles`, `dropdownLabelStyles`.
+Core family. Public API: `ContextMenu`, `ContextMenuProps`, `DropdownMenu`, `DropdownMenuContent`, `DropdownMenuContentProps`, `DropdownMenuItem`, `DropdownMenuItemProps`, `DropdownMenuLabel`, `DropdownMenuLabelProps`, `DropdownMenuProps`, `DropdownMenuRadioGroup`, `DropdownMenuRadioGroupProps`, `DropdownMenuRadioItem`, `DropdownMenuRadioItemProps`, `DropdownMenuTrigger`, `DropdownMenuTriggerProps`, `dropdownContentStyles`.
 
-Import components from `@gridui/dropdown-menu` and load `@gridui/dropdown-menu/styles.css` after Theme.
-Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
+Import components from `@gridui/dropdown-menu` and load these styles in order:
+
+```css
+@import "@gridui/theme/styles.css";
+@import "@gridui/overlay/styles.css";
+@import "@gridui/dropdown-menu/styles.css";
+```
+
+Overlay supplies popup surfaces, option rows, group labels, and selection
+indicators. Applications own routes, labels, state persistence, and branding.
 
 See [component ownership](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/component-ownership.md) and [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/dropdown-menu/.changeset/history).
 
@@ -13,7 +21,8 @@ Import `Button`, `ButtonLink`, `buttonClass`, and `useAsyncAction`
 from [`@gridui/button`](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/button/README.md). Load that package's `styles.css`
 for standalone buttons and composed actions. The Button package owns
 native semantics, variants, sizes, icons, loading, and action lifecycle behavior.
-DropdownMenu uses Button through its public API.
+Compose a styled trigger with `<DropdownMenuTrigger asChild>` and `Button`,
+loading Button’s stylesheet when used. DropdownMenu does not require Button.
 
 `@gridui/dropdown-menu` wraps Radix Dropdown Menu.
 It exports the root, trigger, portalled content, items, label, radio
@@ -22,8 +31,7 @@ its separate `styles.css` export. Radix owns keyboard navigation, focus return,
 Escape dismissal, and viewport collisions. The portal avoids clipped grid
 boundaries.
 
-
-Surface motion uses `@gridui/overlay`; load `@gridui/overlay/styles.css` after Theme and before this family.
+Surface motion also uses `@gridui/overlay`.
 
 Menu options use Theme's outward hover, pressed, and focus outlines. Overlay
 mirrors their resolved outlines beyond the menu's scrolling boundary, including
@@ -33,3 +41,16 @@ and dismissal; the decorative outline layer cannot receive pointer input.
 The menu surface has no padding by default: option hit areas reach its inner
 border, and each option owns its text padding. Caller classes can add deliberate
 surface padding. Native scrolling uses Theme's shared scrollbar appearance.
+
+Menus, context menus, and selection lists share `overlayListStyles()` from Overlay
+and its `overlayListItemStyles()`, `overlayListLabelStyles()`, and
+`overlayListIndicatorStyles()` helpers. Selectable rows reserve
+a trailing 16px check slot in both selected and unselected states. Icons and text
+precede the check; RTL mirrors the order. Labels wrap within the available width.
+
+Set `morph` on `DropdownMenuContent` to expand the menu from its trigger
+when opening. `respectReducedMotion` defaults to `true`. Set it to `false`
+to play the expansion even when the system requests reduced motion.
+
+`ContextMenu` accepts `dir="ltr" | "rtl"` and forwards it to the menu root,
+so portal positioning and keyboard navigation use the same direction as its rows.

package/dist/context-menu/context-menu.d.ts

@@ -4,9 +4,10 @@
  * @namespace ContextMenu
  * @description Context Menu
  */
-import { type DropdownMenuContentProps } from "../dropdown-menu-content/dropdown-menu-content";
+import { type DropdownMenuProps } from "../dropdown-menu/dropdown-menu";
+import type { MenuContentOptions } from "../shared/menu-content-options";
 import { type FC, type ReactNode } from "react";
-export type ContextMenuProps = Omit<DropdownMenuContentProps, "children"> & {
+export type ContextMenuProps = Omit<MenuContentOptions, "children"> & Pick<DropdownMenuProps, "dir"> & {
     readonly x: number;
     readonly y: number;
     readonly label: string;

package/dist/dropdown-menu-content/dropdown-menu-content.d.ts

@@ -4,7 +4,7 @@
  * @namespace DropdownMenuContent
  * @description Dropdown Menu Content
  */
-import * as Primitive from "@radix-ui/react-dropdown-menu";
-import type { ComponentPropsWithRef, FC } from "react";
-export type DropdownMenuContentProps = ComponentPropsWithRef<typeof Primitive.Content>;
+import type { MenuContentOptions } from "../shared/menu-content-options";
+import type { FC } from "react";
+export type DropdownMenuContentProps = MenuContentOptions;
 export declare const DropdownMenuContent: FC<DropdownMenuContentProps>;

package/dist/dropdown-menu-content/use-menu-morph.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace DropdownMenuContent
+ * @description Use Menu Morph
+ */
+export declare const useMenuMorph: (element: HTMLDivElement | null, enabled: boolean) => void;

package/dist/index.d.ts

@@ -15,12 +15,9 @@ export type { DropdownMenuItemProps } from "./dropdown-menu-item/dropdown-menu-i
 export { DropdownMenuItem } from "./dropdown-menu-item/dropdown-menu-item";
 export type { DropdownMenuLabelProps } from "./dropdown-menu-label/dropdown-menu-label";
 export { DropdownMenuLabel } from "./dropdown-menu-label/dropdown-menu-label";
-export { dropdownLabelStyles } from "./dropdown-menu-label/style";
 export type { DropdownMenuRadioGroupProps } from "./dropdown-menu-radio-group/dropdown-menu-radio-group";
 export { DropdownMenuRadioGroup } from "./dropdown-menu-radio-group/dropdown-menu-radio-group";
 export type { DropdownMenuRadioItemProps } from "./dropdown-menu-radio-item/dropdown-menu-radio-item";
 export { DropdownMenuRadioItem } from "./dropdown-menu-radio-item/dropdown-menu-radio-item";
-export { dropdownIndicatorStyles } from "./dropdown-menu-radio-item/style";
 export type { DropdownMenuTriggerProps } from "./dropdown-menu-trigger/dropdown-menu-trigger";
 export { DropdownMenuTrigger } from "./dropdown-menu-trigger/dropdown-menu-trigger";
-export { dropdownItemStyles } from "./shared/style";

package/dist/index.js

@@ -20,19 +20,72 @@ var DropdownMenu = (props) => {
 };
 
 // src/dropdown-menu-content/style.ts
-import { overlaySurfaceStyles } from "@gridui/overlay";
+import { overlayListStyles } from "@gridui/overlay";
 import { cn } from "@gridui/style-utils";
 import { cva } from "class-variance-authority";
 var dropdownContentStyles = cva(cn(
-  overlaySurfaceStyles(),
+  overlayListStyles(),
   "gridui-dropdown-content",
-  "gridui-u-z-(--gridui-z-popover) gridui-u-min-w-44 gridui-u-max-w-[calc(100vw-2*var(--gridui-page-gutter))] gridui-u-max-h-(--radix-dropdown-menu-content-available-height) gridui-u-overflow-y-auto gridui-u-p-0 gridui-u-type-data"
+  "gridui-u-dropdown-menu--min-w-44 gridui-u-dropdown-menu--max-w-[calc(100vw-2*var(--gridui-page-gutter))] gridui-u-dropdown-menu--max-h-(--radix-dropdown-menu-content-available-height) gridui-u-dropdown-menu--overflow-y-auto"
 ));
 
+// src/dropdown-menu-content/use-menu-morph.ts
+import { useLayoutEffect } from "react";
+var useMenuMorph = (element, enabled) => {
+  useLayoutEffect(() => {
+    if (!element || !enabled) {
+      return;
+    }
+    const place = () => {
+      if (element.style.animation === "none") {
+        return;
+      }
+      observer.disconnect();
+      const document2 = element.ownerDocument;
+      const trigger = document2.getElementById(element.getAttribute("aria-labelledby") ?? "");
+      if (!trigger) {
+        return;
+      }
+      element.setAttribute("data-morph-measuring", "");
+      const menu = element.getBoundingClientRect();
+      element.removeAttribute("data-morph-measuring");
+      const anchor = trigger.getBoundingClientRect();
+      const width = Math.min(menu.width, anchor.width);
+      const height = Math.min(menu.height, anchor.height);
+      if (!width || !height) {
+        return;
+      }
+      const x = anchor.left + (anchor.width - width) / 2 - menu.left;
+      const y = anchor.top + (anchor.height - height) / 2 - menu.top;
+      const left = Math.max(0, Math.min(x, menu.width - width));
+      const top = Math.max(0, Math.min(y, menu.height - height));
+      element.style.setProperty("--gridui-menu-morph-clip", `inset(${top}px ${menu.width - width - left}px ${menu.height - height - top}px ${left}px)`);
+      element.style.setProperty("--gridui-menu-morph-offset", `${x - left}px, ${y - top}px`);
+      element.setAttribute("data-morph-ready", "");
+    };
+    const observer = new MutationObserver(place);
+    observer.observe(element, {
+      attributes: true,
+      attributeFilter: ["style"]
+    });
+    place();
+    return () => {
+      observer.disconnect();
+      element.removeAttribute("data-morph-ready");
+      element.style.removeProperty("--gridui-menu-morph-clip");
+      element.style.removeProperty("--gridui-menu-morph-offset");
+    };
+  }, [
+    element,
+    enabled
+  ]);
+};
+
 // src/dropdown-menu-content/dropdown-menu-content.tsx
-import { interactionLayerProps, RetainedLayer, useInteractionOutline, useScrollbars } from "@gridui/overlay";
+import { interactionLayerProps, OverlayOpen as OverlayOpen2, RetainedLayer, useInteractionOutline, useScrollbars } from "@gridui/overlay";
 import { cn as cn2 } from "@gridui/style-utils";
 import * as Primitive2 from "@radix-ui/react-dropdown-menu";
+import { useCallback, useContext, useState } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var DropdownMenuContent = (props) => {
   const {
@@ -41,9 +94,32 @@ var DropdownMenuContent = (props) => {
     forceMount,
     sideOffset = 8,
     align = "end",
+    morph = false,
+    respectReducedMotion = true,
     ...restProps
   } = props;
-  const scrollbarRef = useScrollbars({ ref: forwardedRef });
+  const open = useContext(OverlayOpen2);
+  const [
+    element,
+    setElement
+  ] = useState(null);
+  const morphRef = useCallback((node) => {
+    setElement(node);
+    if (typeof forwardedRef === "function") {
+      const cleanup = forwardedRef(node);
+      if (cleanup) {
+        return () => {
+          setElement(null);
+          cleanup();
+        };
+      }
+    } else if (forwardedRef) {
+      forwardedRef.current = node;
+    }
+    return void 0;
+  }, [forwardedRef]);
+  useMenuMorph(element, morph && open === true);
+  const scrollbarRef = useScrollbars({ ref: morph ? morphRef : forwardedRef });
   const ref = useInteractionOutline({
     ref: scrollbarRef,
     selector: '[role^="menuitem"]'
@@ -57,6 +133,7 @@ var DropdownMenuContent = (props) => {
       forceMount,
       align,
       sideOffset,
+      "data-morph-ignore-reduced-motion": !respectReducedMotion || void 0,
       className: cn2(dropdownContentStyles(), className)
     }
   );
@@ -82,12 +159,12 @@ var DropdownMenuTrigger = (props) => {
 };
 
 // src/context-menu/context-menu.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var ContextMenu = (props) => {
-  const { x, y, label, children, onClose, onCloseAutoFocus, onKeyDown, onPointerUpCapture, ...contentProps } = props;
-  const [returnFocus] = useState(() => {
+  const { x, y, label, dir, children, onClose, onCloseAutoFocus, onKeyDown, onPointerUpCapture, ...contentProps } = props;
+  const [returnFocus] = useState2(() => {
     return typeof document === "undefined" ? null : document.activeElement;
   });
   useEffect(() => {
@@ -109,6 +186,7 @@ var ContextMenu = (props) => {
     {
       open: true,
       modal: false,
+      dir,
       onOpenChange: (open) => {
         if (!open) {
           onClose();
@@ -181,18 +259,9 @@ var ContextMenu = (props) => {
   ), document.body);
 };
 
-// src/shared/style.ts
-import { cn as cn3 } from "@gridui/style-utils";
-import { cva as cva2 } from "class-variance-authority";
-var dropdownItemStyles = cva2(cn3(
-  "gridui-dropdown-item",
-  "gridui-u-flex gridui-u-min-h-10 gridui-u-items-center gridui-u-gap-gridui-8 gridui-u-px-gridui-8 gridui-u-py-gridui-8 gridui-u-rounded-control gridui-u-text-inherit gridui-u-no-underline gridui-u-cursor-pointer",
-  "gridui-u-data-[state=checked]:bg-brand-tint gridui-u-aria-selected:bg-brand-tint",
-  "gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:pointer-events-none"
-));
-
 // src/dropdown-menu-item/dropdown-menu-item.tsx
-import { cn as cn4 } from "@gridui/style-utils";
+import { overlayListItemStyles } from "@gridui/overlay";
+import { cn as cn3 } from "@gridui/style-utils";
 import * as Primitive4 from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var DropdownMenuItem = (props) => {
@@ -204,21 +273,14 @@ var DropdownMenuItem = (props) => {
     Primitive4.Item,
     {
       ...restProps,
-      className: cn4(dropdownItemStyles(), className)
+      className: cn3(overlayListItemStyles(), className)
     }
   );
 };
 
-// src/dropdown-menu-label/style.ts
-import { cn as cn5 } from "@gridui/style-utils";
-import { cva as cva3 } from "class-variance-authority";
-var dropdownLabelStyles = cva3(cn5(
-  "gridui-dropdown-label",
-  "gridui-u-p-gridui-8 gridui-u-text-muted gridui-u-type-caption"
-));
-
 // src/dropdown-menu-label/dropdown-menu-label.tsx
-import { cn as cn6 } from "@gridui/style-utils";
+import { overlayListLabelStyles } from "@gridui/overlay";
+import { cn as cn4 } from "@gridui/style-utils";
 import * as Primitive5 from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx6 } from "react/jsx-runtime";
 var DropdownMenuLabel = (props) => {
@@ -230,7 +292,7 @@ var DropdownMenuLabel = (props) => {
     Primitive5.Label,
     {
       ...restProps,
-      className: cn6(dropdownLabelStyles(), className)
+      className: cn4(overlayListLabelStyles(), className)
     }
   );
 };
@@ -247,16 +309,9 @@ var DropdownMenuRadioGroup = (props) => {
   );
 };
 
-// src/dropdown-menu-radio-item/style.ts
-import { cn as cn7 } from "@gridui/style-utils";
-import { cva as cva4 } from "class-variance-authority";
-var dropdownIndicatorStyles = cva4(cn7(
-  "gridui-dropdown-indicator",
-  "gridui-u-w-gridui-16 gridui-u-shrink-0 gridui-u-text-foreground"
-));
-
 // src/dropdown-menu-radio-item/dropdown-menu-radio-item.tsx
-import { cn as cn8 } from "@gridui/style-utils";
+import { overlayListIndicatorStyles, overlayListItemStyles as overlayListItemStyles2 } from "@gridui/overlay";
+import { cn as cn5 } from "@gridui/style-utils";
 import * as Primitive7 from "@radix-ui/react-dropdown-menu";
 import { Check } from "lucide-react";
 import { jsx as jsx8, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -270,12 +325,19 @@ var DropdownMenuRadioItem = (props) => {
     Primitive7.RadioItem,
     {
       ...restProps,
-      className: cn8(dropdownItemStyles(), className),
+      className: cn5(overlayListItemStyles2(), className),
       children: [
         /* @__PURE__ */ jsx8(
           "span",
           {
-            className: cn8(dropdownIndicatorStyles()),
+            className: "gridui-u-dropdown-menu--flex gridui-u-dropdown-menu--min-w-0 gridui-u-dropdown-menu--flex-1 gridui-u-dropdown-menu--items-center gridui-u-dropdown-menu--gap-gridui-8",
+            children
+          }
+        ),
+        /* @__PURE__ */ jsx8(
+          "span",
+          {
+            className: cn5(overlayListIndicatorStyles()),
             "aria-hidden": "true",
             children: /* @__PURE__ */ jsx8(Primitive7.ItemIndicator, { children: /* @__PURE__ */ jsx8(
               Check,
@@ -285,8 +347,7 @@ var DropdownMenuRadioItem = (props) => {
               }
             ) })
           }
-        ),
-        children
+        )
       ]
     }
   );
@@ -300,9 +361,6 @@ export {
   DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
   DropdownMenuTrigger,
-  dropdownContentStyles,
-  dropdownIndicatorStyles,
-  dropdownItemStyles,
-  dropdownLabelStyles
+  dropdownContentStyles
 };
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../src/dropdown-menu/dropdown-menu.tsx", "../src/dropdown-menu-content/style.ts", "../src/dropdown-menu-content/dropdown-menu-content.tsx", "../src/dropdown-menu-trigger/dropdown-menu-trigger.tsx", "../src/context-menu/context-menu.tsx", "../src/shared/style.ts", "../src/dropdown-menu-item/dropdown-menu-item.tsx", "../src/dropdown-menu-label/style.ts", "../src/dropdown-menu-label/dropdown-menu-label.tsx", "../src/dropdown-menu-radio-group/dropdown-menu-radio-group.tsx", "../src/dropdown-menu-radio-item/style.ts", "../src/dropdown-menu-radio-item/dropdown-menu-radio-item.tsx"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenu\n * @description Dropdown Menu\n */\n\nimport { OverlayOpen, useOverlayState } from \"@gridui/overlay\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuProps = ComponentPropsWithRef<typeof Primitive.Root>;\n\nexport const DropdownMenu: FC<DropdownMenuProps> = (props: DropdownMenuProps) => {\n    const state = useOverlayState(props);\n    return (<OverlayOpen.Provider\n        value={state.open}\n    >\n        <Primitive.Root\n            {...props}\n            {...state}\n        />\n    </OverlayOpen.Provider>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Style\n */\n\nimport { overlaySurfaceStyles } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownContentStyles = cva(cn(\n    overlaySurfaceStyles(),\n    \"gridui-dropdown-content\",\n    \"gridui-u-z-(--gridui-z-popover) gridui-u-min-w-44 gridui-u-max-w-[calc(100vw-2*var(--gridui-page-gutter))] gridui-u-max-h-(--radix-dropdown-menu-content-available-height) gridui-u-overflow-y-auto gridui-u-p-0 gridui-u-type-data\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Dropdown Menu Content\n */\n\nimport { dropdownContentStyles } from \"./style\";\nimport { interactionLayerProps, RetainedLayer, useInteractionOutline, useScrollbars } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuContentProps = ComponentPropsWithRef<typeof Primitive.Content>;\n\nexport const DropdownMenuContent: FC<DropdownMenuContentProps> = (props: DropdownMenuContentProps) => {\n    const {\n        className,\n        ref: forwardedRef,\n        forceMount,\n        sideOffset = 8,\n        align = \"end\",\n        ...restProps\n    } = props;\n    const scrollbarRef = useScrollbars({ ref: forwardedRef });\n    const ref = useInteractionOutline({\n        ref: scrollbarRef,\n        selector: '[role^=\"menuitem\"]',\n    });\n    const content = (<Primitive.Content\n        {...interactionLayerProps}\n        {...restProps}\n        ref={ref}\n        forceMount={forceMount}\n        align={align}\n        sideOffset={sideOffset}\n        className={cn(dropdownContentStyles(), className)}\n    />);\n    return (<Primitive.Portal\n        forceMount={forceMount}\n    >\n        {forceMount ? (<RetainedLayer>\n            {content}\n        </RetainedLayer>) : content}\n    </Primitive.Portal>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuTrigger\n * @description Dropdown Menu Trigger\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuTriggerProps = ComponentPropsWithRef<typeof Primitive.Trigger>;\n\nexport const DropdownMenuTrigger: FC<DropdownMenuTriggerProps> = (props: DropdownMenuTriggerProps) => {\n    return (<Primitive.Trigger\n        {...props}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace ContextMenu\n * @description Context Menu\n */\n\nimport { DropdownMenu } from \"../dropdown-menu/dropdown-menu\";\nimport { DropdownMenuContent, type DropdownMenuContentProps } from \"../dropdown-menu-content/dropdown-menu-content\";\nimport { DropdownMenuTrigger } from \"../dropdown-menu-trigger/dropdown-menu-trigger\";\nimport { type FC, type ReactNode, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport type ContextMenuProps = Omit<DropdownMenuContentProps, \"children\"> & {\n    readonly x: number;\n    readonly y: number;\n    readonly label: string;\n    readonly children: ReactNode;\n    readonly onClose: () => void;\n};\n\n/** Uses the same menu semantics and presentation as trigger-based dropdowns. */\nexport const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {\n    const { x, y, label, children, onClose, onCloseAutoFocus, onKeyDown, onPointerUpCapture, ...contentProps } = props;\n\n    const [returnFocus] = useState(() => {\n        return typeof document === \"undefined\" ? null : document.activeElement;\n    });\n    useEffect(() => {\n\n        const dismissWhenInactive = () => {\n\n            if (!document.hasFocus()) {\n                onClose();\n            }\n        };\n        window.addEventListener(\"blur\", dismissWhenInactive);\n\n        return () => {\n\n            window.removeEventListener(\"blur\", dismissWhenInactive);\n        };\n    }, [onClose]);\n\n    if (typeof document === \"undefined\") {\n        return null;\n    }\n    return createPortal((<DropdownMenu\n        key={`${x}:${y}`}\n        open\n        modal={false}\n        onOpenChange={open => {\n\n            if (!open) {\n                onClose();\n            }\n        }}\n    >\n        <DropdownMenuTrigger\n            asChild\n        >\n            <button\n                type=\"button\"\n                tabIndex={-1}\n                aria-hidden=\"true\"\n                style={{\n                    position: \"fixed\",\n                    left: x,\n                    top: y,\n                    width: 0,\n                    height: 0,\n                    padding: 0,\n                    border: 0,\n                    opacity: 0,\n                    pointerEvents: \"none\",\n                }}\n            />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n            aria-label={label}\n            side=\"bottom\"\n            align=\"start\"\n            sideOffset={0}\n            collisionPadding={8}\n            {...contentProps}\n            onPointerUpCapture={event => {\n                onPointerUpCapture?.(event);\n                // The release that opens a flush context menu must not select its first item.\n                if (event.button !== 0 || event.ctrlKey) {\n                    event.preventDefault();\n                }\n            }}\n            onCloseAutoFocus={event => {\n                onCloseAutoFocus?.(event);\n                if (event.defaultPrevented) {\n                    return;\n                }\n                event.preventDefault();\n                if (document.activeElement === document.body\n                    && returnFocus instanceof HTMLElement\n                    && returnFocus.isConnected) {\n                    returnFocus.focus();\n                }\n            }}\n            onKeyDown={event => {\n\n                onKeyDown?.(event);\n                if (!event.defaultPrevented && event.key === \"Tab\") {\n                    event.preventDefault();\n                    onClose();\n                }\n            }}\n        >\n            {children}\n        </DropdownMenuContent>\n    </DropdownMenu>), document.body);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace Shared\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownItemStyles = cva(cn(\n    \"gridui-dropdown-item\",\n    \"gridui-u-flex gridui-u-min-h-10 gridui-u-items-center gridui-u-gap-gridui-8 gridui-u-px-gridui-8 gridui-u-py-gridui-8 gridui-u-rounded-control gridui-u-text-inherit gridui-u-no-underline gridui-u-cursor-pointer\",\n    \"gridui-u-data-[state=checked]:bg-brand-tint gridui-u-aria-selected:bg-brand-tint\",\n    \"gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:pointer-events-none\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuItem\n * @description Dropdown Menu Item\n */\n\nimport { dropdownItemStyles } from \"../shared/style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuItemProps = ComponentPropsWithRef<typeof Primitive.Item>;\n\nexport const DropdownMenuItem: FC<DropdownMenuItemProps> = (props: DropdownMenuItemProps) => {\n    const {\n        className,\n        ...restProps\n    } = props;\n    return (<Primitive.Item\n        {...restProps}\n        className={cn(dropdownItemStyles(), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownLabelStyles = cva(cn(\n    \"gridui-dropdown-label\",\n    \"gridui-u-p-gridui-8 gridui-u-text-muted gridui-u-type-caption\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Dropdown Menu Label\n */\n\nimport { dropdownLabelStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuLabelProps = ComponentPropsWithRef<typeof Primitive.Label>;\n\nexport const DropdownMenuLabel: FC<DropdownMenuLabelProps> = (props: DropdownMenuLabelProps) => {\n    const {\n        className,\n        ...restProps\n    } = props;\n    return (<Primitive.Label\n        {...restProps}\n        className={cn(dropdownLabelStyles(), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioGroup\n * @description Dropdown Menu Radio Group\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuRadioGroupProps = ComponentPropsWithRef<typeof Primitive.RadioGroup>;\n\nexport const DropdownMenuRadioGroup: FC<DropdownMenuRadioGroupProps> = (props: DropdownMenuRadioGroupProps) => {\n    return (<Primitive.RadioGroup\n        {...props}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Style\n */\n\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownIndicatorStyles = cva(cn(\n    \"gridui-dropdown-indicator\",\n    \"gridui-u-w-gridui-16 gridui-u-shrink-0 gridui-u-text-foreground\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Dropdown Menu Radio Item\n */\n\nimport { dropdownItemStyles } from \"../shared/style\";\nimport { dropdownIndicatorStyles } from \"./style\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check } from \"lucide-react\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuRadioItemProps = ComponentPropsWithRef<typeof Primitive.RadioItem>;\n\nexport const DropdownMenuRadioItem: FC<DropdownMenuRadioItemProps> = (props: DropdownMenuRadioItemProps) => {\n    const {\n        className,\n        children,\n        ...restProps\n    } = props;\n    return (<Primitive.RadioItem\n        {...restProps}\n        className={cn(dropdownItemStyles(), className)}\n    >\n        <span\n            className={cn(dropdownIndicatorStyles())}\n            aria-hidden=\"true\"\n        >\n            <Primitive.ItemIndicator>\n                <Check\n                    size={16}\n                    aria-hidden=\"true\"\n                />\n            </Primitive.ItemIndicator>\n        </span>\n        {children}\n    </Primitive.RadioItem>);\n};\n"],
-  "mappings": "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",
-  "names": ["cn", "Primitive", "jsx", "Primitive", "jsx", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "Primitive", "jsx", "cn", "cva", "cn", "Primitive", "jsx", "jsxs"]
+  "sources": ["../src/dropdown-menu/dropdown-menu.tsx", "../src/dropdown-menu-content/style.ts", "../src/dropdown-menu-content/use-menu-morph.ts", "../src/dropdown-menu-content/dropdown-menu-content.tsx", "../src/dropdown-menu-trigger/dropdown-menu-trigger.tsx", "../src/context-menu/context-menu.tsx", "../src/dropdown-menu-item/dropdown-menu-item.tsx", "../src/dropdown-menu-label/dropdown-menu-label.tsx", "../src/dropdown-menu-radio-group/dropdown-menu-radio-group.tsx", "../src/dropdown-menu-radio-item/dropdown-menu-radio-item.tsx"],
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenu\n * @description Dropdown Menu\n */\n\nimport { OverlayOpen, useOverlayState } from \"@gridui/overlay\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuProps = ComponentPropsWithRef<typeof Primitive.Root>;\n\nexport const DropdownMenu: FC<DropdownMenuProps> = (props: DropdownMenuProps) => {\n    const state = useOverlayState(props);\n    return (<OverlayOpen.Provider\n        value={state.open}\n    >\n        <Primitive.Root\n            {...props}\n            {...state}\n        />\n    </OverlayOpen.Provider>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Style\n */\n\nimport { overlayListStyles } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport { cva } from \"class-variance-authority\";\n\nexport const dropdownContentStyles = cva(cn(\n    overlayListStyles(),\n    \"gridui-dropdown-content\",\n    \"gridui-u-dropdown-menu--min-w-44 gridui-u-dropdown-menu--max-w-[calc(100vw-2*var(--gridui-page-gutter))] gridui-u-dropdown-menu--max-h-(--radix-dropdown-menu-content-available-height) gridui-u-dropdown-menu--overflow-y-auto\",\n));\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Use Menu Morph\n */\n\nimport { useLayoutEffect } from \"react\";\n\nexport const useMenuMorph = (element: HTMLDivElement | null, enabled: boolean): void => {\n    useLayoutEffect(() => {\n        if (!element || !enabled) {\n            return;\n        }\n        const place = () => {\n            // Radix suppresses entrance animations until the menu has been positioned.\n            if (element.style.animation === \"none\") {\n                return;\n            }\n            observer.disconnect();\n            const document = element.ownerDocument;\n            const trigger = document.getElementById(element.getAttribute(\"aria-labelledby\") ?? \"\");\n            if (!trigger) {\n                return;\n            }\n            element.setAttribute(\"data-morph-measuring\", \"\");\n            const menu = element.getBoundingClientRect();\n            element.removeAttribute(\"data-morph-measuring\");\n            const anchor = trigger.getBoundingClientRect();\n            const width = Math.min(menu.width, anchor.width);\n            const height = Math.min(menu.height, anchor.height);\n            if (!width || !height) {\n                return;\n            }\n            const x = anchor.left + (anchor.width - width) / 2 - menu.left;\n            const y = anchor.top + (anchor.height - height) / 2 - menu.top;\n            const left = Math.max(0, Math.min(x, menu.width - width));\n            const top = Math.max(0, Math.min(y, menu.height - height));\n            element.style.setProperty(\"--gridui-menu-morph-clip\", `inset(${top}px ${menu.width - width - left}px ${menu.height - height - top}px ${left}px)`);\n            element.style.setProperty(\"--gridui-menu-morph-offset\", `${x - left}px, ${y - top}px`);\n            element.setAttribute(\"data-morph-ready\", \"\");\n        };\n        const observer = new MutationObserver(place);\n        observer.observe(element, {\n            attributes: true,\n            attributeFilter: [\"style\"],\n        });\n        place();\n        return () => {\n            observer.disconnect();\n            element.removeAttribute(\"data-morph-ready\");\n            element.style.removeProperty(\"--gridui-menu-morph-clip\");\n            element.style.removeProperty(\"--gridui-menu-morph-offset\");\n        };\n    }, [\n        element,\n        enabled,\n    ]);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuContent\n * @description Dropdown Menu Content\n */\n\nimport type { MenuContentOptions } from \"../shared/menu-content-options\";\nimport { dropdownContentStyles } from \"./style\";\nimport { useMenuMorph } from \"./use-menu-morph\";\nimport { interactionLayerProps, OverlayOpen, RetainedLayer, useInteractionOutline, useScrollbars } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { FC } from \"react\";\nimport { useCallback, useContext, useState } from \"react\";\n\nexport type DropdownMenuContentProps = MenuContentOptions;\n\nexport const DropdownMenuContent: FC<DropdownMenuContentProps> = (props: DropdownMenuContentProps) => {\n    const {\n        className,\n        ref: forwardedRef,\n        forceMount,\n        sideOffset = 8,\n        align = \"end\",\n        morph = false,\n        respectReducedMotion = true,\n        ...restProps\n    } = props;\n    const open = useContext(OverlayOpen);\n    const [\n        element,\n        setElement,\n    ] = useState<HTMLDivElement | null>(null);\n    const morphRef = useCallback((node: HTMLDivElement | null) => {\n        setElement(node);\n        if (typeof forwardedRef === \"function\") {\n            const cleanup = forwardedRef(node);\n            if (cleanup) {\n                return () => {\n                    setElement(null);\n                    cleanup();\n                };\n            }\n        } else if (forwardedRef) {\n            forwardedRef.current = node;\n        }\n        return undefined;\n    }, [forwardedRef]);\n    useMenuMorph(element, morph && open === true);\n    const scrollbarRef = useScrollbars({ ref: morph ? morphRef : forwardedRef });\n    const ref = useInteractionOutline({\n        ref: scrollbarRef,\n        selector: '[role^=\"menuitem\"]',\n    });\n    const content = (<Primitive.Content\n        {...interactionLayerProps}\n        {...restProps}\n        ref={ref}\n        forceMount={forceMount}\n        align={align}\n        sideOffset={sideOffset}\n        data-morph-ignore-reduced-motion={!respectReducedMotion || undefined}\n        className={cn(dropdownContentStyles(), className)}\n    />);\n    return (<Primitive.Portal\n        forceMount={forceMount}\n    >\n        {forceMount ? (<RetainedLayer>\n            {content}\n        </RetainedLayer>) : content}\n    </Primitive.Portal>);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuTrigger\n * @description Dropdown Menu Trigger\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuTriggerProps = ComponentPropsWithRef<typeof Primitive.Trigger>;\n\nexport const DropdownMenuTrigger: FC<DropdownMenuTriggerProps> = (props: DropdownMenuTriggerProps) => {\n    return (<Primitive.Trigger\n        {...props}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace ContextMenu\n * @description Context Menu\n */\n\nimport { DropdownMenu, type DropdownMenuProps } from \"../dropdown-menu/dropdown-menu\";\nimport { DropdownMenuContent } from \"../dropdown-menu-content/dropdown-menu-content\";\nimport { DropdownMenuTrigger } from \"../dropdown-menu-trigger/dropdown-menu-trigger\";\nimport type { MenuContentOptions } from \"../shared/menu-content-options\";\nimport { type FC, type ReactNode, useEffect, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\n\nexport type ContextMenuProps = Omit<MenuContentOptions, \"children\"> & Pick<DropdownMenuProps, \"dir\"> & {\n    readonly x: number;\n    readonly y: number;\n    readonly label: string;\n    readonly children: ReactNode;\n    readonly onClose: () => void;\n};\n\n/** Uses the same menu semantics and presentation as trigger-based dropdowns. */\nexport const ContextMenu: FC<ContextMenuProps> = (props: ContextMenuProps) => {\n    const { x, y, label, dir, children, onClose, onCloseAutoFocus, onKeyDown, onPointerUpCapture, ...contentProps } = props;\n\n    const [returnFocus] = useState(() => {\n        return typeof document === \"undefined\" ? null : document.activeElement;\n    });\n    useEffect(() => {\n\n        const dismissWhenInactive = () => {\n\n            if (!document.hasFocus()) {\n                onClose();\n            }\n        };\n        window.addEventListener(\"blur\", dismissWhenInactive);\n\n        return () => {\n\n            window.removeEventListener(\"blur\", dismissWhenInactive);\n        };\n    }, [onClose]);\n\n    if (typeof document === \"undefined\") {\n        return null;\n    }\n    return createPortal((<DropdownMenu\n        key={`${x}:${y}`}\n        open\n        modal={false}\n        dir={dir}\n        onOpenChange={open => {\n\n            if (!open) {\n                onClose();\n            }\n        }}\n    >\n        <DropdownMenuTrigger\n            asChild\n        >\n            <button\n                type=\"button\"\n                tabIndex={-1}\n                aria-hidden=\"true\"\n                style={{\n                    position: \"fixed\",\n                    left: x,\n                    top: y,\n                    width: 0,\n                    height: 0,\n                    padding: 0,\n                    border: 0,\n                    opacity: 0,\n                    pointerEvents: \"none\",\n                }}\n            />\n        </DropdownMenuTrigger>\n        <DropdownMenuContent\n            aria-label={label}\n            side=\"bottom\"\n            align=\"start\"\n            sideOffset={0}\n            collisionPadding={8}\n            {...contentProps}\n            onPointerUpCapture={event => {\n                onPointerUpCapture?.(event);\n                // The release that opens a flush context menu must not select its first item.\n                if (event.button !== 0 || event.ctrlKey) {\n                    event.preventDefault();\n                }\n            }}\n            onCloseAutoFocus={event => {\n                onCloseAutoFocus?.(event);\n                if (event.defaultPrevented) {\n                    return;\n                }\n                event.preventDefault();\n                if (document.activeElement === document.body\n                    && returnFocus instanceof HTMLElement\n                    && returnFocus.isConnected) {\n                    returnFocus.focus();\n                }\n            }}\n            onKeyDown={event => {\n\n                onKeyDown?.(event);\n                if (!event.defaultPrevented && event.key === \"Tab\") {\n                    event.preventDefault();\n                    onClose();\n                }\n            }}\n        >\n            {children}\n        </DropdownMenuContent>\n    </DropdownMenu>), document.body);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuItem\n * @description Dropdown Menu Item\n */\n\nimport { overlayListItemStyles } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuItemProps = ComponentPropsWithRef<typeof Primitive.Item>;\n\nexport const DropdownMenuItem: FC<DropdownMenuItemProps> = (props: DropdownMenuItemProps) => {\n    const {\n        className,\n        ...restProps\n    } = props;\n    return (<Primitive.Item\n        {...restProps}\n        className={cn(overlayListItemStyles(), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuLabel\n * @description Dropdown Menu Label\n */\n\nimport { overlayListLabelStyles } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuLabelProps = ComponentPropsWithRef<typeof Primitive.Label>;\n\nexport const DropdownMenuLabel: FC<DropdownMenuLabelProps> = (props: DropdownMenuLabelProps) => {\n    const {\n        className,\n        ...restProps\n    } = props;\n    return (<Primitive.Label\n        {...restProps}\n        className={cn(overlayListLabelStyles(), className)}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioGroup\n * @description Dropdown Menu Radio Group\n */\n\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuRadioGroupProps = ComponentPropsWithRef<typeof Primitive.RadioGroup>;\n\nexport const DropdownMenuRadioGroup: FC<DropdownMenuRadioGroupProps> = (props: DropdownMenuRadioGroupProps) => {\n    return (<Primitive.RadioGroup\n        {...props}\n    />);\n};\n", "/**\n * @author WMXPY\n * @package Dropdown Menu\n * @namespace DropdownMenuRadioItem\n * @description Dropdown Menu Radio Item\n */\n\nimport { overlayListIndicatorStyles, overlayListItemStyles } from \"@gridui/overlay\";\nimport { cn } from \"@gridui/style-utils\";\nimport * as Primitive from \"@radix-ui/react-dropdown-menu\";\nimport { Check } from \"lucide-react\";\nimport type { ComponentPropsWithRef, FC } from \"react\";\n\nexport type DropdownMenuRadioItemProps = ComponentPropsWithRef<typeof Primitive.RadioItem>;\n\nexport const DropdownMenuRadioItem: FC<DropdownMenuRadioItemProps> = (props: DropdownMenuRadioItemProps) => {\n    const {\n        className,\n        children,\n        ...restProps\n    } = props;\n    return (<Primitive.RadioItem\n        {...restProps}\n        className={cn(overlayListItemStyles(), className)}\n    >\n        <span\n            className=\"gridui-u-dropdown-menu--flex gridui-u-dropdown-menu--min-w-0 gridui-u-dropdown-menu--flex-1 gridui-u-dropdown-menu--items-center gridui-u-dropdown-menu--gap-gridui-8\"\n        >\n            {children}\n        </span>\n        <span\n            className={cn(overlayListIndicatorStyles())}\n            aria-hidden=\"true\"\n        >\n            <Primitive.ItemIndicator>\n                <Check\n                    size={16}\n                    aria-hidden=\"true\"\n                />\n            </Primitive.ItemIndicator>\n        </span>\n    </Primitive.RadioItem>);\n};\n"],
+  "mappings": ";AAOA,SAAS,aAAa,uBAAuB;AAC7C,YAAY,eAAe;AAUnB;AALD,IAAM,eAAsC,CAAC,UAA6B;AAC7E,QAAM,QAAQ,gBAAgB,KAAK;AACnC,SAAQ;AAAA,IAAC,YAAY;AAAA,IAAZ;AAAA,MACL,OAAO,MAAM;AAAA,MAEb;AAAA,QAAW;AAAA,QAAV;AAAA,UACI,GAAG;AAAA,UACH,GAAG;AAAA;AAAA,MACR;AAAA;AAAA,EACJ;AACJ;;;AChBA,SAAS,yBAAyB;AAClC,SAAS,UAAU;AACnB,SAAS,WAAW;AAEb,IAAM,wBAAwB,IAAI;AAAA,EACrC,kBAAkB;AAAA,EAClB;AAAA,EACA;AACJ,CAAC;;;ACRD,SAAS,uBAAuB;AAEzB,IAAM,eAAe,CAAC,SAAgC,YAA2B;AACpF,kBAAgB,MAAM;AAClB,QAAI,CAAC,WAAW,CAAC,SAAS;AACtB;AAAA,IACJ;AACA,UAAM,QAAQ,MAAM;AAEhB,UAAI,QAAQ,MAAM,cAAc,QAAQ;AACpC;AAAA,MACJ;AACA,eAAS,WAAW;AACpB,YAAMA,YAAW,QAAQ;AACzB,YAAM,UAAUA,UAAS,eAAe,QAAQ,aAAa,iBAAiB,KAAK,EAAE;AACrF,UAAI,CAAC,SAAS;AACV;AAAA,MACJ;AACA,cAAQ,aAAa,wBAAwB,EAAE;AAC/C,YAAM,OAAO,QAAQ,sBAAsB;AAC3C,cAAQ,gBAAgB,sBAAsB;AAC9C,YAAM,SAAS,QAAQ,sBAAsB;AAC7C,YAAM,QAAQ,KAAK,IAAI,KAAK,OAAO,OAAO,KAAK;AAC/C,YAAM,SAAS,KAAK,IAAI,KAAK,QAAQ,OAAO,MAAM;AAClD,UAAI,CAAC,SAAS,CAAC,QAAQ;AACnB;AAAA,MACJ;AACA,YAAM,IAAI,OAAO,QAAQ,OAAO,QAAQ,SAAS,IAAI,KAAK;AAC1D,YAAM,IAAI,OAAO,OAAO,OAAO,SAAS,UAAU,IAAI,KAAK;AAC3D,YAAM,OAAO,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,QAAQ,KAAK,CAAC;AACxD,YAAM,MAAM,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,KAAK,SAAS,MAAM,CAAC;AACzD,cAAQ,MAAM,YAAY,4BAA4B,SAAS,GAAG,MAAM,KAAK,QAAQ,QAAQ,IAAI,MAAM,KAAK,SAAS,SAAS,GAAG,MAAM,IAAI,KAAK;AAChJ,cAAQ,MAAM,YAAY,8BAA8B,GAAG,IAAI,IAAI,OAAO,IAAI,GAAG,IAAI;AACrF,cAAQ,aAAa,oBAAoB,EAAE;AAAA,IAC/C;AACA,UAAM,WAAW,IAAI,iBAAiB,KAAK;AAC3C,aAAS,QAAQ,SAAS;AAAA,MACtB,YAAY;AAAA,MACZ,iBAAiB,CAAC,OAAO;AAAA,IAC7B,CAAC;AACD,UAAM;AACN,WAAO,MAAM;AACT,eAAS,WAAW;AACpB,cAAQ,gBAAgB,kBAAkB;AAC1C,cAAQ,MAAM,eAAe,0BAA0B;AACvD,cAAQ,MAAM,eAAe,4BAA4B;AAAA,IAC7D;AAAA,EACJ,GAAG;AAAA,IACC;AAAA,IACA;AAAA,EACJ,CAAC;AACL;;;AChDA,SAAS,uBAAuB,eAAAC,cAAa,eAAe,uBAAuB,qBAAqB;AACxG,SAAS,MAAAC,WAAU;AACnB,YAAYC,gBAAe;AAE3B,SAAS,aAAa,YAAY,gBAAgB;AAyC7B,gBAAAC,YAAA;AArCd,IAAM,sBAAoD,CAAC,UAAoC;AAClG,QAAM;AAAA,IACF;AAAA,IACA,KAAK;AAAA,IACL;AAAA,IACA,aAAa;AAAA,IACb,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,uBAAuB;AAAA,IACvB,GAAG;AAAA,EACP,IAAI;AACJ,QAAM,OAAO,WAAWH,YAAW;AACnC,QAAM;AAAA,IACF;AAAA,IACA;AAAA,EACJ,IAAI,SAAgC,IAAI;AACxC,QAAM,WAAW,YAAY,CAAC,SAAgC;AAC1D,eAAW,IAAI;AACf,QAAI,OAAO,iBAAiB,YAAY;AACpC,YAAM,UAAU,aAAa,IAAI;AACjC,UAAI,SAAS;AACT,eAAO,MAAM;AACT,qBAAW,IAAI;AACf,kBAAQ;AAAA,QACZ;AAAA,MACJ;AAAA,IACJ,WAAW,cAAc;AACrB,mBAAa,UAAU;AAAA,IAC3B;AACA,WAAO;AAAA,EACX,GAAG,CAAC,YAAY,CAAC;AACjB,eAAa,SAAS,SAAS,SAAS,IAAI;AAC5C,QAAM,eAAe,cAAc,EAAE,KAAK,QAAQ,WAAW,aAAa,CAAC;AAC3E,QAAM,MAAM,sBAAsB;AAAA,IAC9B,KAAK;AAAA,IACL,UAAU;AAAA,EACd,CAAC;AACD,QAAM,UAAW,gBAAAG;AAAA,IAAW;AAAA,IAAV;AAAA,MACb,GAAG;AAAA,MACH,GAAG;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,oCAAkC,CAAC,wBAAwB;AAAA,MAC3D,WAAWF,IAAG,sBAAsB,GAAG,SAAS;AAAA;AAAA,EACpD;AACA,SAAQ,gBAAAE;AAAA,IAAW;AAAA,IAAV;AAAA,MACL;AAAA,MAEC,uBAAc,gBAAAA,KAAC,iBACX,mBACL,IAAoB;AAAA;AAAA,EACxB;AACJ;;;ACjEA,YAAYC,gBAAe;AAMf,gBAAAC,YAAA;AADL,IAAM,sBAAoD,CAAC,UAAoC;AAClG,SAAQ,gBAAAA;AAAA,IAAW;AAAA,IAAV;AAAA,MACJ,GAAG;AAAA;AAAA,EACR;AACJ;;;ACLA,SAAkC,WAAW,YAAAC,iBAAgB;AAC7D,SAAS,oBAAoB;AAoCJ,SAeb,OAAAC,MAfa;AAzBlB,IAAM,cAAoC,CAAC,UAA4B;AAC1E,QAAM,EAAE,GAAG,GAAG,OAAO,KAAK,UAAU,SAAS,kBAAkB,WAAW,oBAAoB,GAAG,aAAa,IAAI;AAElH,QAAM,CAAC,WAAW,IAAID,UAAS,MAAM;AACjC,WAAO,OAAO,aAAa,cAAc,OAAO,SAAS;AAAA,EAC7D,CAAC;AACD,YAAU,MAAM;AAEZ,UAAM,sBAAsB,MAAM;AAE9B,UAAI,CAAC,SAAS,SAAS,GAAG;AACtB,gBAAQ;AAAA,MACZ;AAAA,IACJ;AACA,WAAO,iBAAiB,QAAQ,mBAAmB;AAEnD,WAAO,MAAM;AAET,aAAO,oBAAoB,QAAQ,mBAAmB;AAAA,IAC1D;AAAA,EACJ,GAAG,CAAC,OAAO,CAAC;AAEZ,MAAI,OAAO,aAAa,aAAa;AACjC,WAAO;AAAA,EACX;AACA,SAAO,aAAc;AAAA,IAAC;AAAA;AAAA,MAElB,MAAI;AAAA,MACJ,OAAO;AAAA,MACP;AAAA,MACA,cAAc,UAAQ;AAElB,YAAI,CAAC,MAAM;AACP,kBAAQ;AAAA,QACZ;AAAA,MACJ;AAAA,MAEA;AAAA,wBAAAC;AAAA,UAAC;AAAA;AAAA,YACG,SAAO;AAAA,YAEP,0BAAAA;AAAA,cAAC;AAAA;AAAA,gBACG,MAAK;AAAA,gBACL,UAAU;AAAA,gBACV,eAAY;AAAA,gBACZ,OAAO;AAAA,kBACH,UAAU;AAAA,kBACV,MAAM;AAAA,kBACN,KAAK;AAAA,kBACL,OAAO;AAAA,kBACP,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,QAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,eAAe;AAAA,gBACnB;AAAA;AAAA,YACJ;AAAA;AAAA,QACJ;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACG,cAAY;AAAA,YACZ,MAAK;AAAA,YACL,OAAM;AAAA,YACN,YAAY;AAAA,YACZ,kBAAkB;AAAA,YACjB,GAAG;AAAA,YACJ,oBAAoB,WAAS;AACzB,mCAAqB,KAAK;AAE1B,kBAAI,MAAM,WAAW,KAAK,MAAM,SAAS;AACrC,sBAAM,eAAe;AAAA,cACzB;AAAA,YACJ;AAAA,YACA,kBAAkB,WAAS;AACvB,iCAAmB,KAAK;AACxB,kBAAI,MAAM,kBAAkB;AACxB;AAAA,cACJ;AACA,oBAAM,eAAe;AACrB,kBAAI,SAAS,kBAAkB,SAAS,QACjC,uBAAuB,eACvB,YAAY,aAAa;AAC5B,4BAAY,MAAM;AAAA,cACtB;AAAA,YACJ;AAAA,YACA,WAAW,WAAS;AAEhB,0BAAY,KAAK;AACjB,kBAAI,CAAC,MAAM,oBAAoB,MAAM,QAAQ,OAAO;AAChD,sBAAM,eAAe;AACrB,wBAAQ;AAAA,cACZ;AAAA,YACJ;AAAA,YAEC;AAAA;AAAA,QACL;AAAA;AAAA;AAAA,IAnEK,GAAG,CAAC,IAAI,CAAC;AAAA,EAoElB,GAAkB,SAAS,IAAI;AACnC;;;AC/GA,SAAS,6BAA6B;AACtC,SAAS,MAAAC,WAAU;AACnB,YAAYC,gBAAe;AAUf,gBAAAC,YAAA;AALL,IAAM,mBAA8C,CAAC,UAAiC;AACzF,QAAM;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,SAAQ,gBAAAA;AAAA,IAAW;AAAA,IAAV;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWF,IAAG,sBAAsB,GAAG,SAAS;AAAA;AAAA,EACpD;AACJ;;;AChBA,SAAS,8BAA8B;AACvC,SAAS,MAAAG,WAAU;AACnB,YAAYC,gBAAe;AAUf,gBAAAC,YAAA;AALL,IAAM,oBAAgD,CAAC,UAAkC;AAC5F,QAAM;AAAA,IACF;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,SAAQ,gBAAAA;AAAA,IAAW;AAAA,IAAV;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWF,IAAG,uBAAuB,GAAG,SAAS;AAAA;AAAA,EACrD;AACJ;;;AChBA,YAAYG,gBAAe;AAMf,gBAAAC,YAAA;AADL,IAAM,yBAA0D,CAAC,UAAuC;AAC3G,SAAQ,gBAAAA;AAAA,IAAW;AAAA,IAAV;AAAA,MACJ,GAAG;AAAA;AAAA,EACR;AACJ;;;ACTA,SAAS,4BAA4B,yBAAAC,8BAA6B;AAClE,SAAS,MAAAC,WAAU;AACnB,YAAYC,gBAAe;AAC3B,SAAS,aAAa;AAWV,SAIJ,OAAAC,MAJI,QAAAC,aAAA;AANL,IAAM,wBAAwD,CAAC,UAAsC;AACxG,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EACP,IAAI;AACJ,SAAQ,gBAAAA;AAAA,IAAW;AAAA,IAAV;AAAA,MACJ,GAAG;AAAA,MACJ,WAAWH,IAAGD,uBAAsB,GAAG,SAAS;AAAA,MAEhD;AAAA,wBAAAG;AAAA,UAAC;AAAA;AAAA,YACG,WAAU;AAAA,YAET;AAAA;AAAA,QACL;AAAA,QACA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAWF,IAAG,2BAA2B,CAAC;AAAA,YAC1C,eAAY;AAAA,YAEZ,0BAAAE,KAAW,0BAAV,EACG,0BAAAA;AAAA,cAAC;AAAA;AAAA,gBACG,MAAM;AAAA,gBACN,eAAY;AAAA;AAAA,YAChB,GACJ;AAAA;AAAA,QACJ;AAAA;AAAA;AAAA,EACJ;AACJ;",
+  "names": ["document", "OverlayOpen", "cn", "Primitive", "jsx", "Primitive", "jsx", "useState", "jsx", "cn", "Primitive", "jsx", "cn", "Primitive", "jsx", "Primitive", "jsx", "overlayListItemStyles", "cn", "Primitive", "jsx", "jsxs"]
 }

package/dist/shared/menu-content-options.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @author WMXPY
+ * @package Dropdown Menu
+ * @namespace Shared
+ * @description Menu Content Options
+ */
+import type * as Primitive from "@radix-ui/react-dropdown-menu";
+import type { ComponentPropsWithRef } from "react";
+export type MenuContentOptions = ComponentPropsWithRef<typeof Primitive.Content> & {
+    readonly morph?: boolean | undefined;
+    readonly respectReducedMotion?: boolean | undefined;
+};

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -6,93 +6,61 @@
   }
 }
 @layer utilities {
-  .gridui-u-z-\(--gridui-z-popover\) {
-    z-index: var(--gridui-z-popover);
-  }
-  .gridui-u-flex {
+  .gridui-u-dropdown-menu--flex {
     display: flex;
   }
-  .gridui-u-max-h-\(--radix-dropdown-menu-content-available-height\) {
+  .gridui-u-dropdown-menu--max-h-\(--radix-dropdown-menu-content-available-height\) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
-  .gridui-u-min-h-10 {
-    min-height: calc(var(--spacing) * 10);
-  }
-  .gridui-u-w-gridui-16 {
-    width: var(--gridui-space-16);
-  }
-  .gridui-u-max-w-\[calc\(100vw-2\*var\(--gridui-page-gutter\)\)\] {
+  .gridui-u-dropdown-menu--max-w-\[calc\(100vw-2\*var\(--gridui-page-gutter\)\)\] {
     max-width: calc(100vw - 2 * var(--gridui-page-gutter));
   }
-  .gridui-u-min-w-44 {
-    min-width: calc(var(--spacing) * 44);
+  .gridui-u-dropdown-menu--min-w-0 {
+    min-width: 0px;
   }
-  .gridui-u-shrink-0 {
-    flex-shrink: 0;
+  .gridui-u-dropdown-menu--min-w-44 {
+    min-width: calc(var(--spacing) * 44);
   }
-  .gridui-u-cursor-pointer {
-    cursor: pointer;
+  .gridui-u-dropdown-menu--flex-1 {
+    flex: 1;
   }
-  .gridui-u-items-center {
+  .gridui-u-dropdown-menu--items-center {
     align-items: center;
   }
-  .gridui-u-gap-gridui-8 {
+  .gridui-u-dropdown-menu--gap-gridui-8 {
     gap: var(--gridui-space-8);
   }
-  .gridui-u-overflow-y-auto {
+  .gridui-u-dropdown-menu--overflow-y-auto {
     overflow-y: auto;
   }
-  .gridui-u-rounded-control {
-    border-radius: var(--gridui-control-radius);
-  }
-  .gridui-u-p-0 {
-    padding: 0px;
-  }
-  .gridui-u-p-gridui-8 {
-    padding: var(--gridui-space-8);
-  }
-  .gridui-u-px-gridui-8 {
-    padding-inline: var(--gridui-space-8);
-  }
-  .gridui-u-py-gridui-8 {
-    padding-block: var(--gridui-space-8);
-  }
-  .gridui-u-type-data {
-    font: var(--gridui-type-data);
-    letter-spacing: normal;
-    font-variant-numeric: tabular-nums;
-  }
-  .gridui-u-type-caption {
-    font: var(--gridui-type-caption);
-    letter-spacing: normal;
-  }
-  .gridui-u-text-foreground {
-    color: var(--gridui-foreground);
-  }
-  .gridui-u-text-inherit {
-    color: inherit;
-  }
-  .gridui-u-text-muted {
-    color: var(--gridui-muted);
-  }
-  .gridui-u-no-underline {
-    text-decoration-line: none;
-  }
-  .gridui-u-aria-selected\:bg-brand-tint[aria-selected="true"] {
-    background-color: var(--gridui-brand-tint);
-  }
-  .gridui-u-data-disabled\:pointer-events-none[data-disabled] {
-    pointer-events: none;
-  }
-  .gridui-u-data-disabled\:opacity-50[data-disabled] {
-    opacity: 50%;
-  }
-  .gridui-u-data-\[state\=checked\]\:bg-brand-tint[data-state="checked"] {
-    background-color: var(--gridui-brand-tint);
-  }
 }
 @layer components {
   .gridui-dropdown-content {
     --gridui-overlay-origin: var(--radix-dropdown-menu-content-transform-origin);
   }
+  .gridui-dropdown-content[data-morph-measuring][data-state="open"] {
+    animation: none;
+  }
+  @supports (clip-path: inset(0)) {
+    .gridui-dropdown-content[data-morph-ready][data-state="open"] {
+      animation: gridui-menu-morph var(--gridui-motion-duration-normal) var(--gridui-motion-ease-out);
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .gridui-dropdown-content[data-morph-ready][data-state="open"]:not([data-morph-ignore-reduced-motion]) {
+      animation: none;
+    }
+  }
+  @keyframes gridui-menu-morph {
+    from {
+      clip-path: var(--gridui-menu-morph-clip);
+      opacity: 0.6;
+      transform: translate(var(--gridui-menu-morph-offset));
+    }
+    to {
+      clip-path: inset(0);
+      opacity: 1;
+      transform: translate(0, 0);
+    }
+  }
 }

package/docs/catalog.json

@@ -1,10 +1,10 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/dropdown-menu",
-  "version": "1.1.7",
+  "version": "2.0.0",
   "category": "core",
   "description": "GridUI React dropdown menu",
-  "usage": "`@gridui/dropdown-menu` wraps Radix Dropdown Menu. It exports the root, trigger, portalled content, items, label, radio group, and radio item. Native primitive props and refs remain available. Load its separate `styles.css` export. Radix owns keyboard navigation, focus return, Escape dismissal, and viewport collisions. The portal avoids clipped grid boundaries.",
+  "usage": "Overlay supplies popup surfaces, option rows, group labels, and selection indicators. Applications own routes, labels, state persistence, and branding.",
   "documentation": [
     "README.md",
     "docs/context-menu.md"
@@ -25,21 +25,6 @@
       "kind": "value",
       "importPath": "@gridui/dropdown-menu"
     },
-    {
-      "name": "dropdownIndicatorStyles",
-      "kind": "value",
-      "importPath": "@gridui/dropdown-menu"
-    },
-    {
-      "name": "dropdownItemStyles",
-      "kind": "value",
-      "importPath": "@gridui/dropdown-menu"
-    },
-    {
-      "name": "dropdownLabelStyles",
-      "kind": "value",
-      "importPath": "@gridui/dropdown-menu"
-    },
     {
       "name": "DropdownMenu",
       "kind": "component",

package/docs/context-menu.md

@@ -2,13 +2,23 @@
 
 Import `ContextMenu`, `ContextMenuProps`, and the existing `DropdownMenuItem`,
 `DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, and `DropdownMenuLabel` from
-`@gridui/dropdown-menu`. Load `@gridui/dropdown-menu/styles.css` after Theme.
+`@gridui/dropdown-menu`. Load these styles in order:
+
+```css
+@import "@gridui/theme/styles.css";
+@import "@gridui/overlay/styles.css";
+@import "@gridui/dropdown-menu/styles.css";
+```
+
+Overlay supplies the shared menu surface, option rows, labels, and indicators.
 
 Render `ContextMenu` only while open. Pass viewport `x` / `y` coordinates (for
 example, `clientX` / `clientY`), an accessible `label`, menu children, and `onClose`
 to clear the owner's open state. The owner decides which pointer or keyboard
 interaction opens the menu and what each action does. For keyboard opening,
-anchor to the invoking element's bounding rectangle.
+anchor to the invoking element's bounding rectangle. Pass `dir="rtl"` for a
+right-to-left menu; direction is forwarded to the menu root for positioning,
+row layout, and keyboard behavior.
 
 The menu reuses dropdown keyboard navigation, disabled-item semantics, collision
 handling, and item selection. It is nonmodal, closes on Escape, Tab, outside

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/dropdown-menu",
-  "version": "1.1.7",
+  "version": "2.0.0",
   "description": "GridUI React dropdown menu",
   "license": "UNLICENSED",
   "type": "module",
@@ -27,16 +27,16 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/overlay": "^1.2.2",
-    "@gridui/style-utils": "^2.2.2",
+    "@gridui/overlay": "^2.0.0",
+    "@gridui/style-utils": "^3.0.0",
     "@gridui/theme": "^2.5.3",
     "@radix-ui/react-dropdown-menu": "2.2.1",
     "class-variance-authority": "0.7.1",
-    "lucide-react": "1.69.0"
+    "lucide-react": "1.70.0"
   },
   "devDependencies": {
     "@gridui-internal/configuration": "0.0.0-internal",
-    "@gridui/button": "3.1.2",
+    "@gridui/button": "4.0.0",
     "@jest/globals": "30.5.2",
     "@storybook/react-vite": "10.6.6",
     "@types/jest": "30.0.0",

package/dist/dropdown-menu-label/style.d.ts

@@ -1,7 +0,0 @@
-/**
- * @author WMXPY
- * @package Dropdown Menu
- * @namespace DropdownMenuLabel
- * @description Style
- */
-export declare const dropdownLabelStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/dropdown-menu-radio-item/style.d.ts

@@ -1,7 +0,0 @@
-/**
- * @author WMXPY
- * @package Dropdown Menu
- * @namespace DropdownMenuRadioItem
- * @description Style
- */
-export declare const dropdownIndicatorStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;

package/dist/shared/style.d.ts

@@ -1,7 +0,0 @@
-/**
- * @author WMXPY
- * @package Dropdown Menu
- * @namespace Shared
- * @description Style
- */
-export declare const dropdownItemStyles: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;