@aurora-ds/components 1.7.21 → 1.8.1

package/dist/esm/index.js

@@ -3652,7 +3652,13 @@ const useMenuPosition = ({ anchorEl, open, menuRef, minWidth, gap = 4, placement
             window.removeEventListener('resize', computePosition);
         };
     }, [open, computePosition]);
-    return { style: { ...style, visibility: isPositioned ? 'visible' : 'hidden' } };
+    // Hide the panel until it is correctly positioned to avoid the position-jump
+    // flicker. `opacity` (rather than `visibility`/`display`) is used so the panel
+    // stays in the accessibility tree and remains interactive — only its paint is
+    // deferred for a single frame.
+    return {
+        style: isPositioned ? style : { ...style, opacity: 0 },
+    };
 };
 
 /** Custom DOM event fired on a submenu trigger item to request it opens. */
@@ -3663,70 +3669,88 @@ const OPEN_SUBMENU_EVENT = 'menu:open-submenu';
  * item can close the whole menu.
  */
 const MenuContext = createContext({});
+/**
+ * Scoped per `MenuPanel`: shares the keyboard-focused item id with that panel's
+ * items only. Nested submenus provide their own value, so each panel manages its
+ * own roving focus independently.
+ */
+const MenuNavigationContext = createContext({});
 
+/** CSS selector matching the focusable items of a menu/listbox panel. */
+const ITEM_SELECTOR = '[role^="menuitem"]:not([data-disabled]), [role="option"]:not([data-disabled])';
 /**
  * Business logic for a menu panel: positioning, roving keyboard navigation
- * (Arrow/Home/End/Enter/Space), Escape-to-close, opening submenus (ArrowRight),
- * pausing keyboard while a descendant submenu is open, and keeping the
- * `data-focused` attribute in sync with the active item. Uses the WAI-ARIA
+ * (Arrow/Home/End/Enter/Space), Escape-to-close, opening submenus (ArrowRight)
+ * and pausing keyboard while a descendant submenu is open. Uses the WAI-ARIA
  * `menu` / `menuitem` pattern.
+ *
+ * Focus is tracked as a stable item **id** in React state (never by mutating the
+ * DOM). The id is shared with items through `MenuNavigationContext` so each item
+ * renders its own `data-focused`, and surfaced as the panel's
+ * `aria-activedescendant`. Item order is read from the DOM (read-only) so the
+ * logic stays correct across groups and dynamic content.
  */
 const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom', onArrowLeft, }) => {
     const panelRef = useRef(null);
-    const baseId = useId();
-    const [focusedIndex, setFocusedIndex] = useState(-1);
-    const [activeDescendant, setActiveDescendant] = useState(undefined);
+    const [focusedId, setFocusedId] = useState(undefined);
     // True while a descendant submenu is open → pause this panel's keyboard nav.
     const [childOpen, setChildOpen] = useState(false);
     const { style } = useMenuPosition({ anchorEl, open, menuRef: panelRef, minWidth, placement });
