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

package/lib/index.js

@@ -0,0 +1,16 @@
+import { M as MenuAnchor, a as MenuContent, b as MenuGroup, c as MenuGroupLabel, d as MenuItem, e as MenuPositioner, f as MenuRoot, g as MenuTrigger } from './Menu-12s-DcQqm37B.js';
+export { u as useMenuContext, h as useMenuItemContext } from './Menu-12s-DcQqm37B.js';
+
+var Menu_namespace = {
+  __proto__: null,
+  Anchor: MenuAnchor,
+  Content: MenuContent,
+  Group: MenuGroup,
+  GroupLabel: MenuGroupLabel,
+  Item: MenuItem,
+  Positioner: MenuPositioner,
+  Root: MenuRoot,
+  Trigger: MenuTrigger
+};
+
+export { Menu_namespace as Menu, MenuAnchor, MenuContent, MenuGroup, MenuGroupLabel, MenuItem, MenuPositioner, MenuRoot, MenuTrigger };

package/lib/useMenu-12s-DN0SpRKs.cjs

@@ -0,0 +1,269 @@
+'use client';
+var react = require('@floating-ui/react');
+var reactUseControllableState = require('@seed-design/react-use-controllable-state');
+var domUtils = require('@seed-design/dom-utils');
+var React = require('react');
+
+const MIN_HEIGHT = 200;
+function getTransformOrigin(placement) {
+    const [side, align] = placement.split("-");
+    const y = {
+        top: "bottom",
+        bottom: "top",
+        left: "center",
+        right: "center"
+    }[side] ?? "top";
+    const x = {
+        start: "left",
+        end: "right"
+    }[align] ?? "center";
+    return `${x} ${y}`;
+}
+function useMenuState(props) {
+    const [open = false, setOpenState] = reactUseControllableState.useControllableState({
+        prop: props.open,
+        defaultProp: props.defaultOpen ?? false,
+        onChange: props.onOpenChange
+    });
+    const [activeIndex, setActiveIndex] = React.useState(null);
+    const elementsRef = React.useRef([]);
+    const labelsRef = React.useRef([]);
+    const triggerRef = React.useRef(null);
+    const groupIndexCounter = React.useRef(0);
+    groupIndexCounter.current = 0;
+    const menuId = React.useId();
+    return {
+        open,
+        setOpenState,
+        activeIndex,
+        setActiveIndex,
+        elementsRef,
+        labelsRef,
+        triggerRef,
+        groupIndexCounter,
+        menuId
+    };
+}
+function useMenu(props) {
+    const { open, setOpenState, activeIndex, setActiveIndex, elementsRef, labelsRef, triggerRef, groupIndexCounter, menuId } = useMenuState(props);
+    const { disabled = false, placement = "bottom", gutter = 8, overflowPadding = 8, strategy = "absolute", matchReferenceWidth = false } = props;
+    const setOpen = React.useCallback((nextOpen, details)=>{
+        if (disabled && nextOpen) return;
+        setOpenState(nextOpen, details);
+    }, [
+        disabled,
+        setOpenState
+    ]);
+    const handleFloatingOpenChange = React.useCallback((nextOpen, event, reason)=>{
+        if (reason === "click" && event) {
+            // NOTE: floating-ui passes click/mousedown/keydown on "click" reason
+            setOpen(nextOpen, {
+                reason: "trigger",
+                event: event
+            });
+            return;
+        }
+        setOpen(nextOpen);
+    }, [
+        setOpen
+    ]);
+    const { refs: floatingRefs, context, floatingStyles } = react.useFloating({
+        open,
+        onOpenChange: handleFloatingOpenChange,
+        strategy,
+        placement,
+        middleware: [
+            react.offset(gutter),
+            react.size({
+                padding: overflowPadding,
+                apply ({ availableHeight, rects, elements }) {
+                    elements.floating.style.setProperty("--seed-menu-available-height", `${Math.max(MIN_HEIGHT, availableHeight)}px`);
+                    if (matchReferenceWidth) {
+                        elements.floating.style.setProperty("--seed-menu-reference-width", `${rects.reference.width}px`);
+                    }
+                }
+            }),
+            react.flip({
+                padding: overflowPadding,
+                fallbackStrategy: "initialPlacement"
+            }),
+            react.shift({
+                padding: overflowPadding
+            })
+        ]
+    });
+    const { status } = react.useTransitionStatus(context);
+    // Keep autoUpdate alive during exit animation so the positioner
+    // follows the trigger even while the menu is animating out.
+    const mounted = status !== "unmounted";
+    React.useEffect(()=>{
+        if (!mounted) return;
+        if (!floatingRefs.reference.current || !floatingRefs.floating.current) return;
+        return react.autoUpdate(floatingRefs.reference.current, floatingRefs.floating.current, context.update);
+    }, [
+        mounted,
+        floatingRefs.reference,
+        floatingRefs.floating,
+        context
+    ]);
+    const click = react.useClick(context, {
+        enabled: !disabled
+    });
+    const role = react.useRole(context, {
+        role: "menu"
+    });
+    const listNavigation = react.useListNavigation(context, {
+        listRef: elementsRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        loop: true,
+        // Hover and focus states should be differentiated; disable focus-on-hover
+        // so that hover styling can be handled separately via CSS :hover.
+        focusItemOnHover: false
+    });
+    const typeahead = react.useTypeahead(context, {
+        listRef: labelsRef,
+        activeIndex,
+        onMatch: setActiveIndex
+    });
+    const triggerInteractions = react.useInteractions([
+        click,
+        role,
+        listNavigation,
+        typeahead
+    ]);
+    const anchorInteractions = react.useInteractions([
+        role,
+        listNavigation,
+        typeahead
+    ]);
+    const stateProps = React.useMemo(()=>domUtils.elementProps({
+            "data-hidden": domUtils.dataAttr(status === "unmounted"),
+            "data-open": domUtils.dataAttr(status === "open" || status === "initial")
+        }), [
+        status
+    ]);
+    return {
+        open,
+        setOpen,
+        activeIndex,
+        stateProps,
+        floatingContext: context,
+        elementsRef,
+        labelsRef,
+        refs: {
+            anchor: (node)=>{
+                floatingRefs.setReference(node);
+            },
+            trigger: (node)=>{
+                floatingRefs.setReference(node);
+                triggerRef.current = node;
+            },
+            positioner: floatingRefs.setFloating
+        },
+        anchorProps: domUtils.elementProps({
+            "data-open": domUtils.dataAttr(open),
+            ...anchorInteractions.getReferenceProps()
+        }),
+        triggerProps: domUtils.buttonProps({
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "data-open": domUtils.dataAttr(open),
+            ...triggerInteractions.getReferenceProps()
+        }),
+        positionerProps: domUtils.elementProps({
+            ...stateProps,
+            style: floatingStyles
+        }),
+        contentProps: domUtils.elementProps({
+            ...stateProps,
+            role: "menu",
+            style: {
+                "--seed-menu-transform-origin": getTransformOrigin(context.placement)
+            },
+            ...triggerInteractions.getFloatingProps()
+        }),
+        getItemProps: (itemProps, index)=>{
+            const isActive = activeIndex === index;
+            const itemStateProps = domUtils.elementProps({
+                // implement when submenu is needed
+                // "data-highlighted": dataAttr(isActive),
+                "data-disabled": domUtils.dataAttr(itemProps.disabled)
+            });
+            return {
+                // implement when submenu is needed
+                // isHighlighted: isActive,
+                isDisabled: itemProps.disabled,
+                stateProps: itemStateProps,
+                rootProps: domUtils.elementProps({
+                    ...itemStateProps,
+                    ...triggerInteractions.getItemProps({
+                        onClick (event) {
+                            if (itemProps.disabled) return;
+                            if (event.defaultPrevented) return;
+                            itemProps.onClick?.(event);
+                            setOpen(false, {
+                                reason: "itemClick",
+                                event: event.nativeEvent
+                            });
+                        },
+                        onKeyDown (event) {
+                            if (itemProps.disabled) return;
+                            if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
+                                if (!(event.currentTarget instanceof HTMLElement)) return;
+                                event.currentTarget.click();
+                            }
+                        }
+                    }),
+                    role: "menuitem",
+                    tabIndex: isActive ? 0 : -1,
+                    "aria-disabled": itemProps.disabled ? "true" : undefined
+                })
+            };
+        },
+        // implement when submenu is needed
+        // getSubmenuTriggerProps: (itemProps: UseMenuSubmenuTriggerProps, index: number) => {
+        //   const isActive = activeIndex === index;
+        //
+        //   const itemStateProps = elementProps({
+        //     "data-highlighted": dataAttr(isActive),
+        //     "data-disabled": dataAttr(itemProps.disabled),
+        //   });
+        //
+        //   return {
+        //     isHighlighted: isActive,
+        //     isDisabled: itemProps.disabled,
+        //
+        //     stateProps: itemStateProps,
+        //
+        //     rootProps: elementProps({
+        //       ...itemStateProps,
+        //       ...triggerInteractions.getItemProps(),
+        //       role: "menuitem",
+        //       tabIndex: isActive ? 0 : -1,
+        //       "aria-disabled": itemProps.disabled ? "true" : undefined,
+        //     }),
+        //   };
+        // },
+        getGroupProps: ()=>{
+            const groupIndex = groupIndexCounter.current++;
+            const labelId = `menu:${menuId}:group-${groupIndex}:label`;
+            return {
+                labelId,
+                rootProps: domUtils.elementProps({
+                    role: "group",
+                    "aria-labelledby": labelId
+                })
+            };
+        },
+        getGroupLabelProps: (labelId)=>{
+            return domUtils.elementProps({
+                role: "presentation",
+                id: labelId
+            });
+        }
+    };
+}
+
+exports.useMenu = useMenu;

