@seed-design/react-menu 0.0.0-alpha-20260414104312

package/lib/Menu-12s-DcQqm37B.js

@@ -0,0 +1,189 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { FloatingPortal, FloatingFocusManager, FloatingList, useListItem } from '@floating-ui/react';
+import { composeRefs } from '@radix-ui/react-compose-refs';
+import { FocusScope } from '@radix-ui/react-focus-scope';
+import { DismissibleLayer } from '@seed-design/react-dismissible-layer';
+import { mergeProps } from '@seed-design/dom-utils';
+import { Primitive } from '@seed-design/react-primitive';
+import React, { createContext, useContext, forwardRef } from 'react';
+import { u as useMenu } from './useMenu-12s-WINwYlwH.js';
+
+const MenuContext = /*#__PURE__*/ createContext(null);
+const MenuProvider = MenuContext.Provider;
+function useMenuContext({ strict = true } = {}) {
+    const context = useContext(MenuContext);
+    if (!context && strict) {
+        throw new Error("useMenuContext must be used within a Menu");
+    }
+    return context;
+}
+
+const MenuItemContext = /*#__PURE__*/ createContext(null);
+const MenuItemProvider = MenuItemContext.Provider;
+function useMenuItemContext({ strict = true } = {}) {
+    const context = useContext(MenuItemContext);
+    if (!context && strict) {
+        throw new Error("useMenuItemContext must be used within a MenuItem");
+    }
+    return context;
+}
+
+const MenuGroupLabelIdContext = /*#__PURE__*/ createContext(null);
+const MenuRoot = ({ open, defaultOpen, onOpenChange, disabled, placement, gutter, overflowPadding, strategy, matchReferenceWidth, children })=>{
+    const api = useMenu({
+        open,
+        defaultOpen,
+        onOpenChange,
+        disabled,
+        placement,
+        gutter,
+        overflowPadding,
+        strategy,
+        matchReferenceWidth
+    });
+    return /*#__PURE__*/ jsx(MenuProvider, {
+        value: api,
+        children: children
+    });
+};
+const MenuAnchor = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const api = useMenuContext();
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: composeRefs(api.refs.anchor, ref),
+        ...mergeProps(api.anchorProps, props)
+    });
+});
+MenuAnchor.displayName = "MenuAnchor";
+const MenuTrigger = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const api = useMenuContext();
+    return /*#__PURE__*/ jsx(Primitive.button, {
+        ref: composeRefs(api.refs.trigger, ref),
+        ...mergeProps(api.triggerProps, props)
+    });
+});
+MenuTrigger.displayName = "MenuTrigger";
+const MenuPositioner = /*#__PURE__*/ forwardRef(({ container, ...props }, ref)=>{
+    const api = useMenuContext();
+    // FloatingPortal (not a generic portal) so that FloatingFocusManager
+    // detects the portal context and renders focus-guard sentinels.
+    return /*#__PURE__*/ jsx(FloatingPortal, {
+        root: container ?? undefined,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: composeRefs(api.refs.positioner, ref),
+            ...mergeProps(api.positionerProps, props)
+        })
+    });
+});
+MenuPositioner.displayName = "MenuPositioner";
+const MenuContent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { floatingContext, contentProps, open, setOpen, elementsRef, labelsRef } = useMenuContext();
+    const content = /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        ...mergeProps(contentProps, props)
+    });
+    // FloatingFocusManager: handles position-aware initial focus, return focus,
+    // closeOnFocusOut, tab order guards, and useListNavigation coordination.
+    //
+    // FocusScope: participates in Radix's focusScopesStack so that parent
+    // FocusScopes (e.g. Dialog, Drawer) are automatically paused while this
+    // Menu is open. Without this, focus cannot leave a trapped parent scope
+    // to reach Menu content rendered in a Portal.
+    //
+    // FocusScope is conditionally rendered (only when open) because Menu
+    // content is always in the DOM (hidden via data-hidden). If FocusScope
+    // were always mounted, it would register in the stack at page load —
+    // before any Dialog — and could never re-register above a Dialog that
+    // mounts later. Mounting only when open ensures it lands at the top of
+    // the stack, pausing the parent scope.
+    return /*#__PURE__*/ jsx(FloatingFocusManager, {
+        context: floatingContext,
+        disabled: !open,
+        modal: false,
+        children: /*#__PURE__*/ jsx(FloatingList, {
+            elementsRef: elementsRef,
+            labelsRef: labelsRef,
+            children: /*#__PURE__*/ jsx(DismissibleLayer, {
+                enabled: open,
+                pressBehavior: "drag",
+                onEscapeKeyDown: (event)=>{
+                    setOpen(false, {
+                        reason: "escapeKeyDown",
+                        event
+                    });
+                },
+                onPressOutside: (event)=>{
+                    setOpen(false, {
+                        reason: "interactOutside",
+                        event
+                    });
+                },
+                onCascadeDismiss: ({ dismissedParent })=>{
+                    setOpen(false, {
+                        reason: "cascadeDismiss",
+                        dismissedParent
+                    });
+                },
+                onFocusOutside: ()=>{
+                // focus trapping is handled by FloatingFocusManager — nothing to do here
+                },
+                exclude: (target)=>{
+                    const reference = floatingContext.refs.reference.current;
+                    if (!(reference instanceof HTMLElement)) return false;
+                    return reference.contains(target);
+                },
+                children: open ? /*#__PURE__*/ jsx(FocusScope, {
+                    asChild: true,
+                    trapped: false,
+                    loop: false,
+                    onMountAutoFocus: (e)=>e.preventDefault(),
+                    onUnmountAutoFocus: (e)=>e.preventDefault(),
+                    children: content
+                }) : content
+            })
+        })
+    });
+});
+MenuContent.displayName = "MenuContent";
+const MenuItem = /*#__PURE__*/ forwardRef(({ disabled, typeaheadLabel, onClick, ...restProps }, ref)=>{
+    const { getItemProps } = useMenuContext();
+    const { ref: listRef, index } = useListItem({
+        label: typeaheadLabel
+    });
+    const api = getItemProps({
+        disabled,
+        onClick
+    }, index);
+    return /*#__PURE__*/ jsx(MenuItemProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: composeRefs(listRef, ref),
+            ...mergeProps(api.rootProps, restProps)
+        })
+    });
+});
+MenuItem.displayName = "MenuItem";
+const MenuGroup = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { getGroupProps } = useMenuContext();
+    const { labelId, rootProps } = getGroupProps();
+    return /*#__PURE__*/ jsx(MenuGroupLabelIdContext.Provider, {
+        value: labelId,
+        children: /*#__PURE__*/ jsx(Primitive.div, {
+            ref: ref,
+            ...mergeProps(rootProps, props)
+        })
+    });
+});
+MenuGroup.displayName = "MenuGroup";
+const MenuGroupLabel = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { getGroupLabelProps } = useMenuContext();
+    const labelId = React.useContext(MenuGroupLabelIdContext);
+    if (!labelId) throw new Error("MenuGroupLabel must be used within a MenuGroup");
+    return /*#__PURE__*/ jsx(Primitive.div, {
+        ref: ref,
+        ...mergeProps(getGroupLabelProps(labelId), props)
+    });
+});
+MenuGroupLabel.displayName = "MenuGroupLabel";
+
+export { MenuAnchor as M, MenuContent as a, MenuGroup as b, MenuGroupLabel as c, MenuItem as d, MenuPositioner as e, MenuRoot as f, MenuTrigger as g, useMenuItemContext as h, useMenuContext as u };

