@base-ui/react 1.6.0 → 1.7.0

package/dialog/viewport/DialogViewport.js

@@ -8,26 +8,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.DialogViewport = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _useRenderElement = require("../../internals/useRenderElement");
-var _popupStateMapping = require("../../utils/popupStateMapping");
-var _stateAttributesMapping = require("../../internals/stateAttributesMapping");
 var _DialogRootContext = require("../root/DialogRootContext");
 var _DialogPortalContext = require("../portal/DialogPortalContext");
-var _DialogViewportDataAttributes = require("./DialogViewportDataAttributes");
-const stateAttributesMapping = {
-  ..._popupStateMapping.popupStateMapping,
-  ..._stateAttributesMapping.transitionStatusMapping,
-  nested(value) {
-    return value ? {
-      [_DialogViewportDataAttributes.DialogViewportDataAttributes.nested]: ''
-    } : null;
-  },
-  nestedDialogOpen(value) {
-    return value ? {
-      [_DialogViewportDataAttributes.DialogViewportDataAttributes.nestedDialogOpen]: ''
-    } : null;
-  }
-};
-
+var _stateAttributesMapping = require("../utils/stateAttributesMapping");
 /**
  * A positioning container for the dialog popup that can be made scrollable.
  * Renders a `<div>` element.
@@ -43,9 +26,7 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
     ...elementProps
   } = componentProps;
   const keepMounted = (0, _DialogPortalContext.useDialogPortalContext)();
-  const {
-    store
-  } = (0, _DialogRootContext.useDialogRootContext)();
+  const store = (0, _DialogRootContext.useDialogRootContext)();
   const open = store.useState('open');
   const nested = store.useState('nested');
   const transitionStatus = store.useState('transitionStatus');
@@ -64,7 +45,7 @@ const DialogViewport = exports.DialogViewport = /*#__PURE__*/React.forwardRef(fu
     enabled: shouldRender,
     state,
     ref: [forwardedRef, setViewportElement],
-    stateAttributesMapping,
+    stateAttributesMapping: _stateAttributesMapping.dialogStateAttributesMapping,
     props: [{
       role: 'presentation',
       hidden: !mounted,

package/dialog/viewport/DialogViewport.mjs

@@ -2,25 +2,9 @@
 
 import * as React from 'react';
 import { useRenderElement } from "../../internals/useRenderElement.mjs";
-import { popupStateMapping as baseMapping } from "../../utils/popupStateMapping.mjs";
-import { transitionStatusMapping } from "../../internals/stateAttributesMapping.mjs";
 import { useDialogRootContext } from "../root/DialogRootContext.mjs";
 import { useDialogPortalContext } from "../portal/DialogPortalContext.mjs";
-import { DialogViewportDataAttributes } from "./DialogViewportDataAttributes.mjs";
-const stateAttributesMapping = {
-  ...baseMapping,
-  ...transitionStatusMapping,
-  nested(value) {
-    return value ? {
-      [DialogViewportDataAttributes.nested]: ''
-    } : null;
-  },
-  nestedDialogOpen(value) {
-    return value ? {
-      [DialogViewportDataAttributes.nestedDialogOpen]: ''
-    } : null;
-  }
-};
+import { dialogStateAttributesMapping } from "../utils/stateAttributesMapping.mjs";
 
 /**
  * A positioning container for the dialog popup that can be made scrollable.
@@ -37,9 +21,7 @@ export const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewp
     ...elementProps
   } = componentProps;
   const keepMounted = useDialogPortalContext();
-  const {
-    store
-  } = useDialogRootContext();
+  const store = useDialogRootContext();
   const open = store.useState('open');
   const nested = store.useState('nested');
   const transitionStatus = store.useState('transitionStatus');
@@ -58,7 +40,7 @@ export const DialogViewport = /*#__PURE__*/React.forwardRef(function DialogViewp
     enabled: shouldRender,
     state,
     ref: [forwardedRef, setViewportElement],
-    stateAttributesMapping,
+    stateAttributesMapping: dialogStateAttributesMapping,
     props: [{
       role: 'presentation',
       hidden: !mounted,

package/dialog/viewport/DialogViewportDataAttributes.d.mts

@@ -8,7 +8,7 @@ export declare enum DialogViewportDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the dialog is animating in.
+   * Present when the dialog begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/dialog/viewport/DialogViewportDataAttributes.d.ts

@@ -8,7 +8,7 @@ export declare enum DialogViewportDataAttributes {
    */
   closed = "data-closed",
   /**
-   * Present when the dialog is animating in.
+   * Present when the dialog begins animating in.
    */
   startingStyle = "data-starting-style",
   /**

package/dialog/viewport/DialogViewportDataAttributes.js

@@ -15,7 +15,7 @@ let DialogViewportDataAttributes = exports.DialogViewportDataAttributes = functi
    */
   DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = _popupStateMapping.CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the dialog is animating in.
+   * Present when the dialog begins animating in.
    */
   DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = _popupStateMapping.CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/dialog/viewport/DialogViewportDataAttributes.mjs

@@ -9,7 +9,7 @@ export let DialogViewportDataAttributes = function (DialogViewportDataAttributes
    */
   DialogViewportDataAttributes[DialogViewportDataAttributes["closed"] = CommonPopupDataAttributes.closed] = "closed";
   /**
-   * Present when the dialog is animating in.
+   * Present when the dialog begins animating in.
    */
   DialogViewportDataAttributes[DialogViewportDataAttributes["startingStyle"] = CommonPopupDataAttributes.startingStyle] = "startingStyle";
   /**

package/docs/index.md

@@ -36,6 +36,7 @@ The Tailwind CSS examples are written for Tailwind CSS v4. If `package.json` use
 - [v1.4.1](./react/overview/releases/v1-4-1.md): v1.4.1 release notes. Apr 20, 2026.
 - [v1.5.0](./react/overview/releases/v1-5-0.md): v1.5.0 release notes. May 19, 2026.
 - [v1.6.0](./react/overview/releases/v1-6-0.md): v1.6.0 release notes. Jun 18, 2026.
+- [v1.7.0](./react/overview/releases/v1-7-0.md): v1.7.0 release notes. Aug 4, 2026.
 
 ## Handbook
 

package/docs/react/components/accordion.md

@@ -861,7 +861,7 @@ Renders a `<div>` element.
 | data-orientation    | -        | Indicates the orientation of the accordion.  |
 | data-disabled       | -        | Present when the accordion item is disabled. |
 | data-index          | `number` | Indicates the index of the accordion item.   |
-| data-starting-style | -        | Present when the panel is animating in.      |
+| data-starting-style | -        | Present when the panel begins animating in.  |
 | data-ending-style   | -        | Present when the panel is animating out.     |
 
 **Panel CSS Variables:**

package/docs/react/components/alert-dialog.md

@@ -765,6 +765,9 @@ For simple, one-off interactions, place the `<AlertDialog.Trigger>` inside `<Ale
 However, if defining the alert dialog's content next to its trigger is not practical, you can use a detached trigger.
 This involves placing the `<AlertDialog.Trigger>` outside of `<AlertDialog.Root>` and linking them with a `handle` created by the `AlertDialog.createHandle()` function.
 
+The imperative methods on the handle, such as `open()` and `openWithPayload()`, require an `<AlertDialog.Root>` using the same handle to be mounted.
+Calls made while no root is attached to the handle — before one mounts, or after it unmounts — are ignored. Each time a root mounts, it starts from fresh state: a call made while no root was attached is not replayed, and no open state carries over from a previous mount.
+
 ```jsx title="Detached triggers"
 const demoAlertDialog = AlertDialog.createHandle();
 
@@ -1642,12 +1645,12 @@ Renders a `<div>` element.
 
 **Backdrop Data Attributes:**
 
-| Attribute           | Type | Description                               |
-| :------------------ | :--- | :---------------------------------------- |
-| data-open           | -    | Present when the dialog is open.          |
-| data-closed         | -    | Present when the dialog is closed.        |
-| data-starting-style | -    | Present when the dialog is animating in.  |
-| data-ending-style   | -    | Present when the dialog is animating out. |
+| Attribute           | Type | Description                                  |
+| :------------------ | :--- | :------------------------------------------- |
+| data-open           | -    | Present when the dialog is open.             |
+| data-closed         | -    | Present when the dialog is closed.           |
+| data-starting-style | -    | Present when the dialog begins animating in. |
+| data-ending-style   | -    | Present when the dialog is animating out.    |
 
 ### Backdrop.Props
 
@@ -1687,7 +1690,7 @@ Renders a `<div>` element.
 | data-closed             | -    | Present when the dialog is closed.                               |
 | data-nested             | -    | Present when the dialog is nested within another dialog.         |
 | data-nested-dialog-open | -    | Present when the dialog has other open dialogs nested within it. |
-| data-starting-style     | -    | Present when the dialog is animating in.                         |
+| data-starting-style     | -    | Present when the dialog begins animating in.                     |
 | data-ending-style       | -    | Present when the dialog is animating out.                        |
 
 **Popup CSS Variables:**
@@ -1815,7 +1818,7 @@ Renders a `<div>` element.
 | data-closed             | -    | Present when the dialog is closed.                               |
 | data-nested             | -    | Present when the dialog is nested within another dialog.         |
 | data-nested-dialog-open | -    | Present when the dialog has other open dialogs nested within it. |
-| data-starting-style     | -    | Present when the dialog is animating in.                         |
+| data-starting-style     | -    | Present when the dialog begins animating in.                     |
 | data-ending-style       | -    | Present when the dialog is animating out.                        |
 
 ### Viewport.Props
@@ -1849,19 +1852,18 @@ type ReturnValue = AlertDialog.Handle<Payload>;
 
 ### Handle
 
-A handle to control an Alert Dialog imperatively and to associate detached triggers with it.
-
-**Constructor Parameters:**
+Controls an Alert Dialog imperatively and associates detached `AlertDialog.Trigger` components with
+an `AlertDialog.Root`. Create one with `AlertDialog.createHandle()` and pass it to the `handle`
+prop of the root and of any triggers rendered outside of it.
 
-| Parameter | Type                   | Default | Description                              |
-| :-------- | :--------------------- | :------ | :--------------------------------------- |
-| store?    | `DialogStore<Payload>` | -       | Internal store holding the dialog state. |
+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.
 
 **Properties:**
 
-| Property | Type      | Modifiers | Description                                     |
-| :------- | :-------- | :-------- | :---------------------------------------------- |
-| isOpen   | `boolean` | readonly  | Indicates whether the dialog is currently open. |
+| Property | Type      | Modifiers | Description                                                                                    |
+| :------- | :-------- | :-------- | :--------------------------------------------------------------------------------------------- |
+| isOpen   | `boolean` | readonly  | Whether the dialog is currently open. Returns `false` while no root is attached to the handle. |
 
 **Methods:**
 
@@ -1869,8 +1871,7 @@ A handle to control an Alert Dialog imperatively and to associate detached trigg
 function open(triggerId: string | null): void;
 ```
 
-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).
 
@@ -1878,8 +1879,9 @@ This method should only be called in an event handler or an effect (not during r
 function openWithPayload(payload: Payload): void;
 ```
 
-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.
+
+This method should only be called in an event handler or an effect (not during rendering).
 
 ```typescript
 function close(): void;
@@ -1887,6 +1889,8 @@ function close(): void;
 
 Closes the dialog.
 
+This method should only be called in an event handler or an effect (not during rendering).
+
 ## External Types
 
 ### PayloadChildRenderFunction