@blueprintjs/table - npm Package Compare versions

Comparing version 1.24.1 to 1.25.0

dist/cell/cell.js

@@ -38,3 +38,11 @@ /**
             _c));
-        var content = React.createElement("div", { className: textClasses }, this.props.children);
+        // add width and height to the children, for use in shouldComponentUpdate in truncatedFormat
+        // note: these aren't actually used by truncated format, just in shouldComponentUpdate
+        var modifiedChildren = React.Children.map(this.props.children, function (child) {
+            if (style != null && React.isValidElement(child)) {
+                return React.cloneElement(child, { parentCellHeight: style.height, parentCellWidth: style.width });
+            }
+            return child;
+        });
+        var content = React.createElement("div", { className: textClasses }, modifiedChildren);
         return (React.createElement("div", { className: classes, style: style, title: tooltip },
@@ -41,0 +49,0 @@ React.createElement(loadableContent_1.LoadableContent, { loading: loading, variableLength: true }, content)));

dist/cell/formats/truncatedFormat.d.ts

@@ -25,2 +25,10 @@ /// <reference types="react" />
     /**
+     * Height of the parent cell. Used by shouldComponentUpdate only
+     */
+    parentCellHeight?: string;
+    /**
+     * Width of the parent cell. Used by shouldComponentUpdate only
+     */
+    parentCellWidth?: string;
+    /**
      * Sets the popover content style to `white-space: pre` if `true` or
@@ -27,0 +35,0 @@ * `white-space: normal` if `false`.

dist/cell/formats/truncatedFormat.js

@@ -12,2 +12,3 @@ /**
 var classNames = require("classnames");
+var PureRender = require("pure-render-decorator");
 var React = require("react");
@@ -17,2 +18,4 @@ var Classes = require("../../common/classes");
 // not truncated. Note: could be modified by styles
+// Note 2: this doesn't come from the width of the popover element, but the "right" style
+// on the div, which comes from styles
 var CONTENT_DIV_WIDTH_DELTA = 25;
@@ -83,13 +86,23 @@ var TruncatedPopoverMode;
         }
-        // if the popover handle exists, take it into account
-        var popoverHandleAdjustmentFactor = this.state.isTruncated ? CONTENT_DIV_WIDTH_DELTA : 0;
-        // add a slight bit of buffer space where we don't show the popover, to deal with cases
-        // where everything isn't pixel perfect
-        popoverHandleAdjustmentFactor += .5;
-        var isTruncated = this.contentDiv !== undefined &&
-            (this.contentDiv.scrollWidth - popoverHandleAdjustmentFactor > this.contentDiv.clientWidth ||
-                this.contentDiv.scrollHeight > this.contentDiv.clientHeight);
-        if (this.state.isTruncated !== isTruncated) {
-            this.setState({ isTruncated: isTruncated });
+        if (this.contentDiv === undefined) {
+            this.setState({ isTruncated: false });
+            return;
         }
+        var isTruncated = this.state.isTruncated;
+        // take all measurements at once to avoid excessive DOM reflows.
+        var _a = this.contentDiv, containerHeight = _a.clientHeight, containerWidth = _a.clientWidth, actualContentHeight = _a.scrollHeight, contentWidth = _a.scrollWidth;
+        // if the content is truncated, then a popover handle will be present as a
+        // sibling of the content. we don't want to consider that handle when
+        // calculating the width of the actual content, so subtract it.
+        var actualContentWidth = isTruncated
+            ? contentWidth - CONTENT_DIV_WIDTH_DELTA
+            : contentWidth;
+        // we of course truncate the content if it doesn't fit in the container. but we
+        // also aggressively truncate if they're the same size with truncation enabled;
+        // this addresses browser-crashing stack-overflow bugs at various zoom levels.
+        // (see: https://github.com/palantir/blueprint/pull/1519)
+        var shouldTruncate = (isTruncated && actualContentWidth === containerWidth)
+            || actualContentWidth > containerWidth
+            || actualContentHeight > containerHeight;
+        this.setState({ isTruncated: shouldTruncate });
     };
@@ -105,4 +118,7 @@ return TruncatedFormat;
 };
+TruncatedFormat = tslib_1.__decorate([
+    PureRender
+], TruncatedFormat);
 exports.TruncatedFormat = TruncatedFormat;
 
 //# sourceMappingURL=truncatedFormat.js.map

dist/common/errors.d.ts

@@ -7,1 +7,3 @@ export declare const COLUMN_HEADER_CELL_MENU_DEPRECATED: string;
 export declare const TABLE_NUM_FROZEN_ROWS_BOUND_WARNING: string;
+export declare const TABLE_EXPAND_FOCUSED_REGION_MULTI_ROW_REGION: string;
+export declare const TABLE_EXPAND_FOCUSED_REGION_MULTI_COLUMN_REGION: string;

dist/common/errors.js

@@ -17,3 +17,5 @@ /*
 exports.TABLE_NUM_FROZEN_ROWS_BOUND_WARNING = ns + " <Table> numFrozenRows must be in [0, numRows]";
+exports.TABLE_EXPAND_FOCUSED_REGION_MULTI_ROW_REGION = ns + " <Table> Cannot expand a FULL_COLUMNS selection using a multi-row region";
+exports.TABLE_EXPAND_FOCUSED_REGION_MULTI_COLUMN_REGION = ns + " <Table> Cannot expand a FULL_COLUMNS selection using a multi-column region";
 
 //# sourceMappingURL=errors.js.map

dist/common/internal/focusedCellUtils.d.ts

@@ -8,3 +8,3 @@ /**
 import { IRegion } from "../../regions";
-import { IFocusedCellCoordinates } from "../cell";
+import { ICellCoordinates, IFocusedCellCoordinates } from "../cell";
 /**
@@ -14,1 +14,13 @@ * Returns the proper focused cell for the given set of initial conditions.
 export declare function getInitialFocusedCell(enableFocus: boolean, focusedCellFromProps: IFocusedCellCoordinates, focusedCellFromState: IFocusedCellCoordinates, selectedRegions: IRegion[]): IFocusedCellCoordinates;
+/**
+ * Returns a new cell-coordinates object that includes a focusSelectionIndex property.
+ * The returned object will have the proper IFocusedCellCoordinates type.
+ */
+export declare function toFullCoordinates(cellCoords: ICellCoordinates, focusSelectionIndex?: number): IFocusedCellCoordinates;
+/**
+ * Expands an existing region to new region based on the current focused cell.
+ * The focused cell is an invariant and should not move as a result of this
+ * operation. This function is used, for instance, to expand a selected region
+ * on shift+click.
+ */
+export declare function expandFocusedRegion(focusedCell: IFocusedCellCoordinates, newRegion: IRegion): IRegion;

dist/common/internal/focusedCellUtils.js

@@ -11,2 +11,3 @@ /**
 var regions_1 = require("../../regions");
+var Errors = require("../errors");
 /**
@@ -28,4 +29,5 @@ * Returns the proper focused cell for the given set of initial conditions.
     else if (selectedRegions.length > 0) {
-        // focus the top-left cell of the first selection
-        return tslib_1.__assign({}, regions_1.Regions.getFocusCellCoordinatesFromRegion(selectedRegions[0]), { focusSelectionIndex: 0 });
+        // focus the top-left cell of the last selection
+        var lastIndex = selectedRegions.length - 1;
+        return tslib_1.__assign({}, regions_1.Regions.getFocusCellCoordinatesFromRegion(selectedRegions[lastIndex]), { focusSelectionIndex: lastIndex });
     }
@@ -38,3 +40,52 @@ else {
 exports.getInitialFocusedCell = getInitialFocusedCell;
+/**
+ * Returns a new cell-coordinates object that includes a focusSelectionIndex property.
+ * The returned object will have the proper IFocusedCellCoordinates type.
+ */
+function toFullCoordinates(cellCoords, focusSelectionIndex) {
+    if (focusSelectionIndex === void 0) { focusSelectionIndex = 0; }
+    return tslib_1.__assign({}, cellCoords, { focusSelectionIndex: focusSelectionIndex });
+}
+exports.toFullCoordinates = toFullCoordinates;
+/**
+ * Expands an existing region to new region based on the current focused cell.
+ * The focused cell is an invariant and should not move as a result of this
+ * operation. This function is used, for instance, to expand a selected region
+ * on shift+click.
+ */
+function expandFocusedRegion(focusedCell, newRegion) {
+    switch (regions_1.Regions.getRegionCardinality(newRegion)) {
+        case regions_1.RegionCardinality.FULL_COLUMNS: {
+            var _a = getExpandedRegionIndices(focusedCell, newRegion, "col", "cols"), indexStart = _a[0], indexEnd = _a[1];
+            return regions_1.Regions.column(indexStart, indexEnd);
+        }
+        case regions_1.RegionCardinality.FULL_ROWS: {
+            var _b = getExpandedRegionIndices(focusedCell, newRegion, "row", "rows"), indexStart = _b[0], indexEnd = _b[1];
+            return regions_1.Regions.row(indexStart, indexEnd);
+        }
+        case regions_1.RegionCardinality.CELLS:
+            var _c = getExpandedRegionIndices(focusedCell, newRegion, "row", "rows"), rowIndexStart = _c[0], rowIndexEnd = _c[1];
+            var _d = getExpandedRegionIndices(focusedCell, newRegion, "col", "cols"), colIndexStart = _d[0], colIndexEnd = _d[1];
+            return regions_1.Regions.cell(rowIndexStart, colIndexStart, rowIndexEnd, colIndexEnd);
+        default:
+            return regions_1.Regions.table();
+    }
+}
+exports.expandFocusedRegion = expandFocusedRegion;
+function getExpandedRegionIndices(focusedCell, newRegion, focusedCellDimension, regionDimension) {
+    var sourceIndex = focusedCell[focusedCellDimension];
+    var _a = newRegion[regionDimension], destinationIndex = _a[0], destinationIndexEnd = _a[1];
+    if (destinationIndex !== destinationIndexEnd) {
+        if (regionDimension === "rows") {
+            throw new Error(Errors.TABLE_EXPAND_FOCUSED_REGION_MULTI_ROW_REGION);
+        }
+        else if (regionDimension === "cols") {
+            throw new Error(Errors.TABLE_EXPAND_FOCUSED_REGION_MULTI_COLUMN_REGION);
+        }
+    }
+    return sourceIndex <= destinationIndex
+        ? [sourceIndex, destinationIndex]
+        : [destinationIndex, sourceIndex];
+}
 
 //# sourceMappingURL=focusedCellUtils.js.map

