@sproutsocial/seeds-react-menu 1.2.1 → 1.2.3

package/.turbo/turbo-build.log

@@ -84,14 +84,14 @@ ESM Build start
          ╵       ~~~~~~~~~
 
 
-CJS dist/index.js     140.98 KB
-CJS dist/index.js.map 362.59 KB
-CJS ⚡️ Build success in 539ms
-ESM dist/esm/index.js     131.36 KB
-ESM dist/esm/index.js.map 361.32 KB
-ESM ⚡️ Build success in 545ms
+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 15626ms
-DTS dist/index.d.ts  32.53 KB
-DTS dist/index.d.mts 32.53 KB
-Done in 17.69s.
+DTS ⚡️ Build success in 15567ms
+DTS dist/index.d.ts  36.84 KB
+DTS dist/index.d.mts 36.84 KB
+Done in 17.81s.

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- 75c88a8: Improves Menu prop documentation
+
 ## 1.2.1
 
 ### 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(
@@ -2691,32 +2684,36 @@ var MenuRoot = ({
     }
   );
 };
-var MenuRootNoPopout = ({
-  children,
-  menuToggleElement,
-  ...contextProps
-}) => {
-  const menuContext = useMenu(contextProps);
-  return /* @__PURE__ */ jsx10(MenuContentProvider, { menuContext, children });
-};
 
 // src/MenuLabel.tsx
 import "react";
 import { Label } from "@sproutsocial/seeds-react-label";
 import { jsx as jsx11 } from "react/jsx-runtime";
