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

docs/pages/api-docs/data-grid/grid-api-community.js

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
+import { demos, docs, demoComponents } from './grid-api-community.md?@mui/markdown';
+
+export default function Page() {
+  return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;
+}

docs/pages/api-docs/data-grid/grid-api.js → docs/pages/api-docs/data-grid/grid-api-pro.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import MarkdownDocs from '@mui/monorepo/docs/src/modules/components/MarkdownDocs';
-import { demos, docs, demoComponents } from './grid-api.md?@mui/markdown';
+import { demos, docs, demoComponents } from './grid-api-pro.md?@mui/markdown';
 
 export default function Page() {
   return <MarkdownDocs demos={demos} docs={docs} demoComponents={demoComponents} />;

docs/pages/api-docs/data-grid/grid-col-def.md

@@ -42,7 +42,7 @@ import { GridColDef } from '@mui/x-data-grid';
 | <span class="prop-name optional">renderHeader<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">(params: GridColumnHeaderParams) =&gt; React.ReactNode</span>                                            |                                            | Allows to render a component in the column header cell.                                                                                            |
 | <span class="prop-name optional">resizable<sup><abbr title="optional">?</abbr></sup></span>               | <span class="prop-type">boolean</span>                                                                                           | <span class="prop-default">true</span>     | If `true`, the column is resizable.                                                                                                                |
 | <span class="prop-name optional">sortable<sup><abbr title="optional">?</abbr></sup></span>                | <span class="prop-type">boolean</span>                                                                                           | <span class="prop-default">true</span>     | If `true`, the column is sortable.                                                                                                                 |
-| <span class="prop-name optional">sortComparator<sup><abbr title="optional">?</abbr></sup></span>          | <span class="prop-type">GridComparatorFn</span>                                                                                  |                                            | A comparator function used to sort rows.                                                                                                           |
+| <span class="prop-name optional">sortComparator<sup><abbr title="optional">?</abbr></sup></span>          | <span class="prop-type">GridComparatorFn&lt;GridApi&gt;</span>                                                                   |                                            | A comparator function used to sort rows.                                                                                                           |
 | <span class="prop-name optional">sortingOrder<sup><abbr title="optional">?</abbr></sup></span>            | <span class="prop-type">GridSortDirection[]</span>                                                                               |                                            | The order of the sorting sequence.                                                                                                                 |
 | <span class="prop-name optional">type<sup><abbr title="optional">?</abbr></sup></span>                    | <span class="prop-type">GridColType</span>                                                                                       | <span class="prop-default">'string'</span> | Type allows to merge this object with a default definition [GridColDef](/api/data-grid/grid-col-def/).                                             |
 | <span class="prop-name optional">valueFormatter<sup><abbr title="optional">?</abbr></sup></span>          | <span class="prop-type">(params: GridValueFormatterParams) =&gt; GridCellValue</span>                                            |                                            | Function that allows to apply a formatter before rendering its value.                                                                              |

docs/pages/api-docs/data-grid/index.md

@@ -9,7 +9,8 @@
 
 ## Interfaces
 
-- [GridApi](/api/data-grid/grid-api/)
+- [GridApiCommunity](/api/data-grid/grid-api-community/)
+- [GridApiPro](/api/data-grid/grid-api-pro/)
 - [GridCellParams](/api/data-grid/grid-cell-params/)
 - [GridColDef](/api/data-grid/grid-col-def/)
 - [GridRowParams](/api/data-grid/grid-row-params/)

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',
@@ -47,6 +45,12 @@ const INTERFACES_WITH_DEDICATED_PAGES = [
   'GridColumnPinningApi',
   'GridPrintExportApi',
   'GridDisableVirtualizationApi',
+];
+
+const OTHER_GRID_INTERFACES_WITH_DEDICATED_PAGES = [
+  // apiRef
+  'GridApiCommunity',
+  'GridApiPro',
 
   // Params
   'GridCellParams',
@@ -164,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;
         }
 
@@ -221,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],
     );
