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

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

@@ -1,105 +0,0 @@
-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

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

package/esm/plugins/selectable/SelectablePlugin.js

@@ -1,190 +0,0 @@
-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

@@ -1,84 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

package/esm/plugins/selectable/selectableFormatter.js

@@ -1,107 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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 };