@opencorestack/opengridx 3.5.1 → 3.7.0

package/lib/components/DataGrid/DataGrid.tsx

@@ -4,48 +4,31 @@ import { useGridKeyboardNavigation } from '../../hooks/core/useGridKeyboardNavig
 import { useGridControlledState } from '../../hooks/core/useGridControlledState';
 import { useGridThemeDimensions } from '../../hooks/core/useGridThemeDimensions';
 import { useGridRowPipeline, type GridRowPipelineResult } from '../../hooks/core/useGridRowPipeline';
-import { useGridMaxContentHeight } from '../../hooks/core/useGridMaxContentHeight';
 import { countReachableRows } from '../../utils/maxElementHeight';
-import { useGridVirtualization } from '../../hooks/core/useGridVirtualization';
 import { useGridColumns } from '../../hooks/core/useGridColumns';
-import { useGridVisibleRows } from '../../hooks/core/useGridVisibleRows';
-import { useGridViewport } from '../../hooks/core/useGridViewport';
 import { useGridDetailPanel } from '../../hooks/core/useGridDetailPanel';
 import { useGridStateSnapshot } from '../../hooks/core/useGridStateSnapshot';
-import { useGridDevWarnings, useGridStylesheetWarning } from '../../hooks/core/useGridDevWarnings';
-import { useGridRowInteractions } from '../../hooks/core/useGridRowInteractions';
+import { useGridDevWarnings } from '../../hooks/core/useGridDevWarnings';
 import { useGridLiveRowSelection } from '../../hooks/core/useGridLiveRowSelection';
-import { useGridApiMethods } from '../../hooks/core/useGridApiMethods';
+import { useGridSelectionAndStateApi } from '../../hooks/core/useGridSelectionAndStateApi';
 import { useGridColumnLookup } from '../../hooks/core/useGridColumnLookup';
 import { useGridPageCorrection } from '../../hooks/core/useGridPageCorrection';
-import { useGridColumnsPanel } from '../../hooks/core/useGridColumnsPanel';
-import { GridToolbarHostContext } from '../../hooks/core/gridToolbarHostContext';
-import { GridToolbarSlot } from './GridToolbarSlot';
-import { GridAggregationFooter } from './GridAggregationFooter';
-import { GridEmptyState } from './GridEmptyState';
-import { GridErrorOverlay } from './GridErrorOverlay';
-import { Header } from '../Header/Header';
 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 { useGridRenderWindow } from '../../hooks/core/useGridRenderWindow';
+import { useGridRangeEditing } from '../../hooks/core/useGridRangeEditing';
+import { useGridScrollViewport } from '../../hooks/core/useGridScrollViewport';
+import { useGridViewApis } from '../../hooks/core/useGridViewApis';
+import { useGridEditPipeline } from '../../hooks/core/useGridEditPipeline';
 import { useGridSpanning } from '../../hooks/features/useGridSpanning';
-import { useGridSpanRowWindow, useGridSpanColumnWindow } from '../../hooks/features/useGridSpanRenderWindow';
 import { useColumnGroupReorderGuard } from '../../hooks/features/useColumnGroupReorderGuard';
 import { useGridDataSource } from '../../hooks/features/useGridDataSource';
 import { useServerTreeChildren } from '../../hooks/features/useServerTreeChildren';
 import { useAggregation, useServerAggregationResults } from '../../hooks/features/useAggregation';
 import { useGridPivot } from '../../hooks/features/useGridPivot';
 import { isServerDrivenDataSource } from '../../utils/dataSource';
-import { GridListView } from './GridListView';
-import { GridLoadingOverlay } from './GridLoadingOverlay';
-import { GridPinnedRows } from './GridPinnedRows';
-import { GridVirtualRows } from './GridVirtualRows';
-import { GridStandaloneColumnPanel } from './GridStandaloneColumnPanel';
+import { GridRoot, type GridRootProps } from './GridRoot';
 import { resolveGridModes } from '../../utils/gridModes';
 import { useGridGroupingColumn } from '../../hooks/core/useGridGroupingColumn';
 import { useGridRowIdOf, getDefaultRowId } from '../../hooks/core/useGridRowIdOf';
@@ -55,21 +38,11 @@ import { NO_AGGREGATION_MODEL } from '../../utils/aggregation';
 import { isSyntheticRowId } from '../../utils/syntheticRows';
 import { useStableColumns } from '../../hooks/core/useStableColumns';
 import { useGridAggregationApi } from '../../hooks/core/useGridAggregationApi';
-import { useGridClipboardApi } from '../../hooks/core/useGridClipboardApi';
-import { useGridScrollToIndexesApi } from '../../hooks/core/useGridScrollToIndexesApi';
-import { useGridColumnAutosize } from '../../hooks/core/useGridColumnAutosize';
 import { useGridCellSelection } from '../../hooks/core/useGridCellSelection';
-import { useGridCellSelectionApi } from '../../hooks/core/useGridCellSelectionApi';
-import { GridCellSelectionStatsArea } from '../CellSelectionStats/GridCellSelectionStatsArea';
 import { useGridSortHandlers, useGridColumnMenuHandlers } from '../../hooks/core/useGridHeaderHandlers';
 import { useGridKeyboardMode, useGridPointerFocusHandlers } from '../../hooks/core/useGridFocusHandlers';
