prime-ui-kit 0.12.0 → 0.13.0

package/dist/skill/reference/components/chat-list/examples/states.tsx

@@ -0,0 +1,107 @@
+/** Loading and empty: placeholder rows in the rows' geometry cross-fade into the dialogs; a new workspace without dialogs shows its own empty state with an action — `loading`, `empty`. */
+import { Avatar, Button, Card, ChatList, EmptyPage, hueOf, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+import styles from "./examples.module.css";
+
+const NOW = new Date(2026, 9, 14, 15, 0);
+
+const DIALOGS = [
+  {
+    id: "vector",
+    name: "ООО «Вектор»",
+    initials: "ВК",
+    preview: "Не можем выгрузить счёт в 1С",
+    at: new Date(2026, 9, 14, 14, 32),
+    unread: 2,
+  },
+  {
+    id: "granit",
+    name: "ООО «Гранит»",
+    initials: "ГР",
+    preview: "Акт сверки подписан",
+    at: new Date(2026, 9, 14, 12, 5),
+    unread: 0,
+  },
+  {
+    id: "kozlov",
+    name: "ИП Козлов",
+    initials: "ИК",
+    preview: "Подключите, пожалуйста, ЭДО",
+    at: new Date(2026, 9, 13, 11, 40),
+    unread: 1,
+  },
+];
+
+const LOAD_MS = 1400;
+
+type Dialog = (typeof DIALOGS)[number];
+
+const renderDialog = (item: Dialog) => (
+  <ChatList.Item time={item.at} unread={item.unread}>
+    <ChatList.ItemIcon>
+      <Avatar.Root color={hueOf(item.id)}>
+        <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+      </Avatar.Root>
+    </ChatList.ItemIcon>
+    <ChatList.ItemText>{item.name}</ChatList.ItemText>
+    <ChatList.ItemDescription>{item.preview}</ChatList.ItemDescription>
+  </ChatList.Item>
+);
+
+export default function ChatListStatesExample() {
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    if (!loading) return;
+    const timer = window.setTimeout(() => setLoading(false), LOAD_MS);
+    return () => window.clearTimeout(timer);
+  }, [loading]);
+
+  return (
+    <>
+      <div className={styles.stage}>
+        <div className={styles.bar}>
+          <Button.Root
+            variant="soft"
+            tone="neutral"
+            loading={loading}
+            onClick={() => setLoading(true)}
+          >
+            Обновить
+          </Button.Root>
+        </div>
+        <Card.Root className={styles.short}>
+          <ChatList.Root
+            items={loading ? [] : DIALOGS}
+            getKey={(item) => item.id}
+            loading={loading}
+            now={NOW}
+            renderItem={renderDialog}
+          />
+        </Card.Root>
+      </div>
+      <Card.Root className={styles.short}>
+        <ChatList.Root
+          items={[] as Dialog[]}
+          getKey={(item) => item.id}
+          renderItem={renderDialog}
+          empty={
+            <EmptyPage.Root layout="compact">
+              <EmptyPage.Icon>
+                <Icon name="object.message" />
+              </EmptyPage.Icon>
+              <EmptyPage.Title>Диалогов пока нет</EmptyPage.Title>
+              <EmptyPage.Description>
+                Клиенты появятся здесь, когда напишут в чат на сайте.
+              </EmptyPage.Description>
+              <EmptyPage.Actions>
+                <Button.Root variant="soft">Настроить виджет</Button.Root>
+              </EmptyPage.Actions>
+            </EmptyPage.Root>
+          }
+        />
+      </Card.Root>
+    </>
+  );
+}

package/dist/skill/reference/components/chat-list/examples/structure.tsx

@@ -0,0 +1,135 @@
+/** Every piece of a row: a photo or initials with presence, a glyph beside the name, the author of the last message, media words with a length, a member typing in a group, ticks from sending to failed — `ChatList.ItemIcon`, `ChatList.ItemDescription`, `author`, `kind`, `duration`, `typing`, `status`. */
+import { Avatar, Card, ChatList, hueOf, Icon, type MessageStatus } from "prime-ui-kit";
+
+import styles from "./examples.module.css";
+
+type Dialog = {
+  id: string;
+  name: string;
+  initials: string;
+  photo?: string;
+  online?: boolean;
+  verified?: boolean;
+  group?: boolean;
+  at: Date;
+  author?: string;
+  kind?: "photo" | "voice" | "videoNote" | "file" | "location";
+  duration?: number;
+  text?: string;
+  status?: MessageStatus;
+  typing?: string;
+  unread?: number;
+};
+
+const NOW = new Date(2026, 9, 14, 15, 0);
+const at = (day: number, hour: number, minute: number) => new Date(2026, 9, day, hour, minute);
+
+const DIALOGS: Dialog[] = [
+  {
+    id: "irina",
+    name: "Ирина Белова",
+    initials: "ИБ",
+    photo: "https://images.unsplash.com/photo-1544005313-94ddf0286df2?w=128&h=128&fit=crop",
+    online: true,
+    at: at(14, 14, 40),
+    kind: "photo",
+    text: "Вот так выглядит ошибка",
+    unread: 1,
+  },
+  {
+    id: "prime-bot",
+    name: "Prime Бот",
+    initials: "ПБ",
+    verified: true,
+    at: at(14, 13, 10),
+    kind: "file",
+    text: "Счёт INV-2051.pdf",
+  },
+  {
+    id: "orlov",
+    name: "Дмитрий Орлов",
+    initials: "ДО",
+    at: at(14, 11, 2),
+    author: "Вы",
+    kind: "voice",
+    duration: 42,
+    status: "sending",
+  },
+  {
+    id: "warehouse",
+    name: "Склад «Центральный»",
+    initials: "СЦ",
+    group: true,
+    at: at(13, 18, 30),
+    author: "Олег",
+    kind: "location",
+    text: "Рампа 2",
+    typing: "Анна",
+  },
+  {
+    id: "lena",
+    name: "Елена Смирнова",
+    initials: "ЕС",
+    at: at(12, 9, 0),
+    author: "Вы",
+    kind: "videoNote",
+    duration: 6,
+    status: "read",
+  },
+  {
+    id: "leto",
+    name: "ООО «Лето»",
+    initials: "ЛТ",
+    at: at(1, 16, 45),
+    author: "Вы",
+    text: "Отправил акт повторно",
+    status: "failed",
+  },
+];
+
+export default function ChatListStructureExample() {
+  return (
+    <Card.Root className={styles.pane}>
+      <ChatList.Root
+        items={DIALOGS}
+        getKey={(item) => item.id}
+        defaultValue="irina"
+        now={NOW}
+        renderItem={(item) => (
+          <ChatList.Item
+            time={item.at}
+            status={item.status}
+            unread={item.unread}
+            typing={item.typing}
+          >
+            <ChatList.ItemIcon>
+              <Avatar.Root color={hueOf(item.id)}>
+                {item.photo ? <Avatar.Image src={item.photo} alt="" /> : null}
+                <Avatar.Fallback>{item.initials}</Avatar.Fallback>
+                {item.online ? <Avatar.Status status="online" /> : null}
+              </Avatar.Root>
+            </ChatList.ItemIcon>
+            <ChatList.ItemText>{item.name}</ChatList.ItemText>
+            {item.verified ? (
+              <ChatList.ItemIcon>
+                <Icon name="status.success" tone="accent" label="Официальный аккаунт" />
+              </ChatList.ItemIcon>
+            ) : null}
+            {item.group ? (
+              <ChatList.ItemIcon>
+                <Icon name="object.users" label="Группа" />
+              </ChatList.ItemIcon>
+            ) : null}
+            <ChatList.ItemDescription
+              author={item.author}
+              kind={item.kind}
+              duration={item.duration}
+            >
+              {item.text}
+            </ChatList.ItemDescription>
+          </ChatList.Item>
+        )}
+      />
+    </Card.Root>
+  );
+}

