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

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-[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", {
+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", {
     variants: {
         isVisible: {
             true: "opacity-100 pointer-events-auto shadow-[0_4px_20px_rgba(0,0,0,0.15)]",
@@ -3153,17 +3153,17 @@ const dropdownVariants = cva("bg-surface-fill-primary-normal border border-surfa
         size: "medium",
     },
 });
-const Dropdown = React.forwardRef(({ className, trigger, items = [], customContent, customContentClassName, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, usePortal = true, ...props }, ref) => {
+const Dropdown = React.forwardRef(({ className, trigger, items = [], customContent, customContentClassName, sectionHeading, isLoading = false, isEmpty = false, emptyTitle = "No Search Results Found", emptyDescription = "Add description of what the user can search for here.", emptyLinkText = "Link to support site", onEmptyLinkClick, primaryButtonText = "Primary", secondaryButtonText = "Secondary", onPrimaryClick, onSecondaryClick, size = "medium", open: controlledOpen, defaultOpen = false, onOpenChange, containerClassName, menuClassName, showChevron = false, emptyIcon, disableFooter = false, showFooter, ...props }, ref) => {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
     const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
     const dropdownRef = React.useRef(null);
     const menuRef = React.useRef(null);
     const [menuPosition, setMenuPosition] = React.useState({
-        top: 0,
-        left: 0,
-        width: 0,
+        top: "100%",
+        bottom: "auto",
+        left: "0",
+        right: "auto",
         maxHeight: "400px",
-        position: "below",
     });
     // Detect if we're on mobile (< 768px)
     const [isMobile, setIsMobile] = React.useState(false);
@@ -3217,36 +3217,62 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
     }, [isOpen]);
     // Calculate and adjust dropdown position to keep it within viewport
     React.useEffect(() => {
-        if (!isOpen || !dropdownRef.current)
+        if (!isOpen || !dropdownRef.current || !menuRef.current)
             return;
         const calculatePosition = () => {
             const triggerRect = dropdownRef.current.getBoundingClientRect();
             const menuElement = menuRef.current;
-            // Get menu dimensions
-            const menuHeight = menuElement?.getBoundingClientRect().height || 400;
-            triggerRect.width; // Match trigger width or use size variant
+            // Get menu dimensions (use a temporary measurement if needed)
+            const menuRect = menuElement.getBoundingClientRect();
+            const menuHeight = menuRect.height || 400; // fallback to max-height
+            const menuWidth = menuRect.width;
             const viewportHeight = window.innerHeight;
+            const viewportWidth = window.innerWidth;
             const spaceBelow = viewportHeight - triggerRect.bottom;
             const spaceAbove = triggerRect.top;
+            const spaceRight = viewportWidth - triggerRect.left;
+            const spaceLeft = triggerRect.right;
             const position = {
-                top: 0,
-                left: triggerRect.left + window.scrollX,
-                width: triggerRect.width,
+                top: "auto",
+                bottom: "auto",
+                left: "auto",
+                right: "auto",
                 maxHeight: "400px",
-                position: "below",
             };
             // Vertical positioning
             if (spaceBelow >= menuHeight || spaceBelow >= spaceAbove) {
                 // Position below trigger
-                position.top = triggerRect.bottom + window.scrollY + 8; // 8px gap
+                position.top = "100%";
+                position.bottom = "auto";
                 position.maxHeight = `${Math.min(400, spaceBelow - 16)}px`;
-                position.position = "below";
             }
             else {
                 // Position above trigger
-                position.top = triggerRect.top + window.scrollY - menuHeight - 8; // 8px gap
+                position.top = "auto";
+                position.bottom = "100%";
                 position.maxHeight = `${Math.min(400, spaceAbove - 16)}px`;
-                position.position = "above";
+            }
+            // Horizontal positioning
+            if (spaceRight >= menuWidth) {
+                // Align to left edge of trigger
+                position.left = "0";
+                position.right = "auto";
+            }
+            else if (spaceLeft >= menuWidth) {
+                // Align to right edge of trigger
+                position.left = "auto";
+                position.right = "0";
+            }
+            else {
+                // Not enough space on either side, try to center or align based on available space
+                if (triggerRect.left + menuWidth > viewportWidth) {
+                    position.left = "auto";
+                    position.right = "0";
+                }
+                else {
+                    position.left = "0";
+                    position.right = "auto";
+                }
             }
             setMenuPosition(position);
         };
@@ -3269,29 +3295,16 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
     };
     // Render dropdown menu content wrapped in BottomSheet for mobile
     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 }));
-    // Render the dropdown menu for desktop
-    const renderDesktopDropdown = () => {
-        if (!isOpen)
-            return null;
-        const dropdownMenu = (jsx("div", { ref: menuRef, className: cn("fixed z-[1000]", menuClassName), style: {
-                top: `${menuPosition.top}px`,
-                left: `${menuPosition.left}px`,
-                width: `${menuPosition.width}px`,
-            }, children: renderDropdownContent() }));
-        // Use portal if enabled, otherwise render inline
-        return usePortal && typeof document !== 'undefined'
-            ? createPortal(dropdownMenu, document.body)
-            : (jsx("div", { ref: menuRef, className: cn("absolute z-[1000]", menuClassName), style: {
-                    top: menuPosition.position === "below" ? "100%" : "auto",
-                    bottom: menuPosition.position === "above" ? "100%" : "auto",
-                    left: "0",
-                    marginTop: menuPosition.position === "below" ? "0.5rem" : "0",
-                    marginBottom: menuPosition.position === "above" ? "0.5rem" : "0",
-                }, children: renderDropdownContent() }));
-    };
     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 with Portal */
-            renderDesktopDropdown())] }));
+            /* Desktop: Regular Dropdown Menu */
+            isOpen && (jsx("div", { ref: menuRef, className: cn("absolute z-50", menuClassName), style: {
+                    top: menuPosition.top,
+                    bottom: menuPosition.bottom,
+                    left: menuPosition.left,
+                    right: menuPosition.right,
+                    marginTop: menuPosition.top === "100%" ? "0.5rem" : "0",
+                    marginBottom: menuPosition.bottom === "100%" ? "0.5rem" : "0",
+                }, children: renderDropdownContent() })))] }));
 });
 Dropdown.displayName = "Dropdown";
 
