@snack-uikit/table 0.37.16-preview-964a845f.0 → 0.37.16

package/CHANGELOG.md

@@ -3,6 +3,15 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.37.16 (2025-11-21)</small>
+
+* fix(IAM-5889): fix table loading state ([27646e0](https://github.com/cloud-ru-tech/snack-uikit/commit/27646e0))
+* feat(IAM-5889): extend table empty state props ([03463ff](https://github.com/cloud-ru-tech/snack-uikit/commit/03463ff))
+
+
+
+
+
 ## <small>0.37.15 (2025-11-14)</small>
 
 ### Only dependencies have been changed

package/README.md

@@ -126,7 +126,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | sorting | `{ initialState?: SortingState; state?: SortingState; onChange?(state: SortingState): void; }` | - | Параметры отвечают за возможность сортировки, их стоит использовать если нужно отслеживать состояние <br> <strong>initialState</strong>: Начальное состояние сортировки <br> <strong>state</strong>: Состояние сортировки, жестко устанавливаемое снаружи <br> <strong>onChange</strong>: Колбэк на изменение сортировки |
 | columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; state?: ExpandedState; onChange?(state: ExpandedState): void; }` | - | Параметр отвечает за общие настройки раскрывающихся строк <br> <strong>getSubRows</strong>: Метод отвечает за получение дочерних строк <br> <strong>expandingColumnDefinition</strong>: Описание колонок для дочерних строк <br> <strong>state</strong>: Состояние открытых строк <br> <strong>onExpandedChange</strong>: Колбэк на раскрытие строк <br> |
-| rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; appearance?: RowAppearance; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
+| 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` | - |  |
@@ -200,7 +200,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | enableSelectPinned | `boolean` | - | Параметр отвечает за чекбокс выбора закрепленных строк |
 | columnsSettings | `{ enableDrag?: boolean; enableSettingsMenu?: boolean; }` | - | Параметры отвечают за настройки колонок <br> <strong>enableDrag</strong>: Включение сортировки порядка столбцов вручную перетаскиванием <br> <strong>enableSettingsMenu</strong>: Включение настроек показа колонок <br> |
 | expanding | `{ getSubRows: (element: TData) => TData[]; expandingColumnDefinition: TreeColumnDefinitionProps<TData>; state?: ExpandedState; onChange?(state: ExpandedState): void; }` | - | Параметр отвечает за общие настройки раскрывающихся строк <br> <strong>getSubRows</strong>: Метод отвечает за получение дочерних строк <br> <strong>expandingColumnDefinition</strong>: Описание колонок для дочерних строк <br> <strong>state</strong>: Состояние открытых строк <br> <strong>onExpandedChange</strong>: Колбэк на раскрытие строк <br> |
-| rowSelection | `{ initialState?: RowSelectionState; state?: RowSelectionState; enable?: boolean \| ((row: Row<TData>) => boolean); multiRow?: boolean; onChange?(state: RowSelectionState): void; appearance?: RowAppearance; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br> <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br> <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br> <strong>onChange</strong>: Колбэк на выбор строк |
+| 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>` | - | Колбэк клика по строке |

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

@@ -1 +1,6 @@
-export declare const onSearchDebounced: import("lodash").DebouncedFunc<(newValue: string, onChange: (newValue: string) => void) => void>;
+import debounce from 'lodash.debounce';
+type ChangeHandler = (newValue: string) => void;
+type SearchHandler = (newValue: string, onChange: ChangeHandler) => void;
+type OnSearchDebouncedType = ReturnType<typeof debounce<SearchHandler>>;
+export declare const onSearchDebounced: OnSearchDebouncedType;
+export {};

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

@@ -118,9 +118,8 @@ function Table(_a) {
     columnDefinitions,
     enableSelection,
     enableSelectPinned,
-    expanding,
-    rowSelectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
-  }), [columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance]);
+    expanding
+  }), [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
   const pinnedGroups = (0, react_1.useMemo)(() => (0, utils_3.getPinnedGroups)(allTableColumns), [allTableColumns]);
   const {
     enabledColumns,
@@ -246,7 +245,10 @@ function Table(_a) {
   } = (0, hooks_1.useLoadingTable)({
     pageSize: Math.min(Math.max(pageSize, 5), constants_1.DEFAULT_PAGE_SIZE),
     columnDefinitions: enabledColumnsDefinitions,
-    columnPinning
+    columnPinning,
+    enableSelection,
+    enableSelectPinned,
+    expanding
   });
   const handleOnRefresh = (0, react_1.useCallback)(() => {
     table.resetRowSelection();
@@ -458,8 +460,7 @@ function Table(_a) {
                 }), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,
                   rowAutoHeight: rowAutoHeight,
-                  columnOrder: columnOrder,
-                  disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
+                  columnOrder: columnOrder
                 }, row.id))]
               }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
                 children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
@@ -473,23 +474,20 @@ function Table(_a) {
                     onRowClick: onRowClick,
                     rowAutoHeight: rowAutoHeight,
                     columnOrder: columnOrder,
-                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
-                    disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
                   }, row.id))
                 }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,
                   onRowClick: onRowClick,
                   rowAutoHeight: rowAutoHeight,
                   columnOrder: columnOrder,
-                  enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
-                  disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
+                  enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
                 }, row.id)), data.length > 0 && infiniteLoading && loading && !dataError && (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,
                     columnOrder: columnOrder,
-                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
-                    disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
                   }, row.id))
                 }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
                   emptyStates: emptyStates,

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

