@carbon/react 0.17.0 → 1.0.0-rc.0

package/lib/components/DataTable/DataTable.js

@@ -0,0 +1,667 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var isEqual = require('lodash.isequal');
+var getDerivedStateFromProps = require('./state/getDerivedStateFromProps.js');
+var sorting = require('./state/sorting.js');
+var cells = require('./tools/cells.js');
+var denormalize = require('./tools/denormalize.js');
+var events = require('../../tools/events.js');
+var filter = require('./tools/filter.js');
+var sorting$1 = require('./tools/sorting.js');
+var instanceId = require('./tools/instanceId.js');
+var FeatureFlags = require('@carbon/feature-flags');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
+var FeatureFlags__namespace = /*#__PURE__*/_interopNamespace(FeatureFlags);
+
+var _excluded = ["header", "onClick", "isSortable"],
+    _excluded2 = ["onClick"],
+    _excluded3 = ["row", "onClick"],
+    _excluded4 = ["onClick", "row"];
+
+var _defaultTranslations;
+var getInstanceId = instanceId["default"]();
+var translationKeys = {
+  expandRow: 'carbon.table.row.expand',
+  collapseRow: 'carbon.table.row.collapse',
+  expandAll: 'carbon.table.all.expand',
+  collapseAll: 'carbon.table.all.collapse',
+  selectAll: 'carbon.table.all.select',
+  unselectAll: 'carbon.table.all.unselect',
+  selectRow: 'carbon.table.row.select',
+  unselectRow: 'carbon.table.row.unselect'
+};
+var defaultTranslations = (_defaultTranslations = {}, _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationKeys.expandAll, 'Expand all rows'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationKeys.collapseAll, 'Collapse all rows'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationKeys.expandRow, 'Expand current row'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationKeys.collapseRow, 'Collapse current row'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationKeys.selectAll, 'Select all rows'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationKeys.unselectAll, 'Unselect all rows'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationKeys.selectRow, 'Select row'), _rollupPluginBabelHelpers.defineProperty(_defaultTranslations, translationKeys.unselectRow, 'Unselect row'), _defaultTranslations);
+
+var translateWithId = function translateWithId(id) {
+  return 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
+ * to the state of what we're rendering, so internally we end up normalizing the
+ * given data and then denormalizing it when rendering.
+ *
+ * As a result, each part of the DataTable is accessible through look-up by id,
+ * and updating the state of the single entity will cascade updates to the
+ * consumer.
+ */
+
+
+var DataTable = /*#__PURE__*/function (_React$Component) {
+  _rollupPluginBabelHelpers.inherits(DataTable, _React$Component);
+
+  var _super = _rollupPluginBabelHelpers.createSuper(DataTable);
+
+  function DataTable(_props) {
+    var _this;
+
+    _rollupPluginBabelHelpers.classCallCheck(this, DataTable);
+
+    _this = _super.call(this, _props);
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+      var _this$state = _this.state,
+          sortDirection = _this$state.sortDirection,
+          sortHeaderKey = _this$state.sortHeaderKey;
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+        key: header.key,
+        sortDirection: sortDirection,
+        isSortable: isSortable,
+        isSortHeader: sortHeaderKey === header.key,
+        onClick: function onClick(event) {
+          var nextSortState = sorting.getNextSortState(_this.props, _this.state, {
+            key: header.key
+          });
+
+          _this.setState(nextSortState, function () {
+            _onClick && _this.handleOnHeaderClick(_onClick, {
+              sortHeaderKey: header.key,
+              sortDirection: nextSortState.sortDirection
+            })(event);
+          });
+        }
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getExpandHeaderProps", function () {
+      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          onClick = _ref2.onClick,
+          rest = _rollupPluginBabelHelpers.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+        ariaLabel: t(translationKey),
+        isExpanded: isExpanded,
+        // Compose the event handlers so we don't overwrite a consumer's `onClick`
+        // handler
+        onExpand: events.composeEventHandlers([_this.handleOnExpandAll, onClick ? _this.handleOnExpandHeaderClick(onClick, {
+          isExpanded: isExpanded
+        }) : null])
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnHeaderClick", function (onClick, sortParams) {
+      return function (e) {
+        return onClick(e, sortParams);
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnExpandHeaderClick", function (onClick, expandParams) {
+      return function (e) {
+        return onClick(e, expandParams);
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getRowProps", function (_ref3) {
+      var row = _ref3.row,
+          onClick = _ref3.onClick,
+          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref3, _excluded3);
+
+      var t = _this.props.translateWithId;
+      var translationKey = row.isExpanded ? translationKeys.collapseRow : translationKeys.expandRow;
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+        key: row.id,
+        // Compose the event handlers so we don't overwrite a consumer's `onClick`
+        // handler
+        onExpand: events.composeEventHandlers([_this.handleOnExpandRow(row.id), onClick]),
+        isExpanded: row.isExpanded,
+        ariaLabel: t(translationKey),
+        isSelected: row.isSelected,
+        disabled: row.disabled
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getSelectionProps", function () {
+      var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+          onClick = _ref4.onClick,
+          row = _ref4.row,
+          rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref4, _excluded4);
+
+      var t = _this.props.translateWithId; // 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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+          checked: row.isSelected,
+          onSelect: events.composeEventHandlers([_this.handleOnSelectRow(row.id), onClick]),
+          id: "".concat(_this.getTablePrefix(), "__select-row-").concat(row.id),
+          name: "select-row-".concat(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;
+
+      var 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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rest), {}, {
+        ariaLabel: t(translationKey),
+        checked: checked,
+        id: "".concat(_this.getTablePrefix(), "__select-all"),
+        indeterminate: indeterminate,
+        name: 'select-all',
+        onSelect: events.composeEventHandlers([_this.handleSelectAll, onClick])
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getToolbarProps", function () {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var size = _this.props.size; // Remove compact, short in V11
+
+      var isSmall = size === 'compact' || size === 'short' || size === 'xs' || size === 'sm';
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+        size: isSmall ? 'small' : 'normal'
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getBatchActionProps", function () {
+      var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var shouldShowBatchActions = _this.state.shouldShowBatchActions;
+
+      var totalSelected = _this.getSelectedRows().length;
+
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, props), {}, {
+        shouldShowBatchActions: shouldShowBatchActions && totalSelected > 0,
+        totalSelected: totalSelected,
+        onCancel: _this.handleOnCancel
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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,
+          shouldShowBorder = _this$props.shouldShowBorder,
+          stickyHeader = _this$props.stickyHeader,
+          overflowMenuOnHover = _this$props.overflowMenuOnHover;
+      return {
+        useZebraStyles: useZebraStyles,
+        size: size,
+        isSortable: isSortable,
+        useStaticWidth: useStaticWidth,
+        shouldShowBorder: shouldShowBorder,
+        stickyHeader: stickyHeader,
+        overflowMenuOnHover: overflowMenuOnHover
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getTableContainerProps", function () {
+      var _this$props2 = _this.props,
+          stickyHeader = _this$props2.stickyHeader,
+          useStaticWidth = _this$props2.useStaticWidth;
+      return {
+        stickyHeader: stickyHeader,
+        useStaticWidth: useStaticWidth
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getSelectedRows", function () {
+      return _this.state.rowIds.filter(function (id) {
+        var row = _this.state.rowsById[id];
+        return row.isSelected && !row.disabled;
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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: cells.getCellId
+      }) : _this.state.rowIds;
+
+      if (filteredRowIds.length == 0) {
+        return [];
+      }
+
+      return filteredRowIds;
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "getTablePrefix", function () {
+      return "data-table-".concat(_this.instanceId);
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "setAllSelectedState", function (initialState, isSelected, filteredRowIds) {
+      var rowIds = initialState.rowIds;
+      return {
+        rowsById: rowIds.reduce(function (acc, id) {
+          return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, acc), {}, _rollupPluginBabelHelpers.defineProperty({}, id, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialState.rowsById[id]), !initialState.rowsById[id].disabled && {
+            isSelected: filteredRowIds.includes(id) && isSelected
+          })));
+        }, {})
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnCancel", function () {
+      _this.setState(function (state) {
+        return _rollupPluginBabelHelpers.objectSpread2({
+          shouldShowBatchActions: false
+        }, _this.setAllSelectedState(state, false, _this.getFilteredRowIds()));
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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 _rollupPluginBabelHelpers.objectSpread2({
+          shouldShowBatchActions: isSelected
+        }, _this.setAllSelectedState(state, isSelected, filteredRowIds));
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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 = _rollupPluginBabelHelpers.slicedToArray(c, 2),
+                  key = _c[0],
+                  val = _c[1];
+
+              val.isSelected = false;
+              p[key] = val;
+              return p;
+            }, {});
+            return {
+              shouldShowBatchActions: false,
+              rowsById: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, rowsById), {}, _rollupPluginBabelHelpers.defineProperty({}, rowId, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, 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
+
+          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: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state.rowsById), {}, _rollupPluginBabelHelpers.defineProperty({}, rowId, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, row), {}, {
+              isSelected: !row.isSelected
+            })))
+          };
+        });
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.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: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state.rowsById), {}, _rollupPluginBabelHelpers.defineProperty({}, rowId, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, row), {}, {
+              isExpanded: !row.isExpanded
+            })))
+          };
+        });
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnExpandAll", function () {
+      _this.setState(function (state) {
+        var rowIds = state.rowIds,
+            isExpandedAll = state.isExpandedAll;
+        return {
+          isExpandedAll: !isExpandedAll,
+          rowsById: rowIds.reduce(function (acc, id) {
+            return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, acc), {}, _rollupPluginBabelHelpers.defineProperty({}, id, _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, state.rowsById[id]), {}, {
+              isExpanded: !isExpandedAll
+            })));
+          }, {})
+        };
+      });
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleSortBy", function (headerKey) {
+      return function () {
+        _this.setState(function (state) {
+          return sorting.getNextSortState(_this.props, state, {
+            key: headerKey
+          });
+        });
+      };
+    });
+
+    _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.assertThisInitialized(_this), "handleOnInputValueChange", function (event, defaultValue) {
+      if (event.target) {
+        _this.setState({
+          filterInputValue: event.target.value
+        });
+      }
+
+      if (defaultValue) {
+        _this.setState({
+          filterInputValue: defaultValue
+        });
+      }
+    });
+
+    _this.state = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, getDerivedStateFromProps["default"](_props, {})), {}, {
+      isExpandedAll: false // Start with collapsed state, treat `undefined` as neutral state
+
+    });
+    _this.instanceId = getInstanceId();
+    return _this;
+  }
+
+  _rollupPluginBabelHelpers.createClass(DataTable, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var _this2 = this;
+
+      if (prevProps === this.props) {
+        return;
+      }
+
+      var prevRowIds = prevProps.rows.map(function (row) {
+        return row.id;
+      });
+      var rowIds = this.props.rows.map(function (row) {
+        return row.id;
+      });
+
+      if (!isEqual__default["default"](prevRowIds, rowIds)) {
+        this.setState(function (state) {
+          return getDerivedStateFromProps["default"](_this2.props, state);
+        });
+        return;
+      }
+
+      var prevHeaders = prevProps.headers.map(function (header) {
+        return header.key;
+      });
+      var headers = this.props.headers.map(function (header) {
+        return header.key;
+      });
+
+      if (!isEqual__default["default"](prevHeaders, headers)) {
+        this.setState(function (state) {
+          return getDerivedStateFromProps["default"](_this2.props, state);
+        });
+        return;
+      }
+
+      if (!isEqual__default["default"](prevProps.rows, this.props.rows)) {
+        this.setState(function (state) {
+          return getDerivedStateFromProps["default"](_this2.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: cells.getCellId
+      }) : rowIds;
+      var renderProps = {
+        // Data derived from state
+        rows: denormalize["default"](filteredRowIds, rowsById, cellsById),
+        headers: this.props.headers,
+        selectedRows: denormalize["default"](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
+      };
+
+      if (render !== undefined) {
+        return render(renderProps);
+      }
+
+      if (children !== undefined) {
+        return children(renderProps);
+      }
+
+      return null;
+    }
+  }]);
+
+  return DataTable;
+}(React__default["default"].Component);
+
+_rollupPluginBabelHelpers.defineProperty(DataTable, "propTypes", {
+  /**
+   * Optional hook to manually control filtering of the rows from the
+   * TableToolbarSearch component
+   */
+  filterRows: PropTypes__default["default"].func,
+
+  /**
+   * The `headers` prop represents the order in which the headers should
+   * appear in the table. We expect an array of objects to be passed in, where
+   * `key` is the name of the key in a row object, and `header` is the name of
+   * the header.
+   */
+  headers: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    key: PropTypes__default["default"].string.isRequired,
+    header: PropTypes__default["default"].node.isRequired
+  })).isRequired,
+
+  /**
+   * Specify whether the table should be able to be sorted by its headers
+   */
+  isSortable: PropTypes__default["default"].bool,
+
+  /**
+   * Provide a string for the current locale
+   */
+  locale: PropTypes__default["default"].string,
+
+  /**
+   * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+   */
+  overflowMenuOnHover: PropTypes__default["default"].bool,
+
+  /**
+   * Specify whether the control should be a radio button or inline checkbox
+   */
+  radio: PropTypes__default["default"].bool,
+
+  /**
+   * The `rows` prop is where you provide us with a list of all the rows that
+   * you want to render in the table. The only hard requirement is that this
+   * is an array of objects, and that each object has a unique `id` field
+   * available on it.
+   */
+  rows: PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+    id: PropTypes__default["default"].string.isRequired,
+    disabled: PropTypes__default["default"].bool,
+    isSelected: PropTypes__default["default"].bool,
+    isExpanded: PropTypes__default["default"].bool
+  })).isRequired,
+
+  /**
+   * `false` If true, will remove the table border
+   */
+  shouldShowBorder: PropTypes__default["default"].bool,
+
+  /**
+   *  Change the row height of table. Currently supports `xs`, `sm`, `md`, `lg`, and `xl`.
+   */
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? PropTypes__default["default"].oneOf(['xs', 'sm', 'md', 'lg', 'xl']) : PropTypes__default["default"].oneOf(['compact', 'short', 'normal', 'tall', 'xs', 'sm', 'md', 'lg', 'xl']),
+
+  /**
+   * Optional hook to manually control sorting of the rows.
+   */
+  sortRow: PropTypes__default["default"].func,
+
+  /**
+   * Specify whether the header should be sticky.
+   * Still experimental: may not work with every combination of table props
+   */
+  stickyHeader: PropTypes__default["default"].bool,
+
+  /**
+   * Optional method that takes in a message id and returns an
+   * internationalized string. See `DataTable.translationKeys` for all
+   * available message ids.
+   */
+  translateWithId: PropTypes__default["default"].func,
+
+  /**
+   * `false` If true, will use a width of 'auto' instead of 100%
+   */
+  useStaticWidth: PropTypes__default["default"].bool,
+
+  /**
+   * `true` to add useZebraStyles striping.
+   */
+  useZebraStyles: PropTypes__default["default"].bool
+});
+
+_rollupPluginBabelHelpers.defineProperty(DataTable, "defaultProps", {
+  sortRow: sorting$1.defaultSortRow,
+  filterRows: filter.defaultFilterRows,
+  locale: 'en',
+  size: FeatureFlags__namespace.enabled('enable-v11-release') ? 'lg' : 'normal',
+  overflowMenuOnHover: true,
+  translateWithId: translateWithId
+});
+
+_rollupPluginBabelHelpers.defineProperty(DataTable, "translationKeys", Object.values(translationKeys));
+
+exports["default"] = DataTable;