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

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

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useMemo, Fragment, useEffect } from 'react';
-import { Hidden, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, IconButton, FormHelperText, Table, TableHead, TableBody, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Autocomplete, TextField, Checkbox, Input, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, FormLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
+import { Hidden, Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Button, Tabs, Tab, TableCell, styled as styled$1, Badge, Tooltip, TableRow, Grid, Typography, IconButton, FormHelperText, Table, TableHead, TableBody, Autocomplete, TextField, Checkbox, useThemeProps, Input, FilledInput, OutlinedInput, useTheme, InputAdornment, Select, MenuItem, Switch, FormControl, FormGroup, FormControlLabel, Toolbar, ListItem, ListItemAvatar, Avatar, ListItemText, ListItemSecondaryAction, List, InputLabel, FormLabel, RadioGroup, Radio, Slider, Accordion, AccordionSummary, AccordionDetails, Card, CardHeader, CardContent, AppBar, Stepper, Step, StepButton } from '@mui/material';
 import { rankWith, isAllOfControl, findMatchingUISchema, createCombinatorRenderInfos, Generate, isLayout, isAnyOfControl, createDefaultValue, Resolve, encode, Paths, formatErrorMessage, errorsAt, or, isObjectArrayControl, isPrimitiveArrayControl, isDescriptionHidden, getAjv, and, uiTypeIs, schemaMatches, hasType, schemaSubPathMatches, isObjectControl, findUISchema, isOneOfControl, isObjectArray, computeLabel, composePaths, showAsRequired, isBooleanControl, optionIs, isDateControl, isDateTimeControl, isEnumControl, isIntegerControl, isTimeControl, isNumberControl, isOneOfEnumControl, isRangeControl, isStringControl, createId, removeId, update, moveUp, moveDown, getFirstPrimitiveProp, withIncreasedRank, isVisible, deriveLabelForUISchemaElement, isObjectArrayWithNesting, isNumberFormatControl, categorizationHasCategory } from '@jsonforms/core';
 import { withJsonFormsAllOfProps, JsonFormsDispatch, withJsonFormsAnyOfProps, DispatchCell, useJsonForms, withJsonFormsArrayLayoutProps, withJsonFormsMultiEnumProps, withJsonFormsDetailProps, withJsonFormsOneOfProps, withJsonFormsLabelProps, withJsonFormsMasterListItemProps, withJsonFormsControlProps, Control, withJsonFormsEnumProps, withTranslateProps, withJsonFormsOneOfEnumProps, withJsonFormsContext, withJsonFormsLayoutProps, withJsonFormsCellProps, withJsonFormsEnumCellProps, withJsonFormsOneOfEnumCellProps } from '@jsonforms/react';
 import omit from 'lodash/omit';
@@ -23,7 +23,6 @@ import { LocalizationProvider, DatePicker, DateTimePicker, TimePicker } from '@m
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import get from 'lodash/get';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import Input$1 from '@mui/material/Input';
 
 const MaterialAllOfRenderer = ({ schema, rootSchema, visible, renderers, cells, path, uischemas, uischema, }) => {
     const delegateUISchema = findMatchingUISchema(uischemas)(schema, uischema.scope, path);
@@ -53,15 +52,47 @@ class CombinatorProperties extends React.Component {
     }
 }
 
-const MaterialAnyOfRenderer = ({ schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, }) => {
+const TabSwitchConfirmDialog = ({ open, handleClose, confirm, cancel, id, }) => {
+    return (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: `${id}-confirm-yes` }, "Yes"))));
+};
+
+const MaterialAnyOfRenderer = ({ handleChange, schema, rootSchema, indexOfFittingSchema, visible, path, renderers, cells, uischema, uischemas, id, data, }) => {
     const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
-    const handleChange = useCallback((_ev, value) => setSelectedAnyOf(value), [setSelectedAnyOf]);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
+    const [newSelectedIndex, setNewSelectedIndex] = useState(0);
+    const handleClose = useCallback(() => setConfirmDialogOpen(false), [setConfirmDialogOpen]);
+    const handleTabChange = useCallback((_event, newIndex) => {
+        if (isEmpty(data) ||
+            typeof data ===
+                typeof createDefaultValue(anyOfRenderInfos[newIndex].schema)) {
+            setSelectedAnyOf(newIndex);
+        }
+        else {
+            setNewSelectedIndex(newIndex);
+            setConfirmDialogOpen(true);
+        }
+    }, [setConfirmDialogOpen, setSelectedAnyOf, data]);
+    const openNewTab = (newIndex) => {
+        handleChange(path, createDefaultValue(anyOfRenderInfos[newIndex].schema));
+        setSelectedAnyOf(newIndex);
+    };
+    const confirm = useCallback(() => {
+        openNewTab(newSelectedIndex);
+        setConfirmDialogOpen(false);
+    }, [handleChange, createDefaultValue, newSelectedIndex]);
     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 })))));
