@base-ui/react 1.2.0 → 1.4.0

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

@@ -9,11 +9,14 @@ exports.ESCAPE = void 0;
 exports.useListNavigation = useListNavigation;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _isMouseWithinBounds = require("@base-ui/utils/isMouseWithinBounds");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
+var _composite = require("../utils/composite");
 var _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -99,14 +102,14 @@ function useListNavigation(context, props) {
       console.warn('In grid list navigation mode (`cols` > 1), the `orientation` should', 'be either "horizontal" or "both".');
     }
   }
-  const floatingFocusElement = (0, _utils.getFloatingFocusElement)(floatingElement);
+  const floatingFocusElement = (0, _element.getFloatingFocusElement)(floatingElement);
   const floatingFocusElementRef = (0, _useValueAsRef.useValueAsRef)(floatingFocusElement);
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     dataRef.current.orientation = orientation;
   }, [dataRef, orientation]);
-  const typeableComboboxReference = (0, _utils.isTypeableCombobox)(domReferenceElement);
+  const typeableComboboxReference = (0, _element.isTypeableCombobox)(domReferenceElement);
   const focusItemOnOpenRef = React.useRef(focusItemOnOpen);
   const indexRef = React.useRef(selectedIndex ?? -1);
   const keyRef = React.useRef(null);
@@ -119,6 +122,7 @@ 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 = (0, _useValueAsRef.useValueAsRef)(disabledIndices);
   const latestOpenRef = (0, _useValueAsRef.useValueAsRef)(open);
   const selectedIndexRef = (0, _useValueAsRef.useValueAsRef)(selectedIndex);
