Skip to content

deps(react-material): Upgrade to MUI ^7 and x-date-picker ^7.28 #2476

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lucas-koehler merged 2 commits into from
Aug 14, 2025
Merged

deps(react-material): Upgrade to MUI ^7 and x-date-picker ^7.28 #2476

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
282751e
dev: Update pinned pnpm version to 10.14.0
lucas-koehler Aug 5, 2025
c610c85
deps(react-material): Upgrade to MUI ^7 and x-date-picker ^7.28
lucas-koehler Aug 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"node": "^22",
"pnpm": "^10.4.1"
},
"packageManager": "pnpm@10.5.2+sha512.da9dc28cd3ff40d0592188235ab25d3202add8a207afbedc682220e4a0029ffbff4562102b9e6e46b4e3f9e8bd53e6d05de48544b0c57d4b0179e22c76d1199b",
"packageManager": "pnpm@10.14.0+sha512.ad27a79641b49c3e481a16a805baa71817a04bbe06a38d17e60e2eaee83f6a146c6a688125f5792e48dd5ba30e7da52a5cda4c3992b9ccf333f9ce223af84748",
"scripts": {
"lerna": "lerna",
"preparePublish": "git clean -dfx && pnpm i --frozen-lockfile && pnpm run clean && pnpm run build && pnpm run doc && pnpm run test",
Expand Down
2 changes: 1 addition & 1 deletion packages/examples-react/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"@jsonforms/core": "workspace:*",
"@jsonforms/examples": "workspace:*",
"@jsonforms/react": "workspace:*",
"@mui/material": "~5.13.0",
"@mui/material": "^7.3.0",
"@types/react-highlight": "^0.12.5",
"@types/react-tabs": "^2.3.3",
"highlight.js": "^11.3.1",
Expand Down
14 changes: 7 additions & 7 deletions packages/material-renderers/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,23 +84,23 @@
"lodash": "^4.17.21"
},
"peerDependencies": {
"@emotion/react": "^11.4.1",
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@jsonforms/core": "3.7.0-alpha.0",
"@jsonforms/react": "3.7.0-alpha.0",
"@mui/icons-material": "^5.11.16 || ^6.0.0",
"@mui/material": "^5.13.0 || ^6.0.0",
"@mui/x-date-pickers": "^6.0.0 || ^7.0.0",
"@mui/icons-material": "^7.0.0",
"@mui/material": "^7.0.0",
"@mui/x-date-pickers": "^7.28.0",
"react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},
"devDependencies": {
"@emotion/react": "^11.5.0",
"@emotion/styled": "^11.3.0",
"@jsonforms/core": "workspace:*",
"@jsonforms/react": "workspace:*",
"@mui/icons-material": "^5.11.16",
"@mui/material": "~5.13.0",
"@mui/x-date-pickers": "^7.7.1",
"@mui/icons-material": "^7.3.0",
"@mui/material": "^7.3.0",
"@mui/x-date-pickers": "^7.29.4",
"@rollup/plugin-commonjs": "^23.0.3",
"@rollup/plugin-json": "^5.0.2",
"@rollup/plugin-node-resolve": "^15.0.1",
Expand Down
34 changes: 0 additions & 34 deletions packages/material-renderers/rollup.example.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,39 +6,6 @@ import copy from 'rollup-plugin-copy';
import css from 'rollup-plugin-import-css';
import typescript from 'rollup-plugin-typescript2';

// This little plugin mitigates Rollup's lack of support for pre-built CommonJS dependencies with
// default exports.
// For mor details see here: https://github.com/eclipsesource/jsonforms/pull/2139
function cjsCompatPlugin() {
return {
name: 'cjs-compat-plugin',
transform(code, id) {
// ignore all packages which are not @mui/utils
if (
!/@mui\/utils.*.js$/.test(id) ||
id.includes('@mui/utils/node_modules')
) {
return code;
}

// try to extract the commonjs namespace variable
const moduleName = code.match(
/(?<module>[a-zA-Z0-9_$]*).default = _default;/
)?.groups?.module;

if (!moduleName || !code.includes(`return ${moduleName};`)) {
return code;
}

// return default export instead of namespace
return code.replace(
`return ${moduleName}`,
`return ${moduleName}.default`
);
},
};
}

/**
* @type {import('rollup').RollupOptions}
*/
Expand Down Expand Up @@ -72,7 +39,6 @@ const config = {
},
},
}),
cjsCompatPlugin(),
copy({
targets: [
{
Expand Down
4 changes: 2 additions & 2 deletions packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ import {
ListItemText,
Tooltip,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import { Delete } from '@mui/icons-material';
import React from 'react';

export const ListWithDetailMasterItem = ({
Expand Down Expand Up @@ -65,7 +65,7 @@ export const ListWithDetailMasterItem = ({
onClick={removeItem(path, index)}
size='large'
>
<DeleteIcon />
<Delete />
</IconButton>
</Tooltip>
</ListItemSecondaryAction>
Expand Down
4 changes: 2 additions & 2 deletions packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -135,7 +135,7 @@ export const MaterialListWithDetailRenderer = ({
disableAdd={doDisableAdd}
/>
<Grid container direction='row' spacing={2}>
<Grid item xs={3}>
<Grid size={3}>
<List>
{data > 0 ? (
map(range(data), (index) => (
Expand All @@ -159,7 +159,7 @@ export const MaterialListWithDetailRenderer = ({
)}
</List>
</Grid>
<Grid item xs>
<Grid size='grow'>
{selectedIndex !== undefined ? (
<JsonFormsDispatch
renderers={renderers}
Expand Down
12 changes: 5 additions & 7 deletions packages/material-renderers/src/complex/MaterialTableControl.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,9 +57,7 @@ import {
encode,
ArrayTranslations,
} from '@jsonforms/core';
import DeleteIcon from '@mui/icons-material/Delete';
import ArrowDownward from '@mui/icons-material/ArrowDownward';
import ArrowUpward from '@mui/icons-material/ArrowUpward';
import { Delete, ArrowDownward, ArrowUpward } from '@mui/icons-material';

import { WithDeleteDialogSupport } from './DeleteDialog';
import NoBorderTableCell from './NoBorderTableCell';
Expand Down Expand Up @@ -317,7 +315,7 @@ const NonEmptyRowComponent = ({
>
{showSortButtons ? (
<Fragment>
<Grid item>
<Grid>
<Tooltip
id='tooltip-up'
title={translations.up}
Expand All @@ -334,7 +332,7 @@ const NonEmptyRowComponent = ({
</IconButton>
</Tooltip>
</Grid>
<Grid item>
<Grid>
<Tooltip
id='tooltip-down'
title={translations.down}
Expand All @@ -354,7 +352,7 @@ const NonEmptyRowComponent = ({
</Fragment>
) : null}
{!disableRemove ? (
<Grid item>
<Grid>
<Tooltip
id='tooltip-remove'
title={translations.removeTooltip}
Expand All @@ -365,7 +363,7 @@ const NonEmptyRowComponent = ({
onClick={() => openDeleteDialog(childPath, rowIndex)}
size='large'
>
<DeleteIcon />
<Delete />
</IconButton>
</Tooltip>
</Grid>
Expand Down
3 changes: 1 addition & 2 deletions packages/material-renderers/src/complex/NoBorderTableCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,7 @@
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
import { styled } from '@mui/material/styles';
import { TableCell } from '@mui/material';
import { styled, TableCell } from '@mui/material';
import React from 'react';

const StyledTableCell = styled(TableCell)({
Expand Down
10 changes: 5 additions & 5 deletions packages/material-renderers/src/complex/TableToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ import {
FormHelperText,
Stack,
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import { Add } from '@mui/icons-material';
import ValidationIcon from './ValidationIcon';
import NoBorderTableCell from './NoBorderTableCell';

Expand Down Expand Up @@ -85,12 +85,12 @@ const TableToolbar = React.memo(function TableToolbar({
alignItems={'center'}
spacing={2}
>
<Grid item>
<Grid>
<Typography variant={'h6'}>{label}</Typography>
</Grid>
<Grid item>
<Grid>
{errors.length !== 0 && (
<Grid item>
<Grid>
<ValidationIcon
id='tooltip-validation'
errorMessages={errors}
Expand All @@ -114,7 +114,7 @@ const TableToolbar = React.memo(function TableToolbar({
onClick={addItem(path, createDefaultValue(schema, rootSchema))}
size='large'
>
<AddIcon />
<Add />
</IconButton>
</Tooltip>
</NoBorderTableCell>
Expand Down
4 changes: 2 additions & 2 deletions packages/material-renderers/src/complex/ValidationIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
*/
import React from 'react';

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

const StyledBadge = styled(Badge)(({ theme }: any) => ({
Expand All @@ -40,7 +40,7 @@ const ValidationIcon: React.FC<ValidationProps> = ({ errorMessages, id }) => {
return (
<Tooltip id={id} title={errorMessages}>
<StyledBadge badgeContent={errorMessages.split('\n').length}>
<ErrorOutlineIcon color='inherit' />
<ErrorOutline color='inherit' />
</StyledBadge>
</Tooltip>
);
Expand Down
18 changes: 9 additions & 9 deletions packages/material-renderers/src/layouts/ArrayToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
Tooltip,
Typography,
} from '@mui/material';
import AddIcon from '@mui/icons-material/Add';
import { Add } from '@mui/icons-material';
import React from 'react';
import ValidationIcon from '../complex/ValidationIcon';
import { ArrayTranslations } from '@jsonforms/core';
Expand Down Expand Up @@ -35,21 +35,21 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
}: ArrayLayoutToolbarProps) {
return (
<Toolbar disableGutters={true}>
<Stack>
<Stack width='100%'>
<Grid container alignItems='center' justifyContent='space-between'>
<Grid item>
<Grid>
<Grid
container
justifyContent={'flex-start'}
alignItems={'center'}
spacing={2}
>
<Grid item>
<Grid>
<Typography variant={'h6'}>{label}</Typography>
</Grid>
<Grid item>
<Grid>
{errors.length !== 0 && (
<Grid item>
<Grid>
<ValidationIcon
id='tooltip-validation'
errorMessages={errors}
Expand All @@ -60,9 +60,9 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
</Grid>
</Grid>
{enabled && !disableAdd && (
<Grid item>
<Grid>
<Grid container>
<Grid item>
<Grid>
<Tooltip
id='tooltip-add'
title={translations.addTooltip}
Expand All @@ -73,7 +73,7 @@ export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
onClick={addItem(path, createDefault())}
size='large'
>
<AddIcon />
<Add />
</IconButton>
</Tooltip>
</Grid>
Expand Down
32 changes: 17 additions & 15 deletions packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,12 @@ import {
IconButton,
Tooltip,
} from '@mui/material';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import ArrowUpward from '@mui/icons-material/ArrowUpward';
import ArrowDownward from '@mui/icons-material/ArrowDownward';
import DeleteIcon from '@mui/icons-material/Delete';
import {
ArrowUpward,
ArrowDownward,
Delete,
ExpandMore,
} from '@mui/icons-material';

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

Expand Down Expand Up @@ -145,21 +147,21 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
expanded={expanded}
onChange={handleExpansion(childPath)}
>
<AccordionSummary expandIcon={<ExpandMoreIcon />}>
<Grid container alignItems={'center'}>
<Grid item xs={7} md={9}>
<AccordionSummary expandIcon={<ExpandMore />}>
<Grid container sx={{ width: '100%' }} alignItems={'center'}>
<Grid size={{ xs: 7, md: 9 }}>
<Grid container alignItems={'center'}>
<Grid item xs={2} md={1}>
<Grid size={{ xs: 2, md: 1 }}>
<Avatar aria-label='Index'>{index + 1}</Avatar>
</Grid>
<Grid item xs={10} md={11}>
<Grid size={{ xs: 10, md: 11 }}>
<span id={labelHtmlId}>{childLabel}</span>
</Grid>
</Grid>
</Grid>
<Grid item xs={5} md={3}>
<Grid size={{ xs: 5, md: 3 }}>
<Grid container justifyContent='flex-end'>
<Grid item>
<Grid>
<Grid
container
direction='row'
Expand All @@ -168,7 +170,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
>
{showSortButtons && enabled ? (
<Fragment>
<Grid item>
<Grid>
<Tooltip
id='tooltip-up'
title={translations.up}
Expand All @@ -186,7 +188,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
</IconButton>
</Tooltip>
</Grid>
<Grid item>
<Grid>
<Tooltip
id='tooltip-down'
title={translations.down}
Expand All @@ -209,7 +211,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
''
)}
{enabled && !disableRemove && (
<Grid item>
<Grid>
<Tooltip
id='tooltip-remove'
title={translations.removeTooltip}
Expand All @@ -221,7 +223,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
aria-label={translations.removeAriaLabel}
size='large'
>
<DeleteIcon />
<Delete />
</IconButton>
</Tooltip>
</Grid>
Expand Down
2 changes: 1 addition & 1 deletion packages/material-renderers/src/mui-controls/MuiCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ export const MuiCheckbox = React.memo(function MuiCheckbox(
className={className}
id={id}
disabled={!enabled}
inputProps={inputPropsMerged}
slotProps={{ input: inputPropsMerged }}
/>
);
});
2 changes: 1 addition & 1 deletion packages/material-renderers/src/mui-controls/MuiInputText.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ import {
useTheme,
} from '@mui/material';
import merge from 'lodash/merge';
import Close from '@mui/icons-material/Close';
import { Close } from '@mui/icons-material';
import {
JsonFormsTheme,
WithInputProps,
Expand Down
Loading
Loading