@aurora-ds/components 1.7.18 → 1.7.20

package/dist/esm/index.js

@@ -3524,12 +3524,12 @@ const MENU_MIN_WIDTH_PX = 224;
  * Computes and continuously updates the `position: fixed` style for a menu panel.
  *
  * Positioning strategy:
- * - `placement="bottom"` (default): the menu opens below the anchor. If it would
- *   overflow the bottom of the viewport, `top` is shifted up so the menu bottom
- *   lands at `viewportHeight - margin` (never going off the top of the screen).
- * - `placement="right"` (submenu): the menu opens to the right of the anchor and
- *   flips to the left when there is no horizontal room. Its `top` aligns with the
- *   anchor top and is clamped to the viewport.
+ * - `placement="bottom"` (default): opens below the anchor; overflows are shifted up.
+ * - `placement="top"`: opens above the anchor; flips to bottom when no room.
+ * - `placement="right"`: opens to the right of the anchor; flips to the left when no room.
+ * - `placement="left"`: opens to the left of the anchor; flips to the right when no room.
+ *
+ * In all cases the vertical position is clamped inside the viewport.
  *
  * Scroll handling: the page scroll is locked while the menu is open (see
  * `MenuPanel`), so the anchor cannot move out from under the menu. As a safety
@@ -3541,6 +3541,10 @@ const MENU_MIN_WIDTH_PX = 224;
  */
 const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement = 'bottom', }) => {
     const [style, setStyle] = 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] = useState(false);
     const computePosition = useCallback(() => {
         if (!anchorEl) {
             return;
@@ -3551,24 +3555,56 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
         const menuWidth = menuEl?.offsetWidth ?? 0;
         const viewportRight = window.innerWidth - VIEWPORT_MARGIN_PX;
         const viewportBottom = window.innerHeight - VIEWPORT_MARGIN_PX;
-        if (placement === 'right') {
+        if (placement === 'right' || placement === 'left') {
             // --- Vertical: align with the anchor top, clamp inside the viewport ---
             let top = anchor.top;
             if (menuHeight > 0 && top + menuHeight > viewportBottom) {
                 top = Math.max(VIEWPORT_MARGIN_PX, viewportBottom - menuHeight);
             }
-            // --- Horizontal: open to the right, flip to the left when no room ---
-            let left = anchor.right + gap;
-            if (menuWidth > 0 && left + menuWidth > viewportRight) {
-                const flippedLeft = anchor.left - gap - menuWidth;
-                left = flippedLeft >= VIEWPORT_MARGIN_PX
-                    ? flippedLeft
-                    : Math.max(VIEWPORT_MARGIN_PX, viewportRight - menuWidth);
+            // --- Horizontal: open to the preferred side, flip to the opposite when no room ---
+            let left;
+            if (placement === 'right') {
+                left = anchor.right + gap;
+                if (menuWidth > 0 && left + menuWidth > viewportRight) {
+                    const flippedLeft = anchor.left - gap - menuWidth;
+                    left = flippedLeft >= VIEWPORT_MARGIN_PX
+                        ? flippedLeft
+                        : Math.max(VIEWPORT_MARGIN_PX, viewportRight - menuWidth);
+                }
+            }
+            else {
+                // placement === 'left'
+                left = anchor.left - gap - menuWidth;
+                if (menuWidth > 0 && left < VIEWPORT_MARGIN_PX) {
+                    const flippedLeft = anchor.right + gap;
+                    left = flippedLeft + menuWidth <= viewportRight
+                        ? flippedLeft
+                        : Math.max(VIEWPORT_MARGIN_PX, viewportRight - menuWidth);
+                }
             }
             setStyle({ top, left, minWidth: minWidth ?? MENU_MIN_WIDTH_PX });
             return;
         }
-        // --- Vertical (bottom) ---
+        if (placement === 'top') {
+            // --- Vertical: open above, flip to bottom when no room ---
+            let top = anchor.top - gap - menuHeight;
+            if (menuHeight > 0 && top < VIEWPORT_MARGIN_PX) {
+                const flippedTop = anchor.bottom + gap;
+                top = flippedTop + menuHeight <= viewportBottom
+                    ? flippedTop
+                    : Math.max(VIEWPORT_MARGIN_PX, viewportBottom - menuHeight);
+            }
+            // --- Horizontal ---
+            const fallbackMinWidth = Math.max(anchor.width, MENU_MIN_WIDTH_PX);
+            const resolvedMinWidth = typeof minWidth === 'number' ? minWidth : fallbackMinWidth;
+            const effectiveWidth = Math.max(menuWidth, resolvedMinWidth);
+            const maxLeft = window.innerWidth - effectiveWidth - VIEWPORT_MARGIN_PX;
+            const left = Math.max(VIEWPORT_MARGIN_PX, Math.min(anchor.left, maxLeft));
+            setStyle({ top, left, minWidth: minWidth ?? fallbackMinWidth });
+            return;
+        }
+        // --- placement === 'bottom' ---
+        // --- Vertical ---
         const preferredTop = anchor.bottom + gap;
         let top = preferredTop;
         if (menuHeight > 0 && preferredTop + menuHeight > viewportBottom) {
@@ -3589,14 +3625,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.
     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.
@@ -3611,7 +3652,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. */
@@ -4092,7 +4133,7 @@ const MenuItem = ({ ref, label, icon, iconColor, role = 'menuitem', checked, sel
     const isOption = role === 'option';
     const isHighlighted = isCheckable ? Boolean(checked) : Boolean(selected);
     const { liRef, mergedRef, submenuOpen, handleClick, scheduleOpen, scheduleClose, clearTimers, closeSubmenu, } = useMenuItem({ ref, role, hasSubmenu, disabled, onClick, closeOnClick });
-    return (jsxs(Fragment$1, { children: [jsxs("li", { ref: mergedRef, role: role, "aria-checked": isCheckable ? Boolean(checked) : undefined, "aria-selected": isOption ? Boolean(selected) : undefined, "aria-disabled": disabled, "aria-haspopup": hasSubmenu ? 'menu' : undefined, "aria-expanded": hasSubmenu ? submenuOpen : undefined, "data-selected": isHighlighted || undefined, "data-focused": focused || undefined, "data-disabled": disabled || undefined, className: MENU_ITEM_STYLES.root({ size }), onClick: handleClick, onMouseEnter: hasSubmenu && !disabled ? scheduleOpen : undefined, onMouseLeave: hasSubmenu ? scheduleClose : undefined, ...rest, children: [isCheckable && (jsxs("span", { className: MENU_ITEM_STYLES.indicator, "aria-hidden": true, children: [checked && role === 'menuitemcheckbox' && (jsx(Icon, { icon: CheckIcon, size: 'sm', strokeColor: 'primaryMain' })), checked && role === 'menuitemradio' && (jsx("span", { className: MENU_ITEM_STYLES.radioDot }))] })), icon !== undefined && (jsx(Icon, { icon: icon, size: 'sm', strokeColor: iconColor ?? (isHighlighted ? 'primaryMain' : 'textSecondary') })), jsx(Text, { variant: 'span', fontSize: 'sm', className: MENU_ITEM_STYLES.label, children: label }), hasSubmenu && (jsx("span", { className: MENU_ITEM_STYLES.submenuChevron, "aria-hidden": true, children: jsx(Icon, { icon: ChevronRightIcon, size: 'sm', strokeColor: 'textTertiary' }) }))] }), hasSubmenu && (jsx(MenuPanel, { open: submenuOpen, onClose: () => closeSubmenu(true), onArrowLeft: () => closeSubmenu(true), anchorEl: liRef.current, placement: submenuPlacement, isSubmenu: true, "aria-label": label, onMouseEnter: clearTimers, onMouseLeave: scheduleClose, children: submenu }))] }));
+    return (jsxs(Fragment$1, { children: [jsxs("li", { ref: mergedRef, role: role, "aria-checked": isCheckable ? Boolean(checked) : undefined, "aria-selected": isOption ? Boolean(selected) : undefined, "aria-disabled": disabled, "aria-haspopup": hasSubmenu ? 'menu' : undefined, "aria-expanded": hasSubmenu ? submenuOpen : undefined, "data-selected": isHighlighted || undefined, "data-focused": focused || undefined, "data-disabled": disabled || undefined, className: MENU_ITEM_STYLES.root({ size }), onClick: handleClick, onMouseEnter: hasSubmenu && !disabled ? scheduleOpen : undefined, onMouseLeave: hasSubmenu ? scheduleClose : undefined, ...rest, children: [isCheckable && (jsxs("span", { className: MENU_ITEM_STYLES.indicator, "aria-hidden": true, children: [checked && role === 'menuitemcheckbox' && (jsx(Icon, { icon: CheckIcon, size: size === 'default' ? 'sm' : 'md', strokeColor: 'primaryMain' })), checked && role === 'menuitemradio' && (jsx("span", { className: MENU_ITEM_STYLES.radioDot }))] })), icon !== undefined && (jsx(Icon, { icon: icon, size: 'sm', strokeColor: iconColor ?? (isHighlighted ? 'primaryMain' : 'textSecondary') })), jsx(Text, { variant: 'span', fontSize: 'sm', className: MENU_ITEM_STYLES.label, children: label }), hasSubmenu && (jsx("span", { className: MENU_ITEM_STYLES.submenuChevron, "aria-hidden": true, children: jsx(Icon, { icon: ChevronRightIcon, size: 'sm', strokeColor: 'textTertiary' }) }))] }), hasSubmenu && (jsx(MenuPanel, { open: submenuOpen, onClose: () => closeSubmenu(true), onArrowLeft: () => closeSubmenu(true), anchorEl: liRef.current, placement: submenuPlacement, isSubmenu: true, "aria-label": label, onMouseEnter: clearTimers, onMouseLeave: scheduleClose, children: submenu }))] }));
 };
 MenuItem.displayName = 'MenuItem';