@snack-uikit/table 0.37.18 → 0.37.19

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.19 (2025-11-26)</small>
+
+* fix(PDS-3189): fix selection with shift key for single row selection mode ([2cdfb64](https://github.com/cloud-ru-tech/snack-uikit/commit/2cdfb64))
+* feat(PDS-3156): implement disabled rows appearance variants ([75ed605](https://github.com/cloud-ru-tech/snack-uikit/commit/75ed605))
+
+
+
+
+
 ## <small>0.37.18 (2025-11-26)</small>
 
 * fix(HCE-284): export table, set column width to maximum content length ([cc1f55b](https://github.com/cloud-ru-tech/snack-uikit/commit/cc1f55b))

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; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <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; 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>: Колбэк на выбор строк |
 | 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; }` | - | Параметры отвечают за возможность выбора строк <br> <strong>initialState</strong>: Начальное состояние выбора строк <br> <strong>state</strong>: Состояние выбора строк, жестко устанавливаемое снаружи <br> <strong>enable</strong>: Колбэк определяющий можно ли выбрать строку <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; 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>: Колбэк на выбор строк |
 | enableFuzzySearch | `boolean` | - | Включить нечеткий поиск |
 | rowAutoHeight | `boolean` | - |  |
 | onRowClick | `RowClickHandler<TData>` | - | Колбэк клика по строке |

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

@@ -118,8 +118,9 @@ function Table(_a) {
     columnDefinitions,
     enableSelection,
     enableSelectPinned,
-    expanding
-  }), [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+    expanding,
+    rowSelectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
+  }), [columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance]);
   const pinnedGroups = (0, react_1.useMemo)(() => (0, utils_3.getPinnedGroups)(allTableColumns), [allTableColumns]);
   const {
     enabledColumns,
@@ -248,7 +249,8 @@ function Table(_a) {
     columnPinning,
     enableSelection,
     enableSelectPinned,
-    expanding
+    expanding,
+    rowSelectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
   });
   const handleOnRefresh = (0, react_1.useCallback)(() => {
     table.resetRowSelection();
@@ -460,7 +462,8 @@ function Table(_a) {
                 }), loadingTableRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,
                   rowAutoHeight: rowAutoHeight,
-                  columnOrder: columnOrder
+                  columnOrder: columnOrder,
+                  disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
                 }, row.id))]
               }) : (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
                 children: [centerRows.length || filteredTopRows.length ? (0, jsx_runtime_1.jsx)(helperComponents_1.HeaderRow, {
@@ -474,20 +477,23 @@ function Table(_a) {
                     onRowClick: onRowClick,
                     rowAutoHeight: rowAutoHeight,
                     columnOrder: columnOrder,
-                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
+                    disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
                   }, row.id))
                 }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,
                   onRowClick: onRowClick,
                   rowAutoHeight: rowAutoHeight,
                   columnOrder: columnOrder,
-                  enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag
+                  enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
+                  disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
                 }, 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
+                    enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
+                    disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
                   }, row.id))
                 }), (0, jsx_runtime_1.jsx)(helperComponents_1.TableEmptyState, {
                   emptyStates: emptyStates,

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

@@ -48,8 +48,9 @@ function useColumnSettings(_ref) {
     columnDefinitions: enabledColumnsDefinitions,
     enableSelection,
     enableSelectPinned,
-    expanding
-  }), [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding]);
+    expanding,
+    rowSelectionAppearance: rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.appearance
+  }), [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding, rowSelection === null || rowSelection === void 0 ? void 0 : rowSelection.appearance]);
   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,6 +1,6 @@
 import { ColumnPinningState } from '@tanstack/react-table';
 import { ColumnDefinition } from '../../../types';
-import { TableProps } from '../../types';
+import { RowAppearance, TableProps } from '../../types';
 type UseLoadingTableProps<TData extends object> = {
     columnDefinitions: ColumnDefinition<TData>[];
     pageSize: number;
@@ -8,8 +8,9 @@ type UseLoadingTableProps<TData extends object> = {
     enableSelection?: boolean;
     enableSelectPinned?: boolean;
     expanding?: TableProps<TData>['expanding'];
+    rowSelectionAppearance?: RowAppearance;
 };
-export declare function useLoadingTable<TData extends object>({ pageSize, columnDefinitions, columnPinning, enableSelection, enableSelectPinned, expanding, }: UseLoadingTableProps<TData>): {
+export declare function useLoadingTable<TData extends object>({ pageSize, columnDefinitions, columnPinning, enableSelection, enableSelectPinned, expanding, rowSelectionAppearance, }: UseLoadingTableProps<TData>): {
     loadingTable: import("@tanstack/react-table").Table<TData>;
 };
 export {};

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

@@ -29,7 +29,8 @@ function useLoadingTable(_ref) {
     columnPinning,
     enableSelection,
     enableSelectPinned,
-    expanding
+    expanding,
+    rowSelectionAppearance
   } = _ref;
   const data = (0, react_1.useMemo)(() => Array.from({
     length: pageSize
@@ -49,7 +50,8 @@ function useLoadingTable(_ref) {
     // for tree column
     if (expanding) {
       const treeColumnDef = (0, helperComponents_1.getTreeColumnDef)(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), {
-        enableSelection
+        enableSelection,
+        rowSelectionAppearance
       }));
       const loadingTreeColumn = Object.assign(Object.assign({}, treeColumnDef), {
         cell: () => (0, jsx_runtime_1.jsx)(CellSkeleton, {})
@@ -57,7 +59,7 @@ function useLoadingTable(_ref) {
       cols = [loadingTreeColumn, ...cols];
     }
     return cols;
-  }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+  }, [columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionAppearance]);
   const loadingTable = (0, react_table_1.useReactTable)({
     data,
     columns,

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

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

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

@@ -5,12 +5,14 @@ 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
+    expanding,
+    rowSelectionAppearance = types_1.RowAppearance.Disabled
   } = _ref;
   let cols = columnDefinitions;
   if (enableSelection && !expanding) {
@@ -18,7 +20,8 @@ function getTableColumnsDefinitions(_ref) {
   }
   if (expanding) {
     cols = [(0, helperComponents_1.getTreeColumnDef)(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), {
-      enableSelection
+      enableSelection,
+      rowSelectionAppearance
     })), ...cols];
   }
   return cols;

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

@@ -10,6 +10,10 @@ 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[];
@@ -55,6 +59,7 @@ 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>: Колбэк на выбор строк
      *  */
@@ -64,6 +69,7 @@ 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,4 +2,10 @@
 
 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/RowActionsCell/styles.module.css

@@ -17,7 +17,6 @@
 
 .rowActionsCellWrap{
   --offset:0px;
-  cursor:pointer;
   display:flex;
   align-items:center;
   justify-content:center;

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

@@ -62,7 +62,7 @@ function getSelectionCellColumnDef(enableSelectPinned) {
         var _a, _b;
         e.stopPropagation();
         (_a = globalThis.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
-        if (e.shiftKey) {
+        if (e.shiftKey && isMulti) {
           const {
             rows,
             rowsById

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

@@ -1,5 +1,6 @@
 import { CellContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
+import { RowAppearance } from '../../../components';
 import { ColumnDefinition } from '../../../types';
 type BaseTreeColumnDef = {
     /** Имя ключа соответствующее полю в data */
@@ -26,7 +27,8 @@ 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, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
+export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, cell: renderCell, enableSelection, rowSelectionAppearance, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
 export {};

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

@@ -15,6 +15,7 @@ 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");
@@ -36,7 +37,8 @@ function getTreeColumnDef(_ref) {
     header,
     accessorKey,
     cell: renderCell,
-    enableSelection
+    enableSelection,
+    rowSelectionAppearance
   } = _ref;
   const cell = function TreeCell(ctx) {
     var _a;
@@ -57,6 +59,7 @@ 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 = [];
@@ -141,7 +144,7 @@ function getTreeColumnDef(_ref) {
           "data-disabled": !isRowsSelectionEnabled || undefined,
           "data-selected": isRowSelected || undefined,
           "data-multiselect": isMultiSelect || undefined,
-          children: [showToggle && (0, jsx_runtime_1.jsx)("div", {
+          children: [showToggle && !isToggleHidden && (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,5 +1,6 @@
 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> = {
@@ -14,5 +15,6 @@ 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, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -12,6 +12,7 @@ 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");
@@ -25,7 +26,8 @@ function BodyRow(_ref) {
     onRowClick,
     rowAutoHeight,
     columnOrder,
-    enableColumnsOrderSortByDrag
+    enableColumnsOrderSortByDrag,
+    disabledRowAppearance = components_1.RowAppearance.Disabled
   } = _ref;
   const {
     leftPinned,
@@ -57,6 +59,7 @@ 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

@@ -82,11 +82,11 @@
 .bodyRow[data-row-bg-appearance=pink]{
   --snack-ui-table-row-background:color-mix(in srgb, var(--sys-pink-accent-default, #d1668e), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
 }
-.bodyRow[data-disabled]{
+.bodyRow[data-row-appearance=disabled]{
   cursor:not-allowed;
   background-color:var(--sys-neutral-background, #eeeff3);
 }
-.bodyRow[data-disabled] .rowPinnedCells{
+.bodyRow[data-row-appearance=disabled] .rowPinnedCells{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
 .bodyRow[data-selected]{

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

@@ -58,7 +58,8 @@ export function Table(_a) {
         enableSelection,
         enableSelectPinned,
         expanding,
-    }), [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]);
     const pinnedGroups = useMemo(() => getPinnedGroups(allTableColumns), [allTableColumns]);
     const { enabledColumns, setEnabledColumns, getColumnsSettings, enabledTableColumns, enabledColumnsDefinitions, areColumnsSettingsEnabled, } = useColumnSettings({
         columnDefinitions,
@@ -168,6 +169,7 @@ export function Table(_a) {
         enableSelection,
         enableSelectPinned,
         expanding,
+        rowSelectionAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance,
     });
     const handleOnRefresh = useCallback(() => {
         table.resetRowSelection();
@@ -302,7 +304,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 }, 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 }))] })));
+                        : 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 }))] })));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

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

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

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

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

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

@@ -7,7 +7,7 @@ import styles from '../styles.module.css';
 function CellSkeleton() {
     return _jsx(SkeletonText, { className: styles.skeleton, lines: 1, width: '100%' });
 }
-export function useLoadingTable({ pageSize, columnDefinitions, columnPinning, enableSelection, enableSelectPinned, expanding, }) {
+export function useLoadingTable({ pageSize, columnDefinitions, columnPinning, enableSelection, enableSelectPinned, expanding, rowSelectionAppearance, }) {
     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, {}) })));
@@ -19,12 +19,13 @@ export function useLoadingTable({ pageSize, columnDefinitions, columnPinning, en
         }
         // for tree column
         if (expanding) {
-            const treeColumnDef = getTreeColumnDef(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), { enableSelection }));
+            const treeColumnDef = getTreeColumnDef(Object.assign(Object.assign({}, expanding.expandingColumnDefinition), { enableSelection,
+                rowSelectionAppearance }));
             const loadingTreeColumn = Object.assign(Object.assign({}, treeColumnDef), { cell: () => _jsx(CellSkeleton, {}) });
             cols = [loadingTreeColumn, ...cols];
         }
         return cols;
-    }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+    }, [columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionAppearance]);
     const loadingTable = useReactTable({
         data,
         columns,

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

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

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

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

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

@@ -10,6 +10,10 @@ 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[];
@@ -55,6 +59,7 @@ 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>: Колбэк на выбор строк
      *  */
@@ -64,6 +69,7 @@ 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 +1,5 @@
-export {};
+export var RowAppearance;
+(function (RowAppearance) {
+    RowAppearance["Disabled"] = "disabled";
+    RowAppearance["HideToggler"] = "hide-toggler";
+})(RowAppearance || (RowAppearance = {}));

package/dist/esm/helperComponents/Cells/RowActionsCell/styles.module.css

@@ -17,7 +17,6 @@
 
 .rowActionsCellWrap{
   --offset:0px;
-  cursor:pointer;
   display:flex;
   align-items:center;
   justify-content:center;

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

@@ -46,7 +46,7 @@ export function getSelectionCellColumnDef(enableSelectPinned) {
                 var _a, _b;
                 e.stopPropagation();
                 (_a = globalThis.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
-                if (e.shiftKey) {
+                if (e.shiftKey && isMulti) {
                     const { rows, rowsById } = table.getRowModel();
                     const rowsToToggle = getRowsToToggle(rows, row.id, rows.map(r => r.id).includes(previousClickedRowId) ? previousClickedRowId : '');
                     const isSelected = !((_b = rowsById[row.id]) === null || _b === void 0 ? void 0 : _b.getIsSelected()) || false;

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

@@ -1,5 +1,6 @@
 import { CellContext } from '@tanstack/react-table';
 import { ReactNode } from 'react';
+import { RowAppearance } from '../../../components';
 import { ColumnDefinition } from '../../../types';
 type BaseTreeColumnDef = {
     /** Имя ключа соответствующее полю в data */
@@ -26,7 +27,8 @@ 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, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
+export declare function getTreeColumnDef<TData>({ showToggle, icon, expandedIcon, collapsedIcon, header, accessorKey, cell: renderCell, enableSelection, rowSelectionAppearance, }: TreeColDefProps<TData>): ColumnDefinition<TData>;
 export {};

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

@@ -4,13 +4,14 @@ 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, }) {
+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, }) {
     const cell = function TreeCell(ctx) {
         var _a;
         const { row, cell } = ctx;
@@ -25,6 +26,7 @@ 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 = [];
@@ -82,7 +84,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 && (_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 && !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 {
         id: TREE_CELL_ID,

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

@@ -1,5 +1,6 @@
 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> = {
@@ -14,5 +15,6 @@ 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, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function BodyRow<TData>({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance, }: BodyRowProps<TData>): import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,7 @@
 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';
@@ -8,7 +9,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, }) {
+export function BodyRow({ row, onRowClick, rowAutoHeight, columnOrder, enableColumnsOrderSortByDrag, disabledRowAppearance = RowAppearance.Disabled, }) {
     const { leftPinned, rightPinned, unpinned } = useRowCells(row);
     const [dropListOpened, setDropListOpen] = useState(false);
     const disabled = !row.getCanSelect();
@@ -25,5 +26,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-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-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))) }))] }) }));
 }

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

@@ -82,11 +82,11 @@
 .bodyRow[data-row-bg-appearance=pink]{
   --snack-ui-table-row-background:color-mix(in srgb, var(--sys-pink-accent-default, #d1668e), var(--sys-neutral-background1-level, #fdfdfd) calc((1 - var(--opacity-a008, 0.08)) * 100%));
 }
-.bodyRow[data-disabled]{
+.bodyRow[data-row-appearance=disabled]{
   cursor:not-allowed;
   background-color:var(--sys-neutral-background, #eeeff3);
 }
-.bodyRow[data-disabled] .rowPinnedCells{
+.bodyRow[data-row-appearance=disabled] .rowPinnedCells{
   background-color:var(--sys-neutral-background, #eeeff3);
 }
 .bodyRow[data-selected]{

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.18",
+  "version": "0.37.19",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "8901426ca6a1c3525d9f7ba8c7fb3d0de42041d3"
+  "gitHead": "20705cda6956b2cfe72239357c1e93b55bc3c437"
 }

package/src/components/Table/Table.tsx

@@ -173,8 +173,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         enableSelection,
         enableSelectPinned,
         expanding,
+        rowSelectionAppearance: rowSelectionProp?.appearance,
       }),
-    [columnDefinitions, enableSelection, enableSelectPinned, expanding],
+    [columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionProp?.appearance],
   );
   const pinnedGroups = useMemo(() => getPinnedGroups(allTableColumns), [allTableColumns]);
 
@@ -308,6 +309,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     enableSelection,
     enableSelectPinned,
     expanding,
+    rowSelectionAppearance: rowSelectionProp?.appearance,
   });
 
   const handleOnRefresh = useCallback(() => {
@@ -533,7 +535,13 @@ 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} />
+                      <BodyRow
+                        key={row.id}
+                        row={row}
+                        rowAutoHeight={rowAutoHeight}
+                        columnOrder={columnOrder}
+                        disabledRowAppearance={rowSelectionProp?.appearance}
+                      />
                     ))}
                   </SkeletonContextProvider>
                 ) : (
@@ -556,6 +564,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                             rowAutoHeight={rowAutoHeight}
                             columnOrder={columnOrder}
                             enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                            disabledRowAppearance={rowSelectionProp?.appearance}
                           />
                         ))}
                       </div>
@@ -569,6 +578,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                         rowAutoHeight={rowAutoHeight}
                         columnOrder={columnOrder}
                         enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
+                        disabledRowAppearance={rowSelectionProp?.appearance}
                       />
                     ))}
 
@@ -580,6 +590,7 @@ 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,8 +74,9 @@ export function useColumnSettings<TData extends object, TFilters extends Record<
         enableSelection,
         enableSelectPinned,
         expanding,
+        rowSelectionAppearance: rowSelection?.appearance,
       }),
-    [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding],
+    [enableSelectPinned, enableSelection, enabledColumnsDefinitions, expanding, rowSelection?.appearance],
   );
 
   const areAllColumnsEnabled = enabledColumns.length === configurableColumns.length;

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

@@ -5,7 +5,7 @@ import { SkeletonText } from '@snack-uikit/skeleton';
 
 import { getSelectionCellColumnDef, getTreeColumnDef } from '../../../helperComponents';
 import { ColumnDefinition } from '../../../types';
-import { TableProps } from '../../types';
+import { RowAppearance, TableProps } from '../../types';
 import styles from '../styles.module.scss';
 
 type UseLoadingTableProps<TData extends object> = {
@@ -15,6 +15,7 @@ type UseLoadingTableProps<TData extends object> = {
   enableSelection?: boolean;
   enableSelectPinned?: boolean;
   expanding?: TableProps<TData>['expanding'];
+  rowSelectionAppearance?: RowAppearance;
 };
 
 function CellSkeleton() {
@@ -28,6 +29,7 @@ export function useLoadingTable<TData extends object>({
   enableSelection,
   enableSelectPinned,
   expanding,
+  rowSelectionAppearance,
 }: UseLoadingTableProps<TData>) {
   const data = useMemo(() => Array.from({ length: pageSize }).map(() => ({}) as TData), [pageSize]);
   const columns = useMemo(() => {
@@ -49,7 +51,11 @@ export function useLoadingTable<TData extends object>({
 
     // for tree column
     if (expanding) {
-      const treeColumnDef = getTreeColumnDef({ ...expanding.expandingColumnDefinition, enableSelection });
+      const treeColumnDef = getTreeColumnDef({
+        ...expanding.expandingColumnDefinition,
+        enableSelection,
+        rowSelectionAppearance,
+      });
       const loadingTreeColumn = {
         ...treeColumnDef,
         cell: () => <CellSkeleton />,
@@ -59,7 +65,7 @@ export function useLoadingTable<TData extends object>({
     }
 
     return cols;
-  }, [columnDefinitions, enableSelection, enableSelectPinned, expanding]);
+  }, [columnDefinitions, enableSelection, enableSelectPinned, expanding, rowSelectionAppearance]);
 
   const loadingTable = useReactTable<TData>({
     data,

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

@@ -1,12 +1,13 @@
 import { getSelectionCellColumnDef, getTreeColumnDef } from '../../../helperComponents';
 import { ColumnDefinition } from '../../../types';
-import { TableProps } from '../../types';
+import { RowAppearance, 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>({
@@ -14,13 +15,17 @@ 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 }), ...cols];
+    cols = [
+      getTreeColumnDef({ ...expanding.expandingColumnDefinition, enableSelection, rowSelectionAppearance }),
+      ...cols,
+    ];
   }
   return cols;
 }

package/src/components/types.ts

@@ -22,6 +22,11 @@ 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[];
@@ -69,6 +74,7 @@ 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>: Колбэк на выбор строк
    *  */
@@ -78,6 +84,7 @@ 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/RowActionsCell/styles.module.scss

@@ -26,8 +26,6 @@
 .rowActionsCellWrap {
   --offset: 0px;
 
-  cursor: pointer;
-
   display: flex;
   align-items: center;
   justify-content: center;

package/src/helperComponents/Cells/SelectionCell/SelectionCell.tsx

@@ -64,7 +64,7 @@ export function getSelectionCellColumnDef<TData>(enableSelectPinned: boolean): C
 
         globalThis.getSelection()?.removeAllRanges();
 
-        if (e.shiftKey) {
+        if (e.shiftKey && isMulti) {
           const { rows, rowsById } = table.getRowModel();
           const rowsToToggle = getRowsToToggle(
             rows,

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

@@ -6,6 +6,7 @@ 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';
@@ -42,6 +43,7 @@ export type TreeColumnDefinitionProps<TData> = TreeColumnDef | TreeColumnDefWith
 
 type TreeColDefProps<TData> = TreeColumnDefinitionProps<TData> & {
   enableSelection?: boolean;
+  rowSelectionAppearance?: RowAppearance;
 };
 
 /** Вспомогательная функция для создания ячейки со статусом */
@@ -54,6 +56,7 @@ 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;
@@ -69,6 +72,8 @@ 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--) {
@@ -181,7 +186,7 @@ export function getTreeColumnDef<TData>({
             data-selected={isRowSelected || undefined}
             data-multiselect={isMultiSelect || undefined}
           >
-            {showToggle && (
+            {showToggle && !isToggleHidden && (
               <div tabIndex={-1} className={styles.treeCheckboxWrap}>
                 {isMultiSelect ? (
                   <Checkbox

package/src/helperComponents/Rows/BodyRow.tsx

@@ -2,6 +2,7 @@ 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';
@@ -25,6 +26,7 @@ export type BodyRowProps<TData> = Pick<RowProps, 'rowAutoHeight'> & {
   onRowClick?: RowClickHandler<TData>;
   columnOrder: ColumnOrder;
   enableColumnsOrderSortByDrag?: boolean;
+  disabledRowAppearance?: RowAppearance;
 };
 
 export function BodyRow<TData>({
@@ -33,6 +35,7 @@ export function BodyRow<TData>({
   rowAutoHeight,
   columnOrder,
   enableColumnsOrderSortByDrag,
+  disabledRowAppearance = RowAppearance.Disabled,
 }: BodyRowProps<TData>) {
   const { leftPinned, rightPinned, unpinned } = useRowCells(row);
 
@@ -64,6 +67,7 @@ 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

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