@elliemae/ds-datagrids 2.2.0-alpha.1 → 2.2.0-alpha.5

package/esm/plugins/selectable/selectableFormatter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/selectable/selectableFormatter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable react/prop-types */\n/* eslint-disable indent */\n/* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events,react/display-name */\nimport React, { forwardRef, useEffect, useRef } from 'react';\nimport { isFunction } from '@elliemae/ds-utilities';\nimport { DSCheckbox, DSRadio } from '@elliemae/ds-form';\n\nconst SelectableWrapper = ({ className, children }) => (\n  <div className={className} onClick={(e) => e.stopPropagation()}>\n    {children}\n  </div>\n);\n\nconst SelectableComponent = React.memo(\n  forwardRef(\n    ({ className, isMultiSelect, isHeader, onSelect, isSelected, value }, ref) => {\n      const SelectComponent = isMultiSelect || isHeader ? DSCheckbox : DSRadio;\n\n      return (\n        <SelectableWrapper className={className}>\n          <SelectComponent\n            checked={isSelected}\n            data-testid=\"column-selectable-component\"\n            innerRef={ref}\n            onChange={onSelect}\n            tabIndex={-1}\n            value={value}\n          />\n        </SelectableWrapper>\n      );\n    },\n    (prev, next) => next.isScrolling,\n  ),\n);\n\nconst selectableFormatter =\n  ({ isMultiSelect = false, renderer, className, isHeader, onSelect }, grid) =>\n  (valueRender, extraParams) => {\n    const { registerFocus } = extraParams;\n    const ref = useRef();\n    const {\n      props: { rowKey },\n      state: { selection },\n      shiftPressed,\n      lastSelectedRow,\n    } = grid.getInstance();\n    const { rowData, isScrolling } = extraParams;\n\n    useEffect(() => {\n      if (registerFocus) registerFocus(ref.current);\n    }, [ref.current]);\n\n    const isSelected = isHeader ? selection.selectAll : !!selection.selectedRows[rowData[rowKey]];\n\n    const handleSelect = isHeader\n      ? () => onSelect(!isSelected)\n      : () => onSelect(rowData[rowKey], extraParams.rowIndex, shiftPressed, lastSelectedRow);\n\n    if (isFunction(renderer)) {\n      return (\n        <SelectableWrapper className={className}>\n          {renderer({\n            rowData: {},\n            ...extraParams,\n            value: isSelected,\n            isHeader,\n            onSelect: handleSelect,\n          })}\n        </SelectableWrapper>\n      );\n    }\n\n    return (\n      <SelectableComponent\n        ref={ref}\n        className={className}\n        isMultiSelect={isMultiSelect}\n        isScrolling={isScrolling}\n        isSelected={isSelected}\n        onSelect={handleSelect}\n        value={!isHeader ? rowData[rowKey] : 'header-select-all'}\n      />\n    );\n  };\n\nexport { selectableFormatter };\nexport default selectableFormatter;\n"],
+  "mappings": "AAAA;ACGA;AACA;AACA;AAEA,MAAM,oBAAoB,CAAC,EAAE,WAAW,eACtC,qCAAC,OAAD;AAAA,EAAK;AAAA,EAAsB,SAAS,CAAC,MAAM,EAAE;AAAA,GAC1C;AAIL,MAAM,sBAAsB,OAAM,KAChC,WACE,CAAC,EAAE,WAAW,eAAe,UAAU,UAAU,YAAY,SAAS,QAAQ;AAC5E,QAAM,kBAAkB,iBAAiB,WAAW,aAAa;AAEjE,SACE,qCAAC,mBAAD;AAAA,IAAmB;AAAA,KACjB,qCAAC,iBAAD;AAAA,IACE,SAAS;AAAA,IACT,eAAY;AAAA,IACZ,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV;AAAA;AAAA,GAKR,CAAC,MAAM,SAAS,KAAK;AAIzB,MAAM,sBACJ,CAAC,EAAE,gBAAgB,OAAO,UAAU,WAAW,UAAU,YAAY,SACrE,CAAC,aAAa,gBAAgB;AAC5B,QAAM,EAAE,kBAAkB;AAC1B,QAAM,MAAM;AACZ,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,OAAO,EAAE;AAAA,IACT;AAAA,IACA;AAAA,MACE,KAAK;AACT,QAAM,EAAE,SAAS,gBAAgB;AAEjC,YAAU,MAAM;AACd,QAAI;AAAe,oBAAc,IAAI;AAAA,KACpC,CAAC,IAAI;AAER,QAAM,aAAa,WAAW,UAAU,YAAY,CAAC,CAAC,UAAU,aAAa,QAAQ;AAErF,QAAM,eAAe,WACjB,MAAM,SAAS,CAAC,cAChB,MAAM,SAAS,QAAQ,SAAS,YAAY,UAAU,cAAc;AAExE,MAAI,WAAW,WAAW;AACxB,WACE,qCAAC,mBAAD;AAAA,MAAmB;AAAA,OAChB,SAAS;AAAA,MACR,SAAS;AAAA,SACN;AAAA,MACH,OAAO;AAAA,MACP;AAAA,MACA,UAAU;AAAA;AAAA;AAMlB,SACE,qCAAC,qBAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV,OAAO,CAAC,WAAW,QAAQ,UAAU;AAAA;AAAA;AAM7C,IAAO,8BAAQ;",
+  "names": []
+}

package/esm/plugins/selectable/useSelectableState.js

@@ -1,28 +1,13 @@
-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 '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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
+import * as React from "react";
+import { useDerivedStateFromProps } from "@elliemae/ds-utilities";
+import { toggleInObject, hashArray, omit } from "@elliemae/ds-utilities";
+import {
+  checkAllRowsSelected,
+  toggleSelectAll,
+  toggleSingleSelectable
+} from "./helper";
 function deriveSelectedStateFromPropsOnUpdate(rows) {
-  return function () {
-    let nextProp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-    let prevProp = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-
+  return (nextProp = {}, prevProp = {}) => {
     if (nextProp.selectAll !== prevProp.selectAll) {
       const nextSelectedRows = nextProp.selectAll ? toggleSelectAll(rows, true) : hashArray(nextProp.selectedRows || []);
       return {
@@ -30,87 +15,57 @@ function deriveSelectedStateFromPropsOnUpdate(rows) {
         selectAll: checkAllRowsSelected(rows, Object.keys(nextSelectedRows))
       };
     }
-
     return {
       selectedRows: hashArray(nextProp.selectedRows || []),
       selectAll: checkAllRowsSelected(rows, Object.keys(nextProp.selectedRows))
     };
   };
 }
-
 function useSelectableState(grid) {
   const {
-    props: {
-      rowKey = 'id',
-      selectedRows,
-      selectAll,
-      selectable,
-      onSelectRow,
-      onSelectAll
-    },
+    props: { rowKey = "id", selectedRows, selectAll, selectable, onSelectRow, onSelectAll },
     rows,
     setLastSelectedRow
   } = grid.getInstance();
-  const multiple = selectable === 'multi';
-  const [selection, setSelectedRowsState] = useDerivedStateFromProps({
-    selectedRows,
-    selectAll
-  }, {
-    onUpdate: deriveSelectedStateFromPropsOnUpdate(rows)
-  }); // ACTIONS
-
-  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
-      } = grid.getInstance();
-      const wasSelected = Object.keys(prevState.selectedRows).some( // we need to match softly as the id may be a number
-      // eslint-disable-next-line eqeqeq
-      elem => elem == id);
+  const multiple = selectable === "multi";
+  const [selection, setSelectedRowsState] = useDerivedStateFromProps({ selectedRows, selectAll }, { onUpdate: deriveSelectedStateFromPropsOnUpdate(rows) });
+  const handleSelectRow = (id, index, shift = false, lastSelectedRow = null) => {
+    setSelectedRowsState((prevState) => {
+      const { rows: nextRows } = grid.getInstance();
+      const wasSelected = Object.keys(prevState.selectedRows).some((elem) => elem == id);
       let nextSelectedRows = multiple ? toggleInObject(prevState.selectedRows, id, true) : toggleSingleSelectable(prevState.selectedRows, id);
-      setLastSelectedRow({
-        index,
-        mode: wasSelected ? 'deselect' : 'select'
-      });
-
+      setLastSelectedRow({ index, mode: wasSelected ? "deselect" : "select" });
       if (shift && lastSelectedRow) {
         const prevSmallest = lastSelectedRow.index < index + 1;
         const sliceStart = prevSmallest ? lastSelectedRow.index : index;
         const sliceEnd = prevSmallest ? index + 1 : lastSelectedRow.index + 1;
-        const rowSegment = nextRows.slice(sliceStart, sliceEnd).map(row => row[rowKey]);
-
-        if (lastSelectedRow.mode === 'deselect') {
+        const rowSegment = nextRows.slice(sliceStart, sliceEnd).map((row) => row[rowKey]);
+        if (lastSelectedRow.mode === "deselect") {
           nextSelectedRows = omit(prevState.selectedRows, rowSegment);
         } else {
-          const selectedSegment = rowSegment.reduce((o, key) => _objectSpread(_objectSpread({}, o), {}, {
-            [key]: true
-          }), {});
-          nextSelectedRows = _objectSpread(_objectSpread({}, prevState.selectedRows), selectedSegment);
+          const selectedSegment = rowSegment.reduce((o, key) => ({ ...o, [key]: true }), {});
+          nextSelectedRows = {
+            ...prevState.selectedRows,
+            ...selectedSegment
+          };
         }
       }
-
       const nextState = {
         selectedRows: nextSelectedRows,
         selectAll: checkAllRowsSelected(nextRows, Object.keys(nextSelectedRows))
       };
-
-      if (index !== null && index !== undefined) {
-        onSelectRow(nextRows.filter(row => nextState.selectedRows[row[rowKey]]), nextState.selectAll, index);
+      if (index !== null && index !== void 0) {
+        onSelectRow(nextRows.filter((row) => nextState.selectedRows[row[rowKey]]), nextState.selectAll, index);
       }
-
       return nextState;
     });
   };
-
-  const handleSelectAll = checked => {
-    if (!multiple) return;
+  const handleSelectAll = (checked) => {
+    if (!multiple)
+      return;
     setLastSelectedRow(null);
     setSelectedRowsState(() => {
-      const {
-        composedRows: nextRows
-      } = grid.getInstance();
+      const { composedRows: nextRows } = grid.getInstance();
       const nextState = {
         selectAll: checked,
         selectedRows: toggleSelectAll(nextRows, checked)
@@ -120,7 +75,6 @@ function useSelectableState(grid) {
       return nextState;
     });
   };
-
   return {
     actions: {
       selectRow: handleSelectRow,
@@ -131,5 +85,7 @@ function useSelectableState(grid) {
     }
   };
 }
-
-export { useSelectableState };
+export {
+  useSelectableState
+};
+//# sourceMappingURL=useSelectableState.js.map

package/esm/plugins/selectable/useSelectableState.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/selectable/useSelectableState.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { useDerivedStateFromProps } from '@elliemae/ds-utilities';\nimport { toggleInObject, hashArray, omit } from '@elliemae/ds-utilities';\nimport {\n  checkAllRowsSelected,\n  toggleSelectAll,\n  toggleSingleSelectable,\n} from './helper';\n\nfunction deriveSelectedStateFromPropsOnUpdate(rows) {\n  return (nextProp = {}, prevProp = {}) => {\n    if (nextProp.selectAll !== prevProp.selectAll) {\n      const nextSelectedRows = nextProp.selectAll\n        ? toggleSelectAll(rows, true)\n        : hashArray(nextProp.selectedRows || []);\n      return {\n        selectedRows: nextSelectedRows,\n        selectAll: checkAllRowsSelected(rows, Object.keys(nextSelectedRows)),\n      };\n    }\n    return {\n      selectedRows: hashArray(nextProp.selectedRows || []),\n      selectAll: checkAllRowsSelected(rows, Object.keys(nextProp.selectedRows)),\n    };\n  };\n}\n\nexport function useSelectableState(grid) {\n  const {\n    props: { rowKey = 'id', selectedRows, selectAll, selectable, onSelectRow, onSelectAll },\n    rows,\n    setLastSelectedRow,\n  } = grid.getInstance();\n\n  const multiple = selectable === 'multi';\n  const [selection, setSelectedRowsState] = useDerivedStateFromProps(\n    { selectedRows, selectAll },\n    { onUpdate: deriveSelectedStateFromPropsOnUpdate(rows) },\n  );\n\n  // ACTIONS\n  const handleSelectRow = (\n    id,\n    index,\n    shift = false,\n    lastSelectedRow = null,\n    // eslint-disable-next-line max-params\n  ) => {\n    setSelectedRowsState((prevState) => {\n      const { rows: nextRows } = grid.getInstance();\n      const wasSelected = Object.keys(prevState.selectedRows).some(\n        // we need to match softly as the id may be a number\n        // eslint-disable-next-line eqeqeq\n        (elem) => elem == id,\n      );\n      let nextSelectedRows = multiple\n        ? toggleInObject(prevState.selectedRows, id, true)\n        : toggleSingleSelectable(prevState.selectedRows, id);\n      setLastSelectedRow({ index, mode: wasSelected ? 'deselect' : 'select' });\n      if (shift && lastSelectedRow) {\n        const prevSmallest = lastSelectedRow.index < index + 1;\n        const sliceStart = prevSmallest ? lastSelectedRow.index : index;\n        const sliceEnd = prevSmallest ? index + 1 : lastSelectedRow.index + 1;\n        const rowSegment = nextRows.slice(sliceStart, sliceEnd).map((row) => row[rowKey]);\n        if (lastSelectedRow.mode === 'deselect') {\n          nextSelectedRows = omit(prevState.selectedRows, rowSegment);\n        } else {\n          const selectedSegment = rowSegment.reduce((o, key) => ({ ...o, [key]: true }), {});\n          nextSelectedRows = {\n            ...prevState.selectedRows,\n            ...selectedSegment,\n          };\n        }\n      }\n\n      const nextState = {\n        selectedRows: nextSelectedRows,\n        selectAll: checkAllRowsSelected(nextRows, Object.keys(nextSelectedRows)),\n      };\n      if (index !== null && index !== undefined) {\n        onSelectRow(\n          nextRows.filter((row) => nextState.selectedRows[row[rowKey]]),\n          nextState.selectAll,\n          index,\n        );\n      }\n\n      return nextState;\n    });\n  };\n\n  const handleSelectAll = (checked) => {\n    if (!multiple) return;\n    setLastSelectedRow(null);\n    setSelectedRowsState(() => {\n      const { composedRows: nextRows } = grid.getInstance();\n\n      const nextState = {\n        selectAll: checked,\n        selectedRows: toggleSelectAll(nextRows, checked),\n      };\n\n      onSelectAll(nextState.selectAll);\n      onSelectRow(checked ? nextRows : [], nextState.selectAll);\n\n      return nextState;\n    });\n  };\n\n  return {\n    actions: {\n      selectRow: handleSelectRow,\n      selectAll: handleSelectAll,\n    },\n    state: {\n      selection,\n    },\n  };\n}\n"],
+  "mappings": "AAAA;ACCA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAMA,8CAA8C,MAAM;AAClD,SAAO,CAAC,WAAW,IAAI,WAAW,OAAO;AACvC,QAAI,SAAS,cAAc,SAAS,WAAW;AAC7C,YAAM,mBAAmB,SAAS,YAC9B,gBAAgB,MAAM,QACtB,UAAU,SAAS,gBAAgB;AACvC,aAAO;AAAA,QACL,cAAc;AAAA,QACd,WAAW,qBAAqB,MAAM,OAAO,KAAK;AAAA;AAAA;AAGtD,WAAO;AAAA,MACL,cAAc,UAAU,SAAS,gBAAgB;AAAA,MACjD,WAAW,qBAAqB,MAAM,OAAO,KAAK,SAAS;AAAA;AAAA;AAAA;AAK1D,4BAA4B,MAAM;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,SAAS,MAAM,cAAc,WAAW,YAAY,aAAa;AAAA,IAC1E;AAAA,IACA;AAAA,MACE,KAAK;AAET,QAAM,WAAW,eAAe;AAChC,QAAM,CAAC,WAAW,wBAAwB,yBACxC,EAAE,cAAc,aAChB,EAAE,UAAU,qCAAqC;AAInD,QAAM,kBAAkB,CACtB,IACA,OACA,QAAQ,OACR,kBAAkB,SAEf;AACH,yBAAqB,CAAC,cAAc;AAClC,YAAM,EAAE,MAAM,aAAa,KAAK;AAChC,YAAM,cAAc,OAAO,KAAK,UAAU,cAAc,KAGtD,CAAC,SAAS,QAAQ;AAEpB,UAAI,mBAAmB,WACnB,eAAe,UAAU,cAAc,IAAI,QAC3C,uBAAuB,UAAU,cAAc;AACnD,yBAAmB,EAAE,OAAO,MAAM,cAAc,aAAa;AAC7D,UAAI,SAAS,iBAAiB;AAC5B,cAAM,eAAe,gBAAgB,QAAQ,QAAQ;AACrD,cAAM,aAAa,eAAe,gBAAgB,QAAQ;AAC1D,cAAM,WAAW,eAAe,QAAQ,IAAI,gBAAgB,QAAQ;AACpE,cAAM,aAAa,SAAS,MAAM,YAAY,UAAU,IAAI,CAAC,QAAQ,IAAI;AACzE,YAAI,gBAAgB,SAAS,YAAY;AACvC,6BAAmB,KAAK,UAAU,cAAc;AAAA,eAC3C;AACL,gBAAM,kBAAkB,WAAW,OAAO,CAAC,GAAG,QAAS,MAAK,IAAI,MAAM,SAAS;AAC/E,6BAAmB;AAAA,eACd,UAAU;AAAA,eACV;AAAA;AAAA;AAAA;AAKT,YAAM,YAAY;AAAA,QAChB,cAAc;AAAA,QACd,WAAW,qBAAqB,UAAU,OAAO,KAAK;AAAA;AAExD,UAAI,UAAU,QAAQ,UAAU,QAAW;AACzC,oBACE,SAAS,OAAO,CAAC,QAAQ,UAAU,aAAa,IAAI,WACpD,UAAU,WACV;AAAA;AAIJ,aAAO;AAAA;AAAA;AAIX,QAAM,kBAAkB,CAAC,YAAY;AACnC,QAAI,CAAC;AAAU;AACf,uBAAmB;AACnB,yBAAqB,MAAM;AACzB,YAAM,EAAE,cAAc,aAAa,KAAK;AAExC,YAAM,YAAY;AAAA,QAChB,WAAW;AAAA,QACX,cAAc,gBAAgB,UAAU;AAAA;AAG1C,kBAAY,UAAU;AACtB,kBAAY,UAAU,WAAW,IAAI,UAAU;AAE/C,aAAO;AAAA;AAAA;AAIX,SAAO;AAAA,IACL,SAAS;AAAA,MACP,WAAW;AAAA,MACX,WAAW;AAAA;AAAA,IAEb,OAAO;AAAA,MACL;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/plugins/sortable/SortablePlugin.js

@@ -1,39 +1,33 @@
-import * as sortabular from 'sortabular';
-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';
-import { useSortableState } from './useSortableState.js';
-import { sorterGroups, sorter } from './sorter.js';
-
+import * as React from "react";
+import * as sortabular from "sortabular";
+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";
+import { useSortableState } from "./useSortableState";
+import { sorter, sorterGroups } from "./sorter";
 const decorateColumn = (column, grid) => {
   const {
-    props: {
-      isSortableColumnActive = col => col.sortable,
-      groupedRows
-    }
+    props: { isSortableColumnActive = (col) => col.sortable, groupedRows }
   } = grid;
-  if (groupedRows) return column;
-  if (!isSortableColumnActive(column)) return column;
+  if (groupedRows)
+    return column;
+  if (!isSortableColumnActive(column))
+    return column;
   const formatter = sortHeaderFormatter(sortabular.sort({
     getSortingColumns: () => grid.getState().sortingColumns || [],
     onSort: grid.actions.sort,
     strategy: sortabular.strategies.byProperty
   }), grid);
-  return compose(appendHeaderFormatter(formatter), mergeClassNameToColumnHeader('with-sortable'))(column);
+  return compose(appendHeaderFormatter(formatter), mergeClassNameToColumnHeader("with-sortable"))(column);
 };
-
 const composeRows = (rows, grid) => {
   const {
-    state: {
-      sortingColumns
-    },
-    props: {
-      isDataSorted,
-      groupedRows,
-      groupedBy,
-      sortEmptyLast
-    },
+    state: { sortingColumns },
+    props: { isDataSorted, groupedRows, groupedBy, sortEmptyLast },
     rows: rowsData,
     composedRows,
     decoratedColumns
@@ -43,40 +37,33 @@ const composeRows = (rows, grid) => {
     sortingColumns: !isEmpty(sortingColumns) && sortingColumns,
     sort: orderBy,
     emptyLast: sortEmptyLast
-  }; // TODO: 1572 FIX
-
+  };
   if (groupedRows && !groupedBy) {
     return !isDataSorted ? sorterGroups(sortingConfig)(composedRows, rowsData, groupedBy) : rows;
   }
-
   return !isDataSorted ? sorter(sortingConfig)(rows) : rows;
 };
-
-const SortablePlugin = createInstancePlugin('sortable', {
+const SortablePlugin = createInstancePlugin("sortable", {
   registerStateHook: useSortableState,
   decorateColumn,
   composeRows,
-
   registerHotKeys(grid) {
     return {
-      key: 'ctrl+s',
-      handler: _ref => {
-        let {
-          cellIndex
-        } = _ref;
+      key: "ctrl+s",
+      handler: ({ cellIndex }) => {
         const {
-          actions: {
-            sort
-          },
+          actions: { sort },
           decoratedColumns
         } = grid.getInstance();
         const column = decoratedColumns[cellIndex];
-        if (!column) return;
+        if (!column)
+          return;
         sort(column.property);
       }
     };
   }
-
 });
-
-export { SortablePlugin };
+export {
+  SortablePlugin
+};
+//# sourceMappingURL=SortablePlugin.js.map

package/esm/plugins/sortable/SortablePlugin.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/sortable/SortablePlugin.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import * as sortabular from 'sortabular';\nimport { compose, isEmpty, orderBy } from '@elliemae/ds-utilities';\nimport {\n  appendHeaderFormatter,\n  mergeClassNameToColumnHeader,\n} from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';\nimport { createInstancePlugin } from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';\nimport { sortHeaderFormatter } from './sortHeaderFormatter';\nimport { useSortableState } from './useSortableState';\nimport { sorter, sorterGroups } from './sorter';\n\nconst decorateColumn = (column, grid) => {\n  const {\n    props: { isSortableColumnActive = (col) => col.sortable, groupedRows },\n  } = grid;\n\n  if (groupedRows) return column;\n  if (!isSortableColumnActive(column)) return column;\n\n  const formatter = sortHeaderFormatter(\n    sortabular.sort({\n      getSortingColumns: () => grid.getState().sortingColumns || [],\n      onSort: grid.actions.sort,\n      strategy: sortabular.strategies.byProperty,\n    }),\n    grid,\n  );\n\n  return compose(appendHeaderFormatter(formatter), mergeClassNameToColumnHeader('with-sortable'))(column);\n};\n\nconst composeRows = (rows, grid) => {\n  const {\n    state: { sortingColumns },\n    props: { isDataSorted, groupedRows, groupedBy, sortEmptyLast },\n    rows: rowsData,\n    composedRows,\n    decoratedColumns,\n  } = grid.getInstance();\n\n  const sortingConfig = {\n    columns: decoratedColumns,\n    sortingColumns: !isEmpty(sortingColumns) && sortingColumns,\n    sort: orderBy,\n    emptyLast: sortEmptyLast,\n  };\n\n  // TODO: 1572 FIX\n  if (groupedRows && !groupedBy) {\n    return !isDataSorted ? sorterGroups(sortingConfig)(composedRows, rowsData, groupedBy) : rows;\n  }\n\n  return !isDataSorted ? sorter(sortingConfig)(rows) : rows;\n};\n\nexport const SortablePlugin = createInstancePlugin('sortable', {\n  registerStateHook: useSortableState,\n  decorateColumn,\n  composeRows,\n  registerHotKeys(grid) {\n    return {\n      key: 'ctrl+s',\n      handler: ({ cellIndex }) => {\n        const {\n          actions: { sort },\n          decoratedColumns,\n        } = grid.getInstance();\n        const column = decoratedColumns[cellIndex];\n        if (!column) return;\n        sort(column.property);\n      },\n    };\n  },\n});\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAAA;AAAA;AAAA;AAIA;AACA;AACA;AACA;AAEA,MAAM,iBAAiB,CAAC,QAAQ,SAAS;AACvC,QAAM;AAAA,IACJ,OAAO,EAAE,yBAAyB,CAAC,QAAQ,IAAI,UAAU;AAAA,MACvD;AAEJ,MAAI;AAAa,WAAO;AACxB,MAAI,CAAC,uBAAuB;AAAS,WAAO;AAE5C,QAAM,YAAY,oBAChB,WAAW,KAAK;AAAA,IACd,mBAAmB,MAAM,KAAK,WAAW,kBAAkB;AAAA,IAC3D,QAAQ,KAAK,QAAQ;AAAA,IACrB,UAAU,WAAW,WAAW;AAAA,MAElC;AAGF,SAAO,QAAQ,sBAAsB,YAAY,6BAA6B,kBAAkB;AAAA;AAGlG,MAAM,cAAc,CAAC,MAAM,SAAS;AAClC,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,IACT,OAAO,EAAE,cAAc,aAAa,WAAW;AAAA,IAC/C,MAAM;AAAA,IACN;AAAA,IACA;AAAA,MACE,KAAK;AAET,QAAM,gBAAgB;AAAA,IACpB,SAAS;AAAA,IACT,gBAAgB,CAAC,QAAQ,mBAAmB;AAAA,IAC5C,MAAM;AAAA,IACN,WAAW;AAAA;AAIb,MAAI,eAAe,CAAC,WAAW;AAC7B,WAAO,CAAC,eAAe,aAAa,eAAe,cAAc,UAAU,aAAa;AAAA;AAG1F,SAAO,CAAC,eAAe,OAAO,eAAe,QAAQ;AAAA;AAGhD,MAAM,iBAAiB,qBAAqB,YAAY;AAAA,EAC7D,mBAAmB;AAAA,EACnB;AAAA,EACA;AAAA,EACA,gBAAgB,MAAM;AACpB,WAAO;AAAA,MACL,KAAK;AAAA,MACL,SAAS,CAAC,EAAE,gBAAgB;AAC1B,cAAM;AAAA,UACJ,SAAS,EAAE;AAAA,UACX;AAAA,YACE,KAAK;AACT,cAAM,SAAS,iBAAiB;AAChC,YAAI,CAAC;AAAQ;AACb,aAAK,OAAO;AAAA;AAAA;AAAA;AAAA;",
+  "names": []
+}

package/esm/plugins/sortable/checkIfSortable.js

@@ -1,17 +1,16 @@
-/* eslint-disable no-plusplus */
-
-/* eslint-disable no-loops/no-loops */
+import * as React from "react";
 const checkIfSortable = (column, rows) => {
   for (let index = 0; index < rows.length; index++) {
     const element = rows[index][column];
-
-    if (!(element === null || element === undefined)) {
-      // PUI-6452
+    if (!(element === null || element === void 0)) {
       return true;
     }
   }
-
   return false;
 };
-
-export { checkIfSortable, checkIfSortable as default };
+var checkIfSortable_default = checkIfSortable;
+export {
+  checkIfSortable,
+  checkIfSortable_default as default
+};
+//# sourceMappingURL=checkIfSortable.js.map

package/esm/plugins/sortable/checkIfSortable.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/sortable/checkIfSortable.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable no-plusplus */\n/* eslint-disable no-loops/no-loops */\nexport const checkIfSortable = (column, rows) => {\n  for (let index = 0; index < rows.length; index++) {\n    const element = rows[index][column];\n    if (!(element === null || element === undefined)) {\n      // PUI-6452\n      return true;\n    }\n  }\n  return false;\n};\n\nexport default checkIfSortable;\n"],
+  "mappings": "AAAA;ACEO,MAAM,kBAAkB,CAAC,QAAQ,SAAS;AAC/C,WAAS,QAAQ,GAAG,QAAQ,KAAK,QAAQ,SAAS;AAChD,UAAM,UAAU,KAAK,OAAO;AAC5B,QAAI,CAAE,aAAY,QAAQ,YAAY,SAAY;AAEhD,aAAO;AAAA;AAAA;AAGX,SAAO;AAAA;AAGT,IAAO,0BAAQ;",
+  "names": []
+}

package/esm/plugins/sortable/index.js

@@ -1 +1,6 @@
-export { SortablePlugin } from './SortablePlugin.js';
+import * as React from "react";
+import { SortablePlugin } from "./SortablePlugin";
+export {
+  SortablePlugin
+};
+//# sourceMappingURL=index.js.map

package/esm/plugins/sortable/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/sortable/index.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export { SortablePlugin } from './SortablePlugin';\n"],
+  "mappings": "AAAA;ACAA;",
+  "names": []
+}

package/esm/plugins/sortable/sortHeaderFormatter.js

@@ -1,53 +1,37 @@
-import _jsx from '@babel/runtime/helpers/esm/jsx';
-import React from 'react';
-import { aggregatedClasses } from '@elliemae/ds-classnames';
-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(_ref => {
-  let {
-    value,
-    onClick,
-    sortState
-  } = _ref;
-  const sortIndicator = sortState === 'asc' ? _ArrowheadUp || (_ArrowheadUp = /*#__PURE__*/_jsx(ArrowheadUp, {
+import * as React from "react";
+import React2 from "react";
+import { aggregatedClasses } from "@elliemae/ds-classnames";
+import { ArrowheadDown, ArrowheadUp } from "@elliemae/ds-icons";
+const blockName = "data-grid-sort-header";
+const SortHeaderContainer = aggregatedClasses("div")(blockName);
+const iconColor = ["brand-primary", 800];
+const SortHeader = React2.memo(({ value, onClick, sortState }) => {
+  const sortIndicator = sortState === "asc" ? /* @__PURE__ */ React2.createElement(ArrowheadUp, {
     color: iconColor
-  })) : _ArrowheadDown || (_ArrowheadDown = /*#__PURE__*/_jsx(ArrowheadDown, {
+  }) : /* @__PURE__ */ React2.createElement(ArrowheadDown, {
     color: iconColor
-  }));
-  return /*#__PURE__*/_jsx(SortHeaderContainer, {
-    onClick: onClick
-  }, void 0, /*#__PURE__*/_jsx("span", {
+  });
+  return /* @__PURE__ */ React2.createElement(SortHeaderContainer, {
+    onClick
+  }, /* @__PURE__ */ React2.createElement("span", {
     className: "header-value"
-  }, void 0, value), sortState && sortIndicator);
+  }, value), sortState && sortIndicator);
 });
-
-const sortHeaderFormatter = (sortable, grid) => (value, _ref2) => {
-  let {
-    columnIndex,
-    property
-  } = _ref2;
+const sortHeaderFormatter = (sortable, grid) => (value, { columnIndex, property }) => {
   const {
-    state: {
-      sortingColumns
-    }
+    state: { sortingColumns }
   } = grid.getInstance();
-  const {
+  const { onClick, className } = sortable(value, { columnIndex, property });
+  return /* @__PURE__ */ React2.createElement(SortHeader, {
+    className,
     onClick,
-    className
-  } = sortable(value, {
-    columnIndex,
-    property
-  });
-  return /*#__PURE__*/_jsx(SortHeader, {
-    className: className,
-    onClick: onClick,
     sortState: sortingColumns[property] && sortingColumns[property].direction,
-    value: value
+    value
   });
 };
-
-export { sortHeaderFormatter as default };
+var sortHeaderFormatter_default = sortHeaderFormatter;
+export {
+  sortHeaderFormatter_default as default,
+  sortHeaderFormatter
+};
+//# sourceMappingURL=sortHeaderFormatter.js.map

package/esm/plugins/sortable/sortHeaderFormatter.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/sortable/sortHeaderFormatter.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React from 'react';\nimport { aggregatedClasses } from '@elliemae/ds-classnames';\nimport { ArrowheadDown, ArrowheadUp } from '@elliemae/ds-icons';\n\nconst blockName = 'data-grid-sort-header';\n\nconst SortHeaderContainer = aggregatedClasses('div')(blockName);\n\nconst iconColor = ['brand-primary', 800];\n\nconst SortHeader = React.memo(({ value, onClick, sortState }) => {\n  const sortIndicator = sortState === 'asc' ? <ArrowheadUp color={iconColor} /> : <ArrowheadDown color={iconColor} />;\n  return (\n    <SortHeaderContainer onClick={onClick}>\n      <span className=\"header-value\">{value}</span>\n      {sortState && sortIndicator}\n    </SortHeaderContainer>\n  );\n});\n\nconst sortHeaderFormatter =\n  (sortable, grid) =>\n  (value, { columnIndex, property }) => {\n    const {\n      state: { sortingColumns },\n    } = grid.getInstance();\n    const { onClick, className } = sortable(value, { columnIndex, property });\n    return (\n      <SortHeader\n        className={className}\n        onClick={onClick}\n        sortState={sortingColumns[property] && sortingColumns[property].direction}\n        value={value}\n      />\n    );\n  };\n\nexport { sortHeaderFormatter };\nexport default sortHeaderFormatter;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AAEA,MAAM,YAAY;AAElB,MAAM,sBAAsB,kBAAkB,OAAO;AAErD,MAAM,YAAY,CAAC,iBAAiB;AAEpC,MAAM,aAAa,OAAM,KAAK,CAAC,EAAE,OAAO,SAAS,gBAAgB;AAC/D,QAAM,gBAAgB,cAAc,QAAQ,qCAAC,aAAD;AAAA,IAAa,OAAO;AAAA,OAAgB,qCAAC,eAAD;AAAA,IAAe,OAAO;AAAA;AACtG,SACE,qCAAC,qBAAD;AAAA,IAAqB;AAAA,KACnB,qCAAC,QAAD;AAAA,IAAM,WAAU;AAAA,KAAgB,QAC/B,aAAa;AAAA;AAKpB,MAAM,sBACJ,CAAC,UAAU,SACX,CAAC,OAAO,EAAE,aAAa,eAAe;AACpC,QAAM;AAAA,IACJ,OAAO,EAAE;AAAA,MACP,KAAK;AACT,QAAM,EAAE,SAAS,cAAc,SAAS,OAAO,EAAE,aAAa;AAC9D,SACE,qCAAC,YAAD;AAAA,IACE;AAAA,IACA;AAAA,IACA,WAAW,eAAe,aAAa,eAAe,UAAU;AAAA,IAChE;AAAA;AAAA;AAMR,IAAO,8BAAQ;",
+  "names": []
+}

package/esm/plugins/sortable/sortTree.js

@@ -1,26 +1,15 @@
-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); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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));
-};
-
+import * as React from "react";
+import * as sort from "sortabular";
+const deepSorting = (sortConfig, rows = []) => sort.sorter(sortConfig)(rows.map((row) => row.children && row.children.length ? {
+  ...row,
+  children: deepSorting(sortConfig, row.children)
+} : row));
 function sortTree(sortConfig) {
-  return rows => deepSorting(sortConfig, rows);
+  return (rows) => deepSorting(sortConfig, rows);
 }
-
-export { sortTree as default };
+var sortTree_default = sortTree;
+export {
+  sortTree_default as default,
+  sortTree
+};
+//# sourceMappingURL=sortTree.js.map

package/esm/plugins/sortable/sortTree.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/plugins/sortable/sortTree.tsx"],
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import * as sort from 'sortabular';\n\nconst deepSorting = (sortConfig, rows = []) =>\n  sort.sorter(sortConfig)(\n    rows.map(row =>\n      row.children && row.children.length\n        ? {\n            ...row,\n            children: deepSorting(sortConfig, row.children),\n          }\n        : row,\n    ),\n  );\nfunction sortTree(sortConfig) {\n  return rows => deepSorting(sortConfig, rows);\n}\n\nexport { sortTree };\nexport default sortTree;\n"],
+  "mappings": "AAAA;ACAA;AAEA,MAAM,cAAc,CAAC,YAAY,OAAO,OACtC,KAAK,OAAO,YACV,KAAK,IAAI,SACP,IAAI,YAAY,IAAI,SAAS,SACzB;AAAA,KACK;AAAA,EACH,UAAU,YAAY,YAAY,IAAI;AAAA,IAExC;AAGV,kBAAkB,YAAY;AAC5B,SAAO,UAAQ,YAAY,YAAY;AAAA;AAIzC,IAAO,mBAAQ;",
+  "names": []
+}