@base-ui/react 1.3.0 → 1.4.1

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

@@ -1,8 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { tabbable, isTabbable, focusable } from 'tabbable';
 import { getNodeName, isHTMLElement } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { useMergedRefs } from '@base-ui/utils/useMergedRefs';
 import { useValueAsRef } from '@base-ui/utils/useValueAsRef';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
@@ -12,19 +13,23 @@ import { isWebKit } from '@base-ui/utils/detectBrowser';
 import { useAnimationFrame } from '@base-ui/utils/useAnimationFrame';
 import { ownerDocument, ownerWindow } from '@base-ui/utils/owner';
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { activeElement, contains, getTarget, isTypeableCombobox, isVirtualClick, isVirtualPointerEvent, stopEvent, getNodeAncestors, getNodeChildren, getFloatingFocusElement, getTabbableOptions, isOutsideEvent, getNextTabbable, getPreviousTabbable, isElementVisible, isTypeableElement } from "../utils.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { activeElement, contains, getTarget, isTypeableCombobox, getFloatingFocusElement, isTypeableElement } from "../utils/element.js";
+import { isVirtualClick, isVirtualPointerEvent, stopEvent } from "../utils/event.js";
+import { tabbable, focusable, isOutsideEvent, isTabbable, getNextTabbable, getPreviousTabbable } from "../utils/tabbable.js";
+import { getNodeAncestors, getNodeChildren } from "../utils/nodes.js";
+import { isElementVisible } from "../utils/composite.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { createAttribute } from "../utils/createAttribute.js";
 import { enqueueFocus } from "../utils/enqueueFocus.js";
 import { markOthers } from "../utils/markOthers.js";
 import { usePortalContext } from "./FloatingPortal.js";
 import { useFloatingTree } from "./FloatingTree.js";
-import { CLICK_TRIGGER_IDENTIFIER } from "../../utils/constants.js";
+import { CLICK_TRIGGER_IDENTIFIER } from "../../internals/constants.js";
 import { resolveRef } from "../../utils/resolveRef.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function getEventType(event, lastInteractionType) {
-  const win = ownerWindow(event.target);
+  const win = ownerWindow(getTarget(event));
   if (event instanceof win.KeyboardEvent) {
     return 'keyboard';
   }
