Merge branch 'v7.x' into cherry-pick-13959

mui · Nov 18, 2024 · 0e65a2e · 0e65a2e
2 parents 14d3158 + 6dc86ef
commit 0e65a2e
Show file tree

Hide file tree

Showing 40 changed files with 363 additions and 396 deletions.
diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.js b/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 },
         }}

diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx b/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 },
         }}

diff --git a/docs/data/data-grid/editing/FullFeaturedCrudGrid.tsx.preview b/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 },
   }}

diff --git a/docs/data/data-grid/editing/StartEditButtonGrid.js b/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,
           },

diff --git a/docs/data/data-grid/editing/StartEditButtonGrid.tsx b/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,
           },

diff --git a/docs/data/data-grid/export/ExcelCustomExport.js b/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;
 

diff --git a/docs/data/data-grid/export/ExcelCustomExport.tsx b/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;
 

diff --git a/docs/data/data-grid/filtering/CustomFilterPanelPosition.js b/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>

diff --git a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx b/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>

diff --git a/docs/data/data-grid/filtering/CustomFilterPanelPosition.tsx.preview b/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 },
   }}
 />
diff --git a/docs/data/data-grid/list-view/ListViewAdvanced.tsx b/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);

diff --git a/docs/data/data-grid/localization/data.json b/docs/data/data-grid/localization/data.json
@@ -35,7 +35,7 @@
     "languageTag": "zh-CN",
     "importName": "zhCN",
     "localeName": "Chinese (Simplified)",
-    "missingKeysCount": 4,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/v7.x/packages/x-data-grid/src/locales/zhCN.ts"
   },
@@ -235,23 +235,23 @@
     "languageTag": "es-ES",
     "importName": "esES",
     "localeName": "Spanish",
-    "missingKeysCount": 4,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/v7.x/packages/x-data-grid/src/locales/esES.ts"
   },
   {
     "languageTag": "sv-SE",
     "importName": "svSE",
     "localeName": "Swedish",
-    "missingKeysCount": 5,
+    "missingKeysCount": 0,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/v7.x/packages/x-data-grid/src/locales/svSE.ts"
   },
   {
     "languageTag": "tr-TR",
     "importName": "trTR",
     "localeName": "Turkish",
-    "missingKeysCount": 4,
+    "missingKeysCount": 2,
     "totalKeysCount": 122,
     "githubLink": "https://github.com/mui/mui-x/blob/v7.x/packages/x-data-grid/src/locales/trTR.ts"
   },

diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx b/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>

diff --git a/docs/data/data-grid/state/RestoreStateInitialState.tsx.preview b/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>

diff --git a/docs/package.json b/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",