-import { getPaginationRowCount, pickPaginationLocaleText } from '../../utils/pagination';
-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 { getPaginationRowCount } from '../../utils/pagination';
+import { useGridToolbarStack } from '../../hooks/core/useGridToolbarStack';
 import { DEFAULT_HEADER_FILTER_HEIGHT } from '../../utils/headerFilters';
 import type { DataGridProps, DataGridUntypedColumnsProps, GridValidRowModel, GridRowModel, GridRowId, GridColDef } from '../../types';
 
@@ -83,114 +56,41 @@ export function DataGrid<R extends GridValidRowModel = GridRowModel>(props: Data
 // public signatures, and a consumer's row objects are passed through untouched.
 export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridProps<R>): React.JSX.Element {
     const {
-        rows,
-        columns: columnsProp,
-        getRowId,
-        rowHeight: rowHeightProp,
-        headerHeight: headerHeightProp,
-        wrapHeaderText = false,
-        headerFilters = false,
-        headerFilterHeight = DEFAULT_HEADER_FILTER_HEIGHT,
-        autoHeight = false,
-        density,
-        checkboxSelection = false,
-        disableRowSelectionOnClick = false,
-        disableMultipleRowSelection = false,
-        disableClipboardCopy = false,
-        cellSelection: cellSelectionProp = false,
-        cellSelectionModel: propCellSelectionModel,
-        onCellSelectionModelChange,
-        showCellSelectionStats = false,
-        disableClipboardPaste = false,
-        disableRangeClear = false,
-        onClipboardPaste,
-        onBeforeClipboardPaste,
-        undoRedo = false,
-        disableFillHandle = false,
-        onFill,
-        onHistoryChange,
-        rowSelectionModel: propRowSelectionModel,
-        onRowSelectionModelChange: propOnRowSelectionModelChange,
-        onRowClick,
-        onRowDoubleClick,
-        onCellClick,
-
-        filterModel: propFilterModel,
-        onFilterModelChange,
-        sortModel: propSortModel,
-        onSortModelChange,
-        pagination: propPagination = false,
-        paginationModel,
-        onPaginationModelChange,
+        rows, columns: columnsProp, getRowId, rowHeight: rowHeightProp, headerHeight: headerHeightProp,
+        wrapHeaderText = false, headerFilters = false, headerFilterHeight = DEFAULT_HEADER_FILTER_HEIGHT,
+        autoHeight = false, density, height, className = '', style, ariaLabel, loading = false,
+        // Selection
+        checkboxSelection = false, disableRowSelectionOnClick = false, disableMultipleRowSelection = false,
+        disableClipboardCopy = false, cellSelection: cellSelectionProp = false,
+        cellSelectionModel: propCellSelectionModel, onCellSelectionModelChange, showCellSelectionStats = false,
+        rowSelectionModel: propRowSelectionModel, onRowSelectionModelChange: propOnRowSelectionModelChange,
+        onRowClick, onRowDoubleClick, onCellClick,
+        // Filter, sort, pagination, pinning
+        filterModel: propFilterModel, onFilterModelChange, sortModel: propSortModel, onSortModelChange,
+        pagination: propPagination = false, paginationModel, onPaginationModelChange,
         pageSizeOptions = [10, 25, 50, 100],
-        pinnedColumns: propPinnedColumns,
-        onPinnedColumnsChange,
-        pinnedRows,
-
-        getDetailPanelContent,
-        getDetailPanelHeight,
-        detailPanelExpandedRowIds: controlledExpandedRowIds,
-        onDetailPanelExpandedRowIdsChange,
-        pinCheckboxColumn = true,
-        pinExpandColumn = true,
-        disableColumnReorder = false,
-        columnOrder,
-        onColumnOrderChange,
-        onColumnOrderModelChange,
-        height,
-        rowReordering: rowReorderingProp = false,
-        onRowOrderChange,
-        loading = false,
-
-        treeData = false,
-        getTreeDataPath,
-        defaultGroupingExpansionDepth,
-        groupingColDef,
-
-        rowGroupingModel: propRowGroupingModel,
-        onRowGroupingModelChange,
-
-        aggregationModel: propAggregationModel,
-        onAggregationModelChange,
-        getAggregationPosition,
-
-        isCellEditable,
-        processRowUpdate,
-        onProcessRowUpdateError,
-
-        dataSource,
-        multiSort = false,
-        sortingMode = 'client',
-        filterMode = 'client',
-        paginationMode = 'client',
+        pinnedColumns: propPinnedColumns, onPinnedColumnsChange, pinnedRows,
+        // Detail panel, column order, row reorder
+        getDetailPanelContent, getDetailPanelHeight, detailPanelExpandedRowIds: controlledExpandedRowIds,
+        onDetailPanelExpandedRowIdsChange, pinCheckboxColumn = true, pinExpandColumn = true,
+        disableColumnReorder = false, columnOrder, onColumnOrderChange, onColumnOrderModelChange,
+        rowReordering: rowReorderingProp = false, onRowOrderChange,
+        // Tree data, row grouping, aggregation
+        treeData = false, getTreeDataPath, defaultGroupingExpansionDepth, groupingColDef,
+        rowGroupingModel: propRowGroupingModel, onRowGroupingModelChange,
+        aggregationModel: propAggregationModel, onAggregationModelChange, getAggregationPosition,
+        // Editing (paste, undo/redo and fill handle props are read by useGridRangeEditing)
+        isCellEditable, processRowUpdate, onProcessRowUpdateError,
+        // Server data
+        dataSource, multiSort = false, sortingMode = 'client', filterMode = 'client', paginationMode = 'client',
         rowCount: propRowCount,
-
-        slots,
-        slotProps,
-
-        pivotMode = false,
-        pivotModel: propPivotModel,
-        onPivotModelChange,
-
-        className = '',
-        style,
-        onRowsScrollEnd,
-        ariaLabel,
-        initialState,
-        onStateChange,
-        // Column Visibility
-        columnVisibilityModel: propColumnVisibilityModel,
-        onColumnVisibilityModelChange,
-        listView: listViewRequested = false,
-        listViewColumn,
-        columnGroupingModel,
-        noRowsLabel = 'No Data',
-        localeText,
-        apiRef: propApiRef,
-        overscanRowCount = 3,
-        aiAssistant,
-        onAiAssistantApply,
-        onAiAssistantError,
+        slots, slotProps,
+        pivotMode = false, pivotModel: propPivotModel, onPivotModelChange,
+        onRowsScrollEnd, initialState, onStateChange,
+        columnVisibilityModel: propColumnVisibilityModel, onColumnVisibilityModelChange,
+        listView: listViewRequested = false, listViewColumn, columnGroupingModel,
+        noRowsLabel = 'No Data', 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);
@@ -228,7 +128,7 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         selectedRowIds: selectionModelRowIds,
         handleRowSelectionModelChange,
         density: effectiveDensity,
-        rowGroupingModel, handleRowGroupingModelChange,
+        rowGroupingModel,
     } = controlledState;
 
     const pivot = useGridPivot({
@@ -322,32 +222,15 @@ 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>({
+    // Steps 12a–13: the edit commit channel, the batch edit and single-cell editing.
+    const { editCommitChannel, batchEdit, editingHandlers } = useGridEditPipeline<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,
         columns: activeColumns,
         processRowUpdate,
         onProcessRowUpdateError,
-        onRowChange: (updatedRow, rowId) => {
-            // Replaces the edited row in the *current* store, under the edited row's id: this runs
-            // 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.
-            batchEdit.storeRow(rowId, updatedRow);
-        },
-        onCommitted: (changes) => editCommitChannel.emit(changes, 'edit'),
+        replaceRows: replaceRows as unknown as (rows: ReadonlyMap<GridRowId, R>) => void,
     });
 
     // The selection without ids of removed rows. Only client-owned rows are pruned: a server page
@@ -441,50 +324,31 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         clientRowCount: sortedUnpinnedRows.length,
     });
 
