@sproutsocial/seeds-react-menu 1.2.2 → 1.3.0

package/dist/esm/index.js

@@ -101,7 +101,8 @@ var defaultMenuContext = {
   items: [],
   itemsMap: {},
   isItemSelected: () => false,
-  getInputComponentProps: () => ({})
+  getInputComponentProps: () => ({}),
+  hasVisibleItems: false
 };
 var getSelectedItemIds = (selectedItems) => selectedItems?.reduce(
   (selected, item) => ({ ...selected, [item.id]: true }),
@@ -122,6 +123,8 @@ var useMenu = ({
   selectedItems,
   getInputProps,
   contentRef: contentRefFromProps,
+  autoCloseOnEmpty,
+  hiddenItemsCount,
   ...rest
 } = {}) => {
   const contentRef = contentRefFromProps || React.createRef();
@@ -176,6 +179,9 @@ var useMenu = ({
     },
     [getInputProps]
   );
+  const hasVisibleItems = useMemo(() => {
+    return (hiddenItemsCount ?? 0) < items.length;
+  }, [items, hiddenItemsCount]);
   return {
     isOpen,
     isListbox,
@@ -188,6 +194,8 @@ var useMenu = ({
     getInputProps,
     getInputComponentProps,
     contentRef,
+    hasVisibleItems,
+    autoCloseOnEmpty,
     ...menuProps
   };
 };
@@ -2301,7 +2309,23 @@ var useMenuChildren = ({
 
 // src/MenuContent/MenuContent.tsx
 import { useCallback } from "react";
+
+// src/MenuContent/DefaultMenuEmptyState.tsx
+import styled4 from "styled-components";
 import { jsx as jsx6 } from "react/jsx-runtime";
+var StyledEmptyState = styled4.div`
+  padding: ${({ theme: theme2 }) => theme2.space[350]};
+  text-align: center;
+  font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
+`;
+var DefaultMenuEmptyState = ({
+  children
+}) => {
+  return /* @__PURE__ */ jsx6(StyledEmptyState, { children: children || "No results found." });
+};
+
+// src/MenuContent/MenuContent.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
 var MenuContent = ({
   id = "menu_content",
   children: childrenProp,
@@ -2309,11 +2333,21 @@ var MenuContent = ({
   MenuItemComponent,
   onKeyDown,
   innerRef = null,
+  emptyStateElement,
   ...rest
 }) => {
-  const { getToggleButtonProps, getMenuProps, isListbox } = useMenuContentContext();
+  const {
+    getToggleButtonProps,
+    getMenuProps,
+    isListbox,
+    hasVisibleItems,
+    autoCloseOnEmpty
+  } = useMenuContentContext();
   const toggleButtonProps = getToggleButtonProps?.();
   const children = childrenProp || !menuItems || !menuItems.length ? childrenProp : mapMenuItems({ menuItems, MenuItemComponent });
+  if (!hasVisibleItems && !autoCloseOnEmpty) {
+    return emptyStateElement ?? /* @__PURE__ */ jsx7(DefaultMenuEmptyState, {});
+  }
   if (!children) {
     return null;
   }
@@ -2324,7 +2358,7 @@ var MenuContent = ({
     },
     [onKeyDown, toggleButtonProps?.["onKeyDown"]]
   );
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     StyledMenuContent,
     {
       autoFocus: true,
@@ -2350,29 +2384,29 @@ MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 import "react";
 
 // src/MenuFooter/styles.tsx
-import styled4 from "styled-components";
+import styled5 from "styled-components";
 import { Box as Box2 } from "@sproutsocial/seeds-react-box";
-var StyledMenuFooterBox = styled4(Box2)`
+var StyledMenuFooterBox = styled5(Box2)`
   padding: ${({ theme: theme2 }) => theme2.space[350]} ${({ theme: theme2 }) => theme2.space[400]};
   border-top: 1px solid ${(p) => p.theme.colors.container.border.base};
 `;
 
 // src/MenuFooter/MenuFooter.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { jsx as jsx8 } from "react/jsx-runtime";
 var MenuFooter = ({ children, ...rest }) => {
-  return /* @__PURE__ */ jsx7(StyledMenuFooterBox, { ...rest, children });
+  return /* @__PURE__ */ jsx8(StyledMenuFooterBox, { ...rest, children });
 };
 
 // src/MenuGroup/MenuGroup.tsx
 import "react";
 
 // src/MenuGroup/styles.tsx
-import styled6 from "styled-components";
+import styled7 from "styled-components";
 
 // ../seeds-react-text/dist/esm/index.js
 import "react";
 import styled22 from "styled-components";
-import styled5, { css as css5 } from "styled-components";
+import styled6, { css as css5 } from "styled-components";
 import {
   COMMON,
   LAYOUT,
@@ -2380,9 +2414,9 @@ import {
   GRID,
   TYPOGRAPHY
 } from "@sproutsocial/seeds-react-system-props";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 import "react";
-var Container = styled5.span`
+var Container = styled6.span`
   margin: 0;
   padding-left: 0;
   padding-right: 0;
@@ -2441,7 +2475,7 @@ var SmallBodyCopy = styled22(styles_default)`
 `;
 var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
   const qaText = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     styles_default,
     {
       typeScale: fontSize2,
@@ -2456,7 +2490,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__ */ jsx8(Component, { "data-qa-text": qaText, ...props, children });
+    return /* @__PURE__ */ jsx9(Component, { "data-qa-text": qaText, ...props, children });
   };
 };
 var HeadlineWithLogic = withTextLogic(Headline);
@@ -2484,7 +2518,7 @@ var Text_default = Text;
 var index_default = Text_default;
 
 // src/MenuGroup/styles.tsx
-var StyledMenuGroup = styled6.li`
+var StyledMenuGroup = styled7.li`
   &:not(:last-child) {
     border-bottom: 1px solid
       ${({ theme: theme2 }) => theme2.colors.container.border.base};
@@ -2500,18 +2534,18 @@ var StyledMenuGroup = styled6.li`
   ${layout}
   ${space}
 `;
-var StyledTitle = styled6(index_default.SmallSubHeadline)`
+var StyledTitle = styled7(index_default.SmallSubHeadline)`
   font-size: ${({ theme: theme2 }) => theme2.typography[100].fontSize};
   margin: ${({ theme: theme2 }) => theme2.space[400]} ${({ theme: theme2 }) => theme2.space[400]}
     0px ${({ theme: theme2 }) => theme2.space[400]};
 `;
-var StyledMenuGroupUl = styled6.ul`
+var StyledMenuGroupUl = styled7.ul`
   margin: 0;
   padding: 0;
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-import { jsx as jsx9, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
@@ -2538,8 +2572,8 @@ var MenuGroup = ({
       color: color2,
       ...rest,
       children: [
-        title && /* @__PURE__ */ jsx9(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
-        /* @__PURE__ */ jsx9(StyledMenuGroupUl, { children })
+        title && /* @__PURE__ */ jsx10(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ jsx10(StyledMenuGroupUl, { children })
       ]
     }
   );
@@ -2552,7 +2586,7 @@ import React7, {
   useEffect,
   useLayoutEffect
 } from "react";
-import styled7 from "styled-components";
+import styled8 from "styled-components";
 import { Popout } from "@sproutsocial/seeds-react-popout";
 import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 
@@ -2560,8 +2594,8 @@ import { mergeRefs } from "@sproutsocial/seeds-react-utilities";
 var MOTION_DURATION_FAST = 0.15;
 
 // src/MenuRoot/MenuRoot.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
-var CustomPopoutContent = styled7(Popout.Content)`
+import { jsx as jsx11 } from "react/jsx-runtime";
+var CustomPopoutContent = styled8(Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
@@ -2609,12 +2643,12 @@ var MenuPopout = ({
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     Popout,
     {
       isOpen: !!isOpen,
       setIsOpen,
-      content: (props) => /* @__PURE__ */ jsx10(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width2, children: typeof content === "function" ? content(props) : content }),
+      content: (props) => /* @__PURE__ */ jsx11(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width2, children: typeof content === "function" ? content(props) : content }),
       focusLockProps: {
         // correct jerking motion when scrolling while the Popout is open
         // returnFocus: false,
@@ -2639,9 +2673,8 @@ var MenuRoot = ({
     openMenu,
     closeMenu,
     inputValue,
-    hiddenItemsCount = 0,
-    items,
-    getMenuProps
+    getMenuProps,
+    autoCloseOnEmpty = false
   } = contextProps;
   const toggleElementRef = React7.useRef(null);
   const [finalWidth, setFinalWidth] = React7.useState();
@@ -2656,25 +2689,25 @@ var MenuRoot = ({
       setFinalWidth(min_width);
     }
   }, [width2, toggleElementRef.current?.offsetWidth]);
+  const menuContext = useMenu(contextProps);
+  getMenuProps?.({}, { suppressRefError: true });
   useEffect(() => {
-    if (!inputValue) return;
-    if (items && hiddenItemsCount >= items.length && isOpen) {
+    if (!inputValue || !autoCloseOnEmpty) return;
+    if (!menuContext.hasVisibleItems && isOpen) {
       closeMenu?.();
     }
-  }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
-  const menuContext = useMenu(contextProps);
-  getMenuProps?.({}, { suppressRefError: true });
-  return /* @__PURE__ */ jsx10(
+  }, [menuContext.hasVisibleItems, isOpen, inputValue, autoCloseOnEmpty]);
+  return /* @__PURE__ */ jsx11(
     MenuPopout,
     {
       placement,
       isOpen: !!isOpen,
       openMenu,
       closeMenu,
-      content: /* @__PURE__ */ jsx10(MenuContentProvider, { menuContext, children }),
+      content: /* @__PURE__ */ jsx11(MenuContentProvider, { menuContext, children }),
       width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ jsx10(
+      children: (toggleProps) => /* @__PURE__ */ jsx11(
         MenuToggleProvider,
         {
           menuContext: {
@@ -2695,7 +2728,7 @@ var MenuRoot = ({
 // src/MenuLabel.tsx
 import "react";
 import { Label } from "@sproutsocial/seeds-react-label";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var MenuLabel = ({
   children,
   required = false,
@@ -2704,7 +2737,7 @@ var MenuLabel = ({
   const { getLabelProps } = useMenuToggleContext();
   return (
     // This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       Label,
       {
         htmlFor: "fallback_menu_label",
@@ -2719,10 +2752,10 @@ var MenuLabel = ({
 
 // src/MenuToggleButton/MenuToggleButton.tsx
 import { Button } from "@sproutsocial/seeds-react-button";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var MenuToggleButton = (props) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     Button,
     {
       appearance: "secondary",
@@ -2782,7 +2815,7 @@ var useItemFiltering = ({
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var MenuSearchInput = ({
   getIsItemVisible,
   inputProps,
@@ -2812,7 +2845,7 @@ var MenuSearchInput = ({
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     Input,
     {
       onChange: (e, value) => {
@@ -2833,12 +2866,12 @@ var MenuSearchInput = ({
 
 // src/MenuTokenInput.tsx
 import React11 from "react";
-import styled8 from "styled-components";
+import styled9 from "styled-components";
 import {
   TokenInput
 } from "@sproutsocial/seeds-react-token-input";
-import { jsx as jsx14 } from "react/jsx-runtime";
-var StyledTokenInputWrapper = styled8.div`
+import { jsx as jsx15 } from "react/jsx-runtime";
+var StyledTokenInputWrapper = styled9.div`
   > div {
     padding: 4px;
   }
@@ -2872,7 +2905,7 @@ var MenuTokenInput = ({
     const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
     tokenToRemove && removeSelectedItem?.(tokenToRemove);
   };
-  return /* @__PURE__ */ jsx14(StyledTokenInputWrapper, { children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(StyledTokenInputWrapper, { children: /* @__PURE__ */ jsx15(
     TokenInput,
     {
       onKeyDown: (e, value) => {
@@ -2922,7 +2955,7 @@ var MenuTokenInput = ({
 
 // src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
 import React12 from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var MenuSearchTokenInput = ({
   getIsItemVisible,
   getTokenProps,
@@ -2970,7 +3003,7 @@ var MenuSearchTokenInput = ({
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     MenuTokenInput,
     {
       onChange: (e, value2) => {
@@ -2995,7 +3028,7 @@ import React13 from "react";
 import { Icon as Icon2 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box3 } from "@sproutsocial/seeds-react-box";
 import { mergeRefs as mergeRefs2 } from "@sproutsocial/seeds-react-utilities";
-import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs4 } from "react/jsx-runtime";
 var SubmenuItemTrigger = ({
   id,
   children,
@@ -3004,7 +3037,7 @@ var SubmenuItemTrigger = ({
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
   const toggleRef = ref && innerRef ? mergeRefs2([ref, innerRef].filter(Boolean)) : ref || innerRef;
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     MenuItem,
     {
       ...rest,
@@ -3023,7 +3056,7 @@ var SubmenuItemTrigger = ({
       id,
       children: /* @__PURE__ */ jsxs4(Box3, { display: "flex", justifyContent: "space-between", children: [
         children,
-        /* @__PURE__ */ jsx16(MenuItemActionRight, { children: /* @__PURE__ */ jsx16(Icon2, { name: "chevron-right-outline" }) })
+        /* @__PURE__ */ jsx17(MenuItemActionRight, { children: /* @__PURE__ */ jsx17(Icon2, { name: "chevron-right-outline" }) })
       ] })
     }
   );
@@ -3133,7 +3166,7 @@ var SubmenuItem = ({
       };
     }
   }, [document, onSubmenuKeydown]);
-  const subMenuContent = /* @__PURE__ */ jsx16(
+  const subMenuContent = /* @__PURE__ */ jsx17(
     "div",
     {
       ref: submenuRef,
@@ -3144,13 +3177,13 @@ var SubmenuItem = ({
       children: menuContent
     }
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     MenuComponent,
     {
       ...{
         ...menuProps,
         children: subMenuContent,
-        menuToggleElement: /* @__PURE__ */ jsx16(
+        menuToggleElement: /* @__PURE__ */ jsx17(
           SubmenuItemTrigger,
           {
             innerRef: submenuItemRef,
@@ -3182,17 +3215,17 @@ var SubmenuItem = ({
 SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/ListboxToggleButton.tsx
-import styled9, { css as css6 } from "styled-components";
+import styled10, { css as css6 } from "styled-components";
 import { Icon as Icon3 } from "@sproutsocial/seeds-react-icon";
-import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
-var StyledListboxToggleButton = styled9(
+import { jsx as jsx18, jsxs as jsxs5 } from "react/jsx-runtime";
+var StyledListboxToggleButton = styled10(
   MenuToggleButton
 )`
   ${(props) => props.invalid && css6`
       border-color: ${(props2) => props2.theme.colors.form.border.error};
     `}
 `;
-var StyledChevron = styled9.div`
+var StyledChevron = styled10.div`
   margin-left: ${({ theme: theme2 }) => theme2.space[300]};
   ${({ $isOpen }) => $isOpen && `
 		transform: rotate(-180deg);
@@ -3203,7 +3236,7 @@ var StyledChevron = styled9.div`
       color: ${(props) => props.theme.colors.icon.error};
     `}
 `;
-var StyledInnerButton = styled9.div`
+var StyledInnerButton = styled10.div`
   display: flex;
   justify-content: space-between;
 `;
@@ -3212,9 +3245,9 @@ var ListboxToggleButton = ({
   ...buttonProps
 }) => {
   const { isOpen } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx17(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ jsxs5(StyledInnerButton, { children: [
+  return /* @__PURE__ */ jsx18(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ jsxs5(StyledInnerButton, { children: [
     children,
-    /* @__PURE__ */ jsx17(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx17(Icon3, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+    /* @__PURE__ */ jsx18(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ jsx18(Icon3, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
   ] }) });
 };
 
@@ -3385,7 +3418,7 @@ var useDownshiftDefaults = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === useSelect2.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -3448,7 +3481,7 @@ var ActionMenu = ({
   useEffect2(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     MenuRootComponent,
     {
       ...{
@@ -3469,7 +3502,7 @@ var ActionMenu = ({
 // src/SingleSelectMenu/SingleSelectMenu.tsx
 import "react";
 import { useSelect as useSelect3 } from "downshift";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var SingleSelectMenu = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3496,7 +3529,7 @@ var SingleSelectMenu = ({
     ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     MenuRootComponent,
     {
       ...{
@@ -3517,7 +3550,7 @@ var SingleSelectMenu = ({
 // src/MultiSelectMenu/MultiSelectMenu.tsx
 import "react";
 import { useSelect as useSelect4, useMultipleSelection } from "downshift";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var MultiSelectMenu = ({
   children: childrenProp,
   menuItems,
@@ -3590,7 +3623,7 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsx21(
     MenuRootComponent,
     {
       ...{
@@ -3621,8 +3654,9 @@ var MultiSelectMenu = ({
 import "react";
 
 // src/Autocomplete/SingleAutocomplete.tsx
+import "react";
 import { useCombobox as useCombobox2 } from "downshift";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 var SingleAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3638,14 +3672,15 @@ var SingleAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({ isCombobox: true });
+  const downshiftDefaults = useDownshiftDefaults({ isCombobox: true });
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } = downshiftDefaults;
   const { updateFilteredItems } = useItemFiltering({
     allMenuItems,
     itemToString: itemToString2,
     getIsItemVisible,
     setHiddenItemsMap
   });
-  const { isOpen, ...useComboboxReturnProps } = useCombobox2({
+  const useComboboxReturnProps = useCombobox2({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString: itemToString2,
@@ -3656,31 +3691,33 @@ var SingleAutocomplete = ({
     ),
     ...useComboboxProps
   });
-  return /* @__PURE__ */ jsx21(
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+  const { popoutProps: userPopoutProps } = useComboboxProps;
+  return /* @__PURE__ */ jsx22(
     MenuRootComponent,
     {
       ...{
         isListbox: true,
         items: allMenuItems,
         itemToString: itemToString2,
-        isOpen,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
-        ...restDefaults
+        ...downshiftDefaults
       },
       popoutProps: {
-        focusOnContent: false
+        focusOnContent: false,
+        ...userPopoutProps
       },
+      autoCloseOnEmpty: true,
       children
     }
   );
 };
 
 // src/Autocomplete/MultiAutocomplete.tsx
-import React18 from "react";
+import React19 from "react";
 import { useCombobox as useCombobox3, useMultipleSelection as useMultipleSelection2 } from "downshift";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var MultiAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3704,21 +3741,21 @@ var MultiAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const [selectedItems, setSelectedItems] = React18.useState(initialSelectedItems);
-  const [selectedItemIds, setSelectedItemIds] = React18.useState(getSelectedItemIds(initialSelectedItems));
-  const getIsItemVisibleMulti = React18.useCallback(
-    (item, inputValue) => {
-      return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
+  const [selectedItems, setSelectedItems] = React19.useState(initialSelectedItems);
+  const [selectedItemIds, setSelectedItemIds] = React19.useState(getSelectedItemIds(initialSelectedItems));
+  const getIsItemVisibleMulti = React19.useCallback(
+    (item, inputValue2) => {
+      return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue2);
     },
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
-  const getShouldFilterMulti = React18.useCallback(
+  const getShouldFilterMulti = React19.useCallback(
     (args) => {
       return !showSelectedItemsInDropdown && Object.keys(selectedItemIds).length > 0 || defaultGetShouldFilter(args);
     },
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
-  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
+  const downshiftDefaults = useDownshiftDefaults({
     isCombobox: true,
     isMulti: true,
     // handles the prop name mapping for multi select
@@ -3729,6 +3766,7 @@ var MultiAutocomplete = ({
       ...useComboboxProps
     }
   });
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } = downshiftDefaults;
   const { updateFilteredItems } = useItemFiltering({
     allMenuItems,
     itemToString: itemToString2,
@@ -3736,7 +3774,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = useMultipleSelection2({
@@ -3749,7 +3787,7 @@ var MultiAutocomplete = ({
       onSelectedItemsChange && onSelectedItemsChange({ selectedItems: selectedItems2, ...changes });
     }
   });
-  const { isOpen, ...useComboboxReturnProps } = useCombobox3({
+  const useComboboxReturnProps = useCombobox3({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString: itemToString2,
@@ -3759,7 +3797,7 @@ var MultiAutocomplete = ({
       externalStateReducer
     ),
     onStateChange(changes) {
-      const { type, selectedItem: newSelectedItem, inputValue } = changes;
+      const { type, selectedItem: newSelectedItem, inputValue: inputValue2 } = changes;
       switch (type) {
         // Add the selected item to the selected items list
         case useCombobox3.stateChangeTypes.InputKeyDownEnter:
@@ -3780,55 +3818,63 @@ var MultiAutocomplete = ({
         default:
           break;
       }
-      if (inputValue !== void 0) updateFilteredItems({ inputValue });
+      if (inputValue2 !== void 0) updateFilteredItems({ inputValue: inputValue2 });
       onStateChange && onStateChange(changes);
     },
     ...useComboboxProps
   });
-  return /* @__PURE__ */ jsx22(
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+  const { popoutProps: userPopoutProps } = useComboboxProps;
+  React19.useEffect(() => {
+    if (!inputValue) return;
+    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
+  return /* @__PURE__ */ jsx23(
     MenuRootComponent,
     {
       ...{
         isListbox: true,
         items: allMenuItems,
         itemToString: itemToString2,
-        isOpen,
         initialSelectedItems,
         onStateChange,
         onSelectedItemsChange,
         getA11yMultiStatusMessage,
         onMultiSelectStateChange,
         multiSelectStateReducer,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
         ...useMultipleSelectionReturnProps,
-        ...restDefaults
+        ...downshiftDefaults
       },
       popoutProps: {
-        focusOnContent: false
+        focusOnContent: false,
+        ...userPopoutProps
       },
+      autoCloseOnEmpty: true,
       children
     }
   );
 };
 
 // src/Autocomplete/Autocomplete.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 var Autocomplete = ({
   multiSelect = false,
   ...rest
 }) => {
   if (multiSelect) {
-    return /* @__PURE__ */ jsx23(MultiAutocomplete, { ...rest });
+    return /* @__PURE__ */ jsx24(MultiAutocomplete, { ...rest });
   }
-  return /* @__PURE__ */ jsx23(SingleAutocomplete, { ...rest });
+  return /* @__PURE__ */ jsx24(SingleAutocomplete, { ...rest });
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
 import "react";
 import { Input as Input2 } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -3839,7 +3885,7 @@ var AutocompleteInput = ({
   ...rest
 }) => {
   const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Input2,
     {
       id: "autocomplete_input",
@@ -3865,7 +3911,7 @@ var AutocompleteInput = ({
 
 // src/Autocomplete/AutocompleteTokenInput.tsx
 import "react";
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx26 } from "react/jsx-runtime";
 var AutocompleteTokenInput = ({
   onKeyDown,
   onChange,
@@ -3884,7 +3930,7 @@ var AutocompleteTokenInput = ({
     ref,
     ariaProps
   } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx25(
+  return /* @__PURE__ */ jsx26(
     MenuTokenInput,
     {
       id: "autocomplete_input",
@@ -3909,19 +3955,19 @@ var AutocompleteTokenInput = ({
 // src/Autocomplete/AutocompleteSelect.tsx
 import Icon4 from "@sproutsocial/seeds-react-icon";
 import "react";
-import styled10 from "styled-components";
+import styled11 from "styled-components";
 import { Accessory } from "@sproutsocial/seeds-react-input";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var StyledAutocompleteInput = styled10(AutocompleteInput)`
+import { jsx as jsx27 } from "react/jsx-runtime";
+var StyledAutocompleteInput = styled11(AutocompleteInput)`
   ${Accessory} {
     pointer-events: none;
   }
 `;
 var AutocompleteSelect = (props) => {
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsx27(
     StyledAutocompleteInput,
     {
-      elemAfter: /* @__PURE__ */ jsx26(Icon4, { name: "chevron-down" }),
+      elemAfter: /* @__PURE__ */ jsx27(Icon4, { name: "chevron-down" }),
       ...props
     }
   );
@@ -3958,7 +4004,7 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 
 // src/NestedMenu/NestedMenuContext.tsx
 import { createContext as createContext2, useContext as useContext5 } from "react";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
   setSelectedMenuId: () => {
@@ -3982,7 +4028,7 @@ var NestedMenuProvider = ({
   children,
   ...nestedMenuProps
 }) => {
-  return /* @__PURE__ */ jsx27(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+  return /* @__PURE__ */ jsx28(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
   const nestedMenuContextValue = useContext5(NestedMenuContext);
@@ -4001,7 +4047,7 @@ import { mergeRefs as mergeRefs3 } from "@sproutsocial/seeds-react-utilities";
 // src/NestedMenu/NestedMenuItem.tsx
 import { Icon as Icon5 } from "@sproutsocial/seeds-react-icon";
 import { Box as Box4 } from "@sproutsocial/seeds-react-box";
-import { jsx as jsx28, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs6 } from "react/jsx-runtime";
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -4017,15 +4063,15 @@ var NestedMenuItem = ({
       }
     }
   } : {};
-  return /* @__PURE__ */ jsx28(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box4, { display: "flex", justifyContent: "space-between", children: [
+  return /* @__PURE__ */ jsx29(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ jsxs6(Box4, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ jsx28(MenuItemActionRight, { children: /* @__PURE__ */ jsx28(Icon5, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ jsx29(MenuItemActionRight, { children: /* @__PURE__ */ jsx29(Icon5, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -4062,7 +4108,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx30(
     MenuContent,
     {
       onKeyDown,
@@ -4078,17 +4124,17 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 import { Button as Button2 } from "@sproutsocial/seeds-react-button";
 import { Icon as Icon6 } from "@sproutsocial/seeds-react-icon";
 import { AnimatePresence, motion } from "motion/react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 var NestedMenuHeader = ({
   backArrowLabel,
   ...props
 }) => {
   const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
   const showBackArrow = selectedMenuPath.length > 1;
-  return /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx31(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ jsx30(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx30(
+      leftAction: /* @__PURE__ */ jsx31(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx31(
         motion.div,
         {
           initial: { opacity: 0 },
@@ -4097,7 +4143,7 @@ var NestedMenuHeader = ({
             opacity: 0,
             transition: { duration: animationSpeed }
           },
-          children: showBackArrow ? /* @__PURE__ */ jsx30(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx30(Icon6, { name: "arrow-left" }) }) : void 0
+          children: showBackArrow ? /* @__PURE__ */ jsx31(Button2, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ jsx31(Icon6, { name: "arrow-left" }) }) : void 0
         },
         `${selectedMenuPath}-header--button`
       ) }),
@@ -4107,8 +4153,8 @@ var NestedMenuHeader = ({
 };
 
 // src/NestedMenu/NestedMenuRoot.tsx
-import React23 from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import React24 from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
 var NestedMenuRoot = ({
   children,
   menuToggleElement,
@@ -4116,21 +4162,21 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
     menuContext.selectedItem,
     menuContext.selectedItems?.length
   ]);
-  return /* @__PURE__ */ jsx31(MenuContentProvider, { menuContext, children });
+  return /* @__PURE__ */ jsx32(MenuContentProvider, { menuContext, children });
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
 import { motion as motion2 } from "motion/react";
-import styled11 from "styled-components";
-import { jsx as jsx32 } from "react/jsx-runtime";
-var StyledDiv = styled11(motion2.div)`
+import styled12 from "styled-components";
+import { jsx as jsx33 } from "react/jsx-runtime";
+var StyledDiv = styled12(motion2.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
@@ -4140,7 +4186,7 @@ var NestedMenuPopout = ({
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
-  return /* @__PURE__ */ jsx32(
+  return /* @__PURE__ */ jsx33(
     MenuPopout,
     {
       ...popoutProps,
@@ -4149,8 +4195,8 @@ var NestedMenuPopout = ({
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
       width: width2,
-      content: (props) => /* @__PURE__ */ jsx32(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
-      children: (toggleProps) => /* @__PURE__ */ jsx32(
+      content: (props) => /* @__PURE__ */ jsx33(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      children: (toggleProps) => /* @__PURE__ */ jsx33(
         MenuToggleProvider,
         {
           menuContext: {
@@ -4166,7 +4212,7 @@ var NestedMenuPopout = ({
 };
 
 // src/NestedMenu/NestedMenu.tsx
-import { jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
 var NestedMenu = ({
   initialMenuId,
   menus,
@@ -4320,7 +4366,7 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ jsx33(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
+      /* @__PURE__ */ jsx34(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsxs7(
         motion3.div,
         {
           variants: contentVariants,
@@ -4329,7 +4375,7 @@ var NestedMenu = ({
           exit: "leave",
           custom: { isAdding, hasLoadedOnce },
           children: [
-            MenuHeaderComponent && /* @__PURE__ */ jsx33(
+            MenuHeaderComponent && /* @__PURE__ */ jsx34(
               MenuHeaderComponent,
               {
                 backArrowLabel,
@@ -4337,7 +4383,7 @@ var NestedMenu = ({
               }
             ),
             children && children,
-            menuItems && !children && /* @__PURE__ */ jsx33(
+            menuItems && !children && /* @__PURE__ */ jsx34(
               NestedMenuContent,
               {
                 menuItems,
@@ -4351,7 +4397,7 @@ var NestedMenu = ({
     ),
     ...restMenuProps
   };
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     NestedMenuProvider,
     {
       ...{
@@ -4365,11 +4411,11 @@ var NestedMenu = ({
         setActiveMenuContext,
         animationSpeed
       },
-      children: /* @__PURE__ */ jsx33(
+      children: /* @__PURE__ */ jsx34(
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ jsx33(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx33(
+          /* @__PURE__ */ jsx34(AnimatePresence2, { mode: "wait", children: /* @__PURE__ */ jsx34(
             motion3.div,
             {
               variants: menuVariants,
@@ -4377,7 +4423,7 @@ var NestedMenu = ({
               animate: "enter",
               exit: "leave",
               custom: { isAdding, hasLoadedOnce },
-              children: /* @__PURE__ */ jsx33(MenuComponent, { ...nestedMenuProps })
+              children: /* @__PURE__ */ jsx34(MenuComponent, { ...nestedMenuProps })
             },
             `${currentMenuId}-content`
           ) }),