@jsonforms/material-renderers 3.1.0-alpha.1 → 3.1.0-alpha.3

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

@@ -1,11 +1,12 @@
-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, isDescriptionHidden, optionIs, showAsRequired, isEnumControl, isDateControl, isTimeControl, isDateTimeControl, isRangeControl, isIntegerControl, isNumberControl, isStringControl, isOneOfEnumControl, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, createId, removeId, getFirstPrimitiveProp, update, moveUp, moveDown, 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 React, { useState, useCallback, useMemo, Fragment, useRef, useEffect } from 'react';
+import { Hidden, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, IconButton, FormHelperText, Table, TableHead, TableBody, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Autocomplete, TextField, Checkbox, Input, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, FormLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
+import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, showAsRequired, isBooleanControl, optionIs, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
+import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withTranslateProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
+import omit from 'lodash/omit';
 import isEmpty from 'lodash/isEmpty';
 import union from 'lodash/union';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
-import { TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, IconButton, FormHelperText, Hidden, 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';
@@ -13,7 +14,6 @@ import { styled } from '@mui/material/styles';
 import AddIcon from '@mui/icons-material/Add';
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
 import merge from 'lodash/merge';
-import omit from 'lodash/omit';
 import dayjs from 'dayjs';
 import customParsing from 'dayjs/plugin/customParseFormat';
 import debounce from 'lodash/debounce';
@@ -25,13 +25,54 @@ import get from 'lodash/get';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import Input$1 from '@mui/material/Input';
 
+const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }) => {
+    const delegateUISchema = findMatchingUISchema(uischemas)(schema, uischema.scope, path);
+    if (delegateUISchema) {
+        return (React.createElement(Hidden, { xsUp: !visible },
+            React.createElement(JsonFormsDispatch, { schema: schema, uischema: delegateUISchema, path: path, renderers: renderers, cells: cells })));
+    }
+    const allOfRenderInfos = createCombinatorRenderInfos(schema.allOf, rootSchema, 'allOf', uischema, path, uischemas);
+    return (React.createElement(Hidden, { xsUp: !visible }, allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (React.createElement(JsonFormsDispatch, { key: allOfIndex, schema: allOfRenderInfo.schema, uischema: allOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })))));
+};
+const materialAllOfControlTester = rankWith(3, isAllOfControl);
+var MaterialAllOfRenderer$1 = withJsonFormsAllOfProps(MaterialAllOfRenderer);
+
+class CombinatorProperties extends React.Component {
+    render() {
+        const { schema, combinatorKeyword, path } = this.props;
+        const otherProps = omit(schema, combinatorKeyword);
+        const foundUISchema = Generate.uiSchema(otherProps, 'VerticalLayout');
+        let isLayoutWithElements = false;
+        if (foundUISchema !== null && isLayout(foundUISchema)) {
+            isLayoutWithElements = foundUISchema.elements.length > 0;
+        }
+        if (isLayoutWithElements) {
+            return (React.createElement(JsonFormsDispatch, { schema: otherProps, path: path, uischema: foundUISchema }));
+        }
+        return null;
+    }
+}
+
+const MaterialAnyOfRenderer = ({ schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, }) => {
+    const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
+    const handleChange = useCallback((_ev, value) => setSelectedAnyOf(value), [setSelectedAnyOf]);
+    const anyOf = 'anyOf';
+    const anyOfRenderInfos = createCombinatorRenderInfos(schema.anyOf, rootSchema, anyOf, uischema, path, uischemas);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: anyOf, path: path }),
+        React.createElement(Tabs, { value: selectedAnyOf, onChange: handleChange }, anyOfRenderInfos.map((anyOfRenderInfo) => (React.createElement(Tab, { key: anyOfRenderInfo.label, label: anyOfRenderInfo.label })))),
+        anyOfRenderInfos.map((anyOfRenderInfo, anyOfIndex) => selectedAnyOf === anyOfIndex && (React.createElement(JsonFormsDispatch, { key: anyOfIndex, schema: anyOfRenderInfo.schema, uischema: anyOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })))));
+};
+const materialAnyOfControlTester = rankWith(3, isAnyOfControl);
+var MaterialAnyOfRenderer$1 = withJsonFormsAnyOfProps(MaterialAnyOfRenderer);
+
 const StyledTableCell = styled(TableCell)({
-    borderBottom: 'none'
+    borderBottom: 'none',
 });
 const NoBorderTableCell = ({ children, ...otherProps }) => (React.createElement(StyledTableCell, Object.assign({}, otherProps), children));
 
 const StyledBadge = styled$1(Badge)(({ theme }) => ({
-    color: theme.palette.error.main
+    color: theme.palette.error.main,
 }));
 const ValidationIcon = ({ errorMessages, id }) => {
     return (React.createElement(Tooltip, { id: id, title: errorMessages },
@@ -43,18 +84,19 @@ const fixedCellSmall = {
     paddingLeft: 0,
     paddingRight: 0,
 };
-const TableToolbar = React.memo(({ numColumns, errors, label, path, addItem, schema, enabled }) => (React.createElement(TableRow, null,
-    React.createElement(NoBorderTableCell, { colSpan: numColumns },
-        React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
-            React.createElement(Grid, { item: true },
-                React.createElement(Typography, { variant: 'h6' }, label)),
-            React.createElement(Grid, { item: true }, errors.length !== 0 &&
+const TableToolbar = React.memo(function TableToolbar({ numColumns, errors, label, path, addItem, schema, enabled, translations, }) {
+    return (React.createElement(TableRow, null,
+        React.createElement(NoBorderTableCell, { colSpan: numColumns },
+            React.createElement(Grid, { container: true, justifyContent: 'flex-start', alignItems: 'center', spacing: 2 },
                 React.createElement(Grid, { item: true },
-                    React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))))),
-    enabled ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
-        React.createElement(Tooltip, { id: 'tooltip-add', title: `Add to ${label}`, placement: 'bottom' },
-            React.createElement(IconButton, { "aria-label": `Add to ${label}`, onClick: addItem(path, createDefaultValue(schema)), size: 'large' },
-                React.createElement(AddIcon, null))))) : null)));
+                    React.createElement(Typography, { variant: 'h6' }, label)),
+                React.createElement(Grid, { item: true }, errors.length !== 0 && (React.createElement(Grid, { item: true },
+                    React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })))))),
+        enabled ? (React.createElement(NoBorderTableCell, { align: 'right', style: fixedCellSmall },
+            React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
+                React.createElement(IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, createDefaultValue(schema)), size: 'large' },
+                    React.createElement(AddIcon, null))))) : null));
+});
 
 const styles = {
     fixedCell: {
@@ -62,19 +104,19 @@ const styles = {
         height: '50px',
         paddingLeft: 0,
         paddingRight: 0,
-        textAlign: 'center'
+        textAlign: 'center',
     },
     fixedCellSmall: {
         width: '50px',
         height: '50px',
         paddingLeft: 0,
         paddingRight: 0,
-        textAlign: 'center'
-    }
+        textAlign: 'center',
+    },
 };
 const generateCells = (Cell, schema, rowPath, enabled, cells) => {
     if (schema.type === 'object') {
-        return getValidColumnProps(schema).map(prop => {
+        return getValidColumnProps(schema).map((prop) => {
             const cellPath = Paths.compose(rowPath, prop);
             const props = {
                 propName: prop,
@@ -83,7 +125,7 @@ const generateCells = (Cell, schema, rowPath, enabled, cells) => {
                 rowPath,
                 cellPath,
                 enabled,
-                cells
+                cells,
             };
             return React.createElement(Cell, Object.assign({ key: cellPath }, props));
         });
@@ -93,25 +135,28 @@ const generateCells = (Cell, schema, rowPath, enabled, cells) => {
             schema,
             rowPath,
             cellPath: rowPath,
-            enabled
+            enabled,
         };
         return React.createElement(Cell, Object.assign({ key: rowPath }, props));
     }
 };
 const getValidColumnProps = (scopedSchema) => {
-    if (scopedSchema.type === 'object' && typeof scopedSchema.properties === 'object') {
-        return Object.keys(scopedSchema.properties).filter(prop => scopedSchema.properties[prop].type !== 'array');
+    if (scopedSchema.type === 'object' &&
+        typeof scopedSchema.properties === 'object') {
+        return Object.keys(scopedSchema.properties).filter((prop) => scopedSchema.properties[prop].type !== 'array');
     }
     return [''];
 };
-const EmptyTable = ({ numColumns }) => (React.createElement(TableRow, null,
+const EmptyTable = ({ numColumns, translations }) => (React.createElement(TableRow, null,
     React.createElement(NoBorderTableCell, { colSpan: numColumns },
-        React.createElement(Typography, { align: 'center' }, "No data"))));
-const TableHeaderCell = React.memo(({ title }) => (React.createElement(TableCell, null, title)));
+        React.createElement(Typography, { align: 'center' }, translations.noDataMessage))));
+const TableHeaderCell = React.memo(function TableHeaderCell({ title, }) {
+    return React.createElement(TableCell, null, title);
+});
 const ctxToNonEmptyCellProps = (ctx, ownProps) => {
     const path = ownProps.rowPath +
         (ownProps.schema.type === 'object' ? '.' + ownProps.propName : '');
-    const errors = formatErrorMessage(union(errorsAt(path, ownProps.schema, p => p === path)(ctx.core.errors).map((error) => error.message)));
+    const errors = formatErrorMessage(union(errorsAt(path, ownProps.schema, (p) => p === path)(ctx.core.errors).map((error) => error.message)));
     return {
         rowPath: ownProps.rowPath,
         propName: ownProps.propName,
@@ -121,15 +166,15 @@ const ctxToNonEmptyCellProps = (ctx, ownProps) => {
         path,
         enabled: ownProps.enabled,
         cells: ownProps.cells || ctx.cells,
-        renderers: ownProps.renderers || ctx.renderers
+        renderers: ownProps.renderers || ctx.renderers,
     };
 };
 const controlWithoutLabel = (scope) => ({
     type: 'Control',
     scope: scope,
-    label: false
+    label: false,
 });
-const NonEmptyCellComponent = React.memo(({ path, propName, schema, rootSchema, errors, enabled, renderers, cells, isValid }) => {
+const NonEmptyCellComponent = React.memo(function NonEmptyCellComponent({ path, propName, schema, rootSchema, errors, enabled, renderers, cells, isValid, }) {
     return (React.createElement(NoBorderTableCell, null,
         schema.properties ? (React.createElement(DispatchCell, { schema: Resolve.schema(schema, `#/properties/${encode(propName)}`, rootSchema), uischema: controlWithoutLabel(`#/properties/${encode(propName)}`), path: path, enabled: enabled, renderers: renderers, cells: cells })) : (React.createElement(DispatchCell, { schema: schema, uischema: controlWithoutLabel('#'), path: path, enabled: enabled, renderers: renderers, cells: cells })),
         React.createElement(FormHelperText, { error: !isValid }, !isValid && errors)));
@@ -140,7 +185,7 @@ const NonEmptyCell = (ownProps) => {
     const isValid = isEmpty(emptyCellProps.errors);
     return React.createElement(NonEmptyCellComponent, Object.assign({}, emptyCellProps, { isValid: isValid }));
 };
-const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, moveUpCreator, moveDownCreator, enableUp, enableDown, showSortButtons, enabled, cells, path }) => {
+const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, moveUpCreator, moveDownCreator, enableUp, enableDown, showSortButtons, enabled, cells, path, translations, }) => {
     const moveUp = useMemo(() => moveUpCreator(path, rowIndex), [moveUpCreator, path, rowIndex]);
     const moveDown = useMemo(() => moveDownCreator(path, rowIndex), [moveDownCreator, path, rowIndex]);
     return (React.createElement(TableRow, { key: childPath, hover: true },
@@ -149,25 +194,26 @@ const NonEmptyRowComponent = ({ childPath, schema, rowIndex, openDeleteDialog, m
             React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'flex-end', alignItems: 'center' },
                 showSortButtons ? (React.createElement(Fragment, null,
                     React.createElement(Grid, { item: true },
-                        React.createElement(IconButton, { "aria-label": `Move up`, onClick: moveUp, disabled: !enableUp, size: 'large' },
+                        React.createElement(IconButton, { "aria-label": translations.upAriaLabel, onClick: moveUp, disabled: !enableUp, size: 'large' },
                             React.createElement(ArrowUpward, null))),
                     React.createElement(Grid, { item: true },
-                        React.createElement(IconButton, { "aria-label": `Move down`, onClick: moveDown, disabled: !enableDown, size: 'large' },
+                        React.createElement(IconButton, { "aria-label": translations.downAriaLabel, onClick: moveDown, disabled: !enableDown, size: 'large' },
                             React.createElement(ArrowDownward, null))))) : null,
                 React.createElement(Grid, { item: true },
-                    React.createElement(IconButton, { "aria-label": `Delete`, onClick: () => openDeleteDialog(childPath, rowIndex), size: 'large' },
+                    React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: () => openDeleteDialog(childPath, rowIndex), size: 'large' },
                         React.createElement(DeleteIcon, null)))))) : null));
 };
 const NonEmptyRow = React.memo(NonEmptyRowComponent);
-const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells }) => {
+const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells, translations, }) => {
     const isEmptyTable = data === 0;
     if (isEmptyTable) {
-        return React.createElement(EmptyTable, { numColumns: getValidColumnProps(schema).length + 1 });
+        return (React.createElement(EmptyTable, { numColumns: getValidColumnProps(schema).length + 1, translations: translations }));
     }
     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 || appliedUiSchemaOptions.showArrayTableSortButtons, 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, translations: translations }));
     })));
 };
 class MaterialTableControl extends React.Component {
@@ -176,7 +222,7 @@ class MaterialTableControl extends React.Component {
         this.addItem = (path, value) => this.props.addItem(path, value);
     }
     render() {
-        const { label, path, schema, rootSchema, uischema, errors, openDeleteDialog, visible, enabled, cells } = this.props;
+        const { label, path, schema, rootSchema, uischema, errors, openDeleteDialog, visible, enabled, cells, translations, } = this.props;
         const controlElement = uischema;
         const isObjectSchema = schema.type === 'object';
         const headerCells = isObjectSchema
@@ -185,23 +231,23 @@ class MaterialTableControl extends React.Component {
         return (React.createElement(Hidden, { xsUp: !visible },
             React.createElement(Table, null,
                 React.createElement(TableHead, null,
-                    React.createElement(TableToolbar, { errors: errors, label: label, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled }),
+                    React.createElement(TableToolbar, { errors: errors, label: label, addItem: this.addItem, numColumns: isObjectSchema ? headerCells.length : 1, path: path, uischema: controlElement, schema: schema, rootSchema: rootSchema, enabled: enabled, translations: translations }),
                     isObjectSchema && (React.createElement(TableRow, null,
                         headerCells,
                         enabled ? React.createElement(TableCell, null) : null))),
                 React.createElement(TableBody, null,
-                    React.createElement(TableRows, Object.assign({ openDeleteDialog: openDeleteDialog }, this.props))))));
+                    React.createElement(TableRows, Object.assign({ openDeleteDialog: openDeleteDialog, translations: translations }, this.props))))));
     }
 }
 
