@deephaven/grid 0.5.2-beta.0 → 0.6.1-demo.8

package/dist/Grid.js

@@ -1,5 +1,3 @@
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
 
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
@@ -8,38 +6,6 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 /* eslint react/no-did-update-set-state: "off" */
@@ -48,19 +14,19 @@ import classNames from 'classnames';
 import memoize from 'memoize-one';
 import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
-import GridMetricCalculator from './GridMetricCalculator';
-import GridModel from './GridModel';
-import GridMouseHandler from './GridMouseHandler';
-import GridTheme from './GridTheme';
-import GridRange from './GridRange';
-import GridRenderer from './GridRenderer';
-import GridUtils from './GridUtils';
-import { GridSelectionMouseHandler, GridColumnMoveMouseHandler, GridColumnSeparatorMouseHandler, GridHorizontalScrollBarMouseHandler, GridRowMoveMouseHandler, GridRowSeparatorMouseHandler, GridRowTreeMouseHandler, GridScrollBarCornerMouseHandler, GridVerticalScrollBarMouseHandler, EditMouseHandler } from './mouse-handlers';
+import GridMetricCalculator from "./GridMetricCalculator.js";
+import GridModel from "./GridModel.js";
+import GridMouseHandler from "./GridMouseHandler.js";
+import GridTheme from "./GridTheme.js";
+import GridRange from "./GridRange.js";
+import GridRenderer from "./GridRenderer.js";
+import GridUtils from "./GridUtils.js";
+import { GridSelectionMouseHandler, GridColumnMoveMouseHandler, GridColumnSeparatorMouseHandler, GridHorizontalScrollBarMouseHandler, GridRowMoveMouseHandler, GridRowSeparatorMouseHandler, GridRowTreeMouseHandler, GridScrollBarCornerMouseHandler, GridVerticalScrollBarMouseHandler, EditMouseHandler } from "./mouse-handlers/index.js";
 import "./Grid.css";
-import KeyHandler from './KeyHandler';
-import { EditKeyHandler, PasteKeyHandler, SelectionKeyHandler, TreeKeyHandler } from './key-handlers';
-import CellInputField from './CellInputField';
-import PasteError from './errors/PasteError';
+import KeyHandler from "./KeyHandler.js";
+import { EditKeyHandler, PasteKeyHandler, SelectionKeyHandler, TreeKeyHandler } from "./key-handlers/index.js";
+import CellInputField from "./CellInputField.js";
+import PasteError from "./errors/PasteError.js";
 /**
  * High performance, extendible, themeable grid component.
  * Architectured to be fast and handle billions of rows/columns by default.
@@ -76,67 +42,65 @@ import PasteError from './errors/PasteError';
  * Can also add onClick and onContextMenu handlers to add custom functionality and menus.
  */
 
