@seed-design/react-menu 1.0.0 → 2.0.1

package/lib/{useMenu-12s-Cv5FQJ3x.cjs → useMenu-12s-B5iYt8f4.cjs}

@@ -43,9 +43,6 @@ function useMenuState(props) {
     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,
@@ -53,13 +50,11 @@ function useMenuState(props) {
         setActiveIndex,
         elementsRef,
         labelsRef,
-        triggerRef,
-        groupIndexCounter,
-        menuId
+        triggerRef
     };
 }
 function useMenu(props) {
-    const { open, setOpenState, activeIndex, setActiveIndex, elementsRef, labelsRef, triggerRef, groupIndexCounter, menuId } = useMenuState(props);
+    const { open, setOpenState, activeIndex, setActiveIndex, elementsRef, labelsRef, triggerRef } = useMenuState(props);
     const { disabled = false, placement = "bottom", gutter = 8, overflowPadding = 8, strategy = "absolute", matchReferenceWidth = false } = props;
     const [safeArea, setSafeArea] = React.useState({
         top: 0,
@@ -276,49 +271,38 @@ function useMenu(props) {
                     "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
-            });
         }
     };
 }
+// A group advertises aria-labelledby only while its label is actually rendered.
+// Mirrors useFieldset: a callback ref flips a boolean synchronously at commit, so
+// the attribute is present on first paint and never points at a missing id — no
+// menu-global registry or render-order ids needed. Each group owns its own id and
+// presence flag, so conditionally rendering or reordering groups can never make one
+// group inherit another's label reference.
+function useMenuGroup() {
+    const id = React.useId();
+    const labelId = `menu-group:${id}:label`;
+    const [isLabelRendered, setIsLabelRendered] = React.useState(false);
+    const labelRef = React.useCallback((node)=>{
+        setIsLabelRendered(!!node);
+    }, []);
+    return {
+        refs: {
+            label: labelRef
+        },
+        rootProps: domUtils.elementProps({
+            role: "group",
+            ...isLabelRendered && {
+                "aria-labelledby": labelId
+            }
+        }),
+        labelProps: domUtils.elementProps({
+            role: "presentation",
+            id: labelId
+        })
+    };
+}
 
 exports.useMenu = useMenu;
+exports.useMenuGroup = useMenuGroup;

package/lib/{useMenu-12s-BrOJabEO.js → useMenu-12s-a4Nmkf8N.js}

@@ -2,7 +2,7 @@
 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 { useState, useCallback, useEffect, useMemo, useRef, useId } from 'react';
+import { useId, useState, useCallback, useEffect, useMemo, useRef } from 'react';
 
 const MIN_HEIGHT = 200;
 // flip/size/shift derive collisions from numeric padding, so the safe-area insets
@@ -43,9 +43,6 @@ function useMenuState(props) {
     const elementsRef = useRef([]);
     const labelsRef = useRef([]);
     const triggerRef = useRef(null);
-    const groupIndexCounter = useRef(0);
-    groupIndexCounter.current = 0;
-    const menuId = useId();
     return {
         open,
         setOpenState,
@@ -53,13 +50,11 @@ function useMenuState(props) {
         setActiveIndex,
         elementsRef,
         labelsRef,
-        triggerRef,
-        groupIndexCounter,
-        menuId
+        triggerRef
     };
 }
 function useMenu(props) {
-    const { open, setOpenState, activeIndex, setActiveIndex, elementsRef, labelsRef, triggerRef, groupIndexCounter, menuId } = useMenuState(props);
+    const { open, setOpenState, activeIndex, setActiveIndex, elementsRef, labelsRef, triggerRef } = useMenuState(props);
     const { disabled = false, placement = "bottom", gutter = 8, overflowPadding = 8, strategy = "absolute", matchReferenceWidth = false } = props;
     const [safeArea, setSafeArea] = useState({
         top: 0,
@@ -276,49 +271,37 @@ function useMenu(props) {
                     "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
-            });
         }
     };
 }
