@base-ui/react 1.4.1 → 1.5.0

package/esm/tooltip/viewport/TooltipViewport.d.ts

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)

package/esm/tooltip/viewport/TooltipViewport.js

@@ -14,8 +14,8 @@ const stateAttributesMapping = {
 
 /**
  * A viewport for displaying content transitions.
- * This component is only required if one popup can be opened by multiple triggers, its content change based on the trigger
- * and switching between them is animated.
+ * This component is only required if one popup can be opened by multiple triggers, its content
+ * changes based on the trigger, and switching between them is animated.
  * Renders a `<div>` element.
  *
  * Documentation: [Base UI Tooltip](https://base-ui.com/react/components/tooltip)

package/esm/tooltip/viewport/TooltipViewportDataAttributes.d.ts

@@ -11,7 +11,7 @@ export declare enum TooltipViewportDataAttributes {
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   activationDirection = "data-activation-direction",
   /**

package/esm/tooltip/viewport/TooltipViewportDataAttributes.js

@@ -11,7 +11,7 @@ export let TooltipViewportDataAttributes = /*#__PURE__*/function (TooltipViewpor
    * Indicates the direction from which the popup was activated.
    * This can be used to create directional animations based on how the popup was triggered.
    * Contains space-separated values for both horizontal and vertical axes.
-   * @type {`${'left' | 'right'} {'top' | 'bottom'}`}
+   * @type {`${'left' | 'right'} ${'top' | 'bottom'}`}
    */
   TooltipViewportDataAttributes["activationDirection"] = "data-activation-direction";
   /**

package/esm/unstable-use-media-query/index.js

@@ -5,7 +5,7 @@ export function useMediaQuery(query, options) {
   // Wait for jsdom to support the match media feature.
   // All the browsers Base UI support have this built-in.
   // This defensive check is here for simplicity.
-  // Most of the time, the match media logic isn't central to people tests.
+  // Most of the time, the match media logic isn't central to people's tests.
   const supportMatchMedia = typeof window !== 'undefined' && typeof window.matchMedia !== 'undefined';
   query = query.replace(/^@media( ?)/m, '');
   const {

package/esm/utils/popups/index.d.ts

@@ -1,3 +1,4 @@
+export * from "./inlineRect.js";
 export * from "./popupStoreUtils.js";
 export * from "./popupTriggerMap.js";
 export * from "./store.js";

package/esm/utils/popups/index.js

@@ -1,3 +1,4 @@
+export * from "./inlineRect.js";
 export * from "./popupStoreUtils.js";
 export * from "./popupTriggerMap.js";
 export * from "./store.js";

package/esm/utils/popups/inlineRect.d.ts

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import type { Middleware } from '@floating-ui/react-dom';
+export interface InlineRectCoords {
+  /** The x position in viewport coordinates. */
+  x: number;
+  /** The y position in viewport coordinates. */
+  y: number;
+  /** The line index under the pointer when coordinates were captured. */
+  lineIndex?: number | undefined;
+  /** The trigger element whose rects produced these coordinates. */
+  element: Element;
+}
+export declare function getInlineRectTriggerProps(coordsRef: React.RefObject<InlineRectCoords | undefined>, isOpen: boolean): Pick<React.HTMLAttributes<Element>, 'onFocus' | 'onMouseEnter' | 'onMouseMove'>;
+export declare function updateInlineRectCoords(coordsRef: React.RefObject<InlineRectCoords | undefined>, element: Element, clientX: number, clientY: number): InlineRectCoords | undefined;
+export declare function createInlineMiddleware(coordsRef: React.RefObject<InlineRectCoords | undefined>): Middleware;

package/esm/utils/popups/inlineRect.js

@@ -0,0 +1,191 @@
+import { isElement } from '@floating-ui/utils/dom';
+
+// Floating UI ships an `inline()` middleware. This local version mirrors its line-rect
+// selection while adding trigger identity checks, delayed-open hit-line reuse, and
+// improved left/right edge grouping for Preview Card's reusable trigger model.
+
+function createRect(left, top, right, bottom) {
+  return {
+    left,
+    top,
+    right,
+    bottom,
+    x: left,
+    y: top,
+    width: right - left,
+    height: bottom - top
+  };
+}
+function copyRect(rect) {
+  return {
+    left: rect.left,
+    top: rect.top,
+    right: rect.right,
+    bottom: rect.bottom,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function getLineRects(rects) {
+  const lines = [];
+  let previousRect;
+  let left = Number.POSITIVE_INFINITY;
+  let top = Number.POSITIVE_INFINITY;
+  let right = Number.NEGATIVE_INFINITY;
+  let bottom = Number.NEGATIVE_INFINITY;
+  for (const rect of Array.from(rects).sort((a, b) => a.top - b.top)) {
+    left = Math.min(left, rect.left);
+    top = Math.min(top, rect.top);
+    right = Math.max(right, rect.right);
+    bottom = Math.max(bottom, rect.bottom);
+    if (!previousRect || rect.top - previousRect.top > previousRect.height / 2) {
+      lines.push(copyRect(rect));
+    } else {
+      const line = lines[lines.length - 1];
+      line.left = Math.min(line.left, rect.left);
+      line.right = Math.max(line.right, rect.right);
+      line.bottom = Math.max(line.bottom, rect.bottom);
+      line.width = line.right - line.left;
+      line.height = line.bottom - line.top;
+    }
+    previousRect = rect;
+  }
+  return {
+    lines,
+    fallback: createRect(left, top, right, bottom)
+  };
+}
+function findLineIndex(lines, x, y) {
+  return lines.findIndex(lineRect => x > lineRect.left - 2 && x < lineRect.right + 2 && y > lineRect.top - 2 && y < lineRect.bottom + 2);
+}
+function createClientRect(rect) {
+  return createRect(rect.left, rect.top, rect.right, rect.bottom);
+}
+function getInlineRectCoords(element, clientX, clientY) {
+  const {
+    lines
+  } = getLineRects(element.getClientRects());
+  if (lines.length < 2) {
+    return undefined;
+  }
+  const lineIndex = findLineIndex(lines, clientX, clientY);
+  return {
+    x: clientX,
+    y: clientY,
+    lineIndex: lineIndex === -1 ? undefined : lineIndex,
+    element
+  };
+}
+function getInlineReferenceRect(reference, placement, coords) {
+  const {
+    lines,
+    fallback
+  } = getLineRects(reference.getClientRects());
+  if (lines.length < 2) {
+    return null;
+  }
+  const x = coords?.x;
+  const y = coords?.y;
+  const side = placement[0];
+  if (coords?.lineIndex != null && lines[coords.lineIndex]) {
+    return createClientRect(lines[coords.lineIndex]);
+  }
+  if (x != null && y != null) {
+    const lineIndex = findLineIndex(lines, x, y);
+    if (lineIndex !== -1) {
+      return createClientRect(lines[lineIndex]);
+    }
+  }
+  if (lines.length === 2 && lines[0].left > lines[1].right && x != null && y != null) {
+    return fallback;
+  }
+  if (side === 't' || side === 'b') {
+    const firstRect = lines[0];
+    const lastRect = lines[lines.length - 1];
+    const targetRect = side === 't' ? firstRect : lastRect;
+    return createRect(targetRect.left, firstRect.top, targetRect.right, lastRect.bottom);
+  }
+  const isLeft = side === 'l';
+  let left = lines[0].left;
+  let right = lines[0].right;
+  let edge = isLeft ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
+  let targetFirstRect = lines[0];
+  let targetLastRect = lines[0];
+  for (const rect of lines) {
+    left = Math.min(left, rect.left);
+    right = Math.max(right, rect.right);
+    const nextEdge = isLeft ? rect.left : rect.right;
+    if (isLeft && nextEdge < edge || !isLeft && nextEdge > edge) {
+      edge = nextEdge;
+      targetFirstRect = rect;
+      targetLastRect = rect;
+    } else if (nextEdge === edge) {
+      targetLastRect = rect;
+    }
+  }
+  return createRect(left, targetFirstRect.top, right, targetLastRect.bottom);
+}
+function getContextElement(reference) {
+  if ('contextElement' in reference && reference.contextElement) {
+    return reference.contextElement;
+  }
+  return isElement(reference) ? reference : undefined;
+}
+export function getInlineRectTriggerProps(coordsRef, isOpen) {
+  function updateCoords(event) {
+    updateInlineRectCoords(coordsRef, event.currentTarget, event.clientX, event.clientY);
+  }
+  function updateCoordsOnMove(event) {
+    if (!isOpen) {
+      updateCoords(event);
+    }
+  }
+  return {
+    onFocus() {
+      coordsRef.current = undefined;
+    },
+    onMouseEnter: updateCoords,
+    onMouseMove: updateCoordsOnMove
+  };
+}
+export function updateInlineRectCoords(coordsRef, element, clientX, clientY) {
+  const nextCoords = getInlineRectCoords(element, clientX, clientY);
+  coordsRef.current = nextCoords;
+  return nextCoords;
+}
+export function createInlineMiddleware(coordsRef) {
+  return {
+    name: 'inline',
+    async fn(state) {
+      const reference = state.elements.reference;
+      if (typeof reference?.getClientRects !== 'function') {
+        return {};
+      }
+      const contextElement = getContextElement(reference);
+      const coords = coordsRef.current;
+      const currentCoords = coords?.element === reference || coords?.element === contextElement ? coords : undefined;
+      const rect = getInlineReferenceRect(reference, state.placement, currentCoords);
+      if (!rect || typeof state.platform.getElementRects !== 'function') {
+        return {};
+      }
+      const resetRects = await state.platform.getElementRects({
+        reference: {
+          contextElement,
+          getBoundingClientRect() {
+            return rect;
+          }
+        },
+        floating: state.elements.floating,
+        strategy: state.strategy
+      });
+      if (state.rects.reference.x === resetRects.reference.x && state.rects.reference.y === resetRects.reference.y && state.rects.reference.width === resetRects.reference.width && state.rects.reference.height === resetRects.reference.height) {
+        return {};
+      }
+      return {
+        reset: {
+          rects: resetRects
+        }
+      };
+    }
+  };
+}

package/esm/utils/popups/popupStoreUtils.d.ts

@@ -1,21 +1,35 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
+import type { InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
+import type { BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { PopupStoreState, PopupStoreContext, popupStoreSelectors, PopupStoreSelectors } from "./store.js";
+export declare const FOCUSABLE_POPUP_PROPS: {
+  tabIndex: number;
+  "data-base-ui-focusable": string;
+};
+type PopupStoreWithOpen<State extends PopupStoreState<unknown>, SetOpenEventDetails extends BaseUIChangeEventDetails<string>> = ReactStore<State, PopupStoreContext<never>, PopupStoreSelectors> & {
+  setOpen(open: boolean, eventDetails: SetOpenEventDetails): void;
+};
+export declare function usePopupStore<State extends PopupStoreState<unknown>, SetOpenEventDetails extends BaseUIChangeEventDetails<string>, Store extends PopupStoreWithOpen<State, SetOpenEventDetails>>(externalStore: Store | undefined, createStore: (floatingId: string | undefined, nested: boolean) => Store, treatPopupAsFloatingElement?: boolean): {
+  store: Store;
+  internalStore: Store | null;
+};
 /**
  * Returns a callback ref that registers/unregisters the trigger element in the store.
  *
  * @param store The Store instance where the trigger should be registered.
  */
-export declare function useTriggerRegistration<State extends PopupStoreState<any>>(id: string | undefined, store: ReactStore<State, PopupStoreContext<any>, PopupStoreSelectors>): (element: Element | null) => void;
+export declare function useTriggerRegistration<State extends PopupStoreState<unknown>>(id: string | undefined, store: ReactStore<State, PopupStoreContext<never>, PopupStoreSelectors>): (element: Element | null) => void;
+export declare function setOpenTriggerState(state: Partial<PopupStoreState<unknown>>, open: boolean, trigger: Element | undefined): void;
 /**
  * Sets up trigger data forwarding to the store.
  *
  * @param triggerId Id of the trigger.
- * @param triggerElement The trigger DOM element.
+ * @param triggerElementRef Ref for the trigger DOM element.
  * @param store The Store instance managing the popup state.
  * @param stateUpdates An object with state updates to apply when the trigger is active.
  */
-export declare function useTriggerDataForwarding<State extends PopupStoreState<any>>(triggerId: string | undefined, triggerElementRef: React.RefObject<Element | null>, store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>, stateUpdates: Omit<Partial<State>, 'activeTriggerId' | 'activeTriggerElement'>): {
+export declare function useTriggerDataForwarding<State extends PopupStoreState<unknown>>(triggerId: string | undefined, triggerElementRef: React.RefObject<Element | null>, store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, stateUpdates: Omit<Partial<State>, 'activeTriggerId' | 'activeTriggerElement'>): {
   registerTrigger: (element: Element | null) => void;
   isMountedByThisTrigger: boolean;
 };
@@ -24,17 +38,16 @@ export type PayloadChildRenderFunction<Payload> = (arg: {
 }) => React.ReactNode;
 /**
  * Ensures that when there's only one trigger element registered, it is set as the active trigger.
- * This allows controlled popups to work correctly without an explicit triggerId, maintaining compatibility
- * with the contained triggers.
+ * This keeps triggerCount reactive while open and allows controlled popups to work correctly without
+ * an explicit triggerId, maintaining compatibility with contained triggers.
  *
  * This should be called on the Root part.
  *
- * @param open Whether the popup is open.
  * @param store The Store instance managing the popup state.
  */
-export declare function useImplicitActiveTrigger<State extends PopupStoreState<any>>(store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>): void;
+export declare function useImplicitActiveTrigger<State extends PopupStoreState<unknown>>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>): void;
 /**
- * Mangages the mounted state of the popup.
+ * Manages the mounted state of the popup.
  * Sets up the transition status listeners and handles unmounting when needed.
  * Updates the `mounted` and `transitionStatus` states in the store.
  *
@@ -44,7 +57,12 @@ export declare function useImplicitActiveTrigger<State extends PopupStoreState<a
  *
  * @returns A function to forcibly unmount the popup.
  */
-export declare function useOpenStateTransitions<State extends PopupStoreState<any>>(open: boolean, store: ReactStore<State, PopupStoreContext<any>, typeof popupStoreSelectors>, onUnmount?: () => void): {
+export declare function useOpenStateTransitions<State extends PopupStoreState<unknown>>(open: boolean, store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, onUnmount?: () => void): {
   forceUnmount: () => void;
   transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
-};
+};
+export declare function usePopupInteractionProps<State extends PopupStoreState<unknown>>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, statePart: Partial<State> & Pick<State, 'activeTriggerProps' | 'inactiveTriggerProps' | 'popupProps'>): void;
+export declare function usePopupRootSync<State extends PopupStoreState<unknown> & {
+  openMethod: InteractionType | null;
+}>(store: ReactStore<State, PopupStoreContext<never>, typeof popupStoreSelectors>, open: boolean): void;
+export {};

package/esm/utils/popups/popupStoreUtils.js

@@ -1,10 +1,41 @@
 'use client';
 
 import * as React from 'react';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
+import { useId } from '@base-ui/utils/useId';
 import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
+import { FOCUSABLE_ATTRIBUTE } from "../../floating-ui-react/utils/constants.js";
+import { useFloatingParentNodeId } from "../../floating-ui-react/components/FloatingTree.js";
+import { useSyncedFloatingRootContext } from "../../floating-ui-react/hooks/useSyncedFloatingRootContext.js";
 import { useTransitionStatus } from "../../internals/useTransitionStatus.js";
 import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+export const FOCUSABLE_POPUP_PROPS = {
+  tabIndex: -1,
+  [FOCUSABLE_ATTRIBUTE]: ''
+};
+export function usePopupStore(externalStore, createStore, treatPopupAsFloatingElement = false) {
+  const floatingId = useId();
+  const nested = useFloatingParentNodeId() != null;
+  const internalStoreRef = React.useRef(null);
+  if (externalStore === undefined && internalStoreRef.current === null) {
+    internalStoreRef.current = createStore(floatingId, nested);
+  }
+  const store = externalStore ?? internalStoreRef.current;
+  useSyncedFloatingRootContext({
+    popupStore: store,
+    treatPopupAsFloatingElement,
+    floatingRootContext: store.state.floatingRootContext,
+    floatingId,
+    nested,
+    onOpenChange: store.setOpen
+  });
+  return {
+    store,
+    internalStore: internalStoreRef.current
+  };
+}
+
 /**
  * Returns a callback ref that registers/unregisters the trigger element in the store.
  *
@@ -18,12 +49,14 @@ export function useTriggerRegistration(id, store) {
     if (id === undefined) {
       return;
     }
+    let shouldSyncTriggerCount = false;
     if (registeredElementIdRef.current !== null) {
       const registeredId = registeredElementIdRef.current;
       const registeredElement = registeredElementRef.current;
       const currentElement = store.context.triggerElements.getById(registeredId);
       if (registeredElement && currentElement === registeredElement) {
         store.context.triggerElements.delete(registeredId);
+        shouldSyncTriggerCount = true;
       }
       registeredElementIdRef.current = null;
       registeredElementRef.current = null;
@@ -32,15 +65,32 @@ export function useTriggerRegistration(id, store) {
       registeredElementIdRef.current = id;
       registeredElementRef.current = element;
       store.context.triggerElements.add(id, element);
+      shouldSyncTriggerCount = true;
+    }
+    if (shouldSyncTriggerCount) {
+      const triggerCount = store.context.triggerElements.size;
+      if (store.select('open') && store.state.triggerCount !== triggerCount) {
+        store.set('triggerCount', triggerCount);
+      }
     }
   }, [store, id]);
 }
+export function setOpenTriggerState(state, open, trigger) {
+  const triggerId = trigger?.id ?? null;
+
+  // If a popup is closing, the `trigger` may be undefined.
+  // We want to keep the previous value so that exit animations are played and focus is returned correctly.
+  if (triggerId || open) {
+    state.activeTriggerId = triggerId;
+    state.activeTriggerElement = trigger ?? null;
+  }
+}
 
 /**
  * Sets up trigger data forwarding to the store.
  *
  * @param triggerId Id of the trigger.
- * @param triggerElement The trigger DOM element.
+ * @param triggerElementRef Ref for the trigger DOM element.
  * @param store The Store instance managing the popup state.
  * @param stateUpdates An object with state updates to apply when the trigger is active.
  */
@@ -49,22 +99,22 @@ export function useTriggerDataForwarding(triggerId, triggerElementRef, store, st
   const baseRegisterTrigger = useTriggerRegistration(triggerId, store);
   const registerTrigger = useStableCallback(element => {
     baseRegisterTrigger(element);
-    if (!element || !store.select('open')) {
+    if (!element) {
       return;
     }
+    const open = store.select('open');
     const activeTriggerId = store.select('activeTriggerId');
     if (activeTriggerId === triggerId) {
       store.update({
         activeTriggerElement: element,
-        ...stateUpdates
+        ...(open ? stateUpdates : null)
       });
       return;
     }
-    if (activeTriggerId == null) {
-      // This runs when popup is open, but no active trigger is set.
-      // It can happen when using controlled mode and the trigger is mounted after opening or if `triggerId` prop is not set explicitly.
-      // In such cases the first trigger to run this code becomes the active trigger (store.select('activeTriggerId') should not return null after that).
-      // This is mostly for compatibility with contained triggers where no explicit `triggerId` was required in controlled mode.
+    if (activeTriggerId == null && open) {
+      // If a popup is already open, a detached trigger can mount before any active trigger
+      // has been established. Claim the first registered trigger so trigger-owned focus
+      // management and ARIA relationships work.
       store.update({
         activeTriggerId: triggerId,
         activeTriggerElement: element,
@@ -88,32 +138,44 @@ export function useTriggerDataForwarding(triggerId, triggerElementRef, store, st
 }
 /**
  * Ensures that when there's only one trigger element registered, it is set as the active trigger.
- * This allows controlled popups to work correctly without an explicit triggerId, maintaining compatibility
- * with the contained triggers.
+ * This keeps triggerCount reactive while open and allows controlled popups to work correctly without
+ * an explicit triggerId, maintaining compatibility with contained triggers.
  *
  * This should be called on the Root part.
  *
- * @param open Whether the popup is open.
  * @param store The Store instance managing the popup state.
  */
 export function useImplicitActiveTrigger(store) {
   const open = store.useState('open');
+  const reactiveTriggerCount = store.useState('triggerCount');
   useIsoLayoutEffect(() => {
-    if (open && !store.select('activeTriggerId') && store.context.triggerElements.size === 1) {
+    if (!open) {
+      if (store.state.triggerCount !== 0) {
+        store.set('triggerCount', 0);
+      }
+      return;
+    }
+    const triggerCount = store.context.triggerElements.size;
+    const stateUpdates = {};
+    if (store.state.triggerCount !== triggerCount) {
+      stateUpdates.triggerCount = triggerCount;
+    }
+    if (!store.select('activeTriggerId') && triggerCount === 1) {
       const iteratorResult = store.context.triggerElements.entries().next();
       if (!iteratorResult.done) {
         const [implicitTriggerId, implicitTriggerElement] = iteratorResult.value;
-        store.update({
-          activeTriggerId: implicitTriggerId,
-          activeTriggerElement: implicitTriggerElement
-        });
+        stateUpdates.activeTriggerId = implicitTriggerId;
+        stateUpdates.activeTriggerElement = implicitTriggerElement;
       }
     }
-  }, [open, store]);
+    if (stateUpdates.triggerCount !== undefined || stateUpdates.activeTriggerId !== undefined) {
+      store.update(stateUpdates);
+    }
+  }, [open, store, reactiveTriggerCount]);
 }
 
 /**
- * Mangages the mounted state of the popup.
+ * Manages the mounted state of the popup.
  * Sets up the transition status listeners and handles unmounting when needed.
  * Updates the `mounted` and `transitionStatus` states in the store.
  *
@@ -138,14 +200,15 @@ export function useOpenStateTransitions(open, store, onUnmount) {
     store.update({
       activeTriggerId: null,
       activeTriggerElement: null,
-      mounted: false
+      mounted: false,
+      preventUnmountingOnClose: false
     });
     onUnmount?.();
     store.context.onOpenChangeComplete?.(false);
   });
   const preventUnmountingOnClose = store.useState('preventUnmountingOnClose');
   useOpenChangeComplete({
-    enabled: !preventUnmountingOnClose,
+    enabled: mounted && !open && !preventUnmountingOnClose,
     open,
     ref: store.context.popupRef,
     onComplete() {
@@ -158,4 +221,26 @@ export function useOpenStateTransitions(open, store, onUnmount) {
     forceUnmount,
     transitionStatus
   };
+}
+export function usePopupInteractionProps(store, statePart) {
+  store.useSyncedValues(statePart);
+  useIsoLayoutEffect(() => () => {
+    store.update({
+      activeTriggerProps: EMPTY_OBJECT,
+      inactiveTriggerProps: EMPTY_OBJECT,
+      popupProps: EMPTY_OBJECT
+    });
+  }, [store]);
+}
+export function usePopupRootSync(store, open) {
+  useIsoLayoutEffect(() => {
+    if (!open && store.state.openMethod !== null) {
+      store.set('openMethod', null);
+    }
+  }, [open, store]);
+  useIsoLayoutEffect(() => () => {
+    if (store.state.openMethod !== null) {
+      store.set('openMethod', null);
+    }
+  }, [store]);
 }

package/esm/utils/popups/popupTriggerMap.js

@@ -27,6 +27,8 @@ export class PopupTriggerMap {
     this.idMap.set(id, element);
     if (process.env.NODE_ENV !== 'production') {
       if (this.elementsSet.size !== this.idMap.size) {
+        // TODO: fix mui/no-guarded-throw
+        // eslint-disable-next-line mui/no-guarded-throw
         throw new Error('Base UI: A trigger element cannot be registered under multiple IDs in PopupTriggerMap.');
       }
     }

package/esm/utils/popups/store.d.ts

@@ -1,4 +1,5 @@
 import { FloatingRootContext } from "../../floating-ui-react/index.js";
+import { FloatingRootStore } from "../../floating-ui-react/components/FloatingRootStore.js";
 import { TransitionStatus } from "../../internals/useTransitionStatus.js";
 import { PopupTriggerMap } from "./popupTriggerMap.js";
 import { HTMLProps } from "../../internals/types.js";
@@ -24,9 +25,14 @@ export type PopupStoreState<Payload> = {
    */
   transitionStatus: TransitionStatus;
   floatingRootContext: FloatingRootContext;
+  floatingId: string | undefined;
+  /**
+   * Number of trigger elements currently registered for this popup.
+   */
+  triggerCount: number;
   /**
    * Whether to prevent unmounting the popup when closed.
-   * Useful for interactling with JS animation libraries that control unmounting themselves.
+   * Useful for interacting with JS animation libraries that control unmounting themselves.
    */
   preventUnmountingOnClose: boolean;
   /**
@@ -67,6 +73,7 @@ export type PopupStoreState<Payload> = {
   popupProps: HTMLProps;
 };
 export declare function createInitialPopupStoreState<Payload>(): PopupStoreState<Payload>;
+export declare function createPopupFloatingRootContext(triggerElements: PopupTriggerMap, floatingId?: string | undefined, nested?: boolean): FloatingRootStore;
 export type PopupStoreContext<ChangeEventDetails> = {
   /**
    * Map of registered trigger elements.
@@ -90,11 +97,13 @@ export declare const popupStoreSelectors: {
   open: (state: S) => boolean;
   mounted: (state: S) => boolean;
   transitionStatus: (state: S) => TransitionStatus;
-  floatingRootContext: (state: S) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  floatingRootContext: (state: S) => FloatingRootStore;
+  triggerCount: (state: S) => number;
   preventUnmountingOnClose: (state: S) => boolean;
   payload: (state: S) => unknown;
   activeTriggerId: (state: S) => string | null;
   activeTriggerElement: (state: S) => Element | null;
+  popupId: (state: S) => string | undefined;
   /**
    * Whether the trigger with the given ID was used to open the popup.
    */
@@ -108,6 +117,10 @@ export declare const popupStoreSelectors: {
    */
   isMountedByTrigger: (state: S, triggerId: string | undefined) => boolean;
   triggerProps: (state: S, isActive: boolean) => HTMLProps;
+  /**
+   * Popup id for the trigger that currently owns the open popup.
+   */
+  triggerPopupId: (state: S, triggerId: string | undefined) => string | undefined;
   popupProps: (state: S) => HTMLProps;
   popupElement: (state: S) => HTMLElement | null;
   positionerElement: (state: S) => HTMLElement | null;