@base-ui/react 1.1.0 → 1.2.0

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

@@ -1,8 +1,11 @@
+'use client';
+
 import * as React from 'react';
 import { isElement } from '@floating-ui/utils/dom';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
-import { getDocument, getTarget, isMouseLikePointerType } from "../utils.js";
+import { ownerDocument } from '@base-ui/utils/owner';
+import { getTarget, isMouseLikePointerType, isTargetInsideEnabledTrigger } from "../utils.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
@@ -22,23 +25,13 @@ export 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
-  } = useHoverInteractionSharedState(store);
-  const tree = useFloatingTree(externalTree);
+  const instance = useHoverInteractionSharedState(store);
+  const tree = useFloatingTree();
   const parentId = useFloatingParentNodeId();
   const isClickLikeOpenEvent = useStableCallback(() => {
-    if (interactedInsideRef.current) {
+    if (instance.interactedInside) {
       return true;
     }
     return dataRef.current.openEvent ? clickLikeEvents.has(dataRef.current.openEvent.type) : false;
@@ -47,44 +40,47 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
     const type = dataRef.current.openEvent?.type;
     return type?.includes('mouse') && type !== 'mousedown';
   });
+  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
+    return 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, createChangeEventDetails(REASONS.triggerHover, event)));
+    const closeDelay = getDelay(closeDelayProp, instance.pointerType);
+    if (closeDelay && !instance.handler) {
+      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event)));
     } else if (runElseBranch) {
-      openChangeTimeout.clear();
+      instance.openChangeTimeout.clear();
       store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
     }
-  }, [closeDelayProp, handlerRef, store, pointerTypeRef, openChangeTimeout]);
+  }, [closeDelayProp, store, instance]);
   const cleanupMouseMoveHandler = useStableCallback(() => {
-    unbindMouseMoveRef.current();
-    handlerRef.current = undefined;
+    instance.unbindMouseMove();
+    instance.handler = undefined;
   });
   const clearPointerEvents = useStableCallback(() => {
-    if (performedPointerEventsMutationRef.current) {
-      const body = getDocument(floatingElement).body;
+    if (instance.performedPointerEventsMutation) {
+      const body = ownerDocument(floatingElement).body;
       body.style.pointerEvents = '';
       body.removeAttribute(safePolygonIdentifier);
-      performedPointerEventsMutationRef.current = false;
+      instance.performedPointerEventsMutation = false;
     }
   });
   const handleInteractInside = useStableCallback(event => {
     const target = getTarget(event);
     if (!isInteractiveElement(target)) {
-      interactedInsideRef.current = false;
+      instance.interactedInside = false;
       return;
     }
-    interactedInsideRef.current = true;
+    instance.interactedInside = true;
   });
   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();
@@ -97,9 +93,9 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
     if (!enabled) {
       return undefined;
     }
-    if (open && handleCloseOptionsRef.current?.blockPointerEvents && isHoverOpen() && isElement(domReferenceElement) && floatingElement) {
-      performedPointerEventsMutationRef.current = true;
-      const body = getDocument(floatingElement).body;
+    if (open && instance.handleCloseOptions?.blockPointerEvents && isHoverOpen() && isElement(domReferenceElement) && floatingElement) {
+      instance.performedPointerEventsMutation = true;
+      const body = ownerDocument(floatingElement).body;
       body.setAttribute(safePolygonIdentifier, '');
       const ref = domReferenceElement;
       const floatingEl = floatingElement;
@@ -117,7 +113,7 @@ export 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;
@@ -130,8 +126,7 @@ export 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;
@@ -143,9 +138,9 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       }
     }
     function onFloatingMouseEnter(event) {
-      openChangeTimeout.clear();
+      instance.openChangeTimeout.clear();
       clearPointerEvents();
-      handlerRef.current?.(event);
+      instance.handler?.(event);
       cleanupMouseMoveHandler();
     }
     function onFloatingMouseLeave(event) {
@@ -168,7 +163,7 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
         floating.removeEventListener('pointerdown', handleInteractInside, true);
       }
     };