dist/headers/columnHeader.d.ts

@@ -32,3 +32,2 @@ /// <reference types="react" />
     };
-    shouldComponentUpdate(nextProps: IColumnHeaderProps): boolean;
     render(): JSX.Element;
@@ -48,3 +47,2 @@ private wrapCells;
     private toRegion;
-    private isSelectedRegionRelevant;
 }

dist/headers/columnHeader.js

@@ -44,4 +44,4 @@ /**
         };
-        _this.getCellExtremaClasses = function (index, endIndex) {
-            return _this.props.grid.getExtremaClasses(0, index, 1, endIndex);
+        _this.getCellExtremaClasses = function (index, indexEnd) {
+            return _this.props.grid.getExtremaClasses(0, index, 1, indexEnd);
         };
@@ -90,23 +90,15 @@ _this.getColumnWidth = function (index) {
         };
-        _this.isSelectedRegionRelevant = function (selectedRegion) {
-            var regionCardinality = regions_1.Regions.getRegionCardinality(selectedRegion);
-            return regionCardinality === regions_1.RegionCardinality.FULL_COLUMNS
-                || regionCardinality === regions_1.RegionCardinality.FULL_TABLE;
-        };
         return _this;
     }
-    ColumnHeader.prototype.shouldComponentUpdate = function (nextProps) {
-        return header_1.shouldHeaderComponentUpdate(this.props, nextProps, this.isSelectedRegionRelevant);
-    };
     ColumnHeader.prototype.render = function () {
         var _a = this.props, 
         // from IColumnHeaderProps
-        cellRenderer = _a.cellRenderer, onColumnWidthChanged = _a.onColumnWidthChanged, 
+        renderHeaderCell = _a.cellRenderer, onColumnWidthChanged = _a.onColumnWidthChanged, 
         // from IColumnWidths
-        minColumnWidth = _a.minColumnWidth, maxColumnWidth = _a.maxColumnWidth, defaultColumnWidth = _a.defaultColumnWidth, 
+        minSize = _a.minColumnWidth, maxSize = _a.maxColumnWidth, defaultColumnWidth = _a.defaultColumnWidth, 
         // from IColumnIndices
-        columnIndexStart = _a.columnIndexStart, columnIndexEnd = _a.columnIndexEnd, 
+        indexStart = _a.columnIndexStart, indexEnd = _a.columnIndexEnd, 
         // from IHeaderProps
         spreadableProps = tslib_1.__rest(_a, ["cellRenderer", "onColumnWidthChanged", "minColumnWidth", "maxColumnWidth", "defaultColumnWidth", "columnIndexStart", "columnIndexEnd"]);
-        return (React.createElement(header_1.Header, tslib_1.__assign({ convertPointToIndex: this.convertPointToColumn, endIndex: this.props.columnIndexEnd, fullRegionCardinality: regions_1.RegionCardinality.FULL_COLUMNS, getCellExtremaClasses: this.getCellExtremaClasses, getCellIndexClass: Classes.columnCellIndexClass, getCellSize: this.getColumnWidth, getDragCoordinate: this.getDragCoordinate, getIndexClass: Classes.columnIndexClass, getMouseCoordinate: this.getMouseCoordinate, handleResizeDoubleClick: this.handleResizeDoubleClick, handleResizeEnd: this.handleResizeEnd, handleSizeChanged: this.handleSizeChanged, headerCellIsReorderablePropName: "isColumnReorderable", headerCellIsSelectedPropName: "isColumnSelected", isCellSelected: this.isCellSelected, isGhostIndex: this.isGhostIndex, maxSize: this.props.maxColumnWidth, minSize: this.props.minColumnWidth, renderGhostCell: this.renderGhostCell, renderHeaderCell: this.props.cellRenderer, resizeOrientation: resizeHandle_1.Orientation.VERTICAL, startIndex: this.props.columnIndexStart, toRegion: this.toRegion, wrapCells: this.wrapCells }, spreadableProps)));
+        return (React.createElement(header_1.Header, tslib_1.__assign({ convertPointToIndex: this.convertPointToColumn, fullRegionCardinality: regions_1.RegionCardinality.FULL_COLUMNS, getCellExtremaClasses: this.getCellExtremaClasses, getCellIndexClass: Classes.columnCellIndexClass, getCellSize: this.getColumnWidth, getDragCoordinate: this.getDragCoordinate, getIndexClass: Classes.columnIndexClass, getMouseCoordinate: this.getMouseCoordinate, handleResizeDoubleClick: this.handleResizeDoubleClick, handleResizeEnd: this.handleResizeEnd, handleSizeChanged: this.handleSizeChanged, headerCellIsReorderablePropName: "isColumnReorderable", headerCellIsSelectedPropName: "isColumnSelected", indexEnd: indexEnd, indexStart: indexStart, isCellSelected: this.isCellSelected, isGhostIndex: this.isGhostIndex, maxSize: maxSize, minSize: minSize, renderGhostCell: this.renderGhostCell, renderHeaderCell: renderHeaderCell, resizeOrientation: resizeHandle_1.Orientation.VERTICAL, toRegion: this.toRegion, wrapCells: this.wrapCells }, spreadableProps)));
     };
@@ -113,0 +105,0 @@ return ColumnHeader;

dist/headers/header.d.ts

 /// <reference types="react" />
 import * as React from "react";
 import { Grid } from "../common";
+import { IFocusedCellCoordinates } from "../common/cell";
 import { IClientCoordinates } from "../interactions/draggable";
@@ -14,2 +15,6 @@ import { IReorderableProps } from "../interactions/reorderable";
     /**
+     * The currently focused cell.
+     */
+    focusedCell?: IFocusedCellCoordinates;
+    /**
      * The grid computes sizes of cells, rows, or columns from the
@@ -53,6 +58,2 @@ * configurable `columnWidths` and `rowHeights`.
     /**
-     * The highest cell index to render.
-     */
-    endIndex: number;
-    /**
      * The cardinality of a fully selected region. Should be FULL_COLUMNS for column headers and
@@ -75,2 +76,10 @@ * FULL_ROWS for row headers.
     /**
+     * The highest cell index to render.
+     */
+    indexEnd: number;
+    /**
+     * The lowest cell index to render.
+     */
+    indexStart: number;
+    /**
      * The maximum permitted size of the header in pixels. Corresponds to a width for column headers and
@@ -91,5 +100,5 @@ * a height for row headers.
     /**
-     * The lowest cell index to render.
+     * An array containing the table's selection Regions.
      */
-    startIndex: number;
+    selectedRegions: IRegion[];
     /**
@@ -102,3 +111,3 @@ * Converts a point on the screen to a row or column index in the table grid.
      */
-    getCellExtremaClasses: (index: number, endIndex: number) => string[];
+    getCellExtremaClasses: (index: number, indexEnd: number) => string[];
     /**
@@ -179,2 +188,3 @@ * Provides the index class for the cell. Should be Classes.columnCellIndexClass for column
     componentWillReceiveProps(nextProps?: IInternalHeaderProps): void;
+    shouldComponentUpdate(nextProps?: IInternalHeaderProps, nextState?: IHeaderState): boolean;
     componentWillUpdate(nextProps?: IInternalHeaderProps, nextState?: IHeaderState): void;
@@ -196,13 +206,1 @@ render(): JSX.Element;
 }
-/**
- * In the current architecture, ColumnHeaderCell and RowHeaderCell each need to include this same
- * shouldComponentUpdate code at their level. To avoid writing the same code in two places, we
- * expose this utility for each higher-level component to leverage in their own respective
- * shouldComponentUpdate functions.
- *
- * (See: https://github.com/palantir/blueprint/issues/1214)
- *
- * @param props - the current props
- * @param nextProps - the next props
- */
-export declare function shouldHeaderComponentUpdate<T extends IHeaderProps>(props: T, nextProps: T, isSelectedRegionRelevant: (selectedRegion: IRegion) => boolean): boolean;