-    /** Returns all non-disabled item elements that belong to THIS panel (not a nested submenu). */
-    const getOptions = useCallback(() => {
-        if (!panelRef.current) {
+    /** Read this panel's focusable items in DOM order (excluding nested submenus). */
+    const getItems = useCallback(() => {
+        const panel = panelRef.current;
+        if (!panel) {
             return [];
         }
-        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);
+        return Array.from(panel.querySelectorAll(ITEM_SELECTOR))
+            .filter((el) => el.closest('[data-menu-panel]') === panel);
     }, []);
-    // 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.
+    /** Returns the currently focused item element (if still present). */
+    const getFocusedItem = useCallback(() => getItems().find((el) => el.id === focusedId), [getItems, focusedId]);
+    /** Move the roving focus by `step`, wrapping around. Starts from the edge when nothing is focused. */
+    const moveFocus = useCallback((step) => {
+        const items = getItems();
+        if (items.length === 0) {
+            return;
+        }
+        const current = items.findIndex((el) => el.id === focusedId);
+        const next = current === -1
+            ? (step === 1 ? 0 : items.length - 1)
+            : (current + step + items.length) % items.length;
+        setFocusedId(items[next]?.id);
+    }, [getItems, focusedId]);
+    // On open: focus the panel and pre-select a checked/selected item if any.
+    // When nothing is pre-selected, leave focusedId undefined so no item appears
+    // highlighted on mouse-open — the first ArrowDown/Up starts navigation.
     useEffect(() => {
         if (!open) {
-            setFocusedIndex(-1);
+            setFocusedId(undefined);
             return;
         }
         const raf = requestAnimationFrame(() => {
             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 : -1);
+            const preselected = getItems().find((el) => el.getAttribute('aria-checked') === 'true' || el.hasAttribute('data-selected'));
+            setFocusedId(preselected?.id);
         });
         return () => cancelAnimationFrame(raf);
-    }, [open, getOptions]);
-    // Keep data-focused (visual highlight) and aria-activedescendant (screen reader
-    // announcement) in sync with focusedIndex. Each item is assigned a stable id
-    // so the menu can reference the active one via aria-activedescendant.
+    }, [open, getItems]);
+    // Keep the focused item scrolled into view (read-only DOM access).
     useEffect(() => {
-        if (!open) {
-            setActiveDescendant(undefined);
+        if (!open || !focusedId) {
             return;
         }
-        const options = getOptions();
-        let activeId;
-        options.forEach((el, idx) => {
-            if (!el.id) {
-                el.id = `${baseId}-option-${idx}`;
-            }
-            if (idx === focusedIndex) {
-                el.setAttribute('data-focused', 'true');
-                el.scrollIntoView({ block: 'nearest' });
-                activeId = el.id;
-            }
-            else {
-                el.removeAttribute('data-focused');
-            }
-        });
-        setActiveDescendant(activeId);
-    }, [focusedIndex, open, getOptions, baseId]);
+        getFocusedItem()?.scrollIntoView({ block: 'nearest' });
+    }, [open, focusedId, getFocusedItem]);
+    // Switching to the mouse clears the keyboard highlight (hover takes over).
+    useEffect(() => {
+        const panel = panelRef.current;
+        if (!panel || !open) {
+            return;
+        }
+        const clearFocus = () => setFocusedId(undefined);
+        panel.addEventListener('mousemove', clearFocus);
+        return () => panel.removeEventListener('mousemove', clearFocus);
+    }, [open]);
     useKeyPress({
         Escape: (e) => {
             e.preventDefault();
@@ -3734,25 +3758,15 @@ const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom',
         },
         ArrowDown: (e) => {
             e.preventDefault();
-            setFocusedIndex((prev) => {
-                const count = getOptions().length;
-                return count === 0 ? prev : (prev + 1) % count;
-            });
+            moveFocus(1);
         },
         ArrowUp: (e) => {
             e.preventDefault();
-            setFocusedIndex((prev) => {
-                const count = getOptions().length;
-                if (count === 0) {
-                    return prev;
-                }
-                // prev === -1 means no item focused yet → jump to last item
-                return prev <= 0 ? count - 1 : prev - 1;
-            });
+            moveFocus(-1);
         },
         ArrowRight: (e) => {
-            // Open the submenu of the focused item (if any)
-            const focused = getOptions()[focusedIndex];
+            // Open the submenu of the focused item (if any).
+            const focused = getFocusedItem();
             if (focused?.getAttribute('aria-haspopup') === 'menu') {
                 e.preventDefault();
                 focused.dispatchEvent(new CustomEvent(OPEN_SUBMENU_EVENT));
@@ -3766,34 +3780,23 @@ const useMenuPanel = ({ open, onClose, anchorEl, minWidth, placement = 'bottom',
         },
         Home: (e) => {
             e.preventDefault();
-            const count = getOptions().length;
-            if (count > 0) {
-                setFocusedIndex(0);
-            }
+            setFocusedId(getItems()[0]?.id);
         },
         End: (e) => {
             e.preventDefault();
-            const count = getOptions().length;
-            if (count > 0) {
-                setFocusedIndex(count - 1);
-            }
+            const items = getItems();
+            setFocusedId(items[items.length - 1]?.id);
         },
         Enter: (e) => {
             e.preventDefault();
-            const options = getOptions();
-            if (focusedIndex >= 0) {
-                options[focusedIndex]?.click();
-            }
+            getFocusedItem()?.click();
         },
         ' ': (e) => {
             e.preventDefault();
-            const options = getOptions();
-            if (focusedIndex >= 0) {
-                options[focusedIndex]?.click();
-            }
+            getFocusedItem()?.click();
         },
     }, { enabled: open && !childOpen });
-    return { panelRef, style, activeDescendant, setChildOpen };
+    return { panelRef, style, focusedId, setChildOpen };
 };
 
 /** Returns the visible scrollbar width (0 with overlay/inset scrollbars like macOS). */
@@ -3900,7 +3903,7 @@ const MenuPanel = ({ open, onClose, anchorEl, minWidth, maxHeight = '20rem', pla
     const closeMenu = isSubmenu ? parentContext.closeMenu ?? onClose : onClose;
     // Only the root menu locks the page scroll (submenus inherit the locked state).
     useBodyScrollLock(open && !isSubmenu);
-    const { panelRef, style, activeDescendant, setChildOpen } = useMenuPanel({
+    const { panelRef, style, focusedId, setChildOpen } = useMenuPanel({
         open,
         onClose,
         anchorEl,
@@ -3909,10 +3912,11 @@ const MenuPanel = ({ open, onClose, anchorEl, minWidth, maxHeight = '20rem', pla
         onArrowLeft,
     });
     const contextValue = useMemo(() => ({ setChildOpen, closeMenu }), [setChildOpen, closeMenu]);
+    const navigationValue = useMemo(() => ({ focusedId }), [focusedId]);
     if (!open) {
         return null;
     }
-    return createPortal(jsxs(MenuContext.Provider, { value: contextValue, children: [!isSubmenu && (jsx("div", { className: MENU_PANEL_STYLES.backdrop, onClick: onClose, "aria-hidden": true })), jsx("div", { ref: panelRef, id: id, role: role, tabIndex: -1, "data-menu-panel": true, "data-scroll-lock-ignore": true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-activedescendant": activeDescendant, className: MENU_PANEL_STYLES.panel, style: { ...style, maxHeight, outline: 'none' }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: children })] }), document.body);
+    return createPortal(jsxs(MenuContext.Provider, { value: contextValue, children: [!isSubmenu && (jsx("div", { className: MENU_PANEL_STYLES.backdrop, onClick: onClose, "aria-hidden": true })), jsx("div", { ref: panelRef, id: id, role: role, tabIndex: -1, "data-menu-panel": true, "data-scroll-lock-ignore": true, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-activedescendant": focusedId, className: MENU_PANEL_STYLES.panel, style: { ...style, maxHeight, outline: 'none' }, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, children: jsx(MenuNavigationContext.Provider, { value: navigationValue, children: children }) })] }), document.body);
 };
 MenuPanel.displayName = 'MenuPanel';
 
@@ -4070,17 +4074,18 @@ const MENU_ITEM_STYLES = createStyles((theme) => {
             display: 'flex',
             alignItems: 'center',
             gap: theme.spacing.sm,
-            paddingLeft: theme.spacing.md,
+            paddingLeft: `calc(${theme.spacing.md} - 2px)`,
             paddingRight: theme.spacing.md,
             ...(size === 'default'
                 ? { height: DEFAULT_DRAWER_ITEM_SIZE }
                 : { paddingTop: theme.spacing.xs, paddingBottom: theme.spacing.xs }),
+            borderLeft: '2px solid transparent',
             cursor: 'pointer',
             userSelect: 'none',
             color: c.textPrimary,
             fontSize: theme.fontSize.sm,
             listStyle: 'none',
-            transition: `background-color ${theme.transition.fast}`,
+            transition: `background-color ${theme.transition.fast}, border-color ${theme.transition.fast}`,
             '&[data-selected]': {
                 backgroundColor: c.primarySubtle,
                 color: c.primaryMain,
@@ -4092,6 +4097,14 @@ const MENU_ITEM_STYLES = createStyles((theme) => {
             '&[data-focused][data-selected]': {
                 backgroundColor: c.primarySubtleHover,
             },
+            '&[data-submenu-open]': {
+                backgroundColor: c.primarySubtle,
+                color: c.primaryMain,
+                borderLeftColor: c.primaryMain,
+            },
+            '&[data-submenu-open]:hover:not([data-disabled])': {
+                backgroundColor: c.primarySubtleHover,
+            },
             '&[data-disabled]': {
                 cursor: 'not-allowed',
                 opacity: theme.opacity.high,
@@ -4134,14 +4147,22 @@ const MENU_ITEM_STYLES = createStyles((theme) => {
     };
 }, { id: 'menu-item' });
 
-const MenuItem = ({ ref, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuTrigger = 'click', submenuPlacement = 'right', onClick, ...rest }) => {
+const MenuItem = ({ ref, id, label, icon, iconColor, role = 'menuitem', checked, selected, focused, disabled, size = 'default', closeOnClick, submenu, submenuTrigger = 'click', submenuPlacement = 'right', onClick, ...rest }) => {
     const hasSubmenu = submenu !== undefined;
     const isCheckable = role === 'menuitemcheckbox' || role === 'menuitemradio';
     const isOption = role === 'option';
     const isHighlighted = isCheckable ? Boolean(checked) : Boolean(selected);
+    // Stable id used for roving focus (data-focused) and the panel's
+    // aria-activedescendant. Consumers may override it via the `id` prop.
+    const generatedId = useId();
+    const itemId = id ?? generatedId;
+    // Keyboard focus is driven by the owning panel via context (no DOM mutation).
+    // `focused` remains a manual override for consumers that drive it themselves.
+    const { focusedId } = useContext(MenuNavigationContext);
+    const isFocused = focused || focusedId === itemId;
     const { liRef, mergedRef, submenuOpen, handleClick, scheduleOpen, scheduleClose, clearTimers, closeSubmenu, } = useMenuItem({ ref, role, hasSubmenu, disabled, onClick, closeOnClick, submenuTrigger });
     const isHoverTrigger = submenuTrigger === 'hover';
-    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 && isHoverTrigger ? scheduleOpen : undefined, onMouseLeave: hasSubmenu && isHoverTrigger ? 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: isHoverTrigger ? clearTimers : undefined, onMouseLeave: isHoverTrigger ? scheduleClose : undefined, children: submenu }))] }));
+    return (jsxs(Fragment$1, { children: [jsxs("li", { ref: mergedRef, id: itemId, 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": isFocused || undefined, "data-disabled": disabled || undefined, "data-submenu-open": hasSubmenu && submenuOpen || undefined, className: MENU_ITEM_STYLES.root({ size }), onClick: handleClick, onMouseEnter: hasSubmenu && !disabled && isHoverTrigger ? scheduleOpen : undefined, onMouseLeave: hasSubmenu && isHoverTrigger ? 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: isHoverTrigger ? clearTimers : undefined, onMouseLeave: isHoverTrigger ? scheduleClose : undefined, children: submenu }))] }));
 };
 MenuItem.displayName = 'MenuItem';