@seed-design/react-menu 0.0.0-alpha-20260622094810 → 2.0.0

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,6 +1,6 @@
 {
   "name": "@seed-design/react-menu",
-  "version": "0.0.0-alpha-20260622094810",
+  "version": "2.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/daangn/seed-design.git",
@@ -24,24 +24,21 @@
   "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": "1.0.0",
-    "@seed-design/react-dismissible-layer": "0.0.0-alpha-20260622094810",
-    "@seed-design/react-primitive": "0.0.0-alpha-20260622094810",
-    "@seed-design/react-use-controllable-state": "1.0.0"
+    "@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"
   },
   "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;
@@ -198,13 +204,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 +217,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";

package/src/{useMenu.vitest.tsx → useMenu.test.tsx}

@@ -1,17 +1,6 @@
-// this file is .vitest.tsx, not .test.tsx — so bun test won't pick it up.
-//
-// @floating-ui/react defers focus via requestAnimationFrame (enqueueFocus).
-// bun test preloads happydom, which doesn't fire rAF the way we need.
-// vitest + jsdom (pretendToBeVisual) gives us a real rAF that ticks at ~16ms,
-// letting waitForFocus() actually flush the deferred .focus() calls.
-//
-// see vitest.config.ts for the jsdom environment setup.
-
-/// <reference types="@testing-library/jest-dom/vitest" />
-
 import { render, fireEvent, act } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
+import { describe, expect, it, jest } from "bun:test";
 
 import * as React from "react";
 
@@ -33,8 +22,8 @@ type UseMenuProps = MenuRootProps;
 const waitForPositioning = () => act(async () => {});
 
 // Flush rAF-deferred focus from FloatingFocusManager / useListNavigation.
