[DataGrid] Set default GridCellParams['value'] type to unknown (#…

…6959)

Closes #5614

docs/data/data-grid/column-spanning/ColumnSpanningDerived.tsx

@@ -74,7 +74,7 @@ const slotColumnCommonFields: Partial<GridColDef> = {
   pinnable: false,
   hideable: false,
   minWidth: 140,
-  cellClassName: (params: GridCellParams) => params.value,
+  cellClassName: (params) => params.value,
   colSpan: ({ row, field, value }: GridCellParams) => {
     const index = Number(field);
     let colSpan = 1;

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

@@ -10,15 +10,15 @@
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellClick",
     "description": "Fired when a cell is clicked.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>",
     "componentProp": "onCellClick"
   },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellDoubleClick",
     "description": "Fired when a cell is double-clicked.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>",
     "componentProp": "onCellDoubleClick"
   },
@@ -42,30 +42,30 @@
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellFocusIn",
     "description": "Fired when a cell gains focus.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<{}>"
   },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellFocusOut",
     "description": "Fired when a cell loses focus.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<MuiBaseEvent>",
     "componentProp": "onCellFocusOut"
   },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellKeyDown",
     "description": "Fired when a <code>keydown</code> event happens in a cell.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<React.KeyboardEvent<HTMLElement>>",
     "componentProp": "onCellKeyDown"
   },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellKeyUp",
     "description": "Fired when a <code>keyup</code> event happens in a cell.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<React.KeyboardEvent<HTMLElement>>"
   },
   {
@@ -79,21 +79,21 @@
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellMouseDown",
     "description": "Fired when a <code>mousedown</code> event happens in a cell.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellMouseOver",
     "description": "Fired when a <code>mouseover</code> event happens in a cell.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },
   {
     "projects": ["x-data-grid", "x-data-grid-pro", "x-data-grid-premium"],
     "name": "cellMouseUp",
     "description": "Fired when a <code>mouseup</code> event happens in a cell.",
-    "params": "GridCellParams",
+    "params": "GridCellParams<any>",
     "event": "MuiEvent<React.MouseEvent<HTMLElement>>"
   },
   {

docs/data/data-grid/filtering/QuickFilteringCustomLogic.js

@@ -24,7 +24,10 @@ const getApplyFilterFnSameYear = (value) => {
     return null;
   }
   return (params) => {
-    return params.value.getFullYear() === Number(value);
+    if (params.value instanceof Date) {
+      return params.value.getFullYear() === Number(value);
+    }
+    return false;
   };
 };
 

docs/data/data-grid/filtering/QuickFilteringCustomLogic.tsx

@@ -24,7 +24,10 @@ const getApplyFilterFnSameYear = (value: string) => {
     return null;
   }
   return (params: GridCellParams): boolean => {
-    return params.value.getFullYear() === Number(value);
+    if (params.value instanceof Date) {
+      return params.value.getFullYear() === Number(value);
+    }
+    return false;
   };
 };
 

docs/data/data-grid/recipes-editing/EditingWithDatePickers.tsx