-    const { rowSelection, handleRowClick, handleSelectionChange } = useGridRowInteractions<R>({
-        dataRows,
-        getRowId: getRowIdOf,
-        isPivotActive,
-        selectedRowIds,
-        onSelectionModelChange: handleRowSelectionModelChange,
-        disableMultipleRowSelection, disableRowSelectionOnClick, isHierarchyEnabled, rowMetaMap,
-        activeHierarchyHandlers, onRowClick,
-    });
-
-    useGridApiMethods({
-        apiRef: gridData.apiRef,
-        sortModel,
-        multiSort,
-        onSortModelChange: handleSortModelChange,
-        filterModel,
-        onFilterModelChange: handleFilterModelChange,
-        paginationModel: effectivePaginationModel,
-        onPaginationModelChange: handlePaginationModelChange,
-        selectedRowIds,
-        getPendingRowSelectionModel: controlledState.getPendingRowSelectionModel,
-        onRowSelectionModelChange: handleRowSelectionModelChange,
-        disableMultipleRowSelection,
-        isSyntheticRowId: (id) => isSyntheticRowId(id, rowMetaMap),
-        getVisibleRows: () => [...pinnedTopRows, ...centerRows, ...pinnedBottomRows],
-        getAllFilteredRows: () => collectAllFilteredRows<GridRowModel>({
-            hierarchyHandlers: activeHierarchyHandlers,
-            pinnedTopRows,
-            sortedUnpinnedRows,
-            pinnedBottomRows,
-            rowMetaMap,
-            getRowId: getRowIdOf,
-            hierarchyField,
+    // Steps 23–24: row selection and click handlers, then the state API methods.
+    const { rowSelection, handleRowClick, handleSelectionChange } = useGridSelectionAndStateApi<R>({
+        controlledState,
+        interactions: {
             dataRows,
-        }),
-        visibleColumns: renderOrderedColumns as unknown as GridColDef[],
-        rowGroupingModel,
-        onRowGroupingModelChange: handleRowGroupingModelChange,
-        aggregationModel,
-        onAggregationModelChange: handleAggregationModelChange,
-        columnVisibilityModel,
-        onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
-        pivotModel: currentPivotModel,
-        onPivotModelChange: handlePivotModelChange,
+            getRowId: getRowIdOf,
+            isPivotActive, disableRowSelectionOnClick, isHierarchyEnabled, rowMetaMap, activeHierarchyHandlers, onRowClick,
+        },
+        api: {
+            apiRef: gridData.apiRef,
+            multiSort, selectedRowIds, disableMultipleRowSelection,
+            isSyntheticRowId: (id) => isSyntheticRowId(id, rowMetaMap),
+            getVisibleRows: () => [...pinnedTopRows, ...centerRows, ...pinnedBottomRows],
+            getAllFilteredRows: () => collectAllFilteredRows<GridRowModel>({
+                hierarchyHandlers: activeHierarchyHandlers,
+                pinnedTopRows,
+                sortedUnpinnedRows,
+                pinnedBottomRows,
+                rowMetaMap,
+                getRowId: getRowIdOf,
+                hierarchyField,
+                dataRows,
+            }),
+            visibleColumns: renderOrderedColumns as unknown as GridColDef[],
+        },
     });
 
     // Indices address the consumer's own rows, whatever the sort, filter, page or pinning.
@@ -572,29 +436,26 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         showStats: showCellSelectionStats,
     });
 