-const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel }) => {
+const DeleteDialog = React.memo(function DeleteDialog({ open, onClose, onConfirm, onCancel, title, message, acceptText, declineText, }) {
     return (React.createElement(Dialog, { open: open, keepMounted: true, onClose: onClose, "aria-labelledby": 'alert-dialog-confirmdelete-title', "aria-describedby": 'alert-dialog-confirmdelete-description' },
-        React.createElement(DialogTitle, { id: 'alert-dialog-confirmdelete-title' }, 'Confirm Deletion'),
+        React.createElement(DialogTitle, { id: 'alert-dialog-confirmdelete-title' }, title),
         React.createElement(DialogContent, null,
-            React.createElement(DialogContentText, { id: 'alert-dialog-confirmdelete-description' }, "Are you sure you want to delete the selected entry?")),
+            React.createElement(DialogContentText, { id: 'alert-dialog-confirmdelete-description' }, message)),
         React.createElement(DialogActions, null,
-            React.createElement(Button, { onClick: onCancel, color: 'primary' }, "No"),
-            React.createElement(Button, { onClick: onConfirm, color: 'primary' }, "Yes"))));
+            React.createElement(Button, { onClick: onCancel, color: 'primary' }, declineText),
+            React.createElement(Button, { onClick: onConfirm, color: 'primary' }, acceptText))));
 });
 
 const MaterialArrayControlRenderer = (props) => {
@@ -216,113 +262,55 @@ const MaterialArrayControlRenderer = (props) => {
     }, [setOpen, setPath, setRowData]);
     const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
     const deleteConfirm = useCallback(() => {
-        const p = path.substring(0, path.lastIndexOf(('.')));
+        const p = path.substring(0, path.lastIndexOf('.'));
         removeItems(p, [rowData])();
         setOpen(false);
     }, [setOpen, path, rowData]);
     const deleteClose = useCallback(() => setOpen(false), [setOpen]);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(MaterialTableControl, Object.assign({}, props, { openDeleteDialog: openDeleteDialog })),
-        React.createElement(DeleteDialog, { open: open, onCancel: deleteCancel, onConfirm: deleteConfirm, onClose: deleteClose })));
+        React.createElement(DeleteDialog, { open: open, onCancel: deleteCancel, onConfirm: deleteConfirm, onClose: deleteClose, acceptText: props.translations.deleteDialogAccept, declineText: props.translations.deleteDialogDecline, title: props.translations.deleteDialogTitle, message: props.translations.deleteDialogMessage })));
 };
+const materialArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));
 var MaterialArrayControlRenderer$1 = withJsonFormsArrayLayoutProps(MaterialArrayControlRenderer);
 
-const MaterialObjectRenderer = ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema }) => {
-    const detailUiSchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, () => isEmpty(path) ? Generate.uiSchema(schema, 'VerticalLayout') : { ...Generate.uiSchema(schema, 'Group'), label }, uischema, rootSchema), [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(JsonFormsDispatch, { visible: visible, enabled: enabled, schema: schema, uischema: detailUiSchema, path: path, renderers: renderers, cells: cells })));
-};
-const materialObjectControlTester = rankWith(2, isObjectControl);
-var MaterialObjectRenderer$1 = withJsonFormsDetailProps(MaterialObjectRenderer);
-
-const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema }) => {
-    const delegateUISchema = findMatchingUISchema(uischemas)(schema, uischema.scope, path);
-    if (delegateUISchema) {
-        return (React.createElement(Hidden, { xsUp: !visible },
-            React.createElement(JsonFormsDispatch, { schema: schema, uischema: delegateUISchema, path: path, renderers: renderers, cells: cells })));
-    }
-    const allOfRenderInfos = createCombinatorRenderInfos(schema.allOf, rootSchema, 'allOf', uischema, path, uischemas);
-    return (React.createElement(Hidden, { xsUp: !visible }, allOfRenderInfos.map((allOfRenderInfo, allOfIndex) => (React.createElement(JsonFormsDispatch, { key: allOfIndex, schema: allOfRenderInfo.schema, uischema: allOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })))));
-};
-const materialAllOfControlTester = rankWith(3, isAllOfControl);
-var MaterialAllOfRenderer$1 = withJsonFormsAllOfProps(MaterialAllOfRenderer);
-
-const isLayout = (uischema) => uischema.hasOwnProperty('elements');
-class CombinatorProperties extends React.Component {
-    render() {
-        const { schema, combinatorKeyword, path } = this.props;
-        const otherProps = omit(schema, combinatorKeyword);
-        const foundUISchema = Generate.uiSchema(otherProps, 'VerticalLayout');
-        let isLayoutWithElements = false;
-        if (foundUISchema !== null && isLayout(foundUISchema)) {
-            isLayoutWithElements = foundUISchema.elements.length > 0;
-        }
-        if (isLayoutWithElements) {
-            return (React.createElement(JsonFormsDispatch, { schema: otherProps, path: path, uischema: foundUISchema }));
-        }
-        return null;
-    }
-}
-
-const MaterialAnyOfRenderer = ({ schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas }) => {
-    const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
-    const handleChange = useCallback((_ev, value) => setSelectedAnyOf(value), [setSelectedAnyOf]);
-    const anyOf = 'anyOf';
-    const anyOfRenderInfos = createCombinatorRenderInfos(schema.anyOf, rootSchema, anyOf, uischema, path, uischemas);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: anyOf, path: path }),
-        React.createElement(Tabs, { value: selectedAnyOf, onChange: handleChange }, anyOfRenderInfos.map(anyOfRenderInfo => (React.createElement(Tab, { key: anyOfRenderInfo.label, label: anyOfRenderInfo.label })))),
-        anyOfRenderInfos.map((anyOfRenderInfo, anyOfIndex) => selectedAnyOf === anyOfIndex && (React.createElement(JsonFormsDispatch, { key: anyOfIndex, schema: anyOfRenderInfo.schema, uischema: anyOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })))));
+const useFocus = () => {
+    const [focused, setFocused] = useState(false);
+    const onFocus = useCallback(() => setFocused(true), []);
+    const onBlur = useCallback(() => setFocused(false), []);
+    return [focused, onFocus, onBlur];
 };
-const materialAnyOfControlTester = rankWith(3, isAnyOfControl);
-var MaterialAnyOfRenderer$1 = withJsonFormsAnyOfProps(MaterialAnyOfRenderer);
 
