infinity-ui-elements 1.14.9 → 1.14.10

package/dist/components/SelectTextField/SelectTextField.d.ts

@@ -67,6 +67,18 @@ export interface SelectTextFieldProps extends Omit<TextFieldProps, "suffix" | "o
      * @default "suffix"
      */
     position?: "prefix" | "suffix";
+    /**
+     * Whether the select dropdown is disabled (independent of text field)
+     * When true, only the select portion is disabled. Use `isDisabled` to disable both.
+     * @default false
+     */
+    isSelectDisabled?: boolean;
+    /**
+     * Whether the text field is disabled (independent of select)
+     * When true, only the text field portion is disabled. Use `isDisabled` to disable both.
+     * @default false
+     */
+    isTextFieldDisabled?: boolean;
 }
 declare const selectTriggerVariants: (props?: ({
     size?: "medium" | "large" | "small" | null | undefined;

package/dist/components/SelectTextField/SelectTextField.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectTextField.d.ts","sourceRoot":"","sources":["../../../src/components/SelectTextField/SelectTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAG9C,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,cAAc,EACd,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CACjD;IACD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;CAChC;AAED,QAAA,MAAM,qBAAqB;;;;mFAyB1B,CAAC;AAEF,eAAO,MAAM,eAAe,+FAiZ3B,CAAC;AAIF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}
+{"version":3,"file":"SelectTextField.d.ts","sourceRoot":"","sources":["../../../src/components/SelectTextField/SelectTextField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,cAAc,CAAC;AAI9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAI9C,MAAM,WAAW,oBACf,SAAQ,IAAI,CACV,cAAc,EACd,QAAQ,GAAG,UAAU,GAAG,OAAO,GAAG,cAAc,CACjD;IACD;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,aAAa,CAAC,EAAE,YAAY,EAAE,CAAC;IAC/B;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC9B;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrC;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;IACxE;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;IAC3C;;OAEG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAClC;;;OAGG;IACH,QAAQ,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IAC/B;;;;OAIG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,QAAA,MAAM,qBAAqB;;;;mFAyB1B,CAAC;AAEF,eAAO,MAAM,eAAe,+FA2Z3B,CAAC;AAIF,OAAO,EAAE,qBAAqB,EAAE,CAAC"}

package/dist/index.esm.js

@@ -5,7 +5,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { PulseLoader, ClipLoader } from 'react-spinners';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { ExternalLink, Calendar, X, ChevronLeft, ChevronRight, Loader2, Search, ChevronDown } from 'lucide-react';
+import { ExternalLink, Calendar, X, ChevronLeft, ChevronRight, Loader2, Search } from 'lucide-react';
 import { createPortal } from 'react-dom';
 import Calendar$1 from 'react-calendar';
 import 'react-calendar/dist/Calendar.css';
@@ -4761,7 +4761,7 @@ const Skeleton = React.forwardRef(({ className, containerClassName, containerSty
 });
 Skeleton.displayName = "Skeleton";
 
-const selectTriggerVariants = cva("flex items-center gap-1 transition-all font-functional font-size-100 leading-100", {
+const selectTriggerVariants = cva("flex items-center gap-2 transition-all font-functional font-size-100 leading-100", {
     variants: {
         size: {
             small: "px-2 text-xs",
@@ -4784,7 +4784,7 @@ const selectTriggerVariants = cva("flex items-center gap-1 transition-all font-f
         isDisabled: false,
     },
 });
-const SelectTextField = React.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.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.useState(defaultTextValue || "");
     const [uncontrolledSelectValue, setUncontrolledSelectValue] = React.useState(defaultSelectValue);
     const [isSelectOpen, setIsSelectOpen] = React.useState(false);
@@ -4810,6 +4810,10 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
     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
@@ -4829,7 +4833,7 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
         }
     };
     const handleSelectOpenChange = (newOpen) => {
-        if (!isDisabled) {
+        if (!effectiveSelectDisabled) {
             setIsSelectOpen(newOpen);
         }
     };
@@ -4957,27 +4961,27 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
     const selectComponent = (jsxs("div", { className: cn("relative flex items-stretch h-full"), children: [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: [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 }), jsx(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: [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 }), 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 ? (jsx(BottomSheet, { isOpen: isSelectOpen, onClose: () => handleSelectOpenChange(false), title: selectSectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (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 ? (jsx(BottomSheet, { isOpen: isSelectOpen, onClose: () => handleSelectOpenChange(false), title: selectSectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (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 (jsxs("div", { ref: componentRef, className: cn("w-full flex flex-col", sizeConfig[size].gap, containerClassName), children: [label && (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 })), 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 }), 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 }), 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";