@snack-uikit/table 0.31.1 → 0.32.0

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

@@ -1,21 +1,29 @@
+.treeCellContainer{
+  position:relative;
+  overflow:hidden;
+  height:100%;
+  font-family:var(--sans-body-m-font-family, SB Sans Interface);
+  font-weight:var(--sans-body-m-font-weight, Regular);
+  line-height:var(--sans-body-m-line-height, 20px);
+  font-size:var(--sans-body-m-font-size, 14px);
+  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
+  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
+}
+
 .treeCell{
   display:flex;
   align-items:center;
   justify-content:start;
   width:-moz-fit-content;
   width:fit-content;
-  height:var(--size-markdown-table-cell-height, 40px);
+  height:100%;
 }
 
 .cellUserToggleIcon{
-  cursor:pointer;
   display:flex;
   align-items:center;
   box-sizing:border-box;
 }
-.cellUserToggleIcon svg{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
 
 .treeNodeContent{
   gap:var(--space-tree-item-content-layout-gap, 4px);
@@ -29,7 +37,8 @@
   display:flex;
   align-items:center;
   box-sizing:border-box;
-  height:var(--size-markdown-table-cell-height, 40px);
+  height:100%;
+  color:var(--sys-neutral-text-support, #6d707f);
 }
 .treeNodeContent:focus-visible{
   outline-width:var(--border-state-focus-s-border-width, 2px);
@@ -41,42 +50,15 @@
 .treeNodeContent[data-multiselect]{
   cursor:default;
 }
-.treeNodeContent[aria-disabled=true]{
+.treeNodeContent[data-disabled]{
   cursor:not-allowed;
-}
-.treeNodeContent[aria-disabled=true]::before{
-  display:none;
-}
-.treeNodeContent[aria-disabled=true] .treeNodeTitle, .treeNodeContent[aria-disabled=true] .treeNodeIcon{
   color:var(--sys-neutral-text-disabled, #aaaebd);
 }
-.treeNodeContent[aria-selected=true]:not([data-multiselect]){
-  opacity:var(--opacity-a008, 0.08);
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.treeNodeContent[aria-selected=true]:not([data-multiselect]):hover{
-  opacity:var(--opacity-a016, 0.16);
-}
 
 .userContent{
-  cursor:pointer;
   display:flex;
   align-items:center;
 }
-.userContent svg{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-
-.treeCellContainer{
-  position:relative;
-  overflow:hidden;
-  font-family:var(--sans-body-m-font-family, SB Sans Interface);
-  font-weight:var(--sans-body-m-font-weight, Regular);
-  line-height:var(--sans-body-m-line-height, 20px);
-  font-size:var(--sans-body-m-font-size, 14px);
-  letter-spacing:var(--sans-body-m-letter-spacing, 0.1px);
-  paragraph-spacing:var(--sans-body-m-paragraph-spacing, 7.7px);
-}
 
 .line{
   margin-left:calc(var(--dimension-4m, 32px) + var(--dimension-025m, 2px));

package/dist/cjs/helperComponents/Rows/BodyRow.d.ts

@@ -1,5 +1,6 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
+import { RowProps } from './Row';
 export type RowInfo<TData> = {
     id: string;
     data: TData;
@@ -7,8 +8,8 @@ export type RowInfo<TData> = {
     toggleSelected(value?: boolean): void;
 };
 export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInfo<TData>) => void;
-export type BodyRowProps<TData> = {
+export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
     row: TableRow<TData>;
     onRowClick?: RowClickHandler<TData>;
 };
-export declare function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Rows/BodyRow.js

@@ -21,7 +21,8 @@ const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function BodyRow(_ref) {
   let {
     row,
-    onRowClick
+    onRowClick,
+    rowAutoHeight
   } = _ref;
   const {
     pinnedLeft,
@@ -53,17 +54,21 @@ function BodyRow(_ref) {
       "data-test-id": constants_1.TEST_IDS.bodyRow,
       "data-row-id": row.id,
       className: styles_module_scss_1.default.bodyRow,
+      rowAutoHeight: rowAutoHeight,
       children: [pinnedLeft && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
         position: constants_1.COLUMN_PIN_POSITION.Left,
         children: pinnedLeft.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
-          cell: cell
+          cell: cell,
+          rowAutoHeight: rowAutoHeight
         }, cell.id))
       }), unpinned.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
-        cell: cell
+        cell: cell,
+        rowAutoHeight: rowAutoHeight
       }, cell.id)), pinnedRight && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
         position: constants_1.COLUMN_PIN_POSITION.Right,
         children: pinnedRight.map(cell => (0, jsx_runtime_1.jsx)(Cells_1.BodyCell, {
-          cell: cell
+          cell: cell,
+          rowAutoHeight: rowAutoHeight
         }, cell.id))
       })]
     })

