@base-ui/react 1.4.0 → 1.5.0

package/esm/popover/store/PopoverStore.js

@@ -1,13 +1,13 @@
 /* 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 "../../utils/reasons.js";
-import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
-import { PATIENT_CLICK_THRESHOLD } from "../../utils/constants.js";
+import { REASONS } from "../../internals/reasons.js";
+import { createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setOpenTriggerState, usePopupStore } from "../../utils/popups/index.js";
+import { PATIENT_CLICK_THRESHOLD } from "../../internals/constants.js";
 function createInitialState() {
   return {
     ...createInitialPopupStoreState(),
@@ -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.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * A heading that labels the popover.
  * Renders an `<h2>` element.

package/esm/popover/title/PopoverTitle.js

@@ -1,10 +1,9 @@
 'use client';
 
 import * as React from 'react';
-import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 
 /**
  * A heading that labels the popover.
@@ -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: [{

package/esm/popover/trigger/PopoverTrigger.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps, NativeButtonProps } from "../../utils/types.js";
+import type { BaseUIComponentProps, NativeButtonProps } from "../../internals/types.js";
 import { PopoverHandle } from "../store/PopoverHandle.js";
 /**
  * A button that opens the popover.

package/esm/popover/trigger/PopoverTrigger.js

@@ -3,17 +3,18 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import * as React from 'react';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
-import { useButton } from "../../use-button/useButton.js";
+import { useButton } from "../../internals/use-button/useButton.js";
 import { triggerOpenStateMapping, pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
-import { CLICK_TRIGGER_IDENTIFIER } from "../../utils/constants.js";
-import { safePolygon, useClick, useHoverReferenceInteraction, useInteractions } from "../../floating-ui-react/index.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
+import { CLICK_TRIGGER_IDENTIFIER } from "../../internals/constants.js";
+import { safePolygon, useClick, useHoverReferenceInteraction } from "../../floating-ui-react/index.js";
 import { OPEN_DELAY } from "../utils/constants.js";
-import { useBaseUiId } from "../../utils/useBaseUiId.js";
+import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { FocusGuard } from "../../utils/FocusGuard.js";
-import { REASONS } from "../../utils/reasons.js";
+import { REASONS } from "../../internals/reasons.js";
 import { useTriggerDataForwarding } from "../../utils/popups/index.js";
 import { useTriggerFocusGuards } from "../../utils/popups/useTriggerFocusGuards.js";
+import { useOpenMethodTriggerProps } from "../../utils/useOpenInteractionType.js";
 
 /**
  * A button that opens the popover.
@@ -26,6 +27,7 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
     handle,
@@ -34,7 +36,6 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
     delay = OPEN_DELAY,
     closeDelay = 0,
     id: idProp,
-    style,
     ...elementProps
   } = componentProps;
   const rootContext = usePopoverRootContext(true);
@@ -46,6 +47,7 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
   const isTriggerActive = store.useState('isTriggerActive', thisTriggerId);
   const floatingContext = store.useState('floatingRootContext');
   const isOpenedByThisTrigger = store.useState('isOpenedByTrigger', thisTriggerId);
+  const popupId = store.useState('triggerPopupId', thisTriggerId);
   const triggerElementRef = React.useRef(null);
   const {
     registerTrigger,
@@ -77,12 +79,10 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
     enabled: floatingContext != null,
     stickIfOpen
   });
-  const localProps = useInteractions([click]);
+  const interactionTypeProps = useOpenMethodTriggerProps(() => store.select('open'), interactionType => {
+    store.set('openMethod', interactionType);
+  });
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
-  const state = {
-    disabled,
-    open: isOpenedByThisTrigger
-  };
   const {
     getButtonProps,
     buttonRef
@@ -90,33 +90,40 @@ export const PopoverTrigger = /*#__PURE__*/React.forwardRef(function PopoverTrig
     disabled,
     native: nativeButton
   });
