@aurora-ds/components 1.7.19 → 1.7.20

package/dist/cjs/index.js

@@ -3561,6 +3561,10 @@ const MENU_MIN_WIDTH_PX = 224;
  */
 const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement = 'bottom', }) => {
     const [style, setStyle] = React.useState({});
+    // Stays false until the rAF second pass has run with the real panel dimensions.
+    // Keeps the panel invisible during the initial style={} state and the first
+    // pass (menuHeight = 0) to prevent the position-jump flickering.
+    const [isPositioned, setIsPositioned] = React.useState(false);
     const computePosition = React.useCallback(() => {
         if (!anchorEl) {
             return;
@@ -3641,14 +3645,19 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
         }
         else {
             setStyle({});
+            setIsPositioned(false);
         }
     }, [open, computePosition]);
-    // Second pass: recompute after the panel renders to get actual height/width
+    // Second pass: recompute after the panel renders to get actual height/width,
+    // then mark as positioned so the panel becomes visible.
     React.useEffect(() => {
         if (!open) {
             return;
         }
-        const id = requestAnimationFrame(computePosition);
+        const id = requestAnimationFrame(() => {
+            computePosition();
+            setIsPositioned(true);
+        });
         return () => cancelAnimationFrame(id);
     }, [open, computePosition]);
     // Keep the menu glued to its anchor on scroll (nested containers) and resize.
@@ -3663,7 +3672,7 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
             window.removeEventListener('resize', computePosition);
         };
     }, [open, computePosition]);
-    return { style };
+    return { style: { ...style, visibility: isPositioned ? 'visible' : 'hidden' } };
 };
 
 /** Custom DOM event fired on a submenu trigger item to request it opens. */