infinity-ui-elements 1.14.13 → 1.14.15

package/dist/index.esm.js

@@ -1943,7 +1943,7 @@ const Counter = React.forwardRef(({ value, max, size = "medium", color = "neutra
 });
 Counter.displayName = "Counter";
 
-const tooltipVariants = cva("fixed z-50 bg-popup-fill-intense text-action-ink-on-primary-normal rounded-medium border border-popup-outline-subtle flex flex-col  p-4 rounded-xlarge min-w-[200px] max-w-[300px] transition-opacity duration-200", {
+const tooltipVariants = cva("fixed z-[1000] bg-popup-fill-intense text-action-ink-on-primary-normal rounded-medium border border-popup-outline-subtle flex flex-col  p-4 rounded-xlarge min-w-[200px] max-w-[300px] transition-opacity duration-200", {
     variants: {
         isVisible: {
             true: "opacity-100 pointer-events-auto shadow-[0_4px_20px_rgba(0,0,0,0.15)]",
@@ -3297,7 +3297,7 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
     const renderDropdownContent = () => (jsx(DropdownMenu, { ref: ref, items: items, customContent: customContent, customContentClassName: customContentClassName, sectionHeading: sectionHeading, isLoading: isLoading, isEmpty: isEmpty, emptyTitle: emptyTitle, emptyDescription: emptyDescription, emptyLinkText: emptyLinkText, onEmptyLinkClick: onEmptyLinkClick, primaryButtonText: primaryButtonText, secondaryButtonText: secondaryButtonText, onPrimaryClick: onPrimaryClick, onSecondaryClick: onSecondaryClick, showChevron: showChevron, emptyIcon: emptyIcon, disableFooter: disableFooter, showFooter: showFooter, onClose: () => handleOpenChange(false), className: className, width: isMobile ? "full" : sizeMap[size], maxHeight: menuPosition.maxHeight, unstyled: isMobile }));
     return (jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isMobile ? (jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (
             /* Desktop: Regular Dropdown Menu */
-            isOpen && (jsx("div", { ref: menuRef, className: cn("absolute z-50", menuClassName), style: {
+            isOpen && (jsx("div", { ref: menuRef, className: cn("absolute z-[1000]", menuClassName), style: {
                     top: menuPosition.top,
                     bottom: menuPosition.bottom,
                     left: menuPosition.left,
@@ -3828,7 +3828,7 @@ const Select = React.forwardRef(({ className, options = [], value: controlledVal
     const displaySuffix = suffix ? (jsxs(Fragment, { children: [suffix, chevronIcon] })) : (chevronIcon);
     // Render dropdown menu content
     const renderDropdownContent = () => (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 (jsxs("div", { ref: containerRef, className: "relative w-full", children: [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 ? (jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-50 left-0 right-0", dropdownPlacement === "bottom"
+    return (jsxs("div", { ref: containerRef, className: "relative w-full", children: [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 ? (jsx(BottomSheet, { isOpen: isOpen, onClose: () => handleOpenChange(false), title: sectionHeading || label, variant: "default", showDragHandle: true, closeOnOverlayClick: true, closeOnEscape: true, closeOnSwipeDown: true, children: renderDropdownContent() })) : (jsx("div", { ref: dropdownContainerRef, className: cn("absolute z-[1000] left-0 right-0", dropdownPlacement === "bottom"
                     ? "top-full mt-1"
                     : "bottom-full mb-1"), children: renderDropdownContent() })))] }));
 });
@@ -3950,7 +3950,7 @@ const Pagination = React.forwardRef(({ className, currentPage: controlledCurrent
         return [];
     };
     const pageNumbers = getPageNumbers();
-    return (jsxs("div", { ref: ref, className: cn(paginationVariants({ size }), className), ...props, children: [showRowsPerPage && (jsxs("div", { className: "flex items-center gap-3", children: [jsx("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: rowsPerPageLabel }), jsx("div", { className: "w-[80px]", children: jsx(Select, { value: rowsPerPage.toString(), options: rowsPerPageSelectOptions, onChange: handleRowsPerPageChange, size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) })] })), jsxs("div", { className: "flex items-center gap-3 ml-auto", children: [showPrevNext && (jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handlePrevPage, isDisabled: isPrevDisabled, leadingIcon: jsx(Icon, { name: "chevronLeft", size: 16 }), "aria-label": "Previous page", children: prevLabel })), showPageJumper ? (
+    return (jsxs("div", { ref: ref, className: cn("relative z-10", paginationVariants({ size }), className), ...props, children: [showRowsPerPage && (jsxs("div", { className: "hidden md:!flex items-center gap-3", children: [jsx("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: rowsPerPageLabel }), jsx("div", { className: "w-[80px]", children: jsx(Select, { value: rowsPerPage.toString(), options: rowsPerPageSelectOptions, onChange: handleRowsPerPageChange, size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) })] })), jsxs("div", { className: "flex items-center gap-3 md:!ml-auto", children: [showPrevNext && (jsx(Button, { variant: "tertiary", color: "neutral", size: buttonSize, onClick: handlePrevPage, isDisabled: isPrevDisabled, leadingIcon: jsx(Icon, { name: "chevronLeft", size: 16 }), "aria-label": "Previous page", children: prevLabel })), showPageJumper ? (
                     // Show page dropdown selector
                     jsxs("div", { className: "flex items-center gap-3", children: [jsx("div", { className: "w-[80px]", children: jsx(Select, { value: currentPage.toString(), options: pageOptions, onChange: (value) => handlePageChange(typeof value === "string" ? parseInt(value) : value), size: selectSize, isDisabled: isDisabled, menuWidth: "auto" }) }), jsxs("span", { className: "text-surface-ink-neutral-muted whitespace-nowrap", children: [ofLabel, " ", totalPages] })] })) : (
                     // Show numbered page buttons
@@ -4986,7 +4986,7 @@ const SelectTextField = React.forwardRef(({ textValue: controlledTextValue, defa
                                 ? "text-feedback-ink-positive-intense"
                                 : currentValidationState === "negative"
                                     ? "text-feedback-ink-negative-subtle"
-                                    : "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"
+                                    : "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-[1000]", 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"