@@ -69,30 +74,22 @@ function getFirstTabbableElement(container) {
   if (!container) {
     return null;
   }
-  const tabbableOptions = getTabbableOptions();
-  if (isTabbable(container, tabbableOptions)) {
+  if (isTabbable(container)) {
     return container;
   }
-  return tabbable(container, tabbableOptions)[0] || container;
-}
-function isFocusable(element) {
-  if (!element || !element.isConnected) {
-    return false;
-  }
-  if (typeof element.checkVisibility === 'function') {
-    return element.checkVisibility();
-  }
-  return isElementVisible(element);
+  return tabbable(container)[0] || container;
 }
 function handleTabIndex(floatingFocusElement, orderRef) {
+  if (floatingFocusElement.hasAttribute('tabindex') && !floatingFocusElement.hasAttribute('data-tabindex')) {
+    return;
+  }
   if (!orderRef.current.includes('floating') && !floatingFocusElement.getAttribute('role')?.includes('dialog')) {
     return;
   }
-  const options = getTabbableOptions();
-  const focusableElements = focusable(floatingFocusElement, options);
+  const focusableElements = focusable(floatingFocusElement);
   const tabbableContent = focusableElements.filter(element => {
     const dataTabIndex = element.getAttribute('data-tabindex') || '';
-    return isTabbable(element, options) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
+    return isTabbable(element) || element.hasAttribute('data-tabindex') && !dataTabIndex.startsWith('-');
   });
   const tabIndex = floatingFocusElement.getAttribute('tabindex');
   if (orderRef.current.includes('floating') || tabbableContent.length === 0) {
@@ -151,7 +148,7 @@ export function FloatingFocusManager(props) {
   const preventReturnFocusRef = React.useRef(false);
   const isPointerDownRef = React.useRef(false);
   const pointerDownOutsideRef = React.useRef(false);
-  const tabbableIndexRef = React.useRef(-1);
+  const lastFocusedTabbableRef = React.useRef(null);
   const closeTypeRef = React.useRef('');
   const lastInteractionTypeRef = React.useRef('');
   const beforeGuardRef = React.useRef(null);
@@ -164,13 +161,9 @@ export function FloatingFocusManager(props) {
   const isInsidePortal = portalContext != null;
   const floatingFocusElement = getFloatingFocusElement(floating);
   const getTabbableContent = useStableCallback((container = floatingFocusElement) => {
-    return container ? tabbable(container, getTabbableOptions()) : [];
+    return container ? tabbable(container) : [];
   });
   const getResolvedInsideElements = useStableCallback(() => getInsideElements?.().filter(element => element != null) ?? []);
-  const getTabbableElements = useStableCallback(container => {
-    const content = getTabbableContent(container);
-    return orderRef.current.map(() => content).filter(Boolean).flat();
-  });
 
   // Prevent Tab from escaping the modal when there are no tabbable elements.
   React.useEffect(() => {
@@ -186,11 +179,8 @@ export function FloatingFocusManager(props) {
       }
     }
     const doc = ownerDocument(floatingFocusElement);
-    doc.addEventListener('keydown', onKeyDown);
-    return () => {
-      doc.removeEventListener('keydown', onKeyDown);
-    };
-  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent, getTabbableElements]);
+    return addEventListener(doc, 'keydown', onKeyDown);
+  }, [disabled, domReference, floatingFocusElement, modal, orderRef, isUntrappedTypeableCombobox, getTabbableContent]);
 
   // Track pointer/keyboard interactions to disambiguate focus and outside presses.
   React.useEffect(() => {
@@ -214,16 +204,7 @@ export function FloatingFocusManager(props) {
     function onKeyDown() {
       lastInteractionTypeRef.current = 'keyboard';
     }
-    doc.addEventListener('pointerdown', onPointerDown, true);
-    doc.addEventListener('pointerup', clearPointerDownOutside, true);
-    doc.addEventListener('pointercancel', clearPointerDownOutside, true);
-    doc.addEventListener('keydown', onKeyDown, true);
-    return () => {
-      doc.removeEventListener('pointerdown', onPointerDown, true);
-      doc.removeEventListener('pointerup', clearPointerDownOutside, true);
-      doc.removeEventListener('pointercancel', clearPointerDownOutside, true);
-      doc.removeEventListener('keydown', onKeyDown, true);
-    };
+    return mergeCleanups(addEventListener(doc, 'pointerdown', onPointerDown, true), addEventListener(doc, 'pointerup', clearPointerDownOutside, true), addEventListener(doc, 'pointercancel', clearPointerDownOutside, true), addEventListener(doc, 'keydown', onKeyDown, true));
   }, [disabled, floating, domReference, floatingFocusElement, open, portalContext, getResolvedInsideElements]);
 
   // Close on focus out and restore focus within the floating tree when needed.
@@ -242,10 +223,8 @@ export function FloatingFocusManager(props) {
     }
     function handleFocusIn(event) {
       const target = getTarget(event);
-      const tabbableContent = getTabbableContent();
-      const tabbableIndex = tabbableContent.indexOf(target);
-      if (tabbableIndex !== -1) {
-        tabbableIndexRef.current = tabbableIndex;
+      if (isTabbable(target)) {
+        lastFocusedTabbableRef.current = target;
       }
     }
     function handleFocusOutside(event) {
@@ -264,7 +243,7 @@ export function FloatingFocusManager(props) {
 
         // Restore focus to the previous tabbable element index to prevent
         // focus from being lost outside the floating tree.
-        if (restoreFocus && currentTarget !== domReference && !isFocusable(target) && activeElement(doc) === doc.body) {
+        if (restoreFocus && currentTarget !== domReference && !isElementVisible(target) && activeElement(doc) === doc.body) {
           // Let `FloatingPortal` effect knows that focus is still inside the
           // floating tree.
           if (isHTMLElement(floatingFocusElement)) {
@@ -282,9 +261,9 @@ export function FloatingFocusManager(props) {
               return;
             }
           }
-          const prevTabbableIndex = tabbableIndexRef.current;
           const tabbableContent = getTabbableContent();
-          const nodeToFocus = tabbableContent[prevTabbableIndex] || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
+          const prevTabbable = lastFocusedTabbableRef.current;
+          const nodeToFocus = (prevTabbable && tabbableContent.includes(prevTabbable) ? prevTabbable : null) || tabbableContent[tabbableContent.length - 1] || floatingFocusElement;
           if (isHTMLElement(nodeToFocus)) {
             nodeToFocus.focus();
           }
@@ -322,37 +301,10 @@ export function FloatingFocusManager(props) {
       });
     }
     const domReferenceElement = isHTMLElement(domReference) ? domReference : null;
-    const cleanups = [];
     if (!floating && !domReferenceElement) {
       return undefined;
     }
-    if (domReferenceElement) {
-      domReferenceElement.addEventListener('focusout', handleFocusOutside);
-      domReferenceElement.addEventListener('pointerdown', handlePointerDown);
-      cleanups.push(() => {
-        domReferenceElement.removeEventListener('focusout', handleFocusOutside);
-        domReferenceElement.removeEventListener('pointerdown', handlePointerDown);
-      });
-    }
-    if (floating) {
-      floating.addEventListener('focusin', handleFocusIn);
-      floating.addEventListener('focusout', handleFocusOutside);
-      if (portalContext) {
-        floating.addEventListener('focusout', markInsideReactTree, true);
-        cleanups.push(() => {
-          floating.removeEventListener('focusout', markInsideReactTree, true);
-        });
-      }
-      cleanups.push(() => {
-        floating.removeEventListener('focusin', handleFocusIn);
-        floating.removeEventListener('focusout', handleFocusOutside);
-      });
-    }
-    return () => {
-      cleanups.forEach(cleanup => {
-        cleanup();
-      });
-    };
+    return mergeCleanups(domReferenceElement && addEventListener(domReferenceElement, 'focusout', handleFocusOutside), domReferenceElement && addEventListener(domReferenceElement, 'pointerdown', handlePointerDown), floating && addEventListener(floating, 'focusin', handleFocusIn), floating && addEventListener(floating, 'focusout', handleFocusOutside), floating && portalContext && addEventListener(floating, 'focusout', markInsideReactTree, true));
   }, [disabled, domReference, floating, floatingFocusElement, modal, tree, portalContext, store, closeOnFocusOut, restoreFocus, getTabbableContent, isUntrappedTypeableCombobox, getNodeId, orderRef, dataRef, blurTimeout, pointerDownTimeout, restoreFocusFrame, nextFocusableElement, previousFocusableElement, getResolvedInsideElements]);
 
   // Hide everything outside the floating tree from assistive tech while open.
@@ -389,7 +341,6 @@ export function FloatingFocusManager(props) {
 
     // Wait for any layout effect state setters to execute to set `tabIndex`.
     queueMicrotask(() => {
-      const focusableElements = getTabbableElements(floatingFocusElement);
       const initialFocusValueOrFn = initialFocusRef.current;
       const resolvedInitialFocus = typeof initialFocusValueOrFn === 'function' ? initialFocusValueOrFn(openInteractionTypeRef.current || '') : initialFocusValueOrFn;
 
@@ -397,22 +348,29 @@ export function FloatingFocusManager(props) {
       if (resolvedInitialFocus === undefined || resolvedInitialFocus === false) {
         return;
       }
+      const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
+      if (focusAlreadyInsideFloatingEl) {
+        return;
+      }
+      let focusableElements = null;
+      const getDefaultFocusElement = () => {
+        if (focusableElements == null) {
+          focusableElements = getTabbableContent(floatingFocusElement);
+        }
+        return focusableElements[0] || floatingFocusElement;
+      };
       let elToFocus;
       if (resolvedInitialFocus === true || resolvedInitialFocus === null) {
-        elToFocus = focusableElements[0] || floatingFocusElement;
+        elToFocus = getDefaultFocusElement();
       } else {
         elToFocus = resolveRef(resolvedInitialFocus);
       }
-      elToFocus = elToFocus || focusableElements[0] || floatingFocusElement;
-      const focusAlreadyInsideFloatingEl = contains(floatingFocusElement, previouslyFocusedElement);
-      if (focusAlreadyInsideFloatingEl) {
-        return;
-      }
+      elToFocus = elToFocus || getDefaultFocusElement();
       enqueueFocus(elToFocus, {
         preventScroll: elToFocus === floatingFocusElement
       });
     });
-  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableElements, initialFocusRef, openInteractionTypeRef]);
+  }, [disabled, open, floatingFocusElement, ignoreInitialFocus, getTabbableContent, initialFocusRef, openInteractionTypeRef]);
 
   // Track return focus targets and restore focus on unmount/close.
   useIsoLayoutEffect(() => {
@@ -441,7 +399,7 @@ export function FloatingFocusManager(props) {
         preventReturnFocusRef.current = false;
       } else {
         let isPreventScrollSupported = false;
-        document.createElement('div').focus({
+        ownerDocument(floatingFocusElement).createElement('div').focus({
           get preventScroll() {
             isPreventScrollSupported = true;
             return false;
@@ -478,14 +436,15 @@ export function FloatingFocusManager(props) {
       const activeEl = activeElement(doc);
       const insideElements = getResolvedInsideElements();
       const isFocusInsideFloatingTree = contains(floating, activeEl) || insideElements.some(element => element === activeEl || contains(element, activeEl)) || tree && getNodeChildren(tree.nodesRef.current, getNodeId(), false).some(node => contains(node.context?.elements.floating, activeEl));
+
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      const returnFocusValueOrFn = returnFocusRef.current;
       const returnElement = getReturnElement();
       queueMicrotask(() => {
         // This is `returnElement`, if it's tabbable, or its first tabbable child.
         const tabbableReturnElement = getFirstTabbableElement(returnElement);
-        const hasExplicitReturnFocus = typeof returnFocusRef.current !== 'boolean';
-        if (
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        returnFocusRef.current && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
+        const hasExplicitReturnFocus = typeof returnFocusValueOrFn !== 'boolean';
+        if (returnFocusValueOrFn && !preventReturnFocusRef.current && isHTMLElement(tabbableReturnElement) && (
         // If the focus moved somewhere else after mount, avoid returning focus
         // since it likely entered a different element which should be
         // respected: https://github.com/floating-ui/floating-ui/issues/2607
@@ -549,7 +508,7 @@ export function FloatingFocusManager(props) {
       ref: mergedBeforeGuardRef,
       onFocus: event => {
         if (modal) {
-          const els = getTabbableElements();
+          const els = getTabbableContent();
           enqueueFocus(els[els.length - 1]);
         } else if (portalContext?.portalNode) {
           preventReturnFocusRef.current = false;
@@ -566,7 +525,7 @@ export function FloatingFocusManager(props) {
       ref: mergedAfterGuardRef,
       onFocus: event => {
         if (modal) {
-          enqueueFocus(getTabbableElements()[0]);
+          enqueueFocus(getTabbableContent()[0]);
         } else if (portalContext?.portalNode) {
           if (closeOnFocusOut) {
             preventReturnFocusRef.current = true;

package/esm/floating-ui-react/components/FloatingPortal.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type UseRenderElementComponentProps } from "../../utils/useRenderElement.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import { type UseRenderElementComponentProps } from "../../internals/useRenderElement.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 type FocusManagerState = null | {
   modal: boolean;
   open: boolean;

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

@@ -3,16 +3,19 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { isNode } from '@floating-ui/utils/dom';
+import { addEventListener } from '@base-ui/utils/addEventListener';
+import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
 import { useId } from '@base-ui/utils/useId';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { enableFocusInside, disableFocusInside, getPreviousTabbable, getNextTabbable, isOutsideEvent } from "../utils.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { enableFocusInside, disableFocusInside, getPreviousTabbable, getNextTabbable, isOutsideEvent } from "../utils/tabbable.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { createAttribute } from "../utils/createAttribute.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { EMPTY_OBJECT, ownerVisuallyHidden } from "../../utils/constants.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { ownerVisuallyHidden } from "../../internals/constants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const PortalContext = /*#__PURE__*/React.createContext(null);
 if (process.env.NODE_ENV !== "production") PortalContext.displayName = "PortalContext";
@@ -102,6 +105,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
     className,
     render,
     renderGuards,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -118,6 +122,7 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
   const beforeInsideRef = React.useRef(null);
   const afterInsideRef = React.useRef(null);
   const [focusManagerState, setFocusManagerState] = React.useState(null);
+  const focusInsideDisabledRef = React.useRef(false);
   const modal = focusManagerState?.modal;
   const open = focusManagerState?.open;
   const shouldRenderGuards = typeof renderGuards === 'boolean' ? renderGuards : !!focusManagerState && !focusManagerState.modal && focusManagerState.open && !!portalNode;
@@ -133,26 +138,28 @@ export const FloatingPortal = /*#__PURE__*/React.forwardRef(function FloatingPor
     // element outside or using the mouse.
     function onFocus(event) {
       if (portalNode && event.relatedTarget && isOutsideEvent(event)) {
-        const focusing = event.type === 'focusin';
-        const manageFocus = focusing ? enableFocusInside : disableFocusInside;
-        manageFocus(portalNode);
+        if (event.type === 'focusin') {
+          if (focusInsideDisabledRef.current) {
+            enableFocusInside(portalNode);
+            focusInsideDisabledRef.current = false;
+          }
+        } else {
+          disableFocusInside(portalNode);
+          focusInsideDisabledRef.current = true;
+        }
       }
     }
 
     // Listen to the event on the capture phase so they run before the focus
     // trap elements onFocus prop is called.
-    portalNode.addEventListener('focusin', onFocus, true);
-    portalNode.addEventListener('focusout', onFocus, true);
-    return () => {
-      portalNode.removeEventListener('focusin', onFocus, true);
-      portalNode.removeEventListener('focusout', onFocus, true);
-    };
+    return mergeCleanups(addEventListener(portalNode, 'focusin', onFocus, true), addEventListener(portalNode, 'focusout', onFocus, true));
   }, [portalNode, modal]);
   React.useEffect(() => {
-    if (!portalNode || open) {
+    if (!portalNode || open !== false) {
       return;
     }
     enableFocusInside(portalNode);
+    focusInsideDisabledRef.current = false;
   }, [open, portalNode]);
   const portalContextValue = React.useMemo(() => ({
     beforeOutsideRef,

package/esm/floating-ui-react/components/FloatingRootStore.d.ts

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
 import type { FloatingEvents, ContextData, ReferenceType } from "../types.js";
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { type PopupTriggerMap } from "../../utils/popups/index.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 export interface FloatingRootState {
   open: boolean;
+  transitionStatus: TransitionStatus | undefined;
   domReferenceElement: Element | null;
   referenceElement: ReferenceType | null;
   floatingElement: HTMLElement | null;
@@ -19,11 +21,11 @@ export interface FloatingRootStoreContext {
   readonly dataRef: React.RefObject<ContextData>;
   readonly events: FloatingEvents;
   nested: boolean;
-  noEmit: boolean;
   readonly triggerElements: PopupTriggerMap;
 }
 declare const selectors: {
   open: (state: FloatingRootState) => boolean;
+  transitionStatus: (state: FloatingRootState) => TransitionStatus;
   domReferenceElement: (state: FloatingRootState) => Element | null;
   referenceElement: (state: FloatingRootState) => ReferenceType | null;
   floatingElement: (state: FloatingRootState) => HTMLElement | null;
@@ -31,16 +33,30 @@ declare const selectors: {
 };
 interface FloatingRootStoreOptions {
   open: boolean;
+  transitionStatus: TransitionStatus | undefined;
   referenceElement: ReferenceType | null;
   floatingElement: HTMLElement | null;
   triggerElements: PopupTriggerMap;
   floatingId: string | undefined;
+  /**
+   * When true, `setOpen` only forwards to `onOpenChange`.
+   * The popup store owns `dispatchOpenChange(...)` in this mode.
+   */
+  syncOnly: boolean;
   nested: boolean;
-  noEmit: boolean;
   onOpenChange: ((open: boolean, eventDetails: BaseUIChangeEventDetails<string>) => void) | undefined;
 }
 export declare class FloatingRootStore extends ReactStore<Readonly<FloatingRootState>, FloatingRootStoreContext, typeof selectors> {
+  private readonly syncOnly;
   constructor(options: FloatingRootStoreOptions);
+  /**
+   * Syncs the event used by hover logic to distinguish hover-open from click-like interaction.
+   */
+  syncOpenEvent: (newOpen: boolean, event: Event | undefined) => void;
+  /**
+   * Runs the root-owned side effects for an open state change.
+   */
+  dispatchOpenChange: (newOpen: boolean, eventDetails: BaseUIChangeEventDetails<string>) => void;
   /**
    * Emits the `openchange` event through the internal event emitter and calls the `onOpenChange` handler with the provided arguments.
    *

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

@@ -1,5 +1,5 @@
 import type { ElementProps, FloatingContext, FloatingRootContext } from "../types.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 export interface UseClickProps {
   /**
    * Whether the Hook is enabled, including all internal Effects and event

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

@@ -3,10 +3,11 @@
 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 { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { getTarget, isTypeableElement } from "../utils/element.js";
+import { isClickLikeEvent, isMouseLikePointerType } from "../utils/event.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 /**
  * Opens or closes the floating element when clicking the reference element.
  * @see https://floating-ui.com/docs/useClick
@@ -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);