@gridui/dropdown-menu 1.1.1 → 1.1.2

package/README.md

@@ -5,12 +5,12 @@ Core family. Public API: `ContextMenu`, `ContextMenuProps`, `DropdownMenu`, `Dro
 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.
 
-See [component ownership](../../docs/component-ownership.md) and [release history](.changeset/history/).
+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).
 
 ## Buttons and dropdown menus
 
 Import `Button`, `ButtonLink`, `buttonClass`, `useAsyncAction`, and `downloadBlob`
-from [`@gridui/button`](../button/README.md). Load that package's `styles.css`
+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.

package/dist/index.js

@@ -26,7 +26,7 @@ import { cva } from "class-variance-authority";
 var dropdownContentStyles = cva(cn(
   overlaySurfaceStyles(),
   "gridui-dropdown-content",
-  "z-(--gridui-z-popover) min-w-44 max-w-[calc(100vw-2*var(--gridui-page-gutter))] max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-gridui-4 type-data"
+  "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-gridui-4 gridui-u-type-data"
 ));
 
 // src/dropdown-menu-content/dropdown-menu-content.tsx
@@ -172,9 +172,9 @@ import { cn as cn3 } from "@gridui/style-utils";
 import { cva as cva2 } from "class-variance-authority";
 var dropdownItemStyles = cva2(cn3(
   "gridui-dropdown-item",
-  "flex min-h-10 items-center gap-gridui-8 px-gridui-8 py-gridui-8 rounded-xs text-inherit no-underline outline-none cursor-pointer",
-  "data-highlighted:bg-surface data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]",
-  "data-disabled:opacity-50 data-disabled:pointer-events-none"
+  "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-xs gridui-u-text-inherit gridui-u-no-underline gridui-u-outline-none gridui-u-cursor-pointer",
+  "gridui-u-data-highlighted:bg-surface gridui-u-data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]",
+  "gridui-u-data-disabled:opacity-50 gridui-u-data-disabled:pointer-events-none"
 ));
 
 // src/dropdown-menu-item/dropdown-menu-item.tsx
@@ -200,7 +200,7 @@ import { cn as cn5 } from "@gridui/style-utils";
 import { cva as cva3 } from "class-variance-authority";
 var dropdownLabelStyles = cva3(cn5(
   "gridui-dropdown-label",
-  "p-gridui-8 text-muted type-caption"
+  "gridui-u-p-gridui-8 gridui-u-text-muted gridui-u-type-caption"
 ));
 
 // src/dropdown-menu-label/dropdown-menu-label.tsx
@@ -238,7 +238,7 @@ import { cn as cn7 } from "@gridui/style-utils";
 import { cva as cva4 } from "class-variance-authority";
 var dropdownIndicatorStyles = cva4(cn7(
   "gridui-dropdown-indicator",
-  "w-gridui-16 shrink-0 text-foreground"
+  "gridui-u-w-gridui-16 gridui-u-shrink-0 gridui-u-text-foreground"
 ));
 
 // src/dropdown-menu-radio-item/dropdown-menu-radio-item.tsx

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    \"z-(--gridui-z-popover) min-w-44 max-w-[calc(100vw-2*var(--gridui-page-gutter))] max-h-(--radix-dropdown-menu-content-available-height) overflow-y-auto p-gridui-4 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 { RetainedLayer } 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        forceMount,\n        sideOffset = 8,\n        align = \"end\",\n        ...restProps\n    } = props;\n    const content = (<Primitive.Content\n        {...restProps}\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, ...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            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    \"flex min-h-10 items-center gap-gridui-8 px-gridui-8 py-gridui-8 rounded-xs text-inherit no-underline outline-none cursor-pointer\",\n    \"data-highlighted:bg-surface data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]\",\n    \"data-disabled:opacity-50 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    \"p-gridui-8 text-muted 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    \"w-gridui-16 shrink-0 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"],
+  "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-gridui-4 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 { RetainedLayer } 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        forceMount,\n        sideOffset = 8,\n        align = \"end\",\n        ...restProps\n    } = props;\n    const content = (<Primitive.Content\n        {...restProps}\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, ...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            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-xs gridui-u-text-inherit gridui-u-no-underline gridui-u-outline-none gridui-u-cursor-pointer\",\n    \"gridui-u-data-highlighted:bg-surface gridui-u-data-highlighted:[box-shadow:inset_0_0_0_1px_var(--gridui-border)]\",\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"]
 }

package/dist/styles.css

@@ -1,5 +1,4 @@
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
-@layer properties;
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -8,103 +7,92 @@
   }
 }
 @layer utilities {
-  .fixed {
-    position: fixed;
-  }
-  .z-\(--gridui-z-popover\) {
+  .gridui-u-z-\(--gridui-z-popover\) {
     z-index: var(--gridui-z-popover);
   }
-  .flex {
+  .gridui-u-flex {
     display: flex;
   }
-  .max-h-\(--radix-dropdown-menu-content-available-height\) {
+  .gridui-u-max-h-\(--radix-dropdown-menu-content-available-height\) {
     max-height: var(--radix-dropdown-menu-content-available-height);
   }
-  .min-h-10 {
+  .gridui-u-min-h-10 {
     min-height: calc(var(--spacing) * 10);
   }
-  .w-gridui-16 {
+  .gridui-u-w-gridui-16 {
     width: var(--gridui-space-16);
   }
-  .max-w-\[calc\(100vw-2\*var\(--gridui-page-gutter\)\)\] {
+  .gridui-u-max-w-\[calc\(100vw-2\*var\(--gridui-page-gutter\)\)\] {
     max-width: calc(100vw - 2 * var(--gridui-page-gutter));
   }
-  .min-w-44 {
+  .gridui-u-min-w-44 {
     min-width: calc(var(--spacing) * 44);
   }
-  .shrink-0 {
+  .gridui-u-shrink-0 {
     flex-shrink: 0;
   }
-  .cursor-pointer {
+  .gridui-u-cursor-pointer {
     cursor: pointer;
   }
-  .items-center {
+  .gridui-u-items-center {
     align-items: center;
   }
-  .gap-gridui-8 {
+  .gridui-u-gap-gridui-8 {
     gap: var(--gridui-space-8);
   }
-  .overflow-y-auto {
+  .gridui-u-overflow-y-auto {
     overflow-y: auto;
   }
-  .rounded-xs {
+  .gridui-u-rounded-xs {
     border-radius: var(--radius-xs);
   }
-  .border {
-    border-style: var(--tw-border-style);
-    border-width: 1px;
-  }
-  .p-gridui-4 {
+  .gridui-u-p-gridui-4 {
     padding: var(--gridui-space-4);
   }
-  .p-gridui-8 {
+  .gridui-u-p-gridui-8 {
     padding: var(--gridui-space-8);
   }
-  .px-gridui-8 {
+  .gridui-u-px-gridui-8 {
     padding-inline: var(--gridui-space-8);
   }
-  .py-gridui-8 {
+  .gridui-u-py-gridui-8 {
     padding-block: var(--gridui-space-8);
   }
-  .type-data {
+  .gridui-u-type-data {
     font: var(--gridui-type-data);
     letter-spacing: normal;
     font-variant-numeric: tabular-nums;
   }
-  .type-caption {
+  .gridui-u-type-caption {
     font: var(--gridui-type-caption);
     letter-spacing: normal;
   }
-  .text-foreground {
+  .gridui-u-text-foreground {
     color: var(--gridui-foreground);
   }
-  .text-inherit {
+  .gridui-u-text-inherit {
     color: inherit;
   }
-  .text-muted {
+  .gridui-u-text-muted {
     color: var(--gridui-muted);
   }
-  .no-underline {
+  .gridui-u-no-underline {
     text-decoration-line: none;
   }
-  .blur {
-    --tw-blur: blur(8px);
-    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-  }
-  .outline-none {
+  .gridui-u-outline-none {
     --tw-outline-style: none;
     outline-style: none;
   }
-  .data-disabled\:pointer-events-none[data-disabled] {
+  .gridui-u-data-disabled\:pointer-events-none[data-disabled] {
     pointer-events: none;
   }
-  .data-disabled\:opacity-50[data-disabled] {
+  .gridui-u-data-disabled\:opacity-50[data-disabled] {
     opacity: 50%;
   }
-  .data-highlighted\:bg-surface[data-highlighted] {
+  .gridui-u-data-highlighted\:bg-surface[data-highlighted] {
     background-color: var(--gridui-surface);
   }
-  .data-highlighted\:\[box-shadow\:inset_0_0_0_1px_var\(--gridui-border\)\][data-highlighted] {
+  .gridui-u-data-highlighted\:\[box-shadow\:inset_0_0_0_1px_var\(--gridui-border\)\][data-highlighted] {
     box-shadow: inset 0 0 0 1px var(--gridui-border);
   }
 }
@@ -113,81 +101,3 @@
     --gridui-overlay-origin: var(--radix-dropdown-menu-content-transform-origin);
   }
 }
-@property --tw-border-style {
-  syntax: "*";
-  inherits: false;
-  initial-value: solid;
-}
-@property --tw-blur {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-brightness {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-contrast {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-grayscale {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-hue-rotate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-invert {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-opacity {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-saturate {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-sepia {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-color {
-  syntax: "*";
-  inherits: false;
-}
-@property --tw-drop-shadow-alpha {
-  syntax: "<percentage>";
-  inherits: false;
-  initial-value: 100%;
-}
-@property --tw-drop-shadow-size {
-  syntax: "*";
-  inherits: false;
-}
-@layer properties {
-  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
-    *, ::before, ::after, ::backdrop {
-      --tw-border-style: solid;
-      --tw-blur: initial;
-      --tw-brightness: initial;
-      --tw-contrast: initial;
-      --tw-grayscale: initial;
-      --tw-hue-rotate: initial;
-      --tw-invert: initial;
-      --tw-opacity: initial;
-      --tw-saturate: initial;
-      --tw-sepia: initial;
-      --tw-drop-shadow: initial;
-      --tw-drop-shadow-color: initial;
-      --tw-drop-shadow-alpha: 100%;
-      --tw-drop-shadow-size: initial;
-    }
-  }
-}

package/docs/context-menu.md

@@ -0,0 +1,25 @@
+# Point-anchored context menu
+
+Import `ContextMenu`, `ContextMenuProps`, and the existing `DropdownMenuItem`,
+`DropdownMenuRadioGroup`, `DropdownMenuRadioItem`, and `DropdownMenuLabel` from
+`@gridui/dropdown-menu`. Load `@gridui/dropdown-menu/styles.css` after Theme.
+
+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.
+
+The menu reuses dropdown keyboard navigation, disabled-item semantics, collision
+handling, and item selection. It is nonmodal, closes on Escape, Tab, outside
+interaction, or window focus loss, and portals its point anchor to the document
+body so transformed application containers do not alter viewport coordinates.
+It renders no server-side markup.
+
+Content props such as `className`, `collisionPadding`, positioning options and
+refs are forwarded. `onKeyDown` and `onCloseAutoFocus` are composed; preventing
+their default cancels the library's corresponding behavior. Default close focus
+returns to the element focused when mounted if focus has fallen back to the
+body; it does not steal focus from an outside control. Focus the invoking element
+before opening when it should be the return target. Consumers can override
+return focus with `onCloseAutoFocus`.

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@gridui/dropdown-menu",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "GridUI React dropdown menu",
   "license": "UNLICENSED",
   "type": "module",
   "files": [
     "dist",
+    "docs",
     "README.md"
   ],
   "sideEffects": [
@@ -26,16 +27,18 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/overlay": "^1.1.1",
-    "@gridui/style-utils": "^2.1.3",
-    "@gridui/theme": "^2.2.1",
+    "@gridui/overlay": "^1.1.2",
+    "@gridui/style-utils": "^2.1.4",
+    "@gridui/theme": "^2.3.2",
     "@radix-ui/react-dropdown-menu": "2.2.1",
     "class-variance-authority": "0.7.1",
-    "lucide-react": "1.63.0"
+    "lucide-react": "1.65.0"
   },
   "devDependencies": {
     "@gridui-internal/configuration": "0.0.0-internal",
+    "@gridui/button": "2.2.0",
     "@jest/globals": "30.5.2",
+    "@storybook/react-vite": "10.6.5",
     "@types/jest": "30.0.0",
     "@types/node": "26.6.6",
     "@types/react": "19.3.0",