@snack-uikit/table 0.31.1 → 0.32.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.32.0 (2025-03-03)
+
+
+### Features
+
+* **PDS-483:** table rowAutoHeight prop, removed default truncate when auto-height enabled ([0da9a86](https://github.com/cloud-ru-tech/snack-uikit/commit/0da9a861737fc35ba873a1795419d49c6cae51d1))
+
+
+
+
+
 ## 0.31.1 (2025-03-03)
 
 ### Only dependencies have been changed

package/README.md

@@ -119,6 +119,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | search | `{ initialState?: string; state?: string; placeholder?: string; loading?: boolean; onChange?(value: string): void; }` | 'Search'<br> <strong>loading</strong>: Состояние загрузки в строке поиска <br> <strong>onChange</strong>: Колбэк на изменение данных в строке поиска | Параметры отвечают за глобальный поиск в таблице <br> <strong>initialState</strong>: Начальное состояние строки поиска <br> <strong>state</strong>: Состояние строки поиска, жестко устанавливаемое снаружи <br> <strong>placeholder</strong>: Placeholder строки поиска |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
+| rowAutoHeight | `boolean` | - |  |
 | pageSize | `number` | 10 | Максимальное кол-во строк на страницу |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
@@ -187,6 +188,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; }` | - | Параметр отвечает за общие настройки раскрывающихся строк |
 | rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
+| rowAutoHeight | `boolean` | - |  |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |
 | className | `string` | - | CSS-класс |
 | loading | `boolean` | - | Состояние загрузки |

package/dist/cjs/components/Table/Table.d.ts

@@ -1,7 +1,7 @@
 import { FiltersState } from '@snack-uikit/chips';
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object, TFilters extends FiltersState = Record<string, unknown>>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize, pageCount, loading, infiniteLoading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, suppressSearch, toolbarAfter, suppressPagination, manualSorting, manualPagination: manualPaginationProp, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp, rowAutoHeight, ...rest }: TableProps<TData, TFilters>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/cjs/components/Table/Table.js

@@ -81,9 +81,10 @@ function Table(_a) {
       enableFuzzySearch,
       savedState,
       expanding,
-      bulkActions: bulkActionsProp
+      bulkActions: bulkActionsProp,
+      rowAutoHeight
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "pageSize", "pageCount", "loading", "infiniteLoading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "suppressSearch", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "expanding", "bulkActions", "rowAutoHeight"]);
   const {
     state: globalFilter,
     onStateChange: onGlobalFilterChange
@@ -157,10 +158,15 @@ function Table(_a) {
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
-      cell: cell => (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-        text: String(cell.getValue()),
-        maxLines: 1
-      })
+      cell: cell => {
+        if (rowAutoHeight) {
+          return cell.getValue();
+        }
+        return (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+          text: String(cell.getValue()),
+          maxLines: 1
+        });
+      }
     },
     manualSorting,
     manualPagination,
@@ -311,7 +317,6 @@ function Table(_a) {
   const tableFilteredRowsIds = tableFilteredRows.map(row => row.id);
   const topRows = table.getTopRows();
   const loadingTableRows = loadingTable.getRowModel().rows;
-  const tablePagination = table.getState().pagination;
   const filteredTopRows = table.getState().globalFilter ? topRows.filter(tr => tableFilteredRowsIds.includes(tr.id)) : topRows;
   const centerRows = copyPinnedRows ? tableRows : tableCenterRows;
   const {
@@ -322,10 +327,6 @@ function Table(_a) {
     noResultsState,
     errorDataState
   });
-  const cssPageSize = (0, react_1.useMemo)(() => {
-    const tempPageSize = (!suppressPagination ? tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize : pageSize) + filteredTopRows.length;
-    return !tableRows.length ? Math.min(Math.max(tempPageSize, 5), constants_1.DEFAULT_PAGE_SIZE) : tempPageSize;
-  }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
   (0, usePageReset_1.usePageReset)({
     manualPagination,
     maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
@@ -337,102 +338,101 @@ function Table(_a) {
     updateCellMap
   } = (0, contexts_1.useCellAutoResizeController)(table);
   const showToolbar = !suppressToolbar;
-  return (0, jsx_runtime_1.jsx)(contexts_1.CellAutoResizeContext.Provider, {
-    value: {
-      updateCellMap
-    },
-    children: (0, jsx_runtime_1.jsxs)("div", Object.assign({
-      style: {
-        '--page-size': cssPageSize
-      },
-      className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
-    }, (0, utils_1.extractSupportProps)(rest), {
-      children: [showToolbar && (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_1.default.header,
-        children: (0, jsx_runtime_1.jsx)(toolbar_1.Toolbar, {
-          search: suppressSearch ? undefined : {
-            value: globalFilter,
-            onChange: onGlobalFilterChange,
-            loading: search === null || search === void 0 ? void 0 : search.loading,
-            placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder')
+  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
+    className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className)
+  }, (0, utils_1.extractSupportProps)(rest), {
+    children: [showToolbar && (0, jsx_runtime_1.jsx)("div", {
+      className: styles_module_scss_1.default.header,
+      children: (0, jsx_runtime_1.jsx)(toolbar_1.Toolbar, {
+        search: suppressSearch ? undefined : {
+          value: globalFilter,
+          onChange: onGlobalFilterChange,
+          loading: search === null || search === void 0 ? void 0 : search.loading,
+          placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder')
+        },
+        className: styles_module_scss_1.default.toolbar,
+        onRefresh: onRefresh ? handleOnRefresh : undefined,
+        bulkActions: bulkActions,
+        selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
+        checked: table.getIsAllPageRowsSelected(),
+        indeterminate: table.getIsSomePageRowsSelected(),
+        onCheck: enableSelection ? handleOnToolbarCheck : undefined,
+        outline: outline,
+        after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+          children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
+            settings: exportSettings,
+            columnDefinitions: columnDefinitions,
+            data: data,
+            topRows: filteredTopRows,
+            centerRows: centerRows
+          })]
+        }) : undefined,
+        moreActions: moreActions,
+        filterRow: columnFilters,
+        "data-test-id": constants_1.TEST_IDS.toolbar
+      })
+    }), (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
+      size: 's',
+      className: styles_module_scss_1.default.table,
+      ref: scrollContainerRef,
+      "data-outline": outline || undefined,
+      children: [(0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.tableContent,
+        style: columnSizes.vars,
+        children: (0, jsx_runtime_1.jsx)(contexts_1.CellAutoResizeContext.Provider, {
+          value: {
+            updateCellMap
           },
-          className: styles_module_scss_1.default.toolbar,
-          onRefresh: onRefresh ? handleOnRefresh : undefined,
-          bulkActions: bulkActions,
-          selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
-          checked: table.getIsAllPageRowsSelected(),
-          indeterminate: table.getIsSomePageRowsSelected(),
-          onCheck: enableSelection ? handleOnToolbarCheck : undefined,
-          outline: outline,
-          after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-            children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
-              settings: exportSettings,
-              columnDefinitions: columnDefinitions,
-              data: data,
-              topRows: filteredTopRows,
-              centerRows: centerRows
-            })]
-          }) : undefined,
-          moreActions: moreActions,
-          filterRow: columnFilters,
-          "data-test-id": constants_1.TEST_IDS.toolbar
-        })
-      }), (0, jsx_runtime_1.jsx)("div", {
-        className: styles_module_scss_1.default.scrollWrapper,
-        "data-outline": outline || undefined,
-        children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
-          size: 's',
-          className: styles_module_scss_1.default.table,
-          ref: scrollContainerRef,
-          children: [(0, jsx_runtime_1.jsx)("div", {
-            className: styles_module_scss_1.default.tableContent,
-            style: columnSizes.vars,
-            children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
-              value: {
-                table
-              },
-              children: (!infiniteLoading || !data.length) && loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
+          children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
+            value: {
+              table
+            },
+            children: (!infiniteLoading || !data.length) && loading ? (0, jsx_runtime_1.jsxs)(skeleton_1.SkeletonContextProvider, {
+              loading: true,
+              children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
+                rowAutoHeight: rowAutoHeight
+              }), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                row: row,
+                rowAutoHeight: rowAutoHeight
+              }, row.id))]
+            }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
+              children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
+                className: styles_module_scss_1.default.topRowWrapper,
+                children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                  row: row,
+                  onRowClick: onRowClick,
+                  rowAutoHeight: rowAutoHeight
+                }, row.id))
+              }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                row: row,
+                onRowClick: onRowClick,
+                rowAutoHeight: rowAutoHeight
+              }, row.id)), data.length > 0 && infiniteLoading && loading && !dataError && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
                 loading: true,
-                children: [(0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                children: loadingTableRows.slice(0, 3).map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row
-                }, row.id))]
-              }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
-                children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {}) : null, filteredTopRows.length ? (0, jsx_runtime_1.jsx)("div", {
-                  className: styles_module_scss_1.default.topRowWrapper,
-                  children: filteredTopRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                    row: row,
-                    onRowClick: onRowClick
-                  }, row.id))
-                }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                  row: row,
-                  onRowClick: onRowClick
-                }, row.id)), data.length > 0 && infiniteLoading && loading && (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonContextProvider, {
-                  loading: true,
-                  children: loadingTableRows.slice(0, 3).map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                    row: row
-                  }, row.id))
-                }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
-                  emptyStates: emptyStates,
-                  dataError: dataError,
-                  dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
-                  tableRowsLength: tableRows.length + filteredTopRows.length
-                })]
-              })
+                }, row.id))
+              }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
+                emptyStates: emptyStates,
+                dataError: dataError,
+                dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
+                tableRowsLength: tableRows.length + filteredTopRows.length
+              })]
             })
-          }), (0, jsx_runtime_1.jsx)("div", {
-            className: styles_module_scss_1.default.scrollStub,
-            ref: scrollRef
-          })]
+          })
         })
-      }), !infiniteLoading && !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
-        table: table,
-        options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options,
-        optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel,
-        pageCount: pageCount,
-        optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender
+      }), (0, jsx_runtime_1.jsx)("div", {
+        className: styles_module_scss_1.default.scrollStub,
+        ref: scrollRef
       })]
-    }))
-  });
+    }), !infiniteLoading && !suppressPagination && (0, jsx_runtime_1.jsx)(helperComponents_1.TablePagination, {
+      table: table,
+      options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options,
+      optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel,
+      pageCount: pageCount,
+      optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender
+    })]
+  }));
 }
 Table.getStatusColumnDef = helperComponents_1.getStatusColumnDef;
 Table.statusAppearances = helperComponents_1.STATUS_APPEARANCE;

package/dist/cjs/components/Table/styles.module.css

@@ -8,13 +8,11 @@
   box-sizing:border-box;
   width:100%;
   height:auto;
-  max-height:calc(var(--page-size, 10) * var(--size-table-line-height, 40px) + var(--size-table-line-height, 40px) + var(--border-width-table, 1px) * 2);
   background-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-color:var(--sys-neutral-background1-level, #fdfdfd);
   border-style:solid;
 }
-
-.scrollWrapper[data-outline] .table{
+.table[data-outline]{
   border-color:var(--sys-neutral-decor-default, #dde0ea);
 }
 
@@ -47,7 +45,10 @@
 }
 
 .wrapper{
+  display:grid;
+  grid-template-rows:max-content minmax(auto, 100%) max-content;
   max-width:100%;
+  max-height:100%;
 }
 
 .scrollStub{

package/dist/cjs/components/types.d.ts

@@ -66,6 +66,7 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     };
     /** Включить нечеткий поиск  */
     enableFuzzySearch?: boolean;
+    rowAutoHeight?: boolean;
     /** Максимальное кол-во строк на страницу @default 10 */
     pageSize?: number;
     /** Колбэк клика по строке */

package/dist/cjs/helperComponents/Cells/BodyCell/BodyCell.d.ts

@@ -2,6 +2,7 @@ import { Cell as TableCell } from '@tanstack/react-table';
 import { CellProps } from '../Cell';
 type BodyCellProps<TData> = Omit<CellProps, 'style' | 'children'> & {
     cell: TableCell<TData, unknown>;
+    rowAutoHeight?: boolean;
 };
-export declare function BodyCell<TData>({ cell, className, ...props }: BodyCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyCell<TData>({ cell, className, rowAutoHeight, ...props }: BodyCellProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/Cells/BodyCell/BodyCell.js

@@ -27,14 +27,16 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function BodyCell(_a) {
   var {
       cell,
-      className
+      className,
+      rowAutoHeight
     } = _a,
-    props = __rest(_a, ["cell", "className"]);
+    props = __rest(_a, ["cell", "className", "rowAutoHeight"]);
   const columnDef = cell.column.columnDef;
   const style = (0, hooks_1.useCellSizes)(cell);
   return (0, jsx_runtime_1.jsx)(Cell_1.Cell, Object.assign({}, props, {
     style: style,
     className: (0, classnames_1.default)(styles_module_scss_1.default.tableBodyCell, className, columnDef.cellClassName),
+    "data-row-auto-height": rowAutoHeight || undefined,
     "data-align": columnDef.align,
     "data-no-padding": columnDef.noBodyCellPadding || undefined,
     "data-column-id": cell.column.id,

package/dist/cjs/helperComponents/Cells/BodyCell/styles.module.css

@@ -1,7 +1,9 @@
 .tableBodyCell{
   gap:var(--space-table-cell-gap, 4px);
-  padding-left:var(--space-table-cell-padding, 8px);
-  padding-right:var(--space-table-cell-padding, 8px);
+  padding-left:var(--space-table-cell-padding-horizontal, 8px);
+  padding-right:var(--space-table-cell-padding-horizontal, 8px);
+  padding-top:var(--space-table-cell-padding-vertical, 8px);
+  padding-bottom:var(--space-table-cell-padding-vertical, 8px);
   color:var(--sys-neutral-text-main, #41424e);
 }
 .tableBodyCell[data-align=right]{
@@ -9,4 +11,8 @@
 }
 .tableBodyCell[data-no-padding]{
   padding:0;
+}
+.tableBodyCell:not([data-row-auto-height]){
+  padding-top:0;
+  padding-bottom:0;
 }

package/dist/cjs/helperComponents/Cells/CopyCell/CopyCell.js

@@ -48,7 +48,7 @@ function CopyCell(_ref) {
       "data-test-id": 'button-copy-value',
       type: 'button',
       icon: isChecked ? (0, jsx_runtime_1.jsx)(icons_1.CheckSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.CopySVG, {}),
-      size: 's',
+      size: 'xs',
       className: styles_module_scss_1.default.copyButton
     })]
   });

package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.d.ts

@@ -4,6 +4,7 @@ import { CellProps } from '../Cell';
 type HeaderCellProps<TData> = Omit<CellProps, 'align' | 'children' | 'onClick' | 'style'> & {
     header: Header<TData, unknown>;
     pinPosition?: ColumnPinPosition;
+    rowAutoHeight?: boolean;
 };
-export declare function HeaderCell<TData>({ header, pinPosition, className }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function HeaderCell<TData>({ header, pinPosition, className, rowAutoHeight }: HeaderCellProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/cjs/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -24,7 +24,8 @@ function HeaderCell(_ref) {
   let {
     header,
     pinPosition,
-    className
+    className,
+    rowAutoHeight
   } = _ref;
   const cellRef = (0, react_1.useRef)(null);
   const isSortable = header.column.getCanSort();
@@ -52,6 +53,7 @@ function HeaderCell(_ref) {
     "data-header-id": header.id,
     "data-resizing": isResizing || undefined,
     "data-pin-position": pinPosition || undefined,
+    "data-row-auto-height": rowAutoHeight || undefined,
     role: 'columnheader',
     className: (0, classnames_1.default)(styles_module_scss_1.default.tableHeaderCell, className, columnDef.headerClassName),
     ref: cellRef,
@@ -59,7 +61,7 @@ function HeaderCell(_ref) {
       className: styles_module_scss_1.default.tableHeaderCellMain,
       children: [columnDef.header && (0, jsx_runtime_1.jsx)("div", {
         className: styles_module_scss_1.default.tableHeaderCellName,
-        children: (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        children: rowAutoHeight ? (0, react_table_1.flexRender)(columnDef.header, header.getContext()) : (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
           text: (0, react_table_1.flexRender)(columnDef.header, header.getContext())
         })
       }), Boolean(sortIcon) && (0, jsx_runtime_1.jsx)("div", {

package/dist/cjs/helperComponents/Cells/HeaderCell/styles.module.css

@@ -103,6 +103,13 @@
 .tableHeaderCell[data-pin-position=right]:last-child .tableHeaderResizeIndicator{
   right:calc(var(--dimension-1m, 8px) / 2);
 }
+.tableHeaderCell[data-row-auto-height]{
+  align-items:flex-end;
+}
+.tableHeaderCell:not([data-row-auto-height]){
+  padding-top:0;
+  padding-bottom:0;
+}
 
 .tableHeaderCellMain{
   overflow:auto;
@@ -113,7 +120,9 @@
 }
 
 .tableHeaderCellName{
-  height:var(--size-table-head-name-layout, 24px);
+  min-height:var(--size-table-head-name-layout, 24px);
+  padding-top:var(--dimension-025m, 2px);
+  padding-bottom:var(--dimension-025m, 2px);
   display:inline-flex;
   align-items:center;
   box-sizing:border-box;

package/dist/cjs/helperComponents/Cells/StatusCell/styles.module.css

@@ -5,7 +5,7 @@
   box-sizing:border-box;
   width:100%;
   height:100%;
-  padding-right:var(--space-table-cell-padding, 8px);
+  padding-right:var(--space-table-cell-padding-horizontal, 8px);
 }
 .statusCell[data-no-label]{
   padding-right:0;
@@ -18,7 +18,6 @@
 }
 
 .statusCellIndicator{
-  height:var(--size-table-cell-status-indicator-vertical, 40px);
   border-width:var(--size-table-cell-status-indicator-horizontal, 16px);
   position:relative;
   display:flex;
@@ -27,10 +26,10 @@
   justify-content:center;
   box-sizing:border-box;
   width:var(--size-table-cell-status-indicator-horizontal, 16px);
+  height:calc(100% + var(--border-width-table, 1px) * 2);
   background-color:inherit;
 }
 .statusCellIndicator::after{
-  height:var(--size-table-cell-status-indicator-vertical, 40px);
   border-width:var(--size-table-cell-status-indicator-horizontal, 16px);
   content:"";
   position:absolute;
@@ -39,6 +38,7 @@
   left:0;
   box-sizing:border-box;
   width:100%;
+  height:100%;
 }
 .statusCellIndicator[data-appearance=primary]::after{
   background-color:var(--sys-primary-accent-default, #794ed3);

package/dist/cjs/helperComponents/Cells/TreeCell/TreeCell.d.ts

@@ -18,7 +18,7 @@ type TreeColumnDef = BaseTreeColumnDef & {
 };
 type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
     /** Заголовок колонки */
-    renderDescription?: (cellValue: string, row: TData) => string;
+    renderDescription?(cellValue: string, row: TData): string;
     /** Рендер функция заголовка колонки */
     header?: ColumnDefinition<TData>['header'];
 };

package/dist/cjs/helperComponents/Cells/TreeCell/TreeCell.js

@@ -49,20 +49,22 @@ function getTreeColumnDef(_ref) {
       skipOnExport: false
     },
     enableSorting: false,
-    header: header,
-    cell: function Cell(_ref2) {
+    header,
+    cell: function TreeCell(_ref2) {
       let {
         row,
         cell
       } = _ref2;
+      var _a;
       const isExpanded = row.getIsExpanded();
       const isExpandable = row.getCanExpand();
       const isMultiSelect = row.getCanMultiSelect();
       const parent = row.getParentRow();
       const isRowsSelectionEnabled = row.getCanSelect();
-      const isAlSubRowsSelected = row.getIsAllSubRowsSelected();
+      const isAllSubRowsSelected = row.getIsAllSubRowsSelected();
       const isSomeSubRowSelected = row.getIsSomeSelected();
       const isRowSelected = row.getIsSelected();
+      const isLastChildRow = ((_a = parent === null || parent === void 0 ? void 0 : parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) === row.id;
       const depth = row.depth;
       const {
         ref
@@ -80,51 +82,44 @@ function getTreeColumnDef(_ref) {
           return (child === null || child === void 0 ? void 0 : child.id) !== ((_a = parent.subRows.at(-1)) === null || _a === void 0 ? void 0 : _a.id) || (row === null || row === void 0 ? void 0 : row.id) === (child === null || child === void 0 ? void 0 : child.id);
         });
       }, [row, depth]);
-      const lines = new Array(depth).fill('').map((_, index) => (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
+      const lines = (0, react_1.useMemo)(() => Array.from({
+        length: depth
+      }, (_, index) => (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
         visible: linesVisibilityByIndex.at(index),
-        className: index !== 0 ? styles_module_scss_1.default.line : styles_module_scss_1.default.firstLine
-      }, index));
+        className: index !== 0 ? styles_module_scss_1.default.line : styles_module_scss_1.default.firstLine,
+        halfHeight: index === depth - 1 && isLastChildRow
+      }, index)), [depth, linesVisibilityByIndex, isLastChildRow]);
       (0, react_1.useEffect)(() => {
-        if (!isMultiSelect || !isExpandable) {
+        if (!isMultiSelect || !isExpandable || !isRowsSelectionEnabled) {
           return;
         }
-        if (isAlSubRowsSelected && !isRowSelected) {
+        if (isAllSubRowsSelected && !isRowSelected) {
           row.toggleSelected(true, {
             selectChildren: false
           });
           return;
         }
-        if (!isAlSubRowsSelected && isRowSelected && !isSomeSubRowSelected) {
+        if (isRowSelected && !isAllSubRowsSelected && isSomeSubRowSelected) {
           row.toggleSelected(false, {
             selectChildren: false
           });
           return;
         }
-      }, [isAlSubRowsSelected, isSomeSubRowSelected, row, isRowSelected, isMultiSelect, isExpandable]);
-      const recursiveToggleSubRows = (0, react_1.useCallback)((row, value, opts) => {
-        row.toggleSelected(value, opts);
-        if (row.subRows.length > 0) {
-          row.subRows.forEach(subRow => {
-            recursiveToggleSubRows(subRow, value, opts);
-          });
-        }
-      }, []);
+      }, [isAllSubRowsSelected, isSomeSubRowSelected, row, isRowSelected, isMultiSelect, isExpandable, isRowsSelectionEnabled]);
       const toggleClickHandler = (0, react_1.useCallback)(event => {
         event.stopPropagation();
-        if (isMultiSelect && isSomeSubRowSelected && !isRowSelected) {
-          recursiveToggleSubRows(row, false, {
-            selectChildren: true
-          });
-          return;
-        }
-        if (!isMultiSelect) {
-          row.toggleSelected(!isRowSelected, {
-            selectChildren: false
+        if (isMultiSelect) {
+          const shouldToggleOn = !isAllSubRowsSelected && !isRowSelected;
+          const selectChildren = isAllSubRowsSelected || isSomeSubRowSelected || shouldToggleOn;
+          row.toggleSelected(shouldToggleOn, {
+            selectChildren
           });
           return;
         }
-        row.toggleSelected();
-      }, [isRowSelected, row, isSomeSubRowSelected, isMultiSelect, recursiveToggleSubRows]);
+        row.toggleSelected(!isRowSelected, {
+          selectChildren: false
+        });
+      }, [isMultiSelect, row, isAllSubRowsSelected, isSomeSubRowSelected, isRowSelected]);
       const chevronClickHandler = (0, react_1.useCallback)(event => {
         event.stopPropagation();
         row.toggleExpanded();
@@ -153,6 +148,9 @@ function getTreeColumnDef(_ref) {
             "data-expanded": isExpanded || undefined
           }), (0, jsx_runtime_1.jsxs)("div", {
             className: styles_module_scss_1.default.treeNodeContent,
+            "data-disabled": !isRowsSelectionEnabled || undefined,
+            "data-selected": isRowSelected || undefined,
+            "data-multiselect": isMultiSelect || undefined,
             children: [showToggle && (0, jsx_runtime_1.jsx)("div", {
               tabIndex: -1,
               className: styles_module_scss_1.default.treeCheckboxWrap,
@@ -161,7 +159,7 @@ function getTreeColumnDef(_ref) {
                 disabled: !isRowsSelectionEnabled,
                 checked: isRowSelected,
                 "data-test-id": constants_1.TEST_IDS.tree.checkbox,
-                indeterminate: isSomeSubRowSelected && !isAlSubRowsSelected
+                indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected
               }) : (0, jsx_runtime_1.jsx)(toggles_1.Radio, {
                 size: 's',
                 disabled: !isRowsSelectionEnabled,

package/dist/cjs/helperComponents/Cells/TreeCell/TreeLine/styles.module.css

@@ -1,6 +1,6 @@
 .treeLine{
   width:1px;
-  height:var(--size-markdown-table-cell-height, 40px);
+  height:100%;
   opacity:0;
 }
 .treeLine[data-visible]{
@@ -9,7 +9,7 @@
 }
 .treeLine[data-half-height]{
   align-self:start;
-  height:calc(var(--size-markdown-table-cell-height, 40px) / 2);
+  height:50%;
 }
 .treeLine[data-horizontal]{
   width:calc(var(--size-markdown-table-cell-height, 40px) / 2);