@base-ui/react 1.1.0 → 1.2.0

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -11,6 +12,7 @@ var _reactDom = require("@floating-ui/react-dom");
 var _dom = require("@floating-ui/utils/dom");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
+var _owner = require("@base-ui/utils/owner");
 var _utils = require("../utils");
 var _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -140,7 +142,7 @@ function useDismiss(context, props = {}) {
     }
     const target = (0, _utils.getTarget)(event);
     const inertSelector = `[${(0, _createAttribute.createAttribute)('inert')}]`;
-    const markers = (0, _utils.getDocument)(store.select('floatingElement')).querySelectorAll(inertSelector);
+    const markers = (0, _owner.ownerDocument)(store.select('floatingElement')).querySelectorAll(inertSelector);
     const triggers = store.context.triggerElements;
 
     // If another trigger is clicked, don't close the floating element.
@@ -338,7 +340,7 @@ function useDismiss(context, props = {}) {
         isComposingRef.current = false;
       });
     }
-    const doc = (0, _utils.getDocument)(floatingElement);
+    const doc = (0, _owner.ownerDocument)(floatingElement);
     doc.addEventListener('pointerdown', trackPointerType, true);
     if (escapeKey) {
       doc.addEventListener('keydown', closeOnEscapeKeyDown);

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {

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

@@ -1,18 +1,12 @@
 import type { ReferenceType } from "../types.js";
 import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
-import { PopupTriggerMap } from "../../utils/popups/index.js";
 export interface UseFloatingRootContextOptions {
-  open?: boolean;
+  open?: boolean | undefined;
   onOpenChange?(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;
   elements?: {
-    reference?: ReferenceType | null;
-    floating?: HTMLElement | null;
-    triggers?: PopupTriggerMap;
-  };
-  /**
-   * Whether to prevent the auto-emitted `openchange` event.
-   */
-  noEmit?: boolean;
+    reference?: (ReferenceType | null) | undefined;
+    floating?: (HTMLElement | null) | undefined;
+  } | undefined;
 }
 export declare function useFloatingRootContext(options: UseFloatingRootContextOptions): FloatingRootStore;

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -30,10 +31,10 @@ function useFloatingRootContext(options) {
     onOpenChange,
     referenceElement: elements.reference ?? null,
     floatingElement: elements.floating ?? null,
-    triggerElements: elements.triggers ?? new _popups.PopupTriggerMap(),
+    triggerElements: new _popups.PopupTriggerMap(),
     floatingId,
     nested,
-    noEmit: options.noEmit || false
+    noEmit: false
   })).current;
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     const valuesToSync = {
@@ -53,6 +54,6 @@ function useFloatingRootContext(options) {
   }, [open, floatingId, elements.reference, elements.floating, store]);
   store.context.onOpenChange = onOpenChange;
   store.context.nested = nested;
-  store.context.noEmit = options.noEmit || false;
+  store.context.noEmit = false;
   return store;
 }

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

