prime-ui-kit 0.9.0 → 0.9.1

package/src/components/data-table/examples/content-width.tsx

@@ -1,45 +1,65 @@
-/** `fillWidth` (default) stretches the table to its container; `fillWidth={false}` sizes it by content; a column can be centered with `align="center"`. Use content width for short lookup tables inside wide layouts. */
-
+/** 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`. */
 import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-type Task = { id: string; task: string; hours: number };
+type Task = { id: string; task: string; hours: number; note: string };
 
-const rows: Task[] = [
-  { id: "T-12", task: "Сверстать отчёт по спринту", hours: 3 },
-  { id: "T-13", task: "Проверить миграции БД", hours: 1.5 },
-  { id: "T-14", task: "Обновить подсказки в форме входа", hours: 2 },
+const TASKS: Task[] = [
+  {
+    id: "T-12",
+    task: "Сверстать отчёт по спринту",
+    hours: 3,
+    note: "Сводка по закрытым задачам, графики скорости команды и список того, что переносится в следующий спринт.",
+  },
+  {
+    id: "T-13",
+    task: "Проверить миграции БД",
+    hours: 1.5,
+    note: "Прогнать миграции на копии продовой базы и сравнить время выполнения с прошлым релизом.",
+  },
+  {
+    id: "T-14",
+    task: "Обновить подсказки в форме входа",
+    hours: 2,
+    note: "Тексты ошибок и подсказок под полями, согласовать формулировки с поддержкой.",
+  },
 ];
 
-const hours = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 });
+const HOURS = new Intl.NumberFormat("ru-RU", { maximumFractionDigits: 1 });
 
-const columns: DataTableColumn<Task>[] = [
+const LOOKUP_COLUMNS: DataTableColumn<Task>[] = [
   { id: "id", header: "Задача", accessor: "id" },
   { id: "task", header: "Описание", accessor: "task" },
-  { id: "hours", header: "Часы", align: "center", cell: (row) => hours.format(row.hours) },
+  { id: "hours", header: "Часы", align: "center", cell: (row) => HOURS.format(row.hours) },
+];
+
+const NOTE_COLUMNS: DataTableColumn<Task>[] = [
+  { id: "id", header: "Задача", accessor: "id" },
+  { id: "task", header: "Название", accessor: "task" },
+  { id: "note", header: "Комментарий", accessor: "note", grow: true },
 ];
 
 export default function DataTableContentWidthExample() {
   return (
-    <div className={styles.stack}>
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
-          fillWidth (по умолчанию)
-        </Typography.Root>
-        <DataTable.Root columns={columns} rows={rows} getRowKey={(row) => row.id} />
-      </div>
-      <div className={styles.group}>
-        <Typography.Root variant="code" tone="muted">
-          fillWidth=&#123;false&#125;
-        </Typography.Root>
-        <DataTable.Root
-          columns={columns}
-          rows={rows}
+    <>
+      <div className={styles.specimen}>
+        <DataTable
+          columns={LOOKUP_COLUMNS}
+          rows={TASKS}
           getRowKey={(row) => row.id}
-          fillWidth={false}
+          fullWidth={false}
         />
+        <Typography as="span" variant="caption" tone="muted">
+          fullWidth=&#123;false&#125; · align="center"
+        </Typography>
+      </div>
+      <div className={styles.specimen}>
+        <DataTable columns={NOTE_COLUMNS} rows={TASKS} getRowKey={(row) => row.id} />
+        <Typography as="span" variant="caption" tone="muted">
+          grow
+        </Typography>
       </div>
-    </div>
+    </>
   );
 }

package/src/components/data-table/examples/controlled.tsx

@@ -0,0 +1,56 @@
+/** Sort and page owned by the parent (a URL or a store): a header click goes asc → desc → none, a new sort returns to page 1 — `sort`, `onSortChange`, `page`, `onPageChange`. */
+import { DataTable, type DataTableColumn, type DataTableSortState } from "prime-ui-kit";
+import * as React from "react";
+
+type Order = { id: number; customer: string; city: string; total: number };
+
+const CUSTOMERS = ["Анна Соколова", "Борис Кравец", "Вера Львова", "Глеб Миронов", "Дарья Носова"];
+const CITIES = ["Москва", "Казань", "Самара", "Томск", "Пермь"];
+
+const ORDERS: Order[] = Array.from({ length: 23 }, (_, i) => ({
+  id: 5000 + i,
+  customer: CUSTOMERS[i % CUSTOMERS.length],
+  city: CITIES[(i * 3) % CITIES.length],
+  total: 1200 + ((i * 7919) % 48_000),
+}));
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "№", accessor: "id", sortable: true, numeric: true, width: "5rem" },
+  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
+  { id: "city", header: "Город", accessor: "city", sortable: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+];
+
+export default function DataTableControlledExample() {
+  const [sort, setSort] = React.useState<DataTableSortState>({ columnId: "total", order: "desc" });
+  const [page, setPage] = React.useState(1);
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      sort={sort}
+      onSortChange={(next) => {
+        setSort(next);
+        setPage(1);
+      }}
+      page={page}
+      onPageChange={setPage}
+      pageSize={5}
+    />
+  );
+}

