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

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

@@ -1,28 +1,23 @@
 import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
-import { Hidden, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, IconButton, FormHelperText, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, FormLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
-import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, resolveSchema, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, showAsRequired, isBooleanControl, optionIs, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
+import { Hidden, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Stack, Grid, Typography, FormHelperText, IconButton, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, FormLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
+import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, resolveSchema, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, showAsRequired, isBooleanControl, optionIs, isDateControl, defaultDateFormat, isDateTimeControl, defaultDateTimeFormat, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, defaultTimeFormat, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
 import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withTranslateProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
 import omit from 'lodash/omit';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ArrowDownward from '@mui/icons-material/ArrowDownward';
-import ArrowUpward from '@mui/icons-material/ArrowUpward';
+import { ErrorOutline, Add, ArrowUpward, ArrowDownward, Delete, Close, ExpandMore } from '@mui/icons-material';
 import { styled } from '@mui/material/styles';
-import AddIcon from '@mui/icons-material/Add';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import merge from 'lodash/merge';
 import dayjs from 'dayjs';
 import customParsing from 'dayjs/plugin/customParseFormat';
 import debounce from 'lodash/debounce';
-import Close from '@mui/icons-material/Close';
 import map from 'lodash/map';
+import AddIcon from '@mui/icons-material/Add';
 import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import get from 'lodash/get';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 
 const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }) => {
     const delegateUISchema = findMatchingUISchema(uischemas)(schema, uischema.scope, path);
@@ -100,7 +95,7 @@ var MaterialAnyOfRenderer$1 = withJsonFormsAnyOfProps(MaterialAnyOfRenderer);
 const StyledTableCell = styled(TableCell)({
     borderBottom: 'none',
 });
-const NoBorderTableCell = ({ children, ...otherProps }) => (React.createElement(StyledTableCell, Object.assign({}, otherProps), children));
+const NoBorderTableCell = ({ children, ...otherProps }) => (React.createElement(StyledTableCell, { ...otherProps }, children));
 
 const StyledBadge = styled$1(Badge)(({ theme }) => ({
     color: theme.palette.error.main,
@@ -108,25 +103,27 @@ const StyledBadge = styled$1(Badge)(({ theme }) => ({
 const ValidationIcon = ({ errorMessages, id }) => {
     return (React.createElement(Tooltip, { id: id, title: errorMessages },
         React.createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
-            React.createElement(ErrorOutlineIcon, { color: 'inherit' }))));
+            React.createElement(ErrorOutline, { color: 'inherit' }))));
 };
 
 const fixedCellSmall = {
     paddingLeft: 0,
     paddingRight: 0,
 };
-const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, label, path, addItem, schema, enabled, translations, rootSchema, }) {
+const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, label, description, path, addItem, schema, enabled, translations, rootSchema, }) {
     return (React.createElement(TableRow, null,
         React.createElement(NoBorderTableCell, { colSpan: numColumns },
-            React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
-                React.createElement(Grid, { item: true },
-                    React.createElement(Typography, { variant: 'h6' }, label)),
-                React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
-                    React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
+            React.createElement(Stack, null,
+                React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
+                    React.createElement(Grid, { item: true },
+                        React.createElement(Typography, { variant: 'h6' }, label)),
+                    React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
+                        React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
+                description && React.createElement(FormHelperText, null, description))),
         enabled ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
             React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
                 React.createElement(IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, createDefaultValue(schema, rootSchema)), size: 'large' },
-                    React.createElement(AddIcon, null))))) : null));
+                    React.createElement(Add, null))))) : null));
 });
 
 const styles = {
@@ -158,7 +155,7 @@ const generateCells = (Cell, schema, rowPath, enabled, cells) => {
                 enabled,
                 cells,
             };
-            return React.createElement(Cell, Object.assign({ key: cellPath }, props));
+            return React.createElement(Cell, { key: cellPath, ...props });
         });
     }
     else {
@@ -168,7 +165,7 @@ const generateCells = (Cell, schema, rowPath, enabled, cells) => {
             cellPath: rowPath,
             enabled,
         };
-        return React.createElement(Cell, Object.assign({ key: rowPath }, props));
+        return React.createElement(Cell, { key: rowPath, ...props });
     }
 };
 const getValidColumnProps = (scopedSchema) => {
@@ -214,7 +211,7 @@ const NonEmptyCell = (ownProps) => {
     const ctx = useJsonForms();
     const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
     const isValid = isEmpty(emptyCellProps.errors);
-    return React.createElement(NonEmptyCellComponent, Object.assign({}, emptyCellProps, { isValid: isValid }));
+    return React.createElement(NonEmptyCellComponent, { ...emptyCellProps, isValid: isValid });
 };
 const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, moveUpCreator, moveDownCreator, enableUp, enableDown, showSortButtons, enabled, cells, path, translations, }) => {
     const moveUp = useMemo(() => moveUpCreator(path, rowIndex), [moveUpCreator, path, rowIndex]);
@@ -232,7 +229,7 @@ const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, m
                             React.createElement(ArrowDownward, null))))) : null,
                 React.createElement(Grid, { item: true },
                     React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: () => openDeleteDialog(childPath, rowIndex), size: 'large' },