package/lib/Menu-12s-KCTCu-et.cjs

@@ -0,0 +1,202 @@
+'use client';
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('@floating-ui/react');
+var reactComposeRefs = require('@radix-ui/react-compose-refs');
+var reactFocusScope = require('@radix-ui/react-focus-scope');
+var reactDismissibleLayer = require('@seed-design/react-dismissible-layer');
+var domUtils = require('@seed-design/dom-utils');
+var reactPrimitive = require('@seed-design/react-primitive');
+var React = require('react');
+var useMenu12s = require('./useMenu-12s-DN0SpRKs.cjs');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const MenuContext = /*#__PURE__*/ React.createContext(null);
+const MenuProvider = MenuContext.Provider;
+function useMenuContext({ strict = true } = {}) {
+    const context = React.useContext(MenuContext);
+    if (!context && strict) {
+        throw new Error("useMenuContext must be used within a Menu");
+    }
+    return context;
+}
+
+const MenuItemContext = /*#__PURE__*/ React.createContext(null);
+const MenuItemProvider = MenuItemContext.Provider;
+function useMenuItemContext({ strict = true } = {}) {
+    const context = React.useContext(MenuItemContext);
+    if (!context && strict) {
+        throw new Error("useMenuItemContext must be used within a MenuItem");
+    }
+    return context;
+}
+
+const MenuGroupLabelIdContext = /*#__PURE__*/ React.createContext(null);
+const MenuRoot = ({ open, defaultOpen, onOpenChange, disabled, placement, gutter, overflowPadding, strategy, matchReferenceWidth, children })=>{
+    const api = useMenu12s.useMenu({
+        open,
+        defaultOpen,
+        onOpenChange,
+        disabled,
+        placement,
+        gutter,
+        overflowPadding,
+        strategy,
+        matchReferenceWidth
+    });
+    return /*#__PURE__*/ jsxRuntime.jsx(MenuProvider, {
+        value: api,
+        children: children
+    });
+};
+const MenuAnchor = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const api = useMenuContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: reactComposeRefs.composeRefs(api.refs.anchor, ref),
+        ...domUtils.mergeProps(api.anchorProps, props)
+    });
+});
+MenuAnchor.displayName = "MenuAnchor";
+const MenuTrigger = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const api = useMenuContext();
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.button, {
+        ref: reactComposeRefs.composeRefs(api.refs.trigger, ref),
+        ...domUtils.mergeProps(api.triggerProps, props)
+    });
+});
+MenuTrigger.displayName = "MenuTrigger";
+const MenuPositioner = /*#__PURE__*/ React.forwardRef(({ container, ...props }, ref)=>{
+    const api = useMenuContext();
+    // FloatingPortal (not a generic portal) so that FloatingFocusManager
+    // detects the portal context and renders focus-guard sentinels.
+    return /*#__PURE__*/ jsxRuntime.jsx(react.FloatingPortal, {
+        root: container ?? undefined,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+            ref: reactComposeRefs.composeRefs(api.refs.positioner, ref),
+            ...domUtils.mergeProps(api.positionerProps, props)
+        })
+    });
+});
+MenuPositioner.displayName = "MenuPositioner";
+const MenuContent = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { floatingContext, contentProps, open, setOpen, elementsRef, labelsRef } = useMenuContext();
+    const content = /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: ref,
+        ...domUtils.mergeProps(contentProps, props)
+    });
+    // FloatingFocusManager: handles position-aware initial focus, return focus,
+    // closeOnFocusOut, tab order guards, and useListNavigation coordination.
+    //
+    // FocusScope: participates in Radix's focusScopesStack so that parent
+    // FocusScopes (e.g. Dialog, Drawer) are automatically paused while this
+    // Menu is open. Without this, focus cannot leave a trapped parent scope
+    // to reach Menu content rendered in a Portal.
+    //
+    // FocusScope is conditionally rendered (only when open) because Menu
+    // content is always in the DOM (hidden via data-hidden). If FocusScope
+    // were always mounted, it would register in the stack at page load —
+    // before any Dialog — and could never re-register above a Dialog that
+    // mounts later. Mounting only when open ensures it lands at the top of
+    // the stack, pausing the parent scope.
+    return /*#__PURE__*/ jsxRuntime.jsx(react.FloatingFocusManager, {
+        context: floatingContext,
+        disabled: !open,
+        modal: false,
+        children: /*#__PURE__*/ jsxRuntime.jsx(react.FloatingList, {
+            elementsRef: elementsRef,
+            labelsRef: labelsRef,
+            children: /*#__PURE__*/ jsxRuntime.jsx(reactDismissibleLayer.DismissibleLayer, {
+                enabled: open,
+                pressBehavior: "drag",
+                onEscapeKeyDown: (event)=>{
+                    setOpen(false, {
+                        reason: "escapeKeyDown",
+                        event
+                    });
+                },
+                onPressOutside: (event)=>{
+                    setOpen(false, {
+                        reason: "interactOutside",
+                        event
+                    });
+                },
+                onCascadeDismiss: ({ dismissedParent })=>{
+                    setOpen(false, {
+                        reason: "cascadeDismiss",
+                        dismissedParent
+                    });
+                },
+                onFocusOutside: ()=>{
+                // focus trapping is handled by FloatingFocusManager — nothing to do here
+                },
+                exclude: (target)=>{
+                    const reference = floatingContext.refs.reference.current;
+                    if (!(reference instanceof HTMLElement)) return false;
+                    return reference.contains(target);
+                },
+                children: open ? /*#__PURE__*/ jsxRuntime.jsx(reactFocusScope.FocusScope, {
+                    asChild: true,
+                    trapped: false,
+                    loop: false,
+                    onMountAutoFocus: (e)=>e.preventDefault(),
+                    onUnmountAutoFocus: (e)=>e.preventDefault(),
+                    children: content
+                }) : content
+            })
+        })
+    });
+});
+MenuContent.displayName = "MenuContent";
+const MenuItem = /*#__PURE__*/ React.forwardRef(({ disabled, typeaheadLabel, onClick, ...restProps }, ref)=>{
+    const { getItemProps } = useMenuContext();
+    const { ref: listRef, index } = react.useListItem({
+        label: typeaheadLabel
+    });
+    const api = getItemProps({
+        disabled,
+        onClick
+    }, index);
+    return /*#__PURE__*/ jsxRuntime.jsx(MenuItemProvider, {
+        value: api,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+            ref: reactComposeRefs.composeRefs(listRef, ref),
+            ...domUtils.mergeProps(api.rootProps, restProps)
+        })
+    });
+});
+MenuItem.displayName = "MenuItem";
+const MenuGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { getGroupProps } = useMenuContext();
+    const { labelId, rootProps } = getGroupProps();
+    return /*#__PURE__*/ jsxRuntime.jsx(MenuGroupLabelIdContext.Provider, {
+        value: labelId,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+            ref: ref,
+            ...domUtils.mergeProps(rootProps, props)
+        })
+    });
+});
+MenuGroup.displayName = "MenuGroup";
+const MenuGroupLabel = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const { getGroupLabelProps } = useMenuContext();
+    const labelId = React__default.default.useContext(MenuGroupLabelIdContext);
+    if (!labelId) throw new Error("MenuGroupLabel must be used within a MenuGroup");
+    return /*#__PURE__*/ jsxRuntime.jsx(reactPrimitive.Primitive.div, {
+        ref: ref,
+        ...domUtils.mergeProps(getGroupLabelProps(labelId), props)
+    });
+});
+MenuGroupLabel.displayName = "MenuGroupLabel";
+
+exports.MenuAnchor = MenuAnchor;
+exports.MenuContent = MenuContent;
+exports.MenuGroup = MenuGroup;
+exports.MenuGroupLabel = MenuGroupLabel;
+exports.MenuItem = MenuItem;
+exports.MenuPositioner = MenuPositioner;
+exports.MenuRoot = MenuRoot;
+exports.MenuTrigger = MenuTrigger;
+exports.useMenuContext = useMenuContext;
+exports.useMenuItemContext = useMenuItemContext;

