@elliemae/ds-data-table 2.0.0-alpha.1 → 2.0.0-alpha.13

package/cjs/parts/VirtualRowsList.js

@@ -14,18 +14,25 @@ var styled = require('../styled.js');
 var Loader = require('./Loader.js');
 require('../redux/reducers/index.js');
 var constants = require('../configs/constants.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 require('../configs/useRowFlattenization.js');
 require('@babel/runtime/helpers/defineProperty');
-require('@elliemae/ds-icons/ArrowShortReturn');
-require('styled-components');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
+require('styled-components');
 var jsxRuntime = require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('@elliemae/ds-form');
 require('./TableContent.js');
 require('./Row.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('./HoC/SortableItemContext.js');
 var useDispatchRowsActions = require('../redux/reducers/rowsReducers/useDispatchRowsActions.js');
 
@@ -55,7 +62,7 @@ const VirtualRowsListComponent = () => {
       totalColumnsWidth
     },
     flattenedData
-  } = React.useContext(DataTableContext['default']);
+  } = React.useContext(DataTableContext["default"]);
   const {
     totalSize,
     scrollToIndex
@@ -86,13 +93,13 @@ const VirtualRowsListComponent = () => {
     "data-testid": constants.DATA_TESTID.DATA_TABLE_SCROLLABLE_CONTAINER,
     onKeyDown: onKeyDown,
     tabIndex: -1,
-    children: /*#__PURE__*/_jsx__default['default'](styled.StyledTableContentWrapper, {
+    children: /*#__PURE__*/_jsx__default["default"](styled.StyledTableContentWrapper, {
       role: "rowgroup",
       height: totalSize || '100%'
-    }, void 0, _Headers || (_Headers = /*#__PURE__*/_jsx__default['default'](index, {})), isEmptyContent && /*#__PURE__*/_jsx__default['default'](EmptyContent, {
+    }, void 0, _Headers || (_Headers = /*#__PURE__*/_jsx__default["default"](index, {})), isEmptyContent && /*#__PURE__*/_jsx__default["default"](EmptyContent, {
       width: totalColumnsWidth
-    }), isLoading ? _Loader || (_Loader = /*#__PURE__*/_jsx__default['default'](Loader, {})) : null, !isLoading && !isEmptyContent && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
-      children: [_Rows || (_Rows = /*#__PURE__*/_jsx__default['default'](Rows, {})), _Footer || (_Footer = /*#__PURE__*/_jsx__default['default'](Footer, {})), isLoadingAppended && (_RowLoading || (_RowLoading = /*#__PURE__*/_jsx__default['default'](RowLoading, {})))]
+    }), isLoading ? _Loader || (_Loader = /*#__PURE__*/_jsx__default["default"](Loader, {})) : null, !isLoading && !isEmptyContent && /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
+      children: [_Rows || (_Rows = /*#__PURE__*/_jsx__default["default"](Rows, {})), _Footer || (_Footer = /*#__PURE__*/_jsx__default["default"](Footer, {})), isLoadingAppended && (_RowLoading || (_RowLoading = /*#__PURE__*/_jsx__default["default"](RowLoading, {})))]
     }))
   });
 };

package/cjs/parts/index.js

@@ -14,6 +14,6 @@ var DnDHandle = require('./DnDHandle.js');
 exports.TableContent = TableContent;
 exports.Loader = Loader;
 exports.EmptyContent = EmptyContent;
-exports.Row = Row;
+exports.Row = Row["default"];
 exports.Footer = Footer;
 exports.DnDHandle = DnDHandle;

package/cjs/prop-types.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var PropTypes = require('prop-types');
 
