[core] Type all references as RefObject (#16125)

docs/data/data-grid/column-recipes/ColumnSizingPersistWidthOrder.tsx

@@ -50,7 +50,7 @@ export default function ColumnSizingPersistWidthOrder() {
 }
 
 const useColumnsState = (
-  apiRef: React.MutableRefObject<GridApiPro>,
+  apiRef: React.RefObject<GridApiPro>,
   columns: GridColDef[],
 ) => {
   const [widths, setWidths] = React.useState<Record<GridColDef['field'], number>>(

docs/data/data-grid/components/CustomColumnsPanel.tsx

@@ -43,7 +43,7 @@ function ColumnGroup({
 }: {
   group: GridColumnGroup;
   columnLookup: GridColumnLookup;
-  apiRef: React.MutableRefObject<GridApi>;
+  apiRef: React.RefObject<GridApi>;
   columnVisibilityModel: GridColumnVisibilityModel;
 }) {
   const leaves = React.useMemo(() => {

docs/data/data-grid/export/CustomExport.tsx

@@ -16,7 +16,7 @@ import {
 import MenuItem from '@mui/material/MenuItem';
 import { ButtonProps } from '@mui/material/Button';
 
-const getJson = (apiRef: React.MutableRefObject<GridApi>) => {
+const getJson = (apiRef: React.RefObject<GridApi>) => {
   // Select rows and columns
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
   const visibleColumnsField = gridVisibleColumnFieldsSelector(apiRef);

packages/x-data-grid-premium/src/DataGridPremium/useDataGridPremiumComponent.tsx

@@ -95,7 +95,7 @@ import {
 import { useGridClipboardImport } from '../hooks/features/clipboard/useGridClipboardImport';
 
 export const useDataGridPremiumComponent = (
-  inputApiRef: React.MutableRefObject<GridApiPremium> | undefined,
+  inputApiRef: React.RefObject<GridApiPremium> | undefined,
   props: DataGridPremiumProcessedProps,
 ) => {
   const apiRef = useGridInitialization<GridPrivateApiPremium, GridApiPremium>(inputApiRef, props);

packages/x-data-grid-premium/src/components/GridDataSourceGroupingCriteriaCell.tsx

@@ -39,7 +39,7 @@ interface GridGroupingCriteriaCellIconProps
 }
 
 function GridGroupingCriteriaCellIcon(props: GridGroupingCriteriaCellIconProps) {
-  const apiRef = useGridPrivateApiContext() as React.MutableRefObject<GridPrivateApiPremium>;
+  const apiRef = useGridPrivateApiContext() as React.RefObject<GridPrivateApiPremium>;
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   const { rowNode, id, field, descendantCount } = props;

packages/x-data-grid-premium/src/hooks/features/aggregation/createAggregationLookup.ts

@@ -26,7 +26,7 @@ const getAggregationCellValue = ({
   aggregationFunction,
   aggregationRowsScope,
 }: {
-  apiRef: React.MutableRefObject<GridApiPremium>;
+  apiRef: React.RefObject<GridApiPremium>;
   groupId: GridRowId;
   field: string;
   aggregationFunction: GridAggregationFunction;
@@ -77,7 +77,7 @@ const getGroupAggregatedValue = ({
   position,
 }: {
   groupId: GridRowId;
-  apiRef: React.MutableRefObject<GridApiPremium>;
+  apiRef: React.RefObject<GridApiPremium>;
   aggregationRowsScope: DataGridPremiumProcessedProps['aggregationRowsScope'];
   aggregatedFields: string[];
   aggregationRules: GridAggregationRules;
@@ -110,7 +110,7 @@ export const createAggregationLookup = ({
   aggregationRowsScope,
   getAggregationPosition,
 }: {
-  apiRef: React.MutableRefObject<GridApiPremium>;
+  apiRef: React.RefObject<GridApiPremium>;
   aggregationFunctions: Record<string, GridAggregationFunction>;
   aggregationRowsScope: DataGridPremiumProcessedProps['aggregationRowsScope'];
   getAggregationPosition: DataGridPremiumProcessedProps['getAggregationPosition'];

packages/x-data-grid-premium/src/hooks/features/aggregation/gridAggregationUtils.ts

@@ -123,7 +123,7 @@ interface AddFooterRowsParams {
    * If `true`, there are some aggregation rules to apply
    */
   hasAggregationRule: boolean;
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+  apiRef: React.RefObject<GridPrivateApiPremium>;
 }
 
 /**
@@ -248,7 +248,7 @@ export const getAggregationFunctionLabel = ({
   apiRef,
   aggregationRule,
 }: {
-  apiRef: React.MutableRefObject<GridApiPremium>;
+  apiRef: React.RefObject<GridApiPremium>;
   aggregationRule: GridAggregationRule;
 }): string => {
   if (aggregationRule.aggregationFunction.label != null) {

packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregation.ts

@@ -34,7 +34,7 @@ export const aggregationStateInitializer: GridStateInitializer<
 };
 
 export const useGridAggregation = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: Pick<
     DataGridPremiumProcessedProps,
     | 'onAggregationModelChange'

packages/x-data-grid-premium/src/hooks/features/aggregation/useGridAggregationPreProcessors.tsx

@@ -22,7 +22,7 @@ import { GridInitialStatePremium } from '../../../models/gridStatePremium';
 import { GridAggregationRules } from './gridAggregationInterfaces';
 
 export const useGridAggregationPreProcessors = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: Pick<
     DataGridPremiumProcessedProps,
     'aggregationFunctions' | 'disableAggregation' | 'getAggregationPosition' | 'slotProps' | 'slots'

packages/x-data-grid-premium/src/hooks/features/aggregation/wrapColumnWithAggregation.tsx

@@ -31,7 +31,7 @@ interface GridColDefWithAggregationWrappers extends GridBaseColDef {
 }
 
 type ColumnPropertyWrapper<P extends WrappableColumnProperty> = (params: {
-  apiRef: React.MutableRefObject<GridApiPremium>;
+  apiRef: React.RefObject<GridApiPremium>;
   value: GridBaseColDef[P];
   colDef: GridBaseColDef;
   aggregationRule: GridAggregationRule;
@@ -188,7 +188,7 @@ export const wrapColumnWithAggregationValue = ({
   aggregationRule,
 }: {
   column: GridBaseColDef;
-  apiRef: React.MutableRefObject<GridApiPremium>;
+  apiRef: React.RefObject<GridApiPremium>;
   aggregationRule: GridAggregationRule;
 }): GridBaseColDef => {
   const getCellAggregationResult = (

packages/x-data-grid-premium/src/hooks/features/clipboard/useGridClipboardImport.ts

@@ -89,7 +89,7 @@ class CellValueUpdater {
   updateRow: (row: GridRowModel) => void;
 
   options: {
-    apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+    apiRef: React.RefObject<GridPrivateApiPremium>;
     processRowUpdate: DataGridPremiumProcessedProps['processRowUpdate'];
     onProcessRowUpdateError: DataGridPremiumProcessedProps['onProcessRowUpdateError'];
     getRowId: DataGridPremiumProcessedProps['getRowId'];
@@ -212,7 +212,7 @@ function defaultPasteResolver({
   paginationMode,
 }: {
   pastedData: string[][];
-  apiRef: React.MutableRefObject<GridApiPremium>;
+  apiRef: React.RefObject<GridApiPremium>;
   updateCell: CellValueUpdater['updateCell'];
   pagination: DataGridPremiumProcessedProps['pagination'];
   paginationMode: DataGridPremiumProcessedProps['paginationMode'];
@@ -321,7 +321,7 @@ function defaultPasteResolver({
 }
 
 export const useGridClipboardImport = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: Pick<
     DataGridPremiumProcessedProps,
     | 'pagination'

packages/x-data-grid-premium/src/hooks/features/export/serializer/excelSerializer.ts

@@ -66,7 +66,7 @@ interface SerializedRow {
 export const serializeRowUnsafe = (
   id: GridRowId,
   columns: GridStateColDef[],
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   defaultValueOptionsFormulae: { [field: string]: { address: string } },
   options: Pick<BuildExcelOptions, 'escapeFormulas'>,
 ): SerializedRow => {
@@ -403,7 +403,7 @@ interface BuildExcelOptions
 
 export async function buildExcel(
   options: BuildExcelOptions,
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
 ): Promise<Excel.Workbook> {
   const {
     columns,

packages/x-data-grid-premium/src/hooks/features/export/useGridExcelExport.tsx

@@ -36,7 +36,7 @@ import { GridExcelExportMenuItem } from '../../../components';
  * @requires useGridParamsApi (method)
  */
 export const useGridExcelExport = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: DataGridPremiumProps,
 ): void => {
   const logger = useGridLogger(apiRef, 'useGridExcelExport');

packages/x-data-grid-premium/src/hooks/features/rowGrouping/createGroupingColDef.tsx

@@ -267,7 +267,7 @@ export const createGroupingColDefForOneGroupingCriteria = ({
 };
 
 interface CreateGroupingColDefSeveralCriteriaParams {
-  apiRef: React.MutableRefObject<GridApiPremium>;
+  apiRef: React.RefObject<GridApiPremium>;
   columnsLookup: GridColumnRawLookup;
   /**
    * The fields from which we are grouping the rows.

packages/x-data-grid-premium/src/hooks/features/rowGrouping/gridRowGroupingUtils.ts

@@ -53,7 +53,7 @@ interface FilterRowTreeFromTreeDataParams {
   rowTree: GridRowTreeConfig;
   isRowMatchingFilters: GridAggregatedFilterItemApplier | null;
   filterModel: GridFilterModel;
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+  apiRef: React.RefObject<GridPrivateApiPremium>;
 }
 
 /**
@@ -195,7 +195,7 @@ export const mergeStateWithRowGroupingModel =
   });
 
 export const setStrategyAvailability = (
-  privateApiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  privateApiRef: React.RefObject<GridPrivateApiPremium>,
   disableRowGrouping: boolean,
   dataSource?: GridDataSource,
 ) => {
@@ -223,7 +223,7 @@ export const getCellGroupingCriteria = ({
   row: GridRowModel;
   colDef: GridColDef;
   groupingRule: GridGroupingRule;
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>;
+  apiRef: React.RefObject<GridPrivateApiPremium>;
 }) => {
   let key: GridKeyValue | null | undefined;
   if (groupingRule.groupingValueGetter) {

packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.ts

@@ -16,7 +16,7 @@ import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
 
 export const useGridDataSourceRowGroupingPreProcessors = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: Pick<
     DataGridPremiumProcessedProps,
     | 'disableRowGrouping'

packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGrouping.tsx

@@ -50,7 +50,7 @@ export const rowGroupingStateInitializer: GridStateInitializer<
  * @requires useGridParamsApi (method) - can be after, async only
  */
 export const useGridRowGrouping = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: Pick<
     DataGridPremiumProcessedProps,
     | 'initialState'

packages/x-data-grid-premium/src/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.ts

@@ -40,7 +40,7 @@ import {
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 
 export const useGridRowGroupingPreProcessors = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: Pick<
     DataGridPremiumProcessedProps,
     | 'disableRowGrouping'

packages/x-data-grid-premium/src/hooks/utils/useKeepGroupedColumnsHidden.ts

@@ -36,7 +36,7 @@ const updateColumnVisibilityModel = (
  */
 export const useKeepGroupedColumnsHidden = (
   props: {
-    apiRef: React.MutableRefObject<GridApi>;
+    apiRef: React.RefObject<GridApi>;
   } & Pick<DataGridPremiumProps, 'initialState' | 'rowGroupingModel'>,
 ) => {
   const initialProps = React.useRef(props);

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

@@ -129,7 +129,7 @@ export interface DataGridPremiumPropsWithoutDefaultValue<R extends GridValidRowM
   /**
    * The ref object that allows grid manipulation. Can be instantiated with `useGridApiRef()`.
    */
-  apiRef?: React.MutableRefObject<GridApiPremium>;
+  apiRef?: React.RefObject<GridApiPremium>;
   /**
    * The initial state of the DataGridPremium.
    * The data in it is set in the state on initialization but isn't controlled.

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

@@ -8,5 +8,5 @@ export type GridGroupingValueGetter<
   value: TValue,
   row: R,
   column: GridColDef<R>,
-  apiRef: React.MutableRefObject<GridApiPremium>,
+  apiRef: React.RefObject<GridApiPremium>,
 ) => GridKeyValue | null | undefined;

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

@@ -9,5 +9,5 @@ export type GridPastedValueParser<
   value: string,
   row: R,
   column: GridColDef<R, V, F>,
-  apiRef: React.MutableRefObject<GridApiPremium>,
+  apiRef: React.RefObject<GridApiPremium>,
 ) => V | undefined;

packages/x-data-grid-premium/src/tests/DataGridPremium.test.tsx

@@ -35,7 +35,7 @@ describe('<DataGrid /> - Quick filter', () => {
     columns: [{ field: 'brand' }],
   };
 
-  let apiRef: React.MutableRefObject<GridApi>;
+  let apiRef: React.RefObject<GridApi>;
 
   function TestCase(props: Partial<DataGridProps>) {
     apiRef = useGridApiRef();

packages/x-data-grid-premium/src/tests/aggregation.DataGridPremium.test.tsx

@@ -46,7 +46,7 @@ const baselineProps: DataGridPremiumProps = {
 describe('<DataGridPremium /> - Aggregation', () => {
   const { render, clock } = createRenderer({ clock: 'fake' });
 
-  let apiRef: React.MutableRefObject<GridApi>;
+  let apiRef: React.RefObject<GridApi>;
 
   function Test(props: Partial<DataGridPremiumProps>) {
     apiRef = useGridApiRef();

packages/x-data-grid-premium/src/tests/cellSelection.DataGridPremium.test.tsx

@@ -16,7 +16,7 @@ import { fireUserEvent } from 'test/utils/fireUserEvent';
 describe('<DataGridPremium /> - Cell selection', () => {
   const { render } = createRenderer();
 
-  let apiRef: React.MutableRefObject<GridApi>;
+  let apiRef: React.RefObject<GridApi>;
 
   function TestDataGridSelection({
     rowLength = 4,

packages/x-data-grid-premium/src/tests/clipboard.DataGridPremium.test.tsx

@@ -16,7 +16,7 @@ import { getBasicGridData } from '@mui/x-data-grid-generator';
 describe('<DataGridPremium /> - Clipboard', () => {
   const { render } = createRenderer();
 
-  let apiRef: React.MutableRefObject<GridApi>;
+  let apiRef: React.RefObject<GridApi>;
 
   function Test({
     rowLength = 4,

packages/x-data-grid-premium/src/tests/exportExcel.DataGridPremium.test.tsx

@@ -19,7 +19,7 @@ const isJSDOM = /jsdom/.test(window.navigator.userAgent);
 describe('<DataGridPremium /> - Export Excel', () => {
   const { render } = createRenderer();
 
-  let apiRef: React.MutableRefObject<GridApi>;
+  let apiRef: React.RefObject<GridApi>;
 
   const columns: GridColDef[] = [{ field: 'id' }, { field: 'brand', headerName: 'Brand' }];
   const rows = [

packages/x-data-grid-premium/src/tests/rowGrouping.DataGridPremium.test.tsx

@@ -78,7 +78,7 @@ const baselineProps: BaselineProps = {
 describe('<DataGridPremium /> - Row grouping', () => {
   const { render, clock } = createRenderer();
 
-  let apiRef: React.MutableRefObject<GridApi>;
+  let apiRef: React.RefObject<GridApi>;
 
   function Test(props: Partial<DataGridPremiumProps>) {
     apiRef = useGridApiRef();

packages/x-data-grid-premium/src/tests/rowSelection.DataGridPremium.test.tsx

@@ -47,7 +47,7 @@ describe('<DataGridPremium /> - Row selection', () => {
   const { render } = createRenderer();
 
   describe('props: rowSelectionPropagation = { descendants: true, parents: true }', () => {
-    let apiRef: React.MutableRefObject<GridApi>;
+    let apiRef: React.RefObject<GridApi>;
 
     function Test(props: Partial<DataGridPremiumProps>) {
       apiRef = useGridApiRef();

packages/x-data-grid-pro/src/components/GridDataSourceTreeDataGroupingCell.tsx

@@ -49,7 +49,7 @@ interface GridTreeDataGroupingCellIconProps
 }
 
 function GridTreeDataGroupingCellIcon(props: GridTreeDataGroupingCellIconProps) {
-  const apiRef = useGridPrivateApiContext() as React.MutableRefObject<GridPrivateApiPro>;
+  const apiRef = useGridPrivateApiContext() as React.RefObject<GridPrivateApiPro>;
   const rootProps = useGridRootProps();
   const classes = useUtilityClasses(rootProps);
   const { rowNode, id, field, descendantCount } = props;

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterCell.tsx

@@ -51,7 +51,7 @@ export interface GridHeaderFilterCellProps extends Pick<GridStateColDef, 'header
   tabIndex: 0 | -1;
   width: number;
   colDef: GridColDef;
-  headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
+  headerFilterMenuRef: React.RefObject<HTMLButtonElement | null>;
   item: GridFilterItem;
   showClearIcon?: boolean;
   InputComponentProps: GridFilterOperator['InputComponentProps'];

packages/x-data-grid-pro/src/components/headerFiltering/GridHeaderFilterMenuContainer.tsx

@@ -22,7 +22,7 @@ function GridHeaderFilterMenuContainer(props: {
   field: GridColDef['field'];
   item: GridFilterItem;
   applyFilterChanges: (item: GridFilterItem) => void;
-  headerFilterMenuRef: React.MutableRefObject<HTMLButtonElement | null>;
+  headerFilterMenuRef: React.RefObject<HTMLButtonElement | null>;
   buttonRef: React.Ref<HTMLButtonElement>;
   disabled?: boolean;
 }) {

packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinning.tsx

@@ -47,7 +47,7 @@ export const columnPinningStateInitializer: GridStateInitializer<
 };
 
 export const useGridColumnPinning = (
-  apiRef: React.MutableRefObject<GridPrivateApiPro>,
+  apiRef: React.RefObject<GridPrivateApiPro>,
   props: Pick<
     DataGridProProcessedProps,
     | 'disableColumnPinning'
@@ -336,10 +336,7 @@ export const useGridColumnPinning = (
   }, [apiRef, props.pinnedColumns]);
 };
 
-function setState(
-  apiRef: React.MutableRefObject<GridPrivateApiPro>,
-  model: GridPinnedColumnFields,
-) {
+function setState(apiRef: React.RefObject<GridPrivateApiPro>, model: GridPinnedColumnFields) {
   apiRef.current.setState((state) => ({
     ...state,
     pinnedColumns: model,

packages/x-data-grid-pro/src/hooks/features/columnPinning/useGridColumnPinningPreProcessors.ts

@@ -11,7 +11,7 @@ import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 import { GridPrivateApiPro } from '../../../models/gridApiPro';
 
 export const useGridColumnPinningPreProcessors = (
-  apiRef: React.MutableRefObject<GridPrivateApiPro>,
+  apiRef: React.RefObject<GridPrivateApiPro>,
   props: DataGridProProcessedProps,
 ) => {
   const { disableColumnPinning } = props;