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

package/src/complex/unwrapped.ts

@@ -0,0 +1,39 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2017-2019 EclipseSource Munich
+  https://github.com/eclipsesource/jsonforms
+  
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to deal
+  in the Software without restriction, including without limitation the rights
+  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+  copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+  THE SOFTWARE.
+*/
+import { MaterialAllOfRenderer } from './MaterialAllOfRenderer';
+import { MaterialAnyOfRenderer } from './MaterialAnyOfRenderer';
+import { MaterialArrayControlRenderer } from './MaterialArrayControlRenderer';
+import { MaterialEnumArrayRenderer } from './MaterialEnumArrayRenderer';
+import { MaterialObjectRenderer } from './MaterialObjectRenderer';
+import { MaterialOneOfRenderer } from './MaterialOneOfRenderer';
+
+export const UnwrappedComplex = {
+  MaterialAllOfRenderer,
+  MaterialAnyOfRenderer,
+  MaterialArrayControlRenderer,
+  MaterialEnumArrayRenderer,
+  MaterialObjectRenderer,
+  MaterialOneOfRenderer,
+};

package/src/controls/MaterialAnyOfStringOrEnumControl.tsx

@@ -32,7 +32,7 @@ import {
   rankWith,
   schemaMatches,
   uiTypeIs,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { Control, withJsonFormsControlProps } from '@jsonforms/react';
 import { Input, InputBaseComponentProps } from '@mui/material';
@@ -43,10 +43,10 @@ import { MaterialInputControl } from './MaterialInputControl';
 
 const findEnumSchema = (schemas: JsonSchema[]) =>
   schemas.find(
-    s => s.enum !== undefined && (s.type === 'string' || s.type === undefined)
+    (s) => s.enum !== undefined && (s.type === 'string' || s.type === undefined)
   );
 const findTextSchema = (schemas: JsonSchema[]) =>
-  schemas.find(s => s.type === 'string' && s.enum === undefined);
+  schemas.find((s) => s.type === 'string' && s.enum === undefined);
 
 const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
   const {
@@ -59,12 +59,15 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
     isValid,
     path,
     handleChange,
-    schema
+    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 appliedUiSchemaOptions = useMemo(
+    () => merge({}, config, uischema.options),
+    [config, uischema.options]
+  );
   const inputProps: InputBaseComponentProps = useMemo(() => {
     let propMemo: InputBaseComponentProps = {};
     if (appliedUiSchemaOptions.restrict) {
@@ -75,12 +78,17 @@ const MuiAutocompleteInputText = (props: EnumCellProps & WithClassname) => {
     }
     propMemo.list = props.id + 'datalist';
     return propMemo;
-  },[appliedUiSchemaOptions,props.id]);
-  const [inputText, onChange] = useDebouncedChange(handleChange, '', data, path);
+  }, [appliedUiSchemaOptions, props.id]);
+  const [inputText, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path
+  );
 
   const dataList = (
     <datalist id={props.id + 'datalist'}>
-      {enumSchema.enum.map(optionValue => (
+      {enumSchema.enum.map((optionValue) => (
         <option value={optionValue} key={optionValue} />
       ))}
     </datalist>
@@ -117,15 +125,15 @@ const hasEnumAndText = (schemas: JsonSchema[]) => {
   const enumSchema = findEnumSchema(schemas);
   const stringSchema = findTextSchema(schemas);
   const remainingSchemas = schemas.filter(
-    s => s !== enumSchema || s !== stringSchema
+    (s) => s !== enumSchema || s !== stringSchema
   );
-  const wrongType = remainingSchemas.find(s => s.type && s.type !== 'string');
+  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)
+    (schema) => schema.hasOwnProperty('anyOf') && hasEnumAndText(schema.anyOf)
   )
 );
 export const materialAnyOfStringOrEnumControlTester: RankedTester = rankWith(

package/src/controls/MaterialBooleanControl.tsx

@@ -30,10 +30,15 @@ import {
   RankedTester,
   rankWith,
   ControlProps,
-  isDescriptionHidden
+  isDescriptionHidden,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, FormHelperText, Tooltip, Hidden } from '@mui/material';
+import {
+  FormControlLabel,
+  FormHelperText,
+  Tooltip,
+  Hidden,
+} from '@mui/material';
 import { MuiCheckbox } from '../mui-controls/MuiCheckbox';
 
 export const MaterialBooleanControl = ({
@@ -49,9 +54,8 @@ export const MaterialBooleanControl = ({
   errors,
   path,
   config,
-  description
+  description,
 }: ControlProps) => {
-
   const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
@@ -65,16 +69,18 @@ export const MaterialBooleanControl = ({
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
-  const showTooltip = !showDescription && !isDescriptionHidden(
-    visible,
-    description,
-    // Tooltips have their own focus handlers, so we do not need to rely
-    // on focus state here. So we pass 'true' to treat it as focused.
-    true,
-    // We also pass true here for showUnfocusedDescription since it should
-    // render regardless of that setting.
-    true
-  );
+  const showTooltip =
+    !showDescription &&
+    !isDescriptionHidden(
+      visible,
+      description,
+      // Tooltips have their own focus handlers, so we do not need to rely
+      // on focus state here. So we pass 'true' to treat it as focused.
+      true,
+      // We also pass true here for showUnfocusedDescription since it should
+      // render regardless of that setting.
+      true
+    );
 
   const firstFormHelperText = showDescription
     ? description
@@ -100,7 +106,7 @@ export const MaterialBooleanControl = ({
 
   return (
     <Hidden xsUp={!visible}>
-      <Tooltip id={tooltipId} title={(showTooltip) ? description : ''}>
+      <Tooltip id={tooltipId} title={showTooltip ? description : ''}>
         <FormControlLabel
           label={label}
           id={id}
@@ -119,7 +125,7 @@ export const MaterialBooleanControl = ({
               errors={errors}
               config={config}
               inputProps={{
-                'aria-describedby': ariaDescribedBy
+                'aria-describedby': ariaDescribedBy,
               }}
             />
           }

package/src/controls/MaterialBooleanToggleControl.tsx

@@ -32,10 +32,15 @@ import {
   ControlProps,
   optionIs,
   and,
-  isDescriptionHidden
+  isDescriptionHidden,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
-import { FormControlLabel, FormHelperText, Tooltip, Hidden } from '@mui/material';
+import {
+  FormControlLabel,
+  FormHelperText,
+  Tooltip,
+  Hidden,
+} from '@mui/material';
 import { MuiToggle } from '../mui-controls/MuiToggle';
 
 export const MaterialBooleanToggleControl = ({
@@ -51,9 +56,8 @@ export const MaterialBooleanToggleControl = ({
   errors,
   path,
   config,
-  description
+  description,
 }: ControlProps) => {
-
   const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
@@ -67,16 +71,18 @@ export const MaterialBooleanToggleControl = ({
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
-  const showTooltip = !showDescription && !isDescriptionHidden(
-    visible,
-    description,
-    // Tooltips have their own focus handlers, so we do not need to rely
-    // on focus state here. So we pass 'true' to treat it as focused.
-    true,
-    // We also pass true here for showUnfocusedDescription since it should
-    // render regardless of that setting.
-    true
-  );
+  const showTooltip =
+    !showDescription &&
+    !isDescriptionHidden(
+      visible,
+      description,
+      // Tooltips have their own focus handlers, so we do not need to rely
+      // on focus state here. So we pass 'true' to treat it as focused.
+      true,
+      // We also pass true here for showUnfocusedDescription since it should
+      // render regardless of that setting.
+      true
+    );
 
   const firstFormHelperText = showDescription
     ? description
@@ -102,7 +108,7 @@ export const MaterialBooleanToggleControl = ({
 
   return (
     <Hidden xsUp={!visible}>
-      <Tooltip id={tooltipId} title={(showTooltip) ? description : ''}>
+      <Tooltip id={tooltipId} title={showTooltip ? description : ''}>
         <FormControlLabel
           label={label}
           id={id}
@@ -121,7 +127,7 @@ export const MaterialBooleanToggleControl = ({
               errors={errors}
               config={config}
               inputProps={{
-                'aria-describedby': ariaDescribedBy
+                'aria-describedby': ariaDescribedBy,
               }}
             />
           }

package/src/controls/MaterialDateControl.tsx

@@ -33,10 +33,7 @@ import {
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
-import {
-  DatePicker,
-  LocalizationProvider 
-} from '@mui/x-date-pickers';
+import { DatePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
   createOnChangeHandler,
@@ -45,7 +42,7 @@ import {
   useFocus,
 } from '../util';
 
-export const MaterialDateControl = (props: ControlProps)=> {
+export const MaterialDateControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
   const {
     description,
@@ -59,7 +56,7 @@ export const MaterialDateControl = (props: ControlProps)=> {
     path,
     handleChange,
     data,
-    config
+    config,
   } = props;
   const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -81,11 +78,10 @@ export const MaterialDateControl = (props: ControlProps)=> {
     ? errors
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
-  const onChange = useMemo(() => createOnChangeHandler(
-    path,
-    handleChange,
-    saveFormat
-  ),[path, handleChange, saveFormat]);
+  const onChange = useMemo(
+    () => createOnChangeHandler(path, handleChange, saveFormat),
+    [path, handleChange, saveFormat]
+  );
 
   const value = getData(data, saveFormat);
   const valueInInputFormat = value ? value.format(format) : '';
@@ -103,18 +99,21 @@ export const MaterialDateControl = (props: ControlProps)=> {
           disabled={!enabled}
           componentsProps={{
             actionBar: {
-              actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
-            }
+              actions: (variant) =>
+                variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+            },
           }}
-          renderInput={params => (
-            <ResettableTextField 
+          renderInput={(params) => (
+            <ResettableTextField
               {...params}
               rawValue={data}
               dayjsValueIsValid={value !== null}
               valueInInputFormat={valueInInputFormat}
               focused={focused}
               id={id + '-input'}
-              required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+              required={
+                required && !appliedUiSchemaOptions.hideRequiredAsterisk
+              }
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
@@ -132,9 +131,7 @@ export const MaterialDateControl = (props: ControlProps)=> {
         <FormHelperText error={!isValid && !showDescription}>
           {firstFormHelperText}
         </FormHelperText>
-        <FormHelperText error={!isValid}>
-          {secondFormHelperText}
-        </FormHelperText>
+        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
       </LocalizationProvider>
     </Hidden>
   );

package/src/controls/MaterialDateTimeControl.tsx

@@ -29,20 +29,17 @@ import {
   isDateTimeControl,
   isDescriptionHidden,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
-import {
-  DateTimePicker,
-  LocalizationProvider 
-} from '@mui/x-date-pickers';
+import { DateTimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
   createOnChangeHandler,
   getData,
   ResettableTextField,
-  useFocus
+  useFocus,
 } from '../util';
 
 export const MaterialDateTimeControl = (props: ControlProps) => {
@@ -59,7 +56,7 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     path,
     handleChange,
     data,
-    config
+    config,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
@@ -74,7 +71,12 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
   const format = appliedUiSchemaOptions.dateTimeFormat ?? 'YYYY-MM-DD HH:mm';
   const saveFormat = appliedUiSchemaOptions.dateTimeSaveFormat ?? undefined;
 
-  const views = appliedUiSchemaOptions.views ?? ['year', 'day', 'hours', 'minutes'];
+  const views = appliedUiSchemaOptions.views ?? [
+    'year',
+    'day',
+    'hours',
+    'minutes',
+  ];
 
   const firstFormHelperText = showDescription
     ? description
@@ -83,11 +85,10 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
     : null;
   const secondFormHelperText = showDescription && !isValid ? errors : null;
 
-  const onChange = useMemo(() => createOnChangeHandler(
-    path,
-    handleChange,
-    saveFormat
-  ),[path, handleChange, saveFormat]);
+  const onChange = useMemo(
+    () => createOnChangeHandler(path, handleChange, saveFormat),
+    [path, handleChange, saveFormat]
+  );
 
   const value = getData(data, saveFormat);
   const valueInInputFormat = value ? value.format(format) : '';
@@ -106,18 +107,21 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
           disabled={!enabled}
           componentsProps={{
             actionBar: {
-              actions: (variant) => (variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'])
-            }
+              actions: (variant) =>
+                variant === 'desktop' ? [] : ['clear', 'cancel', 'accept'],
+            },
           }}
-          renderInput={params => (
-            <ResettableTextField 
+          renderInput={(params) => (
+            <ResettableTextField
               {...params}
               rawValue={data}
               dayjsValueIsValid={value !== null}
               valueInInputFormat={valueInInputFormat}
               focused={focused}
               id={id + '-input'}
-              required={required && !appliedUiSchemaOptions.hideRequiredAsterisk}
+              required={
+                required && !appliedUiSchemaOptions.hideRequiredAsterisk
+              }
               autoFocus={appliedUiSchemaOptions.focus}
               error={!isValid}
               fullWidth={!appliedUiSchemaOptions.trim}
@@ -130,15 +134,12 @@ export const MaterialDateTimeControl = (props: ControlProps) => {
               onBlur={onBlur}
               variant={'standard'}
             />
-          )
-          }
+          )}
         />
         <FormHelperText error={!isValid && !showDescription}>
           {firstFormHelperText}
         </FormHelperText>
-        <FormHelperText error={!isValid}>
-          {secondFormHelperText}
-        </FormHelperText>
+        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
       </LocalizationProvider>
     </Hidden>
   );

package/src/controls/MaterialEnumControl.tsx

@@ -30,26 +30,29 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsEnumProps, withTranslateProps } from '@jsonforms/react';
+import {
+  TranslateProps,
+  withJsonFormsEnumProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 import merge from 'lodash/merge';
 import { MaterialInputControl } from './MaterialInputControl';
-import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
+import {
+  MuiAutocomplete,
+  WithOptionLabel,
+} from '../mui-controls/MuiAutocomplete';
 
-export const MaterialEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
-  const {config, uischema, errors} = props;
+export const MaterialEnumControl = (
+  props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps
+) => {
+  const { config, uischema, errors } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
-  return (
-    appliedUiSchemaOptions.autocomplete === false ?
-    <MaterialInputControl
-      {...props}
-      input={MuiSelect}
-    />:
-    <MuiAutocomplete
-      {...props}
-      isValid={isValid}
-    />
+  return appliedUiSchemaOptions.autocomplete === false ? (
+    <MaterialInputControl {...props} input={MuiSelect} />
+  ) : (
+    <MuiAutocomplete {...props} isValid={isValid} />
   );
 };
 
@@ -59,4 +62,7 @@ export const materialEnumControlTester: RankedTester = rankWith(
 );
 
 // HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
-export default withJsonFormsEnumProps(withTranslateProps(React.memo(MaterialEnumControl)), false);
+export default withJsonFormsEnumProps(
+  withTranslateProps(React.memo(MaterialEnumControl)),
+  false
+);

package/src/controls/MaterialInputControl.tsx

@@ -29,8 +29,7 @@ import {
   isDescriptionHidden,
 } from '@jsonforms/core';
 
-import { Hidden, InputLabel } from '@mui/material';
-import { FormControl, FormHelperText } from '@mui/material';
+import { Hidden, InputLabel, FormControl, FormHelperText } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util';
 
@@ -49,7 +48,7 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
     visible,
     required,
     config,
-    input
+    input,
   } = props;
   const isValid = errors.length === 0;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -81,8 +80,10 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
         <InputLabel
           htmlFor={id + '-input'}
           error={!isValid}
-          required={showAsRequired(required,
-            appliedUiSchemaOptions.hideRequiredAsterisk)}
+          required={showAsRequired(
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
         >
           {label}
         </InputLabel>
@@ -95,9 +96,7 @@ export const MaterialInputControl = (props: ControlProps & WithInput) => {
         <FormHelperText error={!isValid && !showDescription}>
           {firstFormHelperText}
         </FormHelperText>
-        <FormHelperText error={!isValid}>
-          {secondFormHelperText}
-        </FormHelperText>
+        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
       </FormControl>
     </Hidden>
   );

package/src/controls/MaterialIntegerControl.tsx

@@ -27,7 +27,7 @@ import {
   ControlProps,
   isIntegerControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { MuiInputInteger } from '../mui-controls/MuiInputInteger';
 import { MaterialInputControl } from './MaterialInputControl';

package/src/controls/MaterialNativeControl.tsx

@@ -31,7 +31,7 @@ import {
   isTimeControl,
   or,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { Hidden, TextField } from '@mui/material';
 import { withJsonFormsControlProps } from '@jsonforms/react';
@@ -52,15 +52,16 @@ export const MaterialNativeControl = (props: ControlProps) => {
     path,
     handleChange,
     data,
-    config
+    config,
   } = props;
   const isValid = errors.length === 0;
-  const appliedUiSchemaOptions = merge(
-    {},
-    config,
-    props.uischema.options
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path
   );
-  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
   const fieldType = appliedUiSchemaOptions.format ?? schema.format;
   const showDescription = !isDescriptionHidden(
     visible,
@@ -72,8 +73,10 @@ export const MaterialNativeControl = (props: ControlProps) => {
   return (
     <Hidden xsUp={!visible}>
       <TextField
-        required={showAsRequired(required,
-          appliedUiSchemaOptions.hideRequiredAsterisk)}
+        required={showAsRequired(
+          required,
+          appliedUiSchemaOptions.hideRequiredAsterisk
+        )}
         id={id + '-input'}
         label={label}
         type={fieldType}

package/src/controls/MaterialNumberControl.tsx

@@ -27,7 +27,7 @@ import {
   ControlProps,
   isNumberControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { MuiInputNumber } from '../mui-controls/MuiInputNumber';
 import { MaterialInputControl } from './MaterialInputControl';

package/src/controls/MaterialOneOfEnumControl.tsx

@@ -30,27 +30,30 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsOneOfEnumProps, withTranslateProps } from '@jsonforms/react';
-import { MuiAutocomplete, WithOptionLabel } from '../mui-controls/MuiAutocomplete';
+import {
+  TranslateProps,
+  withJsonFormsOneOfEnumProps,
+  withTranslateProps,
+} from '@jsonforms/react';
+import {
+  MuiAutocomplete,
+  WithOptionLabel,
+} from '../mui-controls/MuiAutocomplete';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 import { MaterialInputControl } from '../controls/MaterialInputControl';
 import merge from 'lodash/merge';
 
-export const MaterialOneOfEnumControl = (props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps) => {
-  const {config, uischema, errors} = props;
+export const MaterialOneOfEnumControl = (
+  props: ControlProps & OwnPropsOfEnum & WithOptionLabel & TranslateProps
+) => {
+  const { config, uischema, errors } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
 
-  return (
-    appliedUiSchemaOptions.autocomplete === false ?
-    <MaterialInputControl
-      {...props}
-      input={MuiSelect}
-    />:
-    <MuiAutocomplete
-      {...props}
-      isValid={isValid}
-    />
+  return appliedUiSchemaOptions.autocomplete === false ? (
+    <MaterialInputControl {...props} input={MuiSelect} />
+  ) : (
+    <MuiAutocomplete {...props} isValid={isValid} />
   );
 };
 
@@ -60,4 +63,7 @@ export const materialOneOfEnumControlTester: RankedTester = rankWith(
 );
 
 // HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
-export default withJsonFormsOneOfEnumProps(withTranslateProps(React.memo(MaterialOneOfEnumControl)), false);
+export default withJsonFormsOneOfEnumProps(
+  withTranslateProps(React.memo(MaterialOneOfEnumControl)),
+  false
+);