@base-ui/react 1.6.0 → 1.7.0

package/dialog/store/DialogHandle.js

@@ -8,60 +8,65 @@ exports.createDialogHandle = createDialogHandle;
 var _DialogStore = require("./DialogStore");
 var _createBaseUIEventDetails = require("../../internals/createBaseUIEventDetails");
 var _reasons = require("../../internals/reasons");
+var _popupHandle = require("../../utils/popups/popupHandle");
 /**
- * A handle to control a Dialog imperatively and to associate detached triggers with it.
+ * Controls a Dialog imperatively and associates detached `Dialog.Trigger` components with a
+ * `Dialog.Root`. Create one with `Dialog.createHandle()` and pass it to the `handle` prop of the
+ * root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
  */
-class DialogHandle {
-  /**
-   * Internal store holding the dialog state.
-   * @internal
-   */
-
-  constructor(store) {
-    this.store = store ?? new _DialogStore.DialogStore();
+class DialogHandle extends _popupHandle.BasePopupHandle {
+  constructor() {
+    super((0, _DialogStore.createNullDialogStore)(), 'Dialog', false);
   }
 
   /**
-   * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a matching Trigger component with this handle passed as a prop.
+   * Opens the dialog, optionally associating it with a trigger.
    *
    * This method should only be called in an event handler or an effect (not during rendering).
    *
-   * @param triggerId ID of the trigger to associate with the dialog. If null, the dialog will open without a trigger association.
+   * @param triggerId ID of the trigger to associate with the dialog. The trigger must be a matching
+   * `Dialog.Trigger` with this handle passed as a prop. Pass `null` to open without associating any trigger.
    */
   open(triggerId) {
-    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : undefined;
-    if (process.env.NODE_ENV !== 'production') {
-      if (triggerId && !triggerElement) {
-        console.warn(`Base UI: DialogHandle.open: No trigger found with id "${triggerId}". The dialog will open, but the trigger will not be associated with the dialog.`);
-      }
-    }
-    this.store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.imperativeAction, undefined, triggerElement));
+    this.openByTrigger(triggerId);
   }
 
   /**
-   * Opens the dialog and sets the payload.
-   * Does not associate the dialog with any trigger.
+   * Opens the dialog with the given payload, without associating it with any trigger.
    *
-   * @param payload Payload to set when opening the dialog.
+   * This method should only be called in an event handler or an effect (not during rendering).
+   *
+   * @param payload Payload to set when opening the dialog. It is exposed to the root's render-prop children.
    */
   openWithPayload(payload) {
-    this.store.set('payload', payload);
-    this.store.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.imperativeAction, undefined, undefined));
+    const attachedStore = this.attachedStore;
+    if (attachedStore === null) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('Base UI: DialogHandle.openWithPayload() was called while no root using this handle is mounted. ' + 'The call and its payload were ignored; mount a root with this handle before opening it imperatively.');
+      }
+      return;
+    }
+    attachedStore.set('payload', payload);
+    attachedStore.setOpen(true, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.imperativeAction));
   }
 
   /**
    * Closes the dialog.
+   *
+   * This method should only be called in an event handler or an effect (not during rendering).
    */
   close() {
-    this.store.setOpen(false, (0, _createBaseUIEventDetails.createChangeEventDetails)(_reasons.REASONS.imperativeAction, undefined, undefined));
+    this.closePopup();
   }
 
   /**
-   * Indicates whether the dialog is currently open.
+   * Whether the dialog is currently open. Returns `false` while no root is attached to the handle.
    */
   get isOpen() {
-    return this.store.select('open');
+    return this.attachedStore?.select('open') ?? false;
   }
 }
 

package/dialog/store/DialogHandle.mjs

@@ -1,61 +1,66 @@
-import { DialogStore } from "./DialogStore.mjs";
+import { createNullDialogStore } from "./DialogStore.mjs";
 import { createChangeEventDetails } from "../../internals/createBaseUIEventDetails.mjs";
 import { REASONS } from "../../internals/reasons.mjs";