@@ -233,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];
@@ -254,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

@@ -46,12 +46,12 @@ export default function buildSelectorsDocumentation(options: BuildSelectorsDocum
 
       let isSelector = 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 (

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) =>

docs/src/pages.js

@@ -56,7 +56,8 @@ dataGridComponentAPI.children = [
   { pathname: '/api-docs/data-grid', title: 'API Reference' },
   { pathname: '/api-docs/data-grid/data-grid', title: 'DataGrid' },
   { pathname: '/api-docs/data-grid/data-grid-pro', title: 'DataGridPro' },
-  { pathname: '/api-docs/data-grid/grid-api', title: 'GridApi' },
+  { pathname: '/api-docs/data-grid/grid-api-pro', title: 'GridApiPro' },
+  { pathname: '/api-docs/data-grid/grid-api-community', title: 'GridApiCommunity' },
   { pathname: '/api-docs/data-grid/grid-col-def', title: 'GridColDef' },
   { pathname: '/api-docs/data-grid/grid-cell-params', title: 'GridCellParams' },
   { pathname: '/api-docs/data-grid/grid-row-params', title: 'GridRowParams' },

docs/src/pages/components/data-grid/editing/FullFeaturedCrudGrid.tsx

@@ -10,14 +10,14 @@ import {
   GridRowsProp,
   useGridApiRef,
   DataGridPro,
-  GridApiRef,
   GridColumns,
   GridRowParams,
   MuiEvent,
   GridToolbarContainer,
   GridActionsCellItem,
   GridEventListener,
   GridEvents,
+  GridApiRefPro,
 } from '@mui/x-data-grid-pro';
 import {
   randomCreatedDate,
@@ -65,7 +65,7 @@ const rows: GridRowsProp = [
 ];
 
 interface EditToolbarProps {
-  apiRef: GridApiRef;
+  apiRef: GridApiRefPro;
 }
 
 function EditToolbar(props: EditToolbarProps) {

docs/src/pages/components/data-grid/editing/StartEditButtonGrid.tsx

@@ -6,8 +6,8 @@ import {
   GridRowsProp,
   useGridApiRef,
   DataGridPro,
-  GridApiRef,
   GridCellParams,
+  GridApiRefPro,
 } from '@mui/x-data-grid-pro';
 import {
   randomCreatedDate,
@@ -16,7 +16,7 @@ import {
 } from '@mui/x-data-grid-generator';
 
 interface EditToolbarProps {
-  apiRef: GridApiRef;
+  apiRef: GridApiRefPro;
   selectedCellParams?: any;
   setSelectedCellParams: (value: any) => void;
 }

docs/src/pages/components/data-grid/events/events.json

@@ -260,7 +260,7 @@
   {
     "name": "stateChange",
     "description": "Fired when the state of the grid is updated.",
-    "params": "GridState",
+    "params": "GridStatePro | GridStateCommunity",
     "event": "MuiEvent<{}>"
   },
   {

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

@@ -51,7 +51,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

@@ -51,7 +51,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.json

@@ -51,7 +51,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.",

packages/grid/_modules_/grid/components/ErrorBoundary.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { ErrorInfo } from 'react';
-import { GridApiRef } from '../models/api';
+import { GridApiRefCommunity } from '../models/api';
 import { Logger } from '../models/logger';
 
 export interface ErrorBoundaryProps {
   logger: Logger;
   render: ({ error }: any) => React.ReactNode;
-  api: GridApiRef;
+  api: GridApiRefCommunity;
   hasError: boolean;
   componentProps?: any[];
 }

packages/grid/_modules_/grid/components/cell/GridTreeDataGroupingCell.tsx

@@ -12,6 +12,7 @@ import { isNavigationKey, isSpaceKey } from '../../utils/keyboardUtils';
 import { GridEvents } from '../../models/events';
 import { getDataGridUtilityClass } from '../../gridClasses';
 import { DataGridProProcessedProps } from '../../models/props/DataGridProProps';
+import { GridApiPro } from '../../models/api/gridApi';
 
 type OwnerState = { classes: DataGridProProcessedProps['classes'] };
 
@@ -34,7 +35,7 @@ const GridTreeDataGroupingCell = (props: GridTreeDataGroupingCellProps) => {
   const { id, field, rowNode, hideDescendantCount } = props;
 
   const rootProps = useGridRootProps();
-  const apiRef = useGridApiContext();
+  const apiRef = useGridApiContext<GridApiPro>();
   const ownerState: OwnerState = { classes: rootProps.classes };
   const classes = useUtilityClasses(ownerState);
   const filteredDescendantCountLookup = useGridSelector(

packages/grid/_modules_/grid/components/menu/columnMenu/GridColumnPinningMenuItems.tsx

@@ -4,6 +4,7 @@ import MenuItem from '@mui/material/MenuItem';
 import { useGridApiContext } from '../../../hooks/utils/useGridApiContext';
 import { GridColDef } from '../../../models/colDef/gridColDef';
 import { GridPinnedPosition } from '../../../models/api/gridColumnPinningApi';
+import { GridApiPro } from '../../../models/api/gridApi';
 
 interface GridColumnPinningMenuItemsProps {
   column?: GridColDef;
@@ -12,7 +13,7 @@ interface GridColumnPinningMenuItemsProps {
 
 const GridColumnPinningMenuItems = (props: GridColumnPinningMenuItemsProps) => {
   const { column, onClick } = props;
-  const apiRef = useGridApiContext();
+  const apiRef = useGridApiContext<GridApiPro>();
 
   const pinColumn = (side: GridPinnedPosition) => (event: React.MouseEvent<HTMLElement>) => {
     apiRef.current.pinColumn(column!.field, side);

packages/grid/_modules_/grid/components/menu/columnMenu/GridRowGroupableColumnMenuItems.tsx

@@ -6,6 +6,7 @@ import { GridColDef } from '../../../models/colDef/gridColDef';
 import { useGridSelector } from '../../../hooks/utils/useGridSelector';
 import { gridRowGroupingSanitizedModelSelector } from '../../../hooks/features/rowGrouping/gridRowGroupingSelector';
 import { gridColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { GridApiPro } from '../../../models/api/gridApi';
 
 interface GridRowGroupableColumnMenuItemsProps {
   column?: GridColDef;
@@ -14,7 +15,7 @@ interface GridRowGroupableColumnMenuItemsProps {
 
 const GridRowGroupableColumnMenuItems = (props: GridRowGroupableColumnMenuItemsProps) => {
   const { column, onClick } = props;
-  const apiRef = useGridApiContext();
+  const apiRef = useGridApiContext<GridApiPro>();
   const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);
 

packages/grid/_modules_/grid/components/menu/columnMenu/GridRowGroupingColumnMenuItems.tsx

@@ -11,6 +11,7 @@ import {
   isGroupingColumn,
 } from '../../../hooks/features/rowGrouping/gridRowGroupingUtils';
 import { gridColumnLookupSelector } from '../../../hooks/features/columns/gridColumnsSelector';
+import { GridApiPro } from '../../../models';
 
 interface GridRowGroupingColumnMenuItemsProps {
   column?: GridColDef;
@@ -19,7 +20,7 @@ interface GridRowGroupingColumnMenuItemsProps {
 
 const GridRowGroupingColumnMenuItems = (props: GridRowGroupingColumnMenuItemsProps) => {
   const { column, onClick } = props;
-  const apiRef = useGridApiContext();
+  const apiRef = useGridApiContext<GridApiPro>();
   const rowGroupingModel = useGridSelector(apiRef, gridRowGroupingSanitizedModelSelector);
   const columnsLookup = useGridSelector(apiRef, gridColumnLookupSelector);