@base-ui/react 1.3.0 → 1.4.0

package/esm/floating-ui-react/components/FloatingRootStore.js

@@ -3,6 +3,7 @@ import { createEventEmitter } from "../utils/createEventEmitter.js";
 import { isClickLikeEvent } from "../utils.js";
 const selectors = {
   open: createSelector(state => state.open),
+  transitionStatus: createSelector(state => state.transitionStatus),
   domReferenceElement: createSelector(state => state.domReferenceElement),
   referenceElement: createSelector(state => state.positionReference ?? state.referenceElement),
   floatingElement: createSelector(state => state.floatingElement),
@@ -11,8 +12,8 @@ const selectors = {
 export class FloatingRootStore extends ReactStore {
   constructor(options) {
     const {
+      syncOnly,
       nested,
-      noEmit,
       onOpenChange,
       triggerElements,
       ...initialState
@@ -28,11 +29,38 @@ export class FloatingRootStore extends ReactStore {
       },
       events: createEventEmitter(),
       nested,
-      noEmit,
       triggerElements
     }, selectors);
+    this.syncOnly = syncOnly;
   }
 
+  /**
+   * Syncs the event used by hover logic to distinguish hover-open from click-like interaction.
+   */
+  syncOpenEvent = (newOpen, event) => {
+    if (!newOpen || !this.state.open ||
+    // Prevent a pending hover-open from overwriting a click-open event, while allowing
+    // click events to upgrade a hover-open.
+    event != null && isClickLikeEvent(event)) {
+      this.context.dataRef.current.openEvent = newOpen ? event : undefined;
+    }
+  };
+
+  /**
+   * Runs the root-owned side effects for an open state change.
+   */
+  dispatchOpenChange = (newOpen, eventDetails) => {
+    this.syncOpenEvent(newOpen, eventDetails.event);
+    const details = {
+      open: newOpen,
+      reason: eventDetails.reason,
+      nativeEvent: eventDetails.event,
+      nested: this.context.nested,
+      triggerElement: eventDetails.trigger
+    };
+    this.context.events.emit('openchange', details);
+  };
+
   /**
    * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
    *
@@ -40,22 +68,11 @@ export class FloatingRootStore extends ReactStore {
    * @param eventDetails Details about the event that triggered the open state change.
    */
   setOpen = (newOpen, eventDetails) => {
-    if (!newOpen || !this.state.open ||
-    // Prevent a pending hover-open from overwriting a click-open event, while allowing
-    // click events to upgrade a hover-open.
-    isClickLikeEvent(eventDetails.event)) {
-      this.context.dataRef.current.openEvent = newOpen ? eventDetails.event : undefined;
-    }
-    if (!this.context.noEmit) {
-      const details = {
-        open: newOpen,
-        reason: eventDetails.reason,
-        nativeEvent: eventDetails.event,
-        nested: this.context.nested,
-        triggerElement: eventDetails.trigger
-      };
-      this.context.events.emit('openchange', details);
+    if (this.syncOnly) {
+      this.context.onOpenChange?.(newOpen, eventDetails);
+      return;
     }
+    this.dispatchOpenChange(newOpen, eventDetails);
     this.context.onOpenChange?.(newOpen, eventDetails);
   };
 }

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

@@ -4,7 +4,8 @@ import * as React from 'react';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { useTimeout } from '@base-ui/utils/useTimeout';
 import { EMPTY_OBJECT } from "../../utils/constants.js";
-import { isClickLikeEvent, isMouseLikePointerType, isTypeableElement } from "../utils.js";
+import { getTarget, isTypeableElement } from "../utils/element.js";
+import { isClickLikeEvent, isMouseLikePointerType } from "../utils/event.js";
 import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { REASONS } from "../../utils/reasons.js";
 /**
@@ -47,8 +48,9 @@ export function useClick(context, props = {}) {
 
       // Animations sometimes won't run on a typeable element if using a rAF.
       // Focus is always set on these elements. For touch, we may delay opening.
-      if (isTypeableElement(nativeEvent.target)) {
-        const details = createChangeEventDetails(reason, nativeEvent, nativeEvent.target);
+      const target = getTarget(nativeEvent);
+      if (isTypeableElement(target)) {
+        const details = createChangeEventDetails(reason, nativeEvent, target);
         if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
           touchOpenTimeout.start(touchOpenDelay, () => {
             store.setOpen(true, details);

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

@@ -2,8 +2,10 @@
 
 import * as React from 'react';
 import { getWindow } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
-import { contains, getTarget, isMouseLikePointerType } from "../utils.js";
+import { contains, getTarget } from "../utils/element.js";
+import { isMouseLikePointerType } from "../utils/event.js";
 function createVirtualElement(domElement, data) {
   let offsetX = null;
   let offsetY = null;
@@ -124,17 +126,16 @@ export function useClientPoint(context, props = {}) {
       if (!contains(floating, target)) {
         setReference(event.clientX, event.clientY);
       } else {
-        win.removeEventListener('mousemove', handleMouseMove);
+        cleanupListenerRef.current?.();
         cleanupListenerRef.current = null;
       }
     }
     if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {
-      win.addEventListener('mousemove', handleMouseMove);
       const cleanup = () => {
-        win.removeEventListener('mousemove', handleMouseMove);
+        cleanupListenerRef.current?.();
         cleanupListenerRef.current = null;
       };
-      cleanupListenerRef.current = cleanup;
+      cleanupListenerRef.current = addEventListener(win, 'mousemove', handleMouseMove);
       return cleanup;
     }
     store.set('positionReference', domReference);

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

@@ -2,10 +2,14 @@
 
 import * as React from 'react';
 import { getComputedStyle, getParentNode, isElement, isHTMLElement, isLastTraversableNode, isShadowRoot, isWebKit } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { Timeout, useTimeout } from '@base-ui/utils/useTimeout';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains, getTarget, isEventTargetWithin, isReactEvent, isRootElement, getNodeChildren } from "../utils.js";
+import { contains, getTarget, isEventTargetWithin, isRootElement } from "../utils/element.js";
+import { isReactEvent } from "../utils/event.js";
+import { getNodeChildren } from "../utils/nodes.js";
 
 /* eslint-disable no-underscore-dangle */
 
@@ -172,11 +176,8 @@ export function useDismiss(context, props = {}) {
       }
       const target = getTarget(event);
       const inertSelector = `[${createAttribute('inert')}]`;
-      let markers = Array.from(ownerDocument(store.select('floatingElement')).querySelectorAll(inertSelector));
       const targetRoot = isElement(target) ? target.getRootNode() : null;
-      if (isShadowRoot(targetRoot)) {
-        markers = markers.concat(Array.from(targetRoot.querySelectorAll(inertSelector)));
-      }
+      const markers = Array.from((isShadowRoot(targetRoot) ? targetRoot : ownerDocument(store.select('floatingElement'))).querySelectorAll(inertSelector));
       const triggers = store.context.triggerElements;
 
       // If another trigger is clicked, don't close the floating element.
@@ -284,14 +285,19 @@ export function useDismiss(context, props = {}) {
         });
       }
     }
