@elliemae/ds-datagrids 2.2.0-alpha.4 → 3.0.0-next.2

package/esm/plugins/selectable/addSelectableColumn.js

@@ -1,38 +1,55 @@
-import * as React from "react";
-import {
-  appendCellFormatter,
-  appendHeaderFormatter
-} from "@elliemae/ds-shared/useDataGrid/initColumnDefinition";
-import { selectableFormatter } from "./selectableFormatter";
-function selectionColumnCreator({
-  grid,
-  selectAll,
-  selectionComponent,
-  onSelectRow,
-  onSelectAll,
-  multiple,
-  multiSelectFilterLabel,
-  multiSelectFilterOptions,
-  multiSelectFilterLabels,
-  multiSelectComponent
-}) {
+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 _objectWithoutProperties from '@babel/runtime/helpers/esm/objectWithoutProperties';
+import { appendCellFormatter, appendHeaderFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import selectableFormatter from './selectableFormatter.js';
+
+const _excluded = ["visible", "isDataColumn", "width", "minWidth", "cellRenderer", "headerCellRenderer", "customRenderer", "header"];
+
+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; }
+function selectionColumnCreator(_ref) {
+  let {
+    grid,
+    selectAll,
+    selectionComponent,
+    onSelectRow,
+    onSelectAll,
+    multiple,
+    // backward compatibility: later this needed to be passed through column definition
+    multiSelectFilterLabel,
+    multiSelectFilterOptions,
+    multiSelectFilterLabels,
+    multiSelectComponent // favor selectionComponent
+
+  } = _ref;
   const {
-    props: { rowKey }
+    props: {
+      rowKey
+    }
   } = grid;
-  return ({
-    visible = true,
-    isDataColumn = false,
-    width = 40,
-    minWidth,
-    cellRenderer,
-    headerCellRenderer,
-    customRenderer,
-    header,
-    ...column
-  } = {}) => {
-    let selectionColumn = {
-      ...column,
-      property: "metaData.selected",
+  return function () {
+    let _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+    let {
+      visible = true,
+      isDataColumn = false,
+      width = 40,
+      minWidth,
+      cellRenderer,
+      headerCellRenderer,
+      customRenderer,
+      header
+    } = _ref2,
+        column = _objectWithoutProperties(_ref2, _excluded);
+
+    let selectionColumn = _objectSpread(_objectSpread({}, column), {}, {
+      property: 'metaData.selected',
       filterLabel: multiSelectFilterLabel,
       filterOptions: multiSelectFilterOptions,
       filterLabels: multiSelectFilterLabels,
@@ -40,27 +57,28 @@ function selectionColumnCreator({
       width,
       minWidth: minWidth || width,
       isDataColumn
-    };
+    });
+
     selectionColumn = appendCellFormatter(selectableFormatter({
       isMultiSelect: multiple,
       renderer: selectionComponent || multiSelectComponent,
       onSelect: onSelectRow
     }, grid))(selectionColumn);
+
     if (multiple) {
       selectionColumn = appendHeaderFormatter(selectableFormatter({
         rowKey,
         selectAll,
         isMultiSelect: true,
         isHeader: true,
-        className: "multi-select-wrapper",
+        className: 'multi-select-wrapper',
         renderer: selectionComponent || multiSelectComponent,
         onSelect: onSelectAll
       }, grid))(selectionColumn);
     }
+
     return selectionColumn;
   };
 }
-export {
-  selectionColumnCreator
-};
-//# sourceMappingURL=addSelectableColumn.js.map
+
+export { selectionColumnCreator };

package/esm/plugins/selectable/helper.js

@@ -1,25 +1,31 @@
-import * as React from "react";
-import { toggleInObject } from "@elliemae/ds-utilities";
+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 _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+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 'core-js/modules/esnext.async-iterator.map.js';
+import 'core-js/modules/esnext.iterator.map.js';
+import { toggleInObject } from '@elliemae/ds-utilities';
+
+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 checkAllRowsSelected = (rows, selectedRows) => {
-  if (rows.length && selectedRows.length === rows.length)
-    return true;
-  if (selectedRows.length)
-    return "mixed";
+  if (rows.length && selectedRows.length === rows.length) return true;
+  if (selectedRows.length) return 'mixed';
   return false;
 };
 const toggleSelectAll = (rows, checked) => !checked ? {} : rows.reduce((nextSelRows, row) => toggleInObject(nextSelRows, row.id, true), {});
 const toggleSingleSelectable = (selectedRows, id) => !selectedRows[id] ? toggleInObject({}, id, true) : {};
-const mergeSelectedToMetaData = (selected) => (row) => ({
-  ...row,
-  "metaData.selected": selected
+
+const mergeSelectedToMetaData = selected => row => _objectSpread(_objectSpread({}, row), {}, {
+  'metaData.selected': selected
 });
-const selectSingleRow = (rows, filter) => rows.map((row) => mergeSelectedToMetaData(filter(row))(row));
-const selectMultipleRow = (rows, isRowSelectedPredicate) => rows.map((row) => mergeSelectedToMetaData(isRowSelectedPredicate(row))(row));
-export {
-  checkAllRowsSelected,
-  selectMultipleRow,
-  selectSingleRow,
-  toggleSelectAll,
-  toggleSingleSelectable
-};
-//# sourceMappingURL=helper.js.map
+
+const selectSingleRow = (rows, filter) => rows.map(row => mergeSelectedToMetaData(filter(row))(row));
+const selectMultipleRow = (rows, isRowSelectedPredicate) => rows.map(row => mergeSelectedToMetaData(isRowSelectedPredicate(row))(row));
+
+export { checkAllRowsSelected, selectMultipleRow, selectSingleRow, toggleSelectAll, toggleSingleSelectable };

package/esm/plugins/selectable/index.js

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

package/esm/plugins/selectable/selectableFormatter.js

@@ -1,64 +1,107 @@
-import * as React from "react";
-import React2, { forwardRef, useEffect, useRef } from "react";
-import { isFunction } from "@elliemae/ds-utilities";
-import { DSCheckbox, DSRadio } from "@elliemae/ds-form";
-const SelectableWrapper = ({ className, children }) => /* @__PURE__ */ React2.createElement("div", {
-  className,
-  onClick: (e) => e.stopPropagation()
-}, children);
-const SelectableComponent = React2.memo(forwardRef(({ className, isMultiSelect, isHeader, onSelect, isSelected, value }, ref) => {
+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';
+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); 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 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((_ref2, ref) => {
+  let {
+    className,
+    isMultiSelect,
+    isHeader,
+    onSelect,
+    isSelected,
+    value
+  } = _ref2;
   const SelectComponent = isMultiSelect || isHeader ? DSCheckbox : DSRadio;
-  return /* @__PURE__ */ React2.createElement(SelectableWrapper, {
-    className
-  }, /* @__PURE__ */ React2.createElement(SelectComponent, {
+  return /*#__PURE__*/_jsx(SelectableWrapper, {
+    className: className
+  }, void 0, /*#__PURE__*/_jsx(SelectComponent, {
     checked: isSelected,
     "data-testid": "column-selectable-component",
     innerRef: ref,
     onChange: onSelect,
     tabIndex: -1,
-    value
+    value: value
   }));
 }, (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);
-  if (isFunction(renderer)) {
-    return /* @__PURE__ */ React2.createElement(SelectableWrapper, {
-      className
-    }, renderer({
-      rowData: {},
-      ...extraParams,
-      value: isSelected,
-      isHeader,
-      onSelect: handleSelect
-    }));
-  }
-  return /* @__PURE__ */ React2.createElement(SelectableComponent, {
-    ref,
+
+const selectableFormatter = (_ref3, grid) => {
+  let {
+    isMultiSelect = false,
+    renderer,
     className,
-    isMultiSelect,
-    isScrolling,
-    isSelected,
-    onSelect: handleSelect,
-    value: !isHeader ? rowData[rowKey] : "header-select-all"
-  });
-};
-var selectableFormatter_default = selectableFormatter;
-export {
-  selectableFormatter_default as default,
-  selectableFormatter
+    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
+      })));
+    }
+
+    return /*#__PURE__*/jsx(SelectableComponent, {
+      ref: ref,
+      className: className,
+      isMultiSelect: isMultiSelect,
+      isScrolling: isScrolling,
+      isSelected: isSelected,
+      onSelect: handleSelect,
+      value: !isHeader ? rowData[rowKey] : 'header-select-all'
+    });
+  };
 };
-//# sourceMappingURL=selectableFormatter.js.map
+
+export { selectableFormatter as default };

package/esm/plugins/selectable/useSelectableState.js

@@ -1,13 +1,28 @@
-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";
+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; }
+
 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 {
@@ -15,57 +30,87 @@ 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) });
-  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);
+  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);
       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) => ({ ...o, [key]: true }), {});