package/dist/cjs/helperComponents/Rows/HeaderRow.d.ts

@@ -1 +1,2 @@
-export declare function HeaderRow(): import("react/jsx-runtime").JSX.Element;
+import { RowProps } from './Row';
+export declare function HeaderRow({ rowAutoHeight }: Pick<RowProps, 'rowAutoHeight'>): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Rows/HeaderRow.js

@@ -16,7 +16,10 @@ const hooks_1 = require("../hooks");
 const PinnedCells_1 = require("./PinnedCells");
 const Row_1 = require("./Row");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function HeaderRow() {
+function HeaderRow(_ref) {
+  let {
+    rowAutoHeight
+  } = _ref;
   const {
     leftPinned,
     unpinned,
@@ -25,18 +28,22 @@ function HeaderRow() {
   return (0, jsx_runtime_1.jsxs)(Row_1.Row, {
     className: styles_module_scss_1.default.tableHeader,
     "data-test-id": constants_1.TEST_IDS.headerRow,
+    rowAutoHeight: rowAutoHeight,
     children: [leftPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
       position: constants_1.COLUMN_PIN_POSITION.Left,
       children: leftPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
-        header: header
+        header: header,
+        rowAutoHeight: rowAutoHeight
       }, header.id)))
     }), unpinned.map(headerGroup => headerGroup.headers.map(header => (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
-      header: header
+      header: header,
+      rowAutoHeight: rowAutoHeight
     }, header.id))), rightPinned && (0, jsx_runtime_1.jsx)(PinnedCells_1.PinnedCells, {
       position: constants_1.COLUMN_PIN_POSITION.Right,
       children: rightPinned.map(headerGroup => headerGroup.headers.map(header => header.isPlaceholder ? null : (0, jsx_runtime_1.jsx)(Cells_1.HeaderCell, {
         header: header,
-        pinPosition: constants_1.COLUMN_PIN_POSITION.Right
+        pinPosition: constants_1.COLUMN_PIN_POSITION.Right,
+        rowAutoHeight: rowAutoHeight
       }, header.id)))
     })]
   });

package/dist/cjs/helperComponents/Rows/Row.d.ts

@@ -1,9 +1,9 @@
 import { MouseEvent, ReactNode } from 'react';
 import { DataAttributes } from '../types';
