fix: update to mui v6

package.json

@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "lodash.groupby": "^4.6.0",
-    "prism-react-renderer": "^2.3.1",
+    "prism-react-renderer": "^2.4.0",
     "react-markdown": "^9.0.1",
     "react-mentions": "^4.4.10",
     "remark-breaks": "^4.0.0",
@@ -48,44 +48,44 @@
   "devDependencies": {
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
-    "@graasp/query-client": "^3.22.2",
-    "@graasp/sdk": "^4.29.0",
+    "@graasp/query-client": "^4.2.0",
+    "@graasp/sdk": "^4.32.1",
     "@graasp/stylis-plugin-rtl": "^2.2.0",
-    "@graasp/translations": "^1.35.1",
-    "@graasp/ui": "^5.0.0",
-    "@mui/icons-material": "^5.16.7",
-    "@mui/lab": "^5.0.0-alpha.157",
-    "@mui/material": "^5.16.7",
-    "@tanstack/react-query": "4.36.1",
+    "@graasp/translations": "^1.40.0",
+    "@graasp/ui": "github:graasp/graasp-ui#upgrade-mui-v6",
+    "@mui/icons-material": "^6.1.5",
+    "@mui/lab": "6.0.0-beta.13",
+    "@mui/material": "^6.1.5",
+    "@tanstack/react-query": "5.59.15",
     "@trivago/prettier-plugin-sort-imports": "^4.3.0",
     "@types/lodash.groupby": "^4.6.9",
     "@types/lodash.truncate": "^4.4.9",
-    "@types/node": "^20.16.1",
-    "@types/react": "^18.3.4",
-    "@types/react-dom": "^18.3.0",
-    "@types/react-mentions": "^4.1.13",
-    "@typescript-eslint/eslint-plugin": "^8.2.0",
-    "@typescript-eslint/parser": "^8.2.0",
-    "@vitejs/plugin-react": "^4.3.1",
-    "cypress": "^13.13.3",
-    "date-fns": "^3.6.0",
-    "eslint": "^8.57.0",
+    "@types/node": "^20.16.15",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@types/react-mentions": "^4.4.0",
+    "@typescript-eslint/eslint-plugin": "^8.11.0",
+    "@typescript-eslint/parser": "^8.11.0",
+    "@vitejs/plugin-react": "^4.3.3",
+    "cypress": "^13.15.0",
+    "date-fns": "^4.1.0",
+    "eslint": "^8.57.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-react-hooks": "^4.6.2",
-    "eslint-plugin-react-refresh": "^0.4.10",
-    "i18next": "23.14.0",
-    "lucide-react": "^0.429.0",
+    "eslint-plugin-react-refresh": "^0.4.13",
+    "i18next": "23.16.2",
+    "lucide-react": "^0.453.0",
     "prettier": "^3.3.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-i18next": "^15.0.1",
-    "react-router-dom": "^6.26.1",
+    "react-i18next": "^15.1.0",
+    "react-router-dom": "^6.27.0",
     "rollup-plugin-visualizer": "^5.12.0",
     "stylis-plugin-rtl": "^2.1.1",
     "tsc-alias": "^1.8.10",
-    "typescript": "^5.5.4",
-    "vite": "^5.4.2",
-    "vite-plugin-dts": "^4.0.3"
+    "typescript": "^5.6.3",
+    "vite": "^5.4.10",
+    "vite-plugin-dts": "^4.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.11.1",

src/components/Mentions/MentionsTable.tsx

@@ -3,7 +3,7 @@ import { ReactElement, useState } from 'react';
 import { Check, Close, FiberManualRecord } from '@mui/icons-material';
 import {
   Button,
-  Grid,
+  Grid2 as Grid,
   IconButton,
   Table,
   TableBody,
@@ -87,7 +87,7 @@ const MentionsTable = ({
         <TableCell>{m.message.creator?.name}</TableCell>
         <TableCell>
           <Grid container direction="row">
-            <Grid item>
+            <Grid>
               <Tooltip title={t(CHATBOX.MARK_AS_READ)}>
                 <IconButton
                   onClick={(e): void => {
@@ -99,7 +99,7 @@ const MentionsTable = ({
                 </IconButton>
               </Tooltip>
             </Grid>
-            <Grid item>
+            <Grid>
               <Tooltip title={t(CHATBOX.DELETE_TOOLTIP)}>
                 <IconButton
                   onClick={(e): void => {
@@ -119,7 +119,7 @@ const MentionsTable = ({
 
   return (
     <Grid container direction="column">
-      <Grid container item direction="row" justifyContent="space-between">
+      <Grid container direction="row" justifyContent="space-between">
         <Button
           variant="outlined"
           onClick={(): void => {
@@ -149,7 +149,7 @@ const MentionsTable = ({
           onCancel={(): void => setOpenConfirmation(false)}
         />
       </Grid>
-      <Grid item>
+      <Grid>
         <Table>
           <TableHead>
             <TableRow>

vite.config.ts

@@ -1,5 +1,5 @@
 import { fileURLToPath } from 'url';
-import { defineConfig } from 'vitest/config';
+import { defineConfig } from 'vite';
 
 export default () => {
   return defineConfig({