@deephaven/grid 0.22.3-beta.18 → 0.22.3-beta.21

package/dist/Grid.js

@@ -1,13 +1,8 @@
 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) { 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" */
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
@@ -27,7 +22,6 @@ 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.
@@ -52,59 +46,47 @@ class Grid extends PureComponent {
    * @returns The scale to use
    */
   static getScale(context) {
-    var devicePixelRatio = window.devicePixelRatio || 1; // backingStorePixelRatio is deprecated, but check it just in case
+    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
-    legacyContext.webkitBackingStorePixelRatio || legacyContext.mozBackingStorePixelRatio || legacyContext.msBackingStorePixelRatio || legacyContext.oBackingStorePixelRatio || legacyContext.backingStorePixelRatio || 1;
+    (_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
+  }
 
+  // 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, "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);
@@ -133,14 +115,16 @@ class Grid extends PureComponent {
     this.canvasContext = null;
     this.animationFrame = null;
     this.prevMetrics = null;
-    this.metrics = null; // Track the cursor that is currently added to the document
+    this.metrics = null;
+
+    // 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.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 = {
@@ -190,36 +174,33 @@ class Grid extends PureComponent {
       isStuckToRight
     };
   }
-
   componentDidMount() {
     var _this$canvas;
+    this.initContext();
 
-    this.initContext(); // Need to explicitly add wheel event to canvas so we can preventDefault/avoid passive listener issue
+    // 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.updateCanvasScale();
-    this.updateCanvas(); // apply on mount, so that it works with a static model
-    // https://github.com/deephaven/web-client-ui/issues/581
+    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,
@@ -247,54 +228,43 @@ class Grid extends PureComponent {
       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();
-
     if (!this.metrics || !this.prevMetrics) {
       return;
     }
-
     var {
       rowCount,
       columnCount,
@@ -307,53 +277,43 @@ class Grid extends PureComponent {
       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();
       }
     }
-
     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();
@@ -361,12 +321,10 @@ class Grid extends PureComponent {
     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();
@@ -374,11 +332,9 @@ class Grid extends PureComponent {
       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;
@@ -410,87 +366,73 @@ class Grid extends PureComponent {
       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
    */
-
-
   toggleRowExpanded(row) {
     var modelRow = this.getModelRow(row);
     var {
       model
-    } = this.props; // We only want to set expansion if the row is expandable
+    } = 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));
     }
-
     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 {
@@ -499,18 +441,16 @@ class Grid extends PureComponent {
       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 {
@@ -519,20 +459,18 @@ class Grid extends PureComponent {
       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
@@ -550,19 +488,16 @@ class Grid extends PureComponent {
       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,
@@ -573,7 +508,6 @@ class Grid extends PureComponent {
       });
     }
   }
-
   initContext() {
     var {
       canvas
@@ -584,19 +518,16 @@ class Grid extends PureComponent {
     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;
       if (!this.metrics) throw new Error('Metrics not set');
       this.updateCanvas(this.metrics);
     });
   }
-
   updateCanvas() {
     var metrics = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.updateMetrics();
     this.updateCanvasScale();
@@ -606,7 +537,6 @@ class Grid extends PureComponent {
     onViewChanged(metrics);
     this.drawCanvas(metrics);
   }
-
   updateCanvasScale() {
     var {
       canvas,
@@ -615,11 +545,11 @@ class Grid extends PureComponent {
     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
+    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);
@@ -629,7 +559,6 @@ class Grid extends PureComponent {
     canvas.height = height * scale;
     canvasContext.scale(scale, scale);
   }
-
   updateMetrics() {
     var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.state;
     this.prevMetrics = this.metrics;
@@ -640,12 +569,11 @@ class Grid extends PureComponent {
     this.metrics = metricCalculator.getMetrics(metricState);
     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
@@ -653,7 +581,6 @@ class Grid extends PureComponent {
     var {
       selectedRanges
     } = this.state;
-
     if (selectedRanges !== oldSelectedRanges) {
       var {
         onSelectionChanged
@@ -661,12 +588,11 @@ class Grid extends PureComponent {
       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
@@ -678,10 +604,8 @@ class Grid extends PureComponent {
       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({
@@ -691,14 +615,12 @@ class Grid extends PureComponent {
         return false;
       }
     }
-
     return true;
   }
+
   /**
    * Clears all selected ranges
    */
-
-
   clearSelectedRanges() {
     var {
       selectedRanges
@@ -708,27 +630,24 @@ class Grid extends PureComponent {
       lastSelectedRanges: selectedRanges
     });
   }
-  /** Clears all but the last selected range */
-
 
+  /** 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,
@@ -739,6 +658,7 @@ class Grid extends PureComponent {
       cursorRow: row
     });
   }
+
   /**
    * Moves the selection to the cell specified
    * @param column The column index to move the cursor to
@@ -746,8 +666,6 @@ class Grid extends PureComponent {
    * @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;
@@ -764,17 +682,14 @@ class Grid extends PureComponent {
         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);
@@ -782,27 +697,21 @@ class Grid extends PureComponent {
         } 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 {
@@ -811,7 +720,6 @@ class Grid extends PureComponent {
           selectionEndRow: row
         };
       }
-
       var newRanges = [...selectedRanges];
       var selectedColumn = autoSelectRow !== undefined && autoSelectRow ? null : column;
       var selectedRow = autoSelectColumn !== undefined && autoSelectColumn ? null : row;
@@ -823,14 +731,13 @@ class Grid extends PureComponent {
       };
     });
   }
+
   /**
    * 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 {
@@ -845,7 +752,6 @@ class Grid extends PureComponent {
         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.
@@ -856,17 +762,13 @@ class Grid extends PureComponent {
           cursorRow
         };
       }
-
       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
@@ -877,13 +779,10 @@ class Grid extends PureComponent {
             break;
           }
         }
-
         newSelectedRanges = GridRange.consolidate(newSelectedRanges);
       }
-
       var newCursorColumn = cursorColumn;
       var newCursorRow = cursorRow;
-
       if (!GridRange.containsCell(newSelectedRanges, cursorColumn, cursorRow)) {
         var {
           model
@@ -893,7 +792,6 @@ class Grid extends PureComponent {
           rowCount
         } = model;
         var nextCursor = GridRange.nextCell(GridRange.boundedRanges(selectedRanges, columnCount, rowCount));
-
         if (nextCursor != null) {
           ({
             column: newCursorColumn,
@@ -904,7 +802,6 @@ class Grid extends PureComponent {
           newCursorRow = null;
         }
       }
-
       return {
         cursorRow: newCursorRow,
         cursorColumn: newCursorColumn,
@@ -913,14 +810,11 @@ class Grid extends PureComponent {
       };
     });
   }
-
   setFocusRow(focusedRow) {
     var _userRowHeights$get;
-
     if (!this.metrics || !this.prevMetrics) {
       return;
     }
-
     var {
       gridY,
       height,
@@ -941,11 +835,10 @@ class Grid extends PureComponent {
     } = this.state;
     this.moveCursorToPosition(cursorColumn, focusedRow, false, false);
   }
+
   /**
    * Set the selection to the entire grid
    */
-
-
   selectAll() {
     var {
       model,
@@ -961,14 +854,13 @@ class Grid extends PureComponent {
     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,
@@ -978,7 +870,6 @@ class Grid extends PureComponent {
     } = this.state;
     var column = extendSelection ? selectionEndColumn : cursorColumn;
     var row = extendSelection ? selectionEndRow : cursorRow;
-
     if (row === null || column === null) {
       var {
         left,
@@ -993,20 +884,16 @@ class Grid extends PureComponent {
         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 {
@@ -1023,17 +910,14 @@ class Grid extends PureComponent {
     } = 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,
@@ -1043,7 +927,6 @@ class Grid extends PureComponent {
         cursorColumn: column,
         cursorRow: row
       });
-
       if (!GridRange.containsCell(selectedRanges, column, row)) {
         this.setState({
           selectedRanges: [GridRange.makeCell(column, row)],
@@ -1053,10 +936,10 @@ class Grid extends PureComponent {
           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
@@ -1065,31 +948,25 @@ class Grid extends PureComponent {
    * @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 {
@@ -1108,7 +985,6 @@ class Grid extends PureComponent {
       topOffset,
       leftOffset
     } = this.state;
-
     if (row != null && !GridUtils.isFloatingRow(row, this.metrics)) {
       if (row < topVisible) {
         top = metricCalculator.getTopForTopVisible(metricState, row);
@@ -1118,7 +994,6 @@ class Grid extends PureComponent {
         topOffset = 0;
       }
     }
-
     if (column != null && !GridUtils.isFloatingColumn(column, this.metrics)) {
       if (column < leftVisible) {
         left = metricCalculator.getLeftForLeftVisible(metricState, column);
@@ -1128,7 +1003,6 @@ class Grid extends PureComponent {
         leftOffset = 0;
       }
     }
-
     this.setViewState({
       top,
       left,
@@ -1136,14 +1010,13 @@ class Grid extends PureComponent {
       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');
@@ -1159,25 +1032,22 @@ class Grid extends PureComponent {
       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
    *
@@ -1187,8 +1057,6 @@ class Grid extends PureComponent {
    * @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;
@@ -1213,6 +1081,7 @@ class Grid extends PureComponent {
     });
     this.moveViewToCell(column, row);
   }
+
   /**
    * Check if a value is valid for a specific cell
    * @param column Column index of the cell to check
@@ -1220,8 +1089,6 @@ class Grid extends PureComponent {
    * @param value Value to check
    * @returns True if the value is valid for the provided cell, false otherwise
    */
-
-
   isValidForCell(column, row, value) {
     var {
       model
@@ -1230,17 +1097,15 @@ class Grid extends PureComponent {
     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
@@ -1250,18 +1115,14 @@ class Grid extends PureComponent {
         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 = [];
@@ -1275,43 +1136,36 @@ class Grid extends PureComponent {
           });
           yield model.setValues(_edits);
           return;
-        } // Otherwise it's a table of data
-
+        }
 
+        // 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
-
+        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,
@@ -1320,7 +1174,6 @@ class Grid extends PureComponent {
             }
           }
         });
-
         yield model.setValues(edits);
       } catch (e) {
         var {
@@ -1330,6 +1183,7 @@ class Grid extends PureComponent {
       }
     })();
   }
+
   /**
    * 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
@@ -1337,8 +1191,6 @@ class Grid extends PureComponent {
    * @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
@@ -1346,21 +1198,18 @@ class Grid extends PureComponent {
     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
@@ -1370,56 +1219,44 @@ class Grid extends PureComponent {
       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);
@@ -1427,7 +1264,6 @@ class Grid extends PureComponent {
       this.documentCursor = null;
     }
   }
-
   startDragTimer(event) {
     this.stopDragTimer();
     var mouseEvent = new MouseEvent('custom', event.nativeEvent);
@@ -1435,21 +1271,19 @@ class Grid extends PureComponent {
       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');
@@ -1483,7 +1317,6 @@ class Grid extends PureComponent {
     var theme = this.getTheme();
     var width = this.canvas.clientWidth;
     var height = this.canvas.clientHeight;
-
     var renderState = _objectSpread({
       left,
       top,
@@ -1508,68 +1341,56 @@ class Grid extends PureComponent {
       cursorColumn,
       cursorRow
     }, stateOverride);
-
     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();
@@ -1577,22 +1398,18 @@ class Grid extends PureComponent {
       }
     }
   }
+
   /**
    * 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();
@@ -1600,6 +1417,7 @@ class Grid extends PureComponent {
       }
     }
   }
+
   /**
    * 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
@@ -1607,44 +1425,36 @@ class Grid extends PureComponent {
    * @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
-
+        }
 
+        // 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,
@@ -1656,27 +1466,21 @@ class Grid extends PureComponent {
       });
     }
   }
-
   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({
@@ -1684,7 +1488,6 @@ class Grid extends PureComponent {
       mouseY: null
     });
   }
-
   handleMouseDrag(event) {
     this.setState({
       isDragging: true
@@ -1692,20 +1495,16 @@ class Grid extends PureComponent {
     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
@@ -1725,31 +1524,25 @@ class Grid extends PureComponent {
       lastLeft,
       lastTop
     } = this.metrics;
-
     if (left > lastLeft) {
       this.setState({
         left: lastLeft,
         leftOffset: 0
       });
     }
-
     if (top > lastTop) {
       this.setState({
         top: lastTop,
         topOffset: 0
       });
     }
-
     this.forceUpdate();
   }
-
   handleWheel(event) {
     this.notifyMouseHandlers('onWheel', event);
-
     if (event.defaultPrevented) {
       return;
     }
-
     var {
       metricCalculator,
       metrics
@@ -1778,13 +1571,13 @@ class Grid extends PureComponent {
     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
+    } = 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) {
@@ -1797,22 +1590,18 @@ class Grid extends PureComponent {
           leftOffset = 0;
           break;
         }
-
         var maxLeftOffset = scrollableContentWidth - scrollableViewportWidth;
-
         if (leftOffset >= maxLeftOffset) {
           leftOffset = maxLeftOffset;
           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;
@@ -1825,11 +1614,10 @@ class Grid extends PureComponent {
         }
       } 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 && columnCount > 1) {
           // if there's still a balance to travel but its less then a column and snapping is on
           leftOffset = 0;
@@ -1841,14 +1629,13 @@ class Grid extends PureComponent {
           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
-
+    }
 
+    // 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) {
@@ -1861,22 +1648,18 @@ class Grid extends PureComponent {
           topOffset = 0;
           break;
         }
-
         var maxTopOffset = scrollableContentHeight - scrollableViewportHeight;
-
         if (topOffset >= maxTopOffset) {
           topOffset = maxTopOffset;
           break;
         }
       }
-
       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;
@@ -1889,11 +1672,10 @@ class Grid extends PureComponent {
         }
       } 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 && rowCount > 1) {
           // if there's still a balance to travel but its less then a row and snapping is on
           topOffset = 0;
@@ -1906,7 +1688,6 @@ class Grid extends PureComponent {
         }
       }
     }
-
     this.setViewState({
       top,
       left,
@@ -1916,29 +1697,26 @@ class Grid extends PureComponent {
     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(_ref => {
+    this.setState(_ref5 => {
       var {
         editingCell
-      } = _ref;
-
+      } = _ref5;
       try {
         assertIsDefined(editingCell);
         return {
@@ -1956,13 +1734,12 @@ class Grid extends PureComponent {
       }
     });
   }
+
   /**
    * 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,
@@ -1977,7 +1754,6 @@ class Grid extends PureComponent {
       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) {
@@ -1986,26 +1762,21 @@ class Grid extends PureComponent {
           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
@@ -2016,11 +1787,9 @@ class Grid extends PureComponent {
     var {
       metrics
     } = this;
-
     if (editingCell == null || metrics == null || !isEditableGridModel(model)) {
       return null;
     }
-
     var {
       selectionRange,
       value,
@@ -2041,8 +1810,9 @@ class Grid extends PureComponent {
     var x = visibleColumnXs.get(column);
     var y = visibleRowYs.get(row);
     var w = visibleColumnWidths.get(column);
-    var h = visibleRowHeights.get(row); // If the cell isn't visible, we still need to display an invisible cell for focus purposes
+    var h = visibleRowHeights.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,
@@ -2074,7 +1844,6 @@ class Grid extends PureComponent {
       value: value
     }));
   }
-
   render() {
     var {
       cursor
@@ -2094,11 +1863,8 @@ class Grid extends PureComponent {
       tabIndex: 0
     }, "Your browser does not support HTML canvas. Update your browser?"), this.renderInputField());
   }
-
 }
-
 _defineProperty(Grid, "contextType", ThemeContext);
-
 _defineProperty(Grid, "defaultProps", {
   canvasOptions: {
     alpha: false
@@ -2124,12 +1890,8 @@ _defineProperty(Grid, "defaultProps", {
     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