-const MaterialOneOfRenderer = ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }) => {
-    const [open, setOpen] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
-    const [newSelectedIndex, setNewSelectedIndex] = useState(0);
-    const handleClose = useCallback(() => setOpen(false), [setOpen]);
-    const cancel = useCallback(() => {
-        setOpen(false);
-    }, [setOpen]);
-    const oneOfRenderInfos = createCombinatorRenderInfos(schema.oneOf, rootSchema, 'oneOf', uischema, path, uischemas);
-    const openNewTab = (newIndex) => {
-        handleChange(path, createDefaultValue(oneOfRenderInfos[newIndex].schema));
-        setSelectedIndex(newIndex);
-    };
-    const confirm = useCallback(() => {
-        openNewTab(newSelectedIndex);
-        setOpen(false);
-    }, [handleChange, createDefaultValue, newSelectedIndex]);
-    const handleTabChange = useCallback((_event, newOneOfIndex) => {
-        setNewSelectedIndex(newOneOfIndex);
-        if (isEmpty(data)) {
-            openNewTab(newOneOfIndex);
-        }
-        else {
-            setOpen(true);
-        }
-    }, [setOpen, setSelectedIndex, data]);
+const MuiAutocomplete = (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;
+    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(CombinatorProperties, { schema: schema, combinatorKeyword: 'oneOf', path: path }),
-        React.createElement(Tabs, { value: selectedIndex, onChange: handleTabChange }, oneOfRenderInfos.map(oneOfRenderInfo => React.createElement(Tab, { key: oneOfRenderInfo.label, label: oneOfRenderInfo.label }))),
-        oneOfRenderInfos.map((oneOfRenderInfo, oneOfIndex) => (selectedIndex === oneOfIndex && (React.createElement(JsonFormsDispatch, { key: oneOfIndex, schema: oneOfRenderInfo.schema, uischema: oneOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells })))),
-        React.createElement(Dialog, { open: open, onClose: handleClose, "aria-labelledby": 'alert-dialog-title', "aria-describedby": 'alert-dialog-description' },
-            React.createElement(DialogTitle, { id: 'alert-dialog-title' }, 'Clear form?'),
-            React.createElement(DialogContent, null,
-                React.createElement(DialogContentText, { id: 'alert-dialog-description' }, "Your data will be cleared if you navigate away from this tab. Do you want to proceed?")),
-            React.createElement(DialogActions, null,
-                React.createElement(Button, { onClick: cancel, color: 'primary' }, "No"),
-                React.createElement(Button, { onClick: confirm, color: 'primary', autoFocus: true, id: `oneOf-${id}-confirm-yes` }, "Yes")))));
+        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 materialOneOfControlTester = rankWith(3, isOneOfControl);
-var MaterialOneOfRenderer$1 = withJsonFormsOneOfProps(MaterialOneOfRenderer);
 