-type RowProps = {
+export type RowProps = {
     children: ReactNode;
     onClick?(e: MouseEvent<HTMLDivElement>): void;
     className?: string;
+    rowAutoHeight?: boolean;
 } & DataAttributes;
-export declare function Row({ onClick, children, className, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function Row({ onClick, children, className, rowAutoHeight, ...attributes }: RowProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/Rows/Row.js

@@ -24,14 +24,16 @@ function Row(_a) {
   var {
       onClick,
       children,
-      className
+      className,
+      rowAutoHeight
     } = _a,
-    attributes = __rest(_a, ["onClick", "children", "className"]);
+    attributes = __rest(_a, ["onClick", "children", "className", "rowAutoHeight"]);
   return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     (0, jsx_runtime_1.jsx)("div", Object.assign({
       onClick: onClick,
       className: (0, classnames_1.default)(styles_module_scss_1.default.tableRow, className),
+      "data-auto-height": rowAutoHeight || undefined,
       role: 'row'
     }, attributes, {
       children: children

package/dist/cjs/helperComponents/Rows/styles.module.css

@@ -1,14 +1,19 @@
 .tableRow{
   --snack-ui-table-row-background:var(--sys-neutral-background1-level, #fdfdfd);
-  height:var(--size-table-line-height, 40px);
   border-top:var(--border-width-table, 1px);
   border-bottom:var(--border-width-table, 1px);
+  min-height:var(--size-table-line-height, 40px);
   position:relative;
   display:flex;
   box-sizing:border-box;
-  border-color:transparent;
   background-color:var(--snack-ui-table-row-background);
+  border-color:transparent;
   border-style:solid none;
+  height:var(--size-table-line-height, 40px);
+}
+.tableRow[data-auto-height]{
+  height:auto;
+  min-height:var(--size-table-line-height, 40px);
 }
 
 .rowPinnedCells{
@@ -49,16 +54,13 @@
 .bodyRow ~ .bodyRow:before{
   content:"";
   position:absolute;
+  z-index:2;
   top:calc(-1 * var(--border-width-table, 1px));
   left:0;
-  z-index:2;
   width:100%;
   height:var(--border-width-table-line, 0.5px);
   background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
 }
-.bodyRow:hover::before, .bodyRow:hover + .bodyRow::before{
-  height:0;
-}
 .bodyRow[data-disabled]{
   cursor:not-allowed;
   background-color:var(--sys-neutral-background, #eeeff3);
@@ -84,6 +86,9 @@
 .bodyRow[data-clickable]{
   cursor:pointer;
 }
+.bodyRow:not([data-disabled]):hover::before{
+  height:0;
+}
 .bodyRow:not([data-disabled]):not([data-selected]):hover, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened]{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
@@ -92,6 +97,9 @@
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:inherit;
 }
+.bodyRow:not([data-disabled]):hover + .bodyRow::before{
+  height:0;
+}
 
 .tableHeader{
   position:sticky;

package/dist/cjs/helperComponents/TableEmptyState/styles.module.css

@@ -4,6 +4,6 @@
   align-items:center;
   justify-content:center;
   box-sizing:border-box;
-  height:calc(var(--page-size, 10) * var(--size-table-line-height, 40px) + var(--size-table-line-height, 40px));
+  height:var(--size-table-information-min-height, 304px);
   padding:var(--dimension-3m, 24px);
 }

package/dist/esm/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/esm/components/Table/Table.js

@@ -32,7 +32,7 @@ import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSiz
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, infiniteLoading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination: manualPaginationProp = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, bulkActions: bulkActionsProp } = _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"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, infiniteLoading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, suppressSearch = false, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination: manualPaginationProp = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, expanding, 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", "rowAutoHeight"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -90,7 +90,12 @@ export function Table(_a) {
             enableSorting: false,
             enableResizing: false,
             minSize: 40,
-            cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
+            cell: (cell) => {
+                if (rowAutoHeight) {
+                    return cell.getValue();
+                }
+                return _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 });
+            },
         },
         manualSorting,
         manualPagination,
@@ -221,17 +226,12 @@ export 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 { t } = useLocale('Table');
     const emptyStates = useEmptyState({ noDataState, noResultsState, errorDataState });
-    const cssPageSize = 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), DEFAULT_PAGE_SIZE) : tempPageSize;
-    }, [filteredTopRows.length, pageSize, suppressPagination, tablePagination === null || tablePagination === void 0 ? void 0 : tablePagination.pageSize, tableRows.length]);
     usePageReset({
         manualPagination,
         maximumAvailablePage: pageCount || tableFilteredRows.length / pagination.pageSize,
@@ -241,16 +241,14 @@ export function Table(_a) {
     });
     const { updateCellMap } = useCellAutoResizeController(table);
     const showToolbar = !suppressToolbar;
-    return (_jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsxs("div", Object.assign({ style: {
-                '--page-size': cssPageSize,
-            }, className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(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.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 ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), data.length > 0 && infiniteLoading && loading && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !infiniteLoading && !suppressPagination && (_jsx(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 }))] })) }));
+    return (_jsxs("div", Object.assign({ className: cn(styles.wrapper, className) }, extractSupportProps(rest), { children: [showToolbar && (_jsx("div", { className: styles.header, children: _jsx(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.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 ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, "data-outline": outline || undefined, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(CellAutoResizeContext.Provider, { value: { updateCellMap }, children: _jsx(TableContext.Provider, { value: { table }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row }, row.id))) })), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }), !infiniteLoading && !suppressPagination && (_jsx(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 = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

package/dist/esm/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/esm/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/esm/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/esm/helperComponents/Cells/BodyCell/BodyCell.js

@@ -17,8 +17,8 @@ import { useCellSizes } from '../../hooks';
 import { Cell } from '../Cell';
 import styles from './styles.module.css';
 export function BodyCell(_a) {
-    var { cell, className } = _a, props = __rest(_a, ["cell", "className"]);
+    var { cell, className, rowAutoHeight } = _a, props = __rest(_a, ["cell", "className", "rowAutoHeight"]);
     const columnDef = cell.column.columnDef;
     const style = useCellSizes(cell);
-    return (_jsx(Cell, Object.assign({}, props, { style: style, className: cn(styles.tableBodyCell, className, columnDef.cellClassName), "data-align": columnDef.align, "data-no-padding": columnDef.noBodyCellPadding || undefined, "data-column-id": cell.column.id, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
+    return (_jsx(Cell, Object.assign({}, props, { style: style, className: cn(styles.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, "data-test-id": TEST_IDS.bodyCell, children: flexRender(columnDef.cell, cell.getContext()) })));
 }

package/dist/esm/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/esm/helperComponents/Cells/CopyCell/CopyCell.js

@@ -21,5 +21,5 @@ export function CopyCell({ value }) {
         closeChecked();
         clearTimeout(timerId.current);
     }, []);
-    return (_jsxs("div", { className: styles.copyCell, onClick: handleClick, role: 'presentation', children: [_jsx(TruncateString, { text: String(value), maxLines: 1 }), _jsx(ButtonFunction, { "data-test-id": 'button-copy-value', type: 'button', icon: isChecked ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), size: 's', className: styles.copyButton })] }));
+    return (_jsxs("div", { className: styles.copyCell, onClick: handleClick, role: 'presentation', children: [_jsx(TruncateString, { text: String(value), maxLines: 1 }), _jsx(ButtonFunction, { "data-test-id": 'button-copy-value', type: 'button', icon: isChecked ? _jsx(CheckSVG, {}) : _jsx(CopySVG, {}), size: 'xs', className: styles.copyButton })] }));
 }

package/dist/esm/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/esm/helperComponents/Cells/HeaderCell/HeaderCell.js

@@ -9,7 +9,7 @@ import { Cell } from '../Cell';
 import { getSortingIcon } from './helpers';
 import { ResizeHandle } from './ResizeHandle';
 import styles from './styles.module.css';
-export function HeaderCell({ header, pinPosition, className }) {
+export function HeaderCell({ header, pinPosition, className, rowAutoHeight }) {
     const cellRef = useRef(null);
     const isSortable = header.column.getCanSort();
     const isResizable = header.column.getCanResize();
@@ -26,5 +26,5 @@ export function HeaderCell({ header, pinPosition, className }) {
             return;
         return (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
     };
-    return (_jsxs(Cell, { style: style, onClick: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: _jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) }) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
+    return (_jsxs(Cell, { style: style, onClick: sortingHandler, "data-sortable": isSortable || undefined, "data-no-padding": columnDef.noHeaderCellPadding || undefined, "data-no-offset": columnDef.noHeaderCellBorderOffset || undefined, "data-test-id": TEST_IDS.headerCell, "data-align": columnDef.headerAlign || undefined, "data-header-id": header.id, "data-resizing": isResizing || undefined, "data-pin-position": pinPosition || undefined, "data-row-auto-height": rowAutoHeight || undefined, role: 'columnheader', className: cn(styles.tableHeaderCell, className, columnDef.headerClassName), ref: cellRef, children: [_jsxs("div", { className: styles.tableHeaderCellMain, children: [columnDef.header && (_jsx("div", { className: styles.tableHeaderCellName, children: rowAutoHeight ? (flexRender(columnDef.header, header.getContext())) : (_jsx(TruncateString, { text: flexRender(columnDef.header, header.getContext()) })) })), Boolean(sortIcon) && (_jsx("div", { className: styles.tableHeaderIcon, "data-sort-direction": sortDirection, "data-test-id": TEST_IDS.headerSortIndicator, children: sortIcon }))] }), Boolean(isResizable) && _jsx(ResizeHandle, { header: header, cellRef: cellRef })] }));
 }

package/dist/esm/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/esm/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/esm/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'];
 };