+import { BasePopupHandle } from "../../utils/popups/popupHandle.mjs";
 
 /**
- * A handle to control a Dialog imperatively and to associate detached triggers with it.
+ * Controls a Dialog imperatively and associates detached `Dialog.Trigger` components with a
+ * `Dialog.Root`. Create one with `Dialog.createHandle()` and pass it to the `handle` prop of the
+ * root and of any triggers rendered outside of it.
+ *
+ * The imperative methods take effect only while a root using this handle is mounted; calls made
+ * before a root attaches (or after it unmounts) are ignored.
  */
-export class DialogHandle {
-  /**
-   * Internal store holding the dialog state.
-   * @internal
-   */
-
-  constructor(store) {
-    this.store = store ?? new DialogStore();
+export class DialogHandle extends BasePopupHandle {
+  constructor() {
+    super(createNullDialogStore(), 'Dialog', false);
   }
 
   /**
-   * Opens the dialog and associates it with the trigger with the given id.
-   * The trigger, if provided, must be a matching Trigger component with this handle passed as a prop.
+   * Opens the dialog, optionally associating it with a trigger.
    *
    * This method should only be called in an event handler or an effect (not during rendering).
    *
-   * @param triggerId ID of the trigger to associate with the dialog. If null, the dialog will open without a trigger association.
+   * @param triggerId ID of the trigger to associate with the dialog. The trigger must be a matching
+   * `Dialog.Trigger` with this handle passed as a prop. Pass `null` to open without associating any trigger.
    */
   open(triggerId) {
-    const triggerElement = triggerId ? this.store.context.triggerElements.getById(triggerId) : undefined;
-    if (process.env.NODE_ENV !== 'production') {
-      if (triggerId && !triggerElement) {
-        console.warn(`Base UI: DialogHandle.open: No trigger found with id "${triggerId}". The dialog will open, but the trigger will not be associated with the dialog.`);
-      }
-    }
-    this.store.setOpen(true, createChangeEventDetails(REASONS.imperativeAction, undefined, triggerElement));
+    this.openByTrigger(triggerId);
   }
 
   /**
-   * Opens the dialog and sets the payload.
-   * Does not associate the dialog with any trigger.
+   * Opens the dialog with the given payload, without associating it with any trigger.
    *
-   * @param payload Payload to set when opening the dialog.
+   * This method should only be called in an event handler or an effect (not during rendering).
+   *
+   * @param payload Payload to set when opening the dialog. It is exposed to the root's render-prop children.
    */
   openWithPayload(payload) {
-    this.store.set('payload', payload);
-    this.store.setOpen(true, createChangeEventDetails(REASONS.imperativeAction, undefined, undefined));
+    const attachedStore = this.attachedStore;
+    if (attachedStore === null) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn('Base UI: DialogHandle.openWithPayload() was called while no root using this handle is mounted. ' + 'The call and its payload were ignored; mount a root with this handle before opening it imperatively.');
+      }
+      return;
+    }
+    attachedStore.set('payload', payload);
+    attachedStore.setOpen(true, createChangeEventDetails(REASONS.imperativeAction));
   }
 
   /**
    * Closes the dialog.
+   *
+   * This method should only be called in an event handler or an effect (not during rendering).
    */
   close() {
-    this.store.setOpen(false, createChangeEventDetails(REASONS.imperativeAction, undefined, undefined));
+    this.closePopup();
   }
 
   /**
-   * Indicates whether the dialog is currently open.
+   * Whether the dialog is currently open. Returns `false` while no root is attached to the handle.
    */
   get isOpen() {
-    return this.store.select('open');
+    return this.attachedStore?.select('open') ?? false;
   }
 }
 