dist/headers/header.js

@@ -20,5 +20,9 @@ /**
 var regions_1 = require("../regions");
+var SHALLOW_COMPARE_PROP_KEYS_BLACKLIST = [
+    "focusedCell",
+    "selectedRegions",
+];
 var RESET_CELL_KEYS_BLACKLIST = [
-    "endIndex",
-    "startIndex",
+    "indexEnd",
+    "indexStart",
 ];
@@ -38,7 +42,10 @@ var Header = (function (_super) {
         };
-        _this.locateDragForSelection = function (_event, coords) {
+        _this.locateDragForSelection = function (_event, coords, returnEndOnly) {
+            if (returnEndOnly === void 0) { returnEndOnly = false; }
             var coord = _this.props.getDragCoordinate(coords.current);
-            var startIndex = _this.activationIndex;
-            var endIndex = _this.props.convertPointToIndex(coord);
-            return _this.props.toRegion(startIndex, endIndex);
+            var indexStart = _this.activationIndex;
+            var indexEnd = _this.props.convertPointToIndex(coord);
+            return returnEndOnly
+                ? _this.props.toRegion(indexEnd)
+                : _this.props.toRegion(indexStart, indexEnd);
         };
@@ -51,6 +58,5 @@ _this.locateDragForReordering = function (_event, coords) {
         _this.renderCells = function () {
-            var startIndex = _this.props.startIndex;
-            var endIndex = _this.props.endIndex;
+            var _a = _this.props, indexStart = _a.indexStart, indexEnd = _a.indexEnd;
             _this.batcher.startNewBatch();
-            for (var index = startIndex; index <= endIndex; index++) {
+            for (var index = indexStart; index <= indexEnd; index++) {
                 _this.batcher.addArgsToBatch(index);
@@ -65,3 +71,3 @@ }
         _this.renderNewCell = function (index) {
-            var extremaClasses = _this.props.getCellExtremaClasses(index, _this.props.endIndex);
+            var extremaClasses = _this.props.getCellExtremaClasses(index, _this.props.indexEnd);
             var renderer = _this.props.isGhostIndex(index)
@@ -93,3 +99,3 @@ ? _this.props.renderGhostCell
             var modifiedHandleResizeHandleDoubleClick = function () { return _this.props.handleResizeDoubleClick(index); };
-            var baseChildren = (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: _this.props.allowMultipleSelection, disabled: isEntireCellTargetReorderable, ignoredSelectors: ["." + Classes.TABLE_REORDER_HANDLE_TARGET], key: getIndexClass(index), locateClick: _this.locateClick, locateDrag: _this.locateDragForSelection, onFocus: _this.props.onFocus, onSelection: _this.handleDragSelectableSelection, onSelectionEnd: _this.handleDragSelectableSelectionEnd, selectedRegions: selectedRegions, selectedRegionTransform: _this.props.selectedRegionTransform },
+            var baseChildren = (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: _this.props.allowMultipleSelection, disabled: isEntireCellTargetReorderable, focusedCell: _this.props.focusedCell, ignoredSelectors: ["." + Classes.TABLE_REORDER_HANDLE_TARGET], key: getIndexClass(index), locateClick: _this.locateClick, locateDrag: _this.locateDragForSelection, onFocus: _this.props.onFocus, onSelection: _this.handleDragSelectableSelection, onSelectionEnd: _this.handleDragSelectableSelectionEnd, selectedRegions: selectedRegions, selectedRegionTransform: _this.props.selectedRegionTransform },
                 React.createElement(resizable_1.Resizable, { isResizable: _this.props.isResizable, maxSize: _this.props.maxSize, minSize: _this.props.minSize, onDoubleClick: modifiedHandleResizeHandleDoubleClick, onLayoutLock: _this.props.onLayoutLock, onResizeEnd: modifiedHandleResizeEnd, onSizeChanged: modifiedHandleSizeChanged, orientation: _this.props.resizeOrientation, size: _this.props.getCellSize(index) }, React.cloneElement(cell, cellProps))));
@@ -141,2 +147,7 @@ return _this.isReorderHandleEnabled()
     };
+    Header.prototype.shouldComponentUpdate = function (nextProps, nextState) {
+        return !utils_1.Utils.shallowCompareKeys(this.state, nextState)
+            || !utils_1.Utils.shallowCompareKeys(this.props, nextProps, { exclude: SHALLOW_COMPARE_PROP_KEYS_BLACKLIST })
+            || !utils_1.Utils.deepCompareKeys(this.props, nextProps, SHALLOW_COMPARE_PROP_KEYS_BLACKLIST);
+    };
     Header.prototype.componentWillUpdate = function (nextProps, nextState) {
@@ -168,3 +179,3 @@ var resetKeysBlacklist = { exclude: RESET_CELL_KEYS_BLACKLIST };
     Header.prototype.wrapInDragReorderable = function (index, children, disabled) {
-        return (React.createElement(reorderable_1.DragReorderable, { disabled: disabled, key: this.props.getIndexClass(index), locateClick: this.locateClick, locateDrag: this.locateDragForReordering, onReordered: this.props.onReordered, onReordering: this.props.onReordering, onSelection: this.props.onSelection, selectedRegions: this.props.selectedRegions, toRegion: this.props.toRegion }, children));
+        return (React.createElement(reorderable_1.DragReorderable, { disabled: disabled, key: this.props.getIndexClass(index), locateClick: this.locateClick, locateDrag: this.locateDragForReordering, onReordered: this.props.onReordered, onReordering: this.props.onReordering, onSelection: this.props.onSelection, onFocus: this.props.onFocus, selectedRegions: this.props.selectedRegions, toRegion: this.props.toRegion }, children));
     };
@@ -174,28 +185,3 @@ return Header;
 exports.Header = Header;
-/**
- * In the current architecture, ColumnHeaderCell and RowHeaderCell each need to include this same
- * shouldComponentUpdate code at their level. To avoid writing the same code in two places, we
- * expose this utility for each higher-level component to leverage in their own respective
- * shouldComponentUpdate functions.
- *
- * (See: https://github.com/palantir/blueprint/issues/1214)
- *
- * @param props - the current props
- * @param nextProps - the next props
- */
-function shouldHeaderComponentUpdate(props, nextProps, isSelectedRegionRelevant) {
-    if (!utils_1.Utils.shallowCompareKeys(props, nextProps, { exclude: ["selectedRegions"] })) {
-        return true;
-    }
-    var relevantSelectedRegions = props.selectedRegions.filter(isSelectedRegionRelevant);
-    var nextRelevantSelectedRegions = nextProps.selectedRegions.filter(isSelectedRegionRelevant);
-    // ignore selection changes that didn't involve any relevant selected regions (FULL_COLUMNS
-    // for column headers, or FULL_ROWS for row headers)
-    if (relevantSelectedRegions.length > 0 || nextRelevantSelectedRegions.length > 0) {
-        return !utils_1.Utils.deepCompareKeys(relevantSelectedRegions, nextRelevantSelectedRegions);
-    }
-    return false;
-}
-exports.shouldHeaderComponentUpdate = shouldHeaderComponentUpdate;
 
 //# sourceMappingURL=header.js.map

dist/headers/rowHeader.d.ts

@@ -27,3 +27,2 @@ /// <reference types="react" />
     };
-    shouldComponentUpdate(nextProps: IRowHeaderProps): boolean;
     render(): JSX.Element;
@@ -42,3 +41,2 @@ private wrapCells;
     private toRegion;
-    private isSelectedRegionRelevant;
 }
