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

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 = {
@@ -9,12 +9,12 @@ const columnPropTypes = {
   accessor: PropTypes.string.description('The entry of the data that this column will display'),
   id: 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: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('The custom component to render as a filter'),
-  Cell: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('The custom cell renderer component'),
+  Filter: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('The custom component to render as a filter'),
+  Cell: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('The custom cell renderer component'),
   editable: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]).description('The editable out-of-the-box or component to render'),
   disableDnD: PropTypes.bool.description('Whereas this column should be draggable'),
   canResize: PropTypes.bool.description('Whereas this column should be resizable'),
-  width: PropTypes.oneOf([PropTypes.string, PropTypes.number]).description('Width of this column'),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of this column'),
   minWidth: PropTypes.number.description('Minimum width of this column, useful when resizing'),
   maxWidth: PropTypes.number.description('Maximum width of this column, useful when resizing'),
   canSort: PropTypes.bool.description('Whereas this column is sortable'),
@@ -27,7 +27,7 @@ const columnsPropTypes = PropTypes.shape(columnPropTypes).description('Columns p
 const rowPropTypes = {
   row_variant_type: rowVariantType.description('Which row variant to use, will default to primary'),
   row_variant_compact: PropTypes.bool.description('Whether to use the compact version of the row'),
-  tableRowDetails: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('Component for row details'),
+  tableRowDetails: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Component for row details'),
   dimsumHeaderValue: PropTypes.string.description('Header displayed on the header variant of the row')
 };
 const rowsPropTypes = PropTypes.shape(rowPropTypes).description('Rows props');
@@ -35,8 +35,8 @@ const DataTableSchema = {
   columns: PropTypes.arrayOf(columnsPropTypes).description('Array of columns').isRequired,
   data: PropTypes.arrayOf(rowsPropTypes).description('Array of rows'),
   height: PropTypes.number.description('Height of the datatable component'),
-  width: PropTypes.oneOf([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),
-  renderRowActions: PropTypes.oneOf([PropTypes.object, PropTypes.bool]).description('The renderer to use for the action toolbar'),
+  width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).description('Width of the datatable component'),
+  renderRowActions: PropTypes.oneOfType([PropTypes.object, PropTypes.bool]).description('The renderer to use for the action toolbar'),
   isExpandable: PropTypes.bool.description('Whether the datatable is expandable').defaultValue(false),
   uniqueRowAccessor: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string), 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: PropTypes.object.description('Object with the identifiers of the rows as keys, and booleans as values. Specifies if a row is disabled or not'),
@@ -55,7 +55,7 @@ const DataTableSchema = {
   })).description('Array of filter keys and values'),
   withFilterBar: PropTypes.bool.description('Whether to display the filter bar'),
   filterBarProps: PropTypes.shape({
-    customPillRenderer: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
+    customPillRenderer: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('If you specify custom filters, you will need to render their pills here'),
     extraOptions: PropTypes.arrayOf(PropTypes.shape({
       type: PropTypes.string,
       id: PropTypes.string,
@@ -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.oneOf([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),
@@ -86,7 +98,7 @@ const DataTableSchema = {
   noResultsMessage: PropTypes.string.description('Message to show when no more data is available'),
   noResultsSecondaryMessage: PropTypes.string.description('Secondary message to show when no more data is available'),
   noResultsButtonLabel: PropTypes.string.description('Label of the button when no more data is available'),
-  noResultsPlaceholder: PropTypes.oneOf([PropTypes.func, PropTypes.element]).description('Custom content to show when dataset is empty'),
+  noResultsPlaceholder: PropTypes.oneOfType([PropTypes.func, PropTypes.element]).description('Custom content to show when dataset is empty'),
   isLoading: PropTypes.bool.description('Whether to show a global loader in the datatable'),
   isLoadingAppended: PropTypes.bool.description('Whether to show an appended loader in the datatable'),
   // eslint-disable-next-line max-lines

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,25 +1,31 @@
-import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 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 ArrowShortReturn from '@elliemae/ds-icons/ArrowShortReturn';
+import { ArrowheadDown, ArrowheadRight, ArrowShortReturn } from '@elliemae/ds-icons';
 import styled from 'styled-components';
-import { CollapseAll, ExpandAll, ArrowheadDown, ArrowheadRight } from '@elliemae/ds-icons';
 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';
 
@@ -28,15 +34,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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(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.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,
@@ -53,20 +60,32 @@ const expandRowColumn = {
     }, [allDataFlattened]);
     const isAllRowsExpanded = useMemo(() => Object.keys(allExpandable).length === Object.keys(expandedRows).length, [allExpandable, expandedRows]);
     const onExpandedAllHandler = useCallback(() => {
-      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(allExpandable, 'All');
+      if (isAllRowsExpanded) onRowExpand({}, 'All');else onRowExpand(_objectSpread({}, allExpandable), 'All');
     }, [allExpandable, isAllRowsExpanded, onRowExpand]);
     const GlobalExpandIcon = useMemo(() => {
-      if (isAllRowsExpanded) return /*#__PURE__*/_jsx(CollapseAll, {
-        size: "m",
+      if (isAllRowsExpanded) return /*#__PURE__*/_jsx(ArrowheadDown, {
+        size: "s",
         color: ['brand-primary', '600'],
         "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_DOWN
-      });
-      return /*#__PURE__*/_jsx(ExpandAll, {
-        size: "m",
+      }); // Mixed
+
+      if (Object.keys(expandedRows).length) {
+        return /*#__PURE__*/_jsx(ArrowheadRight, {
+          size: "s",
+          color: ['brand-primary', '600'],
+          "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_MIXED,
+          style: {
+            transform: 'rotate(45deg)'
+          }
+        });
+      }
+
+      return /*#__PURE__*/_jsx(ArrowheadRight, {
+        size: "s",
         color: ['brand-primary', '600'],
         "data-testid": DATA_TESTID.DATA_TABLE_ICON_ARROW_RIGHT
       });
-    }, [isAllRowsExpanded]);
+    }, [expandedRows, isAllRowsExpanded]);
     return /*#__PURE__*/_jsx(StyledFocusWithin, {}, void 0, /*#__PURE__*/_jsx(StyledSpan, {
       role: "button",
       tabIndex: 0,
@@ -80,18 +99,22 @@ const expandRowColumn = {
       },
       "data-testid": 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,
@@ -117,9 +140,9 @@ 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: '1px',
+      paddingLeft: '2px',
       paddingRight: '2px',
       position: 'relative',
       height: '100%',
@@ -128,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,26 +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 '@elliemae/ds-icons/ArrowShortReturn';
-import 'styled-components';
+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; }
@@ -30,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,
@@ -63,8 +70,8 @@ const multiSelectColumn = {
 
       return {};
     }, [newGlobalStateAfterToggle, allDataFlattened, disabledRows]);
-    const onChangeHandler = useCallback(() => {
-      onSelectionChange(newSelection);
+    const onChangeHandler = useCallback(e => {
+      onSelectionChange(newSelection, 'All', e);
     }, [newSelection, onSelectionChange]);
     const PureHeaderCheckbox = useMemo(() => /*#__PURE__*/_jsx(DSCheckbox, {
       "data-testid": DATA_TESTID.DATA_TABLE_GLOBAL_CHECKBOX,
@@ -78,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,
@@ -101,7 +109,7 @@ const multiSelectColumn = {
       "aria-checked": selectedState,
       "aria-disabled": false,
       checked: selectedState,
-      onChange: () => {
+      onChange: e => {
         const newState = !selectedState;
 
         const newSelection = _objectSpread(_objectSpread({}, selection), {}, {
@@ -111,7 +119,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/esm/addons/Columns/ColumnSelectSingle/ColumnSelectSingle.js

@@ -1,26 +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 '@elliemae/ds-icons/ArrowShortReturn';
+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;
@@ -36,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,

package/esm/addons/Editables/ComboboxEditableCell/ComboboxEditableCell.js

@@ -1,34 +1,42 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
 import { useContext, useMemo, useState, useCallback } from 'react';
-import ComboBoxFreeSolo from '@elliemae/ds-form/ComboBoxFreeSolo';
-import '../../../exported-related/FilterPopover.js';
-import { EditableCell } from '../../../exported-related/EditableCell.js';
-import 'styled-components';
+import { ComboBoxFreeSolo } from '@elliemae/ds-form';
+import 'core-js/modules/esnext.async-iterator.filter.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 '@babel/runtime/helpers/esm/defineProperty';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../../redux/reducers/index.js';
 import '../../../configs/constants.js';
 import 'react-virtual';
 import '../../../configs/useRowFlattenization.js';
-import '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
+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 '@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 DataTableContext from '../../../DataTableContext.js';
 import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
+import { EditableCell } from '../../../exported-related/EditableCell.js';
+import '@elliemae/ds-utilities';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
 
 const ComboboxEditableCell = props => {
   const {

package/esm/addons/Editables/DateEditableCell/DateEditableCell.js

@@ -1,33 +1,42 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback } from 'react';
-import '../../../exported-related/FilterPopover.js';
-import { EditableCell } from '../../../exported-related/EditableCell.js';
-import 'styled-components';
+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 '@babel/runtime/helpers/esm/defineProperty';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import 'styled-components';
+import '../../../redux/reducers/index.js';
 import '../../../configs/constants.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 '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
+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 '@elliemae/ds-form/Radio';
+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 DataTableContext from '../../../DataTableContext.js';
 import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
+import { EditableCell } from '../../../exported-related/EditableCell.js';
+import '@elliemae/ds-utilities';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
 
 function DateEditableCell(props) {
   const {

package/esm/addons/Editables/TextEditableCell/TextEditableCell.js

@@ -1,33 +1,42 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.js';
 import { useContext, useState, useCallback } from 'react';
 import styled from 'styled-components';
-import '../../../exported-related/FilterPopover.js';
-import { EditableCell } from '../../../exported-related/EditableCell.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/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import '@babel/runtime/helpers/esm/defineProperty';
 import '@elliemae/ds-button';
-import '@elliemae/ds-icons/MoreOptionsVert';
+import '@elliemae/ds-popperjs';
+import '../../../redux/reducers/index.js';
 import '../../../configs/constants.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 '@babel/runtime/helpers/esm/defineProperty';
-import '@elliemae/ds-icons/ArrowShortReturn';
+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 '@elliemae/ds-form/Radio';
+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 DataTableContext from '../../../DataTableContext.js';
 import '../../../parts/Row.js';
 import '../../../parts/Footer.js';
-import '@elliemae/ds-icons/GripperVertical';
 import '../../../parts/HoC/SortableItemContext.js';
+import { EditableCell } from '../../../exported-related/EditableCell.js';
+import '@elliemae/ds-utilities';
 import 'uid';
 import '../../../exported-related/Filters/applyOutOfTheBoxFilters.js';
 import 'moment';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
 
 const StyledInput = /*#__PURE__*/styled.input.withConfig({
   componentId: "sc-15pvvoa-0"
@@ -61,15 +70,31 @@ const TextEditableCell = props => {
       rowIndex
     });
   }, [value, onCellValueChange, cell.column.id, cell.row.index]);
+  const handleOnKeyDown = useCallback(e => {
+    if (e.code === 'Enter') {
+      cell.ref.current.focus(); // will exec on blur callback from input and save new value
+    }
+
+    if (e.code === 'Escape') {
+      setValue(cell.value);
+      const auxRef = cell.ref.current; // this prevent the on blur
+
+      setTimeout(() => {
+        auxRef.focus();
+      });
+    }
+  }, [cell]);
   return /*#__PURE__*/_jsx(EditableCell, {
     StandardRender: DefaultCellRender,
     EditableRenderer: /*#__PURE__*/_jsx(StyledInput, {
       value: value,
+      onKeyDown: handleOnKeyDown,
       onChange: handleOnChange,
       onBlur: handleOnBlur,
       autoFocus: true
     }),
     cell: cell,
+    setValue: setValue,
     isRowSelected: isRowSelected
   });
 };