@jsonforms/material-renderers 3.0.0-beta.3 → 3.0.0-rc.0

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

@@ -1,11 +1,11 @@
-import { createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, rankWith, isObjectControl, findUISchema, Generate, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, isAnyOfControl, isOneOfControl, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, or, isObjectArrayControl, isPrimitiveArrayControl, isObjectArray, computeLabel, composePaths, isBooleanControl, optionIs, isDescriptionHidden, showAsRequired, isEnumControl, isDateControl, isTimeControl, isDateTimeControl, isRangeControl, isIntegerControl, isNumberControl, isStringControl, isOneOfEnumControl, withIncreasedRank, isVisible, update, moveUp, moveDown, getFirstPrimitiveProp, createId, removeId, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
-import React, { useMemo, Fragment, useState, useCallback, useEffect } from 'react';
-import { DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsDetailProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsAnyOfProps, withJsonFormsOneOfProps, withJsonFormsMultiEnumProps, withJsonFormsLayoutProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, withJsonFormsEnumProps, Control, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
+import { createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, rankWith, isObjectControl, findUISchema, Generate, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, isAnyOfControl, isOneOfControl, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, or, isObjectArrayControl, isPrimitiveArrayControl, isObjectArray, computeLabel, composePaths, isBooleanControl, optionIs, isDescriptionHidden, showAsRequired, isEnumControl, isDateControl, isTimeControl, isDateTimeControl, isRangeControl, isIntegerControl, isNumberControl, isStringControl, isOneOfEnumControl, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, update, moveUp, moveDown, getFirstPrimitiveProp, createId, removeId, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
+import React, { useMemo, Fragment, useState, useCallback, useRef, useEffect } from 'react';
+import { DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsDetailProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsAnyOfProps, withJsonFormsOneOfProps, withJsonFormsMultiEnumProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, withJsonFormsEnumProps, withTranslateProps, Control, withJsonFormsOneOfEnumProps, withJsonFormsLayoutProps, withJsonFormsContext, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import { TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, Hidden, IconButton, FormHelperText, Table, TableHead, TableBody, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, Checkbox, Select, MenuItem, Input, useTheme, InputAdornment, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, Switch, InputLabel, Autocomplete, TextField, FormLabel, Slider, RadioGroup, Radio, Card, CardHeader, CardContent, AppBar, Accordion, AccordionSummary, AccordionDetails, Stepper, Step, StepButton } from '@mui/material';
+import { TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, Hidden, IconButton, FormHelperText, Table, TableHead, TableBody, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, Checkbox, TextField, Select, MenuItem, Input, useTheme, InputAdornment, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, Switch, InputLabel, Autocomplete, FormLabel, Slider, RadioGroup, Radio, Card, CardHeader, CardContent, AppBar, Accordion, AccordionSummary, AccordionDetails, Stepper, Step, StepButton } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
 import ArrowUpward from '@mui/icons-material/ArrowUpward';
@@ -168,7 +168,7 @@ const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uis
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     return (React.createElement(React.Fragment, null, range(data).map((index) => {
         const childPath = Paths.compose(path, `${index}`);
-        return (React.createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons, enabled: enabled, cells: cells, path: path }));
+        return (React.createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons, enabled: enabled, cells: cells, path: path }));
     })));
 };
 class MaterialTableControl extends React.Component {
@@ -327,20 +327,14 @@ const MuiCheckbox = React.memo((props) => {
     return (React.createElement(Checkbox, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputProps }));
 });
 
-const MuiSelect = React.memo((props) => {
-    const { data, className, id, enabled, uischema, path, handleChange, options, config } = props;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    return (React.createElement(Select, { className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: ev => handleChange(path, ev.target.value), fullWidth: true, variant: 'standard' }, [React.createElement(MenuItem, { value: '', key: 'empty' })].concat(options.map(optionValue => (React.createElement(MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label))))));
-});
-
 dayjs.extend(customParsing);
