@elliemae/ds-datagrids 2.0.0-next.7 → 2.0.0-rc.2

package/esm/plugins/selectable/selectableFormatter.js

@@ -1,31 +1,39 @@
+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 React, { useRef, useEffect, forwardRef } from 'react';
-import { isFunction } from '@elliemae/ds-utilities/utils';
-import DSCheckbox from '@elliemae/ds-basic/form/Checkbox';
-import DSRadio from '@elliemae/ds-basic/form/Radio';
+import { isFunction } from '@elliemae/ds-utilities';
+import { DSCheckbox, DSRadio } from '@elliemae/ds-form';
 import { jsx } from 'react/jsx-runtime';
 
 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(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 SelectableWrapper = ({
-  className,
-  children
-}) => /*#__PURE__*/_jsx("div", {
-  className: className,
-  onClick: e => e.stopPropagation()
-}, void 0, children);
+const SelectableWrapper = _ref => {
+  let {
+    className,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx("div", {
+    className: className,
+    onClick: e => e.stopPropagation()
+  }, void 0, children);
+};
 
-const SelectableComponent = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef(({
-  className,
-  isMultiSelect,
-  isHeader,
-  onSelect,
-  isSelected,
-  value
-}, ref) => {
+const SelectableComponent = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    className,
+    isMultiSelect,
+    isHeader,
+    onSelect,
+    isSelected,
+    value
+  } = _ref2;
   const SelectComponent = isMultiSelect || isHeader ? DSCheckbox : DSRadio;
   return /*#__PURE__*/_jsx(SelectableWrapper, {
     className: className
@@ -39,58 +47,61 @@ const SelectableComponent = /*#__PURE__*/React.memo( /*#__PURE__*/forwardRef(({
   }));
 }, (prev, next) => next.isScrolling));
 
-const selectableFormatter = ({
-  isMultiSelect = false,
-  renderer,
-  className,
-  isHeader,
-  onSelect
-}, grid) => (valueRender, extraParams) => {
-  const {
-    registerFocus
-  } = extraParams;
-  const ref = useRef();
-  const {
-    props: {
-      rowKey
-    },
-    state: {
-      selection
-    },
-    shiftPressed,
-    lastSelectedRow
-  } = grid.getInstance();
-  const {
-    rowData,
-    isScrolling
-  } = extraParams;
-  useEffect(() => {
-    if (registerFocus) registerFocus(ref.current);
-  }, [ref.current]);
-  const isSelected = isHeader ? selection.selectAll : !!selection.selectedRows[rowData[rowKey]];
-  const handleSelect = isHeader ? () => onSelect(!isSelected) : () => onSelect(rowData[rowKey], extraParams.rowIndex, shiftPressed, lastSelectedRow);
+const selectableFormatter = (_ref3, grid) => {
+  let {
+    isMultiSelect = false,
+    renderer,
+    className,
+    isHeader,
+    onSelect
+  } = _ref3;
+  return (valueRender, extraParams) => {
+    const {
+      registerFocus
+    } = extraParams;
+    const ref = useRef();
+    const {
+      props: {
+        rowKey
+      },
+      state: {
+        selection
+      },
+      shiftPressed,
+      lastSelectedRow
+    } = grid.getInstance();
+    const {
+      rowData,
+      isScrolling
+    } = extraParams;
+    useEffect(() => {
+      if (registerFocus) registerFocus(ref.current);
+    }, [ref.current]);
+    const isSelected = isHeader ? selection.selectAll : !!selection.selectedRows[rowData[rowKey]];
+    const handleSelect = isHeader ? () => onSelect(!isSelected) : () => onSelect(rowData[rowKey], extraParams.rowIndex, shiftPressed, lastSelectedRow);
 
-  if (isFunction(renderer)) {
-    return /*#__PURE__*/_jsx(SelectableWrapper, {
-      className: className
-    }, void 0, renderer(_objectSpread(_objectSpread({
-      rowData: {}
-    }, extraParams), {}, {
-      value: isSelected,
-      isHeader,
-      onSelect: handleSelect
-    })));
-  }
+    if (isFunction(renderer)) {
+      return /*#__PURE__*/_jsx(SelectableWrapper, {
+        className: className
+      }, void 0, renderer(_objectSpread(_objectSpread({
+        rowData: {}
+      }, extraParams), {}, {
+        value: isSelected,
+        isHeader,
+        onSelect: handleSelect
+      })));
+    }
 
-  return /*#__PURE__*/jsx(SelectableComponent, {
-    ref: ref,
-    className: className,
-    isMultiSelect: isMultiSelect,
-    isScrolling: isScrolling,
-    isSelected: isSelected,
-    onSelect: handleSelect,
-    value: !isHeader ? rowData[rowKey] : 'header-select-all'
-  });
+    return /*#__PURE__*/jsx(SelectableComponent, {
+      ref: ref,
+      className: className,
+      isMultiSelect: isMultiSelect,
+      isScrolling: isScrolling,
+      isSelected: isSelected,
+      onSelect: handleSelect,
+      value: !isHeader ? rowData[rowKey] : 'header-select-all'
+    });
+  };
 };
 
 export { selectableFormatter as default };

package/esm/plugins/selectable/useSelectableState.js

@@ -1,7 +1,17 @@
+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 'core-js/modules/web.dom-collections.iterator.js';
-import useDerivedStateFromProps from '@elliemae/ds-utilities/hooks/useDerivedStateFromProps';
-import { hashArray, toggleInObject, omit } from '@elliemae/ds-utilities/utils';
+import 'core-js/modules/esnext.async-iterator.some.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.some.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import 'core-js/modules/esnext.async-iterator.reduce.js';
+import 'core-js/modules/esnext.iterator.reduce.js';
+import 'core-js/modules/esnext.async-iterator.filter.js';
+import 'core-js/modules/esnext.iterator.filter.js';
+import { useDerivedStateFromProps, hashArray, toggleInObject, omit } from '@elliemae/ds-utilities';
 import { toggleSelectAll, checkAllRowsSelected, toggleSingleSelectable } from './helper.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; }
@@ -9,7 +19,10 @@ 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; }
 
 function deriveSelectedStateFromPropsOnUpdate(rows) {
-  return (nextProp = {}, prevProp = {}) => {
+  return function () {
+    let nextProp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let prevProp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
     if (nextProp.selectAll !== prevProp.selectAll) {
       const nextSelectedRows = nextProp.selectAll ? toggleSelectAll(rows, true) : hashArray(nextProp.selectedRows || []);
       return {
@@ -46,8 +59,9 @@ function useSelectableState(grid) {
     onUpdate: deriveSelectedStateFromPropsOnUpdate(rows)
   }); // ACTIONS
 
-  const handleSelectRow = (id, index, shift = false, lastSelectedRow = null // eslint-disable-next-line max-params
-  ) => {
+  const handleSelectRow = function (id, index) {
+    let shift = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    let lastSelectedRow = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
     setSelectedRowsState(prevState => {
       const {
         rows: nextRows

package/esm/plugins/sortable/SortablePlugin.js

@@ -1,5 +1,5 @@
 import * as sortabular from 'sortabular';
-import { compose, isEmpty, orderBy } from '@elliemae/ds-utilities/utils';
+import { compose, isEmpty, orderBy } from '@elliemae/ds-utilities';
 import { appendHeaderFormatter, mergeClassNameToColumnHeader } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
 import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
 import sortHeaderFormatter from './sortHeaderFormatter.js';
@@ -60,9 +60,10 @@ const SortablePlugin = createInstancePlugin('sortable', {
   registerHotKeys(grid) {
     return {
       key: 'ctrl+s',
-      handler: ({
-        cellIndex
-      }) => {
+      handler: _ref => {
+        let {
+          cellIndex
+        } = _ref;
         const {
           actions: {
             sort

package/esm/plugins/sortable/sortHeaderFormatter.js

@@ -1,18 +1,18 @@
 import _jsx from '@babel/runtime/helpers/esm/jsx';
 import React from 'react';
 import { aggregatedClasses } from '@elliemae/ds-classnames';
-import ArrowheadDown from '@elliemae/ds-icons/ArrowheadDown';
-import ArrowheadUp from '@elliemae/ds-icons/ArrowheadUp';
+import { ArrowheadUp, ArrowheadDown } from '@elliemae/ds-icons';
 
 var _ArrowheadUp, _ArrowheadDown;
 const blockName = 'data-grid-sort-header';
 const SortHeaderContainer = aggregatedClasses('div')(blockName);
 const iconColor = ['brand-primary', 800];
-const SortHeader = /*#__PURE__*/React.memo(({
-  value,
-  onClick,
-  sortState
-}) => {
+const SortHeader = /*#__PURE__*/React.memo(_ref => {
+  let {
+    value,
+    onClick,
+    sortState
+  } = _ref;
   const sortIndicator = sortState === 'asc' ? _ArrowheadUp || (_ArrowheadUp = /*#__PURE__*/_jsx(ArrowheadUp, {
     color: iconColor
   })) : _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {
@@ -25,10 +25,11 @@ const SortHeader = /*#__PURE__*/React.memo(({
   }, void 0, value), sortState && sortIndicator);
 });
 
-const sortHeaderFormatter = (sortable, grid) => (value, {
-  columnIndex,
-  property
-}) => {
+const sortHeaderFormatter = (sortable, grid) => (value, _ref2) => {
+  let {
+    columnIndex,
+    property
+  } = _ref2;
   const {
     state: {
       sortingColumns

package/esm/plugins/sortable/sortTree.js

@@ -1,13 +1,23 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.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 * as sortabular from 'sortabular';
 
 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(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 deepSorting = (sortConfig, rows = []) => sortabular.sorter(sortConfig)(rows.map(row => row.children && row.children.length ? _objectSpread(_objectSpread({}, row), {}, {
-  children: deepSorting(sortConfig, row.children)
-}) : row));
+const deepSorting = function (sortConfig) {
+  let rows = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+  return sortabular.sorter(sortConfig)(rows.map(row => row.children && row.children.length ? _objectSpread(_objectSpread({}, row), {}, {
+    children: deepSorting(sortConfig, row.children)
+  }) : row));
+};
 
 function sortTree(sortConfig) {
   return rows => deepSorting(sortConfig, rows);

package/esm/plugins/sortable/sorter.js

@@ -1,149 +1,166 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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.some.js';
+import 'core-js/modules/esnext.iterator.some.js';
 import 'core-js/modules/web.dom-collections.iterator.js';
-import { get } from '@elliemae/ds-utilities/utils';
+import 'core-js/modules/esnext.async-iterator.for-each.js';
+import 'core-js/modules/esnext.iterator.for-each.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.find.js';
+import 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { get } from '@elliemae/ds-utilities';
 import moment from 'moment';
 
 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(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 sorter = ({
-  columns,
-  sortingColumns,
-  sort,
-  emptyLast
-} = {}) => data => {
-  if (!columns) {
-    throw new Error('sort.sorter - Missing "columns" argument!');
-  }
-
-  if (!sort) {
-    throw new Error('sort.sorter - Missing "sort" argument!');
-  }
-
-  if (!sortingColumns) {
-    return data;
-  }
-
-  const columnIndexList = new Array(sortingColumns.length);
-  const orderList = new Array(sortingColumns.length);
-  let actualSortFunction = sort;
-
-  if (emptyLast) {
-    actualSortFunction = (innerData, innerColumnIndexList, innerOrderList) => {
-      const sortedData = sort(innerData, innerColumnIndexList, innerOrderList);
-      const keys = Object.keys(sortingColumns);
-      const withData = sortedData.filter(r => keys.some(key => !!r[key]));
-      const withoutData = sortedData.filter(r => keys.some(key => !r[key]));
-      return [...withData, ...withoutData];
-    };
-  }
-
-  Object.keys(sortingColumns).forEach(sortingColumnKey => {
-    const realColumn = columns.find(column => column.property === sortingColumnKey);
-    if (!realColumn) return;
-
-    const columnSorter = realColumn.sort || function resolveValue(row) {
-      const {
-        property,
-        sortBy
-      } = realColumn;
-      const value = row[sortBy || property]; // Pick resolved value by convention
-
-      const resolvedValue = get(row, "_".concat(property), value);
-
-      if (realColumn.type === 'DateTime') {
-        return moment(resolvedValue);
-      }
+const sorter = function () {
+  let {
+    columns,
+    sortingColumns,
+    sort,
+    emptyLast
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return data => {
+    if (!columns) {
+      throw new Error('sort.sorter - Missing "columns" argument!');
+    }
+
+    if (!sort) {
+      throw new Error('sort.sorter - Missing "sort" argument!');
+    }
+
+    if (!sortingColumns) {
+      return data;
+    }
+
+    const columnIndexList = new Array(sortingColumns.length);
+    const orderList = new Array(sortingColumns.length);
+    let actualSortFunction = sort;
+
+    if (emptyLast) {
+      actualSortFunction = (innerData, innerColumnIndexList, innerOrderList) => {
+        const sortedData = sort(innerData, innerColumnIndexList, innerOrderList);
+        const keys = Object.keys(sortingColumns);
+        const withData = sortedData.filter(r => keys.some(key => !!r[key]));
+        const withoutData = sortedData.filter(r => keys.some(key => !r[key]));
+        return [...withData, ...withoutData];
+      };
+    }
+
+    Object.keys(sortingColumns).forEach(sortingColumnKey => {
+      const realColumn = columns.find(column => column.property === sortingColumnKey);
+      if (!realColumn) return;
+
+      const columnSorter = realColumn.sort || function resolveValue(row) {
+        const {
+          property,
+          sortBy
+        } = realColumn;
+        const value = row[sortBy || property]; // Pick resolved value by convention
 
-      return typeof resolvedValue === 'string' ? resolvedValue.toLowerCase() : resolvedValue;
-    };
+        const resolvedValue = get(row, "_".concat(property), value);
 
-    const sortingColumn = sortingColumns[sortingColumnKey];
-    columnIndexList[sortingColumn.position] = columnSorter;
-    orderList[sortingColumn.position] = sortingColumn.direction;
-  });
-  return actualSortFunction(data, columnIndexList, orderList);
+        if (realColumn.type === 'DateTime') {
+          return moment(resolvedValue);
+        }
+
+        return typeof resolvedValue === 'string' ? resolvedValue.toLowerCase() : resolvedValue;
+      };
+
+      const sortingColumn = sortingColumns[sortingColumnKey];
+      columnIndexList[sortingColumn.position] = columnSorter;
+      orderList[sortingColumn.position] = sortingColumn.direction;
+    });
+    return actualSortFunction(data, columnIndexList, orderList);
+  };
 };
-const sorterGroups = ({
-  columns,
-  sortingColumns,
-  sort,
-  emptyLast
-} = {}) => (data, rowsData) => {
-  if (!columns) {
-    throw new Error('sort.sorter - Missing "columns" argument!');
-  }
-
-  if (!sort) {
-    throw new Error('sort.sorter - Missing "sort" argument!');
-  }
-
-  if (!sortingColumns) {
-    return data;
-  }
-
-  const columnIndexList = new Array(sortingColumns.length);
-  const orderList = new Array(sortingColumns.length);
-  let actualSortFunction = sort;
-
-  if (emptyLast) {
-    actualSortFunction = (innerData, innerColumnIndexList, innerOrderList) => {
-      const sortedData = sort(innerData, innerColumnIndexList, innerOrderList);
-      const keys = Object.keys(sortingColumns);
-      const withData = sortedData.filter(r => keys.some(key => !!r[key]));
-      const withoutData = sortedData.filter(r => keys.some(key => !r[key]));
-      return [...withData, ...withoutData];
-    };
-  }
-
-  Object.keys(sortingColumns).forEach(sortingColumnKey => {
-    const realColumn = columns.find(column => column.property === sortingColumnKey);
-    if (!realColumn) return;
-
-    const columnSorter = realColumn.sort || function resolveValue(row) {
-      const {
-        property,
-        sortBy
-      } = realColumn;
-      const value = row[sortBy || property]; // Pick resolved value by convention
-
-      const resolvedValue = get(row, "_".concat(property), value);
-
-      if (realColumn.type === 'DateTime') {
-        return moment(resolvedValue);
-      }
+const sorterGroups = function () {
+  let {
+    columns,
+    sortingColumns,
+    sort,
+    emptyLast
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return (data, rowsData) => {
+    if (!columns) {
+      throw new Error('sort.sorter - Missing "columns" argument!');
+    }
+
+    if (!sort) {
+      throw new Error('sort.sorter - Missing "sort" argument!');
+    }
+
+    if (!sortingColumns) {
+      return data;
+    }
 
-      return typeof resolvedValue === 'string' ? resolvedValue.toLowerCase() : resolvedValue;
-    };
-
-    const sortingColumn = sortingColumns[sortingColumnKey];
-    columnIndexList[sortingColumn.position] = columnSorter;
-    orderList[sortingColumn.position] = sortingColumn.direction;
-  });
-  const groups = {};
-  const preserveData = {};
-  data.forEach(c => {
-    preserveData[c.id] = _objectSpread({}, c);
-  });
-  rowsData.forEach(group => {
-    groups[group.id] = {
-      children: actualSortFunction(group.children.map(c => _objectSpread({
-        parentNode: preserveData[c.id].parentNode,
-        data: c
-      }, c)), columnIndexList, orderList) // sort internally
-
-    };
-  });
-  const sorted = actualSortFunction(data.map(r => _objectSpread(_objectSpread({}, r.data), r)), columnIndexList, orderList); // sort global
-
-  let ssortGlobal = [];
-  sorted.filter(s => !s.isGroup).forEach(sr => {
-    if (groups[sr.parentNode.id]) {
-      ssortGlobal = [...ssortGlobal, preserveData[sr.parentNode.id], ...groups[sr.parentNode.id].children];
-      delete groups[sr.parentNode.id];
+    const columnIndexList = new Array(sortingColumns.length);
+    const orderList = new Array(sortingColumns.length);
+    let actualSortFunction = sort;
+
+    if (emptyLast) {
+      actualSortFunction = (innerData, innerColumnIndexList, innerOrderList) => {
+        const sortedData = sort(innerData, innerColumnIndexList, innerOrderList);
+        const keys = Object.keys(sortingColumns);
+        const withData = sortedData.filter(r => keys.some(key => !!r[key]));
+        const withoutData = sortedData.filter(r => keys.some(key => !r[key]));
+        return [...withData, ...withoutData];
+      };
     }
-  });
-  return ssortGlobal;
+
+    Object.keys(sortingColumns).forEach(sortingColumnKey => {
+      const realColumn = columns.find(column => column.property === sortingColumnKey);
+      if (!realColumn) return;
+
+      const columnSorter = realColumn.sort || function resolveValue(row) {
+        const {
+          property,
+          sortBy
+        } = realColumn;
+        const value = row[sortBy || property]; // Pick resolved value by convention
+
+        const resolvedValue = get(row, "_".concat(property), value);
+
+        if (realColumn.type === 'DateTime') {
+          return moment(resolvedValue);
+        }
+
+        return typeof resolvedValue === 'string' ? resolvedValue.toLowerCase() : resolvedValue;
+      };
+
+      const sortingColumn = sortingColumns[sortingColumnKey];
+      columnIndexList[sortingColumn.position] = columnSorter;
+      orderList[sortingColumn.position] = sortingColumn.direction;
+    });
+    const groups = {};
+    const preserveData = {};
+    data.forEach(c => {
+      preserveData[c.id] = _objectSpread({}, c);
+    });
+    rowsData.forEach(group => {
+      groups[group.id] = {
+        children: actualSortFunction(group.children.map(c => _objectSpread({
+          parentNode: preserveData[c.id].parentNode,
+          data: c
+        }, c)), columnIndexList, orderList) // sort internally
+
+      };
+    });
+    const sorted = actualSortFunction(data.map(r => _objectSpread(_objectSpread({}, r.data), r)), columnIndexList, orderList); // sort global
+
+    let ssortGlobal = [];
+    sorted.filter(s => !s.isGroup).forEach(sr => {
+      if (groups[sr.parentNode.id]) {
+        ssortGlobal = [...ssortGlobal, preserveData[sr.parentNode.id], ...groups[sr.parentNode.id].children];
+        delete groups[sr.parentNode.id];
+      }
+    });
+    return ssortGlobal;
+  };
 };
 
 export { sorter, sorterGroups };

package/esm/plugins/sortable/useSortableState.js

@@ -1,5 +1,12 @@
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
+import 'core-js/modules/esnext.async-iterator.find.js';
+import 'core-js/modules/esnext.iterator.constructor.js';
+import 'core-js/modules/esnext.iterator.find.js';
+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 * as sortabular from 'sortabular/dist/index.js';
 import useDerivedStateFromProps from '@elliemae/ds-utilities/hooks/useDerivedStateFromProps';
 import { checkIfSortable } from './checkIfSortable.js';

package/esm/plugins/toolbar/RowRenderer.js

@@ -1,9 +1,14 @@
+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 _jsx from '@babel/runtime/helpers/esm/jsx';
 import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
 import 'core-js/modules/web.dom-collections.iterator.js';
 import { useRef, useState, useEffect } from 'react';
 import { isEmpty } from 'lodash';
-import { omit } from '@elliemae/ds-utilities/utils';
+import { omit } from '@elliemae/ds-utilities';
 import { ToolbarTrigger } from './ToolbarTrigger.js';
 import { RowSizes } from '../../rowSizes.js';
 import { jsx } from 'react/jsx-runtime';