Skip to content

Commit 21b2edb

Browse files
lucas-koehlerlucas-koehler
committed
deps(react-material): Upgrade to MUI ^7 and x-date-picker ^7.28
Dependencies: - Upgrade MUI and MUI Icons peer dependencies to ^7 - Upgrade MUI and MUI Icons dev dependencies to ^7.3 - Increase MUI x-date-pickers peer dependency to ^7.28 to be compatible with MUI 7 - Regenerate pnpm lockfile Code adaptions: - Migrate from the old Grid (now GridLegacy) to Grid2 (now Grid) according to MUI's migration guide - Import all icons from @mui/icons-material to get rid of rollup warnings - In MuiCheckbox and MuiToggle: Migrate from deprecated `inputProps` to `slotProps.input`. - Adapt Material Array Layout tests to internal changes of MUI icon buttons Dev: - Fix/Adapt Material dev application webpack config
1 parent 282751e commit 21b2edb

File tree

17 files changed

+260
-329
lines changed

17 files changed

+260
-329
lines changed

‎packages/examples-react/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"@jsonforms/core": "workspace:*",
77
"@jsonforms/examples": "workspace:*",
88
"@jsonforms/react": "workspace:*",
9-
"@mui/material": "~5.13.0",
9+
"@mui/material": "^7.3.0",
1010
"@types/react-highlight": "^0.12.5",
1111
"@types/react-tabs": "^2.3.3",
1212
"highlight.js": "^11.3.1",