-const MuiCheckbox = React.memo((props) => {
-    const { data, className, id, enabled, uischema, path, handleChange, config, inputProps } = props;
+const MuiCheckbox = React.memo(function MuiCheckbox(props) {
+    const { data, className, id, enabled, uischema, path, handleChange, config, inputProps, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const inputPropsMerged = merge({}, inputProps, {
-        autoFocus: !!appliedUiSchemaOptions.focus
+        autoFocus: !!appliedUiSchemaOptions.focus,
     });
     const checked = !!data;
     return (React.createElement(Checkbox, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
@@ -348,10 +336,18 @@ const getData = (data, saveFormat) => {
     return dayjsData;
 };
 const ResettableTextField = ({ rawValue, dayjsValueIsValid, valueInInputFormat, focused, inputProps, ...props }) => {
-    const value = useRef({ lastInput: inputProps?.value, toShow: inputProps?.value });
+    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);
+            value.current.toShow =
+                typeof rawValue === 'string' ||
+                    rawValue === null ||
+                    rawValue === undefined
+                    ? rawValue
+                    : JSON.stringify(rawValue);
         }
         else {
             value.current.toShow = valueInInputFormat;
@@ -361,14 +357,14 @@ const ResettableTextField = ({ rawValue, dayjsValueIsValid, valueInInputFormat,
         value.current.lastInput = inputProps?.value;
         value.current.toShow = inputProps?.value;
     }
-    return React.createElement(TextField, Object.assign({}, props, { inputProps: { ...inputProps, value: value.current.toShow || '' } }));
+    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 },
         React.createElement(JsonFormsDispatch, { uischema: child, schema: schema, path: path, enabled: enabled, renderers: renderers, cells: cells }))));
 };
-const MaterialLayoutRendererComponent = ({ visible, elements, schema, path, enabled, direction, renderers, cells }) => {
+const MaterialLayoutRendererComponent = ({ visible, elements, schema, path, enabled, direction, renderers, cells, }) => {
     if (isEmpty(elements)) {
         return null;
     }
@@ -378,10 +374,10 @@ const MaterialLayoutRendererComponent = ({ visible, elements, schema, path, enab
     }
 };
 const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);
-const withAjvProps = (Component) => (props) => {
+const withAjvProps = (Component) => function WithAjvProps(props) {
     const ctx = useJsonForms();
     const ajv = getAjv({ jsonforms: { ...ctx } });
-    return (React.createElement(Component, Object.assign({}, props, { ajv: ajv })));
+    return React.createElement(Component, Object.assign({}, props, { ajv: ajv }));
 };
 
 const eventToValue$3 = (ev) => ev.target.value;
@@ -396,32 +392,20 @@ const useDebouncedChange = (handleChange, defaultValue, data, path, eventToValue
         setInput(newValue ?? defaultValue);
         debouncedUpdate(newValue);
     }, [debouncedUpdate, eventToValueFunction]);
-    const onClear = useCallback(() => { setInput(defaultValue); handleChange(path, undefined); }, [defaultValue, handleChange, path]);
+    const onClear = useCallback(() => {
+        setInput(defaultValue);
+        handleChange(path, undefined);
+    }, [defaultValue, handleChange, path]);
     return [input, onChange, onClear];
 };
 
-const useFocus = () => {
-    const [focused, setFocused] = useState(false);
-    const onFocus = useCallback(() => setFocused(true), []);
-    const onBlur = useCallback(() => setFocused(false), []);
-    return [focused, onFocus, onBlur];
-};
-
 const i18nDefaults = {
-    'enum.none': 'None'
+    '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$2 = (ev) => toNumber$1(ev.target.value);
-const MuiInputInteger = React.memo((props) => {
+const MuiInputInteger = React.memo(function MuiInputInteger(props) {
     const { data, className, id, enabled, uischema, path, handleChange, config } = props;
     const inputProps = { step: '1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -431,7 +415,7 @@ const MuiInputInteger = React.memo((props) => {
 
 const toNumber = (value) => value === '' ? undefined : parseFloat(value);
 const eventToValue$1 = (ev) => toNumber(ev.target.value);
-const MuiInputNumber = React.memo((props) => {
+const MuiInputNumber = React.memo(function MuiInputNumber(props) {
     const { data, className, id, enabled, uischema, path, handleChange, config } = props;
     const inputProps = { step: '0.1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -439,8 +423,8 @@ const MuiInputNumber = React.memo((props) => {
     return (React.createElement(Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
 });
 
-const MuiInputNumberFormat = React.memo((props) => {
-    const { className, id, enabled, uischema, isValid, path, handleChange, schema, config } = props;
+const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(props) {
+    const { className, id, enabled, uischema, isValid, path, handleChange, schema, config, } = props;
     const maxLength = schema.maxLength;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     let inputProps;
@@ -457,9 +441,9 @@ const MuiInputNumberFormat = React.memo((props) => {
 });
 
 const eventToValue = (ev) => ev.target.value === '' ? undefined : ev.target.value;
-const MuiInputText = React.memo((props) => {
+const MuiInputText = React.memo(function MuiInputText(props) {
     const [showAdornment, setShowAdornment] = useState(false);
-    const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, muiInputProps, inputComponent } = props;
+    const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, muiInputProps, inputComponent, } = props;
     const maxLength = schema.maxLength;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     let inputProps;
@@ -478,26 +462,49 @@ const MuiInputText = React.memo((props) => {
     const onPointerLeave = () => setShowAdornment(false);
     const theme = useTheme();
     const closeStyle = {
-        background: theme.jsonforms?.input?.delete?.background || theme.palette.background.default,
-        borderRadius: '50%'
+        background: theme.jsonforms?.input?.delete?.background ||
+            theme.palette.background.default,
+        borderRadius: '50%',
     };
     return (React.createElement(Input, { type: appliedUiSchemaOptions.format === 'password' ? 'password' : 'text', value: inputText, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, endAdornment: React.createElement(InputAdornment, { position: 'end', style: {
-                display: !showAdornment || !enabled || data === undefined ? 'none' : 'flex',
+                display: !showAdornment || !enabled || data === undefined
+                    ? 'none'
+                    : 'flex',
                 position: 'absolute',
-                right: 0
+                right: 0,
             } },
             React.createElement(IconButton, { "aria-label": 'Clear input field', onClick: onClear, size: 'large' },
                 React.createElement(Close, { style: closeStyle }))), inputComponent: inputComponent }));
 });
 
-const MuiInputTime = React.memo((props) => {
+const MuiInputTime = React.memo(function MuiInputTime(props) {
     const { data, className, id, enabled, uischema, path, handleChange, config } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
     return (React.createElement(Input, { type: 'time', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
 });
 
-const MaterialEnumArrayRenderer = ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange, ...otherProps }) => {
+const MuiSelect = React.memo(function MuiSelect(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 MuiToggle = React.memo(function MuiToggle(props) {
+    const { data, className, id, enabled, uischema, path, handleChange, config, inputProps, } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const inputPropsMerged = merge({}, inputProps, {
+        autoFocus: !!appliedUiSchemaOptions.focus,
+    });
+    const checked = !!data;
+    return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
+});
+
+const MaterialEnumArrayRenderer = ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }) => {
     return (React.createElement(Hidden, { xlUp: !visible },
         React.createElement(FormControl, { component: 'fieldset' },
             React.createElement(FormGroup, { row: true }, options.map((option, index) => {
@@ -517,14 +524,63 @@ const hasOneOfItems = (schema) => schema.oneOf !== undefined &&
         return entry.const !== undefined;
     });
 const hasEnumItems = (schema) => schema.type === 'string' && schema.enum !== undefined;
-const materialEnumArrayRendererTester = rankWith(5, and(uiTypeIs('Control'), and(schemaMatches(schema => hasType(schema, 'array') &&
+const materialEnumArrayRendererTester = rankWith(5, and(uiTypeIs('Control'), and(schemaMatches((schema) => hasType(schema, 'array') &&
     !Array.isArray(schema.items) &&
-    schema.uniqueItems === true), schemaSubPathMatches('items', schema => {
+    schema.uniqueItems === true), schemaSubPathMatches('items', (schema) => {
     return hasOneOfItems(schema) || hasEnumItems(schema);
 }))));
 var MaterialEnumArrayRenderer$1 = withJsonFormsMultiEnumProps(MaterialEnumArrayRenderer);
 
-const materialArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));
+const MaterialObjectRenderer = ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema, }) => {
+    const detailUiSchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, () => isEmpty(path)
+        ? Generate.uiSchema(schema, 'VerticalLayout')
+        : { ...Generate.uiSchema(schema, 'Group'), label }, uischema, rootSchema), [uischemas, schema, uischema.scope, path, label, uischema, rootSchema]);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(JsonFormsDispatch, { visible: visible, enabled: enabled, schema: schema, uischema: detailUiSchema, path: path, renderers: renderers, cells: cells })));
+};
+const materialObjectControlTester = rankWith(2, isObjectControl);
+var MaterialObjectRenderer$1 = withJsonFormsDetailProps(MaterialObjectRenderer);
+
+const MaterialOneOfRenderer = ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data, }) => {
+    const [open, setOpen] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
+    const [newSelectedIndex, setNewSelectedIndex] = useState(0);
+    const handleClose = useCallback(() => setOpen(false), [setOpen]);
+    const cancel = useCallback(() => {
+        setOpen(false);
+    }, [setOpen]);
+    const oneOfRenderInfos = createCombinatorRenderInfos(schema.oneOf, rootSchema, 'oneOf', uischema, path, uischemas);
+    const openNewTab = (newIndex) => {
+        handleChange(path, createDefaultValue(oneOfRenderInfos[newIndex].schema));
+        setSelectedIndex(newIndex);
+    };
+    const confirm = useCallback(() => {
+        openNewTab(newSelectedIndex);
+        setOpen(false);
+    }, [handleChange, createDefaultValue, newSelectedIndex]);
+    const handleTabChange = useCallback((_event, newOneOfIndex) => {
+        setNewSelectedIndex(newOneOfIndex);
+        if (isEmpty(data)) {
+            openNewTab(newOneOfIndex);
+        }
+        else {
+            setOpen(true);
+        }
+    }, [setOpen, setSelectedIndex, data]);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(CombinatorProperties, { schema: schema, combinatorKeyword: 'oneOf', path: path }),
+        React.createElement(Tabs, { value: selectedIndex, onChange: handleTabChange }, oneOfRenderInfos.map((oneOfRenderInfo) => (React.createElement(Tab, { key: oneOfRenderInfo.label, label: oneOfRenderInfo.label })))),
+        oneOfRenderInfos.map((oneOfRenderInfo, oneOfIndex) => selectedIndex === oneOfIndex && (React.createElement(JsonFormsDispatch, { key: oneOfIndex, schema: oneOfRenderInfo.schema, uischema: oneOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells }))),
+        React.createElement(Dialog, { open: open, onClose: handleClose, "aria-labelledby": 'alert-dialog-title', "aria-describedby": 'alert-dialog-description' },
+            React.createElement(DialogTitle, { id: 'alert-dialog-title' }, 'Clear form?'),
+            React.createElement(DialogContent, null,
+                React.createElement(DialogContentText, { id: 'alert-dialog-description' }, "Your data will be cleared if you navigate away from this tab. Do you want to proceed?")),
+            React.createElement(DialogActions, null,
+                React.createElement(Button, { onClick: cancel, color: 'primary' }, "No"),
+                React.createElement(Button, { onClick: confirm, color: 'primary', autoFocus: true, id: `oneOf-${id}-confirm-yes` }, "Yes")))));
+};
+const materialOneOfControlTester = rankWith(3, isOneOfControl);
+var MaterialOneOfRenderer$1 = withJsonFormsOneOfProps(MaterialOneOfRenderer);
 
 const materialLabelRendererTester = rankWith(1, uiTypeIs('Label'));
 const MaterialLabelRenderer = ({ text, visible }) => {
@@ -533,34 +589,33 @@ const MaterialLabelRenderer = ({ text, visible }) => {
 };
 var MaterialLabelRenderer$1 = withJsonFormsLabelProps(MaterialLabelRenderer);
 
-const ArrayLayoutToolbar = React.memo(({ label, errors, addItem, path, createDefault }) => {
+const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({ label, errors, addItem, path, createDefault, translations, }) {
     return (React.createElement(Toolbar, { disableGutters: true },
         React.createElement(Grid, { container: true, alignItems: 'center', justifyContent: 'space-between' },
             React.createElement(Grid, { item: true },
                 React.createElement(Typography, { variant: 'h6' }, label)),
-            errors.length !== 0 &&
-                React.createElement(Grid, { item: true },
-                    React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors })),
+            errors.length !== 0 && (React.createElement(Grid, { item: true },
+                React.createElement(ValidationIcon, { id: 'tooltip-validation', errorMessages: errors }))),
             React.createElement(Grid, { item: true },
                 React.createElement(Grid, { container: true },
                     React.createElement(Grid, { item: true },
-                        React.createElement(Tooltip, { id: 'tooltip-add', title: `Add to ${label}`, placement: 'bottom' },
-                            React.createElement(IconButton, { "aria-label": `Add to ${label}`, onClick: addItem(path, createDefault()), size: 'large' },
+                        React.createElement(Tooltip, { id: 'tooltip-add', title: translations.addTooltip, placement: 'bottom' },
+                            React.createElement(IconButton, { "aria-label": translations.addAriaLabel, onClick: addItem(path, createDefault()), size: 'large' },
                                 React.createElement(AddIcon, null)))))))));
 });
 
-const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path }) => {
+const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path, translations, }) => {
     return (React.createElement(ListItem, { button: true, selected: selected, onClick: handleSelect(index) },
         React.createElement(ListItemAvatar, null,
             React.createElement(Avatar, { "aria-label": 'Index' }, index + 1)),
         React.createElement(ListItemText, { primary: childLabel }),
         React.createElement(ListItemSecondaryAction, null,
-            React.createElement(IconButton, { "aria-label": 'Delete', onClick: removeItem(path, index), size: 'large' },
+            React.createElement(IconButton, { "aria-label": translations.removeAriaLabel, onClick: removeItem(path, index), size: 'large' },
                 React.createElement(DeleteIcon, null)))));
 };
 var ListWithDetailMasterItem$1 = withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
 
-const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema }) => {
+const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config, rootSchema, translations, }) => {
     const [selectedIndex, setSelectedIndex] = useState(undefined);
     const handleRemoveItem = useCallback((p, value) => () => {
         removeItems(p, [value])();
@@ -579,72 +634,84 @@ const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, err
         setSelectedIndex(undefined);
     }, [schema]);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(ArrayLayoutToolbar, { label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: handleCreateDefaultValue }),
+        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: handleCreateDefaultValue }),
         React.createElement(Grid, { container: true, direction: 'row', spacing: 2 },
             React.createElement(Grid, { item: true, xs: 3 },
-                React.createElement(List, null, data > 0 ? (map(range(data), index => (React.createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index })))) : (React.createElement("p", null, "No data")))),
-            React.createElement(Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React.createElement(JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: composePaths(path, `${selectedIndex}`) })) : (React.createElement(Typography, { variant: 'h6' }, "No Selection"))))));
+                React.createElement(List, null, data > 0 ? (map(range(data), (index) => (React.createElement(ListWithDetailMasterItem$1, { index: index, path: path, schema: schema, handleSelect: handleListItemClick, removeItem: handleRemoveItem, selected: selectedIndex === index, key: index, translations: translations })))) : (React.createElement("p", null, "No data")))),
+            React.createElement(Grid, { item: true, xs: true }, selectedIndex !== undefined ? (React.createElement(JsonFormsDispatch, { renderers: renderers, cells: cells, visible: visible, schema: schema, uischema: foundUISchema, path: composePaths(path, `${selectedIndex}`) })) : (React.createElement(Typography, { variant: 'h6' }, translations.noSelection))))));
 };
 const materialListWithDetailTester = rankWith(4, and(uiTypeIs('ListWithDetail'), isObjectArray));
 var MaterialListWithDetailRenderer$1 = withJsonFormsArrayLayoutProps(MaterialListWithDetailRenderer);
 
-const MaterialBooleanControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
+const MaterialInputControl = (props) => {
+    const [focused, onFocus, onBlur] = useFocus();
+    const { id, description, errors, label, uischema, visible, required, config, input, } = props;
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const showDescription = !isDescriptionHidden(visible, description,
-    false, appliedUiSchemaOptions.showUnfocusedDescription);
-    const showTooltip = !showDescription && !isDescriptionHidden(visible, description,
-    true,
-    true);
+    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const firstFormHelperText = showDescription
         ? description
         : !isValid
             ? errors
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
-    const descriptionIds = [];
-    const tooltipId = `${id}-tip`;
-    const helpId1 = `${id}-help1`;
-    const helpId2 = `${id}-help2`;
-    if (showTooltip) {
-        descriptionIds.push(tooltipId);
-    }
-    if (firstFormHelperText) {
-        descriptionIds.push(helpId1);
-    }
-    if (secondFormHelperText) {
-        descriptionIds.push(helpId2);
-    }
-    const ariaDescribedBy = descriptionIds.join(' ');
+    const InnerComponent = input;
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(Tooltip, { id: tooltipId, title: (showTooltip) ? description : '' },
-            React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiCheckbox, { id: `${id}-input`, isValid: isEmpty(errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
-                        'aria-describedby': ariaDescribedBy
-                    } }) })),
-        React.createElement(FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
-        React.createElement(FormHelperText, { id: helpId2, error: !isValid }, secondFormHelperText)));
+        React.createElement(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, id: id, variant: 'standard' },
+            React.createElement(InputLabel, { htmlFor: id + '-input', error: !isValid, required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+            React.createElement(InnerComponent, Object.assign({}, props, { id: id + '-input', isValid: isValid, visible: visible })),
+            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
 };
-const materialBooleanControlTester = rankWith(2, isBooleanControl);
-var MaterialBooleanControl$1 = withJsonFormsControlProps(MaterialBooleanControl);
-
-const MuiToggle = React.memo((props) => {
-    const { data, className, id, enabled, uischema, path, handleChange, config, inputProps } = props;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const inputPropsMerged = merge({}, inputProps, {
-        autoFocus: !!appliedUiSchemaOptions.focus
-    });
-    const checked = !!data;
-    return (React.createElement(Switch, { checked: checked, onChange: (_ev, isChecked) => handleChange(path, isChecked), className: className, id: id, disabled: !enabled, inputProps: inputPropsMerged }));
-});
 
-const MaterialBooleanToggleControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description }) => {
+const findEnumSchema = (schemas) => schemas.find((s) => s.enum !== undefined && (s.type === 'string' || s.type === undefined));
+const findTextSchema = (schemas) => schemas.find((s) => s.type === 'string' && s.enum === undefined);
+const MuiAutocompleteInputText = (props) => {
+    const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, } = props;
+    const enumSchema = findEnumSchema(schema.anyOf);
+    const stringSchema = findTextSchema(schema.anyOf);
+    const maxLength = stringSchema.maxLength;
+    const appliedUiSchemaOptions = useMemo(() => merge({}, config, uischema.options), [config, uischema.options]);
+    const inputProps = useMemo(() => {
+        let propMemo = {};
+        if (appliedUiSchemaOptions.restrict) {
+            propMemo = { maxLength: maxLength };
+        }
+        if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
+            propMemo.size = maxLength;
+        }
+        propMemo.list = props.id + 'datalist';
+        return propMemo;
+    }, [appliedUiSchemaOptions, props.id]);
+    const [inputText, onChange] = useDebouncedChange(handleChange, '', data, path);
+    const dataList = (React.createElement("datalist", { id: props.id + 'datalist' }, enumSchema.enum.map((optionValue) => (React.createElement("option", { value: optionValue, key: optionValue })))));
+    return (React.createElement(Input, { type: 'text', value: inputText, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, endAdornment: dataList }));
+};
+class MaterialAnyOfStringOrEnumControl extends Control {
+    render() {
+        return (React.createElement(MaterialInputControl, Object.assign({}, this.props, { input: MuiAutocompleteInputText })));
+    }
+}
+const hasEnumAndText = (schemas) => {
+    const enumSchema = findEnumSchema(schemas);
+    const stringSchema = findTextSchema(schemas);
+    const remainingSchemas = schemas.filter((s) => s !== enumSchema || s !== stringSchema);
+    const wrongType = remainingSchemas.find((s) => s.type && s.type !== 'string');
+    return enumSchema && stringSchema && !wrongType;
+};
+const simpleAnyOf = and(uiTypeIs('Control'), schemaMatches((schema) => schema.hasOwnProperty('anyOf') && hasEnumAndText(schema.anyOf)));
+const materialAnyOfStringOrEnumControlTester = rankWith(5, simpleAnyOf);
+var MaterialAnyOfStringOrEnumControl$1 = withJsonFormsControlProps(MaterialAnyOfStringOrEnumControl);
+
+const MaterialBooleanControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, }) => {
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const showDescription = !isDescriptionHidden(visible, description,
     false, appliedUiSchemaOptions.showUnfocusedDescription);
-    const showTooltip = !showDescription && !isDescriptionHidden(visible, description,
-    true,
-    true);
+    const showTooltip = !showDescription &&
+        !isDescriptionHidden(visible, description,
+        true,
+        true);
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -666,90 +733,59 @@ const MaterialBooleanToggleControl = ({ data, visible, label, id, enabled, uisch
     }
     const ariaDescribedBy = descriptionIds.join(' ');
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(Tooltip, { id: tooltipId, title: (showTooltip) ? description : '' },
-            React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiToggle, { id: `${id}-input`, isValid: isEmpty(errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
-                        'aria-describedby': ariaDescribedBy
+        React.createElement(Tooltip, { id: tooltipId, title: showTooltip ? description : '' },
+            React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiCheckbox, { id: `${id}-input`, isValid: isEmpty(errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
+                        'aria-describedby': ariaDescribedBy,
                     } }) })),
         React.createElement(FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
         React.createElement(FormHelperText, { id: helpId2, error: !isValid }, secondFormHelperText)));
 };