@@ -128,7 +132,7 @@ function useListNavigation(context, props) {
       if (virtual) {
         tree?.events.emit('virtualfocus', item);
       } else {
-        (0, _enqueueFocus.enqueueFocus)(item, {
+        cancelQueuedFocusRef.current = (0, _enqueueFocus.enqueueFocus)(item, {
           sync: forceSyncFocusRef.current,
           preventScroll: true
         });
@@ -225,14 +229,14 @@ function useListNavigation(context, props) {
             runs += 1;
           } else {
             // initially focus the first non-disabled item
-            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? (0, _utils.getMinListIndex)(listRef) : (0, _utils.getMaxListIndex)(listRef);
+            indexRef.current = keyRef.current == null || isMainOrientationToEndKey(keyRef.current, orientation, rtl) || nested ? (0, _composite.getMinListIndex)(listRef) : (0, _composite.getMaxListIndex)(listRef);
             keyRef.current = null;
             onNavigate();
           }
         };
         waitForListPopulated();
       }
-    } else if (!(0, _utils.isIndexOutOfListBounds)(listRef, activeIndex)) {
+    } else if (!(0, _composite.isIndexOutOfListBounds)(listRef.current, activeIndex)) {
       indexRef.current = activeIndex;
       focusItem();
       forceScrollIntoViewRef.current = false;
@@ -247,8 +251,8 @@ function useListNavigation(context, props) {
     }
     const nodes = tree.nodesRef.current;
     const parent = nodes.find(node => node.id === parentId)?.context?.elements.floating;
-    const activeEl = (0, _utils.activeElement)((0, _owner.ownerDocument)(floatingElement));
-    const treeContainsActiveEl = nodes.some(node => node.context && (0, _utils.contains)(node.context.elements.floating, activeEl));
+    const activeEl = (0, _element.activeElement)((0, _owner.ownerDocument)(floatingElement));
+    const treeContainsActiveEl = nodes.some(node => node.context && (0, _element.contains)(node.context.elements.floating, activeEl));
     if (parent && !treeContainsActiveEl && isPointerModalityRef.current) {
       parent.focus({
         preventScroll: true
@@ -267,17 +271,17 @@ 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 = (0, _useStableCallback.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;
@@ -302,26 +306,32 @@ function useListNavigation(context, props) {
         }
         forceSyncFocusRef.current = true;
         const relatedTarget = event.relatedTarget;
+        if ((0, _isMouseWithinBounds.isMouseWithinBounds)(event)) {
+          return;
+        }
         if (!focusItemOnHover || listRef.current.includes(relatedTarget)) {
           return;
         }
         if (!resetOnPointerLeaveRef.current) {
           return;
         }
-        (0, _enqueueFocus.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 = (0, _element.activeElement)((0, _owner.ownerDocument)(floatingFocusEl));
+          if (floatingFocusEl && (0, _element.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]);
@@ -347,7 +357,7 @@ function useListNavigation(context, props) {
       // If the nested list's close key is also the parent navigation key,
       // let the parent navigate. Otherwise, stop propagating the event.
       if (!isMainOrientationKey(event.key, getParentOrientation())) {
-        (0, _utils.stopEvent)(event);
+        (0, _event.stopEvent)(event);
       }
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent));
       if ((0, _dom.isHTMLElement)(domReferenceElement)) {
@@ -360,16 +370,16 @@ function useListNavigation(context, props) {
       return;
     }
     const currentIndex = indexRef.current;
-    const minIndex = (0, _utils.getMinListIndex)(listRef, disabledIndices);
-    const maxIndex = (0, _utils.getMaxListIndex)(listRef, disabledIndices);
+    const minIndex = (0, _composite.getMinListIndex)(listRef, disabledIndices);
+    const maxIndex = (0, _composite.getMaxListIndex)(listRef, disabledIndices);
     if (!typeableComboboxReference) {
       if (event.key === 'Home') {
-        (0, _utils.stopEvent)(event);
+        (0, _event.stopEvent)(event);
         indexRef.current = minIndex;
         onNavigate(event);
       }
       if (event.key === 'End') {
-        (0, _utils.stopEvent)(event);
+        (0, _event.stopEvent)(event);
         indexRef.current = maxIndex;
         onNavigate(event);
       }
@@ -385,13 +395,11 @@ 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 = (0, _utils.createGridCellMap)(sizes, cols, false);
-      const minGridIndex = cellMap.findIndex(index => index != null && !(0, _utils.isListIndexDisabled)(listRef, index, disabledIndices));
+      const cellMap = (0, _composite.createGridCellMap)(sizes, cols, false);
+      const minGridIndex = cellMap.findIndex(index => index != null && !(0, _composite.isListIndexDisabled)(listRef.current, index, disabledIndices));
       // last enabled index
-      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _utils.isListIndexDisabled)(listRef, index, disabledIndices) ? cellIndex : foundIndex, -1);
-      const index = cellMap[(0, _utils.getGridNavigatedIndex)({
-        current: cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null)
-      }, {
+      const maxGridIndex = cellMap.reduce((foundIndex, index, cellIndex) => index != null && !(0, _composite.isListIndexDisabled)(listRef.current, index, disabledIndices) ? cellIndex : foundIndex, -1);
+      const index = cellMap[(0, _composite.getGridNavigatedIndex)(cellMap.map(itemIndex => itemIndex != null ? listRef.current[itemIndex] : null), {
         event,
         orientation,
         loopFocus,
@@ -399,10 +407,10 @@ function useListNavigation(context, props) {
         cols,
         // treat undefined (empty grid spaces) as disabled indices so we
         // don't end up in them
-        disabledIndices: (0, _utils.getGridCellIndices)([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => (0, _utils.isListIndexDisabled)(listRef, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
+        disabledIndices: (0, _composite.getGridCellIndices)([...((typeof disabledIndices !== 'function' ? disabledIndices : null) || listRef.current.map((_, listIndex) => (0, _composite.isListIndexDisabled)(listRef.current, listIndex, disabledIndices) ? listIndex : undefined)), undefined], cellMap),
         minIndex: minGridIndex,
         maxIndex: maxGridIndex,
-        prevIndex: (0, _utils.getGridCellIndexOfCorner)(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
+        prevIndex: (0, _composite.getGridCellIndexOfCorner)(indexRef.current > maxIndex ? minIndex : indexRef.current, sizes, cellMap, cols,
         // use a corner matching the edge closest to the direction
         // we're moving in so we don't end up in the same item. Prefer
         // top/left over bottom/right.
@@ -419,10 +427,10 @@ function useListNavigation(context, props) {
       }
     }
     if (isMainOrientationKey(event.key, orientation)) {
-      (0, _utils.stopEvent)(event);
+      (0, _event.stopEvent)(event);
 
       // Reset the index if no item is focused.
-      if (open && !virtual && (0, _utils.activeElement)(event.currentTarget.ownerDocument) === event.currentTarget) {
+      if (open && !virtual && (0, _element.activeElement)(event.currentTarget.ownerDocument) === event.currentTarget) {
         indexRef.current = isMainOrientationToEndKey(event.key, orientation, rtl) ? minIndex : maxIndex;
         onNavigate(event);
         return;
@@ -438,13 +446,13 @@ function useListNavigation(context, props) {
               indexRef.current = minIndex;
             }
           } else {
-            indexRef.current = (0, _utils.findNonDisabledListIndex)(listRef, {
+            indexRef.current = (0, _composite.findNonDisabledListIndex)(listRef.current, {
               startingIndex: currentIndex,
               disabledIndices
             });
           }
         } else {
-          indexRef.current = Math.min(maxIndex, (0, _utils.findNonDisabledListIndex)(listRef, {
+          indexRef.current = Math.min(maxIndex, (0, _composite.findNonDisabledListIndex)(listRef.current, {
             startingIndex: currentIndex,
             disabledIndices
           }));
@@ -459,20 +467,20 @@ function useListNavigation(context, props) {
             indexRef.current = maxIndex;
           }
         } else {
-          indexRef.current = (0, _utils.findNonDisabledListIndex)(listRef, {
+          indexRef.current = (0, _composite.findNonDisabledListIndex)(listRef.current, {
             startingIndex: currentIndex,
             decrement: true,
             disabledIndices
           });
         }
       } else {
-        indexRef.current = Math.max(minIndex, (0, _utils.findNonDisabledListIndex)(listRef, {
+        indexRef.current = Math.max(minIndex, (0, _composite.findNonDisabledListIndex)(listRef.current, {
           startingIndex: currentIndex,
           decrement: true,
           disabledIndices
         }));
       }
-      if ((0, _utils.isIndexOutOfListBounds)(listRef, indexRef.current)) {
+      if ((0, _composite.isIndexOutOfListBounds)(listRef.current, indexRef.current)) {
         indexRef.current = -1;
       }
       onNavigate(event);
@@ -493,11 +501,11 @@ function useListNavigation(context, props) {
           // If the event originated from within a nested element (e.g., a Dialog opened from
           // within the menu), don't close the menu. The nested element has its own focus
           // management and should handle the Tab key.
-          const target = (0, _utils.getTarget)(event.nativeEvent);
-          if (target && !(0, _utils.contains)(floatingFocusElementRef.current, target)) {
+          const target = (0, _element.getTarget)(event.nativeEvent);
+          if (target && !(0, _element.contains)(floatingFocusElementRef.current, target)) {
             return;
           }
-          (0, _utils.stopEvent)(event);
+          (0, _event.stopEvent)(event);
           store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent));
           if ((0, _dom.isHTMLElement)(domReferenceElement)) {
             domReferenceElement.focus();
@@ -513,14 +521,14 @@ function useListNavigation(context, props) {
   }, [ariaActiveDescendantProp, commonOnKeyDown, floatingFocusElementRef, orientation, typeableComboboxReference, store, open, virtual, domReferenceElement]);
   const trigger = React.useMemo(() => {
     function checkVirtualMouse(event) {
-      if (focusItemOnOpen === 'auto' && (0, _utils.isVirtualClick)(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && (0, _event.isVirtualClick)(event.nativeEvent)) {
         focusItemOnOpenRef.current = !virtual;
       }
     }
     function checkVirtualPointer(event) {
       // `pointerdown` fires first, reset the state then perform the checks.
       focusItemOnOpenRef.current = focusItemOnOpen;
-      if (focusItemOnOpen === 'auto' && (0, _utils.isVirtualPointerEvent)(event.nativeEvent)) {
+      if (focusItemOnOpen === 'auto' && (0, _event.isVirtualPointerEvent)(event.nativeEvent)) {
         focusItemOnOpenRef.current = true;
       }
     }
@@ -548,9 +556,9 @@ function useListNavigation(context, props) {
         }
         if (nested) {
           if (isParentCrossOpenKey) {
-            (0, _utils.stopEvent)(event);
+            (0, _event.stopEvent)(event);
             if (currentOpen) {
-              indexRef.current = (0, _utils.getMinListIndex)(listRef, disabledIndicesRef.current);
+              indexRef.current = (0, _composite.getMinListIndex)(listRef, disabledIndicesRef.current);
               onNavigate(event);
             } else {
               store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent, event.currentTarget));
@@ -562,7 +570,7 @@ function useListNavigation(context, props) {
           if (selectedIndexRef.current != null) {
             indexRef.current = selectedIndexRef.current;
           }
-          (0, _utils.stopEvent)(event);
+          (0, _event.stopEvent)(event);
           if (!currentOpen && openOnArrowKeyDown) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.listNavigation, event.nativeEvent, event.currentTarget));
           } else {

package/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/floating-ui-react/hooks/useRole.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useRole = useRole;
 var React = _interopRequireWildcard(require("react"));
 var _useId = require("@base-ui/utils/useId");
-var _utils = require("../utils");
+var _element = require("../utils/element");
 var _FloatingTree = require("../components/FloatingTree");
 var _constants = require("../../utils/constants");
 const componentRoleToAriaRoleMap = new Map([['select', 'listbox'], ['combobox', 'listbox'], ['label', false]]);
@@ -28,7 +28,7 @@ function useRole(context, props = {}) {
   } = props;
   const defaultReferenceId = (0, _useId.useId)();
   const referenceId = domReference?.id || defaultReferenceId;
-  const floatingId = React.useMemo(() => (0, _utils.getFloatingFocusElement)(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
+  const floatingId = React.useMemo(() => (0, _element.getFloatingFocusElement)(floatingElement)?.id || defaultFloatingId, [floatingElement, defaultFloatingId]);
   const ariaRole = componentRoleToAriaRoleMap.get(role) ?? role;
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
   const isNested = parentId != null;

package/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/floating-ui-react/hooks/useSyncedFloatingRootContext.js

@@ -18,7 +18,6 @@ var _FloatingRootStore = require("../components/FloatingRootStore");
 function useSyncedFloatingRootContext(options) {
   const {
     popupStore,
-    noEmit = false,
     treatPopupAsFloatingElement = false,
     onOpenChange
   } = options;
@@ -30,13 +29,14 @@ function useSyncedFloatingRootContext(options) {
   const triggerElements = popupStore.context.triggerElements;
   const store = (0, _useRefWithInit.useRefWithInit)(() => new _FloatingRootStore.FloatingRootStore({
     open,
+    transitionStatus: undefined,
     referenceElement,
     floatingElement,
     triggerElements,
     onOpenChange,
     floatingId,
-    nested,
-    noEmit
+    syncOnly: true,
+    nested
   })).current;
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const valuesToSync = {
@@ -57,6 +57,5 @@ 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/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/floating-ui-react/hooks/useTypeahead.js

@@ -10,7 +10,9 @@ var React = _interopRequireWildcard(require("react"));
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useTimeout = require("@base-ui/utils/useTimeout");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
+var _composite = require("../utils/composite");
 /**
  * Provides a matching callback that can be used to focus an item as the user
  * types, often used in tandem with `useListNavigation()`.
@@ -22,6 +24,7 @@ function useTypeahead(context, props) {
   const open = store.useState('open');
   const {
     listRef,
+    elementsRef,
     activeIndex,
     onMatch: onMatchProp,
     onTypingChange,
@@ -61,16 +64,35 @@ function useTypeahead(context, props) {
     }
   });
   const onKeyDown = (0, _useStableCallback.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 || (0, _composite.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.
+      (0, _event.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 === ' ') {
-        (0, _utils.stopEvent)(event);
       }
     }
     if (listContent == null ||
@@ -81,7 +103,7 @@ function useTypeahead(context, props) {
       return;
     }
     if (open && event.key !== ' ') {
-      (0, _utils.stopEvent)(event);
+      (0, _event.stopEvent)(event);
       setTypingChange(true);
     }
 
@@ -112,7 +134,8 @@ 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;
@@ -125,8 +148,8 @@ function useTypeahead(context, props) {
     const next = event.relatedTarget;
     const currentDomReferenceElement = store.select('domReferenceElement');
     const currentFloatingElement = store.select('floatingElement');
-    const withinReference = (0, _utils.contains)(currentDomReferenceElement, next);
-    const withinFloating = (0, _utils.contains)(currentFloatingElement, next);
+    const withinReference = (0, _element.contains)(currentDomReferenceElement, next);
+    const withinFloating = (0, _element.contains)(currentFloatingElement, next);
 
     // Keep the session if focus moves within the composite (reference <-> floating).
     if (withinReference || withinFloating) {
@@ -146,14 +169,9 @@ 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/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.