-                        React.createElement(DeleteIcon, null)))))) : null));
+                        React.createElement(Delete, null)))))) : null));
 };
 const NonEmptyRow = React.memo(NonEmptyRowComponent);
 const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells, translations, }) => {
@@ -253,7 +250,7 @@ class MaterialTableControl extends React.Component {
         this.addItem = (path, value) => this.props.addItem(path, value);
     }
     render() {
-        const { label, path, schema, rootSchema, uischema, errors, openDeleteDialog, visible, enabled, cells, translations, } = this.props;
+        const { label, description, path, schema, rootSchema, uischema, errors, openDeleteDialog, visible, enabled, cells, translations, } = this.props;
         const controlElement = uischema;
         const isObjectSchema = schema.type === 'object';
         const headerCells = isObjectSchema
@@ -262,12 +259,12 @@ class MaterialTableControl extends React.Component {
         return (React.createElement(Hidden, { xsUp: !visible },
             React.createElement(Table, null,
                 React.createElement(TableHead, null,
-                    React.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.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.createElement(TableRow, null,
                         headerCells,
                         enabled ? React.createElement(TableCell, null) : null))),
                 React.createElement(TableBody, null,
-                    React.createElement(TableRows, Object.assign({ openDeleteDialog: openDeleteDialog, translations: translations }, this.props))))));
+                    React.createElement(TableRows, { openDeleteDialog: openDeleteDialog, translations: translations, ...this.props })))));
     }
 }
 
@@ -299,7 +296,7 @@ const MaterialArrayControlRenderer = (props) => {
     }, [setOpen, path, rowData]);
     const deleteClose = useCallback(() => setOpen(false), [setOpen]);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(MaterialTableControl, Object.assign({}, props, { openDeleteDialog: openDeleteDialog })),
+        React.createElement(MaterialTableControl, { ...props, openDeleteDialog: openDeleteDialog }),
         React.createElement(DeleteDialog, { open: open, onCancel: deleteCancel, onConfirm: deleteConfirm, onClose: deleteClose, acceptText: props.translations.deleteDialogAccept, declineText: props.translations.deleteDialogDecline, title: props.translations.deleteDialogTitle, message: props.translations.deleteDialogMessage })));
 };
 const materialArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));
@@ -331,7 +328,7 @@ const MuiAutocomplete = (props) => {
             }, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
                 setInputValue(newInputValue);
             }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || ((option) => option?.label), freeSolo: false, renderInput: (params) => {
-                return (React.createElement(TextField, Object.assign({ label: label, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled }, params, { id: id, required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused })));
+                return (React.createElement(TextField, { label: label, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled, ...params, id: id, required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused }));
             }, renderOption: renderOption, filterOptions: filterOptions }),
         React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
         React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText)));
@@ -348,13 +345,44 @@ const MuiCheckbox = React.memo(function MuiCheckbox(props) {
 });
 
 dayjs.extend(customParsing);
-const createOnChangeHandler = (path, handleChange, saveFormat) => (time) => {
-    if (!time) {
+const createOnChangeHandler = (path, handleChange, saveFormat) => (value) => {
+    if (!value) {
         handleChange(path, undefined);
-        return;
     }
-    const result = dayjs(time).format(saveFormat);
-    handleChange(path, result);
+    else if (value.toString() !== 'Invalid Date') {
+        const formatedDate = formatDate(value, saveFormat);
+        handleChange(path, formatedDate);
+    }
+};
+const createOnBlurHandler = (path, handleChange, format, saveFormat, rerenderChild, onBlur) => (e) => {
+    const date = dayjs(e.target.value, format);
+    const formatedDate = formatDate(date, saveFormat);
+    if (formatedDate.toString() === 'Invalid Date') {
+        handleChange(path, undefined);
+        rerenderChild();
+    }
+    else {
+        handleChange(path, formatedDate);
+    }
+    onBlur();
+};
+const formatDate = (date, saveFormat) => {
+    let formatedDate = date.format(saveFormat);
+    const indexOfYear = saveFormat.indexOf('YYYY');
+    if (date.year() < 1000 && indexOfYear !== -1) {
+        const stringUpToYear = formatedDate.slice(0, indexOfYear);
+        const 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;
 };
 const getData = (data, saveFormat) => {
     if (!data) {
@@ -384,7 +412,7 @@ const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);
 const withAjvProps = (Component) => function WithAjvProps(props) {
     const ctx = useJsonForms();
     const ajv = getAjv({ jsonforms: { ...ctx } });
-    return React.createElement(Component, Object.assign({}, props, { ajv: ajv }));
+    return React.createElement(Component, { ...props, ajv: ajv });
 };
 
 const variantToInput = {
@@ -535,16 +563,16 @@ const MuiToggle = React.memo(function MuiToggle(props) {
 });
 
 const MaterialEnumArrayRenderer = ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }) => {
-    return (React.createElement(Hidden, { xlUp: !visible },
+    return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(FormControl, { component: 'fieldset' },
             React.createElement(FormGroup, { row: true }, options.map((option, index) => {
                 const optionPath = Paths.compose(path, `${index}`);
                 const checkboxValue = data?.includes(option.value)
                     ? option.value
                     : undefined;
-                return (React.createElement(FormControlLabel, { id: option.value, key: option.value, control: React.createElement(MuiCheckbox, Object.assign({ key: 'checkbox-' + option.value, isValid: isEmpty(errors), path: optionPath, handleChange: (_childPath, newValue) => newValue
+                return (React.createElement(FormControlLabel, { id: option.value, key: option.value, control: React.createElement(MuiCheckbox, { key: 'checkbox-' + option.value, isValid: isEmpty(errors), path: optionPath, handleChange: (_childPath, newValue) => newValue
                             ? addItem(path, option.value)
-                            : removeItem(path, option.value), data: checkboxValue, errors: errors, schema: schema, visible: visible }, otherProps)), label: option.label }));
+                            : removeItem(path, option.value), data: checkboxValue, errors: errors, schema: schema, visible: visible, ...otherProps }), label: option.label }));
             })),
             React.createElement(FormHelperText, { error: true }, errors))));
 };
@@ -619,21 +647,23 @@ const MaterialLabelRenderer = ({ text, visible }) => {
 };
 var MaterialLabelRenderer$1 = withJsonFormsLabelProps(MaterialLabelRenderer);
 
-const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, errors, addItem, path, enabled, createDefault, translations, }) {
+const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, description, errors, addItem, path, enabled, createDefault, translations, }) {
     return (React.createElement(Toolbar, { disableGutters: true },
-        React.createElement(Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
-            React.createElement(Grid, { item: true },
-                React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
-                    React.createElement(Grid, { item: true },
-                        React.createElement(Typography, { variant: 'h6' }, label)),
-                    React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
-                        React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
-            enabled && (React.createElement(Grid, { item: true },
-                React.createElement(Grid, { container: true },
-                    React.createElement(Grid, { item: true },
-                        React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
-                            React.createElement(IconButton, { "aria-label": translations.addTooltip, onClick: addItem(path, createDefault()), size: 'large' },
-                                React.createElement(AddIcon, null))))))))));
+        React.createElement(Stack, null,
+            React.createElement(Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
+                React.createElement(Grid, { item: true },
+                    React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
+                        React.createElement(Grid, { item: true },
+                            React.createElement(Typography, { variant: 'h6' }, label)),
+                        React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
+                            React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
+                enabled && (React.createElement(Grid, { item: true },
+                    React.createElement(Grid, { container: true },
+                        React.createElement(Grid, { item: true },
+                            React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
+                                React.createElement(IconButton, { "aria-label": translations.addTooltip, onClick: addItem(path, createDefault()), size: 'large' },
+                                    React.createElement(AddIcon, null)))))))),
+            description && React.createElement(FormHelperText, null, description))));
 });
 
 const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handleSelect, removeItem, path, translations, }) => {
@@ -643,11 +673,11 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, enabled, handle
         React.createElement(ListItemText, { primary: childLabel }),
         enabled && (React.createElement(ListItemSecondaryAction, null,
             React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
-                React.createElement(DeleteIcon, null))))));
+                React.createElement(Delete, null))))));
 };
 var ListWithDetailMasterItem$1 = withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
 
-const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, }) => {
+const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, enabled, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, description, }) => {
     const [selectedIndex, setSelectedIndex] = useState(undefined);
     const handleRemoveItem = useCallback((p, value) => () => {
         removeItems(p, [value])();
@@ -666,7 +696,7 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, ena
         setSelectedIndex(undefined);
     }, [schema]);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue }),
+        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: handleCreateDefaultValue }),
         React.createElement(Grid, { container: true, direction: 'row', spacing: 2 },
             React.createElement(Grid, { item: true, xs: 3 },
                 React.createElement(List, null, data > 0 ? (map(range(data), (index) => (React.createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, enabled: enabled, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, translations: translations })))) : (React.createElement("p", null, "No data")))),