+// A group advertises aria-labelledby only while its label is actually rendered.
+// Mirrors useFieldset: a callback ref flips a boolean synchronously at commit, so
+// the attribute is present on first paint and never points at a missing id — no
+// menu-global registry or render-order ids needed. Each group owns its own id and
+// presence flag, so conditionally rendering or reordering groups can never make one
+// group inherit another's label reference.
+function useMenuGroup() {
+    const id = useId();
+    const labelId = `menu-group:${id}:label`;
+    const [isLabelRendered, setIsLabelRendered] = useState(false);
+    const labelRef = useCallback((node)=>{
+        setIsLabelRendered(!!node);
+    }, []);
+    return {
+        refs: {
+            label: labelRef
+        },
+        rootProps: elementProps({
+            role: "group",
+            ...isLabelRendered && {
+                "aria-labelledby": labelId
+            }
+        }),
+        labelProps: elementProps({
+            role: "presentation",
+            id: labelId
+        })
+    };
+}
 
-export { useMenu as u };
+export { useMenu as a, useMenuGroup as u };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@seed-design/react-menu",
-  "version": "1.0.0",
+  "version": "2.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
     "directory": "packages/react-headless/menu"
   },
+  "license": "Apache-2.0",
   "sideEffects": false,
   "type": "module",
   "exports": {
@@ -19,29 +20,28 @@
   "main": "./lib/index.cjs",
   "files": [
     "lib",
-    "src"
+    "src",
+    "LICENSE",
+    "NOTICE"
   ],
   "scripts": {
     "clean": "rm -rf lib",
     "build": "bunchee",
-    "lint:publish": "bun publint",
-    "test": "vitest run"
+    "lint:publish": "bun publint"
   },
   "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": "^2.0.0",
-    "@seed-design/react-dismissible-layer": "^1.0.0",
-    "@seed-design/react-primitive": "^2.0.0",
-    "@seed-design/react-use-controllable-state": "^2.0.0"
+    "@seed-design/dom-utils": "^2.0.1",
+    "@seed-design/react-dismissible-layer": "^1.0.1",
+    "@seed-design/react-primitive": "^2.0.1",
+    "@seed-design/react-use-controllable-state": "^2.0.1"
   },
   "devDependencies": {
     "@types/react": "^19.1.6",
-    "jsdom": "^29.0.2",
     "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "vitest": "^4.1.3"
+    "react-dom": "^19.1.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",

package/src/Menu.tsx

@@ -12,11 +12,17 @@ import { DismissibleLayer } from "@seed-design/react-dismissible-layer";
 import { mergeProps } from "@seed-design/dom-utils";
 import { Primitive, type PrimitiveProps } from "@seed-design/react-primitive";
 import React, { forwardRef, createContext } from "react";
-import { useMenu, type UseMenuItemProps, type UseMenuProps } from "./useMenu";
+import {
+  useMenu,
+  useMenuGroup,
+  type UseMenuGroupReturn,
+  type UseMenuItemProps,
+  type UseMenuProps,
+} from "./useMenu";
 import { MenuProvider, useMenuContext } from "./useMenuContext";
 import { MenuItemProvider } from "./useMenuItemContext";
 
-const MenuGroupLabelIdContext = createContext<string | null>(null);
+const MenuGroupContext = createContext<UseMenuGroupReturn | null>(null);
 
 export interface MenuRootProps extends UseMenuProps {
   children?: React.ReactNode;
@@ -105,72 +111,71 @@ export const MenuPositioner = forwardRef<HTMLDivElement, MenuPositionerProps>(
 );
 MenuPositioner.displayName = "MenuPositioner";
 
+/**
+ * Holds a Radix FocusScope registration for as long as the menu is open, so parent
+ * FocusScopes (Dialog, Drawer) pause their trap and focus can reach content
+ * rendered in a portal.
+ *
+ * The scope needs no behavior of its own — trapping and the tab loop stay off and
+ * both autofocus events are prevented — so all it does is enter Radix's
+ * focusScopesStack, which is keyed on mount, not on the element it wraps. Hence
+ * this empty hidden element rather than a wrapper around the content: wrapping
+ * swaps the element type at the content's position on every open/close, and React
+ * responds by remounting the whole menu subtree, handing the exit transition a
+ * scroll container freshly reset to the top.
+ *
+ * Mounting only while open is what lands it on top of the stack — a permanently
+ * mounted scope would register at page load, below any Dialog opened later.
+ */
+const FocusScopeRegistration = () => (
+  <FocusScope
+    hidden
+    trapped={false}
+    loop={false}
+    onMountAutoFocus={(event) => event.preventDefault()}
+    onUnmountAutoFocus={(event) => event.preventDefault()}
+  />
+);
+
 export interface MenuContentProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
 export const MenuContent = forwardRef<HTMLDivElement, MenuContentProps>((props, ref) => {
   const { floatingContext, contentProps, open, setOpen, elementsRef, labelsRef } = useMenuContext();
 
-  const content = <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 (
-    <FloatingFocusManager context={floatingContext} disabled={!open} modal={false}>
-      <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
-        {/* DismissibleLayer must wrap FocusScope, not the other way around.
-            FocusScope asChild uses Slot to forward tabIndex/onKeyDown/ref to the
-            DOM element; if DismissibleLayer sits between them, those props are
-            swallowed by DismissibleLayer's own destructuring and never reach the DOM. */}
-        <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);
-          }}
-        >
-          {open ? (
-            <FocusScope
-              asChild
-              trapped={false}
-              loop={false}
-              onMountAutoFocus={(e) => e.preventDefault()}
-              onUnmountAutoFocus={(e) => e.preventDefault()}
-            >
-              {content}
-            </FocusScope>
-          ) : (
-            content
-          )}
-        </DismissibleLayer>
-      </FloatingList>
-    </FloatingFocusManager>
+    <>
+      <FloatingFocusManager context={floatingContext} disabled={!open} modal={false}>
+        <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
+          <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);
+            }}
+          >
+            <Primitive.div ref={ref} {...mergeProps(contentProps, props)} />
+          </DismissibleLayer>
+        </FloatingList>
+      </FloatingFocusManager>
+      {open && <FocusScopeRegistration />}
+    </>
   );
 });
 MenuContent.displayName = "MenuContent";