-const materialBooleanToggleControlTester = rankWith(3, and(isBooleanControl, optionIs('toggle', true)));
-var MaterialBooleanToggleControl$1 = withJsonFormsControlProps(MaterialBooleanToggleControl);
+const materialBooleanControlTester = rankWith(2, isBooleanControl);
+var MaterialBooleanControl$1 = withJsonFormsControlProps(MaterialBooleanControl);
 
-const MaterialInputControl = (props) => {
-    const [focused, onFocus, onBlur] = useFocus();
-    const { id, description, errors, label, uischema, visible, required, config, input } = props;
+const MaterialBooleanToggleControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config, description, }) => {
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    const firstFormHelperText = showDescription
-        ? description
-        : !isValid
-            ? errors
-            : null;
-    const secondFormHelperText = showDescription && !isValid ? errors : null;
-    const InnerComponent = input;
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, id: id, variant: 'standard' },
-            React.createElement(InputLabel, { htmlFor: id + '-input', error: !isValid, required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React.createElement(InnerComponent, Object.assign({}, props, { id: id + '-input', isValid: isValid, visible: visible })),
-            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
-            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
-};
-
-const MuiAutocomplete = (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;
-    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
+    const showDescription = !isDescriptionHidden(visible, description,
+    false, appliedUiSchemaOptions.showUnfocusedDescription);
+    const showTooltip = !showDescription &&
+        !isDescriptionHidden(visible, description,
+        true,
+        true);
     const firstFormHelperText = showDescription
         ? description
         : !isValid
             ? errors
             : null;
     const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const descriptionIds = [];
+    const tooltipId = `${id}-tip`;
+    const helpId1 = `${id}-help1`;
+    const helpId2 = `${id}-help2`;
+    if (showTooltip) {
+        descriptionIds.push(tooltipId);
+    }
+    if (firstFormHelperText) {
+        descriptionIds.push(helpId1);
+    }
+    if (secondFormHelperText) {
+        descriptionIds.push(helpId2);
+    }
+    const ariaDescribedBy = descriptionIds.join(' ');
     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, errors } = props;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const isValid = errors.length === 0;
-    return (appliedUiSchemaOptions.autocomplete === false ?
-        React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiSelect })) :
-        React.createElement(MuiAutocomplete, Object.assign({}, props, { isValid: isValid })));
-};
-const materialEnumControlTester = rankWith(2, isEnumControl);
-var MaterialEnumControl$1 = withJsonFormsEnumProps(withTranslateProps(React.memo(MaterialEnumControl)), false);
-
-const MaterialNativeControl = (props) => {
-    const [focused, onFocus, onBlur] = useFocus();
-    const { id, errors, label, schema, description, enabled, visible, required, path, handleChange, data, config } = props;
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
-    const fieldType = appliedUiSchemaOptions.format ?? schema.format;
-    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(TextField, { required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk), id: id + '-input', label: label, type: fieldType, error: !isValid, disabled: !enabled, fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, helperText: !isValid ? errors : showDescription ? description : null, InputLabelProps: { shrink: true }, value: inputValue, onChange: onChange })));
+        React.createElement(Tooltip, { id: tooltipId, title: showTooltip ? description : '' },
+            React.createElement(FormControlLabel, { label: label, id: id, control: React.createElement(MuiToggle, { id: `${id}-input`, isValid: isEmpty(errors), data: data, enabled: enabled, visible: visible, path: path, uischema: uischema, schema: schema, rootSchema: rootSchema, handleChange: handleChange, errors: errors, config: config, inputProps: {
+                        'aria-describedby': ariaDescribedBy,
+                    } }) })),
+        React.createElement(FormHelperText, { id: helpId1, error: !isValid && !showDescription }, firstFormHelperText),
+        React.createElement(FormHelperText, { id: helpId2, error: !isValid }, secondFormHelperText)));
 };
-const materialNativeControlTester = rankWith(2, or(isDateControl, isTimeControl));
-var MaterialNativeControl$1 = withJsonFormsControlProps(MaterialNativeControl);
+const materialBooleanToggleControlTester = rankWith(3, and(isBooleanControl, optionIs('toggle', true)));
+var MaterialBooleanToggleControl$1 = withJsonFormsControlProps(MaterialBooleanToggleControl);
 
 const MaterialDateControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
-    const { description, id, errors, label, uischema, visible, enabled, required, path, handleChange, data, config } = props;
+    const { description, id, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
@@ -769,9 +805,9 @@ const MaterialDateControl = (props) => {
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
             React.createElement(DatePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: views, disabled: !enabled, componentsProps: {
                     actionBar: {
-                        actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
-                    }
-                }, 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: {
+                        actions: (variant) => variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+                    },
+                }, 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' }))) }),
@@ -783,13 +819,18 @@ var MaterialDateControl$1 = withJsonFormsControlProps(MaterialDateControl);
 
 const MaterialDateTimeControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
-    const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config } = props;
+    const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
     const 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 views = appliedUiSchemaOptions.views ?? [
+        'year',
+        'day',
+        'hours',
+        'minutes',
+    ];
     const firstFormHelperText = showDescription
         ? description
         : !isValid
@@ -803,9 +844,9 @@ const MaterialDateTimeControl = (props) => {
         React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
             React.createElement(DateTimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
                     actionBar: {
-                        actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
-                    }
-                }, 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: {
+                        actions: (variant) => variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+                    },
+                }, 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' }))) }),
@@ -815,59 +856,91 @@ const MaterialDateTimeControl = (props) => {
 const materialDateTimeControlTester = rankWith(2, isDateTimeControl);
 var MaterialDateTimeControl$1 = withJsonFormsControlProps(MaterialDateTimeControl);
 
-const MaterialTimeControl = (props) => {
+const MaterialEnumControl = (props) => {
+    const { config, uischema, errors } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const isValid = errors.length === 0;
+    return appliedUiSchemaOptions.autocomplete === false ? (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiSelect }))) : (React.createElement(MuiAutocomplete, Object.assign({}, props, { isValid: isValid })));
+};
+const materialEnumControlTester = rankWith(2, isEnumControl);
+var MaterialEnumControl$1 = withJsonFormsEnumProps(withTranslateProps(React.memo(MaterialEnumControl)), false);
+
+const MaterialIntegerControl = (props) => (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiInputInteger })));
+const materialIntegerControlTester = rankWith(2, isIntegerControl);
+var MaterialIntegerControl$1 = withJsonFormsControlProps(MaterialIntegerControl);
+
+const MaterialNativeControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
-    const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config } = props;
+    const { id, errors, label, schema, description, enabled, visible, required, path, handleChange, data, config, } = props;
+    const isValid = errors.length === 0;
+    const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
+    const fieldType = appliedUiSchemaOptions.format ?? schema.format;
+    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(TextField, { required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk), id: id + '-input', label: label, type: fieldType, error: !isValid, disabled: !enabled, fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, helperText: !isValid ? errors : showDescription ? description : null, InputLabelProps: { shrink: true }, value: inputValue, onChange: onChange })));
+};
+const materialNativeControlTester = rankWith(2, or(isDateControl, isTimeControl));
+var MaterialNativeControl$1 = withJsonFormsControlProps(MaterialNativeControl);
+
+const MaterialNumberControl = (props) => (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiInputNumber })));
+const materialNumberControlTester = rankWith(2, isNumberControl);
+var MaterialNumberControl$1 = withJsonFormsControlProps(MaterialNumberControl);
+
+const MaterialOneOfEnumControl = (props) => {
+    const { config, uischema, errors } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
+    return appliedUiSchemaOptions.autocomplete === false ? (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiSelect }))) : (React.createElement(MuiAutocomplete, Object.assign({}, props, { isValid: isValid })));
+};
+const materialOneOfEnumControlTester = rankWith(5, isOneOfEnumControl);
+var MaterialOneOfEnumControl$1 = withJsonFormsOneOfEnumProps(withTranslateProps(React.memo(MaterialOneOfEnumControl)), false);
+
+const MaterialRadioGroup = (props) => {
+    const [focused, onFocus, onBlur] = useFocus();
+    const { config, id, label, required, description, errors, data, visible, options, handleChange, path, enabled, } = props;
+    const isValid = errors.length === 0;
+    const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
     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
-            ? errors
-            : 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) : '';
+    const onChange = (_ev, value) => handleChange(path, value);
     return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
-            React.createElement(TimePicker, { label: label, value: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
-                    actionBar: {
-                        actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
-                    }
-                }, 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))));
+        React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
+            React.createElement(FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
+            React.createElement(RadioGroup, { value: props.data ?? '', onChange: onChange, row: true }, options.map((option) => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value }), label: option.label, disabled: !enabled })))),
+            React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
 };