-var MenuLabel = ({ children, ...rest }) => {
+var MenuLabel = ({
+  children,
+  required = false,
+  ...rest
+}) => {
   const { getLabelProps } = useMenuToggleContext();
-  return /* @__PURE__ */ jsx11(Label, { htmlFor: "fallback_menu_label", ...getLabelProps?.(), ...rest, children });
+  return (
+    // This fallback id should never be used, but it is here to satisfy TypeScript since getLabelProps could be undefined.
+    /* @__PURE__ */ jsx11(
+      Label,
+      {
+        htmlFor: "fallback_menu_label",
+        required,
+        ...getLabelProps?.(),
+        ...rest,
+        children
+      }
+    )
+  );
 };
 
 // src/MenuToggleButton/MenuToggleButton.tsx
-import "react";
 import { Button } from "@sproutsocial/seeds-react-button";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var MenuToggleButton = ({
-  children,
-  ...rest
-}) => {
+var MenuToggleButton = (props) => {
   const { getToggleButtonProps, isListbox, getDropdownProps, ref, ariaProps } = useMenuToggleContext();
   return /* @__PURE__ */ jsx12(
     Button,
@@ -2729,18 +2726,17 @@ var MenuToggleButton = ({
         ...ariaProps,
         ...isListbox ? {} : { role: "button", "aria-haspopup": "menu" }
       }),
-      ...rest,
-      children
+      ...props
     }
   );
 };
 
 // src/MenuSearchInput/MenuSearchInput.tsx
-import React11 from "react";
+import React10 from "react";
 import { Input } from "@sproutsocial/seeds-react-input";
 
 // src/hooks/useItemFiltering.tsx
-import React10 from "react";
+import React9 from "react";
 
 // src/utils/downshiftDefaults.ts
 var itemToString = (item) => {
@@ -2760,8 +2756,8 @@ var useItemFiltering = ({
   getShouldFilter = defaultGetShouldFilter,
   setHiddenItemsMap: setHiddenItemsMapProp
 }) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = React10.useState({});
-  const updateFilteredItems = React10.useCallback(
+  const [hiddenItemsMap, setHiddenItemsMap] = React9.useState({});
+  const updateFilteredItems = React9.useCallback(
     ({ inputValue }) => {
       const newHiddenItems = getShouldFilter({ inputValue }) ? allMenuItems.reduce((map, item) => {
         const isItemVisible = getIsItemVisible(item, inputValue);
@@ -2798,11 +2794,11 @@ var MenuSearchInput = ({
     getIsItemVisible,
     setHiddenItemsMap
   });
-  React11.useEffect(() => {
+  React10.useEffect(() => {
     updateFilteredItems({ inputValue: restInputProps.value || "" });
   }, [isOpen, restInputProps.value]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = React11.useCallback(
+  const handleKeyDown = React10.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
@@ -2829,7 +2825,7 @@ var MenuSearchInput = ({
 };
 
 // src/MenuTokenInput.tsx
-import React12 from "react";
+import React11 from "react";
 import styled8 from "styled-components";
 import {
   TokenInput
@@ -2864,7 +2860,7 @@ var MenuTokenInput = ({
     removeSelectedItem,
     setActiveIndex,
     selectedItems = []
-  } = React12.useContext(MenuContext);
+  } = React11.useContext(MenuContext);
   const removeToken = (tokenId) => {
     const tokenToRemove = selectedItems?.find((item) => item.id === tokenId);
     tokenToRemove && removeSelectedItem?.(tokenToRemove);
@@ -2918,7 +2914,7 @@ var MenuTokenInput = ({
 };
 
 // src/MenuSearchTokenInput/MenuSearchTokenInput.tsx
-import React13 from "react";
+import React12 from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var MenuSearchTokenInput = ({
   getIsItemVisible,
@@ -2942,10 +2938,10 @@ var MenuSearchTokenInput = ({
     setHiddenItemsMap
   });
   const controlledValue = value || inputPropsValue !== void 0 ? `${inputPropsValue}` : void 0;
-  const [internalValue, setInternalValue] = React13.useState(
+  const [internalValue, setInternalValue] = React12.useState(
     controlledValue || ""
   );
-  const updateFilteredState = React13.useCallback(
+  const updateFilteredState = React12.useCallback(
     // defaults to an empty string if no value is passed
     (value2 = "") => {
       setInternalValue(value2);
@@ -2953,14 +2949,14 @@ var MenuSearchTokenInput = ({
     },
     [updateFilteredItems]
   );
-  React13.useEffect(() => {
+  React12.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [controlledValue]);
-  React13.useEffect(() => {
+  React12.useEffect(() => {
     updateFilteredState(controlledValue);
   }, [isOpen]);
   const toggleButtonProps = getToggleButtonProps?.() || {};
-  const handleKeyDown = React13.useCallback(
+  const handleKeyDown = React12.useCallback(
     (e) => {
       if (e.key === " ") return;
       toggleButtonProps.onKeyDown?.(e);
@@ -2988,7 +2984,7 @@ var MenuSearchTokenInput = ({
 };
 
 // src/SubmenuItem/SubmenuItem.tsx
-import React14 from "react";
+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";
@@ -3050,17 +3046,17 @@ var SubmenuItem = ({
     itemsMap,
     isOpen: parentIsOpen
   } = useMenuContentContext();
-  const [submenuIsFocused, setSubmenuIsFocused] = React14.useState(false);
-  const [submenuIsOpen, setSubmenuIsOpen] = React14.useState(false);
-  const [submenuIsActive, setSubmenuIsActive] = React14.useState(false);
-  const submenuItemRef = React14.useRef(null);
-  const submenuRef = React14.useRef(null);
+  const [submenuIsFocused, setSubmenuIsFocused] = React13.useState(false);
+  const [submenuIsOpen, setSubmenuIsOpen] = React13.useState(false);
+  const [submenuIsActive, setSubmenuIsActive] = React13.useState(false);
+  const submenuItemRef = React13.useRef(null);
+  const submenuRef = React13.useRef(null);
   const menuContent = menuItems ? getChildrenFromMenuItems({ menuItems, MenuItemComponent }) : menuChildren;
   const item = itemsMap[id] || {
     index: 0,
     id
   };
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     if (highlightedIndex === item.index) {
       !submenuIsOpen && setSubmenuIsOpen(true);
     } else if (submenuIsOpen && highlightedIndex !== -1) {
@@ -3068,7 +3064,7 @@ var SubmenuItem = ({
       setSubmenuIsActive(false);
     }
   }, [highlightedIndex, item.index, submenuIsOpen, setSubmenuIsOpen]);
-  const onSubmenuStateChange = React14.useCallback(
+  const onSubmenuStateChange = React13.useCallback(
     (state) => {
       if (state.isOpen !== void 0) {
         setSubmenuIsOpen(state.isOpen);
@@ -3112,7 +3108,7 @@ var SubmenuItem = ({
       onMenuItemClick();
     }
   };
-  React14.useEffect(() => {
+  React13.useEffect(() => {
     if (document && document.body) {
       document.body.addEventListener("click", onBodyClick, {
         capture: true
@@ -3216,13 +3212,13 @@ var ListboxToggleButton = ({
 };
 
 // src/ActionMenu/ActionMenu.tsx
-import React16, { useEffect as useEffect2 } from "react";
+import React15, { useEffect as useEffect2 } from "react";
 import {
   useSelect as useSelect2
 } from "downshift";
 
 // src/hooks/useDownshiftDefaults.tsx
-import React15 from "react";
+import React14 from "react";
 
 // src/reducers/useComboboxStateReducer.tsx
 import { useCombobox } from "downshift";
@@ -3346,12 +3342,12 @@ var useDownshiftDefaults = ({
   isMulti = false,
   multiSelectProps = {}
 } = {}) => {
-  const [hiddenItemsMap, setHiddenItemsMap] = React15.useState({});
-  const hiddenItemsCount = React15.useMemo(
+  const [hiddenItemsMap, setHiddenItemsMap] = React14.useState({});
+  const hiddenItemsCount = React14.useMemo(
     () => Object.keys(hiddenItemsMap).filter(Boolean).length,
     [hiddenItemsMap]
   );
-  const isItemDisabled = React15.useCallback(
+  const isItemDisabled = React14.useCallback(
     (item) => Boolean(item.disabled || hiddenItemsMap[item.id]),
     [hiddenItemsMap]
   );
@@ -3430,7 +3426,7 @@ var ActionMenu = ({
   const { defaultDownshiftProps, ...restDefaults } = useDownshiftDefaults({
     isCombobox: false
   });
-  const [currentSelectedItem, setCurrentSelectedItem] = React16.useState(null);
+  const [currentSelectedItem, setCurrentSelectedItem] = React15.useState(null);
   const { isOpen, ...useSelectReturnProps } = useSelect2({
     ...defaultDownshiftProps.select,
     items: allMenuItems,
@@ -3618,7 +3614,7 @@ var MultiSelectMenu = ({
 import "react";
 
 // src/Autocomplete/SingleAutocomplete.tsx
-import "react";
+import React18 from "react";
 import { useCombobox as useCombobox2 } from "downshift";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var SingleAutocomplete = ({
@@ -3636,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,
@@ -3654,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,
     {
@@ -3661,11 +3665,9 @@ var SingleAutocomplete = ({
         isListbox: true,
         items: allMenuItems,
         itemToString: itemToString2,
-        isOpen,
-        setHiddenItemsMap,
         ...useComboboxProps,
         ...useComboboxReturnProps,
-        ...restDefaults
+        ...downshiftDefaults
       },
       popoutProps: {
         focusOnContent: false
@@ -3676,7 +3678,7 @@ var SingleAutocomplete = ({
 };
 
 // src/Autocomplete/MultiAutocomplete.tsx
-import React20 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 = ({
@@ -3702,21 +3704,21 @@ var MultiAutocomplete = ({
     menuItems,
     MenuItemComponent
   });
-  const [selectedItems, setSelectedItems] = React20.useState(initialSelectedItems);
-  const [selectedItemIds, setSelectedItemIds] = React20.useState(getSelectedItemIds(initialSelectedItems));
-  const getIsItemVisibleMulti = React20.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 = React20.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
@@ -3727,6 +3729,7 @@ var MultiAutocomplete = ({
       ...useComboboxProps
     }
   });
+  const { setHiddenItemsMap, defaultDownshiftProps, hiddenItemsCount } = downshiftDefaults;
   const { updateFilteredItems } = useItemFiltering({
     allMenuItems,
     itemToString: itemToString2,
@@ -3734,7 +3737,7 @@ var MultiAutocomplete = ({
     getShouldFilter: getShouldFilterMulti,
     setHiddenItemsMap
   });
-  React20.useEffect(() => {
+  React19.useEffect(() => {
     updateFilteredItems({ inputValue: "" });
   }, [selectedItemIds]);
   const useMultipleSelectionReturnProps = useMultipleSelection2({
@@ -3747,7 +3750,7 @@ var MultiAutocomplete = ({
       onSelectedItemsChange && onSelectedItemsChange({ selectedItems: selectedItems2, ...changes });
     }
   });
-  const { isOpen, ...useComboboxReturnProps } = useCombobox3({
+  const useComboboxReturnProps = useCombobox3({
     ...defaultDownshiftProps.combobox,
     items: allMenuItems,
     itemToString: itemToString2,
@@ -3757,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:
@@ -3778,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,
     {
@@ -3790,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
@@ -3814,7 +3822,7 @@ var MultiAutocomplete = ({
 // src/Autocomplete/Autocomplete.tsx
 import { jsx as jsx23 } from "react/jsx-runtime";
 var Autocomplete = ({
-  multiSelect,
+  multiSelect = false,
   ...rest
 }) => {
   if (multiSelect) {
@@ -3926,7 +3934,7 @@ var AutocompleteSelect = (props) => {
 };
 
 // src/NestedMenu/NestedMenu.tsx
-import { useId, useEffect as useEffect5, useState } from "react";
+import { useId, useEffect as useEffect4, useState } from "react";
 import { AnimatePresence as AnimatePresence2, motion as motion3 } from "motion/react";
 import { useSelect as useSelect6 } from "downshift";
 
@@ -3993,7 +4001,7 @@ var useNestedMenuContext = () => {
 };
 
 // src/NestedMenu/NestedMenuContent.tsx
-import { useEffect as useEffect4, useRef } from "react";
+import { useEffect as useEffect3, useRef } from "react";
 import { mergeRefs as mergeRefs3 } from "@sproutsocial/seeds-react-utilities";
 
 // src/NestedMenu/NestedMenuItem.tsx
@@ -4037,7 +4045,7 @@ var NestedMenuContent = ({
   const internalRef = useRef(null);
   const innerRef = mergeRefs3(internalRef, innerRefProp);
   const contentProps = children ? { children } : { menuItems, MenuItemComponent };
-  useEffect4(() => {
+  useEffect3(() => {
     internalRef?.current?.focus();
   }, []);
   const onKeyDown = (e) => {
@@ -4105,7 +4113,7 @@ var NestedMenuHeader = ({
 };
 
 // src/NestedMenu/NestedMenuRoot.tsx
-import React25 from "react";
+import React24 from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var NestedMenuRoot = ({
   children,
@@ -4114,7 +4122,7 @@ var NestedMenuRoot = ({
 }) => {
   const menuContext = useMenu(contextProps);
   const { setActiveMenuContext, selectedMenuPath } = useNestedMenuContext();
-  React25.useEffect(() => {
+  React24.useEffect(() => {
     setActiveMenuContext(menuContext);
   }, [
     selectedMenuPath[selectedMenuPath.length - 1],
@@ -4198,7 +4206,7 @@ var NestedMenu = ({
     ...useSelectReturnProps,
     ...restDefaults
   };
-  useEffect5(() => {
+  useEffect4(() => {
     if (!useSelectReturnProps.isOpen) {
       setHasLoadedOnce(false);
     } else {
@@ -4224,7 +4232,7 @@ var NestedMenu = ({
     setIsAdding(true);
     setSelectedMenuPath((currentPath) => [...currentPath, id]);
   };
-  useEffect5(() => {
+  useEffect4(() => {
     if (selectedMenuPath.length > 0) {
       const newMenuId = selectedMenuPath[selectedMenuPath.length - 1];
       setCurrentMenuId(newMenuId);
@@ -4412,7 +4420,6 @@ export {
   MenuLabel,
   MenuPopout,
   MenuRoot,
-  MenuRootNoPopout,
   MenuSearchInput,
   MenuSearchTokenInput,
   MenuToggleButton,