@@ -48,9 +48,8 @@ function useColumnSettings(_ref) {
     columnDefinitions: enabledColumnsDefinitions,
     enableSelection,
     enableSelectPinned,
-    expanding,
-    rowSelectionAppearance: rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.appearance
-  }), [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.appearance]);
+    expanding
+  }), [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding]);
   const areAllColumnsEnabled = enabledColumns.length === configurableColumns.length;
   const getColumnsSettings = (0, react_1.useCallback)(columnOrder => (0, utils_3.prepareColumnsSettings)({
     pinnedGroups,

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

@@ -1,11 +1,15 @@
 import { ColumnPinningState } from '@tanstack/react-table';
 import { ColumnDefinition } from '../../../types';
-type UseLoadingTableProps<TData> = {
+import { TableProps } from '../../types';
+type UseLoadingTableProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];
     pageSize: number;
     columnPinning: ColumnPinningState;
+    enableSelection?: boolean;
+    enableSelectPinned?: boolean;
+    expanding?: TableProps<TData>['expanding'];
 };
-export declare function useLoadingTable<TData>({ pageSize, columnDefinitions, columnPinning }: UseLoadingTableProps<TData>): {
+export declare function useLoadingTable<TData extends object>({ pageSize, columnDefinitions, columnPinning, enableSelection, enableSelectPinned, expanding, }: UseLoadingTableProps<TData>): {
     loadingTable: import("@tanstack/react-table").Table<TData>;
 };
 export {};

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

@@ -13,23 +13,51 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_table_1 = require("@tanstack/react-table");
 const react_1 = require("react");
 const skeleton_1 = require("@snack-uikit/skeleton");
+const helperComponents_1 = require("../../../helperComponents");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+function CellSkeleton() {
+  return (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, {
+    className: styles_module_scss_1.default.skeleton,
+    lines: 1,
+    width: '100%'
+  });
+}
 function useLoadingTable(_ref) {
   let {
     pageSize,
     columnDefinitions,
-    columnPinning
+    columnPinning,
+    enableSelection,
+    enableSelectPinned,
+    expanding
   } = _ref;
   const data = (0, react_1.useMemo)(() => Array.from({
     length: pageSize
-  }).map(() => '') || [], [pageSize]);
-  const columns = (0, react_1.useMemo)(() => columnDefinitions.map(column => Object.assign(Object.assign({}, column), {
-    cell: () => (0, jsx_runtime_1.jsx)(skeleton_1.SkeletonText, {
-      className: styles_module_scss_1.default.skeleton,
-      lines: 1,
-      width: '100%'
-    })
-  })), [columnDefinitions]);
+  }).map(() => ({})), [pageSize]);
+  const columns = (0, react_1.useMemo)(() => {
+    let cols = columnDefinitions.map(column => Object.assign(Object.assign({}, column), {
+      cell: () => (0, jsx_runtime_1.jsx)(CellSkeleton, {})
+    }));
+    // for selection column
+    if (enableSelection && !expanding) {
+      const selectionColumnDef = (0, helperComponents_1.getSelectionCellColumnDef)(enableSelectPinned !== null && enableSelectPinned !== void 0 ? enableSelectPinned : false);
+      const loadingSelectionColumn = Object.assign(Object.assign({}, selectionColumnDef), {
+        cell: () => (0, jsx_runtime_1.jsx)(CellSkeleton, {})
+      });
+      cols = [loadingSelectionColumn, ...cols];
+    }
+    // for tree column
+    if (expanding) {
+      const treeColumnDef = (0, helperComponents_1.getTreeColumnDef)(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), {
+        enableSelection
+      }));
+      const loadingTreeColumn = Object.assign(Object.assign({}, treeColumnDef), {
+        cell: () => (0, jsx_runtime_1.jsx)(CellSkeleton, {})
+      });
+      cols = [loadingTreeColumn, ...cols];
+    }
+    return cols;
+  }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
   const loadingTable = (0, react_table_1.useReactTable)({
     data,
     columns,

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

@@ -1,11 +1,10 @@
 import { ColumnDefinition } from '../../../types';
-import { RowAppearance, TableProps } from '../../types';
+import { TableProps } from '../../types';
 type GetTableColumnsDefinitionsProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];
     enableSelection: boolean;
     enableSelectPinned: boolean;
     expanding: TableProps<TData>['expanding'];
-    rowSelectionAppearance?: RowAppearance;
 };
-export declare function getTableColumnsDefinitions<TData extends object>({ columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionAppearance, }: GetTableColumnsDefinitionsProps<TData>): ColumnDefinition<TData>[];
+export declare function getTableColumnsDefinitions<TData extends object>({ columnDefinitions, enableSelection, enableSelectPinned, expanding, }: GetTableColumnsDefinitionsProps<TData>): ColumnDefinition<TData>[];
 export {};

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

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTableColumnsDefinitions = getTableColumnsDefinitions;
 const helperComponents_1 = require("../../../helperComponents");
-const types_1 = require("../../types");
 function getTableColumnsDefinitions(_ref) {
   let {
     columnDefinitions,
     enableSelection,
     enableSelectPinned,
-    expanding,
-    rowSelectionAppearance = types_1.RowAppearance.Disabled
+    expanding
   } = _ref;
   let cols = columnDefinitions;
   if (enableSelection && !expanding) {
@@ -20,8 +18,7 @@ function getTableColumnsDefinitions(_ref) {
   }
   if (expanding) {
     cols = [(0, helperComponents_1.getTreeColumnDef)(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), {
-      enableSelection,
-      rowSelectionAppearance
+      enableSelection
     })), ...cols];
   }
   return cols;

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

@@ -10,10 +10,6 @@ export type TableRowColor = ValueOf<typeof TABLE_ROW_COLOR>;
 type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
     onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
-export declare enum RowAppearance {
-    Disabled = "disabled",
-    HideToggler = "hide-toggler"
-}
 type BaseTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
@@ -59,7 +55,6 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      * <strong>initialState</strong>: Начальное состояние выбора строк <br>
      * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
      * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
-     * <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br>
      * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
      * <strong>onChange</strong>: Колбэк на выбор строк
      *  */
@@ -69,7 +64,6 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         enable?: RowSelectionOptions<TData>['enableRowSelection'];
         multiRow?: boolean;
         onChange?(state: RowSelectionState): void;
-        appearance?: RowAppearance;
     };
     /** Параметры отвечают за глобальный поиск в таблице <br>
      * <strong>initialState</strong>: Начальное состояние строки поиска <br>

package/dist/cjs/components/types.js

@@ -2,10 +2,4 @@
 
 Object.defineProperty(exports, "__esModule", {
   value: true
-});
-exports.RowAppearance = void 0;
-var RowAppearance;
-(function (RowAppearance) {
-  RowAppearance["Disabled"] = "disabled";
-  RowAppearance["HideToggler"] = "hide-toggler";
-})(RowAppearance || (exports.RowAppearance = RowAppearance = {}));
+});

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

@@ -1,6 +1,5 @@
 import { CellContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
-import { RowAppearance } from '../../../components';
 import { ColumnDefinition } from '../../../types';
 type BaseTreeColumnDef = {
     /** Имя ключа соответствующее полю в data */
