chore(deps): upgrade to mui v6

Author: OliverDudgeon

package.json

@@ -41,10 +41,10 @@
     "@emotion/styled": "11.13.0",
     "@mdx-js/loader": "3.1.0",
     "@mdx-js/react": "3.1.0",
-    "@mui/icons-material": "5.16.7",
-    "@mui/lab": "5.0.0-alpha.173",
-    "@mui/material": "5.16.7",
-    "@mui/styles": "5.16.7",
+    "@mui/icons-material": "6.1.6",
+    "@mui/lab": "6.0.0-beta.14",
+    "@mui/material": "6.1.6",
+    "@mui/styles": "6.1.6",
     "@next/eslint-plugin-next": "15.0.3",
     "@next/mdx": "15.0.3",
     "@rjsf/core": "5.22.3",

pnpm-lock.yaml

@@ -9,7 +9,6 @@ import {
   CardHeader,
   Collapse,
   IconButton,
-  useTheme,
 } from "@mui/material";
 
 /**
@@ -77,8 +76,6 @@ export const BaseCard = ({
   const [hasExpanded, setHasExpanded] = useState(!collapsedByDefault);
   const [expanded, setExpanded] = useState(!collapsedByDefault);
 
-  const theme = useTheme();
-
   return (
     <Card>
       {!!header && (
@@ -108,13 +105,13 @@ export const BaseCard = ({
           <IconButton
             aria-expanded={expanded}
             size="large"
-            sx={{
+            sx={(theme) => ({
               marginLeft: "auto",
               transform: `rotate(${expanded ? 180 : 0}deg)`,
               transition: `${theme.transitions.create("transform", {
                 duration: theme.transitions.duration.shortest,
               })}`,
-            }}
+            })}
             onClick={() => {
               setExpanded(!expanded);
               setHasExpanded(true);

src/components/BaseCard.tsx

@@ -263,7 +263,11 @@ export const DataTable = <Data extends Record<string, any>>(props: DataTableProp
   const tableContents = (
     <>
       {!!ToolbarChild || !!enableSearch ? (
-        <Toolbar sx={{ pt: 2, alignItems: "flex-start", gap: (theme) => theme.spacing(1) }}>
+        <Toolbar sx={theme => ({
+          pt: 2,
+          alignItems: "flex-start",
+          gap: theme.spacing(1)
+        })}>
           {ToolbarChild}
           {!!enableSearch && (
             <TextField

src/components/DataTable/DataTable.tsx

@@ -168,7 +168,7 @@ export const InputSection = ({ children, title, required, error }: InputSectionP
         </em>
       </Typography>
       {children}
-      <Typography sx={{ color: (theme) => theme.palette.error.main }}>{error}</Typography>
+      <Typography sx={(theme) => ({ color: theme.palette.error.main })}>{error}</Typography>
     </Grid>
   );
 };

src/components/runCards/JobCard/JobInputFields.tsx

@@ -7,7 +7,14 @@ import { useGetProjects } from "@squonk/data-manager-client/project";
 import { useGetFileTypes } from "@squonk/data-manager-client/type";
 
 import { AttachFileRounded as AttachFileRoundedIcon } from "@mui/icons-material";
-import { Alert, FormControl, FormGroup, ListItem, ListItemText, MenuItem } from "@mui/material";
+import {
+  Alert,
+  FormControl,
+  FormGroup,
+  ListItemButton,
+  ListItemText,
+  MenuItem,
+} from "@mui/material";
 import { useQueryClient } from "@tanstack/react-query";
 import { Field } from "formik";
 import { CheckboxWithLabel, TextField } from "formik-mui";
@@ -75,8 +82,7 @@ export const AttachDatasetListItem = ({ datasetId, version }: AttachDatasetListI
 
   return (
     <>
-      <ListItem
-        button
+      <ListItemButton
         disabled={isProjectsLoading || isTypesLoading || isUserLoading}
         onClick={() => setOpen(true)}
       >
@@ -95,8 +101,7 @@ export const AttachDatasetListItem = ({ datasetId, version }: AttachDatasetListI
           }
         />
         <AttachFileRoundedIcon color="action" />
-      </ListItem>
-
+      </ListItemButton>
       <FormikModalWrapper
         // Reinitialize to allow a project to be selected by default after the async action is
         // completed

src/features/DatasetsTable/DatasetDetails/VersionActionsSection/AttachDatasetListItem/AttachDatasetListItem.tsx

@@ -1,7 +1,8 @@
 import { type DatasetSummary, type DatasetVersionSummary } from "@squonk/data-manager-client";
 
 import { Description } from "@mui/icons-material";
-import { List, ListItem, ListItemText } from "@mui/material";
+import { List, ListItemText } from "@mui/material";
+import ListItemButton from "@mui/material/ListItemButton";
 
 import { API_ROUTES } from "../../../../utils/app/routes";
 import { DatasetPlainTextViewerListItem } from "./DatasetPlainTextViewerListItem";
@@ -24,8 +25,7 @@ export const VersionViewSection = ({ dataset, version }: VersionViewSectionProps
   return (
     <List>
       <DatasetPlainTextViewerListItem datasetId={dataset.dataset_id} version={version.version} />
-      <ListItem
-        button
+      <ListItemButton
         component="a"
         href={
           (process.env.NEXT_PUBLIC_BASE_PATH ?? "") +
@@ -39,7 +39,7 @@ export const VersionViewSection = ({ dataset, version }: VersionViewSectionProps
           secondary="Displays the file in your browser if it supports the file type, otherwise downloads the file"
         />
         <Description color="action" />
-      </ListItem>
+      </ListItemButton>
     </List>
   );
 };