ProjectMirador · cbeer · Feb 4, 2025 · Feb 6, 2025 · Feb 6, 2025
diff --git a/__tests__/src/components/ManifestListItem.test.js b/__tests__/src/components/ManifestListItem.test.js
@@ -32,7 +32,6 @@ describe('ManifestListItem', () => {
     expect(screen.getByRole('listitem')).toHaveAttribute('data-active', 'true');
 
     expect(screen.getByRole('listitem')).toHaveClass('active');
-    expect(screen.getByRole('listitem')).toHaveClass('Mui-selected');
   });
   it('renders a placeholder element until real data is available', () => {
     const { container } = createWrapper({ ready: false });

diff --git a/__tests__/src/components/SearchHit.test.js b/__tests__/src/components/SearchHit.test.js
@@ -37,7 +37,7 @@ describe('SearchHit', () => {
     const selectAnnotation = vi.fn();
     render(<Subject selectAnnotation={selectAnnotation} />);
 
-    expect(screen.getByRole('listitem')).toHaveClass('Mui-selected');
+    expect(screen.getByRole('listitem')).toHaveClass('windowSelected');
     expect(screen.getByRole('listitem')).toHaveTextContent('1Light up the moose , and start the chai more');
 
     await user.click(screen.getByRole('button'));

diff --git a/__tests__/src/components/SidebarIndexTableOfContents.test.js b/__tests__/src/components/SidebarIndexTableOfContents.test.js
@@ -119,7 +119,6 @@ describe('SidebarIndexTableOfContents', () => {
   it('toggles branch nodes on click', async () => {
     const user = userEvent.setup();
     const { store } = createInteractiveWrapper({});
-
     expect(screen.getByRole('treeitem')).toBeInTheDocument();
     const root = screen.getByRole('treeitem');
 
@@ -199,7 +198,7 @@ describe('SidebarIndexTableOfContents', () => {
   it('sets the canvas to a start canvas if present (IIIF v2)', async () => {
     const user = userEvent.setup();
     createWrapper({
-      expandNodes: () => { },
+      expandItems: () => { },
       manifest: manifestVersion2,
       setCanvas,
       windowId: 'a',

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/ManifestListItem.js b/src/components/ManifestListItem.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import ListItem from '@mui/material/ListItem';
 import ButtonBase from '@mui/material/ButtonBase';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import Skeleton from '@mui/material/Skeleton';
 import { useTranslation } from 'react-i18next';
@@ -40,21 +40,21 @@ const StyledLogo = styled(Img, { name: 'ManifestListItem', slot: 'logo' })(({ th
 
 /** */
 const Placeholder = () => (
-  <Grid container className={ns('manifest-list-item')} spacing={2}>
-    <Grid item xs={3} sm={2}>
+  <Grid2 container className={ns('manifest-list-item')} spacing={2}>
+    <Grid2 xs={3} sm={2}>
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />
-    </Grid>
-    <Grid item xs={9} sm={6}>
+    </Grid2>
+    <Grid2 xs={9} sm={6}>
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
-    </Grid>
-    <Grid item xs={8} sm={2}>
+    </Grid2>
+    <Grid2 xs={8} sm={2}>
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
-    </Grid>
-    <Grid item xs={4} sm={2}>
+    </Grid2>
+    <Grid2 xs={4} sm={2}>
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={60} width={60} />
-    </Grid>
-  </Grid>
+    </Grid2>
+  </Grid2>
 );
 
 /**
@@ -116,15 +116,15 @@ export function ManifestListItem({
       data-active={active}
     >
       {ready ? (
-        <Grid container className={ns('manifest-list-item')} spacing={2}>
-          <Grid item xs={12} sm={6}>
+        <Grid2 container className={ns('manifest-list-item')} spacing={2}>
+          <Grid2 xs={12} sm={6}>
             <ButtonBase
               ref={buttonRef}
               className={ns('manifest-list-item-title')}
               style={{ width: '100%' }}
               onClick={handleOpenButtonClick}
             >
-              <Grid
+              <Grid2
                 container
                 spacing={2}
                 sx={{
@@ -133,7 +133,7 @@ export function ManifestListItem({
                 }}
                 component="span"
               >
-                <Grid item xs={4} sm={3} component="span">
+                <Grid2 xs={4} sm={3} component="span">
                   { thumbnail
                     ? (
                       <StyledThumbnail
@@ -153,8 +153,8 @@ export function ManifestListItem({
                       />
                     )
                     : <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />}
-                </Grid>
-                <Grid item xs={8} sm={9} component="span">
+                </Grid2>
+                <Grid2 xs={8} sm={9} component="span">
                   { isCollection && (
                     <Typography component="div" variant="overline">
                       { t(isMultipart ? 'multipartCollection' : 'collection') }
@@ -163,16 +163,16 @@ export function ManifestListItem({
                   <Typography component="span" variant="h6">
                     {title || manifestId}
                   </Typography>
-                </Grid>
-              </Grid>
+                </Grid2>
+              </Grid2>
             </ButtonBase>
-          </Grid>
-          <Grid item xs={8} sm={4}>
+          </Grid2>
+          <Grid2 xs={8} sm={4}>
             <Typography className={ns('manifest-list-item-provider')}>{provider}</Typography>
             <Typography>{t('numItems', { count: size, number: size })}</Typography>
-          </Grid>
+          </Grid2>
 
-          <Grid item xs={4} sm={2}>
+          <Grid2 xs={4} sm={2}>
             { manifestLogo
               && (
               <StyledLogo
@@ -190,8 +190,8 @@ export function ManifestListItem({
                 )}
               />
               )}
-          </Grid>
-        </Grid>
+          </Grid2>
+        </Grid2>
       ) : (
         <Placeholder />
       )}
@@ -203,7 +203,11 @@ ManifestListItem.propTypes = {
   active: PropTypes.bool,
   addWindow: PropTypes.func.isRequired,
   buttonRef: PropTypes.elementType,
-  error: PropTypes.string,
+  error: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.bool,
+    PropTypes.oneOf([null]), // for null
+  ]),
   fetchManifest: PropTypes.func.isRequired,
   handleClose: PropTypes.func,
   isCollection: PropTypes.bool,

diff --git a/src/components/ManifestListItemError.js b/src/components/ManifestListItemError.js
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
-import Grid from '@mui/material/Grid';
+import Grid2 from '@mui/material/Grid2';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
@@ -14,39 +14,39 @@ export function ManifestListItemError({
 }) {
   const { t } = useTranslation();
   return (
-    <Grid container>
-      <Grid container>
-        <Grid container item xs={12} sm={6}>
-          <Grid item xs={4} sm={3}>
-            <Grid container justifyContent="center">
+    <Grid2 container>
+      <Grid2 container>
+        <Grid2 container xs={12} sm={6}>
+          <Grid2 xs={4} sm={3}>
+            <Grid2 container justifyContent="center">
               <ErrorIcon sx={{
                 color: 'error.main',
                 height: '2rem',
                 width: '2rem',
               }}
               />
-            </Grid>
-          </Grid>
-          <Grid item xs={8} sm={9}>
+            </Grid2>
+          </Grid2>
+          <Grid2 xs={8} sm={9}>
             <Typography>{t('manifestError')}</Typography>
             <Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
-          </Grid>
-        </Grid>
-      </Grid>
+          </Grid2>
+        </Grid2>
+      </Grid2>
 
-      <Grid container>
-        <Grid container item xs={12} sm={6} justifyContent="flex-end">
-          <Grid item>
+      <Grid2 container>
+        <Grid2 container xs={12} sm={6} justifyContent="flex-end">
+          <Grid2>
             <Button onClick={() => { onDismissClick(manifestId); }}>
               {t('dismiss')}
             </Button>
             <Button onClick={() => { onTryAgainClick(manifestId); }}>
               {t('tryAgain')}
             </Button>
-          </Grid>
-        </Grid>
-      </Grid>
-    </Grid>
+          </Grid2>
+        </Grid2>
+      </Grid2>
+    </Grid2>
   );
 }
 

diff --git a/src/components/SearchHit.js b/src/components/SearchHit.js
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
+import ListItemButton from '@mui/material/ListItemButton';
 import Typography from '@mui/material/Typography';
 import Chip from '@mui/material/Chip';
 import { styled } from '@mui/material/styles';
@@ -122,8 +123,7 @@ export function SearchHit({
         ownerState={ownerState}
         className={windowSelected ? 'windowSelected' : ''}
         divider
-        button={!selected}
-        component="li"
+        component={selected ? 'li' : ListItemButton}
         onClick={handleClick}
         selected={selected}
       >