@sproutsocial/seeds-react-menu 1.2.2 → 1.2.3

package/.turbo/turbo-build.log

@@ -84,14 +84,14 @@ ESM Build start
          ╵       ~~~~~~~~~
 
 
-CJS dist/index.js     140.79 KB
-CJS dist/index.js.map 365.47 KB
-CJS ⚡️ Build success in 515ms
-ESM dist/esm/index.js     131.30 KB
-ESM dist/esm/index.js.map 364.25 KB
-ESM ⚡️ Build success in 518ms
+ESM dist/esm/index.js     131.72 KB
+ESM dist/esm/index.js.map 364.88 KB
+ESM ⚡️ Build success in 550ms
+CJS dist/index.js     141.25 KB
+CJS dist/index.js.map 366.13 KB
+CJS ⚡️ Build success in 555ms
 DTS Build start
-DTS ⚡️ Build success in 15560ms
+DTS ⚡️ Build success in 15567ms
 DTS dist/index.d.ts  36.84 KB
 DTS dist/index.d.mts 36.84 KB
-Done in 18.60s.
+Done in 17.81s.

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @sproutsocial/seeds-react-menu
 
+## 1.2.3
+
+### Patch Changes
+
+- 68254a6: Fixed issue where Menus using the MenuSearchInput automatically closed when the results were empty. They now remain open when no match is found.
+
 ## 1.2.2
 
 ### Patch Changes

package/dist/esm/index.js

@@ -2549,7 +2549,6 @@ MenuGroup.__MENU_PRIMITIVE_TYPE = "MenuGroup";
 // src/MenuRoot/MenuRoot.tsx
 import React7, {
   useCallback as useCallback2,
-  useEffect,
   useLayoutEffect
 } from "react";
 import styled7 from "styled-components";
@@ -2656,12 +2655,6 @@ var MenuRoot = ({
       setFinalWidth(min_width);
     }
   }, [width2, toggleElementRef.current?.offsetWidth]);
-  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__ */ jsx10(
@@ -3621,6 +3614,7 @@ var MultiSelectMenu = ({
 import "react";
 
 // src/Autocomplete/SingleAutocomplete.tsx
+import React18 from "react";
 import { useCombobox as useCombobox2 } from "downshift";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var SingleAutocomplete = ({
@@ -3638,14 +3632,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,6 +3651,13 @@ var SingleAutocomplete = ({
     ),
     ...useComboboxProps
   });
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+  React18.useEffect(() => {
+    if (!inputValue) return;
+    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
   return /* @__PURE__ */ jsx21(
     MenuRootComponent,
     {
@@ -3663,11 +3665,9 @@ var SingleAutocomplete = ({
         isListbox: true,
         items: allMenuItems,
         itemToString: itemToString2,
-        isOpen,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
-        ...restDefaults
+        ...downshiftDefaults
       },
       popoutProps: {
         focusOnContent: false
@@ -3678,7 +3678,7 @@ var SingleAutocomplete = ({
 };
 
 // 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";
 var MultiAutocomplete = ({
@@ -3704,21 +3704,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 +3729,7 @@ var MultiAutocomplete = ({
       ...useComboboxProps
     }
   });
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } = downshiftDefaults;
   const { updateFilteredItems } = useItemFiltering({
     allMenuItems,
     itemToString: itemToString2,
@@ -3736,7 +3737,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  React18.useEffect(() => {
+  React19.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = useMultipleSelection2({
@@ -3749,7 +3750,7 @@ var MultiAutocomplete = ({
       onSelectedItemsChange && onSelectedItemsChange({ selectedItems: selectedItems2, ...changes });
     }
   });
-  const { isOpen, ...useComboboxReturnProps } = useCombobox3({
+  const useComboboxReturnProps = useCombobox3({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString: itemToString2,
@@ -3759,7 +3760,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,11 +3781,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;
+  React19.useEffect(() => {
+    if (!inputValue) return;
+    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
   return /* @__PURE__ */ jsx22(
     MenuRootComponent,
     {
@@ -3792,18 +3800,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
@@ -4107,7 +4113,7 @@ var NestedMenuHeader = ({
 };
 
 // src/NestedMenu/NestedMenuRoot.tsx
-import React23 from "react";
+import React24 from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var NestedMenuRoot = ({
   children,
@@ -4116,7 +4122,7 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  React23.useEffect(() => {
+  React24.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],