@base-ui/react 1.4.1 → 1.5.0

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

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFloating = useFloating;
 var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _reactDom = require("@floating-ui/react-dom");
 var _dom = require("@floating-ui/utils/dom");
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _FloatingTree = require("../components/FloatingTree");
 var _useFloatingRootContext = require("./useFloatingRootContext");
 /**
@@ -21,30 +21,37 @@ function useFloating(options = {}) {
     nodeId,
     externalTree
   } = options;
-  const internalRootStore = (0, _useFloatingRootContext.useFloatingRootContext)(options);
-  const rootContext = options.rootContext || internalRootStore;
-  const rootContextElements = {
-    reference: rootContext.useState('referenceElement'),
-    floating: rootContext.useState('floatingElement'),
-    domReference: rootContext.useState('domReferenceElement')
-  };
+  const internalStore = (0, _useFloatingRootContext.useFloatingRootContext)(options);
+  const store = options.rootContext || internalStore;
+  const referenceElement = store.useState('referenceElement');
+  const floatingElement = store.useState('floatingElement');
+  const domReferenceElement = store.useState('domReferenceElement');
+  const open = store.useState('open');
+  const floatingId = store.useState('floatingId');
   const [positionReference, setPositionReferenceRaw] = React.useState(null);
+  const [localDomReference, setLocalDomReference] = React.useState(undefined);
+  const [localFloatingElement, setLocalFloatingElement] = React.useState(undefined);
   const domReferenceRef = React.useRef(null);
   const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (rootContextElements.domReference) {
-      domReferenceRef.current = rootContextElements.domReference;
-    }
-  }, [rootContextElements.domReference]);
+  const storeElements = React.useMemo(() => ({
+    reference: referenceElement,
+    floating: floatingElement,
+    domReference: domReferenceElement
+  }), [referenceElement, floatingElement, domReferenceElement]);
   const position = (0, _reactDom.useFloating)({
     ...options,
     elements: {
-      ...rootContextElements,
+      ...storeElements,
       ...(positionReference && {
         reference: positionReference
       })
     }
   });
+  const localDomReferenceElement = (0, _dom.isElement)(localDomReference) ? localDomReference : null;
+  const syncedFloatingElement = localFloatingElement === undefined ? store.state.floatingElement : localFloatingElement;
+  store.useSyncedValue('referenceElement', localDomReference ?? null);
+  store.useSyncedValue('domReferenceElement', localDomReference === undefined ? domReferenceElement : localDomReferenceElement);
+  store.useSyncedValue('floatingElement', syncedFloatingElement);
   const setPositionReference = React.useCallback(node => {
     const computedPositionReference = (0, _dom.isElement)(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
@@ -56,12 +63,6 @@ function useFloating(options = {}) {
     setPositionReferenceRaw(computedPositionReference);
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
-  const [localDomReference, setLocalDomReference] = React.useState(undefined);
-  const [localFloatingElement, setLocalFloatingElement] = React.useState(null);
-  rootContext.useSyncedValue('referenceElement', localDomReference ?? null);
-  const localDomReferenceElement = (0, _dom.isElement)(localDomReference) ? localDomReference : null;
-  rootContext.useSyncedValue('domReferenceElement', localDomReference === undefined ? rootContextElements.domReference : localDomReferenceElement);
-  rootContext.useSyncedValue('floatingElement', localFloatingElement);
   const setReference = React.useCallback(node => {
     if ((0, _dom.isElement)(node) || node === null) {
       domReferenceRef.current = node;
@@ -91,24 +92,27 @@ function useFloating(options = {}) {
   }), [position.refs, setReference, setFloating, setPositionReference]);
   const elements = React.useMemo(() => ({
     ...position.elements,
-    domReference: rootContextElements.domReference
-  }), [position.elements, rootContextElements.domReference]);
-  const open = rootContext.useState('open');
-  const floatingId = rootContext.useState('floatingId');
+    domReference: domReferenceElement
+  }), [position.elements, domReferenceElement]);
   const context = React.useMemo(() => ({
     ...position,
-    dataRef: rootContext.context.dataRef,
+    dataRef: store.context.dataRef,
     open,
-    onOpenChange: rootContext.setOpen,
-    events: rootContext.context.events,
+    onOpenChange: store.setOpen,
+    events: store.context.events,
     floatingId,
     refs,
     elements,
     nodeId,
-    rootStore: rootContext
-  }), [position, refs, elements, nodeId, rootContext, open, floatingId]);
+    rootStore: store
+  }), [position, refs, elements, nodeId, store, open, floatingId]);
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (domReferenceElement) {
+      domReferenceRef.current = domReferenceElement;
+    }
+  }, [domReferenceElement]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    rootContext.context.dataRef.current.floatingContext = context;
+    store.context.dataRef.current.floatingContext = context;
     const node = tree?.nodesRef.current.find(n => n.id === nodeId);
     if (node) {
       node.context = context;
@@ -119,6 +123,6 @@ function useFloating(options = {}) {
     context,
     refs,
     elements,
-    rootStore: rootContext
-  }), [position, refs, elements, context, rootContext]);
+    rootStore: store
+  }), [position, refs, elements, context, store]);
 }

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

@@ -1,6 +1,6 @@
-import type { ReferenceType } from "../types.js";
 import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
+import type { ReferenceType } from "../types.js";
 export interface UseFloatingRootContextOptions {
   open?: boolean | undefined;
   onOpenChange?(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;

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

@@ -7,11 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFloatingRootContext = useFloatingRootContext;
 var _dom = require("@floating-ui/utils/dom");
 var _useId = require("@base-ui/utils/useId");
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
+var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
+var _popups = require("../../utils/popups");
 var _FloatingTree = require("../components/FloatingTree");
 var _FloatingRootStore = require("../components/FloatingRootStore");
-var _popups = require("../../utils/popups");
 function useFloatingRootContext(options) {
   const {
     open = false,

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

@@ -7,16 +7,16 @@ 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 _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _owner = require("@base-ui/utils/owner");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _dom = require("@floating-ui/utils/dom");
+var _createAttribute = require("../utils/createAttribute");
 var _element = require("../utils/element");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
-var _createAttribute = require("../utils/createAttribute");
 const isMacSafari = _detectBrowser.isMac && _detectBrowser.isSafari;
 /**
  * Opens the floating element while the reference element has focus, like CSS
@@ -24,20 +24,20 @@ const isMacSafari = _detectBrowser.isMac && _detectBrowser.isSafari;
  * @see https://floating-ui.com/docs/useFocus
  */
 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 = (0, _useTimeout.useTimeout)();
   const keyboardModalityRef = React.useRef(true);
