@opencorestack/opengridx 3.3.0 → 3.5.0

package/lib/components/AiAssistant/useSpeechInput.ts

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { attempt } from '../../utils/attempt';
+
+/** The part of the Web Speech API's SpeechRecognition the panel uses. */
+interface SpeechRecognitionLike {
+    lang: string;
+    interimResults: boolean;
+    maxAlternatives: number;
+    onresult: ((event: { results: ArrayLike<ArrayLike<{ transcript: string }>> }) => void) | null;
+    onend: (() => void) | null;
+    onerror: (() => void) | null;
+    start: () => void;
+    stop: () => void;
+    abort: () => void;
+}
+
+type SpeechRecognitionConstructor = new () => SpeechRecognitionLike;
+
+function getSpeechRecognition(): SpeechRecognitionConstructor | null {
+    if (typeof window === 'undefined') return null;
+    const w = window as unknown as { SpeechRecognition?: SpeechRecognitionConstructor; webkitSpeechRecognition?: SpeechRecognitionConstructor };
+    return w.SpeechRecognition ?? w.webkitSpeechRecognition ?? null;
+}
+
+/**
+ * Dictation for the prompt input. The browser asks for the microphone only when `toggle` starts it
+ * (a click), never on load; without speech recognition `toggle` does nothing.
+ */
+export function useSpeechInput(onText: (text: string) => void): { listening: boolean; toggle: () => void } {
+    const [listening, setListening] = useState(false);
+    const recognitionRef = useRef<SpeechRecognitionLike | null>(null);
+    const onTextRef = useRef(onText);
+    useLayoutEffect(() => {
+        onTextRef.current = onText;
+    });
+
+    useEffect(() => () => {
+        const recognition = recognitionRef.current;
+        recognitionRef.current = null;
+        if (recognition) attempt(() => recognition.abort());
+    }, []);
+
+    const toggle = useCallback(() => {
+        const running = recognitionRef.current;
+        if (running) {
+            attempt(() => running.stop());
+            return;
+        }
+        const Recognition = getSpeechRecognition();
+        if (!Recognition) return;
+        const created = attempt(() => new Recognition());
+        if (!created.ok) return;
+        const recognition = created.value;
+        recognition.lang = typeof navigator === 'undefined' ? 'en-US' : navigator.language;
+        recognition.interimResults = false;
+        recognition.maxAlternatives = 1;
+        recognition.onresult = (event) => {
+            const first = event.results[0];
+            const transcript = first && first[0] ? first[0].transcript : '';
+            if (transcript) onTextRef.current(transcript);
+        };
+        const done = () => {
+            if (recognitionRef.current === recognition) recognitionRef.current = null;
+            setListening(false);
+        };
+        recognition.onend = done;
+        recognition.onerror = done;
+        recognitionRef.current = recognition;
+        setListening(true);
+        if (!attempt(() => recognition.start()).ok) done();
+    }, []);
+
+    return { listening, toggle };
+}

package/lib/components/Cell/Cell.css

@@ -52,6 +52,34 @@
 .ogx__cell--range-right {
   --ogx-range-edge-right: inset -2px 0 0 0 var(--ogx-range-border);
 }
