@ryuzaki13/react-foundation-ui 0.1.0

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

@@ -0,0 +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 {\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 { formatPipelineDisplayValue } from \"@ryuzaki13/react-foundation-lib/formatters\";\nimport type { TableFormulaRowData } from \"@ryuzaki13/react-foundation-lib/formulas\";\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\";\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\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/dist/types.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+export type UiSize = "xs" | "sm" | "md" | "lg" | "xl";
+export type ChangeHandler<T> = (value: T) => void;
+export type UiBaseProps<C, V = C> = {
+    label?: ReactNode;
+    description?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    size?: UiSize;
+    /**
+     * Если начальное состояние может быть `null | undefined`
+     * значит `onChange` тоже должен ументь сбрасывать.
+     * Поэтому такой контрол явно должен передавать `UiBaseProps<AnyType | undefined>`
+     */
+    value: V;
+    onChange: ChangeHandler<C>;
+};
+export type UiTone = "neutral" | "error" | "warning" | "success" | "info";
+export type UiAppearance = "solid" | "outline" | "ghost" | "transparent";
+export type UiVariant = "transparent" | "ghost" | "neutral" | "error" | "warning" | "success" | "info" | "neutralOutline" | "errorOutline" | "warningOutline" | "successOutline" | "infoOutline";
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,MAAM,MAAM,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAEtD,MAAM,MAAM,aAAa,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;AAElD,MAAM,MAAM,WAAW,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI;IACnC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;AAE1E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAEzE,MAAM,MAAM,SAAS,GAClB,aAAa,GACb,OAAO,GACP,SAAS,GACT,OAAO,GACP,SAAS,GACT,SAAS,GACT,MAAM,GACN,gBAAgB,GAChB,cAAc,GACd,gBAAgB,GAChB,gBAAgB,GAChB,aAAa,CAAC"}

package/dist/uiClasses.d.ts

@@ -0,0 +1,16 @@
+import type { UiAppearance, UiTone, UiVariant } from "./types";
+export type UiScheme = {
+    tone: UiTone;
+    appearance: UiAppearance;
+};
+export type UiSelectionAppearance = Extract<UiAppearance, "outline" | "solid">;
+export declare function getUiToneClassName(tone: UiTone): string;
+export declare function getUiAppearanceClassName(appearance: UiAppearance): string;
+export declare function resolveUiScheme({ variant, tone, appearance, fallbackTone, fallbackAppearance }: {
+    variant?: UiVariant;
+    tone?: UiTone;
+    appearance?: UiAppearance;
+    fallbackTone?: UiTone;
+    fallbackAppearance?: UiAppearance;
+}): UiScheme;
+//# sourceMappingURL=uiClasses.d.ts.map

package/dist/uiClasses.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"uiClasses.d.ts","sourceRoot":"","sources":["../src/uiClasses.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAE/D,MAAM,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,YAAY,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,OAAO,CAAC,YAAY,EAAE,SAAS,GAAG,OAAO,CAAC,CAAC;AAgC/E,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAEvD;AAED,wBAAgB,wBAAwB,CAAC,UAAU,EAAE,YAAY,GAAG,MAAM,CAEzE;AAED,wBAAgB,eAAe,CAAC,EAC/B,OAAO,EACP,IAAI,EACJ,UAAU,EACV,YAAwB,EACxB,kBAA8B,EAC9B,EAAE;IACF,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,kBAAkB,CAAC,EAAE,YAAY,CAAC;CAClC,GAAG,QAAQ,CAgBX"}

package/dist/wheel-picker/WheelPicker.d.ts

@@ -0,0 +1,21 @@
+import type { Key, ReactNode } from "react";
+/**
+ * Пропсы внутреннего wheel-picker.
+ */
+export interface WheelPickerProps<T> {
+    items: readonly T[];
+    value: T;
+    onChange: (value: T) => void;
+    ariaLabel: string;
+    disabled?: boolean;
+    className?: string;
+    minHeight?: number;
+    visibleRows?: number;
+    formatItem?: (item: T) => ReactNode;
+    getItemKey?: (item: T, index: number) => Key;
+}
+/**
+ * Внутренний wheel-picker со snap-кареткой по центру и блокировкой page scroll.
+ */
+export declare function WheelPicker<T>({ items, value, onChange, ariaLabel, disabled, className, minHeight, visibleRows, formatItem, getItemKey }: WheelPickerProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=WheelPicker.d.ts.map

package/dist/wheel-picker/WheelPicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WheelPicker.d.ts","sourceRoot":"","sources":["../../src/wheel-picker/WheelPicker.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAiB,GAAG,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAe1E;;GAEG;AACH,MAAM,WAAW,gBAAgB,CAAC,CAAC;IAClC,KAAK,EAAE,SAAS,CAAC,EAAE,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,SAAS,CAAC;IACpC,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,GAAG,CAAC;CAC7C;AAMD;;GAEG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,EAC9B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,SAAS,EACT,SAA8B,EAC9B,WAAkC,EAClC,UAAU,EACV,UAAU,EACV,EAAE,gBAAgB,CAAC,CAAC,CAAC,+BA0LrB"}

package/dist/wheel-picker/index.d.ts

@@ -0,0 +1,3 @@
+export { WheelPicker } from "./WheelPicker";
+export type { WheelPickerProps } from "./WheelPicker";
+//# sourceMappingURL=index.d.ts.map

package/dist/wheel-picker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/wheel-picker/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC"}

package/dist/wheel-picker/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../chunks/wheel-picker-DUHGy7wE.js";
+export { e as WheelPicker };

package/dist/wheel-picker/lib/wheelPickerMath.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Возвращает безопасный индекс внутри диапазона элементов wheel-picker.
+ */
+export declare function clampWheelIndex(index: number, itemsCount: number): number;
+/**
+ * Возвращает высоту viewport wheel-picker с учётом минимального значения.
+ */
+export declare function resolveWheelViewportHeight(measuredHeight: number, minHeight: number): number;
+/**
+ * Возвращает высоту одной строки picker-а.
+ */
+export declare function resolveWheelItemHeight(viewportHeight: number, visibleRows: number): number;
+/**
+ * Возвращает отступы сверху и снизу, чтобы выбранное значение всегда было по центру.
+ */
+export declare function resolveWheelEdgePadding(viewportHeight: number, itemHeight: number): number;
+/**
+ * Возвращает scrollTop, при котором значение с данным индексом окажется в центре viewport.
+ */
+export declare function resolveWheelScrollTop(index: number, itemHeight: number): number;
+/**
+ * Возвращает ближайший индекс по текущему положению scrollTop.
+ */
+export declare function resolveClosestWheelIndex(scrollTop: number, itemHeight: number, itemsCount: number): number;
+//# sourceMappingURL=wheelPickerMath.d.ts.map

package/dist/wheel-picker/lib/wheelPickerMath.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"wheelPickerMath.d.ts","sourceRoot":"","sources":["../../../src/wheel-picker/lib/wheelPickerMath.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAMzE;AAED;;GAEG;AACH,wBAAgB,0BAA0B,CAAC,cAAc,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,GAAG,MAAM,CAG5F;AAED;;GAEG;AACH,wBAAgB,sBAAsB,CAAC,cAAc,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,GAAG,MAAM,CAG1F;AAED;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,cAAc,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAE1F;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAE/E;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CAAC,SAAS,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,EAAE,UAAU,EAAE,MAAM,GAAG,MAAM,CAG1G"}