package/lib/useMenu-12s-WINwYlwH.js

@@ -0,0 +1,269 @@
+'use client';
+import { useFloating, offset, size, flip, shift, useTransitionStatus, autoUpdate, useClick, useRole, useListNavigation, useTypeahead, useInteractions } from '@floating-ui/react';
+import { useControllableState } from '@seed-design/react-use-controllable-state';
+import { elementProps, dataAttr, buttonProps } from '@seed-design/dom-utils';
+import { useCallback, useEffect, useMemo, useState, useRef, useId } from 'react';
+
+const MIN_HEIGHT = 200;
+function getTransformOrigin(placement) {
+    const [side, align] = placement.split("-");
+    const y = {
+        top: "bottom",
+        bottom: "top",
+        left: "center",
+        right: "center"
+    }[side] ?? "top";
+    const x = {
+        start: "left",
+        end: "right"
+    }[align] ?? "center";
+    return `${x} ${y}`;
+}
+function useMenuState(props) {
+    const [open = false, setOpenState] = useControllableState({
+        prop: props.open,
+        defaultProp: props.defaultOpen ?? false,
+        onChange: props.onOpenChange
+    });
+    const [activeIndex, setActiveIndex] = useState(null);
+    const elementsRef = useRef([]);
+    const labelsRef = useRef([]);
+    const triggerRef = useRef(null);
+    const groupIndexCounter = useRef(0);
+    groupIndexCounter.current = 0;
+    const menuId = useId();
+    return {
+        open,
+        setOpenState,
+        activeIndex,
+        setActiveIndex,
+        elementsRef,
+        labelsRef,
+        triggerRef,
+        groupIndexCounter,
+        menuId
+    };
+}
+function useMenu(props) {
+    const { open, setOpenState, activeIndex, setActiveIndex, elementsRef, labelsRef, triggerRef, groupIndexCounter, menuId } = useMenuState(props);
+    const { disabled = false, placement = "bottom", gutter = 8, overflowPadding = 8, strategy = "absolute", matchReferenceWidth = false } = props;
+    const setOpen = useCallback((nextOpen, details)=>{
+        if (disabled && nextOpen) return;
+        setOpenState(nextOpen, details);
+    }, [
+        disabled,
+        setOpenState
+    ]);
+    const handleFloatingOpenChange = useCallback((nextOpen, event, reason)=>{
+        if (reason === "click" && event) {
+            // NOTE: floating-ui passes click/mousedown/keydown on "click" reason
+            setOpen(nextOpen, {
+                reason: "trigger",
+                event: event
+            });
+            return;
+        }
+        setOpen(nextOpen);
+    }, [
+        setOpen
+    ]);
+    const { refs: floatingRefs, context, floatingStyles } = useFloating({
+        open,
+        onOpenChange: handleFloatingOpenChange,
+        strategy,
+        placement,
+        middleware: [
+            offset(gutter),
+            size({
+                padding: overflowPadding,
+                apply ({ availableHeight, rects, elements }) {
+                    elements.floating.style.setProperty("--seed-menu-available-height", `${Math.max(MIN_HEIGHT, availableHeight)}px`);
+                    if (matchReferenceWidth) {
+                        elements.floating.style.setProperty("--seed-menu-reference-width", `${rects.reference.width}px`);
+                    }
+                }
+            }),
+            flip({
+                padding: overflowPadding,
+                fallbackStrategy: "initialPlacement"
+            }),
+            shift({
+                padding: overflowPadding
+            })
+        ]
+    });
+    const { status } = useTransitionStatus(context);
+    // Keep autoUpdate alive during exit animation so the positioner
+    // follows the trigger even while the menu is animating out.
+    const mounted = status !== "unmounted";
+    useEffect(()=>{
+        if (!mounted) return;
+        if (!floatingRefs.reference.current || !floatingRefs.floating.current) return;
+        return autoUpdate(floatingRefs.reference.current, floatingRefs.floating.current, context.update);
+    }, [
+        mounted,
+        floatingRefs.reference,
+        floatingRefs.floating,
+        context
+    ]);
+    const click = useClick(context, {
+        enabled: !disabled
+    });
+    const role = useRole(context, {
+        role: "menu"
+    });
+    const listNavigation = useListNavigation(context, {
+        listRef: elementsRef,
+        activeIndex,
+        onNavigate: setActiveIndex,
+        loop: true,
+        // Hover and focus states should be differentiated; disable focus-on-hover
+        // so that hover styling can be handled separately via CSS :hover.
+        focusItemOnHover: false
+    });
+    const typeahead = useTypeahead(context, {
+        listRef: labelsRef,
+        activeIndex,
+        onMatch: setActiveIndex
+    });
+    const triggerInteractions = useInteractions([
+        click,
+        role,
+        listNavigation,
+        typeahead
+    ]);
+    const anchorInteractions = useInteractions([
+        role,
+        listNavigation,
+        typeahead
+    ]);
+    const stateProps = useMemo(()=>elementProps({
+            "data-hidden": dataAttr(status === "unmounted"),
+            "data-open": dataAttr(status === "open" || status === "initial")
+        }), [
+        status
+    ]);
+    return {
+        open,
+        setOpen,
+        activeIndex,
+        stateProps,
+        floatingContext: context,
+        elementsRef,
+        labelsRef,
+        refs: {
+            anchor: (node)=>{
+                floatingRefs.setReference(node);
+            },
+            trigger: (node)=>{
+                floatingRefs.setReference(node);
+                triggerRef.current = node;
+            },
+            positioner: floatingRefs.setFloating
+        },
+        anchorProps: elementProps({
+            "data-open": dataAttr(open),
+            ...anchorInteractions.getReferenceProps()
+        }),
+        triggerProps: buttonProps({
+            "aria-haspopup": "menu",
+            "aria-expanded": open,
+            "data-open": dataAttr(open),
+            ...triggerInteractions.getReferenceProps()
+        }),
+        positionerProps: elementProps({
+            ...stateProps,
+            style: floatingStyles
+        }),
+        contentProps: elementProps({
+            ...stateProps,
+            role: "menu",
+            style: {
+                "--seed-menu-transform-origin": getTransformOrigin(context.placement)
+            },
+            ...triggerInteractions.getFloatingProps()
+        }),
+        getItemProps: (itemProps, index)=>{
+            const isActive = activeIndex === index;
+            const itemStateProps = elementProps({
+                // implement when submenu is needed
+                // "data-highlighted": dataAttr(isActive),
+                "data-disabled": dataAttr(itemProps.disabled)
+            });
+            return {
+                // implement when submenu is needed
+                // isHighlighted: isActive,
+                isDisabled: itemProps.disabled,
+                stateProps: itemStateProps,
+                rootProps: elementProps({
+                    ...itemStateProps,
+                    ...triggerInteractions.getItemProps({
+                        onClick (event) {
+                            if (itemProps.disabled) return;
+                            if (event.defaultPrevented) return;
+                            itemProps.onClick?.(event);
+                            setOpen(false, {
+                                reason: "itemClick",
+                                event: event.nativeEvent
+                            });
+                        },
+                        onKeyDown (event) {
+                            if (itemProps.disabled) return;
+                            if (event.key === "Enter" || event.key === " ") {
+                                event.preventDefault();
+                                if (!(event.currentTarget instanceof HTMLElement)) return;
+                                event.currentTarget.click();
+                            }
+                        }
+                    }),
+                    role: "menuitem",
+                    tabIndex: isActive ? 0 : -1,
+                    "aria-disabled": itemProps.disabled ? "true" : undefined
+                })
+            };
+        },
+        // implement when submenu is needed
+        // getSubmenuTriggerProps: (itemProps: UseMenuSubmenuTriggerProps, index: number) => {
+        //   const isActive = activeIndex === index;
+        //
+        //   const itemStateProps = elementProps({
+        //     "data-highlighted": dataAttr(isActive),
+        //     "data-disabled": dataAttr(itemProps.disabled),
+        //   });
+        //
+        //   return {
+        //     isHighlighted: isActive,
+        //     isDisabled: itemProps.disabled,
+        //
+        //     stateProps: itemStateProps,
+        //
+        //     rootProps: elementProps({
+        //       ...itemStateProps,
+        //       ...triggerInteractions.getItemProps(),
+        //       role: "menuitem",
+        //       tabIndex: isActive ? 0 : -1,
+        //       "aria-disabled": itemProps.disabled ? "true" : undefined,
+        //     }),
+        //   };
+        // },
+        getGroupProps: ()=>{
+            const groupIndex = groupIndexCounter.current++;
+            const labelId = `menu:${menuId}:group-${groupIndex}:label`;
+            return {
+                labelId,
+                rootProps: elementProps({
+                    role: "group",
+                    "aria-labelledby": labelId
+                })
+            };
+        },
+        getGroupLabelProps: (labelId)=>{
+            return elementProps({
+                role: "presentation",
+                id: labelId
+            });
+        }
+    };
+}
+
+export { useMenu as u };

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@seed-design/react-menu",
+  "version": "0.0.0-alpha-20260414104312",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/daangn/seed-design.git",
+    "directory": "packages/react-headless/menu"
+  },
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "import": "./lib/index.js",
+      "require": "./lib/index.cjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/index.cjs",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rm -rf lib",
+    "build": "bunchee",
+    "lint:publish": "bun publint",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@floating-ui/react": "^0.27.0",
+    "@radix-ui/react-compose-refs": "^1.1.2",
+    "@radix-ui/react-focus-scope": "^1.1.8",
+    "@seed-design/dom-utils": "1.0.0",
+    "@seed-design/react-dismissible-layer": "0.0.0-alpha-20260414104312",
+    "@seed-design/react-primitive": "0.0.0-alpha-20260414104312",
+    "@seed-design/react-use-controllable-state": "1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.6",
+    "jsdom": "^29.0.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "vitest": "^4.1.3"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/Menu.namespace.ts

@@ -0,0 +1,18 @@
+export {
+  MenuRoot as Root,
+  MenuAnchor as Anchor,
+  MenuTrigger as Trigger,
+  MenuPositioner as Positioner,
+  MenuContent as Content,
+  MenuItem as Item,
+  MenuGroup as Group,
+  MenuGroupLabel as GroupLabel,
+  type MenuRootProps as RootProps,
+  type MenuAnchorProps as AnchorProps,
+  type MenuTriggerProps as TriggerProps,
+  type MenuPositionerProps as PositionerProps,
+  type MenuContentProps as ContentProps,
+  type MenuItemProps as ItemProps,
+  type MenuGroupProps as GroupProps,
+  type MenuGroupLabelProps as GroupLabelProps,
+} from "./Menu";