@sproutsocial/seeds-react-menu 1.0.1 → 1.1.1

package/dist/esm/index.js

@@ -2118,10 +2118,10 @@ var MenuHeader = ({
 
 // src/MenuContent/styles.tsx
 import styled3 from "styled-components";
-import { motion } from "motion/react";
-var StyledMenuContent = styled3(motion.ul)`
+var StyledMenuContent = styled3.ul`
   margin: 0;
   padding: 0;
+  outline: none;
 `;
 
 // src/hooks/useMenuChildren.tsx
@@ -2546,12 +2546,78 @@ MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 import { useCallback as useCallback2, useEffect } from "react";
 import styled7 from "styled-components";
 import { Popout } from "@sproutsocial/seeds-react-popout";
+
+// ../../seeds-design-tokens/seeds-motion/dist/seeds-motion-unitless.esm.js
+var MOTION_DURATION_FAST = 0.15;
+
+// src/MenuRoot/MenuRoot.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
 var CustomPopoutContent = styled7(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
 `;
+var menuAnimationConfig = {
+  initial: {
+    scale: 0,
+    opacity: 0,
+    originX: 0,
+    originY: 0
+  },
+  animate: {
+    opacity: 1,
+    scale: 1,
+    originX: 0,
+    originY: 0,
+    transition: {
+      type: "tween",
+      duration: MOTION_DURATION_FAST,
+      ease: "circOut"
+    }
+  },
+  exit: {
+    opacity: 0,
+    scale: 1,
+    transition: {
+      type: "tween",
+      duration: MOTION_DURATION_FAST,
+      ease: "circIn"
+    }
+  }
+};
+var MenuPopout = ({
+  content,
+  width: width2 = "300px",
+  isOpen,
+  openMenu,
+  closeMenu,
+  focusLockProps,
+  ...popoutProps
+}) => {
+  const setIsOpen = useCallback2(
+    (newIsOpen) => {
+      newIsOpen ? openMenu?.() : closeMenu?.();
+    },
+    [openMenu, closeMenu]
+  );
+  return /* @__PURE__ */ jsx10(
+    Popout,
+    {
+      isOpen: !!isOpen,
+      setIsOpen,
+      content: (props) => /* @__PURE__ */ jsx10(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width2, children: typeof content === "function" ? content(props) : content }),
+      focusLockProps: {
+        // correct jerking motion when scrolling while the Popout is open
+        // returnFocus: false,
+        crossFrame: false,
+        ...focusLockProps
+      },
+      disableWrapperAria: true,
+      animationConfig: menuAnimationConfig,
+      ...popoutProps
+    }
+  );
+};
 var MenuRoot = ({
   children,
   menuToggleElement,
@@ -2581,25 +2647,26 @@ var MenuRoot = ({
   }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
   return /* @__PURE__ */ jsx10(
-    Popout,
+    MenuPopout,
     {
-      menuPopout: true,
       placement,
       isOpen: !!isOpen,
-      setIsOpen,
-      content: /* @__PURE__ */ jsx10(MenuContentProvider, { menuContext, children: /* @__PURE__ */ jsx10(CustomPopoutContent, { width: width2, children }) }),
-      focusLockProps: {
-        // correct jerking motion when scrolling while the Popout is open
-        // returnFocus: false,
-        crossFrame: false,
-        ...focusLockProps
-      },
-      disableWrapperAria: true,
+      openMenu,
+      closeMenu,
+      content: /* @__PURE__ */ jsx10(MenuContentProvider, { menuContext, children }),
       ...popoutProps,
       children: (toggleProps) => /* @__PURE__ */ jsx10(MenuToggleProvider, { menuContext: { ...menuContext, ...toggleProps }, children: menuToggleElement })
     }
   );
 };
+var MenuRootNoPopout = ({
+  children,
+  menuToggleElement,
+  ...contextProps
+}) => {
+  const menuContext = useMenu(contextProps);
+  return /* @__PURE__ */ jsx10(MenuContentProvider, { menuContext, children });
+};
 
 // src/MenuLabel.tsx
 import "react";
@@ -3079,6 +3146,43 @@ var SubmenuItem = ({
 };
 SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
+// src/ListboxToggleButton.tsx
+import styled9, { css as css6 } from "styled-components";
+import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+var StyledListboxToggleButton = styled9(
+  MenuToggleButton
+)`
+  ${(props) => props.invalid && css6`
+      border-color: ${(props2) => props2.theme.colors.form.border.error};
+    `}
+`;
+var StyledChevron = styled9.div`
+  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
+  ${({ $isOpen }) => $isOpen && `
+		transform: rotate(-180deg);
+	`}
+  transition: transform 0.15s;
+
+  ${({ invalid }) => invalid && css6`
+      color: ${(props) => props.theme.colors.icon.error};
+    `}
+`;
+var StyledInnerButton = styled9.div`
+  display: flex;
+  justify-content: space-between;
+`;
+var ListboxToggleButton = ({
+  children,
+  ...buttonProps
+}) => {
+  const { isOpen } = useMenuToggleContext();
+  return /* @__PURE__ */ jsx17(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ jsxs5(StyledInnerButton, { children: [
+    children,
+    /* @__PURE__ */ jsx17(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx17(Icon3, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+  ] }) });
+};
+
 // src/ActionMenu/ActionMenu.tsx
 import React16, { useEffect as useEffect2 } from "react";
 import {
@@ -3246,7 +3350,7 @@ var useDownshiftDefaults = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -3283,6 +3387,7 @@ var ActionMenu = ({
   menuItems,
   MenuItemComponent,
   stateReducer: externalStateReducer,
+  MenuRootComponent = MenuRoot,
   ...useSelectProps
 }) => {
   const { allMenuItems, menuItemsMap, children } = useMenuChildren({
@@ -3308,8 +3413,8 @@ var ActionMenu = ({
   useEffect2(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ jsx17(
-    MenuRoot,
+  return /* @__PURE__ */ jsx18(
+    MenuRootComponent,
     {
       ...{
         isListbox: false,
@@ -3329,12 +3434,13 @@ var ActionMenu = ({
 // src/SingleSelectMenu/SingleSelectMenu.tsx
 import "react";
 import { useSelect as useSelect3 } from "downshift";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var SingleSelectMenu = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
   menuItems,
   MenuItemComponent,
+  MenuRootComponent = MenuRoot,
   ...useSelectProps
 }) => {
   const { allMenuItems, menuItemsMap, children } = useMenuChildren({
@@ -3355,8 +3461,8 @@ var SingleSelectMenu = ({
     ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx18(
-    MenuRoot,
+  return /* @__PURE__ */ jsx19(
+    MenuRootComponent,
     {
       ...{
         isListbox: true,
@@ -3376,13 +3482,14 @@ var SingleSelectMenu = ({
 // src/MultiSelectMenu/MultiSelectMenu.tsx
 import "react";
 import { useSelect as useSelect4, useMultipleSelection } from "downshift";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var MultiSelectMenu = ({
   children: childrenProp,
   menuItems,
   MenuItemComponent,
   onSelectedItemChange: externalOnSelectedItemChange,
   stateReducer: externalStateReducer,
+  MenuRootComponent = MenuRoot,
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
@@ -3448,8 +3555,8 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx19(
-    MenuRoot,
+  return /* @__PURE__ */ jsx20(
+    MenuRootComponent,
     {
       ...{
         isListbox: true,
@@ -3481,11 +3588,12 @@ import "react";
 // src/Autocomplete/SingleAutocomplete.tsx
 import "react";
 import { useCombobox as useCombobox2 } from "downshift";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var SingleAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
   menuItems,
+  MenuRootComponent = MenuRoot,
   MenuItemComponent,
   itemToString: itemToString2 = itemToString,
   getIsItemVisible,
@@ -3514,8 +3622,8 @@ var SingleAutocomplete = ({
     ),
     ...useComboboxProps
   });
-  return /* @__PURE__ */ jsx20(
-    MenuRoot,
+  return /* @__PURE__ */ jsx21(
+    MenuRootComponent,
     {
       ...{
         isListbox: true,
@@ -3538,12 +3646,13 @@ var SingleAutocomplete = ({
 // src/Autocomplete/MultiAutocomplete.tsx
 import React20 from "react";
 import { useCombobox as useCombobox3, useMultipleSelection as useMultipleSelection2 } from "downshift";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var MultiAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
   menuItems,
   MenuItemComponent,
+  MenuRootComponent = MenuRoot,
   itemToString: itemToString2 = itemToString,
   itemToKey: itemToKey3 = itemToKey,
   getIsItemVisible = getDefaultGetIsItemVisible(itemToString2),
@@ -3642,8 +3751,8 @@ var MultiAutocomplete = ({
     },
     ...useComboboxProps
   });
-  return /* @__PURE__ */ jsx21(
-    MenuRoot,
+  return /* @__PURE__ */ jsx22(
+    MenuRootComponent,
     {
       ...{
         isListbox: true,
@@ -3671,21 +3780,21 @@ var MultiAutocomplete = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var Autocomplete = ({
   multiSelect,
   ...rest
 }) => {
   if (multiSelect) {
-    return /* @__PURE__ */ jsx22(MultiAutocomplete, { ...rest });
+    return /* @__PURE__ */ jsx23(MultiAutocomplete, { ...rest });
   }
-  return /* @__PURE__ */ jsx22(SingleAutocomplete, { ...rest });
+  return /* @__PURE__ */ jsx23(SingleAutocomplete, { ...rest });
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
 import "react";
 import { Input as Input2 } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -3696,7 +3805,7 @@ var AutocompleteInput = ({
   ...rest
 }) => {
   const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx23(
+  return /* @__PURE__ */ jsx24(
     Input2,
     {
       id: "autocomplete_input",
@@ -3720,59 +3829,54 @@ var AutocompleteInput = ({
   );
 };
 
-// src/NestedMenu/NestedMenu.tsx
-import { useState } from "react";
-
-// src/NestedMenu/NestedMenuContext.tsx
-import { createContext as createContext2, useContext as useContext4 } from "react";
-import { jsx as jsx24 } from "react/jsx-runtime";
-var defaultNestedMenuContext = {
-  selectedMenuPath: [],
-  setSelectedMenuId: () => {
-  },
-  setSelectedMenuPath: () => {
-  },
-  goBack: () => {
-  }
-};
-var NestedMenuContext = createContext2(
-  defaultNestedMenuContext
-);
-var NestedMenuProvider = ({
-  children,
-  ...nestedMenuProps
-}) => {
-  return /* @__PURE__ */ jsx24(NestedMenuContext.Provider, { value: nestedMenuProps, children });
-};
-var useNestedMenuContext = () => {
-  const nestedMenuContextValue = useContext4(NestedMenuContext);
-  if (nestedMenuContextValue === null) {
-    throw new Error(
-      "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
-    );
-  }
-  return nestedMenuContextValue;
-};
-
-// src/NestedMenu/NestedMenuHeader.tsx
-import { Button as Button2 } from "@sproutsocial/seeds-react-button";
-import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
+// src/Autocomplete/AutocompleteTokenInput.tsx
+import "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
-var NestedMenuHeader = ({
-  backArrowLabel,
-  ...props
+var AutocompleteTokenInput = ({
+  onKeyDown,
+  onChange,
+  onInput,
+  onBlur,
+  onClick,
+  inputProps,
+  getTokenProps,
+  ...rest
 }) => {
-  const { goBack, selectedMenuPath } = useNestedMenuContext();
-  const showBackArrow = selectedMenuPath.length > 1;
+  const {
+    getInputComponentProps,
+    getDropdownProps,
+    inputValue,
+    isOpen,
+    ref,
+    ariaProps
+  } = useMenuToggleContext();
   return /* @__PURE__ */ jsx25(
-    MenuHeader,
+    MenuTokenInput,
     {
-      leftAction: showBackArrow ? /* @__PURE__ */ jsx25(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx25(Icon3, { name: "arrow-left" }) }) : void 0,
-      ...props
+      id: "autocomplete_input",
+      name: "autocomplete_input",
+      ...getInputComponentProps({
+        ...getDropdownProps?.({ ref, preventKeyAction: isOpen }) || { ref },
+        onKeyDown,
+        onChange,
+        onInput,
+        onBlur,
+        onClick,
+        value: inputValue,
+        refKey: "innerRef",
+        inputProps,
+        ...ariaProps
+      }),
+      ...rest
     }
   );
 };
 
+// src/NestedMenu/NestedMenu.tsx
+import { useId, useEffect as useEffect4, useState } from "react";
+import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
+import { useSelect as useSelect6 } from "downshift";
+
 // src/reducers/nestedMenuStateReducer.tsx
 import { useCombobox as useCombobox4, useSelect as useSelect5 } from "downshift";
 var nestedMenuStateReducer = (_state, actionAndChanges) => {
@@ -3797,6 +3901,44 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
   }
 };
 
+// src/NestedMenu/NestedMenuContext.tsx
+import { createContext as createContext2, useContext as useContext5 } from "react";
+import { jsx as jsx26 } from "react/jsx-runtime";
+var defaultNestedMenuContext = {
+  selectedMenuPath: [],
+  setSelectedMenuId: () => {
+  },
+  setSelectedMenuPath: () => {
+  },
+  resetSelectedMenuPath: () => {
+  },
+  goBack: () => {
+  },
+  rootMenuContextProps: {},
+  activeMenuContext: defaultMenuContext,
+  setActiveMenuContext: () => {
+  },
+  animationSpeed: MOTION_DURATION_FAST
+};
+var NestedMenuContext = createContext2(
+  defaultNestedMenuContext
+);
+var NestedMenuProvider = ({
+  children,
+  ...nestedMenuProps
+}) => {
+  return /* @__PURE__ */ jsx26(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+};
+var useNestedMenuContext = () => {
+  const nestedMenuContextValue = useContext5(NestedMenuContext);
+  if (nestedMenuContextValue === null) {
+    throw new Error(
+      "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
+    );
+  }
+  return nestedMenuContextValue;
+};
+
 // src/NestedMenu/NestedMenuContent.tsx
 import { useEffect as useEffect3, useRef } from "react";
 import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
@@ -3804,7 +3946,7 @@ import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
 // src/NestedMenu/NestedMenuItem.tsx
 import { Icon as Icon4 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box4 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx26, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs6 } from "react/jsx-runtime";
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -3818,15 +3960,15 @@ var NestedMenuItem = ({
       setSelectedMenuId?.(childMenuId);
     }
   } : {};
-  return /* @__PURE__ */ jsx26(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs5(Box4, { display: "flex", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsx27(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box4, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ jsx26(MenuItemActionRight, { children: /* @__PURE__ */ jsx26(Icon4, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ jsx27(MenuItemActionRight, { children: /* @__PURE__ */ jsx27(Icon4, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -3863,7 +4005,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx27(
+  return /* @__PURE__ */ jsx28(
     MenuContent,
     {
       onKeyDown,
@@ -3875,82 +4017,317 @@ var NestedMenuContent = ({
 };
 NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
+// src/NestedMenu/NestedMenuHeader.tsx
+import { Button as Button2 } from "@sproutsocial/seeds-react-button";
+import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
+import { AnimatePresence, motion } from "motion/react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+var NestedMenuHeader = ({
+  backArrowLabel,
+  ...props
+}) => {
+  const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
+  const showBackArrow = selectedMenuPath.length > 1;
+  return /* @__PURE__ */ jsx29(
+    MenuHeader,
+    {
+      leftAction: /* @__PURE__ */ jsx29(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx29(
+        motion.div,
+        {
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: {
+            opacity: 0,
+            transition: { duration: animationSpeed }
+          },
+          children: showBackArrow ? /* @__PURE__ */ jsx29(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx29(Icon5, { name: "arrow-left" }) }) : void 0
+        },
+        `${selectedMenuPath}-header--button`
+      ) }),
+      ...props
+    }
+  );
+};
+
+// src/NestedMenu/NestedMenuRoot.tsx
+import React24 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var NestedMenuRoot = ({
+  children,
+  menuToggleElement,
+  ...contextProps
+}) => {
+  const menuContext = useMenu(contextProps);
+  const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
+  React24.useEffect(() => {
+    setActiveMenuContext(menuContext);
+  }, [
+    selectedMenuPath[selectedMenuPath.length - 1],
+    menuContext.selectedItem,
+    menuContext.selectedItems?.length
+  ]);
+  return /* @__PURE__ */ jsx30(MenuContentProvider, { menuContext, children });
+};
+
+// src/NestedMenu/NestedMenuPopout.tsx
+import { motion as motion2 } from "motion/react";
+import styled10 from "styled-components";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var StyledDiv = styled10(motion2.div)`
+  overflow: hidden;
+`;
+var NestedMenuPopout = ({
+  content,
+  menuToggleElement,
+  width: width2,
+  ...popoutProps
+}) => {
+  const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
+  return /* @__PURE__ */ jsx31(
+    MenuPopout,
+    {
+      ...popoutProps,
+      onClose: () => setTimeout(() => resetSelectedMenuPath?.(), 100),
+      isOpen: !!rootMenuContextProps.isOpen,
+      openMenu: rootMenuContextProps.openMenu,
+      closeMenu: rootMenuContextProps.closeMenu,
+      width: width2,
+      content: (props) => /* @__PURE__ */ jsx31(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      children: (toggleProps) => /* @__PURE__ */ jsx31(
+        MenuToggleProvider,
+        {
+          menuContext: {
+            ...activeMenuContext,
+            ...rootMenuContextProps,
+            ...toggleProps
+          },
+          children: menuToggleElement
+        }
+      )
+    }
+  );
+};
+
 // src/NestedMenu/NestedMenu.tsx
-import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs7 } from "react/jsx-runtime";
 var NestedMenu = ({
   initialMenuId,
   menus,
   onBackButtonClick,
   backArrowLabel,
-  menuToggleElement
+  menuToggleElement,
+  popoutProps = {},
+  width: width2 = "300px",
+  stateReducer: rootExternalStateReducer,
+  id: externalNestedMenuId,
+  ...useSelectProps
 }) => {
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false
+  });
+  const uniqueId = useId();
+  const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId}`;
+  const [hasLoadedOnce, setHasLoadedOnce] = useState(false);
+  const useSelectReturnProps = useSelect6({
+    ...defaultDownshiftProps.select,
+    id: nestedMenuId,
+    items: [],
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      rootExternalStateReducer
+    ),
+    ...useSelectProps
+  });
+  const rootMenuContextProps = {
+    ...useSelectProps,
+    ...useSelectReturnProps,
+    ...restDefaults
+  };
+  useEffect4(() => {
+    if (!useSelectReturnProps.isOpen) {
+      setHasLoadedOnce(false);
+    } else {
+      !hasLoadedOnce && setHasLoadedOnce(true);
+    }
+  }, [useSelectReturnProps.isOpen]);
+  const onNestedIsOpenChange = ({
+    isOpen: newIsOpen
+  }) => {
+    !newIsOpen && useSelectReturnProps.closeMenu?.();
+  };
+  const nestedMenuPropsFromRoot = {
+    // The selected menu needs to receive this id so that the toggle element can be properly associated with it.
+    id: nestedMenuId,
+    onIsOpenChange: onNestedIsOpenChange
+  };
   const [selectedMenuPath, setSelectedMenuPath] = useState([initialMenuId]);
-  const selectedMenuId = selectedMenuPath[selectedMenuPath.length - 1];
+  const [activeMenuContext, setActiveMenuContext] = useState(defaultMenuContext);
+  const [currentMenuId, setCurrentMenuId] = useState(initialMenuId);
+  const [isAdding, setIsAdding] = useState(false);
   const setSelectedMenuId = (id) => {
+    setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
+  useEffect4(() => {
+    if (selectedMenuPath.length > 0) {
+      const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
+      setCurrentMenuId(newMenuId);
+    }
+  }, [selectedMenuPath.join("-")]);
+  const resetSelectedMenuPath = () => {
+    setSelectedMenuPath([initialMenuId]);
+    setCurrentMenuId(initialMenuId);
+  };
   const goBack = () => {
+    setIsAdding(false);
     setSelectedMenuPath((currentPath) => currentPath.slice(0, -1));
-    onBackButtonClick?.(selectedMenuId);
+    onBackButtonClick?.(currentMenuId);
   };
   const {
     MenuComponent,
     menuProps,
     MenuHeaderComponent = NestedMenuHeader,
     menuHeaderProps = {}
-  } = menus[selectedMenuId] || {};
+  } = menus[currentMenuId] || {};
   const {
     children,
     menuItems,
     MenuItemComponent,
     stateReducer: externalStateReducer,
-    onStateChange: externalOnStateChange,
-    ...props
+    ...restMenuProps
   } = menuProps || {};
   const stateReducer = reduceReducers(
     nestedMenuStateReducer,
     externalStateReducer
   );
-  const onStateChange = (changes) => {
-    externalOnStateChange?.(changes);
-    if (changes.isOpen === false) {
-      setTimeout(() => {
-        setSelectedMenuPath([initialMenuId]);
-      }, 100);
-    }
+  const animationSpeed = MOTION_DURATION_FAST;
+  const contentVariants = {
+    arrive: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      // Start from left if is first render of root, else use default
+      x: !custom?.hasLoadedOnce ? "200%" : custom?.isAdding ? "200%" : "-200%"
+    }),
+    enter: (custom = { hasLoadedOnce: false }) => ({
+      opacity: 1,
+      x: 0,
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circOut",
+        delay: !custom.hasLoadedOnce ? animationSpeed : 0
+      }
+    }),
+    leave: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      x: custom?.isAdding ? "-200%" : "200%",
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circIn"
+      }
+    })
+  };
+  const menuVariants = {
+    arrive: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      // Start from left if is first render of root, else use default
+      x: !custom?.hasLoadedOnce ? "200%" : custom?.isAdding ? "200%" : "-200%"
+    }),
+    enter: (custom = { hasLoadedOnce: false }) => ({
+      opacity: 1,
+      x: 0,
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circOut",
+        delay: !custom.hasLoadedOnce ? animationSpeed : 0
+      }
+    }),
+    leave: (custom = { hasLoadedOnce: false, isAdding: false }) => ({
+      opacity: 0,
+      x: custom?.isAdding ? "-200%" : "200%",
+      transition: {
+        type: "tween",
+        duration: animationSpeed,
+        ease: "circIn"
+      }
+    })
   };
   const nestedMenuProps = {
+    ...nestedMenuPropsFromRoot,
     menuToggleElement,
     stateReducer,
-    onStateChange,
-    initialIsOpen: selectedMenuPath.length > 1,
-    children: /* @__PURE__ */ jsxs6(Fragment4, { children: [
-      MenuHeaderComponent && /* @__PURE__ */ jsx28(
-        MenuHeaderComponent,
-        {
-          backArrowLabel,
-          ...menuHeaderProps
-        }
-      ),
-      children && children,
-      menuItems && !children && /* @__PURE__ */ jsx28(
-        NestedMenuContent,
+    MenuRootComponent: NestedMenuRoot,
+    // This ensures that onNestedIsOpenChange will be triggered if the selected menu attempts to close itself.
+    initialIsOpen: true,
+    children: (
+      // Handles the smooth animating of the content
+      /* @__PURE__ */ jsx32(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
+        motion3.div,
         {
-          menuItems,
-          MenuItemComponent: MenuItemComponent ?? NestedMenuItem
-        }
-      )
-    ] }),
-    ...props
+          variants: contentVariants,
+          initial: "arrive",
+          animate: "enter",
+          exit: "leave",
+          custom: { isAdding, hasLoadedOnce },
+          children: [
+            MenuHeaderComponent && /* @__PURE__ */ jsx32(
+              MenuHeaderComponent,
+              {
+                backArrowLabel,
+                ...menuHeaderProps
+              }
+            ),
+            children && children,
+            menuItems && !children && /* @__PURE__ */ jsx32(
+              NestedMenuContent,
+              {
+                menuItems,
+                MenuItemComponent: MenuItemComponent ?? NestedMenuItem
+              }
+            )
+          ]
+        },
+        currentMenuId
+      ) })
+    ),
+    ...restMenuProps
   };
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx32(
     NestedMenuProvider,
     {
-      selectedMenuPath,
-      setSelectedMenuPath,
-      setSelectedMenuId,
-      goBack,
-      children: MenuComponent && /* @__PURE__ */ jsx28(MenuComponent, { ...nestedMenuProps })
+      ...{
+        selectedMenuPath,
+        setSelectedMenuPath,
+        setSelectedMenuId,
+        resetSelectedMenuPath,
+        goBack,
+        rootMenuContextProps,
+        activeMenuContext,
+        setActiveMenuContext,
+        animationSpeed
+      },
+      children: /* @__PURE__ */ jsx32(
+        NestedMenuPopout,
+        {
+          content: MenuComponent && // Handles the rerender of the component
+          /* @__PURE__ */ jsx32(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx32(
+            motion3.div,
+            {
+              variants: menuVariants,
+              initial: "arrive",
+              animate: "enter",
+              exit: "leave",
+              custom: { isAdding, hasLoadedOnce },
+              children: /* @__PURE__ */ jsx32(MenuComponent, { ...nestedMenuProps })
+            },
+            `${currentMenuId}-content`
+          ) }),
+          menuToggleElement,
+          width: width2,
+          ...popoutProps
+        }
+      )
     }
   );
 };
@@ -3958,7 +4335,10 @@ export {
   ActionMenu,
   Autocomplete,
   AutocompleteInput,
+  AutocompleteTokenInput,
+  CustomPopoutContent,
   INPUT_TYPES,
+  ListboxToggleButton,
   MenuContent,
   MenuContentContext,
   MenuContentProvider,
@@ -3973,7 +4353,9 @@ export {
   MenuItemRow,
   MenuItemText,
   MenuLabel,
+  MenuPopout,
   MenuRoot,
+  MenuRootNoPopout,
   MenuSearchInput,
   MenuSearchTokenInput,
   MenuToggleButton,
@@ -3988,6 +4370,7 @@ export {
   NestedMenuItem,
   NestedMenuProvider,
   SingleSelectMenu,
+  StyledListboxToggleButton,
   StyledMenuGroup,
   StyledMenuGroupUl,
   StyledMenuItem,