@@ -45,0 +43,0 @@ /**

dist/headers/rowHeader.js

@@ -45,4 +45,4 @@ /**
         };
-        _this.getCellExtremaClasses = function (index, endIndex) {
-            return _this.props.grid.getExtremaClasses(index, 0, endIndex, 1);
+        _this.getCellExtremaClasses = function (index, indexEnd) {
+            return _this.props.grid.getExtremaClasses(index, 0, indexEnd, 1);
         };
@@ -80,23 +80,15 @@ _this.getRowHeight = function (index) {
         };
-        _this.isSelectedRegionRelevant = function (selectedRegion) {
-            var regionCardinality = regions_1.Regions.getRegionCardinality(selectedRegion);
-            return regionCardinality === regions_1.RegionCardinality.FULL_ROWS
-                || regionCardinality === regions_1.RegionCardinality.FULL_TABLE;
-        };
         return _this;
     }
-    RowHeader.prototype.shouldComponentUpdate = function (nextProps) {
-        return header_1.shouldHeaderComponentUpdate(this.props, nextProps, this.isSelectedRegionRelevant);
-    };
     RowHeader.prototype.render = function () {
         var _a = this.props, 
         // from IRowHeaderProps
-        onRowHeightChanged = _a.onRowHeightChanged, renderRowHeader = _a.renderRowHeader, 
+        onRowHeightChanged = _a.onRowHeightChanged, renderHeaderCell = _a.renderRowHeader, 
         // from IRowHeights
-        minRowHeight = _a.minRowHeight, maxRowHeight = _a.maxRowHeight, defaultRowHeight = _a.defaultRowHeight, 
+        minSize = _a.minRowHeight, maxSize = _a.maxRowHeight, defaultRowHeight = _a.defaultRowHeight, 
         // from IRowIndices
-        rowIndexStart = _a.rowIndexStart, rowIndexEnd = _a.rowIndexEnd, 
+        indexStart = _a.rowIndexStart, indexEnd = _a.rowIndexEnd, 
         // from IHeaderProps
         spreadableProps = tslib_1.__rest(_a, ["onRowHeightChanged", "renderRowHeader", "minRowHeight", "maxRowHeight", "defaultRowHeight", "rowIndexStart", "rowIndexEnd"]);
-        return (React.createElement(header_1.Header, tslib_1.__assign({ convertPointToIndex: this.convertPointToRow, endIndex: this.props.rowIndexEnd, fullRegionCardinality: regions_1.RegionCardinality.FULL_ROWS, getCellExtremaClasses: this.getCellExtremaClasses, getCellIndexClass: Classes.rowCellIndexClass, getCellSize: this.getRowHeight, getDragCoordinate: this.getDragCoordinate, getIndexClass: Classes.rowIndexClass, getMouseCoordinate: this.getMouseCoordinate, handleResizeEnd: this.handleResizeEnd, handleSizeChanged: this.handleSizeChanged, headerCellIsReorderablePropName: "isRowReorderable", headerCellIsSelectedPropName: "isRowSelected", isCellSelected: this.isCellSelected, isGhostIndex: this.isGhostIndex, maxSize: this.props.maxRowHeight, minSize: this.props.minRowHeight, renderGhostCell: this.renderGhostCell, renderHeaderCell: this.props.renderRowHeader, resizeOrientation: resizeHandle_1.Orientation.HORIZONTAL, startIndex: this.props.rowIndexStart, toRegion: this.toRegion, wrapCells: this.wrapCells }, spreadableProps)));
+        return (React.createElement(header_1.Header, tslib_1.__assign({ convertPointToIndex: this.convertPointToRow, fullRegionCardinality: regions_1.RegionCardinality.FULL_ROWS, getCellExtremaClasses: this.getCellExtremaClasses, getCellIndexClass: Classes.rowCellIndexClass, getCellSize: this.getRowHeight, getDragCoordinate: this.getDragCoordinate, getIndexClass: Classes.rowIndexClass, getMouseCoordinate: this.getMouseCoordinate, handleResizeEnd: this.handleResizeEnd, handleSizeChanged: this.handleSizeChanged, headerCellIsReorderablePropName: "isRowReorderable", headerCellIsSelectedPropName: "isRowSelected", indexEnd: indexEnd, indexStart: indexStart, isCellSelected: this.isCellSelected, isGhostIndex: this.isGhostIndex, maxSize: maxSize, minSize: minSize, renderGhostCell: this.renderGhostCell, renderHeaderCell: renderHeaderCell, resizeOrientation: resizeHandle_1.Orientation.HORIZONTAL, toRegion: this.toRegion, wrapCells: this.wrapCells }, spreadableProps)));
     };
@@ -103,0 +95,0 @@ return RowHeader;

dist/interactions/reorderable.d.ts

 /// <reference types="react" />
 import * as React from "react";
+import { IFocusedCellCoordinates } from "../common/cell";
 import { ICoordinateData } from "../interactions/draggable";
@@ -29,5 +30,11 @@ import { IRegion } from "../regions";
     /**
+     * When the user reorders something, this callback is called with the new
+     * focus cell for the newly selected set of regions.
+     */
+    onFocus: (focusedCell: IFocusedCellCoordinates) => void;
+    /**
      * An array containing the table's selection Regions.
+     * @default []
      */
-    selectedRegions: IRegion[];
+    selectedRegions?: IRegion[];
 }
@@ -58,2 +65,3 @@ export interface IDragReorderable extends IReorderableProps {
 export declare class DragReorderable extends React.Component<IDragReorderable, {}> {
+    static defaultProps: Partial<IDragReorderable>;
     private selectedRegionStartIndex;
@@ -66,2 +74,3 @@ private selectedRegionLength;
     private handleDragEnd;
+    private maybeSelectRegion(region);
 }

dist/interactions/reorderable.js

@@ -51,3 +51,3 @@ /**
                 // select the new region to avoid complex and unintuitive UX w/r/t the existing selection
-                _this.props.onSelection([region]);
+                _this.maybeSelectRegion(region);
                 var regionRange = isRowHeader ? region.rows : region.cols;
@@ -74,3 +74,3 @@ _this.selectedRegionStartIndex = regionRange[0];
             var newRegion = _this.props.toRegion(reorderedIndex, reorderedIndex + length - 1);
-            _this.props.onSelection(regions_1.Regions.update([], newRegion));
+            _this.maybeSelectRegion(newRegion);
             // resetting is not strictly required, but it's cleaner
@@ -93,4 +93,15 @@ _this.selectedRegionStartIndex = undefined;
     };
+    DragReorderable.prototype.maybeSelectRegion = function (region) {
+        var nextSelectedRegions = [region];
+        if (!utils_1.Utils.deepCompareKeys(nextSelectedRegions, this.props.selectedRegions)) {
+            this.props.onSelection(nextSelectedRegions);
+            // move the focused cell into the newly selected region
+            this.props.onFocus(tslib_1.__assign({}, regions_1.Regions.getFocusCellCoordinatesFromRegion(region), { focusSelectionIndex: 0 }));
+        }
+    };
     return DragReorderable;
 }(React.Component));
+DragReorderable.defaultProps = {
+    selectedRegions: [],
+};
 DragReorderable = tslib_1.__decorate([
@@ -97,0 +108,0 @@ PureRender

dist/interactions/selectable.d.ts

@@ -12,5 +12,10 @@ /// <reference types="react" />
      * and a mouse drag will select the current column/row/cell only.
+     * @default false
      */
-    allowMultipleSelection: boolean;
+    allowMultipleSelection?: boolean;
     /**
+     * The currently focused cell.
+     */
+    focusedCell?: IFocusedCellCoordinates;
+    /**
      * When the user focuses something, this callback is called with new
@@ -35,4 +40,5 @@ * focused cell coordinates. This should be considered the new focused cell
      * An array containing the table's selection Regions.
+     * @default []
      */
-    selectedRegions: IRegion[];
+    selectedRegions?: IRegion[];
     /**
@@ -68,5 +74,6 @@ * An optional transform function that will be applied to the located
      */
-    locateDrag: (event: MouseEvent, coords: ICoordinateData) => IRegion;
+    locateDrag: (event: MouseEvent, coords: ICoordinateData, returnEndOnly?: boolean) => IRegion;
 }
 export declare class DragSelectable extends React.Component<IDragSelectableProps, {}> {
+    static defaultProps: Partial<IDragSelectableProps>;
     private didExpandSelectionOnActivate;
@@ -79,6 +86,13 @@ render(): JSX.Element;
     private handleClick;
-    private finishInteraction;
+    private shouldExpandSelection;
+    private shouldAddDisjointSelection;
     private shouldIgnoreMouseDown(event);
-    private getDragSelectedRegions(event, coords);
+    private handleUpdateExistingSelection;
+    private handleExpandSelection;
+    private handleAddDisjointSelection;
+    private handleReplaceSelection;
     private maybeInvokeSelectionCallback(nextSelectedRegions);
+    private invokeOnFocusCallbackForRegion;
+    private finishInteraction;
+    private expandSelectedRegions(regions, region, focusedCell?);
 }

dist/interactions/selectable.js

