@deephaven/grid 0.4.1-modules.0 → 0.5.2-beta.0

package/dist/Grid.js

@@ -1,3 +1,5 @@
+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); }); }; }
@@ -6,6 +8,38 @@ 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" */
@@ -14,19 +48,19 @@ import classNames from 'classnames';
 import memoize from 'memoize-one';
 import PropTypes from 'prop-types';
 import clamp from 'lodash.clamp';
-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 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 "./Grid.css";
-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";
+import KeyHandler from './KeyHandler';
+import { EditKeyHandler, PasteKeyHandler, SelectionKeyHandler, TreeKeyHandler } from './key-handlers';
+import CellInputField from './CellInputField';
+import PasteError from './errors/PasteError';
 /**
  * High performance, extendible, themeable grid component.
  * Architectured to be fast and handle billions of rows/columns by default.
@@ -42,65 +76,67 @@ import PasteError from "./errors/PasteError.js";
  * Can also add onClick and onContextMenu handlers to add custom functionality and menus.
  */
 
-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;
-  }
+var Grid = /*#__PURE__*/function (_PureComponent) {
+  _inherits(Grid, _PureComponent);
 
-  static getCursorClassName(cursor) {
-    return cursor ? "grid-cursor-".concat(cursor) : null;
-  }
+  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;
+      });
+    }));
+
+    _defineProperty(_assertThisInitialized(_this), "getCachedMouseHandlers", memoize(function (mouseHandlers) {
+      return [].concat(_toConsumableArray(mouseHandlers), _toConsumableArray(_this.mouseHandlers)).sort(function (a, b) {
+        return a.order - b.order;
+      });
+    }));
 
-  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
+    _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
     // 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,
@@ -125,8 +161,8 @@ class Grid extends PureComponent {
       mouseX: null,
       mouseY: null,
       // Move operations the user has performed on this grids columns/rows
-      movedColumns,
-      movedRows,
+      movedColumns: movedColumns,
+      movedRows: movedRows,
       // Cursor (highlighted cell) location and active selected range
       cursorRow: null,
       cursorColumn: null,
@@ -145,1553 +181,1552 @@ class Grid extends PureComponent {
       // The cell that is currently being edited
       editingCell: null
     };
+    return _this;
   }
 
-  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
-      });
-    }
+  _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
 
-    if (prevMovedRows !== movedRows) {
-      this.setState({
-        movedRows
+      this.canvas.addEventListener('wheel', this.handleWheel, {
+        passive: false
       });
+      window.addEventListener('resize', this.handleResize);
+      this.updateCanvasScale();
+      this.updateCanvas();
     }
-
-    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) {
+  }, {
+    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) {
         this.setState({
-          top: lastTop
+          movedColumns: movedColumns
         });
       }
-    }
 
-    if (prevColumnCount !== columnCount || width !== prevWidth) {
-      var lastLeft = this.metricCalculator.getLastLeft(metricState);
-
-      if (this.isStuckToRight && rightVisible < columnCount - 1 && rightVisible > 0 && left > 0 || left > lastLeft) {
+      if (prevMovedRows !== movedRows) {
         this.setState({
-          left: lastLeft
+          movedRows: movedRows
         });
       }
-    }
-
-    if (this.validateSelection()) {
-      this.checkSelectionChange(prevState);
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.animationFrame != null) {
-      cancelAnimationFrame(this.animationFrame);
-    }
-
-    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();
-  }
 
-  getTheme() {
-    var {
-      theme
-    } = this.props;
-    return Grid.getTheme(theme);
-  }
-
-  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 (prevStateMovedColumns !== currentStateMovedColumns) {
+        onMovedColumnsChanged(currentStateMovedColumns);
+      }
 
-  getGridPointFromXY(x, y) {
-    return GridUtils.getGridPointFromXY(x, y, this.metrics);
-  }
+      if (prevState.draggingColumn != null && draggingColumn == null) {
+        onMoveColumnComplete(currentStateMovedColumns);
+      }
 
