@opencorestack/opengridx 3.2.2 → 3.4.0

package/lib/ai/validate.ts

@@ -0,0 +1,286 @@
+// validateGridAiState: the safety layer between a model's reply and the grid. Anything the columns
+// do not allow is dropped with an error; values are coerced to the column type. Never throws.
+// Only own keys of the input are read (never `__proto__`), and every key written to the output is a
+// column field, so nothing in the reply can reach Object.prototype or the output's prototype.
+import type {
+  GridAggregationModel,
+  GridColumnVisibilityModel,
+  GridFilterGroup,
+  GridFilterItem,
+  GridFilterModel,
+  GridFilterOperator,
+  GridPivotModel,
+  GridPivotValueField,
+  GridSortItem,
+} from '../types';
+import { toLocalDateString } from '../utils/values';
+import { coerceBoolean, coerceValue } from './coerce';
+import {
+  ALL_PARTS,
+  MAX_FILTER_DEPTH,
+  NO_VALUE_OPS,
+  PART_KEYS,
+  PIVOT_FNS,
+  aggregationFnsOf,
+  hasOwn,
+  isFilterable,
+  isGroupable,
+  isHideable,
+  isPlainObject,
+  isSortable,
+  operatorsOf,
+  selectedParts,
+  usableColumns,
+} from './columns';
+import type { GridAiColumn, GridAiPart, GridAiState, GridAiValidateOptions, GridAiValidationError, GridAiValidationResult } from './types';
+
+/** Longest list read from the model output; the rest is dropped with one error. */
+const MAX_LIST = 200;
+/** Errors past this many are not listed, so a reply full of junk still gives a readable list. */
+const MAX_ERRORS = 100;
+
+type Allowed = (col: GridAiColumn) => boolean;
+type FilterNode = GridFilterItem | GridFilterGroup;
+
+interface Ctx {
+  errors: GridAiValidationError[];
+  byField: Map<string, GridAiColumn>;
+}
+
+function fail(ctx: Ctx, path: string, message: string): null {
+  if (ctx.errors.length < MAX_ERRORS) ctx.errors.push({ path, message });
+  return null;
+}
+
+/** A short, safe rendering of a value for an error message. */
+function show(value: unknown): string {
+  if (typeof value === 'string') return JSON.stringify(value.slice(0, 60));
+  return value === null || typeof value !== 'object' ? String(value) : Array.isArray(value) ? 'a list' : 'an object';
+}
+
+function lower(value: unknown): string | null {
+  return typeof value === 'string' ? value.trim().toLowerCase() : null;
+}
+
+/** Own enumerable keys of the input, without `__proto__`. */
+function keysOf(obj: Record<string, unknown>): string[] {
+  return Object.keys(obj).filter((key) => key !== '__proto__');
+}
+
+function column(ctx: Ctx, value: unknown, path: string, allowed: Allowed, what: string): GridAiColumn | null {
+  const col = typeof value === 'string' ? ctx.byField.get(value) : undefined;
+  if (!col) return fail(ctx, path, `Unknown field ${show(value)}`);
+  return allowed(col) ? col : fail(ctx, path, `Field ${show(value)} cannot be ${what}`);
+}
+
+/** The first MAX_LIST entries of an array; a single value is read as a one-entry list. */
+function list(ctx: Ctx, value: unknown, path: string): unknown[] {
+  if (value == null) return [];
+  const items = Array.isArray(value) ? value : [value];
+  if (items.length > MAX_LIST) fail(ctx, path, `Only the first ${MAX_LIST} entries are read`);
+  return items.slice(0, MAX_LIST);
+}
+
+/** The choice `value` names, case-insensitively, in the choice's own spelling. */
+function oneOf(ctx: Ctx, value: unknown, path: string, choices: readonly string[]): string | null {
+  const v = lower(value);
+  return choices.find((c) => c.toLowerCase() === v) ?? fail(ctx, path, `${show(value)} is not one of ${choices.join(', ')}`);
+}
+
+/** One filter value, coerced; dates become `YYYY-MM-DD` as the filter panel writes them. */
+function filterValue(ctx: Ctx, raw: unknown, col: GridAiColumn, path: string): { v: unknown } | null {
+  const result = coerceValue(raw, col);
+  if (!result.ok) return fail(ctx, path, `${show(raw)} is not a valid ${col.type ?? 'string'} value`);
+  const v = result.value instanceof Date ? toLocalDateString(result.value) : result.value;
+  return v == null || v === '' ? fail(ctx, path, 'Missing value') : { v };
+}
+
+function filterItem(ctx: Ctx, raw: Record<string, unknown>, path: string): GridFilterItem | null {
+  const col = column(ctx, raw.field, `${path}.field`, isFilterable, 'filtered');
+  if (!col) return null;
+  const operator = oneOf(ctx, raw.operator, `${path}.operator`, operatorsOf(col));
+  if (operator === null) return null;
+  const item: GridFilterItem = { field: col.field, operator: operator as GridFilterOperator };
+  if (NO_VALUE_OPS.includes(item.operator)) return item;
+  const rawValue = hasOwn(raw, 'value') ? raw.value : undefined;
+  if (item.operator === 'isAnyOf') {
+    const values: unknown[] = [];
+    list(ctx, rawValue, `${path}.value`).forEach((entry, i) => {
+      const r = filterValue(ctx, entry, col, `${path}.value[${i}]`);
+      if (r && !values.includes(r.v)) values.push(r.v);
+    });
+    if (values.length === 0) return fail(ctx, `${path}.value`, 'No valid values');
+    item.value = values;
+    return item;
+  }
+  if (Array.isArray(rawValue)) return fail(ctx, `${path}.value`, 'Expected one value, not a list');
+  const r = filterValue(ctx, rawValue, col, `${path}.value`);
+  if (!r) return null;
+  item.value = r.v;
+  return item;
+}
+
+function logic(ctx: Ctx, raw: unknown, path: string): 'and' | 'or' | null {
+  return raw === undefined ? null : (oneOf(ctx, raw, path, ['and', 'or']) as 'and' | 'or' | null);
+}
+
+function filterItems(ctx: Ctx, raw: unknown, path: string, depth: number): FilterNode[] {
+  const out: FilterNode[] = [];
+  list(ctx, raw, path).forEach((entry, i) => {
+    const at = `${path}[${i}]`;
+    if (!isPlainObject(entry)) {
+      fail(ctx, at, `Expected a filter, got ${show(entry)}`);
+    } else if (hasOwn(entry, 'items') || hasOwn(entry, 'logicOperator')) {
+      if (depth >= MAX_FILTER_DEPTH) {
+        fail(ctx, at, `Groups nest at most ${MAX_FILTER_DEPTH} levels`);
+        return;
+      }
+      const items = filterItems(ctx, entry.items, `${at}.items`, depth + 1);
+      if (items.length === 0) fail(ctx, at, 'Empty group removed');
+      else out.push({ logicOperator: logic(ctx, entry.logicOperator, `${at}.logicOperator`) ?? 'and', items });
+    } else {
+      const item = filterItem(ctx, entry, at);
+      if (item) out.push(item);
+    }
+  });
+  return out;
+}
+
+function filterModel(ctx: Ctx, raw: Record<string, unknown>, path: string): GridFilterModel {
+  const model: GridFilterModel = {};
+  if (hasOwn(raw, 'items')) model.items = filterItems(ctx, raw.items, `${path}.items`, 0);
+  const op = logic(ctx, raw.logicOperator, `${path}.logicOperator`);
+  if (op) model.logicOperator = op;
+  if (hasOwn(raw, 'quickFilterValues')) {
+    model.quickFilterValues = [];
+    list(ctx, raw.quickFilterValues, `${path}.quickFilterValues`).forEach((entry, i) => {
+      const word = typeof entry === 'string' || typeof entry === 'number' ? String(entry).trim() : null;
+      if (word === null) fail(ctx, `${path}.quickFilterValues[${i}]`, `Expected text, got ${show(entry)}`);
+      else if (word !== '') model.quickFilterValues?.push(word);
+    });
+  }
+  return model;
+}
+
+function sortModel(ctx: Ctx, raw: unknown, path: string): GridSortItem[] {
+  const out: GridSortItem[] = [];
+  list(ctx, raw, path).forEach((entry, i) => {
+    const at = `${path}[${i}]`;
+    if (!isPlainObject(entry)) return fail(ctx, at, `Expected { field, sort }, got ${show(entry)}`);
+    const col = column(ctx, entry.field, `${at}.field`, isSortable, 'sorted');
+    const sort = col && oneOf(ctx, entry.sort, `${at}.sort`, ['asc', 'desc']);
+    if (!col || !sort) return;
+    if (out.some((s) => s.field === col.field)) fail(ctx, at, `${show(col.field)} is sorted twice`);
+    else out.push({ field: col.field, sort: sort as 'asc' | 'desc' });
+  });
+  return out;
+}
+
+function fieldList(ctx: Ctx, raw: unknown, path: string, allowed: Allowed, what: string): string[] {
+  const out: string[] = [];
+  list(ctx, raw, path).forEach((entry, i) => {
+    const col = column(ctx, entry, `${path}[${i}]`, allowed, what);
+    if (col && !out.includes(col.field)) out.push(col.field);
+  });
+  return out;
+}
+
+const canAggregate: Allowed = (col) => aggregationFnsOf(col).length > 0;
+const canPivot: Allowed = (col) => aggregationFnsOf(col, PIVOT_FNS).length > 0;
+
+function aggregationModel(ctx: Ctx, raw: Record<string, unknown>, path: string): GridAggregationModel {
+  const model: GridAggregationModel = {};
+  for (const key of keysOf(raw)) {
+    // 'none' is how the grid spells "no aggregation": nothing to set.
+    if (lower(raw[key]) === 'none') continue;
+    const col = column(ctx, key, `${path}.${key}`, canAggregate, 'aggregated');
+    const fn = col && oneOf(ctx, raw[key], `${path}.${key}`, aggregationFnsOf(col));
+    if (col && fn) model[col.field] = fn;
+  }
+  return model;
+}
+
+function pivotModel(ctx: Ctx, raw: Record<string, unknown>, path: string): GridPivotModel {
+  const valueFields: GridPivotValueField[] = [];
+  list(ctx, raw.valueFields, `${path}.valueFields`).forEach((entry, i) => {
+    const at = `${path}.valueFields[${i}]`;
+    if (!isPlainObject(entry)) return fail(ctx, at, `Expected { field, aggFn }, got ${show(entry)}`);
+    const col = column(ctx, entry.field, `${at}.field`, canPivot, 'a pivot value');
+    const aggFn = col && (oneOf(ctx, entry.aggFn, `${at}.aggFn`, aggregationFnsOf(col, PIVOT_FNS)) as GridPivotValueField['aggFn'] | null);
+    if (col && aggFn && !valueFields.some((v) => v.field === col.field && v.aggFn === aggFn)) valueFields.push({ field: col.field, aggFn });
+  });
+  return {
+    rowFields: fieldList(ctx, raw.rowFields, `${path}.rowFields`, isGroupable, 'a pivot label'),
+    columnFields: fieldList(ctx, raw.columnFields, `${path}.columnFields`, isGroupable, 'a pivot label'),
+    valueFields,
+  };
+}
+
+function visibilityModel(ctx: Ctx, raw: Record<string, unknown>, path: string): GridColumnVisibilityModel {
+  const model: GridColumnVisibilityModel = {};
+  for (const key of keysOf(raw)) {
+    const col = column(ctx, key, `${path}.${key}`, isHideable, 'hidden');
+    const visible = coerceBoolean(raw[key]);
+    if (!col) continue;
+    if (visible.ok && visible.value !== null) model[col.field] = visible.value;
+    else fail(ctx, `${path}.${key}`, `Expected true or false, got ${show(raw[key])}`);
+  }
+  return model;
+}
+
+function readPart(ctx: Ctx, part: GridAiPart, raw: unknown, path: string, state: GridAiState): void {
+  if (part === 'sort') state.sortModel = sortModel(ctx, raw, path);
+  else if (part === 'grouping') state.rowGroupingModel = fieldList(ctx, raw, path, isGroupable, 'grouped');
+  else if (!isPlainObject(raw)) fail(ctx, path, `Expected an object, got ${show(raw)}`);
+  else if (part === 'filter') state.filterModel = filterModel(ctx, raw, path);
+  else if (part === 'aggregation') state.aggregationModel = aggregationModel(ctx, raw, path);
+  else if (part === 'pivot') state.pivotModel = pivotModel(ctx, raw, path);
+  else state.columnVisibilityModel = visibilityModel(ctx, raw, path);
+}
+
+/**
+ * Checks a model's reply against the columns and returns the state that is safe to apply.
+ * `json` is an object or a JSON string (bad JSON gives one error and an empty state). Unknown
+ * parts, fields, operators and enum values are dropped, each with an error; values are coerced to
+ * the column type (`"1,200"` → 1200, a date → `"YYYY-MM-DD"`); filter groups left empty are
+ * removed. Never throws, and never returns a field the columns do not allow.
+ * @since v3.4
+ */
+export function validateGridAiState<C extends GridAiColumn>(
+  json: unknown,
+  columns: readonly C[],
+  options: GridAiValidateOptions = {},
+): GridAiValidationResult {
+  const ctx: Ctx = { errors: [], byField: new Map() };
+  const state: GridAiState = {};
+  try {
+    for (const col of usableColumns(columns)) ctx.byField.set(col.field, col);
+    let input = json;
+    if (typeof json === 'string') {
+      try {
+        input = JSON.parse(json) as unknown;
+      } catch {
+        fail(ctx, '', 'Not valid JSON');
+        return { state, errors: ctx.errors };
+      }
+    }
+    if (!isPlainObject(input)) {
+      fail(ctx, '', `Expected an object, got ${show(input)}`);
+      return { state, errors: ctx.errors };
+    }
+    const allowed = selectedParts(options);
+    for (const key of keysOf(input)) {
+      const part = ALL_PARTS.find((p) => PART_KEYS[p] === key);
+      if (key === 'schemaVersion') {
+        if (input[key] !== 1) fail(ctx, key, `Unsupported schemaVersion ${show(input[key])}`);
+      } else if (!part) fail(ctx, key, 'Unknown part');
+      else if (!allowed.includes(part)) fail(ctx, key, 'Part not allowed');
+      else readPart(ctx, part, input[key], key, state);
+    }
+  } catch {
+    // Defensive only: a getter on a hand-built input object could throw.
+    fail(ctx, '', 'Could not read the input');
+    return { state: {}, errors: ctx.errors };
+  }
+  return { state, errors: ctx.errors };
+}

