@synerise/ds-table 0.60.6 → 0.60.7

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.60.7](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.60.6...@synerise/ds-table@0.60.7) (2024-12-11)
+
+
+### Bug Fixes
+
+* **table:** bulk selection logic ([a796815](https://github.com/synerise/synerise-design/commit/a7968157686afb989e9da096e8817913a7f27130))
+
+
+
+
+
 ## [0.60.6](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.60.5...@synerise/ds-table@0.60.6) (2024-12-04)
 
 **Note:** Version bump only for package @synerise/ds-table

package/dist/TableHeader/TableSelection.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ReactText } from 'react';
-import type { Props } from './TableSelection.types';
+import { Props } from './TableSelection.types';
 declare const TableSelection: <T extends {
     key: ReactText;
     children?: T[] | undefined;

package/dist/TableHeader/TableSelection.js

@@ -10,8 +10,9 @@ import Tooltip from '@synerise/ds-tooltip';
 import Icon, { OptionVerticalM } from '@synerise/ds-icon';
 import * as S from '../Table.styles';
 import { SELECTION_ALL, SELECTION_INVERT } from '../Table';
-import { useRowKey } from '../hooks/useRowKey';
 import { isRecordSelectable } from '../utils';
+import { useRowKey } from '../hooks/useRowKey';
+import { useBulkSelectionCount } from '../hooks/useBulkSelection';
 var TableSelection = function TableSelection(_ref) {
   var dataSource = _ref.dataSource,
     dataSourceFull = _ref.dataSourceFull,
@@ -57,12 +58,12 @@ var TableSelection = function TableSelection(_ref) {
         if (Array.isArray(rowChildren)) {
           keys = [].concat(keys, rowChildren.reduce(function (acc, child) {
             var key = getRowKey(child);
-            return key && isRecordSelectable(child, checkRowSelectionStatus) ? [].concat(acc, [key]) : acc;
+            return key && (isRecordSelectable(child, checkRowSelectionStatus) || selectedRowKeys.includes(key)) ? [].concat(acc, [key]) : acc;
           }, []));
         }
         if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
-          keys = key !== undefined && isRecordSelectable(record, checkRowSelectionStatus) ? [].concat(keys, [key]) : [].concat(keys);
+          keys = key !== undefined && (isRecordSelectable(record, checkRowSelectionStatus) || selectedRowKeys.includes(key)) ? [].concat(keys, [key]) : [].concat(keys);
         }
       });
       var uniqueKeys = Array.from(new Set(keys));
@@ -72,45 +73,40 @@ var TableSelection = function TableSelection(_ref) {
   }, [childrenColumnName, dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey]);
   var unselectAll = useCallback(function () {
     if (selection) {
-      if (isShowingSubset) {
-        var selectedRowKeys = selection.selectedRowKeys;
-        var keysToUnselect = [];
-        dataSource.forEach(function (record) {
-          var rowChildren = record[childrenColumnName];
-          if (Array.isArray(rowChildren)) {
-            keysToUnselect = [].concat(keysToUnselect, rowChildren.reduce(function (acc, child) {
-              var key = getRowKey(child);
-              return key ? [].concat(acc, [key]) : acc;
-            }, []));
-          }
-          if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
-            var key = getRowKey(record);
-            keysToUnselect = key !== undefined ? [].concat(keysToUnselect, [key]) : [].concat(keysToUnselect);
-          }
-        });
-        var keysLeft = selectedRowKeys.filter(function (key) {
-          return !keysToUnselect.includes(key);
-        });
-        var rows = getRowsForKeys(keysLeft);
-        selection.onChange(keysLeft, rows);
-      } else {
-        selection.onChange([], []);
-      }
+      var selectedRowKeys = selection.selectedRowKeys,
+        checkRowSelectionStatus = selection.checkRowSelectionStatus;
+      var keysToUnselect = [];
+      dataSource.forEach(function (record) {
+        var rowChildren = record[childrenColumnName];
+        if (Array.isArray(rowChildren)) {
+          keysToUnselect = [].concat(keysToUnselect, rowChildren.reduce(function (acc, child) {
+            var key = getRowKey(child);
+            return key && isRecordSelectable(child, checkRowSelectionStatus) ? [].concat(acc, [key]) : acc;
+          }, []));
+        }
+        if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
+          var key = getRowKey(record);
+          keysToUnselect = key !== undefined && isRecordSelectable(record, checkRowSelectionStatus) ? [].concat(keysToUnselect, [key]) : [].concat(keysToUnselect);
+        }
+      });
+      var keysLeft = selectedRowKeys.filter(function (key) {
+        return !keysToUnselect.includes(key);
+      });
+      var rows = getRowsForKeys(keysLeft);
+      selection.onChange(keysLeft, rows);
     }
