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

package/cjs/DataTable.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 _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
@@ -27,7 +32,7 @@ var _FiltersBar;
 
 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 DataTable = props => {
   const {
     withFilterBar
@@ -36,14 +41,14 @@ const DataTable = props => {
   const tableWrapperRef = React.useRef();
   const tableContentWrapperRef = React.useRef();
   const ctx = useDatatableConfig.useDatatableConfig(props);
-  return /*#__PURE__*/_jsx__default['default'](reactRedux.Provider, {
+  return /*#__PURE__*/_jsx__default["default"](reactRedux.Provider, {
     store: reduxStore
-  }, void 0, /*#__PURE__*/_jsx__default['default'](DataTableContext['default'].Provider, {
+  }, void 0, /*#__PURE__*/_jsx__default["default"](DataTableContext["default"].Provider, {
     value: ctx
   }, void 0, /*#__PURE__*/jsxRuntime.jsxs("div", {
     ref: tableWrapperRef,
     "data-testid": constants.DATA_TESTID.DATA_TABLE_WRAPPER,
-    children: [withFilterBar ? _FiltersBar || (_FiltersBar = /*#__PURE__*/_jsx__default['default'](FiltersBar.FiltersBar, {})) : null, /*#__PURE__*/jsxRuntime.jsx(TableContent, {
+    children: [withFilterBar ? _FiltersBar || (_FiltersBar = /*#__PURE__*/_jsx__default["default"](FiltersBar.FiltersBar, {})) : null, /*#__PURE__*/jsxRuntime.jsx(TableContent, {
       ref: tableContentWrapperRef
     })]
   })));

package/cjs/DataTableContext.js

@@ -69,6 +69,6 @@ const DataTableContext = /*#__PURE__*/React.createContext({
   columnHeaderRef: /*#__PURE__*/React.createRef()
 });
 
-exports['default'] = DataTableContext;
+exports["default"] = DataTableContext;
 exports.defaultProps = defaultProps;
 exports.defaultRelativeRowMouseCoord = defaultRelativeRowMouseCoord;

package/cjs/DataTableSchema.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var reactDesc = require('react-desc');
 
 /* eslint-disable max-lines */
-const outOfTheBoxFilterType = reactDesc.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 = reactDesc.PropTypes.oneOf(['ds-filter-select', 'ds-filter-multi-select', 'ds-filter-single-date', 'ds-filter-date-range', 'ds-filter-number-range']);
 const textWrappingType = reactDesc.PropTypes.oneOf(['wrap', 'wrap-all', 'truncate']);
 const rowVariantType = reactDesc.PropTypes.oneOf(['ds_header_group_row', 'ds_primary_row', 'ds_secondary_row']);
 const columnPropTypes = {
@@ -13,12 +13,12 @@ const columnPropTypes = {
   accessor: reactDesc.PropTypes.string.description('The entry of the data that this column will display'),
   id: reactDesc.PropTypes.string.description('The id of the column, will default to the Header or accessor if not present'),
   filter: outOfTheBoxFilterType.description('out-of-the-box filters'),
-  Filter: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The custom component to render as a filter'),
-  Cell: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The custom cell renderer component'),
+  Filter: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The custom component to render as a filter'),
+  Cell: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The custom cell renderer component'),
   editable: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('The editable out-of-the-box or component to render'),
   disableDnD: reactDesc.PropTypes.bool.description('Whereas this column should be draggable'),
   canResize: reactDesc.PropTypes.bool.description('Whereas this column should be resizable'),
-  width: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Width of this column'),
+  width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Width of this column'),
   minWidth: reactDesc.PropTypes.number.description('Minimum width of this column, useful when resizing'),
   maxWidth: reactDesc.PropTypes.number.description('Maximum width of this column, useful when resizing'),
   canSort: reactDesc.PropTypes.bool.description('Whereas this column is sortable'),
@@ -31,7 +31,7 @@ const columnsPropTypes = reactDesc.PropTypes.shape(columnPropTypes).description(
 const rowPropTypes = {
   row_variant_type: rowVariantType.description('Which row variant to use, will default to primary'),
   row_variant_compact: reactDesc.PropTypes.bool.description('Whether to use the compact version of the row'),
-  tableRowDetails: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('Component for row details'),
+  tableRowDetails: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('Component for row details'),
   dimsumHeaderValue: reactDesc.PropTypes.string.description('Header displayed on the header variant of the row')
 };
 const rowsPropTypes = reactDesc.PropTypes.shape(rowPropTypes).description('Rows props');
@@ -39,8 +39,8 @@ const DataTableSchema = {
   columns: reactDesc.PropTypes.arrayOf(columnsPropTypes).description('Array of columns').isRequired,
   data: reactDesc.PropTypes.arrayOf(rowsPropTypes).description('Array of rows'),
   height: reactDesc.PropTypes.number.description('Height of the datatable component'),
-  width: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Width of the datatable component'),
-  renderRowActions: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.object, reactDesc.PropTypes.bool]).description('The renderer to use for the action toolbar'),
+  width: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.number]).description('Width of the datatable component'),
+  renderRowActions: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.object, reactDesc.PropTypes.bool]).description('The renderer to use for the action toolbar'),
   isExpandable: reactDesc.PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),
   uniqueRowAccessor: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.string, reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string), reactDesc.PropTypes.func]).description('Column / Combination of columns / Function to call to produce a unique identifier for each row.' + ' This is necessary for the selectable and drag and drop features'),
   disabledRows: reactDesc.PropTypes.object.description('Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not'),
@@ -59,7 +59,7 @@ const DataTableSchema = {
   })).description('Array of filter keys and values'),
   withFilterBar: reactDesc.PropTypes.bool.description('Whether to display the filter bar'),
   filterBarProps: reactDesc.PropTypes.shape({
-    customPillRenderer: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
+    customPillRenderer: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
     extraOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.shape({
       type: reactDesc.PropTypes.string,
       id: reactDesc.PropTypes.string,
@@ -68,17 +68,29 @@ const DataTableSchema = {
     })).description('Any extra option you want in the dropdownmenu of the filter bar')
   }).description('Props for the filter bar'),
   onFiltersChange: reactDesc.PropTypes.func.description('Function invoked when filters change'),
-  pagination: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.bool, reactDesc.PropTypes.shape({
-    pageIndex: reactDesc.PropTypes.number.description('Index of the current page, starting from 1'),
-    canPreviousPage: reactDesc.PropTypes.bool.description('Whether the previous button is disabled or not'),
-    canNextPage: reactDesc.PropTypes.bool.description('Whether the next button is disabled or not'),
-    pageSize: reactDesc.PropTypes.number.description('The current page size'),
-    perPageOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.number).description('The available options for page size'),
-    onPageChange: reactDesc.PropTypes.func.description('Function invoked when the page is changed'),
-    onPreviousPage: reactDesc.PropTypes.func.description('Function invoked when the previous button is pressed'),
-    onNextPage: reactDesc.PropTypes.func.description('Function invoked when next button is pressed'),
-    pageCount: reactDesc.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: reactDesc.PropTypes.shape({
+    pageCount: reactDesc.PropTypes.number.description('How many pages are there'),
+    pageIndex: reactDesc.PropTypes.number.description('Index of the current page, starting from 1').defaultValue(1),
+    canPreviousPage: reactDesc.PropTypes.bool.description('Whether the previous button is disabled or not').defaultValue(true),
+    canNextPage: reactDesc.PropTypes.bool.description('Whether the next button is disabled or not').defaultValue(true),
+    pageSize: reactDesc.PropTypes.number.description('The current page size').defaultValue(10),
+    showPerPageSelector: reactDesc.PropTypes.bool.description('Whether to show the page selector').defaultValue(true),
+    perPageOptions: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.number, reactDesc.PropTypes.shape({
+      dsId: reactDesc.PropTypes.string,
+      value: reactDesc.PropTypes.number,
+      label: reactDesc.PropTypes.string,
+      type: reactDesc.PropTypes.oneOf(['single'])
+    })])).description('The available options for page size').defaultValue([10]),
+    perPageStep: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(5),
+    minPerPage: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(0),
+    maxPerPage: reactDesc.PropTypes.number.description('Step for the per page options').defaultValue(100),
+    onPageSizeChange: reactDesc.PropTypes.func.description('Function invoked when the page size changes').defaultValue(() => null),
+    onPreviousPage: reactDesc.PropTypes.func.description('Function invoked when the previous button is pressed').defaultValue(() => null),
+    onPageChange: reactDesc.PropTypes.func.description('Function invoked when the page changes').defaultValue(() => null),
+    onNextPage: reactDesc.PropTypes.func.description('Function invoked when next button is pressed').defaultValue(() => null),
+    pageDetails: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('Details to provide for each page').defaultValue([]),
+    pageDetailsTitle: reactDesc.PropTypes.string.description('The title of the details (usually a column of your dataset)').defaultValue('')
+  }).description('Object containing the data for the pagination'),
   colsLayoutStyle: reactDesc.PropTypes.oneOf(['auto', 'fixed']).description('Whether the datatable fills its container or not'),
   hiddenColumns: reactDesc.PropTypes.arrayOf(reactDesc.PropTypes.string).description('IDs of columns not to render'),
   dragAndDropRows: reactDesc.PropTypes.bool.description('Whether to turn on the d&d feature for the rows').defaultValue(false),
