@sproutsocial/seeds-react-menu 1.1.1 → 1.2.1

package/dist/index.d.mts

@@ -122,7 +122,7 @@ interface TypeMenuProviderProps {
     menuContext: TypeMenuContext;
 }
 interface TypeMenuToggleContext extends TypeMenuContext {
-    ref?: (arg0: React__default.ElementRef<any> | HTMLElement) => void;
+    ref?: React__default.RefObject<any> | ((arg0: React__default.ElementRef<any> | HTMLElement) => void);
     toggle?: () => void;
     show?: () => void;
     hide?: () => void;
@@ -450,6 +450,8 @@ interface TypeAutocompleteTokenInputProps extends TypeDownshiftMergedInputProps<
 }
 declare const AutocompleteTokenInput: ({ onKeyDown, onChange, onInput, onBlur, onClick, inputProps, getTokenProps, ...rest }: TypeAutocompleteTokenInputProps) => react_jsx_runtime.JSX.Element;
 
+declare const AutocompleteSelect: (props: TypeAutocompleteInputProps) => react_jsx_runtime.JSX.Element;
+
 interface TypeNestedMenuMapProps<P, I extends TypeMenuItemProps = TypeNestedMenuItemProps> {
     MenuComponent: React.ComponentType<P>;
     menuProps: Omit<P, "menuToggleElement"> & TypeChildrenOrItems<I>;
@@ -551,4 +553,4 @@ declare const useMenuChildren: <I extends TypeMenuItemProps = TypeMenuItemProps>
 declare const useSelectStateReducer: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
 declare const useSelectStateReducerForMulti: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
 
-export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuRootNoPopout, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };
+export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteSelect, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuRootNoPopout, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };

package/dist/index.d.ts

@@ -122,7 +122,7 @@ interface TypeMenuProviderProps {
     menuContext: TypeMenuContext;
 }
 interface TypeMenuToggleContext extends TypeMenuContext {
-    ref?: (arg0: React__default.ElementRef<any> | HTMLElement) => void;
+    ref?: React__default.RefObject<any> | ((arg0: React__default.ElementRef<any> | HTMLElement) => void);
     toggle?: () => void;
     show?: () => void;
     hide?: () => void;
@@ -450,6 +450,8 @@ interface TypeAutocompleteTokenInputProps extends TypeDownshiftMergedInputProps<
 }
 declare const AutocompleteTokenInput: ({ onKeyDown, onChange, onInput, onBlur, onClick, inputProps, getTokenProps, ...rest }: TypeAutocompleteTokenInputProps) => react_jsx_runtime.JSX.Element;
 
