@jsonforms/material-renderers 3.1.1-alpha.0 → 3.2.0-alpha.0

package/lib/cells/MaterialDateCell.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { CellProps, RankedTester, WithClassname } from '@jsonforms/core';
-export declare const MaterialDateCell: (props: CellProps & WithClassname) => React.JSX.Element;
+import { WithInputProps } from '../util';
+export declare const MaterialDateCell: (props: CellProps & WithClassname & WithInputProps) => React.JSX.Element;
 export declare const materialDateCellTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfCell>;
 export default _default;

package/lib/complex/MaterialAnyOfRenderer.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { RankedTester, StatePropsOfCombinator } from '@jsonforms/core';
-export declare const MaterialAnyOfRenderer: ({ schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, }: StatePropsOfCombinator) => React.JSX.Element;
+import { CombinatorRendererProps, RankedTester } from '@jsonforms/core';
+export declare const MaterialAnyOfRenderer: ({ handleChange, schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, id, data, }: CombinatorRendererProps) => React.JSX.Element;
 export declare const materialAnyOfControlTester: RankedTester;
 declare const _default: React.ComponentType<import("@jsonforms/core").OwnPropsOfControl>;
 export default _default;

package/lib/complex/TabSwitchConfirmDialog.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface TabSwitchConfirmDialogProps {
+    open: boolean;
+    handleClose: () => void;
+    confirm: () => void;
+    cancel: () => void;
+    id: string;
+}
+export declare const TabSwitchConfirmDialog: ({ open, handleClose, confirm, cancel, id, }: TabSwitchConfirmDialogProps) => React.JSX.Element;

package/lib/complex/unwrapped.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export declare const UnwrappedComplex: {
     MaterialAllOfRenderer: ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }: import("@jsonforms/core").StatePropsOfCombinator) => import("react").JSX.Element;
-    MaterialAnyOfRenderer: ({ schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, }: import("@jsonforms/core").StatePropsOfCombinator) => import("react").JSX.Element;
+    MaterialAnyOfRenderer: ({ handleChange, schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, id, data, }: import("@jsonforms/core").CombinatorRendererProps) => import("react").JSX.Element;
     MaterialArrayControlRenderer: (props: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
     MaterialEnumArrayRenderer: ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }: import("@jsonforms/core").ControlProps & import("@jsonforms/core").OwnPropsOfEnum & import("@jsonforms/core").DispatchPropsOfMultiEnumControl) => import("react").JSX.Element;
     MaterialObjectRenderer: ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema, }: import("@jsonforms/core").StatePropsOfControlWithDetail) => import("react").JSX.Element;

package/lib/index.d.ts

@@ -32,7 +32,7 @@ export declare const Unwrapped: {
     MaterialTextControl: (props: import("@jsonforms/core").ControlProps) => import("react").JSX.Element;
     MaterialTimeControl: (props: import("@jsonforms/core").ControlProps) => import("react").JSX.Element;
     MaterialAllOfRenderer: ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }: import("@jsonforms/core").StatePropsOfCombinator) => import("react").JSX.Element;
-    MaterialAnyOfRenderer: ({ schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, }: import("@jsonforms/core").StatePropsOfCombinator) => import("react").JSX.Element;
+    MaterialAnyOfRenderer: ({ handleChange, schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, id, data, }: import("@jsonforms/core").CombinatorRendererProps) => import("react").JSX.Element;
     MaterialArrayControlRenderer: (props: import("@jsonforms/core").ArrayLayoutProps) => import("react").JSX.Element;
     MaterialEnumArrayRenderer: ({ schema, visible, errors, path, options, data, addItem, removeItem, handleChange: _handleChange, ...otherProps }: import("@jsonforms/core").ControlProps & import("@jsonforms/core").OwnPropsOfEnum & import("@jsonforms/core").DispatchPropsOfMultiEnumControl) => import("react").JSX.Element;
     MaterialObjectRenderer: ({ renderers, cells, uischemas, schema, label, path, visible, enabled, uischema, rootSchema, }: import("@jsonforms/core").StatePropsOfControlWithDetail) => import("react").JSX.Element;

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

