@synerise/ds-table 0.47.5 → 0.47.6

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.47.6](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.47.5...@synerise/ds-table@0.47.6) (2024-01-18)
+
+
+### Bug Fixes
+
+* **table:** fix selection handler for filtered data ([8f56d41](https://github.com/synerise/synerise-design/commit/8f56d41465f833cf532c8bd1dc432889eb0bb17a))
+
+
+
+
+
 ## [0.47.5](https://github.com/synerise/synerise-design/compare/@synerise/ds-table@0.47.4...@synerise/ds-table@0.47.5) (2024-01-17)
 
 **Note:** Version bump only for package @synerise/ds-table

package/README.md

@@ -20,6 +20,7 @@ Table UI Component
 | columns                     | Columns of table                                                                                                                                                                                                              | [ColumnProps](https://git.io/vMMXC)\[]                                                                                                                                          | -                                                                                  | 
 | components                  | Override default table elements                                                                                                                                                                                               | [TableComponents](https://git.io/fANxz)                                                                                                                                         | -                                                                                  | 
 | dataSource                  | Data record array to be displayed                                                                                                                                                                                             | any / []                                                                                                                                                                        | -                                                                                  | 
+| dataSourceFull                  | If `dataSource` prop is a subset of a larger array (via search component for example), but you want selection row to operate on the full data array (selection onChange handler will return keys that are not in the current subset but have been selected prior to searching)                                                                                                                                                                                            | same as `dataSource`                                                                                                                                                                        | -                                                                                  | 
 | defaultExpandAllRows        | Expand all rows initially                                                                                                                                                                                                     | boolean                                                                                                                                                                         | `false`                                                                            | 
 | defaultExpandedRowKeys      | Initial expanded row keys                                                                                                                                                                                                     | string / []                                                                                                                                                                     | -                                                                                  | 
 | disableColumnNamesLineBreak | Disable line break when rendering column names                                                                                                                                                                                | boolean                                                                                                                                                                         | false                                                                              | 

package/dist/GroupTable/GroupTableBody/GroupTableBody.js

@@ -57,7 +57,7 @@ function GroupTableBody(_ref) {
     indeterminate: selectedRowsNumber > 0 && selectedRowsNumber < allRowKeys.length,
     onChange: function onChange(event) {
       if (event.target.checked) {
-        var selectedKeys = [].concat(new Set([].concat(selection == null ? void 0 : selection.selectedRowKeys, allRowKeys)));
+        var selectedKeys = Array.from(new Set([].concat(selection == null ? void 0 : selection.selectedRowKeys, allRowKeys)));
         selection.onChange(selectedKeys, allItems.filter(function (item) {
           return selectedKeys.indexOf(getRowKey(item)) >= 0;
         }));

package/dist/RowSelection/RowSelectionColumn.js

@@ -87,6 +87,7 @@ export function RowSelectionColumn(_ref) {
     mouseLeaveDelay: 0
   }, /*#__PURE__*/React.createElement(Button.Checkbox, {
     key: "checkbox-" + recordKey,
+    "data-testid": "ds-table-selection-button",
     checked: isChecked,
     disabled: !isChecked && Boolean(limit !== undefined && limit <= selectedRowKeys.length),
     indeterminate: isIndeterminate,

package/dist/Table.js

@@ -34,6 +34,7 @@ function DSTable(props) {
       itemsMenu = props.itemsMenu,
       cellSize = props.cellSize,
       dataSource = props.dataSource,
+      dataSourceFull = props.dataSourceFull,
       roundedHeader = props.roundedHeader,
       filters = props.filters,
       searchComponent = props.searchComponent,
@@ -72,6 +73,7 @@ function DSTable(props) {
       itemsMenu: itemsMenu,
       selection: selection,
       dataSource: data,
+      dataSourceFull: dataSourceFull,
       searchComponent: searchComponent,
       filterComponent: filterComponent,
       headerButton: headerButton,
@@ -80,7 +82,7 @@ function DSTable(props) {
       renderSelectionTitle: renderSelectionTitle,
       hideTitlePart: hideTitlePart
     });
-  }, [selection, grouped, dataSource, renderSelectionTitle, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, searchComponent, filterComponent, headerButton, rowKey, tableLocale, hideTitlePart]);
+  }, [selection, grouped, dataSource, hideTitleBar, headerWithBorderTop, title, filters, itemsMenu, dataSourceFull, searchComponent, filterComponent, headerButton, rowKey, tableLocale, renderSelectionTitle, hideTitlePart]);
   var footerPagination = React.useMemo(function () {
     return _objectSpread({
       showTotal: function showTotal(total, range) {

package/dist/Table.types.d.ts

@@ -115,5 +115,6 @@ export interface DSTableProps<T extends any & GroupType<T>> extends AntTableProp
     hideTitlePart?: boolean;
     disableColumnNamesLineBreak?: boolean;
     onSort?: OnSortFn;
+    dataSourceFull?: T[];
 }
 export {};

package/dist/TableHeader/TableHeader.js

@@ -20,6 +20,7 @@ var TableHeader = function TableHeader(_ref) {
       itemsMenu = _ref.itemsMenu,
       selection = _ref.selection,
       dataSource = _ref.dataSource,
+      dataSourceFull = _ref.dataSourceFull,
       rowKey = _ref.rowKey,
       withBorderTop = _ref.withBorderTop,
       headerButton = _ref.headerButton,
@@ -55,6 +56,7 @@ var TableHeader = function TableHeader(_ref) {
     }, selection && /*#__PURE__*/React.createElement(TableSelection, {
       rowKey: rowKey,
       dataSource: dataSource,
+      dataSourceFull: dataSourceFull,
       selection: selection,
       locale: locale
     }), renderSelectionTitle ? renderSelectionTitle(selection, filters) : /*#__PURE__*/React.createElement(S.TitleContainer, null, /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(selectedRows)), " ", /*#__PURE__*/React.createElement("span", null, locale.selected))), itemsMenu) : /*#__PURE__*/React.createElement(S.Left, {
@@ -62,6 +64,7 @@ var TableHeader = function TableHeader(_ref) {
     }, selection && /*#__PURE__*/React.createElement(TableSelection, {
       rowKey: rowKey,
       dataSource: dataSource,
+      dataSourceFull: dataSourceFull,
       selection: selection,
       locale: locale
     }), /*#__PURE__*/React.createElement(S.TitleContainer, null, title && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.TitlePartEllipsis, null, isTitleTruncated ? /*#__PURE__*/React.createElement(Tooltip, {
@@ -74,7 +77,7 @@ var TableHeader = function TableHeader(_ref) {
     }, title)) : /*#__PURE__*/React.createElement("strong", {
       ref: titleRef
     }, title)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitleSeparator, null)), !hideTitlePart && /*#__PURE__*/React.createElement(S.TitlePart, null, /*#__PURE__*/React.createElement("strong", null, formatValue(dataSource.length)), " ", /*#__PURE__*/React.createElement("span", null, locale.pagination.items))));
-  }, [selection, dataSource, itemsMenu, locale, selectedRows, rowKey, renderSelectionTitle, filters, formatValue, title, isTitleTruncated, hideTitlePart]);
+  }, [selection, dataSource, itemsMenu, locale, selectedRows, rowKey, dataSourceFull, renderSelectionTitle, filters, formatValue, title, isTitleTruncated, hideTitlePart]);
   return /*#__PURE__*/React.createElement(S.Header, {
     withBorderTop: withBorderTop
   }, renderLeftSide, /*#__PURE__*/React.createElement(S.Right, null, headerButton, filters == null ? void 0 : filters.map(function (filter) {

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

@@ -9,6 +9,7 @@ export interface Props<T extends {
     itemsMenu: React.ReactNode;
     selection?: RowSelection<T>;
     dataSource: T[];
+    dataSourceFull?: T[];
     searchComponent?: React.ReactNode;
     filterComponent?: React.ReactNode;
     rowKey?: Function | string;

package/dist/TableHeader/TableSelection.d.ts

@@ -3,5 +3,5 @@ import { Props } from './TableSelection.types';
 declare function TableSelection<T extends {
     key: React.ReactText;
     children?: T[];
-}>({ dataSource, selection, rowKey, locale, }: Props<T>): React.ReactElement | null;
+}>({ dataSource, dataSourceFull, selection, rowKey, locale, }: Props<T>): React.ReactElement | null;
 export default TableSelection;

package/dist/TableHeader/TableSelection.js

@@ -10,6 +10,7 @@ import { useRowKey } from '../hooks/useRowKey'; // @ts-ignore
 
 function TableSelection(_ref) {
   var dataSource = _ref.dataSource,
+      dataSourceFull = _ref.dataSourceFull,
       selection = _ref.selection,
       rowKey = _ref.rowKey,
       locale = _ref.locale;
@@ -17,31 +18,85 @@ function TableSelection(_ref) {
   var _useRowKey = useRowKey(rowKey),
       getRowKey = _useRowKey.getRowKey;
 
+  var allData = dataSourceFull || dataSource;
+  var isShowingSubset = dataSourceFull && dataSourceFull.length !== dataSource.length;
+  var getRowsForKeys = React.useCallback(function (keys) {
+    if (selection) {
+      var rows = [];
+      allData.forEach(function (record) {
+        if (Array.isArray(record.children)) {
+          record.children.forEach(function (child) {
+            var key = getRowKey(child);
+
+            if (record.children && key && keys.includes(key)) {
+              rows = [].concat(rows, [record]);
+            }
+          });
+        }
+
+        if (!Array.isArray(record.children) || selection.independentSelectionExpandedRows) {
+          var key = getRowKey(record);
+
+          if (key && keys.includes(key)) {
+            rows = [].concat(rows, [record]);
+          }
+        }
+      });
+      return rows;
+    }
+
+    return [];
+  }, [allData, getRowKey, selection]);
   var selectAll = React.useCallback(function () {
     if (dataSource && selection) {
-      var keys = [];
-      var rows = [];
+      var selectedRowKeys = selection.selectedRowKeys;
+      var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
       dataSource.forEach(function (record) {
         if (Array.isArray(record.children)) {
           keys = [].concat(keys, record.children.reduce(function (acc, child) {
             var key = getRowKey(child);
             return key ? [].concat(acc, [key]) : acc;
           }, []));
-          rows = [].concat(rows, record.children);
         }
 
         if (!Array.isArray(record.children) || selection.independentSelectionExpandedRows) {
           var key = getRowKey(record);
           keys = key !== undefined ? [].concat(keys, [key]) : [].concat(keys);
-          rows = [].concat(rows, [record]);
         }
       });
-      selection.onChange(keys, rows);
+      var uniqueKeys = Array.from(new Set(keys));
+      var rows = getRowsForKeys(uniqueKeys);
+      selection.onChange(uniqueKeys, rows);
     }
-  }, [dataSource, selection, getRowKey]);
+  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getRowKey]);
   var unselectAll = React.useCallback(function () {
-    if (selection) selection.onChange([], []);
-  }, [selection]);
+    if (selection) {
+      if (isShowingSubset) {
+        var selectedRowKeys = selection.selectedRowKeys;
+        var keysToUnselect = [];
+        dataSource.forEach(function (record) {
+          if (Array.isArray(record.children)) {
+            keysToUnselect = [].concat(keysToUnselect, record.children.reduce(function (acc, child) {
+              var key = getRowKey(child);
+              return key ? [].concat(acc, [key]) : acc;
+            }, []));
+          }
+
+          if (!Array.isArray(record.children) || 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([], []);
+      }
+    }
+  }, [dataSource, getRowKey, getRowsForKeys, isShowingSubset, selection]);
   var getSelectableChildren = React.useCallback(function (children) {
     return children ? children.filter(function (child) {
       return getRowKey(child) !== undefined;
@@ -49,48 +104,76 @@ function TableSelection(_ref) {
   }, [getRowKey]);
   var selectInvert = React.useCallback(function () {
     if (dataSource && selection) {
-      var selected = [];
+      var selectedRowKeys = selection.selectedRowKeys;
+      var keys = isShowingSubset ? [].concat(selectedRowKeys) : [];
       dataSource.forEach(function (record) {
         var hasChildren = Array.isArray(record.children);
         var selectableChildren = hasChildren ? getSelectableChildren(record.children) : false;
 
         if (selectableChildren) {
           selectableChildren.forEach(function (child) {
-            if ((selection == null ? void 0 : selection.selectedRowKeys.indexOf(getRowKey(child))) < 0) {
-              selected = [].concat(selected, [child]);
+            var key = getRowKey(child);
+
+            if (selectedRowKeys.includes(key)) {
+              if (isShowingSubset) keys.splice(keys.indexOf(key), 1);
+            } else {
+              keys = [].concat(keys, [key]);
             }
           });
         }
 
-        if ((selection == null ? void 0 : selection.selectedRowKeys.indexOf(getRowKey(record))) < 0 && (!selectableChildren || selection.independentSelectionExpandedRows)) {
-          selected = [].concat(selected, [record]);
+        if (!selectableChildren || selection.independentSelectionExpandedRows) {
+          var key = getRowKey(record);
+
+          if (selectedRowKeys.includes(key)) {
+            if (isShowingSubset) keys.splice(keys.indexOf(key), 1);
+          } else {
+            keys = [].concat(keys, [key]);
+          }
         }
       });
-      selection.onChange(selected.map(function (record) {
-        return getRowKey(record);
-      }), selected);
+      var rows = getRowsForKeys(keys);
+      selection.onChange(keys, rows);
     }
-  }, [dataSource, selection, getRowKey, getSelectableChildren]);
+  }, [dataSource, selection, isShowingSubset, getRowsForKeys, getSelectableChildren, getRowKey]);
   var isEmpty = React.useMemo(function () {
     return dataSource.length === 0;
   }, [dataSource]);
   var allSelected = React.useMemo(function () {
-    if (isEmpty) return false;
-    var allRecords = dataSource.reduce(function (count, record) {
-      if (selection != null && selection.independentSelectionExpandedRows) {
+    if (isEmpty || !selection) return false;
+    var selectedRowKeys = selection.selectedRowKeys,
+        independentSelectionExpandedRows = selection.independentSelectionExpandedRows;
+    var allRecordsCount = dataSource.reduce(function (count, record) {
+      if (independentSelectionExpandedRows) {
         return Array.isArray(record.children) ? count + getSelectableChildren(record.children).length + 1 : count + 1;
       }
 
       return Array.isArray(record.children) ? count + getSelectableChildren(record.children).length : count + 1;
     }, 0);
-    return (selection == null ? void 0 : selection.selectedRowKeys) && allRecords === selection.selectedRowKeys.length;
-  }, [isEmpty, dataSource, selection, getSelectableChildren]);
+    var selectedKeysInDataSourceCount = isShowingSubset ? dataSource.reduce(function (count, record) {
+      if (Array.isArray(record.children)) {
+        return record.children.reduce(function (childCount, child) {
+          var key = getRowKey(child);
+          return selectedRowKeys.includes(key) ? childCount + 1 : childCount;
+        }, 0);
+      }
+
+      if (!Array.isArray(record.children) || selection.independentSelectionExpandedRows) {
+        var key = getRowKey(record);
+        return selectedRowKeys.includes(key) ? count + 1 : count;
+      }
+
+      return count;
+    }, 0) : selectedRowKeys.length;
+    return allRecordsCount === selectedKeysInDataSourceCount;
+  }, [isEmpty, selection, dataSource, isShowingSubset, getSelectableChildren, getRowKey]);
   return selection != null && selection.selectedRowKeys ? /*#__PURE__*/React.createElement(S.Selection, {
     "data-popup-container": true
   }, /*#__PURE__*/React.createElement(Tooltip, {
     title: locale == null ? void 0 : locale.selectAllTooltip
   }, /*#__PURE__*/React.createElement(Button.Checkbox, {
     disabled: isEmpty,
+    "data-testid": "ds-table-batch-selection-button",
     checked: allSelected,
     onChange: function onChange(isChecked) {
       if (isChecked) {

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

@@ -5,6 +5,7 @@ export interface Props<T extends {
 }> {
     selection?: RowSelection<T>;
     dataSource: T[];
+    dataSourceFull?: T[];
     locale?: Locale;
     rowKey?: Function | string;
 }

package/dist/VirtualTable/VirtualTable.js

@@ -81,6 +81,7 @@ function VirtualTable(props) {
       initialWidth = _props$initialWidth === void 0 ? 0 : _props$initialWidth,
       _props$dataSource = props.dataSource,
       dataSource = _props$dataSource === void 0 ? [] : _props$dataSource,
+      dataSourceFull = props.dataSourceFull,
       expandable = props.expandable,
       locale = props.locale,
       onListRefChange = props.onListRefChange;
@@ -103,6 +104,8 @@ function VirtualTable(props) {
   var _useRowKey = useRowKey(rowKey),
       getRowKey = _useRowKey.getRowKey;
 
+  var allData = dataSourceFull || dataSource;
+
   var propsForRowStar = _objectSpread({}, props, {
     rowStar: _objectSpread({}, rowStar, {
       onClick: function onClick(e) {
@@ -125,7 +128,7 @@ function VirtualTable(props) {
       var _ref2 = selection,
           selectedRowKeys = _ref2.selectedRowKeys;
       var selectedRows = [];
-      dataSource && dataSource.forEach(function (row) {
+      allData.forEach(function (row) {
         var key = getRowKey(row);
 
         if (key && selectedRowKeys.indexOf(key) >= 0) {

package/dist/VirtualTable/VirtualTable.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/VirtualTable/VirtualTable.types.d.ts

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { RefObject } from 'react';
 import { FixedSizeList as List } from 'react-window';
 import { InfiniteScrollProps } from '../InfiniteScroll/constants';
 import { DSTableProps } from '../Table.types';
@@ -10,6 +10,6 @@ export interface Props<T> extends DSTableProps<T> {
         x?: number;
         y: number;
     };
-    onListRefChange?: (ref: React.RefObject<List>) => void;
+    onListRefChange?: (ref: RefObject<List>) => void;
     onRowClick?: (row: T) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@synerise/ds-table",
-  "version": "0.47.5",
+  "version": "0.47.6",
   "description": "Table UI Component for the Synerise Design System",
   "license": "ISC",
   "repository": "synerise/synerise-design",
@@ -79,5 +79,5 @@
   "devDependencies": {
     "@testing-library/react": "10.0.1"
   },
-  "gitHead": "16918244eff3f4e37db24ae3d90687d4e6a233a4"
+  "gitHead": "5c8c548309589dafd3b1addec290873c4e55a882"
 }