Merge pull request #3 from BenukEl/feature/update-dev-deps

chore: update dev dependencies (@mui/x-data-grid, @mui/x-date-pickers)

package.json

@@ -20,11 +20,11 @@
         "@codegouvfr/react-dsfr": "^1.13.5",
         "@emotion/react": "^11.13.3",
         "@emotion/styled": "^11.13.0",
-        "@mui/icons-material": "^6.0.2",
-        "@mui/material": "^6.0.2",
-        "@mui/system": "^6.0.2",
-        "@mui/x-data-grid": "^6.18.2",
-        "@mui/x-date-pickers": "^5.0.12",
+        "@mui/icons-material": "^6.1.6",
+        "@mui/material": "^6.1.6",
+        "@mui/system": "^6.1.6",
+        "@mui/x-data-grid": "^7.22.2",
+        "@mui/x-date-pickers": "^7.22.2",
         "@tanstack/react-query": "^5.51.23",
         "@tanstack/react-router": "^1.47.5",
         "axios": "^1.7.1",

src/routes/mui.lazy.tsx

@@ -40,7 +40,7 @@ import Stepper from "@mui/material/Stepper";
 import Step from "@mui/material/Step";
 import StepLabel from "@mui/material/StepLabel";
 
-import { DataGrid, GridColDef, GridValueGetterParams } from "@mui/x-data-grid";
+import { DataGrid, GridColDef } from "@mui/x-data-grid";
 
 import Link from "@mui/material/Link";
 
@@ -370,29 +370,29 @@ function MaterialUIPickers() {
             <Stack spacing={3} sx={{ mt: 7 }}>
                 <DesktopDatePicker
                     label="Date desktop"
-                    inputFormat="MM/DD/YYYY"
+                    format="MM/DD/YYYY"
                     value={value}
                     onChange={handleChange}
-                    renderInput={params => <TextField {...params} />}
+                    slotProps={{ textField: { variant: "outlined" } }}
                 />
                 <MobileDatePicker
                     label="Date mobile"
-                    inputFormat="MM/DD/YYYY"
+                    format="MM/DD/YYYY"
                     value={value}
                     onChange={handleChange}
-                    renderInput={params => <TextField {...params} />}
+                    slotProps={{ textField: { variant: "outlined" } }}
                 />
                 <TimePicker
                     label="Time"
                     value={value}
                     onChange={handleChange}
-                    renderInput={params => <TextField {...params} />}
+                    slotProps={{ textField: { variant: "outlined" } }}
                 />
                 <DateTimePicker
                     label="Date&Time picker"
                     value={value}
                     onChange={handleChange}
-                    renderInput={params => <TextField {...params} />}
+                    slotProps={{ textField: { variant: "outlined" } }}
                 />
             </Stack>
         </LocalizationProvider>
@@ -597,8 +597,7 @@ const { DataGridDemo } = (() => {
             description: "This column has a value getter and is not sortable.",
             sortable: false,
             width: 160,
-            valueGetter: (params: GridValueGetterParams) =>
-                `${params.row.firstName || ""} ${params.row.lastName || ""}`
+            valueGetter: (_, row) => `${row.firstName || ""} ${row.lastName || ""}`
         }
     ];