@snack-uikit/table 0.25.13-preview-03091779.0 → 0.25.13

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.25.13 (2024-12-12)
+
+### Only dependencies have been changed
+* [@snack-uikit/chips@0.22.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/chips/CHANGELOG.md)
+* [@snack-uikit/list@0.21.9](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/toolbar@0.9.11](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toolbar/CHANGELOG.md)
+
+
+
+
+
 ## 0.25.12 (2024-12-04)
 
 ### Only dependencies have been changed

package/README.md

@@ -148,9 +148,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
 | savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
-| enableRowVirtualization | `boolean` | - |  |
-| rowVirtualizerOptions | `PartialKeys<VirtualizerOptions<Element, Element>, "observeElementRect" \| "observeElementOffset" \| "scrollToFn">` | - |  |
-| rowVirtualizerInstanceRef | `MutableRefObject<Virtualizer<Element, Element>>` | - |  |
 ## Table.getStatusColumnDef
 Вспомогательная функция для создания ячейки со статусом
 ### Props
@@ -211,9 +208,6 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
 | savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
-| enableRowVirtualization | `boolean` | - |  |
-| rowVirtualizerOptions | `PartialKeys<VirtualizerOptions<Element, Element>, "observeElementRect" \| "observeElementOffset" \| "scrollToFn">` | - |  |
-| rowVirtualizerInstanceRef | `MutableRefObject<Virtualizer<Element, Element>>` | - |  |
 | items | `TData[]` | - | Данные для отрисовки |
 | total | `number` | 10 | Общее кол-во строк |
 | limit | `number` | 10 | Кол-во строк на страницу |

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

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

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

@@ -20,25 +20,22 @@ exports.Table = Table;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_table_1 = require("@tanstack/react-table");
 const classnames_1 = __importDefault(require("classnames"));
-const merge_refs_1 = __importDefault(require("merge-refs"));
 const react_1 = require("react");
 const locale_1 = require("@snack-uikit/locale");
 const scroll_1 = require("@snack-uikit/scroll");
 const skeleton_1 = require("@snack-uikit/skeleton");
 const toolbar_1 = require("@snack-uikit/toolbar");
+const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("@snack-uikit/utils");
 const constants_1 = require("../../constants");
 const helperComponents_1 = require("../../helperComponents");
-const VirtualRow_1 = require("../../helperComponents/Rows/VirtualRow");
 const utils_2 = require("../../utils");
 const hooks_1 = require("./hooks");
 const usePageReset_1 = require("./hooks/usePageReset");
-const useRowVirtualizer_1 = require("./hooks/useRowVirtualizer");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_3 = require("./utils");
 /** Компонент таблицы */
 function Table(_a) {
-  var _b;
   var {
       data,
       rowPinning = {
@@ -80,12 +77,9 @@ function Table(_a) {
       scrollContainerRef,
       getRowId,
       enableFuzzySearch,
-      savedState,
-      enableRowVirtualization,
-      rowVirtualizerOptions,
-      rowVirtualizerInstanceRef
+      savedState
     } = _a,
-    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "enableRowVirtualization", "rowVirtualizerOptions", "rowVirtualizerInstanceRef"]);
+    rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState"]);
   const {
     state: globalFilter,
     onStateChange: onGlobalFilterChange
@@ -107,7 +101,6 @@ function Table(_a) {
     onStateChange: onPaginationChange
   } = (0, hooks_1.useStateControl)(paginationProp, defaultPaginationState);
   const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
-  const tableContainerRef = (0, react_1.useRef)(null);
   const tableColumns = (0, react_1.useMemo)(() => {
     let cols = columnDefinitions;
     if (enableSelection) {
@@ -145,7 +138,10 @@ function Table(_a) {
       enableSorting: false,
       enableResizing: false,
       minSize: 40,
-      cell: utils_3.truncateCell
+      cell: cell => (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+        text: String(cell.getValue()),
+        maxLines: 1
+      })
     },
     manualSorting,
     manualPagination,
@@ -168,12 +164,7 @@ function Table(_a) {
     getPaginationRowModel: (0, react_table_1.getPaginationRowModel)(),
     getCoreRowModel: (0, react_table_1.getCoreRowModel)(),
     columnResizeMode: 'onEnd',
-    keepPinnedRows,
-    meta: {
-      tableContainerRef,
-      rowVirtualizerInstanceRef,
-      rowVirtualizerOptions
-    }
+    keepPinnedRows
   });
   const {
     loadingTable
@@ -213,13 +204,10 @@ function Table(_a) {
   }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
   const columnSizeVarsRef = (0, react_1.useRef)();
   const headers = table.getFlatHeaders();
-  const rowVirtualizer = (0, useRowVirtualizer_1.useRowVirtualizer)(table, Boolean(enableRowVirtualization));
-  const cssSizeVars = (0, react_1.useMemo)(() => {
+  const columnSizeVars = (0, react_1.useMemo)(() => {
     var _a;
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes = rowVirtualizer ? {
-      height: `${rowVirtualizer.getTotalSize()}px`
-    } : {};
+    const colSizes = {};
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const {
@@ -279,8 +267,8 @@ function Table(_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
   (0, react_1.useEffect)(() => {
-    columnSizeVarsRef.current = cssSizeVars;
-  }, [cssSizeVars]);
+    columnSizeVarsRef.current = columnSizeVars;
+  }, [columnSizeVars]);
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
   const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -302,9 +290,6 @@ function Table(_a) {
     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]);
-  const tableCtx = (0, react_1.useMemo)(() => ({
-    table
-  }), [table]);
   (0, usePageReset_1.usePageReset)({
     manualPagination,
     maximumAvailablePage: pageCount || data.length / pagination.pageSize,
@@ -357,12 +342,14 @@ function Table(_a) {
         children: (0, jsx_runtime_1.jsxs)(scroll_1.Scroll, {
           size: 's',
           className: styles_module_scss_1.default.table,
-          ref: (0, merge_refs_1.default)(tableContainerRef, scrollContainerRef),
+          ref: scrollContainerRef,
           children: [(0, jsx_runtime_1.jsx)("div", {
             className: styles_module_scss_1.default.tableContent,
-            style: cssSizeVars,
+            style: columnSizeVars,
             children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
-              value: tableCtx,
+              value: {
+                table
+              },
               children: loading ? (0, jsx_runtime_1.jsxs)(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, {
@@ -375,18 +362,10 @@ function Table(_a) {
                     row: row,
                     onRowClick: onRowClick
                   }, row.id))
-                }) : null, ((_b = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getVirtualItems()) !== null && _b !== void 0 ? _b : centerRows).map((rowOrVirtualRow, index) => {
-                  const row = (0, utils_3.isVirtualRow)(rowOrVirtualRow) ? centerRows[rowOrVirtualRow.index] : centerRows[index];
-                  return (0, jsx_runtime_1.jsx)(VirtualRow_1.VirtualRow, {
-                    ref: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                    "data-index": row.index,
-                    virtualRow: (0, utils_3.isVirtualRow)(rowOrVirtualRow) ? rowOrVirtualRow : undefined,
-                    children: (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
-                      row: row,
-                      onRowClick: onRowClick
-                    })
-                  }, row.id);
-                }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
+                }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
+                  row: row,
+                  onRowClick: onRowClick
+                }, row.id)), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
                   emptyStates: emptyStates,
                   dataError: dataError,
                   dataFiltered: dataFiltered || Boolean(table.getState().globalFilter),
@@ -410,5 +389,5 @@ function Table(_a) {
   });
 }
 Table.getStatusColumnDef = helperComponents_1.getStatusColumnDef;
-Table.getRowActionsColumnDef = helperComponents_1.getRowActionsColumnDef;
-Table.statusAppearances = helperComponents_1.STATUS_APPEARANCE;
+Table.statusAppearances = helperComponents_1.STATUS_APPEARANCE;
+Table.getRowActionsColumnDef = helperComponents_1.getRowActionsColumnDef;

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

@@ -1,10 +1,8 @@
 .table{
   border-width:var(--border-width-table, 1px);
   border-radius:var(--radius-table-container, 14px);
-  will-change:transform;
   position:relative;
   z-index:0;
-  contain:paint;
   overflow:hidden !important;
   display:flex;
   box-sizing:border-box;
@@ -28,7 +26,6 @@
 }
 
 .tableContent{
-  content-visibility:auto;
   min-width:-moz-max-content;
   min-width:max-content;
 }

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

@@ -1,5 +1,3 @@
-import { CellContext } from '@tanstack/react-table';
-import { VirtualItem } from '@tanstack/react-virtual';
 export declare function getCurrentlyConfiguredHeaderWidth(id: string): number;
 export declare function getColumnStyleVars(id: string): {
     sizeKey: string;
@@ -16,12 +14,4 @@ type SaveStateToLocalStorageProps = {
     size: string;
 };
 export declare function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps): void;
-/**
- * check the key, because index is contained in a common table row
- */
-export declare function isVirtualRow(row: unknown): row is VirtualItem;
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-export declare function truncateCell<TData>(cell: CellContext<TData, unknown>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -7,10 +7,6 @@ exports.getCurrentlyConfiguredHeaderWidth = getCurrentlyConfiguredHeaderWidth;
 exports.getColumnStyleVars = getColumnStyleVars;
 exports.getInitColumnSizeFromLocalStorage = getInitColumnSizeFromLocalStorage;
 exports.saveStateToLocalStorage = saveStateToLocalStorage;
-exports.isVirtualRow = isVirtualRow;
-exports.truncateCell = truncateCell;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const truncate_string_1 = require("@snack-uikit/truncate-string");
 const utils_1 = require("@snack-uikit/utils");
 function getCurrentlyConfiguredHeaderWidth(id) {
   if ((0, utils_1.isBrowser)()) {
@@ -57,19 +53,4 @@ function saveStateToLocalStorage(_ref2) {
   localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, savedStateFromStorage || {}), {
     resizeState: newResizeState
   })));
-}
-/**
- * check the key, because index is contained in a common table row
- */
-function isVirtualRow(row) {
-  return typeof row === 'object' && row != null && 'key' in row;
-}
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-function truncateCell(cell) {
-  return (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-    text: String(cell.getValue()),
-    maxLines: 1
-  });
 }

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

@@ -1,6 +1,5 @@
 import { PaginationState, Row, RowPinningState, RowSelectionOptions, RowSelectionState, SortingState } from '@tanstack/react-table';
-import { useVirtualizer, Virtualizer } from '@tanstack/react-virtual';
-import { MutableRefObject, ReactNode, RefObject } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { ToolbarProps } from '@snack-uikit/toolbar';
 import { WithSupportProps } from '@snack-uikit/utils';
 import { EmptyStateProps, ExportButtonProps, RowClickHandler } from '../helperComponents';
@@ -130,9 +129,6 @@ export type TableProps<TData extends object> = WithSupportProps<{
         id: string;
         resize?: boolean;
     };
-    enableRowVirtualization?: boolean;
-    rowVirtualizerOptions?: Parameters<typeof useVirtualizer>[0];
-    rowVirtualizerInstanceRef?: MutableRefObject<Virtualizer<Element, Element> | null>;
 }>;
 export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */

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

@@ -1,5 +1,5 @@
 import { Row as TableRow } from '@tanstack/react-table';
-import { CSSProperties, MouseEvent } from 'react';
+import { MouseEvent } from 'react';
 export type RowInfo<TData> = {
     id: string;
     data: TData;
@@ -10,7 +10,6 @@ export type RowClickHandler<TData> = (e: MouseEvent<HTMLDivElement>, row: RowInf
 type BodyRowProps<TData> = {
     row: TableRow<TData>;
     onRowClick?: RowClickHandler<TData>;
-    style?: CSSProperties;
 };
-export declare const BodyRow: import("react").ForwardRefExoticComponent<BodyRowProps<any> & import("react").RefAttributes<HTMLDivElement>>;
+export declare function BodyRow<TData>({ row, onRowClick }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,13 +1,5 @@
 "use strict";
 
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
@@ -16,7 +8,7 @@ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.BodyRow = void 0;
+exports.BodyRow = BodyRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const constants_1 = require("../../constants");
@@ -26,13 +18,11 @@ 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'));
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-exports.BodyRow = (0, react_1.forwardRef)((_a, ref) => {
-  var {
-      row,
-      onRowClick
-    } = _a,
-    attributes = __rest(_a, ["row", "onRowClick"]);
+function BodyRow(_ref) {
+  let {
+    row,
+    onRowClick
+  } = _ref;
   const {
     pinnedLeft,
     pinnedRight,
@@ -54,8 +44,7 @@ exports.BodyRow = (0, react_1.forwardRef)((_a, ref) => {
       dropListOpened,
       setDropListOpen
     },
-    children: (0, jsx_runtime_1.jsxs)(Row_1.Row, Object.assign({}, attributes, {
-      ref: ref,
+    children: (0, jsx_runtime_1.jsxs)(Row_1.Row, {
       onClick: handleRowClick,
       "data-clickable": Boolean(onRowClick) || undefined,
       "data-disabled": disabled || undefined,
@@ -77,6 +66,6 @@ exports.BodyRow = (0, react_1.forwardRef)((_a, ref) => {
           cell: cell
         }, cell.id))
       })]
-    }))
+    })
   });
-});
+}

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

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

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

@@ -16,12 +16,11 @@ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Row = void 0;
+exports.Row = Row;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
-const react_1 = require("react");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-exports.Row = (0, react_1.forwardRef)((_a, ref) => {
+function Row(_a) {
   var {
       onClick,
       children,
@@ -31,7 +30,6 @@ exports.Row = (0, react_1.forwardRef)((_a, ref) => {
   return (
     // eslint-disable-next-line jsx-a11y/interactive-supports-focus
     (0, jsx_runtime_1.jsx)("div", Object.assign({
-      ref: ref,
       onClick: onClick,
       className: (0, classnames_1.default)(styles_module_scss_1.default.tableRow, className),
       role: 'row'
@@ -39,4 +37,4 @@ exports.Row = (0, react_1.forwardRef)((_a, ref) => {
       children: children
     }))
   );
-});
+}

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

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

package/dist/esm/components/Table/Table.js

@@ -12,28 +12,25 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { getCoreRowModel, getFilteredRowModel, getPaginationRowModel, getSortedRowModel, useReactTable, } from '@tanstack/react-table';
 import cn from 'classnames';
-import mergeRefs from 'merge-refs';
 import { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useLocale } from '@snack-uikit/locale';
 import { Scroll } from '@snack-uikit/scroll';
 import { SkeletonContextProvider } from '@snack-uikit/skeleton';
 import { Toolbar } from '@snack-uikit/toolbar';
+import { TruncateString } from '@snack-uikit/truncate-string';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { DEFAULT_PAGE_SIZE } from '../../constants';
 import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
-import { VirtualRow } from '../../helperComponents/Rows/VirtualRow';
 import { fuzzyFilter } from '../../utils';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
-import { useRowVirtualizer } from './hooks/useRowVirtualizer';
 import styles from './styles.module.css';
-import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, isVirtualRow, saveStateToLocalStorage, truncateCell, } from './utils';
+import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
 export function Table(_a) {
-    var _b;
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, enableRowVirtualization, rowVirtualizerOptions, rowVirtualizerInstanceRef } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState", "enableRowVirtualization", "rowVirtualizerOptions", "rowVirtualizerInstanceRef"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -43,7 +40,6 @@ export function Table(_a) {
     const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
     const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
-    const tableContainerRef = useRef(null);
     const tableColumns = useMemo(() => {
         let cols = columnDefinitions;
         if (enableSelection) {
@@ -78,7 +74,7 @@ export function Table(_a) {
             enableSorting: false,
             enableResizing: false,
             minSize: 40,
-            cell: truncateCell,
+            cell: (cell) => _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 }),
         },
         manualSorting,
         manualPagination,
@@ -102,11 +98,6 @@ export function Table(_a) {
         getCoreRowModel: getCoreRowModel(),
         columnResizeMode: 'onEnd',
         keepPinnedRows,
-        meta: {
-            tableContainerRef,
-            rowVirtualizerInstanceRef,
-            rowVirtualizerOptions,
-        },
     });
     const { loadingTable } = useLoadingTable({
         pageSize: Math.min(Math.max(pageSize, 5), DEFAULT_PAGE_SIZE),
@@ -144,11 +135,10 @@ export function Table(_a) {
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
-    const rowVirtualizer = useRowVirtualizer(table, Boolean(enableRowVirtualization));
-    const cssSizeVars = useMemo(() => {
+    const columnSizeVars = useMemo(() => {
         var _a;
         const originalColumnDefs = table._getColumnDefs();
-        const colSizes = rowVirtualizer ? { height: `${rowVirtualizer.getTotalSize()}px` } : {};
+        const colSizes = {};
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
@@ -199,8 +189,8 @@ export function Table(_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
     useEffect(() => {
-        columnSizeVarsRef.current = cssSizeVars;
-    }, [cssSizeVars]);
+        columnSizeVarsRef.current = columnSizeVars;
+    }, [columnSizeVars]);
     const tableRows = table.getRowModel().rows;
     const tableCenterRows = table.getCenterRows();
     const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -218,7 +208,6 @@ export function Table(_a) {
         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]);
-    const tableCtx = useMemo(() => ({ table }), [table]);
     usePageReset({
         manualPagination,
         maximumAvailablePage: pageCount || data.length / pagination.pageSize,
@@ -233,11 +222,8 @@ export function Table(_a) {
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: mergeRefs(tableContainerRef, scrollContainerRef), children: [_jsx("div", { className: styles.tableContent, style: cssSizeVars, children: _jsx(TableContext.Provider, { value: tableCtx, children: 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, ((_b = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.getVirtualItems()) !== null && _b !== void 0 ? _b : centerRows).map((rowOrVirtualRow, index) => {
-                                                const row = isVirtualRow(rowOrVirtualRow) ? centerRows[rowOrVirtualRow.index] : centerRows[index];
-                                                return (_jsx(VirtualRow, { ref: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement, "data-index": row.index, virtualRow: isVirtualRow(rowOrVirtualRow) ? rowOrVirtualRow : undefined, children: _jsx(BodyRow, { row: row, onRowClick: onRowClick }) }, 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 })] }) }), !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 }))] })) }));
+                            }, checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, onDelete: enableSelection && onDelete ? handleOnDelete : undefined, onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', before: toolbarBefore, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions }), columnFilters && _jsxs("div", { className: styles.filtersWrapper, children: [" ", columnFilters, " "] })] })), _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: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: 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))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !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.getRowActionsColumnDef = getRowActionsColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;
+Table.getRowActionsColumnDef = getRowActionsColumnDef;

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

@@ -1,10 +1,8 @@
 .table{
   border-width:var(--border-width-table, 1px);
   border-radius:var(--radius-table-container, 14px);
-  will-change:transform;
   position:relative;
   z-index:0;
-  contain:paint;
   overflow:hidden !important;
   display:flex;
   box-sizing:border-box;
@@ -28,7 +26,6 @@
 }
 
 .tableContent{
-  content-visibility:auto;
   min-width:-moz-max-content;
   min-width:max-content;
 }

package/dist/esm/components/Table/utils.d.ts

@@ -1,5 +1,3 @@
-import { CellContext } from '@tanstack/react-table';
-import { VirtualItem } from '@tanstack/react-virtual';
 export declare function getCurrentlyConfiguredHeaderWidth(id: string): number;
 export declare function getColumnStyleVars(id: string): {
     sizeKey: string;
@@ -16,12 +14,4 @@ type SaveStateToLocalStorageProps = {
     size: string;
 };
 export declare function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps): void;
-/**
- * check the key, because index is contained in a common table row
- */
-export declare function isVirtualRow(row: unknown): row is VirtualItem;
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-export declare function truncateCell<TData>(cell: CellContext<TData, unknown>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/esm/components/Table/utils.js

@@ -1,5 +1,3 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { TruncateString } from '@snack-uikit/truncate-string';
 import { isBrowser } from '@snack-uikit/utils';
 export function getCurrentlyConfiguredHeaderWidth(id) {
     if (isBrowser()) {
@@ -34,15 +32,3 @@ export function saveStateToLocalStorage({ id, columnId, size }) {
     newResizeState[`${RESIZED_KEY}-${columnId}`] = size;
     localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, (savedStateFromStorage || {})), { resizeState: newResizeState })));
 }
-/**
- * check the key, because index is contained in a common table row
- */
-export function isVirtualRow(row) {
-    return typeof row === 'object' && row != null && 'key' in row;
-}
-/**
- * @description prevent permanent recreation of the function on rerender
- */
-export function truncateCell(cell) {
-    return _jsx(TruncateString, { text: String(cell.getValue()), maxLines: 1 });
-}