Merge branch 'develop' into feature/try-catch-the-upload_checker-call

frontend/taipy-gui/package-lock.json

@@ -1911,18 +1911,18 @@
       "dev": true
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.1.tgz",
-      "integrity": "sha512-TmKkCTwgtwvlFTF1tZzG4lYbi7v6NGweEJwFBZoIWZrkF1OLa0xu4umifmIyd+bVIScsEj//E2AD6bOJbPMOOQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz",
+      "integrity": "sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.0.1.tgz",
-      "integrity": "sha512-CsgaF65jA3H1YzpDg6H2nFH/UHueVlmpEtPim7xF9VbjYnmnblG3aX0GflBahH96Pg0schrFWyRySlgbVAh5Kw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.0.2.tgz",
+      "integrity": "sha512-WaTPSvKcx8X7NdWAHzJWDZv+YXvK0MUY8+JI/r4/q2GgIa5RW+n4+08CGX6jB7sWhU1R3zy28NfsDUwwQjOThw==",
       "dependencies": {
         "@babel/runtime": "^7.25.0"
       },
@@ -1934,7 +1934,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^6.0.1",
+        "@mui/material": "^6.0.2",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -1945,15 +1945,15 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.1.tgz",
-      "integrity": "sha512-gOJS0RKYs9lRACaTluXPNopxFpIBhWVmhf09lHpqpPlR6bujXhuiTE2Q8puensdz3Qm2JGzl1VjccYHieV1g8A==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.2.tgz",
+      "integrity": "sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
-        "@mui/core-downloads-tracker": "^6.0.1",
-        "@mui/system": "^6.0.1",
+        "@mui/core-downloads-tracker": "^6.0.2",
+        "@mui/system": "^6.0.2",
         "@mui/types": "^7.2.16",
-        "@mui/utils": "^6.0.1",
+        "@mui/utils": "^6.0.2",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -1972,7 +1972,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.0.1",
+        "@mui/material-pigment-css": "^6.0.2",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -1992,42 +1992,13 @@
         }
       }
     },
-    "node_modules/@mui/material/node_modules/@mui/utils": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.1.tgz",
-      "integrity": "sha512-YmQYb2tY5nJactHltTrKA15TZfbd1R003a2xYHxUuycTv9n83rsIwHkypOxM4x7+c+Pc8xfCuE9EfLT3B3n40Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.25.0",
-        "@mui/types": "^7.2.16",
-        "@types/prop-types": "^15.7.12",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/private-theming": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.1.tgz",
-      "integrity": "sha512-jQCJml1OwIrhqN5tTk5Lpqx2RZKQnShE8lMlvAkuO7Ft+xaHkP8J3iHpEk3/Pzue34DfBQtK00jcaplgM47mBA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.2.tgz",
+      "integrity": "sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
-        "@mui/utils": "^6.0.1",
+        "@mui/utils": "^6.0.2",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -2047,39 +2018,10 @@
         }
       }
     },
-    "node_modules/@mui/private-theming/node_modules/@mui/utils": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.1.tgz",
-      "integrity": "sha512-YmQYb2tY5nJactHltTrKA15TZfbd1R003a2xYHxUuycTv9n83rsIwHkypOxM4x7+c+Pc8xfCuE9EfLT3B3n40Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.25.0",
-        "@mui/types": "^7.2.16",
-        "@types/prop-types": "^15.7.12",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/styled-engine": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.1.tgz",
-      "integrity": "sha512-7ZOnUhIak2vosDgMlBE/oLrsvvF3O8QKmTFpP6bhZkHjPu4dv0DbF1vC7gzgkOqiMaT0/NgRQCFW9zh38pIvsg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.2.tgz",
+      "integrity": "sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
         "@emotion/cache": "^11.13.1",
@@ -2108,15 +2050,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.1.tgz",
-      "integrity": "sha512-RdWyCMi+GkAekOnpMKhy51lyzid4F6Vj96vekp3AExkFY21JWg2+KVBqcAgJOROJ3RiaeDJf98n0yrixlCvuEw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.2.tgz",
+      "integrity": "sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
-        "@mui/private-theming": "^6.0.1",
-        "@mui/styled-engine": "^6.0.1",
+        "@mui/private-theming": "^6.0.2",
+        "@mui/styled-engine": "^6.0.2",
         "@mui/types": "^7.2.16",
-        "@mui/utils": "^6.0.1",
+        "@mui/utils": "^6.0.2",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -2146,35 +2088,6 @@
         }
       }
     },
-    "node_modules/@mui/system/node_modules/@mui/utils": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.1.tgz",
-      "integrity": "sha512-YmQYb2tY5nJactHltTrKA15TZfbd1R003a2xYHxUuycTv9n83rsIwHkypOxM4x7+c+Pc8xfCuE9EfLT3B3n40Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.25.0",
-        "@mui/types": "^7.2.16",
-        "@types/prop-types": "^15.7.12",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/types": {
       "version": "7.2.16",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz",
@@ -2189,27 +2102,27 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
-      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.2.tgz",
+      "integrity": "sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/types": "^7.2.15",
+        "@babel/runtime": "^7.25.0",
+        "@mui/types": "^7.2.16",
         "@types/prop-types": "^15.7.12",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.3.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -2218,12 +2131,13 @@
       }
     },
     "node_modules/@mui/x-date-pickers": {
-      "version": "7.15.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.15.0.tgz",
-      "integrity": "sha512-YQEQICNxUEFYp/I/yP58cqihA8yhXaXSNZ1/N0JANu2IlCwoJ4Jzi+S0s4RN7RghpiDyoSMFijROBC5HfpTjiw==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.16.0.tgz",
+      "integrity": "sha512-NjFAoI6NiJ/65LJf5A38Y+aA/zSIow+7i52QBcgryrdBlIu46nssqzohPRWNUFwnxNXhWstfcV3YAb2avCIY5A==",
       "dependencies": {
-        "@babel/runtime": "^7.25.4",
+        "@babel/runtime": "^7.25.6",
         "@mui/utils": "^5.16.6",
+        "@mui/x-internals": "7.16.0",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
@@ -2281,12 +2195,41 @@
         }
       }
     },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/x-internals": {
-      "version": "7.15.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.15.0.tgz",
-      "integrity": "sha512-Q/IZvZhHpe64Ost1mRbdp6ML8KQQBprwwgzqo6pZbrCaWMPB2gk2jcUwdCwnLsc+gutaEPVhZ8N7it8VZcHtbg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.16.0.tgz",
+      "integrity": "sha512-ijer5XYmWlJqWaTmF6TGH1odG7EAupv8iDWYmDm2yVR9IQ+L2nQSuhiFClI+wmGx40KS2VKOlzDMPpF0t7/HCg==",
       "dependencies": {
-        "@babel/runtime": "^7.25.4",
+        "@babel/runtime": "^7.25.6",
         "@mui/utils": "^5.16.6"
       },
       "engines": {
@@ -2300,14 +2243,43 @@
         "react": "^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@mui/x-internals/node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/x-tree-view": {
-      "version": "7.15.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.15.0.tgz",
-      "integrity": "sha512-iMhI+ktZWnWMB60uCToGwTIGpmC17LT6o+fV1QSLgh8gWHjTKxJHHVIJnwX4GGeg+CDZQrodkAcGwu54txlStQ==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.16.0.tgz",
+      "integrity": "sha512-C/XCMtBs5jZSiCJG7hgRufcjj1fh60ea8COzgrcNG09bKVPkkfCP2Hp1L5ZXiTJJJ1GcFwQ3wVwy/1ln2+LuHg==",
       "dependencies": {
-        "@babel/runtime": "^7.25.4",
+        "@babel/runtime": "^7.25.6",
         "@mui/utils": "^5.16.6",
-        "@mui/x-internals": "7.15.0",
+        "@mui/x-internals": "7.16.0",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
@@ -2337,6 +2309,35 @@
         }
       }
     },
+    "node_modules/@mui/x-tree-view/node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2465,9 +2466,9 @@
       }
     },
     "node_modules/@shikijs/core": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.16.1.tgz",
