prime-ui-kit 0.18.0 → 0.20.0

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

@@ -0,0 +1,152 @@
+/** Orders whose columns a manager puts in place by dragging a header — it moves alone and the gap opens among the headers where it lands — or with Alt + ← / →, and shows, hides and reorders in the chooser over the row menu; the order number stays first and the row menu last, and the choice outlives a reload — `columnOrder`, `onColumnOrderChange`, `reorderable`, `columnsMenu`, `hiddenColumns`. */
+import { Badge, Button, DataTable, type DataTableColumn, Dropdown, Icon } from "prime-ui-kit";
+import * as React from "react";
+
+type Status = "paid" | "shipped" | "waiting";
+type Order = {
+  id: string;
+  client: string;
+  manager: string;
+  city: string;
+  status: Status;
+  date: string;
+  total: number;
+};
+
+const STATUS: Record<Status, { label: string; color: "green" | "blue" | "orange" }> = {
+  paid: { label: "Оплачен", color: "green" },
+  shipped: { label: "Отгружен", color: "blue" },
+  waiting: { label: "Ждёт оплаты", color: "orange" },
+};
+
+const ORDERS: Order[] = [
+  {
+    id: "№ 1040",
+    client: "ООО «Северный ветер»",
+    manager: "Ольга Смирнова",
+    city: "Москва",
+    status: "paid",
+    date: "02.10.2026",
+    total: 184_500,
+  },
+  {
+    id: "№ 1041",
+    client: "ИП Козлов",
+    manager: "Игорь Волков",
+    city: "Казань",
+    status: "waiting",
+    date: "03.10.2026",
+    total: 27_900,
+  },
+  {
+    id: "№ 1042",
+    client: "АО «Технопарк»",
+    manager: "Ольга Смирнова",
+    city: "Санкт-Петербург",
+    status: "shipped",
+    date: "04.10.2026",
+    total: 612_000,
+  },
+  {
+    id: "№ 1043",
+    client: "ООО «Лето»",
+    manager: "Мария Орлова",
+    city: "Екатеринбург",
+    status: "paid",
+    date: "05.10.2026",
+    total: 58_350,
+  },
+];
+
+const RUB = new Intl.NumberFormat("ru-RU", {
+  style: "currency",
+  currency: "RUB",
+  maximumFractionDigits: 0,
+});
+
+const COLUMNS: DataTableColumn<Order>[] = [
+  { id: "id", header: "Заказ", accessor: "id", hideable: false, reorderable: false },
+  { id: "client", header: "Клиент", accessor: "client", sortable: true },
+  { id: "manager", header: "Менеджер", accessor: "manager" },
+  { id: "city", header: "Город", accessor: "city" },
+  {
+    id: "status",
+    header: "Статус",
+    cell: (row) => (
+      <Badge.Root color={STATUS[row.status].color}>{STATUS[row.status].label}</Badge.Root>
+    ),
+  },
+  { id: "date", header: "Дата", accessor: "date", numeric: true },
+  {
+    id: "total",
+    header: "Сумма",
+    accessor: "total",
+    sortable: true,
+    numeric: true,
+    cell: (row) => RUB.format(row.total),
+  },
+  {
+    id: "actions",
+    header: "Действия",
+    hideHeader: true,
+    hideable: false,
+    align: "end",
+    cell: (row) => (
+      <Dropdown.Root>
+        <Dropdown.Trigger>
+          <Button.Root variant="ghost" tone="neutral" aria-label={`Действия с заказом ${row.id}`}>
+            <Button.Icon>
+              <Icon name="action.more" />
+            </Button.Icon>
+          </Button.Root>
+        </Dropdown.Trigger>
+        <Dropdown.Content>
+          <Dropdown.Item>Открыть заказ</Dropdown.Item>
+          <Dropdown.Item>Скачать счёт</Dropdown.Item>
+        </Dropdown.Content>
+      </Dropdown.Root>
+    ),
+  },
+];
+
+/** The kit keeps nothing: the app stores the order and the hidden columns where it likes. */
+const STORAGE_KEY = "orders.columns";
+type ColumnView = { order: string[]; hidden: string[] };
+const DEFAULT_VIEW: ColumnView = { order: [], hidden: ["city"] };
+
+function readView(): ColumnView {
+  try {
+    const saved = window.localStorage.getItem(STORAGE_KEY);
+    return saved
+      ? { ...DEFAULT_VIEW, ...(JSON.parse(saved) as Partial<ColumnView>) }
+      : DEFAULT_VIEW;
+  } catch {
+    return DEFAULT_VIEW;
+  }
+}
+
+export default function DataTableColumnOrderExample() {
+  const [view, setView] = React.useState(readView);
+
+  const changeView = (next: ColumnView) => {
+    setView(next);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+    } catch {
+      // Private mode or a full storage: the choice lasts until the reload.
+    }
+  };
+
+  return (
+    <DataTable
+      columns={COLUMNS}
+      columnOrder={view.order}
+      onColumnOrderChange={(order) => changeView({ ...view, order })}
+      hiddenColumns={view.hidden}
+      onHiddenColumnsChange={(hidden) => changeView({ ...view, hidden })}
+      rows={ORDERS}
+      getRowKey={(row) => row.id}
+      columnsMenu
+    />
+  );
+}

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