@@ -13,2 +13,3 @@ /**
 var React = require("react");
+var FocusedCellUtils = require("../common/internal/focusedCellUtils");
 var utils_1 = require("../common/utils");
@@ -24,11 +25,10 @@ var dragEvents_1 = require("../interactions/dragEvents");
         _this.handleActivate = function (event) {
+            var _a = _this.props, locateClick = _a.locateClick, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
             if (_this.shouldIgnoreMouseDown(event)) {
                 return false;
             }
-            var region = _this.props.locateClick(event);
+            var region = locateClick(event);
             if (!regions_1.Regions.isValid(region)) {
                 return false;
             }
-            var _a = _this.props, onSelection = _a.onSelection, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
-            var focusCellCoordinates = regions_1.Regions.getFocusCellCoordinatesFromRegion(region);
             if (selectedRegionTransform != null) {
@@ -38,106 +38,116 @@ region = selectedRegionTransform(region, event);
             var foundIndex = regions_1.Regions.findMatchingRegion(selectedRegions, region);
-            if (foundIndex !== -1) {
-                // If re-clicking on an existing region, we either carefully
-                // remove it if the meta key is used or otherwise we clear the
-                // selection entirely.
-                if (dragEvents_1.DragEvents.isAdditive(event)) {
-                    var newSelectedRegions = selectedRegions.slice();
-                    newSelectedRegions.splice(foundIndex, 1);
-                    onSelection(newSelectedRegions);
-                }
-                else {
-                    onSelection([]);
-                }
-                var fullFocusCellCoordinates_1 = {
-                    col: focusCellCoordinates.col,
-                    focusSelectionIndex: null,
-                    row: focusCellCoordinates.row,
-                };
-                _this.props.onFocus(fullFocusCellCoordinates_1);
+            var matchesExistingSelection = foundIndex !== -1;
+            if (matchesExistingSelection) {
+                _this.handleUpdateExistingSelection(foundIndex, event);
+                // no need to listen for subsequent drags
                 return false;
             }
-            var focusSelectionIndex = null;
-            if (event.shiftKey && selectedRegions.length > 0) {
-                _this.didExpandSelectionOnActivate = true;
-                onSelection(expandSelectedRegions(selectedRegions, region));
-                focusSelectionIndex = 0;
+            else if (_this.shouldExpandSelection(event)) {
+                _this.handleExpandSelection(region);
             }
-            else if (dragEvents_1.DragEvents.isAdditive(event) && _this.props.allowMultipleSelection) {
-                onSelection(regions_1.Regions.add(selectedRegions, region));
-                // the focus should be in the newly created region,
-                // which is at index of the current list of regions plus one,
-                // which is the length of the current list of regions
-                focusSelectionIndex = selectedRegions.length;
+            else if (_this.shouldAddDisjointSelection(event)) {
+                _this.handleAddDisjointSelection(region);
             }
             else {
-                onSelection([region]);
-                focusSelectionIndex = 0;
+                _this.handleReplaceSelection(region);
             }
-            var fullFocusCellCoordinates = {
-                col: focusCellCoordinates.col,
-                focusSelectionIndex: focusSelectionIndex,
-                row: focusCellCoordinates.row,
-            };
-            _this.props.onFocus(fullFocusCellCoordinates);
             return true;
         };
         _this.handleDragMove = function (event, coords) {
-            var nextSelectedRegions = _this.getDragSelectedRegions(event, coords);
-            if (nextSelectedRegions == null) {
+            var _a = _this.props, allowMultipleSelection = _a.allowMultipleSelection, focusedCell = _a.focusedCell, locateClick = _a.locateClick, locateDrag = _a.locateDrag, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
+            var region = allowMultipleSelection
+                ? locateDrag(event, coords, /* returnEndOnly? */ _this.didExpandSelectionOnActivate)
+                : locateClick(event);
+            if (!regions_1.Regions.isValid(region)) {
                 return;
             }
+            else if (selectedRegionTransform != null) {
+                region = selectedRegionTransform(region, event, coords);
+            }
+            var nextSelectedRegions = _this.didExpandSelectionOnActivate
+                ? _this.expandSelectedRegions(selectedRegions, region, focusedCell)
+                : regions_1.Regions.update(selectedRegions, region);
             _this.maybeInvokeSelectionCallback(nextSelectedRegions);
-            if (!_this.props.allowMultipleSelection) {
-                // have the focused cell follow the selected region
-                var mostRecentRegion = nextSelectedRegions[nextSelectedRegions.length - 1];
-                var focusCellCoordinates = regions_1.Regions.getFocusCellCoordinatesFromRegion(mostRecentRegion);
-                var fullFocusCellCoordinates = {
-                    col: focusCellCoordinates.col,
-                    focusSelectionIndex: nextSelectedRegions.length - 1,
-                    row: focusCellCoordinates.row,
-                };
-                _this.props.onFocus(fullFocusCellCoordinates);
+            if (!allowMultipleSelection) {
+                // move the focused cell with the selected region
+                var lastIndex = nextSelectedRegions.length - 1;
+                var mostRecentRegion = nextSelectedRegions[lastIndex];
+                _this.invokeOnFocusCallbackForRegion(mostRecentRegion, lastIndex);
             }
         };
-        _this.handleDragEnd = function (event, coords) {
-            var nextSelectedRegions = _this.getDragSelectedRegions(event, coords);
-            if (nextSelectedRegions == null) {
-                return;
-            }
-            _this.maybeInvokeSelectionCallback(nextSelectedRegions);
-            core_1.Utils.safeInvoke(_this.props.onSelectionEnd, nextSelectedRegions);
+        _this.handleDragEnd = function () {
             _this.finishInteraction();
         };
-        _this.handleClick = function (event) {
-            if (_this.shouldIgnoreMouseDown(event)) {
-                return false;
+        _this.handleClick = function () {
+            _this.finishInteraction();
+        };
+        // Boolean checks
+        // ==============
+        _this.shouldExpandSelection = function (event) {
+            var allowMultipleSelection = _this.props.allowMultipleSelection;
+            return allowMultipleSelection && event.shiftKey;
+        };
+        _this.shouldAddDisjointSelection = function (event) {
+            var allowMultipleSelection = _this.props.allowMultipleSelection;
+            return allowMultipleSelection && dragEvents_1.DragEvents.isAdditive(event);
+        };
+        // Update logic
+        // ============
+        _this.handleUpdateExistingSelection = function (selectedRegionIndex, event) {
+            var _a = _this.props, onSelection = _a.onSelection, selectedRegions = _a.selectedRegions;
+            if (dragEvents_1.DragEvents.isAdditive(event)) {
+                // remove just the clicked region, leaving other selected regions in place
+                var nextSelectedRegions = selectedRegions.slice();
+                nextSelectedRegions.splice(selectedRegionIndex, 1);
+                onSelection(nextSelectedRegions);
+                // if there are still any selections, move the focused cell to the
+                // most recent selection. otherwise, don't update it.
+                if (nextSelectedRegions.length > 0) {
+                    var lastIndex = nextSelectedRegions.length - 1;
+                    _this.invokeOnFocusCallbackForRegion(nextSelectedRegions[lastIndex], lastIndex);
+                }
             }
-            var region = _this.props.locateClick(event);
-            var selectedRegions = _this.props.selectedRegions;
-            if (!regions_1.Regions.isValid(region)) {
-                _this.maybeInvokeSelectionCallback([]);
-                core_1.Utils.safeInvoke(_this.props.onSelectionEnd, []);
-                return false;
-            }
-            if (_this.props.selectedRegionTransform != null) {
-                region = _this.props.selectedRegionTransform(region, event);
-            }
-            var nextSelectedRegions;
-            if (_this.didExpandSelectionOnActivate) {
-                // we already expanded the selection in handleActivate,
-                // so we don't want to overwrite it here
-                nextSelectedRegions = selectedRegions;
-            }
-            else if (selectedRegions.length > 0) {
-                nextSelectedRegions = regions_1.Regions.update(selectedRegions, region);
-            }
             else {
-                nextSelectedRegions = [region];
+                // clear all selections, but don't update the focused cell
+                onSelection([]);
             }
-            _this.maybeInvokeSelectionCallback(nextSelectedRegions);
-            core_1.Utils.safeInvoke(_this.props.onSelectionEnd, nextSelectedRegions);
-            _this.finishInteraction();
-            return false;
         };
+        _this.handleExpandSelection = function (region) {
+            var _a = _this.props, focusedCell = _a.focusedCell, onSelection = _a.onSelection, selectedRegions = _a.selectedRegions;
+            _this.didExpandSelectionOnActivate = true;
+            // there should be only one selected region after expanding. do not
+            // update the focused cell.
+            var nextSelectedRegions = _this.expandSelectedRegions(selectedRegions, region, focusedCell);
+            onSelection(nextSelectedRegions);
+            // move the focused cell into the new region if there were no selections before
+            if (selectedRegions == null || selectedRegions.length === 0) {
+                _this.invokeOnFocusCallbackForRegion(region);
+            }
+        };
+        _this.handleAddDisjointSelection = function (region) {
+            var _a = _this.props, onSelection = _a.onSelection, selectedRegions = _a.selectedRegions;
+            // add the new region to the existing selections
+            var nextSelectedRegions = regions_1.Regions.add(selectedRegions, region);
+            onSelection(nextSelectedRegions);
+            // put the focused cell in the new region
+            _this.invokeOnFocusCallbackForRegion(region, nextSelectedRegions.length - 1);
+        };
+        _this.handleReplaceSelection = function (region) {
+            var onSelection = _this.props.onSelection;
+            // clear all selections and retain only the new one
+            var nextSelectedRegions = [region];
+            onSelection(nextSelectedRegions);
+            // move the focused cell into the new selection
+            _this.invokeOnFocusCallbackForRegion(region);
+        };
+        _this.invokeOnFocusCallbackForRegion = function (focusRegion, focusSelectionIndex) {
+            if (focusSelectionIndex === void 0) { focusSelectionIndex = 0; }
+            var onFocus = _this.props.onFocus;
+            var focusedCellCoords = regions_1.Regions.getFocusCellCoordinatesFromRegion(focusRegion);
+            onFocus(FocusedCellUtils.toFullCoordinates(focusedCellCoords, focusSelectionIndex));
+        };
+        // Other
+        // =====
         _this.finishInteraction = function () {
+            core_1.Utils.safeInvoke(_this.props.onSelectionEnd, _this.props.selectedRegions);
             _this.didExpandSelectionOnActivate = false;
@@ -166,26 +176,33 @@ };
     };
-    DragSelectable.prototype.getDragSelectedRegions = function (event, coords) {
-        var _a = this.props, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
-        var region = this.props.allowMultipleSelection
-            ? this.props.locateDrag(event, coords)
-            : this.props.locateClick(event);
-        if (!regions_1.Regions.isValid(region)) {
-            return undefined;
-        }
-        if (selectedRegionTransform != null) {
-            region = selectedRegionTransform(region, event, coords);
-        }
-        return this.didExpandSelectionOnActivate
-            ? expandSelectedRegions(selectedRegions, region)
-            : regions_1.Regions.update(selectedRegions, region);
-    };
+    // Callbacks
+    // =========
     DragSelectable.prototype.maybeInvokeSelectionCallback = function (nextSelectedRegions) {
-        var selectedRegions = this.props.selectedRegions;
-        // invoke only if the selection changed
+        var _a = this.props, onSelection = _a.onSelection, selectedRegions = _a.selectedRegions;
+        // invoke only if the selection changed. this is useful only on
+        // mousemove; there's special handling for mousedown interactions that
+        // target an already-selected region.
         if (!utils_1.Utils.deepCompareKeys(selectedRegions, nextSelectedRegions)) {
-            this.props.onSelection(nextSelectedRegions);
+            onSelection(nextSelectedRegions);
         }
     };
+    DragSelectable.prototype.expandSelectedRegions = function (regions, region, focusedCell) {
+        if (regions.length === 0) {
+            return [region];
+        }
+        else if (focusedCell != null) {
+            var expandedRegion = FocusedCellUtils.expandFocusedRegion(focusedCell, region);
+            return regions_1.Regions.update(regions, expandedRegion);
+        }
+        else {
+            var expandedRegion = regions_1.Regions.expandRegion(regions[regions.length - 1], region);
+            return regions_1.Regions.update(regions, expandedRegion);
+        }
+    };
     return DragSelectable;
 }(React.Component));
