@sproutsocial/seeds-react-menu 1.2.0 → 1.2.2

package/dist/index.js

@@ -127,7 +127,6 @@ __export(index_exports, {
   MenuLabel: () => MenuLabel,
   MenuPopout: () => MenuPopout,
   MenuRoot: () => MenuRoot,
-  MenuRootNoPopout: () => MenuRootNoPopout,
   MenuSearchInput: () => MenuSearchInput,
   MenuSearchTokenInput: () => MenuSearchTokenInput,
   MenuToggleButton: () => MenuToggleButton,
@@ -2603,9 +2602,10 @@ var MenuGroup = ({
 MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-var import_react10 = require("react");
+var import_react10 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
+var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
 
 // ../../seeds-design-tokens/seeds-motion/dist/seeds-motion-unitless.esm.js
 var MOTION_DURATION_FAST = 0.15;
@@ -2682,7 +2682,7 @@ var MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width: width2 = "300px",
+  width: width2,
   ...contextProps
 }) => {
   const {
@@ -2691,14 +2691,22 @@ var MenuRoot = ({
     closeMenu,
     inputValue,
     hiddenItemsCount = 0,
-    items
+    items,
+    getMenuProps
   } = contextProps;
-  const setIsOpen = (0, import_react10.useCallback)(
-    (newIsOpen) => {
-      newIsOpen ? openMenu?.() : closeMenu?.();
-    },
-    [openMenu, closeMenu]
-  );
+  const toggleElementRef = import_react10.default.useRef(null);
+  const [finalWidth, setFinalWidth] = import_react10.default.useState();
+  const min_width = 200;
+  (0, import_react10.useLayoutEffect)(() => {
+    if (width2) {
+      setFinalWidth(width2);
+    } else if (toggleElementRef.current?.offsetWidth) {
+      const toggleWidth = toggleElementRef.current.offsetWidth;
+      setFinalWidth(Math.max(toggleWidth, min_width));
+    } else {
+      setFinalWidth(min_width);
+    }
+  }, [width2, toggleElementRef.current?.offsetWidth]);
   (0, import_react10.useEffect)(() => {
     if (!inputValue) return;
     if (items && hiddenItemsCount >= items.length && isOpen) {
@@ -2706,6 +2714,7 @@ var MenuRoot = ({
     }
   }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
+  getMenuProps?.({}, { suppressRefError: true });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     MenuPopout,
     {
@@ -2714,37 +2723,55 @@ var MenuRoot = ({
       openMenu,
       closeMenu,
       content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children }),
+      width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuToggleProvider, { menuContext: { ...menuContext, ...toggleProps }, children: menuToggleElement })
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        MenuToggleProvider,
+        {
+          menuContext: {
+            ...menuContext,
+            ...toggleProps,
+            ref: (0, import_seeds_react_utilities.mergeRefs)(
+              toggleProps.ref,
+              toggleElementRef
+            )
+          },
+          children: menuToggleElement
+        }
+      )
     }
   );
 };
-var MenuRootNoPopout = ({
-  children,
-  menuToggleElement,
-  ...contextProps
-}) => {
-  const menuContext = useMenu(contextProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children });
-};
 
 // src/MenuLabel.tsx
 var import_react11 = require("react");
 var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
-var import_jsx_runtime11 = require("react/jsx-runtime");
-var MenuLabel = ({ children, ...rest }) => {
+var import_jsx_runtime11 = (
+  // This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
+  require("react/jsx-runtime")
+);
+var MenuLabel = ({
+  children,
+  required = false,
+  ...rest
+}) => {
   const { getLabelProps } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_label.Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_seeds_react_label.Label,
+    {
+      htmlFor: "fallback_menu_label",
+      required,
+      ...getLabelProps?.(),
+      ...rest,
+      children
+    }
+  );
 };
 
 // src/MenuToggleButton/MenuToggleButton.tsx
-var import_react12 = require("react");
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
 var import_jsx_runtime12 = require("react/jsx-runtime");
-var MenuToggleButton = ({
-  children,
-  ...rest
-}) => {
+var MenuToggleButton = (props) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_seeds_react_button.Button,
@@ -2757,18 +2784,17 @@ var MenuToggleButton = ({
         ...ariaProps,
         ...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
       }),
-      ...rest,
-      children
+      ...props
     }
   );
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-var import_react14 = __toESM(require("react"));
+var import_react13 = __toESM(require("react"));
 var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
 
 // src/hooks/useItemFiltering.tsx
-var import_react13 = __toESM(require("react"));
+var import_react12 = __toESM(require("react"));
 
 // src/utils/downshiftDefaults.ts
 var itemToString = (item) => {
@@ -2788,8 +2814,8 @@ var useItemFiltering = ({
   getShouldFilter = defaultGetShouldFilter,
   setHiddenItemsMap: setHiddenItemsMapProp
 }) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = import_react13.default.useState({});
-  const updateFilteredItems = import_react13.default.useCallback(
+  const [hiddenItemsMap, setHiddenItemsMap] = import_react12.default.useState({});
+  const updateFilteredItems = import_react12.default.useCallback(
     ({ inputValue }) => {
       const newHiddenItems = getShouldFilter({ inputValue }) ? allMenuItems.reduce((map, item) => {
         const isItemVisible = getIsItemVisible(item, inputValue);
@@ -2826,11 +2852,11 @@ var MenuSearchInput = ({
     getIsItemVisible,
     setHiddenItemsMap
   });
-  import_react14.default.useEffect(() => {
+  import_react13.default.useEffect(() => {
     updateFilteredItems({ inputValue: restInputProps.value || "" });
   }, [isOpen, restInputProps.value]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = import_react14.default.useCallback(
+  const handleKeyDown = import_react13.default.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
@@ -2857,7 +2883,7 @@ var MenuSearchInput = ({
 };
 
 // src/MenuTokenInput.tsx
-var import_react15 = __toESM(require("react"));
+var import_react14 = __toESM(require("react"));
 var import_styled_components11 = __toESM(require("styled-components"));
 var import_seeds_react_token_input = require("@sproutsocial/seeds-react-token-input");
 var import_jsx_runtime14 = require("react/jsx-runtime");
@@ -2890,7 +2916,7 @@ var MenuTokenInput = ({
     removeSelectedItem,
     setActiveIndex,
     selectedItems = []
-  } = import_react15.default.useContext(MenuContext);
+  } = import_react14.default.useContext(MenuContext);
   const removeToken = (tokenId) => {
     const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
     tokenToRemove && removeSelectedItem?.(tokenToRemove);
@@ -2944,7 +2970,7 @@ var MenuTokenInput = ({
 };
 
 // src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
-var import_react16 = __toESM(require("react"));
+var import_react15 = __toESM(require("react"));
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var MenuSearchTokenInput = ({
   getIsItemVisible,
@@ -2968,10 +2994,10 @@ var MenuSearchTokenInput = ({
     setHiddenItemsMap
   });
   const controlledValue = value || inputPropsValue !== void 0 ? `${inputPropsValue}` : void 0;
-  const [internalValue, setInternalValue] = import_react16.default.useState(
+  const [internalValue, setInternalValue] = import_react15.default.useState(
     controlledValue || ""
   );
-  const updateFilteredState = import_react16.default.useCallback(
+  const updateFilteredState = import_react15.default.useCallback(
     // defaults to an empty string if no value is passed
     (value2 = "") => {
       setInternalValue(value2);
@@ -2979,14 +3005,14 @@ var MenuSearchTokenInput = ({
     },
     [updateFilteredItems]
   );
-  import_react16.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [controlledValue]);
-  import_react16.default.useEffect(() => {
+  import_react15.default.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [isOpen]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = import_react16.default.useCallback(
+  const handleKeyDown = import_react15.default.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
@@ -3014,10 +3040,10 @@ var MenuSearchTokenInput = ({
 };
 
 // src/SubmenuItem/SubmenuItem.tsx
-var import_react17 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
-var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var SubmenuItemTrigger = ({
   id,
@@ -3026,7 +3052,7 @@ var SubmenuItemTrigger = ({
   ...rest
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
+  const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities2.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuItem,
     {
@@ -3076,17 +3102,17 @@ var SubmenuItem = ({
     itemsMap,
     isOpen: parentIsOpen
   } = useMenuContentContext();
-  const [submenuIsFocused, setSubmenuIsFocused] = import_react17.default.useState(false);
-  const [submenuIsOpen, setSubmenuIsOpen] = import_react17.default.useState(false);
-  const [submenuIsActive, setSubmenuIsActive] = import_react17.default.useState(false);
-  const submenuItemRef = import_react17.default.useRef(null);
-  const submenuRef = import_react17.default.useRef(null);
+  const [submenuIsFocused, setSubmenuIsFocused] = import_react16.default.useState(false);
+  const [submenuIsOpen, setSubmenuIsOpen] = import_react16.default.useState(false);
+  const [submenuIsActive, setSubmenuIsActive] = import_react16.default.useState(false);
+  const submenuItemRef = import_react16.default.useRef(null);
+  const submenuRef = import_react16.default.useRef(null);
   const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
   const item = itemsMap[id] || {
     index: 0,
     id
   };
-  import_react17.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     if (highlightedIndex === item.index) {
       !submenuIsOpen && setSubmenuIsOpen(true);
     } else if (submenuIsOpen && highlightedIndex !== -1) {
@@ -3094,7 +3120,7 @@ var SubmenuItem = ({
       setSubmenuIsActive(false);
     }
   }, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
-  const onSubmenuStateChange = import_react17.default.useCallback(
+  const onSubmenuStateChange = import_react16.default.useCallback(
     (state) => {
       if (state.isOpen !== void 0) {
         setSubmenuIsOpen(state.isOpen);
@@ -3138,7 +3164,7 @@ var SubmenuItem = ({
       onMenuItemClick();
     }
   };
-  import_react17.default.useEffect(() => {
+  import_react16.default.useEffect(() => {
     if (document && document.body) {
       document.body.addEventListener("click", onBodyClick, {
         capture: true
@@ -3242,11 +3268,11 @@ var ListboxToggleButton = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-var import_react19 = __toESM(require("react"));
+var import_react18 = __toESM(require("react"));
 var import_downshift3 = require("downshift");
 
 // src/hooks/useDownshiftDefaults.tsx
-var import_react18 = __toESM(require("react"));
+var import_react17 = __toESM(require("react"));
 
 // src/reducers/useComboboxStateReducer.tsx
 var import_downshift = require("downshift");
@@ -3370,12 +3396,12 @@ var useDownshiftDefaults = ({
   isMulti = false,
   multiSelectProps = {}
 } = {}) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = import_react18.default.useState({});
-  const hiddenItemsCount = import_react18.default.useMemo(
+  const [hiddenItemsMap, setHiddenItemsMap] = import_react17.default.useState({});
+  const hiddenItemsCount = import_react17.default.useMemo(
     () => Object.keys(hiddenItemsMap).filter(Boolean).length,
     [hiddenItemsMap]
   );
-  const isItemDisabled = import_react18.default.useCallback(
+  const isItemDisabled = import_react17.default.useCallback(
     (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
     [hiddenItemsMap]
   );
@@ -3454,7 +3480,7 @@ var ActionMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const [currentSelectedItem, setCurrentSelectedItem] = import_react19.default.useState(null);
+  const [currentSelectedItem, setCurrentSelectedItem] = import_react18.default.useState(null);
   const { isOpen, ...useSelectReturnProps } = (0, import_downshift3.useSelect)({
     ...defaultDownshiftProps.select,
     items: allMenuItems,
@@ -3466,7 +3492,7 @@ var ActionMenu = ({
     ),
     ...useSelectProps
   });
-  (0, import_react19.useEffect)(() => {
+  (0, import_react18.useEffect)(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -3488,7 +3514,7 @@ var ActionMenu = ({
 };
 
 // src/SingleSelectMenu/SingleSelectMenu.tsx
-var import_react20 = require("react");
+var import_react19 = require("react");
 var import_downshift4 = require("downshift");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var SingleSelectMenu = ({
@@ -3536,7 +3562,7 @@ var SingleSelectMenu = ({
 };
 
 // src/MultiSelectMenu/MultiSelectMenu.tsx
-var import_react21 = require("react");
+var import_react20 = require("react");
 var import_downshift5 = require("downshift");
 var import_jsx_runtime20 = require("react/jsx-runtime");
 var MultiSelectMenu = ({
@@ -3639,10 +3665,9 @@ var MultiSelectMenu = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react24 = require("react");
+var import_react22 = require("react");
 
 // src/Autocomplete/SingleAutocomplete.tsx
-var import_react22 = require("react");
 var import_downshift6 = require("downshift");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var SingleAutocomplete = ({
@@ -3700,7 +3725,7 @@ var SingleAutocomplete = ({
 };
 
 // src/Autocomplete/MultiAutocomplete.tsx
-var import_react23 = __toESM(require("react"));
+var import_react21 = __toESM(require("react"));
 var import_downshift7 = require("downshift");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var MultiAutocomplete = ({
@@ -3726,15 +3751,15 @@ var MultiAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const [selectedItems, setSelectedItems] = import_react23.default.useState(initialSelectedItems);
-  const [selectedItemIds, setSelectedItemIds] = import_react23.default.useState(getSelectedItemIds(initialSelectedItems));
-  const getIsItemVisibleMulti = import_react23.default.useCallback(
+  const [selectedItems, setSelectedItems] = import_react21.default.useState(initialSelectedItems);
+  const [selectedItemIds, setSelectedItemIds] = import_react21.default.useState(getSelectedItemIds(initialSelectedItems));
+  const getIsItemVisibleMulti = import_react21.default.useCallback(
     (item, inputValue) => {
       return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
     },
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
-  const getShouldFilterMulti = import_react23.default.useCallback(
+  const getShouldFilterMulti = import_react21.default.useCallback(
     (args) => {
       return !showSelectedItemsInDropdown && Object.keys(selectedItemIds).length > 0 || defaultGetShouldFilter(args);
     },
@@ -3758,7 +3783,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  import_react23.default.useEffect(() => {
+  import_react21.default.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = (0, import_downshift7.useMultipleSelection)({
@@ -3838,7 +3863,7 @@ var MultiAutocomplete = ({
 // src/Autocomplete/Autocomplete.tsx
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var Autocomplete = ({
-  multiSelect,
+  multiSelect = false,
   ...rest
 }) => {
   if (multiSelect) {
@@ -3848,7 +3873,7 @@ var Autocomplete = ({
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
-var import_react25 = require("react");
+var import_react23 = require("react");
 var import_seeds_react_input2 = require("@sproutsocial/seeds-react-input");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var AutocompleteInput = ({
@@ -3886,7 +3911,7 @@ var AutocompleteInput = ({
 };
 
 // src/Autocomplete/AutocompleteTokenInput.tsx
-var import_react26 = require("react");
+var import_react24 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var AutocompleteTokenInput = ({
   onKeyDown,
@@ -3930,7 +3955,7 @@ var AutocompleteTokenInput = ({
 
 // src/Autocomplete/AutocompleteSelect.tsx
 var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
-var import_react27 = require("react");
+var import_react25 = require("react");
 var import_styled_components13 = __toESM(require("styled-components"));
 var import_seeds_react_input3 = require("@sproutsocial/seeds-react-input");
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -3950,8 +3975,8 @@ var AutocompleteSelect = (props) => {
 };
 
 // src/NestedMenu/NestedMenu.tsx
-var import_react33 = require("react");
-var import_react34 = require("motion/react");
+var import_react31 = require("react");
+var import_react32 = require("motion/react");
 var import_downshift9 = require("downshift");
 
 // src/reducers/nestedMenuStateReducer.tsx
@@ -3979,7 +4004,7 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 };
 
 // src/NestedMenu/NestedMenuContext.tsx
-var import_react28 = require("react");
+var import_react26 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
@@ -3997,7 +4022,7 @@ var defaultNestedMenuContext = {
   },
   animationSpeed: MOTION_DURATION_FAST
 };
-var NestedMenuContext = (0, import_react28.createContext)(
+var NestedMenuContext = (0, import_react26.createContext)(
   defaultNestedMenuContext
 );
 var NestedMenuProvider = ({
@@ -4007,7 +4032,7 @@ var NestedMenuProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
-  const nestedMenuContextValue = (0, import_react28.useContext)(NestedMenuContext);
+  const nestedMenuContextValue = (0, import_react26.useContext)(NestedMenuContext);
   if (nestedMenuContextValue === null) {
     throw new Error(
       "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
@@ -4017,8 +4042,8 @@ var useNestedMenuContext = () => {
 };
 
 // src/NestedMenu/NestedMenuContent.tsx
-var import_react29 = require("react");
-var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
+var import_react27 = require("react");
+var import_seeds_react_utilities3 = require("@sproutsocial/seeds-react-utilities");
 
 // src/NestedMenu/NestedMenuItem.tsx
 var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
@@ -4058,10 +4083,10 @@ var NestedMenuContent = ({
 }) => {
   const { highlightedIndex, items } = useMenuContentContext();
   const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
-  const internalRef = (0, import_react29.useRef)(null);
-  const innerRef = (0, import_seeds_react_utilities2.mergeRefs)(internalRef, innerRefProp);
+  const internalRef = (0, import_react27.useRef)(null);
+  const innerRef = (0, import_seeds_react_utilities3.mergeRefs)(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
-  (0, import_react29.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     internalRef?.current?.focus();
   }, []);
   const onKeyDown = (e) => {
@@ -4099,7 +4124,7 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 // src/NestedMenu/NestedMenuHeader.tsx
 var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
 var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
-var import_react30 = require("motion/react");
+var import_react28 = require("motion/react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var NestedMenuHeader = ({
   backArrowLabel,
@@ -4110,8 +4135,8 @@ var NestedMenuHeader = ({
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react30.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_react30.motion.div,
+      leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react28.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react28.motion.div,
         {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
@@ -4129,7 +4154,7 @@ var NestedMenuHeader = ({
 };
 
 // src/NestedMenu/NestedMenuRoot.tsx
-var import_react31 = __toESM(require("react"));
+var import_react29 = __toESM(require("react"));
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var NestedMenuRoot = ({
   children,
@@ -4138,7 +4163,7 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  import_react31.default.useEffect(() => {
+  import_react29.default.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
@@ -4149,10 +4174,10 @@ var NestedMenuRoot = ({
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
-var import_react32 = require("motion/react");
+var import_react30 = require("motion/react");
 var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime32 = require("react/jsx-runtime");
-var StyledDiv = (0, import_styled_components14.default)(import_react32.motion.div)`
+var StyledDiv = (0, import_styled_components14.default)(import_react30.motion.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
@@ -4204,9 +4229,9 @@ var NestedMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const uniqueId = (0, import_react33.useId)();
+  const uniqueId = (0, import_react31.useId)();
   const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId}`;
-  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react33.useState)(false);
+  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react31.useState)(false);
   const useSelectReturnProps = (0, import_downshift9.useSelect)({
     ...defaultDownshiftProps.select,
     id: nestedMenuId,
@@ -4222,7 +4247,7 @@ var NestedMenu = ({
     ...useSelectReturnProps,
     ...restDefaults
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (!useSelectReturnProps.isOpen) {
       setHasLoadedOnce(false);
     } else {
@@ -4239,15 +4264,16 @@ var NestedMenu = ({
     id: nestedMenuId,
     onIsOpenChange: onNestedIsOpenChange
   };
-  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react33.useState)([initialMenuId]);
-  const [activeMenuContext, setActiveMenuContext] = (0, import_react33.useState)(defaultMenuContext);
-  const [currentMenuId, setCurrentMenuId] = (0, import_react33.useState)(initialMenuId);
-  const [isAdding, setIsAdding] = (0, import_react33.useState)(false);
+  rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
+  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 setSelectedMenuId = (id) => {
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
-  (0, import_react33.useEffect)(() => {
+  (0, import_react31.useEffect)(() => {
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
@@ -4341,8 +4367,8 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react34.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react34.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",
@@ -4390,8 +4416,8 @@ var NestedMenu = ({
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react34.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            import_react34.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",
@@ -4436,7 +4462,6 @@ var NestedMenu = ({
   MenuLabel,
   MenuPopout,
   MenuRoot,
-  MenuRootNoPopout,
   MenuSearchInput,
   MenuSearchTokenInput,
   MenuToggleButton,