@sproutsocial/seeds-react-menu 1.2.3 → 1.3.0

package/dist/index.js

@@ -169,7 +169,8 @@ var defaultMenuContext = {
   items: [],
   itemsMap: {},
   isItemSelected: () => false,
-  getInputComponentProps: () => ({})
+  getInputComponentProps: () => ({}),
+  hasVisibleItems: false
 };
 var getSelectedItemIds = (selectedItems) => selectedItems?.reduce(
   (selected, item) => ({ ...selected, [item.id]: true }),
@@ -190,6 +191,8 @@ var useMenu = ({
   selectedItems,
   getInputProps,
   contentRef: contentRefFromProps,
+  autoCloseOnEmpty,
+  hiddenItemsCount,
   ...rest
 } = {}) => {
   const contentRef = contentRefFromProps || import_react.default.createRef();
@@ -244,6 +247,9 @@ var useMenu = ({
     },
     [getInputProps]
   );
+  const hasVisibleItems = (0, import_react.useMemo)(() => {
+    return (hiddenItemsCount ?? 0) < items.length;
+  }, [items, hiddenItemsCount]);
   return {
     isOpen,
     isListbox,
@@ -256,6 +262,8 @@ var useMenu = ({
     getInputProps,
     getInputComponentProps,
     contentRef,
+    hasVisibleItems,
+    autoCloseOnEmpty,
     ...menuProps
   };
 };
@@ -2362,7 +2370,23 @@ var useMenuChildren = ({
 
 // src/MenuContent/MenuContent.tsx
 var import_react5 = require("react");
+
+// src/MenuContent/DefaultMenuEmptyState.tsx
+var import_styled_components6 = __toESM(require("styled-components"));
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var StyledEmptyState = import_styled_components6.default.div`
+  padding: ${({ theme: theme2 }) => theme2.space[350]};
+  text-align: center;
+  font-size: ${({ theme: theme2 }) => theme2.typography[200].fontSize};
+`;
+var DefaultMenuEmptyState = ({
+  children
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(StyledEmptyState, { children: children || "No results found." });
+};
+
+// src/MenuContent/MenuContent.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var MenuContent = ({
   id = "menu_content",
   children: childrenProp,
@@ -2370,11 +2394,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__ */ (0, import_jsx_runtime7.jsx)(DefaultMenuEmptyState, {});
+  }
   if (!children) {
     return null;
   }
@@ -2385,7 +2419,7 @@ var MenuContent = ({
     },
     [onKeyDown, toggleButtonProps?.["onKeyDown"]]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     StyledMenuContent,
     {
       autoFocus: true,
@@ -2411,47 +2445,47 @@ MenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 var import_react6 = require("react");
 
 // src/MenuFooter/styles.tsx
-var import_styled_components6 = __toESM(require("styled-components"));
+var import_styled_components7 = __toESM(require("styled-components"));
 var import_seeds_react_box2 = require("@sproutsocial/seeds-react-box");
-var StyledMenuFooterBox = (0, import_styled_components6.default)(import_seeds_react_box2.Box)`
+var StyledMenuFooterBox = (0, import_styled_components7.default)(import_seeds_react_box2.Box)`
   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
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 var MenuFooter = ({ children, ...rest }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(StyledMenuFooterBox, { ...rest, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(StyledMenuFooterBox, { ...rest, children });
 };
 
 // src/MenuGroup/MenuGroup.tsx
 var import_react9 = require("react");
 
 // src/MenuGroup/styles.tsx
-var import_styled_components9 = __toESM(require("styled-components"));
+var import_styled_components10 = __toESM(require("styled-components"));
 
 // ../seeds-react-text/dist/esm/index.js
 var import_react7 = require("react");
-var import_styled_components7 = __toESM(require("styled-components"));
 var import_styled_components8 = __toESM(require("styled-components"));
+var import_styled_components9 = __toESM(require("styled-components"));
 var import_seeds_react_system_props = require("@sproutsocial/seeds-react-system-props");
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var import_react8 = require("react");
-var Container = import_styled_components8.default.span`
+var Container = import_styled_components9.default.span`
   margin: 0;
   padding-left: 0;
   padding-right: 0;
   font-family: ${(props) => props.theme.fontFamily};
   font-style: ${(props) => props.isItalicized && "italic"};
 
-  ${(props) => props.truncated && import_styled_components8.css`
+  ${(props) => props.truncated && import_styled_components9.css`
       display: block;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
     `}
 
-  ${(props) => props.breakWord && import_styled_components8.css`
+  ${(props) => props.breakWord && import_styled_components9.css`
       word-break: break-word;
       hyphens: auto;
     `}
@@ -2463,40 +2497,40 @@ var Container = import_styled_components8.default.span`
   ${import_seeds_react_system_props.TYPOGRAPHY}
 `;
 var styles_default = Container;
-var Headline = (0, import_styled_components7.default)(styles_default)`
+var Headline = (0, import_styled_components8.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[400]}
 `;
-var SubHeadline = (0, import_styled_components7.default)(styles_default)`
+var SubHeadline = (0, import_styled_components8.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[300]}
 `;
-var SmallSubHeadline = (0, import_styled_components7.default)(styles_default)`
+var SmallSubHeadline = (0, import_styled_components8.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.headline};
   font-weight: ${(props) => props.theme.fontWeights.bold};
   ${(props) => props.theme.typography[200]}
 `;
-var Byline = (0, import_styled_components7.default)(styles_default)`
+var Byline = (0, import_styled_components8.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.subtext};
   ${(props) => props.theme.typography[200]}
 `;
-var SmallByline = (0, import_styled_components7.default)(styles_default)`
+var SmallByline = (0, import_styled_components8.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.subtext};
   ${(props) => props.theme.typography[100]}
 `;
-var BodyCopy = (0, import_styled_components7.default)(styles_default)`
+var BodyCopy = (0, import_styled_components8.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.body};
   ${(props) => props.theme.typography[300]}
 `;
-var SmallBodyCopy = (0, import_styled_components7.default)(styles_default)`
+var SmallBodyCopy = (0, import_styled_components8.default)(styles_default)`
   color: ${(props) => props.theme.colors.text.body};
   ${(props) => props.theme.typography[200]}
 `;
 var Text = ({ fontSize: fontSize2, children, qa, color: color2, ...rest }) => {
   const qaText = typeof children === "string" ? children : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     styles_default,
     {
       typeScale: fontSize2,
@@ -2511,7 +2545,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_runtime8.jsx)(Component, { "data-qa-text": qaText, ...props, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Component, { "data-qa-text": qaText, ...props, children });
   };
 };
 var HeadlineWithLogic = withTextLogic(Headline);
@@ -2539,7 +2573,7 @@ var Text_default = Text;
 var index_default = Text_default;
 
 // src/MenuGroup/styles.tsx
-var StyledMenuGroup = import_styled_components9.default.li`
+var StyledMenuGroup = import_styled_components10.default.li`
   &:not(:last-child) {
     border-bottom: 1px solid
       ${({ theme: theme2 }) => theme2.colors.container.border.base};
@@ -2555,18 +2589,18 @@ var StyledMenuGroup = import_styled_components9.default.li`
   ${layout}
   ${space}
 `;
-var StyledTitle = (0, import_styled_components9.default)(index_default.SmallSubHeadline)`
+var StyledTitle = (0, import_styled_components10.default)(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 = import_styled_components9.default.ul`
+var StyledMenuGroupUl = import_styled_components10.default.ul`
   margin: 0;
   padding: 0;
 `;
 
 // src/MenuGroup/MenuGroup.tsx
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_jsx_runtime10 = require("react/jsx-runtime");
 var MenuGroup = ({
   titleAs = "h3",
   children: childrenProp,
@@ -2583,7 +2617,7 @@ var MenuGroup = ({
   if (!children) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     StyledMenuGroup,
     {
       role: "group",
@@ -2593,8 +2627,8 @@ var MenuGroup = ({
       color: color2,
       ...rest,
       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 })
+        title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledTitle, { role: "heading", as: titleAs, id: titleId, children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(StyledMenuGroupUl, { children })
       ]
     }
   );
@@ -2603,7 +2637,7 @@ MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 
 // src/MenuRoot/MenuRoot.tsx
 var import_react10 = __toESM(require("react"));
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 var import_seeds_react_popout = require("@sproutsocial/seeds-react-popout");
 var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities");
 
@@ -2611,8 +2645,8 @@ var import_seeds_react_utilities = require("@sproutsocial/seeds-react-utilities"
 var MOTION_DURATION_FAST = 0.15;
 
 // src/MenuRoot/MenuRoot.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var CustomPopoutContent = (0, import_styled_components10.default)(import_seeds_react_popout.Popout.Content)`
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var CustomPopoutContent = (0, import_styled_components11.default)(import_seeds_react_popout.Popout.Content)`
   padding: 0;
   margin-left: 0;
   margin-right: 0;
@@ -2660,12 +2694,12 @@ var MenuPopout = ({
     },
     [openMenu, closeMenu]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     import_seeds_react_popout.Popout,
     {
       isOpen: !!isOpen,
       setIsOpen,
-      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(CustomPopoutContent, { width: popoutProps.fullWidth ? "initial" : width2, children: typeof content === "function" ? content(props) : content }),
+      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(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,
@@ -2690,9 +2724,8 @@ var MenuRoot = ({
     openMenu,
     closeMenu,
     inputValue,
-    hiddenItemsCount = 0,
-    items,
-    getMenuProps
+    getMenuProps,
+    autoCloseOnEmpty = false
   } = contextProps;
   const toggleElementRef = import_react10.default.useRef(null);
   const [finalWidth, setFinalWidth] = import_react10.default.useState();
@@ -2709,17 +2742,23 @@ var MenuRoot = ({
   }, [width2, toggleElementRef.current?.offsetWidth]);
   const menuContext = useMenu(contextProps);
   getMenuProps?.({}, { suppressRefError: true });
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  (0, import_react10.useEffect)(() => {
+    if (!inputValue || !autoCloseOnEmpty) return;
+    if (!menuContext.hasVisibleItems && isOpen) {
+      closeMenu?.();
+    }
+  }, [menuContext.hasVisibleItems, isOpen, inputValue, autoCloseOnEmpty]);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     MenuPopout,
     {
       placement,
       isOpen: !!isOpen,
       openMenu,
       closeMenu,
-      content: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(MenuContentProvider, { menuContext, children }),
+      content: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(MenuContentProvider, { menuContext, children }),
       width: finalWidth,
       ...popoutProps,
-      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         MenuToggleProvider,
         {
           menuContext: {
@@ -2740,7 +2779,7 @@ var MenuRoot = ({
 // src/MenuLabel.tsx
 var import_react11 = require("react");
 var import_seeds_react_label = require("@sproutsocial/seeds-react-label");
-var import_jsx_runtime11 = (
+var import_jsx_runtime12 = (
   // This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
   require("react/jsx-runtime")
 );
@@ -2750,7 +2789,7 @@ var MenuLabel = ({
   ...rest
 }) => {
   const { getLabelProps } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_seeds_react_label.Label,
     {
       htmlFor: "fallback_menu_label",
@@ -2764,10 +2803,10 @@ var MenuLabel = ({
 
 // src/MenuToggleButton/MenuToggleButton.tsx
 var import_seeds_react_button = require("@sproutsocial/seeds-react-button");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var MenuToggleButton = (props) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
     import_seeds_react_button.Button,
     {
       appearance: "secondary",
@@ -2827,7 +2866,7 @@ var useItemFiltering = ({
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var MenuSearchInput = ({
   getIsItemVisible,
   inputProps,
@@ -2857,7 +2896,7 @@ var MenuSearchInput = ({
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     import_seeds_react_input.Input,
     {
       onChange: (e, value) => {
@@ -2878,10 +2917,10 @@ var MenuSearchInput = ({
 
 // src/MenuTokenInput.tsx
 var import_react14 = __toESM(require("react"));
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components12 = __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`
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var StyledTokenInputWrapper = import_styled_components12.default.div`
   > div {
     padding: 4px;
   }
@@ -2915,7 +2954,7 @@ var MenuTokenInput = ({
     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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(StyledTokenInputWrapper, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     import_seeds_react_token_input.TokenInput,
     {
       onKeyDown: (e, value) => {
@@ -2965,7 +3004,7 @@ var MenuTokenInput = ({
 
 // src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
 var import_react15 = __toESM(require("react"));
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var MenuSearchTokenInput = ({
   getIsItemVisible,
   getTokenProps,
@@ -3013,7 +3052,7 @@ var MenuSearchTokenInput = ({
     },
     [toggleButtonProps.onKeyDown]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     MenuTokenInput,
     {
       onChange: (e, value2) => {
@@ -3038,7 +3077,7 @@ var import_react16 = __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_utilities2 = require("@sproutsocial/seeds-react-utilities");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var SubmenuItemTrigger = ({
   id,
   children,
@@ -3047,7 +3086,7 @@ var SubmenuItemTrigger = ({
 }) => {
   const { getToggleButtonProps, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
   const toggleRef = ref && innerRef ? (0, import_seeds_react_utilities2.mergeRefs)([ref, innerRef].filter(Boolean)) : ref || innerRef;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     MenuItem,
     {
       ...rest,
@@ -3064,9 +3103,9 @@ var SubmenuItemTrigger = ({
         { 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_runtime17.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" }) })
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_icon2.Icon, { name: "chevron-right-outline" }) })
       ] })
     }
   );
@@ -3176,7 +3215,7 @@ var SubmenuItem = ({
       };
     }
   }, [document, onSubmenuKeydown]);
-  const subMenuContent = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  const subMenuContent = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       ref: submenuRef,
@@ -3187,13 +3226,13 @@ var SubmenuItem = ({
       children: menuContent
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     MenuComponent,
     {
       ...{
         ...menuProps,
         children: subMenuContent,
-        menuToggleElement: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        menuToggleElement: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           SubmenuItemTrigger,
           {
             innerRef: submenuItemRef,
@@ -3225,28 +3264,28 @@ var SubmenuItem = ({
 SubmenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/ListboxToggleButton.tsx
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_seeds_react_icon3 = require("@sproutsocial/seeds-react-icon");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var StyledListboxToggleButton = (0, import_styled_components12.default)(
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var StyledListboxToggleButton = (0, import_styled_components13.default)(
   MenuToggleButton
 )`
-  ${(props) => props.invalid && import_styled_components12.css`
+  ${(props) => props.invalid && import_styled_components13.css`
       border-color: ${(props2) => props2.theme.colors.form.border.error};
     `}
 `;
-var StyledChevron = import_styled_components12.default.div`
+var StyledChevron = import_styled_components13.default.div`
   margin-left: ${({ theme: theme2 }) => theme2.space[300]};
   ${({ $isOpen }) => $isOpen && `
 		transform: rotate(-180deg);
 	`}
   transition: transform 0.15s;
 
-  ${({ invalid }) => invalid && import_styled_components12.css`
+  ${({ invalid }) => invalid && import_styled_components13.css`
       color: ${(props) => props.theme.colors.icon.error};
     `}
 `;
-var StyledInnerButton = import_styled_components12.default.div`
+var StyledInnerButton = import_styled_components13.default.div`
   display: flex;
   justify-content: space-between;
 `;
@@ -3255,9 +3294,9 @@ var ListboxToggleButton = ({
   ...buttonProps
 }) => {
   const { isOpen } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(StyledInnerButton, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledListboxToggleButton, { appearance: "secondary", ...buttonProps, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(StyledInnerButton, { children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(StyledChevron, { $isOpen: isOpen, invalid: buttonProps.invalid, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_seeds_react_icon3.Icon, { name: "chevron-down-outline", fixedWidth: true, "aria-hidden": true }) })
   ] }) });
 };
 
@@ -3426,7 +3465,7 @@ var useDownshiftDefaults = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 var handleStateChange = (changes, currentSelectedItem) => {
   if (!(changes.type === import_downshift3.useSelect.stateChangeTypes.ToggleButtonKeyDownEnter || changes.type === import_downshift3.useSelect.stateChangeTypes.ToggleButtonKeyDownSpaceButton)) {
     return;
@@ -3489,7 +3528,7 @@ var ActionMenu = ({
   (0, import_react18.useEffect)(() => {
     setCurrentSelectedItem(useSelectReturnProps.selectedItem);
   }, [useSelectReturnProps.selectedItem]);
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3510,7 +3549,7 @@ var ActionMenu = ({
 // src/SingleSelectMenu/SingleSelectMenu.tsx
 var import_react19 = require("react");
 var import_downshift4 = require("downshift");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 var SingleSelectMenu = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3537,7 +3576,7 @@ var SingleSelectMenu = ({
     ),
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3558,7 +3597,7 @@ var SingleSelectMenu = ({
 // src/MultiSelectMenu/MultiSelectMenu.tsx
 var import_react20 = require("react");
 var import_downshift5 = require("downshift");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var MultiSelectMenu = ({
   children: childrenProp,
   menuItems,
@@ -3631,7 +3670,7 @@ var MultiSelectMenu = ({
     },
     ...useSelectProps
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3662,9 +3701,9 @@ var MultiSelectMenu = ({
 var import_react23 = require("react");
 
 // src/Autocomplete/SingleAutocomplete.tsx
-var import_react21 = __toESM(require("react"));
+var import_react21 = require("react");
 var import_downshift6 = require("downshift");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var SingleAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3700,13 +3739,8 @@ var SingleAutocomplete = ({
     ...useComboboxProps
   });
   const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
-  import_react21.default.useEffect(() => {
-    if (!inputValue) return;
-    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
-      closeMenu?.();
-    }
-  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  const { popoutProps: userPopoutProps } = useComboboxProps;
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3718,8 +3752,10 @@ var SingleAutocomplete = ({
         ...downshiftDefaults
       },
       popoutProps: {
-        focusOnContent: false
+        focusOnContent: false,
+        ...userPopoutProps
       },
+      autoCloseOnEmpty: true,
       children
     }
   );
@@ -3728,7 +3764,7 @@ var SingleAutocomplete = ({
 // src/Autocomplete/MultiAutocomplete.tsx
 var import_react22 = __toESM(require("react"));
 var import_downshift7 = require("downshift");
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var MultiAutocomplete = ({
   children: childrenProp,
   stateReducer: externalStateReducer,
@@ -3835,13 +3871,14 @@ var MultiAutocomplete = ({
     ...useComboboxProps
   });
   const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+  const { popoutProps: userPopoutProps } = useComboboxProps;
   import_react22.default.useEffect(() => {
     if (!inputValue) return;
     if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
       closeMenu?.();
     }
   }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     MenuRootComponent,
     {
       ...{
@@ -3860,29 +3897,31 @@ var MultiAutocomplete = ({
         ...downshiftDefaults
       },
       popoutProps: {
-        focusOnContent: false
+        focusOnContent: false,
+        ...userPopoutProps
       },
+      autoCloseOnEmpty: true,
       children
     }
   );
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var Autocomplete = ({
   multiSelect = false,
   ...rest
 }) => {
   if (multiSelect) {
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MultiAutocomplete, { ...rest });
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(MultiAutocomplete, { ...rest });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SingleAutocomplete, { ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SingleAutocomplete, { ...rest });
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
 var import_react24 = require("react");
 var import_seeds_react_input2 = require("@sproutsocial/seeds-react-input");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var AutocompleteInput = ({
   onKeyDown,
   onChange,
@@ -3893,7 +3932,7 @@ var AutocompleteInput = ({
   ...rest
 }) => {
   const { getInputComponentProps, inputValue, ref, ariaProps } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     import_seeds_react_input2.Input,
     {
       id: "autocomplete_input",
@@ -3919,7 +3958,7 @@ var AutocompleteInput = ({
 
 // src/Autocomplete/AutocompleteTokenInput.tsx
 var import_react25 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 var AutocompleteTokenInput = ({
   onKeyDown,
   onChange,
@@ -3938,7 +3977,7 @@ var AutocompleteTokenInput = ({
     ref,
     ariaProps
   } = useMenuToggleContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     MenuTokenInput,
     {
       id: "autocomplete_input",
@@ -3963,19 +4002,19 @@ var AutocompleteTokenInput = ({
 // src/Autocomplete/AutocompleteSelect.tsx
 var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
 var import_react26 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_styled_components14 = __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)`
+var import_jsx_runtime27 = require("react/jsx-runtime");
+var StyledAutocompleteInput = (0, import_styled_components14.default)(AutocompleteInput)`
   ${import_seeds_react_input3.Accessory} {
     pointer-events: none;
   }
 `;
 var AutocompleteSelect = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     StyledAutocompleteInput,
     {
-      elemAfter: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_seeds_react_icon4.default, { name: "chevron-down" }),
+      elemAfter: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_seeds_react_icon4.default, { name: "chevron-down" }),
       ...props
     }
   );
@@ -4012,7 +4051,7 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 
 // src/NestedMenu/NestedMenuContext.tsx
 var import_react27 = require("react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
   setSelectedMenuId: () => {
@@ -4036,7 +4075,7 @@ var NestedMenuProvider = ({
   children,
   ...nestedMenuProps
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
   const nestedMenuContextValue = (0, import_react27.useContext)(NestedMenuContext);
@@ -4055,7 +4094,7 @@ var import_seeds_react_utilities3 = require("@sproutsocial/seeds-react-utilities
 // src/NestedMenu/NestedMenuItem.tsx
 var import_seeds_react_icon5 = require("@sproutsocial/seeds-react-icon");
 var import_seeds_react_box4 = require("@sproutsocial/seeds-react-box");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var NestedMenuItem = ({
   children,
   childMenuId,
@@ -4071,15 +4110,15 @@ var NestedMenuItem = ({
       }
     }
   } : {};
-  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: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenuItem, { ...onClickProps, ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_seeds_react_box4.Box, { display: "flex", justifyContent: "space-between", children: [
     children,
-    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_seeds_react_icon5.Icon, { name: "arrow-right-outline" }) })
+    childMenuId && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MenuItemActionRight, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_seeds_react_icon5.Icon, { name: "arrow-right-outline" }) })
   ] }) });
 };
 NestedMenuItem.__MENU_PRIMITIVE_TYPE = "MenuItem";
 
 // src/NestedMenu/NestedMenuContent.tsx
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var NestedMenuContent = ({
   innerRef: innerRefProp = null,
   onKeyDown: onKeyDownProp,
@@ -4116,7 +4155,7 @@ var NestedMenuContent = ({
         break;
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     MenuContent,
     {
       onKeyDown,
@@ -4132,17 +4171,17 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
 var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
 var import_react29 = require("motion/react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 var NestedMenuHeader = ({
   backArrowLabel,
   ...props
 }) => {
   const { goBack, selectedMenuPath, animationSpeed } = useNestedMenuContext();
   const showBackArrow = selectedMenuPath.length > 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react29.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+      leftAction: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react29.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
         import_react29.motion.div,
         {
           initial: { opacity: 0 },
@@ -4151,7 +4190,7 @@ var NestedMenuHeader = ({
             opacity: 0,
             transition: { duration: animationSpeed }
           },
-          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
+          children: showBackArrow ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_seeds_react_button2.Button, { onClick: goBack, ariaLabel: backArrowLabel, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_seeds_react_icon6.Icon, { name: "arrow-left" }) }) : void 0
         },
         `${selectedMenuPath}-header--button`
       ) }),
@@ -4162,7 +4201,7 @@ var NestedMenuHeader = ({
 
 // src/NestedMenu/NestedMenuRoot.tsx
 var import_react30 = __toESM(require("react"));
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var NestedMenuRoot = ({
   children,
   menuToggleElement,
@@ -4177,14 +4216,14 @@ var NestedMenuRoot = ({
     menuContext.selectedItem,
     menuContext.selectedItems?.length
   ]);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(MenuContentProvider, { menuContext, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(MenuContentProvider, { menuContext, children });
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
 var import_react31 = 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_react31.motion.div)`
+var import_styled_components15 = __toESM(require("styled-components"));
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var StyledDiv = (0, import_styled_components15.default)(import_react31.motion.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
@@ -4194,7 +4233,7 @@ var NestedMenuPopout = ({
   ...popoutProps
 }) => {
   const { activeMenuContext, rootMenuContextProps, resetSelectedMenuPath } = useNestedMenuContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     MenuPopout,
     {
       ...popoutProps,
@@ -4203,8 +4242,8 @@ var NestedMenuPopout = ({
       openMenu: rootMenuContextProps.openMenu,
       closeMenu: rootMenuContextProps.closeMenu,
       width: width2,
-      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)(
+      content: (props) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(StyledDiv, { layout: "position", children: typeof content === "function" ? content(props) : content }),
+      children: (toggleProps) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
         MenuToggleProvider,
         {
           menuContext: {
@@ -4220,7 +4259,7 @@ var NestedMenuPopout = ({
 };
 
 // src/NestedMenu/NestedMenu.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var NestedMenu = ({
   initialMenuId,
   menus,
@@ -4374,7 +4413,7 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
         import_react33.motion.div,
         {
           variants: contentVariants,
@@ -4383,7 +4422,7 @@ var NestedMenu = ({
           exit: "leave",
           custom: { isAdding, hasLoadedOnce },
           children: [
-            MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            MenuHeaderComponent && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               MenuHeaderComponent,
               {
                 backArrowLabel,
@@ -4391,7 +4430,7 @@ var NestedMenu = ({
               }
             ),
             children && children,
-            menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            menuItems && !children && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
               NestedMenuContent,
               {
                 menuItems,
@@ -4405,7 +4444,7 @@ var NestedMenu = ({
     ),
     ...restMenuProps
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     NestedMenuProvider,
     {
       ...{
@@ -4419,11 +4458,11 @@ var NestedMenu = ({
         setActiveMenuContext,
         animationSpeed
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
             import_react33.motion.div,
             {
               variants: menuVariants,
@@ -4431,7 +4470,7 @@ var NestedMenu = ({
               animate: "enter",
               exit: "leave",
               custom: { isAdding, hasLoadedOnce },
-              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(MenuComponent, { ...nestedMenuProps })
+              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(MenuComponent, { ...nestedMenuProps })
             },
             `${currentMenuId}-content`
           ) }),