@jsonforms/material-renderers 3.0.0-beta.4 → 3.0.0-rc.1

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

@@ -23,8 +23,8 @@ var customParsing = require('dayjs/plugin/customParseFormat');
 var debounce = require('lodash/debounce');
 var Close = require('@mui/icons-material/Close');
 var map = require('lodash/map');
-var lab = require('@mui/lab');
-var AdapterDayjs = require('@mui/lab/AdapterDayjs');
+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');
 var Input = require('@mui/material/Input');
@@ -48,7 +48,6 @@ 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 AdapterDayjs__default = /*#__PURE__*/_interopDefaultLegacy(AdapterDayjs);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
 var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
@@ -448,20 +447,14 @@ var MuiCheckbox = React__default["default"].memo(function (props) {
     return (React__default["default"].createElement(material.Checkbox, { checked: checked, onChange: function (_ev, isChecked) { return handleChange(path, isChecked); }, className: className, id: id, disabled: !enabled, inputProps: inputProps }));
 });
 
-var MuiSelect = React__default["default"].memo(function (props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config;
-    var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    return (React__default["default"].createElement(material.Select, { className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: function (ev) { return handleChange(path, ev.target.value); }, fullWidth: true, variant: 'standard' }, [React__default["default"].createElement(material.MenuItem, { value: '', key: 'empty' })].concat(options.map(function (optionValue) { return (React__default["default"].createElement(material.MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label)); }))));
-});
-
 dayjs__default["default"].extend(customParsing__default["default"]);
-var createOnChangeHandler = function (path, handleChange, saveFormat) { return function (time) {
+var createOnChangeHandler = function (path, handleChange, saveFormat) { return function (time, textInputValue) {
     if (!time) {
         handleChange(path, undefined);
         return;
     }
     var result = dayjs__default["default"](time).format(saveFormat);
-    handleChange(path, result === 'Invalid Date' ? undefined : result);
+    handleChange(path, result === 'Invalid Date' ? textInputValue : result);
 }; };
 var getData = function (data, saveFormat) {
     if (!data) {
@@ -473,6 +466,23 @@ var getData = function (data, saveFormat) {
     }
     return dayjsData;
 };
+var ResettableTextField = function (_a) {
+    var rawValue = _a.rawValue, dayjsValueIsValid = _a.dayjsValueIsValid, valueInInputFormat = _a.valueInInputFormat, focused = _a.focused, inputProps = _a.inputProps, props = __rest(_a, ["rawValue", "dayjsValueIsValid", "valueInInputFormat", "focused", "inputProps"]);
+    var value = React.useRef({ lastInput: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value, toShow: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value });
+    if (!focused) {
+        if (!dayjsValueIsValid) {
+            value.current.toShow = typeof rawValue === 'string' || rawValue === null || rawValue === undefined ? rawValue : JSON.stringify(rawValue);
+        }
+        else {
+            value.current.toShow = valueInInputFormat;
+        }
+    }
+    if (focused && (inputProps === null || inputProps === void 0 ? void 0 : inputProps.value) !== value.current.lastInput) {
+        value.current.lastInput = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
+        value.current.toShow = inputProps === null || inputProps === void 0 ? void 0 : inputProps.value;
+    }
+    return React__default["default"].createElement(material.TextField, __assign({}, props, { inputProps: __assign(__assign({}, inputProps), { value: value.current.toShow || '' }) }));
+};
 
 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 },
@@ -497,9 +507,9 @@ var withAjvProps = function (Component) {
     };
 };
 
-var eventToValue$2 = function (ev) { return ev.target.value; };
+var eventToValue$3 = function (ev) { return ev.target.value; };
 var useDebouncedChange = function (handleChange, defaultValue, data, path, eventToValueFunction, timeout) {
-    if (eventToValueFunction === void 0) { eventToValueFunction = eventToValue$2; }
+    if (eventToValueFunction === void 0) { eventToValueFunction = eventToValue$3; }
     if (timeout === void 0) { timeout = 300; }
     var _a = React.useState(data !== null && data !== void 0 ? data : defaultValue), input = _a[0], setInput = _a[1];
     React.useEffect(function () {
@@ -522,27 +532,39 @@ var useFocus = function () {
     return [focused, onFocus, onBlur];
 };
 
+var i18nDefaults = {
+    'enum.none': 'None'
+};
+
+var MuiSelect = React__default["default"].memo(function (props) {
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, schema = props.schema, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, t = props.t;
+    var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
+    var noneOptionLabel = React.useMemo(function () { return t('enum.none', i18nDefaults['enum.none'], { schema: schema, uischema: uischema, path: path }); }, [t, schema, uischema, path]);
+    return (React__default["default"].createElement(material.Select, { className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: function (ev) { return handleChange(path, ev.target.value || undefined); }, fullWidth: true, variant: 'standard' }, [React__default["default"].createElement(material.MenuItem, { value: '', key: 'jsonforms.enum.none' },
+            React__default["default"].createElement("em", null, noneOptionLabel))].concat(options.map(function (optionValue) { return (React__default["default"].createElement(material.MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label)); }))));
+});
+
 var toNumber$1 = function (value) {
     return value === '' ? undefined : parseInt(value, 10);
 };
-var eventToValue$1 = function (ev) { return toNumber$1(ev.target.value); };
+var eventToValue$2 = function (ev) { return toNumber$1(ev.target.value); };
 var MuiInputInteger = React__default["default"].memo(function (props) {
     var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
     var inputProps = { step: '1' };
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    var _a = useDebouncedChange(handleChange, '', data, path, eventToValue$1), inputValue = _a[0], onChange = _a[1];
+    var _a = useDebouncedChange(handleChange, '', data, path, eventToValue$2), inputValue = _a[0], onChange = _a[1];
     return (React__default["default"].createElement(material.Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
 });
 
 var toNumber = function (value) {
     return value === '' ? undefined : parseFloat(value);
 };
-var eventToValue = function (ev) { return toNumber(ev.target.value); };
+var eventToValue$1 = function (ev) { return toNumber(ev.target.value); };
 var MuiInputNumber = React__default["default"].memo(function (props) {
     var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
     var inputProps = { step: '0.1' };
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    var _a = useDebouncedChange(handleChange, '', data, path, eventToValue), inputValue = _a[0], onChange = _a[1];
+    var _a = useDebouncedChange(handleChange, '', data, path, eventToValue$1), inputValue = _a[0], onChange = _a[1];
     return (React__default["default"].createElement(material.Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
 });
 
@@ -563,6 +585,7 @@ var MuiInputNumberFormat = React__default["default"].memo(function (props) {
     return (React__default["default"].createElement(material.Input, { type: 'text', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid }));
 });
 
+var eventToValue = function (ev) { return ev.target.value === '' ? undefined : ev.target.value; };
 var MuiInputText = React__default["default"].memo(function (props) {
     var _a, _b, _c;
     var _d = React.useState(false), showAdornment = _d[0], setShowAdornment = _d[1];
@@ -580,7 +603,7 @@ var MuiInputText = React__default["default"].memo(function (props) {
     if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
         inputProps.size = maxLength;
     }
-    var _e = useDebouncedChange(handleChange, '', data, path), inputText = _e[0], onChange = _e[1], onClear = _e[2];
+    var _e = useDebouncedChange(handleChange, '', data, path, eventToValue), inputText = _e[0], onChange = _e[1], onClear = _e[2];
     var onPointerEnter = function () { return setShowAdornment(true); };
     var onPointerLeave = function () { return setShowAdornment(false); };
     var theme = material.useTheme();
@@ -644,12 +667,11 @@ var materialArrayControlTester = core.rankWith(3, core.or(core.isObjectArrayCont
 
 var materialLabelRendererTester = core.rankWith(1, core.uiTypeIs('Label'));
 var MaterialLabelRenderer = function (_a) {
-    var uischema = _a.uischema, visible = _a.visible;
-    var labelElement = uischema;
+    var text = _a.text, visible = _a.visible;
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.Typography, { variant: 'h6' }, labelElement.text !== undefined && labelElement.text !== null && labelElement.text)));
+        React__default["default"].createElement(material.Typography, { variant: 'h6' }, text)));
 };
-var MaterialLabelRenderer$1 = react.withJsonFormsLayoutProps(MaterialLabelRenderer);
+var MaterialLabelRenderer$1 = react.withJsonFormsLabelProps(MaterialLabelRenderer);
 
 var ArrayLayoutToolbar = React__default["default"].memo(function (_a) {
     var label = _a.label, errors = _a.errors, addItem = _a.addItem, path = _a.path, createDefault = _a.createDefault;
@@ -698,6 +720,9 @@ var MaterialListWithDetailRenderer = function (_a) {
         return core.findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema);
     }, [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
+    React__default["default"].useEffect(function () {
+        setSelectedIndex(undefined);
+    }, [schema]);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(ArrayLayoutToolbar, { label: core.computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: handleCreateDefaultValue }),
         React__default["default"].createElement(material.Grid, { container: true, direction: 'row', spacing: 2 },
@@ -755,24 +780,40 @@ var MaterialInputControl = function (props) {
 
 var MuiAutocomplete = function (props) {
     var _a;
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, getOptionLabel = props.getOptionLabel, renderOption = props.renderOption, filterOptions = props.filterOptions;
+    var description = props.description, errors = props.errors, visible = props.visible, required = props.required, label = props.label, data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, getOptionLabel = props.getOptionLabel, renderOption = props.renderOption, filterOptions = props.filterOptions, isValid = props.isValid;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var _b = React__default["default"].useState(data !== null && data !== void 0 ? data : ''), inputValue = _b[0], setInputValue = _b[1];
+    var _c = useFocus(), focused = _c[0], onFocus = _c[1], onBlur = _c[2];
     var findOption = (_a = options.find(function (o) { return o.value === data; })) !== null && _a !== void 0 ? _a : null;
-    return (React__default["default"].createElement(material.Autocomplete, { className: className, id: id, disabled: !enabled, value: findOption, onChange: function (_event, newValue) {
-            handleChange(path, newValue === null || newValue === void 0 ? void 0 : newValue.value);
-        }, inputValue: inputValue, onInputChange: function (_event, newInputValue) {
-            setInputValue(newInputValue);
-        }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), style: { marginTop: 16 }, renderInput: function (params) { return (React__default["default"].createElement(material.Input, { style: { width: '100%' }, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled })); }, renderOption: renderOption, filterOptions: filterOptions }));
+    var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
+    var firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    var secondFormHelperText = showDescription && !isValid ? errors : null;
+    return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
+        React__default["default"].createElement(material.Autocomplete, { className: className, id: id, disabled: !enabled, value: findOption, onChange: function (_event, newValue) {
+                handleChange(path, newValue === null || newValue === void 0 ? void 0 : newValue.value);
+            }, inputValue: inputValue, onInputChange: function (_event, newInputValue) {
+                setInputValue(newInputValue);
+            }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), freeSolo: false, renderInput: function (params) {
+                return (React__default["default"].createElement(material.TextField, __assign({ label: label, variant: 'standard', type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled }, params, { id: id + '-input', 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__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+        React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText)));
 };
 
 var MaterialEnumControl = function (props) {
-    var config = props.config, uischema = props.uischema;
+    var config = props.config, uischema = props.uischema, errors = props.errors;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    return (React__default["default"].createElement(MaterialInputControl, __assign({}, props, { input: appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete })));
+    var isValid = errors.length === 0;
+    return (appliedUiSchemaOptions.autocomplete === false ?
+        React__default["default"].createElement(MaterialInputControl, __assign({}, props, { input: MuiSelect })) :
+        React__default["default"].createElement(MuiAutocomplete, __assign({}, props, { isValid: isValid })));
 };
 var materialEnumControlTester = core.rankWith(2, core.isEnumControl);
-var MaterialEnumControl$1 = react.withJsonFormsEnumProps(MaterialEnumControl);
+var MaterialEnumControl$1 = react.withJsonFormsEnumProps(react.withTranslateProps(React__default["default"].memo(MaterialEnumControl)), false);
 
 var MaterialNativeControl = function (props) {
     var _a;
@@ -790,14 +831,15 @@ var materialNativeControlTester = core.rankWith(2, core.or(core.isDateControl, c
 var MaterialNativeControl$1 = react.withJsonFormsControlProps(MaterialNativeControl);
 
 var MaterialDateControl = function (props) {
-    var _a, _b;
-    var _c = useFocus(), focused = _c[0], onFocus = _c[1], onBlur = _c[2];
+    var _a, _b, _c;
+    var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
     var description = props.description, id = props.id, 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 isValid = errors.length === 0;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     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 views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day'];
     var firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -805,9 +847,15 @@ var MaterialDateControl = function (props) {
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
     var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
+    var value = getData(data, saveFormat);
+    var valueInInputFormat = value ? value.format(format) : '';
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
-            React__default["default"].createElement(lab.DatePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(material.TextField, __assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
+        React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
+            React__default["default"].createElement(xDatePickers.DatePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: function (variant) { return (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept']); }
+                    }
+                }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -815,14 +863,15 @@ var materialDateControlTester = core.rankWith(4, core.isDateControl);
 var MaterialDateControl$1 = react.withJsonFormsControlProps(MaterialDateControl);
 
 var MaterialDateTimeControl = function (props) {
-    var _a, _b;
-    var _c = useFocus(), focused = _c[0], onFocus = _c[1], onBlur = _c[2];
+    var _a, _b, _c;
+    var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
     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 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 views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['year', 'day', 'hours', 'minutes'];
     var firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -830,9 +879,15 @@ var MaterialDateTimeControl = function (props) {
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
     var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
+    var value = getData(data, saveFormat);
+    var valueInInputFormat = value ? value.format(format) : '';
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
-            React__default["default"].createElement(lab.DateTimePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(material.TextField, __assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
+        React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
+            React__default["default"].createElement(xDatePickers.DateTimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: function (variant) { return (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept']); }
+                    }
+                }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -840,14 +895,15 @@ var materialDateTimeControlTester = core.rankWith(2, core.isDateTimeControl);
 var MaterialDateTimeControl$1 = react.withJsonFormsControlProps(MaterialDateTimeControl);
 
 var MaterialTimeControl = function (props) {
-    var _a, _b;
-    var _c = useFocus(), focused = _c[0], onFocus = _c[1], onBlur = _c[2];
+    var _a, _b, _c;
+    var _d = useFocus(), focused = _d[0], onFocus = _d[1], onBlur = _d[2];
     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 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 views = (_c = appliedUiSchemaOptions.views) !== null && _c !== void 0 ? _c : ['hours', 'minutes'];
     var firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -855,9 +911,15 @@ var MaterialTimeControl = function (props) {
             : null;
     var secondFormHelperText = showDescription && !isValid ? errors : null;
     var onChange = React.useMemo(function () { return createOnChangeHandler(path, handleChange, saveFormat); }, [path, handleChange, saveFormat]);
+    var value = getData(data, saveFormat);
+    var valueInInputFormat = value ? value.format(format) : '';
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(lab.LocalizationProvider, { dateAdapter: AdapterDayjs__default["default"] },
-            React__default["default"].createElement(lab.TimePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: function (params) { return (React__default["default"].createElement(material.TextField, __assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
+        React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs },
+            React__default["default"].createElement(xDatePickers.TimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: function (variant) { return (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept']); }
+                    }
+                }, renderInput: function (params) { return (React__default["default"].createElement(ResettableTextField, __assign({}, params, { rawValue: data, dayjsValueIsValid: value !== null, valueInInputFormat: valueInInputFormat, focused: focused, id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: __assign(__assign({}, params.inputProps), { type: 'text' }), InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))); } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -900,7 +962,8 @@ var materialSliderControlTester = core.rankWith(4, core.isRangeControl);
 var MaterialSliderControl$1 = react.withJsonFormsControlProps(MaterialSliderControl);
 
 var MaterialRadioGroup = function (props) {
-    var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
+    var _a;
+    var _b = useFocus(), focused = _b[0], onFocus = _b[1], onBlur = _b[2];
     var config = props.config, id = props.id, label = props.label, required = props.required, description = props.description, errors = props.errors, data = props.data, visible = props.visible, options = props.options, handleChange = props.handleChange, path = props.path, enabled = props.enabled;
     var isValid = errors.length === 0;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, props.uischema.options);
@@ -909,7 +972,7 @@ var MaterialRadioGroup = function (props) {
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(material.FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
             React__default["default"].createElement(material.FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React__default["default"].createElement(material.RadioGroup, { value: props.data, onChange: onChange, row: true }, options.map(function (option) { return (React__default["default"].createElement(material.FormControlLabel, { value: option.value, key: option.label, control: React__default["default"].createElement(material.Radio, { checked: data === option.value }), label: option.label, disabled: !enabled })); })),
+            React__default["default"].createElement(material.RadioGroup, { value: (_a = props.data) !== null && _a !== void 0 ? _a : '', onChange: onChange, row: true }, options.map(function (option) { return (React__default["default"].createElement(material.FormControlLabel, { value: option.value, key: option.label, control: React__default["default"].createElement(material.Radio, { checked: data === option.value }), label: option.label, disabled: !enabled })); })),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
 };
 
@@ -980,12 +1043,15 @@ var materialAnyOfStringOrEnumControlTester = core.rankWith(5, simpleAnyOf);
 var MaterialAnyOfStringOrEnumControl$1 = react.withJsonFormsControlProps(MaterialAnyOfStringOrEnumControl);
 
 var MaterialOneOfEnumControl = function (props) {
-    var config = props.config, uischema = props.uischema;
+    var config = props.config, uischema = props.uischema, errors = props.errors;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    return (React__default["default"].createElement(MaterialInputControl, __assign({}, props, { input: appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete })));
+    var isValid = errors.length === 0;
+    return (appliedUiSchemaOptions.autocomplete === false ?
+        React__default["default"].createElement(MaterialInputControl, __assign({}, props, { input: MuiSelect })) :
+        React__default["default"].createElement(MuiAutocomplete, __assign({}, props, { isValid: isValid })));
 };
 var materialOneOfEnumControlTester = core.rankWith(5, core.isOneOfEnumControl);
-var MaterialOneOfEnumControl$1 = react.withJsonFormsOneOfEnumProps(MaterialOneOfEnumControl);
+var MaterialOneOfEnumControl$1 = react.withJsonFormsOneOfEnumProps(react.withTranslateProps(React__default["default"].memo(MaterialOneOfEnumControl)), false);
 
 var MaterialOneOfRadioGroupControl = function (props) {
     return React__default["default"].createElement(MaterialRadioGroup, __assign({}, props));
@@ -1014,18 +1080,18 @@ var Unwrapped = {
 var groupTester = core.rankWith(1, core.uiTypeIs('Group'));
 var style = { marginBottom: '10px' };
 var GroupComponent = React__default["default"].memo(function (_a) {
-    var visible = _a.visible, enabled = _a.enabled, uischema = _a.uischema, props = __rest(_a, ["visible", "enabled", "uischema"]);
+    var visible = _a.visible, enabled = _a.enabled, uischema = _a.uischema, label = _a.label, props = __rest(_a, ["visible", "enabled", "uischema", "label"]);
     var groupLayout = uischema;
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(material.Card, { style: style },
-            !isEmpty__default["default"](groupLayout.label) && (React__default["default"].createElement(material.CardHeader, { title: groupLayout.label })),
+            !isEmpty__default["default"](label) && (React__default["default"].createElement(material.CardHeader, { title: label })),
             React__default["default"].createElement(material.CardContent, null,
                 React__default["default"].createElement(MaterialLayoutRenderer, __assign({}, props, { visible: visible, enabled: enabled, elements: groupLayout.elements }))))));
 });
 var MaterializedGroupLayoutRenderer = function (_a) {
-    var uischema = _a.uischema, schema = _a.schema, path = _a.path, visible = _a.visible, enabled = _a.enabled, renderers = _a.renderers, cells = _a.cells, direction = _a.direction;
+    var uischema = _a.uischema, schema = _a.schema, path = _a.path, visible = _a.visible, enabled = _a.enabled, renderers = _a.renderers, cells = _a.cells, direction = _a.direction, label = _a.label;
     var groupLayout = uischema;
-    return (React__default["default"].createElement(GroupComponent, { elements: groupLayout.elements, schema: schema, path: path, direction: direction, visible: visible, enabled: enabled, uischema: uischema, renderers: renderers, cells: cells }));
+    return (React__default["default"].createElement(GroupComponent, { elements: groupLayout.elements, schema: schema, path: path, direction: direction, visible: visible, enabled: enabled, uischema: uischema, renderers: renderers, cells: cells, label: label }));
 };
 var MaterialGroupLayout = react.withJsonFormsLayoutProps(MaterializedGroupLayoutRenderer);
 var materialGroupTester = core.withIncreasedRank(1, groupTester);
@@ -1069,12 +1135,12 @@ var isSingleLevelCategorization = core.and(core.uiTypeIs('Categorization'), func
 });
 var materialCategorizationTester = core.rankWith(1, isSingleLevelCategorization);
 var MaterialCategorizationLayoutRenderer = function (props) {
-    var data = props.data, path = props.path, renderers = props.renderers, cells = props.cells, schema = props.schema, uischema = props.uischema, visible = props.visible, enabled = props.enabled, selected = props.selected, onChange = props.onChange, ajv = props.ajv;
+    var data = props.data, path = props.path, renderers = props.renderers, cells = props.cells, schema = props.schema, uischema = props.uischema, visible = props.visible, enabled = props.enabled, selected = props.selected, onChange = props.onChange, ajv = props.ajv, t = props.t;
     var categorization = uischema;
     var _a = React.useState(selected !== null && selected !== void 0 ? selected : 0), activeCategory = _a[0], setActiveCategory = _a[1];
-    var categories = categorization.elements.filter(function (category) {
+    var categories = React.useMemo(function () { return categorization.elements.filter(function (category) {
         return core.isVisible(category, data, undefined, ajv);
-    });
+    }); }, [categorization, data, ajv]);
     var childProps = {
         elements: categories[activeCategory].elements,
         schema: schema,
@@ -1091,13 +1157,18 @@ var MaterialCategorizationLayoutRenderer = function (props) {
         }
         setActiveCategory(value);
     };
+    var tabLabels = React.useMemo(function () {
+        return categories.map(function (e) {
+            return core.deriveLabelForUISchemaElement(e, t);
+        });
+    }, [categories, t]);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(material.AppBar, { position: 'static' },
-            React__default["default"].createElement(material.Tabs, { value: activeCategory, onChange: onTabChange, textColor: 'inherit', indicatorColor: 'secondary', variant: 'scrollable' }, categories.map(function (e, idx) { return (React__default["default"].createElement(material.Tab, { key: idx, label: e.label })); }))),
+            React__default["default"].createElement(material.Tabs, { value: activeCategory, onChange: onTabChange, textColor: 'inherit', indicatorColor: 'secondary', variant: 'scrollable' }, categories.map(function (_, idx) { return (React__default["default"].createElement(material.Tab, { key: idx, label: tabLabels[idx] })); }))),
         React__default["default"].createElement("div", { style: { marginTop: '0.5em' } },
             React__default["default"].createElement(MaterialLayoutRenderer, __assign({}, childProps)))));
 };
-var MaterialCategorizationLayout = react.withJsonFormsLayoutProps(withAjvProps(MaterialCategorizationLayoutRenderer));
+var MaterialCategorizationLayout = withAjvProps(react.withTranslateProps(react.withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));
 
 var iconStyle = { float: 'right' };
 var ExpandPanelRendererComponent = function (props) {
@@ -1234,7 +1305,7 @@ var MaterialDateCell$1 = react.withJsonFormsCellProps(MaterialDateCell);
 
 var MaterialEnumCell = function (props) { return (React__default["default"].createElement(MuiSelect, __assign({}, props))); };
 var materialEnumCellTester = core.rankWith(2, core.isEnumControl);
-var MaterialEnumCell$1 = react.withJsonFormsEnumCellProps(MaterialEnumCell);
+var MaterialEnumCell$1 = react.withJsonFormsEnumCellProps(react.withTranslateProps(React__default["default"].memo(MaterialEnumCell)), false);
 
 var MaterialIntegerCell = function (props) { return (React__default["default"].createElement(MuiInputInteger, __assign({}, props))); };
 var materialIntegerCellTester = core.rankWith(2, core.isIntegerControl);
@@ -1250,7 +1321,7 @@ var MaterialNumberFormatCell$1 = react.withJsonFormsCellProps(MaterialNumberForm
 
 var MaterialOneOfEnumCell = function (props) { return (React__default["default"].createElement(MuiSelect, __assign({}, props))); };
 var materialOneOfEnumCellTester = core.rankWith(2, core.isOneOfEnumControl);
-var MaterialOneOfEnumCell$1 = react.withJsonFormsOneOfEnumCellProps(MaterialOneOfEnumCell);
+var MaterialOneOfEnumCell$1 = react.withJsonFormsOneOfEnumCellProps(react.withTranslateProps(React__default["default"].memo(MaterialOneOfEnumCell)), false);
 
 var MaterialTextCell = function (props) { return (React__default["default"].createElement(MuiInputText, __assign({}, props))); };
 var materialTextCellTester = core.rankWith(1, core.isStringControl);
@@ -1279,7 +1350,7 @@ var MaterialCategorizationStepperLayoutRenderer = function (props) {
     var handleStep = function (step) {
         setActiveCategory(step);
     };
-    var data = props.data, path = props.path, renderers = props.renderers, schema = props.schema, uischema = props.uischema, visible = props.visible, cells = props.cells, config = props.config, ajv = props.ajv;
+    var data = props.data, path = props.path, renderers = props.renderers, schema = props.schema, uischema = props.uischema, visible = props.visible, cells = props.cells, config = props.config, ajv = props.ajv, t = props.t;
     var categorization = uischema;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var buttonWrapperStyle = {
@@ -1293,9 +1364,9 @@ var MaterialCategorizationStepperLayoutRenderer = function (props) {
     var buttonStyle = {
         marginRight: '1em'
     };
-    var categories = categorization.elements.filter(function (category) {
+    var categories = React.useMemo(function () { return categorization.elements.filter(function (category) {
         return core.isVisible(category, data, undefined, ajv);
-    });
+    }); }, [categorization, data, ajv]);
     var childProps = {
         elements: categories[activeCategory].elements,
         schema: schema,
@@ -1305,16 +1376,21 @@ var MaterialCategorizationStepperLayoutRenderer = function (props) {
         renderers: renderers,
         cells: cells
     };
+    var tabLabels = React.useMemo(function () {
+        return categories.map(function (e) {
+            return core.deriveLabelForUISchemaElement(e, t);
+        });
+    }, [categories, t]);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.Stepper, { activeStep: activeCategory, nonLinear: true }, categories.map(function (e, idx) { return (React__default["default"].createElement(material.Step, { key: e.label },
-            React__default["default"].createElement(material.StepButton, { onClick: function () { return handleStep(idx); } }, e.label))); })),
+        React__default["default"].createElement(material.Stepper, { activeStep: activeCategory, nonLinear: true }, categories.map(function (_, idx) { return (React__default["default"].createElement(material.Step, { key: tabLabels[idx] },
+            React__default["default"].createElement(material.StepButton, { onClick: function () { return handleStep(idx); } }, tabLabels[idx]))); })),
         React__default["default"].createElement("div", null,
             React__default["default"].createElement(MaterialLayoutRenderer, __assign({}, childProps))),
         !!appliedUiSchemaOptions.showNavButtons ? (React__default["default"].createElement("div", { style: buttonWrapperStyle },
             React__default["default"].createElement(material.Button, { style: buttonNextStyle, variant: "contained", color: "primary", disabled: activeCategory >= categories.length - 1, onClick: function () { return handleStep(activeCategory + 1); } }, "Next"),
             React__default["default"].createElement(material.Button, { style: buttonStyle, color: "secondary", variant: "contained", disabled: activeCategory <= 0, onClick: function () { return handleStep(activeCategory - 1); } }, "Previous"))) : (React__default["default"].createElement(React__default["default"].Fragment, null))));
 };
-var MaterialCategorizationStepperLayout = react.withJsonFormsLayoutProps(withAjvProps(MaterialCategorizationStepperLayoutRenderer));
+var MaterialCategorizationStepperLayout = withAjvProps(react.withTranslateProps(react.withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer)));
 
 var materialRenderers = [
     {
@@ -1433,9 +1509,11 @@ exports.MuiInputNumberFormat = MuiInputNumberFormat;
 exports.MuiInputText = MuiInputText;
 exports.MuiInputTime = MuiInputTime;
 exports.MuiSelect = MuiSelect;
+exports.ResettableTextField = ResettableTextField;
 exports.Unwrapped = Unwrapped;
 exports.createOnChangeHandler = createOnChangeHandler;
 exports.getData = getData;
+exports.i18nDefaults = i18nDefaults;
 exports.materialAllOfControlTester = materialAllOfControlTester;
 exports.materialAnyOfControlTester = materialAnyOfControlTester;
 exports.materialAnyOfStringOrEnumControlTester = materialAnyOfStringOrEnumControlTester;