@base-ui/react 1.4.1 → 1.5.0

package/popover/store/PopoverStore.js

@@ -1,4 +1,6 @@
 "use strict";
+/* eslint-disable react-hooks/rules-of-hooks */
+'use client';
 
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
@@ -9,13 +11,9 @@ var React = _interopRequireWildcard(require("react"));
 var ReactDOM = _interopRequireWildcard(require("react-dom"));
 var _store = require("@base-ui/utils/store");
 var _useTimeout = require("@base-ui/utils/useTimeout");
-var _useRefWithInit = require("@base-ui/utils/useRefWithInit");
-var _useOnMount = require("@base-ui/utils/useOnMount");
 var _reasons = require("../../internals/reasons");
 var _popups = require("../../utils/popups");
 var _constants = require("../../internals/constants");
-/* eslint-disable react-hooks/rules-of-hooks */
-
 function createInitialState() {
   return {
     ...(0, _popups.createInitialPopupStoreState)(),
@@ -50,14 +48,16 @@ const selectors = {
   hasViewport: (0, _store.createSelector)(state => state.hasViewport)
 };
 class PopoverStore extends _store.ReactStore {
-  constructor(initialState) {
+  constructor(initialState, floatingId, nested = false) {
     const initial = {
       ...createInitialState(),
       ...initialState
     };
+    const triggerElements = new _popups.PopupTriggerMap();
     if (initial.open && initialState?.mounted === undefined) {
       initial.mounted = true;
     }
+    initial.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
     super(initial, {
       popupRef: /*#__PURE__*/React.createRef(),
       backdropRef: /*#__PURE__*/React.createRef(),
@@ -67,7 +67,7 @@ class PopoverStore extends _store.ReactStore {
       triggerFocusTargetRef: /*#__PURE__*/React.createRef(),
       beforeContentFocusGuardRef: /*#__PURE__*/React.createRef(),
       stickIfOpenTimeout: new _useTimeout.Timeout(),
-      triggerElements: new _popups.PopupTriggerMap()
+      triggerElements
     }, selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
@@ -77,6 +77,10 @@ class PopoverStore extends _store.ReactStore {
     eventDetails.preventUnmountOnClose = () => {
       this.set('preventUnmountingOnClose', true);
     };
+    const activeTriggerId = this.select('activeTriggerId');
+    if (!nextOpen && eventDetails.reason === _reasons.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;
@@ -87,14 +91,7 @@ class PopoverStore extends _store.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;
-      }
+      (0, _popups.setOpenTriggerState)(updatedState, nextOpen, eventDetails.trigger);
       this.update(updatedState);
     };
     if (isHover) {
@@ -117,11 +114,11 @@ class PopoverStore extends _store.ReactStore {
     }
   };
   static useStore(externalStore, initialState) {
-    const internalStore = (0, _useRefWithInit.useRefWithInit)(() => {
-      return new PopoverStore(initialState);
-    }).current;
-    const store = externalStore ?? internalStore;
-    (0, _useOnMount.useOnMount)(internalStore.disposeEffect);
+    const {
+      store,
+      internalStore
+    } = (0, _popups.usePopupStore)(externalStore, (floatingId, nested) => new PopoverStore(initialState, floatingId, nested));
+    React.useEffect(() => internalStore?.disposeEffect(), [internalStore]);
     return store;
   }
   disposeEffect = () => {

package/popover/title/PopoverTitle.js

@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PopoverTitle = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _PopoverRootContext = require("../root/PopoverRootContext");
 var _useRenderElement = require("../../internals/useRenderElement");
 var _useBaseUiId = require("../../internals/useBaseUiId");
@@ -28,12 +27,7 @@ const PopoverTitle = exports.PopoverTitle = /*#__PURE__*/React.forwardRef(functi
     store
   } = (0, _PopoverRootContext.usePopoverRootContext)();
   const id = (0, _useBaseUiId.useBaseUiId)(elementProps.id);
-  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
-    store.set('titleElementId', id);
-    return () => {
-      store.set('titleElementId', undefined);
-    };
-  }, [store, id]);
+  store.useSyncedValueWithCleanup('titleElementId', id);
   const element = (0, _useRenderElement.useRenderElement)('h2', componentProps, {
     ref: forwardedRef,
     props: [{

package/popover/trigger/PopoverTrigger.js

@@ -21,6 +21,7 @@ var _FocusGuard = require("../../utils/FocusGuard");
 var _reasons = require("../../internals/reasons");
 var _popups = require("../../utils/popups");
 var _useTriggerFocusGuards = require("../../utils/popups/useTriggerFocusGuards");
+var _useOpenInteractionType = require("../../utils/useOpenInteractionType");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * A button that opens the popover.
@@ -32,6 +33,7 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
   const {
     render,
     className,
+    style,
     disabled = false,
     nativeButton = true,
     handle,
@@ -40,7 +42,6 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
     delay = _constants2.OPEN_DELAY,
     closeDelay = 0,
     id: idProp,
-    style,
     ...elementProps
   } = componentProps;
   const rootContext = (0, _PopoverRootContext.usePopoverRootContext)(true);
@@ -52,6 +53,7 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
   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,
@@ -83,12 +85,10 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
     enabled: floatingContext != null,
     stickIfOpen
   });
-  const localProps = (0, _floatingUiReact.useInteractions)([click]);
+  const interactionTypeProps = (0, _useOpenInteractionType.useOpenMethodTriggerProps)(() => store.select('open'), interactionType => {
+    store.set('openMethod', interactionType);
+  });
   const rootTriggerProps = store.useState('triggerProps', isMountedByThisTrigger);
-  const state = {
-    disabled,
-    open: isOpenedByThisTrigger
-  };
   const {
     getButtonProps,
     buttonRef
@@ -96,33 +96,40 @@ const PopoverTrigger = exports.PopoverTrigger = /*#__PURE__*/React.forwardRef(fu
     disabled,
     native: nativeButton
   });
-  const stateAttributesMapping = React.useMemo(() => ({
+  const stateAttributesMapping = {
     open(value) {
       if (value && openReason === _reasons.REASONS.triggerPress) {
         return _popupStateMapping.pressableTriggerOpenStateMapping.open(value);
       }
       return _popupStateMapping.triggerOpenStateMapping.open(value);
     }
-  }), [openReason]);
+  };
+  const {
+    preFocusGuardRef,
+    handlePreFocusGuardFocus,
+    handleFocusTargetFocus
+  } = (0, _useTriggerFocusGuards.useTriggerFocusGuards)(store, triggerElementRef);
+  const state = {
+    disabled,
+    open: isOpenedByThisTrigger
+  };
   const element = (0, _useRenderElement.useRenderElement)('button', componentProps, {
     state,
     ref: [buttonRef, forwardedRef, registerTrigger, triggerElementRef],
-    props: [localProps.getReferenceProps(), hoverProps, rootTriggerProps, {
+    props: [click.reference, hoverProps, rootTriggerProps, interactionTypeProps, {
       [_constants.CLICK_TRIGGER_IDENTIFIER]: '',
-      id: thisTriggerId
+      id: thisTriggerId,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': isOpenedByThisTrigger,
+      'aria-controls': popupId
     }, elementProps, getButtonProps],
     stateAttributesMapping
   });
-  const {
-    preFocusGuardRef,
-    handlePreFocusGuardFocus,
-    handleFocusTargetFocus
-  } = (0, _useTriggerFocusGuards.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__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusGuard.FocusGuard, {
         ref: preFocusGuardRef,

package/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/popover/viewport/PopoverViewport.js

@@ -20,8 +20,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/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/popover/viewport/PopoverViewportDataAttributes.js

@@ -26,7 +26,7 @@ let PopoverViewportDataAttributes = exports.PopoverViewportDataAttributes = /*#_
   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/preview-card/positioner/PreviewCardPositioner.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PreviewCardPositioner = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _PreviewCardContext = require("../root/PreviewCardContext");
 var _PreviewCardPositionerContext = require("./PreviewCardPositionerContext");
 var _floatingUiReact = require("../../floating-ui-react");
@@ -15,6 +16,7 @@ var _PreviewCardPortalContext = require("../portal/PreviewCardPortalContext");
 var _constants = require("../../internals/constants");
 var _adaptiveOriginMiddleware = require("../../utils/adaptiveOriginMiddleware");
 var _usePositioner = require("../../utils/usePositioner");
+var _popups = require("../../utils/popups");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * Positions the popup against the trigger.
@@ -50,6 +52,7 @@ const PreviewCardPositioner = exports.PreviewCardPositioner = /*#__PURE__*/React
   const instantType = store.useState('instantType');
   const transitionStatus = store.useState('transitionStatus');
   const hasViewport = store.useState('hasViewport');
+  const inlineRectCoordsRef = store.context.inlineRectCoordsRef;
   const positioning = (0, _useAnchorPositioning.useAnchorPositioning)({
     anchor,
     floatingRootContext,
@@ -67,8 +70,15 @@ const PreviewCardPositioner = exports.PreviewCardPositioner = /*#__PURE__*/React
     keepMounted,
     nodeId,
     collisionAvoidance,
-    adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined
+    adaptiveOrigin: hasViewport ? _adaptiveOriginMiddleware.adaptiveOrigin : undefined,
+    inline: (0, _popups.createInlineMiddleware)(inlineRectCoordsRef)
   });
+  const updatePosition = positioning.update;
+  (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
+    if (open && mounted) {
+      updatePosition();
+    }
+  }, [open, mounted, updatePosition]);
   const state = {
     open,
     side: positioning.side,

package/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/preview-card/root/PreviewCardRoot.js

@@ -5,8 +5,10 @@ var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWild
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PreviewCardRoot = PreviewCardRoot;
+exports.PreviewCardRoot = void 0;
 var React = _interopRequireWildcard(require("react"));
+var _fastHooks = require("@base-ui/utils/fastHooks");
+var _empty = require("@base-ui/utils/empty");
 var _useIsoLayoutEffect = require("@base-ui/utils/useIsoLayoutEffect");
 var _useOnFirstRender = require("@base-ui/utils/useOnFirstRender");
 var _floatingUiReact = require("../../floating-ui-react");
@@ -15,6 +17,7 @@ var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetail
 var _reasons = require("../../internals/reasons");
 var _PreviewCardStore = require("../store/PreviewCardStore");
 var _popups = require("../../utils/popups");
+var _mergeProps = require("../../merge-props");
 var _jsxRuntime = require("react/jsx-runtime");
 function PreviewCardRootComponent(props) {
   const {
@@ -49,13 +52,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');
   (0, _popups.useImplicitActiveTrigger)(store);
   const {
     forceUnmount
-  } = (0, _popups.useOpenStateTransitions)(open, store);
+  } = (0, _popups.useOpenStateTransitions)(open, store, () => {
+    store.context.inlineRectCoordsRef.current = undefined;
+  });
   (0, _useIsoLayoutEffect.useIsoLayoutEffect)(() => {
     if (open) {
       if (activeTriggerId == null) {
@@ -70,26 +75,30 @@ function PreviewCardRootComponent(props) {
     unmount: forceUnmount,
     close: handleImperativeClose
   }), [forceUnmount, handleImperativeClose]);
+  const shouldRenderInteractions = open || mounted;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_PreviewCardContext.PreviewCardRootContext.Provider, {
+    value: store,
+    children: [shouldRenderInteractions && /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewCardInteractions, {
+      store: store
+    }), typeof children === 'function' ? children({
+      payload
+    }) : children]
+  });
+}
+function PreviewCardInteractions({
+  store
+}) {
+  const floatingRootContext = store.useState('floatingRootContext');
   const dismiss = (0, _floatingUiReact.useDismiss)(floatingRootContext);
-  const {
-    getReferenceProps,
-    getTriggerProps,
-    getFloatingProps
-  } = (0, _floatingUiReact.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.EMPTY_OBJECT;
+  const inactiveTriggerProps = dismiss.trigger ?? _empty.EMPTY_OBJECT;
+  const popupProps = React.useMemo(() => (0, _mergeProps.mergeProps)(_popups.FOCUSABLE_POPUP_PROPS, dismiss.floating), [dismiss.floating]);
+  (0, _popups.usePopupInteractionProps)(store, {
     activeTriggerProps,
     inactiveTriggerProps,
     popupProps
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PreviewCardContext.PreviewCardRootContext.Provider, {
-    value: store,
-    children: typeof children === 'function' ? children({
-      payload
-    }) : children
-  });
+  return null;
 }
 
 /**
@@ -98,7 +107,7 @@ function PreviewCardRootComponent(props) {
  *
  * Documentation: [Base UI Preview Card](https://base-ui.com/react/components/preview-card)
  */
-function PreviewCardRoot(props) {
+const PreviewCardRoot = exports.PreviewCardRoot = (0, _fastHooks.fastComponent)(function PreviewCardRoot(props) {
   if ((0, _PreviewCardContext.usePreviewCardRootContext)(true)) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(PreviewCardRootComponent, {
       ...props
@@ -109,4 +118,5 @@ function PreviewCardRoot(props) {
       ...props
     })
   });
-}
+});
+if (process.env.NODE_ENV !== "production") PreviewCardRoot.displayName = "PreviewCardRoot";

package/preview-card/store/PreviewCardHandle.js

@@ -50,7 +50,7 @@ class PreviewCardHandle {
    * Indicates whether the preview card is currently open.
    */
   get isOpen() {
-    return this.store.state.open;
+    return this.store.select('open');
   }
 }
 

package/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>;
 }