@nxgt/material 2.9.0 → 2.10.0

package/docs/components/feedback-and-status.md

@@ -426,7 +426,7 @@ toasts.dismiss(id);
 | --- | --- | --- | --- |
 | `title` / `description` | `ReactNode` | preset title for `success`, `error`, `loading` | toast text |
 | `icon` | `ReactNode` (`toast`) · icon name (`toasts.custom`) | preset icon | leading icon |
-| `action` | `ToastAction`: `{ label, onClick? }` or `(dismiss) => ReactNode` | a translated “Close” for `success`, `info`, `error`; a preset keeps the caller's own | trailing button: `onClick`, then the toast closes; or what the function renders, given `dismiss`. Brings the X button and a persistent toast, see below |
+| `action` | `ToastAction`: `{ label, onClick? }` or `(dismiss) => ReactNode` | a translated “Close” for `success`, `info`, `error`; every preset keeps the caller's own, in either call | trailing button: `onClick` (given the click event, optional when you call it yourself), then the toast closes; or what the function renders, given `dismiss`. Brings the X button and a persistent toast, see below |
 | `dismissLabel` | `string` | the translated “Close” when an `action` is given | accessible name of the X icon button beside the action; `''` hides it |
 | `role` | `'status' \| 'alert'` | none (`toasts.error`: `'alert'`) | live-region role. Toasts are already announced politely by the `Toaster`'s region; `alert` interrupts, and may be read twice by some screen readers |
 | `options` | Sonner `ExternalToast` | `duration: 5000` for presets, `Infinity` for `loading` and for any toast with your own `action` (a preset's fallback "Close" still times out at 5000) unless a `duration` is passed | passed to Sonner (`id`, `duration`, `position`…) |
@@ -438,7 +438,7 @@ forwarded; mount the one from `@nxgt/material/components`, not Sonner's own,
 or neither phone change below applies. `Toast` is the component each toast
 renders, for use with `sonnerToast.custom`.
 
-**Types:** `ToastAction`, `ToastProps`, `ToastMethodProps`, `ToasterProps`.
+**Types:** `ToastAction`, `ToastProps`, `ToastMethodProps`, `ToastData`, `ToastArgs`, `ToasterProps`, and `PresetProps` (the props of `success`, `warning`, `info` and `error`: use it, not `Parameters<typeof toasts.success>[0]`, which is now a union with the `(message, data)` form).
 
 **On a phone** (under 600px wide, where Sonner lays toasts out across the
 screen), a `Toaster` with no `position` shows its toasts at the top
@@ -454,6 +454,27 @@ stay visible: `<Toaster mobileOffset={{ top: 72 }} />`.
 <Toaster position="bottom-center" /> // bottom-center everywhere
 ```
 
+**sonner's call works too.** Every preset (`custom`, `success`, `info`,
+`warning`, `error`, `loading`) also takes sonner's own `(message, data)`: the
+message is the title, `data.description` and `data.action` are shown, and the
+rest of `data` (`id`, `duration`, `onDismiss`…) is passed to sonner as the
+options. `data` is typed `ToastData`, sonner's `ExternalToast` without `icon`
+(a preset draws its own) and `cancel` (the X button stands for it): passing
+either is a type error rather than a silent no-op.
+
+```ts
+toasts.success('Staff member restored', {
+  description: 'They can sign in again.',
+  action: { label: 'Send an invitation', onClick: openInvite },
+});
+// the same as
+toasts.success({
+  title: 'Staff member restored',
+  description: 'They can sign in again.',
+  action: { label: 'Send an invitation', onClick: openInvite },
+});
+```
+
 **An action keeps the toast open.** `toast()` itself does it, so a preset and a
 direct call behave alike: any toast with an `action` is persistent by default
 (`options.duration: Infinity`, WCAG 2.2.1: a timed toast can vanish before a
@@ -471,10 +492,18 @@ elsewhere) is ignored, so a tapped toast still goes after its duration. On a
 touch screen a tap no longer fans out a stack of two or more toasts either: pass
 `expand` to keep the stack open. Sonner does not close a toast on Escape (it
 only collapses the stack); this `Toast` does when focus is inside it, with or
-without an action. The close button is reached with Tab. **Focus after a
-dismiss:** the dismissed toast leaves the page with the focused control in it,
-so focus falls back to `document.body`; move it yourself (`onClick`, or after
-`toasts.dismiss()`) when the flow needs it elsewhere.
+without an action. The close button is reached with Tab.
+
+**Focus after an action.** A click on a toast's action first gives the focus
+back to the control that had it before the focus entered the toast, then runs
+your `onClick`, then closes the toast; a function action's `dismiss` does the
+same before it closes. So an action that opens a `Dialog` (or moves the focus
+anywhere else) keeps it there: the dialog holds the control it focused once
+the toast has gone, and gives the focus back to that earlier control when it
+closes (WCAG 2.4.3). An action that moves the focus nowhere leaves it on that
+earlier control. A toast closed by its X or by Escape takes its focused
+control with it, so the focus falls back to `document.body`; move it yourself
+(after `toasts.dismiss()`) when the flow needs it elsewhere.
 
 **Announced to screen readers:** `Toaster` renders a polite live region
 (`<section aria-live="polite">`) that is in the page before the first toast,

package/docs/roadmap.md

@@ -88,6 +88,11 @@ Nothing in progress right now; see Next.
 
 ## Shipped
 
+- **Toast actions that work everywhere** — `toasts.success(message, { action })`
+  and every other preset take sonner's own call shape and keep their action,
+  and a dialog a toast's action opens keeps the focus, then gives it back to
+  where it was before the toast. 2.10.0.
+
 - **Tabs in two looks** — `underline`, the new default, whose bar slides to
   the active tab, and a neutral `segmented` pill; a list that scrolls
   sideways on a phone instead of widening the page, right-to-left, a visible

package/docs/troubleshooting.md

@@ -32,6 +32,8 @@ words in your error.
 - [A toast covers the form's button on a phone](#a-toast-covers-the-forms-button-on-a-phone)
 - [A toast never goes away after a tap](#a-toast-never-goes-away-after-a-tap)
 - [A toast's action cannot be clicked while a dialog is open](#a-toasts-action-cannot-be-clicked-while-a-dialog-is-open)
+- [`toasts.success(message, { action })` shows no action button](#toastssuccessmessage--action--shows-no-action-button)
+- [The focus leaves a dialog that a toast's action opened](#the-focus-leaves-a-dialog-that-a-toasts-action-opened)
 - [A `ConfirmationDialog` reopened with new content blocks clicks](#a-confirmationdialog-reopened-with-new-content-blocks-clicks)
 - [The first Escape after closing a nested dialog does nothing](#the-first-escape-after-closing-a-nested-dialog-does-nothing)
 
@@ -642,6 +644,51 @@ counted a pointer down on a toast as outside the dialog.
 inside the `Toaster` as inside, so the action runs and the dialog stays open.
 Sonner's own `Toaster` keeps the old behaviour.
 
+### `toasts.success(message, { action })` shows no action button
+
+**When:** a preset is called the way sonner's own `toast.success` is, with a
+message and a `data` object: `toasts.success('Staff member restored', {
+action: { label: 'Send an invitation', onClick } })`. The toast shows the
+preset's default title ("Success") and its "Close" button, not your message,
+description or action.
+**Why:** the presets took one props object only (`{ title, description,
+action, options }`): a string first argument was read as that object, and
+the second argument was ignored.
+**Fix:** update `@nxgt/material`: every preset (`custom`, `success`, `info`,
+`warning`, `error`, `loading`) now takes `(message, data)` too, the message as
+the title and `data.description` and `data.action` shown, the rest of `data`
+as sonner's options. The props object works as before:
+
+```ts
+toasts.success('Staff member restored', { action: { label: 'Send an invitation', onClick } });
+toasts.success({ title: 'Staff member restored', action: { label: 'Send an invitation', onClick } });
+```
+
+`data` takes no `icon` (a preset draws its own) and no `cancel` (the X button
+beside the action stands for it).
+
+### The focus leaves a dialog that a toast's action opened
+
+**When:** a toast's action opens a `Dialog` (or an `AlertDialog`, a `Sheet`,
+a `Drawer`, or moves the focus anywhere else). Once the toast has gone, the
+focus is no longer on the dialog's control (it is on the dialog itself, on
+the page behind it, or on `document.body`), and closing the dialog leaves the
+focus on `document.body` instead of where it was before the toast.
+**Why:** sonner remembers the control focused before the focus entered the
+`Toaster`, and focuses it again as soon as the focus leaves the `Toaster`.
+The dialog taking the focus counted as leaving, so sonner pulled it back out
+of the dialog (WCAG 2.4.3). The dialog, opened while the toast's button had
+the focus, also gave the focus back to that button once closed: it had gone
+with its toast, so the focus fell to `document.body`.
+**Fix:** update `@nxgt/material` and give the toast an `action` (a `{ label,
+onClick }`, or a function that calls the `dismiss` it is given): the action
+gives the focus back to where it was before the toast first, then runs. The
+dialog keeps its control, and gives the focus back to that earlier control
+when it closes. A workaround that blurs the button and opens the dialog on
+the next frame can go. A button you render in a function action and that
+opens a dialog without calling `dismiss` is not covered: call `dismiss()`
+before opening the dialog.
+
 ### A `ConfirmationDialog` reopened with new content blocks clicks
 
 **When:** a `ConfirmationDialog` or a `ConfirmDialog` (or a `Dialog`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "2.9.0",
+	"version": "2.10.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -114,7 +114,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.6.0",
+		"@nxgt/material-core": "^0.7.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",