package/dialog/store/DialogStore.d.mts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import { type DialogRoot } from "../root/DialogRoot.mjs";
-import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.mjs";
+import { PopupStoreContext, PopupTriggerDataStore, PopupStoreState } from "../../utils/popups/index.mjs";
 export type State<Payload> = PopupStoreState<Payload> & {
   modal: boolean | 'trap-focus';
   disablePointerDismissal: boolean;
@@ -21,7 +21,6 @@ type Context = PopupStoreContext<DialogRoot.ChangeEventDetails> & {
   readonly internalBackdropRef: React.RefObject<HTMLDivElement | null>;
   readonly outsidePressEnabledRef: React.MutableRefObject<boolean>;
   readonly onNestedDialogOpen?: ((dialogCount: number, drawerCount: number) => void) | undefined;
-  readonly onNestedDialogClose?: (() => void) | undefined;
 };
 declare const selectors: {
   open: (state: {
@@ -377,9 +376,20 @@ declare const selectors: {
   viewportElement: (state: State<unknown>) => HTMLElement | null;
   role: (state: State<unknown>) => "alertdialog" | "dialog";
 };
+/**
+ * The subset of `DialogStore` that detached handle-backed triggers rely on. Both the real
+ * `DialogStore` and the inert fallback store satisfy it, so a trigger can read from whichever
+ * store the handle currently exposes.
+ */
+export type DialogHandleStore<Payload> = PopupTriggerDataStore<State<Payload>>;
 export declare class DialogStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
-  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
+  constructor(initialState: Partial<State<Payload>> | undefined, floatingId: string | undefined, nested: boolean);
   setOpen: (nextOpen: boolean, eventDetails: Omit<DialogRoot.ChangeEventDetails, 'preventUnmountOnClose'>) => void;
-  static useStore<Payload>(externalStore: DialogStore<Payload> | undefined, initialState?: Partial<State<Payload>>): DialogStore<Payload>;
 }
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no
+ * `Dialog.Root` is attached. It preserves a dialog-specific trigger registry in context so
+ * detached triggers can register before migrating to the live root store.
+ */
+export declare function createNullDialogStore<Payload>(): DialogHandleStore<Payload>;
 export {};

package/dialog/store/DialogStore.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { ReactStore } from '@base-ui/utils/store';
 import { type InteractionType } from '@base-ui/utils/useEnhancedClickHandler';
 import { type DialogRoot } from "../root/DialogRoot.js";
-import { PopupStoreContext, PopupStoreState } from "../../utils/popups/index.js";
+import { PopupStoreContext, PopupTriggerDataStore, PopupStoreState } from "../../utils/popups/index.js";
 export type State<Payload> = PopupStoreState<Payload> & {
   modal: boolean | 'trap-focus';
   disablePointerDismissal: boolean;
@@ -21,7 +21,6 @@ type Context = PopupStoreContext<DialogRoot.ChangeEventDetails> & {
   readonly internalBackdropRef: React.RefObject<HTMLDivElement | null>;
   readonly outsidePressEnabledRef: React.MutableRefObject<boolean>;
   readonly onNestedDialogOpen?: ((dialogCount: number, drawerCount: number) => void) | undefined;
-  readonly onNestedDialogClose?: (() => void) | undefined;
 };
 declare const selectors: {
   open: (state: {
@@ -377,9 +376,20 @@ declare const selectors: {
   viewportElement: (state: State<unknown>) => HTMLElement | null;
   role: (state: State<unknown>) => "alertdialog" | "dialog";
 };
+/**
+ * The subset of `DialogStore` that detached handle-backed triggers rely on. Both the real
+ * `DialogStore` and the inert fallback store satisfy it, so a trigger can read from whichever
+ * store the handle currently exposes.
+ */
+export type DialogHandleStore<Payload> = PopupTriggerDataStore<State<Payload>>;
 export declare class DialogStore<Payload> extends ReactStore<Readonly<State<Payload>>, Context, typeof selectors> {
-  constructor(initialState?: Partial<State<Payload>>, floatingId?: string | undefined, nested?: boolean);
+  constructor(initialState: Partial<State<Payload>> | undefined, floatingId: string | undefined, nested: boolean);
   setOpen: (nextOpen: boolean, eventDetails: Omit<DialogRoot.ChangeEventDetails, 'preventUnmountOnClose'>) => void;
-  static useStore<Payload>(externalStore: DialogStore<Payload> | undefined, initialState?: Partial<State<Payload>>): DialogStore<Payload>;
 }
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no
+ * `Dialog.Root` is attached. It preserves a dialog-specific trigger registry in context so
+ * detached triggers can register before migrating to the live root store.
+ */
+export declare function createNullDialogStore<Payload>(): DialogHandleStore<Payload>;
 export {};

package/dialog/store/DialogStore.js

@@ -5,38 +5,36 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.DialogStore = void 0;
+exports.createNullDialogStore = createNullDialogStore;
 var React = _interopRequireWildcard(require("react"));
 var _store = require("@base-ui/utils/store");
+var _NullStore = require("../../utils/NullStore");
 var _popups = require("../../utils/popups");
 const selectors = {
   ..._popups.popupStoreSelectors,
-  modal: (0, _store.createSelector)(state => state.modal),
-  nested: (0, _store.createSelector)(state => state.nested),
-  nestedOpenDialogCount: (0, _store.createSelector)(state => state.nestedOpenDialogCount),
-  nestedOpenDrawerCount: (0, _store.createSelector)(state => state.nestedOpenDrawerCount),
-  disablePointerDismissal: (0, _store.createSelector)(state => state.disablePointerDismissal),
-  openMethod: (0, _store.createSelector)(state => state.openMethod),
-  descriptionElementId: (0, _store.createSelector)(state => state.descriptionElementId),
-  titleElementId: (0, _store.createSelector)(state => state.titleElementId),
-  viewportElement: (0, _store.createSelector)(state => state.viewportElement),
-  role: (0, _store.createSelector)(state => state.role)
+  modal: state => state.modal,
+  nested: state => state.nested,
+  nestedOpenDialogCount: state => state.nestedOpenDialogCount,
+  nestedOpenDrawerCount: state => state.nestedOpenDrawerCount,
+  disablePointerDismissal: state => state.disablePointerDismissal,
+  openMethod: state => state.openMethod,
+  descriptionElementId: state => state.descriptionElementId,
+  titleElementId: state => state.titleElementId,
+  viewportElement: state => state.viewportElement,
+  role: state => state.role
 };
+
+/**
+ * The subset of `DialogStore` that detached handle-backed triggers rely on. Both the real
+ * `DialogStore` and the inert fallback store satisfy it, so a trigger can read from whichever
+ * store the handle currently exposes.
+ */
+
 class DialogStore extends _store.ReactStore {
-  constructor(initialState, floatingId, nested = false) {
+  constructor(initialState, floatingId, nested) {
     const triggerElements = new _popups.PopupTriggerMap();
-    const state = createInitialState(initialState);
-    state.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
-    super(state, {
-      popupRef: /*#__PURE__*/React.createRef(),
-      backdropRef: /*#__PURE__*/React.createRef(),
-      internalBackdropRef: /*#__PURE__*/React.createRef(),
-      outsidePressEnabledRef: {
-        current: true
-      },
-      triggerElements,
-      onOpenChange: undefined,
-      onOpenChangeComplete: undefined
-    }, selectors);
+    const state = createInitialState(initialState, triggerElements, floatingId, nested);
+    super(state, createInitialContext(triggerElements), selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
     eventDetails.preventUnmountOnClose = () => {
@@ -58,21 +56,23 @@ class DialogStore extends _store.ReactStore {
     (0, _popups.setPopupOpenState)(updatedState, nextOpen, eventDetails.trigger);
     this.update(updatedState);
   };
-  static useStore(externalStore, initialState) {
-    /* eslint-disable react-hooks/rules-of-hooks */
-    const store = (0, _popups.usePopupStore)(externalStore, (floatingId, nested) => new DialogStore(initialState, floatingId, nested), true).store;
-    /* eslint-enable react-hooks/rules-of-hooks */
-
-    return store;
-  }
 }
+
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no
+ * `Dialog.Root` is attached. It preserves a dialog-specific trigger registry in context so
+ * detached triggers can register before migrating to the live root store.
+ */
 exports.DialogStore = DialogStore;
-function createInitialState(initialState = {}) {
-  return {
+function createNullDialogStore() {
+  const triggerElements = new _popups.PopupTriggerMap();
+  return new _NullStore.NullStore(Object.freeze(createInitialState(undefined, triggerElements)), Object.freeze(createInitialContext(triggerElements)), selectors);
+}
+function createInitialState(initialState, triggerElements, floatingId, nested = false) {
+  const state = {
     ...(0, _popups.createInitialPopupStoreState)(),
     modal: true,
     disablePointerDismissal: false,
-    popupElement: null,
     viewportElement: null,
     descriptionElementId: undefined,
     titleElementId: undefined,
@@ -83,4 +83,19 @@ function createInitialState(initialState = {}) {
     role: 'dialog',
     ...initialState
   };
+  state.floatingRootContext = (0, _popups.createPopupFloatingRootContext)(triggerElements, floatingId, nested);
+  return state;
+}
+function createInitialContext(triggerElements) {
+  return {
+    popupRef: /*#__PURE__*/React.createRef(),
+    backdropRef: /*#__PURE__*/React.createRef(),
+    internalBackdropRef: /*#__PURE__*/React.createRef(),
+    outsidePressEnabledRef: {
+      current: true
+    },
+    triggerElements,
+    onOpenChange: undefined,
+    onOpenChangeComplete: undefined
+  };
 }

package/dialog/store/DialogStore.mjs

@@ -1,35 +1,32 @@
 import * as React from 'react';
-import { createSelector, ReactStore } from '@base-ui/utils/store';
-import { createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setPopupOpenState, usePopupStore } from "../../utils/popups/index.mjs";
+import { ReactStore } from '@base-ui/utils/store';
+import { NullStore } from "../../utils/NullStore.mjs";
+import { createPopupFloatingRootContext, createInitialPopupStoreState, popupStoreSelectors, PopupTriggerMap, setPopupOpenState } from "../../utils/popups/index.mjs";
 const selectors = {
   ...popupStoreSelectors,
-  modal: createSelector(state => state.modal),
-  nested: createSelector(state => state.nested),
-  nestedOpenDialogCount: createSelector(state => state.nestedOpenDialogCount),
-  nestedOpenDrawerCount: createSelector(state => state.nestedOpenDrawerCount),
-  disablePointerDismissal: createSelector(state => state.disablePointerDismissal),
-  openMethod: createSelector(state => state.openMethod),
-  descriptionElementId: createSelector(state => state.descriptionElementId),
-  titleElementId: createSelector(state => state.titleElementId),
-  viewportElement: createSelector(state => state.viewportElement),
-  role: createSelector(state => state.role)
+  modal: state => state.modal,
+  nested: state => state.nested,
+  nestedOpenDialogCount: state => state.nestedOpenDialogCount,
+  nestedOpenDrawerCount: state => state.nestedOpenDrawerCount,
+  disablePointerDismissal: state => state.disablePointerDismissal,
+  openMethod: state => state.openMethod,
+  descriptionElementId: state => state.descriptionElementId,
+  titleElementId: state => state.titleElementId,
+  viewportElement: state => state.viewportElement,
+  role: state => state.role
 };
+
+/**
+ * The subset of `DialogStore` that detached handle-backed triggers rely on. Both the real
+ * `DialogStore` and the inert fallback store satisfy it, so a trigger can read from whichever
+ * store the handle currently exposes.
+ */
+
 export class DialogStore extends ReactStore {
-  constructor(initialState, floatingId, nested = false) {
+  constructor(initialState, floatingId, nested) {
     const triggerElements = new PopupTriggerMap();
-    const state = createInitialState(initialState);
-    state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
-    super(state, {
-      popupRef: /*#__PURE__*/React.createRef(),
-      backdropRef: /*#__PURE__*/React.createRef(),
-      internalBackdropRef: /*#__PURE__*/React.createRef(),
-      outsidePressEnabledRef: {
-        current: true
-      },
-      triggerElements,
-      onOpenChange: undefined,
-      onOpenChangeComplete: undefined
-    }, selectors);
+    const state = createInitialState(initialState, triggerElements, floatingId, nested);
+    super(state, createInitialContext(triggerElements), selectors);
   }
   setOpen = (nextOpen, eventDetails) => {
     eventDetails.preventUnmountOnClose = () => {
@@ -51,20 +48,22 @@ export class DialogStore extends ReactStore {
     setPopupOpenState(updatedState, nextOpen, eventDetails.trigger);
     this.update(updatedState);
   };
-  static useStore(externalStore, initialState) {
-    /* eslint-disable react-hooks/rules-of-hooks */
-    const store = usePopupStore(externalStore, (floatingId, nested) => new DialogStore(initialState, floatingId, nested), true).store;
-    /* eslint-enable react-hooks/rules-of-hooks */
+}
 
-    return store;
-  }
+/**
+ * Creates the inert fallback store used by detached handle-backed triggers while no
+ * `Dialog.Root` is attached. It preserves a dialog-specific trigger registry in context so
+ * detached triggers can register before migrating to the live root store.
+ */
+export function createNullDialogStore() {
+  const triggerElements = new PopupTriggerMap();
+  return new NullStore(Object.freeze(createInitialState(undefined, triggerElements)), Object.freeze(createInitialContext(triggerElements)), selectors);
 }
-function createInitialState(initialState = {}) {
-  return {
+function createInitialState(initialState, triggerElements, floatingId, nested = false) {
+  const state = {
     ...createInitialPopupStoreState(),
     modal: true,
     disablePointerDismissal: false,
-    popupElement: null,
     viewportElement: null,
     descriptionElementId: undefined,
     titleElementId: undefined,
@@ -75,4 +74,19 @@ function createInitialState(initialState = {}) {
     role: 'dialog',
     ...initialState
   };
+  state.floatingRootContext = createPopupFloatingRootContext(triggerElements, floatingId, nested);
+  return state;
+}
+function createInitialContext(triggerElements) {
+  return {
+    popupRef: /*#__PURE__*/React.createRef(),
+    backdropRef: /*#__PURE__*/React.createRef(),
+    internalBackdropRef: /*#__PURE__*/React.createRef(),
+    outsidePressEnabledRef: {
+      current: true
+    },
+    triggerElements,
+    onOpenChange: undefined,
+    onOpenChangeComplete: undefined
+  };
 }

package/dialog/title/DialogTitle.js

@@ -24,9 +24,7 @@ const DialogTitle = exports.DialogTitle = /*#__PURE__*/React.forwardRef(function
     id: idProp,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = (0, _DialogRootContext.useDialogRootContext)();
+  const store = (0, _DialogRootContext.useDialogRootContext)();
   const id = (0, _useBaseUiId.useBaseUiId)(idProp);
   store.useSyncedValueWithCleanup('titleElementId', id);
   return (0, _useRenderElement.useRenderElement)('h2', componentProps, {

package/dialog/title/DialogTitle.mjs

@@ -18,9 +18,7 @@ export const DialogTitle = /*#__PURE__*/React.forwardRef(function DialogTitle(co
     id: idProp,
     ...elementProps
   } = componentProps;
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const id = useBaseUiId(idProp);
   store.useSyncedValueWithCleanup('titleElementId', id);
   return useRenderElement('h2', componentProps, {

package/dialog/trigger/DialogTrigger.js

@@ -36,8 +36,9 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
     handle,
     ...elementProps
   } = componentProps;
-  const dialogRootContext = (0, _DialogRootContext.useDialogRootContext)(true);
-  const store = handle?.store ?? dialogRootContext?.store;
+  const dialogRootStore = (0, _DialogRootContext.useDialogRootContext)(true);
+  const handleStore = (0, _popups.usePopupHandleStore)(handle);
+  const store = handleStore ?? dialogRootStore;
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : (0, _formatErrorMessage2.default)(79));
   }
@@ -59,9 +60,7 @@ const DialogTrigger = exports.DialogTrigger = /*#__PURE__*/React.forwardRef(func
     disabled,
     native: nativeButton
   });
-  const click = (0, _floatingUiReact.useClick)(floatingContext, {
-    enabled: floatingContext != null
-  });
+  const click = (0, _floatingUiReact.useClick)(floatingContext);
   const interactionTypeProps = (0, _useOpenInteractionType.useOpenMethodTriggerProps)(() => store.select('open'), interactionType => {
     store.set('openMethod', interactionType);
   });

package/dialog/trigger/DialogTrigger.mjs

@@ -7,7 +7,7 @@ import { useButton } from "../../internals/use-button/useButton.mjs";
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
 import { triggerOpenStateMapping } from "../../utils/popupStateMapping.mjs";
 import { CLICK_TRIGGER_IDENTIFIER } from "../../internals/constants.mjs";
-import { useTriggerDataForwarding } from "../../utils/popups/index.mjs";
+import { usePopupHandleStore, useTriggerDataForwarding } from "../../utils/popups/index.mjs";
 import { useBaseUiId } from "../../internals/useBaseUiId.mjs";
 import { useClick } from "../../floating-ui-react/index.mjs";
 import { useOpenMethodTriggerProps } from "../../utils/useOpenInteractionType.mjs";
@@ -30,8 +30,9 @@ export const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigge
     handle,
     ...elementProps
   } = componentProps;
-  const dialogRootContext = useDialogRootContext(true);
-  const store = handle?.store ?? dialogRootContext?.store;
+  const dialogRootStore = useDialogRootContext(true);
+  const handleStore = usePopupHandleStore(handle);
+  const store = handleStore ?? dialogRootStore;
   if (!store) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'Base UI: <Dialog.Trigger> must be used within <Dialog.Root> or provided with a handle.' : _formatErrorMessage(79));
   }
@@ -53,9 +54,7 @@ export const DialogTrigger = /*#__PURE__*/React.forwardRef(function DialogTrigge
     disabled,
     native: nativeButton
   });
-  const click = useClick(floatingContext, {
-    enabled: floatingContext != null
-  });
+  const click = useClick(floatingContext);
   const interactionTypeProps = useOpenMethodTriggerProps(() => store.select('open'), interactionType => {
     store.set('openMethod', interactionType);
   });

package/dialog/utils/stateAttributesMapping.d.mts

@@ -0,0 +1,12 @@
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.mjs";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.mjs";
+/**
+ * Shared by `Dialog.Popup` and `Dialog.Viewport`, whose states have the same shape.
+ * `nested` is not mapped: unmapped `true` booleans already render as `data-nested`.
+ */
+export declare const dialogStateAttributesMapping: StateAttributesMapping<{
+  open: boolean;
+  transitionStatus: TransitionStatus;
+  nested: boolean;
+  nestedDialogOpen: boolean;
+}>;

package/dialog/utils/stateAttributesMapping.d.ts

@@ -0,0 +1,12 @@
+import type { StateAttributesMapping } from "../../internals/getStateAttributesProps.js";
+import type { TransitionStatus } from "../../internals/useTransitionStatus.js";
+/**
+ * Shared by `Dialog.Popup` and `Dialog.Viewport`, whose states have the same shape.
+ * `nested` is not mapped: unmapped `true` booleans already render as `data-nested`.
+ */
+export declare const dialogStateAttributesMapping: StateAttributesMapping<{
+  open: boolean;
+  transitionStatus: TransitionStatus;
+  nested: boolean;
+  nestedDialogOpen: boolean;
+}>;

package/dialog/utils/stateAttributesMapping.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.dialogStateAttributesMapping = void 0;
+var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
+var _popupStateMapping = require("../../utils/popupStateMapping");
+/**
+ * Shared by `Dialog.Popup` and `Dialog.Viewport`, whose states have the same shape.
+ * `nested` is not mapped: unmapped `true` booleans already render as `data-nested`.
+ */
+const dialogStateAttributesMapping = exports.dialogStateAttributesMapping = {
+  ..._popupStateMapping.popupStateMapping,
+  ..._stateAttributesMapping.transitionStatusMapping,
+  nestedDialogOpen(value) {
+    return value ? {
+      'data-nested-dialog-open': ''
+    } : null;
+  }
+};

package/dialog/utils/stateAttributesMapping.mjs

@@ -0,0 +1,15 @@
+import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
+import { popupStateMapping } from "../../utils/popupStateMapping.mjs";
+/**
+ * Shared by `Dialog.Popup` and `Dialog.Viewport`, whose states have the same shape.
+ * `nested` is not mapped: unmapped `true` booleans already render as `data-nested`.
+ */
+export const dialogStateAttributesMapping = {
+  ...popupStateMapping,
+  ...transitionStatusMapping,
+  nestedDialogOpen(value) {
+    return value ? {
+      'data-nested-dialog-open': ''
+    } : null;
+  }
+};