@cube-dev/ui-kit 0.203.0 → 0.204.0

package/dist/utils/warnings.js

@@ -1,4 +1,4 @@
-/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 import { isDevEnvOrTest } from "./is-dev-env.js";
 //#region src/utils/warnings.ts
 const SUGGESTED_PROP_MAP = {

package/dist/version.js

@@ -1,6 +1,6 @@
-/** @license MIT | @cube-dev/ui-kit v0.203.0 | Cube Dev Team */
+/** @license MIT | @cube-dev/ui-kit v0.204.0 | Cube Dev Team */
 //#region src/version.ts
-const VERSION = "0.203.0";
+const VERSION = "0.204.0";
 const TASTY_VERSION = "3.15.0";
 if (typeof window !== "undefined") {
 	const version = VERSION;

package/docs/components/overlays/Dialog.md

@@ -21,7 +21,7 @@ Dialogs are windows containing contextual information, tasks, or workflows that
 - **`styles`** — Custom styles for the dialog root
 - **`closeButtonStyles`** — Custom styles for the close button
 - **`isDismissable`** `boolean` (default: from its `DialogTrigger` or `DialogContainer`) — Whether the dialog shows its close button. Inside a `DialogTrigger` or `DialogContainer` it takes their `isDismissable` (default `true`), except in a popover. A popover or a standalone dialog shows no close button unless you set this prop. `Escape` and outside presses follow the trigger's or container's `isDismissable`, not this one
-- **`onDismiss`** `function` — Callback fired when the dialog is dismissed
+- **`onDismiss`** `function` — Callback fired when the dialog is dismissed. The close button calls it, after "Discard changes?" when its trigger or container asks first (`confirmDismiss`)
 - **`closeIcon`** — Custom close icon element
 - **`role`** `'dialog' | 'alertdialog'` (default: `dialog`) — ARIA role for the dialog
 
@@ -194,7 +194,7 @@ To clamp the width yourself, set `styles.width` (`styles={{ width: 'initial 520p
 
 - `Tab` - Moves focus between interactive elements within the dialog
 - `Shift + Tab` - Moves focus backward between interactive elements
-- `Escape` - Closes the dialog when its `DialogTrigger` or `DialogContainer` is dismissable (`isDismissable`, on by default) and `isKeyboardDismissDisabled` is not set. If a control inside already prevents the key's default, the dialog stays open and keeps the handled Escape from reaching an enclosing dialog
+- `Escape` - Closes the dialog when its `DialogTrigger` or `DialogContainer` is dismissable (`isDismissable`, on by default) and `isKeyboardDismissDisabled` is not set. A dialog with unsaved edits asks "Discard changes?" first (`confirmDismiss`). If a control inside already prevents the key's default, the dialog stays open and keeps the handled Escape from reaching an enclosing dialog
 - `Enter/Space` - Activates focused buttons or interactive elements
 
 ### Screen Reader Support

package/docs/components/overlays/DialogContainer.md

@@ -21,6 +21,7 @@ A DialogContainer accepts a single Dialog as a child, and manages to show and hi
 - **`styles`** `Styles` — Styles for the overlay content shell
 - **`isDismissable`** `boolean` (default: `true`) — Whether the Dialog is dismissible
 - **`isKeyboardDismissDisabled`** `boolean` (default: `false`) — Whether pressing the escape key to close the dialog should be disabled
+- **`confirmDismiss`** `boolean` — Whether Escape, an outside click and the close button ask "Discard changes?" before they call `onDismiss`. Unset, they ask while a `DialogForm` inside has unsaved edits; `true` always asks, `false` never does. Closing it from code (`isOpen`, removing the child) never asks. See [Unsaved edits](./DialogTrigger.md#unsaved-edits)
 - **`isOpen`** `boolean` — Whether the modal is open or not
 - **`onDismiss`** `function` — Handler called when the x button of a dismissible Dialog is clicked
 - **`hideOnClose`** `boolean` (default: `false`) — Whether the dialog should be hidden when closed. Focus moves as for a dialog that mounts on open: in on every open, and on close back to the element that opened it, or to the trigger of the menu or popover it sat in once that has closed. [Focus with `hideOnClose`](#focus-with-hideonclose) lists what still differs

package/docs/components/overlays/DialogForm.md

@@ -24,9 +24,10 @@ The examples below use modern controllers. See [Modern Form](../form/ModernForm.
 - **`submitProps`** `CubeButtonProps` (legacy) / `Omit<CubeSubmitButtonProps<T>, 'form'>` (modern) — Customize the submit button, including its text (`children`) and modern `disableOnInvalid`
 - **`cancelProps`** `CubeButtonProps` — Customize the cancel button, including its text (`children`)
 - **`preserve`** `boolean` (default: `false`) — Retain values when the editing session ends. Keep the controller mounted above the dialog to retain a draft across dialog unmounts.
+- **`confirmDismiss`** `boolean` — Whether Escape, an outside click and the close button ask "Discard changes?" before they close the dialog. Unset, they ask while a field the user edited differs from its default, unless `preserve` is set. Set `false` for a confirmation, such as typing a name to delete, where backing out loses nothing. An explicit `confirmDismiss` on the `DialogTrigger` or `DialogContainer` wins. See [Unsaved edits](./DialogTrigger.md#unsaved-edits)
 - **`noActions`** `boolean` — Hide the default submit/cancel buttons
 - **`children`** `ReactNode | ((dismiss: () => void) => ReactNode)` — Fields, or a render function for custom actions
-- **`onDismiss`** `() => void` — Called by the built-in Cancel/close button or the render function's `dismiss`. Handle Escape, outside clicks, and externally controlled closing on `DialogTrigger` or `DialogContainer`.
+- **`onDismiss`** `() => void` — Called by the built-in Cancel/close button or the render function's `dismiss`. Handle Escape, outside clicks, and externally controlled closing on `DialogTrigger` or `DialogContainer`. With unsaved edits, the close button calls it only after the user discards them.
 - **`onSubmit`** `(values: FormValues<T>, context: ModernSubmitContext) => void | Promise<void>` — Modern submit callback. Resolve to close; throw/reject to keep the dialog open. The context supplies an `AbortSignal`.
 - **`onSubmitFailed`** `(failure: ModernSubmitFailure) => void | Promise<void>` — Distinguishes invalid fields from a failed save
 - **`onValuesChange`** `(values: FormValues<T>, change: FormChange) => void | Promise<void>` — Modern value-change callback
@@ -154,6 +155,7 @@ The parent owns `form` in this example. `preserve` keeps its draft on dismissal
 - Invalid fields and rejected saves leave the dialog open. Include `Form.SubmitError` to display save failures. Submit stays enabled after validation errors by default so the user can retry.
 - In a popover, modern form actions keep the dialog open while validating or saving. This also covers custom actions inside the form; successful submission and explicit dismissal control when it closes.
 - Explicit Submit/Cancel actions can close a dialog even when its trigger disables passive dismissal with `isDismissable={false}`. Escape and outside-click dismissal remain disabled.
+- While a field the user edited differs from its default, Escape, a click outside and the close button ask "Discard changes?" before they close the dialog ([Unsaved edits](./DialogTrigger.md#unsaved-edits)); Submit, Cancel and the render function's `dismiss` close it at once. A value set from code (`setValue`, `setFieldsValue`) is not an edit, even once the user has visited that field, so filling the form on open doesn't ask. A custom input that writes with the modern `setValue` passes `{ source: 'user' }`, so its changes count. With `preserve` the edits survive the close, so it never asks, and neither does a popover. Set `confirmDismiss={false}` to close at once.
 - Modern dismissal cancels pending submission even with `preserve`. The submitted callback receives an aborted signal; a late completion cannot close a reopened dialog. Pass the signal to abortable API work.
 - Modern values reset when the editing session ends unless `preserve` is set. This includes Cancel, the close button, Escape/outside closing, and removal of the dialog. Hidden dialogs also end the session when closed. A close followed by an immediate reopen has no delayed reset that can erase new edits.
 - Replacing the modern controller ends the detached controller's session using its last committed `preserve` setting. The new controller keeps its own values and editing session.

package/docs/components/overlays/DialogTrigger.md

@@ -23,6 +23,7 @@ DialogTrigger serves as a wrapper around a Dialog and its associated trigger, li
 - **`mobileViewport`** `number` (default: `700`) — The screen breakpoint for the mobile type
 - **`isDismissable`** `boolean` (default: `true`) — Whether passive dismissal (Escape or an outside click) can close the dialog. Explicit dialog actions, such as Submit and Cancel, can still close it. A popover that is not dismissable leaves outside presses alone: the control pressed still receives the press, and a text field there can take focus, because such a popover does not hold focus. It stays open when another popover opens, and closes when a modal, tray, fullscreen or panel dialog opens from another `DialogTrigger`.
 - **`isKeyboardDismissDisabled`** `boolean` (default: `false`) — Whether pressing the escape key to close the dialog should be disabled
+- **`confirmDismiss`** `boolean` — Whether Escape, an outside click and the close button ask "Discard changes?" before they close the dialog. Unset, they ask while a `DialogForm` inside has unsaved edits; `true` always asks, `false` never does. Explicit actions (Submit, Cancel, the `close` function) never ask, and neither does a popover. See [Unsaved edits](#unsaved-edits)
 - **`isOpen`** `boolean` — Whether the dialog is open (controlled)
 - **`defaultOpen`** `boolean` (default: `false`) — Whether the dialog is open by default (uncontrolled)
 - **`offset`** `number` (default: `8`) — The gap between the trigger and a popover, along the main axis. `0` places the popover flush against the trigger
@@ -128,6 +129,35 @@ These properties allow direct style application without using the `styles` prop:
 </DialogTrigger>
 ```
 
+### Unsaved edits
+
+A dialog that holds unsaved edits asks before a passive dismissal discards them: Escape from any control, a click outside the dialog, or its close button opens a "Discard changes?" confirmation instead of closing. **Discard** closes the dialog and calls `onDismiss`; **Keep editing**, Escape or a click outside the confirmation returns to the dialog with its edits and focus where they were.
+
+A `DialogForm` turns this on while a field the user edited differs from its default, so a form dialog needs no wiring; a value set from code doesn't count. For any other dialog, bind `confirmDismiss` to its own state:
+
+```jsx
+<DialogTrigger confirmDismiss={notes !== savedNotes}>
+  <Button>Edit notes</Button>
+  {(close) => (
+    <Dialog isDismissable>
+      <Header>
+        <Title>Notes</Title>
+      </Header>
+      <Content>
+        <TextArea label="Notes" value={notes} onChange={setNotes} />
+      </Content>
+      <Footer>
+        <Button type="primary" onPress={() => save(notes).then(close)}>
+          Save
+        </Button>
+      </Footer>
+    </Dialog>
+  )}
+</DialogTrigger>
+```
+
+`confirmDismiss={false}`, on the `DialogForm` or here, keeps a form dialog closing at once: a confirmation such as typing a name to delete loses nothing when the user backs out. A value set here wins over the form's. `isDismissable={false}` still turns passive dismissal off altogether. A popover never asks: it also closes when another popover opens or a button inside it is pressed, and its edits are often applied as they are made.
+
 ### Controlled State
 
 ```jsx
@@ -152,7 +182,7 @@ function ControlledDialog() {
 ### Keyboard Navigation
 
 - `Enter/Space` - Opens the dialog when trigger is focused
-- `Escape` - Closes the dialog (unless disabled)
+- `Escape` - Closes the dialog (unless disabled). While the dialog holds unsaved edits, it asks first; see [Unsaved edits](#unsaved-edits)
 - `Tab` - Cycles through focusable elements within the dialog
 
 ### Screen Reader Support

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cube-dev/ui-kit",
-  "version": "0.203.0",
+  "version": "0.204.0",
   "type": "module",
   "description": "UIKit for Cube Projects",
   "repository": {