@sproutsocial/seeds-react-menu 0.4.1 → 0.6.0

package/dist/index.js

@@ -108,50 +108,85 @@ __export(index_exports, {
   AutocompleteInput: () => AutocompleteInput,
   INPUT_TYPES: () => INPUT_TYPES,
   MenuContent: () => MenuContent,
-  MenuContext: () => MenuContext,
+  MenuContentContext: () => MenuContentContext,
+  MenuContentProvider: () => MenuContentProvider,
   MenuFooter: () => MenuFooter,
   MenuGroup: () => MenuGroup,
   MenuHeader: () => MenuHeader,
   MenuItem: () => MenuItem,
   MenuItemAction: () => MenuItemAction,
+  MenuItemActionLeft: () => MenuItemActionLeft,
+  MenuItemActionRight: () => MenuItemActionRight,
   MenuItemContainer: () => MenuItemContainer,
   MenuItemRow: () => MenuItemRow,
   MenuItemText: () => MenuItemText,
   MenuLabel: () => MenuLabel,
-  MenuProvider: () => MenuProvider,
   MenuRoot: () => MenuRoot,
+  MenuSearchInput: () => MenuSearchInput,
+  MenuSearchTokenInput: () => MenuSearchTokenInput,
   MenuToggleButton: () => MenuToggleButton,
+  MenuToggleContext: () => MenuToggleContext,
+  MenuToggleProvider: () => MenuToggleProvider,
+  MenuTokenInput: () => MenuTokenInput,
   MultiSelectMenu: () => MultiSelectMenu,
+  NestedMenu: () => NestedMenu,
+  NestedMenuContent: () => NestedMenuContent,
+  NestedMenuContext: () => NestedMenuContext,
+  NestedMenuHeader: () => NestedMenuHeader,
+  NestedMenuItem: () => NestedMenuItem,
+  NestedMenuProvider: () => NestedMenuProvider,
   SingleSelectMenu: () => SingleSelectMenu,
   StyledMenuGroup: () => StyledMenuGroup,
   StyledMenuGroupUl: () => StyledMenuGroupUl,
   StyledMenuItem: () => StyledMenuItem,
   StyledTitle: () => StyledTitle,
-  defaultUseSelectProps: () => defaultUseSelectProps,
-  useItemsFromChildren: () => useItemsFromChildren,
+  SubmenuItem: () => SubmenuItem,
+  checkIfItemSelected: () => checkIfItemSelected,
+  defaultMenuContext: () => defaultMenuContext,
+  getChildrenFromMenuItems: () => getChildrenFromMenuItems,
+  getSelectedItemIds: () => getSelectedItemIds,
+  mapMenuItems: () => mapMenuItems,
   useMenu: () => useMenu,
-  useMenuContext: () => useMenuContext,
-  useSelectStateReducer: () => useSelectStateReducer
+  useMenuChildren: () => useMenuChildren,
+  useMenuContentContext: () => useMenuContentContext,
+  useMenuToggleContext: () => useMenuToggleContext,
+  useNestedMenuContext: () => useNestedMenuContext,
+  useSelectStateReducer: () => useSelectStateReducer,
+  useSelectStateReducerForMulti: () => useSelectStateReducerForMulti
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/MenuItem/MenuItem.tsx
-var import_react3 = require("react");
-
 // src/MenuContext.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 var import_jsx_runtime = require("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 || import_react.default.createRef();
   const menuProps = (0, import_react.useMemo)(() => ({ ...rest }), [rest]);
   const itemsMap = (0, import_react.useMemo)(
     () => itemsMapFromProps || items.reduce((map, item) => {
@@ -162,27 +197,90 @@ var useMenu = ({
     }, {}),
     [items, itemsMapFromProps]
   );
+  const selectedItemIds = (0, import_react.useMemo)(
+    () => selectedItemIdsFromProps || getSelectedItemIds(selectedItems),
+    [selectedItems, selectedItemIdsFromProps]
+  );
+  const isItemSelected = import_react.default.useCallback(
+    (id) => checkIfItemSelected({ id, selectedItem, selectedItemIds }),
+    [selectedItem, selectedItemIds]
+  );
+  const getInputComponentProps = import_react.default.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 = (0, import_react.createContext)(defaultMenuContext);
-var MenuProvider = ({
+var MenuToggleContext = (0, import_react.createContext)(defaultMenuContext);
+var MenuToggleProvider = ({
+  children,
+  menuContext
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuToggleContext.Provider, { value: { ...menuContext }, children });
+};
+var useMenuToggleContext = () => {
+  const menuContextValue = (0, import_react.useContext)(MenuToggleContext);
+  if (menuContextValue === null) {
+    throw new Error(
+      "useMenuToggleContext must be used within a <MenuToggleContext.Provider />"
+    );
+  }
+  return menuContextValue;
+};
+var MenuContentContext = (0, import_react.createContext)(defaultMenuContext);
+var MenuContentProvider = ({
   children,
-  menuProps
+  menuContext
 }) => {
-  const filterContext = useMenu(menuProps);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContext.Provider, { value: { ...filterContext }, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(MenuContentContext.Provider, { value: { ...menuContext }, children });
 };
-var useMenuContext = () => {
-  const menuContextValue = (0, import_react.useContext)(MenuContext);
+var useMenuContentContext = () => {
+  const menuContextValue = (0, import_react.useContext)(MenuContentContext);
   if (menuContextValue === null) {
     throw new Error(
-      "useMenuContext must be used within a <MenuContext.Provider />"
+      "useMenuContentContext must be used within a <MenuContentContext.Provider />"
     );
   }
   return menuContextValue;
@@ -1725,6 +1823,10 @@ var highlightedStyles = import_styled_components2.css`
   color: ${({ theme: theme2 }) => theme2.colors.text.body};
   text-decoration: none;
 `;
+var activeStyles = import_styled_components2.css`
+  background-color: ${({ theme: theme2 }) => theme2.colors.listItem.background.active};
+  color: ${({ theme: theme2 }) => theme2.colors.text.inverse};
+`;
 var MenuItemContainer = import_styled_components2.default.li`
   box-sizing: border-box;
   list-style-type: none;
@@ -1739,7 +1841,7 @@ var MenuItemContainer = import_styled_components2.default.li`
     margin-bottom: ${({ theme: theme2 }) => theme2.space[300]};
   }
 `;
-var StyledMenuItem = import_styled_components2.default.div`
+var StyledMenuItem = import_styled_components2.default.button`
   display: block;
   box-sizing: border-box;
   width: 100%;
@@ -1778,10 +1880,12 @@ var StyledMenuItem = import_styled_components2.default.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"] {
@@ -1802,12 +1906,17 @@ var MenuItemRow = import_styled_components2.default.div`
   pointer-events: none;
 `;
 var MenuItemAction = import_styled_components2.default.div`
-  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 `;
+var MenuItemActionLeft = (0, import_styled_components2.default)(MenuItemAction)`
+  margin-right: ${({ theme: theme2 }) => theme2.space[300]};
+`;
+var MenuItemActionRight = (0, import_styled_components2.default)(MenuItemAction)`
+  margin-left: ${({ theme: theme2 }) => theme2.space[300]};
+`;
 var MenuItemText = import_styled_components2.default.div`
   word-break: break-word;
   flex-grow: 1;
@@ -1838,6 +1947,7 @@ var SelectionIndicator = ({
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_seeds_react_checkbox2.Checkbox,
         {
+          tabIndex: -1,
           onChange: () => {
           },
           checked: selected,
@@ -1849,6 +1959,7 @@ var SelectionIndicator = ({
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_seeds_react_switch.Switch,
         {
+          tabIndex: -1,
           onClick: inputStub,
           checked: !!selected,
           "aria-labelledby": labeledBy,
@@ -1859,6 +1970,7 @@ var SelectionIndicator = ({
       return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         import_seeds_react_radio.Radio,
         {
+          tabIndex: -1,
           checked: selected,
           id: `MenuItem-${inputType}-${id}`,
           name: `MenuItem-${inputType}`,
@@ -1882,9 +1994,9 @@ var useOptionProps = ({
   inputLabelId,
   ...props
 }) => {
-  const { selectedItem, selectedItems, isListbox } = (0, import_react2.useContext)(MenuContext);
+  const { selectedItem, selectedItems, isListbox, isItemSelected } = useMenuContentContext();
   const selected = (0, import_react2.useMemo)(
-    () => selectedItem?.id === id || !!selectedItems?.find((item) => item?.id === id),
+    () => isItemSelected(id),
     [selectedItem, selectedItems]
   );
   const label = inputLabelId || `menu-item-child-${id}`;
@@ -1892,7 +2004,7 @@ var useOptionProps = ({
     active: selected,
     ["aria-selected"]: selected,
     children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(MenuItemRow, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuItemAction, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(MenuItemActionLeft, { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
         SelectionIndicator,
         {
           id,
@@ -1915,12 +2027,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,
@@ -1928,23 +2047,26 @@ var MenuItem = ({
   });
   const item = itemsMap[id] || { index: 0, id };
   const highlighted = highlightedIndex === item?.index;
-  return item.hidden ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemContainer, { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return hiddenItemsMap[item.id] ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_jsx_runtime3.Fragment, {}) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(MenuItemContainer, { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     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
     }
@@ -1960,7 +2082,7 @@ var INPUT_TYPES = {
 };
 
 // src/MenuHeader/MenuHeader.tsx
-var import_react4 = require("react");
+var import_react3 = require("react");
 
 // src/MenuHeader/styles.tsx
 var import_styled_components4 = __toESM(require("styled-components"));
@@ -1987,14 +2109,13 @@ var MenuTitleText = import_styled_components4.default.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 = import_styled_components4.default.div`
   grid-column: 1 / -1;
@@ -2002,19 +2123,24 @@ var MenuChildrenContainer = import_styled_components4.default.div`
 `;
 var MenuHeaderFeatures = import_styled_components4.default.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;
   }
 `;
 
@@ -2031,7 +2157,7 @@ var MenuHeader = ({
     /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(MenuHeaderFeatures, { $leftAction: !!leftAction, children: [
       leftAction && leftAction,
       title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuTitleText, { $leftAction: !!leftAction, children: title }),
-      rightAction && rightAction
+      rightAction && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "right-action", children: rightAction })
     ] }),
     children && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MenuChildrenContainer, { children })
   ] }) });
@@ -2039,31 +2165,222 @@ var MenuHeader = ({
 
 // src/MenuContent/styles.tsx
 var import_styled_components5 = __toESM(require("styled-components"));
-var import_react5 = require("motion/react");
-var StyledMenuContent = (0, import_styled_components5.default)(import_react5.motion.ul)`
+var import_react4 = require("motion/react");
+var StyledMenuContent = (0, import_styled_components5.default)(import_react4.motion.ul)`
   margin: 0;
   padding: 0;
 `;
 
-// src/MenuContent/MenuContent.tsx
+// src/hooks/useMenuChildren.tsx
+var import_react5 = __toESM(require("react"));
 var import_jsx_runtime5 = require("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;
+    import_react5.default.Children.toArray(children2).forEach((child) => {
+      walk(child, newParents);
+    });
+  };
+  const parents = [];
+  import_react5.default.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__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, { children: menuItems.map((menuItemProps) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuItemComponent, { ...menuItemProps }, menuItemProps.id)) });
+};
+var getChildrenFromMenuItems = ({
+  menuItems,
+  MenuItemComponent
+}) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(MenuContent, { menuItems, MenuItemComponent });
+var useMenuChildren = ({
+  children: childrenProp,
+  menuItems,
+  MenuItemComponent
+}) => {
+  const { allMenuItems, menuItemsMap, children } = (0, import_react5.useMemo)(() => {
+    let children2 = /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_jsx_runtime5.Fragment, {});
+    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
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var MenuContent = ({
   id = "menu_content",
-  children,
+  children: childrenProp,
+  menuItems,
+  MenuItemComponent,
+  onKeyDown,
+  innerRef = null,
   ...rest
 }) => {
-  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContentContext();
+  const toggleButtonProps = getToggleButtonProps?.();
+  const children = childrenProp || !menuItems || !menuItems.length ? childrenProp : mapMenuItems({ menuItems, MenuItemComponent });
+  if (!children) {
+    return null;
+  }
+  const handleKeyDown = (0, import_react6.useCallback)(
+    (e) => {
+      toggleButtonProps?.["onKeyDown"]?.(e);
+      onKeyDown?.(e);
+    },
+    [onKeyDown, toggleButtonProps?.["onKeyDown"]]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     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 }
@@ -2075,7 +2392,7 @@ var MenuContent = ({
 };
 
 // src/MenuFooter/MenuFooter.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 
 // src/MenuFooter/styles.tsx
 var import_styled_components6 = __toESM(require("styled-components"));
@@ -2086,24 +2403,24 @@ var StyledMenuFooterBox = (0, import_styled_components6.default)(import_seeds_re
 `;
 
 // src/MenuFooter/MenuFooter.tsx
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MenuFooter = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledMenuFooterBox, { ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledMenuFooterBox, { ...rest, children });
 };
 
 // src/MenuGroup/MenuGroup.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 
 // src/MenuGroup/styles.tsx
 var import_styled_components9 = __toESM(require("styled-components"));
 
 // ../seeds-react-text/dist/esm/index.js
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_styled_components7 = __toESM(require("styled-components"));
 var import_styled_components8 = __toESM(require("styled-components"));
 var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_react9 = require("react");
 var Container = import_styled_components8.default.span`
   margin: 0;
   padding-left: 0;
@@ -2163,7 +2480,7 @@ var SmallBodyCopy = (0, import_styled_components7.default)(styles_default)`
 `;
 var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
   const qaText = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     styles_default,
     {
       typeScale: fontSize2,
@@ -2178,7 +2495,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__ */ (0, import_jsx_runtime7.jsx)(Component, { "data-qa-text": qaText, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Component, { "data-qa-text": qaText, ...props, children });
   };
 };
 var HeadlineWithLogic = withTextLogic(Headline);
@@ -2223,6 +2540,7 @@ var StyledMenuGroup = import_styled_components9.default.li`
   ${space}
 `;
 var StyledTitle = (0, import_styled_components9.default)(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]};
 `;
@@ -2232,7 +2550,7 @@ var StyledMenuGroupUl = import_styled_components9.default.ul`
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
@@ -2240,16 +2558,16 @@ 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__ */ (0, import_jsx_runtime8.jsx)(MenuItemComponent, { ...item }, item.id));
+  const children = childrenProp || !menuItems || !menuItems.length ? childrenProp : mapMenuItems({ menuItems, MenuItemComponent });
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
     StyledMenuGroup,
     {
       role: "group",
@@ -2259,18 +2577,18 @@ var MenuGroup = ({
       color: color2,
       ...rest,
       children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledMenuGroupUl, { children })
+        title && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(StyledMenuGroupUl, { children })
       ]
     }
   );
 };
 
 // src/MenuRoot/MenuRoot.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var CustomPopoutContent = (0, import_styled_components10.default)(import_seeds_react_popout.Popout.Content)`
   padding: 0;
   margin-left: 0;
@@ -2279,24 +2597,26 @@ var CustomPopoutContent = (0, import_styled_components10.default)(import_seeds_r
 var MenuRoot = ({
   children,
   menuToggleElement,
-  popoutProps: { focusLockProps, ...popoutProps } = {},
+  popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
   width: width2 = "300px",
   ...contextProps
 }) => {
   const { isOpen, openMenu, closeMenu } = contextProps;
-  const setIsOpen = (0, import_react10.useCallback)(
+  const setIsOpen = (0, import_react11.useCallback)(
     (newIsOpen) => {
       newIsOpen ? openMenu?.() : closeMenu?.();
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(MenuProvider, { menuProps: contextProps, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  const menuContext = useMenu(contextProps);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     import_seeds_react_popout.Popout,
     {
       menuPopout: true,
+      placement,
       isOpen: !!isOpen,
       setIsOpen,
-      content: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(CustomPopoutContent, { width: width2, children }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CustomPopoutContent, { width: width2, children }) }),
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
@@ -2305,37 +2625,38 @@ var MenuRoot = ({
       },
       disableWrapperAria: true,
       ...popoutProps,
-      children: menuToggleElement
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuToggleProvider, { menuContext: { ...menuContext, ...toggleProps }, children: menuToggleElement })
     }
-  ) });
+  );
 };
 
 // src/MenuLabel.tsx
-var import_react11 = require("react");
+var import_react12 = require("react");
 var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var MenuLabel = ({ children, ...rest }) => {
-  const { getLabelProps } = useMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_seeds_react_label.Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
+  const { getLabelProps } = useMenuToggleContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_seeds_react_label.Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
 };
 
-// src/MenuToggleButton.tsx
-var import_react12 = require("react");
+// src/MenuToggleButton/MenuToggleButton.tsx
+var import_react13 = require("react");
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MenuToggleButton = ({
   children,
   ...rest
 }) => {
-  const { getToggleButtonProps, isListbox, getDropdownProps } = (0, import_react12.useContext)(MenuContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_seeds_react_button.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,
@@ -2344,192 +2665,654 @@ var MenuToggleButton = ({
   );
 };
 
-// src/ActionMenu/ActionMenu.tsx
+// src/MenuSearchInput/MenuSearchInput.tsx
+var import_react15 = __toESM(require("react"));
+var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
+
+// src/hooks/useItemFiltering.tsx
 var import_react14 = __toESM(require("react"));
-var import_downshift2 = require("downshift");
 
-// src/hooks/useItemsFromChildren.tsx
-var import_react13 = __toESM(require("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;
-    import_react13.default.Children.toArray(children2).forEach((child) => {
-      walk(child, newParents);
-    });
-  };
-  const parents = [];
-  import_react13.default.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 };
+// src/utils/downshiftDefaults.ts
+var itemToString = (item) => {
+  return item ? item.id : "";
 };
-var useItemsFromChildren = ({
-  children
-}) => {
-  const { allMenuItems, menuItemsMap } = (0, import_react13.useMemo)(() => {
-    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 };
+var itemToKey = (item) => {
+  return item ? item.id : "";
 };
 
-// src/reducers/useSelectStateReducer.tsx
-var import_downshift = require("downshift");
-var useSelectStateReducer = (state, actionAndChanges) => {
-  const { type, changes } = actionAndChanges;
-  switch (type) {
-    /** If downshift is blurred by tabbing within the menu, stay open */
-    case import_downshift.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
+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 [hiddenItemsMap, setHiddenItemsMap] = import_react14.default.useState({});
+  const updateFilteredItems = import_react14.default.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);
+    },
+    [allMenuItems, getIsItemVisible, getShouldFilter]
+  );
+  return {
+    getIsItemVisible,
+    updateFilteredItems
+  };
 };
 
-// src/utils/itemToString.ts
-var itemToString = (item) => {
-  return item ? item.id : "";
+// src/MenuSearchInput/MenuSearchInput.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var MenuSearchInput = ({
+  getIsItemVisible,
+  ...inputProps
+}) => {
+  const {
+    items,
+    itemToString: itemToString2,
+    setHiddenItemsMap,
+    isOpen,
+    getToggleButtonProps
+  } = useMenuContentContext();
+  const { updateFilteredItems } = useItemFiltering({
+    allMenuItems: items,
+    itemToString: itemToString2,
+    getIsItemVisible,
+    setHiddenItemsMap
+  });
+  import_react15.default.useEffect(() => {
+    updateFilteredItems({ inputValue: inputProps.value || "" });
+  }, [isOpen, inputProps.value]);
+  const handleKeyDown = import_react15.default.useCallback(
+    (e) => {
+      if (e.key === " ") return;
+      getToggleButtonProps?.()["onKeyDown"](e);
+    },
+    [getToggleButtonProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_seeds_react_input.Input,
+    {
+      onChange: (e, value) => {
+        updateFilteredItems({ inputValue: value });
+      },
+      onKeyDown: handleKeyDown,
+      autoComplete: false,
+      ...inputProps
+    }
+  );
 };
 
-// src/ActionMenu/ActionMenu.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
-var handleStateChange = (changes, currentSelectedItem) => {
-  if (!(changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
-    return;
-  }
-  const selectedItem = changes.selectedItem || currentSelectedItem;
-  if (!selectedItem) return;
-  if (selectedItem.disabled) {
-    return;
+// src/MenuTokenInput.tsx
+var import_react16 = __toESM(require("react"));
+var import_styled_components11 = __toESM(require("styled-components"));
+var import_seeds_react_token_input = require("@sproutsocial/seeds-react-token-input");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var StyledTokenInputWrapper = import_styled_components11.default.div`
+  > div {
+    padding: 4px;
   }
-  const isEnterKeyDown = changes.type === import_downshift2.useSelect.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
-    );
+
+  input {
+    line-height: 21px;
+    margin: 0;
+    padding: 2px 4px;
   }
-  if (selectedItemProps?.href) {
-    if (selectedItemProps.target) {
-      window.open(selectedItemProps.href, selectedItemProps.target);
-    } else {
-      window.location.href = selectedItemProps?.href;
-    }
+
+  .TokenInput-token button {
+    margin-top: 0;
+    padding: 1px 4px;
   }
-};
-var ActionMenu = ({
-  children,
-  stateReducer: externalStateReducer,
-  ...useSelectProps
+`;
+var MenuTokenInput = ({
+  inputProps = {},
+  getTokenProps,
+  onKeyDown,
+  MenuContext = MenuToggleContext,
+  ...tokenInputProps
+}) => {
+  const {
+    itemToString: itemToString2,
+    getSelectedItemProps,
+    removeSelectedItem,
+    setActiveIndex,
+    selectedItems = []
+  } = import_react16.default.useContext(MenuContext);
+  const removeToken = (tokenId) => {
+    const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
+    tokenToRemove && removeSelectedItem?.(tokenToRemove);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(StyledTokenInputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    import_seeds_react_token_input.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
+var import_react17 = __toESM(require("react"));
+var import_jsx_runtime15 = require("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] = import_react17.default.useState(
+    controlledValue || ""
+  );
+  const updateFilteredState = import_react17.default.useCallback(
+    // defaults to an empty string if no value is passed
+    (value2 = "") => {
+      setInternalValue(value2);
+      updateFilteredItems({ inputValue: value2 });
+    },
+    [updateFilteredItems]
+  );
+  import_react17.default.useEffect(() => {
+    updateFilteredState(controlledValue);
+  }, [controlledValue]);
+  import_react17.default.useEffect(() => {
+    updateFilteredState(controlledValue);
+  }, [isOpen]);
+  const handleKeyDown = import_react17.default.useCallback(
+    (e) => {
+      if (e.key === " ") return;
+      getToggleButtonProps?.()["onKeyDown"](e);
+    },
+    [getToggleButtonProps]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    MenuTokenInput,
+    {
+      onChange: (e, value2) => {
+        updateFilteredState(value2);
+        onChange?.(e, value2);
+      },
+      onKeyDown: handleKeyDown,
+      inputProps: {
+        value: internalValue,
+        ...inputProps
+      },
+      MenuContext: MenuContentContext,
+      ...tokenInputProps
+    }
+  );
+};
+
+// src/SubmenuItem/SubmenuItem.tsx
+var import_react18 = __toESM(require("react"));
+var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
+var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var SubmenuItemTrigger = ({
+  id,
+  children,
+  innerRef,
+  ...rest
+}) => {
+  const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
+  const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    MenuItem,
+    {
+      ...rest,
+      ...getToggleButtonProps?.(
+        {
+          ...getDropdownProps?.({
+            ref: toggleRef,
+            preventKeyAction: true
+          }) || { ref: toggleRef },
+          refKey: "innerRef",
+          role: "menuitem",
+          ...ariaProps
+        },
+        { suppressRefError: true }
+      ),
+      id,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_seeds_react_box3.Box, { display: "flex", justifyContent: "space-between", children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_seeds_react_icon2.Icon, { 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] = import_react18.default.useState(false);
+  const [submenuIsOpen, setSubmenuIsOpen] = import_react18.default.useState(false);
+  const [submenuIsActive, setSubmenuIsActive] = import_react18.default.useState(false);
+  const submenuItemRef = import_react18.default.useRef(null);
+  const submenuRef = import_react18.default.useRef(null);
+  const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
+  const item = itemsMap[id] || {
+    index: 0,
+    id
+  };
+  import_react18.default.useEffect(() => {
+    if (highlightedIndex === item.index) {
+      !submenuIsOpen && setSubmenuIsOpen(true);
+    } else if (submenuIsOpen && highlightedIndex !== -1) {
+      setSubmenuIsOpen(false);
+      setSubmenuIsActive(false);
+    }
+  }, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
+  const onSubmenuStateChange = import_react18.default.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();
+    }
+  };
+  import_react18.default.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__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      ref: submenuRef,
+      onKeyDown: (e) => {
+        e.stopPropagation();
+      },
+      tabIndex: -1,
+      children: menuContent
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    MenuComponent,
+    {
+      ...{
+        ...menuProps,
+        children: subMenuContent,
+        menuToggleElement: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          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
+var import_react20 = __toESM(require("react"));
+var import_downshift3 = require("downshift");
+
+// src/hooks/useDownshiftDefaults.tsx
+var import_react19 = __toESM(require("react"));
+
+// src/reducers/useComboboxStateReducer.tsx
+var import_downshift = require("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 import_downshift.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 import_downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
+      case import_downshift.useCombobox.stateChangeTypes.ItemClick:
+      case import_downshift.useCombobox.stateChangeTypes.InputBlur:
+        return {
+          ...changes,
+          ...changes.selectedItem && {
+            inputValue: ""
+          }
+        };
+      default:
+        return changes;
+    }
+  }
+);
+
+// src/reducers/useSelectStateReducer.tsx
+var import_downshift2 = require("downshift");
+var useSelectStateReducer = (state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  switch (type) {
+    /** If downshift is blurred by tabbing within the menu, stay open */
+    case import_downshift2.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 import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+      case import_downshift2.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+      case import_downshift2.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] = import_react19.default.useState({});
+  const isItemDisabled = import_react19.default.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
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var handleStateChange = (changes, currentSelectedItem) => {
+  if (!(changes.type === import_downshift3.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift3.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
+    return;
+  }
+  const selectedItem = changes.selectedItem || currentSelectedItem;
+  if (!selectedItem) return;
+  if (selectedItem.disabled) {
+    return;
+  }
+  const isEnterKeyDown = changes.type === import_downshift3.useSelect.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 } = useItemsFromChildren({ children });
-  const [currentSelectedItem, setCurrentSelectedItem] = import_react14.default.useState(null);
-  const { isOpen, ...useSelectReturnProps } = (0, import_downshift2.useSelect)({
-    ...defaultUseSelectProps,
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent
+  });
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false
+  });
+  const [currentSelectedItem, setCurrentSelectedItem] = import_react20.default.useState(null);
+  const { isOpen, ...useSelectReturnProps } = (0, import_downshift3.useSelect)({
+    ...defaultDownshiftProps.select,
     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;
-    },
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      externalStateReducer
+    ),
     ...useSelectProps
   });
-  (0, import_react14.useEffect)(() => {
+  (0, import_react20.useEffect)(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     MenuRoot,
     {
       ...{
@@ -2539,7 +3322,8 @@ var ActionMenu = ({
         itemToString,
         isOpen,
         ...useSelectProps,
-        ...useSelectReturnProps
+        ...useSelectReturnProps,
+        ...restDefaults
       },
       children
     }
@@ -2547,30 +3331,35 @@ var ActionMenu = ({
 };
 
 // src/SingleSelectMenu/SingleSelectMenu.tsx
-var import_react15 = require("react");
-var import_downshift3 = require("downshift");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react21 = require("react");
+var import_downshift4 = require("downshift");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 var SingleSelectMenu = ({
-  children,
+  children: childrenProp,
   stateReducer: externalStateReducer,
+  menuItems,
+  MenuItemComponent,
   ...useSelectProps
 }) => {
-  const { allMenuItems, menuItemsMap } = useItemsFromChildren({ children });
-  const { isOpen, ...useSelectReturnProps } = (0, import_downshift3.useSelect)({
-    ...defaultUseSelectProps,
+  const { allMenuItems, menuItemsMap, children } = useMenuChildren({
+    children: childrenProp,
+    menuItems,
+    MenuItemComponent
+  });
+  const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+    isCombobox: false
+  });
+  const { isOpen, ...useSelectReturnProps } = (0, import_downshift4.useSelect)({
+    ...defaultDownshiftProps.select,
     items: allMenuItems,
     itemToString,
-    stateReducer: (state, actionAndChanges) => {
-      let newState;
-      newState = useSelectStateReducer(state, actionAndChanges);
-      return externalStateReducer ? externalStateReducer(state, {
-        ...actionAndChanges,
-        changes: newState
-      }) : newState;
-    },
+    stateReducer: reduceReducers(
+      defaultDownshiftProps.select.stateReducer,
+      externalStateReducer
+    ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     MenuRoot,
     {
       ...{
@@ -2580,7 +3369,8 @@ var SingleSelectMenu = ({
         itemToString,
         isOpen,
         ...useSelectProps,
-        ...useSelectReturnProps
+        ...useSelectReturnProps,
+        ...restDefaults
       },
       children
     }
@@ -2588,45 +3378,36 @@ var SingleSelectMenu = ({
 };
 
 // src/MultiSelectMenu/MultiSelectMenu.tsx
-var import_react16 = require("react");
-var import_downshift4 = require("downshift");
-var import_jsx_runtime14 = require("react/jsx-runtime");
-var selectReducerForMultiSelect = (state, actionAndChanges) => {
-  const { changes, type } = actionAndChanges;
-  switch (type) {
-    case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
-    case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-    case import_downshift4.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;
-};
+var import_react22 = require("react");
+var import_downshift5 = require("downshift");
+var import_jsx_runtime19 = require("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,
@@ -2634,30 +3415,23 @@ var MultiSelectMenu = ({
     selectedItems,
     getDropdownProps,
     ...useMultipleSelectionReturnProps
-  } = (0, import_downshift4.useMultipleSelection)(multiSelectOverrides);
-  const { isOpen, ...useSelectReturnProps } = (0, import_downshift4.useSelect)({
-    ...defaultUseSelectProps,
+  } = (0, import_downshift5.useMultipleSelection)(defaultDownshiftProps.multi);
+  const { isOpen, ...useSelectReturnProps } = (0, import_downshift5.useSelect)({
+    ...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 import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
-        case import_downshift4.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
-        case import_downshift4.useSelect.stateChangeTypes.ItemClick:
+        case import_downshift5.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+        case import_downshift5.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+        case import_downshift5.useSelect.stateChangeTypes.ItemClick:
           if (!newSelectedItem) break;
           if (selectedItems?.find((item) => item?.id === newSelectedItem.id)) {
             removeSelectedItem(newSelectedItem);
@@ -2674,10 +3448,11 @@ var MultiSelectMenu = ({
         default:
           break;
       }
+      externalOnSelectedItemChange?.(changes);
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     MenuRoot,
     {
       ...{
@@ -2696,7 +3471,8 @@ var MultiSelectMenu = ({
         multiSelectStateReducer,
         ...useSelectProps,
         ...useSelectReturnProps,
-        ...useMultipleSelectionReturnProps
+        ...useMultipleSelectionReturnProps,
+        ...restDefaults
       },
       children
     }
@@ -2704,77 +3480,191 @@ var MultiSelectMenu = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react17 = __toESM(require("react"));
-var import_downshift6 = require("downshift");
-
-// src/reducers/useComboboxStateReducer.tsx
-var import_downshift5 = require("downshift");
-var useComboboxStateReducer = (state, actionAndChanges) => {
-  const { type, changes } = actionAndChanges;
-  switch (type) {
-    /** If downshift is blurred by tabbing within the menu, stay open */
-    case import_downshift5.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)
-};
+var import_react25 = require("react");
 
-// src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Autocomplete = ({
-  children,
+// src/Autocomplete/SingleAutocomplete.tsx
+var import_react23 = require("react");
+var import_downshift6 = require("downshift");
+var import_jsx_runtime20 = require("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] = import_react17.default.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 } = (0, import_downshift6.useCombobox)({
-    ...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__ */ (0, import_jsx_runtime20.jsx)(
+    MenuRoot,
+    {
+      ...{
+        isListbox: true,
+        items: allMenuItems,
+        itemToString: itemToString2,
+        isOpen,
+        setHiddenItemsMap,
+        ...useComboboxProps,
+        ...useComboboxReturnProps,
+        ...restDefaults
+      },
+      popoutProps: {
+        focusOnContent: false
+      },
+      children
+    }
+  );
+};
+
+// src/Autocomplete/MultiAutocomplete.tsx
+var import_react24 = __toESM(require("react"));
+var import_downshift7 = require("downshift");
+var import_jsx_runtime21 = require("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] = import_react24.default.useState(initialSelectedItems);
+  const [selectedItemIds, setSelectedItemIds] = import_react24.default.useState(getSelectedItemIds(initialSelectedItems));
+  const getIsItemVisibleMulti = import_react24.default.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 = import_react24.default.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
+  });
+  import_react24.default.useEffect(() => {
+    updateFilteredItems({ inputValue: "" });
+  }, [selectedItemIds]);
+  const useMultipleSelectionReturnProps = (0, import_downshift7.useMultipleSelection)({
+    ...defaultDownshiftProps.multi,
+    itemToKey: itemToKey2,
+    selectedItems,
+    onSelectedItemsChange: ({ selectedItems: selectedItems2, ...changes }) => {
+      setSelectedItems(selectedItems2);
+      setSelectedItemIds(getSelectedItemIds(selectedItems2));
+      onSelectedItemsChange && onSelectedItemsChange({ selectedItems: selectedItems2, ...changes });
+    }
+  });
+  const { isOpen, ...useComboboxReturnProps } = (0, import_downshift7.useCombobox)({
+    ...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 import_downshift7.useCombobox.stateChangeTypes.InputKeyDownEnter:
+        case import_downshift7.useCombobox.stateChangeTypes.ItemClick:
+          if (newSelectedItem) {
+            const newSelectedItems = [...selectedItems, newSelectedItem];
+            setSelectedItems(newSelectedItems);
+            setSelectedItemIds({
+              ...selectedItemIds,
+              [newSelectedItem.id]: true
+            });
+            onSelectedItemsChange && onSelectedItemsChange({
+              selectedItems: newSelectedItems,
+              type: import_downshift7.useMultipleSelection.stateChangeTypes.FunctionSetSelectedItems
+            });
+          }
+          break;
+        default:
+          break;
+      }
+      if (inputValue !== void 0) updateFilteredItems({ inputValue });
+      onStateChange && onStateChange(changes);
     },
     ...useComboboxProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     MenuRoot,
     {
       ...{
         isListbox: true,
-        items,
+        items: allMenuItems,
         itemToString: itemToString2,
         isOpen,
+        initialSelectedItems,
+        onStateChange,
+        onSelectedItemsChange,
+        getA11yMultiStatusMessage,
+        onMultiSelectStateChange,
+        multiSelectStateReducer,
+        setHiddenItemsMap,
         ...useComboboxProps,
-        ...useComboboxReturnProps
+        ...useComboboxReturnProps,
+        ...useMultipleSelectionReturnProps,
+        ...restDefaults
       },
       popoutProps: {
         focusOnContent: false
@@ -2784,10 +3674,22 @@ var Autocomplete = ({
   );
 };
 
+// src/Autocomplete/Autocomplete.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var Autocomplete = ({
+  multiSelect,
+  ...rest
+}) => {
+  if (multiSelect) {
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MultiAutocomplete, { ...rest });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SingleAutocomplete, { ...rest });
+};
+
 // src/Autocomplete/AutocompleteInput.tsx
-var import_react18 = require("react");
-var import_seeds_react_input = require("@sproutsocial/seeds-react-input");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react26 = require("react");
+var import_seeds_react_input2 = require("@sproutsocial/seeds-react-input");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -2797,30 +3699,263 @@ var AutocompleteInput = ({
   inputProps,
   ...rest
 }) => {
-  const { getInputProps, inputValue } = (0, import_react18.useContext)(MenuContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-    import_seeds_react_input.Input,
+  const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_seeds_react_input2.Input,
     {
       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
+var import_react29 = require("react");
+
+// src/NestedMenu/NestedMenuContext.tsx
+var import_react27 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var defaultNestedMenuContext = {
+  selectedMenuPath: [],
+  setSelectedMenuId: () => {
+  },
+  setSelectedMenuPath: () => {
+  },
+  goBack: () => {
+  }
+};
+var NestedMenuContext = (0, import_react27.createContext)(
+  defaultNestedMenuContext
+);
+var NestedMenuProvider = ({
+  children,
+  ...nestedMenuProps
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+};
+var useNestedMenuContext = () => {
+  const nestedMenuContextValue = (0, import_react27.useContext)(NestedMenuContext);
+  if (nestedMenuContextValue === null) {
+    throw new Error(
+      "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
+    );
+  }
+  return nestedMenuContextValue;
+};
+
+// src/NestedMenu/NestedMenuHeader.tsx
+var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
+var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
+var import_jsx_runtime25 = require("react/jsx-runtime");
+var NestedMenuHeader = ({
+  backArrowLabel,
+  ...props
+}) => {
+  const { goBack, selectedMenuPath } = useNestedMenuContext();
+  const showBackArrow = selectedMenuPath.length > 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    MenuHeader,
+    {
+      leftAction: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_seeds_react_icon3.Icon, { name: "arrow-left" }) }) : void 0,
+      ...props
+    }
+  );
+};
+
+// src/reducers/nestedMenuStateReducer.tsx
+var import_downshift8 = require("downshift");
+var nestedMenuStateReducer = (_state, actionAndChanges) => {
+  const { type, changes } = actionAndChanges;
+  const hasChildMenu = !!changes?.selectedItem?.menuItemProps?.childMenuId;
+  if (!hasChildMenu) {
+    return changes;
+  }
+  switch (type) {
+    case import_downshift8.useSelect.stateChangeTypes.ToggleButtonBlur:
+    case import_downshift8.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter:
+    case import_downshift8.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton:
+    case import_downshift8.useSelect.stateChangeTypes.ItemClick:
+    case import_downshift8.useCombobox.stateChangeTypes.ItemClick:
+      return {
+        ...changes,
+        isOpen: true,
+        highlightedIndex: 0
+      };
+    default:
+      return changes;
+  }
+};
+
+// src/NestedMenu/NestedMenuContent.tsx
+var import_react28 = require("react");
+var import_src = require("@sproutsocial/seeds-react-utilities/src/index");
+
+// src/NestedMenu/NestedMenuItem.tsx
+var import_seeds_react_icon4 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_box4 = require("@sproutsocial/seeds-react-box");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var NestedMenuItem = ({
+  children,
+  childMenuId,
+  onClick: onClickProp,
+  ...rest
+}) => {
+  const { setSelectedMenuId } = useNestedMenuContext();
+  const onClickProps = childMenuId ? {
+    onClick: (e) => {
+      onClickProp?.(e);
+      setSelectedMenuId?.(childMenuId);
+    }
+  } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
+    children,
+    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_seeds_react_icon4.Icon, { name: "arrow-right-outline" }) })
+  ] }) });
+};
+
+// src/NestedMenu/NestedMenuContent.tsx
+var import_jsx_runtime27 = require("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 = (0, import_react28.useRef)(null);
+  const innerRef = (0, import_src.mergeRefs)(internalRef, innerRefProp);
+  const contentProps = children ? { children } : { menuItems, MenuItemComponent };
+  (0, import_react28.useEffect)(() => {
+    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__ */ (0, import_jsx_runtime27.jsx)(
+    MenuContent,
+    {
+      onKeyDown,
+      innerRef,
+      ...contentProps,
+      ...props
+    }
+  );
+};
+
+// src/NestedMenu/NestedMenu.tsx
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var NestedMenu = ({
+  initialMenuId,
+  menus,
+  onBackButtonClick,
+  backArrowLabel,
+  menuToggleElement
+}) => {
+  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react29.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__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
+      MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        MenuHeaderComponent,
+        {
+          backArrowLabel,
+          ...menuHeaderProps
+        }
+      ),
+      children && children,
+      menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        NestedMenuContent,
+        {
+          menuItems,
+          MenuItemComponent: MenuItemComponent ?? NestedMenuItem
+        }
+      )
+    ] }),
+    ...props
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    NestedMenuProvider,
+    {
+      selectedMenuPath,
+      setSelectedMenuPath,
+      setSelectedMenuId,
+      goBack,
+      children: MenuComponent && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuComponent, { ...nestedMenuProps })
+    }
+  );
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionMenu,
@@ -2828,30 +3963,51 @@ var AutocompleteInput = ({
   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: