[DataGrid] Differenciate the pro and community versions of GridState, GridApi and GridApiRef

docs/data/data-grid/editing/CatchEditingEventsGrid.tsx

@@ -2,7 +2,6 @@ import * as React from 'react';
 import Alert from '@mui/material/Alert';
 import {
   GridEvents,
-  GridCellParams,
   GridColumns,
   GridRowsProp,
   useGridApiRef,
@@ -21,7 +20,7 @@ export default function CatchEditingEventsGrid() {
   React.useEffect(() => {
     return apiRef.current.subscribeEvent(
       GridEvents.cellEditStart,
-      (params: GridCellParams, event) => {
+      (params, event) => {
         setMessage(
           `Editing cell with value: ${params.value} and row id: ${
             params.id

docs/data/data-grid/events/events.json

@@ -2,13 +2,13 @@
   {
     "name": "cellClick",
     "description": "Fired when a cell is clicked.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any, any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },
   {
     "name": "cellDoubleClick",
     "description": "Fired when a cell is double-clicked.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any, any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },
   {
@@ -20,43 +20,43 @@
   {
     "name": "cellEditStart",
     "description": "Fired when the cell turns to edit mode.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any, any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>>"
   },
   {
     "name": "cellEditStop",
     "description": "Fired when the cell turns back to view mode.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any>",
     "event": "MuiEvent<MuiBaseEvent>"
   },
   {
     "name": "cellFocusIn",
     "description": "Fired when a cell gains focus.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any, any>",
     "event": "MuiEvent<{}>"
   },
   {
     "name": "cellFocusOut",
     "description": "Fired when a cell loses focus.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any, any>",
     "event": "MuiEvent<MuiBaseEvent>"
   },
   {
     "name": "cellKeyDown",
     "description": "Fired when a <code>keydown</code> event happens in a cell.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any, any>",
     "event": "MuiEvent<React.KeyboardEvent<HTMLElement>>"
   },
   {
     "name": "cellMouseDown",
     "description": "Fired when a <code>mousedown</code> event happens in a cell..",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any, any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },
   {
     "name": "cellMouseUp",
     "description": "Fired when a <code>mouseup</code> event happens in a cell..",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any, any, any, any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },
   {
@@ -260,7 +260,7 @@
   {
     "name": "stateChange",
     "description": "Fired when the state of the grid is updated.",
-    "params": "GridState",
+    "params": "any",
     "event": "MuiEvent<{}>"
   },
   {

docs/data/data-grid/pagination/CursorPaginationGrid.tsx

@@ -1,5 +1,11 @@
 import * as React from 'react';
-import { GridRowsProp, DataGrid, GridRowId, GridRowModel } from '@mui/x-data-grid';
+import {
+  GridRowsProp,
+  DataGrid,
+  GridRowId,
+  GridRowModel,
+  GridApi,
+} from '@mui/x-data-grid';
 import { useDemoData, GridDemoData } from '@mui/x-data-grid-generator';
 
 interface ServerBasedGridResponse {
@@ -11,7 +17,7 @@ const PAGE_SIZE = 5;
 
 function loadServerRows(
   cursor: GridRowId | null | undefined,
-  data: GridDemoData,
+  data: GridDemoData<GridApi>,
 ): Promise<ServerBasedGridResponse> {
   return new Promise<ServerBasedGridResponse>((resolve) => {
     setTimeout(() => {

docs/data/data-grid/selection/ControlledSelectionServerPaginationGrid.tsx

@@ -1,8 +1,13 @@
 import * as React from 'react';
-import { DataGrid, GridRowsProp, GridSelectionModel } from '@mui/x-data-grid';
+import {
+  DataGrid,
+  GridApi,
+  GridRowsProp,
+  GridSelectionModel,
+} from '@mui/x-data-grid';
 import { GridDemoData, useDemoData } from '@mui/x-data-grid-generator';
 
-function loadServerRows(page: number, data: GridDemoData): Promise<any> {
+function loadServerRows(page: number, data: GridDemoData<GridApi>): Promise<any> {
   return new Promise((resolve) => {
     setTimeout(() => {
       resolve(data.rows.slice(page * 5, (page + 1) * 5));

docs/data/data-grid/sorting/ServerSortingGrid.tsx

@@ -1,10 +1,13 @@
 import * as React from 'react';
-import { GridRowsProp, DataGrid, GridSortModel } from '@mui/x-data-grid';
+import { GridRowsProp, DataGrid, GridSortModel, GridApi } from '@mui/x-data-grid';
 import { useDemoData, GridDemoData } from '@mui/x-data-grid-generator';
 
 const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
 
-function loadServerRows(sortModel: GridSortModel, data: GridDemoData): Promise<any> {
+function loadServerRows(
+  sortModel: GridSortModel,
+  data: GridDemoData<GridApi>,
+): Promise<any> {
   return new Promise<any>((resolve) => {
     setTimeout(() => {
       if (sortModel.length === 0) {

docs/pages/api-docs/data-grid/grid-cell-params.md

@@ -15,7 +15,7 @@ import { GridCellParams } from '@mui/x-data-grid';
 | Name                                                                                         | Type                                                                              | Description                                                      |
 | :------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------------- |
 | <span class="prop-name">cellMode</span>                                                      | <span class="prop-type">GridCellMode</span>                                       | The mode of the cell.                                            |
-| <span class="prop-name">colDef</span>                                                        | <span class="prop-type">GridStateColDef</span>                                    | The column of the row that the current cell belongs to.          |
+| <span class="prop-name">colDef</span>                                                        | <span class="prop-type">GridStateColDef&lt;GridApi&gt;</span>                     | The column of the row that the current cell belongs to.          |
 | <span class="prop-name">field</span>                                                         | <span class="prop-type">string</span>                                             | The column field of the cell that triggered the event.           |
 | <span class="prop-name">formattedValue</span>                                                | <span class="prop-type">F</span>                                                  | The cell value formatted with the column valueFormatter.         |
 | <span class="prop-name">getValue</span>                                                      | <span class="prop-type">(id: GridRowId, field: string) =&gt; GridCellValue</span> | Get the cell value of a row and field.                           |