+        React.createElement(Tabs, { value: selectedAnyOf, onChange: handleTabChange }, 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 }))),
+        React.createElement(TabSwitchConfirmDialog, { cancel: handleClose, confirm: confirm, id: 'anyOf-' + id, open: confirmDialogOpen, handleClose: handleClose })));
 };
 const materialAnyOfControlTester = rankWith(3, isAnyOfControl);
 var MaterialAnyOfRenderer$1 = withJsonFormsAnyOfProps(MaterialAnyOfRenderer);
@@ -300,7 +331,7 @@ const MuiAutocomplete = (props) => {
             }, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
                 setInputValue(newInputValue);
             }, autoHighlight: true, autoSelect: true, autoComplete: true, fullWidth: true, options: options, getOptionLabel: getOptionLabel || ((option) => option?.label), freeSolo: false, renderInput: (params) => {
-                return (React.createElement(TextField, Object.assign({ label: label, variant: 'standard', type: 'text', inputProps: params.inputProps, inputRef: params.InputProps.ref, autoFocus: appliedUiSchemaOptions.focus, disabled: !enabled }, params, { id: id + '-input', required: required && !appliedUiSchemaOptions.hideRequiredAsterisk, error: !isValid, fullWidth: !appliedUiSchemaOptions.trim, InputLabelProps: data ? { shrink: true } : undefined, onFocus: onFocus, onBlur: onBlur, focused: focused })));
+                return (React.createElement(TextField, Object.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.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
         React.createElement(FormHelperText, { error: !isValid }, secondFormHelperText)));
@@ -356,6 +387,24 @@ const withAjvProps = (Component) => function WithAjvProps(props) {
     return React.createElement(Component, Object.assign({}, props, { ajv: ajv }));
 };
 
+const variantToInput = {
+    standard: Input,
+    filled: FilledInput,
+    outlined: OutlinedInput,
+};
+const defaultInputVariant = 'standard';
+function useInputVariant() {
+    const { variant = defaultInputVariant } = useThemeProps({
+        props: {},
+        name: 'MuiTextField',
+    });
+    return variant;
+}
+function useInputComponent() {
+    const variant = useInputVariant();
+    return variantToInput[variant] ?? variantToInput[defaultInputVariant];
+}
+
 const eventToValue$3 = (ev) => ev.target.value;
 const useDebouncedChange = (handleChange, defaultValue, data, path, eventToValueFunction = eventToValue$3, timeout = 300) => {
     const [input, setInput] = useState(data ?? defaultValue);
@@ -382,25 +431,28 @@ const i18nDefaults = {
 const toNumber$1 = (value) => value === '' ? undefined : parseInt(value, 10);
 const eventToValue$2 = (ev) => toNumber$1(ev.target.value);
 const MuiInputInteger = React.memo(function MuiInputInteger(props) {
-    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const { data, className, id, enabled, uischema, path, handleChange, config, label, } = props;
+    const InputComponent = useInputComponent();
     const inputProps = { step: '1' };
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue$2);
-    return (React.createElement(Input, { type: 'number', value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
+    return (React.createElement(InputComponent, { label: label, 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$1 = (ev) => toNumber(ev.target.value);
 const MuiInputNumber = React.memo(function MuiInputNumber(props) {
-    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const { data, className, id, enabled, uischema, path, handleChange, config, label, } = props;
+    const InputComponent = useInputComponent();
     const inputProps = { step: '0.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 }));
+    return (React.createElement(InputComponent, { type: 'number', label: label, value: inputValue, onChange: onChange, className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, inputProps: inputProps, fullWidth: true }));
 });
 
 const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(props) {
-    const { className, id, enabled, uischema, isValid, path, handleChange, schema, config, } = props;
+    const { className, id, enabled, uischema, isValid, path, handleChange, schema, config, label, } = props;
+    const InputComponent = useInputComponent();
     const maxLength = schema.maxLength;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     let inputProps;
@@ -413,13 +465,14 @@ const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(props) {
     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 }));
+    return (React.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 }));
 });
 
 const eventToValue = (ev) => ev.target.value === '' ? undefined : ev.target.value;
 const MuiInputText = React.memo(function MuiInputText(props) {
     const [showAdornment, setShowAdornment] = useState(false);
-    const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, muiInputProps, inputComponent, } = props;
+    const { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, muiInputProps, label, inputComponent, } = props;
+    const InputComponent = useInputComponent();
     const maxLength = schema.maxLength;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     let inputProps;
@@ -442,7 +495,7 @@ const MuiInputText = React.memo(function MuiInputText(props) {
             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: {
+    return (React.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.createElement(InputAdornment, { position: 'end', style: {
                 display: !showAdornment || !enabled || data === undefined
                     ? 'none'
                     : 'flex',
@@ -454,17 +507,18 @@ const MuiInputText = React.memo(function MuiInputText(props) {
 });
 
 const MuiInputTime = React.memo(function MuiInputTime(props) {
-    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const { data, className, id, enabled, uischema, path, handleChange, config, label, } = props;
+    const InputComponent = useInputComponent();
     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 }));
+    return (React.createElement(InputComponent, { type: 'time', value: inputValue, onChange: onChange, className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
 });
 
 const MuiSelect = React.memo(function MuiSelect(props) {
-    const { data, className, id, enabled, schema, uischema, path, handleChange, options, config, t, } = props;
+    const { data, className, id, enabled, schema, uischema, path, handleChange, options, config, label, t, } = props;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }), [t, schema, uischema, path]);
-    return (React.createElement(Select, { className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: (ev) => handleChange(path, ev.target.value || undefined), fullWidth: true, variant: 'standard' }, [
+    return (React.createElement(Select, { className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, value: data !== undefined ? data : '', onChange: (ev) => handleChange(path, ev.target.value || undefined), fullWidth: true }, [
         React.createElement(MenuItem, { value: '', key: 'jsonforms.enum.none' },
             React.createElement("em", null, noneOptionLabel)),
     ].concat(options.map((optionValue) => (React.createElement(MenuItem, { value: optionValue.value, key: optionValue.value }, optionValue.label))))));
@@ -518,13 +572,13 @@ const materialObjectControlTester = rankWith(2, isObjectControl);
 var MaterialObjectRenderer$1 = withJsonFormsDetailProps(MaterialObjectRenderer);
 
 const MaterialOneOfRenderer = ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data, }) => {
-    const [open, setOpen] = useState(false);
+    const [confirmDialogOpen, setConfirmDialogOpen] = useState(false);
     const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
     const [newSelectedIndex, setNewSelectedIndex] = useState(0);
-    const handleClose = useCallback(() => setOpen(false), [setOpen]);
+    const handleClose = useCallback(() => setConfirmDialogOpen(false), [setConfirmDialogOpen]);
     const cancel = useCallback(() => {
-        setOpen(false);
-    }, [setOpen]);
+        setConfirmDialogOpen(false);
+    }, [setConfirmDialogOpen]);
     const oneOfRenderInfos = createCombinatorRenderInfos(schema.oneOf, rootSchema, 'oneOf', uischema, path, uischemas);
     const openNewTab = (newIndex) => {
         handleChange(path, createDefaultValue(oneOfRenderInfos[newIndex].schema));
@@ -532,7 +586,7 @@ const MaterialOneOfRenderer = ({ handleChange, schema, path, renderers, cells, r
     };
     const confirm = useCallback(() => {
         openNewTab(newSelectedIndex);
-        setOpen(false);
+        setConfirmDialogOpen(false);
     }, [handleChange, createDefaultValue, newSelectedIndex]);
     const handleTabChange = useCallback((_event, newOneOfIndex) => {
         setNewSelectedIndex(newOneOfIndex);
@@ -540,20 +594,14 @@ const MaterialOneOfRenderer = ({ handleChange, schema, path, renderers, cells, r
             openNewTab(newOneOfIndex);
         }
         else {
-            setOpen(true);
+            setConfirmDialogOpen(true);
         }
-    }, [setOpen, setSelectedIndex, data]);
+    }, [setConfirmDialogOpen, 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")))));
+        React.createElement(TabSwitchConfirmDialog, { cancel: cancel, confirm: confirm, id: 'oneOf-' + id, open: confirmDialogOpen, handleClose: handleClose })));
 };
 const materialOneOfControlTester = rankWith(3, isOneOfControl);
 var MaterialOneOfRenderer$1 = withJsonFormsOneOfProps(MaterialOneOfRenderer);
@@ -624,6 +672,7 @@ var MaterialListWithDetailRenderer$1 = withJsonFormsArrayLayoutProps(MaterialLis
 const MaterialInputControl = (props) => {
     const [focused, onFocus, onBlur] = useFocus();
     const { id, description, errors, label, uischema, visible, required, config, input, } = props;
+    const variant = useInputVariant();
     const isValid = errors.length === 0;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
     const showDescription = !isDescriptionHidden(visible, description, focused, appliedUiSchemaOptions.showUnfocusedDescription);
@@ -635,7 +684,7 @@ const MaterialInputControl = (props) => {
     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(FormControl, { fullWidth: !appliedUiSchemaOptions.trim, onFocus: onFocus, onBlur: onBlur, variant: variant, id: id },
             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),
@@ -645,7 +694,8 @@ const MaterialInputControl = (props) => {
 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 { data, config, className, id, enabled, uischema, isValid, path, handleChange, schema, label, } = props;
+    const InputComponent = useInputComponent();
     const enumSchema = findEnumSchema(schema.anyOf);
     const stringSchema = findTextSchema(schema.anyOf);
     const maxLength = stringSchema.maxLength;
@@ -663,7 +713,7 @@ const MuiAutocompleteInputText = (props) => {
     }, [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 }));
+    return (React.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 }));
 };
 class MaterialAnyOfStringOrEnumControl extends Control {
     render() {
@@ -799,7 +849,6 @@ const MaterialDateControl = (props) => {
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
                         onBlur: onBlur,
-                        variant: 'standard',
                     },
                 } }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -850,7 +899,6 @@ const MaterialDateTimeControl = (props) => {
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
                         onBlur: onBlur,
-                        variant: 'standard',
                     },
                 } }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1001,7 +1049,6 @@ const MaterialTimeControl = (props) => {
                         InputLabelProps: data ? { shrink: true } : undefined,
                         onFocus: onFocus,
                         onBlur: onBlur,
-                        variant: 'standard',
                     },
                 } }),
             React.createElement(FormHelperText, { error: !isValid && !showDescription }, firstFormHelperText),
@@ -1218,9 +1265,10 @@ const materialBooleanToggleCellTester = rankWith(3, and(isBooleanControl, option
 var MaterialBooleanToggleCell$1 = withJsonFormsCellProps(MaterialBooleanToggleCell);
 
 const MaterialDateCell = (props) => {
-    const { data, className, id, enabled, uischema, path, handleChange, config } = props;
+    const { data, className, id, enabled, uischema, path, handleChange, config, label, } = props;
+    const InputComponent = useInputComponent();
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    return (React.createElement(Input$1, { type: 'date', value: data || '', onChange: (ev) => handleChange(path, ev.target.value), className: className, id: id, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
+    return (React.createElement(InputComponent, { type: 'date', value: data || '', onChange: (ev) => handleChange(path, ev.target.value), className: className, id: id, label: label, disabled: !enabled, autoFocus: appliedUiSchemaOptions.focus, fullWidth: true }));
 };
 const materialDateCellTester = rankWith(2, isDateControl);
 var MaterialDateCell$1 = withJsonFormsCellProps(MaterialDateCell);
@@ -1434,5 +1482,5 @@ const Unwrapped = {
     ...UnwrappedLayouts,
 };
 
-export { ArrayLayoutToolbar, CombinatorProperties, CustomizableCells as Customizable, DeleteDialog, ExpandPanelRenderer$1 as ExpandPanelRenderer, ListWithDetailMasterItem, MaterialAllOfRenderer$1 as MaterialAllOfRenderer, MaterialAnyOfRenderer$1 as MaterialAnyOfRenderer, MaterialAnyOfStringOrEnumControl$1 as MaterialAnyOfStringOrEnumControl, MaterialArrayControlRenderer$1 as MaterialArrayControlRenderer, MaterialArrayLayout, MaterialBooleanCell$1 as MaterialBooleanCell, MaterialBooleanControl$1 as MaterialBooleanControl, MaterialBooleanToggleCell$1 as MaterialBooleanToggleCell, MaterialBooleanToggleControl$1 as MaterialBooleanToggleControl, MaterialCategorizationLayout, MaterialDateCell$1 as MaterialDateCell, MaterialDateControl$1 as MaterialDateControl, MaterialDateTimeControl$1 as MaterialDateTimeControl, MaterialEnumArrayRenderer$1 as MaterialEnumArrayRenderer, MaterialEnumCell$1 as MaterialEnumCell, MaterialEnumControl$1 as MaterialEnumControl, MaterialGroupLayout, MaterialHorizontalLayout, MaterialInputControl, MaterialIntegerCell$1 as MaterialIntegerCell, MaterialIntegerControl$1 as MaterialIntegerControl, MaterialLabelRenderer$1 as MaterialLabelRenderer, MaterialLayoutRenderer, MaterialListWithDetailRenderer$1 as MaterialListWithDetailRenderer, MaterialNativeControl$1 as MaterialNativeControl, MaterialNumberCell$1 as MaterialNumberCell, MaterialNumberControl$1 as MaterialNumberControl, MaterialNumberFormatCell$1 as MaterialNumberFormatCell, MaterialObjectRenderer$1 as MaterialObjectRenderer, MaterialOneOfEnumCell$1 as MaterialOneOfEnumCell, MaterialOneOfEnumControl$1 as MaterialOneOfEnumControl, MaterialOneOfRadioGroupControl$1 as MaterialOneOfRadioGroupControl, MaterialOneOfRenderer$1 as MaterialOneOfRenderer, MaterialRadioGroupControl$1 as MaterialRadioGroupControl, MaterialSliderControl$1 as MaterialSliderControl, MaterialTableControl, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiAutocomplete, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, MuiToggle, NoBorderTableCell, NonEmptyRow, Unwrapped, createOnChangeHandler, ctxDispatchToExpandPanelProps, getData, i18nDefaults, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialLabelRendererTester, materialListWithDetailTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, withAjvProps, withContextToExpandPanelProps, withJsonFormsExpandPanelProps };
+export { ArrayLayoutToolbar, CombinatorProperties, CustomizableCells as Customizable, DeleteDialog, ExpandPanelRenderer$1 as ExpandPanelRenderer, ListWithDetailMasterItem, MaterialAllOfRenderer$1 as MaterialAllOfRenderer, MaterialAnyOfRenderer$1 as MaterialAnyOfRenderer, MaterialAnyOfStringOrEnumControl$1 as MaterialAnyOfStringOrEnumControl, MaterialArrayControlRenderer$1 as MaterialArrayControlRenderer, MaterialArrayLayout, MaterialBooleanCell$1 as MaterialBooleanCell, MaterialBooleanControl$1 as MaterialBooleanControl, MaterialBooleanToggleCell$1 as MaterialBooleanToggleCell, MaterialBooleanToggleControl$1 as MaterialBooleanToggleControl, MaterialCategorizationLayout, MaterialDateCell$1 as MaterialDateCell, MaterialDateControl$1 as MaterialDateControl, MaterialDateTimeControl$1 as MaterialDateTimeControl, MaterialEnumArrayRenderer$1 as MaterialEnumArrayRenderer, MaterialEnumCell$1 as MaterialEnumCell, MaterialEnumControl$1 as MaterialEnumControl, MaterialGroupLayout, MaterialHorizontalLayout, MaterialInputControl, MaterialIntegerCell$1 as MaterialIntegerCell, MaterialIntegerControl$1 as MaterialIntegerControl, MaterialLabelRenderer$1 as MaterialLabelRenderer, MaterialLayoutRenderer, MaterialListWithDetailRenderer$1 as MaterialListWithDetailRenderer, MaterialNativeControl$1 as MaterialNativeControl, MaterialNumberCell$1 as MaterialNumberCell, MaterialNumberControl$1 as MaterialNumberControl, MaterialNumberFormatCell$1 as MaterialNumberFormatCell, MaterialObjectRenderer$1 as MaterialObjectRenderer, MaterialOneOfEnumCell$1 as MaterialOneOfEnumCell, MaterialOneOfEnumControl$1 as MaterialOneOfEnumControl, MaterialOneOfRadioGroupControl$1 as MaterialOneOfRadioGroupControl, MaterialOneOfRenderer$1 as MaterialOneOfRenderer, MaterialRadioGroupControl$1 as MaterialRadioGroupControl, MaterialSliderControl$1 as MaterialSliderControl, MaterialTableControl, MaterialTextCell$1 as MaterialTextCell, MaterialTextControl$1 as MaterialTextControl, MaterialTimeCell$1 as MaterialTimeCell, MaterialTimeControl$1 as MaterialTimeControl, MaterialVerticalLayout, MuiAutocomplete, MuiCheckbox, MuiInputInteger, MuiInputNumber, MuiInputNumberFormat, MuiInputText, MuiInputTime, MuiSelect, MuiToggle, NoBorderTableCell, NonEmptyRow, Unwrapped, createOnChangeHandler, ctxDispatchToExpandPanelProps, defaultInputVariant, getData, i18nDefaults, materialAllOfControlTester, materialAnyOfControlTester, materialAnyOfStringOrEnumControlTester, materialArrayControlTester, materialArrayLayoutTester, materialBooleanCellTester, materialBooleanControlTester, materialBooleanToggleCellTester, materialBooleanToggleControlTester, materialCategorizationTester, materialCells, materialDateCellTester, materialDateControlTester, materialDateTimeControlTester, materialEnumArrayRendererTester, materialEnumCellTester, materialEnumControlTester, materialGroupTester, materialHorizontalLayoutTester, materialIntegerCellTester, materialIntegerControlTester, materialLabelRendererTester, materialListWithDetailTester, materialNativeControlTester, materialNumberCellTester, materialNumberControlTester, materialNumberFormatCellTester, materialObjectControlTester, materialOneOfControlTester, materialOneOfEnumCellTester, materialOneOfEnumControlTester, materialOneOfRadioGroupControlTester, materialRadioGroupControlTester, materialRenderers, materialSliderControlTester, materialTextCellTester, materialTextControlTester, materialTimeCellTester, materialTimeControlTester, materialVerticalLayoutTester, renderLayoutElements, useDebouncedChange, useFocus, useInputComponent, useInputVariant, withAjvProps, withContextToExpandPanelProps, withJsonFormsExpandPanelProps };
 //# sourceMappingURL=jsonforms-react-material.esm.js.map