@@ -1,5 +1,5 @@
-/** 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`. */
-import { Badge, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
+/** Orders without a row-actions column: the column chooser stands in the tools above the table with the count of shown columns; the choice outlives a reload in local storage, the order number always stays — `DataTableColumnsMenu`, `hiddenColumns`, `onHiddenColumnsChange`, `hideable`. */
+import { Badge, DataTable, type DataTableColumn, DataTableColumnsMenu } from "prime-ui-kit";
 import * as React from "react";
 
 import styles from "./examples.module.css";
@@ -131,21 +131,21 @@ export default function DataTableColumnsVisibilityExample() {
   };
 
   return (
-    <DataTable
-      columns={COLUMNS}
-      hiddenColumns={hidden}
-      onHiddenColumnsChange={changeHidden}
-      rows={ORDERS}
-      getRowKey={(row) => row.id}
-      stickyFirstColumn
-      toolbar={
-        <div className={styles.toolbar}>
-          <Typography as="span" variant="body-s" tone="secondary">
-            Заказы за неделю: {ORDERS.length}
-          </Typography>
-          <DataTable.ColumnsMenu />
-        </div>
-      }
-    />
+    <div className={styles.withTools}>
+      <div className={styles.tools}>
+        <DataTableColumnsMenu
+          columns={COLUMNS}
+          hiddenColumns={hidden}
+          onHiddenColumnsChange={changeHidden}
+        />
+      </div>
+      <DataTable
+        columns={COLUMNS}
+        hiddenColumns={hidden}
+        rows={ORDERS}
+        getRowKey={(row) => row.id}
+        stickyFirstColumn
+      />
+    </div>
   );
 }

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

@@ -1,7 +1,14 @@
 /** Sort, page and the column choice 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`, `hiddenColumns`, `onHiddenColumnsChange`. */
-import { DataTable, type DataTableColumn, type DataTableSortState } from "prime-ui-kit";
+import {
+  DataTable,
+  type DataTableColumn,
+  DataTableColumnsMenu,
+  type DataTableSortState,
+} from "prime-ui-kit";
 import * as React from "react";
 
+import styles from "./examples.module.css";
+
 type Order = { id: number; customer: string; city: string; total: number };
 
 const CUSTOMERS = ["Анна Соколова", "Борис Кравец", "Вера Львова", "Глеб Миронов", "Дарья Носова"];
@@ -48,21 +55,29 @@ export default function DataTableControlledExample() {
   const [hiddenColumns, setHiddenColumns] = React.useState<string[]>(["city"]);
 
   return (
-    <DataTable
-      columns={COLUMNS}
-      rows={ORDERS}
-      getRowKey={(row) => row.id}
-      toolbar={<DataTable.ColumnsMenu />}
-      hiddenColumns={hiddenColumns}
-      onHiddenColumnsChange={setHiddenColumns}
-      sort={sort}
-      onSortChange={(next) => {
-        setSort(next);
-        setPage(1);
-      }}
-      page={page}
-      onPageChange={setPage}
-      pageSize={5}
-    />
+    <div className={styles.withTools}>
+      <div className={styles.tools}>
+        <DataTableColumnsMenu
+          columns={COLUMNS}
+          hiddenColumns={hiddenColumns}
+          onHiddenColumnsChange={setHiddenColumns}
+        />
+      </div>
+      <DataTable
+        columns={COLUMNS}
+        rows={ORDERS}
+        getRowKey={(row) => row.id}
+        hiddenColumns={hiddenColumns}
+        onHiddenColumnsChange={setHiddenColumns}
+        sort={sort}
+        onSortChange={(next) => {
+          setSort(next);
+          setPage(1);
+        }}
+        page={page}
+        onPageChange={setPage}
+        pageSize={5}
+      />
+    </div>
   );
 }

package/dist/skill/reference/components/data-table/examples/examples.module.css

@@ -1,41 +1,5 @@
 /* Layout of the DataTable scenarios: semantic tokens only. */
 