+DragSelectable.defaultProps = {
+    allowMultipleSelection: false,
+    disabled: false,
+    selectedRegions: [],
+};
 DragSelectable = tslib_1.__decorate([
@@ -195,42 +212,3 @@ PureRender
 exports.DragSelectable = DragSelectable;
-function expandSelectedRegions(regions, region) {
-    if (regions.length === 0) {
-        return [region];
-    }
-    var lastRegion = regions[regions.length - 1];
-    var lastRegionCardinality = regions_1.Regions.getRegionCardinality(lastRegion);
-    var regionCardinality = regions_1.Regions.getRegionCardinality(region);
-    if (regionCardinality !== lastRegionCardinality) {
-        // TODO: add proper handling for expanding regions from one cardinality to another depending
-        // on the focused cell (see: https://github.com/palantir/blueprint/issues/823). for now,
-        // just return the new region by itself.
-        return [region];
-    }
-    // simplified algorithm: expand the most recently selected region, and clear all others.
-    // TODO: pass the current focused cell into DragSelectable via props, then update this logic
-    // to leverage the focus cell's coordinates appropriately.
-    // (see: https://github.com/palantir/blueprint/issues/823)
-    if (regionCardinality === regions_1.RegionCardinality.FULL_ROWS) {
-        var rowStart = Math.min(lastRegion.rows[0], region.rows[0]);
-        var rowEnd = Math.max(lastRegion.rows[1], region.rows[1]);
-        return [regions_1.Regions.row(rowStart, rowEnd)];
-    }
-    else if (regionCardinality === regions_1.RegionCardinality.FULL_COLUMNS) {
-        var colStart = Math.min(lastRegion.cols[0], region.cols[0]);
-        var colEnd = Math.max(lastRegion.cols[1], region.cols[1]);
-        return [regions_1.Regions.column(colStart, colEnd)];
-    }
-    else if (regionCardinality === regions_1.RegionCardinality.CELLS) {
-        var rowStart = Math.min(lastRegion.rows[0], region.rows[0]);
-        var colStart = Math.min(lastRegion.cols[0], region.cols[0]);
-        var rowEnd = Math.max(lastRegion.rows[1], region.rows[1]);
-        var colEnd = Math.max(lastRegion.cols[1], region.cols[1]);
-        return [regions_1.Regions.cell(rowStart, colStart, rowEnd, colEnd)];
-    }
-    else {
-        // if we've selected the FULL_TABLE, no need to expand it further.
-        return [region];
-    }
-}
 
 //# sourceMappingURL=selectable.js.map

dist/regions.d.ts

@@ -213,2 +213,9 @@ /**
     /**
+     * Expands an old region to the minimal bounding region that also contains
+     * the new region. If the regions have different cardinalities, then the new
+     * region is returned. Useful for expanding a selected region on
+     * shift+click, for instance.
+     */
+    static expandRegion(oldRegion: IRegion, newRegion: IRegion): IRegion;
+    /**
      * Iterates over the cells within an `IRegion`, invoking the callback with
@@ -215,0 +222,0 @@ * each cell's coordinates.

dist/regions.js

@@ -495,2 +495,36 @@ /**
     /**
+     * Expands an old region to the minimal bounding region that also contains
+     * the new region. If the regions have different cardinalities, then the new
+     * region is returned. Useful for expanding a selected region on
+     * shift+click, for instance.
+     */
+    Regions.expandRegion = function (oldRegion, newRegion) {
+        var oldRegionCardinality = Regions.getRegionCardinality(oldRegion);
+        var newRegionCardinality = Regions.getRegionCardinality(newRegion);
+        if (newRegionCardinality !== oldRegionCardinality) {
+            return newRegion;
+        }
+        switch (newRegionCardinality) {
+            case RegionCardinality.FULL_ROWS: {
+                var rowStart = Math.min(oldRegion.rows[0], newRegion.rows[0]);
+                var rowEnd = Math.max(oldRegion.rows[1], newRegion.rows[1]);
+                return Regions.row(rowStart, rowEnd);
+            }
+            case RegionCardinality.FULL_COLUMNS: {
+                var colStart = Math.min(oldRegion.cols[0], newRegion.cols[0]);
+                var colEnd = Math.max(oldRegion.cols[1], newRegion.cols[1]);
+                return Regions.column(colStart, colEnd);
+            }
+            case RegionCardinality.CELLS: {
+                var rowStart = Math.min(oldRegion.rows[0], newRegion.rows[0]);
+                var colStart = Math.min(oldRegion.cols[0], newRegion.cols[0]);
+                var rowEnd = Math.max(oldRegion.rows[1], newRegion.rows[1]);
+                var colEnd = Math.max(oldRegion.cols[1], newRegion.cols[1]);
+                return Regions.cell(rowStart, colStart, rowEnd, colEnd);
+            }
+            default:
+                return Regions.table();
+        }
+    };
+    /**
      * Iterates over the cells within an `IRegion`, invoking the callback with
@@ -497,0 +531,0 @@ * each cell's coordinates.

dist/table.d.ts

@@ -344,2 +344,3 @@ /// <reference types="react" />
     private renderMenu;
+    private handleMenuMouseDown;
     private maybeScrollTableIntoView();
@@ -346,0 +347,0 @@ private selectAll;

dist/table.js

@@ -67,6 +67,11 @@ /**
                 _a));
-            return (React.createElement("div", { className: classes, ref: refHandler, onClick: _this.selectAll }, _this.maybeRenderRegions(_this.styleMenuRegion)));
+            return (React.createElement("div", { className: classes, ref: refHandler, onMouseDown: _this.handleMenuMouseDown }, _this.maybeRenderRegions(_this.styleMenuRegion)));
             var _a;
         };
-        _this.selectAll = function () {
+        _this.handleMenuMouseDown = function (e) {
+            // the shift+click interaction expands the region from the focused cell.
+            // thus, if shift is pressed we shouldn't move the focused cell.
+            _this.selectAll(!e.shiftKey);
+        };
+        _this.selectAll = function (shouldUpdateFocusedCell) {
             var selectionHandler = _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_TABLE);
@@ -76,10 +81,6 @@ // clicking on upper left hand corner sets selection to "all"
             selectionHandler([regions_2.Regions.table()]);
-            // move the focus cell to the top left
-            var newFocusedCellCoordinates = regions_2.Regions.getFocusCellCoordinatesFromRegion(regions_2.Regions.table());
-            var fullFocusCellCoordinates = {
-                col: newFocusedCellCoordinates.col,
-                focusSelectionIndex: 0,
-                row: newFocusedCellCoordinates.row,
-            };
-            _this.handleFocus(fullFocusCellCoordinates);
+            if (shouldUpdateFocusedCell) {
+                var newFocusedCellCoordinates = regions_2.Regions.getFocusCellCoordinatesFromRegion(regions_2.Regions.table());
+                _this.handleFocus(FocusedCellUtils.toFullCoordinates(newFocusedCellCoordinates));
+            }
         };
@@ -90,3 +91,4 @@ _this.handleSelectAllHotkey = function (e) {
             e.stopPropagation();
-            _this.selectAll();
+            // selecting-all via the keyboard should not move the focused cell.
+            _this.selectAll(false);
         };
@@ -115,3 +117,3 @@ _this.columnHeaderCellRenderer = function (columnIndex) {
             var _a = _this, grid = _a.grid, locator = _a.locator;
-            var _b = _this.state, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
+            var _b = _this.state, focusedCell = _b.focusedCell, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
             var _c = _this.props, allowMultipleSelection = _c.allowMultipleSelection, fillBodyWithGhostCells = _c.fillBodyWithGhostCells, isColumnReorderable = _c.isColumnReorderable, isColumnResizable = _c.isColumnResizable, loadingOptions = _c.loadingOptions, maxColumnWidth = _c.maxColumnWidth, minColumnWidth = _c.minColumnWidth, selectedRegionTransform = _c.selectedRegionTransform;
@@ -125,3 +127,3 @@ var classes = classNames(Classes.TABLE_COLUMN_HEADERS, (_d = {},
             return (React.createElement("div", { className: classes, ref: refHandler },
-                React.createElement(columnHeader_1.ColumnHeader, { allowMultipleSelection: allowMultipleSelection, cellRenderer: _this.columnHeaderCellRenderer, grid: grid, isReorderable: isColumnReorderable, isResizable: isColumnResizable, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.COLUMN_HEADERS), locator: locator, maxColumnWidth: maxColumnWidth, minColumnWidth: minColumnWidth, onColumnWidthChanged: _this.handleColumnWidthChanged, onFocus: _this.handleFocus, onLayoutLock: _this.handleLayoutLock, onReordered: _this.handleColumnsReordered, onReordering: reorderingHandler, onResizeGuide: resizeHandler, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_COLUMNS), selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, columnIndexStart: columnIndexStart, columnIndexEnd: columnIndexEnd }, _this.props.children),
+                React.createElement(columnHeader_1.ColumnHeader, { allowMultipleSelection: allowMultipleSelection, cellRenderer: _this.columnHeaderCellRenderer, focusedCell: focusedCell, grid: grid, isReorderable: isColumnReorderable, isResizable: isColumnResizable, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.COLUMN_HEADERS), locator: locator, maxColumnWidth: maxColumnWidth, minColumnWidth: minColumnWidth, onColumnWidthChanged: _this.handleColumnWidthChanged, onFocus: _this.handleFocus, onLayoutLock: _this.handleLayoutLock, onReordered: _this.handleColumnsReordered, onReordering: reorderingHandler, onResizeGuide: resizeHandler, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_COLUMNS), selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, columnIndexStart: columnIndexStart, columnIndexEnd: columnIndexEnd }, _this.props.children),
                 _this.maybeRenderRegions(_this.styleColumnHeaderRegion)));
@@ -133,3 +135,3 @@ var _d;
             var _a = _this, grid = _a.grid, locator = _a.locator;
-            var _b = _this.state, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
+            var _b = _this.state, focusedCell = _b.focusedCell, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
             var _c = _this.props, allowMultipleSelection = _c.allowMultipleSelection, fillBodyWithGhostCells = _c.fillBodyWithGhostCells, isRowReorderable = _c.isRowReorderable, isRowResizable = _c.isRowResizable, loadingOptions = _c.loadingOptions, maxRowHeight = _c.maxRowHeight, minRowHeight = _c.minRowHeight, renderRowHeader = _c.renderRowHeader, selectedRegionTransform = _c.selectedRegionTransform;
@@ -143,3 +145,3 @@ var classes = classNames(Classes.TABLE_ROW_HEADERS, (_d = {},
             return (React.createElement("div", { className: classes, ref: refHandler },
-                React.createElement(rowHeader_1.RowHeader, { allowMultipleSelection: allowMultipleSelection, grid: grid, locator: locator, isReorderable: isRowReorderable, isResizable: isRowResizable, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.ROW_HEADERS), maxRowHeight: maxRowHeight, minRowHeight: minRowHeight, onFocus: _this.handleFocus, onLayoutLock: _this.handleLayoutLock, onResizeGuide: resizeHandler, onReordered: _this.handleRowsReordered, onReordering: reorderingHandler, onRowHeightChanged: _this.handleRowHeightChanged, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_ROWS), renderRowHeader: renderRowHeader, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, rowIndexStart: rowIndexStart, rowIndexEnd: rowIndexEnd }),
+                React.createElement(rowHeader_1.RowHeader, { allowMultipleSelection: allowMultipleSelection, focusedCell: focusedCell, grid: grid, locator: locator, isReorderable: isRowReorderable, isResizable: isRowResizable, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.ROW_HEADERS), maxRowHeight: maxRowHeight, minRowHeight: minRowHeight, onFocus: _this.handleFocus, onLayoutLock: _this.handleLayoutLock, onResizeGuide: resizeHandler, onReordered: _this.handleRowsReordered, onReordering: reorderingHandler, onRowHeightChanged: _this.handleRowHeightChanged, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_ROWS), renderRowHeader: renderRowHeader, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, rowIndexStart: rowIndexStart, rowIndexEnd: rowIndexEnd }),
                 _this.maybeRenderRegions(_this.styleRowHeaderRegion)));
@@ -161,7 +163,6 @@ var _d;
             var _a = _this, grid = _a.grid, locator = _a.locator;
-            var _b = _this.props, allowMultipleSelection = _b.allowMultipleSelection, fillBodyWithGhostCells = _b.fillBodyWithGhostCells, loadingOptions = _b.loadingOptions, renderBodyContextMenu = _b.renderBodyContextMenu, renderMode = _b.renderMode, selectedRegionTransform = _b.selectedRegionTransform;
+            var _b = _this.state, focusedCell = _b.focusedCell, selectedRegions = _b.selectedRegions, viewportRect = _b.viewportRect;
+            var _c = _this.props, allowMultipleSelection = _c.allowMultipleSelection, fillBodyWithGhostCells = _c.fillBodyWithGhostCells, loadingOptions = _c.loadingOptions, renderBodyContextMenu = _c.renderBodyContextMenu, renderMode = _c.renderMode, selectedRegionTransform = _c.selectedRegionTransform;
             var numFrozenColumns = _this.getNumFrozenColumnsClamped();
             var numFrozenRows = _this.getNumFrozenRowsClamped();
-            var _c = _this.state, selectedRegions = _c.selectedRegions, viewportRect = _c.viewportRect /*, verticalGuides, horizontalGuides*/;
-            // const style = grid.getRect().sizeStyle();
             var rowIndices = grid.getRowIndicesInRect(viewportRect, fillBodyWithGhostCells);
@@ -178,3 +179,3 @@ var columnIndices = grid.getColumnIndicesInRect(viewportRect, fillBodyWithGhostCells);
             return (React.createElement("div", null,
-                React.createElement(tableBody_1.TableBody, { allowMultipleSelection: allowMultipleSelection, cellRenderer: _this.bodyCellRenderer, grid: grid, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.CELLS), locator: locator, onCompleteRender: onCompleteRender, onFocus: _this.handleFocus, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.CELLS), renderBodyContextMenu: renderBodyContextMenu, renderMode: renderMode, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect, columnIndexStart: columnIndexStart, columnIndexEnd: columnIndexEnd, rowIndexStart: rowIndexStart, rowIndexEnd: rowIndexEnd, numFrozenColumns: showFrozenColumnsOnly ? numFrozenColumns : undefined, numFrozenRows: showFrozenRowsOnly ? numFrozenRows : undefined }),
+                React.createElement(tableBody_1.TableBody, { allowMultipleSelection: allowMultipleSelection, cellRenderer: _this.bodyCellRenderer, focusedCell: focusedCell, grid: grid, loading: _this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.CELLS), locator: locator, onCompleteRender: onCompleteRender, onFocus: _this.handleFocus, onSelection: _this.getEnabledSelectionHandler(regions_2.RegionCardinality.CELLS), renderBodyContextMenu: renderBodyContextMenu, renderMode: renderMode, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect, columnIndexStart: columnIndexStart, columnIndexEnd: columnIndexEnd, rowIndexStart: rowIndexStart, rowIndexEnd: rowIndexEnd, numFrozenColumns: showFrozenColumnsOnly ? numFrozenColumns : undefined, numFrozenRows: showFrozenRowsOnly ? numFrozenRows : undefined }),
                 _this.maybeRenderRegions(_this.styleBodyRegion, quadrantType)));
