Skip to content

Commit 5b2b2e7

Browse files
lucas-koehlerlucas-koehler
committed
react-material: Update MUI X date pickers from v7 to v8
- Update dev and peer dependency of `@mui/x-date-pickers` from v7 to v8. - Adapt input variant handling for picker text fields - Adapt picker variant handling - Adapt textfield input property handling - Fix pickers to still autoclose on selecting the smallest unit. - Make autoclose configurable via uischema option `closeOnSelect` NOTE: The pickers needed to be updated to handle onChange in addition to onAccept. Otherwise, the value in the open picker is not updated. This results in data updates after each date/time component selection (e.g. hours).
1 parent 016f1df commit 5b2b2e7

File tree

5 files changed

+106
-31
lines changed

5 files changed

+106
-31
lines changed

‎packages/material-renderers/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
"@jsonforms/react": "3.7.0-alpha.1",
9191
"@mui/icons-material": "^7.0.0",
9292
"@mui/material": "^7.0.0",
93-
"@mui/x-date-pickers": "^7.28.0",
93+
"@mui/x-date-pickers": "^8.0.0",
9494
"react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
9595
},
9696
"devDependencies": {
@@ -100,7 +100,7 @@
100100
"@jsonforms/react": "workspace:*",
101101
"@mui/icons-material": "^7.3.0",
102102
"@mui/material": "^7.3.0",
103-
"@mui/x-date-pickers": "^7.29.4",
103+
"@mui/x-date-pickers": "^8.11.3",
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/controls/MaterialDateControl.tsx‎

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,12 @@ import {
4141
createOnChangeHandler,
4242
getData,
4343
useFocus,
44+
useInputVariant,
4445
} from '../util';
4546

4647
export const MaterialDateControl = (props: ControlProps) => {
4748
const [focused, onFocus, onBlur] = useFocus();
49+
const inputVariant = useInputVariant();
4850
const {
4951
description,
5052
id,
@@ -75,6 +77,7 @@ export const MaterialDateControl = (props: ControlProps) => {
7577
const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
7678

7779
const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
80+
const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
7881

7982
const firstFormHelperText = showDescription
8083
? description
@@ -100,7 +103,7 @@ export const MaterialDateControl = (props: ControlProps) => {
100103
updateChild,
101104
onBlur
102105
),
103-
[path, handleChange, format, saveFormat, updateChild]
106+
[path, handleChange, format, saveFormat, updateChild, onBlur]
104107
);
105108
const value = getData(data, saveFormat);
106109

@@ -121,23 +124,25 @@ export const MaterialDateControl = (props: ControlProps) => {
121124
format={format}
122125
views={views}
123126
disabled={!enabled}
127+
closeOnSelect={closeOnSelect}
124128
slotProps={{
125-
actionBar: ({ wrapperVariant }) => ({
129+
actionBar: ({ pickerVariant }) => ({
126130
actions:
127-
wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
131+
pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
128132
}),
129133
textField: {
130134
id: id + '-input',
131135
required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
132-
autoFocus: appliedUiSchemaOptions.focus,
133136
error: !isValid,
134137
fullWidth: !appliedUiSchemaOptions.trim,
138+
variant: inputVariant,
135139
inputProps: {
140+
autoFocus: appliedUiSchemaOptions.focus,
136141
type: 'text',
142+
onFocus: onFocus,
143+
onBlur: onBlurHandler,
137144
},
138145
InputLabelProps: data ? { shrink: true } : undefined,
139-
onFocus: onFocus,
140-
onBlur: onBlurHandler,
141146
},
142147
}}
143148
/>

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,12 @@ import {
4141
createOnChangeHandler,
4242
getData,
4343
useFocus,
44+
useInputVariant,
4445
} from '../util';
4546

4647
export const MaterialDateTimeControl = (props: ControlProps) => {
4748
const [focused, onFocus, onBlur] = useFocus();
49+
const inputVariant = useInputVariant();
4850
const {
4951
id,
5052
description,
@@ -82,6 +84,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
8284
'hours',
8385
'minutes',
8486
];
87+
const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
8588

8689
const firstFormHelperText = showDescription
8790
? description
@@ -124,27 +127,30 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
124127
label={label}
125128
value={value}
126129
onAccept={onChange}
130+
onChange={onChange}
127131
format={format}
128132
ampm={!!appliedUiSchemaOptions.ampm}
129133
views={views}
134+
closeOnSelect={closeOnSelect}
130135
disabled={!enabled}
131136
slotProps={{
132-
actionBar: ({ wrapperVariant }) => ({
137+
actionBar: ({ pickerVariant }) => ({
133138
actions:
134-
wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
139+
pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
135140
}),
136141
textField: {
137142
id: id + '-input',
138143
required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
139-
autoFocus: appliedUiSchemaOptions.focus,
140144
error: !isValid,
141145
fullWidth: !appliedUiSchemaOptions.trim,
146+
variant: inputVariant,
142147
inputProps: {
148+
autoFocus: appliedUiSchemaOptions.focus,
143149
type: 'text',
150+
onFocus: onFocus,
151+
onBlur: onBlurHandler,
144152
},
145153
InputLabelProps: data ? { shrink: true } : undefined,
146-
onFocus: onFocus,
147-
onBlur: onBlurHandler,
148154
},
149155
}}
150156
/>

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

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,10 +41,12 @@ import {
4141
createOnChangeHandler,
4242
getData,
4343
useFocus,
44+
useInputVariant,
4445
} from '../util';
4546

4647
export const MaterialTimeControl = (props: ControlProps) => {
4748
const [focused, onFocus, onBlur] = useFocus();
49+
const inputVariant = useInputVariant();
4850
const {
4951
id,
5052
description,
@@ -76,6 +78,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
7678
const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
7779

7880
const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
81+
const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
7982

8083
const firstFormHelperText = showDescription
8184
? description
@@ -118,27 +121,30 @@ export const MaterialTimeControl = (props: ControlProps) => {
118121
label={label}
119122
value={value}
120123
onAccept={onChange}
124+
onChange={onChange}
121125
format={format}
122126
ampm={!!appliedUiSchemaOptions.ampm}
123127
views={views}
128+
closeOnSelect={closeOnSelect}
124129
disabled={!enabled}
125130
slotProps={{
126-
actionBar: ({ wrapperVariant }) => ({
131+
actionBar: ({ pickerVariant }) => ({
127132
actions:
128-
wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
133+
pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
129134
}),
130135
textField: {
131136
id: id + '-input',
132137
required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
133-
autoFocus: appliedUiSchemaOptions.focus,
134138
error: !isValid,
135139
fullWidth: !appliedUiSchemaOptions.trim,
140+
variant: inputVariant,
136141
inputProps: {
142+
autoFocus: appliedUiSchemaOptions.focus,
137143
type: 'text',
144+
onBlur: onBlurHandler,
145+
onFocus: onFocus,
138146
},
139147
InputLabelProps: data ? { shrink: true } : undefined,
140-
onFocus: onFocus,
141-
onBlur: onBlurHandler,
142148
},
143149
}}
144150
/>

‎pnpm-lock.yaml‎

Lines changed: 71 additions & 13 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)