-// jsdom (pretendToBeVisual) fires rAF callbacks every ~16 ms via setInterval,
-// so a short timer is needed for enqueueFocus() in @floating-ui/react to land.
+// happy-dom mocks rAF with setImmediate, so a short timer is needed for
+// enqueueFocus() in @floating-ui/react to land.
 const waitForFocus = () =>
   act(async () => {
     await new Promise((resolve) => setTimeout(resolve, 50));
@@ -198,6 +187,31 @@ describe("useMenu", () => {
       const label = getByText("Group 1");
       expect(label).toHaveAttribute("id", labelledBy);
     });
+
+    it("does not set a dangling aria-labelledby on a group without a label", async () => {
+      function MenuWithUnlabeledGroup() {
+        return (
+          <Menu>
+            <MenuTrigger>Open Menu</MenuTrigger>
+            <MenuPositioner>
+              <MenuContent>
+                <MenuGroup>
+                  <MenuItem>Item A</MenuItem>
+                  <MenuItem>Item B</MenuItem>
+                </MenuGroup>
+              </MenuContent>
+            </MenuPositioner>
+          </Menu>
+        );
+      }
+
+      const user = userEvent.setup();
+      const { getAllByRole, getByText } = render(<MenuWithUnlabeledGroup />);
+      await waitForPositioning();
+      await user.click(getByText("Open Menu"));
+      const group = getAllByRole("group")[0];
+      expect(group).not.toHaveAttribute("aria-labelledby");
+    });
   });
 
   describe("open/close state", () => {
@@ -222,7 +236,7 @@ describe("useMenu", () => {
 
     it("supports controlled open state", async () => {
       const user = userEvent.setup();
-      const onOpenChange = vi.fn();
+      const onOpenChange = jest.fn();
       const { getByText } = render(<ControlledMenu onOpenChange={onOpenChange} />);
       await waitForPositioning();
       await user.click(getByText("Open Menu"));
@@ -237,7 +251,7 @@ describe("useMenu", () => {
 
     it("calls onOpenChange when toggled", async () => {
       const user = userEvent.setup();
-      const onOpenChange = vi.fn();
+      const onOpenChange = jest.fn();
       const { getByText } = render(<BasicMenu onOpenChange={onOpenChange} />);
       await waitForPositioning();
       await user.click(getByText("Open Menu"));
@@ -249,7 +263,7 @@ describe("useMenu", () => {
 
     it("reports reason 'escapeKeyDown' when closed by Escape", async () => {
       const user = userEvent.setup();
-      const onOpenChange = vi.fn();
+      const onOpenChange = jest.fn();
       const { getByText } = render(<BasicMenu onOpenChange={onOpenChange} />);
       await waitForPositioning();
       await user.click(getByText("Open Menu"));
@@ -263,7 +277,7 @@ describe("useMenu", () => {
 
     it("reports reason 'interactOutside' when closed by outside click", async () => {
       const user = userEvent.setup();
-      const onOpenChange = vi.fn();
+      const onOpenChange = jest.fn();
       const { getByText } = render(
         <div>
           <BasicMenu onOpenChange={onOpenChange} />
@@ -282,7 +296,7 @@ describe("useMenu", () => {
 
     it("reports reason 'itemClick' when closed by item selection", async () => {
       const user = userEvent.setup();
-      const onOpenChange = vi.fn();
+      const onOpenChange = jest.fn();
       const { getByText } = render(<BasicMenu onOpenChange={onOpenChange} />);
       await waitForPositioning();
       await user.click(getByText("Open Menu"));
@@ -529,7 +543,7 @@ describe("useMenu", () => {
   describe("item interaction", () => {
     it("calls onClick on item when clicked", async () => {
       const user = userEvent.setup();
-      const onClick = vi.fn();
+      const onClick = jest.fn();
       const { getByText } = render(
         <Menu>
           <MenuTrigger>Open Menu</MenuTrigger>
@@ -566,7 +580,7 @@ describe("useMenu", () => {
 
     it("activates focused item on Enter key", async () => {
       const user = userEvent.setup();
-      const onClick = vi.fn();
+      const onClick = jest.fn();
       const { getByText } = render(
         <Menu>
           <MenuTrigger>Open Menu</MenuTrigger>
@@ -579,14 +593,14 @@ describe("useMenu", () => {
       );
       await waitForPositioning();
       await user.click(getByText("Open Menu"));
-      getByText("Activatable").focus();
+      act(() => getByText("Activatable").focus());
       await user.keyboard("{Enter}");
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
     it("activates focused item on Space key", async () => {
       const user = userEvent.setup();
-      const onClick = vi.fn();
+      const onClick = jest.fn();
       const { getByText } = render(
         <Menu>
           <MenuTrigger>Open Menu</MenuTrigger>
@@ -599,14 +613,14 @@ describe("useMenu", () => {
       );
       await waitForPositioning();
       await user.click(getByText("Open Menu"));
-      getByText("Activatable").focus();
+      act(() => getByText("Activatable").focus());
       await user.keyboard(" ");
       expect(onClick).toHaveBeenCalledTimes(1);
     });
 
     it("does not activate disabled item on click or keyboard", async () => {
       const user = userEvent.setup();
-      const onClick = vi.fn();
+      const onClick = jest.fn();
       const { getByText } = render(
         <Menu>
           <MenuTrigger>Open Menu</MenuTrigger>
@@ -736,7 +750,7 @@ describe("useMenu", () => {
 
     it("does not cascade-dismiss Menu B when Menu A's layer is removed", async () => {
       const user = userEvent.setup();
-      const onMenuBOpenChange = vi.fn();
+      const onMenuBOpenChange = jest.fn();
       const { getByText } = render(<TwoSiblingMenus onMenuBOpenChange={onMenuBOpenChange} />);
       await waitForPositioning();
 
@@ -785,7 +799,7 @@ describe("useMenu", () => {
 
     it("does not cascade-dismiss Menu B on touch switch (touch)", async () => {
       const user = userEvent.setup();
-      const onMenuBOpenChange = vi.fn();
+      const onMenuBOpenChange = jest.fn();
       const { getByText } = render(<TwoSiblingMenus onMenuBOpenChange={onMenuBOpenChange} />);
       await waitForPositioning();
 
@@ -813,7 +827,7 @@ describe("useMenu", () => {
 
     it("keeps Menu B open and interactive after switching from Menu A", async () => {
       const user = userEvent.setup();
-      const onClick = vi.fn();
+      const onClick = jest.fn();
       const { getByText } = render(
         <div>
           <Menu>
@@ -848,7 +862,7 @@ describe("useMenu", () => {
 
   describe("mouse interaction", () => {
     it("activates item on mouse-up after drag from trigger", async () => {
-      const onClick = vi.fn();
+      const onClick = jest.fn();
       const { getByText } = render(
         <Menu>
           <MenuTrigger>Open Menu</MenuTrigger>

package/src/useMenu.ts

@@ -142,11 +142,6 @@ function useMenuState(props: UseMenuStateProps) {
   const labelsRef = useRef<(string | null)[]>([]);
   const triggerRef = useRef<Element | null>(null);
 
-  const groupIndexCounter = useRef(0);
-  groupIndexCounter.current = 0;
-
-  const menuId = useId();
-
   return {
     open,
     setOpenState,
@@ -155,23 +150,12 @@ function useMenuState(props: UseMenuStateProps) {
     elementsRef,
     labelsRef,
     triggerRef,
-    groupIndexCounter,
-    menuId,
   };
 }
 
 export function useMenu(props: UseMenuProps) {
-  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,
@@ -443,24 +427,39 @@ export function useMenu(props: UseMenuProps) {
     //     }),
     //   };
     // },
+  };
+}
 
-    getGroupProps: () => {
-      const groupIndex = groupIndexCounter.current++;
-      const labelId = `menu:${menuId}:group-${groupIndex}:label`;
-      return {
-        labelId,
-        rootProps: elementProps({
-          role: "group",
-          "aria-labelledby": labelId,
-        }),
-      };
-    },
+export type UseMenuGroupReturn = ReturnType<typeof useMenuGroup>;
 
-    getGroupLabelProps: (labelId: string) => {
-      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.
+export function useMenuGroup() {
+  const id = useId();
+  const labelId = `menu-group:${id}:label`;
+
+  const [isLabelRendered, setIsLabelRendered] = useState(false);
+  const labelRef = useCallback((node: HTMLDivElement | null) => {
+    setIsLabelRendered(!!node);
+  }, []);
+
+  return {
+    refs: {
+      label: labelRef,
     },
+
+    rootProps: elementProps({
+      role: "group",
+      ...(isLabelRendered && { "aria-labelledby": labelId }),
+    }),
+
+    labelProps: elementProps({
+      role: "presentation",
+      id: labelId,
+    }),
   };
 }