@aurora-ds/components 1.7.17 → 1.7.18

package/dist/cjs/index.js

@@ -3665,7 +3665,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.
     React.useEffect(() => {
         if (!open) {
             setFocusedIndex(-1);
@@ -3675,7 +3677,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]);
@@ -3720,7 +3722,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) => {