@base-ui/react 1.3.0 → 1.4.1

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.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/floating-ui-react/hooks/useClick.js

@@ -9,10 +9,11 @@ exports.useClick = useClick;
 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 _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _empty = require("@base-ui/utils/empty");
+var _element = require("../utils/element");
+var _event = require("../utils/event");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 /**
  * Opens or closes the floating element when clicking the reference element.
  * @see https://floating-ui.com/docs/useClick
@@ -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, () => {
@@ -113,5 +115,5 @@ function useClick(context, props = {}) {
   }), [dataRef, eventOption, ignoreMouse, store, stickIfOpen, toggle, frame, touchOpenTimeout, touchOpenDelay, reason]);
   return React.useMemo(() => enabled ? {
     reference
-  } : _constants.EMPTY_OBJECT, [enabled, reference]);
+  } : _empty.EMPTY_OBJECT, [enabled, reference]);
 }

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,13 +9,17 @@ 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");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _createAttribute = require("../utils/createAttribute");
 /* eslint-disable no-underscore-dangle */
 
@@ -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.d.ts

@@ -1,5 +1,5 @@
 import type { ReferenceType } from "../types.js";
-import type { BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
+import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
 export interface UseFloatingRootContextOptions {
   open?: boolean | undefined;

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;
 }

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

@@ -8,12 +8,14 @@ Object.defineProperty(exports, "__esModule", {
 exports.useFocus = useFocus;
 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 _detectBrowser = require("@base-ui/utils/detectBrowser");
 var _useTimeout = require("@base-ui/utils/useTimeout");
 var _owner = require("@base-ui/utils/owner");
-var _utils = require("../utils");
-var _createBaseUIEventDetails = require("../../utils/createBaseUIEventDetails");
-var _reasons = require("../../utils/reasons");
+var _element = require("../utils/element");
+var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
+var _reasons = require("../../internals/reasons");
 var _createAttribute = require("../utils/createAttribute");
 const isMacSafari = _detectBrowser.isMac && _detectBrowser.isSafari;
 /**
@@ -48,7 +50,7 @@ function useFocus(context, props = {}) {
     // return to the tab/window.
     function onBlur() {
       const currentDomReference = store.select('domReferenceElement');
-      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _utils.activeElement)((0, _owner.ownerDocument)(currentDomReference))) {
+      if (!store.select('open') && (0, _dom.isHTMLElement)(currentDomReference) && currentDomReference === (0, _element.activeElement)((0, _owner.ownerDocument)(currentDomReference))) {
         blockFocusRef.current = true;
       }
     }
@@ -58,18 +60,7 @@ 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 (0, _mergeCleanups.mergeCleanups)((0, _addEventListener.addEventListener)(win, 'blur', onBlur), isMacSafari && (0, _addEventListener.addEventListener)(win, 'keydown', onKeyDown, true), isMacSafari && (0, _addEventListener.addEventListener)(win, 'pointerdown', onPointerDown, true));
   }, [store, enabled]);
   React.useEffect(() => {
     if (!enabled) {
@@ -103,19 +94,19 @@ function useFocus(context, props = {}) {
         blockFocusRef.current = false;
         blockedReferenceRef.current = null;
       }
-      const target = (0, _utils.getTarget)(event.nativeEvent);
+      const target = (0, _element.getTarget)(event.nativeEvent);
       if ((0, _dom.isElement)(target)) {
         // Safari fails to match `:focus-visible` if focus was initially
         // outside the document.
         if (isMacSafari && !event.relatedTarget) {
-          if (!keyboardModalityRef.current && !(0, _utils.isTypeableElement)(target)) {
+          if (!keyboardModalityRef.current && !(0, _element.isTypeableElement)(target)) {
             return;
           }
-        } else if (!(0, _utils.matchesFocusVisible)(target)) {
+        } else if (!(0, _element.matchesFocusVisible)(target)) {
           return;
         }
       }
-      const movedFromOtherEnabledTrigger = (0, _utils.isTargetInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements);
+      const movedFromOtherEnabledTrigger = (0, _element.isTargetInsideEnabledTrigger)(event.relatedTarget, store.context.triggerElements);
       const {
         nativeEvent,
         currentTarget
@@ -145,7 +136,7 @@ function useFocus(context, props = {}) {
       // Wait for the window blur listener to fire.
       timeout.start(0, () => {
         const domReference = store.select('domReferenceElement');
-        const activeEl = (0, _utils.activeElement)(domReference ? domReference.ownerDocument : document);
+        const activeEl = (0, _element.activeElement)((0, _owner.ownerDocument)(domReference));
 
         // Focus left the page, keep it open.
         if (!relatedTarget && activeEl === domReference) {
@@ -159,7 +150,7 @@ function useFocus(context, props = {}) {
         // as it will only point to the shadow host of the newly focused element
         // and not the element that actually has received focus if it is located
         // inside a shadow root.
-        if ((0, _utils.contains)(dataRef.current.floatingContext?.refs.floating.current, activeEl) || (0, _utils.contains)(domReference, activeEl) || movedToFocusGuard) {
+        if ((0, _element.contains)(dataRef.current.floatingContext?.refs.floating.current, activeEl) || (0, _element.contains)(domReference, activeEl) || movedToFocusGuard) {
           return;
         }
 
@@ -167,7 +158,7 @@ function useFocus(context, props = {}) {
         // the floating element. The focus handler of that trigger will
         // handle the open state.
         const nextFocusedElement = relatedTarget ?? activeEl;
-        if ((0, _utils.isTargetInsideEnabledTrigger)(nextFocusedElement, store.context.triggerElements)) {
+        if ((0, _element.isTargetInsideEnabledTrigger)(nextFocusedElement, store.context.triggerElements)) {
           return;
         }
         store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.triggerFocus, nativeEvent));

package/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
    */