ProjectMirador · lutzhelm · Jun 19, 2025 · Apr 11, 2025 · Apr 23, 2025 · Apr 23, 2025
diff --git a/__tests__/src/actions/companionWindow.test.js b/__tests__/src/actions/companionWindow.test.js
@@ -2,7 +2,7 @@ import * as actions from '../../../src/state/actions';
 import ActionTypes from '../../../src/state/actions/action-types';
 
 vi.mock('../../../src/state/selectors', async (importOriginal) => ({
-  ...await importOriginal(),
+  ...(await importOriginal()),
   getVisibleNodeIds: (state, args) => ['openVisible', 'closedVisible', 'visible'],
 }));
 

diff --git a/package.json b/package.json
@@ -37,8 +37,8 @@
     "@custom-react-hooks/use-element-size": "^1.5.1",
     "@emotion/cache": "^11.11.0",
     "@hello-pangea/dnd": "^16.0.1 || ^17.0.0 || ^18.0.0",
-    "@mui/icons-material": "^6.0.0",
-    "@mui/utils": "^6.0.0",
+    "@mui/icons-material": "^7.0.0",
+    "@mui/utils": "^7.0.0",
     "@mui/x-tree-view": "^7.25.0",
     "@react-aria/live-announcer": "^3.1.2",
     "@redux-devtools/extension": "^3.3.0",