-const materialTimeControlTester = rankWith(4, isTimeControl);
-var MaterialTimeControl$1 = withJsonFormsControlProps(MaterialTimeControl);
+
+const MaterialOneOfRadioGroupControl = (props) => {
+    return React.createElement(MaterialRadioGroup, Object.assign({}, props));
+};
+const materialOneOfRadioGroupControlTester = rankWith(20, and(isOneOfEnumControl, optionIs('format', 'radio')));
+var MaterialOneOfRadioGroupControl$1 = withJsonFormsOneOfEnumProps(MaterialOneOfRadioGroupControl);
+
+const MaterialRadioGroupControl = (props) => {
+    return React.createElement(MaterialRadioGroup, Object.assign({}, props));
+};
+const materialRadioGroupControlTester = rankWith(20, and(isEnumControl, optionIs('format', 'radio')));
+var MaterialRadioGroupControl$1 = withJsonFormsEnumProps(MaterialRadioGroupControl);
 
 const MaterialSliderControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
-    const { id, data, description, enabled, errors, label, schema, handleChange, visible, path, required, config } = props;
+    const { id, data, description, enabled, errors, label, schema, handleChange, visible, path, required, config, } = props;
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
     const labelStyle = {
         whiteSpace: 'nowrap',
         overflow: 'hidden',
         textOverflow: 'ellipsis',
-        width: '100%'
+        width: '100%',
     };
     const rangeContainerStyle = {
-        display: 'flex'
+        display: 'flex',
     };
     const rangeItemStyle = {
-        flexGrow: '1'
+        flexGrow: '1',
     };
     const sliderStyle = {
-        marginTop: '7px'
+        marginTop: '7px',
     };
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
     const onChange = useCallback((_ev, value) => handleChange(path, Number(value)), [path, handleChange]);
@@ -884,123 +957,134 @@ const MaterialSliderControl = (props) => {
 const materialSliderControlTester = rankWith(4, isRangeControl);
 var MaterialSliderControl$1 = withJsonFormsControlProps(MaterialSliderControl);
 
-const MaterialRadioGroup = (props) => {
-    const [focused, onFocus, onBlur] = useFocus();
-    const { config, id, label, required, description, errors, data, visible, options, handleChange, path, enabled } = props;
-    const isValid = errors.length === 0;
-    const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
-    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
-    const onChange = (_ev, value) => handleChange(path, value);
-    return (React.createElement(Hidden, { xsUp: !visible },
-        React.createElement(FormControl, { component: 'fieldset', fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur },
-            React.createElement(FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
-            React.createElement(RadioGroup, { value: props.data ?? '', onChange: onChange, row: true }, options.map(option => (React.createElement(FormControlLabel, { value: option.value, key: option.label, control: React.createElement(Radio, { checked: data === option.value }), label: option.label, disabled: !enabled })))),
-            React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
-};
-
-const MaterialRadioGroupControl = (props) => {
-    return React.createElement(MaterialRadioGroup, Object.assign({}, props));
-};
-const materialRadioGroupControlTester = rankWith(20, and(isEnumControl, optionIs('format', 'radio')));
-var MaterialRadioGroupControl$1 = withJsonFormsEnumProps(MaterialRadioGroupControl);
-
-const MaterialIntegerControl = (props) => (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiInputInteger })));
-const materialIntegerControlTester = rankWith(2, isIntegerControl);
-var MaterialIntegerControl$1 = withJsonFormsControlProps(MaterialIntegerControl);
-
-const MaterialNumberControl = (props) => (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiInputNumber })));
-const materialNumberControlTester = rankWith(2, isNumberControl);
-var MaterialNumberControl$1 = withJsonFormsControlProps(MaterialNumberControl);
-
 const MaterialTextControl = (props) => (React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiInputText })));
 const materialTextControlTester = rankWith(1, isStringControl);
 var MaterialTextControl$1 = withJsonFormsControlProps(MaterialTextControl);
 
-const findEnumSchema = (schemas) => schemas.find(s => s.enum !== undefined && (s.type === 'string' || s.type === undefined));
-const findTextSchema = (schemas) => schemas.find(s => s.type === 'string' && s.enum === undefined);
-const MuiAutocompleteInputText = (props) => {
-    const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema } = props;
-    const enumSchema = findEnumSchema(schema.anyOf);
-    const stringSchema = findTextSchema(schema.anyOf);
-    const maxLength = stringSchema.maxLength;
-    const appliedUiSchemaOptions = useMemo(() => merge({}, config, uischema.options), [config, uischema.options]);
-    const inputProps = useMemo(() => {
-        let propMemo = {};
-        if (appliedUiSchemaOptions.restrict) {
-            propMemo = { maxLength: maxLength };
-        }
-        if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
-            propMemo.size = maxLength;
-        }
-        propMemo.list = props.id + 'datalist';
-        return propMemo;
-    }, [appliedUiSchemaOptions, props.id]);
-    const [inputText, onChange] = useDebouncedChange(handleChange, '', data, path);
-    const dataList = (React.createElement("datalist", { id: props.id + 'datalist' }, enumSchema.enum.map(optionValue => (React.createElement("option", { value: optionValue, key: optionValue })))));
-    return (React.createElement(Input, { type: 'text', value: inputText, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, endAdornment: dataList }));
-};
-class MaterialAnyOfStringOrEnumControl extends Control {
-    render() {
-        return (React.createElement(MaterialInputControl, Object.assign({}, this.props, { input: MuiAutocompleteInputText })));
-    }
-}
-const hasEnumAndText = (schemas) => {
-    const enumSchema = findEnumSchema(schemas);
-    const stringSchema = findTextSchema(schemas);
-    const remainingSchemas = schemas.filter(s => s !== enumSchema || s !== stringSchema);
-    const wrongType = remainingSchemas.find(s => s.type && s.type !== 'string');
-    return enumSchema && stringSchema && !wrongType;
-};
-const simpleAnyOf = and(uiTypeIs('Control'), schemaMatches(schema => schema.hasOwnProperty('anyOf') && hasEnumAndText(schema.anyOf)));
-const materialAnyOfStringOrEnumControlTester = rankWith(5, simpleAnyOf);
-var MaterialAnyOfStringOrEnumControl$1 = withJsonFormsControlProps(MaterialAnyOfStringOrEnumControl);
-
-const MaterialOneOfEnumControl = (props) => {
-    const { config, uischema, errors } = props;
+const MaterialTimeControl = (props) => {
+    const [focused, onFocus, onBlur] = useFocus();
+    const { id, description, errors, label, uischema, visible, enabled, required, path, handleChange, data, config, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const isValid = errors.length === 0;
-    return (appliedUiSchemaOptions.autocomplete === false ?
-        React.createElement(MaterialInputControl, Object.assign({}, props, { input: MuiSelect })) :
-        React.createElement(MuiAutocomplete, Object.assign({}, props, { isValid: isValid })));
+    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
+            ? errors
+            : 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: value, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: views, disabled: !enabled, componentsProps: {
+                    actionBar: {
+                        actions: (variant) => variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+                    },
+                }, 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))));
 };
-const materialOneOfEnumControlTester = rankWith(5, isOneOfEnumControl);
-var MaterialOneOfEnumControl$1 = withJsonFormsOneOfEnumProps(withTranslateProps(React.memo(MaterialOneOfEnumControl)), false);
+const materialTimeControlTester = rankWith(4, isTimeControl);
+var MaterialTimeControl$1 = withJsonFormsControlProps(MaterialTimeControl);
 
-const MaterialOneOfRadioGroupControl = (props) => {
-    return React.createElement(MaterialRadioGroup, Object.assign({}, props));
+const iconStyle = { float: 'right' };
+const ExpandPanelRendererComponent = (props) => {
+    const [labelHtmlId] = useState(createId('expand-panel'));
+    useEffect(() => {
+        return () => {
+            removeId(labelHtmlId);
+        };
+    }, [labelHtmlId]);
+    const { enabled, childLabel, childPath, index, expanded, moveDown, moveUp, enableMoveDown, enableMoveUp, handleExpansion, removeItems, path, rootSchema, schema, uischema, uischemas, renderers, cells, config, translations, } = 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' },
+                React.createElement(Grid, { item: true, xs: 7, md: 9 },
+                    React.createElement(Grid, { container: true, alignItems: 'center' },
+                        React.createElement(Grid, { item: true, xs: 2, md: 1 },
+                            React.createElement(Avatar, { "aria-label": 'Index' }, index + 1)),
+                        React.createElement(Grid, { item: true, xs: 10, md: 11 },
+                            React.createElement("span", { id: labelHtmlId }, childLabel)))),
+                React.createElement(Grid, { item: true, xs: 5, md: 3 },
+                    React.createElement(Grid, { container: true, justifyContent: 'flex-end' },
+                        React.createElement(Grid, { item: true },
+                            React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
+                                showSortButtons ? (React.createElement(Fragment, null,
+                                    React.createElement(Grid, { item: true },
+                                        React.createElement(IconButton, { onClick: moveUp(path, index), style: iconStyle, disabled: !enableMoveUp, "aria-label": translations.upAriaLabel, size: 'large' },
+                                            React.createElement(ArrowUpward, null))),
+                                    React.createElement(Grid, { item: true },
+                                        React.createElement(IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": translations.downAriaLabel, size: 'large' },
+                                            React.createElement(ArrowDownward, null))))) : (''),
+                                React.createElement(Grid, { item: true },
+                                    React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": translations.removeAriaLabel, size: 'large' },
+                                        React.createElement(DeleteIcon, null))))))))),
+        React.createElement(AccordionDetails, null,
+            React.createElement(JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
 };
-const materialOneOfRadioGroupControlTester = rankWith(20, and(isOneOfEnumControl, optionIs('format', 'radio')));
-var MaterialOneOfRadioGroupControl$1 = withJsonFormsOneOfEnumProps(MaterialOneOfRadioGroupControl);
-
-const Unwrapped = {
-    MaterialBooleanControl: MaterialBooleanControl,
-    MaterialBooleanToggleControl: MaterialBooleanToggleControl,
-    MaterialEnumControl: MaterialEnumControl,
-    MaterialNativeControl: MaterialNativeControl,
-    MaterialDateControl: MaterialDateControl,
-    MaterialDateTimeControl: MaterialDateTimeControl,
-    MaterialTimeControl: MaterialTimeControl,
-    MaterialSliderControl: MaterialSliderControl,
-    MaterialRadioGroupControl: MaterialRadioGroupControl,
-    MaterialIntegerControl: MaterialIntegerControl,
-    MaterialNumberControl: MaterialNumberControl,
-    MaterialTextControl: MaterialTextControl,
-    MaterialAnyOfStringOrEnumControl: MaterialAnyOfStringOrEnumControl,
-    MaterialOneOfEnumControl: MaterialOneOfEnumControl,
-    MaterialOneOfRadioGroupControl: MaterialOneOfRadioGroupControl
+const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
+const ctxDispatchToExpandPanelProps = (dispatch) => ({
+    removeItems: useCallback((path, toDelete) => (event) => {
+        event.stopPropagation();
+        dispatch(update(path, (array) => {
+            toDelete
+                .sort()
+                .reverse()
+                .forEach((s) => array.splice(s, 1));
+            return array;
+        }));
+    }, [dispatch]),
+    moveUp: useCallback((path, toMove) => (event) => {
+        event.stopPropagation();
+        dispatch(update(path, (array) => {
+            moveUp(array, toMove);
+            return array;
+        }));
+    }, [dispatch]),
+    moveDown: useCallback((path, toMove) => (event) => {
+        event.stopPropagation();
+        dispatch(update(path, (array) => {
+            moveDown(array, toMove);
+            return array;
+        }));
+    }, [dispatch]),
+});
+const withContextToExpandPanelProps = (Component) => function WithContextToExpandPanelProps({ ctx, props, }) {
+    const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
+    const { childLabelProp, schema, path, index, uischemas } = props;
+    const childPath = composePaths(path, `${index}`);
+    const childData = Resolve.data(ctx.core.data, childPath);
+    const childLabel = childLabelProp
+        ? get(childData, childLabelProp, '')
+        : get(childData, getFirstPrimitiveProp(schema), '');
+    return (React.createElement(Component, Object.assign({}, props, dispatchProps, { childLabel: childLabel, childPath: childPath, uischemas: uischemas })));
 };
+const withJsonFormsExpandPanelProps = (Component) => withJsonFormsContext(withContextToExpandPanelProps(Component));
+var ExpandPanelRenderer$1 = withJsonFormsExpandPanelProps(ExpandPanelRenderer);
 
 const groupTester = rankWith(1, uiTypeIs('Group'));
 const style = { marginBottom: '10px' };
-const GroupComponent = React.memo(({ visible, enabled, uischema, label, ...props }) => {
+const GroupComponent = React.memo(function GroupComponent({ visible, enabled, uischema, label, ...props }) {
     const groupLayout = uischema;
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(Card, { style: style },
-            !isEmpty(label) && (React.createElement(CardHeader, { title: 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, label }) => {
+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, label: label }));
 };
@@ -1008,7 +1092,7 @@ var MaterialGroupLayout = withJsonFormsLayoutProps(MaterializedGroupLayoutRender
 const materialGroupTester = withIncreasedRank(1, groupTester);
 
 const materialHorizontalLayoutTester = rankWith(2, uiTypeIs('HorizontalLayout'));
-const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, schema, path, enabled, visible }) => {
+const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, schema, path, enabled, visible, }) => {
     const layout = uischema;
     const childProps = {
         elements: layout.elements,
@@ -1016,14 +1100,14 @@ const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, schema,
         path,
         enabled,
         direction: 'row',
-        visible
+        visible,
     };
-    return React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { renderers: renderers, cells: cells }));
+    return (React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { renderers: renderers, cells: cells })));
 };
 var MaterialHorizontalLayout = withJsonFormsLayoutProps(MaterialHorizontalLayoutRenderer);
 
 const materialVerticalLayoutTester = rankWith(1, uiTypeIs('VerticalLayout'));
