diff --git a/docs/pages/x/api/data-grid/grid-cell-params.json b/docs/pages/x/api/data-grid/grid-cell-params.json index ff6ddfd6dd02d..2e99ec3bc0fab 100644 --- a/docs/pages/x/api/data-grid/grid-cell-params.json +++ b/docs/pages/x/api/data-grid/grid-cell-params.json @@ -6,6 +6,7 @@ "import { GridCellParams } from '@mui/x-data-grid'" ], "properties": { + "api": { "type": { "description": "GridApiCommunity" }, "required": true }, "cellMode": { "type": { "description": "GridCellMode" }, "required": true }, "colDef": { "type": { "description": "GridStateColDef" }, "required": true }, "field": { "type": { "description": "string" }, "required": true }, diff --git a/docs/translations/api-docs/data-grid/grid-cell-params.json b/docs/translations/api-docs/data-grid/grid-cell-params.json index 39d3bbcc36617..b9be4d64e27e5 100644 --- a/docs/translations/api-docs/data-grid/grid-cell-params.json +++ b/docs/translations/api-docs/data-grid/grid-cell-params.json @@ -1,6 +1,7 @@ { "interfaceDescription": "Object passed as parameter in the column GridColDef cell renderer.", "propertiesDescriptions": { + "api": { "description": "GridApi that let you manipulate the grid." }, "cellMode": { "description": "The mode of the cell." }, "colDef": { "description": "The column of the row that the current cell belongs to." }, "field": { "description": "The column field of the cell that triggered the event." }, diff --git a/packages/x-data-grid/src/components/cell/GridCell.tsx b/packages/x-data-grid/src/components/cell/GridCell.tsx index 68feacc68c28c..81ddc96ba4fac 100644 --- a/packages/x-data-grid/src/components/cell/GridCell.tsx +++ b/packages/x-data-grid/src/components/cell/GridCell.tsx @@ -8,7 +8,6 @@ import { unstable_capitalize as capitalize, } from '@mui/utils'; import { fastMemo } from '@mui/x-internals/fastMemo'; -import type { GridApiCommunity } from '../../internals'; import { doesSupportPreventScroll } from '../../utils/doesSupportPreventScroll'; import { getDataGridUtilityClass, gridClasses } from '../../constants/gridClasses'; import { @@ -75,11 +74,7 @@ export type GridCellProps = { [x: string]: any; // TODO v7: remove this - it breaks type safety }; -type CellParamsWithAPI = GridCellParams & { - api: GridApiCommunity; -}; - -const EMPTY_CELL_PARAMS: CellParamsWithAPI = { +const EMPTY_CELL_PARAMS: GridCellParams = { id: -1, field: '__unset__', row: {}, @@ -183,19 +178,17 @@ const GridCell = React.forwardRef(function GridCe const field = column.field; - const cellParamsWithAPI = useGridSelector( + const cellParams = useGridSelector( apiRef, () => { // This is required because `.getCellParams` tries to get the `state.rows.tree` entry // associated with `rowId`/`fieldId`, but this selector runs after the state has been // updated, while `rowId`/`fieldId` reference an entry in the old state. try { - const cellParams = apiRef.current.getCellParams( + const result = apiRef.current.getCellParams( rowId, field, ); - - const result = cellParams as CellParamsWithAPI; result.api = apiRef.current; return result; } catch (e) { @@ -215,7 +208,7 @@ const GridCell = React.forwardRef(function GridCe }), ); - const { cellMode, hasFocus, isEditable = false, value } = cellParamsWithAPI; + const { cellMode, hasFocus, isEditable = false, value } = cellParams; const canManageOwnFocus = column.type === 'actions' && @@ -223,7 +216,7 @@ const GridCell = React.forwardRef(function GridCe .getActions?.(apiRef.current.getRowParams(rowId)) .some((action) => !action.props.disabled); const tabIndex = - (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParamsWithAPI.tabIndex : -1; + (cellMode === 'view' || !isEditable) && !canManageOwnFocus ? cellParams.tabIndex : -1; const { classes: rootClasses, getCellClassName } = rootProps; @@ -243,7 +236,7 @@ const GridCell = React.forwardRef(function GridCe if (column.cellClassName) { classNames.push( typeof column.cellClassName === 'function' - ? column.cellClassName(cellParamsWithAPI) + ? column.cellClassName(cellParams) : column.cellClassName, ); } @@ -253,10 +246,10 @@ const GridCell = React.forwardRef(function GridCe } if (getCellClassName) { - classNames.push(getCellClassName(cellParamsWithAPI)); + classNames.push(getCellClassName(cellParams)); } - const valueToRender = cellParamsWithAPI.formattedValue ?? value; + const valueToRender = cellParams.formattedValue ?? value; const cellRef = React.useRef(null); const handleRef = useForkRef(ref, cellRef); const focusElementRef = React.useRef(null); @@ -373,7 +366,7 @@ const GridCell = React.forwardRef(function GridCe } }, [hasFocus, cellMode, apiRef]); - if (cellParamsWithAPI === EMPTY_CELL_PARAMS) { + if (cellParams === EMPTY_CELL_PARAMS) { return null; } @@ -411,7 +404,7 @@ const GridCell = React.forwardRef(function GridCe let title: string | undefined; if (editCellState === null && column.renderCell) { - children = column.renderCell(cellParamsWithAPI); + children = column.renderCell(cellParams); } if (editCellState !== null && column.renderEditCell) { @@ -422,10 +415,10 @@ const GridCell = React.forwardRef(function GridCe const formattedValue = column.valueFormatter ? column.valueFormatter(editCellState.value as never, updatedRow, column, apiRef) - : cellParamsWithAPI.formattedValue; + : cellParams.formattedValue; const params: GridRenderEditCellParams = { - ...cellParamsWithAPI, + ...cellParams, row: updatedRow, formattedValue, ...editCellStateRest, diff --git a/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts index 165ba3ee211c0..b663d9700a783 100644 --- a/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts +++ b/packages/x-data-grid/src/hooks/features/rows/useGridParamsApi.ts @@ -77,6 +77,7 @@ export function useGridParamsApi(apiRef: React.MutableRefObject