@blueprintjs/table - npm Package Compare versions

Comparing version 1.10.0 to 1.11.0

dist/common/classes.d.ts

@@ -19,2 +19,3 @@ export declare const TABLE_BODY = "bp-table-body";
 export declare const TABLE_EDITABLE_NAME = "bp-table-editable-name";
+export declare const TABLE_FOCUS_REGION = "bp-table-focus-region";
 export declare const TABLE_HEADER = "bp-table-header";
@@ -55,2 +56,4 @@ export declare const TABLE_HEADER_ACTIVE = "bp-table-header-active";
 export declare const TABLE_TH_MENU = "bp-table-th-menu";
+export declare const TABLE_TH_MENU_CONTAINER = "bp-table-th-menu-container";
+export declare const TABLE_TH_MENU_CONTAINER_BACKGROUND = "bp-table-th-menu-container-background";
 export declare const TABLE_THEAD = "bp-table-thead";
@@ -57,0 +60,0 @@ export declare const TABLE_TOP_CONTAINER = "bp-table-top-container";

dist/common/classes.js

@@ -27,2 +27,3 @@ /*
 exports.TABLE_EDITABLE_NAME = "bp-table-editable-name";
+exports.TABLE_FOCUS_REGION = "bp-table-focus-region";
 exports.TABLE_HEADER = "bp-table-header";
@@ -63,2 +64,4 @@ exports.TABLE_HEADER_ACTIVE = "bp-table-header-active";
 exports.TABLE_TH_MENU = "bp-table-th-menu";
+exports.TABLE_TH_MENU_CONTAINER = "bp-table-th-menu-container";
+exports.TABLE_TH_MENU_CONTAINER_BACKGROUND = "bp-table-th-menu-container-background";
 exports.TABLE_THEAD = "bp-table-thead";
@@ -65,0 +68,0 @@ exports.TABLE_TOP_CONTAINER = "bp-table-top-container";

dist/headers/columnHeader.js

@@ -34,3 +34,3 @@ /**
         _this.renderCell = function (columnIndex, extremaClasses) {
-            var _a = _this.props, allowMultipleSelection = _a.allowMultipleSelection, cellRenderer = _a.cellRenderer, grid = _a.grid, isResizable = _a.isResizable, loading = _a.loading, maxColumnWidth = _a.maxColumnWidth, minColumnWidth = _a.minColumnWidth, onColumnWidthChanged = _a.onColumnWidthChanged, onLayoutLock = _a.onLayoutLock, onResizeGuide = _a.onResizeGuide, onSelection = _a.onSelection, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
+            var _a = _this.props, allowMultipleSelection = _a.allowMultipleSelection, cellRenderer = _a.cellRenderer, grid = _a.grid, isResizable = _a.isResizable, loading = _a.loading, maxColumnWidth = _a.maxColumnWidth, minColumnWidth = _a.minColumnWidth, onFocus = _a.onFocus, onColumnWidthChanged = _a.onColumnWidthChanged, onLayoutLock = _a.onLayoutLock, onResizeGuide = _a.onResizeGuide, onSelection = _a.onSelection, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
             var rect = grid.getColumnRect(columnIndex);
@@ -57,3 +57,3 @@ var handleSizeChanged = function (size) {
             var cellProps = { className: className, isColumnSelected: isColumnSelected, loading: cellLoading };
-            return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, key: Classes.columnIndexClass(columnIndex), locateClick: _this.locateClick, locateDrag: _this.locateDrag, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
+            return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, key: Classes.columnIndexClass(columnIndex), locateClick: _this.locateClick, locateDrag: _this.locateDrag, onFocus: onFocus, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
                 React.createElement(resizable_1.Resizable, { isResizable: isResizable, maxSize: maxColumnWidth, minSize: minColumnWidth, onDoubleClick: handleDoubleClick, onLayoutLock: onLayoutLock, onResizeEnd: handleResizeEnd, onSizeChanged: handleSizeChanged, orientation: resizeHandle_1.Orientation.VERTICAL, size: rect.width }, React.cloneElement(cell, cellProps))));
@@ -60,0 +60,0 @@ var _b;

dist/headers/columnHeaderCell.d.ts

@@ -59,3 +59,3 @@ import * as React from "react";
      * The icon name for the header's menu button.
-     * @default 'more'
+     * @default 'chevron-down'
      */