+declare const AutocompleteSelect: (props: TypeAutocompleteInputProps) => react_jsx_runtime.JSX.Element;
+
 interface TypeNestedMenuMapProps<P, I extends TypeMenuItemProps = TypeNestedMenuItemProps> {
     MenuComponent: React.ComponentType<P>;
     menuProps: Omit<P, "menuToggleElement"> & TypeChildrenOrItems<I>;
@@ -551,4 +553,4 @@ declare const useMenuChildren: <I extends TypeMenuItemProps = TypeMenuItemProps>
 declare const useSelectStateReducer: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
 declare const useSelectStateReducerForMulti: Required<UseSelectProps<TypeInternalItemProps>>["stateReducer"];
 
-export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuRootNoPopout, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };
+export { ActionMenu, Autocomplete, AutocompleteInput, AutocompleteSelect, AutocompleteTokenInput, CustomPopoutContent, INPUT_TYPES, type InputType, ListboxToggleButton, MenuContent, MenuContentContext, MenuContentProvider, MenuFooter, MenuGroup, MenuHeader, MenuItem, MenuItemAction, MenuItemActionLeft, MenuItemActionRight, MenuItemContainer, MenuItemRow, MenuItemText, MenuLabel, MenuPopout, MenuRoot, MenuRootNoPopout, MenuSearchInput, MenuSearchTokenInput, MenuToggleButton, MenuToggleContext, MenuToggleProvider, MenuTokenInput, MultiSelectMenu, NestedMenu, NestedMenuContent, NestedMenuContext, NestedMenuHeader, NestedMenuItem, NestedMenuProvider, SingleSelectMenu, StyledListboxToggleButton, StyledMenuGroup, StyledMenuGroupUl, StyledMenuItem, StyledTitle, SubmenuItem, type TypeActionMenuBaseProps, type TypeActionMenuProps, type TypeAutocompleteInputProps, type TypeAutocompleteProps, type TypeAutocompleteTokenInputProps, type TypeChildrenOrItems, type TypeDownshiftComboboxProps, type TypeDownshiftComboboxReturnValue, type TypeDownshiftMergedInputProps, type TypeDownshiftMultiSelectProps, type TypeDownshiftMultiSelectReturnValue, type TypeDownshiftSelectProps, type TypeDownshiftSelectReturnValue, type TypeHigherOrderComponentProps, type TypeInternalItemProps, type TypeItemElement, type TypeListboxToggleButtonProps, type TypeMapMenuItemsProps, type TypeMenuChildren, type TypeMenuContentElement, type TypeMenuContentProps, type TypeMenuContext, type TypeMenuContextBaseProps, type TypeMenuContextProps, type TypeMenuGroupBaseProps, type TypeMenuGroupElement, type TypeMenuGroupProps, type TypeMenuGroupStyledProps, type TypeMenuHeaderProps, type TypeMenuItemProps, type TypeMenuItemStyledProps, type TypeMenuPopoutProps, type TypeMenuProviderProps, type TypeMenuRootOwnProps, type TypeMenuRootProps, type TypeMenuSearchInputProps, type TypeMenuSearchTokenInputProps, type TypeMenuToggleButtonProps, type TypeMenuToggleContext, type TypeMenuToggleProviderProps, type TypeMenuTokenInputProps, type TypeMultiAutocompleteProps, type TypeMultiSelectMenuBaseProps, type TypeMultiSelectMenuProps, type TypeNestedMenuContext, type TypeNestedMenuHeaderProps, type TypeNestedMenuItemProps, type TypeNestedMenuMapProps, type TypeNestedMenuProps, type TypeNestedMenuProviderProps, type TypeNotEmptyChildren, type TypeSingleAutocompleteProps, type TypeSingleSelectMenuBaseProps, type TypeSingleSelectMenuProps, type TypeStyledChevronProps, type TypeSubmenuItemProps, type TypeSubmenuValidMenuComponentProps, checkIfItemSelected, defaultMenuContext, getChildrenFromMenuItems, getSelectedItemIds, mapMenuItems, useMenu, useMenuChildren, useMenuContentContext, useMenuToggleContext, useNestedMenuContext, useSelectStateReducer, useSelectStateReducerForMulti };

package/dist/index.js

