@elliemae/ds-datagrids 2.3.0-alpha.9 → 2.3.0-next.3

package/esm/plugins/row-dnd/DndRowsPlugin.js

@@ -0,0 +1,105 @@
+import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
+import _jsx from '@babel/runtime/helpers/esm/jsx';
+import 'core-js/modules/web.dom-collections.iterator.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 { useMemo } from 'react';
+import { SortableHandle, SortableElement, SortableContainer } from 'react-sortable-hoc';
+import { GripperVertical } from '@elliemae/ds-icons';
+import { omit } from '@elliemae/ds-utilities';
+import { appendCellFormatter } from '@elliemae/ds-shared/useDataGrid/initColumnDefinition';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { jsx, Fragment } from 'react/jsx-runtime';
+
+var _GripperVertical, _DragHandle;
+
+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 keysToOmit = ['axis', 'contentWindow', 'disableAutoscroll', 'distance', 'getContainer', 'getHelperDimensions', 'helperClass', 'helperContainer', 'hideSortableGhost', 'keyboardSortingTransitionDuration', 'lockAxis', 'lockOffset', 'lockToContainerEdges', 'onSortEnd', 'onSortMove', 'onSortOver', 'onSortStart', 'pressDelay', 'pressThreshold', 'shouldCancelStart', 'transitionDuration', 'updateBeforeSortStart', 'useDragHandle', 'useWindowAsScrollContainer'];
+const DragHandle = SortableHandle(() => _GripperVertical || (_GripperVertical = /*#__PURE__*/_jsx(GripperVertical, {
+  className: "drag-handle"
+})));
+
+const translateDnDData = _ref => {
+  let {
+    oldIndex,
+    newIndex,
+    index
+  } = _ref;
+  return {
+    sourceIndex: oldIndex,
+    targetIndex: newIndex,
+    fromIndex: index === undefined ? oldIndex : index
+  };
+};
+
+const decorateColumns = columns => {
+  const dragColumn = {
+    property: 'drag',
+    label: '',
+    visible: true,
+    width: 24,
+    minWidth: 24,
+    special: true
+  };
+  return [appendCellFormatter(() => /*#__PURE__*/jsx(Fragment, {
+    children: _DragHandle || (_DragHandle = /*#__PURE__*/_jsx(DragHandle, {}))
+  }), dragColumn), ...columns];
+};
+
+const getBodyProps = (props, grid) => {
+  const {
+    onMoveRowEnd,
+    onReorder,
+    onMoveRowStart
+  } = grid.props;
+  return _objectSpread(_objectSpread({}, props), {}, {
+    onSortEnd: data => {
+      grid.enableEvents();
+      grid.setIsRowDragging(false);
+      onMoveRowEnd(translateDnDData(data));
+    },
+    onSortStart: function () {
+      grid.disableEvents();
+      grid.setIsRowDragging(true);
+      onMoveRowStart(...arguments);
+    },
+    onSortOver: data => {
+      onReorder(translateDnDData(data));
+    },
+    lockAxis: 'y',
+    useDragHandle: true,
+    helperClass: 'row-drag-helper',
+    // a promise is needed, since sortable it's mounted before it's container
+    getContainer: () => new Promise(resolve => {
+      setTimeout(() => {
+        resolve(grid.refs.innerBody.current || grid.refs.body.current);
+      }, 100);
+    })
+  });
+};
+
+const decorateRenderers = renderers => {
+  const RowComponent = renderers.body.row;
+  const BodyWrapperComponent = renderers.body.wrapper;
+  const Row = useMemo(() => SortableElement(RowComponent), []);
+  const BodyWrapper = useMemo(() => SortableContainer(props => /*#__PURE__*/jsx(BodyWrapperComponent, _objectSpread({}, omit(props, keysToOmit)))), []);
+  return _objectSpread(_objectSpread({}, renderers), {}, {
+    body: _objectSpread(_objectSpread({}, renderers.body), {}, {
+      wrapper: BodyWrapper,
+      row: Row
+    })
+  });
+};
+
+const DndRowsPlugin = createInstancePlugin('dnd-rows', {
+  decorateColumns,
+  getBodyProps,
+  decorateRenderers
+});
+
+export { DndRowsPlugin };

