fix(deps): update dependency @mui/x-date-pickers to v7 (#450)

* fix(deps): update dependency @mui/x-date-pickers to v7

* Fixed and upgraded MUI date picker

* Fixed BuildingDrawer date picker

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jessica Feng <54833118+JessicaF@users.noreply.github.com>
Co-authored-by: Jessica <Jessica.Feng101@gmail.com>

Author: renovate[bot]

frontend/components/BookingCalendar.tsx

@@ -8,7 +8,6 @@ import Button from "@mui/material/Button";
 import ButtonGroup from "@mui/material/ButtonGroup";
 import Stack from "@mui/material/Stack";
 import { styled, useTheme } from "@mui/material/styles";
-import TextField, { TextFieldProps } from "@mui/material/TextField";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
 import Typography from "@mui/material/Typography";
@@ -30,19 +29,6 @@ import {
 import { selectDatetime } from "../redux/datetimeSlice";
 import { useSelector } from "../redux/hooks";
 
-const customDatePickerComponent = (params: TextFieldProps) => (
-  <TextField
-    {...params}
-    size="small"
-    sx={{
-      svg: { color: "#000000" },
-      input: { color: "#000000" },
-      width: { xs: "100%", md: 200 },
-      borderColor: "rgba(0, 0, 0, 0.12)",
-    }}
-  />
-);
-
 const ToolBarButton = styled(Button)(({ theme }) => ({
   borderColor: "rgba(0, 0, 0, 0.12)",
   color: "black",
@@ -232,13 +218,7 @@ const BookingCalendar: React.FC<{ events: Array<Booking> }> = ({ events }) => {
 
   return (
     <>
-      <Stack
-        justifyContent="flex-start"
-        height="100%"
-        width="100%"
-        // px={{ xs: 3, md: 15 }}
-        pt={3}
-      >
+      <Stack justifyContent="flex-start" height="100%" width="100%" pt={3}>
         <Stack
           direction={{ xs: "column", md: "row" }}
           justifyContent="space-between"
@@ -251,12 +231,22 @@ const BookingCalendar: React.FC<{ events: Array<Booking> }> = ({ events }) => {
           </Typography>
           <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DatePicker
-              inputFormat="iii, d MMM yyyy"
+              format="iii, d MMM yyyy"
               value={date}
               onChange={(newDate) => {
                 handleDateChange(newDate);
               }}
-              renderInput={customDatePickerComponent}
+              slotProps={{
+                textField: {
+                  size: "small",
+                  sx: {
+                    svg: { color: "#000000" },
+                    input: { color: "#000000" },
+                    width: { xs: "100%", md: 200 },
+                    borderColor: "rgba(0, 0, 0, 0.12)",
+                  },
+                },
+              }}
             />
           </LocalizationProvider>
         </Stack>

frontend/package-lock.json

@@ -18,7 +18,7 @@
     "@mui/icons-material": "^5.10.14",
     "@mui/material": "^5.10.14",
     "@mui/system": "^5.10.14",
-    "@mui/x-date-pickers": "^5.0.8",
+    "@mui/x-date-pickers": "^7.0.0",
     "@reduxjs/toolkit": "^1.9.5",
     "axios": "^1.0.0",
     "date-fns": "^2.29.3",

frontend/package.json

@@ -1,5 +1,5 @@
 import CloseIcon from "@mui/icons-material/Close";
-import { Typography, TypographyProps, useMediaQuery } from "@mui/material";
+import { Typography, useMediaQuery } from "@mui/material";
 import Box, { BoxProps } from "@mui/material/Box";
 import CircularProgress from "@mui/material/CircularProgress";
 import Divider from "@mui/material/Divider";
@@ -154,20 +154,34 @@ const BuildingDrawer: React.FC<{ open: boolean }> = ({ open }) => {
             }}
           >
             <DesktopDatePicker
-              inputFormat="dd/MM/yyyy"
+              format="dd/MM/yyyy"
               value={datetime}
               onChange={(value) =>
                 value && dispatch(setDatetime(toSydneyTime(value)))
               }
-              renderInput={customTextField}
+              slotProps={{
+                textField: {
+                  sx: {
+                    svg: { color: "#000000" },
+                    input: { color: "#000000" },
+                  },
+                },
+              }}
             />
             <div style={{ width: 10 }} />
             <TimePicker
               value={datetime}
               onChange={(value) =>
                 value && dispatch(setDatetime(toSydneyTime(value)))
               }
-              renderInput={customTextField}
+              slotProps={{
+                textField: {
+                  sx: {
+                    svg: { color: "#000000" },
+                    input: { color: "#000000" },
+                  },
+                },
+              }}
             />
           </div>
         </LocalizationProvider>