@base-ui/react 1.4.1 → 1.5.0

package/esm/popover/trigger/PopoverTrigger.js

@@ -7,13 +7,14 @@ import { useButton } from "../../internals/use-button/useButton.js";
 import { triggerOpenStateMapping, pressableTriggerOpenStateMapping } from "../../utils/popupStateMapping.js";
 import { useRenderElement } from "../../internals/useRenderElement.js";
 import { CLICK_TRIGGER_IDENTIFIER } from "../../internals/constants.js";
-import { safePolygon, useClick, useHoverReferenceInteraction, useInteractions } from "../../floating-ui-react/index.js";
+import { safePolygon, useClick, useHoverReferenceInteraction } from "../../floating-ui-react/index.js";
 import { OPEN_DELAY } from "../utils/constants.js";
 import { useBaseUiId } from "../../internals/useBaseUiId.js";
 import { FocusGuard } from "../../utils/FocusGuard.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

@@ -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 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

@@ -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/positioner/PreviewCardPositioner.js

@@ -1,6 +1,7 @@
 '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";
@@ -9,6 +10,7 @@ import { usePreviewCardPortalContext } from "../portal/PreviewCardPortalContext.
 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

@@ -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 "../../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) {
@@ -64,26 +69,30 @@ function PreviewCardRootComponent(props) {
     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,4 +112,5 @@ export function PreviewCardRoot(props) {
       ...props
     })
   });
-}
+});
+if (process.env.NODE_ENV !== "production") PreviewCardRoot.displayName = "PreviewCardRoot";

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

@@ -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');
   }
 }
 

package/esm/preview-card/store/PreviewCardStore.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
-import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js";
+import { InlineRectCoords, PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js";
 import { type PreviewCardRoot } from "../root/PreviewCardRoot.js";
 export type State<Payload> = PopupStoreState<Payload> & {
   instantType: 'dismiss' | 'focus' | undefined;
@@ -8,6 +8,7 @@ export type State<Payload> = PopupStoreState<Payload> & {
 };
 export type Context = PopupStoreContext<PreviewCardRoot.ChangeEventDetails> & {
   closeDelayRef: React.RefObject<number>;
+  inlineRectCoordsRef: React.MutableRefObject<InlineRectCoords | undefined>;
 };
 declare const selectors: {
   instantType: (state: State<unknown>) => "focus" | "dismiss" | undefined;
@@ -18,6 +19,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;
@@ -35,6 +38,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;
@@ -52,6 +57,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;
@@ -69,6 +76,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,12 +89,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;
@@ -103,6 +133,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;
@@ -120,6 +152,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;
@@ -137,6 +171,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,12 +184,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;
@@ -171,6 +228,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;
@@ -188,6 +247,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;
@@ -205,6 +266,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,12 +279,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;
@@ -239,6 +323,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;
@@ -256,6 +342,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;
@@ -269,7 +357,7 @@ declare const selectors: {
   }) => HTMLElement | null;
 };
 export declare class PreviewCardStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
-  constructor(initialState?: Partial<State<Payload>>);
+  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
   setOpen: (nextOpen: boolean, eventDetails: Omit<PreviewCardRoot.ChangeEventDetails, "preventUnmountOnClose">) => void;
   static useStore<Payload>(externalStore: PreviewCardStore<Payload> | undefined, initialState?: Partial<State<Payload>>): PreviewCardStore<Payload>;
 }

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

@@ -1,9 +1,7 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { createSelector, ReactStore } from '@base-ui/utils/store';
-import { useRefWithInit } from '@base-ui/utils/useRefWithInit';
-import { createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap } from "../../utils/popups/index.js";
-import { useSyncedFloatingRootContext } from "../../floating-ui-react/index.js";
+import { createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setOpenTriggerState, updateInlineRectCoords, usePopupStore } from "../../utils/popups/index.js";
 import { REASONS } from "../../internals/reasons.js";
 import { CLOSE_DELAY } from "../utils/constants.js";
 const selectors = {
@@ -12,17 +10,23 @@ const selectors = {
   hasViewport: createSelector(state => state.hasViewport)
 };
 export class PreviewCardStore extends ReactStore {
-  constructor(initialState) {
-    super({
+  constructor(initialState, floatingId, nested = false) {
+    const triggerElements = new PopupTriggerMap();
+    const state = {
       ...createInitialState(),
       ...initialState
-    }, {
+    };
+    state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+    super(state, {
       popupRef: /*#__PURE__*/React.createRef(),
       onOpenChange: undefined,
       onOpenChangeComplete: undefined,
-      triggerElements: new PopupTriggerMap(),
+      triggerElements,
       closeDelayRef: {
         current: CLOSE_DELAY
+      },
+      inlineRectCoordsRef: {
+        current: undefined
       }
     }, selectors);
   }
@@ -38,6 +42,10 @@ export class PreviewCardStore extends ReactStore {
     if (eventDetails.isCanceled) {
       return;
     }
+    const event = eventDetails.event;
+    if (nextOpen && isHover && eventDetails.trigger && 'clientX' in event && 'clientY' in event && this.context.inlineRectCoordsRef.current?.element !== eventDetails.trigger) {
+      updateInlineRectCoords(this.context.inlineRectCoordsRef, eventDetails.trigger, event.clientX, event.clientY);
+    }
     this.state.floatingRootContext.dispatchOpenChange(nextOpen, eventDetails);
     const changeState = () => {
       const updatedState = {
@@ -50,14 +58,7 @@ export class PreviewCardStore extends ReactStore {
       } else if (reason === REASONS.triggerHover) {
         updatedState.instantType = undefined;
       }
-
-      // 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) {
@@ -69,23 +70,10 @@ export class PreviewCardStore extends ReactStore {
     }
   };
   static useStore(externalStore, initialState) {
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const internalStore = useRefWithInit(() => {
-      return new PreviewCardStore(initialState);
-    }).current;
-    const store = externalStore ?? internalStore;
-
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const floatingRootContext = useSyncedFloatingRootContext({
-      popupStore: store,
-      onOpenChange: store.setOpen
-    });
+    /* eslint-disable react-hooks/rules-of-hooks */
+    const store = usePopupStore(externalStore, (floatingId, nested) => new PreviewCardStore(initialState, floatingId, nested)).store;
+    /* eslint-enable react-hooks/rules-of-hooks */
 
-    // It's safe to set this here because when this code runs for the first time,
-    // nothing has had a chance to subscribe to the `store` yet.
-    // For subsequent renders, the `floatingRootContext` reference remains the same,
-    // so it's basically a no-op.
-    store.state.floatingRootContext = floatingRootContext;
     return store;
   }
 }