@deephaven/grid 1.27.5-alpha-nodehttp2-config3.276eddc.0 → 1.29.0

package/dist/Grid.js

@@ -25,6 +25,9 @@ import { isExpandableGridModel } from "./ExpandableGridModel.js";
 import { assertIsEditableGridModel, isEditableGridModel } from "./EditableGridModel.js";
 import { assertIsDefined } from "./errors/index.js";
 import ThemeContext from "./ThemeContext.js";
+import { RangedSelection, assertIsRangedSelection, isRangedSelection, selectionToRanges } from "./RangedSelection.js";
+import GridA11yFallback from "./GridA11yFallback.js";
+/** Selection-related slice of `GridState`. Returned by gesture entry points. */
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
  * High performance, extendible, themeable grid component.
@@ -89,6 +92,8 @@ class Grid extends PureComponent {
     _defineProperty(this, "prevMetrics", void 0);
     _defineProperty(this, "metrics", void 0);
     _defineProperty(this, "renderState", void 0);
+    // Listeners for when the grid draws its canvas.
+    _defineProperty(this, "drawListeners", void 0);
     // 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
@@ -118,7 +123,9 @@ class Grid extends PureComponent {
     this.handleMouseUp = this.handleMouseUp.bind(this);
     this.handleResize = this.handleResize.bind(this);
     this.handleWheel = this.handleWheel.bind(this);
+    this.registerDrawListener = this.registerDrawListener.bind(this);
     this.getSelectedRanges = this.getSelectedRanges.bind(this);
+    this.getModel = this.getModel.bind(this);
     var isStuckToBottom = props.isStuckToBottom,
       isStuckToRight = props.isStuckToRight,
       metricCalculator = props.metricCalculator,
@@ -134,7 +141,8 @@ class Grid extends PureComponent {
     this.animationFrame = null;
     this.prevMetrics = null;
     this.metrics = null;
-    this.renderState = {};
+    this.renderState = null;
+    this.drawListeners = new Set();
 
     // 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
@@ -147,6 +155,10 @@ class Grid extends PureComponent {
     // 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(875), new GridSelectionMouseHandler(900)];
+
+    // Selections are immutable, so a single instance can back both selection
+    // and lastSelection until the first commit produces a fresh committed value.
+    var emptySelection = props.createEmptySelection(this.getModel);
     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,
@@ -173,18 +185,13 @@ class Grid extends PureComponent {
       // 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,
+      selection: emptySelection,
+      lastSelection: emptySelection,
+      selectedRanges: [],
+      gestureMode: null,
       // 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 }
@@ -247,7 +254,8 @@ class Grid extends PureComponent {
       onMovedRowsChanged = _this$props2.onMovedRowsChanged,
       onMoveRowComplete = _this$props2.onMoveRowComplete,
       renderer = _this$props2.renderer,
-      metricCalculator = _this$props2.metricCalculator;
+      metricCalculator = _this$props2.metricCalculator,
+      createEmptySelection = _this$props2.createEmptySelection;
     var prevIsStickyBottom = prevProps.isStickyBottom,
       prevIsStickyRight = prevProps.isStickyRight,
       prevPropMovedColumns = prevProps.movedColumns,
@@ -294,6 +302,12 @@ class Grid extends PureComponent {
     if (metricCalculator !== prevProps.metricCalculator) {
       this.metricCalculator = metricCalculator !== null && metricCalculator !== void 0 ? metricCalculator : new GridMetricCalculator();
     }
+    if (prevProps.createEmptySelection !== createEmptySelection) {
+      var empty = createEmptySelection(this.getModel);
+      stateUpdates.selection = empty;
+      stateUpdates.lastSelection = empty;
+      stateUpdates.selectedRanges = EMPTY_ARRAY;
+    }
     var updatedState = _objectSpread(_objectSpread({}, this.state), stateUpdates);
     this.updateMetrics(updatedState);
     this.requestUpdateCanvas();
@@ -425,12 +439,18 @@ class Grid extends PureComponent {
     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
+    // Programmatic install so we bypass gesture-driven deselect-on-reclick
+    // when the caller re-toggles the currently-selected row.
+    var theme = this.props.theme;
+    var range = theme.autoSelectRow === true ? new GridRange(null, row, null, row) : GridRange.makeCell(0, row);
+    this.setState(state => {
+      var newSel = state.selection.clear().withCommittedRanges([range]).withCursor(row, 0).withSelectionEnd(row, 0);
+      return {
+        selection: newSel,
+        lastSelection: newSel,
+        selectedRanges: selectionToRanges(newSel),
+        isStuckToBottom: false
+      };
     });
   }
   getStickyScrollPosition(isStickyBottom, isStickyRight) {
@@ -471,32 +491,36 @@ class Grid extends PureComponent {
     var model = this.props.model;
     var columnCount = model.columnCount,
       rowCount = model.rowCount;
-    var _this$state2 = this.state,
-      cursorRow = _this$state2.cursorRow,
-      cursorColumn = _this$state2.cursorColumn,
-      selectedRanges = _this$state2.selectedRanges;
-    this.setState({
-      selectedRanges: gridRanges,
-      lastSelectedRanges: selectedRanges
-    });
-    if (gridRanges.length > 0) {
-      var range = GridRange.boundedRange(gridRanges[0], columnCount, rowCount);
-      var newCursorRow = cursorRow;
-      var newCursorColumn = cursorColumn;
-      if (!range.containsCell(cursorColumn, cursorRow)) {
-        var _range$startCell = range.startCell();
-        newCursorRow = _range$startCell.row;
-        newCursorColumn = _range$startCell.column;
+    this.setState(state => {
+      var _state$selection = state.selection,
+        cursorRow = _state$selection.cursorRow,
+        cursorColumn = _state$selection.cursorColumn;
+      var selectionEndRow = null;
+      var selectionEndColumn = null;
+      var anchorRow = null;
+      var anchorColumn = null;
+      if (gridRanges.length > 0) {
+        var range = GridRange.boundedRange(gridRanges[0], columnCount, rowCount);
+        if (!range.containsCell(cursorColumn, cursorRow)) {
+          var _range$startCell = range.startCell();
+          cursorRow = _range$startCell.row;
+          cursorColumn = _range$startCell.column;
+        }
+        anchorColumn = range.startColumn;
+        anchorRow = range.startRow;
+        selectionEndColumn = range.endColumn;
+        selectionEndRow = range.endRow;
       }
-      this.setState({
-        selectionStartColumn: range.startColumn,
-        selectionStartRow: range.startRow,
-        selectionEndColumn: range.endColumn,
-        selectionEndRow: range.endRow,
-        cursorColumn: newCursorColumn,
-        cursorRow: newCursorRow
-      });
-    }
+      var selection = state.selection.withCommittedRanges(gridRanges, {
+        row: anchorRow,
+        column: anchorColumn
+      }).withCursor(cursorRow, cursorColumn).withSelectionEnd(selectionEndRow, selectionEndColumn);
+      return {
+        selection,
+        selectedRanges: selectionToRanges(selection),
+        lastSelection: state.selection
+      };
+    });
   }
   initContext() {
     var canvas = this.canvas;
@@ -568,9 +592,9 @@ class Grid extends PureComponent {
   }
   updateScrollBounds() {
     if (!this.metrics) throw new Error('metrics not set');
-    var _this$state3 = this.state,
-      left = _this$state3.left,
-      top = _this$state3.top;
+    var _this$state2 = this.state,
+      left = _this$state2.left,
+      top = _this$state2.top;
     var _this$metrics4 = this.metrics,
       lastLeft = _this$metrics4.lastLeft,
       lastTop = _this$metrics4.lastTop;
@@ -634,11 +658,13 @@ class Grid extends PureComponent {
    * @param prevState The previous grid state
    */
   checkSelectionChange(prevState) {
-    var oldSelectedRanges = prevState.selectedRanges;
-    var selectedRanges = this.state.selectedRanges;
-    if (selectedRanges !== oldSelectedRanges) {
-      var onSelectionChanged = this.props.onSelectionChanged;
-      onSelectionChanged(selectedRanges);
+    var selection = this.state.selection;
+    if (selection !== prevState.selection) {
+      var _this$props4 = this.props,
+        onSelectionChanged = _this$props4.onSelectionChanged,
+        onSelectionChange = _this$props4.onSelectionChange;
+      onSelectionChanged(selectionToRanges(selection));
+      onSelectionChange(selection);
     }
   }
 
@@ -647,20 +673,19 @@ class Grid extends PureComponent {
    * @returns True if the selection is valid, false if the selection was invalid and has been reset
    */
   validateSelection() {
-    var model = this.props.model;
-    var selectedRanges = this.state.selectedRanges;
-    var columnCount = model.columnCount,
-      rowCount = model.rowCount;
-    for (var i = 0; i < selectedRanges.length; i += 1) {
-      var range = selectedRanges[i];
-      if (range.endColumn != null && range.endColumn >= columnCount || range.endRow != null && range.endRow >= rowCount) {
-        // Just clear the selection rather than trying to trim it.
-        this.setState({
-          selectedRanges: [],
-          lastSelectedRanges: []
-        });
-        return false;
-      }
+    var createEmptySelection = this.props.createEmptySelection;
+    var selection = this.state.selection;
+
+    // Validate that a RangedSelection is within the bounds of the grid model
+    if (isRangedSelection(selection) && !selection.isInBounds()) {
+      // Just clear the selection rather than trying to trim it.
+      var empty = createEmptySelection(this.getModel);
+      this.setState({
+        selection: empty,
+        lastSelection: empty,
+        selectedRanges: EMPTY_ARRAY
+      });
+      return false;
     }
     return true;
   }
@@ -669,186 +694,304 @@ class Grid extends PureComponent {
    * Clears all selected ranges
    */
   clearSelectedRanges() {
-    var selectedRanges = this.state.selectedRanges;
-    this.setState({
-      selectedRanges: EMPTY_ARRAY,
-      lastSelectedRanges: selectedRanges
-    });
+    this.setState(state => ({
+      selection: state.selection.clear(),
+      lastSelection: state.selection,
+      selectedRanges: EMPTY_ARRAY
+    }));
   }
 
   /** Clears all but the last selected range */
   trimSelectedRanges() {
-    var selectedRanges = this.state.selectedRanges;
-    if (selectedRanges.length > 0) {
-      this.setState({
-        selectedRanges: selectedRanges.slice(selectedRanges.length - 1)
-      });
-    }
+    var selection = this.state.selection;
+    var trimmed = selection.trimmed();
+    this.setState({
+      selection: trimmed,
+      selectedRanges: selectionToRanges(trimmed)
+    });
   }
 
-  /** Gets the selected ranges */
+  /** Sets the selection directly, bypassing mouse/keyboard gesture state. */
+  setSelection(selection) {
+    // Sync lastSelection so the next gesture compares against the just-installed
+    // committed state; otherwise a pending → resolved swap would leave the next
+    // ctrl+click's toggle referencing the pending selection's empty keys.
+    this.setState({
+      selection,
+      lastSelection: selection,
+      selectedRanges: selectionToRanges(selection)
+    });
+  }
+
+  /** Gets the current selection */
+  getSelection() {
+    var selection = this.state.selection;
+    return selection;
+  }
+
+  /** @deprecated Use getSelection() instead */
   getSelectedRanges() {
-    var selectedRanges = this.state.selectedRanges;
-    return selectedRanges;
+    var selection = this.state.selection;
+    // toRanges() is RangedSelection-only; returns [] for keyed selections
+    return selectionToRanges(selection);
   }
 
   /**
-   * Begin a selection operation at the provided location
-   * @param column Column where the selection is beginning
-   * @param row Row where the selection is beginning
+   * Queries the current grid model.
+   * @returns The current GridModel instance.
    */
-  beginSelection(column, row) {
-    this.setState({
-      selectionStartColumn: column,
-      selectionStartRow: row,
-      selectionEndColumn: column,
-      selectionEndRow: row,
-      cursorColumn: column,
-      cursorRow: row
-    });
+  getModel() {
+    var model = this.props.model;
+    return model;
+  }
+
+  /**
+   * Extend + commit a gesture at `cursor` and return the resulting partial
+   * state. Shared by mouse click-and-release and keyboard commits.
+   *
+   * @param selection Pre-gesture selection to fold against. Cursor landing
+   * reads its extended (pre-commit) form so `KeyedSelection`'s overlay is
+   * still available.
+   * @param cursor Gesture target cell.
+   * @param mode Modifier-derived gesture mode.
+   * @param opts.moveCursor Snap the cursor to `cursor` (default true).
+   * Pass false for keyboard extend / maximize / add so the cursor stays put.
+   * @param opts.allowDeselect Whether committing on top of the same
+   * single-row / single-cell selection should deselect (mouse affordance,
+   * default true). Keyboard callers pass false so arrowing onto an
+   * already-selected cell just moves the cursor.
+   * @param opts.settle Whether the commit should finalize (deselect check,
+   * hole-punch, consolidation). Mouse-down passes false so a drag can grow
+   * the last range before mouse-up finalizes.
+   */
+  applyGestureAt(selection, cursor, mode) {
+    var _theme$autoSelectRow, _theme$autoSelectColu;
+    var opts = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+    var theme = this.props.theme;
+    var _opts$moveCursor = opts.moveCursor,
+      moveCursor = _opts$moveCursor === void 0 ? true : _opts$moveCursor,
+      _opts$allowDeselect = opts.allowDeselect,
+      allowDeselect = _opts$allowDeselect === void 0 ? true : _opts$allowDeselect,
+      _opts$settle = opts.settle,
+      settle = _opts$settle === void 0 ? true : _opts$settle;
+    var lastSelection = selection;
+    var extendOpts = {
+      mode,
+      autoSelectRow: (_theme$autoSelectRow = theme.autoSelectRow) !== null && _theme$autoSelectRow !== void 0 ? _theme$autoSelectRow : false,
+      autoSelectColumn: (_theme$autoSelectColu = theme.autoSelectColumn) !== null && _theme$autoSelectColu !== void 0 ? _theme$autoSelectColu : false
+    };
+    var extended = selection.withGestureExtend(cursor, extendOpts);
+    // `replace` snaps the cursor to the gesture; extend/maximize/add keep it put.
+    var cursorTarget = moveCursor ? cursor : {
+      row: selection.cursorRow,
+      column: selection.cursorColumn
+    };
+    var settled = extended.commitGesture(lastSelection, {
+      autoSelectRow: extendOpts.autoSelectRow,
+      cursor: cursorTarget,
+      allowDeselect,
+      settle
+    }).withSelectionEnd(cursor.row, cursor.column);
+    return {
+      selection: settled,
+      lastSelection,
+      selectedRanges: selectionToRanges(settled)
+    };
+  }
+
+  /**
+   * Start a mouse-driven selection gesture at `cursor` with the given
+   * modifier-derived `mode`. Extends the selection per `mode` semantics
+   * and commits immediately so a click without drag settles the state.
+   */
+  handleMouseSelectStart(cursor, mode) {
+    this.setState(state => _objectSpread(_objectSpread({}, this.applyGestureAt(state.selection, cursor, mode, {
+      settle: false
+    })), {}, {
+      gestureMode: mode
+    }));
   }
 
   /**
-   * 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.
+   * Extend the current mouse selection gesture to `cursor`. Transient
+   * overlay only; the settled commit runs on `handleMouseSelectEnd`.
    */
-  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;
+  handleMouseSelectDrag(cursor) {
+    var theme = this.props.theme;
     this.setState(state => {
-      var selectedRanges = state.selectedRanges,
-        selectionStartRow = state.selectionStartRow,
-        selectionStartColumn = state.selectionStartColumn;
-      var theme = this.props.theme;
-      var autoSelectRow = theme.autoSelectRow,
-        autoSelectColumn = theme.autoSelectColumn;
-      if (extendSelection && selectedRanges.length > 0) {
-        var lastSelectedRange = selectedRanges[selectedRanges.length - 1];
-        var left = null;
-        var top = null;
-        var right = null;
-        var bottom = null;
-        if (maximizePreviousRange) {
-          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));
+      var _theme$autoSelectRow2, _theme$autoSelectColu2;
+      // Additive gestures (ctrl+click, ctrl+shift+click) grow the last range
+      // via `maximize` so the prior committed selection survives the drag.
+      // Replace and shift-extend continue as `extend`, trimming to the last
+      // range.
+      var isAdditive = state.gestureMode === 'add' || state.gestureMode === 'maximize';
+      var opts = {
+        mode: isAdditive ? 'maximize' : 'extend',
+        autoSelectRow: (_theme$autoSelectRow2 = theme.autoSelectRow) !== null && _theme$autoSelectRow2 !== void 0 ? _theme$autoSelectRow2 : false,
+        autoSelectColumn: (_theme$autoSelectColu2 = theme.autoSelectColumn) !== null && _theme$autoSelectColu2 !== void 0 ? _theme$autoSelectColu2 : false
+      };
+      var extended = state.selection.withGestureExtend(cursor, opts).withSelectionEnd(cursor.row, cursor.column);
       return {
-        selectedRanges: newRanges,
-        selectionEndColumn: column,
-        selectionEndRow: row
+        selection: extended,
+        selectedRanges: selectionToRanges(extended)
       };
     });
+    this.moveViewToCell(cursor.column, cursor.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() {
+  /** Settle the current mouse selection gesture. Called on mouse-up. */
+  handleMouseSelectEnd() {
+    var theme = this.props.theme;
     this.setState(state => {
-      var theme = this.props.theme;
-      var autoSelectRow = theme.autoSelectRow;
-      var selectedRanges = state.selectedRanges,
-        lastSelectedRanges = state.lastSelectedRanges,
-        cursorRow = state.cursorRow,
-        cursorColumn = state.cursorColumn;
-      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: EMPTY_ARRAY,
-          lastSelectedRanges: EMPTY_ARRAY,
-          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.model;
-        var columnCount = model.columnCount,
-          rowCount = model.rowCount;
-        var nextCursor = GridRange.nextCell(GridRange.boundedRanges(selectedRanges, columnCount, rowCount));
-        if (nextCursor != null) {
-          newCursorColumn = nextCursor.column;
-          newCursorRow = nextCursor.row;
-        } else {
-          newCursorColumn = null;
-          newCursorRow = null;
+      var _theme$autoSelectRow3;
+      var selection = state.selection,
+        lastSelection = state.lastSelection;
+      var settled = selection.commitGesture(lastSelection, {
+        autoSelectRow: (_theme$autoSelectRow3 = theme.autoSelectRow) !== null && _theme$autoSelectRow3 !== void 0 ? _theme$autoSelectRow3 : false,
+        // Mouse-up commit preserves the current cursor position.
+        cursor: {
+          row: selection.cursorRow,
+          column: selection.cursorColumn
         }
-      }
-      if (newSelectedRanges.length === 0) {
-        newCursorColumn = null;
-        newCursorRow = null;
-      }
-      var selectionChanged = newSelectedRanges.length !== selectedRanges.length || newSelectedRanges.some((range, index) => !range.equals(selectedRanges[index]));
+      });
+      if (settled === selection) return null;
       return {
-        cursorRow: newCursorRow,
-        cursorColumn: newCursorColumn,
-        // The onSelectionChanged callback has already been called with the selectedRanges at this point.
-        // If the selection is not changed (e.g., the user is adding via ctrl+click and not removing),
-        // there is no need to change and trigger the callback again.
-        selectedRanges: selectionChanged ? newSelectedRanges : selectedRanges,
-        lastSelectedRanges: selectedRanges
+        selection: settled,
+        lastSelection: settled,
+        selectedRanges: selectionToRanges(settled)
+      };
+    });
+    // Always clear the in-flight gesture mode on mouse-up. Kept as a
+    // separate setState so the settled-update above stays in a single Pick
+    // shape that React's typing narrows cleanly.
+    this.setState(_ref5 => {
+      var gestureMode = _ref5.gestureMode;
+      return gestureMode == null ? null : {
+        gestureMode: null
       };
     });
   }
+
+  /**
+   * Apply a keyboard-driven selection gesture at `cursor` with `mode`, then
+   * optionally scroll the viewport to bring the cursor into view. Shared
+   * entry point for arrow keys, Home/End, and page-key movements.
+   *
+   * Only `replace` moves the cursor to `cursor`; extend/maximize/add
+   * preserve the existing cursor and update `selectionEnd` only. This
+   * matches long-standing Shift+Arrow semantics where the cursor stays put
+   * as the selection grows.
+   */
+  handleKeySelectAt(cursor, mode) {
+    var opts = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+    var _opts$keepCursorInVie = opts.keepCursorInView,
+      keepCursorInView = _opts$keepCursorInVie === void 0 ? true : _opts$keepCursorInVie;
+    var moveCursor = mode === 'replace';
+    this.setState(state => this.applyGestureAt(state.selection, cursor, mode, {
+      moveCursor,
+      allowDeselect: false
+    }));
+    if (keepCursorInView && cursor.column != null && cursor.row != null) {
+      this.moveViewToCell(cursor.column, cursor.row);
+    }
+  }
+
+  /**
+   * Listen for the grid finishing a draw of its canvas. Called immediately with
+   * the most recent draw if the grid has already drawn.
+   * @param listener Called with the state that was drawn
+   * @returns A function to stop listening
+   */
+  registerDrawListener(listener) {
+    this.drawListeners.add(listener);
+    if (this.renderState !== null) {
+      listener(this.renderState);
+    }
+    return () => {
+      this.drawListeners.delete(listener);
+    };
+  }
+
+  /**
+   * Advance the cursor in `direction` through the current selection. Used
+   * by Tab/Enter — cycles within the selected ranges when there are
+   * multiple, wraps at grid edges when there is only a single cell.
+   * When the resulting cursor falls outside the current selection (e.g.
+   * from an initial empty state), installs a fresh single-cell selection.
+   */
+  handleKeyAdvanceCursor(direction) {
+    var selection = this.state.selection;
+    var next = selection.getNextCursorInDirection({
+      column: selection.cursorColumn,
+      row: selection.cursorRow
+    }, direction);
+    if (next == null) return;
+    var column = next.column,
+      row = next.row;
+    if (column == null || row == null) return;
+    if (selection.isCellSelected(column, row)) {
+      this.setState(state => ({
+        selection: state.selection.withCursor(row, column)
+      }));
+    } else {
+      this.setState(state => this.applyGestureAt(state.selection, {
+        column,
+        row
+      }, 'replace', {
+        allowDeselect: false
+      }));
+    }
+    this.moveViewToCell(column, row);
+  }
+
+  /**
+   * Page-move gesture. `direction` is +1 (page-down) or -1 (page-up). Reads
+   * viewport metrics to compute the target cell, applies the gesture without
+   * auto-scrolling, then pins the viewport top so the cursor lands where it
+   * was on screen before.
+   */
+  handleKeyPage(mode, direction) {
+    var selection = this.state.selection;
+    var cursorColumn = selection.cursorColumn,
+      selectionEndRow = selection.selectionEndRow;
+    if (selectionEndRow == null) return;
+    var row = selectionEndRow;
+    var metricState = this.getMetricState();
+    var _this$metricCalculato = this.metricCalculator.getMetrics(metricState),
+      bottomVisible = _this$metricCalculato.bottomVisible,
+      topVisible = _this$metricCalculato.topVisible,
+      hasHorizontalBar = _this$metricCalculato.hasHorizontalBar,
+      rowCount = _this$metricCalculato.rowCount,
+      lastTop = _this$metricCalculato.lastTop;
+    var pageSize = bottomVisible - topVisible + (hasHorizontalBar ? 0 : 1);
+    var target = clamp(row + direction * pageSize, 0, rowCount - 1);
+    var viewportPosition = clamp(target - (row - topVisible), 0, lastTop);
+    this.handleKeySelectAt({
+      column: cursorColumn,
+      row: target
+    }, mode, {
+      keepCursorInView: false
+    });
+    this.setViewState({
+      top: viewportPosition
+    });
+  }
+  handleKeyPageUp(mode) {
+    this.handleKeyPage(mode, -1);
+  }
+  handleKeyPageDown(mode) {
+    this.handleKeyPage(mode, 1);
+  }
+
+  /**
+   * Move the cursor to a cell without touching the selection.
+   */
+  handleKeyMoveCursor(column, row) {
+    this.setState(state => ({
+      selection: state.selection.withCursor(row, column).withSelectionEnd(row, column)
+    }));
+    this.moveViewToCell(column, row);
+  }
   setFocusRow(focusedRow) {
     var _userRowHeights$get;
     if (!this.metrics || !this.prevMetrics) {
@@ -864,123 +1007,31 @@ class Grid extends PureComponent {
     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
+    this.setState(state => {
+      var cursorColumn = state.selection.cursorColumn;
+      var newSel = state.selection.withCommittedRanges([new GridRange(null, focusedRow, null, focusedRow)]).withCursor(focusedRow, cursorColumn).withSelectionEnd(focusedRow, cursorColumn);
+      return {
+        top: Math.min(lastTop, newTop),
+        selection: newSel,
+        lastSelection: newSel,
+        selectedRanges: selectionToRanges(newSel),
+        isStuckToBottom: false
+      };
     });
-    var cursorColumn = this.state.cursorColumn;
-    this.moveCursorToPosition(cursorColumn, focusedRow, false, false);
   }
 
   /**
    * Set the selection to the entire grid
    */
   selectAll() {
-    var _this$props4 = this.props,
-      model = _this$props4.model,
-      theme = _this$props4.theme;
-    var autoSelectRow = theme.autoSelectRow,
-      autoSelectColumn = theme.autoSelectColumn;
-    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 _this$state4 = this.state,
-      cursorRow = _this$state4.cursorRow,
-      cursorColumn = _this$state4.cursorColumn,
-      selectionEndColumn = _this$state4.selectionEndColumn,
-      selectionEndRow = _this$state4.selectionEndRow;
-    var column = extendSelection ? selectionEndColumn : cursorColumn;
-    var row = extendSelection ? selectionEndRow : cursorRow;
-    if (row === null || column === null) {
-      var _this$state5 = this.state,
-        left = _this$state5.left,
-        top = _this$state5.top;
-      this.moveCursorToPosition(left, top, extendSelection);
-    } else {
-      var model = this.props.model;
-      var columnCount = model.columnCount,
-        rowCount = model.rowCount;
-      var _left = clamp(column + deltaColumn, 0, columnCount - 1);
-      var _top = clamp(row + deltaRow, 0, rowCount - 1);
-      this.moveCursorToPosition(_left, _top, extendSelection);
-    }
-  }
-
-  /**
-   * Move the cursor in the provided selection direction
-   * @param 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.model;
-    var columnCount = model.columnCount,
-      rowCount = model.rowCount;
-    var _this$state6 = this.state,
-      cursorRow = _this$state6.cursorRow,
-      cursorColumn = _this$state6.cursorColumn,
-      selectedRanges = _this$state6.selectedRanges;
-    var ranges = selectedRanges.length > 0 ? selectedRanges : [GridRange.makeCell(cursorColumn, cursorRow)];
-    var nextCursor = null;
-    if (ranges.length === 1 && GridRange.cellCount(ranges) === 1) {
-      var _gridRange$nextCell;
-      // If we only have one cell selected, we want to update the cursor and we want to update the selected cells
-      var gridRange = new GridRange(0, 0, columnCount - 1, rowCount - 1);
-      nextCursor = (_gridRange$nextCell = gridRange.nextCell(cursorColumn, cursorRow, direction)) !== null && _gridRange$nextCell !== void 0 ? _gridRange$nextCell : gridRange.startCell(direction);
-    } else {
-      nextCursor = GridRange.nextCell(GridRange.boundedRanges(ranges, columnCount, rowCount), cursorColumn, cursorRow, direction);
-    }
-    if (nextCursor != null) {
-      var _nextCursor = nextCursor,
-        column = _nextCursor.column,
-        row = _nextCursor.row;
-      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);
-    }
+    this.setState(state => {
+      var newSelection = state.selection.selectAll();
+      return {
+        selection: newSelection,
+        lastSelection: newSelection,
+        selectedRanges: selectionToRanges(newSelection)
+      };
+    });
   }
 
   /**
@@ -998,11 +1049,11 @@ class Grid extends PureComponent {
       topVisible = _this$metrics7.topVisible,
       leftVisible = _this$metrics7.leftVisible;
     var metricState = this.getMetricState(this.state);
-    var _this$state7 = this.state,
-      top = _this$state7.top,
-      left = _this$state7.left,
-      topOffset = _this$state7.topOffset,
-      leftOffset = _this$state7.leftOffset;
+    var _this$state3 = this.state,
+      top = _this$state3.top,
+      left = _this$state3.left,
+      topOffset = _this$state3.topOffset,
+      leftOffset = _this$state3.leftOffset;
     if (row != null && !GridUtils.isFloatingRow(row, this.metrics)) {
       if (row < topVisible) {
         top = metricCalculator.getTopForTopVisible(metricState, row);
@@ -1088,11 +1139,10 @@ class Grid extends PureComponent {
       value: value !== undefined ? value : model.editValueForCell(modelColumn, modelRow),
       isQuickEdit
     };
-    this.setState({
+    this.setState(state => ({
       editingCell: cell,
-      cursorColumn: column,
-      cursorRow: row
-    });
+      selection: state.selection.withCursor(row, column)
+    }));
     this.moveViewToCell(column, row);
   }
 
@@ -1120,16 +1170,19 @@ class Grid extends PureComponent {
     var _this = this;
     return _asyncToGenerator(function* () {
       var model = _this.props.model;
-      var _this$state8 = _this.state,
-        movedColumns = _this$state8.movedColumns,
-        movedRows = _this$state8.movedRows,
-        selectedRanges = _this$state8.selectedRanges;
+      var _this$state4 = _this.state,
+        movedColumns = _this$state4.movedColumns,
+        movedRows = _this$state4.movedRows,
+        selection = _this$state4.selection;
+      // pasteValue is only reachable for editable (non-keyed) tables
+      assertIsRangedSelection(selection);
+      var selectedRanges = selection.toRanges();
       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) {
+        if (selection.isEmpty()) {
           throw new PasteError('Select an area to paste to.');
         }
         if (typeof value === 'string') {
@@ -1223,9 +1276,9 @@ class Grid extends PureComponent {
     var _this$props7 = this.props,
       model = _this$props7.model,
       onError = _this$props7.onError;
-    var _this$state9 = this.state,
-      movedColumns = _this$state9.movedColumns,
-      movedRows = _this$state9.movedRows;
+    var _this$state5 = this.state,
+      movedColumns = _this$state5.movedColumns,
+      movedRows = _this$state5.movedRows;
     var modelRanges = GridUtils.getModelRanges(ranges, movedColumns, movedRows);
     if (isEditableGridModel(model)) {
       model.setValueForRanges(modelRanges, value).catch(err => {
@@ -1241,17 +1294,8 @@ class Grid extends PureComponent {
    * @returns True if the cell is in the current selection, false otherwise
    */
   isSelected(row, column) {
-    var selectedRanges = this.state.selectedRanges;
-    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;
+    var selection = this.state.selection;
+    return selection.isCellSelected(column, row);
   }
   addDocumentCursor() {
     var cursor = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
@@ -1303,9 +1347,13 @@ class Grid extends PureComponent {
     var renderer = this.renderer,
       context = this.canvasContext,
       renderState = this.renderState;
+    assertNotNull(renderState);
     context.save();
     renderer.drawCanvas(renderState);
     context.restore();
+    this.drawListeners.forEach(listener => {
+      listener(renderState);
+    });
   }
 
   /**
@@ -1505,9 +1553,9 @@ class Grid extends PureComponent {
     this.forceUpdate();
   }
   forceUpdate(callback) {
-    this.setState(_ref5 => {
-      var _ref5$updateRevision = _ref5.updateRevision,
-        updateRevision = _ref5$updateRevision === void 0 ? 0 : _ref5$updateRevision;
+    this.setState(_ref6 => {
+      var _ref6$updateRevision = _ref6.updateRevision,
+        updateRevision = _ref6$updateRevision === void 0 ? 0 : _ref6$updateRevision;
       return {
         updateRevision: (updateRevision + 1) % Number.MAX_SAFE_INTEGER
       };
@@ -1684,8 +1732,8 @@ class Grid extends PureComponent {
    * @param value New value set
    */
   handleEditCellChange(value) {
-    this.setState(_ref6 => {
-      var editingCell = _ref6.editingCell;
+    this.setState(_ref7 => {
+      var editingCell = _ref7.editingCell;
       try {
         assertIsDefined(editingCell);
         return {
@@ -1708,14 +1756,14 @@ class Grid extends PureComponent {
    * @param options Options for committing
    */
   handleEditCellCommit(value) {
-    var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref7$direction = _ref7.direction,
-      direction = _ref7$direction === void 0 ? SELECTION_DIRECTION.DOWN : _ref7$direction,
-      _ref7$fillRange = _ref7.fillRange,
-      fillRange = _ref7$fillRange === void 0 ? false : _ref7$fillRange;
-    var _this$state0 = this.state,
-      editingCell = _this$state0.editingCell,
-      selectedRanges = _this$state0.selectedRanges;
+    var _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref8$direction = _ref8.direction,
+      direction = _ref8$direction === void 0 ? SELECTION_DIRECTION.DOWN : _ref8$direction,
+      _ref8$fillRange = _ref8.fillRange,
+      fillRange = _ref8$fillRange === void 0 ? false : _ref8$fillRange;
+    var _this$state6 = this.state,
+      editingCell = _this$state6.editingCell,
+      selection = _this$state6.selection;
     if (!editingCell) throw new Error('editingCell not set');
     var column = editingCell.column,
       row = editingCell.row;
@@ -1730,12 +1778,14 @@ class Grid extends PureComponent {
       return;
     }
     if (fillRange) {
-      this.setValueForRanges(selectedRanges, value);
+      // fillRange is only reachable for editable (non-keyed) tables
+      assertIsRangedSelection(selection);
+      this.setValueForRanges(selection.toRanges(), value);
     } else {
       this.setValueForCell(column, row, value);
     }
     if (direction !== null) {
-      this.moveCursorInDirection(direction);
+      this.handleKeyAdvanceCursor(direction);
     }
     this.setState({
       editingCell: null
@@ -1851,21 +1901,20 @@ class Grid extends PureComponent {
   updateRenderState() {
     if (!this.canvas) throw new Error('canvas is not set');
     if (!this.canvasContext) throw new Error('context not set');
-    var _this$state1 = this.state,
-      cursorColumn = _this$state1.cursorColumn,
-      cursorRow = _this$state1.cursorRow,
-      draggingColumn = _this$state1.draggingColumn,
-      draggingColumnSeparator = _this$state1.draggingColumnSeparator,
-      draggingRow = _this$state1.draggingRow,
-      draggingRowOffset = _this$state1.draggingRowOffset,
-      draggingRowSeparator = _this$state1.draggingRowSeparator,
-      editingCell = _this$state1.editingCell,
-      isDraggingHorizontalScrollBar = _this$state1.isDraggingHorizontalScrollBar,
-      isDraggingVerticalScrollBar = _this$state1.isDraggingVerticalScrollBar,
-      isDragging = _this$state1.isDragging,
-      mouseX = _this$state1.mouseX,
-      mouseY = _this$state1.mouseY,
-      selectedRanges = _this$state1.selectedRanges;
+    var _this$state7 = this.state,
+      draggingColumn = _this$state7.draggingColumn,
+      draggingColumnSeparator = _this$state7.draggingColumnSeparator,
+      draggingRow = _this$state7.draggingRow,
+      draggingRowOffset = _this$state7.draggingRowOffset,
+      draggingRowSeparator = _this$state7.draggingRowSeparator,
+      editingCell = _this$state7.editingCell,
+      gestureMode = _this$state7.gestureMode,
+      isDraggingHorizontalScrollBar = _this$state7.isDraggingHorizontalScrollBar,
+      isDraggingVerticalScrollBar = _this$state7.isDraggingVerticalScrollBar,
+      isDragging = _this$state7.isDragging,
+      mouseX = _this$state7.mouseX,
+      mouseY = _this$state7.mouseY,
+      selection = _this$state7.selection;
     var _this$props8 = this.props,
       model = _this$props8.model,
       stateOverride = _this$props8.stateOverride;
@@ -1884,7 +1933,7 @@ class Grid extends PureComponent {
       metrics,
       mouseX,
       mouseY,
-      selectedRanges,
+      selection,
       draggingColumn,
       draggingColumnSeparator,
       draggingRow,
@@ -1894,8 +1943,7 @@ class Grid extends PureComponent {
       isDraggingHorizontalScrollBar,
       isDraggingVerticalScrollBar,
       isDragging,
-      cursorColumn,
-      cursorRow
+      gestureMode
     }, stateOverride);
     return this.renderState;
   }
@@ -1919,7 +1967,9 @@ class Grid extends PureComponent {
         onMouseMove: this.handleMouseMove,
         onMouseLeave: this.handleMouseLeave,
         tabIndex: 0,
-        children: "Your browser does not support HTML canvas. Update your browser?"
+        children: /*#__PURE__*/_jsx(GridA11yFallback, {
+          registerDrawListener: this.registerDrawListener
+        })
       }), this.renderInputField(), children]
     });
   }
@@ -1939,6 +1989,7 @@ _defineProperty(Grid, "defaultProps", {
   movedRows: EMPTY_ARRAY,
   onError: () => undefined,
   onSelectionChanged: () => undefined,
+  onSelectionChange: _selection => undefined,
   onMovedColumnsChanged: moveOperations => undefined,
   onMoveColumnComplete: () => undefined,
   onMovedRowsChanged: () => undefined,
@@ -1954,7 +2005,8 @@ _defineProperty(Grid, "defaultProps", {
   theme: {
     autoSelectColumn: false,
     autoSelectRow: false
-  }
+  },
+  createEmptySelection: RangedSelection.empty
 });
 // 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