package/lib/index.cjs

@@ -0,0 +1,25 @@
+var Menu12s = require('./Menu-12s-KCTCu-et.cjs');
+
+var Menu_namespace = {
+  __proto__: null,
+  Anchor: Menu12s.MenuAnchor,
+  Content: Menu12s.MenuContent,
+  Group: Menu12s.MenuGroup,
+  GroupLabel: Menu12s.MenuGroupLabel,
+  Item: Menu12s.MenuItem,
+  Positioner: Menu12s.MenuPositioner,
+  Root: Menu12s.MenuRoot,
+  Trigger: Menu12s.MenuTrigger
+};
+
+exports.MenuAnchor = Menu12s.MenuAnchor;
+exports.MenuContent = Menu12s.MenuContent;
+exports.MenuGroup = Menu12s.MenuGroup;
+exports.MenuGroupLabel = Menu12s.MenuGroupLabel;
+exports.MenuItem = Menu12s.MenuItem;
+exports.MenuPositioner = Menu12s.MenuPositioner;
+exports.MenuRoot = Menu12s.MenuRoot;
+exports.MenuTrigger = Menu12s.MenuTrigger;
+exports.useMenuContext = Menu12s.useMenuContext;
+exports.useMenuItemContext = Menu12s.useMenuItemContext;
+exports.Menu = Menu_namespace;