@blueprintjs/table - npm Package Compare versions

Comparing version 1.26.1 to 1.27.0

dist/cell/formats/truncatedFormat.d.ts

@@ -62,3 +62,4 @@ /// <reference types="react" />
 export interface ITruncatedFormatState {
-    isTruncated: boolean;
+    isTruncated?: boolean;
+    isPopoverOpen?: boolean;
 }
@@ -69,8 +70,11 @@ export declare class TruncatedFormat extends React.Component<ITruncatedFormatProps, ITruncatedFormatState> {
     private contentDiv;
-    render(): JSX.Element;
     componentDidMount(): void;
     componentDidUpdate(): void;
+    render(): JSX.Element;
+    private renderPopover();
     private handleContentDivRef;
+    private handlePopoverOpen;
+    private handlePopoverClose;
     private shouldShowPopover(content);
     private setTruncationState();
 }

dist/cell/formats/truncatedFormat.js

@@ -30,8 +30,23 @@ /**
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.state = { isTruncated: false };
+        _this.state = {
+            isPopoverOpen: false,
+            isTruncated: false,
+        };
         _this.handleContentDivRef = function (ref) { return (_this.contentDiv = ref); };
+        _this.handlePopoverOpen = function () {
+            _this.setState({ isPopoverOpen: true });
+        };
+        _this.handlePopoverClose = function () {
+            _this.setState({ isPopoverOpen: false });
+        };
         return _this;
     }
+    TruncatedFormat.prototype.componentDidMount = function () {
+        this.setTruncationState();
+    };
+    TruncatedFormat.prototype.componentDidUpdate = function () {
+        this.setTruncationState();
+    };
     TruncatedFormat.prototype.render = function () {
-        var _a = this.props, children = _a.children, detectTruncation = _a.detectTruncation, preformatted = _a.preformatted, truncateLength = _a.truncateLength, truncationSuffix = _a.truncationSuffix;
+        var _a = this.props, children = _a.children, detectTruncation = _a.detectTruncation, truncateLength = _a.truncateLength, truncationSuffix = _a.truncationSuffix;
         var content = "" + children;
@@ -43,5 +58,21 @@ var cellContent = content;
         if (this.shouldShowPopover(content)) {
+            var className = classNames(this.props.className, Classes.TABLE_TRUNCATED_FORMAT);
+            return (React.createElement("div", { className: className },
+                React.createElement("div", { className: Classes.TABLE_TRUNCATED_VALUE, ref: this.handleContentDivRef }, cellContent),
+                this.renderPopover()));
+        }
+        else {
+            var className = classNames(this.props.className, Classes.TABLE_TRUNCATED_FORMAT_TEXT);
+            return (React.createElement("div", { className: className, ref: this.handleContentDivRef }, cellContent));
+        }
+    };
+    TruncatedFormat.prototype.renderPopover = function () {
+        var _a = this.props, children = _a.children, preformatted = _a.preformatted;
+        // `<Popover>` will always check the content's position on update
+        // regardless if it is open or not. This negatively affects perf due to
+        // layout thrashing. So instead we manage the popover state ourselves
+        // and mimic its popover target
+        if (this.state.isPopoverOpen) {
             var popoverClasses = classNames(Classes.TABLE_TRUNCATED_POPOVER, preformatted ? Classes.TABLE_POPOVER_WHITESPACE_PRE : Classes.TABLE_POPOVER_WHITESPACE_NORMAL);
             var popoverContent = React.createElement("div", { className: popoverClasses }, children);
-            var className = classNames(this.props.className, Classes.TABLE_TRUNCATED_FORMAT);
             var constraints = [
@@ -53,18 +84,12 @@ {
             ];
-            return (React.createElement("div", { className: className },
-                React.createElement("div", { className: Classes.TABLE_TRUNCATED_VALUE, ref: this.handleContentDivRef }, cellContent),
-                React.createElement(core_1.Popover, { className: Classes.TABLE_TRUNCATED_POPOVER_TARGET, tetherOptions: { constraints: constraints }, content: popoverContent, position: core_1.Position.BOTTOM, useSmartArrowPositioning: true },
-                    React.createElement(core_1.Icon, { iconName: "more" }))));
+            return (React.createElement(core_1.Popover, { className: Classes.TABLE_TRUNCATED_POPOVER_TARGET, tetherOptions: { constraints: constraints }, content: popoverContent, position: core_1.Position.BOTTOM, isOpen: true, onClose: this.handlePopoverClose, useSmartArrowPositioning: true },
+                React.createElement(core_1.Icon, { iconName: "more" })));
         }
         else {
-            var className = classNames(this.props.className, Classes.TABLE_TRUNCATED_FORMAT_TEXT);
-            return (React.createElement("div", { className: className, ref: this.handleContentDivRef }, cellContent));
+            // NOTE: This structure matches what `<Popover>` does internally. If
+            // `<Popover>` changes, this must be updated.
+            return (React.createElement("span", { className: Classes.TABLE_TRUNCATED_POPOVER_TARGET, onClick: this.handlePopoverOpen },
+                React.createElement(core_1.Icon, { iconName: "more" })));
         }
     };
-    TruncatedFormat.prototype.componentDidMount = function () {
-        this.setTruncationState();
-    };
-    TruncatedFormat.prototype.componentDidUpdate = function () {
-        this.setTruncationState();
-    };
     TruncatedFormat.prototype.shouldShowPopover = function (content) {
@@ -71,0 +96,0 @@ var _a = this.props, detectTruncation = _a.detectTruncation, showPopover = _a.showPopover, truncateLength = _a.truncateLength;

dist/common/errors.d.ts

 export declare const COLUMN_HEADER_CELL_MENU_DEPRECATED: string;
+export declare const COLUMN_HEADER_CELL_USE_INTERACTION_BAR_DEPRECATED: string;
 export declare const ROW_HEADER_CELL_MENU_DEPRECATED: string;
@@ -3,0 +4,0 @@ export declare const QUADRANT_ON_SCROLL_UNNECESSARILY_DEFINED: string;

dist/common/errors.js

@@ -12,2 +12,3 @@ /*
 exports.COLUMN_HEADER_CELL_MENU_DEPRECATED = deprec + " <ColumnHeaderCell> menu is deprecated. Use renderMenu instead.";
+exports.COLUMN_HEADER_CELL_USE_INTERACTION_BAR_DEPRECATED = deprec + " <ColumnHeaderCell> useInteractionBar is deprecated. Pass the prop to the top-level <Table> instead. When you pass the prop to <Table>, that value will override the one provided directly to <ColumnHeaderCell>.";
 exports.ROW_HEADER_CELL_MENU_DEPRECATED = deprec + " <RowHeaderCell> menu is deprecated. Use renderMenu instead.";
@@ -14,0 +15,0 @@ exports.QUADRANT_ON_SCROLL_UNNECESSARILY_DEFINED = ns + " <TableQuadrant> onScroll need not be defined for any quadrant aside from the MAIN quadrant.";

dist/common/utils.js

@@ -30,3 +30,4 @@ /**
         var classes = classNames.apply(void 0, [elem.props.className].concat(extendedClasses));
-        return React.cloneElement(elem, { className: classes });
+        var props = { className: classes };
+        return React.cloneElement(elem, props);
     },
@@ -33,0 +34,0 @@ /**

dist/headers/columnHeader.d.ts

@@ -22,2 +22,7 @@ /// <reference types="react" />
     /**
+     * Ref handler that receives the HTML element that should be measured to
+     * indicate the fluid height of the column header.
+     */
+    measurableElementRef?: (ref: HTMLElement) => void;
+    /**
      * A callback invoked when user is done resizing the column
@@ -24,0 +29,0 @@ */

