prime-ui-kit 0.15.0 → 0.17.0

package/src/components/modal/examples/sizes.tsx

@@ -11,38 +11,43 @@ const SIZES = [
 
 export default function ModalSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map(({ size, width }) => (
-        <Modal.Root key={size}>
-          <Modal.Trigger>
-            <Button.Root variant="soft" tone="neutral">
-              {size}
-            </Button.Root>
-          </Modal.Trigger>
-          <Modal.Content size={size}>
-            <Modal.Header>
-              <Modal.Title>Окно размера {size}</Modal.Title>
-              <Modal.Description>{width}</Modal.Description>
-            </Modal.Header>
-            <Modal.Body>
-              <Typography variant="body-m" tone="secondary">
-                Выбирайте самый узкий размер, в который содержимое помещается без переносов строк
-                формы.
-              </Typography>
-            </Modal.Body>
-            <Modal.Footer>
-              <Modal.Close>
-                <Button.Root variant="outline" tone="neutral">
-                  Отмена
-                </Button.Root>
-              </Modal.Close>
-              <Modal.Confirm>
-                <Button.Root>Продолжить</Button.Root>
-              </Modal.Confirm>
-            </Modal.Footer>
-          </Modal.Content>
-        </Modal.Root>
+        <div key={size}>
+          <Modal.Root>
+            <Modal.Trigger>
+              <Button.Root variant="soft" tone="neutral">
+                Открыть окно
+              </Button.Root>
+            </Modal.Trigger>
+            <Modal.Content size={size}>
+              <Modal.Header>
+                <Modal.Title>Окно размера {size}</Modal.Title>
+                <Modal.Description>{width}</Modal.Description>
+              </Modal.Header>
+              <Modal.Body>
+                <Typography variant="body-m" tone="secondary">
+                  Выбирайте самый узкий размер, в который содержимое помещается без переносов строк
+                  формы.
+                </Typography>
+              </Modal.Body>
+              <Modal.Footer>
+                <Modal.Close>
+                  <Button.Root variant="outline" tone="neutral">
+                    Отмена
+                  </Button.Root>
+                </Modal.Close>
+                <Modal.Confirm>
+                  <Button.Root>Продолжить</Button.Root>
+                </Modal.Confirm>
+              </Modal.Footer>
+            </Modal.Content>
+          </Modal.Root>
+          <Typography as="span" variant="caption" tone="muted">
+            {size}
+          </Typography>
+        </div>
       ))}
-    </>
+    </div>
   );
 }

package/src/components/modal/examples/structure.tsx

