@jsonforms/material-renderers 3.0.0-beta.5 → 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 { 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, withJsonFormsLayoutProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, withJsonFormsEnumProps, Control, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/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, TextField, 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 { 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';
@@ -327,12 +327,6 @@ 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, textInputValue) => {
     if (!time) {
@@ -389,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);
@@ -412,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 }));
 });
 
@@ -449,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;
@@ -465,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();
@@ -519,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 },
@@ -622,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), freeSolo: false, 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();
@@ -852,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));
@@ -885,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);
@@ -937,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,
@@ -957,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) => {
@@ -1092,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);
@@ -1108,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);
@@ -1137,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 = {
@@ -1151,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,
@@ -1161,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 = [
     {
@@ -1243,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, ResettableTextField, 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