@@ -62,0 +62,0 @@ menuIconName?: string;

dist/headers/columnHeaderCell.js

@@ -95,4 +95,6 @@ /**
             }];
-        return (React.createElement(core_1.Popover, { tetherOptions: { constraints: constraints }, content: menu, position: core_1.Position.BOTTOM, className: Classes.TABLE_TH_MENU, popoverDidOpen: this.getPopoverStateChangeHandler(true), popoverWillClose: this.getPopoverStateChangeHandler(false), useSmartArrowPositioning: true },
-            React.createElement("span", { className: popoverTargetClasses })));
+        return (React.createElement("div", { className: Classes.TABLE_TH_MENU_CONTAINER },
+            React.createElement("div", { className: Classes.TABLE_TH_MENU_CONTAINER_BACKGROUND }),
+            React.createElement(core_1.Popover, { tetherOptions: { constraints: constraints }, content: menu, position: core_1.Position.BOTTOM, className: Classes.TABLE_TH_MENU, popoverDidOpen: this.getPopoverStateChangeHandler(true), popoverWillClose: this.getPopoverStateChangeHandler(false), useSmartArrowPositioning: true },
+                React.createElement("span", { className: popoverTargetClasses }))));
     };
@@ -103,3 +105,3 @@ return ColumnHeaderCell;
     isActive: false,
-    menuIconName: "more",
+    menuIconName: "chevron-down",
     useInteractionBar: false,
@@ -106,0 +108,0 @@ };

dist/headers/rowHeader.js

@@ -33,3 +33,3 @@ /**
         _this.renderCell = function (rowIndex, extremaClasses) {
-            var _a = _this.props, allowMultipleSelection = _a.allowMultipleSelection, grid = _a.grid, isResizable = _a.isResizable, loading = _a.loading, maxRowHeight = _a.maxRowHeight, minRowHeight = _a.minRowHeight, onLayoutLock = _a.onLayoutLock, onResizeGuide = _a.onResizeGuide, onRowHeightChanged = _a.onRowHeightChanged, onSelection = _a.onSelection, renderRowHeader = _a.renderRowHeader, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
+            var _a = _this.props, allowMultipleSelection = _a.allowMultipleSelection, grid = _a.grid, isResizable = _a.isResizable, loading = _a.loading, maxRowHeight = _a.maxRowHeight, minRowHeight = _a.minRowHeight, onFocus = _a.onFocus, onLayoutLock = _a.onLayoutLock, onResizeGuide = _a.onResizeGuide, onRowHeightChanged = _a.onRowHeightChanged, onSelection = _a.onSelection, renderRowHeader = _a.renderRowHeader, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
             var rect = grid.getRowRect(rowIndex);
@@ -50,3 +50,3 @@ var handleSizeChanged = function (size) {
             var cellProps = { className: className, isRowSelected: isRowSelected, loading: cellLoading };
-            return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, key: Classes.rowIndexClass(rowIndex), locateClick: _this.locateClick, locateDrag: _this.locateDrag, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
+            return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, key: Classes.rowIndexClass(rowIndex), locateClick: _this.locateClick, locateDrag: _this.locateDrag, onFocus: onFocus, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
                 React.createElement(resizable_1.Resizable, { isResizable: isResizable, maxSize: maxRowHeight, minSize: minRowHeight, onLayoutLock: onLayoutLock, onResizeEnd: handleResizeEnd, onSizeChanged: handleSizeChanged, orientation: resizeHandle_1.Orientation.HORIZONTAL, size: rect.height }, React.cloneElement(cell, cellProps))));
@@ -53,0 +53,0 @@ var _b;

dist/interactions/selectable.d.ts

 import * as React from "react";
+import { IFocusedCellCoordinates } from "../common/cell";
 import { ICoordinateData } from "../interactions/draggable";
@@ -13,2 +14,8 @@ import { IRegion } from "../regions";
     /**
+     * When the user focuses something, this callback is called with new
+     * focused cell coordinates. This should be considered the new focused cell
+     * state for the entire table.
+     */
+    onFocus: (focusedCell: IFocusedCellCoordinates) => void;
+    /**
      * When the user selects something, this callback is called with a new
@@ -48,2 +55,3 @@ * array of `Region`s. This array should be considered the new selection
     static isLeftClick(event: MouseEvent): boolean;
+    private static getFocusCellCoordinatesFromRegion(region);
     render(): JSX.Element;
@@ -50,0 +58,0 @@ private getDraggableProps();

dist/interactions/selectable.js

@@ -27,2 +27,4 @@ /**
             }
+            var focusCellCoordinates = DragSelectable_1.getFocusCellCoordinatesFromRegion(region);
+            _this.props.onFocus(focusCellCoordinates);
             if (_this.props.selectedRegionTransform != null) {
@@ -91,2 +93,17 @@ region = _this.props.selectedRegionTransform(region, event);
     };
+    DragSelectable.getFocusCellCoordinatesFromRegion = function (region) {
+        var regionCardinality = regions_1.Regions.getRegionCardinality(region);
+        switch (regionCardinality) {
+            case regions_1.RegionCardinality.FULL_TABLE:
+                return { col: 0, row: 0 };
+            case regions_1.RegionCardinality.FULL_COLUMNS:
+                return { col: region.cols[0], row: 0 };
+            case regions_1.RegionCardinality.FULL_ROWS:
+                return { col: 0, row: region.rows[0] };
+            case regions_1.RegionCardinality.CELLS:
+                return { col: region.cols[0], row: region.rows[0] };
+            default:
+                return null;
+        }
+    };
     DragSelectable.prototype.render = function () {
@@ -93,0 +110,0 @@ var draggableProps = this.getDraggableProps();

dist/regions.d.ts

 /**
+ * Copyright 2016 Palantir Technologies, Inc. All rights reserved.
+ * Licensed under the BSD-3 License as modified (the “License”); you may obtain a copy
+ * of the license at https://github.com/palantir/blueprint/blob/master/LICENSE
+ * and https://github.com/palantir/blueprint/blob/master/PATENTS
+ */
+import { IFocusedCellCoordinates } from "./common/cell";
+/**
  * `Region`s contain sets of cells. Additionally, a distinction is drawn, for
@@ -185,3 +192,4 @@ * example, between all cells within a column and the whole column itself.
     static isValid(region: IRegion): boolean;
-    static joinStyledRegionGroups(selectedRegions: IRegion[], otherRegions: IStyledRegionGroup[]): IStyledRegionGroup[];
+    static isRegionValidForTable(region: IRegion, numRows: number, numCols: number): boolean;
+    static joinStyledRegionGroups(selectedRegions: IRegion[], otherRegions: IStyledRegionGroup[], focusedCell: IFocusedCellCoordinates): IStyledRegionGroup[];
     /**
@@ -188,0 +196,0 @@ * Iterates over the cells within an `IRegion`, invoking the callback with

dist/regions.js

@@ -406,3 +406,12 @@ /**
     };
-    Regions.joinStyledRegionGroups = function (selectedRegions, otherRegions) {
+    Regions.isRegionValidForTable = function (region, numRows, numCols) {
+        if (region.rows != null && (region.rows[0] >= numRows || region.rows[1] >= numRows)) {
+            return false;
+        }
+        if (region.cols != null && (region.cols[0] >= numCols || region.cols[1] >= numCols)) {
+            return false;
+        }
+        return true;
+    };
+    Regions.joinStyledRegionGroups = function (selectedRegions, otherRegions, focusedCell) {
         var regionGroups = [];
@@ -418,2 +427,8 @@ if (otherRegions != null) {
         }
+        if (focusedCell != null) {
+            regionGroups.push({
+                className: Classes.TABLE_FOCUS_REGION,
+                regions: [Regions.cell(focusedCell.row, focusedCell.col)],
+            });
+        }
         return regionGroups;
@@ -420,0 +435,0 @@ };

dist/table.d.ts

@@ -10,2 +10,3 @@ /**
 import { IColumnProps } from "./column";
+import { IFocusedCellCoordinates } from "./common/cell";
 import { Rect } from "./common/rect";
@@ -21,2 +22,9 @@ import { IColumnWidths } from "./headers/columnHeader";
     /**
+     * If `true`, there will be a single "focused" cell at all times,
+     * which can be used to interact with the table as though it is a
+     * spreadsheet. When false, no such cell will exist.
+     * @default false
+     */
+    enableFocus?: boolean;
+    /**
      * If `false`, only a single region of a single column/row/cell may be
@@ -69,3 +77,3 @@ * selected at one time. Using `ctrl` or `meta` key will have no effect,
      */
