@opencorestack/opengridx 3.3.0 → 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

@@ -66,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/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/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;

package/lib/components/ColumnVisibilityPanel/ColumnVisibilityPanel.tsx

@@ -1,5 +1,6 @@
 import { useState, useMemo, useRef, useId } from 'react';
 import { Checkbox } from '../ui/Checkbox';
+import { Input } from '../ui/Input';
 import type { GridColDef, GridRowModel, GridValidRowModel } from '../../types';
 
 
@@ -115,9 +116,9 @@ export function ColumnVisibilityPanel<R extends GridValidRowModel = GridRowModel
             <div className="ogx-column-visibility-panel__search-section">
                 <div className="ogx-column-visibility-panel__search-container">
                     <SearchIcon />
-                    <input
+                    <Input
                         autoComplete="off"
-                        className="ogx-column-visibility-panel__search-input"
+                        inputClassName="ogx-column-visibility-panel__search-input"
                         placeholder="Search"
                         value={searchQuery}
                         onChange={(e) => setSearchQuery(e.target.value)}

package/lib/components/DataGrid/DataGrid.tsx

@@ -27,6 +27,9 @@ import { useDataGrid } from '../../hooks/core/useDataGrid';
 import { useRowReorder } from '../../hooks/useRowReorder';
 import { useGridHierarchy } from '../../hooks/core/useGridHierarchy';
 import { useGridEditing } from '../../hooks/features/useGridEditing';
+import { useGridBatchEdit } from '../../hooks/features/useGridBatchEdit';
+import { useGridClipboardPaste } from '../../hooks/core/useGridClipboardPaste';
+import { useGridUndoRedo, useGridEditCommitChannel, UNDO_HISTORY_LIMIT } from '../../hooks/core/useGridUndoRedo';
 import { useGridSpanning } from '../../hooks/features/useGridSpanning';
 import { useGridSpanRowWindow, useGridSpanColumnWindow } from '../../hooks/features/useGridSpanRenderWindow';
 import { useColumnGroupReorderGuard } from '../../hooks/features/useColumnGroupReorderGuard';
@@ -90,6 +93,12 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         cellSelectionModel: propCellSelectionModel,
         onCellSelectionModelChange,
         showCellSelectionStats = false,
+        disableClipboardPaste = false,
+        disableRangeClear = false,
+        onClipboardPaste,
+        onBeforeClipboardPaste,
+        undoRedo = false,
+        onHistoryChange,
         rowSelectionModel: propRowSelectionModel,
         onRowSelectionModelChange: propOnRowSelectionModelChange,
         onRowClick,
@@ -271,7 +280,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         syncRows: !dataSource,
     });
     const {
-        state, apiRef, setRows, replaceRow, setColumns, setDimensions, setDataSourceLoading, setDataSourceError,
+        state, apiRef, setRows, replaceRows, setColumns, setDimensions, setDataSourceLoading, setDataSourceError,
         setRowCount
     } = gridData;
 
@@ -295,6 +304,18 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         getAggregationPosition, columnLookup, filterMode, sortingMode,
     });
 
+    // Commits (single edits and batch edits) reach the undo/redo history created further down.
+    const editCommitChannel = useGridEditCommitChannel();
+    // Batch edits (paste, range clear, undo, redo): one processRowUpdate per row, one store update.
+    const batchEdit = useGridBatchEdit<R>({
+        rowsLookup: state.rows.idRowsLookup as unknown as ReadonlyMap<GridRowId, R>,
+        columns: activeColumns,
+        processRowUpdate,
+        onProcessRowUpdateError,
+        replaceRows: replaceRows as unknown as (rows: ReadonlyMap<GridRowId, R>) => void,
+        onCommitted: editCommitChannel.emit,
+    });
+
     const editingHandlers = useGridEditing({
         rows: effectiveRows,
         getRowId: getRowIdOf,
@@ -306,8 +327,9 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
             // after an awaited processRowUpdate, by which time the rows prop (or a dataSource
             // fetch) may have replaced the rows this render saw. The returned row is stored as is
             // (the grid never writes an id onto it), even if it does not carry its key itself.
-            replaceRow(rowId, updatedRow);
+            batchEdit.storeRow(rowId, updatedRow);
         },
+        onCommitted: (changes) => editCommitChannel.emit(changes, 'edit'),
     });
 
     // The selection without ids of removed rows. Only client-owned rows are pruned: a server page
@@ -590,6 +612,44 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         containerRef,
     });
 
