@lumx/react 4.16.0-alpha.6 → 4.16.0-alpha.7

package/index.js

@@ -5347,37 +5347,85 @@ function createPendingNavigation(signal) {
 }
 
 /**
- * Create the pure selection layer for a 1D list.
+ * Create a focus navigation controller for a 1D list.
  *
- * Everything here is side-effect-free: it only *queries* the DOM to resolve and report
- * items. No focus is moved and no {@link FocusNavigationCallbacks} are invoked — that is
- * the job of the mover layer built on top of this (`createListFocusNavigation`).
+ * This controller is **stateless** — it does not maintain an internal reference to
+ * the active item. Instead it reads the active item from the DOM each time via the
+ * `getActiveItem` callback provided in the options. This avoids any desync between
+ * the controller's internal state and the actual DOM.
  *
- * @param options List navigation options (container, itemSelector, itemDisabledSelector, getActiveItem).
- * @returns The public {@link ListFocusNavigationSelectors} plus the internal
- *   {@link ListSelectorHelpers} the mover layer consumes.
+ * @param options List navigation options (container, itemSelector, direction, wrap, getActiveItem).
+ * @param callbacks Callbacks for focus state changes.
+ * @param signal AbortSignal for cleanup.
+ * @returns ListFocusNavigationController instance.
  */
