Merge branch 'master' into lk/ci-trusted-publish

Author: lucas-koehler

packages/material-renderers/package.json

@@ -90,7 +90,7 @@
     "@jsonforms/react": "3.7.0-alpha.1",
     "@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.11.3",
     "@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,
@@ -75,6 +77,7 @@ export const MaterialDateControl = (props: ControlProps) => {
   const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
+  const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
 
   const firstFormHelperText = showDescription
     ? description
@@ -100,7 +103,7 @@ export const MaterialDateControl = (props: ControlProps) => {
         updateChild,
         onBlur
       ),
-    [path, handleChange, format, saveFormat, updateChild]
+    [path, handleChange, format, saveFormat, updateChild, onBlur]
   );
   const value = getData(data, saveFormat);
 
@@ -121,23 +124,25 @@ export const MaterialDateControl = (props: ControlProps) => {
         format={format}
         views={views}
         disabled={!enabled}
+        closeOnSelect={closeOnSelect}
         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,
@@ -82,6 +84,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     'hours',
     'minutes',
   ];
+  const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
 
   const firstFormHelperText = showDescription
     ? description
@@ -124,27 +127,30 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
         label={label}
         value={value}
         onAccept={onChange}
+        onChange={onChange}
         format={format}
         ampm={!!appliedUiSchemaOptions.ampm}
         views={views}
+        closeOnSelect={closeOnSelect}
         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,
@@ -76,6 +78,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
   const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
 
   const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
+  const closeOnSelect = appliedUiSchemaOptions.closeOnSelect ?? true;
 
   const firstFormHelperText = showDescription
     ? description
@@ -118,27 +121,30 @@ export const MaterialTimeControl = (props: ControlProps) => {
         label={label}
         value={value}
         onAccept={onChange}
+        onChange={onChange}
         format={format}
         ampm={!!appliedUiSchemaOptions.ampm}
         views={views}
+        closeOnSelect={closeOnSelect}
         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,
           },
         }}
       />