@elliemae/ds-data-table 2.0.0-alpha.11 → 2.0.0-alpha.12

package/cjs/parts/RowVariants/index.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');
 require('react');
 require('@babel/runtime/helpers/jsx');
@@ -11,29 +16,31 @@ require('@elliemae/ds-popperjs');
 require('styled-components');
 require('../../redux/reducers/index.js');
 require('../../configs/constants.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('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
 require('../../styled.js');
 var jsxRuntime = require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('@elliemae/ds-form');
 require('../TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 require('../../DataTableContext.js');
 require('../Row.js');
 require('../Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('../HoC/SortableItemContext.js');
-require('@elliemae/ds-icons/MoreOptionsVert');
-require('@elliemae/ds-utilities/hooks');
+require('@elliemae/ds-utilities');
 require('uid');
 var RowVariants = require('../../exported-related/RowVariants.js');
 require('../../exported-related/Filters/applyOutOfTheBoxFilters.js');
 require('moment');
+require('core-js/modules/esnext.async-iterator.some.js');
+require('core-js/modules/esnext.iterator.some.js');
 var index = require('../Cells/index.js');
 var RowVariantHeader = require('./RowVariantHeader.js');
 var RowVariantPrimary = require('./RowVariantPrimary.js');

package/cjs/parts/Rows.js

@@ -1,6 +1,13 @@
 'use strict';
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.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/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var Row = require('./Row.js');
 var DataTableContext = require('../DataTableContext.js');
@@ -57,7 +64,7 @@ const Rows = () => {
         itemIndex: index,
         itemWrapperStyle: style
       };
-      return /*#__PURE__*/jsxRuntime.jsx(Row, _objectSpread({}, rowProps));
+      return /*#__PURE__*/jsxRuntime.jsx(Row["default"], _objectSpread({}, rowProps));
     })
   }), [virtualItems, items, visibleColumns, totalColumnsWidth]);
   return PureVirtualizedRows;

package/cjs/parts/SortByCaret.js

@@ -4,28 +4,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
-var ArrowheadDown = require('@elliemae/ds-icons/ArrowheadDown');
-var ArrowheadUp = require('@elliemae/ds-icons/ArrowheadUp');
+var dsIcons = require('@elliemae/ds-icons');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ArrowheadDown__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadDown);
-var ArrowheadUp__default = /*#__PURE__*/_interopDefaultLegacy(ArrowheadUp);
 
 var _ArrowheadDown, _ArrowheadUp;
 const iconColor = ['brand-primary', 800];
-const SortByCaret = ({
-  isSortedDesc
-}) => React.useMemo(() => /*#__PURE__*/_jsx__default["default"]("span", {
-  style: {
-    marginLeft: '4px'
-  }
-}, void 0, isSortedDesc && (_ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](ArrowheadDown__default["default"], {
-  size: "s",
-  color: iconColor
-}))), !isSortedDesc && (_ArrowheadUp || (_ArrowheadUp = /*#__PURE__*/_jsx__default["default"](ArrowheadUp__default["default"], {
-  color: iconColor
-})))), [isSortedDesc]);
+const SortByCaret = _ref => {
+  let {
+    isSortedDesc
+  } = _ref;
+  return React.useMemo(() => /*#__PURE__*/_jsx__default["default"]("span", {
+    style: {
+      marginLeft: '4px'
+    }
+  }, void 0, isSortedDesc && (_ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
+    size: "s",
+    color: iconColor
+  }))), !isSortedDesc && (_ArrowheadUp || (_ArrowheadUp = /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadUp, {
+    color: iconColor
+  })))), [isSortedDesc]);
+};
 
 exports.SortByCaret = SortByCaret;

package/cjs/parts/SortableHeaderCell.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 _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProperties');
 var Grid = require('@elliemae/ds-grid');

package/cjs/parts/TableContent.js

@@ -3,6 +3,11 @@
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
 require('core-js/modules/web.dom-collections.iterator.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/esnext.async-iterator.for-each.js');
+require('core-js/modules/esnext.iterator.for-each.js');
 var React = require('react');
 var reactRedux = require('react-redux');
 var styled = require('../styled.js');
@@ -10,21 +15,22 @@ var DataTableContext = require('../DataTableContext.js');
 var Pagination = require('../addons/Pagination/Pagination.js');
 var VirtualRowsList = require('./VirtualRowsList.js');
 var constants = require('../configs/constants.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('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('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
-require('@elliemae/ds-icons/WarningTriangle');
 require('@elliemae/ds-system');
 require('@elliemae/ds-button');
 require('./Row.js');
 require('./Footer.js');
-require('@elliemae/ds-icons/GripperVertical');
 require('./HoC/SortableItemContext.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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('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');
 

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');
 

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 }; }
@@ -15,10 +20,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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/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');
 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,13 +39,13 @@ 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
-}) => "\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 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"
@@ -56,34 +60,47 @@ const StyledDataTableWrapper = /*#__PURE__*/styled__default["default"].div.withC
   var _props$height;
 
   return sizeToCss.sizeToCss((_props$height = props.height) !== null && _props$height !== void 0 ? _props$height : ' 100%');
-}, ({
-  noSelectionAllowed
-}) => noSelectionAllowed ? 'none' : 'auto');
+}, _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%'
-}) => "\n  width: ".concat(sizeToCss.sizeToCss(width), ";\n  height: ").concat(sizeToCss.sizeToCss(height), ";\n  "));
+})(["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'
-}) => "\n  height: ".concat(sizeToCss.sizeToCss(height), ";\n  "));
+})(["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%'
-}) => "\n  height: ".concat(sizeToCss.sizeToCss(height), ";\n  width: ").concat(sizeToCss.sizeToCss(width), ";\n  "));
+})(["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') {
@@ -119,10 +136,13 @@ const StyledHeaderRightIconsWrapper = /*#__PURE__*/styled__default["default"].di
 })(["height:100%;display:flex;align-items:center;max-height:24px;"]);
 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({
   componentId: "sc-38sgfo-10"
@@ -133,60 +153,69 @@ const StyledCell = /*#__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({
   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({
   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({
   componentId: "sc-38sgfo-16"
-})(["position:relative;background-color:", ";align-items:center;padding:0 ", ";border-top:1px solid ", ";grid-template-columns:min-content 1fr;"], ({
-  theme
-}) => theme.colors.brand[200], props => props.padding, ({
-  theme
-}) => theme.colors.brand[300]);
+})(["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({
   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 {\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    "), 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';

package/esm/DataTableSchema.js

@@ -1,7 +1,7 @@
 import { PropTypes } from 'react-desc';
 
 /* eslint-disable max-lines */
-const outOfTheBoxFilterType = PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-text', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
+const outOfTheBoxFilterType = PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
 const textWrappingType = PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']);
 const rowVariantType = PropTypes.oneOf(['ds_header_group_row', 'ds_primary_row', 'ds_secondary_row']);
 const columnPropTypes = {
@@ -64,17 +64,29 @@ const DataTableSchema = {
     })).description('Any extra option you want in the dropdownmenu of the filter bar')
   }).description('Props for the filter bar'),
   onFiltersChange: PropTypes.func.description('Function invoked when filters change'),
-  pagination: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
-    pageIndex: PropTypes.number.description('Index of the current page, starting from 1'),
-    canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not'),
-    canNextPage: PropTypes.bool.description('Whether the next button is disabled or not'),
-    pageSize: PropTypes.number.description('The current page size'),
-    perPageOptions: PropTypes.arrayOf(PropTypes.number).description('The available options for page size'),
-    onPageChange: PropTypes.func.description('Function invoked when the page is changed'),
-    onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed'),
-    onNextPage: PropTypes.func.description('Function invoked when next button is pressed'),
-    pageCount: PropTypes.number.description('How many pages are there. By default it will be calculated based on the ammount of rows you have')
-  })]).description('Object containing the data for the pagination'),
+  pagination: PropTypes.shape({
+    pageCount: PropTypes.number.description('How many pages are there'),
+    pageIndex: PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
+    canPreviousPage: PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
+    canNextPage: PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
+    pageSize: PropTypes.number.description('The current page size').defaultValue(10),
+    showPerPageSelector: PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
+    perPageOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+      dsId: PropTypes.string,
+      value: PropTypes.number,
+      label: PropTypes.string,
+      type: PropTypes.oneOf(['single'])
+    })])).description('The available options for page size').defaultValue([10]),
+    perPageStep: PropTypes.number.description('Step for the per page options').defaultValue(5),
+    minPerPage: PropTypes.number.description('Step for the per page options').defaultValue(0),
+    maxPerPage: PropTypes.number.description('Step for the per page options').defaultValue(100),
+    onPageSizeChange: PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
+    onPreviousPage: PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
+    onPageChange: PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
+    onNextPage: PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
+    pageDetails: PropTypes.arrayOf(PropTypes.string).description('Details to provide for each page').defaultValue([]),
+    pageDetailsTitle: PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue('')
+  }).description('Object containing the data for the pagination'),
   colsLayoutStyle: PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),
   hiddenColumns: PropTypes.arrayOf(PropTypes.string).description('IDs of columns not to render'),
   dragAndDropRows: PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),

package/esm/addons/Columns/ColumnDragHandle/ColumnDragHandle.js

@@ -5,7 +5,7 @@ import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
 import 'styled-components';
-import '@elliemae/ds-icons/WarningTriangle';
+import '@elliemae/ds-icons';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
 import '../../../DataTableContext.js';
@@ -21,13 +21,14 @@ const dragHandleColumn = {
   // Make sure it has an ID
   // The header doesn't need anything for single selection
   Header: () => _div || (_div = /*#__PURE__*/_jsx("div", {})),
-  Cell: ({
-    row,
-    isRowSelected,
-    cell,
-    isDragOverlay,
-    draggableProps
-  }) => {
+  Cell: _ref2 => {
+    let {
+      row,
+      isRowSelected,
+      cell,
+      isDragOverlay,
+      draggableProps
+    } = _ref2;
     useRecoverFocusRow(row, cell, isDragOverlay, draggableProps);
     return /*#__PURE__*/_jsx(StyledFocusWithin, {
       style: {