@@ -39,7 +39,7 @@ function buildApplyDateFilterFn(
 
   const filterValueMs = filterItem.value.getTime();
 
-  return ({ value }: GridCellParams<Date, any, any>): boolean => {
+  return ({ value }: GridCellParams<Date>): boolean => {
     if (!value) {
       return false;
     }

docs/data/migration/migration-data-grid-v5/migration-data-grid-v5.md

@@ -111,6 +111,7 @@ The minimum supported Node.js version has been changed from 12.0.0 to 14.0.0, si
 
 - The `GridRowParams['getValue']` property was removed. Use `params.row` instead.
 - The `GridCellParams['getValue']` property was removed. Use `params.row` instead.
+- The default type of `GridCellParams['value']` was changed from `any` to `unknown`.
 - The `GridActionsCellProps['api']` property was removed. Use `useGridApiContext` hook instead to get `apiRef`.
 - The `GridActionsCellProps['getValue']` property was removed. Use `params.row` instead.
 - The `GridFooterCellProps['getValue']` property was removed. Use `params.row` instead.

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

@@ -19,7 +19,7 @@ import { GridColDef } from '@mui/x-data-grid';
 | <span class="prop-name optional">aggregable<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span>                    | <span class="prop-type">boolean</span>                                                                                                                                                             | <span class="prop-default">true</span>      | If `true`, the cells of the column can be aggregated based.                                                                                                        |
 | <span class="prop-name optional">align<sup><abbr title="optional">?</abbr></sup></span>                                                                                                                            | <span class="prop-type">GridAlignment</span>                                                                                                                                                       |                                             | Allows to align the column values in cells.                                                                                                                        |
 | <span class="prop-name optional">availableAggregationFunctions<sup><abbr title="optional">?</abbr></sup> [<span class="plan-premium" title="Premium plan"></span>](/x/introduction/licensing/#premium-plan)</span> | <span class="prop-type">string[]</span>                                                                                                                                                            |                                             | Limit the aggregation function usable on this column.<br />By default, the column will have all the aggregation functions that are compatible with its type.       |
-| <span class="prop-name optional">cellClassName<sup><abbr title="optional">?</abbr></sup></span>                                                                                                                    | <span class="prop-type">GridCellClassNamePropType</span>                                                                                                                                           |                                             | Class name that will be added in cells for that column.                                                                                                            |
+| <span class="prop-name optional">cellClassName<sup><abbr title="optional">?</abbr></sup></span>                                                                                                                    | <span class="prop-type">GridCellClassNamePropType&lt;V&gt;</span>                                                                                                                                  |                                             | Class name that will be added in cells for that column.                                                                                                            |
 | <span class="prop-name optional">colSpan<sup><abbr title="optional">?</abbr></sup></span>                                                                                                                          | <span class="prop-type">number \| ((params: GridCellParams&lt;V, R, F&gt;) =&gt; number \| undefined)</span>                                                                                       | <span class="prop-default">1</span>         | Number of columns a cell should span.                                                                                                                              |
 | <span class="prop-name optional">description<sup><abbr title="optional">?</abbr></sup></span>                                                                                                                      | <span class="prop-type">string</span>                                                                                                                                                              |                                             | The description of the column rendered as tooltip if the column header name is not fully displayed.                                                                |
 | <span class="prop-name optional">disableColumnMenu<sup><abbr title="optional">?</abbr></sup></span>                                                                                                                | <span class="prop-type">boolean</span>                                                                                                                                                             | <span class="prop-default">false</span>     | If `true`, the column menu is disabled for this column.                                                                                                            |

packages/grid/x-data-grid-generator/src/renderer/renderRating.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
-import { GridRenderCellParams, GridRowId } from '@mui/x-data-grid-premium';
+import { GridRenderCellParams } from '@mui/x-data-grid-premium';
 import Rating from '@mui/material/Rating';
 
 interface RatingValueProps {
@@ -23,7 +23,7 @@ const RatingValue = React.memo(function RatingValue(props: RatingValueProps) {
   );
 });
 
-export function renderRating(params: GridRenderCellParams<number, { id: GridRowId }, any>) {
+export function renderRating(params: GridRenderCellParams<number, any, any>) {
   if (params.value == null) {
     return '';
   }

packages/grid/x-data-grid/src/colDef/gridDateOperators.ts

@@ -23,7 +23,7 @@ function buildApplyFilterFn(
 
   const time = new Date(year, month - 1, day, hour || 0, minute || 0).getTime();
 
-  return ({ value }: GridCellParams<string | number | Date, any, any>): boolean => {
+  return ({ value }: GridCellParams<string | number | Date>): boolean => {
     if (!value) {
       return false;
     }

packages/grid/x-data-grid/src/colDef/gridNumericOperators.ts

@@ -3,7 +3,7 @@ import { GridFilterInputMultipleValue } from '../components/panel/filterPanel/Gr
 import { GridFilterOperator } from '../models/gridFilterOperator';
 import { GridCellParams } from '../models';
 
-const parseNumericValue = (value: string | number | null | undefined) => {
+const parseNumericValue = (value: unknown) => {
   if (value == null) {
     return null;
   }

packages/grid/x-data-grid/src/colDef/gridSingleSelectOperators.ts

@@ -1,15 +1,14 @@
 import { GridFilterInputSingleSelect } from '../components/panel/filterPanel/GridFilterInputSingleSelect';
 import { GridFilterOperator } from '../models/gridFilterOperator';
-import { GridFilterItem } from '../models/gridFilterItem';
 import { GridFilterInputMultipleSingleSelect } from '../components/panel/filterPanel/GridFilterInputMultipleSingleSelect';
 import { GridCellParams, GridColDef } from '../models';
 import { GridApiCommunity } from '../models/api/gridApiCommunity';
+import { isObject } from '../utils/utils';
 
-const parseObjectValue = (value: GridFilterItem) => {
-  if (value == null || typeof value !== 'object') {
+const parseObjectValue = (value: unknown) => {
+  if (value == null || !isObject<{ value: unknown }>(value)) {
     return value;
   }
-
   return value.value;
 };
 
@@ -23,7 +22,7 @@ export const getGridSingleSelectQuickFilterFn = (
   }
   const { valueOptions, valueFormatter, field } = column;
 
-  const potentialValues = [parseObjectValue(value).toString()];
+  const potentialValues = [parseObjectValue(value)?.toString()];
 
   const iterableColumnValues =
     typeof valueOptions === 'function' ? valueOptions({ field }) : valueOptions || [];
@@ -55,7 +54,7 @@ export const getGridSingleSelectQuickFilterFn = (
 
   return ({ value: columnValue }: GridCellParams): boolean => {
     return columnValue != null
-      ? potentialValues.includes(parseObjectValue(columnValue).toString())
+      ? potentialValues.includes(parseObjectValue(columnValue)?.toString())
       : false;
   };
 };

packages/grid/x-data-grid/src/models/colDef/gridColDef.ts

@@ -35,7 +35,7 @@ export type GridKeyValue = string | number | boolean;
 /**
  * Column Definition base interface.
  */
-export interface GridBaseColDef<R extends GridValidRowModel = any, V = any, F = V> {
+export interface GridBaseColDef<R extends GridValidRowModel = GridValidRowModel, V = any, F = V> {
   /**
    * The column identifier. It's used to map with [[GridRowModel]] values.
    */
@@ -155,7 +155,7 @@ export interface GridBaseColDef<R extends GridValidRowModel = any, V = any, F =
   /**
    * Class name that will be added in cells for that column.
    */
-  cellClassName?: GridCellClassNamePropType;
+  cellClassName?: GridCellClassNamePropType<V>;
   /**
    * Allows to override the component rendered as cell for this column.
    * @template R, V, F

packages/grid/x-data-grid/src/models/events/gridEventLookup.ts

@@ -215,57 +215,57 @@ export interface GridCellEventLookup {
    * Fired when a cell is clicked.
    */
   cellClick: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.MouseEvent<HTMLElement>;
   };
   /**
    * Fired when a cell is double-clicked.
    */
   cellDoubleClick: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.MouseEvent<HTMLElement>;
   };
   /**
    * Fired when a `mousedown` event happens in a cell.
    */
   cellMouseDown: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.MouseEvent<HTMLElement>;
   };
   /**
    * Fired when a `mouseup` event happens in a cell.
    */
   cellMouseUp: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.MouseEvent<HTMLElement>;
   };
   /**
    * Fired when a `mouseover` event happens in a cell.
    */
   cellMouseOver: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.MouseEvent<HTMLElement>;
   };
   /**
    * Fired when a `keydown` event happens in a cell.
    */
   cellKeyDown: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.KeyboardEvent<HTMLElement>;
   };
   /**
    * Fired when a `keyup` event happens in a cell.
    */
   cellKeyUp: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.KeyboardEvent<HTMLElement>;
   };
   /**
    * Fired when the dragged cell enters a valid drop target. It's mapped to the `dragend` DOM event.
    * @ignore - do not document.
    */
   cellDragEnter: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.DragEvent<HTMLElement>;
   };
   /**
@@ -274,7 +274,7 @@ export interface GridCellEventLookup {
    * @ignore - do not document.
    */
   cellDragOver: {
-    params: GridCellParams;
+    params: GridCellParams<any>;
     event: React.DragEvent<HTMLElement>;
   };
 }
@@ -422,7 +422,7 @@ export interface GridEventLookup
    * Fired when the mode of a cell changes.
    * @ignore - do not document
    */
-  cellModeChange: { params: GridCellParams };
+  cellModeChange: { params: GridCellParams<any> };
   /**
    * Fired when the model that controls the cell modes changes.
    */
@@ -468,11 +468,11 @@ export interface GridEventLookup
   /**
    * Fired when a cell gains focus.
    */
-  cellFocusIn: { params: GridCellParams };
+  cellFocusIn: { params: GridCellParams<any> };
   /**
    * Fired when a cell loses focus.
    */
-  cellFocusOut: { params: GridCellParams; event: MuiBaseEvent };
+  cellFocusOut: { params: GridCellParams<any>; event: MuiBaseEvent };
 
   // Scroll
   /**

packages/grid/x-data-grid/src/models/gridCellClass.ts

@@ -3,9 +3,9 @@ import { GridCellParams } from './params/gridCellParams';
 /**
  * A function used to process cellClassName params.
  */
-export type GridCellClassFn = (params: GridCellParams) => string;
+export type GridCellClassFn<V = any> = (params: GridCellParams<V>) => string;
 
 /**
  * The union type representing the [[GridColDef]] cell class type.
  */
-export type GridCellClassNamePropType = string | GridCellClassFn;
+export type GridCellClassNamePropType<V = any> = string | GridCellClassFn<V>;

packages/grid/x-data-grid/src/models/params/gridCellParams.ts

@@ -15,7 +15,7 @@ import { GridApiCommunity } from '../api/gridApiCommunity';
  * Object passed as parameter in the column [[GridColDef]] cell renderer.
  */
 export interface GridCellParams<
-  V = any,
+  V = unknown,
   R extends GridValidRowModel = any,
   F = V,
   N extends GridTreeNode = GridTreeNode,
@@ -113,7 +113,7 @@ export interface GridRenderEditCellParams<
  */
 export interface GridValueGetterParams<
   V = any,
-  R extends GridValidRowModel = GridValidRowModel,
+  R extends GridValidRowModel = any,
   N extends GridTreeNodeWithRender = GridTreeNodeWithRender,
 > extends Omit<GridCellParams<V, R, any, N>, 'formattedValue' | 'isEditable'> {
   /**

packages/grid/x-data-grid/src/tests/columns.spec.tsx

@@ -108,7 +108,7 @@ function CellParamsValue() {
     <DataGrid
       rows={[]}
       columns={[{ field: 'brand' }]}
-      onCellClick={(params: GridCellParams) => {
+      onCellClick={(params) => {
         params.value!.toUpperCase();
       }}
       onCellDoubleClick={(params: GridCellParams<number>) => {

packages/grid/x-data-grid/src/utils/utils.ts

@@ -6,7 +6,7 @@ export function isFunction(value: any): value is Function {
   return typeof value === 'function';
 }
 
-export function isObject(value: any): value is Record<string, any> {
+export function isObject<TObject = Record<string, any>>(value: any): value is TObject {
   return typeof value === 'object';
 }