@sproutsocial/seeds-react-menu 1.2.2 → 1.2.3

package/dist/index.js

@@ -2707,12 +2707,6 @@ var MenuRoot = ({
       setFinalWidth(min_width);
     }
   }, [width2, toggleElementRef.current?.offsetWidth]);
-  (0, import_react10.useEffect)(() => {
-    if (!inputValue) return;
-    if (items && hiddenItemsCount >= items.length && isOpen) {
-      closeMenu?.();
-    }
-  }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
   const menuContext = useMenu(contextProps);
   getMenuProps?.({}, { suppressRefError: true });
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
@@ -3665,9 +3659,10 @@ var MultiSelectMenu = ({
 };
 
 // src/Autocomplete/Autocomplete.tsx
-var import_react22 = require("react");
+var import_react23 = require("react");
 
 // src/Autocomplete/SingleAutocomplete.tsx
+var import_react21 = __toESM(require("react"));
 var import_downshift6 = require("downshift");
 var import_jsx_runtime21 = require("react/jsx-runtime");
 var SingleAutocomplete = ({
@@ -3685,14 +3680,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 } = (0, import_downshift6.useCombobox)({
+  const useComboboxReturnProps = (0, import_downshift6.useCombobox)({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString: itemToString2,
@@ -3703,6 +3699,13 @@ 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)(
     MenuRootComponent,
     {
@@ -3710,11 +3713,9 @@ var SingleAutocomplete = ({
         isListbox: true,
         items: allMenuItems,
         itemToString: itemToString2,
-        isOpen,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
-        ...restDefaults
+        ...downshiftDefaults
       },
       popoutProps: {
         focusOnContent: false
@@ -3725,7 +3726,7 @@ var SingleAutocomplete = ({
 };
 
 // src/Autocomplete/MultiAutocomplete.tsx
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 var import_downshift7 = require("downshift");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var MultiAutocomplete = ({
@@ -3751,21 +3752,21 @@ var MultiAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const [selectedItems, setSelectedItems] = import_react21.default.useState(initialSelectedItems);
-  const [selectedItemIds, setSelectedItemIds] = import_react21.default.useState(getSelectedItemIds(initialSelectedItems));
-  const getIsItemVisibleMulti = import_react21.default.useCallback(
-    (item, inputValue) => {
-      return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue);
+  const [selectedItems, setSelectedItems] = import_react22.default.useState(initialSelectedItems);
+  const [selectedItemIds, setSelectedItemIds] = import_react22.default.useState(getSelectedItemIds(initialSelectedItems));
+  const getIsItemVisibleMulti = import_react22.default.useCallback(
+    (item, inputValue2) => {
+      return (showSelectedItemsInDropdown || !selectedItemIds[item.id]) && getIsItemVisible(item, inputValue2);
     },
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
-  const getShouldFilterMulti = import_react21.default.useCallback(
+  const getShouldFilterMulti = import_react22.default.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
@@ -3776,6 +3777,7 @@ var MultiAutocomplete = ({
       ...useComboboxProps
     }
   });
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } = downshiftDefaults;
   const { updateFilteredItems } = useItemFiltering({
     allMenuItems,
     itemToString: itemToString2,
@@ -3783,7 +3785,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  import_react21.default.useEffect(() => {
+  import_react22.default.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = (0, import_downshift7.useMultipleSelection)({
@@ -3796,7 +3798,7 @@ var MultiAutocomplete = ({
       onSelectedItemsChange && onSelectedItemsChange({ selectedItems: selectedItems2, ...changes });
     }
   });
-  const { isOpen, ...useComboboxReturnProps } = (0, import_downshift7.useCombobox)({
+  const useComboboxReturnProps = (0, import_downshift7.useCombobox)({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString: itemToString2,
@@ -3806,7 +3808,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 import_downshift7.useCombobox.stateChangeTypes.InputKeyDownEnter:
@@ -3827,11 +3829,18 @@ var MultiAutocomplete = ({
         default:
           break;
       }
-      if (inputValue !== void 0) updateFilteredItems({ inputValue });
+      if (inputValue2 !== void 0) updateFilteredItems({ inputValue: inputValue2 });
       onStateChange && onStateChange(changes);
     },
     ...useComboboxProps
   });
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+  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)(
     MenuRootComponent,
     {
@@ -3839,18 +3848,16 @@ var MultiAutocomplete = ({
         isListbox: true,
         items: allMenuItems,
         itemToString: itemToString2,
-        isOpen,
         initialSelectedItems,
         onStateChange,
         onSelectedItemsChange,
         getA11yMultiStatusMessage,
         onMultiSelectStateChange,
         multiSelectStateReducer,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
         ...useMultipleSelectionReturnProps,
-        ...restDefaults
+        ...downshiftDefaults
       },
       popoutProps: {
         focusOnContent: false
@@ -3873,7 +3880,7 @@ var Autocomplete = ({
 };
 
 // src/Autocomplete/AutocompleteInput.tsx
-var import_react23 = require("react");
+var import_react24 = require("react");
 var import_seeds_react_input2 = require("@sproutsocial/seeds-react-input");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var AutocompleteInput = ({
@@ -3911,7 +3918,7 @@ var AutocompleteInput = ({
 };
 
 // src/Autocomplete/AutocompleteTokenInput.tsx
-var import_react24 = require("react");
+var import_react25 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var AutocompleteTokenInput = ({
   onKeyDown,
@@ -3955,7 +3962,7 @@ var AutocompleteTokenInput = ({
 
 // src/Autocomplete/AutocompleteSelect.tsx
 var import_seeds_react_icon4 = __toESM(require("@sproutsocial/seeds-react-icon"));
-var import_react25 = require("react");
+var import_react26 = 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");
@@ -3975,8 +3982,8 @@ var AutocompleteSelect = (props) => {
 };
 
 // src/NestedMenu/NestedMenu.tsx
-var import_react31 = require("react");
-var import_react32 = require("motion/react");
+var import_react32 = require("react");
+var import_react33 = require("motion/react");
 var import_downshift9 = require("downshift");
 
 // src/reducers/nestedMenuStateReducer.tsx
@@ -4004,7 +4011,7 @@ var nestedMenuStateReducer = (_state, actionAndChanges) => {
 };
 
 // src/NestedMenu/NestedMenuContext.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
 var defaultNestedMenuContext = {
   selectedMenuPath: [],
@@ -4022,7 +4029,7 @@ var defaultNestedMenuContext = {
   },
   animationSpeed: MOTION_DURATION_FAST
 };
-var NestedMenuContext = (0, import_react26.createContext)(
+var NestedMenuContext = (0, import_react27.createContext)(
   defaultNestedMenuContext
 );
 var NestedMenuProvider = ({
@@ -4032,7 +4039,7 @@ var NestedMenuProvider = ({
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(NestedMenuContext.Provider, { value: nestedMenuProps, children });
 };
 var useNestedMenuContext = () => {
-  const nestedMenuContextValue = (0, import_react26.useContext)(NestedMenuContext);
+  const nestedMenuContextValue = (0, import_react27.useContext)(NestedMenuContext);
   if (nestedMenuContextValue === null) {
     throw new Error(
       "useNestedMenuContext must be used within a <NestedMenuContext.Provider />"
@@ -4042,7 +4049,7 @@ var useNestedMenuContext = () => {
 };
 
 // src/NestedMenu/NestedMenuContent.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_seeds_react_utilities3 = require("@sproutsocial/seeds-react-utilities");
 
 // src/NestedMenu/NestedMenuItem.tsx
@@ -4083,10 +4090,10 @@ var NestedMenuContent = ({
 }) => {
   const { highlightedIndex, items } = useMenuContentContext();
   const { setSelectedMenuId, selectedMenuPath, goBack } = useNestedMenuContext();
-  const internalRef = (0, import_react27.useRef)(null);
+  const internalRef = (0, import_react28.useRef)(null);
   const innerRef = (0, import_seeds_react_utilities3.mergeRefs)(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
-  (0, import_react27.useEffect)(() => {
+  (0, import_react28.useEffect)(() => {
     internalRef?.current?.focus();
   }, []);
   const onKeyDown = (e) => {
@@ -4124,7 +4131,7 @@ NestedMenuContent.__MENU_PRIMITIVE_TYPE = "MenuContent";
 // src/NestedMenu/NestedMenuHeader.tsx
 var import_seeds_react_button2 = require("@sproutsocial/seeds-react-button");
 var import_seeds_react_icon6 = require("@sproutsocial/seeds-react-icon");
-var import_react28 = require("motion/react");
+var import_react29 = require("motion/react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var NestedMenuHeader = ({
   backArrowLabel,
@@ -4135,8 +4142,8 @@ var NestedMenuHeader = ({
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     MenuHeader,
     {
-      leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react28.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-        import_react28.motion.div,
+      leftAction: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react29.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        import_react29.motion.div,
         {
           initial: { opacity: 0 },
           animate: { opacity: 1 },
@@ -4154,7 +4161,7 @@ var NestedMenuHeader = ({
 };
 
 // src/NestedMenu/NestedMenuRoot.tsx
-var import_react29 = __toESM(require("react"));
+var import_react30 = __toESM(require("react"));
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var NestedMenuRoot = ({
   children,
@@ -4163,7 +4170,7 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  import_react29.default.useEffect(() => {
+  import_react30.default.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
@@ -4174,10 +4181,10 @@ var NestedMenuRoot = ({
 };
 
 // src/NestedMenu/NestedMenuPopout.tsx
-var import_react30 = require("motion/react");
+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_react30.motion.div)`
+var StyledDiv = (0, import_styled_components14.default)(import_react31.motion.div)`
   overflow: hidden;
 `;
 var NestedMenuPopout = ({
@@ -4229,9 +4236,9 @@ var NestedMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const uniqueId = (0, import_react31.useId)();
+  const uniqueId = (0, import_react32.useId)();
   const nestedMenuId = externalNestedMenuId ?? `nested-menu-${uniqueId}`;
-  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react31.useState)(false);
+  const [hasLoadedOnce, setHasLoadedOnce] = (0, import_react32.useState)(false);
   const useSelectReturnProps = (0, import_downshift9.useSelect)({
     ...defaultDownshiftProps.select,
     id: nestedMenuId,
@@ -4247,7 +4254,7 @@ var NestedMenu = ({
     ...useSelectReturnProps,
     ...restDefaults
   };
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (!useSelectReturnProps.isOpen) {
       setHasLoadedOnce(false);
     } else {
@@ -4265,15 +4272,15 @@ var NestedMenu = ({
     onIsOpenChange: onNestedIsOpenChange
   };
   rootMenuContextProps.getMenuProps?.({}, { suppressRefError: true });
-  const [selectedMenuPath, setSelectedMenuPath] = (0, import_react31.useState)([initialMenuId]);
-  const [activeMenuContext, setActiveMenuContext] = (0, import_react31.useState)(defaultMenuContext);
-  const [currentMenuId, setCurrentMenuId] = (0, import_react31.useState)(initialMenuId);
-  const [isAdding, setIsAdding] = (0, import_react31.useState)(false);
+  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);
   const setSelectedMenuId = (id) => {
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
-  (0, import_react31.useEffect)(() => {
+  (0, import_react32.useEffect)(() => {
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
@@ -4367,8 +4374,8 @@ var NestedMenu = ({
     initialIsOpen: true,
     children: (
       // Handles the smooth animating of the content
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react32.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-        import_react32.motion.div,
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
+        import_react33.motion.div,
         {
           variants: contentVariants,
           initial: "arrive",
@@ -4416,8 +4423,8 @@ var NestedMenu = ({
         NestedMenuPopout,
         {
           content: MenuComponent && // Handles the rerender of the component
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react32.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-            import_react32.motion.div,
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react33.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            import_react33.motion.div,
             {
               variants: menuVariants,
               initial: "arrive",