[table] feat: migrate to ContextMenu2

packages/docs-app/src/examples/table-examples/cellLoadingExample.tsx

@@ -17,7 +17,7 @@ import * as React from "react";
 
 import { RadioGroup } from "@blueprintjs/core";
 import { Example, handleStringChange, IExampleProps } from "@blueprintjs/docs-theme";
-import { Cell, Column, ColumnHeaderCell2, RowHeaderCell, Table2 } from "@blueprintjs/table";
+import { Cell, Column, ColumnHeaderCell2, RowHeaderCell2, Table2 } from "@blueprintjs/table";
 
 interface IBigSpaceRock {
     [key: string]: number | string;
@@ -126,7 +126,7 @@ export class CellLoadingExample extends React.PureComponent<IExampleProps, ICell
     };
 
     private renderRowHeaderCell = (rowIndex: number) => {
-        return <RowHeaderCell loading={this.isLoading(rowIndex + 1, 0)} name={`${rowIndex + 1}`} />;
+        return <RowHeaderCell2 loading={this.isLoading(rowIndex + 1, 0)} name={`${rowIndex + 1}`} />;
     };
 
     private isLoading = (rowIndex: number, columnIndex: number) => {

packages/eslint-plugin/src/rules/no-deprecated-components/no-deprecated-table-components.ts

@@ -8,6 +8,7 @@ export const tableComponentsMigrationMapping = {
     ColumnHeaderCell: "ColumnHeaderCell2",
     EditableCell: "EditableCell2",
     JSONFormat: "JSONFormat2",
+    RowHeaderCell: "RowHeaderCell2",
     Table: "Table2",
     TruncatedFormat: "TruncatedFormat2",
 };

packages/popover2/src/contextMenu2.tsx

@@ -217,10 +217,12 @@ export const ContextMenu2: React.FC<ContextMenu2Props> = React.forwardRef<any, C
                 return;
             }
 