-function createListSelectors(options) {
+function createListFocusNavigation(options, callbacks, signal) {
   const {
     container,
     itemSelector,
+    direction = 'vertical',
+    wrap = false,
     itemDisabledSelector,
     getActiveItem = () => null
   } = options;
 
   /** Combined CSS selector matching enabled (non-disabled) items. */
   const enabledItemSelector = itemDisabledSelector ? `${itemSelector}:not(${itemDisabledSelector})` : itemSelector;
+
+  /** Create a TreeWalker over items in the container. */
   function createItemWalker(enabledOnly = true) {
     const selector = enabledOnly ? enabledItemSelector : itemSelector;
     return createSelectorTreeWalker(container, selector);
   }
+
+  /** Find the first enabled item in the container. */
   function findFirstEnabled() {
     return container.querySelector(enabledItemSelector);
   }
+
+  /** Find the last enabled item in the container. */
   function findLastEnabled() {
     const items = container.querySelectorAll(enabledItemSelector);
     return items.length > 0 ? items[items.length - 1] : null;
   }
+
+  // Deferred navigation intent (replayed once items are committed to the DOM)
+  const pending = createPendingNavigation(signal);
+
+  /** Find item at offset (lazily walk nodes) */
+  function findAtOffset(offset) {
+    const forward = offset > 0;
+    const stepsNeeded = Math.abs(offset);
+    const active = getActiveItem();
+    const walker = createItemWalker();
+    const step = forward ? () => walker.nextNode() : () => walker.previousNode();
+    let target = null;
+    let remaining = stepsNeeded;
+    if (active) {
+      // Walk from the active item.
+      walker.currentNode = active;
+    } else if (!forward) {
+      // Walking backward with no active item: position at the last enabled item
+      target = walker.lastChild();
+      if (!target) return null;
+      remaining -= 1;
+    }
+    for (let i = 0; i < remaining; i++) {
+      const next = step();
+      if (next) {
+        target = next;
+      } else if (active && wrap) {
+        // Hit boundary with an active item — wrap around to the opposite end.
+        const wrapped = forward ? findFirstEnabled() : findLastEnabled();
+        if (!wrapped || wrapped === active) break;
+        target = wrapped;
+        walker.currentNode = wrapped;
+      } else {
+        break;
+      }
+    }
+    return target;
+  }
   function findMatching(predicate) {
     const walker = createItemWalker(false);
     let node = walker.nextNode();
@@ -5387,24 +5435,19 @@ function createListSelectors(options) {
     }
     return null;
   }
-  function findNearestEnabled(anchor) {
-    if (!container.contains(anchor)) return findFirstEnabled();
 
-    // If the anchor itself is an enabled item, return it directly.
-    if (anchor instanceof HTMLElement && anchor.matches(enabledItemSelector)) {
-      return anchor;
+  /** Clear the active item and discard any pending navigation intent. */
+  function clear() {
+    const current = getActiveItem();
+    if (current) {
+      callbacks.onDeactivate(current);
     }
-
-    // Walk forward from the anchor for the nearest enabled item.
-    const walker = createItemWalker();
-    walker.currentNode = anchor;
-    const next = walker.nextNode();
-    if (next instanceof HTMLElement) return next;
-
-    // No enabled item after anchor — walk backward (reuse same walker).
-    walker.currentNode = anchor;
-    return walker.previousNode();
+    pending.clear();
+    callbacks.onClear?.();
   }
+
+  // Cleanup on abort.
+  signal.addEventListener('abort', clear);
   const selectors = {
     enabledItemSelector,
     get activeItem() {
@@ -5416,163 +5459,60 @@ function createListSelectors(options) {
     getFirst: findFirstEnabled,
     getLast: findLastEnabled,
     getMatching: findMatching,
-    findNearestEnabled
-  };
-  const helpers = {
-    createItemWalker,
-    findFirstEnabled,
-    findLastEnabled,
-    getActiveItem
-  };
-  return {
-    selectors,
-    helpers
-  };
-}
+    findNearestEnabled(anchor) {
+      if (!container.contains(anchor)) return findFirstEnabled();
 
-/**
- * Transition the active item: deactivate the current one (if any) and activate the new one.
- * Reads the current active item via `getActiveItem` so there is no internal state to desync.
- */
-function transition(getActiveItem, callbacks, newItem) {
-  const current = getActiveItem();
-  if (current === newItem) return;
-  if (current) callbacks.onDeactivate(current);
-  callbacks.onActivate(newItem);
-}
-
-/**
- * Create a focus navigation controller for a 1D list.
- *
- * The controller is composed of two layers:
- * - a pure, side-effect-free **selection** layer ({@link createListSelectors}) that only
- *   resolves/reports items by querying the DOM, and
- * - a **mover** layer (this function) that commits focus by calling
- *   {@link FocusNavigationCallbacks} on top of the selectors.
- *
- * This controller is **stateless** — it does not maintain an internal reference to
- * the active item. Instead it reads the active item from the DOM each time via the
- * `getActiveItem` callback provided in the options. This avoids any desync between
- * the controller's internal state and the actual DOM.
- *
- * @param options List navigation options (container, itemSelector, direction, wrap, getActiveItem).
- * @param callbacks Callbacks for focus state changes.
- * @param signal AbortSignal for cleanup.
- * @returns ListFocusNavigationController instance.
- */
-function createListFocusNavigation(options, callbacks, signal) {
-  const {
-    itemSelector,
-    container,
-    direction = 'vertical',
-    wrap = false
-  } = options;
-  const {
-    selectors,
-    helpers
-  } = createListSelectors(options);
-  const {
-    getActiveItem,
-    createItemWalker,
-    findFirstEnabled,
-    findLastEnabled
-  } = helpers;
-
-  // Deferred navigation intent (replayed once items are committed to the DOM)
-  const pending = createPendingNavigation(signal);
-
-  /** Navigate to the first enabled item and activate it. */
-  function goToFirst() {
-    const first = findFirstEnabled();
-    if (!first) return false;
-    transition(getActiveItem, callbacks, first);
-    return true;
-  }
-
-  /** Navigate to the last enabled item and activate it. */
-  function goToLast() {
-    const last = findLastEnabled();
-    if (!last) return false;
-    transition(getActiveItem, callbacks, last);
-    return true;
-  }
+      // If the anchor itself is an enabled item, return it directly.
+      if (anchor instanceof HTMLElement && anchor.matches(enabledItemSelector)) {
+        return anchor;
+      }
 
-  /** Go to item at an offset */
-  function goToOffset(offset) {
-    const active = getActiveItem();
-    if (offset === 0) return active !== null;
-    const forward = offset > 0;
-    const stepsNeeded = Math.abs(offset);
+      // Walk forward from the anchor for the nearest enabled item.
+      const walker = createItemWalker();
+      walker.currentNode = anchor;
+      const next = walker.nextNode();
+      if (next instanceof HTMLElement) return next;
 
-    // No active item — fall back to first/last.
-    if (!active) {
-      const started = forward ? goToFirst() : goToLast();
-      if (!started) return false;
-      if (stepsNeeded === 1) return true;
-      return goToOffset(forward ? offset - 1 : offset + 1);
+      // No enabled item after anchor — walk backward (reuse same walker).
+      walker.currentNode = anchor;
+      return walker.previousNode();
     }
+  };
 
-    // Walk from the active item using a TreeWalker.
-    const walker = createItemWalker();
-    walker.currentNode = active;
-    const step = forward ? () => walker.nextNode() : () => walker.previousNode();
-    let stepsCompleted = 0;
-    let lastFound = null;
-    for (let i = 0; i < stepsNeeded; i++) {
-      const next = step();
-      if (next) {
-        lastFound = next;
-        stepsCompleted += 1;
-      } else if (wrap) {
-        // Hit boundary — wrap around to the opposite end.
-        const wrapped = forward ? findFirstEnabled() : findLastEnabled();
-        if (!wrapped || wrapped === active) break;
-        lastFound = wrapped;
-        stepsCompleted += 1;
-        walker.currentNode = wrapped;
-      } else {
-        break;
+  /**
+   * Navigate via a resolver. The resolver receives the selectors to find the target.
+   * If the target is valid, focus is committed (deactivate current, activate target).
+   * If the target is not resolvable yet, the intent is deferred for later replay.
+   */
+  function goTo(resolve) {
+    const target = resolve(selectors);
+    if (target && target.matches(itemSelector) && container.contains(target)) {
+      const current = getActiveItem();
+      if (current !== target) {
+        if (current) callbacks.onDeactivate(current);
+        callbacks.onActivate(target);
       }
+      pending.clear();
+      return true;
     }
-    if (stepsCompleted === 0) return false;
-    transition(getActiveItem, callbacks, lastFound);
-    return true;
+    // Target not resolvable yet (e.g. items not committed to the DOM) — defer
+    pending.defer(() => goTo(resolve));
+    return false;
   }
 
-  /** Clear the active item and discard any pending navigation intent. */
-  function clear() {
-    const current = getActiveItem();
-    if (current) {
-      callbacks.onDeactivate(current);
-    }
-    pending.clear();
-    callbacks.onClear?.();
+  /** Go to the item at the given offset from the active item. */
+  function goToOffset(offset) {
+    if (offset === 0) return getActiveItem() !== null;
+    const target = findAtOffset(offset);
+    if (!target) return false;
+    return goTo(() => target);
   }
-
-  // Cleanup on abort.
-  signal.addEventListener('abort', clear);
   return {
     type: 'list',
     selectors,
-    goToItem(item) {
-      if (!item.matches(itemSelector)) return false;
-      if (!container.contains(item)) return false;
-      transition(getActiveItem, callbacks, item);
-      return true;
-    },
     goToOffset,
     clear,
-    goTo(resolve) {
-      const target = resolve(selectors);
-      if (target && target.matches(itemSelector) && container.contains(target)) {
-        transition(getActiveItem, callbacks, target);
-        pending.clear();
-        return true;
-      }
-      // Target not resolvable yet (e.g. items not committed to the DOM) — defer
-      pending.defer(() => this.goTo(resolve));
-      return false;
-    },
+    goTo,
     flushPendingNavigation() {
       pending.flush();
     },
@@ -5609,7 +5549,7 @@ function createListFocusNavigation(options, callbacks, signal) {
  * @param initialItem Optional item to silently pre-select on creation (no callbacks fired).
  */
 function createActiveItemState(callbacks, signal, initialItem) {
-  let activeItem = null;
+  let activeItem = initialItem ?? null;
   function clear() {
     if (activeItem) {
       callbacks.onDeactivate(activeItem);
@@ -5653,141 +5593,57 @@ function first(iterable) {
 }
 
 /**
- * Create the pure selection layer for a 2D grid.
+ * Create a focus navigation controller for a 2D grid.
+ *
+ * Resolves rows and cells by querying the DOM and commits focus by updating the
+ * active-item state (which fires {@link FocusNavigationCallbacks}).
  *
- * Everything here is side-effect-free: it only *queries* the DOM to resolve and report
- * rows/cells. No focus is moved and no {@link FocusNavigationCallbacks} are invoked — that
- * is the job of the mover layer built on top of this.
+ * Supports Up/Down between rows (with column memory) and Left/Right between cells
+ * (with wrapping across rows).
  *
- * @param options Grid navigation options (container, rowSelector, cellSelector).
- * @param getActive Reader for the currently active cell (owned by the mover's active-item state).
- * @param isVisible Predicate deciding whether a row is visible (derived from `isRowVisible`).
- * @returns The public {@link FocusNavigationSelectors} plus the internal
- *   {@link GridSelectorHelpers} the mover layer consumes.
+ * @param options Grid navigation options (container, rowSelector, cellSelector, wrap).
+ * @param callbacks Callbacks for focus state changes.
+ * @param signal AbortSignal for cleanup.
+ * @returns FocusNavigationController instance.
  */
-function createGridSelectors(options, getActive, isVisible) {
+function createGridFocusNavigation(options, callbacks, signal) {
   const {
     container,
     rowSelector,
-    cellSelector
+    cellSelector,
+    wrap = false
   } = options;
-  function isNavigableRow(row) {
-    return isVisible(row) && row.querySelector(cellSelector) !== null;
-  }
+  const state = createActiveItemState(callbacks, signal);
+  const isNavigableRow = row => row.querySelector(cellSelector) !== null;
+  const getFirstCell = row => row.querySelector(cellSelector);
+  const getRowCells = row => Array.from(row.querySelectorAll(cellSelector));
 
-  /**
-   * Lazily walk navigable rows (visible, with cells) starting from `startNode` in
-   * `direction`, projecting each row through `dive`.
-   */
-  function* findRow(direction, startNode = null, dive) {
+  /** Lazily walk navigable rows from `start` in a `direction`, projecting each row through `dive`. */
+  function* findRows(start = 'first', direction = 'next', dive) {
+    // Tree walker
     const walker = createSelectorTreeWalker(container, rowSelector);
-    if (startNode) walker.currentNode = startNode;
-    const advance = direction === 'next' ? () => walker.nextNode() : () => walker.previousNode();
-    let node = advance();
-    while (node) {
-      if (isNavigableRow(node)) {
+
+    // Start at a specific row
+    if (start instanceof HTMLElement) walker.currentNode = start;
+    // Start from the last
+    else if (start === 'last') walker.currentNode = lastDescendant(container);
+
+    // Walk nodes
+    let node;
+    do {
+      node = direction === 'next' ? walker.nextNode() : walker.previousNode();
+      if (node && isNavigableRow(node)) {
         const result = dive ? dive(node) : node;
         if (result) yield result;
       }
-      node = advance();
-    }
-  }
-
-  /** Find the first or last navigable row (visible, with cells), or null. */
-  function findVisibleRow(mode) {
-    return mode === 'first' ? first(findRow('next')) : first(findRow('prev', lastDescendant(container)));
-  }
-
-  /** Collect all navigable rows (visible, with cells) in DOM order. */
-  function findAllVisibleRows() {
-    return Array.from(findRow('next'));
-  }
-  function getRowCells(row) {
-    return Array.from(row.querySelectorAll(cellSelector));
+    } while (node);
   }
+  const findFirstVisibleRow = () => first(findRows());
+  const findLastVisibleRow = () => first(findRows('last', 'prev'));
   function findParentRow(cell) {
     const row = cell.closest(rowSelector);
     return row && container.contains(row) ? row : null;
   }
-  function findAdjacentVisibleRow(fromRow, direction) {
-    return first(findRow(direction, fromRow));
-  }
-
-  /** Resolve the first cell of the boundary row (without moving focus). */
-  function getBoundaryCell(mode) {
-    const row = findVisibleRow(mode);
-    if (!row) return null;
-    const cells = getRowCells(row);
-    return cells.length > 0 ? cells[0] : null;
-  }
-
-  /** Resolve the first cell matching a predicate (without moving focus). */
-  function getMatching(predicate) {
-    return first(findRow('next', null, row => getRowCells(row).find(predicate) ?? null));
-  }
-  const selectors = {
-    get activeItem() {
-      return getActive();
-    },
-    get hasNavigableItems() {
-      return first(findRow('next')) !== null;
-    },
-    getFirst: () => getBoundaryCell('first'),
-    getLast: () => getBoundaryCell('last'),
-    getMatching
-  };
-  const helpers = {
-    findFirstVisibleRow: () => findVisibleRow('first'),
-    findLastVisibleRow: () => findVisibleRow('last'),
-    findAllVisibleRows,
-    getRowCells,
-    findParentRow,
-    findAdjacentVisibleRow
-  };
-  return {
-    selectors,
-    helpers
-  };
-}
-
-/**
- * Create a focus navigation controller for a 2D grid.
- *
- * The controller is composed of two layers:
- * - a pure, side-effect-free **selection** layer ({@link createGridSelectors}) that only
- *   resolves/reports rows and cells by querying the DOM, and
- * - a **mover** layer (this function) that commits focus by updating the active-item state
- *   (which fires {@link FocusNavigationCallbacks}) on top of the selectors.
- *
- * Supports Up/Down between rows (with column memory) and Left/Right between cells
- * (with wrapping across rows).
- *
- * @param options Grid navigation options (container, rowSelector, cellSelector, isRowVisible, wrap).
- * @param callbacks Callbacks for focus state changes.
- * @param signal AbortSignal for cleanup.
- * @returns FocusNavigationController instance.
- */
-function createGridFocusNavigation(options, callbacks, signal) {
-  const {
-    isRowVisible,
-    wrap = false
-  } = options;
-  const state = createActiveItemState(callbacks, signal);
-
-  /** Whether a row is visible (passes the optional `isRowVisible` filter). */
-  const isVisible = row => !isRowVisible || isRowVisible(row);
-  const {
-    selectors,
-    helpers
-  } = createGridSelectors(options, () => state.active, isVisible);
-  const {
-    findFirstVisibleRow,
-    findLastVisibleRow,
-    findAllVisibleRows,
-    getRowCells,
-    findParentRow,
-    findAdjacentVisibleRow
-  } = helpers;
 
   /** Deferred navigation intent (replayed once cells are committed to the DOM). */
   const pending = createPendingNavigation(signal);
@@ -5803,6 +5659,18 @@ function createGridFocusNavigation(options, callbacks, signal) {
     return true;
   }
 
+  /** Activate the given cell (validates it is in the grid, updates column memory). */
+  function activateCell(item) {
+    const row = findParentRow(item);
+    if (!row) return false;
+    const cells = getRowCells(row);
+    const col = cells.indexOf(item);
+    if (col === -1) return false;
+    rememberedCol = col;
+    state.setActive(item);
+    return true;
+  }
+
   /** Got to first cell in first row */
   function goToFirst() {
     const row = findFirstVisibleRow();
@@ -5837,7 +5705,7 @@ function createGridFocusNavigation(options, callbacks, signal) {
 
     // Wrap to the adjacent row (or opposite boundary row), activating the first or last cell.
     const rowDirection = step > 0 ? 'next' : 'prev';
-    const adjacentRow = findAdjacentVisibleRow(currentRow, rowDirection);
+    const adjacentRow = first(findRows(currentRow, rowDirection));
     const targetRow = adjacentRow ?? (step > 0 ? findFirstVisibleRow() : findLastVisibleRow());
     if (!targetRow) return false;
     const targetCells = getRowCells(targetRow);
@@ -5856,7 +5724,7 @@ function createGridFocusNavigation(options, callbacks, signal) {
     }
     const currentRow = findParentRow(state.active);
     if (!currentRow) return false;
-    const adjacentRow = findAdjacentVisibleRow(currentRow, direction);
+    const adjacentRow = first(findRows(currentRow, direction));
     if (adjacentRow) return focusCellInRow(adjacentRow, rememberedCol);
     if (wrap) {
       // Wrap to the opposite boundary row.
@@ -5865,12 +5733,26 @@ function createGridFocusNavigation(options, callbacks, signal) {
     }
     return false;
   }
+  const selectors = {
+    get activeItem() {
+      return state.active;
+    },
+    get hasNavigableItems() {
+      return first(findRows()) !== null;
+    },
+    // First cell in first row
+    getFirst: () => first(findRows('first', 'next', getFirstCell)),
+    // First cell in last row
+    getLast: () => first(findRows('last', 'prev', getFirstCell)),
+    // First cell matching predicate
+    getMatching: predicate => first(findRows('first', 'next', row => getRowCells(row).find(predicate)))
+  };
   return {
     type: 'grid',
     selectors,
     goToOffset(offset) {
       if (offset === 0) return state.active !== null;
-      const visibleRows = findAllVisibleRows();
+      const visibleRows = Array.from(findRows());
       if (visibleRows.length === 0) return false;
       if (!state.active) {
         // No active item: jump to first or last row, then apply remaining offset.
@@ -5889,24 +5771,13 @@ function createGridFocusNavigation(options, callbacks, signal) {
       if (targetIdx === rowIdx) return false;
       return focusCellInRow(visibleRows[targetIdx], rememberedCol);
     },
-    goToItem(item) {
-      // Use closest() to find the parent row, then find col within that row only.
-      const row = findParentRow(item);
-      if (!row || !isVisible(row)) return false;
-      const cells = getRowCells(row);
-      const col = cells.indexOf(item);
-      if (col === -1) return false;
-      rememberedCol = col;
-      state.setActive(item);
-      return true;
-    },
     clear() {
       state.clear();
       pending.clear();
     },
     goTo(resolve) {
       const target = resolve(selectors);
-      if (target && this.goToItem(target)) {
+      if (target && activateCell(target)) {
         pending.clear();
         return true;
       }
@@ -6081,7 +5952,7 @@ function setupRovingTabIndex(options, signal) {
     const fallback = (anchor && nav.selectors.findNearestEnabled(anchor)) ?? container.querySelector(nav.selectors.enabledItemSelector);
     if (!fallback) return;
     if (shouldFocus) {
-      nav.goToItem(fallback);
+      nav.goTo(() => fallback);
     } else {
       setTabIndex(fallback, '0');
     }
@@ -6186,7 +6057,7 @@ function setupRovingTabIndex(options, signal) {
     if (!nav.selectors.activeItem) {
       const target = evt.target;
       if (target.matches(itemSelector) && container.contains(target)) {
-        nav.goToItem(target);
+        nav.goTo(() => target);
       }
     }
     let handled = false;
@@ -6450,7 +6321,7 @@ function notifySection(sectionElement, sectionRegistrations, optionRegistrations
  * @param notify Notify subscribers of combobox events.
  * @returns The created focus navigation controller.
  */
-function setupListbox(handle, signal, notify) {
+function setupListbox(handle, signal, notify, options) {
   const trigger = handle.trigger;
   const listbox = handle.listbox;
   const isGrid = listbox.getAttribute('role') === 'grid';
@@ -6503,6 +6374,7 @@ function setupListbox(handle, signal, notify) {
     focusNav = createListFocusNavigation({
       container: listbox,
       itemSelector,
+      wrap: options?.wrapNavigation,
       getActiveItem: () => {
         const id = trigger.getAttribute('aria-activedescendant');
         return id ? document.getElementById(id) : null;
@@ -6734,35 +6606,37 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
           // Otherwise (closed popup, or multi-select with no active item),
           // let Enter pass through so it can submit a surrounding form
           break;
+
+        // Open if closed, else move focus within listbox (wrap if enabled).
         case 'ArrowDown':
           if (!handle.isOpen) {
             handle.setIsOpen(true);
+            // Focus first or selected item on open.
             if (!altKey) nav?.goTo(s => s.getMatching(isSelected) ?? s.getFirst());
           } else if (nav?.selectors.hasNavigableItems && !altKey) {
             if (nav.selectors.activeItem) {
-              if (nav.type === 'grid') {
-                nav.goDown();
-              } else if (!nav.goToOffset(1) && wrapNavigation) {
-                nav.goTo(s => s.getFirst());
-              }
+              // Go down
+              nav.goDown();
             } else {
+              // Focus first or selected item when no active item.
               nav.goTo(s => s.getMatching(isSelected) ?? s.getFirst());
             }
           }
           flag = true;
           break;
+
+        // Open if closed, else move focus within listbox (wrap if enabled).
         case 'ArrowUp':
           if (!handle.isOpen && !altKey) {
             handle.setIsOpen(true);
+            // Focus last or selected item on open.
             nav?.goTo(s => s.getMatching(isSelected) ?? s.getLast());
           } else if (handle.isOpen && nav?.selectors.hasNavigableItems) {
             if (nav.selectors.activeItem) {
-              if (nav.type === 'grid') {
-                nav.goUp();
-              } else if (!nav.goToOffset(-1) && wrapNavigation) {
-                nav.goTo(s => s.getLast());
-              }
+              // Go up
+              nav.goUp();
             } else if (!altKey) {
+              // Focus last or selected item when no active item.
               nav.goTo(s => s.getMatching(isSelected) ?? s.getLast());
             }
           }
@@ -6829,7 +6703,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       });
     }
     if (listbox && !focusNav) {
-      focusNav = setupListbox(handle, abortController.signal, notify);
+      focusNav = setupListbox(handle, abortController.signal, notify, {
+        wrapNavigation
+      });
     }
   }
   handle = {
@@ -6974,7 +6850,9 @@ function setupCombobox(callbacks, options, onTriggerAttach) {
       if (trigger && abortController) {
         if (!hadListbox) {
           // First listbox — set up focus nav and listbox listeners
-          focusNav = setupListbox(handle, abortController.signal, notify);
+          focusNav = setupListbox(handle, abortController.signal, notify, {
+            wrapNavigation
+          });
         } else {
           // Replacing listbox — full re-attach
           detach();
@@ -8447,7 +8325,7 @@ const ComboboxList = forwardRef((props, ref) => {
   }, [handle]);
 
   // Flush pending keyboard navigation after options commit on open.
-  useLayoutEffect(() => {
+  useEffect(() => {
     if (isOpen) handle?.flushPendingNavigation();
   }, [isOpen, visibleCount, handle]);
   return /*#__PURE__*/jsx(ComboboxListContext.Provider, {