@@ -27,8 +26,7 @@ type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
 export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWithDescription<TData>;
 type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
     enableSelection?: boolean;
-    rowSelectionAppearance: RowAppearance;
 };
 /** Вспомогательная функция для создания ячейки со статусом */
-export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, cell: renderCell, enableSelection, rowSelectionAppearance, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
+export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, cell: renderCell, enableSelection, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
 export {};

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

@@ -15,7 +15,6 @@ const button_1 = require("@snack-uikit/button");
 const icons_1 = require("@snack-uikit/icons");
 const toggles_1 = require("@snack-uikit/toggles");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
-const components_1 = require("../../../components");
 const constants_1 = require("../../../constants");
 const contexts_1 = require("../../../contexts");
 const constants_2 = require("./constants");
@@ -37,8 +36,7 @@ function getTreeColumnDef(_ref) {
     header,
     accessorKey,
     cell: renderCell,
-    enableSelection,
-    rowSelectionAppearance
+    enableSelection
   } = _ref;
   const cell = function TreeCell(ctx) {
     var _a;
@@ -59,7 +57,6 @@ function getTreeColumnDef(_ref) {
     const {
       ref
     } = (0, contexts_1.useCellResize)(constants_2.TREE_CELL_ID, cell);
-    const isToggleHidden = !isRowsSelectionEnabled && rowSelectionAppearance === components_1.RowAppearance.HideToggler;
     const linesVisibilityByIndex = (0, react_1.useMemo)(() => {
       var _a;
       const parents = [];
@@ -144,7 +141,7 @@ function getTreeColumnDef(_ref) {
           "data-disabled": !isRowsSelectionEnabled || undefined,
           "data-selected": isRowSelected || undefined,
           "data-multiselect": isMultiSelect || undefined,
-          children: [showToggle && !isToggleHidden && (0, jsx_runtime_1.jsx)("div", {
+          children: [showToggle && (0, jsx_runtime_1.jsx)("div", {
             tabIndex: -1,
             className: styles_module_scss_1.default.treeCheckboxWrap,
             children: isMultiSelect ? (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, {

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

@@ -1,6 +1,5 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
-import { RowAppearance } from '../../components';
 import { ColumnOrder } from '../../types';
 import { RowProps } from './Row';
 export type RowInfo<TData> = {
@@ -15,6 +14,5 @@ export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
     onRowClick?: RowClickHandler<TData>;
     columnOrder: ColumnOrder;
     enableColumnsOrderSortByDrag?: boolean;
-    disabledRowAppearance?: RowAppearance;
 };
-export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -12,7 +12,6 @@ exports.BodyRow = BodyRow;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sortable_1 = require("@dnd-kit/sortable");
 const react_1 = require("react");
-const components_1 = require("../../components");
 const constants_1 = require("../../constants");
 const Cells_1 = require("../Cells");
 const contexts_1 = require("../contexts");
@@ -26,8 +25,7 @@ function BodyRow(_ref) {
     onRowClick,
     rowAutoHeight,
     columnOrder,
-    enableColumnsOrderSortByDrag,
-    disabledRowAppearance = components_1.RowAppearance.Disabled
+    enableColumnsOrderSortByDrag
   } = _ref;
   const {
     leftPinned,
@@ -59,7 +57,6 @@ function BodyRow(_ref) {
       onClick: handleRowClick,
       "data-clickable": Boolean(onRowClick) || undefined,
       "data-disabled": disabled || undefined,
-      "data-row-appearance": disabled ? disabledRowAppearance : undefined,
       "data-selected": isSelected || undefined,
       "data-actions-opened": dropListOpened || undefined,
       "data-test-id": constants_1.TEST_IDS.bodyRow,

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

@@ -84,11 +84,9 @@
 }
 .bodyRow[data-disabled]{
   cursor:not-allowed;
-}
-.bodyRow[data-row-appearance=disabled]{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
-.bodyRow[data-row-appearance=disabled] .rowPinnedCells{
+.bodyRow[data-disabled] .rowPinnedCells{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
 .bodyRow[data-selected]{

package/dist/cjs/helperComponents/TableEmptyState/TableEmptyState.d.ts

@@ -1,12 +1,5 @@
-import { ReactNode } from 'react';
-import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
-export type EmptyStateProps = {
-    title?: string;
-    description?: string;
-    icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
-    footer?: ReactNode;
-    className?: string;
-};
+import { InfoBlockProps } from '@snack-uikit/info-block';
+export type EmptyStateProps = Pick<InfoBlockProps, 'title' | 'description' | 'icon' | 'footer' | 'className'>;
 export type TableEmptyState = {
     emptyStates: {
         noDataState: EmptyStateProps;

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

@@ -1 +1,6 @@
-export declare const onSearchDebounced: import("lodash").DebouncedFunc<(newValue: string, onChange: (newValue: string) => void) => void>;
+import debounce from 'lodash.debounce';
+type ChangeHandler = (newValue: string) => void;
+type SearchHandler = (newValue: string, onChange: ChangeHandler) => void;
+type OnSearchDebouncedType = ReturnType<typeof debounce<SearchHandler>>;
+export declare const onSearchDebounced: OnSearchDebouncedType;
+export {};

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

@@ -58,8 +58,7 @@ export function Table(_a) {
         enableSelection,
         enableSelectPinned,
         expanding,
-        rowSelectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance,
-    }), [columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance]);
+    }), [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
     const pinnedGroups = useMemo(() => getPinnedGroups(allTableColumns), [allTableColumns]);
     const { enabledColumns, setEnabledColumns, getColumnsSettings, enabledTableColumns, enabledColumnsDefinitions, areColumnsSettingsEnabled, } = useColumnSettings({
         columnDefinitions,
@@ -166,6 +165,9 @@ export function Table(_a) {
         pageSize: Math.min(Math.max(pageSize, 5), DEFAULT_PAGE_SIZE),
         columnDefinitions: enabledColumnsDefinitions,
         columnPinning,
+        enableSelection,
+        enableSelectPinned,
+        expanding,
     });
     const handleOnRefresh = useCallback(() => {
         table.resetRowSelection();
@@ -300,7 +302,7 @@ export function Table(_a) {
                                 }
                             },
                         }
-                        : 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 || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "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(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table, getRowBackgroundColor }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag, disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance }, 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 }))] })));
+                        : 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 || areColumnsSettingsEnabled ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows })), areColumnsSettingsEnabled && (_jsx(ColumnsSettings, { columnsSettings: columnsSettings, enabledColumns: enabledColumns, setEnabledColumns: setEnabledColumns }))] })) : undefined, moreActions: moreActions, filterRow: patchedFilter, "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(DndContext, Object.assign({}, dndContextProps, { children: _jsx(TableContext.Provider, { value: { table, getRowBackgroundColor }, children: (!infiniteLoading || !data.length) && loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }), loadingTableRows.map(row => (_jsx(BodyRow, { row: row, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? (_jsx(HeaderRow, { rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag })) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick, rowAutoHeight: rowAutoHeight, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, row.id))), data.length > 0 && infiniteLoading && loading && !dataError && (_jsx(SkeletonContextProvider, { loading: true, children: loadingTableRows.slice(0, 3).map(row => (_jsx(BodyRow, { row: row, columnOrder: columnOrder, enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag }, 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/hooks/useColumnSettings/useColumnSettings.js

@@ -32,8 +32,7 @@ export function useColumnSettings({ columnDefinitions, columnsSettings, pinnedGr
         enableSelection,
         enableSelectPinned,
         expanding,
-        rowSelectionAppearance: rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.appearance,
-    }), [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.appearance]);
+    }), [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding]);
     const areAllColumnsEnabled = enabledColumns.length === configurableColumns.length;
     const getColumnsSettings = useCallback((columnOrder) => prepareColumnsSettings({
         pinnedGroups,

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

@@ -1,11 +1,15 @@
 import { ColumnPinningState } from '@tanstack/react-table';
 import { ColumnDefinition } from '../../../types';
-type UseLoadingTableProps<TData> = {
+import { TableProps } from '../../types';
+type UseLoadingTableProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];
     pageSize: number;
     columnPinning: ColumnPinningState;
+    enableSelection?: boolean;
+    enableSelectPinned?: boolean;
+    expanding?: TableProps<TData>['expanding'];
 };
-export declare function useLoadingTable<TData>({ pageSize, columnDefinitions, columnPinning }: UseLoadingTableProps<TData>): {
+export declare function useLoadingTable<TData extends object>({ pageSize, columnDefinitions, columnPinning, enableSelection, enableSelectPinned, expanding, }: UseLoadingTableProps<TData>): {
     loadingTable: import("@tanstack/react-table").Table<TData>;
 };
 export {};

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

@@ -2,10 +2,29 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { getCoreRowModel, useReactTable } from '@tanstack/react-table';
 import { useMemo } from 'react';
 import { SkeletonText } from '@snack-uikit/skeleton';
+import { getSelectionCellColumnDef, getTreeColumnDef } from '../../../helperComponents';
 import styles from '../styles.module.css';
-export function useLoadingTable({ pageSize, columnDefinitions, columnPinning }) {
-    const data = useMemo(() => (Array.from({ length: pageSize }).map(() => '') || []), [pageSize]);
-    const columns = useMemo(() => columnDefinitions.map(column => (Object.assign(Object.assign({}, column), { cell: () => _jsx(SkeletonText, { className: styles.skeleton, lines: 1, width: '100%' }) }))), [columnDefinitions]);
+function CellSkeleton() {
+    return _jsx(SkeletonText, { className: styles.skeleton, lines: 1, width: '100%' });
+}
+export function useLoadingTable({ pageSize, columnDefinitions, columnPinning, enableSelection, enableSelectPinned, expanding, }) {
+    const data = useMemo(() => Array.from({ length: pageSize }).map(() => ({})), [pageSize]);
+    const columns = useMemo(() => {
+        let cols = columnDefinitions.map(column => (Object.assign(Object.assign({}, column), { cell: () => _jsx(CellSkeleton, {}) })));
+        // for selection column
+        if (enableSelection && !expanding) {
+            const selectionColumnDef = getSelectionCellColumnDef(enableSelectPinned !== null && enableSelectPinned !== void 0 ? enableSelectPinned : false);
+            const loadingSelectionColumn = Object.assign(Object.assign({}, selectionColumnDef), { cell: () => _jsx(CellSkeleton, {}) });
+            cols = [loadingSelectionColumn, ...cols];
+        }
+        // for tree column
+        if (expanding) {
+            const treeColumnDef = getTreeColumnDef(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), { enableSelection }));
+            const loadingTreeColumn = Object.assign(Object.assign({}, treeColumnDef), { cell: () => _jsx(CellSkeleton, {}) });
+            cols = [loadingTreeColumn, ...cols];
+        }
+        return cols;
+    }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
     const loadingTable = useReactTable({
         data,
         columns,

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

@@ -1,11 +1,10 @@
 import { ColumnDefinition } from '../../../types';
-import { RowAppearance, TableProps } from '../../types';
+import { TableProps } from '../../types';
 type GetTableColumnsDefinitionsProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];
     enableSelection: boolean;
     enableSelectPinned: boolean;
     expanding: TableProps<TData>['expanding'];
-    rowSelectionAppearance?: RowAppearance;
 };
-export declare function getTableColumnsDefinitions<TData extends object>({ columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionAppearance, }: GetTableColumnsDefinitionsProps<TData>): ColumnDefinition<TData>[];
+export declare function getTableColumnsDefinitions<TData extends object>({ columnDefinitions, enableSelection, enableSelectPinned, expanding, }: GetTableColumnsDefinitionsProps<TData>): ColumnDefinition<TData>[];
 export {};

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

@@ -1,15 +1,11 @@
 import { getSelectionCellColumnDef, getTreeColumnDef } from '../../../helperComponents';
-import { RowAppearance } from '../../types';
-export function getTableColumnsDefinitions({ columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionAppearance = RowAppearance.Disabled, }) {
+export function getTableColumnsDefinitions({ columnDefinitions, enableSelection, enableSelectPinned, expanding, }) {
     let cols = columnDefinitions;
     if (enableSelection && !expanding) {
         cols = [getSelectionCellColumnDef(enableSelectPinned), ...cols];
     }
     if (expanding) {
-        cols = [
-            getTreeColumnDef(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), { enableSelection, rowSelectionAppearance })),
-            ...cols,
-        ];
+        cols = [getTreeColumnDef(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), { enableSelection })), ...cols];
     }
     return cols;
 }

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

@@ -10,10 +10,6 @@ export type TableRowColor = ValueOf<typeof TABLE_ROW_COLOR>;
 type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkActions']>[number], 'onClick'> & {
     onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
-export declare enum RowAppearance {
-    Disabled = "disabled",
-    HideToggler = "hide-toggler"
-}
 type BaseTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = WithSupportProps<{
     /** Данные для отрисовки */
     data: TData[];
@@ -59,7 +55,6 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
      * <strong>initialState</strong>: Начальное состояние выбора строк <br>
      * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
      * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
-     * <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br>
      * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
      * <strong>onChange</strong>: Колбэк на выбор строк
      *  */
@@ -69,7 +64,6 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
         enable?: RowSelectionOptions<TData>['enableRowSelection'];
         multiRow?: boolean;
         onChange?(state: RowSelectionState): void;
-        appearance?: RowAppearance;
     };
     /** Параметры отвечают за глобальный поиск в таблице <br>
      * <strong>initialState</strong>: Начальное состояние строки поиска <br>

package/dist/esm/components/types.js

@@ -1,5 +1 @@
-export var RowAppearance;
-(function (RowAppearance) {
-    RowAppearance["Disabled"] = "disabled";
-    RowAppearance["HideToggler"] = "hide-toggler";
-})(RowAppearance || (RowAppearance = {}));
+export {};

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

@@ -1,6 +1,5 @@
 import { CellContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
-import { RowAppearance } from '../../../components';
 import { ColumnDefinition } from '../../../types';
 type BaseTreeColumnDef = {
     /** Имя ключа соответствующее полю в data */
@@ -27,8 +26,7 @@ type TreeColumnDefWithDescription<TData> = BaseTreeColumnDef & {
 export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWithDescription<TData>;
 type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
     enableSelection?: boolean;
-    rowSelectionAppearance: RowAppearance;
 };
 /** Вспомогательная функция для создания ячейки со статусом */
-export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, cell: renderCell, enableSelection, rowSelectionAppearance, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
+export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, cell: renderCell, enableSelection, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
 export {};

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

@@ -4,14 +4,13 @@ import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
 import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
-import { RowAppearance } from '../../../components';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { useCellResize } from '../../../contexts';
 import { TREE_CELL_ID } from './constants';
 import styles from './styles.module.css';
 import { TreeLine } from './TreeLine';
 /** Вспомогательная функция для создания ячейки со статусом */
-export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), header, accessorKey, cell: renderCell, enableSelection, rowSelectionAppearance, }) {
+export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), header, accessorKey, cell: renderCell, enableSelection, }) {
     const cell = function TreeCell(ctx) {
         var _a;
         const { row, cell } = ctx;
@@ -26,7 +25,6 @@ export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { si
         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 } = useCellResize(TREE_CELL_ID, cell);
-        const isToggleHidden = !isRowsSelectionEnabled && rowSelectionAppearance === RowAppearance.HideToggler;
         const linesVisibilityByIndex = useMemo(() => {
             var _a;
             const parents = [];
@@ -84,7 +82,7 @@ export function getTreeColumnDef({ showToggle = false, icon = _jsx(FileSVG, { si
                 // @ts-ignore
                 cell.row.original[accessorKey]
             : cell.getValue();
-        return (_jsx("div", { role: 'presentation', "data-test-id": TEST_IDS.tree.node, className: styles.treeCellContainer, onClick: toggleClickHandler, children: _jsxs("div", { className: styles.treeCell, ref: ref, children: [lines, Boolean(parent) && _jsx(TreeLine, { horizontal: true, visible: true }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', "data-test-id": TEST_IDS.tree.chevron, icon: _jsx(ChevronRightSVG, {}), onClick: chevronClickHandler, className: styles.cellExpandButton, "data-expanded": isExpanded || undefined })), _jsxs("div", { className: styles.treeNodeContent, "data-disabled": !isRowsSelectionEnabled || undefined, "data-selected": isRowSelected || undefined, "data-multiselect": isMultiSelect || undefined, children: [showToggle && !isToggleHidden && (_jsx("div", { tabIndex: -1, className: styles.treeCheckboxWrap, children: isMultiSelect ? (_jsx(Checkbox, { size: 's', disabled: !isRowsSelectionEnabled, checked: isRowSelected, "data-test-id": TEST_IDS.tree.checkbox, indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected })) : (_jsx(Radio, { size: 's', disabled: !isRowsSelectionEnabled, "data-test-id": TEST_IDS.tree.radio, checked: isRowSelected })) })), _jsxs("div", { role: 'presentation', onClick: chevronClickHandler, className: styles.cellUserToggleIcon, children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon] }), _jsxs("div", { role: 'presentation', className: styles.userContent, children: [!isExpandable && icon, renderCell ? renderCell(ctx) : _jsx(TruncateString, { text: value })] })] })] }) }));
+        return (_jsx("div", { role: 'presentation', "data-test-id": TEST_IDS.tree.node, className: styles.treeCellContainer, onClick: toggleClickHandler, children: _jsxs("div", { className: styles.treeCell, ref: ref, children: [lines, Boolean(parent) && _jsx(TreeLine, { horizontal: true, visible: true }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', "data-test-id": TEST_IDS.tree.chevron, icon: _jsx(ChevronRightSVG, {}), onClick: chevronClickHandler, className: styles.cellExpandButton, "data-expanded": isExpanded || undefined })), _jsxs("div", { className: styles.treeNodeContent, "data-disabled": !isRowsSelectionEnabled || undefined, "data-selected": isRowSelected || undefined, "data-multiselect": isMultiSelect || undefined, children: [showToggle && (_jsx("div", { tabIndex: -1, className: styles.treeCheckboxWrap, children: isMultiSelect ? (_jsx(Checkbox, { size: 's', disabled: !isRowsSelectionEnabled, checked: isRowSelected, "data-test-id": TEST_IDS.tree.checkbox, indeterminate: isSomeSubRowSelected && !isAllSubRowsSelected })) : (_jsx(Radio, { size: 's', disabled: !isRowsSelectionEnabled, "data-test-id": TEST_IDS.tree.radio, checked: isRowSelected })) })), _jsxs("div", { role: 'presentation', onClick: chevronClickHandler, className: styles.cellUserToggleIcon, children: [isExpandable && isExpanded && expandedIcon, isExpandable && !isExpanded && collapsedIcon] }), _jsxs("div", { role: 'presentation', className: styles.userContent, children: [!isExpandable && icon, renderCell ? renderCell(ctx) : _jsx(TruncateString, { text: value })] })] })] }) }));
     };
     return {
         id: TREE_CELL_ID,

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

@@ -1,6 +1,5 @@
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
-import { RowAppearance } from '../../components';
 import { ColumnOrder } from '../../types';
 import { RowProps } from './Row';
 export type RowInfo<TData> = {
@@ -15,6 +14,5 @@ export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
     onRowClick?: RowClickHandler<TData>;
     columnOrder: ColumnOrder;
     enableColumnsOrderSortByDrag?: boolean;
-    disabledRowAppearance?: RowAppearance;
 };
-export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortable';
 import { useState } from 'react';
-import { RowAppearance } from '../../components';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { BodyCell } from '../Cells';
 import { RowContext, useTableContext } from '../contexts';
@@ -9,7 +8,7 @@ import { useRowCells } from '../hooks';
 import { PinnedCells } from './PinnedCells';
 import { Row } from './Row';
 import styles from './styles.module.css';
-export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance = RowAppearance.Disabled, }) {
+export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, }) {
     const { leftPinned, rightPinned, unpinned } = useRowCells(row);
     const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
@@ -26,5 +25,5 @@ export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableCol
     };
     const isSelected = row.getIsSelected() || (row.getIsSomeSelected() && !row.getCanMultiSelect() && !row.getIsExpanded());
     const rowBackgroundColor = getRowBackgroundColor === null || getRowBackgroundColor === void 0 ? void 0 : getRowBackgroundColor(row.original);
-    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-row-appearance": disabled ? disabledRowAppearance : undefined, "data-selected": isSelected || undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, "data-row-bg-appearance": rowBackgroundColor && !disabled && !isSelected ? rowBackgroundColor : undefined, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id))) }))] }) }));
+    return (_jsx(RowContext.Provider, { value: { dropListOpened, setDropListOpen }, children: _jsxs(Row, { onClick: handleRowClick, "data-clickable": Boolean(onRowClick) || undefined, "data-disabled": disabled || undefined, "data-selected": isSelected || undefined, "data-actions-opened": dropListOpened || undefined, "data-test-id": TEST_IDS.bodyRow, "data-row-id": row.id, "data-row-bg-appearance": rowBackgroundColor && !disabled && !isSelected ? rowBackgroundColor : undefined, className: styles.bodyRow, rowAutoHeight: rowAutoHeight, children: [leftPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Left, children: leftPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight }, cell.id))) })), unpinned.map(cell => (_jsx(SortableContext, { items: columnOrder, strategy: horizontalListSortingStrategy, children: _jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id) }, cell.id))), rightPinned && (_jsx(PinnedCells, { position: COLUMN_PIN_POSITION.Right, children: rightPinned.map(cell => (_jsx(BodyCell, { cell: cell, rowAutoHeight: rowAutoHeight, isDraggable: enableColumnsOrderSortByDrag }, cell.id))) }))] }) }));
 }

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

@@ -84,11 +84,9 @@
 }
 .bodyRow[data-disabled]{
   cursor:not-allowed;
-}
-.bodyRow[data-row-appearance=disabled]{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
-.bodyRow[data-row-appearance=disabled] .rowPinnedCells{
+.bodyRow[data-disabled] .rowPinnedCells{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
 .bodyRow[data-selected]{

package/dist/esm/helperComponents/TableEmptyState/TableEmptyState.d.ts

@@ -1,12 +1,5 @@
-import { ReactNode } from 'react';
-import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
-export type EmptyStateProps = {
-    title?: string;
-    description?: string;
-    icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
-    footer?: ReactNode;
-    className?: string;
-};
+import { InfoBlockProps } from '@snack-uikit/info-block';
+export type EmptyStateProps = Pick<InfoBlockProps, 'title' | 'description' | 'icon' | 'footer' | 'className'>;
 export type TableEmptyState = {
     emptyStates: {
         noDataState: EmptyStateProps;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.16-preview-964a845f.0",
+  "version": "0.37.16",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -43,7 +43,6 @@
     "@dnd-kit/utilities": "3.2.2",
     "@snack-uikit/button": "0.19.16",
     "@snack-uikit/chips": "0.28.8",
-    "@snack-uikit/icon-predefined": "0.7.10",
     "@snack-uikit/icons": "0.27.3",
     "@snack-uikit/info-block": "0.6.33",
     "@snack-uikit/list": "0.32.7",
@@ -66,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "5a2d58901a4686899e92bfb9dfeb3159e37d6021"
+  "gitHead": "4bd295f8a30dd647edfec1dfdcad4dc1918e4cbc"
 }

package/src/components/ServerTable/utils.ts

@@ -2,6 +2,11 @@ import debounce from 'lodash.debounce';
 
 import { SEARCH_DELAY } from './constants';
 
-export const onSearchDebounced = debounce((newValue: string, onChange: (newValue: string) => void) => {
+type ChangeHandler = (newValue: string) => void;
+type SearchHandler = (newValue: string, onChange: ChangeHandler) => void;
+
+type OnSearchDebouncedType = ReturnType<typeof debounce<SearchHandler>>;
+
+export const onSearchDebounced: OnSearchDebouncedType = debounce((newValue, onChange) => {
   onChange(newValue);
 }, SEARCH_DELAY);

package/src/components/Table/Table.tsx

@@ -173,9 +173,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         enableSelection,
         enableSelectPinned,
         expanding,
-        rowSelectionAppearance: rowSelectionProp?.appearance,
       }),
-    [columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionProp?.appearance],
+    [columnDefinitions, enableSelection, enableSelectPinned, expanding],
   );
   const pinnedGroups = useMemo(() => getPinnedGroups(allTableColumns), [allTableColumns]);
 
@@ -306,6 +305,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     pageSize: Math.min(Math.max(pageSize, 5), DEFAULT_PAGE_SIZE),
     columnDefinitions: enabledColumnsDefinitions,
     columnPinning,
+    enableSelection,
+    enableSelectPinned,
+    expanding,
   });
 
   const handleOnRefresh = useCallback(() => {
@@ -531,13 +533,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                   <SkeletonContextProvider loading>
                     <HeaderRow rowAutoHeight={rowAutoHeight} columnOrder={columnOrder} />
                     {loadingTableRows.map(row => (
-                      <BodyRow
-                        key={row.id}
-                        row={row}
-                        rowAutoHeight={rowAutoHeight}
-                        columnOrder={columnOrder}
-                        disabledRowAppearance={rowSelectionProp?.appearance}
-                      />
+                      <BodyRow key={row.id} row={row} rowAutoHeight={rowAutoHeight} columnOrder={columnOrder} />
                     ))}
                   </SkeletonContextProvider>
                 ) : (
@@ -560,7 +556,6 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                             rowAutoHeight={rowAutoHeight}
                             columnOrder={columnOrder}
                             enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
-                            disabledRowAppearance={rowSelectionProp?.appearance}
                           />
                         ))}
                       </div>
@@ -574,7 +569,6 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                         rowAutoHeight={rowAutoHeight}
                         columnOrder={columnOrder}
                         enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
-                        disabledRowAppearance={rowSelectionProp?.appearance}
                       />
                     ))}
 
@@ -586,7 +580,6 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                             row={row}
                             columnOrder={columnOrder}
                             enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
-                            disabledRowAppearance={rowSelectionProp?.appearance}
                           />
                         ))}
                       </SkeletonContextProvider>

package/src/components/Table/hooks/useColumnSettings/useColumnSettings.ts

@@ -74,9 +74,8 @@ export function useColumnSettings<TData extends object, TFilters extends Record<
         enableSelection,
         enableSelectPinned,
         expanding,
-        rowSelectionAppearance: rowSelection?.appearance,
       }),
-    [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding, rowSelection?.appearance],
+    [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding],
   );
 
   const areAllColumnsEnabled = enabledColumns.length === configurableColumns.length;

package/src/components/Table/hooks/useLoadingTable.tsx

@@ -3,25 +3,63 @@ import { useMemo } from 'react';
 
 import { SkeletonText } from '@snack-uikit/skeleton';
 
+import { getSelectionCellColumnDef, getTreeColumnDef } from '../../../helperComponents';
 import { ColumnDefinition } from '../../../types';
+import { TableProps } from '../../types';
 import styles from '../styles.module.scss';
 
-type UseLoadingTableProps<TData> = {
+type UseLoadingTableProps<TData extends object> = {
   columnDefinitions: ColumnDefinition<TData>[];
   pageSize: number;
   columnPinning: ColumnPinningState;
+  enableSelection?: boolean;
+  enableSelectPinned?: boolean;
+  expanding?: TableProps<TData>['expanding'];
 };
 
-export function useLoadingTable<TData>({ pageSize, columnDefinitions, columnPinning }: UseLoadingTableProps<TData>) {
-  const data = useMemo(() => (Array.from({ length: pageSize }).map(() => '') || []) as TData[], [pageSize]);
-  const columns = useMemo(
-    () =>
-      columnDefinitions.map(column => ({
-        ...column,
-        cell: () => <SkeletonText className={styles.skeleton} lines={1} width={'100%'} />,
-      })),
-    [columnDefinitions],
-  );
+function CellSkeleton() {
+  return <SkeletonText className={styles.skeleton} lines={1} width={'100%'} />;
+}
+
+export function useLoadingTable<TData extends object>({
+  pageSize,
+  columnDefinitions,
+  columnPinning,
+  enableSelection,
+  enableSelectPinned,
+  expanding,
+}: UseLoadingTableProps<TData>) {
+  const data = useMemo(() => Array.from({ length: pageSize }).map(() => ({}) as TData), [pageSize]);
+  const columns = useMemo(() => {
+    let cols: ColumnDefinition<TData>[] = columnDefinitions.map(column => ({
+      ...column,
+      cell: () => <CellSkeleton />,
+    }));
+
+    // for selection column
+    if (enableSelection && !expanding) {
+      const selectionColumnDef = getSelectionCellColumnDef(enableSelectPinned ?? false);
+      const loadingSelectionColumn = {
+        ...selectionColumnDef,
+        cell: () => <CellSkeleton />,
+      } as ColumnDefinition<TData>;
+
+      cols = [loadingSelectionColumn, ...cols];
+    }
+
+    // for tree column
+    if (expanding) {
+      const treeColumnDef = getTreeColumnDef({ ...expanding.expandingColumnDefinition, enableSelection });
+      const loadingTreeColumn = {
+        ...treeColumnDef,
+        cell: () => <CellSkeleton />,
+      } as ColumnDefinition<TData>;
+
+      cols = [loadingTreeColumn, ...cols];
+    }
+
+    return cols;
+  }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
 
   const loadingTable = useReactTable<TData>({
     data,

package/src/components/Table/utils/getTableColumnsDefinitions.ts

@@ -1,13 +1,12 @@
 import { getSelectionCellColumnDef, getTreeColumnDef } from '../../../helperComponents';
 import { ColumnDefinition } from '../../../types';
-import { RowAppearance, TableProps } from '../../types';
+import { TableProps } from '../../types';
 
 type GetTableColumnsDefinitionsProps<TData extends object> = {
   columnDefinitions: ColumnDefinition<TData>[];
   enableSelection: boolean;
   enableSelectPinned: boolean;
   expanding: TableProps<TData>['expanding'];
-  rowSelectionAppearance?: RowAppearance;
 };
 
 export function getTableColumnsDefinitions<TData extends object>({
@@ -15,17 +14,13 @@ export function getTableColumnsDefinitions<TData extends object>({
   enableSelection,
   enableSelectPinned,
   expanding,
-  rowSelectionAppearance = RowAppearance.Disabled,
 }: GetTableColumnsDefinitionsProps<TData>): ColumnDefinition<TData>[] {
   let cols: ColumnDefinition<TData>[] = columnDefinitions;
   if (enableSelection && !expanding) {
     cols = [getSelectionCellColumnDef(enableSelectPinned), ...cols];
   }
   if (expanding) {
-    cols = [
-      getTreeColumnDef({ ...expanding.expandingColumnDefinition, enableSelection, rowSelectionAppearance }),
-      ...cols,
-    ];
+    cols = [getTreeColumnDef({ ...expanding.expandingColumnDefinition, enableSelection }), ...cols];
   }
   return cols;
 }

package/src/components/types.ts

@@ -22,11 +22,6 @@ type BulkAction = Omit<NonNullable<ToolbarProps<Record<string, string>>['bulkAct
   onClick?(selectionState: RowSelectionState, resetRowSelection: (defaultState?: boolean) => void): void;
 };
 
-export enum RowAppearance {
-  Disabled = 'disabled',
-  HideToggler = 'hide-toggler',
-}
-
 type BaseTableProps<TData extends object, TFilters extends FiltersState = Record<string, unknown>> = WithSupportProps<{
   /** Данные для отрисовки */
   data: TData[];
@@ -74,7 +69,6 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
    * <strong>initialState</strong>: Начальное состояние выбора строк <br>
    * <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br>
    * <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <br>
-   * <strong>appearance</strong>: Режим отображения недоступной для выбора строки. Опции: RowAppearance.Disabled (по дефолту) - серый фон, чекбокс/радиобаттон скрыт, RowAppearance.HideToggler - обычный фон, чекбокс/радиобаттон скрыт <br>
    * <strong>multiRow</strong>: Мульти-выбор строк (включен по-умолчанию, когда включается выбор) <br>
    * <strong>onChange</strong>: Колбэк на выбор строк
    *  */
@@ -84,7 +78,6 @@ type BaseTableProps<TData extends object, TFilters extends FiltersState = Record
     enable?: RowSelectionOptions<TData>['enableRowSelection'];
     multiRow?: boolean;
     onChange?(state: RowSelectionState): void;
-    appearance?: RowAppearance;
   };
   /** Параметры отвечают за глобальный поиск в таблице <br>
    * <strong>initialState</strong>: Начальное состояние строки поиска <br>

package/src/helperComponents/Cells/TreeCell/TreeCell.tsx

@@ -6,7 +6,6 @@ import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit
 import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
 
-import { RowAppearance } from '../../../components';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { useCellResize } from '../../../contexts';
 import { ColumnDefinition } from '../../../types';
@@ -43,7 +42,6 @@ export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWith
 
 type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
   enableSelection?: boolean;
-  rowSelectionAppearance: RowAppearance;
 };
 
 /** Вспомогательная функция для создания ячейки со статусом */
@@ -56,7 +54,6 @@ export function getTreeColumnDef<TData>({
   accessorKey,
   cell: renderCell,
   enableSelection,
-  rowSelectionAppearance,
 }: TreeColDefProps<TData>): ColumnDefinition<TData> {
   const cell: ColumnDefinition<TData>['cell'] = function TreeCell(ctx) {
     const { row, cell } = ctx;
@@ -72,8 +69,6 @@ export function getTreeColumnDef<TData>({
     const depth = row.depth;
     const { ref } = useCellResize(TREE_CELL_ID, cell);
 
-    const isToggleHidden = !isRowsSelectionEnabled && rowSelectionAppearance === RowAppearance.HideToggler;
-
     const linesVisibilityByIndex = useMemo(() => {
       const parents: (Row<TData> | undefined)[] = [];
       for (let i = depth; i >= 0; i--) {
@@ -186,7 +181,7 @@ export function getTreeColumnDef<TData>({
             data-selected={isRowSelected || undefined}
             data-multiselect={isMultiSelect || undefined}
           >
-            {showToggle && !isToggleHidden && (
+            {showToggle && (
               <div tabIndex={-1} className={styles.treeCheckboxWrap}>
                 {isMultiSelect ? (
                   <Checkbox

package/src/helperComponents/Rows/BodyRow.tsx

@@ -2,7 +2,6 @@ import { horizontalListSortingStrategy, SortableContext } from '@dnd-kit/sortabl
 import { Row as TableRow } from '@tanstack/react-table';
 import { MouseEvent, useState } from 'react';
 
-import { RowAppearance } from '../../components';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../constants';
 import { ColumnOrder } from '../../types';
 import { BodyCell } from '../Cells';
@@ -26,7 +25,6 @@ export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
   onRowClick?: RowClickHandler<TData>;
   columnOrder: ColumnOrder;
   enableColumnsOrderSortByDrag?: boolean;
-  disabledRowAppearance?: RowAppearance;
 };
 
 export function BodyRow<TData>({
@@ -35,7 +33,6 @@ export function BodyRow<TData>({
   rowAutoHeight,
   columnOrder,
   enableColumnsOrderSortByDrag,
-  disabledRowAppearance = RowAppearance.Disabled,
 }: BodyRowProps<TData>) {
   const { leftPinned, rightPinned, unpinned } = useRowCells(row);
 
@@ -67,7 +64,6 @@ export function BodyRow<TData>({
         onClick={handleRowClick}
         data-clickable={Boolean(onRowClick) || undefined}
         data-disabled={disabled || undefined}
-        data-row-appearance={disabled ? disabledRowAppearance : undefined}
         data-selected={isSelected || undefined}
         data-actions-opened={dropListOpened || undefined}
         data-test-id={TEST_IDS.bodyRow}

package/src/helperComponents/Rows/styles.module.scss

@@ -108,11 +108,9 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
         )};
     }
   }
+
   &[data-disabled] {
     cursor: not-allowed;
-  }
-
-  &[data-row-appearance='disabled'] {
     background-color: styles-tokens-table.$sys-neutral-background;
 
     .rowPinnedCells {

package/src/helperComponents/TableEmptyState/TableEmptyState.tsx

@@ -1,17 +1,8 @@
-import { ReactNode } from 'react';
-
-import { IconPredefinedProps } from '@snack-uikit/icon-predefined';
-import { InfoBlock } from '@snack-uikit/info-block';
+import { InfoBlock, InfoBlockProps } from '@snack-uikit/info-block';
 
 import styles from './styles.module.scss';
 
-export type EmptyStateProps = {
-  title?: string;
-  description?: string;
-  icon?: Pick<IconPredefinedProps, 'icon' | 'decor' | 'appearance'>;
-  footer?: ReactNode;
-  className?: string;
-};
+export type EmptyStateProps = Pick<InfoBlockProps, 'title' | 'description' | 'icon' | 'footer' | 'className'>;
 
 export type TableEmptyState = {
   emptyStates: {