-    columnWidths?: number[];
+    columnWidths?: Array<number | null | undefined>;
     /**
@@ -87,3 +95,3 @@ * If `false`, disables resizing of rows.
      */
-    rowHeights?: number[];
+    rowHeights?: Array<number | null | undefined>;
     /**
@@ -99,2 +107,6 @@ * If `false`, hides the row headers and settings menu.
     /**
+     * A callback called when the focus is changed in the table.
+     */
+    onFocus?: (focusedCell: IFocusedCellCoordinates) => void;
+    /**
      * If you want to do something after the copy or if you want to notify the
@@ -126,2 +138,8 @@ * user if a copy fails, you may provide this optional callback.
     /**
+     * If defined, will set the focused cell state. This changes
+     * the focused cell to controlled mode, meaning you are in charge of
+     * setting the focus in response to events in the `onFocus` callback.
+     */
+    focusedCell?: IFocusedCellCoordinates;
+    /**
      * If defined, will set the selected regions in the cells. If defined, this
@@ -217,2 +235,6 @@ * changes table selection to controlled mode, meaning you in charge of
     selectedRegions?: IRegion[];
+    /**
+     * The coordinates of the currently focused table cell
+     */
+    focusedCell?: IFocusedCellCoordinates;
 }
@@ -269,2 +291,7 @@ export declare class Table extends AbstractComponent<ITableProps, ITableState> {
     private maybeRenderCopyHotkey();
+    private handleFocusMoveLeft;
+    private handleFocusMoveRight;
+    private handleFocusMoveUp;
+    private handleFocusMoveDown;
+    private maybeRenderFocusHotkeys();
     private maybeRenderSelectAllHotkey();
@@ -282,2 +309,4 @@ private maybeRenderBodyRegions();
     private clearSelection;
+    private handleFocusMove;
+    private handleFocus;
     private handleSelection;
@@ -284,0 +313,0 @@ private handleLayoutLock;

dist/table.js

@@ -89,2 +89,6 @@ /**
         };
+        _this.handleFocusMoveLeft = function (e) { return _this.handleFocusMove(e, "left"); };
+        _this.handleFocusMoveRight = function (e) { return _this.handleFocusMove(e, "right"); };
+        _this.handleFocusMoveUp = function (e) { return _this.handleFocusMove(e, "up"); };
+        _this.handleFocusMoveDown = function (e) { return _this.handleFocusMove(e, "down"); };
         _this.handleColumnWidthChanged = function (columnIndex, width) {
@@ -165,2 +169,46 @@ var selectedRegions = _this.state.selectedRegions;
         };
+        // no good way to call arrow-key keyboard events from tests
+        /* istanbul ignore next */
+        _this.handleFocusMove = function (e, direction) {
+            e.preventDefault();
+            e.stopPropagation();
+            var focusedCell = _this.state.focusedCell;
+            var newFocusedCell = { col: focusedCell.col, row: focusedCell.row };
+            var grid = _this.grid;
+            switch (direction) {
+                case "up":
+                    newFocusedCell.row -= 1;
+                    break;
+                case "down":
+                    newFocusedCell.row += 1;
+                    break;
+                case "left":
+                    newFocusedCell.col -= 1;
+                    break;
+                case "right":
+                    newFocusedCell.col += 1;
+                    break;
+                default:
+                    break;
+            }
+            if (newFocusedCell.row < 0 || newFocusedCell.row >= grid.numRows ||
+                newFocusedCell.col < 0 || newFocusedCell.col >= grid.numCols) {
+                return;
+            }
+            // change selection to match new focus cell location
+            var newSelectionRegions = [regions_2.Regions.cell(newFocusedCell.row, newFocusedCell.col)];
+            _this.handleSelection(newSelectionRegions);
+            _this.handleFocus(newFocusedCell);
+        };
+        _this.handleFocus = function (focusedCell) {
+            if (!_this.props.enableFocus) {
+                // don't set focus state if focus is not allowed
+                return;
+            }
+            // only set focused cell state if not specified in props
+            if (_this.props.focusedCell == null) {
+                _this.setState({ focusedCell: focusedCell });
+            }
+            core_1.Utils.safeInvoke(_this.props.onFocus, focusedCell);
+        };
         _this.handleSelection = function (selectedRegions) {
@@ -201,4 +249,14 @@ // only set selectedRegions state if not specified in props
         var selectedRegions = (props.selectedRegions == null) ? [] : props.selectedRegions;
+        var focusedCell;
+        if (props.enableFocus) {
+            if (props.focusedCell != null) {
+                focusedCell = props.focusedCell;
+            }
+            else {
+                focusedCell = { col: 0, row: 0 };
+            }
+        }
         _this.state = {
             columnWidths: newColumnWidths,
+            focusedCell: focusedCell,
             isLayoutLocked: false,
@@ -222,3 +280,3 @@ rowHeights: newRowHeights,
         var _this = this;
-        var defaultRowHeight = nextProps.defaultRowHeight, defaultColumnWidth = nextProps.defaultColumnWidth, columnWidths = nextProps.columnWidths, rowHeights = nextProps.rowHeights, children = nextProps.children, numRows = nextProps.numRows, selectedRegions = nextProps.selectedRegions;
+        var defaultRowHeight = nextProps.defaultRowHeight, defaultColumnWidth = nextProps.defaultColumnWidth, columnWidths = nextProps.columnWidths, focusedCell = nextProps.focusedCell, rowHeights = nextProps.rowHeights, children = nextProps.children, numRows = nextProps.numRows, selectedRegions = nextProps.selectedRegions;
         var newChildArray = React.Children.toArray(children);
@@ -242,3 +300,14 @@ // Try to maintain widths of columns by looking up the width of the
         newRowHeights = utils_1.Utils.assignSparseValues(newRowHeights, rowHeights);
-        var newSelectedRegions = (selectedRegions == null) ? this.state.selectedRegions : selectedRegions;
+        var numCols = newColumnWidths.length;
+        var newSelectedRegions = selectedRegions;
+        if (selectedRegions == null) {
+            // if we're in uncontrolled mode, filter out all selected regions that don't
+            // fit in the current new table dimensions
+            newSelectedRegions = this.state.selectedRegions.filter(function (region) {
+                return regions_2.Regions.isRegionValidForTable(region, numRows, numCols);
+            });
+        }
+        var newFocusedCellCoordinates = (focusedCell == null)
+            ? this.state.focusedCell
+            : focusedCell;
         this.childrenArray = newChildArray;
@@ -249,2 +318,3 @@ this.columnIdToIndex = Table_1.createColumnIdIndex(this.childrenArray);
             columnWidths: newColumnWidths,
+            focusedCell: newFocusedCellCoordinates,
             rowHeights: newRowHeights,
@@ -266,3 +336,3 @@ selectedRegions: newSelectedRegions,
     Table.prototype.renderHotkeys = function () {
-        var hotkeys = [this.maybeRenderCopyHotkey(), this.maybeRenderSelectAllHotkey()];
+        var hotkeys = [this.maybeRenderCopyHotkey(), this.maybeRenderSelectAllHotkey(), this.maybeRenderFocusHotkeys()];
         return (React.createElement(core_2.Hotkeys, null, hotkeys.filter(function (element) { return element !== undefined; })));
@@ -345,3 +415,3 @@ };
         return (React.createElement("div", { className: classes },
-            React.createElement(columnHeader_1.ColumnHeader, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, cellRenderer: this.columnHeaderCellRenderer, grid: grid, isResizable: isColumnResizable, loading: this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.COLUMN_HEADERS), locator: locator, maxColumnWidth: maxColumnWidth, minColumnWidth: minColumnWidth, onColumnWidthChanged: this.handleColumnWidthChanged, onLayoutLock: this.handleLayoutLock, onResizeGuide: this.handleColumnResizeGuide, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_COLUMNS), selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, columnIndices), this.props.children),
+            React.createElement(columnHeader_1.ColumnHeader, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, cellRenderer: this.columnHeaderCellRenderer, grid: grid, 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, onResizeGuide: this.handleColumnResizeGuide, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_COLUMNS), selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, columnIndices), this.props.children),
             this.maybeRenderColumnHeaderRegions()));
