@snack-uikit/table 0.37.35 → 0.37.36

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.37.36 (2026-02-20)
+
+
+### Bug Fixes
+
+* **PDS-3571:** fix table row selection from toolbar with pinned rows ([bfa48f1](https://github.com/cloud-ru-tech/snack-uikit/commit/bfa48f1cfd8db63b3f06eb8647a7dd19b5887ef9))
+
+
+
+
+
 ## <small>0.37.35 (2026-02-18)</small>
 
 ### Only dependencies have been changed

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

@@ -175,8 +175,8 @@ function Table(_a) {
     if ((rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) !== undefined) {
       isCurrentRowSelected = typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
     }
-    return isParentSelected && isCurrentRowSelected;
-  }, [rowSelectionProp]);
+    return isParentSelected && isCurrentRowSelected && (row.getIsPinned() && enableSelectPinned || !row.getIsPinned());
+  }, [rowSelectionProp, enableSelectPinned]);
   const table = (0, react_table_1.useReactTable)({
     data,
     columns: enabledTableColumns,
@@ -266,22 +266,11 @@ function Table(_a) {
   })) : undefined, [bulkActionsProp, enableSelection, table]);
   const isAllRowsMode = toolbarCheckBoxMode === types_1.ToolbarCheckBoxMode.AllRows;
   const handleOnToolbarCheck = (0, react_1.useCallback)(() => {
-    if (!loading && !enableSelectPinned && table.getTopRows().length) {
-      const centerRows = table.getCenterRows();
-      const isSomeRowsSelected = isAllRowsMode ? table.getIsSomeRowsSelected() : table.getIsSomePageRowsSelected();
-      const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
-      if (isAllCenterRowsSelected) {
-        table.resetRowSelection();
-        return;
-      }
-      centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
-      return;
-    }
     if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
       isAllRowsMode ? table.toggleAllRowsSelected() : table.toggleAllPageRowsSelected();
       return;
     }
-  }, [isAllRowsMode, loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
+  }, [isAllRowsMode, loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
   const columnSizeVarsRef = (0, react_1.useRef)();
   const headers = table.getFlatHeaders();
   const columnSizes = (0, react_1.useMemo)(() => {
@@ -493,7 +482,7 @@ function Table(_a) {
                     rowAutoHeight: rowAutoHeight,
                     columnOrder: columnOrder,
                     enableColumnsOrderSortByDrag: enableColumnsOrderSortByDrag,
-                    disabledRowAppearance: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.appearance
+                    disabledRowAppearance: types_1.RowAppearance.HideToggler
                   }, row.id))
                 }) : null, centerRows.map(row => (0, jsx_runtime_1.jsx)(helperComponents_1.BodyRow, {
                   row: row,

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

@@ -110,18 +110,18 @@
 .bodyRow[data-clickable]{
   cursor:pointer;
 }
-.bodyRow:not([data-disabled]):hover::before{
+.bodyRow:not([data-row-appearance=disabled]):hover::before{
   height:0;
 }
-.bodyRow:not([data-disabled]):not([data-selected]):hover, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened]{
+.bodyRow:not([data-row-appearance=disabled]):not([data-selected]):hover, .bodyRow:not([data-row-appearance=disabled]):not([data-selected])[data-actions-opened]{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
 }
-.bodyRow:not([data-disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
+.bodyRow:not([data-row-appearance=disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-row-appearance=disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:inherit;
 }
-.bodyRow:not([data-disabled]):hover + .bodyRow::before{
+.bodyRow:not([data-row-appearance=disabled]):hover + .bodyRow::before{
   height:0;
 }
 

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

@@ -24,7 +24,7 @@ import { DEFAULT_EXPANDED, DEFAULT_PAGE_SIZE, DEFAULT_ROW_SELECTION, DEFAULT_SOR
 import { CellAutoResizeContext, useCellAutoResizeController } from '../../contexts';
 import { BodyRow, ColumnsSettings, ExportButton, getColumnId, getRowActionsColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
 import { fuzzyFilter } from '../../utils';
-import { ToolbarCheckBoxMode } from '../types';
+import { RowAppearance, ToolbarCheckBoxMode } from '../types';
 import { useColumnOrderByDrag, useColumnSettings, useFilters, useLoadingTable, usePageReset, useStateControl, } from './hooks';
 import styles from './styles.module.css';
 import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, getPinnedGroups, getTableColumnsDefinitions, saveStateToLocalStorage, } from './utils';
@@ -100,8 +100,8 @@ export function Table(_a) {
             isCurrentRowSelected =
                 typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
         }
-        return isParentSelected && isCurrentRowSelected;
-    }, [rowSelectionProp]);
+        return (isParentSelected && isCurrentRowSelected && ((row.getIsPinned() && enableSelectPinned) || !row.getIsPinned()));
+    }, [rowSelectionProp, enableSelectPinned]);
     const table = useReactTable({
         data,
         columns: enabledTableColumns,
@@ -181,22 +181,11 @@ export function Table(_a) {
         : undefined, [bulkActionsProp, enableSelection, table]);
     const isAllRowsMode = toolbarCheckBoxMode === ToolbarCheckBoxMode.AllRows;
     const handleOnToolbarCheck = useCallback(() => {
-        if (!loading && !enableSelectPinned && table.getTopRows().length) {
-            const centerRows = table.getCenterRows();
-            const isSomeRowsSelected = isAllRowsMode ? table.getIsSomeRowsSelected() : table.getIsSomePageRowsSelected();
-            const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
-            if (isAllCenterRowsSelected) {
-                table.resetRowSelection();
-                return;
-            }
-            centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
-            return;
-        }
         if (!loading && (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow)) {
             isAllRowsMode ? table.toggleAllRowsSelected() : table.toggleAllPageRowsSelected();
             return;
         }
-    }, [isAllRowsMode, loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
+    }, [isAllRowsMode, loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
     const columnSizes = useMemo(() => {
@@ -310,7 +299,7 @@ export function Table(_a) {
                                 }
                             },
                         }
-                        : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: checked, indeterminate: indeterminate, 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 })] }), showPagination && (_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: checked, indeterminate: indeterminate, 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: RowAppearance.HideToggler }, 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 })] }), showPagination && (_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/helperComponents/Rows/styles.module.css

@@ -110,18 +110,18 @@
 .bodyRow[data-clickable]{
   cursor:pointer;
 }
-.bodyRow:not([data-disabled]):hover::before{
+.bodyRow:not([data-row-appearance=disabled]):hover::before{
   height:0;
 }
-.bodyRow:not([data-disabled]):not([data-selected]):hover, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened]{
+.bodyRow:not([data-row-appearance=disabled]):not([data-selected]):hover, .bodyRow:not([data-row-appearance=disabled]):not([data-selected])[data-actions-opened]{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:var(--sys-neutral-decor-hovered, #cfd2dc);
 }
-.bodyRow:not([data-disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
+.bodyRow:not([data-row-appearance=disabled]):not([data-selected]):hover .rowPinnedCells, .bodyRow:not([data-row-appearance=disabled]):not([data-selected])[data-actions-opened] .rowPinnedCells{
   background-color:color-mix(in srgb, var(--sys-neutral-accent-default, #787b8a), var(--snack-ui-table-row-background) calc((1 - var(--opacity-a008, 0.08)) * 100%));
   border-color:inherit;
 }
-.bodyRow:not([data-disabled]):hover + .bodyRow::before{
+.bodyRow:not([data-row-appearance=disabled]):hover + .bodyRow::before{
   height:0;
 }
 

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.37.35",
+  "version": "0.37.36",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -65,5 +65,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "17b72086167d3d6503e4e74142358765230478c8"
+  "gitHead": "01cbc73996330f5ecfabdb474b338cf0de112a57"
 }

package/src/components/Table/Table.tsx

@@ -50,7 +50,7 @@ import {
 } from '../../helperComponents';
 import { ColumnDefinition } from '../../types';
 import { fuzzyFilter } from '../../utils';
-import { TableProps, ToolbarCheckBoxMode } from '../types';
+import { RowAppearance, TableProps, ToolbarCheckBoxMode } from '../types';
 import {
   useColumnOrderByDrag,
   useColumnSettings,
@@ -232,9 +232,11 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
         isCurrentRowSelected =
           typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
       }
-      return isParentSelected && isCurrentRowSelected;
+      return (
+        isParentSelected && isCurrentRowSelected && ((row.getIsPinned() && enableSelectPinned) || !row.getIsPinned())
+      );
     },
-    [rowSelectionProp],
+    [rowSelectionProp, enableSelectPinned],
   );
 
   const table = useReactTable<TData>({
@@ -332,25 +334,11 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const isAllRowsMode = toolbarCheckBoxMode === ToolbarCheckBoxMode.AllRows;
 
   const handleOnToolbarCheck = useCallback(() => {
-    if (!loading && !enableSelectPinned && table.getTopRows().length) {
-      const centerRows = table.getCenterRows();
-      const isSomeRowsSelected = isAllRowsMode ? table.getIsSomeRowsSelected() : table.getIsSomePageRowsSelected();
-      const isAllCenterRowsSelected = centerRows.every(row => row.getIsSelected());
-
-      if (isAllCenterRowsSelected) {
-        table.resetRowSelection();
-        return;
-      }
-
-      centerRows.forEach(row => row.toggleSelected(isSomeRowsSelected ? true : undefined));
-      return;
-    }
-
     if (!loading && rowSelectionProp?.multiRow) {
       isAllRowsMode ? table.toggleAllRowsSelected() : table.toggleAllPageRowsSelected();
       return;
     }
-  }, [isAllRowsMode, loading, rowSelectionProp?.multiRow, table, enableSelectPinned]);
+  }, [isAllRowsMode, loading, rowSelectionProp?.multiRow, table]);
 
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
@@ -576,7 +564,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
                             rowAutoHeight={rowAutoHeight}
                             columnOrder={columnOrder}
                             enableColumnsOrderSortByDrag={enableColumnsOrderSortByDrag}
-                            disabledRowAppearance={rowSelectionProp?.appearance}
+                            disabledRowAppearance={RowAppearance.HideToggler}
                           />
                         ))}
                       </div>

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

@@ -154,7 +154,7 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     cursor: pointer;
   }
 
-  &:not([data-disabled]) {
+  &:not([data-row-appearance='disabled']) {
     &:hover {
       &::before {
         height: 0;