@sproutsocial/seeds-react-menu 0.4.1 → 0.6.0

package/dist/esm/index.js

@@ -94,27 +94,37 @@ var require_object_assign = __commonJS({
   }
 });
 
-// src/MenuItem/MenuItem.tsx
-import "react";
-
 // src/MenuContext.tsx
-import {
-  createContext,
-  useMemo,
-  useContext
-} from "react";
+import React, { createContext, useMemo, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 var defaultMenuContext = {
   items: [],
-  itemsMap: {}
-};
+  itemsMap: {},
+  isItemSelected: () => false,
+  getInputComponentProps: () => ({})
+};
+var getSelectedItemIds = (selectedItems) => selectedItems?.reduce(
+  (selected, item) => ({ ...selected, [item.id]: true }),
+  {}
+);
+var checkIfItemSelected = ({
+  id,
+  selectedItem,
+  selectedItemIds
+}) => selectedItemIds ? !!selectedItemIds[id] : selectedItem?.id === id;
 var useMenu = ({
   items = [],
   isListbox = false,
   isOpen = false,
   itemsMap: itemsMapFromProps,
+  selectedItemIds: selectedItemIdsFromProps,
+  selectedItem,
+  selectedItems,
+  getInputProps,
+  contentRef: contentRefFromProps,
   ...rest
 } = {}) => {
+  const contentRef = contentRefFromProps || React.createRef();
   const menuProps = useMemo(() => ({ ...rest }), [rest]);
   const itemsMap = useMemo(
     () => itemsMapFromProps || items.reduce((map, item) => {
@@ -125,27 +135,90 @@ var useMenu = ({
     }, {}),
     [items, itemsMapFromProps]
   );
+  const selectedItemIds = useMemo(
+    () => selectedItemIdsFromProps || getSelectedItemIds(selectedItems),
+    [selectedItems, selectedItemIdsFromProps]
+  );
+  const isItemSelected = React.useCallback(
+    (id) => checkIfItemSelected({ id, selectedItem, selectedItemIds }),
+    [selectedItem, selectedItemIds]
+  );
+  const getInputComponentProps = React.useCallback(
+    ({ inputProps, ...props }) => {
+      if (!getInputProps) return {};
+      const {
+        ["aria-activedescendant"]: activedescendant,
+        ["aria-autocomplete"]: autocomplete,
+        ["aria-controls"]: controls,
+        ["aria-expanded"]: expanded,
+        ["aria-labelledby"]: labelledby,
+        role,
+        autoComplete,
+        onClick,
+        value,
+        ...restProps
+      } = getInputProps(props);
+      return {
+        ...restProps,
+        inputProps: {
+          ["aria-activedescendant"]: activedescendant,
+          ["aria-autocomplete"]: autocomplete,
+          ["aria-controls"]: controls,
+          ["aria-expanded"]: expanded,
+          ["aria-labelledby"]: labelledby,
+          role,
+          autoComplete,
+          onClick,
+          value,
+          ...inputProps
+        }
+      };
+    },
+    [getInputProps]
+  );
   return {
     isOpen,
     isListbox,
     items,
     itemsMap,
+    selectedItem,
+    selectedItems,
+    selectedItemIds,
+    isItemSelected,
+    getInputProps,
+    getInputComponentProps,
+    contentRef,
     ...menuProps
   };
 };
-var MenuContext = createContext(defaultMenuContext);
-var MenuProvider = ({
+var MenuToggleContext = createContext(defaultMenuContext);
+var MenuToggleProvider = ({
   children,
-  menuProps
+  menuContext
 }) => {
-  const filterContext = useMenu(menuProps);
-  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { ...filterContext }, children });
+  return /* @__PURE__ */ jsx(MenuToggleContext.Provider, { value: { ...menuContext }, children });
 };
-var useMenuContext = () => {
-  const menuContextValue = useContext(MenuContext);
+var useMenuToggleContext = () => {
+  const menuContextValue = useContext(MenuToggleContext);
   if (menuContextValue === null) {
     throw new Error(
-      "useMenuContext must be used within a <MenuContext.Provider />"
+      "useMenuToggleContext must be used within a <MenuToggleContext.Provider />"
+    );
+  }
+  return menuContextValue;
+};
+var MenuContentContext = createContext(defaultMenuContext);
+var MenuContentProvider = ({
+  children,
+  menuContext
+}) => {
+  return /* @__PURE__ */ jsx(MenuContentContext.Provider, { value: { ...menuContext }, children });
+};
+var useMenuContentContext = () => {
+  const menuContextValue = useContext(MenuContentContext);
+  if (menuContextValue === null) {
+    throw new Error(
+      "useMenuContentContext must be used within a <MenuContentContext.Provider />"
     );
   }
   return menuContextValue;
@@ -1695,6 +1768,10 @@ var highlightedStyles = css4`
   color: ${({ theme: theme2 }) => theme2.colors.text.body};
   text-decoration: none;
 `;
+var activeStyles = css4`
+  background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.active};
+  color: ${({ theme: theme2 }) => theme2.colors.text.inverse};
+`;
 var MenuItemContainer = styled.li`
   box-sizing: border-box;
   list-style-type: none;
@@ -1709,7 +1786,7 @@ var MenuItemContainer = styled.li`
     margin-bottom: ${({ theme: theme2 }) => theme2.space[300]};
   }
 `;
-var StyledMenuItem = styled.div`
+var StyledMenuItem = styled.button`
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -1748,10 +1825,12 @@ var StyledMenuItem = styled.div`
     ${focusRing}
   }
 
+  /* Active */
+  ${({ $active }) => $active && activeStyles}
+
   /* Pressed state*/
   &:active {
-    background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.active};
-    color: ${({ theme: theme2 }) => theme2.colors.text.inverse};
+    ${activeStyles}
   }
 
   &[aria-disabled="true"] {
@@ -1772,12 +1851,17 @@ var MenuItemRow = styled.div`
   pointer-events: none;
 `;
 var MenuItemAction = styled.div`
-  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 `;
+var MenuItemActionLeft = styled(MenuItemAction)`
+  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
+`;
+var MenuItemActionRight = styled(MenuItemAction)`
+  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
+`;
 var MenuItemText = styled.div`
   word-break: break-word;
   flex-grow: 1;
@@ -1785,7 +1869,7 @@ var MenuItemText = styled.div`
 `;
 
 // src/MenuItem/useOptionProps.tsx
-import { useContext as useContext2, useMemo as useMemo2 } from "react";
+import { useMemo as useMemo2 } from "react";
 import { Icon } from "@sproutsocial/seeds-react-icon";
 import { Checkbox } from "@sproutsocial/seeds-react-checkbox";
 import { Switch } from "@sproutsocial/seeds-react-switch";
@@ -1808,6 +1892,7 @@ var SelectionIndicator = ({
       return /* @__PURE__ */ jsx2(
         Checkbox,
         {
+          tabIndex: -1,
           onChange: () => {
           },
           checked: selected,
@@ -1819,6 +1904,7 @@ var SelectionIndicator = ({
       return /* @__PURE__ */ jsx2(
         Switch,
         {
+          tabIndex: -1,
           onClick: inputStub,
           checked: !!selected,
           "aria-labelledby": labeledBy,
@@ -1829,6 +1915,7 @@ var SelectionIndicator = ({
       return /* @__PURE__ */ jsx2(
         Radio,
         {
+          tabIndex: -1,
           checked: selected,
           id: `MenuItem-${inputType}-${id}`,
           name: `MenuItem-${inputType}`,
@@ -1852,9 +1939,9 @@ var useOptionProps = ({
   inputLabelId,
   ...props
 }) => {
-  const { selectedItem, selectedItems, isListbox } = useContext2(MenuContext);
+  const { selectedItem, selectedItems, isListbox, isItemSelected } = useMenuContentContext();
   const selected = useMemo2(
-    () => selectedItem?.id === id || !!selectedItems?.find((item) => item?.id === id),
+    () => isItemSelected(id),
     [selectedItem, selectedItems]
   );
   const label = inputLabelId || `menu-item-child-${id}`;
@@ -1862,7 +1949,7 @@ var useOptionProps = ({
     active: selected,
     ["aria-selected"]: selected,
     children: /* @__PURE__ */ jsxs(MenuItemRow, { children: [
-      /* @__PURE__ */ jsx2(MenuItemAction, { children: /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx2(MenuItemActionLeft, { children: /* @__PURE__ */ jsx2(
         SelectionIndicator,
         {
           id,
@@ -1885,12 +1972,19 @@ var MenuItem = ({
   onClick,
   onKeyDown,
   disabled: disabled2 = false,
-  ref,
+  active,
+  innerRef,
   href,
   color: color2,
   ...props
 }) => {
-  const { getItemProps, itemsMap, highlightedIndex, isListbox } = useMenuContext();
+  const {
+    getItemProps,
+    itemsMap,
+    highlightedIndex,
+    isListbox,
+    hiddenItemsMap = {}
+  } = useMenuContentContext();
   const { ...optionProps } = useOptionProps({
     id,
     children,
@@ -1898,23 +1992,26 @@ var MenuItem = ({
   });
   const item = itemsMap[id] || { index: 0, id };
   const highlighted = highlightedIndex === item?.index;
-  return item.hidden ? /* @__PURE__ */ jsx3(Fragment, {}) : /* @__PURE__ */ jsx3(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx3(
+  return hiddenItemsMap[item.id] ? /* @__PURE__ */ jsx3(Fragment, {}) : /* @__PURE__ */ jsx3(MenuItemContainer, { role: "none", children: /* @__PURE__ */ jsx3(
     StyledMenuItem,
     {
       id,
       $highlighted: highlighted,
+      $active: active,
       ...getItemProps?.({
         ...isListbox ? {} : { role: "menuitem" },
         item,
         index: item.index,
-        // This prop no longer supported in downshift
+        // The disabled prop no longer supported in downshift. Use isItemDisabled instead.
         // disabled,
         onClick,
-        onKeyDown
+        onKeyDown,
+        ref: innerRef
       }),
       as: isListbox ? void 0 : href ? "a" : "button",
       href,
       children,
+      tabIndex: -1,
       ...optionProps,
       ...props
     }
@@ -1957,14 +2054,13 @@ var MenuTitleText = styled2.h3`
   color: ${({ theme: theme2 }) => theme2.colors.text.headline};
   font-weight: ${({ theme: theme2 }) => theme2.fontWeights.bold};
   margin: 0px;
-  flex-grow: 2;
-  justify-self: start;
+  flex-grow: 1;
 
   ${({ theme: theme2 }) => theme2.typography[200]}
 
   ${({ $leftAction, theme: theme2 }) => $leftAction && `
-			padding-left: ${theme2.space[350]};
-	`}
+      padding-left: ${theme2.space[350]};
+    `}
 `;
 var MenuChildrenContainer = styled2.div`
   grid-column: 1 / -1;
@@ -1972,19 +2068,24 @@ var MenuChildrenContainer = styled2.div`
 `;
 var MenuHeaderFeatures = styled2.div`
   display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
 
-  > a {
-    white-space: nowrap;
-  }
-
-  &:first-child {
-    flex-grow: 1;
-    justify-self: start;
+  .right-action {
+    margin-left: auto; /* Pushes the right action to the right */
+    display: flex;
+    justify-content: flex-end;
+    flex-shrink: 0; /* Prevents it from shrinking */
+    max-width: 40%; /* Prevents it from taking too much space */
+    text-align: right;
   }
 
-  &:last-child {
-    flex-grow: 1;
-    justify-self: end;
+  > a,
+  > button {
+    display: flex;
+    align-items: center;
+    word-break: break-word;
   }
 `;
 
@@ -2001,7 +2102,7 @@ var MenuHeader = ({
     /* @__PURE__ */ jsxs2(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
       leftAction && leftAction,
       title && /* @__PURE__ */ jsx4(MenuTitleText, { $leftAction: !!leftAction, children: title }),
-      rightAction && rightAction
+      rightAction && /* @__PURE__ */ jsx4("div", { className: "right-action", children: rightAction })
     ] }),
     children && /* @__PURE__ */ jsx4(MenuChildrenContainer, { children })
   ] }) });
@@ -2015,25 +2116,216 @@ var StyledMenuContent = styled3(motion.ul)`
   padding: 0;
 `;
 
+// src/hooks/useMenuChildren.tsx
+import React4, { useMemo as useMemo3 } from "react";
+import { Fragment as Fragment3, jsx as jsx5 } from "react/jsx-runtime";
+var walkAllChildren = (children, callback) => {
+  const walk = (element, parents2) => {
+    if (element === null || element === void 0) return;
+    callback(element, parents2);
+    const newParents = [...parents2, element];
+    const children2 = element.props?.children;
+    React4.Children.toArray(children2).forEach((child) => {
+      walk(child, newParents);
+    });
+  };
+  const parents = [];
+  React4.Children.toArray(children).forEach((child) => {
+    walk(child, parents);
+  });
+};
+var getComponentName = (element) => {
+  if (element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string") {
+    return element.type.name;
+  }
+};
+var addMenuItem = ({
+  itemProps,
+  allMenuItems,
+  menuItemsMap
+}) => {
+  const item = {
+    ...itemProps,
+    index: allMenuItems.length
+  };
+  allMenuItems.push(item);
+  menuItemsMap[`${item.id}`] = item;
+};
+var addItemsFromGroup = ({
+  groupElement: menuGroup,
+  allMenuItems,
+  menuItemsMap
+}) => {
+  const menuItems = menuGroup.props.menuItems;
+  if (menuItems) {
+    menuItems.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.id,
+          disabled: menuItem.disabled,
+          menuItemProps: menuItem,
+          menuGroupProps: menuGroup.props
+        },
+        allMenuItems,
+        menuItemsMap
+      });
+    });
+  } else if (menuGroup.props.children) {
+    let children = menuGroup.props.children;
+    if (!Array.isArray(children)) {
+      children = [children];
+    }
+    children.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.props.id,
+          disabled: menuItem.props.disabled,
+          menuItemProps: menuItem.props,
+          menuGroupProps: menuGroup.props
+        },
+        allMenuItems,
+        menuItemsMap
+      });
+    });
+  }
+};
+var addItemsFromContent = ({
+  contentElement: menuContent,
+  allMenuItems,
+  menuItemsMap
+}) => {
+  if (!("menuItems" in menuContent.props)) return;
+  if (menuContent.props.menuItems) {
+    menuContent.props.menuItems.forEach((menuItem) => {
+      addMenuItem({
+        itemProps: {
+          id: menuItem.id,
+          disabled: menuItem.disabled,
+          menuItemProps: menuItem
+        },
+        allMenuItems,
+        menuItemsMap
+      });
+    });
+  }
+};
+var setMenuItemsFromChildren = ({
+  children,
+  allMenuItems,
+  menuItemsMap
+}) => {
+  walkAllChildren(children, (element) => {
+    switch (getComponentName(element)) {
+      case "MenuItem":
+      case "SubmenuItem":
+      case "NestedMenuItem":
+        const menuItem = element;
+        if (menuItemsMap[`${menuItem.props.id}`]) return;
+        addMenuItem({
+          itemProps: {
+            id: menuItem.props.id,
+            disabled: menuItem.props.disabled,
+            menuItemProps: menuItem.props
+          },
+          allMenuItems,
+          menuItemsMap
+        });
+        break;
+      case "MenuGroup":
+        addItemsFromGroup({
+          // Cast element to the TypeMenuGroupElement since we know it's a group and is needed for addItemsFromGroup.
+          groupElement: element,
+          allMenuItems,
+          menuItemsMap
+        });
+        break;
+      case "MenuContent":
+      case "NestedMenuContent":
+        addItemsFromContent({
+          // Cast element to the TypeMenuContentElement since we know it's a content and is needed for addItemsFromContent.
+          contentElement: element,
+          allMenuItems,
+          menuItemsMap
+        });
+        break;
+      default:
+        break;
+    }
+  });
+};
+var mapMenuItems = ({
+  menuItems,
+  MenuItemComponent = MenuItem
+}) => {
+  return /* @__PURE__ */ jsx5(Fragment3, { children: menuItems.map((menuItemProps) => /* @__PURE__ */ jsx5(MenuItemComponent, { ...menuItemProps }, menuItemProps.id)) });
+};
+var getChildrenFromMenuItems = ({
+  menuItems,
+  MenuItemComponent
+}) => /* @__PURE__ */ jsx5(MenuContent, { menuItems, MenuItemComponent });
+var useMenuChildren = ({
+  children: childrenProp,
+  menuItems,
+  MenuItemComponent
+}) => {
+  const { allMenuItems, menuItemsMap, children } = useMemo3(() => {
+    let children2 = /* @__PURE__ */ jsx5(Fragment3, {});
+    const menuItemsMap2 = {};
+    const allMenuItems2 = [];
+    if (menuItems && menuItems.length) {
+      menuItems.forEach((menuItem) => {
+        addMenuItem({ itemProps: menuItem, allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2 });
+      });
+      children2 = getChildrenFromMenuItems({ menuItems, MenuItemComponent });
+    } else if (childrenProp) {
+      children2 = childrenProp;
+      setMenuItemsFromChildren({
+        children: childrenProp,
+        allMenuItems: allMenuItems2,
+        menuItemsMap: menuItemsMap2
+      });
+    }
+    return { allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2, children: children2 };
+  }, [childrenProp, menuItems, MenuItemComponent]);
+  return { allMenuItems, menuItemsMap, children };
+};
+
 // src/MenuContent/MenuContent.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { useCallback } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
 var MenuContent = ({
   id = "menu_content",
-  children,
+  children: childrenProp,
+  menuItems,
+  MenuItemComponent,
+  onKeyDown,
+  innerRef = null,
   ...rest
 }) => {
-  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
-  return /* @__PURE__ */ jsx5(
+  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContentContext();
+  const toggleButtonProps = getToggleButtonProps?.();
+  const children = childrenProp || !menuItems || !menuItems.length ? childrenProp : mapMenuItems({ menuItems, MenuItemComponent });
+  if (!children) {
+    return null;
+  }
+  const handleKeyDown = useCallback(
+    (e) => {
+      toggleButtonProps?.["onKeyDown"]?.(e);
+      onKeyDown?.(e);
+    },
+    [onKeyDown, toggleButtonProps?.["onKeyDown"]]
+  );
+  return /* @__PURE__ */ jsx6(
     StyledMenuContent,
     {
       autoFocus: true,
       id,
       tabIndex: 0,
-      onKeyDown: getToggleButtonProps?.()["onKeyDown"] || void 0,
-      "aria-activedescendant": getToggleButtonProps?.()["aria-activedescendant"],
+      onKeyDown: handleKeyDown,
+      "aria-activedescendant": toggleButtonProps?.["aria-activedescendant"],
       ...getMenuProps?.(
         {
-          ...isListbox ? {} : { role: "menu" }
+          ...isListbox ? { ref: innerRef } : { ref: innerRef, role: "menu" }
         },
         // Suppress ref error for now
         { suppressRefError: true }
@@ -2056,9 +2348,9 @@ var StyledMenuFooterBox = styled4(Box2)`
 `;
 
 // src/MenuFooter/MenuFooter.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MenuFooter = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx6(StyledMenuFooterBox, { ...rest, children });
+  return /* @__PURE__ */ jsx7(StyledMenuFooterBox, { ...rest, children });
 };
 
 // src/MenuGroup/MenuGroup.tsx
@@ -2078,7 +2370,7 @@ import {
   GRID,
   TYPOGRAPHY
 } from "@sproutsocial/seeds-react-system-props";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 import "react";
 var Container = styled5.span`
   margin: 0;
@@ -2139,7 +2431,7 @@ var SmallBodyCopy = styled22(styles_default)`
 `;
 var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
   const qaText = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     styles_default,
     {
       typeScale: fontSize2,
@@ -2154,7 +2446,7 @@ var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
 var withTextLogic = (Component) => {
   return ({ children, ...props }) => {
     const qaText = typeof children === "string" ? children : void 0;
-    return /* @__PURE__ */ jsx7(Component, { "data-qa-text": qaText, ...props, children });
+    return /* @__PURE__ */ jsx8(Component, { "data-qa-text": qaText, ...props, children });
   };
 };
 var HeadlineWithLogic = withTextLogic(Headline);
@@ -2199,6 +2491,7 @@ var StyledMenuGroup = styled6.li`
   ${space}
 `;
 var StyledTitle = styled6(index_default.SmallSubHeadline)`
+  font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
   margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
     0px ${({ theme: theme2 }) => theme2.space[400]};
 `;
@@ -2208,7 +2501,7 @@ var StyledMenuGroupUl = styled6.ul`
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
@@ -2216,12 +2509,12 @@ var MenuGroup = ({
   color: color2,
   isSingleSelect,
   id,
-  items,
-  MenuItemComponent = MenuItem,
+  menuItems,
+  MenuItemComponent,
   ...rest
 }) => {
   const titleId = `menu-group-title-${Math.random().toString(36).slice(2, 11)}`;
-  const children = childrenProp || !items || !items.length ? childrenProp : items.map((item) => /* @__PURE__ */ jsx8(MenuItemComponent, { ...item }, item.id));
+  const children = childrenProp || !menuItems || !menuItems.length ? childrenProp : mapMenuItems({ menuItems, MenuItemComponent });
   if (!children) {
     return null;
   }
@@ -2235,18 +2528,18 @@ var MenuGroup = ({
       color: color2,
       ...rest,
       children: [
-        title && /* @__PURE__ */ jsx8(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ jsx8(StyledMenuGroupUl, { children })
+        title && /* @__PURE__ */ jsx9(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ jsx9(StyledMenuGroupUl, { children })
       ]
     }
   );
 };
 
 // src/MenuRoot/MenuRoot.tsx
-import { useCallback } from "react";
+import { useCallback as useCallback2 } from "react";
 import styled7 from "styled-components";
 import { Popout } from "@sproutsocial/seeds-react-popout";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var CustomPopoutContent = styled7(Popout.Content)`
   padding: 0;
   margin-left: 0;
@@ -2255,24 +2548,26 @@ var CustomPopoutContent = styled7(Popout.Content)`
 var MenuRoot = ({
   children,
   menuToggleElement,
-  popoutProps: { focusLockProps, ...popoutProps } = {},
+  popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
   width: width2 = "300px",
   ...contextProps
 }) => {
   const { isOpen, openMenu, closeMenu } = contextProps;
-  const setIsOpen = useCallback(
+  const setIsOpen = useCallback2(
     (newIsOpen) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ jsx9(MenuProvider, { menuProps: contextProps, children: /* @__PURE__ */ jsx9(
+  const menuContext = useMenu(contextProps);
+  return /* @__PURE__ */ jsx10(
     Popout,
     {
       menuPopout: true,
+      placement,
       isOpen: !!isOpen,
       setIsOpen,
-      content: /* @__PURE__ */ jsx9(CustomPopoutContent, { width: width2, children }),
+      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,
@@ -2281,37 +2576,38 @@ var MenuRoot = ({
       },
       disableWrapperAria: true,
       ...popoutProps,
-      children: menuToggleElement
+      children: (toggleProps) => /* @__PURE__ */ jsx10(MenuToggleProvider, { menuContext: { ...menuContext, ...toggleProps }, children: menuToggleElement })
     }
-  ) });
+  );
 };
 
 // src/MenuLabel.tsx
 import "react";
 import { Label } from "@sproutsocial/seeds-react-label";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 var MenuLabel = ({ children, ...rest }) => {
-  const { getLabelProps } = useMenuContext();
-  return /* @__PURE__ */ jsx10(Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
+  const { getLabelProps } = useMenuToggleContext();
+  return /* @__PURE__ */ jsx11(Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
 };
 
-// src/MenuToggleButton.tsx
-import { useContext as useContext3 } from "react";
+// src/MenuToggleButton/MenuToggleButton.tsx
+import "react";
 import { Button } from "@sproutsocial/seeds-react-button";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var MenuToggleButton = ({
   children,
   ...rest
 }) => {
-  const { getToggleButtonProps, isListbox, getDropdownProps } = useContext3(MenuContext);
-  return /* @__PURE__ */ jsx11(
+  const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
+  return /* @__PURE__ */ jsx12(
     Button,
     {
       appearance: "secondary",
       ...getToggleButtonProps?.({
         // Decide if we want the preventKeyAction stuff. Maybe create a prop to allow for this to be overriden.
-        ...getDropdownProps?.({ preventKeyAction: true }),
+        ...getDropdownProps?.({ ref, preventKeyAction: true }) || { ref },
         refKey: "innerRef",
+        ...ariaProps,
         ...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
       }),
       ...rest,
@@ -2320,235 +2616,705 @@ var MenuToggleButton = ({
   );
 };
 
-// src/ActionMenu/ActionMenu.tsx
-import React10, { useEffect } from "react";
-import {
-  useSelect as useSelect2
-} from "downshift";
-
-// src/hooks/useItemsFromChildren.tsx
-import React9, { useMemo as useMemo4 } from "react";
-var walkAllChildren = (children, callback) => {
-  const walk = (element, parents2) => {
-    if (element === null || element === void 0) return;
-    callback(element, parents2);
-    const newParents = [...parents2, element];
-    const children2 = element.props?.children;
-    React9.Children.toArray(children2).forEach((child) => {
-      walk(child, newParents);
-    });
-  };
-  const parents = [];
-  React9.Children.toArray(children).forEach((child) => {
-    walk(child, parents);
-  });
-};
-var checkIfIsElement = (element, name) => {
-  return !!(element && typeof element === "object" && "type" in element && typeof element.type !== "string" && typeof element.type.name === "string" && element.type.name === name);
-};
-var getAllMenuItems = (children) => {
-  const orderedElements = [];
-  walkAllChildren(children, (element) => {
-    if (checkIfIsElement(element, "MenuItem")) {
-      orderedElements.push({
-        type: "item",
-        element
-      });
-    } else if (checkIfIsElement(element, "MenuGroup")) {
-      orderedElements.push({
-        type: "group",
-        element
-      });
-    }
-  });
-  return { orderedElements };
-};
-var useItemsFromChildren = ({
-  children
-}) => {
-  const { allMenuItems, menuItemsMap } = useMemo4(() => {
-    const { orderedElements } = getAllMenuItems(children);
-    const menuItemsMap2 = {};
-    const allMenuItems2 = [];
-    let index = 0;
-    orderedElements.forEach(({ type, element }) => {
-      if (type === "group") {
-        const menuGroup = element;
-        const items = menuGroup.props.items;
-        if (items) {
-          items.forEach((menuItem) => {
-            const item = {
-              id: menuItem.id,
-              index: index++,
-              disabled: menuItem.disabled,
-              menuItemProps: menuItem,
-              menuGroupProps: element.props
-            };
-            allMenuItems2.push(item);
-            menuItemsMap2[`${item.id}`] = item;
-          });
-        } else if (menuGroup.props.children) {
-          let children2 = menuGroup.props.children;
-          if (!Array.isArray(children2)) {
-            children2 = [children2];
-          }
-          children2.forEach((menuItem) => {
-            const item = {
-              id: menuItem.props.id,
-              index: index++,
-              disabled: menuItem.props.disabled,
-              menuItemProps: menuItem.props,
-              menuGroupProps: element.props
-            };
-            allMenuItems2.push(item);
-            menuItemsMap2[`${item.id}`] = item;
-          });
-        }
-      } else {
-        if (menuItemsMap2[`${element.props.id}`]) return;
-        const menuItem = element;
-        const item = {
-          id: menuItem.props.id,
-          index: index++,
-          disabled: menuItem.props.disabled,
-          menuItemProps: menuItem.props
-        };
-        allMenuItems2.push(item);
-        menuItemsMap2[`${item.id}`] = item;
-      }
-    });
-    return { allMenuItems: allMenuItems2, menuItemsMap: menuItemsMap2 };
-  }, [children]);
-  return { allMenuItems, menuItemsMap };
-};
+// src/MenuSearchInput/MenuSearchInput.tsx
+import React11 from "react";
+import { Input } from "@sproutsocial/seeds-react-input";
 
-// src/reducers/useSelectStateReducer.tsx
-import { useSelect } from "downshift";
-var useSelectStateReducer = (state, actionAndChanges) => {
-  const { type, changes } = actionAndChanges;
-  switch (type) {
-    /** If downshift is blurred by tabbing within the menu, stay open */
-    case useSelect.stateChangeTypes.ToggleButtonBlur:
-      return {
-        ...changes,
-        // keep menu open on blur
-        isOpen: true
-      };
-    /** Return standard change payload */
-    default:
-      return changes;
-  }
-};
-var defaultUseSelectProps = {
-  stateReducer: useSelectStateReducer,
-  isItemDisabled: (item) => !!item.disabled
-};
+// src/hooks/useItemFiltering.tsx
+import React10 from "react";
 
-// src/utils/itemToString.ts
+// src/utils/downshiftDefaults.ts
 var itemToString = (item) => {
   return item ? item.id : "";
 };
-
-// src/ActionMenu/ActionMenu.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var handleStateChange = (changes, currentSelectedItem) => {
-  if (!(changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
-    return;
-  }
-  const selectedItem = changes.selectedItem || currentSelectedItem;
-  if (!selectedItem) return;
-  if (selectedItem.disabled) {
-    return;
-  }
-  const isEnterKeyDown = changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter;
-  const selectedItemProps = selectedItem.menuItemProps;
-  if (selectedItemProps?.onClick) {
-    const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
-      key: isEnterKeyDown ? "Enter" : " ",
-      code: isEnterKeyDown ? "Enter" : "Space",
-      bubbles: true,
-      cancelable: true,
-      view: window
-    });
-    selectedItemProps?.onClick?.(
-      syntheticKeyboardEvent
-    );
-  }
-  if (selectedItemProps?.href) {
-    if (selectedItemProps.target) {
-      window.open(selectedItemProps.href, selectedItemProps.target);
-    } else {
-      window.location.href = selectedItemProps?.href;
-    }
-  }
+var itemToKey = (item) => {
+  return item ? item.id : "";
 };
-var ActionMenu = ({
-  children,
-  stateReducer: externalStateReducer,
-  ...useSelectProps
+
+// src/hooks/useItemFiltering.tsx
+var getDefaultGetIsItemVisible = (itemToString2 = itemToString) => (item, inputValue) => itemToString2(item).toLowerCase().includes(inputValue.toLowerCase());
+var defaultGetShouldFilter = ({ inputValue }) => Boolean(inputValue);
+var useItemFiltering = ({
+  allMenuItems,
+  itemToString: itemToString2,
+  getIsItemVisible = getDefaultGetIsItemVisible(itemToString2),
+  getShouldFilter = defaultGetShouldFilter,
+  setHiddenItemsMap: setHiddenItemsMapProp
 }) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
-  const [currentSelectedItem, setCurrentSelectedItem] = React10.useState(null);
-  const { isOpen, ...useSelectReturnProps } = useSelect2({
-    ...defaultUseSelectProps,
-    items: allMenuItems,
-    itemToString,
-    onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
-    stateReducer: (state, actionAndChanges) => {
-      let newState;
-      newState = useSelectStateReducer(state, actionAndChanges);
-      return externalStateReducer ? externalStateReducer(state, {
-        ...actionAndChanges,
-        changes: newState
-      }) : newState;
+  const [hiddenItemsMap, setHiddenItemsMap] = React10.useState({});
+  const updateFilteredItems = React10.useCallback(
+    ({ inputValue }) => {
+      const newHiddenItems = getShouldFilter({ inputValue }) ? allMenuItems.reduce((map, item) => {
+        const isItemVisible = getIsItemVisible(item, inputValue);
+        return isItemVisible ? map : { ...map, [item.id]: true };
+      }, {}) : {};
+      setHiddenItemsMap(newHiddenItems);
+      setHiddenItemsMapProp?.(newHiddenItems);
     },
-    ...useSelectProps
-  });
-  useEffect(() => {
-    setCurrentSelectedItem(useSelectReturnProps.selectedItem);
-  }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ jsx12(
-    MenuRoot,
-    {
-      ...{
-        isListbox: false,
-        items: allMenuItems,
-        itemsMap: menuItemsMap,
-        itemToString,
-        isOpen,
-        ...useSelectProps,
-        ...useSelectReturnProps
-      },
-      children
-    }
+    [allMenuItems, getIsItemVisible, getShouldFilter]
   );
+  return {
+    getIsItemVisible,
+    updateFilteredItems
+  };
 };
 
-// src/SingleSelectMenu/SingleSelectMenu.tsx
-import "react";
-import { useSelect as useSelect3 } from "downshift";
+// src/MenuSearchInput/MenuSearchInput.tsx
 import { jsx as jsx13 } from "react/jsx-runtime";
-var SingleSelectMenu = ({
-  children,
-  stateReducer: externalStateReducer,
-  ...useSelectProps
+var MenuSearchInput = ({
+  getIsItemVisible,
+  ...inputProps
 }) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
-  const { isOpen, ...useSelectReturnProps } = useSelect3({
-    ...defaultUseSelectProps,
-    items: allMenuItems,
-    itemToString,
-    stateReducer: (state, actionAndChanges) => {
-      let newState;
-      newState = useSelectStateReducer(state, actionAndChanges);
-      return externalStateReducer ? externalStateReducer(state, {
-        ...actionAndChanges,
-        changes: newState
-      }) : newState;
+  const {
+    items,
+    itemToString: itemToString2,
+    setHiddenItemsMap,
+    isOpen,
+    getToggleButtonProps
+  } = useMenuContentContext();
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems: items,
+    itemToString: itemToString2,
+    getIsItemVisible,
+    setHiddenItemsMap
+  });
+  React11.useEffect(() => {
+    updateFilteredItems({ inputValue: inputProps.value || "" });
+  }, [isOpen, inputProps.value]);
+  const handleKeyDown = React11.useCallback(
+    (e) => {
+      if (e.key === " ") return;
+      getToggleButtonProps?.()["onKeyDown"](e);
+    },
+    [getToggleButtonProps]
+  );
+  return /* @__PURE__ */ jsx13(
+    Input,
+    {
+      onChange: (e, value) => {
+        updateFilteredItems({ inputValue: value });
+      },
+      onKeyDown: handleKeyDown,
+      autoComplete: false,
+      ...inputProps
+    }
+  );
+};
+
+// src/MenuTokenInput.tsx
+import React12 from "react";
+import styled8 from "styled-components";
+import {
+  TokenInput
+} from "@sproutsocial/seeds-react-token-input";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var StyledTokenInputWrapper = styled8.div`
+  > div {
+    padding: 4px;
+  }
+
+  input {
+    line-height: 21px;
+    margin: 0;
+    padding: 2px 4px;
+  }
+
+  .TokenInput-token button {
+    margin-top: 0;
+    padding: 1px 4px;
+  }
+`;
+var MenuTokenInput = ({
+  inputProps = {},
+  getTokenProps,
+  onKeyDown,
+  MenuContext = MenuToggleContext,
+  ...tokenInputProps
+}) => {
+  const {
+    itemToString: itemToString2,
+    getSelectedItemProps,
+    removeSelectedItem,
+    setActiveIndex,
+    selectedItems = []
+  } = React12.useContext(MenuContext);
+  const removeToken = (tokenId) => {
+    const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
+    tokenToRemove && removeSelectedItem?.(tokenToRemove);
+  };
+  return /* @__PURE__ */ jsx14(StyledTokenInputWrapper, { children: /* @__PURE__ */ jsx14(
+    TokenInput,
+    {
+      onKeyDown: (e, value) => {
+        if (e.key === "ArrowLeft" && !value && selectedItems.length) {
+          setActiveIndex?.(selectedItems.length - 1);
+        }
+        onKeyDown?.(e, value);
+      },
+      inputProps: {
+        autoComplete: "off",
+        type: "search",
+        ...inputProps
+      },
+      tokens: selectedItems.map((item, index) => {
+        const {
+          tokenProps: { ref, onKeyDown: onKeyDown2, ...restTokenProps } = {
+            ref: void 0,
+            onKeyDown: void 0
+          },
+          ...rest
+        } = getTokenProps?.(item.id) || {};
+        return {
+          id: item.id,
+          value: itemToString2?.(item) || item.id,
+          tokenProps: {
+            ...getSelectedItemProps?.({
+              selectedItem: item,
+              index,
+              ref,
+              refKey: "innerRef",
+              onKeyDown: onKeyDown2
+            }),
+            // nullify the onclick provided from downshift
+            // TokenInput deletes the token on click
+            onClick: void 0,
+            tabIndex: 0,
+            ...restTokenProps
+          },
+          ...rest
+        };
+      }),
+      onRemoveToken: removeToken,
+      ...tokenInputProps
+    }
+  ) });
+};
+
+// src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
+import React13 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var MenuSearchTokenInput = ({
+  getIsItemVisible,
+  getTokenProps,
+  onChange,
+  inputProps: { value: inputPropsValue, ...inputProps } = {},
+  value,
+  ...tokenInputProps
+}) => {
+  const {
+    items,
+    itemToString: itemToString2,
+    setHiddenItemsMap,
+    isOpen,
+    getToggleButtonProps
+  } = useMenuContentContext();
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems: items,
+    itemToString: itemToString2,
+    getIsItemVisible,
+    setHiddenItemsMap
+  });
+  const controlledValue = value || inputPropsValue !== void 0 ? `${inputPropsValue}` : void 0;
+  const [internalValue, setInternalValue] = React13.useState(
+    controlledValue || ""
+  );
+  const updateFilteredState = React13.useCallback(
+    // defaults to an empty string if no value is passed
+    (value2 = "") => {
+      setInternalValue(value2);
+      updateFilteredItems({ inputValue: value2 });
+    },
+    [updateFilteredItems]
+  );
+  React13.useEffect(() => {
+    updateFilteredState(controlledValue);
+  }, [controlledValue]);
+  React13.useEffect(() => {
+    updateFilteredState(controlledValue);
+  }, [isOpen]);
+  const handleKeyDown = React13.useCallback(
+    (e) => {
+      if (e.key === " ") return;
+      getToggleButtonProps?.()["onKeyDown"](e);
+    },
+    [getToggleButtonProps]
+  );
+  return /* @__PURE__ */ jsx15(
+    MenuTokenInput,
+    {
+      onChange: (e, value2) => {
+        updateFilteredState(value2);
+        onChange?.(e, value2);
+      },
+      onKeyDown: handleKeyDown,
+      inputProps: {
+        value: internalValue,
+        ...inputProps
+      },
+      MenuContext: MenuContentContext,
+      ...tokenInputProps
+    }
+  );
+};
+
+// src/SubmenuItem/SubmenuItem.tsx
+import React14 from "react";
+import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
+import { Box as Box3 } from "@sproutsocial/seeds-react-box";
+import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+var SubmenuItemTrigger = ({
+  id,
+  children,
+  innerRef,
+  ...rest
+}) => {
+  const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
+  const toggleRef = ref && innerRef ? mergeRefs([ref, innerRef].filter(Boolean)) : ref || innerRef;
+  return /* @__PURE__ */ jsx16(
+    MenuItem,
+    {
+      ...rest,
+      ...getToggleButtonProps?.(
+        {
+          ...getDropdownProps?.({
+            ref: toggleRef,
+            preventKeyAction: true
+          }) || { ref: toggleRef },
+          refKey: "innerRef",
+          role: "menuitem",
+          ...ariaProps
+        },
+        { suppressRefError: true }
+      ),
+      id,
+      children: /* @__PURE__ */ jsxs4(Box3, { display: "flex", justifyContent: "space-between", children: [
+        children,
+        /* @__PURE__ */ jsx16(MenuItemActionRight, { children: /* @__PURE__ */ jsx16(Icon2, { name: "chevron-right-outline" }) })
+      ] })
+    }
+  );
+};
+var doesRefContainEventTarget = (ref, event) => {
+  return ref.current && event.target instanceof Node && ref.current.contains(event.target);
+};
+var SubmenuItem = ({
+  MenuComponent,
+  menuProps: {
+    children: menuChildren,
+    menuItems,
+    MenuItemComponent,
+    popoutProps: { popperProps, ...popoutProps } = {},
+    onStateChange,
+    ...menuProps
+  },
+  // isOpen,
+  // onToggleSubmenu,
+  id,
+  children,
+  ...rest
+}) => {
+  const {
+    highlightedIndex,
+    setHighlightedIndex,
+    itemsMap,
+    isOpen: parentIsOpen
+  } = useMenuContentContext();
+  const [submenuIsFocused, setSubmenuIsFocused] = React14.useState(false);
+  const [submenuIsOpen, setSubmenuIsOpen] = React14.useState(false);
+  const [submenuIsActive, setSubmenuIsActive] = React14.useState(false);
+  const submenuItemRef = React14.useRef(null);
+  const submenuRef = React14.useRef(null);
+  const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
+  const item = itemsMap[id] || {
+    index: 0,
+    id
+  };
+  React14.useEffect(() => {
+    if (highlightedIndex === item.index) {
+      !submenuIsOpen && setSubmenuIsOpen(true);
+    } else if (submenuIsOpen && highlightedIndex !== -1) {
+      setSubmenuIsOpen(false);
+      setSubmenuIsActive(false);
+    }
+  }, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
+  const onSubmenuStateChange = React14.useCallback(
+    (state) => {
+      if (state.isOpen !== void 0) {
+        setSubmenuIsOpen(state.isOpen);
+        if (!state.isOpen) {
+          setSubmenuIsFocused(false);
+          setHighlightedIndex?.(-1);
+        }
+      }
+      onStateChange?.(state);
     },
+    [onStateChange, setSubmenuIsOpen]
+  );
+  const onSubmenuKeydown = (e) => {
+    switch (e.key) {
+      case "ArrowRight":
+      case " ":
+      case "Enter":
+        if (!submenuIsFocused && submenuIsOpen) {
+          e.stopPropagation();
+          setSubmenuIsFocused(true);
+        }
+        break;
+      case "ArrowLeft":
+        if (submenuIsFocused) {
+          e.stopPropagation();
+          setSubmenuIsFocused(false);
+        }
+        break;
+      default:
+        break;
+    }
+  };
+  const onMenuItemClick = () => {
+    const newIsActive = !submenuIsActive;
+    setSubmenuIsActive(newIsActive);
+    setSubmenuIsOpen(newIsActive);
+  };
+  const onBodyClick = (e) => {
+    if (doesRefContainEventTarget(submenuItemRef, e)) {
+      e.stopPropagation();
+      onMenuItemClick();
+    }
+  };
+  React14.useEffect(() => {
+    if (document && document.body) {
+      document.body.addEventListener("click", onBodyClick, {
+        capture: true
+      });
+      document.body.addEventListener("keydown", onSubmenuKeydown, {
+        capture: true
+      });
+      return () => {
+        document.body.removeEventListener("click", onBodyClick, {
+          capture: true
+        });
+        document.body.removeEventListener("keydown", onSubmenuKeydown, {
+          capture: true
+        });
+      };
+    }
+  }, [document, onSubmenuKeydown]);
+  const subMenuContent = /* @__PURE__ */ jsx16(
+    "div",
+    {
+      ref: submenuRef,
+      onKeyDown: (e) => {
+        e.stopPropagation();
+      },
+      tabIndex: -1,
+      children: menuContent
+    }
+  );
+  return /* @__PURE__ */ jsx16(
+    MenuComponent,
+    {
+      ...{
+        ...menuProps,
+        children: subMenuContent,
+        menuToggleElement: /* @__PURE__ */ jsx16(
+          SubmenuItemTrigger,
+          {
+            innerRef: submenuItemRef,
+            id,
+            children,
+            active: submenuIsActive,
+            ...rest
+          }
+        ),
+        isOpen: submenuIsOpen,
+        onStateChange: onSubmenuStateChange,
+        popoutProps: {
+          placement: "right",
+          popperProps: {
+            modifiers: {
+              offset: {
+                offset: "0,18"
+              }
+            },
+            ...popperProps
+          },
+          focusOnContent: submenuIsFocused,
+          ...popoutProps
+        }
+      }
+    }
+  );
+};
+
+// src/ActionMenu/ActionMenu.tsx
+import React16, { useEffect } from "react";
+import {
+  useSelect as useSelect2
+} from "downshift";
+
+// src/hooks/useDownshiftDefaults.tsx
+import React15 from "react";
+
+// src/reducers/useComboboxStateReducer.tsx
+import { useCombobox } from "downshift";
+
+// src/utils/reduceReducers.ts
+var reduceReducers = (...reducers) => (state, action) => reducers.reduce(
+  (changes, nextReducer) => nextReducer ? nextReducer(state, {
+    ...action,
+    changes
+  }) : changes,
+  action.changes
+);
+
+// src/reducers/useComboboxStateReducer.tsx
+var useComboboxStateReducer = (state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
+    case useCombobox.stateChangeTypes.InputBlur:
+      return {
+        ...changes,
+        // keep menu open on blur
+        isOpen: true
+      };
+    /** Return standard change payload */
+    default:
+      return changes;
+  }
+};
+var useComboboxStateReducerForMulti = reduceReducers(
+  useComboboxStateReducer,
+  (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+    switch (type) {
+      case useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case useCombobox.stateChangeTypes.ItemClick:
+      case useCombobox.stateChangeTypes.InputBlur:
+        return {
+          ...changes,
+          ...changes.selectedItem && {
+            inputValue: ""
+          }
+        };
+      default:
+        return changes;
+    }
+  }
+);
+
+// src/reducers/useSelectStateReducer.tsx
+import { useSelect } from "downshift";
+var useSelectStateReducer = (state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
+    case useSelect.stateChangeTypes.ToggleButtonBlur:
+      return {
+        ...changes,
+        // keep menu open on blur
+        isOpen: true
+      };
+    /** Return standard change payload */
+    default:
+      return changes;
+  }
+};
+var useSelectStateReducerForMulti = reduceReducers(
+  useSelectStateReducer,
+  (state, actionAndChanges) => {
+    const { changes, type } = actionAndChanges;
+    switch (type) {
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+      case useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+      case useSelect.stateChangeTypes.ItemClick:
+        return {
+          ...changes,
+          isOpen: true,
+          // keep the menu open after selection.
+          // TODO: Confirm that keeping highlightedIndex the same is the desired UX
+          // highlightedIndex: 0, // with the first option highlighted.
+          highlightedIndex: state.highlightedIndex
+          // keep highlightedIndex the same instead of returning to 0
+        };
+    }
+    return changes;
+  }
+);
+
+// src/utils/getMultiSelectOverrides.ts
+var getMultiSelectOverrides = ({
+  getA11yMultiStatusMessage,
+  onMultiSelectStateChange,
+  multiSelectStateReducer,
+  ...useSelectProps
+}) => Object.entries({
+  ...useSelectProps,
+  getA11yStatusMessage: getA11yMultiStatusMessage,
+  onStateChange: onMultiSelectStateChange,
+  stateReducer: multiSelectStateReducer
+}).reduce(
+  (a, [k, v]) => v ? (a[k] = v, a) : a,
+  {}
+);
+
+// src/hooks/useDownshiftDefaults.tsx
+var defaultUseSelectProps = {
+  stateReducer: useSelectStateReducer
+};
+var defaultUseComboboxProps = {
+  stateReducer: useComboboxStateReducer
+};
+var defaultUseSelectPropsForMulti = {
+  stateReducer: useSelectStateReducerForMulti
+};
+var defaultUseComboboxPropsForMulti = {
+  stateReducer: useComboboxStateReducerForMulti
+};
+var useDownshiftDefaults = ({
+  isCombobox = false,
+  isMulti = false,
+  multiSelectProps = {}
+} = {}) => {
+  const [hiddenItemsMap, setHiddenItemsMap] = React15.useState({});
+  const isItemDisabled = React15.useCallback(
+    (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
+    [hiddenItemsMap]
+  );
+  return {
+    hiddenItemsMap,
+    setHiddenItemsMap,
+    defaultDownshiftProps: {
+      select: !isCombobox ? {
+        // disabling while item.hidden so that hidden items are ignored by downshift
+        isItemDisabled,
+        ...isMulti ? defaultUseSelectPropsForMulti : defaultUseSelectProps
+      } : {},
+      combobox: isCombobox ? {
+        // disabling while item.hidden so that hidden items are ignored by downshift
+        isItemDisabled,
+        ...isMulti ? defaultUseComboboxPropsForMulti : defaultUseComboboxProps
+      } : {},
+      multi: isMulti ? {
+        // handles the prop name mapping for multi select
+        ...getMultiSelectOverrides(multiSelectProps)
+      } : {}
+    }
+  };
+};
+
+// src/ActionMenu/ActionMenu.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
+var handleStateChange = (changes, currentSelectedItem) => {
+  if (!(changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
+    return;
+  }
+  const selectedItem = changes.selectedItem || currentSelectedItem;
+  if (!selectedItem) return;
+  if (selectedItem.disabled) {
+    return;
+  }
+  const isEnterKeyDown = changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter;
+  const selectedItemProps = selectedItem.menuItemProps;
+  if (selectedItemProps?.onClick) {
+    const syntheticKeyboardEvent = new KeyboardEvent("keydown", {
+      key: isEnterKeyDown ? "Enter" : " ",
+      code: isEnterKeyDown ? "Enter" : "Space",
+      bubbles: true,
+      cancelable: true,
+      view: window
+    });
+    selectedItemProps?.onClick?.(
+      syntheticKeyboardEvent
+    );
+  }
+  if (selectedItemProps?.href) {
+    if (selectedItemProps.target) {
+      window.open(selectedItemProps.href, selectedItemProps.target);
+    } else {
+      window.location.href = selectedItemProps?.href;
+    }
+  }
+};
+var ActionMenu = ({
+  children: childrenProp,
+  menuItems,
+  MenuItemComponent,
+  stateReducer: externalStateReducer,
+  ...useSelectProps
+}) => {
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent
+  });
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false
+  });
+  const [currentSelectedItem, setCurrentSelectedItem] = React16.useState(null);
+  const { isOpen, ...useSelectReturnProps } = useSelect2({
+    ...defaultDownshiftProps.select,
+    items: allMenuItems,
+    itemToString,
+    onStateChange: (changes) => handleStateChange(changes, currentSelectedItem),
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      externalStateReducer
+    ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx13(
+  useEffect(() => {
+    setCurrentSelectedItem(useSelectReturnProps.selectedItem);
+  }, [useSelectReturnProps.selectedItem]);
+  return /* @__PURE__ */ jsx17(
+    MenuRoot,
+    {
+      ...{
+        isListbox: false,
+        items: allMenuItems,
+        itemsMap: menuItemsMap,
+        itemToString,
+        isOpen,
+        ...useSelectProps,
+        ...useSelectReturnProps,
+        ...restDefaults
+      },
+      children
+    }
+  );
+};
+
+// src/SingleSelectMenu/SingleSelectMenu.tsx
+import "react";
+import { useSelect as useSelect3 } from "downshift";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var SingleSelectMenu = ({
+  children: childrenProp,
+  stateReducer: externalStateReducer,
+  menuItems,
+  MenuItemComponent,
+  ...useSelectProps
+}) => {
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent
+  });
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false
+  });
+  const { isOpen, ...useSelectReturnProps } = useSelect3({
+    ...defaultDownshiftProps.select,
+    items: allMenuItems,
+    itemToString,
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      externalStateReducer
+    ),
+    ...useSelectProps
+  });
+  return /* @__PURE__ */ jsx18(
     MenuRoot,
     {
       ...{
@@ -2558,7 +3324,8 @@ var SingleSelectMenu = ({
         itemToString,
         isOpen,
         ...useSelectProps,
-        ...useSelectReturnProps
+        ...useSelectReturnProps,
+        ...restDefaults
       },
       children
     }
@@ -2567,47 +3334,35 @@ var SingleSelectMenu = ({
 
 // src/MultiSelectMenu/MultiSelectMenu.tsx
 import "react";
-import {
-  useSelect as useSelect4,
-  useMultipleSelection
-} from "downshift";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var selectReducerForMultiSelect = (state, actionAndChanges) => {
-  const { changes, type } = actionAndChanges;
-  switch (type) {
-    case useSelect4.stateChangeTypes.ToggleButtonKeyDownEnter:
-    case useSelect4.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-    case useSelect4.stateChangeTypes.ItemClick:
-      return {
-        ...changes,
-        isOpen: true,
-        // keep the menu open after selection.
-        // TODO: Confirm that keeping highlightedIndex the same is the desired UX
-        // highlightedIndex: 0, // with the first option highlighted.
-        highlightedIndex: state.highlightedIndex
-        // keep highlightedIndex the same instead of returning to 0
-      };
-  }
-  return changes;
-};
+import { useSelect as useSelect4, useMultipleSelection } from "downshift";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var MultiSelectMenu = ({
-  children,
+  children: childrenProp,
+  menuItems,
+  MenuItemComponent,
+  onSelectedItemChange: externalOnSelectedItemChange,
   stateReducer: externalStateReducer,
   getA11yMultiStatusMessage,
   onMultiSelectStateChange,
   multiSelectStateReducer,
   ...useSelectProps
 }) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
-  const multiSelectOverrides = Object.entries({
-    ...useSelectProps,
-    getA11yStatusMessage: getA11yMultiStatusMessage,
-    onStateChange: onMultiSelectStateChange,
-    stateReducer: multiSelectStateReducer
-  }).reduce(
-    (a, [k, v]) => v ? (a[k] = v, a) : a,
-    {}
-  );
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent
+  });
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false,
+    isMulti: true,
+    // handles the prop name mapping for multi select
+    multiSelectProps: {
+      getA11yMultiStatusMessage,
+      onMultiSelectStateChange,
+      multiSelectStateReducer,
+      ...useSelectProps
+    }
+  });
   const {
     getSelectedItemProps,
     addSelectedItem,
@@ -2615,26 +3370,19 @@ var MultiSelectMenu = ({
     selectedItems,
     getDropdownProps,
     ...useMultipleSelectionReturnProps
-  } = useMultipleSelection(multiSelectOverrides);
+  } = useMultipleSelection(defaultDownshiftProps.multi);
   const { isOpen, ...useSelectReturnProps } = useSelect4({
-    ...defaultUseSelectProps,
+    ...defaultDownshiftProps.select,
     items: allMenuItems,
     itemToString,
     selectedItem: null,
     defaultHighlightedIndex: 0,
-    stateReducer: (state, actionAndChanges) => {
-      let newState;
-      newState = useSelectStateReducer(state, actionAndChanges);
-      newState = selectReducerForMultiSelect(state, {
-        ...actionAndChanges,
-        changes: newState
-      });
-      return externalStateReducer ? externalStateReducer(state, {
-        ...actionAndChanges,
-        changes: newState
-      }) : newState;
-    },
-    onStateChange: ({ type, selectedItem: newSelectedItem }) => {
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      externalStateReducer
+    ),
+    onSelectedItemChange: (changes) => {
+      const { type, selectedItem: newSelectedItem } = changes;
       switch (type) {
         case useSelect4.stateChangeTypes.ToggleButtonKeyDownEnter:
         case useSelect4.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
@@ -2655,10 +3403,11 @@ var MultiSelectMenu = ({
         default:
           break;
       }
+      externalOnSelectedItemChange?.(changes);
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx19(
     MenuRoot,
     {
       ...{
@@ -2677,7 +3426,8 @@ var MultiSelectMenu = ({
         multiSelectStateReducer,
         ...useSelectProps,
         ...useSelectReturnProps,
-        ...useMultipleSelectionReturnProps
+        ...useMultipleSelectionReturnProps,
+        ...restDefaults
       },
       children
     }
@@ -2685,77 +3435,191 @@ var MultiSelectMenu = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import React13 from "react";
-import { useCombobox as useCombobox2 } from "downshift";
-
-// src/reducers/useComboboxStateReducer.tsx
-import { useCombobox } from "downshift";
-var useComboboxStateReducer = (state, actionAndChanges) => {
-  const { type, changes } = actionAndChanges;
-  switch (type) {
-    /** If downshift is blurred by tabbing within the menu, stay open */
-    case useCombobox.stateChangeTypes.InputBlur:
-      return {
-        ...changes,
-        // keep menu open on blur
-        isOpen: true
-      };
-    /** Return standard change payload */
-    default:
-      return changes;
-  }
-};
-var defaultUseComboboxProps = {
-  // disabling while item.hidden so that hidden items are ignored by downshift
-  isItemDisabled: (item) => Boolean(item.disabled || item.hidden)
-};
+import "react";
 
-// src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Autocomplete = ({
-  children,
+// src/Autocomplete/SingleAutocomplete.tsx
+import "react";
+import { useCombobox as useCombobox2 } from "downshift";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var SingleAutocomplete = ({
+  children: childrenProp,
   stateReducer: externalStateReducer,
+  menuItems,
+  MenuItemComponent,
   itemToString: itemToString2 = itemToString,
-  getIsItemVisible = (item, inputValue) => itemToString2(item).toLowerCase().startsWith(inputValue.toLowerCase()),
+  getIsItemVisible,
   ...useComboboxProps
 }) => {
-  const { allMenuItems } = useItemsFromChildren({ children });
-  const [items, setItems] = React13.useState(allMenuItems);
+  const { allMenuItems, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent
+  });
+  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({ isCombobox: true });
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems,
+    itemToString: itemToString2,
+    getIsItemVisible,
+    setHiddenItemsMap
+  });
   const { isOpen, ...useComboboxReturnProps } = useCombobox2({
-    ...defaultUseComboboxProps,
-    items,
+    ...defaultDownshiftProps.combobox,
+    items: allMenuItems,
     itemToString: itemToString2,
-    onInputValueChange({ inputValue }) {
-      setItems(
-        inputValue ? allMenuItems.reduce(
-          (items2, item) => [
-            ...items2,
-            { ...item, hidden: !getIsItemVisible(item, inputValue) }
-          ],
-          []
-        ) : allMenuItems
-      );
+    onInputValueChange: updateFilteredItems,
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.combobox.stateReducer,
+      externalStateReducer
+    ),
+    ...useComboboxProps
+  });
+  return /* @__PURE__ */ jsx20(
+    MenuRoot,
+    {
+      ...{
+        isListbox: true,
+        items: allMenuItems,
+        itemToString: itemToString2,
+        isOpen,
+        setHiddenItemsMap,
+        ...useComboboxProps,
+        ...useComboboxReturnProps,
+        ...restDefaults
+      },
+      popoutProps: {
+        focusOnContent: false
+      },
+      children
+    }
+  );
+};
+
+// 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";
+var MultiAutocomplete = ({
+  children: childrenProp,
+  stateReducer: externalStateReducer,
+  menuItems,
+  MenuItemComponent,
+  itemToString: itemToString2 = itemToString,
+  itemToKey: itemToKey2 = itemToKey,
+  getIsItemVisible = getDefaultGetIsItemVisible(itemToString2),
+  showSelectedItemsInDropdown = false,
+  initialSelectedItems = [],
+  onStateChange,
+  onSelectedItemsChange,
+  getA11yMultiStatusMessage,
+  onMultiSelectStateChange,
+  multiSelectStateReducer,
+  ...useComboboxProps
+}) => {
+  const { allMenuItems, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent
+  });
+  const [selectedItems, setSelectedItems] = React20.useState(initialSelectedItems);
+  const [selectedItemIds, setSelectedItemIds] = React20.useState(getSelectedItemIds(initialSelectedItems));
+  const getIsItemVisibleMulti = React20.useCallback(
+    (item, inputValue) => {
+      return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
     },
-    stateReducer: (state, actionAndChanges) => {
-      let newState;
-      newState = useComboboxStateReducer(state, actionAndChanges);
-      return externalStateReducer ? externalStateReducer(state, {
-        ...actionAndChanges,
-        changes: newState
-      }) : newState;
+    [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
+  );
+  const getShouldFilterMulti = React20.useCallback(
+    (args) => {
+      return !showSelectedItemsInDropdown && Object.keys(selectedItemIds).length > 0 || defaultGetShouldFilter(args);
+    },
+    [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
+  );
+  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: true,
+    isMulti: true,
+    // handles the prop name mapping for multi select
+    multiSelectProps: {
+      getA11yMultiStatusMessage,
+      onMultiSelectStateChange,
+      multiSelectStateReducer,
+      ...useComboboxProps
+    }
+  });
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems,
+    itemToString: itemToString2,
+    getIsItemVisible: getIsItemVisibleMulti,
+    getShouldFilter: getShouldFilterMulti,
+    setHiddenItemsMap
+  });
+  React20.useEffect(() => {
+    updateFilteredItems({ inputValue: "" });
+  }, [selectedItemIds]);
+  const useMultipleSelectionReturnProps = useMultipleSelection2({
+    ...defaultDownshiftProps.multi,
+    itemToKey: itemToKey2,
+    selectedItems,
+    onSelectedItemsChange: ({ selectedItems: selectedItems2, ...changes }) => {
+      setSelectedItems(selectedItems2);
+      setSelectedItemIds(getSelectedItemIds(selectedItems2));
+      onSelectedItemsChange && onSelectedItemsChange({ selectedItems: selectedItems2, ...changes });
+    }
+  });
+  const { isOpen, ...useComboboxReturnProps } = useCombobox3({
+    ...defaultDownshiftProps.combobox,
+    items: allMenuItems,
+    itemToString: itemToString2,
+    itemToKey: itemToKey2,
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.combobox.stateReducer,
+      externalStateReducer
+    ),
+    onStateChange(changes) {
+      const { type, selectedItem: newSelectedItem, inputValue } = changes;
+      switch (type) {
+        // Add the selected item to the selected items list
+        case useCombobox3.stateChangeTypes.InputKeyDownEnter:
+        case useCombobox3.stateChangeTypes.ItemClick:
+          if (newSelectedItem) {
+            const newSelectedItems = [...selectedItems, newSelectedItem];
+            setSelectedItems(newSelectedItems);
+            setSelectedItemIds({
+              ...selectedItemIds,
+              [newSelectedItem.id]: true
+            });
+            onSelectedItemsChange && onSelectedItemsChange({
+              selectedItems: newSelectedItems,
+              type: useMultipleSelection2.stateChangeTypes.FunctionSetSelectedItems
+            });
+          }
+          break;
+        default:
+          break;
+      }
+      if (inputValue !== void 0) updateFilteredItems({ inputValue });
+      onStateChange && onStateChange(changes);
     },
     ...useComboboxProps
   });
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx21(
     MenuRoot,
     {
       ...{
         isListbox: true,
-        items,
+        items: allMenuItems,
         itemToString: itemToString2,
         isOpen,
+        initialSelectedItems,
+        onStateChange,
+        onSelectedItemsChange,
+        getA11yMultiStatusMessage,
+        onMultiSelectStateChange,
+        multiSelectStateReducer,
+        setHiddenItemsMap,
         ...useComboboxProps,
-        ...useComboboxReturnProps
+        ...useComboboxReturnProps,
+        ...useMultipleSelectionReturnProps,
+        ...restDefaults
       },
       popoutProps: {
         focusOnContent: false
@@ -2765,10 +3629,22 @@ var Autocomplete = ({
   );
 };
 
+// src/Autocomplete/Autocomplete.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var Autocomplete = ({
+  multiSelect,
+  ...rest
+}) => {
+  if (multiSelect) {
+    return /* @__PURE__ */ jsx22(MultiAutocomplete, { ...rest });
+  }
+  return /* @__PURE__ */ jsx22(SingleAutocomplete, { ...rest });
+};
+
 // src/Autocomplete/AutocompleteInput.tsx
-import { useContext as useContext4 } from "react";
-import { Input } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import "react";
+import { Input as Input2 } from "@sproutsocial/seeds-react-input";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -2778,60 +3654,314 @@ var AutocompleteInput = ({
   inputProps,
   ...rest
 }) => {
-  const { getInputProps, inputValue } = useContext4(MenuContext);
-  return /* @__PURE__ */ jsx16(
-    Input,
+  const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
+  return /* @__PURE__ */ jsx23(
+    Input2,
     {
       id: "autocomplete_input",
       name: "autocomplete_input",
-      inputProps: {
-        ...getInputProps?.({
-          // refKey: "innerRef",
-          onKeyDown,
-          onChange,
-          onInput,
-          onBlur,
-          onClick,
-          value: inputValue
-        }),
-        ...inputProps
-      },
+      ...getInputComponentProps({
+        onKeyDown,
+        onChange,
+        onInput,
+        onBlur,
+        onClick,
+        value: inputValue,
+        ref,
+        refKey: "innerRef",
+        inputProps,
+        ...ariaProps
+      }),
       autoComplete: false,
       value: inputValue,
       ...rest
     }
   );
 };
+
+// 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";
+import { jsx as jsx25 } from "react/jsx-runtime";
+var NestedMenuHeader = ({
+  backArrowLabel,
+  ...props
+}) => {
+  const { goBack, selectedMenuPath } = useNestedMenuContext();
+  const showBackArrow = selectedMenuPath.length > 1;
+  return /* @__PURE__ */ jsx25(
+    MenuHeader,
+    {
+      leftAction: showBackArrow ? /* @__PURE__ */ jsx25(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx25(Icon3, { name: "arrow-left" }) }) : void 0,
+      ...props
+    }
+  );
+};
+
+// src/reducers/nestedMenuStateReducer.tsx
+import { useCombobox as useCombobox4, useSelect as useSelect5 } from "downshift";
+var nestedMenuStateReducer = (_state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  const hasChildMenu = !!changes?.selectedItem?.menuItemProps?.childMenuId;
+  if (!hasChildMenu) {
+    return changes;
+  }
+  switch (type) {
+    case useSelect5.stateChangeTypes.ToggleButtonBlur:
+    case useSelect5.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case useSelect5.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case useSelect5.stateChangeTypes.ItemClick:
+    case useCombobox4.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        highlightedIndex: 0
+      };
+    default:
+      return changes;
+  }
+};
+
+// src/NestedMenu/NestedMenuContent.tsx
+import { useEffect as useEffect2, useRef } from "react";
+import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities/src/index";
+
+// 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";
+var NestedMenuItem = ({
+  children,
+  childMenuId,
+  onClick: onClickProp,
+  ...rest
+}) => {
+  const { setSelectedMenuId } = useNestedMenuContext();
+  const onClickProps = childMenuId ? {
+    onClick: (e) => {
+      onClickProp?.(e);
+      setSelectedMenuId?.(childMenuId);
+    }
+  } : {};
+  return /* @__PURE__ */ jsx26(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs5(Box4, { display: "flex", justifyContent: "space-between", children: [
+    children,
+    childMenuId && /* @__PURE__ */ jsx26(MenuItemActionRight, { children: /* @__PURE__ */ jsx26(Icon4, { name: "arrow-right-outline" }) })
+  ] }) });
+};
+
+// src/NestedMenu/NestedMenuContent.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+var NestedMenuContent = ({
+  innerRef: innerRefProp = null,
+  onKeyDown: onKeyDownProp,
+  children,
+  menuItems,
+  MenuItemComponent = NestedMenuItem,
+  ...props
+}) => {
+  const { highlightedIndex, items } = useMenuContentContext();
+  const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
+  const internalRef = useRef(null);
+  const innerRef = mergeRefs2(internalRef, innerRefProp);
+  const contentProps = children ? { children } : { menuItems, MenuItemComponent };
+  useEffect2(() => {
+    internalRef?.current?.focus();
+  }, []);
+  const onKeyDown = (e) => {
+    onKeyDownProp?.(e);
+    switch (e.key) {
+      case "ArrowRight":
+      case " ":
+      case "Enter":
+        if (highlightedIndex !== void 0 && highlightedIndex !== -1) {
+          const item = items[highlightedIndex];
+          if (item?.menuItemProps?.childMenuId !== void 0) {
+            setSelectedMenuId?.(item?.menuItemProps?.childMenuId);
+          }
+        }
+        break;
+      case "ArrowLeft":
+        if (selectedMenuPath.length > 1) {
+          goBack?.();
+        }
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx27(
+    MenuContent,
+    {
+      onKeyDown,
+      innerRef,
+      ...contentProps,
+      ...props
+    }
+  );
+};
+
+// src/NestedMenu/NestedMenu.tsx
+import { Fragment as Fragment4, jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
+var NestedMenu = ({
+  initialMenuId,
+  menus,
+  onBackButtonClick,
+  backArrowLabel,
+  menuToggleElement
+}) => {
+  const [selectedMenuPath, setSelectedMenuPath] = useState([initialMenuId]);
+  const selectedMenuId = selectedMenuPath[selectedMenuPath.length - 1];
+  const setSelectedMenuId = (id) => {
+    setSelectedMenuPath((currentPath) => [...currentPath, id]);
+  };
+  const goBack = () => {
+    setSelectedMenuPath((currentPath) => currentPath.slice(0, -1));
+    onBackButtonClick?.(selectedMenuId);
+  };
+  const {
+    MenuComponent,
+    menuProps,
+    MenuHeaderComponent = NestedMenuHeader,
+    menuHeaderProps = {}
+  } = menus[selectedMenuId] || {};
+  const {
+    children,
+    menuItems,
+    MenuItemComponent,
+    stateReducer: externalStateReducer,
+    onStateChange: externalOnStateChange,
+    ...props
+  } = menuProps || {};
+  const stateReducer = reduceReducers(
+    nestedMenuStateReducer,
+    externalStateReducer
+  );
+  const onStateChange = (changes) => {
+    externalOnStateChange?.(changes);
+    if (changes.isOpen === false) {
+      setTimeout(() => {
+        setSelectedMenuPath([initialMenuId]);
+      }, 100);
+    }
+  };
+  const nestedMenuProps = {
+    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,
+        {
+          menuItems,
+          MenuItemComponent: MenuItemComponent ?? NestedMenuItem
+        }
+      )
+    ] }),
+    ...props
+  };
+  return /* @__PURE__ */ jsx28(
+    NestedMenuProvider,
+    {
+      selectedMenuPath,
+      setSelectedMenuPath,
+      setSelectedMenuId,
+      goBack,
+      children: MenuComponent && /* @__PURE__ */ jsx28(MenuComponent, { ...nestedMenuProps })
+    }
+  );
+};
 export {
   ActionMenu,
   Autocomplete,
   AutocompleteInput,
   INPUT_TYPES,
   MenuContent,
-  MenuContext,
+  MenuContentContext,
+  MenuContentProvider,
   MenuFooter,
   MenuGroup,
   MenuHeader,
   MenuItem,
   MenuItemAction,
+  MenuItemActionLeft,
+  MenuItemActionRight,
   MenuItemContainer,
   MenuItemRow,
   MenuItemText,
   MenuLabel,
-  MenuProvider,
   MenuRoot,
+  MenuSearchInput,
+  MenuSearchTokenInput,
   MenuToggleButton,
+  MenuToggleContext,
+  MenuToggleProvider,
+  MenuTokenInput,
   MultiSelectMenu,
+  NestedMenu,
+  NestedMenuContent,
+  NestedMenuContext,
+  NestedMenuHeader,
+  NestedMenuItem,
+  NestedMenuProvider,
   SingleSelectMenu,
   StyledMenuGroup,
   StyledMenuGroupUl,
   StyledMenuItem,
   StyledTitle,
-  defaultUseSelectProps,
-  useItemsFromChildren,
+  SubmenuItem,
+  checkIfItemSelected,
+  defaultMenuContext,
+  getChildrenFromMenuItems,
+  getSelectedItemIds,
+  mapMenuItems,
   useMenu,
-  useMenuContext,
-  useSelectStateReducer
+  useMenuChildren,
+  useMenuContentContext,
+  useMenuToggleContext,
+  useNestedMenuContext,
+  useSelectStateReducer,
+  useSelectStateReducerForMulti
 };
 /*! Bundled license information: