@sproutsocial/seeds-react-menu 1.7.6 → 1.7.8

package/dist/index.js

@@ -2369,8 +2369,8 @@ var AutocompleteSelect = (props) => {
 };
 
 // src/NestedMenu/NestedMenu.tsx
-var import_react30 = require("react");
-var import_react31 = require("motion/react");
+var import_react31 = require("react");
+var import_react32 = require("motion/react");
 var import_downshift9 = require("downshift");
 var import_lodash = __toESM(require("lodash.uniqueid"));
 
@@ -2573,10 +2573,12 @@ var NestedMenuRoot = ({
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
-var import_react29 = require("motion/react");
+var import_react29 = require("react");
+var import_react30 = require("motion/react");
 var import_styled_components12 = __toESM(require("styled-components"));
+var import_seeds_react_utilities4 = require("@sproutsocial/seeds-react-utilities");
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var StyledDiv = (0, import_styled_components12.default)(import_react29.motion.div)`
+var StyledDiv = (0, import_styled_components12.default)(import_react30.motion.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
@@ -2584,6 +2586,8 @@ var NestedMenuPopout = ({
   menuToggleElement,
   width,
   onClose,
+  toggleElementRef,
+  focusLockProps,
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
@@ -2593,13 +2597,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__ */ (0, import_jsx_runtime32.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      focusLockProps: {
+        crossFrame: false,
+        ...focusLockProps
+      },
       ...popoutProps,
       children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         MenuToggleProvider,
@@ -2607,7 +2618,11 @@ var NestedMenuPopout = ({
           menuContext: {
             ...activeMenuContext,
             ...rootMenuContextProps,
-            ...toggleProps
+            ...toggleProps,
+            ref: (0, import_seeds_react_utilities4.mergeRefs)(
+              toggleProps.ref,
+              toggleElementRef
+            )
           },
           children: menuToggleElement
         }
@@ -2619,8 +2634,8 @@ var NestedMenuPopout = ({
 // src/NestedMenu/NestedMenu.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var useId = () => {
-  const [id, setId] = (0, import_react30.useState)();
-  (0, import_react30.useEffect)(() => {
+  const [id, setId] = (0, import_react31.useState)();
+  (0, import_react31.useEffect)(() => {
     const uId = (0, import_lodash.default)();
     setId(uId);
   }, []);
@@ -2646,7 +2661,7 @@ var NestedMenu = ({
   });
   const uniqueId2 = useId();
   const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId2}`;
-  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react30.useState)(false);
+  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react31.useState)(false);
   const useSelectReturnProps = (0, import_downshift9.useSelect)({
     ...defaultDownshiftProps.select,
     id: nestedMenuId,
@@ -2662,7 +2677,7 @@ var NestedMenu = ({
     ...useSelectReturnProps,
     ...restDefaults
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!useSelectReturnProps.isOpen) {
       setHasLoadedOnce(false);
     } else {
@@ -2680,16 +2695,17 @@ var NestedMenu = ({
     onIsOpenChange: onNestedIsOpenChange
   };
   rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
-  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react30.useState)([initialMenuId]);
-  const [activeMenuContext, setActiveMenuContext] = (0, import_react30.useState)(defaultMenuContext);
-  const [currentMenuId, setCurrentMenuId] = (0, import_react30.useState)(initialMenuId);
-  const [isAdding, setIsAdding] = (0, import_react30.useState)(false);
-  const popoutUpdateRef = (0, import_react30.useRef)();
+  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react31.useState)([initialMenuId]);
+  const [activeMenuContext, setActiveMenuContext] = (0, import_react31.useState)(defaultMenuContext);
+  const [currentMenuId, setCurrentMenuId] = (0, import_react31.useState)(initialMenuId);
+  const [isAdding, setIsAdding] = (0, import_react31.useState)(false);
+  const popoutUpdateRef = (0, import_react31.useRef)();
+  const toggleElementRef = (0, import_react31.useRef)(null);
   const setSelectedMenuId = (id) => {
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
@@ -2783,8 +2799,8 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react31.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react31.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react32.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        import_react32.motion.div,
         {
           variants: contentVariants,
           initial: "arrive",
@@ -2814,7 +2830,7 @@ var NestedMenu = ({
     ),
     ...restMenuProps
   };
-  (0, import_react30.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     popoutUpdateRef.current?.();
   }, [nestedMenuProps.children]);
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
@@ -2835,8 +2851,8 @@ var NestedMenu = ({
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react31.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            import_react31.motion.div,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react32.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            import_react32.motion.div,
             {
               variants: menuVariants,
               initial: "arrive",
@@ -2849,6 +2865,7 @@ var NestedMenu = ({
           ) }),
           menuToggleElement,
           width,
+          toggleElementRef,
           scheduleUpdateRef: (callback) => {
             popoutUpdateRef.current = callback;
             externalPopoutUpdateRef?.(callback);