@jsonforms/material-renderers 3.7.0-alpha.1 → 3.7.0-alpha.3

package/package.json

@@ -1,11 +1,18 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.7.0-alpha.1",
+  "version": "3.7.0-alpha.3",
   "description": "Material Renderer Set for JSON Forms",
-  "repository": "https://github.com/eclipsesource/jsonforms",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/eclipsesource/jsonforms.git",
+    "directory": "packages/material-renderers"
+  },
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
   "homepage": "http://jsonforms.io/",
   "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
   "directories": {
     "example": "example",
     "src": "src",
@@ -73,11 +80,11 @@
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.7.0-alpha.1",
-    "@jsonforms/react": "3.7.0-alpha.1",
+    "@jsonforms/core": "3.7.0-alpha.3",
+    "@jsonforms/react": "3.7.0-alpha.3",
     "@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": {
@@ -85,7 +92,7 @@
     "@emotion/styled": "^11.3.0",
     "@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",
@@ -126,8 +133,8 @@
     "webpack": "^5.78.0",
     "webpack-cli": "^5.1.4",
     "webpack-dev-server": "^4.15.1",
-    "@jsonforms/core": "3.7.0-alpha.1",
-    "@jsonforms/react": "3.7.0-alpha.1"
+    "@jsonforms/core": "3.7.0-alpha.3",
+    "@jsonforms/react": "3.7.0-alpha.3"
   },
   "scripts": {
     "build": "rollup -c rollup.config.js",

package/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,
           },
         }}
       />

package/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,
           },
         }}
       />

package/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,
           },
         }}
       />

package/src/layouts/MaterialCategorizationLayout.tsx

@@ -96,6 +96,7 @@ export const MaterialCategorizationLayoutRenderer = (
     enabled,
     selected,
     onChange,
+    config,
     ajv,
     t,
   } = props;
@@ -106,9 +107,9 @@ export const MaterialCategorizationLayoutRenderer = (
   const categories = useMemo(
     () =>
       categorization.elements.filter((category: Category) =>
-        isVisible(category, data, undefined, ajv)
+        isVisible(category, data, undefined, ajv, config)
       ),
-    [categorization, data, ajv]
+    [categorization, data, ajv, config]
   );
 
   if (categorization !== previousCategorization) {

package/src/layouts/MaterialCategorizationStepperLayout.tsx

@@ -107,9 +107,9 @@ export const MaterialCategorizationStepperLayoutRenderer = (
   const categories = useMemo(
     () =>
       categorization.elements.filter((category: Category) =>
-        isVisible(category, data, undefined, ajv)
+        isVisible(category, data, undefined, ajv, config)
       ),
-    [categorization, data, ajv]
+    [categorization, data, ajv, config]
   );
   const childProps: MaterialLayoutRendererProps = {
     elements: categories[activeCategory].elements,