-  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 (isStickyBottom !== prevIsStickyBottom) {
+        this.isStuckToBottom = false;
+      }
 
-  getKeyHandlers() {
-    var {
-      keyHandlers
-    } = this.props;
-    return this.getCachedKeyHandlers(keyHandlers);
-  }
+      if (isStickyRight !== prevIsStickyRight) {
+        this.isStuckToRight = false;
+      }
 
-  getMouseHandlers() {
-    var {
-      mouseHandlers
-    } = this.props;
-    return this.getCachedMouseHandlers(mouseHandlers);
-  }
+      this.updateMetrics();
+      this.requestUpdateCanvas();
 
-  getModelColumn(columnIndex) {
-    var _this$metrics, _this$metrics$modelCo;
+      if (!this.metrics || !this.prevMetrics) {
+        return;
+      }
 
-    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);
-  }
+      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
+          });
+        }
+      }
 
-  getModelRow(rowIndex) {
-    var _this$metrics2, _this$metrics2$modelR;
+      if (prevColumnCount !== columnCount || width !== prevWidth) {
+        var lastLeft = this.metricCalculator.getLastLeft(metricState);
 
-    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);
-  }
+        if (this.isStuckToRight && rightVisible < columnCount - 1 && rightVisible > 0 && left > 0 || left > lastLeft) {
+          this.setState({
+            left: lastLeft
+          });
+        }
+      }
 
-  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));
+      if (this.validateSelection()) {
+        this.checkSelectionChange(prevState);
+      }
     }
-
-    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());
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this.animationFrame != null) {
+        cancelAnimationFrame(this.animationFrame);
       }
 
-      this.setState({
-        selectionStartColumn: range.startColumn,
-        selectionStartRow: range.startRow,
-        selectionEndColumn: range.endColumn,
-        selectionEndRow: range.endRow,
-        cursorColumn: newCursorColumn,
-        cursorRow: newCursorRow
+      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();
     }
-  }
+  }, {
+    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;
 
-  initContext() {
-    var {
-      canvas
-    } = this;
-    var {
-      canvasOptions
-    } = this.props;
-    this.canvasContext = canvas.getContext('2d', canvasOptions);
-  }
+      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;
 
-  requestUpdateCanvas() {
-    if (this.animationFrame != null) {
-      return;
+      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);
     }
+  }, {
+    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.animationFrame = requestAnimationFrame(() => {
-      this.animationFrame = null;
-      this.updateCanvas(this.metrics);
-    });
-  }
+      this.clearSelectedRanges();
+      this.commitSelection(); // Need to commit before moving in case we're selecting same row again
 
-  updateCanvas() {
-    var metrics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.updateMetrics();
-    this.updateCanvasScale();
-    var {
-      onViewChanged
-    } = this.props;
-    onViewChanged(metrics);
-    this.drawCanvas(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
+      });
 
-  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 (gridRanges.length > 0) {
+        var range = GridRange.boundedRange(gridRanges[0], columnCount, rowCount);
+        var newCursorRow = cursorRow;
+        var newCursorColumn = cursorColumn;
 
-  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;
-  }
+        if (!range.containsCell(cursorColumn, cursorRow)) {
+          var _range$startCell = range.startCell();
 
-  checkSelectionChange(prevState) {
-    var {
-      selectedRanges: oldSelectedRanges
-    } = prevState;
-    var {
-      selectedRanges
-    } = this.state;
-
-    if (selectedRanges !== oldSelectedRanges) {
-      var {
-        onSelectionChanged
-      } = this.props;
-      onSelectionChanged(selectedRanges);
-    }
-  }
+          newCursorRow = _range$startCell.row;
+          newCursorColumn = _range$startCell.column;
+        }
 