@@ -181,0 +182,0 @@ };

dist/tableBody.js

@@ -28,2 +28,3 @@ /**
 var UPDATE_PROPS_KEYS = [
+    "focusedCell",
     "grid",
@@ -57,8 +58,22 @@ "locator",
         _this.renderContextMenu = function (e) {
-            var _a = _this.props, selectedRegions = _a.selectedRegions, renderBodyContextMenu = _a.renderBodyContextMenu, grid = _a.grid;
+            var _a = _this.props, grid = _a.grid, onFocus = _a.onFocus, onSelection = _a.onSelection, renderBodyContextMenu = _a.renderBodyContextMenu, selectedRegions = _a.selectedRegions;
+            var numRows = grid.numRows, numCols = grid.numCols;
             if (renderBodyContextMenu == null) {
                 return undefined;
             }
-            var target = _this.locateClick(e.nativeEvent);
-            return renderBodyContextMenu(new menus_1.MenuContext(target, selectedRegions, grid.numRows, grid.numCols));
+            var targetRegion = _this.locateClick(e.nativeEvent);
+            var nextSelectedRegions = selectedRegions;
+            // if the event did not happen within a selected region, clear all
+            // selections and select the right-clicked cell.
+            var foundIndex = regions_1.Regions.findContainingRegion(selectedRegions, targetRegion);
+            if (foundIndex < 0) {
+                nextSelectedRegions = [targetRegion];
+                onSelection(nextSelectedRegions);
+                // move the focused cell to the new region.
+                var nextFocusedCell = tslib_1.__assign({}, regions_1.Regions.getFocusCellCoordinatesFromRegion(targetRegion), { focusSelectionIndex: 0 });
+                onFocus(nextFocusedCell);
+            }
+            var menuContext = new menus_1.MenuContext(targetRegion, nextSelectedRegions, numRows, numCols);
+            var contextMenu = renderBodyContextMenu(menuContext);
+            return contextMenu == null ? undefined : contextMenu;
         };
@@ -97,6 +112,9 @@ // Cell renderers
         };
-        _this.locateDrag = function (_event, coords) {
+        _this.locateDrag = function (_event, coords, returnEndOnly) {
+            if (returnEndOnly === void 0) { returnEndOnly = false; }
             var start = _this.activationCell;
             var end = _this.props.locator.convertPointToCell(coords.current[0], coords.current[1]);
-            return regions_1.Regions.cell(start.row, start.col, end.row, end.col);
+            return returnEndOnly
+                ? regions_1.Regions.cell(end.row, end.col)
+                : regions_1.Regions.cell(start.row, start.col, end.row, end.col);
         };
@@ -139,3 +157,3 @@ return _this;
     TableBody.prototype.render = function () {
-        var _a = this.props, allowMultipleSelection = _a.allowMultipleSelection, grid = _a.grid, numFrozenColumns = _a.numFrozenColumns, numFrozenRows = _a.numFrozenRows, onFocus = _a.onFocus, onSelection = _a.onSelection, renderMode = _a.renderMode, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
+        var _a = this.props, allowMultipleSelection = _a.allowMultipleSelection, focusedCell = _a.focusedCell, grid = _a.grid, numFrozenColumns = _a.numFrozenColumns, numFrozenRows = _a.numFrozenRows, onFocus = _a.onFocus, onSelection = _a.onSelection, renderMode = _a.renderMode, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
         var cells = (renderMode === renderMode_1.RenderMode.BATCH)
@@ -149,3 +167,3 @@ ? this.renderBatchedCells()
         };
-        return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, locateClick: this.locateClick, locateDrag: this.locateDrag, onFocus: onFocus, onSelection: onSelection, onSelectionEnd: this.handleSelectionEnd, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
+        return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, focusedCell: focusedCell, locateClick: this.locateClick, locateDrag: this.locateDrag, onFocus: onFocus, onSelection: onSelection, onSelectionEnd: this.handleSelectionEnd, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
             React.createElement(contextMenuTargetWrapper_1.ContextMenuTargetWrapper, { className: classNames(Classes.TABLE_BODY_VIRTUAL_CLIENT, Classes.TABLE_CELL_CLIENT), renderContextMenu: this.renderContextMenu, style: style }, cells)));
@@ -152,0 +170,0 @@ };

package.json

 {
   "name": "@blueprintjs/table",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "description": "Scalable interactive table component",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

src/common/errors.ts

@@ -28,1 +28,7 @@ /*
     `${ns} <Table> numFrozenRows must be in [0, numRows]`;
+
+export const TABLE_EXPAND_FOCUSED_REGION_MULTI_ROW_REGION =
+    `${ns} <Table> Cannot expand a FULL_COLUMNS selection using a multi-row region`;
+
+export const TABLE_EXPAND_FOCUSED_REGION_MULTI_COLUMN_REGION =
+    `${ns} <Table> Cannot expand a FULL_COLUMNS selection using a multi-column region`;

src/common/internal/focusedCellUtils.ts

@@ -8,4 +8,5 @@ /**
 
-import { IRegion, Regions } from "../../regions";
-import { IFocusedCellCoordinates } from "../cell";
+import { IRegion, RegionCardinality, Regions } from "../../regions";
+import { ICellCoordinates, IFocusedCellCoordinates } from "../cell";
+import * as Errors from "../errors";
 
@@ -30,6 +31,7 @@ /**
     } else if (selectedRegions.length > 0) {
-        // focus the top-left cell of the first selection
+        // focus the top-left cell of the last selection
+        const lastIndex = selectedRegions.length - 1;
         return {
-            ...Regions.getFocusCellCoordinatesFromRegion(selectedRegions[0]),
-            focusSelectionIndex: 0,
+            ...Regions.getFocusCellCoordinatesFromRegion(selectedRegions[lastIndex]),
+            focusSelectionIndex: lastIndex,
         };
@@ -41,1 +43,59 @@ } else {
 }
+
+/**
+ * Returns a new cell-coordinates object that includes a focusSelectionIndex property.
+ * The returned object will have the proper IFocusedCellCoordinates type.
+ */
+export function toFullCoordinates(
+    cellCoords: ICellCoordinates,
+    focusSelectionIndex: number = 0,
+): IFocusedCellCoordinates {
+    return { ...cellCoords, focusSelectionIndex };
+}
+
+/**
+ * Expands an existing region to new region based on the current focused cell.
+ * The focused cell is an invariant and should not move as a result of this
+ * operation. This function is used, for instance, to expand a selected region
+ * on shift+click.
+ */
+export function expandFocusedRegion(focusedCell: IFocusedCellCoordinates, newRegion: IRegion) {
+    switch (Regions.getRegionCardinality(newRegion)) {
+        case RegionCardinality.FULL_COLUMNS: {
+            const [indexStart, indexEnd] = getExpandedRegionIndices(focusedCell, newRegion, "col", "cols");
+            return Regions.column(indexStart, indexEnd);
+        }
+        case RegionCardinality.FULL_ROWS: {
+            const [indexStart, indexEnd] = getExpandedRegionIndices(focusedCell, newRegion, "row", "rows");
+            return Regions.row(indexStart, indexEnd);
+        }
+        case RegionCardinality.CELLS:
+            const [rowIndexStart, rowIndexEnd] = getExpandedRegionIndices(focusedCell, newRegion, "row", "rows");
+            const [colIndexStart, colIndexEnd] = getExpandedRegionIndices(focusedCell, newRegion, "col", "cols");
+            return Regions.cell(rowIndexStart, colIndexStart, rowIndexEnd, colIndexEnd);
+        default: // i.e. `case RegionCardinality.FULL_TABLE:`
+            return Regions.table();
+    }
+}
+
+function getExpandedRegionIndices(
+    focusedCell: IFocusedCellCoordinates,
+    newRegion: IRegion,
+    focusedCellDimension: "row" | "col",
+    regionDimension: "rows" | "cols",
+) {
+    const sourceIndex = focusedCell[focusedCellDimension];
+    const [destinationIndex, destinationIndexEnd] = newRegion[regionDimension];
+
+    if (destinationIndex !== destinationIndexEnd) {
+        if (regionDimension === "rows") {
+            throw new Error(Errors.TABLE_EXPAND_FOCUSED_REGION_MULTI_ROW_REGION);
+        } else if (regionDimension === "cols") {
+            throw new Error(Errors.TABLE_EXPAND_FOCUSED_REGION_MULTI_COLUMN_REGION);
+        }
+    }
+
+    return sourceIndex <= destinationIndex
+        ? [sourceIndex, destinationIndex]
+        : [destinationIndex, sourceIndex];
+}