-    useGridClipboardApi({
-        apiRef,
-        columns: renderedDataColumns as unknown as GridColDef[],
-        getRowId: getRowIdOf,
-        containerRef,
-        disableKeyboardShortcut: disableClipboardCopy,
+    // Steps 30–31a: copy, scrollToIndexes and column auto-size on the API.
+    const handleColumnAutosize = useGridViewApis<R>({
+        apiRef, containerRef, viewportRef,
+        copyColumns: renderedDataColumns as unknown as GridColDef[],
+        getRowId: getRowIdOf as unknown as (row: GridRowModel) => GridRowId,
+        disableClipboardCopy,
         getCellRangeCopyText: cellSelection.enabled ? cellSelection.getCopyText : undefined,
-    });
-    useGridScrollToIndexesApi<R>({ apiRef, viewportRef, layout, rowHeight: effectiveRowHeight });
-    const handleColumnAutosize = useGridColumnAutosize<R>({ apiRef, containerRef, columns: orderedColumns, onColumnResize: handleColumnResize });
-
-    const { scrollTop, scrollLeft, overscanRows, handleScroll, setViewportElement } = useGridViewport({
-        onRowsScrollEnd, overscanRowCount, rowCount: layout.unpinnedRowsLength, autoHeight, setDimensions, viewportRef,
+        layout,
+        rowHeight: effectiveRowHeight,
+        orderedColumns,
+        onColumnResize: handleColumnResize,
     });
 
-    const maxContentHeight = useGridMaxContentHeight(containerRef);
-    const virtualization = useGridVirtualization({
-        layout, scrollTop, scrollLeft,
+    // Steps 32–33: scroll sync, viewport measurement and the render window.
+    const { handleScroll, setViewportElement, maxContentHeight, virtualization } = useGridScrollViewport<R>({
+        viewport: { onRowsScrollEnd, overscanRowCount, autoHeight, setDimensions },
+        viewportRef, containerRef, layout,
         viewportWidth: state.dimensions.viewportWidth,
         viewportHeight: state.dimensions.viewportHeight,
-        autoHeight, rowReordering, hasDetailPanel, checkboxSelection, pinCheckboxColumn, pinExpandColumn,
-        overscanRows,
-        maxContentHeight: maxContentHeight ?? Infinity,
+        virtualization: { autoHeight, rowReordering, hasDetailPanel, checkboxSelection, pinCheckboxColumn, pinExpandColumn },
     });
 
 
@@ -630,72 +491,25 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
     const { handleCellClick, handleHeaderClick } = useGridPointerFocusHandlers<R>({
         ensureGridFocus, setKeyboardMode, setFocusedCell, getRowId: getRowIdOf, onCellClick,
     });
-    // Keeps the range anchor and the focused cell together; installs the cell selection API.
-    useGridCellSelectionApi({
-        apiRef,
+    // Steps 36a–36d: the cell selection API, paste and range clear, undo/redo, the fill handle.
+    const fillHandle = useGridRangeEditing<R>({
+        props, apiRef, containerRef, viewportRef,
         selection: cellSelection,
         model: controlledState.cellSelectionModel,
         getPendingModel: controlledState.getPendingCellSelectionModel,
-        focusedCell,
-        setFocusedCell,
-        containerRef,
-    });
-
-    // Ctrl/Cmd+V and Delete on a range (cellSelection); apiRef.pasteText.
-    useGridClipboardPaste<R>({
-        apiRef, containerRef, viewportRef,
-        selection: cellSelection,
-        disableClipboardPaste, disableRangeClear,
-        focusedCell,
-        allRenderableRows,
+        focusedCell, setFocusedCell, allRenderableRows,
         getRowId: getRowIdOf,
         navigationColumns: navigationColumns as unknown as GridColDef<R>[],
-        isCellEditable,
-        rowMetaMap,
+        columnIndexMap, 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,
@@ -703,41 +517,25 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         onPinnedColumnsChange: handlePinnedColumnsChange,
     });
 
-    const ariaRows = useGridAriaRows({
-        columnGroupingModel,
-        headerFilterRow: showHeaderFilters,
-        pinnedTopCount: pinnedTopRows.length,
-        pinnedBottomCount: pinnedBottomRows.length,
-        pagination,
-        paginationMode,
-        paginationModel: effectivePaginationModel,
-        paginationRowCount,
-        paginatedUnpinnedRowCount: paginatedUnpinnedRows.length,
-        sortedUnpinnedRowCount: sortedUnpinnedRows.length,
-    });
-
-    const spanRowWindow = useGridSpanRowWindow({
-        spanning,
-        renderContext: virtualization.renderContext,
-        offsetTop: virtualization.offsetTop,
-        cumulativeHeights: layout.cumulativeHeights,
-    });
-
-    const visibleRows = useGridVisibleRows<R>({
-        renderContext: spanRowWindow.renderContext,
+    // Steps 38–41: aria row bases, the span-widened row window, the rows and the columns to render.
+    const { ariaRows, spanRowWindow, visibleRows, renderColumns } = useGridRenderWindow<R>({
+        aria: {
+            columnGroupingModel,
+            headerFilterRow: showHeaderFilters,
+            pinnedTopCount: pinnedTopRows.length,
+            pinnedBottomCount: pinnedBottomRows.length,
+            pagination,
+            paginationMode,
+            paginationModel: effectivePaginationModel,
+            paginationRowCount,
+            paginatedUnpinnedRowCount: paginatedUnpinnedRows.length,
+            sortedUnpinnedRowCount: sortedUnpinnedRows.length,
+        },
+        spanning, virtualization, layout,
         pinnedTopRows, pinnedBottomRows, paginatedUnpinnedRows, sortedUnpinnedRows, pagination,
         getRowId: getRowIdOf,
     });
 
-    const renderColumns = useGridSpanColumnWindow<R>({
-        spanning,
-        firstColumnIndex: virtualization.renderContext.firstColumnIndex,
-        lastColumnIndex: virtualization.renderContext.lastColumnIndex,
-        virtualColumns: virtualization.virtualColumns,
-        layout,
-        rows: visibleRows,
-    });
-
     useGridDevWarnings({
         paginationRequested: propPagination,
         isRowGrouping,
@@ -754,374 +552,69 @@ export function DataGrid<R extends GridRowModel = GridRowModel>(props: DataGridP
         listViewRowCount: listView && listViewColumn ? allRenderableRows.length : 0,
     });
 
-    const { allSelected, someSelected } = rowSelection;
-
     // Header drag-reorder keeps a column inside its column group (and ungrouped columns outside groups).
     const headerReorderHandlers = useColumnGroupReorderGuard(columnGroupingModel, columnReorderHandlers);
 
     const hasRowSpanning = React.useMemo(() => effectiveColumns.some(c => !!c.rowSpan), [effectiveColumns]);
-    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;
-    const noRowsOverlay = NoRowsOverlaySlot ? <NoRowsOverlaySlot {...slotProps?.noRowsOverlay} /> : undefined;
-    const FooterSlot = slots?.footer;
-    // Loading with rows on screen: the rows stay and an indicator runs over them. With no rows the
-    // body shows skeletons or the loading overlay instead, and infinite scroll appends skeleton rows.
-    const showLoadingOverRows = effectiveLoading && allRenderableRows.length > 0 && paginationMode !== 'infinite';
-    const ToolbarSlot = slots?.toolbar;
-
-    const toolbarProps = useGridToolbarProps<R>({
-        toolbar: slots?.toolbar,
-        toolbarSlotProps: slotProps?.toolbar,
-        apiRef,
-        orderedColumns,
-        baseColumns: columns,
-        aggregationModel,
-        onAggregationModelChange: handleAggregationModelChange,
-        pivotMode,
-        pivotModelProp: propPivotModel,
-        onPivotModelChangeProp: onPivotModelChange,
-        pivotModel: currentPivotModel,
-        onPivotModelChange: handlePivotModelChange,
-        filterModel,
-        onFilterModelChange: handleFilterModelChange,
-        columnVisibilityModel,
-        onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
-        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,
+    // Steps 44–46: the columns panel, the stylesheet warning, the aiAssistant panel and the toolbar's props.
+    const { columnsPanel, aiAssistantPanel, toolbarProps } = useGridToolbarStack<R>({
+        apiRef, containerRef, localeText,
+        aiAssistant: {
+            options: aiAssistant,
+            columns: activeColumns as unknown as GridColDef[],
+            onApply: onAiAssistantApply,
+            onError: onAiAssistantError,
+        },
+        toolbar: {
+            toolbar: slots?.toolbar,
+            toolbarSlotProps: slotProps?.toolbar,
+            orderedColumns,
+            baseColumns: columns,
+            aggregationModel,
+            onAggregationModelChange: handleAggregationModelChange,
+            pivotMode,
+            pivotModelProp: propPivotModel,
+            onPivotModelChangeProp: onPivotModelChange,
+            pivotModel: currentPivotModel,
+            onPivotModelChange: handlePivotModelChange,
+            filterModel,
+            onFilterModelChange: handleFilterModelChange,
+            columnVisibilityModel,
+            onColumnVisibilityModelChange: handleColumnVisibilityModelChange,
+            disableColumnReorder, columnGroupingModel, moveColumn, resetColumnOrder,
+        },
     });
 
-    // Props the row renderers (top-pinned, centre and bottom-pinned rows) all take.
-    const rowRenderProps = {
-        rowReordering, columnIndexMap, editingHandlers, isCellEditable, selectedRowIds, checkboxSelection,
-        onRowClick: handleRowClick,
-        onRowDoubleClick,
-        onCellClick: handleCellClick,
-        onSelectionChange: handleSelectionChange,
-        columnWidths,
-        pinnedColumns: effectivePinnedColumns,
-        hasDetailPanel, expandedRowIds, getDetailPanelContent, getDetailPanelHeight,
-        onDetailPanelToggle: handleDetailPanelToggle,
-        onDetailPanelHeightChange: reportDetailPanelHeight,
-        pinCheckboxColumn, pinExpandColumn, focusedCell,
-        colspanMap: spanning.colspanMap,
-        rowSpanningCaches: spanning.rowSpanningCaches,
-        rowHeight: effectiveRowHeight,
-        rowMetaMap,
-        cellRange: cellSelection.displayRange,
-        cellRangeHasRowSpan: cellSelection.hasRowSpan,
-        fillHandle: fillHandle.handle,
+    const rootProps: GridRootProps<R> = {
+        setViewportElement, handleScroll, ariaLabel, ariaRows,
+        navigationColumnCount: navigationColumns.length,
+        rowSelectionEnabled, disableMultipleRowSelection, cellSelection, effectiveLoading, viewportTabIndex, setKeyboardMode,
+        handleMouseDownCapture, handleKeyDown, handleFocus, handleBlur, effectivePinnedColumns, virtualization, renderColumns,
+        renderedDataColumns, columnGroupingModel, checkboxSelection, rowSelection, sortModel, handleSort, handleSortAdd,
+        multiSort, handleColumnResize, handleColumnAutosize, columnWidths, focusedCell, columnIndexMap, handleHeaderClick,
+        headerReorderHandlers, rowReordering, hasDetailPanel, pinCheckboxColumn, pinExpandColumn, aggregationModel,
+        handleHideColumn, columnsPanel, handlePinColumn, wrapHeaderText, headerHeight, showHeaderFilters, filterModel,
+        handleFilterModelChange, localeText, editingHandlers, isCellEditable, selectedRowIds, handleRowClick,
+        onRowDoubleClick, handleCellClick, handleSelectionChange, expandedRowIds, getDetailPanelContent, getDetailPanelHeight,
+        handleDetailPanelToggle, reportDetailPanelHeight, spanning, rowMetaMap, fillHandle,
+        pinnedTopRows, pinnedBottomRows, pinnedRows, getRowIdOf,
+        showEmptyState: !effectiveLoading && !state.dataSource.error && filteredRows.length === 0,
+        effectiveNoRowsLabel, spanRowWindow, visibleRows,
+        baseColumns: columns as unknown as GridColDef<R>[], viewportWidth: state.dimensions.viewportWidth,
+        rowReorderHandlers, paginationMode, dataSourceLoading: state.dataSource.loading,
+        sortedUnpinnedRowCount: sortedUnpinnedRows.length, pageSize: effectivePaginationModel.pageSize,
+        unpinnedRowsLength: layout.unpinnedRowsLength,
+        showAggregationFooter: hasAggregation && rowGroupingHandlers.rootAggregationPosition !== null,
+        aggregationResult, effectiveRowHeight, isAggregationLoading,
+        containerRef, className, autoHeight, height, style, hasRowSpanning, listView, headerFilterHeight, slots, slotProps,
+        toolbarProps, aiAssistantPanel, orderedColumns, columnVisibilityModel, disableColumnReorder,
+        handleColumnVisibilityModelChange, moveColumn, resetColumnOrder, listViewColumn, allRenderableRows, dataRows,
+        pagination, effectivePaginationModel, currentPage: rowPipeline.currentPage, pageSizeOptions,
+        columnsByField: columnLookup.byField, paginationRowCount, handlePaginationModelChange, onRowsScrollEnd,
+        toggleExpansion: activeHierarchyHandlers?.toggleExpansion, showCellSelectionStats, apiRef: gridData.apiRef,
+        hasAggregation, isHierarchyEnabled, dataSourceError: state.dataSource.error, filteredRowCount: filteredRows.length,
+        onRetry: dataSource ? dataSourceHandlers.fetchRows : undefined,
     };
 
-    return (
-        <div
-            ref={containerRef}
-            className={['ogx', className, autoHeight && 'ogx--auto-height', !autoHeight && height === undefined && style?.height === undefined && 'ogx--fill', hasRowSpanning && 'ogx--row-spanning', listView && 'ogx--list-view'].filter(Boolean).join(' ')}
-            style={{
-                ...style,
-                height: height ?? style?.height,
-                '--ogx-row-height': `${effectiveRowHeight}px`,
-                '--ogx-header-height': `${headerHeight}px`,
-                ...(showHeaderFilters ? { '--ogx-header-filter-height': `${headerFilterHeight}px` } : undefined),
-            } as unknown as React.CSSProperties}
-            aria-busy={effectiveLoading}
-        >
-            {ToolbarSlot && toolbarProps && (
-                <GridToolbarHostContext.Provider value={columnsPanel.toolbarHost}>
-                    <GridToolbarSlot component={ToolbarSlot} toolbarProps={toolbarProps} />
-                </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}
-                containerRef={containerRef}
-                panelRef={columnsPanel.standalonePanelRef}
-                columns={orderedColumns}
-                columnVisibilityModel={columnVisibilityModel}
-                disableColumnReorder={disableColumnReorder}
-                onClose={columnsPanel.closeStandalonePanel}
-                onColumnVisibilityChange={handleColumnVisibilityModelChange}
-                onColumnMove={moveColumn}
-                onColumnOrderReset={resetColumnOrder}
-                columnGroupingModel={columnGroupingModel}
-            />
-
-
-            {listView && listViewColumn && (
-                <GridListView<R>
-                    ariaLabel={ariaLabel}
-                    allRenderableRows={allRenderableRows}
-                    dataRowCount={dataRows.length}
-                    pinnedTopRowCount={pinnedTopRows.length}
-                    pinnedBottomRowCount={pinnedBottomRows.length}
-                    unpinnedRowCount={sortedUnpinnedRows.length}
-                    pagination={pagination}
-                    effectivePaginationModel={effectivePaginationModel}
-                    currentPage={rowPipeline.currentPage}
-                    pageSizeOptions={pageSizeOptions}
-                    selectedRowIds={selectedRowIds}
-                    listViewColumn={listViewColumn}
-                    columnsByField={columnLookup.byField}
-                    rowMetaMap={rowMetaMap}
-                    noRowsLabel={effectiveNoRowsLabel}
-                    rowHeight={effectiveRowHeight}
-                    checkboxSelection={checkboxSelection}
-                    paginationMode={paginationMode}
-                    serverRowCount={paginationRowCount}
-                    paginationSlot={slots?.pagination}
-                    paginationSlotProps={slotProps?.pagination}
-                    localeText={pickPaginationLocaleText(localeText)}
-                    onRowClick={handleRowClick}
-                    onRowDoubleClick={onRowDoubleClick}
-                    onSelectionChange={handleSelectionChange}
-                    onPaginationModelChange={handlePaginationModelChange}
-                    onRowsScrollEnd={onRowsScrollEnd}
-                    getRowId={getRowIdOf}
-                    multiselectable={rowSelectionEnabled && !disableMultipleRowSelection}
-                    selectable={rowSelectionEnabled}
-                    onToggleExpansion={activeHierarchyHandlers?.toggleExpansion}
-                    loading={effectiveLoading}
-                    loadingOverlay={loadingOverlay}
-                    noRowsOverlay={noRowsOverlay}
-                    showPaginationControls={!FooterSlot}
-                />
-            )}
-
-            {/* ══════════════════════════════════════════════════════════════
-                STANDARD GRID VIEWPORT (hidden when listView=true)
-            ══════════════════════════════════════════════════════════════ */}
-            {!listView && (
-                <div
-                    ref={setViewportElement}
-                    className="ogx__viewport"
-                    onScroll={handleScroll}
-                    role="grid"
-                    aria-label={ariaLabel || 'Data grid'}
-                    aria-rowcount={ariaRows.rowCount}
-                    aria-colcount={navigationColumns.length}
-                    aria-multiselectable={(rowSelectionEnabled && !disableMultipleRowSelection) || cellSelection.enabled}
-                    aria-busy={effectiveLoading}
-                    tabIndex={viewportTabIndex}
-                    onKeyDownCapture={() => { setKeyboardMode(true); }}
-                    onMouseDownCapture={handleMouseDownCapture}
-                    onMouseDown={cellSelection.handleMouseDown}
-                    onClickCapture={cellSelection.handleClickCapture}
-                    onKeyDown={handleKeyDown}
-                    onFocus={handleFocus}
-                    onBlur={handleBlur}
-                >
-                    <div
-                        className="ogx__content"
-                        style={{
-                            // With right-pinned columns the content spans at least the viewport, so they sit at its right edge.
-                            width: effectivePinnedColumns?.right?.length
-                                ? `max(100%, ${virtualization.totalWidth}px)`
-                                : virtualization.totalWidth
-                        }}
-                        role="presentation"
-                    >
-                        {/* Header and top-pinned rows stick together, so pinned rows sit below every header row. */}
-                        <div className="ogx__sticky-top" role="presentation">
-                            <Header
-                                columns={renderColumns}
-                                allColumns={renderedDataColumns}
-                                columnGroupingModel={columnGroupingModel}
-                                checkboxSelection={checkboxSelection}
-                                allSelected={allSelected}
-                                someSelected={someSelected}
-                                onSelectAll={rowSelection.selectAll}
-                                sortModel={sortModel}
-                                onSort={handleSort}
-                                onSortAdd={handleSortAdd}
-                                multiSort={multiSort}
-
-                                onColumnResize={handleColumnResize}
-                                onColumnAutosize={handleColumnAutosize}
-                                columnWidths={columnWidths}
-                                pinnedColumns={effectivePinnedColumns}
-
-                                focusedCell={focusedCell}
-                                columnIndexMap={columnIndexMap}
-                                onHeaderClick={handleHeaderClick}
-                                onDragStart={headerReorderHandlers.onDragStart}
-                                onDragOver={headerReorderHandlers.onDragOver}
-                                onDragEnd={headerReorderHandlers.onDragEnd}
-                                onDrop={headerReorderHandlers.onDrop}
-                                draggedColumn={headerReorderHandlers.draggedColumn}
-                                dragOverColumn={headerReorderHandlers.dragOverColumn}
-                                rowReordering={rowReordering}
-                                hasDetailPanel={hasDetailPanel}
-                                pinCheckboxColumn={pinCheckboxColumn}
-                                pinExpandColumn={pinExpandColumn}
-                                aggregationModel={aggregationModel}
-                                onHideColumn={handleHideColumn}
-                                onManageColumns={columnsPanel.openColumnsPanel}
-                                onPinColumn={handlePinColumn}
-                                wrapHeaderText={wrapHeaderText}
-                                headerHeight={headerHeight}
-                                headerFilters={showHeaderFilters}
-                                filterModel={filterModel}
-                                onFilterModelChange={handleFilterModelChange}
-                                onOpenFilterPanel={columnsPanel.openFiltersPanel}
-                            />
-
-                            <GridPinnedRows<R>
-                                {...rowRenderProps}
-                                rows={pinnedTopRows}
-                                position="top"
-                                ariaRowIndexBase={ariaRows.topBase}
-                                columns={renderColumns}
-                                pinnedRows={pinnedRows}
-                                getRowId={getRowIdOf}
-                            />
-                        </div>
-
-                        {/* Empty State Overlay (Standard View) — showing after header */}
-                        {!effectiveLoading && !state.dataSource.error && filteredRows.length === 0 && (
-                            <GridEmptyState
-                                noRowsLabel={effectiveNoRowsLabel}
-                                width={virtualization.totalWidth}
-                                overlay={noRowsOverlay}
-                            />
-                        )}
-
-                        <GridVirtualRows<R>
-                            {...rowRenderProps}
-                            virtualContainerHeight={virtualization.virtualContainerHeight}
-                            offsetTop={spanRowWindow.offsetTop}
-                            effectiveLoading={effectiveLoading}
-                            visibleRows={visibleRows}
-                            baseColumns={columns as unknown as GridColDef<R>[]}
-                            virtualColumns={renderColumns}
-                            viewportWidth={state.dimensions.viewportWidth}
-                            rowReorderHandlers={rowReorderHandlers}
-                            paginationMode={paginationMode}
-                            dataSourceLoading={state.dataSource.loading}
-                            sortedUnpinnedRowCount={sortedUnpinnedRows.length}
-                            infiniteScrollSkeletonCount={Math.min(effectivePaginationModel.pageSize, 20)}
-                            unpinnedRowsLength={layout.unpinnedRowsLength}
-                            lastRenderedRowIndex={spanRowWindow.renderContext.lastRowIndex}
-                            ariaRowIndexOffset={ariaRows.centerOffset}
-                            loadingOverlay={loadingOverlay}
-                        />
-
-                        {/* Bottom-pinned rows and the aggregation footer stick together, footer last. */}
-                        <div className="ogx__sticky-bottom" role="presentation">
-                            <GridPinnedRows<R>
-                                {...rowRenderProps}
-                                rows={pinnedBottomRows}
-                                position="bottom"
-                                rowIndexOffset={ariaRows.bottomRowIndexOffset}
-                                ariaRowIndexBase={ariaRows.bottomBase}
-                                columns={renderColumns}
-                                pinnedRows={pinnedRows}
-                                getRowId={getRowIdOf}
-                            />
-
-                            {/* Aggregation Footer Row — laid out from the same virtual columns as the rows, so
-                                 hidden, pinned and scrolled columns line up. Off in pivot mode (hasAggregation). */}
-                            {hasAggregation && rowGroupingHandlers.rootAggregationPosition !== null && (
-                                <GridAggregationFooter
-                                    columns={virtualization.virtualColumns as unknown as GridColDef[]}
-                                    aggregationModel={aggregationModel}
-                                    aggregationResult={aggregationResult}
-                                    columnWidths={columnWidths}
-                                    rowHeight={effectiveRowHeight}
-                                    checkboxSelection={checkboxSelection}
-                                    hasDetailPanel={hasDetailPanel}
-                                    rowReordering={rowReordering}
-                                    pinCheckboxColumn={pinCheckboxColumn}
-                                    pinExpandColumn={pinExpandColumn}
-                                    pinnedColumns={effectivePinnedColumns}
-                                    loading={isAggregationLoading}
-                                />
-                            )}
-                        </div>
-
-                    </div>
-                </div>
-            )}
-
-            {cellSelection.enabled && showCellSelectionStats && (
-                <GridCellSelectionStatsArea
-                    stats={cellSelection.stats}
-                    apiRef={gridData.apiRef}
-                    slot={slots?.cellSelectionStats}
-                    slotProps={slotProps?.cellSelectionStats}
-                />
-            )}
-
-            {FooterSlot && (
-                <FooterSlot
-                    apiRef={gridData.apiRef}
-                    aggregationModel={aggregationModel}
-                    aggregationResult={hasAggregation ? aggregationResult : null}
-                    rowCount={isHierarchyEnabled && paginationMode !== 'server' ? dataRows.length : paginationRowCount}
-                    pagination={pagination}
-                    paginationModel={effectivePaginationModel}
-                    pageSizeOptions={pageSizeOptions}
-                    onPaginationModelChange={handlePaginationModelChange}
-                    {...slotProps?.footer}
-                />
-            )}
-
-            {!listView && !FooterSlot && pagination && (
-                <GridPaginationArea
-                    paginationSlot={slots?.pagination}
-                    paginationSlotProps={slotProps?.pagination}
-                    page={rowPipeline.currentPage}
-                    paginationModel={effectivePaginationModel}
-                    rowCount={paginationRowCount}
-                    pageSizeOptions={pageSizeOptions}
-                    onPaginationModelChange={handlePaginationModelChange}
-                    localeText={localeText}
-                />
-            )}
-
-            <GridLiveRegion
-                loading={effectiveLoading}
-                error={state.dataSource.error}
-                noRowsLabel={effectiveNoRowsLabel}
-                filteredRowCount={filteredRows.length}
-                dataRowCount={dataRows.length}
-                filterModel={filterModel}
-                cellSelectionAnnouncement={cellSelection.announcement}
-                aiAssistantAnnouncement={aiAssistantPanel.announcement}
-            />
-
-            {showLoadingOverRows && (
-                <GridLoadingOverlay overlay={loadingOverlay} />
-            )}
-
-            <GridErrorOverlay error={state.dataSource.error} onRetry={dataSource ? dataSourceHandlers.fetchRows : undefined} />
-        </div>
-    );
+    return <GridRoot<R> {...rootProps} />;
 }