@jsonforms/material-renderers 3.0.0-alpha.3 → 3.0.0-beta.2

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

@@ -0,0 +1,1212 @@
+import { createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, rankWith, isObjectControl, findUISchema, Generate, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, isAnyOfControl, isOneOfControl, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, or, isObjectArrayControl, isPrimitiveArrayControl, isObjectArray, computeLabel, composePaths, isBooleanControl, optionIs, isDescriptionHidden, showAsRequired, isEnumControl, isDateControl, isTimeControl, isDateTimeControl, isRangeControl, isIntegerControl, isNumberControl, isStringControl, isOneOfEnumControl, withIncreasedRank, isVisible, update, moveUp, moveDown, getFirstPrimitiveProp, createId, removeId, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
+import React, { useMemo, Fragment, useState, useCallback, useEffect } from 'react';
+import { DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsDetailProps, JsonFormsDispatch, withJsonFormsAllOfProps, withJsonFormsAnyOfProps, withJsonFormsOneOfProps, withJsonFormsMultiEnumProps, withJsonFormsLayoutProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, withJsonFormsEnumProps, Control, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
+import isEmpty from 'lodash/isEmpty';
+import union from 'lodash/union';
+import startCase from 'lodash/startCase';
+import range from 'lodash/range';
+import { TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, Hidden, IconButton, FormHelperText, Table, TableHead, TableBody, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, Checkbox, Select, MenuItem, Input, useTheme, InputAdornment, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, Switch, InputLabel, Autocomplete, TextField, FormLabel, Slider, RadioGroup, Radio, Card, CardHeader, CardContent, AppBar, Accordion, AccordionSummary, AccordionDetails, Stepper, Step, StepButton } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import ArrowDownward from '@mui/icons-material/ArrowDownward';
+import ArrowUpward from '@mui/icons-material/ArrowUpward';
+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';
+import Close from '@mui/icons-material/Close';
+import map from 'lodash/map';
+import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@mui/lab';
+import AdapterDayjs from '@mui/lab/AdapterDayjs';
+import get from 'lodash/get';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import Input$1 from '@mui/material/Input';
+
+const StyledTableCell = styled(TableCell)({
+    borderBottom: 'none'
+});
+const NoBorderTableCell = ({ children, ...otherProps }) => (React.createElement(StyledTableCell, Object.assign({}, otherProps), children));
+
+const StyledBadge = styled$1(Badge)(({ theme }) => ({
+    color: theme.palette.error.main
+}));
+const ValidationIcon = ({ errorMessages, id }) => {
+    return (React.createElement(Tooltip, { id: id, title: errorMessages },
+        React.createElement(StyledBadge, { badgeContent: errorMessages.split('\n').length },
+            React.createElement(ErrorOutlineIcon, { color: 'inherit' }))));
+};
+
+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 },
+                React.createElement(Hidden, { smUp: 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: `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)));
+
+const styles = {
+    fixedCell: {
+        width: '150px',
+        height: '50px',
+        paddingLeft: 0,
+        paddingRight: 0,
+        textAlign: 'center'
+    },
+    fixedCellSmall: {
+        width: '50px',
+        height: '50px',
+        paddingLeft: 0,
+        paddingRight: 0,
+        textAlign: 'center'
+    }
+};
+const generateCells = (Cell, schema, rowPath, enabled, cells) => {
+    if (schema.type === 'object') {
+        return getValidColumnProps(schema).map(prop => {
+            const cellPath = Paths.compose(rowPath, prop);
+            const props = {
+                propName: prop,
+                schema,
+                title: schema.properties?.[prop]?.title ?? startCase(prop),
+                rowPath,
+                cellPath,
+                enabled,
+                cells
+            };
+            return React.createElement(Cell, Object.assign({ key: cellPath }, props));
+        });
+    }
+    else {
+        const props = {
+            schema,
+            rowPath,
+            cellPath: rowPath,
+            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');
+    }
+    return [''];
+};
+const EmptyTable = ({ numColumns }) => (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)));
+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)));
+    return {
+        rowPath: ownProps.rowPath,
+        propName: ownProps.propName,
+        schema: ownProps.schema,
+        rootSchema: ctx.core.schema,
+        errors,
+        path,
+        enabled: ownProps.enabled,
+        cells: ownProps.cells || ctx.cells,
+        renderers: ownProps.renderers || ctx.renderers
+    };
+};
+const controlWithoutLabel = (scope) => ({
+    type: 'Control',
+    scope: scope,
+    label: false
+});
+const NonEmptyCellComponent = React.memo(({ 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)));
+});
+const NonEmptyCell = (ownProps) => {
+    const ctx = useJsonForms();
+    const emptyCellProps = ctxToNonEmptyCellProps(ctx, 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 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 },
+        generateCells(NonEmptyCell, schema, childPath, enabled, cells),
+        enabled ? (React.createElement(NoBorderTableCell, { style: showSortButtons ? styles.fixedCell : styles.fixedCellSmall },
+            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(ArrowUpward, null))),
+                    React.createElement(Grid, { item: true },
+                        React.createElement(IconButton, { "aria-label": `Move down`, 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(DeleteIcon, null)))))) : null));
+};
+const NonEmptyRow = React.memo(NonEmptyRowComponent);
+const TableRows = ({ data, path, schema, openDeleteDialog, moveUp, moveDown, uischema, config, enabled, cells }) => {
+    const isEmptyTable = data === 0;
+    if (isEmptyTable) {
+        return React.createElement(EmptyTable, { numColumns: getValidColumnProps(schema).length + 1 });
+    }
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    return (React.createElement(React.Fragment, null, range(data).map((index) => {
+        const childPath = Paths.compose(path, `${index}`);
+        return (React.createElement(NonEmptyRow, { key: childPath, childPath: childPath, rowIndex: index, schema: schema, openDeleteDialog: openDeleteDialog, moveUpCreator: moveUp, moveDownCreator: moveDown, enableUp: index !== 0, enableDown: index !== data - 1, showSortButtons: appliedUiSchemaOptions.showSortButtons, enabled: enabled, cells: cells, path: path }));
+    })));
+};
+class MaterialTableControl extends React.Component {
+    constructor() {
+        super(...arguments);
+        this.addItem = (path, value) => this.props.addItem(path, value);
+    }
+    render() {
+        const { label, path, schema, rootSchema, uischema, errors, openDeleteDialog, visible, enabled, cells } = this.props;
+        const controlElement = uischema;
+        const isObjectSchema = schema.type === 'object';
+        const headerCells = isObjectSchema
+            ? generateCells(TableHeaderCell, schema, path, enabled, cells)
+            : undefined;
+        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 }),
+                    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))))));
+    }
+}
+
+const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel }) => {
+    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(DialogContent, null,
+            React.createElement(DialogContentText, { id: 'alert-dialog-confirmdelete-description' }, "Are you sure you want to delete the selected entry?")),
+        React.createElement(DialogActions, null,
+            React.createElement(Button, { onClick: onCancel, color: 'primary' }, "No"),
+            React.createElement(Button, { onClick: onConfirm, color: 'primary' }, "Yes"))));
+});
+
+const MaterialArrayControlRenderer = (props) => {
+    const [open, setOpen] = useState(false);
+    const [path, setPath] = useState(undefined);
+    const [rowData, setRowData] = useState(undefined);
+    const { removeItems, visible } = props;
+    const openDeleteDialog = useCallback((p, rowIndex) => {
+        setOpen(true);
+        setPath(p);
+        setRowData(rowIndex);
+    }, [setOpen, setPath, setRowData]);
+    const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
+    const deleteConfirm = useCallback(() => {
+        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 })));
+};
+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 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]);
+    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 MuiCheckbox = React.memo((props) => {
+    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const inputProps = { 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: inputProps }));
+});
+
+const MuiSelect = React.memo((props) => {
+    const { data, className, id, enabled, uischema, path, handleChange, options, config } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    return (React.createElement(Select, { className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: ev => handleChange(path, ev.target.value), fullWidth: true, variant: 'standard' }, [React.createElement(MenuItem, { value: '', key: 'empty' })].concat(options.map(optionValue => (React.createElement(MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label))))));
+});
+
+dayjs.extend(customParsing);
+const createOnChangeHandler = (path, handleChange, saveFormat) => (time) => {
+    if (!time) {
+        handleChange(path, undefined);
+        return;
+    }
+    const result = dayjs(time).format(saveFormat);
+    handleChange(path, result === 'Invalid Date' ? undefined : result);
+};
+const getData = (data, saveFormat) => {
+    if (!data) {
+        return null;
+    }
+    const dayjsData = dayjs(data, saveFormat);
+    if (dayjsData.toString() === 'Invalid Date') {
+        return null;
+    }
+    return dayjsData;
+};
+
+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 }) => {
+    if (isEmpty(elements)) {
+        return null;
+    }
+    else {
+        return (React.createElement(Hidden, { xsUp: !visible },
+            React.createElement(Grid, { container: true, direction: direction, spacing: direction === 'row' ? 2 : 0 }, renderLayoutElements(elements, schema, path, enabled, renderers, cells))));
+    }
+};
+const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);
+const withAjvProps = (Component) => (props) => {
+    const ctx = useJsonForms();
+    const ajv = getAjv({ jsonforms: { ...ctx } });
+    return (React.createElement(Component, Object.assign({}, props, { ajv: ajv })));
+};
+
+const eventToValue$2 = (ev) => ev.target.value;
+const useDebouncedChange = (handleChange, defaultValue, data, path, eventToValueFunction = eventToValue$2, timeout = 300) => {
+    const [input, setInput] = useState(data ?? defaultValue);
+    useEffect(() => {
+        setInput(data ?? defaultValue);
+    }, [data]);
+    const debouncedUpdate = useCallback(debounce((newValue) => handleChange(path, newValue), timeout), [handleChange, path, timeout]);
+    const onChange = useCallback((ev) => {
+        const newValue = eventToValueFunction(ev);
+        setInput(newValue ?? defaultValue);
+        debouncedUpdate(newValue);
+    }, [debouncedUpdate, eventToValueFunction]);
+    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 toNumber$1 = (value) => value === '' ? undefined : parseInt(value, 10);
+const eventToValue$1 = (ev) => toNumber$1(ev.target.value);
+const MuiInputInteger = React.memo((props) => {
+    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const inputProps = { step: '1' };
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$1);
+    return (React.createElement(Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
+});
+
+const toNumber = (value) => value === '' ? undefined : parseFloat(value);
+const eventToValue = (ev) => toNumber(ev.target.value);
+const MuiInputNumber = React.memo((props) => {
+    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const inputProps = { step: '0.1' };
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+    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 maxLength = schema.maxLength;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    let inputProps;
+    if (appliedUiSchemaOptions.restrict) {
+        inputProps = { maxLength: maxLength };
+    }
+    else {
+        inputProps = {};
+    }
+    const formattedNumber = props.toFormatted(props.data);
+    const validStringNumber = useCallback((ev) => props.fromFormatted(ev.currentTarget.value), [props.fromFormatted]);
+    const [inputValue, onChange] = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber);
+    return (React.createElement(Input, { type: 'text', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid }));
+});
+
+const MuiInputText = React.memo((props) => {
+    const [showAdornment, setShowAdornment] = useState(false);
+    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;
+    if (appliedUiSchemaOptions.restrict) {
+        inputProps = { maxLength: maxLength };
+    }
+    else {
+        inputProps = {};
+    }
+    inputProps = merge(inputProps, muiInputProps);
+    if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
+        inputProps.size = maxLength;
+    }
+    const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path);
+    const onPointerEnter = () => setShowAdornment(true);
+    const onPointerLeave = () => setShowAdornment(false);
+    const theme = useTheme();
+    const closeStyle = {
+        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',
+                position: 'absolute',
+                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 { 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 }) => {
+    return (React.createElement(Hidden, { xlUp: !visible },
+        React.createElement(FormControl, { component: 'fieldset' },
+            React.createElement(FormGroup, { row: true }, options.map((option, index) => {
+                const optionPath = Paths.compose(path, `${index}`);
+                const checkboxValue = data?.includes(option.value)
+                    ? option.value
+                    : undefined;
+                return (React.createElement(FormControlLabel, { id: option.value, key: option.value, control: React.createElement(MuiCheckbox, Object.assign({ key: 'checkbox-' + option.value, isValid: isEmpty(errors), path: optionPath, handleChange: (_childPath, newValue) => newValue
+                            ? addItem(path, option.value)
+                            : removeItem(path, option.value), data: checkboxValue, errors: errors, schema: schema, visible: visible }, otherProps)), label: option.label }));
+            })),
+            React.createElement(FormHelperText, { error: true }, errors))));
+};
+const hasOneOfItems = (schema) => schema.oneOf !== undefined &&
+    schema.oneOf.length > 0 &&
+    schema.oneOf.every((entry) => {
+        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') &&
+    !Array.isArray(schema.items) &&
+    schema.uniqueItems === true), schemaSubPathMatches('items', schema => {
+    return hasOneOfItems(schema) || hasEnumItems(schema);
+}))));
+var MaterialEnumArrayRenderer$1 = withJsonFormsMultiEnumProps(MaterialEnumArrayRenderer);
+
+const materialArrayControlTester = rankWith(3, or(isObjectArrayControl, isPrimitiveArrayControl));
+
+const materialLabelRendererTester = rankWith(1, uiTypeIs('Label'));
+const MaterialLabelRenderer = ({ uischema, visible }) => {
+    const labelElement = uischema;
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(Typography, { variant: 'h6' }, labelElement.text !== undefined && labelElement.text !== null && labelElement.text)));
+};
+var MaterialLabelRenderer$1 = withJsonFormsLayoutProps(MaterialLabelRenderer);
+
+const ArrayLayoutToolbar = React.memo(({ label, errors, addItem, path, createDefault }) => {
+    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)),
+            React.createElement(Hidden, { smUp: 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(AddIcon, null)))))))));
+});
+
+const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path }) => {
+    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(DeleteIcon, null)))));
+};
+var ListWithDetailMasterItem$1 = withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
+
+const MaterialListWithDetailRenderer = ({ uischemas, schema, uischema, path, errors, visible, label, required, removeItems, addItem, data, renderers, cells, config }) => {
+    const [selectedIndex, setSelectedIndex] = useState(undefined);
+    const handleRemoveItem = useCallback((p, value) => () => {
+        removeItems(p, [value])();
+        if (selectedIndex === value) {
+            setSelectedIndex(undefined);
+        }
+        else if (selectedIndex > value) {
+            setSelectedIndex(selectedIndex - 1);
+        }
+    }, [removeItems, setSelectedIndex]);
+    const handleListItemClick = useCallback((index) => () => setSelectedIndex(index), [setSelectedIndex]);
+    const handleCreateDefaultValue = useCallback(() => createDefaultValue(schema), [createDefaultValue]);
+    const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema), [uischemas, schema, uischema.scope, path, uischema]);
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    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(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"))))));
+};
+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 }) => {
+    return (React.createElement(Hidden, { xsUp: !visible },
+        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 }) })));
+};
+const materialBooleanControlTester = rankWith(2, isBooleanControl);
+var MaterialBooleanControl$1 = withJsonFormsControlProps(MaterialBooleanControl);
+
+const MuiToggle = React.memo((props) => {
+    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const 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: inputProps }));
+});
+
+const MaterialBooleanToggleControl = ({ data, visible, label, id, enabled, uischema, schema, rootSchema, handleChange, errors, path, config }) => {
+    return (React.createElement(Hidden, { xsUp: !visible },
+        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 }) })));
+};
+const materialBooleanToggleControlTester = rankWith(3, and(isBooleanControl, optionIs('toggle', true)));
+var MaterialBooleanToggleControl$1 = withJsonFormsControlProps(MaterialBooleanToggleControl);
+
+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, 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 { data, className, id, enabled, uischema, path, handleChange, options, config, getOptionLabel, renderOption, filterOptions } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const [inputValue, setInputValue] = React.useState(data ?? '');
+    const findOption = options.find(o => o.value === data) ?? null;
+    return (React.createElement(Autocomplete, { className: className, id: id, disabled: !enabled, value: findOption, onChange: (_event, newValue) => {
+            handleChange(path, newValue?.value);
+        }, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
+            setInputValue(newInputValue);
+        }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (option => option?.label), style: { marginTop: 16 }, renderInput: params => (React.createElement(Input, { style: { width: '100%' }, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled })), renderOption: renderOption, filterOptions: filterOptions }));
+};
+
+const MaterialEnumControl = (props) => {
+    const { config, uischema } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    return (React.createElement(MaterialInputControl, Object.assign({}, props, { input: appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete })));
+};
+const materialEnumControlTester = rankWith(2, isEnumControl);
+var MaterialEnumControl$1 = withJsonFormsEnumProps(MaterialEnumControl);
+
+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 })));
+};
+const materialNativeControlTester = rankWith(2, or(isDateControl, isTimeControl));
+var MaterialNativeControl$1 = withJsonFormsControlProps(MaterialNativeControl);
+
+const MaterialDateControl = (props) => {
+    const [focused, onFocus, onBlur] = useFocus();
+    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);
+    const format = appliedUiSchemaOptions.dateFormat ?? 'YYYY-MM-DD';
+    const saveFormat = appliedUiSchemaOptions.dateSaveFormat ?? 'YYYY-MM-DD';
+    const firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+            React.createElement(DatePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(TextField, Object.assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: { ...params.inputProps, type: 'text' }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
+            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
+};
+const materialDateControlTester = rankWith(4, isDateControl);
+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 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 firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+            React.createElement(DateTimePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(TextField, Object.assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: { ...params.inputProps, type: 'text' }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
+            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
+};
+const materialDateTimeControlTester = rankWith(2, isDateTimeControl);
+var MaterialDateTimeControl$1 = withJsonFormsControlProps(MaterialDateTimeControl);
+
+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;
+    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
+    const format = appliedUiSchemaOptions.timeFormat ?? 'HH:mm';
+    const saveFormat = appliedUiSchemaOptions.timeSaveFormat ?? 'HH:mm:ss';
+    const firstFormHelperText = showDescription
+        ? description
+        : !isValid
+            ? errors
+            : null;
+    const secondFormHelperText = showDescription && !isValid ? errors : null;
+    const onChange = useMemo(() => createOnChangeHandler(path, handleChange, saveFormat), [path, handleChange, saveFormat]);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs },
+            React.createElement(TimePicker, { label: label, value: getData(data, saveFormat), clearable: true, onChange: onChange, inputFormat: format, disableMaskedInput: true, ampm: !!appliedUiSchemaOptions.ampm, views: appliedUiSchemaOptions.views, disabled: !enabled, cancelText: appliedUiSchemaOptions.cancelLabel, clearText: appliedUiSchemaOptions.clearLabel, okText: appliedUiSchemaOptions.okLabel, renderInput: params => (React.createElement(TextField, Object.assign({}, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, autoFocus: appliedUiSchemaOptions.focus, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, inputProps: { ...params.inputProps, type: 'text' }, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, variant: 'standard' }))) }),
+            React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
+            React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText))));
+};
+const materialTimeControlTester = rankWith(4, isTimeControl);
+var MaterialTimeControl$1 = withJsonFormsControlProps(MaterialTimeControl);
+
+const MaterialSliderControl = (props) => {
+    const [focused, onFocus, onBlur] = useFocus();
+    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%'
+    };
+    const rangeContainerStyle = {
+        display: 'flex'
+    };
+    const rangeItemStyle = {
+        flexGrow: '1'
+    };
+    const sliderStyle = {
+        marginTop: '7px'
+    };
+    const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
+    const onChange = useCallback((_ev, value) => handleChange(path, Number(value)), [path, handleChange]);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, id: id },
+            React.createElement(FormLabel, { htmlFor: id, error: !isValid, component: 'legend', required: showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) },
+                React.createElement(Typography, { id: id + '-typo', style: labelStyle, variant: 'caption' }, label)),
+            React.createElement("div", { style: rangeContainerStyle },
+                React.createElement(Typography, { style: rangeItemStyle, variant: 'caption', align: 'left' }, schema.minimum),
+                React.createElement(Typography, { style: rangeItemStyle, variant: 'caption', align: 'right' }, schema.maximum)),
+            React.createElement(Slider, { style: sliderStyle, min: schema.minimum, max: schema.maximum, value: Number(data || schema.default), onChange: onChange, id: id + '-input', disabled: !enabled, step: schema.multipleOf || 1 }),
+            React.createElement(FormHelperText, { error: !isValid }, !isValid ? errors : showDescription ? description : null))));
+};
+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 } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    return (React.createElement(MaterialInputControl, Object.assign({}, props, { input: appliedUiSchemaOptions.autocomplete === false ? MuiSelect : MuiAutocomplete })));
+};
+const materialOneOfEnumControlTester = rankWith(5, isOneOfEnumControl);
+var MaterialOneOfEnumControl$1 = withJsonFormsOneOfEnumProps(MaterialOneOfEnumControl);
+
+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 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 groupTester = rankWith(1, uiTypeIs('Group'));
+const style = { marginBottom: '10px' };
+const GroupComponent = React.memo(({ visible, enabled, uischema, ...props }) => {
+    const groupLayout = uischema;
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(Card, { style: style },
+            !isEmpty(groupLayout.label) && (React.createElement(CardHeader, { title: groupLayout.label })),
+            React.createElement(CardContent, null,
+                React.createElement(MaterialLayoutRenderer, Object.assign({}, props, { visible: visible, enabled: enabled, elements: groupLayout.elements }))))));
+});
+const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction }) => {
+    const 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 }));
+};
+var MaterialGroupLayout = withJsonFormsLayoutProps(MaterializedGroupLayoutRenderer);
+const materialGroupTester = withIncreasedRank(1, groupTester);
+
+const materialHorizontalLayoutTester = rankWith(2, uiTypeIs('HorizontalLayout'));
+const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, schema, path, enabled, visible }) => {
+    const layout = uischema;
+    const childProps = {
+        elements: layout.elements,
+        schema,
+        path,
+        enabled,
+        direction: 'row',
+        visible
+    };
+    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 verticalLayout = uischema;
+    const childProps = {
+        elements: verticalLayout.elements,
+        schema,
+        path,
+        enabled,
+        direction: 'column',
+        visible
+    };
+    return React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps, { renderers: renderers, cells: cells }));
+};
+var MaterialVerticalLayout = withJsonFormsLayoutProps(MaterialVerticalLayoutRenderer);
+
+const isSingleLevelCategorization = and(uiTypeIs('Categorization'), (uischema) => {
+    const categorization = uischema;
+    return (categorization.elements &&
+        categorization.elements.reduce((acc, e) => acc && e.type === 'Category', true));
+});
+const materialCategorizationTester = rankWith(1, isSingleLevelCategorization);
+const MaterialCategorizationLayoutRenderer = (props) => {
+    const { data, path, renderers, cells, schema, uischema, visible, enabled, selected, onChange, ajv } = props;
+    const categorization = uischema;
+    const [activeCategory, setActiveCategory] = useState(selected ?? 0);
+    const categories = categorization.elements.filter((category) => isVisible(category, data, undefined, ajv));
+    const childProps = {
+        elements: categories[activeCategory].elements,
+        schema,
+        path,
+        direction: 'column',
+        enabled,
+        visible,
+        renderers,
+        cells
+    };
+    const onTabChange = (_event, value) => {
+        if (onChange) {
+            onChange(value, activeCategory);
+        }
+        setActiveCategory(value);
+    };
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(AppBar, { position: 'static' },
+            React.createElement(Tabs, { value: activeCategory, onChange: onTabChange, textColor: 'inherit', indicatorColor: 'secondary', variant: 'scrollable' }, categories.map((e, idx) => (React.createElement(Tab, { key: idx, label: e.label }))))),
+        React.createElement("div", { style: { marginTop: '0.5em' } },
+            React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps)))));
+};
+var MaterialCategorizationLayout = withJsonFormsLayoutProps(withAjvProps(MaterialCategorizationLayoutRenderer));
+
+const iconStyle = { float: 'right' };
+const ExpandPanelRendererComponent = (props) => {
+    const [labelHtmlId] = useState(createId('expand-panel'));
+    useEffect(() => {
+        return () => {
+            removeId(labelHtmlId);
+        };
+    }, [labelHtmlId]);
+    const { childLabel, childPath, index, expanded, moveDown, moveUp, enableMoveDown, enableMoveUp, handleExpansion, removeItems, path, rootSchema, schema, uischema, uischemas, renderers, cells, config } = props;
+    const foundUISchema = useMemo(() => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema), [uischemas, schema, uischema.scope, path, uischema, rootSchema]);
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    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' },
+                                appliedUiSchemaOptions.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, { 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]);
+    const handleChange = useCallback((panel) => (_event, expandedPanel) => {
+        setExpanded(expandedPanel ? panel : false);
+    }, []);
+    const isExpanded = (index) => expanded === composePaths(props.path, `${index}`);
+    const { data, path, schema, uischema, errors, addItem, renderers, cells, label, required, rootSchema, config, uischemas } = 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, { 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("p", null, "No data")))));
+};
+const MaterialArrayLayout$1 = React.memo(MaterialArrayLayoutComponent);
+
+const MaterialArrayLayoutRenderer = ({ visible, enabled, id, uischema, schema, label, rootSchema, renderers, cells, data, path, errors, uischemas, addItem }) => {
+    const addItemCb = useCallback((p, value) => addItem(p, value), [
+        addItem
+    ]);
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(MaterialArrayLayout$1, { label: label, uischema: uischema, schema: schema, id: id, rootSchema: rootSchema, errors: errors, enabled: enabled, visible: visible, data: data, path: path, addItem: addItemCb, renderers: renderers, cells: cells, uischemas: uischemas })));
+};
+const materialArrayLayoutTester = rankWith(4, isObjectArrayWithNesting);
+var MaterialArrayLayout = withJsonFormsArrayLayoutProps(MaterialArrayLayoutRenderer);
+
+const MaterialBooleanCell = (props) => {
+    return React.createElement(MuiCheckbox, Object.assign({}, props));
+};
+const materialBooleanCellTester = rankWith(2, isBooleanControl);
+var MaterialBooleanCell$1 = withJsonFormsCellProps(MaterialBooleanCell);
+
+const MaterialBooleanToggleCell = (props) => {
+    return React.createElement(MuiToggle, Object.assign({}, props));
+};
+const materialBooleanToggleCellTester = rankWith(3, and(isBooleanControl, optionIs('toggle', true)));
+var MaterialBooleanToggleCell$1 = withJsonFormsCellProps(MaterialBooleanToggleCell);
+
+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 }));
+};
+const materialDateCellTester = rankWith(2, isDateControl);
+var MaterialDateCell$1 = withJsonFormsCellProps(MaterialDateCell);
+
+const MaterialEnumCell = (props) => (React.createElement(MuiSelect, Object.assign({}, props)));
+const materialEnumCellTester = rankWith(2, isEnumControl);
+var MaterialEnumCell$1 = withJsonFormsEnumCellProps(MaterialEnumCell);
+
+const MaterialIntegerCell = (props) => (React.createElement(MuiInputInteger, Object.assign({}, props)));
+const materialIntegerCellTester = rankWith(2, isIntegerControl);
+var MaterialIntegerCell$1 = withJsonFormsCellProps(MaterialIntegerCell);
+
+const MaterialNumberCell = (props) => (React.createElement(MuiInputNumber, Object.assign({}, props)));
+const materialNumberCellTester = rankWith(2, isNumberControl);
+var MaterialNumberCell$1 = withJsonFormsCellProps(MaterialNumberCell);
+
+const MaterialNumberFormatCell = (props) => React.createElement(MuiInputNumberFormat, Object.assign({}, props));
+const materialNumberFormatCellTester = rankWith(4, isNumberFormatControl);
+var MaterialNumberFormatCell$1 = withJsonFormsCellProps(MaterialNumberFormatCell);
+
+const MaterialOneOfEnumCell = (props) => (React.createElement(MuiSelect, Object.assign({}, props)));
+const materialOneOfEnumCellTester = rankWith(2, isOneOfEnumControl);
+var MaterialOneOfEnumCell$1 = withJsonFormsOneOfEnumCellProps(MaterialOneOfEnumCell);
+
+const MaterialTextCell = (props) => (React.createElement(MuiInputText, Object.assign({}, props)));
+const materialTextCellTester = rankWith(1, isStringControl);
+var MaterialTextCell$1 = withJsonFormsCellProps(MaterialTextCell);
+
+const MaterialTimeCell = (props) => (React.createElement(MuiInputTime, Object.assign({}, props)));
+const materialTimeCellTester = rankWith(2, isTimeControl);
+var MaterialTimeCell$1 = withJsonFormsCellProps(MaterialTimeCell);
+
+var CustomizableCells = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  MaterialBooleanCell: MaterialBooleanCell,
+  MaterialDateCell: MaterialDateCell,
+  MaterialEnumCell: MaterialEnumCell,
+  MaterialIntegerCell: MaterialIntegerCell,
+  MaterialNumberCell: MaterialNumberCell,
+  MaterialNumberFormatCell: MaterialNumberFormatCell,
+  MaterialOneOfEnumCell: MaterialOneOfEnumCell,
+  MaterialTextCell: MaterialTextCell,
+  MaterialTimeCell: MaterialTimeCell
+});
+
+const materialCategorizationStepperTester = rankWith(2, and(uiTypeIs('Categorization'), categorizationHasCategory, optionIs('variant', 'stepper')));
+const MaterialCategorizationStepperLayoutRenderer = (props) => {
+    const [activeCategory, setActiveCategory] = useState(0);
+    const handleStep = (step) => {
+        setActiveCategory(step);
+    };
+    const { data, path, renderers, schema, uischema, visible, cells, config, ajv } = props;
+    const categorization = uischema;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const buttonWrapperStyle = {
+        textAlign: 'right',
+        width: '100%',
+        margin: '1em auto'
+    };
+    const buttonNextStyle = {
+        float: 'right'
+    };
+    const buttonStyle = {
+        marginRight: '1em'
+    };
+    const categories = categorization.elements.filter((category) => isVisible(category, data, undefined, ajv));
+    const childProps = {
+        elements: categories[activeCategory].elements,
+        schema,
+        path,
+        direction: 'column',
+        visible,
+        renderers,
+        cells
+    };
+    return (React.createElement(Hidden, { xsUp: !visible },
+        React.createElement(Stepper, { activeStep: activeCategory, nonLinear: true }, categories.map((e, idx) => (React.createElement(Step, { key: e.label },
+            React.createElement(StepButton, { onClick: () => handleStep(idx) }, e.label))))),
+        React.createElement("div", null,
+            React.createElement(MaterialLayoutRenderer, Object.assign({}, childProps))),
+        !!appliedUiSchemaOptions.showNavButtons ? (React.createElement("div", { style: buttonWrapperStyle },
+            React.createElement(Button, { style: buttonNextStyle, variant: "contained", color: "primary", disabled: activeCategory >= categories.length - 1, onClick: () => handleStep(activeCategory + 1) }, "Next"),
+            React.createElement(Button, { style: buttonStyle, color: "secondary", variant: "contained", disabled: activeCategory <= 0, onClick: () => handleStep(activeCategory - 1) }, "Previous"))) : (React.createElement(React.Fragment, null))));
+};
+var MaterialCategorizationStepperLayout = withJsonFormsLayoutProps(withAjvProps(MaterialCategorizationStepperLayoutRenderer));
+
+const materialRenderers = [
+    {
+        tester: materialArrayControlTester,
+        renderer: MaterialArrayControlRenderer$1
+    },
+    { tester: materialBooleanControlTester, renderer: MaterialBooleanControl$1 },
+    { tester: materialBooleanToggleControlTester, renderer: MaterialBooleanToggleControl$1 },
+    { tester: materialNativeControlTester, renderer: MaterialNativeControl$1 },
+    { tester: materialEnumControlTester, renderer: MaterialEnumControl$1 },
+    { tester: materialIntegerControlTester, renderer: MaterialIntegerControl$1 },
+    { tester: materialNumberControlTester, renderer: MaterialNumberControl$1 },
+    { tester: materialTextControlTester, renderer: MaterialTextControl$1 },
+    { tester: materialDateTimeControlTester, renderer: MaterialDateTimeControl$1 },
+    { tester: materialDateControlTester, renderer: MaterialDateControl$1 },
+    { tester: materialTimeControlTester, renderer: MaterialTimeControl$1 },
+    { tester: materialSliderControlTester, renderer: MaterialSliderControl$1 },
+    { tester: materialObjectControlTester, renderer: MaterialObjectRenderer$1 },
+    { tester: materialAllOfControlTester, renderer: MaterialAllOfRenderer$1 },
+    { tester: materialAnyOfControlTester, renderer: MaterialAnyOfRenderer$1 },
+    { tester: materialOneOfControlTester, renderer: MaterialOneOfRenderer$1 },
+    {
+        tester: materialRadioGroupControlTester,
+        renderer: MaterialRadioGroupControl$1
+    },
+    {
+        tester: materialOneOfRadioGroupControlTester,
+        renderer: MaterialOneOfRadioGroupControl$1
+    },
+    { tester: materialOneOfEnumControlTester, renderer: MaterialOneOfEnumControl$1 },
+    { tester: materialGroupTester, renderer: MaterialGroupLayout },
+    {
+        tester: materialHorizontalLayoutTester,
+        renderer: MaterialHorizontalLayout
+    },
+    { tester: materialVerticalLayoutTester, renderer: MaterialVerticalLayout },
+    {
+        tester: materialCategorizationTester,
+        renderer: MaterialCategorizationLayout
+    },
+    {
+        tester: materialCategorizationStepperTester,
+        renderer: MaterialCategorizationStepperLayout
+    },
+    { tester: materialArrayLayoutTester, renderer: MaterialArrayLayout },
+    { tester: materialLabelRendererTester, renderer: MaterialLabelRenderer$1 },
+    {
+        tester: materialListWithDetailTester,
+        renderer: MaterialListWithDetailRenderer$1
+    },
+    {
+        tester: materialAnyOfStringOrEnumControlTester,
+        renderer: MaterialAnyOfStringOrEnumControl$1
+    },
+    {
+        tester: materialEnumArrayRendererTester,
+        renderer: MaterialEnumArrayRenderer$1
+    }
+];
+const materialCells = [
+    { tester: materialBooleanCellTester, cell: MaterialBooleanCell$1 },
+    { tester: materialBooleanToggleCellTester, cell: MaterialBooleanToggleCell$1 },
+    { tester: materialDateCellTester, cell: MaterialDateCell$1 },
+    { tester: materialEnumCellTester, cell: MaterialEnumCell$1 },
+    { tester: materialIntegerCellTester, cell: MaterialIntegerCell$1 },
+    { tester: materialNumberCellTester, cell: MaterialNumberCell$1 },
+    { tester: materialNumberFormatCellTester, cell: MaterialNumberFormatCell$1 },
+    { tester: materialOneOfEnumCellTester, cell: MaterialOneOfEnumCell$1 },
+    { tester: materialTextCellTester, cell: MaterialTextCell$1 },
+    { tester: materialTimeCellTester, cell: MaterialTimeCell$1 }
+];
+
+export { CustomizableCells as Customizable, MaterialAllOfRenderer$1 as MaterialAllOfRenderer, MaterialAnyOfRenderer$1 as MaterialAnyOfRenderer, MaterialAnyOfStringOrEnumControl$1 as MaterialAnyOfStringOrEnumControl, MaterialArrayControlRenderer$1 as MaterialArrayControlRenderer, MaterialArrayLayout, MaterialBooleanCell$1 as MaterialBooleanCell, MaterialBooleanControl$1 as MaterialBooleanControl, MaterialBooleanToggleCell$1 as MaterialBooleanToggleCell, MaterialBooleanToggleControl$1 as MaterialBooleanToggleControl, MaterialCategorizationLayout, MaterialDateCell$1 as MaterialDateCell, MaterialDateControl$1 as MaterialDateControl, MaterialDateTimeControl$1 as MaterialDateTimeControl, MaterialEnumArrayRenderer$1 as MaterialEnumArrayRenderer, MaterialEnumCell$1 as MaterialEnumCell, MaterialEnumControl$1 as MaterialEnumControl, MaterialGroupLayout, MaterialHorizontalLayout, MaterialInputControl, MaterialIntegerCell$1 as MaterialIntegerCell, MaterialIntegerControl$1 as MaterialIntegerControl, MaterialLayoutRenderer, MaterialNativeControl$1 as MaterialNativeControl, MaterialNumberCell$1 as MaterialNumberCell, MaterialNumberControl$1 as MaterialNumberControl, MaterialNumberFormatCell$1 as MaterialNumberFormatCell, MaterialObjectRenderer$1 as MaterialObjectRenderer, MaterialOneOfEnumCell$1 as MaterialOneOfEnumCell, MaterialOneOfEnumControl$1 as MaterialOneOfEnumControl, MaterialOneOfRadioGroupControl$1 as MaterialOneOfRadioGroupControl, MaterialOneOfRenderer$1 as MaterialOneOfRenderer, MaterialRadioGroupControl$1 as MaterialRadioGroupControl, MaterialSliderControl$1 as MaterialSliderControl, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, Unwrapped, createOnChangeHandler, getData, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, withAjvProps };
+//# sourceMappingURL=jsonforms-react-material.esm.js.map