@base-ui/react 1.3.0 → 1.4.0

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

@@ -8,10 +8,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFocus = useFocus;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _owner = require("@base-ui/utils/owner");
-var _utils = require("../utils");
+var _element = require("../utils/element");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _createAttribute = require("../utils/createAttribute");
@@ -48,7 +50,7 @@ function useFocus(context, props = {}) {
     // return to the tab/window.
     function onBlur() {
       const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _utils.activeElement)((0, _owner.ownerDocument)(currentDomReference))) {
+      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _element.activeElement)((0, _owner.ownerDocument)(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -58,18 +60,7 @@ function useFocus(context, props = {}) {
     function onPointerDown() {
       keyboardModalityRef.current = false;
     }
-    win.addEventListener('blur', onBlur);
-    if (isMacSafari) {
-      win.addEventListener('keydown', onKeyDown, true);
-      win.addEventListener('pointerdown', onPointerDown, true);
-    }
-    return () => {
-      win.removeEventListener('blur', onBlur);
-      if (isMacSafari) {
-        win.removeEventListener('keydown', onKeyDown, true);
-        win.removeEventListener('pointerdown', onPointerDown, true);
-      }
-    };
+    return (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(win, 'blur', onBlur), isMacSafari && (0, _addEventListener.addEventListener)(win, 'keydown', onKeyDown, true), isMacSafari && (0, _addEventListener.addEventListener)(win, 'pointerdown', onPointerDown, true));
   }, [store, enabled]);
   React.useEffect(() => {
     if (!enabled) {
@@ -103,19 +94,19 @@ function useFocus(context, props = {}) {
         blockFocusRef.current = false;
         blockedReferenceRef.current = null;
       }
-      const target = (0, _utils.getTarget)(event.nativeEvent);
+      const target = (0, _element.getTarget)(event.nativeEvent);
       if ((0, _dom.isElement)(target)) {
         // Safari fails to match `:focus-visible` if focus was initially
         // outside the document.
         if (isMacSafari && !event.relatedTarget) {
-          if (!keyboardModalityRef.current && !(0, _utils.isTypeableElement)(target)) {
+          if (!keyboardModalityRef.current && !(0, _element.isTypeableElement)(target)) {
             return;
           }
-        } else if (!(0, _utils.matchesFocusVisible)(target)) {
+        } else if (!(0, _element.matchesFocusVisible)(target)) {
           return;
         }
       }
-      const movedFromOtherEnabledTrigger = (0, _utils.isTargetInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements);
+      const movedFromOtherEnabledTrigger = (0, _element.isTargetInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements);
       const {
         nativeEvent,
         currentTarget
@@ -145,7 +136,7 @@ function useFocus(context, props = {}) {
       // Wait for the window blur listener to fire.
       timeout.start(0, () => {
         const domReference = store.select('domReferenceElement');
-        const activeEl = (0, _utils.activeElement)(domReference ? domReference.ownerDocument : document);
+        const activeEl = (0, _element.activeElement)((0, _owner.ownerDocument)(domReference));
 
         // Focus left the page, keep it open.
         if (!relatedTarget && activeEl === domReference) {
@@ -159,7 +150,7 @@ function useFocus(context, props = {}) {
         // as it will only point to the shadow host of the newly focused element
         // and not the element that actually has received focus if it is located
         // inside a shadow root.
-        if ((0, _utils.contains)(dataRef.current.floatingContext?.refs.floating.current, activeEl) || (0, _utils.contains)(domReference, activeEl) || movedToFocusGuard) {
+        if ((0, _element.contains)(dataRef.current.floatingContext?.refs.floating.current, activeEl) || (0, _element.contains)(domReference, activeEl) || movedToFocusGuard) {
           return;
         }
 
@@ -167,7 +158,7 @@ function useFocus(context, props = {}) {
         // the floating element. The focus handler of that trigger will
         // handle the open state.
         const nextFocusedElement = relatedTarget ?? activeEl;
-        if ((0, _utils.isTargetInsideEnabledTrigger)(nextFocusedElement, store.context.triggerElements)) {
+        if ((0, _element.isTargetInsideEnabledTrigger)(nextFocusedElement, store.context.triggerElements)) {
           return;
         }
         store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));

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

@@ -9,7 +9,7 @@ export interface UseHoverProps {
    */
   handleClose?: HandleClose | null | undefined;
   /**
-   * Waits until the user’s cursor is at “rest” over the reference element
+   * Waits until the user's cursor is at “rest” over the reference element
    * before changing the `open` state.
    * @default 0
    */

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

@@ -8,6 +8,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.useHover = useHover;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
@@ -17,12 +19,7 @@ var _utils = require("../utils");
 var _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
-var _constants = require("../utils/constants");
 var _useHoverShared = require("./useHoverShared");
-const interactiveSelector = `button,[role="button"],select,[tabindex]:not([tabindex="-1"]),${_constants.TYPEABLE_SELECTOR}`;
-function isInteractiveElement(element) {
-  return element ? Boolean(element.closest(interactiveSelector)) : false;
-}
 /**
  * Opens the floating element while hovering over the reference element, like
  * CSS `:hover`.
@@ -100,10 +97,7 @@ function useHover(context, props = {}) {
       }
     }
     const html = (0, _owner.ownerDocument)(floatingElement).documentElement;
-    html.addEventListener('mouseleave', onLeave);
-    return () => {
-      html.removeEventListener('mouseleave', onLeave);
-    };
+    return (0, _addEventListener.addEventListener)(html, 'mouseleave', onLeave);
   }, [floatingElement, open, store, handleCloseRef, isHoverOpen, isClickLikeOpenEvent]);
   const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
     const closeDelay = (0, _useHoverShared.getDelay)(delayRef.current, 'close', pointerTypeRef.current);
@@ -127,7 +121,7 @@ function useHover(context, props = {}) {
   });
   const handleInteractInside = (0, _useStableCallback.useStableCallback)(event => {
     const target = (0, _utils.getTarget)(event);
-    if (!isInteractiveElement(target)) {
+    if (!(0, _utils.isInteractiveElement)(target)) {
       interactedInsideRef.current = false;
       return;
     }
@@ -192,10 +186,7 @@ function useHover(context, props = {}) {
           }
         });
         const handler = handlerRef.current;
-        doc.addEventListener('mousemove', handler);
-        unbindMouseMoveRef.current = () => {
-          doc.removeEventListener('mousemove', handler);
-        };
+        unbindMouseMoveRef.current = (0, _addEventListener.addEventListener)(doc, 'mousemove', handler);
         return;
       }
 
@@ -247,38 +238,9 @@ function useHover(context, props = {}) {
     const trigger = domReferenceElement;
     if ((0, _dom.isElement)(trigger)) {
       const floating = floatingElement;
-      if (open) {
-        trigger.addEventListener('mouseleave', onScrollMouseLeave);
-      }
-      if (move) {
-        trigger.addEventListener('mousemove', onReferenceMouseEnter, {
-          once: true
-        });
-      }
-      trigger.addEventListener('mouseenter', onReferenceMouseEnter);
-      trigger.addEventListener('mouseleave', onReferenceMouseLeave);
-      if (floating) {
-        floating.addEventListener('mouseleave', onScrollMouseLeave);
-        floating.addEventListener('mouseenter', onFloatingMouseEnter);
-        floating.addEventListener('mouseleave', onFloatingMouseLeave);
-        floating.addEventListener('pointerdown', handleInteractInside, true);
-      }
-      return () => {
-        if (open) {
-          trigger.removeEventListener('mouseleave', onScrollMouseLeave);
-        }
-        if (move) {
-          trigger.removeEventListener('mousemove', onReferenceMouseEnter);
-        }
-        trigger.removeEventListener('mouseenter', onReferenceMouseEnter);
-        trigger.removeEventListener('mouseleave', onReferenceMouseLeave);
-        if (floating) {
-          floating.removeEventListener('mouseleave', onScrollMouseLeave);
-          floating.removeEventListener('mouseenter', onFloatingMouseEnter);
-          floating.removeEventListener('mouseleave', onFloatingMouseLeave);
-          floating.removeEventListener('pointerdown', handleInteractInside, true);
-        }
-      };
+      return (0, _mergeCleanups.mergeCleanups)(open && (0, _addEventListener.addEventListener)(trigger, 'mouseleave', onScrollMouseLeave), move && (0, _addEventListener.addEventListener)(trigger, 'mousemove', onReferenceMouseEnter, {
+        once: true
+      }), (0, _addEventListener.addEventListener)(trigger, 'mouseenter', onReferenceMouseEnter), (0, _addEventListener.addEventListener)(trigger, 'mouseleave', onReferenceMouseLeave), floating && (0, _addEventListener.addEventListener)(floating, 'mouseleave', onScrollMouseLeave), floating && (0, _addEventListener.addEventListener)(floating, 'mouseenter', onFloatingMouseEnter), floating && (0, _addEventListener.addEventListener)(floating, 'mouseleave', onFloatingMouseLeave), floating && (0, _addEventListener.addEventListener)(floating, 'pointerdown', handleInteractInside, true));
     }
     return undefined;
   }, [move, domReferenceElement, floatingElement, store, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, open, tree, delayRef, handleCloseRef, dataRef, isClickLikeOpenEvent, restMsRef, timeout, restTimeout, handleInteractInside]);

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

@@ -12,6 +12,11 @@ export type UseHoverFloatingInteractionProps = {
    * @default 0
    */
   closeDelay?: number | (() => number) | undefined;
+  /**
+   * Tree node id override for floating elements that participate in the tree
+   * without a `FloatingContext`, such as inline nested navigation menus.
+   */
+  nodeId?: string | undefined;
 };
 /**
  * Provides hover interactions that should be attached to the floating element.

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

@@ -8,11 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.useHoverFloatingInteraction = useHoverFloatingInteraction;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _owner = require("@base-ui/utils/owner");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _nodes = require("../utils/nodes");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _FloatingTree = require("../components/FloatingTree");
@@ -31,7 +34,8 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   } = store.context;
   const {
     enabled = true,
-    closeDelay: closeDelayProp = 0
+    closeDelay: closeDelayProp = 0,
+    nodeId: nodeIdProp
   } = parameters;
   const instance = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
   const tree = (0, _FloatingTree.useFloatingTree)();
@@ -44,7 +48,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     return type?.includes('mouse') && type !== 'mousedown';
   });
   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 => {
     const closeDelay = (0, _useHoverShared.getDelay)(closeDelayProp, 'close', instance.pointerType);
@@ -63,7 +67,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     (0, _useHoverInteractionSharedState.clearSafePolygonPointerEventsMutation)(instance);
   });
   const handleInteractInside = (0, _useStableCallback.useStableCallback)(event => {
-    const target = (0, _utils.getTarget)(event);
+    const target = (0, _element.getTarget)(event);
     if (!(0, _useHoverInteractionSharedState.isInteractiveElement)(target)) {
       instance.interactedInside = false;
       return;
@@ -117,7 +121,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && (0, _utils.getNodeChildren)(tree.nodesRef.current, parentId).length > 0) {
+      if (tree && parentId && (0, _nodes.getNodeChildren)(tree.nodesRef.current, parentId).length > 0) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
@@ -126,6 +130,12 @@ function useHoverFloatingInteraction(context, parameters = {}) {
         // as it will be moved.
         return;
       }
+      const currentNodeId = dataRef.current.floatingContext?.nodeId ?? nodeIdProp;
+      const relatedTarget = event.relatedTarget;
+      const isMovingIntoDescendantFloating = tree && currentNodeId && (0, _dom.isElement)(relatedTarget) && (0, _nodes.getNodeChildren)(tree.nodesRef.current, currentNodeId, false).some(node => (0, _element.contains)(node.context?.elements.floating, relatedTarget));
+      if (isMovingIntoDescendantFloating) {
+        return;
+      }
 
       // If the safePolygon handler is active, let it handle the close logic.
       if (instance.handler) {
@@ -138,7 +148,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || (0, _utils.getNodeChildren)(tree.nodesRef.current, parentId).length > 0) {
+      if (!tree || !parentId || (0, _nodes.getNodeChildren)(tree.nodesRef.current, parentId).length > 0) {
         return;
       }
       // Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
@@ -149,18 +159,8 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       });
     }
     const floating = floatingElement;
-    if (floating) {
-      floating.addEventListener('mouseenter', onFloatingMouseEnter);
-      floating.addEventListener('mouseleave', onFloatingMouseLeave);
-      floating.addEventListener('pointerdown', handleInteractInside, true);
-    }
-    return () => {
-      if (floating) {
-        floating.removeEventListener('mouseenter', onFloatingMouseEnter);
-        floating.removeEventListener('mouseleave', onFloatingMouseLeave);
-        floating.removeEventListener('pointerdown', handleInteractInside, true);
-      }
+    return (0, _mergeCleanups.mergeCleanups)(floating && (0, _addEventListener.addEventListener)(floating, 'mouseenter', onFloatingMouseEnter), floating && (0, _addEventListener.addEventListener)(floating, 'mouseleave', onFloatingMouseLeave), floating && (0, _addEventListener.addEventListener)(floating, 'pointerdown', handleInteractInside, true), () => {
       tree?.events.off('floating.closed', onNodeClosed);
-    };
-  }, [enabled, floatingElement, store, dataRef, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
+    });
+  }, [enabled, floatingElement, store, dataRef, nodeIdProp, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
 }

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

@@ -1,6 +1,7 @@
 import { Timeout } from '@base-ui/utils/useTimeout';
 import type { FloatingRootContext, SafePolygonOptions } from "../types.js";
-export declare function isInteractiveElement(element: Element | null): boolean;
+import { isInteractiveElement } from "../utils.js";
+export { isInteractiveElement };
 export declare class HoverInteraction {
   pointerType: string | undefined;
   interactedInside: boolean;
@@ -26,5 +27,4 @@ export declare function applySafePolygonPointerEventsMutation(instance: PointerE
   referenceElement: HTMLElement | SVGSVGElement;
   floatingElement: HTMLElement;
 }): void;
-export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;
-export {};
+export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;

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

@@ -7,16 +7,17 @@ Object.defineProperty(exports, "__esModule", {
 exports.HoverInteraction = void 0;
 exports.applySafePolygonPointerEventsMutation = applySafePolygonPointerEventsMutation;
 exports.clearSafePolygonPointerEventsMutation = clearSafePolygonPointerEventsMutation;
-exports.isInteractiveElement = isInteractiveElement;
+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 _constants = require("../utils/constants");
-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;
@@ -44,13 +45,18 @@ class HoverInteraction {
   };
 }
 exports.HoverInteraction = HoverInteraction;
+const pointerEventsMutationOwnerByScopeElement = new WeakMap();
 function clearSafePolygonPointerEventsMutation(instance) {
   if (!instance.performedPointerEventsMutation) {
     return;
   }
-  instance.pointerEventsScopeElement?.style.removeProperty('pointer-events');
-  instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events');
-  instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events');
+  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;
@@ -62,11 +68,16 @@ function applySafePolygonPointerEventsMutation(instance, options) {
     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';

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

@@ -20,6 +20,7 @@ export interface UseHoverReferenceInteractionProps {
   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,10 +9,13 @@ 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 _FloatingTree = require("../components/FloatingTree");
@@ -42,14 +45,17 @@ function useHoverReferenceInteraction(context, props = {}) {
     triggerElementRef = EMPTY_REF,
     externalTree,
     isActiveTrigger = true,
-    getHandleCloseContext
+    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;
@@ -58,14 +64,14 @@ function useHoverReferenceInteraction(context, props = {}) {
     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 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, _utils.contains)(currentDomReference, currentTarget);
+      return !currentDomReference || !(0, _element.contains)(currentDomReference, currentTarget);
     }
 
     // Fallback for delegated/wrapper usage where currentTarget may be outside the trigger map.
@@ -73,9 +79,9 @@ function useHoverReferenceInteraction(context, props = {}) {
       return false;
     }
     const targetElement = target;
-    return allTriggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, targetElement)) && (!currentDomReference || !(0, _utils.contains)(currentDomReference, targetElement));
+    return allTriggers.hasMatchingElement(trigger => (0, _element.contains)(trigger, targetElement)) && (!currentDomReference || !(0, _element.contains)(currentDomReference, targetElement));
   });
-  const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
+  const closeWithDelay = (0, _useStableCallback.useStableCallback)((event, runElseBranch = true) => {
     const closeDelay = (0, _useHoverShared.getDelay)(delayRef.current, 'close', instance.pointerType);
     if (closeDelay) {
       instance.openChangeTimeout.start(closeDelay, () => {
@@ -87,7 +93,7 @@ function useHoverReferenceInteraction(context, props = {}) {
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
       tree?.events.emit('floating.closed', event);
     }
-  }, [delayRef, store, instance, tree]);
+  });
   const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
     if (!instance.handler) {
       return;
@@ -96,10 +102,10 @@ function useHoverReferenceInteraction(context, props = {}) {
     doc.removeEventListener('mousemove', instance.handler);
     instance.handler = undefined;
   });
-  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
   const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
     (0, _useHoverInteractionSharedState.clearSafePolygonPointerEventsMutation)(instance);
   });
+  React.useEffect(() => cleanupMouseMoveHandler, [cleanupMouseMoveHandler]);
 
   // When closing before opening, clear the delay timeouts to cancel it
   // from showing.
@@ -109,11 +115,14 @@ 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);
@@ -132,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`.
       const restMsValue = (0, _useHoverShared.getRestMs)(restMsRef.current);
-      if (restMsValue > 0 && !(0, _useHoverShared.getDelay)(delayRef.current, 'open')) {
-        return;
-      }
       const openDelay = (0, _useHoverShared.getDelay)(delayRef.current, 'open', instance.pointerType);
-      const triggerNode = event.currentTarget ?? null;
+      const eventTarget = (0, _element.getTarget)(event);
+      const currentTarget = event.currentTarget ?? null;
       const currentDomReference = store.select('domReferenceElement');
-      const isOverInactive = triggerNode == null ? false : isOverInactiveTrigger(currentDomReference, triggerNode, event.target);
+      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 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 (isOverInactive && 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));
@@ -199,26 +234,18 @@ function useHoverReferenceInteraction(context, props = {}) {
         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);
       }
     }
     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 () => {
-      if (move) {
-        trigger.removeEventListener('mousemove', onMouseEnter);
-      }
-      trigger.removeEventListener('mouseenter', onMouseEnter);
-      trigger.removeEventListener('mouseleave', onMouseLeave);
-    };
-  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, instance, isActiveTrigger, isOverInactiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef, getHandleCloseContext]);
+    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;
@@ -237,9 +264,20 @@ function useHoverReferenceInteraction(context, props = {}) {
         const currentDomReference = store.select('domReferenceElement');
         const currentOpen = store.select('open');
         const isOverInactive = isOverInactiveTrigger(currentDomReference, trigger, event.target);
-        if (mouseOnly && !(0, _utils.isMouseLikePointerType)(instance.pointerType)) {
+        if (mouseOnly && !(0, _event.isMouseLikePointerType)(instance.pointerType)) {
           return;
         }
+        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;

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.getDelay = getDelay;
 exports.getRestMs = getRestMs;
 exports.isClickLikeOpenEvent = isClickLikeOpenEvent;
-var _utils = require("../utils");
+var _event = require("../utils/event");
 function resolveValue(value, pointerType) {
-  if (pointerType != null && !(0, _utils.isMouseLikePointerType)(pointerType)) {
+  if (pointerType != null && !(0, _event.isMouseLikePointerType)(pointerType)) {
     return 0;
   }
   if (typeof value === 'function') {