-const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled, visible, renderers, cells }) => {
+const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled, visible, renderers, cells, }) => {
     const verticalLayout = uischema;
     const childProps = {
         elements: verticalLayout.elements,
@@ -1031,9 +1115,9 @@ const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled, visib
         path,
         enabled,
         direction: 'column',
-        visible
+        visible,
     };
-    return React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { renderers: renderers, cells: cells }));
+    return (React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { renderers: renderers, cells: cells })));
 };
 var MaterialVerticalLayout = withJsonFormsLayoutProps(MaterialVerticalLayoutRenderer);
 
@@ -1044,23 +1128,29 @@ 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, t } = props;
+    const { data, path, renderers, cells, schema, uischema, visible, enabled, selected, onChange, ajv, t, } = props;
     const categorization = uischema;
+    const [previousCategorization, setPreviousCategorization] = useState(uischema);
     const [activeCategory, setActiveCategory] = useState(selected ?? 0);
     const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv)), [categorization, data, ajv]);
+    if (categorization !== previousCategorization) {
+        setActiveCategory(0);
+        setPreviousCategorization(categorization);
+    }
+    const safeCategory = activeCategory >= categorization.elements.length ? 0 : activeCategory;
     const childProps = {
-        elements: categories[activeCategory].elements,
+        elements: categories[safeCategory] ? categories[safeCategory].elements : [],
         schema,
         path,
         direction: 'column',
         enabled,
         visible,
         renderers,
-        cells
+        cells,
     };
     const onTabChange = (_event, value) => {
         if (onChange) {
-            onChange(value, activeCategory);
+            onChange(value, safeCategory);
         }
         setActiveCategory(value);
     };
@@ -1069,90 +1159,12 @@ const MaterialCategorizationLayoutRenderer = (props) => {
     }, [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((_, idx) => (React.createElement(Tab, { key: idx, label: tabLabels[idx] }))))),
+            React.createElement(Tabs, { value: safeCategory, onChange: onTabChange, textColor: 'inherit', indicatorColor: 'secondary', variant: 'scrollable' }, categories.map((_, idx) => (React.createElement(Tab, { key: idx, label: tabLabels[idx] }))))),
         React.createElement("div", { style: { marginTop: '0.5em' } },
-            React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps)))));
+            React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { key: safeCategory })))));
 };
 var MaterialCategorizationLayout = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));
 
-const iconStyle = { float: 'right' };
-const ExpandPanelRendererComponent = (props) => {
-    const [labelHtmlId] = useState(createId('expand-panel'));
-    useEffect(() => {
-        return () => {
-            removeId(labelHtmlId);
-        };
-    }, [labelHtmlId]);
-    const { enabled, 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' },
-                React.createElement(Grid, { item: true, xs: 7, md: 9 },
-                    React.createElement(Grid, { container: true, alignItems: 'center' },
-                        React.createElement(Grid, { item: true, xs: 2, md: 1 },
-                            React.createElement(Avatar, { "aria-label": 'Index' }, index + 1)),
-                        React.createElement(Grid, { item: true, xs: 10, md: 11 },
-                            React.createElement("span", { id: labelHtmlId }, childLabel)))),
-                React.createElement(Grid, { item: true, xs: 5, md: 3 },
-                    React.createElement(Grid, { container: true, justifyContent: 'flex-end' },
-                        React.createElement(Grid, { item: true },
-                            React.createElement(Grid, { container: true, direction: 'row', justifyContent: 'center', alignItems: 'center' },
-                                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))),
-                                    React.createElement(Grid, { item: true },
-                                        React.createElement(IconButton, { onClick: moveDown(path, index), style: iconStyle, disabled: !enableMoveDown, "aria-label": `Move down`, size: 'large' },
-                                            React.createElement(ArrowDownward, null))))) : (''),
-                                React.createElement(Grid, { item: true },
-                                    React.createElement(IconButton, { onClick: removeItems(path, [index]), style: iconStyle, "aria-label": `Delete`, size: 'large' },
-                                        React.createElement(DeleteIcon, null))))))))),
-        React.createElement(AccordionDetails, null,
-            React.createElement(JsonFormsDispatch, { enabled: enabled, schema: schema, uischema: foundUISchema, path: childPath, key: childPath, renderers: renderers, cells: cells }))));
-};
-const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
-const ctxDispatchToExpandPanelProps = dispatch => ({
-    removeItems: useCallback((path, toDelete) => (event) => {
-        event.stopPropagation();
-        dispatch(update(path, array => {
-            toDelete
-                .sort()
-                .reverse()
-                .forEach(s => array.splice(s, 1));
-            return array;
-        }));
-    }, [dispatch]),
-    moveUp: useCallback((path, toMove) => (event) => {
-        event.stopPropagation();
-        dispatch(update(path, array => {
-            moveUp(array, toMove);
-            return array;
-        }));
-    }, [dispatch]),
-    moveDown: useCallback((path, toMove) => (event) => {
-        event.stopPropagation();
-        dispatch(update(path, array => {
-            moveDown(array, toMove);
-            return array;
-        }));
-    }, [dispatch])
-});
-const withContextToExpandPanelProps = (Component) => ({ ctx, props }) => {
-    const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
-    const { childLabelProp, schema, path, index, uischemas } = props;
-    const childPath = composePaths(path, `${index}`);
-    const childData = Resolve.data(ctx.core.data, childPath);
-    const childLabel = childLabelProp
-        ? get(childData, childLabelProp, '')
-        : get(childData, getFirstPrimitiveProp(schema), '');
-    return (React.createElement(Component, Object.assign({}, props, dispatchProps, { childLabel: childLabel, childPath: childPath, uischemas: uischemas })));
-};
-const withJsonFormsExpandPanelProps = (Component) => withJsonFormsContext(withContextToExpandPanelProps(Component));
-var ExpandPanelRenderer$1 = withJsonFormsExpandPanelProps(ExpandPanelRenderer);
-
 const MaterialArrayLayoutComponent = (props) => {
     const [expanded, setExpanded] = useState(false);
     const innerCreateDefaultValue = useCallback(() => createDefaultValue(props.schema), [props.schema]);
@@ -1160,20 +1172,18 @@ const MaterialArrayLayoutComponent = (props) => {
         setExpanded(expandedPanel ? panel : false);
     }, []);
     const isExpanded = (index) => expanded === composePaths(props.path, `${index}`);
