Upgrade to Material UI 9 (#2874)

* Upgrade to Material UI 9
Fixes #2873

* fix class change

* fix class change

* fix class change

* fix class change to attribute

* fix class change

* copilot finds
selected attribute

* Fab's comment

---------

Co-authored-by: Fred Lefévère-Laoide <Fred.Lefevere-Laoide@Taipy.io>

Author: FredLL-Avaiga

frontend/taipy-gui/dom/package-lock.json

@@ -5,10 +5,10 @@
     "dependencies": {
         "@emotion/react": "^11.10.0",
         "@emotion/styled": "^11.10.0",
-        "@mui/icons-material": "^7.1.0",
-        "@mui/material": "^7.1.0",
-        "@mui/x-date-pickers": "^8.3.0",
-        "@mui/x-tree-view": "^8.3.0",
+        "@mui/icons-material": "^9.0.1",
+        "@mui/material": "^9.0.1",
+        "@mui/x-date-pickers": "^9.0.4",
+        "@mui/x-tree-view": "^9.0.4",
         "apache-arrow": "^16.1.0",
         "axios": "^1.2.0",
         "better-react-mathjax": "^3.0.0",

frontend/taipy-gui/package-lock.json

@@ -21,21 +21,21 @@ describe("TaipyAlert Component", () => {
         const { getByRole } = render(<TaipyAlert message="Default Alert" />);
         const alert = getByRole("alert");
         expect(alert).toBeInTheDocument();
-        expect(alert).toHaveClass("MuiAlert-filledError");
+        expect(alert).toHaveClass("MuiAlert-colorError");
     });
 
     it("applies the correct severity", () => {
         const { getByRole } = render(<TaipyAlert message="Warning Alert" severity="warning" />);
         const alert = getByRole("alert");
         expect(alert).toBeInTheDocument();
-        expect(alert).toHaveClass("MuiAlert-filledWarning");
+        expect(alert).toHaveClass("MuiAlert-colorWarning");
     });
 
     it("applies the correct variant", () => {
         const { getByRole } = render(<TaipyAlert message="Outlined Alert" variant="outlined" />);
         const alert = getByRole("alert");
         expect(alert).toBeInTheDocument();
-        expect(alert).toHaveClass("MuiAlert-outlinedError");
+        expect(alert).toHaveClass("MuiAlert-outlined");
     });
 
     it("does not render if render prop is false", () => {

frontend/taipy-gui/package.json

@@ -74,7 +74,8 @@ describe("Button Component", () => {
         const elt = getByRole("button");
         expect(elt).toBeInTheDocument();
         expect(elt).toHaveClass("MuiButton-sizeMedium");
-        expect(elt).toHaveClass("MuiButton-outlinedPrimary");
+        expect(elt).toHaveClass("MuiButton-outlined");
+        expect(elt).toHaveClass("MuiButton-colorPrimary");
     });
     it("applies correct size", () => {
         const { getByRole } = render(<Button label="val" size="large" />);
@@ -86,7 +87,8 @@ describe("Button Component", () => {
         const { getByRole } = render(<Button label="val" variant="text" />);
         const elt = getByRole("button");
         expect(elt).toBeInTheDocument();
-        expect(elt).toHaveClass("MuiButton-textPrimary");
+        expect(elt).toHaveClass("MuiButton-text");
+        expect(elt).toHaveClass("MuiButton-colorPrimary");
     });
     it("dispatch a well formed message", async () => {
         const dispatch = jest.fn();

frontend/taipy-gui/src/components/Taipy/Alert.spec.tsx

@@ -170,17 +170,17 @@ const ChatRow = (props: ChatRowProps) => {
             container
             className={getSuffixedClassNames(className, sender ? "-sent" : "-received")}
             size={12}
-            sx={noAnchorSx}
-            justifyContent={sender ? "flex-end" : undefined}
+            sx={sender ? { ...noAnchorSx, justifyContent: "flex-end" } : noAnchorSx}
+
         >
             <Grid sx={sender ? senderMsgSx : undefined}>
                 {image ? (
-                    <Grid container justifyContent={sender ? "flex-end" : undefined}>
+                    <Grid container sx={sender ? { justifyContent: "flex-end" } : undefined}>
                         <Box component="img" sx={imageSx} alt="Uploaded image" src={image} />
                     </Grid>
                 ) : null}
                 {(!sender || showSender) && avatar ? (
-                    <Stack direction="row" gap={1} justifyContent={sender ? "flex-end" : undefined}>
+                    <Stack direction="row" sx={{ gap: 1, justifyContent: sender ? "flex-end" : undefined }}>
                         {!sender ? <Box sx={avatarColSx}>{avatar}</Box> : null}
                         <Stack>
                             <Box sx={sender ? rightNameSx : leftNameSx}>{name}</Box>
@@ -549,7 +549,7 @@ const Chat = (props: ChatProps) => {
                 {withInput ? (
                     <>
                         {imagePreview && (
-                            <Box mb={1}>
+                            <Box sx={{ mb: 1 }}>
                                 <Chip
                                     label={selectedFile?.name}
                                     avatar={<Avatar alt="Image preview" src={imagePreview} />}

frontend/taipy-gui/src/components/Taipy/Button.spec.tsx

@@ -44,7 +44,7 @@ interface DateRangeProps extends TaipyActiveProps, TaipyChangeProps {
     analogic?: boolean;
 }
 
-const textFieldProps = { textField: { margin: "dense" } } as DateTimePickerSlotProps<boolean>;
+const textFieldProps = { textField: { margin: "dense" } } as DateTimePickerSlotProps;
 
 const getRangeDateTime = (
     json: string | string[] | undefined,
@@ -142,11 +142,7 @@ const DateRange = (props: DateRangeProps) => {
                 <Stack
                     id={id}
                     className={`${className} ${getComponentClassName(props.children)}`}
-                    gap={0.5}
-                    direction="row"
-                    display="inline-flex"
-                    alignItems="center"
-                    width={props.width ? getCssSize(props.width) : undefined}
+                    sx={{ display: "inline-flex", alignItems: "center", gap: 0.5, width: props.width ? getCssSize(props.width) : undefined }}
                 >
                     {editable ? (
                         withTime ? (

frontend/taipy-gui/src/components/Taipy/Chat.tsx

@@ -50,7 +50,7 @@ interface DateSelectorProps extends TaipyActiveProps, TaipyChangeProps {
 }
 
 const boxSx = { display: "inline-block" };
-const textFieldProps = { textField: { margin: "dense" } } as DateTimePickerSlotProps<boolean>;
+const textFieldProps = { textField: { margin: "dense" } } as DateTimePickerSlotProps;
 
 const analogicRenderers = {
     hours: renderTimeViewClock,

frontend/taipy-gui/src/components/Taipy/DateRange.tsx

@@ -161,7 +161,7 @@ const Dialog = (props: DialogProps) => {
             onClose={handleAction}
             open={open === undefined ? defaultOpen === "true" || defaultOpen === true : !!open}
             className={`${className} ${getComponentClassName(props.children)}`}
-            PaperProps={paperProps}
+            slotProps={{ paper: paperProps }}
         >
             <Tooltip title={hover || ""}>
                 <DialogTitle sx={titleSx}>

frontend/taipy-gui/src/components/Taipy/DateSelector.tsx

@@ -68,7 +68,7 @@ describe("Input Component", () => {
         const { getByRole } = render(<Input value="val" type="text" size="small" />);
         const elt = getByRole("textbox");
         expect(elt).toBeInTheDocument();
-        expect(elt).toHaveClass("MuiInputBase-inputSizeSmall");
+        expect(elt.parentElement).toHaveClass("MuiInputBase-sizeSmall");
     });
     it("dispatch a well formed message", async () => {
         const dispatch = jest.fn();