Bump React (mui#15255)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Andrew Cherniavskyi <[email protected]>

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/export/ExcelCustomExport.js

@@ -236,7 +236,7 @@ const groupingColDef = {
   headerName: 'Feature',
 };
 
-const exceljsPreProcess = ({ workbook, worksheet }) => {
+const exceljsPreProcess = async ({ workbook, worksheet }) => {
   // Set document meta data
   workbook.creator = 'MUI-X team';
   workbook.created = new Date();
@@ -264,14 +264,17 @@ const exceljsPreProcess = ({ workbook, worksheet }) => {
   };
   worksheet.addRow([]);
 };
-const exceljsPostProcess = ({ worksheet }) => {
+const exceljsPostProcess = async ({ worksheet }) => {
   // add a text after the data
   worksheet.addRow({}); // Add empty row
 
   worksheet.addRow(['Those data are for internal use only']);
 };
 
-const excelOptions = { exceljsPreProcess, exceljsPostProcess };
+const excelOptions = {
+  exceljsPreProcess,
+  exceljsPostProcess,
+};
 
 const getTreeDataPath = (row) => row.path;
 

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

@@ -5,6 +5,7 @@ import {
   GridExceljsProcessInput,
   GridColDef,
   DataGridPremiumProps,
+  GridExcelExportOptions,
 } from '@mui/x-data-grid-premium';
 
 const rows = [
@@ -243,7 +244,10 @@ const groupingColDef = {
   headerName: 'Feature',
 };
 
-const exceljsPreProcess = ({ workbook, worksheet }: GridExceljsProcessInput) => {
+const exceljsPreProcess = async ({
+  workbook,
+  worksheet,
+}: GridExceljsProcessInput) => {
   // Set document meta data
   workbook.creator = 'MUI-X team';
   workbook.created = new Date();
@@ -271,14 +275,17 @@ const exceljsPreProcess = ({ workbook, worksheet }: GridExceljsProcessInput) =>
   };
   worksheet.addRow([]);
 };
-const exceljsPostProcess = ({ worksheet }: GridExceljsProcessInput) => {
+const exceljsPostProcess = async ({ worksheet }: GridExceljsProcessInput) => {
   // add a text after the data
   worksheet.addRow({}); // Add empty row
 
   worksheet.addRow(['Those data are for internal use only']);
 };
 
-const excelOptions = { exceljsPreProcess, exceljsPostProcess };
+const excelOptions: GridExcelExportOptions = {
+  exceljsPreProcess,
+  exceljsPostProcess,
+};
 
 const getTreeDataPath: DataGridPremiumProps['getTreeDataPath'] = (row) => row.path;
 

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

@@ -113,7 +113,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

@@ -109,9 +109,8 @@
     "@types/karma": "^6.3.8",
     "@types/lodash": "^4.17.10",
     "@types/mocha": "^10.0.9",
-    "@types/node": "^20.16.11",
-    "@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-premium/src/hooks/features/export/gridExcelExportInterface.ts

@@ -3,8 +3,6 @@ import {
   GridFileExportOptions,
   GridExportFormat as GridExportFormatCommunity,
   GridExportExtension as GridExportExtensionCommunity,
-  GridToolbarExportProps as GridToolbarExportPropsCommunity,
-  GridExportDisplayOptions,
 } from '@mui/x-data-grid-pro';
 
 export type GridExportFormat = GridExportFormatCommunity | 'excel';
@@ -62,10 +60,6 @@ export interface GridExcelExportOptions extends GridFileExportOptions {
   includeColumnGroupsHeaders?: boolean;
 }
 
-export interface GridToolbarExportProps extends GridToolbarExportPropsCommunity {
-  excelOptions: GridExcelExportOptions & GridExportDisplayOptions;
-}
-
 /**
  * The excel export API interface that is available in the grid [[apiRef]].
  */