@innovaccer/design-system 2.30.1 → 2.31.0

package/dist/index.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1712135560473 
+   * Generated on: 1713188219586 
    *      Package: @innovaccer/design-system
-   *      Version: v2.30.1
+   *      Version: v2.31.0
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -6910,6 +6910,7 @@
         switch (eventType) {
           case 'edit':
             setEditing(true);
+            setShowComponent(true);
             break;
 
           case 'hover':
@@ -6929,6 +6930,7 @@
 
       var onClose = function onClose(selected) {
         setEditing(false);
+        setShowComponent(false);
         if (onDropdownClose) onDropdownClose(selected);
       };
 
@@ -9488,7 +9490,7 @@
         var element = elementRef ? elementRef : childrenRef;
         setIsTruncated(detectTruncation(element));
       }, [childrenRef, elementRef]);
-      var renderChildern = elementRef || ! /*#__PURE__*/React__namespace.isValidElement(children) ? children : /*#__PURE__*/React__namespace.cloneElement(children, {
+      var renderChildren = elementRef || ! /*#__PURE__*/React__namespace.isValidElement(children) ? children : /*#__PURE__*/React__namespace.cloneElement(children, {
         ref: childrenRef
       });
 
@@ -9505,7 +9507,7 @@
 
       if (showOnTruncation) {
         return isTruncated ? /*#__PURE__*/React__namespace.createElement(Popover, __assign({
-          trigger: renderChildern,
+          trigger: renderChildren,
           on: 'hover',
           offset: 'medium'
         }, rest, {
@@ -9514,7 +9516,7 @@
             close: "Tooltip-animation-close-" + positionValue[props.position]
           },
           className: "Tooltip-container"
-        }), tooltipWrapper) : renderChildern;
+        }), tooltipWrapper) : renderChildren;
       }
 
       return /*#__PURE__*/React__namespace.createElement(Popover, __assign({
@@ -13861,7 +13863,14 @@
     var getTotalPages = function getTotalPages(totalRecords, pageSize) {
       return Math.ceil(totalRecords / pageSize);
     };
-    var getSelectAll = function getSelectAll(tableData, selectDisabledRow) {
+    var getSelectAll = function getSelectAll(tableData, selectDisabledRow, clearSelection) {
+      if (clearSelection) {
+        return {
+          indeterminate: false,
+          checked: false
+        };
+      }
+
       var data = tableData.filter(function (d) {
         return d.disabled && selectDisabledRow || !d.disabled;
       });
@@ -14693,7 +14702,7 @@
           var onSelectAll = _this.props.onSelectAll;
 
           if (onSelectAll) {
-            onSelectAll(event.target.checked);
+            onSelectAll(event.target.checked, undefined, true);
           }
         };
 
@@ -15187,6 +15196,8 @@
     };
 
     var Header = function Header(props) {
+      var _a;
+
       var loading = props.loading,
           error = props.error,
           data = props.data,
@@ -15200,11 +15211,11 @@
           withCheckbox = props.withCheckbox,
           children = props.children,
           updateSchema = props.updateSchema,
-          _a = props.filterList,
-          filterList = _a === void 0 ? {} : _a,
+          _b = props.filterList,
+          filterList = _b === void 0 ? {} : _b,
           updateFilterList = props.updateFilterList,
-          _b = props.totalRecords,
-          totalRecords = _b === void 0 ? 0 : _b,
+          _c = props.totalRecords,
+          totalRecords = _c === void 0 ? 0 : _c,
           onSelectAll = props.onSelectAll,
           searchPlaceholder = props.searchPlaceholder,
           selectAll = props.selectAll,
@@ -15214,16 +15225,73 @@
           dynamicColumn = props.dynamicColumn,
           allowSelectAll = props.allowSelectAll,
           showFilters = props.showFilters,
-          customSelectionLabel = props.customSelectionLabel;
+          customSelectionLabel = props.customSelectionLabel,
+          selectedRowsRef = props.selectedRowsRef,
+          selectedAllRef = props.selectedAllRef,
+          onClearSelection = props.onClearSelection,
+          onSelectAllRows = props.onSelectAllRows,
+          selectionActionRenderer = props.selectionActionRenderer,
+          uniqueColumnName = props.uniqueColumnName;
 
-      var _c = React__namespace.useState(false),
-          selectAllRecords = _c[0],
-          setSelectAllRecords = _c[1];
+      var _d = React__namespace.useState(false),
+          selectAllRecords = _d[0],
+          setSelectAllRecords = _d[1];
+
+      var _e = React__namespace.useState(true),
+          flag = _e[0],
+          setFlag = _e[1];
+
+      var customLabel = customSelectionLabel ? customSelectionLabel : 'item';
+      var selectedCount = data.filter(function (d) {
+        return d._selected;
+      }).length;
+      var startIndex = (page - 1) * pageSize + 1;
+      var endIndex = Math.min(page * pageSize, totalRecords);
+      var selectedRowsCount = (selectedAllRef === null || selectedAllRef === void 0 ? void 0 : selectedAllRef.current) === true ? totalRecords : ((_a = selectedRowsRef === null || selectedRowsRef === void 0 ? void 0 : selectedRowsRef.current) === null || _a === void 0 ? void 0 : _a.length) || 0;
+      var showSelectedRowLabel = withCheckbox && (selectedCount || selectedRowsCount > 0);
+
+      var _f = React__namespace.useState(true),
+          showSelectedLabel = _f[0],
+          setShowSelectedLabel = _f[1];
+
+      var _g = React__namespace.useState(false),
+          animateSelectedLabel = _g[0],
+          setAnimateSelectedLabel = _g[1];
+
+      var _h = React__namespace.useState(false),
+          animateUnSelectedLabel = _h[0],
+          setAnimateUnSelectedLabel = _h[1];
+
+      React__namespace.useEffect(function () {
+        if (showSelectedRowLabel) {
+          setAnimateUnSelectedLabel(true);
+          setAnimateSelectedLabel(false);
+        } else {
+          setAnimateUnSelectedLabel(false);
+          setAnimateSelectedLabel(true);
+        }
+      }, [showSelectedRowLabel]);
 
-      var _d = React__namespace.useState(true),
-          flag = _d[0],
-          setFlag = _d[1];
+      var onUnSelectAnimationEnd = function onUnSelectAnimationEnd() {
+        showSelectedRowLabel ? setShowSelectedLabel(true) : setShowSelectedLabel(false);
+        setAnimateSelectedLabel(true);
+        setAnimateUnSelectedLabel(false);
+      };
 
+      var onSelectAnimationEnd = function onSelectAnimationEnd() {
+        showSelectedRowLabel ? setShowSelectedLabel(true) : setShowSelectedLabel(false);
+        setAnimateSelectedLabel(false);
+        setAnimateUnSelectedLabel(true);
+      };
+
+      var unselectedRowLabelClass = classNames__default["default"]({
+        'Table-Header-Label--hide': animateUnSelectedLabel && showSelectedRowLabel,
+        'Table-Header-Label--show': animateUnSelectedLabel && !showSelectedRowLabel
+      });
+      var selectedRowLabelClass = classNames__default["default"]({
+        'Table-Header-Label--hide': animateSelectedLabel && !showSelectedRowLabel,
+        'Table-Header-Label--show': animateSelectedLabel && showSelectedRowLabel
+      });
       React__namespace.useEffect(function () {
         setFlag(!flag);
       }, [schema]);
@@ -15276,13 +15344,26 @@
         if (updateSchema) updateSchema(newSchema);
       };
 
-      var customLabel = customSelectionLabel ? customSelectionLabel : 'item';
-      var selectedCount = data.filter(function (d) {
-        return d._selected;
-      }).length;
-      var startIndex = (page - 1) * pageSize + 1;
-      var endIndex = Math.min(page * pageSize, totalRecords);
-      var label = error ? "Showing 0 " + customLabel + "s" : withCheckbox && selectedCount ? selectAllRecords ? "Selected all " + totalRecords + " " + customLabel + getPluralSuffix(totalRecords) : "Selected " + selectedCount + " " + customLabel + getPluralSuffix(totalRecords) + " on this page" : withPagination ? "Showing " + startIndex + "-" + endIndex + " of " + totalRecords + " " + customLabel + getPluralSuffix(totalRecords) : "Showing " + totalRecords + " " + customLabel + getPluralSuffix(totalRecords);
+      var getUnSelectedRowLabel = function getUnSelectedRowLabel() {
+        if (error) {
+          return "Showing 0 " + customLabel + "s";
+        } else if (withPagination) {
+          return "Showing " + startIndex + "-" + endIndex + " of " + totalRecords + " " + customLabel + getPluralSuffix(totalRecords);
+        }
+
+        return "Showing " + totalRecords + " " + customLabel + getPluralSuffix(totalRecords);
+      };
+
+      var getSelectedRowLabel = function getSelectedRowLabel() {
+        if (selectedRowsCount > 0 && uniqueColumnName && withCheckbox) {
+          return "Selected " + selectedRowsCount + " " + customLabel + getPluralSuffix(selectedRowsCount);
+        } else if (selectedCount && !uniqueColumnName && withCheckbox) {
+          return "Selected " + selectedCount + " " + customLabel + getPluralSuffix(selectedCount);
+        }
+
+        return;
+      };
+
       return /*#__PURE__*/React__namespace.createElement("div", {
         className: "Header"
       }, /*#__PURE__*/React__namespace.createElement("div", {
@@ -15346,21 +15427,33 @@
       }, /*#__PURE__*/React__namespace.createElement(PlaceholderParagraph, {
         length: 'small',
         size: 's'
-      })) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, /*#__PURE__*/React__namespace.createElement(Label, null, label), withPagination && (selectAll === null || selectAll === void 0 ? void 0 : selectAll.checked) && allowSelectAll && /*#__PURE__*/React__namespace.createElement("div", {
-        className: "ml-4"
-      }, !selectAllRecords ? /*#__PURE__*/React__namespace.createElement(Button, {
+      })) : /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, showSelectedLabel ? /*#__PURE__*/React__namespace.createElement("span", {
+        className: selectedRowLabelClass,
+        onAnimationEnd: onSelectAnimationEnd
+      }, /*#__PURE__*/React__namespace.createElement(Label, null, getSelectedRowLabel())) : /*#__PURE__*/React__namespace.createElement("span", {
+        className: unselectedRowLabelClass,
+        onAnimationEnd: onUnSelectAnimationEnd
+      }, /*#__PURE__*/React__namespace.createElement(Label, null, getUnSelectedRowLabel())), selectedRowsCount > 0 && allowSelectAll && showSelectedLabel && /*#__PURE__*/React__namespace.createElement("div", {
+        className: selectedRowLabelClass
+      }, /*#__PURE__*/React__namespace.createElement("div", {
+        className: "ml-4 d-flex"
+      }, /*#__PURE__*/React__namespace.createElement(Button, {
         "data-test": "DesignSystem-Table-Header--selectAllItemsButton",
         size: "tiny",
-        onClick: function onClick() {
-          return setSelectAllRecords(true);
-        }
-      }, "Select all " + totalRecords + " " + customLabel + "s") : /*#__PURE__*/React__namespace.createElement(Button, {
+        disabled: selectedRowsCount === totalRecords,
+        onClick: onSelectAllRows
+      }, "Select " + totalRecords + " " + customLabel + "s"), /*#__PURE__*/React__namespace.createElement(Button, {
         "data-test": "DesignSystem-Table-Header--clearSelectionItemsButton",
         size: "tiny",
-        onClick: function onClick() {
-          return setSelectAllRecords(false);
-        }
-      }, "Clear Selection")))), dynamicColumn && /*#__PURE__*/React__namespace.createElement("div", {
+        className: "ml-4",
+        onClick: onClearSelection
+      }, "Clear Selection"), selectionActionRenderer && /*#__PURE__*/React__namespace.createElement(Divider, {
+        vertical: true,
+        className: "mx-4 Table-Header--Divider"
+      }))), selectionActionRenderer && selectedRowsCount > 0 && showSelectedLabel && /*#__PURE__*/React__namespace.createElement("div", {
+        "data-test": "DesignSystem-Table-Header--ActionRenderer",
+        className: selectedRowLabelClass
+      }, selectionActionRenderer(selectedRowsRef === null || selectedRowsRef === void 0 ? void 0 : selectedRowsRef.current, selectedAllRef === null || selectedAllRef === void 0 ? void 0 : selectedAllRef.current)))), dynamicColumn && /*#__PURE__*/React__namespace.createElement("div", {
         className: "Header-hideColumns"
       }, /*#__PURE__*/React__namespace.createElement(DraggableDropdown, {
         options: columnOptions,
@@ -15375,6 +15468,46 @@
       showFilters: true
     };
 
+    var isElementPresent = function isElementPresent(list, uniqueColumnName, value) {
+      var arr = list === null || list === void 0 ? void 0 : list.filter(function (item) {
+        return item[uniqueColumnName] === value;
+      });
+      return arr.length > 0;
+    };
+
+    var getUpdatedData = function getUpdatedData(data, uniqueColumnName, selectedList, isCancelSelection, isSelectAll) {
+      var updatedData = data.map(function (item) {
+        if (isSelectAll || item._selected && !isCancelSelection || item[uniqueColumnName] && selectedList && isElementPresent(selectedList, uniqueColumnName, item[uniqueColumnName]) && !isCancelSelection) {
+          item._selected = true;
+        } else if (isCancelSelection) {
+          item._selected = false;
+        } else {
+          item._selected = false;
+        }
+
+        return item;
+      });
+      return updatedData;
+    };
+
+    var uniqueByKey = function uniqueByKey(arr, key) {
+      var list = new Set();
+      return arr.filter(function (obj) {
+        var value = obj[key];
+
+        if (list.has(value)) {
+          return false;
+        } else {
+          list.add(value);
+          return true;
+        }
+      });
+    };
+
+    var removeDuplicate = function removeDuplicate(data, uniqueColumnName) {
+      return uniqueByKey(data, uniqueColumnName);
+    };
+
     var defaultErrorTemplate = function defaultErrorTemplate(props) {
       var _a = props.errorType,
           errorType = _a === void 0 ? 'DEFAULT' : _a;
@@ -15418,6 +15551,10 @@
       function Table(props) {
         var _this = _super.call(this, props) || this;
 
+        _this.selectedRowsRef = /*#__PURE__*/React__namespace.createRef();
+        _this.clearSelectionRef = /*#__PURE__*/React__namespace.createRef();
+        _this.selectAllRef = /*#__PURE__*/React__namespace.createRef();
+
         _this.updateData = function (searchUpdate) {
           if (_this.state.async) {
             _this.setState({
@@ -15438,13 +15575,15 @@
               pageSize = _a.pageSize,
               withPagination = _a.withPagination,
               dataProp = _a.data,
-              onSearch = _a.onSearch;
-          var _b = _this.state,
-              async = _b.async,
-              page = _b.page,
-              sortingList = _b.sortingList,
-              filterList = _b.filterList,
-              searchTerm = _b.searchTerm;
+              onSearch = _a.onSearch,
+              _b = _a.uniqueColumnName,
+              uniqueColumnName = _b === void 0 ? 'id' : _b;
+          var _c = _this.state,
+              async = _c.async,
+              page = _c.page,
+              sortingList = _c.sortingList,
+              filterList = _c.filterList,
+              searchTerm = _c.searchTerm;
 
           _this.onSelect(-1, false);
 
@@ -15466,13 +15605,25 @@
               fetchData(opts).then(function (res) {
                 if (!res.searchTerm || res.searchTerm && res.searchTerm === _this.state.searchTerm) {
                   var data = res.data;
+                  var dataReplica = JSON.parse(JSON.stringify(data));
                   var schema = _this.state.schema.length ? _this.state.schema : res.schema;
+                  var preSelectedRows = data.filter(function (item) {
+                    return item._selected;
+                  });
+
+                  if (_this.clearSelectionRef.current) {
+                    _this.selectedRowsRef.current = [];
+                  } else {
+                    _this.selectedRowsRef.current = _this.selectedRowsRef.current ? removeDuplicate(__spreadArrays(_this.selectedRowsRef.current, preSelectedRows), uniqueColumnName) : removeDuplicate(__spreadArrays(preSelectedRows), uniqueColumnName);
+                  }
+
+                  var selectedData = getUpdatedData(dataReplica, uniqueColumnName, _this.selectedRowsRef.current, _this.clearSelectionRef.current, _this.selectAllRef.current);
 
                   _this.setState({
-                    data: data,
+                    data: selectedData,
                     displayData: data,
                     schema: schema,
-                    selectAll: getSelectAll(data, _this.props.selectDisabledRow),
+                    selectAll: getSelectAll(selectedData, _this.props.selectDisabledRow, _this.clearSelectionRef.current),
                     totalRecords: res.count,
                     loading: false,
                     error: !data.length,
@@ -15500,23 +15651,73 @@
             }
 
             var renderedSchema = _this.state.schema.length ? _this.state.schema : schema;
+            var preSelectedRows = renderedData.filter(function (item) {
+              return item._selected;
+            });
+
+            if (_this.clearSelectionRef.current) {
+              _this.selectedRowsRef.current = [];
+            } else {
+              _this.selectedRowsRef.current = _this.selectedRowsRef.current ? removeDuplicate(__spreadArrays(_this.selectedRowsRef.current, preSelectedRows), uniqueColumnName) : removeDuplicate(__spreadArrays(preSelectedRows), uniqueColumnName);
+            }
+
+            var selectedData = getUpdatedData(renderedData, uniqueColumnName, _this.selectedRowsRef.current, _this.clearSelectionRef.current, _this.selectAllRef.current);
 
             _this.setState({
               totalRecords: totalRecords,
               error: !renderedData.length,
               errorType: 'NO_RECORDS_FOUND',
-              selectAll: getSelectAll(renderedData, _this.props.selectDisabledRow),
+              selectAll: getSelectAll(renderedData, _this.props.selectDisabledRow, _this.clearSelectionRef.current),
               schema: renderedSchema,
               displayData: sortedData,
-              data: renderedData
+              data: selectedData
             });
           }
         };
 
         _this.onSelect = function (rowIndexes, selected) {
           var data = _this.state.data;
-          var onSelect = _this.props.onSelect;
+          var _a = _this.props,
+              onSelect = _a.onSelect,
+              _b = _a.uniqueColumnName,
+              uniqueColumnName = _b === void 0 ? 'id' : _b;
+
+          if (_this.selectAllRef.current && rowIndexes !== -1 && !selected) {
+            _this.selectAllRef.current = false;
+            _this.selectedRowsRef.current = [];
+            var indexes_1 = Array.from({
+              length: data.length
+            }, function (_, i) {
+              return i;
+            });
+            var newData_1 = updateBatchData(data, indexes_1, {
+              _selected: false
+            }, _this.props.selectDisabledRow);
+
+            _this.setState({
+              data: newData_1,
+              selectAll: {
+                checked: false,
+                indeterminate: false
+              }
+            });
+
+            if (onSelect) {
+              if (_this.props.uniqueColumnName) {
+                onSelect(indexes_1, selected, _this.selectedRowsRef.current, _this.selectAllRef.current);
+              } else {
+                onSelect(indexes_1, selected, rowIndexes === -1 ? [] : newData_1.filter(function (d) {
+                  return d._selected;
+                }));
+              }
+            }
+
+            return;
+          }
+
           var indexes = [rowIndexes];
+          var rowData = data[rowIndexes];
+          var selectedItemList = rowIndexes === -1 ? [] : [rowData];
           var newData = data;
 
           if (rowIndexes >= 0) {
@@ -15524,21 +15725,46 @@
               _selected: selected
             }, _this.props.selectDisabledRow);
 
+            _this.resetClearSelection();
+
             _this.setState({
               data: newData,
-              selectAll: getSelectAll(newData, _this.props.selectDisabledRow)
+              selectAll: getSelectAll(newData, _this.props.selectDisabledRow, _this.clearSelectionRef.current)
             });
+
+            if (_this.selectedRowsRef.current && selected) {
+              selectedItemList = __spreadArrays([__assign(__assign({}, rowData), {
+                _selected: selected
+              })], _this.selectedRowsRef.current);
+            }
+
+            if (!selected) {
+              selectedItemList = _this.selectedRowsRef.current.filter(function (item) {
+                return item[uniqueColumnName] !== rowData[uniqueColumnName];
+              });
+            }
+
+            _this.selectedRowsRef.current = removeDuplicate(selectedItemList, uniqueColumnName);
+          } else if (rowIndexes === -1 && _this.selectedRowsRef.current) {
+            selectedItemList = _this.selectedRowsRef.current;
           }
 
           if (onSelect) {
-            onSelect(indexes, selected, rowIndexes === -1 ? [] : newData.filter(function (d) {
-              return d._selected;
-            }));
+            if (_this.props.uniqueColumnName) {
+              onSelect(indexes, selected, rowIndexes === -1 && (selectedItemList === null || selectedItemList === void 0 ? void 0 : selectedItemList.length) === 0 ? [] : _this.selectedRowsRef.current, _this.selectAllRef.current);
+            } else {
+              onSelect(indexes, selected, rowIndexes === -1 ? [] : newData.filter(function (d) {
+                return d._selected;
+              }));
+            }
           }
         };
 
-        _this.onSelectAll = function (selected, selectAll) {
-          var onSelect = _this.props.onSelect;
+        _this.onSelectAll = function (selected, selectAll, headerCheckbox) {
+          var _a = _this.props,
+              onSelect = _a.onSelect,
+              _b = _a.uniqueColumnName,
+              uniqueColumnName = _b === void 0 ? 'id' : _b;
           var data = _this.state.data;
           var indexes = Array.from({
             length: data.length
@@ -15554,11 +15780,43 @@
               selectedIndex.push(key);
             }
           });
+          var selectedData = [];
 
-          if (onSelect) {
-            onSelect(selectedIndex, selected, newData.filter(function (d) {
+          if (selected) {
+            _this.resetClearSelection();
+
+            selectedData = selectAll === undefined ? __spreadArrays(_this.selectedRowsRef.current || [], newData.filter(function (d) {
               return d._selected;
-            }), selectAll);
+            })) : _this.selectedRowsRef.current;
+          } else if (!selected && headerCheckbox) {
+            _this.selectAllRef.current = false;
+            _this.selectedRowsRef.current = __spreadArrays(_this.selectedRowsRef.current || [], newData);
+            _this.selectedRowsRef.current = _this.selectedRowsRef.current.filter(function (item1) {
+              return !newData.some(function (item2) {
+                return item1[uniqueColumnName] === item2[uniqueColumnName];
+              });
+            });
+          } else {
+            _this.selectedRowsRef.current = [];
+            _this.selectAllRef.current = false;
+          }
+
+          if (!(headerCheckbox && !selected)) {
+            _this.selectedRowsRef.current = removeDuplicate(selectedData, uniqueColumnName);
+          }
+
+          if (onSelect) {
+            if (_this.props.uniqueColumnName) {
+              if (headerCheckbox && !selected) {
+                onSelect(selectedIndex, selected, removeDuplicate(_this.selectedRowsRef.current, uniqueColumnName), _this.selectAllRef.current);
+              } else {
+                onSelect(selectedIndex, selected, removeDuplicate(selectedData, uniqueColumnName), _this.selectAllRef.current);
+              }
+            } else {
+              onSelect(selectedIndex, selected, newData.filter(function (d) {
+                return d._selected;
+              }), selectAll);
+            }
           }
 
           _this.setState({
@@ -15602,6 +15860,28 @@
           });
         };
 
+        _this.onClearSelection = function () {
+          _this.selectedRowsRef.current = [];
+          _this.clearSelectionRef.current = true;
+          _this.selectAllRef.current = false;
+
+          _this.onSelectAll(false);
+
+          _this.setState({
+            selectAll: getSelectAll([], _this.props.selectDisabledRow, _this.clearSelectionRef.current)
+          });
+        };
+
+        _this.resetClearSelection = function () {
+          _this.clearSelectionRef.current = false;
+        };
+
+        _this.onSelectAllRows = function () {
+          _this.selectAllRef.current = _this.props.uniqueColumnName ? true : false;
+
+          _this.onSelectAll(true, true);
+        };
+
         var async = ('fetchData' in _this.props);
         var data = props.data || [];
         var schema = props.schema || [];
@@ -15707,7 +15987,8 @@
             loaderSchema = _a.loaderSchema,
             errorTemplate = _a.errorTemplate,
             className = _a.className,
-            filterPosition = _a.filterPosition;
+            filterPosition = _a.filterPosition,
+            uniqueColumnName = _a.uniqueColumnName;
         var baseProps = extractBaseProps(this.props);
 
         var _b = headerOptions,
@@ -15732,7 +16013,12 @@
           withCheckbox: withCheckbox,
           withPagination: withPagination,
           pageSize: pageSize,
-          showFilters: filterPosition === 'HEADER'
+          showFilters: filterPosition === 'HEADER',
+          selectedRowsRef: this.selectedRowsRef,
+          onClearSelection: this.onClearSelection,
+          onSelectAllRows: this.onSelectAllRows,
+          selectedAllRef: this.selectAllRef,
+          uniqueColumnName: uniqueColumnName
         }, headerAttr), headerChildren)), /*#__PURE__*/React__namespace.createElement("div", {
           className: "Table-grid"
         }, /*#__PURE__*/React__namespace.createElement(Grid, __assign({}, this.state, {
@@ -20413,7 +20699,7 @@
       position: 'bottom-start'
     };
 
-    var version = "2.30.1";
+    var version = "2.31.0";
 
     exports.ActionCard = ActionCard;
     exports.Avatar = Avatar;