Bump React

docs/data/data-grid/editing/FullFeaturedCrudGrid.js

@@ -226,9 +226,7 @@ export default function FullFeaturedCrudGrid() {
         onRowModesModelChange={handleRowModesModelChange}
         onRowEditStop={handleRowEditStop}
         processRowUpdate={processRowUpdate}
-        slots={{
-          toolbar: EditToolbar,
-        }}
+        slots={{ toolbar: EditToolbar }}
         slotProps={{
           toolbar: { setRows, setRowModesModel },
         }}

docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx

@@ -18,7 +18,7 @@ import {
   GridRowId,
   GridRowModel,
   GridRowEditStopReasons,
-  GridSlots,
+  GridSlotProps,
 } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
@@ -70,14 +70,16 @@ const initialRows: GridRowsProp = [
   },
 ];
 
-interface EditToolbarProps {
-  setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void;
-  setRowModesModel: (
-    newModel: (oldModel: GridRowModesModel) => GridRowModesModel,
-  ) => void;
+declare module '@mui/x-data-grid' {
+  interface ToolbarPropsOverrides {
+    setRows: (newRows: (oldRows: GridRowsProp) => GridRowsProp) => void;
+    setRowModesModel: (
+      newModel: (oldModel: GridRowModesModel) => GridRowModesModel,
+    ) => void;
+  }
 }
 
-function EditToolbar(props: EditToolbarProps) {
+function EditToolbar(props: GridSlotProps['toolbar']) {
   const { setRows, setRowModesModel } = props;
 
   const handleClick = () => {
@@ -240,9 +242,7 @@ export default function FullFeaturedCrudGrid() {
         onRowModesModelChange={handleRowModesModelChange}
         onRowEditStop={handleRowEditStop}
         processRowUpdate={processRowUpdate}
-        slots={{
-          toolbar: EditToolbar as GridSlots['toolbar'],
-        }}
+        slots={{ toolbar: EditToolbar }}
         slotProps={{
           toolbar: { setRows, setRowModesModel },
         }}

docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview

@@ -6,9 +6,7 @@
   onRowModesModelChange={handleRowModesModelChange}
   onRowEditStop={handleRowEditStop}
   processRowUpdate={processRowUpdate}
-  slots={{
-    toolbar: EditToolbar as GridSlots['toolbar'],
-  }}
+  slots={{ toolbar: EditToolbar }}
   slotProps={{
     toolbar: { setRows, setRowModesModel },
   }}

docs/data/data-grid/editing/StartEditButtonGrid.js

@@ -119,14 +119,11 @@ export default function StartEditButtonGrid() {
         cellModesModel={cellModesModel}
         onCellEditStop={handleCellEditStop}
         onCellModesModelChange={(model) => setCellModesModel(model)}
-        slots={{
-          toolbar: EditToolbar,
-        }}
+        slots={{ toolbar: EditToolbar }}
         slotProps={{
           toolbar: {
             cellMode,
             selectedCellParams,
-            setSelectedCellParams,
             cellModesModel,
             setCellModesModel,
           },

docs/data/data-grid/editing/StartEditButtonGrid.tsx

@@ -9,7 +9,7 @@ import {
   GridCellModes,
   GridEventListener,
   GridCellModesModel,
-  GridSlots,
+  GridSlotProps,
 } from '@mui/x-data-grid';
 import {
   randomCreatedDate,
@@ -22,14 +22,16 @@ interface SelectedCellParams {
   field: string;
 }
 
-interface EditToolbarProps {
-  selectedCellParams?: SelectedCellParams;
-  cellModesModel: GridCellModesModel;
-  setCellModesModel: (value: GridCellModesModel) => void;
-  cellMode: 'view' | 'edit';
+declare module '@mui/x-data-grid' {
+  interface ToolbarPropsOverrides {
+    selectedCellParams: SelectedCellParams | null;
+    cellModesModel: GridCellModesModel;
+    setCellModesModel: (value: GridCellModesModel) => void;
+    cellMode: 'view' | 'edit';
+  }
 }
 
-function EditToolbar(props: EditToolbarProps) {
+function EditToolbar(props: GridSlotProps['toolbar']) {
   const { selectedCellParams, cellMode, cellModesModel, setCellModesModel } = props;
 
   const handleSaveOrEdit = () => {
@@ -147,14 +149,11 @@ export default function StartEditButtonGrid() {
         cellModesModel={cellModesModel}
         onCellEditStop={handleCellEditStop}
         onCellModesModelChange={(model) => setCellModesModel(model)}
-        slots={{
-          toolbar: EditToolbar as GridSlots['toolbar'],
-        }}
+        slots={{ toolbar: EditToolbar }}
         slotProps={{
           toolbar: {
             cellMode,
             selectedCellParams,
-            setSelectedCellParams,
             cellModesModel,
             setCellModesModel,
           },

docs/data/data-grid/filtering/CustomFilterPanelPosition.js

@@ -29,16 +29,12 @@ export default function CustomFilterPanelPosition() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
-        slots={{
-          toolbar: CustomToolbar,
-        }}
+        slots={{ toolbar: CustomToolbar }}
         slotProps={{
           panel: {
             anchorEl: filterButtonEl,
           },
-          toolbar: {
-            setFilterButtonEl,
-          },
+          toolbar: { setFilterButtonEl },
         }}
       />
     </div>

docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx

@@ -1,19 +1,23 @@
 import * as React from 'react';
 import {
   DataGrid,
-  GridSlots,
+  GridSlotProps,
   GridToolbarContainer,
   GridToolbarFilterButton,
 } from '@mui/x-data-grid';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
 const VISIBLE_FIELDS = ['name', 'rating', 'country', 'dateCreated', 'isAdmin'];
 
-interface CustomToolbarProps {
-  setFilterButtonEl: React.Dispatch<React.SetStateAction<HTMLButtonElement | null>>;
+declare module '@mui/x-data-grid' {
+  interface ToolbarPropsOverrides {
+    setFilterButtonEl: React.Dispatch<
+      React.SetStateAction<HTMLButtonElement | null>
+    >;
+  }
 }
 
-function CustomToolbar({ setFilterButtonEl }: CustomToolbarProps) {
+function CustomToolbar({ setFilterButtonEl }: GridSlotProps['toolbar']) {
   return (
     <GridToolbarContainer>
       <GridToolbarFilterButton ref={setFilterButtonEl} />
@@ -35,16 +39,12 @@ export default function CustomFilterPanelPosition() {
     <div style={{ height: 400, width: '100%' }}>
       <DataGrid
         {...data}
-        slots={{
-          toolbar: CustomToolbar as GridSlots['toolbar'],
-        }}
+        slots={{ toolbar: CustomToolbar }}
         slotProps={{
           panel: {
             anchorEl: filterButtonEl,
           },
-          toolbar: {
-            setFilterButtonEl,
-          },
+          toolbar: { setFilterButtonEl },
         }}
       />
     </div>

docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx.preview

@@ -1,14 +1,10 @@
 <DataGrid
   {...data}
-  slots={{
-    toolbar: CustomToolbar as GridSlots['toolbar'],
-  }}
+  slots={{ toolbar: CustomToolbar }}
   slotProps={{
     panel: {
       anchorEl: filterButtonEl,
     },
-    toolbar: {
-      setFilterButtonEl,
-    },
+    toolbar: { setFilterButtonEl },
   }}
 />

docs/data/data-grid/list-view/ListViewAdvanced.tsx

@@ -28,6 +28,15 @@ import { formatDate, formatSize, stringAvatar } from './utils';
 import { ActionDrawer } from './components/ActionDrawer';
 import { RenameDialog } from './components/RenameDialog';
 
+declare module '@mui/x-data-grid' {
+  interface ToolbarPropsOverrides {
+    listView: boolean;
+    container: () => HTMLElement;
+    handleDelete: (ids: GridRowId[]) => void;
+    handleUpload: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  }
+}
+
 export default function ListViewAdvanced() {
   // This is used only for the example - renders the drawer inside the container
   const containerRef = React.useRef<HTMLDivElement>(null);

docs/data/data-grid/state/RestoreStateInitialState.tsx

@@ -5,7 +5,7 @@ import Stack from '@mui/material/Stack';
 import {
   DataGridPro,
   GridInitialState,
-  GridSlots,
+  GridSlotProps,
   GridToolbarContainer,
   GridToolbarDensitySelector,
   GridToolbarFilterButton,
@@ -14,11 +14,13 @@ import {
 } from '@mui/x-data-grid-pro';
 import { useDemoData } from '@mui/x-data-grid-generator';
 
-function GridCustomToolbar({
-  syncState,
-}: {
-  syncState: (stateToSave: GridInitialState) => void;
-}) {
+declare module '@mui/x-data-grid' {
+  interface ToolbarPropsOverrides {
+    syncState: (stateToSave: GridInitialState) => void;
+  }
+}
+
+function GridCustomToolbar({ syncState }: GridSlotProps['toolbar']) {
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
 
@@ -63,7 +65,7 @@ export default function RestoreStateInitialState() {
         <DataGridPro
           {...data}
           loading={loading}
-          slots={{ toolbar: GridCustomToolbar as GridSlots['toolbar'] }}
+          slots={{ toolbar: GridCustomToolbar }}
           slotProps={{ toolbar: { syncState } }}
         />
       </Box>

docs/data/data-grid/state/RestoreStateInitialState.tsx.preview

@@ -2,7 +2,7 @@
   <DataGridPro
     {...data}
     loading={loading}
-    slots={{ toolbar: GridCustomToolbar as GridSlots['toolbar'] }}
+    slots={{ toolbar: GridCustomToolbar }}
     slotProps={{ toolbar: { syncState } }}
   />
 </Box>

docs/package.json

@@ -114,7 +114,7 @@
     "@types/moment-hijri": "^2.1.4",
     "@types/moment-jalaali": "^0.7.9",
     "@types/prop-types": "^15.7.13",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "@types/react-router-dom": "^5.3.3",
     "@types/stylis": "^4.2.6",
     "@types/webpack-bundle-analyzer": "^4.7.0",

package.json

@@ -110,8 +110,8 @@
     "@types/lodash": "^4.17.12",
     "@types/mocha": "^10.0.9",
     "@types/node": "^20.17.3",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@types/react-test-renderer": "^18.3.0",
     "@types/requestidlecallback": "^0.3.7",
     "@types/sinon": "^17.0.3",

packages/x-data-grid-pro/src/tests/cellEditing.DataGridPro.test.tsx

@@ -9,8 +9,8 @@ import {
   GridRenderEditCellParams,
   GridValueSetter,
   GridPreProcessEditCellProps,
-  GridCellProps,
   GridCellModes,
+  GridColDef,
 } from '@mui/x-data-grid-pro';
 import { getBasicGridData } from '@mui/x-data-grid-generator';
 import { createRenderer, fireEvent, act, waitFor } from '@mui/internal-test-utils';
@@ -369,7 +369,7 @@ describe('<DataGridPro /> - Cell editing', () => {
     });
 
     describe('stopCellEditMode', () => {
-      function CustomEditComponent({ hasFocus }: GridCellProps) {
+      function CustomEditComponent({ hasFocus }: GridRenderEditCellParams) {
         const ref = React.useRef<HTMLInputElement>(null);
         React.useLayoutEffect(() => {
           if (hasFocus) {
@@ -631,7 +631,9 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should move focus to the cell below when cellToFocusAfter=below', async () => {
-        const renderEditCellProp = (props: GridCellProps) => <CustomEditComponent {...props} />;
+        const renderEditCellProp: GridColDef['renderEditCell'] = (props) => (
+          <CustomEditComponent {...props} />
+        );
         render(<TestCase columnProps={{ renderEditCell: renderEditCellProp }} />);
 
         act(() => apiRef.current.startCellEditMode({ id: 0, field: 'currencyPair' }));
@@ -647,7 +649,9 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should move focus to the cell on the right when cellToFocusAfter=right', async () => {
-        const renderEditCellProp = (props: GridCellProps) => <CustomEditComponent {...props} />;
+        const renderEditCellProp: GridColDef['renderEditCell'] = (props) => (
+          <CustomEditComponent {...props} />
+        );
         render(
           <TestCase
             {...getBasicGridData(1, 3)}
@@ -673,7 +677,9 @@ describe('<DataGridPro /> - Cell editing', () => {
       });
 
       it('should move focus to the cell on the left when cellToFocusAfter=left', async () => {
-        const renderEditCellProp = (props: GridCellProps) => <CustomEditComponent {...props} />;
+        const renderEditCellProp: GridColDef['renderEditCell'] = (props) => (
+          <CustomEditComponent {...props} />
+        );
         render(
           <TestCase
             {...getBasicGridData(1, 3)}

packages/x-data-grid-pro/src/tests/components.DataGridPro.test.tsx

@@ -55,7 +55,7 @@ describe('<DataGridPro/> - Components', () => {
       it(`should still publish the '${event}' event when overriding the '${prop}' prop in slots.cell`, () => {
         const propHandler = spy();
         const eventHandler = spy();
-        render(<TestCase slotProps={{ cell: { [prop]: propHandler } }} />);
+        render(<TestCase slotProps={{ cell: { [prop as any]: propHandler } }} />);
         apiRef!.current.subscribeEvent(event, eventHandler);
 
         expect(propHandler.callCount).to.equal(0);
@@ -104,7 +104,7 @@ describe('<DataGridPro/> - Components', () => {
       it(`should still publish the '${event}' event when overriding the '${prop}' prop in slots.row`, () => {
         const propHandler = spy();
         const eventHandler = spy();
-        render(<TestCase slotProps={{ row: { [prop]: propHandler } }} />);
+        render(<TestCase slotProps={{ row: { [prop as any]: propHandler } }} />);
         apiRef!.current.subscribeEvent(event, eventHandler);
 
         expect(propHandler.callCount).to.equal(0);

packages/x-data-grid/src/components/GridRow.tsx

@@ -64,7 +64,7 @@ export interface GridRowProps extends React.HTMLAttributes<HTMLDivElement> {
   onDoubleClick?: React.MouseEventHandler<HTMLDivElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-  [x: string]: any; // Allow custom attributes like data-* and aria-*
+  [x: `data-${string}`]: string;
 }
 
 function EmptyCell({ width }: { width: number }) {
@@ -109,7 +109,6 @@ const GridRow = React.forwardRef<HTMLDivElement, GridRowProps>(function GridRow(
     isLastVisible,
     isNotVisible,
     showBottomBorder,
-    focusedCell,
     tabbableCell,
     onClick,
     onDoubleClick,