From 7794ababea46e8aa3d9c356f0edb2771695caa23 Mon Sep 17 00:00:00 2001
From: Rowan Hill <rowan.hill@softwire.com>
Date: Sat, 26 May 2018 15:55:26 +0100
Subject: [PATCH 1/5] Allow selection of ranges (with mouse & keyboard)

Parent components of ReactDataGrid can subscribe to (start, update, end) events about
selection ranges. An example page demonstrates this.
---
 .../example30-selection-range-events.js       | 106 ++++++
 packages/react-data-grid/src/Canvas.js        |   6 +
 packages/react-data-grid/src/Cell.js          |  16 +
 packages/react-data-grid/src/Grid.js          |   6 +
 .../src/PropTypeShapes/CellMetaDataShape.js   |   2 +
 packages/react-data-grid/src/ReactDataGrid.js |  34 ++
 packages/react-data-grid/src/Viewport.js      |   6 +
 .../src/constants/EventTypes.js               |   3 +
 .../src/masks/InteractionMasks.js             | 191 ++++++++--
 .../src/masks/SelectionRangeMask.js           |  30 ++
 .../masks/__tests__/InteractionMasks.spec.js  | 351 +++++++++++++++++-
 .../__tests__/SelectionRangeMask.spec.js      |  43 +++
 .../src/utils/SelectedCellUtils.js            |  31 ++
 themes/react-data-grid-cell.css               |   5 +
 themes/react-data-grid-core.css               |   6 +
 15 files changed, 804 insertions(+), 32 deletions(-)
 create mode 100644 packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js
 create mode 100644 packages/react-data-grid/src/masks/SelectionRangeMask.js
 create mode 100644 packages/react-data-grid/src/masks/__tests__/SelectionRangeMask.spec.js

diff --git a/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js b/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js
new file mode 100644
index 0000000000..84988027da
--- /dev/null
+++ b/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js
@@ -0,0 +1,106 @@
+const ReactDataGrid = require('react-data-grid');
+const exampleWrapper = require('../components/exampleWrapper');
+const React = require('react');
+
+class Example extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this._columns = [
+      {
+        key: 'id',
+        name: 'ID'
+      },
+      {
+        key: 'title',
+        name: 'Title'
+      },
+      {
+        key: 'count',
+        name: 'Count'
+      }
+    ];
+
+    this.state = { rows: this.createRows(1000) };
+  }
+
+  createRows = () => {
+    let rows = [];
+    for (let i = 1; i < 1000; i++) {
+      rows.push({
+        id: i,
+        title: 'Title ' + i,
+        count: i * 1000,
+        isSelected: false
+      });
+    }
+
+    return rows;
+  };
+
+  rowGetter = (i) => {
+    return this.state.rows[i];
+  };
+
+  onStart = (selectedRange) => {
+    this.textarea.value += 'START: ' +
+      `(${selectedRange.topLeft.idx}, ${selectedRange.topLeft.rowIdx}) -> ` +
+      `(${selectedRange.bottomRight.idx}, ${selectedRange.bottomRight.rowIdx})\n`;
+    this.textarea.scrollTop = this.textarea.scrollHeight;
+  };
+
+  onUpdate = (selectedRange) => {
+    this.textarea.value += 'UPDATE: ' +
+      `(${selectedRange.topLeft.idx}, ${selectedRange.topLeft.rowIdx}) -> ` +
+      `(${selectedRange.bottomRight.idx}, ${selectedRange.bottomRight.rowIdx})\n`;
+    this.textarea.scrollTop = this.textarea.scrollHeight;
+  };
+
+  onComplete = () => {
+    this.textarea.value += 'END\n';
+    this.textarea.scrollTop = this.textarea.scrollHeight;
+  };
+
+  render() {
+    return  (
+      <div>
+        <textarea
+          ref={(element) => this.textarea = element}
+          style={{width: '100%', marginBottom: '1em', padding: '0.5em', border: '1px solid black' }}
+          rows={5}
+        />
+        <ReactDataGrid
+          rowKey="id"
+          columns={this._columns}
+          rowGetter={this.rowGetter}
+          rowsCount={this.state.rows.length}
+          minHeight={500}
+          onCellRangeSelectionStarted={this.onStart}
+          onCellRangeSelectionUpdated={this.onUpdate}
+          onCellRangeSelectionCompleted={this.onComplete}
+        />
+      </div>
+    );
+  }
+}
+
+const exampleDescription = (
+  <div>
+    <h4>onCellRangeSelectionStarted</h4>
+    <p>Called on mousedown on a cell. Receives <code>selectedRange</code> (containing <code>topLeft</code> and <code>topRight</code>) as an argument.</p>
+    <h4>onCellRangeSelectionUpdated</h4>
+    <p>Called on mouseover on a cell when dragging with the mouse, or when pressing shift+arrowkey. Receives <code>selectedRange</code> (containing <code>topLeft</code> and <code>topRight</code>) as an argument.</p>
+    <h4>onCellRangeSelectionCompleted</h4>
+    <p>Called on mouseup (anywhere) when dragging with the mouse, or when pressing shift+arrowkey.</p>
+    <p>Note: altering the selected range with shift+arrowkey will fire both an Updated and Completed event with each keystroke.</p>
+    <h4>Example</h4>
+    <p>The example below uses these events to record a log of selection range activity (via both cursor and keyboard) into the textarea.</p>
+  </div>
+);
+
+module.exports = exampleWrapper({
+  WrappedComponent: Example,
+  exampleName: 'Selection Range Events',
+  exampleDescription,
+  examplePath: './scripts/example30-selection-range-events.js'
+  // TODO: add examplePlaygroundLink (once selection ranges are supported in the published version of RDG, so available in JSFiddle)
+});
diff --git a/packages/react-data-grid/src/Canvas.js b/packages/react-data-grid/src/Canvas.js
index d77e1a457e..e174035356 100644
--- a/packages/react-data-grid/src/Canvas.js
+++ b/packages/react-data-grid/src/Canvas.js
@@ -72,6 +72,9 @@ class Canvas extends React.Component {
     onDragHandleDoubleClick: PropTypes.func.isRequired,
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    onCellRangeSelectionStarted: PropTypes.func,
+    onCellRangeSelectionUpdated: PropTypes.func,
+    onCellRangeSelectionCompleted: PropTypes.func,
     onCommit: PropTypes.func.isRequired
   };
 
@@ -380,6 +383,9 @@ class Canvas extends React.Component {
             onBeforeFocus={this.onFocusInteractionMask}
             onCellSelected={this.props.onCellSelected}
             onCellDeSelected={this.props.onCellDeSelected}
+            onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
+            onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
+            onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
             scrollLeft={this._scroll.scrollLeft}
           />
           <RowsContainer
diff --git a/packages/react-data-grid/src/Cell.js b/packages/react-data-grid/src/Cell.js
index e188746d78..ef512c0e44 100644
--- a/packages/react-data-grid/src/Cell.js
+++ b/packages/react-data-grid/src/Cell.js
@@ -73,6 +73,20 @@ class Cell extends React.Component {
     }
   };
 