-/* Toolbar content: two groups pushed to the edges; they wrap on narrow widths. */
-.toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--prime-space-2);
-  width: 100%;
-  min-width: 0;
-}
-
-/* A SmartFilter in the toolbar: the search and filter row over the applied filters. */
-.filterColumn {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  gap: var(--prime-space-3);
-  min-width: 0;
-}
-
-.filters {
-  display: flex;
-  flex: 1 1 auto;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--prime-space-2);
-  min-width: 0;
-}
-
-/* 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);
-}
-
 /* appearance / content-width: a table with its caption under it. */
 .specimen {
   display: flex;
@@ -73,3 +37,17 @@
   min-width: 0;
   margin-inline: auto;
 }
+
+/* A table under the tools of its page: the column chooser (`DataTableColumnsMenu`) at the end. */
+.withTools {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: var(--prime-space-3);
+  min-width: 0;
+}
+
+.tools {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+}

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

@@ -1,5 +1,6 @@
-/** 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";
+/** A 320 px support queue: columns scroll inside the table with the first one pinned, the column chooser stays in reach above it, the footer reflows and the pager turns compact — `stickyFirstColumn`, `DataTableColumnsMenu`, `size`. */
+import { Badge, DataTable, type DataTableColumn, DataTableColumnsMenu } from "prime-ui-kit";
+import * as React from "react";
 
 import styles from "./examples.module.css";
 