-      "integrity": "sha512-aI0hBtw+a6KsJp2jcD4YuQqKpeCbURMZbhHVozDknJpm+KJqeMRkEnfBC8BaKE/5XC+uofPgCLsa/TkTk0Ba0w==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/@shikijs/core/-/core-1.16.2.tgz",
+      "integrity": "sha512-XSVH5OZCvE4WLMgdoBqfPMYmGHGmCC3OgZhw0S7KcSi2XKZ+5oHGe71GFnTljgdOxvxx5WrRks6QoTLKrl1eAA==",
       "dev": true,
       "dependencies": {
         "@shikijs/vscode-textmate": "^9.2.0",
@@ -4552,9 +4553,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001655",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz",
-      "integrity": "sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==",
+      "version": "1.0.30001657",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001657.tgz",
+      "integrity": "sha512-DPbJAlP8/BAXy3IgiWmZKItubb3TYGP0WscQQlVGIfT4s/YlFYVuJgyOsQNP7rJRChx/qdMeLJQJP0Sgg2yjNA==",
       "funding": [
         {
           "type": "opencollective",
@@ -6139,9 +6140,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.13",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
-      "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q=="
+      "version": "1.5.14",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.14.tgz",
+      "integrity": "sha512-bEfPECb3fJ15eaDnu9LEJ2vPGD6W1vt7vZleSVyFhYuMIKm3vz/g9lt7IvEzgdwj58RjbPKUF2rXTCN/UW47tQ=="
     },
     "node_modules/element-size": {
       "version": "1.1.1",
@@ -6595,9 +6596,9 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.35.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz",
-      "integrity": "sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==",
+      "version": "7.35.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.2.tgz",
+      "integrity": "sha512-Rbj2R9zwP2GYNcIak4xoAMV57hrBh3hTaR0k7hVjwCQgryE/pw5px4b13EYjduOI0hfXyZhwBxaGpOTbWSGzKQ==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.8",
@@ -7296,9 +7297,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.6",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
-      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
+      "version": "1.15.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.8.tgz",
+      "integrity": "sha512-xgrmBhBToVKay1q2Tao5LI26B83UhrB/vM1avwVSDzt8rx3rO6AizBAaF46EgksTVr+rFTQaqZZ9MVBfUe4nig==",
       "funding": [
         {
           "type": "individual",
@@ -11397,9 +11398,9 @@
       }
     },
     "node_modules/lint-staged/node_modules/yaml": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
-      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
+      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
       "dev": true,
       "bin": {
         "yaml": "bin.mjs"
@@ -13090,9 +13091,9 @@
       "integrity": "sha512-ESj2+eBxhGrcA1azgHs7lARG5+5iLakc/6nlfbpjcLl00HuuUOIuORhYXN4D1HfvMSKuVtFQjAlnwi1JHEeDIw=="
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",
@@ -13268,9 +13269,9 @@
       }
     },
     "node_modules/postcss": {
-      "version": "8.4.44",
-      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.44.tgz",
-      "integrity": "sha512-Aweb9unOEpQ3ezu4Q00DPvvM2ZTUitJdNKeP/+uQgr1IBIqu574IaZoURId7BKtWMREwzKa9OgzPzezWGPWFQw==",
+      "version": "8.4.45",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.45.tgz",
+      "integrity": "sha512-7KTLTdzdZZYscUc65XmjFiB73vBhBfbPztCYdUNvlaso9PrzjzcmjqBPR0lNGkcVlcO4BjiO5rK/qNz+XAen1Q==",
       "dev": true,
       "funding": [
         {
@@ -14480,12 +14481,12 @@
       }
     },
     "node_modules/shiki": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.16.1.tgz",
-      "integrity": "sha512-tCJIMaxDVB1mEIJ5TvfZU7kCPB5eo9fli5+21Olc/bmyv+w8kye3JOp+LZRmGkAyT71hrkefQhTiY+o9mBikRQ==",
+      "version": "1.16.2",
+      "resolved": "https://registry.npmjs.org/shiki/-/shiki-1.16.2.tgz",
+      "integrity": "sha512-gSym0hZf5a1U0iDPsdoOAZbvoi+e0c6c3NKAi03FoSLTm7oG20tum29+gk0wzzivOasn3loxfGUPT+jZXIUbWg==",
       "dev": true,
       "dependencies": {
-        "@shikijs/core": "1.16.1",
+        "@shikijs/core": "1.16.2",
         "@shikijs/vscode-textmate": "^9.2.0",
         "@types/hast": "^3.0.4"
       }
@@ -15779,9 +15780,9 @@
       }
     },
     "node_modules/typedoc/node_modules/yaml": {
-      "version": "2.5.0",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.0.tgz",
-      "integrity": "sha512-2wWLbGbYDiSqqIKoPjar3MPgB94ErzCtrNE1FdqGuaO0pi2JGjmE8aW8TDZwzU7vuxcGRdL/4gPQwQ7hD5AMSw==",
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.5.1.tgz",
+      "integrity": "sha512-bLQOjaX/ADgQ20isPJRvF0iRUHIxVhYvr53Of7wGcWlO2jvtUlH5m87DsmulFVxRpNLOnI4tB6p/oh8D7kpn9Q==",
       "dev": true,
       "bin": {
         "yaml": "bin.mjs"

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

@@ -90,14 +90,14 @@ const mapConfig = JSON.stringify({
     traces: [["Lat", "Lon"]],
     xaxis: ["x"],
     yaxis: ["y"],
-    types: ["scattermapbox"],
+    types: ["scattermap"],
     modes: ["markers"],
     axisNames: [["lon", "lat"]],
 });
 
 const mapLayout = JSON.stringify({
     dragmode: "zoom",
-    mapbox: { style: "open-street-map", center: { lat: 38, lon: -90 }, zoom: 3 },
+    map: { style: "open-street-map", center: { lat: 38, lon: -90 }, zoom: 3 },
     margin: { r: 0, t: 0, b: 0, l: 0 },
 });
 

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

@@ -44,6 +44,8 @@ import {
     useModule,
 } from "../../utils/hooks";
 import { darkThemeTemplate } from "../../themes/darkThemeTemplate";
+import { Figure } from "react-plotly.js";
+import { ligthenPayload } from "../../context/wsUtils";
 
 const Plot = lazy(() => import("react-plotly.js"));
 
@@ -66,6 +68,7 @@ interface ChartProp extends TaipyActiveProps, TaipyChangeProps {
     template_Light_?: string;
     //[key: `selected_${number}`]: number[];
     figure?: Array<Record<string, unknown>>;
+    onClick?: string;
 }
 
 interface ChartConfig {
@@ -175,6 +178,23 @@ const MARKER_TO_COL = ["color", "size", "symbol", "opacity", "colors"];
 
 const isOnClick = (types: string[]) => (types?.length ? types.every((t) => t === "pie") : false);
 
+interface Axis {
+    p2c: () => number;
+    p2d: (a: number) => number;
+}
+interface PlotlyMap {
+    _subplot?: { xaxis: Axis; yaxis: Axis };
+}
+interface PlotlyDiv extends HTMLDivElement {
+    _fullLayout?: {
+        map?: PlotlyMap;
+        geo?: PlotlyMap;
+        mapbox?: PlotlyMap;
+        xaxis?: Axis;
+        yaxis?: Axis;
+    };
+}
+
 interface WithpointNumbers {
     pointNumbers: number[];
 }
@@ -263,6 +283,7 @@ const Chart = (props: ChartProp) => {
         data = emptyData,
         onRangeChange,
         propagate = true,
+        onClick,
     } = props;
     const dispatch = useDispatch();
     const [selected, setSelected] = useState<number[][]>([]);
@@ -575,9 +596,45 @@ const Chart = (props: ChartProp) => {
         ]
     );
 
-    const onAfterPlot = useCallback(() => {
-        // Manage loading Animation ... One day
-    }, []);
+    const clickHandler = useCallback(
+        (evt?: MouseEvent) => {
+            const map =
+                (evt?.currentTarget as PlotlyDiv)?._fullLayout?.map ||
+                (evt?.currentTarget as PlotlyDiv)?._fullLayout?.geo ||
+                (evt?.currentTarget as PlotlyDiv)?._fullLayout?.mapbox;
+            const xaxis = map ? map._subplot?.xaxis : (evt?.currentTarget as PlotlyDiv)?._fullLayout?.xaxis;
+            const yaxis = map ? map._subplot?.xaxis : (evt?.currentTarget as PlotlyDiv)?._fullLayout?.yaxis;
+            if (!xaxis || !yaxis) {
+                console.info("clickHandler: Plotly div does not have an xaxis object", evt);
+                return;
+            }
+            const transform = (axis: Axis, delta: keyof DOMRect) => {
+                const bb = (evt?.target as HTMLDivElement).getBoundingClientRect();
+                return (pos?: number) => axis.p2d((pos || 0) - (bb[delta] as number));
+            };
+            dispatch(
+                createSendActionNameAction(
+                    id,
+                    module,
+                    ligthenPayload({
+                        action: onClick,
+                        lat: map ? yaxis.p2c() : undefined,
+                        y: map ? undefined : transform(yaxis, "top")(evt?.clientY),
+                        lon: map ? xaxis.p2c() : undefined,
+                        x: map ? undefined : transform(xaxis, "left")(evt?.clientX),
+                    })
+                )
+            );
+        },
+        [dispatch, module, id, onClick]
+    );
+
+    const onInitialized = useCallback(
+        (figure: Readonly<Figure>, graphDiv: Readonly<HTMLElement>) => {
+            onClick && graphDiv.addEventListener("click", clickHandler);
+        },
+        [onClick, clickHandler]
+    );
 
     const getRealIndex = useCallback(
         (index?: number) =>
@@ -585,8 +642,8 @@ const Chart = (props: ChartProp) => {
                 ? props.figure
                     ? index
                     : data[dataKey].tp_index
-                      ? (data[dataKey].tp_index[index] as number)
-                      : index
+                    ? (data[dataKey].tp_index[index] as number)
+                    : index
                 : 0,
         [data, dataKey, props.figure]
     );
@@ -631,11 +688,11 @@ const Chart = (props: ChartProp) => {
                             layout={layout}
                             style={style}
                             onRelayout={onRelayout}
-                            onAfterPlot={onAfterPlot}
                             onSelected={onSelect}
                             onDeselect={onSelect}
                             config={plotConfig}
                             useResizeHandler
+                            onInitialized={onInitialized}
                         />
                     ) : (
                         <Plot
@@ -643,12 +700,12 @@ const Chart = (props: ChartProp) => {
                             layout={layout}
                             style={style}
                             onRelayout={onRelayout}
-                            onAfterPlot={onAfterPlot}
                             onSelected={isOnClick(config.types) ? undefined : onSelect}
                             onDeselect={isOnClick(config.types) ? undefined : onSelect}
                             onClick={isOnClick(config.types) ? onSelect : undefined}
                             config={plotConfig}
                             useResizeHandler
+                            onInitialized={onInitialized}
                         />
                     )}
                 </Suspense>

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

@@ -17,7 +17,7 @@ import Avatar from "@mui/material/Avatar";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Chip from "@mui/material/Chip";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import Paper from "@mui/material/Paper";
@@ -49,6 +49,7 @@ interface ChatProps extends TaipyActiveProps {
     height?: string;
     defaultKey?: string; // for testing purposes only
     pageSize?: number;
+    showSender?: boolean;
 }
 
 const ENTER_KEY = "Enter";
@@ -56,7 +57,7 @@ const ENTER_KEY = "Enter";
 const indicWidth = 0.7;
 const avatarWidth = 24;
 const chatAvatarSx = { ...avatarSx, width: avatarWidth, height: avatarWidth };
-const avatarColSx = { width: 1.5 * avatarWidth, minWidth: 1.5 * avatarWidth };
+const avatarColSx = { width: 1.5 * avatarWidth, minWidth: 1.5 * avatarWidth, pt: 1 };
 const senderMsgSx = {
     width: "fit-content",
     maxWidth: "80%",
@@ -65,7 +66,7 @@ const senderMsgSx = {
 const gridSx = { pb: "1em", mt: "unset", flex: 1, overflow: "auto" };
 const loadMoreSx = { width: "fit-content", marginLeft: "auto", marginRight: "auto" };
 const inputSx = { maxWidth: "unset" };
-const nameSx = { fontSize: "0.6em", fontWeight: "bolder" };
+const nameSx = { fontSize: "0.6em", fontWeight: "bolder", pl: `${indicWidth}em` };
 const senderPaperSx = {
     pr: `${indicWidth}em`,
     pl: `${indicWidth}em`,
@@ -126,30 +127,27 @@ interface ChatRowProps {
     className?: string;
     getAvatar: (id: string, sender: boolean) => ReactNode;
     index: number;
+    showSender: boolean;
 }
 
 const ChatRow = (props: ChatRowProps) => {
-    const { senderId, message, name, className, getAvatar, index } = props;
+    const { senderId, message, name, className, getAvatar, index, showSender } = props;
     const sender = senderId == name;
     const avatar = getAvatar(name, sender);
     return (
         <Grid
-            item
             container
             className={getSuffixedClassNames(className, sender ? "-sent" : "-received")}
-            xs={12}
+            size={12}
             sx={noAnchorSx}
             justifyContent={sender ? "flex-end" : undefined}
         >
-            <Grid item sx={sender ? senderMsgSx : undefined}>
-                {avatar ? (
-                    <Stack>
-                        <Stack direction="row" gap={1}>
-                            <Box sx={avatarColSx}></Box>
+            <Grid sx={sender ? senderMsgSx : undefined}>
+                {(!sender || showSender) && avatar ? (
+                    <Stack direction="row" gap={1}>
+                        <Box sx={avatarColSx}>{avatar}</Box>
+                        <Stack>
                             <Box sx={nameSx}>{name}</Box>
-                        </Stack>
-                        <Stack direction="row" gap={1}>
-                            <Box sx={avatarColSx}>{avatar}</Box>
                             <Paper sx={sender ? senderPaperSx : otherPaperSx} data-idx={index}>
                                 {message}
                             </Paper>
@@ -168,7 +166,16 @@ const ChatRow = (props: ChatRowProps) => {
 const getChatKey = (start: number, page: number) => `Chat-${start}-${start + page}`;
 
 const Chat = (props: ChatProps) => {
-    const { id, updateVarName, senderId = "taipy", onAction, withInput = true, defaultKey = "", pageSize = 50 } = props;
+    const {
+        id,
+        updateVarName,
+        senderId = "taipy",
+        onAction,
+        withInput = true,
+        defaultKey = "",
+        pageSize = 50,
+        showSender = true,
+    } = props;
     const dispatch = useDispatch();
     const module = useModule();
 
@@ -352,7 +359,7 @@ const Chat = (props: ChatProps) => {
             <Paper className={className} sx={boxSx} id={id}>
                 <Grid container rowSpacing={2} sx={gridSx} ref={scrollDivRef}>
                     {rows.length && !rows[0] ? (
-                        <Grid item className={getSuffixedClassNames(className, "-load")} xs={12} sx={noAnchorSx}>
+                        <Grid className={getSuffixedClassNames(className, "-load")} size={12} sx={noAnchorSx}>
                             <Box sx={loadMoreSx}>
                                 <Button
                                     endIcon={<ArrowUpward />}
@@ -374,6 +381,7 @@ const Chat = (props: ChatProps) => {
                                 className={className}
                                 getAvatar={getAvatar}
                                 index={idx}
+                                showSender={showSender}
                             />
                         ) : null
                     )}

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

@@ -29,6 +29,16 @@ describe("Part Component", () => {
         const elt = getByText("bar");
         expect(elt).toHaveClass("taipy-part");
     })
+    it("displays with width=70%", async () => {
+        const { getByText } = render(<Part width="70%">bar</Part>);
+        const elt = getByText("bar");
+        expect(elt).toHaveStyle('width: 70%');
+    });
+    it("displays with width=500", async () => {
+        const { getByText } = render(<Part width={500}>bar</Part>);
+        const elt = getByText("bar");
+        expect(elt).toHaveStyle('width: 500px');
+    });
     it("renders an iframe", async () => {
         const {getByText} = render(<Part className="taipy-part" page="http://taipy.io">bar</Part>);
         const elt = getByText("bar");

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

@@ -16,7 +16,7 @@ import Box from "@mui/material/Box";
 
 import { useClassNames, useDynamicProperty } from "../../utils/hooks";
 import TaipyRendered from "../pages/TaipyRendered";
-import { TaipyBaseProps } from "./utils";
+import { expandSx, getCssSize, TaipyBaseProps } from "./utils";
 import { TaipyContext } from "../../context/taipyContext";
 
 interface PartProps extends TaipyBaseProps {
@@ -29,6 +29,7 @@ interface PartProps extends TaipyBaseProps {
     partial?: boolean;
     height?: string;
     defaultHeight?: string;
+    width?: string | number;
 }
 
 const IframeStyle = {
@@ -55,7 +56,7 @@ const Part = (props: PartProps) => {
         return false;
     }, [state.locations, page, defaultPartial]);
 
-    const boxSx = useMemo(() => (height ? { height: height } : undefined), [height]);
+    const boxSx = useMemo(() => expandSx({}, height ? { height: height } : undefined, props.width ? {width: getCssSize(props.width)}: undefined), [height, props.width]);
     return render ? (
         <Box id={id} className={className} sx={boxSx}>
             {iFrame ? (

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

@@ -12,60 +12,97 @@
  */
 
 import React from "react";
-import {render} from "@testing-library/react";
+import { render } from "@testing-library/react";
 import "@testing-library/jest-dom";
 import userEvent from "@testing-library/user-event";
 
 import { StatusType } from "./Status";
-import StatusList from './StatusList';
+import StatusList, { getStatusStrValue, getStatusIntValue } from "./StatusList";
 
 const statuses = [
-    {status: "info", message: "info"},
+    { status: "info", message: "info" },
     ["error", "error"],
-    {status: "warning", message: "warning"},
-    {status: "success", message: "success"},
+    { status: "warning", message: "warning" },
+    { status: "success", message: "success" },
 ] as Array<[string, string] | StatusType>;
 
 describe("StatusList Component", () => {
     it("renders", async () => {
-        const {getByText} = render(<StatusList value={statuses} />);
+        const { getByText } = render(<StatusList value={statuses} />);
         const elt = getByText("4 statuses");
         const av = getByText("E");
         expect(elt.tagName).toBe("SPAN");
         expect(av.tagName).toBe("DIV");
-    })
+    });
     it("uses the class", async () => {
-        const {getByText} = render(<StatusList value={statuses} className="taipy-status" />);
+        const { getByText } = render(<StatusList value={statuses} className="taipy-status" />);
         const elt = getByText("4 statuses");
         expect(elt.parentElement).toHaveClass("taipy-status");
-    })
+    });
     it("can be opened when more than 1 status", async () => {
-        const {getByTestId} = render(<StatusList value={statuses} />);
+        const { getByTestId } = render(<StatusList value={statuses} />);
         const elt = getByTestId("ArrowDownwardIcon");
-    })
+        expect(elt).toBeInTheDocument();
+    });
     it("cannot be opened when 1 status", async () => {
-        const {queryAllByRole} = render(<StatusList value={statuses[0]} />);
+        const { queryAllByRole } = render(<StatusList value={statuses[0]} />);
         expect(queryAllByRole("button")).toHaveLength(0);
-    })
+    });
     it("displays a default status", async () => {
-        const {getByText} = render(<StatusList value={[]}  />);
+        const { getByText } = render(<StatusList value={[]} />);
         getByText("No Status");
         getByText("I");
-    })
+    });
     it("opens on click", async () => {
-        const {getByTestId, getByText} = render(<StatusList value={statuses} />);
+        const { getByTestId, getByText } = render(<StatusList value={statuses} />);
         const elt = getByTestId("ArrowDownwardIcon");
         await userEvent.click(elt);
         const selt = getByText("info");
         expect(selt.parentElement?.parentElement?.childElementCount).toBe(4);
-    })
+    });
     it("hide closed statuses", async () => {
-        const {getByTestId, queryAllByTestId} = render(<StatusList value={statuses} />);
+        const { getByTestId, queryAllByTestId } = render(<StatusList value={statuses} />);
         const elt = getByTestId("ArrowDownwardIcon");
         await userEvent.click(elt);
         const icons = queryAllByTestId("CancelIcon");
         expect(icons).toHaveLength(4);
         await userEvent.click(icons[0]);
         expect(queryAllByTestId("CancelIcon")).toHaveLength(3);
-    })
+    });
+    it("should return 0 for unknown status", () => {
+        expect(getStatusIntValue("unknown")).toBe(0);
+        expect(getStatusIntValue("")).toBe(0);
+        expect(getStatusIntValue("a")).toBe(0);
+        expect(getStatusIntValue("z")).toBe(0);
+    });
+    it('should return "info" for status 1', () => {
+        expect(getStatusStrValue(1)).toBe("info");
+    });
+
+    it('should return "success" for status 2', () => {
+        expect(getStatusStrValue(2)).toBe("success");
+    });
+
+    it('should return "warning" for status 3', () => {
+        expect(getStatusStrValue(3)).toBe("warning");
+    });
+
+    it('should return "error" for status 4', () => {
+        expect(getStatusStrValue(4)).toBe("error");
+    });
+
+    it('should return "unknown" for any other status', () => {
+        expect(getStatusStrValue(0)).toBe("unknown");
+        expect(getStatusStrValue(5)).toBe("unknown");
+        expect(getStatusStrValue(-1)).toBe("unknown");
+    });
+    it("should handle invalid JSON in defaultValue", () => {
+        const invalidDefaultValue = "{invalidJson}";
+        const consoleSpy = jest.spyOn(console, "info").mockImplementation(() => {});
+        const { getByText } = render(<StatusList value={undefined!} defaultValue={invalidDefaultValue} />);
+        expect(consoleSpy).toHaveBeenCalledWith(expect.stringContaining("Cannot parse status value"));
+        const elt = getByText("No Status");
+        expect(elt).toBeInTheDocument();
+        consoleSpy.mockRestore();
+    });
 });

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

@@ -22,7 +22,7 @@ import Status, { StatusType } from "./Status";
 import { TaipyBaseProps, TaipyHoverProps } from "./utils";
 import { useClassNames, useDynamicProperty } from "../../utils/hooks";
 
-const getStatusIntValue = (status: string) => {
+export const getStatusIntValue = (status: string) => {
     status = status.toLowerCase();
     if (status.startsWith("i")) {
         return 1;
@@ -36,7 +36,7 @@ const getStatusIntValue = (status: string) => {
     return 0;
 };
 
-const getStatusStrValue = (status: number) => {
+export const getStatusStrValue = (status: number) => {
     switch (status) {
         case 1:
             return "info";

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

@@ -18,7 +18,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import Badge from "@mui/material/Badge";
 import FormControl from "@mui/material/FormControl";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
@@ -208,8 +208,8 @@ const FilterRow = (props: FilterRowProps) => {
     const colLov = colId in columns && columns[colId].lov ? columns[colId].lov : undefined;
 
     return (
-        <Grid container item xs={12} alignItems="center">
-            <Grid item xs={3.5}>
+        <Grid container size={12} alignItems="center">
+            <Grid size={3.5}>
                 <FormControl margin="dense">
                     <InputLabel>Column</InputLabel>
                     <Select value={colId || ""} onChange={onColSelect} input={<OutlinedInput label="Column" />}>
@@ -223,7 +223,7 @@ const FilterRow = (props: FilterRowProps) => {
                     </Select>
                 </FormControl>
             </Grid>
-            <Grid item xs={3}>
+            <Grid size={3}>
                 <FormControl margin="dense">
                     <InputLabel>Action</InputLabel>
                     <Select value={action || ""} onChange={onActSelect} input={<OutlinedInput label="Action" />}>
@@ -235,7 +235,7 @@ const FilterRow = (props: FilterRowProps) => {
                     </Select>
                 </FormControl>
             </Grid>
-            <Grid item xs={3.5}>
+            <Grid size={3.5}>
                 {colType == "number" ? (
                     <TextField
                         type="number"
@@ -290,7 +290,7 @@ const FilterRow = (props: FilterRowProps) => {
                     />
                 )}
             </Grid>
-            <Grid item xs={1}>
+            <Grid size={1}>
                 <Tooltip title="Validate">
                     <span>
                         <IconButton onClick={onCheckClick} disabled={!enableCheck} sx={iconInRowSx}>
@@ -299,7 +299,7 @@ const FilterRow = (props: FilterRowProps) => {
                     </span>
                 </Tooltip>
             </Grid>
-            <Grid item xs={1}>
+            <Grid size={1}>
                 <Tooltip title="Delete">
                     <span>
                         <IconButton onClick={onDeleteClick} disabled={!enableDel} sx={iconInRowSx}>

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

@@ -17,7 +17,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 import SortByAlpha from "@mui/icons-material/SortByAlpha";
 import Badge from "@mui/material/Badge";
 import FormControl from "@mui/material/FormControl";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
@@ -129,8 +129,8 @@ const SortRow = (props: SortRowProps) => {
     }, [columns, sort, idx]);
 
     return cols.length ? (
-        <Grid container item xs={12} alignItems="center">
-            <Grid item xs={6}>
+        <Grid container size={12} alignItems="center">
+            <Grid size={6}>
                 <FormControl margin="dense">
                     <InputLabel>Column</InputLabel>
                     <Select value={colId || ""} onChange={onColSelect} input={<OutlinedInput label="Column" />}>
@@ -142,13 +142,13 @@ const SortRow = (props: SortRowProps) => {
                     </Select>
                 </FormControl>
             </Grid>
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Switch checked={order} onChange={onOrderSwitch} />
                 <Typography variant="caption" color="text.secondary" sx={orderCaptionSx}>
                     {order ? "asc" : "desc"}
                 </Typography>
             </Grid>
-            <Grid item xs={1}>
+            <Grid size={1}>
                 <Tooltip title="Validate">
                     <span>
                         <IconButton onClick={onCheckClick} disabled={!enableCheck} sx={iconInRowSx}>
@@ -157,7 +157,7 @@ const SortRow = (props: SortRowProps) => {
                     </span>
                 </Tooltip>
             </Grid>
-            <Grid item xs={1}>
+            <Grid size={1}>
                 <Tooltip title="Delete">
                     <span>
                         <IconButton onClick={onDeleteClick} disabled={!enableDel} sx={iconInRowSx}>

frontend/taipy-gui/src/themes/darkThemeTemplate.ts

@@ -272,6 +272,9 @@ export const darkThemeTemplate = {
         mapbox: {
             style: "dark",
         },
+        map: {
+            style: "dark",
+        },
         paper_bgcolor: "rgb(17,17,17)",
         plot_bgcolor: "rgb(17,17,17)",
         polar: {

frontend/taipy/package-lock.json

@@ -41,7 +41,6 @@
       }
     },
     "../../taipy/gui/webapp": {
-      "name": "taipy-gui",
       "version": "4.0.0"
     },
     "node_modules/@babel/code-frame": {
@@ -665,18 +664,18 @@
       "dev": true
     },
     "node_modules/@mui/core-downloads-tracker": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.1.tgz",
-      "integrity": "sha512-TmKkCTwgtwvlFTF1tZzG4lYbi7v6NGweEJwFBZoIWZrkF1OLa0xu4umifmIyd+bVIScsEj//E2AD6bOJbPMOOQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.0.2.tgz",
+      "integrity": "sha512-Cg68oOlAfbJgMgvbCwcX3Y3HdygCl6X1nREYTdEWcEKUQhNarrC45Cc35mP+zA7p3ZXE/7FLiaTCCgwuSoef/Q==",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       }
     },
     "node_modules/@mui/icons-material": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.0.1.tgz",
-      "integrity": "sha512-CsgaF65jA3H1YzpDg6H2nFH/UHueVlmpEtPim7xF9VbjYnmnblG3aX0GflBahH96Pg0schrFWyRySlgbVAh5Kw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.0.2.tgz",
+      "integrity": "sha512-WaTPSvKcx8X7NdWAHzJWDZv+YXvK0MUY8+JI/r4/q2GgIa5RW+n4+08CGX6jB7sWhU1R3zy28NfsDUwwQjOThw==",
       "dependencies": {
         "@babel/runtime": "^7.25.0"
       },
@@ -688,7 +687,7 @@
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@mui/material": "^6.0.1",
+        "@mui/material": "^6.0.2",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
@@ -699,15 +698,15 @@
       }
     },
     "node_modules/@mui/material": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.1.tgz",
-      "integrity": "sha512-gOJS0RKYs9lRACaTluXPNopxFpIBhWVmhf09lHpqpPlR6bujXhuiTE2Q8puensdz3Qm2JGzl1VjccYHieV1g8A==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.0.2.tgz",
+      "integrity": "sha512-KrnkJFSyhsAh8V30DNUbWyRyxMi4ZHjFg1ikQGx+mUAIffFTYIEx9Q+Kxd3vCT0FUFGOmbsuh6F6yRhpybsjkg==",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
-        "@mui/core-downloads-tracker": "^6.0.1",
-        "@mui/system": "^6.0.1",
+        "@mui/core-downloads-tracker": "^6.0.2",
+        "@mui/system": "^6.0.2",
         "@mui/types": "^7.2.16",
-        "@mui/utils": "^6.0.1",
+        "@mui/utils": "^6.0.2",
         "@popperjs/core": "^2.11.8",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
@@ -726,7 +725,7 @@
       "peerDependencies": {
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
-        "@mui/material-pigment-css": "^6.0.1",
+        "@mui/material-pigment-css": "^6.0.2",
         "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
@@ -746,42 +745,13 @@
         }
       }
     },
-    "node_modules/@mui/material/node_modules/@mui/utils": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.1.tgz",
-      "integrity": "sha512-YmQYb2tY5nJactHltTrKA15TZfbd1R003a2xYHxUuycTv9n83rsIwHkypOxM4x7+c+Pc8xfCuE9EfLT3B3n40Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.25.0",
-        "@mui/types": "^7.2.16",
-        "@types/prop-types": "^15.7.12",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/private-theming": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.1.tgz",
-      "integrity": "sha512-jQCJml1OwIrhqN5tTk5Lpqx2RZKQnShE8lMlvAkuO7Ft+xaHkP8J3iHpEk3/Pzue34DfBQtK00jcaplgM47mBA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.0.2.tgz",
+      "integrity": "sha512-emddFcRhA0hPGVIwIbW5g0V8vtCgw2g/H/A7jTdGe7dpCWEPpp6jPIXRRKcEUWgmg91R6rBNfV+LFHxBxmZXOQ==",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
-        "@mui/utils": "^6.0.1",
+        "@mui/utils": "^6.0.2",
         "prop-types": "^15.8.1"
       },
       "engines": {
@@ -801,39 +771,10 @@
         }
       }
     },
-    "node_modules/@mui/private-theming/node_modules/@mui/utils": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.1.tgz",
-      "integrity": "sha512-YmQYb2tY5nJactHltTrKA15TZfbd1R003a2xYHxUuycTv9n83rsIwHkypOxM4x7+c+Pc8xfCuE9EfLT3B3n40Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.25.0",
-        "@mui/types": "^7.2.16",
-        "@types/prop-types": "^15.7.12",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/styled-engine": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.1.tgz",
-      "integrity": "sha512-7ZOnUhIak2vosDgMlBE/oLrsvvF3O8QKmTFpP6bhZkHjPu4dv0DbF1vC7gzgkOqiMaT0/NgRQCFW9zh38pIvsg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.0.2.tgz",
+      "integrity": "sha512-qd3Vlhted0SYVGotnCfVNcxff7vW2WN0fclbAexff60NeNS1qs/H/CImHEHUBiUGeNWMPRochbN6VF1arQ7/jA==",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
         "@emotion/cache": "^11.13.1",
@@ -862,15 +803,15 @@
       }
     },
     "node_modules/@mui/system": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.1.tgz",
-      "integrity": "sha512-RdWyCMi+GkAekOnpMKhy51lyzid4F6Vj96vekp3AExkFY21JWg2+KVBqcAgJOROJ3RiaeDJf98n0yrixlCvuEw==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.0.2.tgz",
+      "integrity": "sha512-AZv1/C4PuHgWFTA8YraIzl3FTVLdRz0RIMRwEADWZBdIhnuTHS/4+r8qE9+3CcpTHg1WsEu8btaO3AhQahSM9A==",
       "dependencies": {
         "@babel/runtime": "^7.25.0",
-        "@mui/private-theming": "^6.0.1",
-        "@mui/styled-engine": "^6.0.1",
+        "@mui/private-theming": "^6.0.2",
+        "@mui/styled-engine": "^6.0.2",
         "@mui/types": "^7.2.16",
-        "@mui/utils": "^6.0.1",
+        "@mui/utils": "^6.0.2",
         "clsx": "^2.1.1",
         "csstype": "^3.1.3",
         "prop-types": "^15.8.1"
@@ -900,35 +841,6 @@
         }
       }
     },
-    "node_modules/@mui/system/node_modules/@mui/utils": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.1.tgz",
-      "integrity": "sha512-YmQYb2tY5nJactHltTrKA15TZfbd1R003a2xYHxUuycTv9n83rsIwHkypOxM4x7+c+Pc8xfCuE9EfLT3B3n40Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.25.0",
-        "@mui/types": "^7.2.16",
-        "@types/prop-types": "^15.7.12",
-        "clsx": "^2.1.1",
-        "prop-types": "^15.8.1",
-        "react-is": "^18.3.1"
-      },
-      "engines": {
-        "node": ">=14.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/mui-org"
-      },
-      "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
-        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/types": {
       "version": "7.2.16",
       "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.16.tgz",
@@ -943,27 +855,27 @@
       }
     },
     "node_modules/@mui/utils": {
-      "version": "5.16.6",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
-      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.0.2.tgz",
+      "integrity": "sha512-TeFrYsxcmeoDSlkoPhX+LjIuuqC5Pyj+xz2kRceKCkUpwMNTEeVOfowXDPe+mboZwmpJ5ZxP4eiAgQMdeEasjg==",
       "dependencies": {
-        "@babel/runtime": "^7.23.9",
-        "@mui/types": "^7.2.15",
+        "@babel/runtime": "^7.25.0",
+        "@mui/types": "^7.2.16",
         "@types/prop-types": "^15.7.12",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
         "react-is": "^18.3.1"
       },
       "engines": {
-        "node": ">=12.0.0"
+        "node": ">=14.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/mui-org"
       },
       "peerDependencies": {
-        "@types/react": "^17.0.0 || ^18.0.0",
-        "react": "^17.0.0 || ^18.0.0"
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
       },
       "peerDependenciesMeta": {
         "@types/react": {
@@ -972,12 +884,13 @@
       }
     },
     "node_modules/@mui/x-date-pickers": {
-      "version": "7.15.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.15.0.tgz",
-      "integrity": "sha512-YQEQICNxUEFYp/I/yP58cqihA8yhXaXSNZ1/N0JANu2IlCwoJ4Jzi+S0s4RN7RghpiDyoSMFijROBC5HfpTjiw==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-7.16.0.tgz",
+      "integrity": "sha512-NjFAoI6NiJ/65LJf5A38Y+aA/zSIow+7i52QBcgryrdBlIu46nssqzohPRWNUFwnxNXhWstfcV3YAb2avCIY5A==",
       "dependencies": {
-        "@babel/runtime": "^7.25.4",
+        "@babel/runtime": "^7.25.6",
         "@mui/utils": "^5.16.6",
+        "@mui/x-internals": "7.16.0",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
@@ -1035,12 +948,41 @@
         }
       }
     },
+    "node_modules/@mui/x-date-pickers/node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/x-internals": {
-      "version": "7.15.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.15.0.tgz",
-      "integrity": "sha512-Q/IZvZhHpe64Ost1mRbdp6ML8KQQBprwwgzqo6pZbrCaWMPB2gk2jcUwdCwnLsc+gutaEPVhZ8N7it8VZcHtbg==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-7.16.0.tgz",
+      "integrity": "sha512-ijer5XYmWlJqWaTmF6TGH1odG7EAupv8iDWYmDm2yVR9IQ+L2nQSuhiFClI+wmGx40KS2VKOlzDMPpF0t7/HCg==",
       "dependencies": {
-        "@babel/runtime": "^7.25.4",
+        "@babel/runtime": "^7.25.6",
         "@mui/utils": "^5.16.6"
       },
       "engines": {
@@ -1054,14 +996,43 @@
         "react": "^17.0.0 || ^18.0.0"
       }
     },
+    "node_modules/@mui/x-internals/node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/x-tree-view": {
-      "version": "7.15.0",
-      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.15.0.tgz",
-      "integrity": "sha512-iMhI+ktZWnWMB60uCToGwTIGpmC17LT6o+fV1QSLgh8gWHjTKxJHHVIJnwX4GGeg+CDZQrodkAcGwu54txlStQ==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@mui/x-tree-view/-/x-tree-view-7.16.0.tgz",
+      "integrity": "sha512-C/XCMtBs5jZSiCJG7hgRufcjj1fh60ea8COzgrcNG09bKVPkkfCP2Hp1L5ZXiTJJJ1GcFwQ3wVwy/1ln2+LuHg==",
       "dependencies": {
-        "@babel/runtime": "^7.25.4",
+        "@babel/runtime": "^7.25.6",
         "@mui/utils": "^5.16.6",
-        "@mui/x-internals": "7.15.0",
+        "@mui/x-internals": "7.16.0",
         "@types/react-transition-group": "^4.4.11",
         "clsx": "^2.1.1",
         "prop-types": "^15.8.1",
@@ -1091,6 +1062,35 @@
         }
       }
     },
+    "node_modules/@mui/x-tree-view/node_modules/@mui/utils": {
+      "version": "5.16.6",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.16.6.tgz",
+      "integrity": "sha512-tWiQqlhxAt3KENNiSRL+DIn9H5xNVK6Jjf70x3PnfQPz1MPBdh7yyIcAyVBT9xiw7hP3SomRhPR7hzBMBCjqEA==",
+      "dependencies": {
+        "@babel/runtime": "^7.23.9",
+        "@mui/types": "^7.2.15",
+        "@types/prop-types": "^15.7.12",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^18.3.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1271,9 +1271,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "22.5.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.2.tgz",
-      "integrity": "sha512-acJsPTEqYqulZS/Yp/S3GgeE6GZ0qYODUR8aVr/DkhHQ8l9nd4j5x1/ZJy9/gHrRlFMqkO6i0I3E27Alu4jjPg==",
+      "version": "22.5.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-22.5.4.tgz",
+      "integrity": "sha512-FDuKUJQm/ju9fT/SeX/6+gBzoPzlVCzfzmGkwKvRHQVxi4BntVbyIwf6a4Xn62mrvndLiml6z/UBXIdEVjQLXg==",
       "dev": true,
       "dependencies": {
         "undici-types": "~6.19.2"
@@ -2095,9 +2095,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001655",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001655.tgz",
-      "integrity": "sha512-jRGVy3iSGO5Uutn2owlb5gR6qsGngTw9ZTb4ali9f3glshcNmJ2noam4Mo9zia5P9Dk3jNNydy7vQjuE5dQmfg==",
+      "version": "1.0.30001657",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001657.tgz",
+      "integrity": "sha512-DPbJAlP8/BAXy3IgiWmZKItubb3TYGP0WscQQlVGIfT4s/YlFYVuJgyOsQNP7rJRChx/qdMeLJQJP0Sgg2yjNA==",
       "dev": true,
       "funding": [
         {
@@ -2436,9 +2436,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.5.13",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.13.tgz",
-      "integrity": "sha512-lbBcvtIJ4J6sS4tb5TLp1b4LyfCdMkwStzXPyAgVgTRAsep4bvrAGaBOP7ZJtQMNJpSQ9SqG4brWOroNaQtm7Q==",
+      "version": "1.5.14",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.14.tgz",
+      "integrity": "sha512-bEfPECb3fJ15eaDnu9LEJ2vPGD6W1vt7vZleSVyFhYuMIKm3vz/g9lt7IvEzgdwj58RjbPKUF2rXTCN/UW47tQ==",
       "dev": true
     },
     "node_modules/enhanced-resolve": {
@@ -2714,9 +2714,9 @@
       }
     },
     "node_modules/eslint-plugin-react": {
-      "version": "7.35.0",
-      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.0.tgz",
-      "integrity": "sha512-v501SSMOWv8gerHkk+IIQBkcGRGrO2nfybfj5pLxuJNFTPxxA3PSryhXTK+9pNbtkggheDdsC0E9Q8CuPk6JKA==",
+      "version": "7.35.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.35.2.tgz",
+      "integrity": "sha512-Rbj2R9zwP2GYNcIak4xoAMV57hrBh3hTaR0k7hVjwCQgryE/pw5px4b13EYjduOI0hfXyZhwBxaGpOTbWSGzKQ==",
       "dev": true,
       "dependencies": {
         "array-includes": "^3.1.8",
@@ -4659,9 +4659,9 @@
       }
     },
     "node_modules/picocolors": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.1.tgz",
-      "integrity": "sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew=="
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.0.tgz",
+      "integrity": "sha512-TQ92mBOW0l3LeMeyLV6mzy/kWr8lkd/hp3mTg7wYK7zJhuBStmGMBG0BdeDZS/dZx1IukaX6Bk11zcln25o1Aw=="
     },
     "node_modules/picomatch": {
       "version": "2.3.1",

frontend/taipy/src/CoreSelector.tsx

@@ -24,7 +24,7 @@ import React, {
 import { TextField, Theme, alpha } from "@mui/material";
 import Badge, { BadgeOrigin } from "@mui/material/Badge";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import Switch from "@mui/material/Switch";
 import Tooltip from "@mui/material/Tooltip";
@@ -167,7 +167,7 @@ const CoreItem = (props: {
             data-selectable={nodeType === props.leafType}
             label={
                 <Grid container alignItems="center" direction="row" flexWrap="nowrap" spacing={1}>
-                    <Grid item xs sx={iconLabelSx}>
+                    <Grid  size="grow" sx={iconLabelSx}>
                         {nodeType === NodeType.CYCLE ? (
                             <CycleIcon fontSize="small" color="primary" />
                         ) : nodeType === NodeType.SCENARIO ? (
@@ -191,12 +191,12 @@ const CoreItem = (props: {
                         {label}
                     </Grid>
                     {props.editComponent && nodeType === props.leafType ? (
-                        <Grid item xs="auto">
+                        <Grid size="auto">
                             <props.editComponent id={id} active={props.active} />
                         </Grid>
                     ) : null}
                     {props.onPin ? (
-                        <Grid item xs="auto">
+                        <Grid size="auto">
                             <Tooltip title={isPinned ? "Unpin" : "Pin"}>
                                 <IconButton
                                     data-id={id}
@@ -631,7 +631,7 @@ const CoreSelector = (props: CoreSelectorProps) => {
         <>
             <Grid container sx={switchBoxSx} gap={1}>
                 {active && colFilters ? (
-                    <Grid item>
+                    <Grid>
                         <TableFilter
                             columns={colFilters}
                             appliedFilters={filters}
@@ -641,12 +641,12 @@ const CoreSelector = (props: CoreSelectorProps) => {
                     </Grid>
                 ) : null}
                 {active && colSorts ? (
-                    <Grid item>
+                    <Grid>
                         <TableSort columns={colSorts} appliedSorts={sorts} onValidate={applySorts}></TableSort>
                     </Grid>
                 ) : null}
                 {showSearch ? (
-                    <Grid item>
+                    <Grid>
                         <IconButton onClick={onRevealSearch} size="small" sx={iconInRowSx}>
                             {revealSearch ? (
                                 <SearchOffOutlined fontSize="inherit" />
@@ -657,7 +657,7 @@ const CoreSelector = (props: CoreSelectorProps) => {
                     </Grid>
                 ) : null}
                 {showPins ? (
-                    <Grid item>
+                    <Grid>
                         <FormControlLabel
                             control={
                                 <Switch
@@ -673,7 +673,7 @@ const CoreSelector = (props: CoreSelectorProps) => {
                     </Grid>
                 ) : null}
                 {showSearch && revealSearch ? (
-                    <Grid item xs={12}>
+                    <Grid size={12}>
                         <TextField
                             margin="dense"
                             value={searchValue}

frontend/taipy/src/DataNodeChart.tsx

@@ -23,7 +23,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import FormControl from "@mui/material/FormControl";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import InputLabel from "@mui/material/InputLabel";
 import OutlinedInput from "@mui/material/OutlinedInput";
@@ -370,7 +370,7 @@ const DataNodeChart = (props: DataNodeChartProps) => {
     return (
         <>
             <Grid container sx={tabularHeaderSx}>
-                <Grid item>
+                <Grid>
                     <Box className="taipy-toggle">
                         <ToggleButtonGroup onChange={onViewTypeChange} exclusive value={ChartViewType} color="primary">
                             <ToggleButton value={TableViewType}>
@@ -382,7 +382,7 @@ const DataNodeChart = (props: DataNodeChartProps) => {
                         </ToggleButtonGroup>
                     </Box>
                 </Grid>
-                <Grid item>
+                <Grid>
                     <FormControlLabel
                         control={
                             <Switch checked={!!config?.cumulative} onChange={onCumulativeChange} color="primary" />
@@ -390,7 +390,7 @@ const DataNodeChart = (props: DataNodeChartProps) => {
                         label="Cumulative"
                     />
                 </Grid>
-                <Grid item>
+                <Grid>
                     <Button
                         onClick={resetConfig}
                         variant="text"
@@ -409,10 +409,10 @@ const DataNodeChart = (props: DataNodeChartProps) => {
                               const baseLabelId = `${uniqid}-trace${idx}-"`;
                               return (
                                   <Fragment key={idx}>
-                                      <Grid item xs={2} sx={TraceSx}>
+                                      <Grid size={2} sx={TraceSx}>
                                           Trace {idx + 1}
                                       </Grid>
-                                      <Grid item xs={3}>
+                                      <Grid size={3}>
                                           <TypeSelect
                                               trace={idx}
                                               label="Category"
@@ -421,7 +421,7 @@ const DataNodeChart = (props: DataNodeChartProps) => {
                                               value={config.types ? config.types[idx] : ""}
                                           />
                                       </Grid>
-                                      <Grid item xs={3}>
+                                      <Grid size={3}>
                                           <ColSelect
                                               trace={idx}
                                               axis={0}
@@ -432,7 +432,7 @@ const DataNodeChart = (props: DataNodeChartProps) => {
                                               setColConf={setColConf}
                                           />{" "}
                                       </Grid>
-                                      <Grid item xs={3}>
+                                      <Grid size={3}>
                                           <ColSelect
                                               trace={idx}
                                               axis={1}
@@ -444,7 +444,7 @@ const DataNodeChart = (props: DataNodeChartProps) => {
                                               withNone
                                           />
                                       </Grid>
-                                      <Grid item xs={1}>
+                                      <Grid size={1}>
                                           {config.traces && config.traces.length > 1 ? (
                                               <Tooltip title="Remove Trace">
                                                   <IconButton onClick={onRemoveTrace} data-idx={idx}>
@@ -457,7 +457,7 @@ const DataNodeChart = (props: DataNodeChartProps) => {
                               );
                           })
                         : null}
-                    <Grid item xs={12}>
+                    <Grid size={12}>
                         <Button onClick={onAddTrace} startIcon={<Add color="primary" />}>
                             Add trace
                         </Button>

frontend/taipy/src/DataNodeTable.tsx

@@ -22,7 +22,7 @@ import Button from "@mui/material/Button";
 import Checkbox from "@mui/material/Checkbox";
 import FormControl from "@mui/material/FormControl";
 import FormControlLabel from "@mui/material/FormControlLabel";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import InputLabel from "@mui/material/InputLabel";
 import OutlinedInput from "@mui/material/OutlinedInput";
 import ListItemText from "@mui/material/ListItemText";
@@ -150,7 +150,7 @@ const DataNodeTable = (props: DataNodeTableProps) => {
     return (
         <>
             <Grid container sx={tabularHeaderSx}>
-                <Grid item>
+                <Grid>
                     <Box className="taipy-toggle">
                         <ToggleButtonGroup onChange={onViewTypeChange} exclusive value={TableViewType} color="primary">
                             <ToggleButton value={TableViewType}>
@@ -162,7 +162,7 @@ const DataNodeTable = (props: DataNodeTableProps) => {
                         </ToggleButtonGroup>
                     </Box>
                 </Grid>
-                <Grid item>
+                <Grid>
                     <FormControl sx={selectSx} fullWidth className="taipy-selector">
                         <InputLabel id={uniqid + "-cols-label"}>Columns</InputLabel>
                         <Select
@@ -184,7 +184,7 @@ const DataNodeTable = (props: DataNodeTableProps) => {
                         </Select>
                     </FormControl>
                 </Grid>
-                <Grid item>
+                <Grid>
                     <Button
                         onClick={resetCols}
                         variant="text"
@@ -196,11 +196,11 @@ const DataNodeTable = (props: DataNodeTableProps) => {
                     </Button>
                 </Grid>
                 {tableEdit ? (
-                    <Grid item sx={pushRightSx}>
+                    <Grid sx={pushRightSx}>
                         <TextField value={comment} onChange={changeComment} label="Comment"></TextField>
                     </Grid>
                 ) : null}
-                <Grid item sx={tableEdit ? undefined : pushRightSx}>
+                <Grid sx={tableEdit ? undefined : pushRightSx}>
                     <FormControlLabel
                         disabled={!props.active || !!notEditableReason || !!props.editInProgress}
                         control={<Switch color="primary" checked={tableEdit} onChange={toggleTableEdit} />}

frontend/taipy/src/DataNodeViewer.tsx

@@ -30,7 +30,7 @@ import Alert from "@mui/material/Alert";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import Popover from "@mui/material/Popover";
@@ -196,6 +196,7 @@ interface DataNodeViewerProps {
     fileUpload?: boolean;
     uploadCheck?: string;
     onFileAction?: string;
+    showOwnerLabel?: boolean;
 }
 
 const dataValueFocus = "data-value";
@@ -251,6 +252,7 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
         updateDnVars = "",
         fileDownload = false,
         fileUpload = false,
+        showOwnerLabel = false,
     } = props;
 
     const { state, dispatch } = useContext<Store>(Context);
@@ -682,7 +684,8 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                         expandIcon={expandable ? <ArrowForwardIosSharp sx={AccordionIconSx} /> : null}
                         sx={AccordionSummarySx}
                     >
-                        <Stack direction="row" spacing={1} alignItems="center">
+                        <Stack direction="row" spacing={1} alignItems="baseline">
+                            {showOwnerLabel ? <Typography>{dnOwnerLabel} &gt;</Typography>: null}
                             <Typography>{dnLabel}</Typography>
                             <Typography fontSize="smaller">{dnType}</Typography>
                         </Stack>
@@ -694,9 +697,9 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                     <Tab
                                         label={
                                             <Grid container alignItems="center">
-                                                <Grid item>Data</Grid>
+                                                <Grid>Data</Grid>
                                                 {dnEditInProgress ? (
-                                                    <Grid item>
+                                                    <Grid>
                                                         <Tooltip
                                                             title={
                                                                 "locked " + (dnEditorId === editorId ? "by you" : "")
@@ -766,10 +769,9 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                             aria-labelledby={`${uniqid}-properties`}
                         >
                             <Grid container rowSpacing={2} sx={gridSx}>
-                                <Grid item xs={12} container justifyContent="space-between" spacing={1}>
+                                <Grid size={12} container justifyContent="space-between" spacing={1}>
                                     <Grid
-                                        item
-                                        xs={12}
+                                        size={12}
                                         container
                                         justifyContent="space-between"
                                         data-focus="label"
@@ -812,10 +814,10 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                             />
                                         ) : (
                                             <>
-                                                <Grid item xs={4}>
+                                                <Grid size={4}>
                                                     <Typography variant="subtitle2">Label</Typography>
                                                 </Grid>
-                                                <Grid item xs={8}>
+                                                <Grid size={8}>
                                                     <Typography variant="subtitle2">{dnLabel}</Typography>
                                                 </Grid>
                                             </>
@@ -823,41 +825,41 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                     </Grid>
                                 </Grid>
                                 {showEditDate ? (
-                                    <Grid item xs={12} container justifyContent="space-between">
-                                        <Grid item xs={4}>
+                                    <Grid size={12} container justifyContent="space-between">
+                                        <Grid size={4}>
                                             <Typography variant="subtitle2">Last edit date</Typography>
                                         </Grid>
-                                        <Grid item xs={8}>
+                                        <Grid size={8}>
                                             <Typography variant="subtitle2">{dnEditDate}</Typography>
                                         </Grid>
                                     </Grid>
                                 ) : null}
                                 {showExpirationDate ? (
-                                    <Grid item xs={12} container justifyContent="space-between">
-                                        <Grid item xs={4}>
+                                    <Grid size={12} container justifyContent="space-between">
+                                        <Grid size={4}>
                                             <Typography variant="subtitle2">Expiration date</Typography>
                                         </Grid>
-                                        <Grid item xs={8}>
+                                        <Grid size={8}>
                                             <Typography variant="subtitle2">{dnExpirationDate}</Typography>
                                         </Grid>
                                     </Grid>
                                 ) : null}
                                 {showConfig ? (
-                                    <Grid item xs={12} container justifyContent="space-between">
-                                        <Grid item xs={4} pb={2}>
+                                    <Grid size={12} container justifyContent="space-between">
+                                        <Grid size={4} pb={2}>
                                             <Typography variant="subtitle2">Config ID</Typography>
                                         </Grid>
-                                        <Grid item xs={8}>
+                                        <Grid size={8}>
                                             <Typography variant="subtitle2">{dnConfig}</Typography>
                                         </Grid>
                                     </Grid>
                                 ) : null}
                                 {showOwner ? (
-                                    <Grid item xs={12} container justifyContent="space-between">
-                                        <Grid item xs={4}>
+                                    <Grid size={12} container justifyContent="space-between">
+                                        <Grid size={4}>
                                             <Typography variant="subtitle2">Owner</Typography>
                                         </Grid>
-                                        <Grid item xs={7} sx={iconLabelSx}>
+                                        <Grid size={7} sx={iconLabelSx}>
                                             {dnOwnerType === NodeType.CYCLE ? (
                                                 <CycleIcon fontSize="small" color="primary" />
                                             ) : dnOwnerType === NodeType.SCENARIO ? (
@@ -865,7 +867,7 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                             ) : null}
                                             <Typography variant="subtitle2">{dnOwnerLabel}</Typography>
                                         </Grid>
-                                        <Grid item xs={1}>
+                                        <Grid size={1}>
                                             {dnOwnerId ? (
                                                 <>
                                                     <Tooltip title="Show Scenarios">
@@ -903,7 +905,7 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                         </Grid>
                                     </Grid>
                                 ) : null}
-                                <Grid item xs={12}>
+                                <Grid size={12}>
                                     <Divider />
                                 </Grid>
                                 <PropertiesEditor
@@ -936,30 +938,26 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                     {props.history.map((edit, idx) => (
                                         <Fragment key={`edit-${idx}`}>
                                             {idx != 0 ? (
-                                                <Grid item xs={12}>
+                                                <Grid size={12}>
                                                     <Divider />
                                                 </Grid>
                                             ) : null}
-                                            <Grid item container>
-                                                <Grid item xs={0.4} sx={editSx}>
+                                            <Grid container>
+                                                <Grid size={0.4} sx={editSx}>
                                                     <Box>{(props.history || []).length - idx}</Box>
                                                 </Grid>
-                                                <Grid item xs={0.1}></Grid>
-                                                <Grid item container xs={11.5}>
-                                                    <Grid item xs={12}>
+                                                <Grid size={0.1}></Grid>
+                                                <Grid container size={11.5}>
+                                                    <Grid size={12}>
                                                         <Typography variant="subtitle1">
                                                             {edit[0]
                                                                 ? format(new Date(edit[0]), editTimestampFormat)
                                                                 : "no date"}
                                                         </Typography>
                                                     </Grid>
-                                                    {edit[2] ? (
-                                                        <Grid item xs={12}>
-                                                            {edit[2]}
-                                                        </Grid>
-                                                    ) : null}
+                                                    {edit[2] ? <Grid size={12}>{edit[2]}</Grid> : null}
                                                     {edit[1] ? (
-                                                        <Grid item xs={12}>
+                                                        <Grid size={12}>
                                                             <Typography fontSize="smaller">{edit[1]}</Typography>
                                                         </Grid>
                                                     ) : null}
@@ -981,9 +979,8 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                             {dtValue !== undefined ? (
                                 <Grid container justifyContent="space-between" spacing={1}>
                                     <Grid
-                                        item
                                         container
-                                        xs={12}
+                                        size={12}
                                         justifyContent="space-between"
                                         data-focus={dataValueFocus}
                                         onClick={onFocus}
@@ -997,13 +994,13 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                             <>
                                                 {typeof dtValue == "boolean" ? (
                                                     <>
-                                                        <Grid item xs={10}>
+                                                        <Grid size={10}>
                                                             <Switch
                                                                 value={dataValue as boolean}
                                                                 onChange={onDataValueChange}
                                                             />
                                                         </Grid>
-                                                        <Grid item xs={2}>
+                                                        <Grid size={2}>
                                                             <Tooltip title="Apply">
                                                                 <IconButton
                                                                     onClick={editDataValue}
@@ -1027,14 +1024,14 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                                 ) : dtType == "date" &&
                                                   (dataValue === null || dataValue instanceof Date) ? (
                                                     <LocalizationProvider dateAdapter={AdapterDateFns}>
-                                                        <Grid item xs={10}>
+                                                        <Grid size={10}>
                                                             <DateTimePicker
                                                                 value={dataValue as Date}
                                                                 onChange={onDataValueDateChange}
                                                                 slotProps={textFieldProps}
                                                             />
                                                         </Grid>
-                                                        <Grid item xs={2}>
+                                                        <Grid size={2}>
                                                             <Tooltip title="Apply">
                                                                 <IconButton
                                                                     onClick={editDataValue}
@@ -1105,10 +1102,10 @@ const DataNodeViewer = (props: DataNodeViewerProps) => {
                                             </>
                                         ) : (
                                             <>
-                                                <Grid item xs={4}>
+                                                <Grid size={4}>
                                                     <Typography variant="subtitle2">Value</Typography>
                                                 </Grid>
-                                                <Grid item xs={8}>
+                                                <Grid size={8}>
                                                     {typeof dtValue == "boolean" ? (
                                                         <Switch
                                                             defaultChecked={dtValue}

frontend/taipy/src/JobSelector.tsx

@@ -22,7 +22,7 @@ import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Checkbox from "@mui/material/Checkbox";
 import FormControl from "@mui/material/FormControl";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import InputLabel from "@mui/material/InputLabel";
 import ListItemText from "@mui/material/ListItemText";
@@ -218,8 +218,8 @@ const Filter = ({ open, anchorEl, handleFilterClose, handleApplyFilter, columns
                     {form && form.values.filters && form.values.filters.length > 0
                         ? form.values.filters.map((filter, index) => {
                               return (
-                                  <Grid item xs={12} container spacing={2} mb={1} key={index}>
-                                      <Grid item xs={3}>
+                                  <Grid size={12} container spacing={2} mb={1} key={index}>
+                                      <Grid size={3}>
                                           <FormControl fullWidth>
                                               <InputLabel id="data">Column</InputLabel>
                                               <Select
@@ -242,7 +242,7 @@ const Filter = ({ open, anchorEl, handleFilterClose, handleApplyFilter, columns
                                               </Select>
                                           </FormControl>
                                       </Grid>
-                                      <Grid item xs={3}>
+                                      <Grid size={3}>
                                           <FormControl fullWidth>
                                               <InputLabel id="operator">Operator</InputLabel>
                                               <Select
@@ -256,14 +256,14 @@ const Filter = ({ open, anchorEl, handleFilterClose, handleApplyFilter, columns
                                               </Select>
                                           </FormControl>
                                       </Grid>
-                                      <Grid item xs={5}>
+                                      <Grid size={5}>
                                           <TextField
                                               label="Value"
                                               variant="outlined"
                                               {...form.getFieldProps(`filters.${index}.value`)}
                                           />
                                       </Grid>
-                                      <Grid item xs={1}>
+                                      <Grid size={1}>
                                           <Tooltip title="Delete Filter">
                                               <IconButton data-idx={index} onClick={removeFilter}>
                                                   <DeleteOutline />
@@ -274,8 +274,8 @@ const Filter = ({ open, anchorEl, handleFilterClose, handleApplyFilter, columns
                               );
                           })
                         : null}
-                    <Grid item xs={12} container spacing={2} justifyContent="space-between">
-                        <Grid item xs={3}>
+                    <Grid size={12} container spacing={2} justifyContent="space-between">
+                        <Grid size={3}>
                             <FormControl fullWidth>
                                 <InputLabel id="data-new">Column</InputLabel>
                                 <Select
@@ -298,7 +298,7 @@ const Filter = ({ open, anchorEl, handleFilterClose, handleApplyFilter, columns
                                 </Select>
                             </FormControl>
                         </Grid>
-                        <Grid item xs={3}>
+                        <Grid size={3}>
                             <FormControl fullWidth>
                                 <InputLabel id="operator-new">Operator</InputLabel>
                                 <Select
@@ -312,10 +312,10 @@ const Filter = ({ open, anchorEl, handleFilterClose, handleApplyFilter, columns
                                 </Select>
                             </FormControl>
                         </Grid>
-                        <Grid item xs={5}>
+                        <Grid size={5}>
                             <TextField label="Value" variant="outlined" {...form.getFieldProps(`newValue`)} />
                         </Grid>
-                        <Grid item xs={1}>
+                        <Grid size={1}>
                             <Tooltip
                                 title={typeof form.values.newData === "string" ? "Cannot Add Filter" : "Add Filter"}
                             >
@@ -325,7 +325,7 @@ const Filter = ({ open, anchorEl, handleFilterClose, handleApplyFilter, columns
                             </Tooltip>
                         </Grid>
                     </Grid>
-                    <Grid item xs={12} container justifyContent="space-between" mt={2}>
+                    <Grid size={12} container justifyContent="space-between" mt={2}>
                         <Button
                             variant="outlined"
                             color="inherit"
@@ -810,7 +810,7 @@ const JobSelector = (props: JobSelectorProps) => {
             <Paper sx={containerSx}>
                 <Toolbar sx={headerToolbarSx}>
                     <Grid container spacing={2} alignItems="center">
-                        <Grid item container xs={3} alignItems="center">
+                        <Grid container size={3} alignItems="center">
                             <Tooltip title="Filter">
                                 <IconButton onClick={handleFilterOpen}>
                                     <FilterList />
@@ -824,10 +824,10 @@ const JobSelector = (props: JobSelectorProps) => {
                         </Grid>
                         {checked.length ? (
                             <>
-                                <Grid item xs={7}>
+                                <Grid size={7}>
                                     <Typography variant="subtitle1">{checked.length} selected</Typography>
                                 </Grid>
-                                <Grid item container justifyContent="flex-end" spacing={1} xs={2}>
+                                <Grid container justifyContent="flex-end" spacing={1} size={2}>
                                     {showCancel ? (
                                         <Tooltip title="Cancel Jobs">
                                             <span>

frontend/taipy/src/JobViewer.tsx

@@ -14,7 +14,7 @@
 import React, { useEffect, useCallback } from "react";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import ListItemText from "@mui/material/ListItemText";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
@@ -101,35 +101,35 @@ const JobViewer = (props: JobViewerProps) => {
         <Grid container className={className} sx={{ maxWidth: width }}>
             {inDialog ? null : (
                 <>
-                    <Grid item xs={4}>
+                    <Grid size={4}>
                         <Typography>Job Name</Typography>
                     </Grid>
-                    <Grid item xs={8}>
+                    <Grid size={8}>
                         <Typography>{jobName}</Typography>
                     </Grid>
                     <Divider />
                 </>
             )}
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Typography>Job Id</Typography>
             </Grid>
-            <Grid item xs={8}>
+            <Grid size={8}>
                 <Tooltip title={jobId}>
                     <Typography sx={EllipsisSx}>{jobId}</Typography>
                 </Tooltip>
             </Grid>
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Typography>Submission Id</Typography>
             </Grid>
-            <Grid item xs={8}>
+            <Grid size={8}>
                 <Tooltip title={submissionId}>
                     <Typography sx={EllipsisSx}>{submissionId}</Typography>
                 </Tooltip>
             </Grid>
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Typography>Submitted entity</Typography>
             </Grid>
-            <Grid item xs={8}>
+            <Grid size={8}>
                 <Tooltip title={entityId}>
                     <ListItemText
                         primary={entityName}
@@ -138,29 +138,29 @@ const JobViewer = (props: JobViewerProps) => {
                     />
                 </Tooltip>
             </Grid>
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Typography>Execution time</Typography>
             </Grid>
-            <Grid item xs={8}>
+            <Grid size={8}>
                 <Typography>{executionTime}</Typography>
             </Grid>
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Typography>Status</Typography>
             </Grid>
-            <Grid item xs={8}>
+            <Grid size={8}>
                 <StatusChip status={status} />
             </Grid>
-            <Grid item xs={4}>
+            <Grid size={4}>
                 <Typography>Creation date</Typography>
             </Grid>
-            <Grid item xs={8}>
+            <Grid size={8}>
                 <Typography>{creationDate ? new Date(creationDate).toLocaleString() : ""}</Typography>
             </Grid>
             <Divider />
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <Typography>Stack Trace</Typography>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <Typography variant="caption" component="pre" overflow="auto" maxHeight="50vh">
                     {stacktrace.join("<br/>")}
                 </Typography>
@@ -168,7 +168,7 @@ const JobViewer = (props: JobViewerProps) => {
             {props.onDelete ? (
                 <>
                     <Divider />
-                    <Grid item xs={6}>
+                    <Grid size={6}>
                         <Tooltip title={notDeleteable}>
                             <span>
                                 <Button variant="outlined" onClick={handleDeleteJob} disabled={!!notDeleteable}>

frontend/taipy/src/PropertiesEditor.tsx

@@ -13,7 +13,7 @@
 
 import React, { useState, useCallback, useEffect, ChangeEvent, MouseEvent, KeyboardEvent } from "react";
 import Divider from "@mui/material/Divider";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import TextField from "@mui/material/TextField";
 import Tooltip from "@mui/material/Tooltip";
@@ -179,14 +179,13 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
 
     return show ? (
         <>
-            <Grid item xs={12} container rowSpacing={2}>
+            <Grid size={12} container rowSpacing={2}>
                 {properties
                     ? properties.map((property) => {
                           const propName = `property-${property.id}`;
                           return (
                               <Grid
-                                  item
-                                  xs={12}
+                                  size={12}
                                   spacing={1}
                                   container
                                   justifyContent="space-between"
@@ -197,7 +196,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                               >
                                   {active && !notEditableReason && focusName === propName ? (
                                       <>
-                                          <Grid item xs={4}>
+                                          <Grid size={4}>
                                               <TextField
                                                   label="Key"
                                                   variant="outlined"
@@ -210,7 +209,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                                                   inputProps={{ onKeyDown }}
                                               />
                                           </Grid>
-                                          <Grid item xs={5}>
+                                          <Grid size={5}>
                                               <TextField
                                                   label="Value"
                                                   variant="outlined"
@@ -224,8 +223,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                                               />
                                           </Grid>
                                           <Grid
-                                              item
-                                              xs={2}
+                                              size={2}
                                               container
                                               alignContent="center"
                                               alignItems="center"
@@ -253,8 +251,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                                               </Tooltip>
                                           </Grid>
                                           <Grid
-                                              item
-                                              xs={1}
+                                              size={1}
                                               container
                                               alignContent="center"
                                               alignItems="center"
@@ -279,13 +276,13 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                                       </>
                                   ) : (
                                       <>
-                                          <Grid item xs={4}>
+                                          <Grid size={4}>
                                               <Typography variant="subtitle2">{property.key}</Typography>
                                           </Grid>
-                                          <Grid item xs={5}>
+                                          <Grid size={5}>
                                               <Typography variant="subtitle2">{property.value}</Typography>
                                           </Grid>
-                                          <Grid item xs={3} />
+                                          <Grid size={3} />
                                       </>
                                   )}
                               </Grid>
@@ -293,8 +290,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                       })
                     : null}
                 <Grid
-                    item
-                    xs={12}
+                    size={12}
                     spacing={1}
                     container
                     justifyContent="space-between"
@@ -304,7 +300,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                 >
                     {active && focusName == "new-property" ? (
                         <>
-                            <Grid item xs={4}>
+                            <Grid size={4}>
                                 <TextField
                                     value={newProp.key}
                                     data-name="key"
@@ -316,7 +312,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                                     inputProps={{ onKeyDown }}
                                 />
                             </Grid>
-                            <Grid item xs={5}>
+                            <Grid size={5}>
                                 <TextField
                                     value={newProp.value}
                                     data-name="value"
@@ -328,14 +324,7 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                                     inputProps={{ onKeyDown, "data-enter": true }}
                                 />
                             </Grid>
-                            <Grid
-                                item
-                                xs={2}
-                                container
-                                alignContent="center"
-                                alignItems="center"
-                                justifyContent="center"
-                            >
+                            <Grid size={2} container alignContent="center" alignItems="center" justifyContent="center">
                                 <Tooltip title="Apply">
                                     <IconButton sx={IconPaddingSx} onClick={editProperty} size="small">
                                         <CheckCircle color="primary" />
@@ -347,22 +336,22 @@ const PropertiesEditor = (props: PropertiesEditorProps) => {
                                     </IconButton>
                                 </Tooltip>
                             </Grid>
-                            <Grid item xs={1} />
+                            <Grid size={1} />
                         </>
                     ) : (
                         <>
-                            <Grid item xs={4}>
+                            <Grid size={4}>
                                 <Typography variant="subtitle2">New Property Key</Typography>
                             </Grid>
-                            <Grid item xs={5}>
+                            <Grid size={5}>
                                 <Typography variant="subtitle2">Value</Typography>
                             </Grid>
-                            <Grid item xs={3} />
+                            <Grid size={3} />
                         </>
                     )}
                 </Grid>
             </Grid>
-            <Grid item xs={12}>
+            <Grid size={12}>
                 <Divider />
             </Grid>
         </>

frontend/taipy/src/ScenarioSelector.tsx

@@ -22,7 +22,7 @@ import DialogTitle from "@mui/material/DialogTitle";
 import FormControl from "@mui/material/FormControl";
 import FormGroup from "@mui/material/FormGroup";
 import FormHelperText from "@mui/material/FormHelperText";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import InputLabel from "@mui/material/InputLabel";
 import MenuItem from "@mui/material/MenuItem";
@@ -248,7 +248,7 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                 <form onSubmit={form.handleSubmit}>
                     <DialogContent sx={DialogContentSx} dividers>
                         <Grid container rowSpacing={2}>
-                            <Grid item xs={12}>
+                            <Grid size={12}>
                                 <FormGroup>
                                     <FormControl fullWidth>
                                         <InputLabel id="select-config">Configuration</InputLabel>
@@ -276,7 +276,7 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                     </FormControl>
                                 </FormGroup>
                             </Grid>
-                            <Grid item xs={12}>
+                            <Grid size={12}>
                                 <FormGroup>
                                     <TextField
                                         {...form.getFieldProps("name")}
@@ -287,7 +287,7 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                     />
                                 </FormGroup>
                             </Grid>
-                            <Grid item xs={12}>
+                            <Grid size={12}>
                                 <FormGroup>
                                     <LocalizationProvider dateAdapter={AdapterDateFns}>
                                         <DatePicker
@@ -301,13 +301,13 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                     </LocalizationProvider>
                                 </FormGroup>
                             </Grid>
-                            <Grid item xs={12} container justifyContent="space-between">
+                            <Grid size={12} container justifyContent="space-between">
                                 <Typography variant="h6">Custom Properties</Typography>
                             </Grid>
                             {properties
                                 ? properties.map((item, index) => (
-                                      <Grid item xs={12} key={item.id} container spacing={1} alignItems="end">
-                                          <Grid item xs={4}>
+                                      <Grid size={12} key={item.id} container spacing={1} alignItems="end">
+                                          <Grid size={4}>
                                               <TextField
                                                   value={item.key}
                                                   label="Key"
@@ -317,7 +317,7 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                                   onChange={updatePropertyField}
                                               />
                                           </Grid>
-                                          <Grid item xs>
+                                          <Grid size="grow">
                                               <TextField
                                                   value={item.value}
                                                   label="Value"
@@ -327,7 +327,7 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                                   onChange={updatePropertyField}
                                               />
                                           </Grid>
-                                          <Grid item xs="auto">
+                                          <Grid size="auto">
                                               <Tooltip title="Delete Property">
                                                   <Button
                                                       variant="outlined"
@@ -343,8 +343,8 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                       </Grid>
                                   ))
                                 : null}
-                            <Grid item xs={12} container spacing={1} justifyContent="space-between" alignItems="end">
-                                <Grid item xs={4}>
+                            <Grid size={12} container spacing={1} justifyContent="space-between" alignItems="end">
+                                <Grid size={4}>
                                     <TextField
                                         value={newProp.key}
                                         data-name="key"
@@ -353,7 +353,7 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                         variant="outlined"
                                     />
                                 </Grid>
-                                <Grid item xs>
+                                <Grid size="grow">
                                     <TextField
                                         value={newProp.value}
                                         data-name="value"
@@ -362,7 +362,7 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                         variant="outlined"
                                     />
                                 </Grid>
-                                <Grid item xs="auto">
+                                <Grid size="auto">
                                     <Tooltip title="Add Property">
                                         <span>
                                             <Button
@@ -383,7 +383,7 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                     <DialogActions>
                         <Grid container justifyContent="space-between" sx={ActionContentSx}>
                             {actionEdit && (
-                                <Grid item xs={6}>
+                                <Grid size={6}>
                                     <Button
                                         variant="outlined"
                                         color="error"
@@ -394,13 +394,13 @@ const ScenarioEditDialog = ({ scenario, submit, open, actionEdit, configs, close
                                     </Button>
                                 </Grid>
                             )}
-                            <Grid item container xs={actionEdit ? 6 : 12} justifyContent="flex-end">
-                                <Grid item sx={CancelBtnSx}>
+                            <Grid container size={actionEdit ? 6 : 12} justifyContent="flex-end">
+                                <Grid sx={CancelBtnSx}>
                                     <Button variant="outlined" color="inherit" onClick={close}>
                                         Cancel
                                     </Button>
                                 </Grid>
-                                <Grid item>
+                                <Grid>
                                     <Button
                                         variant="contained"
                                         type="submit"

frontend/taipy/src/ScenarioViewer.tsx

@@ -20,7 +20,7 @@ import Chip from "@mui/material/Chip";
 import Box from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import Stack from "@mui/material/Stack";
@@ -203,10 +203,10 @@ const SequenceRow = ({
     const disabledSubmit = disabled || !!notSubmittableReason;
 
     return (
-        <Grid item xs={12} container justifyContent="space-between" data-focus={name} onClick={onFocus} sx={hoverSx}>
+        <Grid size={12} container justifyContent="space-between" data-focus={name} onClick={onFocus} sx={hoverSx}>
             {active && !notEditableReason && focusName === name ? (
                 <>
-                    <Grid item xs={4}>
+                    <Grid size={4}>
                         <TextField
                             label={`Sequence ${number + 1}`}
                             variant="outlined"
@@ -219,7 +219,7 @@ const SequenceRow = ({
                             helperText={valid ? "" : label ? "This name is already used." : "Cannot be empty."}
                         />
                     </Grid>
-                    <Grid item xs={4}>
+                    <Grid size={4}>
                         <Autocomplete
                             multiple
                             options={Object.keys(tasks)}
@@ -252,7 +252,7 @@ const SequenceRow = ({
                             disabled={disabled}
                         />
                     </Grid>
-                    <Grid item xs={2} container alignContent="center" alignItems="center" justifyContent="center">
+                    <Grid size={2} container alignContent="center" alignItems="center" justifyContent="center">
                         <Tooltip title="Apply">
                             <IconButton sx={IconPaddingSx} onClick={onSaveSequence} size="small" disabled={!valid}>
                                 <CheckCircle color={disableColor("primary", !valid)} />
@@ -267,15 +267,15 @@ const SequenceRow = ({
                 </>
             ) : (
                 <>
-                    <Grid item xs={5}>
+                    <Grid size={5}>
                         <Typography variant="subtitle2">{label || "New Sequence"}</Typography>
                     </Grid>
-                    <Grid item xs={5}>
+                    <Grid size={5}>
                         {taskIds.map((id) =>
                             tasks[id] ? <Chip key={id} label={tasks[id]} variant="outlined" /> : null
                         )}
                     </Grid>
-                    <Grid item xs={1} alignContent="center" alignItems="center" justifyContent="center">
+                    <Grid size={1} alignContent="center" alignItems="center" justifyContent="center">
                         <Tooltip title={`Delete Sequence '${label}'`}>
                             <span>
                                 <IconButton size="small" onClick={onDeleteSequence} disabled={disabled}>
@@ -284,7 +284,7 @@ const SequenceRow = ({
                             </span>
                         </Tooltip>
                     </Grid>
-                    <Grid item xs={1} alignContent="center" alignItems="center" justifyContent="center">
+                    <Grid size={1} alignContent="center" alignItems="center" justifyContent="center">
                         {pLabel && submit ? (
                             <Tooltip
                                 title={
@@ -666,39 +666,38 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                     <AccordionDetails>
                         <Grid container rowSpacing={2}>
                             {showConfig ? (
-                                <Grid item xs={12} container justifyContent="space-between">
-                                    <Grid item xs={4} pb={2}>
+                                <Grid size={12} container justifyContent="space-between">
+                                    <Grid size={4} pb={2}>
                                         <Typography variant="subtitle2">Config ID</Typography>
                                     </Grid>
-                                    <Grid item xs={8}>
+                                    <Grid size={8}>
                                         <Typography variant="subtitle2">{scConfig}</Typography>
                                     </Grid>
                                 </Grid>
                             ) : null}
                             {showCreationDate ? (
-                                <Grid item xs={12} container justifyContent="space-between">
-                                    <Grid item xs={4}>
+                                <Grid size={12} container justifyContent="space-between">
+                                    <Grid size={4}>
                                         <Typography variant="subtitle2">Creation Date</Typography>
                                     </Grid>
-                                    <Grid item xs={8}>
+                                    <Grid size={8}>
                                         <Typography variant="subtitle2">{scCreationDate}</Typography>
                                     </Grid>
                                 </Grid>
                             ) : null}
                             {showCycle ? (
-                                <Grid item xs={12} container justifyContent="space-between">
-                                    <Grid item xs={4}>
+                                <Grid size={12} container justifyContent="space-between">
+                                    <Grid size={4}>
                                         <Typography variant="subtitle2">Cycle / Frequency</Typography>
                                     </Grid>
-                                    <Grid item xs={8}>
+                                    <Grid size={8}>
                                         <Typography variant="subtitle2">{scCycle}</Typography>
                                     </Grid>
                                 </Grid>
                             ) : null}
-                            <Grid item xs={12} container justifyContent="space-between" spacing={1}>
+                            <Grid size={12} container justifyContent="space-between" spacing={1}>
                                 <Grid
-                                    item
-                                    xs={12}
+                                    size={12}
                                     container
                                     justifyContent="space-between"
                                     data-focus="label"
@@ -742,10 +741,10 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                         />
                                     ) : (
                                         <>
-                                            <Grid item xs={4}>
+                                            <Grid size={4}>
                                                 <Typography variant="subtitle2">Label</Typography>
                                             </Grid>
-                                            <Grid item xs={8}>
+                                            <Grid size={8}>
                                                 <Typography variant="subtitle2">{scLabel}</Typography>
                                             </Grid>
                                         </>
@@ -753,8 +752,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                 </Grid>
                                 {showTags ? (
                                     <Grid
-                                        item
-                                        xs={12}
+                                    size={12}
                                         container
                                         justifyContent="space-between"
                                         data-focus="tags"
@@ -821,10 +819,10 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                             />
                                         ) : (
                                             <>
-                                                <Grid item xs={4}>
+                                                <Grid size={4}>
                                                     <Typography variant="subtitle2">Tags</Typography>
                                                 </Grid>
-                                                <Grid item xs={8}>
+                                                <Grid size={8}>
                                                     {tags.map((tag, index) => (
                                                         <Chip key={index} label={tag} variant="outlined" />
                                                     ))}
@@ -835,7 +833,7 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                 ) : null}
                             </Grid>
 
-                            <Grid item xs={12}>
+                            <Grid size={12}>
                                 <Divider />
                             </Grid>
                             <PropertiesEditor
@@ -853,11 +851,11 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                             />
                             {showSequences ? (
                                 <>
-                                    <Grid item xs={12} container justifyContent="space-between">
-                                        <Grid item xs={9}>
+                                    <Grid size={12} container justifyContent="space-between">
+                                        <Grid size={9}>
                                             <Typography variant="h6">Sequences</Typography>
                                         </Grid>
-                                        <Grid item xs={3} sx={{ ml: "auto" }}>
+                                        <Grid size={3} sx={{ ml: "auto" }}>
                                             <Button onClick={addSequenceHandler} endIcon={<Add />}>
                                                 Add
                                             </Button>
@@ -888,12 +886,12 @@ const ScenarioViewer = (props: ScenarioViewerProps) => {
                                         );
                                     })}
 
-                                    <Grid item xs={12}>
+                                    <Grid size={12}>
                                         <Divider />
                                     </Grid>
                                 </>
                             ) : null}
-                            <Grid item xs={12} container justifyContent="space-between">
+                            <Grid size={12} container justifyContent="space-between">
                                 {showDelete ? (
                                     <Button
                                         variant="outlined"

frontend/taipy/src/utils/ConfirmDialog.tsx

@@ -4,7 +4,7 @@ import DialogActions from "@mui/material/DialogActions";
 import DialogContent from "@mui/material/DialogContent";
 import DialogTitle from "@mui/material/DialogTitle";
 import Button from "@mui/material/Button";
-import Grid from "@mui/material/Grid";
+import Grid from "@mui/material/Grid2";
 import IconButton from "@mui/material/IconButton";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";

taipy/gui/_renderers/builder.py

@@ -974,9 +974,10 @@ class _Builder:
                 var_type = _TaipyToJson
             if var_type == PropertyType.boolean:
                 def_val = _get_tuple_val(attr, 2, False)
-                val = self.__get_boolean_attribute(attr[0], def_val)
-                if val != def_val:
-                    self.set_boolean_attribute(attr[0], val)
+                if isinstance(def_val, bool) or self.__attributes.get(attr[0], None) is not None:
+                    val = self.__get_boolean_attribute(attr[0], def_val)
+                    if val != def_val:
+                        self.set_boolean_attribute(attr[0], val)
             elif var_type == PropertyType.dynamic_boolean:
                 self.__set_dynamic_bool_attribute(
                     attr[0],

taipy/gui/_renderers/factory.py

@@ -98,6 +98,7 @@ class _Factory:
                 ("sender_id",),
                 ("height",),
                 ("page_size", PropertyType.number, 50),
+                ("show_sender", PropertyType.boolean, True),
             ]
         ),
         "chart": lambda gui, control_type, attrs: _Builder(
@@ -120,6 +121,7 @@ class _Factory:
                 ("template[dark]", PropertyType.dict, gui._get_config("chart_dark_template", None)),
                 ("template[light]", PropertyType.dict),
                 ("figure", PropertyType.to_json),
+                ("on_click", PropertyType.function),
             ]
         )
         ._get_chart_config("scatter", "lines+markers")
@@ -438,6 +440,7 @@ class _Factory:
                 ("render", PropertyType.dynamic_boolean, True),
                 ("height", PropertyType.dynamic_string),
                 ("content", PropertyType.toHtmlContent),
+                ("width", PropertyType.string_or_number),
             ]
         ),
         "selector": lambda gui, control_type, attrs: _Builder(
@@ -481,7 +484,7 @@ class _Factory:
                 ("orientation",),
                 ("width", PropertyType.string, "300px"),
                 ("on_change", PropertyType.function),
-                ("continuous", PropertyType.boolean, True),
+                ("continuous", PropertyType.boolean, None),
                 ("lov", PropertyType.lov),
                 ("change_delay", PropertyType.number, gui._get_config("change_delay", None)),
             ]

taipy/gui/utils/chart_config_builder.py

@@ -69,10 +69,14 @@ __CHART_AXIS: t.Dict[str, t.Tuple[_Chart_iprops, ...]] = {
         _Chart_iprops.low,
     ),
     "choropleth": (_Chart_iprops.locations, _Chart_iprops.z),
+    "choroplethmap": (_Chart_iprops.locations, _Chart_iprops.z),
+    "choroplethmapbox": (_Chart_iprops.locations, _Chart_iprops.z),
+    "densitymap": (_Chart_iprops.lon, _Chart_iprops.lat, _Chart_iprops.z),
     "densitymapbox": (_Chart_iprops.lon, _Chart_iprops.lat, _Chart_iprops.z),
     "funnelarea": (_Chart_iprops.values,),
     "pie": (_Chart_iprops.values, _Chart_iprops.labels),
     "scattergeo": (_Chart_iprops.lon, _Chart_iprops.lat),
+    "scattermap": (_Chart_iprops.lon, _Chart_iprops.lat),
     "scattermapbox": (_Chart_iprops.lon, _Chart_iprops.lat),
     "scatterpolar": (_Chart_iprops.r, _Chart_iprops.theta),
     "scatterpolargl": (_Chart_iprops.r, _Chart_iprops.theta),

taipy/gui/viselements.json

@@ -674,6 +674,25 @@
                         "name": "figure",
                         "type": "dynamic(plotly.graph_objects.Figure)",
                         "doc": "A figure as produced by plotly."
+                    },
+                    {
+                        "name": "on_click",
+                        "type": "Callable",
+                        "doc": "The callback that is invoked when the user clicks in the chart background.<br/>The function receives three parameters:\n<ul>\n<li>state (<code>State^</code>): the state instance.</li>\n<li>id (str): the identifier of the chart control if it has one.</li>\n<li>payload (dict[str, any]): a dictionary containing the <i>x</i> and <i>y</i> coordinates of the click <b>or</b> <i>latitude</i> and <i>longitude</i> in the case of a map. This feature relies on non-public Plotly structured information.</li>\n</ul>",
+                        "signature": [
+                            [
+                                "state",
+                                "State"
+                            ],
+                            [
+                                "id",
+                                "str"
+                            ],
+                            [
+                                "payload",
+                                "dict"
+                            ]
+                        ]
                     }
                 ]
             }
@@ -1614,6 +1633,12 @@
                         "name": "height",
                         "type": "Union[str,int,float]",
                         "doc": "The maximum height of this chat control, in CSS units."
+                    },
+                    {
+                        "name": "show_sender",
+                        "type": "bool",
+                        "default_value": "True",
+                        "doc": "If False, the sender avatar and name is not displayed."
                     }
                 ]
             }

taipy/gui_core/_GuiCoreLib.py

@@ -222,6 +222,7 @@ class _GuiCore(ElementLibrary):
                 "file_download": ElementProperty(PropertyType.boolean, False),
                 "file_upload": ElementProperty(PropertyType.boolean, False),
                 "upload_check": ElementProperty(PropertyType.function),
+                "show_owner_label": ElementProperty(PropertyType.boolean, False),
             },
             inner_properties={
                 "on_edit": ElementProperty(PropertyType.function, f"{{{__CTX_VAR_NAME}.edit_data_node}}"),

taipy/gui_core/viselements.json

@@ -447,6 +447,12 @@
                         "default_value": "True",
                         "doc": "If False, the data node value is not visible."
                     },
+                    {
+                        "name": "show_owner_label",
+                        "type": "bool",
+                        "default_value": "False",
+                        "doc": "If True, the data node owner label is added to the datanode label at the top of the block."
+                    },
                     {
                         "name": "chart_config",
                         "type": "dict",

tests/gui/builder/control/test_chart.py

@@ -157,13 +157,13 @@ def test_map_builder(gui: Gui, helpers):
     marker = {"color": "fuchsia", "size": 4}  # noqa: F841
     layout = {  # noqa: F841
         "dragmode": "zoom",
-        "mapbox": {"style": "open-street-map", "center": {"lat": 38, "lon": -90}, "zoom": 3},
+        "map": {"style": "open-street-map", "center": {"lat": 38, "lon": -90}, "zoom": 3},
         "margin": {"r": 0, "t": 0, "b": 0, "l": 0},
     }
     with tgb.Page(frame=None) as page:
         tgb.chart(  # type: ignore[attr-defined]
             data="{mapData}",
-            type="scattermapbox",
+            type="scattermap",
             marker="{marker}",
             layout="{layout}",
             lat="Lat",
@@ -177,7 +177,7 @@ def test_map_builder(gui: Gui, helpers):
         ""Lat": {"index":",
         ""Lon": {"index":",
         "data={_TpD_tpec_TpExPr_mapData_TPMDL_0}",
-        'defaultLayout="{"dragmode": "zoom", "mapbox": {"style": "open-street-map", "center": {"lat": 38, "lon": -90}, "zoom": 3}, "margin": {"r": 0, "t": 0, "b": 0, "l": 0}}"',  # noqa: E501
+        'defaultLayout="{"dragmode": "zoom", "map": {"style": "open-street-map", "center": {"lat": 38, "lon": -90}, "zoom": 3}, "margin": {"r": 0, "t": 0, "b": 0, "l": 0}}"',  # noqa: E501
         'updateVarName="_TpD_tpec_TpExPr_mapData_TPMDL_0"',
     ]
     helpers.test_control_builder(gui, page, expected_list)

tests/gui/control/test_chart.py

@@ -143,17 +143,17 @@ def test_map_md(gui: Gui, helpers):
     marker = {"color": "fuchsia", "size": 4}  # noqa: F841
     layout = {  # noqa: F841
         "dragmode": "zoom",
-        "mapbox": {"style": "open-street-map", "center": {"lat": 38, "lon": -90}, "zoom": 3},
+        "map": {"style": "open-street-map", "center": {"lat": 38, "lon": -90}, "zoom": 3},
         "margin": {"r": 0, "t": 0, "b": 0, "l": 0},
     }
-    md = "<|{mapData}|chart|type=scattermapbox|marker={marker}|layout={layout}|lat=Lat|lon=Lon|text=Globvalue|mode=markers|>"  # noqa: E501
+    md = "<|{mapData}|chart|type=scattermap|marker={marker}|layout={layout}|lat=Lat|lon=Lon|text=Globvalue|mode=markers|>"  # noqa: E501
     gui._set_frame(inspect.currentframe())
     expected_list = [
         "<Chart",
         "&quot;Lat&quot;: &#x7B;&quot;index&quot;:",
         "&quot;Lon&quot;: &#x7B;&quot;index&quot;:",
         "data={_TpD_tpec_TpExPr_mapData_TPMDL_0}",
-        'defaultLayout="{&quot;dragmode&quot;: &quot;zoom&quot;, &quot;mapbox&quot;: &#x7B;&quot;style&quot;: &quot;open-street-map&quot;, &quot;center&quot;: &#x7B;&quot;lat&quot;: 38, &quot;lon&quot;: -90&#x7D;, &quot;zoom&quot;: 3&#x7D;, &quot;margin&quot;: &#x7B;&quot;r&quot;: 0, &quot;t&quot;: 0, &quot;b&quot;: 0, &quot;l&quot;: 0&#x7D;}"',  # noqa: E501
+        'defaultLayout="{&quot;dragmode&quot;: &quot;zoom&quot;, &quot;map&quot;: &#x7B;&quot;style&quot;: &quot;open-street-map&quot;, &quot;center&quot;: &#x7B;&quot;lat&quot;: 38, &quot;lon&quot;: -90&#x7D;, &quot;zoom&quot;: 3&#x7D;, &quot;margin&quot;: &#x7B;&quot;r&quot;: 0, &quot;t&quot;: 0, &quot;b&quot;: 0, &quot;l&quot;: 0&#x7D;}"',  # noqa: E501
         'updateVarName="_TpD_tpec_TpExPr_mapData_TPMDL_0"',
     ]
     helpers.test_control_md(gui, md, expected_list)

tests/gui/control/test_part.py

@@ -32,6 +32,16 @@ def test_part_md_2(gui: Gui, helpers):
     helpers.test_control_md(gui, md_string, expected_list)
 
 
+def test_part_md_width(gui: Gui, helpers):
+    md_string = """
+<|part|width=70%|>
+# This is a part
+<|>
+"""
+    expected_list = ["<Part", 'width="70%"']
+    helpers.test_control_md(gui, md_string, expected_list)
+
+
 def test_part_html(gui: Gui, helpers):
     html_string = '<taipy:part class_name="class1"><h1>This is a part</h1></taipy:part>'
     expected_list = ["<Part", "<h1", "This is a part"]