@@ -359,3 +429,3 @@ var _c;
         return (React.createElement("div", { className: classes, ref: this.setRowHeaderRef },
-            React.createElement(rowHeader_1.RowHeader, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, grid: grid, locator: locator, isResizable: isRowResizable, loading: this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.ROW_HEADERS), maxRowHeight: maxRowHeight, minRowHeight: minRowHeight, onLayoutLock: this.handleLayoutLock, onResizeGuide: this.handleRowResizeGuide, onRowHeightChanged: this.handleRowHeightChanged, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_ROWS), renderRowHeader: renderRowHeader, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, rowIndices)),
+            React.createElement(rowHeader_1.RowHeader, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, grid: grid, locator: locator, isResizable: isRowResizable, loading: this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.ROW_HEADERS), maxRowHeight: maxRowHeight, minRowHeight: minRowHeight, onFocus: this.handleFocus, onLayoutLock: this.handleLayoutLock, onResizeGuide: this.handleRowResizeGuide, onRowHeightChanged: this.handleRowHeightChanged, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.FULL_ROWS), renderRowHeader: renderRowHeader, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, rowIndices)),
             this.maybeRenderRowHeaderRegions()));
@@ -387,3 +457,3 @@ var _c;
             React.createElement("div", { className: Classes.TABLE_BODY_SCROLL_CLIENT, style: style },
-                React.createElement(tableBody_1.TableBody, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, cellRenderer: this.bodyCellRenderer, grid: grid, loading: this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.CELLS), locator: locator, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.CELLS), renderBodyContextMenu: renderBodyContextMenu, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, rowIndices, columnIndices)),
+                React.createElement(tableBody_1.TableBody, tslib_1.__assign({ allowMultipleSelection: allowMultipleSelection, cellRenderer: this.bodyCellRenderer, grid: grid, loading: this.hasLoadingOption(loadingOptions, regions_2.TableLoadingOption.CELLS), locator: locator, onFocus: this.handleFocus, onSelection: this.getEnabledSelectionHandler(regions_2.RegionCardinality.CELLS), renderBodyContextMenu: renderBodyContextMenu, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform, viewportRect: viewportRect }, rowIndices, columnIndices)),
                 this.maybeRenderBodyRegions(),