-  }, [dataSource, getRowKey, getRowsForKeys, isShowingSubset, selection, childrenColumnName]);
+  }, [dataSource, getRowKey, getRowsForKeys, selection, childrenColumnName]);
   var getSelectableChildren = useCallback(function (children) {
-    var selectionStatusValidator = selection && 'checkRowSelectionStatus' in selection ? selection.checkRowSelectionStatus : undefined;
+    var selectionStatusValidator = (selection == null ? void 0 : selection.checkRowSelectionStatus) || undefined;
     return children ? children.filter(function (child) {
       return isRecordSelectable(child, selectionStatusValidator) && getRowKey(child) !== undefined;
     }) : [];
-  },
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  [getRowKey, selection == null ? void 0 : selection.checkRowSelectionStatus]);
+  }, [getRowKey, selection == null ? void 0 : selection.checkRowSelectionStatus]);
   var selectInvert = useCallback(function () {
     if (dataSource && selection) {
       var selectedRowKeys = selection.selectedRowKeys,
         checkRowSelectionStatus = selection.checkRowSelectionStatus;
-      var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
+      var keys = [].concat(selectedRowKeys);
       dataSource.forEach(function (record) {
         var rowChildren = record[childrenColumnName];
         var hasChildren = Array.isArray(rowChildren);
@@ -119,7 +115,7 @@ var TableSelection = function TableSelection(_ref) {
           selectableChildren.forEach(function (child) {
             var key = getRowKey(child);
             if (selectedRowKeys.includes(key)) {
-              if (isShowingSubset) keys.splice(keys.indexOf(key), 1);
+              keys.splice(keys.indexOf(key), 1);
             } else {
               keys = [].concat(keys, [key]);
             }
@@ -127,9 +123,11 @@ var TableSelection = function TableSelection(_ref) {
         }
         if (!selectableChildren || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
+          var isSelectable = isRecordSelectable(record, checkRowSelectionStatus);
+          if (!isSelectable) return;
           if (selectedRowKeys.includes(key)) {
-            if (isShowingSubset) keys.splice(keys.indexOf(key), 1);
-          } else if (isRecordSelectable(record, checkRowSelectionStatus)) {
+            keys.splice(keys.indexOf(key), 1);
+          } else {
             keys = [].concat(keys, [key]);
           }
         }
@@ -137,50 +135,29 @@ var TableSelection = function TableSelection(_ref) {
       var rows = getRowsForKeys(keys);
       selection.onChange(keys, rows);
     }
-  }, [childrenColumnName, dataSource, selection, isShowingSubset, getRowsForKeys, getSelectableChildren, getRowKey]);
-  var isEmpty = useMemo(function () {
-    return dataSource.length === 0;
-  }, [dataSource]);
-  var allSelectableRecordsCount = useMemo(function () {
-    if (isEmpty || !selection) return 0;
-    var independentSelectionExpandedRows = selection.independentSelectionExpandedRows,
-      checkRowSelectionStatus = selection.checkRowSelectionStatus;
-    return dataSource.reduce(function (count, record) {
-      var isSelectable = +isRecordSelectable(record, checkRowSelectionStatus);
-      var rowChildren = record[childrenColumnName];
-      if (independentSelectionExpandedRows) {
-        return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length + isSelectable : count + isSelectable;
-      }
-      return Array.isArray(rowChildren) ? count + getSelectableChildren(rowChildren).length : count + isSelectable;
-    }, 0);
-  }, [childrenColumnName, dataSource, getSelectableChildren, isEmpty, selection]);
-  var allSelected = useMemo(function () {
-    if (isEmpty || !selection) return false;
-    var selectedRowKeys = selection.selectedRowKeys;
-    var selectedKeysInDataSourceCount = isShowingSubset ? dataSource.reduce(function (count, record) {
-      var rowChildren = record[childrenColumnName];
-      if (Array.isArray(rowChildren)) {
-        return rowChildren.reduce(function (childCount, child) {
-          var key = getRowKey(child);
-          return selectedRowKeys.includes(key) ? childCount + 1 : childCount;
-        }, 0);
-      }
-      if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
-        var key = getRowKey(record);
-        return selectedRowKeys.includes(key) ? count + 1 : count;
-      }
-      return count;
-    }, 0) : selectedRowKeys.length;
-    return allSelectableRecordsCount === selectedKeysInDataSourceCount;
-  }, [isEmpty, selection, isShowingSubset, dataSource, allSelectableRecordsCount, childrenColumnName, getRowKey]);
-  var selectionTooltipTitle = !allSelected ? locale == null ? void 0 : locale.selectAllTooltip : locale == null ? void 0 : locale.unselectAll;
+  }, [childrenColumnName, dataSource, selection, getRowsForKeys, getSelectableChildren, getRowKey]);
+  var _useBulkSelectionCoun = useBulkSelectionCount({
+      dataSource: dataSource,
+      selection: selection,
+      childrenColumnName: childrenColumnName,
+      rowKey: rowKey
+    }),
+    allRecordsCount = _useBulkSelectionCoun.allRecordsCount,
+    selectableRecordsCount = _useBulkSelectionCoun.selectableRecordsCount,
+    selectableAndSelectedRecordsCount = _useBulkSelectionCoun.selectableAndSelectedRecordsCount,
+    selectedRecordsCount = _useBulkSelectionCoun.selectedRecordsCount;
+  var isIndeterminate = selectedRecordsCount > 0 && allRecordsCount !== selectableRecordsCount;
+  var disabledBulkSelection = allRecordsCount === 0 || selectableRecordsCount === 0;
+  var isChecked = !disabledBulkSelection && allRecordsCount === selectableRecordsCount;
+  var isAllSelected = selectableRecordsCount === selectableAndSelectedRecordsCount;
+  var selectionTooltipTitle = !isAllSelected ? locale == null ? void 0 : locale.selectAllTooltip : locale == null ? void 0 : locale.unselectAll;
   var menuDataSource = useMemo(function () {
     var _selection$selections;
     return selection == null || (_selection$selections = selection.selections) == null ? void 0 : _selection$selections.filter(Boolean).map(function (selectionMenuElement) {
       switch (selectionMenuElement) {
         case SELECTION_ALL:
           {
-            return !allSelected ? {
+            return !isAllSelected ? {
               onClick: selectAll,
               text: locale == null ? void 0 : locale.selectAll
             } : {
@@ -204,25 +181,25 @@ var TableSelection = function TableSelection(_ref) {
           }
       }
     });
-  }, [allSelected, locale == null ? void 0 : locale.selectAll, locale == null ? void 0 : locale.selectInvert, locale == null ? void 0 : locale.unselectAll, selectAll, selectInvert, selection == null ? void 0 : selection.selections, unselectAll]);
+  }, [isAllSelected, locale == null ? void 0 : locale.selectAll, locale == null ? void 0 : locale.selectInvert, locale == null ? void 0 : locale.unselectAll, selectAll, selectInvert, selection == null ? void 0 : selection.selections, unselectAll]);
   return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: selectionTooltipTitle
   }, /*#__PURE__*/React.createElement(Button.Checkbox, {
-    disabled: isEmpty || allSelectableRecordsCount === 0,
+    disabled: disabledBulkSelection,
     "data-testid": "ds-table-batch-selection-button",
-    checked: allSelected && allSelectableRecordsCount > 0,
-    onChange: function onChange(isChecked) {
-      if (isChecked) {
+    checked: isChecked,
+    onChange: function onChange() {
+      if (!isAllSelected) {
         selectAll();
       } else {
         unselectAll();
       }
     },
-    indeterminate: (selection == null ? void 0 : selection.selectedRowKeys.length) > 0 && !allSelected
+    indeterminate: isIndeterminate
   })), (selection == null ? void 0 : selection.selections) && /*#__PURE__*/React.createElement(Dropdown, {
-    disabled: isEmpty || allSelectableRecordsCount === 0,
+    disabled: disabledBulkSelection,
     trigger: ['click'],
     overlay: /*#__PURE__*/React.createElement(S.SelectionMenu, {
       dataSource: menuDataSource

package/dist/TableHeader/TableSelection.types.d.ts

@@ -1,12 +1,12 @@
-import React from 'react';
+import { ReactText } from 'react';
 import { RowSelection, Locale } from '../Table.types';
-export interface Props<T extends {
-    key: React.ReactText;
-}> {
+export type Props<T extends {
+    key: ReactText;
+}> = {
     selection?: RowSelection<T>;
     dataSource: T[];
     dataSourceFull?: T[];
     locale?: Locale;
     rowKey?: Function | string;
     childrenColumnName: string;
-}
+};

package/dist/hooks/useBulkSelection/index.d.ts

@@ -0,0 +1 @@
+export * from './useBulkSelection';

package/dist/hooks/useBulkSelection/index.js

@@ -0,0 +1 @@
+export * from './useBulkSelection';

package/dist/hooks/useBulkSelection/useBulkSelection.d.ts

@@ -0,0 +1,12 @@
+import { ReactText } from 'react';
+import { Props as TableSelectionType } from '../../TableHeader/TableSelection.types';
+type BulkSelectionType = {
+    allRecordsCount: number;
+    selectableRecordsCount: number;
+    selectableAndSelectedRecordsCount: number;
+    selectedRecordsCount: number;
+};
+export declare const useBulkSelectionCount: <T extends {
+    key: ReactText;
+}>({ dataSource, selection, childrenColumnName, rowKey, }: TableSelectionType<T>) => BulkSelectionType;
+export {};

package/dist/hooks/useBulkSelection/useBulkSelection.js

@@ -0,0 +1,69 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { useCallback, useMemo } from 'react';
+import { useRowKey } from '../useRowKey';
+import { isRecordSelectable } from '../../utils';
+export var useBulkSelectionCount = function useBulkSelectionCount(_ref) {
+  var dataSource = _ref.dataSource,
+    selection = _ref.selection,
+    childrenColumnName = _ref.childrenColumnName,
+    rowKey = _ref.rowKey;
+  var _useRowKey = useRowKey(rowKey),
+    getRowKey = _useRowKey.getRowKey;
+  var getSelectableChildren = useCallback(function (children) {
+    var selectionStatusValidator = (selection == null ? void 0 : selection.checkRowSelectionStatus) || undefined;
+    return children ? children.filter(function (child) {
+      return isRecordSelectable(child, selectionStatusValidator) && getRowKey(child) !== undefined;
+    }) : [];
+  }, [getRowKey, selection == null ? void 0 : selection.checkRowSelectionStatus]);
+  var result = useMemo(function () {
+    var initialValue = {
+      selectableRecordsCount: 0,
+      selectableAndSelectedRecordsCount: 0,
+      selectedRecordsCount: 0
+    };
+    if (!dataSource.length || !selection) return initialValue;
+    var selectedRowKeys = selection.selectedRowKeys,
+      independentSelectionExpandedRows = selection.independentSelectionExpandedRows,
+      checkRowSelectionStatus = selection.checkRowSelectionStatus;
+    return dataSource.reduce(function (count, record) {
+      var isSelectable = +isRecordSelectable(record, checkRowSelectionStatus);
+      var rowChildren = record[childrenColumnName];
+      var selectableRecordsCount = count.selectableRecordsCount,
+        selectableAndSelectedRecordsCount = count.selectableAndSelectedRecordsCount,
+        selectedRecordsCount = count.selectedRecordsCount;
+      // selectable
+      if (independentSelectionExpandedRows) {
+        Array.isArray(rowChildren) ? selectableRecordsCount += getSelectableChildren(rowChildren).length + isSelectable : selectableRecordsCount += isSelectable;
+      } else {
+        Array.isArray(rowChildren) ? selectableRecordsCount += getSelectableChildren(rowChildren).length : selectableRecordsCount += isSelectable;
+      }
+      if (Array.isArray(rowChildren)) {
+        selectedRecordsCount += rowChildren.reduce(function (childCount, child) {
+          var key = getRowKey(child);
+          return selectedRowKeys.includes(key) ? childCount + 1 : childCount;
+        }, 0);
+        selectableAndSelectedRecordsCount += rowChildren.reduce(function (childCount, child) {
+          var key = getRowKey(child);
+          return selectedRowKeys.includes(key) && isRecordSelectable(child, checkRowSelectionStatus) ? childCount + 1 : childCount;
+        }, 0);
+      }
+      if (!Array.isArray(rowChildren) || selection.independentSelectionExpandedRows) {
+        var key = getRowKey(record);
+        selectedRecordsCount += selectedRowKeys.includes(key) ? 1 : 0;
+        selectableAndSelectedRecordsCount += selectedRowKeys.includes(key) && isRecordSelectable(record, checkRowSelectionStatus) ? 1 : 0;
+      }
+      return {
+        selectableRecordsCount: selectableRecordsCount,
+        selectableAndSelectedRecordsCount: selectableAndSelectedRecordsCount,
+        selectedRecordsCount: selectedRecordsCount
+      };
+    }, initialValue);
+  }, [childrenColumnName, dataSource, getRowKey, getSelectableChildren, selection]);
+  return _objectSpread({}, result, {
+    allRecordsCount: dataSource.length
+  });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.60.6",
+  "version": "0.60.7",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -34,12 +34,12 @@
   ],
   "types": "dist/index.d.ts",
   "dependencies": {
-    "@synerise/ds-alert": "^0.8.41",
+    "@synerise/ds-alert": "^0.8.42",
     "@synerise/ds-badge": "^0.8.22",
     "@synerise/ds-button": "^0.22.0",
     "@synerise/ds-button-group": "^0.7.26",
     "@synerise/ds-checkbox": "^0.12.20",
-    "@synerise/ds-column-manager": "^0.13.6",
+    "@synerise/ds-column-manager": "^0.13.7",
     "@synerise/ds-data-format": "^0.6.1",
     "@synerise/ds-dropdown": "^0.18.27",
     "@synerise/ds-flag": "^0.5.3",
@@ -77,5 +77,5 @@
     "react-intl": ">=3.12.0 <= 6.8",
     "styled-components": "5.0.1"
   },
-  "gitHead": "03c0625fb7b5baaa35f6633a425fb803469b6a20"
+  "gitHead": "05aa1b6f2038d83cc94b2270fd495c8df2c09dd5"
 }