dist/headers/columnHeader.js

@@ -38,3 +38,3 @@ /**
             return (React.createElement("div", { style: { width: tableWidth } },
-                React.createElement("div", { style: style, className: classes }, cells)));
+                React.createElement("div", { style: style, className: classes, ref: _this.props.measurableElementRef }, cells)));
         };
@@ -41,0 +41,0 @@ _this.convertPointToColumn = function (clientXOrY, useMidpoint) {

dist/headers/columnHeaderCell.d.ts

@@ -28,6 +28,9 @@ /// <reference types="react" />
      *
-     * This allows you to override the rendering of column name without worry
-     * of clobbering the menu or other interactions.
+     * This allows you to override the rendering of column name without worry of
+     * clobbering the menu or other interactions.
      *
      * @default false
+     * @deprecated since @blueprintjs/table v1.27.0; pass this prop to `Table`
+     * instead. (If you don't, the `Table` will not be able to properly resize
+     * the column header when `useInteractionBar` is toggled on and off.)
      */
@@ -34,0 +37,0 @@ useInteractionBar?: boolean;

dist/quadrants/tableQuadrant.d.ts

@@ -30,3 +30,2 @@ /// <reference types="react" />
 }
-export declare const QUADRANT_TYPES: QuadrantType[];
 export interface ITableQuadrantProps extends IProps {
@@ -33,0 +32,0 @@ /**

dist/quadrants/tableQuadrant.js

@@ -35,3 +35,2 @@ /**
 })(QuadrantType = exports.QuadrantType || (exports.QuadrantType = {}));
-exports.QUADRANT_TYPES = [QuadrantType.MAIN, QuadrantType.TOP, QuadrantType.LEFT, QuadrantType.TOP_LEFT];
 var TableQuadrant = (function (_super) {
@@ -38,0 +37,0 @@ tslib_1.__extends(TableQuadrant, _super);

dist/quadrants/tableQuadrantStack.d.ts

@@ -112,2 +112,13 @@ /// <reference types="react" />
     viewSyncDelay?: number;
+    /**
+     * If `true`, adds an interaction bar on top of all column header cells, and
+     * moves interaction triggers into it.
+     *
+     * This value defaults to `undefined` so that, by default, it won't override
+     * the `useInteractionBar` values that you might have provided directly to
+     * each `<ColumnHeaderCell>`.
+     *
+     * @default undefined
+     */
+    useInteractionBar?: boolean;
 }
