@ryuzaki13/react-foundation-ui 1.4.2 → 1.4.4

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","/* 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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ryuzaki13/react-foundation-ui",
-	"version": "1.4.2",
+	"version": "1.4.4",
 	"description": "Reusable React foundation UI primitives and Storybook stories.",
 	"license": "MIT",
 	"author": "Ryuzaki13",
@@ -339,6 +339,7 @@
 	"scripts": {
 		"build": "vite build && tsc -p tsconfig.build.json --emitDeclarationOnly",
 		"typecheck": "tsc -p tsconfig.build.json --noEmit",
+		"test:run": "npx vitest",
 		"test": "vitest run",
 		"lint": "eslint --config eslint.config.ts .",
 		"lint:fix": "eslint --config eslint.config.ts . --fix",
@@ -354,11 +355,11 @@
 		"registry": "https://registry.npmjs.org/"
 	},
 	"peerDependencies": {
-		"@dnd-kit/core": "^6.3.1",
-		"@dnd-kit/modifiers": "^9.0.0",
-		"@dnd-kit/sortable": "^10.0.0",
-		"@dnd-kit/utilities": "^3.2.2",
-		"@floating-ui/react": "^0.27.19",
+		"@dnd-kit/core": ">=6.3.0 <7.0.0",
+		"@dnd-kit/modifiers": ">=9.0.0 <10.0.0",
+		"@dnd-kit/sortable": ">=10.0.0 <11.0.0",
+		"@dnd-kit/utilities": ">=3.0.0 <4.0.0",
+		"@floating-ui/react": ">=0.27.0 <0.28.0",
 		"@lexical/html": "^0.46.0",
 		"@lexical/link": "^0.46.0",
 		"@lexical/list": "^0.46.0",
@@ -368,20 +369,18 @@
 		"@lexical/utils": "^0.46.0",
 		"@ryuzaki13/react-foundation-api": ">=0.1.0 <2.0.0",
 		"@ryuzaki13/react-foundation-lib": ">=0.1.0 <2.0.0",
-		"@storybook/react-vite": "^10.4.6",
-		"@tanstack/react-query": "^5.101.1",
-		"@tanstack/react-router": "^1.170.16",
-		"@tanstack/react-table": "^8.21.3",
-		"@tanstack/react-virtual": "^3.14.4",
+		"@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",
 		"lexical": "^0.46.0",
-		"lucide-react": "^1.21.0",
-		"motion": "^12.42.0",
-		"react": "^19.2.7",
-		"react-dom": "^19.2.7",
-		"react-easy-crop": "^6.0.2",
-		"storybook": "^10.4.6",
-		"yet-another-react-lightbox": "^3.32.1",
-		"zustand": "^5.0.14"
+		"lucide-react": ">=1.21.0 <2.0.0",
+		"motion": ">=12.42.0 <13.0.0",
+		"react": ">=19.2.0 <20.0.0",
+		"react-dom": ">=19.2.0 <20.0.0",
+		"react-easy-crop": ">=6.0.0 <7.0.0",
+		"yet-another-react-lightbox": ">=3.32.0 <4.0.0",
+		"zustand": ">=5.0.0 <6.0.0"
 	},
 	"peerDependenciesMeta": {
 		"@dnd-kit/core": {
@@ -423,6 +422,9 @@
 		"@tanstack/react-query": {
 			"optional": true
 		},
+		"@tanstack/react-router": {
+			"optional": true
+		},
 		"@tanstack/react-table": {
 			"optional": true
 		},
@@ -441,19 +443,10 @@
 		"react-easy-crop": {
 			"optional": true
 		},
-		"zustand": {
-			"optional": true
-		},
-		"@tanstack/react-router": {
-			"optional": true
-		},
-		"storybook": {
-			"optional": true
-		},
 		"yet-another-react-lightbox": {
 			"optional": true
 		},
-		"@storybook/react-vite": {
+		"zustand": {
 			"optional": true
 		}
 	},
@@ -463,7 +456,7 @@
 		"@dnd-kit/modifiers": "^9.0.0",
 		"@dnd-kit/sortable": "^10.0.0",
 		"@dnd-kit/utilities": "^3.2.2",
-		"@floating-ui/react": "^0.27.19",
+		"@floating-ui/react": "^0.27.20",
 		"@lexical/html": "^0.46.0",
 		"@lexical/link": "^0.46.0",
 		"@lexical/list": "^0.46.0",
@@ -471,50 +464,50 @@
 		"@lexical/rich-text": "^0.46.0",
 		"@lexical/selection": "^0.46.0",
 		"@lexical/utils": "^0.46.0",
-		"@ryuzaki13/react-foundation-api": "^1.1.10",
-		"@ryuzaki13/react-foundation-lib": "^1.2.2",
-		"@storybook/addon-a11y": "^10.4.6",
-		"@storybook/addon-docs": "^10.4.6",
-		"@storybook/addon-vitest": "^10.4.6",
-		"@storybook/react-vite": "^10.4.6",
-		"@tanstack/query-broadcast-client-experimental": "^5.101.2",
-		"@tanstack/query-persist-client-core": "^5.101.2",
-		"@tanstack/react-query": "^5.101.1",
-		"@tanstack/react-router": "^1.170.17",
+		"@ryuzaki13/react-foundation-api": "^1.1.13",
+		"@ryuzaki13/react-foundation-lib": "^1.2.6",
+		"@storybook/addon-a11y": "^10.5.5",
+		"@storybook/addon-docs": "^10.5.5",
+		"@storybook/addon-vitest": "^10.5.5",
+		"@storybook/react-vite": "^10.5.5",
+		"@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-virtual": "^3.14.4",
+		"@tanstack/react-virtual": "^3.14.9",
 		"@testing-library/dom": "^10.4.1",
 		"@testing-library/react": "^16.3.2",
 		"@testing-library/user-event": "^14.6.1",
-		"@types/node": "^22.0.0",
-		"@types/react": "^19.2.17",
-		"@types/react-dom": "^19.2.3",
-		"@vitejs/plugin-react": "^6.0.3",
+		"@types/node": "^22.20.1",
+		"@types/react": "^19.2.18",
+		"@types/react-dom": "^19.2.4",
+		"@vitejs/plugin-react": "^6.0.5",
 		"@vitest/browser": "^4.1.10",
-		"eslint": "^10.6.0",
+		"eslint": "^10.8.0",
 		"eslint-import-resolver-typescript": "^4.4.5",
 		"eslint-plugin-import-x": "^4.17.1",
 		"eslint-plugin-prettier": "^5.5.6",
 		"eslint-plugin-react-hooks": "^7.1.1",
 		"eslint-plugin-react-refresh": "^0.5.3",
-		"globals": "^17.7.0",
-		"immer": "^11.1.11",
+		"globals": "^17.8.0",
+		"immer": "^11.1.15",
 		"jiti": "^2.7.0",
 		"jsdom": "^29.1.1",
 		"lexical": "^0.46.0",
-		"lucide-react": "^1.21.0",
-		"motion": "^12.42.0",
-		"playwright": "^1.61.1",
-		"react": "^19.2.7",
-		"react-dom": "^19.2.7",
-		"react-easy-crop": "^6.0.2",
+		"lucide-react": "^1.28.0",
+		"motion": "^12.43.0",
+		"playwright": "^1.62.1",
+		"react": "^19.2.8",
+		"react-dom": "^19.2.8",
+		"react-easy-crop": "^6.2.3",
 		"sass-embedded": "^1.100.0",
-		"storybook": "^10.4.6",
+		"storybook": "^10.5.5",
 		"typescript": "^6.0.3",
-		"typescript-eslint": "^8.63.0",
-		"vite": "^8.1.0",
-		"vitest": "^4.1.9",
-		"yet-another-react-lightbox": "^3.32.1",
+		"typescript-eslint": "^8.65.0",
+		"vite": "^8.2.0",
+		"vitest": "^4.1.10",
+		"yet-another-react-lightbox": "^3.32.2",
 		"zustand": "^5.0.14"
 	},
 	"engines": {

package/storybook-static/assets/{Badge-SZ48u9qp.js → Badge-Bh73-APE.js}

@@ -1,6 +1,6 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{Appearances as p,Basic as m,RemovableList as h,Sizes as g,Tones as _,n as v,t as y}from"./Badge.stories-CzsgAfG9.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)(o,{of:y,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
-`,(0,S.jsx)(l,{children:`Badge`}),`
-`,(0,S.jsx)(a,{children:`Компактная текстовая метка для статусов, категорий, фильтров и коротких служебных пометок`}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.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-BiaKjftm.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-gNFtCWnR.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 подходит для коротких подписей, которые должны быстро читаться и не перегружать интерфейс:`}),`
 `,(0,S.jsxs)(t.ul,{children:[`
 `,(0,S.jsx)(t.li,{children:`статусы и состояния записи;`}),`
@@ -10,7 +10,7 @@ import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH
 `]}),`
 `,(0,S.jsxs)(t.p,{children:[`Компонент принимает только строковый `,(0,S.jsx)(t.code,{children:`children`}),`. Длинный текст автоматически ограничивается по ширине и сокращается через `,(0,S.jsx)(t.code,{children:`TextOverflow`}),`, поэтому Badge лучше использовать для коротких и однозначных формулировок.`]}),`
 `,(0,S.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,S.jsx)(d,{}),`
+`,(0,S.jsx)(f,{}),`
 `,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Badge } from "@/shared/ui";
 
 export function Example() {
@@ -21,7 +21,7 @@ export function Example() {
 	);
 }
 `})}),`
-`,(0,S.jsx)(r,{of:m}),`
+`,(0,S.jsx)(i,{of:_}),`
 `,(0,S.jsx)(t.h2,{id:`визуальная-схема`,children:`Визуальная схема`}),`
 `,(0,S.jsx)(t.p,{children:`В компоненте есть два уровня настройки:`}),`
 `,(0,S.jsxs)(t.ul,{children:[`
@@ -35,7 +35,7 @@ export function Example() {
 `,(0,S.jsxs)(t.li,{children:[`проп `,(0,S.jsx)(t.code,{children:`color`}),` поддерживается только для обратной совместимости и считается устаревшим.`]}),`
 `]}),`
 `,(0,S.jsx)(t.h3,{id:`тоны`,children:`Тоны`}),`
-`,(0,S.jsx)(u,{of:_}),`
+`,(0,S.jsx)(d,{of:g}),`
 `,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";
 
 export function StatusBadges() {
@@ -61,7 +61,7 @@ export function StatusBadges() {
 }
 `})}),`
 `,(0,S.jsx)(t.h3,{id:`варианты-отображения`,children:`Варианты отображения`}),`
-`,(0,S.jsx)(u,{of:p}),`
+`,(0,S.jsx)(d,{of:y}),`
 `,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";
 
 export function AppearanceBadges() {
@@ -85,7 +85,7 @@ export function AppearanceBadges() {
 `})}),`
 `,(0,S.jsx)(t.h2,{id:`размеры`,children:`Размеры`}),`
 `,(0,S.jsxs)(t.p,{children:[`Badge поддерживает размеры от `,(0,S.jsx)(t.code,{children:`xs`}),` до `,(0,S.jsx)(t.code,{children:`xl`}),`. На практике чаще всего используются `,(0,S.jsx)(t.code,{children:`sm`}),` и `,(0,S.jsx)(t.code,{children:`md`}),`: они лучше всего подходят для строк таблиц, панелей фильтрации и карточек.`]}),`
-`,(0,S.jsx)(u,{of:g}),`
+`,(0,S.jsx)(d,{of:p}),`
 `,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { Badge, BadgeList } from "@/shared/ui";
 
 export function SizeBadges() {
@@ -102,7 +102,7 @@ export function SizeBadges() {
 `})}),`
 `,(0,S.jsx)(t.h2,{id:`списки-фильтров-и-выбранных-значений`,children:`Списки фильтров и выбранных значений`}),`
 `,(0,S.jsxs)(t.p,{children:[`Для набора бейджей в одну строку или в несколько переносимых строк есть вспомогательный контейнер `,(0,S.jsx)(t.code,{children:`BadgeList`}),`. Это самый частый сценарий в проекте: выбранные фильтры, категории, теги и активные параметры поиска.`]}),`
-`,(0,S.jsx)(u,{of:h}),`
+`,(0,S.jsx)(d,{of:m}),`
 `,(0,S.jsx)(t.pre,{children:(0,S.jsx)(t.code,{className:`language-tsx`,children:`import { useState } from "react";
 
 import { Badge, BadgeList } from "@/shared/ui";
@@ -134,6 +134,6 @@ export function SelectedFilters() {
 `,(0,S.jsxs)(t.li,{children:[`Для новых сценариев рекомендуется использовать `,(0,S.jsx)(t.code,{children:`tone`}),` и `,(0,S.jsx)(t.code,{children:`appearance`}),`, а не `,(0,S.jsx)(t.code,{children:`color`}),`.`]}),`
 `]}),`
 `,(0,S.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,S.jsx)(c,{of:y}),`
+`,(0,S.jsx)(l,{of:h}),`
 `,(0,S.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,S.jsx)(i,{includePrimary:!1})]})}function x(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;e((()=>{S=t(),f(),s(),v()}))();export{x as default};
+`,(0,S.jsx)(a,{includePrimary:!1})]})}function x(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,S.jsx)(t,{...e,children:(0,S.jsx)(b,{...e})}):b(e)}var S;function C(){return(C=e((()=>{S=t(),r(),c(),v()})))()}C();export{x as default};

package/storybook-static/assets/Badge.stories-gNFtCWnR.js

@@ -0,0 +1,54 @@
+import{n as e,r as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r,t as i}from"./x-Dh43gJN9.js";import{n as a}from"./iframe-DaN-XFub.js";import{a as o,i as s}from"./utils-DUM89eIj.js";import{a as c,l}from"./array-BBSjoTRy-CIRmlF93.js";import{n as u,t as d}from"./FloatingPopover-D4h-c24R.js";import{i as f,n as p,r as m,t as h}from"./uiClasses-CO3Cdv1E.js";import{n as g,t as _}from"./FlexContainer-LmZIdhq2.js";function v({maxChar:e,placement:t=`left`,closeDelay:n=0,maxWidth:r,children:i,block:a,state:o,textWrap:s,textWrapProps:c}){let u=l(i);if(!u.length||e&&u.length<e)return(0,y.jsx)(`span`,{children:u});let f=s??`div`,p={style:{display:a?`block`:`inline-block`,width:e?`${e-3}ch`:`auto`},className:`textOverflow`},m={...c,...p,style:{...c?.style,...p.style},className:[c?.className,p.className].filter(Boolean).join(` `)};return(0,y.jsx)(d,{state:o,placement:t,openOnHover:!0,content:u,closeDelay:n,maxWidth:r,children:(0,y.jsx)(f,{...m,children:u})})}var y;function b(){return(b=e((()=>{c(),u(),y=a(),v.__docgenInfo={description:``,methods:[],displayName:`TextOverflow`,props:{children:{required:!0,tsType:{name:`string`},description:``},maxChar:{required:!1,tsType:{name:`number`},description:``},maxWidth:{required:!1,tsType:{name:`number`},description:`Максимальная ширина тултипа в em.`},placement:{required:!1,tsType:{name:`Placement`},description:``,defaultValue:{value:`"left"`,computed:!1}},closeDelay:{required:!1,tsType:{name:`number`},description:``,defaultValue:{value:`0`,computed:!1}},block:{required:!1,tsType:{name:`literal`,value:`true`},description:`Для работы text-overflow элемент обязан быть блочным или inline-block.
+Если в качестве обёртки передается инлайновый компонент, то он будет
+перезаписан через стили на display: block или inline-block в зависимости
+от установки данного пропса.`},state:{required:!1,tsType:{name:`union`,raw:`"information" | "error" | "warning" | "success" | "negative"`,elements:[{name:`literal`,value:`"information"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"negative"`}]},description:``},textWrap:{required:!1,tsType:{name:`T`},description:``},textWrapProps:{required:!1,tsType:{name:`Omit`,elements:[{name:`ComponentProps`,elements:[{name:`T`}],raw:`ComponentProps<T>`},{name:`literal`,value:`"children"`}],raw:`Omit<ComponentProps<T>, "children">`},description:``}}}})))()}var x,S,C,w,T,E,D,O,k,A;function j(){return(j=e((()=>{x=`qBtmnH`,S=`p-HsHY`,C=`u9tQAE`,w=`FRScRz`,T=`W13uQO`,E=`_3IRcM9`,D=`R3ybI7`,O=`DdWAaC`,k=`_5cXBQF`,A={badge:x,passive:S,sizeXs:C,sizeSm:w,sizeMd:T,sizeLg:E,sizeXl:D,content:O,removeButton:k}})))()}function M({children:e,size:t=`sm`,tone:n,appearance:r,className:a,onRemove:s}){let c=n??`neutral`,l=f({tone:n,appearance:r,fallbackTone:c,fallbackAppearance:c===`neutral`?`outline`:`solid`});return(0,N.jsxs)(`div`,{className:o(A.badge,P[t],p(l.tone),h(l.appearance),!s&&A.passive,a),children:[(0,N.jsx)(v,{maxChar:25,placement:`top`,block:!0,textWrapProps:{className:A.content},children:String(e)}),s&&(0,N.jsx)(`button`,{type:`button`,onClick:s,className:A.removeButton,"aria-label":`Удалить бейдж`,"data-ui":`badge-remove-button`,"data-action":`remove-badge`,children:(0,N.jsx)(i,{})})]})}var N,P;function F(){return(F=e((()=>{s(),r(),b(),m(),j(),N=a(),P={xs:A.sizeXs,sm:A.sizeSm,md:A.sizeMd,lg:A.sizeLg,xl:A.sizeXl},M.__docgenInfo={description:`Компактный индикатор для статусов, категорий и коротких служебных меток.`,methods:[],displayName:`Badge`,props:{children:{required:!0,tsType:{name:`union`,raw:`string | number`,elements:[{name:`string`},{name:`number`}]},description:``},size:{required:!1,tsType:{name:`union`,raw:`"xs" | "sm" | "md" | "lg" | "xl"`,elements:[{name:`literal`,value:`"xs"`},{name:`literal`,value:`"sm"`},{name:`literal`,value:`"md"`},{name:`literal`,value:`"lg"`},{name:`literal`,value:`"xl"`}]},description:``,defaultValue:{value:`"sm"`,computed:!1}},tone:{required:!1,tsType:{name:`union`,raw:`"neutral" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},description:``},appearance:{required:!1,tsType:{name:`union`,raw:`"solid" | "outline" | "ghost" | "transparent"`,elements:[{name:`literal`,value:`"solid"`},{name:`literal`,value:`"outline"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"transparent"`}]},description:``},className:{required:!1,tsType:{name:`string`},description:``},onRemove:{required:!1,tsType:{name:`signature`,type:`function`,raw:`() => void`,signature:{arguments:[],return:{name:`void`}}},description:``}}}})))()}function I({children:e}){return(0,R.jsx)(_,{inline:!0,wrap:!0,gap:`sm`,align:`baseline`,children:L.Children.map(e,(e,t)=>(0,R.jsx)(L.Fragment,{children:e},t))})}var L,R;function z(){return(z=e((()=>{L=n(),g(),R=a(),I.__docgenInfo={description:"Контейнер для группы `Badge`, который выстраивает элементы в единый список с предсказуемыми отступами. Используется для компактного вывода набора меток или фильтров.",methods:[],displayName:`BadgeList`,props:{children:{required:!0,tsType:{name:`Array`,elements:[{name:`ReactElement`,elements:[{name:`union`,raw:`typeof Badge | null | undefined | false`,elements:[{name:`Badge`},{name:`null`},{name:`undefined`},{name:`literal`,value:`false`}]}],raw:`ReactElement<typeof Badge | null | undefined | false>`}],raw:`ReactElement<typeof Badge | null | undefined | false>[]`},description:``}}}})))()}var B=t({Appearances:()=>K,Basic:()=>W,RemovableList:()=>J,Sizes:()=>q,Tones:()=>G,__namedExportsOrder:()=>Y,default:()=>U}),V,H,U,W,G,K,q,J,Y;function X(){return(X=e((()=>{V=n(),F(),z(),H=a(),U={title:`Shared/UI/Badge`,component:M,args:{children:`Новый`,size:`md`,tone:`info`,appearance:`solid`},parameters:{atomicCanvas:!0,layout:`padded`},argTypes:{children:{description:`Текст внутри бейджа.`,control:`text`},size:{description:`Размер бейджа.`,control:`inline-radio`,options:[`sm`,`md`,`lg`]},tone:{description:`Семантический тон бейджа.`,control:`inline-radio`,options:[`neutral`,`success`,`warning`,`error`,`info`]},appearance:{description:`Форма бейджа.`,control:`inline-radio`,options:[`solid`,`outline`,`ghost`,`transparent`]},onRemove:{description:`Показывает кнопку удаления и вызывает обработчик по клику.`,control:!1},className:{description:`Дополнительный CSS-класс контейнера.`,control:`text`}}},W={},G={render:()=>(0,H.jsxs)(I,{children:[(0,H.jsx)(M,{tone:`neutral`,appearance:`outline`,children:`Neutral`}),(0,H.jsx)(M,{tone:`success`,appearance:`solid`,children:`Успешно`}),(0,H.jsx)(M,{tone:`warning`,appearance:`solid`,children:`Внимание`}),(0,H.jsx)(M,{tone:`error`,appearance:`solid`,children:`Ошибка`}),(0,H.jsx)(M,{tone:`info`,appearance:`solid`,children:`Информация`})]})},K={render:()=>(0,H.jsxs)(I,{children:[(0,H.jsx)(M,{tone:`neutral`,appearance:`solid`,children:`Solid`}),(0,H.jsx)(M,{tone:`neutral`,appearance:`outline`,children:`Outline`}),(0,H.jsx)(M,{tone:`info`,appearance:`ghost`,children:`Ghost`}),(0,H.jsx)(M,{tone:`warning`,appearance:`transparent`,children:`Transparent`})]})},q={render:()=>(0,H.jsxs)(I,{children:[(0,H.jsx)(M,{size:`xs`,children:`Extra Small`}),(0,H.jsx)(M,{size:`sm`,children:`Small`}),(0,H.jsx)(M,{size:`md`,children:`Medium`}),(0,H.jsx)(M,{size:`lg`,children:`Large`}),(0,H.jsx)(M,{size:`xl`,children:`Extra Large`})]})},J={render:()=>{let[e,t]=(0,V.useState)([`Фильтр A`,`Фильтр B`,`Фильтр C`]);return(0,H.jsx)(I,{children:e.map(e=>(0,H.jsx)(M,{tone:`info`,appearance:`outline`,onRemove:()=>t(t=>t.filter(t=>t!==e)),children:e},e))})}},W.parameters={...W.parameters,docs:{...W.parameters?.docs,source:{originalSource:`{}`,...W.parameters?.docs?.source}}},G.parameters={...G.parameters,docs:{...G.parameters?.docs,source:{originalSource:`{
+  render: () => <BadgeList>
+            <Badge tone="neutral" appearance="outline">
+                Neutral
+            </Badge>
+            <Badge tone="success" appearance="solid">
+                Успешно
+            </Badge>
+            <Badge tone="warning" appearance="solid">
+                Внимание
+            </Badge>
+            <Badge tone="error" appearance="solid">
+                Ошибка
+            </Badge>
+            <Badge tone="info" appearance="solid">
+                Информация
+            </Badge>
+        </BadgeList>
+}`,...G.parameters?.docs?.source}}},K.parameters={...K.parameters,docs:{...K.parameters?.docs,source:{originalSource:`{
+  render: () => <BadgeList>
+            <Badge tone="neutral" appearance="solid">
+                Solid
+            </Badge>
+            <Badge tone="neutral" appearance="outline">
+                Outline
+            </Badge>
+            <Badge tone="info" appearance="ghost">
+                Ghost
+            </Badge>
+            <Badge tone="warning" appearance="transparent">
+                Transparent
+            </Badge>
+        </BadgeList>
+}`,...K.parameters?.docs?.source}}},q.parameters={...q.parameters,docs:{...q.parameters?.docs,source:{originalSource:`{
+  render: () => <BadgeList>
+            <Badge size="xs">Extra Small</Badge>
+            <Badge size="sm">Small</Badge>
+            <Badge size="md">Medium</Badge>
+            <Badge size="lg">Large</Badge>
+            <Badge size="xl">Extra Large</Badge>
+        </BadgeList>
+}`,...q.parameters?.docs?.source}}},J.parameters={...J.parameters,docs:{...J.parameters?.docs,source:{originalSource:`{
+  render: () => {
+    const [items, setItems] = useState(["Фильтр A", "Фильтр B", "Фильтр C"]);
+    return <BadgeList>
+                {items.map(item => <Badge key={item} tone="info" appearance="outline" onRemove={() => setItems(prev => prev.filter(v => v !== item))}>
+                        {item}
+                    </Badge>)}
+            </BadgeList>;
+  }
+}`,...J.parameters?.docs?.source}}},Y=[`Basic`,`Tones`,`Appearances`,`Sizes`,`RemovableList`]})))()}export{q as a,J as i,B as n,G as o,W as r,X as s,K as t};

package/storybook-static/assets/{Button-CFCpYiPy.js → Button-O9QPAftp.js}

@@ -1,6 +1,6 @@
-import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH.js";import{E as n,a as r,d as i,f as a,l as o,m as s,n as c,p as l,r as u,u as d}from"./blocks-ixiC6_NZ.js";import{t as f}from"./mdx-react-shim-CmoAsjhK.js";import{Basic as p,ComposableScheme as m,Variants as h,WithIcons as g,n as _,t as v}from"./Button.stories-wwep4c2p.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(o,{of:v,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
-`,(0,x.jsx)(l,{children:`Button`}),`
-`,(0,x.jsx)(a,{children:`Базовая action-кнопка дизайн-системы для пользовательских действий, подтверждений и быстрых операций`}),`
+import{n as e}from"./rolldown-runtime-C0FnF6B9.js";import{n as t}from"./iframe-DaN-XFub.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-BiaKjftm.js";import{a as p,i as m,n as h,o as g,r as _,t as v}from"./Button.stories-wkiE0c_a.js";function y(e){let t={code:`code`,h2:`h2`,h3:`h3`,li:`li`,p:`p`,pre:`pre`,ul:`ul`,...n(),...e.components};return(0,x.jsxs)(x.Fragment,{children:[(0,x.jsx)(s,{of:h,parameters:{atomicCanvas:!0,layout:`padded`,docs:{toc:!0}}}),`
+`,(0,x.jsx)(u,{children:`Button`}),`
+`,(0,x.jsx)(o,{children:`Базовая action-кнопка дизайн-системы для пользовательских действий, подтверждений и быстрых операций`}),`
 `,(0,x.jsxs)(t.p,{children:[(0,x.jsx)(t.code,{children:`Button`}),` используется как универсальная кнопка интерфейса: в формах, тулбарах, модальных окнах, карточках, таблицах и компактных icon-only сценариях.`]}),`
 `,(0,x.jsx)(t.p,{children:`Ключевые особенности компонента:`}),`
 `,(0,x.jsxs)(t.ul,{children:[`
@@ -12,19 +12,19 @@ import{i as e}from"./preload-helper-B45gAKPr.js";import{t}from"./iframe-BJGIOdSH
 `,(0,x.jsxs)(t.li,{children:[`всплывающая подсказка через `,(0,x.jsx)(t.code,{children:`title`}),`.`]}),`
 `]}),`
 `,(0,x.jsx)(t.h2,{id:`основной-сценарий`,children:`Основной сценарий`}),`
-`,(0,x.jsx)(d,{}),`
+`,(0,x.jsx)(f,{}),`
 `,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";
 
 export function Example() {
 	return <Button>Сохранить</Button>;
 }
 `})}),`
-`,(0,x.jsx)(r,{of:p}),`
+`,(0,x.jsx)(i,{of:v}),`
 `,(0,x.jsx)(t.h2,{id:`как-выбирать-схему-оформления`,children:`Как выбирать схему оформления`}),`
 `,(0,x.jsxs)(t.p,{children:[`Для большинства сценариев достаточно `,(0,x.jsx)(t.code,{children:`variant`}),`: это готовые, согласованные значения дизайн-системы.`]}),`
 `,(0,x.jsxs)(t.p,{children:[`Если нужна более гибкая настройка, можно передать `,(0,x.jsx)(t.code,{children:`tone`}),` и `,(0,x.jsx)(t.code,{children:`appearance`}),`. У них приоритет выше, чем у `,(0,x.jsx)(t.code,{children:`variant`}),`, поэтому они подходят для точной донастройки без создания нового варианта.`]}),`
 `,(0,x.jsx)(t.h3,{id:`готовые-варианты`,children:`Готовые варианты`}),`
-`,(0,x.jsx)(u,{of:h}),`
+`,(0,x.jsx)(d,{of:m}),`
 `,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";
 
 export function ActionVariants() {
@@ -41,7 +41,7 @@ export function ActionVariants() {
 }
 `})}),`
 `,(0,x.jsxs)(t.h3,{id:`составная-схема-через-tone-и-appearance`,children:[`Составная схема через `,(0,x.jsx)(t.code,{children:`tone`}),` и `,(0,x.jsx)(t.code,{children:`appearance`})]}),`
-`,(0,x.jsx)(u,{of:m}),`
+`,(0,x.jsx)(d,{of:_}),`
 `,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { Button } from "@/shared/ui";
 
 export function CustomScheme() {
@@ -73,7 +73,7 @@ export function CustomScheme() {
 `,(0,x.jsx)(t.li,{children:`кнопка только с иконкой.`}),`
 `]}),`
 `,(0,x.jsxs)(t.p,{children:[`Если в кнопке есть только `,(0,x.jsx)(t.code,{children:`icon`}),`, обязательно нужно передать `,(0,x.jsx)(t.code,{children:`title`}),` или `,(0,x.jsx)(t.code,{children:`aria-label`}),`, чтобы управление было доступным для скринридеров. В текущей реализации `,(0,x.jsx)(t.code,{children:`title`}),` также используется как содержимое всплывающей подсказки.`]}),`
-`,(0,x.jsx)(u,{of:g}),`
+`,(0,x.jsx)(d,{of:p}),`
 `,(0,x.jsx)(t.pre,{children:(0,x.jsx)(t.code,{className:`language-tsx`,children:`import { BellIcon, CheckIcon, DownloadIcon, PlusIcon } from "lucide-react";
 
 import { Button } from "@/shared/ui";
@@ -119,6 +119,6 @@ export function FormActions() {
 `,(0,x.jsxs)(t.li,{children:[(0,x.jsx)(t.code,{children:`disabled`}),` блокирует нажатие, но не должен заменять явное объяснение пользователю, почему действие недоступно.`]}),`
 `]}),`
 `,(0,x.jsx)(t.h2,{id:`api`,children:`API`}),`
-`,(0,x.jsx)(c,{of:v}),`
+`,(0,x.jsx)(l,{of:h}),`
 `,(0,x.jsx)(t.h2,{id:`все-сторисы`,children:`Все сторисы`}),`
-`,(0,x.jsx)(i,{includePrimary:!1})]})}function b(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,x.jsx)(t,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;e((()=>{x=t(),f(),s(),_()}))();export{b as default};
+`,(0,x.jsx)(a,{includePrimary:!1})]})}function b(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,x.jsx)(t,{...e,children:(0,x.jsx)(y,{...e})}):y(e)}var x;function S(){return(S=e((()=>{x=t(),r(),c(),g()})))()}S();export{b as default};

package/storybook-static/assets/Button-mjF9HSg0.js

@@ -0,0 +1,12 @@
+import{n as e,o as t}from"./rolldown-runtime-C0FnF6B9.js";import{t as n}from"./react-C21x__mS.js";import{n as r}from"./iframe-DaN-XFub.js";import{a as i,i as a}from"./utils-DUM89eIj.js";import{n as o,t as s}from"./FloatingPopover-D4h-c24R.js";import{n as c,t as l}from"./ui.module-DoMIk8Oc.js";import{i as u,n as d,r as f,t as p}from"./uiClasses-CO3Cdv1E.js";var m,h,g,_,v;function y(){return(y=e((()=>{m=`wLOHwj`,h=`lFsM-Y`,g=`LPob63`,_=`tsaGtv`,v={button:m,iconOnly:h,buttonInner:g,buttonIcon:_}})))()}var b,x,S;function C(){return(C=e((()=>{b=t(n(),1),a(),o(),l(),f(),y(),x=r(),S=(0,b.forwardRef)(function({children:e,disabled:t,className:n,icon:r,iconEnd:a,title:o,variant:l,tone:f,appearance:m,type:h=`button`,"aria-label":g,..._},y){let S=b.Children.count(e)>0,C=!!r&&!S,w=u({variant:l,tone:f,appearance:m,fallbackAppearance:f&&f!==`neutral`?`solid`:`outline`}),T=C?g??o:g,E=(0,x.jsx)(`button`,{..._,ref:y,type:h,disabled:t,"aria-label":T,className:i(c.uiElement,c.uiInputControl,v.button,d(w.tone),p(w.appearance),C?v.iconOnly:``,`textNoWrap`,n??``),children:(0,x.jsxs)(`span`,{className:v.buttonInner,children:[r&&!a&&(0,x.jsx)(`span`,{"aria-hidden":`true`,className:v.buttonIcon,children:r}),S&&(0,x.jsx)(`span`,{className:`flexEllipsis`,children:e}),r&&a&&(0,x.jsx)(`span`,{"aria-hidden":`true`,className:v.buttonIcon,children:r})]})});return o?(0,x.jsx)(s,{placement:`bottom`,tooltip:!0,content:(0,x.jsx)(x.Fragment,{children:o}),children:E}):E}),S.__docgenInfo={description:'Базовая кнопка дизайн-системы для пользовательских действий.\nПоддерживает состояния, tone + appearance, иконки и безопасный `type="button"` по умолчанию.',methods:[],displayName:`Button`,props:{variant:{required:!1,tsType:{name:`union`,raw:`| "transparent"
+| "ghost"
+| "neutral"
+| "error"
+| "warning"
+| "success"
+| "info"
+| "neutralOutline"
+| "errorOutline"
+| "warningOutline"
+| "successOutline"
+| "infoOutline"`,elements:[{name:`literal`,value:`"transparent"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`},{name:`literal`,value:`"neutralOutline"`},{name:`literal`,value:`"errorOutline"`},{name:`literal`,value:`"warningOutline"`},{name:`literal`,value:`"successOutline"`},{name:`literal`,value:`"infoOutline"`}]},description:``},tone:{required:!1,tsType:{name:`union`,raw:`"neutral" | "error" | "warning" | "success" | "info"`,elements:[{name:`literal`,value:`"neutral"`},{name:`literal`,value:`"error"`},{name:`literal`,value:`"warning"`},{name:`literal`,value:`"success"`},{name:`literal`,value:`"info"`}]},description:``},appearance:{required:!1,tsType:{name:`union`,raw:`"solid" | "outline" | "ghost" | "transparent"`,elements:[{name:`literal`,value:`"solid"`},{name:`literal`,value:`"outline"`},{name:`literal`,value:`"ghost"`},{name:`literal`,value:`"transparent"`}]},description:``},icon:{required:!1,tsType:{name:`ReactReactNode`,raw:`React.ReactNode`},description:``},iconEnd:{required:!1,tsType:{name:`boolean`},description:``},type:{required:!1,tsType:{name:`union`,raw:`"button" | "submit" | "reset"`,elements:[{name:`literal`,value:`"button"`},{name:`literal`,value:`"submit"`},{name:`literal`,value:`"reset"`}]},description:`По умолчанию делаем безопасное поведение в формах.`,defaultValue:{value:`"button"`,computed:!1}}},composes:[`Omit`]}})))()}export{C as n,S as t};