[typescript] Improve type coverage of colDef

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

@@ -14,9 +14,9 @@ import { GridCellParams } from '@material-ui/data-grid';
 
 | Name                                                                                         | Type                                                                              | Description                                                      |
 | :------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------------- |
-| <span class="prop-name">api</span>                                                           | <span class="prop-type">any</span>                                                | GridApi that let you manipulate the grid.                        |
+| <span class="prop-name">api</span>                                                           | <span class="prop-type">GridApi&lt;&gt;</span>                                    | GridApi that let you manipulate the grid.                        |
 | <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">any</span>                                                | The column of the row that the current cell belongs to.          |
+| <span class="prop-name">colDef</span>                                                        | <span class="prop-type">GridColDef</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">GridCellValue</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-row-params.md

@@ -14,8 +14,8 @@ import { GridRowParams } from '@material-ui/data-grid';
 
 | Name                                    | Type                                                                              | Description                                                |
 | :-------------------------------------- | :-------------------------------------------------------------------------------- | :--------------------------------------------------------- |
-| <span class="prop-name">api</span>      | <span class="prop-type">any</span>                                                | GridApiRef that let you manipulate the grid.               |
-| <span class="prop-name">columns</span>  | <span class="prop-type">any</span>                                                | All grid columns.                                          |
+| <span class="prop-name">api</span>      | <span class="prop-type">GridApi&lt;&gt;</span>                                    | GridApiRef that let you manipulate the grid.               |
+| <span class="prop-name">columns</span>  | <span class="prop-type">GridColumns</span>                                        | All grid columns.                                          |
 | <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.                     |
 | <span class="prop-name">id</span>       | <span class="prop-type">GridRowId</span>                                          | The grid row id.                                           |
 | <span class="prop-name">row</span>      | <span class="prop-type">GridRowData</span>                                        | The row model of the row that the current cell belongs to. |

docs/scripts/formattedTSDemos.js

