@base-ui/react 1.4.1 → 1.5.0

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

@@ -1,16 +1,16 @@
 'use client';
 
 import * as React from 'react';
-import { getWindow, isElement, isHTMLElement } from '@floating-ui/utils/dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
-import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { isMac, isSafari } from '@base-ui/utils/detectBrowser';
-import { useTimeout } from '@base-ui/utils/useTimeout';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { ownerDocument } from '@base-ui/utils/owner';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { getWindow, isElement, isHTMLElement } from '@floating-ui/utils/dom';
+import { createAttribute } from "../utils/createAttribute.js";
 import { activeElement, contains, getTarget, isTargetInsideEnabledTrigger, isTypeableElement, matchesFocusVisible } from "../utils/element.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
-import { createAttribute } from "../utils/createAttribute.js";
 const isMacSafari = isMac && isSafari;
 /**
  * Opens the floating element while the reference element has focus, like CSS
@@ -18,20 +18,20 @@ const isMacSafari = isMac && isSafari;
  * @see https://floating-ui.com/docs/useFocus
  */
 export function useFocus(context, props = {}) {
+  const {
+    enabled = true,
+    delay
+  } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const {
     events,
     dataRef
   } = store.context;
-  const {
-    enabled = true,
-    delay
-  } = props;
   const blockFocusRef = React.useRef(false);
   // Track which reference should be blocked from re-opening after Escape/press dismissal.
   const blockedReferenceRef = React.useRef(null);
-  const timeout = useTimeout();
   const keyboardModalityRef = React.useRef(true);
+  const timeout = useTimeout();
   React.useEffect(() => {
     const domReference = store.select('domReferenceElement');
     if (!enabled) {
@@ -74,91 +74,94 @@ export function useFocus(context, props = {}) {
       events.off('openchange', onOpenChangeLocal);
     };
   }, [events, enabled, store]);
-  const reference = React.useMemo(() => ({
-    onMouseLeave() {
+  const reference = React.useMemo(() => {
+    function resetBlockedFocus() {
       blockFocusRef.current = false;
       blockedReferenceRef.current = null;
-    },
-    onFocus(event) {
-      const focusTarget = event.currentTarget;
-      if (blockFocusRef.current) {
-        if (blockedReferenceRef.current === focusTarget) {
-          return;
+    }
+    return {
+      onMouseLeave() {
+        resetBlockedFocus();
+      },
+      onFocus(event) {
+        const focusTarget = event.currentTarget;
+        if (blockFocusRef.current) {
+          if (blockedReferenceRef.current === focusTarget) {
+            return;
+          }
+          resetBlockedFocus();
         }
-        blockFocusRef.current = false;
-        blockedReferenceRef.current = null;
-      }
-      const target = getTarget(event.nativeEvent);
-      if (isElement(target)) {
-        // Safari fails to match `:focus-visible` if focus was initially
-        // outside the document.
-        if (isMacSafari && !event.relatedTarget) {
-          if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+        const target = getTarget(event.nativeEvent);
+        if (isElement(target)) {
+          // Safari fails to match `:focus-visible` if focus was initially
+          // outside the document.
+          if (isMacSafari && !event.relatedTarget) {
+            if (!keyboardModalityRef.current && !isTypeableElement(target)) {
+              return;
+            }
+          } else if (!matchesFocusVisible(target)) {
             return;
           }
-        } else if (!matchesFocusVisible(target)) {
-          return;
         }
-      }
-      const movedFromOtherEnabledTrigger = isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
-      const {
-        nativeEvent,
-        currentTarget
-      } = event;
-      const delayValue = typeof delay === 'function' ? delay() : delay;
-      if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
-        store.setOpen(true, createChangeEventDetails(REASONS.triggerFocus, nativeEvent, currentTarget));
-        return;
-      }
-      timeout.start(delayValue, () => {
-        if (blockFocusRef.current) {
+        const movedFromOtherEnabledTrigger = isTargetInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements);
+        const {
+          nativeEvent,
+          currentTarget
+        } = event;
+        const delayValue = typeof delay === 'function' ? delay() : delay;
+        if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
+          store.setOpen(true, createChangeEventDetails(REASONS.triggerFocus, nativeEvent, currentTarget));
           return;
         }
-        store.setOpen(true, createChangeEventDetails(REASONS.triggerFocus, nativeEvent, currentTarget));
-      });
-    },
-    onBlur(event) {
-      blockFocusRef.current = false;
-      blockedReferenceRef.current = null;
-      const relatedTarget = event.relatedTarget;
-      const nativeEvent = event.nativeEvent;
+        timeout.start(delayValue, () => {
+          if (blockFocusRef.current) {
+            return;
+          }
+          store.setOpen(true, createChangeEventDetails(REASONS.triggerFocus, nativeEvent, currentTarget));
+        });
+      },
+      onBlur(event) {
+        resetBlockedFocus();
+        const relatedTarget = event.relatedTarget;
+        const nativeEvent = event.nativeEvent;
 
-      // Hit the non-modal focus management portal guard. Focus will be
-      // moved into the floating element immediately after.
-      const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
+        // Hit the non-modal focus management portal guard. Focus will be
+        // moved into the floating element immediately after.
+        const movedToFocusGuard = isElement(relatedTarget) && relatedTarget.hasAttribute(createAttribute('focus-guard')) && relatedTarget.getAttribute('data-type') === 'outside';
 
-      // Wait for the window blur listener to fire.
-      timeout.start(0, () => {
-        const domReference = store.select('domReferenceElement');
-        const activeEl = activeElement(ownerDocument(domReference));
+        // Wait for the window blur listener to fire.
+        timeout.start(0, () => {
+          const domReference = store.select('domReferenceElement');
+          const activeEl = activeElement(ownerDocument(domReference));
 
-        // Focus left the page, keep it open.
-        if (!relatedTarget && activeEl === domReference) {
-          return;
-        }
+          // Focus left the page, keep it open.
+          if (!relatedTarget && activeEl === domReference) {
+            return;
+          }
 
-        // When focusing the reference element (e.g. regular click), then
-        // clicking into the floating element, prevent it from hiding.
-        // Note: it must be focusable, e.g. `tabindex="-1"`.
-        // We can not rely on relatedTarget to point to the correct element
-        // 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 (contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || contains(domReference, activeEl) || movedToFocusGuard) {
-          return;
-        }
+          // When focusing the reference element (e.g. regular click), then
+          // clicking into the floating element, prevent it from hiding.
+          // Note: it must be focusable, e.g. `tabindex="-1"`.
+          // We can not rely on relatedTarget to point to the correct element
+          // 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 (contains(dataRef.current.floatingContext?.refs.floating.current, activeEl) || contains(domReference, activeEl) || movedToFocusGuard) {
+            return;
+          }
 
-        // If the next focused element is one of the triggers, do not close
-        // the floating element. The focus handler of that trigger will
-        // handle the open state.
-        const nextFocusedElement = relatedTarget ?? activeEl;
-        if (isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
-          return;
-        }
-        store.setOpen(false, createChangeEventDetails(REASONS.triggerFocus, nativeEvent));
-      });
-    }
-  }), [dataRef, store, timeout, delay]);
+          // If the next focused element is one of the triggers, do not close
+          // the floating element. The focus handler of that trigger will
+          // handle the open state.
+          const nextFocusedElement = relatedTarget ?? activeEl;
+          if (isTargetInsideEnabledTrigger(nextFocusedElement, store.context.triggerElements)) {
+            return;
+          }
+          store.setOpen(false, createChangeEventDetails(REASONS.triggerFocus, nativeEvent));
+        });
+      }
+    };
+  }, [dataRef, delay, store, timeout]);
   return React.useMemo(() => enabled ? {
     reference,
     trigger: reference

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

@@ -1,25 +1,31 @@
 'use client';
 
 import * as React from 'react';
-import { isElement } from '@floating-ui/utils/dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
 import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
-import { useTimeout } from '@base-ui/utils/useTimeout';
-import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains, getTarget, isInteractiveElement } from "../utils.js";
-import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
+import { isElement } from '@floating-ui/utils/dom';
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
-import { getDelay, getRestMs } from "./useHoverShared.js";
+import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
+import { contains, getTarget, isInteractiveElement } from "../utils/element.js";
+import { getDelay, getRestMs, isClickLikeOpenEvent as isClickLikeOpenEventShared, isHoverOpenEvent } from "./useHoverShared.js";
 /**
  * Opens the floating element while hovering over the reference element, like
  * CSS `:hover`.
  * @see https://floating-ui.com/docs/useHover
  */
 export function useHover(context, props = {}) {
+  const {
+    delay = 0,
+    handleClose = null,
+    restMs = 0,
+    move = true
+  } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
   const floatingElement = store.useState('floatingElement');
@@ -28,12 +34,6 @@ export function useHover(context, props = {}) {
     dataRef,
     events
   } = store.context;
-  const {
-    delay = 0,
-    handleClose = null,
-    restMs = 0,
-    move = true
-  } = props;
   const tree = useFloatingTree();
   const parentId = useFloatingParentNodeId();
   const handleCloseRef = useValueAsRef(handleClose);
@@ -41,22 +41,29 @@ export function useHover(context, props = {}) {
   const restMsRef = useValueAsRef(restMs);
   const pointerTypeRef = React.useRef(undefined);
   const interactedInsideRef = React.useRef(false);
-  const timeout = useTimeout();
   const handlerRef = React.useRef(undefined);
-  const restTimeout = useTimeout();
   const blockMouseMoveRef = React.useRef(true);
   const performedPointerEventsMutationRef = React.useRef(false);
   const unbindMouseMoveRef = React.useRef(() => {});
   const restTimeoutPendingRef = React.useRef(false);
+  const timeout = useTimeout();
+  const restTimeout = useTimeout();
   const isHoverOpen = useStableCallback(() => {
-    const type = dataRef.current.openEvent?.type;
-    return type?.includes('mouse') && type !== 'mousedown';
+    return isHoverOpenEvent(dataRef.current.openEvent?.type);
   });
   const isClickLikeOpenEvent = useStableCallback(() => {
-    if (interactedInsideRef.current) {
-      return true;
+    return isClickLikeOpenEventShared(dataRef.current.openEvent?.type, interactedInsideRef.current);
+  });
+  const cleanupMouseMoveHandler = useStableCallback(() => {
+    unbindMouseMoveRef.current();
+    handlerRef.current = undefined;
+  });
+  const clearPointerEvents = useStableCallback(() => {
+    if (performedPointerEventsMutationRef.current) {
+      const body = ownerDocument(floatingElement).body;
+      body.style.pointerEvents = '';
+      performedPointerEventsMutationRef.current = false;
     }
-    return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
   });
 
   // When closing before opening, clear the delay timeouts to cancel it
@@ -93,39 +100,40 @@ export function useHover(context, props = {}) {
     const html = ownerDocument(floatingElement).documentElement;
     return addEventListener(html, 'mouseleave', onLeave);
   }, [floatingElement, open, store, handleCloseRef, isHoverOpen, isClickLikeOpenEvent]);
-  const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
-    const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
-    if (closeDelay && !handlerRef.current) {
-      timeout.start(closeDelay, () => store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event)));
-    } else if (runElseBranch) {
-      timeout.clear();
-      store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
-    }
-  }, [delayRef, store, timeout]);
-  const cleanupMouseMoveHandler = useStableCallback(() => {
-    unbindMouseMoveRef.current();
-    handlerRef.current = undefined;
-  });
-  const clearPointerEvents = useStableCallback(() => {
-    if (performedPointerEventsMutationRef.current) {
-      const body = ownerDocument(floatingElement).body;
-      body.style.pointerEvents = '';
-      performedPointerEventsMutationRef.current = false;
-    }
-  });
-  const handleInteractInside = useStableCallback(event => {
-    const target = getTarget(event);
-    if (!isInteractiveElement(target)) {
-      interactedInsideRef.current = false;
-      return;
-    }
-    interactedInsideRef.current = true;
-  });
 
   // Registering the mouse events on the reference directly to bypass React's
   // delegation system. If the cursor was on a disabled element and then entered
   // the reference (no gap), `mouseenter` doesn't fire in the delegation system.
   React.useEffect(() => {
+    function closeWithDelay(event, runElseBranch = true) {
+      const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
+      if (closeDelay && !handlerRef.current) {
+        timeout.start(closeDelay, () => store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event)));
+      } else if (runElseBranch) {
+        timeout.clear();
+        store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+      }
+    }
+    function handleInteractInside(event) {
+      const target = getTarget(event);
+      if (!isInteractiveElement(target)) {
+        interactedInsideRef.current = false;
+        return;
+      }
+      interactedInsideRef.current = true;
+    }
+    function getHandleCloseHandler(event, onClose) {
+      if (!handleCloseRef.current || !dataRef.current.floatingContext) {
+        return null;
+      }
+      return handleCloseRef.current({
+        ...dataRef.current.floatingContext,
+        tree,
+        x: event.clientX,
+        y: event.clientY,
+        onClose
+      });
+    }
     function onReferenceMouseEnter(event) {
       timeout.clear();
       blockMouseMoveRef.current = false;
@@ -161,25 +169,19 @@ export function useHover(context, props = {}) {
         // as it will be moved.
         return;
       }
-      if (handleCloseRef.current && dataRef.current.floatingContext) {
+      const handler = getHandleCloseHandler(event, () => {
+        clearPointerEvents();
+        cleanupMouseMoveHandler();
+        if (!isClickLikeOpenEvent()) {
+          closeWithDelay(event, true);
+        }
+      });
+      if (handler) {
         // Prevent clearing `onScrollMouseLeave` timeout.
         if (!open) {
           timeout.clear();
         }
-        handlerRef.current = handleCloseRef.current({
-          ...dataRef.current.floatingContext,
-          tree,
-          x: event.clientX,
-          y: event.clientY,
-          onClose() {
-            clearPointerEvents();
-            cleanupMouseMoveHandler();
-            if (!isClickLikeOpenEvent()) {
-              closeWithDelay(event, true);
-            }
-          }
-        });
-        const handler = handlerRef.current;
+        handlerRef.current = handler;
         unbindMouseMoveRef.current = addEventListener(doc, 'mousemove', handler);
         return;
       }
@@ -206,19 +208,13 @@ export function useHover(context, props = {}) {
         // as it will be moved.
         return;
       }
-      handleCloseRef.current?.({
-        ...dataRef.current.floatingContext,
-        tree,
-        x: event.clientX,
-        y: event.clientY,
-        onClose() {
-          clearPointerEvents();
-          cleanupMouseMoveHandler();
-          if (!isClickLikeOpenEvent()) {
-            closeWithDelay(event);
-          }
+      getHandleCloseHandler(event, () => {
+        clearPointerEvents();
+        cleanupMouseMoveHandler();
+        if (!isClickLikeOpenEvent()) {
+          closeWithDelay(event);
         }
-      })(event);
+      })?.(event);
     }
     function onFloatingMouseEnter() {
       timeout.clear();
@@ -237,7 +233,7 @@ export function useHover(context, props = {}) {
       }), addEventListener(trigger, 'mouseenter', onReferenceMouseEnter), addEventListener(trigger, 'mouseleave', onReferenceMouseLeave), floating && addEventListener(floating, 'mouseleave', onScrollMouseLeave), floating && addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && addEventListener(floating, 'pointerdown', handleInteractInside, true));
     }
     return undefined;