@@ -27,7 +27,6 @@ var xDatePickers = require('@mui/x-date-pickers');
 var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
 var get = require('lodash/get');
 var ExpandMoreIcon = require('@mui/icons-material/ExpandMore');
-var Input = require('@mui/material/Input');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -50,7 +49,6 @@ var Close__default = /*#__PURE__*/_interopDefaultLegacy(Close);
 var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var ExpandMoreIcon__default = /*#__PURE__*/_interopDefaultLegacy(ExpandMoreIcon);
-var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
 
 /******************************************************************************
 Copyright (c) Microsoft Corporation.
@@ -66,7 +64,7 @@ LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
 OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
 PERFORMANCE OF THIS SOFTWARE.
 ***************************************************************************** */
-/* global Reflect, Promise */
+/* global Reflect, Promise, SuppressedError, Symbol */
 
 var extendStatics = function(d, b) {
     extendStatics = Object.setPrototypeOf ||
@@ -104,7 +102,12 @@ function __rest(s, e) {
                 t[p[i]] = s[p[i]];
         }
     return t;
-}
+}
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 var MaterialAllOfRenderer = function (_a) {
     var schema = _a.schema, rootSchema = _a.rootSchema, visible = _a.visible, renderers = _a.renderers, cells = _a.cells, path = _a.path, uischemas = _a.uischemas, uischema = _a.uischema;
@@ -140,18 +143,51 @@ var CombinatorProperties =  (function (_super) {
     return CombinatorProperties;
 }(React__default["default"].Component));
 
+var TabSwitchConfirmDialog = function (_a) {
+    var open = _a.open, handleClose = _a.handleClose, confirm = _a.confirm, cancel = _a.cancel, id = _a.id;
+    return (React__default["default"].createElement(material.Dialog, { open: open, onClose: handleClose, "aria-labelledby": 'alert-dialog-title', "aria-describedby": 'alert-dialog-description' },
+        React__default["default"].createElement(material.DialogTitle, { id: 'alert-dialog-title' }, 'Clear form?'),
+        React__default["default"].createElement(material.DialogContent, null,
+            React__default["default"].createElement(material.DialogContentText, { id: 'alert-dialog-description' }, "Your data will be cleared if you navigate away from this tab. Do you want to proceed?")),
+        React__default["default"].createElement(material.DialogActions, null,
+            React__default["default"].createElement(material.Button, { onClick: cancel, color: 'primary' }, "No"),
+            React__default["default"].createElement(material.Button, { onClick: confirm, color: 'primary', autoFocus: true, id: id + "-confirm-yes" }, "Yes"))));
+};
+
 var MaterialAnyOfRenderer = function (_a) {
-    var schema = _a.schema, rootSchema = _a.rootSchema, indexOfFittingSchema = _a.indexOfFittingSchema, visible = _a.visible, path = _a.path, renderers = _a.renderers, cells = _a.cells, uischema = _a.uischema, uischemas = _a.uischemas;
+    var handleChange = _a.handleChange, schema = _a.schema, rootSchema = _a.rootSchema, indexOfFittingSchema = _a.indexOfFittingSchema, visible = _a.visible, path = _a.path, renderers = _a.renderers, cells = _a.cells, uischema = _a.uischema, uischemas = _a.uischemas, id = _a.id, data = _a.data;
     var _b = React.useState(indexOfFittingSchema || 0), selectedAnyOf = _b[0], setSelectedAnyOf = _b[1];
-    var handleChange = React.useCallback(function (_ev, value) { return setSelectedAnyOf(value); }, [setSelectedAnyOf]);
+    var _c = React.useState(false), confirmDialogOpen = _c[0], setConfirmDialogOpen = _c[1];
+    var _d = React.useState(0), newSelectedIndex = _d[0], setNewSelectedIndex = _d[1];
+    var handleClose = React.useCallback(function () { return setConfirmDialogOpen(false); }, [setConfirmDialogOpen]);
+    var handleTabChange = React.useCallback(function (_event, newIndex) {
+        if (isEmpty__default["default"](data) ||
+            typeof data ===
+                typeof core.createDefaultValue(anyOfRenderInfos[newIndex].schema)) {
+            setSelectedAnyOf(newIndex);
+        }
+        else {
+            setNewSelectedIndex(newIndex);
+            setConfirmDialogOpen(true);
+        }
+    }, [setConfirmDialogOpen, setSelectedAnyOf, data]);
+    var openNewTab = function (newIndex) {
+        handleChange(path, core.createDefaultValue(anyOfRenderInfos[newIndex].schema));
+        setSelectedAnyOf(newIndex);
+    };
+    var confirm = React.useCallback(function () {
+        openNewTab(newSelectedIndex);
+        setConfirmDialogOpen(false);
+    }, [handleChange, core.createDefaultValue, newSelectedIndex]);
     var anyOf = 'anyOf';
     var anyOfRenderInfos = core.createCombinatorRenderInfos(schema.anyOf, rootSchema, anyOf, uischema, path, uischemas);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(CombinatorProperties, { schema: schema, combinatorKeyword: anyOf, path: path }),
-        React__default["default"].createElement(material.Tabs, { value: selectedAnyOf, onChange: handleChange }, anyOfRenderInfos.map(function (anyOfRenderInfo) { return (React__default["default"].createElement(material.Tab, { key: anyOfRenderInfo.label, label: anyOfRenderInfo.label })); })),
+        React__default["default"].createElement(material.Tabs, { value: selectedAnyOf, onChange: handleTabChange }, anyOfRenderInfos.map(function (anyOfRenderInfo) { return (React__default["default"].createElement(material.Tab, { key: anyOfRenderInfo.label, label: anyOfRenderInfo.label })); })),
         anyOfRenderInfos.map(function (anyOfRenderInfo, anyOfIndex) {
             return selectedAnyOf === anyOfIndex && (React__default["default"].createElement(react.JsonFormsDispatch, { key: anyOfIndex, schema: anyOfRenderInfo.schema, uischema: anyOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells }));
-        })));
+        }),
+        React__default["default"].createElement(TabSwitchConfirmDialog, { cancel: handleClose, confirm: confirm, id: 'anyOf-' + id, open: confirmDialogOpen, handleClose: handleClose })));
 };
 var materialAnyOfControlTester = core.rankWith(3, core.isAnyOfControl);
 var MaterialAnyOfRenderer$1 = react.withJsonFormsAnyOfProps(MaterialAnyOfRenderer);