@@ -12,40 +17,40 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 const tableStateShape = {
-  allColumns: PropTypes__default['default'].array,
-  columns: PropTypes__default['default'].array,
-  visibleColumns: PropTypes__default['default'].array,
-  data: PropTypes__default['default'].array,
-  preFilteredFlatRows: PropTypes__default['default'].array,
-  preFilteredRows: PropTypes__default['default'].array,
-  rows: PropTypes__default['default'].array,
-  page: PropTypes__default['default'].array,
-  preFilteredRowsById: PropTypes__default['default'].object,
-  rowsById: PropTypes__default['default'].object,
-  setAllFilters: PropTypes__default['default'].func,
-  setFilter: PropTypes__default['default'].func,
-  totalColumnsWidth: PropTypes__default['default'].number
+  allColumns: PropTypes__default["default"].array,
+  columns: PropTypes__default["default"].array,
+  visibleColumns: PropTypes__default["default"].array,
+  data: PropTypes__default["default"].array,
+  preFilteredFlatRows: PropTypes__default["default"].array,
+  preFilteredRows: PropTypes__default["default"].array,
+  rows: PropTypes__default["default"].array,
+  page: PropTypes__default["default"].array,
+  preFilteredRowsById: PropTypes__default["default"].object,
+  rowsById: PropTypes__default["default"].object,
+  setAllFilters: PropTypes__default["default"].func,
+  setFilter: PropTypes__default["default"].func,
+  totalColumnsWidth: PropTypes__default["default"].number
 };
 const filterComponentPropType = _objectSpread(_objectSpread({}, tableStateShape), {}, {
-  column: PropTypes__default['default'].object
+  column: PropTypes__default["default"].object
 });
 const editableCellPropType = {
-  cell: PropTypes__default['default'].object.isRequired,
-  DefaultCellRender: PropTypes__default['default'].oneOfType([PropTypes__default['default'].func, PropTypes__default['default'].object]).isRequired
+  cell: PropTypes__default["default"].object.isRequired,
+  DefaultCellRender: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object]).isRequired
 };
 const CellPropType = tableStateShape;
-const headerGroupsType = PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({
-  getHeaderGroupProps: PropTypes__default['default'].func.isRequired,
-  headers: PropTypes__default['default'].arrayOf(PropTypes__default['default'].object).isRequired
+const headerGroupsType = PropTypes__default["default"].arrayOf(PropTypes__default["default"].shape({
+  getHeaderGroupProps: PropTypes__default["default"].func.isRequired,
+  headers: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object).isRequired
 }));
-const renderRowActionsPropType = PropTypes__default['default'].oneOfType([PropTypes__default['default'].oneOf([false]), PropTypes__default['default'].shape({
-  columnWidth: PropTypes__default['default'].number.isRequired,
-  renderer: PropTypes__default['default'].func.isRequired
+const renderRowActionsPropType = PropTypes__default["default"].oneOfType([PropTypes__default["default"].oneOf([false]), PropTypes__default["default"].shape({
+  columnWidth: PropTypes__default["default"].number.isRequired,
+  renderer: PropTypes__default["default"].func.isRequired
 })]);
-const paginationPropType = PropTypes__default['default'].oneOfType([PropTypes__default['default'].bool, PropTypes__default['default'].shape({
-  perPageOptions: PropTypes__default['default'].arrayOf(PropTypes__default['default'].number)
+const paginationPropType = PropTypes__default["default"].oneOfType([PropTypes__default["default"].bool, PropTypes__default["default"].shape({
+  perPageOptions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].number)
 })]);
 
 exports.CellPropType = CellPropType;

package/cjs/redux/reducers/headersReducers/logic.js

@@ -2,6 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.filter.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -10,15 +15,16 @@ var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_definePropert
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default['default'](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty__default["default"](target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
 const patchUpdateOneHeader = (payload, state) => {
   state[payload.headerId] = _objectSpread(_objectSpread({}, (state === null || state === void 0 ? void 0 : state[payload.headerId]) || {}), payload.newHeader);
 };
-const patchHeaderFilterButtonAndMenu = ({
-  headerId,
-  newState
-}, state) => {
+const patchHeaderFilterButtonAndMenu = (_ref, state) => {
+  let {
+    headerId,
+    newState
+  } = _ref;
   const updatedState = {
     hideFilterMenu: newState,
     hideFilterButton: newState

package/cjs/redux/reducers/index.js

@@ -15,4 +15,4 @@ var rootReducer = redux.combineReducers({
 
 exports.useDispatchHeadersActions = useDispatchHeadersActions.useDispatchHeadersActions;
 exports.useDispatchRowsActions = useDispatchRowsActions.useDispatchRowsActions;
-exports['default'] = rootReducer;
+exports["default"] = rootReducer;

package/cjs/redux/storeConfig.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var index = require('./reducers/index.js');
 
 const storeConfig = {
-  reducer: index['default']
+  reducer: index["default"]
 };
 
 exports.storeConfig = storeConfig;

package/cjs/styled.js

@@ -2,32 +2,36 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 var styled = require('styled-components');
 var Grid = require('@elliemae/ds-grid');
-var EditPencil = require('@elliemae/ds-icons/EditPencil');
+var dsIcons = require('@elliemae/ds-icons');
 var sizeToCss = require('./helpers/sizeToCss.js');
+require('core-js/modules/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.constructor.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var constants = require('./configs/constants.js');
 var cellPadding = require('./helpers/cellPadding.js');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 require('react');
-var fixedSizes = require('./configs/fixedSizes.js');
+require('core-js/modules/web.dom-collections.iterator.js');
+require('core-js/modules/esnext.async-iterator.reduce.js');
+require('core-js/modules/esnext.iterator.reduce.js');
 require('react-virtual');
 require('./configs/useRowFlattenization.js');
 require('@babel/runtime/helpers/defineProperty');
 require('@babel/runtime/helpers/jsx');
-require('@elliemae/ds-icons/ArrowShortReturn');
-require('@elliemae/ds-icons');
 require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('@elliemae/ds-form');
 require('./parts/TableContent.js');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 require('@elliemae/ds-button');
 require('./DataTableContext.js');
 require('./parts/Row.js');
 require('./parts/Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('./parts/HoC/SortableItemContext.js');
 var zIndexInternalConfig = require('./configs/zIndexInternalConfig.js');
 
@@ -35,174 +39,183 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 var Grid__default = /*#__PURE__*/_interopDefaultLegacy(Grid);
-var EditPencil__default = /*#__PURE__*/_interopDefaultLegacy(EditPencil);
-
-/* eslint-disable max-lines */
-
-const styledFocusCss = ({
-  theme
-}) => `
-&:after {
-  display: block;
-  content: ' ';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 2px solid ${theme.colors.brand[700]};
-  pointer-events: none;
-  z-index: ${zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER};
-}`;
-
-const StyledFocusWithin = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+
+const styledFocusCss = _ref => {
+  let {
+    theme
+  } = _ref;
+  return "\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ".concat(theme.colors.brand[700], ";\n  pointer-events: none;\n  z-index: ").concat(zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, ";\n}");
+};
+
+const StyledFocusWithin = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-0"
 })([":focus-within{", "}"], props => props.hideFocus ? '' : styledFocusCss(props));
-const StyledDataTableWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledDataTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-1"
-})(["", ""], ({
-  width = ' 100%',
-  height = ' 100%'
-}) => `
-  width: ${sizeToCss.sizeToCss(width)};
-  height: ${sizeToCss.sizeToCss(height)};
-`);
-const StyledTableWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["width:", ";height:", ";user-select:", ";"], props => {
+  var _props$width;
+
+  return sizeToCss.sizeToCss((_props$width = props.width) !== null && _props$width !== void 0 ? _props$width : ' 100%');
+}, props => {
+  var _props$height;
+
+  return sizeToCss.sizeToCss((_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : ' 100%');
+}, _ref2 => {
+  let {
+    noSelectionAllowed
+  } = _ref2;
+  return noSelectionAllowed ? 'none' : 'auto';
+});
+const StyledTableWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-2"
-})(["display:inline-block;border-spacing:0;z-index:0;position:relative;", ""], ({
-  width = '100%',
-  height = '100%'
-}) => `
-  width: ${sizeToCss.sizeToCss(width)};
-  height: ${sizeToCss.sizeToCss(height)};
-  `);
-const StyledTableContentWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["display:inline-block;border-spacing:0;z-index:0;position:relative;", ""], _ref3 => {
+  let {
+    width = '100%',
+    height = '100%'
+  } = _ref3;
+  return "\n  width: ".concat(sizeToCss.sizeToCss(width), ";\n  height: ").concat(sizeToCss.sizeToCss(height), ";\n  ");
+});
+const StyledTableContentWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-3"
-})(["position:relative;", ""], ({
-  height = 'auto'
-}) => `
-  height: ${sizeToCss.sizeToCss(height)};
-  `);
-const StyledVirtualListWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["position:relative;", ""], _ref4 => {
+  let {
+    height = 'auto'
+  } = _ref4;
+  return "\n  height: ".concat(sizeToCss.sizeToCss(height), ";\n  ");
+});
+const StyledVirtualListWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-4"
-})(["overflow:auto;", ""], ({
-  height = 'auto',
-  width = '100%'
-}) => `
-  height: ${sizeToCss.sizeToCss(height)};
-  width: ${sizeToCss.sizeToCss(width)};
-  `);
+})(["overflow:auto;", ""], _ref5 => {
+  let {
+    height = 'auto',
+    width = '100%'
+  } = _ref5;
+  return "\n  height: ".concat(sizeToCss.sizeToCss(height), ";\n  width: ").concat(sizeToCss.sizeToCss(width), ";\n  ");
+});
 /**
  * HEADER
  */
 
-const getGridTemplateColumnsStyle = ({
-  cols,
-  colsLayoutStyle = constants.ColsLayoutStyle.Auto
-}) => {
+const getGridTemplateColumnsStyle = _ref6 => {
+  let {
+    cols,
+    colsLayoutStyle = constants.ColsLayoutStyle.Auto
+  } = _ref6;
   if (!cols) return '';
 
   if (colsLayoutStyle === 'fixed') {
-    const widthAttr = cols.map(col => `minmax(0, ${col})`).join(' ');
-    return `grid-template-columns: ${widthAttr}`;
+    const widthAttr = cols.map(col => "minmax(0, ".concat(col, ")")).join(' ');
+    return "grid-template-columns: ".concat(widthAttr);
   }
 
-  return `grid-template-columns: ${cols.map(col => `minmax(0, ${col})`).join(' ')}`;
+  return "grid-template-columns: ".concat(cols.map(col => "minmax(0, ".concat(col, ")")).join(' '));
 };
 
-const StyledHeadWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledHeadWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-5"
 })(["position:relative;position:sticky;top:0;z-index:4;background:white;width:", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%');
-const StyledHeadTr = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-6"
 })(["", ";", ";"], props => props.colsLayoutStyle === constants.ColsLayoutStyle.Auto ? 'width:100%' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 }));
-const StyledHeadTh = /*#__PURE__*/styled__default['default'].div.withConfig({
+
+const getStyledHeadTHBorderColor = props => {
+  if (props.dragOverlay) return 'transparent';
+  if (props.isFirstRowGroup) return 'transparent';
+  return props.theme.colors.neutral['080'];
+};
+
+const StyledHeadTh = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-7"
-})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], props => props.isDragOverlay ? 'transparent' : props.theme.colors.neutral['080'], props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : `:hover {
-    border-bottom: 1px solid ${props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800]};
-    cursor: pointer;
-  }`);
-const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
+})(["min-height:24px;line-height:normal;font-weight:600;text-transform:uppercase;font-size:0.923rem;text-align:left;", " color:#353c46;min-height:1.84615rem;position:relative;position:sticky;top:0;z-index:", ";display:flex;justify-content:space-between;box-sizing:border-box;border-right:1px solid ", ";border-bottom:1px solid ", ";outline:none;:focus{&:after{display:block;content:' ';position:absolute;top:0;left:0;right:-1px;bottom:-1px;border:2px solid ", ";pointer-events:none;z-index:", ";}}", ""], cellPadding.columnPadding, zIndexInternalConfig.ZIndexDataTable.HEADER_ROW, props => props.theme.colors.neutral['080'], getStyledHeadTHBorderColor, props => props.theme.colors.brand[700], zIndexInternalConfig.ZIndexDataTable.FOCUS_BORDER, props => props.isDraggingActive ? '' : ":hover {\n    border-bottom: 1px solid ".concat(props.isDragOverlay ? 'transparent' : props.theme.colors.brand[800], ";\n    cursor: pointer;\n  }"));
+const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-8"
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);
-const StyledResizer = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledResizer = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-9"
-})(["display:inline-block;background:", ";width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"], ({
-  isResizing,
-  theme
-}) => isResizing ? theme.colors.brand[600] : theme.colors.brand[400]); // CELL ***********************************************************************/
+})(["display:inline-block;background:", ";width:4px;height:100%;position:absolute;right:0;top:0;z-index:1;touch-action:none;cursor:col-resize;"], _ref7 => {
+  let {
+    isResizing,
+    theme
+  } = _ref7;
+  return isResizing ? theme.colors.brand[600] : theme.colors.brand[400];
+}); // CELL ***********************************************************************/
 
-const StyledActionCell = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledActionCell = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-10"
 })(["position:relative;position:sticky;display:inline-block;right:0;background:white;"]);
-const StyledCell = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledCell = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-11"
 })(["", " display:flex;align-items:center;width:100%;position:relative;"], cellPadding.cellPadding);
-const StyledCellContent = /*#__PURE__*/styled__default['default'].div.withConfig({
+const StyledCellContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-38sgfo-12"
 })(["display:grid;justify-self:flex-end;flex:1 1 auto;width:100%;height:100%;align-items:center;"]);
-const StyledPencilIcon = /*#__PURE__*/styled__default['default'](EditPencil__default['default']).withConfig({
+const StyledPencilIcon = /*#__PURE__*/styled__default["default"](dsIcons.EditPencil).withConfig({
   componentId: "sc-38sgfo-13"
 })([""]);
-const StyledEditableContainer = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledEditableContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-14"
-})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, props => props.shouldDisplayEditIcon ? 'block' : 'none', StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
+})(["width:100%;height:100%;align-items:center;& ", "{display:", ";}&:hover{", "{display:block;}}&:focus{", " ", "{display:block;}}outline:none;"], StyledPencilIcon, _ref8 => {
+  let {
+    shouldDisplayEditIcon
+  } = _ref8;
+  return shouldDisplayEditIcon ? 'block' : 'none';
+}, StyledPencilIcon, styledFocusCss, StyledPencilIcon); // ROW ************************************************************************/
 
-const StyledFullsizeGrid = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledFullsizeGrid = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-15"
 })(["position:relative;z-index:", ";min-height:", ";height:", ";"], zIndexInternalConfig.ZIndexDataTable.ROW, props => props.minHeight || '36px', props => props.height || 'auto');
-const GroupHeaderContainer = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const GroupHeaderContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-16"
-})(["background-color:", ";align-items:center;padding:0 ", ";border-top:solid 1px ", ";grid-template-columns:min-content 1fr;"], ({
-  theme
-}) => theme.colors.brand[200], props => props.padding, ({
-  theme
-}) => theme.colors.brand[300]);
-const GroupHeaderTitle = /*#__PURE__*/styled__default['default'].span.withConfig({
+})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], _ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme.colors.brand[200];
+}, props => props.padding, _ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.colors.brand[300];
+});
+const GroupHeaderTitle = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-38sgfo-17"
 })(["font-weight:", ";font-size:12px;color:", ";"], props => props.theme.fontWeights.semibold, props => props.theme.colors.neutral[700]);