package/esm/plugins/row-dnd/index.js

@@ -0,0 +1 @@
+export { DndRowsPlugin } from './DndRowsPlugin.js';

package/esm/plugins/selectable/SelectablePlugin.js

@@ -0,0 +1,190 @@
+import 'core-js/modules/web.dom-collections.iterator.js';
+import { useState, useCallback, useEffect } from 'react';
+import cx from 'obj-str';
+import { isFunction } from '@elliemae/ds-utilities';
+import createInstancePlugin from '@elliemae/ds-shared/createDataInstance/createInstancePlugin';
+import { selectionColumnCreator } from './addSelectableColumn.js';
+import { useSelectableState } from './useSelectableState.js';
+import { selectMultipleRow, selectSingleRow } from './helper.js';
+
+const decorateColumns = (columns, grid) => {
+  const {
+    props: {
+      selectable,
+      multiSelectFilterLabel,
+      multiSelectFilterOptions,
+      multiSelectFilterLabels,
+      multiSelectComponent
+    },
+    actions: {
+      selectAll: handleSelectAll,
+      selectRow: handleSelectRow
+    },
+    state: {
+      selection
+    }
+  } = grid;
+  const createSelectionColumn = selectionColumnCreator({
+    grid,
+    multiple: selectable === 'multi',
+    selectAll: selection.selectAll,
+    onSelectAll: handleSelectAll,
+    onSelectRow: handleSelectRow,
+    multiSelectFilterLabel,
+    multiSelectFilterOptions,
+    multiSelectFilterLabels,
+    multiSelectComponent
+  });
+  const {
+    showSelectColumn,
+    selectionColumnDefinition
+  } = grid.props;
+
+  if (showSelectColumn) {
+    const selectionColumn = createSelectionColumn(selectionColumnDefinition);
+    return [selectionColumn, ...columns];
+  }
+
+  return columns;
+};
+
+const getRowProps = (rowProps, grid, _ref) => {
+  let {
+    rowData
+  } = _ref;
+  const {
+    props: {
+      showSelectHighlight,
+      showSelectColumn,
+      rowKey
+    },
+    actions: {
+      selectRow
+    }
+  } = grid.getInstance();
+  const {
+    _index
+  } = rowData;
+  const isSelected = rowData['metaData.selected'];
+
+  if (!showSelectColumn) {
+    rowProps.onClick = () => selectRow(rowData[rowKey], _index);
+  }
+
+  rowProps.className = cx({
+    [rowProps.className]: true,
+    selected: isSelected,
+    'select-highlight': showSelectHighlight && isSelected
+  });
+  return rowProps;
+};
+
+const composeRows = (rows, grid) => {
+  const {
+    props: {
+      isRowSelected,
+      multiple,
+      rowKey
+    },
+    state: {
+      selection
+    }
+  } = grid.getInstance();
+
+  const selectionPredicate = row => isFunction(isRowSelected) ? isRowSelected(row) : !!selection.selectedRows[row[rowKey]];
+
+  return multiple ? selectMultipleRow(rows, selectionPredicate) : selectSingleRow(rows, selectionPredicate);
+};
+
+const decorateGrid = grid => {
+  // const handler = useRef();
+  const {
+    props: {
+      isRowSelected,
+      rowKey
+    },
+    actions: {
+      selectRow
+    },
+    state: {
+      selection
+    }
+  } = grid.getInstance();
+  const [shiftPressed, setShiftPressed] = useState(false);
+  const [lastSelectedRow, setLastSelectedRow] = useState(null);
+  const selectRowHandler = useCallback((rowData, index) => () => selectRow(rowData[rowKey], index, shiftPressed), [isRowSelected, selection, shiftPressed]);
+  useEffect(() => {
+    const keyDownListener = event => {
+      if (event.key === 'Shift' && event.target.tagName.toLowerCase() !== 'input' && event.target.parentNode.className !== 'em-ds-combobox__input') {
+        setShiftPressed(true);
+      }
+    };
+
+    const keyUpListener = event => {
+      if (event.key === 'Shift' && event.target.tagName.toLowerCase() !== 'input' && event.target.parentNode.className !== 'em-ds-combobox__input') {
+        setShiftPressed(false);
+      }
+    };
+
+    window.addEventListener('keydown', keyDownListener);
+    window.addEventListener('keyup', keyUpListener);
+    return () => {
+      window.removeEventListener('keydown', keyDownListener);
+      window.removeEventListener('keyup', keyUpListener);
+    };
+  });
+  return {
+    shiftPressed,
+    selectRowHandler,
+    setLastSelectedRow,
+    lastSelectedRow
+  };
+};
+
+const SelectablePlugin = createInstancePlugin('selectable', {
+  decorateGrid,
+  registerStateHook: useSelectableState,
+  decorateColumns,
+  getRowProps,
+  composeRows,
+
+  registerHotKeys(grid) {
+    return [{
+      key: 'space',
+      handler: _ref2 => {
+        let {
+          rowIndex
+        } = _ref2;
+        const {
+          composedRows,
+          props: {
+            rowKey
+          },
+          actions: {
+            selectRow
+          }
+        } = grid.getInstance();
+        const rows = composedRows.rows || composedRows;
+        const row = rows[rowIndex];
+        if (!row) return;
+        selectRow(row[rowKey], rowIndex);
+      }
+    }, {
+      key: 'ctrl+a',
+      handler: () => {
+        const {
+          state: {
+            selection
+          },
+          actions: {
+            selectAll
+          }
+        } = grid.getInstance();
+        selectAll(!selection.selectAll);
+      }
+    }];
+  }
+
+});
+
+export { SelectablePlugin };