@@ -162,7 +173,10 @@ export declare class TableQuadrantStack extends AbstractComponent<ITableQuadrantStackProps, {}> {
     private syncQuadrantViews;
-    private setQuadrantSize;
-    private setQuadrantOffset;
-    private setQuadrantRowHeaderSizes;
-    private setQuadrantMenuElementSizes;
-    private setQuadrantMenuElementSize;
+    private maybeSetQuadrantSizes;
+    private maybesSetQuadrantSize;
+    private maybeSetQuadrantOffset;
+    private maybesSetQuadrantRowHeaderSizes;
+    private maybeSetQuadrantRowHeaderSize;
+    private maybeSetQuadrantMenuElementSizes;
+    private maybeSetQuadrantMenuElementSize;
+    private maybeSetQuadrantScrollOffset;
     /**
@@ -174,4 +188,5 @@ * Returns the width or height of *only the grid* in the secondary quadrants
     private measureDesiredRowHeaderWidth();
+    private shouldRenderLeftQuadrants(props?);
     private adjustVerticalGuides(verticalGuides, quadrantType);
     private adjustHorizontalGuides(horizontalGuides, quadrantType);
 }

dist/quadrants/tableQuadrantStack.js

@@ -20,2 +20,10 @@ /**
 var DEFAULT_VIEW_SYNC_DELAY = 500;
+// a list of props that trigger layout changes. when these props change,
+// quadrant views need to be explicitly resynchronized.
+var SYNC_TRIGGER_PROP_KEYS = [
+    "isRowHeaderShown",
+    "numFrozenColumns",
+    "numFrozenRows",
+    "useInteractionBar",
+];
 var TableQuadrantStack = (function (_super) {
@@ -126,7 +134,9 @@ tslib_1.__extends(TableQuadrantStack, _super);
             var nextScrollLeft = mainScrollContainer.scrollLeft;
-            _this.quadrantRefs[tableQuadrant_1.QuadrantType.LEFT].scrollContainer.scrollTop = nextScrollTop;
+            if (_this.shouldRenderLeftQuadrants()) {
+                _this.quadrantRefs[tableQuadrant_1.QuadrantType.LEFT].scrollContainer.scrollTop = nextScrollTop;
+            }
             _this.quadrantRefs[tableQuadrant_1.QuadrantType.TOP].scrollContainer.scrollLeft = nextScrollLeft;
-            // update the cache immediately
-            _this.cache.setQuadrantScrollOffset(tableQuadrant_1.QuadrantType.LEFT, "scrollTop", nextScrollTop);
-            _this.cache.setQuadrantScrollOffset(tableQuadrant_1.QuadrantType.TOP, "scrollLeft", nextScrollLeft);
+            // update the cache.
+            _this.cache.setScrollOffset("scrollTop", nextScrollTop);
+            _this.cache.setScrollOffset("scrollLeft", nextScrollLeft);
             // syncs the quadrants only after scrolling has stopped for a short time
@@ -142,7 +152,7 @@ _this.syncQuadrantViewsDebounced();
             core_1.Utils.safeInvoke(_this.props.onScroll, event);
-            _this.handleDirectionalWheel("horizontal", event.deltaX, tableQuadrant_1.QuadrantType.MAIN, [tableQuadrant_1.QuadrantType.TOP]);
-            _this.handleDirectionalWheel("vertical", event.deltaY, tableQuadrant_1.QuadrantType.MAIN, [tableQuadrant_1.QuadrantType.LEFT]);
+            _this.handleDirectionalWheel("horizontal", event.deltaX, [tableQuadrant_1.QuadrantType.TOP]);
+            _this.handleDirectionalWheel("vertical", event.deltaY, [tableQuadrant_1.QuadrantType.LEFT]);
             _this.syncQuadrantViewsDebounced();
         };
-        _this.handleDirectionalWheel = function (direction, delta, quadrantType, quadrantTypesToSync) {
+        _this.handleDirectionalWheel = function (direction, delta, quadrantTypesToSync) {
             var isHorizontal = direction === "horizontal";
@@ -155,9 +165,17 @@ var scrollKey = isHorizontal ? "scrollLeft" : "scrollTop";
                 _this.wasMainQuadrantScrollChangedFromOtherOnWheelCallback = true;
-                var nextScrollOffset_1 = _this.quadrantRefs[quadrantType].scrollContainer[scrollKey] + delta;
-                _this.quadrantRefs[quadrantType].scrollContainer[scrollKey] = nextScrollOffset_1;
-                _this.cache.setQuadrantScrollOffset(quadrantType, scrollKey, nextScrollOffset_1);
+                var mainScrollContainer = _this.quadrantRefs[tableQuadrant_1.QuadrantType.MAIN].scrollContainer;
+                var currScrollOffset = mainScrollContainer[scrollKey];
+                var nextScrollOffset_1 = Math.max(0, mainScrollContainer[scrollKey] + delta);
+                if (nextScrollOffset_1 === currScrollOffset) {
+                    return;
+                }
+                mainScrollContainer[scrollKey] = nextScrollOffset_1;
+                // update the cache.
+                _this.cache.setScrollOffset(scrollKey, nextScrollOffset_1);
                 // sync the corresponding scroll position of all dependent quadrants
                 quadrantTypesToSync.forEach(function (quadrantTypeToSync) {
-                    _this.quadrantRefs[quadrantTypeToSync].scrollContainer[scrollKey] = nextScrollOffset_1;
-                    _this.cache.setQuadrantScrollOffset(quadrantTypeToSync, scrollKey, nextScrollOffset_1);
+                    var scrollContainer = _this.quadrantRefs[quadrantTypeToSync].scrollContainer;
+                    if (scrollContainer != null) {
+                        scrollContainer[scrollKey] = nextScrollOffset_1;
+                    }
                 });
@@ -263,50 +281,62 @@ }
             _this.cache.setColumnHeaderHeight(columnHeaderHeight);
-            tableQuadrant_1.QUADRANT_TYPES.forEach(function (quadrantType) {
-                var scrollContainer = _this.quadrantRefs[quadrantType].scrollContainer;
-                _this.cache.setQuadrantScrollOffset(quadrantType, "scrollLeft", scrollContainer.scrollLeft);
-                _this.cache.setQuadrantScrollOffset(quadrantType, "scrollTop", scrollContainer.scrollTop);
-            });
             //
             // Writes (batched to avoid DOM thrashing)
             //
-            _this.setQuadrantRowHeaderSizes(rowHeaderWidth);
-            _this.setQuadrantMenuElementSizes(nextMenuElementWidth, nextMenuElementHeight);
-            _this.setQuadrantSize(tableQuadrant_1.QuadrantType.LEFT, "width", nextLeftQuadrantWidth);
-            _this.setQuadrantSize(tableQuadrant_1.QuadrantType.TOP, "height", nextTopQuadrantHeight);
-            _this.setQuadrantSize(tableQuadrant_1.QuadrantType.TOP_LEFT, "width", nextLeftQuadrantWidth);
-            _this.setQuadrantSize(tableQuadrant_1.QuadrantType.TOP_LEFT, "height", nextTopQuadrantHeight);
-            _this.setQuadrantOffset(tableQuadrant_1.QuadrantType.TOP, "right", rightScrollBarWidth);
-            _this.setQuadrantOffset(tableQuadrant_1.QuadrantType.LEFT, "bottom", bottomScrollBarHeight);
+            _this.maybesSetQuadrantRowHeaderSizes(rowHeaderWidth);
+            _this.maybeSetQuadrantMenuElementSizes(nextMenuElementWidth, nextMenuElementHeight);
+            _this.maybeSetQuadrantSizes(nextLeftQuadrantWidth, nextTopQuadrantHeight);
+            _this.maybeSetQuadrantOffset(tableQuadrant_1.QuadrantType.TOP, "right", rightScrollBarWidth);
+            _this.maybeSetQuadrantOffset(tableQuadrant_1.QuadrantType.LEFT, "bottom", bottomScrollBarHeight);
+            _this.maybeSetQuadrantScrollOffset(tableQuadrant_1.QuadrantType.LEFT, "scrollTop");
+            _this.maybeSetQuadrantScrollOffset(tableQuadrant_1.QuadrantType.TOP, "scrollLeft");
         };
-        _this.setQuadrantSize = function (quadrantType, dimension, value) {
-            _this.quadrantRefs[quadrantType].quadrant.style[dimension] = value + "px";
+        _this.maybeSetQuadrantSizes = function (width, height) {
+            _this.maybesSetQuadrantSize(tableQuadrant_1.QuadrantType.LEFT, "width", width);
+            _this.maybesSetQuadrantSize(tableQuadrant_1.QuadrantType.TOP, "height", height);
+            _this.maybesSetQuadrantSize(tableQuadrant_1.QuadrantType.TOP_LEFT, "width", width);
+            _this.maybesSetQuadrantSize(tableQuadrant_1.QuadrantType.TOP_LEFT, "height", height);
         };
-        _this.setQuadrantOffset = function (quadrantType, side, value) {
-            _this.quadrantRefs[quadrantType].quadrant.style[side] = value + "px";
+        _this.maybesSetQuadrantSize = function (quadrantType, dimension, value) {
+            var quadrant = _this.quadrantRefs[quadrantType].quadrant;
+            if (quadrant != null) {
+                quadrant.style[dimension] = value + "px";
+            }
         };
-        _this.setQuadrantRowHeaderSizes = function (width) {
-            var mainRowHeader = _this.quadrantRefs[tableQuadrant_1.QuadrantType.MAIN].rowHeader;
-            if (mainRowHeader == null) {
-                return;
+        _this.maybeSetQuadrantOffset = function (quadrantType, side, value) {
+            var quadrant = _this.quadrantRefs[quadrantType].quadrant;
+            if (quadrant != null) {
+                quadrant.style[side] = value + "px";
             }
-            var widthString = width + "px";
-            mainRowHeader.style.width = widthString;
-            _this.quadrantRefs[tableQuadrant_1.QuadrantType.TOP].rowHeader.style.width = widthString;
-            _this.quadrantRefs[tableQuadrant_1.QuadrantType.LEFT].rowHeader.style.width = widthString;
-            _this.quadrantRefs[tableQuadrant_1.QuadrantType.TOP_LEFT].rowHeader.style.width = widthString;
         };
-        _this.setQuadrantMenuElementSizes = function (width, height) {
-            _this.setQuadrantMenuElementSize(tableQuadrant_1.QuadrantType.MAIN, width, height);
-            _this.setQuadrantMenuElementSize(tableQuadrant_1.QuadrantType.TOP, width, height);
-            _this.setQuadrantMenuElementSize(tableQuadrant_1.QuadrantType.LEFT, width, height);
-            _this.setQuadrantMenuElementSize(tableQuadrant_1.QuadrantType.TOP_LEFT, width, height);
+        _this.maybesSetQuadrantRowHeaderSizes = function (width) {
+            _this.maybeSetQuadrantRowHeaderSize(tableQuadrant_1.QuadrantType.MAIN, width);
+            _this.maybeSetQuadrantRowHeaderSize(tableQuadrant_1.QuadrantType.TOP, width);
+            _this.maybeSetQuadrantRowHeaderSize(tableQuadrant_1.QuadrantType.LEFT, width);
+            _this.maybeSetQuadrantRowHeaderSize(tableQuadrant_1.QuadrantType.TOP_LEFT, width);
         };
-        _this.setQuadrantMenuElementSize = function (quadrantType, width, height) {
-            var quadrantMenu = _this.quadrantRefs[quadrantType].menu;
-            if (quadrantMenu == null) {
-                return;
+        _this.maybeSetQuadrantRowHeaderSize = function (quadrantType, width) {
+            var rowHeader = _this.quadrantRefs[quadrantType].rowHeader;
+            if (rowHeader != null) {
+                rowHeader.style.width = width + "px";
             }
-            quadrantMenu.style.width = width + "px";
-            quadrantMenu.style.height = height + "px";
         };
+        _this.maybeSetQuadrantMenuElementSizes = function (width, height) {
+            _this.maybeSetQuadrantMenuElementSize(tableQuadrant_1.QuadrantType.MAIN, width, height);
+            _this.maybeSetQuadrantMenuElementSize(tableQuadrant_1.QuadrantType.TOP, width, height);
+            _this.maybeSetQuadrantMenuElementSize(tableQuadrant_1.QuadrantType.LEFT, width, height);
+            _this.maybeSetQuadrantMenuElementSize(tableQuadrant_1.QuadrantType.TOP_LEFT, width, height);
+        };
+        _this.maybeSetQuadrantMenuElementSize = function (quadrantType, width, height) {
+            var menu = _this.quadrantRefs[quadrantType].menu;
+            if (menu != null) {
+                menu.style.width = width + "px";
+                menu.style.height = height + "px";
+            }
+        };
+        _this.maybeSetQuadrantScrollOffset = function (quadrantType, scrollKey) {
+            var scrollContainer = _this.quadrantRefs[quadrantType].scrollContainer;
+            if (scrollContainer != null) {
+                scrollContainer[scrollKey] = _this.cache.getScrollOffset(scrollKey);
+            }
+        };
         // a few points here:
@@ -343,5 +373,3 @@ // - we throttle onScroll/onWheel callbacks to making scrolling look more fluid.
         // it when layout-affecting props change.
-        if (this.props.numFrozenColumns !== prevProps.numFrozenColumns ||
-            this.props.numFrozenRows !== prevProps.numFrozenRows ||
-            this.props.isRowHeaderShown !== prevProps.isRowHeaderShown) {
+        if (!core_1.Utils.shallowCompareKeys(this.props, prevProps, { include: SYNC_TRIGGER_PROP_KEYS })) {
             this.emitRefs();
@@ -357,7 +385,16 @@ this.syncQuadrantViews();
         var onWheel = throttleScrolling ? this.throttledHandleWheel : this.handleWheel;
+        var baseProps = {
+            grid: grid,
+            isRowHeaderShown: isRowHeaderShown,
+            onWheel: onWheel,
+            renderBody: renderBody,
+        };
+        var shouldRenderLeftQuadrants = this.shouldRenderLeftQuadrants();
+        var maybeLeftQuadrant = shouldRenderLeftQuadrants ? (React.createElement(tableQuadrant_1.TableQuadrant, tslib_1.__assign({}, baseProps, { quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.LEFT].quadrant, quadrantType: tableQuadrant_1.QuadrantType.LEFT, renderColumnHeader: this.renderLeftQuadrantColumnHeader, renderMenu: this.renderLeftQuadrantMenu, renderRowHeader: this.renderLeftQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.LEFT].scrollContainer }))) : (undefined);
+        var maybeTopLeftQuadrant = shouldRenderLeftQuadrants ? (React.createElement(tableQuadrant_1.TableQuadrant, tslib_1.__assign({}, baseProps, { quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP_LEFT].quadrant, quadrantType: tableQuadrant_1.QuadrantType.TOP_LEFT, renderColumnHeader: this.renderTopLeftQuadrantColumnHeader, renderMenu: this.renderTopLeftQuadrantMenu, renderRowHeader: this.renderTopLeftQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP_LEFT].scrollContainer }))) : (undefined);
         return (React.createElement("div", { className: Classes.TABLE_QUADRANT_STACK },
-            React.createElement(tableQuadrant_1.TableQuadrant, { bodyRef: this.props.bodyRef, grid: grid, isRowHeaderShown: isRowHeaderShown, onScroll: onMainQuadrantScroll, onWheel: onWheel, quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.MAIN].quadrant, quadrantType: tableQuadrant_1.QuadrantType.MAIN, renderBody: renderBody, renderColumnHeader: this.renderMainQuadrantColumnHeader, renderMenu: this.renderMainQuadrantMenu, renderRowHeader: this.renderMainQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.MAIN].scrollContainer }),
-            React.createElement(tableQuadrant_1.TableQuadrant, { grid: grid, isRowHeaderShown: isRowHeaderShown, onWheel: onWheel, quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP].quadrant, quadrantType: tableQuadrant_1.QuadrantType.TOP, renderBody: renderBody, renderColumnHeader: this.renderTopQuadrantColumnHeader, renderMenu: this.renderTopQuadrantMenu, renderRowHeader: this.renderTopQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP].scrollContainer }),
-            React.createElement(tableQuadrant_1.TableQuadrant, { grid: grid, isRowHeaderShown: isRowHeaderShown, onWheel: onWheel, quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.LEFT].quadrant, quadrantType: tableQuadrant_1.QuadrantType.LEFT, renderBody: renderBody, renderColumnHeader: this.renderLeftQuadrantColumnHeader, renderMenu: this.renderLeftQuadrantMenu, renderRowHeader: this.renderLeftQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.LEFT].scrollContainer }),
-            React.createElement(tableQuadrant_1.TableQuadrant, { grid: grid, isRowHeaderShown: isRowHeaderShown, onWheel: onWheel, quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP_LEFT].quadrant, quadrantType: tableQuadrant_1.QuadrantType.TOP_LEFT, renderBody: renderBody, renderColumnHeader: this.renderTopLeftQuadrantColumnHeader, renderMenu: this.renderTopLeftQuadrantMenu, renderRowHeader: this.renderTopLeftQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP_LEFT].scrollContainer })));
+            React.createElement(tableQuadrant_1.TableQuadrant, tslib_1.__assign({}, baseProps, { bodyRef: this.props.bodyRef, onScroll: onMainQuadrantScroll, quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.MAIN].quadrant, quadrantType: tableQuadrant_1.QuadrantType.MAIN, renderColumnHeader: this.renderMainQuadrantColumnHeader, renderMenu: this.renderMainQuadrantMenu, renderRowHeader: this.renderMainQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.MAIN].scrollContainer })),
+            React.createElement(tableQuadrant_1.TableQuadrant, tslib_1.__assign({}, baseProps, { quadrantRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP].quadrant, quadrantType: tableQuadrant_1.QuadrantType.TOP, renderColumnHeader: this.renderTopQuadrantColumnHeader, renderMenu: this.renderTopQuadrantMenu, renderRowHeader: this.renderTopQuadrantRowHeader, scrollContainerRef: this.quadrantRefHandlers[tableQuadrant_1.QuadrantType.TOP].scrollContainer })),
+            maybeLeftQuadrant,
+            maybeTopLeftQuadrant));
     };
@@ -411,5 +448,11 @@ // Ref handlers
     };
+    TableQuadrantStack.prototype.shouldRenderLeftQuadrants = function (props) {
+        if (props === void 0) { props = this.props; }
+        var isRowHeaderShown = props.isRowHeaderShown, numFrozenColumns = props.numFrozenColumns;
+        return isRowHeaderShown || (numFrozenColumns != null && numFrozenColumns > 0);
+    };
     // Resizing
     TableQuadrantStack.prototype.adjustVerticalGuides = function (verticalGuides, quadrantType) {
-        var scrollAmount = this.cache.getQuadrantScrollOffset(quadrantType, "scrollLeft");
+        var isFrozenQuadrant = quadrantType === tableQuadrant_1.QuadrantType.LEFT || quadrantType === tableQuadrant_1.QuadrantType.TOP_LEFT;
+        var scrollAmount = isFrozenQuadrant ? 0 : this.cache.getScrollOffset("scrollLeft");
         var rowHeaderWidth = this.cache.getRowHeaderWidth();
@@ -422,3 +465,4 @@ var adjustedVerticalGuides = verticalGuides != null
     TableQuadrantStack.prototype.adjustHorizontalGuides = function (horizontalGuides, quadrantType) {
-        var scrollAmount = this.cache.getQuadrantScrollOffset(quadrantType, "scrollTop");
+        var isFrozenQuadrant = quadrantType === tableQuadrant_1.QuadrantType.TOP || quadrantType === tableQuadrant_1.QuadrantType.TOP_LEFT;
+        var scrollAmount = isFrozenQuadrant ? 0 : this.cache.getScrollOffset("scrollTop");
         var columnHeaderHeight = this.cache.getColumnHeaderHeight();
@@ -432,4 +476,2 @@ var adjustedHorizontalGuides = horizontalGuides != null
 }(core_1.AbstractComponent));
-// Static variables
-// ================
 // we want the user to explicitly pass a quadrantType. define defaultProps as a Partial to avoid
@@ -442,2 +484,3 @@ // declaring that and other required props here.
     throttleScrolling: true,
+    useInteractionBar: undefined,
     viewSyncDelay: DEFAULT_VIEW_SYNC_DELAY,
@@ -444,0 +487,0 @@ };

dist/quadrants/tableQuadrantStackCache.d.ts

@@ -7,17 +7,11 @@ /**
  */
-import { QuadrantType } from "./tableQuadrant";
-export interface IScrollOffsetMap {
-    scrollLeft: number;
-    scrollTop: number;
-}
+export declare type ScrollKey = "scrollLeft" | "scrollTop";
 export declare class TableQuadrantStackCache {
     private cachedRowHeaderWidth;
     private cachedColumnHeaderHeight;
-    private cachedMainQuadrantScrollOffsets;
-    private cachedTopQuadrantScrollOffsets;
-    private cachedLeftQuadrantScrollOffsets;
-    private cachedTopLeftQuadrantScrollOffsets;
+    private cachedScrollLeft;
+    private cachedScrollTop;
     constructor();
     reset(): void;
-    getQuadrantScrollOffset(quadrantType: QuadrantType, scrollKey: keyof IScrollOffsetMap): number;
+    getScrollOffset(scrollKey: ScrollKey): number;
     getRowHeaderWidth(): number;
@@ -27,5 +21,3 @@ getColumnHeaderHeight(): number;
     setRowHeaderWidth(width: number): void;
-    setQuadrantScrollOffset(quadrantType: QuadrantType, scrollKey: keyof IScrollOffsetMap, offset: number): void;
-    private createScrollOffsetMap();
-    private getQuadrantScrollOffsetMap(quadrantType);
+    setScrollOffset(scrollKey: ScrollKey, offset: number): void;
 }

dist/quadrants/tableQuadrantStackCache.js

@@ -9,3 +9,2 @@ /**
 Object.defineProperty(exports, "__esModule", { value: true });
-var tableQuadrant_1 = require("./tableQuadrant");
 var TableQuadrantStackCache = (function () {
@@ -18,11 +17,9 @@ function TableQuadrantStackCache() {
         this.cachedColumnHeaderHeight = 0;
-        this.cachedMainQuadrantScrollOffsets = this.createScrollOffsetMap();
-        this.cachedTopQuadrantScrollOffsets = this.createScrollOffsetMap();
-        this.cachedLeftQuadrantScrollOffsets = this.createScrollOffsetMap();
-        this.cachedTopLeftQuadrantScrollOffsets = this.createScrollOffsetMap();
+        this.cachedScrollLeft = 0;
+        this.cachedScrollTop = 0;
     };
     // Getters
     // =======
-    TableQuadrantStackCache.prototype.getQuadrantScrollOffset = function (quadrantType, scrollKey) {
-        return this.getQuadrantScrollOffsetMap(quadrantType)[scrollKey];
+    TableQuadrantStackCache.prototype.getScrollOffset = function (scrollKey) {
+        return scrollKey === "scrollLeft" ? this.cachedScrollLeft : this.cachedScrollTop;
     };
@@ -43,22 +40,9 @@ TableQuadrantStackCache.prototype.getRowHeaderWidth = function () {
     };
-    TableQuadrantStackCache.prototype.setQuadrantScrollOffset = function (quadrantType, scrollKey, offset) {
-        this.getQuadrantScrollOffsetMap(quadrantType)[scrollKey] = offset;
-    };
-    // Helpers
-    // =======
-    TableQuadrantStackCache.prototype.createScrollOffsetMap = function () {
-        return { scrollLeft: 0, scrollTop: 0 };
-    };
-    TableQuadrantStackCache.prototype.getQuadrantScrollOffsetMap = function (quadrantType) {
-        switch (quadrantType) {
-            case tableQuadrant_1.QuadrantType.MAIN:
-                return this.cachedMainQuadrantScrollOffsets;
-            case tableQuadrant_1.QuadrantType.TOP:
-                return this.cachedTopQuadrantScrollOffsets;
-            case tableQuadrant_1.QuadrantType.LEFT:
-                return this.cachedLeftQuadrantScrollOffsets;
-            default:
-                // i.e. case QuadrantType.TOP_LEFT:
-                return this.cachedTopLeftQuadrantScrollOffsets;
+    TableQuadrantStackCache.prototype.setScrollOffset = function (scrollKey, offset) {
+        if (scrollKey === "scrollLeft") {
+            this.cachedScrollLeft = offset;
         }
+        else {
+            this.cachedScrollTop = offset;
+        }
     };
@@ -65,0 +49,0 @@ return TableQuadrantStackCache;

dist/table.d.ts

@@ -233,2 +233,13 @@ /// <reference types="react" />
     styledRegionGroups?: IStyledRegionGroup[];
+    /**
+     * If `true`, adds an interaction bar on top of all column header cells, and
+     * moves interaction triggers into it.
+     *
+     * This value defaults to `undefined` so that, by default, it won't override
+     * the `useInteractionBar` values that you might have provided directly to
+     * each `<ColumnHeaderCell>`.
+     *
+     * @default undefined
+     */
+    useInteractionBar?: boolean;
 }