package/lib/components/Cell/Cell.css

@@ -28,6 +28,36 @@
 .ogx__cell--editable {
   cursor: text;
 }
+/*
+ * Cell range selection (cellSelection, v3.3). The tint is a background image, so it also covers
+ * pinned cells' own background; the outline is an inset box-shadow, so the layout never shifts.
+ */
+.ogx__cell--range {
+  background-image: linear-gradient(var(--ogx-range-background), var(--ogx-range-background));
+  box-shadow:
+    var(--ogx-range-edge-top, 0 0 0 0 transparent),
+    var(--ogx-range-edge-bottom, 0 0 0 0 transparent),
+    var(--ogx-range-edge-left, 0 0 0 0 transparent),
+    var(--ogx-range-edge-right, 0 0 0 0 transparent);
+}
+.ogx__cell--range-top {
+  --ogx-range-edge-top: inset 0 2px 0 0 var(--ogx-range-border);
+}
+.ogx__cell--range-bottom {
+  --ogx-range-edge-bottom: inset 0 -2px 0 0 var(--ogx-range-border);
+}
+.ogx__cell--range-left {
+  --ogx-range-edge-left: inset 2px 0 0 0 var(--ogx-range-border);
+}
+.ogx__cell--range-right {
+  --ogx-range-edge-right: inset -2px 0 0 0 var(--ogx-range-border);
+}
+/* While a pointer drag selects cells, the browser must not select text as well. */
+.ogx--range-dragging,
+.ogx--range-dragging * {
+  -webkit-user-select: none;
+  user-select: none;
+}
 .ogx__cell--editing {
   padding: 0;
   overflow: visible;
@@ -36,6 +66,11 @@
   outline-offset: -2px;
   background-color: var(--ogx-grid-background);
 }
+/* An <Input variant="cell"> editor (the built-in text/number/date ones, or a renderEditCell) takes
+   the full cell height, so its error edge and click area cover the cell. */
+.ogx__cell--editing > .ogx__cell-content:has(.ogx-input-wrapper--cell) {
+  align-self: stretch;
+}
 .ogx__cell--align-left {
   justify-content: flex-start;
   text-align: left;

package/lib/components/Cell/Cell.tsx

@@ -6,6 +6,8 @@ import type { CellColSpanInfo } from '../../hooks/features/useGridSpanning';
 import { GridEditInputCell } from './GridEditInputCell';
 import { CellErrorBoundary } from './CellErrorBoundary';
 import { formatValueByType } from '../../utils/values';
+import { attempt } from '../../utils/attempt';
+import { RANGE_BOTTOM, RANGE_CELL, RANGE_LEFT, RANGE_RIGHT, RANGE_TOP } from '../../utils/cellSelection';
 
 export interface CellProps<R extends GridRowModel = GridRowModel> {
     onCellClick?: (params: GridCellParams<R>) => void;
@@ -46,6 +48,11 @@ export interface CellProps<R extends GridRowModel = GridRowModel> {
     rowMeta?: GridRowMeta;
     /** The error the column's valueGetter threw for this cell (computed by Row); shown as a cell error. */
     valueError?: unknown;
+    /**
+     * Place of the cell in the selected cell range (`cellSelection`), as bit flags: in range 1, top
+     * edge 2, bottom 4, left 8, right 16. 0 or absent: not in a range. @since v3.3
+     */
+    rangeFlags?: number;
 }
 
 interface FormattedValue {
@@ -82,7 +89,8 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         rowSpan: rowSpanProp,
         isHiddenByRowSpan,
         rowMeta,
-        valueError
+        valueError,
+        rangeFlags = 0,
     } = props;
 
     // All hooks must come before any early returns (Rules of Hooks)
@@ -99,12 +107,12 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
     // formatter, written for data rows, is only called for the values they do hold.
     const isSyntheticRow = rowMeta?.isGroupRow === true;
     const { formattedValue, error: formatError } = React.useMemo<FormattedValue>(() => {
-        if (colDef.valueFormatter && !(isSyntheticRow && value == null)) {
-            try {
-                return { formattedValue: colDef.valueFormatter({ value, row, field: colDef.field }) };
-            } catch (error) {
-                return { formattedValue: '', error: error ?? new Error('valueFormatter failed') };
-            }
+        const formatter = colDef.valueFormatter;
+        if (formatter && !(isSyntheticRow && value == null)) {
+            const result = attempt(() => formatter({ value, row, field: colDef.field }));
+            return result.ok
+                ? { formattedValue: result.value }
+                : { formattedValue: '', error: result.error ?? new Error('valueFormatter failed') };
         }
 
         // Without a formatter the column type decides: locale date, Yes / No, singleSelect label.
@@ -113,12 +121,10 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
 
     const resolvedCellClassName = React.useMemo(() => {
         if (!colDef.cellClassName) return '';
-        if (typeof colDef.cellClassName === 'function') {
-            try {
-                return colDef.cellClassName({ value, formattedValue, row, field: colDef.field, colDef, rowIndex, colIndex, rowMeta }) || '';
-            } catch {
-                return '';
-            }
+        const getClassName = colDef.cellClassName;
+        if (typeof getClassName === 'function') {
+            const result = attempt(() => getClassName({ value, formattedValue, row, field: colDef.field, colDef, rowIndex, colIndex, rowMeta }));
+            return (result.ok && result.value) || '';
         }
         return colDef.cellClassName;
     }, [colDef, value, formattedValue, row, rowIndex, colIndex, rowMeta]);
@@ -224,6 +230,11 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
         isPinned && isPinnedEdge && `ogx__cell--pinned-${pinnedPosition}-${pinnedPosition === 'left' ? 'last' : 'first'}`,
         isEditing && 'ogx__cell--editing',
         (rowSpanProp && rowSpanProp > 1) && 'ogx__cell--spanned',
+        (rangeFlags & RANGE_CELL) !== 0 && 'ogx__cell--range',
+        (rangeFlags & RANGE_TOP) !== 0 && 'ogx__cell--range-top',
+        (rangeFlags & RANGE_BOTTOM) !== 0 && 'ogx__cell--range-bottom',
+        (rangeFlags & RANGE_LEFT) !== 0 && 'ogx__cell--range-left',
+        (rangeFlags & RANGE_RIGHT) !== 0 && 'ogx__cell--range-right',
         resolvedCellClassName
     ].filter(Boolean).join(' ');
 
@@ -266,6 +277,7 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
             data-colindex={colIndex}
             {...(colSpan > 1 ? { 'aria-colspan': colSpan } : {})}
             {...(rowSpan > 1 ? { 'aria-rowspan': rowSpan } : {})}
+            {...((rangeFlags & RANGE_CELL) !== 0 ? { 'aria-selected': true } : {})}
         >
             <div className="ogx__cell-content">
                 {isEditing && (onCellValueChange || onValueChange) && onEditStop ? (

package/lib/components/Cell/CellErrorBoundary.tsx

@@ -3,7 +3,10 @@ import React from 'react';
 // Must live at module scope (not inline) so React sees a stable component type.
 // Calling renderFn() here puts the throw one level BELOW CellErrorBoundary,
 // which is required — a component cannot catch errors thrown in its own render().
+// `renderFn` runs the consumer's renderCell, which may call hooks, so it must run on every render:
+// 'use no memo' stops React Compiler from memoizing the call (see GridToolbarSlot's InlineToolbar).
 function CellRenderTarget({ renderFn }: { renderFn: () => React.ReactNode }) {
+    'use no memo';
     return <>{renderFn()}</>;
 }
 

package/lib/components/Cell/GridEditInputCell.css

@@ -28,6 +28,15 @@
     outline: none;
 }
 
+/* The built-in editors render through <Input variant="cell">: keep their own font, colour and
+   padding over the variant's inherited ones (this file loads after Input.css). */
+.ogx-input-wrapper--cell .ogx__edit-input {
+    padding: 0 10px;
+    font-family: var(--ogx-font-family, inherit);
+    font-size: var(--ogx-grid-cell-font-size, 14px);
+    color: var(--ogx-grid-row-text, #1e293b);
+}
+
 /* ── Number input — hide spinners ────────────────────────────────────── */
 .ogx__edit-input--number::-webkit-inner-spin-button,
 .ogx__edit-input--number::-webkit-outer-spin-button {
@@ -54,9 +63,8 @@
     outline: 2px solid var(--ogx-color-primary, #2563eb);
     outline-offset: -2px;
 }
-.ogx__edit-checkbox {
-    width: 18px;
-    height: 18px;
+/* The editor is the shared Checkbox: `.ogx__edit-checkbox` sits on its visually hidden <input>,
+   the drawn box is `.ogx-checkbox__box`. */
+.ogx__edit-boolean .ogx-checkbox-wrapper {
     cursor: pointer;
-    accent-color: var(--ogx-color-primary, #2563eb);
 }

package/lib/components/Cell/GridEditInputCell.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
 import type { KeyboardEvent } from 'react';
 import type { GridColDef, GridRenderEditCellParams } from '../../types';
+import { Input } from '../ui/Input';
+import { Checkbox } from '../ui/Checkbox';
 
 export type GridEditInputCellProps = GridRenderEditCellParams;
 
@@ -34,10 +36,11 @@ function TextEditor({ value, colDef, onValueChange, onCommit, onCancel }: GridEd
     useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
 
     return (
-        <input
+        <Input
             ref={ref}
+            variant="cell"
             type="text"
-            className="ogx__edit-input"
+            inputClassName="ogx__edit-input"
             aria-label={editorLabel(colDef)}
             value={local}
             onChange={e => { setLocal(e.target.value); onValueChange(e.target.value); }}
@@ -54,10 +57,11 @@ function NumberEditor({ value, colDef, onValueChange, onCommit, onCancel }: Grid
     useEffect(() => { ref.current?.focus(); ref.current?.select(); }, []);
 
     return (
-        <input
+        <Input
             ref={ref}
+            variant="cell"
             type="number"
-            className="ogx__edit-input ogx__edit-input--number"
+            inputClassName="ogx__edit-input ogx__edit-input--number"
             aria-label={editorLabel(colDef)}
             value={local}
             onChange={e => {
@@ -83,16 +87,17 @@ function BooleanEditor({ value, colDef, onValueChange, onCommit, onCancel }: Gri
     };
 
     return (
-        <div className="ogx__edit-boolean">
-            <input
+        // Safari does not focus checkboxes on click: mousedown moves focus to the cell, the blur
+        // commits the unchanged value and the editor unmounts before the click toggles it. The
+        // pointer lands on the drawn box (or around it), not the hidden input, so the whole editor
+        // keeps focus where it is.
+        <div className="ogx__edit-boolean" onMouseDown={(e) => e.preventDefault()}>
+            <Checkbox
                 ref={ref}
-                type="checkbox"
-                className="ogx__edit-checkbox"
+                inputClassName="ogx__edit-checkbox"
                 aria-label={editorLabel(colDef)}
                 checked={!!value}
                 onChange={handleChange}
-                // Safari does not focus checkboxes on click: mousedown moves focus to the cell, the
-                // blur commits the unchanged value and the editor unmounts before the click toggles it.
                 onMouseDown={(e) => e.preventDefault()}
                 onBlur={onCommit}
                 onKeyDown={makeKeyDownHandler(onCommit, onCancel, false)}
@@ -126,6 +131,7 @@ function SelectEditor({ value, colDef, onValueChange, onCommit, onCancel }: Grid
     const showEmptyChoice = selectedIndex === -1;
 
     return (
+        // Raw <select>: there is no shared Select component yet.
         <select
             ref={ref}
             className="ogx__edit-select"
@@ -196,10 +202,11 @@ function DateEditor({ value, colDef, onValueChange, onCommit, onCancel }: GridEd
     useEffect(() => { ref.current?.focus(); }, []);
 
     return (
-        <input
+        <Input
             ref={ref}
+            variant="cell"
             type="date"
-            className="ogx__edit-input"
+            inputClassName="ogx__edit-input"
             aria-label={editorLabel(colDef)}
             value={local}
             onChange={e => { setLocal(e.target.value); onValueChange(fromDateInputValue(e.target.value, initialValue)); }}

package/lib/components/CellSelectionStats/CellSelectionStats.css

@@ -0,0 +1,31 @@
+/* Status bar of showCellSelectionStats (v3.3). The area keeps its height while no range is selected. */
+.ogx__cell-selection-stats-area {
+  flex: 0 0 auto;
+  min-height: 32px;
+  border-top: var(--ogx-border-width-thin, 1px) solid var(--ogx-grid-border-color);
+  background: var(--ogx-grid-header-background);
+  color: var(--ogx-grid-header-text);
+  font-size: var(--ogx-font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  box-sizing: border-box;
+}
+.ogx__cell-selection-stats {
+  display: flex;
+  align-items: center;
+  gap: var(--ogx-spacing-lg, 16px);
+  padding: 4px 16px;
+}
+.ogx__cell-selection-stat {
+  display: inline-flex;
+  gap: 6px;
+  white-space: nowrap;
+}
+.ogx__cell-selection-stat-label {
+  opacity: 0.75;
+}
+.ogx__cell-selection-stat-value {
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}

package/lib/components/CellSelectionStats/CellSelectionStats.tsx

@@ -0,0 +1,32 @@
+import { formatAggregationValue } from '../../utils/aggregation';
+import type { GridCellSelectionStatsSlotProps } from '../../types';
+
+export type CellSelectionStatsProps = GridCellSelectionStatsSlotProps & Record<string, unknown>;
+
+/**
+ * The status bar of `showCellSelectionStats`: count of non-empty cells, and the sum and average of
+ * the numeric cells of the selected range. Replace it with `slots.cellSelectionStats`, or wrap it.
+ * @since v3.3
+ */
+export function CellSelectionStats({ count, sum, average }: CellSelectionStatsProps) {
+    return (
+        <div className="ogx__cell-selection-stats">
+            <span className="ogx__cell-selection-stat">
+                <span className="ogx__cell-selection-stat-label">Count</span>
+                <span className="ogx__cell-selection-stat-value" data-stat="count">{count.toLocaleString()}</span>
+            </span>
+            {sum !== null && (
+                <span className="ogx__cell-selection-stat">
+                    <span className="ogx__cell-selection-stat-label">Sum</span>
+                    <span className="ogx__cell-selection-stat-value" data-stat="sum">{formatAggregationValue(sum, 'sum')}</span>
+                </span>
+            )}
+            {average !== null && (
+                <span className="ogx__cell-selection-stat">
+                    <span className="ogx__cell-selection-stat-label">Average</span>
+                    <span className="ogx__cell-selection-stat-value" data-stat="average">{formatAggregationValue(average, 'avg')}</span>
+                </span>
+            )}
+        </div>
+    );
+}

package/lib/components/CellSelectionStats/GridCellSelectionStatsArea.tsx

@@ -0,0 +1,24 @@
+import type React from 'react';
+import { CellSelectionStats } from './CellSelectionStats';
+import type { GridCellSelectionStats } from '../../hooks/core/useGridCellSelection';
+import type { GridApi, GridCellSelectionStatsSlotProps } from '../../types';
+
+interface GridCellSelectionStatsAreaProps {
+    stats: GridCellSelectionStats | null;
+    apiRef: React.MutableRefObject<GridApi>;
+    slot?: React.ComponentType<GridCellSelectionStatsSlotProps & Record<string, unknown>>;
+    slotProps?: Partial<GridCellSelectionStatsSlotProps> & Record<string, unknown>;
+}
+
+/**
+ * The strip under the viewport that holds the status bar. It keeps its height while one cell or
+ * none is selected, so the viewport does not resize each time a range starts or ends.
+ */
+export function GridCellSelectionStatsArea({ stats, apiRef, slot, slotProps }: GridCellSelectionStatsAreaProps) {
+    const Component = slot ?? CellSelectionStats;
+    return (
+        <div className="ogx__cell-selection-stats-area" aria-hidden={stats ? undefined : true}>
+            {stats && <Component apiRef={apiRef} {...stats} {...slotProps} />}
+        </div>
+    );
+}

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.css

@@ -30,6 +30,8 @@
 }
 
 .ogx-column-visibility-panel__search-input {
+  padding: revert;
+  line-height: revert;
   border: none;
   background: none;
   outline: none;
@@ -39,6 +41,18 @@
   flex: 1;
 }
 
+/* The search box renders through the shared Input: the container draws the box. */
+.ogx-column-visibility-panel__search-container .ogx-input-wrapper {
+  flex: 1;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  transition: none;
+}
+.ogx-column-visibility-panel__search-container .ogx-input-wrapper:focus-within {
+  box-shadow: none;
+}
+
 .ogx-column-visibility-panel__search-input::placeholder {
   color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
   opacity: 0.6;