@base-ui/react 1.2.0 → 1.4.0

package/floating-ui-react/hooks/useHoverInteractionSharedState.d.ts

@@ -1,14 +1,16 @@
 import { Timeout } from '@base-ui/utils/useTimeout';
 import type { FloatingRootContext, SafePolygonOptions } from "../types.js";
-export declare const safePolygonIdentifier: string;
-export declare function isInteractiveElement(element: Element | null): boolean;
+import { isInteractiveElement } from "../utils.js";
+export { isInteractiveElement };
 export declare class HoverInteraction {
   pointerType: string | undefined;
   interactedInside: boolean;
   handler: ((event: MouseEvent) => void) | undefined;
   blockMouseMove: boolean;
   performedPointerEventsMutation: boolean;
-  unbindMouseMove: () => void;
+  pointerEventsScopeElement: HTMLElement | SVGSVGElement | null;
+  pointerEventsReferenceElement: HTMLElement | SVGSVGElement | null;
+  pointerEventsFloatingElement: HTMLElement | null;
   restTimeoutPending: boolean;
   openChangeTimeout: Timeout;
   restTimeout: Timeout;
@@ -18,4 +20,11 @@ export declare class HoverInteraction {
   dispose: () => void;
   disposeEffect: () => () => void;
 }
+type PointerEventsMutationState = Pick<HoverInteraction, 'performedPointerEventsMutation' | 'pointerEventsScopeElement' | 'pointerEventsReferenceElement' | 'pointerEventsFloatingElement'>;
+export declare function clearSafePolygonPointerEventsMutation(instance: PointerEventsMutationState): void;
+export declare function applySafePolygonPointerEventsMutation(instance: PointerEventsMutationState, options: {
+  scopeElement: HTMLElement | SVGSVGElement;
+  referenceElement: HTMLElement | SVGSVGElement;
+  floatingElement: HTMLElement;
+}): void;
 export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;

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

@@ -5,19 +5,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HoverInteraction = void 0;
-exports.isInteractiveElement = isInteractiveElement;
-exports.safePolygonIdentifier = void 0;
+exports.applySafePolygonPointerEventsMutation = applySafePolygonPointerEventsMutation;
+exports.clearSafePolygonPointerEventsMutation = clearSafePolygonPointerEventsMutation;
+Object.defineProperty(exports, "isInteractiveElement", {
+  enumerable: true,
+  get: function () {
+    return _utils.isInteractiveElement;
+  }
+});
 exports.useHoverInteractionSharedState = useHoverInteractionSharedState;
 var _useOnMount = require("@base-ui/utils/useOnMount");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useTimeout = require("@base-ui/utils/useTimeout");
-var _createAttribute = require("../utils/createAttribute");
-var _constants = require("../utils/constants");
-const safePolygonIdentifier = exports.safePolygonIdentifier = (0, _createAttribute.createAttribute)('safe-polygon');
-const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${_constants.TYPEABLE_SELECTOR}`;
-function isInteractiveElement(element) {
-  return element ? Boolean(element.closest(interactiveSelector)) : false;
-}
+var _utils = require("../utils");
 class HoverInteraction {
   constructor() {
     this.pointerType = undefined;
@@ -25,7 +25,9 @@ class HoverInteraction {
     this.handler = undefined;
     this.blockMouseMove = true;
     this.performedPointerEventsMutation = false;
-    this.unbindMouseMove = () => {};
+    this.pointerEventsScopeElement = null;
+    this.pointerEventsReferenceElement = null;
+    this.pointerEventsFloatingElement = null;
     this.restTimeoutPending = false;
     this.openChangeTimeout = new _useTimeout.Timeout();
     this.restTimeout = new _useTimeout.Timeout();
@@ -43,6 +45,43 @@ class HoverInteraction {
   };
 }
 exports.HoverInteraction = HoverInteraction;
+const pointerEventsMutationOwnerByScopeElement = new WeakMap();
+function clearSafePolygonPointerEventsMutation(instance) {
+  if (!instance.performedPointerEventsMutation) {
+    return;
+  }
+  const scopeElement = instance.pointerEventsScopeElement;
+  if (scopeElement && pointerEventsMutationOwnerByScopeElement.get(scopeElement) === instance) {
+    instance.pointerEventsScopeElement?.style.removeProperty('pointer-events');
+    instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events');
+    instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events');
+    pointerEventsMutationOwnerByScopeElement.delete(scopeElement);
+  }
+  instance.performedPointerEventsMutation = false;
+  instance.pointerEventsScopeElement = null;
+  instance.pointerEventsReferenceElement = null;
+  instance.pointerEventsFloatingElement = null;
+}
+function applySafePolygonPointerEventsMutation(instance, options) {
+  const {
+    scopeElement,
+    referenceElement,
+    floatingElement
+  } = options;
+  const existingOwner = pointerEventsMutationOwnerByScopeElement.get(scopeElement);
+  if (existingOwner && existingOwner !== instance) {
+    clearSafePolygonPointerEventsMutation(existingOwner);
+  }
+  clearSafePolygonPointerEventsMutation(instance);
+  instance.performedPointerEventsMutation = true;
+  instance.pointerEventsScopeElement = scopeElement;
+  instance.pointerEventsReferenceElement = referenceElement;
+  instance.pointerEventsFloatingElement = floatingElement;
+  pointerEventsMutationOwnerByScopeElement.set(scopeElement, instance);
+  scopeElement.style.pointerEvents = 'none';
+  referenceElement.style.pointerEvents = 'auto';
+  floatingElement.style.pointerEvents = 'auto';
+}
 function useHoverInteractionSharedState(store) {
   const instance = (0, _useRefWithInit.useRefWithInit)(HoverInteraction.create).current;
   const data = store.context.dataRef.current;

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

@@ -9,21 +9,18 @@ exports.useHoverReferenceInteraction = useHoverReferenceInteraction;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
-var _useHover = require("./useHover");
 var _FloatingTree = require("../components/FloatingTree");
 var _useHoverInteractionSharedState = require("./useHoverInteractionSharedState");
-function getRestMs(value) {
-  if (typeof value === 'function') {
-    return value();
-  }
-  return value;
-}
+var _useHoverShared = require("./useHoverShared");
 const EMPTY_REF = {
   current: null
 };
@@ -47,48 +44,68 @@ function useHoverReferenceInteraction(context, props = {}) {
     move = true,
     triggerElementRef = EMPTY_REF,
     externalTree,
-    isActiveTrigger = true
+    isActiveTrigger = true,
+    getHandleCloseContext,
+    isClosing
   } = props;
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
   const instance = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
+  const isHoverCloseActiveRef = React.useRef(false);
   const handleCloseRef = (0, _useValueAsRef.useValueAsRef)(handleClose);
   const delayRef = (0, _useValueAsRef.useValueAsRef)(delay);
   const restMsRef = (0, _useValueAsRef.useValueAsRef)(restMs);
   const enabledRef = (0, _useValueAsRef.useValueAsRef)(enabled);
+  const isClosingRef = (0, _useValueAsRef.useValueAsRef)(isClosing);
   if (isActiveTrigger) {
     // eslint-disable-next-line no-underscore-dangle
     instance.handleCloseOptions = handleCloseRef.current?.__options;
   }
   const isClickLikeOpenEvent = (0, _useStableCallback.useStableCallback)(() => {
-    if (instance.interactedInside) {
-      return true;
-    }
-    return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
+    return (0, _useHoverShared.isClickLikeOpenEvent)(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isRelatedTargetInsideEnabledTrigger = (0, _useStableCallback.useStableCallback)(target => {
-    return (0, _utils.isTargetInsideEnabledTrigger)(target, store.context.triggerElements);
+    return (0, _element.isTargetInsideEnabledTrigger)(target, store.context.triggerElements);
   });
-  const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
-    const closeDelay = (0, _useHover.getDelay)(delayRef.current, 'close', instance.pointerType);
-    if (closeDelay && !instance.handler) {
-      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
+  const isOverInactiveTrigger = (0, _useStableCallback.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 || !(0, _element.contains)(currentDomReference, currentTarget);
+    }
+
+    // Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
+    if (!(0, _dom.isElement)(target)) {
+      return false;
+    }
+    const targetElement = target;
+    return allTriggers.hasMatchingElement(trigger => (0, _element.contains)(trigger, targetElement)) && (!currentDomReference || !(0, _element.contains)(currentDomReference, targetElement));
+  });
+  const closeWithDelay = (0, _useStableCallback.useStableCallback)((event, runElseBranch = true) => {
+    const closeDelay = (0, _useHoverShared.getDelay)(delayRef.current, 'close', instance.pointerType);
+    if (closeDelay) {
+      instance.openChangeTimeout.start(closeDelay, () => {
+        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      });
     } else if (runElseBranch) {
       instance.openChangeTimeout.clear();
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+      tree?.events.emit('floating.closed', event);
     }
-  }, [delayRef, store, instance]);
+  });
   const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
-    instance.unbindMouseMove();
+    if (!instance.handler) {
+      return;
+    }
+    const doc = (0, _owner.ownerDocument)(store.select('domReferenceElement'));
+    doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
   const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
-    if (instance.performedPointerEventsMutation) {
-      const body = (0, _owner.ownerDocument)(store.select('domReferenceElement')).body;
-      body.style.pointerEvents = '';
-      body.removeAttribute(_useHoverInteractionSharedState.safePolygonIdentifier);
-      instance.performedPointerEventsMutation = false;
-    }
+    (0, _useHoverInteractionSharedState.clearSafePolygonPointerEventsMutation)(instance);
   });
+  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
 
   // When closing before opening, clear the delay timeouts to cancel it
   // from showing.
@@ -98,42 +115,21 @@ function useHoverReferenceInteraction(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (!details.open) {
+        isHoverCloseActiveRef.current = details.reason === _reasons.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 = (0, _useStableCallback.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,27 +141,53 @@ function useHoverReferenceInteraction(context, props = {}) {
     function onMouseEnter(event) {
       instance.openChangeTimeout.clear();
       instance.blockMouseMove = false;
-      if (mouseOnly && !(0, _utils.isMouseLikePointerType)(instance.pointerType)) {
+      if (mouseOnly && !(0, _event.isMouseLikePointerType)(instance.pointerType)) {
         return;
       }
 
       // Only rest delay is set; there's no fallback delay.
       // This will be handled by `onMouseMove`.
-      if (getRestMs(restMsRef.current) > 0 && !(0, _useHover.getDelay)(delayRef.current, 'open')) {
-        return;
-      }
-      const openDelay = (0, _useHover.getDelay)(delayRef.current, 'open', instance.pointerType);
+      const restMsValue = (0, _useHoverShared.getRestMs)(restMsRef.current);
+      const openDelay = (0, _useHoverShared.getDelay)(delayRef.current, 'open', instance.pointerType);
+      const eventTarget = (0, _element.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 => (0, _utils.contains)(t, event.target))) && (!currentDomReference || !(0, _utils.contains)(currentDomReference, event.target));
-      const triggerNode = event.currentTarget ?? null;
+      let triggerNode = currentTarget;
+
+      // Wrapper/delegated mode: resolve the actual trigger from the event target.
+      if ((0, _dom.isElement)(eventTarget) && !store.context.triggerElements.hasElement(eventTarget)) {
+        for (const triggerElement of store.context.triggerElements.elements()) {
+          if ((0, _element.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 ((0, _dom.isElement)(currentTarget) && (0, _dom.isElement)(currentDomReference) && !store.context.triggerElements.hasElement(currentTarget) && (0, _element.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 && (0, _dom.isElement)(triggerNode) && (0, _dom.isElement)(currentDomReference) && (0, _element.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, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
-      } else if (openDelay) {
+        return;
+      }
+      if (isRestOnlyDelay) {
+        return;
+      }
+      if (openDelay) {
         instance.openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, triggerNode));
@@ -180,21 +202,23 @@ function useHoverReferenceInteraction(context, props = {}) {
         clearPointerEvents();
         return;
       }
-      instance.unbindMouseMove();
+      cleanupMouseMoveHandler();
       const domReferenceElement = store.select('domReferenceElement');
       const doc = (0, _owner.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,
@@ -206,41 +230,22 @@ 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' ? !(0, _utils.contains)(store.select('floatingElement'), event.relatedTarget) : true;
+      const shouldClose = instance.pointerType === 'touch' ? !(0, _element.contains)(store.select('floatingElement'), event.relatedTarget) : true;
       if (shouldClose) {
         closeWithDelay(event);
       }
     }
-    function onScrollMouseLeave(event) {
-      handleScrollMouseLeave(event);
-    }
-    if (store.select('open')) {
-      trigger.addEventListener('mouseleave', onScrollMouseLeave);
-    }
     if (move) {
-      trigger.addEventListener('mousemove', onMouseEnter, {
+      return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(trigger, 'mousemove', onMouseEnter, {
         once: true
-      });
+      }), (0, _addEventListener.addEventListener)(trigger, 'mouseenter', onMouseEnter), (0, _addEventListener.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 (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(trigger, 'mouseenter', onMouseEnter), (0, _addEventListener.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;
@@ -257,16 +262,27 @@ 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 => (0, _utils.contains)(t, event.target))) && (!currentDomReference || !(0, _utils.contains)(currentDomReference, event.target));
-        if (mouseOnly && !(0, _utils.isMouseLikePointerType)(instance.pointerType)) {
+        const isOverInactive = isOverInactiveTrigger(currentDomReference, trigger, event.target);
+        if (mouseOnly && !(0, _event.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;
+            (0, _useHoverInteractionSharedState.applySafePolygonPointerEventsMutation)(instance, {
+              scopeElement,
+              referenceElement: trigger,
+              floatingElement
+            });
+          }
+        }
+        const restMsValue = (0, _useHoverShared.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();
@@ -279,7 +295,7 @@ function useHoverReferenceInteraction(context, props = {}) {
             return;
           }
           const latestOpen = store.select('open');
-          if (!instance.blockMouseMove && (!latestOpen || isOverInactiveTrigger)) {
+          if (!instance.blockMouseMove && (!latestOpen || isOverInactive)) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, nativeEvent, trigger));
           }
         }
@@ -287,13 +303,13 @@ 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/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/floating-ui-react/hooks/useHoverShared.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDelay = getDelay;
+exports.getRestMs = getRestMs;
+exports.isClickLikeOpenEvent = isClickLikeOpenEvent;
+var _event = require("../utils/event");
+function resolveValue(value, pointerType) {
+  if (pointerType != null && !(0, _event.isMouseLikePointerType)(pointerType)) {
+    return 0;
+  }
+  if (typeof value === 'function') {
+    return value();
+  }
+  return value;
+}
+function getDelay(value, prop, pointerType) {
+  const result = resolveValue(value, pointerType);
+  if (typeof result === 'number') {
+    return result;
+  }
+  return result?.[prop];
+}
+function getRestMs(value) {
+  if (typeof value === 'function') {
+    return value();
+  }
+  return value;
+}
+function isClickLikeOpenEvent(openEventType, interactedInside) {
+  return interactedInside || openEventType === 'click' || openEventType === 'mousedown';
+}

package/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