‎packages/material-renderers/package.json‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -84,23 +84,23 @@
8484
"lodash": "^4.17.21"
8585
},
8686
"peerDependencies": {
87-
"@emotion/react": "^11.4.1",
87+
"@emotion/react": "^11.5.0",
8888
"@emotion/styled": "^11.3.0",
8989
"@jsonforms/core": "3.7.0-alpha.0",
9090
"@jsonforms/react": "3.7.0-alpha.0",
91-
"@mui/icons-material": "^5.11.16 || ^6.0.0",
92-
"@mui/material": "^5.13.0 || ^6.0.0",
93-
"@mui/x-date-pickers": "^6.0.0 || ^7.0.0",
91+
"@mui/icons-material": "^7.0.0",
92+
"@mui/material": "^7.0.0",
93+
"@mui/x-date-pickers": "^7.28.0",
9494
"react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
9595
},
9696
"devDependencies": {
9797
"@emotion/react": "^11.5.0",
9898
"@emotion/styled": "^11.3.0",
9999
"@jsonforms/core": "workspace:*",
100100
"@jsonforms/react": "workspace:*",
101-
"@mui/icons-material": "^5.11.16",
102-
"@mui/material": "~5.13.0",
103-
"@mui/x-date-pickers": "^7.7.1",
101+
"@mui/icons-material": "^7.3.0",
102+
"@mui/material": "^7.3.0",
103+
"@mui/x-date-pickers": "^7.29.4",
104104
"@rollup/plugin-commonjs": "^23.0.3",
105105
"@rollup/plugin-json": "^5.0.2",
106106
"@rollup/plugin-node-resolve": "^15.0.1",

‎packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ import {
3333
ListItemText,
3434
Tooltip,
3535
} from '@mui/material';
36-
import DeleteIcon from '@mui/icons-material/Delete';
36+
import { Delete } from '@mui/icons-material';
3737
import React from 'react';
3838

3939
export const ListWithDetailMasterItem = ({
@@ -65,7 +65,7 @@ export const ListWithDetailMasterItem = ({
6565
onClick={removeItem(path, index)}
6666
size='large'
6767
>
68-
<DeleteIcon />
68+
<Delete />
6969
</IconButton>
7070
</Tooltip>
7171
</ListItemSecondaryAction>

‎packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ export const MaterialListWithDetailRenderer = ({
135135
disableAdd={doDisableAdd}
136136
/>
137137
<Grid container direction='row' spacing={2}>
138-
<Grid item xs={3}>
138+
<Grid size={3}>
139139
<List>
140140
{data > 0 ? (
141141
map(range(data), (index) => (
@@ -159,7 +159,7 @@ export const MaterialListWithDetailRenderer = ({
159159
)}
160160
</List>
161161
</Grid>
162-
<Grid item xs>
162+
<Grid size='grow'>
163163
{selectedIndex !== undefined ? (
164164
<JsonFormsDispatch
165165
renderers={renderers}

‎packages/material-renderers/src/complex/MaterialTableControl.tsx‎

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -57,9 +57,7 @@ import {
5757
encode,
5858
ArrayTranslations,
5959
} from '@jsonforms/core';
60-
import DeleteIcon from '@mui/icons-material/Delete';
61-
import ArrowDownward from '@mui/icons-material/ArrowDownward';
62-
import ArrowUpward from '@mui/icons-material/ArrowUpward';
60+
import { Delete, ArrowDownward, ArrowUpward } from '@mui/icons-material';
6361

6462
import { WithDeleteDialogSupport } from './DeleteDialog';
6563
import NoBorderTableCell from './NoBorderTableCell';
@@ -317,7 +315,7 @@ const NonEmptyRowComponent = ({
317315
>
318316
{showSortButtons ? (
319317
<Fragment>
320-
<Grid item>
318+
<Grid>
321319
<Tooltip
322320
id='tooltip-up'
323321
title={translations.up}
@@ -334,7 +332,7 @@ const NonEmptyRowComponent = ({
334332
</IconButton>
335333
</Tooltip>
336334
</Grid>
337-
<Grid item>
335+
<Grid>
338336
<Tooltip
339337
id='tooltip-down'
340338
title={translations.down}
@@ -354,7 +352,7 @@ const NonEmptyRowComponent = ({
354352
</Fragment>
355353
) : null}
356354
{!disableRemove ? (
357-
<Grid item>
355+
<Grid>
358356
<Tooltip
359357
id='tooltip-remove'
360358
title={translations.removeTooltip}
@@ -365,7 +363,7 @@ const NonEmptyRowComponent = ({
365363
onClick={() => openDeleteDialog(childPath, rowIndex)}
366364
size='large'
367365
>
368-
<DeleteIcon />
366+
<Delete />
369367
</IconButton>
370368
</Tooltip>
371369
</Grid>

‎packages/material-renderers/src/complex/NoBorderTableCell.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,7 @@
2222
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
2323
THE SOFTWARE.
2424
*/
25-
import { styled } from '@mui/material/styles';
26-
import { TableCell } from '@mui/material';
25+
import { styled, TableCell } from '@mui/material';
2726
import React from 'react';
2827

2928
const StyledTableCell = styled(TableCell)({

‎packages/material-renderers/src/complex/TableToolbar.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ import {
3838
FormHelperText,
3939
Stack,
4040
} from '@mui/material';
41-
import AddIcon from '@mui/icons-material/Add';
41+
import { Add } from '@mui/icons-material';
4242
import ValidationIcon from './ValidationIcon';
4343
import NoBorderTableCell from './NoBorderTableCell';
4444

@@ -85,12 +85,12 @@ const TableToolbar = React.memo(function TableToolbar({
8585
alignItems={'center'}
8686
spacing={2}
8787
>
88-
<Grid item>
88+
<Grid>
8989
<Typography variant={'h6'}>{label}</Typography>
9090
</Grid>
91-
<Grid item>
91+
<Grid>
9292
{errors.length !== 0 && (
93-
<Grid item>
93+
<Grid>
9494
<ValidationIcon
9595
id='tooltip-validation'
9696
errorMessages={errors}
@@ -114,7 +114,7 @@ const TableToolbar = React.memo(function TableToolbar({
114114
onClick={addItem(path, createDefaultValue(schema, rootSchema))}
115115
size='large'
116116
>
117-
<AddIcon />
117+
<Add />
118118
</IconButton>
119119
</Tooltip>
120120
</NoBorderTableCell>

‎packages/material-renderers/src/complex/ValidationIcon.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
*/
2525
import React from 'react';
2626

27-
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
27+
import { ErrorOutline } from '@mui/icons-material';
2828
import { Badge, Tooltip, styled } from '@mui/material';
2929

3030
const StyledBadge = styled(Badge)(({ theme }: any) => ({
@@ -40,7 +40,7 @@ const ValidationIcon: React.FC<ValidationProps> = ({ errorMessages, id }) => {
4040
return (
4141
<Tooltip id={id} title={errorMessages}>
4242
<StyledBadge badgeContent={errorMessages.split('\n').length}>
43-
<ErrorOutlineIcon color='inherit' />
43+
<ErrorOutline color='inherit' />
4444
</StyledBadge>
4545
</Tooltip>
4646
);

‎packages/material-renderers/src/layouts/ArrayToolbar.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
Tooltip,
88
Typography,
99
} from '@mui/material';
10-
import AddIcon from '@mui/icons-material/Add';
10+
import { Add } from '@mui/icons-material';
1111
import React from 'react';
1212
import ValidationIcon from '../complex/ValidationIcon';
1313
import { ArrayTranslations } from '@jsonforms/core';
@@ -35,21 +35,21 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
3535
}: ArrayLayoutToolbarProps) {
3636
return (
3737
<Toolbar disableGutters={true}>
38-
<Stack>
38+
<Stack width='100%'>
3939
<Grid container alignItems='center' justifyContent='space-between'>
40-
<Grid item>
40+
<Grid>
4141
<Grid
4242
container
4343
justifyContent={'flex-start'}
4444
alignItems={'center'}
4545
spacing={2}
4646
>
47-
<Grid item>
47+
<Grid>
4848
<Typography variant={'h6'}>{label}</Typography>
4949
</Grid>
50-
<Grid item>
50+
<Grid>
5151
{errors.length !== 0 && (
52-
<Grid item>
52+
<Grid>
5353
<ValidationIcon
5454
id='tooltip-validation'
5555
errorMessages={errors}
@@ -60,9 +60,9 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
6060
</Grid>
6161
</Grid>
6262
{enabled && !disableAdd && (
63-
<Grid item>
63+
<Grid>
6464
<Grid container>
65-
<Grid item>
65+
<Grid>
6666
<Tooltip
6767
id='tooltip-add'
6868
title={translations.addTooltip}
@@ -73,7 +73,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
7373
onClick={addItem(path, createDefault())}
7474
size='large'
7575
>
76-
<AddIcon />
76+
<Add />
7777
</IconButton>
7878
</Tooltip>
7979
</Grid>

‎packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx‎

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -40,10 +40,12 @@ import {
4040
IconButton,
4141
Tooltip,
4242
} from '@mui/material';
43-
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
44-
import ArrowUpward from '@mui/icons-material/ArrowUpward';
45-
import ArrowDownward from '@mui/icons-material/ArrowDownward';
46-
import DeleteIcon from '@mui/icons-material/Delete';
43+
import {
44+
ArrowUpward,
45+
ArrowDownward,
46+
Delete,
47+
ExpandMore,
48+
} from '@mui/icons-material';
4749

4850
const iconStyle: any = { float: 'right' };
4951

@@ -145,21 +147,21 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
145147
expanded={expanded}
146148
onChange={handleExpansion(childPath)}
147149
>
148-
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
149-
<Grid container alignItems={'center'}>
150-
<Grid item xs={7} md={9}>
150+
<AccordionSummary expandIcon={<ExpandMore />}>
151+
<Grid container sx={{ width: '100%' }} alignItems={'center'}>
152+
<Grid size={{ xs: 7, md: 9 }}>
151153
<Grid container alignItems={'center'}>
152-
<Grid item xs={2} md={1}>
154+
<Grid size={{ xs: 2, md: 1 }}>
153155
<Avatar aria-label='Index'>{index + 1}</Avatar>
154156
</Grid>
155-
<Grid item xs={10} md={11}>
157+
<Grid size={{ xs: 10, md: 11 }}>
156158
<span id={labelHtmlId}>{childLabel}</span>
157159
</Grid>
158160
</Grid>
159161
</Grid>
160-
<Grid item xs={5} md={3}>
162+
<Grid size={{ xs: 5, md: 3 }}>
161163
<Grid container justifyContent='flex-end'>
162-
<Grid item>
164+
<Grid>
163165
<Grid
164166
container
165167
direction='row'
@@ -168,7 +170,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
168170
>
169171
{showSortButtons && enabled ? (
170172
<Fragment>
171-
<Grid item>
173+
<Grid>
172174
<Tooltip
173175
id='tooltip-up'
174176
title={translations.up}
@@ -186,7 +188,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
186188
</IconButton>
187189
</Tooltip>
188190
</Grid>
189-
<Grid item>
191+
<Grid>
190192
<Tooltip
191193
id='tooltip-down'
192194
title={translations.down}
@@ -209,7 +211,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
209211
''
210212
)}
211213
{enabled && !disableRemove && (
212-
<Grid item>
214+
<Grid>
213215
<Tooltip
214216
id='tooltip-remove'
215217
title={translations.removeTooltip}
@@ -221,7 +223,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
221223
aria-label={translations.removeAriaLabel}
222224
size='large'
223225
>
224-
<DeleteIcon />
226+
<Delete />
225227
</IconButton>
226228
</Tooltip>
227229
</Grid>

0 commit comments

Comments
 (0)