infinity-ui-elements 1.14.20-beta.0 → 1.14.21

package/dist/index.js

@@ -3700,8 +3700,15 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
             setIsOpen(newOpen);
         }
     };
-    const toggleOpen = () => {
-        handleOpenChange(!isOpen);
+    const handleTriggerContainerClick = (event) => {
+        if (isDisabled || isLoading)
+            return;
+        const target = event.target;
+        // Let clear/other explicit buttons and links behave normally.
+        if (target.closest("button") || target.closest("a"))
+            return;
+        // Open the dropdown when clicking anywhere on the trigger area.
+        handleOpenChange(true);
     };
     const handleSelect = (option) => {
         if (controlledValue === undefined) {
@@ -3849,7 +3856,7 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
     const displaySuffix = suffix ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [suffix, chevronIcon] })) : (chevronIcon);
     // Render dropdown menu content
     const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: menuItems, sectionHeading: sectionHeading, isEmpty: options.length === 0, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyIcon: emptyIcon, disableFooter: true, onClose: () => handleOpenChange(false), className: menuClassName, width: isMobile ? "full" : widthStyle, unstyled: isMobile }));
-    return (jsxRuntime.jsxs("div", { ref: containerRef, className: "relative w-full", children: [jsxRuntime.jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: cn("w-full", containerClassName), labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: toggleOpen, onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
+    return (jsxRuntime.jsxs("div", { ref: containerRef, className: "relative w-full", onClickCapture: handleTriggerContainerClick, children: [jsxRuntime.jsx(TextField, { ref: inputRef, label: label, helperText: helperText, errorText: errorText, successText: successText, validationState: validationState, isDisabled: isDisabled, isRequired: isRequired, isOptional: isOptional, isLoading: isLoading, size: size, prefix: displayPrefix, suffix: displaySuffix, showClearButton: showClearButton && hasValue && !isLoading, onClear: handleClear, placeholder: placeholder, value: displayValue, readOnly: true, containerClassName: cn("w-full", containerClassName), labelClassName: labelClassName, className: cn("cursor-pointer", triggerClassName, className), inputClassName: "cursor-pointer", infoHeading: infoHeading, infoDescription: infoDescription, LinkComponent: LinkComponent, linkText: linkText, linkHref: linkHref, onLinkClick: onLinkClick, onClick: () => handleOpenChange(true), onKeyDown: handleKeyDown, role: "combobox", "aria-haspopup": "listbox", "aria-expanded": isOpen, ...props }), isOpen && !isDisabled && !isLoading && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
                     ? "top-full mt-1"
                     : "bottom-full mb-1"), children: renderDropdownContent() })))] }));
 });
@@ -3971,7 +3978,7 @@ const Pagination = React__namespace.forwardRef(({ className, currentPage: contro
         return [];
     };
     const pageNumbers = getPageNumbers();
-    return (jsxRuntime.jsxs("div", { ref: ref, className: cn(paginationVariants({ size }), className), ...props, children: [showRowsPerPage && (jsxRuntime.jsxs("div", { className: "hidden md:!flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: rowsPerPageLabel }), jsxRuntime.jsx("div", { className: "w-[80px]", children: jsxRuntime.jsx(Select, { value: rowsPerPage.toString(), options: rowsPerPageSelectOptions, onChange: handleRowsPerPageChange, size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) })] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:!ml-auto", children: [showPrevNext && (jsxRuntime.jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handlePrevPage, isDisabled: isPrevDisabled, leadingIcon: jsxRuntime.jsx(Icon, { name: "chevronLeft", size: 16 }), "aria-label": "Previous page", children: prevLabel })), showPageJumper ? (
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn("relative z-10", paginationVariants({ size }), className), ...props, children: [showRowsPerPage && (jsxRuntime.jsxs("div", { className: "hidden md:!flex items-center gap-3", children: [jsxRuntime.jsx("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: rowsPerPageLabel }), jsxRuntime.jsx("div", { className: "w-[80px]", children: jsxRuntime.jsx(Select, { value: rowsPerPage.toString(), options: rowsPerPageSelectOptions, onChange: handleRowsPerPageChange, size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) })] })), jsxRuntime.jsxs("div", { className: "flex items-center gap-3 md:!ml-auto", children: [showPrevNext && (jsxRuntime.jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handlePrevPage, isDisabled: isPrevDisabled, leadingIcon: jsxRuntime.jsx(Icon, { name: "chevronLeft", size: 16 }), "aria-label": "Previous page", children: prevLabel })), showPageJumper ? (
                     // Show page dropdown selector
                     jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [jsxRuntime.jsx("div", { className: "w-[80px]", children: jsxRuntime.jsx(Select, { value: currentPage.toString(), options: pageOptions, onChange: (value) => handlePageChange(typeof value === "string" ? parseInt(value) : value), size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) }), jsxRuntime.jsxs("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: [ofLabel, " ", totalPages] })] })) : (
                     // Show numbered page buttons
@@ -4818,6 +4825,13 @@ const selectTriggerVariants = classVarianceAuthority.cva("flex items-center gap-
     },
 });
 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 valuesMatch = React__namespace.useCallback((left, right) => {
+        if (left === right)
+            return true;
+        if (left === undefined || right === undefined)
+            return false;
+        return String(left) === String(right);
+    }, []);
     const [uncontrolledTextValue, setUncontrolledTextValue] = React__namespace.useState(defaultTextValue || "");
     const [uncontrolledSelectValue, setUncontrolledSelectValue] = React__namespace.useState(defaultSelectValue);
     const [isSelectOpen, setIsSelectOpen] = React__namespace.useState(false);
@@ -4847,8 +4861,14 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
     // 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);
+    // Find the selected option (supports number/string equivalence like 1.14 vs "1.14")
+    const selectedOption = selectOptions.find((opt) => valuesMatch(opt.value, selectValue));
+    // Keep uncontrolled default in sync when defaultSelectValue changes
+    React__namespace.useEffect(() => {
+        if (controlledSelectValue === undefined) {
+            setUncontrolledSelectValue(defaultSelectValue);
+        }
+    }, [controlledSelectValue, defaultSelectValue]);
     // Determine which helper text to show
     const displayHelperText = errorText || successText || helperText;
     const currentValidationState = errorText