-          nextSelectedRows = {
-            ...prevState.selectedRows,
-            ...selectedSegment
-          };
+          const selectedSegment = rowSegment.reduce((o, key) => _objectSpread(_objectSpread({}, o), {}, {
+            [key]: true
+          }), {});
+          nextSelectedRows = _objectSpread(_objectSpread({}, prevState.selectedRows), selectedSegment);
         }
       }
+
       const nextState = {
         selectedRows: nextSelectedRows,
         selectAll: checkAllRowsSelected(nextRows, Object.keys(nextSelectedRows))
       };
-      if (index !== null && index !== void 0) {
-        onSelectRow(nextRows.filter((row) => nextState.selectedRows[row[rowKey]]), nextState.selectAll, index);
+
+      if (index !== null && index !== undefined) {
+        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)
@@ -75,6 +120,7 @@ function useSelectableState(grid) {
       return nextState;
     });
   };
+
   return {
     actions: {
       selectRow: handleSelectRow,
@@ -85,7 +131,5 @@ function useSelectableState(grid) {
     }
   };
 }
-export {
-  useSelectableState
-};
-//# sourceMappingURL=useSelectableState.js.map
+
+export { useSelectableState };

package/esm/plugins/sortable/SortablePlugin.js

@@ -1,33 +1,39 @@
-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";
+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';
+
 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
@@ -37,33 +43,40 @@ 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: ({ cellIndex }) => {
+      key: 'ctrl+s',
+      handler: _ref => {
+        let {
+          cellIndex
+        } = _ref;
         const {
-          actions: { sort },
+          actions: {
+            sort
+          },
           decoratedColumns
         } = grid.getInstance();
         const column = decoratedColumns[cellIndex];
-        if (!column)
-          return;
+        if (!column) return;
         sort(column.property);
       }
     };
   }
+
 });
-export {
-  SortablePlugin
-};
-//# sourceMappingURL=SortablePlugin.js.map
+
+export { SortablePlugin };

package/esm/plugins/sortable/checkIfSortable.js

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

package/esm/plugins/sortable/index.js

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