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

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

@@ -448,12 +448,6 @@ 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, textInputValue) {
     if (!time) {
@@ -514,9 +508,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 () {
@@ -539,27 +533,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 }));
 });
 
@@ -580,6 +586,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];
@@ -597,7 +604,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();
@@ -661,12 +668,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;
@@ -772,24 +778,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; }), freeSolo: false, 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;
@@ -1006,12 +1028,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));
@@ -1040,18 +1065,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);
@@ -1095,12 +1120,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,
@@ -1117,13 +1142,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) {
@@ -1260,7 +1290,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);
@@ -1276,7 +1306,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);
@@ -1305,7 +1335,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 = {
@@ -1319,9 +1349,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,
@@ -1331,16 +1361,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 = [
     {
@@ -1463,6 +1498,7 @@ exports.ResettableTextField = ResettableTextField;
 exports.Unwrapped = Unwrapped;
 exports.createOnChangeHandler = createOnChangeHandler;
 exports.getData = getData;
+exports.i18nDefaults = i18nDefaults;
 exports.materialAllOfControlTester = materialAllOfControlTester;
 exports.materialAnyOfControlTester = materialAnyOfControlTester;
 exports.materialAnyOfStringOrEnumControlTester = materialAnyOfStringOrEnumControlTester;