-    function handleTouchStartCapture(event) {
-      currentPointerTypeRef.current = 'touch';
+    function addTargetEventListenerOnce(event, listener) {
       const target = getTarget(event);
-      function callback() {
-        handleTouchStart(event);
-        target?.removeEventListener(event.type, callback);
+      if (!target) {
+        return;
       }
-      target?.addEventListener(event.type, callback);
+      const unsubscribe = addEventListener(target, event.type, () => {
+        listener(event);
+        unsubscribe();
+      });
+    }
+    function handleTouchStartCapture(event) {
+      currentPointerTypeRef.current = 'touch';
+      addTargetEventListenerOnce(event, handleTouchStart);
     }
     function closeOnPressOutsideCapture(event) {
       cancelDismissOnEndTimeout.clear();
@@ -301,16 +307,13 @@ export function useDismiss(context, props = {}) {
       if (event.type === 'mousedown' && touchStateRef.current && !touchStateRef.current.dismissOnMouseDown) {
         return;
       }
-      const target = getTarget(event);
-      function callback() {
-        if (event.type === 'pointerdown') {
-          handlePointerDown(event);
+      addTargetEventListenerOnce(event, targetEvent => {
+        if (targetEvent.type === 'pointerdown') {
+          handlePointerDown(targetEvent);
         } else {
-          closeOnPressOutside(event);
+          closeOnPressOutside(targetEvent);
         }
-        target?.removeEventListener(event.type, callback);
-      }
-      target?.addEventListener(event.type, callback);
+      });
     }
     function handlePressEndCapture(event) {
       if (!pressStartedInsideRef.current) {
@@ -369,12 +372,7 @@ export function useDismiss(context, props = {}) {
       }
     }
     function handleTouchMoveCapture(event) {
-      const target = getTarget(event);
-      function callback() {
-        handleTouchMove(event);
-        target?.removeEventListener(event.type, callback);
-      }
-      target?.addEventListener(event.type, callback);
+      addTargetEventListenerOnce(event, handleTouchMove);
     }
     function handleTouchEnd(event) {
       if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
@@ -387,47 +385,12 @@ export function useDismiss(context, props = {}) {
       touchStateRef.current = null;
     }
     function handleTouchEndCapture(event) {
-      const target = getTarget(event);
-      function callback() {
-        handleTouchEnd(event);
-        target?.removeEventListener(event.type, callback);
-      }
-      target?.addEventListener(event.type, callback);
+      addTargetEventListenerOnce(event, handleTouchEnd);
     }
     const doc = ownerDocument(floatingElement);
-    if (escapeKey) {
-      doc.addEventListener('keydown', closeOnEscapeKeyDown);
-      doc.addEventListener('compositionstart', handleCompositionStart);
-      doc.addEventListener('compositionend', handleCompositionEnd);
-    }
-    if (outsidePressEnabled) {
-      doc.addEventListener('click', closeOnPressOutsideCapture, true);
-      doc.addEventListener('pointerdown', closeOnPressOutsideCapture, true);
-      doc.addEventListener('pointerup', handlePressEndCapture, true);
-      doc.addEventListener('pointercancel', handlePressEndCapture, true);
-      doc.addEventListener('mousedown', closeOnPressOutsideCapture, true);
-      doc.addEventListener('mouseup', handlePressEndCapture, true);
-      doc.addEventListener('touchstart', handleTouchStartCapture, true);
-      doc.addEventListener('touchmove', handleTouchMoveCapture, true);
-      doc.addEventListener('touchend', handleTouchEndCapture, true);
-    }
+    const unsubscribe = mergeCleanups(escapeKey && mergeCleanups(addEventListener(doc, 'keydown', closeOnEscapeKeyDown), addEventListener(doc, 'compositionstart', handleCompositionStart), addEventListener(doc, 'compositionend', handleCompositionEnd)), outsidePressEnabled && mergeCleanups(addEventListener(doc, 'click', closeOnPressOutsideCapture, true), addEventListener(doc, 'pointerdown', closeOnPressOutsideCapture, true), addEventListener(doc, 'pointerup', handlePressEndCapture, true), addEventListener(doc, 'pointercancel', handlePressEndCapture, true), addEventListener(doc, 'mousedown', closeOnPressOutsideCapture, true), addEventListener(doc, 'mouseup', handlePressEndCapture, true), addEventListener(doc, 'touchstart', handleTouchStartCapture, true), addEventListener(doc, 'touchmove', handleTouchMoveCapture, true), addEventListener(doc, 'touchend', handleTouchEndCapture, true)));
     return () => {
-      if (escapeKey) {
-        doc.removeEventListener('keydown', closeOnEscapeKeyDown);
-        doc.removeEventListener('compositionstart', handleCompositionStart);
-        doc.removeEventListener('compositionend', handleCompositionEnd);
-      }
-      if (outsidePressEnabled) {
-        doc.removeEventListener('click', closeOnPressOutsideCapture, true);
-        doc.removeEventListener('pointerdown', closeOnPressOutsideCapture, true);
-        doc.removeEventListener('pointerup', handlePressEndCapture, true);
-        doc.removeEventListener('pointercancel', handlePressEndCapture, true);
-        doc.removeEventListener('mousedown', closeOnPressOutsideCapture, true);
-        doc.removeEventListener('mouseup', handlePressEndCapture, true);
-        doc.removeEventListener('touchstart', handleTouchStartCapture, true);
-        doc.removeEventListener('touchmove', handleTouchMoveCapture, true);
-        doc.removeEventListener('touchend', handleTouchEndCapture, true);
-      }
+      unsubscribe();
       compositionTimeout.clear();
       preventedPressSuppressionTimeout.clear();
       resetPressStartState();

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.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.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

@@ -9,7 +9,7 @@ export interface UseHoverProps {
    */
   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
    */

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

@@ -2,21 +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 } 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 { TYPEABLE_SELECTOR } from "../utils/constants.js";
 import { getDelay, getRestMs } from "./useHoverShared.js";
-const interactiveSelector = `button,[role="button"],select,[tabindex]:not([tabindex="-1"]),${TYPEABLE_SELECTOR}`;
-function isInteractiveElement(element) {
-  return element ? Boolean(element.closest(interactiveSelector)) : false;
-}
 /**
  * Opens the floating element while hovering over the reference element, like
  * CSS `:hover`.
@@ -94,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);
@@ -186,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;
       }
 
@@ -241,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]);

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

@@ -12,6 +12,11 @@ export type UseHoverFloatingInteractionProps = {
    * @default 0
    */
   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.

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

@@ -2,11 +2,14 @@
 
 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 { getNodeChildren, getTarget, 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";
@@ -25,7 +28,8 @@ 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();
@@ -120,6 +124,12 @@ 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) {
@@ -143,18 +153,8 @@ export function useHoverFloatingInteraction(context, parameters = {}) {
       });
     }
     const floating = floatingElement;
-    if (floating) {
-      floating.addEventListener('mouseenter', onFloatingMouseEnter);
-      floating.addEventListener('mouseleave', onFloatingMouseLeave);
-      floating.addEventListener('pointerdown', handleInteractInside, true);
-    }
-    return () => {
-      if (floating) {
-        floating.removeEventListener('mouseenter', onFloatingMouseEnter);
-        floating.removeEventListener('mouseleave', onFloatingMouseLeave);
-        floating.removeEventListener('pointerdown', handleInteractInside, true);
-      }
+    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, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
+    });
+  }, [enabled, floatingElement, store, dataRef, nodeIdProp, isClickLikeOpenEvent, isRelatedTargetInsideEnabledTrigger, closeWithDelay, clearPointerEvents, handleInteractInside, instance, tree, parentId, childClosedTimeout]);
 }

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

@@ -1,6 +1,7 @@
 import { Timeout } from '@base-ui/utils/useTimeout';
 import type { FloatingRootContext, SafePolygonOptions } from "../types.js";
-export declare function isInteractiveElement(element: Element | null): boolean;
+import { isInteractiveElement } from "../utils.js";
+export { isInteractiveElement };
 export declare class HoverInteraction {
   pointerType: string | undefined;
   interactedInside: boolean;
@@ -26,5 +27,4 @@ export declare function applySafePolygonPointerEventsMutation(instance: PointerE
   referenceElement: HTMLElement | SVGSVGElement;
   floatingElement: HTMLElement;
 }): void;
-export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;
-export {};
+export declare function useHoverInteractionSharedState(store: FloatingRootContext): HoverInteraction;

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

@@ -3,11 +3,8 @@
 import { useOnMount } from '@base-ui/utils/useOnMount';
 import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { Timeout } from '@base-ui/utils/useTimeout';
-import { TYPEABLE_SELECTOR } from "../utils/constants.js";
-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;
@@ -34,13 +31,18 @@ export class HoverInteraction {
     return this.dispose;
   };
 }
+const pointerEventsMutationOwnerByScopeElement = new WeakMap();
 export 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');
+  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;
@@ -52,11 +54,16 @@ export function applySafePolygonPointerEventsMutation(instance, options) {
     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';

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

@@ -20,6 +20,7 @@ export interface UseHoverReferenceInteractionProps {
   isActiveTrigger?: boolean | undefined;
   triggerElementRef?: Readonly<React.RefObject<Element | null>> | undefined;
   getHandleCloseContext?: (() => HandleCloseContextBase | null) | undefined;
+  isClosing?: (() => boolean) | undefined;
 }
 /**
  * Provides hover interactions that should be attached to reference or trigger