@aurora-ds/components 1.7.17 → 1.7.19

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
@@ -3551,24 +3551,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) {
@@ -3645,7 +3677,9 @@ const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom',
         }
         return Array.from(panelRef.current.querySelectorAll('[role^="menuitem"]:not([data-disabled]), [role="option"]:not([data-disabled])')).filter((el) => el.closest('[data-menu-panel]') === panelRef.current);
     }, []);
-    // On open: focus panel, initialise focusedIndex to checked/selected item (or 0)
+    // On open: focus panel, pre-select a checked/selected item if any.
+    // When nothing is pre-selected, leave focusedIndex at -1 so no item appears
+    // highlighted on mouse-open — the first ArrowDown/Up will start navigation.
     useEffect(() => {
         if (!open) {
             setFocusedIndex(-1);
@@ -3655,7 +3689,7 @@ const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom',
             panelRef.current?.focus();
             const options = getOptions();
             const selectedIdx = options.findIndex((el) => el.getAttribute('aria-checked') === 'true' || el.getAttribute('data-selected') !== null);
-            setFocusedIndex(selectedIdx >= 0 ? selectedIdx : 0);
+            setFocusedIndex(selectedIdx >= 0 ? selectedIdx : -1);
         });
         return () => cancelAnimationFrame(raf);
     }, [open, getOptions]);
@@ -3700,7 +3734,11 @@ const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom',
             e.preventDefault();
             setFocusedIndex((prev) => {
                 const count = getOptions().length;
-                return count === 0 ? prev : (prev - 1 + count) % count;
+                if (count === 0) {
+                    return prev;
+                }
+                // prev === -1 means no item focused yet → jump to last item
+                return prev <= 0 ? count - 1 : prev - 1;
             });
         },
         ArrowRight: (e) => {
@@ -4086,7 +4124,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';