@ryuzaki13/react-foundation-ui 1.6.14 → 1.7.0

package/dist/tree-table/index.js

@@ -1,13 +1,13 @@
-import { a as e, c as t, d as n, i as r, m as i, n as ee, o as te, r as ne, s as re, t as ie } from "../chunks/base-table-CTafaxo2.js";
+import { a as e, c as t, d as n, i as r, n as i, o as ee, p as te, r as ne, s as re, t as ie } from "../chunks/base-table-DNSYOO9t.js";
 import { useEffect as a, useEffectEvent as o, useMemo as s, useRef as c, useState as ae } from "react";
 import { cn as oe } from "@ryuzaki13/react-foundation-lib/utils";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { ChevronDownIcon as d, ChevronRightIcon as f } from "lucide-react";
 import { formatPipelineDisplayValue as se } from "@ryuzaki13/react-foundation-lib/formatters";
-import { resolveTableLength as p, useTableRowSelection as ce } from "@ryuzaki13/react-foundation-lib/table";
-import { getCoreRowModel as m, getExpandedRowModel as le, useReactTable as ue } from "@tanstack/react-table";
+import { foundationTableFeatures as ce, resolveTableLength as p, useTableRowSelection as le } from "@ryuzaki13/react-foundation-lib/table";
+import { useTable as ue } from "@tanstack/react-table";
 import { buildTreeTableRows as de } from "@ryuzaki13/react-foundation-lib/tree-table";