package/esm/plugins/selectable/addSelectableColumn.js

@@ -0,0 +1,84 @@
+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
+    }
+  } = grid;
+  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,
+      visible,
+      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',
+        renderer: selectionComponent || multiSelectComponent,
+        onSelect: onSelectAll
+      }, grid))(selectionColumn);
+    }
+
+    return selectionColumn;
+  };
+}
+
+export { selectionColumnCreator };

package/esm/plugins/selectable/helper.js

@@ -0,0 +1,31 @@
+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';
+  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 => _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 };

package/esm/plugins/selectable/index.js

@@ -0,0 +1 @@
+export { SelectablePlugin } from './SelectablePlugin.js';

package/esm/plugins/selectable/selectableFormatter.js

@@ -0,0 +1,107 @@
+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__*/_jsx(SelectableWrapper, {
+    className: className
+  }, void 0, /*#__PURE__*/_jsx(SelectComponent, {
+    checked: isSelected,
+    "data-testid": "column-selectable-component",
+    innerRef: ref,
+    onChange: onSelect,
+    tabIndex: -1,
+    value: value
+  }));
+}, (prev, next) => next.isScrolling));
+
+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
+      })));
+    }
+
+    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

@@ -0,0 +1,135 @@
+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 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 {
+        selectedRows: nextSelectedRows,
+        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
+    },
+    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);
+      let nextSelectedRows = multiple ? toggleInObject(prevState.selectedRows, id, true) : toggleSingleSelectable(prevState.selectedRows, id);
+      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') {
+          nextSelectedRows = omit(prevState.selectedRows, rowSegment);
+        } else {
+          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 !== undefined) {
+        onSelectRow(nextRows.filter(row => nextState.selectedRows[row[rowKey]]), nextState.selectAll, index);
+      }
+
+      return nextState;
+    });
+  };
+
+  const handleSelectAll = checked => {
+    if (!multiple) return;
+    setLastSelectedRow(null);
+    setSelectedRowsState(() => {
+      const {
+        composedRows: nextRows
+      } = grid.getInstance();
+      const nextState = {
+        selectAll: checked,
+        selectedRows: toggleSelectAll(nextRows, checked)
+      };
+      onSelectAll(nextState.selectAll);
+      onSelectRow(checked ? nextRows : [], nextState.selectAll);
+      return nextState;
+    });
+  };
+
+  return {
+    actions: {
+      selectRow: handleSelectRow,
+      selectAll: handleSelectAll
+    },
+    state: {
+      selection
+    }
+  };
+}
+
+export { useSelectableState };