package/dist/skill/reference/components/command-menu/COMPONENT.md

@@ -28,12 +28,13 @@ CommandMenu.Root                 Modal + top-aligned palette panel, query and lo
 ├── CommandMenu.Description      optional <p>
 ├── CommandMenu.Input            search icon + role="combobox" field, faint hairline below
 ├── CommandMenu.List             role="listbox", scrolls; skeleton rows while loading / loading more
-│   ├── CommandMenu.Empty        compact EmptyPage while nothing matches; may hold a CommandMenu.Item
-│   └── CommandMenu.Group        role="group", named by `label`
-│       └── CommandMenu.Item     <button role="option">
-│           ├── CommandMenu.ItemIcon
-│           ├── CommandMenu.ItemText       title + description line
-│           └── CommandMenu.ItemShortcut   Kbd at the end
+│   ├── CommandMenu.Empty        compact EmptyPage while nothing matches; text only
+│   ├── CommandMenu.Group        role="group", named by `label`
+│   │   └── CommandMenu.Item     <button role="option">
+│   │       ├── CommandMenu.ItemIcon
+│   │       ├── CommandMenu.ItemText       title + description line
+│   │       └── CommandMenu.ItemShortcut   Kbd at the end
+│   └── CommandMenu.Item persistent        optional, last: «Создать «{query}»», shown whatever the query
 ├── load error                   after the List: compact EmptyPage, role="alert", retry Button
 └── CommandMenu.Footer           key hints, hairline above
     └── CommandMenu.FooterHint   Kbd per key + label
@@ -98,6 +99,7 @@ CommandMenu.Root                 Modal + top-aligned palette panel, query and lo
 | `keywords` | `string` | — | Extra words for the query (synonyms, English names). |
 | `onSelect` | `() => void` | — | Runs the command: a click, or Enter while the item is active. |
 | `disabled` | `boolean` | `false` | Unavailable right now: shown muted with `aria-disabled`, skipped by the arrows, does not run. |
+| `persistent` | `boolean` | `false` | Shown whatever the query and never counted as a match (`CommandMenu.Empty` still shows); the arrows reach it after the matches. One «create from the query» item at the end of the list. |
 
 ### CommandMenu.ItemIcon · CommandMenu.ItemShortcut
 `ref` → `HTMLSpanElement` / `HTMLElement` (the `<kbd>`). The `aria-hidden` leading glyph / a `Kbd` key hint at the end of the item — a hint, not a handler. + native props.
@@ -110,7 +112,7 @@ CommandMenu.Root                 Modal + top-aligned palette panel, query and lo
 | `description` | `ReactNode` | — | Second line (path, details): caption, muted. |
 
 ### CommandMenu.Empty
-`ref` → `HTMLDivElement`. A compact EmptyPage (`role="status"`) shown while nothing matches and nothing loads: `labels.empty`, `labels.emptyHint`, and `children` as an action — a button or a `CommandMenu.Item`.
+`ref` → `HTMLDivElement`. A compact EmptyPage (`role="status"`) shown while nothing matches and nothing loads: `labels.empty` and `labels.emptyHint`, text only. An action for the query is a `persistent` `CommandMenu.Item` at the end of the list.
 
 ### CommandMenu.Footer · CommandMenu.FooterHint
 `ref` → `HTMLDivElement` / `HTMLSpanElement`. A bottom row of hints with a hairline above / one hint: every entry of `keys` in its own `Kbd`, then the label (`children`). + native props.
@@ -141,7 +143,7 @@ One look: the floating layer of the ladder (it is a Modal), `--prime-modal-radiu
 | `closeOnOutsideClick={false}` | the scrim does not close it | A required pick | |
 | `closeOnEscape={false}` | Escape does nothing | A required pick that must not be skipped | |
 
-**Combinations** — one palette per app; open it with ⌘K / Ctrl+K and a visible button. Add a Footer with key hints when keyboard use is not obvious. A server search: `search` / `onSearchChange` + `filter={false}` + `loading`; paging adds `hasMore`, `loadingMore`, `onLoadMore`; a failed request `loadError` + `onRetry`. A «create from the query» action is a `CommandMenu.Item` inside `CommandMenu.Empty`: it shows only while nothing matches, the arrows and Enter reach it, and it never counts as a match.
+**Combinations** — one palette per app; open it with ⌘K / Ctrl+K and a visible button. Add a Footer with key hints when keyboard use is not obvious. A server search: `search` / `onSearchChange` + `filter={false}` + `loading`; paging adds `hasMore`, `loadingMore`, `onLoadMore`; a failed request `loadError` + `onRetry`. Creating from the query is ONE `persistent` `CommandMenu.Item` at the end of the List («Создать клиента «{query}»», rendered while the query is not empty): it stays when a namesake matches (the query may be a new client of the same name), it never counts as a match, and the arrows reach it after the matches; while nothing matches it is the active item, so Enter runs it. `CommandMenu.Empty` then holds only the text — never put the action in both places.
 
 ## States
 | State | Driven by | DOM |
@@ -150,7 +152,8 @@ One look: the floating layer of the ladder (it is a Modal), `--prime-modal-radiu
 | active item | arrows, Home, End, pointer move | `aria-selected="true"`, `data-highlighted="true"`: a fill only, no movement |
 | filtered out | the query | `hidden` on items and on groups without matches |
 | matched text | the query | the first match in the item's text children and in `ItemText` is wrapped in a `<mark>` in `accent-text`, no fill (same as SmartFilter) |
