infinity-ui-elements 1.9.25 → 1.9.26

package/dist/index.js

@@ -3184,12 +3184,14 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
     const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
     const dropdownRef = React__namespace.useRef(null);
     const menuRef = React__namespace.useRef(null);
+    const VIEWPORT_PADDING = 8;
+    const MENU_MAX_HEIGHT = 400;
     const [menuPosition, setMenuPosition] = React__namespace.useState({
         top: "100%",
         bottom: "auto",
         left: "0",
         right: "auto",
-        maxHeight: "400px",
+        maxHeight: `${MENU_MAX_HEIGHT}px`,
     });
     // Detect if we're on mobile (< 768px)
     const [isMobile, setIsMobile] = React__namespace.useState(false);
@@ -3248,68 +3250,56 @@ const Dropdown = React__namespace.forwardRef(({ className, trigger, items = [],
         const calculatePosition = () => {
             const triggerRect = dropdownRef.current.getBoundingClientRect();
             const menuElement = menuRef.current;
-            // Get menu dimensions (use a temporary measurement if needed)
+            const currentContainerRect = dropdownRef.current.getBoundingClientRect();
             const menuRect = menuElement.getBoundingClientRect();
-            const menuHeight = menuRect.height || 400; // fallback to max-height
-            const menuWidth = menuRect.width;
+            const menuHeight = menuRect.height || MENU_MAX_HEIGHT;
+            const menuWidth = menuRect.width || 320; // fallback for initial render (w-80 = 320px)
             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 spaceBelow = viewportHeight - triggerRect.bottom - VIEWPORT_PADDING;
+            const spaceAbove = triggerRect.top - VIEWPORT_PADDING;
             const position = {
-                top: "auto",
-                bottom: "auto",
-                left: "auto",
-                right: "auto",
-                maxHeight: "400px",
+                maxHeight: `${MENU_MAX_HEIGHT}px`,
             };
-            // Vertical positioning
+            // Vertical positioning: prefer below, flip above if not enough space
             if (spaceBelow >= menuHeight || spaceBelow >= spaceAbove) {
-                // Position below trigger
                 position.top = "100%";
                 position.bottom = "auto";
-                position.maxHeight = `${Math.min(400, spaceBelow - 16)}px`;
+                position.maxHeight = `${Math.min(MENU_MAX_HEIGHT, Math.max(0, spaceBelow))}px`;
             }
             else {
-                // Position above trigger
                 position.top = "auto";
                 position.bottom = "100%";
-                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.maxHeight = `${Math.min(MENU_MAX_HEIGHT, Math.max(0, spaceAbove))}px`;
             }
+            // Horizontal: clamp menu left so it stays within viewport
+            const minMenuLeft = VIEWPORT_PADDING;
+            const maxMenuLeft = viewportWidth - menuWidth - VIEWPORT_PADDING;
+            const desiredMenuLeft = Math.max(minMenuLeft, Math.min(maxMenuLeft, triggerRect.left));
+            position.left = `${desiredMenuLeft - currentContainerRect.left}px`;
+            position.right = "auto";
             setMenuPosition(position);
         };
-        // Calculate position after menu is rendered
-        calculatePosition();
-        // Recalculate on window resize or scroll
-        const handleResize = () => calculatePosition();
-        const handleScroll = () => calculatePosition();
+        // Run after layout so menu dimensions are correct (double rAF for paint)
+        let cancelled = false;
+        const scheduleUpdate = () => {
+            requestAnimationFrame(() => {
+                requestAnimationFrame(() => {
+                    if (!cancelled &&
+                        dropdownRef.current &&
+                        menuRef.current) {
+                        calculatePosition();
+                    }
+                });
+            });
+        };
+        scheduleUpdate();
+        const handleResize = () => scheduleUpdate();
+        const handleScroll = () => scheduleUpdate();
         window.addEventListener("resize", handleResize);
         window.addEventListener("scroll", handleScroll, true);
         return () => {
+            cancelled = true;
             window.removeEventListener("resize", handleResize);
             window.removeEventListener("scroll", handleScroll, true);
         };