@base-ui/react 1.2.0 → 1.4.0

package/esm/floating-ui-react/hooks/useListNavigation.js

@@ -2,11 +2,14 @@
 
 import * as React from 'react';
 import { isHTMLElement } from '@floating-ui/utils/dom';
+import { isMouseWithinBounds } from '@base-ui/utils/isMouseWithinBounds';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { activeElement, contains, getTarget, isTypeableCombobox, isVirtualClick, isVirtualPointerEvent, stopEvent, getFloatingFocusElement, isIndexOutOfListBounds, getMinListIndex, getMaxListIndex, getGridNavigatedIndex, isListIndexDisabled, createGridCellMap, getGridCellIndices, getGridCellIndexOfCorner, findNonDisabledListIndex } from "../utils.js";
+import { activeElement, contains, getTarget, isTypeableCombobox, getFloatingFocusElement } from "../utils/element.js";
+import { isVirtualClick, isVirtualPointerEvent, stopEvent } from "../utils/event.js";
+import { isIndexOutOfListBounds, getMinListIndex, getMaxListIndex, getGridNavigatedIndex, isListIndexDisabled, createGridCellMap, getGridCellIndices, getGridCellIndexOfCorner, findNonDisabledListIndex } from "../utils/composite.js";
 import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
@@ -112,6 +115,7 @@ export function useListNavigation(context, props) {
   const previousOpenRef = React.useRef(open);
   const forceSyncFocusRef = React.useRef(false);
   const forceScrollIntoViewRef = React.useRef(false);
+  const cancelQueuedFocusRef = React.useRef(null);
   const disabledIndicesRef = useValueAsRef(disabledIndices);
   const latestOpenRef = useValueAsRef(open);
   const selectedIndexRef = useValueAsRef(selectedIndex);
@@ -121,7 +125,7 @@ export function useListNavigation(context, props) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
       } else {
-        enqueueFocus(item, {
+        cancelQueuedFocusRef.current = enqueueFocus(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -225,7 +229,7 @@ export function useListNavigation(context, props) {
         };
         waitForListPopulated();
       }
-    } else if (!isIndexOutOfListBounds(listRef, activeIndex)) {
+    } else if (!isIndexOutOfListBounds(listRef.current, activeIndex)) {
       indexRef.current = activeIndex;
       focusItem();
       forceScrollIntoViewRef.current = false;
@@ -260,17 +264,17 @@ export function useListNavigation(context, props) {
     }
   }, [open, focusItemOnOpen]);
   const hasActiveIndex = activeIndex != null;
-  const item = React.useMemo(() => {
-    function syncCurrentTarget(event) {
-      if (!latestOpenRef.current) {
-        return;
-      }
-      const index = listRef.current.indexOf(event.currentTarget);
-      if (index !== -1 && indexRef.current !== index) {
-        indexRef.current = index;
-        onNavigate(event);
-      }
+  const syncCurrentTarget = useStableCallback(event => {
+    if (!latestOpenRef.current) {
+      return;
+    }
+    const index = listRef.current.indexOf(event.currentTarget);
+    if (index !== -1 && (indexRef.current !== index || activeIndex !== index)) {
+      indexRef.current = index;
+      onNavigate(event);
     }
+  });
+  const item = React.useMemo(() => {
     const itemProps = {
       onFocus(event) {
         forceSyncFocusRef.current = true;
@@ -295,26 +299,32 @@ export function useListNavigation(context, props) {
         }
         forceSyncFocusRef.current = true;
         const relatedTarget = event.relatedTarget;
+        if (isMouseWithinBounds(event)) {
+          return;
+        }
         if (!focusItemOnHover || listRef.current.includes(relatedTarget)) {
           return;
         }
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
-        enqueueFocus(null, {
-          sync: true
-        });
+        cancelQueuedFocusRef.current?.();
+        cancelQueuedFocusRef.current = null;
         indexRef.current = -1;
         onNavigate(event);
         if (!virtual) {
-          floatingFocusElementRef.current?.focus({
-            preventScroll: true
-          });
+          const floatingFocusEl = floatingFocusElementRef.current;
+          const activeEl = activeElement(ownerDocument(floatingFocusEl));
+          if (floatingFocusEl && contains(floatingFocusEl, activeEl)) {
+            floatingFocusEl.focus({
+              preventScroll: true
+            });
+          }
         }
       }
     };
     return itemProps;
-  }, [latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
+  }, [syncCurrentTarget, latestOpenRef, floatingFocusElementRef, focusItemOnHover, listRef, onNavigate, resetOnPointerLeaveRef, virtual]);
   const getParentOrientation = React.useCallback(() => {
     return parentOrientation ?? tree?.nodesRef.current.find(node => node.id === parentId)?.context?.dataRef?.current.orientation;
   }, [parentId, tree, parentOrientation]);
@@ -379,12 +389,10 @@ export function useListNavigation(context, props) {
       // To calculate movements on the grid, we use hypothetical cell indices
       // as if every item was 1x1, then convert back to real indices.
       const cellMap = createGridCellMap(sizes, cols, false);
-      const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(listRef, index, disabledIndices));
+      const minGridIndex = cellMap.findIndex(index => index != null && !isListIndexDisabled(listRef.current, index, disabledIndices));
       // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[getGridNavigatedIndex({
-        current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
-      }, {
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !isListIndexDisabled(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      const index = cellMap[getGridNavigatedIndex(cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null), {
         event,
         orientation,
         loopFocus,
@@ -392,7 +400,7 @@ export function useListNavigation(context, props) {
         cols,
         // treat undefined (empty grid spaces) as disabled indices so we
         // don't end up in them
-        disabledIndices: getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => isListIndexDisabled(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
+        disabledIndices: getGridCellIndices([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => isListIndexDisabled(listRef.current, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
         minIndex: minGridIndex,
         maxIndex: maxGridIndex,
         prevIndex: getGridCellIndexOfCorner(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
@@ -431,13 +439,13 @@ export function useListNavigation(context, props) {
               indexRef.current = minIndex;
             }
           } else {
-            indexRef.current = findNonDisabledListIndex(listRef, {
+            indexRef.current = findNonDisabledListIndex(listRef.current, {
               startingIndex: currentIndex,
               disabledIndices
             });
           }
         } else {
-          indexRef.current = Math.min(maxIndex, findNonDisabledListIndex(listRef, {
+          indexRef.current = Math.min(maxIndex, findNonDisabledListIndex(listRef.current, {
             startingIndex: currentIndex,
             disabledIndices
           }));
@@ -452,20 +460,20 @@ export function useListNavigation(context, props) {
             indexRef.current = maxIndex;
           }
         } else {
-          indexRef.current = findNonDisabledListIndex(listRef, {
+          indexRef.current = findNonDisabledListIndex(listRef.current, {
             startingIndex: currentIndex,
             decrement: true,
             disabledIndices
           });
         }
       } else {
-        indexRef.current = Math.max(minIndex, findNonDisabledListIndex(listRef, {
+        indexRef.current = Math.max(minIndex, findNonDisabledListIndex(listRef.current, {
           startingIndex: currentIndex,
           decrement: true,
           disabledIndices
         }));
       }
-      if (isIndexOutOfListBounds(listRef, indexRef.current)) {
+      if (isIndexOutOfListBounds(listRef.current, indexRef.current)) {
         indexRef.current = -1;
       }
       onNavigate(event);

package/esm/floating-ui-react/hooks/useRole.d.ts

@@ -6,7 +6,7 @@ export interface UseRoleProps {
    * The role of the floating element.
    * @default 'dialog'
    */
-  role?: (AriaRole | ComponentRole) | undefined;
+  role?: AriaRole | ComponentRole | undefined;
 }
 /**
  * Adds base screen reader props to the reference and floating elements for a

package/esm/floating-ui-react/hooks/useRole.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useId } from '@base-ui/utils/useId';
-import { getFloatingFocusElement } from "../utils.js";
+import { getFloatingFocusElement } from "../utils/element.js";
 import { useFloatingParentNodeId } from "../components/FloatingTree.js";
 import { EMPTY_OBJECT } from "../../utils/constants.js";
 const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);

package/esm/floating-ui-react/hooks/useSyncedFloatingRootContext.d.ts

@@ -4,10 +4,6 @@ import { PopupStoreContext, PopupStoreSelectors, PopupStoreState } from "../../u
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
 export interface UseSyncedFloatingRootContextOptions<State extends PopupStoreState<any>> {
   popupStore: ReactStore<State, PopupStoreContext<any>, PopupStoreSelectors>;
-  /**
-   * Whether to prevent the auto-emitted `openchange` event.
-   */
-  noEmit?: boolean | undefined;
   /**
    * Whether the Popup element is passed to Floating UI as the floating element instead of the default Positioner.
    */

package/esm/floating-ui-react/hooks/useSyncedFloatingRootContext.js

@@ -13,7 +13,6 @@ import { FloatingRootStore } from "../components/FloatingRootStore.js";
 export function useSyncedFloatingRootContext(options) {
   const {
     popupStore,
-    noEmit = false,
     treatPopupAsFloatingElement = false,
     onOpenChange
   } = options;
@@ -25,13 +24,14 @@ export function useSyncedFloatingRootContext(options) {
   const triggerElements = popupStore.context.triggerElements;
   const store = useRefWithInit(() => new FloatingRootStore({
     open,
+    transitionStatus: undefined,
     referenceElement,
     floatingElement,
     triggerElements,
     onOpenChange,
     floatingId,
-    nested,
-    noEmit
+    syncOnly: true,
+    nested
   })).current;
   useIsoLayoutEffect(() => {
     const valuesToSync = {
@@ -52,6 +52,5 @@ export function useSyncedFloatingRootContext(options) {
   // TODO: When `setOpen` is a part of the PopupStore API, we don't need to sync it.
   store.context.onOpenChange = onOpenChange;
   store.context.nested = nested;
-  store.context.noEmit = noEmit;
   return store;
 }

package/esm/floating-ui-react/hooks/useTypeahead.d.ts

@@ -16,6 +16,12 @@ export interface UseTypeaheadProps {
    * Callback invoked with the matching index if found as the user types.
    */
   onMatch?: ((index: number) => void) | undefined;
+  /**
+   * Optional list of item elements that correspond to `listRef` indices.
+   * When an element exists for an index, typeahead skips it if it is hidden
+   * via CSS (`display: none`).
+   */
+  elementsRef?: React.RefObject<Array<HTMLElement | null>> | undefined;
   /**
    * Callback invoked with the typing state as the user types.
    */
@@ -35,7 +41,7 @@ export interface UseTypeaheadProps {
    * The index of the selected item in the list, if available.
    * @default null
    */
-  selectedIndex?: (number | null) | undefined;
+  selectedIndex?: number | null | undefined;
 }
 /**
  * Provides a matching callback that can be used to focus an item as the user

package/esm/floating-ui-react/hooks/useTypeahead.js

@@ -4,7 +4,9 @@ import * as React from 'react';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useTimeout } from '@base-ui/utils/useTimeout';
-import { contains, stopEvent } from "../utils.js";
+import { contains } from "../utils/element.js";
+import { stopEvent } from "../utils/event.js";
+import { isElementVisible } from "../utils/composite.js";
 /**
  * Provides a matching callback that can be used to focus an item as the user
  * types, often used in tandem with `useListNavigation()`.
@@ -16,6 +18,7 @@ export function useTypeahead(context, props) {
   const open = store.useState('open');
   const {
     listRef,
+    elementsRef,
     activeIndex,
     onMatch: onMatchProp,
     onTypingChange,
@@ -55,16 +58,35 @@ export function useTypeahead(context, props) {
     }
   });
   const onKeyDown = useStableCallback(event => {
-    function getMatchingIndex(list, orderedList, string) {
-      const str = orderedList.find(text => text?.toLocaleLowerCase().indexOf(string.toLocaleLowerCase()) === 0);
-      return str ? list.indexOf(str) : -1;
+    function isVisible(index) {
+      const element = elementsRef?.current[index];
+      return !element || isElementVisible(element);
+    }
+    function getMatchingIndex(list, string, startIndex = 0) {
+      if (list.length === 0) {
+        return -1;
+      }
+      const normalizedStartIndex = (startIndex % list.length + list.length) % list.length;
+      const lowerString = string.toLocaleLowerCase();
+      for (let offset = 0; offset < list.length; offset += 1) {
+        const index = (normalizedStartIndex + offset) % list.length;
+        const text = list[index];
+        if (!text?.toLocaleLowerCase().startsWith(lowerString) || !isVisible(index)) {
+          continue;
+        }
+        return index;
+      }
+      return -1;
     }
     const listContent = listRef.current;
+    if (stringRef.current.length > 0 && event.key === ' ') {
+      // Space should continue the in-progress typeahead session.
+      stopEvent(event);
+      setTypingChange(true);
+    }
     if (stringRef.current.length > 0 && stringRef.current[0] !== ' ') {
-      if (getMatchingIndex(listContent, listContent, stringRef.current) === -1) {
+      if (getMatchingIndex(listContent, stringRef.current) === -1 && event.key !== ' ') {
         setTypingChange(false);
-      } else if (event.key === ' ') {
-        stopEvent(event);
       }
     }
     if (listContent == null ||
@@ -106,7 +128,8 @@ export function useTypeahead(context, props) {
     // If this is a new typing session (string is empty), base it on the current
     // selection/active item; otherwise continue from the last matched index.
     const prevIndex = isNewSession ? selectedIndex ?? activeIndex ?? -1 : prevIndexRef.current;
-    const index = getMatchingIndex(listContent, [...listContent.slice((prevIndex || 0) + 1), ...listContent.slice(0, (prevIndex || 0) + 1)], stringRef.current);
+    const startIndex = (prevIndex ?? 0) + 1;
+    const index = getMatchingIndex(listContent, stringRef.current, startIndex);
     if (index !== -1) {
       onMatchProp?.(index);
       matchIndexRef.current = index;
@@ -140,14 +163,9 @@ export function useTypeahead(context, props) {
   const floating = React.useMemo(() => {
     return {
       onKeyDown,
-      onKeyUp(event) {
-        if (event.key === ' ') {
-          setTypingChange(false);
-        }
-      },
       onBlur
     };
-  }, [onKeyDown, onBlur, setTypingChange]);
+  }, [onKeyDown, onBlur]);
   return React.useMemo(() => enabled ? {
     reference,
     floating

package/esm/floating-ui-react/safePolygon.d.ts

@@ -1,9 +1,5 @@
-import type { HandleClose } from "./hooks/useHover.js";
-export interface SafePolygonOptions {
-  buffer?: number | undefined;
-  blockPointerEvents?: boolean | undefined;
-  requireIntent?: boolean | undefined;
-}
+import type { HandleClose, HandleCloseOptions } from "./hooks/useHoverShared.js";
+export interface SafePolygonOptions extends HandleCloseOptions {}
 /**
  * Generates a safe polygon area that the user can traverse without closing the
  * floating element once leaving the reference element.