@innovaccer/design-system 2.30.1 → 2.31.1

package/dist/index.esm.js

@@ -1,8 +1,8 @@
 
   /**
-   * Generated on: 1712135560216 
+   * Generated on: 1713523162579 
    *      Package: @innovaccer/design-system
-   *      Version: v2.30.1
+   *      Version: v2.31.1
    *      License: MIT
    *         Docs: https://innovaccer.github.io/design-system
    */
@@ -7536,6 +7536,7 @@ var EditableDropdown = function EditableDropdown(props) {
     switch (eventType) {
       case 'edit':
         setEditing(true);
+        setShowComponent(true);
         break;
 
       case 'hover':
@@ -7555,6 +7556,7 @@ var EditableDropdown = function EditableDropdown(props) {
 
   var onClose = function onClose(selected) {
     setEditing(false);
+    setShowComponent(false);
     if (onDropdownClose) onDropdownClose(selected);
   };
 
@@ -14850,7 +14852,7 @@ var Tooltip = function Tooltip(props) {
     var element = elementRef ? elementRef : childrenRef;
     setIsTruncated(detectTruncation(element));
   }, [childrenRef, elementRef]);
-  var renderChildern = elementRef || ! /*#__PURE__*/React.isValidElement(children) ? children : /*#__PURE__*/React.cloneElement(children, {
+  var renderChildren = elementRef || ! /*#__PURE__*/React.isValidElement(children) ? children : /*#__PURE__*/React.cloneElement(children, {
     ref: childrenRef
   });
 
@@ -14868,7 +14870,7 @@ var Tooltip = function Tooltip(props) {
 
   if (showOnTruncation) {
     return isTruncated ? /*#__PURE__*/React.createElement(Popover, _extends$2({
-      trigger: renderChildern,
+      trigger: renderChildren,
       on: 'hover',
       offset: 'medium'
     }, rest, {
@@ -14877,7 +14879,7 @@ var Tooltip = function Tooltip(props) {
         close: "Tooltip-animation-close-".concat(positionValue[props.position])
       },
       className: "Tooltip-container"
-    }), tooltipWrapper) : renderChildern;
+    }), tooltipWrapper) : renderChildren;
   }
 
   return /*#__PURE__*/React.createElement(Popover, _extends$2({
@@ -19443,7 +19445,14 @@ var moveToIndex = function moveToIndex(arr, from, to) {
 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;
   });
@@ -20323,7 +20332,7 @@ var Grid = /*#__PURE__*/function (_React$Component) {
       var onSelectAll = _this.props.onSelectAll;
 
       if (onSelectAll) {
-        onSelectAll(event.target.checked);
+        onSelectAll(event.target.checked, undefined, true);
       }
     });
 
@@ -20828,6 +20837,8 @@ var DraggableDropdown = function DraggableDropdown(props) {
 };
 
 var Header = function Header(props) {
+  var _selectedRowsRef$curr;
+
   var loading = props.loading,
       error = props.error,
       data = props.data,
@@ -20855,7 +20866,13 @@ var Header = function Header(props) {
       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 _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
@@ -20867,6 +20884,60 @@ var Header = function Header(props) {
       flag = _React$useState4[0],
       setFlag = _React$useState4[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 : (selectedRowsRef === null || selectedRowsRef === void 0 ? void 0 : (_selectedRowsRef$curr = selectedRowsRef.current) === null || _selectedRowsRef$curr === void 0 ? void 0 : _selectedRowsRef$curr.length) || 0;
+  var showSelectedRowLabel = withCheckbox && (selectedCount || selectedRowsCount > 0);
+
+  var _React$useState5 = React.useState(true),
+      _React$useState6 = _slicedToArray(_React$useState5, 2),
+      showSelectedLabel = _React$useState6[0],
+      setShowSelectedLabel = _React$useState6[1];
+
+  var _React$useState7 = React.useState(false),
+      _React$useState8 = _slicedToArray(_React$useState7, 2),
+      animateSelectedLabel = _React$useState8[0],
+      setAnimateSelectedLabel = _React$useState8[1];
+
+  var _React$useState9 = React.useState(false),
+      _React$useState10 = _slicedToArray(_React$useState9, 2),
+      animateUnSelectedLabel = _React$useState10[0],
+      setAnimateUnSelectedLabel = _React$useState10[1];
+
+  React.useEffect(function () {
+    if (showSelectedRowLabel) {
+      setAnimateUnSelectedLabel(true);
+      setAnimateSelectedLabel(false);
+    } else {
+      setAnimateUnSelectedLabel(false);
+      setAnimateSelectedLabel(true);
+    }
+  }, [showSelectedRowLabel]);
+
+  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({
+    'Table-Header-Label--hide': animateUnSelectedLabel && showSelectedRowLabel,
+    'Table-Header-Label--show': animateUnSelectedLabel && !showSelectedRowLabel
+  });
+  var selectedRowLabelClass = classnames({
+    'Table-Header-Label--hide': animateSelectedLabel && !showSelectedRowLabel,
+    'Table-Header-Label--show': animateSelectedLabel && showSelectedRowLabel
+  });
   React.useEffect(function () {
     setFlag(!flag);
   }, [schema]);
@@ -20921,13 +20992,28 @@ var Header = function Header(props) {
     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 ".concat(customLabel, "s") : withCheckbox && selectedCount ? selectAllRecords ? "Selected all ".concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords)) : "Selected ".concat(selectedCount, " ").concat(customLabel).concat(getPluralSuffix(totalRecords), " on this page") : withPagination ? "Showing ".concat(startIndex, "-").concat(endIndex, " of ").concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords)) : "Showing ".concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords));
+  var getUnSelectedRowLabel = function getUnSelectedRowLabel() {
+    if (error) {
+      return "Showing 0 ".concat(customLabel, "s");
+    } else if (withPagination) {
+      return "Showing ".concat(startIndex, "-").concat(endIndex, " of ").concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords));
+    }
+
+    return "Showing ".concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords));
+  };
+
+  var getSelectedRowLabel = function getSelectedRowLabel() {
+    if (selectedRowsCount > 0 && uniqueColumnName && withCheckbox) {
+      return "Selected ".concat(selectedRowsCount, " ").concat(customLabel).concat(getPluralSuffix(selectedRowsCount));
+    } else if (selectedCount && !uniqueColumnName && withCheckbox) {
+      return "Selected ".concat(selectedCount, " ").concat(customLabel).concat(getPluralSuffix(selectedCount));
+    } else if (withPagination) {
+      return "Showing ".concat(startIndex, "-").concat(endIndex, " of ").concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords));
+    }
+
+    return "Showing ".concat(totalRecords, " ").concat(customLabel).concat(getPluralSuffix(totalRecords));
+  };
+
   return /*#__PURE__*/React.createElement("div", {
     className: "Header"
   }, /*#__PURE__*/React.createElement("div", {
@@ -20991,21 +21077,33 @@ var Header = function Header(props) {
   }, /*#__PURE__*/React.createElement(PlaceholderParagraph, {
     length: 'small',
     size: 's'
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, label), withPagination && (selectAll === null || selectAll === void 0 ? void 0 : selectAll.checked) && allowSelectAll && /*#__PURE__*/React.createElement("div", {
-    className: "ml-4"
-  }, !selectAllRecords ? /*#__PURE__*/React.createElement(Button, {
+  })) : /*#__PURE__*/React.createElement(React.Fragment, null, showSelectedLabel ? /*#__PURE__*/React.createElement("span", {
+    className: selectedRowLabelClass,
+    onAnimationEnd: onSelectAnimationEnd
+  }, /*#__PURE__*/React.createElement(Label, null, getSelectedRowLabel())) : /*#__PURE__*/React.createElement("span", {
+    className: unselectedRowLabelClass,
+    onAnimationEnd: onUnSelectAnimationEnd
+  }, /*#__PURE__*/React.createElement(Label, null, getUnSelectedRowLabel())), selectedRowsCount > 0 && allowSelectAll && showSelectedLabel && /*#__PURE__*/React.createElement("div", {
+    className: selectedRowLabelClass
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "ml-4 d-flex"
+  }, /*#__PURE__*/React.createElement(Button, {
     "data-test": "DesignSystem-Table-Header--selectAllItemsButton",
     size: "tiny",
-    onClick: function onClick() {
-      return setSelectAllRecords(true);
-    }
-  }, "Select all ".concat(totalRecords, " ").concat(customLabel, "s")) : /*#__PURE__*/React.createElement(Button, {
+    disabled: selectedRowsCount === totalRecords,
+    onClick: onSelectAllRows
+  }, "Select ".concat(totalRecords, " ").concat(customLabel, "s")), /*#__PURE__*/React.createElement(Button, {
     "data-test": "DesignSystem-Table-Header--clearSelectionItemsButton",
     size: "tiny",
-    onClick: function onClick() {
-      return setSelectAllRecords(false);
-    }
-  }, "Clear Selection")))), dynamicColumn && /*#__PURE__*/React.createElement("div", {
+    className: "ml-4",
+    onClick: onClearSelection
+  }, "Clear Selection"), selectionActionRenderer && /*#__PURE__*/React.createElement(Divider, {
+    vertical: true,
+    className: "mx-4 Table-Header--Divider"
+  }))), selectionActionRenderer && selectedRowsCount > 0 && showSelectedLabel && /*#__PURE__*/React.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.createElement("div", {
     className: "Header-hideColumns"
   }, /*#__PURE__*/React.createElement(DraggableDropdown, {
     options: columnOptions,
@@ -21020,6 +21118,50 @@ Header.defaultProps = {
   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, selectedList, uniqueColumnName, isCancelSelection, isSelectAll) {
+  var updatedData = data.map(function (item) {
+    if (isSelectAll || item._selected && !isCancelSelection || uniqueColumnName && 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) {
+  if (uniqueColumnName) {
+    return uniqueByKey(data, uniqueColumnName);
+  }
+
+  return data;
+};
+
 var _excluded$l = ["children"];
 
 var defaultErrorTemplate = function defaultErrorTemplate(props) {
@@ -21099,6 +21241,12 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty$1(_assertThisInitialized$1(_this), "debounceUpdate", void 0);
 
+    _defineProperty$1(_assertThisInitialized$1(_this), "selectedRowsRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty$1(_assertThisInitialized$1(_this), "clearSelectionRef", /*#__PURE__*/React.createRef());
+
+    _defineProperty$1(_assertThisInitialized$1(_this), "selectAllRef", /*#__PURE__*/React.createRef());
+
     _defineProperty$1(_assertThisInitialized$1(_this), "updateData", function (searchUpdate) {
       if (_this.state.async) {
         _this.setState({
@@ -21119,7 +21267,8 @@ var Table = /*#__PURE__*/function (_React$Component) {
           pageSize = _this$props.pageSize,
           withPagination = _this$props.withPagination,
           dataProp = _this$props.data,
-          onSearch = _this$props.onSearch;
+          onSearch = _this$props.onSearch,
+          uniqueColumnName = _this$props.uniqueColumnName;
       var _this$state = _this.state,
           async = _this$state.async,
           page = _this$state.page,
@@ -21147,13 +21296,26 @@ var Table = /*#__PURE__*/function (_React$Component) {
           fetchData(opts).then(function (res) {
             if (!res.searchTerm || res.searchTerm && res.searchTerm === _this.state.searchTerm) {
               var _data2 = res.data;
+              var dataReplica = JSON.parse(JSON.stringify(_data2));
               var schema = _this.state.schema.length ? _this.state.schema : res.schema;
 
+              var preSelectedRows = _data2.filter(function (item) {
+                return item._selected;
+              });
+
+              if (_this.clearSelectionRef.current) {
+                _this.selectedRowsRef.current = [];
+              } else {
+                _this.selectedRowsRef.current = _this.selectedRowsRef.current ? removeDuplicate([].concat(_toConsumableArray(_this.selectedRowsRef.current), _toConsumableArray(preSelectedRows)), uniqueColumnName) : removeDuplicate(_toConsumableArray(preSelectedRows), uniqueColumnName);
+              }
+
+              var selectedData = getUpdatedData(dataReplica, _this.selectedRowsRef.current, uniqueColumnName, _this.clearSelectionRef.current, _this.selectAllRef.current);
+
               _this.setState({
-                data: _data2,
+                data: selectedData,
                 displayData: _data2,
                 schema: schema,
-                selectAll: getSelectAll(_data2, _this.props.selectDisabledRow),
+                selectAll: getSelectAll(selectedData, _this.props.selectDisabledRow, _this.clearSelectionRef.current),
                 totalRecords: res.count,
                 loading: false,
                 error: !_data2.length,
@@ -21181,23 +21343,76 @@ var Table = /*#__PURE__*/function (_React$Component) {
         }
 
         var renderedSchema = _this.state.schema.length ? _this.state.schema : schema;
+        var preSelectedRows = renderedData.filter(function (item) {
+          return item._selected;
+        });
+        var renderedDataReplica = JSON.parse(JSON.stringify(renderedData));
+
+        if (_this.clearSelectionRef.current) {
+          _this.selectedRowsRef.current = [];
+        } else {
+          _this.selectedRowsRef.current = _this.selectedRowsRef.current ? removeDuplicate([].concat(_toConsumableArray(_this.selectedRowsRef.current), _toConsumableArray(preSelectedRows)), uniqueColumnName) : removeDuplicate(_toConsumableArray(preSelectedRows), uniqueColumnName);
+        }
+
+        var selectedData = getUpdatedData(renderedDataReplica, _this.selectedRowsRef.current, uniqueColumnName, _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
         });
       }
     });
 
     _defineProperty$1(_assertThisInitialized$1(_this), "onSelect", function (rowIndexes, selected) {
       var data = _this.state.data;
-      var onSelect = _this.props.onSelect;
+      var _this$props2 = _this.props,
+          onSelect = _this$props2.onSelect,
+          uniqueColumnName = _this$props2.uniqueColumnName;
+
+      if (_this.selectAllRef.current && rowIndexes !== -1 && !selected) {
+        _this.selectAllRef.current = false;
+        _this.selectedRowsRef.current = [];
+
+        var _indexes = Array.from({
+          length: data.length
+        }, function (_, i) {
+          return i;
+        });
+
+        var _newData = updateBatchData(data, _indexes, {
+          _selected: false
+        }, _this.props.selectDisabledRow);
+
+        _this.setState({
+          data: _newData,
+          selectAll: {
+            checked: false,
+            indeterminate: false
+          }
+        });
+
+        if (onSelect) {
+          if (_this.props.uniqueColumnName) {
+            onSelect(_indexes, selected, _this.selectedRowsRef.current, _this.selectAllRef.current);
+          } else {
+            // To avoid breaking the current selection flow
+            onSelect(_indexes, selected, rowIndexes === -1 ? [] : _newData.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) {
@@ -21205,21 +21420,48 @@ var Table = /*#__PURE__*/function (_React$Component) {
           _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 = [_objectSpread2(_objectSpread2({}, rowData), {}, {
+            _selected: selected
+          })].concat(_toConsumableArray(_this.selectedRowsRef.current));
+        }
+
+        if (!selected && uniqueColumnName) {
+          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) {
+          var _selectedItemList;
+
+          onSelect(indexes, selected, rowIndexes === -1 && ((_selectedItemList = selectedItemList) === null || _selectedItemList === void 0 ? void 0 : _selectedItemList.length) === 0 ? [] : _this.selectedRowsRef.current, _this.selectAllRef.current);
+        } else {
+          // To avoid breaking the current selection flow
+          onSelect(indexes, selected, rowIndexes === -1 ? [] : newData.filter(function (d) {
+            return d._selected;
+          }));
+        }
       }
     });
 
-    _defineProperty$1(_assertThisInitialized$1(_this), "onSelectAll", function (selected, selectAll) {
-      var onSelect = _this.props.onSelect;
+    _defineProperty$1(_assertThisInitialized$1(_this), "onSelectAll", function (selected, selectAll, headerCheckbox) {
+      var _this$props3 = _this.props,
+          onSelect = _this$props3.onSelect,
+          uniqueColumnName = _this$props3.uniqueColumnName;
       var data = _this.state.data;
       var indexes = Array.from({
         length: data.length
@@ -21235,11 +21477,43 @@ var Table = /*#__PURE__*/function (_React$Component) {
           selectedIndex.push(key);
         }
       });
+      var selectedData = [];
 
-      if (onSelect) {
-        onSelect(selectedIndex, selected, newData.filter(function (d) {
+      if (selected) {
+        _this.resetClearSelection();
+
+        selectedData = selectAll === undefined ? [].concat(_toConsumableArray(_this.selectedRowsRef.current || []), _toConsumableArray(newData.filter(function (d) {
           return d._selected;
-        }), selectAll);
+        }))) : _this.selectedRowsRef.current;
+      } else if (!selected && headerCheckbox && uniqueColumnName) {
+        _this.selectAllRef.current = false;
+        _this.selectedRowsRef.current = [].concat(_toConsumableArray(_this.selectedRowsRef.current || []), _toConsumableArray(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({
@@ -21283,6 +21557,28 @@ var Table = /*#__PURE__*/function (_React$Component) {
       });
     });
 
+    _defineProperty$1(_assertThisInitialized$1(_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)
+      });
+    });
+
+    _defineProperty$1(_assertThisInitialized$1(_this), "resetClearSelection", function () {
+      _this.clearSelectionRef.current = false;
+    });
+
+    _defineProperty$1(_assertThisInitialized$1(_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 || [];
@@ -21320,11 +21616,11 @@ var Table = /*#__PURE__*/function (_React$Component) {
 
       if (!this.state.async) {
         if (prevProps.error !== this.props.error) {
-          var _this$props2 = this.props,
-              _this$props2$data = _this$props2.data,
-              _data3 = _this$props2$data === void 0 ? [] : _this$props2$data,
-              _this$props2$schema = _this$props2.schema,
-              schema = _this$props2$schema === void 0 ? [] : _this$props2$schema;
+          var _this$props4 = this.props,
+              _this$props4$data = _this$props4.data,
+              _data3 = _this$props4$data === void 0 ? [] : _this$props4$data,
+              _this$props4$schema = _this$props4.schema,
+              schema = _this$props4$schema === void 0 ? [] : _this$props4$schema;
 
           this.setState({
             data: _data3,
@@ -21339,11 +21635,11 @@ var Table = /*#__PURE__*/function (_React$Component) {
         }
 
         if (prevProps.loading !== this.props.loading) {
-          var _this$props3 = this.props,
-              _this$props3$data = _this$props3.data,
-              _data4 = _this$props3$data === void 0 ? [] : _this$props3$data,
-              _this$props3$schema = _this$props3.schema,
-              _schema2 = _this$props3$schema === void 0 ? [] : _this$props3$schema;
+          var _this$props5 = this.props,
+              _this$props5$data = _this$props5.data,
+              _data4 = _this$props5$data === void 0 ? [] : _this$props5$data,
+              _this$props5$schema = _this$props5.schema,
+              _schema2 = _this$props5$schema === void 0 ? [] : _this$props5$schema;
 
           this.setState({
             data: _data4,
@@ -21385,28 +21681,29 @@ var Table = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props4 = this.props,
-          showHead = _this$props4.showHead,
-          type = _this$props4.type,
-          size = _this$props4.size,
-          headCellTooltip = _this$props4.headCellTooltip,
-          separator = _this$props4.separator,
-          draggable = _this$props4.draggable,
-          nestedRows = _this$props4.nestedRows,
-          nestedRowRenderer = _this$props4.nestedRowRenderer,
-          withHeader = _this$props4.withHeader,
-          headerOptions = _this$props4.headerOptions,
-          withCheckbox = _this$props4.withCheckbox,
-          showMenu = _this$props4.showMenu,
-          withPagination = _this$props4.withPagination,
-          paginationType = _this$props4.paginationType,
-          pageSize = _this$props4.pageSize,
-          pageJumpDebounceDuration = _this$props4.pageJumpDebounceDuration,
-          onRowClick = _this$props4.onRowClick,
-          loaderSchema = _this$props4.loaderSchema,
-          errorTemplate = _this$props4.errorTemplate,
-          className = _this$props4.className,
-          filterPosition = _this$props4.filterPosition;
+      var _this$props6 = this.props,
+          showHead = _this$props6.showHead,
+          type = _this$props6.type,
+          size = _this$props6.size,
+          headCellTooltip = _this$props6.headCellTooltip,
+          separator = _this$props6.separator,
+          draggable = _this$props6.draggable,
+          nestedRows = _this$props6.nestedRows,
+          nestedRowRenderer = _this$props6.nestedRowRenderer,
+          withHeader = _this$props6.withHeader,
+          headerOptions = _this$props6.headerOptions,
+          withCheckbox = _this$props6.withCheckbox,
+          showMenu = _this$props6.showMenu,
+          withPagination = _this$props6.withPagination,
+          paginationType = _this$props6.paginationType,
+          pageSize = _this$props6.pageSize,
+          pageJumpDebounceDuration = _this$props6.pageJumpDebounceDuration,
+          onRowClick = _this$props6.onRowClick,
+          loaderSchema = _this$props6.loaderSchema,
+          errorTemplate = _this$props6.errorTemplate,
+          className = _this$props6.className,
+          filterPosition = _this$props6.filterPosition,
+          uniqueColumnName = _this$props6.uniqueColumnName;
       var baseProps = extractBaseProps(this.props);
 
       var _ref = headerOptions,
@@ -21433,7 +21730,12 @@ var Table = /*#__PURE__*/function (_React$Component) {
         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.createElement("div", {
         className: "Table-grid"
       }, /*#__PURE__*/React.createElement(Grid, _extends$2({}, this.state, {
@@ -26236,6 +26538,6 @@ Menu.defaultProps = {
   position: 'bottom-start'
 };
 
-var version = "2.30.1";
+var version = "2.31.1";
 
 export { ActionCard, Avatar, AvatarGroup, AvatarSelection, Backdrop, Badge, Breadcrumbs, Button, Calendar, Caption, Card, CardBody, CardFooter, CardHeader, CardSubdued, ChatMessage, Checkbox, Chip, ChipGroup, ChipInput, ChoiceList, Collapsible, Column, Combobox, DatePicker, DateRangePicker, Dialog, Divider, Dropdown, Dropzone, EditableChipInput, EditableDropdown, EditableInput, EmptyState, FileList, FileUploader, FileUploaderList, FullscreenModal, Grid, GridCell, Heading, HelpText, HorizontalNav, Icon, InlineMessage, Input, X as InputMask, Label, Legend, Link, LinkButton, List, Listbox, Menu, Message, MetaList, MetricInput, Modal, ModalBody, ModalDescription, ModalFooter, ModalHeader, MultiSlider, Navigation, OutsideClick, PageHeader, Pagination, Paragraph, Pills, Placeholder, PlaceholderImage, PlaceholderParagraph, Popover, ProgressBar, ProgressRing, Radio, RangeSlider, Row, Select, SelectionCard, Sidesheet, Slider, Spinner, StatusHint, Stepper, Subheading, Switch, Tab, Table, Tabs, TabsWrapper, Text, TextField, Textarea, TimePicker, Toast, Tooltip, index as Utils, VerificationCodeInput, VerticalNav, version };