[DataGrid] Replace forwardRef with a shim for forward compatibility (…

…#15955)
mui · Dec 23, 2024 · a7e6782 · a7e6782
1 parent a58d118
commit a7e6782
Show file tree

Hide file tree

Showing 49 changed files with 1,069 additions and 956 deletions.
diff --git a/docs/scripts/api/buildGridSelectorsDocumentation.ts b/docs/scripts/api/buildGridSelectorsDocumentation.ts
@@ -64,7 +64,7 @@ export default async function buildGridSelectorsDocumentation(
           isSelector = true;
         } else if (
           // Selector wrapped in `createSelector`
-          type.symbol.name === 'OutputSelector'
+          type.symbol?.name === 'OutputSelector'
         ) {
           isSelector = true;
           supportsApiRef = true;

diff --git a/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx b/packages/x-data-grid-premium/src/DataGridPremium/DataGridPremium.tsx
@@ -16,6 +16,7 @@ import {
   PropValidator,
   validateProps,
 } from '@mui/x-data-grid-pro/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridPremiumComponent } from './useDataGridPremiumComponent';
 import {
   DataGridPremiumProcessedProps,
@@ -42,7 +43,7 @@ if (process.env.NODE_ENV !== 'production') {
   dataGridPremiumPropValidators = [...propValidatorsDataGrid, ...propValidatorsDataGridPro];
 }
 
-const DataGridPremiumRaw = React.forwardRef(function DataGridPremium<R extends GridValidRowModel>(
+const DataGridPremiumRaw = forwardRef(function DataGridPremium<R extends GridValidRowModel>(
   inProps: DataGridPremiumProps<R>,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -59,8 +60,8 @@ const DataGridPremiumRaw = React.forwardRef(function DataGridPremium<R extends G
         className={props.className}
         style={props.style}
         sx={props.sx}
-        ref={ref}
         {...props.slotProps?.root}
+        ref={ref}
       >
         <GridHeader />
         <GridBody>

diff --git a/packages/x-data-grid-premium/src/components/GridPremiumColumnMenu.tsx b/packages/x-data-grid-premium/src/components/GridPremiumColumnMenu.tsx
@@ -6,6 +6,7 @@ import {
   GRID_COLUMN_MENU_SLOT_PROPS,
   GridColumnMenuItemProps,
 } from '@mui/x-data-grid-pro';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridColumnMenuAggregationItem } from './GridColumnMenuAggregationItem';
 import { isGroupingColumn } from '../hooks/features/rowGrouping';
 import { GridColumnMenuRowGroupItem } from './GridColumnMenuRowGroupItem';
@@ -32,14 +33,14 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM = {
   columnMenuGroupingItem: { displayOrder: 27 },
 };
 
-export const GridPremiumColumnMenu = React.forwardRef<HTMLUListElement, GridColumnMenuProps>(
+export const GridPremiumColumnMenu = forwardRef<HTMLUListElement, GridColumnMenuProps>(
   function GridPremiumColumnMenuSimple(props, ref) {
     return (
       <GridGenericColumnMenu
-        ref={ref}
         {...props}
         defaultSlots={GRID_COLUMN_MENU_SLOTS_PREMIUM}
         defaultSlotProps={GRID_COLUMN_MENU_SLOT_PROPS_PREMIUM}
+        ref={ref}
       />
     );
   },

diff --git a/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx b/packages/x-data-grid-pro/src/DataGridPro/DataGridPro.tsx
@@ -11,6 +11,7 @@ import {
   GridValidRowModel,
 } from '@mui/x-data-grid';
 import { validateProps } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useDataGridProComponent } from './useDataGridProComponent';
 import { DataGridProProps } from '../models/dataGridProProps';
 import { useDataGridProProps } from './useDataGridProProps';
@@ -29,7 +30,7 @@ const configuration = {
 };
 const releaseInfo = getReleaseInfo();
 
-const DataGridProRaw = React.forwardRef(function DataGridPro<R extends GridValidRowModel>(
+const DataGridProRaw = forwardRef(function DataGridPro<R extends GridValidRowModel>(
   inProps: DataGridProProps<R>,
   ref: React.Ref<HTMLDivElement>,
 ) {
@@ -46,8 +47,8 @@ const DataGridProRaw = React.forwardRef(function DataGridPro<R extends GridValid
         className={props.className}
         style={props.style}
         sx={props.sx}
-        ref={ref}
         {...props.slotProps?.root}
+        ref={ref}
       >
         <GridHeader />
         <GridBody>

diff --git a/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx b/packages/x-data-grid-pro/src/components/GridColumnHeaders.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import { GridBaseColumnHeaders, UseGridColumnHeadersProps } from '@mui/x-data-grid/internals';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridColumnHeaders';
 
 const Filler = styled('div')({
@@ -13,7 +14,7 @@ export interface GridColumnHeadersProps
   extends React.HTMLAttributes<HTMLDivElement>,
     UseGridColumnHeadersProps {}
 
-const GridColumnHeaders = React.forwardRef<HTMLDivElement, GridColumnHeadersProps>(
+const GridColumnHeaders = forwardRef<HTMLDivElement, GridColumnHeadersProps>(
   function GridColumnHeaders(props, ref) {
     const {
       style,
@@ -50,7 +51,7 @@ const GridColumnHeaders = React.forwardRef<HTMLDivElement, GridColumnHeadersProp
       });
 
     return (
-      <GridBaseColumnHeaders ref={ref} className={className} {...other} {...getInnerProps()}>
+      <GridBaseColumnHeaders className={className} {...other} {...getInnerProps()} ref={ref}>
         {getColumnGroupHeadersRows()}
         {getColumnHeadersRow()}
         {getColumnFiltersRow()}

diff --git a/packages/x-data-grid-pro/src/components/GridProColumnMenu.tsx b/packages/x-data-grid-pro/src/components/GridProColumnMenu.tsx
@@ -5,6 +5,7 @@ import {
   GRID_COLUMN_MENU_SLOTS,
   GRID_COLUMN_MENU_SLOT_PROPS,
 } from '@mui/x-data-grid';
+import { forwardRef } from '@mui/x-internals/forwardRef';
 import { GridColumnMenuPinningItem } from './GridColumnMenuPinningItem';
 
 export const GRID_COLUMN_MENU_SLOTS_PRO = {
@@ -19,14 +20,14 @@ export const GRID_COLUMN_MENU_SLOT_PROPS_PRO = {
   },
 };
 
-export const GridProColumnMenu = React.forwardRef<HTMLUListElement, GridColumnMenuProps>(
+export const GridProColumnMenu = forwardRef<HTMLUListElement, GridColumnMenuProps>(
   function GridProColumnMenu(props, ref) {
     return (
       <GridGenericColumnMenu
-        ref={ref}
         {...props}
         defaultSlots={GRID_COLUMN_MENU_SLOTS_PRO}
         defaultSlotProps={GRID_COLUMN_MENU_SLOT_PROPS_PRO}
+        ref={ref}
       />
     );
   },