-  }, [move, domReferenceElement, floatingElement, store, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, open, tree, delayRef, handleCloseRef, dataRef, isClickLikeOpenEvent, restMsRef, timeout, restTimeout, handleInteractInside]);
+  }, [move, domReferenceElement, floatingElement, store, cleanupMouseMoveHandler, clearPointerEvents, open, tree, delayRef, handleCloseRef, dataRef, isClickLikeOpenEvent, restMsRef, timeout, restTimeout]);
 
   // Block pointer-events of every element other than the reference and floating
   // while the floating element is open and has a `handleClose` handler. Also

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

@@ -1,24 +1,29 @@
 'use client';
 
 import * as React from 'react';
-import { isElement } from '@floating-ui/utils/dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
 import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains, getTarget, isTargetInsideEnabledTrigger } from "../utils/element.js";
-import { getNodeChildren } from "../utils/nodes.js";
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { useTimeout } from '@base-ui/utils/useTimeout';
+import { isElement } from '@floating-ui/utils/dom';
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
 import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
+import { contains, getTarget } from "../utils/element.js";
+import { getNodeChildren } from "../utils/nodes.js";
 import { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, isInteractiveElement, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
-import { getDelay, isClickLikeOpenEvent as isClickLikeOpenEventShared } from "./useHoverShared.js";
+import { getDelay, isClickLikeOpenEvent as isClickLikeOpenEventShared, isHoverOpenEvent, isInsideEnabledTrigger } from "./useHoverShared.js";
 /**
  * Provides hover interactions that should be attached to the floating element.
  */
 export function useHoverFloatingInteraction(context, parameters = {}) {
+  const {
+    enabled = true,
+    closeDelay: closeDelayProp = 0,
+    nodeId: nodeIdProp
+  } = parameters;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
   const floatingElement = store.useState('floatingElement');
@@ -26,48 +31,19 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
   const {
     dataRef
   } = store.context;
-  const {
-    enabled = true,
-    closeDelay: closeDelayProp = 0,
-    nodeId: nodeIdProp
-  } = parameters;
-  const instance = useHoverInteractionSharedState(store);
   const tree = useFloatingTree();
   const parentId = useFloatingParentNodeId();
+  const instance = useHoverInteractionSharedState(store);
+  const childClosedTimeout = useTimeout();
   const isClickLikeOpenEvent = useStableCallback(() => {
     return isClickLikeOpenEventShared(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isHoverOpen = useStableCallback(() => {
-    const type = dataRef.current.openEvent?.type;
-    return type?.includes('mouse') && type !== 'mousedown';
-  });
-  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
-    return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+    return isHoverOpenEvent(dataRef.current.openEvent?.type);
   });
-  const closeWithDelay = React.useCallback(event => {
-    const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
-    const close = () => {
-      store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
-      tree?.events.emit('floating.closed', event);
-    };
-    if (closeDelay) {
-      instance.openChangeTimeout.start(closeDelay, close);
-    } else {
-      instance.openChangeTimeout.clear();
-      close();
-    }
-  }, [closeDelayProp, store, instance, tree]);
   const clearPointerEvents = useStableCallback(() => {
     clearSafePolygonPointerEventsMutation(instance);
   });
-  const handleInteractInside = useStableCallback(event => {
-    const target = getTarget(event);
-    if (!isInteractiveElement(target)) {
-      instance.interactedInside = false;
-      return;
-    }
-    instance.interactedInside = target?.closest('[aria-haspopup]') != null;
-  });
   useIsoLayoutEffect(() => {
     if (!open) {
       instance.pointerType = undefined;
@@ -91,7 +67,13 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       if (parentFloating) {
         parentFloating.style.pointerEvents = '';
       }
-      const scopeElement = instance.handleCloseOptions?.getScope?.() ?? instance.pointerEventsScopeElement ?? parentFloating ?? ref.closest('[data-rootownerid]') ?? doc.body;
+
+      // A keep-mounted submenu can appear in the tree before it opens, so a
+      // cached scope or parent lookup may resolve to the submenu itself. That
+      // would not shield sibling items in the parent menu.
+      const cachedScopeElement = instance.pointerEventsScopeElement !== floatingEl ? instance.pointerEventsScopeElement : null;
+      const parentScopeElement = parentFloating !== floatingEl ? parentFloating : null;
+      const scopeElement = instance.handleCloseOptions?.getScope?.() ?? cachedScopeElement ?? parentScopeElement ?? ref.closest('[data-rootownerid]') ?? doc.body;
       applySafePolygonPointerEventsMutation(instance, {
         scopeElement,
         referenceElement: ref,
@@ -103,11 +85,34 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
     }
     return undefined;
   }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
-  const childClosedTimeout = useTimeout();
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
+    function hasParentChildren() {
+      return !!(tree && parentId && getNodeChildren(tree.nodesRef.current, parentId).length > 0);
+    }
+    function closeWithDelay(event) {
+      const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
+      const close = () => {
+        store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+        tree?.events.emit('floating.closed', event);
+      };
+      if (closeDelay) {
+        instance.openChangeTimeout.start(closeDelay, close);
+      } else {
+        instance.openChangeTimeout.clear();
+        close();
+      }
+    }
+    function handleInteractInside(event) {
+      const target = getTarget(event);
+      if (!isInteractiveElement(target)) {
+        instance.interactedInside = false;
+        return;
+      }
+      instance.interactedInside = target?.closest('[aria-haspopup]') != null;
+    }
     function onFloatingMouseEnter() {
       instance.openChangeTimeout.clear();
       childClosedTimeout.clear();
@@ -115,11 +120,11 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       clearPointerEvents();
     }
     function onFloatingMouseLeave(event) {
-      if (tree && parentId && getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (hasParentChildren() && tree) {
         tree.events.on('floating.closed', onNodeClosed);
         return;
       }
-      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
+      if (isInsideEnabledTrigger(event.relatedTarget, store.context.triggerElements)) {
         // If the mouse is leaving the reference element to another trigger, don't explicitly close the popup
         // as it will be moved.
         return;
@@ -142,7 +147,7 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onNodeClosed(event) {
-      if (!tree || !parentId || getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+      if (!tree || !parentId || hasParentChildren()) {
         return;
       }
       // Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
@@ -156,5 +161,5 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
     return mergeCleanups(floating && addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && addEventListener(floating, 'pointerdown', handleInteractInside, true), () => {
       tree?.events.off('floating.closed', onNodeClosed);
     });
-  }, [enabled, floatingElement, store, dataRef, nodeIdProp, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
+  }, [enabled, floatingElement, store, dataRef, closeDelayProp, nodeIdProp, isClickLikeOpenEvent, clearPointerEvents, instance, tree, parentId, childClosedTimeout]);
 }

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

@@ -69,8 +69,8 @@ export function applySafePolygonPointerEventsMutation(instance, options) {
   floatingElement.style.pointerEvents = 'auto';
 }
 export function useHoverInteractionSharedState(store) {
-  const instance = useRefWithInit(HoverInteraction.create).current;
   const data = store.context.dataRef.current;
+  const instance = useRefWithInit(() => data.hoverInteractionState ?? HoverInteraction.create()).current;
   if (!data.hoverInteractionState) {
     data.hoverInteractionState = instance;
   }

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

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import type { Delay, FloatingContext, FloatingRootContext } from "../types.js";
+import { HTMLProps } from "../../internals/types.js";
 import type { FloatingTreeStore } from "../components/FloatingTreeStore.js";
+import type { Delay, FloatingContext, FloatingRootContext } from "../types.js";
 import type { HandleClose, HandleCloseContextBase } from "./useHoverShared.js";
-import { HTMLProps } from "../../internals/types.js";
 export interface UseHoverReferenceInteractionProps {
   enabled?: boolean | undefined;
   handleClose?: HandleClose | null | undefined;
@@ -21,6 +21,11 @@ export interface UseHoverReferenceInteractionProps {
   triggerElementRef?: Readonly<React.RefObject<Element | null>> | undefined;
   getHandleCloseContext?: (() => HandleCloseContextBase | null) | undefined;
   isClosing?: (() => boolean) | undefined;
+  /**
+   * Called before each hover-driven open attempt (immediate, delayed, and rest-ms
+   * paths). Return `false` to veto; any other return value permits the open.
+   */
+  shouldOpen?: (() => boolean) | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger