@elliemae/ds-data-table 2.0.0-alpha.10 → 2.0.0-alpha.14

package/cjs/styled.js

@@ -2,31 +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');
 
@@ -34,75 +39,76 @@ 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 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({
   componentId: "sc-38sgfo-1"
-})(["width:", ";height:", ";user-select:", ";"], props => sizeToCss.sizeToCss(props.width ?? ' 100%'), props => sizeToCss.sizeToCss(props.height ?? ' 100%'), ({
-  noSelectionAllowed
-}) => noSelectionAllowed ? 'none' : 'auto');
+})(["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)};
-  `);
+})(["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)};
-  `);
+})(["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({
@@ -115,21 +121,28 @@ const StyledHeadTr = /*#__PURE__*/styled__default["default"](Grid__default["defa
   isExpandable: props.isExpandable,
   colsLayoutStyle: props.colsLayoutStyle
 }));
+
+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;
-  }`);
+})(["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({
   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"
@@ -140,64 +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"
-})(["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]);
+})(["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 {
-            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';

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: {

package/esm/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -1,24 +1,31 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import { useMemo, useCallback } from 'react';
 import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';
 import styled from 'styled-components';
 import { StyledFocusWithin } from '../../../styled.js';
 import { DATA_TESTID } from '../../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
-import '@elliemae/ds-form/Checkbox';
-import '@elliemae/ds-form/Radio';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import '@elliemae/ds-form';
 import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
 import '../../../DataTableContext.js';
 import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
 import { jsx } from 'react/jsx-runtime';
 
@@ -33,9 +40,10 @@ const expandRowColumn = {
   id: 'expander',
   // Make sure it has an ID
   accessor: 'expandRowColumn',
-  Header: ({
-    ctx
-  }) => {
+  Header: _ref => {
+    let {
+      ctx
+    } = _ref;
     const {
       tableProps: {
         expandedRows,
@@ -97,15 +105,16 @@ const expandRowColumn = {
       }
     }, void 0, GlobalExpandIcon));
   },
-  Cell: ({
-    cell,
-    row,
-    isRowSelected,
-    ctx,
-    draggableProps
-  }) => {
+  Cell: _ref2 => {
     var _row$original$subRows;
 
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx,
+      draggableProps
+    } = _ref2;
     const {
       tableProps: {
         dragAndDropRows,
@@ -131,7 +140,7 @@ const expandRowColumn = {
     const isDragging = draggableProps ? draggableProps.isDragging : false;
     const isDragOverlay = dragAndDropRows && !draggableProps;
     const indentStyle = useMemo(() => ({
-      marginLeft: `${row.depth * 32}px`,
+      marginLeft: "".concat(row.depth * 32, "px"),
       marginRight: '18px',
       paddingLeft: '2px',
       paddingRight: '2px',
@@ -142,7 +151,7 @@ const expandRowColumn = {
     }), [row.depth]);
     const rowProps = useMemo(() => ({
       role: 'button',
-      key: `${row.uid}-expand-button`,
+      key: "".concat(row.uid, "-expand-button"),
       title: 'Toggle Row Expanded',
       onClick: onRowExpandHandler,
       onKeyDown: e => {

package/esm/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -1,25 +1,32 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
 import { useMemo, useCallback } from 'react';
-import DSCheckbox from '@elliemae/ds-form/Checkbox';
+import { DSCheckbox } from '@elliemae/ds-form';
 import { DATA_TESTID } from '../../../configs/constants.js';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import '@elliemae/ds-icons';
 import 'styled-components';
 import '../../../styled.js';
 import 'react/jsx-runtime';
-import '@elliemae/ds-form/Radio';
 import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
 import '../../../DataTableContext.js';
 import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
 
 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; }
@@ -29,9 +36,10 @@ const multiSelectColumn = {
   // Build our multiSelecter column
   id: 'multiSelecter',
   // Make sure it has an ID
-  Header: ({
-    ctx
-  }) => {
+  Header: _ref => {
+    let {
+      ctx
+    } = _ref;
     const {
       tableProps: {
         onSelectionChange,
@@ -77,12 +85,13 @@ const multiSelectColumn = {
     }), [currentGlobalState, onChangeHandler]);
     return PureHeaderCheckbox;
   },
-  Cell: ({
-    cell,
-    row,
-    isRowSelected,
-    ctx
-  }) => {
+  Cell: _ref2 => {
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx
+    } = _ref2;
     const {
       tableProps: {
         onSelectionChange,

package/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -1,25 +1,32 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import { useMemo } from 'react';
+import { DSRadio } from '@elliemae/ds-form';
 import styled from 'styled-components';
-import DSRadio from '@elliemae/ds-form/Radio';
 import { DATA_TESTID } from '../../../configs/constants.js';
+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/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import 'react-virtual';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
 import '../../../configs/useRowFlattenization.js';
 import '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
 import '@elliemae/ds-icons';
 import '../../../styled.js';
 import 'react/jsx-runtime';
-import '@elliemae/ds-form/Checkbox';
 import '../../../parts/TableContent.js';
 import '@elliemae/ds-grid';
 import '@elliemae/ds-circular-progress-indicator';
-import '@elliemae/ds-icons/WarningTriangle';
 import '@elliemae/ds-system';
 import '@elliemae/ds-button';
 import '../../../DataTableContext.js';
 import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
 
 var _div;
@@ -35,12 +42,13 @@ const singleSelectColumn = {
   // Make sure it has an ID
   // The header doesn't need anything for single selection
   Header: () => _div || (_div = /*#__PURE__*/_jsx("div", {})),
-  Cell: ({
-    cell,
-    row,
-    isRowSelected,
-    ctx
-  }) => {
+  Cell: _ref => {
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx
+    } = _ref;
     const {
       tableProps: {
         onSelectionChange,