-  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({
-          selectedRanges: [],
-          lastSelectedRanges: []
+          selectionStartColumn: range.startColumn,
+          selectionStartRow: range.startRow,
+          selectionEndColumn: range.endColumn,
+          selectionEndRow: range.endRow,
+          cursorColumn: newCursorColumn,
+          cursorRow: newCursorRow
         });
-        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;
 
-    return true;
-  }
+      if (this.animationFrame != null) {
+        return;
+      }
 
-  clearSelectedRanges() {
-    var {
-      selectedRanges
-    } = this.state;
-    this.setState({
-      selectedRanges: [],
-      lastSelectedRanges: selectedRanges
-    });
-  }
-  /** Clears all but the last selected range */
+      this.animationFrame = requestAnimationFrame(function () {
+        _this2.animationFrame = null;
+
+        _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;
+        }
+      }
 
+      return true;
+    }
+  }, {
+    key: "clearSelectedRanges",
+    value: function clearSelectedRanges() {
+      var selectedRanges = this.state.selectedRanges;
+      this.setState({
+        selectedRanges: [],
+        lastSelectedRanges: selectedRanges
+      });
+    }
+    /** Clears all but the last selected range */
 
-  trimSelectedRanges() {
-    var {
-      selectedRanges
-    } = this.state;
+  }, {
+    key: "trimSelectedRanges",
+    value: function trimSelectedRanges() {
+      var selectedRanges = this.state.selectedRanges;
 
-    if (selectedRanges.length > 0) {
+      if (selectedRanges.length > 0) {
+        this.setState({
+          selectedRanges: selectedRanges.slice(selectedRanges.length - 1)
+        });
+      }
+    }
+  }, {
+    key: "beginSelection",
+    value: function beginSelection(column, row) {
       this.setState({
-        selectedRanges: selectedRanges.slice(selectedRanges.length - 1)
+        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.
+     */
 
-  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;
+  }, {
+    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;
+              }
             }
 
-            if (!autoSelectColumn) {
-              top = selectionStartRow;
-            }
+            right = autoSelectRow ? null : column;
+            bottom = autoSelectColumn ? null : row;
           }
 
-          right = autoSelectRow ? null : column;
-          bottom = autoSelectColumn ? null : row;
-        }
+          var selectedRange = GridRange.makeNormalized(left, top, right, bottom);
 
-        var selectedRange = GridRange.makeNormalized(left, top, right, bottom);
+          if (lastSelectedRange.equals(selectedRange)) {
+            return null;
+          }
 
-        if (lastSelectedRange.equals(selectedRange)) {
-          return null;
-        }
+          var _newRanges = [].concat(selectedRanges);
 
-        var _newRanges = [].concat(selectedRanges);
+          _newRanges[_newRanges.length - 1] = selectedRange;
+          return {
+            selectedRanges: _newRanges,
+            selectionEndColumn: column,
+            selectionEndRow: row
+          };
+        }
 
-        _newRanges[_newRanges.length - 1] = selectedRange;
+        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,
+          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.
+     */
 
-      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: []
-        };
-      }
+  }, {
+    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 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
-        } = 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;
+          newSelectedRanges = GridRange.consolidate(newSelectedRanges);
         }
-      }
-
-      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)]);
-  }
+        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;
+          }
+        }
 
-  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);
+        return {
+          cursorRow: newCursorRow,
+          cursorColumn: newCursorColumn,
+          selectedRanges: newSelectedRanges,
+          lastSelectedRanges: selectedRanges
+        };
+      });
     }
-  }
-  /**
-   * 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);
+  }, {
+    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)]);
+    }
+  }, {
+    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
+     */
 