-  });
+  }, [enabled, floatingElement, store, dataRef, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, cleanupMouseMoveHandler, handleInteractInside, instance]);
 }
 export function getDelay(value, pointerType) {
   if (pointerType && !isMouseLikePointerType(pointerType)) {

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

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

@@ -1,5 +1,8 @@
-import * as React from 'react';
-import { useTimeout } from '@base-ui/utils/useTimeout';
+'use client';
+
+import { useOnMount } from '@base-ui/utils/useOnMount';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
+import { Timeout } from '@base-ui/utils/useTimeout';
 import { createAttribute } from "../utils/createAttribute.js";
 import { TYPEABLE_SELECTOR } from "../utils/constants.js";
 export const safePolygonIdentifier = createAttribute('safe-polygon');
@@ -7,33 +10,36 @@ const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tab
 export function isInteractiveElement(element) {
   return element ? Boolean(element.closest(interactiveSelector)) : false;
 }
+export class HoverInteraction {
+  constructor() {
+    this.pointerType = undefined;
+    this.interactedInside = false;
+    this.handler = undefined;
+    this.blockMouseMove = true;
+    this.performedPointerEventsMutation = false;
+    this.unbindMouseMove = () => {};
+    this.restTimeoutPending = false;
+    this.openChangeTimeout = new Timeout();
+    this.restTimeout = new Timeout();
+    this.handleCloseOptions = undefined;
+  }
+  static create() {
+    return new HoverInteraction();
+  }
+  dispose = () => {
+    this.openChangeTimeout.clear();
+    this.restTimeout.clear();
+  };
+  disposeEffect = () => {
+    return this.dispose;
+  };
+}
 export function useHoverInteractionSharedState(store) {
-  const pointerTypeRef = React.useRef(undefined);
-  const interactedInsideRef = React.useRef(false);
-  const handlerRef = React.useRef(undefined);
-  const blockMouseMoveRef = React.useRef(true);
-  const performedPointerEventsMutationRef = React.useRef(false);
-  const unbindMouseMoveRef = React.useRef(() => {});
-  const restTimeoutPendingRef = React.useRef(false);
-  const openChangeTimeout = useTimeout();
-  const restTimeout = useTimeout();
-  const handleCloseOptionsRef = React.useRef(undefined);
-  return React.useMemo(() => {
-    const data = store.context.dataRef.current;
-    if (!data.hoverInteractionState) {
-      data.hoverInteractionState = {
-        pointerTypeRef,
-        interactedInsideRef,
-        handlerRef,
-        blockMouseMoveRef,
-        performedPointerEventsMutationRef,
-        unbindMouseMoveRef,
-        restTimeoutPendingRef,
-        openChangeTimeout,
-        restTimeout,
-        handleCloseOptionsRef
-      };
-    }
-    return data.hoverInteractionState;
-  }, [store, pointerTypeRef, interactedInsideRef, handlerRef, blockMouseMoveRef, performedPointerEventsMutationRef, unbindMouseMoveRef, restTimeoutPendingRef, openChangeTimeout, restTimeout, handleCloseOptionsRef]);
+  const instance = useRefWithInit(HoverInteraction.create).current;
+  const data = store.context.dataRef.current;
+  if (!data.hoverInteractionState) {
+    data.hoverInteractionState = instance;
+  }
+  useOnMount(data.hoverInteractionState.disposeEffect);
+  return data.hoverInteractionState;
 }

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

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import type { FloatingContext, FloatingRootContext } from "../types.js";
 import type { UseHoverProps } from "./useHover.js";
+import type { FloatingTreeStore } from "../components/FloatingTreeStore.js";
 import { HTMLProps } from "../../utils/types.js";
-export interface UseHoverReferenceInteractionProps extends Omit<UseHoverProps, 'triggerElement'> {
+export interface UseHoverReferenceInteractionProps extends UseHoverProps {
+  enabled?: boolean | undefined;
+  mouseOnly?: boolean | undefined;
+  externalTree?: FloatingTreeStore | undefined;
   /**
    * Whether the hook controls the active trigger. When false, the props are
    * returned under the `trigger` key so they can be applied to inactive
    * triggers via `getTriggerProps`.
    * @default true
    */
-  isActiveTrigger?: boolean;
-  triggerElementRef?: Readonly<React.RefObject<Element | null>>;
+  isActiveTrigger?: boolean | undefined;
+  triggerElementRef?: Readonly<React.RefObject<Element | null>> | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger

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

@@ -1,9 +1,12 @@
+'use client';
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isElement } from '@floating-ui/utils/dom';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { contains, getDocument, isMouseLikePointerType } from "../utils.js";
+import { ownerDocument } from '@base-ui/utils/owner';
+import { contains, isMouseLikePointerType, isTargetInsideEnabledTrigger } from "../utils.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { getDelay } from "./useHover.js";
@@ -41,50 +44,43 @@ export function useHoverReferenceInteraction(context, props = {}) {
     isActiveTrigger = true
   } = props;
   const tree = useFloatingTree(externalTree);
-  const {
-    pointerTypeRef,
-    interactedInsideRef,
-    handlerRef: closeHandlerRef,
-    blockMouseMoveRef,
-    performedPointerEventsMutationRef,
-    unbindMouseMoveRef,
-    restTimeoutPendingRef,
-    openChangeTimeout,
-    restTimeout,
-    handleCloseOptionsRef
-  } = useHoverInteractionSharedState(store);
+  const instance = useHoverInteractionSharedState(store);
   const handleCloseRef = useValueAsRef(handleClose);
   const delayRef = useValueAsRef(delay);
   const restMsRef = useValueAsRef(restMs);
+  const enabledRef = useValueAsRef(enabled);
   if (isActiveTrigger) {
     // eslint-disable-next-line no-underscore-dangle
-    handleCloseOptionsRef.current = handleCloseRef.current?.__options;
+    instance.handleCloseOptions = handleCloseRef.current?.__options;
   }
   const isClickLikeOpenEvent = useStableCallback(() => {
-    if (interactedInsideRef.current) {
+    if (instance.interactedInside) {
       return true;
     }
     return dataRef.current.openEvent ? ['click', 'mousedown'].includes(dataRef.current.openEvent.type) : false;
   });
+  const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
+    return isTargetInsideEnabledTrigger(target, store.context.triggerElements);
+  });
   const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
-    const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
-    if (closeDelay && !closeHandlerRef.current) {
-      openChangeTimeout.start(closeDelay, () => store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event)));
+    const closeDelay = getDelay(delayRef.current, 'close', instance.pointerType);
+    if (closeDelay && !instance.handler) {
+      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event)));
     } else if (runElseBranch) {
-      openChangeTimeout.clear();
+      instance.openChangeTimeout.clear();
       store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
     }
