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

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.                           |

docs/pages/api-docs/data-grid/grid-filter-operator.md

@@ -14,7 +14,7 @@ import { GridFilterOperator } from '@mui/x-data-grid';
 
 | Name                                                                                                  | Type                                                                                                                                                                                                                                               | Description                                                                                                                                                           |
 | :---------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <span class="prop-name">getApplyFilterFn</span>                                                       | <span class="prop-type">(filterItem: GridFilterItem, column: GridStateColDef) =&gt; null \| ((params: GridCellParams) =&gt; boolean)</span>                                                                                                        | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column. |
+| <span class="prop-name">getApplyFilterFn</span>                                                       | <span class="prop-type">(filterItem: GridFilterItem, column: GridStateColDef&lt;Api&gt;) =&gt; null \| ((params: GridCellParams&lt;any, any, any, Api&gt;) =&gt; boolean)</span>                                                                   | The callback that generates a filtering function for a given filter item and column.<br />This function can return `null` to skip filtering for this item and column. |
 | <span class="prop-name optional">InputComponent<sup><abbr title="optional">?</abbr></sup></span>      | <span class="prop-type">React.JSXElementConstructor&lt;GridFilterInputValueProps&gt; \| React.JSXElementConstructor&lt;GridFilterInputMultipleValueProps&gt; \| React.JSXElementConstructor&lt;GridFilterInputMultipleSingleSelectProps&gt;</span> | The input component to render in the filter panel for this filter operator.                                                                                           |
 | <span class="prop-name optional">InputComponentProps<sup><abbr title="optional">?</abbr></sup></span> | <span class="prop-type">Record&lt;string, any&gt;</span>                                                                                                                                                                                           | The props to pass to the input component in the filter panel for this filter operator.                                                                                |
 | <span class="prop-name optional">label<sup><abbr title="optional">?</abbr></sup></span>               | <span class="prop-type">string</span>                                                                                                                                                                                                              | The label of the filter operator.                                                                                                                                     |

docs/scripts/api/buildInterfacesDocumentation.ts

@@ -33,9 +33,7 @@ interface ParsedProperty {
   typeStr: string;
 }
 
-const INTERFACES_WITH_DEDICATED_PAGES = [
-  // apiRef
-  'GridApi',
+const GRID_API_INTERFACES_WITH_DEDICATED_PAGES = [
   'GridSelectionApi',
   'GridFilterApi',
   'GridSortApi',
@@ -48,6 +46,11 @@ const INTERFACES_WITH_DEDICATED_PAGES = [
   'GridDetailPanelApi',
   'GridPrintExportApi',
   'GridDisableVirtualizationApi',
+];
+
+const OTHER_GRID_INTERFACES_WITH_DEDICATED_PAGES = [
+  // apiRef
+  'GridApi',
 
   // Params
   'GridCellParams',
@@ -165,7 +168,10 @@ function generateImportStatement(objects: ParsedObject[], projects: Projects) {
     .map((project) => {
       const objectsInProject = objects.filter((object) => {
         // TODO: Remove after opening the apiRef on the community plan
-        if (object.name === 'GridApi' && project.name === 'x-data-grid') {
+        if (
+          ['GridApiCommunity', 'GridApiPro'].includes(object.name) &&
+          project.name === 'x-data-grid'
+        ) {
           return false;
         }
 
@@ -222,7 +228,10 @@ export default function buildInterfacesDocumentation(options: BuildInterfacesDoc
   const allProjectsName = Array.from(projects.keys());
 
   const documentedInterfaces: DocumentedInterfaces = new Map();
-  INTERFACES_WITH_DEDICATED_PAGES.forEach((interfaceName) => {
+  [
+    ...OTHER_GRID_INTERFACES_WITH_DEDICATED_PAGES,
+    ...GRID_API_INTERFACES_WITH_DEDICATED_PAGES,
+  ].forEach((interfaceName) => {
     const packagesWithThisInterface = allProjectsName.filter(
       (projectName) => !!projects.get(projectName)!.exports[interfaceName],
     );
@@ -234,16 +243,6 @@ export default function buildInterfacesDocumentation(options: BuildInterfacesDoc
     documentedInterfaces.set(interfaceName, packagesWithThisInterface);
   });
 
-  const gridApiExtendsFrom: string[] = (
-    (projects.get('x-data-grid-pro')!.exports.GridApi.declarations![0] as ts.InterfaceDeclaration)
-      .heritageClauses ?? []
-  ).flatMap((clause) =>
-    clause.types
-      .map((type) => type.expression)
-      .filter(ts.isIdentifier)
-      .map((expression) => expression.escapedText),
-  );
-
   documentedInterfaces.forEach((packagesWithThisInterface, interfaceName) => {
     const project = projects.get(packagesWithThisInterface[0])!;
     const symbol = project.exports[interfaceName];
@@ -255,7 +254,7 @@ export default function buildInterfacesDocumentation(options: BuildInterfacesDoc
 
     const slug = kebabCase(parsedInterface.name);
 
-    if (gridApiExtendsFrom.includes(parsedInterface.name)) {
+    if (GRID_API_INTERFACES_WITH_DEDICATED_PAGES.includes(parsedInterface.name)) {
       const json = {
         name: parsedInterface.name,
         description: linkify(parsedInterface.description, documentedInterfaces, 'html'),

docs/scripts/api/buildSelectorsDocumentation.ts

@@ -48,12 +48,12 @@ export default function buildSelectorsDocumentation(options: BuildSelectorsDocum
       let isSelector = false;
       let supportsApiRef = false;
 
-      if (
-        project.checker.getTypeOfSymbolAtLocation(
-          parameterSymbol,
-          parameterSymbol.valueDeclaration!,
-        ).symbol?.name === 'GridState'
-      ) {
+      const firstParamName = project.checker.getTypeOfSymbolAtLocation(
+        parameterSymbol,
+        parameterSymbol.valueDeclaration!,
+      ).symbol?.name;
+
+      if (['GridStatePro', 'GridStateCommunity'].includes(firstParamName)) {
         // Selector not wrapped in `createSelector`
         isSelector = true;
       } else if (
@@ -69,11 +69,10 @@ export default function buildSelectorsDocumentation(options: BuildSelectorsDocum
       }
 
       const returnType = formatType(
-        project.checker.typeToString(
-          signature.getReturnType(),
-          undefined,
-          ts.TypeFormatFlags.NoTruncation,
-        ),
+        project.checker
+          .typeToString(signature.getReturnType(), undefined, ts.TypeFormatFlags.NoTruncation)
+          // For now the community selectors are not overloading when exported from the pro
+          .replace(/<GridApi(Community|Pro)>/g, ''),
       );
       const category = tags.category?.text?.[0].text;
       const deprecated = tags.deprecated?.text?.[0].text;

docs/scripts/api/utils.ts

@@ -22,7 +22,8 @@ export type DocumentedInterfaces = Map<string, ProjectNames[]>;
 export const getSymbolDescription = (symbol: ts.Symbol, project: Project) =>
   symbol
     .getDocumentationComment(project.checker)
-    .map((comment) => comment.text)
+    .flatMap((comment) => comment.text.split('\n'))
+    .filter((line) => !line.startsWith('TODO'))
     .join('\n');
 
 export const getSymbolJSDocTags = (symbol: ts.Symbol) =>
@@ -45,6 +46,10 @@ export function escapeCell(value: string) {
 }
 
 export const formatType = (rawType: string) => {
+  if (!rawType) {
+    return '';
+  }
+
   const prefix = 'type FakeType = ';
   const signatureWithTypeName = `${prefix}${rawType}`;
 

docs/src/pages/components/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/src/pages/components/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/src/pages/components/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/src/pages/components/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/src/pages/components/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/translations/api-docs/data-grid/data-grid-pro-pt.json

@@ -54,7 +54,7 @@
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
     "hideFooterRowCount": "If <code>true</code>, the row count in the footer is hidden. It has no effect if the pagination is enabled.",
     "hideFooterSelectedRowCount": "If <code>true</code>, the selected row count in the footer is hidden.",
-    "initialState": "The initial state of the DataGrid. The data in it will be set in the state on initialization but will not be controlled. If one of the data in <code>initialState</code> is also being controlled, then the control state wins.",
+    "initialState": "The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in <code>initialState</code> is also being controlled, then the control state wins.",
     "isCellEditable": "Callback fired when a cell is rendered, returns true if the cell is editable.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; boolean</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (boolean): A boolean indicating if the cell is editable.",
     "isGroupExpandedByDefault": "Determines if a group should be expanded after its creation. This prop takes priority over the <code>defaultGroupingExpansionDepth</code> prop.<br><br><strong>Signature:</strong><br><code>function(node: GridRowTreeNodeConfig) =&gt; boolean</code><br><em>node:</em> The node of the group to test.<br> <em>returns</em> (boolean): A boolean indicating if the group is expanded.",
     "isRowSelectable": "Determines if a row can be selected.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; boolean</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (boolean): A boolean indicating if the cell is selectable.",

docs/translations/api-docs/data-grid/data-grid-pro-zh.json

@@ -54,7 +54,7 @@
     "hideFooterPagination": "If <code>true</code>, the pagination component in the footer is hidden.",
     "hideFooterRowCount": "If <code>true</code>, the row count in the footer is hidden. It has no effect if the pagination is enabled.",
     "hideFooterSelectedRowCount": "If <code>true</code>, the selected row count in the footer is hidden.",
-    "initialState": "The initial state of the DataGrid. The data in it will be set in the state on initialization but will not be controlled. If one of the data in <code>initialState</code> is also being controlled, then the control state wins.",
+    "initialState": "The initial state of the DataGridPro. The data in it will be set in the state on initialization but will not be controlled. If one of the data in <code>initialState</code> is also being controlled, then the control state wins.",
     "isCellEditable": "Callback fired when a cell is rendered, returns true if the cell is editable.<br><br><strong>Signature:</strong><br><code>function(params: GridCellParams) =&gt; boolean</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-cell-params/\">GridCellParams</a>.<br> <em>returns</em> (boolean): A boolean indicating if the cell is editable.",
     "isGroupExpandedByDefault": "Determines if a group should be expanded after its creation. This prop takes priority over the <code>defaultGroupingExpansionDepth</code> prop.<br><br><strong>Signature:</strong><br><code>function(node: GridRowTreeNodeConfig) =&gt; boolean</code><br><em>node:</em> The node of the group to test.<br> <em>returns</em> (boolean): A boolean indicating if the group is expanded.",
     "isRowSelectable": "Determines if a row can be selected.<br><br><strong>Signature:</strong><br><code>function(params: GridRowParams) =&gt; boolean</code><br><em>params:</em> With all properties from <a href=\"/api/data-grid/grid-row-params/\">GridRowParams</a>.<br> <em>returns</em> (boolean): A boolean indicating if the cell is selectable.",