@@ -235,0 +246,0 @@ export interface ITableState {

package.json

 {
   "name": "@blueprintjs/table",
-  "version": "1.26.1",
+  "version": "1.27.0",
   "description": "Scalable interactive table component",
@@ -23,3 +23,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@blueprintjs/core": "^1.25.0",
+    "@blueprintjs/core": "^1.30.0",
     "classnames": "^2.2",
@@ -26,0 +26,0 @@ "es6-shim": "^0.35",

src/common/errors.ts

@@ -12,2 +12,3 @@ /*
 export const COLUMN_HEADER_CELL_MENU_DEPRECATED = `${deprec} <ColumnHeaderCell> menu is deprecated. Use renderMenu instead.`;
+export const COLUMN_HEADER_CELL_USE_INTERACTION_BAR_DEPRECATED = `${deprec} <ColumnHeaderCell> useInteractionBar is deprecated. Pass the prop to the top-level <Table> instead. When you pass the prop to <Table>, that value will override the one provided directly to <ColumnHeaderCell>.`;
 
@@ -14,0 +15,0 @@ export const ROW_HEADER_CELL_MENU_DEPRECATED = `${deprec} <RowHeaderCell> menu is deprecated. Use renderMenu instead.`;

src/common/utils.ts

@@ -48,3 +48,4 @@ /**
         const classes = classNames(elem.props.className, ...extendedClasses);
-        return React.cloneElement(elem, { className: classes } as IProps);
+        const props: IProps = { className: classes };
+        return React.cloneElement(elem, props);
     },
@@ -51,0 +52,0 @@

src/interactions/dragEvents.ts

@@ -78,12 +78,12 @@ /**
     private updateCoordinateData(event: MouseEvent) {
-        const currentCoordinates = [event.clientX, event.clientY];
-        const deltaCoordinates = [
+        const currentCoordinates: [number, number] = [event.clientX, event.clientY];
+        const deltaCoordinates: [number, number] = [
             currentCoordinates[0] - this.lastCoordinates[0],
             currentCoordinates[1] - this.lastCoordinates[1],
         ];
-        const offsetCoordinates = [
+        const offsetCoordinates: [number, number] = [
             currentCoordinates[0] - this.activationCoordinates[0],
             currentCoordinates[1] - this.activationCoordinates[1],
         ];
-        const data = {
+        const data: ICoordinateData = {
             activation: this.activationCoordinates,
@@ -94,3 +94,3 @@ current: currentCoordinates,
             offset: offsetCoordinates,
-        } as ICoordinateData;
+        };
         this.lastCoordinates = [event.clientX, event.clientY];
@@ -97,0 +97,0 @@ return data;

src/quadrants/tableQuadrantStackCache.ts

@@ -8,16 +8,9 @@ /**
 
-import { QuadrantType } from "./tableQuadrant";
+export type ScrollKey = "scrollLeft" | "scrollTop";
 
-export interface IScrollOffsetMap {
-    scrollLeft: number;
-    scrollTop: number;
-}
-
 export class TableQuadrantStackCache {
     private cachedRowHeaderWidth: number;
     private cachedColumnHeaderHeight: number;
-    private cachedMainQuadrantScrollOffsets: IScrollOffsetMap;
-    private cachedTopQuadrantScrollOffsets: IScrollOffsetMap;
-    private cachedLeftQuadrantScrollOffsets: IScrollOffsetMap;
-    private cachedTopLeftQuadrantScrollOffsets: IScrollOffsetMap;
+    private cachedScrollLeft: number;
+    private cachedScrollTop: number;
 
@@ -31,7 +24,4 @@ public constructor() {
         this.cachedColumnHeaderHeight = 0;
-
-        this.cachedMainQuadrantScrollOffsets = this.createScrollOffsetMap();
-        this.cachedTopQuadrantScrollOffsets = this.createScrollOffsetMap();
-        this.cachedLeftQuadrantScrollOffsets = this.createScrollOffsetMap();
-        this.cachedTopLeftQuadrantScrollOffsets = this.createScrollOffsetMap();
+        this.cachedScrollLeft = 0;
+        this.cachedScrollTop = 0;
     }
@@ -42,4 +32,4 @@
 
-    public getQuadrantScrollOffset(quadrantType: QuadrantType, scrollKey: keyof IScrollOffsetMap) {
-        return this.getQuadrantScrollOffsetMap(quadrantType)[scrollKey];
+    public getScrollOffset(scrollKey: ScrollKey) {
+        return scrollKey === "scrollLeft" ? this.cachedScrollLeft : this.cachedScrollTop;
     }
@@ -66,26 +56,9 @@
 
-    public setQuadrantScrollOffset(quadrantType: QuadrantType, scrollKey: keyof IScrollOffsetMap, offset: number) {
-        this.getQuadrantScrollOffsetMap(quadrantType)[scrollKey] = offset;
-    }
-
-    // Helpers
-    // =======
-
-    private createScrollOffsetMap() {
-        return { scrollLeft: 0, scrollTop: 0 };
-    }
-
-    private getQuadrantScrollOffsetMap(quadrantType: QuadrantType) {
-        switch (quadrantType) {
-            case QuadrantType.MAIN:
-                return this.cachedMainQuadrantScrollOffsets;
-            case QuadrantType.TOP:
-                return this.cachedTopQuadrantScrollOffsets;
-            case QuadrantType.LEFT:
-                return this.cachedLeftQuadrantScrollOffsets;
-            default:
-                // i.e. case QuadrantType.TOP_LEFT:
-                return this.cachedTopLeftQuadrantScrollOffsets;
+    public setScrollOffset(scrollKey: ScrollKey, offset: number) {
+        if (scrollKey === "scrollLeft") {
+            this.cachedScrollLeft = offset;
+        } else {
+            this.cachedScrollTop = offset;
         }
     }
 }

No alert changes

Improved metrics

Total package byte prevSize

2725798

increased by0.77%

Lines of code

27855

increased by0.91%

Worsened metrics

Number of package files

233

decreased by-0.43%

Dependency changes

• Updated@blueprintjs/core@^1.30.0