@base-ui/react 1.4.1 → 1.5.0

package/esm/popover/popup/PopoverPopup.js

@@ -14,6 +14,7 @@ import { COMPOSITE_KEYS } from "../../internals/composite/composite.js";
 import { useToolbarRootContext } from "../../toolbar/root/ToolbarRootContext.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { ClosePartProvider, useClosePartCount } from "../../utils/closePart.js";
+import { FOCUSABLE_POPUP_PROPS } from "../../utils/popups/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const stateAttributesMapping = {
   ...baseMapping,
@@ -28,11 +29,11 @@ const stateAttributesMapping = {
  */
 export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(componentProps, forwardedRef) {
   const {
-    className,
     render,
+    className,
+    style,
     initialFocus,
     finalFocus,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -56,6 +57,11 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
   const openReason = store.useState('openChangeReason');
   const activeTriggerElement = store.useState('activeTriggerElement');
   const floatingContext = store.useState('floatingRootContext');
+  const floatingId = floatingContext.useState('floatingId');
+  const disabled = store.useState('disabled');
+  const openOnHover = store.useState('openOnHover');
+  const closeDelay = store.useState('closeDelay');
+  const popupId = elementProps.id ?? floatingId;
   useOpenChangeComplete({
     open,
     ref: store.context.popupRef,
@@ -65,9 +71,6 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
       }
     }
   });
-  const disabled = store.useState('disabled');
-  const openOnHover = store.useState('openOnHover');
-  const closeDelay = store.useState('closeDelay');
   useHoverFloatingInteraction(floatingContext, {
     enabled: openOnHover && !disabled,
     closeDelay
@@ -83,6 +86,11 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     return true;
   }
   const resolvedInitialFocus = initialFocus === undefined ? defaultInitialFocus : initialFocus;
+  const focusManagerModal = modal !== false && hasClosePart;
+  store.useSyncedValue('focusManagerModal', focusManagerModal);
+  const setPopupElement = React.useCallback(element => {
+    store.set('popupElement', element);
+  }, [store]);
   const state = {
     open,
     side: positioner.side,
@@ -90,15 +98,13 @@ export const PopoverPopup = /*#__PURE__*/React.forwardRef(function PopoverPopup(
     instant: instantType,
     transitionStatus
   };
-  const focusManagerModal = modal !== false && hasClosePart;
-  store.useSyncedValue('focusManagerModal', focusManagerModal);
-  const setPopupElement = React.useCallback(element => {
-    store.set('popupElement', element);
-  }, [store]);
   const element = useRenderElement('div', componentProps, {
     state,
     ref: [forwardedRef, store.context.popupRef, setPopupElement],
     props: [popupProps, {
+      id: popupId,
+      role: 'dialog',
+      ...FOCUSABLE_POPUP_PROPS,
       'aria-labelledby': titleId,
       'aria-describedby': descriptionId,
       onKeyDown(event) {

package/esm/popover/popup/PopoverPopupDataAttributes.d.ts

@@ -27,7 +27,7 @@ export declare enum PopoverPopupDataAttributes {
   align = "data-align",
   /**
    * Present if animations should be instant.
-   * @type {'click' | 'dismiss'}
+   * @type {'click' | 'dismiss' | 'focus' | 'trigger-change'}
    */
   instant = "data-instant",
 }

package/esm/popover/popup/PopoverPopupDataAttributes.js

@@ -28,7 +28,7 @@ export let PopoverPopupDataAttributes = function (PopoverPopupDataAttributes) {
   PopoverPopupDataAttributes["align"] = "data-align";
   /**
    * Present if animations should be instant.
-   * @type {'click' | 'dismiss'}
+   * @type {'click' | 'dismiss' | 'focus' | 'trigger-change'}
    */
   PopoverPopupDataAttributes["instant"] = "data-instant";
   return PopoverPopupDataAttributes;

package/esm/popover/positioner/PopoverPositioner.js

@@ -27,6 +27,7 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
   const {
     render,
     className,
+    style,
     anchor,
     positionMethod = 'absolute',
     side = 'bottom',
@@ -39,7 +40,6 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     sticky = false,
     disableAnchorTracking = false,
     collisionAvoidance = POPUP_COLLISION_AVOIDANCE,
-    style,
     ...elementProps
   } = componentProps;
   const {
@@ -101,6 +101,10 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     }
     return undefined;
   }, [domReference, runOnceAnimationsFinish, store]);
+  useAnchoredPopupScrollLock(open && modal === true && openReason !== REASONS.triggerHover, openMethod === 'touch', positionerElement, triggerElement);
+  const setPositionerElement = React.useCallback(element => {
+    store.set('positionerElement', element);
+  }, [store]);
   const state = {
     open,
     side: positioning.side,
@@ -108,10 +112,6 @@ export const PopoverPositioner = /*#__PURE__*/React.forwardRef(function PopoverP
     anchorHidden: positioning.anchorHidden,
     instant: instantType
   };
-  useAnchoredPopupScrollLock(open && modal === true && openReason !== REASONS.triggerHover, openMethod === 'touch', positionerElement, triggerElement);
-  const setPositionerElement = React.useCallback(element => {
-    store.set('positionerElement', element);
-  }, [store]);
   const element = usePositioner(componentProps, state, {
     styles: positioning.positionerStyles,
     transitionStatus,

package/esm/popover/root/PopoverRoot.d.ts

@@ -36,7 +36,7 @@ export interface PopoverRootProps<Payload = unknown> {
    * - `unmount`: When specified, the popover will not be unmounted when closed.
    * Instead, the `unmount` function must be called to unmount the popover manually.
    * Useful when the popover's animation is controlled by an external library.
-   * - `close`: Closes the dialog imperatively when called.
+   * - `close`: Closes the popover imperatively when called.
    */
   actionsRef?: React.RefObject<PopoverRoot.Actions | null> | undefined;
   /**

package/esm/popover/root/PopoverRoot.js

@@ -1,15 +1,16 @@
 'use client';
 
 import * as React from 'react';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
-import { useDismiss, useInteractions, useRole, FloatingTree, useFloatingParentNodeId, useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
+import { useDismiss, FloatingTree, useFloatingParentNodeId } from "../../floating-ui-react/index.js";
 import { PopoverRootContext, usePopoverRootContext } from "./PopoverRootContext.js";
 import { PopoverStore } from "../store/PopoverStore.js";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
 import { REASONS } from "../../internals/reasons.js";
-import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
-import { useOpenInteractionType } from "../../utils/useOpenInteractionType.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { FOCUSABLE_POPUP_PROPS, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps, usePopupRootSync } from "../../utils/popups/index.js";
+import { mergeProps } from "../../merge-props/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PopoverRootComponent({
   props
 }) {
@@ -44,13 +45,12 @@ function PopoverRootComponent({
   store.useControlledProp('openProp', openProp);
   store.useControlledProp('triggerIdProp', triggerIdProp);
   const open = store.useState('open');
+  const mounted = store.useState('mounted');
   const payload = store.useState('payload');
+  const nested = useFloatingParentNodeId() != null;
   store.useContextCallback('onOpenChange', onOpenChange);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
-  const {
-    openMethod,
-    triggerProps: interactionTypeTriggerProps
-  } = useOpenInteractionType(open);
+  usePopupRootSync(store, open);
   useImplicitActiveTrigger(store);
   const {
     forceUnmount
@@ -60,6 +60,10 @@ function PopoverRootComponent({
       openChangeReason: null
     });
   });
+  store.useSyncedValues({
+    modal,
+    nested
+  });
   React.useEffect(() => {
     if (!open) {
       store.context.stickIfOpenTimeout.clear();
@@ -72,50 +76,18 @@ function PopoverRootComponent({
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
-  const floatingRootContext = useSyncedFloatingRootContext({
-    popupStore: store,
-    onOpenChange: store.setOpen
-  });
-  const dismiss = useDismiss(floatingRootContext, {
-    outsidePressEvent: {
-      // Ensure `aria-hidden` on outside elements is removed immediately
-      // on outside press when trapping focus.
-      mouse: modal === 'trap-focus' ? 'sloppy' : 'intentional',
-      touch: 'sloppy'
-    }
-  });
-  const role = useRole(floatingRootContext);
-  const {
-    getReferenceProps,
-    getFloatingProps,
-    getTriggerProps
-  } = useInteractions([dismiss, role]);
-  const activeTriggerProps = React.useMemo(() => {
-    return getReferenceProps(interactionTypeTriggerProps);
-  }, [getReferenceProps, interactionTypeTriggerProps]);
-  const inactiveTriggerProps = React.useMemo(() => {
-    return getTriggerProps(interactionTypeTriggerProps);
-  }, [getTriggerProps, interactionTypeTriggerProps]);
-  const popupProps = React.useMemo(() => {
-    return getFloatingProps();
-  }, [getFloatingProps]);
-  store.useSyncedValues({
-    modal,
-    openMethod,
-    activeTriggerProps,
-    inactiveTriggerProps,
-    popupProps,
-    floatingRootContext,
-    nested: useFloatingParentNodeId() != null
-  });
+  const shouldRenderInteractions = open || mounted;
   const popoverContext = React.useMemo(() => ({
     store
   }), [store]);
-  return /*#__PURE__*/_jsx(PopoverRootContext.Provider, {
+  return /*#__PURE__*/_jsxs(PopoverRootContext.Provider, {
     value: popoverContext,
-    children: typeof children === 'function' ? children({
+    children: [shouldRenderInteractions && /*#__PURE__*/_jsx(PopoverInteractions, {
+      store: store,
+      modal: modal
+    }), typeof children === 'function' ? children({
       payload
-    }) : children
+    }) : children]
   });
 }
 
@@ -136,4 +108,27 @@ export function PopoverRoot(props) {
       props: props
     })
   });
+}
+function PopoverInteractions({
+  store,
+  modal
+}) {
+  const floatingRootContext = store.useState('floatingRootContext');
+  const dismiss = useDismiss(floatingRootContext, {
+    outsidePressEvent: {
+      // Ensure `aria-hidden` on outside elements is removed immediately
+      // on outside press when trapping focus.
+      mouse: modal === 'trap-focus' ? 'sloppy' : 'intentional',
+      touch: 'sloppy'
+    }
+  });
+  const activeTriggerProps = dismiss.reference ?? EMPTY_OBJECT;
+  const inactiveTriggerProps = dismiss.trigger ?? EMPTY_OBJECT;
+  const popupProps = React.useMemo(() => mergeProps(FOCUSABLE_POPUP_PROPS, dismiss.floating), [dismiss.floating]);
+  usePopupInteractionProps(store, {
+    activeTriggerProps,
+    inactiveTriggerProps,
+    popupProps
+  });
+  return null;
 }

package/esm/popover/store/PopoverHandle.js

@@ -37,7 +37,7 @@ export class PopoverHandle {
    * Indicates whether the popover is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 

package/esm/popover/store/PopoverStore.d.ts

@@ -2,11 +2,11 @@ import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
 import { Timeout } from '@base-ui/utils/useTimeout';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
-import { PopoverRoot } from "../root/PopoverRoot.js";
+import { type PopoverRoot } from "../root/PopoverRoot.js";
 import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js";
 export type State<Payload> = PopupStoreState<Payload> & {
   disabled: boolean;
-  instantType: 'dismiss' | 'click' | undefined;
+  instantType: 'dismiss' | 'click' | 'focus' | 'trigger-change' | undefined;
   modal: boolean | 'trap-focus';
   focusManagerModal: boolean;
   openMethod: InteractionType | null;
@@ -29,7 +29,7 @@ type Context = PopupStoreContext<PopoverRoot.ChangeEventDetails> & {
 };
 declare const selectors: {
   disabled: (state: State<unknown>) => boolean;
-  instantType: (state: State<unknown>) => "click" | "dismiss" | undefined;
+  instantType: (state: State<unknown>) => "click" | "focus" | "dismiss" | "trigger-change" | undefined;
   openMethod: (state: State<unknown>) => InteractionType | null;
   openChangeReason: (state: State<unknown>) => import("../index.js").PopoverRootChangeEventReason | null;
   modal: (state: State<unknown>) => boolean | "trap-focus";
@@ -46,6 +46,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -63,6 +65,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -80,6 +84,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -97,6 +103,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -108,12 +116,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => import("../../floating-ui-react/components/FloatingRootStore.js").FloatingRootStore;
+  triggerCount: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => number;
   preventUnmountingOnClose: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -131,6 +160,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -148,6 +179,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -165,6 +198,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -176,12 +211,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }) => Element | null;
+  popupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }) => string | undefined;
   isTriggerActive: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -199,6 +255,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -216,6 +274,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -233,6 +293,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -244,12 +306,33 @@ declare const selectors: {
     inactiveTriggerProps: import("../../index.js").HTMLProps;
     popupProps: import("../../index.js").HTMLProps;
   }, isActive: boolean) => import("../../index.js").HTMLProps;
+  triggerPopupId: (state: {
+    open: boolean;
+    readonly openProp: boolean | undefined;
+    mounted: boolean;
+    transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
+    floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
+    preventUnmountingOnClose: boolean;
+    payload: unknown;
+    activeTriggerId: string | null;
+    activeTriggerElement: Element | null;
+    readonly triggerIdProp: string | null | undefined;
+    popupElement: HTMLElement | null;
+    positionerElement: HTMLElement | null;
+    activeTriggerProps: import("../../index.js").HTMLProps;
+    inactiveTriggerProps: import("../../index.js").HTMLProps;
+    popupProps: import("../../index.js").HTMLProps;
+  }, triggerId: string | undefined) => string | undefined;
   popupProps: (state: {
     open: boolean;
     readonly openProp: boolean | undefined;
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -267,6 +350,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -284,6 +369,8 @@ declare const selectors: {
     mounted: boolean;
     transitionStatus: import("../../internals/useTransitionStatus.js").TransitionStatus;
     floatingRootContext: import("../../floating-ui-react/index.js").FloatingRootContext;
+    floatingId: string | undefined;
+    triggerCount: number;
     preventUnmountingOnClose: boolean;
     payload: unknown;
     activeTriggerId: string | null;
@@ -297,7 +384,7 @@ declare const selectors: {
   }) => HTMLElement | null;
 };
 export declare class PopoverStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, Selectors> {
-  constructor(initialState?: Partial<State<Payload>>);
+  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
   setOpen: (nextOpen: boolean, eventDetails: Omit<PopoverRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
   static useStore<Payload>(externalStore: PopoverStore<Payload> | undefined, initialState: Partial<State<Payload>>): PopoverStore<Payload>;
   private disposeEffect;

package/esm/popover/store/PopoverStore.js

@@ -1,12 +1,12 @@
 /* eslint-disable react-hooks/rules-of-hooks */
+'use client';
+
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { ReactStore, createSelector } from '@base-ui/utils/store';
 import { Timeout } from '@base-ui/utils/useTimeout';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
-import { useOnMount } from '@base-ui/utils/useOnMount';
 import { REASONS } from "../../internals/reasons.js";
-import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
+import { createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setOpenTriggerState, usePopupStore } from "../../utils/popups/index.js";
 import { PATIENT_CLICK_THRESHOLD } from "../../internals/constants.js";
 function createInitialState() {
   return {
@@ -42,14 +42,16 @@ const selectors = {
   hasViewport: createSelector(state => state.hasViewport)
 };
 export class PopoverStore extends ReactStore {
-  constructor(initialState) {
+  constructor(initialState, floatingId, nested = false) {
     const initial = {
       ...createInitialState(),
       ...initialState
     };
+    const triggerElements = new PopupTriggerMap();
     if (initial.open && initialState?.mounted === undefined) {
       initial.mounted = true;
     }
+    initial.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
     super(initial, {
       popupRef: /*#__PURE__*/React.createRef(),
       backdropRef: /*#__PURE__*/React.createRef(),
@@ -59,7 +61,7 @@ export class PopoverStore extends ReactStore {
       triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
       beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
       stickIfOpenTimeout: new Timeout(),
-      triggerElements: new PopupTriggerMap()
+      triggerElements
     }, selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
@@ -69,6 +71,10 @@ export class PopoverStore extends ReactStore {
     eventDetails.preventUnmountOnClose = () => {
       this.set('preventUnmountingOnClose', true);
     };
+    const activeTriggerId = this.select('activeTriggerId');
+    if (!nextOpen && eventDetails.reason === REASONS.closePress && eventDetails.trigger == null && activeTriggerId != null) {
+      eventDetails.trigger = this.context.triggerElements.getById(activeTriggerId) ?? this.select('activeTriggerElement') ?? undefined;
+    }
     this.context.onOpenChange?.(nextOpen, eventDetails);
     if (eventDetails.isCanceled) {
       return;
@@ -79,14 +85,7 @@ export class PopoverStore extends ReactStore {
         open: nextOpen,
         openChangeReason: eventDetails.reason
       };
-
-      // If a popup is closing, the `trigger` may be null.
-      // We want to keep the previous value so that exit animations are played and focus is returned correctly.
-      const newTriggerId = eventDetails.trigger?.id ?? null;
-      if (newTriggerId || nextOpen) {
-        updatedState.activeTriggerId = newTriggerId;
-        updatedState.activeTriggerElement = eventDetails.trigger ?? null;
-      }
+      setOpenTriggerState(updatedState, nextOpen, eventDetails.trigger);
       this.update(updatedState);
     };
     if (isHover) {
@@ -109,11 +108,11 @@ export class PopoverStore extends ReactStore {
     }
   };
   static useStore(externalStore, initialState) {
-    const internalStore = useRefWithInit(() => {
-      return new PopoverStore(initialState);
-    }).current;
-    const store = externalStore ?? internalStore;
-    useOnMount(internalStore.disposeEffect);
+    const {
+      store,
+      internalStore
+    } = usePopupStore(externalStore, (floatingId, nested) => new PopoverStore(initialState, floatingId, nested));
+    React.useEffect(() => internalStore?.disposeEffect(), [internalStore]);
     return store;
   }
   disposeEffect = () => {

package/esm/popover/title/PopoverTitle.js

@@ -1,7 +1,6 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
@@ -23,12 +22,7 @@ export const PopoverTitle = /*#__PURE__*/React.forwardRef(function PopoverTitle(
     store
   } = usePopoverRootContext();
   const id = useBaseUiId(elementProps.id);
-  useIsoLayoutEffect(() => {
-    store.set('titleElementId', id);
-    return () => {
-      store.set('titleElementId', undefined);
-    };
-  }, [store, id]);
+  store.useSyncedValueWithCleanup('titleElementId', id);
   const element = useRenderElement('h2', componentProps, {
     ref: forwardedRef,
     props: [{