@base-ui/react 1.2.0 → 1.4.0

package/esm/floating-ui-react/utils/composite.js

@@ -1,25 +1,26 @@
 import { floor } from '@floating-ui/utils';
+import { getComputedStyle } from '@floating-ui/utils/dom';
 import { stopEvent } from "./event.js";
 import { ARROW_DOWN, ARROW_LEFT, ARROW_RIGHT, ARROW_UP } from "./constants.js";
 export function isDifferentGridRow(index, cols, prevRow) {
   return Math.floor(index / cols) !== prevRow;
 }
-export function isIndexOutOfListBounds(listRef, index) {
-  return index < 0 || index >= listRef.current.length;
+export function isIndexOutOfListBounds(list, index) {
+  return index < 0 || index >= list.length;
 }
 export function getMinListIndex(listRef, disabledIndices) {
-  return findNonDisabledListIndex(listRef, {
+  return findNonDisabledListIndex(listRef.current, {
     disabledIndices
   });
 }
 export function getMaxListIndex(listRef, disabledIndices) {
-  return findNonDisabledListIndex(listRef, {
+  return findNonDisabledListIndex(listRef.current, {
     decrement: true,
     startingIndex: listRef.current.length,
     disabledIndices
   });
 }
-export function findNonDisabledListIndex(listRef, {
+export function findNonDisabledListIndex(list, {
   startingIndex = -1,
   decrement = false,
   disabledIndices,
@@ -28,13 +29,14 @@ export function findNonDisabledListIndex(listRef, {
   let index = startingIndex;
   do {
     index += decrement ? -amount : amount;
-  } while (index >= 0 && index <= listRef.current.length - 1 && isListIndexDisabled(listRef, index, disabledIndices));
+  } while (index >= 0 && index <= list.length - 1 && isListIndexDisabled(list, index, disabledIndices));
   return index;
 }
-export function getGridNavigatedIndex(listRef, {
+export function getGridNavigatedIndex(list, {
   event,
   orientation,
   loopFocus,
+  onLoop,
   rtl,
   cols,
   disabledIndices,
@@ -44,151 +46,157 @@ export function getGridNavigatedIndex(listRef, {
   stopEvent: stop = false
 }) {
   let nextIndex = prevIndex;
-
-  // ---------------------------------------------------------------------------
-  // Detect row structure based on DOM. This works when items are grouped inside
-  // elements that declare `role="row"` (e.g., Combobox.Row). We build a matrix
-  // where each entry is the array of item indices for that visual row. The
-  // algorithm gracefully falls back to regular `cols`-based handling when no
-  // row structure can be detected.
-  // ---------------------------------------------------------------------------
-  const rows = [];
-  const rowIndexMap = {};
-  let hasRoleRow = false;
-  {
-    let currentRowEl = null;
-    let currentRowIndex = -1;
-    listRef.current.forEach((el, idx) => {
-      if (el == null) {
-        return;
-      }
-      const rowEl = el.closest('[role="row"]');
-      if (rowEl) {
-        hasRoleRow = true;
-      }
-      if (rowEl !== currentRowEl || currentRowIndex === -1) {
-        currentRowEl = rowEl;
-        currentRowIndex += 1;
-        rows[currentRowIndex] = [];
-      }
-      rows[currentRowIndex].push(idx);
-      rowIndexMap[idx] = currentRowIndex;
-    });
+  let verticalDirection;
+  if (event.key === ARROW_UP) {
+    verticalDirection = 'up';
+  } else if (event.key === ARROW_DOWN) {
+    verticalDirection = 'down';
   }
-  const hasDomRows = hasRoleRow && rows.length > 0 && rows.some(row => row.length !== cols);
-  function navigateVertically(direction) {
-    if (!hasDomRows || prevIndex === -1) {
-      return undefined;
-    }
-    const currentRow = rowIndexMap[prevIndex];
-    if (currentRow == null) {
-      return undefined;
+  if (verticalDirection) {
+    // -------------------------------------------------------------------------
+    // Detect row structure only when handling vertical navigation. This keeps
+    // the non-vertical key paths free from row inference work.
+    // -------------------------------------------------------------------------
+    const rows = [];
+    const rowIndexMap = [];
+    let hasRoleRow = false;
+    let visibleItemCount = 0;
+    {
+      let currentRowEl = null;
+      let currentRowIndex = -1;
+      list.forEach((el, idx) => {
+        if (el == null) {
+          return;
+        }
+        visibleItemCount += 1;
+        const rowEl = el.closest('[role="row"]');
+        if (rowEl) {
+          hasRoleRow = true;
+        }
+        if (rowEl !== currentRowEl || currentRowIndex === -1) {
+          currentRowEl = rowEl;
+          currentRowIndex += 1;
+          rows[currentRowIndex] = [];
+        }
+        rows[currentRowIndex].push(idx);
+        rowIndexMap[idx] = currentRowIndex;
+      });
     }
-    const colInRow = rows[currentRow].indexOf(prevIndex);
-    let nextRow = direction === 'up' ? currentRow - 1 : currentRow + 1;
-    if (loopFocus) {
-      if (nextRow < 0) {
-        nextRow = rows.length - 1;
-      } else if (nextRow >= rows.length) {
-        nextRow = 0;
+    let hasDomRows = false;
+    let inferredDomCols = 0;
+    if (hasRoleRow) {
+      for (const row of rows) {
+        const rowLength = row.length;
+        if (rowLength > inferredDomCols) {
+          inferredDomCols = rowLength;
+        }
+        if (rowLength !== cols) {
+          hasDomRows = true;
+        }
       }
     }
-    const visited = new Set();
-    while (nextRow >= 0 && nextRow < rows.length && !visited.has(nextRow)) {
-      visited.add(nextRow);
-      const targetRow = rows[nextRow];
-      if (targetRow.length === 0) {
-        nextRow = direction === 'up' ? nextRow - 1 : nextRow + 1;
-        continue;
+    const hasVirtualizedGaps = hasDomRows && visibleItemCount < list.length;
+    const verticalCols = inferredDomCols || cols;
+    const navigateVertically = direction => {
+      if (!hasDomRows || prevIndex === -1) {
+        return undefined;
       }
-      const clampedCol = Math.min(colInRow, targetRow.length - 1);
-      // Start from the preferred column, fallback leftwards until first
-      // enabled item is found.
-      for (let col = clampedCol; col >= 0; col -= 1) {
-        const candidate = targetRow[col];
-        if (!isListIndexDisabled(listRef, candidate, disabledIndices)) {
-          return candidate;
+      const currentRow = rowIndexMap[prevIndex];
+      if (currentRow == null) {
+        return undefined;
+      }
+      const colInRow = rows[currentRow].indexOf(prevIndex);
+      const step = direction === 'up' ? -1 : 1;
+      for (let nextRow = currentRow + step, i = 0; i < rows.length; i += 1, nextRow += step) {
+        if (nextRow < 0 || nextRow >= rows.length) {
+          if (!loopFocus || hasVirtualizedGaps) {
+            return undefined;
+          }
+          nextRow = nextRow < 0 ? rows.length - 1 : 0;
+          if (onLoop) {
+            const clampedCol = Math.min(colInRow, rows[nextRow].length - 1);
+            const targetItemIndex = rows[nextRow][clampedCol] ?? rows[nextRow][0];
+            const returnedItemIndex = onLoop(event, prevIndex, targetItemIndex);
+            nextRow = rowIndexMap[returnedItemIndex] ?? nextRow;
+          }
+        }
+        const targetRow = rows[nextRow];
+        for (let col = Math.min(colInRow, targetRow.length - 1); col >= 0; col -= 1) {
+          const candidate = targetRow[col];
+          if (!isListIndexDisabled(list, candidate, disabledIndices)) {
+            return candidate;
+          }
         }
       }
-      // Row had no enabled items, move to next row in the same direction.
-      nextRow = direction === 'up' ? nextRow - 1 : nextRow + 1;
-      if (loopFocus) {
-        if (nextRow < 0) {
-          nextRow = rows.length - 1;
-        } else if (nextRow >= rows.length) {
-          nextRow = 0;
+      return undefined;
+    };
+    const navigateVerticallyWithInferredRows = direction => {
+      if (!hasVirtualizedGaps || prevIndex === -1) {
+        return undefined;
+      }
+      const colInRow = prevIndex % verticalCols;
+      const rowStep = direction === 'up' ? -verticalCols : verticalCols;
+      const lastRowStart = maxIndex - maxIndex % verticalCols;
+      const rowCount = floor(maxIndex / verticalCols) + 1;
+      for (let rowStart = prevIndex - colInRow + rowStep, i = 0; i < rowCount; i += 1, rowStart += rowStep) {
+        if (rowStart < 0 || rowStart > maxIndex) {
+          if (!loopFocus) {
+            return undefined;
+          }
+          rowStart = rowStart < 0 ? lastRowStart : 0;
+        }
+        const rowEnd = Math.min(rowStart + verticalCols - 1, maxIndex);
+        for (let candidate = Math.min(rowStart + colInRow, rowEnd); candidate >= rowStart; candidate -= 1) {
+          if (!isListIndexDisabled(list, candidate, disabledIndices)) {
+            return candidate;
+          }
         }
       }
+      return undefined;
+    };
+    if (stop) {
+      stopEvent(event);
     }
-    return undefined;
-  }
-  if (event.key === ARROW_UP) {
-    const domBasedCandidate = navigateVertically('up');
-    if (domBasedCandidate !== undefined) {
-      if (stop) {
-        stopEvent(event);
-      }
-      nextIndex = domBasedCandidate;
+    const verticalCandidate = navigateVertically(verticalDirection) ?? navigateVerticallyWithInferredRows(verticalDirection);
+    if (verticalCandidate !== undefined) {
+      nextIndex = verticalCandidate;
+    } else if (prevIndex === -1) {
+      nextIndex = verticalDirection === 'up' ? maxIndex : minIndex;
     } else {
-      // fallback to original logic
-      if (stop) {
-        stopEvent(event);
-      }
-      if (prevIndex === -1) {
-        nextIndex = maxIndex;
-      } else {
-        nextIndex = findNonDisabledListIndex(listRef, {
-          startingIndex: nextIndex,
-          amount: cols,
-          decrement: true,
-          disabledIndices
-        });
-        if (loopFocus && (prevIndex - cols < minIndex || nextIndex < 0)) {
-          const col = prevIndex % cols;
-          const maxCol = maxIndex % cols;
+      nextIndex = findNonDisabledListIndex(list, {
+        startingIndex: prevIndex,
+        amount: verticalCols,
+        decrement: verticalDirection === 'up',
+        disabledIndices
+      });
+      if (loopFocus) {
+        if (verticalDirection === 'up' && (prevIndex - verticalCols < minIndex || nextIndex < 0)) {
+          const col = prevIndex % verticalCols;
+          const maxCol = maxIndex % verticalCols;
           const offset = maxIndex - (maxCol - col);
           if (maxCol === col) {
             nextIndex = maxIndex;
           } else {
-            nextIndex = maxCol > col ? offset : offset - cols;
+            nextIndex = maxCol > col ? offset : offset - verticalCols;
+          }
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
           }
         }
-      }
-      if (isIndexOutOfListBounds(listRef, nextIndex)) {
-        nextIndex = prevIndex;
-      }
-    }
-  }
-  if (event.key === ARROW_DOWN) {
-    const domBasedCandidate = navigateVertically('down');
-    if (domBasedCandidate !== undefined) {
-      if (stop) {
-        stopEvent(event);
-      }
-      nextIndex = domBasedCandidate;
-    } else {
-      if (stop) {
-        stopEvent(event);
-      }
-      if (prevIndex === -1) {
-        nextIndex = minIndex;
-      } else {
-        nextIndex = findNonDisabledListIndex(listRef, {
-          startingIndex: prevIndex,
-          amount: cols,
-          disabledIndices
-        });
-        if (loopFocus && prevIndex + cols > maxIndex) {
-          nextIndex = findNonDisabledListIndex(listRef, {
-            startingIndex: prevIndex % cols - cols,
-            amount: cols,
+        if (verticalDirection === 'down' && prevIndex + verticalCols > maxIndex) {
+          nextIndex = findNonDisabledListIndex(list, {
+            startingIndex: prevIndex % verticalCols - verticalCols,
+            amount: verticalCols,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       }
-      if (isIndexOutOfListBounds(listRef, nextIndex)) {
-        nextIndex = prevIndex;
-      }
+    }
+    if (isIndexOutOfListBounds(list, nextIndex)) {
+      nextIndex = prevIndex;
     }
   }
 
@@ -200,21 +208,27 @@ export function getGridNavigatedIndex(listRef, {
         stopEvent(event);
       }
       if (prevIndex % cols !== cols - 1) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex,
           disabledIndices
         });
         if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) {
-          nextIndex = findNonDisabledListIndex(listRef, {
+          nextIndex = findNonDisabledListIndex(list, {
             startingIndex: prevIndex - prevIndex % cols - 1,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       } else if (loopFocus) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex - prevIndex % cols - 1,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       }
       if (isDifferentGridRow(nextIndex, cols, prevRow)) {
         nextIndex = prevIndex;
@@ -225,36 +239,45 @@ export function getGridNavigatedIndex(listRef, {
         stopEvent(event);
       }
       if (prevIndex % cols !== 0) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex,
           decrement: true,
           disabledIndices
         });
         if (loopFocus && isDifferentGridRow(nextIndex, cols, prevRow)) {
-          nextIndex = findNonDisabledListIndex(listRef, {
+          nextIndex = findNonDisabledListIndex(list, {
             startingIndex: prevIndex + (cols - prevIndex % cols),
             decrement: true,
             disabledIndices
           });
+          if (onLoop) {
+            nextIndex = onLoop(event, prevIndex, nextIndex);
+          }
         }
       } else if (loopFocus) {
-        nextIndex = findNonDisabledListIndex(listRef, {
+        nextIndex = findNonDisabledListIndex(list, {
           startingIndex: prevIndex + (cols - prevIndex % cols),
           decrement: true,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       }
       if (isDifferentGridRow(nextIndex, cols, prevRow)) {
         nextIndex = prevIndex;
       }
     }
     const lastRow = floor(maxIndex / cols) === prevRow;
-    if (isIndexOutOfListBounds(listRef, nextIndex)) {
+    if (isIndexOutOfListBounds(list, nextIndex)) {
       if (loopFocus && lastRow) {
-        nextIndex = event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(listRef, {
+        nextIndex = event.key === (rtl ? ARROW_RIGHT : ARROW_LEFT) ? maxIndex : findNonDisabledListIndex(list, {
           startingIndex: prevIndex - prevIndex % cols - 1,
           disabledIndices
         });
+        if (onLoop) {
+          nextIndex = onLoop(event, prevIndex, nextIndex);
+        }
       } else {
         nextIndex = prevIndex;
       }
@@ -333,16 +356,23 @@ export function getGridCellIndexOfCorner(index, sizes, cellMap, cols, corner) {
 export function getGridCellIndices(indices, cellMap) {
   return cellMap.flatMap((index, cellIndex) => indices.includes(index) ? [cellIndex] : []);
 }
-export function isListIndexDisabled(listRef, index, disabledIndices) {
-  if (typeof disabledIndices === 'function') {
-    return disabledIndices(index);
+export function isListIndexDisabled(list, index, disabledIndices) {
+  const isExplicitlyDisabled = typeof disabledIndices === 'function' ? disabledIndices(index) : disabledIndices?.includes(index) ?? false;
+  if (isExplicitlyDisabled) {
+    return true;
   }
-  if (disabledIndices) {
-    return disabledIndices.includes(index);
-  }
-  const element = listRef.current[index];
+  const element = list[index];
   if (!element) {
     return false;
   }
-  return element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true';
+  if (!isElementVisible(element)) {
+    return true;
+  }
+  return !disabledIndices && (element.hasAttribute('disabled') || element.getAttribute('aria-disabled') === 'true');
+}
+export function isElementVisible(element) {
+  if (typeof element.checkVisibility === 'function') {
+    return element.checkVisibility();
+  }
+  return getComputedStyle(element).display !== 'none';
 }

package/esm/floating-ui-react/utils/element.d.ts

@@ -1,11 +1,11 @@
 import { type PopupTriggerMap } from "../../utils/popups/index.js";
-export declare function activeElement(doc: Document): Element | null;
-export declare function contains(parent?: Element | null, child?: Element | null): boolean;
+import { activeElement, contains, getTarget } from "./shadowDom.js";
+export { activeElement, contains, getTarget };
 export declare function isTargetInsideEnabledTrigger(target: EventTarget | null, triggerElements: PopupTriggerMap): boolean;
-export declare function getTarget(event: Event): EventTarget | null;
 export declare function isEventTargetWithin(event: Event, node: Node | null | undefined): boolean;
 export declare function isRootElement(element: Element): boolean;
 export declare function isTypeableElement(element: unknown): boolean;
+export declare function isInteractiveElement(element: Element | null): boolean;
 export declare function isTypeableCombobox(element: Element | null): boolean;
 export declare function matchesFocusVisible(element: Element | null): boolean;
 export declare function getFloatingFocusElement(floatingElement: HTMLElement | null | undefined): HTMLElement | null;

package/esm/floating-ui-react/utils/element.js

@@ -1,38 +1,8 @@
-import { isElement, isHTMLElement, isShadowRoot } from '@floating-ui/utils/dom';
+import { isElement, isHTMLElement } from '@floating-ui/utils/dom';
 import { isJSDOM } from '@base-ui/utils/detectBrowser';
 import { FOCUSABLE_ATTRIBUTE, TYPEABLE_SELECTOR } from "./constants.js";
-export function activeElement(doc) {
-  let element = doc.activeElement;
-  while (element?.shadowRoot?.activeElement != null) {
-    element = element.shadowRoot.activeElement;
-  }
-  return element;
-}
-export function contains(parent, child) {
-  if (!parent || !child) {
-    return false;
-  }
-  const rootNode = child.getRootNode?.();
-
-  // First, attempt with faster native method
-  if (parent.contains(child)) {
-    return true;
-  }
-
-  // then fallback to custom implementation with Shadow DOM support
-  if (rootNode && isShadowRoot(rootNode)) {
-    let next = child;
-    while (next) {
-      if (parent === next) {
-        return true;
-      }
-      next = next.parentNode || next.host;
-    }
-  }
-
-  // Give up, the result is false
-  return false;
-}
+import { activeElement, contains, getTarget } from "./shadowDom.js";
+export { activeElement, contains, getTarget };
 export function isTargetInsideEnabledTrigger(target, triggerElements) {
   if (!isElement(target)) {
     return false;
@@ -48,15 +18,6 @@ export function isTargetInsideEnabledTrigger(target, triggerElements) {
   }
   return false;
 }
-export function getTarget(event) {
-  if ('composedPath' in event) {
-    return event.composedPath()[0];
-  }
-
-  // TS thinks `event` is of type never as it assumes all browsers support
-  // `composedPath()`, but browsers without shadow DOM don't.
-  return event.target;
-}
 export function isEventTargetWithin(event, node) {
   if (node == null) {
     return false;
@@ -75,6 +36,9 @@ export function isRootElement(element) {
 export function isTypeableElement(element) {
   return isHTMLElement(element) && element.matches(TYPEABLE_SELECTOR);
 }
+export function isInteractiveElement(element) {
+  return element?.closest(`button,a[href],[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`) != null;
+}
 export function isTypeableCombobox(element) {
   if (!element) {
     return false;

package/esm/floating-ui-react/utils/enqueueFocus.d.ts

@@ -1,8 +1,9 @@
-import type { FocusableElement } from 'tabbable';
+import type { FocusableElement } from "./tabbable.js";
+import { NOOP } from "../../utils/noop.js";
 interface Options {
   preventScroll?: boolean | undefined;
   cancelPrevious?: boolean | undefined;
   sync?: boolean | undefined;
 }
-export declare function enqueueFocus(el: FocusableElement | null, options?: Options): void;
+export declare function enqueueFocus(el: FocusableElement | null, options?: Options): typeof NOOP;
 export {};

package/esm/floating-ui-react/utils/enqueueFocus.js

@@ -1,3 +1,4 @@
+import { NOOP } from "../../utils/noop.js";
 let rafId = 0;
 export function enqueueFocus(el, options = {}) {
   const {
@@ -13,7 +14,14 @@ export function enqueueFocus(el, options = {}) {
   });
   if (sync) {
     exec();
-  } else {
-    rafId = requestAnimationFrame(exec);
+    return NOOP;
   }
+  const currentRafId = requestAnimationFrame(exec);
+  rafId = currentRafId;
+  return () => {
+    if (rafId === currentRafId) {
+      cancelAnimationFrame(currentRafId);
+      rafId = 0;
+    }
+  };
 }

package/esm/floating-ui-react/utils/getEmptyRootContext.js

@@ -3,12 +3,13 @@ import { FloatingRootStore } from "../components/FloatingRootStore.js";
 export function getEmptyRootContext() {
   return new FloatingRootStore({
     open: false,
+    transitionStatus: undefined,
     floatingElement: null,
     referenceElement: null,
     triggerElements: new PopupTriggerMap(),
     floatingId: '',
+    syncOnly: false,
     nested: false,
-    noEmit: false,
     onOpenChange: undefined
   });
 }

package/esm/floating-ui-react/utils/markOthers.d.ts

@@ -1,4 +1,10 @@
 type Undo = () => void;
+interface MarkOthersOptions {
+  ariaHidden?: boolean | undefined;
+  inert?: boolean | undefined;
+  mark?: boolean | undefined;
+  markerIgnoreElements?: Element[] | undefined;
+}
 export declare const supportsInert: () => boolean;
-export declare function markOthers(avoidElements: Element[], ariaHidden?: boolean, inert?: boolean): Undo;
+export declare function markOthers(avoidElements: Element[], options?: MarkOthersOptions): Undo;
 export {};