-const createOnChangeHandler = (path, handleChange, saveFormat) => (time) => {
+const createOnChangeHandler = (path, handleChange, saveFormat) => (time, textInputValue) => {
     if (!time) {
         handleChange(path, undefined);
         return;
     }
     const result = dayjs(time).format(saveFormat);
-    handleChange(path, result === 'Invalid Date' ? undefined : result);
+    handleChange(path, result === 'Invalid Date' ? textInputValue : result);
 };
 const getData = (data, saveFormat) => {
     if (!data) {
@@ -352,6 +346,22 @@ const getData = (data, saveFormat) => {
     }
     return dayjsData;
 };
+const ResettableTextField = ({ rawValue, dayjsValueIsValid, valueInInputFormat, focused, inputProps, ...props }) => {
+    const value = useRef({ lastInput: inputProps?.value, toShow: 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?.value !== value.current.lastInput) {
+        value.current.lastInput = inputProps?.value;
+        value.current.toShow = inputProps?.value;
+    }
+    return React.createElement(TextField, Object.assign({}, props, { inputProps: { ...inputProps, value: value.current.toShow || '' } }));
+};
 
 const renderLayoutElements = (elements, schema, path, enabled, renderers, cells) => {
     return elements.map((child, index) => (React.createElement(Grid, { item: true, key: `${path}-${index}`, xs: true },
@@ -373,8 +383,8 @@ const withAjvProps = (Component) => (props) => {
     return (React.createElement(Component, Object.assign({}, props, { ajv: ajv })));
 };
 
-const eventToValue$2 = (ev) => ev.target.value;
-const useDebouncedChange = (handleChange, defaultValue, data, path, eventToValueFunction = eventToValue$2, timeout = 300) => {
+const eventToValue$3 = (ev) => ev.target.value;
+const useDebouncedChange = (handleChange, defaultValue, data, path, eventToValueFunction = eventToValue$3, timeout = 300) => {
     const [input, setInput] = useState(data ?? defaultValue);
     useEffect(() => {
         setInput(data ?? defaultValue);
@@ -396,23 +406,35 @@ const useFocus = () => {
     return [focused, onFocus, onBlur];
 };
 
+const i18nDefaults = {
+    'enum.none': 'None'
+};
+
+const MuiSelect = React.memo((props) => {
+    const { data, className, id, enabled, schema, uischema, path, handleChange, options, config, t } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }), [t, schema, uischema, path]);
+    return (React.createElement(Select, { className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: ev => handleChange(path, ev.target.value || undefined), fullWidth: true, variant: 'standard' }, [React.createElement(MenuItem, { value: '', key: 'jsonforms.enum.none' },
+            React.createElement("em", null, noneOptionLabel))].concat(options.map(optionValue => (React.createElement(MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label))))));
+});
+
 const toNumber$1 = (value) => value === '' ? undefined : parseInt(value, 10);
-const eventToValue$1 = (ev) => toNumber$1(ev.target.value);
+const eventToValue$2 = (ev) => toNumber$1(ev.target.value);
 const MuiInputInteger = React.memo((props) => {
     const { data, className, id, enabled, uischema, path, handleChange, config } = props;
     const inputProps = { step: '1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$1);
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$2);
     return (React.createElement(Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
 });
 
 const toNumber = (value) => value === '' ? undefined : parseFloat(value);
-const eventToValue = (ev) => toNumber(ev.target.value);
+const eventToValue$1 = (ev) => toNumber(ev.target.value);
 const MuiInputNumber = React.memo((props) => {
     const { data, className, id, enabled, uischema, path, handleChange, config } = props;
     const inputProps = { step: '0.1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$1);
     return (React.createElement(Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
 });
 
@@ -433,6 +455,7 @@ const MuiInputNumberFormat = React.memo((props) => {
     return (React.createElement(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 }));
 });
 
+const eventToValue = (ev) => ev.target.value === '' ? undefined : ev.target.value;
 const MuiInputText = React.memo((props) => {
     const [showAdornment, setShowAdornment] = useState(false);
     const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, muiInputProps, inputComponent } = props;
@@ -449,7 +472,7 @@ const MuiInputText = React.memo((props) => {
     if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
         inputProps.size = maxLength;
     }
-    const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path);
+    const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path, eventToValue);
     const onPointerEnter = () => setShowAdornment(true);
     const onPointerLeave = () => setShowAdornment(false);
     const theme = useTheme();
@@ -503,12 +526,11 @@ var MaterialEnumArrayRenderer$1 = withJsonFormsMultiEnumProps(MaterialEnumArrayR
 const materialArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));
 
 const materialLabelRendererTester = rankWith(1, uiTypeIs('Label'));
-const MaterialLabelRenderer = ({ uischema, visible }) => {
-    const labelElement = uischema;
+const MaterialLabelRenderer = ({ text, visible }) => {
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(Typography, { variant: 'h6' }, labelElement.text !== undefined && labelElement.text !== null && labelElement.text)));
+        React.createElement(Typography, { variant: 'h6' }, text)));
 };
-var MaterialLabelRenderer$1 = withJsonFormsLayoutProps(MaterialLabelRenderer);
+var MaterialLabelRenderer$1 = withJsonFormsLabelProps(MaterialLabelRenderer);
 
 const ArrayLayoutToolbar = React.memo(({ label, errors, addItem, path, createDefault }) => {
     return (React.createElement(Toolbar, { disableGutters: true },
@@ -606,24 +628,40 @@ const MaterialInputControl = (props) => {
 };
 
 const MuiAutocomplete = (props) => {
-    const { data, className, id, enabled, uischema, path, handleChange, options, config, getOptionLabel, renderOption, filterOptions } = props;
+    const { description, errors, visible, required, label, data, className, id, enabled, uischema, path, handleChange, options, config, getOptionLabel, renderOption, filterOptions, isValid } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const [inputValue, setInputValue] = React.useState(data ?? '');
+    const [focused, onFocus, onBlur] = useFocus();
     const findOption = options.find(o => o.value === data) ?? null;
-    return (React.createElement(Autocomplete, { className: className, id: id, disabled: !enabled, value: findOption, onChange: (_event, newValue) => {
-            handleChange(path, newValue?.value);
-        }, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
-            setInputValue(newInputValue);
-        }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (option => option?.label), style: { marginTop: 16 }, renderInput: params => (React.createElement(Input, { style: { width: '100%' }, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled })), renderOption: renderOption, filterOptions: filterOptions }));
+    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
+    const firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    const secondFormHelperText = showDescription && !isValid ? errors : null;
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(Autocomplete, { className: className, id: id, disabled: !enabled, value: findOption, onChange: (_event, newValue) => {
+                handleChange(path, newValue?.value);
+            }, 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, 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.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+        React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText)));
 };
 
 const MaterialEnumControl = (props) => {
-    const { config, uischema } = props;
+    const { config, uischema, errors } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    return (React.createElement(MaterialInputControl, Object.assign({}, props, { input: appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete })));
+    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 })));
 };
 const materialEnumControlTester = rankWith(2, isEnumControl);
-var MaterialEnumControl$1 = withJsonFormsEnumProps(MaterialEnumControl);
+var MaterialEnumControl$1 = withJsonFormsEnumProps(withTranslateProps(React.memo(MaterialEnumControl)), false);
 
 const MaterialNativeControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
@@ -647,6 +685,7 @@ const MaterialDateControl = (props) => {
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
     const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+    const views = appliedUiSchemaOptions.views ?? ['year', 'day'];
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -654,9 +693,14 @@ const MaterialDateControl = (props) => {
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    const value = getData(data, saveFormat);
+    const valueInInputFormat = value ? value.format(format) : '';
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(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: params => (React.createElement(TextField, Object.assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: { ...params.inputProps, type: 'text' }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
+            React.createElement(DatePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(ResettableTextField, Object.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: {
+                        ...params.inputProps,
+                        type: 'text',
+                    }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -671,6 +715,7 @@ const MaterialDateTimeControl = (props) => {
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
     const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
+    const views = appliedUiSchemaOptions.views ?? ['year', 'day', 'hours', 'minutes'];
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -678,9 +723,14 @@ const MaterialDateTimeControl = (props) => {
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    const value = getData(data, saveFormat);
+    const valueInInputFormat = value ? value.format(format) : '';
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(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: params => (React.createElement(TextField, Object.assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: { ...params.inputProps, type: 'text' }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
+            React.createElement(DateTimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(ResettableTextField, Object.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: {
+                        ...params.inputProps,
+                        type: 'text',
+                    }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -695,6 +745,7 @@ const MaterialTimeControl = (props) => {
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
     const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+    const views = appliedUiSchemaOptions.views ?? ['hours', 'minutes'];
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -702,9 +753,14 @@ const MaterialTimeControl = (props) => {
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
     const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    const value = getData(data, saveFormat);
+    const valueInInputFormat = value ? value.format(format) : '';
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(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: params => (React.createElement(TextField, Object.assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: { ...params.inputProps, type: 'text' }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
+            React.createElement(TimePicker, { label: label, value: value, clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(ResettableTextField, Object.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: {
+                        ...params.inputProps,
+                        type: 'text'
+                    }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
             React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
@@ -818,12 +874,15 @@ const materialAnyOfStringOrEnumControlTester = rankWith(5, simpleAnyOf);
 var MaterialAnyOfStringOrEnumControl$1 = withJsonFormsControlProps(MaterialAnyOfStringOrEnumControl);
 
 const MaterialOneOfEnumControl = (props) => {
-    const { config, uischema } = props;
+    const { config, uischema, errors } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    return (React.createElement(MaterialInputControl, Object.assign({}, props, { input: appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete })));
+    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 })));
 };
 const materialOneOfEnumControlTester = rankWith(5, isOneOfEnumControl);
-var MaterialOneOfEnumControl$1 = withJsonFormsOneOfEnumProps(MaterialOneOfEnumControl);
+var MaterialOneOfEnumControl$1 = withJsonFormsOneOfEnumProps(withTranslateProps(React.memo(MaterialOneOfEnumControl)), false);
 
 const MaterialOneOfRadioGroupControl = (props) => {
     return React.createElement(MaterialRadioGroup, Object.assign({}, props));
@@ -851,17 +910,17 @@ const Unwrapped = {
 
 const groupTester = rankWith(1, uiTypeIs('Group'));
 const style = { marginBottom: '10px' };
-const GroupComponent = React.memo(({ visible, enabled, uischema, ...props }) => {
+const GroupComponent = React.memo(({ visible, enabled, uischema, label, ...props }) => {
     const groupLayout = uischema;
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(Card, { style: style },
-            !isEmpty(groupLayout.label) && (React.createElement(CardHeader, { title: groupLayout.label })),
+            !isEmpty(label) && (React.createElement(CardHeader, { title: label })),
             React.createElement(CardContent, null,
                 React.createElement(MaterialLayoutRenderer, Object.assign({}, props, { visible: visible, enabled: enabled, elements: groupLayout.elements }))))));
 });
-const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction }) => {
+const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label }) => {
     const groupLayout = uischema;
-    return (React.createElement(GroupComponent, { elements: groupLayout.elements, schema: schema, path: path, direction: direction, visible: visible, enabled: enabled, uischema: uischema, renderers: renderers, cells: cells }));
+    return (React.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 = withJsonFormsLayoutProps(MaterializedGroupLayoutRenderer);
 const materialGroupTester = withIncreasedRank(1, groupTester);
@@ -903,10 +962,10 @@ const isSingleLevelCategorization = and(uiTypeIs('Categorization'), (uischema) =
 });
 const materialCategorizationTester = rankWith(1, isSingleLevelCategorization);
 const MaterialCategorizationLayoutRenderer = (props) => {
-    const { data, path, renderers, cells, schema, uischema, visible, enabled, selected, onChange, ajv } = props;
+    const { data, path, renderers, cells, schema, uischema, visible, enabled, selected, onChange, ajv, t } = props;
     const categorization = uischema;
     const [activeCategory, setActiveCategory] = useState(selected ?? 0);
-    const categories = categorization.elements.filter((category) => isVisible(category, data, undefined, ajv));
+    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv)), [categorization, data, ajv]);
     const childProps = {
         elements: categories[activeCategory].elements,
         schema,
@@ -923,13 +982,16 @@ const MaterialCategorizationLayoutRenderer = (props) => {
         }
         setActiveCategory(value);
     };
+    const tabLabels = useMemo(() => {
+        return categories.map((e) => deriveLabelForUISchemaElement(e, t));
+    }, [categories, t]);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(AppBar, { position: 'static' },
-            React.createElement(Tabs, { value: activeCategory, onChange: onTabChange, textColor: 'inherit', indicatorColor: 'secondary', variant: 'scrollable' }, categories.map((e, idx) => (React.createElement(Tab, { key: idx, label: e.label }))))),
+            React.createElement(Tabs, { value: activeCategory, 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)))));
 };
-var MaterialCategorizationLayout = withJsonFormsLayoutProps(withAjvProps(MaterialCategorizationLayoutRenderer));
+var MaterialCategorizationLayout = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));
 
 const iconStyle = { float: 'right' };
 const ExpandPanelRendererComponent = (props) => {
@@ -942,6 +1004,7 @@ const ExpandPanelRendererComponent = (props) => {
     const { childLabel, childPath, index, expanded, moveDown, moveUp, enableMoveDown, enableMoveUp, handleExpansion, removeItems, path, rootSchema, schema, uischema, uischemas, renderers, cells, config } = props;
     const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    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(Grid, { container: true, alignItems: 'center' },
@@ -955,7 +1018,7 @@ const ExpandPanelRendererComponent = (props) => {
                     React.createElement(Grid, { container: true, justifyContent: 'flex-end' },
                         React.createElement(Grid, { item: true },
                             React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
-                                appliedUiSchemaOptions.showSortButtons ? (React.createElement(Fragment, null,
+                                showSortButtons ? (React.createElement(Fragment, null,
                                     React.createElement(Grid, { item: true },
                                         React.createElement(IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": `Move up`, size: 'large' },
                                             React.createElement(ArrowUpward, null))),
@@ -1025,12 +1088,12 @@ const MaterialArrayLayoutComponent = (props) => {
 };
 const MaterialArrayLayout$1 = React.memo(MaterialArrayLayoutComponent);
 
-const MaterialArrayLayoutRenderer = ({ visible, enabled, id, uischema, schema, label, rootSchema, renderers, cells, data, path, errors, uischemas, addItem }) => {
+const MaterialArrayLayoutRenderer = ({ visible, addItem, ...props }) => {
     const addItemCb = useCallback((p, value) => addItem(p, value), [
         addItem
     ]);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(MaterialArrayLayout$1, { label: label, uischema: uischema, schema: schema, id: id, rootSchema: rootSchema, errors: errors, enabled: enabled, visible: visible, data: data, path: path, addItem: addItemCb, renderers: renderers, cells: cells, uischemas: uischemas })));
+        React.createElement(MaterialArrayLayout$1, Object.assign({ visible: visible, addItem: addItemCb }, props))));
 };
 const materialArrayLayoutTester = rankWith(4, isObjectArrayWithNesting);
 var MaterialArrayLayout = withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
@@ -1057,7 +1120,7 @@ var MaterialDateCell$1 = withJsonFormsCellProps(MaterialDateCell);
 
 const MaterialEnumCell = (props) => (React.createElement(MuiSelect, Object.assign({}, props)));
 const materialEnumCellTester = rankWith(2, isEnumControl);
-var MaterialEnumCell$1 = withJsonFormsEnumCellProps(MaterialEnumCell);
+var MaterialEnumCell$1 = withJsonFormsEnumCellProps(withTranslateProps(React.memo(MaterialEnumCell)), false);
 
 const MaterialIntegerCell = (props) => (React.createElement(MuiInputInteger, Object.assign({}, props)));
 const materialIntegerCellTester = rankWith(2, isIntegerControl);
@@ -1073,7 +1136,7 @@ var MaterialNumberFormatCell$1 = withJsonFormsCellProps(MaterialNumberFormatCell
 
 const MaterialOneOfEnumCell = (props) => (React.createElement(MuiSelect, Object.assign({}, props)));
 const materialOneOfEnumCellTester = rankWith(2, isOneOfEnumControl);
-var MaterialOneOfEnumCell$1 = withJsonFormsOneOfEnumCellProps(MaterialOneOfEnumCell);
+var MaterialOneOfEnumCell$1 = withJsonFormsOneOfEnumCellProps(withTranslateProps(React.memo(MaterialOneOfEnumCell)), false);
 
 const MaterialTextCell = (props) => (React.createElement(MuiInputText, Object.assign({}, props)));
 const materialTextCellTester = rankWith(1, isStringControl);
@@ -1102,7 +1165,7 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
     const handleStep = (step) => {
         setActiveCategory(step);
     };
-    const { data, path, renderers, schema, uischema, visible, cells, config, ajv } = props;
+    const { data, path, renderers, schema, uischema, visible, cells, config, ajv, t } = props;
     const categorization = uischema;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const buttonWrapperStyle = {
@@ -1116,7 +1179,7 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
     const buttonStyle = {
         marginRight: '1em'
     };
-    const categories = categorization.elements.filter((category) => isVisible(category, data, undefined, ajv));
+    const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv)), [categorization, data, ajv]);
     const childProps = {
         elements: categories[activeCategory].elements,
         schema,
@@ -1126,16 +1189,19 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
         renderers,
         cells
     };
+    const tabLabels = useMemo(() => {
+        return categories.map((e) => deriveLabelForUISchemaElement(e, t));
+    }, [categories, t]);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(Stepper, { activeStep: activeCategory, nonLinear: true }, categories.map((e, idx) => (React.createElement(Step, { key: e.label },
-            React.createElement(StepButton, { onClick: () => handleStep(idx) }, e.label))))),
+        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))),
         !!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))));
 };
-var MaterialCategorizationStepperLayout = withJsonFormsLayoutProps(withAjvProps(MaterialCategorizationStepperLayoutRenderer));
+var MaterialCategorizationStepperLayout = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer)));
 
 const materialRenderers = [
     {
@@ -1208,5 +1274,5 @@ const materialCells = [
     { tester: materialTimeCellTester, cell: MaterialTimeCell$1 }
 ];
 
-export { CustomizableCells as Customizable, 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, MaterialLayoutRenderer, 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, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, Unwrapped, createOnChangeHandler, getData, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, withAjvProps };
+export { CustomizableCells as Customizable, 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, MaterialLayoutRenderer, 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, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, ResettableTextField, Unwrapped, createOnChangeHandler, getData, i18nDefaults, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, withAjvProps };
 //# sourceMappingURL=jsonforms-react-material.esm.js.map