+/*
+ * Fill handle (v3.5): the square on the bottom-right cell of the range. The cell clips its overflow,
+ * so the 24px hit area lies inside the corner and the visible square sits in its corner.
+ * touch-action: none lets a touch drag on it fill instead of scrolling.
+ */
+.ogx__cell-fill-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: 24px;
+  height: 24px;
+  max-width: 100%;
+  max-height: 100%;
+  cursor: crosshair;
+  touch-action: none;
+  z-index: 1;
+}
+.ogx__cell-fill-handle::after {
+  content: '';
+  position: absolute;
+  right: 1px;
+  bottom: 1px;
+  width: 7px;
+  height: 7px;
+  box-sizing: border-box;
+  background-color: var(--ogx-fill-handle-color, var(--ogx-range-border));
+  border: 1px solid var(--ogx-grid-background, #fff);
+}
 /* While a pointer drag selects cells, the browser must not select text as well. */
 .ogx--range-dragging,
 .ogx--range-dragging * {
@@ -66,6 +94,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

@@ -7,7 +7,7 @@ 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';
+import { RANGE_BOTTOM, RANGE_CELL, RANGE_FILL_HANDLE, RANGE_LEFT, RANGE_RIGHT, RANGE_TOP } from '../../utils/cellSelection';
 
 export interface CellProps<R extends GridRowModel = GridRowModel> {
     onCellClick?: (params: GridCellParams<R>) => void;
@@ -50,7 +50,8 @@ export interface CellProps<R extends GridRowModel = GridRowModel> {
     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
+     * edge 2, bottom 4, left 8, right 16; 32 draws the fill handle (v3.5). 0 or absent: not in a range.
+     * @since v3.3
      */
     rangeFlags?: number;
 }
@@ -341,6 +342,9 @@ function CellImpl<R extends GridRowModel = GridRowModel>(props: CellProps<R>) {
                     formattedValue
                 )}
             </div>
+            {(rangeFlags & RANGE_FILL_HANDLE) !== 0 && !isEditing && (
+                <div className="ogx__cell-fill-handle" aria-hidden="true" />
+            )}
         </div>
     );
 }

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,10 @@ 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 { useGridFillHandle } from '../../hooks/core/useGridFillHandle';
 import { useGridSpanning } from '../../hooks/features/useGridSpanning';
 import { useGridSpanRowWindow, useGridSpanColumnWindow } from '../../hooks/features/useGridSpanRenderWindow';
 import { useColumnGroupReorderGuard } from '../../hooks/features/useColumnGroupReorderGuard';
@@ -40,7 +44,7 @@ import { GridLoadingOverlay } from './GridLoadingOverlay';
 import { GridPinnedRows } from './GridPinnedRows';
 import { GridVirtualRows } from './GridVirtualRows';
 import { GridStandaloneColumnPanel } from './GridStandaloneColumnPanel';
-import { resolveGridModes, EMPTY_ROW_GROUPING_MODEL } from '../../utils/gridModes';
+import { resolveGridModes } from '../../utils/gridModes';
 import { useGridGroupingColumn } from '../../hooks/core/useGridGroupingColumn';
 import { useGridRowIdOf, getDefaultRowId } from '../../hooks/core/useGridRowIdOf';
 import { useGridApiRefBinding } from '../../hooks/core/useGridApiRefBinding';
@@ -62,6 +66,9 @@ import { GridPaginationArea } from './GridPaginationArea';
 import { GridLiveRegion } from './GridLiveRegion';
 import { useGridAriaRows } from '../../hooks/core/useGridAriaRows';
 import { useGridToolbarProps } from '../../hooks/core/useGridToolbarProps';
