Fix/update DataGrid ref usage

packages/x-charts/src/internals/plugins/models/plugin.ts

@@ -8,7 +8,7 @@ export interface ChartPluginOptions<TSignature extends ChartAnyPluginSignature>
   instance: ChartUsedInstance<TSignature>;
   params: ChartUsedDefaultizedParams<TSignature>;
   store: ChartUsedStore<TSignature>;
-  svgRef: React.RefObject<SVGSVGElement>;
+  svgRef: React.RefObject<SVGSVGElement | null>;
   plugins: ChartPlugin<ChartAnyPluginSignature>[];
 }
 

packages/x-charts/src/internals/store/useCharts.ts

@@ -14,9 +14,9 @@ import { UseChartBaseProps } from './useCharts.types';
 import { UseChartInteractionState } from '../plugins/featurePlugins/useChartInteraction/useChartInteraction.types';
 
 export function useChartApiInitialization<T>(
-  inputApiRef: React.MutableRefObject<T | undefined> | undefined,
+  inputApiRef: React.RefObject<T | undefined> | undefined,
 ): T {
-  const fallbackPublicApiRef = React.useRef({}) as React.MutableRefObject<T>;
+  const fallbackPublicApiRef = React.useRef({}) as React.RefObject<T>;
 
   if (inputApiRef) {
     if (inputApiRef.current == null) {
@@ -55,7 +55,7 @@ export function useCharts<
   const instanceRef = React.useRef({} as ChartInstance<TSignatures>);
   const instance = instanceRef.current as ChartInstance<TSignatures>;
   const publicAPI = useChartApiInitialization<ChartPublicAPI<TSignatures>>(props.apiRef);
-  const innerSvgRef: React.RefObject<SVGSVGElement> = React.useRef(null);
+  const innerSvgRef = React.useRef<SVGSVGElement>(null);
 
   const storeRef = React.useRef<ChartStore<TSignaturesWithCorePluginSignatures> | null>(null);
   if (storeRef.current == null) {

packages/x-charts/src/internals/store/useCharts.types.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { ChartAnyPluginSignature, ChartPublicAPI } from '../plugins/models';
 
 export interface UseChartBaseProps<TSignatures extends readonly ChartAnyPluginSignature[]> {
-  apiRef: React.MutableRefObject<ChartPublicAPI<TSignatures> | undefined> | undefined;
+  apiRef: React.RefObject<ChartPublicAPI<TSignatures> | undefined> | undefined;
 }

packages/x-data-grid-premium/src/hooks/features/cellSelection/useGridCellSelection.ts

@@ -49,7 +49,7 @@ const AUTO_SCROLL_SENSITIVITY = 50; // The distance from the edge to start scrol
 const AUTO_SCROLL_SPEED = 20; // The speed to scroll once the mouse enters the sensitivity area
 
 export const useGridCellSelection = (
-  apiRef: React.MutableRefObject<GridPrivateApiPremium>,
+  apiRef: React.RefObject<GridPrivateApiPremium>,
   props: Pick<
     DataGridPremiumProcessedProps,
     | 'cellSelection'
@@ -64,10 +64,10 @@ export const useGridCellSelection = (
 ) => {
   const hasRootReference = apiRef.current.rootElementRef.current !== null;
   const visibleRows = useGridVisibleRows(apiRef, props);
-  const cellWithVirtualFocus = React.useRef<GridCellCoordinates | null>();
-  const lastMouseDownCell = React.useRef<GridCellCoordinates | null>();
-  const mousePosition = React.useRef<{ x: number; y: number } | null>(null);
-  const autoScrollRAF = React.useRef<number | null>();
+  const cellWithVirtualFocus = React.useRef<GridCellCoordinates>(null);
+  const lastMouseDownCell = React.useRef<GridCellCoordinates>(null);
+  const mousePosition = React.useRef<{ x: number; y: number }>(null);
+  const autoScrollRAF = React.useRef<number>(null);
   const sortedRowIds = useGridSelector(apiRef, gridSortedRowIdsSelector);
   const dimensions = useGridSelector(apiRef, gridDimensionsSelector);
   const totalHeaderHeight = getTotalHeaderHeight(apiRef, props);

packages/x-data-grid-pro/src/DataGridPro/useDataGridProComponent.tsx

@@ -89,7 +89,7 @@ import {
 import { useGridDataSourceLazyLoader } from '../hooks/features/serverSideLazyLoader/useGridDataSourceLazyLoader';
 
 export const useDataGridProComponent = (
-  inputApiRef: React.MutableRefObject<GridApiPro> | undefined,
+  inputApiRef: React.RefObject<GridApiPro> | undefined,
   props: DataGridProProcessedProps,
 ) => {
   const apiRef = useGridInitialization<GridPrivateApiPro, GridApiPro>(inputApiRef, props);

packages/x-data-grid-pro/src/hooks/features/columnReorder/useGridColumnReorder.tsx

@@ -72,7 +72,7 @@ export const useGridColumnReorder = (
   });
   const originColumnIndex = React.useRef<number | null>(null);
   const forbiddenIndexes = React.useRef<{ [key: number]: boolean }>({});
-  const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const ownerState = { classes: props.classes };
   const classes = useUtilityClasses(ownerState);
   const isRtl = useRtl();

packages/x-data-grid-pro/src/hooks/features/detailPanel/useGridDetailPanel.ts

@@ -254,9 +254,9 @@ export const useGridDetailPanel = (
   useGridApiEventHandler(apiRef, 'sortedRowsSet', updateCachesAndForceUpdate);
 
   const previousGetDetailPanelContentProp =
-    React.useRef<DataGridProProcessedProps['getDetailPanelContent']>();
+    React.useRef<DataGridProProcessedProps['getDetailPanelContent']>(null);
   const previousGetDetailPanelHeightProp =
-    React.useRef<DataGridProProcessedProps['getDetailPanelHeight']>();
+    React.useRef<DataGridProProcessedProps['getDetailPanelHeight']>(null);
 
   const updateCachesIfNeeded = React.useCallback(() => {
     if (

packages/x-data-grid-pro/src/hooks/features/infiniteLoader/useGridInfiniteLoader.tsx

@@ -38,7 +38,7 @@ export const useGridInfiniteLoader = (
 ): void => {
   const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
-  const observer = React.useRef<IntersectionObserver>();
+  const observer = React.useRef<IntersectionObserver>(null);
   const updateTargetTimeout = useTimeout();
   const triggerElement = React.useRef<HTMLElement | null>(null);
 

packages/x-data-grid-pro/src/hooks/features/rowReorder/useGridRowReorder.tsx

@@ -62,7 +62,7 @@ export const useGridRowReorder = (
   const treeDepth = useGridSelector(apiRef, gridRowMaximumTreeDepthSelector);
   const dragRowNode = React.useRef<HTMLElement | null>(null);
   const originRowIndex = React.useRef<number | null>(null);
-  const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>();
+  const removeDnDStylesTimeout = React.useRef<ReturnType<typeof setTimeout>>(undefined);
   const ownerState = { classes: props.classes };
   const classes = useUtilityClasses(ownerState);
   const [dragRowId, setDragRowId] = React.useState<GridRowId>('');

packages/x-data-grid/src/DataGrid/useDataGridComponent.tsx

@@ -63,7 +63,7 @@ import {
 } from '../hooks/features/listView/useGridListView';
 
 export const useDataGridComponent = (
-  inputApiRef: React.MutableRefObject<GridApiCommunity> | undefined,
+  inputApiRef: React.RefObject<GridApiCommunity> | undefined,
   props: DataGridProcessedProps,
 ) => {
   const apiRef = useGridInitialization<GridPrivateApiCommunity, GridApiCommunity>(

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

@@ -26,51 +26,61 @@ export type GridActionsCellItemProps = GridActionsCellItemCommonProps &
       } & Omit<MenuItemProps, 'component'>)
   );
 
-const GridActionsCellItem = forwardRef<HTMLElement, GridActionsCellItemProps>((props, ref) => {
-  const rootProps = useGridRootProps();
+const GridActionsCellItem = forwardRef<HTMLButtonElement, GridActionsCellItemProps>(
+  (props, ref) => {
+    const rootProps = useGridRootProps();
 
-  if (!props.showInMenu) {
-    const { label, icon, showInMenu, onClick, ...other } = props;
+    if (!props.showInMenu) {
+      const { label, icon, showInMenu, onClick, ...other } = props;
 
-    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+      const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+      };
+
+      return (
+        <rootProps.slots.baseIconButton
+          size="small"
+          role="menuitem"
+          aria-label={label}
+          {...other}
+          onClick={handleClick}
+          {...rootProps.slotProps?.baseIconButton}
+          ref={ref as React.RefObject<HTMLButtonElement>}
+        >
+          {React.cloneElement(icon!, { fontSize: 'small' })}
+        </rootProps.slots.baseIconButton>
+      );
+    }
+
+    const {
+      label,
+      icon,
+      showInMenu,
+      onClick,
+      closeMenuOnClick = true,
+      closeMenu,
+      ...other
+    } = props;
+
+    const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {
       onClick?.(event);
+      if (closeMenuOnClick) {
+        closeMenu?.();
+      }
     };
 
     return (
-      <rootProps.slots.baseIconButton
-        size="small"
-        role="menuitem"
-        aria-label={label}
-        {...other}
+      <rootProps.slots.baseMenuItem
+        ref={ref}
+        {...(other as any)}
         onClick={handleClick}
-        {...rootProps.slotProps?.baseIconButton}
-        ref={ref as React.MutableRefObject<HTMLButtonElement>}
+        iconStart={icon}
       >
-        {React.cloneElement(icon!, { fontSize: 'small' })}
-      </rootProps.slots.baseIconButton>
+        {label}
+      </rootProps.slots.baseMenuItem>
     );
-  }
-
-  const { label, icon, showInMenu, onClick, closeMenuOnClick = true, closeMenu, ...other } = props;
-
-  const handleClick = (event: React.MouseEvent<HTMLLIElement>) => {
-    onClick?.(event);
-    if (closeMenuOnClick) {
-      closeMenu?.();
-    }
-  };
-
-  return (
-    <rootProps.slots.baseMenuItem
-      ref={ref}
-      {...(other as any)}
-      onClick={handleClick}
-      iconStart={icon}
-    >
-      {label}
-    </rootProps.slots.baseMenuItem>
-  );
-});
+  },
+);
 
 GridActionsCellItem.propTypes = {
   // ----------------------------- Warning --------------------------------

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

@@ -66,7 +66,7 @@ function GridEditDateCell(props: GridEditDateCellProps) {
 
   const isDateTime = colDef.type === 'dateTime';
   const apiRef = useGridApiContext();
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
 
   const valueTransformed = React.useMemo(() => {
     let parsedDate: Date | null;

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

@@ -78,7 +78,7 @@ const GridEditInputCell = forwardRef<HTMLInputElement, GridEditInputCellProps>((
   } = props;
 
   const apiRef = useGridApiContext();
-  const inputRef = React.useRef<HTMLInputElement>();
+  const inputRef = React.useRef<HTMLInputElement>(null);
   const [valueState, setValueState] = React.useState(value);
   const classes = useUtilityClasses(rootProps);
 

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

@@ -58,8 +58,8 @@ function GridEditSingleSelectCell(props: GridEditSingleSelectCellProps) {
   } = props;
 
   const apiRef = useGridApiContext();
-  const ref = React.useRef<any>();
-  const inputRef = React.useRef<any>();
+  const ref = React.useRef<any>(null);
+  const inputRef = React.useRef<any>(null);
   const [open, setOpen] = React.useState(initialOpen);
 
   const baseSelectProps = rootProps.slotProps?.baseSelect || {};

packages/x-data-grid/src/components/columnHeaders/ColumnHeaderMenuIcon.tsx

@@ -11,7 +11,7 @@ export interface ColumnHeaderMenuIconProps {
   columnMenuId: string;
   columnMenuButtonId: string;
   open: boolean;
-  iconButtonRef: React.RefObject<HTMLButtonElement>;
+  iconButtonRef: React.RefObject<HTMLButtonElement | null>;
 }
 
 type OwnerState = ColumnHeaderMenuIconProps & {

packages/x-data-grid/src/hooks/core/pipeProcessing/useGridPipeProcessing.ts

@@ -49,7 +49,7 @@ type GroupCache = {
  *   * a processor is registered.
  *   * `apiRef.current.requestPipeProcessorsApplication` is called for the given group.
  */
-export const useGridPipeProcessing = (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => {
+export const useGridPipeProcessing = (apiRef: React.RefObject<GridPrivateApiCommon>) => {
   const cache = React.useRef<Cache>({});
 
   const isRunning = React.useRef(false);

packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeApplier.ts

@@ -7,11 +7,11 @@ export const useGridRegisterPipeApplier = <
   PrivateApi extends GridPrivateApiCommon,
   G extends GridPipeProcessorGroup,
 >(
-  apiRef: React.MutableRefObject<PrivateApi>,
+  apiRef: React.RefObject<PrivateApi>,
   group: G,
   callback: () => void,
 ) => {
-  const cleanup = React.useRef<(() => void) | null>();
+  const cleanup = React.useRef<(() => void) | null>(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
 
   const registerPreProcessor = React.useCallback(() => {

packages/x-data-grid/src/hooks/core/pipeProcessing/useGridRegisterPipeProcessor.ts

@@ -7,11 +7,11 @@ export const useGridRegisterPipeProcessor = <
   PrivateApi extends GridPrivateApiCommon,
   G extends GridPipeProcessorGroup,
 >(
-  apiRef: React.MutableRefObject<PrivateApi>,
+  apiRef: React.RefObject<PrivateApi>,
   group: G,
   callback: GridPipeProcessor<G>,
 ) => {
-  const cleanup = React.useRef<(() => void) | null>();
+  const cleanup = React.useRef<(() => void) | null>(null);
   const id = React.useRef(`mui-${Math.round(Math.random() * 1e9)}`);
 
   const registerPreProcessor = React.useCallback(() => {

packages/x-data-grid/src/hooks/core/strategyProcessing/useGridRegisterStrategyProcessor.ts

@@ -7,7 +7,7 @@ export const useGridRegisterStrategyProcessor = <
   Api extends GridPrivateApiCommon,
   G extends GridStrategyProcessorName,
 >(
-  apiRef: React.MutableRefObject<Api>,
+  apiRef: React.RefObject<Api>,
   strategyName: string,
   group: G,
   processor: GridStrategyProcessor<G>,

packages/x-data-grid/src/hooks/core/strategyProcessing/useGridStrategyProcessing.ts

@@ -62,7 +62,7 @@ type UntypedStrategyProcessors = {
  * Each processor name is part of a strategy group which can only have one active strategy at the time.
  * There are two active groups named `rowTree` and `dataSource`.
  */
-export const useGridStrategyProcessing = (apiRef: React.MutableRefObject<GridPrivateApiCommon>) => {
+export const useGridStrategyProcessing = (apiRef: React.RefObject<GridPrivateApiCommon>) => {
   const availableStrategies = React.useRef(
     new Map<string, { group: GridStrategyGroupValue; isAvailable: () => boolean }>(),
   );

packages/x-data-grid/src/hooks/core/useGridApiInitialization.ts

@@ -23,7 +23,7 @@ export function unwrapPrivateAPI<
 let globalId = 0;
 
 function createPrivateAPI<PrivateApi extends GridPrivateApiCommon, Api extends GridApiCommon>(
-  publicApiRef: React.MutableRefObject<Api>,
+  publicApiRef: React.RefObject<Api>,
 ): PrivateApi {
   const existingPrivateApi = (publicApiRef.current as any)?.[SYMBOL_API_PRIVATE];
   if (existingPrivateApi) {
@@ -96,14 +96,14 @@ export function useGridApiInitialization<
   PrivateApi extends GridPrivateApiCommon,
   Api extends GridApiCommon,
 >(
-  inputApiRef: React.MutableRefObject<Api> | undefined,
+  inputApiRef: React.RefObject<Api> | undefined,
   props: Pick<DataGridProcessedProps, 'signature'>,
-): React.MutableRefObject<PrivateApi> {
-  const publicApiRef = React.useRef() as React.MutableRefObject<Api>;
-  const privateApiRef = React.useRef() as React.MutableRefObject<PrivateApi>;
+): React.RefObject<PrivateApi> {
+  const publicApiRef = React.useRef<Api>(null) as React.RefObject<Api>;
+  const privateApiRef = React.useRef<PrivateApi>(null) as React.RefObject<PrivateApi>;
 
   if (!privateApiRef.current) {
-    privateApiRef.current = createPrivateAPI(publicApiRef) as PrivateApi;
+    privateApiRef.current = createPrivateAPI(publicApiRef);
   }
 
   if (!publicApiRef.current) {

packages/x-data-grid/src/hooks/core/useGridInitialization.ts

@@ -17,7 +17,7 @@ export const useGridInitialization = <
   PrivateApi extends GridPrivateApiCommon,
   Api extends GridApiCommon,
 >(
-  inputApiRef: React.MutableRefObject<Api> | undefined,
+  inputApiRef: React.RefObject<Api> | undefined,
   props: DataGridProcessedProps,
 ) => {
   const privateApiRef = useGridApiInitialization<PrivateApi, Api>(inputApiRef, props);

packages/x-data-grid/src/hooks/core/useGridIsRtl.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useRtl } from '@mui/system/RtlProvider';
 import { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 
-export const useGridIsRtl = (apiRef: React.MutableRefObject<GridPrivateApiCommon>): void => {
+export const useGridIsRtl = (apiRef: React.RefObject<GridPrivateApiCommon>): void => {
   const isRtl = useRtl();
 
   if (apiRef.current.state.isRtl === undefined) {

packages/x-data-grid/src/hooks/core/useGridLocaleText.tsx

@@ -4,7 +4,7 @@ import { GridLocaleTextApi } from '../../models/api/gridLocaleTextApi';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 
 export const useGridLocaleText = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommon>,
+  apiRef: React.RefObject<GridPrivateApiCommon>,
   props: Pick<DataGridProcessedProps, 'localeText'>,
 ): void => {
   const getLocaleText = React.useCallback<GridLocaleTextApi['getLocaleText']>(

packages/x-data-grid/src/hooks/core/useGridLoggerFactory.ts

@@ -43,7 +43,7 @@ function getAppender(name: string, logLevel: string, appender: Logger = console)
 }
 
 export const useGridLoggerFactory = (
-  apiRef: React.MutableRefObject<GridPrivateApiCommon>,
+  apiRef: React.RefObject<GridPrivateApiCommon>,
   props: Pick<DataGridProcessedProps, 'logger' | 'logLevel'>,
 ) => {
   const getLogger = React.useCallback<GridLoggerApi['getLogger']>(

packages/x-data-grid/src/hooks/core/useGridRefs.ts

@@ -2,10 +2,10 @@ import * as React from 'react';
 import type { GridPrivateApiCommon } from '../../models/api/gridApiCommon';
 
 export const useGridRefs = <PrivateApi extends GridPrivateApiCommon>(
-  apiRef: React.MutableRefObject<PrivateApi>,
+  apiRef: React.RefObject<PrivateApi>,
 ) => {
   const rootElementRef = React.useRef<HTMLDivElement>(null);
-  const mainElementRef = React.useRef<HTMLDivElement | null>(null);
+  const mainElementRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollerRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollbarVerticalRef = React.useRef<HTMLDivElement>(null);
   const virtualScrollbarHorizontalRef = React.useRef<HTMLDivElement>(null);

packages/x-data-grid/src/hooks/core/useGridStateInitialization.ts

@@ -6,7 +6,7 @@ import { useGridApiMethod } from '../utils';
 import { isFunction } from '../../utils/utils';
 
 export const useGridStateInitialization = <PrivateApi extends GridPrivateApiCommon>(
-  apiRef: React.MutableRefObject<PrivateApi>,
+  apiRef: React.RefObject<PrivateApi>,
 ) => {
   const controlStateMapRef = React.useRef<
     Record<string, GridControlStateItem<PrivateApi['state'], any, any>>