@@ -83,8 +83,8 @@
   "devDependencies": {
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@mui/material": "^6.x",
-    "@mui/system": "^6.x",
+    "@mui/material": "^7.x",
+    "@mui/system": "^7.x",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.1.5",
     "@testing-library/react": "^16.0.1",
@@ -116,8 +116,8 @@
     "vitest-fetch-mock": "^0.4.2"
   },
   "peerDependencies": {
-    "@mui/material": "^6.x",
-    "@mui/system": "^6.x",
+    "@mui/material": "^7.x",
+    "@mui/system": "^7.x",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
     "react": "^18.0.0 || ^19.0.0",

diff --git a/src/components/IIIFIFrameCommunication.jsx b/src/components/IIIFIFrameCommunication.jsx
@@ -28,10 +28,10 @@ export function IIIFIFrameCommunication({ handleReceiveMessage = undefined, ...p
   return (
     // iframe "title" attribute is passed in via props for accessibility
     // eslint-disable-next-line jsx-a11y/iframe-has-title
-    <iframe
+    (<iframe
       {...IIIFIFrameCommunicationDefaultProps}
       {...props}
-    />
+    />)
   );
 }
 

diff --git a/src/components/ManifestForm.jsx b/src/components/ManifestForm.jsx
@@ -39,8 +39,13 @@ export function ManifestForm({
 
   return (
     <form onSubmit={formSubmit}>
-      <Grid container spacing={2}>
-        <Grid item xs={12} sm={8} md={9}>
+      <Grid
+        container
+        spacing={2}
+        columns={12}
+        sx={{ mt: 0.5 }}
+      >
+        <Grid size={{ sm: 'grow', xs: 12 }}>
           <TextField
             autoFocus
             fullWidth
@@ -51,29 +56,26 @@ export function ManifestForm({
             variant="filled"
             label={t('addManifestUrl')}
             helperText={t('addManifestUrlHelp')}
-            InputLabelProps={{
-              shrink: true,
-            }}
-            InputProps={{
-              style: { typography: 'body1' },
+            slotProps={{
+              inputLabel: { shrink: true },
+              inputProps: { style: { typography: 'body1' } },
             }}
           />
         </Grid>
-        <Grid
-          item
-          xs={12}
-          sm={4}
-          md={3}
-          sx={{
-            textAlign: { sm: 'inherit', xs: 'right' },
-          }}
-        >
-          { onCancel && (
+        {onCancel && (
+          <Grid size="auto">
             <Button onClick={handleCancel}>
               {t('cancel')}
             </Button>
-          )}
-          <Button id="fetchBtn" type="submit" variant="contained" color="primary">
+          </Grid>
+        )}
+        <Grid size="auto">
+          <Button 
+            id="fetchBtn"
+            type="submit"
+            variant="contained"
+            color="primary"
+          >
             {t('fetchManifest')}
           </Button>
         </Grid>

diff --git a/src/components/ManifestListItem.jsx b/src/components/ManifestListItem.jsx
@@ -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 Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 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 = () => (
-  <Grid2 container className={ns('manifest-list-item')} spacing={2}>
-    <Grid2 xs={3} sm={2}>
+  <Grid container className={ns('manifest-list-item')}>
+    <Grid size={{ sm: 2, xs: 3 }}>
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />
-    </Grid2>
-    <Grid2 xs={9} sm={6}>
+    </Grid>
+    <Grid size={{ sm: 6, xs: 9 }}>
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
-    </Grid2>
-    <Grid2 xs={8} sm={2}>
+    </Grid>
+    <Grid size={{ sm: 2, xs: 8 }}>
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
-    </Grid2>
-    <Grid2 xs={4} sm={2}>
+    </Grid>
+    <Grid size={{ sm: 2, xs: 4 }}>
       <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={60} width={60} />
-    </Grid2>
-  </Grid2>
+    </Grid>
+  </Grid>
 );
 
 /**
@@ -114,67 +114,73 @@ export function ManifestListItem({
       className={active ? 'active' : ''}
       data-manifestid={manifestId}
       data-active={active}
+      sx={{ width: '100%' }}
     >
       {ready ? (
-        <Grid2 container className={ns('manifest-list-item')} spacing={2}>
-          <Grid2 xs={12} sm={6}>
+        <Grid
+          container
+          className={ns('manifest-list-item')}
+          sx={{ width: '100%', alignItems: 'center' }}
+        >
+          <Grid size={{ sm: 5, xs: 12 }}>
             <ButtonBase
               ref={buttonRef}
               className={ns('manifest-list-item-title')}
-              style={{ width: '100%' }}
               onClick={handleOpenButtonClick}
+              sx={{ justifyContent: 'flex-start', alignItems: 'center', width: '100%' }}
             >
-              <Grid2
-                container
-                spacing={2}
-                sx={{
-                  textAlign: 'left',
-                  textTransform: 'initial',
-                }}
-                component="span"
-              >
-                <Grid2 xs={4} sm={3} component="span">
-                  { thumbnail
-                    ? (
-                      <StyledThumbnail
-                        className={[ns('manifest-list-item-thumb')]}
-                        src={[thumbnail]}
-                        alt=""
-                        height="80"
-                        unloader={(
-                          <Skeleton
-                            variant="rectangular"
-                            animation={false}
-                            sx={{ bgcolor: 'grey[300]' }}
-                            height={80}
-                            width={120}
-                          />
-                        )}
-                      />
-                    )
-                    : <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />}
-                </Grid2>
-                <Grid2 xs={8} sm={9} component="span">
-                  { isCollection && (
-                    <Typography component="div" variant="overline">
-                      { t(isMultipart ? 'multipartCollection' : 'collection') }
+              <Grid container component="div" sx={{ width: '100%' }}>
+                <Grid size={3} sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }} >
+                  {thumbnail ? (
+                    <StyledThumbnail
+                      className={[ns('manifest-list-item-thumb')]}
+                      src={[thumbnail]}
+                      alt=""
+                      height="80"
+                      unloader={(
+                        <Skeleton
+                          variant="rectangular"
+                          animation={false}
+                          sx={{ bgcolor: 'grey[300]' }}
+                          height={80}
+                          width={120}
+                        />
+                      )}
+                    />
+                  ) : (
+                    <Skeleton
+                      sx={{ bgcolor: 'grey[300]' }}
+                      variant="rectangular"
+                      height={80}
+                      width={120}
+                    />
+                  )}
+                </Grid>
+                <Grid size={9} sx={{ paddingLeft: 2, alignContent: 'center' }}>
+                  {isCollection && (
+                    <Typography component="div" variant="overline" sx={{ textAlign: 'left' }}>
+                      {t(isMultipart ? 'multipartCollection' : 'collection')}
                     </Typography>
                   )}
-                  <Typography component="span" variant="h6">
+                  <Typography component="div" variant="h6" sx={{ textAlign: 'left' }}>
                     {title || manifestId}
                   </Typography>
-                </Grid2>
-              </Grid2>
+                </Grid>
+              </Grid>
             </ButtonBase>
-          </Grid2>
-          <Grid2 xs={8} sm={4}>
-            <Typography className={ns('manifest-list-item-provider')}>{provider}</Typography>
-            <Typography>{t('numItems', { count: size, number: size })}</Typography>
-          </Grid2>
+          </Grid>
+
+          <Grid size={{ sm: 4, xs: 8 }} >
+            <Typography className={ns('manifest-list-item-provider')}>
+              {provider}
+            </Typography>
+            <Typography>
+              {t('numItems', { count: size, number: size })}
+            </Typography>
+          </Grid>
 
-          <Grid2 xs={4} sm={2}>
-            { manifestLogo
-              && (
+          <Grid size={{ sm: 3, xs: 4 }}>
+            {manifestLogo && (
               <StyledLogo
                 src={[manifestLogo]}
                 alt=""
@@ -189,9 +195,9 @@ export function ManifestListItem({
                   />
                 )}
               />
-              )}
-          </Grid2>
-        </Grid2>
+            )}
+          </Grid>
+        </Grid>
       ) : (
         <Placeholder />
       )}

diff --git a/src/components/ManifestListItemError.jsx b/src/components/ManifestListItemError.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import Button from '@mui/material/Button';
 import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
-import Grid2 from '@mui/material/Grid2';
+import Grid from '@mui/material/Grid';
 import Typography from '@mui/material/Typography';
 import { useTranslation } from 'react-i18next';
 
@@ -14,39 +14,28 @@ export function ManifestListItemError({
 }) {
   const { t } = useTranslation();
   return (
-    <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',
-              }}
-              />
-            </Grid2>
-          </Grid2>
-          <Grid2 xs={8} sm={9}>
-            <Typography>{t('manifestError')}</Typography>
-            <Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
-          </Grid2>
-        </Grid2>
-      </Grid2>
+    <Grid container sx={{ width: '100%', alignItems: 'center' }}>
+      <Grid container size={{ sm: 5, xs: 12 }} sx={{alignItems: 'center'}}>
+        <ErrorIcon sx={{
+          color: 'error.main',
+          height: '2rem',
+          width: '2rem',
+          marginRight: '0.5rem',
+        }}
+        />
+          <Typography>{t('manifestError')}</Typography>
+          <Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
+      </Grid>
 
-      <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>
-          </Grid2>
-        </Grid2>
-      </Grid2>
-    </Grid2>
+      <Grid container size={{ sm: 7, xs: 12 }}>
+        <Button onClick={() => { onDismissClick(manifestId); }}>
+          {t('dismiss')}
+        </Button>
+        <Button onClick={() => { onTryAgainClick(manifestId); }}>
+          {t('tryAgain')}
+        </Button>
+      </Grid>
+    </Grid>
   );
 }
 

diff --git a/src/components/PluginHook.jsx b/src/components/PluginHook.jsx
@@ -8,15 +8,11 @@ export const PluginHook = forwardRef(({ classes = {}, targetName, ...otherProps
 
   return PluginComponents ? (
     PluginComponents.map((PluginComponent, index) => ( // eslint-disable-line react/prop-types
-      isValidElement(PluginComponent)
-        ? cloneElement(PluginComponent, { ...otherProps, ref })
-        : (
-          <PluginComponent
-            ref={ref}
-            {...otherProps}
-            key={index} // eslint-disable-line react/no-array-index-key
-          />
-        )
+      (isValidElement(PluginComponent) ? cloneElement(PluginComponent, { ...otherProps, ref }) : (<PluginComponent
+        ref={ref}
+        {...otherProps}
+        key={index} // eslint-disable-line react/no-array-index-key
+      />))
     ))
   ) : null;
 });