@seed-design/react-menu 1.0.0 → 2.0.1

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

@@ -1,17 +1,7 @@
-// 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 { FocusScope } from "@radix-ui/react-focus-scope";
 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,13 +23,28 @@ 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));
   });
 
+/**
+ * Stands in for a modal ancestor (Dialog, Drawer, AppScreen). Those are all thin
+ * wrappers over exactly this scope, and what the menu owes them is entry in Radix's
+ * focusScopesStack — so the raw scope is the mechanism under test, not a stand-in
+ * for one. Using it directly also keeps the ancestor free of the scroll locking,
+ * aria-hidden and presence gating those components would drag in.
+ */
+function TrappedAncestor({ children }: { children: React.ReactNode }) {
+  return (
+    <FocusScope trapped onMountAutoFocus={(event) => event.preventDefault()}>
+      {children}
+    </FocusScope>
+  );
+}
+
 function BasicMenu(props: UseMenuProps) {
   return (
     <Menu {...props}>
@@ -198,6 +203,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 +252,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 +267,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 +279,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 +293,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 +312,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 +559,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 +596,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 +609,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 +629,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 +766,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 +815,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 +843,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 +878,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>
@@ -892,4 +922,85 @@ describe("useMenu", () => {
       expect(getByText("Item 2 (disabled)")).toHaveAttribute("data-disabled");
     });
   });
+
+  // The content stays mounted while closing so the exit transition can play, and it
+  // has to keep the very same DOM nodes: a remount hands that transition a fresh
+  // scroll container starting at scrollTop 0, so a long menu visibly snaps back to
+  // the top the moment it starts closing. Both tests assert on DOM state React never
+  // renders — exactly what a remount throws away.
+  describe("close transition", () => {
+    it("preserves the content's scroll position through a close", async () => {
+      const user = userEvent.setup();
+      const { getByText, getByRole } = render(<BasicMenu />);
+      await waitForPositioning();
+
+      const trigger = getByText("Open Menu");
+      await user.click(trigger);
+      getByRole("menu").scrollTop = 120;
+
+      await user.click(trigger);
+      expect(getByRole("menu")).not.toHaveAttribute("data-open");
+      expect(getByRole("menu").scrollTop).toBe(120);
+    });
+
+    it("keeps the same item elements when closing by clicking an item", async () => {
+      const user = userEvent.setup();
+      const { getByText, getByRole, getAllByRole } = render(<BasicMenu />);
+      await waitForPositioning();
+
+      await user.click(getByText("Open Menu"));
+      getAllByRole("menuitem").forEach((item, index) =>
+        item.setAttribute("data-probe", String(index)),
+      );
+
+      await user.click(getByText("Item 2"));
+      expect(getByRole("menu")).not.toHaveAttribute("data-open");
+
+      const probes = getAllByRole("menuitem").map((item) => item.getAttribute("data-probe"));
+      expect(probes).toEqual(["0", "1", "2"]);
+    });
+  });
+
+  describe("focus scope participation", () => {
+    it("pauses a trapped ancestor while open", async () => {
+      const user = userEvent.setup();
+      const { getByText, getAllByRole } = render(
+        <TrappedAncestor>
+          <BasicMenu />
+        </TrappedAncestor>,
+      );
+      await waitForPositioning();
+
+      getByText("Open Menu").focus();
+      await user.keyboard("{ArrowDown}");
+      await waitForFocus();
+
+      expect(getAllByRole("menuitem")[0]).toHaveFocus();
+    });
+
+    // Pause and resume are one contract: the scope has to leave the stack when the
+    // menu closes, or the ancestor stays paused forever and its trap never comes back.
+    it("lets a trapped ancestor resume once closed", async () => {
+      const user = userEvent.setup();
+      const { getByText } = render(
+        <>
+          <button type="button">Outside</button>
+          <TrappedAncestor>
+            <BasicMenu />
+          </TrappedAncestor>
+        </>,
+      );
+      await waitForPositioning();
+
+      const trigger = getByText("Open Menu");
+      trigger.focus();
+      await user.click(trigger);
+      await user.click(trigger);
+      await waitForFocus();
+
+      // With the ancestor trap active again, focus cannot settle outside its container.
+      act(() => getByText("Outside").focus());
+      expect(getByText("Outside")).not.toHaveFocus();
+    });
+  });
 });

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,
+    }),
   };
 }