@@ -411,7 +447,7 @@ var MuiAutocomplete = function (props) {
             }, inputValue: inputValue, onInputChange: function (_event, newInputValue) {
                 setInputValue(newInputValue);
             }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || (function (option) { return option === null || option === void 0 ? void 0 : option.label; }), freeSolo: false, renderInput: function (params) {
-                return (React__default["default"].createElement(material.TextField, __assign({ label: label, variant: 'standard', type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled }, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused })));
+                return (React__default["default"].createElement(material.TextField, __assign({ label: label, type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled }, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused })));
             }, renderOption: renderOption, filterOptions: filterOptions }),
         React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
         React__default["default"].createElement(material.FormHelperText, { error: !isValid }, secondFormHelperText)));
@@ -472,6 +508,25 @@ var withAjvProps = function (Component) {
     };
 };
 
+var variantToInput = {
+    standard: material.Input,
+    filled: material.FilledInput,
+    outlined: material.OutlinedInput,
+};
+var defaultInputVariant = 'standard';
+function useInputVariant() {
+    var _a = material.useThemeProps({
+        props: {},
+        name: 'MuiTextField',
+    }).variant, variant = _a === void 0 ? defaultInputVariant : _a;
+    return variant;
+}
+function useInputComponent() {
+    var _a;
+    var variant = useInputVariant();
+    return (_a = variantToInput[variant]) !== null && _a !== void 0 ? _a : variantToInput[defaultInputVariant];
+}
+
 var eventToValue$3 = function (ev) { return ev.target.value; };
 var useDebouncedChange = function (handleChange, defaultValue, data, path, eventToValueFunction, timeout) {
     if (eventToValueFunction === void 0) { eventToValueFunction = eventToValue$3; }
@@ -502,11 +557,12 @@ var toNumber$1 = function (value) {
 };
 var eventToValue$2 = function (ev) { return toNumber$1(ev.target.value); };
 var MuiInputInteger = React__default["default"].memo(function MuiInputInteger(props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
+    var InputComponent = useInputComponent();
     var inputProps = { step: '1' };
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var _a = useDebouncedChange(handleChange, '', data, path, eventToValue$2), inputValue = _a[0], onChange = _a[1];
-    return (React__default["default"].createElement(material.Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
+    return (React__default["default"].createElement(InputComponent, { label: label, type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
 });
 
 var toNumber = function (value) {
@@ -514,15 +570,17 @@ var toNumber = function (value) {
 };
 var eventToValue$1 = function (ev) { return toNumber(ev.target.value); };
 var MuiInputNumber = React__default["default"].memo(function MuiInputNumber(props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
+    var InputComponent = useInputComponent();
     var inputProps = { step: '0.1' };
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var _a = useDebouncedChange(handleChange, '', data, path, eventToValue$1), inputValue = _a[0], onChange = _a[1];
-    return (React__default["default"].createElement(material.Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
+    return (React__default["default"].createElement(InputComponent, { type: 'number', label: label, value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
 });
 
 var MuiInputNumberFormat = React__default["default"].memo(function MuiInputNumberFormat(props) {
-    var className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, config = props.config;
+    var className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, config = props.config, label = props.label;
+    var InputComponent = useInputComponent();
     var maxLength = schema.maxLength;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var inputProps;
@@ -535,7 +593,7 @@ var MuiInputNumberFormat = React__default["default"].memo(function MuiInputNumbe
     var formattedNumber = props.toFormatted(props.data);
     var validStringNumber = React.useCallback(function (ev) { return props.fromFormatted(ev.currentTarget.value); }, [props.fromFormatted]);
     var _a = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber), inputValue = _a[0], onChange = _a[1];
-    return (React__default["default"].createElement(material.Input, { type: 'text', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid }));
+    return (React__default["default"].createElement(InputComponent, { type: 'text', value: inputValue, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, multiline: appliedUiSchemaOptions.multi, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid }));
 });
 
 var eventToValue = function (ev) {
@@ -544,7 +602,8 @@ var eventToValue = function (ev) {
 var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
     var _a, _b, _c;
     var _d = React.useState(false), showAdornment = _d[0], setShowAdornment = _d[1];
-    var data = props.data, config = props.config, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, muiInputProps = props.muiInputProps, inputComponent = props.inputComponent;
+    var data = props.data, config = props.config, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, muiInputProps = props.muiInputProps, label = props.label, inputComponent = props.inputComponent;
+    var InputComponent = useInputComponent();
     var maxLength = schema.maxLength;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var inputProps;
@@ -567,7 +626,7 @@ var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
             theme.palette.background.default,
         borderRadius: '50%',
     };
-    return (React__default["default"].createElement(material.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__default["default"].createElement(material.InputAdornment, { position: 'end', style: {
+    return (React__default["default"].createElement(InputComponent, { label: label, 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__default["default"].createElement(material.InputAdornment, { position: 'end', style: {
                 display: !showAdornment || !enabled || data === undefined
                     ? 'none'
                     : 'flex',
@@ -579,17 +638,18 @@ var MuiInputText = React__default["default"].memo(function MuiInputText(props) {
 });
 
 var MuiInputTime = React__default["default"].memo(function MuiInputTime(props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
+    var InputComponent = useInputComponent();
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var _a = useDebouncedChange(handleChange, '', data, path), inputValue = _a[0], onChange = _a[1];
-    return (React__default["default"].createElement(material.Input, { type: 'time', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
+    return (React__default["default"].createElement(InputComponent, { type: 'time', value: inputValue, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
 });
 
 var MuiSelect = React__default["default"].memo(function MuiSelect(props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, schema = props.schema, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, t = props.t;
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, schema = props.schema, uischema = props.uischema, path = props.path, handleChange = props.handleChange, options = props.options, config = props.config, label = props.label, t = props.t;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var noneOptionLabel = React.useMemo(function () { return t('enum.none', i18nDefaults['enum.none'], { schema: schema, uischema: uischema, path: path }); }, [t, schema, uischema, path]);
-    return (React__default["default"].createElement(material.Select, { className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: function (ev) { return handleChange(path, ev.target.value || undefined); }, fullWidth: true, variant: 'standard' }, [
+    return (React__default["default"].createElement(material.Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: function (ev) { return handleChange(path, ev.target.value || undefined); }, fullWidth: true }, [
         React__default["default"].createElement(material.MenuItem, { value: '', key: 'jsonforms.enum.none' },
             React__default["default"].createElement("em", null, noneOptionLabel)),
     ].concat(options.map(function (optionValue) { return (React__default["default"].createElement(material.MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label)); }))));
@@ -658,13 +718,13 @@ var MaterialObjectRenderer$1 = react.withJsonFormsDetailProps(MaterialObjectRend
 
 var MaterialOneOfRenderer = function (_a) {
     var handleChange = _a.handleChange, schema = _a.schema, path = _a.path, renderers = _a.renderers, cells = _a.cells, rootSchema = _a.rootSchema, id = _a.id, visible = _a.visible, indexOfFittingSchema = _a.indexOfFittingSchema, uischema = _a.uischema, uischemas = _a.uischemas, data = _a.data;
-    var _b = React.useState(false), open = _b[0], setOpen = _b[1];
+    var _b = React.useState(false), confirmDialogOpen = _b[0], setConfirmDialogOpen = _b[1];
     var _c = React.useState(indexOfFittingSchema || 0), selectedIndex = _c[0], setSelectedIndex = _c[1];
     var _d = React.useState(0), newSelectedIndex = _d[0], setNewSelectedIndex = _d[1];
-    var handleClose = React.useCallback(function () { return setOpen(false); }, [setOpen]);
+    var handleClose = React.useCallback(function () { return setConfirmDialogOpen(false); }, [setConfirmDialogOpen]);
     var cancel = React.useCallback(function () {
-        setOpen(false);
-    }, [setOpen]);
+        setConfirmDialogOpen(false);
+    }, [setConfirmDialogOpen]);
     var oneOfRenderInfos = core.createCombinatorRenderInfos(schema.oneOf, rootSchema, 'oneOf', uischema, path, uischemas);
     var openNewTab = function (newIndex) {
         handleChange(path, core.createDefaultValue(oneOfRenderInfos[newIndex].schema));
@@ -672,7 +732,7 @@ var MaterialOneOfRenderer = function (_a) {
     };
     var confirm = React.useCallback(function () {
         openNewTab(newSelectedIndex);
-        setOpen(false);
+        setConfirmDialogOpen(false);
     }, [handleChange, core.createDefaultValue, newSelectedIndex]);
     var handleTabChange = React.useCallback(function (_event, newOneOfIndex) {
         setNewSelectedIndex(newOneOfIndex);
@@ -680,22 +740,16 @@ var MaterialOneOfRenderer = function (_a) {
             openNewTab(newOneOfIndex);
         }
         else {
-            setOpen(true);
+            setConfirmDialogOpen(true);
         }
-    }, [setOpen, setSelectedIndex, data]);
+    }, [setConfirmDialogOpen, setSelectedIndex, data]);
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
         React__default["default"].createElement(CombinatorProperties, { schema: schema, combinatorKeyword: 'oneOf', path: path }),
         React__default["default"].createElement(material.Tabs, { value: selectedIndex, onChange: handleTabChange }, oneOfRenderInfos.map(function (oneOfRenderInfo) { return (React__default["default"].createElement(material.Tab, { key: oneOfRenderInfo.label, label: oneOfRenderInfo.label })); })),
         oneOfRenderInfos.map(function (oneOfRenderInfo, oneOfIndex) {
             return selectedIndex === oneOfIndex && (React__default["default"].createElement(react.JsonFormsDispatch, { key: oneOfIndex, schema: oneOfRenderInfo.schema, uischema: oneOfRenderInfo.uischema, path: path, renderers: renderers, cells: cells }));
         }),
-        React__default["default"].createElement(material.Dialog, { open: open, onClose: handleClose, "aria-labelledby": 'alert-dialog-title', "aria-describedby": 'alert-dialog-description' },
-            React__default["default"].createElement(material.DialogTitle, { id: 'alert-dialog-title' }, 'Clear form?'),
-            React__default["default"].createElement(material.DialogContent, null,
-                React__default["default"].createElement(material.DialogContentText, { id: 'alert-dialog-description' }, "Your data will be cleared if you navigate away from this tab. Do you want to proceed?")),
-            React__default["default"].createElement(material.DialogActions, null,
-                React__default["default"].createElement(material.Button, { onClick: cancel, color: 'primary' }, "No"),
-                React__default["default"].createElement(material.Button, { onClick: confirm, color: 'primary', autoFocus: true, id: "oneOf-" + id + "-confirm-yes" }, "Yes")))));
+        React__default["default"].createElement(TabSwitchConfirmDialog, { cancel: cancel, confirm: confirm, id: 'oneOf-' + id, open: confirmDialogOpen, handleClose: handleClose })));
 };
 var materialOneOfControlTester = core.rankWith(3, core.isOneOfControl);
 var MaterialOneOfRenderer$1 = react.withJsonFormsOneOfProps(MaterialOneOfRenderer);
@@ -772,6 +826,7 @@ var MaterialListWithDetailRenderer$1 = react.withJsonFormsArrayLayoutProps(Mater
 var MaterialInputControl = function (props) {
     var _a = useFocus(), focused = _a[0], onFocus = _a[1], onBlur = _a[2];
     var id = props.id, description = props.description, errors = props.errors, label = props.label, uischema = props.uischema, visible = props.visible, required = props.required, config = props.config, input = props.input;
+    var variant = useInputVariant();
     var isValid = errors.length === 0;
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
     var showDescription = !core.isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
@@ -783,7 +838,7 @@ var MaterialInputControl = function (props) {
     var secondFormHelperText = showDescription && !isValid ? errors : null;
     var InnerComponent = input;
     return (React__default["default"].createElement(material.Hidden, { xsUp: !visible },
-        React__default["default"].createElement(material.FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, id: id, variant: 'standard' },
+        React__default["default"].createElement(material.FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, variant: variant, id: id },
             React__default["default"].createElement(material.InputLabel, { htmlFor: id + '-input', error: !isValid, required: core.showAsRequired(required, appliedUiSchemaOptions.hideRequiredAsterisk) }, label),
             React__default["default"].createElement(InnerComponent, __assign({}, props, { id: id + '-input', isValid: isValid, visible: visible })),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -797,7 +852,8 @@ var findTextSchema = function (schemas) {
     return schemas.find(function (s) { return s.type === 'string' && s.enum === undefined; });
 };
 var MuiAutocompleteInputText = function (props) {
-    var data = props.data, config = props.config, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema;
+    var data = props.data, config = props.config, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, isValid = props.isValid, path = props.path, handleChange = props.handleChange, schema = props.schema, label = props.label;
+    var InputComponent = useInputComponent();
     var enumSchema = findEnumSchema(schema.anyOf);
     var stringSchema = findTextSchema(schema.anyOf);
     var maxLength = stringSchema.maxLength;
@@ -815,7 +871,7 @@ var MuiAutocompleteInputText = function (props) {
     }, [appliedUiSchemaOptions, props.id]);
     var _a = useDebouncedChange(handleChange, '', data, path), inputText = _a[0], onChange = _a[1];
     var dataList = (React__default["default"].createElement("datalist", { id: props.id + 'datalist' }, enumSchema.enum.map(function (optionValue) { return (React__default["default"].createElement("option", { value: optionValue, key: optionValue })); })));
-    return (React__default["default"].createElement(material.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 }));
+    return (React__default["default"].createElement(InputComponent, { type: 'text', value: inputText, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: !appliedUiSchemaOptions.trim || maxLength === undefined, inputProps: inputProps, error: !isValid, endAdornment: dataList }));
 };
 var MaterialAnyOfStringOrEnumControl =  (function (_super) {
     __extends(MaterialAnyOfStringOrEnumControl, _super);
@@ -964,7 +1020,6 @@ var MaterialDateControl = function (props) {
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
                         onBlur: onBlur,
-                        variant: 'standard',
                     },
                 } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1019,7 +1074,6 @@ var MaterialDateTimeControl = function (props) {
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
                         onBlur: onBlur,
-                        variant: 'standard',
                     },
                 } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1176,7 +1230,6 @@ var MaterialTimeControl = function (props) {
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
                         onBlur: onBlur,
-                        variant: 'standard',
                     },
                 } }),
             React__default["default"].createElement(material.FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1417,9 +1470,12 @@ var materialBooleanToggleCellTester = core.rankWith(3, core.and(core.isBooleanCo
 var MaterialBooleanToggleCell$1 = react.withJsonFormsCellProps(MaterialBooleanToggleCell);
 
 var MaterialDateCell = function (props) {
-    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config;
+    var data = props.data, className = props.className, id = props.id, enabled = props.enabled, uischema = props.uischema, path = props.path, handleChange = props.handleChange, config = props.config, label = props.label;
+    var InputComponent = useInputComponent();
     var appliedUiSchemaOptions = merge__default["default"]({}, config, uischema.options);
-    return (React__default["default"].createElement(Input__default["default"], { type: 'date', value: data || '', onChange: function (ev) { return handleChange(path, ev.target.value); }, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
+    return (React__default["default"].createElement(InputComponent, { type: 'date', value: data || '', onChange: function (ev) {
+            return handleChange(path, ev.target.value);
+        }, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
 };
 var materialDateCellTester = core.rankWith(2, core.isDateControl);
 var MaterialDateCell$1 = react.withJsonFormsCellProps(MaterialDateCell);
@@ -1693,6 +1749,7 @@ exports.NonEmptyRow = NonEmptyRow;
 exports.Unwrapped = Unwrapped;
 exports.createOnChangeHandler = createOnChangeHandler;
 exports.ctxDispatchToExpandPanelProps = ctxDispatchToExpandPanelProps;
+exports.defaultInputVariant = defaultInputVariant;
 exports.getData = getData;
 exports.i18nDefaults = i18nDefaults;
 exports.materialAllOfControlTester = materialAllOfControlTester;
@@ -1738,6 +1795,8 @@ exports.materialVerticalLayoutTester = materialVerticalLayoutTester;
 exports.renderLayoutElements = renderLayoutElements;
 exports.useDebouncedChange = useDebouncedChange;
 exports.useFocus = useFocus;
+exports.useInputComponent = useInputComponent;
+exports.useInputVariant = useInputVariant;
 exports.withAjvProps = withAjvProps;
 exports.withContextToExpandPanelProps = withContextToExpandPanelProps;
 exports.withJsonFormsExpandPanelProps = withJsonFormsExpandPanelProps;