Skip to content

Commit d55b9cb

Browse files
lutzhelmlutzhelm
authored
Merge pull request #4139 from ProjectMirador/mui7
Update to MUI 7
2 parents 470cf46 + dfdc629 commit d55b9cb

File tree

10 files changed

+133
-144
lines changed

10 files changed

+133
-144
lines changed

‎__tests__/src/actions/companionWindow.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import * as actions from '../../../src/state/actions';
22
import ActionTypes from '../../../src/state/actions/action-types';
33

44
vi.mock('../../../src/state/selectors', async (importOriginal) => ({
5-
...await importOriginal(),
5+
...(await importOriginal()),
66
getVisibleNodeIds: (state, args) => ['openVisible', 'closedVisible', 'visible'],
77
}));
88

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,8 @@
3737
"@custom-react-hooks/use-element-size": "^1.5.1",
3838
"@emotion/cache": "^11.11.0",
3939
"@hello-pangea/dnd": "^16.0.1 || ^17.0.0 || ^18.0.0",
40-
"@mui/icons-material": "^6.0.0",
41-
"@mui/utils": "^6.0.0",
40+
"@mui/icons-material": "^7.0.0",
41+
"@mui/utils": "^7.0.0",
4242
"@mui/x-tree-view": "^7.25.0",
4343
"@react-aria/live-announcer": "^3.1.2",
4444
"@redux-devtools/extension": "^3.3.0",
@@ -83,8 +83,8 @@
8383
"devDependencies": {
8484
"@emotion/react": "^11.10.6",
8585
"@emotion/styled": "^11.10.6",
86-
"@mui/material": "^6.x",
87-
"@mui/system": "^6.x",
86+
"@mui/material": "^7.x",
87+
"@mui/system": "^7.x",
8888
"@testing-library/dom": "^10.4.0",
8989
"@testing-library/jest-dom": "^6.1.5",
9090
"@testing-library/react": "^16.0.1",
@@ -116,8 +116,8 @@
116116
"vitest-fetch-mock": "^0.4.2"
117117
},
118118
"peerDependencies": {
119-
"@mui/material": "^6.x",
120-
"@mui/system": "^6.x",
119+
"@mui/material": "^7.x",
120+
"@mui/system": "^7.x",
121121
"@emotion/react": "^11.10.6",
122122
"@emotion/styled": "^11.10.6",
123123
"react": "^18.0.0 || ^19.0.0",

‎src/components/IIIFIFrameCommunication.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,10 @@ export function IIIFIFrameCommunication({ handleReceiveMessage = undefined, ...p
2828
return (
2929
// iframe "title" attribute is passed in via props for accessibility
3030
// eslint-disable-next-line jsx-a11y/iframe-has-title
31-
<iframe
31+
(<iframe
3232
{...IIIFIFrameCommunicationDefaultProps}
3333
{...props}
34-
/>
34+
/>)
3535
);
3636
}
3737

‎src/components/ManifestForm.jsx‎

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -39,8 +39,13 @@ export function ManifestForm({
3939

4040
return (
4141
<form onSubmit={formSubmit}>
42-
<Grid container spacing={2}>
43-
<Grid item xs={12} sm={8} md={9}>
42+
<Grid
43+
container
44+
spacing={2}
45+
columns={12}
46+
sx={{ mt: 0.5 }}
47+
>
48+
<Grid size={{ sm: 'grow', xs: 12 }}>
4449
<TextField
4550
autoFocus
4651
fullWidth
@@ -51,29 +56,26 @@ export function ManifestForm({
5156
variant="filled"
5257
label={t('addManifestUrl')}
5358
helperText={t('addManifestUrlHelp')}
54-
InputLabelProps={{
55-
shrink: true,
56-
}}
57-
InputProps={{
58-
style: { typography: 'body1' },
59+
slotProps={{
60+
inputLabel: { shrink: true },
61+
inputProps: { style: { typography: 'body1' } },
5962
}}
6063
/>
6164
</Grid>
62-
<Grid
63-
item
64-
xs={12}
65-
sm={4}
66-
md={3}
67-
sx={{
68-
textAlign: { sm: 'inherit', xs: 'right' },
69-
}}
70-
>
71-
{ onCancel && (
65+
{onCancel && (
66+
<Grid size="auto">
7267
<Button onClick={handleCancel}>
7368
{t('cancel')}
7469
</Button>
75-
)}
76-
<Button id="fetchBtn" type="submit" variant="contained" color="primary">
70+
</Grid>
71+
)}
72+
<Grid size="auto">
73+
<Button
74+
id="fetchBtn"
75+
type="submit"
76+
variant="contained"
77+
color="primary"
78+
>
7779
{t('fetchManifest')}
7880
</Button>
7981
</Grid>

‎src/components/ManifestListItem.jsx‎

Lines changed: 68 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import { styled } from '@mui/material/styles';
44
import ListItem from '@mui/material/ListItem';
55
import ButtonBase from '@mui/material/ButtonBase';
6-
import Grid2 from '@mui/material/Grid2';
6+
import Grid from '@mui/material/Grid';
77
import Typography from '@mui/material/Typography';
88
import Skeleton from '@mui/material/Skeleton';
99
import { useTranslation } from 'react-i18next';
@@ -40,21 +40,21 @@ const StyledLogo = styled(Img, { name: 'ManifestListItem', slot: 'logo' })(({ th
4040

4141
/** */
4242
const Placeholder = () => (
43-
<Grid2 container className={ns('manifest-list-item')} spacing={2}>
44-
<Grid2 xs={3} sm={2}>
43+
<Grid container className={ns('manifest-list-item')}>
44+
<Grid size={{ sm: 2, xs: 3 }}>
4545
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />
46-
</Grid2>
47-
<Grid2 xs={9} sm={6}>
46+
</Grid>
47+
<Grid size={{ sm: 6, xs: 9 }}>
4848
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
49-
</Grid2>
50-
<Grid2 xs={8} sm={2}>
49+
</Grid>
50+
<Grid size={{ sm: 2, xs: 8 }}>
5151
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
5252
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
53-
</Grid2>
54-
<Grid2 xs={4} sm={2}>
53+
</Grid>
54+
<Grid size={{ sm: 2, xs: 4 }}>
5555
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={60} width={60} />
56-
</Grid2>
57-
</Grid2>
56+
</Grid>
57+
</Grid>
5858
);
5959

6060
/**
@@ -114,67 +114,73 @@ export function ManifestListItem({
114114
className={active ? 'active' : ''}
115115
data-manifestid={manifestId}
116116
data-active={active}
117+
sx={{ width: '100%' }}
117118
>
118119
{ready ? (
119-
<Grid2 container className={ns('manifest-list-item')} spacing={2}>
120-
<Grid2 xs={12} sm={6}>
120+
<Grid
121+
container
122+
className={ns('manifest-list-item')}
123+
sx={{ width: '100%', alignItems: 'center' }}
124+
>
125+
<Grid size={{ sm: 5, xs: 12 }}>
121126
<ButtonBase
122127
ref={buttonRef}
123128
className={ns('manifest-list-item-title')}
124-
style={{ width: '100%' }}
125129
onClick={handleOpenButtonClick}
130+
sx={{ justifyContent: 'flex-start', alignItems: 'center', width: '100%' }}
126131
>
127-
<Grid2
128-
container
129-
spacing={2}
130-
sx={{
131-
textAlign: 'left',
132-
textTransform: 'initial',
133-
}}
134-
component="span"
135-
>
136-
<Grid2 xs={4} sm={3} component="span">
137-
{ thumbnail
138-
? (
139-
<StyledThumbnail
140-
className={[ns('manifest-list-item-thumb')]}
141-
src={[thumbnail]}
142-
alt=""
143-
height="80"
144-
unloader={(
145-
<Skeleton
146-
variant="rectangular"
147-
animation={false}
148-
sx={{ bgcolor: 'grey[300]' }}
149-
height={80}
150-
width={120}
151-
/>
152-
)}
153-
/>
154-
)
155-
: <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />}
156-
</Grid2>
157-
<Grid2 xs={8} sm={9} component="span">
158-
{ isCollection && (
159-
<Typography component="div" variant="overline">
160-
{ t(isMultipart ? 'multipartCollection' : 'collection') }
132+
<Grid container component="div" sx={{ width: '100%' }}>
133+
<Grid size={3} sx={{ display: 'flex', justifyContent: 'flex-start', alignItems: 'center' }} >
134+
{thumbnail ? (
135+
<StyledThumbnail
136+
className={[ns('manifest-list-item-thumb')]}
137+
src={[thumbnail]}
138+
alt=""
139+
height="80"
140+
unloader={(
141+
<Skeleton
142+
variant="rectangular"
143+
animation={false}
144+
sx={{ bgcolor: 'grey[300]' }}
145+
height={80}
146+
width={120}
147+
/>
148+
)}
149+
/>
150+
) : (
151+
<Skeleton
152+
sx={{ bgcolor: 'grey[300]' }}
153+
variant="rectangular"
154+
height={80}
155+
width={120}
156+
/>
157+
)}
158+
</Grid>
159+
<Grid size={9} sx={{ paddingLeft: 2, alignContent: 'center' }}>
160+
{isCollection && (
161+
<Typography component="div" variant="overline" sx={{ textAlign: 'left' }}>
162+
{t(isMultipart ? 'multipartCollection' : 'collection')}
161163
</Typography>
162164
)}
163-
<Typography component="span" variant="h6">
165+
<Typography component="div" variant="h6" sx={{ textAlign: 'left' }}>
164166
{title || manifestId}
165167
</Typography>
166-
</Grid2>
167-
</Grid2>
168+
</Grid>
169+
</Grid>
168170
</ButtonBase>
169-
</Grid2>
170-
<Grid2 xs={8} sm={4}>
171-
<Typography className={ns('manifest-list-item-provider')}>{provider}</Typography>
172-
<Typography>{t('numItems', { count: size, number: size })}</Typography>
173-
</Grid2>
171+
</Grid>
172+
173+
<Grid size={{ sm: 4, xs: 8 }} >
174+
<Typography className={ns('manifest-list-item-provider')}>
175+
{provider}
176+
</Typography>
177+
<Typography>
178+
{t('numItems', { count: size, number: size })}
179+
</Typography>
180+
</Grid>
174181

175-
<Grid2 xs={4} sm={2}>
176-
{ manifestLogo
177-
&& (
182+
<Grid size={{ sm: 3, xs: 4 }}>
183+
{manifestLogo && (
178184
<StyledLogo
179185
src={[manifestLogo]}
180186
alt=""
@@ -189,9 +195,9 @@ export function ManifestListItem({
189195
/>
190196
)}
191197
/>
192-
)}
193-
</Grid2>
194-
</Grid2>
198+
)}
199+
</Grid>
200+
</Grid>
195201
) : (
196202
<Placeholder />
197203
)}

‎src/components/ManifestListItemError.jsx‎

Lines changed: 22 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import PropTypes from 'prop-types';
22
import Button from '@mui/material/Button';
33
import ErrorIcon from '@mui/icons-material/ErrorOutlineSharp';
4-
import Grid2 from '@mui/material/Grid2';
4+
import Grid from '@mui/material/Grid';
55
import Typography from '@mui/material/Typography';
66
import { useTranslation } from 'react-i18next';
77

@@ -14,39 +14,28 @@ export function ManifestListItemError({
1414
}) {
1515
const { t } = useTranslation();
1616
return (
17-
<Grid2 container>
18-
<Grid2 container>
19-
<Grid2 container xs={12} sm={6}>
20-
<Grid2 xs={4} sm={3}>
21-
<Grid2 container justifyContent="center">
22-
<ErrorIcon sx={{
23-
color: 'error.main',
24-
height: '2rem',
25-
width: '2rem',
26-
}}
27-
/>
28-
</Grid2>
29-
</Grid2>
30-
<Grid2 xs={8} sm={9}>
31-
<Typography>{t('manifestError')}</Typography>
32-
<Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
33-
</Grid2>
34-
</Grid2>
35-
</Grid2>
17+
<Grid container sx={{ width: '100%', alignItems: 'center' }}>
18+
<Grid container size={{ sm: 5, xs: 12 }} sx={{alignItems: 'center'}}>
19+
<ErrorIcon sx={{
20+
color: 'error.main',
21+
height: '2rem',
22+
width: '2rem',
23+
marginRight: '0.5rem',
24+
}}
25+
/>
26+
<Typography>{t('manifestError')}</Typography>
27+
<Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
28+
</Grid>
3629

37-
<Grid2 container>
38-
<Grid2 container xs={12} sm={6} justifyContent="flex-end">
39-
<Grid2>
40-
<Button onClick={() => { onDismissClick(manifestId); }}>
41-
{t('dismiss')}
42-
</Button>
43-
<Button onClick={() => { onTryAgainClick(manifestId); }}>
44-
{t('tryAgain')}
45-
</Button>
46-
</Grid2>
47-
</Grid2>
48-
</Grid2>
49-
</Grid2>
30+
<Grid container size={{ sm: 7, xs: 12 }}>
31+
<Button onClick={() => { onDismissClick(manifestId); }}>
32+
{t('dismiss')}
33+
</Button>
34+
<Button onClick={() => { onTryAgainClick(manifestId); }}>
35+
{t('tryAgain')}
36+
</Button>
37+
</Grid>
38+
</Grid>
5039
);
5140
}
5241

‎src/components/PluginHook.jsx‎

Lines changed: 5 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,11 @@ export const PluginHook = forwardRef(({ classes = {}, targetName, ...otherProps
88

99
return PluginComponents ? (
1010
PluginComponents.map((PluginComponent, index) => ( // eslint-disable-line react/prop-types
11-
isValidElement(PluginComponent)
12-
? cloneElement(PluginComponent, { ...otherProps, ref })
13-
: (
14-
<PluginComponent
15-
ref={ref}
16-
{...otherProps}
17-
key={index} // eslint-disable-line react/no-array-index-key
18-
/>
19-
)
11+
(isValidElement(PluginComponent) ? cloneElement(PluginComponent, { ...otherProps, ref }) : (<PluginComponent
12+
ref={ref}
13+
{...otherProps}
14+
key={index} // eslint-disable-line react/no-array-index-key
15+
/>))
2016
))
2117
) : null;
2218
});

0 commit comments

Comments
 (0)