Skip to content

Commit 128c1c8

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 Example app: - Removed obsolete custom cjs compatibility plugin from react material example app build. It was necessary for previous MUI versions that were based on CJS instead of ESM
1 parent b7fb94d commit 128c1c8

18 files changed

+260
-363
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/rollup.example.config.js‎

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -6,39 +6,6 @@ import copy from 'rollup-plugin-copy';
66
import css from 'rollup-plugin-import-css';
77
import typescript from 'rollup-plugin-typescript2';
88

9-
// This little plugin mitigates Rollup's lack of support for pre-built CommonJS dependencies with
10-
// default exports.
11-
// For mor details see here: https://github.com/eclipsesource/jsonforms/pull/2139
12-
function cjsCompatPlugin() {
13-
return {
14-
name: 'cjs-compat-plugin',
15-
transform(code, id) {
16-
// ignore all packages which are not @mui/utils
17-
if (
18-
!/@mui\/utils.*.js$/.test(id) ||
19-
id.includes('@mui/utils/node_modules')
20-
) {
21-
return code;
22-
}
23-
24-
// try to extract the commonjs namespace variable
25-
const moduleName = code.match(
26-
/(?<module>[a-zA-Z0-9_$]*).default = _default;/
27-
)?.groups?.module;
28-
29-
if (!moduleName || !code.includes(`return ${moduleName};`)) {
30-
return code;
31-
}
32-
33-
// return default export instead of namespace
34-
return code.replace(
35-
`return ${moduleName}`,
36-
`return ${moduleName}.default`
37-
);
38-
},
39-
};
40-
}
41-
429
/**
4310
* @type {import('rollup').RollupOptions}
4411
*/
@@ -72,7 +39,6 @@ const config = {
7239
},
7340
},
7441
}),
75-
cjsCompatPlugin(),
7642
copy({
7743
targets: [
7844
{

‎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>

0 commit comments

Comments
 (0)