infinity-ui-elements 1.8.27 → 1.8.28

package/dist/index.esm.js

@@ -3201,8 +3201,21 @@ const defaultFilter = (item, query) => {
     return (item.label?.toLowerCase()?.includes(searchQuery) ||
         (item.description?.toLowerCase()?.includes(searchQuery) ?? false));
 };
-const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHeading, isLoading = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText, secondaryButtonText, onPrimaryClick, onSecondaryClick, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, showAddNew = false, showAddNewIfDoesNotMatch = true, onAddNew, containerClassName, ...textFieldProps }, ref) => {
-    const [uncontrolledSearchValue, setUncontrolledSearchValue] = React.useState(defaultSearchValue);
+const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHeading, isLoading = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText, secondaryButtonText, onPrimaryClick, onSecondaryClick, dropdownWidth = "full", showChevron = false, emptyIcon, disableFooter = false, footerLayout = "horizontal", onSearchChange, onItemSelect, filterFunction = defaultFilter, searchValue: controlledSearchValue, defaultSearchValue = "", dropdownClassName, minSearchLength = 0, showOnFocus = true, showAddNew = false, showAddNewIfDoesNotMatch = true, onAddNew, containerClassName, value: controlledValue, defaultValue, onChange, ...textFieldProps }, ref) => {
+    // Find the selected item based on value/defaultValue
+    const findSelectedItem = React.useCallback((val) => {
+        if (val === undefined || val === "")
+            return undefined;
+        return items.find((item) => item.value === val);
+    }, [items]);
+    // Initialize uncontrolled value state
+    const initialValue = controlledValue !== undefined ? controlledValue : defaultValue;
+    const initialSelectedItem = findSelectedItem(initialValue);
+    const initialSearchValue = initialSelectedItem
+        ? initialSelectedItem.label
+        : defaultSearchValue;
+    const [uncontrolledSearchValue, setUncontrolledSearchValue] = React.useState(initialSearchValue);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [focusedIndex, setFocusedIndex] = React.useState(-1);
     const [isInsideModal, setIsInsideModal] = React.useState(false);
@@ -3215,6 +3228,33 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
         width: 0,
     });
     React.useImperativeHandle(ref, () => inputRef.current);
+    // Determine current value (controlled or uncontrolled)
+    const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
+    // Sync search value when value prop changes
+    React.useEffect(() => {
+        const selectedItem = findSelectedItem(value);
+        if (selectedItem) {
+            const newSearchValue = selectedItem.label;
+            if (controlledSearchValue === undefined) {
+                setUncontrolledSearchValue(newSearchValue);
+            }
+            // If controlled, we still need to call onSearchChange to notify parent
+            // but only if the search value is different
+            if (controlledSearchValue !== undefined &&
+                controlledSearchValue !== newSearchValue) {
+                onSearchChange?.(newSearchValue);
+            }
+        }
+        else if (value === undefined || value === "") {
+            // If value is cleared, clear search value too
+            if (controlledSearchValue === undefined) {
+                setUncontrolledSearchValue("");
+            }
+            else {
+                onSearchChange?.("");
+            }
+        }
+    }, [value, findSelectedItem, controlledSearchValue, onSearchChange]);
     // Check if dropdown is inside a modal
     React.useEffect(() => {
         if (isOpen && dropdownRef.current) {
@@ -3256,6 +3296,15 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
             setUncontrolledSearchValue(newValue);
         }
         onSearchChange?.(newValue);
+        // If user is typing and the search value no longer matches the selected item's label,
+        // clear the value to indicate no item is selected
+        const selectedItem = findSelectedItem(value);
+        if (selectedItem && selectedItem.label !== newValue) {
+            if (controlledValue === undefined) {
+                setUncontrolledValue(undefined);
+            }
+            onChange?.(undefined, undefined);
+        }
         // Show dropdown if minimum search length is met
         if (newValue.length >= minSearchLength) {
             setIsOpen(true);
@@ -3271,9 +3320,19 @@ const SearchableDropdown = React.forwardRef(({ className, items = [], sectionHea
     };
     const handleItemSelect = (item) => {
         onItemSelect?.(item);
+        // Update search value
         if (controlledSearchValue === undefined) {
             setUncontrolledSearchValue(item.label);
         }
+        else {
+            onSearchChange?.(item.label);
+        }
+        // Update value (controlled or uncontrolled)
+        if (controlledValue === undefined) {
+            setUncontrolledValue(item.value);
+        }
+        // Call onChange callback
+        onChange?.(item.value, item);
         setIsOpen(false);
         inputRef.current?.focus();
     };