@base-ui/react 1.2.0 → 1.3.0

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

@@ -9,15 +9,9 @@ import { ownerDocument } from '@base-ui/utils/owner';
 import { contains, isMouseLikePointerType, isTargetInsideEnabledTrigger } from "../utils.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
-import { getDelay } from "./useHover.js";
 import { useFloatingTree } from "../components/FloatingTree.js";
-import { safePolygonIdentifier, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
-function getRestMs(value) {
-  if (typeof value === 'function') {
-    return value();
-  }
-  return value;
-}
+import { clearSafePolygonPointerEventsMutation, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
+import { getDelay, getRestMs, isClickLikeOpenEvent as isClickLikeOpenEventShared } from "./useHoverShared.js";
 const EMPTY_REF = {
   current: null
 };
@@ -41,7 +35,8 @@ export function useHoverReferenceInteraction(context, props = {}) {
     move = true,
     triggerElementRef = EMPTY_REF,
     externalTree,
-    isActiveTrigger = true
+    isActiveTrigger = true,
+    getHandleCloseContext
   } = props;
   const tree = useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
@@ -54,34 +49,50 @@ export function useHoverReferenceInteraction(context, props = {}) {
     instance.handleCloseOptions = handleCloseRef.current?.__options;
   }
   const isClickLikeOpenEvent = useStableCallback(() => {
-    if (instance.interactedInside) {
-      return true;
-    }
-    return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+    return isClickLikeOpenEventShared(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
     return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
   });
+  const isOverInactiveTrigger = useStableCallback((currentDomReference, currentTarget, target) => {
+    const allTriggers = store.context.triggerElements;
+
+    // Fast path for normal usage where handlers are attached directly to triggers.
+    if (allTriggers.hasElement(currentTarget)) {
+      return !currentDomReference || !contains(currentDomReference, currentTarget);
+    }
+
+    // Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
+    if (!isElement(target)) {
+      return false;
+    }
+    const targetElement = target;
+    return allTriggers.hasMatchingElement(trigger => contains(trigger, targetElement)) && (!currentDomReference || !contains(currentDomReference, targetElement));
+  });
   const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
     const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
-    if (closeDelay && !instance.handler) {
-      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event)));
+    if (closeDelay) {
+      instance.openChangeTimeout.start(closeDelay, () => {
+        store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      });
     } else if (runElseBranch) {
       instance.openChangeTimeout.clear();
       store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+      tree?.events.emit('floating.closed', event);
     }
-  }, [delayRef, store, instance]);
+  }, [delayRef, store, instance, tree]);
   const cleanupMouseMoveHandler = useStableCallback(() => {
-    instance.unbindMouseMove();
+    if (!instance.handler) {
+      return;
+    }
+    const doc = ownerDocument(store.select('domReferenceElement'));
+    doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
+  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
   const clearPointerEvents = useStableCallback(() => {
-    if (instance.performedPointerEventsMutation) {
-      const body = ownerDocument(store.select('domReferenceElement')).body;
-      body.style.pointerEvents = '';
-      body.removeAttribute(safePolygonIdentifier);
-      instance.performedPointerEventsMutation = false;
-    }
+    clearSafePolygonPointerEventsMutation(instance);
   });
 
   // When closing before opening, clear the delay timeouts to cancel it
@@ -92,6 +103,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (!details.open) {
+        cleanupMouseMoveHandler();
         instance.openChangeTimeout.clear();
         instance.restTimeout.clear();
         instance.blockMouseMove = true;
@@ -102,32 +114,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
     return () => {
       events.off('openchange', onOpenChangeLocal);
     };
-  }, [enabled, events, instance]);
-  const handleScrollMouseLeave = useStableCallback(event => {
-    if (isClickLikeOpenEvent()) {
-      return;
-    }
-    if (!dataRef.current.floatingContext) {
-      return;
-    }
-    if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
-      return;
-    }
-    const currentTrigger = triggerElementRef.current;
-    handleCloseRef.current?.({
-      ...dataRef.current.floatingContext,
-      tree,
-      x: event.clientX,
-      y: event.clientY,
-      onClose() {
-        clearPointerEvents();
-        cleanupMouseMoveHandler();
-        if (!isClickLikeOpenEvent() && currentTrigger === store.select('domReferenceElement')) {
-          closeWithDelay(event);
-        }
-      }
-    })(event);
-  });
+  }, [enabled, events, instance, cleanupMouseMoveHandler]);
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
@@ -145,19 +132,19 @@ export function useHoverReferenceInteraction(context, props = {}) {
 
       // Only rest delay is set; there's no fallback delay.
       // This will be handled by `onMouseMove`.
-      if (getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, 'open')) {
+      const restMsValue = getRestMs(restMsRef.current);
+      if (restMsValue > 0 && !getDelay(delayRef.current, 'open')) {
         return;
       }
       const openDelay = getDelay(delayRef.current, 'open', instance.pointerType);
-      const currentDomReference = store.select('domReferenceElement');
-      const allTriggers = store.context.triggerElements;
-      const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => contains(t, event.target))) && (!currentDomReference || !contains(currentDomReference, event.target));
       const triggerNode = event.currentTarget ?? null;