-            // If disabled, we should avoid this extra work. Otherwise: if using the child function API,
-            // we need to make sure contentProps is up to date for correctness, so we handle the event regardless
-            // of whether the consumer returned an undefined menu.
-            const shouldHandleEvent = !disabled && (CoreUtils.isFunction(children) || maybePopover !== undefined);
+            // If disabled, we should avoid this extra work.
+            // Otherwise: if using the child or content function APIs, we need to make sure contentProps gets updated,
+            // so we handle the event regardless of whether the consumer returned an undefined menu.
+            const shouldHandleEvent =
+                !disabled &&
+                (CoreUtils.isFunction(children) || CoreUtils.isFunction(content) || maybePopover !== undefined);
 
             if (shouldHandleEvent) {
                 e.preventDefault();

packages/table-dev-app/src/features.tsx

@@ -35,7 +35,7 @@ import {
     Region,
     RegionCardinality,
     Regions,
-    RowHeaderCell,
+    RowHeaderCell2,
     SelectionModes,
     Table2,
     Utils,
@@ -499,7 +499,7 @@ ReactDOM.render(
         {},
         {
             renderRowHeaderCell: (rowIndex: number) => {
-                return <RowHeaderCell name={customRowHeaders[rowIndex]} />;
+                return <RowHeaderCell2 name={customRowHeaders[rowIndex]} />;
             },
         },
     ),
@@ -547,7 +547,7 @@ ReactDOM.render(
         },
         {
             renderRowHeaderCell: (rowIndex: number) => {
-                return <RowHeaderCell name={`${rowIndex + 1}`} menuRenderer={renderTestMenu} />;
+                return <RowHeaderCell2 name={`${rowIndex + 1}`} menuRenderer={renderTestMenu} />;
             },
         },
     ),

packages/table-dev-app/src/mutableTable.tsx

@@ -47,7 +47,7 @@ import {
     RegionCardinality,
     Regions,
     RenderMode,
-    RowHeaderCell,
+    RowHeaderCell2,
     StyledRegionGroup,
     Table2,
     TableLoadingOption,
@@ -520,7 +520,7 @@ export class MutableTable extends React.Component<{}, IMutableTableState> {
     };
 
     private renderRowHeader = (rowIndex: number) => {
-        return <RowHeaderCell index={rowIndex} name={`${rowIndex + 1}`} menuRenderer={this.renderRowMenu} />;
+        return <RowHeaderCell2 index={rowIndex} name={`${rowIndex + 1}`} menuRenderer={this.renderRowMenu} />;
     };
 
     private renderRowMenu = (rowIndex: number) => {

packages/table/src/common/contextMenuTargetWrapper.tsx

@@ -14,6 +14,11 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * Table components should use ContextMenu2 instead.
+ */
+
 /* eslint-disable deprecation/deprecation */
 
 import * as React from "react";
@@ -31,6 +36,8 @@ export interface IContextMenuTargetWrapper extends IProps {
  * `element.addEventListener`, the prop can be lost. This wrapper helps us
  * maintain context menu fuctionality when doing fancy React.cloneElement
  * chains.
+ *
+ * @deprecated use ContextMenu2 instead
  */
 @ContextMenuTarget
 export class ContextMenuTargetWrapper extends React.PureComponent<IContextMenuTargetWrapper> {

packages/table/src/docs/table-features.md

@@ -144,7 +144,7 @@ individual column's header and body cells. Try selecting a different column in t
 
 @### Cells
 
-`Cell`, `EditableCell`, `ColumnHeaderCell2`, and `RowHeaderCell` expose a `loading` prop for granular
+`Cell`, `EditableCell2`, `ColumnHeaderCell2`, and `RowHeaderCell2` expose a `loading` prop for granular
 control of which cells should show a loading state. Try selecting a different preset loading
 configuration.
 

packages/table/src/headers/columnHeaderCell2.tsx

@@ -25,7 +25,7 @@ import { columnInteractionBarContextTypes, ColumnInteractionBarContextTypes } fr
 import { LoadableContent } from "../common/loadableContent";
 import { CLASSNAME_EXCLUDED_FROM_TEXT_MEASUREMENT } from "../common/utils";
 import { HorizontalCellDivider, IColumnHeaderCellProps, IColumnHeaderCellState } from "./columnHeaderCell";
-import { HeaderCell } from "./headerCell";
+import { HeaderCell2 } from "./headerCell2";
 
 // eslint-disable-next-line deprecation/deprecation
 export type ColumnHeaderCellProps = IColumnHeaderCellProps;
@@ -86,7 +86,7 @@ export class ColumnHeaderCell2 extends AbstractPureComponent2<ColumnHeaderCellPr
         });
 
         return (
-            <HeaderCell
+            <HeaderCell2
                 isReorderable={this.props.enableColumnReordering}
                 isSelected={this.props.isColumnSelected}
                 {...spreadableProps}
@@ -95,7 +95,7 @@ export class ColumnHeaderCell2 extends AbstractPureComponent2<ColumnHeaderCellPr
                 {this.renderName()}
                 {this.maybeRenderContent()}
                 {this.props.loading ? undefined : this.props.resizeHandle}
-            </HeaderCell>
+            </HeaderCell2>
         );
     }
 

packages/table/src/headers/headerCell.tsx

@@ -14,6 +14,13 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to HeaderCell2 instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
 import classNames from "classnames";
 import * as React from "react";
 
@@ -92,7 +99,7 @@ export interface IHeaderCellState {
     isActive: boolean;
 }
 
-// eslint-disable-next-line deprecation/deprecation
+/** @deprecated use HeaderCell2 */
 @ContextMenuTarget
 export class HeaderCell extends React.Component<IInternalHeaderCellProps, IHeaderCellState> {
     public state: IHeaderCellState = {

packages/table/src/headers/headerCell2.tsx

@@ -0,0 +1,131 @@
+/*
+ * Copyright 2022 Palantir Technologies, Inc. All rights reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import classNames from "classnames";
+import * as React from "react";
+
+import { Classes as CoreClasses, Utils as CoreUtils, Props } from "@blueprintjs/core";
+import { ContextMenu2 } from "@blueprintjs/popover2";
+
+import * as Classes from "../common/classes";
+import type { ResizeHandle } from "../interactions/resizeHandle";
+
+export interface HeaderCell2Props extends Props {
+    children?: React.ReactNode;
+
+    /**
+     * The index of the cell in the header. If provided, this will be passed as an argument to any
+     * callbacks when they are invoked.
+     */
+    index?: number;
+
+    /**
+     * If `true`, will apply the active class to the header to indicate it is
+     * part of an external operation.
+     */
+    isActive?: boolean;
+
+    /**
+     * Specifies if the cell is reorderable.
+     *
+     * @internal users should pass `isReorderable` to `ColumnHeader` or `RowHeader` instead
+     */
+    isReorderable?: boolean;
+
+    /**
+     * Specifies if the cell is selected.
+     *
+     * @internal
+     */
+    isSelected?: boolean;
+
+    /**
+     * If `true`, the row/column `name` will be replaced with a fixed-height skeleton, and the
+     * `resizeHandle` will not be rendered. If passing in additional children to this component, you
+     * will also want to conditionally apply `Classes.SKELETON` where appropriate.
+     *
+     * @default false
+     */
+    loading?: boolean;
+
+    /**
+     * The name displayed in the header of the row/column.
+     */
+    name?: string;
+
+    /**
+     * A callback that returns an element, like a `<Menu>`, which is displayed by right-clicking
+     * anywhere in the header. The callback will receive the cell index if it was provided via
+     * props.
+     */
+    menuRenderer?: (index?: number) => JSX.Element;
+
+    /**
+     * A `ReorderHandle` React component that allows users to drag-reorder the column header.
+     */
+    reorderHandle?: JSX.Element;
+
+    /**
+     * A `ResizeHandle` React component that allows users to drag-resize the header.
+     */
+    resizeHandle?: ResizeHandle;
+
+    /**
+     * CSS styles for the top level element.
+     */
+    style?: React.CSSProperties;
+}
+
+export interface HeaderCell2State {
+    isActive: boolean;
+}
+
+export class HeaderCell2 extends React.Component<HeaderCell2Props, HeaderCell2State> {
+    public state: HeaderCell2State = {
+        isActive: false,
+    };
+
+    public shouldComponentUpdate(nextProps: HeaderCell2Props) {
+        return (
+            !CoreUtils.shallowCompareKeys(this.props, nextProps, { exclude: ["style"] }) ||
+            !CoreUtils.deepCompareKeys(this.props, nextProps, ["style"])
+        );
+    }
+
+    public render() {
+        const classes = classNames(
+            Classes.TABLE_HEADER,
+            {
+                [Classes.TABLE_HEADER_ACTIVE]: this.props.isActive || this.state.isActive,
+                [Classes.TABLE_HEADER_SELECTED]: this.props.isSelected,
+                [CoreClasses.LOADING]: this.props.loading,
+            },
+            this.props.className,
+        );
+        const hasMenu = this.props.menuRenderer !== undefined;
+
+        return (
+            <ContextMenu2
+                className={classes}
+                content={this.props.menuRenderer?.(this.props.index)}
+                disabled={!hasMenu}
+                style={this.props.style}
+            >
+                {this.props.children}
+            </ContextMenu2>
+        );
+    }
+}

packages/table/src/headers/rowHeader.tsx

@@ -24,10 +24,11 @@ import { IIndexedResizeCallback } from "../interactions/resizable";
 import { Orientation } from "../interactions/resizeHandle";
 import { RegionCardinality, Regions } from "../regions";
 import { Header, IHeaderProps } from "./header";
-import { IRowHeaderCellProps, RowHeaderCell } from "./rowHeaderCell";
+import type { RowHeaderCellProps } from "./rowHeaderCell";
+import { RowHeaderCell2 } from "./rowHeaderCell2";
 
 /** @deprecated use RowHeaderRenderer */
-export type IRowHeaderRenderer = (rowIndex: number) => React.ReactElement<IRowHeaderCellProps>;
+export type IRowHeaderRenderer = (rowIndex: number) => React.ReactElement<RowHeaderCellProps>;
 // eslint-disable-next-line deprecation/deprecation
 export type RowHeaderRenderer = IRowHeaderRenderer;
 
@@ -179,7 +180,7 @@ export class RowHeader extends React.Component<IRowHeaderProps> {
     private renderGhostCell = (index: number, extremaClasses: string[]) => {
         const rect = this.props.grid.getGhostCellRect(index, 0);
         return (
-            <RowHeaderCell
+            <RowHeaderCell2
                 className={classNames(extremaClasses)}
                 index={index}
                 key={Classes.rowIndexClass(index)}
@@ -196,9 +197,9 @@ export class RowHeader extends React.Component<IRowHeaderProps> {
 }
 
 /**
- * A default implementation of `IRowHeaderRenderer` that displays 1-indexed
+ * A default implementation of `RowHeaderRenderer` that displays 1-indexed
  * numbers for each row.
  */
 export function renderDefaultRowHeader(rowIndex: number) {
-    return <RowHeaderCell index={rowIndex} name={`${rowIndex + 1}`} />;
+    return <RowHeaderCell2 index={rowIndex} name={`${rowIndex + 1}`} />;
 }

packages/table/src/headers/rowHeaderCell.tsx

@@ -14,6 +14,13 @@
  * limitations under the License.
  */
 
+/**
+ * @fileoverview This component is DEPRECATED, and the code is frozen.
+ * All changes & bugfixes should be made to RowHeaderCell2 instead.
+ */
+
+/* eslint-disable deprecation/deprecation, @blueprintjs/no-deprecated-components */
+
 import * as React from "react";
 
 import { AbstractPureComponent2, Props } from "@blueprintjs/core";
@@ -47,6 +54,7 @@ export interface IRowHeaderCellProps extends IHeaderCellProps, Props {
     nameRenderer?: (name: string, index?: number) => React.ReactElement<Props>;
 }
 
+/** @deprecated use RowHeaderCell2 */
 export class RowHeaderCell extends AbstractPureComponent2<IRowHeaderCellProps> {
     public render() {
         const {