-    if (nextCursor != null) {
-      var {
-        column,
-        row
-      } = nextCursor;
-      this.setState({
-        cursorColumn: column,
-        cursorRow: row
-      });
+  }, {
+    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 (!GridRange.containsCell(selectedRanges, column, row)) {
+      if (nextCursor != null) {
+        var _nextCursor = nextCursor,
+            column = _nextCursor.column,
+            row = _nextCursor.row;
         this.setState({
-          selectedRanges: [GridRange.makeCell(column, row)],
-          selectionStartColumn: column,
-          selectionStartRow: row,
-          selectionEndColumn: column,
-          selectionEndRow: row
+          cursorColumn: column,
+          cursorRow: 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.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;
-      }
-    }
+        if (!GridRange.containsCell(selectedRanges, column, row)) {
+          this.setState({
+            selectedRanges: [GridRange.makeCell(column, row)],
+            selectionStartColumn: column,
+            selectionStartRow: row,
+            selectionEndColumn: column,
+            selectionEndRow: 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.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
+     */
 
-    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;
-    }
+  }, {
+    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 (left != null) {
-      this.isStuckToRight = isStickyRight && left >= lastLeft;
-    }
+      if (!extendSelection) {
+        this.beginSelection(column, row);
+      }
 
-    this.setState(viewState);
+      this.moveSelection(column, row, extendSelection, maximizePreviousRange);
 
-    if (forceUpdate) {
-      this.forceUpdate();
+      if (keepCursorInView) {
+        this.moveViewToCell(column, row);
+      }
     }
-  }
-  /**
-   * 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);
-  }
+    /**
+     * 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
+     */
 
-  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.");
+  }, {
+    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;
         }
+      }
 
-        if (selectedRanges.length <= 0) {
-          throw new PasteError('Select an area to paste to.');
+      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 (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
-
-
-        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
-
-        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));
-
-          _this.setSelectedRanges(ranges);
-        }
+      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 (!ranges.every(range => GridRange.rowCount([range]) === tableHeight && GridRange.columnCount([range]) === tableWidth)) {
-          throw new PasteError('Copy and paste area are not same size.');
-        }
+  }, {
+    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;
+      }
 
-        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]
-              });
-            }
-          }
-        });
-        yield model.setValues(edits);
-      } catch (e) {
-        var {
-          onError
-        } = _this.props;
-        onError(e);
+      if (left != null) {
+        this.isStuckToRight = isStickyRight && left >= lastLeft;
       }
-    })();
-  }
 
-  setValueForCell(column, row, value) {
-    var {
-      model
-    } = this.props;
-    var modelColumn = this.getModelColumn(column);
-    var modelRow = this.getModelRow(row);
+      this.setState(viewState);
 
-    if (model.isValidForCell(modelColumn, modelRow, value)) {
-      model.setValueForCell(modelColumn, modelRow, value);
+      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.
+     */
 
-  setValueForRanges(ranges, value) {
-    var {
-      model
-    } = this.props;
-    var {
-      movedColumns,
-      movedRows
-    } = this.state;
-    var modelRanges = GridUtils.getModelRanges(ranges, movedColumns, movedRows);
-    model.setValueForRanges(modelRanges, value);
-  }
+  }, {
+    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
+     */
 
-  isSelected(row, column) {
-    var {
-      selectedRanges
-    } = this.state;
+  }, {
+    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();
+            }
+          }
+        }, _callee, this, [[2, 27]]);
+      }));
 
-    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;
+      function pasteValue(_x) {
+        return _pasteValue.apply(this, arguments);
+      }
 
-      if (rowSelected && columnSelected) {
-        return true;
+      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;
+        }
+      }
 
-    return false;
-  }
-
-  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) {
+      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);
-      document.documentElement.classList.remove('grid-block-events');
-      this.documentCursor = null;
+      this.documentCursor = Grid.getCursorClassName(cursor);
+      document.documentElement.classList.add(this.documentCursor);
+      document.documentElement.classList.add('grid-block-events');
     }
-  }
-
-  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: "removeDocumentCursor",
+    value: function removeDocumentCursor() {
+      if (this.documentCursor) {
+        document.documentElement.classList.remove(this.documentCursor);
+        document.documentElement.classList.remove('grid-block-events');
+        this.documentCursor = null;
+      }
     }
