infinity-ui-elements 1.8.27 → 1.8.29

package/dist/index.esm.js

@@ -2597,7 +2597,7 @@ const selectVariants = cva("relative flex items-center gap-2 border rounded-larg
         isDisabled: false,
     },
 });
-const Select = React.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
+const Select = React.forwardRef(({ className, options = [], value: controlledValue, defaultValue, onChange, placeholder = "Select an option", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, isLoading = false, size = "medium", prefix, suffix, showClearButton = false, onClear, showLeadingIcon = false, containerClassName, labelClassName, triggerClassName, menuClassName, menuWidth = "full", sectionHeading, emptyTitle = "No options available", emptyDescription = "There are no options to select from.", emptyIcon, infoHeading, infoDescription, LinkComponent, linkText, linkHref, onLinkClick, ...props }, ref) => {
     const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
     const [isOpen, setIsOpen] = React.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React.useState("bottom");
@@ -2776,13 +2776,19 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
                     size,
                     validationState: currentValidationState,
                     isDisabled,
-                }), "relative w-full cursor-pointer", className), onClick: !isDisabled && !isLoading ? toggleOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [prefix && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                }), "relative w-full cursor-pointer", className), onClick: !isDisabled && !isLoading ? toggleOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, "aria-disabled": isDisabled, ...props, children: [prefix ? (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading ? "Loading..." : selectedOption?.label || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                                    : "text-surface-ink-neutral-muted"), children: prefix })) : showLeadingIcon && selectedOption?.leadingIcon ? (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                            ? "text-surface-ink-neutral-disabled"
+                            : currentValidationState === "positive"
+                                ? "text-feedback-ink-positive-intense"
+                                : currentValidationState === "negative"
+                                    ? "text-feedback-ink-negative-subtle"
+                                    : "text-surface-ink-neutral-muted"), children: selectedOption.leadingIcon })) : null, jsx("span", { className: cn("flex-1 text-left truncate", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: isLoading ? "Loading..." : selectedOption?.label || placeholder }), showClearButton && hasValue && !isDisabled && !isLoading && (jsx("button", { type: "button", onClick: handleClear, className: "shrink-0 flex items-center justify-center text-surface-ink-neutral-muted hover:text-surface-ink-neutral-normal transition-colors", tabIndex: -1, children: jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && !showClearButton && (jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
@@ -3201,8 +3207,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 +3234,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 +3302,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 +3326,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();
     };