-  const stateAttributesMapping = React.useMemo(() => ({
+  const stateAttributesMapping = {
     open(value) {
       if (value && openReason === REASONS.triggerPress) {
         return pressableTriggerOpenStateMapping.open(value);
       }
       return triggerOpenStateMapping.open(value);
     }
-  }), [openReason]);
+  };
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = useTriggerFocusGuards(store, triggerElementRef);
+  const state = {
+    disabled,
+    open: isOpenedByThisTrigger
+  };
   const element = useRenderElement('button', componentProps, {
     state,
     ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localProps.getReferenceProps(), hoverProps, rootTriggerProps, {
+    props: [click.reference, hoverProps, rootTriggerProps, interactionTypeProps, {
       [CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
+      id: thisTriggerId,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': isOpenedByThisTrigger,
+      'aria-controls': popupId
     }, elementProps, getButtonProps],
     stateAttributesMapping
   });
-  const {
-    preFocusGuardRef,
-    handlePreFocusGuardFocus,
-    handleFocusTargetFocus
-  } = useTriggerFocusGuards(store, triggerElementRef);
 
   // A fragment with key is required to ensure that the `element` is mounted to the same DOM node
   // regardless of whether the focus guards are rendered or not.
 
-  if (isTriggerActive && !focusManagerModal) {
+  if (isMountedByThisTrigger && !focusManagerModal) {
     return /*#__PURE__*/_jsxs(React.Fragment, {
       children: [/*#__PURE__*/_jsx(FocusGuard, {
         ref: preFocusGuardRef,

package/esm/popover/viewport/PopoverViewport.d.ts

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { BaseUIComponentProps } from "../../utils/types.js";
+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 Popover](https://base-ui.com/react/components/popover)
@@ -21,7 +21,7 @@ export interface PopoverViewportState {
   /**
    * Present if animations should be instant.
    */
-  instant: 'dismiss' | 'click' | undefined;
+  instant: 'dismiss' | 'click' | 'focus' | 'trigger-change' | undefined;
 }
 export declare namespace PopoverViewport {
   interface Props extends BaseUIComponentProps<'div', PopoverViewportState> {

package/esm/popover/viewport/PopoverViewport.js

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { usePopoverRootContext } from "../root/PopoverRootContext.js";
 import { usePopoverPositionerContext } from "../positioner/PopoverPositionerContext.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { PopoverViewportCssVars } from "./PopoverViewportCssVars.js";
 import { usePopupViewport } from "../../utils/usePopupViewport.js";
 const stateAttributesMapping = {
@@ -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 Popover](https://base-ui.com/react/components/popover)

package/esm/popover/viewport/PopoverViewportDataAttributes.d.ts

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

package/esm/popover/viewport/PopoverViewportDataAttributes.js

@@ -20,7 +20,7 @@ export let PopoverViewportDataAttributes = /*#__PURE__*/function (PopoverViewpor
   PopoverViewportDataAttributes["transitioning"] = "data-transitioning";
   /**
    * Present if animations should be instant.
-   * @type {'dismiss' | 'click'}
+   * @type {'click' | 'dismiss' | 'focus' | 'trigger-change'}
    */
   PopoverViewportDataAttributes["instant"] = "data-instant";
   return PopoverViewportDataAttributes;

package/esm/preview-card/arrow/PreviewCardArrow.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 import type { Align, Side } from "../../utils/useAnchorPositioning.js";
 /**
  * Displays an element positioned against the preview card anchor.

package/esm/preview-card/arrow/PreviewCardArrow.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { usePreviewCardPositionerContext } from "../positioner/PreviewCardPositionerContext.js";
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { popupStateMapping } from "../../utils/popupStateMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 
 /**
  * Displays an element positioned against the preview card anchor.

package/esm/preview-card/backdrop/PreviewCardBackdrop.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * An overlay displayed beneath the popup.
  * Renders a `<div>` element.

package/esm/preview-card/backdrop/PreviewCardBackdrop.js

@@ -3,8 +3,8 @@
 import * as React from 'react';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 const stateAttributesMapping = {
   ...baseMapping,
   ...transitionStatusMapping

package/esm/preview-card/popup/PreviewCardPopup.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { Align, Side } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
-import type { TransitionStatus } from "../../utils/useTransitionStatus.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
 /**
  * A container for the preview card contents.
  * Renders a `<div>` element.

package/esm/preview-card/popup/PreviewCardPopup.js

@@ -5,9 +5,9 @@ import { useStableCallback } from '@base-ui/utils/useStableCallback';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { usePreviewCardPositionerContext } from "../positioner/PreviewCardPositionerContext.js";
 import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.js";
-import { transitionStatusMapping } from "../../utils/stateAttributesMapping.js";
-import { useOpenChangeComplete } from "../../utils/useOpenChangeComplete.js";
-import { useRenderElement } from "../../utils/useRenderElement.js";
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.js";
+import { useOpenChangeComplete } from "../../internals/useOpenChangeComplete.js";
+import { useRenderElement } from "../../internals/useRenderElement.js";
 import { getDisabledMountTransitionStyles } from "../../utils/getDisabledMountTransitionStyles.js";
 import { useHoverFloatingInteraction } from "../../floating-ui-react/index.js";
 const stateAttributesMapping = {

package/esm/preview-card/positioner/PreviewCardPositioner.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type Side, type Align, type UseAnchorPositioningSharedParameters } from "../../utils/useAnchorPositioning.js";
-import type { BaseUIComponentProps } from "../../utils/types.js";
+import type { BaseUIComponentProps } from "../../internals/types.js";
 /**
  * Positions the popup against the trigger.
  * Renders a `<div>` element.

package/esm/preview-card/positioner/PreviewCardPositioner.js

@@ -1,14 +1,16 @@
 'use client';
 
 import * as React from 'react';
+import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { usePreviewCardRootContext } from "../root/PreviewCardContext.js";
 import { PreviewCardPositionerContext } from "./PreviewCardPositionerContext.js";
 import { FloatingNode, useFloatingNodeId } from "../../floating-ui-react/index.js";
 import { useAnchorPositioning } from "../../utils/useAnchorPositioning.js";
 import { usePreviewCardPortalContext } from "../portal/PreviewCardPortalContext.js";
-import { POPUP_COLLISION_AVOIDANCE } from "../../utils/constants.js";
+import { POPUP_COLLISION_AVOIDANCE } from "../../internals/constants.js";
 import { adaptiveOrigin } from "../../utils/adaptiveOriginMiddleware.js";
 import { usePositioner } from "../../utils/usePositioner.js";
+import { createInlineMiddleware } from "../../utils/popups/index.js";
 
 /**
  * Positions the popup against the trigger.
@@ -45,6 +47,7 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
   const instantType = store.useState('instantType');
   const transitionStatus = store.useState('transitionStatus');
   const hasViewport = store.useState('hasViewport');
+  const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
   const positioning = useAnchorPositioning({
     anchor,
     floatingRootContext,
@@ -62,8 +65,15 @@ export const PreviewCardPositioner = /*#__PURE__*/React.forwardRef(function Prev
     keepMounted,
     nodeId,
     collisionAvoidance,
-    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined
+    adaptiveOrigin: hasViewport ? adaptiveOrigin : undefined,
+    inline: createInlineMiddleware(inlineRectCoordsRef)
   });
+  const updatePosition = positioning.update;
+  useIsoLayoutEffect(() => {
+    if (open && mounted) {
+      updatePosition();
+    }
+  }, [open, mounted, updatePosition]);
   const state = {
     open,
     side: positioning.side,

package/esm/preview-card/root/PreviewCardRoot.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { type BaseUIChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { type BaseUIChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { PayloadChildRenderFunction } from "../../utils/popups/index.js";
 import { PreviewCardHandle } from "../store/PreviewCardHandle.js";
 /**
@@ -9,7 +9,7 @@ import { PreviewCardHandle } from "../store/PreviewCardHandle.js";
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export declare function PreviewCardRoot<Payload>(props: PreviewCardRoot.Props<Payload>): import("react/jsx-runtime").JSX.Element;
+export declare const PreviewCardRoot: <Payload>(props: PreviewCardRoot.Props<Payload>) => import("react/jsx-runtime").JSX.Element;
 export interface PreviewCardRootState {}
 export interface PreviewCardRootProps<Payload = unknown> {
   /**

package/esm/preview-card/root/PreviewCardRoot.js

@@ -1,15 +1,18 @@
 'use client';
 
 import * as React from 'react';
+import { fastComponent } from '@base-ui/utils/fastHooks';
+import { EMPTY_OBJECT } from '@base-ui/utils/empty';
 import { useIsoLayoutEffect } from '@base-ui/utils/useIsoLayoutEffect';
 import { useOnFirstRender } from '@base-ui/utils/useOnFirstRender';
-import { useDismiss, useInteractions, FloatingTree } from "../../floating-ui-react/index.js";
+import { useDismiss, FloatingTree } from "../../floating-ui-react/index.js";
 import { PreviewCardRootContext, usePreviewCardRootContext } from "./PreviewCardContext.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 import { PreviewCardStore } from "../store/PreviewCardStore.js";
-import { useImplicitActiveTrigger, useOpenStateTransitions } from "../../utils/popups/index.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { FOCUSABLE_POPUP_PROPS, useImplicitActiveTrigger, useOpenStateTransitions, usePopupInteractionProps } from "../../utils/popups/index.js";
+import { mergeProps } from "../../merge-props/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function PreviewCardRootComponent(props) {
   const {
     open: openProp,
@@ -43,13 +46,15 @@ function PreviewCardRootComponent(props) {
   store.useContextCallback('onOpenChange', onOpenChange);
   store.useContextCallback('onOpenChangeComplete', onOpenChangeComplete);
   const open = store.useState('open');
-  const floatingRootContext = store.select('floatingRootContext');
   const activeTriggerId = store.useState('activeTriggerId');
+  const mounted = store.useState('mounted');
   const payload = store.useState('payload');
   useImplicitActiveTrigger(store);
   const {
     forceUnmount
-  } = useOpenStateTransitions(open, store);
+  } = useOpenStateTransitions(open, store, () => {
+    store.context.inlineRectCoordsRef.current = undefined;
+  });
   useIsoLayoutEffect(() => {
     if (open) {
       if (activeTriggerId == null) {
@@ -58,32 +63,36 @@ function PreviewCardRootComponent(props) {
     }
   }, [store, activeTriggerId, open]);
   const handleImperativeClose = React.useCallback(() => {
-    store.setOpen(false, createPreviewCardEventDetails(store, REASONS.imperativeAction));
+    store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction));
   }, [store]);
   React.useImperativeHandle(actionsRef, () => ({
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
+  const shouldRenderInteractions = open || mounted;
+  return /*#__PURE__*/_jsxs(PreviewCardRootContext.Provider, {
+    value: store,
+    children: [shouldRenderInteractions && /*#__PURE__*/_jsx(PreviewCardInteractions, {
+      store: store
+    }), typeof children === 'function' ? children({
+      payload
+    }) : children]
+  });
+}
+function PreviewCardInteractions({
+  store
+}) {
+  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = useDismiss(floatingRootContext);
-  const {
-    getReferenceProps,
-    getTriggerProps,
-    getFloatingProps
-  } = useInteractions([dismiss]);
-  const activeTriggerProps = React.useMemo(() => getReferenceProps(), [getReferenceProps]);
-  const inactiveTriggerProps = React.useMemo(() => getTriggerProps(), [getTriggerProps]);
-  const popupProps = React.useMemo(() => getFloatingProps(), [getFloatingProps]);
-  store.useSyncedValues({
+  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 /*#__PURE__*/_jsx(PreviewCardRootContext.Provider, {
-    value: store,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
-  });
+  return null;
 }
 
 /**
@@ -92,7 +101,7 @@ function PreviewCardRootComponent(props) {
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-export function PreviewCardRoot(props) {
+export const PreviewCardRoot = fastComponent(function PreviewCardRoot(props) {
   if (usePreviewCardRootContext(true)) {
     return /*#__PURE__*/_jsx(PreviewCardRootComponent, {
       ...props
@@ -103,11 +112,5 @@ export function PreviewCardRoot(props) {
       ...props
     })
   });
-}
-function createPreviewCardEventDetails(store, reason) {
-  const details = createChangeEventDetails(reason);
-  details.preventUnmountOnClose = () => {
-    store.set('preventUnmountingOnClose', true);
-  };
-  return details;
-}
+});
+if (process.env.NODE_ENV !== "production") PreviewCardRoot.displayName = "PreviewCardRoot";

package/esm/preview-card/store/PreviewCardHandle.js

@@ -1,7 +1,7 @@
 import _formatErrorMessage from "@base-ui/utils/formatErrorMessage";
 import { PreviewCardStore } from "./PreviewCardStore.js";
-import { createChangeEventDetails } from "../../utils/createBaseUIEventDetails.js";
-import { REASONS } from "../../utils/reasons.js";
+import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.js";
+import { REASONS } from "../../internals/reasons.js";
 
 /**
  * A handle to control a preview card imperatively and to associate detached triggers with it.
@@ -43,7 +43,7 @@ export class PreviewCardHandle {
    * Indicates whether the preview card is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }