Skip to content

Commit 512121e

Browse files
lucas-koehlerlucas-koehler
committed
react-material: Update to MUI v9 and MUI X Date Pickers v9
- Bump @mui/material and @mui/icons-material from ^7.0.0 to ^9.0.0 - Bump @mui/x-date-pickers from ^8.0.0 to ^9.0.0 - Migrate deprecated TextField props to slotProps API: InputLabelProps → slotProps.inputLabel, inputProps → slotProps.htmlInput - Migrate Autocomplete renderInput to use v9 params.slotProps structure instead of removed params.InputProps/inputProps - Migrate date/time/datetime picker slotProps.textField to use nested slotProps for PickersTextField (v9 accessible field DOM) - Remove createOnBlurHandler usage from date/time/datetime controls because v9 accessible field structure no longer provides input values via blur events; rely on onChange/onAccept instead - Move Grid system props (justifyContent, alignItems) to sx, removed as direct props in MUI v9 - Move Grid direction='column' to sx={{ flexDirection: 'column' }}, 'column' removed from Grid direction in v9 - Move Stack width prop to sx, removed as direct prop in v9 - Rename ErrorOutline icon to ErrorOutlined, legacy "Outline" variants removed in @mui/icons-material v9 - Remove legacy @material-ui external pattern from rollup config - Deprecate createOnBlurHandler in datejs.tsx (kept for public API) - Update date/time/datetime tests to use picker component props instead of hidden input DOM manipulation
1 parent b926116 commit 512121e

20 files changed

Lines changed: 214 additions & 261 deletions

‎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": "^7.3.0",
9+
"@mui/material": "^9.0.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: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -95,19 +95,19 @@
9595
"@emotion/styled": "^11.3.0",
9696
"@jsonforms/core": "3.8.0-alpha.0",
9797
"@jsonforms/react": "3.8.0-alpha.0",
98-
"@mui/icons-material": "^7.0.0",
99-
"@mui/material": "^7.0.0",
100-
"@mui/x-date-pickers": "^8.0.0",
98+
"@mui/icons-material": "^9.0.0",
99+
"@mui/material": "^9.0.0",
100+
"@mui/x-date-pickers": "^9.0.0",
101101
"react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
102102
},
103103
"devDependencies": {
104104
"@emotion/react": "^11.5.0",
105105
"@emotion/styled": "^11.3.0",
106106
"@jsonforms/core": "workspace:*",
107107
"@jsonforms/react": "workspace:*",
108-
"@mui/icons-material": "^7.3.0",
109-
"@mui/material": "^7.3.0",
110-
"@mui/x-date-pickers": "^8.11.3",
108+
"@mui/icons-material": "^9.0.0",
109+
"@mui/material": "^9.0.0",
110+
"@mui/x-date-pickers": "^9.0.2",
111111
"@rollup/plugin-commonjs": "^23.0.3",
112112
"@rollup/plugin-json": "^5.0.2",
113113
"@rollup/plugin-node-resolve": "^15.0.1",

‎packages/material-renderers/rollup.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ const baseConfig = {
1111
...Object.keys(packageJson.peerDependencies),
1212
'react',
1313
/^lodash\/.*/,
14-
/^@material-ui\/.*/,
1514
/^dayjs\/.*/,
1615
],
1716
};

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -310,8 +310,7 @@ const NonEmptyRowComponent = ({
310310
<Grid
311311
container
312312
direction='row'
313-
justifyContent='flex-end'
314-
alignItems='center'
313+
sx={{ justifyContent: 'flex-end', alignItems: 'center' }}
315314
>
316315
{showSortButtons ? (
317316
<Fragment>

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,8 +81,7 @@ const TableToolbar = React.memo(function TableToolbar({
8181
<Stack>
8282
<Grid
8383
container
84-
justifyContent={'flex-start'}
85-
alignItems={'center'}
84+
sx={{ justifyContent: 'flex-start', alignItems: 'center' }}
8685
spacing={2}
8786
>
8887
<Grid>

‎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 { ErrorOutline } from '@mui/icons-material';
27+
import { ErrorOutlined } 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-
<ErrorOutline color='inherit' />
43+
<ErrorOutlined color='inherit' />
4444
</StyledBadge>
4545
</Tooltip>
4646
);

‎packages/material-renderers/src/controls/MaterialDateControl.tsx‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
THE SOFTWARE.
2424
*/
2525
import merge from 'lodash/merge';
26-
import React, { useCallback, useMemo, useState } from 'react';
26+
import React, { useMemo, useState } from 'react';
2727
import {
2828
ControlProps,
2929
defaultDateFormat,
@@ -37,7 +37,6 @@ import { FormHelperText } from '@mui/material';
3737
import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
3838
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
3939
import {
40-
createOnBlurHandler,
4140
createOnChangeHandler,
4241
getData,
4342
useFocus,
@@ -70,7 +69,6 @@ export const MaterialDateControl = (props: ControlProps) => {
7069
appliedUiSchemaOptions.showUnfocusedDescription
7170
);
7271

73-
const [key, setKey] = useState<number>(0);
7472
const [open, setOpen] = useState<boolean>(false);
7573

7674
const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
@@ -86,25 +84,11 @@ export const MaterialDateControl = (props: ControlProps) => {
8684
: null;
8785
const secondFormHelperText = showDescription && !isValid ? errors : null;
8886

89-
const updateChild = useCallback(() => setKey((key) => key + 1), []);
90-
9187
const onChange = useMemo(
9288
() => createOnChangeHandler(path, handleChange, saveFormat),
9389
[path, handleChange, saveFormat]
9490
);
9591

96-
const onBlurHandler = useMemo(
97-
() =>
98-
createOnBlurHandler(
99-
path,
100-
handleChange,
101-
format,
102-
saveFormat,
103-
updateChild,
104-
onBlur
105-
),
106-
[path, handleChange, format, saveFormat, updateChild, onBlur]
107-
);
10892
const value = getData(data, saveFormat);
10993

11094
if (!visible) {
@@ -117,10 +101,10 @@ export const MaterialDateControl = (props: ControlProps) => {
117101
open={open}
118102
onOpen={() => setOpen(true)}
119103
onClose={() => setOpen(false)}
120-
key={key}
121104
label={label}
122105
value={value}
123106
onAccept={onChange}
107+
onChange={onChange}
124108
format={format}
125109
views={views}
126110
disabled={!enabled}
@@ -136,13 +120,13 @@ export const MaterialDateControl = (props: ControlProps) => {
136120
error: !isValid,
137121
fullWidth: !appliedUiSchemaOptions.trim,
138122
variant: inputVariant,
139-
inputProps: {
140-
autoFocus: appliedUiSchemaOptions.focus,
141-
type: 'text',
142-
onFocus: onFocus,
143-
onBlur: onBlurHandler,
123+
autoFocus: appliedUiSchemaOptions.focus,
124+
onFocus: onFocus,
125+
onBlur: onBlur,
126+
slotProps: {
127+
htmlInput: { type: 'text' },
128+
inputLabel: data ? { shrink: true } : undefined,
144129
},
145-
InputLabelProps: data ? { shrink: true } : undefined,
146130
},
147131
}}
148132
/>

‎packages/material-renderers/src/controls/MaterialDateTimeControl.tsx‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
2323
THE SOFTWARE.
2424
*/
25-
import React, { useCallback, useMemo, useState } from 'react';
25+
import React, { useMemo, useState } from 'react';
2626
import merge from 'lodash/merge';
2727
import {
2828
ControlProps,
@@ -37,7 +37,6 @@ import { FormHelperText } from '@mui/material';
3737
import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
3838
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
3939
import {
40-
createOnBlurHandler,
4140
createOnChangeHandler,
4241
getData,
4342
useFocus,
@@ -75,7 +74,6 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
7574
const saveFormat =
7675
appliedUiSchemaOptions.dateTimeSaveFormat ?? defaultDateTimeFormat;
7776

78-
const [key, setKey] = useState<number>(0);
7977
const [open, setOpen] = useState<boolean>(false);
8078

8179
const views = appliedUiSchemaOptions.views ?? [
@@ -93,25 +91,11 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
9391
: null;
9492
const secondFormHelperText = showDescription && !isValid ? errors : null;
9593

96-
const updateChild = useCallback(() => setKey((key) => key + 1), []);
97-
9894
const onChange = useMemo(
9995
() => createOnChangeHandler(path, handleChange, saveFormat),
10096
[path, handleChange, saveFormat]
10197
);
10298

103-
const onBlurHandler = useMemo(
104-
() =>
105-
createOnBlurHandler(
106-
path,
107-
handleChange,
108-
format,
109-
saveFormat,
110-
updateChild,
111-
onBlur
112-
),
113-
[path, handleChange, format, saveFormat, updateChild]
114-
);
11599
const value = getData(data, saveFormat);
116100

117101
if (!visible) {
@@ -123,7 +107,6 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
123107
open={open}
124108
onOpen={() => setOpen(true)}
125109
onClose={() => setOpen(false)}
126-
key={key}
127110
label={label}
128111
value={value}
129112
onAccept={onChange}
@@ -144,13 +127,13 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
144127
error: !isValid,
145128
fullWidth: !appliedUiSchemaOptions.trim,
146129
variant: inputVariant,
147-
inputProps: {
148-
autoFocus: appliedUiSchemaOptions.focus,
149-
type: 'text',
150-
onFocus: onFocus,
151-
onBlur: onBlurHandler,
130+
autoFocus: appliedUiSchemaOptions.focus,
131+
onFocus: onFocus,
132+
onBlur: onBlur,
133+
slotProps: {
134+
htmlInput: { type: 'text' },
135+
inputLabel: data ? { shrink: true } : undefined,
152136
},
153-
InputLabelProps: data ? { shrink: true } : undefined,
154137
},
155138
}}
156139
/>

‎packages/material-renderers/src/controls/MaterialNativeControl.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const MaterialNativeControl = (props: ControlProps) => {
9393
onFocus={onFocus}
9494
onBlur={onBlur}
9595
helperText={!isValid ? errors : showDescription ? description : null}
96-
InputLabelProps={{ shrink: true }}
96+
slotProps={{ inputLabel: { shrink: true } }}
9797
value={inputValue}
9898
onChange={onChange}
9999
/>

‎packages/material-renderers/src/controls/MaterialTimeControl.tsx‎

Lines changed: 7 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
2323
THE SOFTWARE.
2424
*/
25-
import React, { useCallback, useMemo, useState } from 'react';
25+
import React, { useMemo, useState } from 'react';
2626
import merge from 'lodash/merge';
2727
import {
2828
ControlProps,
@@ -37,7 +37,6 @@ import { FormHelperText } from '@mui/material';
3737
import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
3838
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
3939
import {
40-
createOnBlurHandler,
4140
createOnChangeHandler,
4241
getData,
4342
useFocus,
@@ -64,7 +63,6 @@ export const MaterialTimeControl = (props: ControlProps) => {
6463
const appliedUiSchemaOptions = merge({}, config, uischema.options);
6564
const isValid = errors.length === 0;
6665

67-
const [key, setKey] = useState<number>(0);
6866
const [open, setOpen] = useState<boolean>(false);
6967

7068
const showDescription = !isDescriptionHidden(
@@ -87,25 +85,11 @@ export const MaterialTimeControl = (props: ControlProps) => {
8785
: null;
8886
const secondFormHelperText = showDescription && !isValid ? errors : null;
8987

90-
const updateChild = useCallback(() => setKey((key) => key + 1), []);
91-
9288
const onChange = useMemo(
9389
() => createOnChangeHandler(path, handleChange, saveFormat),
9490
[path, handleChange, saveFormat]
9591
);
9692

97-
const onBlurHandler = useMemo(
98-
() =>
99-
createOnBlurHandler(
100-
path,
101-
handleChange,
102-
format,
103-
saveFormat,
104-
updateChild,
105-
onBlur
106-
),
107-
[path, handleChange, format, saveFormat, updateChild]
108-
);
10993
const value = getData(data, saveFormat);
11094

11195
if (!visible) {
@@ -117,7 +101,6 @@ export const MaterialTimeControl = (props: ControlProps) => {
117101
open={open}
118102
onOpen={() => setOpen(true)}
119103
onClose={() => setOpen(false)}
120-
key={key}
121104
label={label}
122105
value={value}
123106
onAccept={onChange}
@@ -138,13 +121,13 @@ export const MaterialTimeControl = (props: ControlProps) => {
138121
error: !isValid,
139122
fullWidth: !appliedUiSchemaOptions.trim,
140123
variant: inputVariant,
141-
inputProps: {
142-
autoFocus: appliedUiSchemaOptions.focus,
143-
type: 'text',
144-
onBlur: onBlurHandler,
145-
onFocus: onFocus,
124+
autoFocus: appliedUiSchemaOptions.focus,
125+
onFocus: onFocus,
126+
onBlur: onBlur,
127+
slotProps: {
128+
htmlInput: { type: 'text' },
129+
inputLabel: data ? { shrink: true } : undefined,
146130
},
147-
InputLabelProps: data ? { shrink: true } : undefined,
148131
},
149132
}}
150133
/>

0 commit comments

Comments
 (0)