infinity-ui-elements 1.9.25 → 1.9.26

package/dist/components/Dropdown/Dropdown.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGrE,QAAA,MAAM,gBAAgB;;mFAcrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,sFA0RpB,CAAC;AAIF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAGrE,QAAA,MAAM,gBAAgB;;mFAcrB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,WAAW,aACf,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,UAAU,CAAC;IAC9D;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,EAAE,CAAC;IACvB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC;;OAEG;IACH,sBAAsB,CAAC,EAAE,MAAM,CAAC;IAChC;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B;;OAEG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;OAEG;IACH,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;OAEG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,QAAQ,sFA4RpB,CAAC;AAIF,OAAO,EAAE,gBAAgB,EAAE,CAAC"}

package/dist/index.esm.js

@@ -3163,12 +3163,14 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
     const isOpen = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen;
     const dropdownRef = React.useRef(null);
     const menuRef = React.useRef(null);
+    const VIEWPORT_PADDING = 8;
+    const MENU_MAX_HEIGHT = 400;
     const [menuPosition, setMenuPosition] = React.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.useState(false);
@@ -3227,68 +3229,56 @@ const Dropdown = React.forwardRef(({ className, trigger, items = [], customConte
         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);
         };