-| nothing found | the query | `CommandMenu.Empty` with `role="status"`; hidden while loading or after a load error. A `CommandMenu.Item` inside it (create from the query) is reached by the arrows and Enter and never counts as a match |
+| nothing found | the query | `CommandMenu.Empty` with `role="status"`; hidden while loading or after a load error. A `persistent` item stays beside it and is the active one |
+| persistent item | `persistent` | always shown (not `hidden` by the query), excluded from the match count, walked after the matches |
 | query | `search` / `defaultSearch` / `onSearchChange` on Root | the search field's value; cleared when the palette closes |
 | loading | `loading` | `aria-busy` on the list and the field; with no item on screen, `aria-hidden` skeleton rows (`data-skeleton`); `labels.loading` in a polite live region |
 | loading more | `loadingMore` | skeleton rows after the items; the end of the list is watched while `hasMore` (`onLoadMore` once per batch) |
@@ -204,7 +207,7 @@ One look: the floating layer of the ladder (it is a Modal), `--prime-modal-radiu
 | [structure.tsx](examples/structure.tsx) | Optional parts: a visible title and description, a description line and a key hint in items, and a footer with key hints — `CommandMenu.Title`, `CommandMenu.ItemText`, `CommandMenu.ItemShortcut`, `CommandMenu.Footer`. |
 | [sizes.tsx](examples/sizes.tsx) | Every size tier: rows, text, icons and the search row follow it; match the density of the app — `size`. |
 | [states.tsx](examples/states.tsx) | A disabled item stays visible but muted and is skipped by the arrows, and an empty result speaks in the words of the task — `disabled`, `labels`. |
-| [server-search.tsx](examples/server-search.tsx) | Orders searched on the server: the parent loads results for the query and the next page at the end of the list; with nothing found the palette offers to create an order — `search`, `onSearchChange`, `filter`, `loading`, `hasMore`, `loadingMore`, `onLoadMore`, `CommandMenu.Empty`. |
+| [server-search.tsx](examples/server-search.tsx) | Orders searched on the server: the parent loads results for the query and the next page at the end of the list; one persistent item at the end creates an order from the query, found or not — `search`, `onSearchChange`, `filter`, `loading`, `hasMore`, `loadingMore`, `onLoadMore`, `persistent`. |
 | [load-error.tsx](examples/load-error.tsx) | The results failed to load: the palette says so instead of the list, and a retry asks again with the button loading until the server answers; the first retry fails too, the second brings the results — `loadError`, `onRetry`. |
 | [dismiss.tsx](examples/dismiss.tsx) | A required pick during an import: a stray click on the scrim does not close the palette, only Escape or a choice — `closeOnOutsideClick`, `closeOnEscape`. |
 | [controlled.tsx](examples/controlled.tsx) | The parent owns the query: it shows the text outside and a command resets it; the palette clears it on close — `search`, `onSearchChange`. |
@@ -218,7 +221,8 @@ One look: the floating layer of the ladder (it is a Modal), `--prime-modal-radiu
 - No name for the dialog → add `CommandMenu.Title` (visually hidden if needed) or `aria-label`.
 - Server results squeezed through `keywords` so the kit filter keeps them → set `filter={false}`.
 - A hand-drawn spinner or «Загрузка…» item → set `loading` (skeleton rows) and `loadingMore`.
-- A «Создать …» action placed beside the results with a hand-made visibility check → put it in `CommandMenu.Empty` as a `CommandMenu.Item`.
+- A «Создать …» action shown only while nothing matches (inside `CommandMenu.Empty`, or behind a hand-made check) → one `persistent` `CommandMenu.Item` at the end of the List: it must stay when a namesake matches.
+- The create action both in `CommandMenu.Empty` and in the list → one `persistent` item; `Empty` holds only the text.
 
 ## Related
 - **Built from:** [Modal](../modal/COMPONENT.md) (dialog, scrim, focus, Title / Description), [ScrollContainer](../scroll-container/COMPONENT.md) (`List`), [EmptyPage](../empty-page/COMPONENT.md) (`Empty`, load error), [Skeleton](../skeleton/COMPONENT.md) (loading rows), [Button](../button/COMPONENT.md) (retry), [Kbd](../kbd/COMPONENT.md) (`ItemShortcut`, `FooterHint`), `Icon` (search glyph, retry)

package/dist/skill/reference/components/command-menu/examples/server-search.tsx

@@ -1,4 +1,4 @@
-/** Orders searched on the server: the parent loads results for the query and the next page at the end of the list; with nothing found the palette offers to create an order — `search`, `onSearchChange`, `filter`, `loading`, `hasMore`, `loadingMore`, `onLoadMore`, `CommandMenu.Empty`. */
+/** Orders searched on the server: the parent loads results for the query and the next page at the end of the list; one persistent item at the end creates an order from the query, found or not — `search`, `onSearchChange`, `filter`, `loading`, `hasMore`, `loadingMore`, `onLoadMore`, `persistent`. */
 import { Button, CommandMenu, Icon } from "prime-ui-kit";
 import * as React from "react";
 