+  onCellMouseDown = () => {
+    const { idx, rowIdx, cellMetaData } = this.props;
+    if (isFunction(cellMetaData.onCellMouseDown)) {
+      cellMetaData.onCellMouseDown({ idx, rowIdx });
+    }
+  };
+
+  onCellMouseEnter = () => {
+    const { idx, rowIdx, cellMetaData } = this.props;
+    if (isFunction(cellMetaData.onCellMouseEnter)) {
+      cellMetaData.onCellMouseEnter({ idx, rowIdx });
+    }
+  };
+
   onCellContextMenu = () => {
     const { idx, rowIdx, cellMetaData } = this.props;
     if (isFunction(cellMetaData.onCellContextMenu)) {
@@ -226,6 +240,8 @@ class Cell extends React.Component {
     let onColumnEvent = this.props.cellMetaData ? this.props.cellMetaData.onColumnEvent : undefined;
     let gridEvents = {
       onClick: this.onCellClick,
+      onMouseDown: this.onCellMouseDown,
+      onMouseEnter: this.onCellMouseEnter,
       onDoubleClick: this.onCellDoubleClick,
       onContextMenu: this.onCellContextMenu,
       onDragOver: this.onDragOver
diff --git a/packages/react-data-grid/src/Grid.js b/packages/react-data-grid/src/Grid.js
index 389eb34f9d..3baabd5b59 100644
--- a/packages/react-data-grid/src/Grid.js
+++ b/packages/react-data-grid/src/Grid.js
@@ -64,6 +64,9 @@ class Grid extends React.Component {
     onDragHandleDoubleClick: PropTypes.func.isRequired,
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    onCellRangeSelectionStarted: PropTypes.func,
+    onCellRangeSelectionUpdated: PropTypes.func,
+    onCellRangeSelectionCompleted: PropTypes.func,
     onCommit: PropTypes.func.isRequired
   };
 
@@ -196,6 +199,9 @@ class Grid extends React.Component {
                   onDragHandleDoubleClick={this.props.onDragHandleDoubleClick}
                   onCellSelected={this.props.onCellSelected}
                   onCellDeSelected={this.props.onCellDeSelected}
+                  onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
+                  onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
+                  onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
                   onCommit={this.props.onCommit}
                 />
             </div>
diff --git a/packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js b/packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js
index 0d52b22771..8a1c18d75d 100644
--- a/packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js
+++ b/packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 module.exports = {
   rowKey: PropTypes.string.isRequired,
   onCellClick: PropTypes.func.isRequired,
+  onCellMouseDown: PropTypes.func.isRequired,
+  onCellMouseEnter: PropTypes.func.isRequired,
   onCellContextMenu: PropTypes.func.isRequired,
   onCellDoubleClick: PropTypes.func.isRequired,
   onDragEnter: PropTypes.func.isRequired,
diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js
index ecd6af9e9b..5221da5b8c 100644
--- a/packages/react-data-grid/src/ReactDataGrid.js
+++ b/packages/react-data-grid/src/ReactDataGrid.js
@@ -55,6 +55,9 @@ class ReactDataGrid extends React.Component {
     cellNavigationMode: PropTypes.oneOf(['none', 'loopOverRow', 'changeRow']),
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    onCellRangeSelectionStarted: PropTypes.func,
+    onCellRangeSelectionUpdated: PropTypes.func,
+    onCellRangeSelectionCompleted: PropTypes.func,
     onCellExpand: PropTypes.func,
     enableDragAndDrop: PropTypes.bool,
     onRowExpandToggle: PropTypes.func,
@@ -137,12 +140,14 @@ class ReactDataGrid extends React.Component {
   componentDidMount() {
     this._mounted = true;
     window.addEventListener('resize', this.metricsUpdated);
+    window.addEventListener('mouseup', this.onWindowMouseUp);
     this.metricsUpdated();
   }
 
   componentWillUnmount() {
     this._mounted = false;
     window.removeEventListener('resize', this.metricsUpdated);
+    window.removeEventListener('mouseup', this.onWindowMouseUp);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -159,6 +164,18 @@ class ReactDataGrid extends React.Component {
     this.eventBus.dispatch(EventTypes.SELECT_CELL, { rowIdx, idx }, openEditor);
   };
 
+  selectStart = (cellPosition) => {
+    this.eventBus.dispatch(EventTypes.SELECT_START, cellPosition);
+  };
+
+  selectUpdate = (cellPosition) => {
+    this.eventBus.dispatch(EventTypes.SELECT_UPDATE, cellPosition);
+  };
+
+  selectEnd = () => {
+    this.eventBus.dispatch(EventTypes.SELECT_END);
+  };
+
   handleDragEnter = ({ overRowIdx }) => {
     this.eventBus.dispatch(EventTypes.DRAG_ENTER, { overRowIdx });
   };
@@ -275,6 +292,18 @@ class ReactDataGrid extends React.Component {
     }
   };
 
+  onCellMouseDown = (cellPosition) => {
+    this.selectStart(cellPosition);
+  };
+
+  onCellMouseEnter = (cellPosition) => {
+    this.selectUpdate(cellPosition);
+  };
+
+  onWindowMouseUp = () => {
+    this.selectEnd();
+  };
+
   onCellContextMenu = ({ rowIdx, idx }) => {
     this.selectCell({ rowIdx, idx });
   };
@@ -613,6 +642,8 @@ class ReactDataGrid extends React.Component {
     const cellMetaData = {
       rowKey: this.props.rowKey,
       onCellClick: this.onCellClick,
+      onCellMouseDown: this.onCellMouseDown,
+      onCellMouseEnter: this.onCellMouseEnter,
       onCellContextMenu: this.onCellContextMenu,
       onCellDoubleClick: this.onCellDoubleClick,
       onColumnEvent: this.onColumnEvent,
@@ -678,6 +709,9 @@ class ReactDataGrid extends React.Component {
             onDragHandleDoubleClick={this.onDragHandleDoubleClick}
             onCellSelected={this.props.onCellSelected}
             onCellDeSelected={this.props.onCellDeSelected}
+            onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
+            onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
+            onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
             onCommit={this.onCommit}
           />
         </div>
diff --git a/packages/react-data-grid/src/Viewport.js b/packages/react-data-grid/src/Viewport.js
index 97b703a591..4eab26e86c 100644
--- a/packages/react-data-grid/src/Viewport.js
+++ b/packages/react-data-grid/src/Viewport.js
@@ -55,6 +55,9 @@ class Viewport extends React.Component {
     onDragHandleDoubleClick: PropTypes.func.isRequired,
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    onCellRangeSelectionStarted: PropTypes.func,
+    onCellRangeSelectionUpdated: PropTypes.func,
+    onCellRangeSelectionCompleted: PropTypes.func,
     onCommit: PropTypes.func.isRequired
   };
 
@@ -258,6 +261,9 @@ class Viewport extends React.Component {
           onDragHandleDoubleClick={this.props.onDragHandleDoubleClick}
           onCellSelected={this.props.onCellSelected}
           onCellDeSelected={this.props.onCellDeSelected}
+          onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
+          onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
+          onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
           onCommit={this.props.onCommit}
         />
       </div>
diff --git a/packages/react-data-grid/src/constants/EventTypes.js b/packages/react-data-grid/src/constants/EventTypes.js
index d817c7c787..2ed99503e5 100644
--- a/packages/react-data-grid/src/constants/EventTypes.js
+++ b/packages/react-data-grid/src/constants/EventTypes.js
@@ -1,3 +1,6 @@
 export const SELECT_CELL = 'SELECT_CELL';
+export const SELECT_START = 'SELECT_START';
+export const SELECT_UPDATE = 'SELECT_UPDATE';
+export const SELECT_END = 'SELECT_END';
 export const DRAG_ENTER = 'DRAG_ENTER';
 export const SCROLL_TO_COLUMN = 'SCROLL_TO_COLUMN';
diff --git a/packages/react-data-grid/src/masks/InteractionMasks.js b/packages/react-data-grid/src/masks/InteractionMasks.js
index 1a3c968dc7..1ce504f1ed 100644
--- a/packages/react-data-grid/src/masks/InteractionMasks.js
+++ b/packages/react-data-grid/src/masks/InteractionMasks.js
@@ -2,6 +2,7 @@ import React, { isValidElement, cloneElement } from 'react';
 import PropTypes from 'prop-types';
 
 import SelectionMask from './SelectionMask';
+import SelectionRangeMask from './SelectionRangeMask';
 import CopyMask from './CopyMask';
 import DragMask from './DragMask';
 import DragHandle from './DragHandle';
@@ -14,7 +15,8 @@ import {
   getSelectedColumn,
   getNextSelectedCellPosition,
   canExitGrid,
-  isSelectedCellEditable
+  isSelectedCellEditable,
+  selectedRangeIsSingleCell
 } from '../utils/SelectedCellUtils';
 import isFunction from '../utils/isFunction';
 import * as AppConstants from '../AppConstants';
@@ -54,6 +56,9 @@ class InteractionMasks extends React.Component {
     onCommitCancel: PropTypes.func,
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    onCellRangeSelectionStarted: PropTypes.func,
+    onCellRangeSelectionUpdated: PropTypes.func,
+    onCellRangeSelectionCompleted: PropTypes.func,
     onCellsDragged: PropTypes.func,
     onDragHandleDoubleClick: PropTypes.func.isRequired,
     onBeforeFocus: PropTypes.func.isRequired,
@@ -65,6 +70,14 @@ class InteractionMasks extends React.Component {
       idx: -1,
       rowIdx: -1
     },
+    selectedRange: {
+      topLeft: {
+        idx: -1, rowIdx: -1
+      },
+      bottomRight: {
+        idx: -1, rowIdx: -1
+      }
+    },
     copiedPosition: null,
     draggedPosition: null,
     lockedPosition: null,
@@ -99,6 +112,9 @@ class InteractionMasks extends React.Component {
     const { eventBus, enableCellAutoFocus } = this.props;
 
     this.unsubscribeSelectCell = eventBus.subscribe(EventTypes.SELECT_CELL, this.selectCell);
+    this.unsubscribeSelectStart = eventBus.subscribe(EventTypes.SELECT_START, this.selectStart);
+    this.unsubscribeSelectUpdate = eventBus.subscribe(EventTypes.SELECT_UPDATE, this.selectUpdate);
+    this.unsubscribeSelectEnd = eventBus.subscribe(EventTypes.SELECT_END, this.selectEnd);
     this.unsubscribeDragEnter = eventBus.subscribe(EventTypes.DRAG_ENTER, this.handleDragEnter);
 
     if (enableCellAutoFocus && this.isFocusedOnBody()) {
@@ -108,6 +124,9 @@ class InteractionMasks extends React.Component {
 
   componentWillUnmount() {
     this.unsubscribeSelectCell();
+    this.unsubscribeSelectStart();
+    this.unsubscribeSelectUpdate();
+    this.unsubscribeSelectEnd();
     this.unsubscribeDragEnter();
   }
 
@@ -129,7 +148,7 @@ class InteractionMasks extends React.Component {
     const { enableCellSelect, columns, rowGetter, onCheckCellIsEditable } = this.props;
     const { selectedPosition } = this.state;
     return isSelectedCellEditable({ enableCellSelect, columns, rowGetter, selectedPosition, onCheckCellIsEditable });
-  }
+  };
 
   openEditor = ({ key } = {}) => {
     if (this.isSelectedCellEditable() && !this.state.isEditorEnabled) {
@@ -296,23 +315,60 @@ class InteractionMasks extends React.Component {
 
   changeCellFromEvent(e) {
     e.preventDefault();
+    const isTab = e.keyCode === keyCodes.Tab;
+    const isShift = e.shiftKey;
+
+    if (isTab) {
+      this.changeCellFromTabAction(e);
+    } else if (isShift) {
+      this.changeSelectedRangeFromArrowKeyAction(e);
+    } else {
+      this.changeCellFromArrowKeyAction(e);
+    }
+  }
+
+  changeCellFromArrowKeyAction(e) {
+    const currentPosition = this.state.selectedPosition;
+    const { cellNavigationMode } = this.props;
+    const next = this.getNextPositionAndFireOnHitBoundaryIfNeccesary(e, currentPosition, cellNavigationMode);
+
+    this.selectCell(next);
+  }
+
+  changeCellFromTabAction(e) {
+    const currentPosition = this.state.selectedPosition;
+    const cellNavigationMode = this.props.cellNavigationMode === CellNavigationMode.NONE ?
+      CellNavigationMode.CHANGE_ROW :
+      this.props.cellNavigationMode;
+    const next = this.getNextPositionAndFireOnHitBoundaryIfNeccesary(e, currentPosition, cellNavigationMode);
+
+    this.selectCell(next);
+  }
+
+  changeSelectedRangeFromArrowKeyAction(e) {
+    const { cellNavigationMode } = this.props;
+    const currentPosition = this.state.selectedRange.cursorCell || this.state.selectedPosition;
+    const next = this.getNextPositionAndFireOnHitBoundaryIfNeccesary(e, currentPosition, cellNavigationMode);
+
+    this.selectUpdate(next, true, () => { this.selectEnd(); });
+  }
+
+  getNextPositionAndFireOnHitBoundaryIfNeccesary(e, currentPosition, cellNavigationMode) {
     const keyNavAction = this.getKeyNavActionFromEvent(e);
     const { getNext, isCellAtBoundary, onHitBoundary } = keyNavAction;
-    const currentPosition = this.state.selectedPosition;
     const nextPosition = getNext(currentPosition);
-    const isTab = e.keyCode === keyCodes.Tab;
-    const { cellNavigationMode, columns, rowsCount } = this.props;
+    const { columns, rowsCount } = this.props;
     const { changeRowOrColumn, ...next } = getNextSelectedCellPosition({
       columns,
       rowsCount,
-      cellNavigationMode: isTab && cellNavigationMode === CellNavigationMode.NONE ? CellNavigationMode.CHANGE_ROW : cellNavigationMode
+      cellNavigationMode
     }, nextPosition);
 
     if (isCellAtBoundary(next) || changeRowOrColumn) {
       onHitBoundary(next);
     }
 
-    this.selectCell(next);
+    return next;
   }
 
   isCellWithinBounds = ({ idx, rowIdx }) => {
@@ -352,11 +408,85 @@ class InteractionMasks extends React.Component {
     const next = { ...this.state.selectedPosition, ...cell };
     if (this.isCellWithinBounds(next)) {
       this.setState({
-        selectedPosition: next
+        selectedPosition: next,
+        selectedRange: {
+          topLeft: next,
+          bottomRight: next,
+          startCell: next,
+          cursorCell: next,
+          isDragging: false
+        }
       }, callback);
     }
   };
 
+  selectStart = (cellPosition) => {
+    this.setState({
+      selectedRange: {
+        topLeft: cellPosition,
+        bottomRight: cellPosition,
+        startCell: cellPosition,
+        cursorCell: cellPosition,
+        isDragging: true
+      },
+      selectedPosition: cellPosition
+    }, () => {
+      if (isFunction(this.props.onCellRangeSelectionStarted)) {
+        this.props.onCellRangeSelectionStarted(this.state.selectedRange);
+      }
+    });
+  };
+
+  selectUpdate = (cellPosition, isFromKeyboard, callback) => {
+    if (!this.state.selectedRange.isDragging && !isFromKeyboard) {
+      return;
+    }
+
+    if (!this.isCellWithinBounds(cellPosition)) {
+      return;
+    }
+
+    const startCell = this.state.selectedRange.startCell || this.state.selectedPosition;
+    const colIdxs = [startCell.idx, cellPosition.idx].sort((a, b) => a - b);
+    const rowIdxs = [startCell.rowIdx, cellPosition.rowIdx].sort((a, b) => a - b);
+    const topLeft = {idx: colIdxs[0], rowIdx: rowIdxs[0]};
+    const bottomRight = {idx: colIdxs[1], rowIdx: rowIdxs[1]};
+
+    const selectedRange = {
+      // default the startCell to the selected cell, in case we've just started via keyboard
+      ...{startCell: this.state.selectedPosition},
+      // assign the previous state (which will override the startCell if we already have one)
+      ...this.state.selectedRange,
+      // assign the new state - the bounds of the range, and the new cursor cell
+      topLeft,
+      bottomRight,
+      cursorCell: cellPosition
+    };
+
+    this.setState({
+      selectedRange
+    }, () => {
+      if (isFunction(this.props.onCellRangeSelectionUpdated)) {
+        this.props.onCellRangeSelectionUpdated(this.state.selectedRange);
+      }
+      if (isFunction(callback)) {
+        callback();
+      }
+    });
+  };
+
+  selectEnd = () => {
+    const selectedRange = {...this.state.selectedRange, isDragging: false};
+    this.setState({selectedRange}, () => {
+      if (isFunction(this.props.onCellRangeSelectionCompleted)) {
+        this.props.onCellRangeSelectionCompleted(this.state.selectedRange);
+      }
+
+      // Focus the InteractionMasks, so it can receive keyboard events
+      this.focus();
+    });
+  };
+
   dragEnabled = () => {
     const { onGridRowsUpdated, onCellsDragged } = this.props;
     return this.isSelectedCellEditable() && (isFunction(onGridRowsUpdated) || isFunction(onCellsDragged));
@@ -452,23 +582,38 @@ class InteractionMasks extends React.Component {
             columns={columns}
           />
         )}
-        {!isEditorEnabled && this.isGridSelected() && (
-          <SelectionMask
-            selectedPosition={selectedPosition}
+        {selectedRangeIsSingleCell(this.state.selectedRange) ? (
+          !isEditorEnabled && this.isGridSelected() && (
+            <SelectionMask
+              selectedPosition={selectedPosition}
+              rowHeight={rowHeight}
+              columns={columns}
+              isGroupedRow={rowData && rowData.__metaData ? rowData.__metaData.isGroup : false}
+              scrollLeft={this.props.scrollLeft}
+            >
+              {this.dragEnabled() && (
+                <DragHandle
+                  onDragStart={this.handleDragStart}
+                  onDragEnd={this.handleDragEnd}
+                  onDoubleClick={this.onDragHandleDoubleClick}
+                />
+              )}
+            </SelectionMask>
+          )
+        ) : ([
+          <SelectionRangeMask
+            key="range-mask"
+            selectedRange={this.state.selectedRange}
+            columns={columns}
             rowHeight={rowHeight}
+          />,
+          <SelectionMask
+            key="selection-mask"
+            selectedPosition={this.state.selectedRange.startCell}
             columns={columns}
-            isGroupedRow={rowData && rowData.__metaData ? rowData.__metaData.isGroup : false}
-            scrollLeft={this.props.scrollLeft}
-          >
-            {this.dragEnabled() && (
-              <DragHandle
-                onDragStart={this.handleDragStart}
-                onDragEnd={this.handleDragEnd}
-                onDoubleClick={this.onDragHandleDoubleClick}
-              />
-            )}
-          </SelectionMask>
-        )}
+            rowHeight={rowHeight}
+          />
+        ])}
         {isEditorEnabled && <EditorContainer
           firstEditorKeyPress={firstEditorKeyPress}
           onCommit={this.onCommit}
diff --git a/packages/react-data-grid/src/masks/SelectionRangeMask.js b/packages/react-data-grid/src/masks/SelectionRangeMask.js
new file mode 100644
index 0000000000..e76eb279a0
--- /dev/null
+++ b/packages/react-data-grid/src/masks/SelectionRangeMask.js
@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getSelectedRangeDimensions } from '../utils/SelectedCellUtils';
+import CellMask from './CellMask';
+
+function SelectionRangeMask({ selectedRange, columns, rowHeight, children}) {
+  const dimensions = getSelectedRangeDimensions({ selectedRange, columns, rowHeight });
+  return (
+    <CellMask
+      {...dimensions}
+      className="rdg-selected-range"
+    >
+      {children}
+    </CellMask>
+  );
+}
+
+SelectionRangeMask.propTypes = {
+  selectedRange: PropTypes.shape({
+    topLeft: PropTypes.shape({ idx: PropTypes.number.isRequired, rowIdx: PropTypes.number.isRequired }).isRequired,
+    bottomRight: PropTypes.shape({ idx: PropTypes.number.isRequired, rowIdx: PropTypes.number.isRequired }).isRequired,
+    startCell: PropTypes.shape({ idx: PropTypes.number.isRequired, rowIdx: PropTypes.number.isRequired }).isRequired,
+    cursorCell: PropTypes.shape({ idx: PropTypes.number.isRequired, rowIdx: PropTypes.number.isRequired }).isRequired
+  }).isRequired,
+  columns: PropTypes.array.isRequired,
+  rowHeight: PropTypes.number.isRequired
+};
+
+export default SelectionRangeMask;
diff --git a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
index 1a80c9a285..890c334d4c 100644
--- a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
+++ b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
@@ -3,6 +3,7 @@ import { shallow, mount } from 'enzyme';
 
 import InteractionMasks from '../InteractionMasks';
 import SelectionMask from '../SelectionMask';
+import SelectionRangeMask from '../SelectionRangeMask';
 import CopyMask from '../CopyMask';
 import DragMask from '../DragMask';
 import DragHandle from '../DragHandle';
@@ -37,6 +38,9 @@ describe('<InteractionMasks/>', () => {
       onHitLeftBoundary: jasmine.createSpy(),
       onCellSelected: jasmine.createSpy(),
       onCellDeSelected: jasmine.createSpy(),
+      onCellRangeSelectionStarted: jasmine.createSpy(),
+      onCellRangeSelectionUpdated: jasmine.createSpy(),
+      onCellRangeSelectionCompleted: jasmine.createSpy(),
       onGridRowsUpdated: jasmine.createSpy(),
       isEditorEnabled: false,
       rowGetter,
@@ -60,21 +64,350 @@ describe('<InteractionMasks/>', () => {
     pressKey(wrapper, 'Tab', { keyCode: keyCodes.Tab, shiftKey, preventDefault });
   };
 
-  describe('When selected cell is within grid bounds', () => {
-    it('should render a SelectionMask component', () => {
-      const { wrapper } = setup({}, { selectedPosition: { idx: 0, rowIdx: 0 } });
-      expect(wrapper.find(SelectionMask).length).toBe(1);
+  describe('Rendered masks', () => {
+    describe('When a single cell is selected', () => {
+      describe('within grid bounds', () => {
+        it('should render a SelectionMask component', () => {
+          const { wrapper } = setup({}, { selectedPosition: { idx: 0, rowIdx: 0 } });
+          expect(wrapper.find(SelectionMask).length).toBe(1);
+        });
+      });
+
+      describe('outside grid bounds', () => {
+        it('should not render a SelectionMask component', () => {
+          const { wrapper } = setup();
+          expect(wrapper.find(SelectionMask).length).toBe(0);
+        });
+      });
+    });
+
+    describe('When a cell range is selected', () => {
+      it('should render a SelectionRangeMask component', () => {
+        const { wrapper } = setup({}, {
+          selectedPosition: { idx: 0, rowIdx: 0 },
+          selectedRange: {
+            topLeft: { idx: 0, rowIdx: 0 },
+            bottomRight: { idx: 1, rowIdx: 1 }
+          }
+        });
+        expect(wrapper.find(SelectionRangeMask).length).toBe(1);
+      });
+
+      it('should render a SelectionMask component on the range\'s start cell', () => {
+        const { wrapper } = setup({}, {
+          selectedPosition: { idx: 0, rowIdx: 0 },
+          selectedRange: {
+            topLeft: { idx: 0, rowIdx: 0 },
+            bottomRight: { idx: 1, rowIdx: 1 },
+            startCell: { idx: 0, rowIdx: 0 }
+          }
+        });
+        expect(wrapper.find(SelectionMask).length).toBe(1);
+        expect(wrapper.find(SelectionMask).props().selectedPosition).toEqual({ idx: 0, rowIdx: 0 });
+      });
+    });
+  });
+
+  describe('Range selection functionality', () => {
+    describe('with the cursor', () => {
+      it('should update the single-cell selectedPosition on starting a selection', () => {
+        const { props, wrapper } = setup();
+        props.eventBus.dispatch(EventTypes.SELECT_START, { idx: 2, rowIdx: 2 });
+        expect(wrapper.state('selectedPosition')).toEqual({ idx: 2, rowIdx: 2 });
+      });
+
+      it('should update the multi-cell selectedRange on starting a selection', () => {
+        const { props, wrapper } = setup();
+        props.eventBus.dispatch(EventTypes.SELECT_START, { idx: 2, rowIdx: 2 });
+        const selectedRange = wrapper.state('selectedRange');
+        expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+        expect(selectedRange.bottomRight).toEqual({ idx: 2, rowIdx: 2 });
+        expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+        expect(selectedRange.cursorCell).toEqual({ idx: 2, rowIdx: 2 });
+      });
+
+      describe('moving the cursor to a new cell, mid-select', () => {
+        let props;
+        let wrapper;
+
+        beforeEach(() => {
+          const setupResult = setup();
+          props = setupResult.props;
+          wrapper = setupResult.wrapper;
+          props.eventBus.dispatch(EventTypes.SELECT_START, { idx: 2, rowIdx: 2 });
+        });
+
+        it('should update topLeft (and cursor) when moving left', () => {
+          props.eventBus.dispatch(EventTypes.SELECT_UPDATE, { idx: 1, rowIdx: 2 });
+          const selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.topLeft).toEqual({ idx: 1, rowIdx: 2 });
+          expect(selectedRange.bottomRight).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.cursorCell).toEqual({ idx: 1, rowIdx: 2 });
+        });
+
+        it('should update topLeft (and cursor) when moving up', () => {
+          props.eventBus.dispatch(EventTypes.SELECT_UPDATE, { idx: 2, rowIdx: 1 });
+          const selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 1 });
+          expect(selectedRange.bottomRight).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.cursorCell).toEqual({ idx: 2, rowIdx: 1 });
+        });
+
+        it('should update bottomRight (and cursor) when moving right', () => {
+          props.eventBus.dispatch(EventTypes.SELECT_UPDATE, { idx: 3, rowIdx: 2 });
+          const selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.bottomRight).toEqual({ idx: 3, rowIdx: 2 });
+          expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.cursorCell).toEqual({ idx: 3, rowIdx: 2 });
+        });
+
+        it('should update bottomRight (and cursor) when moving down', () => {
+          props.eventBus.dispatch(EventTypes.SELECT_UPDATE, { idx: 2, rowIdx: 3 });
+          const selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.bottomRight).toEqual({ idx: 2, rowIdx: 3 });
+          expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.cursorCell).toEqual({ idx: 2, rowIdx: 3 });
+        });
+      });
+
+      it('should not update state when moving the cursor but not mid-select', () => {
+        const { props, wrapper } = setup();
+        props.eventBus.dispatch(EventTypes.SELECT_UPDATE, { idx: 2, rowIdx: 2 });
+        expect(wrapper.state('selectedRange').startCell).toBeUndefined();
+      });
+
+      it('should not update state when moving the cursor after a selection has ended', () => {
+        const { props, wrapper } = setup();
+        props.eventBus.dispatch(EventTypes.SELECT_START, { idx: 2, rowIdx: 2 });
+        props.eventBus.dispatch(EventTypes.SELECT_END, { idx: 2, rowIdx: 2 });
+        props.eventBus.dispatch(EventTypes.SELECT_UPDATE, { idx: 3, rowIdx: 3 });
+        expect(wrapper.state('selectedRange').cursorCell).toEqual({ idx: 2, rowIdx: 2 });
+      });
+
+      it('should give focus to InteractionMasks once a selection has ended', () => {
+        // We have to use mount, rather than shallow, so that InteractionMasks has a ref to it's node, used for focusing
+        const { props } = setup(undefined, undefined, mount);
+        props.eventBus.dispatch(EventTypes.SELECT_END);
+        expect(props.onBeforeFocus).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('Keyboard range selection functionality', () => {
+    const selectRange = (wrapper, props, from, to) => {
+      props.eventBus.dispatch(EventTypes.SELECT_START, from);
+      props.eventBus.dispatch(EventTypes.SELECT_UPDATE, to);
+      props.eventBus.dispatch(EventTypes.SELECT_END);
+    };
+
+    describe('when a range is already selected', () => {
+      describe('when the cursor cell is not in outer bounds', () => {
+        let props;
+        let wrapper;
+
+        beforeEach(() => {
+          const setupResult = setup();
+          props = setupResult.props;
+          wrapper = setupResult.wrapper;
+          selectRange(wrapper, props, { idx: 2, rowIdx: 2}, { idx: 3, rowIdx: 3 });
+        });
+
+        it('should shrink the selection upwards on Shift+Up', () => {
+          pressKey(wrapper, 'ArrowUp', { shiftKey: true });
+          let selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.bottomRight).toEqual({ idx: 3, rowIdx: 2 });
+          expect(selectedRange.cursorCell).toEqual({ idx: 3, rowIdx: 2 });
+          expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+        });
+
+        it('should shrink the selection leftwards on Shift+Left', () => {
+          pressKey(wrapper, 'ArrowLeft', { shiftKey: true });
+          let selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.bottomRight).toEqual({ idx: 2, rowIdx: 3 });
+          expect(selectedRange.cursorCell).toEqual({ idx: 2, rowIdx: 3 });
+          expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+        });
+
+        it('should grow the selection downwards on Shift+Down', () => {
+          pressKey(wrapper, 'ArrowDown', { shiftKey: true });
+          let selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.bottomRight).toEqual({ idx: 3, rowIdx: 4 });
+          expect(selectedRange.cursorCell).toEqual({ idx: 3, rowIdx: 4 });
+          expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+        });
+
+        it('should grow the selection rightwards on Shift+Right', () => {
+          pressKey(wrapper, 'ArrowRight', { shiftKey: true });
+          let selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+          expect(selectedRange.bottomRight).toEqual({ idx: 4, rowIdx: 3 });
+          expect(selectedRange.cursorCell).toEqual({ idx: 4, rowIdx: 3 });
+          expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+        });
+      });
+
+      describe('when the next cell is out of bounds', () => {
+        it('should not grow the selection on Shift+Up', () => {
+          const { props, wrapper } = setup();
+          selectRange(wrapper, props, { idx: 1, rowIdx: 1 }, { idx: 0, rowIdx: 0 });
+          pressKey(wrapper, 'ArrowUp', { shiftKey: true });
+          let selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.cursorCell).toEqual({ idx: 0, rowIdx: 0 });
+        });
+
+        it('should not grow the selection on Shift+Left', () => {
+          const { props, wrapper } = setup();
+          selectRange(wrapper, props, { idx: 1, rowIdx: 1 }, { idx: 0, rowIdx: 0 });
+          pressKey(wrapper, 'ArrowLeft', { shiftKey: true });
+          let selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.cursorCell).toEqual({ idx: 0, rowIdx: 0 });
+        });
+
+        it('should not grow the selection on Shift+Right', () => {
+          const { props, wrapper } = setup();
+          selectRange(wrapper, props, { idx: 2, rowIdx: 2 }, { idx: NUMBER_OF_COLUMNS - 1, rowIdx: 3 });
+          pressKey(wrapper, 'ArrowRight', { shiftKey: true });
+          let selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.cursorCell).toEqual({ idx: NUMBER_OF_COLUMNS - 1, rowIdx: 3 });
+        });
+
+        it('should not grow the selection on Shift+Down', () => {
+          const { props, wrapper } = setup();
+          selectRange(wrapper, props, { idx: 2, rowIdx: 2 }, { idx: 2, rowIdx: ROWS_COUNT - 1 });
+          pressKey(wrapper, 'ArrowDown', { shiftKey: true });
+          let selectedRange = wrapper.state('selectedRange');
+          expect(selectedRange.cursorCell).toEqual({ idx: 2, rowIdx: ROWS_COUNT - 1 });
+        });
+      });
+    });
+
+    describe('when only a single cell is selected', () => {
+      let props;
+      let wrapper;
+
+      beforeEach(() => {
+        const currentCell = { idx: 2, rowIdx: 2 };
+        const setupResult = setup({}, { selectedPosition: currentCell });
+        props = setupResult.props;
+        wrapper = setupResult.wrapper;
+        props.eventBus.dispatch(EventTypes.SELECT_START, currentCell);
+        props.eventBus.dispatch(EventTypes.SELECT_END);
+      });
+
+      it('should grow the selection range left on Shift+Left', () => {
+        pressKey(wrapper, 'ArrowLeft', { shiftKey: true });
+        let selectedRange = wrapper.state('selectedRange');
+        expect(selectedRange.topLeft).toEqual({ idx: 1, rowIdx: 2 });
+        expect(selectedRange.bottomRight).toEqual({ idx: 2, rowIdx: 2 });
+        expect(selectedRange.cursorCell).toEqual({ idx: 1, rowIdx: 2 });
+        expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+      });
+
+      it('should grow the selection range right on Shift+Right', () => {
+        pressKey(wrapper, 'ArrowRight', { shiftKey: true });
+        let selectedRange = wrapper.state('selectedRange');
+        expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+        expect(selectedRange.bottomRight).toEqual({ idx: 3, rowIdx: 2 });
+        expect(selectedRange.cursorCell).toEqual({ idx: 3, rowIdx: 2 });
+        expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+      });
+
+      it('should grow the selection range up on Shift+Up', () => {
+        pressKey(wrapper, 'ArrowUp', { shiftKey: true });
+        let selectedRange = wrapper.state('selectedRange');
+        expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 1 });
+        expect(selectedRange.bottomRight).toEqual({ idx: 2, rowIdx: 2 });
+        expect(selectedRange.cursorCell).toEqual({ idx: 2, rowIdx: 1 });
+        expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+      });
+
+      it('should grow the selection range down on Shift+Down', () => {
+        pressKey(wrapper, 'ArrowDown', { shiftKey: true });
+        let selectedRange = wrapper.state('selectedRange');
+        expect(selectedRange.topLeft).toEqual({ idx: 2, rowIdx: 2 });
+        expect(selectedRange.bottomRight).toEqual({ idx: 2, rowIdx: 3 });
+        expect(selectedRange.cursorCell).toEqual({ idx: 2, rowIdx: 3 });
+        expect(selectedRange.startCell).toEqual({ idx: 2, rowIdx: 2 });
+      });
+    });
+
+    describe('when no range has ever been selected', () => {
+      let wrapper;
+
+      beforeEach(() => {
+        const currentCell = { idx: 0, rowIdx: 0 };
+        const setupResult = setup({}, { selectedPosition: currentCell });
+        wrapper = setupResult.wrapper;
+      });
+
+      it('should grow the selection range right on Shift+Right', () => {
+        pressKey(wrapper, 'ArrowRight', { shiftKey: true });
+        let selectedRange = wrapper.state('selectedRange');
+        expect(selectedRange.topLeft).toEqual({ idx: 0, rowIdx: 0 });
+        expect(selectedRange.bottomRight).toEqual({ idx: 1, rowIdx: 0 });
+        expect(selectedRange.cursorCell).toEqual({ idx: 1, rowIdx: 0 });
+        expect(selectedRange.startCell).toEqual({ idx: 0, rowIdx: 0 });
+      });
+
+      it('should grow the selection range down on Shift+Down', () => {
+        pressKey(wrapper, 'ArrowDown', { shiftKey: true });
+        let selectedRange = wrapper.state('selectedRange');
+        expect(selectedRange.topLeft).toEqual({ idx: 0, rowIdx: 0 });
+        expect(selectedRange.bottomRight).toEqual({ idx: 0, rowIdx: 1 });
+        expect(selectedRange.cursorCell).toEqual({ idx: 0, rowIdx: 1 });
+        expect(selectedRange.startCell).toEqual({ idx: 0, rowIdx: 0 });
+      });
     });
   });
 
-  describe('When selected cell is outside grid bounds', () => {
-    it('should not render a SelectionMask component', () => {
-      const { wrapper } = setup();
-      expect(wrapper.find(SelectionMask).length).toBe(0);
+  describe('Range selection events', () => {
+    it('should fire onCellRangeSelectionStarted on starting a selection', () => {
+      const { props } = setup();
+      props.eventBus.dispatch(EventTypes.SELECT_START, { idx: 2, rowIdx: 2 });
+      expect(props.onCellRangeSelectionStarted).toHaveBeenCalledWith(jasmine.objectContaining({
+        topLeft: { idx: 2, rowIdx: 2},
+        bottomRight: { idx: 2, rowIdx: 2}
+      }));
+    });
+
+    it('should fire onCellRangeSelectionUpdated on updating a selection', () => {
+      const { props } = setup();
+      props.eventBus.dispatch(EventTypes.SELECT_START, { idx: 2, rowIdx: 2 });
+      props.eventBus.dispatch(EventTypes.SELECT_UPDATE, { idx: 3, rowIdx: 3 });
+      expect(props.onCellRangeSelectionUpdated).toHaveBeenCalledWith(jasmine.objectContaining({
+        topLeft: { idx: 2, rowIdx: 2},
+        bottomRight: { idx: 3, rowIdx: 3}
+      }));
+    });
+
+    it('should fire onCellRangeSelectionCompleted on completing a selection', () => {
+      const { props } = setup();
+      props.eventBus.dispatch(EventTypes.SELECT_START, { idx: 2, rowIdx: 2 });
+      props.eventBus.dispatch(EventTypes.SELECT_UPDATE, { idx: 3, rowIdx: 3 });
+      props.eventBus.dispatch(EventTypes.SELECT_END);
+      expect(props.onCellRangeSelectionCompleted).toHaveBeenCalled();
+    });
+
+    it('should fire onCellRangeSelectionUpdated and onCRSCompleted on modifying a selection via they keyboard', () => {
+      const currentCell = { idx: 0, rowIdx: 0 };
+      const { wrapper, props } = setup({}, { selectedPosition: currentCell });
+      pressKey(wrapper, 'ArrowRight', { shiftKey: true });
+      expect(props.onCellRangeSelectionUpdated).toHaveBeenCalledWith(jasmine.objectContaining({
+        topLeft: { idx: 0, rowIdx: 0},
+        bottomRight: { idx: 1, rowIdx: 0}
+      }));
+      expect(props.onCellRangeSelectionCompleted).toHaveBeenCalled();
     });
   });
 
-  describe('Keyboard functionality', () => {
+  describe('Keyboard navigation functionality', () => {
     it('Press enter should enable editing', () => {
       const { wrapper } = setup({}, { selectedPosition: { idx: 0, rowIdx: 0 } });
       pressKey(wrapper, 'Enter', { keyCode: keyCodes.Enter });
diff --git a/packages/react-data-grid/src/masks/__tests__/SelectionRangeMask.spec.js b/packages/react-data-grid/src/masks/__tests__/SelectionRangeMask.spec.js
new file mode 100644
index 0000000000..a9a1db78bd
--- /dev/null
+++ b/packages/react-data-grid/src/masks/__tests__/SelectionRangeMask.spec.js
@@ -0,0 +1,43 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import CellMask from '../CellMask';
+import SelectionRangeMask from '../SelectionRangeMask';
+
+describe('SelectionRangeMask', () => {
+  const setup = (propsOverride = {}) => {
+    const props = {
+      selectedRange: {
+        topLeft: { idx: 0, rowIdx: 3 },
+        bottomRight: { idx: 1, rowIdx: 4 },
+        startCell: { idx: 0, rowIdx: 3 },
+        cursorCell: { idx: 1, rowIdx: 4 }
+      },
+      columns: [
+        { width: 50, left: 5 },
+        { width: 40, left: 55 }
+      ],
+      rowHeight: 30,
+      isGroupedRow: false,
+      scrollLeft: 0,
+      ...propsOverride
+    };
+
+    const wrapper = shallow(<SelectionRangeMask {...props} />);
+    return wrapper.find(CellMask);
+  };
+
+  it('should render the CellMask component with correct position for the selected cells (topLeft->bottomRight)', () => {
+    const mask = setup();
+
+    expect(mask.props()).toEqual(
+      jasmine.objectContaining({
+        height: 60, // = rowHeight * 2
+        width: 90, // = columns[0].width + columns[1].width
+        left: 5, // = left of leftmost column
+        top: 90, // = rowHeight * rowIdx of topmost column
+        zIndex: 1
+      })
+    );
+  });
+});
diff --git a/packages/react-data-grid/src/utils/SelectedCellUtils.js b/packages/react-data-grid/src/utils/SelectedCellUtils.js
index 37bde3bfc8..873d2d1def 100644
--- a/packages/react-data-grid/src/utils/SelectedCellUtils.js
+++ b/packages/react-data-grid/src/utils/SelectedCellUtils.js
@@ -22,6 +22,32 @@ export const getSelectedDimensions = ({ selectedPosition, columns, rowHeight })
   return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: 1 };
 };
 
+const getColumnRangeProperties = (from, to, columns) => {
+  let totalWidth = 0;
+  let anyColLocked = false;
+  for (let i = from; i <= to; i++) {
+    const column = columnUtils.getColumn(columns, i);
+    totalWidth += column.width;
+    anyColLocked = anyColLocked || column.locked;
+  }
+  return { totalWidth, anyColLocked, left: columnUtils.getColumn(columns, from).left };
+};
+
+export const getSelectedRangeDimensions = ({ selectedRange, columns, rowHeight }) => {
+  const { topLeft, bottomRight } = selectedRange;
+
+  if (topLeft.idx < 0) {
+    return { width: 0, left: 0, top: 0, height: rowHeight, zIndex: 1 };
+  }
+
+  const { totalWidth, anyColLocked, left } = getColumnRangeProperties(topLeft.idx, bottomRight.idx, columns);
+  const top = getRowTop(topLeft.rowIdx, rowHeight);
+  const height = (bottomRight.rowIdx - topLeft.rowIdx + 1) * rowHeight;
+  const zIndex = anyColLocked ? 2 : 1;
+
+  return { width: totalWidth, left, top, height, zIndex };
+};
+
 export const getSelectedColumn = ({ selectedPosition, columns }) => {
   const { idx } = selectedPosition;
   return columnUtils.getColumn(columns, idx);
@@ -102,3 +128,8 @@ export function canExitGrid(e, { cellNavigationMode, columns, rowsCount, selecte
 
   return false;
 }
+
+export function selectedRangeIsSingleCell(selectedRange) {
+  return selectedRange.topLeft.idx === selectedRange.bottomRight.idx &&
+    selectedRange.topLeft.rowIdx === selectedRange.bottomRight.rowIdx;
+}
diff --git a/themes/react-data-grid-cell.css b/themes/react-data-grid-cell.css
index bf7451a06a..30a50fc083 100644
--- a/themes/react-data-grid-cell.css
+++ b/themes/react-data-grid-cell.css
@@ -10,6 +10,11 @@
   border: 2px solid #66afe9;
 }
 
+.rdg-selected-range {
+  border: 1px solid #66afe9;
+  background-color: #66afe930;
+}
+
 .moving-element {
   will-change: transform;
 }
diff --git a/themes/react-data-grid-core.css b/themes/react-data-grid-core.css
index 4f4d572212..6854b5cf9e 100644
--- a/themes/react-data-grid-core.css
+++ b/themes/react-data-grid-core.css
@@ -15,6 +15,12 @@
 .react-grid-Grid {
   background-color: #ffffff;
   border: 1px solid #dddddd;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
 
 .react-grid-Canvas {

From d97094dabc6a1a64b66d35bcdcb1580effcd4cad Mon Sep 17 00:00:00 2001
From: Rowan Hill <rowan.hill@softwire.com>
Date: Thu, 19 Jul 2018 22:26:32 +0100
Subject: [PATCH 2/5] Minor InteractionMasks refactoring based on comments on
 PR #1210

---
 .../src/masks/InteractionMasks.js             | 161 ++++++++++--------
 1 file changed, 89 insertions(+), 72 deletions(-)

diff --git a/packages/react-data-grid/src/masks/InteractionMasks.js b/packages/react-data-grid/src/masks/InteractionMasks.js
index 1ce504f1ed..c3dd0e61e5 100644
--- a/packages/react-data-grid/src/masks/InteractionMasks.js
+++ b/packages/react-data-grid/src/masks/InteractionMasks.js
@@ -112,9 +112,9 @@ class InteractionMasks extends React.Component {
     const { eventBus, enableCellAutoFocus } = this.props;
 
     this.unsubscribeSelectCell = eventBus.subscribe(EventTypes.SELECT_CELL, this.selectCell);
-    this.unsubscribeSelectStart = eventBus.subscribe(EventTypes.SELECT_START, this.selectStart);
-    this.unsubscribeSelectUpdate = eventBus.subscribe(EventTypes.SELECT_UPDATE, this.selectUpdate);
-    this.unsubscribeSelectEnd = eventBus.subscribe(EventTypes.SELECT_END, this.selectEnd);
+    this.unsubscribeSelectStart = eventBus.subscribe(EventTypes.SELECT_START, this.onSelectCellRangeStarted);
+    this.unsubscribeSelectUpdate = eventBus.subscribe(EventTypes.SELECT_UPDATE, this.onSelectCellRangeUpdated);
+    this.unsubscribeSelectEnd = eventBus.subscribe(EventTypes.SELECT_END, this.onSelectCellRangeEnded);
     this.unsubscribeDragEnter = eventBus.subscribe(EventTypes.DRAG_ENTER, this.handleDragEnter);
 
     if (enableCellAutoFocus && this.isFocusedOnBody()) {
@@ -319,56 +319,55 @@ class InteractionMasks extends React.Component {
     const isShift = e.shiftKey;
 
     if (isTab) {
-      this.changeCellFromTabAction(e);
+      const cellNavigationMode = this.props.cellNavigationMode === CellNavigationMode.NONE ?
+        CellNavigationMode.CHANGE_ROW :
+        this.props.cellNavigationMode;
+      this.changeCellFromKeyAction(e, cellNavigationMode);
     } else if (isShift) {
       this.changeSelectedRangeFromArrowKeyAction(e);
     } else {
-      this.changeCellFromArrowKeyAction(e);
+      this.changeCellFromKeyAction(e, this.props.cellNavigationMode);
     }
   }
 
-  changeCellFromArrowKeyAction(e) {
+  changeCellFromKeyAction(e, cellNavigationMode) {
     const currentPosition = this.state.selectedPosition;
-    const { cellNavigationMode } = this.props;
-    const next = this.getNextPositionAndFireOnHitBoundaryIfNeccesary(e, currentPosition, cellNavigationMode);
-
-    this.selectCell(next);
-  }
-
-  changeCellFromTabAction(e) {
-    const currentPosition = this.state.selectedPosition;
-    const cellNavigationMode = this.props.cellNavigationMode === CellNavigationMode.NONE ?
-      CellNavigationMode.CHANGE_ROW :
-      this.props.cellNavigationMode;
-    const next = this.getNextPositionAndFireOnHitBoundaryIfNeccesary(e, currentPosition, cellNavigationMode);
+    const keyNavAction = this.getKeyNavActionFromEvent(e);
+    const next = this.getNextSelectedCellPositionForKeyNavAction(keyNavAction, currentPosition, cellNavigationMode);
+    this.checkIsAtGridBoundary(keyNavAction, next);
 
-    this.selectCell(next);
+    const { changeRowOrColumn, ...nextPos } = next;
+    this.selectCell(nextPos);
   }
 
   changeSelectedRangeFromArrowKeyAction(e) {
     const { cellNavigationMode } = this.props;
     const currentPosition = this.state.selectedRange.cursorCell || this.state.selectedPosition;
-    const next = this.getNextPositionAndFireOnHitBoundaryIfNeccesary(e, currentPosition, cellNavigationMode);
+    const keyNavAction = this.getKeyNavActionFromEvent(e);
+    const next = this.getNextSelectedCellPositionForKeyNavAction(keyNavAction, currentPosition, cellNavigationMode);
+    this.checkIsAtGridBoundary(keyNavAction, next);
 
-    this.selectUpdate(next, true, () => { this.selectEnd(); });
+    const { changeRowOrColumn, ...nextPos } = next;
+    this.onSelectCellRangeUpdated(nextPos, true, () => { this.onSelectCellRangeEnded(); });
   }
 
-  getNextPositionAndFireOnHitBoundaryIfNeccesary(e, currentPosition, cellNavigationMode) {
-    const keyNavAction = this.getKeyNavActionFromEvent(e);
-    const { getNext, isCellAtBoundary, onHitBoundary } = keyNavAction;
+  getNextSelectedCellPositionForKeyNavAction(keyNavAction, currentPosition, cellNavigationMode) {
+    const { getNext } = keyNavAction;
     const nextPosition = getNext(currentPosition);
     const { columns, rowsCount } = this.props;
-    const { changeRowOrColumn, ...next } = getNextSelectedCellPosition({
+    return getNextSelectedCellPosition({
       columns,
       rowsCount,
       cellNavigationMode
     }, nextPosition);
+  }
 
-    if (isCellAtBoundary(next) || changeRowOrColumn) {
-      onHitBoundary(next);
+  checkIsAtGridBoundary(keyNavAction, next) {
+    const { isCellAtBoundary, onHitBoundary } = keyNavAction;
+    const { changeRowOrColumn, ...nextPos } = next;
+    if (isCellAtBoundary(nextPos) || changeRowOrColumn) {
+      onHitBoundary(nextPos);
     }
-
-    return next;
   }
 
   isCellWithinBounds = ({ idx, rowIdx }) => {
@@ -420,16 +419,20 @@ class InteractionMasks extends React.Component {
     }
   };
 
-  selectStart = (cellPosition) => {
+  createSingleCellSelectedRange(cellPosition, isDragging) {
+    return {
+      topLeft: cellPosition,
+      bottomRight: cellPosition,
+      startCell: cellPosition,
+      cursorCell: cellPosition,
+      isDragging
+    };
+  }
+
+  onSelectCellRangeStarted = (selectedPosition) => {
     this.setState({
-      selectedRange: {
-        topLeft: cellPosition,
-        bottomRight: cellPosition,
-        startCell: cellPosition,
-        cursorCell: cellPosition,
-        isDragging: true
-      },
-      selectedPosition: cellPosition
+      selectedRange: this.createSingleCellSelectedRange(selectedPosition, true),
+      selectedPosition
     }, () => {
       if (isFunction(this.props.onCellRangeSelectionStarted)) {
         this.props.onCellRangeSelectionStarted(this.state.selectedRange);
@@ -437,7 +440,7 @@ class InteractionMasks extends React.Component {
     });
   };
 
-  selectUpdate = (cellPosition, isFromKeyboard, callback) => {
+  onSelectCellRangeUpdated = (cellPosition, isFromKeyboard, callback) => {
     if (!this.state.selectedRange.isDragging && !isFromKeyboard) {
       return;
     }
@@ -475,7 +478,7 @@ class InteractionMasks extends React.Component {
     });
   };
 
-  selectEnd = () => {
+  onSelectCellRangeEnded = () => {
     const selectedRange = {...this.state.selectedRange, isDragging: false};
     this.setState({selectedRange}, () => {
       if (isFunction(this.props.onCellRangeSelectionCompleted)) {
@@ -555,6 +558,48 @@ class InteractionMasks extends React.Component {
     this.closeEditor();
   };
 
+  getSingleCellSelectView = (rowData) => {
+    const { rowHeight, columns } = this.props;
+    const { selectedPosition } = this.state;
+
+    return (
+      !this.state.isEditorEnabled && this.isGridSelected() && (
+        <SelectionMask
+          selectedPosition={selectedPosition}
+          rowHeight={rowHeight}
+          columns={columns}
+          isGroupedRow={rowData && rowData.__metaData ? rowData.__metaData.isGroup : false}
+        >
+          {this.dragEnabled() && (
+            <DragHandle
+              onDragStart={this.handleDragStart}
+              onDragEnd={this.handleDragEnd}
+              onDoubleClick={this.onDragHandleDoubleClick}
+            />
+          )}
+        </SelectionMask>
+      )
+    );
+  };
+
+  getCellRangeSelectView = () => {
+    const { rowHeight, columns } = this.props;
+    return [
+      <SelectionRangeMask
+        key="range-mask"
+        selectedRange={this.state.selectedRange}
+        columns={columns}
+        rowHeight={rowHeight}
+      />,
+      <SelectionMask
+        key="selection-mask"
+        selectedPosition={this.state.selectedRange.startCell}
+        columns={columns}
+        rowHeight={rowHeight}
+      />
+    ];
+  };
+
   render() {
     const { rowHeight, rowGetter, columns, contextMenu } = this.props;
     const { isEditorEnabled, firstEditorKeyPress, selectedPosition, draggedPosition, copiedPosition } = this.state;
@@ -582,38 +627,10 @@ class InteractionMasks extends React.Component {
             columns={columns}
           />
         )}
-        {selectedRangeIsSingleCell(this.state.selectedRange) ? (
-          !isEditorEnabled && this.isGridSelected() && (
-            <SelectionMask
-              selectedPosition={selectedPosition}
-              rowHeight={rowHeight}
-              columns={columns}
-              isGroupedRow={rowData && rowData.__metaData ? rowData.__metaData.isGroup : false}
-              scrollLeft={this.props.scrollLeft}
-            >
-              {this.dragEnabled() && (
-                <DragHandle
-                  onDragStart={this.handleDragStart}
-                  onDragEnd={this.handleDragEnd}
-                  onDoubleClick={this.onDragHandleDoubleClick}
-                />
-              )}
-            </SelectionMask>
-          )
-        ) : ([
-          <SelectionRangeMask
-            key="range-mask"
-            selectedRange={this.state.selectedRange}
-            columns={columns}
-            rowHeight={rowHeight}
-          />,
-          <SelectionMask
-            key="selection-mask"
-            selectedPosition={this.state.selectedRange.startCell}
-            columns={columns}
-            rowHeight={rowHeight}
-          />
-        ])}
+        {selectedRangeIsSingleCell(this.state.selectedRange) ?
+          this.getSingleCellSelectView(rowData) :
+          this.getCellRangeSelectView()
+        }
         {isEditorEnabled && <EditorContainer
           firstEditorKeyPress={firstEditorKeyPress}
           onCommit={this.onCommit}

From 80e49e18571d7c57864adf0471711f8758240c34 Mon Sep 17 00:00:00 2001
From: Rowan Hill <rowan.hill@softwire.com>
Date: Tue, 24 Jul 2018 21:14:19 +0100
Subject: [PATCH 3/5] Update ReactDataGrid API to group cell range event
 handlers under cellRangeSelection prop

---
 .../scripts/example30-selection-range-events.js    | 14 ++++++++------
 packages/react-data-grid/src/ReactDataGrid.js      | 14 ++++++++------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js b/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js
index 84988027da..2081b68c81 100644
--- a/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js
+++ b/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js
@@ -74,9 +74,11 @@ class Example extends React.Component {
           rowGetter={this.rowGetter}
           rowsCount={this.state.rows.length}
           minHeight={500}
-          onCellRangeSelectionStarted={this.onStart}
-          onCellRangeSelectionUpdated={this.onUpdate}
-          onCellRangeSelectionCompleted={this.onComplete}
+          cellRangeSelection={{
+            onStart: this.onStart,
+            onUpdate: this.onUpdate,
+            onComplete: this.onComplete
+          }}
         />
       </div>
     );
@@ -85,11 +87,11 @@ class Example extends React.Component {
 
 const exampleDescription = (
   <div>
-    <h4>onCellRangeSelectionStarted</h4>
+    <h4>cellRangeSelection.onStart</h4>
     <p>Called on mousedown on a cell. Receives <code>selectedRange</code> (containing <code>topLeft</code> and <code>topRight</code>) as an argument.</p>
-    <h4>onCellRangeSelectionUpdated</h4>
+    <h4>cellRangeSelection.onUpdate</h4>
     <p>Called on mouseover on a cell when dragging with the mouse, or when pressing shift+arrowkey. Receives <code>selectedRange</code> (containing <code>topLeft</code> and <code>topRight</code>) as an argument.</p>
-    <h4>onCellRangeSelectionCompleted</h4>
+    <h4>cellRangeSelection.onComplete</h4>
     <p>Called on mouseup (anywhere) when dragging with the mouse, or when pressing shift+arrowkey.</p>
     <p>Note: altering the selected range with shift+arrowkey will fire both an Updated and Completed event with each keystroke.</p>
     <h4>Example</h4>
diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js
index 5221da5b8c..e57eb598a2 100644
--- a/packages/react-data-grid/src/ReactDataGrid.js
+++ b/packages/react-data-grid/src/ReactDataGrid.js
@@ -55,9 +55,11 @@ class ReactDataGrid extends React.Component {
     cellNavigationMode: PropTypes.oneOf(['none', 'loopOverRow', 'changeRow']),
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
-    onCellRangeSelectionStarted: PropTypes.func,
-    onCellRangeSelectionUpdated: PropTypes.func,
-    onCellRangeSelectionCompleted: PropTypes.func,
+    cellRangeSelection: PropTypes.shape({
+      onStart: PropTypes.func,
+      onUpdate: PropTypes.func,
+      onComplete: PropTypes.func
+    }),
     onCellExpand: PropTypes.func,
     enableDragAndDrop: PropTypes.bool,
     onRowExpandToggle: PropTypes.func,
@@ -709,9 +711,9 @@ class ReactDataGrid extends React.Component {
             onDragHandleDoubleClick={this.onDragHandleDoubleClick}
             onCellSelected={this.props.onCellSelected}
             onCellDeSelected={this.props.onCellDeSelected}
-            onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
-            onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
-            onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
+            onCellRangeSelectionStarted={this.props.cellRangeSelection && this.props.cellRangeSelection.onStart}
+            onCellRangeSelectionUpdated={this.props.cellRangeSelection && this.props.cellRangeSelection.onUpdate}
+            onCellRangeSelectionCompleted={this.props.cellRangeSelection && this.props.cellRangeSelection.onComplete}
             onCommit={this.onCommit}
           />
         </div>

From 8ea34d78c145f93575c1e4f030faed11cf281c94 Mon Sep 17 00:00:00 2001
From: Rowan Hill <rowan.hill@softwire.com>
Date: Tue, 24 Jul 2018 22:42:52 +0100
Subject: [PATCH 4/5] Refactor single and multi-cell range selection masks into
 components

---
 .../src/masks/InteractionMasks.js             | 120 +++++++++++-------
 .../masks/__tests__/InteractionMasks.spec.js  |  89 ++++++++++---
 2 files changed, 147 insertions(+), 62 deletions(-)

diff --git a/packages/react-data-grid/src/masks/InteractionMasks.js b/packages/react-data-grid/src/masks/InteractionMasks.js
index c3dd0e61e5..d2cbc8b954 100644
--- a/packages/react-data-grid/src/masks/InteractionMasks.js
+++ b/packages/react-data-grid/src/masks/InteractionMasks.js
@@ -558,52 +558,31 @@ class InteractionMasks extends React.Component {
     this.closeEditor();
   };
 
-  getSingleCellSelectView = (rowData) => {
-    const { rowHeight, columns } = this.props;
-    const { selectedPosition } = this.state;
-
-    return (
-      !this.state.isEditorEnabled && this.isGridSelected() && (
-        <SelectionMask
-          selectedPosition={selectedPosition}
-          rowHeight={rowHeight}
-          columns={columns}
-          isGroupedRow={rowData && rowData.__metaData ? rowData.__metaData.isGroup : false}
-        >
-          {this.dragEnabled() && (
-            <DragHandle
-              onDragStart={this.handleDragStart}
-              onDragEnd={this.handleDragEnd}
-              onDoubleClick={this.onDragHandleDoubleClick}
-            />
-          )}
-        </SelectionMask>
-      )
-    );
-  };
-
-  getCellRangeSelectView = () => {
-    const { rowHeight, columns } = this.props;
-    return [
-      <SelectionRangeMask
-        key="range-mask"
-        selectedRange={this.state.selectedRange}
-        columns={columns}
-        rowHeight={rowHeight}
-      />,
-      <SelectionMask
-        key="selection-mask"
-        selectedPosition={this.state.selectedRange.startCell}
-        columns={columns}
-        rowHeight={rowHeight}
-      />
-    ];
-  };
-
   render() {
     const { rowHeight, rowGetter, columns, contextMenu } = this.props;
     const { isEditorEnabled, firstEditorKeyPress, selectedPosition, draggedPosition, copiedPosition } = this.state;
     const rowData = getSelectedRow({ selectedPosition, rowGetter });
+
+    const singleCellSelectViewProps = {
+      visible: !this.state.isEditorEnabled && this.isGridSelected(),
+      selectedPosition: this.state.selectedPosition,
+      rowHeight: this.props.rowHeight,
+      columns: this.props.columns,
+      rowData: rowData,
+      dragEnabled: this.dragEnabled(),
+      dragHandleEventHandlers: {
+        onDragStart: this.handleDragStart,
+        onDragEnd: this.handleDragEnd,
+        onDoubleClick: this.onDragHandleDoubleClick
+      }
+    };
+    const cellRangeSelectViewProps = {
+      selectedRange: this.state.selectedRange,
+      selectedPosition: this.state.selectedRange.startCell,
+      columns: this.props.columns,
+      rowHeight: this.props.rowHeight
+    };
+
     return (
       <div
         ref={node => {
@@ -628,8 +607,8 @@ class InteractionMasks extends React.Component {
           />
         )}
         {selectedRangeIsSingleCell(this.state.selectedRange) ?
-          this.getSingleCellSelectView(rowData) :
-          this.getCellRangeSelectView()
+          <SingleCellSelectView {...singleCellSelectViewProps} /> :
+          <CellRangeSelectView {...cellRangeSelectViewProps} />
         }
         {isEditorEnabled && <EditorContainer
           firstEditorKeyPress={firstEditorKeyPress}
@@ -647,4 +626,57 @@ class InteractionMasks extends React.Component {
   }
 }
 
+export const SingleCellSelectView = (props) => {
+  return (
+    props.visible && (
+      <SelectionMask
+        selectedPosition={props.selectedPosition}
+        rowHeight={props.rowHeight}
+        columns={props.columns}
+        isGroupedRow={props.rowData && props.rowData.__metaData ? props.rowData.__metaData.isGroup : false}
+      >
+        {props.dragEnabled && (
+          <DragHandle {...props.dragHandleEventHandlers} />
+        )}
+      </SelectionMask>
+    )
+  );
+};
+SingleCellSelectView.propTypes = {
+  visible: PropTypes.bool.isRequired,
+  selectedPosition: PropTypes.object.isRequired,
+  rowHeight: PropTypes.number.isRequired,
+  columns: PropTypes.array.isRequired,
+  rowData: PropTypes.object.isRequired,
+  dragEnabled: PropTypes.bool.isRequired,
+  dragHandleEventHandlers: PropTypes.shape({
+    onDragStart: PropTypes.func.isRequired,
+    onDragEnd: PropTypes.func.isRequired,
+    onDoubleClick: PropTypes.func.isRequired
+  }).isRequired
+};
+
+export const CellRangeSelectView = (props) => {
+  return [
+    <SelectionRangeMask
+      key="range-mask"
+      selectedRange={props.selectedRange}
+      columns={props.columns}
+      rowHeight={props.rowHeight}
+    />,
+    <SelectionMask
+      key="selection-mask"
+      selectedPosition={props.selectedPosition}
+      columns={props.columns}
+      rowHeight={props.rowHeight}
+    />
+  ];
+};
+CellRangeSelectView.propTypes = {
+  selectedRange: PropTypes.object.isRequired,
+  selectedPosition: PropTypes.object.isRequired,
+  columns: PropTypes.array.isRequired,
+  rowHeight: PropTypes.number.isRequired
+};
+
 export default InteractionMasks;
diff --git a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
index 890c334d4c..1ba71a6858 100644
--- a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
+++ b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import InteractionMasks from '../InteractionMasks';
+import InteractionMasks, { SingleCellSelectView, CellRangeSelectView } from '../InteractionMasks';
 import SelectionMask from '../SelectionMask';
-import SelectionRangeMask from '../SelectionRangeMask';
 import CopyMask from '../CopyMask';
 import DragMask from '../DragMask';
 import DragHandle from '../DragHandle';
@@ -67,33 +66,39 @@ describe('<InteractionMasks/>', () => {
   describe('Rendered masks', () => {
     describe('When a single cell is selected', () => {
       describe('within grid bounds', () => {
-        it('should render a SelectionMask component', () => {
+        it('should render a SingleCellSelectView component with visible true', () => {
           const { wrapper } = setup({}, { selectedPosition: { idx: 0, rowIdx: 0 } });
-          expect(wrapper.find(SelectionMask).length).toBe(1);
+          expect(wrapper.find(SingleCellSelectView).length).toBe(1);
+          expect(wrapper.find(SingleCellSelectView).props().visible).toBeTruthy();
         });
       });
 
       describe('outside grid bounds', () => {
-        it('should not render a SelectionMask component', () => {
+        it('should not render a SingleCellSelectView component with visible false', () => {
           const { wrapper } = setup();
-          expect(wrapper.find(SelectionMask).length).toBe(0);
+          expect(wrapper.find(SingleCellSelectView).length).toBe(1);
+          expect(wrapper.find(SingleCellSelectView).props().visible).toBeFalsy();
         });
       });
     });
 
     describe('When a cell range is selected', () => {
-      it('should render a SelectionRangeMask component', () => {
+      it('should render a CellRangeSelectView component, passing relevant props', () => {
+        const range = {
+          startCell: { idx: 0, rowIdx: 0 },
+          topLeft: { idx: 0, rowIdx: 0 },
+          bottomRight: { idx: 1, rowIdx: 1 }
+        };
         const { wrapper } = setup({}, {
           selectedPosition: { idx: 0, rowIdx: 0 },
-          selectedRange: {
-            topLeft: { idx: 0, rowIdx: 0 },
-            bottomRight: { idx: 1, rowIdx: 1 }
-          }
+          selectedRange: range
         });
-        expect(wrapper.find(SelectionRangeMask).length).toBe(1);
+        expect(wrapper.find(CellRangeSelectView).length).toBe(1);
+        expect(wrapper.find(CellRangeSelectView).props().selectedPosition).toEqual({ idx: 0, rowIdx: 0 });
+        expect(wrapper.find(CellRangeSelectView).props().selectedRange).toEqual(range);
       });
 
-      it('should render a SelectionMask component on the range\'s start cell', () => {
+      it('should render a CellRangeSelectView component on the range\'s start cell', () => {
         const { wrapper } = setup({}, {
           selectedPosition: { idx: 0, rowIdx: 0 },
           selectedRange: {
@@ -102,8 +107,8 @@ describe('<InteractionMasks/>', () => {
             startCell: { idx: 0, rowIdx: 0 }
           }
         });
-        expect(wrapper.find(SelectionMask).length).toBe(1);
-        expect(wrapper.find(SelectionMask).props().selectedPosition).toEqual({ idx: 0, rowIdx: 0 });
+        expect(wrapper.find(CellRangeSelectView).length).toBe(1);
+        expect(wrapper.find(CellRangeSelectView).props().selectedPosition).toEqual({ idx: 0, rowIdx: 0 });
       });
     });
   });
@@ -735,10 +740,12 @@ describe('<InteractionMasks/>', () => {
     it('should render the DragMask component on cell drag', () => {
       const { wrapper } = setupDrag();
       const setData = jasmine.createSpy();
-      wrapper.find(DragHandle).simulate('dragstart', {
+      const dragHandlers = wrapper.find(SingleCellSelectView).props().dragHandleEventHandlers;
+      dragHandlers.onDragStart({
         target: { className: 'test' },
         dataTransfer: { setData }
       });
+      wrapper.update();
 
       expect(wrapper.find(DragMask).length).toBe(1);
       expect(setData).toHaveBeenCalled();
@@ -747,12 +754,14 @@ describe('<InteractionMasks/>', () => {
     it('should update the dragged over cells on drag end', () => {
       const { wrapper, props } = setupDrag();
       const setData = jasmine.createSpy();
-      wrapper.find(DragHandle).simulate('dragstart', {
+      const dragHandlers = wrapper.find(SingleCellSelectView).props().dragHandleEventHandlers;
+      dragHandlers.onDragStart({
         target: { className: 'test' },
         dataTransfer: { setData }
       });
       props.eventBus.dispatch(EventTypes.DRAG_ENTER, { overRowIdx: 6 });
-      wrapper.find(DragHandle).simulate('dragEnd');
+      dragHandlers.onDragEnd();
+      wrapper.update();
 
       expect(props.onGridRowsUpdated).toHaveBeenCalledWith('Column1', 2, 6, { Column1: '3' }, AppConstants.UpdateActions.CELL_DRAG);
     });
@@ -768,3 +777,47 @@ describe('<InteractionMasks/>', () => {
     });
   });
 });
+
+describe('SingleCellSelectView', () => {
+  const setup = (overrideProps, render = shallow) => {
+    const props = {
+      visible: true,
+      selectedPosition: { idx: 0, rowIdx: 0 },
+      rowHeight: 10,
+      columns: [],
+      rowData: { __meta: { isGroup: false } },
+      dragEnabled: true,
+      ...overrideProps
+    };
+    const wrapper = render(<SingleCellSelectView {...props} />, { disableLifecycleMethods: false });
+    return { wrapper, props };
+  };
+
+  describe('with visible true', () => {
+    it('displays a SelectionMask', () => {
+      const { wrapper } = setup({ visible: true });
+      expect(wrapper.find(SelectionMask).length).toBe(1);
+    });
+  });
+
+  describe('with visible false', () => {
+    it('displays a SelectionMask', () => {
+      const { wrapper } = setup({ visible: false });
+      expect(wrapper.find(SelectionMask).length).toBe(0);
+    });
+  });
+
+  describe('with drag enabled', () => {
+    it('displays the DragHandle', () => {
+      const { wrapper } = setup({ dragEnabled: true });
+      expect(wrapper.find(DragHandle).length).toBe(1);
+    });
+  });
+
+  describe('with drag disabled', () => {
+    it('does not display the DragHandle', () => {
+      const { wrapper } = setup({ dragEnabled: false });
+      expect(wrapper.find(DragHandle).length).toBe(0);
+    });
+  });
+});

From dc689d7628d09f30c57d4f7767ef8b5bce06fc2a Mon Sep 17 00:00:00 2001
From: Rowan Hill <rowan.hill@softwire.com>
Date: Wed, 25 Jul 2018 19:13:38 +0100
Subject: [PATCH 5/5] Revert "Refactor single and multi-cell range selection
 masks into components"

This reverts commit 8ea34d78c145f93575c1e4f030faed11cf281c94.
---
 .../src/masks/InteractionMasks.js             | 120 +++++++-----------
 .../masks/__tests__/InteractionMasks.spec.js  |  89 +++----------
 2 files changed, 62 insertions(+), 147 deletions(-)

diff --git a/packages/react-data-grid/src/masks/InteractionMasks.js b/packages/react-data-grid/src/masks/InteractionMasks.js
index d2cbc8b954..c3dd0e61e5 100644
--- a/packages/react-data-grid/src/masks/InteractionMasks.js
+++ b/packages/react-data-grid/src/masks/InteractionMasks.js
@@ -558,31 +558,52 @@ class InteractionMasks extends React.Component {
     this.closeEditor();
   };
 
+  getSingleCellSelectView = (rowData) => {
+    const { rowHeight, columns } = this.props;
+    const { selectedPosition } = this.state;
+
+    return (
+      !this.state.isEditorEnabled && this.isGridSelected() && (
+        <SelectionMask
+          selectedPosition={selectedPosition}
+          rowHeight={rowHeight}
+          columns={columns}
+          isGroupedRow={rowData && rowData.__metaData ? rowData.__metaData.isGroup : false}
+        >
+          {this.dragEnabled() && (
+            <DragHandle
+              onDragStart={this.handleDragStart}
+              onDragEnd={this.handleDragEnd}
+              onDoubleClick={this.onDragHandleDoubleClick}
+            />
+          )}
+        </SelectionMask>
+      )
+    );
+  };
+
+  getCellRangeSelectView = () => {
+    const { rowHeight, columns } = this.props;
+    return [
+      <SelectionRangeMask
+        key="range-mask"
+        selectedRange={this.state.selectedRange}
+        columns={columns}
+        rowHeight={rowHeight}
+      />,
+      <SelectionMask
+        key="selection-mask"
+        selectedPosition={this.state.selectedRange.startCell}
+        columns={columns}
+        rowHeight={rowHeight}
+      />
+    ];
+  };
+
   render() {
     const { rowHeight, rowGetter, columns, contextMenu } = this.props;
     const { isEditorEnabled, firstEditorKeyPress, selectedPosition, draggedPosition, copiedPosition } = this.state;
     const rowData = getSelectedRow({ selectedPosition, rowGetter });
-
-    const singleCellSelectViewProps = {
-      visible: !this.state.isEditorEnabled && this.isGridSelected(),
-      selectedPosition: this.state.selectedPosition,
-      rowHeight: this.props.rowHeight,
-      columns: this.props.columns,
-      rowData: rowData,
-      dragEnabled: this.dragEnabled(),
-      dragHandleEventHandlers: {
-        onDragStart: this.handleDragStart,
-        onDragEnd: this.handleDragEnd,
-        onDoubleClick: this.onDragHandleDoubleClick
-      }
-    };
-    const cellRangeSelectViewProps = {
-      selectedRange: this.state.selectedRange,
-      selectedPosition: this.state.selectedRange.startCell,
-      columns: this.props.columns,
-      rowHeight: this.props.rowHeight
-    };
-
     return (
       <div
         ref={node => {
@@ -607,8 +628,8 @@ class InteractionMasks extends React.Component {
           />
         )}
         {selectedRangeIsSingleCell(this.state.selectedRange) ?
-          <SingleCellSelectView {...singleCellSelectViewProps} /> :
-          <CellRangeSelectView {...cellRangeSelectViewProps} />
+          this.getSingleCellSelectView(rowData) :
+          this.getCellRangeSelectView()
         }
         {isEditorEnabled && <EditorContainer
           firstEditorKeyPress={firstEditorKeyPress}
@@ -626,57 +647,4 @@ class InteractionMasks extends React.Component {
   }
 }
 
-export const SingleCellSelectView = (props) => {
-  return (
-    props.visible && (
-      <SelectionMask
-        selectedPosition={props.selectedPosition}
-        rowHeight={props.rowHeight}
-        columns={props.columns}
-        isGroupedRow={props.rowData && props.rowData.__metaData ? props.rowData.__metaData.isGroup : false}
-      >
-        {props.dragEnabled && (
-          <DragHandle {...props.dragHandleEventHandlers} />
-        )}
-      </SelectionMask>
-    )
-  );
-};
-SingleCellSelectView.propTypes = {
-  visible: PropTypes.bool.isRequired,
-  selectedPosition: PropTypes.object.isRequired,
-  rowHeight: PropTypes.number.isRequired,
-  columns: PropTypes.array.isRequired,
-  rowData: PropTypes.object.isRequired,
-  dragEnabled: PropTypes.bool.isRequired,
-  dragHandleEventHandlers: PropTypes.shape({
-    onDragStart: PropTypes.func.isRequired,
-    onDragEnd: PropTypes.func.isRequired,
-    onDoubleClick: PropTypes.func.isRequired
-  }).isRequired
-};
-
-export const CellRangeSelectView = (props) => {
-  return [
-    <SelectionRangeMask
-      key="range-mask"
-      selectedRange={props.selectedRange}
-      columns={props.columns}
-      rowHeight={props.rowHeight}
-    />,
-    <SelectionMask
-      key="selection-mask"
-      selectedPosition={props.selectedPosition}
-      columns={props.columns}
-      rowHeight={props.rowHeight}
-    />
-  ];
-};
-CellRangeSelectView.propTypes = {
-  selectedRange: PropTypes.object.isRequired,
-  selectedPosition: PropTypes.object.isRequired,
-  columns: PropTypes.array.isRequired,
-  rowHeight: PropTypes.number.isRequired
-};
-
 export default InteractionMasks;
diff --git a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
index 1ba71a6858..890c334d4c 100644
--- a/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
+++ b/packages/react-data-grid/src/masks/__tests__/InteractionMasks.spec.js
@@ -1,8 +1,9 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 
-import InteractionMasks, { SingleCellSelectView, CellRangeSelectView } from '../InteractionMasks';
+import InteractionMasks from '../InteractionMasks';
 import SelectionMask from '../SelectionMask';
+import SelectionRangeMask from '../SelectionRangeMask';
 import CopyMask from '../CopyMask';
 import DragMask from '../DragMask';
 import DragHandle from '../DragHandle';
@@ -66,39 +67,33 @@ describe('<InteractionMasks/>', () => {
   describe('Rendered masks', () => {
     describe('When a single cell is selected', () => {
       describe('within grid bounds', () => {
-        it('should render a SingleCellSelectView component with visible true', () => {
+        it('should render a SelectionMask component', () => {
           const { wrapper } = setup({}, { selectedPosition: { idx: 0, rowIdx: 0 } });
-          expect(wrapper.find(SingleCellSelectView).length).toBe(1);
-          expect(wrapper.find(SingleCellSelectView).props().visible).toBeTruthy();
+          expect(wrapper.find(SelectionMask).length).toBe(1);
         });
       });
 
       describe('outside grid bounds', () => {
-        it('should not render a SingleCellSelectView component with visible false', () => {
+        it('should not render a SelectionMask component', () => {
           const { wrapper } = setup();
-          expect(wrapper.find(SingleCellSelectView).length).toBe(1);
-          expect(wrapper.find(SingleCellSelectView).props().visible).toBeFalsy();
+          expect(wrapper.find(SelectionMask).length).toBe(0);
         });
       });
     });
 
     describe('When a cell range is selected', () => {
-      it('should render a CellRangeSelectView component, passing relevant props', () => {
-        const range = {
-          startCell: { idx: 0, rowIdx: 0 },
-          topLeft: { idx: 0, rowIdx: 0 },
-          bottomRight: { idx: 1, rowIdx: 1 }
-        };
+      it('should render a SelectionRangeMask component', () => {
         const { wrapper } = setup({}, {
           selectedPosition: { idx: 0, rowIdx: 0 },
-          selectedRange: range
+          selectedRange: {
+            topLeft: { idx: 0, rowIdx: 0 },
+            bottomRight: { idx: 1, rowIdx: 1 }
+          }
         });
-        expect(wrapper.find(CellRangeSelectView).length).toBe(1);
-        expect(wrapper.find(CellRangeSelectView).props().selectedPosition).toEqual({ idx: 0, rowIdx: 0 });
-        expect(wrapper.find(CellRangeSelectView).props().selectedRange).toEqual(range);
+        expect(wrapper.find(SelectionRangeMask).length).toBe(1);
       });
 
-      it('should render a CellRangeSelectView component on the range\'s start cell', () => {
+      it('should render a SelectionMask component on the range\'s start cell', () => {
         const { wrapper } = setup({}, {
           selectedPosition: { idx: 0, rowIdx: 0 },
           selectedRange: {
@@ -107,8 +102,8 @@ describe('<InteractionMasks/>', () => {
             startCell: { idx: 0, rowIdx: 0 }
           }
         });
-        expect(wrapper.find(CellRangeSelectView).length).toBe(1);
-        expect(wrapper.find(CellRangeSelectView).props().selectedPosition).toEqual({ idx: 0, rowIdx: 0 });
+        expect(wrapper.find(SelectionMask).length).toBe(1);
+        expect(wrapper.find(SelectionMask).props().selectedPosition).toEqual({ idx: 0, rowIdx: 0 });
       });
     });
   });
@@ -740,12 +735,10 @@ describe('<InteractionMasks/>', () => {
     it('should render the DragMask component on cell drag', () => {
       const { wrapper } = setupDrag();
       const setData = jasmine.createSpy();
-      const dragHandlers = wrapper.find(SingleCellSelectView).props().dragHandleEventHandlers;
-      dragHandlers.onDragStart({
+      wrapper.find(DragHandle).simulate('dragstart', {
         target: { className: 'test' },
         dataTransfer: { setData }
       });
-      wrapper.update();
 
       expect(wrapper.find(DragMask).length).toBe(1);
       expect(setData).toHaveBeenCalled();
@@ -754,14 +747,12 @@ describe('<InteractionMasks/>', () => {
     it('should update the dragged over cells on drag end', () => {
       const { wrapper, props } = setupDrag();
       const setData = jasmine.createSpy();
-      const dragHandlers = wrapper.find(SingleCellSelectView).props().dragHandleEventHandlers;
-      dragHandlers.onDragStart({
+      wrapper.find(DragHandle).simulate('dragstart', {
         target: { className: 'test' },
         dataTransfer: { setData }
       });
       props.eventBus.dispatch(EventTypes.DRAG_ENTER, { overRowIdx: 6 });
-      dragHandlers.onDragEnd();
-      wrapper.update();
+      wrapper.find(DragHandle).simulate('dragEnd');
 
       expect(props.onGridRowsUpdated).toHaveBeenCalledWith('Column1', 2, 6, { Column1: '3' }, AppConstants.UpdateActions.CELL_DRAG);
     });
@@ -777,47 +768,3 @@ describe('<InteractionMasks/>', () => {
     });
   });
 });
-
-describe('SingleCellSelectView', () => {
-  const setup = (overrideProps, render = shallow) => {
-    const props = {
-      visible: true,
-      selectedPosition: { idx: 0, rowIdx: 0 },
-      rowHeight: 10,
-      columns: [],
-      rowData: { __meta: { isGroup: false } },
-      dragEnabled: true,
-      ...overrideProps
-    };
-    const wrapper = render(<SingleCellSelectView {...props} />, { disableLifecycleMethods: false });
-    return { wrapper, props };
-  };
-
-  describe('with visible true', () => {
-    it('displays a SelectionMask', () => {
-      const { wrapper } = setup({ visible: true });
-      expect(wrapper.find(SelectionMask).length).toBe(1);
-    });
-  });
-
-  describe('with visible false', () => {
-    it('displays a SelectionMask', () => {
-      const { wrapper } = setup({ visible: false });
-      expect(wrapper.find(SelectionMask).length).toBe(0);
-    });
-  });
-
-  describe('with drag enabled', () => {
-    it('displays the DragHandle', () => {
-      const { wrapper } = setup({ dragEnabled: true });
-      expect(wrapper.find(DragHandle).length).toBe(1);
-    });
-  });
-
-  describe('with drag disabled', () => {
-    it('does not display the DragHandle', () => {
-      const { wrapper } = setup({ dragEnabled: false });
-      expect(wrapper.find(DragHandle).length).toBe(0);
-    });
-  });
-});