@sproutsocial/seeds-react-menu 1.7.5 → 1.7.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.7.5",
+  "version": "1.7.7",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/MenuRoot/MenuRoot.tsx

@@ -64,7 +64,6 @@ export const menuPlacementOrigin: {
 };
 
 export const menuAnimationConfig = {
-  layout: true,
   variants: {
     initial: (
       custom: { placement: EnumPlacements } = { placement: "bottom" }

package/src/NestedMenu/NestedMenu.stories.tsx

@@ -3,6 +3,7 @@ import React from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { Box } from "@sproutsocial/seeds-react-box";
+import { Text } from "@sproutsocial/seeds-react-text";
 // eslint-disable-next-line no-restricted-imports
 import { TEST_BOOKS } from "../__fixtures__/menu-test-data";
 
@@ -191,3 +192,96 @@ export const NestedMenuMultiLevelStory: Story = {
     );
   },
 };
+
+export const FocusManagementDemo: Story = {
+  name: "Focus Management (DS-3901)",
+  render: (args) => {
+    const focusDemoMenus = {
+      root: {
+        MenuComponent: ActionMenu,
+        menuProps: {
+          menuItems: [
+            { id: "child1", children: "Open Child Menu", childMenuId: "child" },
+            { id: "action1", children: "Close Menu Action" },
+          ],
+        },
+        MenuHeaderComponent: null,
+      },
+      child: {
+        MenuComponent: SingleSelectMenu,
+        menuProps: {
+          menuItems: [
+            { id: "item1", children: "Item 1" },
+            { id: "item2", children: "Item 2" },
+            { id: "item3", children: "Item 3" },
+          ],
+        },
+        menuHeaderProps: {
+          title: "Child Menu",
+        },
+      },
+    };
+
+    return (
+      <Box
+        display="flex"
+        flexDirection="column"
+        alignItems="center"
+        justifyContent="center"
+        gap="24px"
+        height="100vh"
+        width="100vw"
+      >
+        <Box
+          maxWidth="500px"
+          padding="16px"
+          backgroundColor="background.secondary"
+          borderRadius="8px"
+        >
+          <Text>
+            <strong>Testing Focus Management (DS-3901)</strong>
+          </Text>
+          <Text size="small" marginTop="8px">
+            This story demonstrates that focus returns to the toggle button when
+            the menu closes:
+          </Text>
+          <ul style={{ marginTop: "8px", paddingLeft: "20px" }}>
+            <li>
+              <Text size="small">
+                Open the menu and press <kbd>Escape</kbd> → Focus returns to
+                button
+              </Text>
+            </li>
+            <li>
+              <Text size="small">
+                Open the menu and click &quot;Close Menu Action&quot; → Focus
+                returns to button
+              </Text>
+            </li>
+            <li>
+              <Text size="small">
+                Navigate to child menu and press <kbd>Escape</kbd> → Focus
+                returns to button
+              </Text>
+            </li>
+            <li>
+              <Text size="small">
+                Navigate to child menu and select an item → Focus returns to
+                button
+              </Text>
+            </li>
+          </ul>
+        </Box>
+
+        <NestedMenu
+          initialMenuId="root"
+          menus={focusDemoMenus}
+          backArrowLabel="Back"
+          menuToggleElement={
+            <MenuToggleButton width="200px">Test Focus Return</MenuToggleButton>
+          }
+        />
+      </Box>
+    );
+  },
+};

package/src/NestedMenu/NestedMenu.tsx

@@ -111,6 +111,7 @@ export const NestedMenu = <
   const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
   const [isAdding, setIsAdding] = useState(false);
   const popoutUpdateRef = useRef<() => void | undefined>();
+  const toggleElementRef = useRef<HTMLElement>(null);
 
   const setSelectedMenuId = (id: string) => {
     setIsAdding(true);
@@ -292,6 +293,7 @@ export const NestedMenu = <
         }
         menuToggleElement={menuToggleElement}
         width={width}
+        toggleElementRef={toggleElementRef}
         scheduleUpdateRef={(callback) => {
           popoutUpdateRef.current = callback;
           externalPopoutUpdateRef?.(callback);

package/src/NestedMenu/NestedMenuPopout.tsx

@@ -1,3 +1,4 @@
+import { type RefObject } from "react";
 import { useNestedMenuContext } from "./NestedMenuContext";
 import {
   MenuPopout,
@@ -7,6 +8,7 @@ import {
 import { MenuToggleProvider } from "../MenuContext";
 import { motion } from "motion/react";
 import styled from "styled-components";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 
 const StyledDiv = styled(motion.div)`
   overflow: hidden;
@@ -17,9 +19,12 @@ export const NestedMenuPopout = ({
   menuToggleElement,
   width,
   onClose,
+  toggleElementRef,
+  focusLockProps,
   ...popoutProps
 }: Omit<TypeMenuPopoutProps, "children"> & {
   menuToggleElement: TypeMenuRootProps["menuToggleElement"];
+  toggleElementRef: RefObject<HTMLElement>;
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } =
     useNestedMenuContext();
@@ -30,7 +35,11 @@ export const NestedMenuPopout = ({
       // Reset the selected menu path after the close animation completes
       onClose={() => {
         onClose?.();
-        setTimeout(() => resetSelectedMenuPath?.(), 100);
+        // Manually focus the toggle element and then reset state
+        setTimeout(() => {
+          toggleElementRef.current?.focus();
+          resetSelectedMenuPath?.();
+        }, 200);
       }}
       isOpen={!!rootMenuContextProps.isOpen}
       openMenu={rootMenuContextProps.openMenu}
@@ -41,6 +50,10 @@ export const NestedMenuPopout = ({
           {typeof content === "function" ? content(props) : content}
         </StyledDiv>
       )}
+      focusLockProps={{
+        crossFrame: false,
+        ...focusLockProps,
+      }}
       {...popoutProps}
     >
       {(toggleProps) => (
@@ -50,6 +63,10 @@ export const NestedMenuPopout = ({
             ...activeMenuContext,
             ...rootMenuContextProps,
             ...toggleProps,
+            ref: mergeRefs<HTMLElement>(
+              toggleProps.ref,
+              toggleElementRef
+            ) as RefObject<HTMLElement>,
           }}
         >
           {menuToggleElement}

package/src/NestedMenu/__tests__/NestedMenu.test.tsx

@@ -219,4 +219,87 @@ describe("NestedMenu", () => {
 
     expect(mockOnBackButtonClick).toHaveBeenCalled();
   });
+
+  describe("Focus Management", () => {
+    it("returns focus to the toggle button when menu closes via Escape key", async () => {
+      const utils = render(<NestedMenu {...testProps} />);
+      const toggleButton = screen.getByRole("button", { name: "Open Menu" });
+
+      // Focus the button first (FocusLock needs to know what had focus before)
+      toggleButton.focus();
+      expect(toggleButton).toHaveFocus();
+
+      // Now open the menu with keyboard (preserves focus better)
+      await act(async () => {
+        await utils.user.keyboard("{Enter}");
+      });
+
+      // Menu should be open
+      expect(await screen.findByText("Go to Child Menu 1")).toBeInTheDocument();
+
+      // Close menu with Escape
+      await act(async () => {
+        await utils.user.keyboard("{Escape}");
+      });
+
+      // Wait for menu to close
+      await waitFor(() =>
+        expect(screen.queryByText("Go to Child Menu 1")).not.toBeInTheDocument()
+      );
+
+      // Wait for animation and focus to complete
+      await new Promise((resolve) => setTimeout(resolve, 250));
+
+      // Focus should return to toggle button
+      await waitFor(() => {
+        expect(toggleButton).toHaveFocus();
+      });
+    });
+
+    it("returns focus to the toggle button when menu closes via clicking an action item", async () => {
+      const utils = render(<NestedMenu {...testProps} />);
+      const toggleButton = screen.getByRole("button", { name: "Open Menu" });
+
+      // Focus the button first (FocusLock needs to know what had focus before)
+      toggleButton.focus();
+      expect(toggleButton).toHaveFocus();
+
+      // Now open the menu with keyboard (preserves focus better)
+      await act(async () => {
+        await utils.user.keyboard("{Enter}");
+      });
+
+      // Wait for menu to open
+      expect(await screen.findByText("Go to Child Menu 1")).toBeInTheDocument();
+
+      // Click an action item to close the menu
+      const item = screen.getByText("No Child Menu");
+      await act(async () => {
+        await utils.user.click(item);
+      });
+
+      // Wait for menu to close
+      await waitFor(() =>
+        expect(screen.queryByText("No Child Menu")).not.toBeInTheDocument()
+      );
+
+      // Wait for animation and focus to complete
+      await new Promise((resolve) => setTimeout(resolve, 250));
+
+      // Focus should return to toggle button
+      await waitFor(() => {
+        expect(toggleButton).toHaveFocus();
+      });
+    });
+
+    it("assigns ref to the toggle button element", async () => {
+      render(<NestedMenu {...testProps} />);
+      const toggleButton = screen.getByRole("button", { name: "Open Menu" });
+
+      // The toggle button should have a ref assigned
+      // This can be verified by checking if the element is properly connected to the DOM
+      expect(toggleButton).toBeInTheDocument();
+      expect(toggleButton).toBeInstanceOf(HTMLElement);
+    });
+  });
 });