Update to MUI 6

ProjectMirador · Feb 4, 2025 · 3747bf9 · 3747bf9
1 parent fba3b5d
commit 3747bf9
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 29 deletions.
diff --git a/package.json b/package.json
@@ -39,10 +39,10 @@
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "@hello-pangea/dnd": "^16.0.1 || ^17.0.0",
-    "@mui/icons-material": "^5.11.16",
-    "@mui/material": "^5.13.5",
-    "@mui/utils": "^5.13.1",
-    "@mui/x-tree-view": "^6.17.0",
+    "@mui/icons-material": "^6.0.0",
+    "@mui/material": "^6.0.0",
+    "@mui/utils": "^6.0.0",
+    "@mui/x-tree-view": "^7.25.0",
     "@react-aria/live-announcer": "^3.1.2",
     "@redux-devtools/extension": "^3.3.0",
     "classnames": "^2.2.6",

diff --git a/src/components/CollapsibleSection.js b/src/components/CollapsibleSection.js
@@ -21,9 +21,9 @@ export function CollapsibleSection({
   }, [setOpen]);
 
   return (
-    <Accordion id={id} elevation={0} expanded={open} onChange={handleChange} disableGutters square variant="compact">
+    <Accordion slotProps={{ heading: { component: 'h4' } }} id={id} elevation={0} expanded={open} onChange={handleChange} disableGutters square variant="compact">
       <AccordionSummary id={`${id}-header`} aria-controls={`${id}-content`} aria-label={t(open ? 'collapseSection' : 'expandSection', { section: label })} expandIcon={<ExpandMoreIcon />}>
-        <Typography variant="overline" component="h4">
+        <Typography variant="overline">
           {label}
         </Typography>
       </AccordionSummary>

diff --git a/src/components/CompanionArea.js b/src/components/CompanionArea.js
@@ -34,7 +34,8 @@ const Container = styled('div', { name: 'CompanionArea', slot: 'container' })(({
 const StyledToggle = styled('div', { name: 'CompanionArea', slot: 'toggle' })(({ theme }) => ({
   alignItems: 'center',
   backgroundColor: theme.palette.background.paper,
-  border: `1px solid ${theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.shades?.dark}`,
+  border: `1px solid ${theme.palette.shades?.dark}`,
+  ...theme.applyStyles('dark', { borderColor: theme.palette.divider }),
   borderInlineStart: 0,
   borderRadius: 0,
   display: 'inline-flex',

diff --git a/src/components/WindowSideBarCollectionPanel.js b/src/components/WindowSideBarCollectionPanel.js
@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import List from '@mui/material/List';
 import ListItem from '@mui/material/ListItem';
+import ListItemButton from '@mui/material/ListItemButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import ListItemText from '@mui/material/ListItemText';
 import MenuList from '@mui/material/MenuList';
@@ -87,8 +88,7 @@ export function WindowSideBarCollectionPanel({
         <>
           { parentCollection && (
             <List>
-              <ListItem
-                button
+              <ListItemButton
                 onClick={
                   () => updateCompanionWindow({ collectionPath: collectionPath.slice(0, -1) })
                 }
@@ -99,7 +99,7 @@ export function WindowSideBarCollectionPanel({
                 <ListItemText primaryTypographyProps={{ variant: 'body1' }}>
                   <IIIFResourceLabel resource={parentCollection} />
                 </ListItemText>
-              </ListItem>
+              </ListItemButton>
             </List>
           )}
           <Typography variant="h6">

diff --git a/src/components/WorkspaceArea.js b/src/components/WorkspaceArea.js
@@ -8,23 +8,22 @@ import WorkspaceAdd from '../containers/WorkspaceAdd';
 import BackgroundPluginArea from '../containers/BackgroundPluginArea';
 import ns from '../config/css-ns';
 
-const Root = styled('div', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => {
-  const getBackgroundColor = theme.palette.mode === 'light' ? darken : lighten;
-
-  return {
-    background: getBackgroundColor(theme.palette.shades.light, 0.1),
-    bottom: 0,
-    display: 'flex',
-    flexDirection: 'column',
-    left: 0,
-    position: 'absolute',
-    right: 0,
-    top: 0,
-    [theme.breakpoints.up('sm')]: {
-      flexDirection: 'row',
-    },
-  };
-});
+const Root = styled('div', { name: 'WorkspaceArea', slot: 'root' })(({ theme }) => ({
+  background: darken(theme.palette.shades.light, 0.1),
+  ...theme.applyStyles('dark', {
+    background: lighten(theme.palette.shades.light, 0.1),
+  }),
+  bottom: 0,
+  display: 'flex',
+  flexDirection: 'column',
+  left: 0,
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  [theme.breakpoints.up('sm')]: {
+    flexDirection: 'row',
+  },
+}));
 
 const ViewerArea = styled('main', { name: 'WorkspaceArea', slot: 'viewer' })(() => ({
   flexGrow: 1,

diff --git a/src/components/WorkspaceExport.js b/src/components/WorkspaceExport.js
@@ -62,11 +62,11 @@ export function WorkspaceExport({
       </DialogTitle>
 
       <DialogContent>
-        <Accordion elevation={2}>
+        <Accordion slotProps={{ heading: { component: 'h4' } }} elevation={2}>
           <AccordionSummary
             expandIcon={<ExpandMoreIcon />}
           >
-            <Typography variant="h4">{t('viewWorkspaceConfiguration')}</Typography>
+            <Typography>{t('viewWorkspaceConfiguration')}</Typography>
           </AccordionSummary>
           <AccordionDetails sx={{ overflow: 'scroll' }}>
             {children}