@@ -692,7 +722,7 @@ const MaterialInputControl = (props) => {
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, variant: variant, id: id },
             React.createElement(InputLabel, { htmlFor: id + '-input', error: !isValid, required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React.createElement(InnerComponent, Object.assign({}, props, { id: id + '-input', isValid: isValid, visible: visible })),
+            React.createElement(InnerComponent, { ...props, id: id + '-input', isValid: isValid, visible: visible }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -723,7 +753,7 @@ const MuiAutocompleteInputText = (props) => {
 };
 class MaterialAnyOfStringOrEnumControl extends Control {
     render() {
-        return (React.createElement(MaterialInputControl, Object.assign({}, this.props, { input: MuiAutocompleteInputText })));
+        return (React.createElement(MaterialInputControl, { ...this.props, input: MuiAutocompleteInputText }));
     }
 }
 const hasEnumAndText = (schemas) => {
@@ -824,8 +854,9 @@ const MaterialDateControl = (props) => {
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
+    const [key, setKey] = useState(0);
     const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
-    const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+    const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? defaultDateFormat;
     const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
     const firstFormHelperText = showDescription
         ? description
@@ -833,11 +864,13 @@ const MaterialDateControl = (props) => {
             ? errors
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const updateChild = useCallback(() => setKey((key) => key + 1), []);
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild]);
     const value = getData(data, saveFormat);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(DatePicker, { label: label, value: value, onChange: onChange, format: format, views: views, disabled: !enabled, slotProps: {
+            React.createElement(DatePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, views: views, disabled: !enabled, slotProps: {
                     actionBar: ({ wrapperVariant }) => ({
                         actions: wrapperVariant === 'desktop'
                             ? []
@@ -854,7 +887,7 @@ const MaterialDateControl = (props) => {
                         },
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
-                        onBlur: onBlur,
+                        onBlur: onBlurHandler,
                     },
                 } }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -870,7 +903,8 @@ const MaterialDateTimeControl = (props) => {
     const isValid = errors.length === 0;
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
-    const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
+    const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? defaultDateTimeFormat;
+    const [key, setKey] = useState(0);
     const views = appliedUiSchemaOptions.views ?? [
         'year',
         'day',
@@ -883,11 +917,13 @@ const MaterialDateTimeControl = (props) => {
             ? errors
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const updateChild = useCallback(() => setKey((key) => key + 1), []);
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild]);
     const value = getData(data, saveFormat);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(DateTimePicker, { label: label, value: value, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
+            React.createElement(DateTimePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
                     actionBar: ({ wrapperVariant }) => ({
                         actions: wrapperVariant === 'desktop'
                             ? []
@@ -904,7 +940,7 @@ const MaterialDateTimeControl = (props) => {
                         },
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
-                        onBlur: onBlur,
+                        onBlur: onBlurHandler,
                     },
                 } }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -917,12 +953,12 @@ const MaterialEnumControl = (props) => {
     const { config, uischema, errors } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
-    return appliedUiSchemaOptions.autocomplete === false ? (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiSelect }))) : (React.createElement(MuiAutocomplete, Object.assign({}, props, { isValid: isValid })));
+    return appliedUiSchemaOptions.autocomplete === false ? (React.createElement(MaterialInputControl, { ...props, input: MuiSelect })) : (React.createElement(MuiAutocomplete, { ...props, isValid: isValid }));
 };
 const materialEnumControlTester = rankWith(2, isEnumControl);
 var MaterialEnumControl$1 = withJsonFormsEnumProps(withTranslateProps(React.memo(MaterialEnumControl)), false);
 
-const MaterialIntegerControl = (props) => (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiInputInteger })));
+const MaterialIntegerControl = (props) => (React.createElement(MaterialInputControl, { ...props, input: MuiInputInteger }));
 const materialIntegerControlTester = rankWith(2, isIntegerControl);
 var MaterialIntegerControl$1 = withJsonFormsControlProps(MaterialIntegerControl);
 
@@ -940,7 +976,7 @@ const MaterialNativeControl = (props) => {
 const materialNativeControlTester = rankWith(2, or(isDateControl, isTimeControl));
 var MaterialNativeControl$1 = withJsonFormsControlProps(MaterialNativeControl);
 
-const MaterialNumberControl = (props) => (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiInputNumber })));
+const MaterialNumberControl = (props) => (React.createElement(MaterialInputControl, { ...props, input: MuiInputNumber }));
 const materialNumberControlTester = rankWith(2, isNumberControl);
 var MaterialNumberControl$1 = withJsonFormsControlProps(MaterialNumberControl);
 
@@ -948,7 +984,7 @@ const MaterialOneOfEnumControl = (props) => {
     const { config, uischema, errors } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
-    return appliedUiSchemaOptions.autocomplete === false ? (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiSelect }))) : (React.createElement(MuiAutocomplete, Object.assign({}, props, { isValid: isValid })));
+    return appliedUiSchemaOptions.autocomplete === false ? (React.createElement(MaterialInputControl, { ...props, input: MuiSelect })) : (React.createElement(MuiAutocomplete, { ...props, isValid: isValid }));
 };
 const materialOneOfEnumControlTester = rankWith(5, isOneOfEnumControl);
 var MaterialOneOfEnumControl$1 = withJsonFormsOneOfEnumProps(withTranslateProps(React.memo(MaterialOneOfEnumControl)), false);
