infinity-ui-elements 1.8.61 → 1.8.62

package/dist/index.js

@@ -98,6 +98,14 @@ const iconRegistry = {
     chevronUp: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12 11.2727L6.55555 17L5 15.3637L12 8L19 15.3637L17.4445 17L12 11.2727Z" fill="#081416"/>
 </svg>
+`,
+    chevronLeft: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2727 12L17 17.4445L15.3637 19L8 12L15.3637 5L17 6.55555L11.2727 12Z" fill="#081416"/>
+</svg>
+`,
+    chevronRight: `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.7272 12L8 6.55555L9.63635 5L17 12L9.63635 19L8 17.4445L13.7272 12Z" fill="#081416"/>
+</svg>
 `,
 };
 const Icon = ({ name, size = 24, className = "", style = {}, ...props }) => {
@@ -2864,8 +2872,6 @@ const textFieldVariants = classVarianceAuthority.cva("relative flex items-center
         validationState: {
             none: `
         border-action-outline-neutral-faded 
-        hover:border-action-outline-neutral-faded-hover 
-        hover:bg-action-fill-neutral-faded-hover
         focus-within:border-action-outline-primary-default 
         focus-within:bg-white!
         focus-within:ring-2 
@@ -2890,11 +2896,16 @@ const textFieldVariants = classVarianceAuthority.cva("relative flex items-center
         cursor-not-allowed`,
             false: "",
         },
+        isReadOnly: {
+            true: "",
+            false: "hover:border-action-outline-neutral-faded-hover hover:bg-action-fill-neutral-faded-hover",
+        },
     },
     defaultVariants: {
         size: "medium",
         validationState: "none",
         isDisabled: false,
+        isReadOnly: false,
     },
 });
 const TextField = React__namespace.forwardRef(({ label, helperText, errorText, successText, size = "medium", validationState = "none", isDisabled = false, isLoading = false, isRequired = false, isOptional = false, prefix, suffix, showClearButton = false, infoDescription, infoHeading, LinkComponent, linkText, linkHref, onLinkClick, onClear, containerClassName, labelClassName, inputClassName, className, value, onChange, ...props }, ref) => {
@@ -2944,13 +2955,14 @@ const TextField = React__namespace.forwardRef(({ label, helperText, errorText, s
                     size,
                     validationState: currentValidationState,
                     isDisabled,
+                    isReadOnly: props.readOnly,
                 }), isLoading && "text-field-loading", className), children: [prefix && (jsxRuntime.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 })), jsxRuntime.jsx("input", { ref: ref, value: inputValue, onChange: handleChange, disabled: isDisabled, required: isRequired, className: cn("flex-1 bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled", inputClassName), ...props }), showClearButton && hasValue && !isDisabled && (jsxRuntime.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: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
+                                    : "text-surface-ink-neutral-muted"), children: prefix })), jsxRuntime.jsx("input", { ref: ref, value: inputValue, onChange: handleChange, disabled: isDisabled, required: isRequired, className: cn("w-full bg-transparent border-none outline-none text-surface-ink-neutral-normal placeholder:text-surface-ink-neutral-muted disabled:cursor-not-allowed disabled:text-surface-ink-neutral-disabled", inputClassName), ...props }), showClearButton && hasValue && !isDisabled && (jsxRuntime.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: jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M12 4L4 12M4 4L12 12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) }) })), suffix && (jsxRuntime.jsx("span", { className: cn("shrink-0 flex items-center", isDisabled
                             ? "text-surface-ink-neutral-disabled"
                             : currentValidationState === "positive"
                                 ? "text-feedback-ink-positive-intense"
@@ -3126,7 +3138,7 @@ 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", 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: 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"
+    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"
                     ? "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 }) }))] }));
 });
@@ -3248,12 +3260,12 @@ 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: "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 ml-auto", children: [showPrevNext && (jsxRuntime.jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handlePrevPage, isDisabled: isPrevDisabled, leadingIcon: jsxRuntime.jsx(lucideReact.ChevronLeft, { className: "w-4 h-4" }), "aria-label": "Previous page", children: prevLabel })), showPageJumper ? (
+    return (jsxRuntime.jsxs("div", { ref: ref, className: cn(paginationVariants({ size }), className), ...props, children: [showRowsPerPage && (jsxRuntime.jsxs("div", { className: "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 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
                     showPageNumber &&
-                        pageNumbers.length > 0 && (jsxRuntime.jsx(ButtonGroup, { variant: "separated", size: buttonSize, isDisabled: isDisabled, value: currentPage, onChange: (value) => handlePageChange(value), children: pageNumbers.map((pageNum) => (jsxRuntime.jsx(Button, { value: pageNum, variant: "tertiary", color: "primary", "aria-label": `Page ${pageNum}`, "aria-current": pageNum === currentPage ? "page" : undefined, children: pageNum }, pageNum))) }))), showPrevNext && (jsxRuntime.jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handleNextPage, isDisabled: isNextDisabled, trailingIcon: jsxRuntime.jsx(lucideReact.ChevronRight, { className: "w-4 h-4" }), "aria-label": "Next page", children: nextLabel }))] })] }));
+                        pageNumbers.length > 0 && (jsxRuntime.jsx(ButtonGroup, { variant: "separated", size: buttonSize, isDisabled: isDisabled, value: currentPage, onChange: (value) => handlePageChange(value), children: pageNumbers.map((pageNum) => (jsxRuntime.jsx(Button, { value: pageNum, variant: "tertiary", color: "primary", "aria-label": `Page ${pageNum}`, "aria-current": pageNum === currentPage ? "page" : undefined, children: pageNum }, pageNum))) }))), showPrevNext && (jsxRuntime.jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handleNextPage, isDisabled: isNextDisabled, trailingIcon: jsxRuntime.jsx(Icon, { name: "chevronRight", size: 16 }), "aria-label": "Next page", children: nextLabel }))] })] }));
 });
 Pagination.displayName = "Pagination";