@carbon/react 1.27.0-rc.0 → 1.28.0-rc.0

package/es/components/DataTable/DataTable.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { defineProperty as _defineProperty, inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, assertThisInitialized as _assertThisInitialized, slicedToArray as _slicedToArray, createClass as _createClass } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import PropTypes from 'prop-types';
 import React__default from 'react';
 import isEqual from 'lodash.isequal';
@@ -38,14 +38,8 @@ import TableToolbarContent from './TableToolbarContent.js';
 import TableToolbarSearch from './TableToolbarSearch.js';
 import TableToolbarMenu from './TableToolbarMenu.js';
 
-var _excluded = ["header", "onClick", "isSortable"],
-    _excluded2 = ["onClick", "onExpand"],
-    _excluded3 = ["row", "onClick"],
-    _excluded4 = ["onClick", "row"];
-
-var _defaultTranslations;
-var getInstanceId = setupGetInstanceId();
-var translationKeys = {
+const getInstanceId = setupGetInstanceId();
+const translationKeys = {
   expandRow: 'carbon.table.row.expand',
   collapseRow: 'carbon.table.row.collapse',
   expandAll: 'carbon.table.all.expand',
@@ -55,11 +49,18 @@ var translationKeys = {
   selectRow: 'carbon.table.row.select',
   unselectRow: 'carbon.table.row.unselect'
 };
-var defaultTranslations = (_defaultTranslations = {}, _defineProperty(_defaultTranslations, translationKeys.expandAll, 'Expand all rows'), _defineProperty(_defaultTranslations, translationKeys.collapseAll, 'Collapse all rows'), _defineProperty(_defaultTranslations, translationKeys.expandRow, 'Expand current row'), _defineProperty(_defaultTranslations, translationKeys.collapseRow, 'Collapse current row'), _defineProperty(_defaultTranslations, translationKeys.selectAll, 'Select all rows'), _defineProperty(_defaultTranslations, translationKeys.unselectAll, 'Unselect all rows'), _defineProperty(_defaultTranslations, translationKeys.selectRow, 'Select row'), _defineProperty(_defaultTranslations, translationKeys.unselectRow, 'Unselect row'), _defaultTranslations);
-
-var translateWithId = function translateWithId(id) {
-  return defaultTranslations[id];
+const defaultTranslations = {
+  [translationKeys.expandAll]: 'Expand all rows',
+  [translationKeys.collapseAll]: 'Collapse all rows',
+  [translationKeys.expandRow]: 'Expand current row',
+  [translationKeys.collapseRow]: 'Collapse current row',
+  [translationKeys.selectAll]: 'Select all rows',
+  [translationKeys.unselectAll]: 'Unselect all rows',
+  [translationKeys.selectRow]: 'Select row',
+  [translationKeys.unselectRow]: 'Unselect row'
 };
+
+const translateWithId = id => defaultTranslations[id];
 /**
  * Data Tables are used to represent a collection of resources, displaying a
  * subset of their fields in columns, or headers. We prioritize direct updates
@@ -72,211 +73,211 @@ var translateWithId = function translateWithId(id) {
  */
 
 
-var DataTable = /*#__PURE__*/function (_React$Component) {
-  _inherits(DataTable, _React$Component);
-
-  var _super = _createSuper(DataTable);
-
-  function DataTable(_props) {
+class DataTable extends React__default.Component {
+  constructor(_props) {
     var _this;
 
-    _classCallCheck(this, DataTable);
-
-    _this = _super.call(this, _props);
-
-    _defineProperty(_assertThisInitialized(_this), "getHeaderProps", function (_ref) {
-      var header = _ref.header,
-          _onClick = _ref.onClick,
-          _ref$isSortable = _ref.isSortable,
-          isSortable = _ref$isSortable === void 0 ? _this.props.isSortable : _ref$isSortable,
-          rest = _objectWithoutProperties(_ref, _excluded);
-
-      var _this$state = _this.state,
-          sortDirection = _this$state.sortDirection,
-          sortHeaderKey = _this$state.sortHeaderKey;
-      return _objectSpread2(_objectSpread2({}, rest), {}, {
+    super(_props);
+    _this = this;
+
+    _defineProperty(this, "getHeaderProps", _ref => {
+      let {
+        header,
+        onClick,
+        isSortable = this.props.isSortable,
+        ...rest
+      } = _ref;
+      const {
+        sortDirection,
+        sortHeaderKey
+      } = this.state;
+      return { ...rest,
         key: header.key,
-        sortDirection: sortDirection,
-        isSortable: isSortable,
+        sortDirection,
+        isSortable,
         isSortHeader: sortHeaderKey === header.key,
-        onClick: function onClick(event) {
-          var nextSortState = getNextSortState(_this.props, _this.state, {
+        onClick: event => {
+          const nextSortState = getNextSortState(this.props, this.state, {
             key: header.key
           });
-
-          _this.setState(nextSortState, function () {
-            _onClick && _this.handleOnHeaderClick(_onClick, {
+          this.setState(nextSortState, () => {
+            onClick && this.handleOnHeaderClick(onClick, {
               sortHeaderKey: header.key,
               sortDirection: nextSortState.sortDirection
             })(event);
           });
         }
-      });
+      };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getExpandHeaderProps", function () {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          onClick = _ref2.onClick,
-          onExpand = _ref2.onExpand,
-          rest = _objectWithoutProperties(_ref2, _excluded2);
-
-      var t = _this.props.translateWithId;
-      var _this$state2 = _this.state,
-          isExpandedAll = _this$state2.isExpandedAll,
-          rowIds = _this$state2.rowIds,
-          rowsById = _this$state2.rowsById;
-      var isExpanded = isExpandedAll || rowIds.every(function (id) {
-        return rowsById[id].isExpanded;
-      });
-      var translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
-      return _objectSpread2(_objectSpread2({}, rest), {}, {
+    _defineProperty(this, "getExpandHeaderProps", function () {
+      let {
+        onClick,
+        onExpand,
+        ...rest
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        translateWithId: t
+      } = _this.props;
+      const {
+        isExpandedAll,
+        rowIds,
+        rowsById
+      } = _this.state;
+      const isExpanded = isExpandedAll || rowIds.every(id => rowsById[id].isExpanded);
+      const translationKey = isExpanded ? translationKeys.collapseAll : translationKeys.expandAll;
+      return { ...rest,
         ariaLabel: t(translationKey),
-        isExpanded: isExpanded,
+        isExpanded,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
         onExpand: composeEventHandlers([_this.handleOnExpandAll, onExpand, onClick ? _this.handleOnExpandHeaderClick(onClick, {
-          isExpanded: isExpanded
+          isExpanded
         }) : null])
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOnHeaderClick", function (onClick, sortParams) {
-      return function (e) {
-        return onClick(e, sortParams);
       };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnExpandHeaderClick", function (onClick, expandParams) {
-      return function (e) {
-        return onClick(e, expandParams);
-      };
+    _defineProperty(this, "handleOnHeaderClick", (onClick, sortParams) => {
+      return e => onClick(e, sortParams);
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getRowProps", function (_ref3) {
-      var row = _ref3.row,
-          onClick = _ref3.onClick,
-          rest = _objectWithoutProperties(_ref3, _excluded3);
+    _defineProperty(this, "handleOnExpandHeaderClick", (onClick, expandParams) => {
+      return e => onClick(e, expandParams);
+    });
 
-      var t = _this.props.translateWithId;
-      var translationKey = row.isExpanded ? translationKeys.collapseRow : translationKeys.expandRow;
-      return _objectSpread2(_objectSpread2({}, rest), {}, {
+    _defineProperty(this, "getRowProps", _ref2 => {
+      let {
+        row,
+        onClick,
+        ...rest
+      } = _ref2;
+      const {
+        translateWithId: t
+      } = this.props;
+      const translationKey = row.isExpanded ? translationKeys.collapseRow : translationKeys.expandRow;
+      return { ...rest,
         key: row.id,
         // Compose the event handlers so we don't overwrite a consumer's `onClick`
         // handler
-        onExpand: composeEventHandlers([_this.handleOnExpandRow(row.id), onClick]),
+        onExpand: composeEventHandlers([this.handleOnExpandRow(row.id), onClick]),
         isExpanded: row.isExpanded,
         ariaLabel: t(translationKey),
         isSelected: row.isSelected,
         disabled: row.disabled
-      });
+      };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSelectionProps", function () {
-      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-          onClick = _ref4.onClick,
-          row = _ref4.row,
-          rest = _objectWithoutProperties(_ref4, _excluded4);
-
-      var t = _this.props.translateWithId; // If we're given a row, return the selection state values for that row
+    _defineProperty(this, "getSelectionProps", function () {
+      let {
+        onClick,
+        row,
+        ...rest
+      } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        translateWithId: t
+      } = _this.props; // If we're given a row, return the selection state values for that row
 
       if (row) {
-        var _translationKey = row.isSelected ? translationKeys.unselectRow : translationKeys.selectRow;
-
-        return _objectSpread2(_objectSpread2({}, rest), {}, {
+        const translationKey = row.isSelected ? translationKeys.unselectRow : translationKeys.selectRow;
+        return { ...rest,
           checked: row.isSelected,
           onSelect: composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
-          id: "".concat(_this.getTablePrefix(), "__select-row-").concat(row.id),
-          name: "select-row-".concat(row.id),
-          ariaLabel: t(_translationKey),
+          id: `${_this.getTablePrefix()}__select-row-${row.id}`,
+          name: `select-row-${row.id}`,
+          ariaLabel: t(translationKey),
           disabled: row.disabled,
           radio: _this.props.radio || null
-        });
+        };
       } // Otherwise, we're working on `TableSelectAll` which handles toggling the
       // selection state of all rows.
 
 
-      var rowCount = _this.state.rowIds.length;
+      const rowCount = _this.state.rowIds.length;
 
-      var selectedRowCount = _this.getSelectedRows().length;
+      const selectedRowCount = _this.getSelectedRows().length;
 
-      var checked = rowCount > 0 && selectedRowCount === rowCount;
-      var indeterminate = rowCount > 0 && selectedRowCount > 0 && selectedRowCount !== rowCount;
-      var translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
-      return _objectSpread2(_objectSpread2({}, rest), {}, {
+      const checked = rowCount > 0 && selectedRowCount === rowCount;
+      const indeterminate = rowCount > 0 && selectedRowCount > 0 && selectedRowCount !== rowCount;
+      const translationKey = checked || indeterminate ? translationKeys.unselectAll : translationKeys.selectAll;
+      return { ...rest,
         ariaLabel: t(translationKey),
-        checked: checked,
-        id: "".concat(_this.getTablePrefix(), "__select-all"),
-        indeterminate: indeterminate,
+        checked,
+        id: `${_this.getTablePrefix()}__select-all`,
+        indeterminate,
         name: 'select-all',
         onSelect: composeEventHandlers([_this.handleSelectAll, onClick])
-      });
+      };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getToolbarProps", function () {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var size = _this.props.size;
-      var isSmall = size === 'xs' || size === 'sm';
-      return _objectSpread2(_objectSpread2({}, props), {}, {
+    _defineProperty(this, "getToolbarProps", function () {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        size
+      } = _this.props;
+      let isSmall = size === 'xs' || size === 'sm';
+      return { ...props,
         size: isSmall ? 'sm' : undefined
-      });
+      };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getBatchActionProps", function () {
-      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      var shouldShowBatchActions = _this.state.shouldShowBatchActions;
+    _defineProperty(this, "getBatchActionProps", function () {
+      let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      const {
+        shouldShowBatchActions
+      } = _this.state;
 
-      var totalSelected = _this.getSelectedRows().length;
+      const totalSelected = _this.getSelectedRows().length;
 
-      return _objectSpread2(_objectSpread2({}, props), {}, {
+      return { ...props,
         shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
-        totalSelected: totalSelected,
+        totalSelected,
         onCancel: _this.handleOnCancel
-      });
+      };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getTableProps", function () {
-      var _this$props = _this.props,
-          useZebraStyles = _this$props.useZebraStyles,
-          size = _this$props.size,
-          isSortable = _this$props.isSortable,
-          useStaticWidth = _this$props.useStaticWidth,
-          stickyHeader = _this$props.stickyHeader,
-          overflowMenuOnHover = _this$props.overflowMenuOnHover;
+    _defineProperty(this, "getTableProps", () => {
+      const {
+        useZebraStyles,
+        size,
+        isSortable,
+        useStaticWidth,
+        stickyHeader,
+        overflowMenuOnHover
+      } = this.props;
       return {
-        useZebraStyles: useZebraStyles,
-        size: size,
-        isSortable: isSortable,
-        useStaticWidth: useStaticWidth,
-        stickyHeader: stickyHeader,
-        overflowMenuOnHover: overflowMenuOnHover
+        useZebraStyles,
+        size,
+        isSortable,
+        useStaticWidth,
+        stickyHeader,
+        overflowMenuOnHover
       };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getTableContainerProps", function () {
-      var _this$props2 = _this.props,
-          stickyHeader = _this$props2.stickyHeader,
-          useStaticWidth = _this$props2.useStaticWidth;
+    _defineProperty(this, "getTableContainerProps", () => {
+      const {
+        stickyHeader,
+        useStaticWidth
+      } = this.props;
       return {
-        stickyHeader: stickyHeader,
-        useStaticWidth: useStaticWidth
+        stickyHeader,
+        useStaticWidth
       };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getSelectedRows", function () {
-      return _this.state.rowIds.filter(function (id) {
-        var row = _this.state.rowsById[id];
-        return row.isSelected && !row.disabled;
-      });
-    });
+    _defineProperty(this, "getSelectedRows", () => this.state.rowIds.filter(id => {
+      const row = this.state.rowsById[id];
+      return row.isSelected && !row.disabled;
+    }));
 
-    _defineProperty(_assertThisInitialized(_this), "getFilteredRowIds", function () {
-      var filteredRowIds = typeof _this.state.filterInputValue === 'string' ? _this.props.filterRows({
-        rowIds: _this.state.rowIds,
-        headers: _this.props.headers,
-        cellsById: _this.state.cellsById,
-        inputValue: _this.state.filterInputValue,
-        getCellId: getCellId
-      }) : _this.state.rowIds;
+    _defineProperty(this, "getFilteredRowIds", () => {
+      const filteredRowIds = typeof this.state.filterInputValue === 'string' ? this.props.filterRows({
+        rowIds: this.state.rowIds,
+        headers: this.props.headers,
+        cellsById: this.state.cellsById,
+        inputValue: this.state.filterInputValue,
+        getCellId
+      }) : this.state.rowIds;
 
       if (filteredRowIds.length == 0) {
         return [];
@@ -285,271 +286,243 @@ var DataTable = /*#__PURE__*/function (_React$Component) {
       return filteredRowIds;
     });
 
-    _defineProperty(_assertThisInitialized(_this), "getTablePrefix", function () {
-      return "data-table-".concat(_this.instanceId);
-    });
+    _defineProperty(this, "getTablePrefix", () => `data-table-${this.instanceId}`);
 
-    _defineProperty(_assertThisInitialized(_this), "setAllSelectedState", function (initialState, isSelected, filteredRowIds) {
-      var rowIds = initialState.rowIds;
+    _defineProperty(this, "setAllSelectedState", (initialState, isSelected, filteredRowIds) => {
+      const {
+        rowIds
+      } = initialState;
       return {
-        rowsById: rowIds.reduce(function (acc, id) {
-          return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, id, _objectSpread2(_objectSpread2({}, initialState.rowsById[id]), !initialState.rowsById[id].disabled && {
-            isSelected: filteredRowIds.includes(id) && isSelected
-          })));
-        }, {})
+        rowsById: rowIds.reduce((acc, id) => ({ ...acc,
+          [id]: { ...initialState.rowsById[id],
+            ...(!initialState.rowsById[id].disabled && {
+              isSelected: filteredRowIds.includes(id) && isSelected
+            })
+          }
+        }), {})
       };
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnCancel", function () {
-      _this.setState(function (state) {
-        return _objectSpread2({
-          shouldShowBatchActions: false
-        }, _this.setAllSelectedState(state, false, _this.getFilteredRowIds()));
+    _defineProperty(this, "handleOnCancel", () => {
+      this.setState(state => {
+        return {
+          shouldShowBatchActions: false,
+          ...this.setAllSelectedState(state, false, this.getFilteredRowIds())
+        };
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleSelectAll", function () {
-      _this.setState(function (state) {
-        var filteredRowIds = _this.getFilteredRowIds();
-
-        var rowsById = state.rowsById;
-        var isSelected = !(Object.values(rowsById).filter(function (row) {
-          return row.isSelected && !row.disabled;
-        }).length > 0);
-        return _objectSpread2({
-          shouldShowBatchActions: isSelected
-        }, _this.setAllSelectedState(state, isSelected, filteredRowIds));
+    _defineProperty(this, "handleSelectAll", () => {
+      this.setState(state => {
+        const filteredRowIds = this.getFilteredRowIds();
+        const {
+          rowsById
+        } = state;
+        const isSelected = !(Object.values(rowsById).filter(row => row.isSelected && !row.disabled).length > 0);
+        return {
+          shouldShowBatchActions: isSelected,
+          ...this.setAllSelectedState(state, isSelected, filteredRowIds)
+        };
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnSelectRow", function (rowId) {
-      return function () {
-        _this.setState(function (state) {
-          var row = state.rowsById[rowId];
-
-          if (_this.props.radio) {
-            // deselect all radio buttons
-            var rowsById = Object.entries(state.rowsById).reduce(function (p, c) {
-              var _c = _slicedToArray(c, 2),
-                  key = _c[0],
-                  val = _c[1];
-
-              val.isSelected = false;
-              p[key] = val;
-              return p;
-            }, {});
-            return {
-              shouldShowBatchActions: false,
-              rowsById: _objectSpread2(_objectSpread2({}, rowsById), {}, _defineProperty({}, rowId, _objectSpread2(_objectSpread2({}, row), {}, {
+    _defineProperty(this, "handleOnSelectRow", rowId => () => {
+      this.setState(state => {
+        const row = state.rowsById[rowId];
+
+        if (this.props.radio) {
+          // deselect all radio buttons
+          const rowsById = Object.entries(state.rowsById).reduce((p, c) => {
+            const [key, val] = c;
+            val.isSelected = false;
+            p[key] = val;
+            return p;
+          }, {});
+          return {
+            shouldShowBatchActions: false,
+            rowsById: { ...rowsById,
+              [rowId]: { ...row,
                 isSelected: !row.isSelected
-              })))
-            };
-          }
+              }
+            }
+          };
+        }
 
-          var selectedRows = state.rowIds.filter(function (id) {
-            return state.rowsById[id].isSelected;
-          }).length; // Predict the length of the selected rows after this change occurs
+        const selectedRows = state.rowIds.filter(id => state.rowsById[id].isSelected).length; // Predict the length of the selected rows after this change occurs
 
-          var selectedRowsCount = !row.isSelected ? selectedRows + 1 : selectedRows - 1;
-          return {
-            // Basic assumption here is that we want to show the batch action bar if
-            // the row is being selected. If it's being unselected, then see if we
-            // have a non-zero number of selected rows that batch actions could
-            // still apply to
-            shouldShowBatchActions: !row.isSelected || selectedRowsCount > 0,
-            rowsById: _objectSpread2(_objectSpread2({}, state.rowsById), {}, _defineProperty({}, rowId, _objectSpread2(_objectSpread2({}, row), {}, {
+        const selectedRowsCount = !row.isSelected ? selectedRows + 1 : selectedRows - 1;
+        return {
+          // Basic assumption here is that we want to show the batch action bar if
+          // the row is being selected. If it's being unselected, then see if we
+          // have a non-zero number of selected rows that batch actions could
+          // still apply to
+          shouldShowBatchActions: !row.isSelected || selectedRowsCount > 0,
+          rowsById: { ...state.rowsById,
+            [rowId]: { ...row,
               isSelected: !row.isSelected
-            })))
-          };
-        });
-      };
+            }
+          }
+        };
+      });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnExpandRow", function (rowId) {
-      return function () {
-        _this.setState(function (state) {
-          var row = state.rowsById[rowId];
-          var isExpandedAll = state.isExpandedAll;
-          return {
-            isExpandedAll: row.isExpanded ? false : isExpandedAll,
-            rowsById: _objectSpread2(_objectSpread2({}, state.rowsById), {}, _defineProperty({}, rowId, _objectSpread2(_objectSpread2({}, row), {}, {
+    _defineProperty(this, "handleOnExpandRow", rowId => () => {
+      this.setState(state => {
+        const row = state.rowsById[rowId];
+        const {
+          isExpandedAll
+        } = state;
+        return {
+          isExpandedAll: row.isExpanded ? false : isExpandedAll,
+          rowsById: { ...state.rowsById,
+            [rowId]: { ...row,
               isExpanded: !row.isExpanded
-            })))
-          };
-        });
-      };
+            }
+          }
+        };
+      });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnExpandAll", function () {
-      _this.setState(function (state) {
-        var rowIds = state.rowIds,
-            isExpandedAll = state.isExpandedAll;
+    _defineProperty(this, "handleOnExpandAll", () => {
+      this.setState(state => {
+        const {
+          rowIds,
+          isExpandedAll
+        } = state;
         return {
           isExpandedAll: !isExpandedAll,
-          rowsById: rowIds.reduce(function (acc, id) {
-            return _objectSpread2(_objectSpread2({}, acc), {}, _defineProperty({}, id, _objectSpread2(_objectSpread2({}, state.rowsById[id]), {}, {
+          rowsById: rowIds.reduce((acc, id) => ({ ...acc,
+            [id]: { ...state.rowsById[id],
               isExpanded: !isExpandedAll
-            })));
-          }, {})
+            }
+          }), {})
         };
       });
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleSortBy", function (headerKey) {
-      return function () {
-        _this.setState(function (state) {
-          return getNextSortState(_this.props, state, {
-            key: headerKey
-          });
-        });
-      };
+    _defineProperty(this, "handleSortBy", headerKey => () => {
+      this.setState(state => getNextSortState(this.props, state, {
+        key: headerKey
+      }));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "handleOnInputValueChange", function (event, defaultValue) {
+    _defineProperty(this, "handleOnInputValueChange", (event, defaultValue) => {
       if (event.target) {
-        _this.setState({
+        this.setState({
           filterInputValue: event.target.value
         });
       }
 
       if (defaultValue) {
-        _this.setState({
+        this.setState({
           filterInputValue: defaultValue
         });
       }
     });
 
-    _this.state = _objectSpread2(_objectSpread2({}, getDerivedStateFromProps(_props, {})), {}, {
+    this.state = { ...getDerivedStateFromProps(_props, {}),
       isExpandedAll: false // Start with collapsed state, treat `undefined` as neutral state
 
-    });
-    _this.instanceId = getInstanceId();
-    return _this;
+    };
+    this.instanceId = getInstanceId();
   }
 
-  _createClass(DataTable, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _this2 = this;
+  componentDidUpdate(prevProps) {
+    if (prevProps === this.props) {
+      return;
+    }
 
-      if (prevProps === this.props) {
-        return;
-      }
+    const prevRowIds = prevProps.rows.map(row => row.id);
+    const rowIds = this.props.rows.map(row => row.id);
 
-      var prevRowIds = prevProps.rows.map(function (row) {
-        return row.id;
-      });
-      var rowIds = this.props.rows.map(function (row) {
-        return row.id;
-      });
-
-      if (!isEqual(prevRowIds, rowIds)) {
-        this.setState(function (state) {
-          return getDerivedStateFromProps(_this2.props, state);
-        });
-        return;
-      }
+    if (!isEqual(prevRowIds, rowIds)) {
+      this.setState(state => getDerivedStateFromProps(this.props, state));
+      return;
+    }
 
-      var prevHeaders = prevProps.headers.map(function (header) {
-        return header.key;
-      });
-      var headers = this.props.headers.map(function (header) {
-        return header.key;
-      });
+    const prevHeaders = prevProps.headers.map(header => header.key);
+    const headers = this.props.headers.map(header => header.key);
 
-      if (!isEqual(prevHeaders, headers)) {
-        this.setState(function (state) {
-          return getDerivedStateFromProps(_this2.props, state);
-        });
-        return;
-      }
+    if (!isEqual(prevHeaders, headers)) {
+      this.setState(state => getDerivedStateFromProps(this.props, state));
+      return;
+    }
 
-      if (!isEqual(prevProps.rows, this.props.rows)) {
-        this.setState(function (state) {
-          return getDerivedStateFromProps(_this2.props, state);
-        });
-        return;
-      }
+    if (!isEqual(prevProps.rows, this.props.rows)) {
+      this.setState(state => getDerivedStateFromProps(this.props, state));
+      return;
     }
-    /**
-     * Get the props associated with the given header. Mostly used for adding in
-     * sorting behavior.
-     *
-     * @param {object} config
-     * @param {string} config.header the header we want the props for
-     * @param {Function} config.onClick a custom click handler for the header
-     * @param {boolean} config.isSortable
-     * @returns {object}
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      var _this3 = this;
-
-      // eslint-disable-next-line react/prop-types
-      var _this$props3 = this.props,
-          children = _this$props3.children,
-          filterRows = _this$props3.filterRows,
-          headers = _this$props3.headers,
-          render = _this$props3.render;
-      var _this$state3 = this.state,
-          filterInputValue = _this$state3.filterInputValue,
-          rowIds = _this$state3.rowIds,
-          rowsById = _this$state3.rowsById,
-          cellsById = _this$state3.cellsById;
-      var filteredRowIds = typeof filterInputValue === 'string' ? filterRows({
-        rowIds: rowIds,
-        headers: headers,
-        cellsById: cellsById,
-        inputValue: filterInputValue,
-        getCellId: getCellId
-      }) : rowIds;
-      var renderProps = {
-        // Data derived from state
-        rows: denormalize(filteredRowIds, rowsById, cellsById),
-        headers: this.props.headers,
-        selectedRows: denormalize(this.getSelectedRows(), rowsById, cellsById),
-        // Prop accessors/getters
-        getHeaderProps: this.getHeaderProps,
-        getExpandHeaderProps: this.getExpandHeaderProps,
-        getRowProps: this.getRowProps,
-        getSelectionProps: this.getSelectionProps,
-        getToolbarProps: this.getToolbarProps,
-        getBatchActionProps: this.getBatchActionProps,
-        getTableProps: this.getTableProps,
-        getTableContainerProps: this.getTableContainerProps,
-        // Custom event handlers
-        onInputChange: this.handleOnInputValueChange,
-        // Expose internal state change actions
-        sortBy: function sortBy(headerKey) {
-          return _this3.handleSortBy(headerKey)();
-        },
-        selectAll: this.handleSelectAll,
-        selectRow: function selectRow(rowId) {
-          return _this3.handleOnSelectRow(rowId)();
-        },
-        expandRow: function expandRow(rowId) {
-          return _this3.handleOnExpandRow(rowId)();
-        },
-        expandAll: this.handleOnExpandAll,
-        radio: this.props.radio
-      };
+  }
+  /**
+   * Get the props associated with the given header. Mostly used for adding in
+   * sorting behavior.
+   *
+   * @param {object} config
+   * @param {string} config.header the header we want the props for
+   * @param {Function} config.onClick a custom click handler for the header
+   * @param {boolean} config.isSortable
+   * @returns {object}
+   */
 
-      if (render !== undefined) {
-        return render(renderProps);
-      }
 
-      if (children !== undefined) {
-        return children(renderProps);
-      }
+  render() {
+    // eslint-disable-next-line react/prop-types
+    const {
+      children,
+      filterRows,
+      headers,
+      render
+    } = this.props;
+    const {
+      filterInputValue,
+      rowIds,
+      rowsById,
+      cellsById
+    } = this.state;
+    const filteredRowIds = typeof filterInputValue === 'string' ? filterRows({
+      rowIds,
+      headers,
+      cellsById,
+      inputValue: filterInputValue,
+      getCellId
+    }) : rowIds;
+    const renderProps = {
+      // Data derived from state
+      rows: denormalize(filteredRowIds, rowsById, cellsById),
+      headers: this.props.headers,
+      selectedRows: denormalize(this.getSelectedRows(), rowsById, cellsById),
+      // Prop accessors/getters
+      getHeaderProps: this.getHeaderProps,
+      getExpandHeaderProps: this.getExpandHeaderProps,
+      getRowProps: this.getRowProps,
+      getSelectionProps: this.getSelectionProps,
+      getToolbarProps: this.getToolbarProps,
+      getBatchActionProps: this.getBatchActionProps,
+      getTableProps: this.getTableProps,
+      getTableContainerProps: this.getTableContainerProps,
+      // Custom event handlers
+      onInputChange: this.handleOnInputValueChange,
+      // Expose internal state change actions
+      sortBy: headerKey => this.handleSortBy(headerKey)(),
+      selectAll: this.handleSelectAll,
+      selectRow: rowId => this.handleOnSelectRow(rowId)(),
+      expandRow: rowId => this.handleOnExpandRow(rowId)(),
+      expandAll: this.handleOnExpandAll,
+      radio: this.props.radio
+    };
+
+    if (render !== undefined) {
+      return render(renderProps);
+    }
 
-      return null;
+    if (children !== undefined) {
+      return children(renderProps);
     }
-  }]);
 
-  return DataTable;
-}(React__default.Component);
+    return null;
+  }
+
+}
 
 _defineProperty(DataTable, "propTypes", {
   /**
@@ -642,7 +615,7 @@ _defineProperty(DataTable, "defaultProps", {
   locale: 'en',
   size: 'lg',
   overflowMenuOnHover: true,
-  translateWithId: translateWithId
+  translateWithId
 });
 
 _defineProperty(DataTable, "translationKeys", Object.values(translationKeys));