@@ -5,18 +5,12 @@ export interface UseFocusProps {
    * handlers.
    * @default true
    */
-  enabled?: boolean;
-  /**
-   * Whether the open state only changes if the focus event is considered
-   * visible (`:focus-visible` CSS selector).
-   * @default true
-   */
-  visibleOnly?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Waits for the specified time before opening.
    * @default undefined
    */
-  delay?: number | (() => number | undefined);
+  delay?: (number | (() => number | undefined)) | undefined;
 }
 /**
  * Opens the floating element while the reference element has focus, like CSS

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,6 +10,7 @@ var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
 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 _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -27,7 +29,6 @@ function useFocus(context, props = {}) {
   } = store.context;
   const {
     enabled = true,
-    visibleOnly = true,
     delay
   } = props;
   const blockFocusRef = React.useRef(false);
@@ -47,7 +48,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, _utils.getDocument)(currentDomReference))) {
+      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _utils.activeElement)((0, _owner.ownerDocument)(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -103,7 +104,7 @@ function useFocus(context, props = {}) {
         blockedReferenceRef.current = null;
       }
       const target = (0, _utils.getTarget)(event.nativeEvent);
-      if (visibleOnly && (0, _dom.isElement)(target)) {
+      if ((0, _dom.isElement)(target)) {
         // Safari fails to match `:focus-visible` if focus was initially
         // outside the document.
         if (isMacSafari && !event.relatedTarget) {
@@ -114,13 +115,13 @@ function useFocus(context, props = {}) {
           return;
         }
       }
-      const movedFromOtherTrigger = event.relatedTarget && store.context.triggerElements.hasElement(event.relatedTarget);
+      const movedFromOtherEnabledTrigger = (0, _utils.isTargetInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements);
       const {
         nativeEvent,
         currentTarget
       } = event;
       const delayValue = typeof delay === 'function' ? delay() : delay;
-      if (store.select('open') && movedFromOtherTrigger || delayValue === 0 || delayValue === undefined) {
+      if (store.select('open') && movedFromOtherEnabledTrigger || delayValue === 0 || delayValue === undefined) {
         store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent, currentTarget));
         return;
       }
@@ -166,16 +167,13 @@ function useFocus(context, props = {}) {
         // the floating element. The focus handler of that trigger will
         // handle the open state.
         const nextFocusedElement = relatedTarget ?? activeEl;
-        if ((0, _dom.isElement)(nextFocusedElement)) {
-          const triggerElements = store.context.triggerElements;
-          if (triggerElements.hasElement(nextFocusedElement) || triggerElements.hasMatchingElement(trigger => (0, _utils.contains)(trigger, nextFocusedElement))) {
-            return;
-          }
+        if ((0, _utils.isTargetInsideEnabledTrigger)(nextFocusedElement, store.context.triggerElements)) {
+          return;
         }
         store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));
       });
     }
-  }), [dataRef, store, visibleOnly, timeout, delay]);
+  }), [dataRef, store, timeout, delay]);
   return React.useMemo(() => enabled ? {
     reference,
     trigger: reference

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

@@ -1,62 +1,39 @@
-import { FloatingTreeStore } from "../components/FloatingTreeStore.js";
 import type { Delay, ElementProps, FloatingContext, FloatingRootContext, FloatingTreeType, SafePolygonOptions } from "../types.js";
 export interface HandleCloseContext extends FloatingContext {
   onClose: () => void;
-  tree?: FloatingTreeType | null;
-  leave?: boolean;
+  tree?: (FloatingTreeType | null) | undefined;
+  leave?: boolean | undefined;
 }
 export interface HandleClose {
   (context: HandleCloseContext): (event: MouseEvent) => void;
-  __options?: SafePolygonOptions;
+  __options?: SafePolygonOptions | undefined;
 }
 export declare function getDelay(value: UseHoverProps['delay'], prop: 'open' | 'close', pointerType?: PointerEvent['pointerType']): number | undefined;
 export interface UseHoverProps {
-  /**
-   * Whether the Hook is enabled, including all internal Effects and event
-   * handlers.
-   * @default true
-   */
-  enabled?: boolean;
   /**
    * Accepts an event handler that runs on `mousemove` to control when the
    * floating element closes once the cursor leaves the reference element.
    * @default null
    */
-  handleClose?: HandleClose | null;
+  handleClose?: (HandleClose | null) | undefined;
   /**
    * Waits until the user’s cursor is at “rest” over the reference element
    * before changing the `open` state.
    * @default 0
    */
-  restMs?: number | (() => number);
+  restMs?: (number | (() => number)) | undefined;
   /**
    * Waits for the specified time when the event listener runs before changing
    * the `open` state.
    * @default 0
    */
-  delay?: Delay | (() => Delay);
-  /**
-   * Whether the logic only runs for mouse input, ignoring touch input.
-   * Note: due to a bug with Linux Chrome, "pen" inputs are considered "mouse".
-   * @default false
-   */
-  mouseOnly?: boolean;
+  delay?: (Delay | (() => Delay)) | undefined;
   /**
    * Whether moving the cursor over the floating element will open it, without a
    * regular hover event required.
    * @default true
    */
