WIP: Support MUI X date pickers v8 for react material renderers

- 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

WIP/IN PROGRESS:
- time and datetime pickers no longer autoclose after selecting the smallest unit
- time and datetime picker require handling onChange in addition to onAccept. Otherwise, the value in the open picker is not updated. This was added here but triggers more data updates than before.

Author: lucas-koehler

packages/material-renderers/package.json

@@ -90,7 +90,7 @@
     "@jsonforms/react": "3.7.0-alpha.0",
     "@mui/icons-material": "^7.0.0",
     "@mui/material": "^7.0.0",
-    "@mui/x-date-pickers": "^7.28.0",
+    "@mui/x-date-pickers": "^8.0.0",
     "react": "^16.12.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
@@ -100,7 +100,7 @@
     "@jsonforms/react": "workspace:*",
     "@mui/icons-material": "^7.3.0",
     "@mui/material": "^7.3.0",
-    "@mui/x-date-pickers": "^7.29.4",
+    "@mui/x-date-pickers": "^8.9.2",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",

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

@@ -41,10 +41,12 @@ import {
   createOnChangeHandler,
   getData,
   useFocus,
+  useInputVariant,
 } from '../util';
 
 export const MaterialDateControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
+  const inputVariant = useInputVariant();
   const {
     description,
     id,
@@ -100,7 +102,7 @@ export const MaterialDateControl = (props: ControlProps) => {
         updateChild,
         onBlur
       ),
-    [path, handleChange, format, saveFormat, updateChild]
+    [path, handleChange, format, saveFormat, updateChild, onBlur]
   );
   const value = getData(data, saveFormat);
 
@@ -122,22 +124,23 @@ export const MaterialDateControl = (props: ControlProps) => {
         views={views}
         disabled={!enabled}
         slotProps={{
-          actionBar: ({ wrapperVariant }) => ({
+          actionBar: ({ pickerVariant }) => ({
             actions:
-              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+              pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
           }),
           textField: {
             id: id + '-input',
             required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-            autoFocus: appliedUiSchemaOptions.focus,
             error: !isValid,
             fullWidth: !appliedUiSchemaOptions.trim,
+            variant: inputVariant,
             inputProps: {
+              autoFocus: appliedUiSchemaOptions.focus,
               type: 'text',
+              onFocus: onFocus,
+              onBlur: onBlurHandler,
             },
             InputLabelProps: data ? { shrink: true } : undefined,
-            onFocus: onFocus,
-            onBlur: onBlurHandler,
           },
         }}
       />

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

@@ -41,10 +41,12 @@ import {
   createOnChangeHandler,
   getData,
   useFocus,
+  useInputVariant,
 } from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
+  const inputVariant = useInputVariant();
   const {
     id,
     description,
@@ -124,27 +126,29 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
         label={label}
         value={value}
         onAccept={onChange}
+        onChange={onChange}
         format={format}
         ampm={!!appliedUiSchemaOptions.ampm}
         views={views}
         disabled={!enabled}
         slotProps={{
-          actionBar: ({ wrapperVariant }) => ({
+          actionBar: ({ pickerVariant }) => ({
             actions:
-              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+              pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
           }),
           textField: {
             id: id + '-input',
             required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-            autoFocus: appliedUiSchemaOptions.focus,
             error: !isValid,
             fullWidth: !appliedUiSchemaOptions.trim,
+            variant: inputVariant,
             inputProps: {
+              autoFocus: appliedUiSchemaOptions.focus,
               type: 'text',
+              onFocus: onFocus,
+              onBlur: onBlurHandler,
             },
             InputLabelProps: data ? { shrink: true } : undefined,
-            onFocus: onFocus,
-            onBlur: onBlurHandler,
           },
         }}
       />

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

@@ -41,10 +41,12 @@ import {
   createOnChangeHandler,
   getData,
   useFocus,
+  useInputVariant,
 } from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
+  const inputVariant = useInputVariant();
   const {
     id,
     description,
@@ -118,27 +120,29 @@ export const MaterialTimeControl = (props: ControlProps) => {
         label={label}
         value={value}
         onAccept={onChange}
+        onChange={onChange}
         format={format}
         ampm={!!appliedUiSchemaOptions.ampm}
         views={views}
         disabled={!enabled}
         slotProps={{
-          actionBar: ({ wrapperVariant }) => ({
+          actionBar: ({ pickerVariant }) => ({
             actions:
-              wrapperVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+              pickerVariant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
           }),
           textField: {
             id: id + '-input',
             required: required && !appliedUiSchemaOptions.hideRequiredAsterisk,
-            autoFocus: appliedUiSchemaOptions.focus,
             error: !isValid,
             fullWidth: !appliedUiSchemaOptions.trim,
+            variant: inputVariant,
             inputProps: {
+              autoFocus: appliedUiSchemaOptions.focus,
               type: 'text',
+              onBlur: onBlurHandler,
+              onFocus: onFocus,
             },
             InputLabelProps: data ? { shrink: true } : undefined,
-            onFocus: onFocus,
-            onBlur: onBlurHandler,
           },
         }}
       />