@@ -967,13 +1003,13 @@ const MaterialRadioGroup = (props) => {
 };
 
 const MaterialOneOfRadioGroupControl = (props) => {
-    return React.createElement(MaterialRadioGroup, Object.assign({}, props));
+    return React.createElement(MaterialRadioGroup, { ...props });
 };
 const materialOneOfRadioGroupControlTester = rankWith(20, and(isOneOfEnumControl, optionIs('format', 'radio')));
 var MaterialOneOfRadioGroupControl$1 = withJsonFormsOneOfEnumProps(MaterialOneOfRadioGroupControl);
 
 const MaterialRadioGroupControl = (props) => {
-    return React.createElement(MaterialRadioGroup, Object.assign({}, props));
+    return React.createElement(MaterialRadioGroup, { ...props });
 };
 const materialRadioGroupControlTester = rankWith(20, and(isEnumControl, optionIs('format', 'radio')));
 var MaterialRadioGroupControl$1 = withJsonFormsEnumProps(MaterialRadioGroupControl);
@@ -1013,7 +1049,7 @@ const MaterialSliderControl = (props) => {
 const materialSliderControlTester = rankWith(4, isRangeControl);
 var MaterialSliderControl$1 = withJsonFormsControlProps(MaterialSliderControl);
 
-const MaterialTextControl = (props) => (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiInputText })));
+const MaterialTextControl = (props) => (React.createElement(MaterialInputControl, { ...props, input: MuiInputText }));
 const materialTextControlTester = rankWith(1, isStringControl);
 var MaterialTextControl$1 = withJsonFormsControlProps(MaterialTextControl);
 
@@ -1022,9 +1058,10 @@ const MaterialTimeControl = (props) => {
     const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
+    const [key, setKey] = useState(0);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
-    const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+    const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? defaultTimeFormat;
     const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
     const firstFormHelperText = showDescription
         ? description
@@ -1032,11 +1069,13 @@ const MaterialTimeControl = (props) => {
             ? errors
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const updateChild = useCallback(() => setKey((key) => key + 1), []);
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    const onBlurHandler = useMemo(() => createOnBlurHandler(path, handleChange, format, saveFormat, updateChild, onBlur), [path, handleChange, format, saveFormat, updateChild]);
     const value = getData(data, saveFormat);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(TimePicker, { label: label, value: value, onChange: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
+            React.createElement(TimePicker, { key: key, label: label, value: value, onAccept: onChange, format: format, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, slotProps: {
                     actionBar: ({ wrapperVariant }) => ({
                         actions: wrapperVariant === 'desktop'
                             ? []
@@ -1053,7 +1092,7 @@ const MaterialTimeControl = (props) => {
                         },
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
-                        onBlur: onBlur,
+                        onBlur: onBlurHandler,
                     },
                 } }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1076,7 +1115,7 @@ const ExpandPanelRendererComponent = (props) => {
     const showSortButtons = appliedUiSchemaOptions.showSortButtons ||
         appliedUiSchemaOptions.showArrayLayoutSortButtons;
     return (React.createElement(Accordion, { "aria-labelledby": labelHtmlId, expanded: expanded, onChange: handleExpansion(childPath) },
-        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, null) },
+        React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMore, null) },
             React.createElement(Grid, { container: true, alignItems: 'center' },
                 React.createElement(Grid, { item: true, xs: 7, md: 9 },
                     React.createElement(Grid, { container: true, alignItems: 'center' },
@@ -1097,7 +1136,7 @@ const ExpandPanelRendererComponent = (props) => {
                                             React.createElement(ArrowDownward, null))))) : (''),
                                 enabled && (React.createElement(Grid, { item: true },
                                     React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
-                                        React.createElement(DeleteIcon, null)))))))))),
+                                        React.createElement(Delete, null)))))))))),
         React.createElement(AccordionDetails, null,
             React.createElement(JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
@@ -1136,7 +1175,7 @@ const withContextToExpandPanelProps = (Component) => function WithContextToExpan
     const childLabel = childLabelProp
         ? get(childData, childLabelProp, '')
         : get(childData, getFirstPrimitiveProp(schema), '');
-    return (React.createElement(Component, Object.assign({}, props, dispatchProps, { childLabel: childLabel, childPath: childPath, uischemas: uischemas })));
+    return (React.createElement(Component, { ...props, ...dispatchProps, childLabel: childLabel, childPath: childPath, uischemas: uischemas }));
 };
 const withJsonFormsExpandPanelProps = (Component) => withJsonFormsContext(withContextToExpandPanelProps(Component));
 var ExpandPanelRenderer$1 = withJsonFormsExpandPanelProps(ExpandPanelRenderer);
@@ -1149,7 +1188,7 @@ const GroupComponent = React.memo(function GroupComponent({ visible, enabled, ui
         React.createElement(Card, { style: style },
             !isEmpty(label) && React.createElement(CardHeader, { title: label }),
             React.createElement(CardContent, null,
-                React.createElement(MaterialLayoutRenderer, Object.assign({}, props, { visible: visible, enabled: enabled, elements: groupLayout.elements }))))));
+                React.createElement(MaterialLayoutRenderer, { ...props, visible: visible, enabled: enabled, elements: groupLayout.elements })))));
 });
 const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label, }) => {
     const groupLayout = uischema;
@@ -1169,7 +1208,7 @@ const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, schema,
         direction: 'row',
         visible,
     };
