@base-ui/react 1.4.1 → 1.5.0

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

@@ -1,9 +1,9 @@
 'use client';
 
 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 { getWindow } from '@floating-ui/utils/dom';
 import { contains, getTarget } from "../utils/element.js";
 import { isMouseLikePointerType } from "../utils/event.js";
 function createVirtualElement(domElement, data) {
@@ -68,19 +68,22 @@ function isMouseBasedEvent(event) {
  * @see https://floating-ui.com/docs/useClientPoint
  */
 export function useClientPoint(context, props = {}) {
+  const {
+    enabled = true,
+    axis = 'both'
+  } = props;
   const store = 'rootStore' in context ? context.rootStore : context;
   const open = store.useState('open');
   const floating = store.useState('floatingElement');
   const domReference = store.useState('domReferenceElement');
   const dataRef = store.context.dataRef;
-  const {
-    enabled = true,
-    axis = 'both'
-  } = props;
   const initialRef = React.useRef(false);
   const cleanupListenerRef = React.useRef(null);
   const [pointerType, setPointerType] = React.useState();
   const [reactive, setReactive] = React.useState([]);
+  const resetReference = useStableCallback(reference => {
+    store.set('positionReference', reference);
+  });
   const setReference = useStableCallback((newX, newY, referenceElement) => {
     if (initialRef.current) {
       return;
@@ -107,6 +110,7 @@ export function useClientPoint(context, props = {}) {
       // If there's no cleanup, there's no listener, but we want to ensure
       // we add the listener if the cursor landed on the floating element and
       // then back on the reference (i.e. it's interactive).
+      setReference(event.clientX, event.clientY, event.currentTarget);
       setReactive([]);
     }
   });
@@ -116,34 +120,39 @@ export function useClientPoint(context, props = {}) {
   // devices, this is undesirable because the floating element will move to
   // the dismissal touch point.
   const openCheck = isMouseLikePointerType(pointerType) ? floating : open;
-  const addListener = React.useCallback(() => {
-    if (!openCheck || !enabled) {
+  React.useEffect(() => {
+    if (!enabled) {
+      resetReference(domReference);
+      return undefined;
+    }
+    if (!openCheck) {
       return undefined;
     }
+    function cleanupListener() {
+      cleanupListenerRef.current?.();
+      cleanupListenerRef.current = null;
+    }
     const win = getWindow(floating);
     function handleMouseMove(event) {
       const target = getTarget(event);
       if (!contains(floating, target)) {
         setReference(event.clientX, event.clientY);
       } else {
-        cleanupListenerRef.current?.();
-        cleanupListenerRef.current = null;
+        cleanupListener();
       }
     }
     if (!dataRef.current.openEvent || isMouseBasedEvent(dataRef.current.openEvent)) {
-      const cleanup = () => {
-        cleanupListenerRef.current?.();
-        cleanupListenerRef.current = null;
-      };
       cleanupListenerRef.current = addEventListener(win, 'mousemove', handleMouseMove);
-      return cleanup;
+    } else {
+      resetReference(domReference);
     }
-    store.set('positionReference', domReference);
-    return undefined;
-  }, [openCheck, enabled, floating, dataRef, domReference, store, setReference]);
-  React.useEffect(() => {
-    return addListener();
-  }, [addListener, reactive]);
+    return cleanupListener;
+  }, [openCheck, enabled, floating, dataRef, domReference, store, setReference, resetReference, reactive]);
+
+  // Clear virtual cursor references when the hook unmounts. Enabled flips are handled above.
+  React.useEffect(() => () => {
+    store.set('positionReference', null);
+  }, [store]);
   React.useEffect(() => {
     if (enabled && !floating) {
       initialRef.current = false;

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

@@ -71,7 +71,7 @@ export interface UseDismissProps {
     outsidePress?: boolean | undefined;
   } | undefined;
   /**
-   * External FlatingTree to use when the one provided by context can't be used.
+   * External FloatingTree to use when the one provided by context can't be used.
    */
   externalTree?: FloatingTreeStore | undefined;
 }

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

@@ -1,22 +1,20 @@
 'use client';
 
+/* eslint-disable no-underscore-dangle */
 import * as React from 'react';
-import { getComputedStyle, getParentNode, isElement, isHTMLElement, isLastTraversableNode, isShadowRoot, isWebKit } from '@floating-ui/utils/dom';
 import { addEventListener } from '@base-ui/utils/addEventListener';
 import { mergeCleanups } from '@base-ui/utils/mergeCleanups';
-import { Timeout, useTimeout } from '@base-ui/utils/useTimeout';
-import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { ownerDocument } from '@base-ui/utils/owner';
-import { contains, getTarget, isEventTargetWithin, isRootElement } from "../utils/element.js";
-import { isReactEvent } from "../utils/event.js";
-import { getNodeChildren } from "../utils/nodes.js";
-
-/* eslint-disable no-underscore-dangle */
-
+import { useStableCallback } from '@base-ui/utils/useStableCallback';
+import { Timeout, useTimeout } from '@base-ui/utils/useTimeout';
+import { getComputedStyle, getParentNode, isElement, isHTMLElement, isLastTraversableNode, isShadowRoot, isWebKit } from '@floating-ui/utils/dom';
 import { useFloatingTree } from "../components/FloatingTree.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
 import { createAttribute } from "../utils/createAttribute.js";
+import { contains, getTarget, isEventTargetWithin, isRootElement } from "../utils/element.js";
+import { isReactEvent } from "../utils/event.js";
+import { getNodeChildren } from "../utils/nodes.js";
 const bubbleHandlerKeys = {
   intentional: 'onClick',
   sloppy: 'onPointerDown'
@@ -36,12 +34,6 @@ export function normalizeProp(normalizable) {
  * @see https://floating-ui.com/docs/useDismiss
  */
 export function useDismiss(context, props = {}) {
-  const store = 'rootStore' in context ? context.rootStore : context;
-  const open = store.useState('open');
-  const floatingElement = store.useState('floatingElement');
-  const {
-    dataRef
-  } = store.context;
   const {
     enabled = true,
     escapeKey = true,
@@ -52,19 +44,27 @@ export function useDismiss(context, props = {}) {
     bubbles,
     externalTree
   } = props;
+  const store = 'rootStore' in context ? context.rootStore : context;
+  const open = store.useState('open');
+  const floatingElement = store.useState('floatingElement');
+  const {
+    dataRef
+  } = store.context;
   const tree = useFloatingTree(externalTree);
   const outsidePressFn = useStableCallback(typeof outsidePressProp === 'function' ? outsidePressProp : () => false);
   const outsidePress = typeof outsidePressProp === 'function' ? outsidePressFn : outsidePressProp;
   const outsidePressEnabled = outsidePress !== false;
   const getOutsidePressEventProp = useStableCallback(() => outsidePressEvent);
-  const pressStartedInsideRef = React.useRef(false);
-  const pressStartPreventedRef = React.useRef(false);
-  // Ignore only the very next outside click after dragging from inside to outside.
-  const suppressNextOutsideClickRef = React.useRef(false);
   const {
     escapeKey: escapeKeyBubbles,
     outsidePress: outsidePressBubbles
   } = normalizeProp(bubbles);
+  const pressStartedInsideRef = React.useRef(false);
+  const pressStartPreventedRef = React.useRef(false);
+  // Ignore only the very next outside click after dragging from inside to outside.
+  const suppressNextOutsideClickRef = React.useRef(false);
+  const isComposingRef = React.useRef(false);
+  const currentPointerTypeRef = React.useRef('');
   const touchStateRef = React.useRef(null);
   const cancelDismissOnEndTimeout = useTimeout();
   const clearInsideReactTreeTimeout = useTimeout();
@@ -72,9 +72,20 @@ export function useDismiss(context, props = {}) {
     clearInsideReactTreeTimeout.clear();
     dataRef.current.insideReactTree = false;
   });
-  const isComposingRef = React.useRef(false);
-  const currentPointerTypeRef = React.useRef('');
-  const isReferencePressEnabled = useStableCallback(referencePress);
+  const hasBlockingChild = useStableCallback(bubbleKey => {
+    const nodeId = dataRef.current.floatingContext?.nodeId;
+    const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
+    return children.some(child => child.context?.open && !child.context.dataRef.current[bubbleKey]);
+  });
+  const isEventWithinOwnElements = useStableCallback(event => {
+    return isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'));
+  });
+  const closeOnReferencePress = useStableCallback(event => {
+    if (!referencePress()) {
+      return;
+    }
+    store.setOpen(false, createChangeEventDetails(REASONS.triggerPress, event.nativeEvent));
+  });
   const closeOnEscapeKeyDown = useStableCallback(event => {
     if (!open || !enabled || !escapeKey || event.key !== 'Escape') {
       return;
@@ -85,24 +96,15 @@ export function useDismiss(context, props = {}) {
     if (isComposingRef.current) {
       return;
     }
-    const nodeId = dataRef.current.floatingContext?.nodeId;
-    const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
-    if (!escapeKeyBubbles) {
-      if (children.length > 0) {
-        let shouldDismiss = true;
-        children.forEach(child => {
-          if (child.context?.open && !child.context.dataRef.current.__escapeKeyBubbles) {
-            shouldDismiss = false;
-          }
-        });
-        if (!shouldDismiss) {
-          return;
-        }
-      }
+    if (!escapeKeyBubbles && hasBlockingChild('__escapeKeyBubbles')) {
+      return;
     }
     const native = isReactEvent(event) ? event.nativeEvent : event;
     const eventDetails = createChangeEventDetails(REASONS.escapeKey, native);
     store.setOpen(false, eventDetails);
+    if (!eventDetails.isCanceled) {
+      event.preventDefault();
+    }
     if (!escapeKeyBubbles && !eventDetails.isPropagationAllowed) {
       event.stopPropagation();
     }
@@ -111,6 +113,33 @@ export function useDismiss(context, props = {}) {
     dataRef.current.insideReactTree = true;
     clearInsideReactTreeTimeout.start(0, clearInsideReactTree);
   });
+  const markPressStartedInsideReactTree = useStableCallback(event => {
+    if (!open || !enabled || event.button !== 0) {
+      return;
+    }
+    const target = 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 (!contains(store.select('floatingElement'), target)) {
+      return;
+    }
+    if (!pressStartedInsideRef.current) {
+      pressStartedInsideRef.current = true;
+      pressStartPreventedRef.current = false;
+    }
+  });
+  const markInsidePressStartPrevented = useStableCallback(event => {
+    if (!open || !enabled) {
+      return;
+    }
+    if (!(event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
+      return;
+    }
+    if (pressStartedInsideRef.current) {
+      pressStartPreventedRef.current = true;
+    }
+  });
   React.useEffect(() => {
     if (!open || !enabled) {
       return undefined;
@@ -163,10 +192,16 @@ export function useDismiss(context, props = {}) {
     function isEventWithinFloatingTree(event) {
       const nodeId = dataRef.current.floatingContext?.nodeId;
       const targetIsInsideChildren = tree && getNodeChildren(tree.nodesRef.current, nodeId).some(node => isEventTargetWithin(event, node.context?.elements.floating));
-      return isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement')) || targetIsInsideChildren;
+      return isEventWithinOwnElements(event) || targetIsInsideChildren;
     }
     function closeOnPressOutside(event) {
       if (shouldIgnoreEvent(event)) {
+        // A new press began outside the floating element and its trigger. Clear any
+        // leftover drag-out suppression so this press's eventual click can dismiss.
+        if (event.type !== 'click' && !isEventWithinOwnElements(event)) {
+          preventedPressSuppressionTimeout.clear();
+          suppressNextOutsideClickRef.current = false;
+        }
         clearInsideReactTree();
         return;
       }
@@ -242,30 +277,20 @@ export function useDismiss(context, props = {}) {
       if (typeof outsidePress === 'function' && !outsidePress(event)) {
         return;
       }
-      const nodeId = dataRef.current.floatingContext?.nodeId;
-      const children = tree ? getNodeChildren(tree.nodesRef.current, nodeId) : [];
-      if (children.length > 0) {
-        let shouldDismiss = true;
-        children.forEach(child => {
-          if (child.context?.open && !child.context.dataRef.current.__outsidePressBubbles) {
-            shouldDismiss = false;
-          }
-        });
-        if (!shouldDismiss) {
-          return;
-        }
+      if (hasBlockingChild('__outsidePressBubbles')) {
+        return;
       }
       store.setOpen(false, createChangeEventDetails(REASONS.outsidePress, event));
       clearInsideReactTree();
     }
     function handlePointerDown(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || event.pointerType === 'touch' || !store.select('open') || !enabled || isEventWithinOwnElements(event)) {
         return;
       }
       closeOnPressOutside(event);
     }
     function handleTouchStart(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !store.select('open') || !enabled || isEventWithinOwnElements(event)) {
         return;
       }
       const touch = event.touches[0];
@@ -352,7 +377,7 @@ export function useDismiss(context, props = {}) {
       clearInsideReactTree();
     }
     function handleTouchMove(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventWithinOwnElements(event)) {
         return;
       }
       const touch = event.touches[0];
@@ -375,7 +400,7 @@ export function useDismiss(context, props = {}) {
       addTargetEventListenerOnce(event, handleTouchMove);
     }
     function handleTouchEnd(event) {
-      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventTargetWithin(event, store.select('floatingElement')) || isEventTargetWithin(event, store.select('domReferenceElement'))) {
+      if (getOutsidePressEvent() !== 'sloppy' || !touchStateRef.current || isEventWithinOwnElements(event)) {
         return;
       }
       if (touchStateRef.current.dismissOnTouchEnd) {
@@ -396,51 +421,15 @@ export function useDismiss(context, props = {}) {
       resetPressStartState();
       suppressNextOutsideClickRef.current = false;
     };
-  }, [dataRef, floatingElement, escapeKey, outsidePressEnabled, outsidePress, open, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, clearInsideReactTree, getOutsidePressEventProp, tree, store, cancelDismissOnEndTimeout]);
+  }, [dataRef, floatingElement, escapeKey, outsidePressEnabled, outsidePress, open, enabled, escapeKeyBubbles, outsidePressBubbles, closeOnEscapeKeyDown, clearInsideReactTree, getOutsidePressEventProp, hasBlockingChild, isEventWithinOwnElements, tree, store, cancelDismissOnEndTimeout]);
   React.useEffect(clearInsideReactTree, [outsidePress, clearInsideReactTree]);
   const reference = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
-    [bubbleHandlerKeys[referencePressEvent]]: event => {
-      if (!isReferencePressEnabled()) {
-        return;
-      }
-      store.setOpen(false, createChangeEventDetails(REASONS.triggerPress, event.nativeEvent));
-    },
+    [bubbleHandlerKeys[referencePressEvent]]: closeOnReferencePress,
     ...(referencePressEvent !== 'intentional' && {
-      onClick(event) {
-        if (!isReferencePressEnabled()) {
-          return;
-        }
-        store.setOpen(false, createChangeEventDetails(REASONS.triggerPress, event.nativeEvent));
-      }
+      onClick: closeOnReferencePress
     })
-  }), [closeOnEscapeKeyDown, store, referencePressEvent, isReferencePressEnabled]);
-  const markPressStartedInsideReactTree = useStableCallback(event => {
-    if (!open || !enabled || event.button !== 0) {
-      return;
-    }
-    const target = 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 (!contains(store.select('floatingElement'), target)) {
-      return;
-    }
-    if (!pressStartedInsideRef.current) {
-      pressStartedInsideRef.current = true;
-      pressStartPreventedRef.current = false;
-    }
-  });
-  const markInsidePressStartPrevented = useStableCallback(event => {
-    if (!open || !enabled) {
-      return;
-    }
-    if (!(event.defaultPrevented || event.nativeEvent.defaultPrevented)) {
-      return;
-    }
-    if (pressStartedInsideRef.current) {
-      pressStartPreventedRef.current = true;
-    }
-  });
+  }), [closeOnEscapeKeyDown, closeOnReferencePress, referencePressEvent]);
   const floating = React.useMemo(() => ({
     onKeyDown: closeOnEscapeKeyDown,
     // `onMouseDown` may be blocked if `event.preventDefault()` is called in

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

@@ -1,11 +1,12 @@
 'use client';
 
 import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useFloating as usePosition } from '@floating-ui/react-dom';
 import { isElement } from '@floating-ui/utils/dom';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useFloatingTree } from "../components/FloatingTree.js";
 import { useFloatingRootContext } from "./useFloatingRootContext.js";
+
 /**
  * Provides data to position a floating element and context to add interactions.
  * @see https://floating-ui.com/docs/useFloating
@@ -15,30 +16,37 @@ export function useFloating(options = {}) {
     nodeId,
     externalTree
   } = options;
-  const internalRootStore = useFloatingRootContext(options);
-  const rootContext = options.rootContext || internalRootStore;
-  const rootContextElements = {
-    reference: rootContext.useState('referenceElement'),
-    floating: rootContext.useState('floatingElement'),
-    domReference: rootContext.useState('domReferenceElement')
-  };
+  const internalStore = useFloatingRootContext(options);
+  const store = options.rootContext || internalStore;
+  const referenceElement = store.useState('referenceElement');
+  const floatingElement = store.useState('floatingElement');
+  const domReferenceElement = store.useState('domReferenceElement');
+  const open = store.useState('open');
+  const floatingId = store.useState('floatingId');
   const [positionReference, setPositionReferenceRaw] = React.useState(null);
+  const [localDomReference, setLocalDomReference] = React.useState(undefined);
+  const [localFloatingElement, setLocalFloatingElement] = React.useState(undefined);
   const domReferenceRef = React.useRef(null);
   const tree = useFloatingTree(externalTree);
-  useIsoLayoutEffect(() => {
-    if (rootContextElements.domReference) {
-      domReferenceRef.current = rootContextElements.domReference;
-    }
-  }, [rootContextElements.domReference]);
+  const storeElements = React.useMemo(() => ({
+    reference: referenceElement,
+    floating: floatingElement,
+    domReference: domReferenceElement
+  }), [referenceElement, floatingElement, domReferenceElement]);
   const position = usePosition({
     ...options,
     elements: {
-      ...rootContextElements,
+      ...storeElements,
       ...(positionReference && {
         reference: positionReference
       })
     }
   });
+  const localDomReferenceElement = isElement(localDomReference) ? localDomReference : null;
+  const syncedFloatingElement = localFloatingElement === undefined ? store.state.floatingElement : localFloatingElement;
+  store.useSyncedValue('referenceElement', localDomReference ?? null);
+  store.useSyncedValue('domReferenceElement', localDomReference === undefined ? domReferenceElement : localDomReferenceElement);
+  store.useSyncedValue('floatingElement', syncedFloatingElement);
   const setPositionReference = React.useCallback(node => {
     const computedPositionReference = isElement(node) ? {
       getBoundingClientRect: () => node.getBoundingClientRect(),
@@ -50,12 +58,6 @@ export function useFloating(options = {}) {
     setPositionReferenceRaw(computedPositionReference);
     position.refs.setReference(computedPositionReference);
   }, [position.refs]);
-  const [localDomReference, setLocalDomReference] = React.useState(undefined);
-  const [localFloatingElement, setLocalFloatingElement] = React.useState(null);
-  rootContext.useSyncedValue('referenceElement', localDomReference ?? null);
-  const localDomReferenceElement = isElement(localDomReference) ? localDomReference : null;
-  rootContext.useSyncedValue('domReferenceElement', localDomReference === undefined ? rootContextElements.domReference : localDomReferenceElement);
-  rootContext.useSyncedValue('floatingElement', localFloatingElement);
   const setReference = React.useCallback(node => {
     if (isElement(node) || node === null) {
       domReferenceRef.current = node;
@@ -85,24 +87,27 @@ export function useFloating(options = {}) {
   }), [position.refs, setReference, setFloating, setPositionReference]);
   const elements = React.useMemo(() => ({
     ...position.elements,
-    domReference: rootContextElements.domReference
-  }), [position.elements, rootContextElements.domReference]);
-  const open = rootContext.useState('open');
-  const floatingId = rootContext.useState('floatingId');
+    domReference: domReferenceElement
+  }), [position.elements, domReferenceElement]);
   const context = React.useMemo(() => ({
     ...position,
-    dataRef: rootContext.context.dataRef,
+    dataRef: store.context.dataRef,
     open,
-    onOpenChange: rootContext.setOpen,
-    events: rootContext.context.events,
+    onOpenChange: store.setOpen,
+    events: store.context.events,
     floatingId,
     refs,
     elements,
     nodeId,
-    rootStore: rootContext
-  }), [position, refs, elements, nodeId, rootContext, open, floatingId]);
+    rootStore: store
+  }), [position, refs, elements, nodeId, store, open, floatingId]);
+  useIsoLayoutEffect(() => {
+    if (domReferenceElement) {
+      domReferenceRef.current = domReferenceElement;
+    }
+  }, [domReferenceElement]);
   useIsoLayoutEffect(() => {
-    rootContext.context.dataRef.current.floatingContext = context;
+    store.context.dataRef.current.floatingContext = context;
     const node = tree?.nodesRef.current.find(n => n.id === nodeId);
     if (node) {
       node.context = context;
@@ -113,6 +118,6 @@ export function useFloating(options = {}) {
     context,
     refs,
     elements,
-    rootStore: rootContext
-  }), [position, refs, elements, context, rootContext]);
+    rootStore: store
+  }), [position, refs, elements, context, store]);
 }

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

@@ -1,6 +1,6 @@
-import type { ReferenceType } from "../types.js";
 import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
+import type { ReferenceType } from "../types.js";
 export interface UseFloatingRootContextOptions {
   open?: boolean | undefined;
   onOpenChange?(open: boolean, eventDetails: BaseUIChangeEventDetails<string>): void;

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

@@ -2,11 +2,11 @@
 
 import { isElement } from '@floating-ui/utils/dom';
 import { useId } from '@base-ui/utils/useId';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
+import { PopupTriggerMap } from "../../utils/popups/index.js";
 import { useFloatingParentNodeId } from "../components/FloatingTree.js";
 import { FloatingRootStore } from "../components/FloatingRootStore.js";
-import { PopupTriggerMap } from "../../utils/popups/index.js";
 export function useFloatingRootContext(options) {
   const {
     open = false,