@sproutsocial/seeds-react-menu 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sproutsocial/seeds-react-menu",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Seeds React Menu",
   "author": "Sprout Social, Inc.",
   "license": "MIT",

package/src/Autocomplete/MultiAutocomplete.tsx

@@ -74,18 +74,20 @@ export const MultiAutocomplete = <
     [selectedItemIds, showSelectedItemsInDropdown, getIsItemVisible]
   );
 
-  const { setHiddenItemsMap, defaultDownshiftProps, ...restDefaults } =
-    useDownshiftDefaults({
-      isCombobox: true,
-      isMulti: true,
-      // handles the prop name mapping for multi select
-      multiSelectProps: {
-        getA11yMultiStatusMessage,
-        onMultiSelectStateChange,
-        multiSelectStateReducer,
-        ...useComboboxProps,
-      },
-    });
+  const downshiftDefaults = useDownshiftDefaults({
+    isCombobox: true,
+    isMulti: true,
+    // handles the prop name mapping for multi select
+    multiSelectProps: {
+      getA11yMultiStatusMessage,
+      onMultiSelectStateChange,
+      multiSelectStateReducer,
+      ...useComboboxProps,
+    },
+  });
+
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } =
+    downshiftDefaults;
 
   // used to handle filtering of items
   const { updateFilteredItems } = useItemFiltering({
@@ -118,9 +120,8 @@ export const MultiAutocomplete = <
   /**
    * Destructure Downshift props and call the core useCombobox with items and state handler
    */
-  const { isOpen, ...useComboboxReturnProps } = useCombobox<
-    (typeof allMenuItems)[number]
-  >({
+
+  const useComboboxReturnProps = useCombobox<(typeof allMenuItems)[number]>({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString,
@@ -160,24 +161,31 @@ export const MultiAutocomplete = <
     ...useComboboxProps,
   });
 
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+
+  React.useEffect(() => {
+    if (!inputValue) return;
+    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
+
   return (
     <MenuRootComponent
       {...{
         isListbox: true,
         items: allMenuItems,
         itemToString,
-        isOpen,
         initialSelectedItems,
         onStateChange,
         onSelectedItemsChange,
         getA11yMultiStatusMessage,
         onMultiSelectStateChange,
         multiSelectStateReducer,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
         ...useMultipleSelectionReturnProps,
-        ...restDefaults,
+        ...downshiftDefaults,
       }}
       popoutProps={{
         focusOnContent: false,

package/src/Autocomplete/SingleAutocomplete.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import { useCombobox } from "downshift";
 import { useMenuChildren } from "../hooks/useMenuChildren";
 import { itemToString as defaultItemToString } from "../utils/downshiftDefaults";
@@ -27,8 +28,12 @@ export const 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,
@@ -39,7 +44,7 @@ export const SingleAutocomplete = <
   /**
    * Destructure Downshift props and call the core useCombobox with items and state handler
    */
-  const { isOpen, ...useComboboxReturnProps } = useCombobox({
+  const useComboboxReturnProps = useCombobox({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString,
@@ -51,17 +56,24 @@ export const SingleAutocomplete = <
     ...useComboboxProps,
   });
 
+  const { isOpen, closeMenu, inputValue } = useComboboxReturnProps;
+
+  React.useEffect(() => {
+    if (!inputValue) return;
+    if (allMenuItems && hiddenItemsCount >= allMenuItems.length && isOpen) {
+      closeMenu?.();
+    }
+  }, [hiddenItemsCount, allMenuItems?.length, isOpen, inputValue]);
+
   return (
     <MenuRootComponent
       {...{
         isListbox: true,
         items: allMenuItems,
         itemToString,
-        isOpen,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
-        ...restDefaults,
+        ...downshiftDefaults,
       }}
       popoutProps={{
         focusOnContent: false,

package/src/MenuRoot/MenuRoot.tsx

@@ -150,13 +150,6 @@ export const MenuRoot = ({
     }
   }, [width, toggleElementRef.current?.offsetWidth]);
 
-  useEffect(() => {
-    if (!inputValue) return;
-    if (items && hiddenItemsCount >= items.length && isOpen) {
-      closeMenu?.();
-    }
-  }, [hiddenItemsCount, items?.length, isOpen, inputValue]);
-
   const menuContext = useMenu(contextProps);
 
   // Hack to suppress error: "downshift: You forgot to call the getMenuProps getter function on your component / element."