src/regions.ts

@@ -575,2 +575,39 @@ /**
     /**
+     * Expands an old region to the minimal bounding region that also contains
+     * the new region. If the regions have different cardinalities, then the new
+     * region is returned. Useful for expanding a selected region on
+     * shift+click, for instance.
+     */
+    public static expandRegion(oldRegion: IRegion, newRegion: IRegion): IRegion {
+        const oldRegionCardinality = Regions.getRegionCardinality(oldRegion);
+        const newRegionCardinality = Regions.getRegionCardinality(newRegion);
+
+        if (newRegionCardinality !== oldRegionCardinality) {
+            return newRegion;
+        }
+
+        switch (newRegionCardinality) {
+            case RegionCardinality.FULL_ROWS: {
+                const rowStart = Math.min(oldRegion.rows[0], newRegion.rows[0]);
+                const rowEnd = Math.max(oldRegion.rows[1], newRegion.rows[1]);
+                return Regions.row(rowStart, rowEnd);
+            }
+            case RegionCardinality.FULL_COLUMNS: {
+                const colStart = Math.min(oldRegion.cols[0], newRegion.cols[0]);
+                const colEnd = Math.max(oldRegion.cols[1], newRegion.cols[1]);
+                return Regions.column(colStart, colEnd);
+            }
+            case RegionCardinality.CELLS: {
+                const rowStart = Math.min(oldRegion.rows[0], newRegion.rows[0]);
+                const colStart = Math.min(oldRegion.cols[0], newRegion.cols[0]);
+                const rowEnd = Math.max(oldRegion.rows[1], newRegion.rows[1]);
+                const colEnd = Math.max(oldRegion.cols[1], newRegion.cols[1]);
+                return Regions.cell(rowStart, colStart, rowEnd, colEnd);
+            }
+            default:
+                return Regions.table();
+        }
+    }
+
+    /**
      * Iterates over the cells within an `IRegion`, invoking the callback with
@@ -577,0 +614,0 @@ * each cell's coordinates.

No alert changes

Improved metrics

Total package byte prevSize

2670701

increased by1.29%

Lines of code

27525

increased by1.33%

No dependency changes