package/src/components/data-table/examples/detail-panel.tsx

@@ -1,5 +1,4 @@
-/** `renderExpanded` draws a full-width detail row under an expanded row, aligned with the first content column; with `stickyFirstColumn` the toggle sticks too. Use to show order details without leaving the list. */
-
+/** Order details in a full-width row under an expanded order, aligned with the first content column — `renderExpanded`, `defaultExpanded`. */
 import { DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
@@ -11,10 +10,10 @@ type Order = {
   date: string;
   total: number;
   address: string;
-  items: { name: string; qty: number }[];
+  items: string;
 };
 
-const rows: Order[] = [
+const ORDERS: Order[] = [
   {
     id: "o1",
     number: "№ 10 482",
@@ -22,10 +21,7 @@ const rows: Order[] = [
     date: "07.10.26",
     total: 12_480,
     address: "Москва, ул. Тверская, 12, кв. 45",
-    items: [
-      { name: "Кабель USB-C, 2 м", qty: 2 },
-      { name: "Док-станция", qty: 1 },
-    ],
+    items: "Кабель USB-C, 2 м × 2, док-станция × 1",
   },
   {
     id: "o2",
@@ -34,7 +30,7 @@ const rows: Order[] = [
     date: "06.10.26",
     total: 34_900,
     address: "Санкт-Петербург, Невский пр., 28",
-    items: [{ name: 'Монитор 27"', qty: 1 }],
+    items: 'Монитор 27" × 1',
   },
   {
     id: "o3",
@@ -43,19 +39,19 @@ const rows: Order[] = [
     date: "05.10.26",
     total: 4_350,
     address: "Казань, ул. Баумана, 7",
-    items: [{ name: "Клавиатура", qty: 1 }],
+    items: "Клавиатура × 1",
   },
 ];
 
-const rub = new Intl.NumberFormat("ru-RU", {
+const RUB = new Intl.NumberFormat("ru-RU", {
   style: "currency",
   currency: "RUB",
   maximumFractionDigits: 0,
 });
 
-const columns: DataTableColumn<Order>[] = [
+const COLUMNS: DataTableColumn<Order>[] = [
   { id: "number", header: "Заказ", accessor: "number", minWidth: "8rem" },
-  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true, minWidth: "12rem" },
+  { id: "customer", header: "Покупатель", accessor: "customer", sortable: true },
   { id: "date", header: "Дата", accessor: "date", numeric: true },
   {
     id: "total",
@@ -63,44 +59,43 @@ const columns: DataTableColumn<Order>[] = [
     accessor: "total",
     sortable: true,
     numeric: true,
-    cell: (row) => rub.format(row.total),
+    cell: (row) => RUB.format(row.total),
   },
 ];
 
 export default function DataTableDetailPanelExample() {
   return (
-    <DataTable.Root
-      columns={columns}
-      rows={rows}
+    <DataTable
+      columns={COLUMNS}
+      rows={ORDERS}
       getRowKey={(row) => row.id}
       getRowLabel={(row) => row.number}
       renderExpanded={(row) => (
         <dl className={styles.details}>
           <dt>
-            <Typography.Root as="span" variant="body-s" tone="muted">
+            <Typography as="span" variant="body-s" tone="muted">
               Адрес доставки
-            </Typography.Root>
+            </Typography>
           </dt>
           <dd>
-            <Typography.Root as="span" variant="body-s">
+            <Typography as="span" variant="body-s">
               {row.address}
-            </Typography.Root>
+            </Typography>
           </dd>
           <dt>
-            <Typography.Root as="span" variant="body-s" tone="muted">
+            <Typography as="span" variant="body-s" tone="muted">
               Состав
-            </Typography.Root>
+            </Typography>
           </dt>
           <dd>
-            <Typography.Root as="span" variant="body-s">
-              {row.items.map((item) => `${item.name} × ${item.qty}`).join(", ")}
-            </Typography.Root>
+            <Typography as="span" variant="body-s">
+              {row.items}
+            </Typography>
           </dd>
         </dl>
       )}
       defaultExpanded={["o1"]}
-      stickyFirstColumn
-      showPagination={false}
+      paging="none"
     />
   );
 }

package/src/components/data-table/examples/examples.module.css

@@ -1,21 +1,6 @@
-/* Layout only: text roles and colors come from Typography. */
+/* Layout of the DataTable scenarios: semantic tokens only. */
 
-.stack {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-6);
-  width: 100%;
-  min-width: 0;
-}
-
-.group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-/* Two groups pushed to the edges; they wrap on narrow widths. */
+/* Toolbar content: two groups pushed to the edges; they wrap on narrow widths. */
 .toolbar {
   display: flex;
   flex-wrap: wrap;
@@ -26,115 +11,52 @@
   min-width: 0;
 }
 
-.toolbarGroup {
+.filters {
   display: flex;
+  flex: 1 1 auto;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--prime-space-2);
   min-width: 0;
 }
 
-/* The leading group takes the free space so the search can grow. */
-.toolbarGrow {
-  flex: 1 1 auto;
-}
-
-/* Grows from 12rem, at most 20rem. */
+/* The search grows from 12rem, at most 20rem. */
 .search {
   flex: 1 1 calc(var(--prime-space-24) * 2);
   min-width: 0;
   max-width: calc(var(--prime-space-20) * 4);
 }
 
-.tabular {
-  font-variant-numeric: tabular-nums;
-}
-
-/* Columns of at least 18rem. */
-.statesGrid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-24) * 3)), 1fr));
-  gap: var(--prime-space-4);
-  width: 100%;
-  min-width: 0;
-}
-
-.errorBody {
+/* sizes / appearance / states: a table with its caption under it; specimens kept apart. */
+.specimens {
   display: flex;
   flex-direction: column;
-  align-items: center;
-  gap: var(--prime-space-2);
-}
-
-/* The host stretches children that contain a table; center the 320px probe inside. */
-.narrowFrame {
-  display: flex;
-  justify-content: center;
+  gap: var(--prime-space-6);
   width: 100%;
-}
-
-/* 320px: the smallest supported viewport. */
-.narrow {
-  width: min(100%, calc(var(--prime-space-20) * 4));
   min-width: 0;
 }
 
-.dashboard {
+.specimen {
   display: flex;
   flex-direction: column;
-  gap: var(--prime-space-4);
-  width: 100%;
+  gap: var(--prime-space-2);
   min-width: 0;
 }
 
-.dashboardHeader {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-3);
-}
-
-/* KPI columns of at least 13rem. */
-.kpis {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(min(100%, calc(var(--prime-space-4) * 13)), 1fr));
-  gap: var(--prime-space-3);
-}
-
-/* Avatar → text inside a table cell: the cell gap (`--prime-space-2`), the same step DataTable
- * uses to indent sub-rows (avatar + gap), so child text lines up under the parent's text. */
-.customer {
+/* Avatar → name and note in a cell; the cell gap equals the sub-row indent step (avatar + gap). */
+.person {
   display: flex;
   align-items: center;
   gap: var(--prime-space-2);
   min-width: 0;
 }
 
-.customerText {
+.personText {
   display: flex;
   flex-direction: column;
   min-width: 0;
 }
 
-/* Child-row icon box: same footprint as the parent's avatar keeps the text column aligned. */
-.iconBox {
-  display: inline-flex;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-  width: var(--prime-avatar-m);
-  height: var(--prime-avatar-m);
-  border-radius: var(--prime-radius-m);
-  background: var(--prime-color-fill-muted);
-  color: var(--prime-color-text-secondary);
-}
-
-.iconBox svg {
-  width: var(--prime-icon-s);
-  height: var(--prime-icon-s);
-}
-
 .details {
   display: grid;
   grid-template-columns: max-content minmax(0, 1fr);
@@ -146,3 +68,10 @@
   margin: 0;
   min-width: 0;
 }
+
+/* 320 px: the smallest supported viewport. */
+.narrow {
+  width: min(100%, calc(var(--prime-space-20) * 4));
+  min-width: 0;
+  margin-inline: auto;
+}

package/src/components/data-table/examples/infinite-scroll.tsx

@@ -1,21 +1,20 @@
-/** `infiniteScroll` reveals loaded rows in batches (`infiniteBatchSize`), then calls `onLoadMore` while `hasMore`; `loadingMore` shows the footer status. Use for logs and feeds instead of pages. */
-
+/** An audit log that reveals loaded rows in batches and then asks the server for more — `paging`, `infiniteBatchSize`, `hasMore`, `loadingMore`, `onLoadMore`. */
 import { DataTable, type DataTableColumn } from "prime-ui-kit";
 import * as React from "react";
 
 type LogRow = { id: number; event: string; user: string; time: string };
 
-const events = ["Вход в систему", "Изменён тариф", "Загружен файл", "Создан отчёт", "Выход"];
-const users = ["anna", "boris", "vera", "gleb", "darya"];
+const EVENTS = ["Вход в систему", "Изменён тариф", "Загружен файл", "Создан отчёт", "Выход"];
+const USERS = ["anna", "boris", "vera", "gleb", "darya"];
 
-const all: LogRow[] = Array.from({ length: 90 }, (_, i) => ({
+const LOG: LogRow[] = Array.from({ length: 90 }, (_, i) => ({
   id: i + 1,
-  event: events[i % events.length],
-  user: users[(i * 2) % users.length],
+  event: EVENTS[i % EVENTS.length],
+  user: USERS[(i * 2) % USERS.length],
   time: `${String(9 + (i % 10)).padStart(2, "0")}:${String((i * 7) % 60).padStart(2, "0")}`,
 }));
 
-const columns: DataTableColumn<LogRow>[] = [
+const COLUMNS: DataTableColumn<LogRow>[] = [
   { id: "id", header: "#", accessor: "id", numeric: true, width: "4rem" },
   { id: "event", header: "Событие", accessor: "event" },
   { id: "user", header: "Пользователь", accessor: "user" },
@@ -23,27 +22,27 @@ const columns: DataTableColumn<LogRow>[] = [
 ];
 
 export default function DataTableInfiniteScrollExample() {
-  const [count, setCount] = React.useState(20);
+  const [loaded, setLoaded] = React.useState(20);
   const [loadingMore, setLoadingMore] = React.useState(false);
-  const hasMore = count < all.length;
+  const hasMore = loaded < LOG.length;
 
-  const loadMore = React.useCallback(() => {
+  const loadMore = () => {
     if (loadingMore || !hasMore) return;
     setLoadingMore(true);
     window.setTimeout(() => {
-      setCount((n) => Math.min(n + 20, all.length));
+      setLoaded((count) => Math.min(count + 20, LOG.length));
       setLoadingMore(false);
     }, 600);
-  }, [hasMore, loadingMore]);
+  };
 
   return (
-    <DataTable.Root
-      columns={columns}
-      rows={all.slice(0, count)}
+    <DataTable
+      columns={COLUMNS}
+      rows={LOG.slice(0, loaded)}
       getRowKey={(row) => row.id}
+      paging="infinite"
       stickyHeader
-      infiniteScroll
-      initialVisibleRows={10}
+      pageSize={10}
       infiniteBatchSize={10}
       hasMore={hasMore}
       loadingMore={loadingMore}

package/src/components/data-table/examples/narrow.tsx

@@ -1,60 +1,50 @@
-/** A 320px container: columns scroll inside the table, the first one sticks; toolbar and footer reflow by the table's own width and pagination collapses to «‹ 3 / 8 ›». Use to check mobile layouts. */
-
+/** A 320 px support queue: columns scroll inside the table with the first one pinned, the toolbar and footer reflow and the pager turns compact — `stickyFirstColumn`, `size`. */
 import { Badge, Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 
 import styles from "./examples.module.css";
 
-type Ticket = { id: string; subject: string; priority: "high" | "normal"; age: number };
+type Ticket = { id: string; subject: string; urgent: boolean; waiting: number };
+
+const SUBJECTS = ["Не приходит письмо", "Ошибка оплаты", "Сброс пароля", "Вопрос по тарифу"];
 
-const rows: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
+const TICKETS: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
   id: `T-${2400 + i}`,
-  subject: ["Не приходит письмо", "Ошибка оплаты", "Сброс пароля", "Вопрос по тарифу"][i % 4],
-  priority: i % 3 === 0 ? "high" : "normal",
-  age: (i * 5) % 48,
+  subject: SUBJECTS[i % SUBJECTS.length],
+  urgent: i % 3 === 0,
+  waiting: (i * 5) % 48,
 }));
 
-const columns: DataTableColumn<Ticket>[] = [
+const COLUMNS: DataTableColumn<Ticket>[] = [
   { id: "id", header: "Тикет", accessor: "id" },
   { id: "subject", header: "Тема", accessor: "subject", truncate: true, maxWidth: "10rem" },
   {
     id: "priority",
     header: "Приоритет",
     cell: (row) =>
-      row.priority === "high" ? (
-        <Badge.Root color="red">Высокий</Badge.Root>
-      ) : (
-        <Badge.Root>Обычный</Badge.Root>
-      ),
+      row.urgent ? <Badge.Root color="red">Высокий</Badge.Root> : <Badge.Root>Обычный</Badge.Root>,
   },
-  { id: "age", header: "Ждёт, ч", accessor: "age", numeric: true },
+  { id: "waiting", header: "Ждёт, ч", accessor: "waiting", numeric: true },
 ];
 
 export default function DataTableNarrowExample() {
   return (
-    <div className={styles.narrowFrame}>
-      <div className={styles.narrow}>
-        <DataTable.Root
-          size="s"
-          columns={columns}
-          rows={rows}
-          getRowKey={(row) => row.id}
-          stickyFirstColumn
-          pageSize={5}
-          toolbar={
-            <div className={styles.toolbar}>
-              <Typography.Root
-                as="span"
-                variant="body-s"
-                tone="secondary"
-                className={styles.tabular}
-              >
-                Открытые: {rows.length}
-              </Typography.Root>
-              <Button.Root size="xs">Новый тикет</Button.Root>
-            </div>
-          }
-        />
-      </div>
+    <div className={styles.narrow}>
+      <DataTable
+        size="s"
+        columns={COLUMNS}
+        rows={TICKETS}
+        getRowKey={(row) => row.id}
+        stickyFirstColumn
+        pageSize={5}
+        toolbar={
+          <div className={styles.toolbar}>
+            <Typography as="span" variant="body-s" tone="secondary">
+              Открытые: {TICKETS.length}
+            </Typography>
+            <Button.Root size="xs">Новый тикет</Button.Root>
+          </div>
+        }
+      />
     </div>
   );
 }