@@ -69,14 +69,7 @@ export default function CommandMenuServerSearchExample() {
       >
         <CommandMenu.Input placeholder="Номер заказа или клиент" />
         <CommandMenu.List>
-          <CommandMenu.Empty>
-            <CommandMenu.Item value={`создать заказ ${search}`} onSelect={close}>
-              <CommandMenu.ItemIcon>
-                <Icon name="action.add" />
-              </CommandMenu.ItemIcon>
-              Создать заказ для «{search}»
-            </CommandMenu.Item>
-          </CommandMenu.Empty>
+          <CommandMenu.Empty />
           {orders.map((order) => (
             <CommandMenu.Item key={order.id} value={order.id} onSelect={close}>
               <CommandMenu.ItemText description={`${order.client} · ${order.total}`}>
@@ -84,6 +77,15 @@ export default function CommandMenuServerSearchExample() {
               </CommandMenu.ItemText>
             </CommandMenu.Item>
           ))}
+          {/* One create item at the end: it stays when an order of the same name is found. */}
+          {search.trim() ? (
+            <CommandMenu.Item persistent value={`создать заказ ${search}`} onSelect={close}>
+              <CommandMenu.ItemIcon>
+                <Icon name="action.add" />
+              </CommandMenu.ItemIcon>
+              Создать заказ для «{search.trim()}»
+            </CommandMenu.Item>
+          ) : null}
         </CommandMenu.List>
       </CommandMenu.Root>
     </>

package/dist/skill/reference/components/composer/COMPONENT.md

@@ -38,7 +38,7 @@ Composer.Root                  <form>: the column below, one tier for every part
    ├─ Composer.Attach          paperclip: FileUpload trigger="button", or a Dropdown of kinds
    │  └─ Composer.Item         a kind of attachment (accept), with Composer.ItemIcon
    ├─ (field)                  Textarea.Root rows={1} maxRows={8}, no focus ring (the caret shows focus)
-   │  └─ (toolbar)             floating role="toolbar" over a selection: 6 ghost Buttons with Tooltip + Kbd
+   │  └─ (toolbar)             floating role="toolbar" over a selection: 7 ghost Buttons with Tooltip + Kbd
    ├─ (recording bar)          over the paperclip and the field cells: delete · pause Buttons · pulsing
    │                           dot (a pause glyph while paused) · timer · live waveform canvas (locked),
    │                           or dot · timer · «Влево — отмена» (held)
@@ -107,7 +107,7 @@ In an optimistic chat the send returns at once: add the message to the list with
 | `defaultRecordMode` | `"voice" \| "video"` | `"voice"` | Initial record mode, uncontrolled. |
 | `onRecordModeChange` | `(mode: "voice" \| "video") => void` | — | A double click / double tap on the record button (or ↑ / ↓ on it) switched voice and video. |
 | `queue` | `Pick<UploadQueue, "items" \| "add" \| "retry" \| "remove" \| "clear" \| "move">` | — | Attachments, usually `useUploadQueue(…)`: the paperclip, a paste and a drop add to it, and a tray above the row shows them as one reorderable strip of tiles. Without `queue` paste and drop of files do nothing. |
-| `formatting` | `boolean` | `true` | Selecting text shows a floating toolbar (bold, italic, strikethrough, code, link, quote) and enables the hotkeys; each writes Markdown around the selection. `false` turns both off. |
+| `formatting` | `boolean` | `true` | Selecting text shows a floating toolbar of seven Markdown tools and enables their hotkeys; a tool wraps the selection, a second press unwraps it. `false` turns both off. |
 | `size` | `"xs" \| "s" \| "m" \| "l" \| "xl"` | `host tier, else "m"` | Tier of the field, the buttons and the bar text. Without it the tier of its host, else `m`. |
 | `disabled` | `boolean` | `false` | A closed conversation: the field, the paperclip and the button are disabled; nothing is pasted or dropped. A disabled `Fieldset` around it sets it too (`data-disabled` included). |
 | `inputRef` | `Ref<HTMLTextAreaElement>` | — | The message `<textarea>`: focus it after «Ответить» in a message menu. |
@@ -170,7 +170,7 @@ Composer has no `variant`; what the row shows follows its state.
 ### Flags
 | Value | Looks like | Use when | Default |
 |---|---|---|---|
-| `formatting` | a floating toolbar over a selection; Mod-hotkeys | always, unless the chat shows plain text only | `true` |
+| `formatting` | a floating toolbar over a selection (bold, italic, strikethrough, code, spoiler, link, quote); Mod-hotkeys | always, unless the chat shows plain text only | `true` |
 | `disabled` | the field, paperclip and button disabled | a closed conversation, no permission to write | `false` |
 | `queue` | the tray above the field: one strip of tiles — photos, videos and files; paste and drop take files | the chat accepts files | — |
 | `onSendVoice` / `onSendVideoNote` | an empty field offers the record button | the chat takes voice / video messages | — |
@@ -218,7 +218,7 @@ Motion: the tray opens and closes as a Crossfade (fade and height glide, the row
 | `Mod + Enter` | Always sends, on a touch screen too. |
 | `↑` | In an empty field opens your last message for editing (`onEditLast`). |
 | `Escape` | Clears a selection with the toolbar, then cancels the reply or edit; while recording throws the recording away and stops there, so an enclosing Modal or Drawer stays open. |
-| `Mod + B` · `Mod + I` · `Mod + Shift + X` · `Mod + E` · `Mod + K` · `Mod + Shift + 9` | Bold, italic, strikethrough, code, link and quote for the selection; the physical key counts, so any layout works. |
+| `Mod + B` · `Mod + I` · `Mod + Shift + X` · `Mod + E` · `Mod + Shift + H` · `Mod + K` · `Mod + Shift + 9` | Bold, italic, strikethrough, code, spoiler, link and quote for the selection; the physical key counts, so any layout works. |
 | `Enter` · `Space` | On the record button: record hands-free at once. During a hands-free recording, wherever the focus is in the composer: Enter sends the recording (a paused one too), Space pauses and resumes it — the timer and the waveform stand, the dot turns into a pause glyph. |
 | `↑` · `↓` | On the record button, with voice and video both offered: switches voice and video (`aria-keyshortcuts`, named in the button's description). |
 | `←` · `→` | Move between the formatting buttons. |
@@ -272,6 +272,7 @@ Motion: the tray opens and closes as a Crossfade (fade and height glide, the row
 | `italic` | `"Курсив"` | Italic tool. |
 | `strikethrough` | `"Зачёркнутый"` | Strikethrough tool. |
 | `code` | `"Моноширинный"` | Code tool. |
+| `spoiler` | `"Скрытый текст"` | Spoiler tool (`\|\|…\|\|`). |
 | `link` | `"Ссылка"` | Link tool. |
 | `quote` | `"Цитата"` | Quote tool. |
 | `cancelReply` | `"Отменить ответ"` | Name of the close button of a reply bar. |
@@ -285,7 +286,7 @@ Motion: the tray opens and closes as a Crossfade (fade and height glide, the row
 | [attachments.tsx](examples/attachments.tsx) | Warehouse photos and documents for a client go through an upload queue: the paperclip opens the file picker, a paste or a drop adds files too, every attachment is a tile of one strip that drags into its order, and send waits until the uploads finish — `queue`, `Composer.Attach`, `useUploadQueue`. |
 | [reply-edit.tsx](examples/reply-edit.tsx) | Answering a client's message and correcting your own: the bar above the field quotes the message, Escape or the cross cancels, ↑ in an empty field opens your last message, send becomes save and hands over the message id — `Composer.Context`, `mode`, `value`, `onDismiss`, `onEditLast`. |
 | [typing.tsx](examples/typing.tsx) | The other side's status line follows what you do: typing, recording a voice or a video message, then nothing — `onActivityChange`. |
-| [formatting.tsx](examples/formatting.tsx) | Selected text gets a toolbar of bold, italic, strikethrough, code, link and quote, each with its shortcut, written as Markdown around the selection — `formatting`. |
+| [formatting.tsx](examples/formatting.tsx) | Selected text gets a toolbar of bold, italic, strikethrough, code, spoiler, link and quote, each with its shortcut, written as Markdown around the selection — `formatting`. |
 | [voice.tsx](examples/voice.tsx) | Voice and round video messages: hold the button to record and release to send, slide left to cancel, slide up or tap to record hands-free; a double tap or double click switches voice and video — `onSendVoice`, `onSendVideoNote`, `recordMode`. |
 | [states.tsx](examples/states.tsx) | A closed conversation is disabled, a slow send keeps the text with a busy button until the server answers — `disabled`, `onSend`. |
 | [controlled.tsx](examples/controlled.tsx) | Every conversation keeps its own draft: switching the chat swaps the text, a template button fills it from outside — `value`, `onValueChange`. |
@@ -297,7 +298,7 @@ Motion: the tray opens and closes as a Crossfade (fade and height glide, the row
 - Rendering the attachment rows yourself → pass `queue`; the tray, paste and drop come with it.
 - Sending photos as file messages → send `media` as one `Message.Media` album (its order is the tray's), `files` as `Message.File`.
 - Showing a sent photo from `item.preview` → the queue revokes it after the send; use `result` or your own object URL of `item.file`, revoked with its message.
-- Expecting HTML from the formatting → the text is Markdown (`**…**`, `_…_`, `~~…~~`, `` `…` ``, Markdown links, `> `); render it with the message component, never as HTML.
+- Expecting HTML from the formatting → the text is Markdown (`**…**`, `_…_`, `~~…~~`, `` `…` ``, `||…||`, Markdown links, `> `); render it with the message component, never as HTML.
 - Hiding the reply bar by CSS → unmount `Composer.Context` in `onDismiss`; Escape and a sent message call the same handler.
 - Keeping the replied message in a closure of `onSend` → give the bar its `value`; `onSend` gets `replyTo` / `editOf`.
 - Sending «печатает» from `onValueChange` on every keystroke → use `onActivityChange`: it fires on a change only and ends the signal on rest, send and clear.
@@ -306,5 +307,5 @@ Motion: the tray opens and closes as a Crossfade (fade and height glide, the row
 - An `aria-label` on the root to rename the field → use `labels.placeholder` (the field) and `labels.region` (the form).
 
 ## Related
-- **Built from:** [Textarea](../textarea/COMPONENT.md), [Button](../button/COMPONENT.md), [FileUpload](../file-upload/COMPONENT.md) (the paperclip; `FileUpload.Queue layout="strip"`, the tray), [Crossfade](../crossfade/COMPONENT.md), [Checkbox](../checkbox/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md), [Tooltip](../tooltip/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [Hint](../hint/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), Icon (`action.*`, `format.*`, `nav.chevronLeft`, `nav.chevronUp`, `status.locked`), `useUploadQueue` (the `queue`), `internal/ring` (the video preview's ring)
+- **Built from:** [Textarea](../textarea/COMPONENT.md), [Button](../button/COMPONENT.md), [FileUpload](../file-upload/COMPONENT.md) (the paperclip; `FileUpload.Queue layout="strip"`, the tray), [Crossfade](../crossfade/COMPONENT.md), [Checkbox](../checkbox/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md), [Tooltip](../tooltip/COMPONENT.md), [Kbd](../kbd/COMPONENT.md), [Hint](../hint/COMPONENT.md), [Skeleton](../skeleton/COMPONENT.md), Icon (`action.*`, `format.*`, `nav.chevronLeft`, `nav.chevronUp`, `status.locked`), `useUploadQueue` (the `queue`), `internal/ring` (the video preview's ring), `internal/textFormatting` + `internal/textFormattingToolbar` (the formatting shared with Textarea `formatting`)
 - **See also:** [Message](../message/COMPONENT.md) — the bubbles the composer writes into; [VoicePlayer](../voice-player/COMPONENT.md) — plays a sent voice message; [Textarea](../textarea/COMPONENT.md), [Input](../input/COMPONENT.md)

package/dist/skill/reference/components/composer/examples/formatting.tsx

@@ -1,4 +1,4 @@
-/** Selected text gets a toolbar of bold, italic, strikethrough, code, link and quote, each with its shortcut, written as Markdown around the selection — `formatting`. */
+/** Selected text gets a toolbar of bold, italic, strikethrough, code, spoiler, link and quote, each with its shortcut, written as Markdown around the selection — `formatting`. */
 import { Composer } from "prime-ui-kit";
 
 import styles from "./examples.module.css";

package/dist/skill/reference/components/confirm-dialog/COMPONENT.md

@@ -15,6 +15,7 @@
 - An action that can be undone → do it at once and offer «Отменить» in a [Notification](../notification/COMPONENT.md).
 - A hold-to-confirm right on the button (no dialog) → `holdToConfirm` on [Button](../button/COMPONENT.md).
 - Unsaved changes in a Modal or Drawer form → `Modal.Guard` / `Drawer.Guard dirty` (it opens this dialog itself).
+- A confirm that asks for input (a reason for a refusal, a comment) → [Modal](../modal/COMPONENT.md) `size="s"` with the field in `Modal.Body`, the action button in `Modal.Confirm`, and `Modal.Guard busy` while it is sent.
 
 ## Import
 ```tsx

package/dist/skill/reference/components/data-table/COMPONENT.md

@@ -110,6 +110,9 @@ Generic over `Row`; `ref` → `HTMLDivElement`. A card-fill block with an option
 | `getRowGroup` | `(row: Row) => string \| number` | — | Group key of a row: each group gets a header row and its own `<tbody>`. Groups keep the order in which they first appear in `rows`; a sort orders the rows inside each group; a group split by paging repeats its header. |
 | `renderGroupHeader` | `(group: DataTableGroup<Row>) => ReactNode` | `the group key` | Content of a group header; `group.rows` holds every row of the group (all pages) for totals. Children are laid out start / end in the visible width. |
 | `stickyGroupHeaders` | `boolean` | `false` | Group headers stick under the head (or the top edge) while their rows scroll. |
+| `collapsedGroups` | `(string \| number)[]` | — | Collapsed group keys, controlled. Any prop of this triad makes groups fold: a chevron toggle leads each header, rows fold like sub-rows. «Select all» and paging still count collapsed rows. |
+| `defaultCollapsedGroups` | `(string \| number)[]` | — | Initially collapsed group keys, uncontrolled; `[]` — every group open but foldable. |
+| `onCollapsedGroupsChange` | `(collapsedGroups: (string \| number)[]) => void` | — | The collapsed group keys changed (a group header toggle). |
 | `labels` | `Partial<DataTableLabels>` | — | Built-in strings, see Labels. |
 | `…rest` | `Omit<HTMLAttributes<HTMLDivElement>, "children">` | — | `className` and the other attributes of the root `<div>`. |
 
@@ -214,6 +217,7 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 | `highlightColumnOnHover` | `fill-subtle-active` wash on the hovered column | comparison tables | `false` |
 | `stickyHeader` · `stickyFirstColumn` | opaque sticky head / first column with a hairline edge; on screens lower than 480px the head scrolls with the rows | long / wide tables in a `scrollHeight` window | `false` |
 | `stickyGroupHeaders` | group header rows stick under the head while their rows scroll | long grouped tables in a `scrollHeight` window | `false` |
+| `collapsedGroups` · `defaultCollapsedGroups` · `onCollapsedGroupsChange` | any of the three makes groups fold: a chevron toggle leads each group header, a collapsed group shows its header alone | long grouped tables where people work one group at a time; `defaultCollapsedGroups={[]}` starts with every group open | off |
 | column `hideable` | `false`: the column stays even when listed in `hiddenColumns`; checked and disabled in `DataTable.ColumnsMenu` | the key column that names the row | `true` |
 | `showHeader` | head row shown | off only for self-explanatory key/value tables | `true` |
 | `fullWidth` | spans the container; `false` = content width | `false` for short lookup tables in wide layouts | `true` |
@@ -221,6 +225,8 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 | column `truncate` | one line with an ellipsis and a `title` | long names in narrow columns | — |
 | column `scale` | each cell shaded by its value on the five-step chart scale, the value kept in the cell | a heatmap: counts by person × month, load by day | — |
 
+`scale: true` gives each column its own range (its minimum to maximum over all rows), so the same value can take different shades in two columns. Several columns that read as one heatmap (one column per month) share a scale when each gets the same fixed `{ min, max }` — both ends, since an open end is still the column's own: `scale: { min: 0, max: 25 }` on every month column ([heatmap.tsx](examples/heatmap.tsx)).
+
 ## States
 | State | Driven by | DOM |
 |---|---|---|
@@ -228,8 +234,8 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 | loading more | `loadingMore`, or a pending promise from `onLoadMore` | `aria-busy`; footer `labels.loadingMore`; no new request until it settles (after a rejection, until the rows change) |
 | refreshing | `loading` with rows on screen (a refetch, another server page or sort) | the rows, head, toolbar and footer stay; `aria-busy` on the table, `data-loading` on the root — no skeleton |
 | new server page | `source="server"` and `rows` replaced (not appended) | the body remounts with the swap fade (`swapMotion`), the viewport scrolls to its top; no per-row enter |
-| empty | no rows and not loading | compact EmptyPage with `empty` or `labels.empty` (`role="status"`), or the `empty` node |
-| error | `error` | body replaced by a `role="alert"` message in `danger-text`; range and infinite status hidden |
+| empty | no rows and not loading | compact EmptyPage with `empty` or `labels.empty` (`role="status"`), or the `empty` node; centred in the visible width, not across every column of a wide table |
+| error | `error` | body replaced by a `role="alert"` message in `danger-text`, centred in the visible width; range and infinite status hidden |
 | sorted | `sort` / `defaultSort` | `aria-sort` and `data-sorted` on the head; the sort icon: unsorted `text-disabled`, hover `text-muted`, sorted `text-secondary` — never accent |
 | selected | `selected` / `defaultSelected` | `aria-selected` rows with `accent-soft` fill; polite `labels.selectedCount` |
 | expanded | `expanded` / `defaultExpanded` | `data-expanded` on the parent row (one step darker); toggle `aria-expanded`, chevron turns 90° |
@@ -239,6 +245,7 @@ Heads keep `start` whatever the cell alignment, with the sort icon at the end ed
 | hidden columns | `hiddenColumns` / `defaultHiddenColumns`, `DataTable.ColumnsMenu` | the listed columns (except `hideable: false`) are not rendered in the head, rows, skeleton or state rows; widths are measured again; a sort by a hidden column keeps the row order |
 | opening rows | `getRowHref` / `onRowClick`, `isRowClickable` | `data-clickable` (pointer, pressed wash) on rows that open; link rows: `data-link`, an `<a data-row-link>` in every content cell; in-place rows: `tabindex="0"`. Focus (the link, or the row) rings the whole row with the hover wash |
 | grouped | `getRowGroup` | one `<tbody>` per group run on screen, opened by a `<th scope="rowgroup">` row one ladder step off the table; `data-sticky` on it with `stickyGroupHeaders` |
+| collapsed group | `collapsedGroups` / `defaultCollapsedGroups` | `data-collapsed` on the group header row, its toggle `aria-expanded="false"` with the chevron at rest; the group's `<tbody>` holds the header alone, its rows only lay out the column widths in the hidden measuring body. Its rows fold away and back like sub-rows (`data-fold`, `base`), whether a toggle or the owner changed the keys. «Select all» still takes the rows of collapsed groups; paging still counts them |
 | reorderable | `onReorder` (not with `getRowChildren` / `renderExpanded`) | `data-reorderable` on the root; a leading handle column (drag by the handle, a touch hold, Alt + ↑ / ↓ on it); each run of rows (the page, or each group) is a `Dnd.Sortable` `<tbody>`, so with `getRowGroup` rows move inside their group; a row put last on a page stands in front of the first row of the next page; a lifted row leaves a dashed gap row across every column, its neighbours glide (`base`), the copy flies in a one-row table at the row's column widths and sets down on its new place; a keyboard move glides the same way |
 | saving a move | `onReorder` returned a pending promise | the row stays in its new place, `aria-busy`, its cells at 60% and a Spinner in its handle cell; a rejection glides it back |
 | reorder off | a sort by a column | the handles are disabled with a Tooltip (`labels.reorderSorted`); no drag, no Alt + arrows |
@@ -258,7 +265,9 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 - `DataTable.ColumnsMenu` is an outline neutral Button one tier below the table (the `view.columns` icon, `labels.columns`); its Dropdown lists every column and ends with `labels.showAllColumns`. A `hideable: false` column stays checked and disabled, and the last visible column cannot be hidden. With `align="auto"` a trigger near the end of the screen lines up the panel's end edge and the panel grows toward the start, and the other way near the start.
 - Row height per `size` is public: `--prime-table-row-height-xs` · `-s` · `-m` · `-l` · `-xl` (36 · 36 · 44 · 52 · 52). A placeholder outside the table that stands in its geometry (a heatmap, a matrix skeleton) uses the same token.
 - A row that opens keeps controls out of its key cell (that cell is the link); controls in other cells stand above the row's link. Mark a custom widget with `data-row-click-ignore`.
-- Group headers: the name at the start, totals at the end (`renderGroupHeader` returns both, the kit lays them out across the visible width), head-tier text in `text-secondary`, row height = the head height.
+- Group headers: the name at the start, totals at the end (`renderGroupHeader` returns both, the kit lays them out across the visible width), head-tier text in `text-secondary`, row height = the head height. With collapsible groups the chevron toggle (the expand toggle's ghost Button) leads the header at the cell padding.
+- The empty and error content stands in a sticky box of the visible width: a wide table centres it in the viewport, and it stays there while the table scrolls sideways.
+- A trend per row: a compact [Sparkline](../sparkline/COMPONENT.md) (`layout="compact"`) in a cell fits the row height; its pointer and keys never open the row.
 - Long data needs no slicing: past 100 rows a body in a bounded viewport (`scrollHeight`, `"fill"`, `paging="infinite"`) renders only the rows around the view; spacer rows keep the scrollbar exact, the focused row stays rendered, rows carry `aria-rowindex` and the table `aria-rowcount`. Grouped (`getRowGroup`), reorderable (`onReorder`) and `renderExpanded` bodies, and a table the page scrolls, render every row. The browser's find-in-page sees only rendered rows: give a long table a search in `toolbar`.
 - `scrollHeight="fill"` needs a parent with a height: a flex or grid column with `min-height: 0`, `PageContent.Root fill` in an `AppShell.Root fillViewport`, or a sized pane.
 - The sticky head stops sticking on screens lower than 480px (landscape phones), so it never takes a large share of the height.
@@ -272,7 +281,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 | Key | Action |
 |---|---|
 | `Tab` | Moves through the toolbar (`DataTable.ColumnsMenu`), sort buttons, row handles, checkboxes, expand toggles, row links, rows that open in place and Pagination. |
-| `Enter` · `Space` | Sorts by the column, toggles the row, or opens the focused row (`onRowClick`); Enter on a row link follows it. |
+| `Enter` · `Space` | Sorts by the column, toggles the row or the group, or opens the focused row (`onRowClick`); Enter on a row link follows it. |
 | `Space` | Toggles the focused row checkbox. |
 | `Shift + Space` | Selects the range from the last toggled row. |
 | `Alt + ↑` · `Alt + ↓` | On a row handle (`onReorder`), moves the row one place up or down. |
@@ -288,6 +297,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 - After a selection change a polite live region announces `labels.selectedCount`; selected rows carry `aria-selected`.
 - A row handle is a button named by `labels.reorderRow` with `aria-keyshortcuts`; a pick-up, a drop and a keyboard move are announced in a polite live region («Договор: позиция 2 из 6»). While its move is saved the row is `aria-busy`; while the table is sorted the handles are disabled and a tooltip gives `labels.reorderSorted`.
 - The expand toggle is a button with `aria-expanded`, `aria-controls` (detail row or sub-rows) and `labels.expand` / `labels.collapse`.
+- A group toggle (collapsible groups) is a button in the group header with `aria-expanded`, `aria-controls` (the group's rows, while open; not on reorderable rows, which carry no id) and `labels.expandGroup` / `labels.collapseGroup` with `{group}`.
 - Loading sets `aria-busy` and a `labels.loading` status; the error is `role="alert"`; the default empty state is `role="status"`.
 
 ### Labels
@@ -309,6 +319,8 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 | `showAllColumns` | `"Показать все"` | The `DataTable.ColumnsMenu` item that shows every column again. |
 | `reorderRow` | `"Переместить строку {label}"` | `aria-label` of a row's drag handle (`onReorder`); `{label}` is `getRowLabel(row)`. |
 | `reorderSorted` | `"Порядок задан сортировкой. Сбросьте её, чтобы перемещать строки"` | Tooltip of the disabled handles while the table is sorted by a column. |
+| `expandGroup` | `"Развернуть группу {group}"` | Name of the toggle of a collapsed group; `{group}` is the group key. |
+| `collapseGroup` | `"Свернуть группу {group}"` | Name of the toggle of an expanded group; `{group}` is the group key. |
 
 ## Examples
 | Example | Shows |
@@ -317,6 +329,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 | [sizes.tsx](examples/sizes.tsx) | Every density: rows from 36 to 52 px, the head at the control height of the tier — `size`. |
 | [numeric.tsx](examples/numeric.tsx) | An inventory report: number columns align to the end in tabular figures, a long name stays on one line with a title — `numeric`, `truncate`, `maxWidth`. |
 | [heatmap.tsx](examples/heatmap.tsx) | Deals closed per manager and month as a heatmap: each count shades its cell on the chart scale and stays readable in it — `scale`, `numeric`. |
+| [trend.tsx](examples/trend.tsx) | Clients with revenue by month as a compact Sparkline in a cell of each row, next to the half-year total — `cell`, `width`. |
 | [content-width.tsx](examples/content-width.tsx) | A short lookup table sized by its content with a centered column, and a `grow` column that takes the free width and wraps — `fullWidth`, `align`, `grow`. |
 | [appearance.tsx](examples/appearance.tsx) | Row styling: zebra rows without lines, a column wash under the pointer, a headless key/value list — `striped`, `rowDividers`, `highlightColumnOnHover`, `columnDividers`, `showHeader`. |
 | [toolbar.tsx](examples/toolbar.tsx) | A campaign list with search, a status filter and export above the table; the empty text when nothing matches — `toolbar`, `empty`. |
@@ -327,7 +340,7 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 | [row-link.tsx](examples/row-link.tsx) | Invoices whose rows are links: ⌘-click or a middle click opens a new tab, a plain click routes inside the app, the totals row and the ⋯ menu never open a row — `getRowHref`, `onRowClick`, `isRowClickable`. |
 | [row-open.tsx](examples/row-open.tsx) | Deals that open in a side panel: a click, or Enter and Space on the focused row; the panel keeps the last deal while it slides away — `onRowClick`. |
 | [reorder.tsx](examples/reorder.tsx) | Pipeline stages put in order by the handle or Alt + ↑ / ↓; each move is saved with a spinner in its handle, and sorting by a column turns the handles off — `onReorder`, `getRowLabel`. |
-| [groups.tsx](examples/groups.tsx) | Payments grouped by month with the month's total in its header row; headers stay on top while their rows scroll — `getRowGroup`, `renderGroupHeader`, `stickyGroupHeaders`. |
+| [groups.tsx](examples/groups.tsx) | Payments grouped by month with the month's total in its header row; headers stay on top while their rows scroll, a past month folds away — `getRowGroup`, `renderGroupHeader`, `stickyGroupHeaders`, `defaultCollapsedGroups`. |
 | [columns-visibility.tsx](examples/columns-visibility.tsx) | Orders with the column chooser in the toolbar; the choice outlives a reload in local storage, the order number always stays — `DataTable.ColumnsMenu`, `hiddenColumns`, `onHiddenColumnsChange`, `hideable`. |
 | [infinite-scroll.tsx](examples/infinite-scroll.tsx) | An audit log that reveals loaded rows in batches and then asks the server for more — `paging`, `infiniteBatchSize`, `hasMore`, `loadingMore`, `onLoadMore`. |
 | [server.tsx](examples/server.tsx) | A CRM deal list the server sorts, pages and searches; a new search returns to page 1 — `source`, `rowCount`, `sort`, `page`, `loading`. |
@@ -355,6 +368,8 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 - Checking `event.target` in `onRowClick` to skip a button or a menu in the row → the table already ignores controls and portals; mark a custom widget with `data-row-click-ignore`.
 - A totals row that opens like a record → `isRowClickable`.
 - Group headers faked with sub-rows or a row in `rows` → use `getRowGroup` + `renderGroupHeader`.
+- A fold button of your own in `renderGroupHeader`, or filtering a group's rows out of `rows` to hide them → pass `defaultCollapsedGroups={[]}` (or the controlled pair): the toggle, its names, the fold motion and «select all» are built in.
+- Columns of one heatmap with `scale: true` each → the same value gets another shade per column; give every column the same `{ min, max }`.
 - Computing the table height from the window → `scrollHeight="fill"` in a parent with a height.
 - Showing your own spinner while `onLoadMore` runs → return its promise; the table shows the status.
 - A server page passed with the default `source` → the table re-sorts it and counts pages from that one page; set `source="server"` and `rowCount`.
@@ -363,4 +378,4 @@ Root attributes: `data-size`, `data-row-dividers`, `data-column-dividers`, `data
 
 ## Related
 - **Built from:** [Checkbox](../checkbox/COMPONENT.md), [Button](../button/COMPONENT.md), [Dropdown](../dropdown/COMPONENT.md) (`DataTable.ColumnsMenu`), [Pagination](../pagination/COMPONENT.md), [ScrollContainer](../scroll-container/COMPONENT.md), [EmptyPage](../empty-page/COMPONENT.md), [VisuallyHidden](../visually-hidden/COMPONENT.md) (loading status, selection announcement), [Skeleton](../skeleton/COMPONENT.md) (loading rows, in the table tier), [Dnd](../dnd/COMPONENT.md) (`onReorder`: `Dnd.Sortable as="tbody"`, `Dnd.Handle`), [Tooltip](../tooltip/COMPONENT.md) and [Spinner](../spinner/COMPONENT.md) (handle hint and busy state), Icon (sort arrows, the expand chevron, the `DataTable.ColumnsMenu` trigger); `useVirtualRows` (the window of a long body)
-- **See also:** [SmartFilter](../smart-filter/COMPONENT.md), [PageToolbar](../page-toolbar/COMPONENT.md), [Gantt](../gantt/COMPONENT.md), [Kanban](../kanban/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [Card](../card/COMPONENT.md)
+- **See also:** [Sparkline](../sparkline/COMPONENT.md) (`layout="compact"` in a cell), [SmartFilter](../smart-filter/COMPONENT.md), [PageToolbar](../page-toolbar/COMPONENT.md), [Gantt](../gantt/COMPONENT.md), [Kanban](../kanban/COMPONENT.md), [Badge](../badge/COMPONENT.md), [Avatar](../avatar/COMPONENT.md), [Card](../card/COMPONENT.md)

package/dist/skill/reference/components/data-table/examples/groups.tsx

@@ -1,4 +1,4 @@
-/** Payments grouped by month with the month's total in its header row; headers stay on top while their rows scroll — `getRowGroup`, `renderGroupHeader`, `stickyGroupHeaders`. */
+/** Payments grouped by month with the month's total in its header row; headers stay on top while their rows scroll, a past month folds away — `getRowGroup`, `renderGroupHeader`, `stickyGroupHeaders`, `defaultCollapsedGroups`. */
 import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 
 type Payment = { id: string; month: string; client: string; date: string; amount: number };
@@ -65,6 +65,7 @@ export default function DataTableGroupsExample() {
         </>
       )}
       stickyGroupHeaders
+      defaultCollapsedGroups={["Август 2026"]}
       stickyHeader
       paging="none"
       scrollHeight={320}