+      const currentDomReference = store.select('domReferenceElement');
+      const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, event.target);
       const isOpen = store.select('open');
-      const shouldOpen = !isOpen || isOverInactiveTrigger;
+      const shouldOpen = !isOpen || isOverInactive;
 
       // When moving between triggers while already open, open immediately without delay
-      if (isOverInactiveTrigger && isOpen) {
+      if (isOverInactive && isOpen) {
         store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
       } else if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
@@ -174,21 +161,23 @@ export function useHoverReferenceInteraction(context, props = {}) {
         clearPointerEvents();
         return;
       }
-      instance.unbindMouseMove();
+      cleanupMouseMoveHandler();
       const domReferenceElement = store.select('domReferenceElement');
       const doc = ownerDocument(domReferenceElement);
       instance.restTimeout.clear();
       instance.restTimeoutPending = false;
-      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+      const handleCloseContextBase = dataRef.current.floatingContext ?? getHandleCloseContext?.();
+      const ignoreRelatedTargetTrigger = isRelatedTargetInsideEnabledTrigger(event.relatedTarget);
+      if (ignoreRelatedTargetTrigger) {
         return;
       }
-      if (handleCloseRef.current && dataRef.current.floatingContext) {
+      if (handleCloseRef.current && handleCloseContextBase) {
         if (!store.select('open')) {
           instance.openChangeTimeout.clear();
         }
         const currentTrigger = triggerElementRef.current;
         instance.handler = handleCloseRef.current({
-          ...dataRef.current.floatingContext,
+          ...handleCloseContextBase,
           tree,
           x: event.clientX,
           y: event.clientY,
@@ -200,12 +189,8 @@ export function useHoverReferenceInteraction(context, props = {}) {
             }
           }
         });
-        const handler = instance.handler;
-        handler(event);
-        doc.addEventListener('mousemove', handler);
-        instance.unbindMouseMove = () => {
-          doc.removeEventListener('mousemove', handler);
-        };
+        doc.addEventListener('mousemove', instance.handler);
+        instance.handler(event);
         return;
       }
       const shouldClose = instance.pointerType === 'touch' ? !contains(store.select('floatingElement'), event.relatedTarget) : true;
@@ -213,12 +198,6 @@ export function useHoverReferenceInteraction(context, props = {}) {
         closeWithDelay(event);
       }
     }
-    function onScrollMouseLeave(event) {
-      handleScrollMouseLeave(event);
-    }
-    if (store.select('open')) {
-      trigger.addEventListener('mouseleave', onScrollMouseLeave);
-    }
     if (move) {
       trigger.addEventListener('mousemove', onMouseEnter, {
         once: true
@@ -227,14 +206,13 @@ export function useHoverReferenceInteraction(context, props = {}) {
     trigger.addEventListener('mouseenter', onMouseEnter);
     trigger.addEventListener('mouseleave', onMouseLeave);
     return () => {
-      trigger.removeEventListener('mouseleave', onScrollMouseLeave);
       if (move) {
         trigger.removeEventListener('mousemove', onMouseEnter);
       }
       trigger.removeEventListener('mouseenter', onMouseEnter);
       trigger.removeEventListener('mouseleave', onMouseLeave);
     };
-  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, handleScrollMouseLeave, instance, isActiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef]);
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext]);
   return React.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -251,16 +229,16 @@ export function useHoverReferenceInteraction(context, props = {}) {
         } = event;
         const trigger = event.currentTarget;
         const currentDomReference = store.select('domReferenceElement');
-        const allTriggers = store.context.triggerElements;
         const currentOpen = store.select('open');
-        const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => contains(t, event.target))) && (!currentDomReference || !contains(currentDomReference, event.target));
+        const isOverInactive = isOverInactiveTrigger(currentDomReference, trigger, event.target);
         if (mouseOnly && !isMouseLikePointerType(instance.pointerType)) {
           return;
         }
-        if (currentOpen && !isOverInactiveTrigger || getRestMs(restMsRef.current) === 0) {
+        const restMsValue = getRestMs(restMsRef.current);
+        if (currentOpen && !isOverInactive || restMsValue === 0) {
           return;
         }
-        if (!isOverInactiveTrigger && instance.restTimeoutPending && event.movementX ** 2 + event.movementY ** 2 < 2) {
+        if (!isOverInactive && instance.restTimeoutPending && event.movementX ** 2 + event.movementY ** 2 < 2) {
           return;
         }
         instance.restTimeout.clear();
@@ -273,7 +251,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
             return;
           }
           const latestOpen = store.select('open');
-          if (!instance.blockMouseMove && (!latestOpen || isOverInactiveTrigger)) {
+          if (!instance.blockMouseMove && (!latestOpen || isOverInactive)) {
             store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, nativeEvent, trigger));
           }
         }