-const StyledCellContainer = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
+const StyledCellContainer = /*#__PURE__*/styled__default["default"](Grid__default["default"]).withConfig({
   componentId: "sc-38sgfo-18"
-})(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%', props => getGridTemplateColumnsStyle({
+})(["position:relative;z-index:2;min-height:", ";height:", ";width:", ";", ";", ";background-color:", ";outline:none;:focus{", "}", " ", " box-shadow:0 2px 4px 0 ", ";opacity:", ";", " color:", ";"], props => props.minHeight || '36px', props => props.height || 'auto', props => props.colLayoutStyle === constants.ColsLayoutStyle.Fixed ? sizeToCss.sizeToCss(props.totalColumnsWidth) : '100%', props => props.isDragOverlay ? 'width: fit-content;' : '', props => getGridTemplateColumnsStyle({
   cols: props.cols,
   colsLayoutStyle: props.colLayoutStyle,
   isExpandable: props.isExpandable
-}), ({
-  backgroundColor,
-  isDragging,
-  theme
-}) => isDragging ? theme.colors.neutral[100] : backgroundColor || 'white', props => props.isDragOverlay ? '' : styledFocusCss(props), ({
-  isDropIndicatorPositionInside,
-  theme
-}) => {
+}), _ref11 => {
+  let {
+    backgroundColor,
+    isDragging,
+    theme
+  } = _ref11;
+  return isDragging ? theme.colors.neutral[100] : backgroundColor || 'white';
+}, props => props.isDragOverlay ? '' : styledFocusCss(props), _ref12 => {
+  let {
+    isDropIndicatorPositionInside,
+    theme
+  } = _ref12;
   if (!isDropIndicatorPositionInside) return '';
   return styledFocusCss({
     theme
   });
-}, ({
-  shouldDisplayHover,
-  theme
-}) => shouldDisplayHover ? `:hover {
-            background-color: ${theme.colors.brand[200]};
-          }` : '', props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : `
-    background-color: ${props.theme.colors.brand[200]};
-    `, props => props.disabled ? props.theme.colors.neutral['500'] : '#333333'); // PAGINATION ************************************************************************/
-
-const PaginationContainer = /*#__PURE__*/styled__default['default'](Grid__default['default']).withConfig({
-  componentId: "sc-38sgfo-19"
-})(["padding:0 ", ";height:", "px;width:", ";max-width:100%;align-items:center;"], props => props.theme.space.xs, fixedSizes.FIXED_SIZES.PAGINATION_HEIGHT, props => sizeToCss.sizeToCss(props.width) || '100%');
-const PaginationWrapper = /*#__PURE__*/styled__default['default'].div.withConfig({
-  componentId: "sc-38sgfo-20"
-})(["display:flex;margin:5px 0;justify-content:flex-end;"]);
+}, _ref13 => {
+  let {
+    shouldDisplayHover,
+    theme
+  } = _ref13;
+  return shouldDisplayHover ? ":hover {\n            background-color: ".concat(theme.colors.brand[200], ";\n          }") : '';
+}, props => props.isDragOverlay ? 'rgba(0,0,0,0.5)' : 'transparent', props => props.isDragging ? 0.8 : 1, props => !props.selected ? '' : "\n    background-color: ".concat(props.theme.colors.brand[200], ";\n    border: 1px solid ").concat(props.theme.colors.brand[500], ";\n    "), props => props.disabled ? props.theme.colors.neutral['500'] : '#333333');
 
 exports.GroupHeaderContainer = GroupHeaderContainer;
 exports.GroupHeaderTitle = GroupHeaderTitle;
-exports.PaginationContainer = PaginationContainer;
-exports.PaginationWrapper = PaginationWrapper;
 exports.StyledActionCell = StyledActionCell;
 exports.StyledCell = StyledCell;
 exports.StyledCellContainer = StyledCellContainer;

package/esm/DataTable.js

@@ -1,3 +1,8 @@
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useMemo, useRef } from 'react';