@@ -3815,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-[1000] 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-50 left-0 right-0", dropdownPlacement === "bottom"
                     ? "top-full mt-1"
                     : "bottom-full mb-1"), children: renderDropdownContent() })))] }));
 });
@@ -4973,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-[1000]", 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"
@@ -5254,13 +5267,13 @@ function TableHeader({ headerGroups, enableRowSelection, enableSelectAll, showHe
         large: 48,
         auto: 56,
     }[size] ?? 40;
-    return (jsx("thead", { className: cn(showHeaderBackground ? "bg-surface-fill-neutral-moderate" : "bg-white", stickyHeader && "sticky top-0 z-[100]"), children: headerGroups.map((headerGroup, groupIndex) => {
+    return (jsx("thead", { className: cn(showHeaderBackground ? "bg-surface-fill-neutral-moderate" : "bg-white", stickyHeader && "sticky top-0 z-[8]"), children: headerGroups.map((headerGroup, groupIndex) => {
             const stickyTop = stickyHeader ? groupIndex * headerHeight : undefined;
-            return (jsxs("tr", { children: [enableRowSelection && enableSelectAll && (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky z-[101]", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), style: { top: stickyTop }, children: jsx(Checkbox, { checked: isAllRowsSelected, isIndeterminate: isSomeRowsSelected, onChange: onToggleAllRows, "aria-label": "Select all rows" }) })), headerGroup.headers.map((header, index) => {
+            return (jsxs("tr", { children: [enableRowSelection && enableSelectAll && (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground && "bg-surface-fill-neutral-moderate", stickyHeader && "sticky z-20", "w-10 rounded-tl-xlarge rounded-bl-xlarge", headerClassName), style: { top: stickyTop }, children: jsx(Checkbox, { checked: isAllRowsSelected, isIndeterminate: isSomeRowsSelected, onChange: onToggleAllRows, "aria-label": "Select all rows" }) })), headerGroup.headers.map((header, index) => {
                         const isFirstColumn = index === 0;
                         const isLastColumn = index === headerGroup.headers.length - 1;
                         return (jsx("th", { className: cn(tableHeaderVariants({ size }), showHeaderBackground &&
-                                "bg-surface-fill-neutral-moderate border-none", stickyHeader && "sticky z-[101]", !enableRowSelection && index === 0 && "rounded-tl-xlarge ", isLastColumn && "rounded-tr-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName), style: {
+                                "bg-surface-fill-neutral-moderate border-none", stickyHeader && "sticky z-20", !enableRowSelection && index === 0 && "rounded-tl-xlarge ", isLastColumn && "rounded-tr-xlarge", header.column.columnDef.meta?.headerClassName, headerClassName), style: {
                                 ...getColumnStyle(header.column.id, {
                                     width: header.getSize(),
                                     minWidth: header.column.columnDef.minSize,