@base-ui/react 1.2.0 → 1.3.0

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

@@ -5,8 +5,8 @@ export interface UseFloatingRootContextOptions {
   open?: boolean | undefined;
   onOpenChange?(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;
   elements?: {
-    reference?: (ReferenceType | null) | undefined;
-    floating?: (HTMLElement | null) | undefined;
+    reference?: ReferenceType | null | undefined;
+    floating?: HTMLElement | null | undefined;
   } | undefined;
 }
 export declare function useFloatingRootContext(options: UseFloatingRootContextOptions): FloatingRootStore;

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

@@ -10,7 +10,7 @@ export interface UseFocusProps {
    * Waits for the specified time before opening.
    * @default undefined
    */
-  delay?: (number | (() => number | undefined)) | undefined;
+  delay?: number | (() => number | undefined) | undefined;
 }
 /**
  * Opens the floating element while the reference element has focus, like CSS

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

@@ -1,33 +1,25 @@
-import type { Delay, ElementProps, FloatingContext, FloatingRootContext, FloatingTreeType, SafePolygonOptions } from "../types.js";
-export interface HandleCloseContext extends FloatingContext {
-  onClose: () => void;
-  tree?: (FloatingTreeType | null) | undefined;
-  leave?: boolean | undefined;
-}
-export interface HandleClose {
-  (context: HandleCloseContext): (event: MouseEvent) => void;
-  __options?: SafePolygonOptions | undefined;
-}
-export declare function getDelay(value: UseHoverProps['delay'], prop: 'open' | 'close', pointerType?: PointerEvent['pointerType']): number | undefined;
+import type { Delay, ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
+import type { HandleClose } from "./useHoverShared.js";
+export type { HandleCloseContext, HandleClose } from "./useHoverShared.js";
 export interface UseHoverProps {
   /**
    * 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) | undefined;
+  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)) | undefined;
+  restMs?: number | (() => number) | undefined;
   /**
    * Waits for the specified time when the event listener runs before changing
    * the `open` state.
    * @default 0
    */
-  delay?: (Delay | (() => Delay)) | undefined;
+  delay?: Delay | (() => Delay) | undefined;
   /**
    * Whether moving the cursor over the floating element will open it, without a
    * regular hover event required.

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

@@ -5,7 +5,6 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDelay = getDelay;
 exports.useHover = useHover;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
@@ -18,35 +17,12 @@ var _utils = require("../utils");
 var _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
-var _createAttribute = require("../utils/createAttribute");
 var _constants = require("../utils/constants");
-const safePolygonIdentifier = (0, _createAttribute.createAttribute)('safe-polygon');
+var _useHoverShared = require("./useHoverShared");
 const interactiveSelector = `button,[role="button"],select,[tabindex]:not([tabindex="-1"]),${_constants.TYPEABLE_SELECTOR}`;
 function isInteractiveElement(element) {
   return element ? Boolean(element.closest(interactiveSelector)) : false;
 }
-function getDelay(value, prop, pointerType) {
-  if (pointerType && !(0, _utils.isMouseLikePointerType)(pointerType)) {
-    return 0;
-  }
-  if (typeof value === 'number') {
-    return value;
-  }
-  if (typeof value === 'function') {
-    const result = value();
-    if (typeof result === 'number') {
-      return result;
-    }
-    return result?.[prop];
-  }
-  return value?.[prop];
-}
-function getRestMs(value) {
-  if (typeof value === 'function') {
-    return value();
-  }
-  return value;
-}
 /**
  * Opens the floating element while hovering over the reference element, like
  * CSS `:hover`.
@@ -130,7 +106,7 @@ function useHover(context, props = {}) {
     };
   }, [floatingElement, open, store, handleCloseRef, isHoverOpen, isClickLikeOpenEvent]);
   const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
-    const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
+    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) {
@@ -146,7 +122,6 @@ function useHover(context, props = {}) {
     if (performedPointerEventsMutationRef.current) {
       const body = (0, _owner.ownerDocument)(floatingElement).body;
       body.style.pointerEvents = '';
-      body.removeAttribute(safePolygonIdentifier);
       performedPointerEventsMutationRef.current = false;
     }
   });
@@ -166,10 +141,10 @@ function useHover(context, props = {}) {
     function onReferenceMouseEnter(event) {
       timeout.clear();
       blockMouseMoveRef.current = false;
-      if (getRestMs(restMsRef.current) > 0 && !getDelay(delayRef.current, 'open')) {
+      if ((0, _useHoverShared.getRestMs)(restMsRef.current) > 0 && !(0, _useHoverShared.getDelay)(delayRef.current, 'open')) {
         return;
       }
-      const openDelay = getDelay(delayRef.current, 'open', pointerTypeRef.current);
+      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);
@@ -319,7 +294,6 @@ function useHover(context, props = {}) {
       const floatingEl = floatingElement;
       if ((0, _dom.isElement)(domReferenceElement) && floatingEl) {
         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;
         if (parentFloating) {
@@ -378,7 +352,7 @@ function useHover(context, props = {}) {
             store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, nativeEvent, trigger));
           }
         }
-        if (store.select('open') && !isOverInactiveTrigger || getRestMs(restMsRef.current) === 0) {
+        if (store.select('open') && !isOverInactiveTrigger || (0, _useHoverShared.getRestMs)(restMsRef.current) === 0) {
           return;
         }
 
@@ -393,7 +367,7 @@ function useHover(context, props = {}) {
           handleMouseMove();
         } else {
           restTimeoutPendingRef.current = true;
-          restTimeout.start(getRestMs(restMsRef.current), handleMouseMove);
+          restTimeout.start((0, _useHoverShared.getRestMs)(restMsRef.current), handleMouseMove);
         }
       }
     };

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

@@ -11,10 +11,9 @@ export type UseHoverFloatingInteractionProps = {
    * the `open` state.
    * @default 0
    */
-  closeDelay?: (number | (() => number)) | undefined;
+  closeDelay?: number | (() => number) | undefined;
 };
 /**
  * Provides hover interactions that should be attached to the floating element.
  */