-    const { enabled, data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas } = props;
+    const { enabled, data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas, translations, } = props;
     const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
     return (React.createElement("div", null,
-        React.createElement(ArrayLayoutToolbar, { label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: innerCreateDefaultValue }),
-        React.createElement("div", null, data > 0 ? (map(range(data), index => {
-            return (React.createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas }));
+        React.createElement(ArrayLayoutToolbar, { translations: translations, label: computeLabel(label, required, appliedUiSchemaOptions.hideRequiredAsterisk), errors: errors, path: path, addItem: addItem, createDefault: innerCreateDefaultValue }),
+        React.createElement("div", null, data > 0 ? (map(range(data), (index) => {
+            return (React.createElement(ExpandPanelRenderer$1, { enabled: enabled, index: index, expanded: isExpanded(index), schema: schema, path: path, handleExpansion: handleChange, uischema: uischema, renderers: renderers, cells: cells, key: index, rootSchema: rootSchema, enableMoveUp: index != 0, enableMoveDown: index < data - 1, config: config, childLabelProp: appliedUiSchemaOptions.elementLabelProp, uischemas: uischemas, translations: translations }));
         })) : (React.createElement("p", null, "No data")))));
 };
 const MaterialArrayLayout$1 = React.memo(MaterialArrayLayoutComponent);
 
 const MaterialArrayLayoutRenderer = ({ visible, addItem, ...props }) => {
-    const addItemCb = useCallback((p, value) => addItem(p, value), [
-        addItem
-    ]);
+    const addItemCb = useCallback((p, value) => addItem(p, value), [addItem]);
     return (React.createElement(Hidden, { xsUp: !visible },
         React.createElement(MaterialArrayLayout$1, Object.assign({ visible: visible, addItem: addItemCb }, props))));
 };
@@ -1195,12 +1205,12 @@ var MaterialBooleanToggleCell$1 = withJsonFormsCellProps(MaterialBooleanToggleCe
 const MaterialDateCell = (props) => {
     const { data, className, id, enabled, uischema, path, handleChange, config } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    return (React.createElement(Input$1, { type: 'date', value: data || '', onChange: ev => handleChange(path, ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
+    return (React.createElement(Input$1, { type: 'date', value: data || '', onChange: (ev) => handleChange(path, ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
 };
 const materialDateCellTester = rankWith(2, isDateControl);
 var MaterialDateCell$1 = withJsonFormsCellProps(MaterialDateCell);
 
-const MaterialEnumCell = (props) => (React.createElement(MuiSelect, Object.assign({}, props)));
+const MaterialEnumCell = (props) => React.createElement(MuiSelect, Object.assign({}, props));
 const materialEnumCellTester = rankWith(2, isEnumControl);
 var MaterialEnumCell$1 = withJsonFormsEnumCellProps(withTranslateProps(React.memo(MaterialEnumCell)), false);
 
@@ -1216,7 +1226,7 @@ const MaterialNumberFormatCell = (props) => React.createElement(MuiInputNumberFo
 const materialNumberFormatCellTester = rankWith(4, isNumberFormatControl);
 var MaterialNumberFormatCell$1 = withJsonFormsCellProps(MaterialNumberFormatCell);
 
-const MaterialOneOfEnumCell = (props) => (React.createElement(MuiSelect, Object.assign({}, props)));
+const MaterialOneOfEnumCell = (props) => React.createElement(MuiSelect, Object.assign({}, props));
 const materialOneOfEnumCellTester = rankWith(2, isOneOfEnumControl);
 var MaterialOneOfEnumCell$1 = withJsonFormsOneOfEnumCellProps(withTranslateProps(React.memo(MaterialOneOfEnumCell)), false);
 
@@ -1247,19 +1257,19 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
     const handleStep = (step) => {
         setActiveCategory(step);
     };
-    const { data, path, renderers, schema, uischema, visible, cells, config, ajv, t } = props;
+    const { data, path, renderers, schema, uischema, visible, cells, config, ajv, t, } = props;
     const categorization = uischema;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const buttonWrapperStyle = {
         textAlign: 'right',
         width: '100%',
-        margin: '1em auto'
+        margin: '1em auto',
     };
     const buttonNextStyle = {
-        float: 'right'
+        float: 'right',
     };
     const buttonStyle = {
-        marginRight: '1em'
+        marginRight: '1em',
     };
     const categories = useMemo(() => categorization.elements.filter((category) => isVisible(category, data, undefined, ajv)), [categorization, data, ajv]);
     const childProps = {
@@ -1269,7 +1279,7 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
         direction: 'column',
         visible,
         renderers,
-        cells
+        cells,
     };
     const tabLabels = useMemo(() => {
         return categories.map((e) => deriveLabelForUISchemaElement(e, t));
@@ -1279,19 +1289,63 @@ const MaterialCategorizationStepperLayoutRenderer = (props) => {
             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))));
+        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 = withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer)));
 
+const UnwrappedAdditional = {
+    MaterialLabelRenderer,
+    MaterialListWithDetailRenderer,
+};
+
+const UnwrappedComplex = {
+    MaterialAllOfRenderer,
+    MaterialAnyOfRenderer,
+    MaterialArrayControlRenderer,
+    MaterialEnumArrayRenderer,
+    MaterialObjectRenderer,
+    MaterialOneOfRenderer,
+};
+
+const UnwrappedControls = {
+    MaterialAnyOfStringOrEnumControl,
+    MaterialBooleanControl,
+    MaterialBooleanToggleControl,
+    MaterialDateControl,
+    MaterialDateTimeControl,
+    MaterialEnumControl,
+    MaterialIntegerControl,
+    MaterialNativeControl,
+    MaterialNumberControl,
+    MaterialOneOfEnumControl,
+    MaterialOneOfRadioGroupControl,
+    MaterialSliderControl,
+    MaterialRadioGroupControl,
+    MaterialTextControl,
+    MaterialTimeControl,
+};
+
+const UnwrappedLayouts = {
+    ExpandPanelRenderer: ExpandPanelRenderer,
+    MaterialArrayLayout: MaterialArrayLayoutRenderer,
+    MaterialCategorizationLayout: MaterialCategorizationLayoutRenderer,
+    MaterialGroupLayout: MaterializedGroupLayoutRenderer,
+    MaterialHorizontalLayout: MaterialHorizontalLayoutRenderer,
+    MaterialVerticalLayout: MaterialVerticalLayoutRenderer,
+};
+
 const materialRenderers = [
     {
         tester: materialArrayControlTester,
-        renderer: MaterialArrayControlRenderer$1
+        renderer: MaterialArrayControlRenderer$1,
     },
     { tester: materialBooleanControlTester, renderer: MaterialBooleanControl$1 },
-    { tester: materialBooleanToggleControlTester, renderer: MaterialBooleanToggleControl$1 },
+    {
+        tester: materialBooleanToggleControlTester,
+        renderer: MaterialBooleanToggleControl$1,
+    },
     { tester: materialNativeControlTester, renderer: MaterialNativeControl$1 },
     { tester: materialEnumControlTester, renderer: MaterialEnumControl$1 },
     { tester: materialIntegerControlTester, renderer: MaterialIntegerControl$1 },
@@ -1307,41 +1361,44 @@ const materialRenderers = [
     { tester: materialOneOfControlTester, renderer: MaterialOneOfRenderer$1 },
     {
         tester: materialRadioGroupControlTester,
-        renderer: MaterialRadioGroupControl$1
+        renderer: MaterialRadioGroupControl$1,
     },
     {
         tester: materialOneOfRadioGroupControlTester,
-        renderer: MaterialOneOfRadioGroupControl$1
+        renderer: MaterialOneOfRadioGroupControl$1,
+    },
+    {
+        tester: materialOneOfEnumControlTester,
+        renderer: MaterialOneOfEnumControl$1,
     },
-    { tester: materialOneOfEnumControlTester, renderer: MaterialOneOfEnumControl$1 },
     { tester: materialGroupTester, renderer: MaterialGroupLayout },
     {
         tester: materialHorizontalLayoutTester,
-        renderer: MaterialHorizontalLayout
+        renderer: MaterialHorizontalLayout,
     },
     { tester: materialVerticalLayoutTester, renderer: MaterialVerticalLayout },
     {
         tester: materialCategorizationTester,
-        renderer: MaterialCategorizationLayout
+        renderer: MaterialCategorizationLayout,
     },
     {
         tester: materialCategorizationStepperTester,
-        renderer: MaterialCategorizationStepperLayout
+        renderer: MaterialCategorizationStepperLayout,
     },
     { tester: materialArrayLayoutTester, renderer: MaterialArrayLayout },
     { tester: materialLabelRendererTester, renderer: MaterialLabelRenderer$1 },
     {
         tester: materialListWithDetailTester,
-        renderer: MaterialListWithDetailRenderer$1
+        renderer: MaterialListWithDetailRenderer$1,
     },
     {
         tester: materialAnyOfStringOrEnumControlTester,
-        renderer: MaterialAnyOfStringOrEnumControl$1
+        renderer: MaterialAnyOfStringOrEnumControl$1,
     },
     {
         tester: materialEnumArrayRendererTester,
-        renderer: MaterialEnumArrayRenderer$1
-    }
+        renderer: MaterialEnumArrayRenderer$1,
+    },
 ];
 const materialCells = [
     { tester: materialBooleanCellTester, cell: MaterialBooleanCell$1 },
@@ -1353,8 +1410,14 @@ const materialCells = [
     { tester: materialNumberFormatCellTester, cell: MaterialNumberFormatCell$1 },
     { tester: materialOneOfEnumCellTester, cell: MaterialOneOfEnumCell$1 },
     { tester: materialTextCellTester, cell: MaterialTextCell$1 },
-    { tester: materialTimeCellTester, cell: MaterialTimeCell$1 }
+    { tester: materialTimeCellTester, cell: MaterialTimeCell$1 },
 ];
+const Unwrapped = {
+    ...UnwrappedAdditional,
+    ...UnwrappedComplex,
+    ...UnwrappedControls,
+    ...UnwrappedLayouts,
+};
 
-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 };
+export { ArrayLayoutToolbar, CombinatorProperties, CustomizableCells as Customizable, DeleteDialog, ExpandPanelRenderer$1 as ExpandPanelRenderer, ListWithDetailMasterItem, MaterialAllOfRenderer$1 as MaterialAllOfRenderer, MaterialAnyOfRenderer$1 as MaterialAnyOfRenderer, MaterialAnyOfStringOrEnumControl$1 as MaterialAnyOfStringOrEnumControl, MaterialArrayControlRenderer$1 as MaterialArrayControlRenderer, MaterialArrayLayout, MaterialBooleanCell$1 as MaterialBooleanCell, MaterialBooleanControl$1 as MaterialBooleanControl, MaterialBooleanToggleCell$1 as MaterialBooleanToggleCell, MaterialBooleanToggleControl$1 as MaterialBooleanToggleControl, MaterialCategorizationLayout, MaterialDateCell$1 as MaterialDateCell, MaterialDateControl$1 as MaterialDateControl, MaterialDateTimeControl$1 as MaterialDateTimeControl, MaterialEnumArrayRenderer$1 as MaterialEnumArrayRenderer, MaterialEnumCell$1 as MaterialEnumCell, MaterialEnumControl$1 as MaterialEnumControl, MaterialGroupLayout, MaterialHorizontalLayout, MaterialInputControl, MaterialIntegerCell$1 as MaterialIntegerCell, MaterialIntegerControl$1 as MaterialIntegerControl, MaterialLabelRenderer$1 as MaterialLabelRenderer, MaterialLayoutRenderer, MaterialListWithDetailRenderer$1 as MaterialListWithDetailRenderer, MaterialNativeControl$1 as MaterialNativeControl, MaterialNumberCell$1 as MaterialNumberCell, MaterialNumberControl$1 as MaterialNumberControl, MaterialNumberFormatCell$1 as MaterialNumberFormatCell, MaterialObjectRenderer$1 as MaterialObjectRenderer, MaterialOneOfEnumCell$1 as MaterialOneOfEnumCell, MaterialOneOfEnumControl$1 as MaterialOneOfEnumControl, MaterialOneOfRadioGroupControl$1 as MaterialOneOfRadioGroupControl, MaterialOneOfRenderer$1 as MaterialOneOfRenderer, MaterialRadioGroupControl$1 as MaterialRadioGroupControl, MaterialSliderControl$1 as MaterialSliderControl, MaterialTableControl, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiAutocomplete, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, MuiToggle, NoBorderTableCell, NonEmptyRow, ResettableTextField, Unwrapped, createOnChangeHandler, ctxDispatchToExpandPanelProps, getData, i18nDefaults, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialLabelRendererTester, materialListWithDetailTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, withAjvProps, withContextToExpandPanelProps, withJsonFormsExpandPanelProps };
 //# sourceMappingURL=jsonforms-react-material.esm.js.map