@jsonforms/material-renderers 3.2.0-beta.0 → 3.2.0-beta.1

package/lib/additional/MaterialListWithDetailRenderer.d.ts

@@ -1,6 +1,6 @@
 import { ArrayLayoutProps, RankedTester } from '@jsonforms/core';
 import React from 'react';
-export declare const MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, }: ArrayLayoutProps) => React.JSX.Element;
+export declare const MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, }: ArrayLayoutProps) => React.JSX.Element;
 export declare const materialListWithDetailTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export default _default;

package/lib/additional/unwrapped.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 export declare const UnwrappedAdditional: {
     MaterialLabelRenderer: ({ text, visible }: import("@jsonforms/core").LabelProps) => import("react").JSX.Element;
-    MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
+    MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
 };

package/lib/complex/TableToolbar.d.ts

@@ -4,6 +4,7 @@ export interface MaterialTableToolbarProps {
     numColumns: number;
     errors: string;
     label: string;
+    description: string;
     path: string;
     uischema: ControlElement;
     schema: JsonSchema;

package/lib/index.d.ts

@@ -38,5 +38,5 @@ export declare const Unwrapped: {
     MaterialObjectRenderer: ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema, }: import("@jsonforms/core").StatePropsOfControlWithDetail) => import("react").JSX.Element;
     MaterialOneOfRenderer: ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data, }: import("@jsonforms/core").CombinatorRendererProps) => import("react").JSX.Element;
     MaterialLabelRenderer: ({ text, visible }: import("@jsonforms/core").LabelProps) => import("react").JSX.Element;
-    MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
+    MaterialListWithDetailRenderer: ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, }: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
 };

package/lib/jsonforms-react-material.cjs.js

@@ -11,22 +11,17 @@ var isEmpty = require('lodash/isEmpty');
 var union = require('lodash/union');
 var startCase = require('lodash/startCase');
 var range = require('lodash/range');
-var DeleteIcon = require('@mui/icons-material/Delete');
-var ArrowDownward = require('@mui/icons-material/ArrowDownward');
-var ArrowUpward = require('@mui/icons-material/ArrowUpward');
+var iconsMaterial = require('@mui/icons-material');
 var styles$1 = require('@mui/material/styles');
-var AddIcon = require('@mui/icons-material/Add');
-var ErrorOutlineIcon = require('@mui/icons-material/ErrorOutline');
 var merge = require('lodash/merge');
 var dayjs = require('dayjs');
 var customParsing = require('dayjs/plugin/customParseFormat');
 var debounce = require('lodash/debounce');
-var Close = require('@mui/icons-material/Close');
 var map = require('lodash/map');
+var AddIcon = require('@mui/icons-material/Add');
 var xDatePickers = require('@mui/x-date-pickers');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
 var get = require('lodash/get');
-var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -36,19 +31,13 @@ var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var union__default = /*#__PURE__*/_interopDefaultLegacy(union);
 var startCase__default = /*#__PURE__*/_interopDefaultLegacy(startCase);
 var range__default = /*#__PURE__*/_interopDefaultLegacy(range);
-var DeleteIcon__default = /*#__PURE__*/_interopDefaultLegacy(DeleteIcon);
-var ArrowDownward__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownward);
-var ArrowUpward__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpward);
-var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
-var ErrorOutlineIcon__default = /*#__PURE__*/_interopDefaultLegacy(ErrorOutlineIcon);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
 var customParsing__default = /*#__PURE__*/_interopDefaultLegacy(customParsing);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