-export declare function useHoverFloatingInteraction(context: FloatingRootContext | FloatingContext, parameters?: UseHoverFloatingInteractionProps): void;
-export declare function getDelay(value: number | (() => number), pointerType?: PointerEvent['pointerType']): number;
+export declare function useHoverFloatingInteraction(context: FloatingRootContext | FloatingContext, parameters?: UseHoverFloatingInteractionProps): void;

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

@@ -5,20 +5,19 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDelay = getDelay;
 exports.useHoverFloatingInteraction = useHoverFloatingInteraction;
 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 _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");
 var _FloatingTree = require("../components/FloatingTree");
 var _useHoverInteractionSharedState = require("./useHoverInteractionSharedState");
-const clickLikeEvents = new Set(['click', 'mousedown']);
-
+var _useHoverShared = require("./useHoverShared");
 /**
  * Provides hover interactions that should be attached to the floating element.
  */
@@ -38,10 +37,7 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   const tree = (0, _FloatingTree.useFloatingTree)();
   const parentId = (0, _FloatingTree.useFloatingParentNodeId)();
   const isClickLikeOpenEvent = (0, _useStableCallback.useStableCallback)(() => {
-    if (instance.interactedInside) {
-      return true;
-    }
-    return dataRef.current.openEvent ? clickLikeEvents.has(dataRef.current.openEvent.type) : false;
+    return (0, _useHoverShared.isClickLikeOpenEvent)(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isHoverOpen = (0, _useStableCallback.useStableCallback)(() => {
     const type = dataRef.current.openEvent?.type;
@@ -50,26 +46,21 @@ function useHoverFloatingInteraction(context, parameters = {}) {
   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, instance.pointerType);
-    if (closeDelay && !instance.handler) {
-      instance.openChangeTimeout.start(closeDelay, () => store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event)));
-    } else if (runElseBranch) {
-      instance.openChangeTimeout.clear();
+  const closeWithDelay = React.useCallback(event => {
+    const closeDelay = (0, _useHoverShared.getDelay)(closeDelayProp, 'close', instance.pointerType);
+    const close = () => {
       store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+      tree?.events.emit('floating.closed', event);
+    };
+    if (closeDelay) {
+      instance.openChangeTimeout.start(closeDelay, close);
+    } else {
+      instance.openChangeTimeout.clear();
+      close();
     }
-  }, [closeDelayProp, store, instance]);
-  const cleanupMouseMoveHandler = (0, _useStableCallback.useStableCallback)(() => {
-    instance.unbindMouseMove();
-    instance.handler = undefined;
-  });
+  }, [closeDelayProp, store, instance, tree]);
   const clearPointerEvents = (0, _useStableCallback.useStableCallback)(() => {
-    if (instance.performedPointerEventsMutation) {
-      const body = (0, _owner.ownerDocument)(floatingElement).body;
-      body.style.pointerEvents = '';
-      body.removeAttribute(_useHoverInteractionSharedState.safePolygonIdentifier);
-      instance.performedPointerEventsMutation = false;
-    }
+    (0, _useHoverInteractionSharedState.clearSafePolygonPointerEventsMutation)(instance);
   });
   const handleInteractInside = (0, _useStableCallback.useStableCallback)(event => {
     const target = (0, _utils.getTarget)(event);
@@ -77,22 +68,16 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       instance.interactedInside = false;
       return;
     }
-    instance.interactedInside = true;
+    instance.interactedInside = target?.closest('[aria-haspopup]') != null;
   });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (!open) {
       instance.pointerType = undefined;
       instance.restTimeoutPending = false;
       instance.interactedInside = false;
-      cleanupMouseMoveHandler();
       clearPointerEvents();
     }
-  }, [open, instance, cleanupMouseMoveHandler, clearPointerEvents]);
-  React.useEffect(() => {
-    return () => {
-      cleanupMouseMoveHandler();
-    };
-  }, [cleanupMouseMoveHandler]);
+  }, [open, instance, clearPointerEvents]);
   React.useEffect(() => {
     return clearPointerEvents;
   }, [clearPointerEvents]);