@@ -106,6 +106,7 @@ __export(index_exports, {
   ActionMenu: () => ActionMenu,
   Autocomplete: () => Autocomplete,
   AutocompleteInput: () => AutocompleteInput,
+  AutocompleteSelect: () => AutocompleteSelect,
   AutocompleteTokenInput: () => AutocompleteTokenInput,
   CustomPopoutContent: () => CustomPopoutContent,
   INPUT_TYPES: () => INPUT_TYPES,
@@ -2182,7 +2183,11 @@ var import_styled_components5 = __toESM(require("styled-components"));
 var StyledMenuContent = import_styled_components5.default.ul`
   margin: 0;
   padding: 0;
-  outline: none;
+
+  &:focus {
+    outline: none;
+    box-shadow: none;
+  }
 `;
 
 // src/hooks/useMenuChildren.tsx
@@ -2598,9 +2603,10 @@ var MenuGroup = ({
 MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
-var import_react10 = require("react");
+var import_react10 = __toESM(require("react"));
 var import_styled_components10 = __toESM(require("styled-components"));
 var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
+var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
 
 // ../../seeds-design-tokens/seeds-motion/dist/seeds-motion-unitless.esm.js
 var MOTION_DURATION_FAST = 0.15;
@@ -2677,7 +2683,7 @@ var MenuRoot = ({
   children,
   menuToggleElement,
   popoutProps: { placement = "bottom", focusLockProps, ...popoutProps } = {},
-  width: width2 = "300px",
+  width: width2,
   ...contextProps
 }) => {
   const {
@@ -2686,14 +2692,22 @@ var MenuRoot = ({
     closeMenu,
     inputValue,
     hiddenItemsCount = 0,
-    items
+    items,
+    getMenuProps
   } = contextProps;
-  const setIsOpen = (0, import_react10.useCallback)(
-    (newIsOpen) => {
-      newIsOpen ? openMenu?.() : closeMenu?.();
-    },
-    [openMenu, closeMenu]
-  );
+  const toggleElementRef = import_react10.default.useRef(null);
+  const [finalWidth, setFinalWidth] = import_react10.default.useState();
+  const min_width = 200;
+  (0, import_react10.useLayoutEffect)(() => {
+    if (width2) {
+      setFinalWidth(width2);
+    } else if (toggleElementRef.current?.offsetWidth) {
+      const toggleWidth = toggleElementRef.current.offsetWidth;
+      setFinalWidth(Math.max(toggleWidth, min_width));
+    } else {
+      setFinalWidth(min_width);
+    }
+  }, [width2, toggleElementRef.current?.offsetWidth]);
   (0, import_react10.useEffect)(() => {
     if (!inputValue) return;
     if (items && hiddenItemsCount >= items.length && isOpen) {
@@ -2701,6 +2715,7 @@ var MenuRoot = ({
     }
   }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
+  getMenuProps?.({}, { suppressRefError: true });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     MenuPopout,
     {
@@ -2709,8 +2724,22 @@ var MenuRoot = ({
       openMenu,
       closeMenu,
       content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children }),
+      width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuToggleProvider, { menuContext: { ...menuContext, ...toggleProps }, children: menuToggleElement })
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        MenuToggleProvider,
+        {
+          menuContext: {
+            ...menuContext,
+            ...toggleProps,
+            ref: (0, import_seeds_react_utilities.mergeRefs)(
+              toggleProps.ref,
+              toggleElementRef
+            )
+          },
+          children: menuToggleElement
+        }
+      )
     }
   );
 };
@@ -3012,7 +3041,7 @@ var MenuSearchTokenInput = ({
 var import_react17 = __toESM(require("react"));
 var import_seeds_react_icon2 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box3 = require("@sproutsocial/seeds-react-box");
-var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
+var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var SubmenuItemTrigger = ({
   id,
@@ -3021,7 +3050,7 @@ var SubmenuItemTrigger = ({
   ...rest
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
+  const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities2.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuItem,
     {
@@ -3923,9 +3952,30 @@ var AutocompleteTokenInput = ({
   );
 };
 
+// src/Autocomplete/AutocompleteSelect.tsx
+var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
+var import_react27 = require("react");
+var import_styled_components13 = __toESM(require("styled-components"));
+var import_seeds_react_input3 = require("@sproutsocial/seeds-react-input");
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var StyledAutocompleteInput = (0, import_styled_components13.default)(AutocompleteInput)`
+  ${import_seeds_react_input3.Accessory} {
+    pointer-events: none;
+  }
+`;
+var AutocompleteSelect = (props) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    StyledAutocompleteInput,
+    {
+      elemAfter: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_seeds_react_icon4.default, { name: "chevron-down" }),
+      ...props
+    }
+  );
+};
+
 // src/NestedMenu/NestedMenu.tsx
-var import_react32 = require("react");
-var import_react33 = require("motion/react");
+var import_react33 = require("react");
+var import_react34 = require("motion/react");
 var import_downshift9 = require("downshift");
 
 // src/reducers/nestedMenuStateReducer.tsx
@@ -3953,8 +4003,8 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 };
 
 // src/NestedMenu/NestedMenuContext.tsx
-var import_react27 = require("react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
   setSelectedMenuId: () => {
@@ -3971,17 +4021,17 @@ var defaultNestedMenuContext = {
   },
   animationSpeed: MOTION_DURATION_FAST
 };
-var NestedMenuContext = (0, import_react27.createContext)(
+var NestedMenuContext = (0, import_react28.createContext)(
   defaultNestedMenuContext
 );
 var NestedMenuProvider = ({
   children,
   ...nestedMenuProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
-  const nestedMenuContextValue = (0, import_react27.useContext)(NestedMenuContext);
+  const nestedMenuContextValue = (0, import_react28.useContext)(NestedMenuContext);
   if (nestedMenuContextValue === null) {
     throw new Error(
       "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
@@ -3991,13 +4041,13 @@ var useNestedMenuContext = () => {
 };
 
 // src/NestedMenu/NestedMenuContent.tsx
-var import_react28 = require("react");
-var import_seeds_react_utilities2 = require("@sproutsocial/seeds-react-utilities");
+var import_react29 = require("react");
+var import_seeds_react_utilities3 = require("@sproutsocial/seeds-react-utilities");
 
 // src/NestedMenu/NestedMenuItem.tsx
-var import_seeds_react_icon4 = require("@sproutsocial/seeds-react-icon");
+var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box4 = require("@sproutsocial/seeds-react-box");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -4005,21 +4055,23 @@ var NestedMenuItem = ({
   ...rest
 }) => {
   const { setSelectedMenuId } = useNestedMenuContext();
-  const onClickProps = childMenuId ? {
+  const onClickProps = childMenuId || onClickProp ? {
     onClick: (e) => {
       onClickProp?.(e);
-      setSelectedMenuId?.(childMenuId);
+      if (childMenuId) {
+        setSelectedMenuId?.(childMenuId);
+      }
     }
   } : {};
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_icon4.Icon, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_seeds_react_icon5.Icon, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -4030,10 +4082,10 @@ var NestedMenuContent = ({
 }) => {
   const { highlightedIndex, items } = useMenuContentContext();
   const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
-  const internalRef = (0, import_react28.useRef)(null);
-  const innerRef = (0, import_seeds_react_utilities2.mergeRefs)(internalRef, innerRefProp);
+  const internalRef = (0, import_react29.useRef)(null);
+  const innerRef = (0, import_seeds_react_utilities3.mergeRefs)(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
-  (0, import_react28.useEffect)(() => {
+  (0, import_react29.useEffect)(() => {
     internalRef?.current?.focus();
   }, []);
   const onKeyDown = (e) => {
@@ -4056,7 +4108,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     MenuContent,
     {
       onKeyDown,
@@ -4070,20 +4122,20 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 
 // src/NestedMenu/NestedMenuHeader.tsx
 var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
-var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
-var import_react29 = require("motion/react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
+var import_react30 = require("motion/react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var NestedMenuHeader = ({
   backArrowLabel,
   ...props
 }) => {
   const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
   const showBackArrow = selectedMenuPath.length > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react29.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-        import_react29.motion.div,
+      leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react30.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react30.motion.div,
         {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
@@ -4091,7 +4143,7 @@ var NestedMenuHeader = ({
             opacity: 0,
             transition: { duration: animationSpeed }
           },
-          children: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_seeds_react_icon5.Icon, { name: "arrow-left" }) }) : void 0
+          children: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_seeds_react_icon6.Icon, { name: "arrow-left" }) }) : void 0
         },
         `${selectedMenuPath}-header--button`
       ) }),
@@ -4101,8 +4153,8 @@ var NestedMenuHeader = ({
 };
 
 // src/NestedMenu/NestedMenuRoot.tsx
-var import_react30 = __toESM(require("react"));
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react31 = __toESM(require("react"));
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var NestedMenuRoot = ({
   children,
   menuToggleElement,
@@ -4110,21 +4162,21 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  import_react30.default.useEffect(() => {
+  import_react31.default.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
     menuContext.selectedItem,
     menuContext.selectedItems?.length
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(MenuContentProvider, { menuContext, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MenuContentProvider, { menuContext, children });
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
-var import_react31 = require("motion/react");
-var import_styled_components13 = __toESM(require("styled-components"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
-var StyledDiv = (0, import_styled_components13.default)(import_react31.motion.div)`
+var import_react32 = require("motion/react");
+var import_styled_components14 = __toESM(require("styled-components"));
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var StyledDiv = (0, import_styled_components14.default)(import_react32.motion.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
@@ -4134,7 +4186,7 @@ var NestedMenuPopout = ({
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     MenuPopout,
     {
       ...popoutProps,
@@ -4143,8 +4195,8 @@ var NestedMenuPopout = ({
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
       width: width2,
-      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
-      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
         MenuToggleProvider,
         {
           menuContext: {
@@ -4160,7 +4212,7 @@ var NestedMenuPopout = ({
 };
 
 // src/NestedMenu/NestedMenu.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var NestedMenu = ({
   initialMenuId,
   menus,
@@ -4176,9 +4228,9 @@ var NestedMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const uniqueId = (0, import_react32.useId)();
+  const uniqueId = (0, import_react33.useId)();
   const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId}`;
-  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react32.useState)(false);
+  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react33.useState)(false);
   const useSelectReturnProps = (0, import_downshift9.useSelect)({
     ...defaultDownshiftProps.select,
     id: nestedMenuId,
@@ -4194,7 +4246,7 @@ var NestedMenu = ({
     ...useSelectReturnProps,
     ...restDefaults
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (!useSelectReturnProps.isOpen) {
       setHasLoadedOnce(false);
     } else {
@@ -4211,15 +4263,16 @@ var NestedMenu = ({
     id: nestedMenuId,
     onIsOpenChange: onNestedIsOpenChange
   };
-  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react32.useState)([initialMenuId]);
-  const [activeMenuContext, setActiveMenuContext] = (0, import_react32.useState)(defaultMenuContext);
-  const [currentMenuId, setCurrentMenuId] = (0, import_react32.useState)(initialMenuId);
-  const [isAdding, setIsAdding] = (0, import_react32.useState)(false);
+  rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
+  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react33.useState)([initialMenuId]);
+  const [activeMenuContext, setActiveMenuContext] = (0, import_react33.useState)(defaultMenuContext);
+  const [currentMenuId, setCurrentMenuId] = (0, import_react33.useState)(initialMenuId);
+  const [isAdding, setIsAdding] = (0, import_react33.useState)(false);
   const setSelectedMenuId = (id) => {
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
@@ -4313,8 +4366,8 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-        import_react33.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react34.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        import_react34.motion.div,
         {
           variants: contentVariants,
           initial: "arrive",
@@ -4322,7 +4375,7 @@ var NestedMenu = ({
           exit: "leave",
           custom: { isAdding, hasLoadedOnce },
           children: [
-            MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               MenuHeaderComponent,
               {
                 backArrowLabel,
@@ -4330,7 +4383,7 @@ var NestedMenu = ({
               }
             ),
             children && children,
-            menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               NestedMenuContent,
               {
                 menuItems,
@@ -4344,7 +4397,7 @@ var NestedMenu = ({
     ),
     ...restMenuProps
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     NestedMenuProvider,
     {
       ...{
@@ -4358,19 +4411,19 @@ var NestedMenu = ({
         setActiveMenuContext,
         animationSpeed
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-            import_react33.motion.div,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react34.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            import_react34.motion.div,
             {
               variants: menuVariants,
               initial: "arrive",
               animate: "enter",
               exit: "leave",
               custom: { isAdding, hasLoadedOnce },
-              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MenuComponent, { ...nestedMenuProps })
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuComponent, { ...nestedMenuProps })
             },
             `${currentMenuId}-content`
           ) }),
@@ -4387,6 +4440,7 @@ var NestedMenu = ({
   ActionMenu,
   Autocomplete,
   AutocompleteInput,
+  AutocompleteSelect,
   AutocompleteTokenInput,
   CustomPopoutContent,
   INPUT_TYPES,