@@ -281,13 +259,13 @@ export function useHoverReferenceInteraction(context, props = {}) {
           ReactDOM.flushSync(() => {
             handleMouseMove();
           });
-        } else if (isOverInactiveTrigger && currentOpen) {
+        } else if (isOverInactive && currentOpen) {
           handleMouseMove();
         } else {
           instance.restTimeoutPending = true;
-          instance.restTimeout.start(getRestMs(restMsRef.current), handleMouseMove);
+          instance.restTimeout.start(restMsValue, handleMouseMove);
         }
       }
     };
-  }, [enabled, instance, isClickLikeOpenEvent, mouseOnly, store, restMsRef]);
+  }, [enabled, instance, isClickLikeOpenEvent, isOverInactiveTrigger, mouseOnly, store, restMsRef]);
 }

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

@@ -0,0 +1,28 @@
+import type { ExtendedElements, FloatingTreeType, Placement } from "../types.js";
+export interface HandleCloseOptions {
+  blockPointerEvents?: boolean | undefined;
+  getScope?: (() => HTMLElement | SVGSVGElement | null) | undefined;
+}
+export interface HandleCloseContext {
+  x: number | null;
+  y: number | null;
+  placement: Placement | null;
+  elements: Pick<ExtendedElements, 'domReference' | 'floating'>;
+  onClose: () => void;
+  nodeId?: string | undefined;
+  tree?: FloatingTreeType | null | undefined;
+  leave?: boolean | undefined;
+}
+export type HandleCloseContextBase = Omit<HandleCloseContext, 'onClose' | 'tree' | 'x' | 'y'>;
+export interface HandleClose {
+  (context: HandleCloseContext): (event: MouseEvent) => void;
+  __options?: HandleCloseOptions | undefined;
+}
+type HoverDelay = number | Partial<{
+  open: number;
+  close: number;
+}>;
+export declare function getDelay(value: HoverDelay | (() => HoverDelay) | undefined, prop: 'open' | 'close', pointerType?: PointerEvent['pointerType']): number | undefined;
+export declare function getRestMs(value: number | (() => number)): number;
+export declare function isClickLikeOpenEvent(openEventType: string | undefined, interactedInside: boolean): boolean;
+export {};

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

@@ -0,0 +1,26 @@
+import { isMouseLikePointerType } from "../utils.js";
+function resolveValue(value, pointerType) {
+  if (pointerType != null && !isMouseLikePointerType(pointerType)) {
+    return 0;
+  }
+  if (typeof value === 'function') {
+    return value();
+  }
+  return value;
+}
+export function getDelay(value, prop, pointerType) {
+  const result = resolveValue(value, pointerType);
+  if (typeof result === 'number') {
+    return result;
+  }
+  return result?.[prop];
+}
+export function getRestMs(value) {
+  if (typeof value === 'function') {
+    return value();
+  }
+  return value;
+}
+export function isClickLikeOpenEvent(openEventType, interactedInside) {
+  return interactedInside || openEventType === 'click' || openEventType === 'mousedown';
+}

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

@@ -29,14 +29,14 @@ export interface UseListNavigationProps {
    * The currently selected item index, which may or may not be active.
    * @default null
    */
-  selectedIndex?: (number | null) | undefined;
+  selectedIndex?: number | null | undefined;
   /**
    * Whether to focus the item upon opening the floating element. 'auto' infers
    * what to do based on the input type (keyboard vs. pointer), while a boolean
    * value will force the value.
    * @default 'auto'
    */
-  focusItemOnOpen?: (boolean | 'auto') | undefined;
+  focusItemOnOpen?: boolean | 'auto' | undefined;
   /**
    * Whether hovering an item synchronizes the focus.
    * @default true
@@ -58,7 +58,7 @@ export interface UseListNavigationProps {
    * navigating via arrow keys, specify an empty array.
    * @default undefined
    */
-  disabledIndices?: (ReadonlyArray<number> | ((index: number) => boolean)) | undefined;
+  disabledIndices?: ReadonlyArray<number> | ((index: number) => boolean) | undefined;
   /**
    * Determines whether focus can escape the list, such that nothing is selected
    * after navigating beyond the boundary of the list. In some
@@ -108,7 +108,7 @@ export interface UseListNavigationProps {
    * The orientation in which navigation occurs.
    * @default 'vertical'
    */
-  orientation?: ('vertical' | 'horizontal' | 'both') | undefined;
+  orientation?: 'vertical' | 'horizontal' | 'both' | undefined;
   /**
    * Specifies how many columns the list has (i.e., it’s a grid). Use an
    * orientation of 'horizontal' (e.g. for an emoji picker/date picker, where

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

@@ -307,9 +307,13 @@ export function useListNavigation(context, props) {
         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
+            });
+          }
         }
       }
     };

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/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,7 @@ 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, isElementVisible, stopEvent } from "../utils.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 +16,7 @@ export function useTypeahead(context, props) {
   const open = store.useState('open');
   const {
     listRef,
+    elementsRef,
     activeIndex,
     onMatch: onMatchProp,
     onTypingChange,
@@ -55,16 +56,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 +126,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 +161,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.