ics-ui-kit 0.1.12 → 0.1.14

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;

package/dist/components/table/tree/TableTree.d.ts

@@ -0,0 +1,106 @@
+import { TreeLine, TreeRow } from './treeModel';
+import * as React from "react";
+export type TableTreeLinesProps = {
+    /**
+     * Модель линий, по одному элементу на колонку отступа. Считается `flattenTree`.
+     * Длина массива задаёт глубину узла — отдельный проп `level` не нужен.
+     */
+    lines: TreeLine[];
+    /** Спуск от раскрывателя вниз, к первому потомку. Ставится у раскрытых узлов с потомками. */
+    descends?: boolean;
+    className?: string;
+};
+/**
+ * Линии связи для строки дерева или группы.
+ *
+ * Кладётся в ячейку с `position: relative` и `padding-left: treeCellPaddingLeft(level)` —
+ * обычно этим занимается `TableTreeCell`.
+ *
+ * Все линии — абсолютно позиционированные блоки в 1px, а не рамки контейнеров: уровни
+ * вложенности в таблице не образуют вложенных DOM-узлов, поэтому рисовать `border-left`
+ * на контейнере уровня попросту негде.
+ *
+ * Разметка повторяет модель один в один и размечена data-атрибутами: на обёртке лежит вся
+ * модель строки (`data-tree-lines="pass none end"`), на каждом элементе — его роль
+ * (`data-tree-line`) и номер колонки. Это делает отладку в DevTools прямой: видно не только
+ * то, что нарисовано, но и то, что было велено нарисовать.
+ *
+ * @example
+ * <TableCell className="relative" style={{ paddingLeft: treeCellPaddingLeft(row.level) }}>
+ *   <TableTreeLines lines={row.lines} descends={row.descends} />
+ *   {row.node.name}
+ * </TableCell>
+ */
+export declare const TableTreeLines: {
+    ({ lines, descends, className }: TableTreeLinesProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export type TableTreeToggleProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    expanded: boolean;
+};
+/** Квадрат раскрытия ветки. Иконка и `aria-expanded` следуют за `expanded`. */
+export declare const TableTreeToggle: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    expanded: boolean;
+} & React.RefAttributes<HTMLButtonElement>>;
+/**
+ * Распорка на месте раскрывателя у листьев.
+ *
+ * Нужна, чтобы подписи узлов с потомками и без выравнивались по одной вертикали.
+ * Отдельным компонентом, а не режимом `TableTreeToggle`, чтобы у листа не было
+ * ни кнопки, ни `aria-expanded`.
+ */
+export declare const TableTreeSpacer: {
+    ({ className }: {
+        className?: string;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+/**
+ * Всё, что ячейка иерархии знает о строке: где она стоит и что у неё с потомками.
+ *
+ * Структурный тип, а не generic: ячейке безразличен сам узел, поэтому в неё проходит любой
+ * `TreeRow<T>` — и любой собранный вручную объект с этими пятью полями. Второе нужно там,
+ * где дерева в памяти нет: список пришёл плоским, с готовым `level`, а линии считаются
+ * `childTreeLines`.
+ *
+ * Инвариант: `lines.length === level`. Отступ берётся из `level`, а линии расставляются по
+ * индексам `lines` — при расхождении уголок промахнётся мимо отступа.
+ */
+export type TableTreeCellRow = Pick<TreeRow<unknown>, "level" | "lines" | "descends" | "hasChildren" | "isExpanded">;
+export type TableTreeCellProps = React.TdHTMLAttributes<HTMLTableCellElement> & {
+    /**
+     * Положение строки в иерархии: `level` — отступ, `lines` — линии связи, `descends` — спуск
+     * к первому потомку, `hasChildren` — раскрыватель либо распорка на его месте, `isExpanded` —
+     * знак в раскрывателе и `aria-expanded`.
+     */
+    row: TableTreeCellRow;
+    /** Клик по раскрывателю. Без него раскрыватель рисуется, но ничего не делает. */
+    onToggle?: React.MouseEventHandler<HTMLButtonElement>;
+    toggleLabel?: string;
+};
+/**
+ * Ячейка с отступом, линиями и раскрывателем — весь столбец иерархии целиком.
+ *
+ * Собирает три вещи, которые иначе пришлось бы согласовывать вручную в каждой таблице:
+ * `padding-left` по глубине, линии и раскрыватель либо распорку на его месте. Содержимое
+ * остаётся за потребителем — внутрь идёт что угодно, от подписи до бейджей.
+ *
+ * `align-top` не косметика: при переносе текста в соседних колонках содержимое, выровненное
+ * по центру, уедет вниз от коннектора, который привязан к первой строке.
+ *
+ * @example
+ * <TableTreeCell row={row} onToggle={() => toggle(row.node.id)}>
+ *   {row.node.name}
+ * </TableTreeCell>
+ */
+export declare const TableTreeCell: React.ForwardRefExoticComponent<React.TdHTMLAttributes<HTMLTableCellElement> & {
+    /**
+     * Положение строки в иерархии: `level` — отступ, `lines` — линии связи, `descends` — спуск
+     * к первому потомку, `hasChildren` — раскрыватель либо распорка на его месте, `isExpanded` —
+     * знак в раскрывателе и `aria-expanded`.
+     */
+    row: TableTreeCellRow;
+    /** Клик по раскрывателю. Без него раскрыватель рисуется, но ничего не делает. */
+    onToggle?: React.MouseEventHandler<HTMLButtonElement>;
+    toggleLabel?: string;
+} & React.RefAttributes<HTMLTableCellElement>>;

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

@@ -0,0 +1,3 @@
+export { TableTreeCell, TableTreeLines, TableTreeToggle, TableTreeSpacer, type TableTreeCellProps, type TableTreeCellRow, type TableTreeLinesProps, type TableTreeToggleProps } from './TableTree';
+export { treeLineX, treeCellPaddingLeft, TREE_INDENT, TREE_LINE_OFFSET, TREE_TOGGLE, TREE_STUB, TREE_CONNECTOR_Y, TREE_OVERHANG, TREE_TOGGLE_MARGIN_TOP } from './treeGeometry';
+export { flattenTree, childTreeLines, type TreeLine, type TreeRow, type FlattenTreeOptions } from './treeModel';

package/dist/components/table/tree/treeGeometry.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Геометрия линий иерархии.
+ *
+ * Значения связаны между собой — менять их можно только согласованно, поэтому производные
+ * выражены формулами, а не числами.
+ *
+ * ```
+ * ┌────────────────────────────────────────┐
+ * │   ┌───┐                                │
+ * │   │ − │ Родитель                       │
+ * │   └─┬─┘                                │
+ * ├─────┼──────────────────────────────────┤  ← граница ячеек; линию продлевает TREE_OVERHANG
+ * │     │    ┌───┐                         │
+ * │     └────┤ + │ Потомок                 │  ← TREE_CONNECTOR_Y (центр первой строки)
+ * │          └───┘                         │
+ * └────────────────────────────────────────┘
+ *
+ * ├─────┤           TREE_LINE_OFFSET — до вертикали нулевого уровня
+ *       ├──────┤    TREE_INDENT — шаг между вертикалями соседних уровней
+ *       ├────┤      TREE_STUB — отвод до левого края раскрывателя
+ *            ├───┤  TREE_TOGGLE — сторона квадрата, центр на своей вертикали
+ * ```
+ *
+ * Схема не в масштабе — важны отношения величин, а не пропорции на картинке.
+ */
+/** Шаг отступа на один уровень вложенности. */
+export declare const TREE_INDENT = 18;
+/** Отступ от левого края ячейки до вертикали нулевой колонки. */
+export declare const TREE_LINE_OFFSET = 13;
+/**
+ * Сторона квадрата-раскрывателя. Центрируется ровно на вертикали своего уровня.
+ *
+ * Совпадает с чекбоксом (`size-4`): в одной строке они стоят рядом, и разный размер
+ * у двух одинаковых по смыслу квадратов читается как небрежность.
+ *
+ * Сверху ограничен `2 * TREE_LINE_OFFSET` — иначе `treeCellPaddingLeft(0)` уходит в минус,
+ * и раскрыватель корня вылезает за левый край ячейки. Практический потолок ниже:
+ * при стороне больше `TREE_INDENT` обнуляется `TREE_STUB` и отвод к узлу исчезает.
+ */
+export declare const TREE_TOGGLE = 16;
+/**
+ * Длина горизонтального отвода — от вертикали предка до левого края раскрывателя.
+ *
+ * Обязана равняться `TREE_INDENT - TREE_TOGGLE / 2`: раскрыватель смещён от своей вертикали
+ * влево на половину стороны, и при любом другом значении между отводом и квадратом
+ * остаётся щель либо отвод заезжает под квадрат.
+ */
+export declare const TREE_STUB: number;
+/**
+ * Вертикальная позиция коннектора — центр ПЕРВОЙ строки текста, а не середина ячейки.
+ *
+ * Это принципиально для строк переменной высоты: при `top: 50%` середина ячейки уезжает вниз
+ * от подписи, как только контент переносится, и уголок перестаёт указывать на узел.
+ */
+export declare const TREE_CONNECTOR_Y: number;
+/**
+ * Насколько линии вылезают за padding-box ячейки сверху и снизу.
+ *
+ * Нижняя граница ячейки лежит вне её padding-box, и без этого выноса вертикаль обрывалась бы
+ * на каждой границе — вместо сплошной линии получался пунктир.
+ */
+export declare const TREE_OVERHANG = 1;
+/**
+ * Отступ раскрывателя сверху, при котором его центр совпадает с коннектором.
+ *
+ * Раньше здесь стоял `mt-0.5`, подобранный под сторону 12px. Теперь это разность:
+ * содержимое ячейки начинается на `TREE_CELL_PADDING_TOP`, а центр квадрата должен
+ * попасть на `TREE_CONNECTOR_Y`. При достаточно крупном раскрывателе значение
+ * становится отрицательным — квадрат заходит в верхний паддинг, и это нормально.
+ */
+export declare const TREE_TOGGLE_MARGIN_TOP: number;
+/**
+ * Горизонтальная позиция вертикали для колонки отступа.
+ *
+ * @example
+ * treeLineX(0); // 13
+ * treeLineX(2); // 49
+ */
+export declare const treeLineX: (column: number) => number;
+/**
+ * Левый отступ ячейки, при котором раскрыватель встаёт по центру вертикали своего уровня.
+ *
+ * @example
+ * <TableCell style={{ paddingLeft: treeCellPaddingLeft(row.level) }}> // уровень 2 → 41px
+ */
+export declare const treeCellPaddingLeft: (level: number) => number;

package/dist/components/table/tree/treeModel.d.ts

@@ -0,0 +1,87 @@
+/**
+ * Модель строки дерева: что рисовать в каждой колонке отступа.
+ *
+ * Ровно эти четыре состояния использует классический вывод `tree` и почти все табличные
+ * гриды (AG Grid, TanStack Table, rc-tree) — набор проверен и закрывает все случаи:
+ *
+ * - `pass` — сквозная вертикаль `│`: ветка предка продолжается ниже этой строки;
+ * - `branch` — `├`: отвод к узлу, и у узла есть следующие соседи;
+ * - `end` — `└`: отвод к последнему соседу, вертикаль обрывается на уголке;
+ * - `none` — пусто: ветка предка закончилась выше.
+ *
+ * Ключевой инвариант: **индекс в массиве равен номеру колонки**, а `lines.length` равно
+ * глубине узла. `branch`/`end` встречается только в последней колонке, `pass`/`none` — только
+ * в предыдущих. Именно этот инвариант убирает класс ошибок «сдвиг на единицу»: раньше
+ * массив хранил флаги предков, и колонка `level - 1` управлялась флагом родителя, хотя
+ * должна была — признаком `isLast` самого узла. Сравнивать модель с картинкой теперь можно
+ * глазами: `["pass", "none", "end"]` читается как `│ └`.
+ */
+export type TreeLine = "none" | "pass" | "branch" | "end";
+/** Строка плоского списка со всем, что нужно для отрисовки узла дерева. */
+export type TreeRow<T> = {
+    node: T;
+    /** Родительский узел, `null` у корней. */
+    parent: T | null;
+    /** Глубина, 0 — корень. Равна `lines.length`. */
+    level: number;
+    /** Позиция среди соседей. */
+    index: number;
+    /** Последний ли среди соседей — от этого зависит `└` вместо `├`. */
+    isLast: boolean;
+    hasChildren: boolean;
+    /** Раскрыт ли узел. У листьев всегда `false`. */
+    isExpanded: boolean;
+    /**
+     * Нужен ли спуск от раскрывателя вниз, к первому потомку.
+     *
+     * Вертикаль потомка начинается от его собственной строки, поэтому участок между
+     * раскрывателем и низом строки родителя рисует именно родитель.
+     */
+    descends: boolean;
+    lines: TreeLine[];
+    /** Индексы от корня: `[0, 2, 1]`. Годится как стабильный ключ и как «1.3.2» в интерфейсе. */
+    path: number[];
+};
+export type FlattenTreeOptions<T> = {
+    /**
+     * Потомки узла. Это функция поиска, а не имя поля: плоскому списку с `parentId` хватит
+     * индекса `Map<parentId, T[]>`, перекладывать данные в узлы с `children` не нужно.
+     */
+    getChildren: (node: T) => T[] | undefined;
+    /** Раскрыт ли узел. Свёрнутые не отдают потомков. По умолчанию раскрыты все. */
+    isExpanded?: (node: T) => boolean;
+};
+/**
+ * Линии потомка, выведенные из линий родителя.
+ *
+ * Весь алгоритм — в двух строчках: у предков уголок превращается в продолжение (`branch` →
+ * `pass`), а обрыв — в пустоту (`end` → `none`); своя колонка получает уголок по `isLast`.
+ * Экспортируется отдельно, чтобы линии можно было считать и без обхода дерева — например,
+ * для виртуализованного или подгружаемого списка, где полного дерева в памяти нет.
+ *
+ * Родительские линии в плоском списке удобно держать бегущим массивом `linesByLevel[level]`:
+ * в списке, упорядоченном как при выводе, родитель всегда встречается раньше потомка.
+ *
+ * @example
+ * childTreeLines(["pass", "branch"], false); // ["pass", "pass", "branch"]
+ * childTreeLines(["pass", "branch"], true); // ["pass", "pass", "end"]
+ */
+export declare const childTreeLines: (parentLines: TreeLine[], isLast: boolean) => TreeLine[];
+/**
+ * Разворачивает дерево в плоский список строк и попутно считает модель линий.
+ *
+ * Порядок — как при отображении: узел, затем его раскрытые потомки.
+ *
+ * @example
+ * const rows = flattenTree(nodes, {
+ *   getChildren: (node) => node.children,
+ *   isExpanded: (node) => expanded.has(node.id)
+ * });
+ *
+ * rows.map((row) => (
+ *   <TableRow key={row.path.join(".")}>
+ *     <TableTreeCell row={row} onToggle={() => toggle(row.node.id)}>{row.node.name}</TableTreeCell>
+ *   </TableRow>
+ * ));
+ */
+export declare function flattenTree<T>(roots: T[], options: FlattenTreeOptions<T>): TreeRow<T>[];

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

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

package/dist/components/table/tree.js

@@ -0,0 +1,19 @@
+import { s as a, o as E, p as s, u as l, r, q as _, v as R, j as t, k as L, m as N, l as O, x as n, w as G, n as i, t as b } from "../../treeModel-BlPWVj4W.js";
+export {
+  a as TREE_CONNECTOR_Y,
+  E as TREE_INDENT,
+  s as TREE_LINE_OFFSET,
+  l as TREE_OVERHANG,
+  r as TREE_STUB,
+  _ as TREE_TOGGLE,
+  R as TREE_TOGGLE_MARGIN_TOP,
+  t as TableTreeCell,
+  L as TableTreeLines,
+  N as TableTreeSpacer,
+  O as TableTreeToggle,
+  n as childTreeLines,
+  G as flattenTree,
+  i as treeCellPaddingLeft,
+  b as treeLineX
+};
+//# sourceMappingURL=tree.js.map

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

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