@astryxdesign/core 0.7.7-canary.550ff21 → 0.7.7-canary.559b005

package/src/hooks/useHighlightedOptionScroll.ts

@@ -8,7 +8,7 @@
  *   option-id resolver for the owning listbox
  * @output Exports useHighlightedOptionScroll: keeps the highlighted option
  *   scrolled into view for keyboard navigation while hover-driven highlights
- *   never scroll
+ *   never scroll; the hover callback is stable while `setHighlightedIndex` is
  * @position Internal hook; used by useCombobox, useMultiCombobox,
  *   BaseTypeahead, and DateTimeInput — the owners of combobox highlight state
  */
@@ -42,24 +42,28 @@ export function useHighlightedOptionScroll({
   getOptionId,
   itemCount,
 }: UseHighlightedOptionScrollOptions): (index: number) => void {
-  const hoverHighlightRef = useRef(false);
+  // The callback reads no render state, so memoized rows keep one function.
+  const hoveredIndexRef = useRef<number | null>(null);
+  const shownIndexRef = useRef(highlightedIndex);
 
   const highlightFromHover = useCallback(
     (index: number) => {
-      if (index !== highlightedIndex) {
-        hoverHighlightRef.current = true;
-      }
+      hoveredIndexRef.current = index;
       setHighlightedIndex(index);
     },
-    [highlightedIndex, setHighlightedIndex],
+    [setHighlightedIndex],
   );
 
   useEffect(() => {
-    if (hoverHighlightRef.current) {
-      hoverHighlightRef.current = false;
-      return;
-    }
-    if (!isOpen || highlightedIndex < 0) {
+    // Only a move to the hovered row came from the hover. A hover on the row
+    // already highlighted changes nothing, so a later run for the same row
+    // (a new list) still scrolls it into view.
+    const hasMoved = shownIndexRef.current !== highlightedIndex;
+    shownIndexRef.current = highlightedIndex;
+    const isFromHover =
+      hasMoved && hoveredIndexRef.current === highlightedIndex;
+    hoveredIndexRef.current = null;
+    if (isFromHover || !isOpen || highlightedIndex < 0) {
       return;
     }
     document

package/src/hooks/useMediaQuery.doc.mjs

@@ -21,7 +21,7 @@ export const docs = {
     },
   ],
   usage: {
-    description: 'SSR-safe media query hook that subscribes to window.matchMedia changes. Returns whether the given media query matches. Always returns false on first render for SSR compatibility.',
+    description: 'SSR-safe media query hook that subscribes to window.matchMedia changes. Returns whether the given media query matches. Always returns false on first render for SSR compatibility. Where `window.matchMedia` is missing, it returns its server default and never throws.',
     bestPractices: [
       { guidance: true, description: 'Use for responsive layout switching based on viewport width, color scheme, or motion preferences.' },
       { guidance: true, description: 'Prefer Astryx responsive tokens and component props over manual breakpoint logic when possible.' },
@@ -44,7 +44,7 @@ export const docsDense = {
     matches: 'whether media query currently matches. Always false on first render (SSR-safe).',
   },
   usage: {
-    description: 'SSR-safe media query hook subscribing to window.matchMedia changes. Returns whether given media query matches. Always returns false on first render for SSR compatibility.',
+    description: 'SSR-safe media query hook subscribing to window.matchMedia changes. Returns whether given media query matches. Always returns false on first render for SSR compatibility. Where `window.matchMedia` is missing, returns its server default and never throws.',
     bestPractices: [
       { guidance: true, description: 'Use for responsive layout switching based on viewport width, color scheme, or motion preferences.' },
       { guidance: true, description: 'Prefer Astryx responsive tokens + component props over manual breakpoint logic when possible.' },

package/src/hooks/useMediaQuery.ts

@@ -20,7 +20,8 @@ import {useCallback, useSyncExternalStore} from 'react';
 
 /**
  * SSR-safe media query hook.
- * Returns whether the given media query matches.
+ * Returns whether the given media query matches. Where the window has no
+ * `matchMedia`, as in a test DOM, it returns `serverDefault`.
  *
  * @param query - CSS media query string
  * @param serverDefault - Value to return during SSR. Pass a server-side hint
@@ -35,6 +36,10 @@ import {useCallback, useSyncExternalStore} from 'react';
 export function useMediaQuery(query: string, serverDefault = false): boolean {
   const subscribe = useCallback(
     (onStoreChange: () => void) => {
+      // A DOM without `matchMedia`, such as a test DOM, has nothing to watch.
+      if (typeof window.matchMedia !== 'function') {
+        return () => {};
+      }
       const mql = window.matchMedia(query);
       mql.addEventListener('change', onStoreChange);
       return () => mql.removeEventListener('change', onStoreChange);
@@ -42,9 +47,13 @@ export function useMediaQuery(query: string, serverDefault = false): boolean {
     [query],
   );
 
-  const getSnapshot = useCallback(() => {
-    return window.matchMedia(query).matches;
-  }, [query]);
+  const getSnapshot = useCallback(
+    () =>
+      typeof window.matchMedia === 'function'
+        ? window.matchMedia(query).matches
+        : serverDefault,
+    [query, serverDefault],
+  );
 
   const getServerSnapshot = useCallback(() => serverDefault, [serverDefault]);