infinity-ui-elements 1.14.16 → 1.14.18

package/dist/index.js

@@ -3174,17 +3174,17 @@ const dropdownVariants = classVarianceAuthority.cva("bg-surface-fill-primary-nor
         size: "medium",
     },
 });
-const Dropdown = React__namespace.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 Dropdown = React__namespace.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 [uncontrolledOpen, setUncontrolledOpen] = React__namespace.useState(defaultOpen);
     const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
     const dropdownRef = React__namespace.useRef(null);
     const menuRef = React__namespace.useRef(null);
     const [menuPosition, setMenuPosition] = React__namespace.useState({
-        top: "100%",
-        bottom: "auto",
-        left: "0",
-        right: "auto",
+        top: 0,
+        left: 0,
+        width: 0,
         maxHeight: "400px",
+        position: "below",
     });
     // Detect if we're on mobile (< 768px)
     const [isMobile, setIsMobile] = React__namespace.useState(false);
@@ -3238,62 +3238,36 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
     }, [isOpen]);
     // Calculate and adjust dropdown position to keep it within viewport
     React__namespace.useEffect(() => {
-        if (!isOpen || !dropdownRef.current || !menuRef.current)
+        if (!isOpen || !dropdownRef.current)
             return;
         const calculatePosition = () => {
             const triggerRect = dropdownRef.current.getBoundingClientRect();
             const menuElement = menuRef.current;
-            // 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;
+            // Get menu dimensions
+            const menuHeight = menuElement?.getBoundingClientRect().height || 400;
+            triggerRect.width; // Match trigger width or use size variant
             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: "auto",
-                bottom: "auto",
-                left: "auto",
-                right: "auto",
+                top: 0,
+                left: triggerRect.left + window.scrollX,
+                width: triggerRect.width,
                 maxHeight: "400px",
+                position: "below",
             };
             // Vertical positioning
             if (spaceBelow >= menuHeight || spaceBelow >= spaceAbove) {
                 // Position below trigger
-                position.top = "100%";
-                position.bottom = "auto";
+                position.top = triggerRect.bottom + window.scrollY + 8; // 8px gap
                 position.maxHeight = `${Math.min(400, spaceBelow - 16)}px`;
+                position.position = "below";
             }
             else {
                 // Position above trigger
-                position.top = "auto";
-                position.bottom = "100%";
+                position.top = triggerRect.top + window.scrollY - menuHeight - 8; // 8px gap
                 position.maxHeight = `${Math.min(400, spaceAbove - 16)}px`;
-            }
-            // 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";
-                }
+                position.position = "above";
             }
             setMenuPosition(position);
         };
@@ -3316,16 +3290,29 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
     };
     // Render dropdown menu content wrapped in BottomSheet for mobile
     const renderDropdownContent = () => (jsxRuntime.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 = (jsxRuntime.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'
+            ? reactDom.createPortal(dropdownMenu, document.body)
+            : (jsxRuntime.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 (jsxRuntime.jsxs("div", { ref: dropdownRef, className: cn("relative inline-block", containerClassName), ...props, children: [trigger && (jsxRuntime.jsx("div", { onClick: toggleOpen, className: "cursor-pointer", children: trigger })), isMobile ? (jsxRuntime.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 && (jsxRuntime.jsx("div", { ref: menuRef, className: cn("absolute z-[1000]", 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() })))] }));
+            /* Desktop: Regular Dropdown Menu with Portal */
+            renderDesktopDropdown())] }));
 });
 Dropdown.displayName = "Dropdown";