+  const timeout = (0, _useTimeout.useTimeout)();
   React.useEffect(() => {
     const domReference = store.select('domReferenceElement');
     if (!enabled) {
@@ -80,91 +80,94 @@ 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 = (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, _element.isTypeableElement)(target)) {
+        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, _element.isTypeableElement)(target)) {
+              return;
+            }
+          } else if (!(0, _element.matchesFocusVisible)(target)) {
             return;
           }
-        } else if (!(0, _element.matchesFocusVisible)(target)) {
-          return;
         }
-      }
-      const movedFromOtherEnabledTrigger = (0, _element.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, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent, currentTarget));
-        return;
-      }
-      timeout.start(delayValue, () => {
-        if (blockFocusRef.current) {
+        const movedFromOtherEnabledTrigger = (0, _element.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, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent, currentTarget));
           return;
         }
-        store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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 = (0, _dom.isElement)(relatedTarget) && relatedTarget.hasAttribute((0, _createAttribute.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 = (0, _dom.isElement)(relatedTarget) && relatedTarget.hasAttribute((0, _createAttribute.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 = (0, _element.activeElement)((0, _owner.ownerDocument)(domReference));
+        // Wait for the window blur listener to fire.
+        timeout.start(0, () => {
+          const domReference = store.select('domReferenceElement');
+          const activeEl = (0, _element.activeElement)((0, _owner.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 ((0, _element.contains)(dataRef.current.floatingContext?.refs.floating.current, activeEl) || (0, _element.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 ((0, _element.contains)(dataRef.current.floatingContext?.refs.floating.current, activeEl) || (0, _element.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 ((0, _element.isTargetInsideEnabledTrigger)(nextFocusedElement, store.context.triggerElements)) {
-          return;
-        }
-        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.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 ((0, _element.isTargetInsideEnabledTrigger)(nextFocusedElement, store.context.triggerElements)) {
+            return;
+          }
+          store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));
+        });
+      }
+    };
+  }, [dataRef, delay, store, timeout]);
   return React.useMemo(() => enabled ? {
     reference,
     trigger: reference

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

@@ -7,18 +7,18 @@ 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");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _owner = require("@base-ui/utils/owner");
-var _utils = require("../utils");
-var _FloatingTree = require("../components/FloatingTree");
+var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _useTimeout = require("@base-ui/utils/useTimeout");
+var _useValueAsRef = require("@base-ui/utils/useValueAsRef");
+var _dom = require("@floating-ui/utils/dom");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
+var _FloatingTree = require("../components/FloatingTree");
+var _element = require("../utils/element");
 var _useHoverShared = require("./useHoverShared");
 /**
  * Opens the floating element while hovering over the reference element, like
@@ -26,6 +26,12 @@ var _useHoverShared = require("./useHoverShared");
  * @see https://floating-ui.com/docs/useHover
  */
 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');
@@ -34,12 +40,6 @@ function useHover(context, props = {}) {
     dataRef,
     events
   } = store.context;
-  const {
-    delay = 0,
-    handleClose = null,
-    restMs = 0,
-    move = true
-  } = props;
   const tree = (0, _FloatingTree.useFloatingTree)();
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
   const handleCloseRef = (0, _useValueAsRef.useValueAsRef)(handleClose);
@@ -47,22 +47,29 @@ function useHover(context, props = {}) {
   const restMsRef = (0, _useValueAsRef.useValueAsRef)(restMs);
   const pointerTypeRef = React.useRef(undefined);
   const interactedInsideRef = React.useRef(false);
-  const timeout = (0, _useTimeout.useTimeout)();
   const handlerRef = React.useRef(undefined);
-  const restTimeout = (0, _useTimeout.useTimeout)();
   const blockMouseMoveRef = React.useRef(true);
   const performedPointerEventsMutationRef = React.useRef(false);
   const unbindMouseMoveRef = React.useRef(() => {});
   const restTimeoutPendingRef = React.useRef(false);
+  const timeout = (0, _useTimeout.useTimeout)();
+  const restTimeout = (0, _useTimeout.useTimeout)();
   const isHoverOpen = (0, _useStableCallback.useStableCallback)(() => {
-    const type = dataRef.current.openEvent?.type;
-    return type?.includes('mouse') && type !== 'mousedown';
+    return (0, _useHoverShared.isHoverOpenEvent)(dataRef.current.openEvent?.type);
   });
   const isClickLikeOpenEvent = (0, _useStableCallback.useStableCallback)(() => {
-    if (interactedInsideRef.current) {
-      return true;
+    return (0, _useHoverShared.isClickLikeOpenEvent)(dataRef.current.openEvent?.type, interactedInsideRef.current);
+  });
+  const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
+    unbindMouseMoveRef.current();
+    handlerRef.current = undefined;
+  });
+  const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
+    if (performedPointerEventsMutationRef.current) {
+      const body = (0, _owner.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
@@ -99,39 +106,40 @@ function useHover(context, props = {}) {
     const html = (0, _owner.ownerDocument)(floatingElement).documentElement;
     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);
-    if (closeDelay && !handlerRef.current) {
-      timeout.start(closeDelay, () => store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
-    } else if (runElseBranch) {
-      timeout.clear();
-      store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
-    }
-  }, [delayRef, store, timeout]);
-  const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
-    unbindMouseMoveRef.current();
-    handlerRef.current = undefined;
-  });
-  const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
-    if (performedPointerEventsMutationRef.current) {
-      const body = (0, _owner.ownerDocument)(floatingElement).body;
-      body.style.pointerEvents = '';
-      performedPointerEventsMutationRef.current = false;
-    }
-  });
-  const handleInteractInside = (0, _useStableCallback.useStableCallback)(event => {
-    const target = (0, _utils.getTarget)(event);
-    if (!(0, _utils.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 = (0, _useHoverShared.getDelay)(delayRef.current, 'close', pointerTypeRef.current);
+      if (closeDelay && !handlerRef.current) {
+        timeout.start(closeDelay, () => store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
+      } else if (runElseBranch) {
+        timeout.clear();
+        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+      }
+    }
+    function handleInteractInside(event) {
+      const target = (0, _element.getTarget)(event);
+      if (!(0, _element.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;
@@ -141,7 +149,7 @@ function useHover(context, props = {}) {
       const openDelay = (0, _useHoverShared.getDelay)(delayRef.current, 'open', pointerTypeRef.current);
       const trigger = event.currentTarget ?? undefined;
       const domReference = store.select('domReferenceElement');
-      const isOverInactiveTrigger = domReference && trigger && !(0, _utils.contains)(domReference, trigger);
+      const isOverInactiveTrigger = domReference && trigger && !(0, _element.contains)(domReference, trigger);
       if (openDelay) {
         timeout.start(openDelay, () => {
           if (!store.select('open')) {
@@ -167,25 +175,19 @@ 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 = (0, _addEventListener.addEventListener)(doc, 'mousemove', handler);
         return;
       }
@@ -193,7 +195,7 @@ function useHover(context, props = {}) {
       // Allow interactivity without `safePolygon` on touch devices. With a
       // pointer, a short close delay is an alternative, so it should work
       // consistently.
-      const shouldClose = pointerTypeRef.current === 'touch' ? !(0, _utils.contains)(floatingElement, event.relatedTarget) : true;
+      const shouldClose = pointerTypeRef.current === 'touch' ? !(0, _element.contains)(floatingElement, event.relatedTarget) : true;
       if (shouldClose) {
         closeWithDelay(event);
       }
@@ -212,19 +214,13 @@ 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();
@@ -243,7 +239,7 @@ function useHover(context, props = {}) {
       }), (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]);
+  }, [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
@@ -308,7 +304,7 @@ function useHover(context, props = {}) {
 
         // `true` when there are multiple triggers per floating element and user hovers over the one that
         // wasn't used to open the floating element.
-        const isOverInactiveTrigger = store.select('domReferenceElement') && !(0, _utils.contains)(store.select('domReferenceElement'), event.target);
+        const isOverInactiveTrigger = store.select('domReferenceElement') && !(0, _element.contains)(store.select('domReferenceElement'), event.target);
         function handleMouseMove() {
           if (!blockMouseMoveRef.current && (!store.select('open') || isOverInactiveTrigger)) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, nativeEvent, trigger));