-var Grid = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Grid, _PureComponent);
-
-  var _super = _createSuper(Grid);
-
-  function Grid(props) {
-    var _this;
-
-    _classCallCheck(this, Grid);
-
-    _this = _super.call(this, props);
-
-    _defineProperty(_assertThisInitialized(_this), "getCachedKeyHandlers", memoize(function (keyHandlers) {
-      return [].concat(_toConsumableArray(keyHandlers), _toConsumableArray(_this.keyHandlers)).sort(function (a, b) {
-        return a.order - b.order;
-      });
-    }));
+class Grid extends PureComponent {
+  // use same constant as chrome source for windows
+  // https://github.com/chromium/chromium/blob/973af9d461b6b5dc60208c8d3d66adc27e53da78/ui/events/blink/web_input_event_builders_win.cc#L285
+  static getScale(context) {
+    var devicePixelRatio = window.devicePixelRatio || 1;
+    var backingStorePixelRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
+    return devicePixelRatio / backingStorePixelRatio;
+  }
 
-    _defineProperty(_assertThisInitialized(_this), "getCachedMouseHandlers", memoize(function (mouseHandlers) {
-      return [].concat(_toConsumableArray(mouseHandlers), _toConsumableArray(_this.mouseHandlers)).sort(function (a, b) {
-        return a.order - b.order;
-      });
-    }));
+  static getCursorClassName(cursor) {
+    return cursor ? "grid-cursor-".concat(cursor) : null;
+  }
 
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
-    _this.handleContextMenu = _this.handleContextMenu.bind(_assertThisInitialized(_this));
-    _this.handleEditCellCancel = _this.handleEditCellCancel.bind(_assertThisInitialized(_this));
-    _this.handleEditCellChange = _this.handleEditCellChange.bind(_assertThisInitialized(_this));
-    _this.handleEditCellCommit = _this.handleEditCellCommit.bind(_assertThisInitialized(_this));
-    _this.handleDoubleClick = _this.handleDoubleClick.bind(_assertThisInitialized(_this));
-    _this.handleKeyDown = _this.handleKeyDown.bind(_assertThisInitialized(_this));
-    _this.handleMouseDown = _this.handleMouseDown.bind(_assertThisInitialized(_this));
-    _this.handleMouseDrag = _this.handleMouseDrag.bind(_assertThisInitialized(_this));
-    _this.handleMouseMove = _this.handleMouseMove.bind(_assertThisInitialized(_this));
-    _this.handleMouseLeave = _this.handleMouseLeave.bind(_assertThisInitialized(_this));
-    _this.handleMouseUp = _this.handleMouseUp.bind(_assertThisInitialized(_this));
-    _this.handleResize = _this.handleResize.bind(_assertThisInitialized(_this));
-    _this.handleWheel = _this.handleWheel.bind(_assertThisInitialized(_this));
-    var metricCalculator = props.metricCalculator,
-        movedColumns = props.movedColumns,
-        movedRows = props.movedRows,
-        renderer = props.renderer;
-    _this.renderer = renderer || new GridRenderer();
-    _this.metricCalculator = metricCalculator || new GridMetricCalculator();
-    _this.canvas = null;
-    _this.canvasContext = null;
-    _this.animationFrame = null;
-    _this.prevMetrics = null;
-    _this.metrics = null;
-    _this.isStuckToBottom = false;
-    _this.isStuckToRight = false; // Track the cursor that is currently added to the document
+  constructor(props) {
+    super(props);
+
+    _defineProperty(this, "getCachedKeyHandlers", memoize(keyHandlers => [...keyHandlers, ...this.keyHandlers].sort((a, b) => a.order - b.order)));
+
+    _defineProperty(this, "getCachedMouseHandlers", memoize(mouseHandlers => [...mouseHandlers, ...this.mouseHandlers].sort((a, b) => a.order - b.order)));
+
+    this.handleClick = this.handleClick.bind(this);
+    this.handleContextMenu = this.handleContextMenu.bind(this);
+    this.handleEditCellCancel = this.handleEditCellCancel.bind(this);
+    this.handleEditCellChange = this.handleEditCellChange.bind(this);
+    this.handleEditCellCommit = this.handleEditCellCommit.bind(this);
+    this.handleDoubleClick = this.handleDoubleClick.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.handleMouseDown = this.handleMouseDown.bind(this);
+    this.handleMouseDrag = this.handleMouseDrag.bind(this);
+    this.handleMouseMove = this.handleMouseMove.bind(this);
+    this.handleMouseLeave = this.handleMouseLeave.bind(this);
+    this.handleMouseUp = this.handleMouseUp.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.handleWheel = this.handleWheel.bind(this);
+    var {
+      metricCalculator,
+      movedColumns,
+      movedRows,
+      renderer
+    } = props;
+    this.renderer = renderer || new GridRenderer();
+    this.metricCalculator = metricCalculator || new GridMetricCalculator();
+    this.canvas = null;
+    this.canvasContext = null;
+    this.animationFrame = null;
+    this.prevMetrics = null;
+    this.metrics = null;
+    this.isStuckToBottom = false;
+    this.isStuckToRight = false; // Track the cursor that is currently added to the document
     // Add to document so that when dragging the cursor stays, even if mouse leaves the canvas
     // Note: on document, not body so that cursor styling can be combined with
     // blocked pointer events that would otherwise prevent cursor styling from showing
 
-    _this.documentCursor = null;
-    _this.dragTimer = null; // specify handler ordering, such that any extensions can insert handlers in between
+    this.documentCursor = null;
+    this.dragTimer = null; // specify handler ordering, such that any extensions can insert handlers in between
 
-    _this.keyHandlers = [new EditKeyHandler(400), new PasteKeyHandler(450), new SelectionKeyHandler(500), new TreeKeyHandler(900)];
-    _this.mouseHandlers = [new GridRowSeparatorMouseHandler(100), new GridColumnSeparatorMouseHandler(200), new GridRowMoveMouseHandler(300), new GridColumnMoveMouseHandler(400), new EditMouseHandler(450), new GridVerticalScrollBarMouseHandler(500), new GridHorizontalScrollBarMouseHandler(600), new GridScrollBarCornerMouseHandler(700), new GridRowTreeMouseHandler(800), new GridSelectionMouseHandler(900)];
-    _this.state = {
+    this.keyHandlers = [new EditKeyHandler(400), new PasteKeyHandler(450), new SelectionKeyHandler(500), new TreeKeyHandler(900)];
+    this.mouseHandlers = [new GridRowSeparatorMouseHandler(100), new GridColumnSeparatorMouseHandler(200), new GridRowMoveMouseHandler(300), new GridColumnMoveMouseHandler(400), new EditMouseHandler(450), new GridVerticalScrollBarMouseHandler(500), new GridHorizontalScrollBarMouseHandler(600), new GridScrollBarCornerMouseHandler(700), new GridRowTreeMouseHandler(800), new GridSelectionMouseHandler(900)];
+    this.state = {
       // Top/left visible cell in the grid. Note that it's visible row/column index, not the model index (ie. if columns are re-ordered)
       top: 0,
       left: 0,
@@ -161,8 +125,8 @@ var Grid = /*#__PURE__*/function (_PureComponent) {
       mouseX: null,
       mouseY: null,
       // Move operations the user has performed on this grids columns/rows
-      movedColumns: movedColumns,
-      movedRows: movedRows,
+      movedColumns,
+      movedRows,
       // Cursor (highlighted cell) location and active selected range
       cursorRow: null,
       cursorColumn: null,
@@ -181,1552 +145,1553 @@ var Grid = /*#__PURE__*/function (_PureComponent) {
       // The cell that is currently being edited
       editingCell: null
     };
-    return _this;
   }
 
-  _createClass(Grid, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.initContext(); // Need to explicitly add wheel event to canvas so we can preventDefault/avoid passive listener issue
-      // Otherwise React attaches listener at doc level and you can't prevent default
-      // https://github.com/facebook/react/issues/14856
+  componentDidMount() {
+    this.initContext(); // Need to explicitly add wheel event to canvas so we can preventDefault/avoid passive listener issue
+    // Otherwise React attaches listener at doc level and you can't prevent default
+    // https://github.com/facebook/react/issues/14856
+
+    this.canvas.addEventListener('wheel', this.handleWheel, {
+      passive: false
+    });
+    window.addEventListener('resize', this.handleResize);
+    this.updateCanvasScale();
+    this.updateCanvas();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      isStickyBottom,
+      isStickyRight,
+      movedColumns,
+      movedRows,
+      onMovedColumnsChanged,
+      onMoveColumnComplete
+    } = this.props;
+    var {
+      isStickyBottom: prevIsStickyBottom,
+      isStickyRight: prevIsStickyRight,
+      movedColumns: prevPropMovedColumns,
+      movedRows: prevMovedRows
+    } = prevProps;
+    var {
+      movedColumns: prevStateMovedColumns
+    } = prevState;
+    var {
+      draggingColumn,
+      movedColumns: currentStateMovedColumns
+    } = this.state;
+
+    if (prevPropMovedColumns !== movedColumns) {
+      this.setState({
+        movedColumns
+      });
+    }
 
-      this.canvas.addEventListener('wheel', this.handleWheel, {
-        passive: false
+    if (prevMovedRows !== movedRows) {
+      this.setState({
+        movedRows
       });
-      window.addEventListener('resize', this.handleResize);
-      this.updateCanvasScale();
-      this.updateCanvas();
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps, prevState) {
-      var _this$props = this.props,
-          isStickyBottom = _this$props.isStickyBottom,
-          isStickyRight = _this$props.isStickyRight,
-          movedColumns = _this$props.movedColumns,
-          movedRows = _this$props.movedRows,
-          onMovedColumnsChanged = _this$props.onMovedColumnsChanged,
-          onMoveColumnComplete = _this$props.onMoveColumnComplete;
-      var prevIsStickyBottom = prevProps.isStickyBottom,
-          prevIsStickyRight = prevProps.isStickyRight,
-          prevPropMovedColumns = prevProps.movedColumns,
-          prevMovedRows = prevProps.movedRows;
-      var prevStateMovedColumns = prevState.movedColumns;
-      var _this$state = this.state,
-          draggingColumn = _this$state.draggingColumn,
-          currentStateMovedColumns = _this$state.movedColumns;
-
-      if (prevPropMovedColumns !== movedColumns) {
+
+    if (prevStateMovedColumns !== currentStateMovedColumns) {
+      onMovedColumnsChanged(currentStateMovedColumns);
+    }
+
+    if (prevState.draggingColumn != null && draggingColumn == null) {
+      onMoveColumnComplete(currentStateMovedColumns);
+    }
+
+    if (isStickyBottom !== prevIsStickyBottom) {
+      this.isStuckToBottom = false;
+    }
+
+    if (isStickyRight !== prevIsStickyRight) {
+      this.isStuckToRight = false;
+    }
+
+    this.updateMetrics();
+    this.requestUpdateCanvas();
+
+    if (!this.metrics || !this.prevMetrics) {
+      return;
+    }
+
+    var {
+      bottomVisible,
+      rightVisible,
+      rowCount,
+      columnCount,
+      top,
+      left,
+      height,
+      width
+    } = this.metrics;
+    var {
+      rowCount: prevRowCount,
+      columnCount: prevColumnCount,
+      height: prevHeight,
+      width: prevWidth
+    } = this.prevMetrics;
+    var metricState = this.getMetricState();
+
+    if (prevRowCount !== rowCount || height !== prevHeight) {
+      var lastTop = this.metricCalculator.getLastTop(metricState);
+
+      if (this.isStuckToBottom && bottomVisible < rowCount - 1 && bottomVisible > 0 && top > 0 || top > lastTop) {
         this.setState({
-          movedColumns: movedColumns
+          top: lastTop
         });
       }
+    }
 
-      if (prevMovedRows !== movedRows) {
+    if (prevColumnCount !== columnCount || width !== prevWidth) {
+      var lastLeft = this.metricCalculator.getLastLeft(metricState);
+
+      if (this.isStuckToRight && rightVisible < columnCount - 1 && rightVisible > 0 && left > 0 || left > lastLeft) {
         this.setState({
-          movedRows: movedRows
+          left: lastLeft
         });
       }
+    }
 
-      if (prevStateMovedColumns !== currentStateMovedColumns) {
-        onMovedColumnsChanged(currentStateMovedColumns);
-      }
+    if (this.validateSelection()) {
+      this.checkSelectionChange(prevState);
+    }
+  }
 
-      if (prevState.draggingColumn != null && draggingColumn == null) {
-        onMoveColumnComplete(currentStateMovedColumns);
-      }
+  componentWillUnmount() {
+    if (this.animationFrame != null) {
+      cancelAnimationFrame(this.animationFrame);
+    }
 
-      if (isStickyBottom !== prevIsStickyBottom) {
-        this.isStuckToBottom = false;
-      }
+    this.canvas.removeEventListener('wheel', this.handleWheel, {
+      passive: false
+    });
+    window.removeEventListener('mousemove', this.handleMouseDrag, true);
+    window.removeEventListener('mouseup', this.handleMouseUp, true);
+    window.removeEventListener('resize', this.handleResize);
+    this.stopDragTimer();
+  }
 
-      if (isStickyRight !== prevIsStickyRight) {
-        this.isStuckToRight = false;
-      }
+  getTheme() {
+    var {
+      theme
+    } = this.props;
+    return Grid.getTheme(theme);
+  }
 
-      this.updateMetrics();
-      this.requestUpdateCanvas();
+  getGridPointFromEvent(event) {
+    var rect = this.canvas.getBoundingClientRect();
+    var x = event.clientX - rect.left;
+    var y = event.clientY - rect.top;
+    return this.getGridPointFromXY(x, y);
+  }
 
-      if (!this.metrics || !this.prevMetrics) {
-        return;
-      }
+  getGridPointFromXY(x, y) {
+    return GridUtils.getGridPointFromXY(x, y, this.metrics);
+  }
 
-      var _this$metrics = this.metrics,
-          bottomVisible = _this$metrics.bottomVisible,
-          rightVisible = _this$metrics.rightVisible,
-          rowCount = _this$metrics.rowCount,
-          columnCount = _this$metrics.columnCount,
-          top = _this$metrics.top,
-          left = _this$metrics.left,
-          height = _this$metrics.height,
-          width = _this$metrics.width;
-      var _this$prevMetrics = this.prevMetrics,
-          prevRowCount = _this$prevMetrics.rowCount,
-          prevColumnCount = _this$prevMetrics.columnCount,
-          prevHeight = _this$prevMetrics.height,
-          prevWidth = _this$prevMetrics.width;
-      var metricState = this.getMetricState();
-
-      if (prevRowCount !== rowCount || height !== prevHeight) {
-        var lastTop = this.metricCalculator.getLastTop(metricState);
-
-        if (this.isStuckToBottom && bottomVisible < rowCount - 1 && bottomVisible > 0 && top > 0 || top > lastTop) {
-          this.setState({
-            top: lastTop
-          });
-        }
-      }
+  getMetricState() {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
+    var theme = this.getTheme();
+    var {
+      model,
+      stateOverride
+    } = this.props;
+    var context = this.canvasContext;
+    var width = this.canvas.clientWidth;
+    var height = this.canvas.clientHeight;
+    var {
+      left,
+      top,
+      leftOffset,
+      topOffset,
+      movedColumns,
+      movedRows,
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar
+    } = state;
+    return _objectSpread({
+      left,
+      top,
+      leftOffset,
+      topOffset,
+      width,
+      height,
+      context,
+      theme,
+      model,
+      movedColumns,
+      movedRows,
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar
+    }, stateOverride);
+  }
 
-      if (prevColumnCount !== columnCount || width !== prevWidth) {
-        var lastLeft = this.metricCalculator.getLastLeft(metricState);
+  getKeyHandlers() {
+    var {
+      keyHandlers
+    } = this.props;
+    return this.getCachedKeyHandlers(keyHandlers);
+  }
 
-        if (this.isStuckToRight && rightVisible < columnCount - 1 && rightVisible > 0 && left > 0 || left > lastLeft) {
-          this.setState({
-            left: lastLeft
-          });
-        }
-      }
+  getMouseHandlers() {
+    var {
+      mouseHandlers
+    } = this.props;
+    return this.getCachedMouseHandlers(mouseHandlers);
+  }
 
-      if (this.validateSelection()) {
-        this.checkSelectionChange(prevState);
-      }
+  getModelColumn(columnIndex) {
+    var _this$metrics, _this$metrics$modelCo;
+
+    return (_this$metrics = this.metrics) === null || _this$metrics === void 0 ? void 0 : (_this$metrics$modelCo = _this$metrics.modelColumns) === null || _this$metrics$modelCo === void 0 ? void 0 : _this$metrics$modelCo.get(columnIndex);
+  }
+
+  getModelRow(rowIndex) {
+    var _this$metrics2, _this$metrics2$modelR;
+
+    return (_this$metrics2 = this.metrics) === null || _this$metrics2 === void 0 ? void 0 : (_this$metrics2$modelR = _this$metrics2.modelRows) === null || _this$metrics2$modelR === void 0 ? void 0 : _this$metrics2$modelR.get(rowIndex);
+  }
+
+  toggleRowExpanded(row) {
+    var {
+      metrics
+    } = this;
+    var {
+      modelRows
+    } = metrics;
+    var modelRow = modelRows.get(row);
+    var {
+      model
+    } = this.props; // We only want to set expansion if the row is expandable
+    // If it's not, still move the cursor to that position, as it may be outside of the current viewport and we don't know if it's expandable yet
+
+    if (model.isRowExpandable(modelRow)) {
+      model.setRowExpanded(modelRow, !model.isRowExpanded(modelRow));
     }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      if (this.animationFrame != null) {
-        cancelAnimationFrame(this.animationFrame);
+
+    this.clearSelectedRanges();
+    this.commitSelection(); // Need to commit before moving in case we're selecting same row again
+
+    this.moveCursorToPosition(0, row);
+    this.commitSelection();
+    this.isStuckToBottom = false;
+  }
+  /** Allows the selected range to be set programatically */
+
+
+  setSelectedRanges(gridRanges) {
+    var {
+      model
+    } = this.props;
+    var {
+      columnCount,
+      rowCount
+    } = model;
+    var {
+      cursorRow,
+      cursorColumn,
+      selectedRanges
+    } = this.state;
+    this.setState({
+      selectedRanges: gridRanges,
+      lastSelectedRanges: selectedRanges
+    });
+
+    if (gridRanges.length > 0) {
+      var range = GridRange.boundedRange(gridRanges[0], columnCount, rowCount);
+      var newCursorRow = cursorRow;
+      var newCursorColumn = cursorColumn;
+
+      if (!range.containsCell(cursorColumn, cursorRow)) {
+        ({
+          row: newCursorRow,
+          column: newCursorColumn
+        } = range.startCell());
       }
 
-      this.canvas.removeEventListener('wheel', this.handleWheel, {
-        passive: false
+      this.setState({
+        selectionStartColumn: range.startColumn,
+        selectionStartRow: range.startRow,
+        selectionEndColumn: range.endColumn,
+        selectionEndRow: range.endRow,
+        cursorColumn: newCursorColumn,
+        cursorRow: newCursorRow
       });
-      window.removeEventListener('mousemove', this.handleMouseDrag, true);
-      window.removeEventListener('mouseup', this.handleMouseUp, true);
-      window.removeEventListener('resize', this.handleResize);
-      this.stopDragTimer();
-    }
-  }, {
-    key: "getTheme",
-    value: function getTheme() {
-      var theme = this.props.theme;
-      return Grid.getTheme(theme);
-    }
-  }, {
-    key: "getGridPointFromEvent",
-    value: function getGridPointFromEvent(event) {
-      var rect = this.canvas.getBoundingClientRect();
-      var x = event.clientX - rect.left;
-      var y = event.clientY - rect.top;
-      return this.getGridPointFromXY(x, y);
     }
-  }, {
-    key: "getGridPointFromXY",
-    value: function getGridPointFromXY(x, y) {
-      return GridUtils.getGridPointFromXY(x, y, this.metrics);
-    }
-  }, {
-    key: "getMetricState",
-    value: function getMetricState() {
-      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
-      var theme = this.getTheme();
-      var _this$props2 = this.props,
-          model = _this$props2.model,
-          stateOverride = _this$props2.stateOverride;
-      var context = this.canvasContext;
-      var width = this.canvas.clientWidth;
-      var height = this.canvas.clientHeight;
-      var left = state.left,
-          top = state.top,
-          leftOffset = state.leftOffset,
-          topOffset = state.topOffset,
-          movedColumns = state.movedColumns,
-          movedRows = state.movedRows,
-          isDraggingHorizontalScrollBar = state.isDraggingHorizontalScrollBar,
-          isDraggingVerticalScrollBar = state.isDraggingVerticalScrollBar;
-      return _objectSpread({
-        left: left,
-        top: top,
-        leftOffset: leftOffset,
-        topOffset: topOffset,
-        width: width,
-        height: height,
-        context: context,
-        theme: theme,
-        model: model,
-        movedColumns: movedColumns,
-        movedRows: movedRows,
-        isDraggingHorizontalScrollBar: isDraggingHorizontalScrollBar,
-        isDraggingVerticalScrollBar: isDraggingVerticalScrollBar
-      }, stateOverride);
-    }
-  }, {
-    key: "getKeyHandlers",
-    value: function getKeyHandlers() {
-      var keyHandlers = this.props.keyHandlers;
-      return this.getCachedKeyHandlers(keyHandlers);
-    }
-  }, {
-    key: "getMouseHandlers",
-    value: function getMouseHandlers() {
-      var mouseHandlers = this.props.mouseHandlers;
-      return this.getCachedMouseHandlers(mouseHandlers);
-    }
-  }, {
-    key: "getModelColumn",
-    value: function getModelColumn(columnIndex) {
-      var _this$metrics2, _this$metrics2$modelC;
+  }
 
-      return (_this$metrics2 = this.metrics) === null || _this$metrics2 === void 0 ? void 0 : (_this$metrics2$modelC = _this$metrics2.modelColumns) === null || _this$metrics2$modelC === void 0 ? void 0 : _this$metrics2$modelC.get(columnIndex);
-    }
-  }, {
-    key: "getModelRow",
-    value: function getModelRow(rowIndex) {
-      var _this$metrics3, _this$metrics3$modelR;
+  initContext() {
+    var {
+      canvas
+    } = this;
+    var {
+      canvasOptions
+    } = this.props;
+    this.canvasContext = canvas.getContext('2d', canvasOptions);
+  }
 
-      return (_this$metrics3 = this.metrics) === null || _this$metrics3 === void 0 ? void 0 : (_this$metrics3$modelR = _this$metrics3.modelRows) === null || _this$metrics3$modelR === void 0 ? void 0 : _this$metrics3$modelR.get(rowIndex);
+  requestUpdateCanvas() {
+    if (this.animationFrame != null) {
+      return;
     }
-  }, {
-    key: "toggleRowExpanded",
-    value: function toggleRowExpanded(row) {
-      var metrics = this.metrics;
-      var modelRows = metrics.modelRows;
-      var modelRow = modelRows.get(row);
-      var model = this.props.model; // We only want to set expansion if the row is expandable
-      // If it's not, still move the cursor to that position, as it may be outside of the current viewport and we don't know if it's expandable yet
-
-      if (model.isRowExpandable(modelRow)) {
-        model.setRowExpanded(modelRow, !model.isRowExpanded(modelRow));
-      }
 
-      this.clearSelectedRanges();
-      this.commitSelection(); // Need to commit before moving in case we're selecting same row again
+    this.animationFrame = requestAnimationFrame(() => {
+      this.animationFrame = null;
+      this.updateCanvas(this.metrics);
+    });
+  }
 
-      this.moveCursorToPosition(0, row);
-      this.commitSelection();
-      this.isStuckToBottom = false;
-    }
-    /** Allows the selected range to be set programatically */
-
-  }, {
-    key: "setSelectedRanges",
-    value: function setSelectedRanges(gridRanges) {
-      var model = this.props.model;
-      var columnCount = model.columnCount,
-          rowCount = model.rowCount;
-      var _this$state2 = this.state,
-          cursorRow = _this$state2.cursorRow,
-          cursorColumn = _this$state2.cursorColumn,
-          selectedRanges = _this$state2.selectedRanges;
-      this.setState({
-        selectedRanges: gridRanges,
-        lastSelectedRanges: selectedRanges
-      });
+  updateCanvas() {
+    var metrics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.updateMetrics();
+    this.updateCanvasScale();
+    var {
+      onViewChanged
+    } = this.props;
+    onViewChanged(metrics);
+    this.drawCanvas(metrics);
+  }
 
-      if (gridRanges.length > 0) {
-        var range = GridRange.boundedRange(gridRanges[0], columnCount, rowCount);
-        var newCursorRow = cursorRow;
-        var newCursorColumn = cursorColumn;
+  updateCanvasScale() {
+    var {
+      canvas,
+      canvasContext
+    } = this;
+    var scale = Grid.getScale(canvasContext); // the parent wrapper has 100% width/height, and is used for determining size
+    // we don't want to stretch the canvas to 100%, to avoid fractional pixels.
+    // A wrapper element must be used for sizing, and canvas size must be
+    // set manually to a floored value in css and a scaled value in width/height
+
+    var {
+      width,
+      height
+    } = canvas.parentElement.getBoundingClientRect();
+    canvas.style.width = "".concat(Math.floor(width), "px");
+    canvas.style.height = "".concat(Math.floor(height), "px");
+    canvas.width = Math.floor(width) * scale;
+    canvas.height = Math.floor(height) * scale;
+    canvasContext.scale(scale, scale);
+  }
 
-        if (!range.containsCell(cursorColumn, cursorRow)) {
-          var _range$startCell = range.startCell();
+  updateMetrics() {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
+    this.prevMetrics = this.metrics;
+    var {
+      metricCalculator
+    } = this;
+    var metricState = this.getMetricState(state);
+    this.metrics = metricCalculator.getMetrics(metricState);
+    return this.metrics;
+  }
 
-          newCursorRow = _range$startCell.row;
-          newCursorColumn = _range$startCell.column;
-        }
+  checkSelectionChange(prevState) {
+    var {
+      selectedRanges: oldSelectedRanges
+    } = prevState;
+    var {
+      selectedRanges
+    } = this.state;
+
+    if (selectedRanges !== oldSelectedRanges) {
+      var {
+        onSelectionChanged
+      } = this.props;
+      onSelectionChanged(selectedRanges);
+    }
+  }
 
+  validateSelection() {
+    var {
+      model
+    } = this.props;
+    var {
+      selectedRanges
+    } = this.state;
+    var {
+      columnCount,
+      rowCount
+    } = model;
+
+    for (var i = 0; i < selectedRanges.length; i += 1) {
+      var range = selectedRanges[i];
+
+      if (range.endColumn != null && range.endColumn >= columnCount || range.endRow != null && range.endRow >= rowCount) {
+        // Just clear the selection rather than trying to trim it.
         this.setState({
-          selectionStartColumn: range.startColumn,
-          selectionStartRow: range.startRow,
-          selectionEndColumn: range.endColumn,
-          selectionEndRow: range.endRow,
-          cursorColumn: newCursorColumn,
-          cursorRow: newCursorRow
+          selectedRanges: [],
+          lastSelectedRanges: []
         });
+        return false;
       }
     }
-  }, {
-    key: "initContext",
-    value: function initContext() {
-      var canvas = this.canvas;
-      var canvasOptions = this.props.canvasOptions;
-      this.canvasContext = canvas.getContext('2d', canvasOptions);
-    }
-  }, {
-    key: "requestUpdateCanvas",
-    value: function requestUpdateCanvas() {
-      var _this2 = this;
 
-      if (this.animationFrame != null) {
-        return;
-      }
-
-      this.animationFrame = requestAnimationFrame(function () {
-        _this2.animationFrame = null;
+    return true;
+  }
 
-        _this2.updateCanvas(_this2.metrics);
-      });
-    }
-  }, {
-    key: "updateCanvas",
-    value: function updateCanvas() {
-      var metrics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.updateMetrics();
-      this.updateCanvasScale();
-      var onViewChanged = this.props.onViewChanged;
-      onViewChanged(metrics);
-      this.drawCanvas(metrics);
-    }
-  }, {
-    key: "updateCanvasScale",
-    value: function updateCanvasScale() {
-      var canvas = this.canvas,
-          canvasContext = this.canvasContext;
-      var scale = Grid.getScale(canvasContext); // the parent wrapper has 100% width/height, and is used for determining size
-      // we don't want to stretch the canvas to 100%, to avoid fractional pixels.
-      // A wrapper element must be used for sizing, and canvas size must be
-      // set manually to a floored value in css and a scaled value in width/height
-
-      var _canvas$parentElement = canvas.parentElement.getBoundingClientRect(),
-          width = _canvas$parentElement.width,
-          height = _canvas$parentElement.height;
-
-      canvas.style.width = "".concat(Math.floor(width), "px");
-      canvas.style.height = "".concat(Math.floor(height), "px");
-      canvas.width = Math.floor(width) * scale;
-      canvas.height = Math.floor(height) * scale;
-      canvasContext.scale(scale, scale);
-    }
-  }, {
-    key: "updateMetrics",
-    value: function updateMetrics() {
-      var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
-      this.prevMetrics = this.metrics;
-      var metricCalculator = this.metricCalculator;
-      var metricState = this.getMetricState(state);
-      this.metrics = metricCalculator.getMetrics(metricState);
-      return this.metrics;
-    }
-  }, {
-    key: "checkSelectionChange",
-    value: function checkSelectionChange(prevState) {
-      var oldSelectedRanges = prevState.selectedRanges;
-      var selectedRanges = this.state.selectedRanges;
-
-      if (selectedRanges !== oldSelectedRanges) {
-        var onSelectionChanged = this.props.onSelectionChanged;
-        onSelectionChanged(selectedRanges);
-      }
-    }
-  }, {
-    key: "validateSelection",
-    value: function validateSelection() {
-      var model = this.props.model;
-      var selectedRanges = this.state.selectedRanges;
-      var columnCount = model.columnCount,
-          rowCount = model.rowCount;
-
-      for (var i = 0; i < selectedRanges.length; i += 1) {
-        var range = selectedRanges[i];
-
-        if (range.endColumn != null && range.endColumn >= columnCount || range.endRow != null && range.endRow >= rowCount) {
-          // Just clear the selection rather than trying to trim it.
-          this.setState({
-            selectedRanges: [],
-            lastSelectedRanges: []
-          });
-          return false;
-        }
-      }
+  clearSelectedRanges() {
+    var {
+      selectedRanges
+    } = this.state;
+    this.setState({
+      selectedRanges: [],
+      lastSelectedRanges: selectedRanges
+    });
+  }
+  /** Clears all but the last selected range */
 
-      return true;
-    }
-  }, {
-    key: "clearSelectedRanges",
-    value: function clearSelectedRanges() {
-      var selectedRanges = this.state.selectedRanges;
-      this.setState({
-        selectedRanges: [],
-        lastSelectedRanges: selectedRanges
-      });
-    }
-    /** Clears all but the last selected range */
 
-  }, {
-    key: "trimSelectedRanges",
-    value: function trimSelectedRanges() {
-      var selectedRanges = this.state.selectedRanges;
+  trimSelectedRanges() {
+    var {
+      selectedRanges
+    } = this.state;
 
-      if (selectedRanges.length > 0) {
-        this.setState({
-          selectedRanges: selectedRanges.slice(selectedRanges.length - 1)
-        });
-      }
-    }
-  }, {
-    key: "beginSelection",
-    value: function beginSelection(column, row) {
+    if (selectedRanges.length > 0) {
       this.setState({
-        selectionStartColumn: column,
-        selectionStartRow: row,
-        selectionEndColumn: column,
-        selectionEndRow: row,
-        cursorColumn: column,
-        cursorRow: row
+        selectedRanges: selectedRanges.slice(selectedRanges.length - 1)
       });
     }
-    /**
-     * Moves the selection to the cell specified
-     * @param {number} column The column index to move the cursor to
-     * @param {number} row The row index to move the cursor to
-     * @param {boolean} extendSelection Whether to extend the current selection (eg. holding Shift)
-     * @param {boolean} maximizePreviousRange When true, maximize/add to the previous range only, ignoring where the selection was started.
-     */
+  }
 
-  }, {
-    key: "moveSelection",
-    value: function moveSelection(column, row) {
-      var _this3 = this;
-
-      var extendSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var maximizePreviousRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-      this.setState(function (state) {
-        var selectedRanges = state.selectedRanges,
-            selectionStartRow = state.selectionStartRow,
-            selectionStartColumn = state.selectionStartColumn;
-        var theme = _this3.props.theme;
-        var autoSelectRow = theme.autoSelectRow,
-            autoSelectColumn = theme.autoSelectColumn;
-
-        if (extendSelection && selectedRanges.length > 0) {
-          var lastSelectedRange = selectedRanges[selectedRanges.length - 1];
-          var left = null;
-          var top = null;
-          var right = null;
-          var bottom = null;
-
-          if (maximizePreviousRange) {
-            left = autoSelectRow ? null : Math.min(column, lastSelectedRange.startColumn);
-            top = autoSelectColumn ? null : Math.min(row, lastSelectedRange.startRow);
-            right = autoSelectRow ? null : Math.max(column, lastSelectedRange.endColumn);
-            bottom = autoSelectColumn ? null : Math.max(row, lastSelectedRange.endRow);
-          } else {
-            left = lastSelectedRange.startColumn;
-            top = lastSelectedRange.startRow;
-
-            if (selectionStartColumn != null || selectionStartRow != null) {
-              if (!autoSelectRow) {
-                left = selectionStartColumn;
-              }
-
-              if (!autoSelectColumn) {
-                top = selectionStartRow;
-              }
+  beginSelection(column, row) {
+    this.setState({
+      selectionStartColumn: column,
+      selectionStartRow: row,
+      selectionEndColumn: column,
+      selectionEndRow: row,
+      cursorColumn: column,
+      cursorRow: row
+    });
+  }
+  /**
+   * Moves the selection to the cell specified
+   * @param {number} column The column index to move the cursor to
+   * @param {number} row The row index to move the cursor to
+   * @param {boolean} extendSelection Whether to extend the current selection (eg. holding Shift)
+   * @param {boolean} maximizePreviousRange When true, maximize/add to the previous range only, ignoring where the selection was started.
+   */
+
+
+  moveSelection(column, row) {
+    var extendSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var maximizePreviousRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    this.setState(state => {
+      var {
+        selectedRanges,
+        selectionStartRow,
+        selectionStartColumn
+      } = state;
+      var {
+        theme
+      } = this.props;
+      var {
+        autoSelectRow,
+        autoSelectColumn
+      } = theme;
+
+      if (extendSelection && selectedRanges.length > 0) {
+        var lastSelectedRange = selectedRanges[selectedRanges.length - 1];
+        var left = null;
+        var top = null;
+        var right = null;
+        var bottom = null;
+
+        if (maximizePreviousRange) {
+          left = autoSelectRow ? null : Math.min(column, lastSelectedRange.startColumn);
+          top = autoSelectColumn ? null : Math.min(row, lastSelectedRange.startRow);
+          right = autoSelectRow ? null : Math.max(column, lastSelectedRange.endColumn);
+          bottom = autoSelectColumn ? null : Math.max(row, lastSelectedRange.endRow);
+        } else {
+          left = lastSelectedRange.startColumn;
+          top = lastSelectedRange.startRow;
+
+          if (selectionStartColumn != null || selectionStartRow != null) {
+            if (!autoSelectRow) {
+              left = selectionStartColumn;
             }
 
-            right = autoSelectRow ? null : column;
-            bottom = autoSelectColumn ? null : row;
+            if (!autoSelectColumn) {
+              top = selectionStartRow;
+            }
           }
 
-          var selectedRange = GridRange.makeNormalized(left, top, right, bottom);
-
-          if (lastSelectedRange.equals(selectedRange)) {
-            return null;
-          }
+          right = autoSelectRow ? null : column;
+          bottom = autoSelectColumn ? null : row;
+        }
 
-          var _newRanges = [].concat(selectedRanges);
+        var selectedRange = GridRange.makeNormalized(left, top, right, bottom);
 
-          _newRanges[_newRanges.length - 1] = selectedRange;
-          return {
-            selectedRanges: _newRanges,
-            selectionEndColumn: column,
-            selectionEndRow: row
-          };
+        if (lastSelectedRange.equals(selectedRange)) {
+          return null;
         }
 
-        var newRanges = [].concat(selectedRanges);
-        var selectedColumn = autoSelectRow ? null : column;
-        var selectedRow = autoSelectColumn ? null : row;
-        newRanges.push(GridRange.makeNormalized(selectedColumn, selectedRow, selectedColumn, selectedRow));
+        var _newRanges = [].concat(selectedRanges);
+
+        _newRanges[_newRanges.length - 1] = selectedRange;
         return {
-          selectedRanges: newRanges,
+          selectedRanges: _newRanges,
           selectionEndColumn: column,
           selectionEndRow: row
         };
-      });
-    }
-    /**
-     * Commits the last selected range to the selected ranges.
-     * First checks if the last range is completely contained within another range, and if it
-     * is then it blows those ranges apart.
-     * Then it consolidates all the selected ranges, reducing them.
-     */
+      }
 
-  }, {
-    key: "commitSelection",
-    value: function commitSelection() {
-      var _this4 = this;
-
-      this.setState(function (state) {
-        var theme = _this4.props.theme;
-        var autoSelectRow = theme.autoSelectRow;
-        var selectedRanges = state.selectedRanges,
-            lastSelectedRanges = state.lastSelectedRanges,
-            cursorRow = state.cursorRow,
-            cursorColumn = state.cursorColumn;
-
-        if (selectedRanges.length === 1 && (autoSelectRow ? GridRange.rowCount(selectedRanges) === 1 : GridRange.cellCount(selectedRanges) === 1) && GridRange.rangeArraysEqual(selectedRanges, lastSelectedRanges)) {
-          // If it's the exact same single selection, then deselect.
-          // For if we click on one cell multiple times.
-          return {
-            selectedRanges: [],
-            lastSelectedRanges: []
-          };
-        }
+      var newRanges = [].concat(selectedRanges);
+      var selectedColumn = autoSelectRow ? null : column;
+      var selectedRow = autoSelectColumn ? null : row;
+      newRanges.push(GridRange.makeNormalized(selectedColumn, selectedRow, selectedColumn, selectedRow));
+      return {
+        selectedRanges: newRanges,
+        selectionEndColumn: column,
+        selectionEndRow: row
+      };
+    });
+  }
+  /**
+   * Commits the last selected range to the selected ranges.
+   * First checks if the last range is completely contained within another range, and if it
+   * is then it blows those ranges apart.
+   * Then it consolidates all the selected ranges, reducing them.
+   */
+
+
+  commitSelection() {
+    this.setState(state => {
+      var {
+        theme
+      } = this.props;
+      var {
+        autoSelectRow
+      } = theme;
+      var {
+        selectedRanges,
+        lastSelectedRanges,
+        cursorRow,
+        cursorColumn
+      } = state;
+
+      if (selectedRanges.length === 1 && (autoSelectRow ? GridRange.rowCount(selectedRanges) === 1 : GridRange.cellCount(selectedRanges) === 1) && GridRange.rangeArraysEqual(selectedRanges, lastSelectedRanges)) {
+        // If it's the exact same single selection, then deselect.
+        // For if we click on one cell multiple times.
+        return {
+          selectedRanges: [],
+          lastSelectedRanges: []
+        };
+      }
 
-        var newSelectedRanges = selectedRanges.slice();
+      var newSelectedRanges = selectedRanges.slice();
 
-        if (newSelectedRanges.length > 1) {
-          // Check if the latest selection is entirely within a previously selected range
-          // If that's the case, then deselect that section instead
-          var lastRange = newSelectedRanges[newSelectedRanges.length - 1];
+      if (newSelectedRanges.length > 1) {
+        // Check if the latest selection is entirely within a previously selected range
+        // If that's the case, then deselect that section instead
+        var lastRange = newSelectedRanges[newSelectedRanges.length - 1];
 
-          for (var i = 0; i < newSelectedRanges.length - 1; i += 1) {
-            var selectedRange = newSelectedRanges[i];
+        for (var i = 0; i < newSelectedRanges.length - 1; i += 1) {
+          var selectedRange = newSelectedRanges[i];
 
-            if (selectedRange.contains(lastRange)) {
-              // We found a match, now remove the two matching ranges, and add back
-              // the remainder of the two
-              var remainder = selectedRange.subtract(lastRange);
-              newSelectedRanges.pop();
-              newSelectedRanges.splice(i, 1);
-              newSelectedRanges = newSelectedRanges.concat(remainder);
-              break;
-            }
+          if (selectedRange.contains(lastRange)) {
+            // We found a match, now remove the two matching ranges, and add back
+            // the remainder of the two
+            var remainder = selectedRange.subtract(lastRange);
+            newSelectedRanges.pop();
+            newSelectedRanges.splice(i, 1);
+            newSelectedRanges = newSelectedRanges.concat(remainder);
+            break;
           }
-
-          newSelectedRanges = GridRange.consolidate(newSelectedRanges);
         }
 
-        var newCursorColumn = cursorColumn;
-        var newCursorRow = cursorRow;
-
-        if (!GridRange.containsCell(newSelectedRanges, cursorColumn, cursorRow)) {
-          var model = _this4.props.model;
-          var columnCount = model.columnCount,
-              rowCount = model.rowCount;
-          var nextCursor = GridRange.nextCell(GridRange.boundedRanges(selectedRanges, columnCount, rowCount));
-
-          if (nextCursor != null) {
-            newCursorColumn = nextCursor.column;
-            newCursorRow = nextCursor.row;
-          } else {
-            newCursorColumn = null;
-            newCursorRow = null;
-          }
+        newSelectedRanges = GridRange.consolidate(newSelectedRanges);
+      }
+
+      var newCursorColumn = cursorColumn;
+      var newCursorRow = cursorRow;
+
+      if (!GridRange.containsCell(newSelectedRanges, cursorColumn, cursorRow)) {
+        var {
+          model
+        } = this.props;
+        var {
+          columnCount,
+          rowCount
+        } = model;
+        var nextCursor = GridRange.nextCell(GridRange.boundedRanges(selectedRanges, columnCount, rowCount));
+
+        if (nextCursor != null) {
+          ({
+            column: newCursorColumn,
+            row: newCursorRow
+          } = nextCursor);
+        } else {
+          newCursorColumn = null;
+          newCursorRow = null;
         }
+      }
 
-        return {
-          cursorRow: newCursorRow,
-          cursorColumn: newCursorColumn,
-          selectedRanges: newSelectedRanges,
-          lastSelectedRanges: selectedRanges
-        };
-      });
-    }
-  }, {
-    key: "selectAll",
-    value: function selectAll() {
-      var _this$props3 = this.props,
-          model = _this$props3.model,
-          theme = _this$props3.theme;
-      var autoSelectRow = theme.autoSelectRow,
-          autoSelectColumn = theme.autoSelectColumn;
-      var top = autoSelectColumn ? null : 0;
-      var bottom = autoSelectColumn ? null : model.rowCount - 1;
-      var left = autoSelectRow ? null : 0;
-      var right = autoSelectRow ? null : model.columnCount - 1;
-      this.setSelectedRanges([new GridRange(left, top, right, bottom)]);
+      return {
+        cursorRow: newCursorRow,
+        cursorColumn: newCursorColumn,
+        selectedRanges: newSelectedRanges,
+        lastSelectedRanges: selectedRanges
+      };
+    });
+  }
+
+  selectAll() {
+    var {
+      model,
+      theme
+    } = this.props;
+    var {
+      autoSelectRow,
+      autoSelectColumn
+    } = theme;
+    var top = autoSelectColumn ? null : 0;
+    var bottom = autoSelectColumn ? null : model.rowCount - 1;
+    var left = autoSelectRow ? null : 0;
+    var right = autoSelectRow ? null : model.columnCount - 1;
+    this.setSelectedRanges([new GridRange(left, top, right, bottom)]);
+  }
+
+  moveCursor(deltaColumn, deltaRow, extendSelection) {
+    var {
+      cursorRow,
+      cursorColumn,
+      selectionEndColumn,
+      selectionEndRow
+    } = this.state;
+    var column = extendSelection ? selectionEndColumn : cursorColumn;
+    var row = extendSelection ? selectionEndRow : cursorRow;
+
+    if (row === null || column === null) {
+      var {
+        left,
+        top
+      } = this.state;
+      this.moveCursorToPosition(left, top, extendSelection);
+    } else {
+      var {
+        model
+      } = this.props;
+      var {
+        columnCount,
+        rowCount
+      } = model;
+
+      var _left = clamp(column + deltaColumn, 0, columnCount - 1);
+
+      var _top = clamp(row + deltaRow, 0, rowCount - 1);
+
+      this.moveCursorToPosition(_left, _top, extendSelection);
     }
-  }, {
-    key: "moveCursor",
-    value: function moveCursor(deltaColumn, deltaRow, extendSelection) {
-      var _this$state3 = this.state,
-          cursorRow = _this$state3.cursorRow,
-          cursorColumn = _this$state3.cursorColumn,
-          selectionEndColumn = _this$state3.selectionEndColumn,
-          selectionEndRow = _this$state3.selectionEndRow;
-      var column = extendSelection ? selectionEndColumn : cursorColumn;
-      var row = extendSelection ? selectionEndRow : cursorRow;
-
-      if (row === null || column === null) {
-        var _this$state4 = this.state,
-            left = _this$state4.left,
-            top = _this$state4.top;
-        this.moveCursorToPosition(left, top, extendSelection);
-      } else {
-        var model = this.props.model;
-        var columnCount = model.columnCount,
-            rowCount = model.rowCount;
-
-        var _left = clamp(column + deltaColumn, 0, columnCount - 1);
-
-        var _top = clamp(row + deltaRow, 0, rowCount - 1);
-
-        this.moveCursorToPosition(_left, _top, extendSelection);
-      }
+  }
+  /**
+   * Move the cursor in the provided selection direction
+   * @param {string} direction The direction to move the cursor in
+   */
+
+
+  moveCursorInDirection() {
+    var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : GridRange.SELECTION_DIRECTION.DOWN;
+    var {
+      model
+    } = this.props;
+    var {
+      columnCount,
+      rowCount
+    } = model;
+    var {
+      cursorRow,
+      cursorColumn,
+      selectedRanges
+    } = this.state;
+    var ranges = selectedRanges.length > 0 ? selectedRanges : [GridRange.makeCell(cursorColumn, cursorRow)];
+    var nextCursor = null;
+
+    if (ranges.length === 1 && GridRange.cellCount(ranges) === 1) {
+      var _gridRange$nextCell;
+
+      // If we only have one cell selected, we want to update the cursor and we want to update the selected cells
+      var gridRange = new GridRange(0, 0, columnCount - 1, rowCount - 1);
+      nextCursor = (_gridRange$nextCell = gridRange.nextCell(cursorColumn, cursorRow, direction)) !== null && _gridRange$nextCell !== void 0 ? _gridRange$nextCell : gridRange.startCell(direction);
+    } else {
+      nextCursor = GridRange.nextCell(GridRange.boundedRanges(ranges, columnCount, rowCount), cursorColumn, cursorRow, direction);
     }
-    /**
-     * Move the cursor in the provided selection direction
-     * @param {string} direction The direction to move the cursor in
-     */
 
-  }, {
-    key: "moveCursorInDirection",
-    value: function moveCursorInDirection() {
-      var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : GridRange.SELECTION_DIRECTION.DOWN;
-      var model = this.props.model;
-      var columnCount = model.columnCount,
-          rowCount = model.rowCount;
-      var _this$state5 = this.state,
-          cursorRow = _this$state5.cursorRow,
-          cursorColumn = _this$state5.cursorColumn,
-          selectedRanges = _this$state5.selectedRanges;
-      var ranges = selectedRanges.length > 0 ? selectedRanges : [GridRange.makeCell(cursorColumn, cursorRow)];
-      var nextCursor = null;
-
-      if (ranges.length === 1 && GridRange.cellCount(ranges) === 1) {
-        var _gridRange$nextCell;
-
-        // If we only have one cell selected, we want to update the cursor and we want to update the selected cells
-        var gridRange = new GridRange(0, 0, columnCount - 1, rowCount - 1);
-        nextCursor = (_gridRange$nextCell = gridRange.nextCell(cursorColumn, cursorRow, direction)) !== null && _gridRange$nextCell !== void 0 ? _gridRange$nextCell : gridRange.startCell(direction);
-      } else {
-        nextCursor = GridRange.nextCell(GridRange.boundedRanges(ranges, columnCount, rowCount), cursorColumn, cursorRow, direction);
-      }
+    if (nextCursor != null) {
+      var {
+        column,
+        row
+      } = nextCursor;
+      this.setState({
+        cursorColumn: column,
+        cursorRow: row
+      });
 
-      if (nextCursor != null) {
-        var _nextCursor = nextCursor,
-            column = _nextCursor.column,
-            row = _nextCursor.row;
+      if (!GridRange.containsCell(selectedRanges, column, row)) {
         this.setState({
-          cursorColumn: column,
-          cursorRow: row
+          selectedRanges: [GridRange.makeCell(column, row)],
+          selectionStartColumn: column,
+          selectionStartRow: row,
+          selectionEndColumn: column,
+          selectionEndRow: row
         });
+      }
 
-        if (!GridRange.containsCell(selectedRanges, column, row)) {
-          this.setState({
-            selectedRanges: [GridRange.makeCell(column, row)],
-            selectionStartColumn: column,
-            selectionStartRow: row,
-            selectionEndColumn: column,
-            selectionEndRow: row
-          });
-        }
+      this.moveViewToCell(nextCursor.column, nextCursor.row);
+    }
+  }
+  /**
+   * Move a cursor to the specified position in the grid.
+   * @param {number|null} column The column index to move the cursor to
+   * @param {number|null} row The row index to move the cursor to
+   * @param {boolean} extendSelection Whether to extend the current selection (eg. holding Shift)
+   * @param {boolean} keepCursorInView Whether to move the viewport so that the cursor is in view
+   * @param {boolean} maximizePreviousRange With this and `extendSelection` true, it will maximize/add to the previous range only, ignoring where the selection was started
+   */
+
+
+  moveCursorToPosition(column, row) {
+    var extendSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var keepCursorInView = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
+    var maximizePreviousRange = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
+
+    if (!extendSelection) {
+      this.beginSelection(column, row);
+    }
 
-        this.moveViewToCell(nextCursor.column, nextCursor.row);
+    this.moveSelection(column, row, extendSelection, maximizePreviousRange);
+
+    if (keepCursorInView) {
+      this.moveViewToCell(column, row);
+    }
+  }
+  /**
+   * Moves the view to make the specified cell visible
+   *
+   * @param {number|null} column The column index to bring into view
+   * @param {number|null} row The row index to bring into view
+   */
+
+
+  moveViewToCell(column, row) {
+    var {
+      metricCalculator
+    } = this;
+    var {
+      bottomVisible,
+      rightVisible,
+      topVisible,
+      leftVisible
+    } = this.metrics;
+    var metricState = this.getMetricState(this.state);
+    var {
+      top,
+      left,
+      topOffset,
+      leftOffset
+    } = this.state;
+
+    if (row != null && !GridUtils.isFloatingRow(row, this.metrics)) {
+      if (row < topVisible) {
+        top = metricCalculator.getTopForTopVisible(metricState, row);
+        topOffset = 0;
+      } else if (row > bottomVisible) {
+        top = metricCalculator.getTopForBottomVisible(metricState, row);
+        topOffset = 0;
       }
     }
-    /**
-     * Move a cursor to the specified position in the grid.
-     * @param {number|null} column The column index to move the cursor to
-     * @param {number|null} row The row index to move the cursor to
-     * @param {boolean} extendSelection Whether to extend the current selection (eg. holding Shift)
-     * @param {boolean} keepCursorInView Whether to move the viewport so that the cursor is in view
-     * @param {boolean} maximizePreviousRange With this and `extendSelection` true, it will maximize/add to the previous range only, ignoring where the selection was started
-     */
-
-  }, {
-    key: "moveCursorToPosition",
-    value: function moveCursorToPosition(column, row) {
-      var extendSelection = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var keepCursorInView = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
-      var maximizePreviousRange = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
 
-      if (!extendSelection) {
-        this.beginSelection(column, row);
+    if (column != null && !GridUtils.isFloatingColumn(column, this.metrics)) {
+      if (column < leftVisible) {
+        left = metricCalculator.getLeftForLeftVisible(metricState, column);
+        leftOffset = 0;
+      } else if (column > rightVisible) {
+        left = metricCalculator.getLeftForRightVisible(metricState, column);
+        leftOffset = 0;
       }
+    }
 
-      this.moveSelection(column, row, extendSelection, maximizePreviousRange);
+    this.setViewState({
+      top,
+      left,
+      topOffset,
+      leftOffset
+    });
+  }
+  /**
+   * Checks the `top` and `left` properties that are set and updates the isStuckToBottom/Right properties
+   * Should be called when user interaction occurs
+   * @param {object} viewState New state properties to set.
+   * @param {boolean} forceUpdate Whether to force an update.
+   */
+
+
+  setViewState(viewState) {
+    var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var {
+      isStickyBottom,
+      isStickyRight
+    } = this.props;
+    var {
+      top,
+      left
+    } = viewState;
+    var {
+      lastTop,
+      lastLeft
+    } = this.metrics;
+
+    if (top != null) {
+      this.isStuckToBottom = isStickyBottom && top >= lastTop;
+    }
 
-      if (keepCursorInView) {
-        this.moveViewToCell(column, row);
-      }
+    if (left != null) {
+      this.isStuckToRight = isStickyRight && left >= lastLeft;
     }
-    /**
-     * Moves the view to make the specified cell visible
-     *
-     * @param {number|null} column The column index to bring into view
-     * @param {number|null} row The row index to bring into view
-     */
 
-  }, {
-    key: "moveViewToCell",
-    value: function moveViewToCell(column, row) {
-      var metricCalculator = this.metricCalculator;
-      var _this$metrics4 = this.metrics,
-          bottomVisible = _this$metrics4.bottomVisible,
-          rightVisible = _this$metrics4.rightVisible,
-          topVisible = _this$metrics4.topVisible,
-          leftVisible = _this$metrics4.leftVisible;
-      var metricState = this.getMetricState(this.state);
-      var _this$state6 = this.state,
-          top = _this$state6.top,
-          left = _this$state6.left,
-          topOffset = _this$state6.topOffset,
-          leftOffset = _this$state6.leftOffset;
-
-      if (row != null && !GridUtils.isFloatingRow(row, this.metrics)) {
-        if (row < topVisible) {
-          top = metricCalculator.getTopForTopVisible(metricState, row);
-          topOffset = 0;
-        } else if (row > bottomVisible) {
-          top = metricCalculator.getTopForBottomVisible(metricState, row);
-          topOffset = 0;
+    this.setState(viewState);
+
+    if (forceUpdate) {
+      this.forceUpdate();
+    }
+  }
+  /**
+   * Start editing the data at the given index
+   *
+   * @param {number} column The visible column index to start editing
+   * @param {number} row The visible row index to start editing
+   * @param {boolean} isQuickEdit If this is a quick edit (the arrow keys can commit)
+   * @param {number[]|null} selectionRange The tuple [start,end] text selection range of the value to select when editing
+   * @param {string?} value The value to start with in the edit field. Leave undefined to use the current value.
+   */
+
+
+  startEditing(column, row) {
+    var isQuickEdit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
+    var selectionRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+    var value = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
+    var {
+      model
+    } = this.props;
+    var modelColumn = this.getModelColumn(column);
+    var modelRow = this.getModelRow(row);
+    var cell = {
+      column,
+      row,
+      selectionRange,
+      value: value !== undefined ? value : model.editValueForCell(modelColumn, modelRow),
+      isQuickEdit
+    };
+    this.setState({
+      editingCell: cell,
+      cursorColumn: column,
+      cursorRow: row
+    });
+    this.moveViewToCell(column, row);
+  }
+
+  isValidForCell(column, row, value) {
+    var {
+      model
+    } = this.props;
+    var modelColumn = this.getModelColumn(column);
+    var modelRow = this.getModelRow(row);
+    return model.isValidForCell(modelColumn, modelRow, value);
+  }
+  /**
+   * Paste a value with the current selection
+   * It first needs to validate that the pasted table is valid for the given selection.
+   * Also may update selection if single cells are selected and a table is pasted.
+   * @param {string[][] | string} value Table or a string that is being pasted
+   */
+
+
+  pasteValue(value) {
+    var _this = this;
+
+    return _asyncToGenerator(function* () {
+      var {
+        model
+      } = _this.props;
+      var {
+        movedColumns,
+        movedRows,
+        selectedRanges
+      } = _this.state;
+
+      try {
+        if (!model.isEditable || !selectedRanges.every(range => model.isEditableRange(range))) {
+          throw new PasteError("Can't paste in to read-only area.");
         }
-      }
 
-      if (column != null && !GridUtils.isFloatingColumn(column, this.metrics)) {
-        if (column < leftVisible) {
-          left = metricCalculator.getLeftForLeftVisible(metricState, column);
-          leftOffset = 0;
-        } else if (column > rightVisible) {
-          left = metricCalculator.getLeftForRightVisible(metricState, column);
-          leftOffset = 0;
+        if (selectedRanges.length <= 0) {
+          throw new PasteError('Select an area to paste to.');
         }
-      }
 
-      this.setViewState({
-        top: top,
-        left: left,
-        topOffset: topOffset,
-        leftOffset: leftOffset
-      });
-    }
-    /**
-     * Checks the `top` and `left` properties that are set and updates the isStuckToBottom/Right properties
-     * Should be called when user interaction occurs
-     * @param {object} viewState New state properties to set.
-     * @param {boolean} forceUpdate Whether to force an update.
-     */
+        if (typeof value === 'string') {
+          // Just paste the value into all the selected cells
+          var _edits = [];
+          var modelRanges = GridUtils.getModelRanges(selectedRanges, movedColumns, movedRows);
+          GridRange.forEachCell(modelRanges, (x, y) => {
+            _edits.push({
+              x,
+              y,
+              text: value
+            });
+          });
+          yield model.setValues(_edits);
+          return;
+        } // Otherwise it's a table of data
 
-  }, {
-    key: "setViewState",
-    value: function setViewState(viewState) {
-      var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
-      var _this$props4 = this.props,
-          isStickyBottom = _this$props4.isStickyBottom,
-          isStickyRight = _this$props4.isStickyRight;
-      var top = viewState.top,
-          left = viewState.left;
-      var _this$metrics5 = this.metrics,
-          lastTop = _this$metrics5.lastTop,
-          lastLeft = _this$metrics5.lastLeft;
-
-      if (top != null) {
-        this.isStuckToBottom = isStickyBottom && top >= lastTop;
-      }
 
-      if (left != null) {
-        this.isStuckToRight = isStickyRight && left >= lastLeft;
-      }
+        var tableHeight = value.length;
+        var tableWidth = value[0].length;
+        var {
+          columnCount,
+          rowCount
+        } = model;
+        var ranges = selectedRanges; // If each cell is a single selection, we need to update the selection to map to the newly pasted data
 
-      this.setState(viewState);
+        if (ranges.every(range => GridRange.cellCount([range]) === 1 && range.startColumn + tableWidth <= columnCount && range.startRow + tableHeight <= rowCount)) {
+          // Remap the selected ranges
+          ranges = ranges.map(range => new GridRange(range.startColumn, range.startRow, range.startColumn + tableWidth - 1, range.startRow + tableHeight - 1));
 
-      if (forceUpdate) {
-        this.forceUpdate();
-      }
-    }
-    /**
-     * Start editing the data at the given index
-     *
-     * @param {number} column The visible column index to start editing
-     * @param {number} row The visible row index to start editing
-     * @param {boolean} isQuickEdit If this is a quick edit (the arrow keys can commit)
-     * @param {number[]|null} selectionRange The tuple [start,end] text selection range of the value to select when editing
-     * @param {string?} value The value to start with in the edit field. Leave undefined to use the current value.
-     */
+          _this.setSelectedRanges(ranges);
+        }
 
-  }, {
-    key: "startEditing",
-    value: function startEditing(column, row) {
-      var isQuickEdit = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
-      var selectionRange = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
-      var value = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : undefined;
-      var model = this.props.model;
-      var modelColumn = this.getModelColumn(column);
-      var modelRow = this.getModelRow(row);
-      var cell = {
-        column: column,
-        row: row,
-        selectionRange: selectionRange,
-        value: value !== undefined ? value : model.editValueForCell(modelColumn, modelRow),
-        isQuickEdit: isQuickEdit
-      };
-      this.setState({
-        editingCell: cell,
-        cursorColumn: column,
-        cursorRow: row
-      });
-      this.moveViewToCell(column, row);
-    }
-  }, {
-    key: "isValidForCell",
-    value: function isValidForCell(column, row, value) {
-      var model = this.props.model;
-      var modelColumn = this.getModelColumn(column);
-      var modelRow = this.getModelRow(row);
-      return model.isValidForCell(modelColumn, modelRow, value);
-    }
-    /**
-     * Paste a value with the current selection
-     * It first needs to validate that the pasted table is valid for the given selection.
-     * Also may update selection if single cells are selected and a table is pasted.
-     * @param {string[][] | string} value Table or a string that is being pasted
-     */
+        if (!ranges.every(range => GridRange.rowCount([range]) === tableHeight && GridRange.columnCount([range]) === tableWidth)) {
+          throw new PasteError('Copy and paste area are not same size.');
+        }
 
-  }, {
-    key: "pasteValue",
-    value: function () {
-      var _pasteValue = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(value) {
-        var model, _this$state7, movedColumns, movedRows, selectedRanges, _edits, modelRanges, tableHeight, tableWidth, columnCount, rowCount, ranges, edits, onError;
-
-        return regeneratorRuntime.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                model = this.props.model;
-                _this$state7 = this.state, movedColumns = _this$state7.movedColumns, movedRows = _this$state7.movedRows, selectedRanges = _this$state7.selectedRanges;
-                _context.prev = 2;
-
-                if (!(!model.isEditable || !selectedRanges.every(function (range) {
-                  return model.isEditableRange(range);
-                }))) {
-                  _context.next = 5;
-                  break;
-                }
-
-                throw new PasteError("Can't paste in to read-only area.");
-
-              case 5:
-                if (!(selectedRanges.length <= 0)) {
-                  _context.next = 7;
-                  break;
-                }
-
-                throw new PasteError('Select an area to paste to.');
-
-              case 7:
-                if (!(typeof value === 'string')) {
-                  _context.next = 14;
-                  break;
-                }
-
-                // Just paste the value into all the selected cells
-                _edits = [];
-                modelRanges = GridUtils.getModelRanges(selectedRanges, movedColumns, movedRows);
-                GridRange.forEachCell(modelRanges, function (x, y) {
-                  _edits.push({
-                    x: x,
-                    y: y,
-                    text: value
-                  });
-                });
-                _context.next = 13;
-                return model.setValues(_edits);
-
-              case 13:
-                return _context.abrupt("return");
-
-              case 14:
-                // Otherwise it's a table of data
-                tableHeight = value.length;
-                tableWidth = value[0].length;
-                columnCount = model.columnCount, rowCount = model.rowCount;
-                ranges = selectedRanges; // If each cell is a single selection, we need to update the selection to map to the newly pasted data
-
-                if (ranges.every(function (range) {
-                  return GridRange.cellCount([range]) === 1 && range.startColumn + tableWidth <= columnCount && range.startRow + tableHeight <= rowCount;
-                })) {
-                  // Remap the selected ranges
-                  ranges = ranges.map(function (range) {
-                    return new GridRange(range.startColumn, range.startRow, range.startColumn + tableWidth - 1, range.startRow + tableHeight - 1);
-                  });
-                  this.setSelectedRanges(ranges);
-                }
-
-                if (ranges.every(function (range) {
-                  return GridRange.rowCount([range]) === tableHeight && GridRange.columnCount([range]) === tableWidth;
-                })) {
-                  _context.next = 21;
-                  break;
-                }
-
-                throw new PasteError('Copy and paste area are not same size.');
-
-              case 21:
-                edits = [];
-                ranges.forEach(function (range) {
-                  for (var x = 0; x < tableWidth; x += 1) {
-                    for (var y = 0; y < tableHeight; y += 1) {
-                      edits.push({
-                        x: range.startColumn + x,
-                        y: range.startRow + y,
-                        text: value[y][x]
-                      });
-                    }
-                  }
-                });
-                _context.next = 25;
-                return model.setValues(edits);
-
-              case 25:
-                _context.next = 31;
-                break;
-
-              case 27:
-                _context.prev = 27;
-                _context.t0 = _context["catch"](2);
-                onError = this.props.onError;
-                onError(_context.t0);
-
-              case 31:
-              case "end":
-                return _context.stop();
+        var edits = [];
+        ranges.forEach(range => {
+          for (var x = 0; x < tableWidth; x += 1) {
+            for (var y = 0; y < tableHeight; y += 1) {
+              edits.push({
+                x: range.startColumn + x,
+                y: range.startRow + y,
+                text: value[y][x]
+              });
             }
           }
-        }, _callee, this, [[2, 27]]);
-      }));
-
-      function pasteValue(_x) {
-        return _pasteValue.apply(this, arguments);
+        });
+        yield model.setValues(edits);
+      } catch (e) {
+        var {
+          onError
+        } = _this.props;
+        onError(e);
       }
+    })();
+  }
 
-      return pasteValue;
-    }()
-  }, {
-    key: "setValueForCell",
-    value: function setValueForCell(column, row, value) {
-      var model = this.props.model;
-      var modelColumn = this.getModelColumn(column);
-      var modelRow = this.getModelRow(row);
-
-      if (model.isValidForCell(modelColumn, modelRow, value)) {
-        model.setValueForCell(modelColumn, modelRow, value);
-      }
-    }
-  }, {
-    key: "setValueForRanges",
-    value: function setValueForRanges(ranges, value) {
-      var model = this.props.model;
-      var _this$state8 = this.state,
-          movedColumns = _this$state8.movedColumns,
-          movedRows = _this$state8.movedRows;
-      var modelRanges = GridUtils.getModelRanges(ranges, movedColumns, movedRows);
-      model.setValueForRanges(modelRanges, value);
-    }
-  }, {
-    key: "isSelected",
-    value: function isSelected(row, column) {
-      var selectedRanges = this.state.selectedRanges;
-
-      for (var i = 0; i < selectedRanges.length; i += 1) {
-        var selectedRange = selectedRanges[i];
-        var rowSelected = selectedRange.startRow === null || selectedRange.startRow <= row && row <= selectedRange.endRow;
-        var columnSelected = selectedRange.startColumn === null || selectedRange.startColumn <= column && column <= selectedRange.endColumn;
-
-        if (rowSelected && columnSelected) {
-          return true;
-        }
-      }
+  setValueForCell(column, row, value) {
+    var {
+      model
+    } = this.props;
+    var modelColumn = this.getModelColumn(column);
+    var modelRow = this.getModelRow(row);
 
-      return false;
-    }
-  }, {
-    key: "addDocumentCursor",
-    value: function addDocumentCursor() {
-      var cursor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
-      if (this.documentCursor === Grid.getCursorClassName(cursor)) return;
-      document.documentElement.classList.remove(this.documentCursor);
-      this.documentCursor = Grid.getCursorClassName(cursor);
-      document.documentElement.classList.add(this.documentCursor);
-      document.documentElement.classList.add('grid-block-events');
-    }
-  }, {
-    key: "removeDocumentCursor",
-    value: function removeDocumentCursor() {
-      if (this.documentCursor) {
-        document.documentElement.classList.remove(this.documentCursor);
-        document.documentElement.classList.remove('grid-block-events');
-        this.documentCursor = null;
-      }
+    if (model.isValidForCell(modelColumn, modelRow, value)) {
+      model.setValueForCell(modelColumn, modelRow, value);
     }
-  }, {
-    key: "startDragTimer",
-    value: function startDragTimer(event) {
-      var _this5 = this;
-
-      this.stopDragTimer();
-      var mouseEvent = new MouseEvent('custom', event);
-      this.dragTimer = setTimeout(function () {
-        _this5.handleMouseDrag(mouseEvent);
-      }, Grid.dragTimeout);
-    }
-  }, {
-    key: "stopDragTimer",
-    value: function stopDragTimer() {
-      if (this.dragTimer) {
-        clearTimeout(this.dragTimer);
-        this.dragTimer = null;
+  }
+
+  setValueForRanges(ranges, value) {
+    var {
+      model
+    } = this.props;
+    var {
+      movedColumns,
+      movedRows
+    } = this.state;
+    var modelRanges = GridUtils.getModelRanges(ranges, movedColumns, movedRows);
+    model.setValueForRanges(modelRanges, value);
+  }
+
+  isSelected(row, column) {
+    var {
+      selectedRanges
+    } = this.state;
+
+    for (var i = 0; i < selectedRanges.length; i += 1) {
+      var selectedRange = selectedRanges[i];
+      var rowSelected = selectedRange.startRow === null || selectedRange.startRow <= row && row <= selectedRange.endRow;
+      var columnSelected = selectedRange.startColumn === null || selectedRange.startColumn <= column && column <= selectedRange.endColumn;
+
+      if (rowSelected && columnSelected) {
+        return true;
       }
     }
-    /**
-     * When scrolling you've have to re-draw the whole canvas. As a consequence, all these drawing methods
-     * must be very quick.
-     */
 
-  }, {
-    key: "drawCanvas",
-    value: function drawCanvas() {
-      var metrics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.updateMetrics();
-      var _this$state9 = this.state,
-          left = _this$state9.left,
-          top = _this$state9.top,
-          cursorColumn = _this$state9.cursorColumn,
-          cursorRow = _this$state9.cursorRow,
-          draggingColumn = _this$state9.draggingColumn,
-          draggingColumnOffset = _this$state9.draggingColumnOffset,
-          draggingColumnSeparator = _this$state9.draggingColumnSeparator,
-          draggingRow = _this$state9.draggingRow,
-          draggingRowOffset = _this$state9.draggingRowOffset,
-          draggingRowSeparator = _this$state9.draggingRowSeparator,
-          editingCell = _this$state9.editingCell,
-          isDraggingHorizontalScrollBar = _this$state9.isDraggingHorizontalScrollBar,
-          isDraggingVerticalScrollBar = _this$state9.isDraggingVerticalScrollBar,
-          isDragging = _this$state9.isDragging,
-          mouseX = _this$state9.mouseX,
-          mouseY = _this$state9.mouseY,
-          selectedRanges = _this$state9.selectedRanges;
-      var _this$props5 = this.props,
-          model = _this$props5.model,
-          stateOverride = _this$props5.stateOverride;
-      var renderer = this.renderer;
-      var context = this.canvasContext;
-      var theme = this.getTheme();
-      var width = this.canvas.clientWidth;
-      var height = this.canvas.clientHeight;
-
-      var renderState = _objectSpread({
-        left: left,
-        top: top,
-        width: width,
-        height: height,
-        context: context,
-        theme: theme,
-        model: model,
-        metrics: metrics,
-        mouseX: mouseX,
-        mouseY: mouseY,
-        selectedRanges: selectedRanges,
-        draggingColumn: draggingColumn,
-        draggingColumnOffset: draggingColumnOffset,
-        draggingColumnSeparator: draggingColumnSeparator,
-        draggingRow: draggingRow,
-        draggingRowOffset: draggingRowOffset,
-        draggingRowSeparator: draggingRowSeparator,
-        editingCell: editingCell,
-        isDraggingHorizontalScrollBar: isDraggingHorizontalScrollBar,
-        isDraggingVerticalScrollBar: isDraggingVerticalScrollBar,
-        isDragging: isDragging,
-        cursorColumn: cursorColumn,
-        cursorRow: cursorRow
-      }, stateOverride);
-
-      context.save();
-      renderer.drawCanvas(renderState);
-      context.restore();
-    }
-  }, {
-    key: "focus",
-    value: function focus() {
-      this.canvas.focus();
-    }
-  }, {
-    key: "isFocused",
-    value: function isFocused() {
-      return document.activeElement === this.canvas;
-    }
-  }, {
-    key: "handleClick",
-    value: function handleClick(event) {
-      var gridPoint = this.getGridPointFromEvent(event);
-      var mouseHandlers = this.getMouseHandlers();
-
-      for (var i = 0; i < mouseHandlers.length; i += 1) {
-        var mouseHandler = mouseHandlers[i];
-
-        if (mouseHandler.onClick(gridPoint, this, event)) {
-          event.stopPropagation();
-          event.preventDefault();
-          break;
-        }
-      }
+    return false;
+  }
 
-      this.canvas.focus();
+  addDocumentCursor() {
+    var cursor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (this.documentCursor === Grid.getCursorClassName(cursor)) return;
+    document.documentElement.classList.remove(this.documentCursor);
+    this.documentCursor = Grid.getCursorClassName(cursor);
+    document.documentElement.classList.add(this.documentCursor);
+    document.documentElement.classList.add('grid-block-events');
+  }
+
+  removeDocumentCursor() {
+    if (this.documentCursor) {
+      document.documentElement.classList.remove(this.documentCursor);
+      document.documentElement.classList.remove('grid-block-events');
+      this.documentCursor = null;
     }
-  }, {
-    key: "handleContextMenu",
-    value: function handleContextMenu(event) {
-      var gridPoint = this.getGridPointFromEvent(event);
-      var mouseHandlers = this.getMouseHandlers();
-
-      for (var i = 0; i < mouseHandlers.length; i += 1) {
-        var mouseHandler = mouseHandlers[i];
-
-        if (mouseHandler.onContextMenu(gridPoint, this, event)) {
-          event.stopPropagation();
-          event.preventDefault();
-          break;
-        }
-      }
+  }
+
+  startDragTimer(event) {
+    this.stopDragTimer();
+    var mouseEvent = new MouseEvent('custom', event);
+    this.dragTimer = setTimeout(() => {
+      this.handleMouseDrag(mouseEvent);
+    }, Grid.dragTimeout);
+  }
+
+  stopDragTimer() {
+    if (this.dragTimer) {
+      clearTimeout(this.dragTimer);
+      this.dragTimer = null;
     }
-  }, {
-    key: "handleKeyDown",
-    value: function handleKeyDown(e) {
-      var keyHandlers = this.getKeyHandlers();
+  }
+  /**
+   * When scrolling you've have to re-draw the whole canvas. As a consequence, all these drawing methods
+   * must be very quick.
+   */
+
+
+  drawCanvas() {
+    var metrics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.updateMetrics();
+    var {
+      left,
+      top,
+      cursorColumn,
+      cursorRow,
+      draggingColumn,
+      draggingColumnOffset,
+      draggingColumnSeparator,
+      draggingRow,
+      draggingRowOffset,
+      draggingRowSeparator,
+      editingCell,
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar,
+      isDragging,
+      mouseX,
+      mouseY,
+      selectedRanges
+    } = this.state;
+    var {
+      model,
+      stateOverride
+    } = this.props;
+    var {
+      renderer
+    } = this;
+    var context = this.canvasContext;
+    var theme = this.getTheme();
+    var width = this.canvas.clientWidth;
+    var height = this.canvas.clientHeight;
+
+    var renderState = _objectSpread({
+      left,
+      top,
+      width,
+      height,
+      context,
+      theme,
+      model,
+      metrics,
+      mouseX,
+      mouseY,
+      selectedRanges,
+      draggingColumn,
+      draggingColumnOffset,
+      draggingColumnSeparator,
+      draggingRow,
+      draggingRowOffset,
+      draggingRowSeparator,
+      editingCell,
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar,
+      isDragging,
+      cursorColumn,
+      cursorRow
+    }, stateOverride);
+
+    context.save();
+    renderer.drawCanvas(renderState);
+    context.restore();
+  }
 
-      for (var i = 0; i < keyHandlers.length; i += 1) {
-        var keyHandler = keyHandlers[i];
-        var result = keyHandler.onDown(e, this);
+  focus() {
+    this.canvas.focus();
+  }
 
-        if (result) {
-          var _result$stopPropagati, _result$preventDefaul;
+  isFocused() {
+    return document.activeElement === this.canvas;
+  }
 
-          if ((_result$stopPropagati = result === null || result === void 0 ? void 0 : result.stopPropagation) !== null && _result$stopPropagati !== void 0 ? _result$stopPropagati : true) e.stopPropagation();
-          if ((_result$preventDefaul = result === null || result === void 0 ? void 0 : result.preventDefault) !== null && _result$preventDefaul !== void 0 ? _result$preventDefaul : true) e.preventDefault();
-          break;
-        }
+  handleClick(event) {
+    var gridPoint = this.getGridPointFromEvent(event);
+    var mouseHandlers = this.getMouseHandlers();
+
+    for (var i = 0; i < mouseHandlers.length; i += 1) {
+      var mouseHandler = mouseHandlers[i];
+
+      if (mouseHandler.onClick(gridPoint, this, event)) {
+        event.stopPropagation();
+        event.preventDefault();
+        break;
       }
     }
-    /**
-     * Notify all of the mouse handlers for this grid of a mouse event.
-     * @param {String} functionName The name of the function in the mouse handler to call
-     * @param {MouseEvent} event The mouse event to notify
-     * @param {Boolean} updateCoordinates Whether to update the mouse coordinates
-     * @param {Boolean} addCursorToDocument Whether to add a cursor overlay or not (for dragging)
-     */
 
-  }, {
-    key: "notifyMouseHandlers",
-    value: function notifyMouseHandlers(functionName, event) {
-      var updateCoordinates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
-      var addCursorToDocument = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
-      var gridPoint = this.getGridPointFromEvent(event);
-      var mouseHandlers = this.getMouseHandlers();
-      var cursor = null;
+    this.canvas.focus();
+  }
 
-      for (var i = 0; i < mouseHandlers.length; i += 1) {
-        var mouseHandler = mouseHandlers[i];
-        var result = mouseHandler[functionName] && mouseHandler[functionName](gridPoint, this, event);
+  handleContextMenu(event) {
+    var gridPoint = this.getGridPointFromEvent(event);
+    var mouseHandlers = this.getMouseHandlers();
 
-        if (result) {
-          var _result$stopPropagati2, _result$preventDefaul2;
+    for (var i = 0; i < mouseHandlers.length; i += 1) {
+      var mouseHandler = mouseHandlers[i];
 
-          if (mouseHandler.cursor != null) {
-            cursor = mouseHandler.cursor;
+      if (mouseHandler.onContextMenu(gridPoint, this, event)) {
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+      }
+    }
+  }
 
-            if (addCursorToDocument) {
-              this.addDocumentCursor(cursor);
-            }
-          } // result is bool or object, events are stopped by default
+  handleKeyDown(e) {
+    var keyHandlers = this.getKeyHandlers();
 
+    for (var i = 0; i < keyHandlers.length; i += 1) {
+      var keyHandler = keyHandlers[i];
+      var result = keyHandler.onDown(e, this);
 
-          if ((_result$stopPropagati2 = result === null || result === void 0 ? void 0 : result.stopPropagation) !== null && _result$stopPropagati2 !== void 0 ? _result$stopPropagati2 : true) event.stopPropagation();
-          if ((_result$preventDefaul2 = result === null || result === void 0 ? void 0 : result.preventDefault) !== null && _result$preventDefaul2 !== void 0 ? _result$preventDefaul2 : true) event.preventDefault();
-          break;
-        }
+      if (result) {
+        var _result$stopPropagati, _result$preventDefaul;
+
+        if ((_result$stopPropagati = result === null || result === void 0 ? void 0 : result.stopPropagation) !== null && _result$stopPropagati !== void 0 ? _result$stopPropagati : true) e.stopPropagation();
+        if ((_result$preventDefaul = result === null || result === void 0 ? void 0 : result.preventDefault) !== null && _result$preventDefaul !== void 0 ? _result$preventDefaul : true) e.preventDefault();
+        break;
       }
+    }
+  }
+  /**
+   * Notify all of the mouse handlers for this grid of a mouse event.
+   * @param {String} functionName The name of the function in the mouse handler to call
+   * @param {MouseEvent} event The mouse event to notify
+   * @param {Boolean} updateCoordinates Whether to update the mouse coordinates
+   * @param {Boolean} addCursorToDocument Whether to add a cursor overlay or not (for dragging)
+   */
+
+
+  notifyMouseHandlers(functionName, event) {
+    var updateCoordinates = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true;
+    var addCursorToDocument = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+    var gridPoint = this.getGridPointFromEvent(event);
+    var mouseHandlers = this.getMouseHandlers();
+    var cursor = null;
+
+    for (var i = 0; i < mouseHandlers.length; i += 1) {
+      var mouseHandler = mouseHandlers[i];
+      var result = mouseHandler[functionName] && mouseHandler[functionName](gridPoint, this, event);
+
+      if (result) {
+        var _result$stopPropagati2, _result$preventDefaul2;
+
+        if (mouseHandler.cursor != null) {
+          ({
+            cursor
+          } = mouseHandler);
+
+          if (addCursorToDocument) {
+            this.addDocumentCursor(cursor);
+          }
+        } // result is bool or object, events are stopped by default
 
-      this.setState({
-        cursor: cursor
-      });
 
-      if (updateCoordinates) {
-        var x = gridPoint.x,
-            y = gridPoint.y;
-        this.setState({
-          mouseX: x,
-          mouseY: y
-        });
+        if ((_result$stopPropagati2 = result === null || result === void 0 ? void 0 : result.stopPropagation) !== null && _result$stopPropagati2 !== void 0 ? _result$stopPropagati2 : true) event.stopPropagation();
+        if ((_result$preventDefaul2 = result === null || result === void 0 ? void 0 : result.preventDefault) !== null && _result$preventDefaul2 !== void 0 ? _result$preventDefaul2 : true) event.preventDefault();
+        break;
       }
     }
-  }, {
-    key: "handleMouseDown",
-    value: function handleMouseDown(event) {
-      window.addEventListener('mousemove', this.handleMouseDrag, true);
-      window.addEventListener('mouseup', this.handleMouseUp, true);
-
-      if (event.button != null && event.button !== 0) {
-        return;
-      }
 
-      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DOWN, event);
-      this.startDragTimer(event);
-    }
-  }, {
-    key: "handleDoubleClick",
-    value: function handleDoubleClick(event) {
-      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DOUBLE_CLICK, event);
-    }
-  }, {
-    key: "handleMouseMove",
-    value: function handleMouseMove(event) {
-      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.MOVE, event);
-    }
-  }, {
-    key: "handleMouseLeave",
-    value: function handleMouseLeave(event) {
-      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.LEAVE, event, false);
+    this.setState({
+      cursor
+    });
+
+    if (updateCoordinates) {
+      var {
+        x,
+        y
+      } = gridPoint;
       this.setState({
-        mouseX: null,
-        mouseY: null
+        mouseX: x,
+        mouseY: y
       });
     }
-  }, {
-    key: "handleMouseDrag",
-    value: function handleMouseDrag(event) {
-      this.setState({
-        isDragging: true
-      });
-      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DRAG, event, true, true);
-      this.stopDragTimer();
+  }
+
+  handleMouseDown(event) {
+    window.addEventListener('mousemove', this.handleMouseDrag, true);
+    window.addEventListener('mouseup', this.handleMouseUp, true);
+
+    if (event.button != null && event.button !== 0) {
+      return;
     }
-  }, {
-    key: "handleMouseUp",
-    value: function handleMouseUp(event) {
-      window.removeEventListener('mousemove', this.handleMouseDrag, true);
-      window.removeEventListener('mouseup', this.handleMouseUp, true);
-
-      if (event.button != null && event.button !== 0) {
-        return;
-      }
 
-      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.UP, event, false);
-      this.stopDragTimer();
-      this.removeDocumentCursor();
+    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DOWN, event);
+    this.startDragTimer(event);
+  }
+
+  handleDoubleClick(event) {
+    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DOUBLE_CLICK, event);
+  }
+
+  handleMouseMove(event) {
+    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.MOVE, event);
+  }
+
+  handleMouseLeave(event) {
+    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.LEAVE, event, false);
+    this.setState({
+      mouseX: null,
+      mouseY: null
+    });
+  }
+
+  handleMouseDrag(event) {
+    this.setState({
+      isDragging: true
+    });
+    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DRAG, event, true, true);
+    this.stopDragTimer();
+  }
+
+  handleMouseUp(event) {
+    window.removeEventListener('mousemove', this.handleMouseDrag, true);
+    window.removeEventListener('mouseup', this.handleMouseUp, true);
+
+    if (event.button != null && event.button !== 0) {
+      return;
     }
-  }, {
-    key: "handleResize",
-    value: function handleResize() {
-      /**
-       * We need to always redraw the canvas in the same frame as the updateCanvasScale
-       * because it clears the canvas by nature of direct dom manipulation. However,
-       * We also need to verify the state/metrics, which we currently have no way
-       * of doing outside of a full componentDidUpdate() call, so we force the update.
-       * Ideally, we could verify state/metrics without the forced update.
-       */
-      this.updateCanvasScale();
-      this.updateCanvas();
-      this.forceUpdate();
+
+    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.UP, event, false);
+    this.stopDragTimer();
+    this.removeDocumentCursor();
+  }
+
+  handleResize() {
+    /**
+     * We need to always redraw the canvas in the same frame as the updateCanvasScale
+     * because it clears the canvas by nature of direct dom manipulation. However,
+     * We also need to verify the state/metrics, which we currently have no way
+     * of doing outside of a full componentDidUpdate() call, so we force the update.
+     * Ideally, we could verify state/metrics without the forced update.
+     */
+    this.updateCanvasScale();
+    this.updateCanvas();
+    this.forceUpdate();
+  }
+
+  handleWheel(e) {
+    this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.WHEEL, e);
+
+    if (e.defaultPrevented) {
+      return;
     }
-  }, {
-    key: "handleWheel",
-    value: function handleWheel(e) {
-      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.WHEEL, e);
 
-      if (e.defaultPrevented) {
-        return;
+    var {
+      metricCalculator,
+      metrics
+    } = this;
+    var metricState = this.getMetricState();
+    var {
+      lastTop,
+      lastLeft
+    } = metrics;
+    var {
+      top,
+      left,
+      topOffset,
+      leftOffset
+    } = metrics;
+    var theme = this.getTheme();
+    var {
+      deltaX,
+      deltaY
+    } = GridUtils.getScrollDelta(e, metrics.barWidth, metrics.barHeight, metrics.rowHeight, metrics.rowHeight); // iterate through each column to determine column width and figure out how far to scroll
+    // get column width of next column to scroll to, and subract it from the remaining distance to travel
+
+    while (deltaX !== 0) {
+      leftOffset += deltaX;
+      deltaX = 0; // no scrolling needed, at directional edge
+
+      if (leftOffset > 0 && left >= lastLeft || leftOffset < 0 && left <= 0) {
+        leftOffset = 0;
+        break;
       }
 
-      var metricCalculator = this.metricCalculator,
-          metrics = this.metrics;
-      var metricState = this.getMetricState();
-      var lastTop = metrics.lastTop,
-          lastLeft = metrics.lastLeft;
-      var top = metrics.top,
-          left = metrics.left,
-          topOffset = metrics.topOffset,
-          leftOffset = metrics.leftOffset;
-      var theme = this.getTheme();
+      if (leftOffset > 0) {
+        var _metrics$visibleColum;
 
-      var _GridUtils$getScrollD = GridUtils.getScrollDelta(e, metrics.barWidth, metrics.barHeight, metrics.rowHeight, metrics.rowHeight),
-          deltaX = _GridUtils$getScrollD.deltaX,
-          deltaY = _GridUtils$getScrollD.deltaY; // iterate through each column to determine column width and figure out how far to scroll
-      // get column width of next column to scroll to, and subract it from the remaining distance to travel
+        // scroll right
+        // get width of next column
+        var columnWidth = (_metrics$visibleColum = metrics.visibleColumnWidths.get(left)) !== null && _metrics$visibleColum !== void 0 ? _metrics$visibleColum : metricCalculator.getVisibleColumnWidth(left, metricState);
 
+        if (leftOffset >= columnWidth) {
+          // remove width from balance and advance by 1 column
+          deltaX = leftOffset - columnWidth;
+          leftOffset = 0;
+          left += 1;
+        } else if (theme.scrollSnapToColumn) {
+          // if there's still a balance to travel but its less then a column and snapping is on
+          leftOffset = 0;
+          left += 1;
+        }
+      } else if (leftOffset < 0) {
+        var _metrics$visibleColum2;
 
-      while (deltaX !== 0) {
-        leftOffset += deltaX;
-        deltaX = 0; // no scrolling needed, at directional edge
+        // scroll left
+        // get width of next column
+        var _columnWidth = (_metrics$visibleColum2 = metrics.visibleColumnWidths.get(left - 1)) !== null && _metrics$visibleColum2 !== void 0 ? _metrics$visibleColum2 : metricCalculator.getVisibleColumnWidth(left - 1, metricState);
 
-        if (leftOffset > 0 && left >= lastLeft || leftOffset < 0 && left <= 0) {
+        if (Math.abs(leftOffset) <= _columnWidth && theme.scrollSnapToColumn) {
+          // if there's still a balance to travel but its less then a column and snapping is on
+          leftOffset = 0;
+          left -= 1;
+        } else {
+          // remove width from balance and advance by 1 column
+          deltaX = leftOffset + _columnWidth;
           leftOffset = 0;
-          break;
+          left -= 1;
         }
+      }
+    } // iterate through each row to determine row height and figure out how far to scroll
+    // get row height of next row to scroll to, and subract it from the remaining distance to travel
 
-        if (leftOffset > 0) {
-          var _metrics$visibleColum;
-
-          // scroll right
-          // get width of next column
-          var columnWidth = (_metrics$visibleColum = metrics.visibleColumnWidths.get(left)) !== null && _metrics$visibleColum !== void 0 ? _metrics$visibleColum : metricCalculator.getVisibleColumnWidth(left, metricState);
-
-          if (leftOffset >= columnWidth) {
-            // remove width from balance and advance by 1 column
-            deltaX = leftOffset - columnWidth;
-            leftOffset = 0;
-            left += 1;
-          } else if (theme.scrollSnapToColumn) {
-            // if there's still a balance to travel but its less then a column and snapping is on
-            leftOffset = 0;
-            left += 1;
-          }
-        } else if (leftOffset < 0) {
-          var _metrics$visibleColum2;
-
-          // scroll left
-          // get width of next column
-          var _columnWidth = (_metrics$visibleColum2 = metrics.visibleColumnWidths.get(left - 1)) !== null && _metrics$visibleColum2 !== void 0 ? _metrics$visibleColum2 : metricCalculator.getVisibleColumnWidth(left - 1, metricState);
-
-          if (Math.abs(leftOffset) <= _columnWidth && theme.scrollSnapToColumn) {
-            // if there's still a balance to travel but its less then a column and snapping is on
-            leftOffset = 0;
-            left -= 1;
-          } else {
-            // remove width from balance and advance by 1 column
-            deltaX = leftOffset + _columnWidth;
-            leftOffset = 0;
-            left -= 1;
-          }
-        }
-      } // iterate through each row to determine row height and figure out how far to scroll
-      // get row height of next row to scroll to, and subract it from the remaining distance to travel
 
+    while (deltaY !== 0) {
+      topOffset += deltaY;
+      deltaY = 0; // no scrolling needed, at directional edge
+
+      if (topOffset > 0 && top >= lastTop || topOffset < 0 && top <= 0) {
+        topOffset = 0;
+        break;
+      }
+
+      if (topOffset > 0) {
+        var _metrics$visibleRowHe;
 
-      while (deltaY !== 0) {
-        topOffset += deltaY;
-        deltaY = 0; // no scrolling needed, at directional edge
+        // scroll direction down
+        // get height of next row
+        var rowHeight = (_metrics$visibleRowHe = metrics.visibleRowHeights.get(top)) !== null && _metrics$visibleRowHe !== void 0 ? _metrics$visibleRowHe : metricCalculator.getVisibleRowHeight(top, metricState);
 
-        if (topOffset > 0 && top >= lastTop || topOffset < 0 && top <= 0) {
+        if (topOffset >= rowHeight) {
+          // remove height from balance and advance by 1 row
+          deltaY = topOffset - rowHeight;
+          topOffset = 0;
+          top += 1;
+        } else if (theme.scrollSnapToRow) {
+          // if there's still a balance to travel but its less then a row and snapping is on
           topOffset = 0;
-          break;
+          top += 1;
         }
+      } else if (topOffset < 0) {
+        var _metrics$visibleRowHe2;
 
-        if (topOffset > 0) {
-          var _metrics$visibleRowHe;
-
-          // scroll direction down
-          // get height of next row
-          var rowHeight = (_metrics$visibleRowHe = metrics.visibleRowHeights.get(top)) !== null && _metrics$visibleRowHe !== void 0 ? _metrics$visibleRowHe : metricCalculator.getVisibleRowHeight(top, metricState);
-
-          if (topOffset >= rowHeight) {
-            // remove height from balance and advance by 1 row
-            deltaY = topOffset - rowHeight;
-            topOffset = 0;
-            top += 1;
-          } else if (theme.scrollSnapToRow) {
-            // if there's still a balance to travel but its less then a row and snapping is on
-            topOffset = 0;
-            top += 1;
-          }
-        } else if (topOffset < 0) {
-          var _metrics$visibleRowHe2;
-
-          // scroll direction up
-          // get height of next row
-          var _rowHeight = (_metrics$visibleRowHe2 = metrics.visibleRowHeights.get(top - 1)) !== null && _metrics$visibleRowHe2 !== void 0 ? _metrics$visibleRowHe2 : metricCalculator.getVisibleRowHeight(top - 1, metricState);
-
-          if (Math.abs(topOffset) <= _rowHeight && theme.scrollSnapToRow) {
-            // if there's still a balance to travel but its less then a row and snapping is on
-            topOffset = 0;
-            top -= 1;
-          } else {
-            // remove height from balance and advance by 1 row
-            deltaY = topOffset + _rowHeight;
-            topOffset = 0;
-            top -= 1;
-          }
+        // scroll direction up
+        // get height of next row
+        var _rowHeight = (_metrics$visibleRowHe2 = metrics.visibleRowHeights.get(top - 1)) !== null && _metrics$visibleRowHe2 !== void 0 ? _metrics$visibleRowHe2 : metricCalculator.getVisibleRowHeight(top - 1, metricState);
+
+        if (Math.abs(topOffset) <= _rowHeight && theme.scrollSnapToRow) {
+          // if there's still a balance to travel but its less then a row and snapping is on
+          topOffset = 0;
+          top -= 1;
+        } else {
+          // remove height from balance and advance by 1 row
+          deltaY = topOffset + _rowHeight;
+          topOffset = 0;
+          top -= 1;
         }
       }
-
-      this.setViewState({
-        top: top,
-        left: left,
-        leftOffset: leftOffset,
-        topOffset: topOffset
-      });
-      e.stopPropagation();
-      e.preventDefault();
     }
-  }, {
-    key: "handleEditCellCancel",
-    value: function handleEditCellCancel() {
-      this.setState({
-        editingCell: null
-      });
-      this.focus();
-    }
-  }, {
-    key: "handleEditCellChange",
-    value: function handleEditCellChange(value) {
-      this.setState(function (_ref) {
-        var editingCell = _ref.editingCell;
-        return {
-          editingCell: _objectSpread(_objectSpread({}, editingCell), {}, {
-            value: value
-          })
-        };
-      });
-    }
-  }, {
-    key: "handleEditCellCommit",
-    value: function handleEditCellCommit(value) {
-      var _ref2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-          _ref2$direction = _ref2.direction,
-          direction = _ref2$direction === void 0 ? GridRange.SELECTION_DIRECTION.DOWN : _ref2$direction,
-          _ref2$fillRange = _ref2.fillRange,
-          fillRange = _ref2$fillRange === void 0 ? false : _ref2$fillRange;
-
-      var _this$state10 = this.state,
-          column = _this$state10.cursorColumn,
-          row = _this$state10.cursorRow,
-          selectedRanges = _this$state10.selectedRanges;
-
-      if (!this.isValidForCell(column, row, value)) {
-        // Don't allow an invalid value to be commited, the editing cell should show an error
-        if (direction == null) {
-          // If they clicked off of the editing cell, just remove focus
-          this.setState({
-            editingCell: null
-          });
-        }
 
-        return;
-      }
+    this.setViewState({
+      top,
+      left,
+      leftOffset,
+      topOffset
+    });
+    e.stopPropagation();
+    e.preventDefault();
+  }
 
-      if (fillRange) {
-        this.setValueForRanges(selectedRanges, value);
-      } else {
-        this.setValueForCell(column, row, value);
-      }
+  handleEditCellCancel() {
+    this.setState({
+      editingCell: null
+    });
+    this.focus();
+  }
 
-      if (direction != null) {
-        this.moveCursorInDirection(direction);
-      }
+  handleEditCellChange(value) {
+    this.setState((_ref) => {
+      var {
+        editingCell
+      } = _ref;
+      return {
+        editingCell: _objectSpread(_objectSpread({}, editingCell), {}, {
+          value
+        })
+      };
+    });
+  }
 
-      this.setState({
-        editingCell: null
-      });
-      this.focus();
-    }
-  }, {
-    key: "renderInputField",
-    value: function renderInputField() {
-      var model = this.props.model;
-      var editingCell = this.state.editingCell;
-      var metrics = this.metrics;
-
-      if (editingCell == null || metrics == null) {
-        return null;
+  handleEditCellCommit(value) {
+    var {
+      direction = GridRange.SELECTION_DIRECTION.DOWN,
+      fillRange = false
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var {
+      cursorColumn: column,
+      cursorRow: row,
+      selectedRanges
+    } = this.state;
+
+    if (!this.isValidForCell(column, row, value)) {
+      // Don't allow an invalid value to be commited, the editing cell should show an error
+      if (direction == null) {
+        // If they clicked off of the editing cell, just remove focus
+        this.setState({
+          editingCell: null
+        });
       }
 
-      var _editingCell$selectio = editingCell.selectionRange,
-          selectionRange = _editingCell$selectio === void 0 ? null : _editingCell$selectio,
-          value = editingCell.value,
-          isQuickEdit = editingCell.isQuickEdit;
-      var _this$state11 = this.state,
-          row = _this$state11.cursorRow,
-          column = _this$state11.cursorColumn;
-      var gridX = metrics.gridX,
-          gridY = metrics.gridY,
-          visibleColumnXs = metrics.visibleColumnXs,
-          visibleRowYs = metrics.visibleRowYs,
-          visibleColumnWidths = metrics.visibleColumnWidths,
-          visibleRowHeights = metrics.visibleRowHeights;
-      var x = visibleColumnXs.get(column);
-      var y = visibleRowYs.get(row);
-      var w = visibleColumnWidths.get(column);
-      var h = visibleRowHeights.get(row);
-      var isVisible = x != null && y != null && w != null && h != null; // If the cell isn't visible, we still need to display an invisible cell for focus purposes
-
-      var wrapperStyle = isVisible ? {
-        position: 'absolute',
-        left: gridX + x,
-        top: gridY + y,
-        width: w,
-        height: h
-      } : {
-        opacity: 0
-      };
-      var modelColumn = this.getModelColumn(column);
-      var modelRow = this.getModelRow(row);
-      var inputStyle = modelColumn != null && modelRow != null ? {
-        textAlign: model.textAlignForCell(modelColumn, modelRow)
-      } : null;
-      var isValid = model.isValidForCell(modelColumn, modelRow, value);
-      return /*#__PURE__*/React.createElement("div", {
-        style: wrapperStyle
-      }, /*#__PURE__*/React.createElement(CellInputField, {
-        key: "".concat(column, ",").concat(row),
-        selectionRange: selectionRange,
-        className: classNames({
-          error: !isValid
-        }),
-        onCancel: this.handleEditCellCancel,
-        onChange: this.handleEditCellChange,
-        onDone: this.handleEditCellCommit,
-        isQuickEdit: isQuickEdit,
-        style: inputStyle,
-        value: value
-      }));
+      return;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this6 = this;
-
-      var cursor = this.state.cursor;
-      return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
-        className: classNames('grid-canvas', Grid.getCursorClassName(cursor)),
-        ref: function ref(canvas) {
-          _this6.canvas = canvas;
-        },
-        onClick: this.handleClick,
-        onContextMenu: this.handleContextMenu,
-        onDoubleClick: this.handleDoubleClick,
-        onKeyDown: this.handleKeyDown,
-        onMouseDown: this.handleMouseDown,
-        onMouseMove: this.handleMouseMove,
-        onMouseLeave: this.handleMouseLeave,
-        tabIndex: 0
-      }, "Your browser does not support HTML canvas. Update your browser?"), this.renderInputField());
+
+    if (fillRange) {
+      this.setValueForRanges(selectedRanges, value);
+    } else {
+      this.setValueForCell(column, row, value);
     }
-  }], [{
-    key: "getScale",
-    value: // use same constant as chrome source for windows
-    // https://github.com/chromium/chromium/blob/973af9d461b6b5dc60208c8d3d66adc27e53da78/ui/events/blink/web_input_event_builders_win.cc#L285
-    function getScale(context) {
-      var devicePixelRatio = window.devicePixelRatio || 1;
-      var backingStorePixelRatio = context.webkitBackingStorePixelRatio || context.mozBackingStorePixelRatio || context.msBackingStorePixelRatio || context.oBackingStorePixelRatio || context.backingStorePixelRatio || 1;
-      return devicePixelRatio / backingStorePixelRatio;
+
+    if (direction != null) {
+      this.moveCursorInDirection(direction);
     }
-  }, {
-    key: "getCursorClassName",
-    value: function getCursorClassName(cursor) {
-      return cursor ? "grid-cursor-".concat(cursor) : null;
+
+    this.setState({
+      editingCell: null
+    });
+    this.focus();
+  }
+
+  renderInputField() {
+    var {
+      model
+    } = this.props;
+    var {
+      editingCell
+    } = this.state;
+    var {
+      metrics
+    } = this;
+
+    if (editingCell == null || metrics == null) {
+      return null;
     }
-  }]);
 
-  return Grid;
-}(PureComponent);
+    var {
+      selectionRange = null,
+      value,
+      isQuickEdit
+    } = editingCell;
+    var {
+      cursorRow: row,
+      cursorColumn: column
+    } = this.state;
+    var {
+      gridX,
+      gridY,
+      visibleColumnXs,
+      visibleRowYs,
+      visibleColumnWidths,
+      visibleRowHeights
+    } = metrics;
+    var x = visibleColumnXs.get(column);
+    var y = visibleRowYs.get(row);
+    var w = visibleColumnWidths.get(column);
+    var h = visibleRowHeights.get(row);
+    var isVisible = x != null && y != null && w != null && h != null; // If the cell isn't visible, we still need to display an invisible cell for focus purposes
+
+    var wrapperStyle = isVisible ? {
+      position: 'absolute',
+      left: gridX + x,
+      top: gridY + y,
+      width: w,
+      height: h
+    } : {
+      opacity: 0
+    };
+    var modelColumn = this.getModelColumn(column);
+    var modelRow = this.getModelRow(row);
+    var inputStyle = modelColumn != null && modelRow != null ? {
+      textAlign: model.textAlignForCell(modelColumn, modelRow)
+    } : null;
+    var isValid = model.isValidForCell(modelColumn, modelRow, value);
+    return /*#__PURE__*/React.createElement("div", {
+      style: wrapperStyle
+    }, /*#__PURE__*/React.createElement(CellInputField, {
+      key: "".concat(column, ",").concat(row),
+      selectionRange: selectionRange,
+      className: classNames({
+        error: !isValid
+      }),
+      onCancel: this.handleEditCellCancel,
+      onChange: this.handleEditCellChange,
+      onDone: this.handleEditCellCommit,
+      isQuickEdit: isQuickEdit,
+      style: inputStyle,
+      value: value
+    }));
+  }
+
+  render() {
+    var {
+      cursor
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
+      className: classNames('grid-canvas', Grid.getCursorClassName(cursor)),
+      ref: canvas => {
+        this.canvas = canvas;
+      },
+      onClick: this.handleClick,
+      onContextMenu: this.handleContextMenu,
+      onDoubleClick: this.handleDoubleClick,
+      onKeyDown: this.handleKeyDown,
+      onMouseDown: this.handleMouseDown,
+      onMouseMove: this.handleMouseMove,
+      onMouseLeave: this.handleMouseLeave,
+      tabIndex: 0
+    }, "Your browser does not support HTML canvas. Update your browser?"), this.renderInputField());
+  }
+
+}
 
 _defineProperty(Grid, "pixelsPerLine", 100 / 3);
 
 _defineProperty(Grid, "dragTimeout", 1000);
 
-_defineProperty(Grid, "getTheme", memoize(function (userTheme) {
-  return _objectSpread(_objectSpread({}, GridTheme), userTheme);
-}));
+_defineProperty(Grid, "getTheme", memoize(userTheme => _objectSpread(_objectSpread({}, GridTheme), userTheme)));
 
 Grid.propTypes = {
   canvasOptions: PropTypes.shape({}),
@@ -1767,11 +1732,11 @@ Grid.defaultProps = {
   mouseHandlers: [],
   movedColumns: [],
   movedRows: [],
-  onError: function onError() {},
-  onSelectionChanged: function onSelectionChanged() {},
-  onMovedColumnsChanged: function onMovedColumnsChanged() {},
-  onMoveColumnComplete: function onMoveColumnComplete() {},
-  onViewChanged: function onViewChanged() {},
+  onError: () => {},
+  onSelectionChanged: () => {},
+  onMovedColumnsChanged: () => {},
+  onMoveColumnComplete: () => {},
+  onViewChanged: () => {},
   renderer: null,
   stateOverride: {},
   theme: {