@deephaven/grid 0.43.0 → 0.44.0

package/dist/Grid.js

@@ -0,0 +1,1947 @@
+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); }); }; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+/* eslint react/no-did-update-set-state: "off" */
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import memoize from 'memoize-one';
+import clamp from 'lodash.clamp';
+import { assertNotNull, EMPTY_ARRAY } from '@deephaven/utils';
+import GridMetricCalculator from "./GridMetricCalculator.js";
+import GridTheme from "./GridTheme.js";
+import GridRange, { SELECTION_DIRECTION } from "./GridRange.js";
+import GridRenderer from "./GridRenderer.js";
+import GridUtils, { isLinkToken } from "./GridUtils.js";
+import { GridSelectionMouseHandler, GridColumnMoveMouseHandler, GridColumnSeparatorMouseHandler, GridHorizontalScrollBarMouseHandler, GridRowMoveMouseHandler, GridRowSeparatorMouseHandler, GridRowTreeMouseHandler, GridScrollBarCornerMouseHandler, GridVerticalScrollBarMouseHandler, EditMouseHandler, GridTokenMouseHandler } from "./mouse-handlers/index.js";
+import "./Grid.css";
+import { EditKeyHandler, PasteKeyHandler, SelectionKeyHandler, TreeKeyHandler } from "./key-handlers/index.js";
+import CellInputField from "./CellInputField.js";
+import PasteError from "./errors/PasteError.js";
+import { isExpandableGridModel } from "./ExpandableGridModel.js";
+import { assertIsEditableGridModel, isEditableGridModel } from "./EditableGridModel.js";
+import { assertIsDefined } from "./errors/index.js";
+import ThemeContext from "./ThemeContext.js";
+/**
+ * High performance, extendible, themeable grid component.
+ * Architectured to be fast and handle billions of rows/columns by default.
+ * The base model does not provide support for sorting, filtering, etc.
+ * To get that functionality, extend GridModel/GridRenderer, and add onClick/onContextMenu handlers to implement your own sort.
+ *
+ * Extend GridModel with your own data model to provide the data for the grid.
+ * Extend GridTheme to change the appearance if the grid. See GridTheme for all the settable values.
+ * Extend GridMetricCalculator to provide different metrics for the grid, such as column sizing, header sizing, etc.
+ * Extend GridRenderer to have complete control over the rendering process. Can override just one method such as drawColumnHeader, or override the whole drawCanvas process.
+ *
+ * Add an onViewChanged callback to page in/out data as user moves around the grid
+ * 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
+
+  /**
+   * On some devices there may be different scaling required for high DPI. Get the scale required for the canvas.
+   * @param context The canvas context
+   * @returns The scale to use
+   */
+  static getScale(context) {
+    var _ref, _ref2, _ref3, _ref4, _legacyContext$webkit;
+    var devicePixelRatio = window.devicePixelRatio || 1;
+
+    // backingStorePixelRatio is deprecated, but check it just in case
+    var legacyContext = context;
+    var backingStorePixelRatio = // Not worth converting to a massive if structure
+    // Converting would reduce readability and maintainability
+    // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
+    (_ref = (_ref2 = (_ref3 = (_ref4 = (_legacyContext$webkit = legacyContext.webkitBackingStorePixelRatio) !== null && _legacyContext$webkit !== void 0 ? _legacyContext$webkit : legacyContext.mozBackingStorePixelRatio) !== null && _ref4 !== void 0 ? _ref4 : legacyContext.msBackingStorePixelRatio) !== null && _ref3 !== void 0 ? _ref3 : legacyContext.oBackingStorePixelRatio) !== null && _ref2 !== void 0 ? _ref2 : legacyContext.backingStorePixelRatio) !== null && _ref !== void 0 ? _ref : 1;
+    return devicePixelRatio / backingStorePixelRatio;
+  }
+
+  /**
+   * Get the class name from the cursor provided
+   * @param cursor The grid cursor to use
+   * @returns Class name with the grid-cursor prefix or null if no cursor provided
+   */
+  static getCursorClassName(cursor) {
+    return cursor != null && cursor !== '' ? "grid-cursor-".concat(cursor) : null;
+  }
+
+  // Need to disable react/sort-comp so I can put the fields here
+  /* eslint-disable react/sort-comp */
+
+  /* eslint-enable react/sort-comp */
+
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "renderer", void 0);
+    _defineProperty(this, "metricCalculator", void 0);
+    _defineProperty(this, "canvas", void 0);
+    _defineProperty(this, "canvasContext", void 0);
+    _defineProperty(this, "animationFrame", void 0);
+    _defineProperty(this, "prevMetrics", void 0);
+    _defineProperty(this, "metrics", void 0);
+    _defineProperty(this, "renderState", void 0);
+    _defineProperty(this, "documentCursor", void 0);
+    _defineProperty(this, "dragTimer", void 0);
+    _defineProperty(this, "keyHandlers", void 0);
+    _defineProperty(this, "mouseHandlers", void 0);
+    _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 {
+      isStuckToBottom,
+      isStuckToRight,
+      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.renderState = {};
+
+    // 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.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 GridTokenMouseHandler(825), 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,
+      // The scroll offset of the top/left cell. 0,0 means the cell is at the top left
+      // Should be less than the width of the column
+      topOffset: 0,
+      leftOffset: 0,
+      // current column/row that user is dragging
+      draggingColumn: null,
+      draggingRow: null,
+      // Offset when dragging a row
+      draggingRowOffset: null,
+      // When drawing header separators for resizing
+      draggingColumnSeparator: null,
+      draggingRowSeparator: null,
+      isDraggingHorizontalScrollBar: false,
+      isDraggingVerticalScrollBar: false,
+      // Anything is performing a drag, for blocking hover rendering
+      isDragging: false,
+      // The coordinates of the mouse. May be outside of the canvas
+      mouseX: null,
+      mouseY: null,
+      // Move operations the user has performed on this grids columns/rows
+      movedColumns,
+      movedRows,
+      // Cursor (highlighted cell) location and active selected range
+      cursorRow: null,
+      cursorColumn: null,
+      selectionStartRow: null,
+      selectionStartColumn: null,
+      selectionEndRow: null,
+      selectionEndColumn: null,
+      // Currently selected ranges and previously selected ranges
+      // Store the previously selected ranges to determine if the new selection should
+      // deselect again (if it's the same range)
+      selectedRanges: EMPTY_ARRAY,
+      lastSelectedRanges: EMPTY_ARRAY,
+      // The mouse cursor style to use when hovering over the grid element
+      cursor: null,
+      // { column: number, row: number, selectionRange: [number, number], value: string | null, isQuickEdit?: boolean }
+      // The cell that is currently being edited
+      editingCell: null,
+      isStuckToBottom,
+      isStuckToRight
+    };
+  }
+  componentDidMount() {
+    var _this$canvas;
+    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 = this.canvas) === null || _this$canvas === void 0 ? void 0 : _this$canvas.addEventListener('wheel', this.handleWheel, {
+      passive: false
+    });
+    window.addEventListener('resize', this.handleResize);
+    this.updateCanvas();
+
+    // apply on mount, so that it works with a static model
+    // https://github.com/deephaven/web-client-ui/issues/581
+    var {
+      isStuckToBottom,
+      isStuckToRight
+    } = this.props;
+    if (isStuckToBottom) {
+      this.scrollToBottom();
+    }
+    if (isStuckToRight) {
+      this.scrollToRight();
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      isStickyBottom,
+      isStickyRight,
+      movedColumns,
+      movedRows,
+      onMovedColumnsChanged,
+      onMoveColumnComplete,
+      onMovedRowsChanged,
+      onMoveRowComplete
+    } = this.props;
+    var {
+      isStickyBottom: prevIsStickyBottom,
+      isStickyRight: prevIsStickyRight,
+      movedColumns: prevPropMovedColumns,
+      movedRows: prevPropMovedRows
+    } = prevProps;
+    var {
+      movedColumns: prevStateMovedColumns,
+      movedRows: prevStateMovedRows
+    } = prevState;
+    var {
+      draggingColumn,
+      draggingRow,
+      movedColumns: currentStateMovedColumns,
+      movedRows: currentStateMovedRows
+    } = this.state;
+    if (prevPropMovedColumns !== movedColumns) {
+      this.setState({
+        movedColumns
+      });
+    }
+    if (prevPropMovedRows !== movedRows) {
+      this.setState({
+        movedRows
+      });
+    }
+    if (prevStateMovedColumns !== currentStateMovedColumns) {
+      onMovedColumnsChanged(currentStateMovedColumns);
+    }
+    if (prevState.draggingColumn != null && draggingColumn == null) {
+      onMoveColumnComplete(currentStateMovedColumns);
+    }
+    if (prevStateMovedRows !== currentStateMovedRows) {
+      onMovedRowsChanged(currentStateMovedRows);
+    }
+    if (prevState.draggingRow != null && draggingRow == null) {
+      onMoveRowComplete(currentStateMovedRows);
+    }
+    if (isStickyBottom !== prevIsStickyBottom) {
+      this.setState({
+        isStuckToBottom: false
+      });
+    }
+    if (isStickyRight !== prevIsStickyRight) {
+      this.setState({
+        isStuckToRight: false
+      });
+    }
+    this.updateMetrics();
+    this.requestUpdateCanvas();
+    this.checkStickyScroll();
+    if (this.validateSelection()) {
+      this.checkSelectionChange(prevState);
+    }
+  }
+  componentWillUnmount() {
+    var _this$canvas2;
+    if (this.animationFrame != null) {
+      cancelAnimationFrame(this.animationFrame);
+    }
+    (_this$canvas2 = this.canvas) === null || _this$canvas2 === void 0 ? void 0 : _this$canvas2.removeEventListener('wheel', this.handleWheel);
+    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(this.context, theme);
+  }
+  getGridPointFromEvent(event) {
+    assertIsDefined(this.canvas);
+    var rect = this.canvas.getBoundingClientRect();
+    var x = event.clientX - rect.left;
+    var y = event.clientY - rect.top;
+    return this.getGridPointFromXY(x, y);
+  }
+  getGridPointFromXY(x, y) {
+    if (!this.metrics) throw new Error('metrics must be set');
+    return GridUtils.getGridPointFromXY(x, y, this.metrics);
+  }
+  getMetricState() {
+    var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
+    var theme = this.getTheme();
+    var {
+      model,
+      stateOverride
+    } = this.props;
+    if (!this.canvasContext || !this.canvas) {
+      throw new Error('Canvas and context must be defined to get metrics');
+    }
+    var context = this.canvasContext;
+    var width = this.canvas.clientWidth;
+    var height = this.canvas.clientHeight;
+    var {
+      left,
+      top,
+      leftOffset,
+      topOffset,
+      movedColumns,
+      movedRows,
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar,
+      draggingColumn
+    } = state;
+    return _objectSpread({
+      left,
+      top,
+      leftOffset,
+      topOffset,
+      width,
+      height,
+      context,
+      theme,
+      model,
+      movedColumns,
+      movedRows,
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar,
+      draggingColumn
+    }, stateOverride);
+  }
+  getKeyHandlers() {
+    var {
+      keyHandlers
+    } = this.props;
+    return this.getCachedKeyHandlers(keyHandlers);
+  }
+  getMouseHandlers() {
+    var {
+      mouseHandlers
+    } = this.props;
+    return this.getCachedMouseHandlers(mouseHandlers);
+  }
+
+  /**
+   * Translate from the provided visible index to the model index
+   * @param columnIndex The column index to get the model for
+   * @returns The model index
+   */
+  getModelColumn(columnIndex) {
+    var _this$metrics, _this$metrics$modelCo;
+    var modelIndex = (_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);
+    if (modelIndex === undefined) {
+      throw new Error("Unable to get ModelIndex for column ".concat(columnIndex));
+    }
+    return modelIndex;
+  }
+
+  /**
+   * Translate from the provided visible index to the model index
+   * @param rowIndex The row index to get the model for
+   * @returns The model index
+   */
+  getModelRow(rowIndex) {
+    var _this$metrics2, _this$metrics2$modelR;
+    var modelIndex = (_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 (modelIndex === undefined) {
+      throw new Error("Unable to get ModelIndex for row ".concat(rowIndex));
+    }
+    return modelIndex;
+  }
+
+  /**
+   * Toggle a row between expanded and collapsed states
+   * @param row The row to toggle expansion for
+   * @param expandDescendants True if nested rows should be expanded, false otherwise
+   */
+  toggleRowExpanded(row) {
+    var expandDescendants = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var modelRow = this.getModelRow(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 (isExpandableGridModel(model) && model.isRowExpandable(modelRow)) {
+      model.setRowExpanded(modelRow, !model.isRowExpanded(modelRow), expandDescendants);
+    }
+    this.clearSelectedRanges();
+    this.commitSelection(); // Need to commit before moving in case we're selecting same row again
+    this.moveCursorToPosition(0, row);
+    this.commitSelection();
+    this.setState({
+      isStuckToBottom: false
+    });
+  }
+
+  /**
+   * Scrolls to bottom, if not already at bottom
+   */
+  scrollToBottom() {
+    if (!this.metrics) return;
+    var {
+      bottomVisible,
+      rowCount,
+      top,
+      lastTop
+    } = this.metrics;
+    if (bottomVisible < rowCount - 1 && bottomVisible > 0 || top > lastTop) {
+      this.setState({
+        top: lastTop
+      });
+    }
+  }
+
+  /**
+   * Scrolls to right, if not already at right
+   */
+  scrollToRight() {
+    if (!this.metrics) return;
+    var {
+      rightVisible,
+      columnCount,
+      left,
+      lastLeft
+    } = this.metrics;
+    if (rightVisible < columnCount - 1 && rightVisible > 0 || left > lastLeft) {
+      this.setState({
+        left: lastLeft
+      });
+    }
+  }
+
+  /**
+   * Allows the selected ranges to be set programatically
+   * Will update the cursor and selection start/end based on the new ranges
+   * @param gridRanges The new selected ranges to set
+   */
+  setSelectedRanges(gridRanges) {
+    var {
+      model
+    } = this.props;
+    var {
+      columnCount,
+      rowCount
+    } = model;
+    var {
+      cursorRow,
+      cursorColumn,
+      selectedRanges
+    } = this.state;
+    this.setState({
+      selectedRanges: gridRanges,
+      lastSelectedRanges: selectedRanges
+    });
+    if (gridRanges.length > 0) {
+      var range = GridRange.boundedRange(gridRanges[0], columnCount, rowCount);
+      var newCursorRow = cursorRow;
+      var newCursorColumn = cursorColumn;
+      if (!range.containsCell(cursorColumn, cursorRow)) {
+        ({
+          row: newCursorRow,
+          column: newCursorColumn
+        } = range.startCell());
+      }
+      this.setState({
+        selectionStartColumn: range.startColumn,
+        selectionStartRow: range.startRow,
+        selectionEndColumn: range.endColumn,
+        selectionEndRow: range.endRow,
+        cursorColumn: newCursorColumn,
+        cursorRow: newCursorRow
+      });
+    }
+  }
+  initContext() {
+    var {
+      canvas
+    } = this;
+    var {
+      canvasOptions
+    } = this.props;
+    if (!canvas) throw new Error('Canvas not set');
+    this.canvasContext = canvas.getContext('2d', canvasOptions);
+  }
+  requestUpdateCanvas() {
+    if (this.animationFrame != null) {
+      return;
+    }
+    this.animationFrame = requestAnimationFrame(() => {
+      this.animationFrame = null;
+      this.updateCanvas();
+    });
+  }
+  updateCanvas() {
+    this.updateCanvasScale();
+    this.updateMetrics();
+    this.updateRenderState();
+    var {
+      canvasContext,
+      metrics,
+      renderState
+    } = this;
+    assertNotNull(canvasContext);
+    assertNotNull(metrics);
+    assertNotNull(renderState);
+    this.renderer.configureContext(canvasContext, renderState);
+    var {
+      onViewChanged
+    } = this.props;
+    onViewChanged(metrics);
+    this.drawCanvas(metrics);
+  }
+  updateCanvasScale() {
+    var {
+      canvas,
+      canvasContext
+    } = this;
+    if (!canvas) throw new Error('canvas not set');
+    if (!canvasContext) throw new Error('canvasContext not set');
+    if (!canvas.parentElement) throw new Error('Canvas has no parent element');
+    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 rect = canvas.parentElement.getBoundingClientRect();
+    var width = Math.floor(rect.width);
+    var height = Math.floor(rect.height);
+    canvas.style.width = "".concat(width, "px");
+    canvas.style.height = "".concat(height, "px");
+    canvas.width = width * scale;
+    canvas.height = height * scale;
+    canvasContext.scale(scale, scale);
+  }
+  updateScrollBounds() {
+    if (!this.metrics) throw new Error('metrics not set');
+    var {
+      left,
+      top
+    } = this.state;
+    var {
+      lastLeft,
+      lastTop
+    } = this.metrics;
+    if (left > lastLeft) {
+      this.setState({
+        left: lastLeft,
+        leftOffset: 0
+      });
+    }
+    if (top > lastTop) {
+      this.setState({
+        top: lastTop,
+        topOffset: 0
+      });
+    }
+  }
+
+  /**
+   * Compares the current metrics with the previous metrics to see if we need to scroll when it is stuck to the bottom or the right
+   */
+  checkStickyScroll() {
+    if (!this.metrics) {
+      return;
+    }
+    if (this.prevMetrics) {
+      var {
+        rowCount,
+        columnCount,
+        height,
+        width
+      } = this.metrics;
+      var {
+        rowCount: prevRowCount,
+        columnCount: prevColumnCount,
+        height: prevHeight,
+        width: prevWidth
+      } = this.prevMetrics;
+      if (prevRowCount !== rowCount || height !== prevHeight) {
+        var {
+          isStuckToBottom
+        } = this.state;
+        if (isStuckToBottom) {
+          this.scrollToBottom();
+        }
+      }
+      if (prevColumnCount !== columnCount || width !== prevWidth) {
+        var {
+          isStuckToRight
+        } = this.state;
+        if (isStuckToRight) {
+          this.scrollToRight();
+        }
+      }
+    }
+    this.prevMetrics = this.metrics;
+  }
+  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);
+    this.updateScrollBounds();
+    return this.metrics;
+  }
+
+  /**
+   * Check if the selection state has changed, and call the onSelectionChanged callback if they have
+   * @param prevState The previous grid state
+   */
+  checkSelectionChange(prevState) {
+    var {
+      selectedRanges: oldSelectedRanges
+    } = prevState;
+    var {
+      selectedRanges
+    } = this.state;
+    if (selectedRanges !== oldSelectedRanges) {
+      var {
+        onSelectionChanged
+      } = this.props;
+      onSelectionChanged(selectedRanges);
+    }
+  }
+
+  /**
+   * Validate the current selection, and reset if it is invalid
+   * @returns True if the selection is valid, false if the selection was invalid and has been reset
+   */
+  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: []
+        });
+        return false;
+      }
+    }
+    return true;
+  }
+
+  /**
+   * Clears all selected ranges
+   */
+  clearSelectedRanges() {
+    var {
+      selectedRanges
+    } = this.state;
+    this.setState({
+      selectedRanges: [],
+      lastSelectedRanges: selectedRanges
+    });
+  }
+
+  /** Clears all but the last selected range */
+  trimSelectedRanges() {
+    var {
+      selectedRanges
+    } = this.state;
+    if (selectedRanges.length > 0) {
+      this.setState({
+        selectedRanges: selectedRanges.slice(selectedRanges.length - 1)
+      });
+    }
+  }
+
+  /**
+   * Begin a selection operation at the provided location
+   * @param column Column where the selection is beginning
+   * @param row Row where the selection is beginning
+   */
+  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 column The column index to move the cursor to
+   * @param row The row index to move the cursor to
+   * @param extendSelection Whether to extend the current selection (eg. holding Shift)
+   * @param 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) {
+          var _lastSelectedRange$st, _lastSelectedRange$st2, _lastSelectedRange$en, _lastSelectedRange$en2;
+          left = autoSelectRow !== undefined && autoSelectRow ? null : Math.min(column !== null && column !== void 0 ? column : 0, (_lastSelectedRange$st = lastSelectedRange.startColumn) !== null && _lastSelectedRange$st !== void 0 ? _lastSelectedRange$st : 0);
+          top = autoSelectColumn !== undefined && autoSelectColumn ? null : Math.min(row !== null && row !== void 0 ? row : 0, (_lastSelectedRange$st2 = lastSelectedRange.startRow) !== null && _lastSelectedRange$st2 !== void 0 ? _lastSelectedRange$st2 : 0);
+          right = autoSelectRow !== undefined && autoSelectRow ? null : Math.max(column !== null && column !== void 0 ? column : 0, (_lastSelectedRange$en = lastSelectedRange.endColumn) !== null && _lastSelectedRange$en !== void 0 ? _lastSelectedRange$en : 0);
+          bottom = autoSelectColumn !== undefined && autoSelectColumn ? null : Math.max(row !== null && row !== void 0 ? row : 0, (_lastSelectedRange$en2 = lastSelectedRange.endRow) !== null && _lastSelectedRange$en2 !== void 0 ? _lastSelectedRange$en2 : 0);
+        } else {
+          left = lastSelectedRange.startColumn;
+          top = lastSelectedRange.startRow;
+          if (selectionStartColumn != null || selectionStartRow != null) {
+            if (autoSelectRow === undefined || !autoSelectRow) {
+              left = selectionStartColumn;
+            }
+            if (autoSelectColumn === undefined || !autoSelectColumn) {
+              top = selectionStartRow;
+            }
+          }
+          right = autoSelectRow !== undefined && autoSelectRow ? null : column;
+          bottom = autoSelectColumn !== undefined && autoSelectColumn ? null : row;
+        }
+        var selectedRange = GridRange.makeNormalized(left, top, right, bottom);
+        if (lastSelectedRange.equals(selectedRange)) {
+          return null;
+        }
+        var _newRanges = [...selectedRanges];
+        _newRanges[_newRanges.length - 1] = selectedRange;
+        return {
+          selectedRanges: _newRanges,
+          selectionEndColumn: column,
+          selectionEndRow: row
+        };
+      }
+      var newRanges = [...selectedRanges];
+      var selectedColumn = autoSelectRow !== undefined && autoSelectRow ? null : column;
+      var selectedRow = autoSelectColumn !== undefined && 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 !== undefined && 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: [],
+          cursorColumn: null,
+          cursorRow: null
+        };
+      }
+      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];
+        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;
+          }
+        }
+        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;
+        }
+      }
+      if (newSelectedRanges.length === 0) {
+        newCursorColumn = null;
+        newCursorRow = null;
+      }
+      return {
+        cursorRow: newCursorRow,
+        cursorColumn: newCursorColumn,
+        selectedRanges: newSelectedRanges,
+        lastSelectedRanges: selectedRanges
+      };
+    });
+  }
+  setFocusRow(focusedRow) {
+    var _userRowHeights$get;
+    if (!this.metrics || !this.prevMetrics) {
+      return;
+    }
+    var {
+      gridY,
+      height,
+      lastTop,
+      userRowHeights,
+      rowHeight
+    } = this.metrics;
+    var tableHeight = height - gridY;
+    var halfViewportHeight = Math.round(tableHeight / 2) + ((_userRowHeights$get = userRowHeights.get(focusedRow)) !== null && _userRowHeights$get !== void 0 ? _userRowHeights$get : rowHeight);
+    var metricState = this.getMetricState();
+    var newTop = this.metricCalculator.getLastTop(metricState, focusedRow + 1, halfViewportHeight);
+    this.setState({
+      top: Math.min(lastTop, newTop),
+      selectedRanges: [new GridRange(null, focusedRow, null, focusedRow)],
+      isStuckToBottom: false
+    });
+    var {
+      cursorColumn
+    } = this.state;
+    this.moveCursorToPosition(cursorColumn, focusedRow, false, false);
+  }
+
+  /**
+   * Set the selection to the entire grid
+   */
+  selectAll() {
+    var {
+      model,
+      theme
+    } = this.props;
+    var {
+      autoSelectRow,
+      autoSelectColumn
+    } = theme;
+    var top = autoSelectColumn !== undefined && autoSelectColumn ? null : 0;
+    var bottom = autoSelectColumn !== undefined && autoSelectColumn ? null : model.rowCount - 1;
+    var left = autoSelectRow !== undefined && autoSelectRow ? null : 0;
+    var right = autoSelectRow !== undefined && autoSelectRow ? null : model.columnCount - 1;
+    this.setSelectedRanges([new GridRange(left, top, right, bottom)]);
+  }
+
+  /**
+   * Move the cursor in relation to the current cursor position
+   * @param deltaColumn Number of columns to move the cursor
+   * @param deltaRow Number of rows to move the cursor
+   * @param extendSelection True if the current selection should be extended, false to start a new selection
+   */
+  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);
+    }
+  }
+
+  /**
+   * Move the cursor in the provided selection direction
+   * @param 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);
+    }
+    if (nextCursor != null) {
+      var {
+        column,
+        row
+      } = nextCursor;
+      this.setState({
+        cursorColumn: column,
+        cursorRow: row
+      });
+      if (!GridRange.containsCell(selectedRanges, column, row)) {
+        this.setState({
+          selectedRanges: [GridRange.makeCell(column, row)],
+          selectionStartColumn: column,
+          selectionStartRow: row,
+          selectionEndColumn: column,
+          selectionEndRow: row
+        });
+      }
+      this.moveViewToCell(nextCursor.column, nextCursor.row);
+    }
+  }
+
+  /**
+   * Move a cursor to the specified position in the grid.
+   * @param column The column index to move the cursor to
+   * @param row The row index to move the cursor to
+   * @param extendSelection Whether to extend the current selection (eg. holding Shift)
+   * @param keepCursorInView Whether to move the viewport so that the cursor is in view
+   * @param 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 column The column index to bring into view
+   * @param row The row index to bring into view
+   */
+  moveViewToCell(column, row) {
+    if (!this.metrics) throw new Error('metrics not set');
+    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 (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.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 viewState New state properties to set.
+   * @param forceUpdate Whether to force an update.
+   */
+  setViewState(viewState) {
+    var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    if (!this.metrics) throw new Error('metrics not set');
+    var {
+      isStickyBottom,
+      isStickyRight
+    } = this.props;
+    var {
+      top,
+      left
+    } = viewState;
+    var {
+      lastTop,
+      lastLeft
+    } = this.metrics;
+    if (top != null) {
+      this.setState({
+        isStuckToBottom: isStickyBottom && top >= lastTop
+      });
+    }
+    if (left != null) {
+      this.setState({
+        isStuckToRight: isStickyRight && left >= lastLeft
+      });
+    }
+    this.setState(viewState);
+    if (forceUpdate) {
+      this.forceUpdate();
+    }
+  }
+
+  /**
+   * Start editing the data at the given index
+   *
+   * @param column The visible column index to start editing
+   * @param row The visible row index to start editing
+   * @param isQuickEdit If this is a quick edit (the arrow keys can commit)
+   * @param selectionRange The tuple [start,end] text selection range of the value to select when editing
+   * @param 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;
+    var value = arguments.length > 4 ? arguments[4] : undefined;
+    var {
+      model
+    } = this.props;
+    if (!isEditableGridModel(model)) throw new Error('model is not editable');
+    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);
+  }
+
+  /**
+   * Check if a value is valid for a specific cell
+   * @param column Column index of the cell to check
+   * @param row Row index of the cell to check
+   * @param value Value to check
+   * @returns True if the value is valid for the provided cell, false otherwise
+   */
+  isValidForCell(column, row, value) {
+    var {
+      model
+    } = this.props;
+    var modelColumn = this.getModelColumn(column);
+    var modelRow = this.getModelRow(row);
+    return isEditableGridModel(model) && 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 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 {
+        assertIsEditableGridModel(model);
+        if (!model.isEditable || !selectedRanges.every(range => model.isEditableRange(range))) {
+          throw new PasteError("Can't paste in to read-only area.");
+        }
+        if (selectedRanges.length <= 0) {
+          throw new PasteError('Select an area to paste to.');
+        }
+        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, (column, row) => {
+            _edits.push({
+              column,
+              row,
+              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 => {
+          var _range$startColumn, _range$startRow;
+          return GridRange.cellCount([range]) === 1 && ((_range$startColumn = range.startColumn) !== null && _range$startColumn !== void 0 ? _range$startColumn : 0) + tableWidth <= columnCount && ((_range$startRow = range.startRow) !== null && _range$startRow !== void 0 ? _range$startRow : 0) + tableHeight <= rowCount;
+        })) {
+          // Remap the selected ranges
+          _ranges = _ranges.map(range => {
+            var _range$startColumn2, _range$startRow2;
+            return new GridRange(range.startColumn, range.startRow, ((_range$startColumn2 = range.startColumn) !== null && _range$startColumn2 !== void 0 ? _range$startColumn2 : 0) + tableWidth - 1, ((_range$startRow2 = range.startRow) !== null && _range$startRow2 !== void 0 ? _range$startRow2 : 0) + tableHeight - 1);
+          });
+          _this.setSelectedRanges(_ranges);
+        }
+        if (!_ranges.every(range => GridRange.rowCount([range]) === tableHeight && GridRange.columnCount([range]) === tableWidth)) {
+          throw new PasteError('Copy and paste area are not same size.');
+        }
+        var edits = [];
+        _ranges.forEach(range => {
+          for (var x = 0; x < tableWidth; x += 1) {
+            for (var y = 0; y < tableHeight; y += 1) {
+              var _range$startColumn3, _range$startRow3;
+              edits.push({
+                column: ((_range$startColumn3 = range.startColumn) !== null && _range$startColumn3 !== void 0 ? _range$startColumn3 : 0) + x,
+                row: ((_range$startRow3 = range.startRow) !== null && _range$startRow3 !== void 0 ? _range$startRow3 : 0) + y,
+                text: value[y][x]
+              });
+            }
+          }
+        });
+        yield model.setValues(edits);
+      } catch (e) {
+        var {
+          onError
+        } = _this.props;
+        onError(e instanceof Error ? e : new Error("".concat(e)));
+      }
+    })();
+  }
+
+  /**
+   * Set a value to a specific cell. If the value is not valid for that cell, do not set it
+   * @param column Column index to set the value for
+   * @param row Row index to set the value for
+   * @param value Value to set at that cell
+   * @returns true If the value was valid and attempted to be set, false is it was not valid
+   */
+  setValueForCell(column, row, value) {
+    var {
+      model
+    } = this.props;
+    assertIsEditableGridModel(model);
+    var modelColumn = this.getModelColumn(column);
+    var modelRow = this.getModelRow(row);
+    if (model.isValidForCell(modelColumn, modelRow, value)) {
+      model.setValueForCell(modelColumn, modelRow, value);
+      return true;
+    }
+    return false;
+  }
+
+  /**
+   * Set a value on all the ranges provided
+   * @param ranges Ranges to set
+   * @param value The value to set on all the ranges
+   */
+  setValueForRanges(ranges, value) {
+    var {
+      model
+    } = this.props;
+    var {
+      movedColumns,
+      movedRows
+    } = this.state;
+    var modelRanges = GridUtils.getModelRanges(ranges, movedColumns, movedRows);
+    if (isEditableGridModel(model)) {
+      model.setValueForRanges(modelRanges, value);
+    }
+  }
+
+  /**
+   * Check if a given cell is within the current selection
+   * @param row Row to check
+   * @param column Column to check
+   * @returns True if the cell is in the current selection, false otherwise
+   */
+  isSelected(row, column) {
+    var {
+      selectedRanges
+    } = this.state;
+    for (var i = 0; i < selectedRanges.length; i += 1) {
+      var _selectedRange$endRow, _selectedRange$endCol;
+      var selectedRange = selectedRanges[i];
+      var rowSelected = selectedRange.startRow === null || selectedRange.startRow <= row && row <= ((_selectedRange$endRow = selectedRange.endRow) !== null && _selectedRange$endRow !== void 0 ? _selectedRange$endRow : 0);
+      var columnSelected = selectedRange.startColumn === null || selectedRange.startColumn <= column && column <= ((_selectedRange$endCol = selectedRange.endColumn) !== null && _selectedRange$endCol !== void 0 ? _selectedRange$endCol : 0);
+      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;
+    if (this.documentCursor != null) {
+      document.documentElement.classList.remove(this.documentCursor);
+    }
+    this.documentCursor = Grid.getCursorClassName(cursor);
+    if (this.documentCursor != null) {
+      document.documentElement.classList.add(this.documentCursor);
+    }
+    document.documentElement.classList.add('grid-block-events');
+  }
+  removeDocumentCursor() {
+    if (this.documentCursor != null) {
+      document.documentElement.classList.remove(this.documentCursor);
+      document.documentElement.classList.remove('grid-block-events');
+      this.documentCursor = null;
+    }
+  }
+  startDragTimer(event) {
+    this.stopDragTimer();
+    var mouseEvent = new MouseEvent('custom', event.nativeEvent);
+    this.dragTimer = setTimeout(() => {
+      this.handleMouseDrag(mouseEvent);
+    }, Grid.dragTimeout);
+  }
+  stopDragTimer() {
+    if (this.dragTimer) {
+      clearTimeout(this.dragTimer);
+      this.dragTimer = null;
+    }
+  }
+
+  /**
+   * Draw the grid with the metrics provided
+   * When scrolling you've have to re-draw the whole canvas. As a consequence, all these drawing methods
+   * must be very quick.
+   * @param metrics Metrics to use for rendering the grid
+   */
+  drawCanvas() {
+    var metrics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.updateMetrics();
+    if (!this.canvas) throw new Error('canvas is not set');
+    if (!this.canvasContext) throw new Error('context not set');
+    var {
+      renderer,
+      canvasContext: context,
+      renderState
+    } = this;
+    context.save();
+    renderer.drawCanvas(renderState);
+    context.restore();
+  }
+
+  /**
+   * Set focus to this grid element
+   */
+  focus() {
+    var _this$canvas3;
+    (_this$canvas3 = this.canvas) === null || _this$canvas3 === void 0 ? void 0 : _this$canvas3.focus();
+  }
+
+  /**
+   * Check if this grid is currently focused
+   * @returns True if the active element is this grid
+   */
+  isFocused() {
+    return document.activeElement === this.canvas;
+  }
+
+  /**
+   * Handle a mouse click event. Pass the event to the registered mouse handlers until one handles it.
+   * Focuses the grid after the click.
+   * @param event The mouse event
+   */
+  handleClick(event) {
+    var _this$canvas4;
+    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) !== false) {
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+      }
+    }
+    (_this$canvas4 = this.canvas) === null || _this$canvas4 === void 0 ? void 0 : _this$canvas4.focus();
+  }
+
+  /**
+   * Handle a mouse context menu event. Pass the event to the registered mouse handlers until one handles it.
+   * @param event The mouse event triggering the context menu
+   */
+  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) !== false) {
+        event.stopPropagation();
+        event.preventDefault();
+        break;
+      }
+    }
+  }
+
+  /**
+   * Handle a key down event from the keyboard. Pass the event to the registered keyboard handlers until one handles it.
+   * @param event Keyboard event
+   */
+  handleKeyDown(event) {
+    var keyHandlers = this.getKeyHandlers();
+    for (var i = 0; i < keyHandlers.length; i += 1) {
+      var keyHandler = keyHandlers[i];
+      var result = keyHandler.onDown(event, this);
+      if (result !== false) {
+        var _options$stopPropagat, _options$preventDefau;
+        var options = result;
+        if ((_options$stopPropagat = options === null || options === void 0 ? void 0 : options.stopPropagation) !== null && _options$stopPropagat !== void 0 ? _options$stopPropagat : true) event.stopPropagation();
+        if ((_options$preventDefau = options === null || options === void 0 ? void 0 : options.preventDefault) !== null && _options$preventDefau !== void 0 ? _options$preventDefau : true) event.preventDefault();
+        break;
+      }
+    }
+  }
+
+  /**
+   * Notify all of the mouse handlers for this grid of a mouse event.
+   * @param functionName The name of the function in the mouse handler to call
+   * @param event The mouse event to notify
+   * @param updateCoordinates Whether to update the mouse coordinates
+   * @param 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] != null && mouseHandler[functionName](gridPoint, this, event);
+      if (result !== false) {
+        var _options$stopPropagat2, _options$preventDefau2;
+        if (mouseHandler.cursor != null) {
+          ({
+            cursor
+          } = mouseHandler);
+          if (addCursorToDocument) {
+            this.addDocumentCursor(cursor);
+          }
+        }
+
+        // result is bool or object, events are stopped by default
+        var options = result;
+        if ((_options$stopPropagat2 = options === null || options === void 0 ? void 0 : options.stopPropagation) !== null && _options$stopPropagat2 !== void 0 ? _options$stopPropagat2 : true) event.stopPropagation();
+        if ((_options$preventDefau2 = options === null || options === void 0 ? void 0 : options.preventDefault) !== null && _options$preventDefau2 !== void 0 ? _options$preventDefau2 : true) event.preventDefault();
+        break;
+      }
+    }
+    this.setState({
+      cursor
+    });
+    if (updateCoordinates) {
+      var {
+        x,
+        y
+      } = gridPoint;
+      this.setState({
+        mouseX: x,
+        mouseY: y
+      });
+    }
+  }
+  handleMouseDown(event) {
+    window.addEventListener('mousemove', this.handleMouseDrag, true);
+    window.addEventListener('mouseup', this.handleMouseUp, true);
+    if (event.button != null && event.button !== 0) {
+      return;
+    }
+    this.notifyMouseHandlers('onDown', event);
+    this.startDragTimer(event);
+  }
+  handleDoubleClick(event) {
+    this.notifyMouseHandlers('onDoubleClick', event);
+  }
+  handleMouseMove(event) {
+    this.notifyMouseHandlers('onMove', event);
+  }
+  handleMouseLeave(event) {
+    this.notifyMouseHandlers('onLeave', event, false);
+    this.setState({
+      mouseX: null,
+      mouseY: null
+    });
+  }
+  handleMouseDrag(event) {
+    this.setState({
+      isDragging: true
+    });
+    this.notifyMouseHandlers('onDrag', 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('onUp', 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.updateCanvas();
+    if (!this.metrics) throw new Error('metrics not set');
+    this.forceUpdate();
+  }
+  handleWheel(event) {
+    this.notifyMouseHandlers('onWheel', event);
+    if (event.defaultPrevented) {
+      return;
+    }
+    var {
+      metricCalculator,
+      metrics
+    } = this;
+    var metricState = this.getMetricState();
+    if (!metrics) throw new Error('metrics not set');
+    var {
+      lastTop,
+      lastLeft,
+      columnCount,
+      rowCount,
+      scrollableContentWidth,
+      scrollableViewportWidth,
+      scrollableContentHeight,
+      scrollableViewportHeight,
+      hasHorizontalBar,
+      hasVerticalBar
+    } = metrics;
+    var {
+      top,
+      left,
+      topOffset,
+      leftOffset
+    } = metrics;
+    var theme = this.getTheme();
+    var {
+      deltaX,
+      deltaY
+    } = GridUtils.getScrollDelta(event, 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 (hasHorizontalBar && deltaX !== 0) {
+      leftOffset += deltaX;
+      deltaX = 0;
+      if (columnCount > 1) {
+        // no scrolling needed, at directional edge
+        if (leftOffset > 0 && left >= lastLeft || leftOffset < 0 && left <= 0) {
+          leftOffset = 0;
+          break;
+        }
+      } else {
+        // single column at edge
+        if (leftOffset <= 0) {
+          leftOffset = 0;
+          break;
+        }
+        var maxLeftOffset = scrollableContentWidth - scrollableViewportWidth;
+        if (leftOffset >= maxLeftOffset) {
+          leftOffset = maxLeftOffset;
+          break;
+        }
+      }
+      if (leftOffset > 0) {
+        var _metrics$allColumnWid;
+        // scroll right
+
+        // get width of next column
+        var columnWidth = (_metrics$allColumnWid = metrics.allColumnWidths.get(left)) !== null && _metrics$allColumnWid !== void 0 ? _metrics$allColumnWid : 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 && columnCount > 1) {
+          // 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$allColumnWid2;
+        // scroll left
+
+        // get width of next column
+        var _columnWidth = (_metrics$allColumnWid2 = metrics.allColumnWidths.get(left - 1)) !== null && _metrics$allColumnWid2 !== void 0 ? _metrics$allColumnWid2 : metricCalculator.getVisibleColumnWidth(left - 1, metricState);
+        if (Math.abs(leftOffset) <= _columnWidth && theme.scrollSnapToColumn && columnCount > 1) {
+          // if there's still a balance to travel but its less then a column and snapping is on
+          leftOffset = 0;
+          left -= 1;
+        } else {
+          // remove width from balance and advance by 1 column
+          deltaX = leftOffset + _columnWidth;
+          leftOffset = 0;
+          left -= 1;
+        }
+      }
+    }
+
+    // iterate through each row to determine row height and figure out how far to scroll
+    // get row height of next row to scroll to, and subract it from the remaining distance to travel
+    while (hasVerticalBar && deltaY !== 0) {
+      topOffset += deltaY;
+      deltaY = 0;
+      if (rowCount > 1) {
+        // no scrolling needed, at directional edge
+        if (topOffset > 0 && top >= lastTop || topOffset < 0 && top <= 0) {
+          topOffset = 0;
+          break;
+        }
+      } else {
+        // single row at edge
+        if (topOffset <= 0) {
+          topOffset = 0;
+          break;
+        }
+        var maxTopOffset = scrollableContentHeight - scrollableViewportHeight;
+        if (topOffset >= maxTopOffset) {
+          topOffset = maxTopOffset;
+          break;
+        }
+      }
+      if (topOffset > 0) {
+        var _metrics$allRowHeight;
+        // scroll direction down
+
+        // get height of next row
+        var rowHeight = (_metrics$allRowHeight = metrics.allRowHeights.get(top)) !== null && _metrics$allRowHeight !== void 0 ? _metrics$allRowHeight : 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 && rowCount > 1) {
+          // 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$allRowHeight2;
+        // scroll direction up
+
+        // get height of next row
+        var _rowHeight = (_metrics$allRowHeight2 = metrics.allRowHeights.get(top - 1)) !== null && _metrics$allRowHeight2 !== void 0 ? _metrics$allRowHeight2 : metricCalculator.getVisibleRowHeight(top - 1, metricState);
+        if (Math.abs(topOffset) <= _rowHeight && theme.scrollSnapToRow && rowCount > 1) {
+          // 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
+    });
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  /**
+   * Handle cancelling the cell edit action
+   */
+  handleEditCellCancel() {
+    this.setState({
+      editingCell: null
+    });
+    this.focus();
+  }
+
+  /**
+   * Handle a change in the value in an editing cell
+   * @param value New value set
+   */
+  handleEditCellChange(value) {
+    this.setState(_ref5 => {
+      var {
+        editingCell
+      } = _ref5;
+      try {
+        assertIsDefined(editingCell);
+        return {
+          editingCell: _objectSpread(_objectSpread({}, editingCell), {}, {
+            value
+          })
+        };
+      } catch (e) {
+        // This case should _never_ happen, since the editingCell shouldn't be null if this method is called
+        var {
+          onError
+        } = this.props;
+        onError(e instanceof Error ? e : new Error("".concat(e)));
+        return null;
+      }
+    });
+  }
+
+  /**
+   * Commit an edit for the currently editing cell
+   * @param value Value that was committed
+   * @param options Options for committing
+   */
+  handleEditCellCommit(value) {
+    var {
+      direction = SELECTION_DIRECTION.DOWN,
+      fillRange = false
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var {
+      editingCell,
+      selectedRanges
+    } = this.state;
+    if (!editingCell) throw new Error('editingCell not set');
+    var {
+      column,
+      row
+    } = editingCell;
+    if (!this.isValidForCell(column, row, value)) {
+      // Don't allow an invalid value to be commited, the editing cell should show an error
+      if (direction === null) {
+        // If they clicked off of the editing cell, just remove focus
+        this.setState({
+          editingCell: null
+        });
+      }
+      return;
+    }
+    if (fillRange) {
+      this.setValueForRanges(selectedRanges, value);
+    } else {
+      this.setValueForCell(column, row, value);
+    }
+    if (direction !== null) {
+      this.moveCursorInDirection(direction);
+    }
+    this.setState({
+      editingCell: null
+    });
+    this.focus();
+  }
+  renderInputField() {
+    var {
+      model
+    } = this.props;
+    var {
+      editingCell
+    } = this.state;
+    var {
+      metrics
+    } = this;
+    if (editingCell == null || metrics == null || !isEditableGridModel(model)) {
+      return null;
+    }
+    var {
+      selectionRange,
+      value,
+      isQuickEdit
+    } = editingCell;
+    var {
+      column,
+      row
+    } = editingCell;
+    var {
+      gridX,
+      gridY,
+      allColumnXs,
+      allRowYs,
+      allColumnWidths,
+      allRowHeights
+    } = metrics;
+    var x = allColumnXs.get(column);
+    var y = allRowYs.get(row);
+    var w = allColumnWidths.get(column);
+    var h = allRowHeights.get(row);
+
+    // If the cell isn't visible, we still need to display an invisible cell for focus purposes
+    var wrapperStyle = x != null && y != null && w != null && h != null ? {
+      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)
+    } : undefined;
+    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
+    }));
+  }
+
+  /**
+   * Gets the render state
+   * @returns The render state
+   */
+  updateRenderState() {
+    if (!this.canvas) throw new Error('canvas is not set');
+    if (!this.canvasContext) throw new Error('context not set');
+    var {
+      cursorColumn,
+      cursorRow,
+      draggingColumn,
+      draggingColumnSeparator,
+      draggingRow,
+      draggingRowOffset,
+      draggingRowSeparator,
+      editingCell,
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar,
+      isDragging,
+      mouseX,
+      mouseY,
+      selectedRanges
+    } = this.state;
+    var {
+      model,
+      stateOverride
+    } = this.props;
+    var {
+      metrics
+    } = this;
+    var context = this.canvasContext;
+    var theme = this.getTheme();
+    var width = this.canvas.clientWidth;
+    var height = this.canvas.clientHeight;
+    assertNotNull(metrics);
+    this.renderState = _objectSpread({
+      width,
+      height,
+      context,
+      theme,
+      model,
+      metrics,
+      mouseX,
+      mouseY,
+      selectedRanges,
+      draggingColumn,
+      draggingColumnSeparator,
+      draggingRow,
+      draggingRowOffset,
+      draggingRowSeparator,
+      editingCell,
+      isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar,
+      isDragging,
+      cursorColumn,
+      cursorRow
+    }, stateOverride);
+    return this.renderState;
+  }
+  render() {
+    var {
+      cursor
+    } = this.state;
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("canvas", {
+      className: classNames('grid-canvas', Grid.getCursorClassName(cursor)),
+      ref: canvas => {
+        this.canvas = canvas;
+      },
+      onClick: this.handleClick,
+      onContextMenu: this.handleContextMenu,
+      onDoubleClick: this.handleDoubleClick,
+      onKeyDown: this.handleKeyDown,
+      onMouseDown: this.handleMouseDown,
+      onMouseMove: this.handleMouseMove,
+      onMouseLeave: this.handleMouseLeave,
+      tabIndex: 0
+    }, "Your browser does not support HTML canvas. Update your browser?"), this.renderInputField());
+  }
+}
+_defineProperty(Grid, "contextType", ThemeContext);
+_defineProperty(Grid, "defaultProps", {
+  canvasOptions: {
+    alpha: false
+  },
+  isStickyBottom: false,
+  isStickyRight: false,
+  isStuckToBottom: false,
+  isStuckToRight: false,
+  keyHandlers: EMPTY_ARRAY,
+  mouseHandlers: EMPTY_ARRAY,
+  movedColumns: EMPTY_ARRAY,
+  movedRows: EMPTY_ARRAY,
+  onError: () => undefined,
+  onSelectionChanged: () => undefined,
+  onMovedColumnsChanged: moveOperations => undefined,
+  onMoveColumnComplete: () => undefined,
+  onMovedRowsChanged: () => undefined,
+  onMoveRowComplete: () => undefined,
+  onViewChanged: metrics => undefined,
+  onTokenClicked: token => {
+    if (isLinkToken(token)) {
+      window.open(token.href, '_blank', 'noopener,noreferrer');
+    }
+  },
+  stateOverride: {},
+  theme: {
+    autoSelectColumn: false,
+    autoSelectRow: false
+  }
+});
+_defineProperty(Grid, "pixelsPerLine", 100 / 3);
+_defineProperty(Grid, "dragTimeout", 1000);
+_defineProperty(Grid, "getTheme", memoize((contextTheme, userTheme) => _objectSpread(_objectSpread(_objectSpread({}, GridTheme), contextTheme), userTheme)));
+export default Grid;
+//# sourceMappingURL=Grid.js.map