-  move?: boolean;
-  /**
-   * Allows to override the element that will trigger the popup.
-   * When it's set, useHover won't read the reference element from the root context.
-   * This allows to have multiple triggers per floating element (assuming `useHover` is called per trigger).
-   */
-  triggerElement?: HTMLElement | null;
-  /**
-   * External FlatingTree to use when the one provided by context can't be used.
-   */
-  externalTree?: FloatingTreeStore;
+  move?: boolean | undefined;
 }
 /**
  * Opens the floating element while hovering over the reference element, like

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -12,6 +13,7 @@ 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 _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
@@ -60,16 +62,12 @@ function useHover(context, props = {}) {
     events
   } = store.context;
   const {
-    enabled = true,
     delay = 0,
     handleClose = null,
-    mouseOnly = false,
     restMs = 0,
-    move = true,
-    triggerElement = null,
-    externalTree
+    move = true
   } = props;
-  const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
+  const tree = (0, _FloatingTree.useFloatingTree)();
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
   const handleCloseRef = (0, _useValueAsRef.useValueAsRef)(handleClose);
   const delayRef = (0, _useValueAsRef.useValueAsRef)(delay);
@@ -97,9 +95,6 @@ function useHover(context, props = {}) {
   // When closing before opening, clear the delay timeouts to cancel it
   // from showing.
   React.useEffect(() => {
-    if (!enabled) {
-      return undefined;
-    }
     function onOpenChangeLocal(details) {
       if (!details.open) {
         timeout.clear();
@@ -112,11 +107,8 @@ function useHover(context, props = {}) {
     return () => {
       events.off('openchange', onOpenChangeLocal);
     };
-  }, [enabled, events, timeout, restTimeout]);
+  }, [events, timeout, restTimeout]);
   React.useEffect(() => {
-    if (!enabled) {
-      return undefined;
-    }
     if (!handleCloseRef.current) {
       return undefined;
     }
@@ -131,12 +123,12 @@ function useHover(context, props = {}) {
         store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event, event.currentTarget ?? undefined));
       }
     }
-    const html = (0, _utils.getDocument)(floatingElement).documentElement;
+    const html = (0, _owner.ownerDocument)(floatingElement).documentElement;
     html.addEventListener('mouseleave', onLeave);
     return () => {
       html.removeEventListener('mouseleave', onLeave);
     };
-  }, [floatingElement, open, store, enabled, handleCloseRef, isHoverOpen, isClickLikeOpenEvent]);
+  }, [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) {
@@ -152,7 +144,7 @@ function useHover(context, props = {}) {
   });
   const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
     if (performedPointerEventsMutationRef.current) {
-      const body = (0, _utils.getDocument)(floatingElement).body;
+      const body = (0, _owner.ownerDocument)(floatingElement).body;
       body.style.pointerEvents = '';
       body.removeAttribute(safePolygonIdentifier);
       performedPointerEventsMutationRef.current = false;
@@ -171,13 +163,10 @@ function useHover(context, props = {}) {
   // 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(() => {
-    if (!enabled) {
-      return undefined;
-    }
     function onReferenceMouseEnter(event) {
       timeout.clear();
       blockMouseMoveRef.current = false;
-      if (mouseOnly && !(0, _utils.isMouseLikePointerType)(pointerTypeRef.current) || getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, 'open')) {
+      if (getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, 'open')) {
         return;
       }
       const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
@@ -200,7 +189,7 @@ function useHover(context, props = {}) {
         return;
       }
       unbindMouseMoveRef.current();
-      const doc = (0, _utils.getDocument)(floatingElement);
+      const doc = (0, _owner.ownerDocument)(floatingElement);
       restTimeout.clear();
       restTimeoutPendingRef.current = false;
       const triggers = store.context.triggerElements;
@@ -280,7 +269,7 @@ function useHover(context, props = {}) {
         closeWithDelay(event, false);
       }
     }
-    const trigger = triggerElement ?? domReferenceElement;
+    const trigger = domReferenceElement;
     if ((0, _dom.isElement)(trigger)) {
       const floating = floatingElement;
       if (open) {
@@ -317,23 +306,19 @@ function useHover(context, props = {}) {
       };
     }
     return undefined;
-  }, [enabled, mouseOnly, move, domReferenceElement, floatingElement, triggerElement, store, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, open, tree, delayRef, handleCloseRef, dataRef, isClickLikeOpenEvent, restMsRef, timeout, restTimeout, handleInteractInside]);
+  }, [move, domReferenceElement, floatingElement, store, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, open, tree, delayRef, handleCloseRef, dataRef, isClickLikeOpenEvent, restMsRef, timeout, restTimeout, handleInteractInside]);
 
   // Block pointer-events of every element other than the reference and floating
   // while the floating element is open and has a `handleClose` handler. Also
   // handles nested floating elements.
   // https://github.com/floating-ui/floating-ui/issues/1722
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    if (!enabled) {
-      return undefined;
-    }
-
     // eslint-disable-next-line no-underscore-dangle
     if (open && handleCloseRef.current?.__options?.blockPointerEvents && isHoverOpen()) {
       performedPointerEventsMutationRef.current = true;
       const floatingEl = floatingElement;
       if ((0, _dom.isElement)(domReferenceElement) && floatingEl) {
-        const body = (0, _utils.getDocument)(floatingElement).body;
+        const body = (0, _owner.ownerDocument)(floatingElement).body;
         body.setAttribute(safePolygonIdentifier, '');
         const ref = domReferenceElement;
         const parentFloating = tree?.nodesRef.current.find(node => node.id === parentId)?.context?.elements.floating;
@@ -351,7 +336,7 @@ function useHover(context, props = {}) {
       }
     }
     return undefined;
-  }, [enabled, open, parentId, tree, handleCloseRef, isHoverOpen, domReferenceElement, floatingElement]);
+  }, [open, parentId, tree, handleCloseRef, isHoverOpen, domReferenceElement, floatingElement]);
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open) {
       pointerTypeRef.current = undefined;
@@ -368,7 +353,7 @@ function useHover(context, props = {}) {
       restTimeout.clear();
       interactedInsideRef.current = false;
     };
-  }, [enabled, domReferenceElement, cleanupMouseMoveHandler, timeout, restTimeout]);
+  }, [domReferenceElement, cleanupMouseMoveHandler, timeout, restTimeout]);
   React.useEffect(() => {
     return clearPointerEvents;
   }, [clearPointerEvents]);
@@ -393,9 +378,6 @@ function useHover(context, props = {}) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, nativeEvent, trigger));
           }
         }
-        if (mouseOnly && !(0, _utils.isMouseLikePointerType)(pointerTypeRef.current)) {
-          return;
-        }
         if (store.select('open') && !isOverInactiveTrigger || getRestMs(restMsRef.current) === 0) {
           return;
         }
@@ -415,8 +397,8 @@ function useHover(context, props = {}) {
         }
       }
     };
-  }, [mouseOnly, store, restMsRef, restTimeout]);
-  return React.useMemo(() => enabled ? {
+  }, [store, restMsRef, restTimeout]);
+  return React.useMemo(() => ({
     reference
-  } : {}, [enabled, reference]);
+  }), [reference]);
 }

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

@@ -1,22 +1,17 @@
 import type { FloatingContext, FloatingRootContext } from "../types.js";
-import { FloatingTreeStore } from "../components/FloatingTreeStore.js";
 export type UseHoverFloatingInteractionProps = {
   /**
    * Whether the Hook is enabled, including all internal Effects and event
    * handlers.
    * @default true
    */