-  }, [delayRef, closeHandlerRef, store, pointerTypeRef, openChangeTimeout]);
+  }, [delayRef, store, instance]);
   const cleanupMouseMoveHandler = useStableCallback(() => {
-    unbindMouseMoveRef.current();
-    closeHandlerRef.current = undefined;
+    instance.unbindMouseMove();
+    instance.handler = undefined;
   });
   const clearPointerEvents = useStableCallback(() => {
-    if (performedPointerEventsMutationRef.current) {
-      const body = getDocument(store.select('domReferenceElement')).body;
+    if (instance.performedPointerEventsMutation) {
+      const body = ownerDocument(store.select('domReferenceElement')).body;
       body.style.pointerEvents = '';
       body.removeAttribute(safePolygonIdentifier);
-      performedPointerEventsMutationRef.current = false;
+      instance.performedPointerEventsMutation = false;
     }
   });
 
@@ -96,17 +92,17 @@ export function useHoverReferenceInteraction(context, props = {}) {
     }
     function onOpenChangeLocal(details) {
       if (!details.open) {
-        openChangeTimeout.clear();
-        restTimeout.clear();
-        blockMouseMoveRef.current = true;
-        restTimeoutPendingRef.current = false;
+        instance.openChangeTimeout.clear();
+        instance.restTimeout.clear();
+        instance.blockMouseMove = true;
+        instance.restTimeoutPending = false;
       }
     }
     events.on('openchange', onOpenChangeLocal);
     return () => {
       events.off('openchange', onOpenChangeLocal);
     };
-  }, [enabled, events, openChangeTimeout, restTimeout, blockMouseMoveRef, restTimeoutPendingRef]);
+  }, [enabled, events, instance]);
   const handleScrollMouseLeave = useStableCallback(event => {
     if (isClickLikeOpenEvent()) {
       return;
@@ -114,8 +110,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
     if (!dataRef.current.floatingContext) {
       return;
     }
-    const triggerElements = store.context.triggerElements;
-    if (event.relatedTarget && triggerElements.hasElement(event.relatedTarget)) {
+    if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
       return;
     }
     const currentTrigger = triggerElementRef.current;
@@ -142,9 +137,9 @@ export function useHoverReferenceInteraction(context, props = {}) {
       return undefined;
     }
     function onMouseEnter(event) {
-      openChangeTimeout.clear();
-      blockMouseMoveRef.current = false;
-      if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
+      instance.openChangeTimeout.clear();
+      instance.blockMouseMove = false;
+      if (mouseOnly && !isMouseLikePointerType(instance.pointerType)) {
         return;
       }
 
@@ -153,7 +148,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
       if (getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, 'open')) {
         return;
       }
-      const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
+      const openDelay = getDelay(delayRef.current, 'open', instance.pointerType);
       const currentDomReference = store.select('domReferenceElement');
       const allTriggers = store.context.triggerElements;
       const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => contains(t, event.target))) && (!currentDomReference || !contains(currentDomReference, event.target));
@@ -165,7 +160,7 @@ export function useHoverReferenceInteraction(context, props = {}) {
       if (isOverInactiveTrigger && isOpen) {
         store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
       } else if (openDelay) {
-        openChangeTimeout.start(openDelay, () => {
+        instance.openChangeTimeout.start(openDelay, () => {
           if (shouldOpen) {
             store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, event, triggerNode));
           }
@@ -179,21 +174,20 @@ export function useHoverReferenceInteraction(context, props = {}) {
         clearPointerEvents();
         return;
       }
-      unbindMouseMoveRef.current();
+      instance.unbindMouseMove();
       const domReferenceElement = store.select('domReferenceElement');
-      const doc = getDocument(domReferenceElement);
-      restTimeout.clear();
-      restTimeoutPendingRef.current = false;
-      const triggerElements = store.context.triggerElements;
-      if (event.relatedTarget && triggerElements.hasElement(event.relatedTarget)) {
+      const doc = ownerDocument(domReferenceElement);
+      instance.restTimeout.clear();
+      instance.restTimeoutPending = false;
+      if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
         return;
       }
       if (handleCloseRef.current && dataRef.current.floatingContext) {
         if (!store.select('open')) {
-          openChangeTimeout.clear();
+          instance.openChangeTimeout.clear();
         }
         const currentTrigger = triggerElementRef.current;
-        closeHandlerRef.current = handleCloseRef.current({
+        instance.handler = handleCloseRef.current({
           ...dataRef.current.floatingContext,
           tree,
           x: event.clientX,
@@ -201,20 +195,20 @@ export function useHoverReferenceInteraction(context, props = {}) {
           onClose() {
             clearPointerEvents();
             cleanupMouseMoveHandler();
-            if (!isClickLikeOpenEvent() && currentTrigger === store.select('domReferenceElement')) {
+            if (enabledRef.current && !isClickLikeOpenEvent() && currentTrigger === store.select('domReferenceElement')) {
               closeWithDelay(event, true);
             }
           }
         });
-        const handler = closeHandlerRef.current;
+        const handler = instance.handler;
         handler(event);
         doc.addEventListener('mousemove', handler);
-        unbindMouseMoveRef.current = () => {
+        instance.unbindMouseMove = () => {
           doc.removeEventListener('mousemove', handler);
         };
         return;
       }
-      const shouldClose = pointerTypeRef.current === 'touch' ? !contains(store.select('floatingElement'), event.relatedTarget) : true;
+      const shouldClose = instance.pointerType === 'touch' ? !contains(store.select('floatingElement'), event.relatedTarget) : true;
       if (shouldClose) {
         closeWithDelay(event);
       }
@@ -240,10 +234,13 @@ export function useHoverReferenceInteraction(context, props = {}) {
       trigger.removeEventListener('mouseenter', onMouseEnter);
       trigger.removeEventListener('mouseleave', onMouseLeave);
     };
-  }, [cleanupMouseMoveHandler, clearPointerEvents, blockMouseMoveRef, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, handleScrollMouseLeave, isActiveTrigger, isClickLikeOpenEvent, mouseOnly, move, pointerTypeRef, restMsRef, restTimeout, restTimeoutPendingRef, openChangeTimeout, triggerElementRef, tree, unbindMouseMoveRef, closeHandlerRef]);
+  }, [cleanupMouseMoveHandler, clearPointerEvents, dataRef, delayRef, closeWithDelay, store, enabled, handleCloseRef, handleScrollMouseLeave, instance, isActiveTrigger, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, mouseOnly, move, restMsRef, triggerElementRef, tree, enabledRef]);
   return React.useMemo(() => {
+    if (!enabled) {
+      return undefined;
+    }
     function setPointerRef(event) {
-      pointerTypeRef.current = event.pointerType;
+      instance.pointerType = event.pointerType;
     }
     return {
       onPointerDown: setPointerRef,
@@ -257,18 +254,18 @@ export function useHoverReferenceInteraction(context, props = {}) {
         const allTriggers = store.context.triggerElements;
         const currentOpen = store.select('open');
         const isOverInactiveTrigger = (allTriggers.hasElement(event.target) || allTriggers.hasMatchingElement(t => contains(t, event.target))) && (!currentDomReference || !contains(currentDomReference, event.target));
-        if (mouseOnly && !isMouseLikePointerType(pointerTypeRef.current)) {
+        if (mouseOnly && !isMouseLikePointerType(instance.pointerType)) {
           return;
         }
         if (currentOpen && !isOverInactiveTrigger || getRestMs(restMsRef.current) === 0) {
           return;
         }
-        if (!isOverInactiveTrigger && restTimeoutPendingRef.current && event.movementX ** 2 + event.movementY ** 2 < 2) {
+        if (!isOverInactiveTrigger && instance.restTimeoutPending && event.movementX ** 2 + event.movementY ** 2 < 2) {
           return;
         }
-        restTimeout.clear();
+        instance.restTimeout.clear();
         function handleMouseMove() {
-          restTimeoutPendingRef.current = false;
+          instance.restTimeoutPending = false;
 
           // A delayed hover open should not override a click-like open that happened
           // while the hover delay was pending.
@@ -276,21 +273,21 @@ export function useHoverReferenceInteraction(context, props = {}) {
             return;
           }
           const latestOpen = store.select('open');
-          if (!blockMouseMoveRef.current && (!latestOpen || isOverInactiveTrigger)) {
+          if (!instance.blockMouseMove && (!latestOpen || isOverInactiveTrigger)) {
             store.setOpen(true, createChangeEventDetails(REASONS.triggerHover, nativeEvent, trigger));
           }
         }
-        if (pointerTypeRef.current === 'touch') {
+        if (instance.pointerType === 'touch') {
           ReactDOM.flushSync(() => {
             handleMouseMove();
           });
         } else if (isOverInactiveTrigger && currentOpen) {
           handleMouseMove();
         } else {
-          restTimeoutPendingRef.current = true;
-          restTimeout.start(getRestMs(restMsRef.current), handleMouseMove);
+          instance.restTimeoutPending = true;
+          instance.restTimeout.start(getRestMs(restMsRef.current), handleMouseMove);
         }
       }
     };
-  }, [blockMouseMoveRef, isClickLikeOpenEvent, mouseOnly, store, pointerTypeRef, restMsRef, restTimeout, restTimeoutPendingRef]);
+  }, [enabled, instance, isClickLikeOpenEvent, mouseOnly, store, restMsRef]);
 }

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

@@ -2,8 +2,8 @@ import * as React from 'react';
 import type { ElementProps } from "../types.js";
 import { ACTIVE_KEY, SELECTED_KEY } from "../utils/constants.js";
 export type ExtendedUserProps = {
-  [ACTIVE_KEY]?: boolean;
-  [SELECTED_KEY]?: boolean;
+  [ACTIVE_KEY]?: boolean | undefined;
+  [SELECTED_KEY]?: boolean | undefined;
 };
 export interface UseInteractionsReturn {
   getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;