@sproutsocial/seeds-react-menu 1.7.5 → 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.97 KB
-CJS dist/v2/index.js     70.74 KB
-CJS dist/index.js.map    175.39 KB
-CJS dist/v2/index.js.map 146.40 KB
-CJS ⚡️ Build success in 344ms
-ESM dist/esm/index.js              70.94 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.43 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 344ms
+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 16182ms
-DTS dist/index.d.ts     39.06 KB
+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.06 KB
+DTS dist/index.d.mts    39.04 KB
 DTS dist/v2/index.d.mts 4.87 KB
-Done in 17.64s.
+Done in 17.57s.

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @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
+
+- 9811c09: Remove layout animation to make searching less crazy
+
 ## 1.7.5
 
 ### Patch Changes

package/dist/esm/index.js

@@ -650,7 +650,6 @@ var menuPlacementOrigin = {
   ["right-end"]: { originX: 0, originY: 1 }
 };
 var menuAnimationConfig = {
-  layout: true,
   variants: {
     initial: (custom = { placement: "bottom" }) => ({
       ...menuPlacementOrigin[custom.placement],
@@ -2208,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;
@@ -2219,6 +2220,8 @@ var NestedMenuPopout = ({
   menuToggleElement,
   width,
   onClose,
+  toggleElementRef,
+  focusLockProps,
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
@@ -2228,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,
@@ -2242,7 +2252,11 @@ var NestedMenuPopout = ({
           menuContext: {
             ...activeMenuContext,
             ...rootMenuContextProps,
-            ...toggleProps
+            ...toggleProps,
+            ref: mergeRefs4(
+              toggleProps.ref,
+              toggleElementRef
+            )
           },
           children: menuToggleElement
         }
@@ -2320,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]);
@@ -2484,6 +2499,7 @@ var NestedMenu = ({
           ) }),
           menuToggleElement,
           width,
+          toggleElementRef,
           scheduleUpdateRef: (callback) => {
             popoutUpdateRef.current = callback;
             externalPopoutUpdateRef?.(callback);