-  }
-  /**
-   * 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();
-  }
+  }, {
+    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;
+      }
+    }
+    /**
+     * When scrolling you've have to re-draw the whole canvas. As a consequence, all these drawing methods
+     * must be very quick.
+     */
 
-  focus() {
-    this.canvas.focus();
-  }
+  }, {
+    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;
+        }
+      }
 
-  isFocused() {
-    return document.activeElement === this.canvas;
-  }
+      this.canvas.focus();
+    }
+  }, {
+    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;
+        }
+      }
+    }
+  }, {
+    key: "handleKeyDown",
+    value: function handleKeyDown(e) {
+      var keyHandlers = this.getKeyHandlers();
 
-  handleClick(event) {
-    var gridPoint = this.getGridPointFromEvent(event);
-    var mouseHandlers = this.getMouseHandlers();
+      for (var i = 0; i < keyHandlers.length; i += 1) {
+        var keyHandler = keyHandlers[i];
+        var result = keyHandler.onDown(e, this);
 
-    for (var i = 0; i < mouseHandlers.length; i += 1) {
-      var mouseHandler = mouseHandlers[i];
+        if (result) {
+          var _result$stopPropagati, _result$preventDefaul;
 
-      if (mouseHandler.onClick(gridPoint, this, event)) {
-        event.stopPropagation();
-        event.preventDefault();
-        break;
+          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)
+     */
 
-    this.canvas.focus();
-  }
-
-  handleContextMenu(event) {
-    var gridPoint = this.getGridPointFromEvent(event);
-    var mouseHandlers = this.getMouseHandlers();
+  }, {
+    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;
 
-    for (var i = 0; i < mouseHandlers.length; i += 1) {
-      var mouseHandler = mouseHandlers[i];
+      for (var i = 0; i < mouseHandlers.length; i += 1) {
+        var mouseHandler = mouseHandlers[i];
+        var result = mouseHandler[functionName] && mouseHandler[functionName](gridPoint, this, event);
 
-      if (mouseHandler.onContextMenu(gridPoint, this, event)) {
-        event.stopPropagation();
-        event.preventDefault();
-        break;
-      }
-    }
-  }
+        if (result) {
+          var _result$stopPropagati2, _result$preventDefaul2;
 
-  handleKeyDown(e) {
-    var keyHandlers = this.getKeyHandlers();
+          if (mouseHandler.cursor != null) {
+            cursor = mouseHandler.cursor;
 
-    for (var i = 0; i < keyHandlers.length; i += 1) {
-      var keyHandler = keyHandlers[i];
-      var result = keyHandler.onDown(e, this);
+            if (addCursorToDocument) {
+              this.addDocumentCursor(cursor);
+            }
+          } // result is bool or object, events are stopped by default
 
-      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;
+          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;
+        }
       }
-    }
-  }
-  /**
-   * 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 ((_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 (updateCoordinates) {
+        var x = gridPoint.x,
+            y = gridPoint.y;
+        this.setState({
+          mouseX: x,
+          mouseY: y
+        });
       }
     }
+  }, {
+    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.setState({
-      cursor
-    });
-
-    if (updateCoordinates) {
-      var {
-        x,
-        y
-      } = gridPoint;
+      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({
-        mouseX: x,
-        mouseY: y
+        mouseX: null,
+        mouseY: null
       });
     }
-  }
-
-  handleMouseDown(event) {
-    window.addEventListener('mousemove', this.handleMouseDrag, true);
-    window.addEventListener('mouseup', this.handleMouseUp, true);
-
-    if (event.button != null && event.button !== 0) {
-      return;
+  }, {
+    key: "handleMouseDrag",
+    value: function handleMouseDrag(event) {
+      this.setState({
+        isDragging: true
+      });
+      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.DRAG, event, true, true);
+      this.stopDragTimer();
     }
+  }, {
+    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.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;
+      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.UP, event, false);
+      this.stopDragTimer();
+      this.removeDocumentCursor();
     }
-
-    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: "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();
     }
+  }, {
+    key: "handleWheel",
+    value: function handleWheel(e) {
+      this.notifyMouseHandlers(GridMouseHandler.FUNCTION_NAMES.WHEEL, e);
 
-    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;
+      if (e.defaultPrevented) {
+        return;
       }
 
-      if (leftOffset > 0) {
-        var _metrics$visibleColum;
+      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();
 
-        // 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);
+      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
 
-        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);
+      while (deltaX !== 0) {
+        leftOffset += deltaX;
+        deltaX = 0; // no scrolling needed, at directional edge
 
-        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;
+        if (leftOffset > 0 && left >= lastLeft || leftOffset < 0 && left <= 0) {
           leftOffset = 0;
-          left -= 1;
+          break;
         }
-      }
-    } // 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 (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
 
-      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);
+      while (deltaY !== 0) {
+        topOffset += deltaY;
+        deltaY = 0; // no scrolling needed, at directional edge
 
-        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
+        if (topOffset > 0 && top >= lastTop || topOffset < 0 && top <= 0) {
           topOffset = 0;
-          top += 1;
+          break;
         }
-      } 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;
+        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;
+          }
         }
       }
-    }
 
-    this.setViewState({
-      top,
-      left,
-      leftOffset,
-      topOffset
-    });
-    e.stopPropagation();
-    e.preventDefault();
-  }
+      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
+          });
+        }
 
-  handleEditCellCancel() {
-    this.setState({
-      editingCell: null
-    });
-    this.focus();
-  }
+        return;
+      }
 
-  handleEditCellChange(value) {
-    this.setState((_ref) => {
-      var {
-        editingCell
-      } = _ref;
-      return {
-        editingCell: _objectSpread(_objectSpread({}, editingCell), {}, {
-          value
-        })
-      };
-    });
-  }
+      if (fillRange) {
+        this.setValueForRanges(selectedRanges, value);
+      } else {
+        this.setValueForCell(column, row, value);
+      }
 
-  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
-        });
+      if (direction != null) {
+        this.moveCursorInDirection(direction);
       }
 
-      return;
+      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;
+      }
 
-    if (fillRange) {
-      this.setValueForRanges(selectedRanges, value);
-    } else {
-      this.setValueForCell(column, row, value);
+      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
+      }));
     }
-
-    if (direction != null) {
-      this.moveCursorInDirection(direction);
+  }, {
+    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());
     }
-
-    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;
+  }], [{
+    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;
     }
+  }, {
+    key: "getCursorClassName",
+    value: function getCursorClassName(cursor) {
+      return cursor ? "grid-cursor-".concat(cursor) : null;
+    }
+  }]);
 
-    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());
-  }
-
-}
+  return Grid;
+}(PureComponent);
 
 _defineProperty(Grid, "pixelsPerLine", 100 / 3);
 
 _defineProperty(Grid, "dragTimeout", 1000);
 
-_defineProperty(Grid, "getTheme", memoize(userTheme => _objectSpread(_objectSpread({}, GridTheme), userTheme)));
+_defineProperty(Grid, "getTheme", memoize(function (userTheme) {
+  return _objectSpread(_objectSpread({}, GridTheme), userTheme);
+}));
 
 Grid.propTypes = {
   canvasOptions: PropTypes.shape({}),
@@ -1732,11 +1767,11 @@ Grid.defaultProps = {
   mouseHandlers: [],
   movedColumns: [],
   movedRows: [],
-  onError: () => {},
-  onSelectionChanged: () => {},
-  onMovedColumnsChanged: () => {},
-  onMoveColumnComplete: () => {},
-  onViewChanged: () => {},
+  onError: function onError() {},
+  onSelectionChanged: function onSelectionChanged() {},
+  onMovedColumnsChanged: function onMovedColumnsChanged() {},
+  onMoveColumnComplete: function onMoveColumnComplete() {},
+  onViewChanged: function onViewChanged() {},
   renderer: null,
   stateOverride: {},
   theme: {