@@ -1,4 +1,4 @@
-/** Optional parts: an icon tile with a header-only notice, and a header with a status before the close button and a footer but no body — `Modal.Icon`, `Modal.Actions`, `Modal.Body`, `Modal.Footer`. */
+/** Optional parts: an icon tile with a header-only notice, and a header with a status before the close button and a footer with no body between them — `Modal.Icon`, `Modal.Actions`, `Modal.Footer`. */
 import { Badge, Button, Icon, Modal } from "prime-ui-kit";
 
 export default function ModalStructureExample() {

package/src/components/native-select/COMPONENT.md

@@ -35,7 +35,7 @@ NativeSelect          field frame: label row · control · support row
 <!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
 
 ### NativeSelect
-`ref` → `HTMLSelectElement`. The system `<select>` in the field look with the label row and the support row; the kit chevron over its end. + native `<select>` props except `size` and `multiple`.
+`ref` → `HTMLSelectElement`. The system `<select>` in the field look with the label row and the support row; the kit chevron over its end.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
@@ -75,7 +75,7 @@ One look, the Select trigger's: field fill, inset control border, tier radius; t
 | `optional` | muted «необязательно» | Most fields are required | |
 | `invalid` / `error` | danger inset ring (+ the message) | Validation failed | |
 | `disabled` | disabled fill and text | Not editable now | `false` |
-| `focusRing={false}` | no focus ring | Focus is obvious otherwise | `true` |
+| `focusRing` | `false`: no focus ring | Focus is obvious otherwise | `true` |
 
 ## States
 | State | Driven by | DOM |
@@ -93,12 +93,16 @@ One look, the Select trigger's: field fill, inset control border, tier radius; t
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Enter` · `Space` · `ArrowDown` | Open the system list (browser and OS behaviour). |
 | `ArrowUp` · `ArrowDown` | On the closed field change the value (in most browsers). |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - It is a real `<select>`: the role, the keyboard and the list come from the browser and the OS.
 - `label` is a `<label htmlFor>`; the hint and the error are linked by `aria-describedby`, the error sets `aria-invalid`.
 - The chevron is decorative (`aria-hidden`).
@@ -128,5 +132,5 @@ One look, the Select trigger's: field fill, inset control border, tier radius; t
 - Several values with `multiple` → not supported; use Select `multiple` or TagSelect.
 
 ## Related
-- **Built from:** [Label](../label/COMPONENT.md), [Hint](../hint/COMPONENT.md) (field frame), `Icon` (chevron)
+- **Built from:** [Label](../label/COMPONENT.md), [Hint](../hint/COMPONENT.md) (field frame), `Icon` (chevron), [VisuallyHidden](../visually-hidden/COMPONENT.md)
 - **See also:** [Select](../select/COMPONENT.md), [Radio](../radio/COMPONENT.md), [SegmentedControl](../segmented-control/COMPONENT.md)

package/src/components/native-select/examples/examples.module.css

@@ -1,11 +1,11 @@
 /* Layout of the NativeSelect scenarios: semantic tokens only. */
 
-/* in-form.tsx: a narrow mobile form, field → field 20. */
+/* in-form.tsx: a narrow mobile form; the fields (a Fieldset) → actions 32 (foundation §1). */
 .form {
   display: flex;
   flex-direction: column;
-  gap: var(--prime-space-5);
-  width: min(100%, var(--prime-modal-width-s));
+  gap: var(--prime-space-8);
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 .actions {

package/src/components/native-select/examples/in-form.tsx

@@ -1,5 +1,5 @@
 /** A delivery form for phones: the native value goes into FormData, the required city is checked on submit, the error shakes the field and leaves once a city is picked, a calm note confirms the order — `name`, `required`, `error`. */
-import { Button, NativeSelect, Typography } from "prime-ui-kit";
+import { Button, Fieldset, NativeSelect, Typography } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -17,34 +17,33 @@ export default function NativeSelectInFormExample() {
 
   return (
     <form className={styles.form} noValidate onSubmit={submit}>
-      <Typography as="h3" variant="title-m">
-        Доставка
-      </Typography>
-      <NativeSelect
-        name="city"
-        label="Город"
-        required
-        error={error}
-        placeholder="Выберите город"
-        onValueChange={() => {
-          setError(undefined);
-          setSaved(false);
-        }}
-      >
-        <option value="msk">Москва</option>
-        <option value="spb">Санкт-Петербург</option>
-        <option value="kzn">Казань</option>
-      </NativeSelect>
-      <NativeSelect
-        name="slot"
-        label="Время"
-        defaultValue="day"
-        onValueChange={() => setSaved(false)}
-      >
-        <option value="morning">09:00–12:00</option>
-        <option value="day">12:00–18:00</option>
-        <option value="evening">18:00–21:00</option>
-      </NativeSelect>
+      <Fieldset label="Доставка">
+        <NativeSelect
+          name="city"
+          label="Город"
+          required
+          error={error}
+          placeholder="Выберите город"
+          onValueChange={() => {
+            setError(undefined);
+            setSaved(false);
+          }}
+        >
+          <option value="msk">Москва</option>
+          <option value="spb">Санкт-Петербург</option>
+          <option value="kzn">Казань</option>
+        </NativeSelect>
+        <NativeSelect
+          name="slot"
+          label="Время"
+          defaultValue="day"
+          onValueChange={() => setSaved(false)}
+        >
+          <option value="morning">09:00–12:00</option>
+          <option value="day">12:00–18:00</option>
+          <option value="evening">18:00–21:00</option>
+        </NativeSelect>
+      </Fieldset>
       <div className={styles.actions}>
         {saved ? (
           <Typography as="p" variant="body-s" tone="secondary">

package/src/components/native-select/examples/sizes.tsx

@@ -5,7 +5,7 @@ const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function NativeSelectSizesExample() {
   return (
-    <>
+    <div>
       {SIZES.map((size) => (
         <NativeSelect key={size} size={size} label={size} defaultValue="week">
           <option value="day">За день</option>
@@ -13,6 +13,6 @@ export default function NativeSelectSizesExample() {
           <option value="month">За месяц</option>
         </NativeSelect>
       ))}
-    </>
+    </div>
   );
 }

package/src/components/native-select/examples/states.tsx

@@ -3,7 +3,7 @@ import { NativeSelect } from "prime-ui-kit";
 
 export default function NativeSelectStatesExample() {
   return (
-    <>
+    <div>
       <NativeSelect label="default" defaultValue="editor">
         <option value="viewer">Наблюдатель</option>
         <option value="editor">Редактор</option>
@@ -20,6 +20,6 @@ export default function NativeSelectStatesExample() {
         <option value="viewer">Наблюдатель</option>
         <option value="editor">Редактор</option>
       </NativeSelect>
-    </>
+    </div>
   );
 }

package/src/components/notification/COMPONENT.md

@@ -46,52 +46,51 @@ No DOM of its own, no ref. Wraps the app once: keeps the toasts and renders thei
 | Prop | Type | Default | Description |
 |---|---|---|---|
 | `position` | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | `"top-right"` | Default position for `notify()` calls without one. |
-| `max` | `number` | `5` | Max toasts per stack; older ones are dropped. |
+| `max` | `number` | `5` | Max toasts per stack; a newer toast pushes the oldest out through its exit (reason `overflow`). |
 | `labels` | `Partial<NotificationLabels>` | — | Built-in strings, see Labels. |
 | `children` | `ReactNode` | — (required) | The app. |
 
-### useNotifications()
-Must be called inside `NotificationProvider`; returns the store.
+### NotificationCard
+`ref` → `HTMLElement`. A static `<article role="status|alert">` card without a timer: inline confirmations, docs, mockups.
 
 | Prop | Type | Default | Description |
 |---|---|---|---|
-| `notify` | `(options: NotificationOptions) => string` | — | Shows a toast and returns its id. |
-| `dismiss` | `(id: string) => void` | — | Closes one toast with its exit animation. |
-| `dismissAll` | `() => void` | — | Closes every toast. |
-| `items` | `NotificationRecord[]` | — | Active toasts (without the ones playing their exit). |
+| `tone` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` | Semantic color and tone icon; `danger` and `warning` are announced assertively. |
+| `title` | `string` | — (required) | The message. |
+| `description` | `string` | — | Secondary text under the title. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Padding, icon and text tier of the card. Without it the tier of the host (a toast of `notify()` sits outside any host: `m`). |
+| `icon` | `ReactNode` | — | Replaces the tone icon. |
+| `badge` | `string \| number` | — | A counter next to the title (a `Badge` of the same `tone`). |
+| `action` | `{ label: string; onClick: () => void }` | — | One soft button under the text, one tier below the card; on a toast of `notify()` it closes the toast after its `onClick` (reason `action`). |
+| `onDismiss` | `() => void` | — | Shows the close button and is called on its click. |
+| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "title" \| "children" \| "role">` | — | `className` and the other attributes of the `<article>`. |
 
-### notify(options)
-`NotificationOptions`: what the toast shows and how it closes.
+### Types
 
-| Prop | Type | Default | Description |
+#### `NotificationOptions`
+The argument of `notify(options)`: what the toast shows and how it closes.
+
+| Field | Type | Default | Description |
 |---|---|---|---|
 | `tone` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` | Semantic color and tone icon; `danger` and `warning` are announced assertively. |
 | `title` | `string` | — (required) | The message. |
 | `description` | `string` | — | Secondary text under the title. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Padding, icon and text tier of the card. |
+| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | host tier, else `"m"` | Padding, icon and text tier of the card. Without it the tier of the host (a toast of `notify()` sits outside any host: `m`). |
 | `icon` | `ReactNode` | — | Replaces the tone icon. |
-| `badge` | `string \| number` | — | A counter next to the title (a `Badge` in the tone hue). |
-| `action` | `{ label: string; onClick: () => void }` | — | One soft button under the text, one tier below the card. |
+| `badge` | `string \| number` | — | A counter next to the title (a `Badge` of the same `tone`). |
+| `action` | `{ label: string; onClick: () => void }` | — | One soft button under the text, one tier below the card; on a toast of `notify()` it closes the toast after its `onClick` (reason `action`). |
 | `position` | `"top-left" \| "top-center" \| "top-right" \| "bottom-left" \| "bottom-center" \| "bottom-right"` | — | Default: the provider's `position`. |
 | `duration` | `number` | `5000` | Auto-close delay in ms; the timer pauses on hover, focus, swipe and in a hidden tab. |
 | `persistent` | `boolean` | `false` | No timer and no countdown line. |
 | `closable` | `boolean` | `true` | Shows the close button. |
-| `onDismiss` | `() => void` | — | The toast left: its timer ran out, the close button, a swipe, `dismiss()`, or a newer toast pushed it out of a full stack. Called once — the place to commit an action the toast offered to undo. |
+| `onDismiss` | `(reason: "timeout" \| "close" \| "swipe" \| "action" \| "dismiss" \| "overflow") => void` | — | The toast left, with the reason: its timer ran out, the close button, a swipe, its action, `dismiss()` / `dismissAll()`, or a newer toast pushed it out of a full stack. Called once — the place to commit an action the toast offered to undo (every reason but `action`). |
 
-### NotificationCard
-`ref` → `HTMLElement`. A static `<article role="status|alert">` card without a timer: inline confirmations, docs, mockups.
+### Functions
 
-| Prop | Type | Default | Description |
-|---|---|---|---|
-| `tone` | `"info" \| "success" \| "warning" \| "danger"` | `"info"` | Semantic color and tone icon; `danger` and `warning` are announced assertively. |
-| `title` | `string` | — (required) | The message. |
-| `description` | `string` | — | Secondary text under the title. |
-| `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `"m"` | Padding, icon and text tier of the card. |
-| `icon` | `ReactNode` | — | Replaces the tone icon. |
-| `badge` | `string \| number` | — | A counter next to the title (a `Badge` in the tone hue). |
-| `action` | `{ label: string; onClick: () => void }` | — | One soft button under the text, one tier below the card. |
-| `onDismiss` | `() => void` | — | Shows the close button and is called on its click. |
-| `…rest` | `Omit<HTMLAttributes<HTMLElement>, "title" \| "children" \| "role">` | — | `className` and the other attributes of the `<article>`. |
+#### `useNotifications()`
+`() => { notify: (options: NotificationOptions) => string; dismiss: (id: string) => void; dismissAll: () => void; items: NotificationRecord[] }`
+
+Called inside `NotificationProvider`; returns the store: `notify(options)` shows a toast and returns its id, `dismiss(id)` closes one with its exit animation, `dismissAll()` closes every toast, `items` holds the active toasts (without the ones playing their exit).
 
 ## Variants
 
@@ -144,14 +143,19 @@ Collapsed stacks show up to 3 cards peeking behind each other. Hover or keyboard
 ## Accessibility
 
 ### Keyboard
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 | Key | Action |
 |---|---|
 | `Tab` | Focuses the action and the close button; focus inside a stack expands it and pauses the timers. |
 | `Enter` · `Space` | Presses the action or the close button. |
 
 ### ARIA
+<!-- Generated from api.ts by `bun run docs:build`. Edit api.ts, not this section. -->
+
 - Each stack is an `<ol>` named by the region label of its position; each card is an `<article>`: `role="status"` + `aria-live="polite"`, or `role="alert"` + `aria-live="assertive"` for `warning` / `danger`.
 - The icon and the countdown are `aria-hidden`; the close button is named by `labels.close`.
+- Focus never leaves with a toast: a card that goes while it holds focus hands it to the front card still open in its stack, else back to where focus came from.
 - A toast is a non-modal live region, not a layer of the overlay stack: Escape and a press elsewhere belong to the page and to the topmost open layer, so a toast takes no `closeOnEscape` / `closeOnOutsideClick` — it leaves by its timer, the close button, a swipe or `dismiss()`.
 - Do not keep the only copy of important information in a toast with a timer — use `persistent` or a Banner.
 
@@ -177,16 +181,17 @@ Collapsed stacks show up to 3 cards peeking behind each other. Hover or keyboard
 | [placement.tsx](examples/placement.tsx) | Toasts in each corner or centered at the top or bottom edge — `position`. |
 | [tones.tsx](examples/tones.tsx) | The four tones: the icon carries the meaning; danger and warning are announced at once — `tone`. |
 | [stacking.tsx](examples/stacking.tsx) | Toasts of one position and tone stack; hover expands the stack and pauses the timers — `max`, `items`, `dismissAll`. |
-| [undo.tsx](examples/undo.tsx) | Delete at once and offer to undo: the row leaves the list, the toast brings it back, and the deletion is sent only when the toast leaves without an undo — `onDismiss`, `action`. |
+| [undo.tsx](examples/undo.tsx) | Delete at once and offer to undo: the row leaves the list, the toast's action brings it back and closes it, and the deletion is sent when the toast leaves for any other reason — `onDismiss`, `action`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A short timer, a toast that stays until closed, and one without a close button; the close button's name comes from labels — `duration`, `persistent`, `closable`, `labels`. |
-| [in-form.tsx](examples/in-form.tsx) | Saving a form: the button shows loading, then a success toast or an error toast with a retry action — `notify`, `action`. |
+| [in-form.tsx](examples/in-form.tsx) | Saving a form: the button shows loading, then a success toast or an error toast whose retry sends the form again with what it holds now — `notify`, `action`. |
 
 ## Mistakes
 - Calling `useNotifications()` outside `NotificationProvider` → it throws; wrap the app root once.
 - Several providers in one app → one provider at the root.
 - `tone: "error"` → use `tone: "danger"`.
-- Expecting `action` to close the toast → call `dismiss(id)` in `onClick` if it should.
-- Sending a deletion to the server before the «Отменить» toast is gone → send it in `onDismiss`, unless the action ran.
+- Calling `dismiss(id)` from the action's `onClick` → the action closes its toast itself (`onDismiss` gets `action`).
+- A retry action that calls a handler holding stale form values → let it submit the form again (`requestSubmit()`).
+- Sending a deletion to the server before the «Отменить» toast is gone → send it in `onDismiss` for every reason but `action`.
 - A toast for a permanent state («пробный период закончится через 3 дня») → use a Banner.
 
 ## Related

package/src/components/notification/examples/examples.module.css

@@ -26,14 +26,13 @@
 
 /* in-form.tsx: a settings form in a Card. */
 .formCard {
-  width: min(100%, var(--prime-modal-width-s));
+  width: min(100%, var(--prime-layout-form-width-s));
 }
 
 .form {
   display: flex;
   flex-direction: column;
   gap: var(--prime-space-5);
-  padding: var(--prime-card-padding-m);
 }
 
 .actions {

package/src/components/notification/examples/in-form.tsx

@@ -1,4 +1,4 @@
-/** Saving a form: the button shows loading, then a success toast or an error toast with a retry action — `notify`, `action`. */
+/** Saving a form: the button shows loading, then a success toast or an error toast whose retry sends the form again with what it holds now — `notify`, `action`. */
 import { Button, Card, Input, NotificationProvider, useNotifications } from "prime-ui-kit";
 import * as React from "react";
 
@@ -8,6 +8,7 @@ function ReportsForm() {
   const { notify } = useNotifications();
   const [saving, setSaving] = React.useState(false);
   const [email, setEmail] = React.useState("team@prime.dev");
+  const formRef = React.useRef<HTMLFormElement>(null);
 
   const save = () => {
     setSaving(true);
@@ -24,7 +25,7 @@ function ReportsForm() {
           tone: "danger",
           title: "Не удалось сохранить",
           description: "Укажите корректный адрес почты.",
-          action: { label: "Повторить", onClick: save },
+          action: { label: "Повторить", onClick: () => formRef.current?.requestSubmit() },
         });
       }
     }, 700);
@@ -32,24 +33,31 @@ function ReportsForm() {
 
   return (
     <Card.Root className={styles.formCard}>
-      <form
-        className={styles.form}
-        onSubmit={(event) => {
-          event.preventDefault();
-          save();
-        }}
-      >
-        <Input.Root label="Почта для отчётов" hint="Без «@» сохранение завершится ошибкой" required>
-          <Input.Wrapper>
-            <Input.Field value={email} onChange={(event) => setEmail(event.target.value)} />
-          </Input.Wrapper>
-        </Input.Root>
-        <div className={styles.actions}>
-          <Button.Root type="submit" loading={saving}>
-            Сохранить
-          </Button.Root>
-        </div>
-      </form>
+      <Card.Body>
+        <form
+          ref={formRef}
+          className={styles.form}
+          onSubmit={(event) => {
+            event.preventDefault();
+            save();
+          }}
+        >
+          <Input.Root
+            label="Почта для отчётов"
+            hint="Без «@» сохранение завершится ошибкой"
+            required
+          >
+            <Input.Wrapper>
+              <Input.Field value={email} onChange={(event) => setEmail(event.target.value)} />
+            </Input.Wrapper>
+          </Input.Root>
+          <div className={styles.actions}>
+            <Button.Root type="submit" loading={saving}>
+              Сохранить
+            </Button.Root>
+          </div>
+        </form>
+      </Card.Body>
     </Card.Root>
   );
 }

package/src/components/notification/examples/sizes.tsx

@@ -1,22 +1,26 @@
 /** Every tier changes padding, icon and text of the card — `size`. */
-import { NotificationCard } from "prime-ui-kit";
-
-import styles from "./examples.module.css";
+import { NotificationCard, Typography } from "prime-ui-kit";
 
 const SIZES = ["xs", "s", "m", "l", "xl"] as const;
 
 export default function NotificationSizesExample() {
   return (
-    <div className={styles.cards}>
+    <>
       {SIZES.map((size) => (
-        <NotificationCard
-          key={size}
-          size={size}
-          title={`Отчёт готов · ${size}`}
-          description="Выгрузка за сентябрь доступна в разделе «Отчёты»."
-          onDismiss={() => undefined}
-        />
+        <div key={size}>
+          <div>
+            <NotificationCard
+              size={size}
+              title="Отчёт готов"
+              description="Выгрузка за сентябрь доступна в разделе «Отчёты»."
+              onDismiss={() => undefined}
+            />
+            <Typography as="span" variant="caption" tone="muted">
+              {size}
+            </Typography>
+          </div>
+        </div>
       ))}
-    </div>
+    </>
   );
 }

package/src/components/notification/examples/undo.tsx

@@ -1,4 +1,4 @@
-/** Delete at once and offer to undo: the row leaves the list, the toast brings it back, and the deletion is sent only when the toast leaves without an undo — `onDismiss`, `action`. */
+/** Delete at once and offer to undo: the row leaves the list, the toast's action brings it back and closes it, and the deletion is sent when the toast leaves for any other reason — `onDismiss`, `action`. */
 import { Button, NotificationProvider, Typography, useNotifications } from "prime-ui-kit";
 import * as React from "react";
 
@@ -7,27 +7,19 @@ import styles from "./examples.module.css";
 const TASKS = ["Подготовить договор", "Выставить счёт №318", "Созвониться с юристом"];
 
 function TaskList() {
-  const { notify, dismiss } = useNotifications();
+  const { notify } = useNotifications();
   const [tasks, setTasks] = React.useState(TASKS);
   const [sent, setSent] = React.useState<string[]>([]);
 
   const remove = (task: string) => {
     setTasks((list) => list.filter((item) => item !== task));
-    let undone = false;
-    const id = notify({
+    notify({
       title: "Задача удалена",
       description: task,
-      action: {
-        label: "Отменить",
-        onClick: () => {
-          undone = true;
-          setTasks((list) => [...list, task]);
-          dismiss(id);
-        },
-      },
-      // The toast is gone: without an undo the deletion goes to the server now.
-      onDismiss: () => {
-        if (!undone) setSent((list) => [...list, task]);
+      action: { label: "Отменить", onClick: () => setTasks((list) => [...list, task]) },
+      // The toast left without an undo: the deletion goes to the server now.
+      onDismiss: (reason) => {
+        if (reason !== "action") setSent((list) => [...list, task]);
       },
     });
   };