feat: DH-21344: Dropdown for input table enums

packages/app-utils/src/components/ThemeBootstrap.tsx

@@ -3,7 +3,7 @@ import { ChartThemeProvider } from '@deephaven/chart';
 import { MonacoThemeProvider } from '@deephaven/console';
 import { isExternalThemeEnabled, ThemeProvider } from '@deephaven/components';
 import { useAppSelector } from '@deephaven/dashboard';
-import { IrisGridThemeProvider } from '@deephaven/iris-grid';
+import { IrisGridContextProvider } from '@deephaven/iris-grid';
 import { PluginsContext, useCustomThemes } from '@deephaven/plugin';
 import { getSettings } from '@deephaven/redux';
 
@@ -27,9 +27,9 @@ export function ThemeBootstrap({
     <ThemeProvider themes={themes} waitForActivation={waitForActivation}>
       <ChartThemeProvider>
         <MonacoThemeProvider>
-          <IrisGridThemeProvider density={settings.gridDensity}>
+          <IrisGridContextProvider density={settings.gridDensity}>
             {children}
-          </IrisGridThemeProvider>
+          </IrisGridContextProvider>
         </MonacoThemeProvider>
       </ChartThemeProvider>
     </ThemeProvider>

packages/grid/src/CellInputField.scss

@@ -4,8 +4,20 @@
   border: none;
   width: 100%;
   height: 100%;
-  padding: 2px 5px 3px 5px;
+  // The canvas draws cell text with `textBaseline: middle`, which sits ~1px
+  // higher than a `line-height: 1` textarea with symmetric vertical padding.
+  // Shift 1px from the top padding to the bottom so the edit text lines up
+  // with the canvas-rendered selection text (matches the legacy 2/3 split).
+  // Horizontal padding uses the theme's `cellHorizontalPadding` so the text
+  // aligns with the canvas across densities (5px regular, 7px spacious).
+  padding: calc(
+      (var(--grid-row-height, 19px) - var(--grid-font-size, 12px)) / 2 - 1px
+    )
+    var(--grid-cell-horizontal-padding, 5px)
+    calc((var(--grid-row-height, 19px) - var(--grid-font-size, 12px)) / 2 + 1px);
   border-radius: 2px;
+  font-size: var(--grid-font-size, 12px);
+  line-height: 1;
   resize: none;
 
   &:focus {

packages/grid/src/CellInputField.tsx

@@ -20,7 +20,6 @@ export type CellInputFieldProps = {
       fillRange?: boolean;
     }
   ) => void;
-  onContextMenu?: React.MouseEventHandler<HTMLTextAreaElement>;
   style?: React.CSSProperties;
 };
 
@@ -48,7 +47,6 @@ export function CellInputField({
   onChange = EMPTY_FUNCTION,
   onCancel = EMPTY_FUNCTION,
   onDone = EMPTY_FUNCTION,
-  onContextMenu = EMPTY_FUNCTION,
   style,
 }: CellInputFieldProps): JSX.Element {
   const inputField = useRef<HTMLTextAreaElement>(null);
@@ -179,13 +177,6 @@ export function CellInputField({
     ]
   );
 
-  const handleContextMenu = useCallback(
-    (event: React.MouseEvent<HTMLTextAreaElement, MouseEvent>) => {
-      onContextMenu(event);
-    },
-    [onContextMenu]
-  );
-
   return (
     <textarea
       ref={inputField}
@@ -194,7 +185,6 @@ export function CellInputField({
       onBlur={handleBlur}
       onChange={handleChange}
       onKeyDown={handleKeyDown}
-      onContextMenu={handleContextMenu}
       onClick={handleClick}
       autoComplete="off"
       autoCorrect="off"

packages/grid/src/Grid.test.tsx

@@ -11,6 +11,7 @@ import MockGridModel from './MockGridModel';
 import MockGridData from './MockGridData';
 import { type VisibleIndex } from './GridMetrics';
 import type GridModel from './GridModel';
+import { type CellInputRendererRegistry } from './GridRendererTypes';
 
 const defaultTheme = { ...GridTheme, autoSizeColumns: false } as GridThemeType;
 
@@ -1439,3 +1440,82 @@ describe('grid-block-events cleanup', () => {
     expect(hasBlockEventsClass()).toBe(false);
   });
 });
+
+describe('cellInputRendererRegistry', () => {
+  const RESTRICTION_TYPE = 'test-restriction';
+
+  it('calls the custom renderer and passes restrictions when the model returns a matching restriction type', () => {
+    const model = new MockGridModel({ isEditable: true });
+    jest
+      .spyOn(model, 'getColumnRestrictions')
+      .mockReturnValue([{ type: RESTRICTION_TYPE }]);
+
+    const customRenderer = jest.fn(() => (
+      <span data-testid="custom-cell-editor" />
+    ));
+    const registry = new Map([
+      [RESTRICTION_TYPE, customRenderer],
+    ]) as unknown as CellInputRendererRegistry;
+
+    let ref: React.RefObject<Grid>;
+    function GridWithRegistry() {
+      ref = useRef<Grid>(null);
+      return (
+        <div>
+          <Grid
+            model={model}
+            theme={defaultTheme}
+            cellInputRendererRegistry={registry}
+            onSelectionChanged={jest.fn()}
+            ref={ref}
+          />
+        </div>
+      );
+    }
+    render(<GridWithRegistry />);
+    const component = ref!.current!;
+
+    mouseDoubleClick(3, 5, component);
+
+    expect(customRenderer).toHaveBeenCalled();
+    expect(customRenderer).toHaveBeenCalledWith(
+      expect.objectContaining({
+        restrictions: [{ type: RESTRICTION_TYPE }],
+      })
+    );
+  });
+
+  it('falls back to the default CellInputField when no registry entry matches the column restriction', () => {
+    const model = new MockGridModel({ isEditable: true });
+    // getColumnRestriction returns [] by default — no restrictions, no renderer lookup
+
+    const customRenderer = jest.fn(() => (
+      <span data-testid="custom-cell-editor" />
+    ));
+    const registry = new Map([
+      [RESTRICTION_TYPE, customRenderer],
+    ]) as unknown as CellInputRendererRegistry;
+
+    let ref: React.RefObject<Grid>;
+    function GridWithRegistry() {
+      ref = useRef<Grid>(null);
+      return (
+        <div>
+          <Grid
+            model={model}
+            theme={defaultTheme}
+            cellInputRendererRegistry={registry}
+            onSelectionChanged={jest.fn()}
+            ref={ref}
+          />
+        </div>
+      );
+    }
+    render(<GridWithRegistry />);
+    const component = ref!.current!;
+
+    mouseDoubleClick(3, 5, component);
+
+    expect(customRenderer).not.toHaveBeenCalled();
+  });
+});

packages/grid/src/Grid.tsx

@@ -78,6 +78,8 @@ import {
   type EditingCell,
   type GridRenderState,
   type EditingCellTextSelectionRange,
+  type CellInputRendererRegistry,
+  type CellInputProps,
 } from './GridRendererTypes';
 
 type LegacyCanvasRenderingContext2D = CanvasRenderingContext2D & {
@@ -142,6 +144,13 @@ export type GridProps = typeof Grid.defaultProps & {
   // Renderer for the grid canvas
   renderer?: GridRenderer;
 
+  /**
+   * Registry of cell input renderer functions keyed by column restriction type.
+   * Grid looks up columnRestrictions[0].type at render time and falls back to
+   * its built-in CellInputField when there is no match.
+   */
+  cellInputRendererRegistry?: CellInputRendererRegistry;
+
   // Optional state override to pass in to the metric and render state
   // Can be used to add custom properties as well
   stateOverride?: Record<string, unknown>;
@@ -264,6 +273,7 @@ class Grid extends PureComponent<GridProps, GridState> {
         window.open(token.href, '_blank', 'noopener,noreferrer');
       }
     },
+    cellInputRendererRegistry: new Map() as CellInputRendererRegistry,
     stateOverride: {} as Record<string, unknown>,
     theme: {
       autoSelectColumn: false,
@@ -2267,7 +2277,13 @@ class Grid extends PureComponent<GridProps, GridState> {
       allRowHeights,
     } = metrics;
 
-    const { activeCellSelectionBorderWidth } = this.getTheme();
+    const theme = this.getTheme();
+    const {
+      activeCellSelectionBorderWidth,
+      rowBackgroundColors,
+      maxDepth,
+      cellHorizontalPadding,
+    } = theme;
 
     const x = allColumnXs.get(column);
     const y = allRowYs.get(row);
@@ -2280,26 +2296,49 @@ class Grid extends PureComponent<GridProps, GridState> {
         ? activeCellSelectionBorderWidth
         : 0;
 
+    let modelColumn;
+    let modelRow;
+    try {
+      modelColumn = this.getModelColumn(column);
+      modelRow = this.getModelRow(row);
+    } catch (e) {
+      return null;
+    }
+
+    // Per-cell formatting takes priority; only compute the row stripe if there's no cell-specific color
+    let cellBackgroundColor: string | undefined;
+    let cellForegroundColor: string | undefined;
+    if (modelColumn != null && modelRow != null) {
+      cellBackgroundColor =
+        model.backgroundColorForCell(modelColumn, modelRow, theme) ?? undefined;
+      cellForegroundColor = model.colorForCell(modelColumn, modelRow, theme);
+    }
+    if (cellBackgroundColor == null && rowBackgroundColors) {
+      const colorSets = GridRenderer.getCachedBackgroundColors(
+        rowBackgroundColors,
+        maxDepth
+      );
+      const depth = isExpandableGridModel(model) ? model.depthForRow(row) : 0;
+      const colorSet = colorSets[row % colorSets.length];
+      cellBackgroundColor = colorSet[Math.min(depth, colorSet.length - 1)];
+    }
+
     // If the cell isn't visible, we still need to display an invisible cell for focus purposes
     const wrapperStyle: CSSProperties =
       x != null && y != null && w != null && h != null
-        ? {
+        ? ({
             position: 'absolute',
             left: gridX + x + leftBorderOffset,
             top: gridY + y,
             width: w - leftBorderOffset,
             height: h,
-          }
+            '--grid-cell-bg': cellBackgroundColor,
+            '--grid-cell-fg': cellForegroundColor,
+            '--grid-row-height': `${h}px`,
+            '--grid-font-size': theme.font.split(' ')[0],
+            '--grid-cell-horizontal-padding': `${cellHorizontalPadding}px`,
+          } as CSSProperties)
         : { opacity: 0 };
-
-    let modelColumn;
-    let modelRow;
-    try {
-      modelColumn = this.getModelColumn(column);
-      modelRow = this.getModelRow(row);
-    } catch (e) {
-      return null;
-    }
     const inputStyle: CSSProperties | undefined =
       modelColumn != null && modelRow != null
         ? {
@@ -2311,19 +2350,39 @@ class Grid extends PureComponent<GridProps, GridState> {
         ? model.isValidForCell(modelColumn, modelRow, value)
         : false;
 
+    const { cellInputRendererRegistry } = this.props;
+    const restrictions =
+      modelColumn != null
+        ? model.getColumnRestrictions(modelColumn)
+        : EMPTY_ARRAY;
+
+    const cellInputProps: CellInputProps = {
+      selectionRange,
+      className: classNames({ error: !isValid }),
+      onCancel: this.handleEditCellCancel,
+      onChange: this.handleEditCellChange,
+      onDone: this.handleEditCellCommit,
+      isQuickEdit,
+      style: inputStyle,
+      value,
+      restrictions,
+    };
+
+    // The server supports multiple restrictions on a single column, but the UI does not know how to render multiple restrictions simultaneously
+    // This uses a custom renderer if there is only one restriction and uses the default renderer if there are multiple restrictions
+    const renderer =
+      restrictions.length === 1
+        ? cellInputRendererRegistry?.get(restrictions[0].type)
+        : undefined;
+
     return (
-      <div style={wrapperStyle}>
-        <CellInputField
-          key={`${column},${row}`}
-          selectionRange={selectionRange}
-          className={classNames({ error: !isValid })}
-          onCancel={this.handleEditCellCancel}
-          onChange={this.handleEditCellChange}
-          onDone={this.handleEditCellCommit}
-          isQuickEdit={isQuickEdit}
-          style={inputStyle}
-          value={value}
-        />
+      <div key={`${column},${row}`} style={wrapperStyle}>
+        {renderer != null ? (
+          renderer(cellInputProps)
+        ) : (
+          // eslint-disable-next-line react/jsx-props-no-spreading
+          <CellInputField {...cellInputProps} />
+        )}
       </div>
     );
   }

packages/grid/src/GridModel.ts

@@ -236,6 +236,24 @@ abstract class GridModel<
   renderTypeForCell(column: ModelIndex, row: ModelIndex): CellRenderType {
     return 'text';
   }
+
+  /**
+   * Get the column restrictions for a column, which can be used to determine
+   * what type of input component to render for cells in that column.
+   * @param column The model index of the column
+   * @returns The column restrictions, or an empty array if there are none
+   */
+  getColumnRestrictions(column: ModelIndex): ColumnRestriction[] {
+    return [];
+  }
 }
 
+/**
+ * Base type for a column restriction. Carries a `type` discriminator that
+ * can be used to narrow to a more specific restriction shape.
+ */
+export type ColumnRestriction = {
+  type: string;
+};
+
 export default GridModel;