@sproutsocial/seeds-react-menu 1.7.6 → 1.7.7

package/.turbo/turbo-build.log

@@ -8,22 +8,22 @@ $ tsup --dts
 CLI Cleaning output folder
 CJS Build start
 ESM Build start
-CJS dist/index.js        89.95 KB
-CJS dist/v2/index.js     70.74 KB
-CJS dist/index.js.map    175.36 KB
-CJS dist/v2/index.js.map 146.40 KB
-CJS ⚡️ Build success in 342ms
-ESM dist/esm/index.js              70.92 KB
 ESM dist/esm/v2/index.js           60.19 KB
+ESM dist/esm/index.js              71.37 KB
 ESM dist/esm/chunk-ROQATIB7.js     9.15 KB
-ESM dist/esm/index.js.map          151.40 KB
 ESM dist/esm/v2/index.js.map       126.72 KB
+ESM dist/esm/index.js.map          152.31 KB
 ESM dist/esm/chunk-ROQATIB7.js.map 22.93 KB
-ESM ⚡️ Build success in 343ms
+ESM ⚡️ Build success in 402ms
+CJS dist/index.js        90.48 KB
+CJS dist/v2/index.js     70.74 KB
+CJS dist/index.js.map    176.30 KB
+CJS dist/v2/index.js.map 146.40 KB
+CJS ⚡️ Build success in 403ms
 DTS Build start
-DTS ⚡️ Build success in 15593ms
+DTS ⚡️ Build success in 16150ms
 DTS dist/index.d.ts     39.04 KB
 DTS dist/v2/index.d.ts  4.87 KB
 DTS dist/index.d.mts    39.04 KB
 DTS dist/v2/index.d.mts 4.87 KB
-Done in 16.98s.
+Done in 17.57s.

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.7.7
+
+### Patch Changes
+
+- 564ce83: Fix NestedMenu focus management to return focus to toggle button when menu closes (DS-3901)
+
+  **Changes:**
+
+  - Added `toggleElementRef` to NestedMenu component to track toggle button element
+  - Merged refs in NestedMenuPopout using `mergeRefs()` utility to combine Popout's ref with internal ref
+  - Added explicit focus management in `onClose` callback to ensure focus returns to toggle button
+  - Added focus management tests to verify behavior
+  - Added Storybook story "Focus Management (DS-3901)" to demonstrate the fix
+
+  **Impact:**
+  Users navigating by keyboard will now properly have focus returned to the toggle button when NestedMenu closes via Escape key, clicking menu items, or navigating through nested menus. This improves accessibility and keyboard navigation UX.
+
 ## 1.7.6
 
 ### Patch Changes

package/dist/esm/index.js

@@ -2207,8 +2207,10 @@ var NestedMenuRoot = ({
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
+import "react";
 import { motion as motion2 } from "motion/react";
 import styled9 from "styled-components";
+import { mergeRefs as mergeRefs4 } from "@sproutsocial/seeds-react-utilities";
 import { jsx as jsx30 } from "react/jsx-runtime";
 var StyledDiv = styled9(motion2.div)`
   overflow: hidden;
@@ -2218,6 +2220,8 @@ var NestedMenuPopout = ({
   menuToggleElement,
   width,
   onClose,
+  toggleElementRef,
+  focusLockProps,
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
@@ -2227,13 +2231,20 @@ var NestedMenuPopout = ({
       lockPlacement: true,
       onClose: () => {
         onClose?.();
-        setTimeout(() => resetSelectedMenuPath?.(), 100);
+        setTimeout(() => {
+          toggleElementRef.current?.focus();
+          resetSelectedMenuPath?.();
+        }, 200);
       },
       isOpen: !!rootMenuContextProps.isOpen,
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
       width,
       content: (props) => /* @__PURE__ */ jsx30(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      focusLockProps: {
+        crossFrame: false,
+        ...focusLockProps
+      },
       ...popoutProps,
       children: (toggleProps) => /* @__PURE__ */ jsx30(
         MenuToggleProvider,
@@ -2241,7 +2252,11 @@ var NestedMenuPopout = ({
           menuContext: {
             ...activeMenuContext,
             ...rootMenuContextProps,
-            ...toggleProps
+            ...toggleProps,
+            ref: mergeRefs4(
+              toggleProps.ref,
+              toggleElementRef
+            )
           },
           children: menuToggleElement
         }
@@ -2319,6 +2334,7 @@ var NestedMenu = ({
   const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
   const [isAdding, setIsAdding] = useState(false);
   const popoutUpdateRef = useRef2();
+  const toggleElementRef = useRef2(null);
   const setSelectedMenuId = (id) => {
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
@@ -2483,6 +2499,7 @@ var NestedMenu = ({
           ) }),
           menuToggleElement,
           width,
+          toggleElementRef,
           scheduleUpdateRef: (callback) => {
             popoutUpdateRef.current = callback;
             externalPopoutUpdateRef?.(callback);