-  enabled?: boolean;
+  enabled?: boolean | undefined;
   /**
    * Waits for the specified time when the event listener runs before changing
    * the `open` state.
    * @default 0
    */
-  closeDelay?: number | (() => number);
-  /**
-   * An optional external floating tree to use instead of the default context.
-   */
-  externalTree?: FloatingTreeStore;
+  closeDelay?: (number | (() => number)) | undefined;
 };
 /**
  * Provides hover interactions that should be attached to the floating element.

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

@@ -1,4 +1,5 @@
 "use strict";
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -10,6 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
 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 _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -30,23 +32,13 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   } = store.context;
   const {
     enabled = true,
-    closeDelay: closeDelayProp = 0,
-    externalTree
+    closeDelay: closeDelayProp = 0
   } = parameters;
-  const {
-    pointerTypeRef,
-    interactedInsideRef,
-    handlerRef,
-    performedPointerEventsMutationRef,
-    unbindMouseMoveRef,
-    restTimeoutPendingRef,
-    openChangeTimeout: openChangeTimeout,
-    handleCloseOptionsRef
-  } = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
-  const tree = (0, _FloatingTree.useFloatingTree)(externalTree);
+  const instance = (0, _useHoverInteractionSharedState.useHoverInteractionSharedState)(store);
+  const tree = (0, _FloatingTree.useFloatingTree)();
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
   const isClickLikeOpenEvent = (0, _useStableCallback.useStableCallback)(() => {
-    if (interactedInsideRef.current) {
+    if (instance.interactedInside) {
       return true;
     }
     return dataRef.current.openEvent ? clickLikeEvents.has(dataRef.current.openEvent.type) : false;
@@ -55,44 +47,47 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     const type = dataRef.current.openEvent?.type;
     return type?.includes('mouse') && type !== 'mousedown';
   });
+  const isRelatedTargetInsideEnabledTrigger = (0, _useStableCallback.useStableCallback)(target => {
+    return (0, _utils.isTargetInsideEnabledTrigger)(target, store.context.triggerElements);
+  });
   const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
-    const closeDelay = getDelay(closeDelayProp, pointerTypeRef.current);
-    if (closeDelay && !handlerRef.current) {
-      openChangeTimeout.start(closeDelay, () => store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
+    const closeDelay = getDelay(closeDelayProp, instance.pointerType);
+    if (closeDelay && !instance.handler) {
+      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
     } else if (runElseBranch) {
-      openChangeTimeout.clear();
+      instance.openChangeTimeout.clear();
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
     }
-  }, [closeDelayProp, handlerRef, store, pointerTypeRef, openChangeTimeout]);
+  }, [closeDelayProp, store, instance]);
   const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
-    unbindMouseMoveRef.current();
-    handlerRef.current = undefined;
+    instance.unbindMouseMove();
+    instance.handler = undefined;
   });
   const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
-    if (performedPointerEventsMutationRef.current) {
-      const body = (0, _utils.getDocument)(floatingElement).body;
+    if (instance.performedPointerEventsMutation) {
+      const body = (0, _owner.ownerDocument)(floatingElement).body;
       body.style.pointerEvents = '';
       body.removeAttribute(_useHoverInteractionSharedState.safePolygonIdentifier);
-      performedPointerEventsMutationRef.current = false;
+      instance.performedPointerEventsMutation = false;
     }
   });
   const handleInteractInside = (0, _useStableCallback.useStableCallback)(event => {
     const target = (0, _utils.getTarget)(event);
     if (!(0, _useHoverInteractionSharedState.isInteractiveElement)(target)) {
-      interactedInsideRef.current = false;
+      instance.interactedInside = false;
       return;
     }
-    interactedInsideRef.current = true;
+    instance.interactedInside = true;
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open) {
-      pointerTypeRef.current = undefined;
-      restTimeoutPendingRef.current = false;
-      interactedInsideRef.current = false;
+      instance.pointerType = undefined;
+      instance.restTimeoutPending = false;
+      instance.interactedInside = false;
       cleanupMouseMoveHandler();
       clearPointerEvents();
     }
-  }, [open, pointerTypeRef, restTimeoutPendingRef, interactedInsideRef, cleanupMouseMoveHandler, clearPointerEvents]);
+  }, [open, instance, cleanupMouseMoveHandler, clearPointerEvents]);
   React.useEffect(() => {
     return () => {
       cleanupMouseMoveHandler();
@@ -105,9 +100,9 @@ function useHoverFloatingInteraction(context, parameters = {}) {
     if (!enabled) {
       return undefined;
     }
-    if (open && handleCloseOptionsRef.current?.blockPointerEvents && isHoverOpen() && (0, _dom.isElement)(domReferenceElement) && floatingElement) {
-      performedPointerEventsMutationRef.current = true;
-      const body = (0, _utils.getDocument)(floatingElement).body;
+    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && (0, _dom.isElement)(domReferenceElement) && floatingElement) {
+      instance.performedPointerEventsMutation = true;
+      const body = (0, _owner.ownerDocument)(floatingElement).body;
       body.setAttribute(_useHoverInteractionSharedState.safePolygonIdentifier, '');
       const ref = domReferenceElement;
       const floatingEl = floatingElement;
@@ -125,7 +120,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       };
     }
     return undefined;
-  }, [enabled, open, domReferenceElement, floatingElement, handleCloseOptionsRef, isHoverOpen, tree, parentId, performedPointerEventsMutationRef]);
+  }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId]);
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
@@ -138,8 +133,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       if (isClickLikeOpenEvent() || !dataRef.current.floatingContext || !store.select('open')) {
         return;
       }
-      const triggerElements = store.context.triggerElements;
-      if (event.relatedTarget && triggerElements.hasElement(event.relatedTarget)) {
+      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
         // If the mouse is leaving the reference element to another trigger, don't explicitly close the popup
         // as it will be moved.
         return;
@@ -151,9 +145,9 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onFloatingMouseEnter(event) {
-      openChangeTimeout.clear();
+      instance.openChangeTimeout.clear();
       clearPointerEvents();
-      handlerRef.current?.(event);
+      instance.handler?.(event);
       cleanupMouseMoveHandler();
     }
     function onFloatingMouseLeave(event) {
@@ -176,7 +170,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
         floating.removeEventListener('pointerdown', handleInteractInside, true);
       }
     };
-  });
+  }, [enabled, floatingElement, store, dataRef, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, cleanupMouseMoveHandler, handleInteractInside, instance]);
 }
 function getDelay(value, pointerType) {
   if (pointerType && !(0, _utils.isMouseLikePointerType)(pointerType)) {

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

@@ -1,18 +1,21 @@
-import * as React from 'react';
-import { useTimeout } from '@base-ui/utils/useTimeout';
+import { Timeout } from '@base-ui/utils/useTimeout';
 import type { FloatingRootContext, SafePolygonOptions } from "../types.js";
 export declare const safePolygonIdentifier: string;
 export declare function isInteractiveElement(element: Element | null): boolean;
-export interface HoverInteractionSharedState {
-  pointerTypeRef: React.RefObject<string | undefined>;
-  interactedInsideRef: React.RefObject<boolean>;
-  handlerRef: React.RefObject<((event: MouseEvent) => void) | undefined>;
-  blockMouseMoveRef: React.RefObject<boolean>;
-  performedPointerEventsMutationRef: React.RefObject<boolean>;
-  unbindMouseMoveRef: React.RefObject<() => void>;
-  restTimeoutPendingRef: React.RefObject<boolean>;
-  openChangeTimeout: ReturnType<typeof useTimeout>;
-  restTimeout: ReturnType<typeof useTimeout>;
-  handleCloseOptionsRef: React.RefObject<SafePolygonOptions | undefined>;
+export declare class HoverInteraction {
+  pointerType: string | undefined;
+  interactedInside: boolean;
+  handler: ((event: MouseEvent) => void) | undefined;
+  blockMouseMove: boolean;
+  performedPointerEventsMutation: boolean;
+  unbindMouseMove: () => void;
+  restTimeoutPending: boolean;
+  openChangeTimeout: Timeout;
+  restTimeout: Timeout;
+  handleCloseOptions: SafePolygonOptions | undefined;
+  constructor();
+  static create(): HoverInteraction;
+  dispose: () => void;
+  disposeEffect: () => () => void;
 }
-export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteractionSharedState;
+export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;