Skip to content

Commit 98fb916

Browse files
cbeercbeer
authored
Merge pull request #4092 from ProjectMirador/mui6
Update to MUI 6
2 parents 12bbe35 + 6737d53 commit 98fb916

13 files changed

+137
-149
lines changed

‎__tests__/src/components/ManifestListItem.test.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,6 @@ describe('ManifestListItem', () => {
3232
expect(screen.getByRole('listitem')).toHaveAttribute('data-active', 'true');
3333

3434
expect(screen.getByRole('listitem')).toHaveClass('active');
35-
expect(screen.getByRole('listitem')).toHaveClass('Mui-selected');
3635
});
3736
it('renders a placeholder element until real data is available', () => {
3837
const { container } = createWrapper({ ready: false });

‎__tests__/src/components/SearchHit.test.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ describe('SearchHit', () => {
3737
const selectAnnotation = vi.fn();
3838
render(<Subject selectAnnotation={selectAnnotation} />);
3939

40-
expect(screen.getByRole('listitem')).toHaveClass('Mui-selected');
40+
expect(screen.getByRole('listitem')).toHaveClass('windowSelected');
4141
expect(screen.getByRole('listitem')).toHaveTextContent('1Light up the moose , and start the chai more');
4242

4343
await user.click(screen.getByRole('button'));

‎__tests__/src/components/SidebarIndexTableOfContents.test.js‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,6 @@ describe('SidebarIndexTableOfContents', () => {
119119
it('toggles branch nodes on click', async () => {
120120
const user = userEvent.setup();
121121
const { store } = createInteractiveWrapper({});
122-
123122
expect(screen.getByRole('treeitem')).toBeInTheDocument();
124123
const root = screen.getByRole('treeitem');
125124

@@ -199,7 +198,7 @@ describe('SidebarIndexTableOfContents', () => {
199198
it('sets the canvas to a start canvas if present (IIIF v2)', async () => {
200199
const user = userEvent.setup();
201200
createWrapper({
202-
expandNodes: () => { },
201+
expandItems: () => { },
203202
manifest: manifestVersion2,
204203
setCanvas,
205204
windowId: 'a',

‎package.json‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,10 @@
3636
"dependencies": {
3737
"@custom-react-hooks/use-element-size": "^1.5.1",
3838
"@emotion/cache": "^11.11.0",
39-
"@emotion/react": "^11.10.6",
40-
"@emotion/styled": "^11.10.6",
4139
"@hello-pangea/dnd": "^16.0.1 || ^17.0.0",
42-
"@mui/icons-material": "^5.11.16",
43-
"@mui/utils": "^5.13.1",
44-
"@mui/x-tree-view": "^6.17.0",
40+
"@mui/icons-material": "^6.0.0",
41+
"@mui/utils": "^6.0.0",
42+
"@mui/x-tree-view": "^7.25.0",
4543
"@react-aria/live-announcer": "^3.1.2",
4644
"@redux-devtools/extension": "^3.3.0",
4745
"classnames": "^2.2.6",
@@ -83,7 +81,10 @@
8381
"uuid": "^8.1.0 || ^9.0.0 || ^10.0.0 || ^11.0.0"
8482
},
8583
"devDependencies": {
86-
"@mui/material": "^5.13.5",
84+
"@emotion/react": "^11.10.6",
85+
"@emotion/styled": "^11.10.6",
86+
"@mui/material": "^6.x",
87+
"@mui/system": "^6.x",
8788
"@testing-library/dom": "^10.4.0",
8889
"@testing-library/jest-dom": "^6.1.5",
8990
"@testing-library/react": "^16.0.1",
@@ -115,8 +116,8 @@
115116
"vitest-fetch-mock": "^0.4.2"
116117
},
117118
"peerDependencies": {
118-
"@mui/material": "^5.x",
119-
"@mui/system": "^5.x",
119+
"@mui/material": "^6.x",
120+
"@mui/system": "^6.x",
120121
"@emotion/react": "^11.10.6",
121122
"@emotion/styled": "^11.10.6",
122123
"react": "^18.0.0",

‎src/components/CollapsibleSection.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ export function CollapsibleSection({
2121
}, [setOpen]);
2222

2323
return (
24-
<Accordion id={id} elevation={0} expanded={open} onChange={handleChange} disableGutters square variant="compact">
24+
<Accordion slotProps={{ heading: { component: 'h4' } }} id={id} elevation={0} expanded={open} onChange={handleChange} disableGutters square variant="compact">
2525
<AccordionSummary id={`${id}-header`} aria-controls={`${id}-content`} aria-label={t(open ? 'collapseSection' : 'expandSection', { section: label })} expandIcon={<ExpandMoreIcon />}>
26-
<Typography variant="overline" component="h4">
26+
<Typography variant="overline">
2727
{label}
2828
</Typography>
2929
</AccordionSummary>

‎src/components/CompanionArea.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,8 @@ const Container = styled('div', { name: 'CompanionArea', slot: 'container' })(({
3434
const StyledToggle = styled('div', { name: 'CompanionArea', slot: 'toggle' })(({ theme }) => ({
3535
alignItems: 'center',
3636
backgroundColor: theme.palette.background.paper,
37-
border: `1px solid ${theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.shades?.dark}`,
37+
border: `1px solid ${theme.palette.shades?.dark}`,
38+
...theme.applyStyles('dark', { borderColor: theme.palette.divider }),
3839
borderInlineStart: 0,
3940
borderRadius: 0,
4041
display: 'inline-flex',

‎src/components/ManifestListItem.js‎

Lines changed: 30 additions & 26 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 Grid from '@mui/material/Grid';
6+
import Grid2 from '@mui/material/Grid2';
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-
<Grid container className={ns('manifest-list-item')} spacing={2}>
44-
<Grid item xs={3} sm={2}>
43+
<Grid2 container className={ns('manifest-list-item')} spacing={2}>
44+
<Grid2 xs={3} sm={2}>
4545
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />
46-
</Grid>
47-
<Grid item xs={9} sm={6}>
46+
</Grid2>
47+
<Grid2 xs={9} sm={6}>
4848
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
49-
</Grid>
50-
<Grid item xs={8} sm={2}>
49+
</Grid2>
50+
<Grid2 xs={8} sm={2}>
5151
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
5252
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="text" />
53-
</Grid>
54-
<Grid item xs={4} sm={2}>
53+
</Grid2>
54+
<Grid2 xs={4} sm={2}>
5555
<Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={60} width={60} />
56-
</Grid>
57-
</Grid>
56+
</Grid2>
57+
</Grid2>
5858
);
5959

6060
/**
@@ -116,15 +116,15 @@ export function ManifestListItem({
116116
data-active={active}
117117
>
118118
{ready ? (
119-
<Grid container className={ns('manifest-list-item')} spacing={2}>
120-
<Grid item xs={12} sm={6}>
119+
<Grid2 container className={ns('manifest-list-item')} spacing={2}>
120+
<Grid2 xs={12} sm={6}>
121121
<ButtonBase
122122
ref={buttonRef}
123123
className={ns('manifest-list-item-title')}
124124
style={{ width: '100%' }}
125125
onClick={handleOpenButtonClick}
126126
>
127-
<Grid
127+
<Grid2
128128
container
129129
spacing={2}
130130
sx={{
@@ -133,7 +133,7 @@ export function ManifestListItem({
133133
}}
134134
component="span"
135135
>
136-
<Grid item xs={4} sm={3} component="span">
136+
<Grid2 xs={4} sm={3} component="span">
137137
{ thumbnail
138138
? (
139139
<StyledThumbnail
@@ -153,8 +153,8 @@ export function ManifestListItem({
153153
/>
154154
)
155155
: <Skeleton sx={{ bgcolor: 'grey[300]' }} variant="rectangular" height={80} width={120} />}
156-
</Grid>
157-
<Grid item xs={8} sm={9} component="span">
156+
</Grid2>
157+
<Grid2 xs={8} sm={9} component="span">
158158
{ isCollection && (
159159
<Typography component="div" variant="overline">
160160
{ t(isMultipart ? 'multipartCollection' : 'collection') }
@@ -163,16 +163,16 @@ export function ManifestListItem({
163163
<Typography component="span" variant="h6">
164164
{title || manifestId}
165165
</Typography>
166-
</Grid>
167-
</Grid>
166+
</Grid2>
167+
</Grid2>
168168
</ButtonBase>
169-
</Grid>
170-
<Grid item xs={8} sm={4}>
169+
</Grid2>
170+
<Grid2 xs={8} sm={4}>
171171
<Typography className={ns('manifest-list-item-provider')}>{provider}</Typography>
172172
<Typography>{t('numItems', { count: size, number: size })}</Typography>
173-
</Grid>
173+
</Grid2>
174174

175-
<Grid item xs={4} sm={2}>
175+
<Grid2 xs={4} sm={2}>
176176
{ manifestLogo
177177
&& (
178178
<StyledLogo
@@ -190,8 +190,8 @@ export function ManifestListItem({
190190
)}
191191
/>
192192
)}
193-
</Grid>
194-
</Grid>
193+
</Grid2>
194+
</Grid2>
195195
) : (
196196
<Placeholder />
197197
)}
@@ -203,7 +203,11 @@ ManifestListItem.propTypes = {
203203
active: PropTypes.bool,
204204
addWindow: PropTypes.func.isRequired,
205205
buttonRef: PropTypes.elementType,
206-
error: PropTypes.string,
206+
error: PropTypes.oneOfType([
207+
PropTypes.string,
208+
PropTypes.bool,
209+
PropTypes.oneOf([null]), // for null
210+
]),
207211
fetchManifest: PropTypes.func.isRequired,
208212
handleClose: PropTypes.func,
209213
isCollection: PropTypes.bool,

‎src/components/ManifestListItemError.js‎

Lines changed: 19 additions & 19 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 Grid from '@mui/material/Grid';
4+
import Grid2 from '@mui/material/Grid2';
55
import Typography from '@mui/material/Typography';
66
import { useTranslation } from 'react-i18next';
77

@@ -14,39 +14,39 @@ export function ManifestListItemError({
1414
}) {
1515
const { t } = useTranslation();
1616
return (
17-
<Grid container>
18-
<Grid container>
19-
<Grid container item xs={12} sm={6}>
20-
<Grid item xs={4} sm={3}>
21-
<Grid container justifyContent="center">
17+
<Grid2 container>
18+
<Grid2 container>
19+
<Grid2 container xs={12} sm={6}>
20+
<Grid2 xs={4} sm={3}>
21+
<Grid2 container justifyContent="center">
2222
<ErrorIcon sx={{
2323
color: 'error.main',
2424
height: '2rem',
2525
width: '2rem',
2626
}}
2727
/>
28-
</Grid>
29-
</Grid>
30-
<Grid item xs={8} sm={9}>
28+
</Grid2>
29+
</Grid2>
30+
<Grid2 xs={8} sm={9}>
3131
<Typography>{t('manifestError')}</Typography>
3232
<Typography sx={{ wordBreak: 'break-all' }}>{manifestId}</Typography>
33-
</Grid>
34-
</Grid>
35-
</Grid>
33+
</Grid2>
34+
</Grid2>
35+
</Grid2>
3636

37-
<Grid container>
38-
<Grid container item xs={12} sm={6} justifyContent="flex-end">
39-
<Grid item>
37+
<Grid2 container>
38+
<Grid2 container xs={12} sm={6} justifyContent="flex-end">
39+
<Grid2>
4040
<Button onClick={() => { onDismissClick(manifestId); }}>
4141
{t('dismiss')}
4242
</Button>
4343
<Button onClick={() => { onTryAgainClick(manifestId); }}>
4444
{t('tryAgain')}
4545
</Button>
46-
</Grid>
47-
</Grid>
48-
</Grid>
49-
</Grid>
46+
</Grid2>
47+
</Grid2>
48+
</Grid2>
49+
</Grid2>
5050
);
5151
}
5252

‎src/components/SearchHit.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
44
import Button from '@mui/material/Button';
55
import ListItem from '@mui/material/ListItem';
66
import ListItemText from '@mui/material/ListItemText';
7+
import ListItemButton from '@mui/material/ListItemButton';
78
import Typography from '@mui/material/Typography';
89
import Chip from '@mui/material/Chip';
910
import { styled } from '@mui/material/styles';
@@ -122,8 +123,7 @@ export function SearchHit({
122123
ownerState={ownerState}
123124
className={windowSelected ? 'windowSelected' : ''}
124125
divider
125-
button={!selected}
126-
component="li"
126+
component={selected ? 'li' : ListItemButton}
127127
onClick={handleClick}
128128
selected={selected}
129129
>

0 commit comments

Comments
 (0)