-var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
+var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
-var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -151,7 +140,7 @@ var TabSwitchConfirmDialog = function (_a) {
             React__default["default"].createElement(material.DialogContentText, { id: 'alert-dialog-description' }, "Your data will be cleared if you navigate away from this tab. Do you want to proceed?")),
         React__default["default"].createElement(material.DialogActions, null,
             React__default["default"].createElement(material.Button, { onClick: cancel, color: 'primary' }, "No"),
-            React__default["default"].createElement(material.Button, { onClick: confirm, color: 'primary', autoFocus: true, id: id + "-confirm-yes" }, "Yes"))));
+            React__default["default"].createElement(material.Button, { onClick: confirm, color: 'primary', autoFocus: true, id: "".concat(id, "-confirm-yes") }, "Yes"))));
 };
 
 var MaterialAnyOfRenderer = function (_a) {
@@ -210,7 +199,7 @@ var ValidationIcon = function (_a) {
     var errorMessages = _a.errorMessages, id = _a.id;
     return (React__default["default"].createElement(material.Tooltip, { id: id, title: errorMessages },
         React__default["default"].createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
-            React__default["default"].createElement(ErrorOutlineIcon__default["default"], { color: 'inherit' }))));
+            React__default["default"].createElement(iconsMaterial.ErrorOutline, { color: 'inherit' }))));
 };
 
 var fixedCellSmall = {
@@ -218,18 +207,20 @@ var fixedCellSmall = {
     paddingRight: 0,
 };
 var TableToolbar = React__default["default"].memo(function TableToolbar(_a) {
-    var numColumns = _a.numColumns, errors = _a.errors, label = _a.label, path = _a.path, addItem = _a.addItem, schema = _a.schema, enabled = _a.enabled, translations = _a.translations, rootSchema = _a.rootSchema;
+    var numColumns = _a.numColumns, errors = _a.errors, label = _a.label, description = _a.description, path = _a.path, addItem = _a.addItem, schema = _a.schema, enabled = _a.enabled, translations = _a.translations, rootSchema = _a.rootSchema;
     return (React__default["default"].createElement(material.TableRow, null,
         React__default["default"].createElement(NoBorderTableCell, { colSpan: numColumns },
-            React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
-                React__default["default"].createElement(material.Grid, { item: true },
-                    React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
-                React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
-                    React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
+            React__default["default"].createElement(material.Stack, null,
+                React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
+                    React__default["default"].createElement(material.Grid, { item: true },
+                        React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
+                    React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
+                        React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
+                description && React__default["default"].createElement(material.FormHelperText, null, description))),
         enabled ? (React__default["default"].createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
             React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
                 React__default["default"].createElement(material.IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, core.createDefaultValue(schema, rootSchema)), size: 'large' },
-                    React__default["default"].createElement(AddIcon__default["default"], null))))) : null));
+                    React__default["default"].createElement(iconsMaterial.Add, null))))) : null));
 });
 
 var styles = {
@@ -316,7 +307,7 @@ var controlWithoutLabel = function (scope) { return ({
 var NonEmptyCellComponent = React__default["default"].memo(function NonEmptyCellComponent(_a) {
     var path = _a.path, propName = _a.propName, schema = _a.schema, rootSchema = _a.rootSchema, errors = _a.errors, enabled = _a.enabled, renderers = _a.renderers, cells = _a.cells, isValid = _a.isValid;
     return (React__default["default"].createElement(NoBorderTableCell, null,
-        schema.properties ? (React__default["default"].createElement(react.DispatchCell, { schema: core.Resolve.schema(schema, "#/properties/" + core.encode(propName), rootSchema), uischema: controlWithoutLabel("#/properties/" + core.encode(propName)), path: path, enabled: enabled, renderers: renderers, cells: cells })) : (React__default["default"].createElement(react.DispatchCell, { schema: schema, uischema: controlWithoutLabel('#'), path: path, enabled: enabled, renderers: renderers, cells: cells })),
+        schema.properties ? (React__default["default"].createElement(react.DispatchCell, { schema: core.Resolve.schema(schema, "#/properties/".concat(core.encode(propName)), rootSchema), uischema: controlWithoutLabel("#/properties/".concat(core.encode(propName))), path: path, enabled: enabled, renderers: renderers, cells: cells })) : (React__default["default"].createElement(react.DispatchCell, { schema: schema, uischema: controlWithoutLabel('#'), path: path, enabled: enabled, renderers: renderers, cells: cells })),
         React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid && errors)));
 });
 var NonEmptyCell = function (ownProps) {
@@ -336,13 +327,13 @@ var NonEmptyRowComponent = function (_a) {
                 showSortButtons ? (React__default["default"].createElement(React.Fragment, null,
                     React__default["default"].createElement(material.Grid, { item: true },
                         React__default["default"].createElement(material.IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
-                            React__default["default"].createElement(ArrowUpward__default["default"], null))),
+                            React__default["default"].createElement(iconsMaterial.ArrowUpward, null))),
                     React__default["default"].createElement(material.Grid, { item: true },
                         React__default["default"].createElement(material.IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
-                            React__default["default"].createElement(ArrowDownward__default["default"], null))))) : null,
+                            React__default["default"].createElement(iconsMaterial.ArrowDownward, null))))) : null,
                 React__default["default"].createElement(material.Grid, { item: true },
                     React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: function () { return openDeleteDialog(childPath, rowIndex); }, size: 'large' },
-                        React__default["default"].createElement(DeleteIcon__default["default"], null)))))) : null));
+                        React__default["default"].createElement(iconsMaterial.Delete, null)))))) : null));
 };
 var NonEmptyRow = React__default["default"].memo(NonEmptyRowComponent);
 var TableRows = function (_a) {
@@ -353,7 +344,7 @@ var TableRows = function (_a) {
     }
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     return (React__default["default"].createElement(React__default["default"].Fragment, null, range__default["default"](data).map(function (index) {
-        var childPath = core.Paths.compose(path, "" + index);
+        var childPath = core.Paths.compose(path, "".concat(index));
         return (React__default["default"].createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons ||
                 appliedUiSchemaOptions.showArrayTableSortButtons, enabled: enabled, cells: cells, path: path, translations: translations }));
     })));
@@ -366,7 +357,7 @@ var MaterialTableControl =  (function (_super) {
         return _this;
     }
     MaterialTableControl.prototype.render = function () {
-        var _a = this.props, label = _a.label, path = _a.path, schema = _a.schema, rootSchema = _a.rootSchema, uischema = _a.uischema, errors = _a.errors, openDeleteDialog = _a.openDeleteDialog, visible = _a.visible, enabled = _a.enabled, cells = _a.cells, translations = _a.translations;
+        var _a = this.props, label = _a.label, description = _a.description, path = _a.path, schema = _a.schema, rootSchema = _a.rootSchema, uischema = _a.uischema, errors = _a.errors, openDeleteDialog = _a.openDeleteDialog, visible = _a.visible, enabled = _a.enabled, cells = _a.cells, translations = _a.translations;
         var controlElement = uischema;
         var isObjectSchema = schema.type === 'object';
         var headerCells = isObjectSchema
@@ -375,7 +366,7 @@ var MaterialTableControl =  (function (_super) {
         return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
             React__default["default"].createElement(material.Table, null,
                 React__default["default"].createElement(material.TableHead, null,
-                    React__default["default"].createElement(TableToolbar, { errors: errors, label: label, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations }),
+                    React__default["default"].createElement(TableToolbar, { errors: errors, label: label, description: description, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations }),
                     isObjectSchema && (React__default["default"].createElement(material.TableRow, null,
                         headerCells,
                         enabled ? React__default["default"].createElement(material.TableCell, null) : null))),
@@ -465,15 +456,48 @@ var MuiCheckbox = React__default["default"].memo(function MuiCheckbox(props) {
 
 dayjs__default["default"].extend(customParsing__default["default"]);
 var createOnChangeHandler = function (path, handleChange, saveFormat) {
-    return function (time) {
-        if (!time) {
+    return function (value) {
+        if (!value) {
             handleChange(path, undefined);
-            return;
         }
-        var result = dayjs__default["default"](time).format(saveFormat);
-        handleChange(path, result);
+        else if (value.toString() !== 'Invalid Date') {
+            var formatedDate = formatDate(value, saveFormat);
+            handleChange(path, formatedDate);
+        }
+    };
+};
+var createOnBlurHandler = function (path, handleChange, format, saveFormat, rerenderChild, onBlur) {
+    return function (e) {
+        var date = dayjs__default["default"](e.target.value, format);
+        var formatedDate = formatDate(date, saveFormat);
+        if (formatedDate.toString() === 'Invalid Date') {
+            handleChange(path, undefined);
+            rerenderChild();
+        }
+        else {
+            handleChange(path, formatedDate);
+        }
+        onBlur();
     };
 };
+var formatDate = function (date, saveFormat) {
+    var formatedDate = date.format(saveFormat);
+    var indexOfYear = saveFormat.indexOf('YYYY');
+    if (date.year() < 1000 && indexOfYear !== -1) {
+        var stringUpToYear = formatedDate.slice(0, indexOfYear);
+        var stringFromYear = formatedDate.slice(indexOfYear);
+        if (date.year() >= 100) {
+            formatedDate = [stringUpToYear, 0, stringFromYear].join('');
+        }
+        else if (date.year() >= 10) {
+            formatedDate = [stringUpToYear, 0, 0, stringFromYear].join('');
+        }
+        else if (date.year() >= 1) {
+            formatedDate = [stringUpToYear, 0, 0, 0, stringFromYear].join('');
+        }
+    }
+    return formatedDate;
+};
 var getData = function (data, saveFormat) {
     if (!data) {
         return null;
@@ -486,7 +510,7 @@ var getData = function (data, saveFormat) {
 };
 
 var renderLayoutElements = function (elements, schema, path, enabled, renderers, cells) {
-    return elements.map(function (child, index) { return (React__default["default"].createElement(material.Grid, { item: true, key: path + "-" + index, xs: true },
+    return elements.map(function (child, index) { return (React__default["default"].createElement(material.Grid, { item: true, key: "".concat(path, "-").concat(index), xs: true },
         React__default["default"].createElement(react.JsonFormsDispatch, { uischema: child, schema: schema, path: path, enabled: enabled, renderers: renderers, cells: cells }))); });
 };
 var MaterialLayoutRendererComponent = function (_a) {
@@ -634,7 +658,7 @@ var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
                 right: 0,
             } },
             React__default["default"].createElement(material.IconButton, { "aria-label": 'Clear input field', onClick: onClear, size: 'large' },
-                React__default["default"].createElement(Close__default["default"], { style: closeStyle }))), inputComponent: inputComponent }));
+                React__default["default"].createElement(iconsMaterial.Close, { style: closeStyle }))), inputComponent: inputComponent }));
 });
 
 var MuiInputTime = React__default["default"].memo(function MuiInputTime(props) {
@@ -667,10 +691,10 @@ var MuiToggle = React__default["default"].memo(function MuiToggle(props) {
 
 var MaterialEnumArrayRenderer = function (_a) {
     var schema = _a.schema, visible = _a.visible, errors = _a.errors, path = _a.path, options = _a.options, data = _a.data, addItem = _a.addItem, removeItem = _a.removeItem; _a.handleChange; var otherProps = __rest(_a, ["schema", "visible", "errors", "path", "options", "data", "addItem", "removeItem", "handleChange"]);
-    return (React__default["default"].createElement(material.Hidden, { xlUp: !visible },
+    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(material.FormControl, { component: 'fieldset' },
             React__default["default"].createElement(material.FormGroup, { row: true }, options.map(function (option, index) {
-                var optionPath = core.Paths.compose(path, "" + index);
+                var optionPath = core.Paths.compose(path, "".concat(index));
                 var checkboxValue = (data === null || data === void 0 ? void 0 : data.includes(option.value))
                     ? option.value
                     : undefined;
@@ -766,21 +790,23 @@ var MaterialLabelRenderer = function (_a) {
 var MaterialLabelRenderer$1 = react.withJsonFormsLabelProps(MaterialLabelRenderer);
 
 var ArrayLayoutToolbar = React__default["default"].memo(function ArrayLayoutToolbar(_a) {
-    var label = _a.label, errors = _a.errors, addItem = _a.addItem, path = _a.path, enabled = _a.enabled, createDefault = _a.createDefault, translations = _a.translations;
+    var label = _a.label, description = _a.description, errors = _a.errors, addItem = _a.addItem, path = _a.path, enabled = _a.enabled, createDefault = _a.createDefault, translations = _a.translations;
     return (React__default["default"].createElement(material.Toolbar, { disableGutters: true },
-        React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
-            React__default["default"].createElement(material.Grid, { item: true },
-                React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
-                    React__default["default"].createElement(material.Grid, { item: true },
-                        React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
-                    React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
-                        React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
-            enabled && (React__default["default"].createElement(material.Grid, { item: true },
-                React__default["default"].createElement(material.Grid, { container: true },
-                    React__default["default"].createElement(material.Grid, { item: true },
-                        React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
-                            React__default["default"].createElement(material.IconButton, { "aria-label": translations.addTooltip, onClick: addItem(path, createDefault()), size: 'large' },
-                                React__default["default"].createElement(AddIcon__default["default"], null))))))))));
+        React__default["default"].createElement(material.Stack, null,
+            React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
+                React__default["default"].createElement(material.Grid, { item: true },
+                    React__default["default"].createElement(material.Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
+                        React__default["default"].createElement(material.Grid, { item: true },
+                            React__default["default"].createElement(material.Typography, { variant: 'h6' }, label)),
+                        React__default["default"].createElement(material.Grid, { item: true }, errors.length !== 0 && (React__default["default"].createElement(material.Grid, { item: true },
+                            React__default["default"].createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
+                enabled && (React__default["default"].createElement(material.Grid, { item: true },
+                    React__default["default"].createElement(material.Grid, { container: true },
+                        React__default["default"].createElement(material.Grid, { item: true },
+                            React__default["default"].createElement(material.Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
+                                React__default["default"].createElement(material.IconButton, { "aria-label": translations.addTooltip, onClick: addItem(path, createDefault()), size: 'large' },
+                                    React__default["default"].createElement(AddIcon__default["default"], null)))))))),
+            description && React__default["default"].createElement(material.FormHelperText, null, description))));
 });
 
 var ListWithDetailMasterItem = function (_a) {
@@ -791,12 +817,12 @@ var ListWithDetailMasterItem = function (_a) {
         React__default["default"].createElement(material.ListItemText, { primary: childLabel }),
         enabled && (React__default["default"].createElement(material.ListItemSecondaryAction, null,
             React__default["default"].createElement(material.IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
-                React__default["default"].createElement(DeleteIcon__default["default"], null))))));
+                React__default["default"].createElement(iconsMaterial.Delete, null))))));
 };
 var ListWithDetailMasterItem$1 = react.withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
 
 var MaterialListWithDetailRenderer = function (_a) {
-    var uischemas = _a.uischemas, schema = _a.schema, uischema = _a.uischema, path = _a.path, enabled = _a.enabled, errors = _a.errors, visible = _a.visible, label = _a.label, required = _a.required, removeItems = _a.removeItems, addItem = _a.addItem, data = _a.data, renderers = _a.renderers, cells = _a.cells, config = _a.config, rootSchema = _a.rootSchema, translations = _a.translations;
+    var uischemas = _a.uischemas, schema = _a.schema, uischema = _a.uischema, path = _a.path, enabled = _a.enabled, errors = _a.errors, visible = _a.visible, label = _a.label, required = _a.required, removeItems = _a.removeItems, addItem = _a.addItem, data = _a.data, renderers = _a.renderers, cells = _a.cells, config = _a.config, rootSchema = _a.rootSchema, translations = _a.translations, description = _a.description;
     var _b = React.useState(undefined), selectedIndex = _b[0], setSelectedIndex = _b[1];
     var handleRemoveItem = React.useCallback(function (p, value) { return function () {
         removeItems(p, [value])();
@@ -817,11 +843,11 @@ var MaterialListWithDetailRenderer = function (_a) {
         setSelectedIndex(undefined);
     }, [schema]);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue }),
+        React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue }),
         React__default["default"].createElement(material.Grid, { container: true, direction: 'row', spacing: 2 },
             React__default["default"].createElement(material.Grid, { item: true, xs: 3 },
                 React__default["default"].createElement(material.List, null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) { return (React__default["default"].createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, translations: translations })); })) : (React__default["default"].createElement("p", null, "No data")))),
-            React__default["default"].createElement(material.Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React__default["default"].createElement(react.JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: core.composePaths(path, "" + selectedIndex) })) : (React__default["default"].createElement(material.Typography, { variant: 'h6' }, translations.noSelection))))));
+            React__default["default"].createElement(material.Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React__default["default"].createElement(react.JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: core.composePaths(path, "".concat(selectedIndex)) })) : (React__default["default"].createElement(material.Typography, { variant: 'h6' }, translations.noSelection))))));
 };
 var materialListWithDetailTester = core.rankWith(4, core.and(core.uiTypeIs('ListWithDetail'), core.isObjectArray));
 var MaterialListWithDetailRenderer$1 = react.withJsonFormsArrayLayoutProps(MaterialListWithDetailRenderer);
@@ -917,9 +943,9 @@ var MaterialBooleanControl = function (_a) {
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
     var descriptionIds = [];
-    var tooltipId = id + "-tip";
-    var helpId1 = id + "-help1";
-    var helpId2 = id + "-help2";
+    var tooltipId = "".concat(id, "-tip");
+    var helpId1 = "".concat(id, "-help1");
+    var helpId2 = "".concat(id, "-help2");
     if (showTooltip) {
         descriptionIds.push(tooltipId);
     }
@@ -932,7 +958,7 @@ var MaterialBooleanControl = function (_a) {
     var ariaDescribedBy = descriptionIds.join(' ');
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(material.Tooltip, { id: tooltipId, title: showTooltip ? description : '' },
-            React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiCheckbox, { id: id + "-input", isValid: isEmpty__default["default"](errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
+            React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiCheckbox, { id: "".concat(id, "-input"), isValid: isEmpty__default["default"](errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
                         'aria-describedby': ariaDescribedBy,
                     } }) })),
         React__default["default"].createElement(material.FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
@@ -958,9 +984,9 @@ var MaterialBooleanToggleControl = function (_a) {
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
     var descriptionIds = [];
-    var tooltipId = id + "-tip";
-    var helpId1 = id + "-help1";
-    var helpId2 = id + "-help2";
+    var tooltipId = "".concat(id, "-tip");
+    var helpId1 = "".concat(id, "-help1");
+    var helpId2 = "".concat(id, "-help2");
     if (showTooltip) {
         descriptionIds.push(tooltipId);
     }
@@ -973,7 +999,7 @@ var MaterialBooleanToggleControl = function (_a) {
     var ariaDescribedBy = descriptionIds.join(' ');
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(material.Tooltip, { id: tooltipId, title: showTooltip ? description : '' },
-            React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiToggle, { id: id + "-input", isValid: isEmpty__default["default"](errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
+            React__default["default"].createElement(material.FormControlLabel, { label: label, id: id, control: React__default["default"].createElement(MuiToggle, { id: "".concat(id, "-input"), isValid: isEmpty__default["default"](errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
                         'aria-describedby': ariaDescribedBy,
                     } }) })),
         React__default["default"].createElement(material.FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
@@ -989,8 +1015,9 @@ var MaterialDateControl = function (props) {
     var isValid = errors.length === 0;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
+    var _e = React.useState(0), key = _e[0], setKey = _e[1];
     var format = (_a = appliedUiSchemaOptions.dateFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD';
-    var saveFormat = (_b = appliedUiSchemaOptions.dateSaveFormat) !== null && _b !== void 0 ? _b : 'YYYY-MM-DD';
+    var saveFormat = (_b = appliedUiSchemaOptions.dateSaveFormat) !== null && _b !== void 0 ? _b : core.defaultDateFormat;
     var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day'];
     var firstFormHelperText = showDescription
         ? description
@@ -998,11 +1025,15 @@ var MaterialDateControl = function (props) {
             ? errors
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
+    var updateChild = React.useCallback(function () { return setKey(function (key) { return key + 1; }); }, []);
     var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
+    var onBlurHandler = React.useMemo(function () {
+        return createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur);
+    }, [path, handleChange, format, saveFormat, updateChild]);
     var value = getData(data, saveFormat);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
-            React__default["default"].createElement(xDatePickers.DatePicker, { label: label, value: value, onChange: onChange, format: format, views: views, disabled: !enabled, slotProps: {
+            React__default["default"].createElement(xDatePickers.DatePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, slotProps: {
                     actionBar: function (_a) {
                         var wrapperVariant = _a.wrapperVariant;
                         return ({
@@ -1022,7 +1053,7 @@ var MaterialDateControl = function (props) {
                         },
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
-                        onBlur: onBlur,
+                        onBlur: onBlurHandler,
                     },
                 } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1039,7 +1070,8 @@ var MaterialDateTimeControl = function (props) {
     var isValid = errors.length === 0;
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     var format = (_a = appliedUiSchemaOptions.dateTimeFormat) !== null && _a !== void 0 ? _a : 'YYYY-MM-DD HH:mm';
-    var saveFormat = (_b = appliedUiSchemaOptions.dateTimeSaveFormat) !== null && _b !== void 0 ? _b : undefined;
+    var saveFormat = (_b = appliedUiSchemaOptions.dateTimeSaveFormat) !== null && _b !== void 0 ? _b : core.defaultDateTimeFormat;
+    var _e = React.useState(0), key = _e[0], setKey = _e[1];
     var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : [
         'year',
         'day',
@@ -1052,11 +1084,15 @@ var MaterialDateTimeControl = function (props) {
             ? errors
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
+    var updateChild = React.useCallback(function () { return setKey(function (key) { return key + 1; }); }, []);
     var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
+    var onBlurHandler = React.useMemo(function () {
+        return createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur);
+    }, [path, handleChange, format, saveFormat, updateChild]);
     var value = getData(data, saveFormat);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
-            React__default["default"].createElement(xDatePickers.DateTimePicker, { label: label, value: value, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
+            React__default["default"].createElement(xDatePickers.DateTimePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
                     actionBar: function (_a) {
                         var wrapperVariant = _a.wrapperVariant;
                         return ({
@@ -1076,7 +1112,7 @@ var MaterialDateTimeControl = function (props) {
                         },
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
-                        onBlur: onBlur,
+                        onBlur: onBlurHandler,
                     },
                 } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1197,9 +1233,10 @@ var MaterialTimeControl = function (props) {
     var id = props.id, description = props.description, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, enabled = props.enabled, required = props.required, path = props.path, handleChange = props.handleChange, data = props.data, config = props.config;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var isValid = errors.length === 0;
+    var _e = React.useState(0), key = _e[0], setKey = _e[1];
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     var format = (_a = appliedUiSchemaOptions.timeFormat) !== null && _a !== void 0 ? _a : 'HH:mm';
-    var saveFormat = (_b = appliedUiSchemaOptions.timeSaveFormat) !== null && _b !== void 0 ? _b : 'HH:mm:ss';
+    var saveFormat = (_b = appliedUiSchemaOptions.timeSaveFormat) !== null && _b !== void 0 ? _b : core.defaultTimeFormat;
     var views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['hours', 'minutes'];
     var firstFormHelperText = showDescription
         ? description
@@ -1207,11 +1244,15 @@ var MaterialTimeControl = function (props) {
             ? errors
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
+    var updateChild = React.useCallback(function () { return setKey(function (key) { return key + 1; }); }, []);
     var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
+    var onBlurHandler = React.useMemo(function () {
+        return createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur);
+    }, [path, handleChange, format, saveFormat, updateChild]);
     var value = getData(data, saveFormat);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
-            React__default["default"].createElement(xDatePickers.TimePicker, { label: label, value: value, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
+            React__default["default"].createElement(xDatePickers.TimePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
                     actionBar: function (_a) {
                         var wrapperVariant = _a.wrapperVariant;
                         return ({
@@ -1231,7 +1272,7 @@ var MaterialTimeControl = function (props) {
                         },
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
-                        onBlur: onBlur,
+                        onBlur: onBlurHandler,
                     },
                 } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1256,7 +1297,7 @@ var ExpandPanelRendererComponent = function (props) {
     var showSortButtons = appliedUiSchemaOptions.showSortButtons ||
         appliedUiSchemaOptions.showArrayLayoutSortButtons;
     return (React__default["default"].createElement(material.Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
-        React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(ExpandMoreIcon__default["default"], null) },
+        React__default["default"].createElement(material.AccordionSummary, { expandIcon: React__default["default"].createElement(iconsMaterial.ExpandMore, null) },
             React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
                 React__default["default"].createElement(material.Grid, { item: true, xs: 7, md: 9 },
                     React__default["default"].createElement(material.Grid, { container: true, alignItems: 'center' },
@@ -1271,13 +1312,13 @@ var ExpandPanelRendererComponent = function (props) {
                                 showSortButtons && enabled ? (React__default["default"].createElement(React.Fragment, null,
                                     React__default["default"].createElement(material.Grid, { item: true },
                                         React__default["default"].createElement(material.IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
-                                            React__default["default"].createElement(ArrowUpward__default["default"], null))),
+                                            React__default["default"].createElement(iconsMaterial.ArrowUpward, null))),
                                     React__default["default"].createElement(material.Grid, { item: true },
                                         React__default["default"].createElement(material.IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
-                                            React__default["default"].createElement(ArrowDownward__default["default"], null))))) : (''),
+                                            React__default["default"].createElement(iconsMaterial.ArrowDownward, null))))) : (''),
                                 enabled && (React__default["default"].createElement(material.Grid, { item: true },
                                     React__default["default"].createElement(material.IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
-                                        React__default["default"].createElement(DeleteIcon__default["default"], null)))))))))),
+                                        React__default["default"].createElement(iconsMaterial.Delete, null)))))))))),
         React__default["default"].createElement(material.AccordionDetails, null,
             React__default["default"].createElement(react.JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
@@ -1319,7 +1360,7 @@ var withContextToExpandPanelProps = function (Component) {
         var ctx = _a.ctx, props = _a.props;
         var dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
         var childLabelProp = props.childLabelProp, schema = props.schema, path = props.path, index = props.index, uischemas = props.uischemas;
-        var childPath = core.composePaths(path, "" + index);
+        var childPath = core.composePaths(path, "".concat(index));
         var childData = core.Resolve.data(ctx.core.data, childPath);
         var childLabel = childLabelProp
             ? get__default["default"](childData, childLabelProp, '')
@@ -1438,12 +1479,12 @@ var MaterialArrayLayoutComponent = function (props) {
         setExpanded(expandedPanel ? panel : false);
     }; }, []);
     var isExpanded = function (index) {
-        return expanded === core.composePaths(props.path, "" + index);
+        return expanded === core.composePaths(props.path, "".concat(index));
     };
-    var enabled = props.enabled, data = props.data, path = props.path, schema = props.schema, uischema = props.uischema, errors = props.errors, addItem = props.addItem, renderers = props.renderers, cells = props.cells, label = props.label, required = props.required, rootSchema = props.rootSchema, config = props.config, uischemas = props.uischemas, translations = props.translations;
+    var enabled = props.enabled, data = props.data, path = props.path, schema = props.schema, uischema = props.uischema, errors = props.errors, addItem = props.addItem, renderers = props.renderers, cells = props.cells, label = props.label, required = props.required, rootSchema = props.rootSchema, config = props.config, uischemas = props.uischemas, translations = props.translations, description = props.description;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, props.uischema.options);
     return (React__default["default"].createElement("div", null,
-        React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue }),
+        React__default["default"].createElement(ArrayLayoutToolbar, { translations: translations, label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue }),
         React__default["default"].createElement("div", null, data > 0 ? (map__default["default"](range__default["default"](data), function (index) {
             return (React__default["default"].createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas, translations: translations }));
         })) : (React__default["default"].createElement("p", null, "No data")))));
@@ -1749,9 +1790,11 @@ exports.MuiToggle = MuiToggle;
 exports.NoBorderTableCell = NoBorderTableCell;
 exports.NonEmptyRow = NonEmptyRow;
 exports.Unwrapped = Unwrapped;
+exports.createOnBlurHandler = createOnBlurHandler;
 exports.createOnChangeHandler = createOnChangeHandler;
 exports.ctxDispatchToExpandPanelProps = ctxDispatchToExpandPanelProps;
 exports.defaultInputVariant = defaultInputVariant;
+exports.formatDate = formatDate;
 exports.getData = getData;
 exports.i18nDefaults = i18nDefaults;
 exports.materialAllOfControlTester = materialAllOfControlTester;