-var h = {
+var m = {
 	treeColumnCell: "jOS9rT",
 	selectedIndicatorCell: "zHOAf7",
 	treeCell: "j48cXg",
@@ -18,22 +18,22 @@ var h = {
 };
 //#endregion
 //#region src/tree-table/TreeTable.tsx
-function g(e) {
+function h(e) {
 	return Object.fromEntries(e.map((e) => [e, !0]));
 }
-function _(e) {
+function g(e) {
 	return typeof e == "boolean" ? [] : Object.keys(e).filter((t) => e[t]);
 }
-function v(e, t) {
+function _(e, t) {
 	return t.get(e.id) ?? e.original;
 }
 function fe(e, t, n, r) {
 	return e.cell.column.id === n ? /* @__PURE__ */ u("div", {
-		className: h.treeCell,
+		className: m.treeCell,
 		style: { paddingInlineStart: `calc(${e.row.depth} * ${p(r) ?? "0em"})` },
 		children: [e.row.getCanExpand() ? /* @__PURE__ */ l("button", {
 			type: "button",
-			className: h.expanderButton,
+			className: m.expanderButton,
 			"aria-label": e.row.getIsExpanded() ? "Свернуть строку" : "Развернуть строку",
 			"data-tree-table-interactive": "true",
 			"data-ui": "tree-table-expander",
@@ -43,115 +43,114 @@ function fe(e, t, n, r) {
 			},
 			children: e.row.getIsExpanded() ? /* @__PURE__ */ l(d, { size: 16 }) : /* @__PURE__ */ l(f, { size: 16 })
 		}) : /* @__PURE__ */ l("span", {
-			className: h.expanderSpacer,
+			className: m.expanderSpacer,
 			"aria-hidden": "true"
 		}), /* @__PURE__ */ l("div", {
-			className: h.treeCellContent,
+			className: m.treeCellContent,
 			children: t
 		})]
 	}) : t;
 }
-function y({ title: u, isLoading: d, isFetching: f, data: p, columns: y, hierarchy: b, selectionMode: x = "none", expandFirstLevel: S = !1, defaultExpandedRowIds: C, treeColumnId: pe, indentSize: me = 1, className: he, tableClassName: ge, columnVisibility: _e, defaultColumnVisibility: ve, columnOrder: ye, defaultColumnOrder: be, columnSizing: xe, defaultColumnSizing: Se, columnPinning: w, defaultColumnPinning: T, enableColumnResizing: E = !1, enableColumnReordering: D = !1, columnResizeMinWidth: O, onColumnVisibilityChange: k, onColumnOrderChange: A, onColumnSizingChange: j, onColumnPinningChange: Ce, onRowClick: M, onRowSelectionChange: we, onExpandedRowIdsChange: Te, onReachEnd: N, getRowCanSelect: P, getRowClassName: Ee, renderHeaderContextMenu: De, renderCellContent: F }) {
-	let I = s(() => de(p ?? [], b), [p, b]), L = s(() => t(y), [y]), R = s(() => {
-		let e = new Set(C ?? []);
-		if (S) for (let t of I.rootRowIds) e.add(t);
+function v({ title: u, isLoading: d, isFetching: f, data: p, columns: v, hierarchy: y, selectionMode: b = "none", expandFirstLevel: x = !1, defaultExpandedRowIds: S, treeColumnId: C, indentSize: pe = 1, className: me, tableClassName: he, columnVisibility: ge, defaultColumnVisibility: w, columnOrder: _e, defaultColumnOrder: ve, columnSizing: ye, defaultColumnSizing: be, columnPinning: xe, defaultColumnPinning: T, enableColumnResizing: E = !1, enableColumnReordering: D = !1, columnResizeMinWidth: O, onColumnVisibilityChange: k, onColumnOrderChange: A, onColumnSizingChange: j, onColumnPinningChange: M, onRowClick: N, onRowSelectionChange: Se, onExpandedRowIdsChange: Ce, onReachEnd: P, getRowCanSelect: F, getRowClassName: we, renderHeaderContextMenu: Te, renderCellContent: I }) {
+	let L = s(() => de(p ?? [], y), [p, y]), R = s(() => t(v), [v]), z = s(() => {
+		let e = new Set(S ?? []);
+		if (x) for (let t of L.rootRowIds) e.add(t);
 		return Array.from(e);
 	}, [
-		C,
 		S,
-		I.rootRowIds
-	]), [z, B] = ae({}), V = c(!1), H = c(null), U = c(null), { rowSelection: Oe, activateRowSelection: ke } = ce({
-		availableRowIds: I.allRowIds,
-		rowById: I.rowById,
-		selectionMode: x,
-		onRowSelectionChange: we
-	}), { columnVisibility: W, onColumnVisibilityChange: Ae } = ne({
-		columnVisibility: _e,
-		defaultColumnVisibility: ve,
+		x,
+		L.rootRowIds
+	]), [B, V] = ae({}), H = c(!1), U = c(null), W = c(null), { rowSelection: Ee, activateRowSelection: De } = le({
+		availableRowIds: L.allRowIds,
+		rowById: L.rowById,
+		selectionMode: b,
+		onRowSelectionChange: Se
+	}), { columnVisibility: G, onColumnVisibilityChange: Oe } = ne({
+		columnVisibility: ge,
+		defaultColumnVisibility: w,
 		onColumnVisibilityChange: k
-	}), { columnOrder: G, onColumnOrderChange: je } = te({
-		columnOrder: ye,
-		defaultColumnOrder: be,
+	}), { columnOrder: K, onColumnOrderChange: ke } = ee({
+		columnOrder: _e,
+		defaultColumnOrder: ve,
 		onColumnOrderChange: A
-	}), { columnSizing: K, onColumnSizingChange: Me } = r({
-		columnSizing: xe,
-		defaultColumnSizing: Se,
+	}), { columnSizing: q, onColumnSizingChange: Ae } = r({
+		columnSizing: ye,
+		defaultColumnSizing: be,
 		columnResizeMinWidth: O,
 		onColumnSizingChange: j
-	}), { columnPinning: q, onColumnPinningChange: J } = e({
-		columnPinning: w,
+	}), { columnPinning: J, onColumnPinningChange: je } = e({
+		columnPinning: xe,
 		defaultColumnPinning: T,
-		onColumnPinningChange: Ce
+		onColumnPinningChange: M
 	}), Y = s(() => ({
-		columnOrder: G,
-		columnPinning: q,
-		columnSizing: K,
-		columnVisibility: W
+		columnOrder: K,
+		columnPinning: J,
+		columnSizing: q,
+		columnVisibility: G
 	}), [
-		G,
-		q,
 		K,
-		W
-	]), Ne = o((e, t) => {
+		J,
+		q,
+		G
+	]), Me = o((e, t) => {
 		if (e.length === 0) {
-			V.current = !1, B({});
+			H.current = !1, V({});
 			return;
 		}
 		let n = new Set(e);
-		B((e) => {
-			let r = _(e).filter((e) => n.has(e));
-			return V.current ? g(r) : (V.current = !0, g(Array.from(/* @__PURE__ */ new Set([...r, ...t.filter((e) => n.has(e))]))));
+		V((e) => {
+			let r = g(e).filter((e) => n.has(e));
+			return H.current ? h(r) : (H.current = !0, h(Array.from(/* @__PURE__ */ new Set([...r, ...t.filter((e) => n.has(e))]))));
 		});
-	}), Pe = o((e) => {
-		Te?.(_(e));
-	}), Fe = o(() => {
-		N?.();
+	}), Ne = o((e) => {
+		Ce?.(g(e));
+	}), Pe = o(() => {
+		P?.();
 	});
 	a(() => {
-		Ne(I.allRowIds, R);
-	}, [R, I.allRowIds]), a(() => {
-		Pe(z);
-	}, [z]), a(() => {
-		if (!N || !H.current || !U.current || d) return;
+		Me(L.allRowIds, z);
+	}, [z, L.allRowIds]), a(() => {
+		Ne(B);
+	}, [B]), a(() => {
+		if (!P || !U.current || !W.current || d) return;
 		let e = new IntersectionObserver((e) => {
-			e[0]?.isIntersecting && Fe();
+			e[0]?.isIntersecting && Pe();
 		}, {
-			root: H.current,
+			root: U.current,
 			threshold: .1
 		});
-		return e.observe(U.current), () => e.disconnect();
+		return e.observe(W.current), () => e.disconnect();
 	}, [
 		d,
-		N,
-		I.rows.length
+		P,
+		L.rows.length
 	]);
 	let X = ue({
-		data: I.rows,
-		columns: y,
+		features: ce,
+		data: L.rows,
+		columns: v,
 		state: {
-			columnOrder: G,
-			columnPinning: q,
-			columnSizing: K,
-			columnVisibility: W,
-			expanded: z,
-			rowSelection: Oe
+			columnOrder: K,
+			columnPinning: J,
+			columnSizing: q,
+			columnVisibility: G,
+			expanded: B,
+			rowSelection: Ee
 		},
-		getRowId: (e) => b.getRowId(e),
+		getRowId: (e) => y.getRowId(e),
 		getSubRows: (e) => e.children,
-		getCoreRowModel: m(),
-		getExpandedRowModel: le(),
-		onColumnOrderChange: je,
-		onColumnPinningChange: J,
-		onColumnSizingChange: Me,
-		onColumnVisibilityChange: Ae,
-		onExpandedChange: B,
-		enableMultiRowSelection: x === "multi",
+		onColumnOrderChange: ke,
+		onColumnPinningChange: je,
+		onColumnSizingChange: Ae,
+		onColumnVisibilityChange: Oe,
+		onExpandedChange: V,
+		enableMultiRowSelection: b === "multi",
 		enableRowSelection: (e) => {
-			if (x === "none") return !1;
-			let t = v(e, I.rowById);
-			return !P || P(t);
+			if (b === "none") return !1;
+			let t = _(e, L.rowById);
+			return !F || F(t);
 		}
-	}), Z = i(X, Y), Q = pe ?? Z[0]?.id, $ = X.getRowModel().rows, Ie = s(() => re({
+	}), Z = te(X, Y), Q = C ?? Z[0]?.id, $ = X.getRowModel().rows, Fe = s(() => re({
 		rows: $,
 		columns: Z,
 		resolveRowBoundaryKey: (e) => e.depth,
@@ -161,60 +160,60 @@ function y({ title: u, isLoading: d, isFetching: f, data: p, columns: y, hierarc
 		Z,
 		Q
 	]);
-	return /* @__PURE__ */ l(ee, {
+	return /* @__PURE__ */ l(i, {
 		table: X,
 		columnState: Y,
 		title: u,
 		isLoading: d,
 		isFetching: f,
-		className: he,
-		tableClassName: ge,
-		selectionMode: x,
-		scrollableRef: H,
+		className: me,
+		tableClassName: he,
+		selectionMode: b,
+		scrollableRef: U,
 		interactiveElementSelector: "[data-tree-table-interactive=\"true\"]",
-		onActivateRow: x !== "none" || M ? (e) => {
-			let t = v(e, I.rowById);
-			ke(e.id, e.getCanSelect()), M?.(t);
+		onActivateRow: b !== "none" || N ? (e) => {
+			let t = _(e, L.rowById);
+			De(e.id, e.getCanSelect()), N?.(t);
 		} : void 0,
-		isRowInteractive: (e) => !!(M || x !== "none" && e.getCanSelect()),
+		isRowInteractive: (e) => !!(N || b !== "none" && e.getCanSelect()),
 		getRowClassName: (e) => {
-			let t = v(e, I.rowById);
-			return Ee?.(t);
+			let t = _(e, L.rowById);
+			return we?.(t);
 		},
-		getCellClassName: ({ row: e, cell: t }) => oe(t.column.id === Q && h.treeColumnCell, t.column.id === Q && e.getIsSelected() && h.selectedIndicatorCell),
-		getCellLayout: ({ cell: e }) => Ie.get(e.id),
-		renderHeaderContextMenu: De,
+		getCellClassName: ({ row: e, cell: t }) => oe(t.column.id === Q && m.treeColumnCell, t.column.id === Q && e.getIsSelected() && m.selectedIndicatorCell),
+		getCellLayout: ({ cell: e }) => Fe.get(e.id),
+		renderHeaderContextMenu: Te,
 		enableColumnResizing: E,
 		enableColumnReordering: D,
 		columnResizeMinWidth: O,
 		renderCellContent: (e) => {
-			let t = v(e.row, I.rowById), r = se({
-				field: L.runtimeByColumnId[e.cell.column.id],
+			let t = _(e.row, L.rowById), r = se({
+				field: R.runtimeByColumnId[e.cell.column.id],
 				rawValue: e.cell.getValue(),
 				rowData: t,
 				rowKind: "tree"
 			}), i = n({
 				columnId: e.cell.column.id,
-				runtimeByColumnId: L.runtimeByColumnId,
-				customCellColumnIds: L.customCellColumnIds
+				runtimeByColumnId: R.runtimeByColumnId,
+				customCellColumnIds: R.customCellColumnIds
 			}) ? /* @__PURE__ */ l(ie, {
 				displayValue: r,
 				align: e.columnMeta?.align
 			}) : e.defaultContent;
-			return fe(e, F ? F({
+			return fe(e, I ? I({
 				...e,
 				defaultContent: i,
 				displayValue: r
-			}) : i, Q, me);
+			}) : i, Q, pe);
 		},
-		afterTableContent: N ? /* @__PURE__ */ l("div", {
-			ref: U,
-			className: h.sentinel,
+		afterTableContent: P ? /* @__PURE__ */ l("div", {
+			ref: W,
+			className: m.sentinel,
 			"aria-hidden": "true"
 		}) : null
 	});
 }
 //#endregion
-export { y as TreeTable };
+export { v as TreeTable };
 
 //# sourceMappingURL=index.js.map

package/dist/tree-table/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/tree-table/TreeTable.module.scss","../../src/tree-table/TreeTable.tsx"],"sourcesContent":[".treeColumnCell {\n\tpadding-inline-start: var(--space-sm);\n}\n\n.selectedIndicatorCell {\n\tbox-shadow: inset 0.1875rem 0 0 var(--content-accent);\n}\n\n.treeCell {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-xs);\n\tmin-width: 0;\n}\n\n.treeCellContent {\n\tmin-width: 0;\n\tflex: 1 1 auto;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.expanderButton {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: var(--radius-xs);\n\tbackground: transparent;\n\tcolor: var(--content-0);\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus-visible {\n\t\tbackground-color: var(--surface-2);\n\t}\n}\n\n.expanderSpacer {\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n}\n\n.sentinel {\n\theight: 1px;\n}\n","/* eslint-disable react-hooks/incompatible-library */\nimport { useEffect, useEffectEvent, useMemo, useRef, useState, type ReactNode } from \"react\";\n\nimport { formatPipelineDisplayValue } from \"@ryuzaki13/react-foundation-lib/formatters\";\nimport {\n\tresolveTableLength,\n\tTableColumnDef,\n\ttype TableColumnOrderState,\n\ttype TableColumnSizingState,\n\tTableSelectionMode,\n\tuseTableRowSelection\n} from \"@ryuzaki13/react-foundation-lib/table\";\nimport { buildTreeTableRows, type TreeTableFlatHierarchy, type TreeTableRowNode } from \"@ryuzaki13/react-foundation-lib/tree-table\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport {\n\tgetCoreRowModel,\n\tgetExpandedRowModel,\n\tuseReactTable,\n\ttype ExpandedState,\n\ttype Row,\n\ttype VisibilityState\n} from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport {\n\tBaseTable,\n\tbuildBaseTableMergedCellsLayout,\n\tbuildTableFormattingSnapshot,\n\tFormattedTableCell,\n\tgetOrderedVisibleLeafColumns,\n\tshouldUseTableFormatting,\n\tuseTableColumnOrder,\n\tuseTableColumnPinning,\n\tuseTableColumnSizing,\n\tuseTableColumnVisibility,\n\ttype BaseTableCellRenderArgs,\n\ttype BaseTableColumnState,\n\ttype BaseTableProps,\n\ttype TableColumnPinningState\n} from \"../base-table\";\n\nimport styles from \"./TreeTable.module.scss\";\n\nimport type { TableFormulaRowData } from \"@ryuzaki13/react-foundation-lib/formulas\";\n\n/**\n * Внутренний тип строки TreeTable после преобразования в иерархию.\n */\ntype TreeTableRuntimeRow<TData extends object> = TreeTableRowNode<TData>;\n\n/**\n * Пропсы компонента TreeTable.\n *\n * Компонент принимает плоский OData-список и сам строит иерархию,\n * оставляя управление раскрытием и выбором во внутреннем состоянии.\n */\nexport interface TreeTableProps<TData extends object> {\n\t/**\n\t * Необязательный заголовок над таблицей.\n\t */\n\ttitle?: string;\n\t/**\n\t * Признак первичной загрузки.\n\t */\n\tisLoading?: boolean;\n\t/**\n\t * Признак фоновой догрузки или обновления данных.\n\t */\n\tisFetching?: boolean;\n\t/**\n\t * Плоский источник строк.\n\t */\n\tdata: readonly TData[] | undefined | null;\n\t/**\n\t * Описание колонок через исходный тип строки.\n\t */\n\tcolumns: readonly TableColumnDef<TData>[];\n\t/**\n\t * Правила восстановления дерева из плоского списка.\n\t */\n\thierarchy: TreeTableFlatHierarchy<TData>;\n\t/**\n\t * Режим выбора строк.\n\t */\n\tselectionMode?: TableSelectionMode;\n\t/**\n\t * Если `true`, при первом появлении данных раскрывает корневой уровень.\n\t */\n\texpandFirstLevel?: boolean;\n\t/**\n\t * Дополнительные строки, которые должны быть раскрыты при первой инициализации.\n\t */\n\tdefaultExpandedRowIds?: readonly string[];\n\t/**\n\t * Идентификатор колонки, в которой нужно рисовать tree-toggle и отступы.\n\t *\n\t * Если не указан, используется первая видимая колонка.\n\t */\n\ttreeColumnId?: string;\n\t/**\n\t * Отступ на один уровень вложенности.\n\t *\n\t * Числовое значение трактуется как `em`.\n\t */\n\tindentSize?: string | number;\n\t/**\n\t * Дополнительный CSS-класс корневого контейнера.\n\t */\n\tclassName?: string;\n\t/**\n\t * Дополнительный CSS-класс тега `table`.\n\t */\n\ttableClassName?: string;\n\t/**\n\t * Внешнее controlled-состояние видимости колонок.\n\t */\n\tcolumnVisibility?: VisibilityState;\n\t/**\n\t * Стартовое uncontrolled-состояние видимости колонок.\n\t */\n\tdefaultColumnVisibility?: VisibilityState;\n\t/**\n\t * Внешнее controlled-состояние порядка колонок.\n\t */\n\tcolumnOrder?: readonly string[];\n\t/**\n\t * Стартовое uncontrolled-состояние порядка колонок.\n\t */\n\tdefaultColumnOrder?: readonly string[];\n\t/**\n\t * Внешнее controlled-состояние ширин колонок в px.\n\t */\n\tcolumnSizing?: TableColumnSizingState;\n\t/**\n\t * Стартовое uncontrolled-состояние ширин колонок в px.\n\t */\n\tdefaultColumnSizing?: TableColumnSizingState;\n\t/**\n\t * Внешнее controlled-состояние left-pinning для колонок.\n\t */\n\tcolumnPinning?: TableColumnPinningState;\n\t/**\n\t * Стартовое uncontrolled-состояние left-pinning для колонок.\n\t */\n\tdefaultColumnPinning?: TableColumnPinningState;\n\t/**\n\t * Включает изменение ширины колонок через header-handle.\n\t */\n\tenableColumnResizing?: boolean;\n\t/**\n\t * Включает изменение порядка колонок через drag&drop заголовков.\n\t */\n\tenableColumnReordering?: boolean;\n\t/**\n\t * Минимальная ширина колонки при resize в px.\n\t */\n\tcolumnResizeMinWidth?: number;\n\t/**\n\t * Вызывается после изменения видимости колонок.\n\t */\n\tonColumnVisibilityChange?: (state: VisibilityState) => void;\n\t/**\n\t * Вызывается после изменения порядка колонок.\n\t */\n\tonColumnOrderChange?: (state: TableColumnOrderState) => void;\n\t/**\n\t * Вызывается после изменения ширины колонок.\n\t */\n\tonColumnSizingChange?: (state: TableColumnSizingState) => void;\n\t/**\n\t * Вызывается после изменения left-pinning state.\n\t */\n\tonColumnPinningChange?: (state: TableColumnPinningState) => void;\n\t/**\n\t * Вызывается при активации строки кликом или клавиатурой.\n\t */\n\tonRowClick?: (row: TData) => void;\n\t/**\n\t * Вызывается после изменения выбранных строк.\n\t */\n\tonRowSelectionChange?: (rows: TData[]) => void;\n\t/**\n\t * Вызывается после изменения раскрытых узлов.\n\t */\n\tonExpandedRowIdsChange?: (rowIds: string[]) => void;\n\t/**\n\t * Вызывается при достижении конца таблицы внутри scroll-контейнера.\n\t */\n\tonReachEnd?: () => void;\n\t/**\n\t * Позволяет запретить выбор отдельных строк.\n\t */\n\tgetRowCanSelect?: (row: TData) => boolean;\n\t/**\n\t * Позволяет добавить CSS-класс для конкретной строки.\n\t */\n\tgetRowClassName?: (row: TData) => string | undefined;\n\t/**\n\t * Контекстное меню заголовка колонки. Получает runtime-строки дерева,\n\t * потому что BaseTable работает уже после сборки flat hierarchy.\n\t */\n\trenderHeaderContextMenu?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderHeaderContextMenu\"];\n\t/**\n\t * Точка расширения содержимого ячейки после общего форматирования.\n\t *\n\t * Для tree-column в `defaultContent` передается только содержимое ячейки:\n\t * TreeTable сам добавит expander и отступ после выполнения слота.\n\t */\n\trenderCellContent?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderCellContent\"];\n}\n\n/**\n * Преобразует массив идентификаторов в формат состояния раскрытия TanStack.\n */\nfunction toExpandedState(rowIds: readonly string[]): ExpandedState {\n\treturn Object.fromEntries(rowIds.map((rowId) => [rowId, true]));\n}\n\n/**\n * Извлекает из состояния раскрытия только активные идентификаторы.\n */\nfunction extractExpandedRowIds(expanded: ExpandedState): string[] {\n\tif (typeof expanded === \"boolean\") {\n\t\treturn [];\n\t}\n\n\treturn Object.keys(expanded).filter((rowId) => expanded[rowId]);\n}\n\n/**\n * Нормализует исходную строку, убирая зависимость от внутреннего поля `children`.\n */\nfunction resolveOriginalRow<TData extends object>(row: Row<TreeTableRuntimeRow<TData>>, rowById: Map<string, TData>): TData {\n\treturn rowById.get(row.id) ?? (row.original as TData);\n}\n\n/**\n * Рендерит содержимое древовидной ячейки.\n */\nfunction renderTreeCellContent<TData extends object>(\n\targs: BaseTableCellRenderArgs<TreeTableRuntimeRow<TData>>,\n\tcontent: ReactNode,\n\ttreeColumnId: string | undefined,\n\tindentSize: string | number\n): ReactNode {\n\tif (args.cell.column.id !== treeColumnId) {\n\t\treturn content;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={styles.treeCell}\n\t\t\tstyle={{\n\t\t\t\tpaddingInlineStart: `calc(${args.row.depth} * ${resolveTableLength(indentSize) ?? \"0em\"})`\n\t\t\t}}>\n\t\t\t{args.row.getCanExpand() ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.expanderButton}\n\t\t\t\t\taria-label={args.row.getIsExpanded() ? \"Свернуть строку\" : \"Развернуть строку\"}\n\t\t\t\t\tdata-tree-table-interactive=\"true\"\n\t\t\t\t\tdata-ui=\"tree-table-expander\"\n\t\t\t\t\tdata-action={args.row.getIsExpanded() ? \"collapse-tree-table-row\" : \"expand-tree-table-row\"}\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\targs.row.toggleExpanded();\n\t\t\t\t\t}}>\n\t\t\t\t\t{args.row.getIsExpanded() ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className={styles.expanderSpacer} aria-hidden=\"true\" />\n\t\t\t)}\n\n\t\t\t<div className={styles.treeCellContent}>{content}</div>\n\t\t</div>\n\t);\n}\n\n/**\n * Древовидная таблица на базе TanStack Table для плоских OData-данных.\n */\nexport function TreeTable<TData extends object>({\n\ttitle,\n\tisLoading,\n\tisFetching,\n\tdata,\n\tcolumns,\n\thierarchy,\n\tselectionMode = \"none\",\n\texpandFirstLevel = false,\n\tdefaultExpandedRowIds,\n\ttreeColumnId,\n\tindentSize = 1,\n\tclassName,\n\ttableClassName,\n\tcolumnVisibility,\n\tdefaultColumnVisibility,\n\tcolumnOrder,\n\tdefaultColumnOrder,\n\tcolumnSizing,\n\tdefaultColumnSizing,\n\tcolumnPinning,\n\tdefaultColumnPinning,\n\tenableColumnResizing = false,\n\tenableColumnReordering = false,\n\tcolumnResizeMinWidth,\n\tonColumnVisibilityChange,\n\tonColumnOrderChange,\n\tonColumnSizingChange,\n\tonColumnPinningChange,\n\tonRowClick,\n\tonRowSelectionChange,\n\tonExpandedRowIdsChange,\n\tonReachEnd,\n\tgetRowCanSelect,\n\tgetRowClassName,\n\trenderHeaderContextMenu,\n\trenderCellContent\n}: TreeTableProps<TData>) {\n\tconst treeData = useMemo(() => buildTreeTableRows(data ?? [], hierarchy), [data, hierarchy]);\n\tconst formattingSnapshot = useMemo(() => buildTableFormattingSnapshot(columns), [columns]);\n\tconst initialExpandedRowIds = useMemo(() => {\n\t\tconst nextExpandedRowIds = new Set(defaultExpandedRowIds ?? []);\n\n\t\tif (expandFirstLevel) {\n\t\t\tfor (const rootRowId of treeData.rootRowIds) {\n\t\t\t\tnextExpandedRowIds.add(rootRowId);\n\t\t\t}\n\t\t}\n\n\t\treturn Array.from(nextExpandedRowIds);\n\t}, [defaultExpandedRowIds, expandFirstLevel, treeData.rootRowIds]);\n\n\tconst [expanded, setExpanded] = useState<ExpandedState>({});\n\tconst hasInitializedExpansionRef = useRef(false);\n\tconst scrollableRef = useRef<HTMLDivElement | null>(null);\n\tconst sentinelRef = useRef<HTMLDivElement | null>(null);\n\n\tconst { rowSelection, activateRowSelection } = useTableRowSelection({\n\t\tavailableRowIds: treeData.allRowIds,\n\t\trowById: treeData.rowById,\n\t\tselectionMode,\n\t\tonRowSelectionChange\n\t});\n\tconst { columnVisibility: resolvedColumnVisibility, onColumnVisibilityChange: handleColumnVisibilityChange } = useTableColumnVisibility(\n\t\t{\n\t\t\tcolumnVisibility,\n\t\t\tdefaultColumnVisibility,\n\t\t\tonColumnVisibilityChange\n\t\t}\n\t);\n\tconst { columnOrder: resolvedColumnOrder, onColumnOrderChange: handleColumnOrderChange } = useTableColumnOrder({\n\t\tcolumnOrder,\n\t\tdefaultColumnOrder,\n\t\tonColumnOrderChange\n\t});\n\tconst { columnSizing: resolvedColumnSizing, onColumnSizingChange: handleColumnSizingChange } = useTableColumnSizing({\n\t\tcolumnSizing,\n\t\tdefaultColumnSizing,\n\t\tcolumnResizeMinWidth,\n\t\tonColumnSizingChange\n\t});\n\tconst { columnPinning: resolvedColumnPinning, onColumnPinningChange: handleColumnPinningChange } = useTableColumnPinning({\n\t\tcolumnPinning,\n\t\tdefaultColumnPinning,\n\t\tonColumnPinningChange\n\t});\n\n\tconst baseTableColumnState = useMemo<BaseTableColumnState>(\n\t\t() => ({\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility\n\t\t}),\n\t\t[resolvedColumnOrder, resolvedColumnPinning, resolvedColumnSizing, resolvedColumnVisibility]\n\t);\n\n\tconst syncExpandedState = useEffectEvent((availableRowIds: readonly string[], nextInitialExpandedRowIds: readonly string[]) => {\n\t\tif (availableRowIds.length === 0) {\n\t\t\thasInitializedExpansionRef.current = false;\n\t\t\tsetExpanded({});\n\t\t\treturn;\n\t\t}\n\n\t\tconst availableRowIdSet = new Set(availableRowIds);\n\n\t\tsetExpanded((currentExpanded) => {\n\t\t\tconst persistedRowIds = extractExpandedRowIds(currentExpanded).filter((rowId) => availableRowIdSet.has(rowId));\n\n\t\t\tif (!hasInitializedExpansionRef.current) {\n\t\t\t\thasInitializedExpansionRef.current = true;\n\n\t\t\t\tconst seededRowIds = Array.from(\n\t\t\t\t\tnew Set([...persistedRowIds, ...nextInitialExpandedRowIds.filter((rowId) => availableRowIdSet.has(rowId))])\n\t\t\t\t);\n\n\t\t\t\treturn toExpandedState(seededRowIds);\n\t\t\t}\n\n\t\t\treturn toExpandedState(persistedRowIds);\n\t\t});\n\t});\n\n\tconst emitExpandedRowIdsChange = useEffectEvent((currentExpanded: ExpandedState) => {\n\t\tonExpandedRowIdsChange?.(extractExpandedRowIds(currentExpanded));\n\t});\n\n\tconst emitReachEnd = useEffectEvent(() => {\n\t\tonReachEnd?.();\n\t});\n\n\tuseEffect(() => {\n\t\tsyncExpandedState(treeData.allRowIds, initialExpandedRowIds);\n\t}, [initialExpandedRowIds, treeData.allRowIds]);\n\n\tuseEffect(() => {\n\t\temitExpandedRowIdsChange(expanded);\n\t}, [expanded]);\n\n\tuseEffect(() => {\n\t\tif (!onReachEnd || !scrollableRef.current || !sentinelRef.current || isLoading) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst entry = entries[0];\n\n\t\t\t\tif (entry?.isIntersecting) {\n\t\t\t\t\temitReachEnd();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\troot: scrollableRef.current,\n\t\t\t\tthreshold: 0.1\n\t\t\t}\n\t\t);\n\n\t\tobserver.observe(sentinelRef.current);\n\n\t\treturn () => observer.disconnect();\n\t}, [isLoading, onReachEnd, treeData.rows.length]);\n\n\tconst table = useReactTable<TreeTableRuntimeRow<TData>>({\n\t\tdata: treeData.rows as TreeTableRuntimeRow<TData>[],\n\t\tcolumns: columns as TableColumnDef<TreeTableRuntimeRow<TData>>[],\n\t\tstate: {\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility,\n\t\t\texpanded,\n\t\t\trowSelection\n\t\t},\n\t\tgetRowId: (row) => hierarchy.getRowId(row as TData),\n\t\tgetSubRows: (row) => row.children,\n\t\tgetCoreRowModel: getCoreRowModel(),\n\t\tgetExpandedRowModel: getExpandedRowModel(),\n\t\tonColumnOrderChange: handleColumnOrderChange,\n\t\tonColumnPinningChange: handleColumnPinningChange,\n\t\tonColumnSizingChange: handleColumnSizingChange,\n\t\tonColumnVisibilityChange: handleColumnVisibilityChange,\n\t\tonExpandedChange: setExpanded,\n\t\tenableMultiRowSelection: selectionMode === \"multi\",\n\t\tenableRowSelection: (row) => {\n\t\t\tif (selectionMode === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\treturn getRowCanSelect ? getRowCanSelect(originalRow) : true;\n\t\t}\n\t});\n\n\tconst visibleLeafColumns = getOrderedVisibleLeafColumns(table, baseTableColumnState);\n\tconst resolvedTreeColumnId = treeColumnId ?? visibleLeafColumns[0]?.id;\n\tconst rowModelRows = table.getRowModel().rows;\n\tconst mergedCellLayout = useMemo(\n\t\t() =>\n\t\t\tbuildBaseTableMergedCellsLayout({\n\t\t\t\trows: rowModelRows,\n\t\t\t\tcolumns: visibleLeafColumns,\n\t\t\t\tresolveRowBoundaryKey: (row) => row.depth,\n\t\t\t\texcludeColumnIds: resolvedTreeColumnId ? new Set([resolvedTreeColumnId]) : undefined\n\t\t\t}),\n\t\t[rowModelRows, visibleLeafColumns, resolvedTreeColumnId]\n\t);\n\n\t/**\n\t * Активирует строку: обновляет выбор в соответствии с режимом и вызывает внешний callback.\n\t */\n\tconst activateRow = (row: Row<TreeTableRuntimeRow<TData>>) => {\n\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\tactivateRowSelection(row.id, row.getCanSelect());\n\t\tonRowClick?.(originalRow);\n\t};\n\n\treturn (\n\t\t<BaseTable\n\t\t\ttable={table}\n\t\t\tcolumnState={baseTableColumnState}\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tisFetching={isFetching}\n\t\t\tclassName={className}\n\t\t\ttableClassName={tableClassName}\n\t\t\tselectionMode={selectionMode}\n\t\t\tscrollableRef={scrollableRef}\n\t\t\tinteractiveElementSelector='[data-tree-table-interactive=\"true\"]'\n\t\t\tonActivateRow={selectionMode !== \"none\" || onRowClick ? activateRow : undefined}\n\t\t\tisRowInteractive={(row) => Boolean(onRowClick || (selectionMode !== \"none\" && row.getCanSelect()))}\n\t\t\tgetRowClassName={(row) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\t\treturn getRowClassName?.(originalRow);\n\t\t\t}}\n\t\t\tgetCellClassName={({ row, cell }) =>\n\t\t\t\tcn(\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && styles.treeColumnCell,\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && row.getIsSelected() && styles.selectedIndicatorCell\n\t\t\t\t)\n\t\t\t}\n\t\t\tgetCellLayout={({ cell }) => mergedCellLayout.get(cell.id)}\n\t\t\trenderHeaderContextMenu={renderHeaderContextMenu}\n\t\t\tenableColumnResizing={enableColumnResizing}\n\t\t\tenableColumnReordering={enableColumnReordering}\n\t\t\tcolumnResizeMinWidth={columnResizeMinWidth}\n\t\t\trenderCellContent={(args) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(args.row, treeData.rowById);\n\t\t\t\tconst displayValue = formatPipelineDisplayValue({\n\t\t\t\t\tfield: formattingSnapshot.runtimeByColumnId[args.cell.column.id],\n\t\t\t\t\trawValue: args.cell.getValue(),\n\t\t\t\t\trowData: originalRow as TableFormulaRowData,\n\t\t\t\t\trowKind: \"tree\"\n\t\t\t\t});\n\t\t\t\tconst defaultContent = shouldUseTableFormatting({\n\t\t\t\t\tcolumnId: args.cell.column.id,\n\t\t\t\t\truntimeByColumnId: formattingSnapshot.runtimeByColumnId,\n\t\t\t\t\tcustomCellColumnIds: formattingSnapshot.customCellColumnIds\n\t\t\t\t}) ? (\n\t\t\t\t\t<FormattedTableCell displayValue={displayValue} align={args.columnMeta?.align} />\n\t\t\t\t) : (\n\t\t\t\t\targs.defaultContent\n\t\t\t\t);\n\t\t\t\tconst content = renderCellContent\n\t\t\t\t\t? renderCellContent({\n\t\t\t\t\t\t\t...args,\n\t\t\t\t\t\t\tdefaultContent,\n\t\t\t\t\t\t\tdisplayValue\n\t\t\t\t\t\t})\n\t\t\t\t\t: defaultContent;\n\n\t\t\t\treturn renderTreeCellContent(args, content, resolvedTreeColumnId, indentSize);\n\t\t\t}}\n\t\t\tafterTableContent={onReachEnd ? <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" /> : null}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/tree-table/TreeTable.module.scss","../../src/tree-table/TreeTable.tsx"],"sourcesContent":[".treeColumnCell {\n\tpadding-inline-start: var(--space-sm);\n}\n\n.selectedIndicatorCell {\n\tbox-shadow: inset 0.1875rem 0 0 var(--content-accent);\n}\n\n.treeCell {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--space-xs);\n\tmin-width: 0;\n}\n\n.treeCellContent {\n\tmin-width: 0;\n\tflex: 1 1 auto;\n\toverflow: hidden;\n\ttext-overflow: ellipsis;\n\twhite-space: nowrap;\n}\n\n.expanderButton {\n\tdisplay: inline-flex;\n\talign-items: center;\n\tjustify-content: center;\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n\tpadding: 0;\n\tborder: 0;\n\tborder-radius: var(--radius-xs);\n\tbackground: transparent;\n\tcolor: var(--content-0);\n\tcursor: pointer;\n\n\t&:hover,\n\t&:focus-visible {\n\t\tbackground-color: var(--surface-2);\n\t}\n}\n\n.expanderSpacer {\n\tflex: 0 0 1.5rem;\n\twidth: 1.5rem;\n\theight: 1.5rem;\n}\n\n.sentinel {\n\theight: 1px;\n}\n","import { useEffect, useEffectEvent, useMemo, useRef, useState, type ReactNode } from \"react\";\n\nimport { formatPipelineDisplayValue } from \"@ryuzaki13/react-foundation-lib/formatters\";\nimport {\n\ttype FoundationTableRow,\n\tfoundationTableFeatures,\n\tresolveTableLength,\n\tTableColumnDef,\n\ttype TableColumnOrderState,\n\ttype TableColumnSizingState,\n\ttype TableColumnVisibilityState,\n\tTableSelectionMode,\n\tuseTableRowSelection\n} from \"@ryuzaki13/react-foundation-lib/table\";\nimport { buildTreeTableRows, type TreeTableFlatHierarchy, type TreeTableRowNode } from \"@ryuzaki13/react-foundation-lib/tree-table\";\nimport { cn } from \"@ryuzaki13/react-foundation-lib/utils\";\nimport { useTable, type ExpandedState } from \"@tanstack/react-table\";\nimport { ChevronDownIcon, ChevronRightIcon } from \"lucide-react\";\n\nimport {\n\tBaseTable,\n\tbuildBaseTableMergedCellsLayout,\n\tbuildTableFormattingSnapshot,\n\tFormattedTableCell,\n\tgetOrderedVisibleLeafColumns,\n\tshouldUseTableFormatting,\n\tuseTableColumnOrder,\n\tuseTableColumnPinning,\n\tuseTableColumnSizing,\n\tuseTableColumnVisibility,\n\ttype BaseTableCellRenderArgs,\n\ttype BaseTableColumnState,\n\ttype BaseTableProps,\n\ttype TableColumnPinningState\n} from \"../base-table\";\n\nimport styles from \"./TreeTable.module.scss\";\n\nimport type { TableFormulaRowData } from \"@ryuzaki13/react-foundation-lib/formulas\";\n\n/**\n * Внутренний тип строки TreeTable после преобразования в иерархию.\n */\ntype TreeTableRuntimeRow<TData extends object> = TreeTableRowNode<TData>;\n\n/**\n * Пропсы компонента TreeTable.\n *\n * Компонент принимает плоский OData-список и сам строит иерархию,\n * оставляя управление раскрытием и выбором во внутреннем состоянии.\n */\nexport interface TreeTableProps<TData extends object> {\n\t/**\n\t * Необязательный заголовок над таблицей.\n\t */\n\ttitle?: string;\n\t/**\n\t * Признак первичной загрузки.\n\t */\n\tisLoading?: boolean;\n\t/**\n\t * Признак фоновой догрузки или обновления данных.\n\t */\n\tisFetching?: boolean;\n\t/**\n\t * Плоский источник строк.\n\t */\n\tdata: readonly TData[] | undefined | null;\n\t/**\n\t * Описание колонок через исходный тип строки.\n\t */\n\tcolumns: readonly TableColumnDef<TData>[];\n\t/**\n\t * Правила восстановления дерева из плоского списка.\n\t */\n\thierarchy: TreeTableFlatHierarchy<TData>;\n\t/**\n\t * Режим выбора строк.\n\t */\n\tselectionMode?: TableSelectionMode;\n\t/**\n\t * Если `true`, при первом появлении данных раскрывает корневой уровень.\n\t */\n\texpandFirstLevel?: boolean;\n\t/**\n\t * Дополнительные строки, которые должны быть раскрыты при первой инициализации.\n\t */\n\tdefaultExpandedRowIds?: readonly string[];\n\t/**\n\t * Идентификатор колонки, в которой нужно рисовать tree-toggle и отступы.\n\t *\n\t * Если не указан, используется первая видимая колонка.\n\t */\n\ttreeColumnId?: string;\n\t/**\n\t * Отступ на один уровень вложенности.\n\t *\n\t * Числовое значение трактуется как `em`.\n\t */\n\tindentSize?: string | number;\n\t/**\n\t * Дополнительный CSS-класс корневого контейнера.\n\t */\n\tclassName?: string;\n\t/**\n\t * Дополнительный CSS-класс тега `table`.\n\t */\n\ttableClassName?: string;\n\t/**\n\t * Внешнее controlled-состояние видимости колонок.\n\t */\n\tcolumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Стартовое uncontrolled-состояние видимости колонок.\n\t */\n\tdefaultColumnVisibility?: TableColumnVisibilityState;\n\t/**\n\t * Внешнее controlled-состояние порядка колонок.\n\t */\n\tcolumnOrder?: readonly string[];\n\t/**\n\t * Стартовое uncontrolled-состояние порядка колонок.\n\t */\n\tdefaultColumnOrder?: readonly string[];\n\t/**\n\t * Внешнее controlled-состояние ширин колонок в px.\n\t */\n\tcolumnSizing?: TableColumnSizingState;\n\t/**\n\t * Стартовое uncontrolled-состояние ширин колонок в px.\n\t */\n\tdefaultColumnSizing?: TableColumnSizingState;\n\t/**\n\t * Внешнее controlled-состояние start-pinning для колонок.\n\t */\n\tcolumnPinning?: TableColumnPinningState;\n\t/**\n\t * Стартовое uncontrolled-состояние start-pinning для колонок.\n\t */\n\tdefaultColumnPinning?: TableColumnPinningState;\n\t/**\n\t * Включает изменение ширины колонок через header-handle.\n\t */\n\tenableColumnResizing?: boolean;\n\t/**\n\t * Включает изменение порядка колонок через drag&drop заголовков.\n\t */\n\tenableColumnReordering?: boolean;\n\t/**\n\t * Минимальная ширина колонки при resize в px.\n\t */\n\tcolumnResizeMinWidth?: number;\n\t/**\n\t * Вызывается после изменения видимости колонок.\n\t */\n\tonColumnVisibilityChange?: (state: TableColumnVisibilityState) => void;\n\t/**\n\t * Вызывается после изменения порядка колонок.\n\t */\n\tonColumnOrderChange?: (state: TableColumnOrderState) => void;\n\t/**\n\t * Вызывается после изменения ширины колонок.\n\t */\n\tonColumnSizingChange?: (state: TableColumnSizingState) => void;\n\t/**\n\t * Вызывается после изменения start-pinning state.\n\t */\n\tonColumnPinningChange?: (state: TableColumnPinningState) => void;\n\t/**\n\t * Вызывается при активации строки кликом или клавиатурой.\n\t */\n\tonRowClick?: (row: TData) => void;\n\t/**\n\t * Вызывается после изменения выбранных строк.\n\t */\n\tonRowSelectionChange?: (rows: TData[]) => void;\n\t/**\n\t * Вызывается после изменения раскрытых узлов.\n\t */\n\tonExpandedRowIdsChange?: (rowIds: string[]) => void;\n\t/**\n\t * Вызывается при достижении конца таблицы внутри scroll-контейнера.\n\t */\n\tonReachEnd?: () => void;\n\t/**\n\t * Позволяет запретить выбор отдельных строк.\n\t */\n\tgetRowCanSelect?: (row: TData) => boolean;\n\t/**\n\t * Позволяет добавить CSS-класс для конкретной строки.\n\t */\n\tgetRowClassName?: (row: TData) => string | undefined;\n\t/**\n\t * Контекстное меню заголовка колонки. Получает runtime-строки дерева,\n\t * потому что BaseTable работает уже после сборки flat hierarchy.\n\t */\n\trenderHeaderContextMenu?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderHeaderContextMenu\"];\n\t/**\n\t * Точка расширения содержимого ячейки после общего форматирования.\n\t *\n\t * Для tree-column в `defaultContent` передается только содержимое ячейки:\n\t * TreeTable сам добавит expander и отступ после выполнения слота.\n\t */\n\trenderCellContent?: BaseTableProps<TreeTableRuntimeRow<TData>>[\"renderCellContent\"];\n}\n\n/**\n * Преобразует массив идентификаторов в формат состояния раскрытия TanStack.\n */\nfunction toExpandedState(rowIds: readonly string[]): ExpandedState {\n\treturn Object.fromEntries(rowIds.map((rowId) => [rowId, true]));\n}\n\n/**\n * Извлекает из состояния раскрытия только активные идентификаторы.\n */\nfunction extractExpandedRowIds(expanded: ExpandedState): string[] {\n\tif (typeof expanded === \"boolean\") {\n\t\treturn [];\n\t}\n\n\treturn Object.keys(expanded).filter((rowId) => expanded[rowId]);\n}\n\n/**\n * Нормализует исходную строку, убирая зависимость от внутреннего поля `children`.\n */\nfunction resolveOriginalRow<TData extends object>(row: FoundationTableRow<TreeTableRuntimeRow<TData>>, rowById: Map<string, TData>): TData {\n\treturn rowById.get(row.id) ?? (row.original as TData);\n}\n\n/**\n * Рендерит содержимое древовидной ячейки.\n */\nfunction renderTreeCellContent<TData extends object>(\n\targs: BaseTableCellRenderArgs<TreeTableRuntimeRow<TData>>,\n\tcontent: ReactNode,\n\ttreeColumnId: string | undefined,\n\tindentSize: string | number\n): ReactNode {\n\tif (args.cell.column.id !== treeColumnId) {\n\t\treturn content;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\tclassName={styles.treeCell}\n\t\t\tstyle={{\n\t\t\t\tpaddingInlineStart: `calc(${args.row.depth} * ${resolveTableLength(indentSize) ?? \"0em\"})`\n\t\t\t}}>\n\t\t\t{args.row.getCanExpand() ? (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={styles.expanderButton}\n\t\t\t\t\taria-label={args.row.getIsExpanded() ? \"Свернуть строку\" : \"Развернуть строку\"}\n\t\t\t\t\tdata-tree-table-interactive=\"true\"\n\t\t\t\t\tdata-ui=\"tree-table-expander\"\n\t\t\t\t\tdata-action={args.row.getIsExpanded() ? \"collapse-tree-table-row\" : \"expand-tree-table-row\"}\n\t\t\t\t\tonClick={(event) => {\n\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\targs.row.toggleExpanded();\n\t\t\t\t\t}}>\n\t\t\t\t\t{args.row.getIsExpanded() ? <ChevronDownIcon size={16} /> : <ChevronRightIcon size={16} />}\n\t\t\t\t</button>\n\t\t\t) : (\n\t\t\t\t<span className={styles.expanderSpacer} aria-hidden=\"true\" />\n\t\t\t)}\n\n\t\t\t<div className={styles.treeCellContent}>{content}</div>\n\t\t</div>\n\t);\n}\n\n/**\n * Древовидная таблица на базе TanStack Table для плоских OData-данных.\n */\nexport function TreeTable<TData extends object>({\n\ttitle,\n\tisLoading,\n\tisFetching,\n\tdata,\n\tcolumns,\n\thierarchy,\n\tselectionMode = \"none\",\n\texpandFirstLevel = false,\n\tdefaultExpandedRowIds,\n\ttreeColumnId,\n\tindentSize = 1,\n\tclassName,\n\ttableClassName,\n\tcolumnVisibility,\n\tdefaultColumnVisibility,\n\tcolumnOrder,\n\tdefaultColumnOrder,\n\tcolumnSizing,\n\tdefaultColumnSizing,\n\tcolumnPinning,\n\tdefaultColumnPinning,\n\tenableColumnResizing = false,\n\tenableColumnReordering = false,\n\tcolumnResizeMinWidth,\n\tonColumnVisibilityChange,\n\tonColumnOrderChange,\n\tonColumnSizingChange,\n\tonColumnPinningChange,\n\tonRowClick,\n\tonRowSelectionChange,\n\tonExpandedRowIdsChange,\n\tonReachEnd,\n\tgetRowCanSelect,\n\tgetRowClassName,\n\trenderHeaderContextMenu,\n\trenderCellContent\n}: TreeTableProps<TData>) {\n\tconst treeData = useMemo(() => buildTreeTableRows(data ?? [], hierarchy), [data, hierarchy]);\n\tconst formattingSnapshot = useMemo(() => buildTableFormattingSnapshot(columns), [columns]);\n\tconst initialExpandedRowIds = useMemo(() => {\n\t\tconst nextExpandedRowIds = new Set(defaultExpandedRowIds ?? []);\n\n\t\tif (expandFirstLevel) {\n\t\t\tfor (const rootRowId of treeData.rootRowIds) {\n\t\t\t\tnextExpandedRowIds.add(rootRowId);\n\t\t\t}\n\t\t}\n\n\t\treturn Array.from(nextExpandedRowIds);\n\t}, [defaultExpandedRowIds, expandFirstLevel, treeData.rootRowIds]);\n\n\tconst [expanded, setExpanded] = useState<ExpandedState>({});\n\tconst hasInitializedExpansionRef = useRef(false);\n\tconst scrollableRef = useRef<HTMLDivElement | null>(null);\n\tconst sentinelRef = useRef<HTMLDivElement | null>(null);\n\n\tconst { rowSelection, activateRowSelection } = useTableRowSelection({\n\t\tavailableRowIds: treeData.allRowIds,\n\t\trowById: treeData.rowById,\n\t\tselectionMode,\n\t\tonRowSelectionChange\n\t});\n\tconst { columnVisibility: resolvedColumnVisibility, onColumnVisibilityChange: handleColumnVisibilityChange } = useTableColumnVisibility(\n\t\t{\n\t\t\tcolumnVisibility,\n\t\t\tdefaultColumnVisibility,\n\t\t\tonColumnVisibilityChange\n\t\t}\n\t);\n\tconst { columnOrder: resolvedColumnOrder, onColumnOrderChange: handleColumnOrderChange } = useTableColumnOrder({\n\t\tcolumnOrder,\n\t\tdefaultColumnOrder,\n\t\tonColumnOrderChange\n\t});\n\tconst { columnSizing: resolvedColumnSizing, onColumnSizingChange: handleColumnSizingChange } = useTableColumnSizing({\n\t\tcolumnSizing,\n\t\tdefaultColumnSizing,\n\t\tcolumnResizeMinWidth,\n\t\tonColumnSizingChange\n\t});\n\tconst { columnPinning: resolvedColumnPinning, onColumnPinningChange: handleColumnPinningChange } = useTableColumnPinning({\n\t\tcolumnPinning,\n\t\tdefaultColumnPinning,\n\t\tonColumnPinningChange\n\t});\n\n\tconst baseTableColumnState = useMemo<BaseTableColumnState>(\n\t\t() => ({\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility\n\t\t}),\n\t\t[resolvedColumnOrder, resolvedColumnPinning, resolvedColumnSizing, resolvedColumnVisibility]\n\t);\n\n\tconst syncExpandedState = useEffectEvent((availableRowIds: readonly string[], nextInitialExpandedRowIds: readonly string[]) => {\n\t\tif (availableRowIds.length === 0) {\n\t\t\thasInitializedExpansionRef.current = false;\n\t\t\tsetExpanded({});\n\t\t\treturn;\n\t\t}\n\n\t\tconst availableRowIdSet = new Set(availableRowIds);\n\n\t\tsetExpanded((currentExpanded) => {\n\t\t\tconst persistedRowIds = extractExpandedRowIds(currentExpanded).filter((rowId) => availableRowIdSet.has(rowId));\n\n\t\t\tif (!hasInitializedExpansionRef.current) {\n\t\t\t\thasInitializedExpansionRef.current = true;\n\n\t\t\t\tconst seededRowIds = Array.from(\n\t\t\t\t\tnew Set([...persistedRowIds, ...nextInitialExpandedRowIds.filter((rowId) => availableRowIdSet.has(rowId))])\n\t\t\t\t);\n\n\t\t\t\treturn toExpandedState(seededRowIds);\n\t\t\t}\n\n\t\t\treturn toExpandedState(persistedRowIds);\n\t\t});\n\t});\n\n\tconst emitExpandedRowIdsChange = useEffectEvent((currentExpanded: ExpandedState) => {\n\t\tonExpandedRowIdsChange?.(extractExpandedRowIds(currentExpanded));\n\t});\n\n\tconst emitReachEnd = useEffectEvent(() => {\n\t\tonReachEnd?.();\n\t});\n\n\tuseEffect(() => {\n\t\tsyncExpandedState(treeData.allRowIds, initialExpandedRowIds);\n\t}, [initialExpandedRowIds, treeData.allRowIds]);\n\n\tuseEffect(() => {\n\t\temitExpandedRowIdsChange(expanded);\n\t}, [expanded]);\n\n\tuseEffect(() => {\n\t\tif (!onReachEnd || !scrollableRef.current || !sentinelRef.current || isLoading) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst observer = new IntersectionObserver(\n\t\t\t(entries) => {\n\t\t\t\tconst entry = entries[0];\n\n\t\t\t\tif (entry?.isIntersecting) {\n\t\t\t\t\temitReachEnd();\n\t\t\t\t}\n\t\t\t},\n\t\t\t{\n\t\t\t\troot: scrollableRef.current,\n\t\t\t\tthreshold: 0.1\n\t\t\t}\n\t\t);\n\n\t\tobserver.observe(sentinelRef.current);\n\n\t\treturn () => observer.disconnect();\n\t}, [isLoading, onReachEnd, treeData.rows.length]);\n\n\tconst table = useTable({\n\t\tfeatures: foundationTableFeatures,\n\t\tdata: treeData.rows as TreeTableRuntimeRow<TData>[],\n\t\tcolumns: columns as TableColumnDef<TreeTableRuntimeRow<TData>>[],\n\t\tstate: {\n\t\t\tcolumnOrder: resolvedColumnOrder,\n\t\t\tcolumnPinning: resolvedColumnPinning,\n\t\t\tcolumnSizing: resolvedColumnSizing,\n\t\t\tcolumnVisibility: resolvedColumnVisibility,\n\t\t\texpanded,\n\t\t\trowSelection\n\t\t},\n\t\tgetRowId: (row) => hierarchy.getRowId(row as TData),\n\t\tgetSubRows: (row) => row.children,\n\t\tonColumnOrderChange: handleColumnOrderChange,\n\t\tonColumnPinningChange: handleColumnPinningChange,\n\t\tonColumnSizingChange: handleColumnSizingChange,\n\t\tonColumnVisibilityChange: handleColumnVisibilityChange,\n\t\tonExpandedChange: setExpanded,\n\t\tenableMultiRowSelection: selectionMode === \"multi\",\n\t\tenableRowSelection: (row) => {\n\t\t\tif (selectionMode === \"none\") {\n\t\t\t\treturn false;\n\t\t\t}\n\n\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\treturn getRowCanSelect ? getRowCanSelect(originalRow) : true;\n\t\t}\n\t});\n\n\tconst visibleLeafColumns = getOrderedVisibleLeafColumns(table, baseTableColumnState);\n\tconst resolvedTreeColumnId = treeColumnId ?? visibleLeafColumns[0]?.id;\n\tconst rowModelRows = table.getRowModel().rows;\n\tconst mergedCellLayout = useMemo(\n\t\t() =>\n\t\t\tbuildBaseTableMergedCellsLayout({\n\t\t\t\trows: rowModelRows,\n\t\t\t\tcolumns: visibleLeafColumns,\n\t\t\t\tresolveRowBoundaryKey: (row) => row.depth,\n\t\t\t\texcludeColumnIds: resolvedTreeColumnId ? new Set([resolvedTreeColumnId]) : undefined\n\t\t\t}),\n\t\t[rowModelRows, visibleLeafColumns, resolvedTreeColumnId]\n\t);\n\n\t/**\n\t * Активирует строку: обновляет выбор в соответствии с режимом и вызывает внешний callback.\n\t */\n\tconst activateRow = (row: FoundationTableRow<TreeTableRuntimeRow<TData>>) => {\n\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\tactivateRowSelection(row.id, row.getCanSelect());\n\t\tonRowClick?.(originalRow);\n\t};\n\n\treturn (\n\t\t<BaseTable\n\t\t\ttable={table}\n\t\t\tcolumnState={baseTableColumnState}\n\t\t\ttitle={title}\n\t\t\tisLoading={isLoading}\n\t\t\tisFetching={isFetching}\n\t\t\tclassName={className}\n\t\t\ttableClassName={tableClassName}\n\t\t\tselectionMode={selectionMode}\n\t\t\tscrollableRef={scrollableRef}\n\t\t\tinteractiveElementSelector='[data-tree-table-interactive=\"true\"]'\n\t\t\tonActivateRow={selectionMode !== \"none\" || onRowClick ? activateRow : undefined}\n\t\t\tisRowInteractive={(row) => Boolean(onRowClick || (selectionMode !== \"none\" && row.getCanSelect()))}\n\t\t\tgetRowClassName={(row) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(row, treeData.rowById);\n\n\t\t\t\treturn getRowClassName?.(originalRow);\n\t\t\t}}\n\t\t\tgetCellClassName={({ row, cell }) =>\n\t\t\t\tcn(\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && styles.treeColumnCell,\n\t\t\t\t\tcell.column.id === resolvedTreeColumnId && row.getIsSelected() && styles.selectedIndicatorCell\n\t\t\t\t)\n\t\t\t}\n\t\t\tgetCellLayout={({ cell }) => mergedCellLayout.get(cell.id)}\n\t\t\trenderHeaderContextMenu={renderHeaderContextMenu}\n\t\t\tenableColumnResizing={enableColumnResizing}\n\t\t\tenableColumnReordering={enableColumnReordering}\n\t\t\tcolumnResizeMinWidth={columnResizeMinWidth}\n\t\t\trenderCellContent={(args) => {\n\t\t\t\tconst originalRow = resolveOriginalRow(args.row, treeData.rowById);\n\t\t\t\tconst displayValue = formatPipelineDisplayValue({\n\t\t\t\t\tfield: formattingSnapshot.runtimeByColumnId[args.cell.column.id],\n\t\t\t\t\trawValue: args.cell.getValue(),\n\t\t\t\t\trowData: originalRow as TableFormulaRowData,\n\t\t\t\t\trowKind: \"tree\"\n\t\t\t\t});\n\t\t\t\tconst defaultContent = shouldUseTableFormatting({\n\t\t\t\t\tcolumnId: args.cell.column.id,\n\t\t\t\t\truntimeByColumnId: formattingSnapshot.runtimeByColumnId,\n\t\t\t\t\tcustomCellColumnIds: formattingSnapshot.customCellColumnIds\n\t\t\t\t}) ? (\n\t\t\t\t\t<FormattedTableCell displayValue={displayValue} align={args.columnMeta?.align} />\n\t\t\t\t) : (\n\t\t\t\t\targs.defaultContent\n\t\t\t\t);\n\t\t\t\tconst content = renderCellContent\n\t\t\t\t\t? renderCellContent({\n\t\t\t\t\t\t\t...args,\n\t\t\t\t\t\t\tdefaultContent,\n\t\t\t\t\t\t\tdisplayValue\n\t\t\t\t\t\t})\n\t\t\t\t\t: defaultContent;\n\n\t\t\t\treturn renderTreeCellContent(args, content, resolvedTreeColumnId, indentSize);\n\t\t\t}}\n\t\t\tafterTableContent={onReachEnd ? <div ref={sentinelRef} className={styles.sentinel} aria-hidden=\"true\" /> : null}\n\t\t/>\n\t);\n}\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ryuzaki13/react-foundation-ui",
-	"version": "1.6.14",
+	"version": "1.7.0",
 	"description": "Reusable React foundation UI primitives and Storybook stories.",
 	"license": "MIT",
 	"author": "Ryuzaki13",
@@ -369,10 +369,10 @@
 		"@lexical/utils": ">=0.46.0 <1.0.0",
 		"@ryuzaki13/react-foundation-api": ">=0.1.0 <2.0.0",
 		"@ryuzaki13/react-foundation-lib": ">=0.1.0 <2.0.0",
-		"@tanstack/react-query": ">=5.101.1 <6.0.0",
-		"@tanstack/react-router": ">=1.170.0 <2.0.0",
-		"@tanstack/react-table": ">=8.21.0 <9.0.0",
-		"@tanstack/react-virtual": ">=3.14.0 <4.0.0",
+		"@tanstack/react-query": ">=5.101.4 <6.0.0",
+		"@tanstack/react-router": ">=1.170.23 <2.0.0",
+		"@tanstack/react-table": ">=9.1.0 <10.0.0",
+		"@tanstack/react-virtual": ">=3.14.9 <4.0.0",
 		"lexical": ">=0.46.0 <1.0.0",
 		"lucide-react": ">=1.21.0 <2.0.0",
 		"motion": ">=12.42.0 <13.0.0",
@@ -464,8 +464,8 @@
 		"@lexical/rich-text": "^0.49.0",
 		"@lexical/selection": "^0.49.0",
 		"@lexical/utils": "^0.49.0",
-		"@ryuzaki13/react-foundation-api": "^1.1.13",
-		"@ryuzaki13/react-foundation-lib": "^1.2.8",
+		"@ryuzaki13/react-foundation-api": "^1.1.16",
+		"@ryuzaki13/react-foundation-lib": "^1.4.0",
 		"@storybook/addon-a11y": "^10.5.5",
 		"@storybook/addon-docs": "^10.5.5",
 		"@storybook/addon-vitest": "^10.5.5",
@@ -473,8 +473,8 @@
 		"@tanstack/query-broadcast-client-experimental": "^5.101.4",
 		"@tanstack/query-persist-client-core": "^5.101.4",
 		"@tanstack/react-query": "^5.101.4",
-		"@tanstack/react-router": "^1.170.18",
-		"@tanstack/react-table": "^8.21.3",
+		"@tanstack/react-router": "^1.170.23",
+		"@tanstack/react-table": "^9.1.0",
 		"@tanstack/react-virtual": "^3.14.9",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/react": "^16.3.2",

package/src/styles/config/_index.scss

@@ -191,15 +191,15 @@ $paragraph-spacing-preset-defaults: (
 
 $light-theme-defaults: (
 	tokens: (
-		"--surface-0": #ffffff,
-		"--surface-1": #f8f8f9,
-		"--surface-2": #f1f1f3,
-		"--content-0": oklch(0.26 0.01 244),
-		"--content-1": oklch(0.52 0.02 268),
-		"--content-2": oklch(0.66 0.01 258),
-		"--focus-ring": oklch(0.5 0.3 270),
-		"--overlay-backdrop": rgba(0, 0, 0, 0.1),
-		"--overlay-glass": rgba(255, 255, 255, 0.8),
+		"--surface-0": var(--hc-surface, #ffffff),
+		"--surface-1": var(--hc-surface, #f8f8f9),
+		"--surface-2": var(--hc-surface, #f1f1f3),
+		"--content-0": var(--hc-content, oklch(0.26 0.01 244)),
+		"--content-1": var(--hc-content, oklch(0.52 0.02 268)),
+		"--content-2": var(--hc-content, oklch(0.66 0.01 258)),
+		"--focus-ring": var(--hc-focus-ring, oklch(0.5 0.3 270)),
+		"--overlay-backdrop": var(--hc-overlay-backdrop, rgba(0, 0, 0, 0.1)),
+		"--overlay-glass": var(--hc-overlay-glass, rgba(255, 255, 255, 0.8)),
 		"--shadow-xs": 0 0 0.25em rgba(0, 0, 0, 0.15),
 		"--shadow-sm": 0 0 0.25em rgba(0, 0, 0, 0.25),
 		"--shadow-md": 0 0 0.5em rgba(0, 0, 0, 0.25),

package/src/styles/mixins/_mixin.scss

@@ -186,26 +186,26 @@
 @mixin generate-status-fill($name, $L, $C, $H, $mode) {
 	$s: status-scale($L, $C, $H, $mode);
 
-	--status-#{$name}-text: #{map.get(map.get($s, outline), base)};
-	--status-#{$name}-text-hover: #{map.get(map.get($s, outline), hover)};
-	--status-#{$name}-text-active: #{map.get(map.get($s, outline), active)};
+	--status-#{$name}-text: var(--hc-status-#{$name}-text, #{map.get(map.get($s, outline), base)});
+	--status-#{$name}-text-hover: var(--hc-status-#{$name}-text, #{map.get(map.get($s, outline), hover)});
+	--status-#{$name}-text-active: var(--hc-status-#{$name}-text, #{map.get(map.get($s, outline), active)});
 
-	--status-#{$name}-fill: #{map.get(map.get($s, fill), base)};
-	--status-#{$name}-fill-hover: #{map.get(map.get($s, fill), hover)};
-	--status-#{$name}-fill-active: #{map.get(map.get($s, fill), active)};
-	--status-#{$name}-on-fill: #{map.get(map.get($s, fill), on-fill)};
+	--status-#{$name}-fill: var(--hc-status-#{$name}-fill, #{map.get(map.get($s, fill), base)});
+	--status-#{$name}-fill-hover: var(--hc-status-#{$name}-fill, #{map.get(map.get($s, fill), hover)});
+	--status-#{$name}-fill-active: var(--hc-status-#{$name}-fill, #{map.get(map.get($s, fill), active)});
+	--status-#{$name}-on-fill: var(--hc-status-#{$name}-on-fill, #{map.get(map.get($s, fill), on-fill)});
 
-	--status-#{$name}-soft: #{map.get($s, soft)};
+	--status-#{$name}-soft: var(--hc-status-#{$name}-soft, #{map.get($s, soft)});
 }
 
 @mixin generate-status-border($name, $L, $C, $H, $mode) {
 	@if $name == neutral {
 		$s: status-border-neutral($L, $C, $H, $mode);
 
-		--border-0: #{map.get($s, base)};
-		--border-1: #{map.get($s, hover)};
-		--border-2: #{map.get($s, active)};
-		--border-focus: #{map.get($s, focus)};
+		--border-0: var(--hc-border, #{map.get($s, base)});
+		--border-1: var(--hc-border, #{map.get($s, hover)});
+		--border-2: var(--hc-border, #{map.get($s, active)});
+		--border-focus: var(--hc-border-focus, #{map.get($s, focus)});
 
 		--status-#{$name}-border: var(--border-0);
 		--status-#{$name}-border-hover: var(--border-1);
@@ -214,10 +214,10 @@
 	} @else {
 		$s: status-scale($L, $C, $H, $mode);
 
-		--status-#{$name}-border: #{map.get(map.get($s, border), base)};
-		--status-#{$name}-border-hover: #{map.get(map.get($s, border), hover)};
-		--status-#{$name}-border-active: #{map.get(map.get($s, border), active)};
-		--status-#{$name}-border-focus: #{map.get(map.get($s, border), focus)};
+		--status-#{$name}-border: var(--hc-status-#{$name}-border, #{map.get(map.get($s, border), base)});
+		--status-#{$name}-border-hover: var(--hc-status-#{$name}-border, #{map.get(map.get($s, border), hover)});
+		--status-#{$name}-border-active: var(--hc-status-#{$name}-border, #{map.get(map.get($s, border), active)});
+		--status-#{$name}-border-focus: var(--hc-status-#{$name}-border, #{map.get(map.get($s, border), focus)});
 	}
 }
 
@@ -271,10 +271,10 @@
 @mixin generate-neutral-border3($L, $C, $H, $mode) {
 	$s: status-border-neutral3($L, $C, $H, $mode);
 
-	--border-0: #{map.get($s, base)};
-	--border-1: #{map.get($s, hover)};
-	--border-2: #{map.get($s, active)};
-	--border-focus: #{map.get($s, focus)};
+	--border-0: var(--hc-border, #{map.get($s, base)});
+	--border-1: var(--hc-border, #{map.get($s, hover)});
+	--border-2: var(--hc-border, #{map.get($s, active)});
+	--border-focus: var(--hc-border-focus, #{map.get($s, focus)});
 
 	--status-neutral-border: var(--border-0);
 	--status-neutral-border-hover: var(--border-1);
@@ -284,16 +284,16 @@
 
 @mixin generate-accent($L, $C, $H, $mode) {
 	@if $mode == light {
-		--content-accent: oklch(#{$L} #{$C} #{$H});
-		--surface-accent: oklch(#{$L + 0.4} #{math.max(0, $C - 0.2)} #{$H - 15});
-		--border-accent: oklch(#{$L - 0.03} #{math.max(0, $C - 0.08)} #{$H});
-		// --focus-accent: oklch(#{$L + 0.04} #{$C + 0.05} #{$H});
+		--content-accent: var(--hc-content-accent, oklch(#{$L} #{$C} #{$H}));
+		--surface-accent: var(--hc-surface-accent, oklch(#{$L + 0.4} #{math.max(0, $C - 0.2)} #{$H - 15}));
+		--border-accent: var(--hc-border-accent, oklch(#{$L - 0.03} #{math.max(0, $C - 0.08)} #{$H}));
+		// --focus-accent: var(--hc-focus-accent, oklch(#{$L + 0.04} #{$C + 0.05} #{$H}));
 	}
 
 	@if $mode == dark {
-		--content-accent: oklch(#{$L} #{$C} #{$H});
-		--surface-accent: oklch(#{$L - 0.4} #{math.max(0, $C - 0.15)} #{$H - 10});
-		--border-accent: oklch(#{$L - 0.08} #{math.max(0, $C - 0.1)} #{$H});
-		// --focus-accent: oklch(#{$L + 0.06} #{$C + 0.03} #{$H});
+		--content-accent: var(--hc-content-accent, oklch(#{$L} #{$C} #{$H}));
+		--surface-accent: var(--hc-surface-accent, oklch(#{$L - 0.4} #{math.max(0, $C - 0.15)} #{$H - 10}));
+		--border-accent: var(--hc-border-accent, oklch(#{$L - 0.08} #{math.max(0, $C - 0.1)} #{$H}));
+		// --focus-accent: var(--hc-focus-accent, oklch(#{$L + 0.06} #{$C + 0.03} #{$H}));
 	}
 }

package/storybook-static/assets/{Badge-BcdRczMk.js → Badge-Dvx1zhPb.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DM52JHVE.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-7Wf2ozDB.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Badge.stories-Ct1rOXKb.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-BnW9ONAs.js";import{i as n,r}from"./react-qN2cStNd.js";import{a as i,d as a,f as o,l as s,m as c,n as l,p as u,r as d,u as f}from"./blocks-W-usNnZb.js";import{a as p,i as m,n as h,o as g,r as _,s as v,t as y}from"./Badge.stories-0OqfwxFw.js";function b(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,S.jsxs)(S.Fragment,{children:[(0,S.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
 `,(0,S.jsx)(u,{children:`Badge`}),`
 `,(0,S.jsx)(o,{children:`Компактная текстовая метка для статусов, категорий, фильтров и коротких служебных пометок`}),`
 `,(0,S.jsx)(t.p,{children:`Badge подходит для коротких подписей, которые должны быстро читаться и не перегружать интерфейс:`}),`