[DataGrid] Allow higher packages' props to be used in MIT (#12365)

packages/x-data-grid-premium/src/models/dataGridPremiumProps.ts

@@ -11,6 +11,7 @@ import {
   DataGridProPropsWithoutDefaultValue,
   DataGridPropsWithComplexDefaultValueAfterProcessing,
   DataGridPropsWithComplexDefaultValueBeforeProcessing,
+  DataGridPremiumSharedPropsWithDefaultValue,
 } from '@mui/x-data-grid-pro/internals';
 import type { GridRowGroupingModel } from '../hooks/features/rowGrouping';
 import type {
@@ -65,12 +66,8 @@ export type DataGridPremiumForcedPropsKey = 'signature';
  * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`.
  */
 export interface DataGridPremiumPropsWithDefaultValue<R extends GridValidRowModel = any>
-  extends DataGridProPropsWithDefaultValue<R> {
-  /**
-   * If `true`, the cell selection mode is enabled.
-   * @default false
-   */
-  cellSelection: boolean;
+  extends DataGridProPropsWithDefaultValue<R>,
+    DataGridPremiumSharedPropsWithDefaultValue {
   /**
    * If `true`, aggregation is disabled.
    * @default false

packages/x-data-grid-pro/src/models/dataGridProProps.ts

@@ -15,6 +15,7 @@ import {
   DataGridPropsWithComplexDefaultValueAfterProcessing,
   DataGridPropsWithComplexDefaultValueBeforeProcessing,
   GridPinnedColumnFields,
+  DataGridProSharedPropsWithDefaultValue,
 } from '@mui/x-data-grid/internals';
 import type { GridPinnedRowsProp } from '../hooks/features/rowPinning';
 import { GridApiPro } from './gridApiPro';
@@ -68,7 +69,8 @@ export type DataGridProForcedPropsKey = 'signature';
  * The controlled model do not have a default value at the prop processing level, so they must be defined in `DataGridOtherProps`
  */
 export interface DataGridProPropsWithDefaultValue<R extends GridValidRowModel = any>
-  extends DataGridPropsWithDefaultValues<R> {
+  extends DataGridPropsWithDefaultValues<R>,
+    DataGridProSharedPropsWithDefaultValue {
   /**
    * Set the area in `px` at the bottom of the grid viewport where onRowsScrollEnd is called.
    * @default 80
@@ -132,11 +134,6 @@ export interface DataGridProPropsWithDefaultValue<R extends GridValidRowModel =
    * @default false
    */
   keepColumnPositionIfDraggedOutside: boolean;
-  /**
-   * If `true`, enables the data grid filtering on header feature.
-   * @default false
-   */
-  headerFilters: boolean;
 }
 
 export interface DataGridProPropsWithoutDefaultValue<R extends GridValidRowModel = any>

packages/x-data-grid/src/components/cell/GridCell.tsx

@@ -31,7 +31,10 @@ import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { gridFocusCellSelector } from '../../hooks/features/focus/gridFocusStateSelector';
 import { MissingRowIdError } from '../../hooks/features/rows/useGridParamsApi';
-import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
+import type {
+  DataGridProcessedProps,
+  DataGridProcessedPropsWithShared,
+} from '../../models/props/DataGridProps';
 import { shouldCellShowLeftBorder, shouldCellShowRightBorder } from '../../utils/cellBorderUtils';
 import { GridPinnedColumnPosition } from '../../hooks/features/columns/gridColumnsInterfaces';
 
@@ -77,6 +80,7 @@ export type GridCellProps = {
 type CellParamsWithAPI = GridCellParams<any, any, any, GridTreeNodeWithRender> & {
   api: GridApiCommunity;
 };
+
 const EMPTY_CELL_PARAMS: CellParamsWithAPI = {
   id: -1,
   field: '__unset__',
@@ -176,7 +180,7 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
   } = props;
 
   const apiRef = useGridApiContext();
-  const rootProps = useGridRootProps();
+  const rootProps = useGridRootProps() as DataGridProcessedPropsWithShared;
 
   const field = column.field;
 
@@ -257,7 +261,6 @@ const GridCell = React.forwardRef<HTMLDivElement, GridCellProps>((props, ref) =>
   const cellRef = React.useRef<HTMLDivElement>(null);
   const handleRef = useForkRef(ref, cellRef);
   const focusElementRef = React.useRef<FocusElement>(null);
-  // @ts-expect-error To access `cellSelection` flag as it's a `premium` feature
   const isSelectionMode = rootProps.cellSelection ?? false;
 
   const position = gridPinnedColumnPositionLookup[pinnedPosition];

packages/x-data-grid/src/hooks/features/headerFiltering/useGridHeaderFiltering.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGridProps';
 import { GridHeaderFilteringState } from '../../../models/gridHeaderFilteringModel';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
@@ -15,19 +15,19 @@ import {
   GridHeaderFilteringPrivateApi,
 } from '../../../models/api/gridHeaderFilteringApi';
 
-export const headerFilteringStateInitializer: GridStateInitializer = (state, props) => ({
+export const headerFilteringStateInitializer: GridStateInitializer = (
+  state,
+  props: DataGridProcessedPropsWithShared,
+) => ({
   ...state,
-  // @ts-expect-error Access `Pro` prop in MIT
   headerFiltering: { enabled: props.headerFilters ?? false, editing: null, menuOpen: null },
 });
 
 export const useGridHeaderFiltering = (
   apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
-  props: Pick<DataGridProcessedProps, 'signature'>,
+  props: Pick<DataGridProcessedPropsWithShared, 'signature' | 'headerFilters'>,
 ) => {
   const logger = useGridLogger(apiRef, 'useGridHeaderFiltering');
-  // @ts-expect-error Access `Pro` prop in MIT
-  const isHeaderFilteringEnabled = props.headerFilters ?? false;
   const setHeaderFilterState = React.useCallback(
     (headerFilterState: Partial<GridHeaderFilteringState>) => {
       apiRef.current.setState((state) => {
@@ -39,15 +39,15 @@ export const useGridHeaderFiltering = (
         return {
           ...state,
           headerFiltering: {
-            enabled: isHeaderFilteringEnabled ?? false,
+            enabled: props.headerFilters ?? false,
             editing: headerFilterState.editing ?? null,
             menuOpen: headerFilterState.menuOpen ?? null,
           },
         };
       });
       apiRef.current.forceUpdate();
     },
-    [apiRef, props.signature, isHeaderFilteringEnabled],
+    [apiRef, props.signature, props.headerFilters],
   );
 
   const startHeaderFilterEditMode = React.useCallback<
@@ -129,7 +129,7 @@ export const useGridHeaderFiltering = (
     if (isFirstRender.current) {
       isFirstRender.current = false;
     } else {
-      apiRef.current.setHeaderFilterState({ enabled: isHeaderFilteringEnabled });
+      apiRef.current.setHeaderFilterState({ enabled: props.headerFilters ?? false });
     }
-  }, [apiRef, isHeaderFilteringEnabled]);
+  }, [apiRef, props.headerFilters]);
 };

packages/x-data-grid/src/hooks/features/keyboardNavigation/useGridKeyboardNavigation.ts

@@ -6,7 +6,7 @@ import { GridCellParams } from '../../../models/params/gridCellParams';
 import { gridVisibleColumnDefinitionsSelector } from '../columns/gridColumnsSelector';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
-import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
+import { DataGridProcessedPropsWithShared } from '../../../models/props/DataGridProps';
 import { gridExpandedSortedRowEntriesSelector } from '../filter/gridFilterSelector';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { GRID_CHECKBOX_SELECTION_COL_DEF } from '../../../colDef/gridCheckboxSelectionColDef';
@@ -92,8 +92,13 @@ const getRightColumnIndex = ({
 export const useGridKeyboardNavigation = (
   apiRef: React.MutableRefObject<GridPrivateApiCommunity>,
   props: Pick<
-    DataGridProcessedProps,
-    'pagination' | 'paginationMode' | 'getRowId' | 'experimentalFeatures' | 'signature'
+    DataGridProcessedPropsWithShared,
+    | 'pagination'
+    | 'paginationMode'
+    | 'getRowId'
+    | 'experimentalFeatures'
+    | 'signature'
+    | 'headerFilters'
   >,
 ): void => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
@@ -105,9 +110,7 @@ export const useGridKeyboardNavigation = (
     [apiRef, initialCurrentPageRows],
   );
 
-  const headerFilteringEnabled =
-    // @ts-expect-error // TODO move relevant code to the `DataGridPro`
-    props.signature !== 'DataGrid' && props.headerFilters;
+  const headerFilteringEnabled = props.signature !== 'DataGrid' && props.headerFilters;
 
   /**
    * @param {number} colIndex Index of the column to focus

packages/x-data-grid/src/internals/index.ts

@@ -130,6 +130,8 @@ export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';
 
 export type {
+  DataGridProSharedPropsWithDefaultValue,
+  DataGridPremiumSharedPropsWithDefaultValue,
   GridExperimentalFeatures,
   DataGridPropsWithoutDefaultValue,
   DataGridPropsWithDefaultValues,

packages/x-data-grid/src/models/props/DataGridProps.ts

@@ -790,3 +790,27 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
    */
   onColumnWidthChange?: GridEventListener<'columnWidthChange'>;
 }
+
+export interface DataGridProSharedPropsWithDefaultValue {
+  /**
+   * If `true`, enables the data grid filtering on header feature.
+   * @default false
+   */
+  headerFilters: boolean;
+}
+
+export interface DataGridPremiumSharedPropsWithDefaultValue {
+  /**
+   * If `true`, the cell selection mode is enabled.
+   * @default false
+   */
+  cellSelection: boolean;
+}
+
+/**
+ * Contains the commercial packages' props shared in the MIT version.
+ */
+export interface DataGridProcessedPropsWithShared
+  extends DataGridProcessedProps,
+    Partial<DataGridProSharedPropsWithDefaultValue>,
+    Partial<DataGridPremiumSharedPropsWithDefaultValue> {}