@@ -432,3 +502,3 @@ React.createElement(guides_1.GuideLayer, { className: Classes.TABLE_RESIZE_GUIDES, verticalGuides: verticalGuides, horizontalGuides: horizontalGuides }))));
         }
-        var regionGroups = regions_2.Regions.joinStyledRegionGroups(this.state.selectedRegions, this.props.styledRegionGroups);
+        var regionGroups = regions_2.Regions.joinStyledRegionGroups(this.state.selectedRegions, this.props.styledRegionGroups, this.state.focusedCell);
         return regionGroups.map(function (regionGroup, index) {
@@ -447,2 +517,16 @@ return (React.createElement(regions_1.RegionLayer, { className: classNames(regionGroup.className), key: index, regions: regionGroup.regions, getRegionStyle: getRegionStyle }));
     };
+    Table.prototype.maybeRenderFocusHotkeys = function () {
+        var enableFocus = this.props.enableFocus;
+        if (enableFocus != null) {
+            return [
+                React.createElement(core_2.Hotkey, { key: "move left", label: "Move focus cell left", group: "Table", combo: "left", onKeyDown: this.handleFocusMoveLeft }),
+                React.createElement(core_2.Hotkey, { key: "move right", label: "Move focus cell right", group: "Table", combo: "right", onKeyDown: this.handleFocusMoveRight }),
+                React.createElement(core_2.Hotkey, { key: "move up", label: "Move focus cell up", group: "Table", combo: "up", onKeyDown: this.handleFocusMoveUp }),
+                React.createElement(core_2.Hotkey, { key: "move down", label: "Move focus cell down", group: "Table", combo: "down", onKeyDown: this.handleFocusMoveDown }),
+            ];
+        }
+        else {
+            return [];
+        }
+    };
     Table.prototype.maybeRenderSelectAllHotkey = function () {
@@ -565,2 +649,3 @@ if (this.isSelectionModeEnabled(regions_2.RegionCardinality.FULL_TABLE)) {
     defaultRowHeight: 20,
+    enableFocus: false,
     fillBodyWithGhostCells: false,
@@ -567,0 +652,0 @@ isRowHeaderShown: true,

dist/tableBody.js

@@ -91,3 +91,3 @@ /**
     TableBody.prototype.render = function () {
-        var _a = this.props, allowMultipleSelection = _a.allowMultipleSelection, columnIndexEnd = _a.columnIndexEnd, columnIndexStart = _a.columnIndexStart, grid = _a.grid, onSelection = _a.onSelection, rowIndexEnd = _a.rowIndexEnd, rowIndexStart = _a.rowIndexStart, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
+        var _a = this.props, allowMultipleSelection = _a.allowMultipleSelection, columnIndexEnd = _a.columnIndexEnd, columnIndexStart = _a.columnIndexStart, grid = _a.grid, onFocus = _a.onFocus, onSelection = _a.onSelection, rowIndexEnd = _a.rowIndexEnd, rowIndexStart = _a.rowIndexStart, selectedRegions = _a.selectedRegions, selectedRegionTransform = _a.selectedRegionTransform;
         var style = grid.getRect().sizeStyle();
@@ -102,3 +102,3 @@ var cells = [];
         }
-        return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, locateClick: this.locateClick, locateDrag: this.locateDrag, onSelection: onSelection, selectedRegions: selectedRegions, selectedRegionTransform: selectedRegionTransform },
+        return (React.createElement(selectable_1.DragSelectable, { allowMultipleSelection: allowMultipleSelection, locateClick: this.locateClick, locateDrag: this.locateDrag, onFocus: onFocus, onSelection: onSelection, 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)));
@@ -105,0 +105,0 @@ };

examples/tsconfig.json

@@ -18,4 +18,7 @@ {
         "stripInternal": true,
-        "target": "es5"
+        "target": "es5",
+        "paths": {
+            "@blueprintjs/docs": ["../../docs/dist/index"]
+        }
     }
 }

package.json

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

README.md

@@ -26,2 +26,2 @@ <img height="204" src="https://cloud.githubusercontent.com/assets/464822/20228152/d3f36dc2-a804-11e6-80ff-51ada2d13ea7.png">
 
-### [Table Documentation](http://blueprintjs.com/docs/#components.table-js) | [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)
+### [Table Documentation](http://blueprintjs.com/docs/#table-js) | [Full Documentation](http://blueprintjs.com/docs) | [Source Code](https://github.com/palantir/blueprint)

src/common/classes.ts

@@ -26,2 +26,3 @@ /*
 export const TABLE_EDITABLE_NAME = "bp-table-editable-name";
+export const TABLE_FOCUS_REGION = "bp-table-focus-region";
 export const TABLE_HEADER = "bp-table-header";
@@ -62,2 +63,4 @@ export const TABLE_HEADER_ACTIVE = "bp-table-header-active";
 export const TABLE_TH_MENU = "bp-table-th-menu";
+export const TABLE_TH_MENU_CONTAINER = "bp-table-th-menu-container";
+export const TABLE_TH_MENU_CONTAINER_BACKGROUND = "bp-table-th-menu-container-background";
 export const TABLE_THEAD = "bp-table-thead";
@@ -64,0 +67,0 @@ export const TABLE_TOP_CONTAINER = "bp-table-top-container";

src/regions.ts

@@ -8,2 +8,3 @@ /**
 
+import { IFocusedCellCoordinates } from "./common/cell";
 import * as Classes from "./common/classes";
@@ -471,3 +472,17 @@ import { Utils } from "./common/utils";
 
-    public static joinStyledRegionGroups(selectedRegions: IRegion[], otherRegions: IStyledRegionGroup[]) {
+    public static isRegionValidForTable(region: IRegion, numRows: number, numCols: number) {
+        if (region.rows != null && (region.rows[0] >= numRows || region.rows[1] >= numRows)) {
+            return false;
+        }
+        if (region.cols != null && (region.cols[0] >= numCols || region.cols[1] >= numCols)) {
+            return false;
+        }
+        return true;
+    }
+
+    public static joinStyledRegionGroups(
+        selectedRegions: IRegion[],
+        otherRegions: IStyledRegionGroup[],
+        focusedCell: IFocusedCellCoordinates,
+    ) {
         let regionGroups: IStyledRegionGroup[] = [];
@@ -483,2 +498,9 @@ if (otherRegions != null) {
         }
+
+        if (focusedCell != null) {
+            regionGroups.push({
+                className: Classes.TABLE_FOCUS_REGION,
+                regions: [Regions.cell(focusedCell.row, focusedCell.col)],
+            });
+        }
         return regionGroups;
@@ -485,0 +507,0 @@ }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Number of package files

177

increased by2.31%

Lines of code

17832

increased by3.21%

Worsened metrics

Total package byte prevSize

1644561

decreased by-10.16%

No dependency changes