+    // Ctrl/Cmd+V and Delete on a range (cellSelection); apiRef.pasteText.
+    useGridClipboardPaste<R>({
+        apiRef, containerRef, viewportRef,
+        selection: cellSelection,
+        disableClipboardPaste, disableRangeClear,
+        focusedCell,
+        allRenderableRows,
+        getRowId: getRowIdOf,
+        navigationColumns: navigationColumns as unknown as GridColDef<R>[],
+        isCellEditable,
+        rowMetaMap,
+        getSpanOrigin: spanning.getSpanOrigin,
+        isEditing: editingHandlers.editingCell !== null,
+        batchEdit,
+        onClipboardPaste,
+        onBeforeClipboardPaste,
+    });
+
+    // Undo / redo (undoRedo): history of committed edits, keys and apiRef methods.
+    useGridUndoRedo<R>({
+        apiRef,
+        enabled: Boolean(undoRedo),
+        limit: (typeof undoRedo === 'object' && undoRedo.limit) || UNDO_HISTORY_LIMIT,
+        onHistoryChange,
+        channel: editCommitChannel,
+        batchEdit,
+        isEditing: editingHandlers.editingCell !== null,
+        containerRef, viewportRef,
+        selection: cellSelection,
+        setFocusedCell,
+        allRenderableRows,
+        getRowId: getRowIdOf,
+        navigationColumns: navigationColumns as unknown as GridColDef<R>[],
+        layout,
+        rowHeight: effectiveRowHeight,
+        pinnedTopRowCount: pinnedTopRows.length,
+    });
+
     const { handleHideColumn, handlePinColumn } = useGridColumnMenuHandlers({
         columnVisibilityModel,
         onColumnVisibilityModelChange: handleColumnVisibilityModelChange,

package/lib/components/FilterPanel/FilterPanel.css

@@ -115,11 +115,25 @@
   border-radius: var(--ogx-border-radius-sm);
   font-family: var(--ogx-font-family);
   font-size: var(--ogx-font-size-xs);
+  line-height: revert;
   background: var(--ogx-grid-background);
   color: var(--ogx-grid-row-text);
   outline: none;
   transition: border-color 0.15s, box-shadow 0.15s;
 }
+/* The text/date value box renders through the shared Input: the <input> keeps its own border,
+   so the wrapper draws nothing and only takes the input's place in the row. */
+.ogx-filter__controls .ogx-input-wrapper {
+  flex: 1;
+  min-width: 60px;
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  transition: none;
+}
+.ogx-filter__controls .ogx-input-wrapper:focus-within {
+  box-shadow: none;
+}
 .ogx-filter__value-input::placeholder {
   color: var(--ogx-overlay-text, var(--ogx-color-gray-400));
   opacity: 0.6;

package/lib/components/FilterPanel/FilterPanel.tsx

@@ -8,6 +8,7 @@ import type {
 } from '../../types';
 import { getOperatorsForType, NO_VALUE_OPERATORS } from '../../utils/filtering';
 import { toLocalDateString } from '../../utils/values';
+import { Input } from '../ui/Input';
 
 
 export interface FilterPanelProps {
@@ -251,10 +252,10 @@ const FilterRow: React.FC<{
         );
     } else if (showValue) {
         valueControl = (
-            <input
+            <Input
                 id={`${filterId}-val`}
                 name={`filter-val-${col.field}`}
-                className={valueClassName}
+                inputClassName={valueClassName}
                 type={col.type === 'date' ? 'date' : 'text'}
                 value={draft ?? toInputText(item?.value, col)}
                 onChange={(e) => setDraft(e.target.value)}

package/lib/components/ListView/ListView.css

@@ -65,11 +65,9 @@
   border-right: var(--ogx-border-width-thin) solid var(--ogx-grid-border-color);
 }
 
-.ogx-list-view__checkbox input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
+/* The row checkbox is the shared Checkbox (its <input> is visually hidden). */
+.ogx-list-view__checkbox .ogx-checkbox-wrapper {
   cursor: pointer;
-  accent-color: var(--ogx-color-primary);
 }
 
 /* ─── Cell content area ───────────────────────────────────────────────────── */

package/lib/components/ListView/ListViewRow.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { formatValueByType, getCellValue, getFormattedValue } from '../../utils/values';
 import { ExpandIcon } from '../ui/ExpandIcon';
+import { Checkbox } from '../ui/Checkbox';
 import { CellErrorBoundary } from '../Cell/CellErrorBoundary';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
 import type { GridColDef, GridRowModel, GridRowId, GridRowMeta, GridListViewColDef, GridRenderCellParams } from '../../types';
@@ -92,8 +93,7 @@ export function ListViewRow<R extends GridRowModel = GridRowModel>({
         >
             {checkboxSelection && (
                 <div className="ogx-list-view__checkbox" onClick={(e) => e.stopPropagation()}>
-                    {!isSyntheticRow && <input
-                        type="checkbox"
+                    {!isSyntheticRow && <Checkbox
                         checked={isSelected}
                         onChange={handleCheckboxChange}
                         aria-label={`Select row ${id}`}

package/lib/components/Toolbar/GlobalSearch.css

@@ -74,6 +74,7 @@
     font-family: var(--ogx-font-family, system-ui, sans-serif);
     font-size: var(--ogx-font-size-sm, 13px);
     color: var(--ogx-toolbar-input-text, var(--ogx-grid-row-text, #1e293b));
+    line-height: revert;
     outline: none;
     opacity: 0;
     pointer-events: none;
@@ -88,6 +89,21 @@
     font-size: var(--ogx-font-size-sm, 13px);
 }
 
+/* The input renders through the shared Input: its wrapper is the flex item and the container
+   draws the box, so the wrapper has none of its own. */
+.ogx-global-search .ogx-input-wrapper {
+    flex: 1 1 auto;
+    min-width: 0;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+    background: transparent;
+    transition: none;
+}
+.ogx-global-search .ogx-input-wrapper:focus-within {
+    box-shadow: none;
+}
+
 /* ─── Clear button ────────────────────────────────────────────────────────── */
 .ogx-global-search__clear {
     position: absolute;