@base-ui/react 1.3.0 → 1.4.0

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

@@ -11,11 +11,13 @@ exports.usePortalContext = void 0;
 var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _useId = require("@base-ui/utils/useId");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _FocusGuard = require("../../utils/FocusGuard");
-var _utils = require("../utils");
+var _tabbable = require("../utils/tabbable");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 var _createAttribute = require("../utils/createAttribute");
@@ -111,6 +113,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
     className,
     render,
     renderGuards,
+    style,
     ...elementProps
   } = componentProps;
   const {
@@ -127,6 +130,7 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
   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;
@@ -141,27 +145,29 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
     // portal has already been focused, either by tabbing into a focus trap
     // element outside or using the mouse.
     function onFocus(event) {
-      if (portalNode && event.relatedTarget && (0, _utils.isOutsideEvent)(event)) {
-        const focusing = event.type === 'focusin';
-        const manageFocus = focusing ? _utils.enableFocusInside : _utils.disableFocusInside;
-        manageFocus(portalNode);
+      if (portalNode && event.relatedTarget && (0, _tabbable.isOutsideEvent)(event)) {
+        if (event.type === 'focusin') {
+          if (focusInsideDisabledRef.current) {
+            (0, _tabbable.enableFocusInside)(portalNode);
+            focusInsideDisabledRef.current = false;
+          }
+        } else {
+          (0, _tabbable.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 (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(portalNode, 'focusin', onFocus, true), (0, _addEventListener.addEventListener)(portalNode, 'focusout', onFocus, true));
   }, [portalNode, modal]);
   React.useEffect(() => {
-    if (!portalNode || open) {
+    if (!portalNode || open !== false) {
       return;
     }
-    (0, _utils.enableFocusInside)(portalNode);
+    (0, _tabbable.enableFocusInside)(portalNode);
+    focusInsideDisabledRef.current = false;
   }, [open, portalNode]);
   const portalContextValue = React.useMemo(() => ({
     beforeOutsideRef,
@@ -178,11 +184,11 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
         "data-type": "outside",
         ref: beforeOutsideRef,
         onFocus: event => {
-          if ((0, _utils.isOutsideEvent)(event, portalNode)) {
+          if ((0, _tabbable.isOutsideEvent)(event, portalNode)) {
             beforeInsideRef.current?.focus();
           } else {
             const domReference = focusManagerState ? focusManagerState.domReference : null;
-            const prevTabbable = (0, _utils.getPreviousTabbable)(domReference);
+            const prevTabbable = (0, _tabbable.getPreviousTabbable)(domReference);
             prevTabbable?.focus();
           }
         }
@@ -193,11 +199,11 @@ const FloatingPortal = exports.FloatingPortal = /*#__PURE__*/React.forwardRef(fu
         "data-type": "outside",
         ref: afterOutsideRef,
         onFocus: event => {
-          if ((0, _utils.isOutsideEvent)(event, portalNode)) {
+          if ((0, _tabbable.isOutsideEvent)(event, portalNode)) {
             afterInsideRef.current?.focus();
           } else {
             const domReference = focusManagerState ? focusManagerState.domReference : null;
-            const nextTabbable = (0, _utils.getNextTabbable)(domReference);
+            const nextTabbable = (0, _tabbable.getNextTabbable)(domReference);
             nextTabbable?.focus();
             if (focusManagerState?.closeOnFocusOut) {
               focusManagerState?.onOpenChange(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.focusOut, event.nativeEvent));

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

@@ -3,8 +3,10 @@ import { ReactStore } from '@base-ui/utils/store';
 import type { FloatingEvents, ContextData, ReferenceType } from "../types.js";
 import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
 import { type PopupTriggerMap } from "../../utils/popups/index.js";
+import type { TransitionStatus } from "../../utils/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/floating-ui-react/components/FloatingRootStore.js

@@ -9,6 +9,7 @@ var _createEventEmitter = require("../utils/createEventEmitter");
 var _utils = require("../utils");
 const selectors = {
   open: (0, _store.createSelector)(state => state.open),
+  transitionStatus: (0, _store.createSelector)(state => state.transitionStatus),
   domReferenceElement: (0, _store.createSelector)(state => state.domReferenceElement),
   referenceElement: (0, _store.createSelector)(state => state.positionReference ?? state.referenceElement),
   floatingElement: (0, _store.createSelector)(state => state.floatingElement),
@@ -17,8 +18,8 @@ const selectors = {
 class FloatingRootStore extends _store.ReactStore {
   constructor(options) {
     const {
+      syncOnly,
       nested,
-      noEmit,
       onOpenChange,
       triggerElements,
       ...initialState
@@ -34,11 +35,38 @@ class FloatingRootStore extends _store.ReactStore {
       },
       events: (0, _createEventEmitter.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 && (0, _utils.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.
    *
@@ -46,22 +74,11 @@ class FloatingRootStore extends _store.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.
-    (0, _utils.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/floating-ui-react/hooks/useClick.js

@@ -10,7 +10,8 @@ var React = _interopRequireWildcard(require("react"));
 var _useAnimationFrame = require("@base-ui/utils/useAnimationFrame");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _constants = require("../../utils/constants");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
 /**
@@ -43,7 +44,7 @@ function useClick(context, props = {}) {
 
       // Ignore all buttons except for the "main" button.
       // https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/button
-      if (event.button !== 0 || eventOption === 'click' || (0, _utils.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
+      if (event.button !== 0 || eventOption === 'click' || (0, _event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
         return;
       }
       const openEvent = dataRef.current.openEvent;
@@ -53,8 +54,9 @@ 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 ((0, _utils.isTypeableElement)(nativeEvent.target)) {
-        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, nativeEvent.target);
+      const target = (0, _element.getTarget)(nativeEvent);
+      if ((0, _element.isTypeableElement)(target)) {
+        const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, nativeEvent, target);
         if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
           touchOpenTimeout.start(touchOpenDelay, () => {
             store.setOpen(true, details);
@@ -91,13 +93,13 @@ function useClick(context, props = {}) {
         pointerTypeRef.current = undefined;
         return;
       }
-      if ((0, _utils.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
+      if ((0, _event.isMouseLikePointerType)(pointerType, true) && ignoreMouse) {
         return;
       }
       const open = store.select('open');
       const openEvent = dataRef.current.openEvent;
       const hasClickedOnInactiveTrigger = store.select('domReferenceElement') !== event.currentTarget;
-      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? (0, _utils.isClickLikeEvent)(openEvent) : true));
+      const nextOpen = open && hasClickedOnInactiveTrigger || !(open && toggle && (openEvent && stickIfOpen ? (0, _event.isClickLikeEvent)(openEvent) : true));
       const details = (0, _createBaseUIEventDetails.createChangeEventDetails)(reason, event.nativeEvent, event.currentTarget);
       if (nextOpen && pointerType === 'touch' && touchOpenDelay > 0) {
         touchOpenTimeout.start(touchOpenDelay, () => {

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

@@ -8,8 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.useClientPoint = useClientPoint;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
 function createVirtualElement(domElement, data) {
   let offsetX = null;
   let offsetY = null;
@@ -119,28 +121,27 @@ function useClientPoint(context, props = {}) {
   // mouse even if the floating element is transitioning out. On touch
   // devices, this is undesirable because the floating element will move to
   // the dismissal touch point.
-  const openCheck = (0, _utils.isMouseLikePointerType)(pointerType) ? floating : open;
+  const openCheck = (0, _event.isMouseLikePointerType)(pointerType) ? floating : open;
   const addListener = React.useCallback(() => {
     if (!openCheck || !enabled) {
       return undefined;
     }
     const win = (0, _dom.getWindow)(floating);
     function handleMouseMove(event) {
-      const target = (0, _utils.getTarget)(event);
-      if (!(0, _utils.contains)(floating, target)) {
+      const target = (0, _element.getTarget)(event);
+      if (!(0, _element.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 = (0, _addEventListener.addEventListener)(win, 'mousemove', handleMouseMove);
       return cleanup;
     }
     store.set('positionReference', domReference);

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

@@ -9,10 +9,14 @@ exports.normalizeProp = normalizeProp;
 exports.useDismiss = useDismiss;
 var React = _interopRequireWildcard(require("react"));
 var _dom = require("@floating-ui/utils/dom");
+var _addEventListener = require("@base-ui/utils/addEventListener");
+var _mergeCleanups = require("@base-ui/utils/mergeCleanups");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _useStableCallback = require("@base-ui/utils/useStableCallback");
 var _owner = require("@base-ui/utils/owner");
-var _utils = require("../utils");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
+var _nodes = require("../utils/nodes");
 var _FloatingTree = require("../components/FloatingTree");
 var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
 var _reasons = require("../../utils/reasons");
@@ -88,7 +92,7 @@ function useDismiss(context, props = {}) {
       return;
     }
     const nodeId = dataRef.current.floatingContext?.nodeId;
-    const children = tree ? (0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId) : [];
+    const children = tree ? (0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId) : [];
     if (!escapeKeyBubbles) {
       if (children.length > 0) {
         let shouldDismiss = true;
@@ -102,7 +106,7 @@ function useDismiss(context, props = {}) {
         }
       }
     }
-    const native = (0, _utils.isReactEvent)(event) ? event.nativeEvent : event;
+    const native = (0, _event.isReactEvent)(event) ? event.nativeEvent : event;
     const eventDetails = (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.escapeKey, native);
     store.setOpen(false, eventDetails);
     if (!escapeKeyBubbles && !eventDetails.isPropagationAllowed) {
@@ -164,8 +168,8 @@ function useDismiss(context, props = {}) {
     }
     function isEventWithinFloatingTree(event) {
       const nodeId = dataRef.current.floatingContext?.nodeId;
-      const targetIsInsideChildren = tree && (0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId).some(node => (0, _utils.isEventTargetWithin)(event, node.context?.elements.floating));
-      return (0, _utils.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _utils.isEventTargetWithin)(event, store.select('domReferenceElement')) || targetIsInsideChildren;
+      const targetIsInsideChildren = tree && (0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId).some(node => (0, _element.isEventTargetWithin)(event, node.context?.elements.floating));
+      return (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement')) || targetIsInsideChildren;
     }
     function closeOnPressOutside(event) {
       if (shouldIgnoreEvent(event)) {
@@ -176,17 +180,14 @@ function useDismiss(context, props = {}) {
         clearInsideReactTree();
         return;
       }
-      const target = (0, _utils.getTarget)(event);
+      const target = (0, _element.getTarget)(event);
       const inertSelector = `[${(0, _createAttribute.createAttribute)('inert')}]`;
-      let markers = Array.from((0, _owner.ownerDocument)(store.select('floatingElement')).querySelectorAll(inertSelector));
       const targetRoot = (0, _dom.isElement)(target) ? target.getRootNode() : null;
-      if ((0, _dom.isShadowRoot)(targetRoot)) {
-        markers = markers.concat(Array.from(targetRoot.querySelectorAll(inertSelector)));
-      }
+      const markers = Array.from(((0, _dom.isShadowRoot)(targetRoot) ? targetRoot : (0, _owner.ownerDocument)(store.select('floatingElement'))).querySelectorAll(inertSelector));
       const triggers = store.context.triggerElements;
 
       // If another trigger is clicked, don't close the floating element.
-      if (target && (triggers.hasElement(target) || triggers.hasMatchingElement(trigger => (0, _utils.contains)(trigger, target)))) {
+      if (target && (triggers.hasElement(target) || triggers.hasMatchingElement(trigger => (0, _element.contains)(trigger, target)))) {
         return;
       }
       let targetRootAncestor = (0, _dom.isElement)(target) ? target : null;
@@ -200,12 +201,12 @@ function useDismiss(context, props = {}) {
 
       // Check if the click occurred on a third-party element injected after the
       // floating element rendered.
-      if (markers.length && (0, _dom.isElement)(target) && !(0, _utils.isRootElement)(target) &&
+      if (markers.length && (0, _dom.isElement)(target) && !(0, _element.isRootElement)(target) &&
       // Clicked on a direct ancestor (e.g. FloatingOverlay).
-      !(0, _utils.contains)(target, store.select('floatingElement')) &&
+      !(0, _element.contains)(target, store.select('floatingElement')) &&
       // If the target root element contains none of the markers, then the
       // element was injected after the floating element rendered.
-      markers.every(marker => !(0, _utils.contains)(targetRootAncestor, marker))) {
+      markers.every(marker => !(0, _element.contains)(targetRootAncestor, marker))) {
         return;
       }
 
@@ -248,7 +249,7 @@ function useDismiss(context, props = {}) {
         return;
       }
       const nodeId = dataRef.current.floatingContext?.nodeId;
-      const children = tree ? (0, _utils.getNodeChildren)(tree.nodesRef.current, nodeId) : [];
+      const children = tree ? (0, _nodes.getNodeChildren)(tree.nodesRef.current, nodeId) : [];
       if (children.length > 0) {
         let shouldDismiss = true;
         children.forEach(child => {
@@ -264,13 +265,13 @@ function useDismiss(context, props = {}) {
       clearInsideReactTree();
     }
     function handlePointerDown(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || (0, _utils.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _utils.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
         return;
       }
       closeOnPressOutside(event);
     }
     function handleTouchStart(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || (0, _utils.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _utils.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
         return;
       }
       const touch = event.touches[0];
@@ -290,14 +291,19 @@ function useDismiss(context, props = {}) {
         });
       }
     }
+    function addTargetEventListenerOnce(event, listener) {
+      const target = (0, _element.getTarget)(event);
+      if (!target) {
+        return;
+      }
+      const unsubscribe = (0, _addEventListener.addEventListener)(target, event.type, () => {
+        listener(event);
+        unsubscribe();
+      });
+    }
     function handleTouchStartCapture(event) {
       currentPointerTypeRef.current = 'touch';
-      const target = (0, _utils.getTarget)(event);
-      function callback() {
-        handleTouchStart(event);
-        target?.removeEventListener(event.type, callback);
-      }
-      target?.addEventListener(event.type, callback);
+      addTargetEventListenerOnce(event, handleTouchStart);
     }
     function closeOnPressOutsideCapture(event) {
       cancelDismissOnEndTimeout.clear();
@@ -307,16 +313,13 @@ function useDismiss(context, props = {}) {
       if (event.type === 'mousedown' && touchStateRef.current && !touchStateRef.current.dismissOnMouseDown) {
         return;
       }
-      const target = (0, _utils.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) {
@@ -355,7 +358,7 @@ function useDismiss(context, props = {}) {
       clearInsideReactTree();
     }
     function handleTouchMove(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || (0, _utils.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _utils.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
         return;
       }
       const touch = event.touches[0];
@@ -375,15 +378,10 @@ function useDismiss(context, props = {}) {
       }
     }
     function handleTouchMoveCapture(event) {
-      const target = (0, _utils.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 || (0, _utils.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _utils.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || (0, _element.isEventTargetWithin)(event, store.select('floatingElement')) || (0, _element.isEventTargetWithin)(event, store.select('domReferenceElement'))) {
         return;
       }
       if (touchStateRef.current.dismissOnTouchEnd) {
@@ -393,47 +391,12 @@ function useDismiss(context, props = {}) {
       touchStateRef.current = null;
     }
     function handleTouchEndCapture(event) {
-      const target = (0, _utils.getTarget)(event);
-      function callback() {
-        handleTouchEnd(event);
-        target?.removeEventListener(event.type, callback);
-      }
-      target?.addEventListener(event.type, callback);
+      addTargetEventListenerOnce(event, handleTouchEnd);
     }
     const doc = (0, _owner.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 = (0, _mergeCleanups.mergeCleanups)(escapeKey && (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(doc, 'keydown', closeOnEscapeKeyDown), (0, _addEventListener.addEventListener)(doc, 'compositionstart', handleCompositionStart), (0, _addEventListener.addEventListener)(doc, 'compositionend', handleCompositionEnd)), outsidePressEnabled && (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(doc, 'click', closeOnPressOutsideCapture, true), (0, _addEventListener.addEventListener)(doc, 'pointerdown', closeOnPressOutsideCapture, true), (0, _addEventListener.addEventListener)(doc, 'pointerup', handlePressEndCapture, true), (0, _addEventListener.addEventListener)(doc, 'pointercancel', handlePressEndCapture, true), (0, _addEventListener.addEventListener)(doc, 'mousedown', closeOnPressOutsideCapture, true), (0, _addEventListener.addEventListener)(doc, 'mouseup', handlePressEndCapture, true), (0, _addEventListener.addEventListener)(doc, 'touchstart', handleTouchStartCapture, true), (0, _addEventListener.addEventListener)(doc, 'touchmove', handleTouchMoveCapture, true), (0, _addEventListener.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();
@@ -462,10 +425,10 @@ function useDismiss(context, props = {}) {
     if (!open || !enabled || event.button !== 0) {
       return;
     }
-    const target = (0, _utils.getTarget)(event.nativeEvent);
+    const target = (0, _element.getTarget)(event.nativeEvent);
     // Only treat presses that start within the floating DOM subtree as inside.
     // This avoids suppressing parent dismissal when interacting with nested portals.
-    if (!(0, _utils.contains)(store.select('floatingElement'), target)) {
+    if (!(0, _element.contains)(store.select('floatingElement'), target)) {
       return;
     }
     if (!pressStartedInsideRef.current) {

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

@@ -56,10 +56,11 @@ 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', (0, _dom.isElement)(localDomReference) ? localDomReference : null);
+  rootContext.useSyncedValue('referenceElement', localDomReference ?? null);
+  const localDomReferenceElement = (0, _dom.isElement)(localDomReference) ? localDomReference : null;
+  rootContext.useSyncedValue('domReferenceElement', localDomReference === undefined ? rootContextElements.domReference : localDomReferenceElement);
   rootContext.useSyncedValue('floatingElement', localFloatingElement);
   const setReference = React.useCallback(node => {
     if ((0, _dom.isElement)(node) || node === null) {

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

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