@@ -101,36 +86,39 @@ function useHoverFloatingInteraction(context, parameters = {}) {
       return undefined;
     }
     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;
+      const doc = (0, _owner.ownerDocument)(floatingElement);
       const parentFloating = tree?.nodesRef.current.find(node => node.id === parentId)?.context?.elements.floating;
       if (parentFloating) {
         parentFloating.style.pointerEvents = '';
       }
-      body.style.pointerEvents = 'none';
-      ref.style.pointerEvents = 'auto';
-      floatingEl.style.pointerEvents = 'auto';
+      const scopeElement = instance.handleCloseOptions?.getScope?.() ?? instance.pointerEventsScopeElement ?? parentFloating ?? ref.closest('[data-rootownerid]') ?? doc.body;
+      (0, _useHoverInteractionSharedState.applySafePolygonPointerEventsMutation)(instance, {
+        scopeElement,
+        referenceElement: ref,
+        floatingElement: floatingEl
+      });
       return () => {
-        body.style.pointerEvents = '';
-        ref.style.pointerEvents = '';
-        floatingEl.style.pointerEvents = '';
+        clearPointerEvents();
       };
     }
     return undefined;
-  }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId]);
+  }, [enabled, open, domReferenceElement, floatingElement, instance, isHoverOpen, tree, parentId, clearPointerEvents]);
+  const childClosedTimeout = (0, _useTimeout.useTimeout)();
   React.useEffect(() => {
     if (!enabled) {
       return undefined;
     }
-
-    // Ensure the floating element closes after scrolling even if the pointer
-    // did not move.
-    // https://github.com/floating-ui/floating-ui/discussions/1692
-    function onScrollMouseLeave(event) {
-      if (isClickLikeOpenEvent() || !dataRef.current.floatingContext || !store.select('open')) {
+    function onFloatingMouseEnter() {
+      instance.openChangeTimeout.clear();
+      childClosedTimeout.clear();
+      tree?.events.off('floating.closed', onNodeClosed);
+      clearPointerEvents();
+    }
+    function onFloatingMouseLeave(event) {
+      if (tree && parentId && (0, _utils.getNodeChildren)(tree.nodesRef.current, parentId).length > 0) {
+        tree.events.on('floating.closed', onNodeClosed);
         return;
       }
       if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
@@ -138,46 +126,41 @@ function useHoverFloatingInteraction(context, parameters = {}) {
         // as it will be moved.
         return;
       }
+
+      // If the safePolygon handler is active, let it handle the close logic.
+      if (instance.handler) {
+        instance.handler(event);
+        return;
+      }
       clearPointerEvents();
-      cleanupMouseMoveHandler();
       if (!isClickLikeOpenEvent()) {
         closeWithDelay(event);
       }
     }
-    function onFloatingMouseEnter(event) {
-      instance.openChangeTimeout.clear();
-      clearPointerEvents();
-      instance.handler?.(event);
-      cleanupMouseMoveHandler();
-    }
-    function onFloatingMouseLeave(event) {
-      if (!isClickLikeOpenEvent()) {
-        closeWithDelay(event, false);
+    function onNodeClosed(event) {
+      if (!tree || !parentId || (0, _utils.getNodeChildren)(tree.nodesRef.current, parentId).length > 0) {
+        return;
       }
+      // Allow the mouseenter event to fire in case child was closed because mouse moved into parent.
+      childClosedTimeout.start(0, () => {
+        tree.events.off('floating.closed', onNodeClosed);
+        store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerHover, event));
+        tree.events.emit('floating.closed', event);
+      });
     }
     const floating = floatingElement;
     if (floating) {
-      floating.addEventListener('mouseleave', onScrollMouseLeave);
       floating.addEventListener('mouseenter', onFloatingMouseEnter);
       floating.addEventListener('mouseleave', onFloatingMouseLeave);
       floating.addEventListener('pointerdown', handleInteractInside, true);
     }
     return () => {
       if (floating) {
-        floating.removeEventListener('mouseleave', onScrollMouseLeave);
         floating.removeEventListener('mouseenter', onFloatingMouseEnter);
         floating.removeEventListener('mouseleave', onFloatingMouseLeave);
         floating.removeEventListener('pointerdown', handleInteractInside, true);
       }
+      tree?.events.off('floating.closed', onNodeClosed);
     };
-  }, [enabled, floatingElement, store, dataRef, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, cleanupMouseMoveHandler, handleInteractInside, instance]);
-}
-function getDelay(value, pointerType) {
-  if (pointerType && !(0, _utils.isMouseLikePointerType)(pointerType)) {
-    return 0;
-  }
-  if (typeof value === 'function') {
-    return value();
-  }
-  return value;
+  }, [enabled, floatingElement, store, dataRef, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
 }

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

@@ -1,6 +1,5 @@
 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 declare class HoverInteraction {
   pointerType: string | undefined;
@@ -8,7 +7,9 @@ export declare class HoverInteraction {
   handler: ((event: MouseEvent) => void) | undefined;
   blockMouseMove: boolean;
   performedPointerEventsMutation: boolean;
-  unbindMouseMove: () => void;
+  pointerEventsScopeElement: HTMLElement | SVGSVGElement | null;
+  pointerEventsReferenceElement: HTMLElement | SVGSVGElement | null;
+  pointerEventsFloatingElement: HTMLElement | null;
   restTimeoutPending: boolean;
   openChangeTimeout: Timeout;
   restTimeout: Timeout;
@@ -18,4 +19,12 @@ export declare class HoverInteraction {
   dispose: () => void;
   disposeEffect: () => () => void;
 }
-export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;
+type PointerEventsMutationState = Pick<HoverInteraction, 'performedPointerEventsMutation' | 'pointerEventsScopeElement' | 'pointerEventsReferenceElement' | 'pointerEventsFloatingElement'>;
+export declare function clearSafePolygonPointerEventsMutation(instance: PointerEventsMutationState): void;
+export declare function applySafePolygonPointerEventsMutation(instance: PointerEventsMutationState, options: {
+  scopeElement: HTMLElement | SVGSVGElement;
+  referenceElement: HTMLElement | SVGSVGElement;
+  floatingElement: HTMLElement;
+}): void;
+export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;
+export {};

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

@@ -5,15 +5,14 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.HoverInteraction = void 0;
+exports.applySafePolygonPointerEventsMutation = applySafePolygonPointerEventsMutation;
+exports.clearSafePolygonPointerEventsMutation = clearSafePolygonPointerEventsMutation;
 exports.isInteractiveElement = isInteractiveElement;
-exports.safePolygonIdentifier = void 0;
 exports.useHoverInteractionSharedState = useHoverInteractionSharedState;
 var _useOnMount = require("@base-ui/utils/useOnMount");
 var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
 var _useTimeout = require("@base-ui/utils/useTimeout");
-var _createAttribute = require("../utils/createAttribute");
 var _constants = require("../utils/constants");
-const safePolygonIdentifier = exports.safePolygonIdentifier = (0, _createAttribute.createAttribute)('safe-polygon');
 const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${_constants.TYPEABLE_SELECTOR}`;
 function isInteractiveElement(element) {
   return element ? Boolean(element.closest(interactiveSelector)) : false;
@@ -25,7 +24,9 @@ class HoverInteraction {
     this.handler = undefined;
     this.blockMouseMove = true;
     this.performedPointerEventsMutation = false;
-    this.unbindMouseMove = () => {};
+    this.pointerEventsScopeElement = null;
+    this.pointerEventsReferenceElement = null;
+    this.pointerEventsFloatingElement = null;
     this.restTimeoutPending = false;
     this.openChangeTimeout = new _useTimeout.Timeout();
     this.restTimeout = new _useTimeout.Timeout();
@@ -43,6 +44,33 @@ class HoverInteraction {
   };
 }
 exports.HoverInteraction = HoverInteraction;
+function clearSafePolygonPointerEventsMutation(instance) {
+  if (!instance.performedPointerEventsMutation) {
+    return;
+  }
+  instance.pointerEventsScopeElement?.style.removeProperty('pointer-events');
+  instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events');
+  instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events');
+  instance.performedPointerEventsMutation = false;
+  instance.pointerEventsScopeElement = null;
+  instance.pointerEventsReferenceElement = null;
+  instance.pointerEventsFloatingElement = null;
+}
+function applySafePolygonPointerEventsMutation(instance, options) {
+  const {
+    scopeElement,
+    referenceElement,
+    floatingElement
+  } = options;
+  clearSafePolygonPointerEventsMutation(instance);
+  instance.performedPointerEventsMutation = true;
+  instance.pointerEventsScopeElement = scopeElement;
+  instance.pointerEventsReferenceElement = referenceElement;
+  instance.pointerEventsFloatingElement = floatingElement;
+  scopeElement.style.pointerEvents = 'none';
+  referenceElement.style.pointerEvents = 'auto';
+  floatingElement.style.pointerEvents = 'auto';
+}
 function useHoverInteractionSharedState(store) {
   const instance = (0, _useRefWithInit.useRefWithInit)(HoverInteraction.create).current;
   const data = store.context.dataRef.current;

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

@@ -1,10 +1,14 @@
 import * as React from 'react';
-import type { FloatingContext, FloatingRootContext } from "../types.js";
-import type { UseHoverProps } from "./useHover.js";
+import type { Delay, FloatingContext, FloatingRootContext } from "../types.js";
 import type { FloatingTreeStore } from "../components/FloatingTreeStore.js";
+import type { HandleClose, HandleCloseContextBase } from "./useHoverShared.js";
 import { HTMLProps } from "../../utils/types.js";
-export interface UseHoverReferenceInteractionProps extends UseHoverProps {
+export interface UseHoverReferenceInteractionProps {
   enabled?: boolean | undefined;
+  handleClose?: HandleClose | null | undefined;
+  restMs?: number | (() => number) | undefined;
+  delay?: Delay | (() => Delay) | undefined;
+  move?: boolean | undefined;
   mouseOnly?: boolean | undefined;
   externalTree?: FloatingTreeStore | undefined;
   /**
@@ -15,6 +19,7 @@ export interface UseHoverReferenceInteractionProps extends UseHoverProps {
    */
   isActiveTrigger?: boolean | undefined;
   triggerElementRef?: Readonly<React.RefObject<Element | null>> | undefined;
+  getHandleCloseContext?: (() => HandleCloseContextBase | null) | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger