@base-ui/react 1.2.0 → 1.4.0

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

@@ -1,10 +1,14 @@
 import * as React from 'react';
-import type { FloatingContext, FloatingRootContext } from "../types.js";
-import type { UseHoverProps } from "./useHover.js";
+import type { Delay, FloatingContext, FloatingRootContext } from "../types.js";
 import type { FloatingTreeStore } from "../components/FloatingTreeStore.js";
+import type { HandleClose, HandleCloseContextBase } from "./useHoverShared.js";
 import { HTMLProps } from "../../utils/types.js";
-export interface UseHoverReferenceInteractionProps extends UseHoverProps {
+export interface UseHoverReferenceInteractionProps {
   enabled?: boolean | undefined;
+  handleClose?: HandleClose | null | undefined;
+  restMs?: number | (() => number) | undefined;
+  delay?: Delay | (() => Delay) | undefined;
+  move?: boolean | undefined;
   mouseOnly?: boolean | undefined;
   externalTree?: FloatingTreeStore | undefined;
   /**
@@ -15,6 +19,8 @@ export interface UseHoverReferenceInteractionProps extends UseHoverProps {
    */
   isActiveTrigger?: boolean | undefined;
   triggerElementRef?: Readonly<React.RefObject<Element | null>> | undefined;
+  getHandleCloseContext?: (() => HandleCloseContextBase | null) | undefined;
+  isClosing?: (() => boolean) | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger

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

@@ -3,21 +3,18 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains, isMouseLikePointerType, isTargetInsideEnabledTrigger } from "../utils.js";
+import { contains, getTarget, isTargetInsideEnabledTrigger } from "../utils/element.js";
+import { isMouseLikePointerType } from "../utils/event.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 { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
+import { getDelay, getRestMs, isClickLikeOpenEvent as isClickLikeOpenEventShared } from "./useHoverShared.js";
 const EMPTY_REF = {
   current: null
 };
@@ -41,48 +38,68 @@ export function useHoverReferenceInteraction(context, props = {}) {
     move = true,
     triggerElementRef = EMPTY_REF,
     externalTree,
-    isActiveTrigger = true
+    isActiveTrigger = true,
+    getHandleCloseContext,
+    isClosing
   } = props;
   const tree = useFloatingTree(externalTree);
   const instance = useHoverInteractionSharedState(store);
+  const isHoverCloseActiveRef = React.useRef(false);
   const handleCloseRef = useValueAsRef(handleClose);
   const delayRef = useValueAsRef(delay);
   const restMsRef = useValueAsRef(restMs);
   const enabledRef = useValueAsRef(enabled);
+  const isClosingRef = useValueAsRef(isClosing);
   if (isActiveTrigger) {
     // eslint-disable-next-line no-underscore-dangle
     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 closeWithDelay = React.useCallback((event, runElseBranch = true) => {
+  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 = useStableCallback((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]);
+  });
   const cleanupMouseMoveHandler = useStableCallback(() => {
-    instance.unbindMouseMove();
+    if (!instance.handler) {
+      return;
+    }
+    const doc = ownerDocument(store.select('domReferenceElement'));
+    doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
   const clearPointerEvents = useStableCallback(() => {
-    if (instance.performedPointerEventsMutation) {
-      const body = ownerDocument(store.select('domReferenceElement')).body;
-      body.style.pointerEvents = '';
-      body.removeAttribute(safePolygonIdentifier);
-      instance.performedPointerEventsMutation = false;
-    }
+    clearSafePolygonPointerEventsMutation(instance);
   });
+  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
 
   // When closing before opening, clear the delay timeouts to cancel it
   // from showing.
@@ -92,42 +109,21 @@ export function useHoverReferenceInteraction(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (!details.open) {
+        isHoverCloseActiveRef.current = details.reason === REASONS.triggerHover;
+        cleanupMouseMoveHandler();
         instance.openChangeTimeout.clear();
         instance.restTimeout.clear();
         instance.blockMouseMove = true;
         instance.restTimeoutPending = false;
+      } else {
+        isHoverCloseActiveRef.current = false;
       }
     }
     events.on('openchange', onOpenChangeLocal);
     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,21 +141,47 @@ 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')) {
-        return;
-      }
+      const restMsValue = getRestMs(restMsRef.current);
       const openDelay = getDelay(delayRef.current, 'open', instance.pointerType);
+      const eventTarget = getTarget(event);
+      const currentTarget = event.currentTarget ?? null;
       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;
+      let triggerNode = currentTarget;
+
+      // Wrapper/delegated mode: resolve the actual trigger from the event target.
+      if (isElement(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
+        for (const triggerElement of store.context.triggerElements.elements()) {
+          if (contains(triggerElement, eventTarget)) {
+            triggerNode = triggerElement;
+            break;
+          }
+        }
+      }
+
+      // Wrapper/delegated mode fallback: if the wrapper contains the active trigger,
+      // treat this as re-entering that active trigger.
+      if (isElement(currentTarget) && isElement(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && contains(currentTarget, currentDomReference)) {
+        triggerNode = currentDomReference;
+      }
+      const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, eventTarget);
       const isOpen = store.select('open');
-      const shouldOpen = !isOpen || isOverInactiveTrigger;
+      const isInClosingTransition = isClosingRef.current?.() ?? store.select('transitionStatus') === 'ending';
+      const isHoverCloseTransition = !isOpen && isInClosingTransition && isHoverCloseActiveRef.current;
+      const isReenteringSameTriggerDuringCloseTransition = !isOverInactive && isElement(triggerNode) && isElement(currentDomReference) && contains(currentDomReference, triggerNode) && isHoverCloseTransition;
+      const isRestOnlyDelay = restMsValue > 0 && !openDelay;
+      const shouldOpenImmediately = isOverInactive && (isOpen || isHoverCloseTransition) || isReenteringSameTriggerDuringCloseTransition;
+      const shouldOpen = !isOpen || isOverInactive;
 
-      // When moving between triggers while already open, open immediately without delay
-      if (isOverInactiveTrigger && isOpen) {
+      // Open immediately when moving between triggers while open, or during
+      // a hover-driven close transition (including same-trigger re-entry).
+      if (shouldOpenImmediately) {
         store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
-      } else if (openDelay) {
+        return;
+      }
+      if (isRestOnlyDelay) {
+        return;
+      }
+      if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
             store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
@@ -174,21 +196,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 +224,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,28 +233,13 @@ 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, {
+      return mergeCleanups(addEventListener(trigger, 'mousemove', onMouseEnter, {
         once: true
-      });
+      }), addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
     }
-    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]);
+    return mergeCleanups(addEventListener(trigger, 'mouseenter', onMouseEnter), addEventListener(trigger, 'mouseleave', onMouseLeave));
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext, isClosingRef]);
   return React.useMemo(() => {
     if (!enabled) {
       return undefined;
@@ -251,16 +256,27 @@ 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) {
+        if (currentOpen && isOverInactive && instance.handleCloseOptions?.blockPointerEvents) {
+          const floatingElement = store.select('floatingElement');
+          if (floatingElement) {
+            const scopeElement = instance.handleCloseOptions?.getScope?.() ?? trigger.ownerDocument.body;
+            applySafePolygonPointerEventsMutation(instance, {
+              scopeElement,
+              referenceElement: trigger,
+              floatingElement
+            });
+          }
+        }
+        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 +289,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 +297,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/event.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,21 +29,21 @@ 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
    */
   focusItemOnHover?: boolean | undefined;
   /**
-   * Whether pressing an arrow key on the navigation’s main axis opens the
+   * Whether pressing an arrow key on the navigation's main axis opens the
    * floating element.
    * @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
@@ -88,7 +88,7 @@ export interface UseListNavigationProps {
    */
   parentOrientation?: UseListNavigationProps['orientation'] | undefined;
   /**
-   * Whether the direction of the floating element’s navigation is in RTL
+   * Whether the direction of the floating element's navigation is in RTL
    * layout.
    * @default false
    */
@@ -99,7 +99,7 @@ export interface UseListNavigationProps {
    * (such as an input), but allow arrow keys to navigate list items.
    * This is common in autocomplete listbox components.
    * Your virtually-focused list items must have a unique `id` set on them.
-   * If you’re using a component role with the `useRole()` Hook, then an `id` is
+   * If you're using a component role with the `useRole()` Hook, then an `id` is
    * generated automatically.
    * @default false
    */
@@ -108,9 +108,9 @@ 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
+   * 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
    * pressing ArrowRight or ArrowLeft can change rows), or 'both' (where the
    * current row cannot be escaped with ArrowRight or ArrowLeft, only ArrowUp