-    return (React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { renderers: renderers, cells: cells })));
+    return (React.createElement(MaterialLayoutRenderer, { ...childProps, renderers: renderers, cells: cells }));
 };
 var MaterialHorizontalLayout = withJsonFormsLayoutProps(MaterialHorizontalLayoutRenderer);
 
@@ -1184,7 +1223,7 @@ const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled, visib
         direction: 'column',
         visible,
     };
-    return (React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { renderers: renderers, cells: cells })));
+    return (React.createElement(MaterialLayoutRenderer, { ...childProps, renderers: renderers, cells: cells }));
 };
 var MaterialVerticalLayout = withJsonFormsLayoutProps(MaterialVerticalLayoutRenderer);
 
@@ -1228,7 +1267,7 @@ const MaterialCategorizationLayoutRenderer = (props) => {
         React.createElement(AppBar, { position: 'static' },
             React.createElement(Tabs, { value: safeCategory, onChange: onTabChange, textColor: 'inherit', indicatorColor: 'secondary', variant: 'scrollable' }, categories.map((_, idx) => (React.createElement(Tab, { key: idx, label: tabLabels[idx] }))))),
         React.createElement("div", { style: { marginTop: '0.5em' } },
-            React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { key: safeCategory })))));
+            React.createElement(MaterialLayoutRenderer, { ...childProps, key: safeCategory }))));
 };
 var MaterialCategorizationLayout = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));
 
@@ -1239,10 +1278,10 @@ const MaterialArrayLayoutComponent = (props) => {
         setExpanded(expandedPanel ? panel : false);
     }, []);
     const isExpanded = (index) => expanded === composePaths(props.path, `${index}`);
-    const { enabled, data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas, translations, } = props;
+    const { enabled, data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas, translations, description, } = props;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
     return (React.createElement("div", null,
-        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue }),
+        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), description: description, errors: errors, path: path, enabled: enabled, addItem: addItem, createDefault: innerCreateDefaultValue }),
         React.createElement("div", null, data > 0 ? (map(range(data), (index) => {
             return (React.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.createElement("p", null, "No data")))));
@@ -1252,19 +1291,19 @@ const MaterialArrayLayout$1 = React.memo(MaterialArrayLayoutComponent);
 const MaterialArrayLayoutRenderer = ({ visible, addItem, ...props }) => {
     const addItemCb = useCallback((p, value) => addItem(p, value), [addItem]);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(MaterialArrayLayout$1, Object.assign({ visible: visible, addItem: addItemCb }, props))));
+        React.createElement(MaterialArrayLayout$1, { visible: visible, addItem: addItemCb, ...props })));
 };
 const materialArrayLayoutTester = rankWith(4, isObjectArrayWithNesting);
 var MaterialArrayLayout = withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
 
 const MaterialBooleanCell = (props) => {
-    return React.createElement(MuiCheckbox, Object.assign({}, props));
+    return React.createElement(MuiCheckbox, { ...props });
 };
 const materialBooleanCellTester = rankWith(2, isBooleanControl);
 var MaterialBooleanCell$1 = withJsonFormsCellProps(MaterialBooleanCell);
 
 const MaterialBooleanToggleCell = (props) => {
-    return React.createElement(MuiToggle, Object.assign({}, props));
+    return React.createElement(MuiToggle, { ...props });
 };
 const materialBooleanToggleCellTester = rankWith(3, and(isBooleanControl, optionIs('toggle', true)));
 var MaterialBooleanToggleCell$1 = withJsonFormsCellProps(MaterialBooleanToggleCell);
@@ -1278,31 +1317,31 @@ const MaterialDateCell = (props) => {
 const materialDateCellTester = rankWith(2, isDateControl);
 var MaterialDateCell$1 = withJsonFormsCellProps(MaterialDateCell);
 
-const MaterialEnumCell = (props) => React.createElement(MuiSelect, Object.assign({}, props));
+const MaterialEnumCell = (props) => React.createElement(MuiSelect, { ...props });
 const materialEnumCellTester = rankWith(2, isEnumControl);
 var MaterialEnumCell$1 = withJsonFormsEnumCellProps(withTranslateProps(React.memo(MaterialEnumCell)), false);
 
-const MaterialIntegerCell = (props) => (React.createElement(MuiInputInteger, Object.assign({}, props)));
+const MaterialIntegerCell = (props) => (React.createElement(MuiInputInteger, { ...props }));
 const materialIntegerCellTester = rankWith(2, isIntegerControl);
 var MaterialIntegerCell$1 = withJsonFormsCellProps(MaterialIntegerCell);
 
-const MaterialNumberCell = (props) => (React.createElement(MuiInputNumber, Object.assign({}, props)));
+const MaterialNumberCell = (props) => (React.createElement(MuiInputNumber, { ...props }));
 const materialNumberCellTester = rankWith(2, isNumberControl);
 var MaterialNumberCell$1 = withJsonFormsCellProps(MaterialNumberCell);
 
-const MaterialNumberFormatCell = (props) => React.createElement(MuiInputNumberFormat, Object.assign({}, props));
+const MaterialNumberFormatCell = (props) => React.createElement(MuiInputNumberFormat, { ...props });
 const materialNumberFormatCellTester = rankWith(4, isNumberFormatControl);
 var MaterialNumberFormatCell$1 = withJsonFormsCellProps(MaterialNumberFormatCell);
 
-const MaterialOneOfEnumCell = (props) => React.createElement(MuiSelect, Object.assign({}, props));
+const MaterialOneOfEnumCell = (props) => React.createElement(MuiSelect, { ...props });
 const materialOneOfEnumCellTester = rankWith(2, isOneOfEnumControl);
 var MaterialOneOfEnumCell$1 = withJsonFormsOneOfEnumCellProps(withTranslateProps(React.memo(MaterialOneOfEnumCell)), false);
 
-const MaterialTextCell = (props) => (React.createElement(MuiInputText, Object.assign({}, props)));
+const MaterialTextCell = (props) => (React.createElement(MuiInputText, { ...props }));
 const materialTextCellTester = rankWith(1, isStringControl);
 var MaterialTextCell$1 = withJsonFormsCellProps(MaterialTextCell);
 
-const MaterialTimeCell = (props) => (React.createElement(MuiInputTime, Object.assign({}, props)));
+const MaterialTimeCell = (props) => (React.createElement(MuiInputTime, { ...props }));
 const materialTimeCellTester = rankWith(2, isTimeControl);
 var MaterialTimeCell$1 = withJsonFormsCellProps(MaterialTimeCell);
 
@@ -1356,7 +1395,7 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
         React.createElement(Stepper, { activeStep: activeCategory, nonLinear: true }, categories.map((_, idx) => (React.createElement(Step, { key: tabLabels[idx] },
             React.createElement(StepButton, { onClick: () => handleStep(idx) }, tabLabels[idx]))))),
         React.createElement("div", null,
-            React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps))),
+            React.createElement(MaterialLayoutRenderer, { ...childProps })),
         appliedUiSchemaOptions.showNavButtons ? (React.createElement("div", { style: buttonWrapperStyle },
             React.createElement(Button, { style: buttonNextStyle, variant: 'contained', color: 'primary', disabled: activeCategory >= categories.length - 1, onClick: () => handleStep(activeCategory + 1) }, "Next"),
             React.createElement(Button, { style: buttonStyle, color: 'secondary', variant: 'contained', disabled: activeCategory <= 0, onClick: () => handleStep(activeCategory - 1) }, "Previous"))) : (React.createElement(React.Fragment, null))));
@@ -1487,5 +1526,5 @@ const Unwrapped = {
     ...UnwrappedLayouts,
 };
 
