@base-ui/react 1.2.0 → 1.4.0

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

@@ -50,10 +50,11 @@ export function useFloating(options = {}) {
     setPositionReferenceRaw(computedPositionReference);
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
-  const [localDomReference, setLocalDomReference] = React.useState(null);
+  const [localDomReference, setLocalDomReference] = React.useState(undefined);
   const [localFloatingElement, setLocalFloatingElement] = React.useState(null);
-  rootContext.useSyncedValue('referenceElement', localDomReference);
-  rootContext.useSyncedValue('domReferenceElement', isElement(localDomReference) ? localDomReference : null);
+  rootContext.useSyncedValue('referenceElement', localDomReference ?? null);
+  const localDomReferenceElement = isElement(localDomReference) ? localDomReference : null;
+  rootContext.useSyncedValue('domReferenceElement', localDomReference === undefined ? rootContextElements.domReference : localDomReferenceElement);
   rootContext.useSyncedValue('floatingElement', localFloatingElement);
   const setReference = React.useCallback(node => {
     if (isElement(node) || node === null) {

package/esm/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/esm/floating-ui-react/hooks/useFloatingRootContext.js

@@ -23,13 +23,14 @@ export function useFloatingRootContext(options) {
   }
   const store = useRefWithInit(() => new FloatingRootStore({
     open,
+    transitionStatus: undefined,
     onOpenChange,
     referenceElement: elements.reference ?? null,
     floatingElement: elements.floating ?? null,
     triggerElements: new PopupTriggerMap(),
     floatingId,
-    nested,
-    noEmit: false
+    syncOnly: false,
+    nested
   })).current;
   useIsoLayoutEffect(() => {
     const valuesToSync = {
@@ -49,6 +50,5 @@ export function useFloatingRootContext(options) {
   }, [open, floatingId, elements.reference, elements.floating, store]);
   store.context.onOpenChange = onOpenChange;
   store.context.nested = nested;
-  store.context.noEmit = false;
   return store;
 }

package/esm/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/esm/floating-ui-react/hooks/useFocus.js

@@ -2,10 +2,12 @@
 
 import * as React from 'react';
 import { getWindow, isElement, isHTMLElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { isMac, isSafari } from '@base-ui/utils/detectBrowser';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { activeElement, contains, getTarget, isTargetInsideEnabledTrigger, isTypeableElement, matchesFocusVisible } from "../utils.js";
+import { activeElement, contains, getTarget, isTargetInsideEnabledTrigger, isTypeableElement, matchesFocusVisible } from "../utils/element.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { createAttribute } from "../utils/createAttribute.js";
@@ -52,18 +54,7 @@ export function useFocus(context, props = {}) {
     function onPointerDown() {
       keyboardModalityRef.current = false;
     }
-    win.addEventListener('blur', onBlur);
-    if (isMacSafari) {
-      win.addEventListener('keydown', onKeyDown, true);
-      win.addEventListener('pointerdown', onPointerDown, true);
-    }
-    return () => {
-      win.removeEventListener('blur', onBlur);
-      if (isMacSafari) {
-        win.removeEventListener('keydown', onKeyDown, true);
-        win.removeEventListener('pointerdown', onPointerDown, true);
-      }
-    };
+    return mergeCleanups(addEventListener(win, 'blur', onBlur), isMacSafari && addEventListener(win, 'keydown', onKeyDown, true), isMacSafari && addEventListener(win, 'pointerdown', onPointerDown, true));
   }, [store, enabled]);
   React.useEffect(() => {
     if (!enabled) {
@@ -139,7 +130,7 @@ export function useFocus(context, props = {}) {
       // Wait for the window blur listener to fire.
       timeout.start(0, () => {
         const domReference = store.select('domReferenceElement');
-        const activeEl = activeElement(domReference ? domReference.ownerDocument : document);
+        const activeEl = activeElement(ownerDocument(domReference));
 
         // Focus left the page, keep it open.
         if (!relatedTarget && activeEl === domReference) {

package/esm/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
+   * 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/esm/floating-ui-react/hooks/useHover.js

@@ -2,44 +2,18 @@
 
 import * as React from 'react';
 import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains, getTarget, isMouseLikePointerType } from "../utils.js";
+import { contains, getTarget, isInteractiveElement } from "../utils.js";
 import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
-import { createAttribute } from "../utils/createAttribute.js";
-import { TYPEABLE_SELECTOR } from "../utils/constants.js";
-const safePolygonIdentifier = createAttribute('safe-polygon');
-const interactiveSelector = `button,[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`;
-function isInteractiveElement(element) {
-  return element ? Boolean(element.closest(interactiveSelector)) : false;
-}
-export function getDelay(value, prop, pointerType) {
-  if (pointerType && !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;
-}
+import { getDelay, getRestMs } from "./useHoverShared.js";
 /**
  * Opens the floating element while hovering over the reference element, like
  * CSS `:hover`.
@@ -117,10 +91,7 @@ export function useHover(context, props = {}) {
       }
     }
     const html = ownerDocument(floatingElement).documentElement;
-    html.addEventListener('mouseleave', onLeave);
-    return () => {
-      html.removeEventListener('mouseleave', onLeave);
-    };
+    return addEventListener(html, 'mouseleave', onLeave);
   }, [floatingElement, open, store, handleCloseRef, isHoverOpen, isClickLikeOpenEvent]);
   const closeWithDelay = React.useCallback((event, runElseBranch = true) => {
     const closeDelay = getDelay(delayRef.current, 'close', pointerTypeRef.current);
@@ -139,7 +110,6 @@ export function useHover(context, props = {}) {
     if (performedPointerEventsMutationRef.current) {
       const body = ownerDocument(floatingElement).body;
       body.style.pointerEvents = '';
-      body.removeAttribute(safePolygonIdentifier);
       performedPointerEventsMutationRef.current = false;
     }
   });
@@ -210,10 +180,7 @@ export function useHover(context, props = {}) {
           }
         });
         const handler = handlerRef.current;
-        doc.addEventListener('mousemove', handler);
-        unbindMouseMoveRef.current = () => {
-          doc.removeEventListener('mousemove', handler);
-        };
+        unbindMouseMoveRef.current = addEventListener(doc, 'mousemove', handler);
         return;
       }
 
@@ -265,38 +232,9 @@ export function useHover(context, props = {}) {
     const trigger = domReferenceElement;
     if (isElement(trigger)) {
       const floating = floatingElement;
-      if (open) {
-        trigger.addEventListener('mouseleave', onScrollMouseLeave);
-      }
-      if (move) {
-        trigger.addEventListener('mousemove', onReferenceMouseEnter, {
-          once: true
-        });
-      }
-      trigger.addEventListener('mouseenter', onReferenceMouseEnter);
-      trigger.addEventListener('mouseleave', onReferenceMouseLeave);
-      if (floating) {
-        floating.addEventListener('mouseleave', onScrollMouseLeave);
-        floating.addEventListener('mouseenter', onFloatingMouseEnter);
-        floating.addEventListener('mouseleave', onFloatingMouseLeave);
-        floating.addEventListener('pointerdown', handleInteractInside, true);
-      }
-      return () => {
-        if (open) {
-          trigger.removeEventListener('mouseleave', onScrollMouseLeave);
-        }
-        if (move) {
-          trigger.removeEventListener('mousemove', onReferenceMouseEnter);
-        }
-        trigger.removeEventListener('mouseenter', onReferenceMouseEnter);
-        trigger.removeEventListener('mouseleave', onReferenceMouseLeave);
-        if (floating) {
-          floating.removeEventListener('mouseleave', onScrollMouseLeave);
-          floating.removeEventListener('mouseenter', onFloatingMouseEnter);
-          floating.removeEventListener('mouseleave', onFloatingMouseLeave);
-          floating.removeEventListener('pointerdown', handleInteractInside, true);
-        }
-      };
+      return mergeCleanups(open && addEventListener(trigger, 'mouseleave', onScrollMouseLeave), move && addEventListener(trigger, 'mousemove', onReferenceMouseEnter, {
+        once: true
+      }), addEventListener(trigger, 'mouseenter', onReferenceMouseEnter), addEventListener(trigger, 'mouseleave', onReferenceMouseLeave), floating && addEventListener(floating, 'mouseleave', onScrollMouseLeave), floating && addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && addEventListener(floating, 'pointerdown', handleInteractInside, true));
     }
     return undefined;
   }, [move, domReferenceElement, floatingElement, store, closeWithDelay, cleanupMouseMoveHandler, clearPointerEvents, open, tree, delayRef, handleCloseRef, dataRef, isClickLikeOpenEvent, restMsRef, timeout, restTimeout, handleInteractInside]);
@@ -312,7 +250,6 @@ export function useHover(context, props = {}) {
       const floatingEl = floatingElement;
       if (isElement(domReferenceElement) && floatingEl) {
         const body = ownerDocument(floatingElement).body;
-        body.setAttribute(safePolygonIdentifier, '');
         const ref = domReferenceElement;
         const parentFloating = tree?.nodesRef.current.find(node => node.id === parentId)?.context?.elements.floating;
         if (parentFloating) {

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

@@ -11,10 +11,14 @@ export type UseHoverFloatingInteractionProps = {
    * the `open` state.
    * @default 0
    */
-  closeDelay?: (number | (() => number)) | undefined;
+  closeDelay?: number | (() => number) | undefined;
+  /**
+   * Tree node id override for floating elements that participate in the tree
+   * without a `FloatingContext`, such as inline nested navigation menus.
+   */
+  nodeId?: string | 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/esm/floating-ui-react/hooks/useHoverFloatingInteraction.js

@@ -2,16 +2,19 @@
 
 import * as React from 'react';
 import { isElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useTimeout } from '@base-ui/utils/useTimeout';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { getTarget, isMouseLikePointerType, isTargetInsideEnabledTrigger } from "../utils.js";
+import { contains, getTarget, isTargetInsideEnabledTrigger } from "../utils/element.js";
+import { getNodeChildren } from "../utils/nodes.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 import { useFloatingParentNodeId, useFloatingTree } from "../components/FloatingTree.js";
-import { isInteractiveElement, safePolygonIdentifier, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
-const clickLikeEvents = new Set(['click', 'mousedown']);
-
+import { applySafePolygonPointerEventsMutation, clearSafePolygonPointerEventsMutation, isInteractiveElement, useHoverInteractionSharedState } from "./useHoverInteractionSharedState.js";
+import { getDelay, isClickLikeOpenEvent as isClickLikeOpenEventShared } from "./useHoverShared.js";
 /**
  * Provides hover interactions that should be attached to the floating element.
  */
@@ -25,16 +28,14 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
   } = store.context;
   const {
     enabled = true,
-    closeDelay: closeDelayProp = 0
+    closeDelay: closeDelayProp = 0,
+    nodeId: nodeIdProp
   } = parameters;
   const instance = useHoverInteractionSharedState(store);
   const tree = useFloatingTree();
   const parentId = useFloatingParentNodeId();
   const isClickLikeOpenEvent = useStableCallback(() => {
-    if (instance.interactedInside) {
-      return true;
-    }
-    return dataRef.current.openEvent ? clickLikeEvents.has(dataRef.current.openEvent.type) : false;
+    return isClickLikeOpenEventShared(dataRef.current.openEvent?.type, instance.interactedInside);
   });
   const isHoverOpen = useStableCallback(() => {
     const type = dataRef.current.openEvent?.type;
@@ -43,26 +44,21 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
   const isRelatedTargetInsideEnabledTrigger = useStableCallback(target => {
     return 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, createChangeEventDetails(REASONS.triggerHover, event)));
-    } else if (runElseBranch) {
-      instance.openChangeTimeout.clear();
+  const closeWithDelay = React.useCallback(event => {
+    const closeDelay = getDelay(closeDelayProp, 'close', instance.pointerType);
+    const close = () => {
       store.setOpen(false, createChangeEventDetails(REASONS.triggerHover, event));
+      tree?.events.emit('floating.closed', event);
+    };
+    if (closeDelay) {
+      instance.openChangeTimeout.start(closeDelay, close);
+    } else {
+      instance.openChangeTimeout.clear();
+      close();
     }
-  }, [closeDelayProp, store, instance]);
-  const cleanupMouseMoveHandler = useStableCallback(() => {
-    instance.unbindMouseMove();
-    instance.handler = undefined;
-  });
+  }, [closeDelayProp, store, instance, tree]);
   const clearPointerEvents = useStableCallback(() => {
-    if (instance.performedPointerEventsMutation) {
-      const body = ownerDocument(floatingElement).body;
-      body.style.pointerEvents = '';
-      body.removeAttribute(safePolygonIdentifier);
-      instance.performedPointerEventsMutation = false;
-    }
+    clearSafePolygonPointerEventsMutation(instance);
   });
   const handleInteractInside = useStableCallback(event => {
     const target = getTarget(event);
@@ -70,22 +66,16 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       instance.interactedInside = false;
       return;
     }
-    instance.interactedInside = true;
+    instance.interactedInside = target?.closest('[aria-haspopup]') != null;
   });
   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]);
@@ -94,36 +84,39 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       return undefined;
     }
     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;
+      const doc = 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;
+      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 = 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 && getNodeChildren(tree.nodesRef.current, parentId).length > 0) {
+        tree.events.on('floating.closed', onNodeClosed);
         return;
       }
       if (isRelatedTargetInsideEnabledTrigger(event.relatedTarget)) {
@@ -131,46 +124,37 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
         // as it will be moved.
         return;
       }
+      const currentNodeId = dataRef.current.floatingContext?.nodeId ?? nodeIdProp;
+      const relatedTarget = event.relatedTarget;
+      const isMovingIntoDescendantFloating = tree && currentNodeId && isElement(relatedTarget) && getNodeChildren(tree.nodesRef.current, currentNodeId, false).some(node => contains(node.context?.elements.floating, relatedTarget));
+      if (isMovingIntoDescendantFloating) {
+        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 || 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, createChangeEventDetails(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);
-      }
-    };
-  }, [enabled, floatingElement, store, dataRef, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, cleanupMouseMoveHandler, handleInteractInside, instance]);
-}
-export function getDelay(value, pointerType) {
-  if (pointerType && !isMouseLikePointerType(pointerType)) {
-    return 0;
-  }
-  if (typeof value === 'function') {
-    return value();
-  }
-  return value;
+    return mergeCleanups(floating && addEventListener(floating, 'mouseenter', onFloatingMouseEnter), floating && addEventListener(floating, 'mouseleave', onFloatingMouseLeave), floating && addEventListener(floating, 'pointerdown', handleInteractInside, true), () => {
+      tree?.events.off('floating.closed', onNodeClosed);
+    });
+  }, [enabled, floatingElement, store, dataRef, nodeIdProp, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
 }

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

@@ -1,14 +1,16 @@
 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;
+import { isInteractiveElement } from "../utils.js";
+export { isInteractiveElement };
 export declare class HoverInteraction {
   pointerType: string | undefined;
   interactedInside: boolean;
   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 +20,11 @@ export declare class HoverInteraction {
   dispose: () => void;
   disposeEffect: () => () => void;
 }
+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;

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

@@ -3,13 +3,8 @@
 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');
-const interactiveSelector = `button,a,[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`;
-export function isInteractiveElement(element) {
-  return element ? Boolean(element.closest(interactiveSelector)) : false;
-}
+import { isInteractiveElement } from "../utils.js";
+export { isInteractiveElement };
 export class HoverInteraction {
   constructor() {
     this.pointerType = undefined;
@@ -17,7 +12,9 @@ export 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 Timeout();
     this.restTimeout = new Timeout();
@@ -34,6 +31,43 @@ export class HoverInteraction {
     return this.dispose;
   };
 }
+const pointerEventsMutationOwnerByScopeElement = new WeakMap();
+export function clearSafePolygonPointerEventsMutation(instance) {
+  if (!instance.performedPointerEventsMutation) {
+    return;
+  }
+  const scopeElement = instance.pointerEventsScopeElement;
+  if (scopeElement && pointerEventsMutationOwnerByScopeElement.get(scopeElement) === instance) {
+    instance.pointerEventsScopeElement?.style.removeProperty('pointer-events');
+    instance.pointerEventsReferenceElement?.style.removeProperty('pointer-events');
+    instance.pointerEventsFloatingElement?.style.removeProperty('pointer-events');
+    pointerEventsMutationOwnerByScopeElement.delete(scopeElement);
+  }
+  instance.performedPointerEventsMutation = false;
+  instance.pointerEventsScopeElement = null;
+  instance.pointerEventsReferenceElement = null;
+  instance.pointerEventsFloatingElement = null;
+}
+export function applySafePolygonPointerEventsMutation(instance, options) {
+  const {
+    scopeElement,
+    referenceElement,
+    floatingElement
+  } = options;
+  const existingOwner = pointerEventsMutationOwnerByScopeElement.get(scopeElement);
+  if (existingOwner && existingOwner !== instance) {
+    clearSafePolygonPointerEventsMutation(existingOwner);
+  }
+  clearSafePolygonPointerEventsMutation(instance);
+  instance.performedPointerEventsMutation = true;
+  instance.pointerEventsScopeElement = scopeElement;
+  instance.pointerEventsReferenceElement = referenceElement;
+  instance.pointerEventsFloatingElement = floatingElement;
+  pointerEventsMutationOwnerByScopeElement.set(scopeElement, instance);
+  scopeElement.style.pointerEvents = 'none';
+  referenceElement.style.pointerEvents = 'auto';
+  floatingElement.style.pointerEvents = 'auto';
+}
 export function useHoverInteractionSharedState(store) {
   const instance = useRefWithInit(HoverInteraction.create).current;
   const data = store.context.dataRef.current;