@@ -198,13 +203,12 @@ MenuItem.displayName = "MenuItem";
 export interface MenuGroupProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
 export const MenuGroup = forwardRef<HTMLDivElement, MenuGroupProps>((props, ref) => {
-  const { getGroupProps } = useMenuContext();
-  const { labelId, rootProps } = getGroupProps();
+  const group = useMenuGroup();
 
   return (
-    <MenuGroupLabelIdContext.Provider value={labelId}>
-      <Primitive.div ref={ref} {...mergeProps(rootProps, props)} />
-    </MenuGroupLabelIdContext.Provider>
+    <MenuGroupContext.Provider value={group}>
+      <Primitive.div ref={ref} {...mergeProps(group.rootProps, props)} />
+    </MenuGroupContext.Provider>
   );
 });
 MenuGroup.displayName = "MenuGroup";
@@ -212,10 +216,16 @@ MenuGroup.displayName = "MenuGroup";
 export interface MenuGroupLabelProps extends PrimitiveProps, React.HTMLAttributes<HTMLDivElement> {}
 
 export const MenuGroupLabel = forwardRef<HTMLDivElement, MenuGroupLabelProps>((props, ref) => {
-  const { getGroupLabelProps } = useMenuContext();
-  const labelId = React.useContext(MenuGroupLabelIdContext);
-  if (!labelId) throw new Error("MenuGroupLabel must be used within a MenuGroup");
+  const group = React.useContext(MenuGroupContext);
+  if (!group) throw new Error("MenuGroupLabel must be used within a MenuGroup");
 
-  return <Primitive.div ref={ref} {...mergeProps(getGroupLabelProps(labelId), props)} />;
+  // Compose the group's label ref so the group advertises aria-labelledby only
+  // while this label is actually rendered (see useMenuGroup).
+  return (
+    <Primitive.div
+      ref={composeRefs(group.refs.label, ref)}
+      {...mergeProps(group.labelProps, props)}
+    />
+  );
 });
 MenuGroupLabel.displayName = "MenuGroupLabel";