+import { useGridAiAssistant } from '../../hooks/features/useGridAiAssistant';
+import { GridAiAssistantArea } from '../AiAssistant/GridAiAssistantArea';
+import { DEFAULT_HEADER_FILTER_HEIGHT } from '../../utils/headerFilters';
 import type { DataGridProps, DataGridUntypedColumnsProps, GridValidRowModel, GridRowModel, GridRowId, GridColDef } from '../../types';
 
 /**
@@ -80,6 +87,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         rowHeight: rowHeightProp,
         headerHeight: headerHeightProp,
         wrapHeaderText = false,
+        headerFilters = false,
+        headerFilterHeight = DEFAULT_HEADER_FILTER_HEIGHT,
         autoHeight = false,
         density,
         checkboxSelection = false,
@@ -90,6 +99,14 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         cellSelectionModel: propCellSelectionModel,
         onCellSelectionModelChange,
         showCellSelectionStats = false,
+        disableClipboardPaste = false,
+        disableRangeClear = false,
+        onClipboardPaste,
+        onBeforeClipboardPaste,
+        undoRedo = false,
+        disableFillHandle = false,
+        onFill,
+        onHistoryChange,
         rowSelectionModel: propRowSelectionModel,
         onRowSelectionModelChange: propOnRowSelectionModelChange,
         onRowClick,
@@ -129,6 +146,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         groupingColDef,
 
         rowGroupingModel: propRowGroupingModel,
+        onRowGroupingModelChange,
 
         aggregationModel: propAggregationModel,
         onAggregationModelChange,
@@ -168,12 +186,14 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         localeText,
         apiRef: propApiRef,
         overscanRowCount = 3,
+        aiAssistant,
+        onAiAssistantApply,
+        onAiAssistantError,
     } = props;
     // Equal inline column definitions keep one identity, so the row passes memoised on it do not re-run.
     const columns = useStableColumns(columnsProp);
 
     const effectiveNoRowsLabel = localeText?.noRowsLabel ?? noRowsLabel;
-    const rowGroupingModel = propRowGroupingModel || EMPTY_ROW_GROUPING_MODEL;
 
     const controlledState = useGridControlledState({
         initialState,
@@ -183,6 +203,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         onFilterModelChange,
         aggregationModel: propAggregationModel,
         onAggregationModelChange,
+        rowGroupingModel: propRowGroupingModel,
+        onRowGroupingModelChange,
         columnVisibilityModel: propColumnVisibilityModel,
         onColumnVisibilityModelChange,
         pinnedColumns: propPinnedColumns,
@@ -204,6 +226,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         selectedRowIds: selectionModelRowIds,
         handleRowSelectionModelChange,
         density: effectiveDensity,
+        rowGroupingModel, handleRowGroupingModelChange,
     } = controlledState;
 
     const pivot = useGridPivot({
@@ -217,6 +240,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         hierarchyRequested: treeData || rowGroupingModel.length > 0,
     });
     const isPivotActive = pivot.isActive;
+    // The header filter row filters the source columns; pivot columns are generated, so it is off then.
+    const showHeaderFilters = headerFilters && !isPivotActive;
     const {
         rowReordering, hierarchyRowGroupingModel, isTreeDataRequested, isTreeData,
         isRowGrouping, isHierarchyEnabled, hasGroupingColumn, pagination, listView,
@@ -271,7 +296,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 +320,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 +343,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
@@ -437,6 +475,14 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
             dataRows,
         }),
         visibleColumns: renderOrderedColumns as unknown as GridColDef[],
+        rowGroupingModel,
+        onRowGroupingModelChange: handleRowGroupingModelChange,
+        aggregationModel,
+        onAggregationModelChange: handleAggregationModelChange,
+        columnVisibilityModel,
+        onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
+        pivotModel: currentPivotModel,
+        onPivotModelChange: handlePivotModelChange,
     });
 
     // Indices address the consumer's own rows, whatever the sort, filter, page or pinning.
@@ -574,6 +620,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         pinExpandColumn,
         rowHeight: effectiveRowHeight,
         cellSelection: cellSelection.keyboard,
+        headerFilters: showHeaderFilters,
     });
 
     const { handleCellClick, handleHeaderClick } = useGridPointerFocusHandlers<R>({
@@ -590,6 +637,61 @@ 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,
+    });
+
+    // Fill handle (cellSelection): drag the range's corner, Ctrl/Cmd+D and Ctrl/Cmd+R.
+    const fillHandle = useGridFillHandle<R>({
+        containerRef, viewportRef,
+        selection: cellSelection,
+        disableFillHandle,
+        isEditing: editingHandlers.editingCell !== null,
+        allRenderableRows,
+        getRowId: getRowIdOf,
+        navigationColumns: navigationColumns as unknown as GridColDef<R>[],
+        columnIndexMap,
+        isCellEditable,
+        rowMetaMap,
+        getSpanOrigin: spanning.getSpanOrigin,
+        batchEdit,
+        onFill,
+    });
+
     const { handleHideColumn, handlePinColumn } = useGridColumnMenuHandlers({
         columnVisibilityModel,
         onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
@@ -599,6 +701,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
 
     const ariaRows = useGridAriaRows({
         columnGroupingModel,
+        headerFilterRow: showHeaderFilters,
         pinnedTopCount: pinnedTopRows.length,
         pinnedBottomCount: pinnedBottomRows.length,
         pagination,
@@ -653,6 +756,15 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const columnsPanel = useGridColumnsPanel();
     useGridStylesheetWarning(containerRef);
 
+    // The aiAssistant prompt panel (v3.5): applies validated replies through apiRef; apiRef.openAiAssistant.
+    const aiAssistantPanel = useGridAiAssistant({
+        apiRef,
+        options: aiAssistant,
+        columns: activeColumns as unknown as GridColDef[],
+        onApply: onAiAssistantApply,
+        onError: onAiAssistantError,
+    });
+
     const NoRowsOverlaySlot = slots?.noRowsOverlay;
     const LoadingOverlaySlot = slots?.loadingOverlay;
     const loadingOverlay = LoadingOverlaySlot ? <LoadingOverlaySlot {...slotProps?.loadingOverlay} /> : undefined;
@@ -683,6 +795,12 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         disableColumnReorder, columnGroupingModel, moveColumn, resetColumnOrder,
         forceColumnsOpen: columnsPanel.toolbarPanelRequested,
         onColumnsPanelClose: columnsPanel.closeToolbarPanel,
+        aiAssistantEnabled: aiAssistantPanel.enabled,
+        aiAssistantOpen: aiAssistantPanel.open,
+        onAiAssistantToggle: aiAssistantPanel.togglePanel,
+        aiAssistantLabel: localeText?.aiAssistantButton,
+        forceFiltersOpen: columnsPanel.toolbarFiltersRequested,
+        onFiltersPanelClose: columnsPanel.closeToolbarFiltersPanel,
     });
 
     // Props the row renderers (top-pinned, centre and bottom-pinned rows) all take.
@@ -704,6 +822,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         rowMetaMap,
         cellRange: cellSelection.displayRange,
         cellRangeHasRowSpan: cellSelection.hasRowSpan,
+        fillHandle: fillHandle.handle,
     };
 
     return (
@@ -714,7 +833,8 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 ...style,
                 height: height ?? style?.height,
                 '--ogx-row-height': `${effectiveRowHeight}px`,
-                '--ogx-header-height': `${headerHeight}px`
+                '--ogx-header-height': `${headerHeight}px`,
+                ...(showHeaderFilters ? { '--ogx-header-filter-height': `${headerFilterHeight}px` } : undefined),
             } as unknown as React.CSSProperties}
             aria-busy={effectiveLoading}
         >
@@ -724,6 +844,14 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 </GridToolbarHostContext.Provider>
             )}
 
+            {aiAssistantPanel.panelProps && (
+                <GridAiAssistantArea
+                    panelProps={aiAssistantPanel.panelProps}
+                    slot={slots?.aiAssistantPanel}
+                    slotProps={slotProps?.aiAssistantPanel}
+                />
+            )}
+
             {/* Used by the column menu's Manage columns when no GridToolbar can show the panel */}
             <GridStandaloneColumnPanel<R>
                 isOpen={columnsPanel.standalonePanelOpen}