@@ -90,7 +102,7 @@ const DataTableSchema = {
   noResultsMessage: reactDesc.PropTypes.string.description('Message to show when no more data is available'),
   noResultsSecondaryMessage: reactDesc.PropTypes.string.description('Secondary message to show when no more data is available'),
   noResultsButtonLabel: reactDesc.PropTypes.string.description('Label of the button when no more data is available'),
-  noResultsPlaceholder: reactDesc.PropTypes.oneOf([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('Custom content to show when dataset is empty'),
+  noResultsPlaceholder: reactDesc.PropTypes.oneOfType([reactDesc.PropTypes.func, reactDesc.PropTypes.element]).description('Custom content to show when dataset is empty'),
   isLoading: reactDesc.PropTypes.bool.description('Whether to show a global loader in the datatable'),
   isLoadingAppended: reactDesc.PropTypes.bool.description('Whether to show an appended loader in the datatable'),
   // eslint-disable-next-line max-lines

package/cjs/addons/Columns/ColumnDragHandle/ColumnDragHandle.js

@@ -9,7 +9,7 @@ require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');
 require('@elliemae/ds-circular-progress-indicator');
 require('styled-components');
-require('@elliemae/ds-icons/WarningTriangle');
+require('@elliemae/ds-icons');
 require('@elliemae/ds-system');
 require('@elliemae/ds-button');
 require('../../../DataTableContext.js');
@@ -28,22 +28,23 @@ const dragHandleColumn = {
   id: 'dragHandleColumn',
   // Make sure it has an ID
   // The header doesn't need anything for single selection
-  Header: () => _div || (_div = /*#__PURE__*/_jsx__default['default']("div", {})),
-  Cell: ({
-    row,
-    isRowSelected,
-    cell,
-    isDragOverlay,
-    draggableProps
-  }) => {
+  Header: () => _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})),
+  Cell: _ref2 => {
+    let {
+      row,
+      isRowSelected,
+      cell,
+      isDragOverlay,
+      draggableProps
+    } = _ref2;
     useRecoverFocusRow.useRecoverFocusRow(row, cell, isDragOverlay, draggableProps);
-    return /*#__PURE__*/_jsx__default['default'](styled.StyledFocusWithin, {
+    return /*#__PURE__*/_jsx__default["default"](styled.StyledFocusWithin, {
       style: {
         width: '100%',
         height: '100%'
       },
       hideFocus: draggableProps && draggableProps.isDragging
-    }, void 0, /*#__PURE__*/_jsx__default['default'](DnDHandle, {
+    }, void 0, /*#__PURE__*/_jsx__default["default"](DnDHandle, {
       id: row.uid,
       isReachable: isRowSelected,
       innerRef: _ref => {

package/cjs/addons/Columns/ColumnExpand/ColumnExpand.js

@@ -2,52 +2,58 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
+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');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
-var ArrowShortReturn = require('@elliemae/ds-icons/ArrowShortReturn');
-var styled$1 = require('styled-components');
 var dsIcons = require('@elliemae/ds-icons');
+var styled$1 = require('styled-components');
 var styled = require('../../../styled.js');
 var constants = require('../../../configs/constants.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('@elliemae/ds-form/Checkbox');
-require('@elliemae/ds-form/Radio');
+require('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
+require('@elliemae/ds-form');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');
 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 jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var ArrowShortReturn__default = /*#__PURE__*/_interopDefaultLegacy(ArrowShortReturn);
+var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled$1);
 
 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; }
-const StyledSpan = /*#__PURE__*/styled__default['default'].span.withConfig({
+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 StyledSpan = /*#__PURE__*/styled__default["default"].span.withConfig({
   componentId: "sc-1xp824d-0"
-})(["cursor:pointer;box-sizing:border-box;outline:none;"]);
+})(["cursor:pointer;box-sizing:border-box;outline:none;display:flex;justify-content:center;align-items:center;"]);
 const expandRowColumn = {
   // Build our expander column
   id: 'expander',
   // Make sure it has an ID
   accessor: 'expandRowColumn',
-  Header: ({
-    ctx
-  }) => {
+  Header: _ref => {
+    let {
+      ctx
+    } = _ref;
     const {
       tableProps: {
         expandedRows,
@@ -64,21 +70,33 @@ const expandRowColumn = {
     }, [allDataFlattened]);
     const isAllRowsExpanded = React.useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = React.useCallback(() => {
-      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(allExpandable, 'All');
+      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
     const GlobalExpandIcon = React.useMemo(() => {
-      if (isAllRowsExpanded) return /*#__PURE__*/_jsx__default['default'](dsIcons.CollapseAll, {
-        size: "m",
+      if (isAllRowsExpanded) return /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
+        size: "s",
         color: ['brand-primary', '600'],
         "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-      });
-      return /*#__PURE__*/_jsx__default['default'](dsIcons.ExpandAll, {
-        size: "m",
+      }); // Mixed
+
+      if (Object.keys(expandedRows).length) {
+        return /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
+          size: "s",
+          color: ['brand-primary', '600'],
+          "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
+          style: {
+            transform: 'rotate(45deg)'
+          }
+        });
+      }
+
+      return /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
+        size: "s",
         color: ['brand-primary', '600'],
         "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
       });
-    }, [isAllRowsExpanded]);
-    return /*#__PURE__*/_jsx__default['default'](styled.StyledFocusWithin, {}, void 0, /*#__PURE__*/_jsx__default['default'](StyledSpan, {
+    }, [expandedRows, isAllRowsExpanded]);
+    return /*#__PURE__*/_jsx__default["default"](styled.StyledFocusWithin, {}, void 0, /*#__PURE__*/_jsx__default["default"](StyledSpan, {
       role: "button",
       tabIndex: 0,
       title: "Toggle All Rows Expanded",
@@ -91,18 +109,22 @@ const expandRowColumn = {
       },
       "data-testid": constants.DATA_TESTID.DATA_TABLE_GLOBAL_EXPAND_CELL,
       "aria-expanded": isAllRowsExpanded,
-      isRightArrow: !isAllRowsExpanded && Object.keys(expandedRows).length === 0
+      style: {
+        width: '24px',
+        height: '24px'
+      }
     }, 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,
@@ -128,9 +150,9 @@ const expandRowColumn = {
     const isDragging = draggableProps ? draggableProps.isDragging : false;
     const isDragOverlay = dragAndDropRows && !draggableProps;
     const indentStyle = React.useMemo(() => ({
-      marginLeft: `${row.depth * 32}px`,
+      marginLeft: "".concat(row.depth * 32, "px"),
       marginRight: '18px',
-      paddingLeft: '1px',
+      paddingLeft: '2px',
       paddingRight: '2px',
       position: 'relative',
       height: '100%',
@@ -139,7 +161,7 @@ const expandRowColumn = {
     }), [row.depth]);
     const rowProps = React.useMemo(() => ({
       role: 'button',
-      key: `${row.uid}-expand-button`,
+      key: "".concat(row.uid, "-expand-button"),
       title: 'Toggle Row Expanded',
       onClick: onRowExpandHandler,
       onKeyDown: e => {
@@ -154,18 +176,18 @@ const expandRowColumn = {
       'aria-expanded': isExpanded,
       isRightArrow: !isExpanded || isDragging || isDragOverlay
     }), [row.uid, onRowExpandHandler, cell.ref, isRowSelected, isExpanded, isDragging, isDragOverlay]);
-    const PureCaretIcon = React.useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx__default['default'](dsIcons.ArrowheadDown, {
+    const PureCaretIcon = React.useMemo(() => isExpanded && !isDragging && !isDragOverlay ? /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadDown, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",
       size: "s",
       "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-    }) : /*#__PURE__*/_jsx__default['default'](dsIcons.ArrowheadRight, {
+    }) : /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowheadRight, {
       "data-is-col-expanded": isExpanded,
       "data-role": "row-expander-col",
       size: "s",
       "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
     }), [isExpanded, isDragging, isDragOverlay]);
-    const ChildIcon = React.useMemo(() => /*#__PURE__*/_jsx__default['default'](ArrowShortReturn__default['default'], {
+    const ChildIcon = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](dsIcons.ArrowShortReturn, {
       size: "s",
       "data-testid": constants.DATA_TESTID.DATA_TABLE_ICON_CHILD,
       style: {
@@ -173,15 +195,15 @@ const expandRowColumn = {
       },
       color: ['brand-primary', '600']
     }), []);
-    if (shouldPrintCaret) return /*#__PURE__*/_jsx__default['default'](styled.StyledFocusWithin, {
+    if (shouldPrintCaret) return /*#__PURE__*/_jsx__default["default"](styled.StyledFocusWithin, {
       style: indentStyle
     }, void 0, /*#__PURE__*/jsxRuntime.jsx(StyledSpan, _objectSpread(_objectSpread({}, rowProps), {}, {
       children: PureCaretIcon
     })));
-    if (row.depth !== 0) return /*#__PURE__*/_jsx__default['default']("span", {
+    if (row.depth !== 0) return /*#__PURE__*/_jsx__default["default"]("span", {
       style: indentStyle
     }, void 0, ChildIcon);
-    return /*#__PURE__*/_jsx__default['default']("div", {
+    return /*#__PURE__*/_jsx__default["default"]("div", {
       style: {
         width: '36px'
       }

package/cjs/addons/Columns/ColumnSelectMultiple/ColumnSelectMultiple.js

@@ -4,45 +4,51 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _jsx = require('@babel/runtime/helpers/jsx');
+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');
+require('core-js/modules/esnext.async-iterator.filter.js');
+require('core-js/modules/esnext.iterator.filter.js');
 var React = require('react');
-var DSCheckbox = require('@elliemae/ds-form/Checkbox');
+var dsForm = require('@elliemae/ds-form');
 var constants = require('../../../configs/constants.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('@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');
 require('../../../styled.js');
 require('react/jsx-runtime');
-require('@elliemae/ds-form/Radio');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');
 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _defineProperty__default = /*#__PURE__*/_interopDefaultLegacy(_defineProperty);
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
-var DSCheckbox__default = /*#__PURE__*/_interopDefaultLegacy(DSCheckbox);
 
 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 multiSelectColumn = {
   // Build our multiSelecter column
   id: 'multiSelecter',
   // Make sure it has an ID
-  Header: ({
-    ctx
-  }) => {
+  Header: _ref => {
+    let {
+      ctx
+    } = _ref;
     const {
       tableProps: {
         onSelectionChange,
@@ -73,10 +79,10 @@ const multiSelectColumn = {
 
       return {};
     }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
-    const onChangeHandler = React.useCallback(() => {
-      onSelectionChange(newSelection);
+    const onChangeHandler = React.useCallback(e => {
+      onSelectionChange(newSelection, 'All', e);
     }, [newSelection, onSelectionChange]);
-    const PureHeaderCheckbox = React.useMemo(() => /*#__PURE__*/_jsx__default['default'](DSCheckbox__default['default'], {
+    const PureHeaderCheckbox = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
       title: "Toggle All Rows Selected",
       checked: currentGlobalState,
@@ -88,12 +94,13 @@ const multiSelectColumn = {
     }), [currentGlobalState, onChangeHandler]);
     return PureHeaderCheckbox;
   },
-  Cell: ({
-    cell,
-    row,
-    isRowSelected,
-    ctx
-  }) => {
+  Cell: _ref2 => {
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx
+    } = _ref2;
     const {
       tableProps: {
         onSelectionChange,
@@ -105,13 +112,13 @@ const multiSelectColumn = {
       uid
     } = row;
     const selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
-    const PureCheckboxCell = React.useMemo(() => /*#__PURE__*/_jsx__default['default'](DSCheckbox__default['default'], {
+    const PureCheckboxCell = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](dsForm.DSCheckbox, {
       "data-testid": constants.DATA_TESTID.DATA_TABLE_CHECKBOX,
       title: "Toggle Row Selected",
       "aria-checked": selectedState,
       "aria-disabled": false,
       checked: selectedState,
-      onChange: () => {
+      onChange: e => {
         const newState = !selectedState;
 
         const newSelection = _objectSpread(_objectSpread({}, selection), {}, {
@@ -121,7 +128,7 @@ const multiSelectColumn = {
 
         if (!newState) delete newSelection[uid]; // if newState is false, remove from the new selection
 
-        onSelectionChange(newSelection);
+        onSelectionChange(newSelection, uid, e);
       },
       disabled: disabledRows[row.uid],
       innerRef: cell.ref,

package/cjs/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -4,40 +4,45 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _jsx = require('@babel/runtime/helpers/jsx');
 var React = require('react');
+var dsForm = require('@elliemae/ds-form');
 var styled = require('styled-components');
-var DSRadio = require('@elliemae/ds-form/Radio');
 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('core-js/modules/esnext.async-iterator.map.js');
+require('core-js/modules/esnext.iterator.map.js');
 require('@elliemae/ds-icons');
 require('../../../styled.js');
 require('react/jsx-runtime');
-require('@elliemae/ds-form/Checkbox');
 require('../../../parts/TableContent.js');
 require('@elliemae/ds-grid');
 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');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var _jsx__default = /*#__PURE__*/_interopDefaultLegacy(_jsx);
 var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
-var DSRadio__default = /*#__PURE__*/_interopDefaultLegacy(DSRadio);
 
 var _div;
-const CenteredContent = /*#__PURE__*/styled__default['default'].div.withConfig({
+const CenteredContent = /*#__PURE__*/styled__default["default"].div.withConfig({
   componentId: "sc-1u47u8g-0"
 })(["display:flex;height:100%;width:100%;justify-content:center;align-items:center;"]);
-const StyledDSRadio = /*#__PURE__*/styled__default['default'](DSRadio__default['default']).withConfig({
+const StyledDSRadio = /*#__PURE__*/styled__default["default"](dsForm.DSRadio).withConfig({
   componentId: "sc-1u47u8g-1"
 })(["padding-bottom:0;cursor:pointer;"]);
 const singleSelectColumn = {
@@ -45,13 +50,14 @@ const singleSelectColumn = {
   id: 'singleSelecter',
   // Make sure it has an ID
   // The header doesn't need anything for single selection
-  Header: () => _div || (_div = /*#__PURE__*/_jsx__default['default']("div", {})),
-  Cell: ({
-    cell,
-    row,
-    isRowSelected,
-    ctx
-  }) => {
+  Header: () => _div || (_div = /*#__PURE__*/_jsx__default["default"]("div", {})),
+  Cell: _ref => {
+    let {
+      cell,
+      row,
+      isRowSelected,
+      ctx
+    } = _ref;
     const {
       tableProps: {
         onSelectionChange,
@@ -63,7 +69,7 @@ const singleSelectColumn = {
       uid
     } = row;
     const selectedState = selection === null || selection === void 0 ? void 0 : selection[uid];
-    const PureCheckBox = React.useMemo(() => /*#__PURE__*/_jsx__default['default'](CenteredContent, {}, void 0, /*#__PURE__*/_jsx__default['default'](StyledDSRadio // eslint-disable-next-line react/prop-types
+    const PureCheckBox = React.useMemo(() => /*#__PURE__*/_jsx__default["default"](CenteredContent, {}, void 0, /*#__PURE__*/_jsx__default["default"](StyledDSRadio // eslint-disable-next-line react/prop-types
     , {
       containerProps: {
         'aria-checked': selectedState,