infinity-ui-elements 1.14.9 → 1.14.11

package/dist/index.js

@@ -4305,7 +4305,7 @@ const defaultFilter = (item, query) => {
     return (item.label?.toLowerCase()?.includes(searchQuery) ||
         (item.description?.toLowerCase()?.includes(searchQuery) ?? false));
 };
-const SearchableDropdown = React__namespace.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) => {
+const SearchableDropdown = React__namespace.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, addNewLabel = "Item", onAddNew, containerClassName, value: controlledValue, defaultValue, onChange, ...textFieldProps }, ref) => {
     // Find the selected item based on value/defaultValue
     const findSelectedItem = React__namespace.useCallback((val) => {
         if (val === undefined || val === "")
@@ -4496,12 +4496,23 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
     }, [items, searchValue, filterFunction]);
     // Add "Add New" option based on showAddNew and showAddNewIfDoesNotMatch props
     const itemsWithAddNew = React__namespace.useMemo(() => {
-        if (!showAddNew || !searchValue) {
+        if (!showAddNew) {
             return filteredItems;
         }
+        // When showAddNewIfDoesNotMatch is false, show "Add New" even without search value
+        const shouldShowAddNew = showAddNewIfDoesNotMatch
+            ? searchValue.length > 0
+            : true;
+        if (!shouldShowAddNew) {
+            return filteredItems;
+        }
+        // Determine the label for "Add New" option
+        const addNewDisplayLabel = searchValue
+            ? `+ Add "${searchValue}"`
+            : `+ Add New ${addNewLabel}`;
         const addNewItem = {
-            value: searchValue,
-            label: `+ Add "${searchValue}"`,
+            value: searchValue || `new-${addNewLabel}`,
+            label: addNewDisplayLabel,
             variant: "primary",
             onClick: () => {
                 if (onAddNew) {
@@ -4536,6 +4547,7 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
     }, [
         showAddNew,
         showAddNewIfDoesNotMatch,
+        addNewLabel,
         searchValue,
         filteredItems,
         onItemSelect,
@@ -4782,7 +4794,7 @@ const Skeleton = React__namespace.forwardRef(({ className, containerClassName, c
 });
 Skeleton.displayName = "Skeleton";
 
-const selectTriggerVariants = classVarianceAuthority.cva("flex items-center gap-1 transition-all font-functional font-size-100 leading-100", {
+const selectTriggerVariants = classVarianceAuthority.cva("flex items-center gap-2 transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "px-2 text-xs",
@@ -4805,7 +4817,7 @@ const selectTriggerVariants = classVarianceAuthority.cva("flex items-center gap-
         isDisabled: false,
     },
 });
-const SelectTextField = React__namespace.forwardRef(({ textValue: controlledTextValue, defaultTextValue, onTextChange, selectOptions = [], selectValue: controlledSelectValue, defaultSelectValue, onSelectChange, selectPlaceholder = "Select", selectTriggerClassName, selectMenuClassName, selectMenuWidth = "auto", selectSectionHeading, selectEmptyTitle = "No options available", selectEmptyDescription = "There are no options to select from.", selectEmptyIcon, position = "suffix", label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", containerClassName, labelClassName, inputClassName, className, ...textFieldProps }, ref) => {
+const SelectTextField = React__namespace.forwardRef(({ textValue: controlledTextValue, defaultTextValue, onTextChange, selectOptions = [], selectValue: controlledSelectValue, defaultSelectValue, onSelectChange, selectPlaceholder = "Select", selectTriggerClassName, selectMenuClassName, selectMenuWidth = "auto", selectSectionHeading, selectEmptyTitle = "No options available", selectEmptyDescription = "There are no options to select from.", selectEmptyIcon, position = "suffix", isSelectDisabled = false, isTextFieldDisabled = false, label, helperText, errorText, successText, validationState = "none", isDisabled = false, isRequired = false, isOptional = false, size = "medium", containerClassName, labelClassName, inputClassName, className, ...textFieldProps }, ref) => {
     const [uncontrolledTextValue, setUncontrolledTextValue] = React__namespace.useState(defaultTextValue || "");
     const [uncontrolledSelectValue, setUncontrolledSelectValue] = React__namespace.useState(defaultSelectValue);
     const [isSelectOpen, setIsSelectOpen] = React__namespace.useState(false);
@@ -4831,6 +4843,10 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
     const selectValue = controlledSelectValue !== undefined
         ? controlledSelectValue
         : uncontrolledSelectValue;
+    // Compute effective disabled states
+    // isDisabled disables both; individual props allow disabling each independently
+    const effectiveSelectDisabled = isDisabled || isSelectDisabled;
+    const effectiveTextFieldDisabled = isDisabled || isTextFieldDisabled;
     // Find the selected option
     const selectedOption = selectOptions.find((opt) => opt.value === selectValue);
     // Determine which helper text to show
@@ -4850,7 +4866,7 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
         }
     };
     const handleSelectOpenChange = (newOpen) => {
-        if (!isDisabled) {
+        if (!effectiveSelectDisabled) {
             setIsSelectOpen(newOpen);
         }
     };
@@ -4978,27 +4994,27 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
     const selectComponent = (jsxRuntime.jsxs("div", { className: cn("relative flex items-stretch h-full"), children: [jsxRuntime.jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
                     size,
                     validationState: currentValidationState,
-                    isDisabled,
+                    isDisabled: effectiveSelectDisabled,
                 }), "h-full flex items-center self-stretch", position === "prefix"
                     ? "border-r border-action-outline-neutral-faded"
-                    : "border-l border-action-outline-neutral-faded", selectTriggerClassName, position === "prefix" ? "pr-4" : "pl-4"), onClick: !isDisabled ? toggleSelectOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isSelectOpen, "aria-disabled": isDisabled, children: [jsxRuntime.jsx("span", { className: cn("text-left truncate max-w-[120px] whitespace-nowrap", !selectedOption && "text-surface-ink-neutral-muted", isDisabled && "text-surface-ink-neutral-disabled"), children: selectedOption?.label || selectPlaceholder }), jsxRuntime.jsx(lucideReact.ChevronDown, { className: cn("shrink-0 transition-transform", size === "small"
+                    : "border-l border-action-outline-neutral-faded", selectTriggerClassName, position === "prefix" ? "pr-4" : "pl-4"), onClick: !effectiveSelectDisabled ? toggleSelectOpen : undefined, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isSelectOpen, "aria-disabled": effectiveSelectDisabled, children: [jsxRuntime.jsx("span", { className: cn("text-left truncate max-w-[120px] whitespace-nowrap", !selectedOption && "text-surface-ink-neutral-muted", effectiveSelectDisabled && "text-surface-ink-neutral-disabled", selectedOption && 'text-surface-ink-neutral-normal'), children: selectedOption?.label || selectPlaceholder }), jsxRuntime.jsx(Icon, { name: 'chevronDown', className: cn("shrink-0 transition-transform mt-1", size === "small"
                             ? "w-3 h-3"
                             : size === "medium"
                                 ? "w-3.5 h-3.5"
-                                : "w-4 h-4", isDisabled
+                                : "w-4 h-4", effectiveSelectDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isSelectOpen, onClose: () => handleSelectOpenChange(false), title: selectSectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50", position === "prefix" ? "left-[-12px]" : "right-[-12px]", dropdownPlacement === "bottom"
+                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !effectiveSelectDisabled && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isSelectOpen, onClose: () => handleSelectOpenChange(false), title: selectSectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50", position === "prefix" ? "left-[-12px]" : "right-[-12px]", dropdownPlacement === "bottom"
                     ? "top-[30px] mt-1"
                     : "bottom-full mb-1"), children: renderDropdownContent() })))] }));
     return (jsxRuntime.jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (jsxRuntime.jsx(FormHeader, { label: label, size: size, isRequired: isRequired, isOptional: isOptional, infoHeading: textFieldProps.infoHeading, infoDescription: textFieldProps.infoDescription, LinkComponent: textFieldProps.LinkComponent, linkText: textFieldProps.linkText, linkHref: textFieldProps.linkHref, onLinkClick: textFieldProps.onLinkClick, htmlFor: textFieldProps.id, className: "mb-2", labelClassName: labelClassName })), jsxRuntime.jsx(TextField, { ref: ref, value: textValue, onChange: handleTextChange, ...(position === "prefix"
                     ? { prefix: selectComponent }
-                    : { suffix: selectComponent }), size: size, validationState: currentValidationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
+                    : { suffix: selectComponent }), size: size, validationState: currentValidationState, isDisabled: effectiveTextFieldDisabled, isRequired: isRequired, isOptional: isOptional, containerClassName: "gap-0", className: className, inputClassName: inputClassName, ...textFieldProps }), jsxRuntime.jsx(FormFooter, { helperText: displayHelperText, validationState: currentValidationState === "none"
                     ? "default"
-                    : currentValidationState, size: size, isDisabled: isDisabled, className: "mt-1" })] }));
+                    : currentValidationState, size: size, isDisabled: effectiveSelectDisabled && effectiveTextFieldDisabled, className: "mt-1" })] }));
 });
 SelectTextField.displayName = "SelectTextField";