@@ -852,6 +980,10 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                                 onPinColumn={handlePinColumn}
                                 wrapHeaderText={wrapHeaderText}
                                 headerHeight={headerHeight}
+                                headerFilters={showHeaderFilters}
+                                filterModel={filterModel}
+                                onFilterModelChange={handleFilterModelChange}
+                                onOpenFilterPanel={columnsPanel.openFiltersPanel}
                             />
 
                             <GridPinnedRows<R>
@@ -975,6 +1107,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
                 dataRowCount={dataRows.length}
                 filterModel={filterModel}
                 cellSelectionAnnouncement={cellSelection.announcement}
+                aiAssistantAnnouncement={aiAssistantPanel.announcement}
             />
 
             {showLoadingOverRows && (

package/lib/components/DataGrid/GridLiveRegion.tsx

@@ -13,13 +13,15 @@ interface GridLiveRegionProps {
     filterModel: GridFilterModel | undefined;
     /** The size of the selected cell range (`cellSelection`), already debounced. */
     cellSelectionAnnouncement?: string;
+    /** The `aiAssistant` status line ("Thinking…", "Applied 3 changes", an error). */
+    aiAssistantAnnouncement?: string;
 }
 
 /**
  * Polite status announcements: loading, a load error, no rows, or the row count of an active filter;
- * and the size of the selected cell range.
+ * the size of the selected cell range; and the AI assistant's status.
  */
-export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount, dataRowCount, filterModel, cellSelectionAnnouncement }: GridLiveRegionProps) {
+export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount, dataRowCount, filterModel, cellSelectionAnnouncement, aiAssistantAnnouncement }: GridLiveRegionProps) {
     return (
         <div className="ogx-aria-live-status" role="status" aria-live="polite">
             {loading ? 'Loading data...' : ''}
@@ -32,6 +34,7 @@ export function GridLiveRegion({ loading, error, noRowsLabel, filteredRowCount,
                         : ''
             )}
             {cellSelectionAnnouncement ? <span className="ogx-aria-live-status__cells"> {cellSelectionAnnouncement}</span> : null}
+            {aiAssistantAnnouncement ? <span className="ogx-aria-live-status__ai"> {aiAssistantAnnouncement}</span> : null}
         </div>
     );
 }