infinity-ui-elements 1.9.19 → 1.9.20

package/dist/index.js

@@ -3498,10 +3498,22 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
     const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React__namespace.useState("bottom");
+    const [isMobile, setIsMobile] = React__namespace.useState(false);
     const containerRef = React__namespace.useRef(null);
     const dropdownContainerRef = React__namespace.useRef(null);
     const inputRef = React__namespace.useRef(null);
     React__namespace.useImperativeHandle(ref, () => inputRef.current);
+    // Detect if we're on mobile (< 768px)
+    React__namespace.useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        // Check on mount
+        checkMobile();
+        // Add resize listener
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
     const value = controlledValue !== undefined ? controlledValue : uncontrolledValue;
     // Find the selected option
     const selectedOption = options.find((opt) => opt.value === value);
@@ -3658,9 +3670,11 @@ const Select = React__namespace.forwardRef(({ className, options = [], value: co
     // Build the suffix: include both the optional suffix and the chevron icon
     const chevronIcon = (jsxRuntime.jsx(Icon, { name: isOpen ? "chevronUp" : "chevronDown", size: 16, className: "shrink-0 transition-colors" }));
     const displaySuffix = suffix ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [suffix, chevronIcon] })) : (chevronIcon);
-    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 && (jsxRuntime.jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
+    // 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"
                     ? "top-full mt-1"
-                    : "bottom-full mb-1"), children: 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: widthStyle }) }))] }));
+                    : "bottom-full mb-1"), children: renderDropdownContent() })))] }));
 });
 Select.displayName = "Select";
 
@@ -4373,14 +4387,18 @@ const SearchableDropdown = React__namespace.forwardRef(({ className, items = [],
             ? true
             : false, footerLayout: footerLayout, onClose: () => setIsOpen(false), focusedIndex: focusedIndex, className: dropdownClassName, width: isMobile ? "full" : (dropdownWidth === "full" ? "full" : "auto"), unstyled: isMobile }));
     // Mobile: BottomSheet, Desktop: Regular Dropdown
-    const dropdownMenu = showDropdown && (isMobile ? (jsxRuntime.jsx(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsxRuntime.jsx("div", { ref: menuRef, style: {
+    const dropdownMenu = showDropdown && (isMobile ? (jsxRuntime.jsxs(BottomSheet, { isOpen: isOpen, onClose: () => setIsOpen(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: [jsxRuntime.jsx("div", { className: "mb-4", children: jsxRuntime.jsx(TextField, { value: searchValue, onChange: handleSearchChange, onKeyDown: handleKeyDown, containerClassName: "mb-0", placeholder: textFieldProps.placeholder || "Search...", autoFocus: true, ...textFieldProps }) }), renderDropdownContent()] })) : (jsxRuntime.jsx("div", { ref: menuRef, style: {
             position: "absolute",
             top: `${position.top + 8}px`,
             left: `${position.left}px`,
             width: dropdownWidth === "full" ? `${position.width}px` : "auto",
             zIndex: isInsideModal ? 10001 : 9999,
         }, children: renderDropdownContent() })));
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: jsxRuntime.jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps }) }), typeof document !== "undefined" &&
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative", containerClassName), children: [!isMobile && (jsxRuntime.jsx(TextField, { ref: inputRef, value: searchValue, onChange: handleSearchChange, onFocus: handleFocus, onKeyDown: handleKeyDown, containerClassName: "mb-0", ...textFieldProps })), isMobile && (jsxRuntime.jsx(TextField, { ref: inputRef, value: searchValue, onFocus: () => {
+                            if (showOnFocus && searchValue.length >= minSearchLength) {
+                                setIsOpen(true);
+                            }
+                        }, onClick: () => setIsOpen(true), readOnly: true, containerClassName: "mb-0", ...textFieldProps }))] }), typeof document !== "undefined" &&
                 dropdownMenu &&
                 reactDom.createPortal(dropdownMenu, document.body)] }));
 });
@@ -4558,9 +4576,21 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
     const [uncontrolledSelectValue, setUncontrolledSelectValue] = React__namespace.useState(defaultSelectValue);
     const [isSelectOpen, setIsSelectOpen] = React__namespace.useState(false);
     const [dropdownPlacement, setDropdownPlacement] = React__namespace.useState("bottom");
+    const [isMobile, setIsMobile] = React__namespace.useState(false);
     const selectRef = React__namespace.useRef(null);
     const dropdownContainerRef = React__namespace.useRef(null);
     const componentRef = React__namespace.useRef(null);
+    // Detect if we're on mobile (< 768px)
+    React__namespace.useEffect(() => {
+        const checkMobile = () => {
+            setIsMobile(window.innerWidth < 768);
+        };
+        // Check on mount
+        checkMobile();
+        // Add resize listener
+        window.addEventListener('resize', checkMobile);
+        return () => window.removeEventListener('resize', checkMobile);
+    }, []);
     const textValue = controlledTextValue !== undefined
         ? controlledTextValue
         : uncontrolledTextValue;
@@ -4708,6 +4738,8 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
             gap: "gap-3",
         },
     };
+    // Render dropdown menu content
+    const renderDropdownContent = () => (jsxRuntime.jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: isMobile ? "full" : widthStyle, unstyled: isMobile }));
     // Create the select component (prefix or suffix)
     const selectComponent = (jsxRuntime.jsxs("div", { className: cn("relative flex items-stretch h-full"), children: [jsxRuntime.jsxs("div", { ref: selectRef, className: cn(selectTriggerVariants({
                     size,
@@ -4725,9 +4757,9 @@ const SelectTextField = React__namespace.forwardRef(({ textValue: controlledText
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "text-surface-ink-neutral-muted", isSelectOpen && "transform rotate-180") })] }), isSelectOpen && !isDisabled && (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 && !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"
                     ? "top-[30px] mt-1"
-                    : "bottom-full mb-1"), children: jsxRuntime.jsx(DropdownMenu, { items: menuItems, sectionHeading: selectSectionHeading, isEmpty: selectOptions.length === 0, emptyTitle: selectEmptyTitle, emptyDescription: selectEmptyDescription, emptyIcon: selectEmptyIcon, disableFooter: true, onClose: () => handleSelectOpenChange(false), className: selectMenuClassName, width: widthStyle }) }))] }));
+                    : "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"