-export { ArrayLayoutToolbar, CombinatorProperties, CustomizableCells as Customizable, DeleteDialog, ExpandPanelRenderer$1 as ExpandPanelRenderer, ListWithDetailMasterItem, MaterialAllOfRenderer$1 as MaterialAllOfRenderer, MaterialAnyOfRenderer$1 as MaterialAnyOfRenderer, MaterialAnyOfStringOrEnumControl$1 as MaterialAnyOfStringOrEnumControl, MaterialArrayControlRenderer$1 as MaterialArrayControlRenderer, MaterialArrayLayout, MaterialBooleanCell$1 as MaterialBooleanCell, MaterialBooleanControl$1 as MaterialBooleanControl, MaterialBooleanToggleCell$1 as MaterialBooleanToggleCell, MaterialBooleanToggleControl$1 as MaterialBooleanToggleControl, MaterialCategorizationLayout, MaterialDateCell$1 as MaterialDateCell, MaterialDateControl$1 as MaterialDateControl, MaterialDateTimeControl$1 as MaterialDateTimeControl, MaterialEnumArrayRenderer$1 as MaterialEnumArrayRenderer, MaterialEnumCell$1 as MaterialEnumCell, MaterialEnumControl$1 as MaterialEnumControl, MaterialGroupLayout, MaterialHorizontalLayout, MaterialInputControl, MaterialIntegerCell$1 as MaterialIntegerCell, MaterialIntegerControl$1 as MaterialIntegerControl, MaterialLabelRenderer$1 as MaterialLabelRenderer, MaterialLayoutRenderer, MaterialListWithDetailRenderer$1 as MaterialListWithDetailRenderer, MaterialNativeControl$1 as MaterialNativeControl, MaterialNumberCell$1 as MaterialNumberCell, MaterialNumberControl$1 as MaterialNumberControl, MaterialNumberFormatCell$1 as MaterialNumberFormatCell, MaterialObjectRenderer$1 as MaterialObjectRenderer, MaterialOneOfEnumCell$1 as MaterialOneOfEnumCell, MaterialOneOfEnumControl$1 as MaterialOneOfEnumControl, MaterialOneOfRadioGroupControl$1 as MaterialOneOfRadioGroupControl, MaterialOneOfRenderer$1 as MaterialOneOfRenderer, MaterialRadioGroupControl$1 as MaterialRadioGroupControl, MaterialSliderControl$1 as MaterialSliderControl, MaterialTableControl, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiAutocomplete, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, MuiToggle, NoBorderTableCell, NonEmptyRow, Unwrapped, createOnChangeHandler, ctxDispatchToExpandPanelProps, defaultInputVariant, getData, i18nDefaults, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialLabelRendererTester, materialListWithDetailTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, useInputComponent, useInputVariant, withAjvProps, withContextToExpandPanelProps, withJsonFormsExpandPanelProps };
+export { ArrayLayoutToolbar, CombinatorProperties, CustomizableCells as Customizable, DeleteDialog, ExpandPanelRenderer$1 as ExpandPanelRenderer, ListWithDetailMasterItem, MaterialAllOfRenderer$1 as MaterialAllOfRenderer, MaterialAnyOfRenderer$1 as MaterialAnyOfRenderer, MaterialAnyOfStringOrEnumControl$1 as MaterialAnyOfStringOrEnumControl, MaterialArrayControlRenderer$1 as MaterialArrayControlRenderer, MaterialArrayLayout, MaterialBooleanCell$1 as MaterialBooleanCell, MaterialBooleanControl$1 as MaterialBooleanControl, MaterialBooleanToggleCell$1 as MaterialBooleanToggleCell, MaterialBooleanToggleControl$1 as MaterialBooleanToggleControl, MaterialCategorizationLayout, MaterialDateCell$1 as MaterialDateCell, MaterialDateControl$1 as MaterialDateControl, MaterialDateTimeControl$1 as MaterialDateTimeControl, MaterialEnumArrayRenderer$1 as MaterialEnumArrayRenderer, MaterialEnumCell$1 as MaterialEnumCell, MaterialEnumControl$1 as MaterialEnumControl, MaterialGroupLayout, MaterialHorizontalLayout, MaterialInputControl, MaterialIntegerCell$1 as MaterialIntegerCell, MaterialIntegerControl$1 as MaterialIntegerControl, MaterialLabelRenderer$1 as MaterialLabelRenderer, MaterialLayoutRenderer, MaterialListWithDetailRenderer$1 as MaterialListWithDetailRenderer, MaterialNativeControl$1 as MaterialNativeControl, MaterialNumberCell$1 as MaterialNumberCell, MaterialNumberControl$1 as MaterialNumberControl, MaterialNumberFormatCell$1 as MaterialNumberFormatCell, MaterialObjectRenderer$1 as MaterialObjectRenderer, MaterialOneOfEnumCell$1 as MaterialOneOfEnumCell, MaterialOneOfEnumControl$1 as MaterialOneOfEnumControl, MaterialOneOfRadioGroupControl$1 as MaterialOneOfRadioGroupControl, MaterialOneOfRenderer$1 as MaterialOneOfRenderer, MaterialRadioGroupControl$1 as MaterialRadioGroupControl, MaterialSliderControl$1 as MaterialSliderControl, MaterialTableControl, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiAutocomplete, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, MuiToggle, NoBorderTableCell, NonEmptyRow, Unwrapped, createOnBlurHandler, createOnChangeHandler, ctxDispatchToExpandPanelProps, defaultInputVariant, formatDate, getData, i18nDefaults, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialLabelRendererTester, materialListWithDetailTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, useInputComponent, useInputVariant, withAjvProps, withContextToExpandPanelProps, withJsonFormsExpandPanelProps };
 //# sourceMappingURL=jsonforms-react-material.esm.js.map