ics-ui-kit 0.1.13 → 0.1.14

package/dist/components/table/editable/editableCell.d.ts

@@ -0,0 +1,90 @@
+import { VariantProps, TVReturnType } from 'tailwind-variants';
+/**
+ * Ячейка редактируемой таблицы: скелет сетки и заливка по состоянию.
+ *
+ * Скелет один на все состояния. `relative` — контекст позиционирования для ручки
+ * автозаполнения (`TableFillHandle`), `cursor-cell` — курсор сетки вместо стрелки,
+ * `select-none` — чтобы протягивание выделения мышью не выделяло текст.
+ *
+ * **Состояние — одна ось, а не набор флагов.** Все состояния красят одно и то же —
+ * `background-color`, поэтому одновременно видно ровно одно. Будь это булевы пропы,
+ * у ячейки «изменена и нередактируема» победил бы не тот класс, который передали последним,
+ * а тот, что стоит ниже в стилях: порядок в атрибуте `class` браузер не учитывает.
+ * С одним `state` выбор делается явно — и делает его прикладной код, потому что приоритет
+ * состояний зависит от задачи: где-то важнее показать правку, где-то — запрет на неё.
+ *
+ * Что означают состояния и когда их включать, кит не знает: «изменена» — это правка,
+ * не отправленная на сервер, или отличие от прошлой версии? Ячейка только красится.
+ *
+ * | Состояние    | Смысл                                                        |
+ * | ------------ | ------------------------------------------------------------ |
+ * | `readonly`   | правка запрещена — приглушённый текст на серой заливке       |
+ * | `modified`   | значение изменено                                            |
+ * | `editing`    | открыт редактор — та же заливка плюс кольцо фокуса           |
+ * | `fillSource` | ячейка, из которой тянут значения                            |
+ *
+ * @example
+ * <TableCell
+ *   className={cellStateStyles({
+ *     state: isEditing ? "editing" : isModified ? "modified" : readonly ? "readonly" : undefined,
+ *     className: column.numeric ? "text-right tabular-nums" : undefined
+ *   })}
+ * >
+ */
+export declare const cellStateStyles: TVReturnType<{
+    state: {
+        readonly: string;
+        fillSource: string;
+        modified: string;
+        editing: string;
+    };
+}, undefined, "relative cursor-cell select-none", {
+    state: {
+        readonly: string;
+        fillSource: string;
+        modified: string;
+        editing: string;
+    };
+}, undefined, TVReturnType<{
+    state: {
+        readonly: string;
+        fillSource: string;
+        modified: string;
+        editing: string;
+    };
+}, undefined, "relative cursor-cell select-none", unknown, unknown, undefined>>;
+/**
+ * Поле правки внутри ячейки — `input`, `textarea` или редактируемый `div`.
+ *
+ * Прозрачный фон обязателен: заливку ячейка уже нарисовала своим состоянием, и собственный
+ * фон поля закрыл бы её. Снятый `outline` — по той же причине: рамку правки рисует ячейка
+ * (`state: "editing"`), а вторая обводка внутри первой выглядит браком.
+ *
+ * `multiline` возвращает выделение текста, снятое у ячейки ради протягивания мышью, и учит
+ * поле переносам: без `whitespace-pre-wrap` переносы в значении схлопнутся в пробелы,
+ * без `break-words` длинное слово растянет колонку.
+ *
+ * @example
+ * <input className={cellEditorStyles({ className: column.numeric ? "text-right" : undefined })} />
+ * <div contentEditable className={cellEditorStyles({ multiline: true })} />
+ */
+export declare const cellEditorStyles: TVReturnType<{
+    multiline: {
+        true: string;
+    };
+}, undefined, "w-full bg-transparent outline-none", {
+    multiline: {
+        true: string;
+    };
+}, undefined, TVReturnType<{
+    multiline: {
+        true: string;
+    };
+}, undefined, "w-full bg-transparent outline-none", unknown, unknown, undefined>>;
+/**
+ * Состояние ячейки — то, что она означает прямо сейчас.
+ *
+ * Выведено из самого `cellStateStyles`, поэтому список состояний в типе и в стилях
+ * не разъезжается.
+ */
+export type CellState = NonNullable<VariantProps<typeof cellStateStyles>["state"]>;

package/dist/components/table/editable/index.d.ts

@@ -0,0 +1,3 @@
+export { cellStateStyles, cellEditorStyles, type CellState } from './editableCell';
+export { cellRange, inCellRange, cellRangeEdges, cellRangeStyle, CELL_RANGE_EDGE, type CellRef, type CellRange, type CellRangeEdge } from './cellRange';
+export { TableFillHandle, type TableFillHandleProps } from './TableFillHandle';

package/dist/components/table/editable.d.ts

@@ -0,0 +1,2 @@
+export * from './editable/index'
+export {}

package/dist/components/table/editable.js

@@ -0,0 +1,12 @@
+import { C as a, T as s, a as t, b as c, d as n, e as E, c as g, i as R } from "../../TableFillHandle-C_yvCTSl.js";
+export {
+  a as CELL_RANGE_EDGE,
+  s as TableFillHandle,
+  t as cellEditorStyles,
+  c as cellRange,
+  n as cellRangeEdges,
+  E as cellRangeStyle,
+  g as cellStateStyles,
+  R as inCellRange
+};
+//# sourceMappingURL=editable.js.map

package/dist/components/table/editable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/components/table/index.d.ts

@@ -1 +1,8 @@
-export { Table, TableHeader, TableBody, TableBodyContainer, TableFooter, TableHead, TableRow, TableCell, TableCaption } from './Table';
+export { Table, TableHeader, TableBody, TableBodyContainer, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableResizeHandle, type TableProps, type TableHeaderProps, type TableFooterProps, type TableHeadProps, type TableRowProps, type TableResizeHandleProps } from './Table';
+export { useColumnResize, getColumnAutoFitWidth, ColumnResizeSession, type ResizableColumn, type UseColumnResizeOptions, type UseColumnResizeResult, type ColumnAutoFitOptions } from './column-resize';
+export { useColumnReorder, COLUMN_KEY_ATTRIBUTE, type UseColumnReorderOptions, type UseColumnReorderResult } from './column-reorder';
+export { opaqueCellStyles } from './opaqueCell';
+export { tableRowTints, TABLE_ROW_TINT, TABLE_ROW_TINT_LAYERS, TABLE_ROW_TINT_LAYERS_AFTER } from './rowTint';
+export * from './tree';
+export * from './editable';
+export * from './sticky';

package/dist/components/table/opaqueCell.d.ts

@@ -0,0 +1,47 @@
+import { TVReturnType } from 'tailwind-variants';
+/**
+ * Ячейка с непрозрачным фоном, сохраняющая подсветку строки.
+ *
+ * Нужна везде, где ячейка выезжает из потока и под ней оказывается чужое содержимое:
+ * закреплённая колонка (`stickyCellStyles`) и колонка, которую перетаскивают
+ * (`useColumnReorder`). Обе задачи одинаковые, поэтому рецепт один.
+ *
+ * **Почему фон нельзя просто задать.** Строка прозрачна — красит подложка секции
+ * (`TableBody`, `TableHeader`), и такой ячейке нужен свой непрозрачный фон. Но подменять
+ * им подсветку строки нельзя: `hover:bg-*` положил бы поверх полупрозрачный цвет, и чужое
+ * содержимое снова стало бы просвечивать. Поэтому подсветку рисует слой `::after` теми же
+ * переменными, что и сама строка, — заливкой (`--table-row-bg`, `--table-row-bg-hover`)
+ * и списком слоёв (`--table-row-tints`). Переменные наследуются от `tr` к ячейке сами,
+ * связывать их не нужно.
+ *
+ * Повторяются обе части: если рисовать только заливку, у закреплённой колонки пропадёт любая
+ * подкраска — и выделение, и деактивация, и что там ещё собрал потребитель.
+ *
+ * `transition-colors` совпадает с переходом у `TableRow`, поэтому строка подсвечивается
+ * целиком, а не двумя рывками. Разделители слой не задевает: `inset-0` у абсолютного
+ * потомка отсчитывается от padding-box, а границы лежат снаружи него.
+ *
+ * **Требует контекста позиционирования** — `sticky` у закреплённой ячейки, `relative`
+ * у перетаскиваемой: иначе `::after` растянется не по ячейке, а по ближайшему
+ * позиционированному предку.
+ *
+ * @example
+ * <TableCell className={opaqueCellStyles({ className: "relative" })}>…</TableCell>
+ * <TableHead className={opaqueCellStyles({ part: "head", className: "relative" })}>…</TableHead>
+ */
+export declare const opaqueCellStyles: TVReturnType<{
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, string[], {
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, TVReturnType<{
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;

package/dist/components/table/rowTint.d.ts

@@ -0,0 +1,60 @@
+import { CSSProperties } from 'react';
+/**
+ * Подкраска строки таблицы — стопка полупрозрачных слоёв поверх её заливки.
+ *
+ * **Когда нужно.** Когда состояний у строки больше одного. Заливка у строки одна
+ * (`background-color`), и второе состояние вытеснило бы первое: выделенная деактивированная
+ * строка выглядела бы просто выделенной. Слои же складываются альфами — и между собой,
+ * и с заливкой, какой бы она ни была, включая заданную вами `className="bg-…"`.
+ *
+ * **Почему это не пропсы строки.** `TableRow` не знает ни про «выделено», ни про «отключено»:
+ * что означает подсветка и когда её включать — знание прикладного кода. Кит даёт механизм
+ * (слои), готовые цвета (`TABLE_ROW_TINT`) и рисующие их классы; собирает их потребитель.
+ *
+ * @example
+ * <TableRow style={tableRowTints(isSelected && TABLE_ROW_TINT.selected, isInactive && TABLE_ROW_TINT.inactive)}>
+ */
+/**
+ * Готовые цвета подкрасок: `selected` — выделенная строка, `inactive` — деактивированная.
+ *
+ * Оба полупрозрачные, поэтому сочетаются и друг с другом, и с наведением: наведение красит
+ * заливку под слоями, и выделенная строка под курсором темнеет.
+ *
+ * Список открытый: свои состояния задавайте своими значениями, слоем годится любой
+ * полупрозрачный CSS-цвет.
+ */
+export declare const TABLE_ROW_TINT: {
+    readonly selected: "hsl(var(--alpha-high-05))";
+    readonly inactive: "hsl(var(--status-error) / 5%)";
+};
+/**
+ * Слои подкраски для `style` строки. Первый аргумент — верхний слой, каждый следующий
+ * ложится под ним, под всеми — заливка строки.
+ *
+ * **Цвета должны быть полупрозрачными**, и следит за этим вызывающий код: значения уходят
+ * в `background-image` как есть. Непрозрачный цвет закроет всё, что под ним, — остальные
+ * слои и заливку вместе с наведением.
+ *
+ * Ложные значения отбрасываются, поэтому условия пишутся прямо в аргументах:
+ * `tableRowTints(isSelected && TABLE_ROW_TINT.selected)`. Без единого слоя строка красится
+ * одной заливкой.
+ *
+ * Результат — инлайновый стиль с CSS-переменной; она наследуется от `tr` к ячейкам, поэтому
+ * закреплённые и перетаскиваемые колонки подхватывают подкраску сами.
+ *
+ * @example
+ * <TableRow
+ *   style={tableRowTints(
+ *     isSelected && TABLE_ROW_TINT.selected,
+ *     isOverdue && "hsl(var(--status-warning) / 12%)"
+ *   )}
+ * >
+ */
+export declare const tableRowTints: (...tints: (string | false | null | undefined)[]) => CSSProperties;
+/**
+ * Класс, рисующий слои подкраски на строке. Уже применён к `TableRow` — нужен, только если
+ * вы рисуете строку своим элементом.
+ */
+export declare const TABLE_ROW_TINT_LAYERS = "bg-[image:var(--table-row-tints,none)]";
+/** То же самое для слоя `::after` непрозрачной ячейки — см. `opaqueCellStyles`. */
+export declare const TABLE_ROW_TINT_LAYERS_AFTER = "after:bg-[image:var(--table-row-tints,none)]";

package/dist/components/table/sticky/index.d.ts

@@ -0,0 +1 @@
+export { stickyCellStyles, stickyOffset, STICKY_HEADER, STICKY_FOOTER } from './stickyCell';

package/dist/components/table/sticky/stickyCell.d.ts

@@ -0,0 +1,105 @@
+import { TVReturnType } from 'tailwind-variants';
+/**
+ * Классы прилипающей шапки — то, что подставляет проп `sticky` у `TableHeader`.
+ *
+ * Лежит здесь, рядом со `stickyCellStyles`, чтобы все `z-*` таблицы читались вместе.
+ * Порядок слоёв снизу вверх: обычная ячейка тела (без `z-index`), закреплённая ячейка
+ * тела (`z-10`), шапка и итоги (`z-20`), закреплённая ячейка шапки (`z-30` — она внутри
+ * стекинг-контекста шапки, поэтому спорит только с соседями по ней).
+ *
+ * Именно `z-20`, а не `z-10`: при равном `z-index` выигрывает то, что ниже по документу,
+ * и закреплённые ячейки тела заезжали бы поверх шапки. Без закреплённых колонок
+ * конкурентов нет, так что значение годится в обоих случаях и выбирать его
+ * потребителю не приходится.
+ *
+ * @example
+ * <TableHeader sticky> // штатный путь
+ * <thead className={STICKY_HEADER}> // своя шапка вместо TableHeader
+ */
+export declare const STICKY_HEADER = "sticky top-0 z-20";
+/**
+ * Классы прилипающих итогов — то, что подставляет проп `sticky` у `TableFooter`.
+ *
+ * Слой тот же, что у шапки (`z-20`): спорить им не о чем, они по разные стороны тела, — а вот
+ * проезжающие под ними закреплённые ячейки (`z-10`) перекрывать обязаны обе.
+ *
+ * Непрозрачный фон итогам нужен даже без закреплённых колонок: под ними проходит тело.
+ * Он уже есть в `tableFooterStyles` (`bg-primary-bg`), отдельно задавать нечего.
+ *
+ * @example
+ * <TableFooter sticky> // штатный путь
+ * <tfoot className={STICKY_FOOTER}> // свои итоги вместо TableFooter
+ */
+export declare const STICKY_FOOTER = "sticky bottom-0 z-20";
+/**
+ * Классы для закреплённой (примороженной по горизонтали) ячейки таблицы.
+ *
+ * Не компонент и не проп примитива, а именно набор классов: `left` всё равно задаёт
+ * потребитель, так что от компонента осталась бы одна обёртка. Применяется к `TableHead`
+ * или `TableCell` вместе с `left`.
+ *
+ * **`left` обязателен.** `position: sticky` без единого значения `left`/`right`/`top`/`bottom`
+ * не задаёт границы прилипания и ведёт себя как `position: relative`. У первой закреплённой
+ * колонки это константа (`left-0`), у следующих — сумма ширин предыдущих закреплённых,
+ * её считает `stickyOffset`.
+ *
+ * С границами делать ничего не нужно: таблица кита живёт в раздельной модели
+ * (`border-separate` у `Table`), где граница входит в бокс ячейки и уезжает вместе с ней —
+ * и правая у ячейки тела, и нижняя у ячейки шапки. В схлопнутой модели пришлось бы гасить
+ * `border-r` и рисовать линию inset-тенью: там граница принадлежит сетке таблицы и при
+ * прокрутке остаётся стоять на месте.
+ *
+ * Остаётся непрозрачный фон — без него под закреплённой ячейкой просвечивают уплывающие
+ * колонки, — и он берётся готовым из `opaqueCellStyles`: та же задача стоит перед колонкой,
+ * которую перетаскивают, поэтому фон и слой подсветки строки описаны один раз там.
+ * Здесь к ним добавляются только `sticky` и `z-index`.
+ *
+ * `table-layout: fixed` сам по себе не нужен: одна закреплённая колонка с `left-0` работает
+ * и при обычном автоматическом раскладе. Он требуется, только когда `left` вычисляется
+ * из объявленных ширин, — при `table-layout: auto` браузер считает ширины по содержимому,
+ * заданные значения игнорирует, и вычисленный `left` промахивается.
+ *
+ * @example
+ * <TableHead className={stickyCellStyles({ part: "head", className: "left-0" })}>Счёт</TableHead>
+ * <TableCell className={stickyCellStyles({ className: "left-0" })}>INV001</TableCell>
+ *
+ * // вторая и последующие закреплённые колонки
+ * <TableCell className={stickyCellStyles()} style={{ left: stickyOffset(pinnedWidths, index) }}>…</TableCell>
+ */
+export declare const stickyCellStyles: TVReturnType<{
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, "sticky", {
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, TVReturnType<{
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, string[], {
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, TVReturnType<{
+    part: {
+        cell: string;
+        head: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+/**
+ * Смещение слева для i-й закреплённой колонки — сумма ширин всех предыдущих.
+ *
+ * Ширины обязаны быть фиксированными: при `table-layout: auto` браузер их не соблюдает,
+ * и колонки наезжают друг на друга.
+ *
+ * @example
+ * stickyOffset([120, 200, 90], 0); // 0
+ * stickyOffset([120, 200, 90], 2); // 320
+ */
+export declare const stickyOffset: (widths: number[], index: number) => number;

package/dist/components/table/sticky.d.ts

@@ -0,0 +1,2 @@
+export * from './sticky/index'
+export {}

package/dist/components/table/sticky.js

@@ -0,0 +1,22 @@
+import { T as c } from "../../index-BVqs-uqP.js";
+import { o as l } from "../../opaqueCell-SGaiyL54.js";
+const r = "sticky top-0 z-20", n = "sticky bottom-0 z-20", p = c({
+  extend: l,
+  base: "sticky",
+  variants: {
+    part: {
+      cell: "z-10",
+      head: "z-30"
+    }
+  },
+  defaultVariants: {
+    part: "cell"
+  }
+}), y = (t, e) => t.slice(0, e).reduce((s, o) => s + o, 0);
+export {
+  n as STICKY_FOOTER,
+  r as STICKY_HEADER,
+  p as stickyCellStyles,
+  y as stickyOffset
+};
+//# sourceMappingURL=sticky.js.map

package/dist/components/table/sticky.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sticky.js","sources":["../../../src/components/table/sticky/stickyCell.ts"],"sourcesContent":["import { tv } from \"tailwind-variants\";\nimport { opaqueCellStyles } from \"../opaqueCell\";\n\n/**\n * Классы прилипающей шапки — то, что подставляет проп `sticky` у `TableHeader`.\n *\n * Лежит здесь, рядом со `stickyCellStyles`, чтобы все `z-*` таблицы читались вместе.\n * Порядок слоёв снизу вверх: обычная ячейка тела (без `z-index`), закреплённая ячейка\n * тела (`z-10`), шапка и итоги (`z-20`), закреплённая ячейка шапки (`z-30` — она внутри\n * стекинг-контекста шапки, поэтому спорит только с соседями по ней).\n *\n * Именно `z-20`, а не `z-10`: при равном `z-index` выигрывает то, что ниже по документу,\n * и закреплённые ячейки тела заезжали бы поверх шапки. Без закреплённых колонок\n * конкурентов нет, так что значение годится в обоих случаях и выбирать его\n * потребителю не приходится.\n *\n * @example\n * <TableHeader sticky> // штатный путь\n * <thead className={STICKY_HEADER}> // своя шапка вместо TableHeader\n */\nexport const STICKY_HEADER = \"sticky top-0 z-20\";\n\n/**\n * Классы прилипающих итогов — то, что подставляет проп `sticky` у `TableFooter`.\n *\n * Слой тот же, что у шапки (`z-20`): спорить им не о чем, они по разные стороны тела, — а вот\n * проезжающие под ними закреплённые ячейки (`z-10`) перекрывать обязаны обе.\n *\n * Непрозрачный фон итогам нужен даже без закреплённых колонок: под ними проходит тело.\n * Он уже есть в `tableFooterStyles` (`bg-primary-bg`), отдельно задавать нечего.\n *\n * @example\n * <TableFooter sticky> // штатный путь\n * <tfoot className={STICKY_FOOTER}> // свои итоги вместо TableFooter\n */\nexport const STICKY_FOOTER = \"sticky bottom-0 z-20\";\n\n/**\n * Классы для закреплённой (примороженной по горизонтали) ячейки таблицы.\n *\n * Не компонент и не проп примитива, а именно набор классов: `left` всё равно задаёт\n * потребитель, так что от компонента осталась бы одна обёртка. Применяется к `TableHead`\n * или `TableCell` вместе с `left`.\n *\n * **`left` обязателен.** `position: sticky` без единого значения `left`/`right`/`top`/`bottom`\n * не задаёт границы прилипания и ведёт себя как `position: relative`. У первой закреплённой\n * колонки это константа (`left-0`), у следующих — сумма ширин предыдущих закреплённых,\n * её считает `stickyOffset`.\n *\n * С границами делать ничего не нужно: таблица кита живёт в раздельной модели\n * (`border-separate` у `Table`), где граница входит в бокс ячейки и уезжает вместе с ней —\n * и правая у ячейки тела, и нижняя у ячейки шапки. В схлопнутой модели пришлось бы гасить\n * `border-r` и рисовать линию inset-тенью: там граница принадлежит сетке таблицы и при\n * прокрутке остаётся стоять на месте.\n *\n * Остаётся непрозрачный фон — без него под закреплённой ячейкой просвечивают уплывающие\n * колонки, — и он берётся готовым из `opaqueCellStyles`: та же задача стоит перед колонкой,\n * которую перетаскивают, поэтому фон и слой подсветки строки описаны один раз там.\n * Здесь к ним добавляются только `sticky` и `z-index`.\n *\n * `table-layout: fixed` сам по себе не нужен: одна закреплённая колонка с `left-0` работает\n * и при обычном автоматическом раскладе. Он требуется, только когда `left` вычисляется\n * из объявленных ширин, — при `table-layout: auto` браузер считает ширины по содержимому,\n * заданные значения игнорирует, и вычисленный `left` промахивается.\n *\n * @example\n * <TableHead className={stickyCellStyles({ part: \"head\", className: \"left-0\" })}>Счёт</TableHead>\n * <TableCell className={stickyCellStyles({ className: \"left-0\" })}>INV001</TableCell>\n *\n * // вторая и последующие закреплённые колонки\n * <TableCell className={stickyCellStyles()} style={{ left: stickyOffset(pinnedWidths, index) }}>…</TableCell>\n */\nexport const stickyCellStyles = tv({\n\textend: opaqueCellStyles,\n\tbase: \"sticky\",\n\tvariants: {\n\t\tpart: {\n\t\t\tcell: \"z-10\",\n\t\t\thead: \"z-30\"\n\t\t}\n\t},\n\tdefaultVariants: {\n\t\tpart: \"cell\"\n\t}\n});\n\n/**\n * Смещение слева для i-й закреплённой колонки — сумма ширин всех предыдущих.\n *\n * Ширины обязаны быть фиксированными: при `table-layout: auto` браузер их не соблюдает,\n * и колонки наезжают друг на друга.\n *\n * @example\n * stickyOffset([120, 200, 90], 0); // 0\n * stickyOffset([120, 200, 90], 2); // 320\n */\nexport const stickyOffset = (widths: number[], index: number) =>\n\twidths.slice(0, index).reduce((sum, width) => sum + width, 0);\n"],"names":["STICKY_HEADER","STICKY_FOOTER","stickyCellStyles","tv","opaqueCellStyles","stickyOffset","widths","index","sum","width"],"mappings":";;AAoBO,MAAMA,IAAgB,qBAehBC,IAAgB,wBAqChBC,IAAmBC,EAAG;AAAA,EAClC,QAAQC;AAAA,EACR,MAAM;AAAA,EACN,UAAU;AAAA,IACT,MAAM;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAER;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC,GAYYC,IAAe,CAACC,GAAkBC,MAC9CD,EAAO,MAAM,GAAGC,CAAK,EAAE,OAAO,CAACC,GAAKC,MAAUD,IAAMC,GAAO,CAAC;"}

package/dist/components/table/tableStoryData.d.ts

@@ -0,0 +1,84 @@
+/**
+ * Данные для стори таблицы. Вынесены из `Table.stories.tsx`, чтобы в самих стори
+ * оставалась только разметка и было видно, что именно демонстрирует пример.
+ *
+ * Не совпадает с glob'ом Storybook (`*.stories.@(ts|tsx)`), поэтому как стори не подхватывается.
+ */
+export type ProductRow = {
+    id: number;
+    name: string;
+    category: string;
+    price: string;
+    stock: number;
+    zone: string;
+};
+/**
+ * Достаточно строк, чтобы контейнер реально прокручивался по вертикали.
+ * `zone` — под заголовок «Warehouse Zone»: два слова без принудительного `nowrap`,
+ * поэтому при сужении контейнера они переносятся и шапка растёт по высоте.
+ */
+export declare const PRODUCT_ROWS: ProductRow[];
+export type AccessRow = {
+    login: string;
+    name: string;
+    email: string;
+    type: string;
+    module: string;
+    activity: string;
+};
+/** Реконструкция макета «Пользователи» из Figma (UIK Data Table). */
+export declare const ACCESS_ROWS: AccessRow[];
+export type DistributorRow = {
+    id: string;
+    distributor: string;
+    region: string;
+    /** Длинный текст — нужен, чтобы в примере с ресайзом был многострочный контент. */
+    terms: string;
+    manager: string;
+    units: number;
+    revenue: number;
+    growth: number;
+};
+export declare const DISTRIBUTOR_ROWS: DistributorRow[];
+export type EditableRow = {
+    id: string;
+    distributor: string;
+    region: string;
+    manager: string;
+    plan: number;
+    fact: number;
+    /** Многострочный текст: переносы значимы и должны переживать правку. */
+    comment: string;
+};
+/** Данные для стори инлайн-редактирования. */
+export declare const EDITABLE_ROWS: EditableRow[];
+export type TreeNode = {
+    id: string;
+    name: string;
+    /** Что демонстрирует строка — выводится отдельной колонкой. */
+    note?: string;
+    children?: TreeNode[];
+};
+/**
+ * Дерево для стори иерархии.
+ *
+ * Названия намеренно безликие: «Раздел 1.1.2» читается как позиция в дереве, поэтому
+ * достаточно взглянуть на строку, чтобы понять, правильные ли линии слева от неё.
+ *
+ * Набор узлов подобран под разбор случаев, а не под правдоподобие: тут есть последние
+ * потомки на каждом уровне, ветка глубиной пять, свёрнутый узел, лист на верхнем уровне,
+ * единственный потомок, перенос длинного текста и — главное — глубокая ветка, за которой
+ * идёт соседний узел мелкого уровня. Именно на последнем случае ломались прежние версии:
+ * сквозная вертикаль либо не доходила до соседа, либо протекала мимо уголка.
+ */
+export declare const NAV_TREE: TreeNode[];
+export type MetricRow = {
+    id: string;
+    account: string;
+    manager: string;
+    values: number[];
+};
+/** Заголовки для стори со sticky-колонками: месяцы, при необходимости с номером года. */
+export declare function buildMetricColumns(count: number): string[];
+/** Детерминированные значения — чтобы снапшоты стори не плыли между рендерами. */
+export declare const METRIC_ROWS: MetricRow[];

package/dist/components/table/tableStoryParts.d.ts

@@ -0,0 +1,72 @@
+import { CellRef } from './editable';
+export type SortDirection = "asc" | "desc";
+/** Состояние фильтра одной колонки. */
+export type ColumnFilter = {
+    /** Подстрока быстрого поиска. */
+    query: string;
+    /** Значения, с которых снята галочка. Пустое множество — выбрано всё. */
+    excluded: Set<string>;
+};
+export declare const EMPTY_FILTER: ColumnFilter;
+/** Уникальные значения колонки в алфавитном порядке — из них строится список галочек. */
+export declare const uniqueValues: (values: string[]) => string[];
+/** Проходит ли значение фильтр колонки: и подстроку быстрого поиска, и снятые галочки. */
+export declare const matchesColumnFilter: (value: string, filter: ColumnFilter | undefined) => boolean;
+/** Применены ли к колонке хоть какие-то условия — от этого зависит значок воронки. */
+export declare const isFilterActive: (filter: ColumnFilter) => boolean;
+/**
+ * Заголовок-триггер колоночного меню: подпись, значки применённых условий и само меню.
+ *
+ * Кликабельная зона — не сам `th`, а растянутая по нему кнопка, и это не формальность:
+ *
+ * - `th` не держит фокус, а вешать на него `tabIndex` — самодеятельность; кнопка внутри
+ *   заголовка это и есть предписанный WAI-ARIA APG способ сделать колонку интерактивной;
+ * - другие интерактивные элементы шапки (`TableResizeHandle`, грип перетаскивания, чекбокс
+ *   «выбрать всё») кладутся в `th` **соседями** кнопки, а не внутрь неё. Будь триггером сам
+ *   `th`, любой клик по ним всплывал бы в меню; здесь всплывать некуда — кнопка им не предок.
+ *
+ * Ячейку под неё нужно перевести в `TableHead interactive`: этот вариант отдаёт кнопке свой
+ * паддинг, иначе кликабельной будет не вся ячейка, а только её середина.
+ *
+ * Значки сортировки и фильтра в макете не нарисованы — там показано состояние без наложенных
+ * условий. Добавлены по индустриальному стандарту (MUI X, Ignite UI, DevExpress): без них
+ * применённые к колонке сортировка и фильтр никак не видны, когда меню закрыто.
+ */
+export declare function ColumnHeaderMenu({ header, values, filter, sortDirection, onSortChange, onFilterChange, onReset, className }: {
+    header: string;
+    values: string[];
+    filter: ColumnFilter;
+    sortDirection: SortDirection | null;
+    onSortChange: (direction: SortDirection) => void;
+    onFilterChange: (next: ColumnFilter) => void;
+    onReset: () => void;
+    /** Правка паддинга, когда в ячейке рядом с кнопкой стоит ещё и грип перетаскивания. */
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Состояние открытого редактора.
+ *
+ * `full` — различие Excel между «полным» редактированием (F2, двойной клик) и «быстрым»
+ * (пользователь начал печатать поверх ячейки). В полном стрелки двигают каретку внутри поля,
+ * в быстром — сохраняют значение и переводят активную ячейку. Без этого флага одна и та же
+ * клавиша не может означать разное, и приходится выбирать между удобной навигацией
+ * и правкой текста. Так же устроен инлайн в MDT (`fullEdit` в `inline/scripts/ui-bindings.ts`).
+ */
+export type EditState = CellRef & {
+    full: boolean;
+    /** Начальное значение. У быстрого редактирования — набранный символ, он же затирает старое. */
+    seed?: string;
+    /** `clientX` двойного клика: куда поставить каретку при открытии. */
+    caretX?: number;
+    /** `clientY` двойного клика. Нужен только многострочной ячейке — в одну строку хватает `caretX`. */
+    caretY?: number;
+};
+/** Смещения активной ячейки для стрелок. */
+export declare const ARROW_DELTA: Record<string, [row: number, col: number]>;
+export declare const clampIndex: (value: number, max: number) => number;
+/**
+ * Ключ ячейки. Части соединяются двоеточием и годятся любые: пара индексов для таблицы
+ * с неизменным порядком строк, пара «id строки + ключ колонки» — для таблицы с сортировкой
+ * и фильтрами, где индекс перестаёт указывать на ту же ячейку после каждого действия.
+ */
+export declare const cellId: (row: string | number, col: string | number) => string;