@@ -15,7 +16,7 @@ const TICKETS: Ticket[] = Array.from({ length: 36 }, (_, i) => ({
 }));
 
 const COLUMNS: DataTableColumn<Ticket>[] = [
-  { id: "id", header: "Тикет", accessor: "id" },
+  { id: "id", header: "Тикет", accessor: "id", hideable: false },
   { id: "subject", header: "Тема", accessor: "subject", truncate: true, maxWidth: "10rem" },
   {
     id: "priority",
@@ -31,24 +32,29 @@ const COLUMNS: DataTableColumn<Ticket>[] = [
 ];
 
 export default function DataTableNarrowExample() {
+  const [hidden, setHidden] = React.useState<string[]>([]);
+
   return (
     <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 className={styles.withTools}>
+        <div className={styles.tools}>
+          <DataTableColumnsMenu
+            size="s"
+            columns={COLUMNS}
+            hiddenColumns={hidden}
+            onHiddenColumnsChange={setHidden}
+          />
+        </div>
+        <DataTable
+          size="s"
+          columns={COLUMNS}
+          hiddenColumns={hidden}
+          rows={TICKETS}
+          getRowKey={(row) => row.id}
+          stickyFirstColumn
+          pageSize={5}
+        />
+      </div>
     </div>
   );
 }

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

@@ -1,8 +1,9 @@
-/** 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`. */
-import { Badge, DataTable, type DataTableColumn, moveBefore } from "prime-ui-kit";
+/** Pipeline stages put in order by a grip at the end of the row, at its start or by the whole row, or with Alt + ↑ / ↓; each move is saved with a spinner in its grip, and sorting by a column turns reordering off — `onReorder`, `reorderHandle`, `getRowLabel`. */
+import { Badge, DataTable, type DataTableColumn, moveBefore, SegmentedControl } from "prime-ui-kit";
 import * as React from "react";
 
 type Stage = { id: string; name: string; owner: string; deals: number; probability: number };
+type Handle = "end" | "start" | "row";
 
 const STAGES: Stage[] = [
   { id: "lead", name: "Новый лид", owner: "Отдел продаж", deals: 48, probability: 10 },
@@ -19,6 +20,12 @@ const STAGES: Stage[] = [
   { id: "payment", name: "Оплата", owner: "Бухгалтерия", deals: 4, probability: 95 },
 ];
 
+const HANDLES: { value: Handle; label: string }[] = [
+  { value: "end", label: "Ручка в конце" },
+  { value: "start", label: "Ручка в начале" },
+  { value: "row", label: "Вся строка" },
+];
+
 const COLUMNS: DataTableColumn<Stage>[] = [
   { id: "name", header: "Этап", accessor: "name", hideable: false },
   { id: "owner", header: "Ответственный", accessor: "owner" },
@@ -38,6 +45,7 @@ const saveOrder = () => new Promise<void>((resolve) => setTimeout(resolve, 700))
 
 export default function DataTableReorderExample() {
   const [stages, setStages] = React.useState(STAGES);
+  const [handle, setHandle] = React.useState<Handle>("end");
   return (
     <DataTable
       columns={COLUMNS}
@@ -45,6 +53,20 @@ export default function DataTableReorderExample() {
       paging="none"
       getRowKey={(row) => row.id}
       getRowLabel={(row) => row.name}
+      reorderHandle={handle}
+      toolbar={
+        <SegmentedControl.Root
+          value={handle}
+          onValueChange={(next) => setHandle(next as Handle)}
+          aria-label="За что брать строку"
+        >
+          {HANDLES.map((item) => (
+            <SegmentedControl.Item key={item.value} value={item.value}>
+              {item.label}
+            </SegmentedControl.Item>
+          ))}
+        </SegmentedControl.Root>
+      }
       onReorder={async (id, beforeId) => {
         await saveOrder();
         setStages((current) =>

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

@@ -2,8 +2,6 @@
 import { Button, DataTable, type DataTableColumn, Dropdown, Icon, Typography } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 type Invoice = { id: string; client: string; due: string; amount: number; total?: boolean };
 
 const INVOICES: Invoice[] = [
@@ -77,25 +75,23 @@ export default function DataTableRowLinkExample() {
   ];
 
   return (
-    <DataTable
-      columns={columns}
-      rows={ROWS}
-      getRowKey={(row) => row.id}
-      paging="none"
-      getRowHref={(row) => `/invoices/${row.id}`}
-      isRowClickable={(row) => !row.total}
-      onRowClick={(row, _index, event) => {
-        // A client-side router goes here (navigate(href)); the page itself never reloads.
-        event.preventDefault();
-        setStatus(`Открыт ${row.id} · ${row.client}`);
-      }}
-      toolbar={
-        <div className={styles.toolbar}>
-          <Typography as="span" variant="body-s" tone="secondary" aria-live="polite">
-            {status}
-          </Typography>
-        </div>
-      }
-    />
+    <>
+      <DataTable
+        columns={columns}
+        rows={ROWS}
+        getRowKey={(row) => row.id}
+        paging="none"
+        getRowHref={(row) => `/invoices/${row.id}`}
+        isRowClickable={(row) => !row.total}
+        onRowClick={(row, _index, event) => {
+          // A client-side router goes here (navigate(href)); the page itself never reloads.
+          event.preventDefault();
+          setStatus(`Открыт ${row.id} · ${row.client}`);
+        }}
+      />
+      <Typography as="span" variant="body-s" tone="secondary" aria-live="polite">
+        {status}
+      </Typography>
+    </>
   );
 }

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

@@ -177,7 +177,15 @@ const initials = (name: string) =>
     .toUpperCase();
 
 const COLUMNS: DataTableColumn<Invoice>[] = [
-  { id: "id", header: "Счёт", accessor: "id", sortable: true, numeric: true, align: "start" },
+  {
+    id: "id",
+    header: "Счёт",
+    accessor: "id",
+    sortable: true,
+    numeric: true,
+    align: "start",
+    hideable: false,
+  },
   {
     id: "client",
     header: "Клиент",
@@ -230,6 +238,7 @@ const COLUMNS: DataTableColumn<Invoice>[] = [
     id: "actions",
     header: "Действия",
     hideHeader: true,
+    hideable: false,
     width: "3.5rem",
     align: "end",
     cell: (row) => (
@@ -320,6 +329,8 @@ export default function DataTableScreenExample() {
             getRowLabel={(row) => `Счёт ${row.id}`}
             pageSize={6}
             stickyFirstColumn
+            stickyLastColumn
+            columnsMenu
             defaultSort={{ columnId: "due", order: "desc" }}
             empty={
               <EmptyPage.Root size="s" role="status" aria-labelledby="invoices-empty">

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

@@ -2,8 +2,6 @@
 import { Button, DataTable, type DataTableColumn, Typography } from "prime-ui-kit";
 import * as React from "react";
 
-import styles from "./examples.module.css";
-
 type Member = { id: string; name: string; email: string; role: string };
 
 const MEMBERS: Member[] = [
@@ -35,25 +33,22 @@ export default function DataTableSelectionExample() {
       onSelectedChange={setSelected}
       paging="none"
       toolbar={
-        <div className={styles.toolbar}>
+        <>
           <Typography as="span" variant="body-s" tone="secondary">
             Выбрано: {selected.length} из {MEMBERS.length}
           </Typography>
-          <div className={styles.filters}>
-            <Button.Root
-              variant="outline"
-              tone="neutral"
-              size="s"
-              disabled={selected.length === 0}
-              onClick={() => setSelected([])}
-            >
-              Снять выбор
-            </Button.Root>
-            <Button.Root variant="soft" tone="danger" size="s" disabled={selected.length === 0}>
-              Удалить
-            </Button.Root>
-          </div>
-        </div>
+          <Button.Root
+            variant="outline"
+            tone="neutral"
+            disabled={selected.length === 0}
+            onClick={() => setSelected([])}
+          >
+            Снять выбор
+          </Button.Root>
+          <Button.Root variant="soft" tone="danger" disabled={selected.length === 0}>
+            Удалить
+          </Button.Root>
+        </>
       }
     />
   );