@@ -87,7 +87,12 @@ async function transpileFile(tsxPath, program, ignoreCache = false) {
 
     const propTypesAST = typescriptToProptypes.parseFromProgram(tsxPath, program, {
       shouldResolveObject: ({ name }) => {
-        if (name === 'classes' || name === 'state' || name === 'currentColumn') {
+        if (
+          name === 'classes' ||
+          name === 'state' ||
+          name === 'currentColumn' ||
+          name === 'colDef'
+        ) {
           return false;
         }
 

docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.js

@@ -120,7 +120,7 @@ renderCellExpand.propTypes = {
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: PropTypes.any.isRequired,
+  colDef: PropTypes.object.isRequired,
   /**
    * The cell value, but if the column has valueGetter, use getValue.
    */

docs/src/pages/components/data-grid/columns/RenderExpandCellGrid.tsx

@@ -119,7 +119,7 @@ function renderCellExpand(params: GridCellParams) {
   return (
     <GridCellExpand
       value={params.value ? params.value.toString() : ''}
-      width={params.colDef.width}
+      width={params.colDef.width!}
     />
   );
 }

docs/src/pages/components/data-grid/editing/RenderRatingEditCellGrid.js

@@ -54,7 +54,7 @@ RatingEditInputCell.propTypes = {
   /**
    * GridApi that let you manipulate the grid.
    */
-  api: PropTypes.any.isRequired,
+  api: PropTypes.object.isRequired,
   /**
    * The column field of the cell that triggered the event
    */

docs/src/pages/components/data-grid/sorting/ComparatorSortingGrid.tsx

@@ -22,8 +22,8 @@ const columns: GridColumns = [
         params.getValue(params.id, 'age') || 'x'
       }`,
     sortComparator: (v1, v2, param1, param2) =>
-      param1.api.getCellValue(param1.id, 'age') -
-      param2.api.getCellValue(param2.id, 'age'),
+      (param1.api.getCellValue(param1.id, 'age') as number) -
+      (param2.api.getCellValue(param2.id, 'age') as number),
     width: 150,
   },
   { field: 'dateCreated', type: 'date', width: 180 },

docs/src/pages/components/data-grid/style/style.md

@@ -47,11 +47,11 @@ interface GridRowParams {
   /**
    * All grid columns.
    */
-  columns: any;
+  columns: GridColumns;
   /**
    * GridApiRef that let you manipulate the grid.
    */
-  api: any;
+  api: GridApi;
   /**
    * Get the cell value of a row and field.
    * @param id

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

@@ -20,7 +20,7 @@ export const GridBooleanCell = React.memo((props: GridCellParams & SvgIconProps)
   } = props;
 
   const Icon = React.useMemo(
-    () => (value ? api.components.BooleanCellTrueIcon : api.components.BooleanCellFalseIcon),
+    () => (value ? api.components.BooleanCellTrueIcon! : api.components.BooleanCellFalseIcon!),
     [api.components.BooleanCellFalseIcon, api.components.BooleanCellTrueIcon, value],
   );
 

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

@@ -58,7 +58,7 @@ export function GridEditSingleSelectCell(props: GridCellParams & SelectProps) {
       open
       {...other}
     >
-      {colDef.valueOptions.map(renderSingleSelectOptions)}
+      {colDef.valueOptions?.map(renderSingleSelectOptions)}
     </Select>
   );
 }

packages/grid/_modules_/grid/components/columnHeaders/GridColumnHeaderItem.tsx

@@ -128,7 +128,7 @@ export function GridColumnHeaderItem(props: GridColumnHeaderItemProps) {
 
   if (column.headerClassName) {
     const headerClassName = isFunction(column.headerClassName)
-      ? column.headerClassName({ field: column.field, colDef: column, api: apiRef })
+      ? column.headerClassName({ field: column.field, colDef: column, api: apiRef.current })
       : column.headerClassName;
 
     classNames.push(headerClassName);

packages/grid/_modules_/grid/hooks/features/rows/useGridEditRows.ts

@@ -117,8 +117,8 @@ export function useGridEditRows(
 
   const isCellEditable = React.useCallback(
     (params: GridCellParams) =>
-      params.colDef.editable &&
-      params.colDef!.renderEditCell &&
+      !!params.colDef.editable &&
+      !!params.colDef!.renderEditCell &&
       (!options.isCellEditable || options.isCellEditable(params)),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [options.isCellEditable],

packages/grid/_modules_/grid/models/api/gridEditRowApi.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { GridCellMode } from '../gridCell';
 import { GridEditRowsModel } from '../gridEditRowModel';
 import { GridRowId } from '../gridRows';

packages/grid/_modules_/grid/models/gridFilterOperator.ts

@@ -2,13 +2,14 @@ import * as React from 'react';
 import { GridFilterInputValueProps } from '../components/panel/filterPanel/GridFilterInputValueProps';
 import { GridFilterItem } from './gridFilterItem';
 import { GridCellParams } from './params/gridCellParams';
+import type { GridColDef } from './colDef';
 
 export interface GridFilterOperator {
   label?: string;
   value: string;
   getApplyFilterFn: (
     filterItem: GridFilterItem,
-    column: any,
+    column: GridColDef,
   ) => null | ((params: GridCellParams) => boolean);
   InputComponent?: React.JSXElementConstructor<GridFilterInputValueProps>;
   InputComponentProps?: Record<string, any>;

packages/grid/_modules_/grid/models/gridSortModel.ts

@@ -1,5 +1,6 @@
 import { GridCellValue } from './gridCell';
 import { GridRowId } from './gridRows';
+import type { GridApi } from './api';
 
 export type GridSortDirection = 'asc' | 'desc' | null | undefined;
 
@@ -9,7 +10,7 @@ export interface GridSortCellParams {
   id: GridRowId;
   field: string;
   value: GridCellValue;
-  api: any;
+  api: GridApi;
 }
 
 /**

packages/grid/_modules_/grid/models/params/gridCellParams.ts

@@ -1,5 +1,7 @@
 import { GridCellMode, GridCellValue } from '../gridCell';
 import { GridRowId, GridRowModel } from '../gridRows';
+import type { GridColDef } from '../colDef';
+import type { GridApi } from '../api';
 
 /**
  * Object passed as parameter in the column [[GridColDef]] cell renderer.
@@ -28,11 +30,11 @@ export interface GridCellParams {
   /**
    * The column of the row that the current cell belongs to.
    */
-  colDef: any;
+  colDef: GridColDef;
   /**
    * GridApi that let you manipulate the grid.
    */
-  api: any;
+  api: GridApi;
   /**
    * If true, the cell is editable.
    */

packages/grid/_modules_/grid/models/params/gridColumnHeaderParams.ts

@@ -1,3 +1,6 @@
+import type { GridApi } from '../api';
+import type { GridColDef } from '../colDef';
+
 /**
  * Object passed as parameter in the column [[GridColDef]] header renderer.
  */
@@ -9,9 +12,9 @@ export interface GridColumnHeaderParams {
   /**
    * The column of the current header component.
    */
-  colDef: any;
+  colDef: GridColDef;
   /**
    * API ref that let you manipulate the grid.
    */
-  api: any;
+  api: GridApi;
 }

packages/grid/_modules_/grid/models/params/gridColumnOrderChangeParams.ts

@@ -1,3 +1,6 @@
+import type { GridApi } from '../api';
+import type { GridColDef } from '../colDef';
+
 /**
  * Object passed as parameter of the column order change event.
  */
@@ -13,7 +16,7 @@ export interface GridColumnOrderChangeParams {
   /**
    * The column of the current header component.
    */
-  colDef: any;
+  colDef: GridColDef;
   /**
    * The target column index.
    */
@@ -25,5 +28,5 @@ export interface GridColumnOrderChangeParams {
   /**
    * API ref that let you manipulate the grid.
    */
-  api: any;
+  api: GridApi;
 }

packages/grid/_modules_/grid/models/params/gridColumnResizeParams.ts

@@ -1,3 +1,6 @@
+import type { GridApiRef } from '../api';
+import type { GridColDef } from '../colDef';
+
 /**
  * Object passed as parameter of the column resize event.
  */
@@ -9,11 +12,11 @@ export interface GridColumnResizeParams {
   /**
    * The column of the current header component.
    */
-  colDef: any;
+  colDef: GridColDef;
   /**
    * API ref that let you manipulate the grid.
    */
-  api: any;
+  api: GridApiRef;
   /**
    * The width of the column.
    */

packages/grid/_modules_/grid/models/params/gridColumnVisibilityChangeParams.ts

@@ -1,3 +1,6 @@
+import type { GridApiRef } from '../api';
+import type { GridColDef } from '../colDef';
+
 /**
  * Object passed as parameter of the column visibility change event.
  */
@@ -9,11 +12,11 @@ export interface GridColumnVisibilityChangeParams {
   /**
    * The column of the current header component.
    */
-  colDef: any;
+  colDef: GridColDef;
   /**
    * API ref that let you manipulate the grid.
    */
-  api: any;
+  api: GridApiRef;
   /**
    * The visibility state of the column.
    */

packages/grid/_modules_/grid/models/params/gridEditCellParams.ts

@@ -2,6 +2,8 @@ import { GridCellMode, GridCellValue } from '../gridCell';
 import { GridEditCellProps } from '../gridEditRowModel';
 import { GridRowId } from '../gridRows';
 
+import type { GridApi } from '../api';
+
 export interface GridEditCellPropsParams {
   id: GridRowId;
   field: string;
@@ -17,7 +19,7 @@ export interface GridEditCellValueParams {
 export interface GridCellModeChangeParams {
   id: GridRowId;
   field: string;
-  api: any;
+  api: GridApi;
   mode: GridCellMode;
 }
 

packages/grid/_modules_/grid/models/params/gridRowParams.ts

@@ -1,5 +1,7 @@
 import { GridCellValue } from '../gridCell';
 import { GridRowId, GridRowModel } from '../gridRows';
+import type { GridApi } from '../api';
+import type { GridColumns } from '../colDef';
 
 /**
  * Object passed as parameter in the column [[GridColDef]] cell renderer.
@@ -16,11 +18,11 @@ export interface GridRowParams {
   /**
    * All grid columns.
    */
-  columns: any;
+  columns: GridColumns;
   /**
    * GridApiRef that let you manipulate the grid.
    */
-  api: any;
+  api: GridApi;
   /**
    * Get the cell value of a row and field.
    * @param id

packages/grid/_modules_/grid/models/params/gridRowScrollEndParams.ts

@@ -1,4 +1,5 @@
-import { GridColumns } from '../colDef/gridColDef';
+import type { GridColumns } from '../colDef';
+import type { GridApiRef } from '../api';
 
 /**
  * Object passed as parameter in the onRowsScrollEnd callback.
@@ -19,5 +20,5 @@ export interface GridRowScrollEndParams {
   /**
    * API ref that let you manipulate the grid.
    */
-  api: any;
+  api: GridApiRef;
 }

packages/grid/_modules_/grid/models/params/gridSortModelParams.ts

@@ -1,5 +1,7 @@
 import { GridColumns } from '../colDef/gridColDef';
 import { GridSortModel } from '../gridSortModel';
+import type { GridApi } from '../api';
+
 /**
  * Object passed as parameter of the column sorted event.
  */
@@ -15,5 +17,5 @@ export interface GridSortModelParams {
   /**
    * Api that let you manipulate the grid.
    */
-  api: any;
+  api: GridApi;
 }

packages/grid/_modules_/grid/models/params/gridStateChangeParams.ts

@@ -1,6 +1,7 @@
 import { GridState } from '../../hooks/features/core/gridState';
+import { GridApi } from '../api';
 
 export interface GridStateChangeParams {
   state: GridState;
-  api: any;
+  api: GridApi;
 }

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

@@ -32,9 +32,9 @@ function EditContractType(props: GridCellParams) {
 
   const handleChange = (event) => {
     const editProps = { value: event.target.value };
-    api.setEditCellProps({ id, field, props: editProps }, event);
+    api.setEditCellProps({ id, field, props: editProps });
     if (!event.key) {
-      api.commitCellChange({ id, field, props: editProps });
+      api.commitCellChange({ id, field });
       api.setCellMode(id, field, 'view');
     }
   };

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

@@ -47,9 +47,9 @@ function EditCountry(props: GridCellParams) {
   const handleChange = React.useCallback(
     (event, newValue) => {
       const editProps = { value: newValue };
-      api.setEditCellProps({ id, field, props: editProps }, event);
+      api.setEditCellProps({ id, field, props: editProps });
       if (!event.key) {
-        api.commitCellChange({ id, field, props: editProps });
+        api.commitCellChange({ id, field });
         api.setCellMode(id, field, 'view');
       }
     },

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

@@ -47,7 +47,7 @@ function EditCurrency(props: GridCellParams) {
   const handleChange = React.useCallback(
     (event, newValue) => {
       const editProps = { value: newValue.toUpperCase() };
-      api.setEditCellProps({ id, field, props: editProps }, event);
+      api.setEditCellProps({ id, field, props: editProps });
       if (!event.key) {
         api.commitCellChange({ id, field });
         api.setCellMode(id, field, 'view');

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

@@ -34,7 +34,7 @@ function EditIncoterm(props: GridCellParams) {
 
   const handleChange = (event) => {
     const editProps = { value: event.target.value };
-    api.setEditCellProps({ id, field, props: editProps }, event);
+    api.setEditCellProps({ id, field, props: editProps });
     if (!event.key) {
       api.commitCellChange({ id, field });
       api.setCellMode(id, field, 'view');