@snack-uikit/table 0.28.7 → 0.30.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.30.0 (2025-02-26)
+
+
+### Features
+
+* **PDS-1487:** freeze columns size on resize ([f5f5694](https://github.com/cloud-ru-tech/snack-uikit/commit/f5f56948a5e0ba42f071a66e2de225465f67e980))
+
+
+
+
+
+# 0.29.0 (2025-02-25)
+
+
+### Features
+
+* **PDS-569:** table bulk rows multiselect with shift key ([e5802e3](https://github.com/cloud-ru-tech/snack-uikit/commit/e5802e390c0beeb0d4cae20235f3e82fccb83b24))
+
+
+
+
+
 ## 0.28.7 (2025-02-25)
 
 ### Only dependencies have been changed

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

@@ -130,12 +130,12 @@ function Table(_a) {
   }, [tableColumns]);
   const enableRowSelection = (0, react_1.useCallback)(row => {
     const parent = row.getParentRow();
-    const isParentEnable = parent ? parent.getCanSelect() : true;
-    let isCurrentRowSelectionEnable = true;
+    const isParentSelected = parent ? parent.getCanSelect() : true;
+    let isCurrentRowSelected = true;
     if ((rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) !== undefined) {
-      isCurrentRowSelectionEnable = typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
+      isCurrentRowSelected = typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
     }
-    return isParentEnable && isCurrentRowSelectionEnable;
+    return isParentSelected && isCurrentRowSelected;
   }, [rowSelectionProp]);
   const table = (0, react_table_1.useReactTable)({
     data,
@@ -167,6 +167,7 @@ function Table(_a) {
     onGlobalFilterChange,
     getRowId,
     onRowSelectionChange,
+    enableGrouping: true,
     enableRowSelection,
     enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
     enableFilters: true,
@@ -209,7 +210,7 @@ function Table(_a) {
       return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, table.getState().rowSelection, table.resetRowSelection);
     }
   })) : undefined, [bulkActionsProp, enableSelection, table]);
-  const handleOnCheck = (0, react_1.useCallback)(() => {
+  const handleOnToolbarCheck = (0, react_1.useCallback)(() => {
     if (!loading && !enableSelectPinned && table.getTopRows().length) {
       const centerRows = table.getCenterRows();
       const isSomeRowsSelected = table.getIsSomePageRowsSelected();
@@ -228,10 +229,17 @@ function Table(_a) {
   }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
   const columnSizeVarsRef = (0, react_1.useRef)();
   const headers = table.getFlatHeaders();
-  const columnSizeVars = (0, react_1.useMemo)(() => {
+  const columnSizes = (0, react_1.useMemo)(() => {
     var _a;
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes = {};
+    const vars = {};
+    const realSizes = {};
+    const resizedColumnIndex = headers.findIndex(_ref => {
+      let {
+        column
+      } = _ref;
+      return column.getIsResizing();
+    });
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
       const {
@@ -240,8 +248,8 @@ function Table(_a) {
       } = (0, utils_3.getColumnStyleVars)(header.id);
       const originalColDef = originalColumnDefs.find(col => (0, helperComponents_1.getColumnId)(header) === col.id);
       if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-        colSizes[flexKey] = '100%';
+        vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+        vars[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
         let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
@@ -260,12 +268,9 @@ function Table(_a) {
         if (header.column.getCanResize()) {
           const currentSize = header.getSize();
           const colDefSize = header.column.columnDef.size;
-          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-          if (prevSize === '100%' && currentSize !== colDefSize) {
-            const realSize = (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id);
-            table.setColumnSizing(old => Object.assign(Object.assign({}, old), {
-              [header.id]: realSize
-            }));
+          if (currentSize !== colDefSize || i < resizedColumnIndex && prevSize === '100%') {
+            const realSize = prevSize === '100%' ? (0, utils_3.getCurrentlyConfiguredHeaderWidth)(header.id) : currentSize;
+            realSizes[header.id] = realSize;
             size = `${realSize}px`;
           }
         }
@@ -276,11 +281,14 @@ function Table(_a) {
             size
           });
         }
-        colSizes[sizeKey] = size;
-        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        vars[sizeKey] = size;
+        vars[flexKey] = size === '100%' ? 'unset' : '0';
       }
     }
-    return colSizes;
+    return {
+      vars,
+      realSizes
+    };
     /*
       effect must be called only on columnSizingInfo.isResizingColumn changes
       to reduce unnecessary recalculations
@@ -290,8 +298,11 @@ function Table(_a) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
   (0, react_1.useEffect)(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+    if (Object.keys(columnSizes.realSizes).length) {
+      table.setColumnSizing(old => Object.assign(Object.assign({}, old), columnSizes.realSizes));
+    }
+    columnSizeVarsRef.current = columnSizes.vars;
+  }, [columnSizes, table]);
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
   const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -349,7 +360,7 @@ function Table(_a) {
           selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single',
           checked: table.getIsAllPageRowsSelected(),
           indeterminate: table.getIsSomePageRowsSelected(),
-          onCheck: enableSelection ? handleOnCheck : undefined,
+          onCheck: enableSelection ? handleOnToolbarCheck : undefined,
           outline: outline,
           after: toolbarAfter || exportSettings ? (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, {
             children: [toolbarAfter, exportSettings && (0, jsx_runtime_1.jsx)(helperComponents_1.ExportButton, {
@@ -373,7 +384,7 @@ function Table(_a) {
           ref: scrollContainerRef,
           children: [(0, jsx_runtime_1.jsx)("div", {
             className: styles_module_scss_1.default.tableContent,
-            style: columnSizeVars,
+            style: columnSizes.vars,
             children: (0, jsx_runtime_1.jsx)(helperComponents_1.TableContext.Provider, {
               value: {
                 table

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

@@ -12,12 +12,15 @@ function getCurrentlyConfiguredHeaderWidth(id) {
   if ((0, utils_1.isBrowser)()) {
     const cell = document.querySelector(`[data-header-id="${id}"]`);
     const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
-    if (cell && resizeHandler) {
+    if (cell) {
       const {
         width
       } = cell.getBoundingClientRect();
-      const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-      return width + offset;
+      if (resizeHandler) {
+        const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+        return width + offset;
+      }
+      return width;
     }
   }
   return 0;

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

@@ -1,13 +1,5 @@
 "use strict";
 
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
 var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
   return mod && mod.__esModule ? mod : {
     "default": mod
@@ -21,31 +13,32 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const toggles_1 = require("@snack-uikit/toggles");
 const constants_1 = require("../../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function SelectionCell(_a) {
-  var {
-      isMulti,
-      onChange
-    } = _a,
-    props = __rest(_a, ["isMulti", "onChange"]);
-  const handleCellClick = e => {
-    e.stopPropagation();
-    onChange(props.checked);
+function getRowsToToggle(rows, clickedRowId, previousClickedRowId) {
+  const rowsToToggle = [];
+  const processedRowsMap = {
+    [clickedRowId]: false,
+    [previousClickedRowId]: false
   };
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    (0, jsx_runtime_1.jsx)("div", {
-      onClick: handleCellClick,
-      className: styles_module_scss_1.default.selectionCell,
-      "data-test-id": constants_1.TEST_IDS.rowSelect,
-      children: isMulti ? (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, Object.assign({}, props, {
-        size: 's'
-      })) : (0, jsx_runtime_1.jsx)(toggles_1.Radio, Object.assign({}, props, {
-        size: 's'
-      }))
-    })
-  );
+  const engagedRows = [clickedRowId, previousClickedRowId];
+  for (const row of rows) {
+    if (engagedRows.includes(row.id)) {
+      if (previousClickedRowId === '') {
+        rowsToToggle.push(row);
+        break;
+      }
+      processedRowsMap[row.id] = true;
+    }
+    if ((processedRowsMap[clickedRowId] || processedRowsMap[previousClickedRowId]) && !row.getIsGrouped()) {
+      rowsToToggle.push(row);
+    }
+    if (processedRowsMap[clickedRowId] && processedRowsMap[previousClickedRowId]) {
+      break;
+    }
+  }
+  return rowsToToggle;
 }
 function getSelectionCellColumnDef(enableSelectPinned) {
+  let previousClickedRowId = '';
   return {
     id: 'selectionCell',
     pinned: constants_1.COLUMN_PIN_POSITION.Left,
@@ -64,11 +57,39 @@ function getSelectionCellColumnDef(enableSelectPinned) {
         enableMultiRowSelection
       } = table.options;
       const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;
-      return (0, jsx_runtime_1.jsx)(SelectionCell, {
-        isMulti: isMulti,
-        checked: row.getIsSelected(),
-        onChange: row.getToggleSelectedHandler()
-      });
+      const checked = row.getIsSelected();
+      const handleCellClick = e => {
+        var _a, _b;
+        e.stopPropagation();
+        (_a = globalThis.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+        if (e.shiftKey) {
+          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;
+          rowsToToggle.forEach(row => row.toggleSelected(isSelected));
+        } else {
+          row.toggleSelected(!checked);
+        }
+        previousClickedRowId = row.id;
+      };
+      return (
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        (0, jsx_runtime_1.jsx)("div", {
+          onClick: handleCellClick,
+          className: styles_module_scss_1.default.selectionCell,
+          "data-test-id": constants_1.TEST_IDS.rowSelect,
+          children: isMulti ? (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, {
+            size: 's',
+            checked: checked
+          }) : (0, jsx_runtime_1.jsx)(toggles_1.Radio, {
+            size: 's',
+            checked: checked
+          })
+        })
+      );
     },
     meta: {
       skipOnExport: true

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

@@ -65,13 +65,13 @@ export function Table(_a) {
     }, [tableColumns]);
     const enableRowSelection = useCallback((row) => {
         const parent = row.getParentRow();
-        const isParentEnable = parent ? parent.getCanSelect() : true;
-        let isCurrentRowSelectionEnable = true;
+        const isParentSelected = parent ? parent.getCanSelect() : true;
+        let isCurrentRowSelected = true;
         if ((rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable) !== undefined) {
-            isCurrentRowSelectionEnable =
+            isCurrentRowSelected =
                 typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
         }
-        return isParentEnable && isCurrentRowSelectionEnable;
+        return isParentSelected && isCurrentRowSelected;
     }, [rowSelectionProp]);
     const table = useReactTable({
         data,
@@ -98,6 +98,7 @@ export function Table(_a) {
         onGlobalFilterChange,
         getRowId,
         onRowSelectionChange,
+        enableGrouping: true,
         enableRowSelection,
         enableMultiRowSelection: rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow,
         enableFilters: true,
@@ -135,7 +136,7 @@ export function Table(_a) {
     const bulkActions = useMemo(() => enableSelection
         ? bulkActionsProp === null || bulkActionsProp === void 0 ? void 0 : bulkActionsProp.map(action => (Object.assign(Object.assign({}, action), { onClick: () => { var _a; return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, table.getState().rowSelection, table.resetRowSelection); } })))
         : undefined, [bulkActionsProp, enableSelection, table]);
-    const handleOnCheck = useCallback(() => {
+    const handleOnToolbarCheck = useCallback(() => {
         if (!loading && !enableSelectPinned && table.getTopRows().length) {
             const centerRows = table.getCenterRows();
             const isSomeRowsSelected = table.getIsSomePageRowsSelected();
@@ -154,17 +155,19 @@ export function Table(_a) {
     }, [loading, rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow, table, enableSelectPinned]);
     const columnSizeVarsRef = useRef();
     const headers = table.getFlatHeaders();
-    const columnSizeVars = useMemo(() => {
+    const columnSizes = useMemo(() => {
         var _a;
         const originalColumnDefs = table._getColumnDefs();
-        const colSizes = {};
+        const vars = {};
+        const realSizes = {};
+        const resizedColumnIndex = headers.findIndex(({ column }) => column.getIsResizing());
         for (let i = 0; i < headers.length; i++) {
             const header = headers[i];
             const { sizeKey, flexKey } = getColumnStyleVars(header.id);
             const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
             if (header.id === 'snack_predefined_statusColumn' && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.header) && !(originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableSorting)) {
-                colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-                colSizes[flexKey] = '100%';
+                vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+                vars[flexKey] = '100%';
             }
             else {
                 const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
@@ -181,21 +184,20 @@ export function Table(_a) {
                 if (header.column.getCanResize()) {
                     const currentSize = header.getSize();
                     const colDefSize = header.column.columnDef.size;
-                    size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-                    if (prevSize === '100%' && currentSize !== colDefSize) {
-                        const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-                        table.setColumnSizing(old => (Object.assign(Object.assign({}, old), { [header.id]: realSize })));
+                    if (currentSize !== colDefSize || (i < resizedColumnIndex && prevSize === '100%')) {
+                        const realSize = prevSize === '100%' ? getCurrentlyConfiguredHeaderWidth(header.id) : currentSize;
+                        realSizes[header.id] = realSize;
                         size = `${realSize}px`;
                     }
                 }
                 if (isResizeSavedToStore) {
                     saveStateToLocalStorage({ id: savedState.id, columnId: header.id, size });
                 }
-                colSizes[sizeKey] = size;
-                colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+                vars[sizeKey] = size;
+                vars[flexKey] = size === '100%' ? 'unset' : '0';
             }
         }
-        return colSizes;
+        return { vars, realSizes };
         /*
           effect must be called only on columnSizingInfo.isResizingColumn changes
           to reduce unnecessary recalculations
@@ -207,8 +209,11 @@ export function Table(_a) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
     useEffect(() => {
-        columnSizeVarsRef.current = columnSizeVars;
-    }, [columnSizeVars]);
+        if (Object.keys(columnSizes.realSizes).length) {
+            table.setColumnSizing(old => (Object.assign(Object.assign({}, old), columnSizes.realSizes)));
+        }
+        columnSizeVarsRef.current = columnSizes.vars;
+    }, [columnSizes, table]);
     const tableRows = table.getRowModel().rows;
     const tableCenterRows = table.getCenterRows();
     const tableFilteredRows = table.getFilteredRowModel().rows;
@@ -244,7 +249,7 @@ export function Table(_a) {
                                 onChange: onGlobalFilterChange,
                                 loading: search === null || search === void 0 ? void 0 : search.loading,
                                 placeholder: (search === null || search === void 0 ? void 0 : search.placeholder) || t('searchPlaceholder'),
-                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizeVars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
+                            }, className: styles.toolbar, onRefresh: onRefresh ? handleOnRefresh : undefined, bulkActions: bulkActions, selectionMode: (rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.multiRow) ? 'multiple' : 'single', checked: table.getIsAllPageRowsSelected(), indeterminate: table.getIsSomePageRowsSelected(), onCheck: enableSelection ? handleOnToolbarCheck : undefined, outline: outline, after: toolbarAfter || exportSettings ? (_jsxs(_Fragment, { children: [toolbarAfter, exportSettings && (_jsx(ExportButton, { settings: exportSettings, columnDefinitions: columnDefinitions, data: data, topRows: filteredTopRows, centerRows: centerRows }))] })) : undefined, moreActions: moreActions, filterRow: columnFilters, "data-test-id": TEST_IDS.toolbar }) })), _jsx("div", { className: styles.scrollWrapper, "data-outline": outline || undefined, children: _jsxs(Scroll, { size: 's', className: styles.table, ref: scrollContainerRef, children: [_jsx("div", { className: styles.tableContent, style: columnSizes.vars, children: _jsx(TableContext.Provider, { value: { table }, children: loading ? (_jsxs(SkeletonContextProvider, { loading: true, children: [_jsx(HeaderRow, {}), loadingTableRows.map(row => (_jsx(BodyRow, { row: row }, row.id)))] })) : (_jsxs(_Fragment, { children: [centerRows.length || filteredTopRows.length ? _jsx(HeaderRow, {}) : null, filteredTopRows.length ? (_jsx("div", { className: styles.topRowWrapper, children: filteredTopRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))) })) : null, centerRows.map(row => (_jsx(BodyRow, { row: row, onRowClick: onRowClick }, row.id))), _jsx(TableEmptyState, { emptyStates: emptyStates, dataError: dataError, dataFiltered: dataFiltered || Boolean(table.getState().globalFilter), tableRowsLength: tableRows.length + filteredTopRows.length })] })) }) }), _jsx("div", { className: styles.scrollStub, ref: scrollRef })] }) }), !suppressPagination && (_jsx(TablePagination, { table: table, options: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.options, optionsLabel: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsLabel, pageCount: pageCount, optionsRender: paginationProp === null || paginationProp === void 0 ? void 0 : paginationProp.optionsRender }))] })) }));
 }
 Table.getStatusColumnDef = getStatusColumnDef;
 Table.statusAppearances = STATUS_APPEARANCE;

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

@@ -3,10 +3,13 @@ export function getCurrentlyConfiguredHeaderWidth(id) {
     if (isBrowser()) {
         const cell = document.querySelector(`[data-header-id="${id}"]`);
         const resizeHandler = cell === null || cell === void 0 ? void 0 : cell.querySelector('[data-test-id="table__header-cell-resize-handle-moving-part"]');
-        if (cell && resizeHandler) {
+        if (cell) {
             const { width } = cell.getBoundingClientRect();
-            const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-            return width + offset;
+            if (resizeHandler) {
+                const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+                return width + offset;
+            }
+            return width;
         }
     }
     return 0;

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

@@ -1,29 +1,33 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import styles from './styles.module.css';
-function SelectionCell(_a) {
-    var { isMulti, onChange } = _a, props = __rest(_a, ["isMulti", "onChange"]);
-    const handleCellClick = (e) => {
-        e.stopPropagation();
-        onChange(props.checked);
+function getRowsToToggle(rows, clickedRowId, previousClickedRowId) {
+    const rowsToToggle = [];
+    const processedRowsMap = {
+        [clickedRowId]: false,
+        [previousClickedRowId]: false,
     };
-    return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    _jsx("div", { onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect, children: isMulti ? _jsx(Checkbox, Object.assign({}, props, { size: 's' })) : _jsx(Radio, Object.assign({}, props, { size: 's' })) }));
+    const engagedRows = [clickedRowId, previousClickedRowId];
+    for (const row of rows) {
+        if (engagedRows.includes(row.id)) {
+            if (previousClickedRowId === '') {
+                rowsToToggle.push(row);
+                break;
+            }
+            processedRowsMap[row.id] = true;
+        }
+        if ((processedRowsMap[clickedRowId] || processedRowsMap[previousClickedRowId]) && !row.getIsGrouped()) {
+            rowsToToggle.push(row);
+        }
+        if (processedRowsMap[clickedRowId] && processedRowsMap[previousClickedRowId]) {
+            break;
+        }
+    }
+    return rowsToToggle;
 }
 export function getSelectionCellColumnDef(enableSelectPinned) {
+    let previousClickedRowId = '';
     return {
         id: 'selectionCell',
         pinned: COLUMN_PIN_POSITION.Left,
@@ -37,7 +41,25 @@ export function getSelectionCellColumnDef(enableSelectPinned) {
                 return null;
             const { enableMultiRowSelection } = table.options;
             const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;
-            return (_jsx(SelectionCell, { isMulti: isMulti, checked: row.getIsSelected(), onChange: row.getToggleSelectedHandler() }));
+            const checked = row.getIsSelected();
+            const handleCellClick = (e) => {
+                var _a, _b;
+                e.stopPropagation();
+                (_a = globalThis.getSelection()) === null || _a === void 0 ? void 0 : _a.removeAllRanges();
+                if (e.shiftKey) {
+                    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;
+                    rowsToToggle.forEach(row => row.toggleSelected(isSelected));
+                }
+                else {
+                    row.toggleSelected(!checked);
+                }
+                previousClickedRowId = row.id;
+            };
+            return (
+            // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+            _jsx("div", { onClick: handleCellClick, className: styles.selectionCell, "data-test-id": TEST_IDS.rowSelect, children: isMulti ? _jsx(Checkbox, { size: 's', checked: checked }) : _jsx(Radio, { size: 's', checked: checked }) }));
         },
         meta: {
             skipOnExport: true,

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.28.7",
+  "version": "0.30.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -61,5 +61,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "ad5274413320bf7880ba3c2d1124610281d0de81"
+  "gitHead": "afb93f86dbab6039f4c267a9d0e85350b59053c5"
 }

package/src/components/Table/Table.tsx

@@ -144,13 +144,13 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const enableRowSelection = useCallback(
     (row: Row<TData>) => {
       const parent = row.getParentRow();
-      const isParentEnable = parent ? parent.getCanSelect() : true;
-      let isCurrentRowSelectionEnable = true;
+      const isParentSelected = parent ? parent.getCanSelect() : true;
+      let isCurrentRowSelected = true;
       if (rowSelectionProp?.enable !== undefined) {
-        isCurrentRowSelectionEnable =
+        isCurrentRowSelected =
           typeof rowSelectionProp.enable === 'boolean' ? rowSelectionProp.enable : rowSelectionProp.enable(row);
       }
-      return isParentEnable && isCurrentRowSelectionEnable;
+      return isParentSelected && isCurrentRowSelected;
     },
     [rowSelectionProp],
   );
@@ -182,6 +182,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
 
     getRowId,
     onRowSelectionChange,
+    enableGrouping: true,
     enableRowSelection,
     enableMultiRowSelection: rowSelectionProp?.multiRow,
     enableFilters: true,
@@ -231,7 +232,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
     [bulkActionsProp, enableSelection, table],
   );
 
-  const handleOnCheck = useCallback(() => {
+  const handleOnToolbarCheck = useCallback(() => {
     if (!loading && !enableSelectPinned && table.getTopRows().length) {
       const centerRows = table.getCenterRows();
       const isSomeRowsSelected = table.getIsSomePageRowsSelected();
@@ -255,9 +256,11 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   const columnSizeVarsRef = useRef<Record<string, string>>();
   const headers = table.getFlatHeaders();
 
-  const columnSizeVars = useMemo(() => {
+  const columnSizes = useMemo(() => {
     const originalColumnDefs = table._getColumnDefs();
-    const colSizes: Record<string, string> = {};
+    const vars: Record<string, string> = {};
+    const realSizes: Record<string, number> = {};
+    const resizedColumnIndex = headers.findIndex(({ column }) => column.getIsResizing());
 
     for (let i = 0; i < headers.length; i++) {
       const header = headers[i];
@@ -266,8 +269,8 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
       const originalColDef = originalColumnDefs.find(col => getColumnId(header) === col.id);
 
       if (header.id === 'snack_predefined_statusColumn' && !originalColDef?.header && !originalColDef?.enableSorting) {
-        colSizes[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
-        colSizes[flexKey] = '100%';
+        vars[sizeKey] = 'var(--size-table-cell-status-indicator-horizontal)';
+        vars[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef?.size;
         let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
@@ -288,12 +291,9 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           const currentSize = header.getSize();
           const colDefSize = header.column.columnDef.size;
 
-          size = currentSize === colDefSize ? initSize : `${currentSize}px`;
-
-          if (prevSize === '100%' && currentSize !== colDefSize) {
-            const realSize = getCurrentlyConfiguredHeaderWidth(header.id);
-            table.setColumnSizing(old => ({ ...old, [header.id]: realSize }));
-
+          if (currentSize !== colDefSize || (i < resizedColumnIndex && prevSize === '100%')) {
+            const realSize = prevSize === '100%' ? getCurrentlyConfiguredHeaderWidth(header.id) : currentSize;
+            realSizes[header.id] = realSize;
             size = `${realSize}px`;
           }
         }
@@ -302,12 +302,12 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
           saveStateToLocalStorage({ id: savedState.id, columnId: header.id, size });
         }
 
-        colSizes[sizeKey] = size;
-        colSizes[flexKey] = size === '100%' ? 'unset' : '0';
+        vars[sizeKey] = size;
+        vars[flexKey] = size === '100%' ? 'unset' : '0';
       }
     }
 
-    return colSizes;
+    return { vars, realSizes };
     /*
       effect must be called only on columnSizingInfo.isResizingColumn changes
       to reduce unnecessary recalculations
@@ -320,8 +320,12 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
   }, [table.getState().columnSizingInfo.isResizingColumn, headers, table.getTotalSize()]);
 
   useEffect(() => {
-    columnSizeVarsRef.current = columnSizeVars;
-  }, [columnSizeVars]);
+    if (Object.keys(columnSizes.realSizes).length) {
+      table.setColumnSizing(old => ({ ...old, ...columnSizes.realSizes }));
+    }
+
+    columnSizeVarsRef.current = columnSizes.vars;
+  }, [columnSizes, table]);
 
   const tableRows = table.getRowModel().rows;
   const tableCenterRows = table.getCenterRows();
@@ -385,7 +389,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
               selectionMode={rowSelectionProp?.multiRow ? 'multiple' : 'single'}
               checked={table.getIsAllPageRowsSelected()}
               indeterminate={table.getIsSomePageRowsSelected()}
-              onCheck={enableSelection ? handleOnCheck : undefined}
+              onCheck={enableSelection ? handleOnToolbarCheck : undefined}
               outline={outline}
               after={
                 toolbarAfter || exportSettings ? (
@@ -412,7 +416,7 @@ export function Table<TData extends object, TFilters extends FiltersState = Reco
 
         <div className={styles.scrollWrapper} data-outline={outline || undefined}>
           <Scroll size='s' className={styles.table} ref={scrollContainerRef}>
-            <div className={styles.tableContent} style={columnSizeVars}>
+            <div className={styles.tableContent} style={columnSizes.vars}>
               <TableContext.Provider value={{ table }}>
                 {loading ? (
                   <SkeletonContextProvider loading>

package/src/components/Table/utils.ts

@@ -7,10 +7,15 @@ export function getCurrentlyConfiguredHeaderWidth(id: string): number {
       '[data-test-id="table__header-cell-resize-handle-moving-part"]',
     );
 
-    if (cell && resizeHandler) {
+    if (cell) {
       const { width } = cell.getBoundingClientRect();
-      const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
-      return width + offset;
+
+      if (resizeHandler) {
+        const offset = parseInt(resizeHandler.style.getPropertyValue('--offset'));
+        return width + offset;
+      }
+
+      return width;
     }
   }
 

package/src/helperComponents/Cells/HeaderCell/styles.module.scss

@@ -58,7 +58,7 @@
     left: 0;
     transform: translateX(-50%);
 
-    width: calc(100% + styles-tokens-table.$dimension-4m);
+    width: calc(100% + #{styles-tokens-table.$dimension-4m});
     height: 100%;
   }
 }
@@ -86,7 +86,7 @@
     left: 50%;
     transform: translateX(-50%);
 
-    width: calc(100% - styles-tokens-table.$space-table-head-separator-padding * 2);
+    width: calc(100% - #{styles-tokens-table.$space-table-head-separator-padding} * 2);
     height: styles-tokens-table.$border-width-table;
 
     background-color: styles-tokens-table.$sys-neutral-decor-default;
@@ -106,7 +106,7 @@
     &::after {
       left: 0;
       transform: none;
-      width: calc(100% - styles-tokens-table.$space-table-head-separator-padding);
+      width: calc(100% - #{styles-tokens-table.$space-table-head-separator-padding});
     }
   }
 
@@ -136,7 +136,7 @@
       }
 
       .tableHeaderResizeIndicator {
-        right: calc(styles-tokens-table.$dimension-1m / 2);
+        right: calc(#{styles-tokens-table.$dimension-1m} / 2);
       }
     }
   }

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

@@ -1,3 +1,4 @@
+import { Row } from '@tanstack/react-table';
 import { MouseEvent } from 'react';
 
 import { Checkbox, Radio } from '@snack-uikit/toggles';
@@ -6,28 +7,40 @@ import { COLUMN_PIN_POSITION, TEST_IDS } from '../../../constants';
 import { ColumnDefinition } from '../../../types';
 import styles from './styles.module.scss';
 
-type SelectionCellProps = {
-  checked: boolean;
-  onChange(checked: boolean): void;
-  isMulti?: boolean;
-};
+function getRowsToToggle<TData>(rows: Row<TData>[], clickedRowId: string, previousClickedRowId: string) {
+  const rowsToToggle: Row<TData>[] = [];
+  const processedRowsMap: Record<string, boolean> = {
+    [clickedRowId]: false,
+    [previousClickedRowId]: false,
+  };
 
-function SelectionCell({ isMulti, onChange, ...props }: SelectionCellProps) {
-  const handleCellClick = (e: MouseEvent<HTMLDivElement>) => {
-    e.stopPropagation();
+  const engagedRows = [clickedRowId, previousClickedRowId];
 
-    onChange(props.checked);
-  };
+  for (const row of rows) {
+    if (engagedRows.includes(row.id)) {
+      if (previousClickedRowId === '') {
+        rowsToToggle.push(row);
+        break;
+      }
+
+      processedRowsMap[row.id] = true;
+    }
 
-  return (
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    <div onClick={handleCellClick} className={styles.selectionCell} data-test-id={TEST_IDS.rowSelect}>
-      {isMulti ? <Checkbox {...props} size='s' /> : <Radio {...props} size='s' />}
-    </div>
-  );
+    if ((processedRowsMap[clickedRowId] || processedRowsMap[previousClickedRowId]) && !row.getIsGrouped()) {
+      rowsToToggle.push(row);
+    }
+
+    if (processedRowsMap[clickedRowId] && processedRowsMap[previousClickedRowId]) {
+      break;
+    }
+  }
+
+  return rowsToToggle;
 }
 
 export function getSelectionCellColumnDef<TData>(enableSelectPinned: boolean): ColumnDefinition<TData> {
+  let previousClickedRowId = '';
+
   return {
     id: 'selectionCell',
     pinned: COLUMN_PIN_POSITION.Left,
@@ -44,8 +57,34 @@ export function getSelectionCellColumnDef<TData>(enableSelectPinned: boolean): C
 
       const isMulti = typeof enableMultiRowSelection === 'boolean' ? enableMultiRowSelection : true;
 
+      const checked = row.getIsSelected();
+
+      const handleCellClick = (e: MouseEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+
+        globalThis.getSelection()?.removeAllRanges();
+
+        if (e.shiftKey) {
+          const { rows, rowsById } = table.getRowModel();
+          const rowsToToggle = getRowsToToggle(
+            rows,
+            row.id,
+            rows.map(r => r.id).includes(previousClickedRowId) ? previousClickedRowId : '',
+          );
+          const isSelected = !rowsById[row.id]?.getIsSelected() || false;
+          rowsToToggle.forEach(row => row.toggleSelected(isSelected));
+        } else {
+          row.toggleSelected(!checked);
+        }
+
+        previousClickedRowId = row.id;
+      };
+
       return (
-        <SelectionCell isMulti={isMulti} checked={row.getIsSelected()} onChange={row.getToggleSelectedHandler()} />
+        // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+        <div onClick={handleCellClick} className={styles.selectionCell} data-test-id={TEST_IDS.rowSelect}>
+          {isMulti ? <Checkbox size='s' checked={checked} /> : <Radio size='s' checked={checked} />}
+        </div>
       );
     },
     meta: {

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

@@ -42,8 +42,8 @@ $snack-ui-table-row-background: var(--snack-ui-table-row-background);
     content: '';
 
     position: absolute;
-    top: calc(0px - styles-tokens-table.$border-width-table);
-    bottom: calc(0px - styles-tokens-table.$border-width-table);
+    top: calc(0px - #{styles-tokens-table.$border-width-table});
+    bottom: calc(0px - #{styles-tokens-table.$border-width-table});
 
     box-sizing: border-box;
     width: styles-tokens-table.$border-width-table;