From 5e8c860948cd4e7e4627417f7fc8beb1b0943c1e Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Wed, 1 Mar 2023 10:52:39 +0100
Subject: [PATCH 01/17] vue: Fix onChange triggering twice by making
 additionalError and data proxies

Fixes #2003
---
 packages/vue/vue/src/components/JsonForms.vue | 21 ++++++++++++-------
 1 file changed, 14 insertions(+), 7 deletions(-)

diff --git a/packages/vue/vue/src/components/JsonForms.vue b/packages/vue/vue/src/components/JsonForms.vue
index 673ecb3aa..555351adc 100644
--- a/packages/vue/vue/src/components/JsonForms.vue
+++ b/packages/vue/vue/src/components/JsonForms.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { PropType, reactive } from 'vue';
 import { defineComponent } from 'vue';
 import {
   coreReducer,
@@ -34,6 +34,8 @@ const isObject = (elem: any): elem is Object => {
   return elem && typeof elem === 'object';
 };
 
+const EMPTY: ErrorObject[] = reactive([]);
+
 export default defineComponent({
   name: 'json-forms',
   components: {
@@ -97,22 +99,23 @@ export default defineComponent({
     additionalErrors: {
       required: false,
       type: Array as PropType<ErrorObject[]>,
-      default: () => []
+      default: () => EMPTY
     },
   },
   data() {
-    const generatorData = isObject(this.data) ? this.data : {};
+    const dataToUse = this.data;
+    const generatorData = isObject(dataToUse) ? dataToUse : {};
     const schemaToUse = this.schema ?? Generate.jsonSchema(generatorData);
     const uischemaToUse = this.uischema ?? Generate.uiSchema(schemaToUse);
     const initCore = (): JsonFormsCore => {
       const initialCore = {
-        data: this.data,
+        data: dataToUse,
         schema: schemaToUse,
         uischema: uischemaToUse
       };
       const core = coreReducer(
         initialCore,
-        Actions.init(this.data, schemaToUse, uischemaToUse, {
+        Actions.init(dataToUse, schemaToUse, uischemaToUse, {
           validationMode: this.validationMode,
           ajv: this.ajv,
           additionalErrors: this.additionalErrors
@@ -122,6 +125,7 @@ export default defineComponent({
     };
     return {
       schemaToUse,
+      dataToUse,
       uischemaToUse,
       jsonforms: {
         core: initCore(),
@@ -145,6 +149,9 @@ export default defineComponent({
     uischema(newUischema) {
       this.uischemaToUse = newUischema ?? Generate.uiSchema(this.schemaToUse);
     },
+    data(newData) {
+      this.dataToUse = newData;
+    },
     renderers(newRenderers) {
       this.jsonforms.renderers = newRenderers;
     },
@@ -169,7 +176,7 @@ export default defineComponent({
     coreDataToUpdate() {
       this.jsonforms.core = coreReducer(
         this.jsonforms.core as JsonFormsCore,
-        Actions.updateCore(this.data, this.schemaToUse, this.uischemaToUse, {
+        Actions.updateCore(this.dataToUse, this.schemaToUse, this.uischemaToUse, {
           validationMode: this.validationMode,
           ajv: this.ajv,
           additionalErrors: this.additionalErrors
@@ -192,7 +199,7 @@ export default defineComponent({
   computed: {
     coreDataToUpdate(): any {
       return [
-        this.data,
+        this.dataToUse,
         this.schemaToUse,
         this.uischemaToUse,
         this.validationMode,

From b4166e52ccf02fccf2538e3cf52115f27c16dfb5 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Mon, 6 Mar 2023 14:23:03 +0100
Subject: [PATCH 02/17] Add i18n to react material array renderers

Part of #1826

Co-authored-by: Lucas Koehler <lkoehler@eclipsesource.com>
---
 packages/core/src/i18n/arrayTranslations.ts   |  38 +++++++
 packages/core/src/i18n/i18nUtil.ts            |  22 ++++
 packages/core/src/i18n/index.ts               |   1 +
 packages/core/src/util/renderer.ts            |  26 +++--
 packages/examples/src/examples/arraysI18n.ts  | 106 ++++++++++++++++++
 packages/examples/src/index.ts                |   2 +
 .../MaterialListWithDetailRenderer.tsx        |   8 +-
 .../src/complex/DeleteDialog.tsx              |  14 ++-
 .../complex/MaterialArrayControlRenderer.tsx  |   4 +
 .../src/complex/MaterialTableControl.tsx      |  18 ++-
 .../src/complex/TableToolbar.tsx              |   9 +-
 .../src/layouts/ArrayToolbar.tsx              |   9 +-
 .../src/layouts/MaterialArrayLayout.tsx       |   4 +-
 13 files changed, 233 insertions(+), 28 deletions(-)
 create mode 100644 packages/core/src/i18n/arrayTranslations.ts
 create mode 100644 packages/examples/src/examples/arraysI18n.ts

diff --git a/packages/core/src/i18n/arrayTranslations.ts b/packages/core/src/i18n/arrayTranslations.ts
new file mode 100644
index 000000000..1ae47f0ff
--- /dev/null
+++ b/packages/core/src/i18n/arrayTranslations.ts
@@ -0,0 +1,38 @@
+export interface ArrayDefaultTranslation {
+    key: ArrayTranslationEnum,
+    default: (variable?: string) => string
+}
+
+export enum ArrayTranslationEnum{
+    addTooltip = 'addTooltip',
+    addAriaLabel = 'addAriaLabel',
+    removeTooltip = 'removeTooltip',
+    upAriaLabel = 'upAriaLabel',
+    downAriaLabel = 'downAriaLabel',
+    noSelection = 'noSelection',
+    removeAriaLabel = 'removeAriaLabel',
+    noDataMessage = 'noDataMessage',
+    deleteDialogTitle = 'deleteDialogTitle',
+    deleteDialogMessage = 'deleteDialogMessage',
+    deleteDialogAccept = 'deleteDialogAccept',
+    deleteDialogDecline = 'deleteDialogDecline'
+}
+
+export type ArrayTranslations = {
+    [key in ArrayTranslationEnum]?: string
+}
+
+export const arrayDefaultTranslations: ArrayDefaultTranslation[] = [
+    {key: ArrayTranslationEnum.addTooltip, default: (input) => input?`Add to ${input}`:'Add'},
+    {key: ArrayTranslationEnum.addAriaLabel, default: (input) => input?`Add to ${input}`:'Add'},
+    {key: ArrayTranslationEnum.removeTooltip, default: () => 'Delete'},
+    {key: ArrayTranslationEnum.upAriaLabel, default: (input) => `Move ${input} up`},
+    {key: ArrayTranslationEnum.downAriaLabel, default: (input) => `Move ${input} down`},
+    {key: ArrayTranslationEnum.removeAriaLabel, default: () => 'Delete button'},
+    {key: ArrayTranslationEnum.noDataMessage, default: () => 'No Data'},
+    {key: ArrayTranslationEnum.noSelection, default: () => 'No Selection'},
+    {key: ArrayTranslationEnum.deleteDialogTitle, default: () => 'Confirm Deletion'},
+    {key: ArrayTranslationEnum.deleteDialogMessage, default: () => 'Are you sure you want to delete the selected entry?'},
+    {key: ArrayTranslationEnum.deleteDialogAccept, default: () => 'Yes'},
+    {key: ArrayTranslationEnum.deleteDialogDecline, default: () => 'No'}
+]
\ No newline at end of file
diff --git a/packages/core/src/i18n/i18nUtil.ts b/packages/core/src/i18n/i18nUtil.ts
index ee24eef58..626a0d087 100644
--- a/packages/core/src/i18n/i18nUtil.ts
+++ b/packages/core/src/i18n/i18nUtil.ts
@@ -3,6 +3,7 @@ import { isInternationalized, Labelable, UISchemaElement } from '../models';
 import { getControlPath } from '../reducers';
 import { formatErrorMessage } from '../util';
 import type { i18nJsonSchema, ErrorTranslator, Translator } from './i18nTypes';
+import { ArrayDefaultTranslation, ArrayTranslations } from './arrayTranslations'
 
 export const getI18nKeyPrefixBySchema = (
   schema: i18nJsonSchema | undefined,
@@ -47,6 +48,13 @@ export const getI18nKey = (
   return `${getI18nKeyPrefix(schema, uischema, path)}.${key}`;
 };
 
+export const addI18nKeyToPrefix = (
+  i18nKeyPrefix: string,
+  key: string
+): string => {
+  return `${i18nKeyPrefix}.${key}`;
+};
+
 export const defaultTranslator: Translator = (_id: string, defaultMessage: string | undefined) => defaultMessage;
 
 export const defaultErrorTranslator: ErrorTranslator = (error, t, uischema) => {
@@ -123,3 +131,17 @@ export const deriveLabelForUISchemaElement = (uischema: Labelable<boolean>, t: T
   const i18nKey = typeof i18nKeyPrefix === 'string' ? `${i18nKeyPrefix}.label` : stringifiedLabel;
   return t(i18nKey, stringifiedLabel, { uischema: uischema });
 }
+
+export const getArrayTranslations = (
+  t: Translator,
+  defaultTranslations: ArrayDefaultTranslation [],
+  i18nKeyPrefix: string,
+  label: string
+): ArrayTranslations => {
+  const translations:ArrayTranslations = {};
+  defaultTranslations.forEach((controlElement)=>{
+    const key = addI18nKeyToPrefix(i18nKeyPrefix, controlElement.key);
+    translations[controlElement.key]=t(key, controlElement.default(label));
+  })
+  return translations;
+}
diff --git a/packages/core/src/i18n/index.ts b/packages/core/src/i18n/index.ts
index 298d5f4d5..fb4cc88d9 100644
--- a/packages/core/src/i18n/index.ts
+++ b/packages/core/src/i18n/index.ts
@@ -1,2 +1,3 @@
 export * from './i18nTypes';
 export * from './i18nUtil';
+export * from './arrayTranslations'
\ No newline at end of file
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
index fa7791891..d4cddd0d6 100644
--- a/packages/core/src/util/renderer.ts
+++ b/packages/core/src/util/renderer.ts
@@ -56,7 +56,8 @@ import { composePaths, composeWithUi } from './path';
 import { CoreActions, update } from '../actions';
 import type { ErrorObject } from 'ajv';
 import type { JsonFormsState } from '../store';
-import { deriveLabelForUISchemaElement, getCombinedErrorMessage, getI18nKey, getI18nKeyPrefix, getI18nKeyPrefixBySchema, Translator } from '../i18n';
+import { deriveLabelForUISchemaElement, getCombinedErrorMessage, getI18nKey, getI18nKeyPrefix, getI18nKeyPrefixBySchema, getArrayTranslations, Translator } from '../i18n';
+import { arrayDefaultTranslations, ArrayTranslations } from '../i18n/arrayTranslations';
 
 const isRequired = (
   schema: JsonSchema,
@@ -370,6 +371,8 @@ export interface StatePropsOfControl extends StatePropsOfScopedRenderer {
    */
   required?: boolean;
 
+  i18nKeyPrefix?: string;
+
   // TODO: renderers?
 }
 
@@ -469,6 +472,7 @@ export const mapStateToControlProps = (
   const schema = resolvedSchema ?? rootSchema;
   const t = getTranslator()(state);
   const te = getErrorTranslator()(state);
+  const i18nKeyPrefix = getI18nKeyPrefix(schema, uischema, path);
   const i18nLabel = t(getI18nKey(schema, uischema, path, 'label'), label, {schema, uischema, path, errors} );
   const i18nDescription = t(getI18nKey(schema, uischema, path, 'description'), description, {schema, uischema, path, errors});
   const i18nErrorMessage = getCombinedErrorMessage(errors, te, t, schema, uischema, path);
@@ -487,7 +491,8 @@ export const mapStateToControlProps = (
     schema,
     config: getConfig(state),
     cells: ownProps.cells || state.jsonforms.cells,
-    rootSchema
+    rootSchema,
+    i18nKeyPrefix
   };
 };
 
@@ -703,6 +708,7 @@ export const mapStateToArrayControlProps = (
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
   const childErrors = getSubErrorsAt(path, resolvedSchema)(state);
 
+
   return {
     ...props,
     path,
@@ -710,7 +716,7 @@ export const mapStateToArrayControlProps = (
     schema: resolvedSchema,
     childErrors,
     renderers: ownProps.renderers || getRenderers(state),
-    cells: ownProps.cells || getCells(state)
+    cells: ownProps.cells || getCells(state),
   };
 };
 
@@ -771,7 +777,7 @@ export const mapDispatchToArrayControlProps = (
         return array;
       })
     );
-  }
+  },
 });
 
 export interface DispatchPropsOfMultiEnumControl {
@@ -1011,6 +1017,7 @@ export const mapStateToOneOfProps = (
 
 export interface StatePropsOfArrayLayout extends StatePropsOfControlWithDetail {
   data: number;
+  translations: ArrayTranslations;
   minItems?: number;
 }
 /**
@@ -1029,16 +1036,19 @@ export const mapStateToArrayLayoutProps = (
     schema,
     uischema,
     errors,
+    i18nKeyPrefix,
+    label,
     ...props
   } = mapStateToControlWithDetailProps(state, ownProps);
 
+  
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
-
+  const t = getTranslator()(state);
   // TODO Does not consider 'i18n' keys which are specified in the ui schemas of the sub errors
   const childErrors = getCombinedErrorMessage(
     getSubErrorsAt(path, resolvedSchema)(state),
     getErrorTranslator()(state),
-    getTranslator()(state),
+    t,
     undefined,
     undefined,
     undefined
@@ -1050,12 +1060,14 @@ export const mapStateToArrayLayoutProps = (
     childErrors;
   return {
     ...props,
+    label,
     path,
     uischema,
     schema: resolvedSchema,
     data: props.data ? props.data.length : 0,
     errors: allErrors,
-    minItems: schema.minItems
+    minItems: schema.minItems,
+    translations: getArrayTranslations(t,arrayDefaultTranslations,i18nKeyPrefix, label)
   };
 };
 
diff --git a/packages/examples/src/examples/arraysI18n.ts b/packages/examples/src/examples/arraysI18n.ts
new file mode 100644
index 000000000..34045a814
--- /dev/null
+++ b/packages/examples/src/examples/arraysI18n.ts
@@ -0,0 +1,106 @@
+/*
+  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 { registerExamples } from '../register';
+import { ArrayTranslationEnum, Translator } from '@jsonforms/core';
+import { get } from 'lodash';
+
+export const schema = {
+  type: 'object',
+  properties: {
+    comments: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          date: {
+            type: 'string',
+            format: 'date'
+          },
+          message: {
+            type: 'string',
+            maxLength: 5
+          },
+          enum: {
+            type: 'string',
+            const: 'foo'
+          }
+        }
+      }
+    },
+  }
+};
+
+export const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Control',
+      scope: '#/properties/comments',
+      options: {
+        showSortButtons: true,
+      }
+    }
+  ]
+};
+
+export const data = {
+  comments: [
+    {
+      date: new Date(2001, 8, 11).toISOString().substr(0, 10),
+      message: 'This is an example message'
+    },
+    {
+      date: new Date().toISOString().substr(0, 10),
+      message: 'Get ready for booohay'
+    }
+  ]
+};
+
+export const translations = {
+  comments: {
+    [ArrayTranslationEnum.noDataMessage]: 'Be the first to write a comment',
+    [ArrayTranslationEnum.addTooltip]: 'Add a Comment',
+    [ArrayTranslationEnum.deleteDialogAccept]: 'Delete!',
+    [ArrayTranslationEnum.deleteDialogDecline]: 'Cancel!',
+    [ArrayTranslationEnum.deleteDialogMessage]: 'Are you sure you want to delete this comment?'
+  }
+};
+export const translate: Translator = (key: string, defaultMessage: string) => {
+  return get(translations, key) ?? defaultMessage;
+};
+
+registerExamples([
+  {
+    name: 'array-i18n',
+    label: 'Array (i18n)',
+    data,
+    schema,
+    uischema,
+    i18n: {
+      translate: translate,
+      locale: 'en'
+    }
+  }
+]);
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index d27050a3c..a9b955b2e 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -28,6 +28,7 @@ import * as oneOf from './examples/oneOf';
 import * as oneOfArray from './examples/oneOfArray';
 import * as anyOfOneOfAllOfResolve from './examples/anyOf-oneOf-allOf-resolve';
 import * as array from './examples/arrays';
+import * as arrayI18n from './examples/arraysI18n';
 import * as nestedArray from './examples/nestedArrays';
 import * as arrayWithDetail from './examples/arrays-with-detail';
 import * as arrayWithDetailAndRule from './examples/arrays-with-detail-and-rule';
@@ -97,6 +98,7 @@ export {
   anyOfOneOfAllOfResolve,
   stringArray,
   array,
+  arrayI18n,
   nestedArray,
   arrayWithDetail,
   arrayWithDetailAndRule,
diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
index dc98572ae..865f442b0 100644
--- a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
+++ b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -61,7 +61,8 @@ export const MaterialListWithDetailRenderer = ({
   renderers,
   cells,
   config,
-  rootSchema
+  rootSchema,
+  translations
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
@@ -92,7 +93,7 @@ export const MaterialListWithDetailRenderer = ({
         path,
         undefined,
         uischema,
-        rootSchema
+        rootSchema,
       ),
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
@@ -105,6 +106,7 @@ export const MaterialListWithDetailRenderer = ({
   return (
     <Hidden xsUp={!visible}>
       <ArrayLayoutToolbar
+        translations={translations}
         label={computeLabel(
           label,
           required,
@@ -146,7 +148,7 @@ export const MaterialListWithDetailRenderer = ({
               path={composePaths(path, `${selectedIndex}`)}
             />
           ) : (
-            <Typography variant='h6'>No Selection</Typography>
+            <Typography variant='h6'>{translations.noSelection}</Typography>
           )}
         </Grid>
       </Grid>
diff --git a/packages/material-renderers/src/complex/DeleteDialog.tsx b/packages/material-renderers/src/complex/DeleteDialog.tsx
index c2147a68e..24ad8f037 100644
--- a/packages/material-renderers/src/complex/DeleteDialog.tsx
+++ b/packages/material-renderers/src/complex/DeleteDialog.tsx
@@ -37,13 +37,17 @@ export interface DeleteDialogProps {
     onClose(): void;
     onConfirm(): void;
     onCancel(): void;
+    title: string,
+    message: string,
+    acceptText: string,
+    declineText: string
 }
 
 export interface WithDeleteDialogSupport {
   openDeleteDialog(path: string, data: number): void;
 }
 
-export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel }: DeleteDialogProps) => {
+export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel, title, message, acceptText, declineText }: DeleteDialogProps) => {
     return (
         <Dialog
             open={open}
@@ -53,19 +57,19 @@ export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel }:
             aria-describedby='alert-dialog-confirmdelete-description'
         >
             <DialogTitle id='alert-dialog-confirmdelete-title'>
-                {'Confirm Deletion'}
+                {title}
             </DialogTitle>
             <DialogContent>
                 <DialogContentText id='alert-dialog-confirmdelete-description'>
-                    Are you sure you want to delete the selected entry?
+                    {message}
                 </DialogContentText>
             </DialogContent>
             <DialogActions>
                 <Button onClick={onCancel} color='primary'>
-                    No
+                    {declineText}
                 </Button>
                 <Button onClick={onConfirm} color='primary'>
-                    Yes
+                    {acceptText}
                 </Button>
             </DialogActions>
         </Dialog>
diff --git a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
index 496ae5239..40019de71 100644
--- a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
@@ -59,6 +59,10 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
         onCancel={deleteCancel}
         onConfirm={deleteConfirm}
         onClose={deleteClose}
+        acceptText={props.translations.deleteDialogAccept}
+        declineText={props.translations.deleteDialogDecline}
+        title={props.translations.deleteDialogTitle}
+        message={props.translations.deleteDialogMessage}
       />
     </Hidden>
   );
diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
index 4f2a7c414..c248f74c3 100644
--- a/packages/material-renderers/src/complex/MaterialTableControl.tsx
+++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -65,6 +65,7 @@ import NoBorderTableCell from './NoBorderTableCell';
 import TableToolbar from './TableToolbar';
 import { ErrorObject } from 'ajv';
 import merge from 'lodash/merge';
+import { ArrayTranslations } from '@jsonforms/core';
 
 // we want a cell that doesn't automatically span
 const styles = {
@@ -129,12 +130,13 @@ const getValidColumnProps = (scopedSchema: JsonSchema) => {
 
 export interface EmptyTableProps {
   numColumns: number;
+  translations: ArrayTranslations;
 }
 
-const EmptyTable = ({ numColumns }: EmptyTableProps) => (
+const EmptyTable = ({ numColumns, translations }: EmptyTableProps) => (
   <TableRow>
     <NoBorderTableCell colSpan={numColumns}>
-      <Typography align='center'>No data</Typography>
+      <Typography align='center'>{translations.noDataMessage}</Typography>
     </NoBorderTableCell>
   </TableRow>
 );
@@ -333,6 +335,7 @@ interface TableRowsProp {
   cells?: JsonFormsCellRendererRegistryEntry[];
   moveUp?(path: string, toMove: number): () => void;
   moveDown?(path: string, toMove: number): () => void;
+  translations: ArrayTranslations;
 }
 const TableRows = ({
   data,
@@ -344,12 +347,13 @@ const TableRows = ({
   uischema,
   config,
   enabled,
-  cells
+  cells,
+  translations
 }: TableRowsProp & WithDeleteDialogSupport) => {
   const isEmptyTable = data === 0;
 
   if (isEmptyTable) {
-    return <EmptyTable numColumns={getValidColumnProps(schema).length + 1} />;
+    return <EmptyTable numColumns={getValidColumnProps(schema).length + 1} translations={translations}/>;
   }
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -397,7 +401,8 @@ export class MaterialTableControl extends React.Component<
       openDeleteDialog,
       visible,
       enabled,
-      cells
+      cells,
+      translations
     } = this.props;
 
     const controlElement = uischema as ControlElement;
@@ -420,6 +425,7 @@ export class MaterialTableControl extends React.Component<
               schema={schema}
               rootSchema={rootSchema}
               enabled={enabled}
+              translations={translations}
             />
             {isObjectSchema && (
               <TableRow>
@@ -429,7 +435,7 @@ export class MaterialTableControl extends React.Component<
             )}
           </TableHead>
           <TableBody>
-            <TableRows openDeleteDialog={openDeleteDialog} {...this.props} />
+            <TableRows openDeleteDialog={openDeleteDialog} translations={translations} {...this.props} />
           </TableBody>
         </Table>
       </Hidden>
diff --git a/packages/material-renderers/src/complex/TableToolbar.tsx b/packages/material-renderers/src/complex/TableToolbar.tsx
index 0fdb24082..2611965b5 100644
--- a/packages/material-renderers/src/complex/TableToolbar.tsx
+++ b/packages/material-renderers/src/complex/TableToolbar.tsx
@@ -37,6 +37,7 @@ import { Grid, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
+import { ArrayTranslations } from '@jsonforms/core';
 
 export interface MaterialTableToolbarProps {
   numColumns: number;
@@ -47,6 +48,7 @@ export interface MaterialTableToolbarProps {
   schema: JsonSchema;
   rootSchema: JsonSchema;
   enabled: boolean;
+  translations: ArrayTranslations;
   addItem(path: string, value: any): () => void;
 }
 
@@ -63,7 +65,8 @@ const TableToolbar = React.memo(
     path,
     addItem,
     schema,
-    enabled
+    enabled,
+    translations
   }: MaterialTableToolbarProps) => (
     <TableRow>
       <NoBorderTableCell colSpan={numColumns}>
@@ -92,11 +95,11 @@ const TableToolbar = React.memo(
         <NoBorderTableCell align='right' style={ fixedCellSmall }>
           <Tooltip
             id='tooltip-add'
-            title={`Add to ${label}`}
+            title={translations.addTooltip}
             placement='bottom'
           >
             <IconButton
-              aria-label={`Add to ${label}`}
+              aria-label={translations.addTooltip}
               onClick={addItem(path, createDefaultValue(schema))}
               size='large'>
               <AddIcon />
diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
index e09afdefb..3ab27851f 100644
--- a/packages/material-renderers/src/layouts/ArrayToolbar.tsx
+++ b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
@@ -8,12 +8,14 @@ import {
 import AddIcon from '@mui/icons-material/Add';
 import React from 'react';
 import ValidationIcon from '../complex/ValidationIcon';
+import { ArrayTranslations } from '@jsonforms/core';
 export interface ArrayLayoutToolbarProps {
   label: string;
   errors: string;
   path: string;
   addItem(path: string, data: any): () => void;
   createDefault(): any;
+  translations: ArrayTranslations
 }
 export const ArrayLayoutToolbar = React.memo(
   ({
@@ -21,7 +23,8 @@ export const ArrayLayoutToolbar = React.memo(
     errors,
     addItem,
     path,
-    createDefault
+    createDefault,
+    translations
   }: ArrayLayoutToolbarProps) => {
     return (
       <Toolbar disableGutters={true}>
@@ -39,11 +42,11 @@ export const ArrayLayoutToolbar = React.memo(
               <Grid item>
                 <Tooltip
                   id='tooltip-add'
-                  title={`Add to ${label}`}
+                  title={translations.addTooltip}
                   placement='bottom'
                 >
                   <IconButton
-                    aria-label={`Add to ${label}`}
+                    aria-label={translations.addTooltip}
                     onClick={addItem(path, createDefault())}
                     size='large'>
                     <AddIcon />
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
index 7540b125d..c910edf2f 100644
--- a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -58,7 +58,8 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
     required,
     rootSchema,
     config,
-    uischemas
+    uischemas,
+    translations
   } = props;
   const appliedUiSchemaOptions = merge(
     {},
@@ -69,6 +70,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
   return (
     <div>
       <ArrayLayoutToolbar
+        translations={translations}
         label={computeLabel(
           label,
           required,

From 30a18512235e2d19ca5152ba05b454da1a111a2d Mon Sep 17 00:00:00 2001
From: Ralph Soika <ralph.soika@imixs.com>
Date: Tue, 7 Mar 2023 12:42:19 +0100
Subject: [PATCH 03/17] Vanilla Radio/Checkbox: add option for layout

Allows to configure the previously hard coded flex direction of the
'RadioGroup' React Vanilla renderer via the new UI Schema option
'orientation: "horizontal" | "vertical"'.
---
 packages/examples/src/examples/radioGroup.ts           | 3 ++-
 packages/vanilla-renderers/src/controls/RadioGroup.tsx | 3 +--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/examples/src/examples/radioGroup.ts b/packages/examples/src/examples/radioGroup.ts
index 58d28f75e..c55386719 100644
--- a/packages/examples/src/examples/radioGroup.ts
+++ b/packages/examples/src/examples/radioGroup.ts
@@ -55,7 +55,8 @@ const schema = {
            type: 'Control',
            scope: '#/properties/exampleRadioEnum',
            options: {
-             format: 'radio'
+             format: 'radio',
+             orientation: 'vertical'
            }
          }
        ]
diff --git a/packages/vanilla-renderers/src/controls/RadioGroup.tsx b/packages/vanilla-renderers/src/controls/RadioGroup.tsx
index d0e354fe2..5128dad6d 100644
--- a/packages/vanilla-renderers/src/controls/RadioGroup.tsx
+++ b/packages/vanilla-renderers/src/controls/RadioGroup.tsx
@@ -73,7 +73,7 @@ export const RadioGroup = ({
   if (hasRadioClass) {
     groupStyle = {
       display: 'flex',
-      flexDirection: 'row'
+      flexDirection: ('vertical' === appliedUiSchemaOptions.orientation) ? 'column' : 'row'
     };
   }
   return (
@@ -90,7 +90,6 @@ export const RadioGroup = ({
           appliedUiSchemaOptions.hideRequiredAsterisk
         )}
       </label>
-
       <div className={radioControl} style={groupStyle}>
         {options.map(option => (
           <div key={option.label} className={radioOption}>

From 2bbc64689cdf694daacac7ff5c1f5de6eb540849 Mon Sep 17 00:00:00 2001
From: Scott McGhee <codefactor@users.noreply.github.com>
Date: Tue, 7 Mar 2023 07:57:11 -0800
Subject: [PATCH 04/17] fix: mapStateToCellProps should use translated error
 messages

mapStateToCellProps is now also able to translate error messages, enabling
localized error messages in cells.

Co-authored-by: Stefan Dirix <sdirix@eclipsesource.com>
---
 packages/core/src/util/cell.ts       | 19 +++++++++----------
 packages/core/test/util/cell.test.ts | 28 +++++++++++++++++++++++++++-
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/packages/core/src/util/cell.ts b/packages/core/src/util/cell.ts
index 1e3cd4bbb..dac4afea9 100644
--- a/packages/core/src/util/cell.ts
+++ b/packages/core/src/util/cell.ts
@@ -24,8 +24,7 @@
 */
 
 import isEmpty from 'lodash/isEmpty';
-import union from 'lodash/union';
-import type { JsonFormsCellRendererRegistryEntry } from '../reducers';
+import { getErrorTranslator, JsonFormsCellRendererRegistryEntry } from '../reducers';
 import {
   getAjv,
   getConfig,
@@ -35,10 +34,7 @@ import {
   getTranslator,
 } from '../reducers';
 import type { AnyAction, Dispatch } from './type';
-import {
-  formatErrorMessage,
-  Resolve,
-} from './util';
+import { Resolve } from './util';
 import {
   isInherentlyEnabled,
   isVisible,
@@ -53,9 +49,12 @@ import {
   OwnPropsOfEnum,
   StatePropsOfScopedRenderer,
 } from './renderer';
+import {
+  getCombinedErrorMessage,
+  getI18nKeyPrefix,
+} from '../i18n';
 import type { JsonFormsState } from '../store';
 import type { JsonSchema } from '../models';
-import { getI18nKeyPrefix } from '../i18n';
 
 export type { JsonFormsCellRendererRegistryEntry };
 
@@ -148,9 +147,9 @@ export const mapStateToCellProps = (
     );
   }
 
-  const errors = formatErrorMessage(
-    union(getErrorAt(path, schema)(state).map(error => error.message))
-  );
+  const t = getTranslator()(state);
+  const te = getErrorTranslator()(state);
+  const errors = getCombinedErrorMessage(getErrorAt(path, schema)(state), te, t, schema, uischema, path);
   const isValid = isEmpty(errors);
 
   return {
diff --git a/packages/core/test/util/cell.test.ts b/packages/core/test/util/cell.test.ts
index e0e2447e7..b8d5dea9c 100644
--- a/packages/core/test/util/cell.test.ts
+++ b/packages/core/test/util/cell.test.ts
@@ -36,9 +36,12 @@ import { UPDATE_DATA, UpdateAction } from '../../src/actions';
 import configureStore from 'redux-mock-store';
 import {
   ControlElement,
+  createAjv,
   JsonFormsState,
+  JsonSchema,
   RuleEffect,
-  UISchemaElement
+  UISchemaElement,
+  validate,
 } from '../../src';
 import { enumToEnumOptionMapper } from '../../src/util/renderer';
 
@@ -270,6 +273,29 @@ test('mapStateToCellProps - id', t => {
   t.is(props.id, '#/properties/firstName');
 });
 
+test('mapStateToCellProps - translated error', t => {
+  const ownProps = {
+    uischema: coreUISchema,
+    id: '#/properties/firstName',
+    path: 'firstName'
+  };
+  const state = createState(coreUISchema);
+  const schema = state.jsonforms.core?.schema as JsonSchema;
+  const data = state.jsonforms.core?.data as any;
+  // mark firstName as required, delete the value from data, then get errors from ajv from the compiled schema
+  schema.required = ["firstName"];
+  delete data.firstName;
+  const ajv = createAjv();
+  const v = ajv.compile(schema);
+  state.jsonforms.core!.errors = validate(v, data);
+  // add a mock i18n state to verify that the error gets translated
+  state.jsonforms.i18n = {
+    translateError: error => `i18n-error:${error.keyword}`
+  };
+  const props = mapStateToCellProps(state, ownProps);
+  t.is(props.errors, 'i18n-error:required');
+});
+
 test('mapStateToEnumCellProps - set default options for dropdown list', t => {
   const uischema: ControlElement = {
     type: 'Control',

From d44e359dd42d3e515e37d1b06bbd0f9bb893cb04 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Wed, 15 Mar 2023 10:32:17 +0100
Subject: [PATCH 05/17] Avoid errors in Vue example app

Force full recreation of the JsonForms component whenever the example is switched.
This way an error is worked around which prevented switching examples.
---
 packages/vue/vue-vanilla/dev/components/App.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue/vue-vanilla/dev/components/App.vue b/packages/vue/vue-vanilla/dev/components/App.vue
index a7e6dc4fc..803b34234 100644
--- a/packages/vue/vue-vanilla/dev/components/App.vue
+++ b/packages/vue/vue-vanilla/dev/components/App.vue
@@ -107,6 +107,7 @@ export default defineComponent({
 
     <div class="form">
       <json-forms
+        :key="example.name"
         :data="example.data"
         :schema="example.schema"
         :uischema="example.uischema"

From 229d99a9a8a79a95549b2eae2a11037a5515997f Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Wed, 22 Feb 2023 12:32:51 +0100
Subject: [PATCH 06/17] Clean up examples and sort them alphabetically

Examples are now sorted alphabetically by their label.
Improved labels of various examples to better reflect what they contain.

Removed examples:
- day 1 to day 6: Contain various elements covered in other examples.
- 1169: Covers specific tester bug, reusable tester is covered by core unit tests.
- 1220: Old issue from 2.2
- 1253: Old issue from 2.2, multiple other oneOf examples
- 1254: Integrated in enum.ts
- 1645: Performance / debouncing can be tested with the huge example
- 1996: oneOf part is covered by oneOfArray.ts, anyOf part was integrated in anyOf.ts
- booleanToggle: Covered in control-options.ts

Renamed examples:
- 1779.ts -> list-with-detail-primitives.ts
- stepper.ts -> categorization-stepper.ts
- steppershownav.ts -> categorization-stepper-nav-buttons.ts
- dynamic.ts -> generate-dynamic.ts

Part of #1706
---
 packages/examples/src/examples/1169.ts        |  62 -----
 packages/examples/src/examples/1220.ts        | 146 ------------
 packages/examples/src/examples/1253.ts        | 212 ------------------
 packages/examples/src/examples/1254.ts        |  67 ------
 packages/examples/src/examples/1645.ts        |  66 ------
 packages/examples/src/examples/1884.ts        |   6 +-
 packages/examples/src/examples/1948.ts        |   4 +-
 packages/examples/src/examples/1996.ts        | 102 ---------
 packages/examples/src/examples/anyOf.ts       |  17 +-
 .../examples/src/examples/booleanToggle.ts    |  70 ------
 ... => categorization-stepper-nav-buttons.ts} |   2 +-
 .../{stepper.ts => categorization-stepper.ts} |   0
 .../examples/src/examples/categorization.ts   |   4 +-
 packages/examples/src/examples/day1.ts        |  61 -----
 packages/examples/src/examples/day2.ts        |  62 -----
 packages/examples/src/examples/day3.ts        |  76 -------
 packages/examples/src/examples/day4.ts        |  83 -------
 packages/examples/src/examples/day5.ts        | 169 --------------
 packages/examples/src/examples/day6.ts        |  44 ----
 .../examples/{multi-enum.ts => enum-multi.ts} |   2 +-
 packages/examples/src/examples/enum.ts        |   9 +-
 .../{dynamic.ts => generate-dynamic.ts}       |   2 +-
 ...1779.ts => list-with-detail-primitives.ts} |   4 +-
 .../examples/list-with-detail-registered.ts   |   2 +-
 packages/examples/src/examples/object.ts      |   2 +-
 packages/examples/src/examples/onChange.ts    |   2 +-
 packages/examples/src/examples/oneOf.ts       |  20 +-
 packages/examples/src/examples/oneOfArray.ts  |   2 +-
 packages/examples/src/examples/text.ts        |   2 +-
 packages/examples/src/index.ts                |  40 +---
 packages/examples/src/register.ts             |   7 +-
 31 files changed, 65 insertions(+), 1282 deletions(-)
 delete mode 100644 packages/examples/src/examples/1169.ts
 delete mode 100644 packages/examples/src/examples/1220.ts
 delete mode 100644 packages/examples/src/examples/1253.ts
 delete mode 100644 packages/examples/src/examples/1254.ts
 delete mode 100644 packages/examples/src/examples/1645.ts
 delete mode 100644 packages/examples/src/examples/1996.ts
 delete mode 100644 packages/examples/src/examples/booleanToggle.ts
 rename packages/examples/src/examples/{steppershownav.ts => categorization-stepper-nav-buttons.ts} (97%)
 rename packages/examples/src/examples/{stepper.ts => categorization-stepper.ts} (100%)
 delete mode 100644 packages/examples/src/examples/day1.ts
 delete mode 100644 packages/examples/src/examples/day2.ts
 delete mode 100644 packages/examples/src/examples/day3.ts
 delete mode 100644 packages/examples/src/examples/day4.ts
 delete mode 100644 packages/examples/src/examples/day5.ts
 delete mode 100644 packages/examples/src/examples/day6.ts
 rename packages/examples/src/examples/{multi-enum.ts => enum-multi.ts} (98%)
 rename packages/examples/src/examples/{dynamic.ts => generate-dynamic.ts} (96%)
 rename packages/examples/src/examples/{1779.ts => list-with-detail-primitives.ts} (95%)

diff --git a/packages/examples/src/examples/1169.ts b/packages/examples/src/examples/1169.ts
deleted file mode 100644
index 76d324289..000000000
--- a/packages/examples/src/examples/1169.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-import { UISchemaElement } from '@jsonforms/core';
-
-export const schema = {
-  type: 'object',
-  properties: {
-    Level1: {
-      type: 'array',
-      items: {
-        type: 'object',
-        properties: {
-          Level2: {
-            type: 'object',
-            properties: {
-              Level3: {
-                type: 'string'
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-};
-
-export const uischema: UISchemaElement = undefined;
-
-export const data = {};
-
-registerExamples([
-  {
-    name: '1169',
-    label: 'Issue 1169',
-    data,
-    schema,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/1220.ts b/packages/examples/src/examples/1220.ts
deleted file mode 100644
index 9adcf0608..000000000
--- a/packages/examples/src/examples/1220.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-import { JsonFormsUISchemaRegistryEntry, JsonSchema, NOT_APPLICABLE } from '@jsonforms/core';
-import { StateProps } from '../example';
-
-const data = {
-  orders: [
-    {
-      title: '42 killer robots',
-      ordered: true,
-      assignee: 'Philip J. Fry'
-    }
-  ]
-};
-
-const schema = {
-  definitions: {
-    order: {
-      type: 'object',
-      properties: {
-        title: {
-          type: 'string',
-          minLength: 5
-        },
-        ordered: { type: 'boolean' },
-        assignee: { type: 'string' },
-        // needed to enforce nested layout instead of table
-        choices: {
-          type: 'array',
-          items: {
-            type: 'string'
-          }
-        }
-      },
-      required: ['title']
-    }
-  },
-  type: 'object',
-  properties: {
-    orders: {
-      type: 'array',
-      items: {
-        $ref: '#/definitions/order'
-      }
-    }
-  }
-};
-
-export const uischema = {
-  type: 'Control',
-  scope: '#/properties/orders'
-};
-
-const uischemas = [
-  {
-    tester: (_jsonSchema: JsonSchema, schemaPath: string) => {
-      return schemaPath === '#/properties/orders' ? 2 : NOT_APPLICABLE;
-    },
-    uischema: {
-      type: 'VerticalLayout',
-      elements: [
-        {
-          type: 'Control',
-          scope: '#/properties/title'
-        },
-        {
-          type: 'Control',
-          scope: '#/properties/ordered'
-        },
-        {
-          type: 'VerticalLayout',
-          elements: [
-            {
-              type: 'Control',
-              scope: '#/properties/assignee'
-            }
-          ],
-          rule: {
-            effect: 'SHOW',
-            condition: {
-              type: 'LEAF',
-              scope: '#/properties/ordered',
-              expectedValue: true
-            }
-          }
-        }
-      ]
-    },
-  },
-];
-
-const actions = [
-  {
-    'label': 'Register Issue 1220 UISchema',
-    'apply': (props: StateProps) => {
-      return {
-        ...props,
-        uischemas: uischemas
-      }
-    }
-  },
-  {
-    'label': 'Unregister Issue 1220 UISchema',
-    'apply': (props: StateProps) => {
-      const uischemas: JsonFormsUISchemaRegistryEntry[] = undefined;
-      return {
-        ...props,
-        uischemas: uischemas
-      }
-    }
-  },
-];
-
-registerExamples([
-  {
-    name: '1220',
-    label: 'Issue 1220',
-    data,
-    schema,
-    uischema,
-    actions
-  }
-]);
diff --git a/packages/examples/src/examples/1253.ts b/packages/examples/src/examples/1253.ts
deleted file mode 100644
index d0e16c9f0..000000000
--- a/packages/examples/src/examples/1253.ts
+++ /dev/null
@@ -1,212 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-
-export const schema = {
-  type: 'object',
-  properties: {
-    value: {
-      oneOf: [
-        {
-          title: 'String',
-          type: 'string'
-        },
-        {
-          title: 'Number',
-          type: 'number'
-        }
-      ]
-    }
-  }
-};
-
-export const uischema = {
-  type: 'Control',
-  label: 'Value',
-  scope: '#/properties/value'
-};
-
-const data = {};
-
-const schema2 = {
-  type: 'object',
-  properties: {
-    oneOrMoreThings: {
-      oneOf: [
-        {
-          $ref: '#/definitions/thing'
-        },
-        {
-          $ref: '#/definitions/thingArray'
-        }
-      ]
-    }
-  },
-  definitions: {
-    thing: {
-      title: 'Thing',
-      type: 'string'
-    },
-    thingArray: {
-      title: 'Things',
-      type: 'array',
-      items: {
-        $ref: '#/definitions/thing'
-      }
-    }
-  }
-};
-
-const schema3 = {
-  type: 'object',
-  properties: {
-    thingOrThings: {
-      oneOf: [
-        {
-          title: 'Thing',
-          type: 'object',
-          properties: {
-            thing: {
-              $ref: '#/definitions/thing'
-            }
-          }
-        },
-        {
-          $ref: '#/definitions/thingArray'
-        }
-      ]
-    }
-  },
-  definitions: {
-    thing: {
-      title: 'Thing',
-      type: 'string'
-    },
-    thingArray: {
-      title: 'Things',
-      type: 'array',
-      items: {
-        $ref: '#/definitions/thing'
-      }
-    }
-  }
-};
-
-const uischema2 = {
-  type: 'Control',
-  label: 'Value',
-  scope: '#/properties/oneOrMoreThings'
-};
-
-const uischema3 = {
-  type: 'Control',
-  label: 'Value',
-  scope: '#/properties/thingOrThings'
-};
-
-const schema4 = {
-  definitions: {
-    color: {
-      type: 'string',
-      enum: ['red', 'green', 'blue']
-    }
-  },
-  type: 'object',
-  properties: {
-    things: {
-      type: 'array',
-      items: {
-        type: 'object',
-        properties: {
-          somethingElse: {
-            type: 'string'
-          },
-          thing: {
-            type: 'string',
-            enum: ['thing']
-          },
-          anotherThing: {
-            $ref: '#/definitions/color'
-          }
-        }
-      }
-    }
-  }
-};
-
-const uischema4 = {
-  type: 'Control',
-  scope: '#/properties/things'
-};
-
-registerExamples([
-  {
-    name: 'issue-1253',
-    label: 'issue 1253 (oneOf)',
-    data,
-    schema,
-    uischema
-  }
-]);
-
-registerExamples([
-  {
-    name: 'issue-1253-wrong-path-binding',
-    label: 'issue 1253 (oneOf) - wrong path binding',
-    data,
-    schema: schema,
-    uischema: uischema
-  }
-]);
-
-registerExamples([
-  {
-    name: 'issue-1253-cell-missing-cell',
-    label: 'issue 1253 (oneOf) - missing cell renderer',
-    data,
-    schema: schema2,
-    uischema: uischema2
-  }
-]);
-
-registerExamples([
-  {
-    name: 'issue-1253-add-button-empty-row',
-    label: 'issue 1253 (oneOf) - add button does nothing',
-    data,
-    schema: schema3,
-    uischema: uischema3
-  }
-]);
-
-registerExamples([
-  {
-    name: 'issue-1253-enum-error',
-    label: 'issue 1253 (enum)',
-    data,
-    schema: schema4,
-    uischema: uischema4
-  }
-]);
diff --git a/packages/examples/src/examples/1254.ts b/packages/examples/src/examples/1254.ts
deleted file mode 100644
index 25cfe7e3e..000000000
--- a/packages/examples/src/examples/1254.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-
-export const schema = {
-  type: 'object',
-  properties: {
-    name: {
-      type: 'string',
-      minLength: 1
-    },
-    version: {
-      const: '1.0'
-    }
-  },
-  required: ['version']
-};
-
-export const uischema = {
-  type: 'HorizontalLayout',
-  elements: [
-    {
-      type: 'Control',
-      label: 'Name',
-      scope: '#/properties/name'
-    },
-    {
-      type: 'Control',
-      label: 'Version',
-      scope: '#/properties/version'
-    }
-  ]
-};
-
-const data = {};
-
-registerExamples([
-  {
-    name: 'issue-1254',
-    label: 'issue 1254 (JSONSchema constants)',
-    data,
-    schema,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/1645.ts b/packages/examples/src/examples/1645.ts
deleted file mode 100644
index f1cadee69..000000000
--- a/packages/examples/src/examples/1645.ts
+++ /dev/null
@@ -1,66 +0,0 @@
-/*
-  The MIT License
-  
-  Copyright (c) 2021 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 { registerExamples } from '../register';
-import { UISchemaElement } from '@jsonforms/core';
-
-export const schema = {
-  type: 'object',
-  properties: {
-    propText0: {type: 'string'},
-    propText1: {type: 'string'},
-    propText2: {type: 'string'},
-    propText3: {type: 'string'},
-    propText4: {type: 'string'},
-    propText5: {type: 'string'},
-    propText6: {type: 'string'},
-    propText7: {type: 'string'},
-    propText8: {type: 'string'},
-    propText9: {type: 'string'},
-    propNumber0: {type: 'number'},
-    propNumber1: {type: 'number'},
-    propNumber2: {type: 'number'},
-    propNumber3: {type: 'number'},
-    propNumber4: {type: 'number'},
-    propNumber5: {type: 'number'},
-    propNumber6: {type: 'number'},
-    propNumber7: {type: 'number'},
-    propNumber8: {type: 'number'},
-    propNumber9: {type: 'number'},
-  }
-};
-
-export const uischema: UISchemaElement = undefined;
-
-export const data = {};
-
-registerExamples([
-  {
-    name: '1645',
-    label: 'Issue 1645',
-    data,
-    schema,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/1884.ts b/packages/examples/src/examples/1884.ts
index e95cd4ec3..7f27ecead 100644
--- a/packages/examples/src/examples/1884.ts
+++ b/packages/examples/src/examples/1884.ts
@@ -83,6 +83,10 @@ export const schema = {
 export const uischema = {
   type: 'VerticalLayout',
   elements: [
+    {
+      type: 'Label',
+      text: 'Toggle the committer boolean to enable/disable the address block.'
+    },
     {
       type: 'HorizontalLayout',
       elements: [
@@ -179,7 +183,7 @@ export const data = {
 registerExamples([
   {
     name: '1884',
-    label: 'Issue 1884 - Committer enable/disable Address',
+    label: 'Issue 1884 - Nested enable/disable',
     data,
     schema,
     uischema
diff --git a/packages/examples/src/examples/1948.ts b/packages/examples/src/examples/1948.ts
index a4d8abbde..042a1b438 100644
--- a/packages/examples/src/examples/1948.ts
+++ b/packages/examples/src/examples/1948.ts
@@ -72,14 +72,14 @@ export const data = {
 registerExamples([
   {
     name: '1948_with',
-    label: 'Issue 1948 with schema',
+    label: 'Issue 1948 - Array renderer selection (with schema)',
     data,
     schema,
     uischema
   },
   {
     name: '1948_without',
-    label: 'Issue 1948 w/o schema',
+    label: 'Issue 1948 - Array renderer selection (w/o schema)',
     data,
     schema: undefined,
     uischema
diff --git a/packages/examples/src/examples/1996.ts b/packages/examples/src/examples/1996.ts
deleted file mode 100644
index 195ae22b4..000000000
--- a/packages/examples/src/examples/1996.ts
+++ /dev/null
@@ -1,102 +0,0 @@
-/*
-  The MIT License
-  
-  Copyright (c) 2022 EclipseSource
-  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 { registerExamples } from '../register';
-import { ControlElement } from '@jsonforms/core';
-
-export const schemaAnyOf = {
-  type: "array",
-  items: {
-    anyOf: [
-      {
-        type: "object",
-        properties: {
-          value: {
-            type: "string"
-          }
-        },
-        required: ["value"]
-      },
-      {
-        type: "object",
-        properties: {
-          value: {
-            type: "number"
-          }
-        },
-        required: ["value"]
-      }
-    ]
-  }
-};
-
-export const schemaOneOf = {
-  type: "array",
-  items: {
-    oneOf: [
-      {
-        type: "object",
-        properties: {
-          value: {
-            type: "string"
-          }
-        },
-        required: ["value"]
-      },
-      {
-        type: "object",
-        properties: {
-          value: {
-            type: "number"
-          }
-        },
-        required: ["value"]
-      }
-    ]
-  }
-};
-
-export const uischema: ControlElement = {
-  type: 'Control',
-  scope: '#'
-};
-
-export const data: any[] = [];
-
-registerExamples([
-  {
-    name: '1996_anyOf',
-    label: 'Issue 1996 - array with anyOf items',
-    data,
-    schema: schemaAnyOf,
-    uischema
-  },
-  {
-    name: '1996_oneOf',
-    label: 'Issue 1996 - array with oneOf items',
-    data,
-    schema: schemaOneOf,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/anyOf.ts b/packages/examples/src/examples/anyOf.ts
index bdb8d5cf3..10caf2f44 100644
--- a/packages/examples/src/examples/anyOf.ts
+++ b/packages/examples/src/examples/anyOf.ts
@@ -66,6 +66,15 @@ export const schema = {
         { $ref: '#/definitions/addresses' },
         { $ref: '#/definitions/users' }
       ]
+    },
+    addressesOrUsersAnyOfItems: {
+      type: 'array',
+      items: {
+        anyOf: [
+          { $ref: '#/definitions/addresses' },
+          { $ref: '#/definitions/users' }
+        ]
+      }
     }
   }
 };
@@ -79,7 +88,13 @@ export const uischema = {
     },
     {
       type: 'Control',
-      scope: '#/properties/addressesOrUsers'
+      scope: '#/properties/addressesOrUsers',
+      label: 'Addresses or Users (AnyOf Schema)'
+    },
+    {
+      type: 'Control',
+      scope: '#/properties/addressesOrUsersAnyOfItems',
+      label: 'Addresses or Users (AnyOf Array Items)'
     }
   ]
 };
diff --git a/packages/examples/src/examples/booleanToggle.ts b/packages/examples/src/examples/booleanToggle.ts
deleted file mode 100644
index 630c2844f..000000000
--- a/packages/examples/src/examples/booleanToggle.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-/*
-  The MIT License
-  
-  Copyright (c) 2017-2021 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 { registerExamples } from '../register';
-
-export const schema = {
-  type: 'object',
-  properties: {
-    checkbox: {
-      type: 'boolean'
-    },
-    toggle: {
-      type: 'boolean'
-    }
-  }
-};
-
-export const uischema = {
-  type: 'VerticalLayout',
-  elements: [
-    {
-      type: 'Control',
-      scope: '#/properties/checkbox'
-    },
-    {
-      type: 'Control',
-      scope: '#/properties/toggle',
-      options: {
-        toggle: true
-      }
-    }
-  ]
-};
-
-export const data = {
-  checkbox: false,
-  toggle: false
-};
-
-export const booleanToggleExample = {
-  name: 'booleanToggle',
-  label: 'Boolean Toggle',
-  data,
-  schema,
-  uischema
-};
-
-registerExamples([booleanToggleExample]);
diff --git a/packages/examples/src/examples/steppershownav.ts b/packages/examples/src/examples/categorization-stepper-nav-buttons.ts
similarity index 97%
rename from packages/examples/src/examples/steppershownav.ts
rename to packages/examples/src/examples/categorization-stepper-nav-buttons.ts
index 52050eeea..88abe35c9 100644
--- a/packages/examples/src/examples/steppershownav.ts
+++ b/packages/examples/src/examples/categorization-stepper-nav-buttons.ts
@@ -43,7 +43,7 @@ export const data = categorizationData;
 
 registerExamples([
   {
-    name: 'categorizationsteppernavbuttons',
+    name: 'categorization-stepper-nav-buttons',
     label: 'Categorization (Stepper - Nav Buttons)',
     data,
     schema,
diff --git a/packages/examples/src/examples/stepper.ts b/packages/examples/src/examples/categorization-stepper.ts
similarity index 100%
rename from packages/examples/src/examples/stepper.ts
rename to packages/examples/src/examples/categorization-stepper.ts
diff --git a/packages/examples/src/examples/categorization.ts b/packages/examples/src/examples/categorization.ts
index affb7a860..5156968b4 100644
--- a/packages/examples/src/examples/categorization.ts
+++ b/packages/examples/src/examples/categorization.ts
@@ -306,8 +306,8 @@ registerExamples([
     i18n: { locale: 'en', translate: translate }
   },
   {
-    name: '1713',
-    label: 'Bug 1713',
+    name: 'categorization_1713',
+    label: 'Categorization - Issue 1713',
     data,
     schema:schema_1713,
     uischema:uischema_1713
diff --git a/packages/examples/src/examples/day1.ts b/packages/examples/src/examples/day1.ts
deleted file mode 100644
index bd6288c43..000000000
--- a/packages/examples/src/examples/day1.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-import { UISchemaElement } from '@jsonforms/core';
-
-export const schema = {
-  type: 'object',
-  properties: {
-    name: {
-      type: 'string',
-      minLength: 1
-    },
-    description: {
-      type: 'string'
-    },
-    done: {
-      type: 'boolean'
-    }
-  },
-  required: ['name']
-};
-
-export const uischema: UISchemaElement = undefined;
-
-export const data = {
-  name: 'Send email to Adrian',
-  description: 'Confirm if you have passed the subject\nHereby ...',
-  done: true
-};
-
-registerExamples([
-  {
-    name: 'day1',
-    label: 'Day 1',
-    data,
-    schema,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/day2.ts b/packages/examples/src/examples/day2.ts
deleted file mode 100644
index 077d5aacd..000000000
--- a/packages/examples/src/examples/day2.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-import { data as day1Data, schema as day1Schema } from './day1';
-
-export const schema = day1Schema;
-
-export const uischema = {
-  type: 'VerticalLayout',
-  elements: [
-    {
-      type: 'Control',
-      scope: '#/properties/name'
-    },
-    {
-      type: 'Control',
-      label: false,
-      scope: '#/properties/done'
-    },
-    {
-      type: 'Control',
-      scope: '#/properties/description',
-      options: {
-        multi: true
-      }
-    }
-  ]
-};
-
-export const data = day1Data;
-
-registerExamples([
-  {
-    name: 'day2',
-    label: 'Day 2',
-    data,
-    schema,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/day3.ts b/packages/examples/src/examples/day3.ts
deleted file mode 100644
index 9da91b9b4..000000000
--- a/packages/examples/src/examples/day3.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-import {
-  data as day2Data,
-  schema as day2Schema,
-  uischema as day2UiSchema
-} from './day2';
-
-export const schema = {
-  type: 'object',
-  properties: {
-    ...day2Schema.properties,
-    dueDate: {
-      type: 'string',
-      format: 'date'
-    },
-    rating: {
-      type: 'integer',
-      maximum: 5
-    }
-  },
-  required: ['name']
-};
-
-export const uischema = {
-  type: 'VerticalLayout',
-  elements: [
-    ...day2UiSchema.elements,
-    {
-      type: 'Control',
-      scope: '#/properties/dueDate'
-    },
-    {
-      type: 'Control',
-      scope: '#/properties/rating'
-    }
-  ]
-};
-
-export const data = {
-  ...day2Data,
-  rating: 3
-};
-
-registerExamples([
-  {
-    name: 'day3',
-    label: 'Day 3',
-    data,
-    schema,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/day4.ts b/packages/examples/src/examples/day4.ts
deleted file mode 100644
index 0d69eecf0..000000000
--- a/packages/examples/src/examples/day4.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-import {
-  data as day3Data,
-  schema as day3Schema,
-  uischema as day3UiSchema
-} from './day3';
-
-export const schema = {
-  type: 'object',
-  properties: {
-    ...day3Schema.properties,
-    recurrence: {
-      type: 'string',
-      enum: ['Never', 'Daily', 'Weekly', 'Monthly']
-    },
-    recurrenceInterval: {
-      type: 'integer'
-    }
-  },
-  required: ['name']
-};
-
-export const uischema = {
-  type: 'VerticalLayout',
-  elements: [
-    ...day3UiSchema.elements,
-    {
-      type: 'Control',
-      scope: '#/properties/recurrence'
-    },
-    {
-      type: 'Control',
-      scope: '#/properties/recurrenceInterval',
-      rule: {
-        effect: 'HIDE',
-        condition: {
-          scope: '#/properties/recurrence',
-          schema: { enum: ['Never'] }
-        }
-      }
-    }
-  ]
-};
-
-export const data = {
-  ...day3Data,
-  recurrence: 'Daily',
-  recurrenceInterval: 5
-};
-
-registerExamples([
-  {
-    name: 'day4',
-    label: 'Day 4',
-    data,
-    schema,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/day5.ts b/packages/examples/src/examples/day5.ts
deleted file mode 100644
index c04ca0d6e..000000000
--- a/packages/examples/src/examples/day5.ts
+++ /dev/null
@@ -1,169 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-import { data as day4Data, schema as day4Schema } from './day4';
-
-export const schema = day4Schema;
-
-export const uischema = {
-  type: 'VerticalLayout',
-  elements: [
-    {
-      type: 'Control',
-      label: false,
-      scope: '#/properties/done'
-    },
-    {
-      type: 'Control',
-      scope: '#/properties/name'
-    },
-    {
-      type: 'HorizontalLayout',
-      elements: [
-        {
-          type: 'Control',
-          scope: '#/properties/dueDate'
-        },
-        {
-          type: 'Control',
-          scope: '#/properties/rating'
-        }
-      ]
-    },
-    {
-      type: 'Control',
-      scope: '#/properties/description',
-      options: {
-        multi: true
-      }
-    },
-    {
-      type: 'HorizontalLayout',
-      elements: [
-        {
-          type: 'Control',
-          scope: '#/properties/recurrence'
-        },
-        {
-          type: 'Control',
-          scope: '#/properties/recurrenceInterval',
-          rule: {
-            effect: 'HIDE',
-            condition: {
-              scope: '#/properties/recurrence',
-              schema: { enum: ['Never'] }
-            }
-          }
-        }
-      ]
-    }
-  ]
-};
-
-export const categoryUiSchema = {
-  type: 'Categorization',
-  elements: [
-    {
-      type: 'Category',
-      label: 'Main',
-      elements: [
-        {
-          type: 'Control',
-          label: false,
-          scope: '#/properties/done'
-        },
-        {
-          type: 'Control',
-          scope: '#/properties/name'
-        },
-        {
-          type: 'Control',
-          scope: '#/properties/description',
-          options: {
-            multi: true
-          }
-        }
-      ]
-    },
-    {
-      type: 'Category',
-      label: 'Additional',
-      elements: [
-        {
-          type: 'HorizontalLayout',
-          elements: [
-            {
-              type: 'Control',
-              scope: '#/properties/dueDate'
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/rating'
-            }
-          ]
-        },
-        {
-          type: 'HorizontalLayout',
-          elements: [
-            {
-              type: 'Control',
-              scope: '#/properties/recurrence'
-            },
-            {
-              type: 'Control',
-              scope: '#/properties/recurrenceInterval',
-              rule: {
-                effect: 'HIDE',
-                condition: {
-                  scope: '#/properties/recurrence',
-                  schema: { enum: ['Never'] }
-                }
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-
-export const data = day4Data;
-
-registerExamples([
-  {
-    name: 'day5',
-    label: 'Day 5',
-    data,
-    schema,
-    uischema
-  },
-  {
-    name: 'day5_category',
-    label: 'Day 5 With Category',
-    data,
-    schema,
-    uischema: categoryUiSchema
-  }
-]);
diff --git a/packages/examples/src/examples/day6.ts b/packages/examples/src/examples/day6.ts
deleted file mode 100644
index ad26db6f5..000000000
--- a/packages/examples/src/examples/day6.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/*
-  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 { registerExamples } from '../register';
-import {
-  data as day5Data,
-  schema as day5Schema,
-  uischema as day5UiSchema
-} from './day5';
-
-export const schema = day5Schema;
-export const uischema = day5UiSchema;
-export const data = day5Data;
-
-registerExamples([
-  {
-    name: 'day6',
-    label: 'Day 6',
-    data,
-    schema,
-    uischema
-  }
-]);
diff --git a/packages/examples/src/examples/multi-enum.ts b/packages/examples/src/examples/enum-multi.ts
similarity index 98%
rename from packages/examples/src/examples/multi-enum.ts
rename to packages/examples/src/examples/enum-multi.ts
index 1bf7e5530..acd98f8b9 100644
--- a/packages/examples/src/examples/multi-enum.ts
+++ b/packages/examples/src/examples/enum-multi.ts
@@ -68,7 +68,7 @@ export const data = { oneOfMultiEnum: ['foo'], multiEnum: ['bar'] };
 registerExamples([
   {
     name: 'multi-enum',
-    label: 'Multi Enum',
+    label: 'Enum - Multi selection',
     data,
     schema,
     uischema
diff --git a/packages/examples/src/examples/enum.ts b/packages/examples/src/examples/enum.ts
index 8376577d8..1b0e8301d 100644
--- a/packages/examples/src/examples/enum.ts
+++ b/packages/examples/src/examples/enum.ts
@@ -50,7 +50,10 @@ export const schema = {
           {const: 'bar', title: 'Bar'},
           {const: 'foobar', title: 'FooBar'}
       ]
-  }
+    },
+    constEnum: {
+      const: 'Const Value'
+    }
   }
 };
 
@@ -61,6 +64,10 @@ export const uischema = {
       type: 'Group',
       label: 'Enums',
       elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/constEnum'
+        },
         {
           type: 'Control',
           scope: '#/properties/plainEnum'
diff --git a/packages/examples/src/examples/dynamic.ts b/packages/examples/src/examples/generate-dynamic.ts
similarity index 96%
rename from packages/examples/src/examples/dynamic.ts
rename to packages/examples/src/examples/generate-dynamic.ts
index 1eaa05f4e..1ff2950aa 100644
--- a/packages/examples/src/examples/dynamic.ts
+++ b/packages/examples/src/examples/generate-dynamic.ts
@@ -40,7 +40,7 @@ const actions = [
 registerExamples([
   {
     name: 'dynamic',
-    label: 'Dynamic Change',
+    label: 'Generate both schemas - Dynamic data change',
     schema: undefined,
     uischema: undefined,
     data: { name: 'bla' },
diff --git a/packages/examples/src/examples/1779.ts b/packages/examples/src/examples/list-with-detail-primitives.ts
similarity index 95%
rename from packages/examples/src/examples/1779.ts
rename to packages/examples/src/examples/list-with-detail-primitives.ts
index 325f171ea..93ebb01d0 100644
--- a/packages/examples/src/examples/1779.ts
+++ b/packages/examples/src/examples/list-with-detail-primitives.ts
@@ -45,7 +45,7 @@ const uischema = {
 
 registerExamples([
     {
-        name: '1779-string',
+        name: 'list-with-detail-primitive-string',
         label: 'List With Detail primitive (string)',
         data,
         schema,
@@ -74,7 +74,7 @@ const uischema_number = {
 
 registerExamples([
     {
-        name: '1779-number',
+        name: 'list-with-detail-primitive-number',
         label: 'List With Detail primitive (number)',
         data: data_number,
         schema: schema_number,
diff --git a/packages/examples/src/examples/list-with-detail-registered.ts b/packages/examples/src/examples/list-with-detail-registered.ts
index 57915b534..8a2e5946c 100644
--- a/packages/examples/src/examples/list-with-detail-registered.ts
+++ b/packages/examples/src/examples/list-with-detail-registered.ts
@@ -97,7 +97,7 @@ const uischema = {
 registerExamples([
   {
     name: 'list-with-detail-registered',
-    label: 'List With Detail (Registered)',
+    label: 'List With Detail (Registered Detail UISchema)',
     data,
     schema,
     uischema
diff --git a/packages/examples/src/examples/object.ts b/packages/examples/src/examples/object.ts
index 46b7278c4..d1bce2bef 100644
--- a/packages/examples/src/examples/object.ts
+++ b/packages/examples/src/examples/object.ts
@@ -101,7 +101,7 @@ const data = {
 registerExamples([
   {
     name: 'rootObject',
-    label: 'Root Object',
+    label: 'Object - Root Scope',
     data,
     schema,
     uischema: uischemaRoot
diff --git a/packages/examples/src/examples/onChange.ts b/packages/examples/src/examples/onChange.ts
index 44908309c..b20c0fe64 100644
--- a/packages/examples/src/examples/onChange.ts
+++ b/packages/examples/src/examples/onChange.ts
@@ -67,7 +67,7 @@ export const data = {};
 registerExamples([
   {
     name: 'onChange',
-    label: 'On Change',
+    label: 'On Change Listener',
     data,
     schema,
     uischema
diff --git a/packages/examples/src/examples/oneOf.ts b/packages/examples/src/examples/oneOf.ts
index 1c9237622..19c117703 100644
--- a/packages/examples/src/examples/oneOf.ts
+++ b/packages/examples/src/examples/oneOf.ts
@@ -308,36 +308,36 @@ registerExamples([
     uischema
   },
   {
-    name: '1265_array',
-    label: '1265 Array',
+    name: 'oneOf_1265_array',
+    label: 'oneOf - Validation for Arrays (Issue 1265)',
     data: { coloursOrNumbers: ['Foo'] },
     schema: schema_1265_array,
     uischema: undefined
   },
   {
-    name: '1265_object',
-    label: '1265 Object',
+    name: 'oneOf_1265_object',
+    label: 'oneOf - Validation for Objects (Issue 1265)',
     data: { coloursOrNumbers: { colour: 'Foo' } },
     schema: schema_1265_object,
     uischema: undefined
   },
   {
-    name: '1265_simple',
-    label: '1265 Simple',
+    name: 'oneOf_1265_simple',
+    label: 'oneOf - Validation for Primitives (Issue 1265)',
     data: { coloursOrNumbers: 'Foo' },
     schema: schema_1265_simple,
     uischema: undefined
   },
   {
-    name: '1273',
-    label: '1273',
+    name: 'oneOf_1273',
+    label: 'oneOf - Preselection for Objects (Issue 1273)',
     data: data_1273,
     schema: schema_1273,
     uischema: undefined
   },
   {
-    name: '1273_simple',
-    label: 'Simple 1273',
+    name: 'oneOf_1273_simple',
+    label: 'oneOf - Preselection for Primitives (Issue 1273 )',
     data: { quantity: 5 },
     schema: schema_1273_simple,
     uischema: undefined
diff --git a/packages/examples/src/examples/oneOfArray.ts b/packages/examples/src/examples/oneOfArray.ts
index 01740565a..6f8a8c15d 100644
--- a/packages/examples/src/examples/oneOfArray.ts
+++ b/packages/examples/src/examples/oneOfArray.ts
@@ -91,7 +91,7 @@ const data = {
 registerExamples([
   {
     name: 'oneOfArray',
-    label: 'oneOf (in array)',
+    label: 'oneOf - Inside array items',
     data,
     schema,
     uischema
diff --git a/packages/examples/src/examples/text.ts b/packages/examples/src/examples/text.ts
index 784d6529e..bbaee349a 100644
--- a/packages/examples/src/examples/text.ts
+++ b/packages/examples/src/examples/text.ts
@@ -89,7 +89,7 @@ export const data = {
 registerExamples([
   {
     name: 'text',
-    label: 'Text',
+    label: 'Text Control Options',
     data,
     schema,
     uischema
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index a9b955b2e..2619d1849 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -36,17 +36,11 @@ import * as arrayWithCustomChildLabel from './examples/arrays-with-custom-elemen
 import * as arrayWithSorting from './examples/arrays-with-sorting';
 import * as stringArray from './examples/stringArray';
 import * as categorization from './examples/categorization';
-import * as stepper from './examples/stepper';
-import * as steppershownav from './examples/steppershownav';
+import * as stepper from './examples/categorization-stepper';
+import * as steppershownav from './examples/categorization-stepper-nav-buttons';
 import * as controlOptions from './examples/control-options';
-import * as day1 from './examples/day1';
-import * as day2 from './examples/day2';
-import * as day3 from './examples/day3';
-import * as day4 from './examples/day4';
-import * as day5 from './examples/day5';
-import * as day6 from './examples/day6';
 import * as dates from './examples/dates';
-import * as dynamic from './examples/dynamic';
+import * as generateDynamic from './examples/generate-dynamic';
 import * as generateSchema from './examples/generate';
 import * as generateUISchema from './examples/generateUI';
 import * as layout from './examples/layout';
@@ -63,23 +57,16 @@ import * as listWithDetailRegistered from './examples/list-with-detail-registere
 import * as object from './examples/object';
 import * as i18n from './examples/i18n';
 import * as issue_1948 from './examples/1948';
-import * as issue_1996 from './examples/1996';
-import * as issue_1169 from './examples/1169';
-import * as issue_1220 from './examples/1220';
-import * as issue_1253 from './examples/1253';
-import * as issue_1254 from './examples/1254';
 import * as oneOfRecursive from './examples/oneOf-recursive';
 import * as huge from './examples/huge';
 import * as defaultExample from './examples/default';
 import * as onChange from './examples/onChange';
 import * as enumExample from './examples/enum';
 import * as radioGroupExample from './examples/radioGroup';
-import * as booleanToggle from './examples/booleanToggle';
-import * as multiEnum from './examples/multi-enum';
+import * as multiEnum from './examples/enum-multi';
 import * as enumInArray from './examples/enumInArray';
 import * as readonly from './examples/readonly';
-import * as bug_1779 from './examples/1779';
-import * as bug_1645 from './examples/1645';
+import * as listWithDetailPrimitives from './examples/list-with-detail-primitives';
 import * as conditionalSchemaComposition from './examples/conditional-schema-compositions';
 import * as additionalErrors from './examples/additional-errors';
 export * from './register';
@@ -89,7 +76,6 @@ import * as ifThenElse from './examples/if_then_else';
 
 export {
   issue_1948,
-  issue_1996,
   defaultExample,
   allOf,
   anyOf,
@@ -108,12 +94,6 @@ export {
   stepper,
   steppershownav,
   controlOptions,
-  day1,
-  day2,
-  day3,
-  day4,
-  day5,
-  day6,
   generateSchema,
   generateUISchema,
   layout,
@@ -121,7 +101,7 @@ export {
   rule,
   ruleInheritance,
   dates,
-  dynamic,
+  generateDynamic,
   config,
   text,
   numbers,
@@ -130,22 +110,16 @@ export {
   listWithDetailRegistered,
   object,
   i18n,
-  issue_1169,
-  issue_1220,
-  issue_1253,
-  issue_1254,
   oneOfRecursive,
   huge,
   ifThenElse,
   onChange,
   enumExample,
   radioGroupExample,
-  booleanToggle,
   multiEnum,
   enumInArray,
   readonly,
-  bug_1779,
-  bug_1645,
+  listWithDetailPrimitives,
   conditionalSchemaComposition,
   additionalErrors,
   issue_1884,
diff --git a/packages/examples/src/register.ts b/packages/examples/src/register.ts
index cd59d3500..75e4c971c 100644
--- a/packages/examples/src/register.ts
+++ b/packages/examples/src/register.ts
@@ -30,5 +30,8 @@ export const registerExamples = (examples: ExampleDescription[]): void => {
   examples.forEach(example => (knownExamples[example.name] = example));
 };
 
-export const getExamples: () => ExampleDescription[] = () =>
-  Object.keys(knownExamples).map(key => knownExamples[key]);
+export const getExamples: () => ExampleDescription[] = () => {
+  const examples = Object.keys(knownExamples).map(key => knownExamples[key]);
+  examples.sort((a, b) => a.label.localeCompare(b.label));
+  return examples;
+}

From ba35fde2afa7891a6f9a49979975f14ef6057598 Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Thu, 13 Apr 2023 15:29:37 +0200
Subject: [PATCH 07/17] Prevent index out of bounds errors for nested
 categorizations (#2121)

---
 .../src/examples/nestedCategorization.ts      | 176 ++++++++++++++++++
 packages/examples/src/index.ts                |   2 +
 .../layouts/MaterialCategorizationLayout.tsx  |  26 ++-
 3 files changed, 196 insertions(+), 8 deletions(-)
 create mode 100644 packages/examples/src/examples/nestedCategorization.ts

diff --git a/packages/examples/src/examples/nestedCategorization.ts b/packages/examples/src/examples/nestedCategorization.ts
new file mode 100644
index 000000000..1d6a1ee31
--- /dev/null
+++ b/packages/examples/src/examples/nestedCategorization.ts
@@ -0,0 +1,176 @@
+/*
+  The MIT License
+  
+  Copyright (c) 2023 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 { registerExamples } from '../register';
+
+export const schema = {
+    type: 'object',
+    properties: {
+        cat1: {
+            type: 'object',
+            properties: {
+                subcat11: {
+                    type: 'string'
+                }
+            }
+        },
+        cat2: {
+            type: 'object',
+            properties: {
+                subcat21: {
+                    type: 'string'
+                },
+                subcat22: {
+                    type: 'string'
+                }
+            }
+        },
+        cat3: {
+            type: 'object',
+            properties: {
+                subcat31: {
+                    type: 'string'
+                },
+                subcat32: {
+                    type: 'string'
+                },
+                subcat33: {
+                    type: 'string'
+                }
+            }
+        }
+    }
+}
+
+export const uischema = {
+    type: 'Categorization',
+    elements: [
+        {
+            type: 'Category',
+            label: 'Cat1',
+            elements: [
+                {
+                    type: 'Categorization',
+                    elements: [
+                        {
+                            type: 'Category',
+                            label: 'SubCat1-1',
+                            elements: [
+                                {
+                                    type: 'Control',
+                                    scope: '#/properties/cat1/properties/subcat11'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        {
+            type: 'Category',
+            label: 'Cat2',
+            elements: [
+                {
+                    type: 'Categorization',
+                    elements: [
+                        {
+                            type: 'Category',
+                            label: 'SubCat2-1',
+                            elements: [
+                                {
+                                    type: 'Control',
+                                    scope: '#/properties/cat2/properties/subcat21'
+                                }
+                            ]
+                        },
+                        {
+                            type: 'Category',
+                            label: 'SubCat2-2',
+                            elements: [
+                                {
+                                    type: 'Control',
+                                    scope: '#/properties/cat2/properties/subcat22'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        },
+        ,
+        {
+            type: 'Category',
+            label: 'Cat3',
+            elements: [
+                {
+                    type: 'Categorization',
+                    elements: [
+                        {
+                            type: 'Category',
+                            label: 'SubCat3-1',
+                            elements: [
+                                {
+                                    type: 'Control',
+                                    scope: '#/properties/cat3/properties/subcat31'
+                                }
+                            ]
+                        },
+                        {
+                            type: 'Category',
+                            label: 'SubCat3-2',
+                            elements: [
+                                {
+                                    type: 'Control',
+                                    scope: '#/properties/cat3/properties/subcat32'
+                                }
+                            ]
+                        },
+                        {
+                            type: 'Category',
+                            label: 'SubCat3-3',
+                            elements: [
+                                {
+                                    type: 'Control',
+                                    scope: '#/properties/cat3/properties/subcat33'
+                                }
+                            ]
+                        }
+                    ]
+                }
+            ]
+        }
+    ]
+};
+
+export const data = {};
+
+registerExamples([
+    {
+        name: 'nestedCategorization',
+        label: 'Nested Categorization',
+        data,
+        schema,
+        uischema
+    }
+]);
diff --git a/packages/examples/src/index.ts b/packages/examples/src/index.ts
index 2619d1849..4245b78cb 100644
--- a/packages/examples/src/index.ts
+++ b/packages/examples/src/index.ts
@@ -30,6 +30,7 @@ import * as anyOfOneOfAllOfResolve from './examples/anyOf-oneOf-allOf-resolve';
 import * as array from './examples/arrays';
 import * as arrayI18n from './examples/arraysI18n';
 import * as nestedArray from './examples/nestedArrays';
+import * as nestedCategorization from './examples/nestedCategorization';
 import * as arrayWithDetail from './examples/arrays-with-detail';
 import * as arrayWithDetailAndRule from './examples/arrays-with-detail-and-rule';
 import * as arrayWithCustomChildLabel from './examples/arrays-with-custom-element-label';
@@ -86,6 +87,7 @@ export {
   array,
   arrayI18n,
   nestedArray,
+  nestedCategorization,
   arrayWithDetail,
   arrayWithDetailAndRule,
   arrayWithCustomChildLabel,
diff --git a/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx b/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
index 38c956944..65c862f3f 100644
--- a/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useState, useMemo} from 'react';
+import React, { useState, useMemo } from 'react';
 import { AppBar, Hidden, Tab, Tabs } from '@mui/material';
 import {
   and,
@@ -92,12 +92,21 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     t
   } = props;
   const categorization = uischema as Categorization;
-  const [activeCategory, setActiveCategory]= useState<number|undefined>(selected??0);
+  const [previousCategorization, setPreviousCategorization] = useState<Categorization>(uischema as Categorization);
+  const [activeCategory, setActiveCategory] = useState<number>(selected ?? 0);
   const categories = useMemo(() => categorization.elements.filter((category: Category) =>
     isVisible(category, data, undefined, ajv)
-  ),[categorization, data, ajv]);
+  ), [categorization, data, ajv]);
+
+  if (categorization !== previousCategorization) {
+    setActiveCategory(0);
+    setPreviousCategorization(categorization);
+  }
+
+  const safeCategory = activeCategory >= categorization.elements.length ? 0 : activeCategory;
+
   const childProps: MaterialLayoutRendererProps = {
-    elements: categories[activeCategory].elements,
+    elements: categories[safeCategory] ? categories[safeCategory].elements : [],
     schema,
     path,
     direction: 'column',
@@ -108,13 +117,13 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
   };
   const onTabChange = (_event: any, value: any) => {
     if (onChange) {
-      onChange(value, activeCategory);
+      onChange(value, safeCategory);
     }
     setActiveCategory(value);
   };
 
   const tabLabels = useMemo(() => {
-    return categories.map((e: Category) => 
+    return categories.map((e: Category) =>
       deriveLabelForUISchemaElement(e, t)
     )
   }, [categories, t])
@@ -122,17 +131,18 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
   return (
     <Hidden xsUp={!visible}>
       <AppBar position='static'>
-        <Tabs value={activeCategory} onChange={onTabChange} textColor='inherit' indicatorColor='secondary' variant='scrollable'>
+        <Tabs value={safeCategory} onChange={onTabChange} textColor='inherit' indicatorColor='secondary' variant='scrollable'>
           {categories.map((_, idx: number) => (
             <Tab key={idx} label={tabLabels[idx]} />
           ))}
         </Tabs>
       </AppBar>
       <div style={{ marginTop: '0.5em' }}>
-        <MaterialLayoutRenderer {...childProps} />
+        <MaterialLayoutRenderer {...childProps} key={safeCategory} />
       </div>
     </Hidden>
   );
 };
 
 export default withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));
+

From 5bcb632fd2aa55ef1fc973f380ed69a1e4a33518 Mon Sep 17 00:00:00 2001
From: Florian Gareis <TheZoker@users.noreply.github.com>
Date: Fri, 14 Apr 2023 08:29:49 +0200
Subject: [PATCH 08/17] Fix percent char handling in property names

Previously we executed 'decodeURIComponent' on each path segment. This lead to
errors when an actual URI special character was encountered. As there is no reason for
JSON Forms to transform paths with 'decodeURIComponent' this code was removed
and thereby the error fixed.

Fixes #2119
---
 packages/core/src/util/resolvers.ts       |  1 -
 packages/core/test/util/path.test.ts      |  6 ------
 packages/core/test/util/resolvers.test.ts | 10 +++++++++-
 3 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/core/src/util/resolvers.ts b/packages/core/src/util/resolvers.ts
index aca152087..559cb26bb 100644
--- a/packages/core/src/util/resolvers.ts
+++ b/packages/core/src/util/resolvers.ts
@@ -49,7 +49,6 @@ export const resolveData = (instance: any, dataPath: string): any => {
   const dataPathSegments = dataPath.split('.');
 
   return dataPathSegments
-    .map(segment => decodeURIComponent(segment))
     .reduce((curInstance, decodedSegment) => {
       if (!curInstance || !curInstance.hasOwnProperty(decodedSegment)) {
         return undefined;
diff --git a/packages/core/test/util/path.test.ts b/packages/core/test/util/path.test.ts
index d7299135d..062450166 100644
--- a/packages/core/test/util/path.test.ts
+++ b/packages/core/test/util/path.test.ts
@@ -127,12 +127,6 @@ test('resolve instance with keywords', t => {
   const result = Resolve.data(instance, toDataPath('#/properties/properties'));
   t.is(result, 123);
 });
-test('resolve instance with encoded', t => {
-  const instance = { 'foo/bar': 123 };
-  const fooBar = encodeURIComponent('foo/bar');
-  const result = Resolve.data(instance, toDataPath(`#/properties/${fooBar}`));
-  t.is(result, 123);
-});
 test('resolve nested instance', t => {
   const instance = { foo: { bar: 123 } };
   const result = Resolve.data(
diff --git a/packages/core/test/util/resolvers.test.ts b/packages/core/test/util/resolvers.test.ts
index 0efc7dc31..7f9dc2f9f 100644
--- a/packages/core/test/util/resolvers.test.ts
+++ b/packages/core/test/util/resolvers.test.ts
@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { resolveSchema } from '../../src/util/resolvers';
+import { resolveData, resolveSchema } from '../../src/util/resolvers';
 import test from 'ava';
 
 test('resolveSchema - resolves schema with any ', t => {
@@ -155,3 +155,11 @@ test('resolveSchema - resolves schema with encoded characters', t => {
   t.deepEqual(resolveSchema(schema, '#/properties/foo ~1 ~0 bar', schema), {type: 'integer'});
   t.is(resolveSchema(schema, '#/properties/foo / bar', schema), undefined);
 });
+
+
+test('resolveData - resolves data with % characters', t => {
+  const data = {
+    'foo%': '123'
+  };
+  t.deepEqual(resolveData(data, 'foo%'), '123');
+});

From 06bbb4baca0405d185b9d2070e203a4943eb56da Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Fri, 14 Apr 2023 08:35:32 +0200
Subject: [PATCH 09/17] Consider oneOf enum in array testers

Whenever we encounter an array we run a heuristic which determines whether the
'items' are shallow objects/values or some more complex objects. This is typically used
to determine whether a compact table renderer or more complex element renderer
shall be used.

This heuristic is extended to consider 'oneOf's which model an enum to be suitable for
table renderers.
---
 packages/core/src/testers/testers.ts |  5 ++++-
 packages/core/test/testers.test.ts   | 13 +++++++++++++
 2 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/testers/testers.ts b/packages/core/src/testers/testers.ts
index b0e586c1d..a4de4455f 100644
--- a/packages/core/src/testers/testers.ts
+++ b/packages/core/src/testers/testers.ts
@@ -466,7 +466,10 @@ export const isObjectArrayWithNesting = (
         if (val.$ref !== undefined) {
           return false;
         }
-        if (val.anyOf || val.oneOf || val.allOf) {
+        if (val.anyOf || val.allOf) {
+          return true;
+        }
+        if(val.oneOf && !isOneOfEnumControl(uischema,val,context)){
           return true;
         }
         if (hasType(val, 'object')) {
diff --git a/packages/core/test/testers.test.ts b/packages/core/test/testers.test.ts
index 4d9a6563c..9e57e1134 100644
--- a/packages/core/test/testers.test.ts
+++ b/packages/core/test/testers.test.ts
@@ -825,6 +825,17 @@ test('tester isObjectArrayWithNesting', t => {
     }
   };
 
+  const schemaWithOneOfEnum = {
+    type: 'array',
+    items: {
+      type: 'string',
+      oneOf: [
+        { const: 'A', title: 'ENUM A' },
+        { const: 'B', title: 'ENUM B' },
+      ],
+    },
+  }
+
   const uischemaOptions: {
     generate: ControlElement;
     default: ControlElement;
@@ -877,6 +888,8 @@ test('tester isObjectArrayWithNesting', t => {
 
   t.true(isObjectArrayWithNesting(uischema, nestedSchemaWithAnyOf, undefined));
   t.true(isObjectArrayWithNesting(uischema, nestedSchemaWithOneOf, undefined));
+
+  t.false(isObjectArrayWithNesting(undefined,schemaWithOneOfEnum, undefined));
 });
 
 test('tester schemaSubPathMatches', t => {

From 8b6c9d23c21f96737fb66d0a70068c24e55365ad Mon Sep 17 00:00:00 2001
From: LukasBoll <ga24xeg@mytum.de>
Date: Fri, 14 Apr 2023 09:21:46 +0200
Subject: [PATCH 10/17] Array translations for react vanilla, angular-material,
 vue (#2129)

Replace existing hard-coded labels with translation-options for array-control elements for the vanilla, angular-material and vue renderers.
---
 .../src/layouts/array-layout.renderer.ts      | 37 ++++++-------------
 .../src/other/master-detail/master.ts         |  8 +++-
 .../src/other/table.renderer.ts               | 11 ++++--
 .../test/master-detail.spec.ts                |  4 +-
 .../test/table-control.spec.ts                |  4 +-
 packages/core/src/i18n/arrayTranslations.ts   | 16 +++++---
 packages/core/src/util/renderer.ts            |  8 +++-
 .../additional/ListWithDetailMasterItem.tsx   |  4 +-
 .../MaterialListWithDetailRenderer.tsx        |  1 +
 .../src/complex/MaterialTableControl.tsx      | 13 ++++---
 .../src/complex/TableToolbar.tsx              |  2 +-
 .../src/layouts/ArrayToolbar.tsx              |  2 +-
 .../src/layouts/ExpandPanelRenderer.tsx       | 13 ++++---
 .../src/layouts/MaterialArrayLayout.tsx       |  1 +
 .../renderers/MaterialArrayControl.test.tsx   | 12 +++---
 .../renderers/MaterialArrayLayout.test.tsx    | 16 ++++----
 .../src/complex/TableArrayControl.tsx         | 16 ++++----
 .../complex/array/ArrayControlRenderer.tsx    | 21 ++++++-----
 .../test/renderers/TableArrayControl.test.tsx |  2 +-
 .../src/array/ArrayListRenderer.vue           |  2 +-
 20 files changed, 105 insertions(+), 88 deletions(-)

diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/layouts/array-layout.renderer.ts
index ce966145f..35e3a3050 100644
--- a/packages/angular-material/src/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/array-layout.renderer.ts
@@ -31,6 +31,7 @@ import {
 import { JsonFormsAngularService, JsonFormsAbstractControl } from '@jsonforms/angular';
 import {
   ArrayLayoutProps,
+  ArrayTranslations,
   createDefaultValue,
   findUISchema,
   isObjectArrayWithNesting,
@@ -68,15 +69,15 @@ import {
         <span fxFlex></span>
         <button
           mat-button
-          matTooltip="{{ this.addTooltip }}"
+          matTooltip="{{ translations.addTooltip }}"
           [disabled]="!isEnabled()"
           (click)="add()"
-          attr.aria-label="{{ this.addAriaLabel }}"
+          attr.aria-label="{{ translations.addAriaLabel }}"
         >
           <mat-icon>add</mat-icon>
         </button>
       </div>
-      <p *ngIf="noData">{{ this.noDataMessage }}</p>
+      <p *ngIf="noData">{{ translations.noDataMessage }}</p>
       <div
         *ngFor="
           let item of [].constructor(data);
@@ -97,8 +98,8 @@ import {
               mat-button
               [disabled]="first"
               (click)="up(idx)"
-              attr.aria-label="{{ this.upAriaLabel }}"
-              matTooltip="{{ this.upTooltip }}"
+              attr.aria-label="{{ translations.upAriaLabel }}"
+              matTooltip="{{ translations.up }}"
               matTooltipPosition="right"
             >
               <mat-icon>arrow_upward</mat-icon>
@@ -109,8 +110,8 @@ import {
               mat-button
               [disabled]="last"
               (click)="down(idx)"
-              attr.aria-label="{{ this.downAriaLabel }}"
-              matTooltip="{{ this.downTooltip }}"
+              attr.aria-label="{{ translations.downAriaLabel }}"
+              matTooltip="{{ translations.down }}"
               matTooltipPosition="right"
             >
               <mat-icon>arrow_downward</mat-icon>
@@ -119,8 +120,8 @@ import {
               mat-button
               color="warn"
               (click)="remove(idx)"
-              attr.aria-label="{{ this.removeAriaLabel }}"
-              matTooltip="{{ this.removeTooltip }}"
+              attr.aria-label="{{ translations.removeAriaLabel }}"
+              matTooltip="{{ translations.removeTooltip }}"
               matTooltipPosition="right"
             >
               <mat-icon>delete</mat-icon>
@@ -148,16 +149,8 @@ import {
 export class ArrayLayoutRenderer
   extends JsonFormsAbstractControl<StatePropsOfArrayLayout>
   implements OnInit, OnDestroy {
-  addTooltip: string;
-  addAriaLabel: string;
-  noDataMessage: string;
-  removeTooltip: string;
-  removeAriaLabel: string;
-  upTooltip: string;
-  upAriaLabel: string;
-  downTooltip: string;
-  downAriaLabel:string;
   noData: boolean;
+  translations: ArrayTranslations;
   addItem: (path: string, value: any) => () => void;
   moveItemUp: (path: string, index: number) => () => void;
   moveItemDown: (path: string, index: number) => () => void;
@@ -196,15 +189,9 @@ export class ArrayLayoutRenderer
     this.removeItems = removeItems;
   }
   mapAdditionalProps(props: ArrayLayoutProps) {
+    this.translations = props.translations;
     this.noData = !props.data || props.data === 0;
     this.uischemas = props.uischemas;
-    this.addTooltip = `Add to ${this.label}`;
-    this.addAriaLabel = `Add to ${this.label} button`;
-    this.upAriaLabel = `Move ${this.label} up`;
-    this.downAriaLabel = `Move ${this.label} down`;
-    this.removeTooltip = `Delete`;
-    this.removeAriaLabel = `Delete button`;
-    this.noDataMessage = `No data`;
   }
   getProps(index: number): OwnPropsOfRenderer {
     const uischema = findUISchema(
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
index eb99b90e1..613f1249f 100644
--- a/packages/angular-material/src/other/master-detail/master.ts
+++ b/packages/angular-material/src/other/master-detail/master.ts
@@ -31,6 +31,7 @@ import {
 } from '@jsonforms/angular';
 import {
   ArrayControlProps,
+  ArrayTranslations,
   ControlElement,
   createDefaultValue,
   decode,
@@ -64,7 +65,7 @@ export const removeSchemaKeywords = (path: string) => {
       <mat-sidenav mode="side" opened>
         <mat-nav-list>
           <mat-list-item *ngIf="masterItems.length === 0"
-            >No items</mat-list-item
+            >{{ translations.noDataMessage }}</mat-list-item
           >
           <mat-list-item
             *ngFor="
@@ -96,7 +97,7 @@ export const removeSchemaKeywords = (path: string) => {
           (click)="onAddClick()"
           *ngIf="isEnabled()"
         >
-          <mat-icon aria-label="Add item to list">add</mat-icon>
+          <mat-icon [attr.aria-label]="translations.addAriaLabel">add</mat-icon>
         </button>
       </mat-sidenav>
       <mat-sidenav-content class="content">
@@ -149,6 +150,7 @@ export class MasterListComponent extends JsonFormsArrayControl {
   removeItems: (path: string, toDelete: number[]) => () => void;
   propsPath: string;
   highlightedIdx: number;
+  translations: ArrayTranslations;
 
   constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef: ChangeDetectorRef) {
     super(jsonformsService);
@@ -188,6 +190,8 @@ export class MasterListComponent extends JsonFormsArrayControl {
       setReadonly(detailUISchema);
     }
 
+    this.translations=props.translations;
+
     const masterItems = (data || []).map((d: any, index: number) => {
       const labelRefInstancePath = controlElement.options?.labelRef && removeSchemaKeywords(
         controlElement.options.labelRef
diff --git a/packages/angular-material/src/other/table.renderer.ts b/packages/angular-material/src/other/table.renderer.ts
index 62c2542ef..aa6aa68d4 100644
--- a/packages/angular-material/src/other/table.renderer.ts
+++ b/packages/angular-material/src/other/table.renderer.ts
@@ -30,6 +30,7 @@ import {
 } from '@jsonforms/angular';
 import {
   ArrayControlProps,
+  ArrayTranslations,
   ControlElement, createDefaultValue,
   deriveTypes,
   encode,
@@ -57,7 +58,7 @@ import {
       <ng-container matColumnDef="action">
         <tr>
           <th mat-header-cell *matHeaderCellDef>
-            <button mat-button color="primary" (click)="add()" [disabled]="!isEnabled()" matTooltip="Add"><mat-icon>add</mat-icon></button>
+            <button mat-button color="primary" (click)="add()" [disabled]="!isEnabled()" [matTooltip]="translations.addTooltip"><mat-icon>add</mat-icon></button>
           </th>
         </tr>
         <tr>
@@ -68,7 +69,7 @@ import {
               mat-button
               [disabled]="first"
               (click)="up(i)"
-              matTooltip="Move item up"
+              [matTooltip]="translations.upAriaLabel"
               matTooltipPosition="right"
               >
               <mat-icon>arrow_upward</mat-icon>
@@ -79,7 +80,7 @@ import {
               mat-button
               [disabled]="last"
               (click)="down(i)"
-              matTooltip="Move item down"
+              [matTooltip]="translations.downAriaLabel"
               matTooltipPosition="right"
             >
               <mat-icon>arrow_downward</mat-icon>
@@ -90,7 +91,7 @@ import {
                 (click)="remove(i)"
                 [disabled]="!isEnabled()"
                 matTooltipPosition="right"
-                matTooltip="Delete"
+                [matTooltip]="translations.removeTooltip"
             >
               <mat-icon>delete</mat-icon>
             </button>
@@ -126,6 +127,7 @@ export class TableRenderer extends JsonFormsArrayControl {
   moveItemUp: (path: string, index: number) => () => void;
   moveItemDown: (path: string, index: number) => () => void;
   removeItems: (path: string, toDelete: number[]) => () => void;
+  translations: ArrayTranslations;
 
   constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
@@ -139,6 +141,7 @@ export class TableRenderer extends JsonFormsArrayControl {
     if (this.isEnabled()) {
       this.displayedColumns.push('action');
     }
+    this.translations = props.translations;
   }
   getProps(index: number, props: OwnPropsOfRenderer): OwnPropsOfRenderer {
     const rowPath = Paths.compose(props.path, `${index}`);
diff --git a/packages/angular-material/test/master-detail.spec.ts b/packages/angular-material/test/master-detail.spec.ts
index 70739fff8..40ba10ad4 100644
--- a/packages/angular-material/test/master-detail.spec.ts
+++ b/packages/angular-material/test/master-detail.spec.ts
@@ -41,6 +41,7 @@ import { MasterListComponent } from '../src/other/master-detail/master';
 import { JsonFormsDetailComponent } from '../src/other/master-detail/detail';
 import { getJsonFormsService, setupMockStore } from '@jsonforms/angular-test';
 import { Actions } from '@jsonforms/core';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 describe('Master detail', () => {
   let fixture: ComponentFixture<MasterListComponent>;
@@ -114,7 +115,8 @@ describe('Master detail', () => {
         MatIconModule,
         MatButtonModule,
         FlexLayoutModule,
-        NoopAnimationsModule
+        NoopAnimationsModule,
+        MatTooltipModule
       ],
       providers: [JsonFormsAngularService]
     })
diff --git a/packages/angular-material/test/table-control.spec.ts b/packages/angular-material/test/table-control.spec.ts
index 2481e1c38..3b3f9236c 100644
--- a/packages/angular-material/test/table-control.spec.ts
+++ b/packages/angular-material/test/table-control.spec.ts
@@ -42,6 +42,7 @@ import {
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { setupMockStore } from '@jsonforms/angular-test';
 import { createTesterContext } from './util';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 const uischema1: ControlElement = { type: 'Control', scope: '#' };
 const uischema2: ControlElement = {
@@ -127,7 +128,8 @@ describe('Table', () => {
         MatInputModule,
         ReactiveFormsModule,
         FlexLayoutModule,
-        MatTableModule
+        MatTableModule,
+        MatTooltipModule,
       ],
       providers: [JsonFormsAngularService]
     })
diff --git a/packages/core/src/i18n/arrayTranslations.ts b/packages/core/src/i18n/arrayTranslations.ts
index 1ae47f0ff..b4baabdb1 100644
--- a/packages/core/src/i18n/arrayTranslations.ts
+++ b/packages/core/src/i18n/arrayTranslations.ts
@@ -15,7 +15,9 @@ export enum ArrayTranslationEnum{
     deleteDialogTitle = 'deleteDialogTitle',
     deleteDialogMessage = 'deleteDialogMessage',
     deleteDialogAccept = 'deleteDialogAccept',
-    deleteDialogDecline = 'deleteDialogDecline'
+    deleteDialogDecline = 'deleteDialogDecline',
+    up = 'up',
+    down = 'down'
 }
 
 export type ArrayTranslations = {
@@ -24,13 +26,15 @@ export type ArrayTranslations = {
 
 export const arrayDefaultTranslations: ArrayDefaultTranslation[] = [
     {key: ArrayTranslationEnum.addTooltip, default: (input) => input?`Add to ${input}`:'Add'},
-    {key: ArrayTranslationEnum.addAriaLabel, default: (input) => input?`Add to ${input}`:'Add'},
+    {key: ArrayTranslationEnum.addAriaLabel, default: (input) => input?`Add to ${input} button`:'Add button'},
     {key: ArrayTranslationEnum.removeTooltip, default: () => 'Delete'},
-    {key: ArrayTranslationEnum.upAriaLabel, default: (input) => `Move ${input} up`},
-    {key: ArrayTranslationEnum.downAriaLabel, default: (input) => `Move ${input} down`},
     {key: ArrayTranslationEnum.removeAriaLabel, default: () => 'Delete button'},
-    {key: ArrayTranslationEnum.noDataMessage, default: () => 'No Data'},
-    {key: ArrayTranslationEnum.noSelection, default: () => 'No Selection'},
+    {key: ArrayTranslationEnum.upAriaLabel, default: () => `Move item up`},
+    {key: ArrayTranslationEnum.up, default: () => 'Up'},
+    {key: ArrayTranslationEnum.down, default: () => 'Down'},
+    {key: ArrayTranslationEnum.downAriaLabel, default: () => `Move item down`},
+    {key: ArrayTranslationEnum.noDataMessage, default: () => 'No data'},
+    {key: ArrayTranslationEnum.noSelection, default: () => 'No selection'},
     {key: ArrayTranslationEnum.deleteDialogTitle, default: () => 'Confirm Deletion'},
     {key: ArrayTranslationEnum.deleteDialogMessage, default: () => 'Are you sure you want to delete the selected entry?'},
     {key: ArrayTranslationEnum.deleteDialogAccept, default: () => 'Yes'},
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
index d4cddd0d6..6311c8e37 100644
--- a/packages/core/src/util/renderer.ts
+++ b/packages/core/src/util/renderer.ts
@@ -652,6 +652,7 @@ export interface OwnPropsOfMasterListItem {
   schema: JsonSchema;
   handleSelect(index: number): () => void;
   removeItem(path: string, value: number): () => void;
+  translations: ArrayTranslations;
 }
 
 export interface StatePropsOfMasterItem extends OwnPropsOfMasterListItem {
@@ -686,6 +687,7 @@ export interface ControlWithDetailProps
  */
 export interface StatePropsOfArrayControl
   extends StatePropsOfControlWithDetail {
+  translations: ArrayTranslations;
   childErrors?: ErrorObject[];
 }
 
@@ -700,23 +702,25 @@ export const mapStateToArrayControlProps = (
   state: JsonFormsState,
   ownProps: OwnPropsOfControl
 ): StatePropsOfArrayControl => {
-  const { path, schema, uischema, ...props } = mapStateToControlWithDetailProps(
+  const { path, schema, uischema, i18nKeyPrefix, label, ...props } = mapStateToControlWithDetailProps(
     state,
     ownProps
   );
 
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
   const childErrors = getSubErrorsAt(path, resolvedSchema)(state);
-
+  const t = getTranslator()(state);
 
   return {
     ...props,
+    label,
     path,
     uischema,
     schema: resolvedSchema,
     childErrors,
     renderers: ownProps.renderers || getRenderers(state),
     cells: ownProps.cells || getCells(state),
+    translations: getArrayTranslations(t,arrayDefaultTranslations,i18nKeyPrefix, label)
   };
 };
 
diff --git a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
index 8d3123151..e66154af1 100644
--- a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
+++ b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
@@ -35,7 +35,7 @@ import {
 import DeleteIcon from '@mui/icons-material/Delete';
 import React from 'react';
 
-const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path }: StatePropsOfMasterItem) => {
+const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path, translations }: StatePropsOfMasterItem) => {
     return (
         <ListItem
             button
@@ -47,7 +47,7 @@ const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, r
             </ListItemAvatar>
             <ListItemText primary={childLabel} />
             <ListItemSecondaryAction>
-                <IconButton aria-label='Delete' onClick={removeItem(path, index)} size='large'>
+                <IconButton aria-label={translations.removeAriaLabel} onClick={removeItem(path, index)} size='large'>
                     <DeleteIcon />
                 </IconButton>
             </ListItemSecondaryAction>
diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
index 865f442b0..7050f899a 100644
--- a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
+++ b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -130,6 +130,7 @@ export const MaterialListWithDetailRenderer = ({
                   removeItem={handleRemoveItem}
                   selected={selectedIndex === index}
                   key={index}
+                  translations={translations}
                 />
               ))
             ) : (
diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
index c248f74c3..059e790e2 100644
--- a/packages/material-renderers/src/complex/MaterialTableControl.tsx
+++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -260,9 +260,10 @@ interface NonEmptyRowProps {
   enabled: boolean;
   cells?: JsonFormsCellRendererRegistryEntry[];
   path: string;
+  translations: ArrayTranslations
 }
 
-const NonEmptyRowComponent = 
+const NonEmptyRowComponent =
   ({
     childPath,
     schema,
@@ -275,7 +276,8 @@ const NonEmptyRowComponent =
     showSortButtons,
     enabled,
     cells,
-    path
+    path,
+    translations
   }: NonEmptyRowProps & WithDeleteDialogSupport) => {
     const moveUp = useMemo(() => moveUpCreator(path, rowIndex),[moveUpCreator, path, rowIndex]);
     const moveDown = useMemo(() => moveDownCreator(path, rowIndex),[moveDownCreator, path, rowIndex]);
@@ -295,13 +297,13 @@ const NonEmptyRowComponent =
               {showSortButtons ? (
                 <Fragment>
                   <Grid item>
-                    <IconButton aria-label={`Move up`} onClick={moveUp} disabled={!enableUp} size='large'>
+                    <IconButton aria-label={translations.upAriaLabel} onClick={moveUp} disabled={!enableUp} size='large'>
                       <ArrowUpward />
                     </IconButton>
                   </Grid>
                   <Grid item>
                     <IconButton
-                      aria-label={`Move down`}
+                      aria-label={translations.downAriaLabel}
                       onClick={moveDown}
                       disabled={!enableDown}
                       size='large'>
@@ -312,7 +314,7 @@ const NonEmptyRowComponent =
               ) : null}
               <Grid item>
                 <IconButton
-                  aria-label={`Delete`}
+                  aria-label={translations.removeAriaLabel}
                   onClick={() => openDeleteDialog(childPath, rowIndex)}
                   size='large'>
                   <DeleteIcon />
@@ -378,6 +380,7 @@ const TableRows = ({
             enabled={enabled}
             cells={cells}
             path={path}
+            translations={translations}
           />
         );
       })}
diff --git a/packages/material-renderers/src/complex/TableToolbar.tsx b/packages/material-renderers/src/complex/TableToolbar.tsx
index 2611965b5..69bb3adf6 100644
--- a/packages/material-renderers/src/complex/TableToolbar.tsx
+++ b/packages/material-renderers/src/complex/TableToolbar.tsx
@@ -99,7 +99,7 @@ const TableToolbar = React.memo(
             placement='bottom'
           >
             <IconButton
-              aria-label={translations.addTooltip}
+              aria-label={translations.addAriaLabel}
               onClick={addItem(path, createDefaultValue(schema))}
               size='large'>
               <AddIcon />
diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
index 3ab27851f..3e11048d8 100644
--- a/packages/material-renderers/src/layouts/ArrayToolbar.tsx
+++ b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
@@ -46,7 +46,7 @@ export const ArrayLayoutToolbar = React.memo(
                   placement='bottom'
                 >
                   <IconButton
-                    aria-label={translations.addTooltip}
+                    aria-label={translations.addAriaLabel}
                     onClick={addItem(path, createDefault())}
                     size='large'>
                     <AddIcon />
diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
index f57e3474a..748d86ac5 100644
--- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -20,7 +20,8 @@ import {
   JsonFormsUISchemaRegistryEntry,
   getFirstPrimitiveProp,
   createId,
-  removeId
+  removeId,
+  ArrayTranslations
 } from '@jsonforms/core';
 import {
   Accordion,
@@ -53,6 +54,7 @@ interface OwnPropsOfExpandPanel {
   config: any;
   childLabelProp?: string;
   handleExpansion(panel: string): (event: any, expanded: boolean) => void;
+  translations: ArrayTranslations;
 }
 
 interface StatePropsOfExpandPanel extends OwnPropsOfExpandPanel {
@@ -103,7 +105,8 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
     uischemas,
     renderers,
     cells,
-    config
+    config,
+    translations
   } = props;
 
   const foundUISchema = useMemo(
@@ -157,7 +160,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           onClick={moveUp(path, index)}
                           style={iconStyle}
                           disabled={!enableMoveUp}
-                          aria-label={`Move up`}
+                          aria-label={translations.upAriaLabel}
                           size='large'>
                           <ArrowUpward />
                         </IconButton>
@@ -167,7 +170,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           onClick={moveDown(path, index)}
                           style={iconStyle}
                           disabled={!enableMoveDown}
-                          aria-label={`Move down`}
+                          aria-label={translations.downAriaLabel}
                           size='large'>
                           <ArrowDownward />
                         </IconButton>
@@ -180,7 +183,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                     <IconButton
                       onClick={removeItems(path, [index])}
                       style={iconStyle}
-                      aria-label={`Delete`}
+                      aria-label={translations.removeAriaLabel}
                       size='large'>
                       <DeleteIcon />
                     </IconButton>
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
index c910edf2f..0d9a0397f 100644
--- a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -102,6 +102,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
                 config={config}
                 childLabelProp={appliedUiSchemaOptions.elementLabelProp}
                 uischemas={uischemas}
+                translations={translations}
               />
             );
           })
diff --git a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
index fbe217a9c..4b5f6d482 100644
--- a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
@@ -487,11 +487,11 @@ describe('Material array control', () => {
     );
     // up button
     expect(
-      wrapper.find('button').find({ 'aria-label': 'Move up' }).length
+      wrapper.find('button').find({ 'aria-label': 'Move item up' }).length
     ).toBe(1);
     // down button
     expect(
-      wrapper.find('button').find({ 'aria-label': 'Move down' }).length
+      wrapper.find('button').find({ 'aria-label': 'Move item down' }).length
     ).toBe(1);
   });
   it('should be able to move item down if down button is clicked', () => {
@@ -517,7 +517,7 @@ describe('Material array control', () => {
       .find('tr')
       .at(1)
       .find('button')
-      .find({ 'aria-label': 'Move down' });
+      .find({ 'aria-label': 'Move item down' });
     downButton.simulate('click');
     expect(onChangeData.data).toEqual({
       test: ['baz', 'foo', 'bar']
@@ -546,7 +546,7 @@ describe('Material array control', () => {
       .find('tr')
       .at(3)
       .find('button')
-      .find({ 'aria-label': 'Move up' });
+      .find({ 'aria-label': 'Move item up' });
     upButton.simulate('click');
     expect(onChangeData.data).toEqual({
       test: ['foo', 'bar', 'baz']
@@ -567,7 +567,7 @@ describe('Material array control', () => {
       .find('tr')
       .at(1)
       .find('button')
-      .find({ 'aria-label': 'Move up' });
+      .find({ 'aria-label': 'Move item up' });
     expect(upButton.is('[disabled]')).toBe(true);
   });
 
@@ -627,7 +627,7 @@ describe('Material array control', () => {
       .find('tr')
       .at(3)
       .find('button')
-      .find({ 'aria-label': 'Move down' });
+      .find({ 'aria-label': 'Move item down' });
     expect(downButton.is('[disabled]')).toBe(true);
   });
 });
diff --git a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
index 8e9849b84..ea1e349ff 100644
--- a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
@@ -322,7 +322,7 @@ describe('Material array layout', () => {
         .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
-        .find({ 'aria-label': 'Move up' }).length
+        .find({ 'aria-label': 'Move item up' }).length
     ).toBe(1);
     // down button
     expect(
@@ -330,7 +330,7 @@ describe('Material array layout', () => {
         .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
-        .find({ 'aria-label': 'Move down' }).length
+        .find({ 'aria-label': 'Move item down' }).length
     ).toBe(1);
   });
   it('should render sort buttons if showSortButtons is true in config', () => {
@@ -352,7 +352,7 @@ describe('Material array layout', () => {
         .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
-        .find({ 'aria-label': 'Move up' }).length
+        .find({ 'aria-label': 'Move item up' }).length
     ).toBe(1);
     // down button
     expect(
@@ -360,7 +360,7 @@ describe('Material array layout', () => {
         .find('Memo(ExpandPanelRendererComponent)')
         .at(0)
         .find('button')
-        .find({ 'aria-label': 'Move down' }).length
+        .find({ 'aria-label': 'Move item down' }).length
     ).toBe(1);
   });
   it('should move item up if up button is presses', (done) => {
@@ -387,7 +387,7 @@ describe('Material array layout', () => {
       .find('Memo(ExpandPanelRendererComponent)')
       .at(1)
       .find('button')
-      .find({ 'aria-label': 'Move up' });
+      .find({ 'aria-label': 'Move item up' });
     upButton.simulate('click');
     // events are debounced for some time, so let's wait
     setTimeout(() => {
@@ -428,7 +428,7 @@ describe('Material array layout', () => {
       .find('Memo(ExpandPanelRendererComponent)')
       .at(0)
       .find('button')
-      .find({ 'aria-label': 'Move down' });
+      .find({ 'aria-label': 'Move item down' });
     upButton.simulate('click');
     // events are debounced for some time, so let's wait
     setTimeout(() => {
@@ -462,7 +462,7 @@ describe('Material array layout', () => {
       .find('Memo(ExpandPanelRendererComponent)')
       .at(0)
       .find('button')
-      .find({ 'aria-label': 'Move up' });
+      .find({ 'aria-label': 'Move item up' });
     expect(upButton.is('[disabled]')).toBe(true);
   });
   it('should have down button disabled for last element', () => {
@@ -482,7 +482,7 @@ describe('Material array layout', () => {
       .find('Memo(ExpandPanelRendererComponent)')
       .at(1)
       .find('button')
-      .find({ 'aria-label': 'Move down' });
+      .find({ 'aria-label': 'Move item down' });
     expect(downButton.is('[disabled]')).toBe(true);
   });
 
diff --git a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
index 865822ff1..4a1160fd1 100644
--- a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
+++ b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
@@ -46,7 +46,7 @@ import { DispatchCell, withJsonFormsArrayControlProps } from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
 import type { VanillaRendererProps } from '../index';
 
-const { createLabelDescriptionFrom, convertToValidClassName } = Helpers;
+const { convertToValidClassName } = Helpers;
 
 const { or, isObjectArrayControl, isPrimitiveArrayControl, rankWith } = Test;
 
@@ -79,7 +79,8 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
       errors,
       label,
       getStyleAsClassName,
-      childErrors
+      childErrors,
+      translations
     } = this.props;
 
     const controlElement = uischema as ControlElement;
@@ -96,7 +97,6 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
       label: false,
       scope: schema.type === 'object' ? `#/properties/${key}` : '#'
     });
-    const labelObject = createLabelDescriptionFrom(controlElement, schema);
     const isValid = errors.length === 0;
     const divClassNames = [validationClass]
       .concat(isValid ? '' : getStyleAsClassName('array.table.validation.error'))
@@ -110,7 +110,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
             className={buttonClass}
             onClick={addItem(path, createDefaultValue(schema))}
           >
-            Add to {labelObject.text}
+            {translations.addTooltip}
           </button>
         </header>
         <div className={divClassNames}>
@@ -135,7 +135,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
           <tbody>
             {!data || !Array.isArray(data) || data.length === 0 ? (
               <tr>
-                <td>No data</td>
+                <td>{translations.noDataMessage}</td>
               </tr>
             ) : (
                 data.map((_child, index) => {
@@ -205,14 +205,14 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                       </td>
                       <td>
                         <button
-                          aria-label={`Delete`}
+                          aria-label={translations.removeAriaLabel}
                           onClick={() => {
-                            if (window.confirm('Are you sure you wish to delete this item?')) {
+                            if (window.confirm(translations.deleteDialogMessage)) {
                               this.confirmDelete(childPath, index);
                             }
                           }}
                         >
-                          Delete
+                          {translations.removeTooltip}
                         </button>
                       </td>
                     </tr>
diff --git a/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx b/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
index 80ef7f8f8..d4552188c 100644
--- a/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
+++ b/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
@@ -46,7 +46,8 @@ export const ArrayControl = ({
   uischemas,
   getStyleAsClassName,
   renderers,
-  rootSchema
+  rootSchema,
+  translations
 }: ArrayControlProps & VanillaRendererProps) => {
 	
   const controlElement = uischema as ControlElement;
@@ -99,30 +100,30 @@ export const ArrayControl = ({
                 <div className={childControlsClass}>
                   <button
                     className={buttonClassUp}
-              	    aria-label={`Up`}
+              	    aria-label={translations.upAriaLabel}
                     onClick={() => {
                       moveUp(path,index)();
-                  }}>Up</button>
+                  }}>{translations.up}</button>
                   <button
                     className={buttonClassDown}
-                    aria-label={`Down`}
+                    aria-label={translations.downAriaLabel}
                     onClick={() => {
                       moveDown(path,index)();
-                  }}>Down</button>
+                  }}>{translations.down}</button>
                   <button
                     className={buttonClassDelete}
-                    aria-label={`Delete`}
+                    aria-label={translations.removeAriaLabel}
                     onClick={() => {
                       if (window.confirm('Are you sure you wish to delete this item?')) {
                         removeItems(path,[index])();
                       }
-                  }}>Delete</button>
+                  }}>{translations.removeTooltip}</button>
                 </div>
               </div>
             );
           })
         ) : (
-            <p>No data</p>
+            <p>{translations.noDataMessage}</p>
         )}
       </div>
     </div>
@@ -147,7 +148,8 @@ export const ArrayControlRenderer =
         id,
         visible,
         enabled,
-        errors
+        errors,
+        translations
     }: ArrayControlProps & VanillaRendererProps) => {
         const controlElement = uischema as ControlElement;
         const labelDescription = Helpers.createLabelDescriptionFrom(controlElement, schema);
@@ -184,6 +186,7 @@ export const ArrayControlRenderer =
                 visible={visible}
                 enabled={enabled}
                 getStyle={getStyle}
+                translations={translations}
             />
         );
     };
diff --git a/packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx b/packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx
index 87094cb46..632d5b923 100644
--- a/packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx
@@ -286,7 +286,7 @@ describe('Table array control', () => {
 
     const button = legendChildren.item(1);
     expect(button.tagName).toBe('BUTTON');
-    expect(button.textContent).toBe('Add to Test');
+    expect(button.textContent).toBe('Add');
 
     const table = wrapper.find('table').getDOMNode();
     const tableChildren = table.children;
diff --git a/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue b/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
index 90c8e4aec..4f390c7f8 100644
--- a/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
+++ b/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
@@ -37,7 +37,7 @@
       </array-list-element>
     </div>
     <div v-if="noData" :class="styles.arrayList.noData">
-      No data
+      {{control.translations.noDataMessage}}
     </div>
   </fieldset>
 </template>

From 39b4dc682abbbd19581e4b6273d886a89cdf876a Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Fri, 14 Apr 2023 12:48:42 +0200
Subject: [PATCH 11/17] Replace TSLint with ESLint and Prettier configuration

- Remove TSLint dependencies and config
- Add ESLint and Prettier dependencies and config for all packages
- Add markdownlint to recommended extensions
- Use ESLint 7.x instead of 8.x because the Angular eslint plugin
  for Angular 12 does not work with ESLint 8.x

Disabled rules for to be re-enabled later:
- explicit any warnings
- no-prototype-builtins rule
- import/no-named-as-default for 2 packages
  - vanilla-renderers
  - material-renderers

Part of #1551
---
 .devcontainer/devcontainer.json               |   18 +-
 .prettierrc                                   |    2 -
 .prettierrc.js                                |    6 +
 .vscode/extensions.json                       |    9 +-
 .vscode/settings.json                         |   49 +-
 package-lock.json                             | 3630 ++++++++++++++---
 package.json                                  |    8 +-
 packages/angular-material/.eslintrc.js        |   38 +
 packages/angular-material/.prettierrc.js      |    6 +
 packages/angular-material/package.json        |   15 +-
 packages/angular-test/.eslintrc.js            |   38 +
 packages/angular-test/.prettierrc.js          |    6 +
 packages/angular-test/package.json            |   11 +
 packages/angular/.eslintrc.js                 |   38 +
 packages/angular/.prettierrc.js               |    6 +
 packages/angular/package.json                 |   15 +-
 .../angular/src/jsonforms-root.component.ts   |    1 -
 packages/core/.eslintrc.js                    |   36 +
 packages/core/.prettierrc.js                  |    6 +
 packages/core/package.json                    |   11 +-
 packages/core/src/reducers/core.ts            |    1 -
 packages/examples-react/.eslintrc.js          |   40 +
 packages/examples-react/.prettierrc.js        |    6 +
 packages/examples-react/package.json          |   12 +
 packages/examples/.eslintrc.js                |   29 +
 packages/examples/.prettierrc.js              |    6 +
 packages/examples/package.json                |   11 +-
 packages/material-renderers/.eslintrc.js      |   41 +
 packages/material-renderers/.prettierrc.js    |    6 +
 packages/material-renderers/package.json      |   13 +-
 packages/react/.eslintrc.js                   |   40 +
 packages/react/.prettierrc.js                 |    6 +
 packages/react/package.json                   |   12 +-
 packages/react/src/Control.ts                 |    2 -
 packages/vanilla-renderers/.eslintrc.js       |   36 +
 packages/vanilla-renderers/.prettierrc.js     |    6 +
 packages/vanilla-renderers/package.json       |   13 +-
 packages/vue/vue-vanilla/.eslintrc.js         |   36 +
 packages/vue/vue-vanilla/.prettierrc.js       |    6 +
 packages/vue/vue-vanilla/package.json         |   11 +
 packages/vue/vue/.eslintrc.js                 |   36 +
 packages/vue/vue/.prettierrc.js               |    6 +
 packages/vue/vue/package.json                 |   11 +
 tslint.json                                   |  147 -
 44 files changed, 3615 insertions(+), 867 deletions(-)
 delete mode 100644 .prettierrc
 create mode 100644 .prettierrc.js
 create mode 100644 packages/angular-material/.eslintrc.js
 create mode 100644 packages/angular-material/.prettierrc.js
 create mode 100644 packages/angular-test/.eslintrc.js
 create mode 100644 packages/angular-test/.prettierrc.js
 create mode 100644 packages/angular/.eslintrc.js
 create mode 100644 packages/angular/.prettierrc.js
 create mode 100644 packages/core/.eslintrc.js
 create mode 100644 packages/core/.prettierrc.js
 create mode 100644 packages/examples-react/.eslintrc.js
 create mode 100644 packages/examples-react/.prettierrc.js
 create mode 100644 packages/examples/.eslintrc.js
 create mode 100644 packages/examples/.prettierrc.js
 create mode 100644 packages/material-renderers/.eslintrc.js
 create mode 100644 packages/material-renderers/.prettierrc.js
 create mode 100644 packages/react/.eslintrc.js
 create mode 100644 packages/react/.prettierrc.js
 create mode 100644 packages/vanilla-renderers/.eslintrc.js
 create mode 100644 packages/vanilla-renderers/.prettierrc.js
 create mode 100644 packages/vue/vue-vanilla/.eslintrc.js
 create mode 100644 packages/vue/vue-vanilla/.prettierrc.js
 create mode 100644 packages/vue/vue/.eslintrc.js
 create mode 100644 packages/vue/vue/.prettierrc.js
 delete mode 100644 tslint.json

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 19e9da319..0337654b0 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -11,18 +11,14 @@
 	},
 	// Set *default* container specific settings.json values on container create.
 	// Add the IDs of extensions you want installed when the container is created.
-	"extensions": [
-		"esbenp.prettier-vscode",
-		"ms-vscode.vscode-typescript-tslint-plugin",
-		"vue.volar"
-	],
-	"settings": {
-		"editor.formatOnSave": false,
-		"editor.defaultFormatter": "esbenp.prettier-vscode",
-		"prettier.jsxSingleQuote": true,
-		"prettier.singleQuote": true
+	"customizations": {
+		"extensions": [
+			"DavidAnson.vscode-markdownlint",
+			"dbaeumer.vscode-eslint",
+			"esbenp.prettier-vscode",
+			"vue.volar"
+		]
 	},
-	
 	// Use 'postCreateCommand' to run commands after the container is created.
 	"postCreateCommand": "npm ci && npm run init && npm run build",
 	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
diff --git a/.prettierrc b/.prettierrc
deleted file mode 100644
index 93fff0417..000000000
--- a/.prettierrc
+++ /dev/null
@@ -1,2 +0,0 @@
-singleQuote: true
-jsxSingleQuote: true
\ No newline at end of file
diff --git a/.prettierrc.js b/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 6bc77f479..157515469 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -1,14 +1,13 @@
 {
   // See http://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
   // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
-
   // List of extensions which should be recommended for users of this workspace.
   "recommendations": [
+    "DavidAnson.vscode-markdownlint",
+    "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "ms-vscode.vscode-typescript-tslint-plugin",
-    "ms-vscode-remote.remote-containers"
-    
+    "ms-vscode-remote.remote-containers",
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
-}
+}
\ No newline at end of file
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 34caaf616..106611d51 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,6 +1,49 @@
 {
-    "editor.formatOnSave": false,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue"
+  ],
+  "[javascript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
-    "prettier.jsxSingleQuote": true,
-    "prettier.singleQuote": true
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+  },
+  "[json]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+  },
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.codeActionsOnSave": {
+      "source.fixAll.eslint": true
+    },
+  },
+  "search.exclude": {
+    "**/docs": true,
+    "**/node_modules": true,
+    "**/lib": true
+  },
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 1554df93e..a5944fb51 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,92 @@
         }
       }
     },
+    "@angular-eslint/bundled-angular-compiler": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/bundled-angular-compiler/-/bundled-angular-compiler-12.7.0.tgz",
+      "integrity": "sha512-n7nUSIK+bl2DQXIPRyts/xVTw94Mk0rRNd2WBCL9ni27XKOhKtTdP7tLpD+nAiuY4BTTJr7/yTzPWCCRDQgWZg=="
+    },
+    "@angular-eslint/eslint-plugin": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin/-/eslint-plugin-12.7.0.tgz",
+      "integrity": "sha512-TTTimCddON6TdGw3NDglgWqnrP2VLFiAA+FJAg/iiCKKVI+XOddtpDXmeHmas8cHIJXJH1WNxrae394DpThiOA==",
+      "requires": {
+        "@angular-eslint/utils": "12.7.0",
+        "@typescript-eslint/experimental-utils": "4.28.2"
+      }
+    },
+    "@angular-eslint/eslint-plugin-template": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/eslint-plugin-template/-/eslint-plugin-template-12.7.0.tgz",
+      "integrity": "sha512-G/UIifRNZuk0Vc3Q2bjAvRa2MMMCSuSzW3E9QAvSr0n4QkhIJwDJvyR/KV1ubswgHB0RRkYcfGQ8d6VKA5Vqjw==",
+      "requires": {
+        "@angular-eslint/bundled-angular-compiler": "12.7.0",
+        "@typescript-eslint/experimental-utils": "4.28.2",
+        "aria-query": "^4.2.2",
+        "axobject-query": "^2.2.0"
+      }
+    },
+    "@angular-eslint/schematics": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/schematics/-/schematics-12.7.0.tgz",
+      "integrity": "sha512-qt5OiCk5kTr+l8XG+WJxLhwvZMT5MWPBCK/rknCpIEd4z2HkOK24Cttuj3jdOYJ3abQ0ha4SiIne5LkrEZBoLw==",
+      "requires": {
+        "@angular-eslint/eslint-plugin": "12.7.0",
+        "@angular-eslint/eslint-plugin-template": "12.7.0",
+        "ignore": "5.1.9",
+        "strip-json-comments": "3.1.1",
+        "tmp": "0.2.1"
+      },
+      "dependencies": {
+        "ignore": {
+          "version": "5.1.9",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.9.tgz",
+          "integrity": "sha512-2zeMQpbKz5dhZ9IwL0gbxSW5w0NK/MSAMtNuhgIHEPmaU3vPdKPL0UdvUCXs5SS4JAwsBxysK5sFMW8ocFiVjQ=="
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
+        },
+        "tmp": {
+          "version": "0.2.1",
+          "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz",
+          "integrity": "sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==",
+          "requires": {
+            "rimraf": "^3.0.0"
+          }
+        }
+      }
+    },
+    "@angular-eslint/template-parser": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/template-parser/-/template-parser-12.7.0.tgz",
+      "integrity": "sha512-bTGRZ/2m2Z/MCoazWnpbPWLSBK8AsnHCuCXAgiiveYql0GD+PySP1EkBuiWesIyxCsYdzf4aQciJSVuQRo9jEQ==",
+      "requires": {
+        "@angular-eslint/bundled-angular-compiler": "12.7.0",
+        "eslint-scope": "^5.1.0"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        }
+      }
+    },
+    "@angular-eslint/utils": {
+      "version": "12.7.0",
+      "resolved": "https://registry.npmjs.org/@angular-eslint/utils/-/utils-12.7.0.tgz",
+      "integrity": "sha512-1yyRxtxXg6VoyU8wUDcaZEdN7oDE0pRRCUZsQBGungPSv5PQt4nlv+9ZnjJ93rVMEoGztHD2CBWeoRtNlqvg4A==",
+      "requires": {
+        "@angular-eslint/bundled-angular-compiler": "12.7.0",
+        "@typescript-eslint/experimental-utils": "4.28.2"
+      }
+    },
     "@angular/animations": {
       "version": "12.2.17",
       "resolved": "https://registry.npmjs.org/@angular/animations/-/animations-12.2.17.tgz",
@@ -111,9 +197,9 @@
           }
         },
         "semver": {
-          "version": "7.3.8",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-          "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -137,9 +223,9 @@
           "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         },
         "yargs": {
-          "version": "17.6.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
-          "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==",
+          "version": "17.7.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.1.tgz",
+          "integrity": "sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==",
           "requires": {
             "cliui": "^8.0.1",
             "escalade": "^3.1.1",
@@ -316,17 +402,54 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.20.5.tgz",
-      "integrity": "sha512-3RCdA/EmEaikrhayahwToF0fpweU/8o2p8vhc1c/1kftHOdTKuC65kik/TLc+qfbS8JKw4qqJbne4ovICDhmww==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.21.4.tgz",
+      "integrity": "sha512-46QrX2CQlaFRF4TkwfTt6nJD7IHq8539cCL7SDpqWSDeJKY1xylKKY5F/33mJhLZ3mFvKv2gGrVS6NkyF6qs+Q==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.19.0",
-        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-function-name": "^7.21.0",
+        "@babel/helper-member-expression-to-functions": "^7.21.0",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/helper-replace-supers": "^7.19.1",
+        "@babel/helper-replace-supers": "^7.20.7",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
         "@babel/helper-split-export-declaration": "^7.18.6"
+      },
+      "dependencies": {
+        "@babel/helper-function-name": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+          "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+          "requires": {
+            "@babel/template": "^7.20.7",
+            "@babel/types": "^7.21.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/template": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+          "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+          "requires": {
+            "@babel/code-frame": "^7.18.6",
+            "@babel/parser": "^7.20.7",
+            "@babel/types": "^7.20.7"
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
@@ -382,11 +505,23 @@
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.9.tgz",
-      "integrity": "sha512-RxifAh2ZoVU67PyKIO4AMi1wTenGfMR/O/ae0CCRqwgBAt5v7xjdtRw7UoSbsreKrQn5t7r89eruK/9JjYHuDg==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.21.0.tgz",
+      "integrity": "sha512-Muu8cdZwNN6mRRNG6lAYErJ5X3bRevgYR2O8wN0yn7jJSnGDu6eG59RfT29JHxGUovyfrh6Pj0XzmR7drNVL3Q==",
       "requires": {
-        "@babel/types": "^7.18.9"
+        "@babel/types": "^7.21.0"
+      },
+      "dependencies": {
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-module-imports": {
@@ -437,15 +572,90 @@
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.19.1",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.19.1.tgz",
-      "integrity": "sha512-T7ahH7wV0Hfs46SFh5Jz3s0B6+o8g3c+7TMxu7xKfmHikg7EAZ3I2Qk9LFhjxXq8sL7UkP5JflezNwoZa8WvWw==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.20.7.tgz",
+      "integrity": "sha512-vujDMtB6LVfNW13jhlCrp48QNslK6JXi7lQG736HVbHz/mbf4Dc7tIRh1Xf5C0rF7BP8iiSxGMCmY6Ci1ven3A==",
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-member-expression-to-functions": "^7.18.9",
+        "@babel/helper-member-expression-to-functions": "^7.20.7",
         "@babel/helper-optimise-call-expression": "^7.18.6",
-        "@babel/traverse": "^7.19.1",
-        "@babel/types": "^7.19.0"
+        "@babel/template": "^7.20.7",
+        "@babel/traverse": "^7.20.7",
+        "@babel/types": "^7.20.7"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.4.tgz",
+          "integrity": "sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==",
+          "requires": {
+            "@babel/types": "^7.21.4",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+          "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+          "requires": {
+            "@babel/template": "^7.20.7",
+            "@babel/types": "^7.21.0"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/template": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+          "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+          "requires": {
+            "@babel/code-frame": "^7.18.6",
+            "@babel/parser": "^7.20.7",
+            "@babel/types": "^7.20.7"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.4.tgz",
+          "integrity": "sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==",
+          "requires": {
+            "@babel/code-frame": "^7.21.4",
+            "@babel/generator": "^7.21.4",
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-function-name": "^7.21.0",
+            "@babel/helper-hoist-variables": "^7.18.6",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/parser": "^7.21.4",
+            "@babel/types": "^7.21.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          },
+          "dependencies": {
+            "@babel/code-frame": {
+              "version": "7.21.4",
+              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+              "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+              "requires": {
+                "@babel/highlight": "^7.18.6"
+              }
+            }
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/helper-simple-access": {
@@ -532,19 +742,32 @@
       }
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.18.9.tgz",
-      "integrity": "sha512-AHrP9jadvH7qlOj6PINbgSuphjQUAK7AOT7DPjBo9EHoLhQTnnK5u45e1Hd4DbSQEO9nqPWtQ89r+XEOWFScKg==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.20.7.tgz",
+      "integrity": "sha512-sbr9+wNE5aXMBBFBICk01tt7sBf2Oc9ikRFEcem/ZORup9IMUdNhW7/wVLEbbtlWOsEubJet46mHAL2C8+2jKQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
-        "@babel/plugin-proposal-optional-chaining": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+        "@babel/plugin-proposal-optional-chaining": "^7.20.7"
+      },
+      "dependencies": {
+        "@babel/plugin-proposal-optional-chaining": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+          "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.20.2",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+            "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+          }
+        }
       }
     },
     "@babel/plugin-proposal-async-generator-functions": {
       "version": "7.20.1",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.1.tgz",
       "integrity": "sha512-Gh5rchzSwE4kC+o/6T8waD0WHEQIsDmjltY8WnWRXHUdH8axZhuH86Ov9M72YhJfDrZseQwuuWaaIT/TmePp3g==",
+      "dev": true,
       "requires": {
         "@babel/helper-environment-visitor": "^7.18.9",
         "@babel/helper-plugin-utils": "^7.19.0",
@@ -562,25 +785,25 @@
       }
     },
     "@babel/plugin-proposal-class-static-block": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.18.6.tgz",
-      "integrity": "sha512-+I3oIiNxrCpup3Gi8n5IGMwj0gOCAjcJUSQEcotNnCCPMEnixawOQ+KeJPlgfjzx+FKQ1QSyZOWe7wmoJp7vhw==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-class-static-block/-/plugin-proposal-class-static-block-7.21.0.tgz",
+      "integrity": "sha512-XP5G9MWNUskFuP30IfFSEFB0Z6HzLIUcjYM4bYOPHXl7eiJ9HFv8tWj6TXTN5QODiEhDZAeI4hLok2iHFFV4hw==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-class-static-block": "^7.14.5"
       }
     },
     "@babel/plugin-proposal-decorators": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.20.5.tgz",
-      "integrity": "sha512-Lac7PpRJXcC3s9cKsBfl+uc+DYXU5FD06BrTFunQO6QIQT+DwyzDPURAowI3bcvD1dZF/ank1Z5rstUJn3Hn4Q==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-decorators/-/plugin-proposal-decorators-7.21.0.tgz",
+      "integrity": "sha512-MfgX49uRrFUTL/HvWtmx3zmpyzMMr4MTj3d527MLlr/4RTT9G/ytFFP7qet2uM2Ve03b+BkpWUpK+lRXnQ+v9w==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.20.5",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
         "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-replace-supers": "^7.19.1",
+        "@babel/helper-replace-supers": "^7.20.7",
         "@babel/helper-split-export-declaration": "^7.18.6",
-        "@babel/plugin-syntax-decorators": "^7.19.0"
+        "@babel/plugin-syntax-decorators": "^7.21.0"
       }
     },
     "@babel/plugin-proposal-dynamic-import": {
@@ -611,11 +834,11 @@
       }
     },
     "@babel/plugin-proposal-logical-assignment-operators": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.18.9.tgz",
-      "integrity": "sha512-128YbMpjCrP35IOExw2Fq+x55LMP42DzhOhX2aNNIdI9avSWl2PI0yuBWarr3RYpZBSPtabfadkH2yeRiMD61Q==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-logical-assignment-operators/-/plugin-proposal-logical-assignment-operators-7.20.7.tgz",
+      "integrity": "sha512-y7C7cZgpMIjWlKE5T7eJwp+tnRYM89HmRvWM5EQuB5BoHEONjmQ8lSNmBUwOyy/GFRsohJED51YBF79hE1djug==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-logical-assignment-operators": "^7.10.4"
       }
     },
@@ -638,15 +861,54 @@
       }
     },
     "@babel/plugin-proposal-object-rest-spread": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.2.tgz",
-      "integrity": "sha512-Ks6uej9WFK+fvIMesSqbAto5dD8Dz4VuuFvGJFKgIGSkJuRGcrwGECPA1fDgQK3/DbExBJpEkTeYeB8geIFCSQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz",
+      "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==",
       "requires": {
-        "@babel/compat-data": "^7.20.1",
-        "@babel/helper-compilation-targets": "^7.20.0",
+        "@babel/compat-data": "^7.20.5",
+        "@babel/helper-compilation-targets": "^7.20.7",
         "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-        "@babel/plugin-transform-parameters": "^7.20.1"
+        "@babel/plugin-transform-parameters": "^7.20.7"
+      },
+      "dependencies": {
+        "@babel/helper-compilation-targets": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz",
+          "integrity": "sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==",
+          "requires": {
+            "@babel/compat-data": "^7.21.4",
+            "@babel/helper-validator-option": "^7.21.0",
+            "browserslist": "^4.21.3",
+            "lru-cache": "^5.1.1",
+            "semver": "^6.3.0"
+          },
+          "dependencies": {
+            "@babel/compat-data": {
+              "version": "7.21.4",
+              "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.4.tgz",
+              "integrity": "sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g=="
+            }
+          }
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+          "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ=="
+        },
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        }
       }
     },
     "@babel/plugin-proposal-optional-catch-binding": {
@@ -662,6 +924,7 @@
       "version": "7.18.9",
       "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.18.9.tgz",
       "integrity": "sha512-v5nwt4IqBXihxGsW2QmCWMDS3B3bzGIk/EQVZz2ei7f3NJl8NzAJVvUmpDW5q1CRNY+Beb/k58UAH1Km1N411w==",
+      "dev": true,
       "requires": {
         "@babel/helper-plugin-utils": "^7.18.9",
         "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9",
@@ -678,12 +941,12 @@
       }
     },
     "@babel/plugin-proposal-private-property-in-object": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.20.5.tgz",
-      "integrity": "sha512-Vq7b9dUA12ByzB4EjQTPo25sFhY+08pQDBSZRtUAkj7lb7jahaHR5igera16QZ+3my1nYR4dKsNdYj5IjPHilQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0.tgz",
+      "integrity": "sha512-ha4zfehbJjc5MmXBlHec1igel5TJXXLDDRbuJ4+XT2TJcyD9/V1919BA8gMvsdHcNMBy4WBUBiRb3nw/EQUtBw==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-create-class-features-plugin": "^7.20.5",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
         "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
       }
@@ -730,11 +993,11 @@
       }
     },
     "@babel/plugin-syntax-decorators": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.19.0.tgz",
-      "integrity": "sha512-xaBZUEDntt4faL1yN8oIFlhfXeQAWJW7CLKYsHTUqriCUbj8xOra8bfxxKGi/UwExPFBuPdH4XfHc9rGQhrVkQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-decorators/-/plugin-syntax-decorators-7.21.0.tgz",
+      "integrity": "sha512-tIoPpGBR8UuM4++ccWN3gifhVvQu7ZizuR1fklhRJrd5ewgbkUS+0KVFeWWxELtn18NTLoW32XV7zyOgIAiz+w==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.19.0"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-syntax-dynamic-import": {
@@ -778,11 +1041,11 @@
       }
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.18.6.tgz",
-      "integrity": "sha512-6mmljtAedFGTWu2p/8WIORGwy+61PLgOMPOdazc7YoJ9ZCWUyFy3A6CpPkRKLKD1ToAesxX8KGEViAiLo9N+7Q==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.21.4.tgz",
+      "integrity": "sha512-5hewiLct5OKyh6PLKEYaFclcqtIgCb6bmELouxjF6up5q3Sov7rOayW4RwhbaBL0dit8rA80GNfY+UuDp2mBbQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-syntax-logical-assignment-operators": {
@@ -850,29 +1113,29 @@
       }
     },
     "@babel/plugin-syntax-typescript": {
-      "version": "7.20.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.20.0.tgz",
-      "integrity": "sha512-rd9TkG+u1CExzS4SM1BlMEhMXwFLKVjOAFFCDx9PbX5ycJWDoWMcwdJH9RhkPu1dOgn5TrxLot/Gx6lWFuAUNQ==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.21.4.tgz",
+      "integrity": "sha512-xz0D39NvhQn4t4RNsHmDnnsaQizIlUkdtYvLs8La1BlfjQ6JEwxkJGeqJMW2tAXx+q6H+WFuUTXNdYVpEya0YA==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.19.0"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-arrow-functions": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.18.6.tgz",
-      "integrity": "sha512-9S9X9RUefzrsHZmKMbDXxweEH+YlE8JJEuat9FdvW9Qh1cw7W64jELCtWNkPBPX5En45uy28KGvA/AySqUh8CQ==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.20.7.tgz",
+      "integrity": "sha512-3poA5E7dzDomxj9WXWwuD6A5F3kc7VXwIJO+E+J8qtDtS+pXPAhrgEyh+9GBwBgPq1Z+bB+/JD60lp5jsN7JPQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-async-to-generator": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.18.6.tgz",
-      "integrity": "sha512-ARE5wZLKnTgPW7/1ftQmSi1CmkqqHo2DNmtztFhvgtOWSDfq0Cq9/9L+KnZNYSNrydBekhW3rwShduf59RoXag==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.20.7.tgz",
+      "integrity": "sha512-Uo5gwHPT9vgnSXQxqGtpdufUiWp96gk7yiP4Mp5bm1QMkEmLXBO7PAGYbKoJ6DhAwiNkcHFBol/x5zZZkL/t0Q==",
       "requires": {
         "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-remap-async-to-generator": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-remap-async-to-generator": "^7.18.9"
       }
     },
     "@babel/plugin-transform-block-scoped-functions": {
@@ -884,41 +1147,140 @@
       }
     },
     "@babel/plugin-transform-block-scoping": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.20.5.tgz",
-      "integrity": "sha512-WvpEIW9Cbj9ApF3yJCjIEEf1EiNJLtXagOrL5LNWEZOo3jv8pmPoYTSNJQvqej8OavVlgOoOPw6/htGZro6IkA==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.21.0.tgz",
+      "integrity": "sha512-Mdrbunoh9SxwFZapeHVrwFmri16+oYotcZysSzhNIVDwIAb1UV+kvnxULSYq9J3/q5MDG+4X6w8QVgD1zhBXNQ==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-classes": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.20.2.tgz",
-      "integrity": "sha512-9rbPp0lCVVoagvtEyQKSo5L8oo0nQS/iif+lwlAz29MccX2642vWDlSZK+2T2buxbopotId2ld7zZAzRfz9j1g==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-classes/-/plugin-transform-classes-7.21.0.tgz",
+      "integrity": "sha512-RZhbYTCEUAe6ntPehC4hlslPWosNHDox+vAs4On/mCLRLfoDVHf6hVEd7kuxr1RnHwJmxFfUM3cZiZRmPxJPXQ==",
       "requires": {
         "@babel/helper-annotate-as-pure": "^7.18.6",
-        "@babel/helper-compilation-targets": "^7.20.0",
+        "@babel/helper-compilation-targets": "^7.20.7",
         "@babel/helper-environment-visitor": "^7.18.9",
-        "@babel/helper-function-name": "^7.19.0",
+        "@babel/helper-function-name": "^7.21.0",
         "@babel/helper-optimise-call-expression": "^7.18.6",
         "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-replace-supers": "^7.19.1",
+        "@babel/helper-replace-supers": "^7.20.7",
         "@babel/helper-split-export-declaration": "^7.18.6",
         "globals": "^11.1.0"
+      },
+      "dependencies": {
+        "@babel/compat-data": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.4.tgz",
+          "integrity": "sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g=="
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz",
+          "integrity": "sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==",
+          "requires": {
+            "@babel/compat-data": "^7.21.4",
+            "@babel/helper-validator-option": "^7.21.0",
+            "browserslist": "^4.21.3",
+            "lru-cache": "^5.1.1",
+            "semver": "^6.3.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+          "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+          "requires": {
+            "@babel/template": "^7.20.7",
+            "@babel/types": "^7.21.0"
+          }
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+          "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ=="
+        },
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/template": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+          "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+          "requires": {
+            "@babel/code-frame": "^7.18.6",
+            "@babel/parser": "^7.20.7",
+            "@babel/types": "^7.20.7"
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        }
       }
     },
     "@babel/plugin-transform-computed-properties": {
-      "version": "7.18.9",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.18.9.tgz",
-      "integrity": "sha512-+i0ZU1bCDymKakLxn5srGHrsAPRELC2WIbzwjLhHW9SIE1cPYkLCL0NlnXMZaM1vhfgA2+M7hySk42VBvrkBRw==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.20.7.tgz",
+      "integrity": "sha512-Lz7MvBK6DTjElHAmfu6bfANzKcxpyNPeYBGEafyA6E5HtRpjpZwU+u7Qrgz/2OR0z+5TvKYbPdphfSaAcZBrYQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/template": "^7.20.7"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/template": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+          "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+          "requires": {
+            "@babel/code-frame": "^7.18.6",
+            "@babel/parser": "^7.20.7",
+            "@babel/types": "^7.20.7"
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-destructuring": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.20.2.tgz",
-      "integrity": "sha512-mENM+ZHrvEgxLTBXUiQ621rRXZes3KWUv6NdQlrnr1TkWVw+hUjQBZuP2X32qKlrlG2BzgR95gkuCRSkJl8vIw==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.21.3.tgz",
+      "integrity": "sha512-bp6hwMFzuiE4HqYEyoGJ/V2LeIWn+hLVKc4pnj++E5XQptwhtcGmSayM029d/j2X1bPKGTlsyPwAubuU22KhMA==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.20.2"
       }
@@ -950,11 +1312,11 @@
       }
     },
     "@babel/plugin-transform-for-of": {
-      "version": "7.18.8",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.18.8.tgz",
-      "integrity": "sha512-yEfTRnjuskWYo0k1mHUqrVWaZwrdq8AYbfrpqULOJOaucGSp4mNMVps+YtA8byoevxS/urwU75vyhQIxcCgiBQ==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.21.0.tgz",
+      "integrity": "sha512-LlUYlydgDkKpIY7mcBWvyPPmMcOphEyYA27Ef4xpbh1IiDNLr0kZsos2nf92vz3IccvJI25QUwp86Eo5s6HmBQ==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2"
       }
     },
     "@babel/plugin-transform-function-name": {
@@ -984,12 +1346,101 @@
       }
     },
     "@babel/plugin-transform-modules-amd": {
-      "version": "7.19.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.19.6.tgz",
-      "integrity": "sha512-uG3od2mXvAtIFQIh0xrpLH6r5fpSQN04gIVovl+ODLdUMANokxQLZnPBHcjmv3GxRjnqwLuHvppjjcelqUFZvg==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.20.11.tgz",
+      "integrity": "sha512-NuzCt5IIYOW0O30UvqktzHYR2ud5bOWbY0yaxWZ6G+aFzOMJvrs5YHNikrbdaT15+KNO31nPOy5Fim3ku6Zb5g==",
       "requires": {
-        "@babel/helper-module-transforms": "^7.19.6",
-        "@babel/helper-plugin-utils": "^7.19.0"
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.4.tgz",
+          "integrity": "sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==",
+          "requires": {
+            "@babel/types": "^7.21.4",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+          "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+          "requires": {
+            "@babel/template": "^7.20.7",
+            "@babel/types": "^7.21.0"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
+          "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
+          "requires": {
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-module-imports": "^7.18.6",
+            "@babel/helper-simple-access": "^7.20.2",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "@babel/template": "^7.20.7",
+            "@babel/traverse": "^7.21.2",
+            "@babel/types": "^7.21.2"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/template": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+          "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+          "requires": {
+            "@babel/code-frame": "^7.18.6",
+            "@babel/parser": "^7.20.7",
+            "@babel/types": "^7.20.7"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.4.tgz",
+          "integrity": "sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==",
+          "requires": {
+            "@babel/code-frame": "^7.21.4",
+            "@babel/generator": "^7.21.4",
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-function-name": "^7.21.0",
+            "@babel/helper-hoist-variables": "^7.18.6",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/parser": "^7.21.4",
+            "@babel/types": "^7.21.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          },
+          "dependencies": {
+            "@babel/code-frame": {
+              "version": "7.21.4",
+              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+              "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+              "requires": {
+                "@babel/highlight": "^7.18.6"
+              }
+            }
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-modules-commonjs": {
@@ -1003,14 +1454,103 @@
       }
     },
     "@babel/plugin-transform-modules-systemjs": {
-      "version": "7.19.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.19.6.tgz",
-      "integrity": "sha512-fqGLBepcc3kErfR9R3DnVpURmckXP7gj7bAlrTQyBxrigFqszZCkFkcoxzCp2v32XmwXLvbw+8Yq9/b+QqksjQ==",
+      "version": "7.20.11",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.20.11.tgz",
+      "integrity": "sha512-vVu5g9BPQKSFEmvt2TA4Da5N+QVS66EX21d8uoOihC+OCpUoGvzVsXeqFdtAEfVa5BILAeFt+U7yVmLbQnAJmw==",
       "requires": {
         "@babel/helper-hoist-variables": "^7.18.6",
-        "@babel/helper-module-transforms": "^7.19.6",
-        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-module-transforms": "^7.20.11",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/helper-validator-identifier": "^7.19.1"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.4.tgz",
+          "integrity": "sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==",
+          "requires": {
+            "@babel/types": "^7.21.4",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+          "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+          "requires": {
+            "@babel/template": "^7.20.7",
+            "@babel/types": "^7.21.0"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
+          "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
+          "requires": {
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-module-imports": "^7.18.6",
+            "@babel/helper-simple-access": "^7.20.2",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "@babel/template": "^7.20.7",
+            "@babel/traverse": "^7.21.2",
+            "@babel/types": "^7.21.2"
+          }
+        },
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/template": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+          "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+          "requires": {
+            "@babel/code-frame": "^7.18.6",
+            "@babel/parser": "^7.20.7",
+            "@babel/types": "^7.20.7"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.4.tgz",
+          "integrity": "sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==",
+          "requires": {
+            "@babel/code-frame": "^7.21.4",
+            "@babel/generator": "^7.21.4",
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-function-name": "^7.21.0",
+            "@babel/helper-hoist-variables": "^7.18.6",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/parser": "^7.21.4",
+            "@babel/types": "^7.21.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          },
+          "dependencies": {
+            "@babel/code-frame": {
+              "version": "7.21.4",
+              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+              "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+              "requires": {
+                "@babel/highlight": "^7.18.6"
+              }
+            }
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/plugin-transform-modules-umd": {
@@ -1049,9 +1589,9 @@
       }
     },
     "@babel/plugin-transform-parameters": {
-      "version": "7.20.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.20.5.tgz",
-      "integrity": "sha512-h7plkOmcndIUWXZFLgpbrh2+fXAi47zcUX7IrOQuZdLD0I0KvjJ6cvo3BEcAOsDOcZhVKGJqv07mkSqK0y2isQ==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.21.3.tgz",
+      "integrity": "sha512-Wxc+TvppQG9xWFYatvCGPvZ6+SIUxQ2ZdiBP+PHYMIjnPXD+uThCshaz4NZOnODAtBjjcVQQ/3OKs9LW28purQ==",
       "requires": {
         "@babel/helper-plugin-utils": "^7.20.2"
       }
@@ -1082,17 +1622,37 @@
       }
     },
     "@babel/plugin-transform-runtime": {
-      "version": "7.19.6",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.19.6.tgz",
-      "integrity": "sha512-PRH37lz4JU156lYFW1p8OxE5i7d6Sl/zV58ooyr+q1J1lnQPyg5tIiXlIwNVhJaY4W3TmOtdc8jqdXQcB1v5Yw==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.21.4.tgz",
+      "integrity": "sha512-1J4dhrw1h1PqnNNpzwxQ2UBymJUF8KuPjAAnlLwZcGhHAIqUigFW7cdK6GHoB64ubY4qXQNYknoUeks4Wz7CUA==",
       "requires": {
-        "@babel/helper-module-imports": "^7.18.6",
-        "@babel/helper-plugin-utils": "^7.19.0",
+        "@babel/helper-module-imports": "^7.21.4",
+        "@babel/helper-plugin-utils": "^7.20.2",
         "babel-plugin-polyfill-corejs2": "^0.3.3",
         "babel-plugin-polyfill-corejs3": "^0.6.0",
         "babel-plugin-polyfill-regenerator": "^0.4.1",
         "semver": "^6.3.0"
-      }
+      },
+      "dependencies": {
+        "@babel/helper-module-imports": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.21.4.tgz",
+          "integrity": "sha512-orajc5T2PsRYUN3ZryCEFeMDYwyw09c/pZeaQEZPH0MpKzSvn3e0uXsDBu3k03VI+9DBiRo+l22BfKTpKwa/Wg==",
+          "requires": {
+            "@babel/types": "^7.21.4"
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
+      }
     },
     "@babel/plugin-transform-shorthand-properties": {
       "version": "7.18.6",
@@ -1103,12 +1663,12 @@
       }
     },
     "@babel/plugin-transform-spread": {
-      "version": "7.19.0",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.19.0.tgz",
-      "integrity": "sha512-RsuMk7j6n+r752EtzyScnWkQyuJdli6LdO5Klv8Yx0OfPVTcQkIUfS8clx5e9yHXzlnhOZF3CbQ8C2uP5j074w==",
+      "version": "7.20.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-spread/-/plugin-transform-spread-7.20.7.tgz",
+      "integrity": "sha512-ewBbHQ+1U/VnH1fxltbJqDeWBU1oNLG8Dj11uIv3xVf7nrQu0bPGe5Rf716r7K5Qz+SqtAOVswoVunoiBtGhxw==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.19.0",
-        "@babel/helper-skip-transparent-expression-wrappers": "^7.18.9"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0"
       }
     },
     "@babel/plugin-transform-sticky-regex": {
@@ -1136,11 +1696,12 @@
       }
     },
     "@babel/plugin-transform-typescript": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.20.2.tgz",
-      "integrity": "sha512-jvS+ngBfrnTUBfOQq8NfGnSbF9BrqlR6hjJ2yVxMkmO5nL/cdifNbI30EfjRlN4g5wYWNnMPyj5Sa6R1pbLeag==",
+      "version": "7.21.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.21.3.tgz",
+      "integrity": "sha512-RQxPz6Iqt8T0uw/WsJNReuBpWpBqs/n7mNo18sKLoTbMp+UrEekhH+pKSVC7gWz+DNjo9gryfV8YzCiT45RgMw==",
       "requires": {
-        "@babel/helper-create-class-features-plugin": "^7.20.2",
+        "@babel/helper-annotate-as-pure": "^7.18.6",
+        "@babel/helper-create-class-features-plugin": "^7.21.0",
         "@babel/helper-plugin-utils": "^7.20.2",
         "@babel/plugin-syntax-typescript": "^7.20.0"
       }
@@ -1163,30 +1724,30 @@
       }
     },
     "@babel/preset-env": {
-      "version": "7.20.2",
-      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.20.2.tgz",
-      "integrity": "sha512-1G0efQEWR1EHkKvKHqbG+IN/QdgwfByUpM5V5QroDzGV2t3S/WXNQd693cHiHTlCFMpr9B6FkPFXDA2lQcKoDg==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.21.4.tgz",
+      "integrity": "sha512-2W57zHs2yDLm6GD5ZpvNn71lZ0B/iypSdIeq25OurDKji6AdzV07qp4s3n1/x5BqtiGaTrPN3nerlSCaC5qNTw==",
       "requires": {
-        "@babel/compat-data": "^7.20.1",
-        "@babel/helper-compilation-targets": "^7.20.0",
+        "@babel/compat-data": "^7.21.4",
+        "@babel/helper-compilation-targets": "^7.21.4",
         "@babel/helper-plugin-utils": "^7.20.2",
-        "@babel/helper-validator-option": "^7.18.6",
+        "@babel/helper-validator-option": "^7.21.0",
         "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "^7.18.6",
-        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.18.9",
-        "@babel/plugin-proposal-async-generator-functions": "^7.20.1",
+        "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "^7.20.7",
+        "@babel/plugin-proposal-async-generator-functions": "^7.20.7",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
-        "@babel/plugin-proposal-class-static-block": "^7.18.6",
+        "@babel/plugin-proposal-class-static-block": "^7.21.0",
         "@babel/plugin-proposal-dynamic-import": "^7.18.6",
         "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
         "@babel/plugin-proposal-json-strings": "^7.18.6",
-        "@babel/plugin-proposal-logical-assignment-operators": "^7.18.9",
+        "@babel/plugin-proposal-logical-assignment-operators": "^7.20.7",
         "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
         "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-        "@babel/plugin-proposal-object-rest-spread": "^7.20.2",
+        "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
         "@babel/plugin-proposal-optional-catch-binding": "^7.18.6",
-        "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+        "@babel/plugin-proposal-optional-chaining": "^7.21.0",
         "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-proposal-private-property-in-object": "^7.18.6",
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.0",
         "@babel/plugin-proposal-unicode-property-regex": "^7.18.6",
         "@babel/plugin-syntax-async-generators": "^7.8.4",
         "@babel/plugin-syntax-class-properties": "^7.12.13",
@@ -1203,45 +1764,200 @@
         "@babel/plugin-syntax-optional-chaining": "^7.8.3",
         "@babel/plugin-syntax-private-property-in-object": "^7.14.5",
         "@babel/plugin-syntax-top-level-await": "^7.14.5",
-        "@babel/plugin-transform-arrow-functions": "^7.18.6",
-        "@babel/plugin-transform-async-to-generator": "^7.18.6",
+        "@babel/plugin-transform-arrow-functions": "^7.20.7",
+        "@babel/plugin-transform-async-to-generator": "^7.20.7",
         "@babel/plugin-transform-block-scoped-functions": "^7.18.6",
-        "@babel/plugin-transform-block-scoping": "^7.20.2",
-        "@babel/plugin-transform-classes": "^7.20.2",
-        "@babel/plugin-transform-computed-properties": "^7.18.9",
-        "@babel/plugin-transform-destructuring": "^7.20.2",
+        "@babel/plugin-transform-block-scoping": "^7.21.0",
+        "@babel/plugin-transform-classes": "^7.21.0",
+        "@babel/plugin-transform-computed-properties": "^7.20.7",
+        "@babel/plugin-transform-destructuring": "^7.21.3",
         "@babel/plugin-transform-dotall-regex": "^7.18.6",
         "@babel/plugin-transform-duplicate-keys": "^7.18.9",
         "@babel/plugin-transform-exponentiation-operator": "^7.18.6",
-        "@babel/plugin-transform-for-of": "^7.18.8",
+        "@babel/plugin-transform-for-of": "^7.21.0",
         "@babel/plugin-transform-function-name": "^7.18.9",
         "@babel/plugin-transform-literals": "^7.18.9",
         "@babel/plugin-transform-member-expression-literals": "^7.18.6",
-        "@babel/plugin-transform-modules-amd": "^7.19.6",
-        "@babel/plugin-transform-modules-commonjs": "^7.19.6",
-        "@babel/plugin-transform-modules-systemjs": "^7.19.6",
+        "@babel/plugin-transform-modules-amd": "^7.20.11",
+        "@babel/plugin-transform-modules-commonjs": "^7.21.2",
+        "@babel/plugin-transform-modules-systemjs": "^7.20.11",
         "@babel/plugin-transform-modules-umd": "^7.18.6",
-        "@babel/plugin-transform-named-capturing-groups-regex": "^7.19.1",
+        "@babel/plugin-transform-named-capturing-groups-regex": "^7.20.5",
         "@babel/plugin-transform-new-target": "^7.18.6",
         "@babel/plugin-transform-object-super": "^7.18.6",
-        "@babel/plugin-transform-parameters": "^7.20.1",
+        "@babel/plugin-transform-parameters": "^7.21.3",
         "@babel/plugin-transform-property-literals": "^7.18.6",
-        "@babel/plugin-transform-regenerator": "^7.18.6",
+        "@babel/plugin-transform-regenerator": "^7.20.5",
         "@babel/plugin-transform-reserved-words": "^7.18.6",
         "@babel/plugin-transform-shorthand-properties": "^7.18.6",
-        "@babel/plugin-transform-spread": "^7.19.0",
+        "@babel/plugin-transform-spread": "^7.20.7",
         "@babel/plugin-transform-sticky-regex": "^7.18.6",
         "@babel/plugin-transform-template-literals": "^7.18.9",
         "@babel/plugin-transform-typeof-symbol": "^7.18.9",
         "@babel/plugin-transform-unicode-escapes": "^7.18.10",
         "@babel/plugin-transform-unicode-regex": "^7.18.6",
         "@babel/preset-modules": "^0.1.5",
-        "@babel/types": "^7.20.2",
+        "@babel/types": "^7.21.4",
         "babel-plugin-polyfill-corejs2": "^0.3.3",
         "babel-plugin-polyfill-corejs3": "^0.6.0",
         "babel-plugin-polyfill-regenerator": "^0.4.1",
         "core-js-compat": "^3.25.1",
         "semver": "^6.3.0"
+      },
+      "dependencies": {
+        "@babel/compat-data": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/compat-data/-/compat-data-7.21.4.tgz",
+          "integrity": "sha512-/DYyDpeCfaVinT40FPGdkkb+lYSKvsVuMjDAG7jPOWWiM1ibOaB9CXJAlc4d1QpP/U2q2P9jbrSlClKSErd55g=="
+        },
+        "@babel/generator": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.4.tgz",
+          "integrity": "sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==",
+          "requires": {
+            "@babel/types": "^7.21.4",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/helper-compilation-targets": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/helper-compilation-targets/-/helper-compilation-targets-7.21.4.tgz",
+          "integrity": "sha512-Fa0tTuOXZ1iL8IeDFUWCzjZcn+sJGd9RZdH9esYVjEejGmzf+FFYQpMi/kZUk2kPy/q1H3/GPw7np8qar/stfg==",
+          "requires": {
+            "@babel/compat-data": "^7.21.4",
+            "@babel/helper-validator-option": "^7.21.0",
+            "browserslist": "^4.21.3",
+            "lru-cache": "^5.1.1",
+            "semver": "^6.3.0"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+          "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+          "requires": {
+            "@babel/template": "^7.20.7",
+            "@babel/types": "^7.21.0"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
+          "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
+          "requires": {
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-module-imports": "^7.18.6",
+            "@babel/helper-simple-access": "^7.20.2",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "@babel/template": "^7.20.7",
+            "@babel/traverse": "^7.21.2",
+            "@babel/types": "^7.21.2"
+          }
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+          "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ=="
+        },
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/plugin-proposal-async-generator-functions": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.20.7.tgz",
+          "integrity": "sha512-xMbiLsn/8RK7Wq7VeVytytS2L6qE69bXPB10YCmMdDZbKF4okCqY74pI/jJQ/8U0b/F6NrT2+14b8/P9/3AMGA==",
+          "requires": {
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-plugin-utils": "^7.20.2",
+            "@babel/helper-remap-async-to-generator": "^7.18.9",
+            "@babel/plugin-syntax-async-generators": "^7.8.4"
+          }
+        },
+        "@babel/plugin-proposal-optional-chaining": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz",
+          "integrity": "sha512-p4zeefM72gpmEe2fkUr/OnOXpWEf8nAgk7ZYVqqfFiyIG7oFfVZcCrU64hWn5xp4tQ9LkV4bTIa5rD0KANpKNA==",
+          "requires": {
+            "@babel/helper-plugin-utils": "^7.20.2",
+            "@babel/helper-skip-transparent-expression-wrappers": "^7.20.0",
+            "@babel/plugin-syntax-optional-chaining": "^7.8.3"
+          }
+        },
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz",
+          "integrity": "sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==",
+          "requires": {
+            "@babel/helper-module-transforms": "^7.21.2",
+            "@babel/helper-plugin-utils": "^7.20.2",
+            "@babel/helper-simple-access": "^7.20.2"
+          }
+        },
+        "@babel/template": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+          "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+          "requires": {
+            "@babel/code-frame": "^7.18.6",
+            "@babel/parser": "^7.20.7",
+            "@babel/types": "^7.20.7"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.4.tgz",
+          "integrity": "sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==",
+          "requires": {
+            "@babel/code-frame": "^7.21.4",
+            "@babel/generator": "^7.21.4",
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-function-name": "^7.21.0",
+            "@babel/helper-hoist-variables": "^7.18.6",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/parser": "^7.21.4",
+            "@babel/types": "^7.21.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          },
+          "dependencies": {
+            "@babel/code-frame": {
+              "version": "7.21.4",
+              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+              "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+              "requires": {
+                "@babel/highlight": "^7.18.6"
+              }
+            }
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
+          "integrity": "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w==",
+          "requires": {
+            "yallist": "^3.0.2"
+          }
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="
+        }
       }
     },
     "@babel/preset-modules": {
@@ -1257,27 +1973,133 @@
       }
     },
     "@babel/preset-typescript": {
-      "version": "7.18.6",
-      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.18.6.tgz",
-      "integrity": "sha512-s9ik86kXBAnD760aybBucdpnLsAt0jK1xqJn2juOn9lkOvSHV60os5hxoVJsPzMQxvnUJFAlkont2DvvaYEBtQ==",
+      "version": "7.21.4",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.21.4.tgz",
+      "integrity": "sha512-sMLNWY37TCdRH/bJ6ZeeOH1nPuanED7Ai9Y/vH31IPqalioJ6ZNFUWONsakhv4r4n+I6gm5lmoE0olkgib/j/A==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.18.6",
-        "@babel/helper-validator-option": "^7.18.6",
-        "@babel/plugin-transform-typescript": "^7.18.6"
+        "@babel/helper-plugin-utils": "^7.20.2",
+        "@babel/helper-validator-option": "^7.21.0",
+        "@babel/plugin-syntax-jsx": "^7.21.4",
+        "@babel/plugin-transform-modules-commonjs": "^7.21.2",
+        "@babel/plugin-transform-typescript": "^7.21.3"
+      },
+      "dependencies": {
+        "@babel/generator": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.21.4.tgz",
+          "integrity": "sha512-NieM3pVIYW2SwGzKoqfPrQsf4xGs9M9AIG3ThppsSRmO+m7eQhmI6amajKMUeIO37wFfsvnvcxQFx6x6iqxDnA==",
+          "requires": {
+            "@babel/types": "^7.21.4",
+            "@jridgewell/gen-mapping": "^0.3.2",
+            "@jridgewell/trace-mapping": "^0.3.17",
+            "jsesc": "^2.5.1"
+          }
+        },
+        "@babel/helper-function-name": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.21.0.tgz",
+          "integrity": "sha512-HfK1aMRanKHpxemaY2gqBmL04iAPOPRj7DxtNbiDOrJK+gdwkiNRVpCpUJYbUT+aZyemKN8brqTOxzCaG6ExRg==",
+          "requires": {
+            "@babel/template": "^7.20.7",
+            "@babel/types": "^7.21.0"
+          }
+        },
+        "@babel/helper-module-transforms": {
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.21.2.tgz",
+          "integrity": "sha512-79yj2AR4U/Oqq/WOV7Lx6hUjau1Zfo4cI+JLAVYeMV5XIlbOhmjEk5ulbTc9fMpmlojzZHkUUxAiK+UKn+hNQQ==",
+          "requires": {
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-module-imports": "^7.18.6",
+            "@babel/helper-simple-access": "^7.20.2",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "@babel/template": "^7.20.7",
+            "@babel/traverse": "^7.21.2",
+            "@babel/types": "^7.21.2"
+          }
+        },
+        "@babel/helper-validator-option": {
+          "version": "7.21.0",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.21.0.tgz",
+          "integrity": "sha512-rmL/B8/f0mKS2baE9ZpyTcTavvEuWhTTW8amjzXNvYG4AwBsqTLikfXsEofsJEfKHf+HQVQbFOHy6o+4cnC/fQ=="
+        },
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/plugin-transform-modules-commonjs": {
+          "version": "7.21.2",
+          "resolved": "https://registry.npmjs.org/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.21.2.tgz",
+          "integrity": "sha512-Cln+Yy04Gxua7iPdj6nOV96smLGjpElir5YwzF0LBPKoPlLDNJePNlrGGaybAJkd0zKRnOVXOgizSqPYMNYkzA==",
+          "requires": {
+            "@babel/helper-module-transforms": "^7.21.2",
+            "@babel/helper-plugin-utils": "^7.20.2",
+            "@babel/helper-simple-access": "^7.20.2"
+          }
+        },
+        "@babel/template": {
+          "version": "7.20.7",
+          "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.20.7.tgz",
+          "integrity": "sha512-8SegXApWe6VoNw0r9JHpSteLKTpTiLZ4rMlGIm9JQ18KiCtyQiAMEazujAHrUS5flrcqYZa75ukev3P6QmUwUw==",
+          "requires": {
+            "@babel/code-frame": "^7.18.6",
+            "@babel/parser": "^7.20.7",
+            "@babel/types": "^7.20.7"
+          }
+        },
+        "@babel/traverse": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.21.4.tgz",
+          "integrity": "sha512-eyKrRHKdyZxqDm+fV1iqL9UAHMoIg0nDaGqfIOd8rKH17m5snv7Gn4qgjBoFfLz9APvjFU/ICT00NVCv1Epp8Q==",
+          "requires": {
+            "@babel/code-frame": "^7.21.4",
+            "@babel/generator": "^7.21.4",
+            "@babel/helper-environment-visitor": "^7.18.9",
+            "@babel/helper-function-name": "^7.21.0",
+            "@babel/helper-hoist-variables": "^7.18.6",
+            "@babel/helper-split-export-declaration": "^7.18.6",
+            "@babel/parser": "^7.21.4",
+            "@babel/types": "^7.21.4",
+            "debug": "^4.1.0",
+            "globals": "^11.1.0"
+          },
+          "dependencies": {
+            "@babel/code-frame": {
+              "version": "7.21.4",
+              "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.21.4.tgz",
+              "integrity": "sha512-LYvhNKfwWSPpocw8GI7gpK2nq3HSDuEPC/uSYaALSJu9xjsalaaYFOq0Pwt5KmVqwEbZlDu81aLXwBOmD/Fv9g==",
+              "requires": {
+                "@babel/highlight": "^7.18.6"
+              }
+            }
+          }
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@babel/runtime": {
-      "version": "7.20.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.6.tgz",
-      "integrity": "sha512-Q+8MqP7TiHMWzSfwiJwXCjyf4GYA4Dgw3emg/7xmwsdLJOZUp+nMqcOwOzzYheuM1rhDu8FSj2l0aoMygEuXuA==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.21.0.tgz",
+      "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
     },
     "@babel/runtime-corejs2": {
-      "version": "7.20.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.20.6.tgz",
-      "integrity": "sha512-6qz3LPkwPDBDEAOsf/fXdsX/c5u2GNy33QlY1caaR8qPVG2Q0tTkS0mKYMXRhT9wsDQAAEj4T7scykRB3nBjWA==",
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.21.0.tgz",
+      "integrity": "sha512-hVFDLYkuthnvQwWoOniPSq+RWyQTiimVdMXQJujoiSX8maFh/62+qRImGkRpeRflsVXXSMFS4HgNe3X9fuw5ww==",
       "requires": {
         "core-js": "^2.6.12",
         "regenerator-runtime": "^0.13.11"
@@ -1290,6 +2112,15 @@
         }
       }
     },
+    "@babel/runtime-corejs3": {
+      "version": "7.21.0",
+      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs3/-/runtime-corejs3-7.21.0.tgz",
+      "integrity": "sha512-TDD4UJzos3JJtM+tHX+w2Uc+KWj7GV+VKKFdMVd2Rx8sdA19hcc3P3AHFYd5LVOw+pYuSd5lICC3gm52B6Rwxw==",
+      "requires": {
+        "core-js-pure": "^3.25.1",
+        "regenerator-runtime": "^0.13.11"
+      }
+    },
     "@babel/template": {
       "version": "7.18.10",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.18.10.tgz",
@@ -1438,12 +2269,11 @@
       }
     },
     "@emotion/babel-plugin": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.5.tgz",
-      "integrity": "sha512-xE7/hyLHJac7D2Ve9dKroBBZqBT7WuPQmWcq7HSGb84sUuP4mlOWoB8dvVfD9yk5DHkU1m6RW7xSoDtnQHNQeA==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.10.6.tgz",
+      "integrity": "sha512-p2dAqtVrkhSa7xz1u/m9eHYdLi+en8NowrmXeF/dKtJpU8lCWli8RUAati7NcSl0afsBott48pdnANuD0wh9QQ==",
       "requires": {
         "@babel/helper-module-imports": "^7.16.7",
-        "@babel/plugin-syntax-jsx": "^7.17.12",
         "@babel/runtime": "^7.18.3",
         "@emotion/hash": "^0.9.0",
         "@emotion/memoize": "^0.8.0",
@@ -1464,9 +2294,9 @@
       }
     },
     "@emotion/cache": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.5.tgz",
-      "integrity": "sha512-dGYHWyzTdmK+f2+EnIGBpkz1lKc4Zbj2KHd4cX3Wi8/OWr5pKslNjc3yABKH4adRGCvSX4VDC0i04mrrq0aiRA==",
+      "version": "11.10.7",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.10.7.tgz",
+      "integrity": "sha512-VLl1/2D6LOjH57Y8Vem1RoZ9haWF4jesHDGiHtKozDQuBIkJm2gimVo0I02sWCuzZtVACeixTVB4jeE8qvCBoQ==",
       "requires": {
         "@emotion/memoize": "^0.8.0",
         "@emotion/sheet": "^1.2.1",
@@ -1494,12 +2324,12 @@
       "integrity": "sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA=="
     },
     "@emotion/react": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.5.tgz",
-      "integrity": "sha512-TZs6235tCJ/7iF6/rvTaOH4oxQg2gMAcdHemjwLKIjKz4rRuYe1HJ2TQJKnAcRAfOUDdU8XoDadCe1rl72iv8A==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.10.6.tgz",
+      "integrity": "sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw==",
       "requires": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/babel-plugin": "^11.10.6",
         "@emotion/cache": "^11.10.5",
         "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
@@ -1526,12 +2356,12 @@
       "integrity": "sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA=="
     },
     "@emotion/styled": {
-      "version": "11.10.5",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.5.tgz",
-      "integrity": "sha512-8EP6dD7dMkdku2foLoruPCNkRevzdcBaY6q0l0OsbyJK+x8D9HWjX27ARiSIKNF634hY9Zdoedh8bJCiva8yZw==",
+      "version": "11.10.6",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.10.6.tgz",
+      "integrity": "sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==",
       "requires": {
         "@babel/runtime": "^7.18.3",
-        "@emotion/babel-plugin": "^11.10.5",
+        "@emotion/babel-plugin": "^11.10.6",
         "@emotion/is-prop-valid": "^1.2.0",
         "@emotion/serialize": "^1.1.1",
         "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0",
@@ -1558,6 +2388,117 @@
       "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.3.0.tgz",
       "integrity": "sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg=="
     },
+    "@eslint-community/eslint-utils": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz",
+      "integrity": "sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==",
+      "requires": {
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+          "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ=="
+        }
+      }
+    },
+    "@eslint-community/regexpp": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.5.0.tgz",
+      "integrity": "sha512-vITaYzIcNmjn5tF5uxcZ/ft7/RXGrMUIS9HalWckEOF6ESiwXKoMzAQf2UW0aVd6rnOeExTJVd5hmWXucBKGXQ=="
+    },
+    "@eslint/eslintrc": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.3.tgz",
+      "integrity": "sha512-J6KFFz5QCYUJq3pf0mjEcCJVERbzv71PUIDczuh9JkwGEzced6CO5ADLHB1rbf/+oPBtoPfMYNOpGDzCANlbXw==",
+      "requires": {
+        "ajv": "^6.12.4",
+        "debug": "^4.1.1",
+        "espree": "^7.3.0",
+        "globals": "^13.9.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^3.13.1",
+        "minimatch": "^3.0.4",
+        "strip-json-comments": "^3.1.1"
+      },
+      "dependencies": {
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        },
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "1.3.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
+        },
+        "espree": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+          "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+          "requires": {
+            "acorn": "^7.4.0",
+            "acorn-jsx": "^5.3.1",
+            "eslint-visitor-keys": "^1.3.0"
+          }
+        },
+        "globals": {
+          "version": "13.20.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+          "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+        }
+      }
+    },
     "@evocateur/libnpmaccess": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@evocateur/libnpmaccess/-/libnpmaccess-3.1.2.tgz",
@@ -1772,6 +2713,21 @@
         "@hapi/hoek": "^8.3.0"
       }
     },
+    "@humanwhocodes/config-array": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.5.0.tgz",
+      "integrity": "sha512-FagtKFz74XrTl7y6HCzQpwDfXP0yhxe9lHLD1UZxjvZIcbyRz8zTFF/yYNfSfzU414eDwZ1SrO0Qvtyf+wFMQg==",
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.0",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA=="
+    },
     "@intervolga/optimize-cssnano-plugin": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@intervolga/optimize-cssnano-plugin/-/optimize-cssnano-plugin-1.0.6.tgz",
@@ -2063,9 +3019,9 @@
           "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
         },
         "@types/yargs": {
-          "version": "15.0.14",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
-          "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
+          "version": "15.0.15",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz",
+          "integrity": "sha512-IziEYMU9XoVj8hWg7k+UJrXALkGFjWJhn5QFEv9q4p+v40oZhSuC135M38st8XPjICL7Ey4TV64ferBGUoJhBg==",
           "requires": {
             "@types/yargs-parser": "*"
           }
@@ -4626,52 +5582,52 @@
       }
     },
     "@mui/private-theming": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.10.16.tgz",
-      "integrity": "sha512-0MArkJaOHRCKqL/GWjngGZmyOeRz+uxffhx82bKcewr8swqV7xx7EFP02pk0L/gLdfcvYdqwH4YTVjG/+TaKrg==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.12.0.tgz",
+      "integrity": "sha512-w5dwMen1CUm1puAtubqxY9BIzrBxbOThsg2iWMvRJmWyJAPdf3Z583fPXpqeA2lhTW79uH2jajk5Ka4FuGlTPg==",
       "requires": {
-        "@babel/runtime": "^7.20.1",
-        "@mui/utils": "^5.10.16",
+        "@babel/runtime": "^7.21.0",
+        "@mui/utils": "^5.12.0",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/styled-engine": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.10.16.tgz",
-      "integrity": "sha512-ZMSjXvtiGwGDKqrSlXhpxK2voUaF2/lpC/pSTfFmZvKH9j9a9h1/iwo3ybgjFVYGgbfNeW4h0xEchiRohu9xsw==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.12.0.tgz",
+      "integrity": "sha512-frh8L7CRnvD0RDmIqEv6jFeKQUIXqW90BaZ6OrxJ2j4kIsiVLu29Gss4SbBvvrWwwatR72sBmC3w1aG4fjp9mQ==",
       "requires": {
-        "@babel/runtime": "^7.20.1",
-        "@emotion/cache": "^11.10.5",
-        "csstype": "^3.1.1",
+        "@babel/runtime": "^7.21.0",
+        "@emotion/cache": "^11.10.7",
+        "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/system": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.10.16.tgz",
-      "integrity": "sha512-OqI9B1jZ9zQ/dmoqseku4CzdEs9DbLiiMOaWxC3WeAJxM1UavlCgXz0encqm93LIlmSL7TjuHN1/rW8BJCnU8A==",
-      "requires": {
-        "@babel/runtime": "^7.20.1",
-        "@mui/private-theming": "^5.10.16",
-        "@mui/styled-engine": "^5.10.16",
-        "@mui/types": "^7.2.2",
-        "@mui/utils": "^5.10.16",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.12.0.tgz",
+      "integrity": "sha512-Zi+WHuiJfK1ya+9+oeJQ1rLIBdY8CGDYT5oVlQg/6kIuyiCaE6SnN9PVzxBxfY77wHuOPwz4kxcPe9srdZc12Q==",
+      "requires": {
+        "@babel/runtime": "^7.21.0",
+        "@mui/private-theming": "^5.12.0",
+        "@mui/styled-engine": "^5.12.0",
+        "@mui/types": "^7.2.4",
+        "@mui/utils": "^5.12.0",
         "clsx": "^1.2.1",
-        "csstype": "^3.1.1",
+        "csstype": "^3.1.2",
         "prop-types": "^15.8.1"
       }
     },
     "@mui/types": {
-      "version": "7.2.2",
-      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.2.tgz",
-      "integrity": "sha512-siex8cZDtWeC916cXOoUOnEQQejuMYmHtc4hM6VkKVYaBICz3VIiqyiAomRboTQHt2jchxQ5Q5ATlbcDekTxDA=="
+      "version": "7.2.4",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.4.tgz",
+      "integrity": "sha512-LBcwa8rN84bKF+f5sDyku42w1NTxaPgPyYKODsh01U1fVstTClbUoSA96oyRBnSNyEiAVjKm6Gwx9vjR+xyqHA=="
     },
     "@mui/utils": {
-      "version": "5.10.16",
-      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.10.16.tgz",
-      "integrity": "sha512-3MB/SGsgiiu9Z55CFmAfiONUoR7AAue/H4F6w3mc2LnhFQCsoVvXhioDPcsiRpUMIQr34jDPzGXdCuqWooPCXQ==",
+      "version": "5.12.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.12.0.tgz",
+      "integrity": "sha512-RmQwgzF72p7Yr4+AAUO6j1v2uzt6wr7SWXn68KBsnfVpdOHyclCzH2lr/Xu6YOw9su4JRtdAIYfJFXsS6Cjkmw==",
       "requires": {
-        "@babel/runtime": "^7.20.1",
+        "@babel/runtime": "^7.21.0",
         "@types/prop-types": "^15.7.5",
         "@types/react-is": "^16.7.1 || ^17.0.0",
         "prop-types": "^15.8.1",
@@ -4686,9 +5642,9 @@
       }
     },
     "@mui/x-date-pickers": {
-      "version": "5.0.9",
-      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.9.tgz",
-      "integrity": "sha512-PM3RU8MiwDVi+dSDGJ7ylI0hCe79wSCDfrjghS8ApGGFn/n87S8pUZxsZ5czw3mVRN6VfS2C19peo4nM1Tx+nA==",
+      "version": "5.0.20",
+      "resolved": "https://registry.npmjs.org/@mui/x-date-pickers/-/x-date-pickers-5.0.20.tgz",
+      "integrity": "sha512-ERukSeHIoNLbI1C2XRhF9wRhqfsr+Q4B1SAw2ZlU7CWgcG8UBOxgqRKDEOVAIoSWL+DWT6GRuQjOKvj6UXZceA==",
       "requires": {
         "@babel/runtime": "^7.18.9",
         "@date-io/core": "^2.15.0",
@@ -4938,9 +5894,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.6",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
-      "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
+      "version": "2.11.7",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
+      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
     },
     "@rollup/plugin-alias": {
       "version": "3.1.9",
@@ -4951,16 +5907,16 @@
       }
     },
     "@rollup/plugin-commonjs": {
-      "version": "23.0.3",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-23.0.3.tgz",
-      "integrity": "sha512-31HxrT5emGfTyIfAs1lDQHj6EfYxTXcwtX5pIIhq+B/xZBNIqQ179d/CkYxlpYmFCxT78AeU4M8aL8Iv/IBxFA==",
+      "version": "23.0.7",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-commonjs/-/plugin-commonjs-23.0.7.tgz",
+      "integrity": "sha512-hsSD5Qzyuat/swzrExGG5l7EuIlPhwTsT7KwKbSCQzIcJWjRxiimi/0tyMYY2bByitNb3i1p+6JWEDGa0NvT0Q==",
       "requires": {
         "@rollup/pluginutils": "^5.0.1",
         "commondir": "^1.0.1",
         "estree-walker": "^2.0.2",
         "glob": "^8.0.3",
         "is-reference": "1.2.1",
-        "magic-string": "^0.26.4"
+        "magic-string": "^0.27.0"
       },
       "dependencies": {
         "brace-expansion": {
@@ -4972,9 +5928,9 @@
           }
         },
         "glob": {
-          "version": "8.0.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-          "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+          "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
@@ -4984,17 +5940,17 @@
           }
         },
         "magic-string": {
-          "version": "0.26.7",
-          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
-          "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+          "version": "0.27.0",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+          "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
           "requires": {
-            "sourcemap-codec": "^1.4.8"
+            "@jridgewell/sourcemap-codec": "^1.4.13"
           }
         },
         "minimatch": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz",
-          "integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==",
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
           "requires": {
             "brace-expansion": "^2.0.1"
           }
@@ -5010,33 +5966,33 @@
       }
     },
     "@rollup/plugin-node-resolve": {
-      "version": "15.0.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.1.tgz",
-      "integrity": "sha512-ReY88T7JhJjeRVbfCyNj+NXAG3IIsVMsX9b5/9jC98dRP8/yxlZdz7mHZbHk5zHr24wZZICS5AcXsFZAXYUQEg==",
+      "version": "15.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-node-resolve/-/plugin-node-resolve-15.0.2.tgz",
+      "integrity": "sha512-Y35fRGUjC3FaurG722uhUuG8YHOJRJQbI6/CkbRkdPotSpDj9NtIN85z1zrcyDcCQIW4qp5mgG72U+gJ0TAFEg==",
       "requires": {
         "@rollup/pluginutils": "^5.0.1",
         "@types/resolve": "1.20.2",
         "deepmerge": "^4.2.2",
-        "is-builtin-module": "^3.2.0",
+        "is-builtin-module": "^3.2.1",
         "is-module": "^1.0.0",
         "resolve": "^1.22.1"
       }
     },
     "@rollup/plugin-replace": {
-      "version": "5.0.1",
-      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.1.tgz",
-      "integrity": "sha512-Z3MfsJ4CK17BfGrZgvrcp/l6WXoKb0kokULO+zt/7bmcyayokDaQ2K3eDJcRLCTAlp5FPI4/gz9MHAsosz4Rag==",
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/plugin-replace/-/plugin-replace-5.0.2.tgz",
+      "integrity": "sha512-M9YXNekv/C/iHHK+cvORzfRYfPbq0RDD8r0G+bMiTXjNGKulPnCT9O3Ss46WfhI6ZOCgApOP7xAdmCQJ+U2LAA==",
       "requires": {
         "@rollup/pluginutils": "^5.0.1",
-        "magic-string": "^0.26.4"
+        "magic-string": "^0.27.0"
       },
       "dependencies": {
         "magic-string": {
-          "version": "0.26.7",
-          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.26.7.tgz",
-          "integrity": "sha512-hX9XH3ziStPoPhJxLq1syWuZMxbDvGNbVchfrdCtanC7D13888bMFow61x8axrx+GfHLtVeAx2kxL7tTGRl+Ow==",
+          "version": "0.27.0",
+          "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.27.0.tgz",
+          "integrity": "sha512-8UnnX2PeRAPZuN12svgR9j7M1uWMovg/CEnIwIG0LFkXSJJe4PdfUGiTGl8V9bsBHFUtfVINcSyYxd7q+kx9fA==",
           "requires": {
-            "sourcemap-codec": "^1.4.8"
+            "@jridgewell/sourcemap-codec": "^1.4.13"
           }
         }
       }
@@ -5186,15 +6142,32 @@
       "dev": true
     },
     "@types/babel__core": {
-      "version": "7.1.20",
-      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.20.tgz",
-      "integrity": "sha512-PVb6Bg2QuscZ30FvOU7z4guG6c926D9YRvOxEaelzndpMsvP+YM74Q/dAFASpg2l6+XLalxSGxcq/lrgYWZtyQ==",
+      "version": "7.20.0",
+      "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.0.tgz",
+      "integrity": "sha512-+n8dL/9GWblDO0iU6eZAwEIJVr5DWigtle+Q6HLOrh/pdbXOhOtqzq8VPPE2zvNJzSKY4vH/z3iT3tn0A3ypiQ==",
       "requires": {
-        "@babel/parser": "^7.1.0",
-        "@babel/types": "^7.0.0",
+        "@babel/parser": "^7.20.7",
+        "@babel/types": "^7.20.7",
         "@types/babel__generator": "*",
         "@types/babel__template": "*",
         "@types/babel__traverse": "*"
+      },
+      "dependencies": {
+        "@babel/parser": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
+          "integrity": "sha512-alVJj7k7zIxqBZ7BTRhz0IqJFxW1VJbm6N8JbcYhQ186df9ZBPbZBmWSqAMXwHGsCJdYks7z/voa3ibiS5bCIw=="
+        },
+        "@babel/types": {
+          "version": "7.21.4",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.21.4.tgz",
+          "integrity": "sha512-rU2oY501qDxE8Pyo7i/Orqma4ziCOrby0/9mvbDUGEfvZjb279Nk9k19e2fiCxHbRRpY2ZyrgW1eq22mvmOIzA==",
+          "requires": {
+            "@babel/helper-string-parser": "^7.19.4",
+            "@babel/helper-validator-identifier": "^7.19.1",
+            "to-fast-properties": "^2.0.0"
+          }
+        }
       }
     },
     "@types/babel__generator": {
@@ -5276,20 +6249,20 @@
       "integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ=="
     },
     "@types/express": {
-      "version": "4.17.14",
-      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.14.tgz",
-      "integrity": "sha512-TEbt+vaPFQ+xpxFLFssxUDXj5cWCxZJjIcB7Yg0k0GMHGtgtQgpvx/MUQUeAkNbA9AAGrwkAsoeItdTgS7FMyg==",
+      "version": "4.17.17",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.17.tgz",
+      "integrity": "sha512-Q4FmmuLGBG58btUnfS1c1r/NQdlp3DMfGDGig8WhfpA2YRUtEkxAjkZb0yvplJGYdF1fsQ81iMDcH24sSCNC/Q==",
       "requires": {
         "@types/body-parser": "*",
-        "@types/express-serve-static-core": "^4.17.18",
+        "@types/express-serve-static-core": "^4.17.33",
         "@types/qs": "*",
         "@types/serve-static": "*"
       }
     },
     "@types/express-serve-static-core": {
-      "version": "4.17.31",
-      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.31.tgz",
-      "integrity": "sha512-DxMhY+NAsTwMMFHBTtJFNp5qiHKJ7TeqOo23zVEM9alT1Ml27Q3xcTH0xwxn7Q0BbMcVEJOs/7aQtUWupUQN3Q==",
+      "version": "4.17.33",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.33.tgz",
+      "integrity": "sha512-TPBqmR/HRYI3eC2E5hmiivIzv+bidAfXofM+sbonAGvyDhySGw9/PQZFt2BLOrjUUR++4eJVpx6KnLQK1Fk9tA==",
       "requires": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -5314,9 +6287,9 @@
       }
     },
     "@types/graceful-fs": {
-      "version": "4.1.5",
-      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
-      "integrity": "sha512-anKkLmZZ+xm4p8JWBf4hElkM4XR+EZeA2M9BAkkTldmcyDY4mbdIJnRghDJH3Ov5ooY7/UAoENtmdMSkaAd7Cw==",
+      "version": "4.1.6",
+      "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.6.tgz",
+      "integrity": "sha512-Sig0SNORX9fdW+bQuTEovKj3uHcUL6LQKbCrrqb1X7J6/ReAbhCXRAhc+SMejhLELFj2QcyuxmUooZ4bt5ReSw==",
       "requires": {
         "@types/node": "*"
       }
@@ -5331,9 +6304,9 @@
       }
     },
     "@types/http-proxy": {
-      "version": "1.17.9",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.9.tgz",
-      "integrity": "sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==",
+      "version": "1.17.10",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.10.tgz",
+      "integrity": "sha512-Qs5aULi+zV1bwKAg5z1PWnDXWmsn+LxIvUGv6E2+OOMYhclZMO+OXd9pYVf2gLykf2I7IV2u7oTHwChPNsvJ7g==",
       "requires": {
         "@types/node": "*"
       }
@@ -5373,6 +6346,11 @@
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
       "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ=="
     },
+    "@types/json5": {
+      "version": "0.0.29",
+      "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
+      "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ=="
+    },
     "@types/lodash": {
       "version": "4.14.191",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.191.tgz",
@@ -5420,9 +6398,9 @@
       "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA=="
     },
     "@types/prettier": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.1.tgz",
-      "integrity": "sha512-ri0UmynRRvZiiUJdiz38MmIblKK+oH30MztdBVR95dv/Ubw6neWSb8u1XpRb72L4qsZOhz+L+z9JD40SJmfWow=="
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.7.2.tgz",
+      "integrity": "sha512-KufADq8uQqo1pYKVIYzfKbJfBAc0sOeXqGbFaSpv8MRmC/zXgowNZmFcbngndGk922QDmOASEXUZCaY48gs4cg=="
     },
     "@types/prop-types": {
       "version": "15.7.5",
@@ -5445,9 +6423,9 @@
       "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw=="
     },
     "@types/react": {
-      "version": "17.0.52",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.52.tgz",
-      "integrity": "sha512-vwk8QqVODi0VaZZpDXQCmEmiOuyjEFPY7Ttaw5vjM112LOq37yz1CDJGrRJwA1fYEq4Iitd5rnjd1yWAc/bT+A==",
+      "version": "17.0.57",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.57.tgz",
+      "integrity": "sha512-e4msYpu5QDxzNrXDHunU/VPyv2M1XemGG/p7kfCjUiPtlLDCWLGQfgAMng6YyisWYxZ09mYdQlmMnyS0NfZdEg==",
       "requires": {
         "@types/prop-types": "*",
         "@types/scheduler": "*",
@@ -5455,9 +6433,9 @@
       }
     },
     "@types/react-dom": {
-      "version": "17.0.18",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.18.tgz",
-      "integrity": "sha512-rLVtIfbwyur2iFKykP2w0pl/1unw26b5td16d5xMgp7/yjTHomkyxPYChFoCr/FtEX1lN9wY6lFj1qvKdS5kDw==",
+      "version": "17.0.19",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.19.tgz",
+      "integrity": "sha512-PiYG40pnQRdPHnlf7tZnp0aQ6q9tspYr72vD61saO6zFCybLfMqwUCN0va1/P+86DXn18ZWeW30Bk7xlC5eEAQ==",
       "requires": {
         "@types/react": "^17"
       }
@@ -5479,9 +6457,9 @@
       }
     },
     "@types/react-redux": {
-      "version": "7.1.24",
-      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz",
-      "integrity": "sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ==",
+      "version": "7.1.25",
+      "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.25.tgz",
+      "integrity": "sha512-bAGh4e+w5D8dajd6InASVIyCo4pZLJ66oLb80F9OBLO1gKESbZcRCJpTT6uLXX+HAB57zw1WTdwJdAsewuTweg==",
       "requires": {
         "@types/hoist-non-react-statics": "^3.3.0",
         "@types/react": "*",
@@ -5519,19 +6497,24 @@
       "integrity": "sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q=="
     },
     "@types/scheduler": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
-      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
+      "version": "0.16.3",
+      "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.3.tgz",
+      "integrity": "sha512-5cJ8CB4yAx7BH1oMvdU0Jh9lrEXyPkar6F9G/ERswkCuvP4KQZfZkSjcMbAICCpQTN4OuZn8tz0HiKv9TGZgrQ=="
     },
     "@types/selenium-webdriver": {
       "version": "3.0.20",
       "resolved": "https://registry.npmjs.org/@types/selenium-webdriver/-/selenium-webdriver-3.0.20.tgz",
       "integrity": "sha512-6d8Q5fqS9DWOXEhMDiF6/2FjyHdmP/jSTAUyeQR7QwrFeNmYyzmvGxD5aLIHL445HjWgibs0eAig+KPnbaesXA=="
     },
+    "@types/semver": {
+      "version": "7.3.13",
+      "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz",
+      "integrity": "sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw=="
+    },
     "@types/serve-static": {
-      "version": "1.15.0",
-      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.0.tgz",
-      "integrity": "sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==",
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.15.1.tgz",
+      "integrity": "sha512-NUo5XNiAdULrJENtJXZZ3fHtfMolzZwczzBbnAeBbqBwG+LaG6YaJtuwzwGSQZ2wsCrxjEhNNjAkKigy3n8teQ==",
       "requires": {
         "@types/mime": "*",
         "@types/node": "*"
@@ -5644,57 +6627,493 @@
       "resolved": "https://registry.npmjs.org/@types/yargs-parser/-/yargs-parser-21.0.0.tgz",
       "integrity": "sha512-iO9ZQHkZxHn4mSakYV0vFHAVDyEOIJQrV2uZ06HxEPcx+mt8swXoZHIbaaJ2crJYFfErySgktuTZ3BeLz+XmFA=="
     },
-    "@vue/babel-helper-vue-jsx-merge-props": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
-      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
-    },
-    "@vue/babel-helper-vue-transform-on": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz",
-      "integrity": "sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA=="
-    },
-    "@vue/babel-plugin-jsx": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz",
-      "integrity": "sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==",
+    "@typescript-eslint/eslint-plugin": {
+      "version": "5.58.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.58.0.tgz",
+      "integrity": "sha512-vxHvLhH0qgBd3/tW6/VccptSfc8FxPQIkmNTVLWcCOVqSBvqpnKkBTYrhcGlXfSnd78azwe+PsjYFj0X34/njA==",
       "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/plugin-syntax-jsx": "^7.0.0",
-        "@babel/template": "^7.0.0",
-        "@babel/traverse": "^7.0.0",
-        "@babel/types": "^7.0.0",
-        "@vue/babel-helper-vue-transform-on": "^1.0.2",
-        "camelcase": "^6.0.0",
-        "html-tags": "^3.1.0",
-        "svg-tags": "^1.0.0"
+        "@eslint-community/regexpp": "^4.4.0",
+        "@typescript-eslint/scope-manager": "5.58.0",
+        "@typescript-eslint/type-utils": "5.58.0",
+        "@typescript-eslint/utils": "5.58.0",
+        "debug": "^4.3.4",
+        "grapheme-splitter": "^1.0.4",
+        "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
       },
       "dependencies": {
-        "camelcase": {
-          "version": "6.3.0",
-          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
-          "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="
+        "@typescript-eslint/scope-manager": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.58.0.tgz",
+          "integrity": "sha512-b+w8ypN5CFvrXWQb9Ow9T4/6LC2MikNf1viLkYTiTbkQl46CnR69w7lajz1icW0TBsYmlpg+mRzFJ4LEJ8X9NA==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "@typescript-eslint/visitor-keys": "5.58.0"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.58.0.tgz",
+          "integrity": "sha512-JYV4eITHPzVQMnHZcYJXl2ZloC7thuUHrcUmxtzvItyKPvQ50kb9QXBkgNAt90OYMqwaodQh2kHutWZl1fc+1g=="
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.58.0.tgz",
+          "integrity": "sha512-/fBraTlPj0jwdyTwLyrRTxv/3lnU2H96pNTVM6z3esTWLtA5MZ9ghSMJ7Rb+TtUAdtEw9EyJzJ0EydIMKxQ9gA==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+          "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ=="
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         }
       }
     },
-    "@vue/babel-plugin-transform-vue-jsx": {
-      "version": "1.4.0",
-      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.4.0.tgz",
-      "integrity": "sha512-Fmastxw4MMx0vlgLS4XBX0XiBbUFzoMGeVXuMV08wyOfXdikAFqBTuYPR0tlk+XskL19EzHc39SgjrPGY23JnA==",
+    "@typescript-eslint/experimental-utils": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.2.tgz",
+      "integrity": "sha512-MwHPsL6qo98RC55IoWWP8/opTykjTp4JzfPu1VfO2Z0MshNP0UZ1GEV5rYSSnZSUI8VD7iHvtIPVGW5Nfh7klQ==",
       "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@babel/plugin-syntax-jsx": "^7.2.0",
-        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
-        "html-tags": "^2.0.0",
-        "lodash.kebabcase": "^4.1.1",
-        "svg-tags": "^1.0.0"
+        "@types/json-schema": "^7.0.7",
+        "@typescript-eslint/scope-manager": "4.28.2",
+        "@typescript-eslint/types": "4.28.2",
+        "@typescript-eslint/typescript-estree": "4.28.2",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
       },
       "dependencies": {
-        "html-tags": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
-          "integrity": "sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g=="
-        }
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        }
+      }
+    },
+    "@typescript-eslint/parser": {
+      "version": "5.58.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.58.0.tgz",
+      "integrity": "sha512-ixaM3gRtlfrKzP8N6lRhBbjTow1t6ztfBvQNGuRM8qH1bjFFXIJ35XY+FC0RRBKn3C6cT+7VW1y8tNm7DwPHDQ==",
+      "requires": {
+        "@typescript-eslint/scope-manager": "5.58.0",
+        "@typescript-eslint/types": "5.58.0",
+        "@typescript-eslint/typescript-estree": "5.58.0",
+        "debug": "^4.3.4"
+      },
+      "dependencies": {
+        "@typescript-eslint/scope-manager": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.58.0.tgz",
+          "integrity": "sha512-b+w8ypN5CFvrXWQb9Ow9T4/6LC2MikNf1viLkYTiTbkQl46CnR69w7lajz1icW0TBsYmlpg+mRzFJ4LEJ8X9NA==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "@typescript-eslint/visitor-keys": "5.58.0"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.58.0.tgz",
+          "integrity": "sha512-JYV4eITHPzVQMnHZcYJXl2ZloC7thuUHrcUmxtzvItyKPvQ50kb9QXBkgNAt90OYMqwaodQh2kHutWZl1fc+1g=="
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.58.0.tgz",
+          "integrity": "sha512-cRACvGTodA+UxnYM2uwA2KCwRL7VAzo45syNysqlMyNyjw0Z35Icc9ihPJZjIYuA5bXJYiJ2YGUB59BqlOZT1Q==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "@typescript-eslint/visitor-keys": "5.58.0",
+            "debug": "^4.3.4",
+            "globby": "^11.1.0",
+            "is-glob": "^4.0.3",
+            "semver": "^7.3.7",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.58.0.tgz",
+          "integrity": "sha512-/fBraTlPj0jwdyTwLyrRTxv/3lnU2H96pNTVM6z3esTWLtA5MZ9ghSMJ7Rb+TtUAdtEw9EyJzJ0EydIMKxQ9gA==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+          "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ=="
+        },
+        "globby": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.2.9",
+            "ignore": "^5.2.0",
+            "merge2": "^1.4.1",
+            "slash": "^3.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
+    "@typescript-eslint/scope-manager": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.2.tgz",
+      "integrity": "sha512-MqbypNjIkJFEFuOwPWNDjq0nqXAKZvDNNs9yNseoGBB1wYfz1G0WHC2AVOy4XD7di3KCcW3+nhZyN6zruqmp2A==",
+      "requires": {
+        "@typescript-eslint/types": "4.28.2",
+        "@typescript-eslint/visitor-keys": "4.28.2"
+      }
+    },
+    "@typescript-eslint/type-utils": {
+      "version": "5.58.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.58.0.tgz",
+      "integrity": "sha512-FF5vP/SKAFJ+LmR9PENql7fQVVgGDOS+dq3j+cKl9iW/9VuZC/8CFmzIP0DLKXfWKpRHawJiG70rVH+xZZbp8w==",
+      "requires": {
+        "@typescript-eslint/typescript-estree": "5.58.0",
+        "@typescript-eslint/utils": "5.58.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "@typescript-eslint/types": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.58.0.tgz",
+          "integrity": "sha512-JYV4eITHPzVQMnHZcYJXl2ZloC7thuUHrcUmxtzvItyKPvQ50kb9QXBkgNAt90OYMqwaodQh2kHutWZl1fc+1g=="
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.58.0.tgz",
+          "integrity": "sha512-cRACvGTodA+UxnYM2uwA2KCwRL7VAzo45syNysqlMyNyjw0Z35Icc9ihPJZjIYuA5bXJYiJ2YGUB59BqlOZT1Q==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "@typescript-eslint/visitor-keys": "5.58.0",
+            "debug": "^4.3.4",
+            "globby": "^11.1.0",
+            "is-glob": "^4.0.3",
+            "semver": "^7.3.7",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.58.0.tgz",
+          "integrity": "sha512-/fBraTlPj0jwdyTwLyrRTxv/3lnU2H96pNTVM6z3esTWLtA5MZ9ghSMJ7Rb+TtUAdtEw9EyJzJ0EydIMKxQ9gA==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+          "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ=="
+        },
+        "globby": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.2.9",
+            "ignore": "^5.2.0",
+            "merge2": "^1.4.1",
+            "slash": "^3.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
+    "@typescript-eslint/types": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.2.tgz",
+      "integrity": "sha512-Gr15fuQVd93uD9zzxbApz3wf7ua3yk4ZujABZlZhaxxKY8ojo448u7XTm/+ETpy0V0dlMtj6t4VdDvdc0JmUhA=="
+    },
+    "@typescript-eslint/typescript-estree": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.2.tgz",
+      "integrity": "sha512-86lLstLvK6QjNZjMoYUBMMsULFw0hPHJlk1fzhAVoNjDBuPVxiwvGuPQq3fsBMCxuDJwmX87tM/AXoadhHRljg==",
+      "requires": {
+        "@typescript-eslint/types": "4.28.2",
+        "@typescript-eslint/visitor-keys": "4.28.2",
+        "debug": "^4.3.1",
+        "globby": "^11.0.3",
+        "is-glob": "^4.0.1",
+        "semver": "^7.3.5",
+        "tsutils": "^3.21.0"
+      },
+      "dependencies": {
+        "globby": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.2.9",
+            "ignore": "^5.2.0",
+            "merge2": "^1.4.1",
+            "slash": "^3.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
+    "@typescript-eslint/utils": {
+      "version": "5.58.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.58.0.tgz",
+      "integrity": "sha512-gAmLOTFXMXOC+zP1fsqm3VceKSBQJNzV385Ok3+yzlavNHZoedajjS4UyS21gabJYcobuigQPs/z71A9MdJFqQ==",
+      "requires": {
+        "@eslint-community/eslint-utils": "^4.2.0",
+        "@types/json-schema": "^7.0.9",
+        "@types/semver": "^7.3.12",
+        "@typescript-eslint/scope-manager": "5.58.0",
+        "@typescript-eslint/types": "5.58.0",
+        "@typescript-eslint/typescript-estree": "5.58.0",
+        "eslint-scope": "^5.1.1",
+        "semver": "^7.3.7"
+      },
+      "dependencies": {
+        "@typescript-eslint/scope-manager": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.58.0.tgz",
+          "integrity": "sha512-b+w8ypN5CFvrXWQb9Ow9T4/6LC2MikNf1viLkYTiTbkQl46CnR69w7lajz1icW0TBsYmlpg+mRzFJ4LEJ8X9NA==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "@typescript-eslint/visitor-keys": "5.58.0"
+          }
+        },
+        "@typescript-eslint/types": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.58.0.tgz",
+          "integrity": "sha512-JYV4eITHPzVQMnHZcYJXl2ZloC7thuUHrcUmxtzvItyKPvQ50kb9QXBkgNAt90OYMqwaodQh2kHutWZl1fc+1g=="
+        },
+        "@typescript-eslint/typescript-estree": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.58.0.tgz",
+          "integrity": "sha512-cRACvGTodA+UxnYM2uwA2KCwRL7VAzo45syNysqlMyNyjw0Z35Icc9ihPJZjIYuA5bXJYiJ2YGUB59BqlOZT1Q==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "@typescript-eslint/visitor-keys": "5.58.0",
+            "debug": "^4.3.4",
+            "globby": "^11.1.0",
+            "is-glob": "^4.0.3",
+            "semver": "^7.3.7",
+            "tsutils": "^3.21.0"
+          }
+        },
+        "@typescript-eslint/visitor-keys": {
+          "version": "5.58.0",
+          "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.58.0.tgz",
+          "integrity": "sha512-/fBraTlPj0jwdyTwLyrRTxv/3lnU2H96pNTVM6z3esTWLtA5MZ9ghSMJ7Rb+TtUAdtEw9EyJzJ0EydIMKxQ9gA==",
+          "requires": {
+            "@typescript-eslint/types": "5.58.0",
+            "eslint-visitor-keys": "^3.3.0"
+          }
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+          "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ=="
+        },
+        "globby": {
+          "version": "11.1.0",
+          "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+          "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
+          "requires": {
+            "array-union": "^2.1.0",
+            "dir-glob": "^3.0.1",
+            "fast-glob": "^3.2.9",
+            "ignore": "^5.2.0",
+            "merge2": "^1.4.1",
+            "slash": "^3.0.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "4.28.2",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.2.tgz",
+      "integrity": "sha512-aT2B4PLyyRDUVUafXzpZFoc0C9t0za4BJAKP5sgWIhG+jHECQZUEjuQSCIwZdiJJ4w4cgu5r3Kh20SOdtEBl0w==",
+      "requires": {
+        "@typescript-eslint/types": "4.28.2",
+        "eslint-visitor-keys": "^2.0.0"
+      }
+    },
+    "@vue/babel-helper-vue-jsx-merge-props": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz",
+      "integrity": "sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA=="
+    },
+    "@vue/babel-helper-vue-transform-on": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz",
+      "integrity": "sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA=="
+    },
+    "@vue/babel-plugin-jsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz",
+      "integrity": "sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.0.0",
+        "@babel/template": "^7.0.0",
+        "@babel/traverse": "^7.0.0",
+        "@babel/types": "^7.0.0",
+        "@vue/babel-helper-vue-transform-on": "^1.0.2",
+        "camelcase": "^6.0.0",
+        "html-tags": "^3.1.0",
+        "svg-tags": "^1.0.0"
+      },
+      "dependencies": {
+        "camelcase": {
+          "version": "6.3.0",
+          "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
+          "integrity": "sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA=="
+        }
+      }
+    },
+    "@vue/babel-plugin-transform-vue-jsx": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@vue/babel-plugin-transform-vue-jsx/-/babel-plugin-transform-vue-jsx-1.4.0.tgz",
+      "integrity": "sha512-Fmastxw4MMx0vlgLS4XBX0XiBbUFzoMGeVXuMV08wyOfXdikAFqBTuYPR0tlk+XskL19EzHc39SgjrPGY23JnA==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.0.0",
+        "@babel/plugin-syntax-jsx": "^7.2.0",
+        "@vue/babel-helper-vue-jsx-merge-props": "^1.4.0",
+        "html-tags": "^2.0.0",
+        "lodash.kebabcase": "^4.1.1",
+        "svg-tags": "^1.0.0"
+      },
+      "dependencies": {
+        "html-tags": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-2.0.0.tgz",
+          "integrity": "sha512-+Il6N8cCo2wB/Vd3gqy/8TZhTD3QvcVeQLCnZiGkGCH3JP28IgGAY41giccp2W4R3jfyJPAP318FQTa1yU7K7g=="
+        }
       }
     },
     "@vue/babel-preset-app": {
@@ -6192,9 +7611,9 @@
           }
         },
         "semver": {
-          "version": "7.3.8",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-          "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
           "optional": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -7017,12 +8436,12 @@
       }
     },
     "@vue/compiler-core": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.45.tgz",
-      "integrity": "sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.2.47.tgz",
+      "integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/shared": "3.2.45",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
         "source-map": "^0.6.1"
       },
@@ -7035,25 +8454,25 @@
       }
     },
     "@vue/compiler-dom": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz",
-      "integrity": "sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.2.47.tgz",
+      "integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
       "requires": {
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "@vue/compiler-sfc": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz",
-      "integrity": "sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.2.47.tgz",
+      "integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/compiler-ssr": "3.2.45",
-        "@vue/reactivity-transform": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/compiler-ssr": "3.2.47",
+        "@vue/reactivity-transform": "3.2.47",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7",
         "postcss": "^8.1.10",
@@ -7061,9 +8480,9 @@
       },
       "dependencies": {
         "postcss": {
-          "version": "8.4.19",
-          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.19.tgz",
-          "integrity": "sha512-h+pbPsyhlYj6N2ozBmHhHrs9DzGmbaarbLvWipMRO7RLS+v4onj26MPFXA5OBYFxyqYhUJK456SwDcY9H2/zsA==",
+          "version": "8.4.21",
+          "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz",
+          "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
           "requires": {
             "nanoid": "^3.3.4",
             "picocolors": "^1.0.0",
@@ -7078,12 +8497,12 @@
       }
     },
     "@vue/compiler-ssr": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz",
-      "integrity": "sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.2.47.tgz",
+      "integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
       "requires": {
-        "@vue/compiler-dom": "3.2.45",
-        "@vue/shared": "3.2.45"
+        "@vue/compiler-dom": "3.2.47",
+        "@vue/shared": "3.2.47"
       }
     },
     "@vue/component-compiler-utils": {
@@ -7114,27 +8533,37 @@
         }
       }
     },
+    "@vue/eslint-config-typescript": {
+      "version": "11.0.2",
+      "resolved": "https://registry.npmjs.org/@vue/eslint-config-typescript/-/eslint-config-typescript-11.0.2.tgz",
+      "integrity": "sha512-EiKud1NqlWmSapBFkeSrE994qpKx7/27uCGnhdqzllYDpQZroyX/O6bwjEpeuyKamvLbsGdO6PMR2faIf+zFnw==",
+      "requires": {
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "@typescript-eslint/parser": "^5.0.0",
+        "vue-eslint-parser": "^9.0.0"
+      }
+    },
     "@vue/preload-webpack-plugin": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@vue/preload-webpack-plugin/-/preload-webpack-plugin-1.1.2.tgz",
       "integrity": "sha512-LIZMuJk38pk9U9Ur4YzHjlIyMuxPlACdBIHH9/nGYVTsaGKOSnSuELiE8vS9wa+dJpIYspYUOqk+L1Q4pgHQHQ=="
     },
     "@vue/reactivity-transform": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.45.tgz",
-      "integrity": "sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==",
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/reactivity-transform/-/reactivity-transform-3.2.47.tgz",
+      "integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
       "requires": {
         "@babel/parser": "^7.16.4",
-        "@vue/compiler-core": "3.2.45",
-        "@vue/shared": "3.2.45",
+        "@vue/compiler-core": "3.2.47",
+        "@vue/shared": "3.2.47",
         "estree-walker": "^2.0.2",
         "magic-string": "^0.25.7"
       }
     },
     "@vue/shared": {
-      "version": "3.2.45",
-      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.45.tgz",
-      "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
+      "version": "3.2.47",
+      "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.47.tgz",
+      "integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
     },
     "@vue/web-component-wrapper": {
       "version": "1.3.0",
@@ -7466,6 +8895,11 @@
         }
       }
     },
+    "acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ=="
+    },
     "acorn-walk": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.2.0.tgz",
@@ -7473,14 +8907,14 @@
       "dev": true
     },
     "address": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/address/-/address-1.2.1.tgz",
-      "integrity": "sha512-B+6bi5D34+fDYENiH5qOlA0cV2rAGKuWZ9LeyUUehbXy8e0VS9e498yO0Jeeh+iM+6KbfudHTFjXw2MmJD4QRA=="
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/address/-/address-1.2.2.tgz",
+      "integrity": "sha512-4B/qKCfeE/ODUaAUpSwfzazo5x29WD4r3vXiWsB7I2mSDAihwEqKO+g8GELZUQSSAo5e1XTYh3ZVfLyxBc12nA=="
     },
     "adm-zip": {
-      "version": "0.4.16",
-      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz",
-      "integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg=="
+      "version": "0.5.10",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.5.10.tgz",
+      "integrity": "sha512-x0HvcHqVJNTPk/Bw8JbLWlWoo6Wwnsug0fnYYro1HBrjxZ3G7/AZk7Ahv8JwDe1uIcz8eBqvu86FuF1POiG7vQ=="
     },
     "after": {
       "version": "0.8.2",
@@ -7518,7 +8952,6 @@
       "version": "8.11.2",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.2.tgz",
       "integrity": "sha512-E4bfmKAhGiSTvMfL1Myyycaub+cUEU2/IvpylXkUu7CHBkBj1f/ikdzbD7YQ6FKUbixDxeYvB/xY4fvyroDlQg==",
-      "dev": true,
       "requires": {
         "fast-deep-equal": "^3.1.1",
         "json-schema-traverse": "^1.0.0",
@@ -7703,6 +9136,15 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "aria-query": {
+      "version": "4.2.2",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-4.2.2.tgz",
+      "integrity": "sha512-o/HelwhuKpTj/frsOsbNLNgnNGVIFsVP/SW2BSF14gVl7kAfMOJ6/8wUAUvG1R1NHKrfG+2sHZTu0yauT1qBrA==",
+      "requires": {
+        "@babel/runtime": "^7.10.2",
+        "@babel/runtime-corejs3": "^7.10.2"
+      }
+    },
     "arr-diff": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -7745,6 +9187,18 @@
       "integrity": "sha512-c5AMf34bKdvPhQ7tBGhqkgKNUzMr4WUs+WDtC2ZUGOUncbxKMTvqxYctiseW3+L4bA8ec+GcZ6/A/FW4m8ukng==",
       "dev": true
     },
+    "array-includes": {
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.6.tgz",
+      "integrity": "sha512-sgTbLvL6cNnw24FnbaDyjmvddQ2ML8arZsgaJhoABMoplz/4QRhtrYS+alr1BUM1Bwp6dhx8vVCBSLG+StwOFw==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
+        "is-string": "^1.0.7"
+      }
+    },
     "array-slice": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-0.2.3.tgz",
@@ -7789,6 +9243,17 @@
         "es-shim-unscopables": "^1.0.0"
       }
     },
+    "array.prototype.flatmap": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.1.tgz",
+      "integrity": "sha512-8UGn9O1FDVvMNB0UlLv4voxRMze7+FpHyF5mSMRjWHUMlpoDViniy05870VlxhfgTnLbpuwTzvD76MTtWxB/mQ==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
     "array.prototype.reduce": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/array.prototype.reduce/-/array.prototype.reduce-1.0.5.tgz",
@@ -7801,7 +9266,19 @@
         "is-string": "^1.0.7"
       }
     },
-    "arraybuffer.slice": {
+    "array.prototype.tosorted": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.1.tgz",
+      "integrity": "sha512-pZYPXPRl2PqWcsUs6LOMn+1f1532nEoPTYowBtqLwAW+W8vSVhkIGnmOX1t/UQjD6YGI0vcD2B1U7ZFGQH9jnQ==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "es-shim-unscopables": "^1.0.0",
+        "get-intrinsic": "^1.1.3"
+      }
+    },
+    "arraybuffer.slice": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/arraybuffer.slice/-/arraybuffer.slice-0.0.7.tgz",
       "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog=="
@@ -7890,8 +9367,7 @@
     "astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
-      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
-      "dev": true
+      "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ=="
     },
     "async": {
       "version": "2.6.4",
@@ -8091,6 +9567,11 @@
       "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.11.0.tgz",
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA=="
     },
+    "axobject-query": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz",
+      "integrity": "sha512-Td525n+iPOOyUQIeBfcASuG6uJsDOITl7Mds5gFyerkWiX7qhUTdYUBlSgNMyVqtSJqwpt1kXGLdUt6SykLMRA=="
+    },
     "babel-code-frame": {
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-code-frame/-/babel-code-frame-6.26.0.tgz",
@@ -9074,9 +10555,9 @@
       "integrity": "sha512-571s0T7nZWK6vB67HI5dyUF7wXiNcfaPPPTl6zYCNApANjIvYJTg7hlud/+cJpdAhS7dVzqMLmfhfHR3rAcOjQ=="
     },
     "builtin-modules": {
-      "version": "1.1.1",
-      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
-      "integrity": "sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ=="
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
+      "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw=="
     },
     "builtin-status-codes": {
       "version": "3.0.0",
@@ -9186,9 +10667,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -9478,14 +10959,14 @@
           "integrity": "sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA=="
         },
         "htmlparser2": {
-          "version": "8.0.1",
-          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.1.tgz",
-          "integrity": "sha512-4lVbmc1diZC7GUJQtRQ5yBAeUCL1exyMwmForWkRLnwyzWBFxN633SALPMGYaWZvKe9j1pRZJpauvmxENSp/EA==",
+          "version": "8.0.2",
+          "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+          "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
           "requires": {
             "domelementtype": "^2.3.0",
-            "domhandler": "^5.0.2",
+            "domhandler": "^5.0.3",
             "domutils": "^3.0.1",
-            "entities": "^4.3.0"
+            "entities": "^4.4.0"
           }
         },
         "parse5": {
@@ -10403,9 +11884,9 @@
       }
     },
     "content-type": {
-      "version": "1.0.4",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz",
-      "integrity": "sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA=="
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/content-type/-/content-type-1.0.5.tgz",
+      "integrity": "sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA=="
     },
     "conventional-changelog-angular": {
       "version": "5.0.13",
@@ -11078,9 +12559,9 @@
       "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ=="
     },
     "cookiejar": {
-      "version": "2.1.3",
-      "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.3.tgz",
-      "integrity": "sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ=="
+      "version": "2.1.4",
+      "resolved": "https://registry.npmjs.org/cookiejar/-/cookiejar-2.1.4.tgz",
+      "integrity": "sha512-LDx6oHrK+PhzLKJU9j5S7/Y3jM/mUHvD/DeI1WQmJn652iPC5Y4TBzC9l+5OMOXlyTTA+SmVUPm0HQUwpD5Jqw=="
     },
     "copy-concurrently": {
       "version": "1.0.5",
@@ -11229,9 +12710,9 @@
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -11328,13 +12809,41 @@
       "integrity": "sha512-21491RRQVzUn0GGM9Z1Jrpr6PNPxPi+Za8OM9q4tksTSnlbXXGKK1nXNg/QvwFYettXvSX6zWKCtHHfjN4puyA=="
     },
     "core-js-compat": {
-      "version": "3.26.1",
-      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.26.1.tgz",
-      "integrity": "sha512-622/KzTudvXCDLRw70iHW4KKs1aGpcRcowGWyYJr2DEBfRrd6hNJybxSWJFuZYD4ma86xhrwDDHxmDaIq4EA8A==",
+      "version": "3.30.0",
+      "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.0.tgz",
+      "integrity": "sha512-P5A2h/9mRYZFIAP+5Ab8ns6083IyVpSclU74UNvbGVQ8VM7n3n3/g2yF3AkKQ9NXz2O+ioxLbEWKnDtgsFamhg==",
       "requires": {
-        "browserslist": "^4.21.4"
+        "browserslist": "^4.21.5"
+      },
+      "dependencies": {
+        "browserslist": {
+          "version": "4.21.5",
+          "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.5.tgz",
+          "integrity": "sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==",
+          "requires": {
+            "caniuse-lite": "^1.0.30001449",
+            "electron-to-chromium": "^1.4.284",
+            "node-releases": "^2.0.8",
+            "update-browserslist-db": "^1.0.10"
+          }
+        },
+        "caniuse-lite": {
+          "version": "1.0.30001477",
+          "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001477.tgz",
+          "integrity": "sha512-lZim4iUHhGcy5p+Ri/G7m84hJwncj+Kz7S5aD4hoQfslKZJgt0tHc/hafVbqHC5bbhHb+mrW2JOUHkI5KH7toQ=="
+        },
+        "node-releases": {
+          "version": "2.0.10",
+          "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.10.tgz",
+          "integrity": "sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w=="
+        }
       }
     },
+    "core-js-pure": {
+      "version": "3.30.0",
+      "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.30.0.tgz",
+      "integrity": "sha512-+2KbMFGeBU0ln/csoPqTe0i/yfHbrd2EUhNMObsGtXMKS/RTtlkYyi+/3twLcevbgNR0yM/r0Psa3TEoQRpFMQ=="
+    },
     "core-util-is": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
@@ -11921,9 +13430,9 @@
       }
     },
     "csstype": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
-      "integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.2.tgz",
+      "integrity": "sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ=="
     },
     "currently-unhandled": {
       "version": "0.4.1",
@@ -12063,9 +13572,9 @@
       }
     },
     "decimal.js": {
-      "version": "10.4.2",
-      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.2.tgz",
-      "integrity": "sha512-ic1yEvwT6GuvaYwBLLY6/aFFgjZdySKTE8en/fkU3QICTmRtgtSlFn0u0BXN06InZwtfCelR7j8LRiDI/02iGA=="
+      "version": "10.4.3",
+      "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.4.3.tgz",
+      "integrity": "sha512-VBBaLc1MgL5XpzgIP7ny5Z6Nx3UrRkIViUkPUdtl9aya5amy3De1gsUUSB1g3+3sExYNjCAsAznmukyxCb1GRA=="
     },
     "decode-uri-component": {
       "version": "0.2.1",
@@ -12088,9 +13597,9 @@
       "dev": true
     },
     "deep-eql": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.2.tgz",
-      "integrity": "sha512-gT18+YW4CcW/DBNTwAmqTtkJh7f9qqScu2qFVlx7kCoeY9tlBu9cUcr7+I+Z/noG8INehS3xQgLpTtd/QUTn4w==",
+      "version": "4.1.3",
+      "resolved": "https://registry.npmjs.org/deep-eql/-/deep-eql-4.1.3.tgz",
+      "integrity": "sha512-WaEtAOpRA1MQ0eohqZjpGD8zdI0Ovsm8mmFhaDN8dvDZzyoUMcYDnf5Y6iu7HTXxf8JDS23qWa4a+hKCDyOPzw==",
       "requires": {
         "type-detect": "^4.0.0"
       }
@@ -12120,9 +13629,9 @@
       "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ=="
     },
     "deepmerge": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
-      "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+      "version": "4.3.1",
+      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
+      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A=="
     },
     "default-gateway": {
       "version": "5.0.5",
@@ -12484,6 +13993,14 @@
         "buffer-indexof": "^1.0.0"
       }
     },
+    "doctrine": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
+      "integrity": "sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==",
+      "requires": {
+        "esutils": "^2.0.2"
+      }
+    },
     "document-register-element": {
       "version": "1.14.10",
       "resolved": "https://registry.npmjs.org/document-register-element/-/document-register-element-1.14.10.tgz",
@@ -12862,6 +14379,21 @@
         "tapable": "^1.0.0"
       }
     },
+    "enquirer": {
+      "version": "2.3.6",
+      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
+      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
+      "requires": {
+        "ansi-colors": "^4.1.1"
+      },
+      "dependencies": {
+        "ansi-colors": {
+          "version": "4.1.3",
+          "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",
+          "integrity": "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="
+        }
+      }
+    },
     "ent": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/ent/-/ent-2.2.0.tgz",
@@ -13028,79 +14560,632 @@
       "integrity": "sha512-Um/+FxMr9CISWh0bi5Zv0iOD+4cFh5qLeks1qhAopKVAJw3drgKbKySikp7wGhDL0HPeaja0P5ULZrxLkniUVg==",
       "dev": true
     },
-    "es6-iterator": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+    "es6-iterator": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
+      "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
+      "requires": {
+        "d": "1",
+        "es5-ext": "^0.10.35",
+        "es6-symbol": "^3.1.1"
+      }
+    },
+    "es6-promise": {
+      "version": "4.2.8",
+      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
+      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
+    },
+    "es6-promisify": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
+      "integrity": "sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==",
+      "requires": {
+        "es6-promise": "^4.0.3"
+      }
+    },
+    "es6-symbol": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
+      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+      "requires": {
+        "d": "^1.0.1",
+        "ext": "^1.1.2"
+      }
+    },
+    "es6-templates": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz",
+      "integrity": "sha512-sziUVwcvQ+lOsrTyUY0Q11ilAPj+dy7AQ1E1MgSaHTaaAFTffaa08QSlGNU61iyVaroyb6nYdBV6oD7nzn6i8w==",
+      "requires": {
+        "recast": "~0.11.12",
+        "through": "~2.3.6"
+      }
+    },
+    "escalade": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
+      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
+    },
+    "escape-html": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
+      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
+    },
+    "escape-string-regexp": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
+      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+    },
+    "escodegen": {
+      "version": "1.14.3",
+      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
+      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+      "requires": {
+        "esprima": "^4.0.1",
+        "estraverse": "^4.2.0",
+        "esutils": "^2.0.2",
+        "optionator": "^0.8.1",
+        "source-map": "~0.6.1"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "optional": true
+        }
+      }
+    },
+    "eslint": {
+      "version": "7.32.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.32.0.tgz",
+      "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
+      "requires": {
+        "@babel/code-frame": "7.12.11",
+        "@eslint/eslintrc": "^0.4.3",
+        "@humanwhocodes/config-array": "^0.5.0",
+        "ajv": "^6.10.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.2",
+        "debug": "^4.0.1",
+        "doctrine": "^3.0.0",
+        "enquirer": "^2.3.5",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^2.1.0",
+        "eslint-visitor-keys": "^2.0.0",
+        "espree": "^7.3.1",
+        "esquery": "^1.4.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^6.0.1",
+        "functional-red-black-tree": "^1.0.1",
+        "glob-parent": "^5.1.2",
+        "globals": "^13.6.0",
+        "ignore": "^4.0.6",
+        "import-fresh": "^3.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "js-yaml": "^3.13.1",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "levn": "^0.4.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.0.4",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.1",
+        "progress": "^2.0.0",
+        "regexpp": "^3.1.0",
+        "semver": "^7.2.1",
+        "strip-ansi": "^6.0.0",
+        "strip-json-comments": "^3.1.0",
+        "table": "^6.0.9",
+        "text-table": "^0.2.0",
+        "v8-compile-cache": "^2.0.3"
+      },
+      "dependencies": {
+        "@babel/code-frame": {
+          "version": "7.12.11",
+          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
+          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+          "requires": {
+            "@babel/highlight": "^7.10.4"
+          }
+        },
+        "acorn": {
+          "version": "7.4.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
+          "integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
+        },
+        "ajv": {
+          "version": "6.12.6",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
+          "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "fast-json-stable-stringify": "^2.0.0",
+            "json-schema-traverse": "^0.4.1",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "cross-spawn": {
+          "version": "7.0.3",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+          "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+          "requires": {
+            "path-key": "^3.1.0",
+            "shebang-command": "^2.0.0",
+            "which": "^2.0.1"
+          }
+        },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA=="
+        },
+        "eslint-scope": {
+          "version": "5.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
+          "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^4.1.1"
+          }
+        },
+        "eslint-utils": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
+          "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+          "requires": {
+            "eslint-visitor-keys": "^1.1.0"
+          },
+          "dependencies": {
+            "eslint-visitor-keys": {
+              "version": "1.3.0",
+              "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+              "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
+            }
+          }
+        },
+        "espree": {
+          "version": "7.3.1",
+          "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
+          "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+          "requires": {
+            "acorn": "^7.4.0",
+            "acorn-jsx": "^5.3.1",
+            "eslint-visitor-keys": "^1.3.0"
+          },
+          "dependencies": {
+            "eslint-visitor-keys": {
+              "version": "1.3.0",
+              "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
+              "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ=="
+            }
+          }
+        },
+        "globals": {
+          "version": "13.20.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.20.0.tgz",
+          "integrity": "sha512-Qg5QtVkCy/kv3FUSlu4ukeZDVf9ee0iXLAUYX13gbR17bnejFTzr4iS9bY7kwCf1NztRNm1t91fjOiyx4CSwPQ==",
+          "requires": {
+            "type-fest": "^0.20.2"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "ignore": {
+          "version": "4.0.6",
+          "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
+          "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg=="
+        },
+        "import-fresh": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
+          "integrity": "sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==",
+          "requires": {
+            "parent-module": "^1.0.0",
+            "resolve-from": "^4.0.0"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+          "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
+        },
+        "levn": {
+          "version": "0.4.1",
+          "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+          "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+          "requires": {
+            "prelude-ls": "^1.2.1",
+            "type-check": "~0.4.0"
+          }
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "optionator": {
+          "version": "0.9.1",
+          "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.1.tgz",
+          "integrity": "sha512-74RlY5FCnhq4jRxVUPKDaRwrVNXMqsGsiW6AJw4XK8hmtm10wC0ypZBLw5IIp85NZMr91+qd1RvvENwg7jjRFw==",
+          "requires": {
+            "deep-is": "^0.1.3",
+            "fast-levenshtein": "^2.0.6",
+            "levn": "^0.4.1",
+            "prelude-ls": "^1.2.1",
+            "type-check": "^0.4.0",
+            "word-wrap": "^1.2.3"
+          }
+        },
+        "path-key": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz",
+          "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="
+        },
+        "prelude-ls": {
+          "version": "1.2.1",
+          "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+          "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g=="
+        },
+        "resolve-from": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+          "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+        },
+        "semver": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "shebang-command": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
+          "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==",
+          "requires": {
+            "shebang-regex": "^3.0.0"
+          }
+        },
+        "shebang-regex": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz",
+          "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A=="
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        },
+        "strip-json-comments": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+          "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "type-check": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+          "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+          "requires": {
+            "prelude-ls": "^1.2.1"
+          }
+        },
+        "type-fest": {
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ=="
+        },
+        "which": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
+          "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==",
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
+    "eslint-config-prettier": {
+      "version": "8.8.0",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-8.8.0.tgz",
+      "integrity": "sha512-wLbQiFre3tdGgpDv67NQKnJuTlcUVYHas3k+DZCc2U2BadthoEY4B7hLPvAxaqdyOGCzuLfii2fqGph10va7oA=="
+    },
+    "eslint-import-resolver-node": {
+      "version": "0.3.7",
+      "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.7.tgz",
+      "integrity": "sha512-gozW2blMLJCeFpBwugLTGyvVjNoeo1knonXAcatC6bjPBZitotxdWf7Gimr25N4c0AAOo4eOUfaG82IJPDpqCA==",
+      "requires": {
+        "debug": "^3.2.7",
+        "is-core-module": "^2.11.0",
+        "resolve": "^1.22.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
+      }
+    },
+    "eslint-module-utils": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/eslint-module-utils/-/eslint-module-utils-2.7.4.tgz",
+      "integrity": "sha512-j4GT+rqzCoRKHwURX7pddtIPGySnX9Si/cgMI5ztrcqOPtk5dDEeZ34CQVPphnqkJytlc97Vuk05Um2mJ3gEQA==",
       "requires": {
-        "d": "1",
-        "es5-ext": "^0.10.35",
-        "es6-symbol": "^3.1.1"
+        "debug": "^3.2.7"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        }
       }
     },
-    "es6-promise": {
-      "version": "4.2.8",
-      "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-4.2.8.tgz",
-      "integrity": "sha512-HJDGx5daxeIvxdBxvG2cb9g4tEvwIk3i8+nhX0yGrYmZUzbkdg8QbDevheDB8gd0//uPj4c1EQua8Q+MViT0/w=="
-    },
-    "es6-promisify": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/es6-promisify/-/es6-promisify-5.0.0.tgz",
-      "integrity": "sha512-C+d6UdsYDk0lMebHNR4S2NybQMMngAOnOwYBQjTOiv0MkoJMP0Myw2mgpDLBcpfCmRLxyFqYhS/CfOENq4SJhQ==",
+    "eslint-plugin-import": {
+      "version": "2.27.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.27.5.tgz",
+      "integrity": "sha512-LmEt3GVofgiGuiE+ORpnvP+kAm3h6MLZJ4Q5HCyHADofsb4VzXFsRiWj3c0OFiV+3DWFh0qg3v9gcPlfc3zRow==",
       "requires": {
-        "es6-promise": "^4.0.3"
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "array.prototype.flatmap": "^1.3.1",
+        "debug": "^3.2.7",
+        "doctrine": "^2.1.0",
+        "eslint-import-resolver-node": "^0.3.7",
+        "eslint-module-utils": "^2.7.4",
+        "has": "^1.0.3",
+        "is-core-module": "^2.11.0",
+        "is-glob": "^4.0.3",
+        "minimatch": "^3.1.2",
+        "object.values": "^1.1.6",
+        "resolve": "^1.22.1",
+        "semver": "^6.3.0",
+        "tsconfig-paths": "^3.14.1"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        }
       }
     },
-    "es6-symbol": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmjs.org/es6-symbol/-/es6-symbol-3.1.3.tgz",
-      "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
+    "eslint-plugin-prettier": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-4.2.1.tgz",
+      "integrity": "sha512-f/0rXLXUt0oFYs8ra4w49wYZBG5GKZpAYsJSm6rnYL5uVDjd+zowwMwVZHnAjf4edNrKpCDYfXDgmRE/Ak7QyQ==",
       "requires": {
-        "d": "^1.0.1",
-        "ext": "^1.1.2"
+        "prettier-linter-helpers": "^1.0.0"
       }
     },
-    "es6-templates": {
-      "version": "0.2.3",
-      "resolved": "https://registry.npmjs.org/es6-templates/-/es6-templates-0.2.3.tgz",
-      "integrity": "sha512-sziUVwcvQ+lOsrTyUY0Q11ilAPj+dy7AQ1E1MgSaHTaaAFTffaa08QSlGNU61iyVaroyb6nYdBV6oD7nzn6i8w==",
+    "eslint-plugin-prettier-vue": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier-vue/-/eslint-plugin-prettier-vue-4.2.0.tgz",
+      "integrity": "sha512-DA2oNRx+pZ6RM/EIHIPME4FQZifnkEROa55OWtTTUFGHpj53tcHomuxVP/kS/2MM+ul46GEK+jymK69STWDWoA==",
       "requires": {
-        "recast": "~0.11.12",
-        "through": "~2.3.6"
+        "@vue/compiler-sfc": "^3.2.37",
+        "chalk": "^4.0.0",
+        "prettier": "^2.7.1",
+        "prettier-linter-helpers": "^1.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
       }
     },
-    "escalade": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
-      "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
-    },
-    "escape-html": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz",
-      "integrity": "sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow=="
-    },
-    "escape-string-regexp": {
-      "version": "1.0.5",
-      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha512-vbRorB5FUQWvla16U8R/qgaFIya2qGzwDrNmCZuYKrbdSUMG6I1ZCGQRefkRVhuOkIGVne7BQ35DSfo1qvJqFg=="
+    "eslint-plugin-react": {
+      "version": "7.32.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.32.2.tgz",
+      "integrity": "sha512-t2fBMa+XzonrrNkyVirzKlvn5RXzzPwRHtMvLAtVZrt8oxgnTQaYbU6SXTOO1mwQgp1y5+toMSKInnzGr0Knqg==",
+      "requires": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flatmap": "^1.3.1",
+        "array.prototype.tosorted": "^1.1.1",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.6",
+        "object.fromentries": "^2.0.6",
+        "object.hasown": "^1.1.2",
+        "object.values": "^1.1.6",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.4",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.8"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+        },
+        "resolve": {
+          "version": "2.0.0-next.4",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.4.tgz",
+          "integrity": "sha512-iMDbmAWtfU+MHpxt/I5iWI7cY6YVEZUQ3MBgPQ++XD1PELuJHIl82xBmObyP2KyQmkNB2dsqF7seoQQiAn5yDQ==",
+          "requires": {
+            "is-core-module": "^2.9.0",
+            "path-parse": "^1.0.7",
+            "supports-preserve-symlinks-flag": "^1.0.0"
+          }
+        }
+      }
     },
-    "escodegen": {
-      "version": "1.14.3",
-      "resolved": "https://registry.npmjs.org/escodegen/-/escodegen-1.14.3.tgz",
-      "integrity": "sha512-qFcX0XJkdg+PB3xjZZG/wKSuT1PnQWx57+TVSjIMmILd2yC/6ByYElPwJnslDsuWuSAp4AwJGumarAAmJch5Kw==",
+    "eslint-plugin-vue": {
+      "version": "9.10.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-9.10.0.tgz",
+      "integrity": "sha512-2MgP31OBf8YilUvtakdVMc8xVbcMp7z7/iQj8LHVpXrSXHPXSJRUIGSPFI6b6pyCx/buKaFJ45ycqfHvQRiW2g==",
       "requires": {
-        "esprima": "^4.0.1",
-        "estraverse": "^4.2.0",
-        "esutils": "^2.0.2",
-        "optionator": "^0.8.1",
-        "source-map": "~0.6.1"
+        "@eslint-community/eslint-utils": "^4.3.0",
+        "natural-compare": "^1.4.0",
+        "nth-check": "^2.0.1",
+        "postcss-selector-parser": "^6.0.9",
+        "semver": "^7.3.5",
+        "vue-eslint-parser": "^9.0.1",
+        "xml-name-validator": "^4.0.0"
       },
       "dependencies": {
-        "source-map": {
-          "version": "0.6.1",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
-          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
-          "optional": true
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "nth-check": {
+          "version": "2.1.1",
+          "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-2.1.1.tgz",
+          "integrity": "sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==",
+          "requires": {
+            "boolbase": "^1.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "xml-name-validator": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/xml-name-validator/-/xml-name-validator-4.0.0.tgz",
+          "integrity": "sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw=="
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         }
       }
     },
@@ -13113,6 +15198,19 @@
         "estraverse": "^4.1.1"
       }
     },
+    "eslint-utils": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
+      "requires": {
+        "eslint-visitor-keys": "^2.0.0"
+      }
+    },
+    "eslint-visitor-keys": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw=="
+    },
     "esm": {
       "version": "3.2.25",
       "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
@@ -13131,6 +15229,23 @@
         "xtend": "^4.0.0"
       }
     },
+    "espree": {
+      "version": "9.5.1",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.5.1.tgz",
+      "integrity": "sha512-5yxtHSZXRSW5pvv3hAlXM5+/Oswi1AUFqBmbibKb5s6bp3rGIDkyXU6xCoyuuLhijr4SFwPrXRoZjz0AZDN9tg==",
+      "requires": {
+        "acorn": "^8.8.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.4.0"
+      },
+      "dependencies": {
+        "eslint-visitor-keys": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+          "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ=="
+        }
+      }
+    },
     "esprima": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz",
@@ -13153,6 +15268,21 @@
         }
       }
     },
+    "esquery": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz",
+      "integrity": "sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==",
+      "requires": {
+        "estraverse": "^5.1.0"
+      },
+      "dependencies": {
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+        }
+      }
+    },
     "esrecurse": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
@@ -13573,8 +15703,7 @@
     "fast-diff": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
-      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w==",
-      "dev": true
+      "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
     },
     "fast-glob": {
       "version": "3.2.12",
@@ -13646,6 +15775,14 @@
         "escape-string-regexp": "^1.0.5"
       }
     },
+    "file-entry-cache": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
+      "integrity": "sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==",
+      "requires": {
+        "flat-cache": "^3.0.4"
+      }
+    },
     "file-loader": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/file-loader/-/file-loader-4.3.0.tgz",
@@ -13656,9 +15793,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -13905,10 +16042,19 @@
         }
       }
     },
+    "flat-cache": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz",
+      "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==",
+      "requires": {
+        "flatted": "^3.1.0",
+        "rimraf": "^3.0.2"
+      }
+    },
     "flatted": {
-      "version": "2.0.2",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
-      "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA=="
+      "version": "3.2.7",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.7.tgz",
+      "integrity": "sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ=="
     },
     "flush-write-stream": {
       "version": "1.1.1",
@@ -14134,9 +16280,9 @@
       },
       "dependencies": {
         "qs": {
-          "version": "6.11.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "version": "6.11.1",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
+          "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
           "requires": {
             "side-channel": "^1.0.4"
           }
@@ -14185,9 +16331,9 @@
       }
     },
     "fs-extra": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz",
-      "integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==",
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.1.tgz",
+      "integrity": "sha512-MGIE4HOvQCeUCzmlHs0vXpih4ysz4wg9qiSAu6cd42lVwPbTM1TjV7RusoyQqMmk/95gdQZX72u+YW+c3eEpFQ==",
       "requires": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -14257,6 +16403,11 @@
         "functions-have-names": "^1.2.2"
       }
     },
+    "functional-red-black-tree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
+      "integrity": "sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g=="
+    },
     "functions-have-names": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
@@ -14874,6 +17025,11 @@
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.10.tgz",
       "integrity": "sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA=="
     },
+    "grapheme-splitter": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz",
+      "integrity": "sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ=="
+    },
     "graphlib": {
       "version": "2.1.8",
       "resolved": "https://registry.npmjs.org/graphlib/-/graphlib-2.1.8.tgz",
@@ -15274,9 +17430,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -15336,9 +17492,9 @@
       }
     },
     "html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg=="
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ=="
     },
     "html-webpack-plugin": {
       "version": "3.2.0",
@@ -16044,18 +18200,11 @@
       "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
     },
     "is-builtin-module": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.0.tgz",
-      "integrity": "sha512-phDA4oSGt7vl1n5tJvTWooWWAsXLY+2xCnxNqvKhGEzujg+A43wPlPOyDg3C8XQHN+6k/JTQWJ/j0dQh/qr+Hw==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/is-builtin-module/-/is-builtin-module-3.2.1.tgz",
+      "integrity": "sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==",
       "requires": {
         "builtin-modules": "^3.3.0"
-      },
-      "dependencies": {
-        "builtin-modules": {
-          "version": "3.3.0",
-          "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.3.0.tgz",
-          "integrity": "sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw=="
-        }
       }
     },
     "is-callable": {
@@ -16649,9 +18798,9 @@
           "integrity": "sha512-4JD/Ivzg7PoW8NzdrBSr3UFwC9mHgvI7Z6z3QGBsSHgKaRTUDmyZAAKJo2UbG1kUVfS9WS8bi36N49U1xw43DA=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -17065,9 +19214,9 @@
           "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw=="
         },
         "@types/yargs": {
-          "version": "15.0.14",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
-          "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
+          "version": "15.0.15",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz",
+          "integrity": "sha512-IziEYMU9XoVj8hWg7k+UJrXALkGFjWJhn5QFEv9q4p+v40oZhSuC135M38st8XPjICL7Ey4TV64ferBGUoJhBg==",
           "requires": {
             "@types/yargs-parser": "*"
           }
@@ -17730,9 +19879,9 @@
           },
           "dependencies": {
             "semver": {
-              "version": "7.3.8",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-              "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+              "version": "7.4.0",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+              "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
               "requires": {
                 "lru-cache": "^6.0.0"
               }
@@ -17846,9 +19995,9 @@
           },
           "dependencies": {
             "semver": {
-              "version": "7.3.8",
-              "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-              "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+              "version": "7.4.0",
+              "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+              "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
               "optional": true,
               "requires": {
                 "lru-cache": "^6.0.0"
@@ -19132,9 +21281,9 @@
           }
         },
         "glob": {
-          "version": "8.0.3",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-8.0.3.tgz",
-          "integrity": "sha512-ull455NHSHI/Y1FqGaaYFaLGkNMMJbavMrEGFXG/PGrg6y7sutWHUHrz6gy6WEBH6akM1M414dWKCNs+IhKdiQ==",
+          "version": "8.1.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-8.1.0.tgz",
+          "integrity": "sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==",
           "requires": {
             "fs.realpath": "^1.0.0",
             "inflight": "^1.0.4",
@@ -19144,9 +21293,9 @@
           }
         },
         "minimatch": {
-          "version": "5.1.1",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.1.tgz",
-          "integrity": "sha512-362NP+zlprccbEt/SkxKfRMHnNY85V74mVnpUpNyr3F35covl09Kec7/sEFLt3RA4oXmewtoaanoIf67SE5Y5g==",
+          "version": "5.1.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.1.6.tgz",
+          "integrity": "sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==",
           "requires": {
             "brace-expansion": "^2.0.1"
           }
@@ -19337,14 +21486,12 @@
     "json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
-      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "dev": true
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug=="
     },
     "json-stable-stringify-without-jsonify": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
-      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
-      "dev": true
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw=="
     },
     "json-stringify-safe": {
       "version": "5.0.1",
@@ -19382,6 +21529,15 @@
         "verror": "1.10.0"
       }
     },
+    "jsx-ast-utils": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
+      "integrity": "sha512-fYQHZTZ8jSfmWZ0iyzfwiU4WDX4HpHbMCZ3gPlWYiCl3BoeOTsqKBqnTVfH2rYT7eP5c3sVbeSPHnnJOaTrWiw==",
+      "requires": {
+        "array-includes": "^3.1.5",
+        "object.assign": "^4.1.3"
+      }
+    },
     "jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -19524,6 +21680,11 @@
             }
           }
         },
+        "flatted": {
+          "version": "2.0.2",
+          "resolved": "https://registry.npmjs.org/flatted/-/flatted-2.0.2.tgz",
+          "integrity": "sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA=="
+        },
         "fsevents": {
           "version": "1.2.13",
           "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz",
@@ -19686,9 +21847,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -20094,8 +22255,7 @@
     "lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
-      "dev": true
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
     },
     "lodash.set": {
       "version": "4.3.2",
@@ -20132,6 +22292,11 @@
       "resolved": "https://registry.npmjs.org/lodash.transform/-/lodash.transform-4.6.0.tgz",
       "integrity": "sha512-LO37ZnhmBVx0GvOU/caQuipEh4GN82TcWv3yHlebGDgOxbxiwwzW5Pcx2AcvpIv2WmvmSMoC492yQFNhy/l/UQ=="
     },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw=="
+    },
     "lodash.uniq": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.uniq/-/lodash.uniq-4.5.0.tgz",
@@ -20412,9 +22577,9 @@
       }
     },
     "memfs": {
-      "version": "3.4.12",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.12.tgz",
-      "integrity": "sha512-BcjuQn6vfqP+k100e0E9m61Hyqa//Brp+I3f0OBmN0ATHlFA8vx3Lt8z57R3u2bPqe3WGDBC+nF72fTH7isyEw==",
+      "version": "3.5.0",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.5.0.tgz",
+      "integrity": "sha512-yK6o8xVJlQerz57kvPROwTMgx5WtGwC2ZxDtOUsnGl49rHjYkfQoPNZPCKH73VdLE1BwBu/+Fx/NL8NYMUw2aA==",
       "optional": true,
       "requires": {
         "fs-monkey": "^1.0.3"
@@ -20591,9 +22756,9 @@
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -21309,9 +23474,9 @@
           }
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -21560,9 +23725,9 @@
       "integrity": "sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ=="
     },
     "nanoid": {
-      "version": "3.3.4",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
-      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
+      "version": "3.3.6",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
+      "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA=="
     },
     "nanomatch": {
       "version": "1.2.13",
@@ -21592,6 +23757,11 @@
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw=="
     },
+    "natural-compare-lite": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g=="
+    },
     "nearley": {
       "version": "2.20.1",
       "resolved": "https://registry.npmjs.org/nearley/-/nearley-2.20.1.tgz",
@@ -22059,9 +24229,9 @@
       "integrity": "sha512-4jbtZXNAsfZbAHiiqjLPBiCl16dES1zI4Hpzzxw61Tk+loF+sBDBKx1ICKKKwIqQ7M0mFn1TmkN7euSncWgHiQ=="
     },
     "nwsapi": {
-      "version": "2.2.2",
-      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.2.tgz",
-      "integrity": "sha512-90yv+6538zuvUMnN+zCr8LuV6bPFdq50304114vJYJ8RDyK8D5O9Phpbd6SZWgI7PwzmmfN1upeOJlvybDSgCw=="
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.3.tgz",
+      "integrity": "sha512-jscxIO4/VKScHlbmFBdV1Z6LXnLO+ZR4VMtypudUdfwtKxUN3TQcNFIHLwKtrUbDyHN4/GycY9+oRGZ2XMXYPw=="
     },
     "nyc": {
       "version": "15.1.0",
@@ -22332,6 +24502,15 @@
         "es-abstract": "^1.20.4"
       }
     },
+    "object.hasown": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.2.tgz",
+      "integrity": "sha512-B5UIT3J1W+WuWIU55h0mjlwaqxiE5vYENJXIXZ4VFe05pNYrkKuK0U/6aFcb0pKywYJh7IhfoqUfKVmrJJHZHw==",
+      "requires": {
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4"
+      }
+    },
     "object.pick": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
@@ -23300,9 +25479,9 @@
           "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -23736,9 +25915,17 @@
       "dev": true
     },
     "prettier": {
-      "version": "1.19.1",
-      "resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
-      "integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew=="
+      "version": "2.8.4",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.4.tgz",
+      "integrity": "sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw=="
+    },
+    "prettier-linter-helpers": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
+      "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
+      "requires": {
+        "fast-diff": "^1.1.2"
+      }
     },
     "pretty": {
       "version": "2.0.0",
@@ -24155,11 +26342,11 @@
           "integrity": "sha512-KKNVtd6pCYgPIKU4cp2733HWYCpplQhddZLBUryaAHou723x+FRzQ5Df824Fj+IyyuiQTRoub4SnIFfIcrp70g=="
         },
         "webdriver-manager": {
-          "version": "12.1.8",
-          "resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-12.1.8.tgz",
-          "integrity": "sha512-qJR36SXG2VwKugPcdwhaqcLQOD7r8P2Xiv9sfNbfZrKBnX243iAkOueX1yAmeNgIKhJ3YAT/F2gq6IiEZzahsg==",
+          "version": "12.1.9",
+          "resolved": "https://registry.npmjs.org/webdriver-manager/-/webdriver-manager-12.1.9.tgz",
+          "integrity": "sha512-Yl113uKm8z4m/KMUVWHq1Sjtla2uxEBtx2Ue3AmIlnlPAKloDn/Lvmy6pqWCUersVISpdMeVpAaGbNnvMuT2LQ==",
           "requires": {
-            "adm-zip": "^0.4.9",
+            "adm-zip": "^0.5.2",
             "chalk": "^1.1.1",
             "del": "^2.2.0",
             "glob": "^7.0.3",
@@ -24773,9 +26960,9 @@
       }
     },
     "redux": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz",
-      "integrity": "sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-4.2.1.tgz",
+      "integrity": "sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w==",
       "requires": {
         "@babel/runtime": "^7.9.2"
       }
@@ -24838,6 +27025,11 @@
         "functions-have-names": "^1.2.2"
       }
     },
+    "regexpp": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg=="
+    },
     "regexpu-core": {
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/regexpu-core/-/regexpu-core-5.2.2.tgz",
@@ -25104,8 +27296,7 @@
     "require-from-string": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
-      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
-      "dev": true
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw=="
     },
     "require-main-filename": {
       "version": "2.0.0",
@@ -25340,9 +27531,9 @@
       }
     },
     "rollup-plugin-import-css": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-import-css/-/rollup-plugin-import-css-3.1.0.tgz",
-      "integrity": "sha512-+azurUk2QrUNWs1V5EzpuvV9bRQDEjG+aQDadM6ZEc5LbU6VvFiR3+MPIBnqKrg/miBNag/9H1TWhEUv4TH+jQ==",
+      "version": "3.2.1",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-import-css/-/rollup-plugin-import-css-3.2.1.tgz",
+      "integrity": "sha512-svr1JrBknT5ndEUM8nPaemTx/uF/5Tf4FAMQxvAYx2K9Sx7hL+JwB/rPuB1ZmUE1rjCnQHnz/fgik+noYM5+0w==",
       "requires": {
         "@rollup/pluginutils": "^5.0.2"
       }
@@ -25382,11 +27573,12 @@
       }
     },
     "rollup-plugin-visualizer": {
-      "version": "5.8.3",
-      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.8.3.tgz",
-      "integrity": "sha512-QGJk4Bqe4AOat5AjipOh8esZH1nck5X2KFpf4VytUdSUuuuSwvIQZjMGgjcxe/zXexltqaXp5Vx1V3LmnQH15Q==",
+      "version": "5.9.0",
+      "resolved": "https://registry.npmjs.org/rollup-plugin-visualizer/-/rollup-plugin-visualizer-5.9.0.tgz",
+      "integrity": "sha512-bbDOv47+Bw4C/cgs0czZqfm8L82xOZssk4ayZjG40y9zbXclNk7YikrZTDao6p7+HDiGxrN0b65SgZiVm9k1Cg==",
       "requires": {
         "open": "^8.4.0",
+        "picomatch": "^2.3.1",
         "source-map": "^0.7.4",
         "yargs": "^17.5.1"
       },
@@ -25415,9 +27607,9 @@
           }
         },
         "open": {
-          "version": "8.4.0",
-          "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
-          "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
+          "version": "8.4.2",
+          "resolved": "https://registry.npmjs.org/open/-/open-8.4.2.tgz",
+          "integrity": "sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==",
           "requires": {
             "define-lazy-prop": "^2.0.0",
             "is-docker": "^2.1.1",
@@ -25438,9 +27630,9 @@
           }
         },
         "yargs": {
-          "version": "17.6.2",
-          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.6.2.tgz",
-          "integrity": "sha512-1/9UrdHjDZc0eOU0HxOHoS78C69UD3JRMvzlJ7S79S2nTaWRA/whGCTV8o9e/N/1Va9YIV7Q4sOxD8VV4pCWOw==",
+          "version": "17.7.1",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.1.tgz",
+          "integrity": "sha512-cwiTb08Xuv5fqF4AovYacTFNxk62th7LKJ6BL9IGUpTJrWoU7/7WdQGTP2SjKf1dUNBGzDd28p/Yfs/GI6JrLw==",
           "requires": {
             "cliui": "^8.0.1",
             "escalade": "^3.1.1",
@@ -26051,9 +28243,9 @@
       "integrity": "sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ=="
     },
     "shell-quote": {
-      "version": "1.7.4",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.7.4.tgz",
-      "integrity": "sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw=="
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA=="
     },
     "shelljs": {
       "version": "0.8.5",
@@ -26641,9 +28833,9 @@
       },
       "dependencies": {
         "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
           "requires": {
             "inherits": "^2.0.3",
             "string_decoder": "^1.1.1",
@@ -26896,6 +29088,21 @@
         }
       }
     },
+    "string.prototype.matchall": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.8.tgz",
+      "integrity": "sha512-6zOCOcJ+RJAQshcTvXPHoxoQGONa3e/Lqx90wUA+wEzX78sg5Bo+1tQo4N0pohS0erG9qtCqJDjNCQBjeWVxyg==",
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.20.4",
+        "get-intrinsic": "^1.1.3",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.3",
+        "side-channel": "^1.0.4"
+      }
+    },
     "string.prototype.padend": {
       "version": "3.1.4",
       "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.4.tgz",
@@ -27078,17 +29285,17 @@
           }
         },
         "qs": {
-          "version": "6.11.0",
-          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.0.tgz",
-          "integrity": "sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==",
+          "version": "6.11.1",
+          "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.1.tgz",
+          "integrity": "sha512-0wsrzgTz/kAVIeuxSjnpGC56rzYtr6JT/2BwEvMaPhFIoYa1aGO8LbzuU1R0uUYQkLpWBTOj0l/CLAJB64J6nQ==",
           "requires": {
             "side-channel": "^1.0.4"
           }
         },
         "readable-stream": {
-          "version": "3.6.0",
-          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
-          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "version": "3.6.2",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.2.tgz",
+          "integrity": "sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==",
           "requires": {
             "inherits": "^2.0.3",
             "string_decoder": "^1.1.1",
@@ -27096,9 +29303,9 @@
           }
         },
         "semver": {
-          "version": "7.3.8",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-          "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -27239,14 +29446,72 @@
       "integrity": "sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw=="
     },
     "symlink-dir": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/symlink-dir/-/symlink-dir-5.1.0.tgz",
-      "integrity": "sha512-nrwSDbmMYGwc+wu6gzmTdQIV9GzItMG/0LX4c9Co0bhtx2KK1WUKjNIyhjhAdIKaA5eIwVhB2tqFsn8ooUsRKA==",
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/symlink-dir/-/symlink-dir-5.1.1.tgz",
+      "integrity": "sha512-kmVV2SfdoDksjJxStJ5N9u1ZZ5tQndCeUEG8St0tHI9BZe/ehZYbKB6eXPjo+AvFG1uRsDymUSGG0OLv2Ox8aQ==",
       "requires": {
         "better-path-resolve": "^1.0.0",
         "rename-overwrite": "^4.0.3"
       }
     },
+    "table": {
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.8.1.tgz",
+      "integrity": "sha512-Y4X9zqrCftUhMeH2EptSSERdVKt/nEdijTOacGD/97EKjhQ/Qs8RTlEGABSJNNN8lac9kheH+af7yAkEWlgneA==",
+      "requires": {
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
+        "slice-ansi": "^4.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
+      },
+      "dependencies": {
+        "ansi-regex": {
+          "version": "5.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+          "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "slice-ansi": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz",
+          "integrity": "sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "astral-regex": "^2.0.0",
+            "is-fullwidth-code-point": "^3.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+          "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+          "requires": {
+            "ansi-regex": "^5.0.1"
+          }
+        }
+      }
+    },
     "tapable": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
@@ -27480,6 +29745,11 @@
       "integrity": "sha512-wiBrwC1EhBelW12Zy26JeOUkQ5mRu+5o8rpsJk5+2t+Y5vE7e842qtZDQ2g1NpX/29HdyFeJ4nSIhI47ENSxlQ==",
       "dev": true
     },
+    "text-table": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
+      "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+    },
     "thenify": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
@@ -27507,9 +29777,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -27756,9 +30026,9 @@
           }
         },
         "@types/yargs": {
-          "version": "15.0.14",
-          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.14.tgz",
-          "integrity": "sha512-yEJzHoxf6SyQGhBhIYGXQDSCkJjB6HohDShto7m8vaKg9Yp0Yn8+71J9eakh2bnPg6BfsH9PRMhiRTZnd4eXGQ==",
+          "version": "15.0.15",
+          "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.15.tgz",
+          "integrity": "sha512-IziEYMU9XoVj8hWg7k+UJrXALkGFjWJhn5QFEv9q4p+v40oZhSuC135M38st8XPjICL7Ey4TV64ferBGUoJhBg==",
           "requires": {
             "@types/yargs-parser": "*"
           }
@@ -27825,9 +30095,9 @@
           "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw=="
         },
         "semver": {
-          "version": "7.3.8",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.8.tgz",
-          "integrity": "sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==",
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
           "requires": {
             "lru-cache": "^6.0.0"
           }
@@ -27921,10 +30191,31 @@
         "strip-json-comments": "^2.0.0"
       }
     },
+    "tsconfig-paths": {
+      "version": "3.14.2",
+      "resolved": "https://registry.npmjs.org/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz",
+      "integrity": "sha512-o/9iXgCYc5L/JxCHPe3Hvh8Q/2xm5Z+p18PESBU6Ff33695QnCHBEjcytY2q19ua7Mbl/DavtBOLq+oG0RCL+g==",
+      "requires": {
+        "@types/json5": "^0.0.29",
+        "json5": "^1.0.2",
+        "minimist": "^1.2.6",
+        "strip-bom": "^3.0.0"
+      },
+      "dependencies": {
+        "json5": {
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
+          "requires": {
+            "minimist": "^1.2.0"
+          }
+        }
+      }
+    },
     "tslib": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.1.tgz",
-      "integrity": "sha512-tGyy4dAjRIEwI7BzsB0lynWgOpfqjUdq91XXAlIWD2OwKBH7oCl/GZG/HT4BOHrTlPMOASlMQ7veyTqpmRcrNA=="
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.5.0.tgz",
+      "integrity": "sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg=="
     },
     "tslint": {
       "version": "5.20.1",
@@ -27946,6 +30237,11 @@
         "tsutils": "^2.29.0"
       },
       "dependencies": {
+        "builtin-modules": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/builtin-modules/-/builtin-modules-1.1.1.tgz",
+          "integrity": "sha512-wxXCdllwGhI2kCC0MnvTGYTMvnVZTvqgypkiTI8Pa5tcz2i6VqsqwYGgqwXji+4RgCzms6EajE4IxiUH6HH8nQ=="
+        },
         "semver": {
           "version": "5.7.1",
           "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -27955,91 +30251,21 @@
           "version": "1.14.1",
           "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
           "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
-        }
-      }
-    },
-    "tslint-loader": {
-      "version": "3.5.4",
-      "resolved": "https://registry.npmjs.org/tslint-loader/-/tslint-loader-3.5.4.tgz",
-      "integrity": "sha512-jBHNNppXut6SgZ7CsTBh+6oMwVum9n8azbmcYSeMlsABhWWoHwjq631vIFXef3VSd75cCdX3rc6kstsB7rSVVw==",
-      "dev": true,
-      "requires": {
-        "loader-utils": "^1.0.2",
-        "mkdirp": "^0.5.1",
-        "object-assign": "^4.1.1",
-        "rimraf": "^2.4.4",
-        "semver": "^5.3.0"
-      },
-      "dependencies": {
-        "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
-          "dev": true,
-          "requires": {
-            "minimist": "^1.2.0"
-          }
-        },
-        "loader-utils": {
-          "version": "1.4.2",
-          "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
-          "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
-          "dev": true,
-          "requires": {
-            "big.js": "^5.2.2",
-            "emojis-list": "^3.0.0",
-            "json5": "^1.0.1"
-          }
         },
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        }
-      }
-    },
-    "tslint-react": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/tslint-react/-/tslint-react-4.1.0.tgz",
-      "integrity": "sha512-Y7CbFn09X7Mpg6rc7t/WPbmjx9xPI8p1RsQyiGCLWgDR6sh3+IBSlT+bEkc0PSZcWwClOkqq2wPsID8Vep6szQ==",
-      "dev": true,
-      "requires": {
-        "tsutils": "^3.9.1"
-      },
-      "dependencies": {
         "tsutils": {
-          "version": "3.21.0",
-          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
-          "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
-          "dev": true,
+          "version": "2.29.0",
+          "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
+          "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
           "requires": {
             "tslib": "^1.8.1"
-          },
-          "dependencies": {
-            "tslib": {
-              "version": "1.14.1",
-              "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
-              "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
-              "dev": true
-            }
           }
         }
       }
     },
     "tsutils": {
-      "version": "2.29.0",
-      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-2.29.0.tgz",
-      "integrity": "sha512-g5JVHCIJwzfISaXpXE1qvNalca5Jwob6FjI4AoPlqMusJ6ftFE7IkkFoMhVLRgK+4Kx3gkzb8UZK5t5yTTvEmA==",
+      "version": "3.21.0",
+      "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
+      "integrity": "sha512-mHKK3iUXL+3UF6xL5k0PEhKRUBKPBCv/+RkEOpjRWxxx27KKRBmmA60A9pgOUvMi8GKhRMPEmjBRPzs2W7O1OA==",
       "requires": {
         "tslib": "^1.8.1"
       },
@@ -28498,9 +30724,9 @@
       },
       "dependencies": {
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -28760,6 +30986,62 @@
       "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-2.0.1.tgz",
       "integrity": "sha512-qZKX4RnBzH2ugr8Lxa7x+0V6XD9Sb/ouARtiasEQCHB1EVU4NXtmHsDDrx1dO4ne5fc3J6EW05BP1Dl0z0iung=="
     },
+    "vue-eslint-parser": {
+      "version": "9.1.1",
+      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-9.1.1.tgz",
+      "integrity": "sha512-C2aI/r85Q6tYcz4dpgvrs4wH/MqVrRAVIdpYedrxnATDHHkb+TroeRcDpKWGZCx/OcECMWfz7tVwQ8e+Opy6rA==",
+      "requires": {
+        "debug": "^4.3.4",
+        "eslint-scope": "^7.1.1",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.1",
+        "esquery": "^1.4.0",
+        "lodash": "^4.17.21",
+        "semver": "^7.3.6"
+      },
+      "dependencies": {
+        "eslint-scope": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+          "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
+        "eslint-visitor-keys": {
+          "version": "3.4.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.0.tgz",
+          "integrity": "sha512-HPpKPUBQcAsZOsHAFwTtIKcYlCje62XB7SEAcxjtmW6TD1WVpkS6i6/hOVtTZIl4zGj/mBqpFVGvaDneik+VoQ=="
+        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="
+        },
+        "lru-cache": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
+          "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
+          "requires": {
+            "yallist": "^4.0.0"
+          }
+        },
+        "semver": {
+          "version": "7.4.0",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.4.0.tgz",
+          "integrity": "sha512-RgOxM8Mw+7Zus0+zcLEUn8+JfoLpj/huFTItQy2hsM4khuC1HYRDp0cU482Ewn/Fcy6bCjufD8vAj7voC66KQw==",
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        },
+        "yallist": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
+          "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
+        }
+      }
+    },
     "vue-hot-reload-api": {
       "version": "2.3.4",
       "resolved": "https://registry.npmjs.org/vue-hot-reload-api/-/vue-hot-reload-api-2.3.4.tgz",
@@ -28803,9 +31085,9 @@
           "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -28837,9 +31119,9 @@
           "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
@@ -29463,9 +31745,9 @@
           "integrity": "sha512-VHskAKYM8RfSFXwee5t5cbN5PZeq1Wrh6qd5bkyiXIf6UQcN6w/A0eXM9r6t8d+GYOh+o6ZhiEnb88LN/Y8m2w=="
         },
         "json5": {
-          "version": "1.0.1",
-          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz",
-          "integrity": "sha512-aKS4WQjPenRxiQsC93MNfjx+nbF4PAdYzmd/1JIj8HYzqfbu86beTuNgXDzPknWk0n0uARlyewZo4s++ES36Ow==",
+          "version": "1.0.2",
+          "resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
+          "integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
           "requires": {
             "minimist": "^1.2.0"
           }
diff --git a/package.json b/package.json
index 77695bc34..faef6dc4e 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
     "clean": "lerna run clean",
     "test": "lerna run test",
     "test-cov": "lerna run test-cov",
-    "lint": "tslint 'packages/**/*.{ts,tsx}' -c ./tslint.json",
+    "lint": "lerna run --no-bail lint",
+    "lint:fix": "lerna run --no-bail lint:fix",
     "build:examples-app": "lerna run build:examples-app && node packages/examples-app/prepare-examples-app.js"
   },
   "devDependencies": {
@@ -33,15 +34,12 @@
     "lerna": "^3.19.0",
     "nan": "^2.14.2",
     "nyc": "^15.1.0",
-    "prettier": "^1.19.1",
+    "prettier": "^2.8.4",
     "source-map-loader": "^0.2.4",
     "source-map-support": "0.5.16",
     "style-loader": "^1.0.1",
     "ts-loader": "^6.2.1",
     "ts-node": "^10.4.0",
-    "tslint": "^5.20.1",
-    "tslint-loader": "^3.5.4",
-    "tslint-react": "^4.1.0",
     "typedoc": "^0.19.2",
     "typescript": "4.2.3",
     "webpack": "^4.41.2",
diff --git a/packages/angular-material/.eslintrc.js b/packages/angular-material/.eslintrc.js
new file mode 100644
index 000000000..0bf60144d
--- /dev/null
+++ b/packages/angular-material/.eslintrc.js
@@ -0,0 +1,38 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    /* Reset project because @angular-eslint/recommended sets this to an incompatible value */
+    project: null,
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/test', '!/example', '/example/dist'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:@angular-eslint/recommended',
+    'plugin:@angular-eslint/template/process-inline-templates',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@angular-eslint/component-class-suffix': 'off',
+    '@angular-eslint/directive-class-suffix': 'off',
+    '@angular-eslint/no-conflicting-lifecycle': 'warn',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
diff --git a/packages/angular-material/.prettierrc.js b/packages/angular-material/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/angular-material/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json
index 49fbb188e..422111502 100644
--- a/packages/angular-material/package.json
+++ b/packages/angular-material/package.json
@@ -42,7 +42,8 @@
     "build:examples-app": "rollup -c rollup.example.config.js",
     "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
     "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
-    "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "report": "nyc report --reporter=html",
     "doc": "typedoc --name 'JSON Forms Angular Material Renderers' --mode file --out docs src",
     "test": "karma start ./test-config/karma.conf.js --single-run",
@@ -77,6 +78,10 @@
     "hammerjs": "2.0.8"
   },
   "devDependencies": {
+    "@angular-eslint/eslint-plugin": "^12.0.0",
+    "@angular-eslint/eslint-plugin-template": "^12.0.0",
+    "@angular-eslint/schematics": "^12.0.0",
+    "@angular-eslint/template-parser": "^12.0.0",
     "@angular/animations": "^12.0.0",
     "@angular/cdk": "^12.0.0",
     "@angular/common": "^12.0.0",
@@ -98,9 +103,15 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@types/node": "^10.10.0",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "angular2-template-loader": "^0.6.2",
     "copy-webpack-plugin": "^5.0.5",
     "core-js": "^2.5.3",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
     "html-loader": "^0.5.5",
     "istanbul-instrumenter-loader": "^3.0.1",
     "jasmine": "^3.2.0",
@@ -114,6 +125,7 @@
     "karma-webpack": "^3.0.5",
     "null-loader": "^0.1.1",
     "nyc": "^15.1.0",
+    "prettier": "^2.8.4",
     "protractor": "^5.4.1",
     "request": "^2.88.0",
     "rimraf": "^3.0.2",
@@ -125,7 +137,6 @@
     "rollup-plugin-visualizer": "^5.4.1",
     "rxjs": "^6.5.3",
     "ts-loader": "^6.2.1",
-    "tslint": "^5.20.1",
     "typedoc": "^0.19.2",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.2.1",
diff --git a/packages/angular-test/.eslintrc.js b/packages/angular-test/.eslintrc.js
new file mode 100644
index 000000000..28449d281
--- /dev/null
+++ b/packages/angular-test/.eslintrc.js
@@ -0,0 +1,38 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    /* Reset project because @angular-eslint/recommended sets this to an incompatible value */
+    project: null,
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:@angular-eslint/recommended',
+    'plugin:@angular-eslint/template/process-inline-templates',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@angular-eslint/component-class-suffix': 'off',
+    '@angular-eslint/directive-class-suffix': 'off',
+    '@angular-eslint/no-conflicting-lifecycle': 'warn',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
diff --git a/packages/angular-test/.prettierrc.js b/packages/angular-test/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/angular-test/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/angular-test/package.json b/packages/angular-test/package.json
index dbe22f76c..1b93d30af 100644
--- a/packages/angular-test/package.json
+++ b/packages/angular-test/package.json
@@ -8,6 +8,14 @@
     "@jsonforms/core": "^3.1.0-alpha.1"
   },
   "devDependencies": {
+    "@angular-eslint/eslint-plugin": "^12.0.0",
+    "@angular-eslint/eslint-plugin-template": "^12.0.0",
+    "@angular-eslint/schematics": "^12.0.0",
+    "@angular-eslint/template-parser": "^12.0.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
     "jasmine": "^3.2.0",
     "jasmine-spec-reporter": "^4.2.1",
     "karma": "^3.1.1",
@@ -16,10 +24,13 @@
     "karma-jasmine": "^2.0.1",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^3.0.5",
+    "prettier": "^2.8.4",
     "typescript": "4.2.3"
   },
   "scripts": {
     "build": "tsc",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "test": "echo 'Nothing to do'"
   }
 }
diff --git a/packages/angular/.eslintrc.js b/packages/angular/.eslintrc.js
new file mode 100644
index 000000000..d3d27d3a1
--- /dev/null
+++ b/packages/angular/.eslintrc.js
@@ -0,0 +1,38 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    /* Reset project because @angular-eslint/recommended sets this to an incompatible value */
+    project: null,
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/test'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:@angular-eslint/recommended',
+    'plugin:@angular-eslint/template/process-inline-templates',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@angular-eslint/component-class-suffix': 'off',
+    '@angular-eslint/directive-class-suffix': 'off',
+    '@angular-eslint/no-conflicting-lifecycle': 'warn',
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
diff --git a/packages/angular/.prettierrc.js b/packages/angular/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/angular/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/angular/package.json b/packages/angular/package.json
index 24ec4abf3..fa0ed3df8 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -39,7 +39,8 @@
   "scripts": {
     "build": "ngc && ngc -p tsconfig.cjs.json",
     "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
-    "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "report": "nyc report --reporter=html",
     "test": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} ava",
     "test-cov": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\"} nyc ava",
@@ -71,18 +72,28 @@
     "rxjs": "^6.5.3 || ^7.4.0"
   },
   "devDependencies": {
+    "@angular-eslint/eslint-plugin": "^12.0.0",
+    "@angular-eslint/eslint-plugin-template": "^12.0.0",
+    "@angular-eslint/schematics": "^12.0.0",
+    "@angular-eslint/template-parser": "^12.0.0",
     "@angular/compiler": "^12.0.0",
     "@angular/compiler-cli": "^12.0.0",
     "@angular/core": "^12.0.0",
     "@angular/forms": "^12.0.0",
     "@jsonforms/core": "^3.1.0-alpha.1",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "ava": "~2.4.0",
     "copy-webpack-plugin": "^5.0.5",
     "cross-env": "^7.0.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
     "nyc": "^15.1.0",
+    "prettier": "^2.8.4",
     "rimraf": "^3.0.2",
     "rxjs": "^6.5.3",
-    "tslint": "^5.20.1",
     "typedoc": "^0.19.2"
   }
 }
diff --git a/packages/angular/src/jsonforms-root.component.ts b/packages/angular/src/jsonforms-root.component.ts
index f38380637..48029ed9e 100644
--- a/packages/angular/src/jsonforms-root.component.ts
+++ b/packages/angular/src/jsonforms-root.component.ts
@@ -115,7 +115,6 @@ export class JsonForms implements OnChanges, OnInit {
         }
     }
 
-    // tslint:disable-next-line: cyclomatic-complexity
     ngOnChanges(changes: SimpleChanges): void {
         if (!this.initialized) {
             return;
diff --git a/packages/core/.eslintrc.js b/packages/core/.eslintrc.js
new file mode 100644
index 000000000..dbc146dba
--- /dev/null
+++ b/packages/core/.eslintrc.js
@@ -0,0 +1,36 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/test'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    // Allow extending interfaces without additional properties to create marker interfaces
+    '@typescript-eslint/no-empty-interface': [
+      'error',
+      {
+        allowSingleExtends: true,
+      },
+    ],
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'error',
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
diff --git a/packages/core/.prettierrc.js b/packages/core/.prettierrc.js
new file mode 100644
index 000000000..2c26853c4
--- /dev/null
+++ b/packages/core/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+};
diff --git a/packages/core/package.json b/packages/core/package.json
index f789b0d02..96ecc48b5 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -39,7 +39,8 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "clean": "rimraf -rf lib coverage dist .nyc_output 2> /dev/null",
-    "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "report": "nyc report --reporter=html",
     "test": "cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\",\\\"target\\\":\\\"es5\\\"} ava",
     "test-cov": "rimraf -rf .nyc_output && cross-env TS_NODE_COMPILER_OPTIONS={\\\"module\\\":\\\"commonjs\\\",\\\"target\\\":\\\"es5\\\"} nyc ava",
@@ -73,12 +74,19 @@
   "devDependencies": {
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
     "@types/redux-mock-store": "^1.0.1",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "ava": "~2.4.0",
     "cross-env": "^7.0.2",
     "document-register-element": "^1.14.3",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
     "jsdom": "^15.2.1",
     "jsdom-global": "^3.0.2",
     "nyc": "^15.1.0",
+    "prettier": "^2.8.4",
     "redux": "^4.0.4",
     "redux-mock-store": "1.5.3",
     "rimraf": "^3.0.2",
@@ -88,7 +96,6 @@
     "rollup-plugin-visualizer": "^5.4.1",
     "source-map-support": "0.5.16",
     "ts-node": "^10.4.0",
-    "tslint": "^5.20.1",
     "typedoc": "^0.19.2",
     "typescript": "4.2.3"
   }
diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index d5f695ee3..a219d33c1 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -153,7 +153,6 @@ const getAdditionalErrors = (
   return state.additionalErrors;
 };
 
-// tslint:disable-next-line: cyclomatic-complexity
 export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
   state = initState,
   action
diff --git a/packages/examples-react/.eslintrc.js b/packages/examples-react/.eslintrc.js
new file mode 100644
index 000000000..4db5e1f83
--- /dev/null
+++ b/packages/examples-react/.eslintrc.js
@@ -0,0 +1,40 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};
diff --git a/packages/examples-react/.prettierrc.js b/packages/examples-react/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/examples-react/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/examples-react/package.json b/packages/examples-react/package.json
index 577f9b475..3b703a1ba 100644
--- a/packages/examples-react/package.json
+++ b/packages/examples-react/package.json
@@ -17,8 +17,20 @@
     "react-highlight": "^0.14.0",
     "react-tabs": "^3.2.3"
   },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
+    "prettier": "^2.8.4"
+  },
   "scripts": {
     "build": "echo 'Nothing to do'",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "test": "echo 'Nothing to do'"
   }
 }
diff --git a/packages/examples/.eslintrc.js b/packages/examples/.eslintrc.js
new file mode 100644
index 000000000..3de3a950a
--- /dev/null
+++ b/packages/examples/.eslintrc.js
@@ -0,0 +1,29 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
diff --git a/packages/examples/.prettierrc.js b/packages/examples/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/examples/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/examples/package.json b/packages/examples/package.json
index 22745fb99..7a8c6eb3a 100644
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -37,7 +37,8 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
-    "lint": "tslint --project ../../tslint.json --exclude src/models/jsonSchema.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "test": "echo 'Nothing to do for `examples` package'",
     "doc": "typedoc --name 'JSON Forms Examples' --mode file --excludeExternals --theme ../../typedoc-jsonforms --out docs src"
   },
@@ -49,13 +50,19 @@
   },
   "devDependencies": {
     "@jsonforms/core": "^3.1.0-alpha.1",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "prettier": "^2.8.4",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.4.1",
     "tslib": "^2.2.0",
-    "tslint": "^5.20.1",
     "typedoc": "^0.19.2",
     "typescript": "4.2.3"
   }
diff --git a/packages/material-renderers/.eslintrc.js b/packages/material-renderers/.eslintrc.js
new file mode 100644
index 000000000..f32389adb
--- /dev/null
+++ b/packages/material-renderers/.eslintrc.js
@@ -0,0 +1,41 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/test', '!/example', '/example/dist'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    'import/no-named-as-default': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};
diff --git a/packages/material-renderers/.prettierrc.js b/packages/material-renderers/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/material-renderers/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/material-renderers/package.json b/packages/material-renderers/package.json
index bfe419052..605f1d5eb 100644
--- a/packages/material-renderers/package.json
+++ b/packages/material-renderers/package.json
@@ -40,7 +40,8 @@
     "build:examples-app": "rollup -c rollup.example.config.js",
     "dev": "webpack --config webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
     "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
-    "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "test": "jest --no-cache",
     "test-cov": "jest --no-cache --coverage",
     "report": "nyc report --reporter=html",
@@ -101,11 +102,19 @@
     "@rollup/plugin-replace": "^5.0.1",
     "@types/enzyme": "^3.10.3",
     "@types/react-dom": "^17.0.9",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "copy-webpack-plugin": "^5.0.5",
     "enzyme": "^3.10.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "jest": "^26.6.3",
     "nyc": "^15.1.0",
+    "prettier": "^2.8.4",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
@@ -117,8 +126,6 @@
     "source-map-loader": "^0.2.4",
     "ts-jest": "^26.4.4",
     "ts-loader": "^6.2.1",
-    "tslint": "^5.20.1",
-    "tslint-loader": "^3.5.4",
     "typedoc": "^0.19.2",
     "typescript": "4.2.3",
     "webpack": "^4.41.2",
diff --git a/packages/react/.eslintrc.js b/packages/react/.eslintrc.js
new file mode 100644
index 000000000..cc02c4307
--- /dev/null
+++ b/packages/react/.eslintrc.js
@@ -0,0 +1,40 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/test'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+  settings: {
+    react: {
+      version: 'detect',
+    },
+  },
+};
diff --git a/packages/react/.prettierrc.js b/packages/react/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/react/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/react/package.json b/packages/react/package.json
index 0c77eca3e..7b15f9b09 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -39,7 +39,8 @@
   "scripts": {
     "build": "rollup -c rollup.config.js",
     "clean": "rimraf lib coverage dist .nyc_output 2> /dev/null",
-    "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "report": "nyc report --reporter=html",
     "test": "jest --no-cache",
     "test-cov": "jest --no-cache --coverage",
@@ -97,11 +98,19 @@
     "@types/object-hash": "^1.3.0",
     "@types/react": "^17.0.24",
     "@types/react-redux": "^7.1.5",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "cross-env": "^7.0.2",
     "enzyme": "^3.10.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "jest": "^26.6.3",
     "nyc": "^15.1.0",
+    "prettier": "^2.8.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-redux": "^7.1.3",
@@ -112,7 +121,6 @@
     "rollup-plugin-cleanup": "^3.2.1",
     "rollup-plugin-typescript2": "^0.31.1",
     "rollup-plugin-visualizer": "^5.4.1",
-    "tslint": "^5.20.1",
     "typedoc": "^0.19.2",
     "typescript": "4.2.3"
   }
diff --git a/packages/react/src/Control.ts b/packages/react/src/Control.ts
index 9ae5ba185..b60fb12cf 100644
--- a/packages/react/src/Control.ts
+++ b/packages/react/src/Control.ts
@@ -37,12 +37,10 @@ export class Control<
 > extends RendererComponent<P, S> {
   constructor(props: P) {
     super(props);
-    // tslint:disable:no-object-literal-type-assertion
     this.state = {
       value: props.data ? props.data : '',
       isFocused: false
     } as S;
-    // tslint:enable:no-object-literal-type-assertion
   }
 
   /**
diff --git a/packages/vanilla-renderers/.eslintrc.js b/packages/vanilla-renderers/.eslintrc.js
new file mode 100644
index 000000000..58d623b3f
--- /dev/null
+++ b/packages/vanilla-renderers/.eslintrc.js
@@ -0,0 +1,36 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/test', '!/example', '/example/dist'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:react/recommended',
+    'plugin:prettier/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    'import/no-named-as-default': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
diff --git a/packages/vanilla-renderers/.prettierrc.js b/packages/vanilla-renderers/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/vanilla-renderers/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/vanilla-renderers/package.json b/packages/vanilla-renderers/package.json
index f74ac8c5e..ebf54ff34 100644
--- a/packages/vanilla-renderers/package.json
+++ b/packages/vanilla-renderers/package.json
@@ -14,7 +14,8 @@
     "build:examples-app": "rollup -c rollup.example.config.js",
     "dev": "webpack --config ./webpack/webpack.dev.js && webpack-dev-server --config webpack/webpack.dev.js --env=dev --inline",
     "clean": "rimraf lib coverage dist .nyc_output example/dist 2> /dev/null",
-    "lint": "tslint --project tsconfig.json --exclude src/models/jsonSchema.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "report": "nyc report --reporter=html",
     "test": "jest --no-cache",
     "test-cov": "jest --no-cache --coverage",
@@ -56,13 +57,21 @@
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-replace": "^5.0.1",
     "@types/enzyme": "^3.10.3",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "copy-webpack-plugin": "^5.0.5",
     "enzyme": "^3.10.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.32.2",
     "jest": "^26.6.3",
     "jsdom": "^15.2.1",
     "jsdom-global": "^3.0.2",
     "nyc": "^15.1.0",
+    "prettier": "^2.8.4",
     "react-dom": "^17.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
@@ -75,8 +84,6 @@
     "source-map-support": "0.5.16",
     "ts-loader": "^6.2.1",
     "ts-node": "^10.4.0",
-    "tslint": "^5.20.1",
-    "tslint-loader": "^3.5.4",
     "typedoc": "^0.19.2",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.2.1",
diff --git a/packages/vue/vue-vanilla/.eslintrc.js b/packages/vue/vue-vanilla/.eslintrc.js
new file mode 100644
index 000000000..227f0e72e
--- /dev/null
+++ b/packages/vue/vue-vanilla/.eslintrc.js
@@ -0,0 +1,36 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/tests', '!/dev', '!/config'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:vue/vue3-recommended',
+    '@vue/typescript/recommended',
+    'plugin:prettier-vue/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
diff --git a/packages/vue/vue-vanilla/.prettierrc.js b/packages/vue/vue-vanilla/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/vue/vue-vanilla/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/vue/vue-vanilla/package.json b/packages/vue/vue-vanilla/package.json
index b1542a30f..f62480061 100644
--- a/packages/vue/vue-vanilla/package.json
+++ b/packages/vue/vue-vanilla/package.json
@@ -46,6 +46,8 @@
     "build:after": "symlink-dir ../../core ../vue/node_modules/@jsonforms/core",
     "build:examples-app": "rollup -c rollup.example.config.js",
     "clean": "rimraf lib example/dist",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "doc": "typedoc --name 'JSON Forms Vue Vanilla Renderers' --mode file --out docs src --ignoreCompilerErrors",
     "test": "vue-cli-service test:unit"
   },
@@ -61,15 +63,24 @@
     "@types/chai": "^4.2.11",
     "@types/jest": "^24.0.23",
     "@types/mocha": "^5.2.4",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "@vue/cli-plugin-babel": "~4.5.18",
     "@vue/cli-plugin-typescript": "~4.5.18",
     "@vue/cli-plugin-unit-mocha": "~4.5.18",
     "@vue/cli-service": "~4.5.18",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/compiler-sfc": "^3.2.26",
     "@vue/test-utils": "^2.0.2",
     "chai": "^4.1.2",
     "cross-env": "^7.0.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier-vue": "^4.2.0",
+    "eslint-plugin-vue": "^9.9.0",
     "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.4",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
     "rollup-plugin-babel": "^4.4.0",
diff --git a/packages/vue/vue/.eslintrc.js b/packages/vue/vue/.eslintrc.js
new file mode 100644
index 000000000..bfda19850
--- /dev/null
+++ b/packages/vue/vue/.eslintrc.js
@@ -0,0 +1,36 @@
+/* eslint-env node */
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  // There is no file include in ESLint. Thus, ignore all and include files via negative ignore (!)
+  ignorePatterns: ['/*', '!/src', '!/tests', '!/dev'],
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:import/recommended',
+    'plugin:import/typescript',
+    'plugin:vue/vue3-recommended',
+    '@vue/typescript/recommended',
+    'plugin:prettier-vue/recommended',
+  ],
+  rules: {
+    '@typescript-eslint/no-explicit-any': 'off',
+    'no-prototype-builtins': 'off',
+    // Base rule must be disabled to avoid incorrect errors
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': [
+      'warn', // or "error"
+      {
+        argsIgnorePattern: '^_',
+        varsIgnorePattern: '^_',
+        caughtErrorsIgnorePattern: '^_',
+      },
+    ],
+  },
+};
diff --git a/packages/vue/vue/.prettierrc.js b/packages/vue/vue/.prettierrc.js
new file mode 100644
index 000000000..6391982a0
--- /dev/null
+++ b/packages/vue/vue/.prettierrc.js
@@ -0,0 +1,6 @@
+module.exports = {
+  $schema: 'http://json.schemastore.org/prettierrc',
+  singleQuote: true,
+  jsxSingleQuote: true,
+  endOfLine: 'auto',
+}
\ No newline at end of file
diff --git a/packages/vue/vue/package.json b/packages/vue/vue/package.json
index d642e7ecd..18d93d644 100644
--- a/packages/vue/vue/package.json
+++ b/packages/vue/vue/package.json
@@ -38,6 +38,8 @@
     "serve": "vue-cli-service serve dev/serve.ts",
     "build": "cross-env NODE_ENV=production rollup --config rollup.config.js",
     "clean": "rimraf lib",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
     "doc": "typedoc --name 'JSON Forms Vue' --mode file --out docs src/jsonFormsCompositions.ts",
     "test": "vue-cli-service test:unit"
   },
@@ -51,14 +53,23 @@
     "@jsonforms/core": "^3.1.0-alpha.1",
     "@rollup/plugin-alias": "^3.1.8",
     "@types/jest": "^24.0.23",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
     "@vue/cli-plugin-babel": "~4.5.18",
     "@vue/cli-plugin-typescript": "~4.5.18",
     "@vue/cli-plugin-unit-jest": "~4.5.18",
     "@vue/cli-service": "~4.5.18",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/compiler-sfc": "^3.2.26",
     "@vue/test-utils": "^2.0.2",
     "core-js": "^3.9.1",
     "cross-env": "^7.0.2",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.7.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier-vue": "^4.2.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "prettier": "^2.8.4",
     "rimraf": "^3.0.2",
     "rollup": "^2.78.0",
     "rollup-plugin-babel": "^4.4.0",
diff --git a/tslint.json b/tslint.json
deleted file mode 100644
index 16c8be24a..000000000
--- a/tslint.json
+++ /dev/null
@@ -1,147 +0,0 @@
-{
-  "extends": ["tslint-react"],
-  "rules": {
-    "jsx-no-multiline-js": false,
-    "jsx-no-lambda": false,
-    "jsx-boolean-value": false,
-    "adjacent-overload-signatures": true,
-    "member-ordering": [
-      true,
-      {
-        "order": [
-          "static-field",
-          "static-method",
-          "instance-field",
-          "constructor",
-          "public-instance-method",
-          "protected-instance-method",
-          "private-instance-method"
-        ]
-      }
-    ],
-    "no-inferrable-types": true,
-    "no-internal-module": true,
-    "no-magic-numbers": false,
-    "no-namespace": true,
-    "no-non-null-assertion": true,
-    "no-reference": true,
-    "no-var-requires": true,
-    "only-arrow-functions": true,
-    "prefer-for-of": true,
-
-    "curly": true,
-    "forin": true,
-    "label-position": true,
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-conditional-assignment": true,
-    "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-super": true,
-    "no-duplicate-variable": true,
-    "no-empty": true,
-    "no-eval": true,
-    "no-for-in-array": true,
-    "no-inferred-empty-object-type": true,
-    "no-invalid-this": true,
-    "no-misused-new": true,
-    "no-object-literal-type-assertion": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": true,
-    "no-string-throw": true,
-    "no-switch-case-fall-through": true,
-    "no-unbound-method": true,
-    "no-unsafe-any": false,
-    "no-unsafe-finally": true,
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "radix": true,
-    "restrict-plus-operands": true,
-    "strict-boolean-expressions": [
-      true,
-      "allow-null-union",
-      "allow-undefined-union",
-      "allow-string",
-      "allow-number",
-      "allow-mix"
-    ],
-    "switch-default": true,
-    "triple-equals": [true, "allow-null-check"],
-    "use-isnan": true,
-
-    "cyclomatic-complexity": true,
-    "eofline": true,
-    "indent": [true, "spaces", 2],
-    "max-file-line-count": [true, 500],
-    "no-default-export": false,
-    "no-mergeable-namespace": true,
-    "no-require-imports": true,
-    "object-literal-sort-keys": false,
-    "prefer-const": true,
-    "trailing-comma": [
-      false,
-      {
-        "multiline": {
-          "objects": "never",
-          "arrays": "always",
-          "functions": "never",
-          "typeLiterals": "ignore"
-        }
-      }
-    ],
-    "arrow-parens": [true, "ban-single-arg-parens"],
-    "array-type": [true, "array"],
-    "arrow-return-shorthand": true,
-    "callable-types": true,
-    "class-name": true,
-    "comment-format": [true, "check-space"],
-    "import-spacing": true,
-    "interface-over-type-literal": false,
-    "jsdoc-format": true,
-    "newline-before-return": false,
-    "new-parens": true,
-    "no-angle-bracket-type-assertion": true,
-    "no-boolean-literal-compare": true,
-    "no-consecutive-blank-lines": [true],
-    "no-trailing-whitespace": [true, "ignore-comments"],
-    "no-unnecessary-initializer": true,
-    "object-literal-key-quotes": [true, "consistent"],
-    "one-line": [
-      true,
-      "check-catch",
-      "check-finally",
-      "check-else",
-      "check-open-brace",
-      "check-whitespace"
-    ],
-    "one-variable-per-declaration": true,
-    "ordered-imports": [
-      true,
-      {
-        "import-sources-order": "any",
-        "named-imports-order": "case-insensitive"
-      }
-    ],
-    "prefer-function-over-method": false,
-    "prefer-method-signature": true,
-    "quotemark": [true, "single"],
-    "semicolon": [true, "always", "strict-bound-class-methods"],
-    "variable-name": [false, "allow-leading-underscore"],
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-module",
-      "check-separator",
-      "check-type",
-      "check-typecast",
-      "check-preblock"
-    ]
-  },
-  "linterOptions": {
-    "exclude": ["**/lib/**", "**/dist/**"]
-  }
-}

From 935021168bdeecb39954f51847d6b73fdacf77c9 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Fri, 14 Apr 2023 12:52:39 +0200
Subject: [PATCH 12/17] Apply ESLint auto fixes

Part of #1551
---
 .../example/app/app.component.ts              |   26 +-
 .../example/app/app.module.ts                 |    7 +-
 .../src/controls/autocomplete.renderer.ts     |   23 +-
 .../src/controls/boolean.renderer.ts          |   18 +-
 .../src/controls/date.renderer.ts             |   18 +-
 .../src/controls/number.renderer.ts           |   30 +-
 .../src/controls/range.renderer.ts            |   17 +-
 .../src/controls/text.renderer.ts             |    8 +-
 .../src/controls/textarea.renderer.ts         |    8 +-
 .../src/controls/toggle.renderer.ts           |   19 +-
 packages/angular-material/src/index.ts        |   32 +-
 .../src/layouts/array-layout.renderer.ts      |   45 +-
 .../layouts/categorization-layout.renderer.ts |   33 +-
 .../src/layouts/group-layout.renderer.ts      |   21 +-
 .../src/layouts/horizontal-layout.renderer.ts |   23 +-
 .../src/layouts/layout.renderer.ts            |   47 +-
 .../src/layouts/vertical-layout.renderer.ts   |   23 +-
 packages/angular-material/src/module.ts       |   16 +-
 .../src/other/label.renderer.ts               |   15 +-
 .../src/other/master-detail/detail.ts         |    4 +-
 .../src/other/master-detail/master.ts         |   61 +-
 .../src/other/object.renderer.ts              |    6 +-
 .../src/other/table.renderer.ts               |   82 +-
 packages/angular-material/src/other/util.ts   |   13 +-
 .../test/autocomplete-control.spec.ts         |   91 +-
 .../test/boolean-control.spec.ts              |   26 +-
 .../test/categorization-tab-layout.spec.ts    |  130 +-
 .../test/date-control.spec.ts                 |  119 +-
 .../test/group-layout.spec.ts                 |   15 +-
 .../test/horizontal-layout.spec.ts            |   16 +-
 .../test/label-renderer.spec.ts               |   10 +-
 .../test/master-detail.spec.ts                |  125 +-
 .../test/number-control.spec.ts               |  232 ++--
 .../test/object-control.spec.ts               |   70 +-
 .../test/range-control.spec.ts                |   60 +-
 .../test/table-control.spec.ts                |  121 +-
 .../angular-material/test/text-area.spec.ts   |   38 +-
 .../test/text-control.spec.ts                 |   28 +-
 .../test/toggle-control.spec.ts               |   31 +-
 packages/angular-material/test/util.ts        |    6 +-
 .../test/vertical-layout.spec.ts              |   24 +-
 packages/angular-test/src/boolean.ts          |  469 ++++---
 packages/angular-test/src/layout.ts           |    8 +-
 packages/angular-test/src/number.ts           |  627 ++++-----
 packages/angular-test/src/range.ts            |  590 +++++----
 packages/angular-test/src/text.ts             |  701 +++++-----
 packages/angular-test/src/util.ts             |    8 +-
 packages/angular/src/abstract-control.ts      |   23 +-
 packages/angular/src/array-control.ts         |    5 +-
 packages/angular/src/base.renderer.ts         |    6 +-
 packages/angular/src/control.ts               |    8 +-
 .../angular/src/jsonforms-root.component.ts   |  279 ++--
 packages/angular/src/jsonforms.component.ts   |   55 +-
 packages/angular/src/jsonforms.module.ts      |    2 +-
 packages/angular/src/jsonforms.service.ts     |  417 +++---
 packages/angular/src/unknown.component.ts     |    2 +-
 packages/core/src/Helpers.ts                  |    2 +-
 packages/core/src/actions/actions.ts          |   59 +-
 packages/core/src/configDefault.ts            |    2 +-
 packages/core/src/generators/Generate.ts      |    2 +-
 packages/core/src/generators/schema.ts        |   50 +-
 packages/core/src/generators/uischema.ts      |   10 +-
 packages/core/src/i18n/arrayTranslations.ts   |   80 +-
 packages/core/src/i18n/i18nTypes.ts           |   16 +-
 packages/core/src/i18n/i18nUtil.ts            |   70 +-
 packages/core/src/i18n/index.ts               |    2 +-
 packages/core/src/models/draft4.ts            |   66 +-
 packages/core/src/models/uischema.ts          |   23 +-
 packages/core/src/reducers/cells.ts           |   15 +-
 packages/core/src/reducers/core.ts            |  184 ++-
 packages/core/src/reducers/default-data.ts    |   14 +-
 packages/core/src/reducers/i18n.ts            |   30 +-
 packages/core/src/reducers/reducers.ts        |   50 +-
 packages/core/src/reducers/renderers.ts       |   14 +-
 packages/core/src/reducers/selectors.ts       |    9 +-
 packages/core/src/reducers/uischemas.ts       |   46 +-
 packages/core/src/store.ts                    |    2 +-
 packages/core/src/testers/testers.ts          |  348 ++---
 packages/core/src/util/cell.ts                |   41 +-
 packages/core/src/util/combinators.ts         |    8 +-
 packages/core/src/util/label.ts               |    2 +-
 packages/core/src/util/path.ts                |   18 +-
 packages/core/src/util/renderer.ts            |  165 ++-
 packages/core/src/util/resolvers.ts           |   27 +-
 packages/core/src/util/runtime.ts             |    4 +-
 packages/core/src/util/schema.ts              |    2 +-
 packages/core/src/util/type.ts                |    8 +-
 packages/core/src/util/uischema.ts            |   18 +-
 packages/core/src/util/util.ts                |  104 +-
 packages/core/src/util/validator.ts           |    2 +-
 packages/core/test/actions/actions.test.ts    |   38 +-
 packages/core/test/generators/schema.test.ts  |  102 +-
 .../core/test/generators/uischema.test.ts     |  342 ++---
 packages/core/test/i18n/i18nUtil.test.ts      |   35 +-
 packages/core/test/reducers/core.test.ts      |  892 +++++++------
 packages/core/test/reducers/uischemas.test.ts |   58 +-
 packages/core/test/testers.test.ts            |  882 ++++++++-----
 packages/core/test/util/array.test.ts         |   10 +-
 packages/core/test/util/cell.test.ts          |  159 +--
 packages/core/test/util/derivetype.test.ts    |   40 +-
 packages/core/test/util/label.test.ts         |  146 +--
 packages/core/test/util/path.test.ts          |  157 +--
 packages/core/test/util/renderer.test.ts      | 1164 ++++++++++-------
 packages/core/test/util/resolvers.test.ts     |  230 ++--
 packages/core/test/util/runtime.test.ts       |  306 ++---
 packages/examples-react/src/App.tsx           |  110 +-
 packages/examples/src/example.ts              |    6 +-
 packages/examples/src/examples/1884.ts        |   96 +-
 packages/examples/src/examples/1948.ts        |   34 +-
 .../src/examples/additional-errors.ts         |   51 +-
 packages/examples/src/examples/allOf.ts       |   36 +-
 .../src/examples/anyOf-oneOf-allOf-resolve.ts |   42 +-
 packages/examples/src/examples/anyOf.ts       |   59 +-
 .../arrays-with-custom-element-label.ts       |   42 +-
 .../examples/arrays-with-detail-and-rule.ts   |   56 +-
 .../src/examples/arrays-with-detail.ts        |   42 +-
 .../src/examples/arrays-with-sorting.ts       |   70 +-
 packages/examples/src/examples/arrays.ts      |   70 +-
 packages/examples/src/examples/arraysI18n.ts  |   39 +-
 .../categorization-stepper-nav-buttons.ts     |   10 +-
 .../src/examples/categorization-stepper.ts    |   10 +-
 .../examples/src/examples/categorization.ts   |  234 ++--
 .../conditional-schema-compositions.ts        |   40 +-
 packages/examples/src/examples/config.ts      |   30 +-
 .../examples/src/examples/control-options.ts  |  163 ++-
 packages/examples/src/examples/dates.ts       |   62 +-
 packages/examples/src/examples/default.ts     |   44 +-
 packages/examples/src/examples/enum-multi.ts  |   26 +-
 packages/examples/src/examples/enum.ts        |   70 +-
 packages/examples/src/examples/enumInArray.ts |   20 +-
 .../examples/src/examples/generate-dynamic.ts |   16 +-
 packages/examples/src/examples/generate.ts    |    4 +-
 packages/examples/src/examples/generateUI.ts  |    4 +-
 packages/examples/src/examples/huge.ts        |  758 +++++------
 packages/examples/src/examples/i18n.ts        |   63 +-
 .../examples/src/examples/if_then_else.ts     |    8 +-
 packages/examples/src/examples/layout.ts      |   58 +-
 .../examples/list-with-detail-primitives.ts   |   78 +-
 .../examples/list-with-detail-registered.ts   |   44 +-
 .../examples/src/examples/list-with-detail.ts |  156 +--
 .../examples/src/examples/nestedArrays.ts     |   75 +-
 .../src/examples/nestedCategorization.ts      |  262 ++--
 packages/examples/src/examples/numbers.ts     |   34 +-
 packages/examples/src/examples/object.ts      |   46 +-
 packages/examples/src/examples/onChange.ts    |   48 +-
 .../examples/src/examples/oneOf-recursive.ts  |   30 +-
 packages/examples/src/examples/oneOf.ts       |  175 +--
 packages/examples/src/examples/oneOfArray.ts  |   38 +-
 packages/examples/src/examples/person.ts      |   70 +-
 packages/examples/src/examples/radioGroup.ts  |  104 +-
 packages/examples/src/examples/readonly.ts    |   28 +-
 packages/examples/src/examples/rule.ts        |   52 +-
 .../examples/src/examples/ruleInheritance.ts  |   71 +-
 packages/examples/src/examples/scope.ts       |   52 +-
 packages/examples/src/examples/stringArray.ts |   20 +-
 packages/examples/src/examples/text.ts        |   36 +-
 packages/examples/src/register.ts             |    6 +-
 packages/material-renderers/example/index.ts  |    5 +-
 .../additional/ListWithDetailMasterItem.tsx   |   54 +-
 .../src/additional/MaterialLabelRenderer.tsx  |   23 +-
 .../MaterialListWithDetailRenderer.tsx        |   10 +-
 .../src/additional/index.ts                   |    4 +-
 .../src/cells/MaterialBooleanCell.tsx         |    2 +-
 .../src/cells/MaterialBooleanToggleCell.tsx   |    4 +-
 .../src/cells/MaterialDateCell.tsx            |   16 +-
 .../src/cells/MaterialEnumCell.tsx            |   19 +-
 .../src/cells/MaterialIntegerCell.tsx         |    2 +-
 .../src/cells/MaterialNumberCell.tsx          |    2 +-
 .../src/cells/MaterialNumberFormatCell.tsx    |    2 +-
 .../src/cells/MaterialOneOfEnumCell.tsx       |   24 +-
 .../src/cells/MaterialTextCell.tsx            |    2 +-
 .../src/cells/MaterialTimeCell.tsx            |    2 +-
 .../material-renderers/src/cells/index.ts     |   14 +-
 .../src/complex/CombinatorProperties.tsx      |   17 +-
 .../src/complex/DeleteDialog.tsx              |   89 +-
 .../src/complex/MaterialAllOfRenderer.tsx     |    4 +-
 .../src/complex/MaterialAnyOfRenderer.tsx     |    6 +-
 .../complex/MaterialArrayControlRenderer.tsx  |   20 +-
 .../src/complex/MaterialEnumArrayRenderer.tsx |   12 +-
 .../src/complex/MaterialObjectRenderer.tsx    |    9 +-
 .../src/complex/MaterialOneOfRenderer.tsx     |  193 +--
 .../src/complex/MaterialTableControl.tsx      |  287 ++--
 .../src/complex/NoBorderTableCell.tsx         |    8 +-
 .../src/complex/TableToolbar.tsx              |   22 +-
 .../src/complex/ValidationIcon.tsx            |   28 +-
 .../material-renderers/src/complex/index.ts   |   12 +-
 .../MaterialAnyOfStringOrEnumControl.tsx      |   30 +-
 .../src/controls/MaterialBooleanControl.tsx   |   38 +-
 .../controls/MaterialBooleanToggleControl.tsx |   38 +-
 .../src/controls/MaterialDateControl.tsx      |   35 +-
 .../src/controls/MaterialDateTimeControl.tsx  |   47 +-
 .../src/controls/MaterialEnumControl.tsx      |   36 +-
 .../src/controls/MaterialInputControl.tsx     |   15 +-
 .../src/controls/MaterialIntegerControl.tsx   |    2 +-
 .../src/controls/MaterialNativeControl.tsx    |   21 +-
 .../src/controls/MaterialNumberControl.tsx    |    2 +-
 .../src/controls/MaterialOneOfEnumControl.tsx |   36 +-
 .../MaterialOneOfRadioGroupControl.tsx        |    8 +-
 .../src/controls/MaterialRadioGroup.tsx       |   28 +-
 .../controls/MaterialRadioGroupControl.tsx    |   11 +-
 .../src/controls/MaterialSliderControl.tsx    |   33 +-
 .../src/controls/MaterialTextControl.tsx      |    2 +-
 .../src/controls/MaterialTimeControl.tsx      |   41 +-
 .../material-renderers/src/controls/index.ts  |   34 +-
 packages/material-renderers/src/index.ts      |   48 +-
 .../src/layouts/ArrayToolbar.tsx              |   19 +-
 .../src/layouts/ExpandPanelRenderer.tsx       |  154 ++-
 .../src/layouts/MaterialArrayLayout.tsx       |   34 +-
 .../layouts/MaterialArrayLayoutRenderer.tsx   |   15 +-
 .../layouts/MaterialCategorizationLayout.tsx  |   59 +-
 .../MaterialCategorizationStepperLayout.tsx   |  104 +-
 .../src/layouts/MaterialGroupLayout.tsx       |   53 +-
 .../src/layouts/MaterialHorizontalLayout.tsx  |   22 +-
 .../src/layouts/MaterialVerticalLayout.tsx    |   22 +-
 .../material-renderers/src/layouts/index.ts   |   12 +-
 .../src/mui-controls/MuiAutocomplete.tsx      |   86 +-
 .../src/mui-controls/MuiCheckbox.tsx          |   60 +-
 .../src/mui-controls/MuiInputInteger.tsx      |   21 +-
 .../src/mui-controls/MuiInputNumber.tsx       |   28 +-
 .../src/mui-controls/MuiInputNumberFormat.tsx |   23 +-
 .../src/mui-controls/MuiInputText.tsx         |  175 +--
 .../src/mui-controls/MuiInputTime.tsx         |   19 +-
 .../src/mui-controls/MuiSelect.tsx            |   84 +-
 .../src/mui-controls/MuiToggle.tsx            |   58 +-
 .../material-renderers/src/util/datejs.tsx    |   61 +-
 .../material-renderers/src/util/debounce.ts   |   37 +-
 packages/material-renderers/src/util/focus.ts |   14 +-
 .../src/util/i18nDefaults.ts                  |    4 +-
 .../material-renderers/src/util/layout.tsx    |   84 +-
 packages/material-renderers/src/util/theme.ts |    4 +-
 .../test/renderers/MatchMediaMock.ts          |    4 +-
 .../renderers/MaterialAllOfRenderer.test.tsx  |   32 +-
 .../renderers/MaterialAnyOfRenderer.test.tsx  |  130 +-
 .../MaterialAnyOfStringOrEnumControl.test.tsx |   59 +-
 .../renderers/MaterialArrayControl.test.tsx   |  239 ++--
 .../renderers/MaterialArrayLayout.test.tsx    |  215 +--
 .../renderers/MaterialBooleanCell.test.tsx    |  178 ++-
 .../MaterialBooleanToggleCell.test.tsx        |  121 +-
 .../MaterialBooleanToggleControl.test.tsx     |  153 +--
 .../MaterialCategorizationLayout.test.tsx     |  226 ++--
 ...terialCategorizationStepperLayout.test.tsx |  334 ++---
 .../test/renderers/MaterialDateCell.test.tsx  |  164 ++-
 .../renderers/MaterialDateControl.test.tsx    |  214 +--
 .../MaterialDateTimeControl.test.tsx          |  226 ++--
 .../MaterialEnumArrayRenderer.test.tsx        |   54 +-
 .../test/renderers/MaterialEnumCell.test.tsx  |   39 +-
 .../renderers/MaterialEnumControl.test.tsx    |   29 +-
 .../renderers/MaterialGroupLayout.test.tsx    |   27 +-
 .../renderers/MaterialInputControl.test.tsx   |  143 +-
 .../renderers/MaterialIntegerCell.test.tsx    |  146 ++-
 .../renderers/MaterialLabelRenderer.test.tsx  |   25 +-
 .../test/renderers/MaterialLayouts.test.tsx   |  172 ++-
 .../MaterialListWithDetailRenderer.test.tsx   |  110 +-
 .../renderers/MaterialNativeControl.test.tsx  |   12 +-
 .../renderers/MaterialNumberCell.test.tsx     |  196 +--
 .../renderers/MaterialObjectControl.test.tsx  |  108 +-
 .../renderers/MaterialOneOfEnumCell.test.tsx  |   41 +-
 .../MaterialOneOfRadioGroupControl.test.tsx   |   31 +-
 .../renderers/MaterialOneOfRenderer.test.tsx  |  265 ++--
 .../MaterialRadioGroupControl.test.tsx        |   41 +-
 .../renderers/MaterialSliderControl.test.tsx  |  257 ++--
 .../test/renderers/MaterialTextCell.test.tsx  |  239 ++--
 .../renderers/MaterialTextControl.test.tsx    |   24 +-
 .../test/renderers/MaterialTimeCell.test.tsx  |  164 ++-
 .../renderers/MaterialTimeControl.test.tsx    |  214 +--
 .../material-renderers/test/renderers/util.ts |   17 +-
 packages/react/src/Control.ts                 |    2 +-
 packages/react/src/DispatchCell.tsx           |   39 +-
 packages/react/src/JsonForms.tsx              |   34 +-
 packages/react/src/JsonFormsContext.tsx       |  683 ++++++----
 packages/react/src/Renderer.tsx               |   13 +-
 packages/react/src/UnknownRenderer.tsx        |    4 +-
 .../react/src/redux/JsonFormsReduxContext.tsx |   20 +-
 packages/react/test/JsonFormsContext.test.tsx |  128 +-
 .../react/test/renderers/JsonForms.test.tsx   |  379 +++---
 packages/vanilla-renderers/example/index.ts   |    5 +-
 .../example/theme.switcher.ts                 |    4 +-
 .../vanilla-renderers/src/actions/index.ts    |    6 +-
 .../src/cells/BooleanCell.tsx                 |   35 +-
 .../vanilla-renderers/src/cells/DateCell.tsx  |    2 +-
 .../src/cells/DateTimeCell.tsx                |    4 +-
 .../vanilla-renderers/src/cells/EnumCell.tsx  |   61 +-
 .../src/cells/IntegerCell.tsx                 |    6 +-
 .../src/cells/NumberCell.tsx                  |    5 +-
 .../src/cells/NumberFormatCell.tsx            |   24 +-
 .../src/cells/SliderCell.tsx                  |    5 +-
 .../src/cells/TextAreaCell.tsx                |    7 +-
 .../vanilla-renderers/src/cells/TextCell.tsx  |    8 +-
 .../vanilla-renderers/src/cells/TimeCell.tsx  |    6 +-
 packages/vanilla-renderers/src/cells/index.ts |    2 +-
 .../src/complex/LabelRenderer.tsx             |   26 +-
 .../src/complex/TableArrayControl.tsx         |  201 +--
 .../complex/array/ArrayControlRenderer.tsx    |  214 +--
 .../src/complex/array/index.ts                |    2 +-
 .../categorization/CategorizationList.tsx     |  106 +-
 .../categorization/CategorizationRenderer.tsx |   17 +-
 .../complex/categorization/SingleCategory.tsx |   20 +-
 .../src/complex/categorization/index.ts       |    2 +-
 .../src/complex/categorization/tester.ts      |    6 +-
 .../vanilla-renderers/src/complex/index.ts    |    4 +-
 .../src/controls/InputControl.tsx             |   10 +-
 .../src/controls/OneOfRadioGroupControl.tsx   |    8 +-
 .../src/controls/RadioGroup.tsx               |   37 +-
 .../src/controls/RadioGroupControl.tsx        |   12 +-
 .../vanilla-renderers/src/controls/index.ts   |   10 +-
 packages/vanilla-renderers/src/index.ts       |   19 +-
 .../src/layouts/GroupLayout.tsx               |   70 +-
 .../src/layouts/HorizontalLayout.tsx          |   84 +-
 .../src/layouts/JsonFormsLayout.tsx           |    8 +-
 .../src/layouts/VerticalLayout.tsx            |   75 +-
 .../vanilla-renderers/src/layouts/index.ts    |    2 +-
 .../vanilla-renderers/src/reducers/index.ts   |   16 +-
 .../vanilla-renderers/src/reducers/styling.ts |   39 +-
 .../src/styles/styleContext.ts                |    6 +-
 .../vanilla-renderers/src/styles/styles.ts    |   80 +-
 .../src/util/i18nDefaults.ts                  |    4 +-
 packages/vanilla-renderers/src/util/index.tsx |  251 ++--
 .../test/renderers/ArrayControl.test.tsx      |   25 +-
 .../test/renderers/BooleanCell.test.tsx       |  203 +--
 .../renderers/CategorizationRenderer.test.tsx |  193 +--
 .../test/renderers/DateCell.test.tsx          |  128 +-
 .../test/renderers/DateTimeCell.test.tsx      |   86 +-
 .../test/renderers/EnumCell.test.tsx          |  149 ++-
 .../test/renderers/GroupLayout.test.tsx       |   26 +-
 .../test/renderers/HorizontalLayout.test.tsx  |   50 +-
 .../test/renderers/InputControl.test.tsx      |  221 ++--
 .../test/renderers/IntegerCell.test.tsx       |  153 ++-
 .../test/renderers/LabelControl.test.tsx      |   37 +-
 .../test/renderers/NumberCell.test.tsx        |  150 ++-
 .../test/renderers/RadioGroupControl.test.tsx |  288 ++--
 .../test/renderers/SliderCell.test.tsx        |  128 +-
 .../test/renderers/TableArrayControl.test.tsx |  184 +--
 .../test/renderers/TextAreaCell.test.tsx      |  190 ++-
 .../test/renderers/TextCell.test.tsx          |  255 +++-
 .../test/renderers/TimeCell.test.tsx          |  130 +-
 .../test/renderers/VerticalLayout.test.tsx    |   28 +-
 .../test/styling.registry.test.ts             |   18 +-
 packages/vanilla-renderers/test/util.ts       |   14 +-
 .../vue/vue-vanilla/dev/components/App.vue    |   68 +-
 .../src/array/ArrayListElement.vue            |   46 +-
 .../src/array/ArrayListRenderer.vue           |   30 +-
 packages/vue/vue-vanilla/src/array/index.ts   |    4 +-
 .../src/controls/BooleanControlRenderer.vue   |   29 +-
 .../src/controls/ControlWrapper.vue           |   44 +-
 .../src/controls/DateControlRenderer.vue      |   27 +-
 .../src/controls/DateTimeControlRenderer.vue  |   28 +-
 .../src/controls/EnumControlRenderer.vue      |   33 +-
 .../src/controls/EnumOneOfControlRenderer.vue |   33 +-
 .../src/controls/IntegerControlRenderer.vue   |   26 +-
 .../controls/MultiStringControlRenderer.vue   |   27 +-
 .../src/controls/NumberControlRenderer.vue    |   28 +-
 .../src/controls/StringControlRenderer.vue    |   27 +-
 .../src/controls/TimeControlRenderer.vue      |   29 +-
 .../vue/vue-vanilla/src/controls/index.ts     |   19 +-
 packages/vue/vue-vanilla/src/index.ts         |    2 +-
 .../vue-vanilla/src/label/LabelRenderer.vue   |   12 +-
 packages/vue/vue-vanilla/src/label/index.ts   |    4 +-
 .../vue-vanilla/src/layouts/GroupRenderer.vue |   14 +-
 .../src/layouts/LayoutRenderer.vue            |   16 +-
 packages/vue/vue-vanilla/src/layouts/index.ts |    7 +-
 packages/vue/vue-vanilla/src/renderers.ts     |    2 +-
 .../vue-vanilla/src/styles/defaultStyles.ts   |   16 +-
 packages/vue/vue-vanilla/src/styles/styles.ts |    2 +-
 packages/vue/vue-vanilla/src/styles/util.ts   |    7 +-
 .../vue/vue-vanilla/src/util/composition.ts   |   22 +-
 .../unit/array/ArrayListRenderer.spec.ts      |   10 +-
 .../controls/BooleanControlRenderer.spec.ts   |    6 +-
 .../unit/controls/DateControlRenderer.spec.ts |    6 +-
 .../controls/DateTimeControlRenderer.spec.ts  |   30 +-
 .../unit/controls/EnumControlRenderer.spec.ts |    4 +-
 .../controls/EnumOneOfControlRenderer.spec.ts |    7 +-
 .../controls/IntegerControlRenderer.spec.ts   |    4 +-
 .../MultiStringControlRenderer.spec.ts        |    6 +-
 .../controls/NumberControlRenderer.spec.ts    |    8 +-
 .../controls/StringControlRenderer.spec.ts    |    6 +-
 .../unit/controls/TimeControlRenderer.spec.ts |    6 +-
 .../tests/unit/form/JsonForms.spec.ts         |   36 +-
 .../tests/unit/label/LabelRenderer.spec.ts    |    2 +-
 .../tests/unit/layouts/GroupRenderer.spec.ts  |    8 +-
 .../tests/unit/layouts/LayoutRenderer.spec.ts |   12 +-
 .../tests/unit/util/TestComponent.vue         |   12 +-
 .../vue/vue-vanilla/tests/unit/util/util.ts   |    2 +-
 packages/vue/vue/dev/components/App.vue       |   34 +-
 .../vue/vue/dev/renderers/ControlRenderer.vue |   34 +-
 .../vue/vue/dev/renderers/LayoutRenderer.vue  |   36 +-
 packages/vue/vue/dev/renderers/index.ts       |    5 +-
 .../vue/vue/src/components/DispatchCell.vue   |   19 +-
 .../vue/src/components/DispatchRenderer.vue   |   23 +-
 packages/vue/vue/src/components/JsonForms.vue |  144 +-
 .../vue/src/components/UnknownRenderer.vue    |    2 +-
 packages/vue/vue/src/components/index.ts      |    2 +-
 packages/vue/vue/src/jsonFormsCompositions.ts |   88 +-
 packages/vue/vue/src/types.ts                 |    8 +-
 packages/vue/vue/tests/testHelper.ts          |    2 +-
 packages/vue/vue/tests/unit/JsonForms.spec.ts |   36 +-
 395 files changed, 15970 insertions(+), 12784 deletions(-)

diff --git a/packages/angular-material/example/app/app.component.ts b/packages/angular-material/example/app/app.component.ts
index 5a942dcd4..a46055cc0 100644
--- a/packages/angular-material/example/app/app.component.ts
+++ b/packages/angular-material/example/app/app.component.ts
@@ -24,7 +24,11 @@
 */
 import { Component } from '@angular/core';
 import { ExampleDescription, getExamples } from '@jsonforms/examples';
-import { JsonFormsI18nState, UISchemaElement, UISchemaTester } from '@jsonforms/core';
+import {
+  JsonFormsI18nState,
+  UISchemaElement,
+  UISchemaTester,
+} from '@jsonforms/core';
 import { angularMaterialRenderers } from '../../src/index';
 import { DateAdapter } from '@angular/material/core';
 
@@ -33,16 +37,16 @@ const uiSchema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/buyer/properties/email'
+      scope: '#/properties/buyer/properties/email',
     },
     {
       type: 'Control',
-      scope: '#/properties/status'
-    }
-  ]
+      scope: '#/properties/status',
+    },
+  ],
 };
 const defaultI18n: JsonFormsI18nState = {
-  locale: 'en-US'
+  locale: 'en-US',
 };
 const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
   if (schemaPath === '#/properties/warehouseitems/items') {
@@ -85,7 +89,7 @@ const itemTester: UISchemaTester = (_schema, schemaPath, _path) => {
       [readonly]="readonly"
       [config]="config"
     ></jsonforms>
-  `
+  `,
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;
@@ -95,8 +99,8 @@ export class AppComponent {
   private dateAdapter;
   private readonly = false;
   data: any;
-  uischemas: { tester: UISchemaTester; uischema: UISchemaElement; }[] = [
-    { tester: itemTester, uischema: uiSchema }
+  uischemas: { tester: UISchemaTester; uischema: UISchemaElement }[] = [
+    { tester: itemTester, uischema: uiSchema },
   ];
 
   constructor(dateAdapter: DateAdapter<Date>) {
@@ -107,7 +111,9 @@ export class AppComponent {
   }
 
   onChange(ev: any) {
-    this.selectedExample = this.examples.find(e => e.name === ev.target.value);
+    this.selectedExample = this.examples.find(
+      (e) => e.name === ev.target.value
+    );
     this.i18n = this.selectedExample.i18n ?? defaultI18n;
   }
 
diff --git a/packages/angular-material/example/app/app.module.ts b/packages/angular-material/example/app/app.module.ts
index 08d79c7e2..25cb82bf9 100644
--- a/packages/angular-material/example/app/app.module.ts
+++ b/packages/angular-material/example/app/app.module.ts
@@ -33,10 +33,9 @@ import { JsonFormsAngularMaterialModule } from '../../src/module';
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
-    JsonFormsAngularMaterialModule
+    JsonFormsAngularMaterialModule,
   ],
   bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
 })
-export class AppModule {
-}
+export class AppModule {}
diff --git a/packages/angular-material/src/controls/autocomplete.renderer.ts b/packages/angular-material/src/controls/autocomplete.renderer.ts
index e326d86bf..23d3e0ef9 100644
--- a/packages/angular-material/src/controls/autocomplete.renderer.ts
+++ b/packages/angular-material/src/controls/autocomplete.renderer.ts
@@ -32,11 +32,10 @@ import {
   isEnumControl,
   OwnPropsOfControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import type { Observable } from 'rxjs';
-import { map } from 'rxjs/operators';
-import { startWith } from 'rxjs/operators';
+import { map, startWith } from 'rxjs/operators';
 
 /**
  * To use this component you will need to add your own tester:
@@ -74,7 +73,7 @@ import { startWith } from 'rxjs/operators';
         [formControl]="form"
         [matAutocomplete]="auto"
         (keydown)="updateFilter($event)"
-        (focus)="focused = true" 
+        (focus)="focused = true"
         (focusout)="focused = false"
       />
       <mat-autocomplete
@@ -89,11 +88,13 @@ import { startWith } from 'rxjs/operators';
           {{ option }}
         </mat-option>
       </mat-autocomplete>
-      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{ description }}</mat-hint>
+      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
+        description
+      }}</mat-hint>
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AutocompleteControlRenderer extends JsonFormsControl {
   @Input() options: string[];
@@ -110,7 +111,7 @@ export class AutocompleteControlRenderer extends JsonFormsControl {
     this.shouldFilter = false;
     this.filteredOptions = this.form.valueChanges.pipe(
       startWith(''),
-      map(val => this.filter(val))
+      map((val) => this.filter(val))
     );
   }
 
@@ -126,13 +127,15 @@ export class AutocompleteControlRenderer extends JsonFormsControl {
   onSelect(ev: MatAutocompleteSelectedEvent) {
     const path = composeWithUi(this.uischema as ControlElement, this.path);
     this.shouldFilter = false;
-    this.jsonFormsService.updateCore(Actions.update(path, () => ev.option.value));
+    this.jsonFormsService.updateCore(
+      Actions.update(path, () => ev.option.value)
+    );
     this.triggerValidation();
   }
 
   filter(val: string): string[] {
     return (this.options || this.scopedSchema.enum || []).filter(
-      option =>
+      (option) =>
         !this.shouldFilter ||
         !val ||
         option.toLowerCase().indexOf(val.toLowerCase()) === 0
@@ -141,7 +144,7 @@ export class AutocompleteControlRenderer extends JsonFormsControl {
   protected getOwnProps(): OwnPropsOfAutoComplete {
     return {
       ...super.getOwnProps(),
-      options: this.options
+      options: this.options,
     };
   }
 }
diff --git a/packages/angular-material/src/controls/boolean.renderer.ts b/packages/angular-material/src/controls/boolean.renderer.ts
index 06d9807d5..da81a68b2 100644
--- a/packages/angular-material/src/controls/boolean.renderer.ts
+++ b/packages/angular-material/src/controls/boolean.renderer.ts
@@ -22,7 +22,12 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, ViewRef} from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ViewRef,
+} from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
 
@@ -43,14 +48,19 @@ import { isBooleanControl, RankedTester, rankWith } from '@jsonforms/core';
       >
         {{ label }}
       </mat-checkbox>
-      <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{ description }}</mat-hint>
+      <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{
+        description
+      }}</mat-hint>
       <mat-error class="mat-caption">{{ error }}</mat-error>
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class BooleanControlRenderer extends JsonFormsControl {
-  constructor(jsonformsService: JsonFormsAngularService, private changeDetectionRef: ChangeDetectorRef) {
+  constructor(
+    jsonformsService: JsonFormsAngularService,
+    private changeDetectionRef: ChangeDetectorRef
+  ) {
     super(jsonformsService);
   }
   isChecked = () => this.data || false;
diff --git a/packages/angular-material/src/controls/date.renderer.ts b/packages/angular-material/src/controls/date.renderer.ts
index e937f0a88..5d628a171 100644
--- a/packages/angular-material/src/controls/date.renderer.ts
+++ b/packages/angular-material/src/controls/date.renderer.ts
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import { Component, ChangeDetectionStrategy } from '@angular/core';
-import {
-  isDateControl,
-  RankedTester,
-  rankWith
-} from '@jsonforms/core';
+import { isDateControl, RankedTester, rankWith } from '@jsonforms/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 
 @Component({
@@ -41,7 +37,7 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
         [id]="id"
         [formControl]="form"
         [matDatepicker]="datepicker"
-        (focus)="focused = true" 
+        (focus)="focused = true"
         (focusout)="focused = false"
       />
       <mat-datepicker-toggle
@@ -49,16 +45,16 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
         [for]="datepicker"
       ></mat-datepicker-toggle>
       <mat-datepicker #datepicker></mat-datepicker>
-      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{ description }}</mat-hint>
+      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
+        description
+      }}</mat-hint>
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateControlRenderer extends JsonFormsControl {
-  constructor(
-    jsonformsService: JsonFormsAngularService,
-  ) {
+  constructor(jsonformsService: JsonFormsAngularService) {
     super(jsonformsService);
   }
 
diff --git a/packages/angular-material/src/controls/number.renderer.ts b/packages/angular-material/src/controls/number.renderer.ts
index ce0a8e2d5..3907eab3c 100644
--- a/packages/angular-material/src/controls/number.renderer.ts
+++ b/packages/angular-material/src/controls/number.renderer.ts
@@ -30,7 +30,7 @@ import {
   or,
   RankedTester,
   rankWith,
-  StatePropsOfControl
+  StatePropsOfControl,
 } from '@jsonforms/core';
 import merge from 'lodash/merge';
 
@@ -48,14 +48,16 @@ import merge from 'lodash/merge';
         [min]="min"
         [max]="max"
         [step]="multipleOf"
-        (focus)="focused = true" 
+        (focus)="focused = true"
         (focusout)="focused = false"
       />
-      <mat-hint *ngIf="shouldShowUnfocusedDescription()" || focused>{{ description }}</mat-hint>
+      <mat-hint *ngIf="shouldShowUnfocusedDescription()" || focused>{{
+        description
+      }}</mat-hint>
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class NumberControlRenderer extends JsonFormsControl {
   private readonly MAXIMUM_FRACTIONAL_DIGITS = 20;
@@ -126,25 +128,33 @@ export class NumberControlRenderer extends JsonFormsControl {
     return '';
   };
 
-  mapAdditionalProps(props:StatePropsOfControl) {
+  mapAdditionalProps(props: StatePropsOfControl) {
     if (this.scopedSchema) {
       const testerContext = {
         rootSchema: this.rootSchema,
-        config: props.config
-      }
-      const defaultStep = isNumberControl(this.uischema, this.rootSchema, testerContext)
+        config: props.config,
+      };
+      const defaultStep = isNumberControl(
+        this.uischema,
+        this.rootSchema,
+        testerContext
+      )
         ? 0.1
         : 1;
       this.min = this.scopedSchema.minimum;
       this.max = this.scopedSchema.maximum;
       this.multipleOf = this.scopedSchema.multipleOf || defaultStep;
-      const appliedUiSchemaOptions = merge({}, props.config, this.uischema.options);
+      const appliedUiSchemaOptions = merge(
+        {},
+        props.config,
+        this.uischema.options
+      );
       const currentLocale = this.jsonFormsService.getLocale();
       if (this.locale === undefined || this.locale !== currentLocale) {
         this.locale = currentLocale;
         this.numberFormat = new Intl.NumberFormat(this.locale, {
           useGrouping: appliedUiSchemaOptions.useGrouping,
-          maximumFractionDigits: this.MAXIMUM_FRACTIONAL_DIGITS
+          maximumFractionDigits: this.MAXIMUM_FRACTIONAL_DIGITS,
         });
         this.determineDecimalSeparator();
         this.oldValue = this.getValue();
diff --git a/packages/angular-material/src/controls/range.renderer.ts b/packages/angular-material/src/controls/range.renderer.ts
index 1effc3f7f..49a397978 100644
--- a/packages/angular-material/src/controls/range.renderer.ts
+++ b/packages/angular-material/src/controls/range.renderer.ts
@@ -22,7 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, Component, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
 
@@ -44,18 +48,23 @@ import { isRangeControl, RankedTester, rankWith } from '@jsonforms/core';
         tickInterval="auto"
         [id]="id"
       ></mat-slider>
-      <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{ description }}</mat-hint>
+      <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{
+        description
+      }}</mat-hint>
       <mat-error class="mat-caption">{{ error }}</mat-error>
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RangeControlRenderer extends JsonFormsControl {
   min: number;
   max: number;
   multipleOf: number;
 
-  constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef: ChangeDetectorRef) {
+  constructor(
+    jsonformsService: JsonFormsAngularService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
     super(jsonformsService);
   }
   getEventValue = (event: any) => Number(event.value);
diff --git a/packages/angular-material/src/controls/text.renderer.ts b/packages/angular-material/src/controls/text.renderer.ts
index 6e7d1f7c7..8659a6497 100644
--- a/packages/angular-material/src/controls/text.renderer.ts
+++ b/packages/angular-material/src/controls/text.renderer.ts
@@ -37,14 +37,16 @@ import { isStringControl, RankedTester, rankWith } from '@jsonforms/core';
         (input)="onChange($event)"
         [id]="id"
         [formControl]="form"
-        (focus)="focused = true" 
+        (focus)="focused = true"
         (focusout)="focused = false"
       />
-      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{ description }}</mat-hint>
+      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
+        description
+      }}</mat-hint>
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextControlRenderer extends JsonFormsControl {
   constructor(jsonformsService: JsonFormsAngularService) {
diff --git a/packages/angular-material/src/controls/textarea.renderer.ts b/packages/angular-material/src/controls/textarea.renderer.ts
index a40c0ca16..073b1b3fe 100644
--- a/packages/angular-material/src/controls/textarea.renderer.ts
+++ b/packages/angular-material/src/controls/textarea.renderer.ts
@@ -36,14 +36,16 @@ import { isMultiLineControl, RankedTester, rankWith } from '@jsonforms/core';
         (input)="onChange($event)"
         [id]="id"
         [formControl]="form"
-        (focus)="focused = true" 
+        (focus)="focused = true"
         (focusout)="focused = false"
       ></textarea>
-      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{ description }}</mat-hint>
+      <mat-hint *ngIf="shouldShowUnfocusedDescription() || focused">{{
+        description
+      }}</mat-hint>
       <mat-error>{{ error }}</mat-error>
     </mat-form-field>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TextAreaRenderer extends JsonFormsControl {
   constructor(jsonformsService: JsonFormsAngularService) {
diff --git a/packages/angular-material/src/controls/toggle.renderer.ts b/packages/angular-material/src/controls/toggle.renderer.ts
index a0586f910..0404da0fe 100644
--- a/packages/angular-material/src/controls/toggle.renderer.ts
+++ b/packages/angular-material/src/controls/toggle.renderer.ts
@@ -22,14 +22,18 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, Component, ChangeDetectorRef } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ChangeDetectorRef,
+} from '@angular/core';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import {
   and,
   isBooleanControl,
   optionIs,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 
 @Component({
@@ -44,14 +48,19 @@ import {
       >
         {{ label }}
       </mat-slide-toggle>
-      <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{ description }}</mat-hint>
+      <mat-hint class="mat-caption" *ngIf="shouldShowUnfocusedDescription()">{{
+        description
+      }}</mat-hint>
       <mat-error class="mat-caption">{{ error }}</mat-error>
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ToggleControlRenderer extends JsonFormsControl {
-  constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef: ChangeDetectorRef) {
+  constructor(
+    jsonformsService: JsonFormsAngularService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
     super(jsonformsService);
   }
   isChecked = () => this.data || false;
diff --git a/packages/angular-material/src/index.ts b/packages/angular-material/src/index.ts
index 67819e6d8..64c286e7d 100644
--- a/packages/angular-material/src/index.ts
+++ b/packages/angular-material/src/index.ts
@@ -27,67 +27,67 @@ import { RankedTester } from '@jsonforms/core';
 export * from './module';
 import {
   BooleanControlRenderer,
-  booleanControlTester
+  booleanControlTester,
 } from './controls/boolean.renderer';
 import {
   TextControlRenderer,
-  TextControlRendererTester
+  TextControlRendererTester,
 } from './controls/text.renderer';
 import {
   TextAreaRenderer,
-  TextAreaRendererTester
+  TextAreaRendererTester,
 } from './controls/textarea.renderer';
 import {
   NumberControlRenderer,
-  NumberControlRendererTester
+  NumberControlRendererTester,
 } from './controls/number.renderer';
 import {
   RangeControlRenderer,
-  RangeControlRendererTester
+  RangeControlRendererTester,
 } from './controls/range.renderer';
 import {
   DateControlRenderer,
-  DateControlRendererTester
+  DateControlRendererTester,
 } from './controls/date.renderer';
 import {
   ToggleControlRenderer,
-  ToggleControlRendererTester
+  ToggleControlRendererTester,
 } from './controls/toggle.renderer';
 import {
   AutocompleteControlRenderer,
-  enumControlTester
+  enumControlTester,
 } from './controls/autocomplete.renderer';
 import {
   ObjectControlRenderer,
-  ObjectControlRendererTester
+  ObjectControlRendererTester,
 } from './other/object.renderer';
 import {
   VerticalLayoutRenderer,
-  verticalLayoutTester
+  verticalLayoutTester,
 } from './layouts/vertical-layout.renderer';
 import {
   HorizontalLayoutRenderer,
-  horizontalLayoutTester
+  horizontalLayoutTester,
 } from './layouts/horizontal-layout.renderer';
 
 import {
   CategorizationTabLayoutRenderer,
-  categorizationTester
+  categorizationTester,
 } from './layouts/categorization-layout.renderer';
 
 import { LabelRenderer, LabelRendererTester } from './other/label.renderer';
 import {
   masterDetailTester,
-  MasterListComponent
+  MasterListComponent,
 } from './other/master-detail/master';
 import {
   GroupLayoutRenderer,
-  groupLayoutTester
+  groupLayoutTester,
 } from './layouts/group-layout.renderer';
 import { TableRenderer, TableRendererTester } from './other/table.renderer';
 import {
   ArrayLayoutRenderer,
-  ArrayLayoutRendererTester
+  ArrayLayoutRendererTester,
 } from './layouts/array-layout.renderer';
 
 export * from './controls';
@@ -117,5 +117,5 @@ export const angularMaterialRenderers: {
   { tester: ArrayLayoutRendererTester, renderer: ArrayLayoutRenderer },
   // other
   { tester: masterDetailTester, renderer: MasterListComponent },
-  { tester: TableRendererTester, renderer: TableRenderer }
+  { tester: TableRendererTester, renderer: TableRenderer },
 ];
diff --git a/packages/angular-material/src/layouts/array-layout.renderer.ts b/packages/angular-material/src/layouts/array-layout.renderer.ts
index 35e3a3050..eb1b3c1b6 100644
--- a/packages/angular-material/src/layouts/array-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/array-layout.renderer.ts
@@ -26,9 +26,12 @@ import {
   ChangeDetectionStrategy,
   Component,
   OnDestroy,
-  OnInit
+  OnInit,
 } from '@angular/core';
-import { JsonFormsAngularService, JsonFormsAbstractControl } from '@jsonforms/angular';
+import {
+  JsonFormsAngularService,
+  JsonFormsAbstractControl,
+} from '@jsonforms/angular';
 import {
   ArrayLayoutProps,
   ArrayTranslations,
@@ -46,7 +49,7 @@ import {
   StatePropsOfArrayLayout,
   UISchemaElement,
   UISchemaTester,
-  unsetReadonly
+  unsetReadonly,
 } from '@jsonforms/core';
 
 @Component({
@@ -59,12 +62,17 @@ import {
         <mat-icon
           *ngIf="this.error?.length"
           color="warn"
-          matBadge="{{ this.error.split('\n').length }}"
+          matBadge="{{
+            this.error.split(
+              '
+'
+            ).length
+          }}"
           matBadgeColor="warn"
           matTooltip="{{ this.error }}"
           matTooltipClass="error-message-tooltip"
-          >
-            error_outline
+        >
+          error_outline
         </mat-icon>
         <span fxFlex></span>
         <button
@@ -92,7 +100,7 @@ import {
             <jsonforms-outlet [renderProps]="getProps(idx)"></jsonforms-outlet>
           </mat-card-content>
           <mat-card-actions *ngIf="isEnabled()">
-          <button
+            <button
               *ngIf="uischema?.options?.showSortButtons"
               class="item-up"
               mat-button
@@ -132,9 +140,10 @@ import {
     </div>
   `,
   styles: [
-    `.array-layout-toolbar {
-       display: flex;
-       align-items: center;
+    `
+      .array-layout-toolbar {
+        display: flex;
+        align-items: center;
       }
       .array-layout-title {
         margin: 0;
@@ -142,13 +151,14 @@ import {
       ::ng-deep .error-message-tooltip {
         white-space: pre-line;
       }
-      `
+    `,
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArrayLayoutRenderer
   extends JsonFormsAbstractControl<StatePropsOfArrayLayout>
-  implements OnInit, OnDestroy {
+  implements OnInit, OnDestroy
+{
   noData: boolean;
   translations: ArrayTranslations;
   addItem: (path: string, value: any) => () => void;
@@ -180,9 +190,10 @@ export class ArrayLayoutRenderer
   }
   ngOnInit() {
     super.ngOnInit();
-    const { addItem, removeItems, moveUp, moveDown } = mapDispatchToArrayControlProps(
-      this.jsonFormsService.updateCore.bind(this.jsonFormsService)
-    );
+    const { addItem, removeItems, moveUp, moveDown } =
+      mapDispatchToArrayControlProps(
+        this.jsonFormsService.updateCore.bind(this.jsonFormsService)
+      );
     this.addItem = addItem;
     this.moveItemUp = moveUp;
     this.moveItemDown = moveDown;
@@ -211,7 +222,7 @@ export class ArrayLayoutRenderer
     return {
       schema: this.scopedSchema,
       path: Paths.compose(this.propsPath, `${index}`),
-      uischema
+      uischema,
     };
   }
   trackByFn(index: number) {
diff --git a/packages/angular-material/src/layouts/categorization-layout.renderer.ts b/packages/angular-material/src/layouts/categorization-layout.renderer.ts
index f5526eec0..b594693ac 100644
--- a/packages/angular-material/src/layouts/categorization-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/categorization-layout.renderer.ts
@@ -36,12 +36,12 @@ import {
   mapStateToLayoutProps,
   RankedTester,
   rankWith,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
   JsonFormsAngularService,
-  JsonFormsBaseRenderer
+  JsonFormsBaseRenderer,
 } from '@jsonforms/angular';
 import { Subscription } from 'rxjs';
 
@@ -54,15 +54,20 @@ import { Subscription } from 'rxjs';
         [label]="categoryLabels[i]"
       >
         <div *ngFor="let element of category.elements">
-          <jsonforms-outlet [uischema]="element" [path]="path" [schema]="schema"></jsonforms-outlet>
+          <jsonforms-outlet
+            [uischema]="element"
+            [path]="path"
+            [schema]="schema"
+          ></jsonforms-outlet>
         </div>
       </mat-tab>
     </mat-tab-group>
-  `
+  `,
 })
 export class CategorizationTabLayoutRenderer
   extends JsonFormsBaseRenderer<Categorization>
-  implements OnInit, OnDestroy {
+  implements OnInit, OnDestroy
+{
   hidden: boolean;
   visibleCategories: (Category | Categorization)[];
   private subscription: Subscription;
@@ -77,12 +82,18 @@ export class CategorizationTabLayoutRenderer
       next: (state: JsonFormsState) => {
         const props = mapStateToLayoutProps(state, this.getOwnProps());
         this.hidden = !props.visible;
-        this.visibleCategories =  this.uischema.elements.filter((category: Category | Categorization) =>
-          isVisible(category, props.data, undefined, getAjv(state)));
-        this.categoryLabels = this.visibleCategories.map(
-          element => deriveLabelForUISchemaElement(element as Labelable<boolean>,
-            state.jsonforms.i18n?.translate ?? defaultJsonFormsI18nState.translate));
-      }
+        this.visibleCategories = this.uischema.elements.filter(
+          (category: Category | Categorization) =>
+            isVisible(category, props.data, undefined, getAjv(state))
+        );
+        this.categoryLabels = this.visibleCategories.map((element) =>
+          deriveLabelForUISchemaElement(
+            element as Labelable<boolean>,
+            state.jsonforms.i18n?.translate ??
+              defaultJsonFormsI18nState.translate
+          )
+        );
+      },
     });
   }
 
diff --git a/packages/angular-material/src/layouts/group-layout.renderer.ts b/packages/angular-material/src/layouts/group-layout.renderer.ts
index e18b52d99..291d5e814 100644
--- a/packages/angular-material/src/layouts/group-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/group-layout.renderer.ts
@@ -22,7 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core';
 import { GroupLayout, RankedTester, rankWith, uiTypeIs } from '@jsonforms/core';
 import { LayoutRenderer } from './layout.renderer';
 import { JsonFormsAngularService } from '@jsonforms/angular';
@@ -32,15 +36,24 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
   template: `
     <mat-card fxLayout="column" [fxHide]="hidden">
       <mat-card-title class="mat-title">{{ label }}</mat-card-title>
-      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
+      <div
+        *ngFor="
+          let props of uischema | layoutChildrenRenderProps : schema : path;
+          trackBy: trackElement
+        "
+        fxFlex
+      >
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </mat-card>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class GroupLayoutRenderer extends LayoutRenderer<GroupLayout> {
-  constructor(jsonFormsService: JsonFormsAngularService, changeDetectionRef: ChangeDetectorRef) {
+  constructor(
+    jsonFormsService: JsonFormsAngularService,
+    changeDetectionRef: ChangeDetectorRef
+  ) {
     super(jsonFormsService, changeDetectionRef);
   }
 }
diff --git a/packages/angular-material/src/layouts/horizontal-layout.renderer.ts b/packages/angular-material/src/layouts/horizontal-layout.renderer.ts
index 9a541e440..b4c450b93 100644
--- a/packages/angular-material/src/layouts/horizontal-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/horizontal-layout.renderer.ts
@@ -22,12 +22,16 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core';
 import {
   HorizontalLayout,
   RankedTester,
   rankWith,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 import { LayoutRenderer } from './layout.renderer';
 import { JsonFormsAngularService } from '@jsonforms/angular';
@@ -41,15 +45,24 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
       [fxHide]="hidden"
       fxLayoutAlign="center start"
     >
-      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
+      <div
+        *ngFor="
+          let props of uischema | layoutChildrenRenderProps : schema : path;
+          trackBy: trackElement
+        "
+        fxFlex
+      >
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class HorizontalLayoutRenderer extends LayoutRenderer<HorizontalLayout> {
-  constructor(jsonFormsService: JsonFormsAngularService, changeDetectionRef: ChangeDetectorRef) {
+  constructor(
+    jsonFormsService: JsonFormsAngularService,
+    changeDetectionRef: ChangeDetectorRef
+  ) {
     super(jsonFormsService, changeDetectionRef);
   }
 }
diff --git a/packages/angular-material/src/layouts/layout.renderer.ts b/packages/angular-material/src/layouts/layout.renderer.ts
index d8e81f4cb..35b795814 100644
--- a/packages/angular-material/src/layouts/layout.renderer.ts
+++ b/packages/angular-material/src/layouts/layout.renderer.ts
@@ -22,10 +22,17 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { OnDestroy, OnInit, ChangeDetectorRef, Component, PipeTransform, Pipe } from '@angular/core';
+import {
+  OnDestroy,
+  OnInit,
+  ChangeDetectorRef,
+  Component,
+  PipeTransform,
+  Pipe,
+} from '@angular/core';
 import {
   JsonFormsAngularService,
-  JsonFormsBaseRenderer
+  JsonFormsBaseRenderer,
 } from '@jsonforms/angular';
 import {
   JsonFormsState,
@@ -33,20 +40,25 @@ import {
   mapStateToLayoutProps,
   OwnPropsOfRenderer,
   UISchemaElement,
-  JsonSchema
+  JsonSchema,
 } from '@jsonforms/core';
 import type { Subscription } from 'rxjs';
 
 @Component({
-  template: ''
+  template: '',
 })
-export class LayoutRenderer<T extends Layout> extends JsonFormsBaseRenderer<T>
-  implements OnInit, OnDestroy {
+export class LayoutRenderer<T extends Layout>
+  extends JsonFormsBaseRenderer<T>
+  implements OnInit, OnDestroy
+{
   hidden: boolean;
   label: string | undefined;
   private subscription: Subscription;
 
-  constructor(private jsonFormsService: JsonFormsAngularService, protected changeDetectionRef: ChangeDetectorRef) {
+  constructor(
+    private jsonFormsService: JsonFormsAngularService,
+    protected changeDetectionRef: ChangeDetectorRef
+  ) {
     super();
   }
 
@@ -57,7 +69,7 @@ export class LayoutRenderer<T extends Layout> extends JsonFormsBaseRenderer<T>
         this.label = props.label;
         this.hidden = !props.visible;
         this.changeDetectionRef.markForCheck();
-      }
+      },
     });
   }
 
@@ -76,15 +88,16 @@ export class LayoutRenderer<T extends Layout> extends JsonFormsBaseRenderer<T>
 
 @Pipe({ name: 'layoutChildrenRenderProps' })
 export class LayoutChildrenRenderPropsPipe implements PipeTransform {
-  transform(uischema: Layout, schema: JsonSchema, path: string): OwnPropsOfRenderer[] {
-    const elements = (uischema.elements || []).map(
-      (el: UISchemaElement) => ({
-        uischema: el,
-        schema: schema,
-        path: path
-      })
-    );
+  transform(
+    uischema: Layout,
+    schema: JsonSchema,
+    path: string
+  ): OwnPropsOfRenderer[] {
+    const elements = (uischema.elements || []).map((el: UISchemaElement) => ({
+      uischema: el,
+      schema: schema,
+      path: path,
+    }));
     return elements;
   }
-
 }
diff --git a/packages/angular-material/src/layouts/vertical-layout.renderer.ts b/packages/angular-material/src/layouts/vertical-layout.renderer.ts
index 7d285476b..f7c879394 100644
--- a/packages/angular-material/src/layouts/vertical-layout.renderer.ts
+++ b/packages/angular-material/src/layouts/vertical-layout.renderer.ts
@@ -22,12 +22,16 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core';
 import {
   RankedTester,
   rankWith,
   uiTypeIs,
-  VerticalLayout
+  VerticalLayout,
 } from '@jsonforms/core';
 import { LayoutRenderer } from './layout.renderer';
 import { JsonFormsAngularService } from '@jsonforms/angular';
@@ -36,15 +40,24 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
   selector: 'VerticalLayoutRenderer',
   template: `
     <div fxLayout="column" fxLayoutGap="16px" [fxHide]="hidden">
-      <div *ngFor="let props of uischema | layoutChildrenRenderProps: schema: path; trackBy: trackElement" fxFlex>
+      <div
+        *ngFor="
+          let props of uischema | layoutChildrenRenderProps : schema : path;
+          trackBy: trackElement
+        "
+        fxFlex
+      >
         <jsonforms-outlet [renderProps]="props"></jsonforms-outlet>
       </div>
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class VerticalLayoutRenderer extends LayoutRenderer<VerticalLayout> {
-  constructor(jsonFormsService: JsonFormsAngularService, changeDetectionRef: ChangeDetectorRef) {
+  constructor(
+    jsonFormsService: JsonFormsAngularService,
+    changeDetectionRef: ChangeDetectorRef
+  ) {
     super(jsonFormsService, changeDetectionRef);
   }
 }
diff --git a/packages/angular-material/src/module.ts b/packages/angular-material/src/module.ts
index 9ce00c79f..7dc23720e 100644
--- a/packages/angular-material/src/module.ts
+++ b/packages/angular-material/src/module.ts
@@ -25,9 +25,7 @@
 import { CommonModule } from '@angular/common';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
-import {
-  MatAutocompleteModule
-} from '@angular/material/autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatButtonModule } from '@angular/material/button';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatCardModule } from '@angular/material/card';
@@ -92,7 +90,7 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
     MatTableModule,
     MatToolbarModule,
     MatTooltipModule,
-    MatBadgeModule
+    MatBadgeModule,
   ],
   declarations: [
     BooleanControlRenderer,
@@ -113,7 +111,7 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
     AutocompleteControlRenderer,
     TableRenderer,
     ArrayLayoutRenderer,
-    LayoutChildrenRenderPropsPipe
+    LayoutChildrenRenderPropsPipe,
   ],
   entryComponents: [
     BooleanControlRenderer,
@@ -133,7 +131,7 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
     ObjectControlRenderer,
     AutocompleteControlRenderer,
     TableRenderer,
-    ArrayLayoutRenderer
+    ArrayLayoutRenderer,
   ],
   exports: [
     CommonModule,
@@ -154,9 +152,9 @@ import { LayoutChildrenRenderPropsPipe } from './layouts';
     MatSelectModule,
     MatButtonModule,
     MatIconModule,
-    MatAutocompleteModule
+    MatAutocompleteModule,
   ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
-  providers: []
+  providers: [],
 })
-export class JsonFormsAngularMaterialModule { }
+export class JsonFormsAngularMaterialModule {}
diff --git a/packages/angular-material/src/other/label.renderer.ts b/packages/angular-material/src/other/label.renderer.ts
index 341c0ea4c..3bbf50451 100644
--- a/packages/angular-material/src/other/label.renderer.ts
+++ b/packages/angular-material/src/other/label.renderer.ts
@@ -25,7 +25,7 @@
 import { Component } from '@angular/core';
 import {
   JsonFormsAngularService,
-  JsonFormsBaseRenderer
+  JsonFormsBaseRenderer,
 } from '@jsonforms/angular';
 import {
   JsonFormsState,
@@ -40,9 +40,7 @@ import { Subscription } from 'rxjs';
 
 @Component({
   selector: 'LabelRenderer',
-  template: `
-    <label class="mat-title" fxFlex> {{ label }} </label>
-  `
+  template: ` <label class="mat-title" fxFlex> {{ label }} </label> `,
 })
 export class LabelRenderer extends JsonFormsBaseRenderer<LabelElement> {
   label: string;
@@ -56,10 +54,13 @@ export class LabelRenderer extends JsonFormsBaseRenderer<LabelElement> {
   ngOnInit() {
     this.subscription = this.jsonFormsService.$state.subscribe({
       next: (state: JsonFormsState) => {
-        const props = mapStateToLabelProps(state, this.getOwnProps() as OwnPropsOfLabel);
+        const props = mapStateToLabelProps(
+          state,
+          this.getOwnProps() as OwnPropsOfLabel
+        );
         this.visible = props.visible;
-        this.label = props.text
-      }
+        this.label = props.text;
+      },
     });
   }
 
diff --git a/packages/angular-material/src/other/master-detail/detail.ts b/packages/angular-material/src/other/master-detail/detail.ts
index 66ac06734..9076a6667 100644
--- a/packages/angular-material/src/other/master-detail/detail.ts
+++ b/packages/angular-material/src/other/master-detail/detail.ts
@@ -30,14 +30,14 @@ import { Component, Input } from '@angular/core';
     <div *ngIf="initialized">
       <jsonforms-outlet [renderProps]="_item"></jsonforms-outlet>
     </div>
-  `
+  `,
 })
 export class JsonFormsDetailComponent {
   _item: any;
   _schema: any;
   initialized = false;
 
-  @Input('item')
+  @Input()
   set item(item: any) {
     if (item) {
       this._item = item;
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
index 613f1249f..0f3802dd7 100644
--- a/packages/angular-material/src/other/master-detail/master.ts
+++ b/packages/angular-material/src/other/master-detail/master.ts
@@ -24,10 +24,14 @@
 */
 import some from 'lodash/some';
 import get from 'lodash/get';
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+} from '@angular/core';
 import {
   JsonFormsAngularService,
-  JsonFormsArrayControl
+  JsonFormsArrayControl,
 } from '@jsonforms/angular';
 import {
   ArrayControlProps,
@@ -44,7 +48,7 @@ import {
   rankWith,
   setReadonly,
   StatePropsOfArrayControl,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 
 const keywords = ['#', 'properties', 'items'];
@@ -53,7 +57,7 @@ export const removeSchemaKeywords = (path: string) => {
   return decode(
     path
       .split('/')
-      .filter(s => !some(keywords, key => key === s))
+      .filter((s) => !some(keywords, (key) => key === s))
       .join('.')
   );
 };
@@ -64,9 +68,9 @@ export const removeSchemaKeywords = (path: string) => {
     <mat-sidenav-container class="container" [fxHide]="hidden">
       <mat-sidenav mode="side" opened>
         <mat-nav-list>
-          <mat-list-item *ngIf="masterItems.length === 0"
-            >{{ translations.noDataMessage }}</mat-list-item
-          >
+          <mat-list-item *ngIf="masterItems.length === 0">{{
+            translations.noDataMessage
+          }}</mat-list-item>
           <mat-list-item
             *ngFor="
               let item of masterItems;
@@ -138,9 +142,9 @@ export const removeSchemaKeywords = (path: string) => {
       mat-sidenav {
         width: 20%;
       }
-    `
+    `,
   ],
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MasterListComponent extends JsonFormsArrayControl {
   masterItems: any[];
@@ -152,7 +156,10 @@ export class MasterListComponent extends JsonFormsArrayControl {
   highlightedIdx: number;
   translations: ArrayTranslations;
 
-  constructor(jsonformsService: JsonFormsAngularService, private changeDetectorRef: ChangeDetectorRef) {
+  constructor(
+    jsonformsService: JsonFormsAngularService,
+    private changeDetectorRef: ChangeDetectorRef
+  ) {
     super(jsonformsService);
   }
 
@@ -166,7 +173,9 @@ export class MasterListComponent extends JsonFormsArrayControl {
 
   ngOnInit() {
     super.ngOnInit();
-    const dispatch = this.jsonFormsService.updateCore.bind(this.jsonFormsService);
+    const dispatch = this.jsonFormsService.updateCore.bind(
+      this.jsonFormsService
+    );
     const { addItem, removeItems } = mapDispatchToArrayControlProps(dispatch);
     this.addItem = addItem;
     this.removeItems = removeItems;
@@ -177,32 +186,34 @@ export class MasterListComponent extends JsonFormsArrayControl {
     const controlElement = uischema as ControlElement;
     this.propsPath = props.path;
     const detailUISchema = findUISchema(
-        props.uischemas,
-        schema,
-        `${controlElement.scope}/items`,
-        props.path,
-        'VerticalLayout',
-        controlElement,
-        props.rootSchema
-      );
+      props.uischemas,
+      schema,
+      `${controlElement.scope}/items`,
+      props.path,
+      'VerticalLayout',
+      controlElement,
+      props.rootSchema
+    );
 
     if (!this.isEnabled()) {
       setReadonly(detailUISchema);
     }
 
-    this.translations=props.translations;
+    this.translations = props.translations;
 
     const masterItems = (data || []).map((d: any, index: number) => {
-      const labelRefInstancePath = controlElement.options?.labelRef && removeSchemaKeywords(
-        controlElement.options.labelRef
-      );
+      const labelRefInstancePath =
+        controlElement.options?.labelRef &&
+        removeSchemaKeywords(controlElement.options.labelRef);
       const isPrimitive = d !== undefined && typeof d !== 'object';
       const masterItem = {
-        label: isPrimitive ? d.toString() : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
+        label: isPrimitive
+          ? d.toString()
+          : get(d, labelRefInstancePath ?? getFirstPrimitiveProp(schema)),
         data: d,
         path: `${path}.${index}`,
         schema,
-        uischema: detailUISchema
+        uischema: detailUISchema,
       };
       return masterItem;
     });
diff --git a/packages/angular-material/src/other/object.renderer.ts b/packages/angular-material/src/other/object.renderer.ts
index 1bf86a755..8e7e5a10f 100644
--- a/packages/angular-material/src/other/object.renderer.ts
+++ b/packages/angular-material/src/other/object.renderer.ts
@@ -27,7 +27,7 @@ import startCase from 'lodash/startCase';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
   JsonFormsAngularService,
-  JsonFormsControlWithDetail
+  JsonFormsControlWithDetail,
 } from '@jsonforms/angular';
 import {
   ControlWithDetailProps,
@@ -37,7 +37,7 @@ import {
   RankedTester,
   rankWith,
   setReadonly,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 
 @Component({
@@ -52,7 +52,7 @@ import {
       </jsonforms-outlet>
     </mat-card>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ObjectControlRenderer extends JsonFormsControlWithDetail {
   detailUiSchema: UISchemaElement;
diff --git a/packages/angular-material/src/other/table.renderer.ts b/packages/angular-material/src/other/table.renderer.ts
index aa6aa68d4..94072d0f1 100644
--- a/packages/angular-material/src/other/table.renderer.ts
+++ b/packages/angular-material/src/other/table.renderer.ts
@@ -26,24 +26,26 @@ import startCase from 'lodash/startCase';
 import { Component } from '@angular/core';
 import {
   JsonFormsAngularService,
-  JsonFormsArrayControl
+  JsonFormsArrayControl,
 } from '@jsonforms/angular';
 import {
   ArrayControlProps,
   ArrayTranslations,
-  ControlElement, createDefaultValue,
+  ControlElement,
+  createDefaultValue,
   deriveTypes,
   encode,
   isObjectArrayControl,
   isPrimitiveArrayControl,
-  JsonSchema, mapDispatchToArrayControlProps,
+  JsonSchema,
+  mapDispatchToArrayControlProps,
   or,
   OwnPropsOfRenderer,
   Paths,
   RankedTester,
   rankWith,
   setReadonly,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 
 @Component({
@@ -58,12 +60,28 @@ import {
       <ng-container matColumnDef="action">
         <tr>
           <th mat-header-cell *matHeaderCellDef>
-            <button mat-button color="primary" (click)="add()" [disabled]="!isEnabled()" [matTooltip]="translations.addTooltip"><mat-icon>add</mat-icon></button>
+            <button
+              mat-button
+              color="primary"
+              (click)="add()"
+              [disabled]="!isEnabled()"
+              [matTooltip]="translations.addTooltip"
+            >
+              <mat-icon>add</mat-icon>
+            </button>
           </th>
         </tr>
         <tr>
-          <td mat-cell *matCellDef="let row; let i = index; let first = first; let last = last;">
-          <button
+          <td
+            mat-cell
+            *matCellDef="
+              let row;
+              let i = index;
+              let first = first;
+              let last = last
+            "
+          >
+            <button
               *ngIf="uischema?.options?.showSortButtons"
               class="item-up"
               mat-button
@@ -71,7 +89,7 @@ import {
               (click)="up(i)"
               [matTooltip]="translations.upAriaLabel"
               matTooltipPosition="right"
-              >
+            >
               <mat-icon>arrow_upward</mat-icon>
             </button>
             <button
@@ -86,18 +104,21 @@ import {
               <mat-icon>arrow_downward</mat-icon>
             </button>
             <button
-                mat-button
-                color="warn"
-                (click)="remove(i)"
-                [disabled]="!isEnabled()"
-                matTooltipPosition="right"
-                [matTooltip]="translations.removeTooltip"
+              mat-button
+              color="warn"
+              (click)="remove(i)"
+              [disabled]="!isEnabled()"
+              matTooltipPosition="right"
+              [matTooltip]="translations.removeTooltip"
             >
               <mat-icon>delete</mat-icon>
             </button>
           </td>
-        <tr>
-      </ng-container>
+        </tr>
+
+        <tr></tr
+      ></ng-container>
+
       <ng-container
         *ngFor="let item of items"
         matColumnDef="{{ item.property }}"
@@ -114,9 +135,7 @@ import {
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
   `,
-  styles: [
-      'table {width: 100%;}',
-      '.cdk-column-action { width: 15%}']
+  styles: ['table {width: 100%;}', '.cdk-column-action { width: 15%}'],
 })
 export class TableRenderer extends JsonFormsArrayControl {
   detailUiSchema: UISchemaElement;
@@ -137,7 +156,7 @@ export class TableRenderer extends JsonFormsArrayControl {
   }
   mapAdditionalProps(props: ArrayControlProps) {
     this.items = this.generateCells(props.schema, props.path);
-    this.displayedColumns = this.items.map(item => item.property);
+    this.displayedColumns = this.items.map((item) => item.property);
     if (this.isEnabled()) {
       this.displayedColumns.push('action');
     }
@@ -148,7 +167,7 @@ export class TableRenderer extends JsonFormsArrayControl {
     return {
       schema: props.schema,
       uischema: props.uischema,
-      path: rowPath
+      path: rowPath,
     };
   }
 
@@ -167,9 +186,10 @@ export class TableRenderer extends JsonFormsArrayControl {
   ngOnInit() {
     super.ngOnInit();
 
-    const { addItem, removeItems, moveUp, moveDown } = mapDispatchToArrayControlProps(
+    const { addItem, removeItems, moveUp, moveDown } =
+      mapDispatchToArrayControlProps(
         this.jsonFormsService.updateCore.bind(this.jsonFormsService)
-    );
+      );
     this.addItem = addItem;
     this.moveItemUp = moveUp;
     this.moveItemDown = moveDown;
@@ -181,7 +201,7 @@ export class TableRenderer extends JsonFormsArrayControl {
     rowPath: string
   ): ColumnDescription[] => {
     if (schema.type === 'object') {
-      return this.getValidColumnProps(schema).map(prop => {
+      return this.getValidColumnProps(schema).map((prop) => {
         const encProp = encode(prop);
         const uischema = controlWithoutLabel(`#/properties/${encProp}`);
         if (!this.isEnabled()) {
@@ -193,8 +213,8 @@ export class TableRenderer extends JsonFormsArrayControl {
           props: {
             schema: schema,
             uischema,
-            path: rowPath
-          }
+            path: rowPath,
+          },
         };
       });
     }
@@ -206,15 +226,15 @@ export class TableRenderer extends JsonFormsArrayControl {
         props: {
           schema: schema,
           uischema: controlWithoutLabel(`#`),
-          path: rowPath
-        }
-      }
+          path: rowPath,
+        },
+      },
     ];
   };
 
   getValidColumnProps = (scopedSchema: JsonSchema) => {
     if (scopedSchema.type === 'object') {
-      return Object.keys(scopedSchema.properties).filter(prop => {
+      return Object.keys(scopedSchema.properties).filter((prop) => {
         const types = deriveTypes(scopedSchema.properties[prop]);
         if (types.length > 1) {
           return false;
@@ -240,5 +260,5 @@ interface ColumnDescription {
 export const controlWithoutLabel = (scope: string): ControlElement => ({
   type: 'Control',
   scope: scope,
-  label: false
+  label: false,
 });
diff --git a/packages/angular-material/src/other/util.ts b/packages/angular-material/src/other/util.ts
index 2abdcc178..767200287 100644
--- a/packages/angular-material/src/other/util.ts
+++ b/packages/angular-material/src/other/util.ts
@@ -22,12 +22,19 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ControlElement, getAjv, getData, isVisible, JsonFormsState, OwnPropsOfRenderer } from '@jsonforms/core';
+import {
+  ControlElement,
+  getAjv,
+  getData,
+  isVisible,
+  JsonFormsState,
+  OwnPropsOfRenderer,
+} from '@jsonforms/core';
 
 export const controlWithoutLabel = (scope: string): ControlElement => ({
   type: 'Control',
   scope: scope,
-  label: false
+  label: false,
 });
 
 export const mapStateToVisible = (
@@ -40,6 +47,6 @@ export const mapStateToVisible = (
       : isVisible(ownProps.uischema, getData(state), undefined, getAjv(state));
 
   return {
-    visible
+    visible,
   };
 };
diff --git a/packages/angular-material/test/autocomplete-control.spec.ts b/packages/angular-material/test/autocomplete-control.spec.ts
index 777613ef4..7a6a8b00f 100644
--- a/packages/angular-material/test/autocomplete-control.spec.ts
+++ b/packages/angular-material/test/autocomplete-control.spec.ts
@@ -22,7 +22,10 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { MatAutocompleteModule, MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
+import {
+  MatAutocompleteModule,
+  MatAutocompleteSelectedEvent,
+} from '@angular/material/autocomplete';
 import { MatError, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { OverlayContainer } from '@angular/cdk/overlay';
@@ -32,12 +35,16 @@ import {
   fakeAsync,
   inject,
   TestBed,
-  tick
+  tick,
 } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ErrorTestExpectation, setupMockStore, getJsonFormsService } from '@jsonforms/angular-test';
+import {
+  ErrorTestExpectation,
+  setupMockStore,
+  getJsonFormsService,
+} from '@jsonforms/angular-test';
 import { ControlElement, JsonSchema, Actions } from '@jsonforms/core';
 import { AutocompleteControlRenderer } from '../src';
 import { JsonFormsAngularService } from '@jsonforms/angular';
@@ -50,13 +57,13 @@ const schema: JsonSchema = {
   properties: {
     foo: {
       type: 'string',
-      enum: ['A', 'B', 'C']
-    }
-  }
+      enum: ['A', 'B', 'C'],
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 const imports = [
@@ -65,14 +72,14 @@ const imports = [
   MatFormFieldModule,
   NoopAnimationsModule,
   ReactiveFormsModule,
-  FlexLayoutModule
+  FlexLayoutModule,
 ];
 const providers = [JsonFormsAngularService];
 const componentUT: any = AutocompleteControlRenderer;
 const errorTest: ErrorTestExpectation = {
   errorInstance: MatError,
   numberOfElements: 1,
-  indexOfElement: 0
+  indexOfElement: 0,
 };
 
 describe('Autocomplete control Base Tests', () => {
@@ -83,9 +90,8 @@ describe('Autocomplete control Base Tests', () => {
     TestBed.configureTestingModule({
       declarations: [componentUT],
       imports: imports,
-      providers: providers
+      providers: providers,
     }).compileComponents();
-
   });
   beforeEach(() => {
     fixture = TestBed.createComponent(componentUT);
@@ -96,7 +102,9 @@ describe('Autocomplete control Base Tests', () => {
 
   it('should render', fakeAsync(() => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
     tick();
@@ -107,7 +115,9 @@ describe('Autocomplete control Base Tests', () => {
 
   it('should support updating the state', fakeAsync(() => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
     tick();
@@ -120,29 +130,39 @@ describe('Autocomplete control Base Tests', () => {
 
   it('should update with undefined value', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(Actions.update('foo', () => undefined));
+    getJsonFormsService(component).updateCore(
+      Actions.update('foo', () => undefined)
+    );
     fixture.detectChanges();
     expect(component.data).toBe(undefined);
     expect(inputElement.value).toBe('');
   });
   it('should update with null value', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     fixture.detectChanges();
     component.ngOnInit();
 
-    getJsonFormsService(component).updateCore(Actions.update('foo', () => null));
+    getJsonFormsService(component).updateCore(
+      Actions.update('foo', () => null)
+    );
     fixture.detectChanges();
     expect(component.data).toBe(null);
     expect(inputElement.value).toBe('');
   });
   it('should not update with wrong ref', fakeAsync(() => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
     tick();
@@ -156,7 +176,9 @@ describe('Autocomplete control Base Tests', () => {
   // store needed as we evaluate the calculated enabled value to disable/enable the control
   it('can be disabled', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.disabled = true;
     component.ngOnInit();
     fixture.detectChanges();
@@ -164,7 +186,9 @@ describe('Autocomplete control Base Tests', () => {
   });
   it('can be hidden', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.visible = false;
     component.ngOnInit();
     fixture.detectChanges();
@@ -177,7 +201,9 @@ describe('Autocomplete control Base Tests', () => {
   it('id should be present in output', () => {
     setupMockStore(fixture, { uischema, schema, data });
     component.id = 'myId';
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
 
     fixture.detectChanges();
     component.ngOnInit();
@@ -195,9 +221,7 @@ describe('AutoComplete control Input Event Tests', () => {
     TestBed.configureTestingModule({
       declarations: [componentUT],
       imports: imports,
-      providers: [
-        ...providers,
-      ]
+      providers: [...providers],
     }).compileComponents();
 
     inject([OverlayContainer], (oc: OverlayContainer) => {
@@ -208,7 +232,7 @@ describe('AutoComplete control Input Event Tests', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(componentUT);
     component = fixture.componentInstance;
-    zone =  TestBed.inject(NgZone);
+    zone = TestBed.inject(NgZone);
     spyOn(zone, 'runOutsideAngular').and.callFake((fn: Function) => fn());
     inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
   });
@@ -224,7 +248,9 @@ describe('AutoComplete control Input Event Tests', () => {
   ));
   it('should update via input event', fakeAsync(() => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
 
     component.ngOnInit();
     fixture.detectChanges();
@@ -250,7 +276,9 @@ describe('AutoComplete control Input Event Tests', () => {
   }));
   it('options should prefer own props', fakeAsync(() => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.options = ['X', 'Y', 'Z'];
 
     component.ngOnInit();
@@ -282,9 +310,8 @@ describe('AutoComplete control Error Tests', () => {
     TestBed.configureTestingModule({
       declarations: [componentUT],
       imports: imports,
-      providers: providers
+      providers: providers,
     }).compileComponents();
-
   });
   beforeEach(() => {
     fixture = TestBed.createComponent(componentUT);
@@ -297,13 +324,13 @@ describe('AutoComplete control Error Tests', () => {
         message: 'Hi, this is me, test error!',
         params: {},
         keyword: '',
-        schemaPath: ''
-      }
+        schemaPath: '',
+      },
     ];
     setupMockStore(fixture, {
       uischema,
       schema,
-      data
+      data,
     });
     const formsService = getJsonFormsService(component);
     formsService.updateCore(Actions.updateErrors(errors));
diff --git a/packages/angular-material/test/boolean-control.spec.ts b/packages/angular-material/test/boolean-control.spec.ts
index b1bfbfca1..dac35861d 100644
--- a/packages/angular-material/test/boolean-control.spec.ts
+++ b/packages/angular-material/test/boolean-control.spec.ts
@@ -28,7 +28,7 @@ import {
   booleanBaseTest,
   booleanErrorTest,
   booleanInputEventTest,
-  ErrorTestExpectation
+  ErrorTestExpectation,
 } from '@jsonforms/angular-test';
 import { BooleanControlRenderer, booleanControlTester } from '../src';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -37,19 +37,23 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
 describe('Material boolean field tester', () => {
   const uischema = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
 
   it('should succeed', () => {
     expect(
-      booleanControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'boolean'
-          }
-        }
-      }, undefined)
+      booleanControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'boolean',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -59,7 +63,7 @@ const componentUT: any = BooleanControlRenderer;
 const errorTest: ErrorTestExpectation = {
   errorInstance: MatError,
   numberOfElements: 1,
-  indexOfElement: 0
+  indexOfElement: 0,
 };
 const testConfig = { imports, providers, componentUT };
 describe(
diff --git a/packages/angular-material/test/categorization-tab-layout.spec.ts b/packages/angular-material/test/categorization-tab-layout.spec.ts
index ca945fd30..c6271693e 100644
--- a/packages/angular-material/test/categorization-tab-layout.spec.ts
+++ b/packages/angular-material/test/categorization-tab-layout.spec.ts
@@ -28,17 +28,21 @@ import {
   MatTab,
   MatTabBody,
   MatTabGroup,
-  MatTabsModule
+  MatTabsModule,
 } from '@angular/material/tabs';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
   JsonFormsAngularService,
   JsonFormsModule,
-  JsonFormsOutlet
+  JsonFormsOutlet,
 } from '@jsonforms/angular';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
-import { CategorizationTabLayoutRenderer, TextControlRenderer, TextControlRendererTester } from '../src';
+import {
+  CategorizationTabLayoutRenderer,
+  TextControlRenderer,
+  TextControlRendererTester,
+} from '../src';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { setupMockStore, getJsonFormsService } from '@jsonforms/angular-test';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -59,27 +63,33 @@ describe('Categorization tab layout', () => {
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
+        type: 'string',
       },
       bar: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        CategorizationTabLayoutRenderer,
-        TextControlRenderer
+      declarations: [CategorizationTabLayoutRenderer, TextControlRenderer],
+      imports: [
+        CommonModule,
+        MatTabsModule,
+        FlexLayoutModule,
+        NoopAnimationsModule,
+        JsonFormsModule,
+        MatFormFieldModule,
+        MatInputModule,
+        ReactiveFormsModule,
       ],
-      imports: [CommonModule, MatTabsModule, FlexLayoutModule, NoopAnimationsModule, JsonFormsModule,MatFormFieldModule,MatInputModule,ReactiveFormsModule,],
-      providers: [JsonFormsAngularService]
+      providers: [JsonFormsAngularService],
     })
       .overrideModule(BrowserDynamicTestingModule, {
         set: {
-          entryComponents: [TextControlRenderer]
-        }
+          entryComponents: [TextControlRenderer],
+        },
       })
       .compileComponents();
 
@@ -97,13 +107,13 @@ describe('Categorization tab layout', () => {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/foo'
+              scope: '#/properties/foo',
             },
             {
               type: 'Control',
-              scope: '#/properties/bar'
-            }
-          ]
+              scope: '#/properties/bar',
+            },
+          ],
         },
         {
           type: 'Category',
@@ -111,11 +121,11 @@ describe('Categorization tab layout', () => {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/bar'
-            }
-          ]
-        }
-      ]
+              scope: '#/properties/bar',
+            },
+          ],
+        },
+      ],
     };
 
     setupMockStore(fixture, { uischema, schema, data });
@@ -162,25 +172,23 @@ describe('Categorization tab layout', () => {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/foo'
+              scope: '#/properties/foo',
             },
-          ]
-        }
-      ]
+          ],
+        },
+      ],
     };
     setupMockStore(fixture, { uischema, schema, data });
     component.path = 'aa';
-    const subSchema = {type: 'string'};
+    const subSchema = { type: 'string' };
     component.schema = subSchema;
     getJsonFormsService(component).init({
-
       renderers: renderers,
       core: {
         data: {},
         schema: schema,
-        uischema: undefined
-      }
-
+        uischema: undefined,
+      },
     });
 
     fixture.detectChanges();
@@ -206,13 +214,13 @@ describe('Categorization tab layout', () => {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/foo'
+              scope: '#/properties/foo',
             },
             {
               type: 'Control',
-              scope: '#/properties/bar'
-            }
-          ]
+              scope: '#/properties/bar',
+            },
+          ],
         },
         {
           type: 'Category',
@@ -220,11 +228,11 @@ describe('Categorization tab layout', () => {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/bar'
-            }
-          ]
-        }
-      ]
+              scope: '#/properties/bar',
+            },
+          ],
+        },
+      ],
     };
     setupMockStore(fixture, { uischema, schema, data });
     fixture.detectChanges();
@@ -245,9 +253,9 @@ describe('Categorization tab layout', () => {
             elements: [
               {
                 type: 'Control',
-                scope: '#/properties/foo'
-              }
-            ]
+                scope: '#/properties/foo',
+              },
+            ],
           },
           {
             type: 'Category',
@@ -255,9 +263,9 @@ describe('Categorization tab layout', () => {
             elements: [
               {
                 type: 'Control',
-                scope: '#/properties/bar'
-              }
-            ]
+                scope: '#/properties/bar',
+              },
+            ],
           },
           {
             type: 'Category',
@@ -265,11 +273,11 @@ describe('Categorization tab layout', () => {
             elements: [
               {
                 type: 'Control',
-                scope: '#/properties/bar'
-              }
-            ]
-          }
-        ]
+                scope: '#/properties/bar',
+              },
+            ],
+          },
+        ],
       };
       component.uischema = newUischema;
       fixture.detectChanges();
@@ -300,13 +308,13 @@ describe('Categorization tab layout', () => {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/foo'
+              scope: '#/properties/foo',
             },
             {
               type: 'Control',
-              scope: '#/properties/bar'
-            }
-          ]
+              scope: '#/properties/bar',
+            },
+          ],
         },
         {
           type: 'Category',
@@ -314,11 +322,11 @@ describe('Categorization tab layout', () => {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/bar'
-            }
-          ]
-        }
-      ]
+              scope: '#/properties/bar',
+            },
+          ],
+        },
+      ],
     };
     setupMockStore(fixture, { uischema, schema, data });
     component.visible = false;
diff --git a/packages/angular-material/test/date-control.spec.ts b/packages/angular-material/test/date-control.spec.ts
index 006b4ba55..04e7b2758 100644
--- a/packages/angular-material/test/date-control.spec.ts
+++ b/packages/angular-material/test/date-control.spec.ts
@@ -27,16 +27,23 @@ import {
   ComponentFixture,
   fakeAsync,
   flush,
-  TestBed
+  TestBed,
 } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
-import { MatNativeDateModule } from '@angular/material/core'
-import { MatDatepicker, MatDatepickerModule } from '@angular/material/datepicker';
+import { MatNativeDateModule } from '@angular/material/core';
+import {
+  MatDatepicker,
+  MatDatepickerModule,
+} from '@angular/material/datepicker';
 import { MatError, MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { ErrorTestExpectation, getJsonFormsService, setupMockStore } from '@jsonforms/angular-test';
+import {
+  ErrorTestExpectation,
+  getJsonFormsService,
+  setupMockStore,
+} from '@jsonforms/angular-test';
 import { Actions, ControlElement, JsonSchema } from '@jsonforms/core';
 import { DateControlRenderer, DateControlRendererTester } from '../src';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -49,18 +56,20 @@ const schema: JsonSchema = {
   properties: {
     foo: {
       type: 'string',
-      format: 'date'
-    }
-  }
+      format: 'date',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material boolean field tester', () => {
   it('should succeed', () => {
-    expect(DateControlRendererTester(uischema, schema, createTesterContext(schema))).toBe(2);
+    expect(
+      DateControlRendererTester(uischema, schema, createTesterContext(schema))
+    ).toBe(2);
   });
 });
 const imports = [
@@ -70,14 +79,14 @@ const imports = [
   MatFormFieldModule,
   NoopAnimationsModule,
   ReactiveFormsModule,
-  FlexLayoutModule
+  FlexLayoutModule,
 ];
 const providers = [JsonFormsAngularService];
 const componentUT: any = DateControlRenderer;
 const errorTest: ErrorTestExpectation = {
   errorInstance: MatError,
   numberOfElements: 1,
-  indexOfElement: 0
+  indexOfElement: 0,
 };
 
 describe('Date control Base Tests', () => {
@@ -88,9 +97,8 @@ describe('Date control Base Tests', () => {
     TestBed.configureTestingModule({
       declarations: [componentUT],
       imports: imports,
-      providers: providers
+      providers: providers,
     }).compileComponents();
-
   });
   beforeEach(() => {
     fixture = TestBed.createComponent(componentUT);
@@ -101,7 +109,9 @@ describe('Date control Base Tests', () => {
 
   it('should render', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
     expect(component.data).toBe('2018-01-01');
@@ -114,45 +124,63 @@ describe('Date control Base Tests', () => {
 
   it('should support updating the state', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(Actions.update('foo', () => '2018-03-03'));
+    getJsonFormsService(component).updateCore(
+      Actions.update('foo', () => '2018-03-03')
+    );
     fixture.detectChanges();
     expect(component.data).toBe('2018-03-03');
     expect(inputElement.value).toBe('3/3/2018');
   });
   it('should update with undefined value', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(Actions.update('foo', () => undefined));
+    getJsonFormsService(component).updateCore(
+      Actions.update('foo', () => undefined)
+    );
     fixture.detectChanges();
     expect(component.data).toBe(undefined);
     expect(inputElement.value).toBe('');
   });
   it('should update with null value', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(Actions.update('foo', () => null));
+    getJsonFormsService(component).updateCore(
+      Actions.update('foo', () => null)
+    );
     fixture.detectChanges();
     expect(component.data).toBe(null);
     expect(inputElement.value).toBe('');
   });
   it('should not update with wrong ref', () => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(Actions.update('foo', () => '2018-01-01'));
-    getJsonFormsService(component).updateCore(Actions.update('bar', () => '2018-03-03'));
+    getJsonFormsService(component).updateCore(
+      Actions.update('foo', () => '2018-01-01')
+    );
+    getJsonFormsService(component).updateCore(
+      Actions.update('bar', () => '2018-03-03')
+    );
     fixture.detectChanges();
     expect(component.data).toBe('2018-01-01');
     expect(inputElement.value).toBe('1/1/2018');
@@ -161,7 +189,9 @@ describe('Date control Base Tests', () => {
   it('can be disabled', () => {
     setupMockStore(fixture, { uischema, schema, data });
     component.disabled = true;
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
 
     component.ngOnInit();
     fixture.detectChanges();
@@ -171,7 +201,9 @@ describe('Date control Base Tests', () => {
   it('can be hidden', () => {
     setupMockStore(fixture, { uischema, schema, data });
     component.visible = false;
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
 
     component.ngOnInit();
     fixture.detectChanges();
@@ -181,9 +213,9 @@ describe('Date control Base Tests', () => {
   it('id should be present in output', () => {
     component.uischema = uischema;
     component.id = 'myId';
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: schema, uischema: uischema}}
-    );
+    getJsonFormsService(component).init({
+      core: { data: data, schema: schema, uischema: uischema },
+    });
 
     component.ngOnInit();
     fixture.detectChanges();
@@ -198,7 +230,7 @@ describe('Date control Input Event Tests', () => {
     TestBed.configureTestingModule({
       declarations: [componentUT],
       imports: imports,
-      providers: providers
+      providers: providers,
     }).compileComponents();
   });
   beforeEach(() => {
@@ -209,7 +241,9 @@ describe('Date control Input Event Tests', () => {
   });
   it('should update via input event', fakeAsync(() => {
     setupMockStore(fixture, { uischema, schema, data });
-    getJsonFormsService(component).updateCore(Actions.init(data, schema, uischema));
+    getJsonFormsService(component).updateCore(
+      Actions.init(data, schema, uischema)
+    );
     component.ngOnInit();
     fixture.detectChanges();
 
@@ -241,9 +275,8 @@ describe('Date control Error Tests', () => {
     TestBed.configureTestingModule({
       declarations: [componentUT],
       imports: imports,
-      providers: providers
+      providers: providers,
     }).compileComponents();
-
   });
   beforeEach(() => {
     fixture = TestBed.createComponent(componentUT);
@@ -253,18 +286,20 @@ describe('Date control Error Tests', () => {
     setupMockStore(fixture, {
       uischema,
       schema,
-      data
+      data,
     });
     const formsService = getJsonFormsService(component);
-    formsService.updateCore(Actions.updateErrors([
-      {
-        instancePath: '/foo',
-        message: 'Hi, this is me, test error!',
-        params: {},
-        keyword: '',
-        schemaPath: ''
-      }
-    ]));
+    formsService.updateCore(
+      Actions.updateErrors([
+        {
+          instancePath: '/foo',
+          message: 'Hi, this is me, test error!',
+          params: {},
+          keyword: '',
+          schemaPath: '',
+        },
+      ])
+    );
     formsService.refresh();
 
     component.ngOnInit();
diff --git a/packages/angular-material/test/group-layout.spec.ts b/packages/angular-material/test/group-layout.spec.ts
index a2e47c0a6..584e87807 100644
--- a/packages/angular-material/test/group-layout.spec.ts
+++ b/packages/angular-material/test/group-layout.spec.ts
@@ -27,15 +27,12 @@ import { GroupLayout, UISchemaElement } from '@jsonforms/core';
 import { MatCard, MatCardTitle } from '@angular/material/card';
 import { By } from '@angular/platform-browser';
 import { DebugElement } from '@angular/core';
-import {
-  beforeEachLayoutTest,
-  setupMockStore
-} from '@jsonforms/angular-test';
+import { beforeEachLayoutTest, setupMockStore } from '@jsonforms/angular-test';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
 import {
   GroupLayoutRenderer,
-  groupLayoutTester
+  groupLayoutTester,
 } from '../src/layouts/group-layout.renderer';
 
 describe('Group layout tester', () => {
@@ -49,13 +46,13 @@ describe('Group layout', () => {
   beforeEach(() => {
     fixture = beforeEachLayoutTest(GroupLayoutRenderer, {
       declarations: [LayoutChildrenRenderPropsPipe, MatCard, MatCardTitle],
-      imports: [FlexLayoutModule]
+      imports: [FlexLayoutModule],
     });
   });
 
   it('render with undefined elements', () => {
     const uischema: UISchemaElement = {
-      type: 'Group'
+      type: 'Group',
     };
     setupMockStore(fixture, { data: {}, schema: {}, uischema });
     fixture.componentInstance.ngOnInit();
@@ -70,7 +67,7 @@ describe('Group layout', () => {
   it('render with null elements', () => {
     const uischema: GroupLayout = {
       type: 'Group',
-      elements: null
+      elements: null,
     };
     setupMockStore(fixture, { data: {}, schema: {}, uischema });
     fixture.componentInstance.ngOnInit();
@@ -86,7 +83,7 @@ describe('Group layout', () => {
     const uischema: GroupLayout = {
       type: 'Group',
       label: 'foo',
-      elements: [{ type: 'Control' }, { type: 'Control' }]
+      elements: [{ type: 'Control' }, { type: 'Control' }],
     };
     setupMockStore(fixture, { data: {}, schema: {}, uischema });
     fixture.componentInstance.ngOnInit();
diff --git a/packages/angular-material/test/horizontal-layout.spec.ts b/packages/angular-material/test/horizontal-layout.spec.ts
index 7726cec20..16cc72e68 100644
--- a/packages/angular-material/test/horizontal-layout.spec.ts
+++ b/packages/angular-material/test/horizontal-layout.spec.ts
@@ -28,7 +28,7 @@ import { beforeEachLayoutTest, setupMockStore } from '@jsonforms/angular-test';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import {
   HorizontalLayoutRenderer,
-  horizontalLayoutTester
+  horizontalLayoutTester,
 } from '../src/layouts/horizontal-layout.renderer';
 import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
 
@@ -45,18 +45,18 @@ describe('Horizontal layout', () => {
   beforeEach(() => {
     fixture = beforeEachLayoutTest(HorizontalLayoutRenderer, {
       declarations: [LayoutChildrenRenderPropsPipe],
-      imports: [FlexLayoutModule]
+      imports: [FlexLayoutModule],
     });
   });
 
   it('render with undefined elements', () => {
     const uischema: UISchemaElement = {
-      type: 'HorizontalLayout'
+      type: 'HorizontalLayout',
     };
     setupMockStore(fixture, {
       data: {},
       schema: {},
-      uischema
+      uischema,
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
@@ -66,12 +66,12 @@ describe('Horizontal layout', () => {
   it('render with null elements', () => {
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: null
+      elements: null,
     };
     setupMockStore(fixture, {
       data: {},
       schema: {},
-      uischema
+      uischema,
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
@@ -81,12 +81,12 @@ describe('Horizontal layout', () => {
   it('render with children', () => {
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [{ type: 'Control' }, { type: 'Control' }]
+      elements: [{ type: 'Control' }, { type: 'Control' }],
     };
     setupMockStore(fixture, {
       data: {},
       schema: {},
-      uischema
+      uischema,
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
diff --git a/packages/angular-material/test/label-renderer.spec.ts b/packages/angular-material/test/label-renderer.spec.ts
index cbc4b7bf0..c7c264607 100644
--- a/packages/angular-material/test/label-renderer.spec.ts
+++ b/packages/angular-material/test/label-renderer.spec.ts
@@ -35,13 +35,13 @@ const schema: JsonSchema = {
   type: 'object',
   properties: {
     foo: {
-      type: 'string'
-    }
-  }
+      type: 'string',
+    },
+  },
 };
 const uischema: LabelElement = {
   type: 'Label',
-  text: 'FooBar'
+  text: 'FooBar',
 };
 
 describe('Material label field tester', () => {
@@ -59,7 +59,7 @@ describe('Label Renderer Base Tests', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       declarations: [componentUT],
-      providers: providers
+      providers: providers,
     }).compileComponents();
   });
   beforeEach(() => {
diff --git a/packages/angular-material/test/master-detail.spec.ts b/packages/angular-material/test/master-detail.spec.ts
index 40ba10ad4..d8f1ac337 100644
--- a/packages/angular-material/test/master-detail.spec.ts
+++ b/packages/angular-material/test/master-detail.spec.ts
@@ -33,7 +33,7 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
   JsonFormsAngularService,
   JsonFormsOutlet,
-  UnknownRenderer
+  UnknownRenderer,
 } from '@jsonforms/angular';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { DebugElement } from '@angular/core';
@@ -51,11 +51,11 @@ describe('Master detail', () => {
     orders: [
       {
         customer: {
-          name: 'ACME'
+          name: 'ACME',
         },
-        title: 'Carrots'
-      }
-    ]
+        title: 'Carrots',
+      },
+    ],
   };
   const schema = {
     definitions: {
@@ -65,24 +65,24 @@ describe('Master detail', () => {
           customer: {
             type: 'object',
             properties: {
-              name: { type: 'string' }
-            }
+              name: { type: 'string' },
+            },
           },
           title: {
-            type: 'string'
-          }
-        }
-      }
+            type: 'string',
+          },
+        },
+      },
     },
     type: 'object',
     properties: {
       orders: {
         type: 'array',
         items: {
-          $ref: '#/definitions/order'
-        }
-      }
-    }
+          $ref: '#/definitions/order',
+        },
+      },
+    },
   };
   const uischema = {
     type: 'ListWithDetail',
@@ -94,11 +94,11 @@ describe('Master detail', () => {
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/customer/properties/name'
-          }
-        ]
-      }
-    }
+            scope: '#/properties/customer/properties/name',
+          },
+        ],
+      },
+    },
   };
 
   beforeEach(() => {
@@ -107,7 +107,7 @@ describe('Master detail', () => {
         JsonFormsOutlet,
         MasterListComponent,
         UnknownRenderer,
-        JsonFormsDetailComponent
+        JsonFormsDetailComponent,
       ],
       imports: [
         MatListModule,
@@ -116,14 +116,14 @@ describe('Master detail', () => {
         MatButtonModule,
         FlexLayoutModule,
         NoopAnimationsModule,
-        MatTooltipModule
+        MatTooltipModule,
       ],
-      providers: [JsonFormsAngularService]
+      providers: [JsonFormsAngularService],
     })
       .overrideModule(BrowserDynamicTestingModule, {
         set: {
-          entryComponents: [UnknownRenderer]
-        }
+          entryComponents: [UnknownRenderer],
+        },
       })
       .compileComponents();
 
@@ -196,23 +196,23 @@ describe('Master detail', () => {
       orders: [
         {
           customer: { name: 'Carrot Chipmunk' },
-          title: 'Carrots'
+          title: 'Carrots',
         },
         {
           customer: { name: 'Banana Joe' },
-          title: 'Bananas'
+          title: 'Bananas',
         },
         {
           customer: { name: 'Fry' },
-          title: 'Slurm'
-        }
-      ]
+          title: 'Slurm',
+        },
+      ],
     };
 
     setupMockStore(fixture, {
       uischema,
       schema,
-      data: moreData
+      data: moreData,
     });
     getJsonFormsService(component).updateCore(Actions.init(moreData, schema));
     component.ngOnInit();
@@ -228,7 +228,9 @@ describe('Master detail', () => {
 
     // delete 1st item
     spyOn(component, 'removeItems').and.callFake(() => () => {
-      getJsonFormsService(component).updateCore(Actions.update('orders', () => moreData.orders.slice(1)));
+      getJsonFormsService(component).updateCore(
+        Actions.update('orders', () => moreData.orders.slice(1))
+      );
       fixture.detectChanges();
     });
     const buttons: DebugElement[] = fixture.debugElement.queryAll(
@@ -245,22 +247,22 @@ describe('Master detail', () => {
       orders: [
         {
           customer: { name: 'Carrot Chipmunk' },
-          title: 'Carrots'
+          title: 'Carrots',
         },
         {
           customer: { name: 'Banana Joe' },
-          title: 'Bananas'
+          title: 'Bananas',
         },
         {
           customer: { name: 'Fry' },
-          title: 'Slurm'
-        }
-      ]
+          title: 'Slurm',
+        },
+      ],
     };
     setupMockStore(fixture, {
       uischema,
       schema,
-      data: moreData
+      data: moreData,
     });
     getJsonFormsService(component).updateCore(Actions.init(moreData, schema));
     component.ngOnInit();
@@ -270,7 +272,9 @@ describe('Master detail', () => {
     spyOn(component, 'removeItems').and.callFake(() => () => {
       const copy = moreData.orders.slice();
       copy.splice(1, 1);
-      getJsonFormsService(component).updateCore(Actions.update('orders', () => copy));
+      getJsonFormsService(component).updateCore(
+        Actions.update('orders', () => copy)
+      );
       fixture.detectChanges();
     });
     const buttons: DebugElement[] = fixture.debugElement.queryAll(
@@ -287,22 +291,22 @@ describe('Master detail', () => {
       orders: [
         {
           customer: { name: 'Carrot Chipmunk' },
-          title: 'Carrots'
+          title: 'Carrots',
         },
         {
           customer: { name: 'Banana Joe' },
-          title: 'Bananas'
+          title: 'Bananas',
         },
         {
           customer: { name: 'Fry' },
-          title: 'Slurm'
-        }
-      ]
+          title: 'Slurm',
+        },
+      ],
     };
     setupMockStore(fixture, {
       uischema,
       schema,
-      data: moreData
+      data: moreData,
     });
     getJsonFormsService(component).updateCore(Actions.init(moreData, schema));
     component.ngOnInit();
@@ -310,7 +314,9 @@ describe('Master detail', () => {
 
     // delete 1st item
     spyOn(component, 'removeItems').and.callFake(() => () => {
-      getJsonFormsService(component).updateCore(Actions.update('orders', () => moreData.orders.slice(1)));
+      getJsonFormsService(component).updateCore(
+        Actions.update('orders', () => moreData.orders.slice(1))
+      );
       fixture.detectChanges();
     });
     const buttons: DebugElement[] = fixture.debugElement.queryAll(
@@ -327,14 +333,14 @@ describe('Master detail', () => {
       orders: [
         {
           customer: { name: 'Carrot Chipmunk' },
-          title: 'Carrots'
-        }
-      ]
+          title: 'Carrots',
+        },
+      ],
     };
     setupMockStore(fixture, {
       uischema,
       schema,
-      data: moreData
+      data: moreData,
     });
     getJsonFormsService(component).updateCore(Actions.init(moreData, schema));
     component.ngOnInit();
@@ -342,7 +348,9 @@ describe('Master detail', () => {
 
     // delete item
     spyOn(component, 'removeItems').and.callFake(() => () => {
-      getJsonFormsService(component).updateCore(Actions.update('orders', () => []));
+      getJsonFormsService(component).updateCore(
+        Actions.update('orders', () => [])
+      );
       fixture.detectChanges();
     });
     const buttons: DebugElement[] = fixture.debugElement.queryAll(
@@ -362,8 +370,9 @@ describe('Master detail', () => {
     fixture.detectChanges();
     fixture.whenStable().then(() => {
       spyOn(component, 'onSelect');
-      const select = fixture.debugElement.query(By.directive(MatListItem))
-        .nativeElement;
+      const select = fixture.debugElement.query(
+        By.directive(MatListItem)
+      ).nativeElement;
       select.click();
       fixture.detectChanges();
       fixture.whenStable().then(() => {
@@ -377,7 +386,7 @@ describe('Master detail', () => {
             label: 'ACME',
             data: {
               customer: { name: 'ACME' },
-              title: 'Carrots'
+              title: 'Carrots',
             },
             path: 'orders.0',
             schema: schema.definitions.order,
@@ -386,10 +395,10 @@ describe('Master detail', () => {
               elements: [
                 {
                   type: 'Control',
-                  scope: '#/properties/customer/properties/name'
-                }
-              ]
-            }
+                  scope: '#/properties/customer/properties/name',
+                },
+              ],
+            },
           },
           0
         );
diff --git a/packages/angular-material/test/number-control.spec.ts b/packages/angular-material/test/number-control.spec.ts
index 6ab66d43a..5abd1c677 100644
--- a/packages/angular-material/test/number-control.spec.ts
+++ b/packages/angular-material/test/number-control.spec.ts
@@ -38,7 +38,7 @@ import {
   numberBaseTest,
   numberErrorTest,
   numberInputEventTest,
-  prepareComponent
+  prepareComponent,
 } from '@jsonforms/angular-test';
 import { Actions, ControlElement, JsonFormsCore } from '@jsonforms/core';
 import { NumberControlRenderer, NumberControlRendererTester } from '../src';
@@ -46,31 +46,39 @@ import { NumberControlRenderer, NumberControlRendererTester } from '../src';
 describe('Material number field tester', () => {
   const uischema = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
 
   it('should succeed with floats', () => {
     expect(
-      NumberControlRendererTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number'
-          }
-        }
-      }, undefined)
+      NumberControlRendererTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
   it('should succeed with integers', () => {
     expect(
-      NumberControlRendererTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'integer'
-          }
-        }
-      }, undefined)
+      NumberControlRendererTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'integer',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -80,14 +88,14 @@ const imports = [
   MatInputModule,
   NoopAnimationsModule,
   ReactiveFormsModule,
-  FlexLayoutModule
+  FlexLayoutModule,
 ];
 const providers = [JsonFormsAngularService];
 const componentUT: any = NumberControlRenderer;
 const errorTest: ErrorTestExpectation = {
   errorInstance: MatError,
   numberOfElements: 1,
-  indexOfElement: 0
+  indexOfElement: 0,
 };
 const toSelect = (el: DebugElement) => el.nativeElement;
 const testConfig = { imports, providers, componentUT };
@@ -106,103 +114,105 @@ describe(
   numberAdditionalPropsTest(testConfig, 'input', toSelect)
 );
 
-describe(
-  'Number control custom', () => {
-    let fixture: ComponentFixture<any>;
-    let numberNativeElement: any;
-    let component: JsonFormsControl;
-    baseSetup(testConfig);
-
-    const defaultSchema =  {
-      type: 'object',
-      properties: {
-        foo: { type: 'number' }
-      }
-    };
-    const defaultData = {foo:1000000};
-    const defaultUischema: ControlElement = {
-      type: 'Control',
-      scope: '#/properties/foo'
-    };
+describe('Number control custom', () => {
+  let fixture: ComponentFixture<any>;
+  let numberNativeElement: any;
+  let component: JsonFormsControl;
+  baseSetup(testConfig);
 
-    beforeEach(() => {
-      const preparedComponents = prepareComponent(
-        testConfig, 'input', toSelect);
-      fixture = preparedComponents.fixture;
-      numberNativeElement = preparedComponents.numberNativeElement;
-      component = preparedComponents.component;
-    });
+  const defaultSchema = {
+    type: 'object',
+    properties: {
+      foo: { type: 'number' },
+    },
+  };
+  const defaultData = { foo: 1000000 };
+  const defaultUischema: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/foo',
+  };
 
-    it('default grouping behavior', () => {
-      const uischema = Object.assign({},defaultUischema);
-      component.uischema = uischema;
-      const state:JsonFormsCore = {
-        data: defaultData,
-        schema: defaultSchema,
-        uischema: uischema
-      };
-      getJsonFormsService(component).init({
-        core: state, i18n: {
-          locale: 'en',
-        }
-      });
-      getJsonFormsService(component).updateCore(
-        Actions.init(state.data, state.schema)
-      );
-      component.ngOnInit();
-      fixture.detectChanges();
+  beforeEach(() => {
+    const preparedComponents = prepareComponent(testConfig, 'input', toSelect);
+    fixture = preparedComponents.fixture;
+    numberNativeElement = preparedComponents.numberNativeElement;
+    component = preparedComponents.component;
+  });
 
-      expect(numberNativeElement.value).toBe('1,000,000');
+  it('default grouping behavior', () => {
+    const uischema = Object.assign({}, defaultUischema);
+    component.uischema = uischema;
+    const state: JsonFormsCore = {
+      data: defaultData,
+      schema: defaultSchema,
+      uischema: uischema,
+    };
+    getJsonFormsService(component).init({
+      core: state,
+      i18n: {
+        locale: 'en',
+      },
     });
+    getJsonFormsService(component).updateCore(
+      Actions.init(state.data, state.schema)
+    );
+    component.ngOnInit();
+    fixture.detectChanges();
 
-    it('should use config for grouping', () => {
-      const uischema = Object.assign({},defaultUischema);
-      component.uischema = uischema;
-      const state:JsonFormsCore = {
-        data: defaultData,
-        schema: defaultSchema,
-        uischema: uischema
-      };
-      getJsonFormsService(component).init({
-        core: state, i18n: {
-          locale: 'en',
-        },config: {
-          useGrouping: false
-        },
-      });
-      getJsonFormsService(component).updateCore(
-        Actions.init(state.data, state.schema)
-      );
-      component.ngOnInit();
-      fixture.detectChanges();
+    expect(numberNativeElement.value).toBe('1,000,000');
+  });
 
-      expect(numberNativeElement.value).toBe('1000000');
+  it('should use config for grouping', () => {
+    const uischema = Object.assign({}, defaultUischema);
+    component.uischema = uischema;
+    const state: JsonFormsCore = {
+      data: defaultData,
+      schema: defaultSchema,
+      uischema: uischema,
+    };
+    getJsonFormsService(component).init({
+      core: state,
+      i18n: {
+        locale: 'en',
+      },
+      config: {
+        useGrouping: false,
+      },
     });
-    it('should use uischema for grouping', () => {
-      const uischema = Object.assign({},defaultUischema);
-      uischema.options = {
-        useGrouping: false
-      }
-      component.uischema = uischema;
-      const state:JsonFormsCore = {
-        data: defaultData,
-        schema: defaultSchema,
-        uischema: uischema
-      };
-      getJsonFormsService(component).init({
-        core: state, i18n: {
-          locale: 'en',
-        },config: {
-          useGrouping: true
-        },
-      });
-      getJsonFormsService(component).updateCore(
-        Actions.init(state.data, state.schema)
-      );
-      component.ngOnInit();
-      fixture.detectChanges();
+    getJsonFormsService(component).updateCore(
+      Actions.init(state.data, state.schema)
+    );
+    component.ngOnInit();
+    fixture.detectChanges();
 
-      expect(numberNativeElement.value).toBe('1000000');
+    expect(numberNativeElement.value).toBe('1000000');
+  });
+  it('should use uischema for grouping', () => {
+    const uischema = Object.assign({}, defaultUischema);
+    uischema.options = {
+      useGrouping: false,
+    };
+    component.uischema = uischema;
+    const state: JsonFormsCore = {
+      data: defaultData,
+      schema: defaultSchema,
+      uischema: uischema,
+    };
+    getJsonFormsService(component).init({
+      core: state,
+      i18n: {
+        locale: 'en',
+      },
+      config: {
+        useGrouping: true,
+      },
     });
-  }
-);
+    getJsonFormsService(component).updateCore(
+      Actions.init(state.data, state.schema)
+    );
+    component.ngOnInit();
+    fixture.detectChanges();
+
+    expect(numberNativeElement.value).toBe('1000000');
+  });
+});
diff --git a/packages/angular-material/test/object-control.spec.ts b/packages/angular-material/test/object-control.spec.ts
index 1a53b2062..d6dd2f72c 100644
--- a/packages/angular-material/test/object-control.spec.ts
+++ b/packages/angular-material/test/object-control.spec.ts
@@ -39,11 +39,11 @@ import {
   TextControlRenderer,
   TextControlRendererTester,
   VerticalLayoutRenderer,
-  verticalLayoutTester
+  verticalLayoutTester,
 } from '../src';
 import {
   ObjectControlRenderer,
-  ObjectControlRendererTester
+  ObjectControlRendererTester,
 } from '../src/other/object.renderer';
 import { getJsonFormsService } from '@jsonforms/angular-test';
 import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
@@ -51,13 +51,13 @@ import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
 const uischema1: ControlElement = { type: 'Control', scope: '#' };
 const uischema2: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 const schema1 = {
   type: 'object',
   properties: {
-    foo: { type: 'string' }
-  }
+    foo: { type: 'string' },
+  },
 };
 const schema2 = {
   type: 'object',
@@ -65,22 +65,22 @@ const schema2 = {
     foo: {
       type: 'object',
       properties: {
-        foo_1: { type: 'string' }
-      }
+        foo_1: { type: 'string' },
+      },
     },
     bar: {
       type: 'object',
       properties: {
-        bar_1: { type: 'string' }
-      }
-    }
-  }
+        bar_1: { type: 'string' },
+      },
+    },
+  },
 };
 const renderers = [
   { tester: TextControlRendererTester, renderer: TextControlRenderer },
   { tester: verticalLayoutTester, renderer: VerticalLayoutRenderer },
   { tester: groupLayoutTester, renderer: GroupLayoutRenderer },
-  { tester: ObjectControlRendererTester, renderer: ObjectControlRenderer }
+  { tester: ObjectControlRendererTester, renderer: ObjectControlRenderer },
 ];
 
 describe('Object Control tester', () => {
@@ -100,7 +100,7 @@ describe('Object Control', () => {
         TextControlRenderer,
         VerticalLayoutRenderer,
         GroupLayoutRenderer,
-        LayoutChildrenRenderPropsPipe
+        LayoutChildrenRenderPropsPipe,
       ],
       imports: [
         CommonModule,
@@ -110,9 +110,9 @@ describe('Object Control', () => {
         MatFormFieldModule,
         MatInputModule,
         ReactiveFormsModule,
-        FlexLayoutModule
+        FlexLayoutModule,
       ],
-      providers: [JsonFormsAngularService]
+      providers: [JsonFormsAngularService],
     })
       .overrideModule(BrowserDynamicTestingModule, {
         set: {
@@ -120,9 +120,9 @@ describe('Object Control', () => {
             TextControlRenderer,
             VerticalLayoutRenderer,
             GroupLayoutRenderer,
-            ObjectControlRenderer
-          ]
-        }
+            ObjectControlRenderer,
+          ],
+        },
       })
       .compileComponents();
 
@@ -135,14 +135,12 @@ describe('Object Control', () => {
     component.schema = schema2;
 
     getJsonFormsService(component).init({
-
       renderers: renderers,
       core: {
         data: {},
         schema: schema2,
-        uischema: undefined
-      }
-
+        uischema: undefined,
+      },
     });
     fixture.detectChanges();
     component.ngOnInit();
@@ -156,19 +154,15 @@ describe('Object Control', () => {
   }));
 
   it('render all elements', async(() => {
-
     component.uischema = uischema1;
     component.schema = schema2;
 
     getJsonFormsService(component).init({
-
-
       core: {
         data: {},
         schema: schema2,
-        uischema: undefined
-      }
-
+        uischema: undefined,
+      },
     });
     getJsonFormsService(component).registerRenderers(renderers);
 
@@ -184,14 +178,11 @@ describe('Object Control', () => {
     component.schema = schema2;
 
     getJsonFormsService(component).init({
-
-
       core: {
         data: {},
         schema: schema2,
-        uischema: undefined
-      }
-
+        uischema: undefined,
+      },
     });
     getJsonFormsService(component).registerRenderers(renderers);
     fixture.detectChanges();
@@ -202,19 +193,16 @@ describe('Object Control', () => {
   }));
 
   xit('can be disabled', async(() => {
-
     component.uischema = uischema1;
     component.schema = schema1;
     component.disabled = true;
 
     getJsonFormsService(component).init({
-
       core: {
         data: {},
         schema: schema1,
-        uischema: undefined
-      }
-
+        uischema: undefined,
+      },
     });
     getJsonFormsService(component).registerRenderers(renderers);
     fixture.detectChanges();
@@ -224,7 +212,6 @@ describe('Object Control', () => {
     });
   }));
   xit('should be enabled by default', async(() => {
-
     component.uischema = uischema1;
     component.schema = schema1;
 
@@ -232,9 +219,8 @@ describe('Object Control', () => {
       core: {
         data: {},
         schema: schema1,
-        uischema: undefined
-      }
-
+        uischema: undefined,
+      },
     });
     getJsonFormsService(component).registerRenderers(renderers);
     component.ngOnInit();
diff --git a/packages/angular-material/test/range-control.spec.ts b/packages/angular-material/test/range-control.spec.ts
index 6082e2f4e..31213f623 100644
--- a/packages/angular-material/test/range-control.spec.ts
+++ b/packages/angular-material/test/range-control.spec.ts
@@ -30,7 +30,7 @@ import {
   ErrorTestExpectation,
   rangeBaseTest,
   rangeErrorTest,
-  rangeInputEventTest
+  rangeInputEventTest,
 } from '@jsonforms/angular-test';
 import { RangeControlRenderer, RangeControlRendererTester } from '../src';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -40,37 +40,45 @@ describe('Material number field tester', () => {
   const uischema = {
     type: 'Control',
     scope: '#/properties/foo',
-    options: { slider: true }
+    options: { slider: true },
   };
 
   it('should succeed with floats', () => {
     expect(
-      RangeControlRendererTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number',
-            minimum: -42.42,
-            maximum: 42.42,
-            default: 0.42
-          }
-        }
-      }, undefined)
+      RangeControlRendererTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+              minimum: -42.42,
+              maximum: 42.42,
+              default: 0.42,
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(4);
   });
   it('should succeed with integers', () => {
     expect(
-      RangeControlRendererTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'integer',
-            minimum: -42,
-            maximum: 42,
-            default: 1
-          }
-        }
-      }, undefined)
+      RangeControlRendererTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'integer',
+              minimum: -42,
+              maximum: 42,
+              default: 1,
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(4);
   });
 });
@@ -79,14 +87,14 @@ const imports = [
   MatSliderModule,
   MatFormFieldModule,
   ReactiveFormsModule,
-  FlexLayoutModule
+  FlexLayoutModule,
 ];
 const providers = [JsonFormsAngularService];
 const componentUT: any = RangeControlRenderer;
 const errorTest: ErrorTestExpectation = {
   errorInstance: MatError,
   numberOfElements: 1,
-  indexOfElement: 0
+  indexOfElement: 0,
 };
 const defaultTestConfig = { imports, providers, componentUT };
 
diff --git a/packages/angular-material/test/table-control.spec.ts b/packages/angular-material/test/table-control.spec.ts
index 3b3f9236c..cdbf8a058 100644
--- a/packages/angular-material/test/table-control.spec.ts
+++ b/packages/angular-material/test/table-control.spec.ts
@@ -37,7 +37,7 @@ import { ControlElement } from '@jsonforms/core';
 import { TextControlRenderer, TextControlRendererTester } from '../src';
 import {
   TableRenderer,
-  TableRendererTester
+  TableRendererTester,
 } from '../src/other/table.renderer';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { setupMockStore } from '@jsonforms/angular-test';
@@ -47,14 +47,14 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 const uischema1: ControlElement = { type: 'Control', scope: '#' };
 const uischema2: ControlElement = {
   type: 'Control',
-  scope: '#/properties/my'
+  scope: '#/properties/my',
 };
 const uischemaWithSorting: ControlElement = {
   type: 'Control',
   scope: '#',
   options: {
-    showSortButtons: true
-  }
+    showSortButtons: true,
+  },
 };
 const schema_object1 = {
   type: 'array',
@@ -62,9 +62,9 @@ const schema_object1 = {
     type: 'object',
     properties: {
       foo: { type: 'string' },
-      bar: { type: 'string' }
-    }
-  }
+      bar: { type: 'string' },
+    },
+  },
 };
 const schema_object2 = {
   type: 'object',
@@ -75,17 +75,17 @@ const schema_object2 = {
         type: 'object',
         properties: {
           foo: { type: 'string' },
-          bar: { type: 'string' }
-        }
-      }
-    }
-  }
+          bar: { type: 'string' },
+        },
+      },
+    },
+  },
 };
 const schema_simple1 = {
   type: 'array',
   items: {
-    type: 'string'
-  }
+    type: 'string',
+  },
 };
 const schema_simple2 = {
   type: 'object',
@@ -93,22 +93,46 @@ const schema_simple2 = {
     my: {
       type: 'array',
       items: {
-        type: 'string'
-      }
-    }
-  }
+        type: 'string',
+      },
+    },
+  },
 };
 const renderers = [
   { tester: TextControlRendererTester, renderer: TextControlRenderer },
-  { tester: TableRendererTester, renderer: TableRenderer }
+  { tester: TableRendererTester, renderer: TableRenderer },
 ];
 
 describe('Table tester', () => {
   it('should succeed', () => {
-    expect(TableRendererTester(uischema1, schema_object1, createTesterContext(schema_object1))).toBe(3);
-    expect(TableRendererTester(uischema1, schema_simple1, createTesterContext(schema_simple1))).toBe(3);
-    expect(TableRendererTester(uischema2, schema_object2, createTesterContext(schema_object2))).toBe(3);
-    expect(TableRendererTester(uischema2, schema_simple2, createTesterContext(schema_simple2))).toBe(3);
+    expect(
+      TableRendererTester(
+        uischema1,
+        schema_object1,
+        createTesterContext(schema_object1)
+      )
+    ).toBe(3);
+    expect(
+      TableRendererTester(
+        uischema1,
+        schema_simple1,
+        createTesterContext(schema_simple1)
+      )
+    ).toBe(3);
+    expect(
+      TableRendererTester(
+        uischema2,
+        schema_object2,
+        createTesterContext(schema_object2)
+      )
+    ).toBe(3);
+    expect(
+      TableRendererTester(
+        uischema2,
+        schema_simple2,
+        createTesterContext(schema_simple2)
+      )
+    ).toBe(3);
   });
 });
 describe('Table', () => {
@@ -131,12 +155,12 @@ describe('Table', () => {
         MatTableModule,
         MatTooltipModule,
       ],
-      providers: [JsonFormsAngularService]
+      providers: [JsonFormsAngularService],
     })
       .overrideModule(BrowserDynamicTestingModule, {
         set: {
-          entryComponents: [TextControlRenderer]
-        }
+          entryComponents: [TextControlRenderer],
+        },
       })
       .compileComponents();
 
@@ -150,9 +174,9 @@ describe('Table', () => {
       schema: schema_object1,
       data: [
         { foo: 'foo_1', bar: 'bar_1' },
-        { foo: 'foo_2', bar: 'bar_2' }
+        { foo: 'foo_2', bar: 'bar_2' },
       ],
-      renderers
+      renderers,
     });
     fixture.detectChanges();
     component.ngOnInit();
@@ -172,10 +196,10 @@ describe('Table', () => {
       data: {
         my: [
           { foo: 'foo_1', bar: 'bar_1' },
-          { foo: 'foo_2', bar: 'bar_2' }
-        ]
+          { foo: 'foo_2', bar: 'bar_2' },
+        ],
       },
-      renderers
+      renderers,
     });
 
     fixture.detectChanges();
@@ -195,7 +219,7 @@ describe('Table', () => {
       uischema: uischema1,
       schema: schema_simple1,
       data: ['foo', 'bar'],
-      renderers
+      renderers,
     });
     fixture.detectChanges();
     component.ngOnInit();
@@ -213,7 +237,7 @@ describe('Table', () => {
       uischema: uischema2,
       schema: schema_simple2,
       data: { my: ['foo', 'bar'] },
-      renderers
+      renderers,
     });
     fixture.detectChanges();
     component.ngOnInit();
@@ -232,7 +256,7 @@ describe('Table', () => {
       uischema: uischema1,
       schema: schema_object1,
       data: [{ foo: 'foo_1', bar: 'bar_1' }],
-      renderers
+      renderers,
     });
     component.disabled = true;
     fixture.detectChanges();
@@ -252,7 +276,7 @@ describe('Table', () => {
       uischema: uischema1,
       schema: schema_object1,
       data: [{ foo: 'foo_1', bar: 'bar_1' }],
-      renderers
+      renderers,
     });
     fixture.detectChanges();
     component.ngOnInit();
@@ -269,9 +293,9 @@ describe('Table', () => {
       schema: schema_object1,
       data: [
         { foo: 'foo_1', bar: 'bar_1' },
-        { foo: 'foo_2', bar: 'bar_2' }
+        { foo: 'foo_2', bar: 'bar_2' },
       ],
-      renderers
+      renderers,
     });
 
     fixture.detectChanges();
@@ -281,7 +305,6 @@ describe('Table', () => {
     fixture.detectChanges();
 
     fixture.whenStable().then(() => {
-
       // 1 row
       expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 0);
     });
@@ -293,9 +316,9 @@ describe('Table', () => {
       schema: schema_object1,
       data: [
         { foo: 'foo_1', bar: 'bar_1' },
-        { foo: 'foo_2', bar: 'bar_2' }
+        { foo: 'foo_2', bar: 'bar_2' },
       ],
-      renderers
+      renderers,
     });
 
     fixture.detectChanges();
@@ -308,7 +331,6 @@ describe('Table', () => {
     fixture.whenStable().then(() => {
       // 3 row
       expect(fixture.nativeElement.querySelectorAll('tr').length).toBe(1 + 4);
-
     });
   }));
 
@@ -318,9 +340,9 @@ describe('Table', () => {
       schema: schema_object1,
       data: [
         { foo: 'foo_1', bar: 'bar_1' },
-        { foo: 'foo_2', bar: 'bar_2' }
+        { foo: 'foo_2', bar: 'bar_2' },
       ],
-      renderers
+      renderers,
     });
     component.disabled = true;
     fixture.detectChanges();
@@ -340,7 +362,7 @@ describe('Table', () => {
       uischema: uischemaWithSorting,
       schema: schema_simple1,
       data: ['foo', 'bar'],
-      renderers
+      renderers,
     });
     component.disabled = false;
     fixture.detectChanges();
@@ -348,7 +370,9 @@ describe('Table', () => {
     component.ngOnInit();
     fixture.whenStable().then(() => {
       expect(fixture.nativeElement.querySelectorAll('.item-up').length).toBe(2);
-      expect(fixture.nativeElement.querySelectorAll('.item-down').length).toBe(2);
+      expect(fixture.nativeElement.querySelectorAll('.item-down').length).toBe(
+        2
+      );
     });
   }));
   it('when options.showSortButtons is False, it should NOT render sort buttons', async(() => {
@@ -356,7 +380,7 @@ describe('Table', () => {
       uischema: uischema1,
       schema: schema_simple1,
       data: ['foo', 'bar'],
-      renderers
+      renderers,
     });
     component.disabled = false;
     fixture.detectChanges();
@@ -364,8 +388,9 @@ describe('Table', () => {
     component.ngOnInit();
     fixture.whenStable().then(() => {
       expect(fixture.nativeElement.querySelectorAll('.item-up').length).toBe(0);
-      expect(fixture.nativeElement.querySelectorAll('.item-down').length).toBe(0);
+      expect(fixture.nativeElement.querySelectorAll('.item-down').length).toBe(
+        0
+      );
     });
   }));
-
 });
diff --git a/packages/angular-material/test/text-area.spec.ts b/packages/angular-material/test/text-area.spec.ts
index 6841460a9..4c19c025a 100644
--- a/packages/angular-material/test/text-area.spec.ts
+++ b/packages/angular-material/test/text-area.spec.ts
@@ -32,7 +32,7 @@ import {
   TestData,
   textBaseTest,
   textErrorTest,
-  textInputEventTest
+  textInputEventTest,
 } from '@jsonforms/angular-test';
 import { TextAreaRenderer, TextAreaRendererTester } from '../src';
 import { ControlElement, JsonSchema } from '@jsonforms/core';
@@ -43,19 +43,23 @@ describe('Material text field tester', () => {
   const uischema = {
     type: 'Control',
     scope: '#/properties/foo',
-    options: { multi: true }
+    options: { multi: true },
   };
 
   it('should succeed', () => {
     expect(
-      TextAreaRendererTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
-          }
-        }
-      }, undefined)
+      TextAreaRendererTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -64,14 +68,14 @@ const imports = [
   MatInputModule,
   NoopAnimationsModule,
   ReactiveFormsModule,
-  FlexLayoutModule
+  FlexLayoutModule,
 ];
 const providers = [JsonFormsAngularService];
 const componentUT: any = TextAreaRenderer;
 const errorTest: ErrorTestExpectation = {
   errorInstance: MatError,
   numberOfElements: 1,
-  indexOfElement: 0
+  indexOfElement: 0,
 };
 const toSelect = (el: DebugElement) => el.nativeElement;
 const testConfig = { imports, providers, componentUT };
@@ -80,19 +84,19 @@ const defaultSchema: JsonSchema = {
   type: 'object',
   properties: {
     foo: {
-      type: 'string'
-    }
-  }
+      type: 'string',
+    },
+  },
 };
 const defaultUischema: ControlElement = {
   type: 'Control',
   scope: '#/properties/foo',
-  options: { multi: true }
+  options: { multi: true },
 };
 const defaultTestData: TestData<ControlElement> = {
   data: defaultData,
   schema: defaultSchema,
-  uischema: defaultUischema
+  uischema: defaultUischema,
 };
 describe(
   'Text control Base Tests',
diff --git a/packages/angular-material/test/text-control.spec.ts b/packages/angular-material/test/text-control.spec.ts
index 064c9badb..5a3afc47d 100644
--- a/packages/angular-material/test/text-control.spec.ts
+++ b/packages/angular-material/test/text-control.spec.ts
@@ -32,7 +32,7 @@ import {
   textBaseTest,
   textErrorTest,
   textInputEventTest,
-  textTypeTest
+  textTypeTest,
 } from '@jsonforms/angular-test';
 import { TextControlRenderer, TextControlRendererTester } from '../src';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -41,19 +41,23 @@ import { JsonFormsAngularService } from '@jsonforms/angular';
 describe('Material text field tester', () => {
   const uischema = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
 
   it('should succeed', () => {
     expect(
-      TextControlRendererTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
-          }
-        }
-      }, undefined)
+      TextControlRendererTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(1);
   });
 });
@@ -62,14 +66,14 @@ const imports = [
   MatInputModule,
   NoopAnimationsModule,
   ReactiveFormsModule,
-  FlexLayoutModule
+  FlexLayoutModule,
 ];
 const providers = [JsonFormsAngularService];
 const componentUT: any = TextControlRenderer;
 const errorTest: ErrorTestExpectation = {
   errorInstance: MatError,
   numberOfElements: 1,
-  indexOfElement: 0
+  indexOfElement: 0,
 };
 const toSelect = (el: DebugElement) => el.nativeElement;
 const testConfig = { imports, providers, componentUT };
diff --git a/packages/angular-material/test/toggle-control.spec.ts b/packages/angular-material/test/toggle-control.spec.ts
index f3769758d..7f1e3140d 100644
--- a/packages/angular-material/test/toggle-control.spec.ts
+++ b/packages/angular-material/test/toggle-control.spec.ts
@@ -23,12 +23,15 @@
   THE SOFTWARE.
 */
 import { MatError, MatFormFieldModule } from '@angular/material/form-field';
-import { MatSlideToggle, MatSlideToggleModule } from '@angular/material/slide-toggle';
+import {
+  MatSlideToggle,
+  MatSlideToggleModule,
+} from '@angular/material/slide-toggle';
 import {
   booleanBaseTest,
   booleanErrorTest,
   booleanInputEventTest,
-  ErrorTestExpectation
+  ErrorTestExpectation,
 } from '@jsonforms/angular-test';
 import { ToggleControlRenderer, ToggleControlRendererTester } from '../src';
 import { FlexLayoutModule } from '@angular/flex-layout';
@@ -38,19 +41,23 @@ describe('Material boolean field tester', () => {
   const uischema = {
     type: 'Control',
     scope: '#/properties/foo',
-    options: { toggle: true }
+    options: { toggle: true },
   };
 
   it('should succeed', () => {
     expect(
-      ToggleControlRendererTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'boolean'
-          }
-        }
-      }, undefined)
+      ToggleControlRendererTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'boolean',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(3);
   });
 });
@@ -60,7 +67,7 @@ const componentUT: any = ToggleControlRenderer;
 const errorTest: ErrorTestExpectation = {
   errorInstance: MatError,
   numberOfElements: 1,
-  indexOfElement: 0
+  indexOfElement: 0,
 };
 const testConfig = { imports, providers, componentUT };
 describe(
diff --git a/packages/angular-material/test/util.ts b/packages/angular-material/test/util.ts
index f8aae2282..c0bd9b744 100644
--- a/packages/angular-material/test/util.ts
+++ b/packages/angular-material/test/util.ts
@@ -24,5 +24,7 @@
 */
 import { JsonSchema, TesterContext } from '@jsonforms/core';
 
-export const createTesterContext =
-  (rootSchema: JsonSchema, config?: any): TesterContext => ({ rootSchema, config });
+export const createTesterContext = (
+  rootSchema: JsonSchema,
+  config?: any
+): TesterContext => ({ rootSchema, config });
diff --git a/packages/angular-material/test/vertical-layout.spec.ts b/packages/angular-material/test/vertical-layout.spec.ts
index ead39fd27..f1cdc54a3 100644
--- a/packages/angular-material/test/vertical-layout.spec.ts
+++ b/packages/angular-material/test/vertical-layout.spec.ts
@@ -28,13 +28,15 @@ import { beforeEachLayoutTest, setupMockStore } from '@jsonforms/angular-test';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import {
   VerticalLayoutRenderer,
-  verticalLayoutTester
+  verticalLayoutTester,
 } from '../src/layouts/vertical-layout.renderer';
 import { LayoutChildrenRenderPropsPipe } from '../src/layouts/layout.renderer';
 
 describe('Vertical layout tester', () => {
   it('should succeed', () => {
-    expect(verticalLayoutTester({ type: 'VerticalLayout' }, undefined, undefined)).toBe(1);
+    expect(
+      verticalLayoutTester({ type: 'VerticalLayout' }, undefined, undefined)
+    ).toBe(1);
   });
 });
 describe('Vertical layout', () => {
@@ -44,19 +46,19 @@ describe('Vertical layout', () => {
   beforeEach(() => {
     fixture = beforeEachLayoutTest(VerticalLayoutRenderer, {
       declarations: [LayoutChildrenRenderPropsPipe],
-      imports: [FlexLayoutModule]
+      imports: [FlexLayoutModule],
     });
     component = fixture.componentInstance;
   });
 
   it('render with undefined elements', () => {
     const uischema: UISchemaElement = {
-      type: 'VerticalLayout'
+      type: 'VerticalLayout',
     };
     setupMockStore(fixture, {
       data: {},
       schema: {},
-      uischema
+      uischema,
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
@@ -68,13 +70,13 @@ describe('Vertical layout', () => {
   it('render with null elements', () => {
     const uischema: VerticalLayout = {
       type: 'VerticalLayout',
-      elements: null
+      elements: null,
     };
 
     setupMockStore(fixture, {
       data: {},
       schema: {},
-      uischema
+      uischema,
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
@@ -84,12 +86,12 @@ describe('Vertical layout', () => {
   it('render with children', () => {
     const uischema: VerticalLayout = {
       type: 'VerticalLayout',
-      elements: [{ type: 'Control' }, { type: 'Control' }]
+      elements: [{ type: 'Control' }, { type: 'Control' }],
     };
     setupMockStore(fixture, {
       data: {},
       schema: {},
-      uischema
+      uischema,
     });
     fixture.componentInstance.ngOnInit();
     fixture.detectChanges();
@@ -101,13 +103,13 @@ describe('Vertical layout', () => {
   xit('can be hidden', () => {
     const uischema: VerticalLayout = {
       type: 'VerticalLayout',
-      elements: [{ type: 'Control' }, { type: 'Control' }]
+      elements: [{ type: 'Control' }, { type: 'Control' }],
     };
     component.visible = false;
     setupMockStore(fixture, {
       data: {},
       schema: {},
-      uischema
+      uischema,
     });
     component.ngOnInit();
     expect(fixture.nativeElement.children[0].style.display).toBe('none');
diff --git a/packages/angular-test/src/boolean.ts b/packages/angular-test/src/boolean.ts
index f18a928ed..6f845fdc4 100644
--- a/packages/angular-test/src/boolean.ts
+++ b/packages/angular-test/src/boolean.ts
@@ -31,7 +31,7 @@ import {
   baseSetup,
   ErrorTestExpectation,
   TestConfig,
-  getJsonFormsService
+  getJsonFormsService,
 } from './util';
 
 const prepareComponent = <C extends JsonFormsControl, I>(
@@ -54,250 +54,295 @@ export const defaultBooleanTestSchema: JsonSchema = {
   type: 'object',
   properties: {
     foo: {
-      type: 'boolean'
-    }
-  }
+      type: 'boolean',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 export const defaultBooleanTestData = {
   data,
   schema: defaultBooleanTestSchema,
-  uischema
+  uischema,
 };
 
-export const booleanBaseTest = <C extends JsonFormsControl, I>(
-  testConfig: TestConfig<C>,
-  instance: Type<I>
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let checkboxNativeElement: HTMLElement;
-  let checkboxInstance: any;
-  let component: C;
+export const booleanBaseTest =
+  <C extends JsonFormsControl, I>(
+    testConfig: TestConfig<C>,
+    instance: Type<I>
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let checkboxNativeElement: HTMLElement;
+    let checkboxInstance: any;
+    let component: C;
 
-  baseSetup(testConfig);
+    baseSetup(testConfig);
 
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(testConfig, instance);
-    fixture = preparedComponents.fixture;
-    checkboxNativeElement = preparedComponents.checkboxNativeElement;
-    checkboxInstance = preparedComponents.checkboxInstance;
-    component = preparedComponents.component;
-  });
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(testConfig, instance);
+      fixture = preparedComponents.fixture;
+      checkboxNativeElement = preparedComponents.checkboxNativeElement;
+      checkboxInstance = preparedComponents.checkboxInstance;
+      component = preparedComponents.component;
+    });
 
-  it('should render', () => {
-    component.uischema = uischema;
+    it('should render', () => {
+      component.uischema = uischema;
 
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(component.data).toBe(true);
-    expect(checkboxInstance.checked).toBe(true);
-    expect(checkboxInstance.disabled).toBe(false);
-    // the component is wrapped in a div
-    const hasDisplayNone =
-      'none' === fixture.nativeElement.children[0].style.display;
-    const hasHidden = fixture.nativeElement.children[0].hidden;
-    expect(hasDisplayNone || hasHidden).toBeFalsy();
-  });
-  it('should support updating the state', () => {
-    component.uischema = uischema;
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(component.data).toBe(true);
+      expect(checkboxInstance.checked).toBe(true);
+      expect(checkboxInstance.disabled).toBe(false);
+      // the component is wrapped in a div
+      const hasDisplayNone =
+        'none' === fixture.nativeElement.children[0].style.display;
+      const hasHidden = fixture.nativeElement.children[0].hidden;
+      expect(hasDisplayNone || hasHidden).toBeFalsy();
+    });
+    it('should support updating the state', () => {
+      component.uischema = uischema;
 
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => false)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(false);
-    expect(checkboxInstance.checked).toBe(false);
-  });
-  it('should update with undefined value', () => {
-    component.uischema = uischema;
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => false)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(false);
+      expect(checkboxInstance.checked).toBe(false);
+    });
+    it('should update with undefined value', () => {
+      component.uischema = uischema;
 
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => undefined)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(undefined);
-    expect(checkboxInstance.checked).toBe(false);
-  });
-  it('should update with null value', () => {
-    component.uischema = uischema;
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => undefined)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(undefined);
+      expect(checkboxInstance.checked).toBe(false);
+    });
+    it('should update with null value', () => {
+      component.uischema = uischema;
 
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => null)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(null);
-    expect(checkboxInstance.checked).toBe(false);
-  });
-  it('should not update with wrong ref', () => {
-    component.uischema = uischema;
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => null)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(null);
+      expect(checkboxInstance.checked).toBe(false);
+    });
+    it('should not update with wrong ref', () => {
+      component.uischema = uischema;
 
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
 
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => true)
-    );
-    getJsonFormsService(component).updateCore(
-      Actions.update('bar', () => false)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(true);
-    expect(checkboxInstance.checked).toBe(true);
-  });
-  // store needed as we evaluate the calculated enabled value to disable/enable the control
-  it('can be disabled', () => {
-    component.uischema = uischema;
-    component.disabled = true;
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => true)
+      );
+      getJsonFormsService(component).updateCore(
+        Actions.update('bar', () => false)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(true);
+      expect(checkboxInstance.checked).toBe(true);
+    });
+    // store needed as we evaluate the calculated enabled value to disable/enable the control
+    it('can be disabled', () => {
+      component.uischema = uischema;
+      component.disabled = true;
 
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(checkboxInstance.disabled).toBe(true);
-  });
-  // store needed as we evaluate the calculated enabled value to disable/enable the control
-  it('can be hidden', () => {
-    component.uischema = uischema;
-    component.visible = false;
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(checkboxInstance.disabled).toBe(true);
+    });
+    // store needed as we evaluate the calculated enabled value to disable/enable the control
+    it('can be hidden', () => {
+      component.uischema = uischema;
+      component.visible = false;
 
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    // the component is wrapped in a div
-    const hasDisplayNone =
-      'none' === fixture.nativeElement.children[0].style.display;
-    const hasHidden = fixture.nativeElement.children[0].hidden;
-    expect(hasDisplayNone || hasHidden).toBeTruthy();
-  });
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      // the component is wrapped in a div
+      const hasDisplayNone =
+        'none' === fixture.nativeElement.children[0].style.display;
+      const hasHidden = fixture.nativeElement.children[0].hidden;
+      expect(hasDisplayNone || hasHidden).toBeTruthy();
+    });
 
-  it('id should be present in output', () => {
-    component.uischema = uischema;
-    component.id = 'myId';
+    it('id should be present in output', () => {
+      component.uischema = uischema;
+      component.id = 'myId';
 
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(checkboxNativeElement.id).toBe('myId');
-  });
-};
-export const booleanInputEventTest = <C extends JsonFormsControl, I>(
-  testConfig: TestConfig<C>,
-  instance: Type<I>,
-  selectorForClick: string
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let checkboxNativeElement: HTMLElement;
-  let checkboxInstance: any;
-  let component: C;
-  let elementToClick: any;
-
-  baseSetup(testConfig);
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(checkboxNativeElement.id).toBe('myId');
+    });
+  };
+export const booleanInputEventTest =
+  <C extends JsonFormsControl, I>(
+    testConfig: TestConfig<C>,
+    instance: Type<I>,
+    selectorForClick: string
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let checkboxNativeElement: HTMLElement;
+    let checkboxInstance: any;
+    let component: C;
+    let elementToClick: any;
 
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(testConfig, instance);
-    fixture = preparedComponents.fixture;
-    checkboxNativeElement = preparedComponents.checkboxNativeElement;
-    checkboxInstance = preparedComponents.checkboxInstance;
-    component = preparedComponents.component;
+    baseSetup(testConfig);
 
-    elementToClick = checkboxNativeElement.querySelector(selectorForClick);
-  });
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(testConfig, instance);
+      fixture = preparedComponents.fixture;
+      checkboxNativeElement = preparedComponents.checkboxNativeElement;
+      checkboxInstance = preparedComponents.checkboxInstance;
+      component = preparedComponents.component;
 
-  it('should update via input event', () => {
-    component.uischema = uischema;
-    getJsonFormsService(component).init(
-      {core: {data: data, schema: defaultBooleanTestSchema, uischema: uischema}}
-    );
-    fixture.detectChanges();
-    component.ngOnInit();
+      elementToClick = checkboxNativeElement.querySelector(selectorForClick);
+    });
 
-    const spy = spyOn(component, 'onChange');
-    elementToClick.click();
-    // trigger change detection
-    fixture.detectChanges();
+    it('should update via input event', () => {
+      component.uischema = uischema;
+      getJsonFormsService(component).init({
+        core: {
+          data: data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
 
-    expect(spy).toHaveBeenCalled();
-    expect(checkboxInstance.checked).toBe(false);
-  });
-};
+      const spy = spyOn(component, 'onChange');
+      elementToClick.click();
+      // trigger change detection
+      fixture.detectChanges();
 
-export const booleanErrorTest = <C extends JsonFormsControl, I>(
-  testConfig: TestConfig<C>,
-  instance: Type<I>,
-  errorTestInformation: ErrorTestExpectation
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let component: C;
+      expect(spy).toHaveBeenCalled();
+      expect(checkboxInstance.checked).toBe(false);
+    });
+  };
 
-  baseSetup(testConfig);
+export const booleanErrorTest =
+  <C extends JsonFormsControl, I>(
+    testConfig: TestConfig<C>,
+    instance: Type<I>,
+    errorTestInformation: ErrorTestExpectation
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let component: C;
 
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(testConfig, instance);
-    fixture = preparedComponents.fixture;
-    component = preparedComponents.component;
-  });
-  it('should display errors', () => {
-    component.uischema = uischema;
+    baseSetup(testConfig);
 
-    const formsService = getJsonFormsService(component);
-    formsService.init({
-      core: {
-        data,
-        schema: defaultBooleanTestSchema,
-        uischema: uischema
-      }
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(testConfig, instance);
+      fixture = preparedComponents.fixture;
+      component = preparedComponents.component;
     });
-    formsService.updateCore(Actions.updateErrors([
-      {
-        instancePath: '/foo',
-        message: 'Hi, this is me, test error!',
-        keyword: '',
-        schemaPath: '',
-        params: {}
-      }
-    ]));
-    formsService.refresh();
+    it('should display errors', () => {
+      component.uischema = uischema;
 
-    component.ngOnInit();
-    fixture.detectChanges();
-    const debugErrors: DebugElement[] = fixture.debugElement.queryAll(
-      By.directive(errorTestInformation.errorInstance)
-    );
-    expect(debugErrors.length).toBe(errorTestInformation.numberOfElements);
-    expect(
-      debugErrors[errorTestInformation.indexOfElement].nativeElement.textContent
-    ).toBe('Hi, this is me, test error!');
-  });
-};
+      const formsService = getJsonFormsService(component);
+      formsService.init({
+        core: {
+          data,
+          schema: defaultBooleanTestSchema,
+          uischema: uischema,
+        },
+      });
+      formsService.updateCore(
+        Actions.updateErrors([
+          {
+            instancePath: '/foo',
+            message: 'Hi, this is me, test error!',
+            keyword: '',
+            schemaPath: '',
+            params: {},
+          },
+        ])
+      );
+      formsService.refresh();
+
+      component.ngOnInit();
+      fixture.detectChanges();
+      const debugErrors: DebugElement[] = fixture.debugElement.queryAll(
+        By.directive(errorTestInformation.errorInstance)
+      );
+      expect(debugErrors.length).toBe(errorTestInformation.numberOfElements);
+      expect(
+        debugErrors[errorTestInformation.indexOfElement].nativeElement
+          .textContent
+      ).toBe('Hi, this is me, test error!');
+    });
+  };
diff --git a/packages/angular-test/src/layout.ts b/packages/angular-test/src/layout.ts
index 21d393088..bea797779 100644
--- a/packages/angular-test/src/layout.ts
+++ b/packages/angular-test/src/layout.ts
@@ -25,7 +25,7 @@
 import {
   JsonFormsAngularService,
   JsonFormsOutlet,
-  UnknownRenderer
+  UnknownRenderer,
 } from '@jsonforms/angular';
 import { BrowserDynamicTestingModule } from '@angular/platform-browser-dynamic/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
@@ -37,12 +37,12 @@ export const beforeEachLayoutTest = <LAYOUT>(
   TestBed.configureTestingModule({
     declarations: [Renderer, UnknownRenderer, JsonFormsOutlet, ...declarations],
     imports,
-    providers: [JsonFormsAngularService, ...providers]
+    providers: [JsonFormsAngularService, ...providers],
   })
     .overrideModule(BrowserDynamicTestingModule, {
       set: {
-        entryComponents: [UnknownRenderer]
-      }
+        entryComponents: [UnknownRenderer],
+      },
     })
     .compileComponents();
   return TestBed.createComponent(Renderer);
diff --git a/packages/angular-test/src/number.ts b/packages/angular-test/src/number.ts
index 6d3007f11..e4947a5f0 100644
--- a/packages/angular-test/src/number.ts
+++ b/packages/angular-test/src/number.ts
@@ -33,7 +33,7 @@ import {
   getJsonFormsService,
   setupMockStore,
   TestConfig,
-  TestData
+  TestData,
 } from './util';
 
 interface ComponentResult<C extends JsonFormsControl> {
@@ -65,18 +65,18 @@ const defaultSchema: JsonSchema = {
   type: 'object',
   properties: {
     foo: {
-      type: 'number'
-    }
-  }
+      type: 'number',
+    },
+  },
 };
 const defaultUischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 export const defaultNumberTestData: TestData<ControlElement> = {
   data: defaultData,
   schema: defaultSchema,
-  uischema: defaultUischema
+  uischema: defaultUischema,
 };
 export const updateWithSiblingNumberValue = <C extends JsonFormsControl>(
   fixture: ComponentFixture<C>,
@@ -88,283 +88,304 @@ export const updateWithSiblingNumberValue = <C extends JsonFormsControl>(
     core: {
       data: { foo: 123.123, bar: 456.456 },
       schema: testData.schema,
-      uischema: undefined
-    }
+      uischema: undefined,
+    },
   });
   fixture.componentInstance.ngOnInit();
   fixture.detectChanges();
   expectations();
 };
 
-export const numberBaseTest = <C extends JsonFormsControl>(
-  testConfig: TestConfig<C>,
-  instance: string,
-  elementToUse: (element: DebugElement) => any,
-  testData: TestData<ControlElement> = defaultNumberTestData
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let numberElement: DebugElement;
-  let numberNativeElement: any;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(
-      testConfig,
-      instance,
-      elementToUse
-    );
-    fixture = preparedComponents.fixture;
-    numberNativeElement = preparedComponents.numberNativeElement;
-    numberElement = preparedComponents.numberElement;
-    component = preparedComponents.component;
-  });
-
-  it('should render floats', () => {
-    component.uischema = testData.uischema;
-    getJsonFormsService(component).init({ core: testData });
-    getJsonFormsService(component).updateCore(
-      Actions.init(testData.data, testData.schema)
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(component.data).toBe(123.123);
-    expect(numberNativeElement.value).toBe('123.123');
-    // step is of type string
-    expect(numberNativeElement.step).toBe('0.1');
-    expect(numberNativeElement.disabled).toBe(false);
-    // the component is wrapped in a div
-    expect(fixture.nativeElement.children[0].style.display).not.toBe('none');
-  });
+export const numberBaseTest =
+  <C extends JsonFormsControl>(
+    testConfig: TestConfig<C>,
+    instance: string,
+    elementToUse: (element: DebugElement) => any,
+    testData: TestData<ControlElement> = defaultNumberTestData
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let numberElement: DebugElement;
+    let numberNativeElement: any;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(
+        testConfig,
+        instance,
+        elementToUse
+      );
+      fixture = preparedComponents.fixture;
+      numberNativeElement = preparedComponents.numberNativeElement;
+      numberElement = preparedComponents.numberElement;
+      component = preparedComponents.component;
+    });
 
-  it('should render integers', () => {
-    const state = {
-      data: { foo: 123 },
-      schema: {
-        type: 'object',
-        properties: {
-          foo: { type: 'integer' }
-        }
-      },
-      uischema: testData.uischema
-    };
-    component.uischema = testData.uischema;
-    getJsonFormsService(component).init({ core: state });
-    getJsonFormsService(component).updateCore(
-      Actions.init(state.data, state.schema)
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    expect(component.data).toBe(123);
-    expect(numberNativeElement.value).toBe('123');
-    // step is of type string
-    expect(numberNativeElement.step).toBe('1');
-    expect(numberNativeElement.disabled).toBe(false);
-    // the component is wrapped in a div
-    expect(fixture.nativeElement.children[0].style.display).not.toBe('none');
-  });
+    it('should render floats', () => {
+      component.uischema = testData.uischema;
+      getJsonFormsService(component).init({ core: testData });
+      getJsonFormsService(component).updateCore(
+        Actions.init(testData.data, testData.schema)
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(component.data).toBe(123.123);
+      expect(numberNativeElement.value).toBe('123.123');
+      // step is of type string
+      expect(numberNativeElement.step).toBe('0.1');
+      expect(numberNativeElement.disabled).toBe(false);
+      // the component is wrapped in a div
+      expect(fixture.nativeElement.children[0].style.display).not.toBe('none');
+    });
 
-  it('should support updating the state', () => {
-    component.uischema = testData.uischema;
-    getJsonFormsService(component).init({ core: testData });
-    getJsonFormsService(component).updateCore(
-      Actions.init(testData.data, testData.schema)
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.update('foo', () => 456.456)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(456.456);
-    expect(Number(numberNativeElement.value)).toBe(456.456);
-  });
+    it('should render integers', () => {
+      const state = {
+        data: { foo: 123 },
+        schema: {
+          type: 'object',
+          properties: {
+            foo: { type: 'integer' },
+          },
+        },
+        uischema: testData.uischema,
+      };
+      component.uischema = testData.uischema;
+      getJsonFormsService(component).init({ core: state });
+      getJsonFormsService(component).updateCore(
+        Actions.init(state.data, state.schema)
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      expect(component.data).toBe(123);
+      expect(numberNativeElement.value).toBe('123');
+      // step is of type string
+      expect(numberNativeElement.step).toBe('1');
+      expect(numberNativeElement.disabled).toBe(false);
+      // the component is wrapped in a div
+      expect(fixture.nativeElement.children[0].style.display).not.toBe('none');
+    });
 
-  it('should update with undefined value', () => {
-    component.uischema = testData.uischema;
-    getJsonFormsService(component).init({ core: testData });
-    getJsonFormsService(component).updateCore(
-      Actions.init(testData.data, testData.schema)
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.update('foo', () => undefined)
-    );
-    fixture.detectChanges();
-
-    expect(component.data).toBe(undefined);
-    expect(numberNativeElement.value).toBe('');
-  });
+    it('should support updating the state', () => {
+      component.uischema = testData.uischema;
+      getJsonFormsService(component).init({ core: testData });
+      getJsonFormsService(component).updateCore(
+        Actions.init(testData.data, testData.schema)
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      getJsonFormsService(fixture.componentInstance).updateCore(
+        Actions.update('foo', () => 456.456)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(456.456);
+      expect(Number(numberNativeElement.value)).toBe(456.456);
+    });
 
-  it('should update with null value', () => {
-    component.uischema = testData.uischema;
-    getJsonFormsService(component).init({ core: testData });
-    getJsonFormsService(component).updateCore(
-      Actions.init(testData.data, testData.schema)
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.update('foo', () => null)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(null);
-    expect(numberNativeElement.value).toBe('');
-  });
+    it('should update with undefined value', () => {
+      component.uischema = testData.uischema;
+      getJsonFormsService(component).init({ core: testData });
+      getJsonFormsService(component).updateCore(
+        Actions.init(testData.data, testData.schema)
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      getJsonFormsService(fixture.componentInstance).updateCore(
+        Actions.update('foo', () => undefined)
+      );
+      fixture.detectChanges();
+
+      expect(component.data).toBe(undefined);
+      expect(numberNativeElement.value).toBe('');
+    });
 
-  it('should not update with wrong ref', () => {
-    component.uischema = testData.uischema;
-    getJsonFormsService(component).init({ core: testData });
-    getJsonFormsService(component).updateCore(
-      Actions.init(testData.data, testData.schema)
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.update('bar', () => 456.456)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(123.123);
-    expect(Number(numberNativeElement.value)).toBe(123.123);
-  });
+    it('should update with null value', () => {
+      component.uischema = testData.uischema;
+      getJsonFormsService(component).init({ core: testData });
+      getJsonFormsService(component).updateCore(
+        Actions.init(testData.data, testData.schema)
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      getJsonFormsService(fixture.componentInstance).updateCore(
+        Actions.update('foo', () => null)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(null);
+      expect(numberNativeElement.value).toBe('');
+    });
 
-  // store needed as we evaluate the calculated enabled value to disable/enable the control
-  it('can be disabled', () => {
-    component.uischema = testData.uischema;
-    component.disabled = true;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(numberNativeElement.disabled).toBe(true);
-  });
-  // store needed as we evaluate the calculated enabled value to disable/enable the control
-  it('can be hidden', () => {
-    component.uischema = testData.uischema;
-    component.visible = false;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    const hasDisplayNone =
-      'none' === fixture.nativeElement.children[0].style.display;
-    const hasHidden = fixture.nativeElement.children[0].hidden;
-    expect(hasDisplayNone || hasHidden).toBeTruthy();
-  });
+    it('should not update with wrong ref', () => {
+      component.uischema = testData.uischema;
+      getJsonFormsService(component).init({ core: testData });
+      getJsonFormsService(component).updateCore(
+        Actions.init(testData.data, testData.schema)
+      );
+      component.ngOnInit();
+      fixture.detectChanges();
+      getJsonFormsService(fixture.componentInstance).updateCore(
+        Actions.update('bar', () => 456.456)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(123.123);
+      expect(Number(numberNativeElement.value)).toBe(123.123);
+    });
 
-  it('id should be present in output', () => {
-    component.uischema = testData.uischema;
-    component.id = 'myId';
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(numberElement.nativeElement.id).toBe('myId');
-  });
-};
-export const numberInputEventTest = <C extends JsonFormsControl>(
-  testConfig: TestConfig<C>,
-  instance: string,
-  elementToUse: (element: DebugElement) => any,
-  testData: TestData<ControlElement> = defaultNumberTestData
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let numberNativeElement: any;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(
-      testConfig,
-      instance,
-      elementToUse
-    );
-    fixture = preparedComponents.fixture;
-    numberNativeElement = preparedComponents.numberNativeElement;
-    component = preparedComponents.component;
-  });
+    // store needed as we evaluate the calculated enabled value to disable/enable the control
+    it('can be disabled', () => {
+      component.uischema = testData.uischema;
+      component.disabled = true;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(numberNativeElement.disabled).toBe(true);
+    });
+    // store needed as we evaluate the calculated enabled value to disable/enable the control
+    it('can be hidden', () => {
+      component.uischema = testData.uischema;
+      component.visible = false;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      const hasDisplayNone =
+        'none' === fixture.nativeElement.children[0].style.display;
+      const hasHidden = fixture.nativeElement.children[0].hidden;
+      expect(hasDisplayNone || hasHidden).toBeTruthy();
+    });
 
-  it('should update via input event', () => {
-    component.uischema = testData.uischema as ControlElement;
+    it('id should be present in output', () => {
+      component.uischema = testData.uischema;
+      component.id = 'myId';
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(numberElement.nativeElement.id).toBe('myId');
+    });
+  };
+export const numberInputEventTest =
+  <C extends JsonFormsControl>(
+    testConfig: TestConfig<C>,
+    instance: string,
+    elementToUse: (element: DebugElement) => any,
+    testData: TestData<ControlElement> = defaultNumberTestData
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let numberNativeElement: any;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(
+        testConfig,
+        instance,
+        elementToUse
+      );
+      fixture = preparedComponents.fixture;
+      numberNativeElement = preparedComponents.numberNativeElement;
+      component = preparedComponents.component;
+    });
 
-    getJsonFormsService(component).init({
-      core: {
-        data: testData.data,
-        schema: testData.schema,
-        uischema: undefined
+    it('should update via input event', () => {
+      component.uischema = testData.uischema as ControlElement;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: undefined,
+        },
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+
+      const spy = spyOn(component, 'onChange');
+      numberNativeElement.value = 456.456;
+      if (numberNativeElement.dispatchEvent) {
+        numberNativeElement.dispatchEvent(new Event('input'));
       }
+      // trigger change detection
+      fixture.detectChanges();
+      expect(spy).toHaveBeenCalled();
+      expect(Number(numberNativeElement.value)).toBe(456.456);
+    });
+  };
+export const numberErrorTest =
+  <C extends JsonFormsControl>(
+    testConfig: TestConfig<C>,
+    errorTestInformation: ErrorTestExpectation,
+    testData: TestData<ControlElement> = defaultNumberTestData
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(testConfig);
+      fixture = preparedComponents.fixture;
+      component = preparedComponents.component;
     });
-    fixture.detectChanges();
-    component.ngOnInit();
-
-    const spy = spyOn(component, 'onChange');
-    numberNativeElement.value = 456.456;
-    if (numberNativeElement.dispatchEvent) {
-      numberNativeElement.dispatchEvent(new Event('input'));
-    }
-    // trigger change detection
-    fixture.detectChanges();
-    expect(spy).toHaveBeenCalled();
-    expect(Number(numberNativeElement.value)).toBe(456.456);
-  });
-};
-export const numberErrorTest = <C extends JsonFormsControl>(
-  testConfig: TestConfig<C>,
-  errorTestInformation: ErrorTestExpectation,
-  testData: TestData<ControlElement> = defaultNumberTestData
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(testConfig);
-    fixture = preparedComponents.fixture;
-    component = preparedComponents.component;
-  });
-
-  it('should display errors', () => {
-    component.uischema = testData.uischema;
 
-    const formsService = getJsonFormsService(component);
-    formsService.init({
-      core: {
-        data: testData.data,
-        schema: testData.schema,
-        uischema: undefined
-      }
+    it('should display errors', () => {
+      component.uischema = testData.uischema;
+
+      const formsService = getJsonFormsService(component);
+      formsService.init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: undefined,
+        },
+      });
+      formsService.updateCore(
+        Actions.updateErrors([
+          {
+            instancePath: '/foo',
+            message: 'Hi, this is me, test error!',
+            keyword: '',
+            schemaPath: '',
+            params: {},
+          },
+        ])
+      );
+      formsService.refresh();
+      component.ngOnInit();
+      fixture.detectChanges();
+      const debugErrors: DebugElement[] = fixture.debugElement.queryAll(
+        By.directive(errorTestInformation.errorInstance)
+      );
+      expect(debugErrors.length).toBe(errorTestInformation.numberOfElements);
+      expect(
+        debugErrors[errorTestInformation.indexOfElement].nativeElement
+          .textContent
+      ).toBe('Hi, this is me, test error!');
     });
-    formsService.updateCore(Actions.updateErrors([
-      {
-        instancePath: '/foo',
-        message: 'Hi, this is me, test error!',
-        keyword: '',
-        schemaPath: '',
-        params: {}
-      }
-    ]));
-    formsService.refresh();
-    component.ngOnInit();
-    fixture.detectChanges();
-    const debugErrors: DebugElement[] = fixture.debugElement.queryAll(
-      By.directive(errorTestInformation.errorInstance)
-    );
-    expect(debugErrors.length).toBe(errorTestInformation.numberOfElements);
-    expect(
-      debugErrors[errorTestInformation.indexOfElement].nativeElement.textContent
-    ).toBe('Hi, this is me, test error!');
-  });
-};
+  };
 
 const additionalSchema: JsonSchema = {
   type: 'object',
@@ -373,48 +394,50 @@ const additionalSchema: JsonSchema = {
       type: 'number',
       minimum: -42.42,
       maximum: 42,
-      multipleOf: 3
-    }
-  }
+      multipleOf: 3,
+    },
+  },
 };
 export const additionalTestData: TestData<ControlElement> = {
   data: defaultData,
   schema: additionalSchema,
-  uischema: defaultUischema
+  uischema: defaultUischema,
 };
 
-export const numberAdditionalPropsTest = <C extends JsonFormsControl>(
-  testConfig: TestConfig<C>,
-  instance: string,
-  elementToUse: (element: DebugElement) => any,
-  testData: TestData<ControlElement> = additionalTestData
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let numberNativeElement: any;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(
-      testConfig,
-      instance,
-      elementToUse
-    );
-    fixture = preparedComponents.fixture;
-    numberNativeElement = preparedComponents.numberNativeElement;
-  });
+export const numberAdditionalPropsTest =
+  <C extends JsonFormsControl>(
+    testConfig: TestConfig<C>,
+    instance: string,
+    elementToUse: (element: DebugElement) => any,
+    testData: TestData<ControlElement> = additionalTestData
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let numberNativeElement: any;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(
+        testConfig,
+        instance,
+        elementToUse
+      );
+      fixture = preparedComponents.fixture;
+      numberNativeElement = preparedComponents.numberNativeElement;
+    });
 
-  it('should respect min,max,multipleOf', () => {
-    setupMockStore(fixture, testData);
-    getJsonFormsService(fixture.componentInstance).updateCore(
-      Actions.init(testData.data, testData.schema)
-    );
-    fixture.componentInstance.ngOnInit();
-    fixture.detectChanges();
-
-    // step, min and max are of type string on an input control
-    expect(numberNativeElement.step).toBe('3');
-    expect(numberNativeElement.min).toBe('-42.42');
-    expect(numberNativeElement.max).toBe('42');
-  });
-};
+    it('should respect min,max,multipleOf', () => {
+      setupMockStore(fixture, testData);
+      getJsonFormsService(fixture.componentInstance).updateCore(
+        Actions.init(testData.data, testData.schema)
+      );
+      fixture.componentInstance.ngOnInit();
+      fixture.detectChanges();
+
+      // step, min and max are of type string on an input control
+      expect(numberNativeElement.step).toBe('3');
+      expect(numberNativeElement.min).toBe('-42.42');
+      expect(numberNativeElement.max).toBe('42');
+    });
+  };
diff --git a/packages/angular-test/src/range.ts b/packages/angular-test/src/range.ts
index 579d3526e..a5e92ec60 100644
--- a/packages/angular-test/src/range.ts
+++ b/packages/angular-test/src/range.ts
@@ -33,7 +33,7 @@ import {
   setupMockStore,
   TestConfig,
   TestData,
-  getJsonFormsService
+  getJsonFormsService,
 } from './util';
 import { ControlElement, JsonSchema, Actions } from '@jsonforms/core';
 
@@ -61,289 +61,335 @@ export const rangeDefaultSchema: JsonSchema = {
       type: 'number',
       minimum: -42.42,
       maximum: 42.42,
-      default: 0.42
-    }
-  }
+      default: 0.42,
+    },
+  },
 };
 export const rangeDefaultUischema: ControlElement = {
   type: 'Control',
   scope: '#/properties/foo',
-  options: { slider: true }
+  options: { slider: true },
 };
 export const rangeDefaultTestData: TestData<ControlElement> = {
   data: rangeDefaultData,
   schema: rangeDefaultSchema,
-  uischema: rangeDefaultUischema
+  uischema: rangeDefaultUischema,
 };
 
-export const rangeBaseTest = <C extends JsonFormsControl, I>(
-  testConfig: TestConfig<C>,
-  instance: Type<I>
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let rangeElement: DebugElement;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(testConfig, instance);
-    fixture = preparedComponents.fixture;
-    rangeElement = preparedComponents.rangeElement;
-    component = preparedComponents.component;
-  });
-
-  it('should render floats', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(component.data).toBe(1.234);
-    expect(rangeElement.componentInstance.value).toBe(1.234);
-    // step is of type string
-    expect(rangeElement.componentInstance.step).toBe(1);
-    expect(rangeElement.componentInstance.min).toBe(-42.42);
-    expect(rangeElement.componentInstance.max).toBe(42.42);
-    expect(rangeElement.componentInstance.disabled).toBe(false);
-    expect(fixture.nativeElement.children[0].style.display).not.toBe('none');
-  });
-
-  it('should render integer', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    const schema = JSON.parse(JSON.stringify(rangeDefaultTestData.schema));
-    schema.properties.foo.type = 'integer';
-    schema.properties.foo.minimum = -42;
-    schema.properties.foo.maximum = 42;
-    schema.properties.foo.default = 1;
-    setupMockStore(fixture, {
-      uischema: rangeDefaultTestData.uischema,
-      schema,
-      data: { foo: 12 }
+export const rangeBaseTest =
+  <C extends JsonFormsControl, I>(
+    testConfig: TestConfig<C>,
+    instance: Type<I>
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let rangeElement: DebugElement;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(testConfig, instance);
+      fixture = preparedComponents.fixture;
+      rangeElement = preparedComponents.rangeElement;
+      component = preparedComponents.component;
     });
-    getJsonFormsService(component).updateCore(
-      Actions.init({ foo: 12 }, schema, rangeDefaultTestData.uischema)
-    );
-
-    fixture.componentInstance.ngOnInit();
-    fixture.detectChanges();
-    expect(component.data).toBe(12);
-    expect(rangeElement.componentInstance.value).toBe(12);
-    // step is of type string
-    expect(rangeElement.componentInstance.step).toBe(1);
-    expect(rangeElement.componentInstance.min).toBe(-42);
-    expect(rangeElement.componentInstance.max).toBe(42);
-    expect(rangeElement.componentInstance.disabled).toBe(false);
-    // the component is wrapped in a div
-    expect(fixture.nativeElement.children[0].style.display).not.toBe('none');
-  });
-
-  it('should support updating the state', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => 4.56)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(4.56);
-    expect(rangeElement.componentInstance.value).toBe(4.56);
-  });
-  it('should update with undefined value', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => undefined)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(undefined);
-    expect(rangeElement.componentInstance.value).toBe(0.42);
-  });
-  it('should update with null value', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => null)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(null);
-    expect(rangeElement.componentInstance.value).toBe(0.42);
-  });
-  it('should not update with wrong ref', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => 1.234)
-    );
-    getJsonFormsService(component).updateCore(
-      Actions.update('bar', () => 456.456)
-    );
-
-    fixture.detectChanges();
-    expect(component.data).toBe(1.234);
-    expect(rangeElement.componentInstance.value).toBe(1.234);
-  });
-  // store needed as we evaluate the calculated enabled value to disable/enable the control
-  it('can be disabled', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-    component.disabled = true;
-
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(rangeElement.componentInstance.disabled).toBe(true);
-  });
-  it('can be hidden', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-    component.visible = false;
-
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    fixture.detectChanges();
-    component.ngOnInit();
-    expect(fixture.nativeElement.children[0].style.display).toBe('none');
-  });
-  it('id should be present in output', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-    component.id = 'myId';
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(rangeElement.nativeElement.id).toBe('myId');
-  });
-};
-export const rangeInputEventTest = <C extends JsonFormsControl, I>(
-  testConfig: TestConfig<C>,
-  instance: Type<I>
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(testConfig, instance);
-    fixture = preparedComponents.fixture;
-    component = preparedComponents.component;
-  });
-
-  xit('should update via input event', async () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: rangeDefaultTestData.data, schema: rangeDefaultTestData.schema, uischema: rangeDefaultTestData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    const spy = spyOn(component, 'onChange');
-
-    const sliderElement = fixture.debugElement.query(By.css('.mat-slider'))
-      .nativeElement;
-
-    const trackElement = fixture.debugElement.query(
-      By.css('.mat-slider-wrapper')
-    ).nativeElement;
-    const dimensions = trackElement.getBoundingClientRect();
-    const x = dimensions.left + dimensions.width * 0.2;
-    const y = dimensions.top + dimensions.height * 0.2;
-
-    dispatchEvent(sliderElement, createMouseEvent('mousedown', x, y, 0));
-
-    // trigger change detection
-    fixture.detectChanges();
-    await fixture.whenStable();
-    expect(spy).toHaveBeenCalled();
-  });
-};
-export const rangeErrorTest = <C extends JsonFormsControl, I>(
-  testConfig: TestConfig<C>,
-  instance: Type<I>,
-  errorTestInformation: ErrorTestExpectation
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(testConfig, instance);
-    fixture = preparedComponents.fixture;
-    component = preparedComponents.component;
-  });
-  it('should display errors', () => {
-    component.uischema = rangeDefaultTestData.uischema;
-    component.schema = rangeDefaultTestData.schema;
-
-    const formsService = getJsonFormsService(component);
-    formsService.init({
-      core: {
-        data: rangeDefaultTestData.data,
-        schema: rangeDefaultTestData.schema,
-        uischema: undefined
-      }
+
+    it('should render floats', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(component.data).toBe(1.234);
+      expect(rangeElement.componentInstance.value).toBe(1.234);
+      // step is of type string
+      expect(rangeElement.componentInstance.step).toBe(1);
+      expect(rangeElement.componentInstance.min).toBe(-42.42);
+      expect(rangeElement.componentInstance.max).toBe(42.42);
+      expect(rangeElement.componentInstance.disabled).toBe(false);
+      expect(fixture.nativeElement.children[0].style.display).not.toBe('none');
     });
-    formsService.updateCore(Actions.updateErrors([
-      {
-        instancePath: '/foo',
-        message: 'Hi, this is me, test error!',
-        keyword: '',
-        schemaPath: '',
-        params: {}
-      }
-    ]));
-    formsService.refresh();
-
-    component.ngOnInit();
-    fixture.detectChanges();
-    const debugErrors: DebugElement[] = fixture.debugElement.queryAll(
-      By.directive(errorTestInformation.errorInstance)
-    );
-    expect(debugErrors.length).toBe(errorTestInformation.numberOfElements);
-    expect(
-      debugErrors[errorTestInformation.indexOfElement].nativeElement.textContent
-    ).toBe('Hi, this is me, test error!');
-  });
-};
+
+    it('should render integer', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      const schema = JSON.parse(JSON.stringify(rangeDefaultTestData.schema));
+      schema.properties.foo.type = 'integer';
+      schema.properties.foo.minimum = -42;
+      schema.properties.foo.maximum = 42;
+      schema.properties.foo.default = 1;
+      setupMockStore(fixture, {
+        uischema: rangeDefaultTestData.uischema,
+        schema,
+        data: { foo: 12 },
+      });
+      getJsonFormsService(component).updateCore(
+        Actions.init({ foo: 12 }, schema, rangeDefaultTestData.uischema)
+      );
+
+      fixture.componentInstance.ngOnInit();
+      fixture.detectChanges();
+      expect(component.data).toBe(12);
+      expect(rangeElement.componentInstance.value).toBe(12);
+      // step is of type string
+      expect(rangeElement.componentInstance.step).toBe(1);
+      expect(rangeElement.componentInstance.min).toBe(-42);
+      expect(rangeElement.componentInstance.max).toBe(42);
+      expect(rangeElement.componentInstance.disabled).toBe(false);
+      // the component is wrapped in a div
+      expect(fixture.nativeElement.children[0].style.display).not.toBe('none');
+    });
+
+    it('should support updating the state', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => 4.56)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(4.56);
+      expect(rangeElement.componentInstance.value).toBe(4.56);
+    });
+    it('should update with undefined value', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => undefined)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(undefined);
+      expect(rangeElement.componentInstance.value).toBe(0.42);
+    });
+    it('should update with null value', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => null)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(null);
+      expect(rangeElement.componentInstance.value).toBe(0.42);
+    });
+    it('should not update with wrong ref', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => 1.234)
+      );
+      getJsonFormsService(component).updateCore(
+        Actions.update('bar', () => 456.456)
+      );
+
+      fixture.detectChanges();
+      expect(component.data).toBe(1.234);
+      expect(rangeElement.componentInstance.value).toBe(1.234);
+    });
+    // store needed as we evaluate the calculated enabled value to disable/enable the control
+    it('can be disabled', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+      component.disabled = true;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(rangeElement.componentInstance.disabled).toBe(true);
+    });
+    it('can be hidden', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+      component.visible = false;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      fixture.detectChanges();
+      component.ngOnInit();
+      expect(fixture.nativeElement.children[0].style.display).toBe('none');
+    });
+    it('id should be present in output', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+      component.id = 'myId';
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(rangeElement.nativeElement.id).toBe('myId');
+    });
+  };
+export const rangeInputEventTest =
+  <C extends JsonFormsControl, I>(
+    testConfig: TestConfig<C>,
+    instance: Type<I>
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(testConfig, instance);
+      fixture = preparedComponents.fixture;
+      component = preparedComponents.component;
+    });
+
+    xit('should update via input event', async () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: rangeDefaultTestData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const spy = spyOn(component, 'onChange');
+
+      const sliderElement = fixture.debugElement.query(
+        By.css('.mat-slider')
+      ).nativeElement;
+
+      const trackElement = fixture.debugElement.query(
+        By.css('.mat-slider-wrapper')
+      ).nativeElement;
+      const dimensions = trackElement.getBoundingClientRect();
+      const x = dimensions.left + dimensions.width * 0.2;
+      const y = dimensions.top + dimensions.height * 0.2;
+
+      dispatchEvent(sliderElement, createMouseEvent('mousedown', x, y, 0));
+
+      // trigger change detection
+      fixture.detectChanges();
+      await fixture.whenStable();
+      expect(spy).toHaveBeenCalled();
+    });
+  };
+export const rangeErrorTest =
+  <C extends JsonFormsControl, I>(
+    testConfig: TestConfig<C>,
+    instance: Type<I>,
+    errorTestInformation: ErrorTestExpectation
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(testConfig, instance);
+      fixture = preparedComponents.fixture;
+      component = preparedComponents.component;
+    });
+    it('should display errors', () => {
+      component.uischema = rangeDefaultTestData.uischema;
+      component.schema = rangeDefaultTestData.schema;
+
+      const formsService = getJsonFormsService(component);
+      formsService.init({
+        core: {
+          data: rangeDefaultTestData.data,
+          schema: rangeDefaultTestData.schema,
+          uischema: undefined,
+        },
+      });
+      formsService.updateCore(
+        Actions.updateErrors([
+          {
+            instancePath: '/foo',
+            message: 'Hi, this is me, test error!',
+            keyword: '',
+            schemaPath: '',
+            params: {},
+          },
+        ])
+      );
+      formsService.refresh();
+
+      component.ngOnInit();
+      fixture.detectChanges();
+      const debugErrors: DebugElement[] = fixture.debugElement.queryAll(
+        By.directive(errorTestInformation.errorInstance)
+      );
+      expect(debugErrors.length).toBe(errorTestInformation.numberOfElements);
+      expect(
+        debugErrors[errorTestInformation.indexOfElement].nativeElement
+          .textContent
+      ).toBe('Hi, this is me, test error!');
+    });
+  };
 
 /** Creates a browser MouseEvent with the specified options. */
 const createMouseEvent = (type: string, x = 0, y = 0, button = 0) => {
diff --git a/packages/angular-test/src/text.ts b/packages/angular-test/src/text.ts
index 706799830..c59cd1745 100644
--- a/packages/angular-test/src/text.ts
+++ b/packages/angular-test/src/text.ts
@@ -32,7 +32,7 @@ import {
   ErrorTestExpectation,
   getJsonFormsService,
   TestConfig,
-  TestData
+  TestData,
 } from './util';
 
 interface ComponentResult<C extends JsonFormsControl> {
@@ -63,333 +63,392 @@ const defaultSchema: JsonSchema = {
   type: 'object',
   properties: {
     foo: {
-      type: 'string'
-    }
-  }
+      type: 'string',
+    },
+  },
 };
 const defaultUischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 export const defaultTextTestData: TestData<ControlElement> = {
   data: defaultData,
   schema: defaultSchema,
-  uischema: defaultUischema
-};
-export const textBaseTest = <C extends JsonFormsControl>(
-  testConfig: TestConfig<C>,
-  instance: string,
-  elementToUse: (element: DebugElement) => any,
-  testData: TestData<ControlElement> = defaultTextTestData
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let textElement: DebugElement;
-  let textNativeElement: any;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(
-      testConfig,
-      instance,
-      elementToUse
-    );
-    fixture = preparedComponents.fixture;
-    textNativeElement = preparedComponents.textNativeElement;
-    textElement = preparedComponents.textElement;
-    component = preparedComponents.component;
-  });
-
-  it('should render', () => {
-    component.uischema = testData.uischema;
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(component.data).toBe('foo');
-    expect(textNativeElement.value).toBe('foo');
-    expect(textNativeElement.disabled).toBe(false);
-    // the component is wrapped in a div
-    const hasDisplayNone =
-      'none' === fixture.nativeElement.children[0].style.display;
-    const hasHidden = fixture.nativeElement.children[0].hidden;
-    expect(!hasDisplayNone && !hasHidden).toBeTruthy();
-  });
-
-  it('should support updating the state', () => {
-    component.uischema = testData.uischema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => 'bar')
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe('bar');
-    expect(textNativeElement.value).toBe('bar');
-  });
-  it('should update with undefined value', () => {
-    component.uischema = testData.uischema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => undefined)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(undefined);
-    expect(textNativeElement.value).toBe('');
-  });
-  it('should update with null value', () => {
-    component.uischema = testData.uischema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => null)
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe(null);
-    expect(textNativeElement.value).toBe('');
-  });
-  it('should not update with wrong ref', () => {
-    component.uischema = testData.uischema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    getJsonFormsService(component).updateCore(
-      Actions.update('foo', () => 'foo')
-    );
-    getJsonFormsService(component).updateCore(
-      Actions.update('bar', () => 'bar')
-    );
-    fixture.detectChanges();
-    expect(component.data).toBe('foo');
-    expect(textNativeElement.value).toBe('foo');
-  });
-  // store needed as we evaluate the calculated enabled value to disable/enable the control
-  it('can be disabled', () => {
-    component.uischema = testData.uischema;
-    component.disabled = true;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(textNativeElement.disabled).toBe(true);
-  });
-  it('can be hidden', () => {
-    component.uischema = testData.uischema;
-    component.visible = false;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    const hasDisplayNone =
-      'none' === fixture.nativeElement.children[0].style.display;
-    const hasHidden = fixture.nativeElement.children[0].hidden;
-    expect(hasDisplayNone || hasHidden).toBeTruthy();
-  });
-  it('id should be present in output', () => {
-    component.uischema = testData.uischema;
-    component.id = 'myId';
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(textElement.nativeElement.id).toBe('myId');
-  });
-};
-export const textInputEventTest = <C extends JsonFormsControl>(
-  testConfig: TestConfig<C>,
-  instance: string,
-  elementToUse: (element: DebugElement) => any,
-  testData: TestData<ControlElement> = defaultTextTestData
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let textNativeElement: any;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(
-      testConfig,
-      instance,
-      elementToUse
-    );
-    fixture = preparedComponents.fixture;
-    textNativeElement = preparedComponents.textNativeElement;
-    component = preparedComponents.component;
-  });
-
-  it('should update via input event', () => {
-    component.uischema = testData.uischema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: testData.schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-
-    const spy = spyOn(component, 'onChange');
-    textNativeElement.value = 'bar';
-    if (textNativeElement.dispatchEvent) {
-      textNativeElement.dispatchEvent(new Event('input'));
-    }
-    // trigger change detection
-    fixture.detectChanges();
-    expect(spy).toHaveBeenCalled();
-    expect(textNativeElement.value).toBe('bar');
-  });
+  uischema: defaultUischema,
 };
-export const textErrorTest = <C extends JsonFormsControl>(
-  testConfig: TestConfig<C>,
-  errorTestInformation: ErrorTestExpectation,
-  testData: TestData<ControlElement> = defaultTextTestData
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let component: C;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(testConfig);
-    fixture = preparedComponents.fixture;
-    component = preparedComponents.component;
-  });
-  it('should display errors', () => {
-    component.uischema = testData.uischema;
-
-    const formsService = getJsonFormsService(component);
-    formsService.init({
-      core: {
-        data: testData.data,
-        schema: testData.schema,
-        uischema: undefined
-      }
+export const textBaseTest =
+  <C extends JsonFormsControl>(
+    testConfig: TestConfig<C>,
+    instance: string,
+    elementToUse: (element: DebugElement) => any,
+    testData: TestData<ControlElement> = defaultTextTestData
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let textElement: DebugElement;
+    let textNativeElement: any;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(
+        testConfig,
+        instance,
+        elementToUse
+      );
+      fixture = preparedComponents.fixture;
+      textNativeElement = preparedComponents.textNativeElement;
+      textElement = preparedComponents.textElement;
+      component = preparedComponents.component;
+    });
+
+    it('should render', () => {
+      component.uischema = testData.uischema;
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(component.data).toBe('foo');
+      expect(textNativeElement.value).toBe('foo');
+      expect(textNativeElement.disabled).toBe(false);
+      // the component is wrapped in a div
+      const hasDisplayNone =
+        'none' === fixture.nativeElement.children[0].style.display;
+      const hasHidden = fixture.nativeElement.children[0].hidden;
+      expect(!hasDisplayNone && !hasHidden).toBeTruthy();
+    });
+
+    it('should support updating the state', () => {
+      component.uischema = testData.uischema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => 'bar')
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe('bar');
+      expect(textNativeElement.value).toBe('bar');
+    });
+    it('should update with undefined value', () => {
+      component.uischema = testData.uischema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => undefined)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(undefined);
+      expect(textNativeElement.value).toBe('');
+    });
+    it('should update with null value', () => {
+      component.uischema = testData.uischema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => null)
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe(null);
+      expect(textNativeElement.value).toBe('');
+    });
+    it('should not update with wrong ref', () => {
+      component.uischema = testData.uischema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      getJsonFormsService(component).updateCore(
+        Actions.update('foo', () => 'foo')
+      );
+      getJsonFormsService(component).updateCore(
+        Actions.update('bar', () => 'bar')
+      );
+      fixture.detectChanges();
+      expect(component.data).toBe('foo');
+      expect(textNativeElement.value).toBe('foo');
+    });
+    // store needed as we evaluate the calculated enabled value to disable/enable the control
+    it('can be disabled', () => {
+      component.uischema = testData.uischema;
+      component.disabled = true;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(textNativeElement.disabled).toBe(true);
     });
-    formsService.updateCore(Actions.updateErrors([
-      {
-        instancePath: '/foo',
-        message: 'Hi, this is me, test error!',
-        keyword: '',
-        schemaPath: '',
-        params: {}
+    it('can be hidden', () => {
+      component.uischema = testData.uischema;
+      component.visible = false;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      const hasDisplayNone =
+        'none' === fixture.nativeElement.children[0].style.display;
+      const hasHidden = fixture.nativeElement.children[0].hidden;
+      expect(hasDisplayNone || hasHidden).toBeTruthy();
+    });
+    it('id should be present in output', () => {
+      component.uischema = testData.uischema;
+      component.id = 'myId';
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(textElement.nativeElement.id).toBe('myId');
+    });
+  };
+export const textInputEventTest =
+  <C extends JsonFormsControl>(
+    testConfig: TestConfig<C>,
+    instance: string,
+    elementToUse: (element: DebugElement) => any,
+    testData: TestData<ControlElement> = defaultTextTestData
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let textNativeElement: any;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(
+        testConfig,
+        instance,
+        elementToUse
+      );
+      fixture = preparedComponents.fixture;
+      textNativeElement = preparedComponents.textNativeElement;
+      component = preparedComponents.component;
+    });
+
+    it('should update via input event', () => {
+      component.uischema = testData.uischema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+
+      const spy = spyOn(component, 'onChange');
+      textNativeElement.value = 'bar';
+      if (textNativeElement.dispatchEvent) {
+        textNativeElement.dispatchEvent(new Event('input'));
       }
-    ]));
-    formsService.refresh();
-    component.ngOnInit();
-    fixture.detectChanges();
-    const debugErrors: DebugElement[] = fixture.debugElement.queryAll(
-      By.directive(errorTestInformation.errorInstance)
-    );
-    expect(debugErrors.length).toBe(errorTestInformation.numberOfElements);
-    expect(
-      debugErrors[errorTestInformation.indexOfElement].nativeElement.textContent
-    ).toBe('Hi, this is me, test error!');
-  });
-};
-export const textTypeTest = <C extends JsonFormsControl>(
-  testConfig: TestConfig<C>,
-  instance: string,
-  elementToUse: (element: DebugElement) => any,
-  testData: TestData<ControlElement> = defaultTextTestData
-) => () => {
-  let fixture: ComponentFixture<any>;
-  let component: C;
-  let textNativeElement: any;
-
-  baseSetup(testConfig);
-
-  beforeEach(() => {
-    const preparedComponents = prepareComponent(
-      testConfig,
-      instance,
-      elementToUse
-    );
-    fixture = preparedComponents.fixture;
-    component = preparedComponents.component;
-    textNativeElement = preparedComponents.textNativeElement;
-  });
-  it('should show password independent of schema', () => {
-    const uischema = JSON.parse(JSON.stringify(testData.uischema));
-    uischema.options = { format: 'password' };
-    const schema = JSON.parse(JSON.stringify(testData.schema));
-    schema.properties.foo.format = 'email';
-
-    component.uischema = uischema;
-    component.schema = schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: schema, uischema: uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(textNativeElement.type).toBe('password');
-  });
-  it('should show email', () => {
-    const schema = JSON.parse(JSON.stringify(testData.schema));
-    schema.properties.foo.format = 'email';
-
-    component.uischema = testData.uischema;
-    component.schema = schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(textNativeElement.type).toBe('email');
-  });
-  xit('should show tel', () => {
-    const schema = JSON.parse(JSON.stringify(testData.schema));
-    schema.properties.foo.format = 'tel';
-
-    component.uischema = testData.uischema;
-    component.schema = schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(textNativeElement.type).toBe('tel');
-  });
-  xit('should fallback to text', () => {
-    const schema = JSON.parse(JSON.stringify(testData.schema));
-    schema.properties.foo.format = 'foo';
-
-    component.uischema = testData.uischema;
-    component.schema = schema;
-
-    getJsonFormsService(component).init(
-      {core: {data: testData.data, schema: schema, uischema: testData.uischema}}
-    );
-    component.ngOnInit();
-    fixture.detectChanges();
-    expect(textNativeElement.type).toBe('text');
-  });
-};
+      // trigger change detection
+      fixture.detectChanges();
+      expect(spy).toHaveBeenCalled();
+      expect(textNativeElement.value).toBe('bar');
+    });
+  };
+export const textErrorTest =
+  <C extends JsonFormsControl>(
+    testConfig: TestConfig<C>,
+    errorTestInformation: ErrorTestExpectation,
+    testData: TestData<ControlElement> = defaultTextTestData
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let component: C;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(testConfig);
+      fixture = preparedComponents.fixture;
+      component = preparedComponents.component;
+    });
+    it('should display errors', () => {
+      component.uischema = testData.uischema;
+
+      const formsService = getJsonFormsService(component);
+      formsService.init({
+        core: {
+          data: testData.data,
+          schema: testData.schema,
+          uischema: undefined,
+        },
+      });
+      formsService.updateCore(
+        Actions.updateErrors([
+          {
+            instancePath: '/foo',
+            message: 'Hi, this is me, test error!',
+            keyword: '',
+            schemaPath: '',
+            params: {},
+          },
+        ])
+      );
+      formsService.refresh();
+      component.ngOnInit();
+      fixture.detectChanges();
+      const debugErrors: DebugElement[] = fixture.debugElement.queryAll(
+        By.directive(errorTestInformation.errorInstance)
+      );
+      expect(debugErrors.length).toBe(errorTestInformation.numberOfElements);
+      expect(
+        debugErrors[errorTestInformation.indexOfElement].nativeElement
+          .textContent
+      ).toBe('Hi, this is me, test error!');
+    });
+  };
+export const textTypeTest =
+  <C extends JsonFormsControl>(
+    testConfig: TestConfig<C>,
+    instance: string,
+    elementToUse: (element: DebugElement) => any,
+    testData: TestData<ControlElement> = defaultTextTestData
+  ) =>
+  () => {
+    let fixture: ComponentFixture<any>;
+    let component: C;
+    let textNativeElement: any;
+
+    baseSetup(testConfig);
+
+    beforeEach(() => {
+      const preparedComponents = prepareComponent(
+        testConfig,
+        instance,
+        elementToUse
+      );
+      fixture = preparedComponents.fixture;
+      component = preparedComponents.component;
+      textNativeElement = preparedComponents.textNativeElement;
+    });
+    it('should show password independent of schema', () => {
+      const uischema = JSON.parse(JSON.stringify(testData.uischema));
+      uischema.options = { format: 'password' };
+      const schema = JSON.parse(JSON.stringify(testData.schema));
+      schema.properties.foo.format = 'email';
+
+      component.uischema = uischema;
+      component.schema = schema;
+
+      getJsonFormsService(component).init({
+        core: { data: testData.data, schema: schema, uischema: uischema },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(textNativeElement.type).toBe('password');
+    });
+    it('should show email', () => {
+      const schema = JSON.parse(JSON.stringify(testData.schema));
+      schema.properties.foo.format = 'email';
+
+      component.uischema = testData.uischema;
+      component.schema = schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(textNativeElement.type).toBe('email');
+    });
+    xit('should show tel', () => {
+      const schema = JSON.parse(JSON.stringify(testData.schema));
+      schema.properties.foo.format = 'tel';
+
+      component.uischema = testData.uischema;
+      component.schema = schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(textNativeElement.type).toBe('tel');
+    });
+    xit('should fallback to text', () => {
+      const schema = JSON.parse(JSON.stringify(testData.schema));
+      schema.properties.foo.format = 'foo';
+
+      component.uischema = testData.uischema;
+      component.schema = schema;
+
+      getJsonFormsService(component).init({
+        core: {
+          data: testData.data,
+          schema: schema,
+          uischema: testData.uischema,
+        },
+      });
+      component.ngOnInit();
+      fixture.detectChanges();
+      expect(textNativeElement.type).toBe('text');
+    });
+  };
diff --git a/packages/angular-test/src/util.ts b/packages/angular-test/src/util.ts
index da4c1803f..36afc4385 100644
--- a/packages/angular-test/src/util.ts
+++ b/packages/angular-test/src/util.ts
@@ -28,7 +28,7 @@ import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import type {
   JsonFormsRendererRegistryEntry,
   JsonSchema,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 import type { ErrorObject } from 'ajv';
 
@@ -50,7 +50,7 @@ export const baseSetup = <C extends JsonFormsControl>(
     TestBed.configureTestingModule({
       declarations: [testConfig.componentUT],
       imports: testConfig.imports,
-      providers: [JsonFormsAngularService].concat(testConfig.providers)
+      providers: [JsonFormsAngularService].concat(testConfig.providers),
     }).compileComponents();
   });
 };
@@ -82,8 +82,8 @@ export const setupMockStore = (
       data: testData.data,
       schema: testData.schema,
       errors: testData.errors,
-      uischema: testData.uischema
-    }
+      uischema: testData.uischema,
+    },
   });
   getJsonFormsService(component).registerRenderers(testData.renderers);
 };
diff --git a/packages/angular/src/abstract-control.ts b/packages/angular/src/abstract-control.ts
index db8841d94..ab5263591 100644
--- a/packages/angular/src/abstract-control.ts
+++ b/packages/angular/src/abstract-control.ts
@@ -29,14 +29,14 @@ import {
   JsonFormsState,
   JsonSchema,
   OwnPropsOfControl,
-  StatePropsOfControl
+  StatePropsOfControl,
 } from '@jsonforms/core';
 import { Component, Input, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   FormControl,
   ValidationErrors,
-  ValidatorFn
+  ValidatorFn,
 } from '@angular/forms';
 import type { Subscription } from 'rxjs';
 
@@ -44,11 +44,14 @@ import { JsonFormsBaseRenderer } from './base.renderer';
 import { JsonFormsAngularService } from './jsonforms.service';
 import merge from 'lodash/merge';
 @Component({
-  template: ''
+  template: '',
 })
 export abstract class JsonFormsAbstractControl<
-  Props extends StatePropsOfControl
-> extends JsonFormsBaseRenderer<ControlElement> implements OnInit, OnDestroy {
+    Props extends StatePropsOfControl
+  >
+  extends JsonFormsBaseRenderer<ControlElement>
+  implements OnInit, OnDestroy
+{
   @Input() id: string;
   @Input() disabled: boolean;
   @Input() visible: boolean;
@@ -70,11 +73,11 @@ export abstract class JsonFormsAbstractControl<
     this.form = new FormControl(
       {
         value: '',
-        disabled: true
+        disabled: true,
       },
       {
         updateOn: 'change',
-        validators: this.validator.bind(this)
+        validators: this.validator.bind(this),
       }
     );
   }
@@ -108,7 +111,7 @@ export abstract class JsonFormsAbstractControl<
           rootSchema,
           visible,
           path,
-          config
+          config,
         } = props;
         this.label = computeLabel(
           label,
@@ -128,7 +131,7 @@ export abstract class JsonFormsAbstractControl<
         this.form.setValue(data);
         this.propsPath = path;
         this.mapAdditionalProps(props);
-      }
+      },
     });
     this.triggerValidation();
   }
@@ -157,7 +160,7 @@ export abstract class JsonFormsAbstractControl<
       uischema: this.uischema,
       schema: this.schema,
       path: this.path,
-      id: this.id
+      id: this.id,
     };
     if (this.disabled !== undefined) {
       props.enabled = !this.disabled;
diff --git a/packages/angular/src/array-control.ts b/packages/angular/src/array-control.ts
index 3b2a60d18..013f6cd61 100644
--- a/packages/angular/src/array-control.ts
+++ b/packages/angular/src/array-control.ts
@@ -25,14 +25,15 @@
 import {
   JsonFormsState,
   mapStateToArrayControlProps,
-  StatePropsOfArrayControl
+  StatePropsOfArrayControl,
 } from '@jsonforms/core';
 import type { OnDestroy, OnInit } from '@angular/core';
 import { JsonFormsAbstractControl } from './abstract-control';
 
 export class JsonFormsArrayControl
   extends JsonFormsAbstractControl<StatePropsOfArrayControl>
-  implements OnInit, OnDestroy {
+  implements OnInit, OnDestroy
+{
   protected mapToProps(state: JsonFormsState): StatePropsOfArrayControl {
     const props = mapStateToArrayControlProps(state, this.getOwnProps());
     return { ...props };
diff --git a/packages/angular/src/base.renderer.ts b/packages/angular/src/base.renderer.ts
index 2c080dc67..44ff40172 100644
--- a/packages/angular/src/base.renderer.ts
+++ b/packages/angular/src/base.renderer.ts
@@ -22,11 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import {  Directive, Input } from '@angular/core';
+import { Directive, Input } from '@angular/core';
 import {
   JsonSchema,
   OwnPropsOfRenderer,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 
 @Directive()
@@ -39,7 +39,7 @@ export class JsonFormsBaseRenderer<T extends UISchemaElement> {
     return {
       uischema: this.uischema,
       schema: this.schema,
-      path: this.path
+      path: this.path,
     };
   }
 }
diff --git a/packages/angular/src/control.ts b/packages/angular/src/control.ts
index 712bd05aa..80aa16664 100644
--- a/packages/angular/src/control.ts
+++ b/packages/angular/src/control.ts
@@ -27,14 +27,15 @@ import {
   mapStateToControlProps,
   mapStateToControlWithDetailProps,
   StatePropsOfControl,
-  StatePropsOfControlWithDetail
+  StatePropsOfControlWithDetail,
 } from '@jsonforms/core';
 import type { OnDestroy, OnInit } from '@angular/core';
 import { JsonFormsAbstractControl } from './abstract-control';
 
 export class JsonFormsControl
   extends JsonFormsAbstractControl<StatePropsOfControl>
-  implements OnInit, OnDestroy {
+  implements OnInit, OnDestroy
+{
   protected mapToProps(state: JsonFormsState): StatePropsOfControl {
     const props = mapStateToControlProps(state, this.getOwnProps());
     return { ...props };
@@ -43,7 +44,8 @@ export class JsonFormsControl
 
 export class JsonFormsControlWithDetail
   extends JsonFormsAbstractControl<StatePropsOfControlWithDetail>
-  implements OnInit, OnDestroy {
+  implements OnInit, OnDestroy
+{
   protected mapToProps(state: JsonFormsState): StatePropsOfControlWithDetail {
     const props = mapStateToControlWithDetailProps(state, this.getOwnProps());
     return { ...props };
diff --git a/packages/angular/src/jsonforms-root.component.ts b/packages/angular/src/jsonforms-root.component.ts
index 48029ed9e..92d9aa5b1 100644
--- a/packages/angular/src/jsonforms-root.component.ts
+++ b/packages/angular/src/jsonforms-root.component.ts
@@ -23,145 +23,170 @@
   THE SOFTWARE.
 */
 import {
-    Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges,
 } from '@angular/core';
-import { Actions, JsonFormsI18nState, JsonFormsRendererRegistryEntry, JsonSchema, UISchemaElement, UISchemaTester, ValidationMode } from '@jsonforms/core';
+import {
+  Actions,
+  JsonFormsI18nState,
+  JsonFormsRendererRegistryEntry,
+  JsonSchema,
+  UISchemaElement,
+  UISchemaTester,
+  ValidationMode,
+} from '@jsonforms/core';
 import Ajv, { ErrorObject } from 'ajv';
 import { JsonFormsAngularService, USE_STATE_VALUE } from './jsonforms.service';
 @Component({
-    selector: 'jsonforms',
-    template: '<jsonforms-outlet></jsonforms-outlet>',
-    providers: [JsonFormsAngularService]
+  selector: 'jsonforms',
+  template: '<jsonforms-outlet></jsonforms-outlet>',
+  providers: [JsonFormsAngularService],
 })
 export class JsonForms implements OnChanges, OnInit {
+  @Input() uischema: UISchemaElement;
+  @Input() schema: JsonSchema;
+  @Input() data: any;
+  @Input() renderers: JsonFormsRendererRegistryEntry[];
+  @Input() uischemas: { tester: UISchemaTester; uischema: UISchemaElement }[];
+  @Output() dataChange = new EventEmitter<any>();
+  @Input() readonly: boolean;
+  @Input() validationMode: ValidationMode;
+  @Input() ajv: Ajv;
+  @Input() config: any;
+  @Input() i18n: JsonFormsI18nState;
+  @Input() additionalErrors: ErrorObject[];
+  @Output() errors = new EventEmitter<ErrorObject[]>();
+
+  private previousData: any;
+  private previousErrors: ErrorObject[];
+
+  private initialized = false;
+  oldI18N: JsonFormsI18nState;
+
+  constructor(private jsonformsService: JsonFormsAngularService) {}
+
+  ngOnInit(): void {
+    this.jsonformsService.init({
+      core: {
+        data: this.data,
+        uischema: this.uischema,
+        schema: this.schema,
+        ajv: this.ajv,
+        validationMode: this.validationMode,
+        additionalErrors: this.additionalErrors,
+      },
+      uischemas: this.uischemas,
+      i18n: this.i18n,
+      renderers: this.renderers,
+      config: this.config,
+      readonly: this.readonly,
+    });
+    this.jsonformsService.$state.subscribe((state) => {
+      const data = state?.jsonforms?.core?.data;
+      const errors = state?.jsonforms?.core?.errors;
+      if (this.previousData !== data) {
+        this.previousData = data;
+        this.dataChange.emit(data);
+      }
+      if (this.previousErrors !== errors) {
+        this.previousErrors = errors;
+        this.errors.emit(errors);
+      }
+    });
+    this.oldI18N = this.i18n;
+    this.initialized = true;
+  }
+
+  ngDoCheck(): void {
+    // we can't use ngOnChanges as then nested i18n changes will not be detected
+    // the update will result in a no-op when the parameters did not change
+    if (
+      this.oldI18N?.locale !== this.i18n?.locale ||
+      this.oldI18N?.translate !== this.i18n?.translate ||
+      this.oldI18N?.translateError !== this.i18n?.translateError
+    ) {
+      this.jsonformsService.updateI18n(
+        Actions.updateI18n(
+          this.oldI18N?.locale === this.i18n?.locale
+            ? this.jsonformsService.getState().jsonforms.i18n.locale
+            : this.i18n?.locale,
+          this.oldI18N?.translate === this.i18n?.translate
+            ? this.jsonformsService.getState().jsonforms.i18n.translate
+            : this.i18n?.translate,
+          this.oldI18N?.translateError === this.i18n?.translateError
+            ? this.jsonformsService.getState().jsonforms.i18n.translateError
+            : this.i18n?.translateError
+        )
+      );
+      this.oldI18N = this.i18n;
+    }
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (!this.initialized) {
+      return;
+    }
+    const newData = changes.data;
+    const newSchema = changes.schema;
+    const newUiSchema = changes.uischema;
+    const newRenderers = changes.renderers;
+    const newUischemas = changes.uischemas;
+    const newI18n = changes.i18n;
+    const newReadonly = changes.readonly;
+    const newValidationMode = changes.validationMode;
+    const newAjv = changes.ajv;
+    const newConfig = changes.config;
+    const newAdditionalErrors = changes.additionalErrors;
+
+    if (
+      newData ||
+      newSchema ||
+      newUiSchema ||
+      newValidationMode ||
+      newAjv ||
+      newAdditionalErrors
+    ) {
+      this.jsonformsService.updateCoreState(
+        newData ? newData.currentValue : USE_STATE_VALUE,
+        newSchema ? newSchema.currentValue : USE_STATE_VALUE,
+        newUiSchema ? newUiSchema.currentValue : USE_STATE_VALUE,
+        newAjv ? newAjv.currentValue : USE_STATE_VALUE,
+        newValidationMode ? newValidationMode.currentValue : USE_STATE_VALUE,
+        newAdditionalErrors ? newAdditionalErrors.currentValue : USE_STATE_VALUE
+      );
+    }
+
+    if (newRenderers && !newRenderers.isFirstChange()) {
+      this.jsonformsService.setRenderers(newRenderers.currentValue);
+    }
 
-    @Input() uischema: UISchemaElement;
-    @Input() schema: JsonSchema;
-    @Input() data: any;
-    @Input() renderers: JsonFormsRendererRegistryEntry[];
-    @Input() uischemas: { tester: UISchemaTester; uischema: UISchemaElement; }[];
-    @Output() dataChange = new EventEmitter<any>();
-    @Input() readonly: boolean;
-    @Input() validationMode: ValidationMode;
-    @Input() ajv: Ajv;
-    @Input() config: any;
-    @Input() i18n: JsonFormsI18nState;
-    @Input() additionalErrors: ErrorObject[];
-    @Output() errors = new EventEmitter<ErrorObject[]>();
-
-    private previousData:any;
-    private previousErrors:ErrorObject[];
-
-    private initialized = false;
-    oldI18N: JsonFormsI18nState;
-
-    constructor(private jsonformsService: JsonFormsAngularService) {
+    if (newUischemas && !newUischemas.isFirstChange()) {
+      this.jsonformsService.setUiSchemas(newUischemas.currentValue);
     }
 
-    ngOnInit(): void {
-        this.jsonformsService.init({
-            core: {
-                data: this.data,
-                uischema: this.uischema,
-                schema: this.schema,
-                ajv: this.ajv,
-                validationMode: this.validationMode,
-                additionalErrors: this.additionalErrors
-            },
-            uischemas: this.uischemas,
-            i18n: this.i18n,
-            renderers: this.renderers,
-            config: this.config,
-            readonly: this.readonly
-        });
-        this.jsonformsService.$state.subscribe(state => {
-            const data = state?.jsonforms?.core?.data;
-            const errors = state?.jsonforms?.core?.errors;
-            if(this.previousData !== data) {
-                this.previousData = data;
-                this.dataChange.emit(data);
-            }
-            if(this.previousErrors !== errors) {
-                this.previousErrors = errors;
-                this.errors.emit(errors);
-            }
-        });
-        this.oldI18N = this.i18n;
-        this.initialized = true;
+    if (newI18n && !newI18n.isFirstChange()) {
+      this.jsonformsService.updateI18n(
+        Actions.updateI18n(
+          newI18n.currentValue?.locale,
+          newI18n.currentValue?.translate,
+          newI18n.currentValue?.translateError
+        )
+      );
     }
 
-    ngDoCheck(): void {
-        // we can't use ngOnChanges as then nested i18n changes will not be detected
-        // the update will result in a no-op when the parameters did not change
-        if (
-          this.oldI18N?.locale !== this.i18n?.locale ||
-          this.oldI18N?.translate !== this.i18n?.translate ||
-          this.oldI18N?.translateError !== this.i18n?.translateError
-        ) {
-          this.jsonformsService.updateI18n(
-            Actions.updateI18n(
-              this.oldI18N?.locale === this.i18n?.locale
-                ? this.jsonformsService.getState().jsonforms.i18n.locale
-                : this.i18n?.locale,
-              this.oldI18N?.translate === this.i18n?.translate
-                ? this.jsonformsService.getState().jsonforms.i18n.translate
-                : this.i18n?.translate,
-              this.oldI18N?.translateError === this.i18n?.translateError
-                ? this.jsonformsService.getState().jsonforms.i18n.translateError
-                : this.i18n?.translateError
-            )
-          );
-          this.oldI18N = this.i18n;
-        }
+    if (newReadonly && !newReadonly.isFirstChange()) {
+      this.jsonformsService.setReadonly(newReadonly.currentValue);
     }
 
-    ngOnChanges(changes: SimpleChanges): void {
-        if (!this.initialized) {
-            return;
-        }
-        const newData = changes.data;
-        const newSchema = changes.schema;
-        const newUiSchema = changes.uischema;
-        const newRenderers = changes.renderers;
-        const newUischemas = changes.uischemas;
-        const newI18n = changes.i18n;
-        const newReadonly = changes.readonly;
-        const newValidationMode = changes.validationMode;
-        const newAjv = changes.ajv;
-        const newConfig = changes.config;
-        const newAdditionalErrors = changes.additionalErrors;
-
-        if (newData || newSchema || newUiSchema || newValidationMode || newAjv || newAdditionalErrors) {
-            this.jsonformsService.updateCoreState(
-                newData ? newData.currentValue : USE_STATE_VALUE,
-                newSchema ? newSchema.currentValue : USE_STATE_VALUE,
-                newUiSchema ? newUiSchema.currentValue : USE_STATE_VALUE,
-                newAjv ? newAjv.currentValue : USE_STATE_VALUE,
-                newValidationMode ? newValidationMode.currentValue : USE_STATE_VALUE,
-                newAdditionalErrors ? newAdditionalErrors.currentValue : USE_STATE_VALUE
-            );
-        }
-
-        if (newRenderers && !newRenderers.isFirstChange()) {
-            this.jsonformsService.setRenderers(newRenderers.currentValue);
-        }
-
-        if (newUischemas && !newUischemas.isFirstChange()) {
-            this.jsonformsService.setUiSchemas(newUischemas.currentValue);
-        }
-
-        if (newI18n && !newI18n.isFirstChange()) {
-            this.jsonformsService.updateI18n(
-                Actions.updateI18n(newI18n.currentValue?.locale, newI18n.currentValue?.translate, newI18n.currentValue?.translateError)
-            );
-        }
-
-        if (newReadonly && !newReadonly.isFirstChange()) {
-            this.jsonformsService.setReadonly(newReadonly.currentValue);
-        }
-
-        if (newConfig && !newConfig.isFirstChange()) {
-            this.jsonformsService.updateConfig(Actions.setConfig(newConfig.currentValue));
-        }
+    if (newConfig && !newConfig.isFirstChange()) {
+      this.jsonformsService.updateConfig(
+        Actions.setConfig(newConfig.currentValue)
+      );
     }
+  }
 }
diff --git a/packages/angular/src/jsonforms.component.ts b/packages/angular/src/jsonforms.component.ts
index 033ea2da8..2ac3014de 100644
--- a/packages/angular/src/jsonforms.component.ts
+++ b/packages/angular/src/jsonforms.component.ts
@@ -30,7 +30,7 @@ import {
   OnDestroy,
   OnInit,
   Type,
-  ViewContainerRef
+  ViewContainerRef,
 } from '@angular/core';
 import {
   createId,
@@ -42,7 +42,7 @@ import {
   mapStateToJsonFormsRendererProps,
   OwnPropsOfRenderer,
   StatePropsOfJsonFormsRenderer,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 import { UnknownRenderer } from './unknown.component';
 import { JsonFormsBaseRenderer } from './base.renderer';
@@ -52,20 +52,27 @@ import { JsonFormsAngularService } from './jsonforms.service';
 
 import { get, isEqual } from 'lodash';
 
-const areEqual = (prevProps: StatePropsOfJsonFormsRenderer, nextProps: StatePropsOfJsonFormsRenderer) => {
-  return get(prevProps, 'renderers.length') === get(nextProps, 'renderers.length')
-    && get(prevProps, 'cells.length') === get(nextProps, 'cells.length')
-    && get(prevProps, 'uischemas.length') === get(nextProps, 'uischemas.length')
-    && get(prevProps, 'schema') === get(nextProps, 'schema')
-    && isEqual(get(prevProps, 'uischema'), get(nextProps, 'uischema'))
-    && get(prevProps, 'path') === get(nextProps, 'path');
+const areEqual = (
+  prevProps: StatePropsOfJsonFormsRenderer,
+  nextProps: StatePropsOfJsonFormsRenderer
+) => {
+  return (
+    get(prevProps, 'renderers.length') === get(nextProps, 'renderers.length') &&
+    get(prevProps, 'cells.length') === get(nextProps, 'cells.length') &&
+    get(prevProps, 'uischemas.length') === get(nextProps, 'uischemas.length') &&
+    get(prevProps, 'schema') === get(nextProps, 'schema') &&
+    isEqual(get(prevProps, 'uischema'), get(nextProps, 'uischema')) &&
+    get(prevProps, 'path') === get(nextProps, 'path')
+  );
 };
 
 @Directive({
-  selector: 'jsonforms-outlet'
+  selector: 'jsonforms-outlet',
 })
-export class JsonFormsOutlet extends JsonFormsBaseRenderer<UISchemaElement>
-  implements OnInit, OnDestroy {
+export class JsonFormsOutlet
+  extends JsonFormsBaseRenderer<UISchemaElement>
+  implements OnInit, OnDestroy
+{
   private subscription: Subscription;
   private previousProps: StatePropsOfJsonFormsRenderer;
 
@@ -87,7 +94,7 @@ export class JsonFormsOutlet extends JsonFormsBaseRenderer<UISchemaElement>
 
   ngOnInit(): void {
     this.subscription = this.jsonformsService.$state.subscribe({
-      next: (state: JsonFormsState) => this.update(state)
+      next: (state: JsonFormsState) => this.update(state),
     });
   }
 
@@ -95,7 +102,7 @@ export class JsonFormsOutlet extends JsonFormsBaseRenderer<UISchemaElement>
     const props = mapStateToJsonFormsRendererProps(state, {
       schema: this.schema,
       uischema: this.uischema,
-      path: this.path
+      path: this.path,
     });
     if (areEqual(this.previousProps, props)) {
       return;
@@ -107,21 +114,29 @@ export class JsonFormsOutlet extends JsonFormsBaseRenderer<UISchemaElement>
     const uischema = this.uischema || props.uischema;
     const testerContext = {
       rootSchema: props.rootSchema,
-      config: getConfig(state)
+      config: getConfig(state),
     };
 
-    const renderer = maxBy(renderers, r => r.tester(uischema, schema, testerContext));
+    const renderer = maxBy(renderers, (r) =>
+      r.tester(uischema, schema, testerContext)
+    );
     let bestComponent: Type<any> = UnknownRenderer;
-    if (renderer !== undefined && renderer.tester(uischema, schema, testerContext) !== -1) {
+    if (
+      renderer !== undefined &&
+      renderer.tester(uischema, schema, testerContext) !== -1
+    ) {
       bestComponent = renderer.renderer;
     }
 
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(bestComponent);
+    const componentFactory =
+      this.componentFactoryResolver.resolveComponentFactory(bestComponent);
     this.viewContainerRef.clear();
-    const currentComponentRef = this.viewContainerRef.createComponent(componentFactory);
+    const currentComponentRef =
+      this.viewContainerRef.createComponent(componentFactory);
 
     if (currentComponentRef.instance instanceof JsonFormsBaseRenderer) {
-      const instance = currentComponentRef.instance as JsonFormsBaseRenderer<UISchemaElement>;
+      const instance =
+        currentComponentRef.instance as JsonFormsBaseRenderer<UISchemaElement>;
       instance.uischema = uischema;
       instance.schema = schema;
       instance.path = this.path;
diff --git a/packages/angular/src/jsonforms.module.ts b/packages/angular/src/jsonforms.module.ts
index 70226d64b..abc5d256b 100644
--- a/packages/angular/src/jsonforms.module.ts
+++ b/packages/angular/src/jsonforms.module.ts
@@ -30,6 +30,6 @@ import { UnknownRenderer } from './unknown.component';
 @NgModule({
   declarations: [JsonFormsOutlet, UnknownRenderer, JsonForms],
   entryComponents: [UnknownRenderer],
-  exports: [JsonFormsOutlet, JsonForms]
+  exports: [JsonFormsOutlet, JsonForms],
 })
 export class JsonFormsModule {}
diff --git a/packages/angular/src/jsonforms.service.ts b/packages/angular/src/jsonforms.service.ts
index acb18d682..36c3a2624 100644
--- a/packages/angular/src/jsonforms.service.ts
+++ b/packages/angular/src/jsonforms.service.ts
@@ -23,27 +23,27 @@
   THE SOFTWARE.
 */
 import {
-    Actions,
-    configReducer,
-    CoreActions,
-    coreReducer,
-    generateDefaultUISchema,
-    generateJsonSchema,
-    i18nReducer,
-    JsonFormsRendererRegistryEntry,
-    JsonFormsState,
-    JsonFormsSubStates,
-    JsonSchema,
-    I18nActions,
-    RankedTester,
-    setConfig,
-    SetConfigAction,
-    UISchemaActions,
-    UISchemaElement,
-    uischemaRegistryReducer,
-    UISchemaTester,
-    ValidationMode,
-    updateI18n
+  Actions,
+  configReducer,
+  CoreActions,
+  coreReducer,
+  generateDefaultUISchema,
+  generateJsonSchema,
+  i18nReducer,
+  JsonFormsRendererRegistryEntry,
+  JsonFormsState,
+  JsonFormsSubStates,
+  JsonSchema,
+  I18nActions,
+  RankedTester,
+  setConfig,
+  SetConfigAction,
+  UISchemaActions,
+  UISchemaElement,
+  uischemaRegistryReducer,
+  UISchemaTester,
+  ValidationMode,
+  updateI18n,
 } from '@jsonforms/core';
 import { BehaviorSubject, Observable } from 'rxjs';
 import type { JsonFormsBaseRenderer } from './base.renderer';
@@ -54,186 +54,257 @@ import type { ErrorObject } from 'ajv';
 
 export const USE_STATE_VALUE = Symbol('Marker to use state value');
 export class JsonFormsAngularService {
+  private _state: JsonFormsSubStates;
+  private state: BehaviorSubject<JsonFormsState>;
 
-    private _state: JsonFormsSubStates;
-    private state: BehaviorSubject<JsonFormsState>;
-
-    init(initialState: JsonFormsSubStates = { core: { data: undefined, schema: undefined, uischema: undefined, validationMode: 'ValidateAndShow', additionalErrors: undefined } }) {
-        this._state = initialState;
-        this._state.config = configReducer(undefined, setConfig(this._state.config));
-        this._state.i18n = i18nReducer(this._state.i18n, updateI18n(this._state.i18n?.locale, this._state.i18n?.translate, this._state.i18n?.translateError));
-        this.state = new BehaviorSubject({ jsonforms: this._state });
-        const data = initialState.core.data;
-        const schema = initialState.core.schema ?? generateJsonSchema(data);
-        const uischema = initialState.core.uischema ?? generateDefaultUISchema(schema);
-        this.updateCore(Actions.init(data, schema, uischema));
+  init(
+    initialState: JsonFormsSubStates = {
+      core: {
+        data: undefined,
+        schema: undefined,
+        uischema: undefined,
+        validationMode: 'ValidateAndShow',
+        additionalErrors: undefined,
+      },
     }
+  ) {
+    this._state = initialState;
+    this._state.config = configReducer(
+      undefined,
+      setConfig(this._state.config)
+    );
+    this._state.i18n = i18nReducer(
+      this._state.i18n,
+      updateI18n(
+        this._state.i18n?.locale,
+        this._state.i18n?.translate,
+        this._state.i18n?.translateError
+      )
+    );
+    this.state = new BehaviorSubject({ jsonforms: this._state });
+    const data = initialState.core.data;
+    const schema = initialState.core.schema ?? generateJsonSchema(data);
+    const uischema =
+      initialState.core.uischema ?? generateDefaultUISchema(schema);
+    this.updateCore(Actions.init(data, schema, uischema));
+  }
 
-    get $state(): Observable<JsonFormsState> {
-        if (!this.state) {
-            throw new Error('Please call init first!');
-        }
-        return this.state.asObservable();
+  get $state(): Observable<JsonFormsState> {
+    if (!this.state) {
+      throw new Error('Please call init first!');
     }
+    return this.state.asObservable();
+  }
 
-    /**
-     * @deprecated use {@link JsonFormsAngularService.addRenderer}
-     */
-    registerRenderer(renderer: JsonFormsBaseRenderer<UISchemaElement>, tester: RankedTester): void {
-        this.addRenderer(renderer, tester);
-    }
-    addRenderer(renderer: JsonFormsBaseRenderer<UISchemaElement>, tester: RankedTester): void {
-        this._state.renderers.push({ renderer, tester });
-        this.updateSubject();
-    }
+  /**
+   * @deprecated use {@link JsonFormsAngularService.addRenderer}
+   */
+  registerRenderer(
+    renderer: JsonFormsBaseRenderer<UISchemaElement>,
+    tester: RankedTester
+  ): void {
+    this.addRenderer(renderer, tester);
+  }
+  addRenderer(
+    renderer: JsonFormsBaseRenderer<UISchemaElement>,
+    tester: RankedTester
+  ): void {
+    this._state.renderers.push({ renderer, tester });
+    this.updateSubject();
+  }
 
-    /**
-     * @deprecated use {@link JsonFormsAngularService.setRenderer}
-     */
-    registerRenderers(renderers: JsonFormsRendererRegistryEntry[]): void {
-        this.setRenderers(renderers);
-    }
-    setRenderers(renderers: JsonFormsRendererRegistryEntry[]): void {
-        this._state.renderers = renderers;
-        this.updateSubject();
-    }
+  /**
+   * @deprecated use {@link JsonFormsAngularService.setRenderer}
+   */
+  registerRenderers(renderers: JsonFormsRendererRegistryEntry[]): void {
+    this.setRenderers(renderers);
+  }
+  setRenderers(renderers: JsonFormsRendererRegistryEntry[]): void {
+    this._state.renderers = renderers;
+    this.updateSubject();
+  }
 
-    /**
-     * @deprecated use {@link JsonFormsAngularService.removeRenderer}
-     */
-    unregisterRenderer(tester: RankedTester): void {
-        this.removeRenderer(tester);
-    }
-    removeRenderer(tester: RankedTester): void {
-        const findIndex = this._state.renderers.findIndex(v => v.tester === tester);
-        if (findIndex === -1) {
-            return;
-        }
-        const renderers = this._state.renderers.filter(v => v.tester !== tester);
-        this._state.renderers = renderers;
-        this.updateSubject();
+  /**
+   * @deprecated use {@link JsonFormsAngularService.removeRenderer}
+   */
+  unregisterRenderer(tester: RankedTester): void {
+    this.removeRenderer(tester);
+  }
+  removeRenderer(tester: RankedTester): void {
+    const findIndex = this._state.renderers.findIndex(
+      (v) => v.tester === tester
+    );
+    if (findIndex === -1) {
+      return;
     }
+    const renderers = this._state.renderers.filter((v) => v.tester !== tester);
+    this._state.renderers = renderers;
+    this.updateSubject();
+  }
 
-    updateValidationMode(validationMode: ValidationMode): void {
-        const coreState = coreReducer(this._state.core, Actions.setValidationMode(validationMode));
-        this._state.core = coreState;
-        this.updateSubject();
-    }
-
-    updateI18n<T extends I18nActions>(i18nAction: T): T {
-        const i18nState = i18nReducer(this._state.i18n, i18nAction);
-        if (i18nState !== this._state.i18n) {
-            this._state.i18n = i18nState;
-            this.updateSubject();
-        }
-        return i18nAction;
-    }
+  updateValidationMode(validationMode: ValidationMode): void {
+    const coreState = coreReducer(
+      this._state.core,
+      Actions.setValidationMode(validationMode)
+    );
+    this._state.core = coreState;
+    this.updateSubject();
+  }
 
-    updateCore<T extends CoreActions>(coreAction: T): T {
-        const coreState = coreReducer(this._state.core, coreAction);
-        if (coreState !== this._state.core) {
-            this._state.core = coreState;
-            this.updateSubject();
-        }
-        return coreAction;
+  updateI18n<T extends I18nActions>(i18nAction: T): T {
+    const i18nState = i18nReducer(this._state.i18n, i18nAction);
+    if (i18nState !== this._state.i18n) {
+      this._state.i18n = i18nState;
+      this.updateSubject();
     }
+    return i18nAction;
+  }
 
-    /**
-     * @deprecated use {@link JsonFormsAngularService.setUiSchemas}
-     */
-    updateUiSchema<T extends UISchemaActions>(uischemaAction: T): T {
-        const uischemaState = uischemaRegistryReducer(this._state.uischemas, uischemaAction);
-        this._state.uischemas = uischemaState;
-        this.updateSubject();
-        return uischemaAction;
+  updateCore<T extends CoreActions>(coreAction: T): T {
+    const coreState = coreReducer(this._state.core, coreAction);
+    if (coreState !== this._state.core) {
+      this._state.core = coreState;
+      this.updateSubject();
     }
+    return coreAction;
+  }
 
-    setUiSchemas(uischemas: { tester: UISchemaTester; uischema: UISchemaElement; }[]): void {
-        this._state.uischemas = uischemas;
-        this.updateSubject();
-    }
+  /**
+   * @deprecated use {@link JsonFormsAngularService.setUiSchemas}
+   */
+  updateUiSchema<T extends UISchemaActions>(uischemaAction: T): T {
+    const uischemaState = uischemaRegistryReducer(
+      this._state.uischemas,
+      uischemaAction
+    );
+    this._state.uischemas = uischemaState;
+    this.updateSubject();
+    return uischemaAction;
+  }
 
-    updateConfig<T extends SetConfigAction>(setConfigAction: T): T {
-        const configState = configReducer(this._state.config, setConfigAction);
-        this._state.config = configState;
-        this.updateSubject();
-        return setConfigAction;
-    }
+  setUiSchemas(
+    uischemas: { tester: UISchemaTester; uischema: UISchemaElement }[]
+  ): void {
+    this._state.uischemas = uischemas;
+    this.updateSubject();
+  }
 
-    setUiSchema(uischema: UISchemaElement | undefined): void {
-        const newUiSchema = uischema ?? generateDefaultUISchema(this._state.core.schema);
-        const coreState = coreReducer(this._state.core, Actions.updateCore(this._state.core.data, this._state.core.schema, newUiSchema));
-        if(coreState !== this._state.core) {
-            this._state.core = coreState;
-            this.updateSubject();
-        }
-    }
+  updateConfig<T extends SetConfigAction>(setConfigAction: T): T {
+    const configState = configReducer(this._state.config, setConfigAction);
+    this._state.config = configState;
+    this.updateSubject();
+    return setConfigAction;
+  }
 
-    setSchema(schema: JsonSchema | undefined): void {
-        const coreState = coreReducer(this._state.core,
-            Actions.updateCore(this._state.core.data, schema ?? generateJsonSchema(this._state.core.data), this._state.core.uischema)
-        );
-        if(coreState !== this._state.core) {
-            this._state.core = coreState;
-            this.updateSubject();
-        }
+  setUiSchema(uischema: UISchemaElement | undefined): void {
+    const newUiSchema =
+      uischema ?? generateDefaultUISchema(this._state.core.schema);
+    const coreState = coreReducer(
+      this._state.core,
+      Actions.updateCore(
+        this._state.core.data,
+        this._state.core.schema,
+        newUiSchema
+      )
+    );
+    if (coreState !== this._state.core) {
+      this._state.core = coreState;
+      this.updateSubject();
     }
+  }
 
-    setData(data: any): void {
-        const coreState = coreReducer(this._state.core, Actions.updateCore(data, this._state.core.schema, this._state.core.uischema));
-        if(coreState !== this._state.core) {
-            this._state.core = coreState;
-            this.updateSubject();
-        }
+  setSchema(schema: JsonSchema | undefined): void {
+    const coreState = coreReducer(
+      this._state.core,
+      Actions.updateCore(
+        this._state.core.data,
+        schema ?? generateJsonSchema(this._state.core.data),
+        this._state.core.uischema
+      )
+    );
+    if (coreState !== this._state.core) {
+      this._state.core = coreState;
+      this.updateSubject();
     }
+  }
 
-    getLocale(): string | undefined {
-        return this._state.i18n?.locale;
+  setData(data: any): void {
+    const coreState = coreReducer(
+      this._state.core,
+      Actions.updateCore(
+        data,
+        this._state.core.schema,
+        this._state.core.uischema
+      )
+    );
+    if (coreState !== this._state.core) {
+      this._state.core = coreState;
+      this.updateSubject();
     }
+  }
 
-    setLocale(locale: string): void {
-        this._state.i18n.locale = locale;
-        this.updateSubject();
-    }
+  getLocale(): string | undefined {
+    return this._state.i18n?.locale;
+  }
 
-    setReadonly(readonly: boolean): void {
-        this._state.readonly = readonly;
-        this.updateSubject();
-    }
+  setLocale(locale: string): void {
+    this._state.i18n.locale = locale;
+    this.updateSubject();
+  }
 
-    getState(): JsonFormsState {
-        return cloneDeep({ jsonforms: this._state });
-    }
+  setReadonly(readonly: boolean): void {
+    this._state.readonly = readonly;
+    this.updateSubject();
+  }
 
-    getConfig(): any {
-        return cloneDeep(this._state.config)
-    }
+  getState(): JsonFormsState {
+    return cloneDeep({ jsonforms: this._state });
+  }
 
-    refresh(): void {
-        this.updateSubject();
-    }
+  getConfig(): any {
+    return cloneDeep(this._state.config);
+  }
 
-    updateCoreState(
-        data: any | typeof USE_STATE_VALUE,
-        schema: JsonSchema | typeof USE_STATE_VALUE,
-        uischema: UISchemaElement | typeof USE_STATE_VALUE,
-        ajv: Ajv | typeof USE_STATE_VALUE,
-        validationMode: ValidationMode | typeof USE_STATE_VALUE,
-        additionalErrors: ErrorObject[] | typeof USE_STATE_VALUE,
-    ): void {
-        const newData = data === USE_STATE_VALUE ? this._state.core.data : data;
-        const newSchema = schema === USE_STATE_VALUE ? this._state.core.schema : schema ?? generateJsonSchema(newData);
-        const newUischema = uischema === USE_STATE_VALUE ? this._state.core.uischema : uischema ?? generateDefaultUISchema(newSchema);
-        const newAjv = ajv === USE_STATE_VALUE ? this._state.core.ajv : ajv;
-        const newValidationMode = validationMode === USE_STATE_VALUE ? this._state.core.validationMode : validationMode;
-        const newAdditionalErrors = additionalErrors === USE_STATE_VALUE ? this._state.core.additionalErrors : additionalErrors;
-        this.updateCore(
-            Actions.updateCore(newData, newSchema, newUischema, {ajv: newAjv, validationMode: newValidationMode, additionalErrors: newAdditionalErrors})
-        );
-    }
+  refresh(): void {
+    this.updateSubject();
+  }
 
-    private updateSubject(): void {
-        this.state.next({ jsonforms: this._state });
-    }
+  updateCoreState(
+    data: any | typeof USE_STATE_VALUE,
+    schema: JsonSchema | typeof USE_STATE_VALUE,
+    uischema: UISchemaElement | typeof USE_STATE_VALUE,
+    ajv: Ajv | typeof USE_STATE_VALUE,
+    validationMode: ValidationMode | typeof USE_STATE_VALUE,
+    additionalErrors: ErrorObject[] | typeof USE_STATE_VALUE
+  ): void {
+    const newData = data === USE_STATE_VALUE ? this._state.core.data : data;
+    const newSchema =
+      schema === USE_STATE_VALUE
+        ? this._state.core.schema
+        : schema ?? generateJsonSchema(newData);
+    const newUischema =
+      uischema === USE_STATE_VALUE
+        ? this._state.core.uischema
+        : uischema ?? generateDefaultUISchema(newSchema);
+    const newAjv = ajv === USE_STATE_VALUE ? this._state.core.ajv : ajv;
+    const newValidationMode =
+      validationMode === USE_STATE_VALUE
+        ? this._state.core.validationMode
+        : validationMode;
+    const newAdditionalErrors =
+      additionalErrors === USE_STATE_VALUE
+        ? this._state.core.additionalErrors
+        : additionalErrors;
+    this.updateCore(
+      Actions.updateCore(newData, newSchema, newUischema, {
+        ajv: newAjv,
+        validationMode: newValidationMode,
+        additionalErrors: newAdditionalErrors,
+      })
+    );
+  }
 
+  private updateSubject(): void {
+    this.state.next({ jsonforms: this._state });
+  }
 }
diff --git a/packages/angular/src/unknown.component.ts b/packages/angular/src/unknown.component.ts
index 10c94f05c..cb51fbe01 100644
--- a/packages/angular/src/unknown.component.ts
+++ b/packages/angular/src/unknown.component.ts
@@ -25,6 +25,6 @@
 import { Component } from '@angular/core';
 @Component({
   selector: 'unknown.renderer',
-  template: 'No applicable renderer found!'
+  template: 'No applicable renderer found!',
 })
 export class UnknownRenderer {}
diff --git a/packages/core/src/Helpers.ts b/packages/core/src/Helpers.ts
index 8c18a1eb1..e68546efa 100644
--- a/packages/core/src/Helpers.ts
+++ b/packages/core/src/Helpers.ts
@@ -34,5 +34,5 @@ export const Helpers: {
   convertToValidClassName(s: string): string;
 } = {
   createLabelDescriptionFrom,
-  convertToValidClassName
+  convertToValidClassName,
 };
diff --git a/packages/core/src/actions/actions.ts b/packages/core/src/actions/actions.ts
index ede1fb3e0..7061e51b4 100644
--- a/packages/core/src/actions/actions.ts
+++ b/packages/core/src/actions/actions.ts
@@ -55,8 +55,7 @@ export const SET_VALIDATION_MODE: 'jsonforms/SET_VALIDATION_MODE' =
 export const SET_LOCALE: 'jsonforms/SET_LOCALE' = `jsonforms/SET_LOCALE`;
 export const SET_TRANSLATOR: 'jsonforms/SET_TRANSLATOR' =
   'jsonforms/SET_TRANSLATOR';
-export const UPDATE_I18N: 'jsonforms/UPDATE_I18N' =
-  'jsonforms/UPDATE_I18N';
+export const UPDATE_I18N: 'jsonforms/UPDATE_I18N' = 'jsonforms/UPDATE_I18N';
 
 export const ADD_DEFAULT_DATA: 'jsonforms/ADD_DEFAULT_DATA' = `jsonforms/ADD_DEFAULT_DATA`;
 export const REMOVE_DEFAULT_DATA: 'jsonforms/REMOVE_DEFAULT_DATA' = `jsonforms/REMOVE_DEFAULT_DATA`;
@@ -105,8 +104,8 @@ export interface InitActionOptions {
 }
 
 export interface SetValidationModeAction {
-  type: 'jsonforms/SET_VALIDATION_MODE'
-  validationMode: ValidationMode
+  type: 'jsonforms/SET_VALIDATION_MODE';
+  validationMode: ValidationMode;
 }
 
 export const init = (
@@ -120,7 +119,7 @@ export const init = (
   schema,
   uischema:
     typeof uischema === 'object' ? uischema : generateDefaultUISchema(schema),
-  options
+  options,
 });
 
 export const updateCore = (
@@ -133,7 +132,7 @@ export const updateCore = (
   data,
   schema,
   uischema,
-  options
+  options,
 });
 
 export interface RegisterDefaultDataAction {
@@ -145,7 +144,7 @@ export interface RegisterDefaultDataAction {
 export const registerDefaultData = (schemaPath: string, data: any) => ({
   type: ADD_DEFAULT_DATA,
   schemaPath,
-  data
+  data,
 });
 
 export interface UnregisterDefaultDataAction {
@@ -155,7 +154,7 @@ export interface UnregisterDefaultDataAction {
 
 export const unregisterDefaultData = (schemaPath: string) => ({
   type: REMOVE_DEFAULT_DATA,
-  schemaPath
+  schemaPath,
 });
 
 export interface SetAjvAction {
@@ -165,7 +164,7 @@ export interface SetAjvAction {
 
 export const setAjv = (ajv: AJV) => ({
   type: SET_AJV,
-  ajv
+  ajv,
 });
 
 export const update = (
@@ -174,12 +173,12 @@ export const update = (
 ): UpdateAction => ({
   type: UPDATE_DATA,
   path,
-  updater
+  updater,
 });
 
 export const updateErrors = (errors: ErrorObject[]): UpdateErrorsAction => ({
   type: UPDATE_ERRORS,
-  errors
+  errors,
 });
 
 export interface AddRendererAction {
@@ -191,7 +190,7 @@ export interface AddRendererAction {
 export const registerRenderer = (tester: RankedTester, renderer: any) => ({
   type: ADD_RENDERER,
   tester,
-  renderer
+  renderer,
 });
 
 export interface AddCellRendererAction {
@@ -203,7 +202,7 @@ export interface AddCellRendererAction {
 export const registerCell = (tester: RankedTester, cell: any) => ({
   type: ADD_CELL,
   tester,
-  cell
+  cell,
 });
 
 export interface RemoveCellRendererAction {
@@ -215,7 +214,7 @@ export interface RemoveCellRendererAction {
 export const unregisterCell = (tester: RankedTester, cell: any) => ({
   type: REMOVE_CELL,
   tester,
-  cell
+  cell,
 });
 
 export interface RemoveRendererAction {
@@ -227,7 +226,7 @@ export interface RemoveRendererAction {
 export const unregisterRenderer = (tester: RankedTester, renderer: any) => ({
   type: REMOVE_RENDERER,
   tester,
-  renderer
+  renderer,
 });
 
 export interface SetConfigAction {
@@ -237,13 +236,15 @@ export interface SetConfigAction {
 
 export const setConfig = (config: any): SetConfigAction => ({
   type: SET_CONFIG,
-  config
+  config,
 });
 
-export const setValidationMode = (validationMode: ValidationMode): SetValidationModeAction => ({
+export const setValidationMode = (
+  validationMode: ValidationMode
+): SetValidationModeAction => ({
   type: SET_VALIDATION_MODE,
-  validationMode
-})
+  validationMode,
+});
 
 export type UISchemaActions = AddUISchemaAction | RemoveUISchemaAction;
 
@@ -260,7 +261,7 @@ export const registerUISchema = (
   return {
     type: ADD_UI_SCHEMA,
     tester,
-    uischema
+    uischema,
   };
 };
 
@@ -274,14 +275,14 @@ export const unregisterUISchema = (
 ): RemoveUISchemaAction => {
   return {
     type: REMOVE_UI_SCHEMA,
-    tester
+    tester,
   };
 };
 
 export type I18nActions =
   | SetLocaleAction
   | SetTranslatorAction
-  | UpdateI18nAction
+  | UpdateI18nAction;
 
 export interface SetLocaleAction {
   type: 'jsonforms/SET_LOCALE';
@@ -290,7 +291,7 @@ export interface SetLocaleAction {
 
 export const setLocale = (locale: string | undefined): SetLocaleAction => ({
   type: SET_LOCALE,
-  locale
+  locale,
 });
 
 export interface SetSchemaAction {
@@ -300,13 +301,13 @@ export interface SetSchemaAction {
 
 export const setSchema = (schema: JsonSchema): SetSchemaAction => ({
   type: SET_SCHEMA,
-  schema
+  schema,
 });
 
 export interface SetTranslatorAction {
   type: 'jsonforms/SET_TRANSLATOR';
   translator?: Translator;
-  errorTranslator?: ErrorTranslator; 
+  errorTranslator?: ErrorTranslator;
 }
 
 export const setTranslator = (
@@ -315,14 +316,14 @@ export const setTranslator = (
 ): SetTranslatorAction => ({
   type: SET_TRANSLATOR,
   translator,
-  errorTranslator
+  errorTranslator,
 });
 
 export interface UpdateI18nAction {
   type: 'jsonforms/UPDATE_I18N';
   locale: string | undefined;
   translator: Translator | undefined;
-  errorTranslator: ErrorTranslator | undefined; 
+  errorTranslator: ErrorTranslator | undefined;
 }
 
 export const updateI18n = (
@@ -333,7 +334,7 @@ export const updateI18n = (
   type: UPDATE_I18N,
   locale,
   translator,
-  errorTranslator
+  errorTranslator,
 });
 
 export interface SetUISchemaAction {
@@ -343,5 +344,5 @@ export interface SetUISchemaAction {
 
 export const setUISchema = (uischema: UISchemaElement): SetUISchemaAction => ({
   type: SET_UISCHEMA,
-  uischema
+  uischema,
 });
diff --git a/packages/core/src/configDefault.ts b/packages/core/src/configDefault.ts
index fe3eb6bc2..3761c314e 100644
--- a/packages/core/src/configDefault.ts
+++ b/packages/core/src/configDefault.ts
@@ -44,5 +44,5 @@ export const configDefault = {
   /*
    * [text] if asterisks in labels for required fields should be hidden
    */
-  hideRequiredAsterisk: false
+  hideRequiredAsterisk: false,
 };
diff --git a/packages/core/src/generators/Generate.ts b/packages/core/src/generators/Generate.ts
index 474384284..0be6af566 100644
--- a/packages/core/src/generators/Generate.ts
+++ b/packages/core/src/generators/Generate.ts
@@ -39,5 +39,5 @@ export const Generate: {
 } = {
   jsonSchema: generateJsonSchema,
   uiSchema: generateDefaultUISchema,
-  controlElement: createControlElement
+  controlElement: createControlElement,
 };
diff --git a/packages/core/src/generators/schema.ts b/packages/core/src/generators/schema.ts
index a70f5f73e..efafb87ea 100644
--- a/packages/core/src/generators/schema.ts
+++ b/packages/core/src/generators/schema.ts
@@ -36,7 +36,7 @@ const distinct = (
 ): JsonSchema4[] => {
   const known: { [property: string]: boolean } = {};
 
-  return properties.filter(item => {
+  return properties.filter((item) => {
     const discriminatorValue = discriminator(item);
     if (known.hasOwnProperty(discriminatorValue)) {
       return false;
@@ -57,7 +57,7 @@ class Gen {
     const schema: JsonSchema4 = {
       type: 'object',
       properties: props,
-      additionalProperties: this.findOption(props)(ADDITIONAL_PROPERTIES)
+      additionalProperties: this.findOption(props)(ADDITIONAL_PROPERTIES),
     };
     const required = this.findOption(props)(REQUIRED_PROPERTIES);
     if (required.length > 0) {
@@ -111,26 +111,26 @@ class Gen {
   schemaArray = (data: any[]): JsonSchema4 => {
     if (data.length > 0) {
       const allProperties: JsonSchema4[] = data.map(this.property);
-      const uniqueProperties = distinct(allProperties, prop =>
+      const uniqueProperties = distinct(allProperties, (prop) =>
         JSON.stringify(prop)
       );
       if (uniqueProperties.length === 1) {
         return {
           type: 'array',
-          items: uniqueProperties[0]
+          items: uniqueProperties[0],
         };
       } else {
         return {
           type: 'array',
           items: {
-            oneOf: uniqueProperties
-          }
+            oneOf: uniqueProperties,
+          },
         };
       }
     } else {
       return {
         type: 'array',
-        items: {}
+        items: {},
       };
     }
   };
@@ -146,26 +146,26 @@ export const generateJsonSchema = (
   instance: Object,
   options: any = {}
 ): JsonSchema4 => {
-  const findOption = (props: Properties) => (
-    optionName: string
-  ): boolean | string[] => {
-    switch (optionName) {
-      case ADDITIONAL_PROPERTIES:
-        if (options.hasOwnProperty(ADDITIONAL_PROPERTIES)) {
-          return options[ADDITIONAL_PROPERTIES];
-        }
+  const findOption =
+    (props: Properties) =>
+    (optionName: string): boolean | string[] => {
+      switch (optionName) {
+        case ADDITIONAL_PROPERTIES:
+          if (options.hasOwnProperty(ADDITIONAL_PROPERTIES)) {
+            return options[ADDITIONAL_PROPERTIES];
+          }
 
-        return true;
-      case REQUIRED_PROPERTIES:
-        if (options.hasOwnProperty(REQUIRED_PROPERTIES)) {
-          return options[REQUIRED_PROPERTIES](props);
-        }
+          return true;
+        case REQUIRED_PROPERTIES:
+          if (options.hasOwnProperty(REQUIRED_PROPERTIES)) {
+            return options[REQUIRED_PROPERTIES](props);
+          }
 
-        return Object.keys(props);
-      default:
-        return;
-    }
-  };
+          return Object.keys(props);
+        default:
+          return;
+      }
+    };
 
   const gen = new Gen(findOption);
 
diff --git a/packages/core/src/generators/uischema.ts b/packages/core/src/generators/uischema.ts
index be1164efc..336e3ab7c 100644
--- a/packages/core/src/generators/uischema.ts
+++ b/packages/core/src/generators/uischema.ts
@@ -33,7 +33,7 @@ import {
   JsonSchema,
   LabelElement,
   Layout,
-  UISchemaElement
+  UISchemaElement,
 } from '../models';
 import { deriveTypes, encode, resolveSchema } from '../util';
 
@@ -44,7 +44,7 @@ import { deriveTypes, encode, resolveSchema } from '../util';
  */
 const createLayout = (layoutType: string): Layout => ({
   type: layoutType,
-  elements: []
+  elements: [],
 });
 
 /**
@@ -52,7 +52,7 @@ const createLayout = (layoutType: string): Layout => ({
  */
 export const createControlElement = (ref: string): ControlElement => ({
   type: 'Control',
-  scope: ref
+  scope: ref,
 });
 
 /**
@@ -91,7 +91,7 @@ const addLabel = (layout: Layout, labelName: string) => {
       // add label with name
       const label: LabelElement = {
         type: 'Label',
-        text: fixedLabel
+        text: fixedLabel,
       };
       layout.elements.push(label);
     }
@@ -160,7 +160,7 @@ const generateUISchema = (
     if (!isEmpty(jsonSchema.properties)) {
       // traverse properties
       const nextRef: string = currentRef + '/properties';
-      Object.keys(jsonSchema.properties).map(propName => {
+      Object.keys(jsonSchema.properties).map((propName) => {
         let value = jsonSchema.properties[propName];
         const ref = `${nextRef}/${encode(propName)}`;
         if (value.$ref !== undefined) {
diff --git a/packages/core/src/i18n/arrayTranslations.ts b/packages/core/src/i18n/arrayTranslations.ts
index b4baabdb1..f5cfee995 100644
--- a/packages/core/src/i18n/arrayTranslations.ts
+++ b/packages/core/src/i18n/arrayTranslations.ts
@@ -1,42 +1,54 @@
 export interface ArrayDefaultTranslation {
-    key: ArrayTranslationEnum,
-    default: (variable?: string) => string
+  key: ArrayTranslationEnum;
+  default: (variable?: string) => string;
 }
 
-export enum ArrayTranslationEnum{
-    addTooltip = 'addTooltip',
-    addAriaLabel = 'addAriaLabel',
-    removeTooltip = 'removeTooltip',
-    upAriaLabel = 'upAriaLabel',
-    downAriaLabel = 'downAriaLabel',
-    noSelection = 'noSelection',
-    removeAriaLabel = 'removeAriaLabel',
-    noDataMessage = 'noDataMessage',
-    deleteDialogTitle = 'deleteDialogTitle',
-    deleteDialogMessage = 'deleteDialogMessage',
-    deleteDialogAccept = 'deleteDialogAccept',
-    deleteDialogDecline = 'deleteDialogDecline',
-    up = 'up',
-    down = 'down'
+export enum ArrayTranslationEnum {
+  addTooltip = 'addTooltip',
+  addAriaLabel = 'addAriaLabel',
+  removeTooltip = 'removeTooltip',
+  upAriaLabel = 'upAriaLabel',
+  downAriaLabel = 'downAriaLabel',
+  noSelection = 'noSelection',
+  removeAriaLabel = 'removeAriaLabel',
+  noDataMessage = 'noDataMessage',
+  deleteDialogTitle = 'deleteDialogTitle',
+  deleteDialogMessage = 'deleteDialogMessage',
+  deleteDialogAccept = 'deleteDialogAccept',
+  deleteDialogDecline = 'deleteDialogDecline',
+  up = 'up',
+  down = 'down',
 }
 
 export type ArrayTranslations = {
-    [key in ArrayTranslationEnum]?: string
-}
+  [key in ArrayTranslationEnum]?: string;
+};
 
 export const arrayDefaultTranslations: ArrayDefaultTranslation[] = [
-    {key: ArrayTranslationEnum.addTooltip, default: (input) => input?`Add to ${input}`:'Add'},
-    {key: ArrayTranslationEnum.addAriaLabel, default: (input) => input?`Add to ${input} button`:'Add button'},
-    {key: ArrayTranslationEnum.removeTooltip, default: () => 'Delete'},
-    {key: ArrayTranslationEnum.removeAriaLabel, default: () => 'Delete button'},
-    {key: ArrayTranslationEnum.upAriaLabel, default: () => `Move item up`},
-    {key: ArrayTranslationEnum.up, default: () => 'Up'},
-    {key: ArrayTranslationEnum.down, default: () => 'Down'},
-    {key: ArrayTranslationEnum.downAriaLabel, default: () => `Move item down`},
-    {key: ArrayTranslationEnum.noDataMessage, default: () => 'No data'},
-    {key: ArrayTranslationEnum.noSelection, default: () => 'No selection'},
-    {key: ArrayTranslationEnum.deleteDialogTitle, default: () => 'Confirm Deletion'},
-    {key: ArrayTranslationEnum.deleteDialogMessage, default: () => 'Are you sure you want to delete the selected entry?'},
-    {key: ArrayTranslationEnum.deleteDialogAccept, default: () => 'Yes'},
-    {key: ArrayTranslationEnum.deleteDialogDecline, default: () => 'No'}
-]
\ No newline at end of file
+  {
+    key: ArrayTranslationEnum.addTooltip,
+    default: (input) => (input ? `Add to ${input}` : 'Add'),
+  },
+  {
+    key: ArrayTranslationEnum.addAriaLabel,
+    default: (input) => (input ? `Add to ${input} button` : 'Add button'),
+  },
+  { key: ArrayTranslationEnum.removeTooltip, default: () => 'Delete' },
+  { key: ArrayTranslationEnum.removeAriaLabel, default: () => 'Delete button' },
+  { key: ArrayTranslationEnum.upAriaLabel, default: () => `Move item up` },
+  { key: ArrayTranslationEnum.up, default: () => 'Up' },
+  { key: ArrayTranslationEnum.down, default: () => 'Down' },
+  { key: ArrayTranslationEnum.downAriaLabel, default: () => `Move item down` },
+  { key: ArrayTranslationEnum.noDataMessage, default: () => 'No data' },
+  { key: ArrayTranslationEnum.noSelection, default: () => 'No selection' },
+  {
+    key: ArrayTranslationEnum.deleteDialogTitle,
+    default: () => 'Confirm Deletion',
+  },
+  {
+    key: ArrayTranslationEnum.deleteDialogMessage,
+    default: () => 'Are you sure you want to delete the selected entry?',
+  },
+  { key: ArrayTranslationEnum.deleteDialogAccept, default: () => 'Yes' },
+  { key: ArrayTranslationEnum.deleteDialogDecline, default: () => 'No' },
+];
diff --git a/packages/core/src/i18n/i18nTypes.ts b/packages/core/src/i18n/i18nTypes.ts
index f9aca1fe6..64002f393 100644
--- a/packages/core/src/i18n/i18nTypes.ts
+++ b/packages/core/src/i18n/i18nTypes.ts
@@ -2,12 +2,16 @@ import type { ErrorObject } from 'ajv';
 import type { JsonSchema, UISchemaElement } from '../models';
 
 export type Translator = {
-    (id: string, defaultMessage: string, values?: any): string;
-    (id: string, defaultMessage: undefined, values?: any): string | undefined;
-    (id: string, defaultMessage?: string, values?: any): string | undefined;
-}
+  (id: string, defaultMessage: string, values?: any): string;
+  (id: string, defaultMessage: undefined, values?: any): string | undefined;
+  (id: string, defaultMessage?: string, values?: any): string | undefined;
+};
 
-export type ErrorTranslator = (error: ErrorObject, translate: Translator, uischema?: UISchemaElement) => string;
+export type ErrorTranslator = (
+  error: ErrorObject,
+  translate: Translator,
+  uischema?: UISchemaElement
+) => string;
 
 export interface JsonFormsI18nState {
   locale?: string;
@@ -15,4 +19,4 @@ export interface JsonFormsI18nState {
   translateError?: ErrorTranslator;
 }
 
-export type i18nJsonSchema = JsonSchema & {i18n?: string};
+export type i18nJsonSchema = JsonSchema & { i18n?: string };
diff --git a/packages/core/src/i18n/i18nUtil.ts b/packages/core/src/i18n/i18nUtil.ts
index 626a0d087..26ba88941 100644
--- a/packages/core/src/i18n/i18nUtil.ts
+++ b/packages/core/src/i18n/i18nUtil.ts
@@ -3,7 +3,10 @@ import { isInternationalized, Labelable, UISchemaElement } from '../models';
 import { getControlPath } from '../reducers';
 import { formatErrorMessage } from '../util';
 import type { i18nJsonSchema, ErrorTranslator, Translator } from './i18nTypes';
-import { ArrayDefaultTranslation, ArrayTranslations } from './arrayTranslations'
+import {
+  ArrayDefaultTranslation,
+  ArrayTranslations,
+} from './arrayTranslations';
 
 export const getI18nKeyPrefixBySchema = (
   schema: i18nJsonSchema | undefined,
@@ -23,7 +26,7 @@ export const transformPathToI18nPrefix = (path: string): string => {
   return (
     path
       ?.split('.')
-      .filter(segment => !/^\d+$/.test(segment))
+      .filter((segment) => !/^\d+$/.test(segment))
       .join('.') || 'root'
   );
 };
@@ -55,7 +58,10 @@ export const addI18nKeyToPrefix = (
   return `${i18nKeyPrefix}.${key}`;
 };
 
-export const defaultTranslator: Translator = (_id: string, defaultMessage: string | undefined) => defaultMessage;
+export const defaultTranslator: Translator = (
+  _id: string,
+  defaultMessage: string | undefined
+) => defaultMessage;
 
 export const defaultErrorTranslator: ErrorTranslator = (error, t, uischema) => {
   // check whether there is a special keyword message
@@ -65,13 +71,15 @@ export const defaultErrorTranslator: ErrorTranslator = (error, t, uischema) => {
     getControlPath(error),
     `error.${error.keyword}`
   );
-  const specializedKeywordMessage = t(i18nKey, undefined, { error } );
+  const specializedKeywordMessage = t(i18nKey, undefined, { error });
   if (specializedKeywordMessage !== undefined) {
     return specializedKeywordMessage;
   }
 
   // check whether there is a generic keyword message
-  const genericKeywordMessage = t(`error.${error.keyword}`, undefined, { error });
+  const genericKeywordMessage = t(`error.${error.keyword}`, undefined, {
+    error,
+  });
   if (genericKeywordMessage !== undefined) {
     return genericKeywordMessage;
   }
@@ -83,7 +91,10 @@ export const defaultErrorTranslator: ErrorTranslator = (error, t, uischema) => {
   }
 
   // rewrite required property messages (if they were not customized) as we place them next to the respective input
-  if (error.keyword === 'required' && error.message?.startsWith('must have required property')) {
+  if (
+    error.keyword === 'required' &&
+    error.message?.startsWith('must have required property')
+  ) {
     return t('is a required property', 'is a required property', { error });
   }
 
@@ -105,43 +116,60 @@ export const getCombinedErrorMessage = (
   if (errors.length > 0 && t) {
     // check whether there is a special message which overwrites all others
     const customErrorKey = getI18nKey(schema, uischema, path, 'error.custom');
-    const specializedErrorMessage = t(customErrorKey, undefined, {schema, uischema, path, errors});
+    const specializedErrorMessage = t(customErrorKey, undefined, {
+      schema,
+      uischema,
+      path,
+      errors,
+    });
     if (specializedErrorMessage !== undefined) {
       return specializedErrorMessage;
     }
   }
-  return formatErrorMessage(
-    errors.map(error => et(error, t, uischema))
-  );
+  return formatErrorMessage(errors.map((error) => et(error, t, uischema)));
 };
 
 /**
  * This can be used to internationalize the label of the given Labelable (e.g. UI Schema elements).
  * This should not be used for controls as there we have additional context in the form of the JSON Schema available.
  */
-export const deriveLabelForUISchemaElement = (uischema: Labelable<boolean>, t: Translator): string | undefined => {
+export const deriveLabelForUISchemaElement = (
+  uischema: Labelable<boolean>,
+  t: Translator
+): string | undefined => {
   if (uischema.label === false) {
     return undefined;
   }
-  if ((uischema.label === undefined || uischema.label === null || uischema.label === true) && !isInternationalized(uischema)) {
+  if (
+    (uischema.label === undefined ||
+      uischema.label === null ||
+      uischema.label === true) &&
+    !isInternationalized(uischema)
+  ) {
     return undefined;
   }
-  const stringifiedLabel = typeof uischema.label === 'string' ? uischema.label : JSON.stringify(uischema.label);
+  const stringifiedLabel =
+    typeof uischema.label === 'string'
+      ? uischema.label
+      : JSON.stringify(uischema.label);
   const i18nKeyPrefix = getI18nKeyPrefixBySchema(undefined, uischema);
-  const i18nKey = typeof i18nKeyPrefix === 'string' ? `${i18nKeyPrefix}.label` : stringifiedLabel;
+  const i18nKey =
+    typeof i18nKeyPrefix === 'string'
+      ? `${i18nKeyPrefix}.label`
+      : stringifiedLabel;
   return t(i18nKey, stringifiedLabel, { uischema: uischema });
-}
+};
 
 export const getArrayTranslations = (
   t: Translator,
-  defaultTranslations: ArrayDefaultTranslation [],
+  defaultTranslations: ArrayDefaultTranslation[],
   i18nKeyPrefix: string,
   label: string
 ): ArrayTranslations => {
-  const translations:ArrayTranslations = {};
-  defaultTranslations.forEach((controlElement)=>{
+  const translations: ArrayTranslations = {};
+  defaultTranslations.forEach((controlElement) => {
     const key = addI18nKeyToPrefix(i18nKeyPrefix, controlElement.key);
-    translations[controlElement.key]=t(key, controlElement.default(label));
-  })
+    translations[controlElement.key] = t(key, controlElement.default(label));
+  });
   return translations;
-}
+};
diff --git a/packages/core/src/i18n/index.ts b/packages/core/src/i18n/index.ts
index fb4cc88d9..987aa3611 100644
--- a/packages/core/src/i18n/index.ts
+++ b/packages/core/src/i18n/index.ts
@@ -1,3 +1,3 @@
 export * from './i18nTypes';
 export * from './i18nUtil';
-export * from './arrayTranslations'
\ No newline at end of file
+export * from './arrayTranslations';
diff --git a/packages/core/src/models/draft4.ts b/packages/core/src/models/draft4.ts
index 5d165f24e..7612ed741 100644
--- a/packages/core/src/models/draft4.ts
+++ b/packages/core/src/models/draft4.ts
@@ -31,14 +31,14 @@ export const Draft4 = {
     schemaArray: {
       type: 'array',
       minItems: 1,
-      items: { $ref: '#' }
+      items: { $ref: '#' },
     },
     positiveInteger: {
       type: 'integer',
-      minimum: 0
+      minimum: 0,
     },
     positiveIntegerDefault0: {
-      allOf: [{ $ref: '#/definitions/positiveInteger' }, { default: 0 }]
+      allOf: [{ $ref: '#/definitions/positiveInteger' }, { default: 0 }],
     },
     simpleTypes: {
       enum: [
@@ -48,104 +48,104 @@ export const Draft4 = {
         'null',
         'number',
         'object',
-        'string'
-      ]
+        'string',
+      ],
     },
     stringArray: {
       type: 'array',
       items: { type: 'string' },
       minItems: 1,
-      uniqueItems: true
-    }
+      uniqueItems: true,
+    },
   },
   type: 'object',
   properties: {
     id: {
       type: 'string',
-      format: 'uri'
+      format: 'uri',
     },
     $schema: {
       type: 'string',
-      format: 'uri'
+      format: 'uri',
     },
     title: {
-      type: 'string'
+      type: 'string',
     },
     description: {
-      type: 'string'
+      type: 'string',
     },
     default: {},
     multipleOf: {
       type: 'number',
       minimum: 0,
-      exclusiveMinimum: true
+      exclusiveMinimum: true,
     },
     maximum: {
-      type: 'number'
+      type: 'number',
     },
     exclusiveMaximum: {
       type: 'boolean',
-      default: false
+      default: false,
     },
     minimum: {
-      type: 'number'
+      type: 'number',
     },
     exclusiveMinimum: {
       type: 'boolean',
-      default: false
+      default: false,
     },
     maxLength: { $ref: '#/definitions/positiveInteger' },
     minLength: { $ref: '#/definitions/positiveIntegerDefault0' },
     pattern: {
       type: 'string',
-      format: 'regex'
+      format: 'regex',
     },
     additionalItems: {
       anyOf: [{ type: 'boolean' }, { $ref: '#' }],
-      default: {}
+      default: {},
     },
     items: {
       anyOf: [{ $ref: '#' }, { $ref: '#/definitions/schemaArray' }],
-      default: {}
+      default: {},
     },
     maxItems: { $ref: '#/definitions/positiveInteger' },
     minItems: { $ref: '#/definitions/positiveIntegerDefault0' },
     uniqueItems: {
       type: 'boolean',
-      default: false
+      default: false,
     },
     maxProperties: { $ref: '#/definitions/positiveInteger' },
     minProperties: { $ref: '#/definitions/positiveIntegerDefault0' },
     required: { $ref: '#/definitions/stringArray' },
     additionalProperties: {
       anyOf: [{ type: 'boolean' }, { $ref: '#' }],
-      default: {}
+      default: {},
     },
     definitions: {
       type: 'object',
       additionalProperties: { $ref: '#' },
-      default: {}
+      default: {},
     },
     properties: {
       type: 'object',
       additionalProperties: { $ref: '#' },
-      default: {}
+      default: {},
     },
     patternProperties: {
       type: 'object',
       additionalProperties: { $ref: '#' },
-      default: {}
+      default: {},
     },
     dependencies: {
       type: 'object',
       additionalProperties: {
-        anyOf: [{ $ref: '#' }, { $ref: '#/definitions/stringArray' }]
-      }
+        anyOf: [{ $ref: '#' }, { $ref: '#/definitions/stringArray' }],
+      },
     },
     enum: {
       type: 'array',
       minItems: 1,
-      uniqueItems: true
+      uniqueItems: true,
     },
     type: {
       anyOf: [
@@ -154,18 +154,18 @@ export const Draft4 = {
           type: 'array',
           items: { $ref: '#/definitions/simpleTypes' },
           minItems: 1,
-          uniqueItems: true
-        }
-      ]
+          uniqueItems: true,
+        },
+      ],
     },
     allOf: { $ref: '#/definitions/schemaArray' },
     anyOf: { $ref: '#/definitions/schemaArray' },
     oneOf: { $ref: '#/definitions/schemaArray' },
-    not: { $ref: '#' }
+    not: { $ref: '#' },
   },
   dependencies: {
     exclusiveMaximum: ['maximum'],
-    exclusiveMinimum: ['minimum']
+    exclusiveMinimum: ['minimum'],
   },
-  default: {}
+  default: {},
 };
diff --git a/packages/core/src/models/uischema.ts b/packages/core/src/models/uischema.ts
index 09ba7b605..bde29ba2e 100644
--- a/packages/core/src/models/uischema.ts
+++ b/packages/core/src/models/uischema.ts
@@ -54,7 +54,7 @@ export interface Labelable<T = string> {
   /**
    * Label for UI schema element.
    */
-  label?: string|T;
+  label?: string | T;
 }
 
 /**
@@ -108,7 +108,7 @@ export enum RuleEffect {
   /**
    * Effect that disables the associated element.
    */
-  DISABLE = 'DISABLE'
+  DISABLE = 'DISABLE',
 }
 
 /**
@@ -240,7 +240,11 @@ export interface LabelElement extends UISchemaElement, Internationalizable {
  * A control element. The scope property of the control determines
  * to which part of the schema the control should be bound.
  */
-export interface ControlElement extends UISchemaElement, Scoped, Labelable<string | boolean | LabelDescription>, Internationalizable {
+export interface ControlElement
+  extends UISchemaElement,
+    Scoped,
+    Labelable<string | boolean | LabelDescription>,
+    Internationalizable {
   type: 'Control';
 }
 
@@ -256,7 +260,10 @@ export interface Category extends Layout, Labeled, Internationalizable {
  * A child element may either be itself a Categorization or a Category, hence
  * the categorization element can be used to represent recursive structures like trees.
  */
-export interface Categorization extends UISchemaElement, Labeled, Internationalizable {
+export interface Categorization
+  extends UISchemaElement,
+    Labeled,
+    Internationalizable {
   type: 'Categorization';
   /**
    * The child elements of this categorization which are either of type
@@ -265,8 +272,12 @@ export interface Categorization extends UISchemaElement, Labeled, Internationali
   elements: (Category | Categorization)[];
 }
 
-export const isInternationalized = (element: unknown): element is Required<Internationalizable> =>
-  typeof element === 'object' && element !== null && typeof (element as Internationalizable).i18n === 'string';
+export const isInternationalized = (
+  element: unknown
+): element is Required<Internationalizable> =>
+  typeof element === 'object' &&
+  element !== null &&
+  typeof (element as Internationalizable).i18n === 'string';
 
 export const isGroup = (layout: Layout): layout is GroupLayout =>
   layout.type === 'Group';
diff --git a/packages/core/src/reducers/cells.ts b/packages/core/src/reducers/cells.ts
index 01d033663..9e9119686 100644
--- a/packages/core/src/reducers/cells.ts
+++ b/packages/core/src/reducers/cells.ts
@@ -28,28 +28,29 @@ import {
   ADD_CELL,
   AddCellRendererAction,
   REMOVE_CELL,
-  RemoveCellRendererAction
+  RemoveCellRendererAction,
 } from '../actions';
 import type { Reducer } from '../util';
 
 type ValidCellReducerActions = AddCellRendererAction | RemoveCellRendererAction;
 
-export type JsonFormsCellRendererRegistryState = JsonFormsCellRendererRegistryEntry[];
+export type JsonFormsCellRendererRegistryState =
+  JsonFormsCellRendererRegistryEntry[];
 
 export interface JsonFormsCellRendererRegistryEntry {
   tester: RankedTester;
   cell: any;
 }
 
-export const cellReducer: Reducer<JsonFormsCellRendererRegistryState, ValidCellReducerActions> = (
-  state = [],
-  { type, tester, cell }
-) => {
+export const cellReducer: Reducer<
+  JsonFormsCellRendererRegistryState,
+  ValidCellReducerActions
+> = (state = [], { type, tester, cell }) => {
   switch (type) {
     case ADD_CELL:
       return state.concat([{ tester, cell }]);
     case REMOVE_CELL:
-      return state.filter(t => t.tester !== tester);
+      return state.filter((t) => t.tester !== tester);
     default:
       return state;
   }
diff --git a/packages/core/src/reducers/core.ts b/packages/core/src/reducers/core.ts
index a219d33c1..0459889bb 100644
--- a/packages/core/src/reducers/core.ts
+++ b/packages/core/src/reducers/core.ts
@@ -43,12 +43,15 @@ import {
   UPDATE_DATA,
   UPDATE_ERRORS,
   UPDATE_CORE,
-  UpdateCoreAction
+  UpdateCoreAction,
 } from '../actions';
 import { createAjv, Reducer } from '../util';
 import type { JsonSchema, UISchemaElement } from '../models';
 
-export const validate = (validator: ValidateFunction | undefined, data: any): ErrorObject[] => {
+export const validate = (
+  validator: ValidateFunction | undefined,
+  data: any
+): ErrorObject[] => {
   if (validator === undefined) {
     return [];
   }
@@ -59,7 +62,10 @@ export const validate = (validator: ValidateFunction | undefined, data: any): Er
   return validator.errors;
 };
 
-export type ValidationMode = 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation';
+export type ValidationMode =
+  | 'ValidateAndShow'
+  | 'ValidateAndHide'
+  | 'NoValidation';
 
 export interface JsonFormsCore {
   data: any;
@@ -80,7 +86,7 @@ const initState: JsonFormsCore = {
   validator: undefined,
   ajv: undefined,
   validationMode: 'ValidateAndShow',
-  additionalErrors: []
+  additionalErrors: [],
 };
 
 const reuseAjvForSchema = (ajv: Ajv, schema: JsonSchema): Ajv => {
@@ -90,14 +96,15 @@ const reuseAjvForSchema = (ajv: Ajv, schema: JsonSchema): Ajv => {
   return ajv;
 };
 
-const getOrCreateAjv = (state: JsonFormsCore, action?: InitAction | UpdateCoreAction): Ajv => {
+const getOrCreateAjv = (
+  state: JsonFormsCore,
+  action?: InitAction | UpdateCoreAction
+): Ajv => {
   if (action) {
     if (hasAjvOption(action.options)) {
       // options object with ajv
       return action.options.ajv;
-    } else if (
-      action.options !== undefined
-    ) {
+    } else if (action.options !== undefined) {
       // it is not an option object => should be ajv itself => check for compile function
       if (isFunction(action.options.compile)) {
         return action.options;
@@ -136,7 +143,9 @@ const hasValidationModeOption = (option: any): option is InitActionOptions => {
   return false;
 };
 
-const hasAdditionalErrorsOption = (option: any): option is InitActionOptions => {
+const hasAdditionalErrorsOption = (
+  option: any
+): option is InitActionOptions => {
   if (option) {
     return option.additionalErrors !== undefined;
   }
@@ -162,7 +171,10 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
       const thisAjv = getOrCreateAjv(state, action);
 
       const validationMode = getValidationMode(state, action);
-      const v = validationMode === 'NoValidation' ? undefined : thisAjv.compile(action.schema);
+      const v =
+        validationMode === 'NoValidation'
+          ? undefined
+          : thisAjv.compile(action.schema);
       const e = validate(v, action.data);
       const additionalErrors = getAdditionalErrors(state, action);
 
@@ -207,7 +219,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         state.errors !== errors ||
         state.validator !== validator ||
         state.validationMode !== validationMode ||
-        state.additionalErrors !== additionalErrors
+        state.additionalErrors !== additionalErrors;
       return stateChanged
         ? {
             ...state,
@@ -218,22 +230,26 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
             errors: isEqual(errors, state.errors) ? state.errors : errors,
             validator: validator,
             validationMode: validationMode,
-            additionalErrors
+            additionalErrors,
           }
         : state;
     }
     case SET_AJV: {
       const currentAjv = action.ajv;
-      const validator = state.validationMode === 'NoValidation' ? undefined : currentAjv.compile(state.schema);
+      const validator =
+        state.validationMode === 'NoValidation'
+          ? undefined
+          : currentAjv.compile(state.schema);
       const errors = validate(validator, state.data);
       return {
         ...state,
         validator,
-        errors
+        errors,
       };
     }
     case SET_SCHEMA: {
-      const needsNewValidator = action.schema && state.ajv && state.validationMode !== 'NoValidation';
+      const needsNewValidator =
+        action.schema && state.ajv && state.validationMode !== 'NoValidation';
       const v = needsNewValidator
         ? reuseAjvForSchema(state.ajv, action.schema).compile(action.schema)
         : state.validator;
@@ -242,13 +258,13 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         ...state,
         validator: v,
         schema: action.schema,
-        errors
+        errors,
       };
     }
     case SET_UISCHEMA: {
       return {
         ...state,
-        uischema: action.uischema
+        uischema: action.uischema,
       };
     }
     case UPDATE_DATA: {
@@ -261,7 +277,7 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         return {
           ...state,
           data: result,
-          errors
+          errors,
         };
       } else {
         const oldData: any = get(state.data, action.path);
@@ -275,14 +291,14 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         return {
           ...state,
           data: newState,
-          errors
+          errors,
         };
       }
     }
     case UPDATE_ERRORS: {
       return {
         ...state,
-        errors: action.errors
+        errors: action.errors,
       };
     }
     case SET_VALIDATION_MODE: {
@@ -294,22 +310,24 @@ export const coreReducer: Reducer<JsonFormsCore, CoreActions> = (
         return {
           ...state,
           errors,
-          validationMode: action.validationMode
+          validationMode: action.validationMode,
         };
       }
       if (state.validationMode === 'NoValidation') {
-        const validator = reuseAjvForSchema(state.ajv, state.schema).compile(state.schema);
+        const validator = reuseAjvForSchema(state.ajv, state.schema).compile(
+          state.schema
+        );
         const errors = validate(validator, state.data);
         return {
           ...state,
           validator,
           errors,
-          validationMode: action.validationMode
+          validationMode: action.validationMode,
         };
       }
       return {
         ...state,
-        validationMode: action.validationMode
+        validationMode: action.validationMode,
       };
     }
     default:
@@ -341,62 +359,67 @@ export const getControlPath = (error: ErrorObject) => {
     return dataPath.replace(/\//g, '.').substr(1);
   }
   // dataPath was renamed to instancePath in AJV v8
-  var controlPath: string = error.instancePath;
+  let controlPath: string = error.instancePath;
 
   // change '/' chars to '.'
   controlPath = controlPath.replace(/\//g, '.');
-  
+
   const invalidProperty = getInvalidProperty(error);
   if (invalidProperty !== undefined && !controlPath.endsWith(invalidProperty)) {
     controlPath = `${controlPath}.${invalidProperty}`;
   }
-  
+
   // remove '.' chars at the beginning of paths
   controlPath = controlPath.replace(/^./, '');
   return controlPath;
-}
+};
 
-export const errorsAt = (
-  instancePath: string,
-  schema: JsonSchema,
-  matchPath: (path: string) => boolean
-) => (errors: ErrorObject[]): ErrorObject[] => {
-  // Get data paths of oneOf and anyOf errors to later determine whether an error occurred inside a subschema of oneOf or anyOf.
-  const combinatorPaths = filter(
-    errors,
-    error => error.keyword === 'oneOf' || error.keyword === 'anyOf'
-    ).map(error => getControlPath(error));
-    
-    return filter(errors, error => {
+export const errorsAt =
+  (
+    instancePath: string,
+    schema: JsonSchema,
+    matchPath: (path: string) => boolean
+  ) =>
+  (errors: ErrorObject[]): ErrorObject[] => {
+    // Get data paths of oneOf and anyOf errors to later determine whether an error occurred inside a subschema of oneOf or anyOf.
+    const combinatorPaths = filter(
+      errors,
+      (error) => error.keyword === 'oneOf' || error.keyword === 'anyOf'
+    ).map((error) => getControlPath(error));
+
+    return filter(errors, (error) => {
       // Filter errors that match any keyword that we don't want to show in the UI
       if (filteredErrorKeywords.indexOf(error.keyword) !== -1) {
         return false;
       }
-    const controlPath = getControlPath(error);
-    let result = matchPath(controlPath);
-    // In anyOf and oneOf blocks with "primitive" (i.e. string, number etc.) or array subschemas,
-    // we want to make sure that errors are only shown for the correct subschema.
-    // Therefore, we compare the error's parent schema with the property's schema.
-    // In the primitive case the error's data path is the same for all subschemas:
-    // It directly points to the property defining the anyOf/oneOf.
-    // The same holds true for errors on the array level (e.g. min item amount).
-    // In contrast, this comparison must not be done for errors whose parent schema defines an object
-    // because the parent schema can never match the property schema (e.g. for 'required' checks).
-    const parentSchema: JsonSchema | undefined = error.parentSchema;
-    if (result && !isObjectSchema(parentSchema)
-      && combinatorPaths.findIndex(p => instancePath.startsWith(p)) !== -1) {
-      result = result && isEqual(parentSchema, schema);
-    }
-    return result;
-  });
-};
+      const controlPath = getControlPath(error);
+      let result = matchPath(controlPath);
+      // In anyOf and oneOf blocks with "primitive" (i.e. string, number etc.) or array subschemas,
+      // we want to make sure that errors are only shown for the correct subschema.
+      // Therefore, we compare the error's parent schema with the property's schema.
+      // In the primitive case the error's data path is the same for all subschemas:
+      // It directly points to the property defining the anyOf/oneOf.
+      // The same holds true for errors on the array level (e.g. min item amount).
+      // In contrast, this comparison must not be done for errors whose parent schema defines an object
+      // because the parent schema can never match the property schema (e.g. for 'required' checks).
+      const parentSchema: JsonSchema | undefined = error.parentSchema;
+      if (
+        result &&
+        !isObjectSchema(parentSchema) &&
+        combinatorPaths.findIndex((p) => instancePath.startsWith(p)) !== -1
+      ) {
+        result = result && isEqual(parentSchema, schema);
+      }
+      return result;
+    });
+  };
 
 /**
  * @returns true if the schema describes an object.
  */
 const isObjectSchema = (schema?: JsonSchema): boolean => {
   return schema?.type === 'object' || !!schema?.properties;
-}
+};
 
 /**
  * The error-type of an AJV error is defined by its `keyword` property.
@@ -409,19 +432,36 @@ const isObjectSchema = (schema?: JsonSchema): boolean => {
  * - anyOf: Indicates that an anyOf definition itself is not valid because none of its subschemas matches.
  * - oneOf: Indicates that an oneOf definition itself is not valid because not exactly one of its subschemas matches.
  */
-const filteredErrorKeywords = ['additionalProperties', 'allOf', 'anyOf', 'oneOf'];
-
-const getErrorsAt = (
-  instancePath: string,
-  schema: JsonSchema,
-  matchPath: (path: string) => boolean
-) => (state: JsonFormsCore): ErrorObject[] => {
-  const errors = state.errors ?? [];
-  const additionalErrors = state.additionalErrors ?? [];
-  return errorsAt(instancePath, schema, matchPath)(state.validationMode === 'ValidateAndHide' ? additionalErrors : [...errors, ...additionalErrors]);
-}
+const filteredErrorKeywords = [
+  'additionalProperties',
+  'allOf',
+  'anyOf',
+  'oneOf',
+];
+
+const getErrorsAt =
+  (
+    instancePath: string,
+    schema: JsonSchema,
+    matchPath: (path: string) => boolean
+  ) =>
+  (state: JsonFormsCore): ErrorObject[] => {
+    const errors = state.errors ?? [];
+    const additionalErrors = state.additionalErrors ?? [];
+    return errorsAt(
+      instancePath,
+      schema,
+      matchPath
+    )(
+      state.validationMode === 'ValidateAndHide'
+        ? additionalErrors
+        : [...errors, ...additionalErrors]
+    );
+  };
 
 export const errorAt = (instancePath: string, schema: JsonSchema) =>
-  getErrorsAt(instancePath, schema, path => path === instancePath);
+  getErrorsAt(instancePath, schema, (path) => path === instancePath);
 export const subErrorsAt = (instancePath: string, schema: JsonSchema) =>
-  getErrorsAt(instancePath, schema, path => path.startsWith(instancePath + '.'));
+  getErrorsAt(instancePath, schema, (path) =>
+    path.startsWith(instancePath + '.')
+  );
diff --git a/packages/core/src/reducers/default-data.ts b/packages/core/src/reducers/default-data.ts
index 0ebc5982a..9e592788a 100644
--- a/packages/core/src/reducers/default-data.ts
+++ b/packages/core/src/reducers/default-data.ts
@@ -27,7 +27,7 @@ import {
   ADD_DEFAULT_DATA,
   RegisterDefaultDataAction,
   REMOVE_DEFAULT_DATA,
-  UnregisterDefaultDataAction
+  UnregisterDefaultDataAction,
 } from '../actions';
 import type { Reducer } from '../util';
 
@@ -40,17 +40,17 @@ type ValidDefaultDataActions =
   | RegisterDefaultDataAction
   | UnregisterDefaultDataAction;
 
-export const defaultDataReducer: Reducer<JsonFormsDefaultDataRegistryEntry[], ValidDefaultDataActions> = (
-  state = [],
-  action
-) => {
+export const defaultDataReducer: Reducer<
+  JsonFormsDefaultDataRegistryEntry[],
+  ValidDefaultDataActions
+> = (state = [], action) => {
   switch (action.type) {
     case ADD_DEFAULT_DATA:
       return state.concat([
-        { schemaPath: action.schemaPath, data: action.data }
+        { schemaPath: action.schemaPath, data: action.data },
       ]);
     case REMOVE_DEFAULT_DATA:
-      return state.filter(t => t.schemaPath !== action.schemaPath);
+      return state.filter((t) => t.schemaPath !== action.schemaPath);
     default:
       return state;
   }
diff --git a/packages/core/src/reducers/i18n.ts b/packages/core/src/reducers/i18n.ts
index 2fd8113a7..acb64de09 100644
--- a/packages/core/src/reducers/i18n.ts
+++ b/packages/core/src/reducers/i18n.ts
@@ -23,17 +23,29 @@
   THE SOFTWARE.
 */
 
-import { defaultErrorTranslator, defaultTranslator, JsonFormsI18nState } from '../i18n';
-import { I18nActions, SET_LOCALE, SET_TRANSLATOR, UPDATE_I18N } from '../actions';
+import {
+  defaultErrorTranslator,
+  defaultTranslator,
+  JsonFormsI18nState,
+} from '../i18n';
+import {
+  I18nActions,
+  SET_LOCALE,
+  SET_TRANSLATOR,
+  UPDATE_I18N,
+} from '../actions';
 import type { Reducer } from '../util';
 
 export const defaultJsonFormsI18nState: Required<JsonFormsI18nState> = {
   locale: 'en',
   translate: defaultTranslator,
-  translateError: defaultErrorTranslator
+  translateError: defaultErrorTranslator,
 };
 
-export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (state = defaultJsonFormsI18nState, action) => {
+export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (
+  state = defaultJsonFormsI18nState,
+  action
+) => {
   switch (action.type) {
     case UPDATE_I18N: {
       const locale = action.locale ?? defaultJsonFormsI18nState.locale;
@@ -51,7 +63,7 @@ export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (state = de
           ...state,
           locale,
           translate,
-          translateError
+          translateError,
         };
       }
       return state;
@@ -60,12 +72,12 @@ export const i18nReducer: Reducer<JsonFormsI18nState, I18nActions> = (state = de
       return {
         ...state,
         translate: action.translator ?? defaultTranslator,
-        translateError: action.errorTranslator ?? defaultErrorTranslator
+        translateError: action.errorTranslator ?? defaultErrorTranslator,
       };
     case SET_LOCALE:
       return {
         ...state,
-        locale: action.locale ?? navigator.languages[0]
+        locale: action.locale ?? navigator.languages[0],
       };
     default:
       return state;
@@ -84,11 +96,11 @@ export const fetchTranslator = (state?: JsonFormsI18nState) => {
     return defaultTranslator;
   }
   return state.translate;
-}
+};
 
 export const fetchErrorTranslator = (state?: JsonFormsI18nState) => {
   if (state === undefined) {
     return defaultErrorTranslator;
   }
   return state.translateError;
-}
+};
diff --git a/packages/core/src/reducers/reducers.ts b/packages/core/src/reducers/reducers.ts
index 5df467ef9..33b2508ad 100644
--- a/packages/core/src/reducers/reducers.ts
+++ b/packages/core/src/reducers/reducers.ts
@@ -24,24 +24,13 @@
 */
 
 import type { ControlElement, UISchemaElement } from '../models';
-import {
-  coreReducer,
-  errorAt,
-  subErrorsAt,
-} from './core';
+import { coreReducer, errorAt, subErrorsAt } from './core';
 import { defaultDataReducer } from './default-data';
 import { rendererReducer } from './renderers';
 import type { JsonFormsState } from '../store';
 import type { JsonFormsUISchemaRegistryEntry } from './uischemas';
-import {
-  findMatchingUISchema,
-  uischemaRegistryReducer,
-} from './uischemas';
-import {
-  fetchErrorTranslator,
-  fetchLocale,
-  i18nReducer,
-} from './i18n';
+import { findMatchingUISchema, uischemaRegistryReducer } from './uischemas';
+import { fetchErrorTranslator, fetchLocale, i18nReducer } from './i18n';
 
 import { Generate } from '../generators';
 import type { JsonSchema } from '../models/jsonSchema';
@@ -84,7 +73,7 @@ export const findUISchema = (
     if (typeof control.options.detail === 'string') {
       if (control.options.detail.toUpperCase() === 'GENERATE') {
         //use fallback generation function
-        if(typeof fallback === "function"){
+        if (typeof fallback === 'function') {
           return fallback();
         }
         // force generation of uischema
@@ -104,7 +93,7 @@ export const findUISchema = (
   const uiSchema = findMatchingUISchema(uischemas)(schema, schemaPath, path);
   if (uiSchema === undefined) {
     //use fallback generation function
-    if(typeof fallback === 'function'){
+    if (typeof fallback === 'function') {
       return fallback();
     }
     return Generate.uiSchema(schema, fallback, '#', rootSchema);
@@ -112,25 +101,26 @@ export const findUISchema = (
   return uiSchema;
 };
 
-export const getErrorAt = (instancePath: string, schema: JsonSchema) => (
-  state: JsonFormsState
-) => {
-  return errorAt(instancePath, schema)(state.jsonforms.core);
-};
+export const getErrorAt =
+  (instancePath: string, schema: JsonSchema) => (state: JsonFormsState) => {
+    return errorAt(instancePath, schema)(state.jsonforms.core);
+  };
 
-export const getSubErrorsAt = (instancePath: string, schema: JsonSchema) => (
-  state: JsonFormsState
-) => subErrorsAt(instancePath, schema)(state.jsonforms.core);
+export const getSubErrorsAt =
+  (instancePath: string, schema: JsonSchema) => (state: JsonFormsState) =>
+    subErrorsAt(instancePath, schema)(state.jsonforms.core);
 
 export const getConfig = (state: JsonFormsState) => state.jsonforms.config;
 
 export const getLocale = (state: JsonFormsState) =>
   fetchLocale(get(state, 'jsonforms.i18n'));
 
-export const getTranslator = () => (
-  state: JsonFormsState
-): Translator => fetchTranslator(get(state, 'jsonforms.i18n'));
+export const getTranslator =
+  () =>
+  (state: JsonFormsState): Translator =>
+    fetchTranslator(get(state, 'jsonforms.i18n'));
 
-export const getErrorTranslator = () => (
-  state: JsonFormsState
-): ErrorTranslator => fetchErrorTranslator(get(state, 'jsonforms.i18n'));
+export const getErrorTranslator =
+  () =>
+  (state: JsonFormsState): ErrorTranslator =>
+    fetchErrorTranslator(get(state, 'jsonforms.i18n'));
diff --git a/packages/core/src/reducers/renderers.ts b/packages/core/src/reducers/renderers.ts
index 923b56924..c9e595ff4 100644
--- a/packages/core/src/reducers/renderers.ts
+++ b/packages/core/src/reducers/renderers.ts
@@ -28,7 +28,7 @@ import {
   ADD_RENDERER,
   AddRendererAction,
   REMOVE_RENDERER,
-  RemoveRendererAction
+  RemoveRendererAction,
 } from '../actions';
 import type { Reducer } from '../util';
 
@@ -39,17 +39,17 @@ export interface JsonFormsRendererRegistryEntry {
 
 type ValidRendererReducerActions = AddRendererAction | RemoveRendererAction;
 
-export const rendererReducer: Reducer<JsonFormsRendererRegistryEntry[], ValidRendererReducerActions> = (
-  state = [],
-  action
-) => {
+export const rendererReducer: Reducer<
+  JsonFormsRendererRegistryEntry[],
+  ValidRendererReducerActions
+> = (state = [], action) => {
   switch (action.type) {
     case ADD_RENDERER:
       return state.concat([
-        { tester: action.tester, renderer: action.renderer }
+        { tester: action.tester, renderer: action.renderer },
       ]);
     case REMOVE_RENDERER:
-      return state.filter(t => t.tester !== action.tester);
+      return state.filter((t) => t.tester !== action.tester);
     default:
       return state;
   }
diff --git a/packages/core/src/reducers/selectors.ts b/packages/core/src/reducers/selectors.ts
index ee4d11c26..53f724b36 100644
--- a/packages/core/src/reducers/selectors.ts
+++ b/packages/core/src/reducers/selectors.ts
@@ -35,7 +35,7 @@ import {
 } from './core';
 import {
   extractDefaultData,
-  JsonFormsDefaultDataRegistryEntry
+  JsonFormsDefaultDataRegistryEntry,
 } from './default-data';
 import type { JsonFormsRendererRegistryEntry } from './renderers';
 import type { JsonFormsCellRendererRegistryEntry } from './cells';
@@ -47,9 +47,8 @@ export const getSchema = (state: JsonFormsState): JsonSchema =>
   extractSchema(get(state, 'jsonforms.core'));
 export const getUiSchema = (state: JsonFormsState): UISchemaElement =>
   extractUiSchema(get(state, 'jsonforms.core'));
-export const getAjv = (
-  state: JsonFormsState
-): Ajv => extractAjv(get(state, 'jsonforms.core'));
+export const getAjv = (state: JsonFormsState): Ajv =>
+  extractAjv(get(state, 'jsonforms.core'));
 export const getDefaultData = (
   state: JsonFormsState
 ): JsonFormsDefaultDataRegistryEntry[] =>
@@ -62,4 +61,4 @@ export const getCells = (
 ): JsonFormsCellRendererRegistryEntry[] => get(state, 'jsonforms.cells');
 export const getUISchemas = (
   state: JsonFormsState
-): JsonFormsUISchemaRegistryEntry[] => get(state, 'jsonforms.uischemas')
+): JsonFormsUISchemaRegistryEntry[] => get(state, 'jsonforms.uischemas');
diff --git a/packages/core/src/reducers/uischemas.ts b/packages/core/src/reducers/uischemas.ts
index ae2de0906..37c3f2c8c 100644
--- a/packages/core/src/reducers/uischemas.ts
+++ b/packages/core/src/reducers/uischemas.ts
@@ -41,10 +41,10 @@ export interface JsonFormsUISchemaRegistryEntry {
   uischema: UISchemaElement;
 }
 
-export const uischemaRegistryReducer: Reducer<JsonFormsUISchemaRegistryEntry[], UISchemaActions> = (
-  state = [],
-  action
-) => {
+export const uischemaRegistryReducer: Reducer<
+  JsonFormsUISchemaRegistryEntry[],
+  UISchemaActions
+> = (state = [], action) => {
   switch (action.type) {
     case ADD_UI_SCHEMA:
       return state
@@ -52,28 +52,28 @@ export const uischemaRegistryReducer: Reducer<JsonFormsUISchemaRegistryEntry[],
         .concat({ tester: action.tester, uischema: action.uischema });
     case REMOVE_UI_SCHEMA:
       const copy = state.slice();
-      remove(copy, entry => entry.tester === action.tester);
+      remove(copy, (entry) => entry.tester === action.tester);
       return copy;
     default:
       return state;
   }
 };
 
-export const findMatchingUISchema = (
-  state: JsonFormsUISchemaRegistryEntry[]
-) => (
-  jsonSchema: JsonSchema,
-  schemaPath: string,
-  path: string
-): UISchemaElement => {
-  const match = maxBy(state, entry =>
-    entry.tester(jsonSchema, schemaPath, path)
-  );
-  if (
-    match !== undefined &&
-    match.tester(jsonSchema, schemaPath, path) !== NOT_APPLICABLE
-  ) {
-    return match.uischema;
-  }
-  return undefined;
-};
+export const findMatchingUISchema =
+  (state: JsonFormsUISchemaRegistryEntry[]) =>
+  (
+    jsonSchema: JsonSchema,
+    schemaPath: string,
+    path: string
+  ): UISchemaElement => {
+    const match = maxBy(state, (entry) =>
+      entry.tester(jsonSchema, schemaPath, path)
+    );
+    if (
+      match !== undefined &&
+      match.tester(jsonSchema, schemaPath, path) !== NOT_APPLICABLE
+    ) {
+      return match.uischema;
+    }
+    return undefined;
+  };
diff --git a/packages/core/src/store.ts b/packages/core/src/store.ts
index a3983d664..445c54220 100644
--- a/packages/core/src/store.ts
+++ b/packages/core/src/store.ts
@@ -28,7 +28,7 @@ import type {
   JsonFormsCore,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsRendererRegistryEntry,
-  JsonFormsUISchemaRegistryEntry
+  JsonFormsUISchemaRegistryEntry,
 } from './reducers';
 import type { JsonFormsI18nState } from './i18n';
 
diff --git a/packages/core/src/testers/testers.ts b/packages/core/src/testers/testers.ts
index a4de4455f..92dc12918 100644
--- a/packages/core/src/testers/testers.ts
+++ b/packages/core/src/testers/testers.ts
@@ -35,7 +35,7 @@ import type {
   Categorization,
   ControlElement,
   JsonSchema,
-  UISchemaElement
+  UISchemaElement,
 } from '../models';
 import { deriveTypes, hasType, resolveSchema } from '../util';
 
@@ -49,7 +49,11 @@ export const NOT_APPLICABLE = -1;
  * A tester is a function that receives an UI schema and a JSON schema and returns a boolean.
  * The rootSchema is handed over as context. Can be used to resolve references.
  */
-export type Tester = (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => boolean;
+export type Tester = (
+  uischema: UISchemaElement,
+  schema: JsonSchema,
+  context: TesterContext
+) => boolean;
 
 /**
  * A ranked tester associates a tester with a number.
@@ -83,50 +87,70 @@ export const isControl = (uischema: any): uischema is ControlElement =>
  * @param {(JsonSchema) => boolean} predicate the predicate that should be
  *        applied to the resolved sub-schema
  */
-export const schemaMatches = (
-  predicate: (schema: JsonSchema, rootSchema: JsonSchema) => boolean
-): Tester => (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext): boolean => {
-  if (isEmpty(uischema) || !isControl(uischema)) {
-    return false;
-  }
-  if (isEmpty(schema)) {
-    return false;
-  }
-  const schemaPath = uischema.scope;
-  if (isEmpty(schemaPath)) {
-    return false;
-  }
-  let currentDataSchema = schema;
-  if (hasType(schema, 'object')) {
-    currentDataSchema = resolveSchema(schema, schemaPath, context?.rootSchema);
-  }
-  if (currentDataSchema === undefined) {
-    return false;
-  }
-
-  return predicate(currentDataSchema, context?.rootSchema);
-};
+export const schemaMatches =
+  (
+    predicate: (schema: JsonSchema, rootSchema: JsonSchema) => boolean
+  ): Tester =>
+  (
+    uischema: UISchemaElement,
+    schema: JsonSchema,
+    context: TesterContext
+  ): boolean => {
+    if (isEmpty(uischema) || !isControl(uischema)) {
+      return false;
+    }
+    if (isEmpty(schema)) {
+      return false;
+    }
+    const schemaPath = uischema.scope;
+    if (isEmpty(schemaPath)) {
+      return false;
+    }
+    let currentDataSchema = schema;
+    if (hasType(schema, 'object')) {
+      currentDataSchema = resolveSchema(
+        schema,
+        schemaPath,
+        context?.rootSchema
+      );
+    }
+    if (currentDataSchema === undefined) {
+      return false;
+    }
 
-export const schemaSubPathMatches = (
-  subPath: string,
-  predicate: (schema: JsonSchema, rootSchema: JsonSchema) => boolean
-): Tester => (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext): boolean => {
-  if (isEmpty(uischema) || !isControl(uischema)) {
-    return false;
-  }
-  const schemaPath = uischema.scope;
-  let currentDataSchema: JsonSchema = schema;
-  if (hasType(schema, 'object')) {
-    currentDataSchema = resolveSchema(schema, schemaPath, context?.rootSchema);
-  }
-  currentDataSchema = get(currentDataSchema, subPath);
+    return predicate(currentDataSchema, context?.rootSchema);
+  };
+
+export const schemaSubPathMatches =
+  (
+    subPath: string,
+    predicate: (schema: JsonSchema, rootSchema: JsonSchema) => boolean
+  ): Tester =>
+  (
+    uischema: UISchemaElement,
+    schema: JsonSchema,
+    context: TesterContext
+  ): boolean => {
+    if (isEmpty(uischema) || !isControl(uischema)) {
+      return false;
+    }
+    const schemaPath = uischema.scope;
+    let currentDataSchema: JsonSchema = schema;
+    if (hasType(schema, 'object')) {
+      currentDataSchema = resolveSchema(
+        schema,
+        schemaPath,
+        context?.rootSchema
+      );
+    }
+    currentDataSchema = get(currentDataSchema, subPath);
 
-  if (currentDataSchema === undefined) {
-    return false;
-  }
+    if (currentDataSchema === undefined) {
+      return false;
+    }
 
-  return predicate(currentDataSchema, context?.rootSchema);
-};
+    return predicate(currentDataSchema, context?.rootSchema);
+  };
 
 /**
  * Only applicable for Controls.
@@ -138,7 +162,7 @@ export const schemaSubPathMatches = (
  * @param {string} expectedType the expected type of the resolved sub-schema
  */
 export const schemaTypeIs = (expectedType: string): Tester =>
-  schemaMatches(schema => !isEmpty(schema) && hasType(schema, expectedType));
+  schemaMatches((schema) => !isEmpty(schema) && hasType(schema, expectedType));
 
 /**
  * Only applicable for Controls.
@@ -151,7 +175,7 @@ export const schemaTypeIs = (expectedType: string): Tester =>
  */
 export const formatIs = (expectedFormat: string): Tester =>
   schemaMatches(
-    schema =>
+    (schema) =>
       !isEmpty(schema) &&
       schema.format === expectedFormat &&
       hasType(schema, 'string')
@@ -162,9 +186,10 @@ export const formatIs = (expectedFormat: string): Tester =>
  *
  * @param {string} expected the expected UI schema type
  */
-export const uiTypeIs = (expected: string): Tester => (
-  uischema: UISchemaElement
-): boolean => !isEmpty(uischema) && uischema.type === expected;
+export const uiTypeIs =
+  (expected: string): Tester =>
+  (uischema: UISchemaElement): boolean =>
+    !isEmpty(uischema) && uischema.type === expected;
 
 /**
  * Checks whether the given UI schema has an option with the given
@@ -174,16 +199,16 @@ export const uiTypeIs = (expected: string): Tester => (
  * @param {string} optionName the name of the option to check
  * @param {any} optionValue the expected value of the option
  */
-export const optionIs = (optionName: string, optionValue: any): Tester => (
-  uischema: UISchemaElement
-): boolean => {
-  if (isEmpty(uischema)) {
-    return false;
-  }
+export const optionIs =
+  (optionName: string, optionValue: any): Tester =>
+  (uischema: UISchemaElement): boolean => {
+    if (isEmpty(uischema)) {
+      return false;
+    }
 
-  const options = uischema.options;
-  return !isEmpty(options) && options[optionName] === optionValue;
-};
+    const options = uischema.options;
+    return !isEmpty(options) && options[optionName] === optionValue;
+  };
 
 /**
  * Only applicable for Controls.
@@ -192,15 +217,15 @@ export const optionIs = (optionName: string, optionValue: any): Tester => (
  *
  * @param {string} expected the expected ending of the reference
  */
-export const scopeEndsWith = (expected: string): Tester => (
-  uischema: UISchemaElement
-): boolean => {
-  if (isEmpty(expected) || !isControl(uischema)) {
-    return false;
-  }
+export const scopeEndsWith =
+  (expected: string): Tester =>
+  (uischema: UISchemaElement): boolean => {
+    if (isEmpty(expected) || !isControl(uischema)) {
+      return false;
+    }
 
-  return endsWith(uischema.scope, expected);
-};
+    return endsWith(uischema.scope, expected);
+  };
 
 /**
  * Only applicable for Controls.
@@ -209,38 +234,42 @@ export const scopeEndsWith = (expected: string): Tester => (
  *
  * @param {string} expected the expected ending of the reference
  */
-export const scopeEndIs = (expected: string): Tester => (
-  uischema: UISchemaElement
-): boolean => {
-  if (isEmpty(expected) || !isControl(uischema)) {
-    return false;
-  }
-  const schemaPath = uischema.scope;
+export const scopeEndIs =
+  (expected: string): Tester =>
+  (uischema: UISchemaElement): boolean => {
+    if (isEmpty(expected) || !isControl(uischema)) {
+      return false;
+    }
+    const schemaPath = uischema.scope;
 
-  return !isEmpty(schemaPath) && last(schemaPath.split('/')) === expected;
-};
+    return !isEmpty(schemaPath) && last(schemaPath.split('/')) === expected;
+  };
 
 /**
  * A tester that allow composing other testers by && them.
  *
  * @param {Array<Tester>} testers the testers to be composed
  */
-export const and = (...testers: Tester[]): Tester => (
-  uischema: UISchemaElement,
-  schema: JsonSchema,
-  context: TesterContext
-) => testers.reduce((acc, tester) => acc && tester(uischema, schema, context), true);
+export const and =
+  (...testers: Tester[]): Tester =>
+  (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) =>
+    testers.reduce(
+      (acc, tester) => acc && tester(uischema, schema, context),
+      true
+    );
 
 /**
  * A tester that allow composing other testers by || them.
  *
  * @param {Array<Tester>} testers the testers to be composed
  */
-export const or = (...testers: Tester[]): Tester => (
-  uischema: UISchemaElement,
-  schema: JsonSchema,
-  context: TesterContext
-) => testers.reduce((acc, tester) => acc || tester(uischema, schema, context), false);
+export const or =
+  (...testers: Tester[]): Tester =>
+  (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) =>
+    testers.reduce(
+      (acc, tester) => acc || tester(uischema, schema, context),
+      false
+    );
 /**
  * Create a ranked tester that will associate a number with a given tester, if the
  * latter returns true.
@@ -248,30 +277,34 @@ export const or = (...testers: Tester[]): Tester => (
  * @param {number} rank the rank to be returned in case the tester returns true
  * @param {Tester} tester a tester
  */
-export const rankWith = (rank: number, tester: Tester) => (
-  uischema: UISchemaElement,
-  schema: JsonSchema,
-  context: TesterContext
-): number => {
-  if (tester(uischema, schema, context)) {
-    return rank;
-  }
-
-  return NOT_APPLICABLE;
-};
+export const rankWith =
+  (rank: number, tester: Tester) =>
+  (
+    uischema: UISchemaElement,
+    schema: JsonSchema,
+    context: TesterContext
+  ): number => {
+    if (tester(uischema, schema, context)) {
+      return rank;
+    }
 
-export const withIncreasedRank = (by: number, rankedTester: RankedTester) => (
-  uischema: UISchemaElement,
-  schema: JsonSchema,
-  context: TesterContext
-): number => {
-  const rank = rankedTester(uischema, schema, context);
-  if (rank === NOT_APPLICABLE) {
     return NOT_APPLICABLE;
-  }
+  };
+
+export const withIncreasedRank =
+  (by: number, rankedTester: RankedTester) =>
+  (
+    uischema: UISchemaElement,
+    schema: JsonSchema,
+    context: TesterContext
+  ): number => {
+    const rank = rankedTester(uischema, schema, context);
+    if (rank === NOT_APPLICABLE) {
+      return NOT_APPLICABLE;
+    }
 
-  return rank + by;
-};
+    return rank + by;
+  };
 
 /**
  * Default tester for boolean.
@@ -287,17 +320,17 @@ export const isObjectControl = and(uiTypeIs('Control'), schemaTypeIs('object'));
 
 export const isAllOfControl = and(
   uiTypeIs('Control'),
-  schemaMatches(schema => schema.hasOwnProperty('allOf'))
+  schemaMatches((schema) => schema.hasOwnProperty('allOf'))
 );
 
 export const isAnyOfControl = and(
   uiTypeIs('Control'),
-  schemaMatches(schema => schema.hasOwnProperty('anyOf'))
+  schemaMatches((schema) => schema.hasOwnProperty('anyOf'))
 );
 
 export const isOneOfControl = and(
   uiTypeIs('Control'),
-  schemaMatches(schema => schema.hasOwnProperty('oneOf'))
+  schemaMatches((schema) => schema.hasOwnProperty('oneOf'))
 );
 
 /**
@@ -308,8 +341,8 @@ export const isOneOfControl = and(
 export const isEnumControl = and(
   uiTypeIs('Control'),
   or(
-    schemaMatches(schema => schema.hasOwnProperty('enum')),
-    schemaMatches(schema => schema.hasOwnProperty('const'))
+    schemaMatches((schema) => schema.hasOwnProperty('enum')),
+    schemaMatches((schema) => schema.hasOwnProperty('const'))
   )
 );
 
@@ -320,9 +353,10 @@ export const isEnumControl = and(
  */
 export const isOneOfEnumControl = and(
   uiTypeIs('Control'),
-  schemaMatches(schema =>
-    schema.hasOwnProperty('oneOf') &&
-    (schema.oneOf as JsonSchema[]).every(s => s.const !== undefined)
+  schemaMatches(
+    (schema) =>
+      schema.hasOwnProperty('oneOf') &&
+      (schema.oneOf as JsonSchema[]).every((s) => s.const !== undefined)
   )
 );
 
@@ -396,11 +430,15 @@ export const isDateTimeControl = and(
  */
 export const isObjectArray = and(
   schemaMatches(
-    (schema, rootSchema) => hasType(schema, 'array') && !Array.isArray(resolveSchema(schema, 'items', rootSchema)) // we don't care about tuples
+    (schema, rootSchema) =>
+      hasType(schema, 'array') &&
+      !Array.isArray(resolveSchema(schema, 'items', rootSchema)) // we don't care about tuples
   ),
   schemaSubPathMatches('items', (schema, rootSchema) => {
-    const resolvedSchema = schema.$ref ? resolveSchema(rootSchema, schema.$ref, rootSchema) : schema;
-    return hasType(resolvedSchema, 'object')
+    const resolvedSchema = schema.$ref
+      ? resolveSchema(rootSchema, schema.$ref, rootSchema)
+      : schema;
+    return hasType(resolvedSchema, 'object');
   })
 );
 
@@ -417,7 +455,11 @@ const traverse = (
   rootSchema: JsonSchema
 ): boolean => {
   if (isArray(any)) {
-    return reduce(any, (acc, el) => acc || traverse(el, pred, rootSchema), false);
+    return reduce(
+      any,
+      (acc, el) => acc || traverse(el, pred, rootSchema),
+      false
+    );
   }
 
   if (pred(any)) {
@@ -454,35 +496,43 @@ export const isObjectArrayWithNesting = (
     return false;
   }
   const schemaPath = (uischema as ControlElement).scope;
-  const resolvedSchema = resolveSchema(schema, schemaPath, context?.rootSchema ?? schema);
+  const resolvedSchema = resolveSchema(
+    schema,
+    schemaPath,
+    context?.rootSchema ?? schema
+  );
   let objectDepth = 0;
   if (resolvedSchema !== undefined && resolvedSchema.items !== undefined) {
     // check if nested arrays
     if (
-      traverse(resolvedSchema.items, val => {
-        if (val === schema) {
-          return false;
-        }
-        if (val.$ref !== undefined) {
-          return false;
-        }
-        if (val.anyOf || val.allOf) {
-          return true;
-        }
-        if(val.oneOf && !isOneOfEnumControl(uischema,val,context)){
-          return true;
-        }
-        if (hasType(val, 'object')) {
-          objectDepth++;
-          if (objectDepth === 2) {
+      traverse(
+        resolvedSchema.items,
+        (val) => {
+          if (val === schema) {
+            return false;
+          }
+          if (val.$ref !== undefined) {
+            return false;
+          }
+          if (val.anyOf || val.allOf) {
             return true;
           }
-        }
-        if (hasType(val, 'array')) {
-          return true;
-        }
-        return false;
-      }, context?.rootSchema)
+          if (val.oneOf && !isOneOfEnumControl(uischema, val, context)) {
+            return true;
+          }
+          if (hasType(val, 'object')) {
+            objectDepth++;
+            if (objectDepth === 2) {
+              return true;
+            }
+          }
+          if (hasType(val, 'array')) {
+            return true;
+          }
+          return false;
+        },
+        context?.rootSchema
+      )
     ) {
       return true;
     }
@@ -519,7 +569,9 @@ export const isPrimitiveArrayControl = and(
       !Array.isArray(resolveSchema(schema, 'items', rootSchema)) // we don't care about tuples
   ),
   schemaSubPathMatches('items', (schema, rootSchema) => {
-    const resolvedSchema = schema.$ref ? resolveSchema(rootSchema, schema.$ref, rootSchema) : schema;
+    const resolvedSchema = schema.$ref
+      ? resolveSchema(rootSchema, schema.$ref, rootSchema)
+      : schema;
     const types = deriveTypes(resolvedSchema);
     return (
       types.length === 1 &&
@@ -538,7 +590,7 @@ export const isRangeControl = and(
   uiTypeIs('Control'),
   or(schemaTypeIs('number'), schemaTypeIs('integer')),
   schemaMatches(
-    schema =>
+    (schema) =>
       schema.hasOwnProperty('maximum') &&
       schema.hasOwnProperty('minimum') &&
       schema.hasOwnProperty('default')
@@ -570,7 +622,7 @@ export const hasCategory = (categorization: Categorization): boolean => {
   }
   // all children of the categorization have to be categories
   return categorization.elements
-    .map(elem =>
+    .map((elem) =>
       isCategorization(elem) ? hasCategory(elem) : isCategory(elem)
     )
     .reduce((prev, curr) => prev && curr, true);
@@ -579,9 +631,7 @@ export const hasCategory = (categorization: Categorization): boolean => {
 export const categorizationHasCategory = (uischema: UISchemaElement) =>
   hasCategory(uischema as Categorization);
 
-export const not = (tester: Tester): Tester => (
-  uischema: UISchemaElement,
-  schema: JsonSchema,
-  context: TesterContext
-
-) => !tester(uischema, schema, context);
+export const not =
+  (tester: Tester): Tester =>
+  (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) =>
+    !tester(uischema, schema, context);
diff --git a/packages/core/src/util/cell.ts b/packages/core/src/util/cell.ts
index dac4afea9..32e194aa5 100644
--- a/packages/core/src/util/cell.ts
+++ b/packages/core/src/util/cell.ts
@@ -24,8 +24,9 @@
 */
 
 import isEmpty from 'lodash/isEmpty';
-import { getErrorTranslator, JsonFormsCellRendererRegistryEntry } from '../reducers';
 import {
+  getErrorTranslator,
+  JsonFormsCellRendererRegistryEntry,
   getAjv,
   getConfig,
   getData,
@@ -35,10 +36,7 @@ import {
 } from '../reducers';
 import type { AnyAction, Dispatch } from './type';
 import { Resolve } from './util';
-import {
-  isInherentlyEnabled,
-  isVisible,
-} from './runtime';
+import { isInherentlyEnabled, isVisible } from './runtime';
 import {
   DispatchPropsOfControl,
   EnumOption,
@@ -49,10 +47,7 @@ import {
   OwnPropsOfEnum,
   StatePropsOfScopedRenderer,
 } from './renderer';
-import {
-  getCombinedErrorMessage,
-  getI18nKeyPrefix,
-} from '../i18n';
+import { getCombinedErrorMessage, getI18nKeyPrefix } from '../i18n';
 import type { JsonFormsState } from '../store';
 import type { JsonSchema } from '../models';
 
@@ -125,7 +120,7 @@ export const mapStateToCellProps = (
 
   /* When determining the enabled state of cells we take a shortcut: At the
    * moment it's only possible to configure enablement and disablement at the
-   * control level. Therefore the renderer using the cell, for example a 
+   * control level. Therefore the renderer using the cell, for example a
    * table renderer, determines whether a cell is enabled and should hand
    * over the prop themselves. If that prop was given, we prefer it over
    * anything else to save evaluation effort (except for the global readonly
@@ -149,7 +144,14 @@ export const mapStateToCellProps = (
 
   const t = getTranslator()(state);
   const te = getErrorTranslator()(state);
-  const errors = getCombinedErrorMessage(getErrorAt(path, schema)(state), te, t, schema, uischema, path);
+  const errors = getCombinedErrorMessage(
+    getErrorAt(path, schema)(state),
+    te,
+    t,
+    schema,
+    uischema,
+    path
+  );
   const isValid = isEmpty(errors);
 
   return {
@@ -165,7 +167,7 @@ export const mapStateToCellProps = (
     config: getConfig(state),
     rootSchema,
     renderers,
-    cells
+    cells,
   };
 };
 
@@ -178,7 +180,7 @@ export const mapStateToDispatchCellProps = (
   return {
     ...props,
     ...otherOwnProps,
-    cells: cells || state.jsonforms.cells || []
+    cells: cells || state.jsonforms.cells || [],
   };
 };
 
@@ -197,7 +199,7 @@ export const defaultMapStateToEnumCellProps = (
   const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    props.schema.enum?.map(e =>
+    props.schema.enum?.map((e) =>
       enumToEnumOptionMapper(
         e,
         getTranslator()(state),
@@ -209,11 +211,11 @@ export const defaultMapStateToEnumCellProps = (
         props.schema.const,
         getTranslator()(state),
         getI18nKeyPrefix(props.schema, props.uischema, props.path)
-      )
+      ),
     ]);
   return {
     ...props,
-    options
+    options,
   };
 };
 
@@ -230,7 +232,7 @@ export const mapStateToOneOfEnumCellProps = (
   const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    (props.schema.oneOf as JsonSchema[])?.map(oneOfSubSchema =>
+    (props.schema.oneOf as JsonSchema[])?.map((oneOfSubSchema) =>
       oneOfToEnumOptionMapper(
         oneOfSubSchema,
         getTranslator()(state),
@@ -239,11 +241,10 @@ export const mapStateToOneOfEnumCellProps = (
     );
   return {
     ...props,
-    options
+    options,
   };
 };
 
-
 /**
  * Synonym for mapDispatchToControlProps.
  *
@@ -263,6 +264,6 @@ export const defaultMapDispatchToControlProps =
     const { handleChange } = mapDispatchToCellProps(dispatch);
 
     return {
-      handleChange: ownProps.handleChange || handleChange
+      handleChange: ownProps.handleChange || handleChange,
     };
   };
diff --git a/packages/core/src/util/combinators.ts b/packages/core/src/util/combinators.ts
index b6c830f66..e502d229f 100644
--- a/packages/core/src/util/combinators.ts
+++ b/packages/core/src/util/combinators.ts
@@ -56,7 +56,9 @@ export const createCombinatorRenderInfos = (
   uischemas: JsonFormsUISchemaRegistryEntry[]
 ): CombinatorSubSchemaRenderInfo[] =>
   combinatorSubSchemas.map((subSchema, subSchemaIndex) => {
-    const schema = subSchema.$ref ? Resolve.schema(rootSchema, subSchema.$ref, rootSchema) : subSchema;
+    const schema = subSchema.$ref
+      ? Resolve.schema(rootSchema, subSchema.$ref, rootSchema)
+      : subSchema;
     return {
       schema,
       uischema: findUISchema(
@@ -68,6 +70,6 @@ export const createCombinatorRenderInfos = (
         control,
         rootSchema
       ),
-      label: createLabel(subSchema, subSchemaIndex, keyword)
-    }
+      label: createLabel(subSchema, subSchemaIndex, keyword),
+    };
   });
diff --git a/packages/core/src/util/label.ts b/packages/core/src/util/label.ts
index 06f89cfb5..c7592ed98 100644
--- a/packages/core/src/util/label.ts
+++ b/packages/core/src/util/label.ts
@@ -79,5 +79,5 @@ export const createLabelDescriptionFrom = (
 
 const labelDescription = (text: string, show: boolean): LabelDescription => ({
   text: text,
-  show: show
+  show: show,
 });
diff --git a/packages/core/src/util/path.ts b/packages/core/src/util/path.ts
index ce3a05f5c..1dc9fa61f 100644
--- a/packages/core/src/util/path.ts
+++ b/packages/core/src/util/path.ts
@@ -65,14 +65,16 @@ export const toDataPathSegments = (schemaPath: string): string[] => {
 
   const startFromRoot = decodedSegments[0] === '#' || decodedSegments[0] === '';
   const startIndex = startFromRoot ? 2 : 1;
-  return range(startIndex, decodedSegments.length, 2).map(idx => decodedSegments[idx]);
+  return range(startIndex, decodedSegments.length, 2).map(
+    (idx) => decodedSegments[idx]
+  );
 };
 
 /**
  * Convert a schema path (i.e. JSON pointer) to a data path.
- * 
+ *
  * Data paths can be used in field change event handlers like handleChange.
- * 
+ *
  * @example
  * toDataPath('#/properties/foo/properties/bar') === 'foo.bar')
  *
@@ -81,7 +83,7 @@ export const toDataPathSegments = (schemaPath: string): string[] => {
  */
 export const toDataPath = (schemaPath: string): string => {
   return toDataPathSegments(schemaPath).join('.');
-    };
+};
 
 export const composeWithUi = (scopableUi: Scopable, path: string): string => {
   if (!isScoped(scopableUi)) {
@@ -99,11 +101,13 @@ export const composeWithUi = (scopableUi: Scopable, path: string): string => {
 
 /**
  * Encodes the given segment to be used as part of a JSON Pointer
- * 
+ *
  * JSON Pointer has special meaning for "/" and "~", therefore these must be encoded
  */
-export const encode = (segment: string) => segment?.replace(/~/g, '~0').replace(/\//g, '~1');
+export const encode = (segment: string) =>
+  segment?.replace(/~/g, '~0').replace(/\//g, '~1');
 /**
  * Decodes a given JSON Pointer segment to its "normal" representation
  */
-export const decode = (pointerSegment: string) => pointerSegment?.replace(/~1/g, '/').replace(/~0/, '~');
+export const decode = (pointerSegment: string) =>
+  pointerSegment?.replace(/~1/g, '/').replace(/~0/, '~');
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
index 6311c8e37..7abb5fe89 100644
--- a/packages/core/src/util/renderer.ts
+++ b/packages/core/src/util/renderer.ts
@@ -24,14 +24,18 @@
 */
 
 import get from 'lodash/get';
-import { ControlElement, isLabelable, JsonSchema, LabelElement, UISchemaElement } from '../models';
+import {
+  ControlElement,
+  isLabelable,
+  JsonSchema,
+  LabelElement,
+  UISchemaElement,
+} from '../models';
 import find from 'lodash/find';
 import {
   getUISchemas,
   JsonFormsCellRendererRegistryEntry,
   JsonFormsRendererRegistryEntry,
-} from '../reducers';
-import {
   getAjv,
   getCells,
   getConfig,
@@ -56,8 +60,19 @@ import { composePaths, composeWithUi } from './path';
 import { CoreActions, update } from '../actions';
 import type { ErrorObject } from 'ajv';
 import type { JsonFormsState } from '../store';
-import { deriveLabelForUISchemaElement, getCombinedErrorMessage, getI18nKey, getI18nKeyPrefix, getI18nKeyPrefixBySchema, getArrayTranslations, Translator } from '../i18n';
-import { arrayDefaultTranslations, ArrayTranslations } from '../i18n/arrayTranslations';
+import {
+  deriveLabelForUISchemaElement,
+  getCombinedErrorMessage,
+  getI18nKey,
+  getI18nKeyPrefix,
+  getI18nKeyPrefixBySchema,
+  getArrayTranslations,
+  Translator,
+} from '../i18n';
+import {
+  arrayDefaultTranslations,
+  ArrayTranslations,
+} from '../i18n/arrayTranslations';
 
 const isRequired = (
   schema: JsonSchema,
@@ -99,7 +114,7 @@ export const computeLabel = (
   required: boolean,
   hideRequiredAsterisk: boolean
 ): string => {
-  return `${label ?? ''}${ required && !hideRequiredAsterisk ? '*' : ''}`;
+  return `${label ?? ''}${required && !hideRequiredAsterisk ? '*' : ''}`;
 };
 
 /**
@@ -109,7 +124,7 @@ export const computeLabel = (
  * @param {boolean} hideRequiredAsterisk applied UI Schema option
  * @returns {boolean} should the field be marked as required
  */
- export const showAsRequired = (
+export const showAsRequired = (
   required: boolean,
   hideRequiredAsterisk: boolean
 ): boolean => {
@@ -453,7 +468,7 @@ export const mapStateToControlProps = (
     rootSchema
   );
   const errors = getErrorAt(path, resolvedSchema)(state);
-  
+
   const description =
     resolvedSchema !== undefined ? resolvedSchema.description : '';
   const data = Resolve.data(rootData, path);
@@ -473,9 +488,25 @@ export const mapStateToControlProps = (
   const t = getTranslator()(state);
   const te = getErrorTranslator()(state);
   const i18nKeyPrefix = getI18nKeyPrefix(schema, uischema, path);
-  const i18nLabel = t(getI18nKey(schema, uischema, path, 'label'), label, {schema, uischema, path, errors} );
-  const i18nDescription = t(getI18nKey(schema, uischema, path, 'description'), description, {schema, uischema, path, errors});
-  const i18nErrorMessage = getCombinedErrorMessage(errors, te, t, schema, uischema, path);
+  const i18nLabel = t(getI18nKey(schema, uischema, path, 'label'), label, {
+    schema,
+    uischema,
+    path,
+    errors,
+  });
+  const i18nDescription = t(
+    getI18nKey(schema, uischema, path, 'description'),
+    description,
+    { schema, uischema, path, errors }
+  );
+  const i18nErrorMessage = getCombinedErrorMessage(
+    errors,
+    te,
+    t,
+    schema,
+    uischema,
+    path
+  );
 
   return {
     data,
@@ -492,7 +523,7 @@ export const mapStateToControlProps = (
     config: getConfig(state),
     cells: ownProps.cells || state.jsonforms.cells,
     rootSchema,
-    i18nKeyPrefix
+    i18nKeyPrefix,
   };
 };
 
@@ -508,7 +539,7 @@ export const mapDispatchToControlProps = (
 ): DispatchPropsOfControl => ({
   handleChange(path, value) {
     dispatch(update(path, () => value));
-  }
+  },
 });
 
 /**
@@ -524,7 +555,7 @@ export const mapStateToEnumControlProps = (
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    props.schema.enum?.map(e =>
+    props.schema.enum?.map((e) =>
       enumToEnumOptionMapper(
         e,
         getTranslator()(state),
@@ -536,11 +567,11 @@ export const mapStateToEnumControlProps = (
         props.schema.const,
         getTranslator()(state),
         getI18nKeyPrefix(props.schema, props.uischema, props.path)
-      )
+      ),
     ]);
   return {
     ...props,
-    options
+    options,
   };
 };
 
@@ -557,7 +588,7 @@ export const mapStateToOneOfEnumControlProps = (
   const props: StatePropsOfControl = mapStateToControlProps(state, ownProps);
   const options: EnumOption[] =
     ownProps.options ||
-    (props.schema.oneOf as JsonSchema[])?.map(oneOfSubSchema =>
+    (props.schema.oneOf as JsonSchema[])?.map((oneOfSubSchema) =>
       oneOfToEnumOptionMapper(
         oneOfSubSchema,
         getTranslator()(state),
@@ -566,7 +597,7 @@ export const mapStateToOneOfEnumControlProps = (
     );
   return {
     ...props,
-    options
+    options,
   };
 };
 
@@ -585,14 +616,14 @@ export const mapStateToMultiEnumControlProps = (
   const options: EnumOption[] =
     ownProps.options ||
     (items?.oneOf &&
-      (items.oneOf as JsonSchema[]).map(oneOfSubSchema =>
+      (items.oneOf as JsonSchema[]).map((oneOfSubSchema) =>
         oneOfToEnumOptionMapper(
           oneOfSubSchema,
           state.jsonforms.i18n?.translate,
           getI18nKeyPrefix(props.schema, props.uischema, props.path)
         )
       )) ||
-    items?.enum?.map(e =>
+    items?.enum?.map((e) =>
       enumToEnumOptionMapper(
         e,
         state.jsonforms.i18n?.translate,
@@ -601,7 +632,7 @@ export const mapStateToMultiEnumControlProps = (
     );
   return {
     ...props,
-    options
+    options,
   };
 };
 
@@ -617,7 +648,7 @@ export const mapStateToMasterListItemProps = (
 ): StatePropsOfMasterItem => {
   const { schema, path, index } = ownProps;
   const firstPrimitiveProp = schema.properties
-    ? find(Object.keys(schema.properties), propName => {
+    ? find(Object.keys(schema.properties), (propName) => {
         const prop = schema.properties[propName];
         return (
           prop.type === 'string' ||
@@ -632,7 +663,7 @@ export const mapStateToMasterListItemProps = (
 
   return {
     ...ownProps,
-    childLabel
+    childLabel,
   };
 };
 
@@ -674,7 +705,7 @@ export const mapStateToControlWithDetailProps = (
 
   return {
     ...props,
-    uischemas: state.jsonforms.uischemas
+    uischemas: state.jsonforms.uischemas,
   };
 };
 
@@ -702,10 +733,8 @@ export const mapStateToArrayControlProps = (
   state: JsonFormsState,
   ownProps: OwnPropsOfControl
 ): StatePropsOfArrayControl => {
-  const { path, schema, uischema, i18nKeyPrefix, label, ...props } = mapStateToControlWithDetailProps(
-    state,
-    ownProps
-  );
+  const { path, schema, uischema, i18nKeyPrefix, label, ...props } =
+    mapStateToControlWithDetailProps(state, ownProps);
 
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
   const childErrors = getSubErrorsAt(path, resolvedSchema)(state);
@@ -720,7 +749,12 @@ export const mapStateToArrayControlProps = (
     childErrors,
     renderers: ownProps.renderers || getRenderers(state),
     cells: ownProps.cells || getCells(state),
-    translations: getArrayTranslations(t,arrayDefaultTranslations,i18nKeyPrefix, label)
+    translations: getArrayTranslations(
+      t,
+      arrayDefaultTranslations,
+      i18nKeyPrefix,
+      label
+    ),
   };
 };
 
@@ -745,7 +779,7 @@ export const mapDispatchToArrayControlProps = (
 ): DispatchPropsOfArrayControl => ({
   addItem: (path: string, value: any) => () => {
     dispatch(
-      update(path, array => {
+      update(path, (array) => {
         if (array === undefined || array === null) {
           return [value];
         }
@@ -757,18 +791,18 @@ export const mapDispatchToArrayControlProps = (
   },
   removeItems: (path: string, toDelete: number[]) => () => {
     dispatch(
-      update(path, array => {
+      update(path, (array) => {
         toDelete
           .sort()
           .reverse()
-          .forEach(s => array.splice(s, 1));
+          .forEach((s) => array.splice(s, 1));
         return array;
       })
     );
   },
   moveUp: (path, toMove: number) => () => {
     dispatch(
-      update(path, array => {
+      update(path, (array) => {
         moveUp(array, toMove);
         return array;
       })
@@ -776,7 +810,7 @@ export const mapDispatchToArrayControlProps = (
   },
   moveDown: (path, toMove: number) => () => {
     dispatch(
-      update(path, array => {
+      update(path, (array) => {
         moveDown(array, toMove);
         return array;
       })
@@ -794,7 +828,7 @@ export const mapDispatchToMultiEnumProps = (
 ): DispatchPropsOfMultiEnumControl => ({
   addItem: (path: string, value: any) => {
     dispatch(
-      update(path, data => {
+      update(path, (data) => {
         if (data === undefined || data === null) {
           return [value];
         }
@@ -805,13 +839,13 @@ export const mapDispatchToMultiEnumProps = (
   },
   removeItem: (path: string, toDelete: any) => {
     dispatch(
-      update(path, data => {
+      update(path, (data) => {
         const indexInData = data.indexOf(toDelete);
         data.splice(indexInData, 1);
         return data;
       })
     );
-  }
+  },
 });
 
 /**
@@ -830,7 +864,7 @@ export const layoutDefaultProps: {
   visible: true,
   enabled: true,
   path: '',
-  direction: 'column'
+  direction: 'column',
 };
 
 const getDirection = (uischema: UISchemaElement) => {
@@ -873,7 +907,9 @@ export const mapStateToLayoutProps = (
 
   // some layouts have labels which might need to be translated
   const t = getTranslator()(state);
-  const label = isLabelable(uischema) ? deriveLabelForUISchemaElement(uischema, t) : undefined;
+  const label = isLabelable(uischema)
+    ? deriveLabelForUISchemaElement(uischema, t)
+    : undefined;
 
   return {
     ...layoutDefaultProps,
@@ -887,7 +923,7 @@ export const mapStateToLayoutProps = (
     schema: ownProps.schema,
     direction: ownProps.direction ?? getDirection(uischema),
     config,
-    label
+    label,
   };
 };
 
@@ -915,13 +951,13 @@ export const mapStateToJsonFormsRendererProps = (
     uischema: ownProps.uischema || getUiSchema(state),
     path: ownProps.path,
     enabled: ownProps.enabled,
-    config: getConfig(state)
+    config: getConfig(state),
   };
 };
 
 export const controlDefaultProps = {
   ...layoutDefaultProps,
-  errors: [] as string[]
+  errors: [] as string[],
 };
 
 export interface StatePropsOfCombinator extends StatePropsOfControl {
@@ -940,7 +976,7 @@ export const mapStateToCombinatorRendererProps = (
 ): StatePropsOfCombinator => {
   const { data, schema, rootSchema, ...props } = mapStateToControlProps(
     state,
-    ownProps,
+    ownProps
   );
 
   const ajv = state.jsonforms.core.ajv;
@@ -949,13 +985,13 @@ export const mapStateToCombinatorRendererProps = (
     'additionalProperties',
     'type',
     'enum',
-    'const'
+    'const',
   ];
   const dataIsValid = (errors: ErrorObject[]): boolean => {
     return (
       !errors ||
       errors.length === 0 ||
-      !errors.find(e => structuralKeywords.indexOf(e.keyword) !== -1)
+      !errors.find((e) => structuralKeywords.indexOf(e.keyword) !== -1)
     );
   };
   let indexOfFittingSchema: number;
@@ -965,9 +1001,8 @@ export const mapStateToCombinatorRendererProps = (
   for (let i = 0; i < schema[keyword]?.length; i++) {
     try {
       let _schema = schema[keyword][i];
-      if(_schema.$ref){
-        _schema = Resolve.schema( rootSchema, _schema.$ref, rootSchema
-        );
+      if (_schema.$ref) {
+        _schema = Resolve.schema(rootSchema, _schema.$ref, rootSchema);
       }
       const valFn = ajv.compile(_schema);
       valFn(data);
@@ -976,7 +1011,9 @@ export const mapStateToCombinatorRendererProps = (
         break;
       }
     } catch (error) {
-      console.debug("Combinator subschema is not self contained, can't hand it over to AJV");
+      console.debug(
+        "Combinator subschema is not self contained, can't hand it over to AJV"
+      );
     }
   }
 
@@ -986,7 +1023,7 @@ export const mapStateToCombinatorRendererProps = (
     rootSchema,
     ...props,
     indexOfFittingSchema,
-    uischemas: getUISchemas(state)
+    uischemas: getUISchemas(state),
   };
 };
 
@@ -1035,17 +1072,9 @@ export const mapStateToArrayLayoutProps = (
   state: JsonFormsState,
   ownProps: OwnPropsOfControl
 ): StatePropsOfArrayLayout => {
-  const {
-    path,
-    schema,
-    uischema,
-    errors,
-    i18nKeyPrefix,
-    label,
-    ...props
-  } = mapStateToControlWithDetailProps(state, ownProps);
+  const { path, schema, uischema, errors, i18nKeyPrefix, label, ...props } =
+    mapStateToControlWithDetailProps(state, ownProps);
 
-  
   const resolvedSchema = Resolve.schema(schema, 'items', props.rootSchema);
   const t = getTranslator()(state);
   // TODO Does not consider 'i18n' keys which are specified in the ui schemas of the sub errors
@@ -1071,7 +1100,12 @@ export const mapStateToArrayLayoutProps = (
     data: props.data ? props.data.length : 0,
     errors: allErrors,
     minItems: schema.minItems,
-    translations: getArrayTranslations(t,arrayDefaultTranslations,i18nKeyPrefix, label)
+    translations: getArrayTranslations(
+      t,
+      arrayDefaultTranslations,
+      i18nKeyPrefix,
+      label
+    ),
   };
 };
 
@@ -1085,8 +1119,7 @@ export interface ArrayLayoutProps
 export interface StatePropsOfLabel extends StatePropsOfRenderer {
   text?: string;
 }
-export interface LabelProps extends StatePropsOfLabel{
-}
+export interface LabelProps extends StatePropsOfLabel {}
 
 export const mapStateToLabelProps = (
   state: JsonFormsState,
@@ -1104,12 +1137,12 @@ export const mapStateToLabelProps = (
   const i18nKeyPrefix = getI18nKeyPrefixBySchema(undefined, uischema);
   const i18nKey = i18nKeyPrefix ? `${i18nKeyPrefix}.text` : text ?? '';
   const i18nText = t(i18nKey, text, { uischema });
-  
+
   return {
     text: i18nText,
     visible,
     config: getConfig(state),
     renderers: props.renderers || getRenderers(state),
     cells: props.cells || getCells(state),
-  }
-}
+  };
+};
diff --git a/packages/core/src/util/resolvers.ts b/packages/core/src/util/resolvers.ts
index 559cb26bb..10deb7631 100644
--- a/packages/core/src/util/resolvers.ts
+++ b/packages/core/src/util/resolvers.ts
@@ -48,14 +48,13 @@ export const resolveData = (instance: any, dataPath: string): any => {
   }
   const dataPathSegments = dataPath.split('.');
 
-  return dataPathSegments
-    .reduce((curInstance, decodedSegment) => {
-      if (!curInstance || !curInstance.hasOwnProperty(decodedSegment)) {
-        return undefined;
-      }
+  return dataPathSegments.reduce((curInstance, decodedSegment) => {
+    if (!curInstance || !curInstance.hasOwnProperty(decodedSegment)) {
+      return undefined;
+    }
 
-      return curInstance[decodedSegment];
-    }, instance);
+    return curInstance[decodedSegment];
+  }, instance);
 };
 
 /**
@@ -72,7 +71,7 @@ export const findAllRefs = (
   resolveTuples = false
 ): ReferenceSchemaMap => {
   if (isObjectSchema(schema)) {
-    Object.keys(schema.properties).forEach(key =>
+    Object.keys(schema.properties).forEach((key) =>
       findAllRefs(schema.properties[key], result)
     );
   }
@@ -80,7 +79,7 @@ export const findAllRefs = (
     if (Array.isArray(schema.items)) {
       if (resolveTuples) {
         const items: JsonSchema[] = schema.items;
-        items.forEach(child => findAllRefs(child, result));
+        items.forEach((child) => findAllRefs(child, result));
       }
     } else {
       findAllRefs(schema.items, result);
@@ -88,7 +87,7 @@ export const findAllRefs = (
   }
   if (Array.isArray(schema.anyOf)) {
     const anyOf: JsonSchema[] = schema.anyOf;
-    anyOf.forEach(child => findAllRefs(child, result));
+    anyOf.forEach((child) => findAllRefs(child, result));
   }
   if (schema.$ref !== undefined) {
     result[schema.$ref] = schema;
@@ -141,7 +140,11 @@ const resolveSchemaWithSegments = (
 
   const singleSegmentResolveSchema = get(schema, segment);
 
-  const resolvedSchema = resolveSchemaWithSegments(singleSegmentResolveSchema, remainingSegments, rootSchema);
+  const resolvedSchema = resolveSchemaWithSegments(
+    singleSegmentResolveSchema,
+    remainingSegments,
+    rootSchema
+  );
   if (resolvedSchema) {
     return resolvedSchema;
   }
@@ -174,4 +177,4 @@ const resolveSchemaWithSegments = (
   }
 
   return undefined;
-}
+};
diff --git a/packages/core/src/util/runtime.ts b/packages/core/src/util/runtime.ts
index 0b592b2fd..2db828eb4 100644
--- a/packages/core/src/util/runtime.ts
+++ b/packages/core/src/util/runtime.ts
@@ -33,7 +33,7 @@ import {
   RuleEffect,
   SchemaBasedCondition,
   Scopable,
-  UISchemaElement
+  UISchemaElement,
 } from '../models';
 import { resolveData } from './resolvers';
 import { composeWithUi } from './path';
@@ -191,7 +191,7 @@ export const isInherentlyEnabled = (
   state: JsonFormsState,
   ownProps: any,
   uischema: UISchemaElement,
-  schema: JsonSchema & { readOnly?: boolean } | undefined,
+  schema: (JsonSchema & { readOnly?: boolean }) | undefined,
   rootData: any,
   config: any
 ) => {
diff --git a/packages/core/src/util/schema.ts b/packages/core/src/util/schema.ts
index 9ade7803b..e8e6dd650 100644
--- a/packages/core/src/util/schema.ts
+++ b/packages/core/src/util/schema.ts
@@ -27,7 +27,7 @@ import find from 'lodash/find';
 
 export const getFirstPrimitiveProp = (schema: any) => {
   if (schema.properties) {
-    return find(Object.keys(schema.properties), propName => {
+    return find(Object.keys(schema.properties), (propName) => {
       const prop = schema.properties[propName];
       return (
         prop.type === 'string' ||
diff --git a/packages/core/src/util/type.ts b/packages/core/src/util/type.ts
index 7cdc8e71d..c01745773 100644
--- a/packages/core/src/util/type.ts
+++ b/packages/core/src/util/type.ts
@@ -62,7 +62,9 @@ export interface AnyAction extends Action {
  * @template A The type of things (actions or otherwise) which may be
  *   dispatched.
  */
-export type Dispatch<A extends Action = AnyAction> = <T extends A>(action: T) => T;
+export type Dispatch<A extends Action = AnyAction> = <T extends A>(
+  action: T
+) => T;
 
 // Copied from https://github.com/reduxjs/redux/blob/master/src/types/store.ts
 /**
@@ -171,7 +173,7 @@ export type Observable<T> = {
    * emission of values from the observable.
    */
   subscribe(observer: Observer<T>): { unsubscribe: Unsubscribe };
-  [Symbol.observable](): Observable<T>
+  [Symbol.observable](): Observable<T>;
 };
 
 // Copied from https://github.com/reduxjs/redux/blob/master/src/types/store.ts
@@ -180,7 +182,7 @@ export type Observable<T> = {
  * an argument to subscribe.
  */
 export type Observer<T> = {
-  next?(value: T): void
+  next?(value: T): void;
 };
 
 // Copied from https://github.com/reduxjs/redux/blob/master/src/types/reducers.ts
diff --git a/packages/core/src/util/uischema.ts b/packages/core/src/util/uischema.ts
index 0d409fe97..05410bd83 100644
--- a/packages/core/src/util/uischema.ts
+++ b/packages/core/src/util/uischema.ts
@@ -28,14 +28,14 @@ import { isLayout, UISchemaElement } from '../models';
 
 export type IterateCallback = (uischema: UISchemaElement) => void;
 
-const setReadonlyPropertyValue = (value: boolean): IterateCallback => (
-  child: UISchemaElement
-): void => {
-  if (!child.options) {
-    child.options = {};
-  }
-  child.options.readonly = value;
-};
+const setReadonlyPropertyValue =
+  (value: boolean): IterateCallback =>
+  (child: UISchemaElement): void => {
+    if (!child.options) {
+      child.options = {};
+    }
+    child.options.readonly = value;
+  };
 export const setReadonly = (uischema: UISchemaElement): void => {
   iterateSchema(uischema, setReadonlyPropertyValue(true));
 };
@@ -50,7 +50,7 @@ export const iterateSchema = (
     return;
   }
   if (isLayout(uischema)) {
-    uischema.elements.forEach(child => iterateSchema(child, toApply));
+    uischema.elements.forEach((child) => iterateSchema(child, toApply));
     return;
   }
   toApply(uischema);
diff --git a/packages/core/src/util/util.ts b/packages/core/src/util/util.ts
index 156a0582a..467cc8ec0 100644
--- a/packages/core/src/util/util.ts
+++ b/packages/core/src/util/util.ts
@@ -41,87 +41,87 @@ import type Ajv from 'ajv';
  * @returns {string} the escaped string
  */
 export const convertToValidClassName = (s: string): string =>
-s.replace('#', 'root').replace(new RegExp('/', 'g'), '_');
+  s.replace('#', 'root').replace(new RegExp('/', 'g'), '_');
 
 export const formatErrorMessage = (errors: string[]) => {
- if (errors === undefined || errors === null) {
-   return '';
- }
+  if (errors === undefined || errors === null) {
+    return '';
+  }
 
- return errors.join('\n');
+  return errors.join('\n');
 };
 
 export const hasType = (jsonSchema: JsonSchema, expected: string): boolean => {
- return includes(deriveTypes(jsonSchema), expected);
+  return includes(deriveTypes(jsonSchema), expected);
 };
 
 /**
  * Derives the type of the jsonSchema element
  */
 export const deriveTypes = (jsonSchema: JsonSchema): string[] => {
- if (isEmpty(jsonSchema)) {
-   return [];
- }
- if (!isEmpty(jsonSchema.type) && typeof jsonSchema.type === 'string') {
-   return [jsonSchema.type];
- }
- if (isArray(jsonSchema.type)) {
-   return jsonSchema.type;
- }
- if (
-   !isEmpty(jsonSchema.properties) ||
-   !isEmpty(jsonSchema.additionalProperties)
- ) {
-   return ['object'];
- }
- if (!isEmpty(jsonSchema.items)) {
-   return ['array'];
- }
+  if (isEmpty(jsonSchema)) {
+    return [];
+  }
+  if (!isEmpty(jsonSchema.type) && typeof jsonSchema.type === 'string') {
+    return [jsonSchema.type];
+  }
+  if (isArray(jsonSchema.type)) {
+    return jsonSchema.type;
+  }
+  if (
+    !isEmpty(jsonSchema.properties) ||
+    !isEmpty(jsonSchema.additionalProperties)
+  ) {
+    return ['object'];
+  }
+  if (!isEmpty(jsonSchema.items)) {
+    return ['array'];
+  }
 
- if (!isEmpty(jsonSchema.allOf)) {
-   const allOfType = find(
-     jsonSchema.allOf,
-     (schema: JsonSchema) => deriveTypes(schema).length !== 0
-   );
+  if (!isEmpty(jsonSchema.allOf)) {
+    const allOfType = find(
+      jsonSchema.allOf,
+      (schema: JsonSchema) => deriveTypes(schema).length !== 0
+    );
 
-   if (allOfType) {
-     return deriveTypes(allOfType);
-   }
- }
- // ignore all remaining cases
- return [];
+    if (allOfType) {
+      return deriveTypes(allOfType);
+    }
+  }
+  // ignore all remaining cases
+  return [];
 };
 
 /**
  * Convenience wrapper around resolveData and resolveSchema.
  */
 export const Resolve: {
- schema(
-   schema: JsonSchema,
-   schemaPath: string,
-   rootSchema: JsonSchema
- ): JsonSchema;
- data(data: any, path: string): any;
+  schema(
+    schema: JsonSchema,
+    schemaPath: string,
+    rootSchema: JsonSchema
+  ): JsonSchema;
+  data(data: any, path: string): any;
 } = {
- schema: resolveSchema,
- data: resolveData
+  schema: resolveSchema,
+  data: resolveData,
 };
 
 // Paths --
 const fromScoped = (scopable: Scoped): string =>
- toDataPathSegments(scopable.scope).join('.');
+  toDataPathSegments(scopable.scope).join('.');
 
 export const Paths = {
- compose: composePaths,
- fromScoped
+  compose: composePaths,
+  fromScoped,
 };
 
 // Runtime --
 export const Runtime = {
- isEnabled(uischema: UISchemaElement, data: any, ajv: Ajv): boolean {
-   return isEnabled(uischema, data, undefined, ajv);
- },
- isVisible(uischema: UISchemaElement, data: any, ajv: Ajv): boolean {
-   return isVisible(uischema, data, undefined, ajv);
- }
+  isEnabled(uischema: UISchemaElement, data: any, ajv: Ajv): boolean {
+    return isEnabled(uischema, data, undefined, ajv);
+  },
+  isVisible(uischema: UISchemaElement, data: any, ajv: Ajv): boolean {
+    return isVisible(uischema, data, undefined, ajv);
+  },
 };
diff --git a/packages/core/src/util/validator.ts b/packages/core/src/util/validator.ts
index d658ee151..c3628a0f9 100644
--- a/packages/core/src/util/validator.ts
+++ b/packages/core/src/util/validator.ts
@@ -31,7 +31,7 @@ export const createAjv = (options?: Options) => {
     allErrors: true,
     verbose: true,
     strict: false,
-    ...options
+    ...options,
   });
   addFormats(ajv);
   return ajv;
diff --git a/packages/core/test/actions/actions.test.ts b/packages/core/test/actions/actions.test.ts
index 5a36a2d19..35ffe3deb 100644
--- a/packages/core/test/actions/actions.test.ts
+++ b/packages/core/test/actions/actions.test.ts
@@ -28,56 +28,56 @@ import {
   JsonSchema,
   UISchemaElement,
   ControlElement,
-  VerticalLayout
+  VerticalLayout,
 } from '../../src';
 
-test('Init Action generates schema when not provided', t => {
+test('Init Action generates schema when not provided', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       name: {
-        type: 'string'
-      }
+        type: 'string',
+      },
     },
     additionalProperties: true,
-    required: ['name']
+    required: ['name'],
   };
 
   const init = Actions.init({ name: 'foobar' });
   t.deepEqual(init.schema, schema);
 });
 
-test('Init Action generates ui schema when not provided', t => {
+test('Init Action generates ui schema when not provided', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       name: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
   const uischema: VerticalLayout = {
     type: 'VerticalLayout',
     elements: [
       {
         type: 'Control',
-        scope: '#/properties/name'
-      } as ControlElement
-    ]
+        scope: '#/properties/name',
+      } as ControlElement,
+    ],
   };
 
   const init = Actions.init({}, schema);
   t.deepEqual(init.uischema, uischema);
 });
 
-test('Init Action generates ui schema when not valid', t => {
+test('Init Action generates ui schema when not valid', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       name: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const init = Actions.init({}, schema, false as any);
@@ -86,8 +86,8 @@ test('Init Action generates ui schema when not valid', t => {
     elements: [
       {
         type: 'Control',
-        scope: '#/properties/name'
-      }
-    ]
+        scope: '#/properties/name',
+      },
+    ],
   } as UISchemaElement);
 });
diff --git a/packages/core/test/generators/schema.test.ts b/packages/core/test/generators/schema.test.ts
index 386e93adf..2171f51a0 100644
--- a/packages/core/test/generators/schema.test.ts
+++ b/packages/core/test/generators/schema.test.ts
@@ -26,14 +26,14 @@ import test from 'ava';
 
 import { generateJsonSchema } from '../../src/generators/schema';
 
-test('default schema generation basic types', t => {
+test('default schema generation basic types', (t) => {
   const instance: any = {
     boolean: false,
     number: 3.14,
     integer: 3,
     string: 'PI',
     null: null,
-    undefined: undefined
+    undefined: undefined,
   };
   const schema = generateJsonSchema(instance);
   // FIXME: Should a property be generated for properties with undefined?
@@ -41,34 +41,34 @@ test('default schema generation basic types', t => {
     type: 'object',
     properties: {
       boolean: {
-        type: 'boolean'
+        type: 'boolean',
       },
       number: {
-        type: 'number'
+        type: 'number',
       },
       integer: {
-        type: 'integer'
+        type: 'integer',
       },
       string: {
-        type: 'string'
+        type: 'string',
       },
       null: {
-        type: 'null'
+        type: 'null',
       },
-      undefined: {}
+      undefined: {},
     },
     additionalProperties: true,
-    required: ['boolean', 'number', 'integer', 'string', 'null', 'undefined']
+    required: ['boolean', 'number', 'integer', 'string', 'null', 'undefined'],
   });
 });
-test('default schema generation array types', t => {
+test('default schema generation array types', (t) => {
   const instance: any = {
     emptyArray: [],
     booleanArray: [false, false],
     numberArray: [3.14, 2.71],
     integerArray: [3, 2],
     stringArray: ['PI', 'e'],
-    nullArray: [null, null]
+    nullArray: [null, null],
   };
   const schema = generateJsonSchema(instance);
   t.deepEqual(schema, {
@@ -76,28 +76,28 @@ test('default schema generation array types', t => {
     properties: {
       emptyArray: {
         type: 'array',
-        items: {}
+        items: {},
       },
       booleanArray: {
         type: 'array',
-        items: { type: 'boolean' }
+        items: { type: 'boolean' },
       },
       numberArray: {
         type: 'array',
-        items: { type: 'number' }
+        items: { type: 'number' },
       },
       integerArray: {
         type: 'array',
-        items: { type: 'integer' }
+        items: { type: 'integer' },
       },
       stringArray: {
         type: 'array',
-        items: { type: 'string' }
+        items: { type: 'string' },
       },
       nullArray: {
         type: 'array',
-        items: { type: 'null' }
-      }
+        items: { type: 'null' },
+      },
     },
     additionalProperties: true,
     required: [
@@ -106,11 +106,11 @@ test('default schema generation array types', t => {
       'numberArray',
       'integerArray',
       'stringArray',
-      'nullArray'
-    ]
+      'nullArray',
+    ],
   });
 });
-test.failing('default schema generation tuple array types', t => {
+test.failing('default schema generation tuple array types', (t) => {
   const instance: any = { tupleArray: [3.14, 'PI'] };
   const schema = generateJsonSchema(instance);
   // FIXME: This assumption is the correct one, but we crteate a oneOf in this case
@@ -119,26 +119,26 @@ test.failing('default schema generation tuple array types', t => {
     properties: {
       tupleArray: {
         type: 'array',
-        items: [{ type: 'number' }, { type: 'string' }]
-      }
+        items: [{ type: 'number' }, { type: 'string' }],
+      },
     },
     additionalProperties: true,
-    required: ['tupleArray']
+    required: ['tupleArray'],
   });
 });
-test('default schema generation ', t => {
+test('default schema generation ', (t) => {
   const instance: any = {
     address: {
       streetAddress: '21 2nd Street',
-      city: 'New York'
+      city: 'New York',
     },
     phoneNumber: [
       {
         location: 'home',
         code: 44,
-        private: true
-      }
-    ]
+        private: true,
+      },
+    ],
   };
   const schema = generateJsonSchema(instance);
   t.deepEqual(schema, {
@@ -148,14 +148,14 @@ test('default schema generation ', t => {
         type: 'object',
         properties: {
           streetAddress: {
-            type: 'string'
+            type: 'string',
           },
           city: {
-            type: 'string'
-          }
+            type: 'string',
+          },
         },
         additionalProperties: true,
-        required: ['streetAddress', 'city']
+        required: ['streetAddress', 'city'],
       },
       phoneNumber: {
         type: 'array',
@@ -163,31 +163,31 @@ test('default schema generation ', t => {
           type: 'object',
           properties: {
             location: {
-              type: 'string'
+              type: 'string',
             },
             code: {
-              type: 'integer'
+              type: 'integer',
             },
             private: {
-              type: 'boolean'
-            }
+              type: 'boolean',
+            },
           },
           additionalProperties: true,
-          required: ['location', 'code', 'private']
-        }
-      }
+          required: ['location', 'code', 'private'],
+        },
+      },
     },
     additionalProperties: true,
-    required: ['address', 'phoneNumber']
+    required: ['address', 'phoneNumber'],
   });
 });
 
-test('schema generation with options ', t => {
+test('schema generation with options ', (t) => {
   const instance: any = {
     address: {
       streetAddress: '21 2nd Street',
-      city: 'New York'
-    }
+      city: 'New York',
+    },
   };
   const schema = generateJsonSchema(instance, {
     additionalProperties: false,
@@ -198,7 +198,7 @@ test('schema generation with options ', t => {
       } else {
         return [];
       }
-    }
+    },
   });
 
   t.deepEqual(schema, {
@@ -208,17 +208,17 @@ test('schema generation with options ', t => {
         type: 'object',
         properties: {
           streetAddress: {
-            type: 'string'
+            type: 'string',
           },
           city: {
-            type: 'string'
-          }
+            type: 'string',
+          },
         },
         additionalProperties: false,
-        required: ['streetAddress']
-      }
+        required: ['streetAddress'],
+      },
     },
     additionalProperties: false,
-    required: ['address']
+    required: ['address'],
   });
 });
diff --git a/packages/core/test/generators/uischema.test.ts b/packages/core/test/generators/uischema.test.ts
index 7cc2350d3..f178a0e86 100644
--- a/packages/core/test/generators/uischema.test.ts
+++ b/packages/core/test/generators/uischema.test.ts
@@ -27,311 +27,311 @@ import { generateDefaultUISchema } from '../../src/generators/uischema';
 import {
   ControlElement,
   Layout,
-  VerticalLayout
+  VerticalLayout,
 } from '../../src/models/uischema';
 import { JsonSchema } from '../../src';
 
-test('generate ui schema for Control element by resolving refs', t => {
+test('generate ui schema for Control element by resolving refs', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       type: {
         type: 'string',
         const: 'Control',
-        default: 'Control'
+        default: 'Control',
       },
       label: {
-        type: 'string'
+        type: 'string',
       },
       scope: {
-        $ref: '#/definitions/scope'
+        $ref: '#/definitions/scope',
       },
       rule: {
-        $ref: '#/definitions/rule'
-      }
+        $ref: '#/definitions/rule',
+      },
     },
     required: ['type', 'scope'],
     definitions: {
       scope: {
         type: 'string',
-        pattern: '^#\\/properties\\/{1}'
+        pattern: '^#\\/properties\\/{1}',
       },
       rule: {
         type: 'object',
         properties: {
           effect: {
             type: 'string',
-            enum: ['HIDE', 'SHOW', 'DISABLE', 'ENABLE']
+            enum: ['HIDE', 'SHOW', 'DISABLE', 'ENABLE'],
           },
           condition: {
             type: 'object',
             properties: {
               type: {
                 type: 'string',
-                const: 'LEAF'
+                const: 'LEAF',
               },
               scope: {
-                $ref: '#/definitions/scope'
+                $ref: '#/definitions/scope',
               },
               expectedValue: {
-                type: ['string', 'integer', 'number', 'boolean']
-              }
+                type: ['string', 'integer', 'number', 'boolean'],
+              },
             },
-            required: ['type', 'scope', 'expectedValue']
-          }
+            required: ['type', 'scope', 'expectedValue'],
+          },
         },
-        required: ['effect', 'condition']
-      }
-    }
+        required: ['effect', 'condition'],
+      },
+    },
   };
   const typeControl: ControlElement = {
     type: 'Control',
-    scope: '#/properties/type'
+    scope: '#/properties/type',
   };
   const labelControl: ControlElement = {
     type: 'Control',
-    scope: '#/properties/label'
+    scope: '#/properties/label',
   };
   const scopeControl: ControlElement = {
     type: 'Control',
-    scope: '#/properties/scope'
+    scope: '#/properties/scope',
   };
   const ruleControl: ControlElement = {
     type: 'Control',
-    scope: '#/properties/rule'
+    scope: '#/properties/rule',
   };
 
   const uischema: VerticalLayout = {
     type: 'VerticalLayout',
-    elements: [typeControl, labelControl, scopeControl, ruleControl]
+    elements: [typeControl, labelControl, scopeControl, ruleControl],
   };
   const generatedUiSchema = generateDefaultUISchema(schema);
   t.deepEqual(generatedUiSchema, uischema);
 });
 
-test('generate ui schema for schema w/o properties', t => {
+test('generate ui schema for schema w/o properties', (t) => {
   const schema: JsonSchema = {
-    type: 'object'
+    type: 'object',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: []
+    elements: [],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate ui schema for schema with one property', t => {
+test('generate ui schema for schema with one property', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       name: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
   const control = {
     type: 'Control',
-    scope: '#/properties/name'
+    scope: '#/properties/name',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate ui schema for schema without object root', t => {
+test('generate ui schema for schema without object root', (t) => {
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const control: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate ui schema for schema with unspecified object root', t => {
+test('generate ui schema for schema with unspecified object root', (t) => {
   const schema: JsonSchema = {
     properties: {
       age: {
-        type: 'integer'
-      }
-    }
+        type: 'integer',
+      },
+    },
   };
   const controlElement = {
     type: 'Control',
-    scope: '#/properties/age'
+    scope: '#/properties/age',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [controlElement]
+    elements: [controlElement],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test(`nested object not expanded`, t => {
+test(`nested object not expanded`, (t) => {
   const schema = {
     type: 'object',
     properties: {
       id: {
-        type: 'string'
+        type: 'string',
       },
       private: {
         type: 'object',
         properties: {
           name: {
-            type: 'string'
-          }
-        }
-      }
-    }
+            type: 'string',
+          },
+        },
+      },
+    },
   };
   const idControl: ControlElement = {
     type: 'Control',
-    scope: '#/properties/id'
+    scope: '#/properties/id',
   };
   const privateControl: ControlElement = {
     type: 'Control',
-    scope: '#/properties/private'
+    scope: '#/properties/private',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [idControl, privateControl]
+    elements: [idControl, privateControl],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test(`don't ignore non-json-schema id attributes`, t => {
+test(`don't ignore non-json-schema id attributes`, (t) => {
   const schema = {
     type: 'object',
     properties: {
       id: {
-        type: 'string'
+        type: 'string',
       },
       name: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
   const idControl: ControlElement = {
     type: 'Control',
-    scope: '#/properties/id'
+    scope: '#/properties/id',
   };
   const nameControl: ControlElement = {
     type: 'Control',
-    scope: '#/properties/name'
+    scope: '#/properties/name',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [idControl, nameControl]
+    elements: [idControl, nameControl],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate ui schema for schema with multiple properties', t => {
+test('generate ui schema for schema with multiple properties', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       id: {
         type: 'string',
-        format: 'objectId'
+        format: 'objectId',
       },
       lastName: {
-        type: 'string'
+        type: 'string',
       },
       email: {
-        type: 'string'
+        type: 'string',
       },
       firstName: {
-        type: 'string'
+        type: 'string',
       },
       gender: {
         type: 'string',
-        enum: ['Male', 'Female']
+        enum: ['Male', 'Female'],
       },
       active: {
-        type: 'boolean'
+        type: 'boolean',
       },
       registrationTime: {
         type: 'string',
-        format: 'date-time'
+        format: 'date-time',
       },
       weight: {
-        type: 'number'
+        type: 'number',
       },
       height: {
-        type: 'integer'
+        type: 'integer',
       },
       nationality: {
         type: 'string',
-        enum: ['German', 'French', 'UK', 'US', 'Spanish', 'Italian', 'Russian']
+        enum: ['German', 'French', 'UK', 'US', 'Spanish', 'Italian', 'Russian'],
       },
       birthDate: {
         type: 'string',
-        format: 'date-time'
-      }
+        format: 'date-time',
+      },
     },
     additionalProperties: false,
-    required: ['id', 'lastName', 'email']
+    required: ['id', 'lastName', 'email'],
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
     elements: [
       {
         type: 'Control',
-        scope: '#/properties/id'
+        scope: '#/properties/id',
       },
       {
         type: 'Control',
-        scope: '#/properties/lastName'
+        scope: '#/properties/lastName',
       },
       {
         type: 'Control',
-        scope: '#/properties/email'
+        scope: '#/properties/email',
       },
       {
         type: 'Control',
-        scope: '#/properties/firstName'
+        scope: '#/properties/firstName',
       },
       {
         type: 'Control',
-        scope: '#/properties/gender'
+        scope: '#/properties/gender',
       },
       {
         type: 'Control',
-        scope: '#/properties/active'
+        scope: '#/properties/active',
       },
       {
         type: 'Control',
-        scope: '#/properties/registrationTime'
+        scope: '#/properties/registrationTime',
       },
       {
         type: 'Control',
-        scope: '#/properties/weight'
+        scope: '#/properties/weight',
       },
       {
         type: 'Control',
-        scope: '#/properties/height'
+        scope: '#/properties/height',
       },
       {
         type: 'Control',
-        scope: '#/properties/nationality'
+        scope: '#/properties/nationality',
       },
       {
         type: 'Control',
-        scope: '#/properties/birthDate'
-      }
-    ] as ControlElement[]
+        scope: '#/properties/birthDate',
+      },
+    ] as ControlElement[],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate named array control', t => {
+test('generate named array control', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
@@ -339,159 +339,159 @@ test('generate named array control', t => {
         type: 'array',
         items: {
           properties: {
-            msg: { type: 'string' }
-          }
-        }
-      }
-    }
+            msg: { type: 'string' },
+          },
+        },
+      },
+    },
   };
   const control: ControlElement = {
     type: 'Control',
-    scope: '#/properties/comments'
+    scope: '#/properties/comments',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate unnamed array control', t => {
+test('generate unnamed array control', (t) => {
   const schema: JsonSchema = {
     type: 'array',
     items: {
       properties: {
-        msg: { type: 'string' }
-      }
-    }
+        msg: { type: 'string' },
+      },
+    },
   };
   const control: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate unnamed array control w/o type', t => {
+test('generate unnamed array control w/o type', (t) => {
   const schema: JsonSchema = {
     items: {
       properties: {
-        msg: { type: 'string' }
-      }
-    }
+        msg: { type: 'string' },
+      },
+    },
   };
   const control = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate for empty schema', t => {
+test('generate for empty schema', (t) => {
   const schema: JsonSchema = {};
   const uischema: Layout = null;
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate for null schema', t => {
+test('generate for null schema', (t) => {
   const schema: JsonSchema = null;
   const uischema: Layout = null;
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate for undefined schema', t => {
+test('generate for undefined schema', (t) => {
   const schema: JsonSchema = undefined;
   const uischema: Layout = null;
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate control for oneOf', t => {
+test('generate control for oneOf', (t) => {
   const schema: JsonSchema = {
     oneOf: [
       {
         properties: {
           name: {
-            type: 'string'
-          }
-        }
+            type: 'string',
+          },
+        },
       },
       {
-        type: 'number'
-      }
-    ]
+        type: 'number',
+      },
+    ],
   };
   const control = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate control for anyOf', t => {
+test('generate control for anyOf', (t) => {
   const schema: JsonSchema = {
     anyOf: [
       {
         properties: {
           name: {
-            type: 'string'
-          }
-        }
+            type: 'string',
+          },
+        },
       },
       {
-        type: 'number'
-      }
-    ]
+        type: 'number',
+      },
+    ],
   };
   const control = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate control for allOf', t => {
+test('generate control for allOf', (t) => {
   const schema: JsonSchema = {
     allOf: [
       {
         properties: {
           name: {
-            type: 'string'
-          }
-        }
+            type: 'string',
+          },
+        },
       },
       {
-        type: 'number'
-      }
-    ]
+        type: 'number',
+      },
+    ],
   };
   const control = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('no separate control for oneOf in array', t => {
+test('no separate control for oneOf in array', (t) => {
   const schema: JsonSchema = {
     properties: {
       myarray: {
@@ -500,30 +500,30 @@ test('no separate control for oneOf in array', t => {
             {
               properties: {
                 name: {
-                  type: 'string'
-                }
-              }
+                  type: 'string',
+                },
+              },
             },
             {
-              type: 'number'
-            }
-          ]
-        }
-      }
-    }
+              type: 'number',
+            },
+          ],
+        },
+      },
+    },
   };
   const control = {
     type: 'Control',
-    scope: '#/properties/myarray'
+    scope: '#/properties/myarray',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('generate control for nested oneOf', t => {
+test('generate control for nested oneOf', (t) => {
   const schema: JsonSchema = {
     properties: {
       myarray: {
@@ -533,44 +533,46 @@ test('generate control for nested oneOf', t => {
               {
                 properties: {
                   name: {
-                    type: 'string'
-                  }
-                }
+                    type: 'string',
+                  },
+                },
               },
               {
-                type: 'number'
-              }
-            ]
-          }
-        }
-      }
-    }
+                type: 'number',
+              },
+            ],
+          },
+        },
+      },
+    },
   };
   const control = {
     type: 'Control',
-    scope: '#/properties/myarray'
+    scope: '#/properties/myarray',
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [control]
+    elements: [control],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
 
-test('encode "/" in generated ui schema', t => {
+test('encode "/" in generated ui schema', (t) => {
   const schema: JsonSchema = {
     properties: {
       'some / initial / value': {
-        type : 'integer'
-      }
-    }
+        type: 'integer',
+      },
+    },
   };
   const uischema: Layout = {
     type: 'VerticalLayout',
-    elements: [{
-      type: 'Control',
-      scope: '#/properties/some ~1 initial ~1 value'
-    }] as ControlElement[]
+    elements: [
+      {
+        type: 'Control',
+        scope: '#/properties/some ~1 initial ~1 value',
+      },
+    ] as ControlElement[],
   };
   t.deepEqual(generateDefaultUISchema(schema), uischema);
 });
diff --git a/packages/core/test/i18n/i18nUtil.test.ts b/packages/core/test/i18n/i18nUtil.test.ts
index d2a1c5db3..177eac73c 100644
--- a/packages/core/test/i18n/i18nUtil.test.ts
+++ b/packages/core/test/i18n/i18nUtil.test.ts
@@ -24,19 +24,24 @@
 */
 import test from 'ava';
 
-import { ControlElement, getI18nKeyPrefixBySchema, i18nJsonSchema, transformPathToI18nPrefix } from '../../src';
+import {
+  ControlElement,
+  getI18nKeyPrefixBySchema,
+  i18nJsonSchema,
+  transformPathToI18nPrefix,
+} from '../../src';
 
-test('transformPathToI18nPrefix returns root when empty', t => {
+test('transformPathToI18nPrefix returns root when empty', (t) => {
   t.is(transformPathToI18nPrefix(''), 'root');
 });
 
-test('transformPathToI18nPrefix does not modify non-array paths', t => {
+test('transformPathToI18nPrefix does not modify non-array paths', (t) => {
   t.is(transformPathToI18nPrefix('foo'), 'foo');
   t.is(transformPathToI18nPrefix('foo.bar'), 'foo.bar');
   t.is(transformPathToI18nPrefix('bar3.foo2'), 'bar3.foo2');
 });
 
-test('transformPathToI18nPrefix removes array indices', t => {
+test('transformPathToI18nPrefix removes array indices', (t) => {
   t.is(transformPathToI18nPrefix('foo.2.bar'), 'foo.bar');
   t.is(transformPathToI18nPrefix('foo.234324234.bar'), 'foo.bar');
   t.is(transformPathToI18nPrefix('foo.0.bar'), 'foo.bar');
@@ -47,42 +52,42 @@ test('transformPathToI18nPrefix removes array indices', t => {
   t.is(transformPathToI18nPrefix('3'), 'root');
 });
 
-test('getI18nKeyPrefixBySchema gets key from uischema over schema', t => {
+test('getI18nKeyPrefixBySchema gets key from uischema over schema', (t) => {
   const control: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    i18n: 'controlFoo'
+    i18n: 'controlFoo',
   };
   const schema: i18nJsonSchema = {
     type: 'string',
-    i18n: 'schemaFoo'
-  }
+    i18n: 'schemaFoo',
+  };
   t.is(getI18nKeyPrefixBySchema(schema, control), 'controlFoo');
 });
 
-test('getI18nKeyPrefixBySchema gets schema key for missing uischema key', t => {
+test('getI18nKeyPrefixBySchema gets schema key for missing uischema key', (t) => {
   const control: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
   };
   const schema: i18nJsonSchema = {
     type: 'string',
-    i18n: 'schemaFoo'
-  }
+    i18n: 'schemaFoo',
+  };
   t.is(getI18nKeyPrefixBySchema(schema, control), 'schemaFoo');
 });
 
-test('getI18nKeyPrefixBySchema returns undefined for missing uischema and schema keys', t => {
+test('getI18nKeyPrefixBySchema returns undefined for missing uischema and schema keys', (t) => {
   const control: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
   };
   const schema: i18nJsonSchema = {
     type: 'string',
-  }
+  };
   t.is(getI18nKeyPrefixBySchema(schema, control), undefined);
 });
 
-test('getI18nKeyPrefixBySchema returns undefined for undefined parameters', t => {
+test('getI18nKeyPrefixBySchema returns undefined for undefined parameters', (t) => {
   t.is(getI18nKeyPrefixBySchema(undefined, undefined), undefined);
-});
\ No newline at end of file
+});
diff --git a/packages/core/test/reducers/core.test.ts b/packages/core/test/reducers/core.test.ts
index 6f1606916..27079a5f8 100644
--- a/packages/core/test/reducers/core.test.ts
+++ b/packages/core/test/reducers/core.test.ts
@@ -25,33 +25,40 @@
 import test from 'ava';
 import Ajv from 'ajv';
 import { coreReducer } from '../../src/reducers';
-import { init, setSchema, setValidationMode, update, updateCore, updateErrors } from '../../src/actions';
+import {
+  init,
+  setSchema,
+  setValidationMode,
+  update,
+  updateCore,
+  updateErrors,
+} from '../../src/actions';
 import { JsonSchema } from '../../src/models/jsonSchema';
 import {
   errorAt,
   JsonFormsCore,
   validate,
-  subErrorsAt
+  subErrorsAt,
 } from '../../src/reducers/core';
 
 import { cloneDeep } from 'lodash';
 import { createAjv } from '../../src/util/validator';
 
-test('core reducer should support v7', t => {
+test('core reducer should support v7', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
   const after = coreReducer(
     undefined,
     init(
       {
-        foo: 'baz'
+        foo: 'baz',
       },
       schema
     )
@@ -59,98 +66,100 @@ test('core reducer should support v7', t => {
   t.is(after.errors.length, 1);
 });
 
-test('core reducer - no previous state - init without options should create new ajv', t => {
+test('core reducer - no previous state - init without options should create new ajv', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
   const after = coreReducer(undefined, init({}, schema, undefined, undefined));
   t.true(after.ajv !== undefined);
 });
 
-test('core reducer - no previous state - init with ajv as options object should use it', t => {
+test('core reducer - no previous state - init with ajv as options object should use it', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
   const myAjv = new Ajv();
   const after = coreReducer(undefined, init({}, schema, undefined, myAjv));
   t.deepEqual(after.ajv, myAjv);
 });
 
-test('core reducer - no previous state - init with empty options object', t => {
+test('core reducer - no previous state - init with empty options object', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
   const after = coreReducer(undefined, init({}, schema, undefined, {}));
   t.true(after.ajv !== undefined);
 });
 
-test('core reducer - no previous state - init with options object with ajv', t => {
+test('core reducer - no previous state - init with options object with ajv', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
   const myAjv = new Ajv();
   const after = coreReducer(
     undefined,
     init({}, schema, undefined, {
-      ajv: myAjv
+      ajv: myAjv,
     })
   );
   t.deepEqual(after.ajv, myAjv);
 });
 
-test('core reducer - previous state - init without options should keep previous objects', t => {
+test('core reducer - previous state - init without options should keep previous objects', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
   const myAjv = new Ajv();
-  const additionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'foo'
+  const additionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'foo',
+      },
     },
-  }];
+  ];
   const after = coreReducer(
     {
       data: {},
       schema: {},
       uischema: {
-        type: 'Label'
+        type: 'Label',
       },
       ajv: myAjv,
-      additionalErrors
+      additionalErrors,
     },
     init({}, schema)
   );
@@ -158,15 +167,15 @@ test('core reducer - previous state - init without options should keep previous
   t.deepEqual(after.additionalErrors, additionalErrors);
 });
 
-test('core reducer - previous state - init with ajv options object should overwrite ajv', t => {
+test('core reducer - previous state - init with ajv options object should overwrite ajv', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
   const previousAjv = new Ajv();
   const newAjv = new Ajv();
@@ -175,7 +184,7 @@ test('core reducer - previous state - init with ajv options object should overwr
       data: {},
       schema: {},
       uischema: {
-        type: 'Label'
+        type: 'Label',
       },
       ajv: previousAjv,
     },
@@ -184,78 +193,84 @@ test('core reducer - previous state - init with ajv options object should overwr
   t.deepEqual(after.ajv, newAjv);
 });
 
-test('core reducer - previous state - init with additionalErrors option object should overwrite additionalErrors', t => {
+test('core reducer - previous state - init with additionalErrors option object should overwrite additionalErrors', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
 
-  const prevAdditionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'foo'
-    },
-  }];
-  const currentAdditionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'bar'
+  const prevAdditionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'foo',
+      },
     },
-  }];
+  ];
+  const currentAdditionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'bar',
+      },
+    },
+  ];
   const after = coreReducer(
     {
       data: {},
       schema: {},
       uischema: {
-        type: 'Label'
+        type: 'Label',
       },
-      additionalErrors: prevAdditionalErrors
+      additionalErrors: prevAdditionalErrors,
     },
     init({}, schema, undefined, { additionalErrors: currentAdditionalErrors })
   );
   t.deepEqual(after.additionalErrors, currentAdditionalErrors);
 });
 
-test('core reducer - previous state - init with empty options should not overwrite', t => {
+test('core reducer - previous state - init with empty options should not overwrite', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        const: 'bar'
-      }
-    }
+        const: 'bar',
+      },
+    },
   };
   const myAjv = new Ajv();
-  const additionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'foo'
+  const additionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'foo',
+      },
     },
-  }];
+  ];
   const after = coreReducer(
     {
       data: {},
       schema: {},
       uischema: {
-        type: 'Label'
+        type: 'Label',
       },
       ajv: myAjv,
-      additionalErrors
+      additionalErrors,
     },
     init({}, schema, undefined, {})
   );
@@ -263,17 +278,17 @@ test('core reducer - previous state - init with empty options should not overwri
   t.deepEqual(after.additionalErrors, additionalErrors);
 });
 
-test('core reducer - previous state - init with undefined data should not change data', t => {
+test('core reducer - previous state - init with undefined data should not change data', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
+        type: 'string',
       },
       color: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const after = coreReducer(
@@ -281,23 +296,23 @@ test('core reducer - previous state - init with undefined data should not change
       data: undefined,
       schema: {},
       uischema: {
-        type: 'Label'
-      }
+        type: 'Label',
+      },
     },
     init(undefined, schema, undefined, {})
   );
   t.deepEqual(after.data, undefined);
 });
 
-test('core reducer - previous state - init schema with id', t => {
+test('core reducer - previous state - init schema with id', (t) => {
   const schema: JsonSchema = {
     $id: 'https://www.jsonforms.io/example.json',
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
   const updatedSchema = cloneDeep(schema);
   updatedSchema.properties.animal.minLength = 5;
@@ -314,63 +329,63 @@ test('core reducer - previous state - init schema with id', t => {
   t.is(after.schema.properties.animal.minLength, 5);
 });
 
-test('core reducer - update - undefined data should update for given path', t => {
+test('core reducer - update - undefined data should update for given path', (t) => {
   const schema = {
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const before: JsonFormsCore = {
     data: undefined,
     schema: schema,
     uischema: {
-      type: 'Label'
+      type: 'Label',
     },
     errors: [],
-    validator: new Ajv().compile(schema)
+    validator: new Ajv().compile(schema),
   };
 
   const after = coreReducer(
     before,
-    update('foo', _ => {
+    update('foo', (_) => {
       return 'bar';
     })
   );
 
   t.not(before, after);
   t.not(before.data, after.data);
-  t.deepEqual(after, { ...before, data: { foo: 'bar'} });
+  t.deepEqual(after, { ...before, data: { foo: 'bar' } });
 });
 
-test('core reducer - update - path is undefined state should remain same', t => {
+test('core reducer - update - path is undefined state should remain same', (t) => {
   const before: JsonFormsCore = {
     data: {
       foo: 'bar',
       baz: {
-        bar: 'bar'
-      }
+        bar: 'bar',
+      },
     },
     schema: {
       type: 'object',
       properties: {
         foo: {
           type: 'string',
-          const: 'bar'
-        }
-      }
+          const: 'bar',
+        },
+      },
     },
     uischema: {
-      type: 'Label'
-    }
+      type: 'Label',
+    },
   };
 
   const after = coreReducer(
     before,
-    update(undefined, _ => {
+    update(undefined, (_) => {
       return { foo: 'anything' };
     })
   );
@@ -381,31 +396,31 @@ test('core reducer - update - path is undefined state should remain same', t =>
   t.deepEqual(before, after);
 });
 
-test('core reducer - update - path is null state should remain same', t => {
+test('core reducer - update - path is null state should remain same', (t) => {
   const before: JsonFormsCore = {
     data: {
       foo: 'bar',
       baz: {
-        bar:'bar'
-      }
+        bar: 'bar',
+      },
     },
     schema: {
       type: 'object',
       properties: {
         foo: {
           type: 'string',
-          const: 'bar'
-        }
-      }
+          const: 'bar',
+        },
+      },
     },
     uischema: {
-      type: 'Label'
-    }
+      type: 'Label',
+    },
   };
 
   const after = coreReducer(
     before,
-    update(null, _ => {
+    update(null, (_) => {
       return { foo: 'anything' };
     })
   );
@@ -416,34 +431,34 @@ test('core reducer - update - path is null state should remain same', t => {
   t.deepEqual(before, after);
 });
 
-test('core reducer - update - empty path should update root state', t => {
+test('core reducer - update - empty path should update root state', (t) => {
   const schema = {
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const before: JsonFormsCore = {
     data: {
       foo: 'bar',
       baz: {
-        bar:'bar'
-      }
+        bar: 'bar',
+      },
     },
     errors: [],
     schema,
     uischema: {
-      type: 'Label'
+      type: 'Label',
     },
-    validator: new Ajv().compile(schema)
+    validator: new Ajv().compile(schema),
   };
 
   const after = coreReducer(
     before,
-    update('', _ => {
+    update('', (_) => {
       return { foo: 'xyz' };
     })
   );
@@ -453,17 +468,17 @@ test('core reducer - update - empty path should update root state', t => {
   t.deepEqual(after, { ...before, data: { foo: 'xyz' } });
 });
 
-test('core reducer - update - providing a path should update data only belonging to path', t => {
+test('core reducer - update - providing a path should update data only belonging to path', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
+        type: 'string',
       },
       color: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const before: JsonFormsCore = {
@@ -471,20 +486,20 @@ test('core reducer - update - providing a path should update data only belonging
       animal: 'Sloth',
       color: 'Blue',
       baz: {
-        bar: 'bar'
-      }
+        bar: 'bar',
+      },
     },
     errors: [],
     schema,
     uischema: {
-      type: 'Label'
+      type: 'Label',
     },
-    validator: new Ajv().compile(schema)
+    validator: new Ajv().compile(schema),
   };
 
   const after = coreReducer(
     before,
-    update('color', _ => {
+    update('color', (_) => {
       return 'Green';
     })
   );
@@ -495,18 +510,18 @@ test('core reducer - update - providing a path should update data only belonging
   t.deepEqual(after, { ...before, data: { ...before.data, color: 'Green' } });
 });
 
-test('core reducer - update - should update errors', t => {
+test('core reducer - update - should update errors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
+        type: 'string',
       },
       color: {
         type: 'string',
-        enum: ['Blue', 'Green']
-      }
-    }
+        enum: ['Blue', 'Green'],
+      },
+    },
   };
 
   const before: JsonFormsCore = {
@@ -517,14 +532,14 @@ test('core reducer - update - should update errors', t => {
     errors: [],
     schema,
     uischema: {
-      type: 'Label'
+      type: 'Label',
     },
-    validator: new Ajv().compile(schema)
+    validator: new Ajv().compile(schema),
   };
 
   const after = coreReducer(
     before,
-    update('color', _ => {
+    update('color', (_) => {
       return 'Yellow';
     })
   );
@@ -538,31 +553,31 @@ test('core reducer - update - should update errors', t => {
         keyword: 'enum',
         message: 'must be equal to one of the allowed values',
         params: {
-          allowedValues: ['Blue', 'Green']
+          allowedValues: ['Blue', 'Green'],
         },
-        schemaPath: '#/properties/color/enum'
-      }
-    ]
+        schemaPath: '#/properties/color/enum',
+      },
+    ],
   });
 });
 
-test('core reducer - updateErrors - should update errors with empty list', t => {
+test('core reducer - updateErrors - should update errors with empty list', (t) => {
   const before: JsonFormsCore = {
     data: {},
     schema: {},
-    uischema: undefined
+    uischema: undefined,
   };
 
   const after = coreReducer(before, updateErrors([]));
   t.deepEqual(after, { ...before, errors: [] });
 });
 
-test('core reducer - updateErrors - should update errors with error', t => {
+test('core reducer - updateErrors - should update errors with error', (t) => {
   const before: JsonFormsCore = {
     data: {},
     schema: {},
     uischema: undefined,
-    errors: []
+    errors: [],
   };
 
   const error = {
@@ -570,41 +585,41 @@ test('core reducer - updateErrors - should update errors with error', t => {
     keyword: 'enum',
     message: 'should be equal to one of the allowed values',
     params: {
-      allowedValues: ['Blue', 'Green']
+      allowedValues: ['Blue', 'Green'],
     },
-    schemaPath: '#/properties/color/enum'
+    schemaPath: '#/properties/color/enum',
   };
 
   const after = coreReducer(before, updateErrors([error]));
   t.deepEqual(after, { ...before, errors: [error] });
 });
 
-test('core reducer - updateErrors - should update errors with undefined', t => {
+test('core reducer - updateErrors - should update errors with undefined', (t) => {
   const before: JsonFormsCore = {
     data: {},
     schema: {},
     uischema: undefined,
-    errors: []
+    errors: [],
   };
 
   const after = coreReducer(before, updateErrors(undefined));
   t.deepEqual(after, { ...before, errors: undefined });
 });
 
-test('errorAt filters enum', t => {
+test('errorAt filters enum', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       bar: {
         type: 'string',
-        enum: ['f', 'b']
+        enum: ['f', 'b'],
       },
       foo: {
         type: 'string',
-        enum: ['f', 'b']
-      }
-    }
+        enum: ['f', 'b'],
+      },
+    },
   };
   const data = { foo: '', bar: '' };
   const v = ajv.compile(schema);
@@ -614,28 +629,28 @@ test('errorAt filters enum', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt('foo', schema.properties.foo)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters required', t => {
+test('errorAt filters required', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       bar: {
         type: 'string',
-        enum: ['f', 'b']
+        enum: ['f', 'b'],
       },
       foo: {
         type: 'string',
-        enum: ['f', 'b']
-      }
+        enum: ['f', 'b'],
+      },
     },
-    required: ['bar', 'foo']
+    required: ['bar', 'foo'],
   };
   const data = {};
   const v = ajv.compile(schema);
@@ -645,14 +660,14 @@ test('errorAt filters required', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt('foo', schema.properties.foo)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters required in oneOf object', t => {
+test('errorAt filters required in oneOf object', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -664,29 +679,29 @@ test('errorAt filters required in oneOf object', t => {
             type: 'object',
             properties: {
               foo: {
-                type: 'string'
-              }
+                type: 'string',
+              },
             },
             required: ['foo'],
-            additionalProperties: false
+            additionalProperties: false,
           },
           {
             title: 'Bar',
             type: 'object',
             properties: {
               bar: {
-                type: 'number'
-              }
+                type: 'number',
+              },
             },
             required: ['bar'],
-            additionalProperties: false
-          }
-        ]
-      }
+            additionalProperties: false,
+          },
+        ],
+      },
     },
-    additionalProperties: false
+    additionalProperties: false,
   };
-  const data = { fooOrBar: { } };
+  const data = { fooOrBar: {} };
   const v = ajv.compile(schema);
   const errors = validate(v, data);
 
@@ -694,7 +709,7 @@ test('errorAt filters required in oneOf object', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt(
     'fooOrBar.foo',
@@ -704,7 +719,7 @@ test('errorAt filters required in oneOf object', t => {
   t.deepEqual(filtered[0].keyword, 'required');
 });
 
-test('errorAt filters required in anyOf object', t => {
+test('errorAt filters required in anyOf object', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -716,29 +731,29 @@ test('errorAt filters required in anyOf object', t => {
             type: 'object',
             properties: {
               foo: {
-                type: 'string'
-              }
+                type: 'string',
+              },
             },
             required: ['foo'],
-            additionalProperties: false
+            additionalProperties: false,
           },
           {
             title: 'Bar',
             type: 'object',
             properties: {
               bar: {
-                type: 'number'
-              }
+                type: 'number',
+              },
             },
             required: ['bar'],
-            additionalProperties: false
-          }
-        ]
-      }
+            additionalProperties: false,
+          },
+        ],
+      },
     },
-    additionalProperties: false
+    additionalProperties: false,
   };
-  const data = { fooOrBar: { } };
+  const data = { fooOrBar: {} };
   const v = ajv.compile(schema);
   const errors = validate(v, data);
 
@@ -746,7 +761,7 @@ test('errorAt filters required in anyOf object', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt(
     'fooOrBar.foo',
@@ -756,7 +771,7 @@ test('errorAt filters required in anyOf object', t => {
   t.deepEqual(filtered[0].keyword, 'required');
 });
 
-test('errorAt filters array minItems', t => {
+test('errorAt filters array minItems', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -767,9 +782,9 @@ test('errorAt filters array minItems', t => {
         items: {
           title: 'Type',
           type: 'string',
-          enum: ['One', 'Two', 'Three']
+          enum: ['One', 'Two', 'Three'],
         },
-        minItems: 1
+        minItems: 1,
       },
       colours: {
         title: 'Colours',
@@ -777,15 +792,15 @@ test('errorAt filters array minItems', t => {
         items: {
           title: 'Type',
           type: 'string',
-          enum: ['Red', 'Green', 'Blue']
+          enum: ['Red', 'Green', 'Blue'],
         },
-        minItems: 1
-      }
-    }
+        minItems: 1,
+      },
+    },
   };
   const data: { colours: string[]; numbers: string[] } = {
     colours: [],
-    numbers: []
+    numbers: [],
   };
   const v = ajv.compile(schema);
   const errors = validate(v, data);
@@ -794,14 +809,14 @@ test('errorAt filters array minItems', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt('colours', schema.properties.colours)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters array inner value', t => {
+test('errorAt filters array inner value', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -812,9 +827,9 @@ test('errorAt filters array inner value', t => {
         items: {
           title: 'Type',
           type: 'string',
-          enum: ['One', 'Two', 'Three']
+          enum: ['One', 'Two', 'Three'],
         },
-        minItems: 1
+        minItems: 1,
       },
       colours: {
         title: 'Colours',
@@ -822,15 +837,15 @@ test('errorAt filters array inner value', t => {
         items: {
           title: 'Type',
           type: 'string',
-          enum: ['Red', 'Green', 'Blue']
+          enum: ['Red', 'Green', 'Blue'],
         },
-        minItems: 1
-      }
-    }
+        minItems: 1,
+      },
+    },
   };
   const data: { colours: string[]; numbers: string[] } = {
     colours: ['Foo'],
-    numbers: ['Bar']
+    numbers: ['Bar'],
   };
   const v = ajv.compile(schema);
   const errors = validate(v, data);
@@ -839,14 +854,14 @@ test('errorAt filters array inner value', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt('colours.0', schema.properties.colours)(state);
   t.is(filtered.length, 1);
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters oneOf simple', t => {
+test('errorAt filters oneOf simple', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -856,16 +871,16 @@ test('errorAt filters oneOf simple', t => {
           {
             title: 'Numbers',
             type: 'string',
-            enum: ['One', 'Two', 'Three']
+            enum: ['One', 'Two', 'Three'],
           },
           {
             title: 'Colours',
             type: 'string',
-            enum: ['Red', 'Green', 'Blue']
-          }
-        ]
-      }
-    }
+            enum: ['Red', 'Green', 'Blue'],
+          },
+        ],
+      },
+    },
   };
   const data: { coloursOrNumbers: string } = { coloursOrNumbers: 'Foo' };
   const v = ajv.compile(schema);
@@ -875,7 +890,7 @@ test('errorAt filters oneOf simple', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt(
     'coloursOrNumbers',
@@ -885,7 +900,7 @@ test('errorAt filters oneOf simple', t => {
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters anyOf simple', t => {
+test('errorAt filters anyOf simple', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -895,16 +910,16 @@ test('errorAt filters anyOf simple', t => {
           {
             title: 'Numbers',
             type: 'string',
-            enum: ['One', 'Two', 'Three']
+            enum: ['One', 'Two', 'Three'],
           },
           {
             title: 'Colours',
             type: 'string',
-            enum: ['Red', 'Green', 'Blue']
-          }
-        ]
-      }
-    }
+            enum: ['Red', 'Green', 'Blue'],
+          },
+        ],
+      },
+    },
   };
   const data: { coloursOrNumbers: string } = { coloursOrNumbers: 'Foo' };
   const v = ajv.compile(schema);
@@ -914,7 +929,7 @@ test('errorAt filters anyOf simple', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt(
     'coloursOrNumbers',
@@ -924,7 +939,7 @@ test('errorAt filters anyOf simple', t => {
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters oneOf objects', t => {
+test('errorAt filters oneOf objects', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -938,10 +953,10 @@ test('errorAt filters oneOf objects', t => {
               number: {
                 title: 'Type',
                 type: 'string',
-                enum: ['One', 'Two', 'Three']
-              }
+                enum: ['One', 'Two', 'Three'],
+              },
             },
-            additionalProperties: false
+            additionalProperties: false,
           },
           {
             title: 'Colours',
@@ -950,15 +965,15 @@ test('errorAt filters oneOf objects', t => {
               colour: {
                 title: 'Type',
                 type: 'string',
-                enum: ['Red', 'Green', 'Blue']
-              }
+                enum: ['Red', 'Green', 'Blue'],
+              },
             },
-            additionalProperties: false
-          }
-        ]
-      }
+            additionalProperties: false,
+          },
+        ],
+      },
     },
-    additionalProperties: false
+    additionalProperties: false,
   };
   const data = { coloursOrNumbers: { colour: 'Foo' } };
   const v = ajv.compile(schema);
@@ -968,7 +983,7 @@ test('errorAt filters oneOf objects', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt(
     'coloursOrNumbers.colour',
@@ -979,7 +994,7 @@ test('errorAt filters oneOf objects', t => {
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters oneOf objects same properties', t => {
+test('errorAt filters oneOf objects same properties', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -993,9 +1008,9 @@ test('errorAt filters oneOf objects same properties', t => {
               colourOrNumber: {
                 title: 'Type',
                 type: 'string',
-                enum: ['One', 'Two', 'Three']
-              }
-            }
+                enum: ['One', 'Two', 'Three'],
+              },
+            },
           },
           {
             title: 'Colours',
@@ -1004,13 +1019,13 @@ test('errorAt filters oneOf objects same properties', t => {
               colourOrNumber: {
                 title: 'Type',
                 type: 'string',
-                enum: ['Red', 'Green', 'Blue']
-              }
-            }
-          }
-        ]
-      }
-    }
+                enum: ['Red', 'Green', 'Blue'],
+              },
+            },
+          },
+        ],
+      },
+    },
   };
   const data = { coloursOrNumbers: { colourOrNumber: 'Foo' } };
   const v = ajv.compile(schema);
@@ -1020,7 +1035,7 @@ test('errorAt filters oneOf objects same properties', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt(
     'coloursOrNumbers.colourOrNumber',
@@ -1030,7 +1045,7 @@ test('errorAt filters oneOf objects same properties', t => {
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters oneOf array', t => {
+test('errorAt filters oneOf array', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -1043,9 +1058,9 @@ test('errorAt filters oneOf array', t => {
             items: {
               title: 'Type',
               type: 'string',
-              enum: ['One', 'Two', 'Three']
+              enum: ['One', 'Two', 'Three'],
             },
-            minItems: 1
+            minItems: 1,
           },
           {
             title: 'Colours',
@@ -1053,13 +1068,13 @@ test('errorAt filters oneOf array', t => {
             items: {
               title: 'Type',
               type: 'string',
-              enum: ['Red', 'Green', 'Blue']
+              enum: ['Red', 'Green', 'Blue'],
             },
-            minItems: 1
-          }
-        ]
-      }
-    }
+            minItems: 1,
+          },
+        ],
+      },
+    },
   };
   const data: { coloursOrNumbers: string[] } = { coloursOrNumbers: [] };
   const v = ajv.compile(schema);
@@ -1069,7 +1084,7 @@ test('errorAt filters oneOf array', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt(
     'coloursOrNumbers',
@@ -1079,7 +1094,7 @@ test('errorAt filters oneOf array', t => {
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt filters oneOf array inner', t => {
+test('errorAt filters oneOf array inner', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -1092,9 +1107,9 @@ test('errorAt filters oneOf array inner', t => {
             items: {
               title: 'Type',
               type: 'string',
-              enum: ['One', 'Two', 'Three']
+              enum: ['One', 'Two', 'Three'],
             },
-            minItems: 1
+            minItems: 1,
           },
           {
             title: 'Colours',
@@ -1102,13 +1117,13 @@ test('errorAt filters oneOf array inner', t => {
             items: {
               title: 'Type',
               type: 'string',
-              enum: ['Red', 'Green', 'Blue']
+              enum: ['Red', 'Green', 'Blue'],
             },
-            minItems: 1
-          }
-        ]
-      }
-    }
+            minItems: 1,
+          },
+        ],
+      },
+    },
   };
   const data: { coloursOrNumbers: string[] } = { coloursOrNumbers: ['Foo'] };
   const v = ajv.compile(schema);
@@ -1118,7 +1133,7 @@ test('errorAt filters oneOf array inner', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = errorAt(
     'coloursOrNumbers',
@@ -1127,7 +1142,7 @@ test('errorAt filters oneOf array inner', t => {
   t.is(filtered.length, 0);
 });
 
-test('subErrorsAt filters array inner', t => {
+test('subErrorsAt filters array inner', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -1138,9 +1153,9 @@ test('subErrorsAt filters array inner', t => {
         items: {
           title: 'Type',
           type: 'string',
-          enum: ['One', 'Two', 'Three']
+          enum: ['One', 'Two', 'Three'],
         },
-        minItems: 1
+        minItems: 1,
       },
       colours: {
         title: 'Colours',
@@ -1148,15 +1163,15 @@ test('subErrorsAt filters array inner', t => {
         items: {
           title: 'Type',
           type: 'string',
-          enum: ['Red', 'Green', 'Blue']
+          enum: ['Red', 'Green', 'Blue'],
         },
-        minItems: 1
-      }
-    }
+        minItems: 1,
+      },
+    },
   };
   const data: { colours: string[]; numbers: string[] } = {
     colours: ['Foo'],
-    numbers: ['Bar']
+    numbers: ['Bar'],
   };
   const v = ajv.compile(schema);
   const errors = validate(v, data);
@@ -1165,7 +1180,7 @@ test('subErrorsAt filters array inner', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = subErrorsAt(
     'colours',
@@ -1175,7 +1190,7 @@ test('subErrorsAt filters array inner', t => {
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('subErrorsAt only returning suberrors', t => {
+test('subErrorsAt only returning suberrors', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -1187,13 +1202,13 @@ test('subErrorsAt only returning suberrors', t => {
         items: {
           title: 'Type',
           type: 'string',
-          enum: ['One', 'Two', 'Three']
+          enum: ['One', 'Two', 'Three'],
         },
-      }
-    }
+      },
+    },
   };
   const data: { numbers: string[] } = {
-    numbers: []
+    numbers: [],
   };
   const v = ajv.compile(schema);
   const errors = validate(v, data);
@@ -1202,7 +1217,7 @@ test('subErrorsAt only returning suberrors', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const subErrors = subErrorsAt(
     'numbers',
@@ -1211,7 +1226,7 @@ test('subErrorsAt only returning suberrors', t => {
   t.is(subErrors.length, 0);
 });
 
-test('subErrorsAt filters oneOf array inner', t => {
+test('subErrorsAt filters oneOf array inner', (t) => {
   const ajv = createAjv();
   const schema: JsonSchema = {
     type: 'object',
@@ -1224,9 +1239,9 @@ test('subErrorsAt filters oneOf array inner', t => {
             items: {
               title: 'Type',
               type: 'string',
-              enum: ['One', 'Two', 'Three']
+              enum: ['One', 'Two', 'Three'],
             },
-            minItems: 1
+            minItems: 1,
           },
           {
             title: 'Colours',
@@ -1234,13 +1249,13 @@ test('subErrorsAt filters oneOf array inner', t => {
             items: {
               title: 'Type',
               type: 'string',
-              enum: ['Red', 'Green', 'Blue']
+              enum: ['Red', 'Green', 'Blue'],
             },
-            minItems: 1
-          }
-        ]
-      }
-    }
+            minItems: 1,
+          },
+        ],
+      },
+    },
   };
   const data: { coloursOrNumbers: string[] } = { coloursOrNumbers: ['Foo'] };
   const v = ajv.compile(schema);
@@ -1250,7 +1265,7 @@ test('subErrorsAt filters oneOf array inner', t => {
     data,
     schema,
     uischema: undefined,
-    errors
+    errors,
   };
   const filtered = subErrorsAt(
     'coloursOrNumbers',
@@ -1260,18 +1275,18 @@ test('subErrorsAt filters oneOf array inner', t => {
   t.deepEqual(filtered[0], state.errors[1]);
 });
 
-test('errorAt respects hide validation mode', t => {
+test('errorAt respects hide validation mode', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
   const core: JsonFormsCore = coreReducer(
@@ -1280,31 +1295,33 @@ test('errorAt respects hide validation mode', t => {
   );
   t.is(core.errors.length, 1);
   t.is(errorAt('animal', schema)(core).length, 0);
-})
+});
 
-test('errorAt contains additionalErrors', t => {
+test('errorAt contains additionalErrors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
-  const additionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'animal'
+  const additionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'animal',
+      },
     },
-  }];
+  ];
   const core: JsonFormsCore = coreReducer(
     undefined,
     init(data, schema, undefined, { additionalErrors })
@@ -1316,32 +1333,37 @@ test('errorAt contains additionalErrors', t => {
   t.true(errorsAt.indexOf(additionalErrors[0]) > -1);
 });
 
-test('errorAt contains additionalErrors for validation mode NoValidation ', t => {
+test('errorAt contains additionalErrors for validation mode NoValidation ', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
-  const additionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'animal'
+  const additionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'animal',
+      },
     },
-  }];
+  ];
   const core: JsonFormsCore = coreReducer(
     undefined,
-    init(data, schema, undefined, { additionalErrors, validationMode: 'NoValidation' })
+    init(data, schema, undefined, {
+      additionalErrors,
+      validationMode: 'NoValidation',
+    })
   );
   t.is(core.errors.length, 0);
   t.is(core.additionalErrors.length, 1);
@@ -1350,32 +1372,37 @@ test('errorAt contains additionalErrors for validation mode NoValidation ', t =>
   t.is(errorsAt.indexOf(additionalErrors[0]), 0);
 });
 
-test('errorAt contains additionalErrors for validation mode ValidateAndHide ', t => {
+test('errorAt contains additionalErrors for validation mode ValidateAndHide ', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
-  const additionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'animal'
+  const additionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'animal',
+      },
     },
-  }];
+  ];
   const core: JsonFormsCore = coreReducer(
     undefined,
-    init(data, schema, undefined, { additionalErrors, validationMode: 'ValidateAndHide' })
+    init(data, schema, undefined, {
+      additionalErrors,
+      validationMode: 'ValidateAndHide',
+    })
   );
   t.is(core.errors.length, 1);
   t.is(core.additionalErrors.length, 1);
@@ -1384,18 +1411,18 @@ test('errorAt contains additionalErrors for validation mode ValidateAndHide ', t
   t.is(errorsAt.indexOf(additionalErrors[0]), 0);
 });
 
-test('core reducer - setValidationMode - No validation should not produce errors', t => {
+test('core reducer - setValidationMode - No validation should not produce errors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
   const core: JsonFormsCore = coreReducer(
@@ -1406,18 +1433,18 @@ test('core reducer - setValidationMode - No validation should not produce errors
   t.is(core.validationMode, 'NoValidation');
 });
 
-test('core reducer - setValidationMode - No validation should remove errors', t => {
+test('core reducer - setValidationMode - No validation should remove errors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
   const before: JsonFormsCore = coreReducer(undefined, init(data, schema));
@@ -1428,27 +1455,27 @@ test('core reducer - setValidationMode - No validation should remove errors', t
   t.is(after.validationMode, 'NoValidation');
 });
 
-test('core reducer - init - ValidateAndShow should be default validationMode', t => {
+test('core reducer - init - ValidateAndShow should be default validationMode', (t) => {
   const data = {
-    animal: 100
+    animal: 100,
   };
 
   const core: JsonFormsCore = coreReducer(undefined, init(data));
   t.is(core.validationMode, 'ValidateAndShow');
 });
 
-test('core reducer - init - Validation should produce errors', t => {
+test('core reducer - init - Validation should produce errors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
   const coreShow: JsonFormsCore = coreReducer(
@@ -1466,18 +1493,18 @@ test('core reducer - init - Validation should produce errors', t => {
   t.is(coreHide.validationMode, 'ValidateAndHide');
 });
 
-test('core reducer - setValidationMode - Validation should produce errors', t => {
+test('core reducer - setValidationMode - Validation should produce errors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
   const before: JsonFormsCore = coreReducer(
@@ -1499,24 +1526,21 @@ test('core reducer - setValidationMode - Validation should produce errors', t =>
   t.is(coreHide.errors.length, 1);
 });
 
-test('core reducer - setValidationMode - Hide validation should preserve errors', t => {
+test('core reducer - setValidationMode - Hide validation should preserve errors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 100
+    animal: 100,
   };
 
-  const before: JsonFormsCore = coreReducer(
-    undefined,
-    init(data, schema)
-  );
+  const before: JsonFormsCore = coreReducer(undefined, init(data, schema));
   t.is(before.errors.length, 1);
 
   const after: JsonFormsCore = coreReducer(
@@ -1526,18 +1550,18 @@ test('core reducer - setValidationMode - Hide validation should preserve errors'
   t.is(after.errors.length, 1);
 });
 
-test('core reducer - update - NoValidation should not produce errors', t => {
+test('core reducer - update - NoValidation should not produce errors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 'dog'
+    animal: 'dog',
   };
 
   const before: JsonFormsCore = coreReducer(
@@ -1553,18 +1577,18 @@ test('core reducer - update - NoValidation should not produce errors', t => {
   t.is(after.errors.length, 0);
 });
 
-test('core reducer - update - ValidateAndHide should produce errors', t => {
+test('core reducer - update - ValidateAndHide should produce errors', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 'dog'
+    animal: 'dog',
   };
 
   const before: JsonFormsCore = coreReducer(
@@ -1580,23 +1604,20 @@ test('core reducer - update - ValidateAndHide should produce errors', t => {
   t.is(after.errors.length, 1);
 });
 
-test('core reducer - update core - state should be unchanged when nothing changes', t => {
+test('core reducer - update core - state should be unchanged when nothing changes', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 'dog'
+    animal: 'dog',
   };
-  const before: JsonFormsCore = coreReducer(
-    undefined,
-    init(data, schema)
-    );
+  const before: JsonFormsCore = coreReducer(undefined, init(data, schema));
 
   const after: JsonFormsCore = coreReducer(
     before,
@@ -1605,29 +1626,31 @@ test('core reducer - update core - state should be unchanged when nothing change
   t.true(before === after);
 });
 
-test('core reducer - update core - unchanged state properties should be unchanged when state changes', t => {
+test('core reducer - update core - unchanged state properties should be unchanged when state changes', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 'dog'
+    animal: 'dog',
   };
-  const before: JsonFormsCore = coreReducer(
-    undefined,
-    init(data, schema)
-    );
+  const before: JsonFormsCore = coreReducer(undefined, init(data, schema));
 
   const afterDataUpdate: JsonFormsCore = coreReducer(
     before,
-    updateCore({
-      animal: 'cat'
-    }, before.schema, before.uischema, { ajv: before.ajv, additionalErrors: before.additionalErrors })
+    updateCore(
+      {
+        animal: 'cat',
+      },
+      before.schema,
+      before.uischema,
+      { ajv: before.ajv, additionalErrors: before.additionalErrors }
+    )
   );
   t.true(before.schema === afterDataUpdate.schema);
   t.true(before.ajv === afterDataUpdate.ajv);
@@ -1641,64 +1664,68 @@ test('core reducer - update core - unchanged state properties should be unchange
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
+        type: 'string',
       },
       id: {
-        type: 'number'
-      }
-    }
+        type: 'number',
+      },
+    },
   };
   // check that data stays unchanged as well
-  const afterSchemaUpdate : JsonFormsCore = coreReducer(
+  const afterSchemaUpdate: JsonFormsCore = coreReducer(
     before,
     updateCore(before.data, updatedSchema, before.uischema, before.ajv)
   );
   t.true(before.data === afterSchemaUpdate.data);
 });
 
-test('core reducer - update core - additionalErrors should update', t => {
+test('core reducer - update core - additionalErrors should update', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const data = {
-    animal: 'dog'
+    animal: 'dog',
   };
   const before: JsonFormsCore = coreReducer(
     undefined,
     init(data, schema, undefined, { additionalErrors: [] })
   );
 
-  const additionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'animal'
+  const additionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'animal',
+      },
     },
-  }];
+  ];
   const after: JsonFormsCore = coreReducer(
     before,
-    updateCore(before.data, before.schema, before.uischema, { additionalErrors })
+    updateCore(before.data, before.schema, before.uischema, {
+      additionalErrors,
+    })
   );
   t.true(after.additionalErrors === additionalErrors);
 });
 
-test('core reducer - setSchema - schema with id', t => {
+test('core reducer - setSchema - schema with id', (t) => {
   const schema: JsonSchema = {
     $id: 'https://www.jsonforms.io/example.json',
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
   const updatedSchema = cloneDeep(schema);
   updatedSchema.properties.animal.minLength = 5;
@@ -1708,11 +1735,6 @@ test('core reducer - setSchema - schema with id', t => {
     init(undefined, schema, undefined, undefined)
   );
 
-  const after: JsonFormsCore = coreReducer(
-    before,
-    setSchema(updatedSchema)
-  );
+  const after: JsonFormsCore = coreReducer(before, setSchema(updatedSchema));
   t.is(after.schema.properties.animal.minLength, 5);
 });
-
-
diff --git a/packages/core/test/reducers/uischemas.test.ts b/packages/core/test/reducers/uischemas.test.ts
index 623b449af..9eec9638c 100644
--- a/packages/core/test/reducers/uischemas.test.ts
+++ b/packages/core/test/reducers/uischemas.test.ts
@@ -29,30 +29,30 @@ import configureStore from 'redux-mock-store';
 import {
   findMatchingUISchema,
   uischemaRegistryReducer,
-  UISchemaTester
+  UISchemaTester,
 } from '../../src/reducers/uischemas';
 import {
   registerUISchema,
   RemoveUISchemaAction,
-  unregisterUISchema
+  unregisterUISchema,
 } from '../../src/actions';
 import { findUISchema, getSchema } from '../../src/reducers';
 import { Generate } from '../../src/generators';
 import { JsonFormsState } from '../../src';
 
-test('init state empty', t => {
+test('init state empty', (t) => {
   const dummyAction: RemoveUISchemaAction = {
     type: 'jsonforms/REMOVE_UI_SCHEMA',
-    tester: undefined
+    tester: undefined,
   };
   t.deepEqual(uischemaRegistryReducer(undefined, dummyAction), []);
 });
 
-test('add ui schema', t => {
+test('add ui schema', (t) => {
   const tester: UISchemaTester = () => 1;
   const control = {
     type: 'Control',
-    scope: '#/definitions/foo'
+    scope: '#/definitions/foo',
   };
   const after = uischemaRegistryReducer(
     undefined,
@@ -61,46 +61,46 @@ test('add ui schema', t => {
   t.is(after.length, 1);
 });
 
-test('remove ui schema', t => {
+test('remove ui schema', (t) => {
   const tester: UISchemaTester = () => 1;
   const control = {
     type: 'Control',
-    scope: '#/definitions/foo'
+    scope: '#/definitions/foo',
   };
   const after = uischemaRegistryReducer(
     [
       {
         tester,
-        uischema: control
-      }
+        uischema: control,
+      },
     ],
     unregisterUISchema(tester)
   );
   t.is(after.length, 0);
 });
 
-test('findMatchingUISchema', t => {
+test('findMatchingUISchema', (t) => {
   const testerA: UISchemaTester = (_schema, schemaPath) =>
     _.endsWith(schemaPath, 'foo') ? 1 : 0;
   const testerB: UISchemaTester = (_schema, schemaPath) =>
     _.endsWith(schemaPath, 'bar') ? 1 : 0;
   const controlA = {
     type: 'Control',
-    scope: '#/definitions/foo'
+    scope: '#/definitions/foo',
   };
   const controlB = {
     type: 'Control',
-    scope: '#/definitions/bar'
+    scope: '#/definitions/bar',
   };
   const before = [
     {
       tester: testerA,
-      uischema: controlA
+      uischema: controlA,
     },
     {
       tester: testerB,
-      uischema: controlB
-    }
+      uischema: controlB,
+    },
   ];
   t.deepEqual(
     findMatchingUISchema(before)(undefined, '#/defintions/foo', undefined),
@@ -112,7 +112,7 @@ test('findMatchingUISchema', t => {
   );
 });
 
-test('findUISchema returns generated UI schema if no match has been found', t => {
+test('findUISchema returns generated UI schema if no match has been found', (t) => {
   const middlewares: Redux.Middleware[] = [];
   const mockStore = configureStore<JsonFormsState>(middlewares);
   const store = mockStore({
@@ -121,15 +121,15 @@ test('findUISchema returns generated UI schema if no match has been found', t =>
         schema: {
           definitions: {
             baz: {
-              type: 'number'
-            }
-          }
+              type: 'number',
+            },
+          },
         },
         data: undefined,
-        uischema: undefined
+        uischema: undefined,
       },
-      uischemas: []
-    }
+      uischemas: [],
+    },
   });
 
   t.deepEqual(
@@ -143,28 +143,28 @@ test('findUISchema returns generated UI schema if no match has been found', t =>
   );
 });
 
-test('findMatchingUISchema with highest priority', t => {
+test('findMatchingUISchema with highest priority', (t) => {
   const testerA: UISchemaTester = (_schema, schemaPath) =>
     _.endsWith(schemaPath, 'foo') ? 2 : 0;
   const testerB: UISchemaTester = (_schema, schemaPath) =>
     _.endsWith(schemaPath, 'foo') ? 1 : 0;
   const controlA = {
     type: 'Control',
-    scope: '#/definitions/foo'
+    scope: '#/definitions/foo',
   };
   const controlB = {
     type: 'Control',
-    scope: '#/definitions/foo'
+    scope: '#/definitions/foo',
   };
   const before = [
     {
       tester: testerA,
-      uischema: controlA
+      uischema: controlA,
     },
     {
       tester: testerB,
-      uischema: controlB
-    }
+      uischema: controlB,
+    },
   ];
   t.deepEqual(
     findMatchingUISchema(before)(undefined, '#/definitions/foo', undefined),
diff --git a/packages/core/test/testers.test.ts b/packages/core/test/testers.test.ts
index 9e57e1134..fcbf8cf9e 100644
--- a/packages/core/test/testers.test.ts
+++ b/packages/core/test/testers.test.ts
@@ -47,280 +47,300 @@ import {
   scopeEndsWith,
   uiTypeIs,
   isOneOfEnumControl,
-  TesterContext
+  TesterContext,
 } from '../src/testers';
 import {
   ControlElement,
   JsonSchema,
   LabelElement,
-  UISchemaElement
+  UISchemaElement,
 } from '../src';
 
 const test = anyTest as TestInterface<{ uischema: ControlElement }>;
 
-const createTesterContext =
-  (rootSchema: JsonSchema, config?: any): TesterContext => ({ rootSchema, config });
+const createTesterContext = (
+  rootSchema: JsonSchema,
+  config?: any
+): TesterContext => ({ rootSchema, config });
 
-test.beforeEach(t => {
+test.beforeEach((t) => {
   t.context.uischema = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
 });
 
-test('schemaTypeIs should check type sub-schema of control', t => {
+test('schemaTypeIs should check type sub-schema of control', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   const testerContext = createTesterContext(schema);
   t.true(schemaTypeIs('string')(uischema, schema, testerContext));
   t.false(schemaTypeIs('integer')(uischema, schema, testerContext));
 });
 
-test('schemaTypeIs should return false for non-control UI schema elements', t => {
+test('schemaTypeIs should return false for non-control UI schema elements', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   const label: LabelElement = {
     type: 'Label',
-    text: 'some text'
+    text: 'some text',
   };
   const testerContext = createTesterContext(schema);
   t.false(schemaTypeIs('integer')(label, schema, testerContext));
 });
 
-test('schemaTypeIs should return false for control pointing to invalid sub-schema', t => {
+test('schemaTypeIs should return false for control pointing to invalid sub-schema', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/bar'
+    scope: '#/properties/bar',
   };
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   const testerContext = createTesterContext(schema);
   t.false(schemaTypeIs('string')(uischema, schema, testerContext));
 });
 
-test('schemaTypeIs should return true for array type', t => {
+test('schemaTypeIs should return true for array type', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: ['string', 'integer'] }
-    }
+      foo: { type: ['string', 'integer'] },
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   const testerContext = createTesterContext(schema);
   t.true(schemaTypeIs('string')(uischema, schema, testerContext));
   t.true(schemaTypeIs('integer')(uischema, schema, testerContext));
 });
 
-test('formatIs should check the format of a resolved sub-schema', t => {
+test('formatIs should check the format of a resolved sub-schema', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
         type: 'string',
-        format: 'date-time'
-      }
-    }
+        format: 'date-time',
+      },
+    },
   };
   const testerContext = createTesterContext(schema);
   t.true(formatIs('date-time')(uischema, schema, testerContext));
 });
 
-test('uiTypeIs', t => {
+test('uiTypeIs', (t) => {
   const control: ControlElement = {
     type: 'Control',
-    scope: '#/properties/bar'
+    scope: '#/properties/bar',
   };
   t.true(uiTypeIs('Control')(control, undefined, undefined));
 });
 
-test('optionIs should check for options', t => {
+test('optionIs should check for options', (t) => {
   const control: ControlElement = {
     type: 'Control',
     scope: '#/properties/bar',
     options: {
-      answer: 42
-    }
+      answer: 42,
+    },
   };
   t.true(optionIs('answer', 42)(control, undefined, undefined));
 });
 
-test('optionIs should not fail if uischema is undefined or null', t => {
+test('optionIs should not fail if uischema is undefined or null', (t) => {
   const uischema: UISchemaElement = null;
   t.false(optionIs('answer', 42)(uischema, undefined, undefined));
   t.false(optionIs('answer', 42)(uischema, undefined, undefined));
 });
 
-test('optionIs should return false for UI schema elements without options cell', t => {
+test('optionIs should return false for UI schema elements without options cell', (t) => {
   const control: ControlElement = {
     type: 'Control',
-    scope: '#/properties/bar'
+    scope: '#/properties/bar',
   };
   t.false(optionIs('answer', 42)(control, undefined, undefined));
 });
 
-test('schemaMatches should check type sub-schema of control via predicate', t => {
+test('schemaMatches should check type sub-schema of control via predicate', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   const testerContext = createTesterContext(schema);
   t.true(
-    schemaMatches(subSchema => subSchema.type === 'string')(uischema, schema, testerContext)
+    schemaMatches((subSchema) => subSchema.type === 'string')(
+      uischema,
+      schema,
+      testerContext
+    )
   );
 });
 
-test('schemaMatches should check type sub-schema of control via predicate also without explicit type', t => {
+test('schemaMatches should check type sub-schema of control via predicate also without explicit type', (t) => {
   const schema: JsonSchema = {
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   const testerContext = createTesterContext(schema);
   t.true(
-    schemaMatches(subSchema => subSchema.type === 'string')(uischema, schema, testerContext)
+    schemaMatches((subSchema) => subSchema.type === 'string')(
+      uischema,
+      schema,
+      testerContext
+    )
   );
 });
 
-test('schemaMatches should return false for non-control UI schema elements', t => {
+test('schemaMatches should return false for non-control UI schema elements', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   const label: LabelElement = {
     type: 'Label',
-    text: 'some text'
+    text: 'some text',
   };
   const testerContext = createTesterContext(schema);
   t.false(schemaMatches(() => false)(label, schema, testerContext));
 });
 
-test('schemaMatches should return false for control pointing to invalid subschema', t => {
+test('schemaMatches should return false for control pointing to invalid subschema', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/bar'
+    scope: '#/properties/bar',
   };
   const testerContext = createTesterContext(schema);
   t.false(schemaMatches(() => false)(uischema, schema, testerContext));
 });
 
-test('scopeEndsWith checks whether the ref of a control ends with a certain string', t => {
+test('scopeEndsWith checks whether the ref of a control ends with a certain string', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/bar'
+    scope: '#/properties/bar',
   };
   t.true(scopeEndsWith('properties/bar')(uischema, undefined, undefined));
 });
 
-test('scopeEndsWith should return false for non-control UI schema elements', t => {
+test('scopeEndsWith should return false for non-control UI schema elements', (t) => {
   const label: LabelElement = {
     type: 'Label',
-    text: 'some text'
+    text: 'some text',
   };
   t.false(scopeEndsWith('properties/bar')(label, undefined, undefined));
 });
 
-test('refEndIs checks whether the last segment a control ref equals a certain string', t => {
+test('refEndIs checks whether the last segment a control ref equals a certain string', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/bar'
+    scope: '#/properties/bar',
   };
   t.true(scopeEndIs('bar')(uischema, undefined, undefined));
 });
 
-test('refEndIs should return false for non-control UI schema elements', t => {
+test('refEndIs should return false for non-control UI schema elements', (t) => {
   const label: LabelElement = {
     type: 'Label',
-    text: 'some text'
+    text: 'some text',
   };
   t.false(scopeEndIs('bar')(label, undefined, undefined));
 });
 
-test('and should allow to compose multiple testers', t => {
+test('and should allow to compose multiple testers', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   const testerContext = createTesterContext(schema);
-  t.true(and(schemaTypeIs('string'), scopeEndIs('foo'))(uischema, schema, testerContext));
+  t.true(
+    and(schemaTypeIs('string'), scopeEndIs('foo'))(
+      uischema,
+      schema,
+      testerContext
+    )
+  );
 });
 
-test('or should allow to compose multiple testers', t => {
+test('or should allow to compose multiple testers', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
-      foo: { type: 'integer' }
-    }
+      foo: { type: 'integer' },
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   const testerContext = createTesterContext(schema);
   t.true(
-    or(schemaTypeIs('integer'), optionIs('slider', true))(uischema, schema, testerContext)
+    or(schemaTypeIs('integer'), optionIs('slider', true))(
+      uischema,
+      schema,
+      testerContext
+    )
   );
 });
 
-test('tester isPrimitiveArrayControl', t => {
+test('tester isPrimitiveArrayControl', (t) => {
   const control: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   const schema = {
     type: 'object',
     properties: {
       foo: {
         type: 'array',
-        items: { type: 'integer' }
-      }
-    }
+        items: { type: 'integer' },
+      },
+    },
   };
   t.true(
     isPrimitiveArrayControl(control, schema, createTesterContext(schema)),
@@ -332,12 +352,16 @@ test('tester isPrimitiveArrayControl', t => {
     properties: {
       foo: {
         type: 'array',
-        items: { $ref: '#/definitions/int' }
-      }
-    }
+        items: { $ref: '#/definitions/int' },
+      },
+    },
   };
   t.true(
-    isPrimitiveArrayControl(control, schemaWithRefs, createTesterContext(schemaWithRefs)),
+    isPrimitiveArrayControl(
+      control,
+      schemaWithRefs,
+      createTesterContext(schemaWithRefs)
+    ),
     `Primitive array tester was not triggered for 'integer' schema type with refs`
   );
   const objectSchema = {
@@ -345,60 +369,83 @@ test('tester isPrimitiveArrayControl', t => {
     properties: {
       foo: {
         type: 'array',
-        items: { type: 'object' }
-      }
-    }
+        items: { type: 'object' },
+      },
+    },
   };
   t.false(
-    isPrimitiveArrayControl(control, objectSchema, createTesterContext(objectSchema)),
+    isPrimitiveArrayControl(
+      control,
+      objectSchema,
+      createTesterContext(objectSchema)
+    ),
     `Primitive array tester was not triggered for 'object' schema type`
   );
 });
 
-test('tester isObjectArrayControl', t => {
+test('tester isObjectArrayControl', (t) => {
   t.false(isObjectArrayControl({ type: 'Foo' }, null, null));
   const control: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
-  t.false(isObjectArrayControl(control, undefined, undefined), 'No Schema not checked!');
+  t.false(
+    isObjectArrayControl(control, undefined, undefined),
+    'No Schema not checked!'
+  );
 
   t.false(
-    isObjectArrayControl(control, {
-      type: 'object',
-      properties: { bar: { type: 'integer' } }
-    }, undefined),
+    isObjectArrayControl(
+      control,
+      {
+        type: 'object',
+        properties: { bar: { type: 'integer' } },
+      },
+      undefined
+    ),
     'Wrong Schema Type not checked!'
   );
   t.false(
-    isObjectArrayControl(control, {
-      type: 'object',
-      properties: { foo: { type: 'array' } }
-    }, undefined),
+    isObjectArrayControl(
+      control,
+      {
+        type: 'object',
+        properties: { foo: { type: 'array' } },
+      },
+      undefined
+    ),
     'Array Schema Type without items not checked!'
   );
   t.false(
-    isObjectArrayControl(control, {
-      type: 'object',
-      properties: {
-        foo: {
-          type: 'array',
-          items: [{ type: 'integer' }, { type: 'string' }]
-        }
-      }
-    }, undefined),
+    isObjectArrayControl(
+      control,
+      {
+        type: 'object',
+        properties: {
+          foo: {
+            type: 'array',
+            items: [{ type: 'integer' }, { type: 'string' }],
+          },
+        },
+      },
+      undefined
+    ),
     'Array Schema Type with tuples not checked!'
   );
   t.false(
-    isObjectArrayControl(control, {
-      type: 'object',
-      properties: {
-        foo: {
-          type: 'array',
-          items: { type: 'integer' }
-        }
-      }
-    }, undefined),
+    isObjectArrayControl(
+      control,
+      {
+        type: 'object',
+        properties: {
+          foo: {
+            type: 'array',
+            items: { type: 'integer' },
+          },
+        },
+      },
+      undefined
+    ),
     'Array Schema Type with wrong item type not checked!'
   );
   const schema: JsonSchema = {
@@ -410,11 +457,11 @@ test('tester isObjectArrayControl', t => {
           type: 'object',
           properties: {
             x: { type: 'integer' },
-            y: { type: 'integer' }
-          }
-        }
-      }
-    }
+            y: { type: 'integer' },
+          },
+        },
+      },
+    },
   };
   t.true(isObjectArrayControl(control, schema, createTesterContext(schema)));
   const schema_noType: JsonSchema = {
@@ -425,13 +472,19 @@ test('tester isObjectArrayControl', t => {
           type: 'object',
           properties: {
             x: { type: 'integer' },
-            y: { type: 'integer' }
-          }
-        }
-      }
-    }
+            y: { type: 'integer' },
+          },
+        },
+      },
+    },
   };
-  t.true(isObjectArrayControl(control, schema_noType, createTesterContext(schema_noType)));
+  t.true(
+    isObjectArrayControl(
+      control,
+      schema_noType,
+      createTesterContext(schema_noType)
+    )
+  );
   const schema_innerAllOf: JsonSchema = {
     type: 'object',
     properties: {
@@ -441,20 +494,26 @@ test('tester isObjectArrayControl', t => {
           allOf: [
             {
               properties: {
-                x: { type: 'integer' }
-              }
+                x: { type: 'integer' },
+              },
             },
             {
               properties: {
-                y: { type: 'integer' }
-              }
-            }
-          ]
-        }
-      }
-    }
+                y: { type: 'integer' },
+              },
+            },
+          ],
+        },
+      },
+    },
   };
-  t.true(isObjectArrayControl(control, schema_innerAllOf, createTesterContext(schema_innerAllOf)));
+  t.true(
+    isObjectArrayControl(
+      control,
+      schema_innerAllOf,
+      createTesterContext(schema_innerAllOf)
+    )
+  );
 
   const schemaWithRefs = {
     definitions: {
@@ -462,244 +521,344 @@ test('tester isObjectArrayControl', t => {
         type: 'object',
         properties: {
           x: { type: 'integer' },
-          y: { type: 'integer' }
-        }
-      }
+          y: { type: 'integer' },
+        },
+      },
     },
     type: 'object',
     properties: {
       foo: {
         type: 'array',
         items: {
-          $ref: '#/definitions/order'
-        }
-      }
-    }
-  }
+          $ref: '#/definitions/order',
+        },
+      },
+    },
+  };
   const testerContext = createTesterContext(schemaWithRefs);
   t.true(isObjectArrayControl(control, schemaWithRefs, testerContext));
 });
 
-test('isBooleanControl', t => {
+test('isBooleanControl', (t) => {
   t.false(isBooleanControl(undefined, undefined, undefined));
   t.false(isBooleanControl(null, undefined, undefined));
   t.false(isBooleanControl({ type: 'Foo' }, undefined, undefined));
   t.false(isBooleanControl({ type: 'Control' }, undefined, undefined));
   t.false(
-    isBooleanControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isBooleanControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
   t.false(
-    isBooleanControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' }, bar: { type: 'boolean' } }
-    }, undefined)
+    isBooleanControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' }, bar: { type: 'boolean' } },
+      },
+      undefined
+    )
   );
   t.true(
-    isBooleanControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'boolean' } }
-    }, undefined)
+    isBooleanControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'boolean' } },
+      },
+      undefined
+    )
   );
 });
 
-test('test isDateControl', t => {
+test('test isDateControl', (t) => {
   t.false(isDateControl(undefined, undefined, undefined));
   t.false(isDateControl(null, undefined, undefined));
   t.false(isDateControl({ type: 'Foo' }, undefined, undefined));
   t.false(isDateControl({ type: 'Control' }, undefined, undefined));
   t.false(
-    isDateControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isDateControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
   t.false(
-    isDateControl(t.context.uischema, {
-      type: 'object',
-      properties: {
-        foo: { type: 'string' },
-        bar: {
-          type: 'string',
-          format: 'date'
-        }
-      }
-    }, undefined)
+    isDateControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: {
+          foo: { type: 'string' },
+          bar: {
+            type: 'string',
+            format: 'date',
+          },
+        },
+      },
+      undefined
+    )
   );
   t.true(
-    isDateControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string', format: 'date' } }
-    }, undefined)
+    isDateControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string', format: 'date' } },
+      },
+      undefined
+    )
   );
 });
-test('test isEnumControl', t => {
+test('test isEnumControl', (t) => {
   t.false(isEnumControl(undefined, undefined, undefined));
   t.false(isEnumControl(null, undefined, undefined));
   t.false(isEnumControl({ type: 'Foo' }, undefined, undefined));
   t.false(isEnumControl({ type: 'Control' }, undefined, undefined));
   t.false(
-    isEnumControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isEnumControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
   t.false(
-    isEnumControl(t.context.uischema, {
-      type: 'object',
-      properties: {
-        foo: {
-          type: 'string'
+    isEnumControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: {
+          foo: {
+            type: 'string',
+          },
+          bar: {
+            type: 'string',
+            enum: ['a', 'b'],
+          },
         },
-        bar: {
-          type: 'string',
-          enum: ['a', 'b']
-        }
-      }
-    }, undefined)
+      },
+      undefined
+    )
   );
   t.true(
-    isEnumControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string', enum: ['a', 'b'] } }
-    }, undefined)
+    isEnumControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string', enum: ['a', 'b'] } },
+      },
+      undefined
+    )
   );
   t.true(
-    isEnumControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'number', enum: [1, 2] } }
-    }, undefined)
+    isEnumControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'number', enum: [1, 2] } },
+      },
+      undefined
+    )
   );
   t.true(
-    isEnumControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { const: '1.0' } }
-    }, undefined)
+    isEnumControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { const: '1.0' } },
+      },
+      undefined
+    )
   );
 });
-test('test isIntegerControl', t => {
+test('test isIntegerControl', (t) => {
   t.false(isIntegerControl(undefined, undefined, undefined));
   t.false(isIntegerControl(null, undefined, undefined));
   t.false(isIntegerControl({ type: 'Foo' }, undefined, undefined));
   t.false(isIntegerControl({ type: 'Control' }, undefined, undefined));
   t.false(
-    isIntegerControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isIntegerControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
   t.false(
-    isIntegerControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' }, bar: { type: 'integer' } }
-    }, undefined)
+    isIntegerControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' }, bar: { type: 'integer' } },
+      },
+      undefined
+    )
   );
   t.true(
-    isIntegerControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'integer' } }
-    }, undefined)
+    isIntegerControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'integer' } },
+      },
+      undefined
+    )
   );
 });
-test('test isNumberControl', t => {
+test('test isNumberControl', (t) => {
   t.false(isNumberControl(undefined, undefined, undefined));
   t.false(isNumberControl(null, undefined, undefined));
   t.false(isNumberControl({ type: 'Foo' }, undefined, undefined));
   t.false(isNumberControl({ type: 'Control' }, undefined, undefined));
   t.false(
-    isNumberControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isNumberControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
   t.false(
-    isNumberControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' }, bar: { type: 'number' } }
-    }, undefined)
+    isNumberControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' }, bar: { type: 'number' } },
+      },
+      undefined
+    )
   );
   t.true(
-    isNumberControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'number' } }
-    }, undefined)
+    isNumberControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'number' } },
+      },
+      undefined
+    )
   );
 });
-test('tester isStringControl', t => {
+test('tester isStringControl', (t) => {
   t.false(isStringControl(undefined, undefined, undefined));
   t.false(isStringControl(null, undefined, undefined));
   t.false(isStringControl({ type: 'Foo' }, undefined, undefined));
   t.false(isStringControl({ type: 'Control' }, undefined, undefined));
   t.false(
-    isStringControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'number' } }
-    }, undefined)
+    isStringControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'number' } },
+      },
+      undefined
+    )
   );
   t.false(
-    isStringControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'number' }, bar: { type: 'string' } }
-    }, undefined)
+    isStringControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'number' }, bar: { type: 'string' } },
+      },
+      undefined
+    )
   );
   t.true(
-    isStringControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isStringControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
 });
-test('test isTimeControl', t => {
+test('test isTimeControl', (t) => {
   t.false(isTimeControl(undefined, undefined, undefined));
   t.false(isTimeControl(null, undefined, undefined));
   t.false(isTimeControl({ type: 'Foo' }, undefined, undefined));
   t.false(isTimeControl({ type: 'Control' }, undefined, undefined));
   t.false(
-    isTimeControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isTimeControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
   t.false(
-    isTimeControl(t.context.uischema, {
-      type: 'object',
-      properties: {
-        foo: { type: 'string' },
-        bar: { type: 'string', format: 'time' }
-      }
-    }, undefined)
+    isTimeControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: {
+          foo: { type: 'string' },
+          bar: { type: 'string', format: 'time' },
+        },
+      },
+      undefined
+    )
   );
   t.true(
-    isTimeControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string', format: 'time' } }
-    }, undefined)
+    isTimeControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string', format: 'time' } },
+      },
+      undefined
+    )
   );
 });
-test('tester isMultiLineControl', t => {
+test('tester isMultiLineControl', (t) => {
   t.false(isMultiLineControl(undefined, undefined, undefined));
   t.false(isMultiLineControl(null, undefined, undefined));
   t.false(isMultiLineControl({ type: 'Foo' }, undefined, undefined));
   t.false(isMultiLineControl({ type: 'Control' }, undefined, undefined));
   t.false(
-    isMultiLineControl(t.context.uischema, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isMultiLineControl(
+      t.context.uischema,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
   const control = t.context.uischema;
   control.options = { multi: true };
   t.true(
-    isMultiLineControl(control, {
-      type: 'object',
-      properties: { foo: { type: 'string' } }
-    }, undefined)
+    isMultiLineControl(
+      control,
+      {
+        type: 'object',
+        properties: { foo: { type: 'string' } },
+      },
+      undefined
+    )
   );
 });
 
-test('tester isObjectArrayWithNesting', t => {
+test('tester isObjectArrayWithNesting', (t) => {
   const schema = {
     type: 'array',
     items: {
@@ -707,25 +866,25 @@ test('tester isObjectArrayWithNesting', t => {
       properties: {
         message: {
           type: 'string',
-          maxLength: 3
+          maxLength: 3,
         },
         done: {
-          type: 'boolean'
-        }
-      }
-    }
+          type: 'boolean',
+        },
+      },
+    },
   };
 
   const nestedSchema = {
     type: 'array',
     items: {
-      ...schema
-    }
+      ...schema,
+    },
   };
 
   const uischema = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
 
   const nestedSchema2 = {
@@ -739,13 +898,13 @@ test('tester isObjectArrayWithNesting', t => {
             choices: {
               type: 'array',
               items: {
-                type: 'string'
-              }
-            }
-          }
-        }
-      }
-    }
+                type: 'string',
+              },
+            },
+          },
+        },
+      },
+    },
   };
   const nestedSchema3 = {
     type: 'array',
@@ -756,73 +915,72 @@ test('tester isObjectArrayWithNesting', t => {
           type: 'object',
           properties: {
             Level3: {
-              type: 'string'
-            }
-          }
-        }
-      }
-    }
+              type: 'string',
+            },
+          },
+        },
+      },
+    },
   };
 
-  const nestedSchemaWithRef =
-  {
+  const nestedSchemaWithRef = {
     definitions: { itemsType: { ...schema } },
     type: 'array',
     items: {
-      $ref: '#/definitions/itemsType'
-    }
+      $ref: '#/definitions/itemsType',
+    },
   };
 
   const nestedSchemaWithAnyOf = {
-    type: "array",
+    type: 'array',
     items: {
       anyOf: [
         {
-          type: "object",
+          type: 'object',
           properties: {
             value: {
-              type: "string"
-            }
+              type: 'string',
+            },
           },
-          required: ["value"]
+          required: ['value'],
         },
         {
-          type: "object",
+          type: 'object',
           properties: {
             value: {
-              type: "number"
-            }
+              type: 'number',
+            },
           },
-          required: ["value"]
-        }
-      ]
-    }
+          required: ['value'],
+        },
+      ],
+    },
   };
 
   const nestedSchemaWithOneOf = {
-    type: "array",
+    type: 'array',
     items: {
       oneOf: [
         {
-          type: "object",
+          type: 'object',
           properties: {
             value: {
-              type: "string"
-            }
+              type: 'string',
+            },
           },
-          required: ["value"]
+          required: ['value'],
         },
         {
-          type: "object",
+          type: 'object',
           properties: {
             value: {
-              type: "number"
-            }
+              type: 'number',
+            },
           },
-          required: ["value"]
-        }
-      ]
-    }
+          required: ['value'],
+        },
+      ],
+    },
   };
 
   const schemaWithOneOfEnum = {
@@ -834,7 +992,7 @@ test('tester isObjectArrayWithNesting', t => {
         { const: 'B', title: 'ENUM B' },
       ],
     },
-  }
+  };
 
   const uischemaOptions: {
     generate: ControlElement;
@@ -845,15 +1003,15 @@ test('tester isObjectArrayWithNesting', t => {
       type: 'Control',
       scope: '#',
       options: {
-        detail: 'DEFAULT'
-      }
+        detail: 'DEFAULT',
+      },
     },
     generate: {
       type: 'Control',
       scope: '#',
       options: {
-        detail: 'GENERATE'
-      }
+        detail: 'GENERATE',
+      },
     },
     inline: {
       type: 'Control',
@@ -864,12 +1022,12 @@ test('tester isObjectArrayWithNesting', t => {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/message'
-            }
-          ]
-        }
-      }
-    }
+              scope: '#/properties/message',
+            },
+          ],
+        },
+      },
+    },
   };
 
   t.false(isObjectArrayWithNesting(undefined, undefined, undefined));
@@ -880,7 +1038,13 @@ test('tester isObjectArrayWithNesting', t => {
   t.true(isObjectArrayWithNesting(uischema, nestedSchema, undefined));
   t.true(isObjectArrayWithNesting(uischema, nestedSchema2, undefined));
   t.true(isObjectArrayWithNesting(uischema, nestedSchema3, undefined));
-  t.true(isObjectArrayWithNesting(uischema, nestedSchemaWithRef, createTesterContext(nestedSchemaWithRef)));
+  t.true(
+    isObjectArrayWithNesting(
+      uischema,
+      nestedSchemaWithRef,
+      createTesterContext(nestedSchemaWithRef)
+    )
+  );
 
   t.false(isObjectArrayWithNesting(uischemaOptions.default, schema, undefined));
   t.true(isObjectArrayWithNesting(uischemaOptions.generate, schema, undefined));
@@ -889,24 +1053,24 @@ test('tester isObjectArrayWithNesting', t => {
   t.true(isObjectArrayWithNesting(uischema, nestedSchemaWithAnyOf, undefined));
   t.true(isObjectArrayWithNesting(uischema, nestedSchemaWithOneOf, undefined));
 
-  t.false(isObjectArrayWithNesting(undefined,schemaWithOneOfEnum, undefined));
+  t.false(isObjectArrayWithNesting(undefined, schemaWithOneOfEnum, undefined));
 });
 
-test('tester schemaSubPathMatches', t => {
+test('tester schemaSubPathMatches', (t) => {
   const schema = {
     title: 'Things',
     type: 'array',
     items: {
-      type: 'number'
-    }
+      type: 'number',
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
 
   t.true(
-    schemaSubPathMatches('items', items => items.type === 'number')(
+    schemaSubPathMatches('items', (items) => items.type === 'number')(
       uischema,
       schema,
       undefined
@@ -914,48 +1078,58 @@ test('tester schemaSubPathMatches', t => {
   );
 });
 
-test('tester not', t => {
+test('tester not', (t) => {
   t.false(
-    not(isBooleanControl)(t.context.uischema, {
-      type: 'boolean'
-    }, undefined)
+    not(isBooleanControl)(
+      t.context.uischema,
+      {
+        type: 'boolean',
+      },
+      undefined
+    )
   );
 });
 
-test('tester isOneOfEnumControl', t => {
+test('tester isOneOfEnumControl', (t) => {
   const control: ControlElement = {
     type: 'Control',
-    scope: '#/properties/country'
+    scope: '#/properties/country',
   };
   const oneOfSchema = {
     type: 'string',
     oneOf: [
       {
         const: 'AU',
-        title: 'Australia'
+        title: 'Australia',
       },
       {
         const: 'NZ',
-        title: 'New Zealand'
-      }
-    ]
+        title: 'New Zealand',
+      },
+    ],
   };
 
-  t.true(isOneOfEnumControl(control, {
-    type: 'object',
-    properties: {
-      country: oneOfSchema
-    }
-  }, undefined));
+  t.true(
+    isOneOfEnumControl(
+      control,
+      {
+        type: 'object',
+        properties: {
+          country: oneOfSchema,
+        },
+      },
+      undefined
+    )
+  );
   const schemaWithRefs = {
     definitions: { country: oneOfSchema },
     type: 'object',
     properties: {
       country: {
-        $ref: '#/definitions/country'
-      }
-    }
-  }
+        $ref: '#/definitions/country',
+      },
+    },
+  };
   const testerContext = createTesterContext(schemaWithRefs);
   t.true(isOneOfEnumControl(control, schemaWithRefs, testerContext));
 });
diff --git a/packages/core/test/util/array.test.ts b/packages/core/test/util/array.test.ts
index 443ab5338..3ca2201b3 100644
--- a/packages/core/test/util/array.test.ts
+++ b/packages/core/test/util/array.test.ts
@@ -3,26 +3,26 @@ import anyTest, { TestInterface } from 'ava';
 
 const test = anyTest as TestInterface<{ array: number[] }>;
 
-test.beforeEach(t => {
+test.beforeEach((t) => {
   t.context.array = [1, 2, 3, 4, 5];
 });
 
-test('Move up should move item up by one index', t => {
+test('Move up should move item up by one index', (t) => {
   moveUp(t.context.array, 2);
   t.deepEqual(t.context.array, [1, 3, 2, 4, 5]);
 });
 
-test('Move up should not change array if item to move is the first item ', t => {
+test('Move up should not change array if item to move is the first item ', (t) => {
   moveUp(t.context.array, 0);
   t.deepEqual(t.context.array, [1, 2, 3, 4, 5]);
 });
 
-test('Move down should move item down by one index', t => {
+test('Move down should move item down by one index', (t) => {
   moveDown(t.context.array, 2);
   t.deepEqual(t.context.array, [1, 2, 4, 3, 5]);
 });
 
-test('Move down should not change array if item to move is the last item ', t => {
+test('Move down should not change array if item to move is the last item ', (t) => {
   moveDown(t.context.array, 4);
   t.deepEqual(t.context.array, [1, 2, 3, 4, 5]);
 });
diff --git a/packages/core/test/util/cell.test.ts b/packages/core/test/util/cell.test.ts
index b8d5dea9c..621c22d44 100644
--- a/packages/core/test/util/cell.test.ts
+++ b/packages/core/test/util/cell.test.ts
@@ -30,7 +30,9 @@ import {
   defaultMapDispatchToControlProps,
   defaultMapStateToEnumCellProps,
   DispatchPropsOfCell,
-  mapStateToCellProps, mapStateToOneOfEnumCellProps, oneOfToEnumOptionMapper
+  mapStateToCellProps,
+  mapStateToOneOfEnumCellProps,
+  oneOfToEnumOptionMapper,
 } from '../../src/util';
 import { UPDATE_DATA, UpdateAction } from '../../src/actions';
 import configureStore from 'redux-mock-store';
@@ -53,8 +55,8 @@ const hideRule = {
   condition: {
     type: 'LEAF',
     scope: '#/properties/firstName',
-    expectedValue: 'Homer'
-  }
+    expectedValue: 'Homer',
+  },
 };
 
 const disableRule = {
@@ -62,8 +64,8 @@ const disableRule = {
   condition: {
     type: 'LEAF',
     scope: '#/properties/firstName',
-    expectedValue: 'Homer'
-  }
+    expectedValue: 'Homer',
+  },
 };
 
 const enableRule = {
@@ -71,13 +73,13 @@ const enableRule = {
   condition: {
     type: 'LEAF',
     scope: '#/properties/firstName',
-    expectedValue: 'Homer'
-  }
+    expectedValue: 'Homer',
+  },
 };
 
 const coreUISchema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/firstName'
+  scope: '#/properties/firstName',
 };
 
 const createState = (uischema: UISchemaElement): JsonFormsState => ({
@@ -90,64 +92,64 @@ const createState = (uischema: UISchemaElement): JsonFormsState => ({
           lastName: { type: 'string' },
           nationality: {
             type: 'string',
-            enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
-          }
-        }
+            enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
+          },
+        },
       },
       data: {
-        firstName: 'Homer'
+        firstName: 'Homer',
       },
       uischema,
-      errors: []
-    }
-  }
+      errors: [],
+    },
+  },
 });
 
-test('mapStateToCellProps - visible via ownProps ', t => {
+test('mapStateToCellProps - visible via ownProps ', (t) => {
   const uischema: ControlElement = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
     visible: true,
-    uischema
+    uischema,
   };
   const props = mapStateToCellProps(createState(uischema), ownProps);
   t.true(props.visible);
 });
 
-test('mapStateToCellProps - hidden via ownProps ', t => {
+test('mapStateToCellProps - hidden via ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
     visible: false,
-    uischema
+    uischema,
   };
   const props = mapStateToCellProps(createState(uischema), ownProps);
   t.false(props.visible);
 });
 
-test('mapStateToCellProps - hidden via state ', t => {
+test('mapStateToCellProps - hidden via state ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const props = mapStateToCellProps(createState(uischema), ownProps);
   t.false(props.visible);
 });
 
-test('mapStateToCellProps - visible via state ', t => {
+test('mapStateToCellProps - visible via state ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const clonedState = _.cloneDeep(createState(uischema));
   clonedState.jsonforms.core.data.firstName = 'Lisa';
@@ -155,51 +157,51 @@ test('mapStateToCellProps - visible via state ', t => {
   t.true(props.visible);
 });
 
-test('mapStateToCellProps - enabled via ownProps ', t => {
+test('mapStateToCellProps - enabled via ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
     enabled: true,
-    uischema
+    uischema,
   };
   const props = mapStateToCellProps(createState(uischema), ownProps);
   t.true(props.enabled);
 });
 
-test('mapStateToCellProps - disabled via ownProps ', t => {
+test('mapStateToCellProps - disabled via ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
     enabled: false,
-    uischema
+    uischema,
   };
   const props = mapStateToCellProps(createState(uischema), ownProps);
   t.false(props.enabled);
 });
 
-test('mapStateToCellProps - disabled via state ', t => {
+test('mapStateToCellProps - disabled via state ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const props = mapStateToCellProps(createState(uischema), ownProps);
   t.false(props.enabled);
 });
 
-test('mapStateToCellProps - enabled via state ', t => {
+test('mapStateToCellProps - enabled via state ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const clonedState = _.cloneDeep(createState(uischema));
   clonedState.jsonforms.core.data.firstName = 'Lisa';
@@ -207,9 +209,9 @@ test('mapStateToCellProps - enabled via state ', t => {
   t.true(props.enabled);
 });
 
-test('mapStateToCellProps - disabled via global readonly', t => {
+test('mapStateToCellProps - disabled via global readonly', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.readonly = true;
@@ -218,10 +220,10 @@ test('mapStateToCellProps - disabled via global readonly', t => {
   t.false(props.enabled);
 });
 
-test('mapStateToCellProps - disabled via global readonly beats enabled via ownProps', t => {
+test('mapStateToCellProps - disabled via global readonly beats enabled via ownProps', (t) => {
   const ownProps = {
     uischema: coreUISchema,
-    enabled: true
+    enabled: true,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.readonly = true;
@@ -230,13 +232,13 @@ test('mapStateToCellProps - disabled via global readonly beats enabled via ownPr
   t.false(props.enabled);
 });
 
-test('mapStateToCellProps - disabled via global readonly beats enabled via rule', t => {
+test('mapStateToCellProps - disabled via global readonly beats enabled via rule', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: enableRule
+    rule: enableRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const state: JsonFormsState = createState(uischema);
   state.jsonforms.readonly = true;
@@ -245,116 +247,123 @@ test('mapStateToCellProps - disabled via global readonly beats enabled via rule'
   t.false(props.enabled);
 });
 
-test('mapStateToCellProps - path', t => {
+test('mapStateToCellProps - path', (t) => {
   const ownProps = {
     uischema: coreUISchema,
-    path: 'firstName'
+    path: 'firstName',
   };
   const props = mapStateToCellProps(createState(coreUISchema), ownProps);
   t.is(props.path, 'firstName');
 });
 
-test('mapStateToCellProps - data', t => {
+test('mapStateToCellProps - data', (t) => {
   const ownProps = {
     uischema: coreUISchema,
-    path: 'firstName'
+    path: 'firstName',
   };
   const props = mapStateToCellProps(createState(coreUISchema), ownProps);
   t.is(props.data, 'Homer');
 });
 
-test('mapStateToCellProps - id', t => {
+test('mapStateToCellProps - id', (t) => {
   clearAllIds();
   const ownProps = {
     uischema: coreUISchema,
-    id: '#/properties/firstName'
+    id: '#/properties/firstName',
   };
   const props = mapStateToCellProps(createState(coreUISchema), ownProps);
   t.is(props.id, '#/properties/firstName');
 });
 
-test('mapStateToCellProps - translated error', t => {
+test('mapStateToCellProps - translated error', (t) => {
   const ownProps = {
     uischema: coreUISchema,
     id: '#/properties/firstName',
-    path: 'firstName'
+    path: 'firstName',
   };
   const state = createState(coreUISchema);
   const schema = state.jsonforms.core?.schema as JsonSchema;
   const data = state.jsonforms.core?.data as any;
   // mark firstName as required, delete the value from data, then get errors from ajv from the compiled schema
-  schema.required = ["firstName"];
+  schema.required = ['firstName'];
   delete data.firstName;
   const ajv = createAjv();
   const v = ajv.compile(schema);
   state.jsonforms.core!.errors = validate(v, data);
   // add a mock i18n state to verify that the error gets translated
   state.jsonforms.i18n = {
-    translateError: error => `i18n-error:${error.keyword}`
+    translateError: (error) => `i18n-error:${error.keyword}`,
   };
   const props = mapStateToCellProps(state, ownProps);
   t.is(props.errors, 'i18n-error:required');
 });
 
-test('mapStateToEnumCellProps - set default options for dropdown list', t => {
+test('mapStateToEnumCellProps - set default options for dropdown list', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/nationality'
+    scope: '#/properties/nationality',
   };
   const ownProps = {
     schema: {
-      enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
+      enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
     },
     uischema,
-    path: 'nationality'
+    path: 'nationality',
   };
 
   const props = defaultMapStateToEnumCellProps(createState(uischema), ownProps);
   t.deepEqual(
     props.options,
-    ['DE', 'IT', 'JP', 'US', 'RU', 'Other'].map(e => enumToEnumOptionMapper(e))
+    ['DE', 'IT', 'JP', 'US', 'RU', 'Other'].map((e) =>
+      enumToEnumOptionMapper(e)
+    )
   );
   t.is(props.data, undefined);
 });
 
-
-test('mapStateToOneOfEnumCellProps - set one of options for dropdown list', t => {
+test('mapStateToOneOfEnumCellProps - set one of options for dropdown list', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/country'
+    scope: '#/properties/country',
   };
   const ownProps = {
     schema: {
       oneOf: [
         {
           const: 'AU',
-          title: 'Australia'
+          title: 'Australia',
         },
         {
           const: 'NZ',
-          title: 'New Zealand'
-        }
-      ]
+          title: 'New Zealand',
+        },
+      ],
     },
     uischema,
-    path: 'country'
+    path: 'country',
   };
 
   const props = mapStateToOneOfEnumCellProps(createState(uischema), ownProps);
-  t.deepEqual(props.options, [{title: 'Australia' , const: 'AU', }, { title: 'New Zealand', const: 'NZ' }].map(schema => oneOfToEnumOptionMapper(schema)));
+  t.deepEqual(
+    props.options,
+    [
+      { title: 'Australia', const: 'AU' },
+      { title: 'New Zealand', const: 'NZ' },
+    ].map((schema) => oneOfToEnumOptionMapper(schema))
+  );
   t.is(props.data, undefined);
 });
 
-test('defaultMapDispatchToControlProps, initialized with custom handleChange', t => {
+test('defaultMapDispatchToControlProps, initialized with custom handleChange', (t) => {
   let didChange = false;
   const uiSchema = {
     type: 'Control',
-    scope: '#/properties/nationality'
+    scope: '#/properties/nationality',
   };
   const ownProps = {
     handleChange: () => {
       didChange = true;
-    }
+    },
   };
   const store = mockStore(createState(uiSchema));
   const props: DispatchPropsOfCell = defaultMapDispatchToControlProps(
@@ -365,10 +374,10 @@ test('defaultMapDispatchToControlProps, initialized with custom handleChange', t
   t.true(didChange);
 });
 
-test('defaultMapDispatchToControlProps, with default handleChange', t => {
+test('defaultMapDispatchToControlProps, with default handleChange', (t) => {
   const uiSchema = {
     type: 'Control',
-    scope: '#/properties/nationality'
+    scope: '#/properties/nationality',
   };
   const store = mockStore(createState(uiSchema));
   const props = defaultMapDispatchToControlProps(store.dispatch, {});
diff --git a/packages/core/test/util/derivetype.test.ts b/packages/core/test/util/derivetype.test.ts
index b2cfac449..0772d36cb 100644
--- a/packages/core/test/util/derivetype.test.ts
+++ b/packages/core/test/util/derivetype.test.ts
@@ -27,74 +27,74 @@ import test from 'ava';
 import { JsonSchema } from '../../src/models/jsonSchema';
 import { deriveTypes } from '../../src/util/index';
 
-test('derive type with type', t => {
+test('derive type with type', (t) => {
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   t.is(deriveTypes(schema).length, 1);
   t.is(deriveTypes(schema)[0], 'string');
 });
 
-test('derive type w/o type - properties object', t => {
+test('derive type w/o type - properties object', (t) => {
   const schema: JsonSchema = {
     properties: {
-      foo: { type: 'string' }
-    }
+      foo: { type: 'string' },
+    },
   };
   t.is(deriveTypes(schema).length, 1);
   t.is(deriveTypes(schema)[0], 'object');
 });
 
-test('derive type w/o type - additionalProperties object', t => {
+test('derive type w/o type - additionalProperties object', (t) => {
   const schema: JsonSchema = {
     additionalProperties: {
-      type: 'string'
-    }
+      type: 'string',
+    },
   };
   t.is(deriveTypes(schema).length, 1);
   t.is(deriveTypes(schema)[0], 'object');
 });
 
-test('derive type w/o type - items array', t => {
+test('derive type w/o type - items array', (t) => {
   const schema: JsonSchema = {
     items: {
-      type: 'string'
-    }
+      type: 'string',
+    },
   };
   t.is(deriveTypes(schema).length, 1);
   t.is(deriveTypes(schema)[0], 'array');
 });
 
-test('derive type with type - union', t => {
+test('derive type with type - union', (t) => {
   const schema: JsonSchema = {
-    type: ['string', 'number']
+    type: ['string', 'number'],
   };
   t.is(deriveTypes(schema).length, 2);
   t.is(deriveTypes(schema), schema.type);
 });
 
-test('derive type with type - allOf first has type', t => {
+test('derive type with type - allOf first has type', (t) => {
   const schema: JsonSchema = {
-    allOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }]
+    allOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }],
   };
   t.is(deriveTypes(schema).length, 1);
   t.is(deriveTypes(schema)[0], 'string');
 });
 
-test('derive type with type - allOf other has type', t => {
+test('derive type with type - allOf other has type', (t) => {
   const schema: JsonSchema = {
-    allOf: [{ enum: ['foo', 'bar'] }, { type: 'string' }]
+    allOf: [{ enum: ['foo', 'bar'] }, { type: 'string' }],
   };
   t.is(deriveTypes(schema).length, 1);
   t.is(deriveTypes(schema)[0], 'string');
 });
 
-test('derive type w/o type - allOf other has type', t => {
+test('derive type w/o type - allOf other has type', (t) => {
   const schema: JsonSchema = {
     allOf: [
       { properties: { foo: { type: 'string' } } },
-      { properties: { bar: { type: 'string' } } }
-    ]
+      { properties: { bar: { type: 'string' } } },
+    ],
   };
   t.is(deriveTypes(schema).length, 1);
   t.is(deriveTypes(schema)[0], 'object');
diff --git a/packages/core/test/util/label.test.ts b/packages/core/test/util/label.test.ts
index 3cc7f23e7..93f36d6a0 100644
--- a/packages/core/test/util/label.test.ts
+++ b/packages/core/test/util/label.test.ts
@@ -28,335 +28,335 @@ import { ControlElement } from '../../src';
 import { createLabelDescriptionFrom } from '../../src/util';
 import { JsonSchema } from '../../src/models/jsonSchema';
 
-test('control relative - no schema', t => {
+test('control relative - no schema', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
-    scope: '/properties/foo'
+    scope: '/properties/foo',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, undefined);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo');
 });
 
-test('control without label string, camel split - no schema', t => {
+test('control without label string, camel split - no schema', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
-    scope: '#/properties/fooBarBaz'
+    scope: '#/properties/fooBarBaz',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, undefined);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo Bar Baz');
 });
 
-test('control with label string - no schema', t => {
+test('control with label string - no schema', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: 'bar'
+    label: 'bar',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, undefined);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'bar');
 });
 
-test('control with label boolean - no schema', t => {
+test('control with label boolean - no schema', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: true
+    label: true,
   };
   const labelObject = createLabelDescriptionFrom(controlElement, undefined);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo');
 });
 
-test('control with label object, empty - no schema', t => {
+test('control with label object, empty - no schema', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: {}
+    label: {},
   };
   const labelObject = createLabelDescriptionFrom(controlElement, undefined);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo');
 });
 
-test('control with label object, text-only - no schema', t => {
+test('control with label object, text-only - no schema', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
-      text: 'mega bar'
-    }
+      text: 'mega bar',
+    },
   };
   const labelObject = createLabelDescriptionFrom(controlElement, undefined);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'mega bar');
 });
 
-test('control with label object, visible-only - no schema', t => {
+test('control with label object, visible-only - no schema', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
-      show: true
-    }
+      show: true,
+    },
   };
   const labelObject = createLabelDescriptionFrom(controlElement, undefined);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo');
 });
 
-test('control with label object, full - no schema', t => {
+test('control with label object, full - no schema', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
       show: false,
-      text: 'mega bar'
-    }
+      text: 'mega bar',
+    },
   };
   const labelObject = createLabelDescriptionFrom(controlElement, undefined);
   t.is(labelObject.show, false);
   t.is(labelObject.text, 'mega bar');
 });
 
-test('control relative - schema without title', t => {
+test('control relative - schema without title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
-    scope: '/properties/foo'
+    scope: '/properties/foo',
   };
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo');
 });
 
-test('control without label string, camel split - schema without title', t => {
+test('control without label string, camel split - schema without title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
-    scope: '#/properties/fooBarBaz'
+    scope: '#/properties/fooBarBaz',
   };
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo Bar Baz');
 });
 
-test('control with label string - schema without title', t => {
+test('control with label string - schema without title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: 'bar'
+    label: 'bar',
   };
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'bar');
 });
 
-test('control with label boolean - schema without title', t => {
+test('control with label boolean - schema without title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: true
+    label: true,
   };
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo');
 });
 
-test('control with label object, empty - schema without title', t => {
+test('control with label object, empty - schema without title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: {}
+    label: {},
   };
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo');
 });
 
-test('control with label object, text-only - schema without title', t => {
+test('control with label object, text-only - schema without title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
-      text: 'mega bar'
-    }
+      text: 'mega bar',
+    },
   };
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'mega bar');
 });
 
-test('control with label object, visible-only - schema without title', t => {
+test('control with label object, visible-only - schema without title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
-      show: true
-    }
+      show: true,
+    },
   };
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Foo');
 });
 
-test('control with label object, full - schema without title', t => {
+test('control with label object, full - schema without title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
       show: false,
-      text: 'mega bar'
-    }
+      text: 'mega bar',
+    },
   };
   const schema: JsonSchema = {
-    type: 'string'
+    type: 'string',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, false);
   t.is(labelObject.text, 'mega bar');
 });
 
-test('control relative - schema with title', t => {
+test('control relative - schema with title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
-    scope: '/properties/foo'
+    scope: '/properties/foo',
   };
   const schema: JsonSchema = {
     type: 'string',
-    title: 'Schema Title'
+    title: 'Schema Title',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Schema Title');
 });
 
-test('control without label string, camel split - schema with title', t => {
+test('control without label string, camel split - schema with title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
-    scope: '#/properties/fooBarBaz'
+    scope: '#/properties/fooBarBaz',
   };
   const schema: JsonSchema = {
     type: 'string',
-    title: 'Schema Title'
+    title: 'Schema Title',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Schema Title');
 });
 
-test('control with label string - schema with title', t => {
+test('control with label string - schema with title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: 'bar'
+    label: 'bar',
   };
   const schema: JsonSchema = {
     type: 'string',
-    title: 'Schema Title'
+    title: 'Schema Title',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'bar');
 });
 
-test('control with label boolean - schema with title', t => {
+test('control with label boolean - schema with title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: true
+    label: true,
   };
   const schema: JsonSchema = {
     type: 'string',
-    title: 'Schema Title'
+    title: 'Schema Title',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Schema Title');
 });
 
-test('control with label object, empty - schema with title', t => {
+test('control with label object, empty - schema with title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
-    label: {}
+    label: {},
   };
   const schema: JsonSchema = {
     type: 'string',
-    title: 'Schema Title'
+    title: 'Schema Title',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Schema Title');
 });
 
-test('control with label object, text-only - schema with title', t => {
+test('control with label object, text-only - schema with title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
-      text: 'mega bar'
-    }
+      text: 'mega bar',
+    },
   };
   const schema: JsonSchema = {
     type: 'string',
-    title: 'Schema Title'
+    title: 'Schema Title',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'mega bar');
 });
 
-test('control with label object, visible-only - schema with title', t => {
+test('control with label object, visible-only - schema with title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
-      show: true
-    }
+      show: true,
+    },
   };
   const schema: JsonSchema = {
     type: 'string',
-    title: 'Schema Title'
+    title: 'Schema Title',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, true);
   t.is(labelObject.text, 'Schema Title');
 });
 
-test('control with label object, full - schema with title', t => {
+test('control with label object, full - schema with title', (t) => {
   const controlElement: ControlElement = {
     type: 'Control',
     scope: '#/properties/foo',
     label: {
       show: false,
-      text: 'mega bar'
-    }
+      text: 'mega bar',
+    },
   };
   const schema: JsonSchema = {
     type: 'string',
-    title: 'Schema Title'
+    title: 'Schema Title',
   };
   const labelObject = createLabelDescriptionFrom(controlElement, schema);
   t.is(labelObject.show, false);
diff --git a/packages/core/test/util/path.test.ts b/packages/core/test/util/path.test.ts
index 062450166..c3a138927 100644
--- a/packages/core/test/util/path.test.ts
+++ b/packages/core/test/util/path.test.ts
@@ -26,60 +26,69 @@ import test from 'ava';
 import { JsonSchema } from '../../src';
 import { Resolve, toDataPath } from '../../src/util';
 
-test('resolve ', t => {
+test('resolve ', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       foo: {
-        type: 'integer'
-      }
-    }
+        type: 'integer',
+      },
+    },
   };
   t.deepEqual(Resolve.schema(schema, '#/properties/foo', schema), {
-    type: 'integer'
+    type: 'integer',
   });
 });
 
-test('toDataPath ', t => {
+test('toDataPath ', (t) => {
   t.is(toDataPath('#/properties/foo/properties/bar'), 'foo.bar');
 });
-test('toDataPath replace anyOf', t => {
+test('toDataPath replace anyOf', (t) => {
   t.is(toDataPath('/anyOf/1/properties/foo/anyOf/1/properties/bar'), 'foo.bar');
 });
-test('toDataPath replace anyOf in combination with conditional schema compositions', t => {
+test('toDataPath replace anyOf in combination with conditional schema compositions', (t) => {
   t.is(toDataPath('/anyOf/1/then/properties/foo'), 'foo');
 });
-test('toDataPath replace multiple directly nested anyOf in combination with conditional schema compositions', t => {
+test('toDataPath replace multiple directly nested anyOf in combination with conditional schema compositions', (t) => {
   t.is(toDataPath('/anyOf/1/then/anyOf/0/then/properties/foo'), 'foo');
 });
-test('toDataPath replace multiple nested properties with anyOf in combination with conditional schema compositions', t => {
-  t.is(toDataPath('/anyOf/1/properties/foo/anyOf/0/then/properties/bar'), 'foo.bar');
+test('toDataPath replace multiple nested properties with anyOf in combination with conditional schema compositions', (t) => {
+  t.is(
+    toDataPath('/anyOf/1/properties/foo/anyOf/0/then/properties/bar'),
+    'foo.bar'
+  );
 });
-test('toDataPath replace allOf', t => {
+test('toDataPath replace allOf', (t) => {
   t.is(toDataPath('/allOf/1/properties/foo/allOf/1/properties/bar'), 'foo.bar');
 });
-test('toDataPath replace allOf in combination with conditional schema compositions', t => {
+test('toDataPath replace allOf in combination with conditional schema compositions', (t) => {
   t.is(toDataPath('/allOf/1/then/properties/foo'), 'foo');
 });
-test('toDataPath replace multiple directly nested allOf in combination with conditional schema compositions', t => {
+test('toDataPath replace multiple directly nested allOf in combination with conditional schema compositions', (t) => {
   t.is(toDataPath('/allOf/1/then/allOf/0/then/properties/foo'), 'foo');
 });
-test('toDataPath replace multiple nested properties with allOf in combination with conditional schema compositions', t => {
-  t.is(toDataPath('/allOf/1/properties/foo/allOf/0/then/properties/bar'), 'foo.bar');
+test('toDataPath replace multiple nested properties with allOf in combination with conditional schema compositions', (t) => {
+  t.is(
+    toDataPath('/allOf/1/properties/foo/allOf/0/then/properties/bar'),
+    'foo.bar'
+  );
 });
-test('toDataPath replace oneOf', t => {
+test('toDataPath replace oneOf', (t) => {
   t.is(toDataPath('/oneOf/1/properties/foo/oneOf/1/properties/bar'), 'foo.bar');
 });
-test('toDataPath replace oneOf in combination with conditional schema compositions', t => {
+test('toDataPath replace oneOf in combination with conditional schema compositions', (t) => {
   t.is(toDataPath('/oneOf/1/then/properties/foo'), 'foo');
 });
-test('toDataPath replace multiple directly nested oneOf in combination with conditional schema compositions', t => {
+test('toDataPath replace multiple directly nested oneOf in combination with conditional schema compositions', (t) => {
   t.is(toDataPath('/oneOf/1/then/oneOf/0/then/properties/foo'), 'foo');
 });
-test('toDataPath replace multiple nested properties with oneOf in combination with conditional schema compositions', t => {
-  t.is(toDataPath('/oneOf/1/properties/foo/oneOf/0/then/properties/bar'), 'foo.bar');
+test('toDataPath replace multiple nested properties with oneOf in combination with conditional schema compositions', (t) => {
+  t.is(
+    toDataPath('/oneOf/1/properties/foo/oneOf/0/then/properties/bar'),
+    'foo.bar'
+  );
 });
-test('toDataPath replace all combinators', t => {
+test('toDataPath replace all combinators', (t) => {
   t.is(
     toDataPath(
       '/oneOf/1/properties/foo/anyOf/1/properties/bar/allOf/1/properties/foobar'
@@ -87,47 +96,47 @@ test('toDataPath replace all combinators', t => {
     'foo.bar.foobar'
   );
 });
-test('toDataPath use of keywords', t => {
+test('toDataPath use of keywords', (t) => {
   t.is(toDataPath('#/properties/properties'), 'properties');
 });
-test('toDataPath use of encoded paths', t => {
+test('toDataPath use of encoded paths', (t) => {
   const fooBar = encodeURIComponent('foo.bar');
   t.is(toDataPath(`#/properties/${fooBar}`), `${fooBar}`);
 });
-test('toDataPath relative with /', t => {
+test('toDataPath relative with /', (t) => {
   t.is(toDataPath('/properties/foo/properties/bar'), 'foo.bar');
 });
-test('toDataPath use of keywords relative with /', t => {
+test('toDataPath use of keywords relative with /', (t) => {
   t.is(toDataPath('/properties/properties'), 'properties');
 });
-test('toDataPath use of encoded paths relative with /', t => {
+test('toDataPath use of encoded paths relative with /', (t) => {
   const fooBar = encodeURIComponent('foo/bar');
   t.is(toDataPath(`/properties/${fooBar}`), `${fooBar}`);
 });
-test('toDataPath relative without /', t => {
+test('toDataPath relative without /', (t) => {
   t.is(toDataPath('properties/foo/properties/bar'), 'foo.bar');
 });
-test('toDataPath use of keywords relative without /', t => {
+test('toDataPath use of keywords relative without /', (t) => {
   t.is(toDataPath('properties/properties'), 'properties');
 });
-test('toDataPath use of encoded paths relative without /', t => {
+test('toDataPath use of encoded paths relative without /', (t) => {
   const fooBar = encodeURIComponent('foo/bar');
   t.is(toDataPath(`properties/${fooBar}`), `${fooBar}`);
 });
-test('toDataPath use of encoded special character in pathname', t => {
+test('toDataPath use of encoded special character in pathname', (t) => {
   t.is(toDataPath('properties/foo~0bar~1baz'), 'foo~bar/baz');
 });
-test('resolve instance', t => {
+test('resolve instance', (t) => {
   const instance = { foo: 123 };
   const result = Resolve.data(instance, toDataPath('#/properties/foo'));
   t.is(result, 123);
 });
-test('resolve instance with keywords', t => {
+test('resolve instance with keywords', (t) => {
   const instance = { properties: 123 };
   const result = Resolve.data(instance, toDataPath('#/properties/properties'));
   t.is(result, 123);
 });
-test('resolve nested instance', t => {
+test('resolve nested instance', (t) => {
   const instance = { foo: { bar: 123 } };
   const result = Resolve.data(
     instance,
@@ -135,7 +144,7 @@ test('resolve nested instance', t => {
   );
   t.is(result, 123);
 });
-test('resolve uninitiated instance', t => {
+test('resolve uninitiated instance', (t) => {
   const instance = {};
   const result = Resolve.data(
     instance,
@@ -143,27 +152,27 @@ test('resolve uninitiated instance', t => {
   );
   t.is(result, undefined);
 });
-test('resolve $ref', t => {
+test('resolve $ref', (t) => {
   const schema: JsonSchema = {
     definitions: {
       foo: {
-        type: 'string'
-      }
+        type: 'string',
+      },
     },
     type: 'object',
     properties: {
       foos: {
         type: 'array',
         items: {
-          $ref: '#/definitions/foo'
-        }
-      }
-    }
+          $ref: '#/definitions/foo',
+        },
+      },
+    },
   };
   const result = Resolve.schema(schema, '#/properties/foos/items', schema);
   t.deepEqual(result, { type: 'string' });
 });
-test('resolve $ref simple', t => {
+test('resolve $ref simple', (t) => {
   const schema: JsonSchema = {
     definitions: {
       foo: {
@@ -172,21 +181,21 @@ test('resolve $ref simple', t => {
           bar: {
             type: 'array',
             items: {
-              $ref: '#/definitions/foo'
-            }
-          }
-        }
-      }
+              $ref: '#/definitions/foo',
+            },
+          },
+        },
+      },
     },
     type: 'object',
     properties: {
       foos: {
         type: 'array',
         items: {
-          $ref: '#/definitions/foo'
-        }
-      }
-    }
+          $ref: '#/definitions/foo',
+        },
+      },
+    },
   };
   const result = Resolve.schema(schema, '#/properties/foos/items', schema);
   t.deepEqual(result, {
@@ -195,14 +204,14 @@ test('resolve $ref simple', t => {
       bar: {
         type: 'array',
         items: {
-          $ref: '#/definitions/foo'
-        }
-      }
-    }
+          $ref: '#/definitions/foo',
+        },
+      },
+    },
   });
   t.not((schema.definitions.foo.properties.bar.items as JsonSchema).$ref, '#');
 });
-test('resolve $ref complicated', t => {
+test('resolve $ref complicated', (t) => {
   const schema: JsonSchema = {
     definitions: {
       foo: {
@@ -211,10 +220,10 @@ test('resolve $ref complicated', t => {
           bar: {
             type: 'array',
             items: {
-              $ref: '#/definitions/foo2'
-            }
-          }
-        }
+              $ref: '#/definitions/foo2',
+            },
+          },
+        },
       },
       foo2: {
         type: 'object',
@@ -222,21 +231,21 @@ test('resolve $ref complicated', t => {
           bar: {
             type: 'array',
             items: {
-              $ref: '#/definitions/foo'
-            }
-          }
-        }
-      }
+              $ref: '#/definitions/foo',
+            },
+          },
+        },
+      },
     },
     type: 'object',
     properties: {
       foos: {
         type: 'array',
         items: {
-          $ref: '#/definitions/foo'
-        }
-      }
-    }
+          $ref: '#/definitions/foo',
+        },
+      },
+    },
   };
   const result = Resolve.schema(schema, '#/properties/foos/items', schema);
   t.deepEqual(result, {
@@ -245,9 +254,9 @@ test('resolve $ref complicated', t => {
       bar: {
         type: 'array',
         items: {
-          $ref: '#/definitions/foo2'
-        }
-      }
-    }
+          $ref: '#/definitions/foo2',
+        },
+      },
+    },
   });
 });
diff --git a/packages/core/test/util/renderer.test.ts b/packages/core/test/util/renderer.test.ts
index 53043f5db..64fdd4e03 100644
--- a/packages/core/test/util/renderer.test.ts
+++ b/packages/core/test/util/renderer.test.ts
@@ -31,9 +31,38 @@ import { ErrorObject } from 'ajv';
 import { JsonFormsState } from '../../src/store';
 import { coreReducer, JsonFormsCore } from '../../src/reducers/core';
 import { Dispatch } from '../../src/util/type';
-import { CoreActions, init, setValidationMode, update, UpdateAction, UPDATE_DATA } from '../../src/actions/actions';
-import { ControlElement, LabelElement, RuleEffect, UISchemaElement } from '../../src/models/uischema';
-import { computeLabel, createDefaultValue, mapDispatchToArrayControlProps, mapDispatchToControlProps, mapDispatchToMultiEnumProps, mapStateToAnyOfProps, mapStateToArrayLayoutProps, mapStateToControlProps, mapStateToEnumControlProps, mapStateToJsonFormsRendererProps, mapStateToLabelProps, mapStateToLayoutProps, mapStateToMultiEnumControlProps, mapStateToOneOfEnumControlProps, mapStateToOneOfProps, OwnPropsOfControl } from '../../src/util/renderer';
+import {
+  CoreActions,
+  init,
+  setValidationMode,
+  update,
+  UpdateAction,
+  UPDATE_DATA,
+} from '../../src/actions/actions';
+import {
+  ControlElement,
+  LabelElement,
+  RuleEffect,
+  UISchemaElement,
+} from '../../src/models/uischema';
+import {
+  computeLabel,
+  createDefaultValue,
+  mapDispatchToArrayControlProps,
+  mapDispatchToControlProps,
+  mapDispatchToMultiEnumProps,
+  mapStateToAnyOfProps,
+  mapStateToArrayLayoutProps,
+  mapStateToControlProps,
+  mapStateToEnumControlProps,
+  mapStateToJsonFormsRendererProps,
+  mapStateToLabelProps,
+  mapStateToLayoutProps,
+  mapStateToMultiEnumControlProps,
+  mapStateToOneOfEnumControlProps,
+  mapStateToOneOfProps,
+  OwnPropsOfControl,
+} from '../../src/util/renderer';
 import { clearAllIds } from '../../src/util/ids';
 import { JsonSchema } from '../../src/models/jsonSchema';
 import { rankWith } from '../../src/testers/testers';
@@ -49,7 +78,9 @@ const mockDispatch = (
   initialCore: JsonFormsCore
 ): [() => JsonFormsCore, Dispatch<CoreActions>] => {
   const coreContainer = { core: initialCore };
-  const dispatch: Dispatch<CoreActions> = <T extends CoreActions> (action: T) : T => {
+  const dispatch: Dispatch<CoreActions> = <T extends CoreActions>(
+    action: T
+  ): T => {
     coreContainer.core = coreReducer(coreContainer.core, action);
     return action;
   };
@@ -62,8 +93,8 @@ const hideRule = {
   condition: {
     type: 'LEAF',
     scope: '#/properties/firstName',
-    expectedValue: 'Homer'
-  }
+    expectedValue: 'Homer',
+  },
 };
 
 const disableRule = {
@@ -71,8 +102,8 @@ const disableRule = {
   condition: {
     type: 'LEAF',
     scope: '#/properties/firstName',
-    expectedValue: 'Homer'
-  }
+    expectedValue: 'Homer',
+  },
 };
 
 const enableRule = {
@@ -80,13 +111,13 @@ const enableRule = {
   condition: {
     type: 'LEAF',
     scope: '#/properties/firstName',
-    expectedValue: 'Homer'
-  }
+    expectedValue: 'Homer',
+  },
 };
 
 const coreUISchema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/firstName'
+  scope: '#/properties/firstName',
 };
 
 const createState = (uischema: UISchemaElement) => ({
@@ -96,63 +127,63 @@ const createState = (uischema: UISchemaElement) => ({
         type: 'object',
         properties: {
           firstName: { type: 'string' },
-          lastName: { type: 'string' }
-        }
+          lastName: { type: 'string' },
+        },
       },
       data: {
-        firstName: 'Homer'
+        firstName: 'Homer',
       },
       uischema,
-      errors: [] as ErrorObject[]
-    }
-  }
+      errors: [] as ErrorObject[],
+    },
+  },
 });
 
-test('mapStateToControlProps - visible via ownProps ', t => {
+test('mapStateToControlProps - visible via ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
     visible: true,
-    uischema
+    uischema,
   };
   const props = mapStateToControlProps(createState(uischema), ownProps);
   t.false(props.visible);
 });
 
-test('mapStateToControlProps - hidden via ownProps ', t => {
+test('mapStateToControlProps - hidden via ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
     visible: false,
-    uischema
+    uischema,
   };
   const props = mapStateToControlProps(createState(uischema), ownProps);
   t.false(props.visible);
 });
 
-test('mapStateToControlProps - hidden via state ', t => {
+test('mapStateToControlProps - hidden via state ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const props = mapStateToControlProps(createState(uischema), ownProps);
   t.false(props.visible);
 });
 
-test('mapStateToControlProps - visible via state ', t => {
+test('mapStateToControlProps - visible via state ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const clonedState = _.cloneDeep(createState(uischema));
   clonedState.jsonforms.core.data.firstName = 'Lisa';
@@ -160,14 +191,14 @@ test('mapStateToControlProps - visible via state ', t => {
   t.true(props.visible);
 });
 
-test('mapStateToControlProps - visible via state with path from ownProps ', t => {
+test('mapStateToControlProps - visible via state with path from ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
     uischema,
-    path: 'foo'
+    path: 'foo',
   };
   const state = {
     jsonforms: {
@@ -176,24 +207,24 @@ test('mapStateToControlProps - visible via state with path from ownProps ', t =>
           type: 'object',
           properties: {
             firstName: { type: 'string' },
-            lastName: { type: 'string' }
-          }
+            lastName: { type: 'string' },
+          },
         },
         data: {
-          foo: { firstName: 'Lisa' }
+          foo: { firstName: 'Lisa' },
         },
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
   const props = mapStateToControlProps(state, ownProps);
   t.true(props.visible);
 });
 
-test('mapStateToControlProps - disabled via global readonly', t => {
+test('mapStateToControlProps - disabled via global readonly', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.readonly = true;
@@ -202,10 +233,10 @@ test('mapStateToControlProps - disabled via global readonly', t => {
   t.false(props.enabled);
 });
 
-test('mapStateToControlProps - disabled via global readonly beats enabled via ownProps', t => {
+test('mapStateToControlProps - disabled via global readonly beats enabled via ownProps', (t) => {
   const ownProps = {
     uischema: coreUISchema,
-    enabled: true
+    enabled: true,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.readonly = true;
@@ -214,13 +245,13 @@ test('mapStateToControlProps - disabled via global readonly beats enabled via ow
   t.false(props.enabled);
 });
 
-test('mapStateToControlProps - disabled via global readonly beats enabled via rule', t => {
+test('mapStateToControlProps - disabled via global readonly beats enabled via rule', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: enableRule
+    rule: enableRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const state: JsonFormsState = createState(uischema);
   state.jsonforms.readonly = true;
@@ -229,15 +260,15 @@ test('mapStateToControlProps - disabled via global readonly beats enabled via ru
   t.false(props.enabled);
 });
 
-test('mapStateToControlProps - enabled via state with path from ownProps ', t => {
+test('mapStateToControlProps - enabled via state with path from ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
     visible: true,
     uischema,
-    path: 'foo'
+    path: 'foo',
   };
   const state = {
     jsonforms: {
@@ -246,66 +277,66 @@ test('mapStateToControlProps - enabled via state with path from ownProps ', t =>
           type: 'object',
           properties: {
             firstName: { type: 'string' },
-            lastName: { type: 'string' }
-          }
+            lastName: { type: 'string' },
+          },
         },
         data: {
-          foo: { firstName: 'Lisa' }
+          foo: { firstName: 'Lisa' },
         },
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
   const props = mapStateToControlProps(state, ownProps);
   t.true(props.enabled);
 });
 
-test('mapStateToControlProps - enabled via ownProps ', t => {
+test('mapStateToControlProps - enabled via ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
     enabled: true,
-    uischema
+    uischema,
   };
   const props = mapStateToControlProps(createState(uischema), ownProps);
   t.false(props.enabled);
 });
 
-test('mapStateToControlProps - disabled via ownProps ', t => {
+test('mapStateToControlProps - disabled via ownProps ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
     enabled: false,
-    uischema
+    uischema,
   };
   const props = mapStateToControlProps(createState(uischema), ownProps);
   t.false(props.enabled);
 });
 
-test('mapStateToControlProps - disabled via state ', t => {
+test('mapStateToControlProps - disabled via state ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const props = mapStateToControlProps(createState(uischema), ownProps);
   t.false(props.enabled);
 });
 
-test('mapStateToControlProps - enabled via state ', t => {
+test('mapStateToControlProps - enabled via state ', (t) => {
   const uischema = {
     ...coreUISchema,
-    rule: disableRule
+    rule: disableRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const clonedState = _.cloneDeep(createState(uischema));
   clonedState.jsonforms.core.data.firstName = 'Lisa';
@@ -313,55 +344,55 @@ test('mapStateToControlProps - enabled via state ', t => {
   t.true(props.enabled);
 });
 
-test('mapStateToControlProps - path', t => {
+test('mapStateToControlProps - path', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const props = mapStateToControlProps(createState(coreUISchema), ownProps);
   t.is(props.path, 'firstName');
 });
 
-test('mapStateToControlProps - compose path with ownProps.path', t => {
+test('mapStateToControlProps - compose path with ownProps.path', (t) => {
   const ownProps = {
     uischema: coreUISchema,
-    path: 'yo'
+    path: 'yo',
   };
   const props = mapStateToControlProps(createState(coreUISchema), ownProps);
   t.is(props.path, 'yo.firstName');
 });
 
-test('mapStateToControlProps - derive label', t => {
+test('mapStateToControlProps - derive label', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const props = mapStateToControlProps(createState(coreUISchema), ownProps);
   t.is(props.label, 'First Name');
 });
 
-test('mapStateToControlProps - do not show label', t => {
+test('mapStateToControlProps - do not show label', (t) => {
   const ownProps = {
     uischema: {
       ...coreUISchema,
       label: {
-        show: false
-      }
-    }
+        show: false,
+      },
+    },
   };
   const props = mapStateToControlProps(createState(coreUISchema), ownProps);
   t.is(props.label, '');
 });
 
-test('mapStateToControlProps - data', t => {
+test('mapStateToControlProps - data', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const props = mapStateToControlProps(createState(coreUISchema), ownProps);
   t.is(props.data, 'Homer');
 });
 
-test('mapStateToControlProps - errors', t => {
+test('mapStateToControlProps - errors', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const clonedState = _.cloneDeep(createState(coreUISchema));
   const error: ErrorObject = {
@@ -370,24 +401,24 @@ test('mapStateToControlProps - errors', t => {
     keyword: 'whatever',
     schemaPath: '',
     params: undefined,
-    parentSchema: { type: 'string' }
+    parentSchema: { type: 'string' },
   };
   clonedState.jsonforms.core.errors = [error];
   const props = mapStateToControlProps(clonedState, ownProps);
   t.is(props.errors, 'Duff beer');
 });
 
-test('mapStateToControlProps - no duplicate error messages', t => {
+test('mapStateToControlProps - no duplicate error messages', (t) => {
   const schema = {
     type: 'object',
     properties: {
       firstName: {
         anyOf: [
           { type: 'string', minLength: 5 },
-          { type: 'string', enum: ['foo', 'bar'] }
-        ]
-      }
-    }
+          { type: 'string', enum: ['foo', 'bar'] },
+        ],
+      },
+    },
   };
   const initCoreState = coreReducer(undefined, init({}, schema, coreUISchema));
   const updateCoreState = coreReducer(
@@ -401,34 +432,37 @@ test('mapStateToControlProps - no duplicate error messages', t => {
   t.is(props.errors.split('\n').length, 1);
 });
 
-test('mapStateToControlProps - id', t => {
+test('mapStateToControlProps - id', (t) => {
   clearAllIds();
   const ownProps = {
     uischema: coreUISchema,
-    id: '#/properties/firstName'
+    id: '#/properties/firstName',
   };
   const props = mapStateToControlProps(createState(coreUISchema), ownProps);
   t.is(props.id, '#/properties/firstName');
 });
 
-test('mapStateToControlProps - hide errors in hide validation mode', t => {
+test('mapStateToControlProps - hide errors in hide validation mode', (t) => {
   const schema = {
     type: 'object',
     properties: {
       animal: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/animal'
+    scope: '#/properties/animal',
   };
-  const initCoreState = coreReducer(undefined, init({ animal: 100 }, schema, uischema));
+  const initCoreState = coreReducer(
+    undefined,
+    init({ animal: 100 }, schema, uischema)
+  );
   t.is(initCoreState.errors.length, 1);
 
   const ownProps = {
-    uischema
+    uischema,
   };
   const props = mapStateToControlProps(
     { jsonforms: { core: initCoreState } },
@@ -449,7 +483,7 @@ test('mapStateToControlProps - hide errors in hide validation mode', t => {
   t.is(hideErrorsProps.errors, '');
 });
 
-test('mapDispatchToControlProps', t => {
+test('mapDispatchToControlProps', (t) => {
   const store = mockStore(createState(coreUISchema));
   const props = mapDispatchToControlProps(store.dispatch);
   props.handleChange('foo', 42);
@@ -459,12 +493,12 @@ test('mapDispatchToControlProps', t => {
   t.is(updateAction.updater(), 42);
 });
 
-test('createDefaultValue', t => {
+test('createDefaultValue', (t) => {
   t.true(
     _.isDate(
       createDefaultValue({
         type: 'string',
-        format: 'date'
+        format: 'date',
       })
     )
   );
@@ -472,7 +506,7 @@ test('createDefaultValue', t => {
     _.isDate(
       createDefaultValue({
         type: 'string',
-        format: 'date-time'
+        format: 'date-time',
       })
     )
   );
@@ -480,7 +514,7 @@ test('createDefaultValue', t => {
     _.isDate(
       createDefaultValue({
         type: 'string',
-        format: 'time'
+        format: 'time',
       })
     )
   );
@@ -494,69 +528,69 @@ test('createDefaultValue', t => {
   t.deepEqual(createDefaultValue({ type: 'something' }), {});
 });
 
-test(`mapStateToJsonFormsRendererProps should use registered UI schema given ownProps schema`, t => {
+test(`mapStateToJsonFormsRendererProps should use registered UI schema given ownProps schema`, (t) => {
   const store = mockStore(createState(coreUISchema));
   const schema = {
     type: 'object',
     properties: {
       bar: {
-        type: 'number'
-      }
-    }
+        type: 'number',
+      },
+    },
   };
 
   const props = mapStateToJsonFormsRendererProps(store.getState(), { schema });
   t.deepEqual(props.uischema, coreUISchema);
 });
 
-test(`mapStateToJsonFormsRendererProps should use registered UI schema given no ownProps`, t => {
+test(`mapStateToJsonFormsRendererProps should use registered UI schema given no ownProps`, (t) => {
   const store = mockStore(createState(coreUISchema));
   const props = mapStateToJsonFormsRendererProps(store.getState(), {});
   t.deepEqual(props.uischema, coreUISchema);
 });
 
-test(`mapStateToJsonFormsRendererProps should use UI schema if given via ownProps`, t => {
+test(`mapStateToJsonFormsRendererProps should use UI schema if given via ownProps`, (t) => {
   const store = mockStore(createState(coreUISchema));
   const schema = {
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
+        type: 'string',
       },
       bar: {
-        type: 'number'
-      }
-    }
+        type: 'number',
+      },
+    },
   };
   const uischema = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
 
   const props = mapStateToJsonFormsRendererProps(store.getState(), {
     schema,
-    uischema
+    uischema,
   });
   t.deepEqual(props.uischema, uischema);
 });
 
-test('mapDispatchToArrayControlProps should adding items to array', t => {
+test('mapDispatchToArrayControlProps should adding items to array', (t) => {
   const data: any = ['foo'];
   const schema: JsonSchema = {
     type: 'array',
     items: {
-      type: 'string'
-    }
+      type: 'string',
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const initCore: JsonFormsCore = {
     uischema,
     schema,
     data,
-    errors: [] as ErrorObject[]
+    errors: [] as ErrorObject[],
   };
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema));
@@ -565,23 +599,23 @@ test('mapDispatchToArrayControlProps should adding items to array', t => {
   t.is(getCore().data.length, 2);
 });
 
-test('mapDispatchToArrayControlProps should remove items from array', t => {
+test('mapDispatchToArrayControlProps should remove items from array', (t) => {
   const data = ['foo', 'bar', 'quux'];
   const schema: JsonSchema = {
     type: 'array',
     items: {
-      type: 'string'
-    }
+      type: 'string',
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const initCore: JsonFormsCore = {
     uischema,
     schema,
     data,
-    errors: [] as ErrorObject[]
+    errors: [] as ErrorObject[],
   };
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema));
@@ -591,15 +625,15 @@ test('mapDispatchToArrayControlProps should remove items from array', t => {
   t.is(getCore().data[0], 'quux');
 });
 
-test('mapStateToLayoutProps - visible via state with path from ownProps ', t => {
+test('mapStateToLayoutProps - visible via state with path from ownProps ', (t) => {
   const uischema = {
     type: 'VerticalLayout',
     elements: [coreUISchema],
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
     uischema,
-    path: 'foo'
+    path: 'foo',
   };
   const state = {
     jsonforms: {
@@ -608,22 +642,22 @@ test('mapStateToLayoutProps - visible via state with path from ownProps ', t =>
           type: 'object',
           properties: {
             firstName: { type: 'string' },
-            lastName: { type: 'string' }
-          }
+            lastName: { type: 'string' },
+          },
         },
         data: {
-          foo: { firstName: 'Lisa' }
+          foo: { firstName: 'Lisa' },
         },
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
   const props = mapStateToLayoutProps(state, ownProps);
   t.true(props.visible);
 });
 
-test('mapStateToArrayLayoutProps - should include minItems in array layout props', t => {
+test('mapStateToArrayLayoutProps - should include minItems in array layout props', (t) => {
   const schema: JsonSchema = {
     type: 'array',
     minItems: 42,
@@ -632,15 +666,15 @@ test('mapStateToArrayLayoutProps - should include minItems in array layout props
       properties: {
         message: {
           type: 'string',
-          default: 'foo'
-        }
-      }
-    }
+          default: 'foo',
+        },
+      },
+    },
   };
 
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
 
   const state = {
@@ -649,23 +683,23 @@ test('mapStateToArrayLayoutProps - should include minItems in array layout props
         schema,
         data: {},
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
 
   const ownProps = {
-    uischema
+    uischema,
   };
 
   const props = mapStateToArrayLayoutProps(state, ownProps);
   t.is(props.minItems, 42);
 });
 
-test('mapStateToLayoutProps should return renderers prop via ownProps', t => {
+test('mapStateToLayoutProps should return renderers prop via ownProps', (t) => {
   const uischema = {
     type: 'VerticalLayout',
-    elements: [] as UISchemaElement[]
+    elements: [] as UISchemaElement[],
   };
   const state = {
     jsonforms: {
@@ -674,16 +708,16 @@ test('mapStateToLayoutProps should return renderers prop via ownProps', t => {
           type: 'object',
           properties: {
             firstName: { type: 'string' },
-            lastName: { type: 'string' }
-          }
+            lastName: { type: 'string' },
+          },
         },
         data: {
-          foo: { firstName: 'Homer' }
+          foo: { firstName: 'Homer' },
         },
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
   const props = mapStateToLayoutProps(state, {
     uischema,
@@ -691,20 +725,20 @@ test('mapStateToLayoutProps should return renderers prop via ownProps', t => {
     renderers: [
       {
         tester: rankWith(1, () => true),
-        renderer: undefined
-      }
-    ]
+        renderer: undefined,
+      },
+    ],
   });
   t.is(props.renderers.length, 1);
 });
 
-test('mapStateToLayoutProps - disabled via global readonly', t => {
+test('mapStateToLayoutProps - disabled via global readonly', (t) => {
   const uischema = {
     type: 'VerticalLayout',
     elements: [coreUISchema],
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const state: JsonFormsState = createState(uischema);
   state.jsonforms.readonly = true;
@@ -713,14 +747,14 @@ test('mapStateToLayoutProps - disabled via global readonly', t => {
   t.false(props.enabled);
 });
 
-test('mapStateToLayoutProps - disabled via global readonly beats enabled via ownProps', t => {
+test('mapStateToLayoutProps - disabled via global readonly beats enabled via ownProps', (t) => {
   const uischema = {
     type: 'VerticalLayout',
     elements: [coreUISchema],
   };
   const ownProps = {
     uischema,
-    enabled: true
+    enabled: true,
   };
   const state: JsonFormsState = createState(uischema);
   state.jsonforms.readonly = true;
@@ -729,14 +763,14 @@ test('mapStateToLayoutProps - disabled via global readonly beats enabled via own
   t.false(props.enabled);
 });
 
-test('mapStateToLayoutProps - disabled via global readonly beats enabled via rule', t => {
+test('mapStateToLayoutProps - disabled via global readonly beats enabled via rule', (t) => {
   const uischema = {
     type: 'VerticalLayout',
     elements: [coreUISchema],
-    rule: enableRule
+    rule: enableRule,
   };
   const ownProps = {
-    uischema
+    uischema,
   };
   const state: JsonFormsState = createState(uischema);
   state.jsonforms.readonly = true;
@@ -745,15 +779,15 @@ test('mapStateToLayoutProps - disabled via global readonly beats enabled via rul
   t.false(props.enabled);
 });
 
-test('mapStateToLayoutProps - hidden via state with path from ownProps ', t => {
+test('mapStateToLayoutProps - hidden via state with path from ownProps ', (t) => {
   const uischema = {
     type: 'VerticalLayout',
     elements: [coreUISchema],
-    rule: hideRule
+    rule: hideRule,
   };
   const ownProps = {
     uischema,
-    path: 'foo'
+    path: 'foo',
   };
   const state = {
     jsonforms: {
@@ -762,29 +796,29 @@ test('mapStateToLayoutProps - hidden via state with path from ownProps ', t => {
           type: 'object',
           properties: {
             firstName: { type: 'string' },
-            lastName: { type: 'string' }
-          }
+            lastName: { type: 'string' },
+          },
         },
         data: {
-          foo: { firstName: 'Homer' }
+          foo: { firstName: 'Homer' },
         },
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
   const props = mapStateToLayoutProps(state, ownProps);
   t.false(props.visible);
 });
 
-test("mapStateToOneOfProps - indexOfFittingSchema should not select schema if enum doesn't match", t => {
+test("mapStateToOneOfProps - indexOfFittingSchema should not select schema if enum doesn't match", (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/method'
+    scope: '#/properties/method',
   };
 
   const ownProps = {
-    uischema
+    uischema,
   };
 
   const state = {
@@ -804,10 +838,10 @@ test("mapStateToOneOfProps - indexOfFittingSchema should not select schema if en
                       title: 'Method',
                       type: 'string',
                       enum: ['Injection'],
-                      default: 'Injection'
-                    }
+                      default: 'Injection',
+                    },
                   },
-                  required: ['method']
+                  required: ['method'],
                 },
                 {
                   title: 'Infusion',
@@ -817,33 +851,33 @@ test("mapStateToOneOfProps - indexOfFittingSchema should not select schema if en
                       title: 'Method',
                       type: 'string',
                       enum: ['Infusion'],
-                      default: 'Infusion'
-                    }
+                      default: 'Infusion',
+                    },
                   },
-                  required: ['method']
-                }
-              ]
-            }
-          }
+                  required: ['method'],
+                },
+              ],
+            },
+          },
         },
         data: {
           method: {
-            method: 'Infusion'
-          }
+            method: 'Infusion',
+          },
         },
-        uischema
-      }
-    }
+        uischema,
+      },
+    },
   };
 
   const oneOfProps = mapStateToOneOfProps(state, ownProps);
   t.is(oneOfProps.indexOfFittingSchema, 1);
 });
 
-test('mapStateToMultiEnumControlProps - oneOf items', t => {
+test('mapStateToMultiEnumControlProps - oneOf items', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/colors'
+    scope: '#/properties/colors',
   };
   const state = {
     jsonforms: {
@@ -856,39 +890,39 @@ test('mapStateToMultiEnumControlProps - oneOf items', t => {
               items: {
                 oneOf: [
                   {
-                    const: 'red'
+                    const: 'red',
                   },
                   {
                     const: 'pink',
-                    title: 'almost red'
-                  }
-                ]
+                    title: 'almost red',
+                  },
+                ],
               },
-              uniqueItems: true
-            }
-          }
+              uniqueItems: true,
+            },
+          },
         },
         data: {},
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
   const ownProps = {
     uischema,
-    path: 'colors'
+    path: 'colors',
   };
   const props = mapStateToMultiEnumControlProps(state, ownProps);
   t.deepEqual(props.options, [
     { label: 'red', value: 'red' },
-    { label: 'almost red', value: 'pink' }
+    { label: 'almost red', value: 'pink' },
   ]);
 });
 
-test('mapStateToMultiEnumControlProps - enum items', t => {
+test('mapStateToMultiEnumControlProps - enum items', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/colors'
+    scope: '#/properties/colors',
   };
   const state = {
     jsonforms: {
@@ -900,34 +934,34 @@ test('mapStateToMultiEnumControlProps - enum items', t => {
               type: 'array',
               items: {
                 type: 'string',
-                enum: ['red', 'green', 'pink']
+                enum: ['red', 'green', 'pink'],
               },
-              uniqueItems: true
-            }
-          }
+              uniqueItems: true,
+            },
+          },
         },
         data: {},
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
   const ownProps = {
     uischema,
-    path: 'colors'
+    path: 'colors',
   };
   const props = mapStateToMultiEnumControlProps(state, ownProps);
   t.deepEqual(props.options, [
     { label: 'red', value: 'red' },
     { label: 'green', value: 'green' },
-    { label: 'pink', value: 'pink' }
+    { label: 'pink', value: 'pink' },
   ]);
 });
 
-test('mapDispatchToMultiEnumProps - enum schema - addItem', t => {
+test('mapDispatchToMultiEnumProps - enum schema - addItem', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/colors'
+    scope: '#/properties/colors',
   };
   const schema = {
     type: 'object',
@@ -936,18 +970,18 @@ test('mapDispatchToMultiEnumProps - enum schema - addItem', t => {
         type: 'array',
         items: {
           type: 'string',
-          enum: ['red', 'green', 'pink']
+          enum: ['red', 'green', 'pink'],
         },
-        uniqueItems: true
-      }
-    }
+        uniqueItems: true,
+      },
+    },
   };
-  const data = {colors:['green']};
-  const initCore : JsonFormsCore = {
+  const data = { colors: ['green'] };
+  const initCore: JsonFormsCore = {
     uischema,
     schema,
     data,
-    errors: [] as ErrorObject[]
+    errors: [] as ErrorObject[],
   };
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema, createAjv({ useDefaults: true })));
@@ -959,10 +993,10 @@ test('mapDispatchToMultiEnumProps - enum schema - addItem', t => {
   t.deepEqual(getCore().data.colors[1], 'pink');
 });
 
-test('mapDispatchToMultiEnumProps - enum schema - removeItem', t => {
+test('mapDispatchToMultiEnumProps - enum schema - removeItem', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/colors'
+    scope: '#/properties/colors',
   };
   const schema = {
     type: 'object',
@@ -971,18 +1005,18 @@ test('mapDispatchToMultiEnumProps - enum schema - removeItem', t => {
         type: 'array',
         items: {
           type: 'string',
-          enum: ['red', 'green', 'pink']
+          enum: ['red', 'green', 'pink'],
         },
-        uniqueItems: true
-      }
-    }
+        uniqueItems: true,
+      },
+    },
   };
-  const data = {colors:['green', 'red']};
-  const initCore : JsonFormsCore = {
+  const data = { colors: ['green', 'red'] };
+  const initCore: JsonFormsCore = {
     uischema,
     schema,
     data,
-    errors: [] as ErrorObject[]
+    errors: [] as ErrorObject[],
   };
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema, createAjv({ useDefaults: true })));
@@ -993,10 +1027,10 @@ test('mapDispatchToMultiEnumProps - enum schema - removeItem', t => {
   t.deepEqual(getCore().data.colors[0], 'green');
 });
 
-test('mapDispatchToMultiEnumProps - oneOf schema - addItem', t => {
+test('mapDispatchToMultiEnumProps - oneOf schema - addItem', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/colors'
+    scope: '#/properties/colors',
   };
   const schema = {
     type: 'object',
@@ -1006,24 +1040,24 @@ test('mapDispatchToMultiEnumProps - oneOf schema - addItem', t => {
         items: {
           oneOf: [
             {
-              const: 'red'
+              const: 'red',
             },
             {
               const: 'pink',
-              title: 'almost red'
-            }
-          ]
+              title: 'almost red',
+            },
+          ],
         },
-        uniqueItems: true
-      }
-    }
+        uniqueItems: true,
+      },
+    },
   };
   const data = {};
-  const initCore : JsonFormsCore = {
+  const initCore: JsonFormsCore = {
     uischema,
     schema,
     data,
-    errors: [] as ErrorObject[]
+    errors: [] as ErrorObject[],
   };
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema, createAjv({ useDefaults: true })));
@@ -1034,10 +1068,10 @@ test('mapDispatchToMultiEnumProps - oneOf schema - addItem', t => {
   t.deepEqual(getCore().data.colors[0], 'pink');
 });
 
-test('mapDispatchToMultiEnumProps - oneOf schema - removeItem', t => {
+test('mapDispatchToMultiEnumProps - oneOf schema - removeItem', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#/properties/colors'
+    scope: '#/properties/colors',
   };
   const schema = {
     type: 'object',
@@ -1047,24 +1081,24 @@ test('mapDispatchToMultiEnumProps - oneOf schema - removeItem', t => {
         items: {
           oneOf: [
             {
-              const: 'red'
+              const: 'red',
             },
             {
               const: 'pink',
-              title: 'almost red'
-            }
-          ]
+              title: 'almost red',
+            },
+          ],
         },
-        uniqueItems: true
-      }
-    }
+        uniqueItems: true,
+      },
+    },
   };
-  const data = {colors:['pink']};
-  const initCore : JsonFormsCore = {
+  const data = { colors: ['pink'] };
+  const initCore: JsonFormsCore = {
     uischema,
     schema,
     data,
-    errors: [] as ErrorObject[]
+    errors: [] as ErrorObject[],
   };
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema, createAjv({ useDefaults: true })));
@@ -1074,26 +1108,26 @@ test('mapDispatchToMultiEnumProps - oneOf schema - removeItem', t => {
   t.is(getCore().data.colors.length, 0);
 });
 
-test('should assign defaults to enum', t => {
+test('should assign defaults to enum', (t) => {
   const schema: JsonSchema = {
     type: 'object',
     properties: {
       name: {
         type: 'string',
-        minLength: 1
+        minLength: 1,
       },
       color: {
         type: 'string',
         enum: ['red', 'green', 'blue'],
-        default: 'green'
-      }
-    }
+        default: 'green',
+      },
+    },
   };
 
   const uischema: UISchemaElement = undefined;
 
   const data = {
-    name: 'foo'
+    name: 'foo',
   };
 
   const initState: JsonFormsState = {
@@ -1102,15 +1136,18 @@ test('should assign defaults to enum', t => {
         uischema,
         schema,
         data,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
-  const newCore = coreReducer(initState.jsonforms.core, init(data, schema, uischema, createAjv({ useDefaults: true })));
+  const newCore = coreReducer(
+    initState.jsonforms.core,
+    init(data, schema, uischema, createAjv({ useDefaults: true }))
+  );
   t.is(newCore.data.color, 'green');
 });
 
-test('should assign defaults to empty item within nested object of an array', t => {
+test('should assign defaults to empty item within nested object of an array', (t) => {
   const schema: JsonSchema = {
     type: 'array',
     items: {
@@ -1118,15 +1155,15 @@ test('should assign defaults to empty item within nested object of an array', t
       properties: {
         message: {
           type: 'string',
-          default: 'foo'
-        }
-      }
-    }
+          default: 'foo',
+        },
+      },
+    },
   };
 
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
 
   const data = [{}];
@@ -1137,17 +1174,20 @@ test('should assign defaults to empty item within nested object of an array', t
         uischema,
         schema,
         data,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
 
-  const newCore = coreReducer(initState.jsonforms.core, init(data, schema, uischema, createAjv({ useDefaults: true })));
+  const newCore = coreReducer(
+    initState.jsonforms.core,
+    init(data, schema, uischema, createAjv({ useDefaults: true }))
+  );
   t.is(newCore.data.length, 1);
   t.deepEqual(newCore.data[0], { message: 'foo' });
 });
 
-test('should assign defaults to newly added item within nested object of an array', t => {
+test('should assign defaults to newly added item within nested object of an array', (t) => {
   const schema: JsonSchema = {
     type: 'array',
     items: {
@@ -1155,15 +1195,15 @@ test('should assign defaults to newly added item within nested object of an arra
       properties: {
         message: {
           type: 'string',
-          default: 'foo'
-        }
-      }
-    }
+          default: 'foo',
+        },
+      },
+    },
   };
 
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
 
   const data = [{}];
@@ -1172,7 +1212,7 @@ test('should assign defaults to newly added item within nested object of an arra
     uischema,
     schema,
     data,
-    errors: [] as ErrorObject[]
+    errors: [] as ErrorObject[],
   };
   const [getCore, dispatch] = mockDispatch(initCore);
   dispatch(init(data, schema, uischema, createAjv({ useDefaults: true })));
@@ -1183,63 +1223,63 @@ test('should assign defaults to newly added item within nested object of an arra
   t.deepEqual(getCore().data[0], { message: 'foo' });
 });
 
-test('computeLabel - should not edit label if not required and hideRequiredAsterisk is false', t => {
+test('computeLabel - should not edit label if not required and hideRequiredAsterisk is false', (t) => {
   const computedLabel = computeLabel('Test Label', false, false);
   t.is(computedLabel, 'Test Label');
 });
 
-test('computeLabel - should not edit label if not required and hideRequiredAsterisk is true', t => {
+test('computeLabel - should not edit label if not required and hideRequiredAsterisk is true', (t) => {
   const computedLabel = computeLabel('Test Label', false, true);
   t.is(computedLabel, 'Test Label');
 });
 
-test('computeLabel - should not edit label if required but hideRequiredAsterisk is true', t => {
+test('computeLabel - should not edit label if required but hideRequiredAsterisk is true', (t) => {
   const computedLabel = computeLabel('Test Label', true, true);
   t.is(computedLabel, 'Test Label');
 });
 
-test('computeLabel - should add asterisk if required but hideRequiredAsterisk is false', t => {
+test('computeLabel - should add asterisk if required but hideRequiredAsterisk is false', (t) => {
   const computedLabel = computeLabel('Test Label', true, false);
   t.is(computedLabel, 'Test Label*');
 });
 
-test('mapStateToAnyOfProps - const constraint in anyOf schema should return correct indexOfFittingSchema', t => {
+test('mapStateToAnyOfProps - const constraint in anyOf schema should return correct indexOfFittingSchema', (t) => {
   const uischema: ControlElement = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
   const schema: JsonSchema7 = {
     anyOf: [
       {
-        type: "object",
+        type: 'object',
         properties: {
           type: {
-            const: "type1"
-          }
-        }
+            const: 'type1',
+          },
+        },
       },
       {
-        type: "object",
+        type: 'object',
         properties: {
           type: {
-            const: "type2"
-          }
-        }
+            const: 'type2',
+          },
+        },
       },
       {
-        type: "object",
+        type: 'object',
         properties: {
           type: {
-            const: "type3"
-          }
-        }
-      }
-    ]
+            const: 'type3',
+          },
+        },
+      },
+    ],
   };
   const ownProps: OwnPropsOfControl = {
     visible: true,
     uischema,
-    path: 'foo'
+    path: 'foo',
   };
   const state = {
     jsonforms: {
@@ -1247,20 +1287,20 @@ test('mapStateToAnyOfProps - const constraint in anyOf schema should return corr
         ajv: createAjv(),
         schema,
         data: {
-          foo: { type: "type3"}
+          foo: { type: 'type3' },
         },
         uischema,
-        errors: [] as ErrorObject[]
-      }
-    }
+        errors: [] as ErrorObject[],
+      },
+    },
   };
   const props = mapStateToAnyOfProps(state, ownProps);
   t.is(props.indexOfFittingSchema, 2);
 });
 
-test('mapStateToControlProps - i18n - mapStateToControlProps should not crash without i18n', t => {
+test('mapStateToControlProps - i18n - mapStateToControlProps should not crash without i18n', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.i18n = undefined;
@@ -1269,9 +1309,9 @@ test('mapStateToControlProps - i18n - mapStateToControlProps should not crash wi
   t.is(props.label, 'First Name');
 });
 
-test('mapStateToControlProps - i18n - default translation has no effect', t => {
+test('mapStateToControlProps - i18n - default translation has no effect', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
@@ -1281,88 +1321,111 @@ test('mapStateToControlProps - i18n - default translation has no effect', t => {
   t.is(props.description, undefined);
 });
 
-test('mapStateToControlProps - i18n - translation via path key', t => {
+test('mapStateToControlProps - i18n - translation via path key', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'firstName.label': return 'my translation';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'firstName.label':
+        return 'my translation';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.label, 'my translation');
   t.is(props.description, undefined);
 });
 
-test('mapStateToControlProps - i18n - translation via default message', t => {
+test('mapStateToControlProps - i18n - translation via default message', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (_key: string, defaultMessage: string | undefined) => {
-    switch(defaultMessage){
-      case 'First Name': return 'my translation';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    _key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (defaultMessage) {
+      case 'First Name':
+        return 'my translation';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.label, 'my translation');
   t.is(props.description, undefined);
 });
 
-test('mapStateToControlProps - i18n - translation via JSON Schema i18n key', t => {
+test('mapStateToControlProps - i18n - translation via JSON Schema i18n key', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n = 'my-key';
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'my-key.label': return 'my label';
-      case 'my-key.description': return 'my description';
-      default: return defaultMessage;
+  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n =
+    'my-key';
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'my-key.label':
+        return 'my label';
+      case 'my-key.description':
+        return 'my description';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.label, 'my label');
   t.is(props.description, 'my description');
 });
 
-test('mapStateToControlProps - i18n - translation via UI Schema i18n key', t => {
+test('mapStateToControlProps - i18n - translation via UI Schema i18n key', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  ownProps.uischema = {...ownProps.uischema, i18n: 'my-key'};
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'my-key.label': return 'my label';
-      case 'my-key.description': return 'my description';
-      default: return defaultMessage;
+  ownProps.uischema = { ...ownProps.uischema, i18n: 'my-key' };
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'my-key.label':
+        return 'my label';
+      case 'my-key.description':
+        return 'my description';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.label, 'my label');
   t.is(props.description, 'my description');
 });
 
-test('mapStateToControlProps - i18n errors - should not crash without i18n', t => {
+test('mapStateToControlProps - i18n errors - should not crash without i18n', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.pattern = "[0-9]+"
+  state.jsonforms.core.schema.properties.firstName.pattern = '[0-9]+';
   state.jsonforms.core = coreReducer(
     state.jsonforms.core,
     init(
@@ -1378,12 +1441,12 @@ test('mapStateToControlProps - i18n errors - should not crash without i18n', t =
   t.is(props.errors, 'must match pattern "[0-9]+"');
 });
 
-test('mapStateToControlProps - i18n errors - default translation has no effect', t => {
+test('mapStateToControlProps - i18n errors - default translation has no effect', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.pattern = "[0-9]+"
+  state.jsonforms.core.schema.properties.firstName.pattern = '[0-9]+';
   state.jsonforms.core = coreReducer(
     state.jsonforms.core,
     init(
@@ -1399,12 +1462,12 @@ test('mapStateToControlProps - i18n errors - default translation has no effect',
   t.is(props.errors, 'must match pattern "[0-9]+"');
 });
 
-test('mapStateToControlProps - i18n errors - translate via error message key', t => {
+test('mapStateToControlProps - i18n errors - translate via error message key', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.pattern = "[0-9]+"
+  state.jsonforms.core.schema.properties.firstName.pattern = '[0-9]+';
   state.jsonforms.core = coreReducer(
     state.jsonforms.core,
     init(
@@ -1415,24 +1478,30 @@ test('mapStateToControlProps - i18n errors - translate via error message key', t
     )
   );
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'must match pattern "[0-9]+"': return 'my error message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'must match pattern "[0-9]+"':
+        return 'my error message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.errors, 'my error message');
 });
 
-test('mapStateToControlProps - i18n errors - translate via i18 specialized error keyword key', t => {
+test('mapStateToControlProps - i18n errors - translate via i18 specialized error keyword key', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.pattern = "[0-9]+";
-  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n = 'my-key';
+  state.jsonforms.core.schema.properties.firstName.pattern = '[0-9]+';
+  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n =
+    'my-key';
   state.jsonforms.core = coreReducer(
     state.jsonforms.core,
     init(
@@ -1443,24 +1512,30 @@ test('mapStateToControlProps - i18n errors - translate via i18 specialized error
     )
   );
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'my-key.error.pattern': return 'my error message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'my-key.error.pattern':
+        return 'my error message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.errors, 'my error message');
 });
 
-test('mapStateToControlProps - i18n errors - translate via i18 general error keyword key', t => {
+test('mapStateToControlProps - i18n errors - translate via i18 general error keyword key', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.pattern = "[0-9]+";
-  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n = 'my-key';
+  state.jsonforms.core.schema.properties.firstName.pattern = '[0-9]+';
+  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n =
+    'my-key';
   state.jsonforms.core = coreReducer(
     state.jsonforms.core,
     init(
@@ -1471,24 +1546,30 @@ test('mapStateToControlProps - i18n errors - translate via i18 general error key
     )
   );
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'error.pattern': return 'my error message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'error.pattern':
+        return 'my error message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.errors, 'my error message');
 });
 
-test('mapStateToControlProps - i18n errors - specialized keyword wins over generic keyword', t => {
+test('mapStateToControlProps - i18n errors - specialized keyword wins over generic keyword', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.pattern = "[0-9]+";
-  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n = 'my-key';
+  state.jsonforms.core.schema.properties.firstName.pattern = '[0-9]+';
+  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n =
+    'my-key';
   state.jsonforms.core = coreReducer(
     state.jsonforms.core,
     init(
@@ -1499,26 +1580,33 @@ test('mapStateToControlProps - i18n errors - specialized keyword wins over gener
     )
   );
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'my-key.error.pattern': return 'my key error message';
-      case 'error.pattern': return 'my error message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'my-key.error.pattern':
+        return 'my key error message';
+      case 'error.pattern':
+        return 'my error message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.errors, 'my key error message');
 });
 
-test('mapStateToControlProps - i18n errors - multiple errors customization', t => {
+test('mapStateToControlProps - i18n errors - multiple errors customization', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.pattern = "[0-9]+";
+  state.jsonforms.core.schema.properties.firstName.pattern = '[0-9]+';
   state.jsonforms.core.schema.properties.firstName.maxLength = 2;
-  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n = 'my-key';
+  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n =
+    'my-key';
   state.jsonforms.core = coreReducer(
     state.jsonforms.core,
     init(
@@ -1529,26 +1617,33 @@ test('mapStateToControlProps - i18n errors - multiple errors customization', t =
     )
   );
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'error.maxLength': return 'max length message';
-      case 'my-key.error.pattern': return 'my key error message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'error.maxLength':
+        return 'max length message';
+      case 'my-key.error.pattern':
+        return 'my key error message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.errors, 'max length message\nmy key error message');
 });
 
-test('mapStateToControlProps - i18n errors - custom keyword wins over all other errors', t => {
+test('mapStateToControlProps - i18n errors - custom keyword wins over all other errors', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.pattern = "[0-9]+";
+  state.jsonforms.core.schema.properties.firstName.pattern = '[0-9]+';
   state.jsonforms.core.schema.properties.firstName.maxLength = 2;
-  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n = 'my-key';
+  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n =
+    'my-key';
   state.jsonforms.core = coreReducer(
     state.jsonforms.core,
     init(
@@ -1559,22 +1654,29 @@ test('mapStateToControlProps - i18n errors - custom keyword wins over all other
     )
   );
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'my-key.error.custom': return 'this is my error custom error message';
-      case 'my-key.error.pattern': return 'my key error message';
-      case 'error.pattern': return 'my error message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'my-key.error.custom':
+        return 'this is my error custom error message';
+      case 'my-key.error.pattern':
+        return 'my key error message';
+      case 'error.pattern':
+        return 'my error message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToControlProps(state, ownProps);
   t.is(props.errors, 'this is my error custom error message');
 });
 
-test('mapStateToEnumControlProps - i18n - should not crash without i18n', t => {
+test('mapStateToEnumControlProps - i18n - should not crash without i18n', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.core.schema.properties.firstName.enum = ['a', 'b'];
@@ -1584,9 +1686,9 @@ test('mapStateToEnumControlProps - i18n - should not crash without i18n', t => {
   t.is(props.options[0].label, 'a');
 });
 
-test('mapStateToEnumControlProps - i18n - default translation has no effect', t => {
+test('mapStateToEnumControlProps - i18n - default translation has no effect', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.core.schema.properties.firstName.enum = ['a', 'b'];
@@ -1596,149 +1698,193 @@ test('mapStateToEnumControlProps - i18n - default translation has no effect', t
   t.is(props.options[0].label, 'a');
 });
 
-test('mapStateToEnumControlProps - i18n - path label translation', t => {
+test('mapStateToEnumControlProps - i18n - path label translation', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.core.schema.properties.firstName.enum = ['a', 'b'];
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'firstName.a': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'firstName.a':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToEnumControlProps(state, ownProps);
   t.is(props.options[0].label, 'my message');
 });
 
-test('mapStateToEnumControlProps - i18n - defaultMessage translation', t => {
+test('mapStateToEnumControlProps - i18n - defaultMessage translation', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.core.schema.properties.firstName.enum = ['a', 'b'];
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (_key: string, defaultMessage: string | undefined) => {
-    switch(defaultMessage){
-      case 'a': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    _key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (defaultMessage) {
+      case 'a':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToEnumControlProps(state, ownProps);
   t.is(props.options[0].label, 'my message');
 });
 
-test('mapStateToEnumControlProps - i18n - i18n key translation', t => {
+test('mapStateToEnumControlProps - i18n - i18n key translation', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
   state.jsonforms.core.schema.properties.firstName.enum = ['a', 'b'];
-  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n = 'my-key';
+  (state.jsonforms.core.schema.properties.firstName as i18nJsonSchema).i18n =
+    'my-key';
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'my-key.a': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'my-key.a':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToEnumControlProps(state, ownProps);
   t.is(props.options[0].label, 'my message');
 });
 
-test('mapStateToOneOfEnumControlProps - i18n - should not crash without i18n', t => {
+test('mapStateToOneOfEnumControlProps - i18n - should not crash without i18n', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.oneOf = [{const: 'a', title: 'foo'}, {const: 'b', title: 'bar'}]
+  state.jsonforms.core.schema.properties.firstName.oneOf = [
+    { const: 'a', title: 'foo' },
+    { const: 'b', title: 'bar' },
+  ];
   state.jsonforms.i18n = undefined;
 
   const props = mapStateToOneOfEnumControlProps(state, ownProps);
   t.is(props.options[0].label, 'foo');
 });
 
-test('mapStateToOneOfEnumControlProps- i18n - default translation has no effect', t => {
+test('mapStateToOneOfEnumControlProps- i18n - default translation has no effect', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.oneOf = [{const: 'a', title: 'foo'}, {const: 'b', title: 'bar'}]
+  state.jsonforms.core.schema.properties.firstName.oneOf = [
+    { const: 'a', title: 'foo' },
+    { const: 'b', title: 'bar' },
+  ];
   state.jsonforms.i18n = defaultJsonFormsI18nState;
 
   const props = mapStateToOneOfEnumControlProps(state, ownProps);
   t.is(props.options[0].label, 'foo');
 });
 
-test('mapStateToOneOfEnumControlProps - i18n - path label translation', t => {
+test('mapStateToOneOfEnumControlProps - i18n - path label translation', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.oneOf = [{const: 'a', title: 'foo'}, {const: 'b', title: 'bar'}]
+  state.jsonforms.core.schema.properties.firstName.oneOf = [
+    { const: 'a', title: 'foo' },
+    { const: 'b', title: 'bar' },
+  ];
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'firstName.foo': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'firstName.foo':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToOneOfEnumControlProps(state, ownProps);
   t.is(props.options[0].label, 'my message');
 });
 
-test('mapStateToOneOfEnumControlProps - i18n - default message translation', t => {
+test('mapStateToOneOfEnumControlProps - i18n - default message translation', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  state.jsonforms.core.schema.properties.firstName.oneOf = [{const: 'a', title: 'foo'}, {const: 'b', title: 'bar'}]
+  state.jsonforms.core.schema.properties.firstName.oneOf = [
+    { const: 'a', title: 'foo' },
+    { const: 'b', title: 'bar' },
+  ];
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (_key: string, defaultMessage: string | undefined) => {
-    switch(defaultMessage){
-      case 'foo': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    _key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (defaultMessage) {
+      case 'foo':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToOneOfEnumControlProps(state, ownProps);
   t.is(props.options[0].label, 'my message');
 });
 
-test('mapStateToOneOfEnumControlProps - i18n - i18n key translation', t => {
+test('mapStateToOneOfEnumControlProps - i18n - i18n key translation', (t) => {
   const ownProps = {
-    uischema: coreUISchema
+    uischema: coreUISchema,
   };
   const state: JsonFormsState = createState(coreUISchema);
-  (state.jsonforms.core.schema.properties.firstName.oneOf as any) =
-    [{const: 'a', title: 'foo', i18n: 'my-foo'}, {const: 'b', title: 'bar', i18n:'my-bar'}];
+  (state.jsonforms.core.schema.properties.firstName.oneOf as any) = [
+    { const: 'a', title: 'foo', i18n: 'my-foo' },
+    { const: 'b', title: 'bar', i18n: 'my-bar' },
+  ];
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'my-foo': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'my-foo':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToOneOfEnumControlProps(state, ownProps);
   t.is(props.options[0].label, 'my message');
 });
 
-
-test('mapStateToLabelProps - i18n - should not crash without i18n', t => {
-  const labelUISchema : LabelElement = {
+test('mapStateToLabelProps - i18n - should not crash without i18n', (t) => {
+  const labelUISchema: LabelElement = {
     type: 'Label',
     text: 'foo',
-    i18n: 'bar'
-  }
+    i18n: 'bar',
+  };
   const ownProps = {
-    uischema: labelUISchema
+    uischema: labelUISchema,
   };
   const state: JsonFormsState = createState(labelUISchema);
   state.jsonforms.i18n = undefined;
@@ -1747,14 +1893,14 @@ test('mapStateToLabelProps - i18n - should not crash without i18n', t => {
   t.is(props.text, 'foo');
 });
 
-test('mapStateToLabelProps - i18n - default translation has no effect', t => {
-  const labelUISchema : LabelElement = {
+test('mapStateToLabelProps - i18n - default translation has no effect', (t) => {
+  const labelUISchema: LabelElement = {
     type: 'Label',
     text: 'foo',
-    i18n: 'bar'
-  }
+    i18n: 'bar',
+  };
   const ownProps = {
-    uischema: labelUISchema
+    uischema: labelUISchema,
   };
   const state: JsonFormsState = createState(labelUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
@@ -1763,67 +1909,81 @@ test('mapStateToLabelProps - i18n - default translation has no effect', t => {
   t.is(props.text, 'foo');
 });
 
-test('mapStateToLabelProps - i18n - default key translation', t => {
-  const labelUISchema : LabelElement = {
+test('mapStateToLabelProps - i18n - default key translation', (t) => {
+  const labelUISchema: LabelElement = {
     type: 'Label',
-    text: 'foo'
-  }
+    text: 'foo',
+  };
   const ownProps = {
-    uischema: labelUISchema
+    uischema: labelUISchema,
   };
   const state: JsonFormsState = createState(labelUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined) => {
-    switch(key){
-      case 'foo': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (key) {
+      case 'foo':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToLabelProps(state, ownProps);
   t.is(props.text, 'my message');
 });
 
-
-test('mapStateToLabelProps - i18n - default message translation', t => {
-  const labelUISchema : LabelElement = {
+test('mapStateToLabelProps - i18n - default message translation', (t) => {
+  const labelUISchema: LabelElement = {
     type: 'Label',
     text: 'foo',
-    i18n: 'bar'
-  }
+    i18n: 'bar',
+  };
   const ownProps = {
-    uischema: labelUISchema
+    uischema: labelUISchema,
   };
   const state: JsonFormsState = createState(labelUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (_key: string, defaultMessage: string | undefined) => {
-    switch(defaultMessage){
-      case 'foo': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    _key: string,
+    defaultMessage: string | undefined
+  ) => {
+    switch (defaultMessage) {
+      case 'foo':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToLabelProps(state, ownProps);
   t.is(props.text, 'my message');
 });
 
-test('mapStateToLabelProps - i18n - i18n key translation', t => {
-  const labelUISchema : LabelElement = {
+test('mapStateToLabelProps - i18n - i18n key translation', (t) => {
+  const labelUISchema: LabelElement = {
     type: 'Label',
     text: 'foo',
-    i18n: 'bar'
-  }
+    i18n: 'bar',
+  };
   const ownProps = {
-    uischema: labelUISchema
+    uischema: labelUISchema,
   };
   const state: JsonFormsState = createState(labelUISchema);
   state.jsonforms.i18n = defaultJsonFormsI18nState;
-  state.jsonforms.i18n.translate = (key: string, defaultMessage: string | undefined): string | undefined => {
-    switch(key){
-      case 'bar.text': return 'my message';
-      default: return defaultMessage;
+  state.jsonforms.i18n.translate = (
+    key: string,
+    defaultMessage: string | undefined
+  ): string | undefined => {
+    switch (key) {
+      case 'bar.text':
+        return 'my message';
+      default:
+        return defaultMessage;
     }
-  }
+  };
 
   const props = mapStateToLabelProps(state, ownProps);
   t.is(props.text, 'my message');
diff --git a/packages/core/test/util/resolvers.test.ts b/packages/core/test/util/resolvers.test.ts
index 7f9dc2f9f..5330338dd 100644
--- a/packages/core/test/util/resolvers.test.ts
+++ b/packages/core/test/util/resolvers.test.ts
@@ -25,16 +25,16 @@
 import { resolveData, resolveSchema } from '../../src/util/resolvers';
 import test from 'ava';
 
-test('resolveSchema - resolves schema with any ', t => {
+test('resolveSchema - resolves schema with any ', (t) => {
   const schema = {
     $defs: {
       Base: {
         type: 'object',
         properties: {
           width: {
-            type: 'integer'
-          }
-        }
+            type: 'integer',
+          },
+        },
       },
       Child: {
         type: 'object',
@@ -43,68 +43,72 @@ test('resolveSchema - resolves schema with any ', t => {
           {
             properties: {
               geometry: {
-                type: 'string'
-              }
-            }
-          }
-        ]
-      }
+                type: 'string',
+              },
+            },
+          },
+        ],
+      },
     },
     type: 'object',
     properties: {
       description: {
-        oneOf: [{
-          type: 'object',
-          properties: {
-            name: {
-              type: 'string'
-            }
-          }
-        }, {
-          type: 'object',
-          properties: {
-            index: {
-              type: 'number'
-            }
-          }
-        }, {
-          type: 'object',
-          properties: {
-            exist: {
-              type: 'boolean'
-            }
-          }
-        },
-        {
-          type: 'object',
-          properties: {
-            element: {
-              $ref: '#/$defs/Child'
-            }
-          }
-        }]
-      }
+        oneOf: [
+          {
+            type: 'object',
+            properties: {
+              name: {
+                type: 'string',
+              },
+            },
+          },
+          {
+            type: 'object',
+            properties: {
+              index: {
+                type: 'number',
+              },
+            },
+          },
+          {
+            type: 'object',
+            properties: {
+              exist: {
+                type: 'boolean',
+              },
+            },
+          },
+          {
+            type: 'object',
+            properties: {
+              element: {
+                $ref: '#/$defs/Child',
+              },
+            },
+          },
+        ],
+      },
     },
     anyOf: [
       {
         if: {
           properties: {
             exist: {
-              const: true
-            }
-          }
+              const: true,
+            },
+          },
         },
         then: {
           properties: {
             lastname: {
-              type: 'string'
-            }
-          }
+              type: 'string',
+            },
+          },
         },
         else: {
           properties: {
             firstname: {
-              type: 'string'
+              type: 'string',
             },
             address: {
               type: 'object',
@@ -112,54 +116,118 @@ test('resolveSchema - resolves schema with any ', t => {
                 {
                   properties: {
                     street: {
-                      type: 'string'
-                    }
-                  }
-                }
-              ]
-            }
-          }
-        }
-      }
-    ]
+                      type: 'string',
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    ],
   };
   // test backward compatibility
-  t.deepEqual(resolveSchema(schema, '#/properties/description/oneOf/0/properties/name', schema), {type: 'string'});
-  t.deepEqual(resolveSchema(schema, '#/properties/description/oneOf/1/properties/index', schema), {type: 'number'});
-  t.deepEqual(resolveSchema(schema, '#/anyOf/0/then/properties/lastname', schema), {type: 'string'});
-  t.deepEqual(resolveSchema(schema, '#/anyOf/0/else/properties/firstname', schema), {type: 'string'});
-  t.deepEqual(resolveSchema(schema, '#/anyOf/0/else/properties/address/anyOf/0/properties/street', schema), {type: 'string'});
+  t.deepEqual(
+    resolveSchema(
+      schema,
+      '#/properties/description/oneOf/0/properties/name',
+      schema
+    ),
+    { type: 'string' }
+  );
+  t.deepEqual(
+    resolveSchema(
+      schema,
+      '#/properties/description/oneOf/1/properties/index',
+      schema
+    ),
+    { type: 'number' }
+  );
+  t.deepEqual(
+    resolveSchema(schema, '#/anyOf/0/then/properties/lastname', schema),
+    { type: 'string' }
+  );
+  t.deepEqual(
+    resolveSchema(schema, '#/anyOf/0/else/properties/firstname', schema),
+    { type: 'string' }
+  );
+  t.deepEqual(
+    resolveSchema(
+      schema,
+      '#/anyOf/0/else/properties/address/anyOf/0/properties/street',
+      schema
+    ),
+    { type: 'string' }
+  );
   // new simple approach
-  t.deepEqual(resolveSchema(schema, '#/properties/description/properties/name', schema), {type: 'string'});
-  t.deepEqual(resolveSchema(schema, '#/properties/description/properties/index', schema), {type: 'number'});
-  t.deepEqual(resolveSchema(schema, '#/properties/description/properties/exist', schema), {type: 'boolean'});
-  t.deepEqual(resolveSchema(schema, '#/properties/lastname', schema), {type: 'string'});
-  t.deepEqual(resolveSchema(schema, '#/properties/firstname', schema), {type: 'string'});
-  t.deepEqual(resolveSchema(schema, '#/properties/address/properties/street', schema), {type: 'string'});
-  t.is(resolveSchema(schema, '#/properties/description/properties/notfound', schema), undefined);
+  t.deepEqual(
+    resolveSchema(schema, '#/properties/description/properties/name', schema),
+    { type: 'string' }
+  );
+  t.deepEqual(
+    resolveSchema(schema, '#/properties/description/properties/index', schema),
+    { type: 'number' }
+  );
+  t.deepEqual(
+    resolveSchema(schema, '#/properties/description/properties/exist', schema),
+    { type: 'boolean' }
+  );
+  t.deepEqual(resolveSchema(schema, '#/properties/lastname', schema), {
+    type: 'string',
+  });
+  t.deepEqual(resolveSchema(schema, '#/properties/firstname', schema), {
+    type: 'string',
+  });
+  t.deepEqual(
+    resolveSchema(schema, '#/properties/address/properties/street', schema),
+    { type: 'string' }
+  );
+  t.is(
+    resolveSchema(
+      schema,
+      '#/properties/description/properties/notfound',
+      schema
+    ),
+    undefined
+  );
   // refs
-  t.deepEqual(resolveSchema(schema, '#/properties/description/properties/element/properties/geometry', schema), {type: 'string'});
-  t.deepEqual(resolveSchema(schema, '#/properties/description/properties/element/properties/width', schema), {type: 'integer'});
-
+  t.deepEqual(
+    resolveSchema(
+      schema,
+      '#/properties/description/properties/element/properties/geometry',
+      schema
+    ),
+    { type: 'string' }
+  );
+  t.deepEqual(
+    resolveSchema(
+      schema,
+      '#/properties/description/properties/element/properties/width',
+      schema
+    ),
+    { type: 'integer' }
+  );
 });
 
-test('resolveSchema - resolves schema with encoded characters', t => {
+test('resolveSchema - resolves schema with encoded characters', (t) => {
   const schema = {
     type: 'object',
     properties: {
       'foo / ~ bar': {
-        type: 'integer'
-      }
-    }
+        type: 'integer',
+      },
+    },
   };
-  t.deepEqual(resolveSchema(schema, '#/properties/foo ~1 ~0 bar', schema), {type: 'integer'});
+  t.deepEqual(resolveSchema(schema, '#/properties/foo ~1 ~0 bar', schema), {
+    type: 'integer',
+  });
   t.is(resolveSchema(schema, '#/properties/foo / bar', schema), undefined);
 });
 
-
-test('resolveData - resolves data with % characters', t => {
+test('resolveData - resolves data with % characters', (t) => {
   const data = {
-    'foo%': '123'
+    'foo%': '123',
   };
   t.deepEqual(resolveData(data, 'foo%'), '123');
 });
diff --git a/packages/core/test/util/runtime.test.ts b/packages/core/test/util/runtime.test.ts
index 19367c22f..6b554e646 100644
--- a/packages/core/test/util/runtime.test.ts
+++ b/packages/core/test/util/runtime.test.ts
@@ -32,195 +32,195 @@ import {
   LeafCondition,
   OrCondition,
   RuleEffect,
-  SchemaBasedCondition
+  SchemaBasedCondition,
 } from '../../src';
 import { evalEnablement, evalVisibility } from '../../src/util/runtime';
 
-test('evalVisibility show valid case', t => {
+test('evalVisibility show valid case', (t) => {
   const leafCondition: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.SHOW,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalVisibility show valid case based on AndCondition', t => {
+test('evalVisibility show valid case based on AndCondition', (t) => {
   const leafCondition1: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue1',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const leafCondition2: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue2',
-    expectedValue: 'foo'
+    expectedValue: 'foo',
   };
   const condition: AndCondition = {
     type: 'AND',
-    conditions: [leafCondition1, leafCondition2]
+    conditions: [leafCondition1, leafCondition2],
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.SHOW,
-      condition: condition
-    }
+      condition: condition,
+    },
   };
   const data = {
     value: 'hello',
     ruleValue1: 'bar',
-    ruleValue2: 'foo'
+    ruleValue2: 'foo',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalVisibility show invalid case based on AndCondition', t => {
+test('evalVisibility show invalid case based on AndCondition', (t) => {
   const leafCondition1: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue1',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const leafCondition2: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue2',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const condition: AndCondition = {
     type: 'AND',
-    conditions: [leafCondition1, leafCondition2]
+    conditions: [leafCondition1, leafCondition2],
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.SHOW,
-      condition: condition
-    }
+      condition: condition,
+    },
   };
   const data = {
     value: 'hello',
     ruleValue1: 'bar',
-    ruleValue2: 'foo'
+    ruleValue2: 'foo',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), false);
 });
 
-test('evalVisibility show valid case based on OrCondition', t => {
+test('evalVisibility show valid case based on OrCondition', (t) => {
   const leafCondition1: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue1',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const leafCondition2: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue2',
-    expectedValue: 'foo'
+    expectedValue: 'foo',
   };
   const condition: OrCondition = {
     type: 'OR',
-    conditions: [leafCondition1, leafCondition2]
+    conditions: [leafCondition1, leafCondition2],
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.SHOW,
-      condition: condition
-    }
+      condition: condition,
+    },
   };
   const data = {
     value: 'hello',
     ruleValue1: 'bar1',
-    ruleValue2: 'foo'
+    ruleValue2: 'foo',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalVisibility show invalid case based on OrCondition', t => {
+test('evalVisibility show invalid case based on OrCondition', (t) => {
   const leafCondition1: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue1',
-    expectedValue: 'foo'
+    expectedValue: 'foo',
   };
   const leafCondition2: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue2',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const condition: OrCondition = {
     type: 'OR',
-    conditions: [leafCondition1, leafCondition2]
+    conditions: [leafCondition1, leafCondition2],
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.SHOW,
-      condition: condition
-    }
+      condition: condition,
+    },
   };
   const data = {
     value: 'hello',
     ruleValue1: 'bar',
-    ruleValue2: 'foo'
+    ruleValue2: 'foo',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), false);
 });
 
-test('evalVisibility show valid case based on schema condition', t => {
+test('evalVisibility show valid case based on schema condition', (t) => {
   const condition: SchemaBasedCondition = {
     scope: '#/properties/ruleValue',
     schema: {
-      const: 'bar'
-    }
+      const: 'bar',
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.SHOW,
-      condition
-    }
+      condition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalVisibility show valid case based on schema condition and enum', t => {
+test('evalVisibility show valid case based on schema condition and enum', (t) => {
   const condition: SchemaBasedCondition = {
     scope: '#/properties/ruleValue',
     schema: {
-      enum: ['bar', 'baz']
-    }
+      enum: ['bar', 'baz'],
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.SHOW,
-      condition
-    }
+      condition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), true);
   t.is(
@@ -243,293 +243,293 @@ test('evalVisibility show valid case based on schema condition and enum', t => {
   );
 });
 
-test('evalVisibility show invalid case', t => {
+test('evalVisibility show invalid case', (t) => {
   const leafCondition: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.SHOW,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'foobar'
+    ruleValue: 'foobar',
   };
   t.deepEqual(evalVisibility(uischema, data, undefined, createAjv()), false);
 });
-test('evalVisibility hide valid case', t => {
+test('evalVisibility hide valid case', (t) => {
   const leafCondition: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.HIDE,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), false);
 });
 
-test('evalVisibility hide invalid case', t => {
+test('evalVisibility hide invalid case', (t) => {
   const leafCondition: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.HIDE,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'foobar'
+    ruleValue: 'foobar',
   };
   t.is(evalVisibility(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalEnablement enable valid case', t => {
+test('evalEnablement enable valid case', (t) => {
   const leafCondition: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.ENABLE,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalEnablement show valid case based on AndCondition', t => {
+test('evalEnablement show valid case based on AndCondition', (t) => {
   const leafCondition1: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue1',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const leafCondition2: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue2',
-    expectedValue: 'foo'
+    expectedValue: 'foo',
   };
   const condition: AndCondition = {
     type: 'AND',
-    conditions: [leafCondition1, leafCondition2]
+    conditions: [leafCondition1, leafCondition2],
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.ENABLE,
-      condition: condition
-    }
+      condition: condition,
+    },
   };
   const data = {
     value: 'hello',
     ruleValue1: 'bar',
-    ruleValue2: 'foo'
+    ruleValue2: 'foo',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalEnablement show invalid case based on AndCondition', t => {
+test('evalEnablement show invalid case based on AndCondition', (t) => {
   const leafCondition1: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue1',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const leafCondition2: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue2',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const condition: AndCondition = {
     type: 'AND',
-    conditions: [leafCondition1, leafCondition2]
+    conditions: [leafCondition1, leafCondition2],
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.ENABLE,
-      condition: condition
-    }
+      condition: condition,
+    },
   };
   const data = {
     value: 'hello',
     ruleValue1: 'bar',
-    ruleValue2: 'foo'
+    ruleValue2: 'foo',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), false);
 });
 
-test('evalEnablement show valid case based on OrCondition', t => {
+test('evalEnablement show valid case based on OrCondition', (t) => {
   const leafCondition1: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue1',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const leafCondition2: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue2',
-    expectedValue: 'foo'
+    expectedValue: 'foo',
   };
   const condition: OrCondition = {
     type: 'OR',
-    conditions: [leafCondition1, leafCondition2]
+    conditions: [leafCondition1, leafCondition2],
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.ENABLE,
-      condition: condition
-    }
+      condition: condition,
+    },
   };
   const data = {
     value: 'hello',
     ruleValue1: 'bar1',
-    ruleValue2: 'foo'
+    ruleValue2: 'foo',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalEnablement show invalid case based on OrCondition', t => {
+test('evalEnablement show invalid case based on OrCondition', (t) => {
   const leafCondition1: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue1',
-    expectedValue: 'foo'
+    expectedValue: 'foo',
   };
   const leafCondition2: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue2',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const condition: OrCondition = {
     type: 'OR',
-    conditions: [leafCondition1, leafCondition2]
+    conditions: [leafCondition1, leafCondition2],
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.ENABLE,
-      condition: condition
-    }
+      condition: condition,
+    },
   };
   const data = {
     value: 'hello',
     ruleValue1: 'bar',
-    ruleValue2: 'foo'
+    ruleValue2: 'foo',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), false);
 });
 
-test('evalEnablement enable invalid case', t => {
+test('evalEnablement enable invalid case', (t) => {
   const leafCondition: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.ENABLE,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'foobar'
+    ruleValue: 'foobar',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), false);
 });
-test('evalEnablement disable valid case', t => {
+test('evalEnablement disable valid case', (t) => {
   const leafCondition: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.DISABLE,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), false);
 });
 
-test('evalEnablement disable invalid case', t => {
+test('evalEnablement disable invalid case', (t) => {
   const leafCondition: LeafCondition = {
     type: 'LEAF',
     scope: '#/properties/ruleValue',
-    expectedValue: 'bar'
+    expectedValue: 'bar',
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.DISABLE,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'foobar'
+    ruleValue: 'foobar',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), true);
 });
 
-test('evalEnablement disable invalid case based on schema condition', t => {
+test('evalEnablement disable invalid case based on schema condition', (t) => {
   const condition: SchemaBasedCondition = {
     scope: '#/properties/ruleValue',
     schema: {
-      enum: ['bar', 'baz']
-    }
+      enum: ['bar', 'baz'],
+    },
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.DISABLE,
-      condition
-    }
+      condition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
   t.is(evalEnablement(uischema, data, undefined, createAjv()), false);
   t.is(
@@ -552,7 +552,7 @@ test('evalEnablement disable invalid case based on schema condition', t => {
   );
 });
 
-test('isInherentlyEnabled disabled globally', t => {
+test('isInherentlyEnabled disabled globally', (t) => {
   t.false(
     isInherentlyEnabled(
       { jsonforms: { readonly: true } },
@@ -565,22 +565,22 @@ test('isInherentlyEnabled disabled globally', t => {
   );
 });
 
-test('isInherentlyEnabled disabled by ownProps', t => {
+test('isInherentlyEnabled disabled by ownProps', (t) => {
   t.false(
     isInherentlyEnabled(null, { enabled: false }, null, null, null, null)
   );
 });
 
-test('isInherentlyEnabled enabled by ownProps', t => {
+test('isInherentlyEnabled enabled by ownProps', (t) => {
   t.true(isInherentlyEnabled(null, { enabled: true }, null, null, null, null));
 });
 
-test('isInherentlyEnabled disabled by uischema', t => {
+test('isInherentlyEnabled disabled by uischema', (t) => {
   t.false(
     isInherentlyEnabled(
       null,
       null,
-      ({ options: { readonly: true } } as unknown) as ControlElement,
+      { options: { readonly: true } } as unknown as ControlElement,
       null,
       null,
       null
@@ -588,12 +588,12 @@ test('isInherentlyEnabled disabled by uischema', t => {
   );
 });
 
-test('isInherentlyEnabled disabled by uischema over ownProps', t => {
+test('isInherentlyEnabled disabled by uischema over ownProps', (t) => {
   t.false(
     isInherentlyEnabled(
       null,
       { enabled: true },
-      ({ options: { readonly: true } } as unknown) as ControlElement,
+      { options: { readonly: true } } as unknown as ControlElement,
       null,
       null,
       null
@@ -601,12 +601,12 @@ test('isInherentlyEnabled disabled by uischema over ownProps', t => {
   );
 });
 
-test('isInherentlyEnabled enabled by uischema over schema', t => {
+test('isInherentlyEnabled enabled by uischema over schema', (t) => {
   t.true(
     isInherentlyEnabled(
       null,
       null,
-      ({ options: { readonly: false } } as unknown) as ControlElement,
+      { options: { readonly: false } } as unknown as ControlElement,
       { readOnly: true },
       null,
       null
@@ -614,11 +614,11 @@ test('isInherentlyEnabled enabled by uischema over schema', t => {
   );
 });
 
-test('isInherentlyEnabled disabled by ownProps over schema enablement', t => {
+test('isInherentlyEnabled disabled by ownProps over schema enablement', (t) => {
   t.false(
     isInherentlyEnabled(
       null,
-      { enabled: false},
+      { enabled: false },
       null,
       { readOnly: false },
       null,
@@ -627,12 +627,12 @@ test('isInherentlyEnabled disabled by ownProps over schema enablement', t => {
   );
 });
 
-test('isInherentlyEnabled disabled by uischema over schema', t => {
+test('isInherentlyEnabled disabled by uischema over schema', (t) => {
   t.false(
     isInherentlyEnabled(
       null,
       null,
-      ({ options: { readonly: true } } as unknown) as ControlElement,
+      { options: { readonly: true } } as unknown as ControlElement,
       { readOnly: false },
       null,
       null
@@ -640,13 +640,13 @@ test('isInherentlyEnabled disabled by uischema over schema', t => {
   );
 });
 
-test('isInherentlyEnabled disabled by schema', t => {
+test('isInherentlyEnabled disabled by schema', (t) => {
   t.false(
     isInherentlyEnabled(null, null, null, { readOnly: true }, null, null)
   );
 });
 
-test('isInherentlyEnabled disabled by schema over ownProps', t => {
+test('isInherentlyEnabled disabled by schema over ownProps', (t) => {
   t.false(
     isInherentlyEnabled(
       null,
@@ -659,22 +659,22 @@ test('isInherentlyEnabled disabled by schema over ownProps', t => {
   );
 });
 
-test('isInherentlyEnabled disabled by rule', t => {
+test('isInherentlyEnabled disabled by rule', (t) => {
   const leafCondition: SchemaBasedCondition = {
     scope: '#/properties/ruleValue',
-    schema: { type: 'string', pattern: 'bar' }
+    schema: { type: 'string', pattern: 'bar' },
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.DISABLE,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
 
   t.false(
@@ -689,22 +689,22 @@ test('isInherentlyEnabled disabled by rule', t => {
   );
 });
 
-test('isInherentlyEnabled disabled by global over rule ', t => {
+test('isInherentlyEnabled disabled by global over rule ', (t) => {
   const leafCondition: SchemaBasedCondition = {
     scope: '#/properties/ruleValue',
-    schema: { type: 'string', pattern: 'bar' }
+    schema: { type: 'string', pattern: 'bar' },
   };
   const uischema: ControlElement = {
     type: 'Control',
     scope: '#/properties/value',
     rule: {
       effect: RuleEffect.ENABLE,
-      condition: leafCondition
-    }
+      condition: leafCondition,
+    },
   };
   const data = {
     value: 'foo',
-    ruleValue: 'bar'
+    ruleValue: 'bar',
   };
 
   t.false(
@@ -712,8 +712,8 @@ test('isInherentlyEnabled disabled by global over rule ', t => {
       {
         jsonforms: {
           readonly: true,
-          core: { ajv: createAjv() } as JsonFormsCore
-        }
+          core: { ajv: createAjv() } as JsonFormsCore,
+        },
       },
       null,
       uischema,
@@ -724,26 +724,26 @@ test('isInherentlyEnabled disabled by global over rule ', t => {
   );
 });
 
-test('isInherentlyEnabled disabled by config', t => {
+test('isInherentlyEnabled disabled by config', (t) => {
   t.false(
     isInherentlyEnabled(null, null, null, null, null, { readonly: true })
   );
 });
 
-test('isInherentlyEnabled enabled by config over ownProps', t => {
+test('isInherentlyEnabled enabled by config over ownProps', (t) => {
   t.true(
     isInherentlyEnabled(null, { enabled: false }, null, null, null, {
-      readonly: false
+      readonly: false,
     })
   );
 });
 
-test('isInherentlyEnabled enabled by uischema over config', t => {
+test('isInherentlyEnabled enabled by uischema over config', (t) => {
   t.true(
     isInherentlyEnabled(
       null,
       null,
-      ({ options: { readonly: false } } as unknown) as ControlElement,
+      { options: { readonly: false } } as unknown as ControlElement,
       null,
       null,
       { readonly: true }
@@ -751,12 +751,14 @@ test('isInherentlyEnabled enabled by uischema over config', t => {
   );
 });
 
-test('isInherentlyEnabled prefer readonly over readOnly', t => {
+test('isInherentlyEnabled prefer readonly over readOnly', (t) => {
   t.true(
     isInherentlyEnabled(
       null,
       null,
-      ({ options: { readonly: false, readOnly: true } } as unknown) as ControlElement,
+      {
+        options: { readonly: false, readOnly: true },
+      } as unknown as ControlElement,
       null,
       null,
       null
@@ -766,7 +768,9 @@ test('isInherentlyEnabled prefer readonly over readOnly', t => {
     isInherentlyEnabled(
       null,
       null,
-      ({ options: { readonly: true, readOnly: false } } as unknown) as ControlElement,
+      {
+        options: { readonly: true, readOnly: false },
+      } as unknown as ControlElement,
       null,
       null,
       null
@@ -774,6 +778,6 @@ test('isInherentlyEnabled prefer readonly over readOnly', t => {
   );
 });
 
-test('isInherentlyEnabled enabled', t => {
+test('isInherentlyEnabled enabled', (t) => {
   t.true(isInherentlyEnabled(null, null, null, null, null, null));
 });
diff --git a/packages/examples-react/src/App.tsx b/packages/examples-react/src/App.tsx
index 49aaaf4bc..891a5f873 100644
--- a/packages/examples-react/src/App.tsx
+++ b/packages/examples-react/src/App.tsx
@@ -36,17 +36,21 @@ import 'highlight.js/styles/default.css';
 import './App.css';
 
 type AppProps = {
-  examples: ExampleDescription[],
-  cells: JsonFormsCellRendererRegistryEntry[],
-  renderers: JsonFormsRendererRegistryEntry[],
+  examples: ExampleDescription[];
+  cells: JsonFormsCellRendererRegistryEntry[];
+  renderers: JsonFormsRendererRegistryEntry[];
 };
 
 type Action = {
-  label: string,
-  apply: any
+  label: string;
+  apply: any;
 };
 
-const getProps = (example: ExampleDescription, cells?: any, renderers?: any) => {
+const getProps = (
+  example: ExampleDescription,
+  cells?: any,
+  renderers?: any
+) => {
   const schema = example.schema;
   const uischema = example.uischema;
   const data = example.data;
@@ -61,38 +65,48 @@ const getProps = (example: ExampleDescription, cells?: any, renderers?: any) =>
     uischemas,
     cells,
     renderers,
-    i18n
-  }
-}
+    i18n,
+  };
+};
 
-const App = ({ examples, cells, renderers}: AppProps) => {
-  const [currentExample, setExample] = useState<ExampleDescription>(examples[0]);
+const App = ({ examples, cells, renderers }: AppProps) => {
+  const [currentExample, setExample] = useState<ExampleDescription>(
+    examples[0]
+  );
   const [currentIndex, setIndex] = useState<number>(0);
   const [dataAsString, setDataAsString] = useState<any>('');
-  const [props, setProps] = useState<any>(getProps(currentExample, cells, renderers));
+  const [props, setProps] = useState<any>(
+    getProps(currentExample, cells, renderers)
+  );
   const [showPanel, setShowPanel] = useState<boolean>(true);
-  const schemaAsString = useMemo(() => JSON.stringify(props.schema, null, 2), [props.schema]);
-  const uiSchemaAsString = useMemo(() => JSON.stringify(props.uischema, null, 2), [props.uischema]);
+  const schemaAsString = useMemo(
+    () => JSON.stringify(props.schema, null, 2),
+    [props.schema]
+  );
+  const uiSchemaAsString = useMemo(
+    () => JSON.stringify(props.uischema, null, 2),
+    [props.uischema]
+  );
 
   const actions: Action[] = currentExample.actions;
 
   useEffect(() => {
     const hash = window.location.hash.replace('#', '');
-    const exampleIndex = examples.findIndex(example => {
-      return example.name === hash
+    const exampleIndex = examples.findIndex((example) => {
+      return example.name === hash;
     });
-    if(exampleIndex !== -1) {
+    if (exampleIndex !== -1) {
       changeExample(exampleIndex);
     }
   }, []);
 
   const changeExample = (exampleID: number) => {
-    let example = examples[exampleID];
+    const example = examples[exampleID];
     setIndex(exampleID);
     setExample(example);
     setProps(getProps(example, cells, renderers));
     window.location.hash = example.name;
-    if(example.name == 'huge') {
+    if (example.name == 'huge') {
       setShowPanel(false);
     }
   };
@@ -115,27 +129,31 @@ const App = ({ examples, cells, renderers}: AppProps) => {
               <h4>Select Example:</h4>
               <select
                 value={currentIndex}
-                onChange={ev => changeExample(Number(ev.currentTarget.value))}
+                onChange={(ev) => changeExample(Number(ev.currentTarget.value))}
               >
-                {examples.map((optionValue: ExampleDescription, index: number) => (
-                  <option
-                    value={index}
-                    label={optionValue.label}
-                    key={index}
-                  >
-                    {optionValue.label}
-                  </option>
-                ))}
+                {examples.map(
+                  (optionValue: ExampleDescription, index: number) => (
+                    <option value={index} label={optionValue.label} key={index}>
+                      {optionValue.label}
+                    </option>
+                  )
+                )}
               </select>
             </div>
             <div className='toggle-panel'>
-              <input type='checkbox' id='panel' name='panel' checked={showPanel} onChange={() => setShowPanel(prevShow => !prevShow)} />
+              <input
+                type='checkbox'
+                id='panel'
+                name='panel'
+                checked={showPanel}
+                onChange={() => setShowPanel((prevShow) => !prevShow)}
+              />
               <label htmlFor='panel'>Show sidepanel</label>
             </div>
           </div>
 
           <div className='demo-wrapper'>
-            { showPanel && 
+            {showPanel && (
               <div className='props-panel'>
                 <Tabs>
                   <TabList>
@@ -143,30 +161,34 @@ const App = ({ examples, cells, renderers}: AppProps) => {
                     <Tab>Schema</Tab>
                     <Tab>UISchema</Tab>
                   </TabList>
-                  <div className="panel-wrapper">
+                  <div className='panel-wrapper'>
                     <TabPanel>
-                      <Highlight className='json'>
-                        {dataAsString}
-                      </Highlight>
+                      <Highlight className='json'>{dataAsString}</Highlight>
                     </TabPanel>
                     <TabPanel>
-                      <Highlight className='json'>
-                        {schemaAsString}
-                      </Highlight>
+                      <Highlight className='json'>{schemaAsString}</Highlight>
                     </TabPanel>
                     <TabPanel>
-                      <Highlight className='json'>
-                        {uiSchemaAsString}
-                      </Highlight>
+                      <Highlight className='json'>{uiSchemaAsString}</Highlight>
                     </TabPanel>
                   </div>
                 </Tabs>
               </div>
-            }
+            )}
             <div className='demoform'>
               <div className='buttons'>
                 {actions?.map((action: Action, index: number) => (
-                  <button className='action-button' onClick={ () => setProps((oldProps: JsonFormsInitStateProps) => action.apply(oldProps))} key={index}>{action.label}</button>
+                  <button
+                    className='action-button'
+                    onClick={() =>
+                      setProps((oldProps: JsonFormsInitStateProps) =>
+                        action.apply(oldProps)
+                      )
+                    }
+                    key={index}
+                  >
+                    {action.label}
+                  </button>
                 ))}
               </div>
               <div className='demo'>
@@ -182,6 +204,6 @@ const App = ({ examples, cells, renderers}: AppProps) => {
       </div>
     </div>
   );
-}
+};
 
 export default App;
diff --git a/packages/examples/src/example.ts b/packages/examples/src/example.ts
index 068f2b4fa..f6aca9e28 100644
--- a/packages/examples/src/example.ts
+++ b/packages/examples/src/example.ts
@@ -22,13 +22,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { 
+import {
   JsonFormsCellRendererRegistryEntry,
   JsonFormsUISchemaRegistryEntry,
   JsonFormsRendererRegistryEntry,
   JsonSchema,
   UISchemaElement,
-  JsonFormsI18nState
+  JsonFormsI18nState,
 } from '@jsonforms/core';
 
 export interface ExampleDescription {
@@ -39,7 +39,7 @@ export interface ExampleDescription {
   uischema: UISchemaElement;
   uischemas?: JsonFormsUISchemaRegistryEntry[];
   config?: any;
-  actions?: { label: string, apply: (props: StateProps) => any }[];
+  actions?: { label: string; apply: (props: StateProps) => any }[];
   i18n?: JsonFormsI18nState;
 }
 
diff --git a/packages/examples/src/examples/1884.ts b/packages/examples/src/examples/1884.ts
index 7f27ecead..b22f7e730 100644
--- a/packages/examples/src/examples/1884.ts
+++ b/packages/examples/src/examples/1884.ts
@@ -31,53 +31,53 @@ export const schema = {
     firstName: {
       type: 'string',
       minLength: 2,
-      maxLength: 20
+      maxLength: 20,
     },
     lastName: {
       type: 'string',
       minLength: 5,
-      maxLength: 15
+      maxLength: 15,
     },
     age: {
       type: 'integer',
       minimum: 18,
-      maximum: 100
+      maximum: 100,
     },
     gender: {
       type: 'string',
-      enum: ['Male', 'Female', 'Undisclosed']
+      enum: ['Male', 'Female', 'Undisclosed'],
     },
     height: {
-      type: 'number'
+      type: 'number',
     },
     dateOfBirth: {
       type: 'string',
-      format: 'date'
+      format: 'date',
     },
     rating: {
-      type: 'integer'
+      type: 'integer',
     },
     committer: {
-      type: 'boolean'
+      type: 'boolean',
     },
     address: {
       type: 'object',
       properties: {
         street: {
-          type: 'string'
+          type: 'string',
         },
         streetnumber: {
-          type: 'string'
+          type: 'string',
         },
         postalCode: {
-          type: 'string'
+          type: 'string',
         },
         city: {
-          type: 'string'
-        }
-      }
-    }
-  }
+          type: 'string',
+        },
+      },
+    },
+  },
 };
 
 export const uischema = {
@@ -85,50 +85,50 @@ export const uischema = {
   elements: [
     {
       type: 'Label',
-      text: 'Toggle the committer boolean to enable/disable the address block.'
+      text: 'Toggle the committer boolean to enable/disable the address block.',
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/firstName'
+          scope: '#/properties/firstName',
         },
         {
           type: 'Control',
-          scope: '#/properties/lastName'
-        }
-      ]
+          scope: '#/properties/lastName',
+        },
+      ],
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/age'
+          scope: '#/properties/age',
         },
         {
           type: 'Control',
-          scope: '#/properties/dateOfBirth'
-        }
-      ]
+          scope: '#/properties/dateOfBirth',
+        },
+      ],
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/height'
+          scope: '#/properties/height',
         },
         {
           type: 'Control',
-          scope: '#/properties/gender'
+          scope: '#/properties/gender',
         },
         {
           type: 'Control',
-          scope: '#/properties/committer'
-        }
-      ]
+          scope: '#/properties/committer',
+        },
+      ],
     },
     {
       type: 'Group',
@@ -139,45 +139,45 @@ export const uischema = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/address/properties/street'
+              scope: '#/properties/address/properties/street',
             },
             {
               type: 'Control',
-              scope: '#/properties/address/properties/streetnumber'
-            }
-          ]
+              scope: '#/properties/address/properties/streetnumber',
+            },
+          ],
         },
         {
           type: 'HorizontalLayout',
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/address/properties/postalCode'
+              scope: '#/properties/address/properties/postalCode',
             },
             {
               type: 'Control',
-              scope: '#/properties/address/properties/city'
-            }
-          ]
-        }
+              scope: '#/properties/address/properties/city',
+            },
+          ],
+        },
       ],
       rule: {
         effect: 'ENABLE',
         condition: {
           scope: '#/properties/committer',
           schema: {
-            const: true
-          }
-        }
-      }
-    }
-  ]
+            const: true,
+          },
+        },
+      },
+    },
+  ],
 };
 
 export const data = {
   firstName: 'Max',
   lastName: 'Power',
-  committer: false
+  committer: false,
 };
 
 registerExamples([
@@ -186,6 +186,6 @@ registerExamples([
     label: 'Issue 1884 - Nested enable/disable',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/1948.ts b/packages/examples/src/examples/1948.ts
index 042a1b438..42cc43e12 100644
--- a/packages/examples/src/examples/1948.ts
+++ b/packages/examples/src/examples/1948.ts
@@ -33,28 +33,28 @@ export const schema = {
       type: 'object',
       properties: {
         eClass: {
-          const: 'http://my_schema/1.0.0#//Import'
+          const: 'http://my_schema/1.0.0#//Import',
         },
         document: {
-          type: 'string'
+          type: 'string',
         },
         package: {
-          type: 'string'
+          type: 'string',
         },
         prefix: {
-          type: 'string'
-        }
-      }
-    }
+          type: 'string',
+        },
+      },
+    },
   },
   properties: {
     import: {
       type: 'array',
       items: {
-        $ref: '#/definitions/import'
-      }
-    }
-  }
+        $ref: '#/definitions/import',
+      },
+    },
+  },
 };
 
 export const uischema: UISchemaElement = undefined;
@@ -64,9 +64,9 @@ export const data = {
     {
       document: 'Document1',
       package: 'Package1',
-      prefix: 'Prefix'
-    }
-  ]
+      prefix: 'Prefix',
+    },
+  ],
 };
 
 registerExamples([
@@ -75,13 +75,13 @@ registerExamples([
     label: 'Issue 1948 - Array renderer selection (with schema)',
     data,
     schema,
-    uischema
+    uischema,
   },
   {
     name: '1948_without',
     label: 'Issue 1948 - Array renderer selection (w/o schema)',
     data,
     schema: undefined,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/additional-errors.ts b/packages/examples/src/examples/additional-errors.ts
index 773dcdd36..14f9537a9 100644
--- a/packages/examples/src/examples/additional-errors.ts
+++ b/packages/examples/src/examples/additional-errors.ts
@@ -25,33 +25,36 @@
 import { ErrorObject } from 'ajv';
 import { StateProps } from '../example';
 import { registerExamples } from '../register';
-import { schema, uischema, data } from './person'
+import { schema, uischema, data } from './person';
 
 const additionalErrors: ErrorObject[] = [];
 
-const actions = [{
-    label: 'Add additional error', apply: (props: StateProps) => {
-        additionalErrors.push({
-            instancePath: '/personalData/age',
-            message:`New error #${additionalErrors.length +1 }`,
-            schemaPath: '',
-            keyword: '',
-            params: {}
-        });
-        return {
-            ...props,
-            additionalErrors: [...additionalErrors]
-        }
-    }
-}];
+const actions = [
+  {
+    label: 'Add additional error',
+    apply: (props: StateProps) => {
+      additionalErrors.push({
+        instancePath: '/personalData/age',
+        message: `New error #${additionalErrors.length + 1}`,
+        schemaPath: '',
+        keyword: '',
+        params: {},
+      });
+      return {
+        ...props,
+        additionalErrors: [...additionalErrors],
+      };
+    },
+  },
+];
 
 registerExamples([
-    {
-        name: 'additional-errors',
-        label: 'Additional errors',
-        data,
-        schema,
-        uischema,
-        actions
-    }
+  {
+    name: 'additional-errors',
+    label: 'Additional errors',
+    data,
+    schema,
+    uischema,
+    actions,
+  },
 ]);
diff --git a/packages/examples/src/examples/allOf.ts b/packages/examples/src/examples/allOf.ts
index ca4bc6074..61ac38d7b 100644
--- a/packages/examples/src/examples/allOf.ts
+++ b/packages/examples/src/examples/allOf.ts
@@ -33,10 +33,10 @@ export const schema = {
       properties: {
         street_address: { type: 'string' },
         city: { type: 'string' },
-        state: { type: 'string' }
+        state: { type: 'string' },
       },
-      required: ['street_address', 'city', 'state']
-    }
+      required: ['street_address', 'city', 'state'],
+    },
   },
 
   type: 'object',
@@ -51,14 +51,14 @@ export const schema = {
           properties: {
             type: {
               type: 'string',
-              enum: ['residential', 'business']
-            }
+              enum: ['residential', 'business'],
+            },
           },
-          required: ['type']
-        }
-      ]
-    }
-  }
+          required: ['type'],
+        },
+      ],
+    },
+  },
 };
 
 export const uischema = {
@@ -67,21 +67,21 @@ export const uischema = {
     {
       label: 'Billing address',
       type: 'Control',
-      scope: '#/properties/billing_address'
+      scope: '#/properties/billing_address',
     },
     {
       type: 'Control',
-      scope: '#/properties/shipping_address'
-    }
-  ]
+      scope: '#/properties/shipping_address',
+    },
+  ],
 };
 
 const data = {
   billing_address: {
     street_address: '1600 Pennsylvania Avenue NW',
     city: 'Washington',
-    state: 'DC'
-  }
+    state: 'DC',
+  },
 };
 
 registerExamples([
@@ -90,6 +90,6 @@ registerExamples([
     label: 'allOf',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/anyOf-oneOf-allOf-resolve.ts b/packages/examples/src/examples/anyOf-oneOf-allOf-resolve.ts
index c09ede778..33a4e89de 100644
--- a/packages/examples/src/examples/anyOf-oneOf-allOf-resolve.ts
+++ b/packages/examples/src/examples/anyOf-oneOf-allOf-resolve.ts
@@ -30,9 +30,9 @@ export const schema = {
       type: 'object',
       properties: {
         width: {
-          type: 'integer'
-        }
-      }
+          type: 'integer',
+        },
+      },
     },
     Child: {
       type: 'object',
@@ -41,19 +41,19 @@ export const schema = {
         {
           properties: {
             geometry: {
-              type: 'string'
-            }
-          }
-        }
-      ]
-    }
+              type: 'string',
+            },
+          },
+        },
+      ],
+    },
   },
   type: 'object',
   properties: {
     element: {
-      $ref: '#/$defs/Child'
-    }
-  }
+      $ref: '#/$defs/Child',
+    },
+  },
 };
 
 export const uischema = {
@@ -61,25 +61,25 @@ export const uischema = {
   elements: [
     {
       type: 'Label',
-      text: 'AllOfRenderer'
+      text: 'AllOfRenderer',
     },
     {
       type: 'Control',
-      scope: '#/properties/element'
+      scope: '#/properties/element',
     },
     {
       type: 'Label',
-      text: 'Manual controls'
+      text: 'Manual controls',
     },
     {
       type: 'Control',
-      scope: '#/properties/element/properties/width'
+      scope: '#/properties/element/properties/width',
     },
     {
       type: 'Control',
-      scope: '#/properties/element/properties/geometry'
-    }
-  ]
+      scope: '#/properties/element/properties/geometry',
+    },
+  ],
 };
 
 const data = {};
@@ -90,6 +90,6 @@ registerExamples([
     label: 'AnyOf OneOf AllOf Resolve',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/anyOf.ts b/packages/examples/src/examples/anyOf.ts
index 10caf2f44..31eb17a3b 100644
--- a/packages/examples/src/examples/anyOf.ts
+++ b/packages/examples/src/examples/anyOf.ts
@@ -33,50 +33,53 @@ export const schema = {
       properties: {
         street_address: { type: 'string' },
         city: { type: 'string' },
-        state: { type: 'string' }
+        state: { type: 'string' },
       },
-      required: ['street_address', 'city', 'state']
+      required: ['street_address', 'city', 'state'],
     },
     user: {
       type: 'object',
       properties: {
         name: { type: 'string' },
-        mail: { type: 'string' }
+        mail: { type: 'string' },
       },
-      required: ['name', 'mail']
+      required: ['name', 'mail'],
     },
     users: {
       type: 'array',
-      items: { $ref: '#/definitions/user' }
+      items: { $ref: '#/definitions/user' },
     },
     addresses: {
       type: 'array',
-      items: { $ref: '#/definitions/address' }
-    }
+      items: { $ref: '#/definitions/address' },
+    },
   },
 
   type: 'object',
 
   properties: {
     addressOrUser: {
-      anyOf: [{ $ref: '#/definitions/address' }, { $ref: '#/definitions/user' }]
+      anyOf: [
+        { $ref: '#/definitions/address' },
+        { $ref: '#/definitions/user' },
+      ],
     },
     addressesOrUsers: {
       anyOf: [
         { $ref: '#/definitions/addresses' },
-        { $ref: '#/definitions/users' }
-      ]
+        { $ref: '#/definitions/users' },
+      ],
     },
     addressesOrUsersAnyOfItems: {
       type: 'array',
       items: {
         anyOf: [
           { $ref: '#/definitions/addresses' },
-          { $ref: '#/definitions/users' }
-        ]
-      }
-    }
-  }
+          { $ref: '#/definitions/users' },
+        ],
+      },
+    },
+  },
 };
 
 export const uischema = {
@@ -84,36 +87,36 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/addressOrUser'
+      scope: '#/properties/addressOrUser',
     },
     {
       type: 'Control',
       scope: '#/properties/addressesOrUsers',
-      label: 'Addresses or Users (AnyOf Schema)'
+      label: 'Addresses or Users (AnyOf Schema)',
     },
     {
       type: 'Control',
       scope: '#/properties/addressesOrUsersAnyOfItems',
-      label: 'Addresses or Users (AnyOf Array Items)'
-    }
-  ]
+      label: 'Addresses or Users (AnyOf Array Items)',
+    },
+  ],
 };
 
 const data = {
   addressOrUser: {
     street_address: '1600 Pennsylvania Avenue NW',
     city: 'Washington',
-    state: 'DC'
-  }
+    state: 'DC',
+  },
 };
 
 const schema_simple = {
   type: 'object',
   properties: {
     foo: {
-      anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }]
-    }
-  }
+      anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }],
+    },
+  },
 };
 
 registerExamples([
@@ -122,13 +125,13 @@ registerExamples([
     label: 'anyOf',
     data,
     schema,
-    uischema
+    uischema,
   },
   {
     name: 'anyOf_simple',
     label: 'AnyOf Simple',
     data: { foo: 'foo' },
     schema: schema_simple,
-    uischema: undefined
-  }
+    uischema: undefined,
+  },
 ]);
diff --git a/packages/examples/src/examples/arrays-with-custom-element-label.ts b/packages/examples/src/examples/arrays-with-custom-element-label.ts
index 9a0e0b726..5ab2ace9a 100644
--- a/packages/examples/src/examples/arrays-with-custom-element-label.ts
+++ b/packages/examples/src/examples/arrays-with-custom-element-label.ts
@@ -34,15 +34,15 @@ export const schema = {
         type: 'object',
         properties: {
           message1: {
-            type: 'string'
+            type: 'string',
           },
           message2: {
-            type: 'string'
-          }
-        }
-      }
-    }
-  }
+            type: 'string',
+          },
+        },
+      },
+    },
+  },
 };
 
 export const uischema = {
@@ -58,30 +58,30 @@ export const uischema = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/message1'
+              scope: '#/properties/message1',
             },
             {
               type: 'Control',
-              scope: '#/properties/message2'
-            }
-          ]
-        }
-      }
-    }
-  ]
+              scope: '#/properties/message2',
+            },
+          ],
+        },
+      },
+    },
+  ],
 };
 
 export const data = {
   comments: [
     {
       message1: 'This is an example message',
-      message2: 'This is an example message 2'
+      message2: 'This is an example message 2',
     },
     {
       message1: 'Get ready for booohay 1',
-      message2: 'Get ready for booohay 2'
-    }
-  ]
+      message2: 'Get ready for booohay 2',
+    },
+  ],
 };
 
 registerExamples([
@@ -90,6 +90,6 @@ registerExamples([
     label: 'Array with custom element label',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/arrays-with-detail-and-rule.ts b/packages/examples/src/examples/arrays-with-detail-and-rule.ts
index 50472b1cd..b2237a539 100644
--- a/packages/examples/src/examples/arrays-with-detail-and-rule.ts
+++ b/packages/examples/src/examples/arrays-with-detail-and-rule.ts
@@ -39,17 +39,17 @@ export const schema = {
         properties: {
           date: {
             type: 'string',
-            format: 'date'
+            format: 'date',
           },
           message: {
             type: 'string',
-            maxLength: 5
-          }
-        }
-      }
-    }
+            maxLength: 5,
+          },
+        },
+      },
+    },
   },
-  required: ['occupation', 'nationality']
+  required: ['occupation', 'nationality'],
 };
 
 export const uischema = {
@@ -57,11 +57,11 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/occupation'
+      scope: '#/properties/occupation',
     },
     {
       type: 'Control',
-      scope: '#/properties/enableArray'
+      scope: '#/properties/enableArray',
     },
     {
       type: 'Control',
@@ -73,14 +73,14 @@ export const uischema = {
           conditions: [
             {
               schema: { const: 'developer' },
-              scope: '#/properties/occupation'
+              scope: '#/properties/occupation',
             },
             {
               schema: { const: true },
-              scope: '/properties/enableArray'
-            }
-          ]
-        }
+              scope: '/properties/enableArray',
+            },
+          ],
+        },
       },
       options: {
         detail: {
@@ -88,17 +88,17 @@ export const uischema = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/message'
+              scope: '#/properties/message',
             },
             {
               type: 'Control',
-              scope: '#/properties/date'
-            }
-          ]
-        }
-      }
-    }
-  ]
+              scope: '#/properties/date',
+            },
+          ],
+        },
+      },
+    },
+  ],
 };
 
 export const data = {
@@ -106,13 +106,13 @@ export const data = {
   comments: [
     {
       date: new Date(2001, 8, 11).toISOString().substr(0, 10),
-      message: 'This is an example message'
+      message: 'This is an example message',
     },
     {
       date: new Date().toISOString().substr(0, 10),
-      message: 'Get ready for booohay'
-    }
-  ]
+      message: 'Get ready for booohay',
+    },
+  ],
 };
 
 registerExamples([
@@ -121,6 +121,6 @@ registerExamples([
     label: 'Array with detail and rule',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/arrays-with-detail.ts b/packages/examples/src/examples/arrays-with-detail.ts
index c49ed9e6c..c830d55ec 100644
--- a/packages/examples/src/examples/arrays-with-detail.ts
+++ b/packages/examples/src/examples/arrays-with-detail.ts
@@ -37,17 +37,17 @@ export const schema = {
         properties: {
           date: {
             type: 'string',
-            format: 'date'
+            format: 'date',
           },
           message: {
             type: 'string',
-            maxLength: 5
-          }
-        }
-      }
-    }
+            maxLength: 5,
+          },
+        },
+      },
+    },
   },
-  required: ['occupation', 'nationality']
+  required: ['occupation', 'nationality'],
 };
 
 export const uischema = {
@@ -63,30 +63,30 @@ export const uischema = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/message'
+              scope: '#/properties/message',
             },
             {
               type: 'Control',
-              scope: '#/properties/date'
-            }
-          ]
-        }
-      }
-    }
-  ]
+              scope: '#/properties/date',
+            },
+          ],
+        },
+      },
+    },
+  ],
 };
 
 export const data = {
   comments: [
     {
       date: new Date(2001, 8, 11).toISOString().substr(0, 10),
-      message: 'This is an example message'
+      message: 'This is an example message',
     },
     {
       date: new Date().toISOString().substr(0, 10),
-      message: 'Get ready for booohay'
-    }
-  ]
+      message: 'Get ready for booohay',
+    },
+  ],
 };
 
 registerExamples([
@@ -95,6 +95,6 @@ registerExamples([
     label: 'Array with detail',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/arrays-with-sorting.ts b/packages/examples/src/examples/arrays-with-sorting.ts
index a7da3994c..ee6932ade 100644
--- a/packages/examples/src/examples/arrays-with-sorting.ts
+++ b/packages/examples/src/examples/arrays-with-sorting.ts
@@ -35,21 +35,21 @@ export const schema = {
         properties: {
           date: {
             type: 'string',
-            format: 'date'
+            format: 'date',
           },
           message: {
             type: 'string',
-            maxLength: 5
+            maxLength: 5,
           },
           enum: {
             type: 'string',
-            const: 'foo'
-          }
-        }
-      }
+            const: 'foo',
+          },
+        },
+      },
     },
-    foo:{type:'string'}
-  }
+    foo: { type: 'string' },
+  },
 };
 
 export const uischema = {
@@ -57,16 +57,16 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     },
     {
       type: 'Control',
       scope: '#/properties/comments',
       options: {
-        showSortButtons: true
-      }
-    }
-  ]
+        showSortButtons: true,
+      },
+    },
+  ],
 };
 
 export const uischemaWithSorting = {
@@ -74,49 +74,49 @@ export const uischemaWithSorting = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     },
     {
       type: 'Control',
       scope: '#/properties/comments',
       options: {
-        showSortButtons: true
-      }
-    }
-  ]
+        showSortButtons: true,
+      },
+    },
+  ],
 };
 
 export const data = {
   comments: [
     {
       date: new Date(2001, 8, 11).toISOString().substr(0, 10),
-      message: 'This is an example message With sorting'
+      message: 'This is an example message With sorting',
     },
     {
       date: new Date().toISOString().substr(0, 10),
-      message: 'Get ready for booohay'
-    }
-  ]
+      message: 'Get ready for booohay',
+    },
+  ],
 };
 
 const actions = [
   {
-    'label': 'Enable Sorting',
-    'apply': (props: StateProps) => {
+    label: 'Enable Sorting',
+    apply: (props: StateProps) => {
       return {
         ...props,
-        uischema: uischemaWithSorting
-      }
-    }
+        uischema: uischemaWithSorting,
+      };
+    },
   },
   {
-    'label': 'Disable Sorting',
-    'apply': (props: StateProps) => {
+    label: 'Disable Sorting',
+    apply: (props: StateProps) => {
       return {
         ...props,
-        uischema: uischema
-      }
-    }
+        uischema: uischema,
+      };
+    },
   },
 ];
 
@@ -128,8 +128,8 @@ registerExamples([
     schema,
     uischema,
     config: {
-      withSort: uischemaWithSorting
+      withSort: uischemaWithSorting,
     },
-    actions
-  }
+    actions,
+  },
 ]);
diff --git a/packages/examples/src/examples/arrays.ts b/packages/examples/src/examples/arrays.ts
index 3ad09e624..144d5b012 100644
--- a/packages/examples/src/examples/arrays.ts
+++ b/packages/examples/src/examples/arrays.ts
@@ -35,21 +35,21 @@ export const schema = {
         properties: {
           date: {
             type: 'string',
-            format: 'date'
+            format: 'date',
           },
           message: {
             type: 'string',
-            maxLength: 5
+            maxLength: 5,
           },
           enum: {
             type: 'string',
-            const: 'foo'
-          }
-        }
-      }
+            const: 'foo',
+          },
+        },
+      },
     },
-    foo:{type:'string'}
-  }
+    foo: { type: 'string' },
+  },
 };
 
 export const uischema = {
@@ -57,16 +57,16 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     },
     {
       type: 'Control',
       scope: '#/properties/comments',
       options: {
-        showSortButtons: false
-      }
-    }
-  ]
+        showSortButtons: false,
+      },
+    },
+  ],
 };
 
 export const uischemaWithSorting = {
@@ -74,49 +74,49 @@ export const uischemaWithSorting = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     },
     {
       type: 'Control',
       scope: '#/properties/comments',
       options: {
-        showSortButtons: false
-      }
-    }
-  ]
+        showSortButtons: false,
+      },
+    },
+  ],
 };
 
 export const data = {
   comments: [
     {
       date: new Date(2001, 8, 11).toISOString().substr(0, 10),
-      message: 'This is an example message'
+      message: 'This is an example message',
     },
     {
       date: new Date().toISOString().substr(0, 10),
-      message: 'Get ready for booohay'
-    }
-  ]
+      message: 'Get ready for booohay',
+    },
+  ],
 };
 
 const actions = [
   {
-    'label': 'Enable Sorting',
-    'apply': (props: StateProps) => {
+    label: 'Enable Sorting',
+    apply: (props: StateProps) => {
       return {
         ...props,
-        uischema: uischemaWithSorting
-      }
-    }
+        uischema: uischemaWithSorting,
+      };
+    },
   },
   {
-    'label': 'Disable Sorting',
-    'apply': (props: StateProps) => {
+    label: 'Disable Sorting',
+    apply: (props: StateProps) => {
       return {
         ...props,
-        uischema: uischema
-      }
-    }
+        uischema: uischema,
+      };
+    },
   },
 ];
 
@@ -128,8 +128,8 @@ registerExamples([
     schema,
     uischema,
     config: {
-      withSort: uischemaWithSorting
+      withSort: uischemaWithSorting,
     },
-    actions
-  }
+    actions,
+  },
 ]);
diff --git a/packages/examples/src/examples/arraysI18n.ts b/packages/examples/src/examples/arraysI18n.ts
index 34045a814..d92f2d34e 100644
--- a/packages/examples/src/examples/arraysI18n.ts
+++ b/packages/examples/src/examples/arraysI18n.ts
@@ -36,20 +36,20 @@ export const schema = {
         properties: {
           date: {
             type: 'string',
-            format: 'date'
+            format: 'date',
           },
           message: {
             type: 'string',
-            maxLength: 5
+            maxLength: 5,
           },
           enum: {
             type: 'string',
-            const: 'foo'
-          }
-        }
-      }
+            const: 'foo',
+          },
+        },
+      },
     },
-  }
+  },
 };
 
 export const uischema = {
@@ -60,22 +60,22 @@ export const uischema = {
       scope: '#/properties/comments',
       options: {
         showSortButtons: true,
-      }
-    }
-  ]
+      },
+    },
+  ],
 };
 
 export const data = {
   comments: [
     {
       date: new Date(2001, 8, 11).toISOString().substr(0, 10),
-      message: 'This is an example message'
+      message: 'This is an example message',
     },
     {
       date: new Date().toISOString().substr(0, 10),
-      message: 'Get ready for booohay'
-    }
-  ]
+      message: 'Get ready for booohay',
+    },
+  ],
 };
 
 export const translations = {
@@ -84,8 +84,9 @@ export const translations = {
     [ArrayTranslationEnum.addTooltip]: 'Add a Comment',
     [ArrayTranslationEnum.deleteDialogAccept]: 'Delete!',
     [ArrayTranslationEnum.deleteDialogDecline]: 'Cancel!',
-    [ArrayTranslationEnum.deleteDialogMessage]: 'Are you sure you want to delete this comment?'
-  }
+    [ArrayTranslationEnum.deleteDialogMessage]:
+      'Are you sure you want to delete this comment?',
+  },
 };
 export const translate: Translator = (key: string, defaultMessage: string) => {
   return get(translations, key) ?? defaultMessage;
@@ -100,7 +101,7 @@ registerExamples([
     uischema,
     i18n: {
       translate: translate,
-      locale: 'en'
-    }
-  }
+      locale: 'en',
+    },
+  },
 ]);
diff --git a/packages/examples/src/examples/categorization-stepper-nav-buttons.ts b/packages/examples/src/examples/categorization-stepper-nav-buttons.ts
index 88abe35c9..f2c943477 100644
--- a/packages/examples/src/examples/categorization-stepper-nav-buttons.ts
+++ b/packages/examples/src/examples/categorization-stepper-nav-buttons.ts
@@ -26,7 +26,7 @@ import { registerExamples } from '../register';
 import {
   data as categorizationData,
   schema as categorizationSchema,
-  uischema as categorizationUiSchema
+  uischema as categorizationUiSchema,
 } from './categorization';
 
 export const schema = categorizationSchema;
@@ -35,8 +35,8 @@ export const uischema = {
   ...categorizationUiSchema,
   options: {
     variant: 'stepper',
-    showNavButtons: true
-  }
+    showNavButtons: true,
+  },
 };
 
 export const data = categorizationData;
@@ -47,6 +47,6 @@ registerExamples([
     label: 'Categorization (Stepper - Nav Buttons)',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/categorization-stepper.ts b/packages/examples/src/examples/categorization-stepper.ts
index bbd1e3107..8fcb7c152 100644
--- a/packages/examples/src/examples/categorization-stepper.ts
+++ b/packages/examples/src/examples/categorization-stepper.ts
@@ -26,7 +26,7 @@ import { registerExamples } from '../register';
 import {
   data as categorizationData,
   schema as categorizationSchema,
-  uischema as categorizationUiSchema
+  uischema as categorizationUiSchema,
 } from './categorization';
 
 export const schema = categorizationSchema;
@@ -34,8 +34,8 @@ export const schema = categorizationSchema;
 export const uischema = {
   ...categorizationUiSchema,
   options: {
-    variant: 'stepper'
-  }
+    variant: 'stepper',
+  },
 };
 
 export const data = categorizationData;
@@ -46,6 +46,6 @@ registerExamples([
     label: 'Categorization (Stepper)',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/categorization.ts b/packages/examples/src/examples/categorization.ts
index 5156968b4..63a83e521 100644
--- a/packages/examples/src/examples/categorization.ts
+++ b/packages/examples/src/examples/categorization.ts
@@ -32,61 +32,61 @@ export const schema = {
     firstName: {
       type: 'string',
       minLength: 3,
-      description: 'Please enter your first name'
+      description: 'Please enter your first name',
     },
     secondName: {
       type: 'string',
       minLength: 3,
-      description: 'Please enter your second name'
+      description: 'Please enter your second name',
     },
     vegetarian: {
-      type: 'boolean'
+      type: 'boolean',
     },
     birthDate: {
       type: 'string',
       format: 'date',
-      description: 'Please enter your birth date.'
+      description: 'Please enter your birth date.',
     },
     nationality: {
       type: 'string',
-      enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
+      enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
     },
     provideAddress: {
-      type: 'boolean'
+      type: 'boolean',
     },
     address: {
       type: 'object',
       properties: {
         street: {
-          type: 'string'
+          type: 'string',
         },
         streetNumber: {
-          type: 'string'
+          type: 'string',
         },
         city: {
-          type: 'string'
+          type: 'string',
         },
         postalCode: {
           type: 'string',
-          maxLength: 5
+          maxLength: 5,
         },
-      }
+      },
     },
     vegetarianOptions: {
       type: 'object',
       properties: {
         vegan: {
-          type: 'boolean'
+          type: 'boolean',
         },
         favoriteVegetable: {
           type: 'string',
-          enum: ['Tomato', 'Potato', 'Salad', 'Aubergine', 'Cucumber', 'Other']
+          enum: ['Tomato', 'Potato', 'Salad', 'Aubergine', 'Cucumber', 'Other'],
         },
         otherFavoriteVegetable: {
-          type: 'string'
-        }
-      }
-    }
+          type: 'string',
+        },
+      },
+    },
   },
 };
 
@@ -102,36 +102,36 @@ export const uischema = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/firstName'
+              scope: '#/properties/firstName',
             },
             {
               type: 'Control',
-              scope: '#/properties/secondName'
-            }
-          ]
+              scope: '#/properties/secondName',
+            },
+          ],
         },
         {
           type: 'HorizontalLayout',
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/birthDate'
+              scope: '#/properties/birthDate',
             },
             {
               type: 'Control',
-              scope: '#/properties/nationality'
-            }
-          ]
+              scope: '#/properties/nationality',
+            },
+          ],
         },
         {
           type: 'Control',
-          scope: '#/properties/provideAddress'
+          scope: '#/properties/provideAddress',
         },
         {
           type: 'Control',
-          scope: '#/properties/vegetarian'
-        }
-      ]
+          scope: '#/properties/vegetarian',
+        },
+      ],
     },
     {
       type: 'Category',
@@ -142,35 +142,35 @@ export const uischema = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/address/properties/street'
+              scope: '#/properties/address/properties/street',
             },
             {
               type: 'Control',
-              scope: '#/properties/address/properties/streetNumber'
+              scope: '#/properties/address/properties/streetNumber',
             },
-          ]
+          ],
         },
         {
           type: 'HorizontalLayout',
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/address/properties/city'
+              scope: '#/properties/address/properties/city',
             },
             {
               type: 'Control',
-              scope: '#/properties/address/properties/postalCode'
-            }
-          ]
+              scope: '#/properties/address/properties/postalCode',
+            },
+          ],
         },
       ],
       rule: {
         effect: 'SHOW',
         condition: {
           scope: '#/properties/provideAddress',
-          schema: { const: true }
-        }
-      }
+          schema: { const: true },
+        },
+      },
     },
     {
       type: 'Category',
@@ -178,122 +178,122 @@ export const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/vegetarianOptions/properties/vegan'
+          scope: '#/properties/vegetarianOptions/properties/vegan',
         },
         {
           type: 'Control',
-          scope: '#/properties/vegetarianOptions/properties/favoriteVegetable'
+          scope: '#/properties/vegetarianOptions/properties/favoriteVegetable',
         },
         {
           type: 'Control',
-          scope: '#/properties/vegetarianOptions/properties/otherFavoriteVegetable',
+          scope:
+            '#/properties/vegetarianOptions/properties/otherFavoriteVegetable',
           rule: {
             effect: 'SHOW',
             condition: {
-              scope: '#/properties/vegetarianOptions/properties/favoriteVegetable',
-              schema: { const: 'Other' }
-            }
-          }
+              scope:
+                '#/properties/vegetarianOptions/properties/favoriteVegetable',
+              schema: { const: 'Other' },
+            },
+          },
         },
       ],
       rule: {
         effect: 'SHOW',
         condition: {
           scope: '#/properties/vegetarian',
-          schema: { const: true }
-        }
-      }
-    }
-  ]
+          schema: { const: true },
+        },
+      },
+    },
+  ],
 };
 
 export const data = {
   provideAddress: true,
-  vegetarian: false
+  vegetarian: false,
 };
 
 const schema_1713 = {
-  "type": "object",
-  "properties": {
-    "experiments": {
-      "type": "array",
-      "items": {
-        "type": "object",
-        "properties": {
-          "ID": {
-            "type": "string"
-          }
+  type: 'object',
+  properties: {
+    experiments: {
+      type: 'array',
+      items: {
+        type: 'object',
+        properties: {
+          ID: {
+            type: 'string',
+          },
         },
-        "additionalProperties": false,
-        "additionalItems": false
-      }
-    }
+        additionalProperties: false,
+        additionalItems: false,
+      },
+    },
   },
-  "required": [
-    "experiments"
-  ]
+  required: ['experiments'],
 };
 const uischema_1713 = {
-  "type": "Categorization",
-  "elements": [
+  type: 'Categorization',
+  elements: [
     {
-      "type": "Category",
-      "label": "Experiments",
-      "elements": [
+      type: 'Category',
+      label: 'Experiments',
+      elements: [
         {
-          "type": "ListWithDetail",
-          "scope": "#/properties/experiments",
-          "options": {
-            "labelRef": "#/items/properties/ID",
-            "detail": {
-              "type": "VerticalLayout",
-              "elements": [
+          type: 'ListWithDetail',
+          scope: '#/properties/experiments',
+          options: {
+            labelRef: '#/items/properties/ID',
+            detail: {
+              type: 'VerticalLayout',
+              elements: [
                 {
-                  "type": "HorizontalLayout",
-                  "elements": [
+                  type: 'HorizontalLayout',
+                  elements: [
                     {
-                      "type": "Control",
-                      "scope": "#/properties/ID"
-                    }
-                  ]
+                      type: 'Control',
+                      scope: '#/properties/ID',
+                    },
+                  ],
                 },
                 {
-                  "type": "Categorization",
-                  "elements": [
+                  type: 'Categorization',
+                  elements: [
                     {
-                      "type": "Category",
-                      "label": "Sequential",
-                      "elements": [
+                      type: 'Category',
+                      label: 'Sequential',
+                      elements: [
                         {
-                          "type": "VerticalLayout",
-                          "elements": [
+                          type: 'VerticalLayout',
+                          elements: [
                             {
-                              "type": "Control",
-                              "scope": "#/properties/ID"
-                            }
-                          ]
-                        }
-                      ]
-                    }
-                  ]
-                }
-              ]
-            }
-          }
-        }
-      ]
-    }
-  ]
-  };
+                              type: 'Control',
+                              scope: '#/properties/ID',
+                            },
+                          ],
+                        },
+                      ],
+                    },
+                  ],
+                },
+              ],
+            },
+          },
+        },
+      ],
+    },
+  ],
+};
 
 export const translations = {
   categoryLabelKey: 'Basic',
   address: {
-    label: "Address",
+    label: 'Address',
   },
 };
 export const translate: Translator = (key: string, defaultMessage: string) => {
-  return get(translations, key) ?? defaultMessage
+  return get(translations, key) ?? defaultMessage;
 };
 
 registerExamples([
@@ -303,13 +303,13 @@ registerExamples([
     data,
     schema,
     uischema,
-    i18n: { locale: 'en', translate: translate }
+    i18n: { locale: 'en', translate: translate },
   },
   {
     name: 'categorization_1713',
     label: 'Categorization - Issue 1713',
     data,
-    schema:schema_1713,
-    uischema:uischema_1713
-  }
+    schema: schema_1713,
+    uischema: uischema_1713,
+  },
 ]);
diff --git a/packages/examples/src/examples/conditional-schema-compositions.ts b/packages/examples/src/examples/conditional-schema-compositions.ts
index 98c7b3b6f..6c9620912 100644
--- a/packages/examples/src/examples/conditional-schema-compositions.ts
+++ b/packages/examples/src/examples/conditional-schema-compositions.ts
@@ -30,7 +30,7 @@ export const schema = {
     name: {
       type: 'string',
       minLength: 1,
-      description: 'The task\'s name',
+      description: "The task's name",
     },
     recurrence: {
       type: 'string',
@@ -42,22 +42,22 @@ export const schema = {
       if: {
         properties: {
           recurrence: {
-            const: 'Never'
-          }
-        }
+            const: 'Never',
+          },
+        },
       },
       then: {
         properties: {
           lastname: {
-            type: 'string'
+            type: 'string',
           },
           age: {
-            type: 'number'
-          }
-        }
-      }
+            type: 'number',
+          },
+        },
+      },
     },
-  ]
+  ],
 };
 
 export const uischema = {
@@ -82,10 +82,10 @@ export const uischema = {
             condition: {
               scope: '#/properties/recurrence',
               schema: {
-                const: 'Never'
-              }
-            }
-          }
+                const: 'Never',
+              },
+            },
+          },
         },
         {
           type: 'Control',
@@ -95,10 +95,10 @@ export const uischema = {
             condition: {
               scope: '#/properties/recurrence',
               schema: {
-                const: 'Never'
-              }
-            }
-          }
+                const: 'Never',
+              },
+            },
+          },
         },
       ],
     },
@@ -113,6 +113,6 @@ registerExamples([
     label: 'Conditional Schema Compositions',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/config.ts b/packages/examples/src/examples/config.ts
index 3f6217229..025570156 100644
--- a/packages/examples/src/examples/config.ts
+++ b/packages/examples/src/examples/config.ts
@@ -30,14 +30,14 @@ export const schema = {
     postalCode: {
       type: 'string',
       description: 'A Postal Code',
-      maxLength: 5
+      maxLength: 5,
     },
     recurrenceInterval: {
       type: 'integer',
-      description: 'A recurrence interval'
-    }
+      description: 'A recurrence interval',
+    },
   },
-  required: ['postalCode']
+  required: ['postalCode'],
 };
 
 export const uischema = {
@@ -49,27 +49,27 @@ export const uischema = {
         {
           type: 'Control',
           scope: '#/properties/postalCode',
-          label: 'Postal Code'
+          label: 'Postal Code',
         },
         {
           type: 'Control',
           scope: '#/properties/recurrenceInterval',
-          label: 'Recurrence Interval'
-        }
-      ]
-    }
-  ]
+          label: 'Recurrence Interval',
+        },
+      ],
+    },
+  ],
 };
 
 export const data = {
-  postalCode: '12345'
+  postalCode: '12345',
 };
 
 const config = {
   restrict: true,
   trim: true,
   showUnfocusedDescription: true,
-  hideRequiredAsterisk: true
+  hideRequiredAsterisk: true,
 };
 
 registerExamples([
@@ -78,7 +78,7 @@ registerExamples([
     label: 'Configuration (Default)',
     data,
     schema,
-    uischema: uischema
+    uischema: uischema,
   },
   {
     name: 'configCustom',
@@ -86,6 +86,6 @@ registerExamples([
     data,
     schema,
     uischema,
-    config
-  }
+    config,
+  },
 ]);
diff --git a/packages/examples/src/examples/control-options.ts b/packages/examples/src/examples/control-options.ts
index 200823f7f..aec6f2f1a 100644
--- a/packages/examples/src/examples/control-options.ts
+++ b/packages/examples/src/examples/control-options.ts
@@ -25,38 +25,38 @@
 import { registerExamples } from '../register';
 
 export const schema = {
-    type: 'object',
-    properties: {
-      string: {
-        type: 'string'
-      },
-      boolean: {
-        type: 'boolean',
-        description: 'Boolean description as a tooltip'
-      },
-      number: {
-        type: 'number'
-      },
-      integer: {
-        type: 'integer'
-      },
-      date: {
-        type: 'string',
-        format: 'date'
-      },
-      time: {
-        type: 'string',
-        format: 'time'
-      },
-      dateTime: {
-        type: 'string',
-        format: 'date-time'
-      },
-      enum: {
-        type: 'string',
-        enum: ['One', 'Two', 'Three']
-      }
-    }
+  type: 'object',
+  properties: {
+    string: {
+      type: 'string',
+    },
+    boolean: {
+      type: 'boolean',
+      description: 'Boolean description as a tooltip',
+    },
+    number: {
+      type: 'number',
+    },
+    integer: {
+      type: 'integer',
+    },
+    date: {
+      type: 'string',
+      format: 'date',
+    },
+    time: {
+      type: 'string',
+      format: 'time',
+    },
+    dateTime: {
+      type: 'string',
+      format: 'date-time',
+    },
+    enum: {
+      type: 'string',
+      enum: ['One', 'Two', 'Three'],
+    },
+  },
 };
 
 export const uischema = {
@@ -64,37 +64,37 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/string'
+      scope: '#/properties/string',
     },
     {
       type: 'Control',
-      scope: '#/properties/boolean'
+      scope: '#/properties/boolean',
     },
     {
       type: 'Control',
-      scope: '#/properties/number'
+      scope: '#/properties/number',
     },
     {
       type: 'Control',
-      scope: '#/properties/integer'
+      scope: '#/properties/integer',
     },
     {
       type: 'Control',
-      scope: '#/properties/date'
+      scope: '#/properties/date',
     },
     {
       type: 'Control',
-      scope: '#/properties/time'
+      scope: '#/properties/time',
     },
     {
       type: 'Control',
-      scope: '#/properties/dateTime'
+      scope: '#/properties/dateTime',
     },
     {
       type: 'Control',
-      scope: '#/properties/enum'
-    }
-  ]
+      scope: '#/properties/enum',
+    },
+  ],
 };
 
 export const data = {
@@ -105,7 +105,7 @@ export const data = {
   date: '2020-06-25',
   time: '23:08:00',
   dateTime: '2020-06-25T23:08:42+02:00',
-  enum: 'Two'
+  enum: 'Two',
 };
 
 export const extendedSchema = {
@@ -124,16 +124,19 @@ export const extendedSchema = {
     },
     trimText: {
       type: 'string',
-      description: 'Trim indicates whether the control shall grab the full width available',
+      description:
+        'Trim indicates whether the control shall grab the full width available',
     },
     restrictText: {
       type: 'string',
       maxLength: 5,
-      description: 'Restricts the input length to the set value (in this case: 5)',
+      description:
+        'Restricts the input length to the set value (in this case: 5)',
     },
     unfocusedDescription: {
       type: 'string',
-      description: 'This description is shown even when the control is not focused',
+      description:
+        'This description is shown even when the control is not focused',
     },
     hideRequiredAsterisk: {
       type: 'string',
@@ -141,10 +144,10 @@ export const extendedSchema = {
     },
     toggle: {
       type: 'boolean',
-      description: 'The "toggle" option renders boolean values as a toggle.'
-    }
+      description: 'The "toggle" option renders boolean values as a toggle.',
+    },
   },
-  required: ['hideRequiredAsterisk', 'restrictText']
+  required: ['hideRequiredAsterisk', 'restrictText'],
 };
 
 export const extendedUischema = {
@@ -154,53 +157,53 @@ export const extendedUischema = {
       type: 'Control',
       scope: '#/properties/multilineString',
       options: {
-        multi: true
-      }
+        multi: true,
+      },
     },
     {
       type: 'Control',
       scope: '#/properties/slider',
       options: {
-        slider: true
-      }
+        slider: true,
+      },
     },
     {
       type: 'Control',
       scope: '#/properties/trimText',
       options: {
-        trim: true
-      }
+        trim: true,
+      },
     },
     {
       type: 'Control',
       scope: '#/properties/restrictText',
       options: {
-        restrict: true
-      }
+        restrict: true,
+      },
     },
     {
       type: 'Control',
       scope: '#/properties/unfocusedDescription',
       options: {
-        showUnfocusedDescription: true
-      }
+        showUnfocusedDescription: true,
+      },
     },
     {
       type: 'Control',
       scope: '#/properties/hideRequiredAsterisk',
       options: {
-        hideRequiredAsterisk: true
-      }
+        hideRequiredAsterisk: true,
+      },
     },
     {
       type: 'Control',
       scope: '#/properties/toggle',
       label: 'Boolean as Toggle',
       options: {
-        toggle: true
-      }
-    }
-  ]
+        toggle: true,
+      },
+    },
+  ],
 };
 
 export const extendedData = {
@@ -208,16 +211,16 @@ export const extendedData = {
   slider: 4,
   trimText: 'abcdefg',
   restrictText: 'abcde',
-  toggle: false
+  toggle: false,
 };
 
 const combinedSchema = {
   ...extendedSchema,
   properties: {
     ...schema.properties,
-    ...extendedSchema.properties
-  }
-}
+    ...extendedSchema.properties,
+  },
+};
 
 const combinedUiSchema = {
   type: 'Categorization',
@@ -225,24 +228,20 @@ const combinedUiSchema = {
     {
       type: 'Category',
       label: 'Normal controls',
-      elements: [
-        uischema
-      ]
+      elements: [uischema],
     },
     {
       type: 'Category',
       label: 'Configured controls',
-      elements: [
-        extendedUischema
-      ]
-    }
-  ]
-}
+      elements: [extendedUischema],
+    },
+  ],
+};
 
 const combinedData = {
   ...data,
-  ...extendedData
-}
+  ...extendedData,
+};
 
 registerExamples([
   {
@@ -250,6 +249,6 @@ registerExamples([
     label: 'Control Options',
     data: combinedData,
     schema: combinedSchema,
-    uischema: combinedUiSchema
-  }
+    uischema: combinedUiSchema,
+  },
 ]);
diff --git a/packages/examples/src/examples/dates.ts b/packages/examples/src/examples/dates.ts
index 3c71d26c4..c878cf12d 100644
--- a/packages/examples/src/examples/dates.ts
+++ b/packages/examples/src/examples/dates.ts
@@ -33,38 +33,38 @@ const schema = {
         date: {
           type: 'string',
           format: 'date',
-          description: 'schema-based date picker'
+          description: 'schema-based date picker',
         },
         time: {
           type: 'string',
           format: 'time',
-          description: 'schema-based time picker'
+          description: 'schema-based time picker',
         },
         datetime: {
           type: 'string',
           format: 'date-time',
-          description: 'schema-based datetime picker'
-        }
-      }
+          description: 'schema-based datetime picker',
+        },
+      },
     },
     uiSchemaBased: {
       type: 'object',
       properties: {
         date: {
           type: 'string',
-          description: 'does not allow to select days'
+          description: 'does not allow to select days',
         },
         time: {
           type: 'string',
-          description: '24 hour format'
+          description: '24 hour format',
         },
         datetime: {
           type: 'string',
-          description: 'uischema-based datetime picker'
-        }
-      }
-    }
-  }
+          description: 'uischema-based datetime picker',
+        },
+      },
+    },
+  },
 };
 const uischema = {
   type: 'VerticalLayout',
@@ -74,17 +74,17 @@ const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/schemaBased/properties/date'
+          scope: '#/properties/schemaBased/properties/date',
         },
         {
           type: 'Control',
-          scope: '#/properties/schemaBased/properties/time'
+          scope: '#/properties/schemaBased/properties/time',
         },
         {
           type: 'Control',
-          scope: '#/properties/schemaBased/properties/datetime'
-        }
-      ]
+          scope: '#/properties/schemaBased/properties/datetime',
+        },
+      ],
     },
     {
       type: 'HorizontalLayout',
@@ -100,7 +100,7 @@ const uischema = {
             okLabel: 'Do it',
             views: ['year', 'month'],
             dateFormat: 'YYYY.MM',
-            dateSaveFormat: 'YYYY-MM'
+            dateSaveFormat: 'YYYY-MM',
           },
         },
         {
@@ -108,8 +108,8 @@ const uischema = {
           scope: '#/properties/uiSchemaBased/properties/time',
           options: {
             format: 'time',
-            ampm: true
-          }
+            ampm: true,
+          },
         },
         {
           type: 'Control',
@@ -118,25 +118,25 @@ const uischema = {
             format: 'date-time',
             dateTimeFormat: 'DD-MM-YY hh:mm:a',
             dateTimeSaveFormat: 'YYYY/MM/DD h:mm a',
-            ampm: true
-          }
-        }
-      ]
-    }
-  ]
+            ampm: true,
+          },
+        },
+      ],
+    },
+  ],
 };
 
 const data = {
   schemaBased: {
     date: new Date().toISOString().substr(0, 10),
     time: '13:37',
-    datetime: new Date().toISOString()
+    datetime: new Date().toISOString(),
   },
   uiSchemaBased: {
     date: new Date().toISOString().substr(0, 10),
     time: '13:37',
-    datetime: '1999/12/11 10:05 am'
-  }
+    datetime: '1999/12/11 10:05 am',
+  },
 };
 registerExamples([
   {
@@ -144,6 +144,6 @@ registerExamples([
     label: 'Dates',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/default.ts b/packages/examples/src/examples/default.ts
index e737c52be..a9a53816f 100644
--- a/packages/examples/src/examples/default.ts
+++ b/packages/examples/src/examples/default.ts
@@ -29,34 +29,34 @@ export const schema = {
   properties: {
     name: {
       type: 'string',
-      default: 'foo'
+      default: 'foo',
     },
     name_noDefault: {
-      type: 'string'
+      type: 'string',
     },
     description: {
       type: 'string',
-      default: 'bar'
+      default: 'bar',
     },
     done: {
       type: 'boolean',
-      default: false
+      default: false,
     },
     rating: {
       type: 'integer',
-      default: 5
+      default: 5,
     },
     cost: {
       type: 'number',
-      default: 5.5
+      default: 5.5,
     },
     dueDate: {
       type: 'string',
       format: 'date',
-      default: '2019-04-01'
-    }
+      default: '2019-04-01',
+    },
   },
-  required: ['name', 'name_noDefault']
+  required: ['name', 'name_noDefault'],
 };
 
 export const uischema = {
@@ -64,37 +64,37 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'Control',
-      scope: '#/properties/name_noDefault'
+      scope: '#/properties/name_noDefault',
     },
     {
       type: 'Control',
       label: false,
-      scope: '#/properties/done'
+      scope: '#/properties/done',
     },
     {
       type: 'Control',
       scope: '#/properties/description',
       options: {
-        multi: true
-      }
+        multi: true,
+      },
     },
     {
       type: 'Control',
-      scope: '#/properties/rating'
+      scope: '#/properties/rating',
     },
     {
       type: 'Control',
-      scope: '#/properties/cost'
+      scope: '#/properties/cost',
     },
     {
       type: 'Control',
-      scope: '#/properties/dueDate'
-    }
-  ]
+      scope: '#/properties/dueDate',
+    },
+  ],
 };
 
 export const data = {
@@ -104,7 +104,7 @@ export const data = {
   done: true,
   rating: 1,
   cost: 3.14,
-  dueDate: '2019-05-01'
+  dueDate: '2019-05-01',
 };
 
 registerExamples([
@@ -113,6 +113,6 @@ registerExamples([
     label: 'Default',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/enum-multi.ts b/packages/examples/src/examples/enum-multi.ts
index acd98f8b9..5a7b235b4 100644
--- a/packages/examples/src/examples/enum-multi.ts
+++ b/packages/examples/src/examples/enum-multi.ts
@@ -34,19 +34,19 @@ export const schema = {
         oneOf: [
           { const: 'foo', title: 'My Foo' },
           { const: 'bar', title: 'My Bar' },
-          { const: 'foobar', title: 'My FooBar' }
-        ]
-      }
+          { const: 'foobar', title: 'My FooBar' },
+        ],
+      },
     },
     multiEnum: {
       type: 'array',
       uniqueItems: true,
       items: {
         type: 'string',
-        enum: ['foo', 'bar', 'foobar']
-      }
-    }
-  }
+        enum: ['foo', 'bar', 'foobar'],
+      },
+    },
+  },
 };
 
 export const uischema = {
@@ -54,13 +54,13 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/oneOfMultiEnum'
+      scope: '#/properties/oneOfMultiEnum',
     },
     {
       type: 'Control',
-      scope: '#/properties/multiEnum'
-    }
-  ]
+      scope: '#/properties/multiEnum',
+    },
+  ],
 };
 
 export const data = { oneOfMultiEnum: ['foo'], multiEnum: ['bar'] };
@@ -71,6 +71,6 @@ registerExamples([
     label: 'Enum - Multi selection',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/enum.ts b/packages/examples/src/examples/enum.ts
index 1b0e8301d..d58d982ca 100644
--- a/packages/examples/src/examples/enum.ts
+++ b/packages/examples/src/examples/enum.ts
@@ -29,32 +29,32 @@ export const schema = {
   properties: {
     plainEnum: {
       type: 'string',
-      enum: ['foo', 'bar']
+      enum: ['foo', 'bar'],
     },
     plainEnumSet: {
       type: 'string',
-      enum: ['foo', 'bar']
+      enum: ['foo', 'bar'],
     },
     oneOfEnum: {
-        type: 'string',
-        oneOf: [
-            {const: 'foo', title: 'Foo'},
-            {const: 'bar', title: 'Bar'},
-            {const: 'foobar', title: 'FooBar'}
-        ]
+      type: 'string',
+      oneOf: [
+        { const: 'foo', title: 'Foo' },
+        { const: 'bar', title: 'Bar' },
+        { const: 'foobar', title: 'FooBar' },
+      ],
     },
     oneOfEnumSet: {
       type: 'string',
       oneOf: [
-          {const: 'foo', title: 'Foo'},
-          {const: 'bar', title: 'Bar'},
-          {const: 'foobar', title: 'FooBar'}
-      ]
+        { const: 'foo', title: 'Foo' },
+        { const: 'bar', title: 'Bar' },
+        { const: 'foobar', title: 'FooBar' },
+      ],
     },
     constEnum: {
-      const: 'Const Value'
-    }
-  }
+      const: 'Const Value',
+    },
+  },
 };
 
 export const uischema = {
@@ -66,31 +66,31 @@ export const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/constEnum'
+          scope: '#/properties/constEnum',
         },
         {
           type: 'Control',
-          scope: '#/properties/plainEnum'
+          scope: '#/properties/plainEnum',
         },
         {
           type: 'Control',
-          scope: '#/properties/plainEnumSet'
+          scope: '#/properties/plainEnumSet',
         },
         {
           type: 'Control',
           scope: '#/properties/plainEnum',
           options: {
-            autocomplete: false
-          }
+            autocomplete: false,
+          },
         },
         {
           type: 'Control',
           scope: '#/properties/plainEnumSet',
           options: {
-            autocomplete: false
-          }
+            autocomplete: false,
+          },
         },
-      ]
+      ],
     },
     {
       type: 'Group',
@@ -98,32 +98,32 @@ export const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/oneOfEnum'
+          scope: '#/properties/oneOfEnum',
         },
         {
           type: 'Control',
-          scope: '#/properties/oneOfEnumSet'
+          scope: '#/properties/oneOfEnumSet',
         },
         {
           type: 'Control',
           scope: '#/properties/oneOfEnum',
           options: {
-            autocomplete: false
-          }
+            autocomplete: false,
+          },
         },
         {
           type: 'Control',
           scope: '#/properties/oneOfEnumSet',
           options: {
-            autocomplete: false
-          }
+            autocomplete: false,
+          },
         },
-      ]
-    }
-  ]
+      ],
+    },
+  ],
 };
 
-export const data = {plainEnumSet: 'foo', oneOfEnumSet: 'bar'};
+export const data = { plainEnumSet: 'foo', oneOfEnumSet: 'bar' };
 
 registerExamples([
   {
@@ -131,6 +131,6 @@ registerExamples([
     label: 'Enums',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/enumInArray.ts b/packages/examples/src/examples/enumInArray.ts
index 41a42a974..5b4ca1f97 100644
--- a/packages/examples/src/examples/enumInArray.ts
+++ b/packages/examples/src/examples/enumInArray.ts
@@ -7,18 +7,18 @@ export const schema = {
     properties: {
       plainEnum: {
         type: 'string',
-        enum: ['foo', 'bar']
+        enum: ['foo', 'bar'],
       },
       oneOfEnum: {
         type: 'string',
         oneOf: [
           { const: 'foo', title: 'Foo' },
           { const: 'bar', title: 'Bar' },
-          { const: 'foobar', title: 'FooBar' }
-        ]
+          { const: 'foobar', title: 'FooBar' },
+        ],
       },
-    }
-  }
+    },
+  },
 };
 
 export const uischema = {
@@ -26,9 +26,9 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#'
-    }
-  ]
+      scope: '#',
+    },
+  ],
 };
 
 export const data: any[] = [];
@@ -39,6 +39,6 @@ registerExamples([
     label: 'Array containing enums',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/generate-dynamic.ts b/packages/examples/src/examples/generate-dynamic.ts
index 1ff2950aa..a0db02723 100644
--- a/packages/examples/src/examples/generate-dynamic.ts
+++ b/packages/examples/src/examples/generate-dynamic.ts
@@ -27,15 +27,15 @@ import { registerExamples } from '../register';
 
 const actions = [
   {
-    'label': 'Change data',
-    'apply': (props: StateProps) => {
+    label: 'Change data',
+    apply: (props: StateProps) => {
       return {
         ...props,
-        data: { id: 'aaa' }
-      }
-    }
+        data: { id: 'aaa' },
+      };
+    },
   },
-]
+];
 
 registerExamples([
   {
@@ -44,6 +44,6 @@ registerExamples([
     schema: undefined,
     uischema: undefined,
     data: { name: 'bla' },
-    actions
-  }
+    actions,
+  },
 ]);
diff --git a/packages/examples/src/examples/generate.ts b/packages/examples/src/examples/generate.ts
index 8f0b19d36..db61cac72 100644
--- a/packages/examples/src/examples/generate.ts
+++ b/packages/examples/src/examples/generate.ts
@@ -36,6 +36,6 @@ registerExamples([
     label: 'Generate both Schemas',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/generateUI.ts b/packages/examples/src/examples/generateUI.ts
index 97c4863be..cd437aa9d 100644
--- a/packages/examples/src/examples/generateUI.ts
+++ b/packages/examples/src/examples/generateUI.ts
@@ -36,6 +36,6 @@ registerExamples([
     label: 'Generate UI Schema',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/huge.ts b/packages/examples/src/examples/huge.ts
index 0ece70ed7..0a9ff86ac 100644
--- a/packages/examples/src/examples/huge.ts
+++ b/packages/examples/src/examples/huge.ts
@@ -8,8 +8,8 @@ const schema = {
       enum: [
         'http://gedcomx.org/High',
         'http://gedcomx.org/Medium',
-        'http://gedcomx.org/Low'
-      ]
+        'http://gedcomx.org/Low',
+      ],
     },
     genderTypes: {
       type: 'string',
@@ -17,8 +17,8 @@ const schema = {
         'http://gedcomx.org/Male',
         'http://gedcomx.org/Female',
         'http://gedcomx.org/Unknown',
-        'http://gedcomx.org/Intersex'
-      ]
+        'http://gedcomx.org/Intersex',
+      ],
     },
     nameTypes: {
       type: 'string',
@@ -29,16 +29,16 @@ const schema = {
         'http://gedcomx.org/Nickname',
         'http://gedcomx.org/AdoptiveName',
         'http://gedcomx.org/FormalName',
-        'http://gedcomx.org/ReligiousName'
-      ]
+        'http://gedcomx.org/ReligiousName',
+      ],
     },
     namePartTypes: {
       enum: [
         'http://gedcomx.org/Prefix',
         'http://gedcomx.org/Suffix',
         'http://gedcomx.org/Given',
-        'http://gedcomx.org/Surname'
-      ]
+        'http://gedcomx.org/Surname',
+      ],
     },
     personFactTypes: {
       type: 'string',
@@ -103,25 +103,25 @@ const schema = {
         'http://gedcomx.org/Stillbirth',
         'http://gedcomx.org/Will',
         'http://gedcomx.org/Visit',
-        'http://gedcomx.org/Yahrzeit'
-      ]
+        'http://gedcomx.org/Yahrzeit',
+      ],
     },
     uri: {
-      type: 'string'
+      type: 'string',
     },
     localeTag: {
-      type: 'string'
+      type: 'string',
       //   pattern:
       //     "^(((((?'language'[a-z]{2,3})(-(?'extlang'[a-z]{3})){0,3})|(?'language'[a-z]{4})|(?'language'[a-z]{5,8}))(-(?'script'[a-z]{4}))?(-(?'region'[a-z]{2}|[0-9]{3}))?(-(?'variant'[a-z0-9]{5,8}|[0-9][a-z0-9]{3}))*(-(?'extensions'[a-z0-9-[x]](-[a-z0-9]{2,8})+))*(-x(- (?'privateuse'[a-z0-9]{1,8}))+)?)|(x(- (?'privateuse'[a-z0-9]{1,8}))+)|(?'grandfathered'(?'irregular'en-GB-oed |i-ami |i-bnn |i-default |i-enochian |i-hak |i-klingon |i-lux |i-mingo |i-navajo |i-pwn |i-tao |i-tay |i-tsu |sgn-BE-FR |sgn-BE-NL |sgn-CH-DE)|(?'regular'art-lojban |cel-gaulish |no-bok |no-nyn |zh-guoyu |zh-hakka |zh-min |zh-min-nan |zh-xiang)))$"
     },
     resourceReference: {
       type: 'object',
       properties: {
-        resource: { $ref: '#/definitions/uri' }
-      }
+        resource: { $ref: '#/definitions/uri' },
+      },
     },
     identifier: {
-      type: 'object'
+      type: 'object',
     },
     attribution: {
       title: 'Attribution',
@@ -129,129 +129,130 @@ const schema = {
         contributor: {
           $ref: '#/definitions/resourceReference',
           description:
-            'Reference to the agent to whom the attributed data is attributed.'
+            'Reference to the agent to whom the attributed data is attributed.',
         },
         modified: {
           type: 'number',
-          description: 'Timestamp of when the attributed data was contributed.'
+          description: 'Timestamp of when the attributed data was contributed.',
         },
         changeMessage: {
           type: 'string',
           description:
-            'A statement of why the attributed data is being provided by the contributor.'
+            'A statement of why the attributed data is being provided by the contributor.',
         },
         creator: {
           $ref: '#/definitions/resourceReference',
           description:
-            'Reference to the agent that created the attributed data. The creator MAY be different from the contributor if changes were made to the attributed data.'
+            'Reference to the agent that created the attributed data. The creator MAY be different from the contributor if changes were made to the attributed data.',
         },
         created: {
           type: 'number',
-          description: 'Timestamp of when the attributed data was contributed.'
-        }
-      }
+          description: 'Timestamp of when the attributed data was contributed.',
+        },
+      },
     },
     note: {
       title: 'Note',
       properties: {
         lang: {
           $ref: '#/definitions/localeTag',
-          description: 'The locale identifier for the note.'
+          description: 'The locale identifier for the note.',
         },
         subject: {
           type: 'string',
-          description: 'A subject or title for the note.'
+          description: 'A subject or title for the note.',
         },
         text: { type: 'string', description: 'The text of the note.' },
         attribution: {
           $ref: '#/definitions/attribution',
-          description: 'The attribution of this note.'
-        }
+          description: 'The attribution of this note.',
+        },
       },
-      required: ['text']
+      required: ['text'],
     },
     textValue: {
       type: 'object',
       properties: {
         lang: {
           $ref: '#/definitions/localeTag',
-          description: 'The locale identifier for the value of the text.'
+          description: 'The locale identifier for the value of the text.',
         },
-        value: { type: 'string', description: 'The text value.' }
+        value: { type: 'string', description: 'The text value.' },
       },
-      required: ['value']
+      required: ['value'],
     },
     sourceCitation: {
       type: 'object',
       properties: {
         lang: {
           $ref: '#/definitions/localeTag',
-          description: 'The locale identifier for the bibliographic metadata.'
+          description: 'The locale identifier for the bibliographic metadata.',
         },
         value: {
           type: 'string',
-          description: 'The bibliographic metadata rendered as a full citation.'
-        }
+          description:
+            'The bibliographic metadata rendered as a full citation.',
+        },
       },
-      required: ['value']
+      required: ['value'],
     },
     sourceReference: {
       title: 'SourceReference',
       properties: {
         description: {
           $ref: '#/definitions/uri',
-          description: 'Reference to a description of the target source.'
+          description: 'Reference to a description of the target source.',
         },
         descriptionId: {
           type: 'string',
-          description: 'The id of the target source.'
+          description: 'The id of the target source.',
         },
         attribution: {
           $ref: '#/definitions/attribution',
-          description: 'The attribution of this source reference.'
+          description: 'The attribution of this source reference.',
         },
         qualifiers: {
           items: { $ref: '#/definitions/sourceReferenceQualifier' },
           description:
-            'Qualifiers for the reference, used to identify specific fragments of the source that are being referenced.'
-        }
+            'Qualifiers for the reference, used to identify specific fragments of the source that are being referenced.',
+        },
       },
-      required: ['description']
+      required: ['description'],
     },
     sourceReferenceQualifier: {
       properties: {
         name: {
           anyOf: [
             { $ref: '#/definitions/sourceReferenceQualifierNames' },
-            { $ref: '#/definitions/uri' }
-          ]
+            { $ref: '#/definitions/uri' },
+          ],
         },
-        value: { type: 'string' }
+        value: { type: 'string' },
       },
-      required: ['name']
+      required: ['name'],
     },
     sourceReferenceQualifierNames: {
       enum: [
         'http://gedcomx.org/CharacterRegion',
         'http://gedcomx.org/RectangleRegion',
-        'http://gedcomx.org/TimeRegion'
-      ]
+        'http://gedcomx.org/TimeRegion',
+      ],
     },
     evidenceReference: {
       title: 'EvidenceReference',
       properties: {
         resource: { $ref: '#/definitions/uri' }, //subject
-        attribution: { $ref: '#/definitions/attribution' }
+        attribution: { $ref: '#/definitions/attribution' },
       },
-      required: ['resource']
+      required: ['resource'],
     },
     onlineAccount: {
       type: 'object',
       properties: {
         serviceHomepage: { $ref: '#/definitions/resourceReference' },
-        accountName: { type: 'string' }
+        accountName: { type: 'string' },
       },
-      required: ['serviceHomepage', 'accountName']
+      required: ['serviceHomepage', 'accountName'],
     },
     address: {
       type: 'object',
@@ -266,8 +267,8 @@ const schema = {
         street3: { type: 'string' },
         street4: { type: 'string' },
         street5: { type: 'string' },
-        street6: { type: 'string' }
-      }
+        street6: { type: 'string' },
+      },
     },
     conclusion: {
       type: 'object',
@@ -275,38 +276,38 @@ const schema = {
       properties: {
         id: {
           type: 'string',
-          description: 'An identifier for the conclusion data.'
+          description: 'An identifier for the conclusion data.',
         },
         lang: {
           $ref: '#/definitions/localeTag',
-          description: 'The locale identifier for the conclusion.'
+          description: 'The locale identifier for the conclusion.',
         },
         sources: {
           items: { $ref: '#/definitions/sourceReference' },
           description:
-            'The list of references to the sources of related to this conclusion.'
+            'The list of references to the sources of related to this conclusion.',
         },
         analysis: {
           $ref: '#/definitions/resourceReference',
           description:
-            'Reference to a document containing analysis supporting this conclusion.'
+            'Reference to a document containing analysis supporting this conclusion.',
         },
         notes: {
           items: { $ref: '#/definitions/note' },
-          description: 'A list of notes about this conclusion.'
+          description: 'A list of notes about this conclusion.',
         },
         confidence: {
           anyOf: [
             { $ref: '#/definitions/uri' },
-            { $ref: '#/definitions/confidenceTypes' }
+            { $ref: '#/definitions/confidenceTypes' },
           ],
-          description: 'Reference to a confidence level for this conclusion.'
+          description: 'Reference to a confidence level for this conclusion.',
         },
         attribution: {
           $ref: '#/definitions/attribution',
-          description: 'The attribution of this conclusion.'
-        }
-      }
+          description: 'The attribution of this conclusion.',
+        },
+      },
     },
     subject: {
       title: 'Subject',
@@ -317,25 +318,25 @@ const schema = {
             extracted: {
               type: 'boolean',
               description:
-                'Whether this subject is to be constrained as an extracted conclusion.'
+                'Whether this subject is to be constrained as an extracted conclusion.',
             },
             evidence: {
               items: { $ref: '#/definitions/evidenceReference' },
               description:
-                'References to other subjects that support this subject.'
+                'References to other subjects that support this subject.',
             },
             media: {
               items: { $ref: '#/definitions/sourceReference' },
               description:
-                'References to multimedia resources for this subject, such as photos or videos, intended to provide additional context or illustration for the subject and not considered evidence supporting the identity of the subject or its supporting conclusions.'
+                'References to multimedia resources for this subject, such as photos or videos, intended to provide additional context or illustration for the subject and not considered evidence supporting the identity of the subject or its supporting conclusions.',
             },
             identifiers: {
               $ref: '#/definitions/identifier',
-              description: 'A list of identifiers for the subject.'
-            }
-          }
-        }
-      ]
+              description: 'A list of identifiers for the subject.',
+            },
+          },
+        },
+      ],
     },
     gender: {
       allOf: [
@@ -345,14 +346,14 @@ const schema = {
             type: {
               anyOf: [
                 { $ref: '#/definitions/uri' },
-                { $ref: '#/definitions/genderTypes' }
+                { $ref: '#/definitions/genderTypes' },
               ],
-              description: 'Enumerated value identifying the gender.'
-            }
+              description: 'Enumerated value identifying the gender.',
+            },
           },
-          required: ['type']
-        }
-      ]
+          required: ['type'],
+        },
+      ],
     },
     date: {
       type: 'object',
@@ -360,16 +361,16 @@ const schema = {
         original: {
           type: 'string',
           description:
-            'The original value of the date as supplied by the contributor.'
+            'The original value of the date as supplied by the contributor.',
         },
         formal: {
           type: 'string',
           pattern:
             '^(A?[\\+-]\\d{4}(-\\d{2})?(-\\d{2})?T?(\\d{2})?(:\\d{2})?(:\\d{2})?([\\+-]\\d{2}(:\\d{2})?|Z)?)|(P(\\d{0,4}Y)?(\\d{0,4}M)?(\\d{0,4}D)?(T(\\d{0,4}H)?(\\d{0,4}M)?(\\d{0,4}S)?)?)$',
           description:
-            'The standardized formal value of the date, formatted according to the GEDCOM X Date Format specification.'
-        }
-      }
+            'The standardized formal value of the date, formatted according to the GEDCOM X Date Format specification.',
+        },
+      },
     },
     name: {
       title: 'Name',
@@ -380,25 +381,25 @@ const schema = {
             type: {
               anyOf: [
                 { $ref: '#/definitions/uri' },
-                { $ref: '#/definitions/nameTypes' }
+                { $ref: '#/definitions/nameTypes' },
               ],
-              description: 'Enumerated value identifying the name type.'
+              description: 'Enumerated value identifying the name type.',
             },
             date: {
               $ref: '#/definitions/date',
-              description: 'The date of applicability of the name.'
+              description: 'The date of applicability of the name.',
             },
             nameForms: {
               items: {
-                $ref: '#/definitions/nameForm'
+                $ref: '#/definitions/nameForm',
               },
               description:
-                "The name form(s) that best express this name, usually representations considered proper and well formed in the person's native, historical cultural context."
-            }
+                "The name form(s) that best express this name, usually representations considered proper and well formed in the person's native, historical cultural context.",
+            },
           },
-          required: ['nameForms']
-        }
-      ]
+          required: ['nameForms'],
+        },
+      ],
     },
     namePart: {
       title: 'NamePart',
@@ -408,33 +409,34 @@ const schema = {
         type: {
           anyOf: [
             { $ref: '#/definitions/uri' },
-            { $ref: '#/definitions/namePartTypes' }
+            { $ref: '#/definitions/namePartTypes' },
           ],
-          description: 'Enumerated value identifying the type of the name part.'
+          description:
+            'Enumerated value identifying the type of the name part.',
         },
         value: {
           type: 'string',
-          description: 'The term(s) from the name that make up this name part.'
+          description: 'The term(s) from the name that make up this name part.',
         },
         qualifiers: {
           items: { $ref: '#/definitions/namePartQualifier' },
           description:
-            'Qualifiers to add additional semantic meaning to the name part.'
-        }
+            'Qualifiers to add additional semantic meaning to the name part.',
+        },
       },
-      required: ['value']
+      required: ['value'],
     },
     namePartQualifier: {
       properties: {
         name: {
           anyOf: [
             { $ref: '#/definitions/namePartQualifierNames' },
-            { $ref: '#/definitions/uri' }
-          ]
+            { $ref: '#/definitions/uri' },
+          ],
         },
-        value: { type: 'string' }
+        value: { type: 'string' },
       },
-      required: ['name']
+      required: ['name'],
     },
     namePartQualifierNames: {
       enum: [
@@ -453,8 +455,8 @@ const schema = {
         'http://gedcomx.org/Characteristic', //A name derived from a characteristic. Name part qualifiers of type Characteristic SHOULD NOT provide a value.
         'http://gedcomx.org/Postnom', //A name mandated by law for populations from Congo Free State / Belgian Congo / Congo / Democratic Republic of Congo (formerly Zaire). Name part qualifiers of type Postnom SHOULD NOT provide a value.
         'http://gedcomx.org/Particle', //A grammatical designation for articles (a, the, dem, las, el, etc.), prepositions (of, from, aus, zu, op, etc.), initials, annotations (e.g. twin, wife of, infant, unknown), comparators (e.g. Junior, Senior, younger, little), ordinals (e.g. III, eighth), descendancy words (e.g. ben, ibn, bat, bin, bint, bar), and conjunctions (e.g. and, or, nee, ou, y, o, ne, &). Name part qualifiers of type Particle SHOULD NOT provide a value.
-        'http://gedcomx.org/RootName' //The "root" of a name part as distinguished from prefixes or suffixes. For example, the root of the Polish name "Wilkówna" is "Wilk". A RootName qualifier MUST provide a value property.
-      ]
+        'http://gedcomx.org/RootName', //The "root" of a name part as distinguished from prefixes or suffixes. For example, the root of the Polish name "Wilkówna" is "Wilk". A RootName qualifier MUST provide a value property.
+      ],
     },
     nameForm: {
       title: 'NameForm',
@@ -466,20 +468,20 @@ const schema = {
       properties: {
         lang: {
           $ref: '#/definitions/localeTag',
-          description: 'The locale identifier for the name form.'
+          description: 'The locale identifier for the name form.',
         },
         fullText: {
           type: 'string',
           description:
-            'A full rendering of the name (or as much of the name as is known).'
+            'A full rendering of the name (or as much of the name as is known).',
         },
         parts: {
           items: {
-            $ref: '#/definitions/namePart'
+            $ref: '#/definitions/namePart',
           },
-          description: 'Any identified name parts from the name.'
-        }
-      }
+          description: 'Any identified name parts from the name.',
+        },
+      },
     },
     fact: {
       title: 'PersonFact',
@@ -490,40 +492,40 @@ const schema = {
             type: {
               anyOf: [
                 { $ref: '#/definitions/uri' },
-                { $ref: '#/definitions/personFactTypes' }
+                { $ref: '#/definitions/personFactTypes' },
               ],
-              description: 'Enumerated value identifying the type of the fact.'
+              description: 'Enumerated value identifying the type of the fact.',
             },
             date: {
               $ref: '#/definitions/date',
-              description: 'The date of applicability of the fact.'
+              description: 'The date of applicability of the fact.',
             },
             place: {
               $ref: '#/definitions/placeReference',
-              description: 'A reference to the place applicable to this fact.'
+              description: 'A reference to the place applicable to this fact.',
             },
             value: { type: 'string', description: 'The value of the fact.' },
             qualifiers: {
               items: { $ref: '#/definitions/factQualifier' },
               description:
-                'Qualifiers to add additional details about the fact.'
-            }
+                'Qualifiers to add additional details about the fact.',
+            },
           },
-          required: ['type']
-        }
-      ]
+          required: ['type'],
+        },
+      ],
     },
     factQualifier: {
       properties: {
         name: {
           anyOf: [
             { $ref: '#/definitions/factQualifierNames' },
-            { $ref: '#/definitions/uri' }
-          ]
+            { $ref: '#/definitions/uri' },
+          ],
         },
-        value: { type: 'string' }
+        value: { type: 'string' },
       },
-      required: ['name']
+      required: ['name'],
     },
     factQualifierNames: {
       enum: [
@@ -531,8 +533,8 @@ const schema = {
         'http://gedcomx.org/Cause',
         'http://gedcomx.org/Religion',
         'http://gedcomx.org/Transport',
-        'http://gedcomx.org/NonConsensual'
-      ]
+        'http://gedcomx.org/NonConsensual',
+      ],
     },
     eventRole: {
       allOf: [
@@ -541,32 +543,33 @@ const schema = {
           properties: {
             person: {
               $ref: '#/definitions/resourceReference',
-              description: 'Reference to the event participant.'
+              description: 'Reference to the event participant.',
             },
             type: {
               anyOf: [
                 { $ref: '#/definitions/uri' },
-                { $ref: '#/definitions/eventRoleTypes' }
+                { $ref: '#/definitions/eventRoleTypes' },
               ],
               description:
-                "Enumerated value identifying the participant's role."
+                "Enumerated value identifying the participant's role.",
             },
             details: {
               type: 'string',
-              description: 'Details about the role of participant in the event.'
-            }
+              description:
+                'Details about the role of participant in the event.',
+            },
           },
-          required: ['person']
-        }
-      ]
+          required: ['person'],
+        },
+      ],
     },
     eventRoleTypes: {
       enum: [
         'http://gedcomx.org/Principal',
         'http://gedcomx.org/Participant',
         'http://gedcomx.org/Official',
-        'http://gedcomx.org/Witness'
-      ]
+        'http://gedcomx.org/Witness',
+      ],
     },
     placeReference: {
       type: 'object',
@@ -574,25 +577,25 @@ const schema = {
         original: {
           type: 'string',
           description:
-            'The original place name text as supplied by the contributor.'
+            'The original place name text as supplied by the contributor.',
         },
         description: {
           $ref: '#/definitions/uri',
-          description: 'A reference to a description of this place.'
-        }
-      }
+          description: 'A reference to a description of this place.',
+        },
+      },
     },
     coverage: {
       properties: {
         spatial: {
           $ref: '#/definitions/placeReference',
-          description: 'The spatial (i.e., geographic) coverage.'
+          description: 'The spatial (i.e., geographic) coverage.',
         },
         temporal: {
           $ref: '#/definitions/date',
-          description: 'The temporal coverage.'
-        }
-      }
+          description: 'The temporal coverage.',
+        },
+      },
     },
     groupRole: {
       allOf: [
@@ -601,26 +604,26 @@ const schema = {
           properties: {
             person: {
               $ref: '#/definitions/resourceReference',
-              description: 'Reference to the group participant.'
+              description: 'Reference to the group participant.',
             },
             type: {
               $ref: '#/definitions/uri',
               description:
-                "Enumerated value identifying the participant's role."
+                "Enumerated value identifying the participant's role.",
             },
             date: {
               $ref: '#/definitions/date',
-              description: 'The date of applicability of the role.'
+              description: 'The date of applicability of the role.',
             },
             details: {
               type: 'string',
               description:
-                'Details about the role of he participant in the group.'
-            }
+                'Details about the role of he participant in the group.',
+            },
           },
-          required: ['person']
-        }
-      ]
+          required: ['person'],
+        },
+      ],
     },
     person: {
       title: 'Person',
@@ -631,23 +634,23 @@ const schema = {
             private: {
               type: 'boolean',
               description:
-                'Whether this instance of Person has been designated for limited distribution or display.'
+                'Whether this instance of Person has been designated for limited distribution or display.',
             },
             gender: {
               $ref: '#/definitions/gender',
-              description: 'The sex of the person as assigned at birth.'
+              description: 'The sex of the person as assigned at birth.',
             },
             names: {
               items: { $ref: '#/definitions/name' },
-              description: 'The names of the person.'
+              description: 'The names of the person.',
             },
             facts: {
               items: { $ref: '#/definitions/fact' },
-              description: 'The facts of the person.'
-            }
-          }
-        }
-      ]
+              description: 'The facts of the person.',
+            },
+          },
+        },
+      ],
     },
     relationship: {
       allOf: [
@@ -657,34 +660,35 @@ const schema = {
             type: {
               anyOf: [
                 { $ref: '#/definitions/relationshipType' },
-                { $ref: '#/definitions/uri' }
+                { $ref: '#/definitions/uri' },
               ],
               description:
-                'Enumerated value identifying the type of the relationship.'
+                'Enumerated value identifying the type of the relationship.',
             },
             person1: {
               $ref: '#/definitions/resourceReference',
-              description: 'Reference to the first person in the relationship.'
+              description: 'Reference to the first person in the relationship.',
             },
             person2: {
               $ref: '#/definitions/resourceReference',
-              description: 'Reference to the second person in the relationship.'
+              description:
+                'Reference to the second person in the relationship.',
             },
             facts: {
               items: { $ref: '#/definitions/fact' },
-              description: 'The facts about the relationship.'
-            }
+              description: 'The facts about the relationship.',
+            },
           },
-          required: ['person1', 'person2']
-        }
-      ]
+          required: ['person1', 'person2'],
+        },
+      ],
     },
     relationshipType: {
       enum: [
         'http://gedcomx.org/Couple', //	A relationship of a pair of persons.
         'http://gedcomx.org/ParentChild', //	A relationship from a parent to a child.
-        'http://gedcomx.org/EnslavedBy' //	A relationship from an enslaved person to the enslaver or slaveholder of the person.
-      ]
+        'http://gedcomx.org/EnslavedBy', //	A relationship from an enslaved person to the enslaver or slaveholder of the person.
+      ],
     },
     sourceDescription: {
       title: 'SourceDescription',
@@ -692,108 +696,109 @@ const schema = {
         id: {
           type: 'string',
           description:
-            'An identifier for the data structure holding the source description data.'
+            'An identifier for the data structure holding the source description data.',
         },
         resourceType: {
           anyOf: [
             { $ref: '#/definitions/resourceTypes' },
-            { $ref: '#/definitions/uri' }
+            { $ref: '#/definitions/uri' },
           ],
           description:
-            'Enumerated value identifying the type of resource being described.'
+            'Enumerated value identifying the type of resource being described.',
         },
         citations: {
           items: { $ref: '#/definitions/sourceCitation' },
-          description: 'The citation(s) for this source.'
+          description: 'The citation(s) for this source.',
         },
         mediaType: {
           type: 'string',
           description:
-            'A hint about the media type of the resource being described.'
+            'A hint about the media type of the resource being described.',
         },
         about: {
           $ref: '#/definitions/uri',
           description:
-            'A uniform resource identifier (URI) for the resource being described.'
+            'A uniform resource identifier (URI) for the resource being described.',
         },
         mediator: {
           $ref: '#/definitions/resourceReference',
           description:
-            'A reference to the entity that mediates access to the described source.'
+            'A reference to the entity that mediates access to the described source.',
         },
         publisher: {
           $ref: '#/definitions/resourceReference',
           description:
-            'A reference to the entity responsible for making the described source available.'
+            'A reference to the entity responsible for making the described source available.',
         },
         sources: {
           items: { $ref: '#/definitions/sourceReference' },
           description:
-            'A list of references to any sources from which this source is derived.'
+            'A list of references to any sources from which this source is derived.',
         },
         analysis: {
           $ref: '#/definitions/resourceReference',
           description:
-            'A reference to a document containing analysis about this source.'
+            'A reference to a document containing analysis about this source.',
         },
         componentOf: {
           $ref: '#/definitions/sourceReference',
           description:
-            'A reference to the source that contains this source, i.e. its parent context. Used when the description of a source is not complete without the description of its parent (or containing) source.'
+            'A reference to the source that contains this source, i.e. its parent context. Used when the description of a source is not complete without the description of its parent (or containing) source.',
         },
         titles: {
           items: { $ref: '#/definitions/textValue' },
-          description: 'The display name(s) for this source.'
+          description: 'The display name(s) for this source.',
         },
         notes: {
           items: { $ref: '#/definitions/note' },
-          description: 'A list of notes about a source.'
+          description: 'A list of notes about a source.',
         },
         attribution: {
           $ref: '#/definitions/attribution',
-          description: 'The attribution of this source description.'
+          description: 'The attribution of this source description.',
         },
         rights: {
           items: { $ref: '#/definitions/resourceReference' },
-          description: 'The rights for this resource.'
+          description: 'The rights for this resource.',
         },
         coverage: {
           $ref: '#/definitions/coverage',
-          description: 'The coverage of the resource.'
+          description: 'The coverage of the resource.',
         },
         descriptions: {
           items: { $ref: '#/definitions/textValue' },
-          description: 'Human-readable descriptions of this source.'
+          description: 'Human-readable descriptions of this source.',
         },
         identifiers: {
           items: { $ref: '#/definitions/identifier' },
-          description: 'A list of identifiers for the resource being described.'
+          description:
+            'A list of identifiers for the resource being described.',
         },
         created: {
           type: 'number',
           description:
-            'Timestamp of when the resource being described was created.'
+            'Timestamp of when the resource being described was created.',
         },
         modified: {
           type: 'number',
           description:
-            'Timestamp of when the resource being described was modified.'
+            'Timestamp of when the resource being described was modified.',
         },
         repository: {
           $ref: '#/definitions/resourceReference',
           description:
-            'A reference to the repository that contains the described resource.'
-        }
+            'A reference to the repository that contains the described resource.',
+        },
       },
-      required: ['citations']
+      required: ['citations'],
     },
     resourceTypes: {
       enum: [
         'http://gedcomx.org/Collection', //A collection of genealogical resources. A collection may contain physical artifacts (such as a collection of books in a library), records (such as the 1940 U.S. Census), or digital artifacts (such as an online genealogical application).
         'http://gedcomx.org/PhysicalArtifact', //A physical artifact, such as a book.
         'http://gedcomx.org/DigitalArtifact', //A digital artifact, such as a digital image of a birth certificate or other record.
-        'http://gedcomx.org/Record' //A historical record, such as a census record or a vital record.
-      ]
+        'http://gedcomx.org/Record', //A historical record, such as a census record or a vital record.
+      ],
     },
     agent: {
       title: 'Agent',
@@ -801,34 +806,34 @@ const schema = {
         id: { type: 'string' },
         identifiers: {
           type: 'array',
-          items: { $ref: '#/definitions/identifier' }
+          items: { $ref: '#/definitions/identifier' },
         },
         names: {
           type: 'array',
-          items: { $ref: '#/definitions/textValue' }
+          items: { $ref: '#/definitions/textValue' },
         },
         homepage: { $ref: '#/definitions/resourceReference' },
         openid: { $ref: '#/definitions/resourceReference' },
         accounts: {
           type: 'array',
-          items: { $ref: '#/definitions/onlineAccount' }
+          items: { $ref: '#/definitions/onlineAccount' },
         },
         emails: {
           type: 'array',
-          items: { $ref: '#/definitions/resourceReference' }
+          items: { $ref: '#/definitions/resourceReference' },
         },
         phones: {
           type: 'array',
-          items: { $ref: '#/definitions/resourceReference' }
+          items: { $ref: '#/definitions/resourceReference' },
         },
         addresses: {
           type: 'array',
-          items: { $ref: '#/definitions/address' }
+          items: { $ref: '#/definitions/address' },
         },
         person: {
-          $ref: '#/definitions/resourceReference'
-        }
-      }
+          $ref: '#/definitions/resourceReference',
+        },
+      },
     },
     event: {
       allOf: [
@@ -838,18 +843,18 @@ const schema = {
             type: {
               anyOf: [
                 { $ref: '#/definitions/eventTypes' },
-                { $ref: '#/definitions/uri' }
-              ]
+                { $ref: '#/definitions/uri' },
+              ],
             },
             date: { $ref: '#/definitions/date' },
             place: { $ref: '#/definitions/placeReference' },
             roles: {
               type: 'array',
-              items: { $ref: '#/definitions/eventRole' }
-            }
-          }
-        }
-      ]
+              items: { $ref: '#/definitions/eventRole' },
+            },
+          },
+        },
+      ],
     },
     eventTypes: {
       enum: [
@@ -886,8 +891,8 @@ const schema = {
         'http://gedcomx.org/MoveTo', //An event of a move (i.e. change of residence) to a location.
         'http://gedcomx.org/Naturalization', //A naturalization event (i.e. acquisition of citizenship and nationality).
         'http://gedcomx.org/Ordination', //An ordination event.
-        'http://gedcomx.org/Retirement' //A retirement event.
-      ]
+        'http://gedcomx.org/Retirement', //A retirement event.
+      ],
     },
     document: {
       title: 'Document',
@@ -898,25 +903,25 @@ const schema = {
             type: {
               anyOf: [
                 { $ref: '#/definitions/documentTypes' },
-                { $ref: '#/definitions/uri' }
-              ]
+                { $ref: '#/definitions/uri' },
+              ],
             },
             extracted: { type: 'boolean' },
             textType: { type: 'string' },
             text: { type: 'string' },
-            attribution: { $ref: '#/definitions/attribution' }
+            attribution: { $ref: '#/definitions/attribution' },
           },
-          required: ['text']
-        }
-      ]
+          required: ['text'],
+        },
+      ],
     },
     documentTypes: {
       enum: [
         'http://gedcomx.org/Abstract', //The document is an abstract of a record or document.
         'http://gedcomx.org/Transcription', //The document is a transcription of a record or document.
         'http://gedcomx.org/Translation', //The document is a translation of a record or document.
-        'http://gedcomx.org/Analysis' //The document is an analysis done by a researcher; a genealogical proof statement is an example of one kind of analysis document.
-      ]
+        'http://gedcomx.org/Analysis', //The document is an analysis done by a researcher; a genealogical proof statement is an example of one kind of analysis document.
+      ],
     },
     placeDescription: {
       title: 'PlaceDescription',
@@ -925,21 +930,21 @@ const schema = {
         {
           properties: {
             names: {
-              items: { $ref: '#/definitions/textValue' }
+              items: { $ref: '#/definitions/textValue' },
             },
             type: { $ref: '#/definitions/uri' },
             place: { $ref: '#/definitions/resourceReference' },
             jurisdiction: {
-              $ref: '#/definitions/resourceReference'
+              $ref: '#/definitions/resourceReference',
             },
             latitude: { type: 'number' },
             longitude: { type: 'number' },
             temporalDescription: { $ref: '#/definitions/date' },
-            spatialDescription: { $ref: '#/definitions/resourceReference' }
+            spatialDescription: { $ref: '#/definitions/resourceReference' },
           },
-          required: ['names']
-        }
-      ]
+          required: ['names'],
+        },
+      ],
     },
     group: {
       allOf: [
@@ -948,68 +953,68 @@ const schema = {
           properties: {
             names: {
               type: 'array',
-              items: { $ref: '#/definitions/textValue' }
+              items: { $ref: '#/definitions/textValue' },
             },
             date: { $ref: '#/definitions/date' },
             place: { $ref: '#/definitions/resourceReference' },
             roles: {
               type: 'array',
-              items: { $ref: '#/definitions/groupRole' }
-            }
+              items: { $ref: '#/definitions/groupRole' },
+            },
           },
-          required: ['names']
-        }
-      ]
-    }
+          required: ['names'],
+        },
+      ],
+    },
   },
 
   type: 'object',
   properties: {
     persons: {
       type: 'array',
-      items: { $ref: '#/definitions/person' }
+      items: { $ref: '#/definitions/person' },
     },
     relationships: {
       type: 'array',
-      items: { $ref: '#/definitions/relationship' }
+      items: { $ref: '#/definitions/relationship' },
     },
     sourceDescriptions: {
       type: 'array',
-      items: { $ref: '#/definitions/sourceDescription' }
+      items: { $ref: '#/definitions/sourceDescription' },
     },
     agents: {
       type: 'array',
-      items: { $ref: '#/definitions/agent' }
+      items: { $ref: '#/definitions/agent' },
     },
     events: {
       type: 'array',
-      items: { $ref: '#/definitions/event' }
+      items: { $ref: '#/definitions/event' },
     },
     documents: {
       type: 'array',
-      items: { $ref: '#/definitions/document' }
+      items: { $ref: '#/definitions/document' },
     },
     places: {
       type: 'array',
-      items: { $ref: '#/definitions/placeDescription' }
+      items: { $ref: '#/definitions/placeDescription' },
     },
     groups: {
       type: 'array',
-      items: { $ref: '#/definitions/group' }
+      items: { $ref: '#/definitions/group' },
     },
     description: { $ref: '#/definitions/uri' },
     id: { type: 'string' },
     lang: { $ref: '#/definitions/localeTag' },
-    attribution: { $ref: '#/definitions/attribution' }
-  }
+    attribution: { $ref: '#/definitions/attribution' },
+  },
 };
 
 const data: any = {
   attribution: {
     contributor: {
-      resource: '#A-1'
+      resource: '#A-1',
     },
-    modified: 1398405600000
+    modified: 1398405600000,
   },
   persons: [
     {
@@ -1017,150 +1022,150 @@ const data: any = {
         {
           nameForms: [
             {
-              fullText: 'Samuel Ham'
-            }
-          ]
-        }
+              fullText: 'Samuel Ham',
+            },
+          ],
+        },
       ],
       gender: {
-        type: 'http://gedcomx.org/Male'
+        type: 'http://gedcomx.org/Male',
       },
       facts: [
         {
           type: 'http://gedcomx.org/Residence',
           date: {
             original: '3 November 1828',
-            formal: '+1828-11-03'
+            formal: '+1828-11-03',
           },
           place: {
-            original: 'parish of Honiton, Devon, England'
-          }
-        }
+            original: 'parish of Honiton, Devon, England',
+          },
+        },
       ],
       extracted: true,
       sources: [
         {
-          description: '#S-2'
-        }
+          description: '#S-2',
+        },
       ],
-      id: 'P-1'
+      id: 'P-1',
     },
     {
       names: [
         {
           nameForms: [
             {
-              fullText: 'Elizabeth Spiller'
-            }
-          ]
-        }
+              fullText: 'Elizabeth Spiller',
+            },
+          ],
+        },
       ],
       gender: {
-        type: 'http://gedcomx.org/Female'
+        type: 'http://gedcomx.org/Female',
       },
       facts: [
         {
           type: 'http://gedcomx.org/Residence',
           date: {
             original: '3 November 1828',
-            formal: '+1828-11-03'
+            formal: '+1828-11-03',
           },
           place: {
-            original: 'parish of Wilton, Somerset, England'
-          }
-        }
+            original: 'parish of Wilton, Somerset, England',
+          },
+        },
       ],
       extracted: true,
       sources: [
         {
-          description: '#S-2'
-        }
+          description: '#S-2',
+        },
       ],
-      id: 'P-2'
+      id: 'P-2',
     },
     {
       names: [
         {
           nameForms: [
             {
-              fullText: 'Jno. Pain'
-            }
-          ]
-        }
+              fullText: 'Jno. Pain',
+            },
+          ],
+        },
       ],
       extracted: true,
       sources: [
         {
-          description: '#S-2'
-        }
+          description: '#S-2',
+        },
       ],
-      id: 'P-3'
+      id: 'P-3',
     },
     {
       names: [
         {
           nameForms: [
             {
-              fullText: 'R.G. Halls'
-            }
-          ]
-        }
+              fullText: 'R.G. Halls',
+            },
+          ],
+        },
       ],
       extracted: true,
       sources: [
         {
-          description: '#S-2'
-        }
+          description: '#S-2',
+        },
       ],
-      id: 'P-4'
+      id: 'P-4',
     },
     {
       names: [
         {
           nameForms: [
             {
-              fullText: 'Peggy Hammet'
-            }
-          ]
-        }
+              fullText: 'Peggy Hammet',
+            },
+          ],
+        },
       ],
       extracted: true,
       sources: [
         {
-          description: '#S-2'
-        }
+          description: '#S-2',
+        },
       ],
-      id: 'P-5'
+      id: 'P-5',
     },
     {
       names: [
         {
           nameForms: [
             {
-              fullText: 'David Smith Stone'
-            }
-          ]
-        }
+              fullText: 'David Smith Stone',
+            },
+          ],
+        },
       ],
       extracted: true,
       sources: [
         {
-          description: '#S-2'
-        }
+          description: '#S-2',
+        },
       ],
-      id: 'P-6'
+      id: 'P-6',
     },
     {
       evidence: [
         {
-          resource: '#P-1'
-        }
+          resource: '#P-1',
+        },
       ],
       analysis: {
-        resource: '#D-2'
+        resource: '#D-2',
       },
-      id: 'C-1'
-    }
+      id: 'C-1',
+    },
   ],
   relationships: [
     {
@@ -1171,175 +1176,174 @@ const data: any = {
           type: 'http://gedcomx.org/Marriage',
           date: {
             original: '3 November 1828',
-            formal: '+1828-11-03'
+            formal: '+1828-11-03',
           },
           place: {
-            original: 'Wilton St George, Wilton, Somerset, England'
-          }
-        }
+            original: 'Wilton St George, Wilton, Somerset, England',
+          },
+        },
       ],
       person1: {
-        resource: '#P-1'
+        resource: '#P-1',
       },
       person2: {
-        resource: '#P-2'
-      }
-    }
+        resource: '#P-2',
+      },
+    },
   ],
   sourceDescriptions: [
     {
       description: [
         {
           value:
-            'Marriage entry for Samuel Ham and Elizabeth in a copy of the registers of the baptisms, marriages, and burials at the church of St. George in the parish of Wilton : adjoining Taunton, in the county of Somerset from A.D. 1558 to A.D. 1837.'
-        }
+            'Marriage entry for Samuel Ham and Elizabeth in a copy of the registers of the baptisms, marriages, and burials at the church of St. George in the parish of Wilton : adjoining Taunton, in the county of Somerset from A.D. 1558 to A.D. 1837.',
+        },
       ],
       resourceType: 'http://gedcomx.org/PhysicalArtifact',
       citations: [
         {
           value:
-            'Joseph Houghton Spencer, transcriber, Church of England, Parish Church of Wilton (Somerset). A copy of the registers of the baptisms, marriages, and burials at the church of St. George in the parish of Wilton : adjoining Taunton, in the county of Somerset from A.D. 1558 to A.D. 1837; Marriage entry for Samuel Ham and Elizabeth Spiller (3 November 1828), (Taunton: Barnicott, 1890), p. 224, No. 86.'
-        }
+            'Joseph Houghton Spencer, transcriber, Church of England, Parish Church of Wilton (Somerset). A copy of the registers of the baptisms, marriages, and burials at the church of St. George in the parish of Wilton : adjoining Taunton, in the county of Somerset from A.D. 1558 to A.D. 1837; Marriage entry for Samuel Ham and Elizabeth Spiller (3 November 1828), (Taunton: Barnicott, 1890), p. 224, No. 86.',
+        },
       ],
       titles: [
         {
           value:
-            'Marriage entry for Samuel Ham and Elizabeth Spiller, Parish Register, Wilton, Somerset, England'
-        }
+            'Marriage entry for Samuel Ham and Elizabeth Spiller, Parish Register, Wilton, Somerset, England',
+        },
       ],
       repository: {
-        resource: '#A-2'
+        resource: '#A-2',
       },
-      id: 'S-1'
+      id: 'S-1',
     },
     {
       description: [
         {
           value:
-            'Transcription of marriage entry for Samuel Ham and Elizabeth in a copy of the registers of the baptisms, marriages, and burials at the church of St. George in the parish of Wilton : adjoining Taunton, in the county of Somerset from A.D. 1558 to A.D. 1837.'
-        }
+            'Transcription of marriage entry for Samuel Ham and Elizabeth in a copy of the registers of the baptisms, marriages, and burials at the church of St. George in the parish of Wilton : adjoining Taunton, in the county of Somerset from A.D. 1558 to A.D. 1837.',
+        },
       ],
       sources: [
         {
-          description: '#S-1'
-        }
+          description: '#S-1',
+        },
       ],
       resourceType: 'http://gedcomx.org/DigitalArtifact',
       citations: [
         {
           value:
-            'Joseph Houghton Spencer, transcriber, Church of England, Parish Church of Wilton (Somerset). A copy of the registers of the baptisms, marriages, and burials at the church of St. George in the parish of Wilton : adjoining Taunton, in the county of Somerset from A.D. 1558 to A.D. 1837; Marriage entry for Samuel Ham and Elizabeth Spiller (3 November 1828), (Taunton: Barnicott, 1890), p. 224, No. 86.'
-        }
+            'Joseph Houghton Spencer, transcriber, Church of England, Parish Church of Wilton (Somerset). A copy of the registers of the baptisms, marriages, and burials at the church of St. George in the parish of Wilton : adjoining Taunton, in the county of Somerset from A.D. 1558 to A.D. 1837; Marriage entry for Samuel Ham and Elizabeth Spiller (3 November 1828), (Taunton: Barnicott, 1890), p. 224, No. 86.',
+        },
       ],
       about: '#D-1',
       titles: [
         {
           value:
-            'Transcription of marriage entry for Samuel Ham and Elizabeth Spiller, Parish Register, Wilton, Somerset, England'
-        }
+            'Transcription of marriage entry for Samuel Ham and Elizabeth Spiller, Parish Register, Wilton, Somerset, England',
+        },
       ],
-      id: 'S-2'
-    }
+      id: 'S-2',
+    },
   ],
   agents: [
     {
       names: [
         {
-          value: 'Jane Doe'
-        }
+          value: 'Jane Doe',
+        },
       ],
       emails: [
         {
-          resource: 'mailto:example@example.org'
-        }
+          resource: 'mailto:example@example.org',
+        },
       ],
-      id: 'A-1'
+      id: 'A-1',
     },
     {
       names: [
         {
-          value: 'Family History Library'
-        }
+          value: 'Family History Library',
+        },
       ],
       addresses: [
         {
           city: 'Salt Lake City',
-          stateOrProvince: 'Utah'
-        }
+          stateOrProvince: 'Utah',
+        },
       ],
-      id: 'A-2'
-    }
+      id: 'A-2',
+    },
   ],
   events: [
     {
       type: 'http://gedcomx.org/Marriage',
       date: {
         original: '3 November 1828',
-        formal: '+1828-11-03'
+        formal: '+1828-11-03',
       },
       place: {
-        original: 'Wilton St George, Wilton, Somerset, England'
+        original: 'Wilton St George, Wilton, Somerset, England',
       },
       roles: [
         {
           type: 'http://gedcomx.org/Principal',
           person: {
-            resource: '#P-1'
-          }
+            resource: '#P-1',
+          },
         },
         {
           type: 'http://gedcomx.org/Principal',
           person: {
-            resource: '#P-2'
-          }
+            resource: '#P-2',
+          },
         },
         {
           type: 'http://gedcomx.org/Witness',
           person: {
-            resource: '#P-3'
-          }
+            resource: '#P-3',
+          },
         },
         {
           type: 'http://gedcomx.org/Witness',
           person: {
-            resource: '#P-4'
-          }
+            resource: '#P-4',
+          },
         },
         {
           type: 'http://gedcomx.org/Witness',
           person: {
-            resource: '#P-5'
-          }
+            resource: '#P-5',
+          },
         },
         {
           type: 'http://gedcomx.org/Official',
           person: {
-            resource: '#P-6'
-          }
-        }
+            resource: '#P-6',
+          },
+        },
       ],
       extracted: true,
-      id: 'E-1'
-    }
+      id: 'E-1',
+    },
   ],
   documents: [
     {
       type: 'http://gedcomx.org/Transcription',
-      text:
-        'Samuel Ham of the parish of Honiton and Elizabeth Spiller\nwere married this 3rd day of November 1828 by David Smith\nStone, Pl Curate,\nIn the Presence of\nJno Pain.\nR.G. Halls.  Peggy Hammet.\nNo. 86.',
+      text: 'Samuel Ham of the parish of Honiton and Elizabeth Spiller\nwere married this 3rd day of November 1828 by David Smith\nStone, Pl Curate,\nIn the Presence of\nJno Pain.\nR.G. Halls.  Peggy Hammet.\nNo. 86.',
       sources: [
         {
-          description: '#S-1'
-        }
+          description: '#S-1',
+        },
       ],
       lang: 'en',
-      id: 'D-1'
+      id: 'D-1',
     },
     {
       text: '...Jane Doe`s analysis document...',
-      id: 'D-2'
-    }
-  ]
+      id: 'D-2',
+    },
+  ],
 };
 
 export const uischema: any = {
@@ -1348,41 +1352,41 @@ export const uischema: any = {
     {
       type: 'Category',
       label: 'Persons',
-      elements: [{ type: 'ListWithDetail', scope: '#/properties/persons' }]
+      elements: [{ type: 'ListWithDetail', scope: '#/properties/persons' }],
     },
     {
       type: 'Category',
       label: 'Relationships',
       elements: [
-        { type: 'ListWithDetail', scope: '#/properties/relationships' }
-      ]
+        { type: 'ListWithDetail', scope: '#/properties/relationships' },
+      ],
     },
     {
       type: 'Category',
       label: 'SourceDescriptions',
       elements: [
-        { type: 'ListWithDetail', scope: '#/properties/sourceDescriptions' }
-      ]
+        { type: 'ListWithDetail', scope: '#/properties/sourceDescriptions' },
+      ],
     },
     {
       type: 'Category',
       label: 'Agents',
-      elements: [{ type: 'ListWithDetail', scope: '#/properties/agents' }]
+      elements: [{ type: 'ListWithDetail', scope: '#/properties/agents' }],
     },
     {
       type: 'Category',
       label: 'Events',
-      elements: [{ type: 'ListWithDetail', scope: '#/properties/events' }]
+      elements: [{ type: 'ListWithDetail', scope: '#/properties/events' }],
     },
     {
       type: 'Category',
       label: 'Documents',
-      elements: [{ type: 'ListWithDetail', scope: '#/properties/documents' }]
+      elements: [{ type: 'ListWithDetail', scope: '#/properties/documents' }],
     },
     {
       type: 'Category',
       label: 'Places',
-      elements: [{ type: 'ListWithDetail', scope: '#/properties/places' }]
+      elements: [{ type: 'ListWithDetail', scope: '#/properties/places' }],
     },
     {
       type: 'Category',
@@ -1391,10 +1395,10 @@ export const uischema: any = {
         { type: 'Control', scope: '#/properties/description' },
         { type: 'Control', scope: '#/properties/lang' },
         { type: 'Control', scope: '#/properties/attribution' },
-        { type: 'Control', scope: '#/properties/id' }
-      ]
-    }
-  ]
+        { type: 'Control', scope: '#/properties/id' },
+      ],
+    },
+  ],
 };
 
 registerExamples([
@@ -1403,6 +1407,6 @@ registerExamples([
     label: 'Huge Test',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/i18n.ts b/packages/examples/src/examples/i18n.ts
index 3dbd2b600..7f891c262 100644
--- a/packages/examples/src/examples/i18n.ts
+++ b/packages/examples/src/examples/i18n.ts
@@ -24,20 +24,27 @@
 */
 import { registerExamples } from '../register';
 import { personCoreSchema } from './person';
-import { JsonFormsCore, updateErrors, AnyAction, Dispatch, Translator } from '@jsonforms/core';
+import {
+  JsonFormsCore,
+  updateErrors,
+  AnyAction,
+  Dispatch,
+  Translator,
+} from '@jsonforms/core';
 import get from 'lodash/get';
 const localize = require('ajv-i18n');
 
-export const onChange = (dispatch: Dispatch<AnyAction>) => (
-  extensionState: any
-) => ({ errors }: Pick<JsonFormsCore, 'data' | 'errors'>) => {
-  if (!extensionState) {
-    return;
-  }
-  const localiseFunc = localize[extensionState.locale.split('-')[0]];
-  localiseFunc(errors);
-  dispatch(updateErrors(errors));
-};
+export const onChange =
+  (dispatch: Dispatch<AnyAction>) =>
+  (extensionState: any) =>
+  ({ errors }: Pick<JsonFormsCore, 'data' | 'errors'>) => {
+    if (!extensionState) {
+      return;
+    }
+    const localiseFunc = localize[extensionState.locale.split('-')[0]];
+    localiseFunc(errors);
+    dispatch(updateErrors(errors));
+  };
 
 export const uischema = {
   type: 'VerticalLayout',
@@ -48,13 +55,13 @@ export const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/name'
+          scope: '#/properties/name',
         },
         {
           type: 'Control',
-          scope: '#/properties/birthDate'
-        }
-      ]
+          scope: '#/properties/birthDate',
+        },
+      ],
     },
     {
       type: 'Label',
@@ -65,31 +72,31 @@ export const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/nationality'
+          scope: '#/properties/nationality',
         },
         {
           type: 'Control',
-          scope: '#/properties/vegetarian'
-        }
-      ]
-    }
-  ]
+          scope: '#/properties/vegetarian',
+        },
+      ],
+    },
+  ],
 };
 
 export const data = {
   vegetarian: false,
   birthDate: '1985-06-02',
   personalData: {
-    age: 34
+    age: 34,
   },
-  postalCode: '12345'
+  postalCode: '12345',
 };
 
 export const translations = {
   basicInfoGroup: {
-    label: 'Basic Information'
+    label: 'Basic Information',
   },
-  additionalInformationLabel: 'Additional Information'
+  additionalInformationLabel: 'Additional Information',
 };
 export const translate: Translator = (key: string, defaultMessage: string) => {
   return get(translations, key) ?? defaultMessage;
@@ -104,7 +111,7 @@ registerExamples([
     uischema,
     i18n: {
       translate: translate,
-      locale: 'en'
-    }
-  }
+      locale: 'en',
+    },
+  },
 ]);
diff --git a/packages/examples/src/examples/if_then_else.ts b/packages/examples/src/examples/if_then_else.ts
index c8f5e7de0..da9c525a9 100644
--- a/packages/examples/src/examples/if_then_else.ts
+++ b/packages/examples/src/examples/if_then_else.ts
@@ -29,10 +29,10 @@ export const schema = {
   type: 'object',
   properties: {
     b: { type: 'boolean' },
-    c: { type: 'string', minLength: 1 }
+    c: { type: 'string', minLength: 1 },
   },
   if: { properties: { b: { enum: [false] } } },
-  then: { required: ['c'] }
+  then: { required: ['c'] },
 };
 
 export const uischema: UISchemaElement = undefined;
@@ -45,6 +45,6 @@ registerExamples([
     label: 'If Then Else',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/layout.ts b/packages/examples/src/examples/layout.ts
index 99c4aa6f2..4f717cff2 100644
--- a/packages/examples/src/examples/layout.ts
+++ b/packages/examples/src/examples/layout.ts
@@ -33,14 +33,14 @@ export const uischemaVertical = {
     {
       type: 'Control',
       label: 'Name',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'Control',
       label: 'Birth Date',
-      scope: '#/properties/birthDate'
-    }
-  ]
+      scope: '#/properties/birthDate',
+    },
+  ],
 };
 export const uischemaHorizontal = {
   type: 'HorizontalLayout',
@@ -48,14 +48,14 @@ export const uischemaHorizontal = {
     {
       type: 'Control',
       label: 'Name',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'Control',
       label: 'Birth Date',
-      scope: '#/properties/birthDate'
-    }
-  ]
+      scope: '#/properties/birthDate',
+    },
+  ],
 };
 export const uischemaGroup = {
   type: 'Group',
@@ -64,14 +64,14 @@ export const uischemaGroup = {
     {
       type: 'Control',
       label: 'Name',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'Control',
       label: 'Birth Date',
-      scope: '#/properties/birthDate'
-    }
-  ]
+      scope: '#/properties/birthDate',
+    },
+  ],
 };
 export const uischemaComplex = {
   type: 'Group',
@@ -86,14 +86,14 @@ export const uischemaComplex = {
             {
               type: 'Control',
               label: 'Name',
-              scope: '#/properties/name'
+              scope: '#/properties/name',
             },
             {
               type: 'Control',
               label: 'Birth Date',
-              scope: '#/properties/birthDate'
-            }
-          ]
+              scope: '#/properties/birthDate',
+            },
+          ],
         },
         {
           type: 'VerticalLayout',
@@ -101,18 +101,18 @@ export const uischemaComplex = {
             {
               type: 'Control',
               label: 'Name',
-              scope: '#/properties/name'
+              scope: '#/properties/name',
             },
             {
               type: 'Control',
               label: 'Birth Date',
-              scope: '#/properties/birthDate'
-            }
-          ]
-        }
-      ]
-    }
-  ]
+              scope: '#/properties/birthDate',
+            },
+          ],
+        },
+      ],
+    },
+  ],
 };
 export const data = personData;
 
@@ -122,27 +122,27 @@ registerExamples([
     label: 'Layout Vertical',
     data,
     schema,
-    uischema: uischemaVertical
+    uischema: uischemaVertical,
   },
   {
     name: 'layout-horizontal',
     label: 'Layout Horizontal',
     data,
     schema,
-    uischema: uischemaHorizontal
+    uischema: uischemaHorizontal,
   },
   {
     name: 'layout-group',
     label: 'Layout Group',
     data,
     schema,
-    uischema: uischemaGroup
+    uischema: uischemaGroup,
   },
   {
     name: 'layout-complex',
     label: 'Layout Complex',
     data,
     schema,
-    uischema: uischemaComplex
-  }
+    uischema: uischemaComplex,
+  },
 ]);
diff --git a/packages/examples/src/examples/list-with-detail-primitives.ts b/packages/examples/src/examples/list-with-detail-primitives.ts
index 93ebb01d0..720ce1482 100644
--- a/packages/examples/src/examples/list-with-detail-primitives.ts
+++ b/packages/examples/src/examples/list-with-detail-primitives.ts
@@ -25,59 +25,59 @@
 import { registerExamples } from '../register';
 
 const data = {
-    'an-array-of-strings': ['foo', 'bar', 'foobar']
+  'an-array-of-strings': ['foo', 'bar', 'foobar'],
 };
 const schema = {
-    type: 'object',
-    properties: {
-        'an-array-of-strings': {
-            type: 'array',
-            items: {
-                type: 'string'
-            }
-        }
-    }
+  type: 'object',
+  properties: {
+    'an-array-of-strings': {
+      type: 'array',
+      items: {
+        type: 'string',
+      },
+    },
+  },
 };
 const uischema = {
-    "type": "ListWithDetail",
-    "scope": "#/properties/an-array-of-strings"
+  type: 'ListWithDetail',
+  scope: '#/properties/an-array-of-strings',
 };
 
 registerExamples([
-    {
-        name: 'list-with-detail-primitive-string',
-        label: 'List With Detail primitive (string)',
-        data,
-        schema,
-        uischema
-    }
+  {
+    name: 'list-with-detail-primitive-string',
+    label: 'List With Detail primitive (string)',
+    data,
+    schema,
+    uischema,
+  },
 ]);
 
 const data_number = {
-    'an-array-of-numbers': [1, 2, 3]
+  'an-array-of-numbers': [1, 2, 3],
 };
 const schema_number = {
-    type: 'object',
-    properties: {
-        'an-array-of-numbers': {
-            type: 'array',
-            items: {
-                type: 'number'
-            }
-        }
-    }
+  type: 'object',
+  properties: {
+    'an-array-of-numbers': {
+      type: 'array',
+      items: {
+        type: 'number',
+      },
+    },
+  },
 };
 const uischema_number = {
-    "type": "ListWithDetail",
-    "scope": "#/properties/an-array-of-numbers"
+  type: 'ListWithDetail',
+  scope: '#/properties/an-array-of-numbers',
 };
 
 registerExamples([
-    {
-        name: 'list-with-detail-primitive-number',
-        label: 'List With Detail primitive (number)',
-        data: data_number,
-        schema: schema_number,
-        uischema: uischema_number
-    }
-]);
\ No newline at end of file
+  {
+    name: 'list-with-detail-primitive-number',
+    label: 'List With Detail primitive (number)',
+    data: data_number,
+    schema: schema_number,
+    uischema: uischema_number,
+  },
+]);
diff --git a/packages/examples/src/examples/list-with-detail-registered.ts b/packages/examples/src/examples/list-with-detail-registered.ts
index 8a2e5946c..c06fbe1ef 100644
--- a/packages/examples/src/examples/list-with-detail-registered.ts
+++ b/packages/examples/src/examples/list-with-detail-registered.ts
@@ -30,27 +30,27 @@ const data = {
       name: 'Fantasy Book',
       buyer: {
         email: 'buyerA@info.org',
-        age: 18
+        age: 18,
       },
-      status: 'warehouse'
+      status: 'warehouse',
     },
     {
       name: 'Boardgame',
       buyer: {
         email: 'buyerB@info.org',
-        age: 45
+        age: 45,
       },
-      status: 'shipping'
+      status: 'shipping',
     },
     {
       name: 'Energy Drink',
       buyer: {
         email: 'buyerC@info.org',
-        age: 90
+        age: 90,
       },
-      status: 'delivered'
-    }
-  ]
+      status: 'delivered',
+    },
+  ],
 };
 
 const schema = {
@@ -63,35 +63,35 @@ const schema = {
           type: 'object',
           properties: {
             email: { type: 'string', format: 'email' },
-            age: { type: 'number' }
-          }
+            age: { type: 'number' },
+          },
         },
         status: {
           type: 'string',
-          enum: ['warehouse', 'shipping', 'delivered']
-        }
+          enum: ['warehouse', 'shipping', 'delivered'],
+        },
       },
-      required: ['name']
-    }
+      required: ['name'],
+    },
   },
   type: 'object',
   properties: {
     warehouseitems: {
       type: 'array',
       items: {
-        $ref: '#/definitions/warehouseitem'
-      }
-    }
-  }
+        $ref: '#/definitions/warehouseitem',
+      },
+    },
+  },
 };
 
 const uischema = {
   type: 'ListWithDetail',
   scope: '#/properties/warehouseitems',
   options: {
-    labelRef: '#/items/properties/name'
+    labelRef: '#/items/properties/name',
     // detail uischema is registered in example itself
-  }
+  },
 };
 
 registerExamples([
@@ -100,6 +100,6 @@ registerExamples([
     label: 'List With Detail (Registered Detail UISchema)',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/list-with-detail.ts b/packages/examples/src/examples/list-with-detail.ts
index c39a411f6..1ffd5d90d 100644
--- a/packages/examples/src/examples/list-with-detail.ts
+++ b/packages/examples/src/examples/list-with-detail.ts
@@ -30,7 +30,7 @@ const data = {
       customer: {
         id: '471201',
         name: 'Sirius Cybernetics Corporation',
-        department: 'Complaints Division'
+        department: 'Complaints Division',
       },
       title: '42 killer robots',
       ordered: true,
@@ -38,20 +38,20 @@ const data = {
       assignee: 'Philip J. Fry',
       status: 'ordered',
       startDate: '2018-06-01',
-      endDate: '2018-08-01'
+      endDate: '2018-08-01',
     },
     {
       customer: {
         id: '471202',
-        name: 'Very Big Corporation of America'
+        name: 'Very Big Corporation of America',
       },
       title: '1000 gallons of MomCorp Oil',
       processId: '1890004499',
       assignee: 'Jen Barber',
       startDate: '2018-07-01',
-      status: 'planned'
-    }
-  ]
+      status: 'planned',
+    },
+  ],
 };
 
 const schema = {
@@ -64,45 +64,45 @@ const schema = {
           properties: {
             id: { type: 'string' },
             name: { type: 'string', format: 'email' },
-            department: { type: 'string' }
-          }
+            department: { type: 'string' },
+          },
         },
         title: {
           type: 'string',
           minLength: 5,
-          title: 'Official Title'
+          title: 'Official Title',
         },
         ordered: { type: 'boolean' },
         processId: {
           type: 'number',
-          minimum: 0
+          minimum: 0,
         },
         assignee: { type: 'string' },
         startDate: {
           type: 'string',
-          format: 'date'
+          format: 'date',
         },
         endDate: {
           type: 'string',
-          format: 'date'
+          format: 'date',
         },
         status: {
           type: 'string',
-          enum: ['unordered', 'planned', 'ordered']
-        }
+          enum: ['unordered', 'planned', 'ordered'],
+        },
       },
-      required: ['title']
-    }
+      required: ['title'],
+    },
   },
   type: 'object',
   properties: {
     orders: {
       type: 'array',
       items: {
-        $ref: '#/definitions/order'
-      }
-    }
-  }
+        $ref: '#/definitions/order',
+      },
+    },
+  },
 };
 
 const uischema = {
@@ -118,13 +118,13 @@ const uischema = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/title'
+              scope: '#/properties/title',
             },
             {
               type: 'Control',
-              scope: '#/properties/processId'
-            }
-          ]
+              scope: '#/properties/processId',
+            },
+          ],
         },
         {
           type: 'Group',
@@ -133,19 +133,19 @@ const uischema = {
             {
               type: 'Control',
               label: 'ID',
-              scope: '#/properties/customer/properties/id'
+              scope: '#/properties/customer/properties/id',
             },
             {
               type: 'Control',
               label: 'Name',
-              scope: '#/properties/customer/properties/name'
+              scope: '#/properties/customer/properties/name',
             },
             {
               type: 'Control',
               label: 'Department',
-              scope: '#/properties/customer/properties/department'
-            }
-          ]
+              scope: '#/properties/customer/properties/department',
+            },
+          ],
         },
         {
           type: 'VerticalLayout',
@@ -160,39 +160,39 @@ const uischema = {
                       type: 'Control',
                       scope: '#/properties/ordered',
                       options: {
-                        toggle: true
-                      }
+                        toggle: true,
+                      },
                     },
                     {
                       type: 'Control',
-                      scope: '#/properties/assignee'
-                    }
-                  ]
+                      scope: '#/properties/assignee',
+                    },
+                  ],
                 },
                 {
                   type: 'HorizontalLayout',
                   elements: [
                     {
                       type: 'Control',
-                      scope: '#/properties/startDate'
+                      scope: '#/properties/startDate',
                     },
                     {
                       type: 'Control',
-                      scope: '#/properties/endDate'
-                    }
-                  ]
+                      scope: '#/properties/endDate',
+                    },
+                  ],
                 },
                 {
                   type: 'Control',
-                  scope: '#/properties/status'
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  }
+                  scope: '#/properties/status',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
 };
 
 const uischemaNoLabelRef = {
@@ -207,13 +207,13 @@ const uischemaNoLabelRef = {
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/title'
+              scope: '#/properties/title',
             },
             {
               type: 'Control',
-              scope: '#/properties/processId'
-            }
-          ]
+              scope: '#/properties/processId',
+            },
+          ],
         },
         {
           type: 'Group',
@@ -222,19 +222,19 @@ const uischemaNoLabelRef = {
             {
               type: 'Control',
               label: 'ID',
-              scope: '#/properties/customer/properties/id'
+              scope: '#/properties/customer/properties/id',
             },
             {
               type: 'Control',
               label: 'Name',
-              scope: '#/properties/customer/properties/name'
+              scope: '#/properties/customer/properties/name',
             },
             {
               type: 'Control',
               label: 'Department',
-              scope: '#/properties/customer/properties/department'
-            }
-          ]
+              scope: '#/properties/customer/properties/department',
+            },
+          ],
         },
         {
           type: 'VerticalLayout',
@@ -249,39 +249,39 @@ const uischemaNoLabelRef = {
                       type: 'Control',
                       scope: '#/properties/ordered',
                       options: {
-                        toggle: true
-                      }
+                        toggle: true,
+                      },
                     },
                     {
                       type: 'Control',
-                      scope: '#/properties/assignee'
-                    }
-                  ]
+                      scope: '#/properties/assignee',
+                    },
+                  ],
                 },
                 {
                   type: 'HorizontalLayout',
                   elements: [
                     {
                       type: 'Control',
-                      scope: '#/properties/startDate'
+                      scope: '#/properties/startDate',
                     },
                     {
                       type: 'Control',
-                      scope: '#/properties/endDate'
-                    }
-                  ]
+                      scope: '#/properties/endDate',
+                    },
+                  ],
                 },
                 {
                   type: 'Control',
-                  scope: '#/properties/status'
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  }
+                  scope: '#/properties/status',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
 };
 
 registerExamples([
@@ -290,8 +290,8 @@ registerExamples([
     label: 'List With Detail',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
 
 registerExamples([
@@ -300,6 +300,6 @@ registerExamples([
     label: 'List With Detail (No Label Ref)',
     data,
     schema,
-    uischema:uischemaNoLabelRef
-  }
+    uischema: uischemaNoLabelRef,
+  },
 ]);
diff --git a/packages/examples/src/examples/nestedArrays.ts b/packages/examples/src/examples/nestedArrays.ts
index 0910e9eae..aa4296948 100644
--- a/packages/examples/src/examples/nestedArrays.ts
+++ b/packages/examples/src/examples/nestedArrays.ts
@@ -23,7 +23,12 @@
   THE SOFTWARE.
 */
 import { registerExamples } from '../register';
-import { ControlElement, JsonFormsUISchemaRegistryEntry, JsonSchema, NOT_APPLICABLE } from '@jsonforms/core';
+import {
+  ControlElement,
+  JsonFormsUISchemaRegistryEntry,
+  JsonSchema,
+  NOT_APPLICABLE,
+} from '@jsonforms/core';
 import { StateProps } from '..';
 
 const schema = {
@@ -35,21 +40,21 @@ const schema = {
         choices: {
           type: 'array',
           items: {
-            type: 'string'
-          }
-        }
-      }
-    }
+            type: 'string',
+          },
+        },
+      },
+    },
   },
   type: 'object',
   properties: {
     exampleArray: {
       type: 'array',
       items: {
-        $ref: '#/definitions/choicesContainer'
-      }
-    }
-  }
+        $ref: '#/definitions/choicesContainer',
+      },
+    },
+  },
 };
 
 export const uischema = {
@@ -59,30 +64,30 @@ export const uischema = {
       type: 'Control',
       label: {
         text: 'Example Array',
-        show: true
+        show: true,
       },
-      scope: '#/properties/exampleArray'
-    }
-  ]
+      scope: '#/properties/exampleArray',
+    },
+  ],
 };
 
 const data = {
   exampleArray: [
     {
       choices: ['This', 'is', 'an', 'example'],
-      name: 'Hi there'
-    }
-  ]
+      name: 'Hi there',
+    },
+  ],
 };
 
 const control1: ControlElement = {
   type: 'Control',
-  scope: '#/properties/name'
+  scope: '#/properties/name',
 };
 // register inner layout
 const control2: ControlElement = {
   type: 'Control',
-  scope: '#/properties/choices'
+  scope: '#/properties/choices',
 };
 
 const uischemas = [
@@ -92,32 +97,32 @@ const uischemas = [
     },
     uischema: {
       type: 'VerticalLayout',
-      elements: [control1, control2]
-    }
-  }
+      elements: [control1, control2],
+    },
+  },
 ];
 
 const actions = [
   {
-    'label': 'Register NestedArray UISchema',
-    'apply': (props: StateProps) => {
+    label: 'Register NestedArray UISchema',
+    apply: (props: StateProps) => {
       return {
         ...props,
-        uischemas: uischemas
-      }
-    }
+        uischemas: uischemas,
+      };
+    },
   },
   {
-    'label': 'Unregister NestedArray UISchema',
-    'apply': (props: StateProps) => {
+    label: 'Unregister NestedArray UISchema',
+    apply: (props: StateProps) => {
       const uischemas: JsonFormsUISchemaRegistryEntry[] = undefined;
       return {
         ...props,
-        uischemas: uischemas
-      }
-    }
+        uischemas: uischemas,
+      };
+    },
   },
-]
+];
 
 registerExamples([
   {
@@ -126,6 +131,6 @@ registerExamples([
     data,
     schema,
     uischema,
-    actions
-  }
+    actions,
+  },
 ]);
diff --git a/packages/examples/src/examples/nestedCategorization.ts b/packages/examples/src/examples/nestedCategorization.ts
index 1d6a1ee31..45b1f7689 100644
--- a/packages/examples/src/examples/nestedCategorization.ts
+++ b/packages/examples/src/examples/nestedCategorization.ts
@@ -25,152 +25,152 @@
 import { registerExamples } from '../register';
 
 export const schema = {
-    type: 'object',
-    properties: {
-        cat1: {
-            type: 'object',
-            properties: {
-                subcat11: {
-                    type: 'string'
-                }
-            }
+  type: 'object',
+  properties: {
+    cat1: {
+      type: 'object',
+      properties: {
+        subcat11: {
+          type: 'string',
         },
-        cat2: {
-            type: 'object',
-            properties: {
-                subcat21: {
-                    type: 'string'
-                },
-                subcat22: {
-                    type: 'string'
-                }
-            }
+      },
+    },
+    cat2: {
+      type: 'object',
+      properties: {
+        subcat21: {
+          type: 'string',
         },
-        cat3: {
-            type: 'object',
-            properties: {
-                subcat31: {
-                    type: 'string'
-                },
-                subcat32: {
-                    type: 'string'
-                },
-                subcat33: {
-                    type: 'string'
-                }
-            }
-        }
-    }
-}
+        subcat22: {
+          type: 'string',
+        },
+      },
+    },
+    cat3: {
+      type: 'object',
+      properties: {
+        subcat31: {
+          type: 'string',
+        },
+        subcat32: {
+          type: 'string',
+        },
+        subcat33: {
+          type: 'string',
+        },
+      },
+    },
+  },
+};
 
 export const uischema = {
-    type: 'Categorization',
-    elements: [
+  type: 'Categorization',
+  elements: [
+    {
+      type: 'Category',
+      label: 'Cat1',
+      elements: [
         {
-            type: 'Category',
-            label: 'Cat1',
-            elements: [
+          type: 'Categorization',
+          elements: [
+            {
+              type: 'Category',
+              label: 'SubCat1-1',
+              elements: [
                 {
-                    type: 'Categorization',
-                    elements: [
-                        {
-                            type: 'Category',
-                            label: 'SubCat1-1',
-                            elements: [
-                                {
-                                    type: 'Control',
-                                    scope: '#/properties/cat1/properties/subcat11'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
+                  type: 'Control',
+                  scope: '#/properties/cat1/properties/subcat11',
+                },
+              ],
+            },
+          ],
         },
+      ],
+    },
+    {
+      type: 'Category',
+      label: 'Cat2',
+      elements: [
         {
-            type: 'Category',
-            label: 'Cat2',
-            elements: [
+          type: 'Categorization',
+          elements: [
+            {
+              type: 'Category',
+              label: 'SubCat2-1',
+              elements: [
                 {
-                    type: 'Categorization',
-                    elements: [
-                        {
-                            type: 'Category',
-                            label: 'SubCat2-1',
-                            elements: [
-                                {
-                                    type: 'Control',
-                                    scope: '#/properties/cat2/properties/subcat21'
-                                }
-                            ]
-                        },
-                        {
-                            type: 'Category',
-                            label: 'SubCat2-2',
-                            elements: [
-                                {
-                                    type: 'Control',
-                                    scope: '#/properties/cat2/properties/subcat22'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
+                  type: 'Control',
+                  scope: '#/properties/cat2/properties/subcat21',
+                },
+              ],
+            },
+            {
+              type: 'Category',
+              label: 'SubCat2-2',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/cat2/properties/subcat22',
+                },
+              ],
+            },
+          ],
         },
-        ,
+      ],
+    },
+    ,
+    {
+      type: 'Category',
+      label: 'Cat3',
+      elements: [
         {
-            type: 'Category',
-            label: 'Cat3',
-            elements: [
+          type: 'Categorization',
+          elements: [
+            {
+              type: 'Category',
+              label: 'SubCat3-1',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/cat3/properties/subcat31',
+                },
+              ],
+            },
+            {
+              type: 'Category',
+              label: 'SubCat3-2',
+              elements: [
                 {
-                    type: 'Categorization',
-                    elements: [
-                        {
-                            type: 'Category',
-                            label: 'SubCat3-1',
-                            elements: [
-                                {
-                                    type: 'Control',
-                                    scope: '#/properties/cat3/properties/subcat31'
-                                }
-                            ]
-                        },
-                        {
-                            type: 'Category',
-                            label: 'SubCat3-2',
-                            elements: [
-                                {
-                                    type: 'Control',
-                                    scope: '#/properties/cat3/properties/subcat32'
-                                }
-                            ]
-                        },
-                        {
-                            type: 'Category',
-                            label: 'SubCat3-3',
-                            elements: [
-                                {
-                                    type: 'Control',
-                                    scope: '#/properties/cat3/properties/subcat33'
-                                }
-                            ]
-                        }
-                    ]
-                }
-            ]
-        }
-    ]
+                  type: 'Control',
+                  scope: '#/properties/cat3/properties/subcat32',
+                },
+              ],
+            },
+            {
+              type: 'Category',
+              label: 'SubCat3-3',
+              elements: [
+                {
+                  type: 'Control',
+                  scope: '#/properties/cat3/properties/subcat33',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  ],
 };
 
 export const data = {};
 
 registerExamples([
-    {
-        name: 'nestedCategorization',
-        label: 'Nested Categorization',
-        data,
-        schema,
-        uischema
-    }
+  {
+    name: 'nestedCategorization',
+    label: 'Nested Categorization',
+    data,
+    schema,
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/numbers.ts b/packages/examples/src/examples/numbers.ts
index 756a4a5d9..b23a91b3b 100644
--- a/packages/examples/src/examples/numbers.ts
+++ b/packages/examples/src/examples/numbers.ts
@@ -31,15 +31,15 @@ export const schema = {
       type: 'number',
       maximum: 100,
       minimum: 1,
-      default: 50
+      default: 50,
     },
     age: {
-      type: 'integer'
+      type: 'integer',
     },
     height: {
-      type: 'number'
-    }
-  }
+      type: 'number',
+    },
+  },
 };
 
 export const uischema = {
@@ -52,28 +52,28 @@ export const uischema = {
           type: 'Control',
           scope: '#/properties/price',
           label: {
-            text: 'Price'
-          }
+            text: 'Price',
+          },
         },
         {
           type: 'Control',
-          scope: '#/properties/age'
+          scope: '#/properties/age',
         },
         {
           type: 'Control',
-          scope: '#/properties/height'
+          scope: '#/properties/height',
         },
         {
           type: 'Control',
           scope: '#/properties/price',
           label: {
-            text: 'Price with Slider'
+            text: 'Price with Slider',
           },
-          options: { slider: true }
-        }
-      ]
-    }
-  ]
+          options: { slider: true },
+        },
+      ],
+    },
+  ],
 };
 
 export const data = {};
@@ -84,6 +84,6 @@ registerExamples([
     label: 'Numbers',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/object.ts b/packages/examples/src/examples/object.ts
index d1bce2bef..f87e7fb92 100644
--- a/packages/examples/src/examples/object.ts
+++ b/packages/examples/src/examples/object.ts
@@ -35,24 +35,24 @@ export const schema = {
       properties: {
         street_address: { type: 'string' },
         city: { type: 'string' },
-        state: { type: 'string' }
+        state: { type: 'string' },
       },
-      required: ['street_address', 'city', 'state']
+      required: ['street_address', 'city', 'state'],
     },
     user: {
       type: 'object',
       properties: {
         name: { type: 'string' },
-        mail: { type: 'string' }
+        mail: { type: 'string' },
       },
-      required: ['name', 'mail']
-    }
-  }
+      required: ['name', 'mail'],
+    },
+  },
 };
 
 export const uischemaRoot = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 export const uischemaNonRoot = {
@@ -60,7 +60,7 @@ export const uischemaNonRoot = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/address'
+      scope: '#/properties/address',
     },
     {
       type: 'Control',
@@ -70,32 +70,32 @@ export const uischemaNonRoot = {
         condition: {
           type: 'LEAF',
           scope: '#/properties/address/properties/state',
-          expectedValue: 'DC'
-        }
+          expectedValue: 'DC',
+        },
       },
       options: {
         detail: {
           type: 'Group',
           label: 'User Data',
           elements: [
-            { type: 'Control', scope: '#/properties/name'},
+            { type: 'Control', scope: '#/properties/name' },
             {
               type: 'Control',
-              scope: '#/properties/mail'
-            }
-          ]
-        }
-      }
-    }
-  ]
+              scope: '#/properties/mail',
+            },
+          ],
+        },
+      },
+    },
+  ],
 };
 
 const data = {
   address: {
     street_address: '1600 Pennsylvania Avenue NW',
     city: 'Washington',
-    state: 'DC'
-  }
+    state: 'DC',
+  },
 };
 
 registerExamples([
@@ -104,13 +104,13 @@ registerExamples([
     label: 'Object - Root Scope',
     data,
     schema,
-    uischema: uischemaRoot
+    uischema: uischemaRoot,
   },
   {
     name: 'object',
     label: 'Object',
     data,
     schema,
-    uischema: uischemaNonRoot
-  }
+    uischema: uischemaNonRoot,
+  },
 ]);
diff --git a/packages/examples/src/examples/onChange.ts b/packages/examples/src/examples/onChange.ts
index b20c0fe64..16ebac93b 100644
--- a/packages/examples/src/examples/onChange.ts
+++ b/packages/examples/src/examples/onChange.ts
@@ -23,41 +23,47 @@
   THE SOFTWARE.
 */
 import { registerExamples } from '../register';
-import { UISchemaElement, updateErrors, JsonFormsCore, AnyAction, Dispatch } from '@jsonforms/core';
+import {
+  UISchemaElement,
+  updateErrors,
+  JsonFormsCore,
+  AnyAction,
+  Dispatch,
+} from '@jsonforms/core';
 
-let touchedProperties: any = {
+const touchedProperties: any = {
   name: false,
-  description: false
+  description: false,
 };
 
-export const onChange = (dispatch: Dispatch<AnyAction>) => (_: any) => ({
-  data,
-  errors
-}: Pick<JsonFormsCore, 'data' | 'errors'>) => {
-  Object.keys(data).forEach(key => (touchedProperties[key] = true));
+export const onChange =
+  (dispatch: Dispatch<AnyAction>) =>
+  (_: any) =>
+  ({ data, errors }: Pick<JsonFormsCore, 'data' | 'errors'>) => {
+    Object.keys(data).forEach((key) => (touchedProperties[key] = true));
 
-  const newErrors = errors.filter(error => {
-    return touchedProperties[(error as any).dataPath ?? error.instancePath];
-  });
+    const newErrors = errors.filter((error) => {
+      return touchedProperties[(error as any).dataPath ?? error.instancePath];
+    });
 
-  if (newErrors.length < errors.length) {
-    return dispatch(updateErrors(newErrors));
-  }
-};
+    if (newErrors.length < errors.length) {
+      return dispatch(updateErrors(newErrors));
+    }
+  };
 
 export const schema = {
   type: 'object',
   properties: {
     name: {
       type: 'string',
-      minLength: 1
+      minLength: 1,
     },
     description: {
       type: 'string',
-      minLength: 1
-    }
+      minLength: 1,
+    },
   },
-  required: ['name', 'description']
+  required: ['name', 'description'],
 };
 
 export const uischema: UISchemaElement = undefined;
@@ -70,6 +76,6 @@ registerExamples([
     label: 'On Change Listener',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/oneOf-recursive.ts b/packages/examples/src/examples/oneOf-recursive.ts
index 35ecec7a0..27fbca2bf 100644
--- a/packages/examples/src/examples/oneOf-recursive.ts
+++ b/packages/examples/src/examples/oneOf-recursive.ts
@@ -29,14 +29,14 @@ export const schema = {
   definitions: {
     fileOrFolder: {
       title: 'fileOrFolder',
-      oneOf: [{ $ref: '#/definitions/file' }, { $ref: '#/definitions/folder' }]
+      oneOf: [{ $ref: '#/definitions/file' }, { $ref: '#/definitions/folder' }],
     },
     file: {
       title: 'File',
       type: 'object',
       properties: {
-        name: { type: 'string' }
-      }
+        name: { type: 'string' },
+      },
     },
     folder: {
       type: 'object',
@@ -46,26 +46,26 @@ export const schema = {
         children: {
           type: 'array',
           items: {
-            $ref: '#/definitions/fileOrFolder'
-          }
-        }
-      }
-    }
+            $ref: '#/definitions/fileOrFolder',
+          },
+        },
+      },
+    },
   },
   type: 'object',
   properties: {
     root: {
       type: 'array',
       items: {
-        $ref: '#/definitions/folder'
-      }
-    }
-  }
+        $ref: '#/definitions/folder',
+      },
+    },
+  },
 };
 
 export const uischema = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 const data = {};
@@ -76,6 +76,6 @@ registerExamples([
     label: 'oneOf recursive',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/oneOf.ts b/packages/examples/src/examples/oneOf.ts
index 19c117703..174ea834c 100644
--- a/packages/examples/src/examples/oneOf.ts
+++ b/packages/examples/src/examples/oneOf.ts
@@ -33,20 +33,20 @@ export const schema = {
       properties: {
         street_address: { type: 'string' },
         city: { type: 'string' },
-        state: { type: 'string' }
+        state: { type: 'string' },
       },
       required: ['street_address', 'city', 'state'],
-      additionalProperties: false
+      additionalProperties: false,
     },
     user: {
       type: 'object',
       properties: {
         name: { type: 'string' },
-        mail: { type: 'string' }
+        mail: { type: 'string' },
       },
       required: ['name', 'mail'],
-      additionalProperties: false
-    }
+      additionalProperties: false,
+    },
   },
 
   type: 'object',
@@ -54,10 +54,13 @@ export const schema = {
   properties: {
     name: { type: 'string' },
     addressOrUser: {
-      oneOf: [{ $ref: '#/definitions/address' }, { $ref: '#/definitions/user' }]
-    }
+      oneOf: [
+        { $ref: '#/definitions/address' },
+        { $ref: '#/definitions/user' },
+      ],
+    },
   },
-  required: ['name']
+  required: ['name'],
 };
 
 export const uischema = {
@@ -65,13 +68,13 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'Control',
-      scope: '#/properties/addressOrUser'
-    }
-  ]
+      scope: '#/properties/addressOrUser',
+    },
+  ],
 };
 
 const data = {
@@ -79,7 +82,7 @@ const data = {
   addressOrUser: {
     name: 'User',
     mail: 'mail@example.com',
-  }
+  },
 };
 
 const schema_1265_array = {
@@ -88,16 +91,16 @@ const schema_1265_array = {
     coloursOrNumbers: {
       oneOf: [
         {
-          $ref: '#/definitions/colours'
+          $ref: '#/definitions/colours',
         },
         {
-          $ref: '#/definitions/numbers'
+          $ref: '#/definitions/numbers',
         },
         {
-          $ref: '#/definitions/shapes'
-        }
-      ]
-    }
+          $ref: '#/definitions/shapes',
+        },
+      ],
+    },
   },
   definitions: {
     colours: {
@@ -107,8 +110,8 @@ const schema_1265_array = {
       items: {
         title: 'Type',
         type: 'string',
-        enum: ['Red', 'Green', 'Blue']
-      }
+        enum: ['Red', 'Green', 'Blue'],
+      },
     },
     numbers: {
       title: 'Numbers',
@@ -117,8 +120,8 @@ const schema_1265_array = {
       items: {
         title: 'Type',
         type: 'string',
-        enum: ['One', 'Two', 'Three']
-      }
+        enum: ['One', 'Two', 'Three'],
+      },
     },
     shapes: {
       title: 'Shapes',
@@ -127,10 +130,10 @@ const schema_1265_array = {
       items: {
         title: 'Type',
         type: 'string',
-        enum: ['Circle', 'Triangle', 'Square']
-      }
-    }
-  }
+        enum: ['Circle', 'Triangle', 'Square'],
+      },
+    },
+  },
 };
 
 const schema_1265_object = {
@@ -139,16 +142,16 @@ const schema_1265_object = {
     coloursOrNumbers: {
       oneOf: [
         {
-          $ref: '#/definitions/colours'
+          $ref: '#/definitions/colours',
         },
         {
-          $ref: '#/definitions/numbers'
+          $ref: '#/definitions/numbers',
         },
         {
-          $ref: '#/definitions/shapes'
-        }
-      ]
-    }
+          $ref: '#/definitions/shapes',
+        },
+      ],
+    },
   },
   additionalProperties: false,
   definitions: {
@@ -159,10 +162,10 @@ const schema_1265_object = {
         colour: {
           title: 'Type',
           type: 'string',
-          enum: ['Red', 'Green', 'Blue']
-        }
+          enum: ['Red', 'Green', 'Blue'],
+        },
       },
-      additionalProperties: false
+      additionalProperties: false,
     },
     numbers: {
       title: 'Numbers',
@@ -171,10 +174,10 @@ const schema_1265_object = {
         number: {
           title: 'Type',
           type: 'string',
-          enum: ['One', 'Two', 'Three']
-        }
+          enum: ['One', 'Two', 'Three'],
+        },
       },
-      additionalProperties: false
+      additionalProperties: false,
     },
     shapes: {
       title: 'Shapes',
@@ -183,12 +186,12 @@ const schema_1265_object = {
         shape: {
           title: 'Type',
           type: 'string',
-          enum: ['Circle', 'Triangle', 'Square']
-        }
+          enum: ['Circle', 'Triangle', 'Square'],
+        },
       },
-      additionalProperties: false
-    }
-  }
+      additionalProperties: false,
+    },
+  },
 };
 
 const schema_1265_simple = {
@@ -197,34 +200,34 @@ const schema_1265_simple = {
     coloursOrNumbers: {
       oneOf: [
         {
-          $ref: '#/definitions/colours'
+          $ref: '#/definitions/colours',
         },
         {
-          $ref: '#/definitions/numbers'
+          $ref: '#/definitions/numbers',
         },
         {
-          $ref: '#/definitions/shapes'
-        }
-      ]
-    }
+          $ref: '#/definitions/shapes',
+        },
+      ],
+    },
   },
   definitions: {
     colours: {
       title: 'Colours',
       type: 'string',
-      enum: ['Red', 'Green', 'Blue']
+      enum: ['Red', 'Green', 'Blue'],
     },
     numbers: {
       title: 'Numbers',
       type: 'string',
-      enum: ['One', 'Two', 'Three']
+      enum: ['One', 'Two', 'Three'],
     },
     shapes: {
       title: 'Shapes',
       type: 'string',
-      enum: ['Circle', 'Triangle', 'Square']
-    }
-  }
+      enum: ['Circle', 'Triangle', 'Square'],
+    },
+  },
 };
 
 const schema_1273 = {
@@ -233,13 +236,13 @@ const schema_1273 = {
     quantity: {
       oneOf: [
         {
-          $ref: '#/definitions/unrangedQuantity'
+          $ref: '#/definitions/unrangedQuantity',
         },
         {
-          $ref: '#/definitions/rangedQuantity'
-        }
-      ]
-    }
+          $ref: '#/definitions/rangedQuantity',
+        },
+      ],
+    },
   },
   definitions: {
     unrangedQuantity: {
@@ -247,32 +250,32 @@ const schema_1273 = {
       type: 'object',
       properties: {
         value: {
-          type: 'number'
+          type: 'number',
         },
         unit: {
-          type: 'string'
-        }
+          type: 'string',
+        },
       },
-      required: ['value', 'unit']
+      required: ['value', 'unit'],
     },
     rangedQuantity: {
       title: 'Range',
       type: 'object',
       properties: {
         valueLow: {
-          type: 'number'
+          type: 'number',
         },
         valueHigh: {
           type: 'number',
-          maximum: 10
+          maximum: 10,
         },
         unit: {
-          type: 'string'
-        }
+          type: 'string',
+        },
       },
-      required: ['valueLow', 'valueHigh', 'unit']
-    }
-  }
+      required: ['valueLow', 'valueHigh', 'unit'],
+    },
+  },
 };
 
 const schema_1273_simple = {
@@ -281,22 +284,22 @@ const schema_1273_simple = {
     quantity: {
       oneOf: [
         {
-          type: 'string'
+          type: 'string',
         },
         {
-          type: 'number'
-        }
-      ]
-    }
-  }
+          type: 'number',
+        },
+      ],
+    },
+  },
 };
 
 const data_1273 = {
   quantity: {
     valueLow: 1,
     valueHigh: 100,
-    unit: 'kg'
-  }
+    unit: 'kg',
+  },
 };
 
 registerExamples([
@@ -305,41 +308,41 @@ registerExamples([
     label: 'oneOf',
     data,
     schema,
-    uischema
+    uischema,
   },
   {
     name: 'oneOf_1265_array',
     label: 'oneOf - Validation for Arrays (Issue 1265)',
     data: { coloursOrNumbers: ['Foo'] },
     schema: schema_1265_array,
-    uischema: undefined
+    uischema: undefined,
   },
   {
     name: 'oneOf_1265_object',
     label: 'oneOf - Validation for Objects (Issue 1265)',
     data: { coloursOrNumbers: { colour: 'Foo' } },
     schema: schema_1265_object,
-    uischema: undefined
+    uischema: undefined,
   },
   {
     name: 'oneOf_1265_simple',
     label: 'oneOf - Validation for Primitives (Issue 1265)',
     data: { coloursOrNumbers: 'Foo' },
     schema: schema_1265_simple,
-    uischema: undefined
+    uischema: undefined,
   },
   {
     name: 'oneOf_1273',
     label: 'oneOf - Preselection for Objects (Issue 1273)',
     data: data_1273,
     schema: schema_1273,
-    uischema: undefined
+    uischema: undefined,
   },
   {
     name: 'oneOf_1273_simple',
     label: 'oneOf - Preselection for Primitives (Issue 1273 )',
     data: { quantity: 5 },
     schema: schema_1273_simple,
-    uischema: undefined
-  }
+    uischema: undefined,
+  },
 ]);
diff --git a/packages/examples/src/examples/oneOfArray.ts b/packages/examples/src/examples/oneOfArray.ts
index 6f8a8c15d..ec6d8f783 100644
--- a/packages/examples/src/examples/oneOfArray.ts
+++ b/packages/examples/src/examples/oneOfArray.ts
@@ -33,18 +33,18 @@ export const schema = {
       properties: {
         street_address: { type: 'string' },
         city: { type: 'string' },
-        state: { type: 'string' }
+        state: { type: 'string' },
       },
-      required: ['street_address', 'city', 'state']
+      required: ['street_address', 'city', 'state'],
     },
     user: {
       type: 'object',
       properties: {
         name: { type: 'string' },
-        mail: { type: 'string' }
+        mail: { type: 'string' },
       },
-      required: ['name', 'mail']
-    }
+      required: ['name', 'mail'],
+    },
   },
 
   type: 'object',
@@ -56,11 +56,11 @@ export const schema = {
       items: {
         oneOf: [
           { $ref: '#/definitions/address' },
-          { $ref: '#/definitions/user' }
-        ]
-      }
-    }
-  }
+          { $ref: '#/definitions/user' },
+        ],
+      },
+    },
+  },
 };
 
 export const uischema = {
@@ -68,9 +68,9 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/addressOrUsers'
-    }
-  ]
+      scope: '#/properties/addressOrUsers',
+    },
+  ],
 };
 
 const data = {
@@ -79,13 +79,13 @@ const data = {
     {
       street_address: '1600 Pennsylvania Avenue NW',
       city: 'Washington',
-      state: 'DC'
+      state: 'DC',
     },
     {
       name: 'User',
-      mail: 'user@user.user'
-    }
-  ]
+      mail: 'user@user.user',
+    },
+  ],
 };
 
 registerExamples([
@@ -94,6 +94,6 @@ registerExamples([
     label: 'oneOf - Inside array items',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/person.ts b/packages/examples/src/examples/person.ts
index 4be789a03..745a49332 100644
--- a/packages/examples/src/examples/person.ts
+++ b/packages/examples/src/examples/person.ts
@@ -30,21 +30,21 @@ export const personCoreSchema = {
     name: {
       type: 'string',
       minLength: 3,
-      description: 'Please enter your name'
+      description: 'Please enter your name',
     },
     vegetarian: {
-      type: 'boolean'
+      type: 'boolean',
     },
     birthDate: {
       type: 'string',
       format: 'date',
-      description: 'Please enter your birth date.'
+      description: 'Please enter your birth date.',
     },
     nationality: {
       type: 'string',
-      enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
-    }
-  }
+      enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
+    },
+  },
 };
 
 export const schema = {
@@ -56,36 +56,36 @@ export const schema = {
       properties: {
         age: {
           type: 'integer',
-          description: 'Please enter your age.'
+          description: 'Please enter your age.',
         },
         height: {
-          type: 'number'
+          type: 'number',
         },
         drivingSkill: {
           type: 'number',
           maximum: 10,
           minimum: 1,
-          default: 7
-        }
+          default: 7,
+        },
       },
-      required: ['age', 'height']
+      required: ['age', 'height'],
     },
     vegetarian: {
-      type: 'boolean'
+      type: 'boolean',
     },
     birthDate: {
       type: 'string',
-      format: 'date'
+      format: 'date',
     },
     occupation: {
-      type: 'string'
+      type: 'string',
     },
     postalCode: {
       type: 'string',
-      maxLength: 5
-    }
+      maxLength: 5,
+    },
   },
-  required: ['occupation', 'nationality']
+  required: ['occupation', 'nationality'],
 };
 
 export const uischema = {
@@ -96,32 +96,32 @@ export const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/name'
+          scope: '#/properties/name',
         },
         {
           type: 'Control',
-          scope: '#/properties/personalData/properties/age'
+          scope: '#/properties/personalData/properties/age',
         },
         {
           type: 'Control',
-          scope: '#/properties/birthDate'
-        }
-      ]
+          scope: '#/properties/birthDate',
+        },
+      ],
     },
     {
       type: 'Label',
-      text: 'Additional Information'
+      text: 'Additional Information',
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/personalData/properties/height'
+          scope: '#/properties/personalData/properties/height',
         },
         {
           type: 'Control',
-          scope: '#/properties/nationality'
+          scope: '#/properties/nationality',
         },
         {
           type: 'Control',
@@ -134,12 +134,12 @@ export const uischema = {
             'Physician',
             'Student',
             'Teacher',
-            'Other'
-          ]
-        }
-      ]
-    }
-  ]
+            'Other',
+          ],
+        },
+      ],
+    },
+  ],
 };
 
 export const data = {
@@ -147,9 +147,9 @@ export const data = {
   vegetarian: false,
   birthDate: '1985-06-02',
   personalData: {
-    age: 34
+    age: 34,
   },
-  postalCode: '12345'
+  postalCode: '12345',
 };
 
 registerExamples([
@@ -158,6 +158,6 @@ registerExamples([
     label: 'Person',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/radioGroup.ts b/packages/examples/src/examples/radioGroup.ts
index c55386719..0da69fceb 100644
--- a/packages/examples/src/examples/radioGroup.ts
+++ b/packages/examples/src/examples/radioGroup.ts
@@ -24,59 +24,57 @@
 */
 import { registerExamples } from '../register';
 
-const data = {
-};
+const data = {};
 
 const schema = {
-    type: 'object',
-    properties: {
-      exampleRadioEnum: {
-        type: 'string',
-        enum: ['One', 'Two', 'Three']
-      },
-      exampleRadioOneOfEnum: {
-        type: 'string',
-        oneOf: [
-            {const: 'foo', title: 'Foo'},
-            {const: 'bar', title: 'Bar'},
-            {const: 'foobar', title: 'FooBar'}
-        ]
-    }
-    }
-  };
- const uischema = {
-   type: 'VerticalLayout',
-   elements: [
-     {
-       type: 'Group',
-       label: 'Simple enum',
-       elements: [
-         {
-           type: 'Control',
-           scope: '#/properties/exampleRadioEnum',
-           options: {
-             format: 'radio',
-             orientation: 'vertical'
-           }
-         }
-       ]
-     },
-     {
-       type: 'Group',
-       label: 'One of Enum',
-       elements: [
-         {
-           type: 'Control',
-           scope: '#/properties/exampleRadioOneOfEnum',
-           options: {
-             format: 'radio'
-           }
-         }
-       ]
-     }
-   ]
- };
-
+  type: 'object',
+  properties: {
+    exampleRadioEnum: {
+      type: 'string',
+      enum: ['One', 'Two', 'Three'],
+    },
+    exampleRadioOneOfEnum: {
+      type: 'string',
+      oneOf: [
+        { const: 'foo', title: 'Foo' },
+        { const: 'bar', title: 'Bar' },
+        { const: 'foobar', title: 'FooBar' },
+      ],
+    },
+  },
+};
+const uischema = {
+  type: 'VerticalLayout',
+  elements: [
+    {
+      type: 'Group',
+      label: 'Simple enum',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/exampleRadioEnum',
+          options: {
+            format: 'radio',
+            orientation: 'vertical',
+          },
+        },
+      ],
+    },
+    {
+      type: 'Group',
+      label: 'One of Enum',
+      elements: [
+        {
+          type: 'Control',
+          scope: '#/properties/exampleRadioOneOfEnum',
+          options: {
+            format: 'radio',
+          },
+        },
+      ],
+    },
+  ],
+};
 
 registerExamples([
   {
@@ -84,6 +82,6 @@ registerExamples([
     label: 'Radio Group',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/readonly.ts b/packages/examples/src/examples/readonly.ts
index 419c9addb..10efc015b 100644
--- a/packages/examples/src/examples/readonly.ts
+++ b/packages/examples/src/examples/readonly.ts
@@ -29,15 +29,15 @@ export const schema = {
   properties: {
     readonly: {
       type: 'string',
-      readOnly: true
+      readOnly: true,
     },
     readonlyByUISchema: {
-      type: 'string'
+      type: 'string',
     },
     notReadonly: {
-      type: 'string'
-    }
-  }
+      type: 'string',
+    },
+  },
 };
 
 export const uischema = {
@@ -46,28 +46,28 @@ export const uischema = {
     {
       type: 'Control',
       scope: '#/properties/readonly',
-      label: 'A readonly field'
+      label: 'A readonly field',
     },
     {
       type: 'Control',
       scope: '#/properties/readonlyByUISchema',
       label: 'A readonly field by ui schema',
       options: {
-        readonly: true
-      }
+        readonly: true,
+      },
     },
     {
       type: 'Control',
       scope: '#/properties/notReadonly',
-      label: 'A normal field'
-    }
-  ]
+      label: 'A normal field',
+    },
+  ],
 };
 
 export const data = {
   readonly: 'readonly by schema',
   readonlyByUISchema: 'readonly by ui schema',
-  notReadonly: 'normal field'
+  notReadonly: 'normal field',
 };
 
 registerExamples([
@@ -76,6 +76,6 @@ registerExamples([
     label: 'Readonly examples',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/rule.ts b/packages/examples/src/examples/rule.ts
index bad36e346..58d2b9b2a 100644
--- a/packages/examples/src/examples/rule.ts
+++ b/packages/examples/src/examples/rule.ts
@@ -28,23 +28,23 @@ export const schema = {
   type: 'object',
   properties: {
     name: {
-      type: 'string'
+      type: 'string',
     },
     dead: {
-      type: 'boolean'
+      type: 'boolean',
     },
     kindOfDead: {
       type: 'string',
-      enum: ['Zombie', 'Vampire', 'Ghoul']
+      enum: ['Zombie', 'Vampire', 'Ghoul'],
     },
     vegetables: {
-      type: 'boolean'
+      type: 'boolean',
     },
     kindOfVegetables: {
       type: 'string',
-      enum: ['All', 'Some', 'Only potatoes']
-    }
-  }
+      enum: ['All', 'Some', 'Only potatoes'],
+    },
+  },
 };
 
 export const uischema = {
@@ -53,7 +53,7 @@ export const uischema = {
     {
       type: 'Control',
       label: 'Name',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'Group',
@@ -61,7 +61,7 @@ export const uischema = {
         {
           type: 'Control',
           label: 'Is Dead?',
-          scope: '#/properties/dead'
+          scope: '#/properties/dead',
         },
         {
           type: 'Control',
@@ -72,12 +72,12 @@ export const uischema = {
             condition: {
               scope: '#/properties/dead',
               schema: {
-                const: true
-              }
-            }
-          }
-        }
-      ]
+                const: true,
+              },
+            },
+          },
+        },
+      ],
     },
     {
       type: 'Group',
@@ -85,7 +85,7 @@ export const uischema = {
         {
           type: 'Control',
           label: 'Eats vegetables?',
-          scope: '#/properties/vegetables'
+          scope: '#/properties/vegetables',
         },
         {
           type: 'Control',
@@ -96,14 +96,14 @@ export const uischema = {
             condition: {
               scope: '#/properties/vegetables',
               schema: {
-                const: false
-              }
-            }
-          }
-        }
-      ]
-    }
-  ]
+                const: false,
+              },
+            },
+          },
+        },
+      ],
+    },
+  ],
 };
 
 export const data = {
@@ -118,6 +118,6 @@ registerExamples([
     label: 'Rule',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/ruleInheritance.ts b/packages/examples/src/examples/ruleInheritance.ts
index be79a56d4..ec137bb8e 100644
--- a/packages/examples/src/examples/ruleInheritance.ts
+++ b/packages/examples/src/examples/ruleInheritance.ts
@@ -29,21 +29,21 @@ export const schema = {
   type: 'object',
   properties: {
     toggleTopLayout: {
-      type: 'boolean'
+      type: 'boolean',
     },
     topString: {
-      type: 'string'
+      type: 'string',
     },
     middleNumber: {
-      type: 'number'
+      type: 'number',
     },
     toggleBottomLayout: {
-      type: 'boolean'
+      type: 'boolean',
     },
     bottomBoolean: {
-      type: 'boolean'
-    }
-  }
+      type: 'boolean',
+    },
+  },
 };
 export const uischema = {
   type: 'VerticalLayout',
@@ -51,20 +51,20 @@ export const uischema = {
     effect: 'ENABLE',
     condition: {
       scope: '#/properties/toggleTopLayout',
-      schema: { const: true }
-    }
+      schema: { const: true },
+    },
   },
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/topString'
+      scope: '#/properties/topString',
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/middleNumber'
+          scope: '#/properties/middleNumber',
         },
         {
           type: 'Group',
@@ -73,47 +73,50 @@ export const uischema = {
             effect: 'SHOW',
             condition: {
               scope: '#/properties/toggleBottomLayout',
-              schema: { const: true }
-            }
+              schema: { const: true },
+            },
           },
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/bottomBoolean'
-            }
-          ]
-        }
-      ]
-    }
-  ]
+              scope: '#/properties/bottomBoolean',
+            },
+          ],
+        },
+      ],
+    },
+  ],
 } as any;
 
 export const data = {
   toggleTopLayout: true,
   toggleBottomLayout: true,
-  toggleControl: true
+  toggleControl: true,
 };
 
 const actions = [
   {
-    'label': 'Enable/Disable top layout',
-    'apply': (props: StateProps) => {
+    label: 'Enable/Disable top layout',
+    apply: (props: StateProps) => {
       return {
         ...props,
-        data: { ...props.data, toggleTopLayout: !props.data.toggleTopLayout }
-      }
-    }
+        data: { ...props.data, toggleTopLayout: !props.data.toggleTopLayout },
+      };
+    },
   },
   {
-    'label': 'Show/Hide bottom layout',
-    'apply': (props: StateProps) => {
+    label: 'Show/Hide bottom layout',
+    apply: (props: StateProps) => {
       return {
         ...props,
-        data: { ...props.data, toggleBottomLayout: !props.data.toggleBottomLayout }
-      }
-    }
+        data: {
+          ...props.data,
+          toggleBottomLayout: !props.data.toggleBottomLayout,
+        },
+      };
+    },
   },
-]
+];
 
 registerExamples([
   {
@@ -122,6 +125,6 @@ registerExamples([
     data,
     schema,
     uischema,
-    actions
-  }
+    actions,
+  },
 ]);
diff --git a/packages/examples/src/examples/scope.ts b/packages/examples/src/examples/scope.ts
index 8898a4845..345c55e75 100644
--- a/packages/examples/src/examples/scope.ts
+++ b/packages/examples/src/examples/scope.ts
@@ -28,32 +28,32 @@ export const orderSchema = {
   type: 'object',
   properties: {
     orderId: {
-      type: 'string'
+      type: 'string',
     },
     purchaseDate: {
       type: 'string',
-      format: 'date'
+      format: 'date',
     },
     price: {
-      type: 'number'
+      type: 'number',
     },
     shippingAddress: {
-      $ref: '#/definitions/shippingAddress'
-    }
+      $ref: '#/definitions/shippingAddress',
+    },
   },
   definitions: {
     shippingAddress: {
       type: 'object',
       properties: {
         aptNo: {
-          type: 'integer'
+          type: 'integer',
         },
         streetNumber: {
-          type: 'integer'
-        }
-      }
-    }
-  }
+          type: 'integer',
+        },
+      },
+    },
+  },
 };
 
 export const uischema = {
@@ -64,32 +64,32 @@ export const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/orderId'
+          scope: '#/properties/orderId',
         },
         {
           type: 'Control',
-          scope: '#/properties/purchaseDate'
+          scope: '#/properties/purchaseDate',
         },
         {
           type: 'Control',
-          scope: '#/properties/price'
-        }
-      ]
+          scope: '#/properties/price',
+        },
+      ],
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/shippingAddress/properties/aptNo'
+          scope: '#/properties/shippingAddress/properties/aptNo',
         },
         {
           type: 'Control',
-          scope: '#/properties/shippingAddress/properties/streetNumber'
-        }
-      ]
-    }
-  ]
+          scope: '#/properties/shippingAddress/properties/streetNumber',
+        },
+      ],
+    },
+  ],
 };
 
 export const data = {
@@ -98,8 +98,8 @@ export const data = {
   price: 16,
   shippingAddress: {
     aptNo: 3,
-    streetNumber: 12
-  }
+    streetNumber: 12,
+  },
 };
 
 registerExamples([
@@ -108,6 +108,6 @@ registerExamples([
     label: 'Scope',
     data,
     schema: orderSchema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/stringArray.ts b/packages/examples/src/examples/stringArray.ts
index 2abd2d8e2..cfd098625 100644
--- a/packages/examples/src/examples/stringArray.ts
+++ b/packages/examples/src/examples/stringArray.ts
@@ -31,10 +31,10 @@ export const schema = {
       type: 'array',
       items: {
         type: 'string',
-        maxLength: 5
-      }
-    }
-  }
+        maxLength: 5,
+      },
+    },
+  },
 };
 
 export const uischema = {
@@ -42,13 +42,13 @@ export const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/comments'
-    }
-  ]
+      scope: '#/properties/comments',
+    },
+  ],
 };
 
 export const data = {
-  comments: ['one string', 'two strings']
+  comments: ['one string', 'two strings'],
 };
 
 registerExamples([
@@ -57,6 +57,6 @@ registerExamples([
     label: 'Array of Strings',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/examples/text.ts b/packages/examples/src/examples/text.ts
index bbaee349a..8c4ee7f6a 100644
--- a/packages/examples/src/examples/text.ts
+++ b/packages/examples/src/examples/text.ts
@@ -29,17 +29,17 @@ export const schema = {
   properties: {
     zipCode: {
       type: 'string',
-      maxLength: 5
+      maxLength: 5,
     },
     zipCodeWithoutTrim: {
       type: 'string',
-      maxLength: 5
+      maxLength: 5,
     },
     zipCodeWithoutRestrict: {
       type: 'string',
-      maxLength: 5
-    }
-  }
+      maxLength: 5,
+    },
+  },
 };
 
 export const uischema = {
@@ -54,8 +54,8 @@ export const uischema = {
           label: 'ZIP Code (with trim and restrict options)',
           options: {
             trim: true,
-            restrict: true
-          }
+            restrict: true,
+          },
         },
         {
           type: 'Control',
@@ -63,8 +63,8 @@ export const uischema = {
           label: 'ZIP Code (without trimming)',
           options: {
             trim: false,
-            restrict: true
-          }
+            restrict: true,
+          },
         },
         {
           type: 'Control',
@@ -72,18 +72,18 @@ export const uischema = {
           label: 'ZIP Code (without restricting)',
           options: {
             trim: true,
-            restrict: false
-          }
-        }
-      ]
-    }
-  ]
+            restrict: false,
+          },
+        },
+      ],
+    },
+  ],
 };
 
 export const data = {
   zipCode: '12345',
   zipCodeWithoutTrim: '12345678',
-  zipCodeWithoutRestrict: '12345678'
+  zipCodeWithoutRestrict: '12345678',
 };
 
 registerExamples([
@@ -92,6 +92,6 @@ registerExamples([
     label: 'Text Control Options',
     data,
     schema,
-    uischema
-  }
+    uischema,
+  },
 ]);
diff --git a/packages/examples/src/register.ts b/packages/examples/src/register.ts
index 75e4c971c..147c521bd 100644
--- a/packages/examples/src/register.ts
+++ b/packages/examples/src/register.ts
@@ -27,11 +27,11 @@ import { ExampleDescription } from './example';
 const knownExamples: { [key: string]: ExampleDescription } = {};
 
 export const registerExamples = (examples: ExampleDescription[]): void => {
-  examples.forEach(example => (knownExamples[example.name] = example));
+  examples.forEach((example) => (knownExamples[example.name] = example));
 };
 
 export const getExamples: () => ExampleDescription[] = () => {
-  const examples = Object.keys(knownExamples).map(key => knownExamples[key]);
+  const examples = Object.keys(knownExamples).map((key) => knownExamples[key]);
   examples.sort((a, b) => a.label.localeCompare(b.label));
   return examples;
-}
+};
diff --git a/packages/material-renderers/example/index.ts b/packages/material-renderers/example/index.ts
index 8c609efda..7488a28c7 100644
--- a/packages/material-renderers/example/index.ts
+++ b/packages/material-renderers/example/index.ts
@@ -25,7 +25,4 @@
 import { renderExample } from '../../examples-react/src/index';
 import { materialRenderers, materialCells } from '../src';
 
-renderExample(
-  materialRenderers,
-  materialCells
-);
+renderExample(materialRenderers, materialCells);
diff --git a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
index e66154af1..850c0bab2 100644
--- a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
+++ b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
@@ -25,34 +25,42 @@
 import type { StatePropsOfMasterItem } from '@jsonforms/core';
 import { withJsonFormsMasterListItemProps } from '@jsonforms/react';
 import {
-    Avatar,
-    IconButton,
-    ListItem,
-    ListItemAvatar,
-    ListItemSecondaryAction,
-    ListItemText,
+  Avatar,
+  IconButton,
+  ListItem,
+  ListItemAvatar,
+  ListItemSecondaryAction,
+  ListItemText,
 } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import React from 'react';
 
-const ListWithDetailMasterItem = ({ index, childLabel, selected, handleSelect, removeItem, path, translations }: StatePropsOfMasterItem) => {
-    return (
-        <ListItem
-            button
-            selected={selected}
-            onClick={handleSelect(index)}
+const ListWithDetailMasterItem = ({
+  index,
+  childLabel,
+  selected,
+  handleSelect,
+  removeItem,
+  path,
+  translations,
+}: StatePropsOfMasterItem) => {
+  return (
+    <ListItem button selected={selected} onClick={handleSelect(index)}>
+      <ListItemAvatar>
+        <Avatar aria-label='Index'>{index + 1}</Avatar>
+      </ListItemAvatar>
+      <ListItemText primary={childLabel} />
+      <ListItemSecondaryAction>
+        <IconButton
+          aria-label={translations.removeAriaLabel}
+          onClick={removeItem(path, index)}
+          size='large'
         >
-            <ListItemAvatar>
-                <Avatar aria-label='Index'>{index + 1}</Avatar>
-            </ListItemAvatar>
-            <ListItemText primary={childLabel} />
-            <ListItemSecondaryAction>
-                <IconButton aria-label={translations.removeAriaLabel} onClick={removeItem(path, index)} size='large'>
-                    <DeleteIcon />
-                </IconButton>
-            </ListItemSecondaryAction>
-        </ListItem>
-    );
+          <DeleteIcon />
+        </IconButton>
+      </ListItemSecondaryAction>
+    </ListItem>
+  );
 };
 
 export default withJsonFormsMasterListItemProps(ListWithDetailMasterItem);
diff --git a/packages/material-renderers/src/additional/MaterialLabelRenderer.tsx b/packages/material-renderers/src/additional/MaterialLabelRenderer.tsx
index 00fa173fa..67140b5d9 100644
--- a/packages/material-renderers/src/additional/MaterialLabelRenderer.tsx
+++ b/packages/material-renderers/src/additional/MaterialLabelRenderer.tsx
@@ -23,33 +23,26 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import {
-  LabelProps,
-  RankedTester,
-  rankWith,
-  uiTypeIs,
-} from '@jsonforms/core';
+import { LabelProps, RankedTester, rankWith, uiTypeIs } from '@jsonforms/core';
 import { withJsonFormsLabelProps } from '@jsonforms/react';
-import {
-  Hidden,
-  Typography
-} from '@mui/material';
+import { Hidden, Typography } from '@mui/material';
 
 /**
  * Default tester for a label.
  * @type {RankedTester}
  */
-export const materialLabelRendererTester: RankedTester = rankWith(1, uiTypeIs('Label'));
+export const materialLabelRendererTester: RankedTester = rankWith(
+  1,
+  uiTypeIs('Label')
+);
 
 /**
  * Default renderer for a label.
  */
-export const MaterialLabelRenderer = ({ text, visible }: LabelProps ) => {
+export const MaterialLabelRenderer = ({ text, visible }: LabelProps) => {
   return (
     <Hidden xsUp={!visible}>
-      <Typography variant='h6'>
-        {text}
-      </Typography>
+      <Typography variant='h6'>{text}</Typography>
     </Hidden>
   );
 };
diff --git a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
index 7050f899a..6f2c7d365 100644
--- a/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
+++ b/packages/material-renderers/src/additional/MaterialListWithDetailRenderer.tsx
@@ -32,11 +32,11 @@ import {
   isObjectArray,
   RankedTester,
   rankWith,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 import {
   JsonFormsDispatch,
-  withJsonFormsArrayLayoutProps
+  withJsonFormsArrayLayoutProps,
 } from '@jsonforms/react';
 import { Grid, Hidden, List, Typography } from '@mui/material';
 import map from 'lodash/map';
@@ -62,7 +62,7 @@ export const MaterialListWithDetailRenderer = ({
   cells,
   config,
   rootSchema,
-  translations
+  translations,
 }: ArrayLayoutProps) => {
   const [selectedIndex, setSelectedIndex] = useState(undefined);
   const handleRemoveItem = useCallback(
@@ -93,7 +93,7 @@ export const MaterialListWithDetailRenderer = ({
         path,
         undefined,
         uischema,
-        rootSchema,
+        rootSchema
       ),
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
@@ -121,7 +121,7 @@ export const MaterialListWithDetailRenderer = ({
         <Grid item xs={3}>
           <List>
             {data > 0 ? (
-              map(range(data), index => (
+              map(range(data), (index) => (
                 <ListWithDetailMasterItem
                   index={index}
                   path={path}
diff --git a/packages/material-renderers/src/additional/index.ts b/packages/material-renderers/src/additional/index.ts
index 7a67318c5..ddf8d0eab 100644
--- a/packages/material-renderers/src/additional/index.ts
+++ b/packages/material-renderers/src/additional/index.ts
@@ -23,10 +23,10 @@
   THE SOFTWARE.
 */
 import MaterialLabelRenderer, {
-  materialLabelRendererTester
+  materialLabelRendererTester,
 } from './MaterialLabelRenderer';
 export { MaterialLabelRenderer, materialLabelRendererTester };
 import MaterialListWithDetailRenderer, {
-  materialListWithDetailTester
+  materialListWithDetailTester,
 } from './MaterialListWithDetailRenderer';
 export { MaterialListWithDetailRenderer, materialListWithDetailTester };
diff --git a/packages/material-renderers/src/cells/MaterialBooleanCell.tsx b/packages/material-renderers/src/cells/MaterialBooleanCell.tsx
index fe4f8ed0e..b2e4264b2 100644
--- a/packages/material-renderers/src/cells/MaterialBooleanCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialBooleanCell.tsx
@@ -28,7 +28,7 @@ import {
   isBooleanControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiCheckbox } from '../mui-controls/MuiCheckbox';
diff --git a/packages/material-renderers/src/cells/MaterialBooleanToggleCell.tsx b/packages/material-renderers/src/cells/MaterialBooleanToggleCell.tsx
index c2ef93ade..99665c6e8 100644
--- a/packages/material-renderers/src/cells/MaterialBooleanToggleCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialBooleanToggleCell.tsx
@@ -30,7 +30,7 @@ import {
   optionIs,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiToggle } from '../mui-controls/MuiToggle';
@@ -42,6 +42,6 @@ export const MaterialBooleanToggleCell = (props: CellProps & WithClassname) => {
 export const materialBooleanToggleCellTester: RankedTester = rankWith(
   3,
   and(isBooleanControl, optionIs('toggle', true))
-);;
+);
 
 export default withJsonFormsCellProps(MaterialBooleanToggleCell);
diff --git a/packages/material-renderers/src/cells/MaterialDateCell.tsx b/packages/material-renderers/src/cells/MaterialDateCell.tsx
index 44478b474..af8b256b0 100644
--- a/packages/material-renderers/src/cells/MaterialDateCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialDateCell.tsx
@@ -28,23 +28,15 @@ import {
   isDateControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import Input from '@mui/material/Input';
 import merge from 'lodash/merge';
 
 export const MaterialDateCell = (props: CellProps & WithClassname) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config
-  } = props;
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
@@ -52,7 +44,7 @@ export const MaterialDateCell = (props: CellProps & WithClassname) => {
     <Input
       type='date'
       value={data || ''}
-      onChange={ev => handleChange(path, ev.target.value)}
+      onChange={(ev) => handleChange(path, ev.target.value)}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/material-renderers/src/cells/MaterialEnumCell.tsx b/packages/material-renderers/src/cells/MaterialEnumCell.tsx
index bd1b921ad..ec4d027e7 100644
--- a/packages/material-renderers/src/cells/MaterialEnumCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialEnumCell.tsx
@@ -28,14 +28,18 @@ import {
   isEnumControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsEnumCellProps, withTranslateProps } from '@jsonforms/react';
+import {
+  TranslateProps,
+  withJsonFormsEnumCellProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialEnumCell = (props: EnumCellProps & WithClassname & TranslateProps) => (
-  <MuiSelect {...props} />
-);
+export const MaterialEnumCell = (
+  props: EnumCellProps & WithClassname & TranslateProps
+) => <MuiSelect {...props} />;
 
 /**
  * Default tester for enum controls.
@@ -44,4 +48,7 @@ export const MaterialEnumCell = (props: EnumCellProps & WithClassname & Translat
 export const materialEnumCellTester: RankedTester = rankWith(2, isEnumControl);
 
 // HOC order can be reversed with https://github.com/eclipsesource/jsonforms/issues/1987
-export default withJsonFormsEnumCellProps(withTranslateProps(React.memo(MaterialEnumCell)), false);
+export default withJsonFormsEnumCellProps(
+  withTranslateProps(React.memo(MaterialEnumCell)),
+  false
+);
diff --git a/packages/material-renderers/src/cells/MaterialIntegerCell.tsx b/packages/material-renderers/src/cells/MaterialIntegerCell.tsx
index 2c038ddfd..9dcafe809 100644
--- a/packages/material-renderers/src/cells/MaterialIntegerCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialIntegerCell.tsx
@@ -28,7 +28,7 @@ import {
   isIntegerControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputInteger } from '../mui-controls/MuiInputInteger';
diff --git a/packages/material-renderers/src/cells/MaterialNumberCell.tsx b/packages/material-renderers/src/cells/MaterialNumberCell.tsx
index 892c5f163..fee375a2b 100644
--- a/packages/material-renderers/src/cells/MaterialNumberCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialNumberCell.tsx
@@ -28,7 +28,7 @@ import {
   isNumberControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputNumber } from '../mui-controls/MuiInputNumber';
diff --git a/packages/material-renderers/src/cells/MaterialNumberFormatCell.tsx b/packages/material-renderers/src/cells/MaterialNumberFormatCell.tsx
index d98801731..d5b3b89f8 100644
--- a/packages/material-renderers/src/cells/MaterialNumberFormatCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialNumberFormatCell.tsx
@@ -29,7 +29,7 @@ import {
   isNumberFormatControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputNumberFormat } from '../mui-controls/MuiInputNumberFormat';
diff --git a/packages/material-renderers/src/cells/MaterialOneOfEnumCell.tsx b/packages/material-renderers/src/cells/MaterialOneOfEnumCell.tsx
index 95c0b649e..cc475e73b 100644
--- a/packages/material-renderers/src/cells/MaterialOneOfEnumCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialOneOfEnumCell.tsx
@@ -28,19 +28,29 @@ import {
   isOneOfEnumControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsOneOfEnumCellProps, withTranslateProps } from '@jsonforms/react';
+import {
+  TranslateProps,
+  withJsonFormsOneOfEnumCellProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import { MuiSelect } from '../mui-controls/MuiSelect';
 
-export const MaterialOneOfEnumCell = (props: EnumCellProps & WithClassname & TranslateProps) => (
-  <MuiSelect {...props} />
-);
+export const MaterialOneOfEnumCell = (
+  props: EnumCellProps & WithClassname & TranslateProps
+) => <MuiSelect {...props} />;
 
 /**
  * Default tester for oneOf enum controls.
  * @type {RankedTester}
  */
-export const materialOneOfEnumCellTester: RankedTester = rankWith(2, isOneOfEnumControl);
+export const materialOneOfEnumCellTester: RankedTester = rankWith(
+  2,
+  isOneOfEnumControl
+);
 
-export default withJsonFormsOneOfEnumCellProps(withTranslateProps(React.memo(MaterialOneOfEnumCell)), false);
+export default withJsonFormsOneOfEnumCellProps(
+  withTranslateProps(React.memo(MaterialOneOfEnumCell)),
+  false
+);
diff --git a/packages/material-renderers/src/cells/MaterialTextCell.tsx b/packages/material-renderers/src/cells/MaterialTextCell.tsx
index 485728d70..35100e091 100644
--- a/packages/material-renderers/src/cells/MaterialTextCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialTextCell.tsx
@@ -28,7 +28,7 @@ import {
   isStringControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputText } from '../mui-controls/MuiInputText';
diff --git a/packages/material-renderers/src/cells/MaterialTimeCell.tsx b/packages/material-renderers/src/cells/MaterialTimeCell.tsx
index 4ec5820c7..2e820195e 100644
--- a/packages/material-renderers/src/cells/MaterialTimeCell.tsx
+++ b/packages/material-renderers/src/cells/MaterialTimeCell.tsx
@@ -28,7 +28,7 @@ import {
   isTimeControl,
   RankedTester,
   rankWith,
-  WithClassname
+  WithClassname,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import { MuiInputTime } from '../mui-controls/MuiInputTime';
diff --git a/packages/material-renderers/src/cells/index.ts b/packages/material-renderers/src/cells/index.ts
index 9d452d390..5018750ce 100644
--- a/packages/material-renderers/src/cells/index.ts
+++ b/packages/material-renderers/src/cells/index.ts
@@ -23,24 +23,24 @@
   THE SOFTWARE.
 */
 import MaterialBooleanCell, {
-  materialBooleanCellTester
+  materialBooleanCellTester,
 } from './MaterialBooleanCell';
 import MaterialBooleanToggleCell, {
-  materialBooleanToggleCellTester
+  materialBooleanToggleCellTester,
 } from './MaterialBooleanToggleCell';
 import MaterialDateCell, { materialDateCellTester } from './MaterialDateCell';
 import MaterialEnumCell, { materialEnumCellTester } from './MaterialEnumCell';
 import MaterialIntegerCell, {
-  materialIntegerCellTester
+  materialIntegerCellTester,
 } from './MaterialIntegerCell';
 import MaterialNumberCell, {
-  materialNumberCellTester
+  materialNumberCellTester,
 } from './MaterialNumberCell';
 import MaterialNumberFormatCell, {
-  materialNumberFormatCellTester
+  materialNumberFormatCellTester,
 } from './MaterialNumberFormatCell';
 import MaterialOneOfEnumCell, {
-  materialOneOfEnumCellTester
+  materialOneOfEnumCellTester,
 } from './MaterialOneOfEnumCell';
 import MaterialTextCell, { materialTextCellTester } from './MaterialTextCell';
 import MaterialTimeCell, { materialTimeCellTester } from './MaterialTimeCell';
@@ -65,7 +65,7 @@ export {
   MaterialTextCell,
   materialTextCellTester,
   MaterialTimeCell,
-  materialTimeCellTester
+  materialTimeCellTester,
 };
 import * as Customizable from './CustomizableCells';
 export { Customizable };
diff --git a/packages/material-renderers/src/complex/CombinatorProperties.tsx b/packages/material-renderers/src/complex/CombinatorProperties.tsx
index c651055ae..90443dfd7 100644
--- a/packages/material-renderers/src/complex/CombinatorProperties.tsx
+++ b/packages/material-renderers/src/complex/CombinatorProperties.tsx
@@ -36,14 +36,21 @@ interface CombinatorPropertiesProps {
 export const isLayout = (uischema: UISchemaElement): uischema is Layout =>
   uischema.hasOwnProperty('elements');
 
-export class CombinatorProperties extends React.Component<CombinatorPropertiesProps, {}> {
-
+export class CombinatorProperties extends React.Component<
+  CombinatorPropertiesProps,
+  {}
+> {
   render() {
-
     const { schema, combinatorKeyword, path } = this.props;
 
-    const otherProps: JsonSchema = omit(schema, combinatorKeyword) as JsonSchema;
-    const foundUISchema: UISchemaElement = Generate.uiSchema(otherProps, 'VerticalLayout');
+    const otherProps: JsonSchema = omit(
+      schema,
+      combinatorKeyword
+    ) as JsonSchema;
+    const foundUISchema: UISchemaElement = Generate.uiSchema(
+      otherProps,
+      'VerticalLayout'
+    );
     let isLayoutWithElements = false;
     if (foundUISchema !== null && isLayout(foundUISchema)) {
       isLayoutWithElements = foundUISchema.elements.length > 0;
diff --git a/packages/material-renderers/src/complex/DeleteDialog.tsx b/packages/material-renderers/src/complex/DeleteDialog.tsx
index 24ad8f037..65c3c7fa9 100644
--- a/packages/material-renderers/src/complex/DeleteDialog.tsx
+++ b/packages/material-renderers/src/complex/DeleteDialog.tsx
@@ -24,54 +24,63 @@
 */
 import React from 'react';
 import {
-    Button,
-    Dialog,
-    DialogActions,
-    DialogContent,
-    DialogContentText,
-    DialogTitle,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogTitle,
 } from '@mui/material';
 
 export interface DeleteDialogProps {
-    open: boolean;
-    onClose(): void;
-    onConfirm(): void;
-    onCancel(): void;
-    title: string,
-    message: string,
-    acceptText: string,
-    declineText: string
+  open: boolean;
+  onClose(): void;
+  onConfirm(): void;
+  onCancel(): void;
+  title: string;
+  message: string;
+  acceptText: string;
+  declineText: string;
 }
 
 export interface WithDeleteDialogSupport {
   openDeleteDialog(path: string, data: number): void;
 }
 
-export const DeleteDialog = React.memo(({ open, onClose, onConfirm, onCancel, title, message, acceptText, declineText }: DeleteDialogProps) => {
+export const DeleteDialog = React.memo(
+  ({
+    open,
+    onClose,
+    onConfirm,
+    onCancel,
+    title,
+    message,
+    acceptText,
+    declineText,
+  }: DeleteDialogProps) => {
     return (
-        <Dialog
-            open={open}
-            keepMounted
-            onClose={onClose}
-            aria-labelledby='alert-dialog-confirmdelete-title'
-            aria-describedby='alert-dialog-confirmdelete-description'
-        >
-            <DialogTitle id='alert-dialog-confirmdelete-title'>
-                {title}
-            </DialogTitle>
-            <DialogContent>
-                <DialogContentText id='alert-dialog-confirmdelete-description'>
-                    {message}
-                </DialogContentText>
-            </DialogContent>
-            <DialogActions>
-                <Button onClick={onCancel} color='primary'>
-                    {declineText}
-                </Button>
-                <Button onClick={onConfirm} color='primary'>
-                    {acceptText}
-                </Button>
-            </DialogActions>
-        </Dialog>
+      <Dialog
+        open={open}
+        keepMounted
+        onClose={onClose}
+        aria-labelledby='alert-dialog-confirmdelete-title'
+        aria-describedby='alert-dialog-confirmdelete-description'
+      >
+        <DialogTitle id='alert-dialog-confirmdelete-title'>{title}</DialogTitle>
+        <DialogContent>
+          <DialogContentText id='alert-dialog-confirmdelete-description'>
+            {message}
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={onCancel} color='primary'>
+            {declineText}
+          </Button>
+          <Button onClick={onConfirm} color='primary'>
+            {acceptText}
+          </Button>
+        </DialogActions>
+      </Dialog>
     );
-});
+  }
+);
diff --git a/packages/material-renderers/src/complex/MaterialAllOfRenderer.tsx b/packages/material-renderers/src/complex/MaterialAllOfRenderer.tsx
index 1146b715f..3bff5def5 100644
--- a/packages/material-renderers/src/complex/MaterialAllOfRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialAllOfRenderer.tsx
@@ -32,7 +32,7 @@ import {
   JsonSchema,
   RankedTester,
   rankWith,
-  StatePropsOfCombinator
+  StatePropsOfCombinator,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAllOfProps } from '@jsonforms/react';
 
@@ -44,7 +44,7 @@ export const MaterialAllOfRenderer = ({
   cells,
   path,
   uischemas,
-  uischema
+  uischema,
 }: StatePropsOfCombinator) => {
   const delegateUISchema = findMatchingUISchema(uischemas)(
     schema,
diff --git a/packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx b/packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx
index 0e0ea2654..178cff836 100644
--- a/packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialAnyOfRenderer.tsx
@@ -30,7 +30,7 @@ import {
   JsonSchema,
   RankedTester,
   rankWith,
-  StatePropsOfCombinator
+  StatePropsOfCombinator,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsAnyOfProps } from '@jsonforms/react';
 import { Hidden, Tab, Tabs } from '@mui/material';
@@ -45,7 +45,7 @@ export const MaterialAnyOfRenderer = ({
   renderers,
   cells,
   uischema,
-  uischemas
+  uischemas,
 }: StatePropsOfCombinator) => {
   const [selectedAnyOf, setSelectedAnyOf] = useState(indexOfFittingSchema || 0);
   const handleChange = useCallback(
@@ -70,7 +70,7 @@ export const MaterialAnyOfRenderer = ({
         path={path}
       />
       <Tabs value={selectedAnyOf} onChange={handleChange}>
-        {anyOfRenderInfos.map(anyOfRenderInfo => (
+        {anyOfRenderInfos.map((anyOfRenderInfo) => (
           <Tab key={anyOfRenderInfo.label} label={anyOfRenderInfo.label} />
         ))}
       </Tabs>
diff --git a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
index 40019de71..ae9bc6e6d 100644
--- a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
@@ -35,14 +35,17 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
   const [rowData, setRowData] = useState(undefined);
   const { removeItems, visible } = props;
 
-  const openDeleteDialog = useCallback((p: string, rowIndex: number) => {
-    setOpen(true);
-    setPath(p);
-    setRowData(rowIndex);
-  }, [setOpen, setPath, setRowData]);
+  const openDeleteDialog = useCallback(
+    (p: string, rowIndex: number) => {
+      setOpen(true);
+      setPath(p);
+      setRowData(rowIndex);
+    },
+    [setOpen, setPath, setRowData]
+  );
   const deleteCancel = useCallback(() => setOpen(false), [setOpen]);
   const deleteConfirm = useCallback(() => {
-    const p = path.substring(0, path.lastIndexOf(('.')));
+    const p = path.substring(0, path.lastIndexOf('.'));
     removeItems(p, [rowData])();
     setOpen(false);
   }, [setOpen, path, rowData]);
@@ -50,10 +53,7 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
 
   return (
     <Hidden xsUp={!visible}>
-      <MaterialTableControl
-        {...props}
-        openDeleteDialog={openDeleteDialog}
-      />
+      <MaterialTableControl {...props} openDeleteDialog={openDeleteDialog} />
       <DeleteDialog
         open={open}
         onCancel={deleteCancel}
diff --git a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
index ef08f2045..63a55176f 100644
--- a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
@@ -10,7 +10,7 @@ import {
   rankWith,
   schemaMatches,
   schemaSubPathMatches,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 
 import { withJsonFormsMultiEnumProps } from '@jsonforms/react';
@@ -20,7 +20,7 @@ import {
   FormControlLabel,
   FormGroup,
   FormHelperText,
-  Hidden
+  Hidden,
 } from '@mui/material';
 import isEmpty from 'lodash/isEmpty';
 import React from 'react';
@@ -72,9 +72,7 @@ export const MaterialEnumArrayRenderer = ({
             );
           })}
         </FormGroup>
-        <FormHelperText error>
-          {errors}
-        </FormHelperText>
+        <FormHelperText error>{errors}</FormHelperText>
       </FormControl>
     </Hidden>
   );
@@ -96,12 +94,12 @@ export const materialEnumArrayRendererTester: RankedTester = rankWith(
     uiTypeIs('Control'),
     and(
       schemaMatches(
-        schema =>
+        (schema) =>
           hasType(schema, 'array') &&
           !Array.isArray(schema.items) &&
           schema.uniqueItems === true
       ),
-      schemaSubPathMatches('items', schema => {
+      schemaSubPathMatches('items', (schema) => {
         return hasOneOfItems(schema) || hasEnumItems(schema);
       })
     )
diff --git a/packages/material-renderers/src/complex/MaterialObjectRenderer.tsx b/packages/material-renderers/src/complex/MaterialObjectRenderer.tsx
index 77bcf506d..0e5339b32 100644
--- a/packages/material-renderers/src/complex/MaterialObjectRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialObjectRenderer.tsx
@@ -29,7 +29,7 @@ import {
   isObjectControl,
   RankedTester,
   rankWith,
-  StatePropsOfControlWithDetail
+  StatePropsOfControlWithDetail,
 } from '@jsonforms/core';
 import { JsonFormsDispatch, withJsonFormsDetailProps } from '@jsonforms/react';
 import { Hidden } from '@mui/material';
@@ -45,7 +45,7 @@ export const MaterialObjectRenderer = ({
   visible,
   enabled,
   uischema,
-  rootSchema
+  rootSchema,
 }: StatePropsOfControlWithDetail) => {
   const detailUiSchema = useMemo(
     () =>
@@ -54,7 +54,10 @@ export const MaterialObjectRenderer = ({
         schema,
         uischema.scope,
         path,
-        () => isEmpty(path) ? Generate.uiSchema(schema, 'VerticalLayout') : {...Generate.uiSchema(schema, 'Group'), label},
+        () =>
+          isEmpty(path)
+            ? Generate.uiSchema(schema, 'VerticalLayout')
+            : { ...Generate.uiSchema(schema, 'Group'), label },
         uischema,
         rootSchema
       ),
diff --git a/packages/material-renderers/src/complex/MaterialOneOfRenderer.tsx b/packages/material-renderers/src/complex/MaterialOneOfRenderer.tsx
index 93300b612..6ea9a6fbf 100644
--- a/packages/material-renderers/src/complex/MaterialOneOfRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialOneOfRenderer.tsx
@@ -44,108 +44,125 @@ import {
   DialogTitle,
   Hidden,
   Tab,
-  Tabs
+  Tabs,
 } from '@mui/material';
-import {
-  JsonFormsDispatch,
-  withJsonFormsOneOfProps
-} from '@jsonforms/react';
+import { JsonFormsDispatch, withJsonFormsOneOfProps } from '@jsonforms/react';
 import CombinatorProperties from './CombinatorProperties';
 
 export interface OwnOneOfProps extends OwnPropsOfControl {
   indexOfFittingSchema?: number;
 }
 
-export const MaterialOneOfRenderer =
-  ({ handleChange, schema, path, renderers, cells, rootSchema, id, visible, indexOfFittingSchema, uischema, uischemas, data }: CombinatorRendererProps) => {
-    const [open, setOpen] = useState(false);
-    const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
-    const [newSelectedIndex, setNewSelectedIndex] = useState(0);
-    const handleClose = useCallback(() => setOpen(false), [setOpen]);
-    const cancel = useCallback(() => {
-      setOpen(false);
-    }, [setOpen]);
-    const oneOfRenderInfos = createCombinatorRenderInfos(
-      (schema as JsonSchema).oneOf,
-      rootSchema,
-      'oneOf',
-      uischema,
-      path,
-      uischemas
-      );
+export const MaterialOneOfRenderer = ({
+  handleChange,
+  schema,
+  path,
+  renderers,
+  cells,
+  rootSchema,
+  id,
+  visible,
+  indexOfFittingSchema,
+  uischema,
+  uischemas,
+  data,
+}: CombinatorRendererProps) => {
+  const [open, setOpen] = useState(false);
+  const [selectedIndex, setSelectedIndex] = useState(indexOfFittingSchema || 0);
+  const [newSelectedIndex, setNewSelectedIndex] = useState(0);
+  const handleClose = useCallback(() => setOpen(false), [setOpen]);
+  const cancel = useCallback(() => {
+    setOpen(false);
+  }, [setOpen]);
+  const oneOfRenderInfos = createCombinatorRenderInfos(
+    (schema as JsonSchema).oneOf,
+    rootSchema,
+    'oneOf',
+    uischema,
+    path,
+    uischemas
+  );
 
-    const openNewTab = (newIndex: number) => {
-      handleChange(
-        path,
-        createDefaultValue(oneOfRenderInfos[newIndex].schema)
-      );
-      setSelectedIndex(newIndex);
-    }
+  const openNewTab = (newIndex: number) => {
+    handleChange(path, createDefaultValue(oneOfRenderInfos[newIndex].schema));
+    setSelectedIndex(newIndex);
+  };
 
-    const confirm = useCallback(() => {
-      openNewTab(newSelectedIndex)
-      setOpen(false);
-    }, [handleChange, createDefaultValue, newSelectedIndex]);
-    const handleTabChange = useCallback((_event: any, newOneOfIndex: number) => {
+  const confirm = useCallback(() => {
+    openNewTab(newSelectedIndex);
+    setOpen(false);
+  }, [handleChange, createDefaultValue, newSelectedIndex]);
+  const handleTabChange = useCallback(
+    (_event: any, newOneOfIndex: number) => {
       setNewSelectedIndex(newOneOfIndex);
-      if(isEmpty(data)) {
-        openNewTab(newOneOfIndex)
+      if (isEmpty(data)) {
+        openNewTab(newOneOfIndex);
       } else {
         setOpen(true);
       }
+    },
+    [setOpen, setSelectedIndex, data]
+  );
 
-    }, [setOpen, setSelectedIndex, data]);
-
-    return (
-      <Hidden xsUp={!visible}>
-        <CombinatorProperties
-          schema={schema}
-          combinatorKeyword={'oneOf'}
-          path={path}
-        />
-        <Tabs value={selectedIndex} onChange={handleTabChange}>
-          {oneOfRenderInfos.map(oneOfRenderInfo => <Tab key={oneOfRenderInfo.label} label={oneOfRenderInfo.label} />)}
-        </Tabs>
-        {
-          oneOfRenderInfos.map((oneOfRenderInfo, oneOfIndex) => (
-            selectedIndex === oneOfIndex && (
-              <JsonFormsDispatch
-                key={oneOfIndex}
-                schema={oneOfRenderInfo.schema}
-                uischema={oneOfRenderInfo.uischema}
-                path={path}
-                renderers={renderers}
-                cells={cells}
-              />
-            )
-          ))
-        }
-        <Dialog
-          open={open}
-          onClose={handleClose}
-          aria-labelledby='alert-dialog-title'
-          aria-describedby='alert-dialog-description'
-        >
-          <DialogTitle id='alert-dialog-title'>{'Clear form?'}</DialogTitle>
-          <DialogContent>
-            <DialogContentText id='alert-dialog-description'>
-              Your data will be cleared if you navigate away from this tab.
-              Do you want to proceed?
-            </DialogContentText>
-          </DialogContent>
-          <DialogActions>
-            <Button onClick={cancel} color='primary'>
-              No
-            </Button>
-            <Button onClick={confirm} color='primary' autoFocus id={`oneOf-${id}-confirm-yes`}>
-              Yes
-            </Button>
-          </DialogActions>
-        </Dialog>
-      </Hidden>
-    );
-  };
+  return (
+    <Hidden xsUp={!visible}>
+      <CombinatorProperties
+        schema={schema}
+        combinatorKeyword={'oneOf'}
+        path={path}
+      />
+      <Tabs value={selectedIndex} onChange={handleTabChange}>
+        {oneOfRenderInfos.map((oneOfRenderInfo) => (
+          <Tab key={oneOfRenderInfo.label} label={oneOfRenderInfo.label} />
+        ))}
+      </Tabs>
+      {oneOfRenderInfos.map(
+        (oneOfRenderInfo, oneOfIndex) =>
+          selectedIndex === oneOfIndex && (
+            <JsonFormsDispatch
+              key={oneOfIndex}
+              schema={oneOfRenderInfo.schema}
+              uischema={oneOfRenderInfo.uischema}
+              path={path}
+              renderers={renderers}
+              cells={cells}
+            />
+          )
+      )}
+      <Dialog
+        open={open}
+        onClose={handleClose}
+        aria-labelledby='alert-dialog-title'
+        aria-describedby='alert-dialog-description'
+      >
+        <DialogTitle id='alert-dialog-title'>{'Clear form?'}</DialogTitle>
+        <DialogContent>
+          <DialogContentText id='alert-dialog-description'>
+            Your data will be cleared if you navigate away from this tab. Do you
+            want to proceed?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={cancel} color='primary'>
+            No
+          </Button>
+          <Button
+            onClick={confirm}
+            color='primary'
+            autoFocus
+            id={`oneOf-${id}-confirm-yes`}
+          >
+            Yes
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Hidden>
+  );
+};
 
-export const materialOneOfControlTester: RankedTester = rankWith(3, isOneOfControl);
+export const materialOneOfControlTester: RankedTester = rankWith(
+  3,
+  isOneOfControl
+);
 
 export default withJsonFormsOneOfProps(MaterialOneOfRenderer);
diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
index 059e790e2..4fe04a604 100644
--- a/packages/material-renderers/src/complex/MaterialTableControl.tsx
+++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -27,7 +27,7 @@ import union from 'lodash/union';
 import {
   DispatchCell,
   JsonFormsStateContext,
-  useJsonForms
+  useJsonForms,
 } from '@jsonforms/react';
 import startCase from 'lodash/startCase';
 import range from 'lodash/range';
@@ -42,7 +42,7 @@ import {
   TableCell,
   TableHead,
   TableRow,
-  Typography
+  Typography,
 } from '@mui/material';
 import {
   ArrayLayoutProps,
@@ -54,7 +54,8 @@ import {
   Resolve,
   JsonFormsRendererRegistryEntry,
   JsonFormsCellRendererRegistryEntry,
-  encode
+  encode,
+  ArrayTranslations,
 } from '@jsonforms/core';
 import DeleteIcon from '@mui/icons-material/Delete';
 import ArrowDownward from '@mui/icons-material/ArrowDownward';
@@ -65,7 +66,6 @@ import NoBorderTableCell from './NoBorderTableCell';
 import TableToolbar from './TableToolbar';
 import { ErrorObject } from 'ajv';
 import merge from 'lodash/merge';
-import { ArrayTranslations } from '@jsonforms/core';
 
 // we want a cell that doesn't automatically span
 const styles = {
@@ -74,15 +74,15 @@ const styles = {
     height: '50px',
     paddingLeft: 0,
     paddingRight: 0,
-    textAlign: 'center'
+    textAlign: 'center',
   },
   fixedCellSmall: {
     width: '50px',
     height: '50px',
     paddingLeft: 0,
     paddingRight: 0,
-    textAlign: 'center'
-  }
+    textAlign: 'center',
+  },
 };
 
 const generateCells = (
@@ -93,7 +93,7 @@ const generateCells = (
   cells?: JsonFormsCellRendererRegistryEntry[]
 ) => {
   if (schema.type === 'object') {
-    return getValidColumnProps(schema).map(prop => {
+    return getValidColumnProps(schema).map((prop) => {
       const cellPath = Paths.compose(rowPath, prop);
       const props = {
         propName: prop,
@@ -102,7 +102,7 @@ const generateCells = (
         rowPath,
         cellPath,
         enabled,
-        cells
+        cells,
       };
       return <Cell key={cellPath} {...props} />;
     });
@@ -112,16 +112,19 @@ const generateCells = (
       schema,
       rowPath,
       cellPath: rowPath,
-      enabled
+      enabled,
     };
     return <Cell key={rowPath} {...props} />;
   }
 };
 
 const getValidColumnProps = (scopedSchema: JsonSchema) => {
-  if (scopedSchema.type === 'object' && typeof scopedSchema.properties === 'object') {
+  if (
+    scopedSchema.type === 'object' &&
+    typeof scopedSchema.properties === 'object'
+  ) {
     return Object.keys(scopedSchema.properties).filter(
-      prop => scopedSchema.properties[prop].type !== 'array'
+      (prop) => scopedSchema.properties[prop].type !== 'array'
     );
   }
   // primitives
@@ -175,7 +178,7 @@ const ctxToNonEmptyCellProps = (
       errorsAt(
         path,
         ownProps.schema,
-        p => p === path
+        (p) => p === path
       )(ctx.core.errors).map((error: ErrorObject) => error.message)
     )
   );
@@ -188,144 +191,168 @@ const ctxToNonEmptyCellProps = (
     path,
     enabled: ownProps.enabled,
     cells: ownProps.cells || ctx.cells,
-    renderers: ownProps.renderers || ctx.renderers
+    renderers: ownProps.renderers || ctx.renderers,
   };
 };
 
 const controlWithoutLabel = (scope: string): ControlElement => ({
   type: 'Control',
   scope: scope,
-  label: false
+  label: false,
 });
 
 interface NonEmptyCellComponentProps {
-  path: string,
-  propName?: string,
-  schema: JsonSchema,
-  rootSchema: JsonSchema,
-  errors: string,
-  enabled: boolean,
-  renderers?: JsonFormsRendererRegistryEntry[],
-  cells?: JsonFormsCellRendererRegistryEntry[],
-  isValid: boolean
+  path: string;
+  propName?: string;
+  schema: JsonSchema;
+  rootSchema: JsonSchema;
+  errors: string;
+  enabled: boolean;
+  renderers?: JsonFormsRendererRegistryEntry[];
+  cells?: JsonFormsCellRendererRegistryEntry[];
+  isValid: boolean;
 }
-const NonEmptyCellComponent = React.memo(({path, propName, schema, rootSchema, errors, enabled, renderers, cells, isValid}:NonEmptyCellComponentProps) => {
-  return (
-    <NoBorderTableCell>
-      {schema.properties ? (
-        <DispatchCell
-          schema={Resolve.schema(
-            schema,
-            `#/properties/${encode(propName)}`,
-            rootSchema
-          )}
-          uischema={controlWithoutLabel(`#/properties/${encode(propName)}`)}
-          path={path}
-          enabled={enabled}
-          renderers={renderers}
-          cells={cells}
-        />
-      ) : (
-        <DispatchCell
-          schema={schema}
-          uischema={controlWithoutLabel('#')}
-          path={path}
-          enabled={enabled}
-          renderers={renderers}
-          cells={cells}
-        />
-      )}
-      <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
-    </NoBorderTableCell>
-  );
-});
+const NonEmptyCellComponent = React.memo(
+  ({
+    path,
+    propName,
+    schema,
+    rootSchema,
+    errors,
+    enabled,
+    renderers,
+    cells,
+    isValid,
+  }: NonEmptyCellComponentProps) => {
+    return (
+      <NoBorderTableCell>
+        {schema.properties ? (
+          <DispatchCell
+            schema={Resolve.schema(
+              schema,
+              `#/properties/${encode(propName)}`,
+              rootSchema
+            )}
+            uischema={controlWithoutLabel(`#/properties/${encode(propName)}`)}
+            path={path}
+            enabled={enabled}
+            renderers={renderers}
+            cells={cells}
+          />
+        ) : (
+          <DispatchCell
+            schema={schema}
+            uischema={controlWithoutLabel('#')}
+            path={path}
+            enabled={enabled}
+            renderers={renderers}
+            cells={cells}
+          />
+        )}
+        <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
+      </NoBorderTableCell>
+    );
+  }
+);
 
 const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
   const ctx = useJsonForms();
   const emptyCellProps = ctxToNonEmptyCellProps(ctx, ownProps);
 
   const isValid = isEmpty(emptyCellProps.errors);
-  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid}/>
+  return <NonEmptyCellComponent {...emptyCellProps} isValid={isValid} />;
 };
 
 interface NonEmptyRowProps {
   childPath: string;
   schema: JsonSchema;
   rowIndex: number;
-  moveUpCreator: (path:string, position: number)=> ()=> void;
-  moveDownCreator: (path:string, position: number)=> ()=> void;
+  moveUpCreator: (path: string, position: number) => () => void;
+  moveDownCreator: (path: string, position: number) => () => void;
   enableUp: boolean;
   enableDown: boolean;
   showSortButtons: boolean;
   enabled: boolean;
   cells?: JsonFormsCellRendererRegistryEntry[];
   path: string;
-  translations: ArrayTranslations
+  translations: ArrayTranslations;
 }
 
-const NonEmptyRowComponent =
-  ({
-    childPath,
-    schema,
-    rowIndex,
-    openDeleteDialog,
-    moveUpCreator,
-    moveDownCreator,
-    enableUp,
-    enableDown,
-    showSortButtons,
-    enabled,
-    cells,
-    path,
-    translations
-  }: NonEmptyRowProps & WithDeleteDialogSupport) => {
-    const moveUp = useMemo(() => moveUpCreator(path, rowIndex),[moveUpCreator, path, rowIndex]);
-    const moveDown = useMemo(() => moveDownCreator(path, rowIndex),[moveDownCreator, path, rowIndex]);
-    return (
-      <TableRow key={childPath} hover>
-        {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
-        {enabled ? (
-          <NoBorderTableCell
-            style={showSortButtons ? styles.fixedCell : styles.fixedCellSmall}
+const NonEmptyRowComponent = ({
+  childPath,
+  schema,
+  rowIndex,
+  openDeleteDialog,
+  moveUpCreator,
+  moveDownCreator,
+  enableUp,
+  enableDown,
+  showSortButtons,
+  enabled,
+  cells,
+  path,
+  translations,
+}: NonEmptyRowProps & WithDeleteDialogSupport) => {
+  const moveUp = useMemo(
+    () => moveUpCreator(path, rowIndex),
+    [moveUpCreator, path, rowIndex]
+  );
+  const moveDown = useMemo(
+    () => moveDownCreator(path, rowIndex),
+    [moveDownCreator, path, rowIndex]
+  );
+  return (
+    <TableRow key={childPath} hover>
+      {generateCells(NonEmptyCell, schema, childPath, enabled, cells)}
+      {enabled ? (
+        <NoBorderTableCell
+          style={showSortButtons ? styles.fixedCell : styles.fixedCellSmall}
+        >
+          <Grid
+            container
+            direction='row'
+            justifyContent='flex-end'
+            alignItems='center'
           >
-            <Grid
-              container
-              direction='row'
-              justifyContent='flex-end'
-              alignItems='center'
-            >
-              {showSortButtons ? (
-                <Fragment>
-                  <Grid item>
-                    <IconButton aria-label={translations.upAriaLabel} onClick={moveUp} disabled={!enableUp} size='large'>
-                      <ArrowUpward />
-                    </IconButton>
-                  </Grid>
-                  <Grid item>
-                    <IconButton
-                      aria-label={translations.downAriaLabel}
-                      onClick={moveDown}
-                      disabled={!enableDown}
-                      size='large'>
-                      <ArrowDownward />
-                    </IconButton>
-                  </Grid>
-                </Fragment>
-              ) : null}
-              <Grid item>
-                <IconButton
-                  aria-label={translations.removeAriaLabel}
-                  onClick={() => openDeleteDialog(childPath, rowIndex)}
-                  size='large'>
-                  <DeleteIcon />
-                </IconButton>
-              </Grid>
+            {showSortButtons ? (
+              <Fragment>
+                <Grid item>
+                  <IconButton
+                    aria-label={translations.upAriaLabel}
+                    onClick={moveUp}
+                    disabled={!enableUp}
+                    size='large'
+                  >
+                    <ArrowUpward />
+                  </IconButton>
+                </Grid>
+                <Grid item>
+                  <IconButton
+                    aria-label={translations.downAriaLabel}
+                    onClick={moveDown}
+                    disabled={!enableDown}
+                    size='large'
+                  >
+                    <ArrowDownward />
+                  </IconButton>
+                </Grid>
+              </Fragment>
+            ) : null}
+            <Grid item>
+              <IconButton
+                aria-label={translations.removeAriaLabel}
+                onClick={() => openDeleteDialog(childPath, rowIndex)}
+                size='large'
+              >
+                <DeleteIcon />
+              </IconButton>
             </Grid>
-          </NoBorderTableCell>
-        ) : null}
-      </TableRow>
-    );
-  };
+          </Grid>
+        </NoBorderTableCell>
+      ) : null}
+    </TableRow>
+  );
+};
 export const NonEmptyRow = React.memo(NonEmptyRowComponent);
 interface TableRowsProp {
   data: number;
@@ -350,12 +377,17 @@ const TableRows = ({
   config,
   enabled,
   cells,
-  translations
+  translations,
 }: TableRowsProp & WithDeleteDialogSupport) => {
   const isEmptyTable = data === 0;
 
   if (isEmptyTable) {
-    return <EmptyTable numColumns={getValidColumnProps(schema).length + 1} translations={translations}/>;
+    return (
+      <EmptyTable
+        numColumns={getValidColumnProps(schema).length + 1}
+        translations={translations}
+      />
+    );
   }
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -376,7 +408,10 @@ const TableRows = ({
             moveDownCreator={moveDown}
             enableUp={index !== 0}
             enableDown={index !== data - 1}
-            showSortButtons={appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayTableSortButtons}
+            showSortButtons={
+              appliedUiSchemaOptions.showSortButtons ||
+              appliedUiSchemaOptions.showArrayTableSortButtons
+            }
             enabled={enabled}
             cells={cells}
             path={path}
@@ -405,7 +440,7 @@ export class MaterialTableControl extends React.Component<
       visible,
       enabled,
       cells,
-      translations
+      translations,
     } = this.props;
 
     const controlElement = uischema as ControlElement;
@@ -438,7 +473,11 @@ export class MaterialTableControl extends React.Component<
             )}
           </TableHead>
           <TableBody>
-            <TableRows openDeleteDialog={openDeleteDialog} translations={translations} {...this.props} />
+            <TableRows
+              openDeleteDialog={openDeleteDialog}
+              translations={translations}
+              {...this.props}
+            />
           </TableBody>
         </Table>
       </Hidden>
diff --git a/packages/material-renderers/src/complex/NoBorderTableCell.tsx b/packages/material-renderers/src/complex/NoBorderTableCell.tsx
index b5e3c1a55..d8e121845 100644
--- a/packages/material-renderers/src/complex/NoBorderTableCell.tsx
+++ b/packages/material-renderers/src/complex/NoBorderTableCell.tsx
@@ -27,13 +27,11 @@ import { TableCell } from '@mui/material';
 import React from 'react';
 
 const StyledTableCell = styled(TableCell)({
-  borderBottom: 'none'
+  borderBottom: 'none',
 });
 
 const NoBorderTableCell = ({ children, ...otherProps }: any) => (
-  <StyledTableCell {...otherProps}>
-    {children}
-  </StyledTableCell>
+  <StyledTableCell {...otherProps}>{children}</StyledTableCell>
 );
 
-export default (NoBorderTableCell);
+export default NoBorderTableCell;
diff --git a/packages/material-renderers/src/complex/TableToolbar.tsx b/packages/material-renderers/src/complex/TableToolbar.tsx
index 69bb3adf6..a248e7279 100644
--- a/packages/material-renderers/src/complex/TableToolbar.tsx
+++ b/packages/material-renderers/src/complex/TableToolbar.tsx
@@ -27,17 +27,12 @@ import {
   ControlElement,
   createDefaultValue,
   JsonSchema,
+  ArrayTranslations,
 } from '@jsonforms/core';
-import {
-  IconButton,
-  TableRow,
-  Tooltip
-} from '@mui/material';
-import { Grid, Typography } from '@mui/material';
+import { IconButton, TableRow, Tooltip, Grid, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import ValidationIcon from './ValidationIcon';
 import NoBorderTableCell from './NoBorderTableCell';
-import { ArrayTranslations } from '@jsonforms/core';
 
 export interface MaterialTableToolbarProps {
   numColumns: number;
@@ -55,7 +50,7 @@ export interface MaterialTableToolbarProps {
 const fixedCellSmall = {
   paddingLeft: 0,
   paddingRight: 0,
-}
+};
 
 const TableToolbar = React.memo(
   ({
@@ -66,7 +61,7 @@ const TableToolbar = React.memo(
     addItem,
     schema,
     enabled,
-    translations
+    translations,
   }: MaterialTableToolbarProps) => (
     <TableRow>
       <NoBorderTableCell colSpan={numColumns}>
@@ -80,19 +75,19 @@ const TableToolbar = React.memo(
             <Typography variant={'h6'}>{label}</Typography>
           </Grid>
           <Grid item>
-            {errors.length !== 0 &&
+            {errors.length !== 0 && (
               <Grid item>
                 <ValidationIcon
                   id='tooltip-validation'
                   errorMessages={errors}
                 />
               </Grid>
-            }
+            )}
           </Grid>
         </Grid>
       </NoBorderTableCell>
       {enabled ? (
-        <NoBorderTableCell align='right' style={ fixedCellSmall }>
+        <NoBorderTableCell align='right' style={fixedCellSmall}>
           <Tooltip
             id='tooltip-add'
             title={translations.addTooltip}
@@ -101,7 +96,8 @@ const TableToolbar = React.memo(
             <IconButton
               aria-label={translations.addAriaLabel}
               onClick={addItem(path, createDefaultValue(schema))}
-              size='large'>
+              size='large'
+            >
               <AddIcon />
             </IconButton>
           </Tooltip>
diff --git a/packages/material-renderers/src/complex/ValidationIcon.tsx b/packages/material-renderers/src/complex/ValidationIcon.tsx
index d80e1fa1a..21fb98166 100644
--- a/packages/material-renderers/src/complex/ValidationIcon.tsx
+++ b/packages/material-renderers/src/complex/ValidationIcon.tsx
@@ -25,14 +25,10 @@
 import React from 'react';
 
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import {
-  Badge,
-  Tooltip,
-  styled
-} from '@mui/material';
+import { Badge, Tooltip, styled } from '@mui/material';
 
 const StyledBadge = styled(Badge)(({ theme }: any) => ({
-  color: theme.palette.error.main
+  color: theme.palette.error.main,
 }));
 
 export interface ValidationProps {
@@ -40,18 +36,14 @@ export interface ValidationProps {
   id: string;
 }
 
-const ValidationIcon: React.FC<ValidationProps> =
-  ({ errorMessages, id }) => {
-    return (
-      <Tooltip
-        id={id}
-        title={errorMessages}
-      >
-        <StyledBadge badgeContent={errorMessages.split('\n').length}>
-          <ErrorOutlineIcon color='inherit'/>
-        </StyledBadge>
-      </Tooltip>
-    );
+const ValidationIcon: React.FC<ValidationProps> = ({ errorMessages, id }) => {
+  return (
+    <Tooltip id={id} title={errorMessages}>
+      <StyledBadge badgeContent={errorMessages.split('\n').length}>
+        <ErrorOutlineIcon color='inherit' />
+      </StyledBadge>
+    </Tooltip>
+  );
 };
 
 export default ValidationIcon;
diff --git a/packages/material-renderers/src/complex/index.ts b/packages/material-renderers/src/complex/index.ts
index e91d4bcd1..d2648a17c 100644
--- a/packages/material-renderers/src/complex/index.ts
+++ b/packages/material-renderers/src/complex/index.ts
@@ -27,23 +27,23 @@ import {
   isPrimitiveArrayControl,
   or,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import MaterialArrayControlRenderer from './MaterialArrayControlRenderer';
 import MaterialObjectRenderer, {
-  materialObjectControlTester
+  materialObjectControlTester,
 } from './MaterialObjectRenderer';
 import MaterialAllOfRenderer, {
-  materialAllOfControlTester
+  materialAllOfControlTester,
 } from './MaterialAllOfRenderer';
 import MaterialAnyOfRenderer, {
-  materialAnyOfControlTester
+  materialAnyOfControlTester,
 } from './MaterialAnyOfRenderer';
 import MaterialOneOfRenderer, {
-  materialOneOfControlTester
+  materialOneOfControlTester,
 } from './MaterialOneOfRenderer';
 import MaterialEnumArrayRenderer, {
-  materialEnumArrayRendererTester
+  materialEnumArrayRendererTester,
 } from './MaterialEnumArrayRenderer';
 
 export const materialArrayControlTester: RankedTester = rankWith(
diff --git a/packages/material-renderers/src/controls/MaterialAnyOfStringOrEnumControl.tsx b/packages/material-renderers/src/controls/MaterialAnyOfStringOrEnumControl.tsx
index e8abf6326..8a1b42bb3 100644
--- a/packages/material-renderers/src/controls/MaterialAnyOfStringOrEnumControl.tsx
+++ b/packages/material-renderers/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(
diff --git a/packages/material-renderers/src/controls/MaterialBooleanControl.tsx b/packages/material-renderers/src/controls/MaterialBooleanControl.tsx
index f84be9854..cf7def8df 100644
--- a/packages/material-renderers/src/controls/MaterialBooleanControl.tsx
+++ b/packages/material-renderers/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,
               }}
             />
           }
diff --git a/packages/material-renderers/src/controls/MaterialBooleanToggleControl.tsx b/packages/material-renderers/src/controls/MaterialBooleanToggleControl.tsx
index 10234be07..9c77258ce 100644
--- a/packages/material-renderers/src/controls/MaterialBooleanToggleControl.tsx
+++ b/packages/material-renderers/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,
               }}
             />
           }
diff --git a/packages/material-renderers/src/controls/MaterialDateControl.tsx b/packages/material-renderers/src/controls/MaterialDateControl.tsx
index 0275bff90..3ae84b820 100644
--- a/packages/material-renderers/src/controls/MaterialDateControl.tsx
+++ b/packages/material-renderers/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>
   );
diff --git a/packages/material-renderers/src/controls/MaterialDateTimeControl.tsx b/packages/material-renderers/src/controls/MaterialDateTimeControl.tsx
index 7712db90e..22cddae59 100644
--- a/packages/material-renderers/src/controls/MaterialDateTimeControl.tsx
+++ b/packages/material-renderers/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>
   );
diff --git a/packages/material-renderers/src/controls/MaterialEnumControl.tsx b/packages/material-renderers/src/controls/MaterialEnumControl.tsx
index 5a9438223..660e685d1 100644
--- a/packages/material-renderers/src/controls/MaterialEnumControl.tsx
+++ b/packages/material-renderers/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
+);
diff --git a/packages/material-renderers/src/controls/MaterialInputControl.tsx b/packages/material-renderers/src/controls/MaterialInputControl.tsx
index 1bca9476c..c9fd89bc6 100644
--- a/packages/material-renderers/src/controls/MaterialInputControl.tsx
+++ b/packages/material-renderers/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>
   );
diff --git a/packages/material-renderers/src/controls/MaterialIntegerControl.tsx b/packages/material-renderers/src/controls/MaterialIntegerControl.tsx
index edef3745e..5c6b88249 100644
--- a/packages/material-renderers/src/controls/MaterialIntegerControl.tsx
+++ b/packages/material-renderers/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';
diff --git a/packages/material-renderers/src/controls/MaterialNativeControl.tsx b/packages/material-renderers/src/controls/MaterialNativeControl.tsx
index d3c1ab8d7..3952ff086 100644
--- a/packages/material-renderers/src/controls/MaterialNativeControl.tsx
+++ b/packages/material-renderers/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}
diff --git a/packages/material-renderers/src/controls/MaterialNumberControl.tsx b/packages/material-renderers/src/controls/MaterialNumberControl.tsx
index 85fceb9be..c79a04817 100644
--- a/packages/material-renderers/src/controls/MaterialNumberControl.tsx
+++ b/packages/material-renderers/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';
diff --git a/packages/material-renderers/src/controls/MaterialOneOfEnumControl.tsx b/packages/material-renderers/src/controls/MaterialOneOfEnumControl.tsx
index 6e3cec060..d7140f022 100644
--- a/packages/material-renderers/src/controls/MaterialOneOfEnumControl.tsx
+++ b/packages/material-renderers/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
+);
diff --git a/packages/material-renderers/src/controls/MaterialOneOfRadioGroupControl.tsx b/packages/material-renderers/src/controls/MaterialOneOfRadioGroupControl.tsx
index 981acce4e..f6b194de8 100644
--- a/packages/material-renderers/src/controls/MaterialOneOfRadioGroupControl.tsx
+++ b/packages/material-renderers/src/controls/MaterialOneOfRadioGroupControl.tsx
@@ -24,7 +24,7 @@
 */
 import React from 'react';
 import {
-    and,
+  and,
   ControlProps,
   isOneOfEnumControl,
   optionIs,
@@ -35,8 +35,10 @@ import {
 import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
 import { MaterialRadioGroup } from './MaterialRadioGroup';
 
-export const MaterialOneOfRadioGroupControl = (props: ControlProps & OwnPropsOfEnum) => {
-  return <MaterialRadioGroup {...props}/>;
+export const MaterialOneOfRadioGroupControl = (
+  props: ControlProps & OwnPropsOfEnum
+) => {
+  return <MaterialRadioGroup {...props} />;
 };
 
 export const materialOneOfRadioGroupControlTester: RankedTester = rankWith(
diff --git a/packages/material-renderers/src/controls/MaterialRadioGroup.tsx b/packages/material-renderers/src/controls/MaterialRadioGroup.tsx
index 12974ded8..99d0278b9 100644
--- a/packages/material-renderers/src/controls/MaterialRadioGroup.tsx
+++ b/packages/material-renderers/src/controls/MaterialRadioGroup.tsx
@@ -28,7 +28,7 @@ import {
   ControlProps,
   showAsRequired,
   isDescriptionHidden,
-  OwnPropsOfEnum
+  OwnPropsOfEnum,
 } from '@jsonforms/core';
 import {
   FormControl,
@@ -37,7 +37,7 @@ import {
   FormLabel,
   Hidden,
   Radio,
-  RadioGroup
+  RadioGroup,
 } from '@mui/material';
 import { useFocus } from '../util';
 
@@ -55,21 +55,17 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
     options,
     handleChange,
     path,
-    enabled
+    enabled,
   } = props;
   const isValid = errors.length === 0;
-  const appliedUiSchemaOptions = merge(
-    {},
-    config,
-    props.uischema.options
-  );
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   const showDescription = !isDescriptionHidden(
     visible,
     description,
     focused,
     appliedUiSchemaOptions.showUnfocusedDescription
   );
-  const onChange = (_ev:any, value:any) => handleChange(path, value);
+  const onChange = (_ev: any, value: any) => handleChange(path, value);
 
   return (
     <Hidden xsUp={!visible}>
@@ -83,18 +79,16 @@ export const MaterialRadioGroup = (props: ControlProps & OwnPropsOfEnum) => {
           htmlFor={id}
           error={!isValid}
           component={'legend' as 'label'}
-          required={showAsRequired(required,
-            appliedUiSchemaOptions.hideRequiredAsterisk)}
+          required={showAsRequired(
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
         >
           {label}
         </FormLabel>
 
-        <RadioGroup
-          value={props.data ?? ''}
-          onChange={onChange}
-          row={true}
-        >
-          {options.map(option => (
+        <RadioGroup value={props.data ?? ''} onChange={onChange} row={true}>
+          {options.map((option) => (
             <FormControlLabel
               value={option.value}
               key={option.label}
diff --git a/packages/material-renderers/src/controls/MaterialRadioGroupControl.tsx b/packages/material-renderers/src/controls/MaterialRadioGroupControl.tsx
index f9d4d8b7d..aa4acde6a 100644
--- a/packages/material-renderers/src/controls/MaterialRadioGroupControl.tsx
+++ b/packages/material-renderers/src/controls/MaterialRadioGroupControl.tsx
@@ -27,11 +27,16 @@ import {
   and,
   ControlProps,
   isEnumControl,
-  optionIs, OwnPropsOfEnum, RankedTester, rankWith
+  optionIs,
+  OwnPropsOfEnum,
+  RankedTester,
+  rankWith,
 } from '@jsonforms/core';
-import {  withJsonFormsEnumProps } from '@jsonforms/react';
+import { withJsonFormsEnumProps } from '@jsonforms/react';
 import { MaterialRadioGroup } from './MaterialRadioGroup';
-export const MaterialRadioGroupControl = (props: ControlProps & OwnPropsOfEnum) => {
+export const MaterialRadioGroupControl = (
+  props: ControlProps & OwnPropsOfEnum
+) => {
   return <MaterialRadioGroup {...props} />;
 };
 
diff --git a/packages/material-renderers/src/controls/MaterialSliderControl.tsx b/packages/material-renderers/src/controls/MaterialSliderControl.tsx
index 15dae5696..78349d088 100644
--- a/packages/material-renderers/src/controls/MaterialSliderControl.tsx
+++ b/packages/material-renderers/src/controls/MaterialSliderControl.tsx
@@ -22,14 +22,14 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import {
   ControlProps,
   showAsRequired,
   isDescriptionHidden,
   isRangeControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 
@@ -39,7 +39,7 @@ import {
   FormLabel,
   Hidden,
   Slider,
-  Typography
+  Typography,
 } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util';
@@ -58,28 +58,24 @@ export const MaterialSliderControl = (props: ControlProps) => {
     visible,
     path,
     required,
-    config
+    config,
   } = props;
   const isValid = errors.length === 0;
-  const appliedUiSchemaOptions = merge(
-    {},
-    config,
-    props.uischema.options
-  );
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
   const labelStyle: { [x: string]: any } = {
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-    width: '100%'
+    width: '100%',
   };
   const rangeContainerStyle: { [x: string]: any } = {
-    display: 'flex'
+    display: 'flex',
   };
   const rangeItemStyle: { [x: string]: any } = {
-    flexGrow: '1'
+    flexGrow: '1',
   };
   const sliderStyle: { [x: string]: any } = {
-    marginTop: '7px'
+    marginTop: '7px',
   };
 
   const showDescription = !isDescriptionHidden(
@@ -89,7 +85,10 @@ export const MaterialSliderControl = (props: ControlProps) => {
     appliedUiSchemaOptions.showUnfocusedDescription
   );
 
-  const onChange = useCallback((_ev: any, value: any) => handleChange(path, Number(value)), [path, handleChange]);
+  const onChange = useCallback(
+    (_ev: any, value: any) => handleChange(path, Number(value)),
+    [path, handleChange]
+  );
 
   return (
     <Hidden xsUp={!visible}>
@@ -103,8 +102,10 @@ export const MaterialSliderControl = (props: ControlProps) => {
           htmlFor={id}
           error={!isValid}
           component={'legend' as 'label'}
-          required={showAsRequired(required,
-            appliedUiSchemaOptions.hideRequiredAsterisk)}
+          required={showAsRequired(
+            required,
+            appliedUiSchemaOptions.hideRequiredAsterisk
+          )}
         >
           <Typography id={id + '-typo'} style={labelStyle} variant='caption'>
             {label}
diff --git a/packages/material-renderers/src/controls/MaterialTextControl.tsx b/packages/material-renderers/src/controls/MaterialTextControl.tsx
index 2a0ee1e6d..9c159733e 100644
--- a/packages/material-renderers/src/controls/MaterialTextControl.tsx
+++ b/packages/material-renderers/src/controls/MaterialTextControl.tsx
@@ -27,7 +27,7 @@ import {
   ControlProps,
   isStringControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { MuiInputText } from '../mui-controls/MuiInputText';
diff --git a/packages/material-renderers/src/controls/MaterialTimeControl.tsx b/packages/material-renderers/src/controls/MaterialTimeControl.tsx
index 244a4c6ae..6051af9cf 100644
--- a/packages/material-renderers/src/controls/MaterialTimeControl.tsx
+++ b/packages/material-renderers/src/controls/MaterialTimeControl.tsx
@@ -29,25 +29,22 @@ import {
   isTimeControl,
   isDescriptionHidden,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsControlProps } from '@jsonforms/react';
 import { FormHelperText, Hidden } from '@mui/material';
-import {
-  TimePicker,
-  LocalizationProvider 
-} from '@mui/x-date-pickers';
+import { TimePicker, LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import {
   createOnChangeHandler,
   getData,
   ResettableTextField,
-  useFocus
+  useFocus,
 } from '../util';
 
 export const MaterialTimeControl = (props: ControlProps) => {
   const [focused, onFocus, onBlur] = useFocus();
-    const {
+  const {
     id,
     description,
     errors,
@@ -59,7 +56,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
     path,
     handleChange,
     data,
-    config
+    config,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const isValid = errors.length === 0;
@@ -83,11 +80,10 @@ export const MaterialTimeControl = (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,24 +102,27 @@ export const MaterialTimeControl = (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}
               inputProps={{
                 ...params.inputProps,
-                type: 'text'
+                type: 'text',
               }}
               InputLabelProps={data ? { shrink: true } : undefined}
               onFocus={onFocus}
@@ -135,9 +134,7 @@ export const MaterialTimeControl = (props: ControlProps) => {
         <FormHelperText error={!isValid && !showDescription}>
           {firstFormHelperText}
         </FormHelperText>
-        <FormHelperText error={!isValid}>
-          {secondFormHelperText}
-        </FormHelperText>
+        <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
       </LocalizationProvider>
     </Hidden>
   );
diff --git a/packages/material-renderers/src/controls/index.ts b/packages/material-renderers/src/controls/index.ts
index 4f3fb6d9c..54001061b 100644
--- a/packages/material-renderers/src/controls/index.ts
+++ b/packages/material-renderers/src/controls/index.ts
@@ -24,66 +24,66 @@
 */
 import MaterialBooleanControl, {
   materialBooleanControlTester,
-  MaterialBooleanControl as MaterialBooleanControlUnwrapped
+  MaterialBooleanControl as MaterialBooleanControlUnwrapped,
 } from './MaterialBooleanControl';
 import MaterialBooleanToggleControl, {
   materialBooleanToggleControlTester,
-  MaterialBooleanToggleControl as MaterialBooleanToggleControlUnwrapped
+  MaterialBooleanToggleControl as MaterialBooleanToggleControlUnwrapped,
 } from './MaterialBooleanToggleControl';
 import MaterialEnumControl, {
   materialEnumControlTester,
-  MaterialEnumControl as MaterialEnumControlUnwrapped
+  MaterialEnumControl as MaterialEnumControlUnwrapped,
 } from './MaterialEnumControl';
 import MaterialNativeControl, {
   materialNativeControlTester,
-  MaterialNativeControl as MaterialNativeControlUnwrapped
+  MaterialNativeControl as MaterialNativeControlUnwrapped,
 } from './MaterialNativeControl';
 import MaterialDateControl, {
   materialDateControlTester,
-  MaterialDateControl as MaterialDateControlUnwrapped
+  MaterialDateControl as MaterialDateControlUnwrapped,
 } from './MaterialDateControl';
 import MaterialDateTimeControl, {
   materialDateTimeControlTester,
-  MaterialDateTimeControl as MaterialDateTimeControlUnwrapped
+  MaterialDateTimeControl as MaterialDateTimeControlUnwrapped,
 } from './MaterialDateTimeControl';
 import MaterialTimeControl, {
   materialTimeControlTester,
-  MaterialTimeControl as MaterialTimeControlUnwrapped
+  MaterialTimeControl as MaterialTimeControlUnwrapped,
 } from './MaterialTimeControl';
 import MaterialSliderControl, {
   materialSliderControlTester,
-  MaterialSliderControl as MaterialSliderControlUnwrapped
+  MaterialSliderControl as MaterialSliderControlUnwrapped,
 } from './MaterialSliderControl';
 import MaterialRadioGroupControl, {
   materialRadioGroupControlTester,
-  MaterialRadioGroupControl as MaterialRadioGroupControlUnwrapped
+  MaterialRadioGroupControl as MaterialRadioGroupControlUnwrapped,
 } from './MaterialRadioGroupControl';
 import MaterialIntegerControl, {
   materialIntegerControlTester,
-  MaterialIntegerControl as MaterialIntegerControlUnwrapped
+  MaterialIntegerControl as MaterialIntegerControlUnwrapped,
 } from './MaterialIntegerControl';
 import MaterialNumberControl, {
   materialNumberControlTester,
-  MaterialNumberControl as MaterialNumberControlUnwrapped
+  MaterialNumberControl as MaterialNumberControlUnwrapped,
 } from './MaterialNumberControl';
 import MaterialTextControl, {
   materialTextControlTester,
-  MaterialTextControl as MaterialTextControlUnwrapped
+  MaterialTextControl as MaterialTextControlUnwrapped,
 } from './MaterialTextControl';
 
 import MaterialAnyOfStringOrEnumControl, {
   materialAnyOfStringOrEnumControlTester,
-  MaterialAnyOfStringOrEnumControl as MaterialAnyOfStringOrEnumControlUnwrapped
+  MaterialAnyOfStringOrEnumControl as MaterialAnyOfStringOrEnumControlUnwrapped,
 } from './MaterialAnyOfStringOrEnumControl';
 
 import MaterialOneOfEnumControl, {
   materialOneOfEnumControlTester,
-  MaterialOneOfEnumControl as MaterialOneOfEnumControlUnwrapped
+  MaterialOneOfEnumControl as MaterialOneOfEnumControlUnwrapped,
 } from './MaterialOneOfEnumControl';
 
 import MaterialOneOfRadioGroupControl, {
   materialOneOfRadioGroupControlTester,
-  MaterialOneOfRadioGroupControl as MaterialOneOfRadioGroupControlUnwrapped
+  MaterialOneOfRadioGroupControl as MaterialOneOfRadioGroupControlUnwrapped,
 } from './MaterialOneOfRadioGroupControl';
 
 export const Unwrapped = {
@@ -101,7 +101,7 @@ export const Unwrapped = {
   MaterialTextControl: MaterialTextControlUnwrapped,
   MaterialAnyOfStringOrEnumControl: MaterialAnyOfStringOrEnumControlUnwrapped,
   MaterialOneOfEnumControl: MaterialOneOfEnumControlUnwrapped,
-  MaterialOneOfRadioGroupControl: MaterialOneOfRadioGroupControlUnwrapped
+  MaterialOneOfRadioGroupControl: MaterialOneOfRadioGroupControlUnwrapped,
 };
 
 export {
@@ -134,7 +134,7 @@ export {
   MaterialOneOfEnumControl,
   materialOneOfEnumControlTester,
   MaterialOneOfRadioGroupControl,
-  materialOneOfRadioGroupControlTester
+  materialOneOfRadioGroupControlTester,
 };
 
 export * from './MaterialInputControl';
diff --git a/packages/material-renderers/src/index.ts b/packages/material-renderers/src/index.ts
index 83e197fbf..7a26642cd 100644
--- a/packages/material-renderers/src/index.ts
+++ b/packages/material-renderers/src/index.ts
@@ -24,7 +24,7 @@
 */
 import {
   JsonFormsCellRendererRegistryEntry,
-  JsonFormsRendererRegistryEntry
+  JsonFormsRendererRegistryEntry,
 } from '@jsonforms/core';
 import {
   materialAllOfControlTester,
@@ -38,13 +38,13 @@ import {
   materialOneOfControlTester,
   MaterialOneOfRenderer,
   MaterialEnumArrayRenderer,
-  materialEnumArrayRendererTester
+  materialEnumArrayRendererTester,
 } from './complex';
 import {
   MaterialLabelRenderer,
   materialLabelRendererTester,
   MaterialListWithDetailRenderer,
-  materialListWithDetailTester
+  materialListWithDetailTester,
 } from './additional';
 import {
   MaterialAnyOfStringOrEnumControl,
@@ -76,7 +76,7 @@ import {
   MaterialTextControl,
   materialTextControlTester,
   MaterialOneOfRadioGroupControl,
-  materialOneOfRadioGroupControlTester
+  materialOneOfRadioGroupControlTester,
 } from './controls';
 import {
   MaterialArrayLayout,
@@ -88,7 +88,7 @@ import {
   MaterialHorizontalLayout,
   materialHorizontalLayoutTester,
   MaterialVerticalLayout,
-  materialVerticalLayoutTester
+  materialVerticalLayoutTester,
 } from './layouts';
 import {
   MaterialBooleanCell,
@@ -110,10 +110,10 @@ import {
   MaterialTextCell,
   materialTextCellTester,
   MaterialTimeCell,
-  materialTimeCellTester
+  materialTimeCellTester,
 } from './cells';
 import MaterialCategorizationStepperLayout, {
-  materialCategorizationStepperTester
+  materialCategorizationStepperTester,
 } from './layouts/MaterialCategorizationStepperLayout';
 
 export * from './complex';
@@ -127,10 +127,13 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
   // controls
   {
     tester: materialArrayControlTester,
-    renderer: MaterialArrayControlRenderer
+    renderer: MaterialArrayControlRenderer,
   },
   { tester: materialBooleanControlTester, renderer: MaterialBooleanControl },
-  { tester: materialBooleanToggleControlTester, renderer: MaterialBooleanToggleControl },
+  {
+    tester: materialBooleanToggleControlTester,
+    renderer: MaterialBooleanToggleControl,
+  },
   { tester: materialNativeControlTester, renderer: MaterialNativeControl },
   { tester: materialEnumControlTester, renderer: MaterialEnumControl },
   { tester: materialIntegerControlTester, renderer: MaterialIntegerControl },
@@ -138,7 +141,7 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
   { tester: materialTextControlTester, renderer: MaterialTextControl },
   { tester: materialDateTimeControlTester, renderer: MaterialDateTimeControl },
   { tester: materialDateControlTester, renderer: MaterialDateControl },
-  { tester: materialTimeControlTester, renderer: MaterialTimeControl }, 
+  { tester: materialTimeControlTester, renderer: MaterialTimeControl },
   { tester: materialSliderControlTester, renderer: MaterialSliderControl },
   { tester: materialObjectControlTester, renderer: MaterialObjectRenderer },
   { tester: materialAllOfControlTester, renderer: MaterialAllOfRenderer },
@@ -146,43 +149,46 @@ export const materialRenderers: JsonFormsRendererRegistryEntry[] = [
   { tester: materialOneOfControlTester, renderer: MaterialOneOfRenderer },
   {
     tester: materialRadioGroupControlTester,
-    renderer: MaterialRadioGroupControl
+    renderer: MaterialRadioGroupControl,
   },
   {
     tester: materialOneOfRadioGroupControlTester,
-    renderer: MaterialOneOfRadioGroupControl
+    renderer: MaterialOneOfRadioGroupControl,
+  },
+  {
+    tester: materialOneOfEnumControlTester,
+    renderer: MaterialOneOfEnumControl,
   },
-  { tester: materialOneOfEnumControlTester, renderer: MaterialOneOfEnumControl },
   // layouts
   { tester: materialGroupTester, renderer: MaterialGroupLayout },
   {
     tester: materialHorizontalLayoutTester,
-    renderer: MaterialHorizontalLayout
+    renderer: MaterialHorizontalLayout,
   },
   { tester: materialVerticalLayoutTester, renderer: MaterialVerticalLayout },
   {
     tester: materialCategorizationTester,
-    renderer: MaterialCategorizationLayout
+    renderer: MaterialCategorizationLayout,
   },
   {
     tester: materialCategorizationStepperTester,
-    renderer: MaterialCategorizationStepperLayout
+    renderer: MaterialCategorizationStepperLayout,
   },
   { tester: materialArrayLayoutTester, renderer: MaterialArrayLayout },
   // additional
   { tester: materialLabelRendererTester, renderer: MaterialLabelRenderer },
   {
     tester: materialListWithDetailTester,
-    renderer: MaterialListWithDetailRenderer
+    renderer: MaterialListWithDetailRenderer,
   },
   {
     tester: materialAnyOfStringOrEnumControlTester,
-    renderer: MaterialAnyOfStringOrEnumControl
+    renderer: MaterialAnyOfStringOrEnumControl,
   },
   {
     tester: materialEnumArrayRendererTester,
-    renderer: MaterialEnumArrayRenderer
-  }
+    renderer: MaterialEnumArrayRenderer,
+  },
 ];
 
 export const materialCells: JsonFormsCellRendererRegistryEntry[] = [
@@ -195,5 +201,5 @@ export const materialCells: JsonFormsCellRendererRegistryEntry[] = [
   { tester: materialNumberFormatCellTester, cell: MaterialNumberFormatCell },
   { tester: materialOneOfEnumCellTester, cell: MaterialOneOfEnumCell },
   { tester: materialTextCellTester, cell: MaterialTextCell },
-  { tester: materialTimeCellTester, cell: MaterialTimeCell }
+  { tester: materialTimeCellTester, cell: MaterialTimeCell },
 ];
diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
index 3e11048d8..bedd6ae3a 100644
--- a/packages/material-renderers/src/layouts/ArrayToolbar.tsx
+++ b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
@@ -1,10 +1,4 @@
-import { 
-  Grid,
-  IconButton,
-  Toolbar,
-  Tooltip,
-  Typography
-} from '@mui/material';
+import { Grid, IconButton, Toolbar, Tooltip, Typography } from '@mui/material';
 import AddIcon from '@mui/icons-material/Add';
 import React from 'react';
 import ValidationIcon from '../complex/ValidationIcon';
@@ -15,7 +9,7 @@ export interface ArrayLayoutToolbarProps {
   path: string;
   addItem(path: string, data: any): () => void;
   createDefault(): any;
-  translations: ArrayTranslations
+  translations: ArrayTranslations;
 }
 export const ArrayLayoutToolbar = React.memo(
   ({
@@ -24,7 +18,7 @@ export const ArrayLayoutToolbar = React.memo(
     addItem,
     path,
     createDefault,
-    translations
+    translations,
   }: ArrayLayoutToolbarProps) => {
     return (
       <Toolbar disableGutters={true}>
@@ -32,11 +26,11 @@ export const ArrayLayoutToolbar = React.memo(
           <Grid item>
             <Typography variant={'h6'}>{label}</Typography>
           </Grid>
-          {errors.length !== 0 &&
+          {errors.length !== 0 && (
             <Grid item>
               <ValidationIcon id='tooltip-validation' errorMessages={errors} />
             </Grid>
-          }
+          )}
           <Grid item>
             <Grid container>
               <Grid item>
@@ -48,7 +42,8 @@ export const ArrayLayoutToolbar = React.memo(
                   <IconButton
                     aria-label={translations.addAriaLabel}
                     onClick={addItem(path, createDefault())}
-                    size='large'>
+                    size='large'
+                  >
                     <AddIcon />
                   </IconButton>
                 </Tooltip>
diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
index 748d86ac5..d7c982dc6 100644
--- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -1,10 +1,19 @@
 import merge from 'lodash/merge';
 import get from 'lodash/get';
-import React, { ComponentType, Dispatch, Fragment, ReducerAction, useMemo, useState, useEffect, useCallback } from 'react';
+import React, {
+  ComponentType,
+  Dispatch,
+  Fragment,
+  ReducerAction,
+  useMemo,
+  useState,
+  useEffect,
+  useCallback,
+} from 'react';
 import {
   JsonFormsDispatch,
   JsonFormsStateContext,
-  withJsonFormsContext
+  withJsonFormsContext,
 } from '@jsonforms/react';
 import {
   composePaths,
@@ -21,7 +30,7 @@ import {
   getFirstPrimitiveProp,
   createId,
   removeId,
-  ArrayTranslations
+  ArrayTranslations,
 } from '@jsonforms/core';
 import {
   Accordion,
@@ -29,7 +38,7 @@ import {
   AccordionDetails,
   Avatar,
   Grid,
-  IconButton
+  IconButton,
 } from '@mui/material';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import DeleteIcon from '@mui/icons-material/Delete';
@@ -106,7 +115,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
     renderers,
     cells,
     config,
-    translations
+    translations,
   } = props;
 
   const foundUISchema = useMemo(
@@ -124,7 +133,9 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
   );
 
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const showSortButtons = appliedUiSchemaOptions.showSortButtons || appliedUiSchemaOptions.showArrayLayoutSortButtons;
+  const showSortButtons =
+    appliedUiSchemaOptions.showSortButtons ||
+    appliedUiSchemaOptions.showArrayLayoutSortButtons;
 
   return (
     <Accordion
@@ -161,7 +172,8 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           style={iconStyle}
                           disabled={!enableMoveUp}
                           aria-label={translations.upAriaLabel}
-                          size='large'>
+                          size='large'
+                        >
                           <ArrowUpward />
                         </IconButton>
                       </Grid>
@@ -171,7 +183,8 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                           style={iconStyle}
                           disabled={!enableMoveDown}
                           aria-label={translations.downAriaLabel}
-                          size='large'>
+                          size='large'
+                        >
                           <ArrowDownward />
                         </IconButton>
                       </Grid>
@@ -184,7 +197,8 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
                       onClick={removeItems(path, [index])}
                       style={iconStyle}
                       aria-label={translations.removeAriaLabel}
-                      size='large'>
+                      size='large'
+                    >
                       <DeleteIcon />
                     </IconButton>
                   </Grid>
@@ -219,37 +233,49 @@ const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
  */
 export const ctxDispatchToExpandPanelProps: (
   dispatch: Dispatch<ReducerAction<any>>
-) => DispatchPropsOfExpandPanel = dispatch => ({
-  removeItems: useCallback((path: string, toDelete: number[]) => (event: any): void => {
-    event.stopPropagation();
-    dispatch(
-      update(path, array => {
-        toDelete
-          .sort()
-          .reverse()
-          .forEach(s => array.splice(s, 1));
-        return array;
-      })
-    );
-  }, [dispatch]),
-  moveUp: useCallback((path: string, toMove: number) => (event: any): void => {
-    event.stopPropagation();
-    dispatch(
-      update(path, array => {
-        moveUp(array, toMove);
-        return array;
-      })
-    );
-  }, [dispatch]),
-  moveDown: useCallback((path: string, toMove: number) => (event: any): void => {
-    event.stopPropagation();
-    dispatch(
-      update(path, array => {
-        moveDown(array, toMove);
-        return array;
-      })
-    );
-  }, [dispatch])
+) => DispatchPropsOfExpandPanel = (dispatch) => ({
+  removeItems: useCallback(
+    (path: string, toDelete: number[]) =>
+      (event: any): void => {
+        event.stopPropagation();
+        dispatch(
+          update(path, (array) => {
+            toDelete
+              .sort()
+              .reverse()
+              .forEach((s) => array.splice(s, 1));
+            return array;
+          })
+        );
+      },
+    [dispatch]
+  ),
+  moveUp: useCallback(
+    (path: string, toMove: number) =>
+      (event: any): void => {
+        event.stopPropagation();
+        dispatch(
+          update(path, (array) => {
+            moveUp(array, toMove);
+            return array;
+          })
+        );
+      },
+    [dispatch]
+  ),
+  moveDown: useCallback(
+    (path: string, toMove: number) =>
+      (event: any): void => {
+        event.stopPropagation();
+        dispatch(
+          update(path, (array) => {
+            moveDown(array, toMove);
+            return array;
+          })
+        );
+      },
+    [dispatch]
+  ),
 });
 
 /**
@@ -258,35 +284,33 @@ export const ctxDispatchToExpandPanelProps: (
  * @param ownProps any own props
  * @returns {StatePropsOfControl} state props for a control
  */
-export const withContextToExpandPanelProps = (
-  Component: ComponentType<ExpandPanelProps>
-): ComponentType<OwnPropsOfExpandPanel> => ({
-  ctx,
-  props
-}: JsonFormsStateContext & ExpandPanelProps) => {
-  const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
-  const { childLabelProp, schema, path, index, uischemas } = props;
-  const childPath = composePaths(path, `${index}`);
-  const childData = Resolve.data(ctx.core.data, childPath);
-  const childLabel = childLabelProp
-    ? get(childData, childLabelProp, '')
-    : get(childData, getFirstPrimitiveProp(schema), '');
+export const withContextToExpandPanelProps =
+  (
+    Component: ComponentType<ExpandPanelProps>
+  ): ComponentType<OwnPropsOfExpandPanel> =>
+  ({ ctx, props }: JsonFormsStateContext & ExpandPanelProps) => {
+    const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
+    const { childLabelProp, schema, path, index, uischemas } = props;
+    const childPath = composePaths(path, `${index}`);
+    const childData = Resolve.data(ctx.core.data, childPath);
+    const childLabel = childLabelProp
+      ? get(childData, childLabelProp, '')
+      : get(childData, getFirstPrimitiveProp(schema), '');
 
-  return (
-    <Component
-      {...props}
-      {...dispatchProps}
-      childLabel={childLabel}
-      childPath={childPath}
-      uischemas={uischemas}
-    />
-  );
-};
+    return (
+      <Component
+        {...props}
+        {...dispatchProps}
+        childLabel={childLabel}
+        childPath={childPath}
+        uischemas={uischemas}
+      />
+    );
+  };
 
 export const withJsonFormsExpandPanelProps = (
   Component: ComponentType<ExpandPanelProps>
 ): ComponentType<OwnPropsOfExpandPanel> =>
-  withJsonFormsContext(
-    withContextToExpandPanelProps(Component));
+  withJsonFormsContext(withContextToExpandPanelProps(Component));
 
 export default withJsonFormsExpandPanelProps(ExpandPanelRenderer);
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
index 0d9a0397f..5a8c533ef 100644
--- a/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialArrayLayout.tsx
@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import range from 'lodash/range';
-import React, {useState, useCallback} from 'react';
+import React, { useState, useCallback } from 'react';
 import {
   ArrayLayoutProps,
   composePaths,
@@ -35,15 +35,21 @@ import { ArrayLayoutToolbar } from './ArrayToolbar';
 import ExpandPanelRenderer from './ExpandPanelRenderer';
 import merge from 'lodash/merge';
 
-const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
-  const [expanded, setExpanded] = useState<string|boolean>(false);
-  const innerCreateDefaultValue = useCallback(() => createDefaultValue(props.schema), [props.schema]);
-  const handleChange = useCallback((panel: string) => (_event: any, expandedPanel: boolean) => {
-    setExpanded(expandedPanel ? panel : false)
-  }, []);
-  const isExpanded = (index: number) => 
+const MaterialArrayLayoutComponent = (props: ArrayLayoutProps) => {
+  const [expanded, setExpanded] = useState<string | boolean>(false);
+  const innerCreateDefaultValue = useCallback(
+    () => createDefaultValue(props.schema),
+    [props.schema]
+  );
+  const handleChange = useCallback(
+    (panel: string) => (_event: any, expandedPanel: boolean) => {
+      setExpanded(expandedPanel ? panel : false);
+    },
+    []
+  );
+  const isExpanded = (index: number) =>
     expanded === composePaths(props.path, `${index}`);
-  
+
   const {
     enabled,
     data,
@@ -59,13 +65,9 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
     rootSchema,
     config,
     uischemas,
-    translations
+    translations,
   } = props;
-  const appliedUiSchemaOptions = merge(
-    {},
-    config,
-    props.uischema.options
-  );
+  const appliedUiSchemaOptions = merge({}, config, props.uischema.options);
 
   return (
     <div>
@@ -83,7 +85,7 @@ const MaterialArrayLayoutComponent = (props: ArrayLayoutProps)=> {
       />
       <div>
         {data > 0 ? (
-          map(range(data), index => {
+          map(range(data), (index) => {
             return (
               <ExpandPanelRenderer
                 enabled={enabled}
diff --git a/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx b/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx
index 70f4e2e41..ac6f8cb37 100644
--- a/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx
+++ b/packages/material-renderers/src/layouts/MaterialArrayLayoutRenderer.tsx
@@ -28,7 +28,7 @@ import {
   ArrayLayoutProps,
   isObjectArrayWithNesting,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { Hidden } from '@mui/material';
 import { MaterialArrayLayout } from './MaterialArrayLayout';
@@ -39,16 +39,13 @@ export const MaterialArrayLayoutRenderer = ({
   addItem,
   ...props
 }: ArrayLayoutProps) => {
-  const addItemCb = useCallback((p: string, value: any) => addItem(p, value), [
-    addItem
-  ]);
+  const addItemCb = useCallback(
+    (p: string, value: any) => addItem(p, value),
+    [addItem]
+  );
   return (
     <Hidden xsUp={!visible}>
-      <MaterialArrayLayout
-        visible={visible}
-        addItem={addItemCb}
-        {...props}
-      />
+      <MaterialArrayLayout visible={visible} addItem={addItemCb} {...props} />
     </Hidden>
   );
 };
diff --git a/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx b/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
index 65c862f3f..6f9b1b57f 100644
--- a/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialCategorizationLayout.tsx
@@ -35,14 +35,18 @@ import {
   StatePropsOfLayout,
   Tester,
   UISchemaElement,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
+import {
+  TranslateProps,
+  withJsonFormsLayoutProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
   MaterialLayoutRendererProps,
-  withAjvProps
+  withAjvProps,
 } from '../util/layout';
 
 export const isSingleLevelCategorization: Tester = and(
@@ -69,14 +73,18 @@ export interface CategorizationState {
 }
 
 export interface MaterialCategorizationLayoutRendererProps
-  extends StatePropsOfLayout, AjvProps, TranslateProps {
+  extends StatePropsOfLayout,
+    AjvProps,
+    TranslateProps {
   selected?: number;
   ownState?: boolean;
   data?: any;
   onChange?(selected: number, prevSelected: number): void;
 }
 
-export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizationLayoutRendererProps) => {
+export const MaterialCategorizationLayoutRenderer = (
+  props: MaterialCategorizationLayoutRendererProps
+) => {
   const {
     data,
     path,
@@ -89,21 +97,27 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     selected,
     onChange,
     ajv,
-    t
+    t,
   } = props;
   const categorization = uischema as Categorization;
-  const [previousCategorization, setPreviousCategorization] = useState<Categorization>(uischema as Categorization);
+  const [previousCategorization, setPreviousCategorization] =
+    useState<Categorization>(uischema as Categorization);
   const [activeCategory, setActiveCategory] = useState<number>(selected ?? 0);
-  const categories = useMemo(() => categorization.elements.filter((category: Category) =>
-    isVisible(category, data, undefined, ajv)
-  ), [categorization, data, ajv]);
+  const categories = useMemo(
+    () =>
+      categorization.elements.filter((category: Category) =>
+        isVisible(category, data, undefined, ajv)
+      ),
+    [categorization, data, ajv]
+  );
 
   if (categorization !== previousCategorization) {
     setActiveCategory(0);
     setPreviousCategorization(categorization);
   }
 
-  const safeCategory = activeCategory >= categorization.elements.length ? 0 : activeCategory;
+  const safeCategory =
+    activeCategory >= categorization.elements.length ? 0 : activeCategory;
 
   const childProps: MaterialLayoutRendererProps = {
     elements: categories[safeCategory] ? categories[safeCategory].elements : [],
@@ -113,7 +127,7 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
     enabled,
     visible,
     renderers,
-    cells
+    cells,
   };
   const onTabChange = (_event: any, value: any) => {
     if (onChange) {
@@ -123,15 +137,19 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
   };
 
   const tabLabels = useMemo(() => {
-    return categories.map((e: Category) =>
-      deriveLabelForUISchemaElement(e, t)
-    )
-  }, [categories, t])
+    return categories.map((e: Category) => deriveLabelForUISchemaElement(e, t));
+  }, [categories, t]);
 
   return (
     <Hidden xsUp={!visible}>
       <AppBar position='static'>
-        <Tabs value={safeCategory} onChange={onTabChange} textColor='inherit' indicatorColor='secondary' variant='scrollable'>
+        <Tabs
+          value={safeCategory}
+          onChange={onTabChange}
+          textColor='inherit'
+          indicatorColor='secondary'
+          variant='scrollable'
+        >
           {categories.map((_, idx: number) => (
             <Tab key={idx} label={tabLabels[idx]} />
           ))}
@@ -144,5 +162,8 @@ export const MaterialCategorizationLayoutRenderer = (props: MaterialCategorizati
   );
 };
 
-export default withAjvProps(withTranslateProps(withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)));
-
+export default withAjvProps(
+  withTranslateProps(
+    withJsonFormsLayoutProps(MaterialCategorizationLayoutRenderer)
+  )
+);
diff --git a/packages/material-renderers/src/layouts/MaterialCategorizationStepperLayout.tsx b/packages/material-renderers/src/layouts/MaterialCategorizationStepperLayout.tsx
index 56511f6c5..5abe52ad1 100644
--- a/packages/material-renderers/src/layouts/MaterialCategorizationStepperLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialCategorizationStepperLayout.tsx
@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useState, useMemo} from 'react';
+import React, { useState, useMemo } from 'react';
 import merge from 'lodash/merge';
 import { Button, Hidden, Step, StepButton, Stepper } from '@mui/material';
 import {
@@ -36,14 +36,18 @@ import {
   RankedTester,
   rankWith,
   StatePropsOfLayout,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
+import {
+  TranslateProps,
+  withJsonFormsLayoutProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import {
   AjvProps,
   MaterialLayoutRenderer,
   MaterialLayoutRendererProps,
-  withAjvProps
+  withAjvProps,
 } from '../util/layout';
 
 export const materialCategorizationStepperTester: RankedTester = rankWith(
@@ -60,15 +64,19 @@ export interface CategorizationStepperState {
 }
 
 export interface MaterialCategorizationStepperLayoutRendererProps
-  extends StatePropsOfLayout, AjvProps, TranslateProps {
-    data: any;
+  extends StatePropsOfLayout,
+    AjvProps,
+    TranslateProps {
+  data: any;
 }
 
-export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCategorizationStepperLayoutRendererProps)=> {
+export const MaterialCategorizationStepperLayoutRenderer = (
+  props: MaterialCategorizationStepperLayoutRendererProps
+) => {
   const [activeCategory, setActiveCategory] = useState<number>(0);
 
   const handleStep = (step: number) => {
-    setActiveCategory( step);
+    setActiveCategory(step);
   };
 
   const {
@@ -81,24 +89,28 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
     cells,
     config,
     ajv,
-    t
+    t,
   } = props;
   const categorization = uischema as Categorization;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const buttonWrapperStyle = {
-    textAlign: 'right' as 'right',
+    textAlign: 'right' as const,
     width: '100%',
-    margin: '1em auto'
+    margin: '1em auto',
   };
   const buttonNextStyle = {
-    float: 'right' as 'right'
+    float: 'right' as const,
   };
   const buttonStyle = {
-    marginRight: '1em'
+    marginRight: '1em',
   };
-  const categories = useMemo(() => categorization.elements.filter((category: Category) =>
-    isVisible(category, data, undefined, ajv)
-  ),[categorization, data, ajv]);
+  const categories = useMemo(
+    () =>
+      categorization.elements.filter((category: Category) =>
+        isVisible(category, data, undefined, ajv)
+      ),
+    [categorization, data, ajv]
+  );
   const childProps: MaterialLayoutRendererProps = {
     elements: categories[activeCategory].elements,
     schema,
@@ -106,13 +118,11 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
     direction: 'column',
     visible,
     renderers,
-    cells
+    cells,
   };
   const tabLabels = useMemo(() => {
-    return categories.map((e: Category) => 
-      deriveLabelForUISchemaElement(e, t)
-    )
-  }, [categories, t])
+    return categories.map((e: Category) => deriveLabelForUISchemaElement(e, t));
+  }, [categories, t]);
   return (
     <Hidden xsUp={!visible}>
       <Stepper activeStep={activeCategory} nonLinear>
@@ -127,30 +137,36 @@ export const MaterialCategorizationStepperLayoutRenderer = (props: MaterialCateg
       <div>
         <MaterialLayoutRenderer {...childProps} />
       </div>
-      { !!appliedUiSchemaOptions.showNavButtons ? (<div style={buttonWrapperStyle}>
-        <Button
-          style={buttonNextStyle}
-          variant="contained"
-          color="primary"
-          disabled={activeCategory >= categories.length - 1}
-          onClick={() => handleStep(activeCategory + 1)}
-        >
-          Next
-        </Button>
-        <Button
-          style={buttonStyle}
-          color="secondary"
-          variant="contained"
-          disabled={activeCategory <= 0}
-          onClick={() => handleStep(activeCategory - 1)}
-        >
-          Previous
-        </Button>
-      </div>) : (<></>)}
+      {appliedUiSchemaOptions.showNavButtons ? (
+        <div style={buttonWrapperStyle}>
+          <Button
+            style={buttonNextStyle}
+            variant='contained'
+            color='primary'
+            disabled={activeCategory >= categories.length - 1}
+            onClick={() => handleStep(activeCategory + 1)}
+          >
+            Next
+          </Button>
+          <Button
+            style={buttonStyle}
+            color='secondary'
+            variant='contained'
+            disabled={activeCategory <= 0}
+            onClick={() => handleStep(activeCategory - 1)}
+          >
+            Previous
+          </Button>
+        </div>
+      ) : (
+        <></>
+      )}
     </Hidden>
   );
 };
 
-export default withAjvProps(withTranslateProps(
-  withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer
-)));
+export default withAjvProps(
+  withTranslateProps(
+    withJsonFormsLayoutProps(MaterialCategorizationStepperLayoutRenderer)
+  )
+);
diff --git a/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx b/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
index e9d283c04..1ebc1bac0 100644
--- a/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
@@ -42,23 +42,44 @@ import { withJsonFormsLayoutProps } from '@jsonforms/react';
 export const groupTester: RankedTester = rankWith(1, uiTypeIs('Group'));
 const style: { [x: string]: any } = { marginBottom: '10px' };
 
-const GroupComponent = React.memo(({ visible, enabled, uischema, label, ...props }: MaterialLabelableLayoutRendererProps) => {
-  const groupLayout = uischema as GroupLayout;
-  return (
-    <Hidden xsUp={!visible}>
-      <Card style={style}>
-        {!isEmpty(label) && (
-          <CardHeader title={label} />
-        )}
-        <CardContent>
-          <MaterialLayoutRenderer {...props} visible={visible} enabled={enabled} elements={groupLayout.elements} />
-        </CardContent>
-      </Card>
-    </Hidden>
-  );
-});
+const GroupComponent = React.memo(
+  ({
+    visible,
+    enabled,
+    uischema,
+    label,
+    ...props
+  }: MaterialLabelableLayoutRendererProps) => {
+    const groupLayout = uischema as GroupLayout;
+    return (
+      <Hidden xsUp={!visible}>
+        <Card style={style}>
+          {!isEmpty(label) && <CardHeader title={label} />}
+          <CardContent>
+            <MaterialLayoutRenderer
+              {...props}
+              visible={visible}
+              enabled={enabled}
+              elements={groupLayout.elements}
+            />
+          </CardContent>
+        </Card>
+      </Hidden>
+    );
+  }
+);
 
-export const MaterializedGroupLayoutRenderer = ({ uischema, schema, path, visible, enabled, renderers, cells, direction, label }: LayoutProps) => {
+export const MaterializedGroupLayoutRenderer = ({
+  uischema,
+  schema,
+  path,
+  visible,
+  enabled,
+  renderers,
+  cells,
+  direction,
+  label,
+}: LayoutProps) => {
   const groupLayout = uischema as GroupLayout;
 
   return (
diff --git a/packages/material-renderers/src/layouts/MaterialHorizontalLayout.tsx b/packages/material-renderers/src/layouts/MaterialHorizontalLayout.tsx
index a451030ca..0e7355267 100644
--- a/packages/material-renderers/src/layouts/MaterialHorizontalLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialHorizontalLayout.tsx
@@ -33,7 +33,7 @@ import {
 import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import {
   MaterialLayoutRenderer,
-  MaterialLayoutRendererProps
+  MaterialLayoutRendererProps,
 } from '../util/layout';
 
 /**
@@ -45,7 +45,15 @@ export const materialHorizontalLayoutTester: RankedTester = rankWith(
   uiTypeIs('HorizontalLayout')
 );
 
-export const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, schema, path, enabled, visible }: LayoutProps) => {
+export const MaterialHorizontalLayoutRenderer = ({
+  uischema,
+  renderers,
+  cells,
+  schema,
+  path,
+  enabled,
+  visible,
+}: LayoutProps) => {
   const layout = uischema as HorizontalLayout;
   const childProps: MaterialLayoutRendererProps = {
     elements: layout.elements,
@@ -53,10 +61,16 @@ export const MaterialHorizontalLayoutRenderer = ({ uischema, renderers, cells, s
     path,
     enabled,
     direction: 'row',
-    visible
+    visible,
   };
 
-  return <MaterialLayoutRenderer {...childProps} renderers={renderers} cells={cells} />;
+  return (
+    <MaterialLayoutRenderer
+      {...childProps}
+      renderers={renderers}
+      cells={cells}
+    />
+  );
 };
 
 export default withJsonFormsLayoutProps(MaterialHorizontalLayoutRenderer);
diff --git a/packages/material-renderers/src/layouts/MaterialVerticalLayout.tsx b/packages/material-renderers/src/layouts/MaterialVerticalLayout.tsx
index 5c0d841e1..1d1c442e6 100644
--- a/packages/material-renderers/src/layouts/MaterialVerticalLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialVerticalLayout.tsx
@@ -32,7 +32,7 @@ import {
 } from '@jsonforms/core';
 import {
   MaterialLayoutRenderer,
-  MaterialLayoutRendererProps
+  MaterialLayoutRendererProps,
 } from '../util/layout';
 import { withJsonFormsLayoutProps } from '@jsonforms/react';
 
@@ -45,7 +45,15 @@ export const materialVerticalLayoutTester: RankedTester = rankWith(
   uiTypeIs('VerticalLayout')
 );
 
-export const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled, visible, renderers, cells }: LayoutProps) => {
+export const MaterialVerticalLayoutRenderer = ({
+  uischema,
+  schema,
+  path,
+  enabled,
+  visible,
+  renderers,
+  cells,
+}: LayoutProps) => {
   const verticalLayout = uischema as VerticalLayout;
   const childProps: MaterialLayoutRendererProps = {
     elements: verticalLayout.elements,
@@ -53,10 +61,16 @@ export const MaterialVerticalLayoutRenderer = ({ uischema, schema, path, enabled
     path,
     enabled,
     direction: 'column',
-    visible
+    visible,
   };
 
-  return <MaterialLayoutRenderer {...childProps} renderers={renderers} cells={cells} />;
+  return (
+    <MaterialLayoutRenderer
+      {...childProps}
+      renderers={renderers}
+      cells={cells}
+    />
+  );
 };
 
 export default withJsonFormsLayoutProps(MaterialVerticalLayoutRenderer);
diff --git a/packages/material-renderers/src/layouts/index.ts b/packages/material-renderers/src/layouts/index.ts
index 6e2168fce..5e89babb6 100644
--- a/packages/material-renderers/src/layouts/index.ts
+++ b/packages/material-renderers/src/layouts/index.ts
@@ -23,19 +23,19 @@
   THE SOFTWARE.
 */
 import MaterialGroupLayout, {
-  materialGroupTester
+  materialGroupTester,
 } from './MaterialGroupLayout';
 import MaterialHorizontalLayout, {
-  materialHorizontalLayoutTester
+  materialHorizontalLayoutTester,
 } from './MaterialHorizontalLayout';
 import MaterialVerticalLayout, {
-  materialVerticalLayoutTester
+  materialVerticalLayoutTester,
 } from './MaterialVerticalLayout';
 import MaterialCategorizationLayout, {
-  materialCategorizationTester
+  materialCategorizationTester,
 } from './MaterialCategorizationLayout';
 import MaterialArrayLayout, {
-  materialArrayLayoutTester
+  materialArrayLayoutTester,
 } from './MaterialArrayLayoutRenderer';
 
 export {
@@ -48,5 +48,5 @@ export {
   MaterialHorizontalLayout,
   materialHorizontalLayoutTester,
   MaterialVerticalLayout,
-  materialVerticalLayoutTester
+  materialVerticalLayoutTester,
 };
diff --git a/packages/material-renderers/src/mui-controls/MuiAutocomplete.tsx b/packages/material-renderers/src/mui-controls/MuiAutocomplete.tsx
index 4adefff14..3938eb6c7 100644
--- a/packages/material-renderers/src/mui-controls/MuiAutocomplete.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiAutocomplete.tsx
@@ -23,7 +23,13 @@
   THE SOFTWARE.
 */
 import React, { ReactNode } from 'react';
-import { ControlProps, EnumCellProps, EnumOption, isDescriptionHidden, WithClassname } from '@jsonforms/core';
+import {
+  ControlProps,
+  EnumCellProps,
+  EnumOption,
+  isDescriptionHidden,
+  WithClassname,
+} from '@jsonforms/core';
 
 import {
   Autocomplete,
@@ -31,18 +37,27 @@ import {
   FilterOptionsState,
   FormHelperText,
   Hidden,
-  TextField
+  TextField,
 } from '@mui/material';
 import merge from 'lodash/merge';
 import { useFocus } from '../util/focus';
 
 export interface WithOptionLabel {
-  getOptionLabel?(option: EnumOption) : string;
-  renderOption?(props: React.HTMLAttributes<HTMLLIElement>, option: EnumOption, state: AutocompleteRenderOptionState): ReactNode;
-  filterOptions?(options: EnumOption[], state: FilterOptionsState<EnumOption>) : EnumOption[];
+  getOptionLabel?(option: EnumOption): string;
+  renderOption?(
+    props: React.HTMLAttributes<HTMLLIElement>,
+    option: EnumOption,
+    state: AutocompleteRenderOptionState
+  ): ReactNode;
+  filterOptions?(
+    options: EnumOption[],
+    state: FilterOptionsState<EnumOption>
+  ): EnumOption[];
 }
 
-export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel) => {
+export const MuiAutocomplete = (
+  props: ControlProps & EnumCellProps & WithClassname & WithOptionLabel
+) => {
   const {
     description,
     errors,
@@ -61,21 +76,21 @@ export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassn
     getOptionLabel,
     renderOption,
     filterOptions,
-    isValid
+    isValid,
   } = props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   const [inputValue, setInputValue] = React.useState(data ?? '');
   const [focused, onFocus, onBlur] = useFocus();
 
-  const findOption = options.find(o => o.value === data) ?? null;
-  
+  const findOption = options.find((o) => o.value === data) ?? null;
+
   const showDescription = !isDescriptionHidden(
     visible,
     description,
     focused,
     appliedUiSchemaOptions.showUnfocusedDescription
   );
-  
+
   const firstFormHelperText = showDescription
     ? description
     : !isValid
@@ -102,38 +117,39 @@ export const MuiAutocomplete = (props: ControlProps & EnumCellProps & WithClassn
         autoComplete
         fullWidth
         options={options}
-        getOptionLabel={getOptionLabel || (option => option?.label)}
+        getOptionLabel={getOptionLabel || ((option) => option?.label)}
         freeSolo={false}
-        renderInput={params => { 
-          return(
-          <TextField
-            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}
-          />
-        )}}
+        renderInput={(params) => {
+          return (
+            <TextField
+              label={label}
+              variant={'standard'}
+              type='text'
+              inputProps={params.inputProps}
+              inputRef={params.InputProps.ref}
+              autoFocus={appliedUiSchemaOptions.focus}
+              disabled={!enabled}
+              {...params}
+              id={id + '-input'}
+              required={
+                required && !appliedUiSchemaOptions.hideRequiredAsterisk
+              }
+              error={!isValid}
+              fullWidth={!appliedUiSchemaOptions.trim}
+              InputLabelProps={data ? { shrink: true } : undefined}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              focused={focused}
+            />
+          );
+        }}
         renderOption={renderOption}
         filterOptions={filterOptions}
       />
       <FormHelperText error={!isValid && !showDescription}>
         {firstFormHelperText}
       </FormHelperText>
-      <FormHelperText error={!isValid}>
-        {secondFormHelperText}
-      </FormHelperText>
+      <FormHelperText error={!isValid}>{secondFormHelperText}</FormHelperText>
     </Hidden>
   );
 };
diff --git a/packages/material-renderers/src/mui-controls/MuiCheckbox.tsx b/packages/material-renderers/src/mui-controls/MuiCheckbox.tsx
index de46ad6c1..c3d7048d7 100644
--- a/packages/material-renderers/src/mui-controls/MuiCheckbox.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiCheckbox.tsx
@@ -31,33 +31,35 @@ interface MuiCheckboxInputProps {
   inputProps?: InputProps['inputProps'];
 }
 
-export const MuiCheckbox = React.memo((props: CellProps & WithClassname & MuiCheckboxInputProps) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config,
-    inputProps
-  } = props;
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const inputPropsMerged = merge({}, inputProps, {
-    autoFocus: !!appliedUiSchemaOptions.focus
-  });
-  // !! causes undefined value to be converted to false, otherwise has no effect
-  const checked = !!data;
+export const MuiCheckbox = React.memo(
+  (props: CellProps & WithClassname & MuiCheckboxInputProps) => {
+    const {
+      data,
+      className,
+      id,
+      enabled,
+      uischema,
+      path,
+      handleChange,
+      config,
+      inputProps,
+    } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const inputPropsMerged = merge({}, inputProps, {
+      autoFocus: !!appliedUiSchemaOptions.focus,
+    });
+    // !! causes undefined value to be converted to false, otherwise has no effect
+    const checked = !!data;
 
-  return (
-    <Checkbox
-      checked={checked}
-      onChange={(_ev, isChecked) => handleChange(path, isChecked)}
-      className={className}
-      id={id}
-      disabled={!enabled}
-      inputProps={inputPropsMerged}
-    />
-  );
-});
+    return (
+      <Checkbox
+        checked={checked}
+        onChange={(_ev, isChecked) => handleChange(path, isChecked)}
+        className={className}
+        id={id}
+        disabled={!enabled}
+        inputProps={inputPropsMerged}
+      />
+    );
+  }
+);
diff --git a/packages/material-renderers/src/mui-controls/MuiInputInteger.tsx b/packages/material-renderers/src/mui-controls/MuiInputInteger.tsx
index b94eb9a3e..c973c207c 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputInteger.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputInteger.tsx
@@ -29,10 +29,10 @@ import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
 const toNumber = (value: string) =>
-      value === '' ? undefined : parseInt(value, 10);
-const eventToValue = (ev:any) => toNumber(ev.target.value);
+  value === '' ? undefined : parseInt(value, 10);
+const eventToValue = (ev: any) => toNumber(ev.target.value);
 
-export const MuiInputInteger = React.memo( 
+export const MuiInputInteger = React.memo(
   (props: CellProps & WithClassname) => {
     const {
       data,
@@ -42,13 +42,19 @@ export const MuiInputInteger = React.memo(
       uischema,
       path,
       handleChange,
-      config
+      config,
     } = props;
     const inputProps = { step: '1' };
-    
+
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+    const [inputValue, onChange] = useDebouncedChange(
+      handleChange,
+      '',
+      data,
+      path,
+      eventToValue
+    );
 
     return (
       <Input
@@ -63,4 +69,5 @@ export const MuiInputInteger = React.memo(
         fullWidth={true}
       />
     );
-  });
+  }
+);
diff --git a/packages/material-renderers/src/mui-controls/MuiInputNumber.tsx b/packages/material-renderers/src/mui-controls/MuiInputNumber.tsx
index a89716367..cf7bd8500 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputNumber.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputNumber.tsx
@@ -26,26 +26,24 @@ import React from 'react';
 import { CellProps, WithClassname } from '@jsonforms/core';
 import { Input } from '@mui/material';
 import merge from 'lodash/merge';
-import {useDebouncedChange} from '../util';
+import { useDebouncedChange } from '../util';
 
 const toNumber = (value: string) =>
-    value === '' ? undefined : parseFloat(value);
-const eventToValue = (ev:any) => toNumber(ev.target.value);
+  value === '' ? undefined : parseFloat(value);
+const eventToValue = (ev: any) => toNumber(ev.target.value);
 export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config
-  } = props;
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
   const inputProps = { step: '0.1' };
-  
+
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path, eventToValue);
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
 
   return (
     <Input
diff --git a/packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx b/packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx
index 45ec04686..59daae324 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx
@@ -22,13 +22,13 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import { CellProps, Formatted, WithClassname } from '@jsonforms/core';
 import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
-export const MuiInputNumberFormat = React.memo( 
+export const MuiInputNumberFormat = React.memo(
   (props: CellProps & WithClassname & Formatted<number>) => {
     const {
       className,
@@ -39,7 +39,7 @@ export const MuiInputNumberFormat = React.memo(
       path,
       handleChange,
       schema,
-      config
+      config,
     } = props;
     const maxLength = schema.maxLength;
     const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -51,9 +51,17 @@ export const MuiInputNumberFormat = React.memo(
     }
     const formattedNumber = props.toFormatted(props.data);
 
-    const validStringNumber = useCallback((ev:any) => props.fromFormatted(ev.currentTarget.value),[props.fromFormatted]);
-    const [inputValue, onChange] = useDebouncedChange(handleChange, '', formattedNumber, path, validStringNumber);
-
+    const validStringNumber = useCallback(
+      (ev: any) => props.fromFormatted(ev.currentTarget.value),
+      [props.fromFormatted]
+    );
+    const [inputValue, onChange] = useDebouncedChange(
+      handleChange,
+      '',
+      formattedNumber,
+      path,
+      validStringNumber
+    );
 
     return (
       <Input
@@ -70,4 +78,5 @@ export const MuiInputNumberFormat = React.memo(
         error={!isValid}
       />
     );
-  });
+  }
+);
diff --git a/packages/material-renderers/src/mui-controls/MuiInputText.tsx b/packages/material-renderers/src/mui-controls/MuiInputText.tsx
index 2a710b7f1..e9c3c2618 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputText.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputText.tsx
@@ -30,7 +30,7 @@ import {
   InputAdornment,
   InputBaseComponentProps,
   InputProps,
-  useTheme
+  useTheme,
 } from '@mui/material';
 import merge from 'lodash/merge';
 import Close from '@mui/icons-material/Close';
@@ -41,87 +41,100 @@ interface MuiTextInputProps {
   inputComponent?: InputProps['inputComponent'];
 }
 
-const eventToValue = (ev:any) => ev.target.value === '' ? undefined : ev.target.value;
+const eventToValue = (ev: any) =>
+  ev.target.value === '' ? undefined : ev.target.value;
 
-export const MuiInputText = React.memo((props: CellProps & WithClassname & MuiTextInputProps) => { 
-  const [showAdornment, setShowAdornment] = useState(false);
-  const {
-    data,
-    config,
-    className,
-    id,
-    enabled,
-    uischema,
-    isValid,
-    path,
-    handleChange,
-    schema,
-    muiInputProps,
-    inputComponent
-  } = props;
-  const maxLength = schema.maxLength;
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  let inputProps: InputBaseComponentProps;
-  if (appliedUiSchemaOptions.restrict) {
-    inputProps = { maxLength: maxLength };
-  } else {
-    inputProps = {};
-  }
-  
-  inputProps = merge(inputProps, muiInputProps);
-  
-  if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
-    inputProps.size = maxLength;
-  };
-  
-  const [inputText, onChange, onClear] = useDebouncedChange(handleChange, '', data, path, eventToValue);
-  const onPointerEnter = () => setShowAdornment(true);
-  const onPointerLeave = () => setShowAdornment(false);
+export const MuiInputText = React.memo(
+  (props: CellProps & WithClassname & MuiTextInputProps) => {
+    const [showAdornment, setShowAdornment] = useState(false);
+    const {
+      data,
+      config,
+      className,
+      id,
+      enabled,
+      uischema,
+      isValid,
+      path,
+      handleChange,
+      schema,
+      muiInputProps,
+      inputComponent,
+    } = props;
+    const maxLength = schema.maxLength;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    let inputProps: InputBaseComponentProps;
+    if (appliedUiSchemaOptions.restrict) {
+      inputProps = { maxLength: maxLength };
+    } else {
+      inputProps = {};
+    }
+
+    inputProps = merge(inputProps, muiInputProps);
+
+    if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
+      inputProps.size = maxLength;
+    }
 
-  const theme: JsonFormsTheme = useTheme();
-  
-  const closeStyle = {
-    background: theme.jsonforms?.input?.delete?.background || theme.palette.background.default,
-    borderRadius: '50%'
-  };
+    const [inputText, onChange, onClear] = useDebouncedChange(
+      handleChange,
+      '',
+      data,
+      path,
+      eventToValue
+    );
+    const onPointerEnter = () => setShowAdornment(true);
+    const onPointerLeave = () => setShowAdornment(false);
 
-  return (
-    <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={
-        <InputAdornment
-          position='end'
-          style={{
-            display:
-              !showAdornment || !enabled || data === undefined ? 'none' : 'flex',
-            position: 'absolute',
-            right: 0
-          }}
-        >
-          <IconButton
-            aria-label='Clear input field'
-            onClick={onClear}   
-            size='large'
+    const theme: JsonFormsTheme = useTheme();
+
+    const closeStyle = {
+      background:
+        theme.jsonforms?.input?.delete?.background ||
+        theme.palette.background.default,
+      borderRadius: '50%',
+    };
+
+    return (
+      <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={
+          <InputAdornment
+            position='end'
+            style={{
+              display:
+                !showAdornment || !enabled || data === undefined
+                  ? 'none'
+                  : 'flex',
+              position: 'absolute',
+              right: 0,
+            }}
           >
-            <Close style={closeStyle}/>
-          </IconButton>
-        </InputAdornment>
-      }
-      inputComponent={inputComponent}
-    />
-  );
-});
+            <IconButton
+              aria-label='Clear input field'
+              onClick={onClear}
+              size='large'
+            >
+              <Close style={closeStyle} />
+            </IconButton>
+          </InputAdornment>
+        }
+        inputComponent={inputComponent}
+      />
+    );
+  }
+);
diff --git a/packages/material-renderers/src/mui-controls/MuiInputTime.tsx b/packages/material-renderers/src/mui-controls/MuiInputTime.tsx
index f4daef033..d75401fe5 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputTime.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputTime.tsx
@@ -29,18 +29,15 @@ import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
 export const MuiInputTime = React.memo((props: CellProps & WithClassname) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config
-  } = props;
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const [inputValue, onChange] = useDebouncedChange(handleChange, '', data, path);
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path
+  );
 
   return (
     <Input
diff --git a/packages/material-renderers/src/mui-controls/MuiSelect.tsx b/packages/material-renderers/src/mui-controls/MuiSelect.tsx
index 1cc7efbdd..9549143cd 100644
--- a/packages/material-renderers/src/mui-controls/MuiSelect.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiSelect.tsx
@@ -30,41 +30,51 @@ import merge from 'lodash/merge';
 import { TranslateProps } from '@jsonforms/react';
 import { i18nDefaults } from '../util';
 
-export const MuiSelect = React.memo((props: EnumCellProps & WithClassname & TranslateProps) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    schema,
-    uischema,
-    path,
-    handleChange,
-    options,
-    config,
-    t
-  } = props;
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path}), [t, schema, uischema, path]);
+export const MuiSelect = React.memo(
+  (props: EnumCellProps & WithClassname & TranslateProps) => {
+    const {
+      data,
+      className,
+      id,
+      enabled,
+      schema,
+      uischema,
+      path,
+      handleChange,
+      options,
+      config,
+      t,
+    } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const noneOptionLabel = useMemo(
+      () =>
+        t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+      [t, schema, uischema, path]
+    );
 
-  return (
-    <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'}
-    >
-      {[<MenuItem value={''} key='jsonforms.enum.none'><em>{noneOptionLabel}</em></MenuItem>].concat(
-        options.map(optionValue => (
-          <MenuItem value={optionValue.value} key={optionValue.value}>
-            {optionValue.label}
-          </MenuItem>
-        ))
-      )}
-    </Select>
-  );
-});
+    return (
+      <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'}
+      >
+        {[
+          <MenuItem value={''} key='jsonforms.enum.none'>
+            <em>{noneOptionLabel}</em>
+          </MenuItem>,
+        ].concat(
+          options.map((optionValue) => (
+            <MenuItem value={optionValue.value} key={optionValue.value}>
+              {optionValue.label}
+            </MenuItem>
+          ))
+        )}
+      </Select>
+    );
+  }
+);
diff --git a/packages/material-renderers/src/mui-controls/MuiToggle.tsx b/packages/material-renderers/src/mui-controls/MuiToggle.tsx
index c6db87ebc..620cc46cd 100644
--- a/packages/material-renderers/src/mui-controls/MuiToggle.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiToggle.tsx
@@ -31,32 +31,34 @@ interface MuiToggleInputProps {
   inputProps?: InputProps['inputProps'];
 }
 
-export const MuiToggle = React.memo((props: CellProps & WithClassname & MuiToggleInputProps) => {
-  const {
-    data,
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    config,
-    inputProps
-  } = props;
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
-  const inputPropsMerged = merge({}, inputProps, {
-    autoFocus: !!appliedUiSchemaOptions.focus
-  });
-  const checked = !!data;
+export const MuiToggle = React.memo(
+  (props: CellProps & WithClassname & MuiToggleInputProps) => {
+    const {
+      data,
+      className,
+      id,
+      enabled,
+      uischema,
+      path,
+      handleChange,
+      config,
+      inputProps,
+    } = props;
+    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+    const inputPropsMerged = merge({}, inputProps, {
+      autoFocus: !!appliedUiSchemaOptions.focus,
+    });
+    const checked = !!data;
 
-  return (
-    <Switch
-      checked={checked}
-      onChange={(_ev, isChecked) => handleChange(path, isChecked)}
-      className={className}
-      id={id}
-      disabled={!enabled}
-      inputProps={inputPropsMerged}
-    />
-  );
-});
+    return (
+      <Switch
+        checked={checked}
+        onChange={(_ev, isChecked) => handleChange(path, isChecked)}
+        className={className}
+        id={id}
+        disabled={!enabled}
+        inputProps={inputPropsMerged}
+      />
+    );
+  }
+);
diff --git a/packages/material-renderers/src/util/datejs.tsx b/packages/material-renderers/src/util/datejs.tsx
index fd83272ee..747b81682 100644
--- a/packages/material-renderers/src/util/datejs.tsx
+++ b/packages/material-renderers/src/util/datejs.tsx
@@ -1,23 +1,25 @@
 import { TextField, TextFieldProps } from '@mui/material';
 import dayjs from 'dayjs';
 import customParsing from 'dayjs/plugin/customParseFormat';
-import React, { useRef} from 'react';
+import React, { useRef } from 'react';
 
 // required for the custom save formats in the date, time and date-time pickers
 dayjs.extend(customParsing);
 
-export const createOnChangeHandler = (
-  path: string,
-  handleChange: (path: string, value: any) => void,
-  saveFormat: string | undefined
-) => (time: dayjs.Dayjs, textInputValue: string) => {
-  if (!time) {
-    handleChange(path, undefined);
-    return;
-  }
-  const result = dayjs(time).format(saveFormat);
-  handleChange(path, result === 'Invalid Date' ? textInputValue : result);
-};
+export const createOnChangeHandler =
+  (
+    path: string,
+    handleChange: (path: string, value: any) => void,
+    saveFormat: string | undefined
+  ) =>
+  (time: dayjs.Dayjs, textInputValue: string) => {
+    if (!time) {
+      handleChange(path, undefined);
+      return;
+    }
+    const result = dayjs(time).format(saveFormat);
+    handleChange(path, result === 'Invalid Date' ? textInputValue : result);
+  };
 
 export const getData = (
   data: any,
@@ -33,7 +35,6 @@ export const getData = (
   return dayjsData;
 };
 
-
 interface InputRef {
   lastInput: string;
   toShow: string;
@@ -44,7 +45,7 @@ type ResettableTextFieldProps = TextFieldProps & {
   dayjsValueIsValid: boolean;
   valueInInputFormat: string;
   focused: boolean;
-}
+};
 
 /**
  * The dayjs formatter/parser is very lenient and for example ignores additional digits and/or characters.
@@ -52,13 +53,28 @@ type ResettableTextFieldProps = TextFieldProps & {
  * The 'ResettableTextField' component adjusts the text field to reflect the actual value stored in the data
  * once it's no longer 'focused', i.e. when the user stops editing.
  */
-export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({ rawValue, dayjsValueIsValid, valueInInputFormat, focused, inputProps, ...props }) => {
-  const value = useRef<InputRef>({ lastInput: inputProps?.value, toShow: inputProps?.value });
+export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({
+  rawValue,
+  dayjsValueIsValid,
+  valueInInputFormat,
+  focused,
+  inputProps,
+  ...props
+}) => {
+  const value = useRef<InputRef>({
+    lastInput: inputProps?.value,
+    toShow: inputProps?.value,
+  });
   if (!focused) {
     // The input text is not focused, therefore let's show the value actually stored in the data
     if (!dayjsValueIsValid) {
       // pass through the "raw" value in case it can't be formatted by dayjs
-      value.current.toShow = typeof rawValue === 'string' || rawValue === null || rawValue === undefined ? rawValue : JSON.stringify(rawValue)
+      value.current.toShow =
+        typeof rawValue === 'string' ||
+        rawValue === null ||
+        rawValue === undefined
+          ? rawValue
+          : JSON.stringify(rawValue);
     } else {
       // otherwise use the specified format
       value.current.toShow = valueInInputFormat;
@@ -69,5 +85,10 @@ export const ResettableTextField: React.FC<ResettableTextFieldProps> = ({ rawVal
     value.current.lastInput = inputProps?.value;
     value.current.toShow = inputProps?.value;
   }
-  return <TextField {...props} inputProps={{ ...inputProps, value: value.current.toShow || '' }} />
-}
+  return (
+    <TextField
+      {...props}
+      inputProps={{ ...inputProps, value: value.current.toShow || '' }}
+    />
+  );
+};
diff --git a/packages/material-renderers/src/util/debounce.ts b/packages/material-renderers/src/util/debounce.ts
index 5ca6200d8..2971df827 100644
--- a/packages/material-renderers/src/util/debounce.ts
+++ b/packages/material-renderers/src/util/debounce.ts
@@ -23,21 +23,36 @@
   THE SOFTWARE.
 */
 import debounce from 'lodash/debounce';
-import { useState, useCallback, useEffect } from 'react'
-
+import { useState, useCallback, useEffect } from 'react';
 
 const eventToValue = (ev: any) => ev.target.value;
-export const useDebouncedChange = (handleChange: (path: string, value: any) => void, defaultValue: any, data: any, path: string, eventToValueFunction: (ev: any) => any = eventToValue, timeout = 300): [any, React.ChangeEventHandler, () => void] => {
+export const useDebouncedChange = (
+  handleChange: (path: string, value: any) => void,
+  defaultValue: any,
+  data: any,
+  path: string,
+  eventToValueFunction: (ev: any) => any = eventToValue,
+  timeout = 300
+): [any, React.ChangeEventHandler, () => void] => {
   const [input, setInput] = useState(data ?? defaultValue);
   useEffect(() => {
     setInput(data ?? defaultValue);
   }, [data]);
-  const debouncedUpdate = useCallback(debounce((newValue: string) => handleChange(path, newValue), timeout), [handleChange, path, timeout]);
-  const onChange = useCallback((ev: any) => {
-    const newValue = eventToValueFunction(ev);
-    setInput(newValue ?? defaultValue);
-    debouncedUpdate(newValue);
-  }, [debouncedUpdate, eventToValueFunction]);
-  const onClear = useCallback(() => { setInput(defaultValue); handleChange(path, undefined) }, [defaultValue, handleChange, path]);
+  const debouncedUpdate = useCallback(
+    debounce((newValue: string) => handleChange(path, newValue), timeout),
+    [handleChange, path, timeout]
+  );
+  const onChange = useCallback(
+    (ev: any) => {
+      const newValue = eventToValueFunction(ev);
+      setInput(newValue ?? defaultValue);
+      debouncedUpdate(newValue);
+    },
+    [debouncedUpdate, eventToValueFunction]
+  );
+  const onClear = useCallback(() => {
+    setInput(defaultValue);
+    handleChange(path, undefined);
+  }, [defaultValue, handleChange, path]);
   return [input, onChange, onClear];
-};
\ No newline at end of file
+};
diff --git a/packages/material-renderers/src/util/focus.ts b/packages/material-renderers/src/util/focus.ts
index 5b7921d91..f961bf79f 100644
--- a/packages/material-renderers/src/util/focus.ts
+++ b/packages/material-renderers/src/util/focus.ts
@@ -22,11 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import {useState, useCallback} from 'react';
+import { useState, useCallback } from 'react';
 
-export const useFocus = ():[boolean, () => void, () => void] => {
-    const [focused, setFocused] = useState(false);
-    const onFocus = useCallback(() => setFocused(true), []);
-    const onBlur = useCallback(() => setFocused(false), []);
-    return [focused, onFocus, onBlur];
-};
\ No newline at end of file
+export const useFocus = (): [boolean, () => void, () => void] => {
+  const [focused, setFocused] = useState(false);
+  const onFocus = useCallback(() => setFocused(true), []);
+  const onBlur = useCallback(() => setFocused(false), []);
+  return [focused, onFocus, onBlur];
+};
diff --git a/packages/material-renderers/src/util/i18nDefaults.ts b/packages/material-renderers/src/util/i18nDefaults.ts
index f959ec9d0..508ce9cef 100644
--- a/packages/material-renderers/src/util/i18nDefaults.ts
+++ b/packages/material-renderers/src/util/i18nDefaults.ts
@@ -1,3 +1,3 @@
 export const i18nDefaults = {
-    'enum.none': 'None'
-}
+  'enum.none': 'None',
+};
diff --git a/packages/material-renderers/src/util/layout.tsx b/packages/material-renderers/src/util/layout.tsx
index abcc2a3f6..837194764 100644
--- a/packages/material-renderers/src/util/layout.tsx
+++ b/packages/material-renderers/src/util/layout.tsx
@@ -23,8 +23,7 @@
   THE SOFTWARE.
 */
 import isEmpty from 'lodash/isEmpty';
-import React from 'react';
-import { ComponentType } from 'react';
+import React, { ComponentType } from 'react';
 import Ajv from 'ajv';
 import type { UISchemaElement } from '@jsonforms/core';
 import {
@@ -63,54 +62,57 @@ export interface MaterialLayoutRendererProps extends OwnPropsOfRenderer {
   elements: UISchemaElement[];
   direction: 'row' | 'column';
 }
-const MaterialLayoutRendererComponent =
-  ({
-    visible,
-    elements,
-    schema,
-    path,
-    enabled,
-    direction,
-    renderers,
-    cells
-  }: MaterialLayoutRendererProps) => {
-    if (isEmpty(elements)) {
-      return null;
-    } else {
-      return (
-        <Hidden xsUp={!visible}>
-          <Grid
-            container
-            direction={direction}
-            spacing={direction === 'row' ? 2 : 0}
-          >
-            {renderLayoutElements(
-              elements,
-              schema,
-              path,
-              enabled,
-              renderers,
-              cells
-            )}
-          </Grid>
-        </Hidden>
-      );
-    }
-  };
-export const MaterialLayoutRenderer = React.memo(MaterialLayoutRendererComponent);
+const MaterialLayoutRendererComponent = ({
+  visible,
+  elements,
+  schema,
+  path,
+  enabled,
+  direction,
+  renderers,
+  cells,
+}: MaterialLayoutRendererProps) => {
+  if (isEmpty(elements)) {
+    return null;
+  } else {
+    return (
+      <Hidden xsUp={!visible}>
+        <Grid
+          container
+          direction={direction}
+          spacing={direction === 'row' ? 2 : 0}
+        >
+          {renderLayoutElements(
+            elements,
+            schema,
+            path,
+            enabled,
+            renderers,
+            cells
+          )}
+        </Grid>
+      </Hidden>
+    );
+  }
+};
+export const MaterialLayoutRenderer = React.memo(
+  MaterialLayoutRendererComponent
+);
 
 export interface AjvProps {
   ajv: Ajv;
 }
 
-export const withAjvProps = <P extends {}>(Component: ComponentType<AjvProps & P>) =>
+export const withAjvProps =
+  <P extends {}>(Component: ComponentType<AjvProps & P>) =>
   (props: P) => {
     const ctx = useJsonForms();
-    const ajv = getAjv({jsonforms: {...ctx}});
+    const ajv = getAjv({ jsonforms: { ...ctx } });
 
-    return (<Component {...props} ajv={ajv} />);
+    return <Component {...props} ajv={ajv} />;
   };
 
-export interface MaterialLabelableLayoutRendererProps extends MaterialLayoutRendererProps {
+export interface MaterialLabelableLayoutRendererProps
+  extends MaterialLayoutRendererProps {
   label?: string;
 }
diff --git a/packages/material-renderers/src/util/theme.ts b/packages/material-renderers/src/util/theme.ts
index 36e2ba6e4..5eeb7498c 100644
--- a/packages/material-renderers/src/util/theme.ts
+++ b/packages/material-renderers/src/util/theme.ts
@@ -29,7 +29,7 @@ export interface JsonFormsTheme extends Theme {
     input?: {
       delete?: {
         background?: string;
-      }
-    }
+      };
+    };
   };
 }
diff --git a/packages/material-renderers/test/renderers/MatchMediaMock.ts b/packages/material-renderers/test/renderers/MatchMediaMock.ts
index a424ca3ea..62f070cd0 100644
--- a/packages/material-renderers/test/renderers/MatchMediaMock.ts
+++ b/packages/material-renderers/test/renderers/MatchMediaMock.ts
@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-window.matchMedia = jest.fn().mockImplementation(query => {
+window.matchMedia = jest.fn().mockImplementation((query) => {
   return {
     matches: true,
     media: query,
@@ -31,6 +31,6 @@ window.matchMedia = jest.fn().mockImplementation(query => {
     removeListener: jest.fn(),
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn()
+    dispatchEvent: jest.fn(),
   };
 });
diff --git a/packages/material-renderers/test/renderers/MaterialAllOfRenderer.test.tsx b/packages/material-renderers/test/renderers/MaterialAllOfRenderer.test.tsx
index 750e38fe0..efc6bbe50 100644
--- a/packages/material-renderers/test/renderers/MaterialAllOfRenderer.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialAllOfRenderer.test.tsx
@@ -47,20 +47,20 @@ describe('Material allOf renderer', () => {
           allOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     wrapper = mount(
       <JsonForms
@@ -83,24 +83,26 @@ describe('Material allOf renderer', () => {
           allOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const core = initCore(schema, uischema);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialAllOfRenderer
           schema={schema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialAnyOfRenderer.test.tsx b/packages/material-renderers/test/renderers/MaterialAnyOfRenderer.test.tsx
index 222d13a5b..8c8ad8304 100644
--- a/packages/material-renderers/test/renderers/MaterialAnyOfRenderer.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialAnyOfRenderer.test.tsx
@@ -27,20 +27,18 @@ import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import {
-  ControlElement
-} from '@jsonforms/core';
+import { ControlElement } from '@jsonforms/core';
 import {
   MaterialAnyOfRenderer,
   materialCells,
-  materialRenderers
+  materialRenderers,
 } from '../../src';
 import { JsonForms, JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore, TestEmitter } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-const waitForAsync = () => new Promise(resolve => setImmediate(resolve));
+const waitForAsync = () => new Promise((resolve) => setImmediate(resolve));
 
 const clickAddButton = (wrapper: ReactWrapper, times: number) => {
   const buttons = wrapper.find('button');
@@ -70,23 +68,23 @@ describe('Material anyOf renderer', () => {
           anyOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonForms
@@ -105,7 +103,7 @@ describe('Material anyOf renderer', () => {
     wrapper.update();
     setTimeout(() => {
       expect(onChangeData.data).toEqual({
-        value: 'test'
+        value: 'test',
       });
       done();
     }, 1000);
@@ -118,13 +116,13 @@ describe('Material anyOf renderer', () => {
         myThingsAndOrYourThings: {
           anyOf: [
             {
-              $ref: '#/definitions/myThings'
+              $ref: '#/definitions/myThings',
             },
             {
-              $ref: '#/definitions/yourThings'
-            }
-          ]
-        }
+              $ref: '#/definitions/yourThings',
+            },
+          ],
+        },
       },
       definitions: {
         myThings: {
@@ -134,10 +132,10 @@ describe('Material anyOf renderer', () => {
             type: 'object',
             properties: {
               name: {
-                type: 'string'
-              }
-            }
-          }
+                type: 'string',
+              },
+            },
+          },
         },
         yourThings: {
           title: 'YourThings',
@@ -146,24 +144,23 @@ describe('Material anyOf renderer', () => {
             type: 'object',
             properties: {
               age: {
-                type: 'number'
-              }
-            }
-          }
-        }
-      }
+                type: 'number',
+              },
+            },
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/myThingsAndOrYourThings'
+      scope: '#/properties/myThingsAndOrYourThings',
     };
     const core = initCore(schema, uischema);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialAnyOfRenderer
-          schema={schema}
-          uischema={uischema}
-        />
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
+        <MaterialAnyOfRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
@@ -189,13 +186,13 @@ describe('Material anyOf renderer', () => {
         myThingsAndOrYourThings: {
           anyOf: [
             {
-              $ref: '#/definitions/myThings'
+              $ref: '#/definitions/myThings',
             },
             {
-              $ref: '#/definitions/yourThings'
-            }
-          ]
-        }
+              $ref: '#/definitions/yourThings',
+            },
+          ],
+        },
       },
       definitions: {
         myThings: {
@@ -205,10 +202,10 @@ describe('Material anyOf renderer', () => {
             type: 'object',
             properties: {
               name: {
-                type: 'string'
-              }
-            }
-          }
+                type: 'string',
+              },
+            },
+          },
         },
         yourThings: {
           title: 'YourThings',
@@ -217,32 +214,31 @@ describe('Material anyOf renderer', () => {
             type: 'object',
             properties: {
               age: {
-                type: 'number'
-              }
-            }
-          }
-        }
-      }
+                type: 'number',
+              },
+            },
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/myThingsAndOrYourThings'
+      scope: '#/properties/myThingsAndOrYourThings',
     };
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(schema, uischema);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, cells: materialCells, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, cells: materialCells, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
           }}
         />
-        <MaterialAnyOfRenderer
-          schema={schema}
-          uischema={uischema}
-        />
+        <MaterialAnyOfRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
@@ -265,7 +261,7 @@ describe('Material anyOf renderer', () => {
 
     setTimeout(() => {
       expect(onChangeData.data).toEqual({
-        myThingsAndOrYourThings: [{ age: 5, name: 'test' }]
+        myThingsAndOrYourThings: [{ age: 5, name: 'test' }],
       });
       done();
     }, 1000);
@@ -279,24 +275,26 @@ describe('Material anyOf renderer', () => {
           anyOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const core = initCore(schema, uischema);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialAnyOfRenderer
           schema={schema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialAnyOfStringOrEnumControl.test.tsx b/packages/material-renderers/test/renderers/MaterialAnyOfStringOrEnumControl.test.tsx
index c8f6a56c3..2c7f58447 100644
--- a/packages/material-renderers/test/renderers/MaterialAnyOfStringOrEnumControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialAnyOfStringOrEnumControl.test.tsx
@@ -27,26 +27,23 @@ import React from 'react';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import {
-  ControlElement,
-  JsonSchema
-} from '@jsonforms/core';
+import { ControlElement, JsonSchema } from '@jsonforms/core';
 import {
   MaterialAnyOfStringOrEnumControl,
   materialAnyOfStringOrEnumControlTester,
-  materialRenderers
+  materialRenderers,
 } from '../../src';
 import { JsonForms } from '@jsonforms/react';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 const schema: JsonSchema = {
-  anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }]
+  anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }],
 };
 
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 describe('Material simple any of control tester', () => {
@@ -54,43 +51,61 @@ describe('Material simple any of control tester', () => {
     expect(
       materialAnyOfStringOrEnumControlTester({ type: 'Foo' }, schema, undefined)
     ).toBe(-1);
-    expect(materialAnyOfStringOrEnumControlTester(uischema, schema, undefined)).toBe(5);
+    expect(
+      materialAnyOfStringOrEnumControlTester(uischema, schema, undefined)
+    ).toBe(5);
 
     const nestedSchema: JsonSchema = {
       properties: {
-        foo: { anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }] }
-      }
+        foo: { anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }] },
+      },
     };
     const nestedUischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      materialAnyOfStringOrEnumControlTester(nestedUischema, nestedSchema, undefined)
+      materialAnyOfStringOrEnumControlTester(
+        nestedUischema,
+        nestedSchema,
+        undefined
+      )
     ).toBe(5);
     const schemaNoEnum: JsonSchema = {
-      anyOf: [{ type: 'string' }]
+      anyOf: [{ type: 'string' }],
     };
     const schemaConflictTypes: JsonSchema = {
-      anyOf: [{ type: 'string' }, { type: 'integer', enum: [1, 2] }]
+      anyOf: [{ type: 'string' }, { type: 'integer', enum: [1, 2] }],
     };
     const schemaAdditionalProps: JsonSchema = {
-      anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }, { maxLength: 5 }]
+      anyOf: [{ type: 'string' }, { enum: ['foo', 'bar'] }, { maxLength: 5 }],
     };
     const schemaNoString: JsonSchema = {
-      anyOf: [{ type: 'integer' }, { enum: [1, 2] }]
+      anyOf: [{ type: 'integer' }, { enum: [1, 2] }],
     };
-    expect(materialAnyOfStringOrEnumControlTester(uischema, schemaNoEnum, undefined)).toBe(
-      -1
-    );
     expect(
-      materialAnyOfStringOrEnumControlTester(uischema, schemaConflictTypes, undefined)
+      materialAnyOfStringOrEnumControlTester(uischema, schemaNoEnum, undefined)
+    ).toBe(-1);
+    expect(
+      materialAnyOfStringOrEnumControlTester(
+        uischema,
+        schemaConflictTypes,
+        undefined
+      )
     ).toBe(-1);
     expect(
-      materialAnyOfStringOrEnumControlTester(uischema, schemaAdditionalProps, undefined)
+      materialAnyOfStringOrEnumControlTester(
+        uischema,
+        schemaAdditionalProps,
+        undefined
+      )
     ).toBe(5);
     expect(
-      materialAnyOfStringOrEnumControlTester(uischema, schemaNoString, undefined)
+      materialAnyOfStringOrEnumControlTester(
+        uischema,
+        schemaNoString,
+        undefined
+      )
     ).toBe(-1);
   });
 });
diff --git a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
index 4b5f6d482..5584b1494 100644
--- a/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialArrayControl.test.tsx
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import './MatchMediaMock';
-import {
-  ControlElement,
-  DispatchCellProps,
-  JsonSchema
-} from '@jsonforms/core';
+import { ControlElement, DispatchCellProps, JsonSchema } from '@jsonforms/core';
 import * as React from 'react';
 
 import MaterialArrayControlRenderer from '../../src/complex/MaterialArrayControlRenderer';
@@ -47,11 +43,11 @@ const fixture: {
   data: [
     {
       message: 'El Barto was here',
-      done: true
+      done: true,
     },
     {
-      message: 'Yolo'
-    }
+      message: 'Yolo',
+    },
   ],
   schema: {
     type: 'array',
@@ -60,18 +56,18 @@ const fixture: {
       properties: {
         message: {
           type: 'string',
-          maxLength: 3
+          maxLength: 3,
         },
         done: {
-          type: 'boolean'
-        }
-      }
-    }
+          type: 'boolean',
+        },
+      },
+    },
   },
   uischema: {
     type: 'Control',
-    scope: '#'
-  }
+    scope: '#',
+  },
 };
 
 const fixture2: {
@@ -85,17 +81,17 @@ const fixture2: {
     properties: {
       test: {
         type: 'array',
-        items: { type: 'string' }
-      }
-    }
+        items: { type: 'string' },
+      },
+    },
   },
   uischema: {
     type: 'Control',
     scope: '#/properties/test',
     options: {
-      showSortButtons: true
-    }
-  }
+      showSortButtons: true,
+    },
+  },
 };
 
 describe('Material array control', () => {
@@ -106,7 +102,9 @@ describe('Material array control', () => {
   it('should render', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture.schema}
           uischema={fixture.uischema}
@@ -122,7 +120,9 @@ describe('Material array control', () => {
   it('should render empty', () => {
     const core = initCore(fixture.schema, fixture.uischema);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture.schema}
           uischema={fixture.uischema}
@@ -146,18 +146,20 @@ describe('Material array control', () => {
       properties: {
         test: {
           type: 'array',
-          items: { type: 'object' }
-        }
-      }
+          items: { type: 'object' },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/test'
+      scope: '#/properties/test',
     };
     const core = initCore(schema, uischema, data);
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -176,32 +178,34 @@ describe('Material array control', () => {
     const schema: JsonSchema = {
       type: 'object',
       properties: {
-          test: {
-              type: 'array',
-              items: {
-                  type: 'object',
-                  properties: {
-                      test1: {
-                          type: 'string',
-                          title: 'first test'
-                      },
-                      test_2: {
-                          type: 'string',
-                      }
-                  }
-              }
-          }
-      }
+        test: {
+          type: 'array',
+          items: {
+            type: 'object',
+            properties: {
+              test1: {
+                type: 'string',
+                title: 'first test',
+              },
+              test_2: {
+                type: 'string',
+              },
+            },
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/test'
+      scope: '#/properties/test',
     };
     const core = initCore(schema, uischema, data);
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-          <MaterialArrayControlRenderer schema={schema} uischema={uischema} />
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
+        <MaterialArrayControlRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
@@ -223,17 +227,19 @@ describe('Material array control', () => {
       properties: {
         test: {
           type: 'array',
-          items: { type: 'string' }
-        }
-      }
+          items: { type: 'string' },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/test'
+      scope: '#/properties/test',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -255,17 +261,19 @@ describe('Material array control', () => {
       properties: {
         test: {
           type: 'array',
-          items: { type: 'string' }
-        }
-      }
+          items: { type: 'string' },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/test'
+      scope: '#/properties/test',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -278,10 +286,12 @@ describe('Material array control', () => {
   it('should delete an item', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, cells: materialCells, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, cells: materialCells, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -329,15 +339,18 @@ describe('Material array control', () => {
     const cells = [
       {
         tester: () => 50,
-        cell: CellRenderer1
-      }, {
+        cell: CellRenderer1,
+      },
+      {
         tester: () => 51,
-        cell: CellRenderer2
-      }
+        cell: CellRenderer2,
+      },
     ];
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture.schema}
           uischema={fixture.uischema}
@@ -355,15 +368,17 @@ describe('Material array control', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const cell = {
       tester: () => 50,
-      cell: CellRenderer1
+      cell: CellRenderer1,
     };
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture.schema}
           uischema={fixture.uischema}
-          cells={[ cell, { tester: () => 60, cell: CellRenderer2 }]}
+          cells={[cell, { tester: () => 60, cell: CellRenderer2 }]}
         />
       </JsonFormsStateProvider>
     );
@@ -383,28 +398,30 @@ describe('Material array control', () => {
             type: 'object',
             properties: {
               somethingElse: {
-                type: 'string'
+                type: 'string',
               },
               thing: {
                 type: 'string',
-                enum: ['thing']
-              }
-            }
-          }
-        }
-      }
+                enum: ['thing'],
+              },
+            },
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/things'
+      scope: '#/properties/things',
     };
     const core = initCore(schema, uischema, {});
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -442,24 +459,26 @@ describe('Material array control', () => {
             type: 'object',
             properties: {
               somethingElse: {
-                type: 'string'
+                type: 'string',
               },
               thing: {
                 type: 'string',
-                enum: ['thing']
-              }
-            }
-          }
-        }
-      }
+                enum: ['thing'],
+              },
+            },
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/things'
+      scope: '#/properties/things',
     };
     const core = initCore(schema, uischema, {});
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer
           schema={schema}
           uischema={uischema}
@@ -478,7 +497,9 @@ describe('Material array control', () => {
     const data = { test: ['foo'] };
     const core = initCore(fixture2.schema, fixture2.uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture2.schema}
           uischema={fixture2.uischema}
@@ -497,10 +518,12 @@ describe('Material array control', () => {
   it('should be able to move item down if down button is clicked', () => {
     const core = initCore(fixture2.schema, fixture2.uischema, fixture2.data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -520,16 +543,18 @@ describe('Material array control', () => {
       .find({ 'aria-label': 'Move item down' });
     downButton.simulate('click');
     expect(onChangeData.data).toEqual({
-      test: ['baz', 'foo', 'bar']
+      test: ['baz', 'foo', 'bar'],
     });
   });
   it('should be able to move item up if up button is clicked', () => {
     const core = initCore(fixture2.schema, fixture2.uischema, fixture2.data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -549,13 +574,15 @@ describe('Material array control', () => {
       .find({ 'aria-label': 'Move item up' });
     upButton.simulate('click');
     expect(onChangeData.data).toEqual({
-      test: ['foo', 'bar', 'baz']
+      test: ['foo', 'bar', 'baz'],
     });
   });
   it('should have up button disabled for first element', () => {
     const core = initCore(fixture2.schema, fixture2.uischema, fixture2.data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture2.schema}
           uischema={fixture2.uischema}
@@ -574,7 +601,9 @@ describe('Material array control', () => {
   it('should have fields enabled', () => {
     const core = initCore(fixture2.schema, fixture2.uischema, fixture2.data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, cells: materialCells, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, cells: materialCells, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture2.schema}
           uischema={fixture2.uischema}
@@ -583,18 +612,16 @@ describe('Material array control', () => {
       </JsonFormsStateProvider>
     );
     // first row is header in table
-    const input = wrapper
-      .find('tr')
-      .at(1)
-      .find('input')
-      .first();
+    const input = wrapper.find('tr').at(1).find('input').first();
     expect(input.props().disabled).toBe(false);
   });
 
   it('should have fields disabled', () => {
     const core = initCore(fixture2.schema, fixture2.uischema, fixture2.data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, cells: materialCells, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, cells: materialCells, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture2.schema}
           uischema={fixture2.uischema}
@@ -603,18 +630,16 @@ describe('Material array control', () => {
       </JsonFormsStateProvider>
     );
     // first row is header in table
-    const input = wrapper
-      .find('tr')
-      .at(1)
-      .find('input')
-      .first();
+    const input = wrapper.find('tr').at(1).find('input').first();
     expect(input.props().disabled).toBe(true);
   });
 
   it('should have down button disabled for last element', () => {
     const core = initCore(fixture2.schema, fixture2.uischema, fixture2.data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayControlRenderer
           schema={fixture2.schema}
           uischema={fixture2.uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
index ea1e349ff..65723c530 100644
--- a/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialArrayLayout.test.tsx
@@ -23,15 +23,13 @@
   THE SOFTWARE.
 */
 import './MatchMediaMock';
-import {
-  ControlElement
-} from '@jsonforms/core';
+import { ControlElement } from '@jsonforms/core';
 import * as React from 'react';
 
 import { materialRenderers } from '../../src';
 import {
   MaterialArrayLayout,
-  materialArrayLayoutTester
+  materialArrayLayoutTester,
 } from '../../src/layouts';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
@@ -45,12 +43,12 @@ const data = [
   {
     message: 'El Barto was here',
     message2: 'El Barto was here 2',
-    done: true
+    done: true,
   },
   {
     message: 'Yolo',
-    message2: 'Yolo 2'
-  }
+    message2: 'Yolo 2',
+  },
 ];
 const schema = {
   type: 'array',
@@ -59,37 +57,37 @@ const schema = {
     properties: {
       message: {
         type: 'string',
-        maxLength: 3
+        maxLength: 3,
       },
       done: {
-        type: 'boolean'
-      }
-    }
-  }
+        type: 'boolean',
+      },
+    },
+  },
 };
 
 const nestedSchema = {
   type: 'array',
   items: {
-    ...schema
-  }
+    ...schema,
+  },
 };
 
 const nestedSchemaWithRef = {
   definitions: {
     arrayItems: {
-      ...schema
-    }
+      ...schema,
+    },
   },
   type: 'array',
   items: {
-    $ref: '#/definitions/arrayItems'
-  }
-}
+    $ref: '#/definitions/arrayItems',
+  },
+};
 
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 const nestedSchema2 = {
@@ -103,41 +101,41 @@ const nestedSchema2 = {
           choices: {
             type: 'array',
             items: {
-              type: 'string'
-            }
-          }
-        }
-      }
-    }
-  }
+              type: 'string',
+            },
+          },
+        },
+      },
+    },
+  },
 };
 
 const nestedSchema2WithRef = {
   definitions: {
     arrayItems: {
-      ...nestedSchema2
-    }
+      ...nestedSchema2,
+    },
   },
   type: 'array',
   items: {
-    $ref: '#/definitions/arrayItems'
-  }
-}
+    $ref: '#/definitions/arrayItems',
+  },
+};
 
 const uischemaWithSortOption: ControlElement = {
   type: 'Control',
   scope: '#',
   options: {
-    showSortButtons: true
-  }
+    showSortButtons: true,
+  },
 };
 
 const uischemaWithChildLabelProp: ControlElement = {
   type: 'Control',
   scope: '#',
   options: {
-    elementLabelProp: 'message2'
-  }
+    elementLabelProp: 'message2',
+  },
 };
 
 const uischemaOptions: {
@@ -149,15 +147,15 @@ const uischemaOptions: {
     type: 'Control',
     scope: '#',
     options: {
-      detail: 'DEFAULT'
-    }
+      detail: 'DEFAULT',
+    },
   },
   generate: {
     type: 'Control',
     scope: '#',
     options: {
-      detail: 'GENERATE'
-    }
+      detail: 'GENERATE',
+    },
   },
   inline: {
     type: 'Control',
@@ -168,26 +166,54 @@ const uischemaOptions: {
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/message'
-          }
-        ]
-      }
-    }
-  }
+            scope: '#/properties/message',
+          },
+        ],
+      },
+    },
+  },
 };
 
 describe('Material array layout tester', () => {
   it('should only be applicable for intermediate array or when containing proper options', () => {
     expect(materialArrayLayoutTester(uischema, schema, undefined)).toBe(-1);
-    expect(materialArrayLayoutTester(uischema, nestedSchema, undefined)).toBe(4);
-    expect(materialArrayLayoutTester(uischema, nestedSchema2, undefined)).toBe(4);
-    expect(materialArrayLayoutTester(uischema, nestedSchemaWithRef, createTesterContext(nestedSchemaWithRef))).toBe(4);
-    expect(materialArrayLayoutTester(uischema, nestedSchemaWithRef, createTesterContext(nestedSchemaWithRef))).toBe(4);
-    expect(materialArrayLayoutTester(uischema, nestedSchema2WithRef, createTesterContext(nestedSchema2WithRef))).toBe(4);
-
-    expect(materialArrayLayoutTester(uischemaOptions.default, schema, undefined)).toBe(-1);
-    expect(materialArrayLayoutTester(uischemaOptions.generate, schema, undefined)).toBe(4);
-    expect(materialArrayLayoutTester(uischemaOptions.inline, schema, undefined)).toBe(4);
+    expect(materialArrayLayoutTester(uischema, nestedSchema, undefined)).toBe(
+      4
+    );
+    expect(materialArrayLayoutTester(uischema, nestedSchema2, undefined)).toBe(
+      4
+    );
+    expect(
+      materialArrayLayoutTester(
+        uischema,
+        nestedSchemaWithRef,
+        createTesterContext(nestedSchemaWithRef)
+      )
+    ).toBe(4);
+    expect(
+      materialArrayLayoutTester(
+        uischema,
+        nestedSchemaWithRef,
+        createTesterContext(nestedSchemaWithRef)
+      )
+    ).toBe(4);
+    expect(
+      materialArrayLayoutTester(
+        uischema,
+        nestedSchema2WithRef,
+        createTesterContext(nestedSchema2WithRef)
+      )
+    ).toBe(4);
+
+    expect(
+      materialArrayLayoutTester(uischemaOptions.default, schema, undefined)
+    ).toBe(-1);
+    expect(
+      materialArrayLayoutTester(uischemaOptions.generate, schema, undefined)
+    ).toBe(4);
+    expect(
+      materialArrayLayoutTester(uischemaOptions.inline, schema, undefined)
+    ).toBe(4);
   });
 });
 
@@ -199,7 +225,9 @@ describe('Material array layout', () => {
   it('should render two by two children', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayLayout schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -212,8 +240,13 @@ describe('Material array layout', () => {
   it('should generate uischema when options.detail=GENERATE', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialArrayLayout schema={schema} uischema={uischemaOptions.generate} />
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
+        <MaterialArrayLayout
+          schema={schema}
+          uischema={uischemaOptions.generate}
+        />
       </JsonFormsStateProvider>
     );
 
@@ -225,8 +258,13 @@ describe('Material array layout', () => {
   it('should use inline options.detail uischema', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialArrayLayout schema={schema} uischema={uischemaOptions.inline} />
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
+        <MaterialArrayLayout
+          schema={schema}
+          uischema={uischemaOptions.inline}
+        />
       </JsonFormsStateProvider>
     );
 
@@ -238,7 +276,9 @@ describe('Material array layout', () => {
   it('should be hideable', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayLayout
           schema={schema}
           uischema={uischema}
@@ -255,7 +295,9 @@ describe('Material array layout', () => {
   it('should have renderers prop via ownProps', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayLayout
           schema={schema}
           uischema={uischema}
@@ -271,7 +313,7 @@ describe('Material array layout', () => {
   it('ui schema label for array', () => {
     const uischemaWithLabel = {
       ...uischema,
-      label: 'My awesome label'
+      label: 'My awesome label',
     };
     wrapper = mount(
       <JsonForms
@@ -291,11 +333,13 @@ describe('Material array layout', () => {
   it('schema title for array', () => {
     const titleSchema = {
       ...schema,
-      title: 'My awesome title'
+      title: 'My awesome title',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialArrayLayout schema={titleSchema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -340,7 +384,7 @@ describe('Material array layout', () => {
         schema={nestedSchema}
         uischema={uischema}
         renderers={materialRenderers}
-        config={{showSortButtons: true}}
+        config={{ showSortButtons: true }}
       />
     );
 
@@ -365,14 +409,14 @@ describe('Material array layout', () => {
   });
   it('should move item up if up button is presses', (done) => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonForms
         data={data}
         schema={nestedSchema}
         uischema={uischema}
-        config={{showSortButtons: true}}
+        config={{ showSortButtons: true }}
         renderers={materialRenderers}
         onChange={({ data }) => {
           onChangeData.data = data;
@@ -394,20 +438,20 @@ describe('Material array layout', () => {
       expect(onChangeData.data).toEqual([
         {
           message: 'Yolo',
-          message2: 'Yolo 2'
+          message2: 'Yolo 2',
         },
         {
           message: 'El Barto was here',
           message2: 'El Barto was here 2',
-          done: true
-        }
+          done: true,
+        },
       ]);
       done();
     }, 50);
   });
   it('should move item down if down button is pressed', (done) => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonForms
@@ -435,14 +479,15 @@ describe('Material array layout', () => {
       expect(onChangeData.data).toEqual([
         {
           message: 'Yolo',
-          message2: 'Yolo 2'
+          message2: 'Yolo 2',
         },
         {
           message: 'El Barto was here',
           message2: 'El Barto was here 2',
-          done: true
-        }
-      ]); done();
+          done: true,
+        },
+      ]);
+      done();
     }, 50);
   });
   it('should have up button disabled for first element', () => {
@@ -488,21 +533,19 @@ describe('Material array layout', () => {
 
   const getChildLabel = (wrapper: ReactWrapper, index: number) =>
     wrapper
-      .find(
-        `#${
-        wrapper
-          .find(Accordion)
-          .at(index)
-          .props()['aria-labelledby']
-        }`
-      )
+      .find(`#${wrapper.find(Accordion).at(index).props()['aria-labelledby']}`)
       .text();
 
   it('should render first simple property as child label', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <MaterialArrayLayout schema={schema} uischema={uischemaWithSortOption} />
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
+        <MaterialArrayLayout
+          schema={schema}
+          uischema={uischemaWithSortOption}
+        />
       </JsonFormsStateProvider>
     );
 
diff --git a/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx b/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx
index 13feefc07..268ec15c6 100644
--- a/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialBooleanCell.test.tsx
@@ -24,12 +24,9 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  NOT_APPLICABLE,
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import BooleanCell, {
-  materialBooleanCellTester
+  materialBooleanCellTester,
 } from '../../src/cells/MaterialBooleanCell';
 import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
@@ -43,64 +40,75 @@ Enzyme.configure({ adapter: new Adapter() });
 
 const data = { foo: true };
 const schema = {
-  type: 'boolean'
+  type: 'boolean',
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material boolean cell tester', () => {
   const control: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
 
   it('should fail', () => {
     expect(materialBooleanCellTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialBooleanCellTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialBooleanCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialBooleanCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialBooleanCellTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
     expect(
-      materialBooleanCellTester(control, {
-        type: 'object',
-        properties: { foo: { type: 'string' } }
-      },
-      undefined)
+      materialBooleanCellTester({ type: 'Foo' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialBooleanCellTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialBooleanCellTester(
+        control,
+        {
+          type: 'object',
+          properties: { foo: { type: 'string' } },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialBooleanCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
+      materialBooleanCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+            bar: {
+              type: 'boolean',
+            },
           },
-          bar: {
-            type: 'boolean'
-          }
-        }
-      },
-      undefined)
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed', () => {
     expect(
-      materialBooleanCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'boolean'
-          }
-        }
-      },
-      undefined)
+      materialBooleanCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'boolean',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -123,12 +131,14 @@ describe('Material boolean cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <BooleanCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -141,12 +151,14 @@ describe('Material boolean cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <BooleanCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -157,11 +169,13 @@ describe('Material boolean cell', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <BooleanCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -172,7 +186,9 @@ describe('Material boolean cell', () => {
   it('should render', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <BooleanCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -185,10 +201,12 @@ describe('Material boolean cell', () => {
   it('should update via input event', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -206,10 +224,12 @@ describe('Material boolean cell', () => {
   it('should update via action', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -219,7 +239,7 @@ describe('Material boolean cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: false };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().checked).toBeFalsy();
@@ -229,10 +249,12 @@ describe('Material boolean cell', () => {
   it('should update with undefined value', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -242,7 +264,7 @@ describe('Material boolean cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().checked).toBeFalsy();
@@ -251,10 +273,12 @@ describe('Material boolean cell', () => {
   it('should update with null value', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -264,7 +288,7 @@ describe('Material boolean cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().checked).toBeFalsy();
@@ -273,10 +297,12 @@ describe('Material boolean cell', () => {
   it('should not update with wrong ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -286,7 +312,7 @@ describe('Material boolean cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 11 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     const input = wrapper.find('input').first();
     expect(input.props().checked).toBeTruthy();
   });
@@ -294,10 +320,12 @@ describe('Material boolean cell', () => {
   it('should not update with null ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -307,7 +335,7 @@ describe('Material boolean cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: false };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     const input = wrapper.find('input').first();
     expect(input.props().checked).toBeTruthy();
   });
@@ -315,10 +343,12 @@ describe('Material boolean cell', () => {
   it('should not update with an undefined ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -327,8 +357,8 @@ describe('Material boolean cell', () => {
         <BooleanCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
-    core.data = { ...core.data, undefined: false};
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    core.data = { ...core.data, undefined: false };
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().checked).toBeTruthy();
@@ -337,7 +367,9 @@ describe('Material boolean cell', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <BooleanCell
           schema={schema}
           uischema={uischema}
@@ -353,7 +385,9 @@ describe('Material boolean cell', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <BooleanCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -364,7 +398,9 @@ describe('Material boolean cell', () => {
   it('id should be present in output', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <BooleanCell schema={schema} uischema={uischema} path='foo' id='myid' />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx b/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx
index 975ab9495..539d35ff1 100644
--- a/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialBooleanToggleCell.test.tsx
@@ -27,10 +27,10 @@ import * as React from 'react';
 import {
   ControlElement,
   NOT_APPLICABLE,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 import BooleanToggleCell, {
-  materialBooleanToggleCellTester
+  materialBooleanToggleCellTester,
 } from '../../src/cells/MaterialBooleanToggleCell';
 import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
@@ -45,14 +45,14 @@ Enzyme.configure({ adapter: new Adapter() });
 
 const data = { foo: true };
 const schema = {
-  type: 'boolean'
+  type: 'boolean',
 };
 const uischema: ControlElement = {
   type: 'Control',
   scope: '#/properties/foo',
   options: {
-    toggle: true
-  }
+    toggle: true,
+  },
 };
 
 describe('Material boolean toggle cell tester', () => {
@@ -60,43 +60,49 @@ describe('Material boolean toggle cell tester', () => {
     type: 'Control',
     scope: '#/properties/foo',
     options: {
-      toggle: true
-    }
+      toggle: true,
+    },
   };
 
   it('should fail', () => {
-    expect(materialBooleanToggleCellTester(undefined, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
+    expect(
+      materialBooleanToggleCellTester(undefined, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
     expect(materialBooleanToggleCellTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialBooleanToggleCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
+    expect(
+      materialBooleanToggleCellTester({ type: 'Foo' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
     expect(
       materialBooleanToggleCellTester({ type: 'Control' }, undefined, undefined)
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialBooleanToggleCellTester(control, {
-        type: 'object',
-        properties: { foo: { type: 'string' } }
-      },
-      undefined)
+      materialBooleanToggleCellTester(
+        control,
+        {
+          type: 'object',
+          properties: { foo: { type: 'string' } },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialBooleanToggleCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
+      materialBooleanToggleCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+            bar: {
+              type: 'boolean',
+            },
           },
-          bar: {
-            type: 'boolean'
-          }
-        }
-      },
-      undefined)
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
 
     // Not applicable for boolean cell if toggle option is false
@@ -106,16 +112,16 @@ describe('Material boolean toggle cell tester', () => {
           type: 'Control',
           scope: '#/properties/foo',
           options: {
-            toggle: false
-          }
+            toggle: false,
+          },
         } as UISchemaElement,
         {
           type: 'object',
           properties: {
             foo: {
-              type: 'boolean'
-            }
-          }
+              type: 'boolean',
+            },
+          },
         },
         undefined
       )
@@ -132,9 +138,9 @@ describe('Material boolean toggle cell tester', () => {
           type: 'object',
           properties: {
             foo: {
-              type: 'boolean'
-            }
-          }
+              type: 'boolean',
+            },
+          },
         },
         undefined
       )
@@ -143,15 +149,18 @@ describe('Material boolean toggle cell tester', () => {
 
   it('should succeed', () => {
     expect(
-      materialBooleanToggleCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'boolean'
-          }
-        }
-      },
-      undefined)
+      materialBooleanToggleCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'boolean',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(3);
   });
 });
@@ -176,7 +185,7 @@ describe('Material boolean toggle cell', () => {
       options: {
         focus: true,
         toggle: true,
-      }
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -197,7 +206,7 @@ describe('Material boolean toggle cell', () => {
       options: {
         focus: false,
         toggle: true,
-      }
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -217,7 +226,7 @@ describe('Material boolean toggle cell', () => {
       scope: '#/properties/foo',
       options: {
         toggle: true,
-      }
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -252,7 +261,7 @@ describe('Material boolean toggle cell', () => {
   it('should update via input event', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -275,7 +284,7 @@ describe('Material boolean toggle cell', () => {
   it('should update via action', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -300,7 +309,7 @@ describe('Material boolean toggle cell', () => {
   it('should update with undefined value', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -324,7 +333,7 @@ describe('Material boolean toggle cell', () => {
   it('should update with null value', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -348,7 +357,7 @@ describe('Material boolean toggle cell', () => {
   it('should not update with wrong ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -371,7 +380,7 @@ describe('Material boolean toggle cell', () => {
   it('should not update with null ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -394,7 +403,7 @@ describe('Material boolean toggle cell', () => {
   it('should not update with an undefined ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
diff --git a/packages/material-renderers/test/renderers/MaterialBooleanToggleControl.test.tsx b/packages/material-renderers/test/renderers/MaterialBooleanToggleControl.test.tsx
index b265416be..b719b1af8 100644
--- a/packages/material-renderers/test/renderers/MaterialBooleanToggleControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialBooleanToggleControl.test.tsx
@@ -27,10 +27,10 @@ import * as React from 'react';
 import {
   ControlElement,
   NOT_APPLICABLE,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 import BooleanToggleControl, {
-  materialBooleanToggleControlTester
+  materialBooleanToggleControlTester,
 } from '../../src/controls/MaterialBooleanToggleControl';
 import * as ReactDOM from 'react-dom';
 import { materialRenderers } from '../../src';
@@ -49,16 +49,16 @@ const schema = {
   properties: {
     foo: {
       type: 'boolean',
-      description: 'My description'
-   }
-  }
+      description: 'My description',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
   scope: '#/properties/foo',
   options: {
-    toggle: true
-  }
+    toggle: true,
+  },
 };
 
 describe('Material boolean toggle control tester', () => {
@@ -66,43 +66,53 @@ describe('Material boolean toggle control tester', () => {
     type: 'Control',
     scope: '#/properties/foo',
     options: {
-      toggle: true
-    }
+      toggle: true,
+    },
   };
 
   it('should fail', () => {
-    expect(materialBooleanToggleControlTester(undefined, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
+    expect(
+      materialBooleanToggleControlTester(undefined, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
     expect(materialBooleanToggleControlTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialBooleanToggleControlTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
     expect(
-      materialBooleanToggleControlTester({ type: 'Control' }, undefined, undefined)
+      materialBooleanToggleControlTester({ type: 'Foo' }, undefined, undefined)
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialBooleanToggleControlTester(control, {
-        type: 'object',
-        properties: { foo: { type: 'string' } }
-      },
-      undefined)
+      materialBooleanToggleControlTester(
+        { type: 'Control' },
+        undefined,
+        undefined
+      )
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialBooleanToggleControlTester(
+        control,
+        {
+          type: 'object',
+          properties: { foo: { type: 'string' } },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialBooleanToggleControlTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
+      materialBooleanToggleControlTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+            bar: {
+              type: 'boolean',
+            },
           },
-          bar: {
-            type: 'boolean'
-          }
-        }
-      },
-      undefined)
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
 
     // Not applicable for boolean control if toggle option is false
@@ -112,16 +122,16 @@ describe('Material boolean toggle control tester', () => {
           type: 'Control',
           scope: '#/properties/foo',
           options: {
-            toggle: false
-          }
+            toggle: false,
+          },
         } as UISchemaElement,
         {
           type: 'object',
           properties: {
             foo: {
-              type: 'boolean'
-            }
-          }
+              type: 'boolean',
+            },
+          },
         },
         undefined
       )
@@ -138,9 +148,9 @@ describe('Material boolean toggle control tester', () => {
           type: 'object',
           properties: {
             foo: {
-              type: 'boolean'
-            }
-          }
+              type: 'boolean',
+            },
+          },
         },
         undefined
       )
@@ -149,15 +159,18 @@ describe('Material boolean toggle control tester', () => {
 
   it('should succeed', () => {
     expect(
-      materialBooleanToggleControlTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'boolean'
-          }
-        }
-      },
-      undefined)
+      materialBooleanToggleControlTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'boolean',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(3);
   });
 });
@@ -182,7 +195,7 @@ describe('Material boolean toggle control', () => {
       options: {
         focus: true,
         toggle: true,
-      }
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -203,7 +216,7 @@ describe('Material boolean toggle control', () => {
       options: {
         focus: false,
         toggle: true,
-      }
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -223,7 +236,7 @@ describe('Material boolean toggle control', () => {
       scope: '#/properties/foo',
       options: {
         toggle: true,
-      }
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -250,7 +263,7 @@ describe('Material boolean toggle control', () => {
     // Make sure a toggle is rendered by checking for the thumb element
     expect(wrapper.find(Switch)).toHaveLength(1);
 
-    const input = wrapper.find('input').first();    
+    const input = wrapper.find('input').first();
     expect(input.props().type).toBe('checkbox');
     expect(input.props().checked).toBeTruthy();
   });
@@ -258,7 +271,7 @@ describe('Material boolean toggle control', () => {
   it('should update via input event', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -281,7 +294,7 @@ describe('Material boolean toggle control', () => {
   it('should update via action', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -306,7 +319,7 @@ describe('Material boolean toggle control', () => {
   it('should update with undefined value', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -330,7 +343,7 @@ describe('Material boolean toggle control', () => {
   it('should update with null value', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -354,7 +367,7 @@ describe('Material boolean toggle control', () => {
   it('should not update with wrong ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -377,7 +390,7 @@ describe('Material boolean toggle control', () => {
   it('should not update with null ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -400,7 +413,7 @@ describe('Material boolean toggle control', () => {
   it('should not update with an undefined ref', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonFormsStateProvider
@@ -457,11 +470,7 @@ describe('Material boolean toggle control', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanToggleControl
-          schema={schema}
-          uischema={uischema}
-          id='myid'
-        />
+        <BooleanToggleControl schema={schema} uischema={uischema} id='myid' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -476,14 +485,10 @@ describe('Material boolean toggle control', () => {
         initState={{
           renderers: materialRenderers,
           config: config,
-          core
+          core,
         }}
       >
-        <BooleanToggleControl
-          schema={schema}
-          uischema={uischema}
-          id='myid'
-        />
+        <BooleanToggleControl schema={schema} uischema={uischema} id='myid' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -498,11 +503,7 @@ describe('Material boolean toggle control', () => {
       <JsonFormsStateProvider
         initState={{ renderers: materialRenderers, core }}
       >
-        <BooleanToggleControl
-          schema={schema}
-          uischema={uischema}
-          id='myid'
-        />
+        <BooleanToggleControl schema={schema} uischema={uischema} id='myid' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
diff --git a/packages/material-renderers/test/renderers/MaterialCategorizationLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialCategorizationLayout.test.tsx
index 31ba6b7ea..aa69b04e9 100644
--- a/packages/material-renderers/test/renderers/MaterialCategorizationLayout.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialCategorizationLayout.test.tsx
@@ -32,13 +32,13 @@ import {
   Layout,
   layoutDefaultProps,
   RuleEffect,
-  SchemaBasedCondition
+  SchemaBasedCondition,
 } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Enzyme, { mount } from 'enzyme';
 
 import MaterialCategorizationLayoutRenderer, {
-  materialCategorizationTester
+  materialCategorizationTester,
 } from '../../src/layouts/MaterialCategorizationLayout';
 import { MaterialLayoutRenderer, materialRenderers } from '../../src';
 import { Tab, Tabs } from '@mui/material';
@@ -53,19 +53,19 @@ const fixture = {
     type: 'object',
     properties: {
       name: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   },
   uischema: {
     type: 'Categorization',
     elements: [
       {
         type: 'Category',
-        label: 'B'
-      }
-    ]
-  }
+        label: 'B',
+      },
+    ],
+  },
 };
 
 const testDefaultProps = {
@@ -73,33 +73,45 @@ const testDefaultProps = {
   data: fixture.data,
   ajv: createAjv(),
   t: defaultJsonFormsI18nState.translate,
-  locale: defaultJsonFormsI18nState.locale
-}
+  locale: defaultJsonFormsI18nState.locale,
+};
 
 describe('Material categorization layout tester', () => {
   it('should not fail when given undefined data', () => {
-    expect(materialCategorizationTester(undefined, undefined, undefined)).toBe(-1);
+    expect(materialCategorizationTester(undefined, undefined, undefined)).toBe(
+      -1
+    );
     expect(materialCategorizationTester(null, undefined, undefined)).toBe(-1);
-    expect(materialCategorizationTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
     expect(
-      materialCategorizationTester({ type: 'Categorization' }, undefined, undefined)
+      materialCategorizationTester({ type: 'Foo' }, undefined, undefined)
+    ).toBe(-1);
+    expect(
+      materialCategorizationTester(
+        { type: 'Categorization' },
+        undefined,
+        undefined
+      )
     ).toBe(-1);
   });
 
   it('should not fail with null elements and no schema', () => {
     const uischema: Layout = {
       type: 'Categorization',
-      elements: null
+      elements: null,
     };
-    expect(materialCategorizationTester(uischema, undefined, undefined)).toBe(-1);
+    expect(materialCategorizationTester(uischema, undefined, undefined)).toBe(
+      -1
+    );
   });
 
   it('should succeed with empty elements and no schema', () => {
     const uischema: Layout = {
       type: 'Categorization',
-      elements: []
+      elements: [],
     };
-    expect(materialCategorizationTester(uischema, undefined, undefined)).toBe(1);
+    expect(materialCategorizationTester(uischema, undefined, undefined)).toBe(
+      1
+    );
   });
 
   it('should not fail tester with single unknown element and no schema', () => {
@@ -107,11 +119,13 @@ describe('Material categorization layout tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Foo'
-        }
-      ]
+          type: 'Foo',
+        },
+      ],
     };
-    expect(materialCategorizationTester(uischema, undefined, undefined)).toBe(-1);
+    expect(materialCategorizationTester(uischema, undefined, undefined)).toBe(
+      -1
+    );
   });
 
   it('should succeed with a single category and no schema', () => {
@@ -119,11 +133,13 @@ describe('Material categorization layout tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Category'
-        }
-      ]
+          type: 'Category',
+        },
+      ],
     };
-    expect(materialCategorizationTester(categorization, undefined, undefined)).toBe(1);
+    expect(
+      materialCategorizationTester(categorization, undefined, undefined)
+    ).toBe(1);
   });
 
   it('should not apply to a nested categorization with single category and no schema', () => {
@@ -131,15 +147,17 @@ describe('Material categorization layout tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Category'
-        }
-      ]
+          type: 'Category',
+        },
+      ],
     };
     const categorization: Layout = {
       type: 'Categorization',
-      elements: [nestedCategorization]
+      elements: [nestedCategorization],
     };
-    expect(materialCategorizationTester(categorization, undefined, undefined)).toBe(-1);
+    expect(
+      materialCategorizationTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not apply to nested categorizations without categories and no schema', () => {
@@ -147,11 +165,13 @@ describe('Material categorization layout tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Categorization'
-        }
-      ]
+          type: 'Categorization',
+        },
+      ],
     };
-    expect(materialCategorizationTester(categorization, undefined, undefined)).toBe(-1);
+    expect(
+      materialCategorizationTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not apply to a nested categorization with null elements and no schema', () => {
@@ -161,12 +181,14 @@ describe('Material categorization layout tester', () => {
         {
           type: 'Categorization',
           label: 'Test',
-          elements: null
-        }
-      ]
+          elements: null,
+        },
+      ],
     };
 
-    expect(materialCategorizationTester(categorization, undefined, undefined)).toBe(-1);
+    expect(
+      materialCategorizationTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not apply to a nested categorizations with empty elements and no schema', () => {
@@ -175,11 +197,13 @@ describe('Material categorization layout tester', () => {
       elements: [
         {
           type: 'Categorization',
-          elements: []
-        }
-      ]
+          elements: [],
+        },
+      ],
     };
-    expect(materialCategorizationTester(categorization, undefined, undefined)).toBe(-1);
+    expect(
+      materialCategorizationTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 });
 
@@ -187,7 +211,7 @@ describe('Material categorization layout', () => {
   it('should render', () => {
     const nameControl = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const uischema: Categorization = {
       type: 'Categorization',
@@ -200,21 +224,23 @@ describe('Material categorization layout', () => {
             {
               type: 'Category',
               label: 'A',
-              elements: [nameControl]
-            }
-          ]
+              elements: [nameControl],
+            },
+          ],
         },
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl]
-        }
-      ]
+          elements: [nameControl],
+        },
+      ],
     };
 
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -231,7 +257,7 @@ describe('Material categorization layout', () => {
     const data = { name: 'Foo' };
     const nameControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const innerCategorization: Categorization = {
       type: 'Categorization',
@@ -240,9 +266,9 @@ describe('Material categorization layout', () => {
         {
           type: 'Category',
           label: 'A',
-          elements: [nameControl]
-        }
-      ]
+          elements: [nameControl],
+        },
+      ],
     };
     const uischema: Categorization = {
       type: 'Categorization',
@@ -252,24 +278,26 @@ describe('Material categorization layout', () => {
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl, nameControl]
+          elements: [nameControl, nameControl],
         },
         {
           type: 'Category',
           label: 'C',
-          elements: undefined
+          elements: undefined,
         },
         {
           type: 'Category',
           label: 'D',
-          elements: null
-        }
-      ]
+          elements: null,
+        },
+      ],
     };
     const core = initCore(fixture.schema, fixture.uischema, data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -279,10 +307,7 @@ describe('Material categorization layout', () => {
     );
 
     const beforeClick = wrapper.find(Tabs).props().value;
-    wrapper
-      .find('button[role="tab"]')
-      .at(1)
-      .simulate('click');
+    wrapper.find('button[role="tab"]').at(1).simulate('click');
     const afterClick = wrapper.find(Tabs).props().value;
 
     expect(beforeClick).toBe(0);
@@ -294,7 +319,9 @@ describe('Material categorization layout', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -311,7 +338,9 @@ describe('Material categorization layout', () => {
   it('is shown by default', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -327,7 +356,7 @@ describe('Material categorization layout', () => {
   it('allows categories to be hidden', () => {
     const condition: SchemaBasedCondition = {
       scope: '#/properties/name',
-      schema: { minLength: 3 }
+      schema: { minLength: 3 },
     };
 
     const uischema: Categorization = {
@@ -337,7 +366,7 @@ describe('Material categorization layout', () => {
         {
           type: 'Category',
           label: 'A',
-          elements: []
+          elements: [],
         },
         {
           type: 'Category',
@@ -345,14 +374,16 @@ describe('Material categorization layout', () => {
           elements: [],
           rule: {
             effect: RuleEffect.HIDE,
-            condition
-          }
-        }
-      ]
+            condition,
+          },
+        },
+      ],
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -369,7 +400,9 @@ describe('Material categorization layout', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const renderers: any[] = [];
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -384,26 +417,26 @@ describe('Material categorization layout', () => {
   });
 
   it('display correct content when hiding a tab', () => {
-    const data = { name : 'fo' };
+    const data = { name: 'fo' };
     const condition: SchemaBasedCondition = {
       scope: '#/properties/name',
-      schema: { maxLength: 3 }
+      schema: { maxLength: 3 },
     };
     const nameControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const uischema: Categorization = {
       type: 'Categorization',
       label: '',
       options: {
-          showNavButtons: true
+        showNavButtons: true,
       },
       elements: [
         {
           type: 'Category',
           label: 'A',
-          elements: undefined
+          elements: undefined,
         },
         {
           type: 'Category',
@@ -411,8 +444,8 @@ describe('Material categorization layout', () => {
           elements: undefined,
           rule: {
             effect: RuleEffect.SHOW,
-            condition: condition
-          }
+            condition: condition,
+          },
         },
         {
           type: 'Category',
@@ -420,39 +453,38 @@ describe('Material categorization layout', () => {
           elements: [nameControl],
           rule: {
             effect: RuleEffect.HIDE,
-            condition: condition
-          }
-        }
-      ]
+            condition: condition,
+          },
+        },
+      ],
     };
 
     const core = initCore(fixture.schema, uischema, data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationLayoutRenderer
-            {...testDefaultProps}
-            schema={fixture.schema}
-            uischema={uischema}
+          {...testDefaultProps}
+          schema={fixture.schema}
+          uischema={uischema}
         />
       </JsonFormsStateProvider>
     );
-    
-    wrapper
-      .find('button[role="tab"]')
-      .at(1)
-      .simulate('click');
+
+    wrapper.find('button[role="tab"]').at(1).simulate('click');
 
     let isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
     expect(isCategoryCshown).toBe(false);
 
     core.data = { ...core.data, name: 'Barr' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
 
     isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
     expect(isCategoryCshown).toBe(true);
-    
+
     wrapper.unmount();
   });
 });
diff --git a/packages/material-renderers/test/renderers/MaterialCategorizationStepperLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialCategorizationStepperLayout.test.tsx
index cb55f1fad..b028c699c 100644
--- a/packages/material-renderers/test/renderers/MaterialCategorizationStepperLayout.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialCategorizationStepperLayout.test.tsx
@@ -38,7 +38,7 @@ import { JsonFormsStateProvider } from '@jsonforms/react';
 import Enzyme, { mount } from 'enzyme';
 
 import MaterialCategorizationStepperLayoutRenderer, {
-  materialCategorizationStepperTester
+  materialCategorizationStepperTester,
 } from '../../src/layouts/MaterialCategorizationStepperLayout';
 import { MaterialLayoutRenderer, materialRenderers } from '../../src';
 import { Button, Step, Stepper } from '@mui/material';
@@ -53,18 +53,18 @@ const fixture = {
     type: 'object',
     properties: {
       name: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   },
   uischema: {
     type: 'Categorization',
     elements: [
       {
         type: 'Category',
-        label: 'B'
-      }
-    ]
+        label: 'B',
+      },
+    ],
   },
 };
 
@@ -73,35 +73,47 @@ const testDefaultProps = {
   data: fixture.data,
   ajv: createAjv(),
   t: defaultJsonFormsI18nState.translate,
-  locale: defaultJsonFormsI18nState.locale
-}
+  locale: defaultJsonFormsI18nState.locale,
+};
 
 describe('Material categorization stepper layout tester', () => {
   it('should not fail when given undefined data', () => {
-    expect(materialCategorizationStepperTester(undefined, undefined, undefined)).toBe(-1);
-    expect(materialCategorizationStepperTester(null, undefined, undefined)).toBe(-1);
+    expect(
+      materialCategorizationStepperTester(undefined, undefined, undefined)
+    ).toBe(-1);
+    expect(
+      materialCategorizationStepperTester(null, undefined, undefined)
+    ).toBe(-1);
     expect(
       materialCategorizationStepperTester({ type: 'Foo' }, undefined, undefined)
     ).toBe(-1);
     expect(
-      materialCategorizationStepperTester({ type: 'Categorization' }, undefined, undefined)
+      materialCategorizationStepperTester(
+        { type: 'Categorization' },
+        undefined,
+        undefined
+      )
     ).toBe(-1);
   });
 
   it('should not fail with null elements and no schema', () => {
     const uischema: Layout = {
       type: 'Categorization',
-      elements: null
+      elements: null,
     };
-    expect(materialCategorizationStepperTester(uischema, undefined, undefined)).toBe(-1);
+    expect(
+      materialCategorizationStepperTester(uischema, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not fail with empty elements and no schema', () => {
     const uischema: Layout = {
       type: 'Categorization',
-      elements: []
+      elements: [],
     };
-    expect(materialCategorizationStepperTester(uischema, undefined, undefined)).toBe(-1);
+    expect(
+      materialCategorizationStepperTester(uischema, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not fail tester with single unknown element and no schema', () => {
@@ -109,11 +121,13 @@ describe('Material categorization stepper layout tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Foo'
-        }
-      ]
+          type: 'Foo',
+        },
+      ],
     };
-    expect(materialCategorizationStepperTester(uischema, undefined, undefined)).toBe(-1);
+    expect(
+      materialCategorizationStepperTester(uischema, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not apply to a single category and no schema', () => {
@@ -121,13 +135,13 @@ describe('Material categorization stepper layout tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Category'
-        }
-      ]
+          type: 'Category',
+        },
+      ],
     };
-    expect(materialCategorizationStepperTester(categorization, undefined, undefined)).toBe(
-      -1
-    );
+    expect(
+      materialCategorizationStepperTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not apply to a nested categorization with single category and no schema', () => {
@@ -135,17 +149,17 @@ describe('Material categorization stepper layout tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Category'
-        }
-      ]
+          type: 'Category',
+        },
+      ],
     };
     const categorization: Layout = {
       type: 'Categorization',
-      elements: [nestedCategorization]
+      elements: [nestedCategorization],
     };
-    expect(materialCategorizationStepperTester(categorization, undefined, undefined)).toBe(
-      -1
-    );
+    expect(
+      materialCategorizationStepperTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not apply to nested categorizations without categories and no schema', () => {
@@ -153,13 +167,13 @@ describe('Material categorization stepper layout tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Categorization'
-        }
-      ]
+          type: 'Categorization',
+        },
+      ],
     };
-    expect(materialCategorizationStepperTester(categorization, undefined, undefined)).toBe(
-      -1
-    );
+    expect(
+      materialCategorizationStepperTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not apply to a nested categorization with null elements and no schema', () => {
@@ -169,14 +183,14 @@ describe('Material categorization stepper layout tester', () => {
         {
           type: 'Categorization',
           label: 'Test',
-          elements: null
-        }
-      ]
+          elements: null,
+        },
+      ],
     };
 
-    expect(materialCategorizationStepperTester(categorization, undefined, undefined)).toBe(
-      -1
-    );
+    expect(
+      materialCategorizationStepperTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 
   it('should not apply to a nested categorizations with empty elements and no schema', () => {
@@ -185,13 +199,13 @@ describe('Material categorization stepper layout tester', () => {
       elements: [
         {
           type: 'Categorization',
-          elements: []
-        }
-      ]
+          elements: [],
+        },
+      ],
     };
-    expect(materialCategorizationStepperTester(categorization, undefined, undefined)).toBe(
-      -1
-    );
+    expect(
+      materialCategorizationStepperTester(categorization, undefined, undefined)
+    ).toBe(-1);
   });
 });
 
@@ -199,7 +213,7 @@ describe('Material categorization stepper layout', () => {
   it('should render', () => {
     const nameControl = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const uischema: Categorization = {
       type: 'Categorization',
@@ -212,21 +226,23 @@ describe('Material categorization stepper layout', () => {
             {
               type: 'Category',
               label: 'A',
-              elements: [nameControl]
-            }
-          ]
+              elements: [nameControl],
+            },
+          ],
         },
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl]
-        }
-      ]
+          elements: [nameControl],
+        },
+      ],
     };
 
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -243,7 +259,7 @@ describe('Material categorization stepper layout', () => {
     const data = { name: 'Foo' };
     const nameControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const innerCategorization: Categorization = {
       type: 'Categorization',
@@ -252,9 +268,9 @@ describe('Material categorization stepper layout', () => {
         {
           type: 'Category',
           label: 'A',
-          elements: [nameControl]
-        }
-      ]
+          elements: [nameControl],
+        },
+      ],
     };
     const uischema: Categorization = {
       type: 'Categorization',
@@ -264,24 +280,26 @@ describe('Material categorization stepper layout', () => {
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl, nameControl]
+          elements: [nameControl, nameControl],
         },
         {
           type: 'Category',
           label: 'C',
-          elements: undefined
+          elements: undefined,
         },
         {
           type: 'Category',
           label: 'D',
-          elements: null
-        }
-      ]
+          elements: null,
+        },
+      ],
     };
     const core = initCore(fixture.schema, fixture.uischema, data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -290,10 +308,7 @@ describe('Material categorization stepper layout', () => {
       </JsonFormsStateProvider>
     );
     const beforeClick = wrapper.find(Stepper).props().activeStep;
-    wrapper
-      .find('button')
-      .at(1)
-      .simulate('click');
+    wrapper.find('button').at(1).simulate('click');
     const afterClick = wrapper.find(Stepper).props().activeStep;
 
     expect(beforeClick).toBe(0);
@@ -305,7 +320,9 @@ describe('Material categorization stepper layout', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -322,7 +339,9 @@ describe('Material categorization stepper layout', () => {
   it('is shown by default', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -338,7 +357,7 @@ describe('Material categorization stepper layout', () => {
   it('allows categories to be hidden', () => {
     const condition: SchemaBasedCondition = {
       scope: '#/properties/name',
-      schema: { minLength: 3 }
+      schema: { minLength: 3 },
     };
 
     const uischema: Categorization = {
@@ -348,7 +367,7 @@ describe('Material categorization stepper layout', () => {
         {
           type: 'Category',
           label: 'A',
-          elements: []
+          elements: [],
         },
         {
           type: 'Category',
@@ -356,14 +375,16 @@ describe('Material categorization stepper layout', () => {
           elements: [],
           rule: {
             effect: RuleEffect.HIDE,
-            condition
-          }
-        }
-      ]
+            condition,
+          },
+        },
+      ],
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -380,7 +401,9 @@ describe('Material categorization stepper layout', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const renderers: any[] = [];
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -397,31 +420,33 @@ describe('Material categorization stepper layout', () => {
   it('should render nav buttons if showNavButtons is set', () => {
     const nameControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const uischema: Categorization = {
       type: 'Categorization',
       label: 'Root',
       options: {
-        showNavButtons: true
+        showNavButtons: true,
       },
       elements: [
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl, nameControl]
+          elements: [nameControl, nameControl],
         },
         {
           type: 'Category',
           label: 'C',
-          elements: undefined
-        }
-      ]
+          elements: undefined,
+        },
+      ],
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -429,14 +454,15 @@ describe('Material categorization stepper layout', () => {
         />
       </JsonFormsStateProvider>
     );
-    const isPrevButtonEnabledBeforeClick = !wrapper.find(Button).at(1).props().disabled;
-    const isNextButtonEnabledBeforeClick = !wrapper.find(Button).at(0).props().disabled;
-    wrapper
-      .find('button')
-      .at(1)
-      .simulate('click');
-    const isPrevButtonEnabledAfterClick = !wrapper.find(Button).at(1).props().disabled;
-    const isNextButtonEnabledAfterClick = !wrapper.find(Button).at(0).props().disabled;
+    const isPrevButtonEnabledBeforeClick = !wrapper.find(Button).at(1).props()
+      .disabled;
+    const isNextButtonEnabledBeforeClick = !wrapper.find(Button).at(0).props()
+      .disabled;
+    wrapper.find('button').at(1).simulate('click');
+    const isPrevButtonEnabledAfterClick = !wrapper.find(Button).at(1).props()
+      .disabled;
+    const isNextButtonEnabledAfterClick = !wrapper.find(Button).at(0).props()
+      .disabled;
 
     expect(isPrevButtonEnabledBeforeClick).toBeFalsy();
     expect(isNextButtonEnabledBeforeClick).toBeTruthy();
@@ -448,7 +474,7 @@ describe('Material categorization stepper layout', () => {
   it('should render new category on button click', () => {
     const nameControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const innerCategorization: Categorization = {
       type: 'Categorization',
@@ -457,39 +483,41 @@ describe('Material categorization stepper layout', () => {
         {
           type: 'Category',
           label: 'A',
-          elements: [nameControl]
-        }
-      ]
+          elements: [nameControl],
+        },
+      ],
     };
     const uischema: Categorization = {
       type: 'Categorization',
       label: 'Root',
       options: {
-        showNavButtons: true
+        showNavButtons: true,
       },
       elements: [
         innerCategorization,
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl, nameControl]
+          elements: [nameControl, nameControl],
         },
         {
           type: 'Category',
           label: 'C',
-          elements: undefined
+          elements: undefined,
         },
         {
           type: 'Category',
           label: 'D',
-          elements: null
-        }
-      ]
+          elements: null,
+        },
+      ],
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
           {...testDefaultProps}
           schema={fixture.schema}
@@ -498,10 +526,7 @@ describe('Material categorization stepper layout', () => {
       </JsonFormsStateProvider>
     );
     const activeStepBeforeClick = wrapper.find(Stepper).props().activeStep;
-    wrapper
-      .find('button')
-      .at(4)
-      .simulate('click');
+    wrapper.find('button').at(4).simulate('click');
     const activeStepAfterClick = wrapper.find(Stepper).props().activeStep;
 
     expect(activeStepBeforeClick).toBe(0);
@@ -510,28 +535,28 @@ describe('Material categorization stepper layout', () => {
   });
 
   it('nav button behavior after hiding a step', () => {
-    const data = { name : 'fo' };
+    const data = { name: 'fo' };
     const condition: SchemaBasedCondition = {
       scope: '#/properties/name',
-      schema: { maxLength: 3 }
+      schema: { maxLength: 3 },
     };
 
     const nameControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
 
     const uischema: Categorization = {
       type: 'Categorization',
       label: 'Root',
       options: {
-          showNavButtons: true
+        showNavButtons: true,
       },
       elements: [
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl]
+          elements: [nameControl],
         },
         {
           type: 'Category',
@@ -539,33 +564,41 @@ describe('Material categorization stepper layout', () => {
           elements: undefined,
           rule: {
             effect: RuleEffect.SHOW,
-            condition
-          }
-        }
-      ]
+            condition,
+          },
+        },
+      ],
     };
 
     const core = initCore(fixture.schema, uischema, data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
-            {...testDefaultProps}
-            schema={fixture.schema}
-            uischema={uischema}
+          {...testDefaultProps}
+          schema={fixture.schema}
+          uischema={uischema}
         />
       </JsonFormsStateProvider>
     );
 
-    const isNextButtonDisabledBeforeTextInput = wrapper.find(Button).at(0).props().disabled;
+    const isNextButtonDisabledBeforeTextInput = wrapper
+      .find(Button)
+      .at(0)
+      .props().disabled;
 
     expect(isNextButtonDisabledBeforeTextInput).toBe(false);
 
     core.data = { ...core.data, name: 'Barr' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
 
-    const isNextButtonDisabledAfterTextInput = wrapper.find(Button).at(0).props().disabled;
+    const isNextButtonDisabledAfterTextInput = wrapper
+      .find(Button)
+      .at(0)
+      .props().disabled;
 
     expect(isNextButtonDisabledAfterTextInput).toBe(true);
 
@@ -573,26 +606,26 @@ describe('Material categorization stepper layout', () => {
   });
 
   it('display correct content when hiding a step', () => {
-    const data = { name : 'fo' };
+    const data = { name: 'fo' };
     const condition: SchemaBasedCondition = {
       scope: '#/properties/name',
-      schema: { maxLength: 3 }
+      schema: { maxLength: 3 },
     };
     const nameControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const uischema: Categorization = {
       type: 'Categorization',
       label: '',
       options: {
-          showNavButtons: true
+        showNavButtons: true,
       },
       elements: [
         {
           type: 'Category',
           label: 'A',
-          elements: undefined
+          elements: undefined,
         },
         {
           type: 'Category',
@@ -600,8 +633,8 @@ describe('Material categorization stepper layout', () => {
           elements: undefined,
           rule: {
             effect: RuleEffect.SHOW,
-            condition: condition
-          }
+            condition: condition,
+          },
         },
         {
           type: 'Category',
@@ -609,39 +642,38 @@ describe('Material categorization stepper layout', () => {
           elements: [nameControl],
           rule: {
             effect: RuleEffect.HIDE,
-            condition: condition
-          }
-        }
-      ]
+            condition: condition,
+          },
+        },
+      ],
     };
 
     const core = initCore(fixture.schema, uischema, data);
 
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialCategorizationStepperLayoutRenderer
-            {...testDefaultProps}
-            schema={fixture.schema}
-            uischema={uischema}
+          {...testDefaultProps}
+          schema={fixture.schema}
+          uischema={uischema}
         />
       </JsonFormsStateProvider>
     );
-    
-    wrapper
-      .find('button')
-      .at(1)
-      .simulate('click');
+
+    wrapper.find('button').at(1).simulate('click');
 
     let isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
     expect(isCategoryCshown).toBe(false);
 
     core.data = { ...core.data, name: 'Barr' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
 
     isCategoryCshown = wrapper.find('input[type="text"]').length > 0;
     expect(isCategoryCshown).toBe(true);
-    
+
     wrapper.unmount();
   });
 });
diff --git a/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx b/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx
index a1bd4dc5c..10bac7ede 100644
--- a/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialDateCell.test.tsx
@@ -24,13 +24,10 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import MaterialDateCell, {
-  materialDateCellTester
+  materialDateCellTester,
 } from '../../src/cells/MaterialDateCell';
 import { materialRenderers } from '../../src';
 
@@ -43,60 +40,73 @@ Enzyme.configure({ adapter: new Adapter() });
 const data = { foo: '1980-06-04' };
 const schema = {
   type: 'string',
-  format: 'date'
+  format: 'date',
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material date cell', () => {
   it('should fail', () => {
-    expect(materialDateCellTester(undefined, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialDateCellTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialDateCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
+    expect(materialDateCellTester(undefined, undefined, undefined)).toBe(
+      NOT_APPLICABLE
+    );
+    expect(materialDateCellTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialDateCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialDateCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
+    expect(
+      materialDateCellTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
 
     expect(
-      materialDateCellTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' }
-        }
-      },
-      undefined)
+      materialDateCellTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialDateCellTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' },
-          bar: {
-            type: 'string',
-            format: 'date'
-          }
-        }
-      },
-      undefined)
+      materialDateCellTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+            bar: {
+              type: 'string',
+              format: 'date',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed', () => {
     expect(
-      materialDateCellTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string',
-            format: 'date'
-          }
-        }
-      },
-      undefined)
+      materialDateCellTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+              format: 'date',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -111,12 +121,14 @@ describe('Material date cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -129,12 +141,14 @@ describe('Material date cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -145,11 +159,13 @@ describe('Material date cell', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -160,7 +176,9 @@ describe('Material date cell', () => {
   it('should render', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -173,10 +191,12 @@ describe('Material date cell', () => {
   it('should update via event', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -193,12 +213,14 @@ describe('Material date cell', () => {
   it('should update via action', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1961-04-12');
@@ -207,12 +229,14 @@ describe('Material date cell', () => {
   it('should update with null value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('');
@@ -221,12 +245,14 @@ describe('Material date cell', () => {
   it('should update with undefined value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
@@ -235,12 +261,14 @@ describe('Material date cell', () => {
   it('should not update with wrong ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980-06-04');
@@ -249,12 +277,14 @@ describe('Material date cell', () => {
   it('should not update with null ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980-06-04');
@@ -263,12 +293,14 @@ describe('Material date cell', () => {
   it('should update with undefined ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980-06-04');
@@ -277,7 +309,9 @@ describe('Material date cell', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell
           schema={schema}
           uischema={uischema}
@@ -293,7 +327,9 @@ describe('Material date cell', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialDateControl.test.tsx b/packages/material-renderers/test/renderers/MaterialDateControl.test.tsx
index a571097b0..238499e6f 100644
--- a/packages/material-renderers/test/renderers/MaterialDateControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialDateControl.test.tsx
@@ -23,12 +23,9 @@
   THE SOFTWARE.
 */
 import './MatchMediaMock';
-import {
-  ControlElement,
-  NOT_APPLICABLE,
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import MaterialDateControl, {
-  materialDateControlTester
+  materialDateControlTester,
 } from '../../src/controls/MaterialDateControl';
 import * as React from 'react';
 import { materialRenderers } from '../../src';
@@ -46,13 +43,13 @@ const schema = {
   properties: {
     foo: {
       type: 'string',
-      format: 'date'
-    }
-  }
+      format: 'date',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material date control tester', () => {
@@ -60,49 +57,60 @@ describe('Material date control tester', () => {
     expect(materialDateControlTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialDateControlTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialDateControlTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialDateControlTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialDateControlTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
     expect(
-      materialDateControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' }
-        }
-      },
-      undefined)
+      materialDateControlTester({ type: 'Foo' }, undefined, undefined)
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialDateControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' },
-          bar: {
-            type: 'string',
-            format: 'date'
-          }
-        }
-      },
-      undefined)
+      materialDateControlTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialDateControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+          },
+        },
+        undefined
+      )
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialDateControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+            bar: {
+              type: 'string',
+              format: 'date',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed', () => {
     expect(
-      materialDateControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string',
-            format: 'date'
-          }
-        }
-      },
-      undefined)
+      materialDateControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+              format: 'date',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(4);
     expect(
       materialDateControlTester(
@@ -111,9 +119,9 @@ describe('Material date control tester', () => {
           type: 'object',
           properties: {
             foo: {
-              type: 'string'
-            }
-          }
+              type: 'string',
+            },
+          },
         },
         undefined
       )
@@ -131,12 +139,14 @@ describe('Material date control', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -149,12 +159,14 @@ describe('Material date control', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -165,11 +177,13 @@ describe('Material date control', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -180,7 +194,9 @@ describe('Material date control', () => {
   it('should render', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -193,10 +209,12 @@ describe('Material date control', () => {
   it('should update via event', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -214,12 +232,14 @@ describe('Material date control', () => {
   it('should update via action', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1961-04-12');
@@ -228,12 +248,14 @@ describe('Material date control', () => {
   it('should update with null value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
@@ -242,12 +264,14 @@ describe('Material date control', () => {
   it('should update with undefined value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
@@ -256,12 +280,14 @@ describe('Material date control', () => {
   it('should not update with wrong ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('1980-06-04');
@@ -270,12 +296,14 @@ describe('Material date control', () => {
   it('should not update with null ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980-06-04');
@@ -284,12 +312,14 @@ describe('Material date control', () => {
   it('should not update with undefined ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980-06-04');
@@ -298,7 +328,9 @@ describe('Material date control', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl
           schema={schema}
           uischema={uischema}
@@ -313,7 +345,9 @@ describe('Material date control', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -324,7 +358,9 @@ describe('Material date control', () => {
   it('should render input id', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl
           schema={schema}
           uischema={uischema}
@@ -340,7 +376,9 @@ describe('Material date control', () => {
   it('should be hideable', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateControl
           schema={schema}
           uischema={uischema}
@@ -353,12 +391,14 @@ describe('Material date control', () => {
   });
 
   it('should support format customizations', () => {
-    const core = initCore(schema, uischema, {foo: '06---1980'});
+    const core = initCore(schema, uischema, { foo: '06---1980' });
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -366,10 +406,13 @@ describe('Material date control', () => {
         />
         <MaterialDateControl
           schema={schema}
-          uischema={{...uischema, options: {
-            dateFormat: 'YYYY/MM',
-            dateSaveFormat: 'MM---YYYY'
-          }}}
+          uischema={{
+            ...uischema,
+            options: {
+              dateFormat: 'YYYY/MM',
+              dateSaveFormat: 'MM---YYYY',
+            },
+          }}
         />
       </JsonFormsStateProvider>
     );
@@ -385,26 +428,25 @@ describe('Material date control', () => {
   it('should call onChange with original input value for invalid date strings', () => {
     const core = initCore(schema, uischema);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
           }}
         />
-        <MaterialDateControl
-          schema={schema}
-          uischema={{...uischema}}
-        />
+        <MaterialDateControl schema={schema} uischema={{ ...uischema }} />
       </JsonFormsStateProvider>
     );
 
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
 
-    (input.getDOMNode() as HTMLInputElement).value = 'invalid date string'; 
+    (input.getDOMNode() as HTMLInputElement).value = 'invalid date string';
     input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('invalid date string');
   });
diff --git a/packages/material-renderers/test/renderers/MaterialDateTimeControl.test.tsx b/packages/material-renderers/test/renderers/MaterialDateTimeControl.test.tsx
index 39abcaeb1..a053d915e 100644
--- a/packages/material-renderers/test/renderers/MaterialDateTimeControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialDateTimeControl.test.tsx
@@ -24,12 +24,9 @@
 */
 import './MatchMediaMock';
 import React from 'react';
-import {
-  ControlElement,
-  NOT_APPLICABLE,
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import MaterialDateTimeControl, {
-  materialDateTimeControlTester
+  materialDateTimeControlTester,
 } from '../../src/controls/MaterialDateTimeControl';
 import dayjs from 'dayjs';
 import { materialRenderers } from '../../src';
@@ -47,13 +44,13 @@ const schema = {
   properties: {
     foo: {
       type: 'string',
-      format: 'date-time'
-    }
-  }
+      format: 'date-time',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material date time control tester', () => {
@@ -61,49 +58,60 @@ describe('Material date time control tester', () => {
     expect(materialDateTimeControlTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialDateTimeControlTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialDateTimeControlTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialDateTimeControlTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialDateTimeControlTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
     expect(
-      materialDateTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' }
-        }
-      },
-      undefined)
+      materialDateTimeControlTester({ type: 'Foo' }, undefined, undefined)
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialDateTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' },
-          bar: {
-            type: 'string',
-            format: 'date-time'
-          }
-        }
-      },
-      undefined)
+      materialDateTimeControlTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialDateTimeControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+          },
+        },
+        undefined
+      )
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialDateTimeControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+            bar: {
+              type: 'string',
+              format: 'date-time',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed', () => {
     expect(
-      materialDateTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string',
-            format: 'date-time'
-          }
-        }
-      },
-      undefined)
+      materialDateTimeControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+              format: 'date-time',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
     expect(
       materialDateTimeControlTester(
@@ -112,9 +120,9 @@ describe('Material date time control tester', () => {
           type: 'object',
           properties: {
             foo: {
-              type: 'string'
-            }
-          }
+              type: 'string',
+            },
+          },
         },
         undefined
       )
@@ -134,12 +142,14 @@ describe('Material date time control', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -152,12 +162,14 @@ describe('Material date time control', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -168,11 +180,13 @@ describe('Material date time control', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -183,7 +197,9 @@ describe('Material date time control', () => {
   it('should render', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -196,10 +212,12 @@ describe('Material date time control', () => {
   it('should update via event', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -209,22 +227,22 @@ describe('Material date time control', () => {
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').first();
-    (input.getDOMNode() as HTMLInputElement).value ='1961-12-12 20:15'; 
+    (input.getDOMNode() as HTMLInputElement).value = '1961-12-12 20:15';
     input.simulate('change', input);
-    expect(onChangeData.data.foo).toBe(
-      dayjs('1961-12-12 20:15').format()
-    );
+    expect(onChangeData.data.foo).toBe(dayjs('1961-12-12 20:15').format());
   });
 
   it('should update via action', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: dayjs('1961-12-04 20:15').format() };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1961-12-04 20:15');
@@ -233,12 +251,14 @@ describe('Material date time control', () => {
   it('should update with null value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
@@ -247,12 +267,14 @@ describe('Material date time control', () => {
   it('should not update with undefined value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
@@ -261,12 +283,14 @@ describe('Material date time control', () => {
   it('should not update with wrong ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980-04-04 13:37');
@@ -275,12 +299,14 @@ describe('Material date time control', () => {
   it('should not update with null ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: '12.04.1961 20:15' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980-04-04 13:37');
@@ -289,12 +315,14 @@ describe('Material date time control', () => {
   it('should not update with undefined ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: '12.04.1961 20:15' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('1980-04-04 13:37');
@@ -303,7 +331,9 @@ describe('Material date time control', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl
           schema={schema}
           uischema={uischema}
@@ -318,7 +348,9 @@ describe('Material date time control', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -329,7 +361,9 @@ describe('Material date time control', () => {
   it('should render input id', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl
           schema={schema}
           uischema={uischema}
@@ -345,7 +379,9 @@ describe('Material date time control', () => {
   it('should be hideable', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialDateTimeControl
           schema={schema}
           uischema={uischema}
@@ -358,12 +394,16 @@ describe('Material date time control', () => {
   });
 
   it('should support format customizations', () => {
-    const core = initCore(schema, uischema, {foo: dayjs('1980-04-23 13:37').format('YYYY/MM/DD h:mm a')});
+    const core = initCore(schema, uischema, {
+      foo: dayjs('1980-04-23 13:37').format('YYYY/MM/DD h:mm a'),
+    });
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -371,11 +411,14 @@ describe('Material date time control', () => {
         />
         <MaterialDateTimeControl
           schema={schema}
-          uischema={{...uischema, options: {
-            dateTimeFormat: 'DD-MM-YY hh:mm:a',
-            dateTimeSaveFormat: 'YYYY/MM/DD h:mm a',
-            ampm: true
-          }}}
+          uischema={{
+            ...uischema,
+            options: {
+              dateTimeFormat: 'DD-MM-YY hh:mm:a',
+              dateTimeSaveFormat: 'YYYY/MM/DD h:mm a',
+              ampm: true,
+            },
+          }}
         />
       </JsonFormsStateProvider>
     );
@@ -383,7 +426,7 @@ describe('Material date time control', () => {
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('23-04-80 01:37:pm');
 
-    (input.getDOMNode() as HTMLInputElement).value = '10-12-05 11:22:am'; 
+    (input.getDOMNode() as HTMLInputElement).value = '10-12-05 11:22:am';
     input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('2005/12/10 11:22 am');
   });
@@ -391,26 +434,25 @@ describe('Material date time control', () => {
   it('should call onChange with original input value for invalid date strings', () => {
     const core = initCore(schema, uischema);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
           }}
         />
-        <MaterialDateTimeControl
-          schema={schema}
-          uischema={{...uischema}}
-        />
+        <MaterialDateTimeControl schema={schema} uischema={{ ...uischema }} />
       </JsonFormsStateProvider>
     );
 
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
 
-    (input.getDOMNode() as HTMLInputElement).value = 'invalid date string'; 
+    (input.getDOMNode() as HTMLInputElement).value = 'invalid date string';
     input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('invalid date string');
   });
diff --git a/packages/material-renderers/test/renderers/MaterialEnumArrayRenderer.test.tsx b/packages/material-renderers/test/renderers/MaterialEnumArrayRenderer.test.tsx
index 24758fe56..c69c9b99b 100644
--- a/packages/material-renderers/test/renderers/MaterialEnumArrayRenderer.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialEnumArrayRenderer.test.tsx
@@ -6,12 +6,12 @@ import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import React from 'react';
 import {
   materialEnumArrayRendererTester,
-  MaterialEnumArrayRenderer
+  MaterialEnumArrayRenderer,
 } from '../../src';
 
 const MaterialEnumArrayRendererRegistration = {
   tester: materialEnumArrayRendererTester,
-  renderer: MaterialEnumArrayRenderer
+  renderer: MaterialEnumArrayRenderer,
 };
 const data = ['bar'];
 const oneOfSchema = {
@@ -20,27 +20,27 @@ const oneOfSchema = {
     oneOf: [
       {
         const: 'foo',
-        title: 'My Title'
+        title: 'My Title',
       },
       {
-        const: 'bar'
-      }
-    ]
+        const: 'bar',
+      },
+    ],
   },
-  uniqueItems: true
+  uniqueItems: true,
 };
 
 const enumSchema = {
   type: 'array',
   items: {
     type: 'string',
-    enum: ['a', 'b', 'c']
+    enum: ['a', 'b', 'c'],
   },
-  uniqueItems: true
+  uniqueItems: true,
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -48,25 +48,33 @@ Enzyme.configure({ adapter: new Adapter() });
 describe('EnumArrayControl tester', () => {
   test('should fail', () => {
     expect(
-      materialEnumArrayRendererTester(uischema, {
-        type: 'array',
-        items: {}
-      },
-      undefined)
+      materialEnumArrayRendererTester(
+        uischema,
+        {
+          type: 'array',
+          items: {},
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialEnumArrayRendererTester(uischema, {
-        type: 'array',
-        items: {
-          anyOf: []
-        }
-      },
-      undefined)
+      materialEnumArrayRendererTester(
+        uischema,
+        {
+          type: 'array',
+          items: {
+            anyOf: [],
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed for schema with enum items', () => {
-    expect(materialEnumArrayRendererTester(uischema, enumSchema, undefined)).toBe(5);
+    expect(
+      materialEnumArrayRendererTester(uischema, enumSchema, undefined)
+    ).toBe(5);
   });
 });
 
diff --git a/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx b/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx
index 35c24aa6f..e8cb588bf 100644
--- a/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialEnumCell.test.tsx
@@ -24,11 +24,9 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement
-} from '@jsonforms/core';
+import { ControlElement } from '@jsonforms/core';
 import MaterialEnumCell, {
-  materialEnumCellTester
+  materialEnumCellTester,
 } from '../../src/cells/MaterialEnumCell';
 import { materialRenderers } from '../../src';
 
@@ -42,30 +40,33 @@ Enzyme.configure({ adapter: new Adapter() });
 const data = { nationality: 'JP' };
 const schema = {
   type: 'string',
-  enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
+  enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/nationality'
+  scope: '#/properties/nationality',
 };
 
 describe('Material enum cell tester', () => {
   it('should succeed with matching prop type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/nationality'
+      scope: '#/properties/nationality',
     };
     expect(
-      materialEnumCellTester(control, {
-        type: 'object',
-        properties: {
-          nationality: {
-            type: 'string',
-            enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
-          }
-        }
-      },
-      undefined)
+      materialEnumCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            nationality: {
+              type: 'string',
+              enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -74,7 +75,9 @@ describe('Material enum cell', () => {
   it('should select an item from dropdown list', () => {
     const core = initCore(schema, uischema, data);
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialEnumCell
           schema={schema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx b/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx
index 0908ce498..14d254d93 100644
--- a/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialEnumControl.test.tsx
@@ -24,30 +24,27 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement
-} from '@jsonforms/core';
-import { materialRenderers, MuiSelect } from '../../src';
+import { ControlElement } from '@jsonforms/core';
+import { materialRenderers, MuiSelect, MaterialEnumControl } from '../../src';
 
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore } from './util';
-import { MaterialEnumControl } from '../../src';
 
 Enzyme.configure({ adapter: new Adapter() });
 
 const data = { nationality: 'JP' };
 const schema = {
   type: 'string',
-  enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other']
+  enum: ['DE', 'IT', 'JP', 'US', 'RU', 'Other'],
 };
 const uischema: ControlElement = {
   type: 'Control',
   scope: '#/properties/nationality',
   options: {
-    autocomplete: false
-  }
+    autocomplete: false,
+  },
 };
 
 describe('Material enum control', () => {
@@ -56,7 +53,9 @@ describe('Material enum control', () => {
     const translate = () => 'Translated';
     const changedTranslate = () => 'OtherTranslation';
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core, i18n: {translate} }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core, i18n: { translate } }}
+      >
         <MaterialEnumControl
           schema={schema}
           uischema={uischema}
@@ -67,9 +66,17 @@ describe('Material enum control', () => {
 
     expect(wrapper.find(MuiSelect).props().options[0].label).toBe('Translated');
 
-    wrapper.setProps({ initState: { renderers: materialRenderers, core, i18n: {translate: changedTranslate} }} );
+    wrapper.setProps({
+      initState: {
+        renderers: materialRenderers,
+        core,
+        i18n: { translate: changedTranslate },
+      },
+    });
     wrapper.update();
 
-    expect(wrapper.find(MuiSelect).props().options[0].label).toBe('OtherTranslation');
+    expect(wrapper.find(MuiSelect).props().options[0].label).toBe(
+      'OtherTranslation'
+    );
   });
 });
diff --git a/packages/material-renderers/test/renderers/MaterialGroupLayout.test.tsx b/packages/material-renderers/test/renderers/MaterialGroupLayout.test.tsx
index 703d5372b..f22f85756 100644
--- a/packages/material-renderers/test/renderers/MaterialGroupLayout.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialGroupLayout.test.tsx
@@ -37,14 +37,14 @@ const schema = {
     name: {
       type: 'string',
       minLength: 3,
-      description: 'Please enter your name'
+      description: 'Please enter your name',
     },
     birthDate: {
       type: 'string',
       format: 'date',
-      description: 'Please enter your birth date.'
-    }
-  }
+      description: 'Please enter your birth date.',
+    },
+  },
 };
 
 const uischema = {
@@ -54,20 +54,27 @@ const uischema = {
     {
       type: 'Control',
       label: 'Name',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'Control',
       label: 'Birth Date',
-      scope: '#/properties/birthDate'
-    }
-  ]
+      scope: '#/properties/birthDate',
+    },
+  ],
 };
 
 describe('Material group layout', () => {
   it('should render a GroupComponent with direction column when given no direction LayoutProp', () => {
     const wrapper = mount(
-      <MaterialGroupLayout schema={schema} uischema={uischema} direction="column" enabled visible path=""/>
+      <MaterialGroupLayout
+        schema={schema}
+        uischema={uischema}
+        direction='column'
+        enabled
+        visible
+        path=''
+      />
     );
     expect(wrapper.find(MaterialLayoutRenderer).props().direction).toBe(
       'column'
@@ -82,7 +89,7 @@ describe('Material group layout', () => {
         direction={'row'}
         enabled
         visible
-        path=""
+        path=''
       />
     );
     expect(wrapper.find(MaterialLayoutRenderer).props().direction).toBe('row');
diff --git a/packages/material-renderers/test/renderers/MaterialInputControl.test.tsx b/packages/material-renderers/test/renderers/MaterialInputControl.test.tsx
index 5f45dcb9c..f137ca595 100644
--- a/packages/material-renderers/test/renderers/MaterialInputControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialInputControl.test.tsx
@@ -37,7 +37,11 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { Control, JsonFormsStateProvider, withJsonFormsControlProps } from '@jsonforms/react';
+import {
+  Control,
+  JsonFormsStateProvider,
+  withJsonFormsControlProps,
+} from '@jsonforms/react';
 import { MaterialInputControl } from '../../src/controls/MaterialInputControl';
 import MaterialHorizontalLayoutRenderer from '../../src/layouts/MaterialHorizontalLayout';
 import { MuiInputText } from '../../src/mui-controls';
@@ -50,13 +54,13 @@ const schema = {
   type: 'object',
   properties: {
     foo: {
-      type: 'string'
-    }
-  }
+      type: 'string',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 class TestControlInner extends Control<ControlProps, ControlState> {
   render() {
@@ -76,11 +80,10 @@ describe('Material input control', () => {
   it('render', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <TestControl
-          schema={schema}
-          uischema={uischema}
-        />
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
+        <TestControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
@@ -102,11 +105,13 @@ describe('Material input control', () => {
     const control: ControlElement = {
       type: 'Control',
       scope: '#/properties/foo',
-      label: false
+      label: false,
     };
     const core = initCore(schema, uischema);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -128,7 +133,9 @@ describe('Material input control', () => {
   it('can be hidden', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={schema} uischema={uischema} visible={false} />
       </JsonFormsStateProvider>
     );
@@ -139,7 +146,9 @@ describe('Material input control', () => {
   it('should be shown by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -148,15 +157,17 @@ describe('Material input control', () => {
   });
 
   it('should display a single error', () => {
-    const core = initCore(schema, uischema, data );
+    const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
     core.data = { ...core.data, foo: 2 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const validation = wrapper.find('p').first();
     expect(validation.text()).toBe('must be string');
@@ -165,12 +176,14 @@ describe('Material input control', () => {
   it('should display multiple errors', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: 3 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const validation = wrapper.find('p').first();
     expect(validation.text()).toBe('must be string');
@@ -179,7 +192,9 @@ describe('Material input control', () => {
   it('should not show any errors', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -190,13 +205,15 @@ describe('Material input control', () => {
   it('should handle validation updates', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: 3 };
     core.data = { ...core.data, foo: 'bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const validation = wrapper.find('p').first();
     expect(validation.text()).toBe('');
@@ -207,55 +224,61 @@ describe('Material input control', () => {
       type: 'object',
       properties: {
         name: {
-          type: 'string'
+          type: 'string',
         },
         personalData: {
           type: 'object',
           properties: {
             middleName: {
-              type: 'string'
+              type: 'string',
             },
             lastName: {
-              type: 'string'
-            }
+              type: 'string',
+            },
           },
-          required: ['middleName', 'lastName']
-        }
+          required: ['middleName', 'lastName'],
+        },
       },
-      required: ['name']
+      required: ['name'],
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
-      scope: '#/properties/personalData/properties/middleName'
+      scope: '#/properties/personalData/properties/middleName',
     };
     const thirdControlElement: ControlElement = {
       type: 'Control',
-      scope: '#/properties/personalData/properties/lastName'
+      scope: '#/properties/personalData/properties/lastName',
     };
     const layout: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [firstControlElement, secondControlElement, thirdControlElement]
+      elements: [
+        firstControlElement,
+        secondControlElement,
+        thirdControlElement,
+      ],
     };
     const newData = {
       name: 'John Doe',
-      personalData: {}
+      personalData: {},
     };
     const core = initCore(jsonSchema, layout, newData);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }} >
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialHorizontalLayoutRenderer
           schema={jsonSchema}
           uischema={layout}
-          direction="row"
+          direction='row'
           enabled
           visible
-          path=""
+          path=''
         />
-      </ JsonFormsStateProvider>
+      </JsonFormsStateProvider>
     );
     const validation = wrapper.find('p');
     expect(validation).toHaveLength(6);
@@ -270,19 +293,21 @@ describe('Material input control', () => {
       properties: {
         dateCell: {
           type: 'string',
-          format: 'date'
-        }
+          format: 'date',
+        },
       },
-      required: ['dateCell']
+      required: ['dateCell'],
     };
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/dateCell'
+      scope: '#/properties/dateCell',
     };
 
     const core = initCore(jsonSchema, control, {});
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={jsonSchema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -296,18 +321,20 @@ describe('Material input control', () => {
       properties: {
         dateCell: {
           type: 'string',
-          format: 'date'
-        }
-      }
+          format: 'date',
+        },
+      },
     };
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/dateCell'
+      scope: '#/properties/dateCell',
     };
 
     const core = initCore(jsonSchema, control, {});
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={jsonSchema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -319,17 +346,19 @@ describe('Material input control', () => {
     const jsonSchema = {
       type: 'object',
       properties: {
-        password: { type: 'string' }
-      }
+        password: { type: 'string' },
+      },
     };
     const control: ControlElement = {
       type: 'Control',
       scope: '#/properties/password',
-      options: { format: 'password' }
+      options: { format: 'password' },
     };
     const core = initCore(jsonSchema, control, {});
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl schema={jsonSchema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -341,16 +370,18 @@ describe('Material input control', () => {
     const jsonSchema = {
       type: 'object',
       properties: {
-        name: { type: 'string' }
-      }
+        name: { type: 'string' },
+      },
     };
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const core = initCore(jsonSchema, control, {});
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestControl
           schema={jsonSchema}
           uischema={control}
diff --git a/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx b/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx
index febecfb52..e69d56e6d 100644
--- a/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialIntegerCell.test.tsx
@@ -24,12 +24,9 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import IntegerCell, {
-  materialIntegerCellTester
+  materialIntegerCellTester,
 } from '../../src/cells/MaterialIntegerCell';
 import { materialRenderers } from '../../src';
 
@@ -43,53 +40,64 @@ Enzyme.configure({ adapter: new Adapter() });
 const data = { foo: 42 };
 const schema = {
   type: 'integer',
-  minimum: 5
+  minimum: 5,
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material integer cells tester', () => {
   const controlElement: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
 
   it('should fail', () => {
     expect(materialIntegerCellTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialIntegerCellTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialIntegerCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialIntegerCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialIntegerCellTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
     expect(
-      materialIntegerCellTester(controlElement, {
-        type: 'object',
-        properties: { foo: { type: 'string' } }
-      },
-      undefined)
+      materialIntegerCellTester({ type: 'Foo' }, undefined, undefined)
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialIntegerCellTester(controlElement, {
-        type: 'object',
-        properties: { foo: { type: 'string' }, bar: { type: 'integer' } }
-      },
-      undefined)
+      materialIntegerCellTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialIntegerCellTester(
+        controlElement,
+        {
+          type: 'object',
+          properties: { foo: { type: 'string' } },
+        },
+        undefined
+      )
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialIntegerCellTester(
+        controlElement,
+        {
+          type: 'object',
+          properties: { foo: { type: 'string' }, bar: { type: 'integer' } },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed', () => {
     expect(
-      materialIntegerCellTester(controlElement, {
-        type: 'object',
-        properties: { foo: { type: 'integer' } }
-      },
-      undefined)
+      materialIntegerCellTester(
+        controlElement,
+        {
+          type: 'object',
+          properties: { foo: { type: 'integer' } },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -104,12 +112,14 @@ describe('Material integer cells', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -122,12 +132,14 @@ describe('Material integer cells', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -138,11 +150,13 @@ describe('Material integer cells', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -153,7 +167,9 @@ describe('Material integer cells', () => {
   it('should render', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -167,7 +183,9 @@ describe('Material integer cells', () => {
   it('should render 0', () => {
     const core = initCore(schema, uischema, { foo: 0 });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -181,10 +199,12 @@ describe('Material integer cells', () => {
   it('should update via input event', (done) => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -199,18 +219,20 @@ describe('Material integer cells', () => {
     setTimeout(() => {
       expect(onChangeData.data.foo).toBe(13);
       done();
-    }, 1000)
+    }, 1000);
   });
 
   it('should update via action', (done) => {
     const core = initCore(schema, uischema, { foo: 13 });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: 42 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -222,12 +244,14 @@ describe('Material integer cells', () => {
   it('should not update with undefined value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input');
@@ -239,12 +263,14 @@ describe('Material integer cells', () => {
   it('should not update with null value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -256,12 +282,14 @@ describe('Material integer cells', () => {
   it('should not update with wrong ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 11 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input');
@@ -273,12 +301,14 @@ describe('Material integer cells', () => {
   it('should not update with null ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 13 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input');
@@ -290,12 +320,14 @@ describe('Material integer cells', () => {
   it('should not update with undefined ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 13 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input');
@@ -307,7 +339,9 @@ describe('Material integer cells', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell
           schema={schema}
           uischema={uischema}
@@ -323,7 +357,9 @@ describe('Material integer cells', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <IntegerCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialLabelRenderer.test.tsx b/packages/material-renderers/test/renderers/MaterialLabelRenderer.test.tsx
index 53364c17d..6bc2b81b4 100644
--- a/packages/material-renderers/test/renderers/MaterialLabelRenderer.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialLabelRenderer.test.tsx
@@ -24,13 +24,10 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  LabelElement,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
+import { LabelElement, NOT_APPLICABLE } from '@jsonforms/core';
 import '../../src/cells';
 import MaterialLabelRenderer, {
-  materialLabelRendererTester
+  materialLabelRendererTester,
 } from '../../src/additional/MaterialLabelRenderer';
 import { materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -43,11 +40,11 @@ Enzyme.configure({ adapter: new Adapter() });
 const data = {};
 const schema = {
   type: 'object',
-  properties: {}
+  properties: {},
 };
 const uischema: LabelElement = {
   type: 'Label',
-  text: 'Foo'
+  text: 'Foo',
 };
 
 describe('Material Label Renderer tester', () => {
@@ -55,11 +52,15 @@ describe('Material Label Renderer tester', () => {
     expect(materialLabelRendererTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialLabelRendererTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialLabelRendererTester({ type: 'Foo' }, undefined, undefined)).toBe(
+    expect(materialLabelRendererTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialLabelRendererTester({ type: 'Label' }, undefined, undefined)).toBe(1);
+    expect(
+      materialLabelRendererTester({ type: 'Foo' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialLabelRendererTester({ type: 'Label' }, undefined, undefined)
+    ).toBe(1);
   });
 });
 
@@ -86,7 +87,9 @@ describe('Material Label Renderer', () => {
   it('can be hidden', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialLabelRenderer
           schema={schema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialLayouts.test.tsx b/packages/material-renderers/test/renderers/MaterialLayouts.test.tsx
index d902d81ee..ae8c5ed2f 100644
--- a/packages/material-renderers/test/renderers/MaterialLayouts.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialLayouts.test.tsx
@@ -30,7 +30,7 @@ import {
   ControlElement,
   Layout,
   RuleEffect,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonForms } from '@jsonforms/react';
@@ -41,38 +41,38 @@ const schema = {
   type: 'object',
   properties: {
     toggleTopLayout: {
-      type: 'boolean'
+      type: 'boolean',
     },
     topString: {
-      type: 'string'
+      type: 'string',
     },
     toggleMiddleLayout: {
-      type: 'boolean'
+      type: 'boolean',
     },
     middleNumber: {
-      type: 'number'
+      type: 'number',
     },
     toggleBottomLayout: {
-      type: 'boolean'
+      type: 'boolean',
     },
     bottomBoolean: {
-      type: 'boolean'
-    }
-  }
+      type: 'boolean',
+    },
+  },
 };
 const baseUischema = () => ({
   type: 'VerticalLayout',
   elements: [
     {
       type: 'Control',
-      scope: '#/properties/topString'
+      scope: '#/properties/topString',
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/middleNumber'
+          scope: '#/properties/middleNumber',
         },
         {
           type: 'Group',
@@ -80,21 +80,21 @@ const baseUischema = () => ({
           elements: [
             {
               type: 'Control',
-              scope: '#/properties/bottomBoolean'
-            }
-          ]
-        }
-      ]
-    }
-  ]
+              scope: '#/properties/bottomBoolean',
+            },
+          ],
+        },
+      ],
+    },
+  ],
 });
 
 const rule = (effect: RuleEffect, propertyName: string) => ({
   effect: effect,
   condition: {
     scope: '#/properties/' + propertyName,
-    schema: { const: true }
-  }
+    schema: { const: true },
+  },
 });
 
 const topRule = (rule: any, uischema: UISchemaElement) => {
@@ -193,7 +193,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: true,
         toggleMiddleLayout: true,
-        toggleBottomLayout: true
+        toggleBottomLayout: true,
       };
       createWrapper(data, baseUischema());
       expect(controlIsShown('top')).toBe(true);
@@ -205,7 +205,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: true,
         toggleMiddleLayout: true,
-        toggleBottomLayout: true
+        toggleBottomLayout: true,
       };
       const uischema = topShowRule(
         middleShowRule(bottomShowRule(baseUischema()))
@@ -220,7 +220,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: true,
         toggleMiddleLayout: true,
-        toggleBottomLayout: true
+        toggleBottomLayout: true,
       };
       const uischema = topEnableRule(
         middleEnableRule(bottomEnableRule(baseUischema()))
@@ -237,7 +237,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: false,
         toggleMiddleLayout: true,
-        toggleBottomLayout: true
+        toggleBottomLayout: true,
       };
       const uischema = topShowRule(baseUischema());
       createWrapper(data, uischema);
@@ -250,7 +250,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: true,
         toggleMiddleLayout: false,
-        toggleBottomLayout: true
+        toggleBottomLayout: true,
       };
       const uischema = middleShowRule(baseUischema());
       createWrapper(data, uischema);
@@ -263,7 +263,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: true,
         toggleMiddleLayout: true,
-        toggleBottomLayout: false
+        toggleBottomLayout: false,
       };
       const uischema = bottomShowRule(baseUischema());
       createWrapper(data, uischema);
@@ -276,7 +276,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: false,
         toggleMiddleLayout: true,
-        toggleBottomLayout: true
+        toggleBottomLayout: true,
       };
       const uischema = topEnableRule(baseUischema());
       createWrapper(data, uischema);
@@ -289,7 +289,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: true,
         toggleMiddleLayout: false,
-        toggleBottomLayout: true
+        toggleBottomLayout: true,
       };
       const uischema = middleEnableRule(baseUischema());
       createWrapper(data, uischema);
@@ -302,7 +302,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: true,
         toggleMiddleLayout: true,
-        toggleBottomLayout: false
+        toggleBottomLayout: false,
       };
       const uischema = bottomEnableRule(baseUischema());
       createWrapper(data, uischema);
@@ -316,7 +316,7 @@ describe('Layout Tests', () => {
         toggleTopLayout: true,
         toggleMiddleLayout: true,
         toggleBottomLayout: true,
-        toggleControl: false
+        toggleControl: false,
       };
       const uischema = controlEnableRule(baseUischema());
       createWrapper(data, uischema);
@@ -331,7 +331,7 @@ describe('Layout Tests', () => {
       const data = {
         toggleTopLayout: true,
         toggleMiddleLayout: false,
-        toggleBottomLayout: true
+        toggleBottomLayout: true,
       };
       const uischema = middleEnableRule(bottomShowRule(baseUischema()));
       createWrapper(data, uischema);
@@ -345,7 +345,7 @@ describe('Layout Tests', () => {
         toggleTopLayout: true,
         toggleMiddleLayout: true,
         toggleBottomLayout: false,
-        toggleControl: true
+        toggleControl: true,
       };
       const uischema = bottomEnableRule(controlEnableRule(baseUischema()));
       createWrapper(data, uischema);
@@ -362,18 +362,18 @@ describe('Special Layout Tests', () => {
       type: 'object',
       properties: {
         name: {
-          type: 'string'
+          type: 'string',
         },
         age: {
-          type: 'integer'
+          type: 'integer',
         },
         topCheck: {
-          type: 'boolean'
+          type: 'boolean',
         },
         bottomCheck: {
-          type: 'boolean'
-        }
-      }
+          type: 'boolean',
+        },
+      },
     };
 
     const uischema = {
@@ -391,33 +391,33 @@ describe('Special Layout Tests', () => {
                 condition: {
                   scope: '#/properties/bottomCheck',
                   schema: {
-                    const: true
-                  }
-                }
-              }
+                    const: true,
+                  },
+                },
+              },
             },
             {
               type: 'Control',
-              scope: '#/properties/age'
-            }
+              scope: '#/properties/age',
+            },
           ],
           rule: {
             effect: RuleEffect.ENABLE,
             condition: {
               scope: '#/properties/topCheck',
               schema: {
-                const: true
-              }
-            }
-          }
-        }
-      ]
+                const: true,
+              },
+            },
+          },
+        },
+      ],
     };
 
     it('enabling top rule and disabling bottom rule should disable control', () => {
       const data = {
         topCheck: true,
-        bottomCheck: false
+        bottomCheck: false,
       };
       const wrapper = mount(
         <JsonForms
@@ -427,18 +427,15 @@ describe('Special Layout Tests', () => {
           renderers={materialRenderers}
         />
       );
-      expect(
-        wrapper
-          .find('input[type="text"]')
-          .first()
-          .props().disabled
-      ).toBe(true);
+      expect(wrapper.find('input[type="text"]').first().props().disabled).toBe(
+        true
+      );
     });
 
     it('disabling top rule and enabling bottom rule should enable control', () => {
       const data = {
         topCheck: false,
-        bottomCheck: true
+        bottomCheck: true,
       };
       const wrapper = mount(
         <JsonForms
@@ -448,12 +445,9 @@ describe('Special Layout Tests', () => {
           renderers={materialRenderers}
         />
       );
-      expect(
-        wrapper
-          .find('input[type="text"]')
-          .first()
-          .props().disabled
-      ).toBe(false);
+      expect(wrapper.find('input[type="text"]').first().props().disabled).toBe(
+        false
+      );
     });
   });
 
@@ -462,15 +456,15 @@ describe('Special Layout Tests', () => {
       type: 'object',
       properties: {
         name: {
-          type: 'string'
+          type: 'string',
         },
         age: {
-          type: 'integer'
+          type: 'integer',
         },
         check: {
-          type: 'boolean'
-        }
-      }
+          type: 'boolean',
+        },
+      },
     };
 
     const uischema: ControlElement = {
@@ -481,15 +475,15 @@ describe('Special Layout Tests', () => {
         condition: {
           scope: '#/properties/check',
           schema: {
-            const: true
-          }
-        } as any
-      }
+            const: true,
+          },
+        } as any,
+      },
     };
 
     it('enabling object control should enable child controls', () => {
       const data = {
-        check: true
+        check: true,
       };
       const wrapper = mount(
         <JsonForms
@@ -499,23 +493,17 @@ describe('Special Layout Tests', () => {
           renderers={materialRenderers}
         />
       );
+      expect(wrapper.find('input[type="text"]').first().props().disabled).toBe(
+        false
+      );
       expect(
-        wrapper
-          .find('input[type="text"]')
-          .first()
-          .props().disabled
-      ).toBe(false);
-      expect(
-        wrapper
-          .find('input[type="number"]')
-          .first()
-          .props().disabled
+        wrapper.find('input[type="number"]').first().props().disabled
       ).toBe(false);
     });
 
     it('disabling object control should disable child controls', () => {
       const data = {
-        check: false
+        check: false,
       };
       const wrapper = mount(
         <JsonForms
@@ -525,17 +513,11 @@ describe('Special Layout Tests', () => {
           renderers={materialRenderers}
         />
       );
+      expect(wrapper.find('input[type="text"]').first().props().disabled).toBe(
+        true
+      );
       expect(
-        wrapper
-          .find('input[type="text"]')
-          .first()
-          .props().disabled
-      ).toBe(true);
-      expect(
-        wrapper
-          .find('input[type="number"]')
-          .first()
-          .props().disabled
+        wrapper.find('input[type="number"]').first().props().disabled
       ).toBe(true);
     });
   });
diff --git a/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx b/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx
index 1511b3bb3..f11dc75de 100644
--- a/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialListWithDetailRenderer.test.tsx
@@ -23,19 +23,17 @@
   THE SOFTWARE.
 */
 import './MatchMediaMock';
-import {
-  ControlElement
-} from '@jsonforms/core';
+import { ControlElement } from '@jsonforms/core';
 import * as React from 'react';
 
 import { materialRenderers } from '../../src';
 import MaterialListWithDetailRenderer, {
-  materialListWithDetailTester
+  materialListWithDetailTester,
 } from '../../src/additional/MaterialListWithDetailRenderer';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { JsonFormsStateProvider } from '@jsonforms/react';
-import { ListItem } from '@mui/material'
+import { ListItem } from '@mui/material';
 import { initCore } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -43,11 +41,11 @@ Enzyme.configure({ adapter: new Adapter() });
 const data = [
   {
     message: 'El Barto was here',
-    done: true
+    done: true,
   },
   {
-    message: 'Yolo'
-  }
+    message: 'Yolo',
+  },
 ];
 const schema = {
   type: 'array',
@@ -57,25 +55,25 @@ const schema = {
       message: {
         type: 'string',
         maxLength: 3,
-        title: 'Schema Title'
+        title: 'Schema Title',
       },
       done: {
-        type: 'boolean'
-      }
-    }
-  }
+        type: 'boolean',
+      },
+    },
+  },
 };
 
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 const nestedSchema = {
   type: 'array',
   items: {
-    ...schema
-  }
+    ...schema,
+  },
 };
 
 const nestedSchema2 = {
@@ -89,36 +87,40 @@ const nestedSchema2 = {
           choices: {
             type: 'array',
             items: {
-              type: 'string'
-            }
-          }
-        }
-      }
-    }
-  }
+              type: 'string',
+            },
+          },
+        },
+      },
+    },
+  },
 };
 
 describe('Material list with detail tester', () => {
   it('should only be applicable for intermediate array or when containing proper options', () => {
     const correctUISchema = {
       type: 'ListWithDetail',
-      scope: '#'
+      scope: '#',
     };
     const wrongSchema = {
       type: 'array',
       items: {
-        type: 'string'
-      }
+        type: 'string',
+      },
     };
     expect(materialListWithDetailTester(uischema, schema, undefined)).toBe(-1);
-    expect(materialListWithDetailTester(correctUISchema, wrongSchema, undefined)).toBe(-1);
-    expect(materialListWithDetailTester(correctUISchema, schema, undefined)).toBe(4);
-    expect(materialListWithDetailTester(correctUISchema, nestedSchema, undefined)).toBe(
-      -1
-    );
-    expect(materialListWithDetailTester(correctUISchema, nestedSchema2, undefined)).toBe(
-      4
-    );
+    expect(
+      materialListWithDetailTester(correctUISchema, wrongSchema, undefined)
+    ).toBe(-1);
+    expect(
+      materialListWithDetailTester(correctUISchema, schema, undefined)
+    ).toBe(4);
+    expect(
+      materialListWithDetailTester(correctUISchema, nestedSchema, undefined)
+    ).toBe(-1);
+    expect(
+      materialListWithDetailTester(correctUISchema, nestedSchema2, undefined)
+    ).toBe(4);
   });
 });
 describe('Material list with detail renderer', () => {
@@ -129,7 +131,9 @@ describe('Material list with detail renderer', () => {
   it('should render two list entries', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -140,7 +144,9 @@ describe('Material list with detail renderer', () => {
   it('should render empty entries', () => {
     const core = initCore(schema, uischema, []);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -155,7 +161,9 @@ describe('Material list with detail renderer', () => {
   it('should be hideable', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer
           schema={schema}
           uischema={uischema}
@@ -171,7 +179,9 @@ describe('Material list with detail renderer', () => {
   it('select renders corresponding data in detail', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -189,11 +199,13 @@ describe('Material list with detail renderer', () => {
   it('ui schema label for list', () => {
     const uischemaWithLabel = {
       ...uischema,
-      label: 'My awesome label'
+      label: 'My awesome label',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer
           schema={schema}
           uischema={uischemaWithLabel}
@@ -208,11 +220,13 @@ describe('Material list with detail renderer', () => {
   it('schema title for list', () => {
     const titleSchema = {
       ...schema,
-      title: 'My awesome title'
+      title: 'My awesome title',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer
           schema={titleSchema}
           uischema={uischema}
@@ -227,7 +241,9 @@ describe('Material list with detail renderer', () => {
   it('choose appropriate labels in nested schema', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -245,7 +261,9 @@ describe('Material list with detail renderer', () => {
   it('add data to the array', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -262,7 +280,9 @@ describe('Material list with detail renderer', () => {
   it('remove data from the array', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialListWithDetailRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialNativeControl.test.tsx b/packages/material-renderers/test/renderers/MaterialNativeControl.test.tsx
index ffc5ae1c3..3bf4e184d 100644
--- a/packages/material-renderers/test/renderers/MaterialNativeControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialNativeControl.test.tsx
@@ -37,13 +37,13 @@ const schema = {
   properties: {
     foo: {
       type: 'string',
-      format: 'time'
-    }
-  }
+      format: 'time',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 const createMaterialNativeControl = (props: ControlProps) => {
@@ -52,7 +52,7 @@ const createMaterialNativeControl = (props: ControlProps) => {
 
 const defaultControlProps = (): ControlProps => {
   return {
-    handleChange: () => { },
+    handleChange: () => {},
     enabled: false,
     visible: true,
     path: 'path',
@@ -62,7 +62,7 @@ const defaultControlProps = (): ControlProps => {
     label: 'Foo',
     id: 'foo-id',
     errors: '',
-    data: ''
+    data: '',
   };
 };
 
diff --git a/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx b/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx
index 64a49b4d0..a3875ad02 100644
--- a/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialNumberCell.test.tsx
@@ -24,13 +24,9 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  JsonSchema,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
+import { ControlElement, JsonSchema, NOT_APPLICABLE } from '@jsonforms/core';
 import NumberCell, {
-  materialNumberCellTester
+  materialNumberCellTester,
 } from '../../src/cells/MaterialNumberCell';
 import { materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -43,79 +39,92 @@ Enzyme.configure({ adapter: new Adapter() });
 const data = { foo: 3.14 };
 const schema = {
   type: 'number',
-  minimum: 5
+  minimum: 5,
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material number cells tester', () => {
   it('should fail', () => {
-    expect(materialNumberCellTester(undefined, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialNumberCellTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialNumberCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
+    expect(materialNumberCellTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialNumberCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialNumberCellTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
+    expect(
+      materialNumberCellTester({ type: 'Foo' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialNumberCellTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed with wrong schema type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      materialNumberCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
-          }
-        }
-      },
-      undefined)
+      materialNumberCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail if only sibling has correct type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      materialNumberCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
+      materialNumberCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+            bar: {
+              type: 'number',
+            },
           },
-          bar: {
-            type: 'number'
-          }
-        }
-      },
-      undefined)
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed with matching prop type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      materialNumberCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number'
-          }
-        }
-      },
-      undefined)
+      materialNumberCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -130,12 +139,14 @@ describe('Material number cells', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -148,12 +159,14 @@ describe('Material number cells', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -164,11 +177,13 @@ describe('Material number cells', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -181,13 +196,15 @@ describe('Material number cells', () => {
       type: 'object',
       properties: {
         foo: {
-          type: 'number'
-        }
-      }
+          type: 'number',
+        },
+      },
     };
     const core = initCore(schema, uischema, { foo: 3.14 });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={jsonSchema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -203,13 +220,15 @@ describe('Material number cells', () => {
       type: 'object',
       properties: {
         foo: {
-          type: 'number'
-        }
-      }
+          type: 'number',
+        },
+      },
     };
     const core = initCore(schema, uischema, { foo: 0 });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={jsonSchema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -223,10 +242,12 @@ describe('Material number cells', () => {
   it('should update via input event', (done) => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -246,7 +267,9 @@ describe('Material number cells', () => {
   it('should update via action', (done) => {
     const core = initCore(schema, uischema, { foo: 2.72 });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -254,16 +277,11 @@ describe('Material number cells', () => {
     expect(input.props().value).toBe(2.72);
 
     core.data = { ...core.data, foo: 3.14 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
 
     setTimeout(() => {
-      expect(
-        wrapper
-          .find('input')
-          .first()
-          .props().value
-      ).toBe(3.14);
+      expect(wrapper.find('input').first().props().value).toBe(3.14);
       done();
     }, 1000);
   });
@@ -271,12 +289,14 @@ describe('Material number cells', () => {
   it('should update with undefined value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -288,12 +308,14 @@ describe('Material number cells', () => {
   it('should not update with null value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -305,12 +327,14 @@ describe('Material number cells', () => {
   it('should not update with wrong ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 11 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -322,12 +346,14 @@ describe('Material number cells', () => {
   it('should not update with null ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 2.72 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -339,12 +365,14 @@ describe('Material number cells', () => {
   it('should not update with undefined ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 13 };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -356,7 +384,9 @@ describe('Material number cells', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell
           schema={schema}
           uischema={uischema}
@@ -372,7 +402,9 @@ describe('Material number cells', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <NumberCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialObjectControl.test.tsx b/packages/material-renderers/test/renderers/MaterialObjectControl.test.tsx
index 4bd201629..455255e6e 100644
--- a/packages/material-renderers/test/renderers/MaterialObjectControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialObjectControl.test.tsx
@@ -23,14 +23,11 @@
   THE SOFTWARE.
 */
 import './MatchMediaMock';
-import {
-  ControlElement,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import * as React from 'react';
 import { materialRenderers } from '../../src';
 import MaterialObjectRenderer, {
-  materialObjectControlTester
+  materialObjectControlTester,
 } from '../../src/complex/MaterialObjectRenderer';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
@@ -46,24 +43,24 @@ const schema = {
     foo: {
       type: 'object',
       properties: {
-        foo_1: { type: 'string' }
-      }
+        foo_1: { type: 'string' },
+      },
     },
     bar: {
       type: 'object',
       properties: {
-        bar_1: { type: 'string' }
-      }
-    }
-  }
+        bar_1: { type: 'string' },
+      },
+    },
+  },
 };
 const uischema1: ControlElement = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 const uischema2: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material object renderer tester', () => {
@@ -71,43 +68,54 @@ describe('Material object renderer tester', () => {
     expect(materialObjectControlTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialObjectControlTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialObjectControlTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialObjectControlTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialObjectControlTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
     expect(
-      materialObjectControlTester(uischema2, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' }
-        }
-      },
-      undefined)
+      materialObjectControlTester({ type: 'Foo' }, undefined, undefined)
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialObjectControlTester(uischema2, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' },
-          bar: schema.properties.bar
-        }
-      },
-      undefined)
+      materialObjectControlTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialObjectControlTester(
+        uischema2,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+          },
+        },
+        undefined
+      )
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialObjectControlTester(
+        uischema2,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+            bar: schema.properties.bar,
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed', () => {
     expect(
-      materialObjectControlTester(uischema2, {
-        type: 'object',
-        properties: {
-          foo: schema.properties.foo
-        }
-      },
-      undefined)
+      materialObjectControlTester(
+        uischema2,
+        {
+          type: 'object',
+          properties: {
+            foo: schema.properties.foo,
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -120,7 +128,9 @@ describe('Material object control', () => {
   it('should render all children', () => {
     const core = initCore(schema, uischema1, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialObjectRenderer schema={schema} uischema={uischema1} />
       </JsonFormsStateProvider>
     );
@@ -136,7 +146,9 @@ describe('Material object control', () => {
   it('should render only itself', () => {
     const core = initCore(schema, uischema1, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialObjectRenderer schema={schema} uischema={uischema2} />
       </JsonFormsStateProvider>
     );
@@ -150,7 +162,9 @@ describe('Material object control', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema2, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialObjectRenderer schema={schema} uischema={uischema2} />
       </JsonFormsStateProvider>
     );
@@ -161,7 +175,9 @@ describe('Material object control', () => {
   it('can be invisible', () => {
     const core = initCore(schema, uischema2, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialObjectRenderer
           schema={schema}
           uischema={uischema2}
@@ -176,7 +192,9 @@ describe('Material object control', () => {
   it('should be visible by default', () => {
     const core = initCore(schema, uischema2, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialObjectRenderer schema={schema} uischema={uischema2} />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx b/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx
index ec3f4da25..329ca0713 100644
--- a/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialOneOfEnumCell.test.tsx
@@ -24,13 +24,11 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement
-} from '@jsonforms/core';
+import { ControlElement } from '@jsonforms/core';
 import MaterialOneOfEnumCell, {
-  materialOneOfEnumCellTester
+  materialOneOfEnumCellTester,
 } from '../../src/cells/MaterialOneOfEnumCell';
-import {  materialRenderers } from '../../src';
+import { materialRenderers } from '../../src';
 
 import Enzyme, { mount } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
@@ -45,33 +43,36 @@ const schema = {
   oneOf: [
     {
       const: 'AU',
-      title: 'Australia'
+      title: 'Australia',
     },
     {
       const: 'NZ',
-      title: 'New Zealand'
-    }
-  ]
+      title: 'New Zealand',
+    },
+  ],
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/country'
+  scope: '#/properties/country',
 };
 
 describe('Material one of enum cell tester', () => {
   it('should succeed with matching prop type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/country'
+      scope: '#/properties/country',
     };
     expect(
-      materialOneOfEnumCellTester(control, {
-        type: 'object',
-        properties: {
-          country: schema
-        }
-      },
-      undefined)
+      materialOneOfEnumCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            country: schema,
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -80,7 +81,9 @@ describe('Material enum cell', () => {
   it('should select an item from dropdown list', () => {
     const core = initCore(schema, uischema, data);
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialOneOfEnumCell
           schema={schema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialOneOfRadioGroupControl.test.tsx b/packages/material-renderers/test/renderers/MaterialOneOfRadioGroupControl.test.tsx
index 0450c6bfc..a6dd0b943 100644
--- a/packages/material-renderers/test/renderers/MaterialOneOfRadioGroupControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialOneOfRadioGroupControl.test.tsx
@@ -24,19 +24,14 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  NOT_APPLICABLE,
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import MaterialOneOfRadioGroupControl, {
-  materialOneOfRadioGroupControlTester
+  materialOneOfRadioGroupControlTester,
 } from '../../src/controls/MaterialOneOfRadioGroupControl';
 import { materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
-import {
-  JsonFormsStateProvider
-} from '@jsonforms/react';
+import { JsonFormsStateProvider } from '@jsonforms/react';
 import { initCore } from './util';
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -48,29 +43,33 @@ const oneOfSchema = {
       oneOf: [
         { const: 'A', title: 'Option A' },
         { const: 'B' },
-        { const: 'C', title: 'Option C' }
-      ]
-    }
-  }
+        { const: 'C', title: 'Option C' },
+      ],
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
   scope: '#/properties/foo',
   options: {
-    format: 'radio'
-  }
+    format: 'radio',
+  },
 };
 
 describe('Material oneof radio group tester', () => {
   it('should return valid rank for oneof enums with radio format', () => {
-    const rank = materialOneOfRadioGroupControlTester(uischema, oneOfSchema, undefined);
+    const rank = materialOneOfRadioGroupControlTester(
+      uischema,
+      oneOfSchema,
+      undefined
+    );
     expect(rank).not.toBe(NOT_APPLICABLE);
   });
 
   it('should return NOT_APPLICABLE for enums without radio format', () => {
     const uiSchemaNoRadio = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const rank = materialOneOfRadioGroupControlTester(
       uiSchemaNoRadio,
diff --git a/packages/material-renderers/test/renderers/MaterialOneOfRenderer.test.tsx b/packages/material-renderers/test/renderers/MaterialOneOfRenderer.test.tsx
index f9a20279a..206352650 100644
--- a/packages/material-renderers/test/renderers/MaterialOneOfRenderer.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialOneOfRenderer.test.tsx
@@ -28,20 +28,19 @@ import Dialog from '@mui/material/Dialog';
 
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
+import { ControlElement } from '@jsonforms/core';
+import { MaterialOneOfRenderer, materialRenderers } from '../../src';
 import {
-  ControlElement
-} from '@jsonforms/core';
-import {
-  MaterialOneOfRenderer,
-  materialRenderers
-} from '../../src';
-import { JsonForms, JsonFormsDispatch, JsonFormsStateProvider } from '@jsonforms/react';
+  JsonForms,
+  JsonFormsDispatch,
+  JsonFormsStateProvider,
+} from '@jsonforms/react';
 import { Tab } from '@mui/material';
 import { initCore, TestEmitter } from './util';
 
 Enzyme.configure({ adapter: new Adapter() });
 
-const waitForAsync = () => new Promise(resolve => setImmediate(resolve));
+const waitForAsync = () => new Promise((resolve) => setImmediate(resolve));
 
 const clickAddButton = (wrapper: ReactWrapper, times: number) => {
   // click add button
@@ -65,22 +64,13 @@ const selectOneOfTab = (
 
   if (expectConfim) {
     // confirm dialog
-    const confirmButton = wrapper
-      .find(Dialog)
-      .last()
-      .find('button')
-      .at(1);
+    const confirmButton = wrapper.find(Dialog).last().find('button').at(1);
     confirmButton.simulate('click');
     wrapper.update();
   } else {
-    expect(
-      wrapper
-        .find(Dialog)
-        .last()
-        .find('button')
-        .at(1)
-        .exists()
-    ).toBe(false);
+    expect(wrapper.find(Dialog).last().find('button').at(1).exists()).toBe(
+      false
+    );
   }
 };
 
@@ -97,24 +87,26 @@ describe('Material oneOf renderer', () => {
           oneOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const core = initCore(schema, uischema, { data: undefined });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialOneOfRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -131,23 +123,23 @@ describe('Material oneOf renderer', () => {
           oneOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const data = {
-      value: 5
+      value: 5,
     };
     wrapper = mount(
       <JsonForms
@@ -173,29 +165,29 @@ describe('Material oneOf renderer', () => {
               title: 'String',
               type: 'object',
               properties: {
-                foo: { type: 'string' }
+                foo: { type: 'string' },
               },
-              additionalProperties: false
+              additionalProperties: false,
             },
             {
               title: 'Number',
               type: 'object',
               properties: {
-                bar: { type: 'string' }
+                bar: { type: 'string' },
               },
-              additionalProperties: false
-            }
-          ]
-        }
-      }
+              additionalProperties: false,
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const data = {
-      value: { bar: 'bar' }
+      value: { bar: 'bar' },
     };
     wrapper = mount(
       <JsonForms
@@ -221,29 +213,29 @@ describe('Material oneOf renderer', () => {
               title: 'String',
               type: 'object',
               properties: {
-                foo: { type: 'string' }
+                foo: { type: 'string' },
               },
-              required: ['foo']
+              required: ['foo'],
             },
             {
               title: 'Number',
               type: 'object',
               properties: {
-                bar: { type: 'string' }
+                bar: { type: 'string' },
               },
-              required: ['bar']
-            }
-          ]
-        }
-      }
+              required: ['bar'],
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const data = {
-      value: { bar: 'bar' }
+      value: { bar: 'bar' },
     };
     wrapper = mount(
       <JsonForms
@@ -267,23 +259,23 @@ describe('Material oneOf renderer', () => {
           oneOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
       <JsonForms
@@ -303,7 +295,7 @@ describe('Material oneOf renderer', () => {
     wrapper.update();
     setTimeout(() => {
       expect(onChangeData.data).toEqual({
-        value: 'test'
+        value: 'test',
       });
       done();
     }, 1000);
@@ -316,37 +308,39 @@ describe('Material oneOf renderer', () => {
         thingOrThings: {
           oneOf: [
             {
-              $ref: '#/definitions/thing'
+              $ref: '#/definitions/thing',
             },
             {
-              $ref: '#/definitions/thingArray'
-            }
-          ]
-        }
+              $ref: '#/definitions/thingArray',
+            },
+          ],
+        },
       },
       definitions: {
         thing: {
           title: 'Thing',
-          type: 'string'
+          type: 'string',
         },
         thingArray: {
           title: 'Things',
           type: 'array',
           items: {
-            $ref: '#/definitions/thing'
-          }
-        }
-      }
+            $ref: '#/definitions/thing',
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/thingOrThings'
+      scope: '#/properties/thingOrThings',
     };
 
     const core = initCore(schema, uischema, { data: {} });
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <JsonFormsDispatch schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -377,42 +371,44 @@ describe('Material oneOf renderer', () => {
               type: 'object',
               properties: {
                 thing: {
-                  $ref: '#/definitions/thing'
-                }
-              }
+                  $ref: '#/definitions/thing',
+                },
+              },
             },
             {
-              $ref: '#/definitions/thingArray'
-            }
-          ]
-        }
+              $ref: '#/definitions/thingArray',
+            },
+          ],
+        },
       },
       definitions: {
         thing: {
           title: 'Thing',
-          type: 'string'
+          type: 'string',
         },
         thingArray: {
           title: 'Things',
           type: 'array',
           items: {
-            $ref: '#/definitions/thing'
-          }
-        }
-      }
+            $ref: '#/definitions/thing',
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/thingOrThings'
+      scope: '#/properties/thingOrThings',
     };
 
     const core = initCore(schema, uischema, {});
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -436,7 +432,7 @@ describe('Material oneOf renderer', () => {
     // 1 header row + 2 data rows (one is replacing the 'No data' one)
     expect(nrOfRowsAfterAdd.length).toBe(3);
     expect(onChangeData.data).toEqual({
-      thingOrThings: ['', '']
+      thingOrThings: ['', ''],
     });
   });
 
@@ -451,51 +447,50 @@ describe('Material oneOf renderer', () => {
               type: 'object',
               properties: {
                 thing: {
-                  $ref: '#/definitions/thing'
-                }
-              }
+                  $ref: '#/definitions/thing',
+                },
+              },
             },
             {
-              $ref: '#/definitions/thingArray'
-            }
-          ]
-        }
+              $ref: '#/definitions/thingArray',
+            },
+          ],
+        },
       },
       definitions: {
         thing: {
           title: 'Thing',
-          type: 'string'
+          type: 'string',
         },
         thingArray: {
           title: 'Things',
           type: 'array',
           items: {
-            $ref: '#/definitions/thing'
-          }
-        }
-      }
+            $ref: '#/definitions/thing',
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/thingOrThings'
+      scope: '#/properties/thingOrThings',
     };
 
     const core = initCore(schema, uischema, {});
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
-            onChange={({ data }) => {
-              onChangeData.data = data;
-            }}
-        />
-        <JsonFormsDispatch
-          schema={schema}
-          uischema={uischema}
+          onChange={({ data }) => {
+            onChangeData.data = data;
+          }}
         />
+        <JsonFormsDispatch schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
@@ -513,12 +508,10 @@ describe('Material oneOf renderer', () => {
 
     setTimeout(() => {
       expect(onChangeData.data).toEqual({
-        thingOrThings: { thing: 'test' }
+        thingOrThings: { thing: 'test' },
       });
       done();
     }, 1000);
-
-    
   });
 
   it('should show confirm dialog when data is not an empty object', async () => {
@@ -529,25 +522,25 @@ describe('Material oneOf renderer', () => {
           oneOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
 
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
 
     const data = {
-      value: 'Foo Bar'
+      value: 'Foo Bar',
     };
     wrapper = mount(
       <JsonForms
@@ -572,24 +565,26 @@ describe('Material oneOf renderer', () => {
           oneOf: [
             {
               title: 'String',
-              type: 'string'
+              type: 'string',
             },
             {
               title: 'Number',
-              type: 'number'
-            }
-          ]
-        }
-      }
+              type: 'number',
+            },
+          ],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
       label: 'Value',
-      scope: '#/properties/value'
+      scope: '#/properties/value',
     };
     const core = initCore(schema, uischema, { data: undefined });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialOneOfRenderer
           schema={schema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialRadioGroupControl.test.tsx b/packages/material-renderers/test/renderers/MaterialRadioGroupControl.test.tsx
index 3fdb22687..07c9786ce 100644
--- a/packages/material-renderers/test/renderers/MaterialRadioGroupControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialRadioGroupControl.test.tsx
@@ -24,11 +24,10 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
-import MaterialRadioGroupControl, { materialRadioGroupControlTester } from '../../src/controls/MaterialRadioGroupControl';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
+import MaterialRadioGroupControl, {
+  materialRadioGroupControlTester,
+} from '../../src/controls/MaterialRadioGroupControl';
 import { materialRenderers } from '../../src';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
@@ -42,16 +41,16 @@ const schema = {
   properties: {
     foo: {
       type: 'string',
-      enum: ['A', 'B', 'C', 'D']
-    }
-  }
+      enum: ['A', 'B', 'C', 'D'],
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
   scope: '#/properties/foo',
   options: {
-    format: 'radio'
-  }
+    format: 'radio',
+  },
 };
 
 describe('Material radio group tester', () => {
@@ -63,9 +62,13 @@ describe('Material radio group tester', () => {
   it('should return NOT_APPLICABLE for enums without radio format', () => {
     const uiSchemaNoRadio = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
-    const rank = materialRadioGroupControlTester(uiSchemaNoRadio, schema, undefined);
+    const rank = materialRadioGroupControlTester(
+      uiSchemaNoRadio,
+      schema,
+      undefined
+    );
     expect(rank).toBe(NOT_APPLICABLE);
   });
 });
@@ -78,7 +81,9 @@ describe('Material radio group control', () => {
   it('should have option selected', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialRadioGroupControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -94,11 +99,13 @@ describe('Material radio group control', () => {
 
     core.data = { ...core.data, foo: 'A' };
     core.data = { ...core.data, foo: 'B' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
 
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialRadioGroupControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -110,7 +117,9 @@ describe('Material radio group control', () => {
   it('should be hideable ', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialRadioGroupControl
           schema={schema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialSliderControl.test.tsx b/packages/material-renderers/test/renderers/MaterialSliderControl.test.tsx
index 767dddd4c..e8618e741 100644
--- a/packages/material-renderers/test/renderers/MaterialSliderControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialSliderControl.test.tsx
@@ -24,13 +24,9 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  JsonSchema,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
+import { ControlElement, JsonSchema, NOT_APPLICABLE } from '@jsonforms/core';
 import SliderControl, {
-  materialSliderControlTester
+  materialSliderControlTester,
 } from '../../src/controls/MaterialSliderControl';
 import { materialRenderers } from '../../src';
 import { Slider } from '@mui/material';
@@ -50,16 +46,16 @@ const schema = {
       type: 'number',
       maximum: 10,
       minimum: 2,
-      default: 6
-    }
-  }
+      default: 6,
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
   scope: '#/properties/foo',
   options: {
-    slider: true
-  }
+    slider: true,
+  },
 };
 
 describe('Material slider tester', () => {
@@ -67,129 +63,155 @@ describe('Material slider tester', () => {
     expect(materialSliderControlTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialSliderControlTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialSliderControlTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialSliderControlTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialSliderControlTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
+    expect(
+      materialSliderControlTester({ type: 'Foo' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialSliderControlTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail with wrong schema type', () => {
     expect(
-      materialSliderControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' }
-        }
-      },
-      undefined)
+      materialSliderControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail if only sibling has correct prop type', () => {
     expect(
-      materialSliderControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' },
-          bar: { type: 'number' }
-        }
-      },
-      undefined)
+      materialSliderControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+            bar: { type: 'number' },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail if maximum and minimum are missing', () => {
     expect(
-      materialSliderControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'number' }
-        }
-      },
-      undefined)
+      materialSliderControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'number' },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail if maximum is missing', () => {
     expect(
-      materialSliderControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number',
-            minimum: 2
-          }
-        }
-      },
-      undefined)
+      materialSliderControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+              minimum: 2,
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail if minimum is missing', () => {
     expect(
-      materialSliderControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number',
-            maximum: 10
-          }
-        }
-      },
-      undefined)
+      materialSliderControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+              maximum: 10,
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail is default is missing', () => {
     expect(
-      materialSliderControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number',
-            maximum: 10,
-            minimum: 2
-          }
-        }
-      },
-      undefined)
+      materialSliderControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+              maximum: 10,
+              minimum: 2,
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed with number type', () => {
     expect(
-      materialSliderControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number',
-            maximum: 10,
-            minimum: 2,
-            default: 6
-          }
-        }
-      },
-      undefined)
+      materialSliderControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+              maximum: 10,
+              minimum: 2,
+              default: 6,
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(4);
   });
 
   it('should succeed with integer type', () => {
     expect(
-      materialSliderControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'integer',
-            maximum: 10,
-            minimum: 2,
-            default: 6
-          }
-        }
-      },
-      undefined)
+      materialSliderControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'integer',
+              maximum: 10,
+              minimum: 2,
+              default: 6,
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(4);
   });
 });
@@ -207,17 +229,16 @@ describe('Material slider control', () => {
           type: 'number',
           maximum: 10,
           minimum: 2,
-          default: 6
-        }
-      }
+          default: 6,
+        },
+      },
     };
     const core = initCore(jsonSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <SliderControl
-          schema={jsonSchema}
-          uischema={uischema}
-        />
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
+        <SliderControl schema={jsonSchema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find(Slider).first();
@@ -226,7 +247,7 @@ describe('Material slider control', () => {
 
   it('should update via action', () => {
     let data = {
-      foo: 3
+      foo: 3,
     };
     wrapper = mount(
       <JsonForms
@@ -255,12 +276,12 @@ describe('Material slider control', () => {
           maximum: 10,
           minimum: 2,
           default: 6,
-          multipleOf: 2
-        }
-      }
+          multipleOf: 2,
+        },
+      },
     };
     const data = {
-      foo: 6
+      foo: 6,
     };
     wrapper = mount(
       <JsonForms
@@ -363,12 +384,10 @@ describe('Material slider control', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
-        <SliderControl
-          schema={schema}
-          uischema={uischema}
-          enabled={false}
-        />
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
+        <SliderControl schema={schema} uischema={uischema} enabled={false} />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find(Slider).first();
@@ -392,7 +411,9 @@ describe('Material slider control', () => {
   it('should render id and input id', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <SliderControl
           schema={schema}
           uischema={uischema}
@@ -417,13 +438,15 @@ describe('Material slider control', () => {
           type: 'number',
           maximum: 10,
           minimum: 2,
-          default: 6
-        }
-      }
+          default: 6,
+        },
+      },
     };
     const core = initCore(schema, uischema, { foo: 5 });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <SliderControl
           schema={jsonSchema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx b/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx
index 034dd58fd..7843231fa 100644
--- a/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTextCell.test.tsx
@@ -24,13 +24,9 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  JsonSchema,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
+import { ControlElement, JsonSchema, NOT_APPLICABLE } from '@jsonforms/core';
 import TextCell, {
-  materialTextCellTester
+  materialTextCellTester,
 } from '../../src/cells/MaterialTextCell';
 import { materialRenderers } from '../../src';
 
@@ -47,84 +43,97 @@ const DEFAULT_SIZE = 20;
 const data = { name: 'Foo' };
 const minLengthSchema = {
   type: 'string',
-  minLength: 3
+  minLength: 3,
 };
 const maxLengthSchema = {
   type: 'string',
-  maxLength: 5
+  maxLength: 5,
 };
 const schema = { type: 'string' };
 
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/name'
+  scope: '#/properties/name',
 };
 
 describe('Material text cell tester', () => {
   it('should fail', () => {
-    expect(materialTextCellTester(undefined, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialTextCellTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialTextCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
+    expect(materialTextCellTester(undefined, undefined, undefined)).toBe(
+      NOT_APPLICABLE
+    );
+    expect(materialTextCellTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialTextCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialTextCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
+    expect(
+      materialTextCellTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
   });
   it('should fail with wrong schema type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      materialTextCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number'
-          }
-        }
-      },
-      undefined)
+      materialTextCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail if only sibling has correct type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      materialTextCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'number'
+      materialTextCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'number',
+            },
+            bar: {
+              type: 'string',
+            },
           },
-          bar: {
-            type: 'string'
-          }
-        }
-      },
-      undefined)
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed with matching prop type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      materialTextCellTester(control, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
-          }
-        }
-      },
-      undefined)
+      materialTextCellTester(
+        control,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(1);
   });
 });
@@ -138,11 +147,13 @@ describe('Material text cell', () => {
     const control: ControlElement = {
       type: 'Control',
       scope: '#/properties/name',
-      options: { focus: true }
+      options: { focus: true },
     };
     const core = initCore(minLengthSchema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={control} path='name' />
       </JsonFormsStateProvider>
     );
@@ -154,11 +165,13 @@ describe('Material text cell', () => {
     const control: ControlElement = {
       type: 'Control',
       scope: '#/properties/name',
-      options: { focus: false }
+      options: { focus: false },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={control} path={'name'} />
       </JsonFormsStateProvider>
     );
@@ -169,11 +182,13 @@ describe('Material text cell', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const core = initCore(minLengthSchema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={control} path='name' />
       </JsonFormsStateProvider>
     );
@@ -185,12 +200,14 @@ describe('Material text cell', () => {
     const jsonSchema: JsonSchema = {
       type: 'object',
       properties: {
-        name: { type: 'string' }
-      }
+        name: { type: 'string' },
+      },
     };
     const core = initCore(minLengthSchema, uischema, { name: 'Foo' });
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={jsonSchema} uischema={uischema} path={'name'} />
       </JsonFormsStateProvider>
     );
@@ -202,10 +219,12 @@ describe('Material text cell', () => {
   it('should update via input event', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -226,12 +245,14 @@ describe('Material text cell', () => {
   it('should update via action', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -243,12 +264,14 @@ describe('Material text cell', () => {
   it('should update with undefined value', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -260,12 +283,14 @@ describe('Material text cell', () => {
   it('should update with null value', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -277,12 +302,14 @@ describe('Material text cell', () => {
   it('should not update if wrong ref', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, firstname: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -294,12 +321,14 @@ describe('Material text cell', () => {
   it('should not update if null ref', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -311,12 +340,14 @@ describe('Material text cell', () => {
   it('should not update if undefined ref', (done) => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -328,7 +359,9 @@ describe('Material text cell', () => {
   it('can be disabled', () => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell
           schema={minLengthSchema}
           uischema={uischema}
@@ -344,7 +377,9 @@ describe('Material text cell', () => {
   it('should be enabled by default', () => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={minLengthSchema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
@@ -358,12 +393,14 @@ describe('Material text cell', () => {
       scope: '#/properties/name',
       options: {
         trim: true,
-        restrict: true
-      }
+        restrict: true,
+      },
     };
     const core = initCore(maxLengthSchema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={maxLengthSchema} uischema={control} path='name' />
       </JsonFormsStateProvider>
     );
@@ -377,11 +414,13 @@ describe('Material text cell', () => {
     const control: ControlElement = {
       type: 'Control',
       scope: '#/properties/name',
-      options: { trim: true }
+      options: { trim: true },
     };
     const core = initCore(maxLengthSchema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={maxLengthSchema} uischema={control} path='name' />
       </JsonFormsStateProvider>
     );
@@ -400,11 +439,13 @@ describe('Material text cell', () => {
     const control: ControlElement = {
       type: 'Control',
       scope: '#/properties/name',
-      options: { restrict: true }
+      options: { restrict: true },
     };
     const core = initCore(maxLengthSchema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={maxLengthSchema} uischema={control} path='name' />
       </JsonFormsStateProvider>
     );
@@ -422,7 +463,9 @@ describe('Material text cell', () => {
   it('should not use maxLength by default', () => {
     const core = initCore(maxLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={schema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
@@ -443,12 +486,14 @@ describe('Material text cell', () => {
       scope: '#/properties/name',
       options: {
         trim: true,
-        restrict: true
-      }
+        restrict: true,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={schema} uischema={control} path='name' />
       </JsonFormsStateProvider>
     );
@@ -458,7 +503,8 @@ describe('Material text cell', () => {
       .getDOMNode() as HTMLInputElement;
     expect(input.maxLength).toBe(DEFAULT_MAX_LENGTH);
 
-    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth')).toBeTruthy;
+    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth'))
+      .toBeTruthy;
     expect(input.size).toBe(DEFAULT_SIZE);
   });
 
@@ -466,11 +512,13 @@ describe('Material text cell', () => {
     const control: ControlElement = {
       type: 'Control',
       scope: '#/properties/name',
-      options: { trim: true }
+      options: { trim: true },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={schema} uischema={control} path='name' />
       </JsonFormsStateProvider>
     );
@@ -480,7 +528,8 @@ describe('Material text cell', () => {
       .first()
       .getDOMNode() as HTMLInputElement;
     expect(input.maxLength).toBe(DEFAULT_MAX_LENGTH);
-    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth')).toBeTruthy;
+    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth'))
+      .toBeTruthy;
     expect(input.size).toBe(DEFAULT_SIZE);
   });
 
@@ -488,11 +537,13 @@ describe('Material text cell', () => {
     const control: ControlElement = {
       type: 'Control',
       scope: '#/properties/name',
-      options: { restrict: true }
+      options: { restrict: true },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={schema} uischema={control} path='name' />
       </JsonFormsStateProvider>
     );
@@ -502,14 +553,17 @@ describe('Material text cell', () => {
       .first()
       .getDOMNode() as HTMLInputElement;
     expect(input.maxLength).toBe(DEFAULT_MAX_LENGTH);
-    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth')).toBeTruthy;
+    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth'))
+      .toBeTruthy;
     expect(input.size).toBe(DEFAULT_SIZE);
   });
 
   it('should have default values for attributes', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell schema={schema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
@@ -518,14 +572,17 @@ describe('Material text cell', () => {
       .first()
       .getDOMNode() as HTMLInputElement;
     expect(input.maxLength).toBe(DEFAULT_MAX_LENGTH);
-    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth')).toBeTruthy;
+    expect(input.parentElement.classList.contains('MuiInputBase-fullWidth'))
+      .toBeTruthy;
     expect(input.size).toBe(DEFAULT_SIZE);
   });
 
   it('should be disabled', () => {
     const core = initCore(minLengthSchema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TextCell
           schema={schema}
           uischema={uischema}
diff --git a/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx b/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx
index 2b0f1a59a..639021d2b 100644
--- a/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx
@@ -38,13 +38,13 @@ const schema = {
   type: 'object',
   properties: {
     foo: {
-      type: 'string'
-    }
-  }
+      type: 'string',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 const createMaterialTextControl = (props: ControlProps) => {
@@ -63,7 +63,7 @@ const defaultControlProps = (): ControlProps => {
     label: 'Foo',
     id: 'foo-id',
     errors: '',
-    data: ''
+    data: '',
   };
 };
 
@@ -79,7 +79,7 @@ describe('Material text control', () => {
     wrapper = mount(createMaterialTextControl(props));
     expect(wrapper.find(MaterialInputControl).props()).toEqual({
       ...props,
-      input: MuiInputText
+      input: MuiInputText,
     });
 
     expect(wrapper.find('input').props().id).toEqual(`${props.id}-input`);
@@ -88,7 +88,7 @@ describe('Material text control', () => {
   it('allows adding of mui input props', () => {
     const props = {
       ...defaultControlProps(),
-      muiInputProps: { spellCheck: false }
+      muiInputProps: { spellCheck: false },
     };
     wrapper = mount(createMaterialTextControl(props));
     expect(wrapper.find('input').props().spellCheck).toEqual(false);
@@ -100,7 +100,10 @@ describe('Material text control', () => {
     // call onPointerEnter prop manually as the tests seem to ignore 'pointerenter' events, 'mouseover' events work however.
     wrapper.find(Input).props().onPointerEnter.call(this);
     wrapper.update();
-    expect(wrapper.find(InputAdornment).props().style).not.toHaveProperty('display', 'none');
+    expect(wrapper.find(InputAdornment).props().style).not.toHaveProperty(
+      'display',
+      'none'
+    );
   });
 
   it('hides clear button when data is undefined', () => {
@@ -110,6 +113,9 @@ describe('Material text control', () => {
     // call onPointerEnter prop manually as the tests seem to ignore 'pointerenter' events, 'mouseover' events work however.
     wrapper.find(Input).props().onPointerEnter.call(this);
     wrapper.update();
-    expect(wrapper.find(InputAdornment).props().style).toHaveProperty('display', 'none');
+    expect(wrapper.find(InputAdornment).props().style).toHaveProperty(
+      'display',
+      'none'
+    );
   });
 });
diff --git a/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx b/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx
index f5e6611a8..ef5839eda 100644
--- a/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTimeCell.test.tsx
@@ -24,12 +24,9 @@
 */
 import './MatchMediaMock';
 import * as React from 'react';
-import {
-  ControlElement,
-  NOT_APPLICABLE
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import TimeCell, {
-  materialTimeCellTester
+  materialTimeCellTester,
 } from '../../src/cells/MaterialTimeCell';
 import { materialRenderers } from '../../src';
 
@@ -44,66 +41,79 @@ const data = { foo: '13:37' };
 
 const schema = {
   type: 'string',
-  format: 'time'
+  format: 'time',
 };
 
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material time cell tester', () => {
   it('should fail', () => {
-    expect(materialTimeCellTester(undefined, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialTimeCellTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialTimeCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
+    expect(materialTimeCellTester(undefined, undefined, undefined)).toBe(
+      NOT_APPLICABLE
+    );
+    expect(materialTimeCellTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialTimeCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialTimeCellTester({ type: 'Foo' }, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
+    expect(
+      materialTimeCellTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail with wrong prop type', () => {
     expect(
-      materialTimeCellTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' }
-        }
-      },
-      undefined)
+      materialTimeCellTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should fail if only sibling prop has correct type', () => {
     expect(
-      materialTimeCellTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' },
-          bar: {
-            type: 'string',
-            format: 'time'
-          }
-        }
-      },
-      undefined)
+      materialTimeCellTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+            bar: {
+              type: 'string',
+              format: 'time',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed with correct prop type', () => {
     expect(
-      materialTimeCellTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string',
-            format: 'time'
-          }
-        }
-      },
-      undefined)
+      materialTimeCellTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+              format: 'time',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
 });
@@ -118,12 +128,14 @@ describe('Material time cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -136,12 +148,14 @@ describe('Material time cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -152,11 +166,13 @@ describe('Material time cell', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={control} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -167,7 +183,9 @@ describe('Material time cell', () => {
   it('should render', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
@@ -180,10 +198,12 @@ describe('Material time cell', () => {
   it('should update via event', (done) => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -203,12 +223,14 @@ describe('Material time cell', () => {
   it('should update via action', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '20:15' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -220,12 +242,14 @@ describe('Material time cell', () => {
   it('should update with null value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -237,12 +261,14 @@ describe('Material time cell', () => {
   it('update with undefined value', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -254,12 +280,14 @@ describe('Material time cell', () => {
   it('should update with wrong ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -271,12 +299,14 @@ describe('Material time cell', () => {
   it('should update with null ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: '20:15' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -288,12 +318,14 @@ describe('Material time cell', () => {
   it('should update with undefined ref', (done) => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: '20:15' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     setTimeout(() => {
       const input = wrapper.find('input').first();
@@ -305,7 +337,9 @@ describe('Material time cell', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell
           schema={schema}
           uischema={uischema}
@@ -321,7 +355,9 @@ describe('Material time cell', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TimeCell schema={schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
diff --git a/packages/material-renderers/test/renderers/MaterialTimeControl.test.tsx b/packages/material-renderers/test/renderers/MaterialTimeControl.test.tsx
index 55091505b..006f9c193 100644
--- a/packages/material-renderers/test/renderers/MaterialTimeControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTimeControl.test.tsx
@@ -23,12 +23,9 @@
   THE SOFTWARE.
 */
 import './MatchMediaMock';
-import {
-  ControlElement,
-  NOT_APPLICABLE,
-} from '@jsonforms/core';
+import { ControlElement, NOT_APPLICABLE } from '@jsonforms/core';
 import MaterialTimeControl, {
-  materialTimeControlTester
+  materialTimeControlTester,
 } from '../../src/controls/MaterialTimeControl';
 import * as React from 'react';
 import { materialRenderers } from '../../src';
@@ -46,13 +43,13 @@ const schema = {
   properties: {
     foo: {
       type: 'string',
-      format: 'time'
-    }
-  }
+      format: 'time',
+    },
+  },
 };
 const uischema: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 describe('Material time control tester', () => {
@@ -60,49 +57,60 @@ describe('Material time control tester', () => {
     expect(materialTimeControlTester(undefined, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
-    expect(materialTimeControlTester(null, undefined, undefined)).toBe(NOT_APPLICABLE);
-    expect(materialTimeControlTester({ type: 'Foo' }, undefined, undefined)).toBe(
-      NOT_APPLICABLE
-    );
-    expect(materialTimeControlTester({ type: 'Control' }, undefined, undefined)).toBe(
+    expect(materialTimeControlTester(null, undefined, undefined)).toBe(
       NOT_APPLICABLE
     );
     expect(
-      materialTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' }
-        }
-      },
-      undefined)
+      materialTimeControlTester({ type: 'Foo' }, undefined, undefined)
     ).toBe(NOT_APPLICABLE);
     expect(
-      materialTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: { type: 'string' },
-          bar: {
-            type: 'string',
-            format: 'time'
-          }
-        }
-      },
-      undefined)
+      materialTimeControlTester({ type: 'Control' }, undefined, undefined)
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialTimeControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+          },
+        },
+        undefined
+      )
+    ).toBe(NOT_APPLICABLE);
+    expect(
+      materialTimeControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: { type: 'string' },
+            bar: {
+              type: 'string',
+              format: 'time',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(NOT_APPLICABLE);
   });
 
   it('should succeed', () => {
     expect(
-      materialTimeControlTester(uischema, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string',
-            format: 'time'
-          }
-        }
-      },
-      undefined)
+      materialTimeControlTester(
+        uischema,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+              format: 'time',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(4);
     expect(
       materialTimeControlTester(
@@ -111,9 +119,9 @@ describe('Material time control tester', () => {
           type: 'object',
           properties: {
             foo: {
-              type: 'string'
-            }
-          }
+              type: 'string',
+            },
+          },
         },
         undefined
       )
@@ -131,12 +139,14 @@ describe('Material time control', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -149,12 +159,14 @@ describe('Material time control', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(schema, control, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -165,11 +177,13 @@ describe('Material time control', () => {
   it('should not autofocus by default', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={control} />
       </JsonFormsStateProvider>
     );
@@ -180,7 +194,9 @@ describe('Material time control', () => {
   it('should render', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -193,10 +209,12 @@ describe('Material time control', () => {
   it('should update via event', () => {
     const core = initCore(schema, uischema, data);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -214,12 +232,14 @@ describe('Material time control', () => {
   it('should update via action', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '08:40:00' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('08:40');
@@ -228,12 +248,14 @@ describe('Material time control', () => {
   it('should update with null value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
@@ -242,12 +264,14 @@ describe('Material time control', () => {
   it('should update with undefined value', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
@@ -256,12 +280,14 @@ describe('Material time control', () => {
   it('should not update with wrong ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: '08:40' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('13:37');
@@ -270,12 +296,14 @@ describe('Material time control', () => {
   it('should not update with null ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: '08:40' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('13:37');
@@ -284,12 +312,14 @@ describe('Material time control', () => {
   it('should not update with undefined ref', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: '08:40' };
-    wrapper.setProps({ initState: { renderers: materialRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: materialRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('13:37');
@@ -298,7 +328,9 @@ describe('Material time control', () => {
   it('can be disabled', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl
           schema={schema}
           uischema={uischema}
@@ -313,7 +345,9 @@ describe('Material time control', () => {
   it('should be enabled by default', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -324,7 +358,9 @@ describe('Material time control', () => {
   it('should render input id', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl
           schema={schema}
           uischema={uischema}
@@ -340,7 +376,9 @@ describe('Material time control', () => {
   it('should be hideable', () => {
     const core = initCore(schema, uischema, data);
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <MaterialTimeControl
           schema={schema}
           uischema={uischema}
@@ -353,12 +391,14 @@ describe('Material time control', () => {
   });
 
   it('should support format customizations', () => {
-    const core = initCore(schema, uischema, {foo: '1//2 pm'});
+    const core = initCore(schema, uischema, { foo: '1//2 pm' });
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
@@ -366,10 +406,13 @@ describe('Material time control', () => {
         />
         <MaterialTimeControl
           schema={schema}
-          uischema={{...uischema, options: {
-            timeFormat: 'mm-HH',
-            timeSaveFormat: 'h//m a'
-          }}}
+          uischema={{
+            ...uischema,
+            options: {
+              timeFormat: 'mm-HH',
+              timeSaveFormat: 'h//m a',
+            },
+          }}
         />
       </JsonFormsStateProvider>
     );
@@ -385,26 +428,25 @@ describe('Material time control', () => {
   it('should call onChange with original input value for invalid date strings', () => {
     const core = initCore(schema, uischema);
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: materialRenderers, core }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: materialRenderers, core }}
+      >
         <TestEmitter
           onChange={({ data }) => {
             onChangeData.data = data;
           }}
         />
-        <MaterialTimeControl
-          schema={schema}
-          uischema={{...uischema}}
-        />
+        <MaterialTimeControl schema={schema} uischema={{ ...uischema }} />
       </JsonFormsStateProvider>
     );
 
     const input = wrapper.find('input').first();
     expect(input.props().value).toBe('');
 
-    (input.getDOMNode() as HTMLInputElement).value = 'invalid date string'; 
+    (input.getDOMNode() as HTMLInputElement).value = 'invalid date string';
     input.simulate('change', input);
     expect(onChangeData.data.foo).toBe('invalid date string');
   });
diff --git a/packages/material-renderers/test/renderers/util.ts b/packages/material-renderers/test/renderers/util.ts
index 75b6e29a0..12836889d 100644
--- a/packages/material-renderers/test/renderers/util.ts
+++ b/packages/material-renderers/test/renderers/util.ts
@@ -27,16 +27,20 @@ import {
   createAjv,
   JsonSchema,
   TesterContext,
-  UISchemaElement
+  UISchemaElement,
 } from '@jsonforms/core';
 import { JsonFormsReactProps, useJsonForms } from '@jsonforms/react';
 import React from 'react';
 
-export const initCore = (schema: JsonSchema, uischema: UISchemaElement, data?: any) => {
+export const initCore = (
+  schema: JsonSchema,
+  uischema: UISchemaElement,
+  data?: any
+) => {
   return { schema, uischema, data, ajv: createAjv() };
 };
 
-export const TestEmitter : React.FC<JsonFormsReactProps> = ({onChange}) => {
+export const TestEmitter: React.FC<JsonFormsReactProps> = ({ onChange }) => {
   const ctx = useJsonForms();
   const { data, errors } = ctx.core;
   React.useEffect(() => {
@@ -45,6 +49,9 @@ export const TestEmitter : React.FC<JsonFormsReactProps> = ({onChange}) => {
   return null;
 };
 
-export const createTesterContext = (rootSchema: JsonSchema, config?: any): TesterContext => {
+export const createTesterContext = (
+  rootSchema: JsonSchema,
+  config?: any
+): TesterContext => {
   return { rootSchema, config };
-};
\ No newline at end of file
+};
diff --git a/packages/react/src/Control.ts b/packages/react/src/Control.ts
index b60fb12cf..1d033b51c 100644
--- a/packages/react/src/Control.ts
+++ b/packages/react/src/Control.ts
@@ -39,7 +39,7 @@ export class Control<
     super(props);
     this.state = {
       value: props.data ? props.data : '',
-      isFocused: false
+      isFocused: false,
     } as S;
   }
 
diff --git a/packages/react/src/DispatchCell.tsx b/packages/react/src/DispatchCell.tsx
index de0bbd0ee..782fd8bc6 100644
--- a/packages/react/src/DispatchCell.tsx
+++ b/packages/react/src/DispatchCell.tsx
@@ -31,32 +31,45 @@ import { withJsonFormsDispatchCellProps } from './JsonFormsContext';
 /**
  * Dispatch renderer component for cells.
  */
-export const Dispatch = ({uischema, schema, rootSchema, path, cells, id, enabled, renderers, config }: DispatchCellProps) => {
+export const Dispatch = ({
+  uischema,
+  schema,
+  rootSchema,
+  path,
+  cells,
+  id,
+  enabled,
+  renderers,
+  config,
+}: DispatchCellProps) => {
   const testerContext = useMemo(
     () => ({
       rootSchema: rootSchema,
-      config: config
+      config: config,
     }),
     [rootSchema, config]
   );
   const cell = useMemo(
-    () => maxBy(cells, r => r.tester(uischema, schema, testerContext)),
+    () => maxBy(cells, (r) => r.tester(uischema, schema, testerContext)),
     [cells, uischema, schema, testerContext]
   );
-  if (cell === undefined || cell.tester(uischema, schema, testerContext) === -1) {
+  if (
+    cell === undefined ||
+    cell.tester(uischema, schema, testerContext) === -1
+  ) {
     return <UnknownRenderer type={'cell'} />;
   } else {
     const Cell = cell.cell;
     return (
-        <Cell
-          uischema={uischema}
-          schema={schema}
-          enabled={enabled}
-          path={path}
-          id={id}
-          renderers={renderers}
-          cells={cells}
-        />
+      <Cell
+        uischema={uischema}
+        schema={schema}
+        enabled={enabled}
+        path={path}
+        id={id}
+        renderers={renderers}
+        cells={cells}
+      />
     );
   }
 };
diff --git a/packages/react/src/JsonForms.tsx b/packages/react/src/JsonForms.tsx
index a9128f377..d256f89bc 100644
--- a/packages/react/src/JsonForms.tsx
+++ b/packages/react/src/JsonForms.tsx
@@ -41,11 +41,11 @@ import {
   OwnPropsOfJsonFormsRenderer,
   removeId,
   UISchemaElement,
-  ValidationMode
+  ValidationMode,
 } from '@jsonforms/core';
 import {
   JsonFormsStateProvider,
-  withJsonFormsRendererProps
+  withJsonFormsRendererProps,
 } from './JsonFormsContext';
 
 interface JsonFormsRendererState {
@@ -74,9 +74,18 @@ export class JsonFormsDispatchRenderer extends React.Component<
       removeId(this.state.id);
     }
   }
-  
+
   render() {
-    const { schema, rootSchema, uischema, path, enabled, renderers, cells, config } = this.props as JsonFormsProps;
+    const {
+      schema,
+      rootSchema,
+      uischema,
+      path,
+      enabled,
+      renderers,
+      cells,
+      config,
+    } = this.props as JsonFormsProps;
 
     return (
       <TestAndRender
@@ -109,12 +118,15 @@ const TestAndRender = React.memo(
     const testerContext = useMemo(
       () => ({
         rootSchema: props.rootSchema,
-        config: props.config
+        config: props.config,
       }),
       [props.rootSchema, props.config]
     );
     const renderer = useMemo(
-      () => maxBy(props.renderers, r => r.tester(props.uischema, props.schema, testerContext)),
+      () =>
+        maxBy(props.renderers, (r) =>
+          r.tester(props.uischema, props.schema, testerContext)
+        ),
       [props.renderers, props.uischema, props.schema, testerContext]
     );
     if (
@@ -142,7 +154,7 @@ const TestAndRender = React.memo(
 /**
  * @deprecated Since Version 3.0 this optimization renderer is no longer necessary.
  * Use `JsonFormsDispatch` instead.
- * We still export it for backward compatibility 
+ * We still export it for backward compatibility
  */
 export class ResolvedJsonFormsDispatchRenderer extends JsonFormsDispatchRenderer {
   constructor(props: JsonFormsProps) {
@@ -156,7 +168,7 @@ export const JsonFormsDispatch: ComponentType<OwnPropsOfJsonFormsRenderer> =
 /**
  * @deprecated Since Version 3.0 this optimization component is no longer necessary.
  * Use `JsonFormsDispatch` instead.
- * We still export it for backward compatibility 
+ * We still export it for backward compatibility
  */
 export const ResolvedJsonFormsDispatch: ComponentType<OwnPropsOfJsonFormsRenderer> =
   withJsonFormsRendererProps(ResolvedJsonFormsDispatchRenderer);
@@ -192,7 +204,7 @@ export const JsonForms = (
     readonly,
     validationMode,
     i18n,
-    additionalErrors
+    additionalErrors,
   } = props;
   const schemaToUse = useMemo(
     () => (schema !== undefined ? schema : Generate.jsonSchema(data)),
@@ -213,14 +225,14 @@ export const JsonForms = (
           schema: schemaToUse,
           uischema: uischemaToUse,
           validationMode: validationMode,
-          additionalErrors: additionalErrors
+          additionalErrors: additionalErrors,
         },
         config,
         uischemas,
         renderers,
         cells,
         readonly,
-        i18n
+        i18n,
       }}
       onChange={onChange}
     >
diff --git a/packages/react/src/JsonFormsContext.tsx b/packages/react/src/JsonFormsContext.tsx
index 6567b71a1..be05d4fd0 100644
--- a/packages/react/src/JsonFormsContext.tsx
+++ b/packages/react/src/JsonFormsContext.tsx
@@ -74,10 +74,20 @@ import {
   defaultJsonFormsI18nState,
   OwnPropsOfLabel,
   LabelProps,
-  mapStateToLabelProps
+  mapStateToLabelProps,
 } from '@jsonforms/core';
 import debounce from 'lodash/debounce';
-import React, { ComponentType, Dispatch, ReducerAction, useCallback, useContext, useEffect, useMemo, useReducer, useRef } from 'react';
+import React, {
+  ComponentType,
+  Dispatch,
+  ReducerAction,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useReducer,
+  useRef,
+} from 'react';
 
 const initialCoreState: JsonFormsCore = {
   data: {},
@@ -95,7 +105,7 @@ export interface JsonFormsStateContext extends JsonFormsSubStates {
 
 export const JsonFormsContext = React.createContext<JsonFormsStateContext>({
   core: initialCoreState,
-  renderers: []
+  renderers: [],
 });
 
 /**
@@ -116,57 +126,87 @@ const useEffectAfterFirstRender = (
   }, dependencies);
 };
 
-export const JsonFormsStateProvider = ({ children, initState, onChange }: any) => {
-  const { data, schema, uischema, ajv, validationMode, additionalErrors } = initState.core;
-  
-  const [core, coreDispatch] = useReducer(
-    coreReducer,
-    undefined,
-    () => coreReducer(
+export const JsonFormsStateProvider = ({
+  children,
+  initState,
+  onChange,
+}: any) => {
+  const { data, schema, uischema, ajv, validationMode, additionalErrors } =
+    initState.core;
+
+  const [core, coreDispatch] = useReducer(coreReducer, undefined, () =>
+    coreReducer(
       initState.core,
-      Actions.init(data, schema, uischema, { ajv, validationMode, additionalErrors })
+      Actions.init(data, schema, uischema, {
+        ajv,
+        validationMode,
+        additionalErrors,
+      })
     )
   );
   useEffect(() => {
     coreDispatch(
-      Actions.updateCore(data, schema, uischema, { ajv, validationMode, additionalErrors })
+      Actions.updateCore(data, schema, uischema, {
+        ajv,
+        validationMode,
+        additionalErrors,
+      })
     );
   }, [data, schema, uischema, ajv, validationMode, additionalErrors]);
 
-  const [config, configDispatch] = useReducer(
-    configReducer,
-    undefined,
-    () => configReducer(undefined, Actions.setConfig(initState.config))
+  const [config, configDispatch] = useReducer(configReducer, undefined, () =>
+    configReducer(undefined, Actions.setConfig(initState.config))
   );
   useEffectAfterFirstRender(() => {
     configDispatch(Actions.setConfig(initState.config));
   }, [initState.config]);
 
-  const [i18n, i18nDispatch] = useReducer(
-    i18nReducer,
-    undefined,
-    () => i18nReducer(
+  const [i18n, i18nDispatch] = useReducer(i18nReducer, undefined, () =>
+    i18nReducer(
       initState.i18n,
-      Actions.updateI18n(initState.i18n?.locale, initState.i18n?.translate, initState.i18n?.translateError)
+      Actions.updateI18n(
+        initState.i18n?.locale,
+        initState.i18n?.translate,
+        initState.i18n?.translateError
+      )
     )
   );
   useEffect(() => {
     i18nDispatch(
-      Actions.updateI18n(initState.i18n?.locale, initState.i18n?.translate, initState.i18n?.translateError)
+      Actions.updateI18n(
+        initState.i18n?.locale,
+        initState.i18n?.translate,
+        initState.i18n?.translateError
+      )
     );
-  }, [initState.i18n?.locale, initState.i18n?.translate, initState.i18n?.translateError]);
-
-  const contextValue = useMemo(() => ({
-    core,
-    renderers: initState.renderers,
-    cells: initState.cells,
-    config: config,
-    uischemas: initState.uischemas,
-    readonly: initState.readonly,
-    i18n: i18n,
-    // only core dispatch available
-    dispatch: coreDispatch,
-  }), [core, initState.renderers, initState.cells, config, initState.uischemas, initState.readonly, i18n]);
+  }, [
+    initState.i18n?.locale,
+    initState.i18n?.translate,
+    initState.i18n?.translateError,
+  ]);
+
+  const contextValue = useMemo(
+    () => ({
+      core,
+      renderers: initState.renderers,
+      cells: initState.cells,
+      config: config,
+      uischemas: initState.uischemas,
+      readonly: initState.readonly,
+      i18n: i18n,
+      // only core dispatch available
+      dispatch: coreDispatch,
+    }),
+    [
+      core,
+      initState.renderers,
+      initState.cells,
+      config,
+      initState.uischemas,
+      initState.readonly,
+      i18n,
+    ]
+  );
 
   const onChangeRef = useRef(onChange);
   useEffect(() => {
@@ -176,31 +216,32 @@ export const JsonFormsStateProvider = ({ children, initState, onChange }: any) =
   /**
    * A common pattern for users of JSON Forms is to feed back the data which is emitted by
    * JSON Forms to JSON Forms ('controlled style').
-   * 
+   *
    * Every time this happens, we dispatch the 'updateCore' action which will be a no-op when
    * the data handed over is the one which was just recently emitted. This allows us to skip
    * rerendering for all normal cases of use.
-   * 
+   *
    * However there can be extreme use cases, for example when using Chrome Auto-fill for forms,
    * which can cause JSON Forms to emit multiple change events before the parent component is
    * rerendered. Therefore not the very recent data, but the previous data is fed back to
    * JSON Forms first. JSON Forms recognizes that this is not the very recent data and will
    * validate, rerender and emit a change event again. This can then lead to data loss or even
    * an endless rerender loop, depending on the emitted events chain.
-   * 
+   *
    * To handle these edge cases in which many change events are sent in an extremely short amount
    * of time we debounce them over a short amount of time. 10ms was chosen as this worked well
    * even on low-end mobile device settings in the Chrome simulator.
    */
-  const debouncedEmit = useCallback(debounce((...args) => onChangeRef.current?.(...args), 10), []);
+  const debouncedEmit = useCallback(
+    debounce((...args) => onChangeRef.current?.(...args), 10),
+    []
+  );
   useEffect(() => {
     debouncedEmit({ data: core.data, errors: core.errors });
   }, [core.data, core.errors]);
 
   return (
-    <JsonFormsContext.Provider
-      value={contextValue}
-    >
+    <JsonFormsContext.Provider value={contextValue}>
       {children}
     </JsonFormsContext.Provider>
   );
@@ -214,47 +255,82 @@ export interface JsonFormsReduxContextProps extends JsonFormsSubStates {
   dispatch: Dispatch<ReducerAction<any>>;
 }
 
-export const ctxToArrayLayoutProps = (ctx: JsonFormsStateContext, props: OwnPropsOfControl) =>
-  mapStateToArrayLayoutProps({ jsonforms: { ...ctx } }, props);
+export const ctxToArrayLayoutProps = (
+  ctx: JsonFormsStateContext,
+  props: OwnPropsOfControl
+) => mapStateToArrayLayoutProps({ jsonforms: { ...ctx } }, props);
 
-export const ctxToArrayControlProps = (ctx: JsonFormsStateContext, props: OwnPropsOfControl) =>
-  mapStateToArrayControlProps({ jsonforms: { ...ctx } }, props);
+export const ctxToArrayControlProps = (
+  ctx: JsonFormsStateContext,
+  props: OwnPropsOfControl
+) => mapStateToArrayControlProps({ jsonforms: { ...ctx } }, props);
 
-export const ctxToLayoutProps = (ctx: JsonFormsStateContext, props: OwnPropsOfLayout): LayoutProps =>
-  mapStateToLayoutProps({ jsonforms: { ...ctx } }, props);
+export const ctxToLayoutProps = (
+  ctx: JsonFormsStateContext,
+  props: OwnPropsOfLayout
+): LayoutProps => mapStateToLayoutProps({ jsonforms: { ...ctx } }, props);
 
-export const ctxToControlProps = (ctx: JsonFormsStateContext, props: OwnPropsOfControl) =>
-  mapStateToControlProps({ jsonforms: { ...ctx } }, props);
+export const ctxToControlProps = (
+  ctx: JsonFormsStateContext,
+  props: OwnPropsOfControl
+) => mapStateToControlProps({ jsonforms: { ...ctx } }, props);
 
-export const ctxToEnumControlProps = (ctx: JsonFormsStateContext, props: OwnPropsOfEnum) => {
-  const enumProps = mapStateToEnumControlProps({ jsonforms: { ...ctx } }, props);
+export const ctxToEnumControlProps = (
+  ctx: JsonFormsStateContext,
+  props: OwnPropsOfEnum
+) => {
+  const enumProps = mapStateToEnumControlProps(
+    { jsonforms: { ...ctx } },
+    props
+  );
   /**
-   * Make sure, that options are memoized as otherwise the component will rerender for every change, 
+   * Make sure, that options are memoized as otherwise the component will rerender for every change,
    * as the options array is recreated every time.
    */
-  const options = useMemo(() => enumProps.options, [props.options, enumProps.schema, ctx.i18n?.translate]);
-  return {...enumProps, options}
-}
+  const options = useMemo(
+    () => enumProps.options,
+    [props.options, enumProps.schema, ctx.i18n?.translate]
+  );
+  return { ...enumProps, options };
+};
 
-export const ctxToOneOfEnumControlProps = (ctx: JsonFormsStateContext, props: OwnPropsOfControl & OwnPropsOfEnum) => {
-  const enumProps = mapStateToOneOfEnumControlProps({ jsonforms: { ...ctx } }, props);
+export const ctxToOneOfEnumControlProps = (
+  ctx: JsonFormsStateContext,
+  props: OwnPropsOfControl & OwnPropsOfEnum
+) => {
+  const enumProps = mapStateToOneOfEnumControlProps(
+    { jsonforms: { ...ctx } },
+    props
+  );
   /**
-   * Make sure, that options are memoized as otherwise the component will rerender for every change, 
+   * Make sure, that options are memoized as otherwise the component will rerender for every change,
    * as the options array is recreated every time.
    */
-  const options = useMemo(() => enumProps.options, [props.options, enumProps.schema, ctx.i18n?.translate]);
-  return {...enumProps, options}
-}
+  const options = useMemo(
+    () => enumProps.options,
+    [props.options, enumProps.schema, ctx.i18n?.translate]
+  );
+  return { ...enumProps, options };
+};
 
-export const ctxToMultiEnumControlProps = (ctx: JsonFormsStateContext, props: OwnPropsOfControl) => {
-  const enumProps = mapStateToMultiEnumControlProps({ jsonforms: { ...ctx } }, props);
+export const ctxToMultiEnumControlProps = (
+  ctx: JsonFormsStateContext,
+  props: OwnPropsOfControl
+) => {
+  const enumProps = mapStateToMultiEnumControlProps(
+    { jsonforms: { ...ctx } },
+    props
+  );
   /**
-   * Make sure, that options are memoized as otherwise the component will rerender for every change, 
+   * Make sure, that options are memoized as otherwise the component will rerender for every change,
    * as the options array is recreated every time.
    */
-  const options = useMemo(() => enumProps.options, [enumProps.schema, ctx.i18n?.translate]);
-  return {...enumProps, options}
-}
+  const options = useMemo(
+    () => enumProps.options,
+    [enumProps.schema, ctx.i18n?.translate]
+  );
+  return { ...enumProps, options };
+};
 
 export const ctxToControlWithDetailProps = (
   ctx: JsonFormsStateContext,
@@ -268,11 +344,13 @@ export const ctxToAllOfProps = (
 ) => {
   const props = mapStateToAllOfProps({ jsonforms: { ...ctx } }, ownProps);
   return {
-    ...props
+    ...props,
   };
 };
 
-export const ctxDispatchToControlProps = (dispatch: Dispatch<ReducerAction<any>>): DispatchPropsOfControl =>
+export const ctxDispatchToControlProps = (
+  dispatch: Dispatch<ReducerAction<any>>
+): DispatchPropsOfControl =>
   useMemo(() => mapDispatchToControlProps(dispatch as any), [dispatch]);
 
 // context mappers
@@ -285,7 +363,7 @@ export const ctxToAnyOfProps = (
   const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
   return {
     ...props,
-    ...dispatchProps
+    ...dispatchProps,
   };
 };
 
@@ -297,7 +375,7 @@ export const ctxToOneOfProps = (
   const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
   return {
     ...props,
-    ...dispatchProps
+    ...dispatchProps,
   };
 };
 
@@ -306,9 +384,11 @@ export const ctxToJsonFormsRendererProps = (
   ownProps: OwnPropsOfJsonFormsRenderer
 ) => mapStateToJsonFormsRendererProps({ jsonforms: { ...ctx } }, ownProps);
 
-export const ctxDispatchToArrayControlProps = (dispatch: Dispatch<ReducerAction<any>>) => ({
-    ...ctxDispatchToControlProps(dispatch),
-    ...useMemo(() => mapDispatchToArrayControlProps(dispatch as any), [dispatch])
+export const ctxDispatchToArrayControlProps = (
+  dispatch: Dispatch<ReducerAction<any>>
+) => ({
+  ...ctxDispatchToControlProps(dispatch),
+  ...useMemo(() => mapDispatchToArrayControlProps(dispatch as any), [dispatch]),
 });
 
 export const ctxToMasterListItemProps = (
@@ -327,26 +407,38 @@ export const ctxToEnumCellProps = (
   ctx: JsonFormsStateContext,
   ownProps: EnumCellProps
 ) => {
-  const cellProps =  defaultMapStateToEnumCellProps({ jsonforms: { ...ctx } }, ownProps);
+  const cellProps = defaultMapStateToEnumCellProps(
+    { jsonforms: { ...ctx } },
+    ownProps
+  );
   /**
-   * Make sure, that options are memoized as otherwise the cell will rerender for every change, 
+   * Make sure, that options are memoized as otherwise the cell will rerender for every change,
    * as the options array is recreated every time.
    */
-  const options = useMemo(() => cellProps.options, [ownProps.options, cellProps.schema, ctx.i18n?.translate]);
-  return {...cellProps, options}
+  const options = useMemo(
+    () => cellProps.options,
+    [ownProps.options, cellProps.schema, ctx.i18n?.translate]
+  );
+  return { ...cellProps, options };
 };
 
 export const ctxToOneOfEnumCellProps = (
   ctx: JsonFormsStateContext,
   props: OwnPropsOfEnumCell
 ) => {
-  const enumCellProps = mapStateToOneOfEnumCellProps({jsonforms: {...ctx}}, props);
+  const enumCellProps = mapStateToOneOfEnumCellProps(
+    { jsonforms: { ...ctx } },
+    props
+  );
   /**
-   * Make sure, that options are memoized as otherwise the cell will rerender for every change, 
+   * Make sure, that options are memoized as otherwise the cell will rerender for every change,
    * as the options array is recreated every time.
    */
-  const options = useMemo(() => enumCellProps.options, [props.options, enumCellProps.schema, ctx.i18n?.translate])
-  return {...enumCellProps, options};
+  const options = useMemo(
+    () => enumCellProps.options,
+    [props.options, enumCellProps.schema, ctx.i18n?.translate]
+  );
+  return { ...enumCellProps, options };
 };
 
 export const ctxToDispatchCellProps = (
@@ -356,9 +448,11 @@ export const ctxToDispatchCellProps = (
   return mapStateToDispatchCellProps({ jsonforms: { ...ctx } }, ownProps);
 };
 
-export const ctxDispatchToMultiEnumProps = (dispatch: Dispatch<ReducerAction<any>>) => ({
-    ...ctxDispatchToControlProps(dispatch),
-    ...useMemo(() => mapDispatchToMultiEnumProps(dispatch as any), [dispatch])
+export const ctxDispatchToMultiEnumProps = (
+  dispatch: Dispatch<ReducerAction<any>>
+) => ({
+  ...ctxDispatchToControlProps(dispatch),
+  ...useMemo(() => mapDispatchToMultiEnumProps(dispatch as any), [dispatch]),
 });
 
 export const ctxToLabelProps = (
@@ -366,7 +460,7 @@ export const ctxToLabelProps = (
   ownProps: OwnPropsOfLabel
 ) => {
   return mapStateToLabelProps({ jsonforms: { ...ctx } }, ownProps);
-}
+};
 
 // --
 
@@ -377,103 +471,121 @@ interface WithContext {
 }
 
 export const withJsonFormsContext =
-  (Component: ComponentType<WithContext & any>): ComponentType<any> => (props: any) => {
+  (Component: ComponentType<WithContext & any>): ComponentType<any> =>
+  (props: any) => {
     const ctx = useJsonForms();
     return <Component ctx={ctx} props={props} />;
   };
 
 export const withContextToJsonFormsRendererProps =
-  (Component: ComponentType<JsonFormsProps>): ComponentType<OwnPropsOfJsonFormsRenderer> =>
-    ({ ctx, props }: JsonFormsStateContext & JsonFormsProps) => {
-      const contextProps = ctxToJsonFormsRendererProps(ctx, props)
-      return (<Component {...props} {...contextProps} />)
-    };
+  (
+    Component: ComponentType<JsonFormsProps>
+  ): ComponentType<OwnPropsOfJsonFormsRenderer> =>
+  ({ ctx, props }: JsonFormsStateContext & JsonFormsProps) => {
+    const contextProps = ctxToJsonFormsRendererProps(ctx, props);
+    return <Component {...props} {...contextProps} />;
+  };
 
 const withContextToControlProps =
   (Component: ComponentType<ControlProps>): ComponentType<OwnPropsOfControl> =>
-    ({ ctx, props }: JsonFormsStateContext & ControlProps) => {
-      const controlProps = ctxToControlProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      return (<Component {...props} {...controlProps} {...dispatchProps} />);
-    };
+  ({ ctx, props }: JsonFormsStateContext & ControlProps) => {
+    const controlProps = ctxToControlProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+    return <Component {...props} {...controlProps} {...dispatchProps} />;
+  };
 
 const withContextToLayoutProps =
-  (Component: ComponentType<LayoutProps>): ComponentType<OwnPropsOfJsonFormsRenderer> =>
-    ({ ctx, props }: JsonFormsStateContext & LayoutProps) => {
-      const layoutProps = ctxToLayoutProps(ctx, props);
-      return (<Component {...props} {...layoutProps} />);
-    };
+  (
+    Component: ComponentType<LayoutProps>
+  ): ComponentType<OwnPropsOfJsonFormsRenderer> =>
+  ({ ctx, props }: JsonFormsStateContext & LayoutProps) => {
+    const layoutProps = ctxToLayoutProps(ctx, props);
+    return <Component {...props} {...layoutProps} />;
+  };
 
 const withContextToOneOfProps =
-  (Component: ComponentType<CombinatorRendererProps>): ComponentType<OwnPropsOfControl> =>
-    ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
-      const oneOfProps = ctxToOneOfProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      return (<Component {...props} {...oneOfProps} {...dispatchProps} />);
-    };
+  (
+    Component: ComponentType<CombinatorRendererProps>
+  ): ComponentType<OwnPropsOfControl> =>
+  ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
+    const oneOfProps = ctxToOneOfProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+    return <Component {...props} {...oneOfProps} {...dispatchProps} />;
+  };
 
 const withContextToAnyOfProps =
-  (Component: ComponentType<CombinatorRendererProps>): ComponentType<OwnPropsOfControl> =>
-    ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
-      const oneOfProps = ctxToAnyOfProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      return (<Component {...props} {...oneOfProps} {...dispatchProps} />);
-    };
+  (
+    Component: ComponentType<CombinatorRendererProps>
+  ): ComponentType<OwnPropsOfControl> =>
+  ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
+    const oneOfProps = ctxToAnyOfProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+    return <Component {...props} {...oneOfProps} {...dispatchProps} />;
+  };
 
 const withContextToAllOfProps =
-  (Component: ComponentType<CombinatorRendererProps>): ComponentType<OwnPropsOfControl> =>
-    ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
-      const allOfProps = ctxToAllOfProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      return (<Component {...props} {...allOfProps} {...dispatchProps} />);
-    };
+  (
+    Component: ComponentType<CombinatorRendererProps>
+  ): ComponentType<OwnPropsOfControl> =>
+  ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
+    const allOfProps = ctxToAllOfProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+    return <Component {...props} {...allOfProps} {...dispatchProps} />;
+  };
 
 const withContextToDetailProps =
-  (Component: ComponentType<StatePropsOfControlWithDetail>): ComponentType<OwnPropsOfControl> =>
-    ({ ctx, props }: JsonFormsStateContext & StatePropsOfControlWithDetail) => {
-      const detailProps = ctxToControlWithDetailProps(ctx, props);
-      return (<Component {...props} {...detailProps} />);
-    };
+  (
+    Component: ComponentType<StatePropsOfControlWithDetail>
+  ): ComponentType<OwnPropsOfControl> =>
+  ({ ctx, props }: JsonFormsStateContext & StatePropsOfControlWithDetail) => {
+    const detailProps = ctxToControlWithDetailProps(ctx, props);
+    return <Component {...props} {...detailProps} />;
+  };
 
 const withContextToArrayLayoutProps =
-  (Component: ComponentType<ArrayLayoutProps>): ComponentType<OwnPropsOfControl> =>
-    ({ ctx, props }: JsonFormsStateContext & ArrayLayoutProps) => {
-      const arrayLayoutProps = ctxToArrayLayoutProps(ctx, props);
-      const dispatchProps = ctxDispatchToArrayControlProps(ctx.dispatch);
-      return (<Component {...props} {...arrayLayoutProps} {...dispatchProps} />);
-    };
+  (
+    Component: ComponentType<ArrayLayoutProps>
+  ): ComponentType<OwnPropsOfControl> =>
+  ({ ctx, props }: JsonFormsStateContext & ArrayLayoutProps) => {
+    const arrayLayoutProps = ctxToArrayLayoutProps(ctx, props);
+    const dispatchProps = ctxDispatchToArrayControlProps(ctx.dispatch);
+    return <Component {...props} {...arrayLayoutProps} {...dispatchProps} />;
+  };
 
 const withContextToArrayControlProps =
-  (Component: ComponentType<ArrayControlProps>): ComponentType<OwnPropsOfControl> =>
-    ({ ctx, props }: JsonFormsStateContext & ArrayControlProps) => {
-      const stateProps = ctxToArrayControlProps(ctx, props);
-      const dispatchProps = ctxDispatchToArrayControlProps(ctx.dispatch);
-
-      return (<Component {...props} {...stateProps} {...dispatchProps} />);
-    };
+  (
+    Component: ComponentType<ArrayControlProps>
+  ): ComponentType<OwnPropsOfControl> =>
+  ({ ctx, props }: JsonFormsStateContext & ArrayControlProps) => {
+    const stateProps = ctxToArrayControlProps(ctx, props);
+    const dispatchProps = ctxDispatchToArrayControlProps(ctx.dispatch);
+
+    return <Component {...props} {...stateProps} {...dispatchProps} />;
+  };
 
 const withContextToMasterListItemProps =
-  (Component: ComponentType<StatePropsOfMasterItem>): ComponentType<OwnPropsOfMasterListItem> =>
-    ({ ctx, props }: JsonFormsStateContext & StatePropsOfMasterItem) => {
-      const stateProps = ctxToMasterListItemProps(ctx, props);
-      return (<Component {...props} {...stateProps} />);
-    };
+  (
+    Component: ComponentType<StatePropsOfMasterItem>
+  ): ComponentType<OwnPropsOfMasterListItem> =>
+  ({ ctx, props }: JsonFormsStateContext & StatePropsOfMasterItem) => {
+    const stateProps = ctxToMasterListItemProps(ctx, props);
+    return <Component {...props} {...stateProps} />;
+  };
 
 const withContextToCellProps =
   (Component: ComponentType<CellProps>): ComponentType<OwnPropsOfCell> =>
-    ({ ctx, props }: JsonFormsStateContext & CellProps) => {
-      const cellProps = ctxToCellProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-
-      return (<Component {...props} {...dispatchProps} {...cellProps} />);
-    };
-
-const withContextToDispatchCellProps = (
-  Component: ComponentType<DispatchCellProps>
-): ComponentType<OwnPropsOfCell> => ({
-  ctx,
-  props
-}: JsonFormsStateContext & CellProps) => {
+  ({ ctx, props }: JsonFormsStateContext & CellProps) => {
+    const cellProps = ctxToCellProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+
+    return <Component {...props} {...dispatchProps} {...cellProps} />;
+  };
+
+const withContextToDispatchCellProps =
+  (
+    Component: ComponentType<DispatchCellProps>
+  ): ComponentType<OwnPropsOfCell> =>
+  ({ ctx, props }: JsonFormsStateContext & CellProps) => {
     const cellProps = ctxToDispatchCellProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
 
@@ -481,130 +593,218 @@ const withContextToDispatchCellProps = (
   };
 
 const withContextToEnumCellProps =
-  (Component: ComponentType<EnumCellProps>): ComponentType<OwnPropsOfEnumCell> =>
-    ({ ctx, props }: JsonFormsStateContext & EnumCellProps) => {
-      const cellProps = ctxToEnumCellProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      return (<Component {...props} {...dispatchProps} {...cellProps}/>);
-    };
+  (
+    Component: ComponentType<EnumCellProps>
+  ): ComponentType<OwnPropsOfEnumCell> =>
+  ({ ctx, props }: JsonFormsStateContext & EnumCellProps) => {
+    const cellProps = ctxToEnumCellProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+    return <Component {...props} {...dispatchProps} {...cellProps} />;
+  };
 
 const withContextToEnumProps =
-  (Component: ComponentType<ControlProps & OwnPropsOfEnum>): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
-    ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
-      const stateProps = ctxToEnumControlProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      
-      return (<Component {...props} {...dispatchProps} {...stateProps} />);
-    };
+  (
+    Component: ComponentType<ControlProps & OwnPropsOfEnum>
+  ): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+  ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
+    const stateProps = ctxToEnumControlProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+
+    return <Component {...props} {...dispatchProps} {...stateProps} />;
+  };
 
 const withContextToOneOfEnumCellProps =
-  (Component: ComponentType<EnumCellProps>): ComponentType<OwnPropsOfEnumCell> =>
-    ({ ctx, props }: JsonFormsStateContext & EnumCellProps) => {
-      const cellProps = ctxToOneOfEnumCellProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      return (<Component {...props} {...dispatchProps} {...cellProps} />);
-    };
+  (
+    Component: ComponentType<EnumCellProps>
+  ): ComponentType<OwnPropsOfEnumCell> =>
+  ({ ctx, props }: JsonFormsStateContext & EnumCellProps) => {
+    const cellProps = ctxToOneOfEnumCellProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+    return <Component {...props} {...dispatchProps} {...cellProps} />;
+  };
 
 const withContextToOneOfEnumProps =
-  (Component: ComponentType<ControlProps & OwnPropsOfEnum>): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
-    ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
-      const stateProps = ctxToOneOfEnumControlProps(ctx, props);
-      const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
-      return (<Component {...props} {...dispatchProps} {...stateProps} />);
-    };
+  (
+    Component: ComponentType<ControlProps & OwnPropsOfEnum>
+  ): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+  ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
+    const stateProps = ctxToOneOfEnumControlProps(ctx, props);
+    const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
+    return <Component {...props} {...dispatchProps} {...stateProps} />;
+  };
 
 const withContextToMultiEnumProps =
-(Component: ComponentType<ControlProps & OwnPropsOfEnum>): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+  (
+    Component: ComponentType<ControlProps & OwnPropsOfEnum>
+  ): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
   ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
     const stateProps = ctxToMultiEnumControlProps(ctx, props);
     const dispatchProps = ctxDispatchToMultiEnumProps(ctx.dispatch);
-    return (<Component {...props} {...dispatchProps} {...stateProps} />);
+    return <Component {...props} {...dispatchProps} {...stateProps} />;
   };
 
 const withContextToLabelProps =
-(Component: ComponentType<LabelProps>): ComponentType<OwnPropsOfLabel> =>
+  (Component: ComponentType<LabelProps>): ComponentType<OwnPropsOfLabel> =>
   ({ ctx, props }: JsonFormsStateContext & LabelProps & OwnPropsOfLabel) => {
     const stateProps = ctxToLabelProps(ctx, props);
-    return (<Component {...props} {...stateProps} />);
+    return <Component {...props} {...stateProps} />;
   };
 
 // --
 
 // top level HOCs --
 
-export const withJsonFormsRendererProps =
-  (Component: ComponentType<JsonFormsProps>, memoize = true): ComponentType<OwnPropsOfJsonFormsRenderer> =>
-  withJsonFormsContext(withContextToJsonFormsRendererProps(memoize ? React.memo(Component): Component));
+export const withJsonFormsRendererProps = (
+  Component: ComponentType<JsonFormsProps>,
+  memoize = true
+): ComponentType<OwnPropsOfJsonFormsRenderer> =>
+  withJsonFormsContext(
+    withContextToJsonFormsRendererProps(
+      memoize ? React.memo(Component) : Component
+    )
+  );
 
-export const withJsonFormsControlProps =
-  (Component: ComponentType<ControlProps>, memoize = true): ComponentType<OwnPropsOfControl> =>
-  withJsonFormsContext(withContextToControlProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsControlProps = (
+  Component: ComponentType<ControlProps>,
+  memoize = true
+): ComponentType<OwnPropsOfControl> =>
+  withJsonFormsContext(
+    withContextToControlProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsLayoutProps = <T extends LayoutProps>
-  (Component: ComponentType<T>, memoize = true): ComponentType<T & OwnPropsOfLayout> =>
-    withJsonFormsContext(withContextToLayoutProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsLayoutProps = <T extends LayoutProps>(
+  Component: ComponentType<T>,
+  memoize = true
+): ComponentType<T & OwnPropsOfLayout> =>
+  withJsonFormsContext(
+    withContextToLayoutProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsOneOfProps =
-  (Component: ComponentType<CombinatorRendererProps>, memoize = true): ComponentType<OwnPropsOfControl> =>
-    withJsonFormsContext(withContextToOneOfProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsOneOfProps = (
+  Component: ComponentType<CombinatorRendererProps>,
+  memoize = true
+): ComponentType<OwnPropsOfControl> =>
+  withJsonFormsContext(
+    withContextToOneOfProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsAnyOfProps =
-  (Component: ComponentType<CombinatorRendererProps>, memoize = true): ComponentType<OwnPropsOfControl> =>
-    withJsonFormsContext(withContextToAnyOfProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsAnyOfProps = (
+  Component: ComponentType<CombinatorRendererProps>,
+  memoize = true
+): ComponentType<OwnPropsOfControl> =>
+  withJsonFormsContext(
+    withContextToAnyOfProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsAllOfProps =
-  (Component: ComponentType<CombinatorRendererProps>, memoize = true): ComponentType<OwnPropsOfControl> =>
-    withJsonFormsContext(withContextToAllOfProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsAllOfProps = (
+  Component: ComponentType<CombinatorRendererProps>,
+  memoize = true
+): ComponentType<OwnPropsOfControl> =>
+  withJsonFormsContext(
+    withContextToAllOfProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsDetailProps =
-  (Component: ComponentType<StatePropsOfControlWithDetail>, memoize = true): ComponentType<OwnPropsOfControl> =>
-    withJsonFormsContext(withContextToDetailProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsDetailProps = (
+  Component: ComponentType<StatePropsOfControlWithDetail>,
+  memoize = true
+): ComponentType<OwnPropsOfControl> =>
+  withJsonFormsContext(
+    withContextToDetailProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsArrayLayoutProps =
-  (Component: ComponentType<ArrayLayoutProps>, memoize = true): ComponentType<OwnPropsOfControl> =>
-    withJsonFormsContext(withContextToArrayLayoutProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsArrayLayoutProps = (
+  Component: ComponentType<ArrayLayoutProps>,
+  memoize = true
+): ComponentType<OwnPropsOfControl> =>
+  withJsonFormsContext(
+    withContextToArrayLayoutProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsArrayControlProps =
-  (Component: ComponentType<ArrayControlProps>, memoize = true): ComponentType<OwnPropsOfControl> =>
-    withJsonFormsContext(withContextToArrayControlProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsArrayControlProps = (
+  Component: ComponentType<ArrayControlProps>,
+  memoize = true
+): ComponentType<OwnPropsOfControl> =>
+  withJsonFormsContext(
+    withContextToArrayControlProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsMasterListItemProps =
-  (Component: ComponentType<StatePropsOfMasterItem>, memoize = true): ComponentType<OwnPropsOfMasterListItem> =>
-    withJsonFormsContext(withContextToMasterListItemProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsMasterListItemProps = (
+  Component: ComponentType<StatePropsOfMasterItem>,
+  memoize = true
+): ComponentType<OwnPropsOfMasterListItem> =>
+  withJsonFormsContext(
+    withContextToMasterListItemProps(
+      memoize ? React.memo(Component) : Component
+    )
+  );
 
-export const withJsonFormsCellProps =
-  (Component: ComponentType<CellProps>, memoize = true): ComponentType<OwnPropsOfCell> =>
-    withJsonFormsContext(withContextToCellProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsCellProps = (
+  Component: ComponentType<CellProps>,
+  memoize = true
+): ComponentType<OwnPropsOfCell> =>
+  withJsonFormsContext(
+    withContextToCellProps(memoize ? React.memo(Component) : Component)
+  );
 
 export const withJsonFormsDispatchCellProps = (
-  Component: ComponentType<DispatchCellProps>, memoize = true
+  Component: ComponentType<DispatchCellProps>,
+  memoize = true
 ): ComponentType<OwnPropsOfCell> =>
-  withJsonFormsContext(withContextToDispatchCellProps(memoize ? React.memo(Component) : Component));
+  withJsonFormsContext(
+    withContextToDispatchCellProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsEnumCellProps =
-  (Component: ComponentType<EnumCellProps>, memoize = true): ComponentType<OwnPropsOfEnumCell> =>
-    withJsonFormsContext(withContextToEnumCellProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsEnumCellProps = (
+  Component: ComponentType<EnumCellProps>,
+  memoize = true
+): ComponentType<OwnPropsOfEnumCell> =>
+  withJsonFormsContext(
+    withContextToEnumCellProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsEnumProps =
-  (Component: ComponentType<ControlProps & OwnPropsOfEnum>, memoize = true): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
-    withJsonFormsContext(withContextToEnumProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsEnumProps = (
+  Component: ComponentType<ControlProps & OwnPropsOfEnum>,
+  memoize = true
+): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+  withJsonFormsContext(
+    withContextToEnumProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsOneOfEnumCellProps =
-  (Component: ComponentType<EnumCellProps>, memoize = true): ComponentType<OwnPropsOfEnumCell> =>
-    withJsonFormsContext(withContextToOneOfEnumCellProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsOneOfEnumCellProps = (
+  Component: ComponentType<EnumCellProps>,
+  memoize = true
+): ComponentType<OwnPropsOfEnumCell> =>
+  withJsonFormsContext(
+    withContextToOneOfEnumCellProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsOneOfEnumProps =
-  (Component: ComponentType<ControlProps & OwnPropsOfEnum>, memoize = true): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
-    withJsonFormsContext(withContextToOneOfEnumProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsOneOfEnumProps = (
+  Component: ComponentType<ControlProps & OwnPropsOfEnum>,
+  memoize = true
+): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+  withJsonFormsContext(
+    withContextToOneOfEnumProps(memoize ? React.memo(Component) : Component)
+  );
 
 export const withJsonFormsMultiEnumProps = (
-  Component: ComponentType<ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl>, memoize = true
-): ComponentType<OwnPropsOfControl & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl> =>
-  withJsonFormsContext(withContextToMultiEnumProps(memoize ? React.memo(Component) : Component));
+  Component: ComponentType<
+    ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl
+  >,
+  memoize = true
+): ComponentType<
+  OwnPropsOfControl & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl
+> =>
+  withJsonFormsContext(
+    withContextToMultiEnumProps(memoize ? React.memo(Component) : Component)
+  );
 
-export const withJsonFormsLabelProps =
-  (Component: ComponentType<LabelProps & OwnPropsOfEnum>, memoize = true): ComponentType<OwnPropsOfLabel> =>
-    withJsonFormsContext(withContextToLabelProps(memoize ? React.memo(Component) : Component));
+export const withJsonFormsLabelProps = (
+  Component: ComponentType<LabelProps & OwnPropsOfEnum>,
+  memoize = true
+): ComponentType<OwnPropsOfLabel> =>
+  withJsonFormsContext(
+    withContextToLabelProps(memoize ? React.memo(Component) : Component)
+  );
 
 // Util HOCs
 
@@ -613,11 +813,12 @@ export interface TranslateProps {
   locale: string;
 }
 
-export const withTranslateProps = <P extends {}>(Component: ComponentType<TranslateProps & P>) =>
+export const withTranslateProps =
+  <P extends {}>(Component: ComponentType<TranslateProps & P>) =>
   (props: P) => {
     const ctx = useJsonForms();
     const locale = ctx.i18n?.locale ?? defaultJsonFormsI18nState.locale;
     const t = ctx.i18n?.translate ?? defaultJsonFormsI18nState.translate;
 
-    return (<Component {...props} locale={locale} t={t} />);
+    return <Component {...props} locale={locale} t={t} />;
   };
diff --git a/packages/react/src/Renderer.tsx b/packages/react/src/Renderer.tsx
index 504ac43b4..a0e1b4cc1 100644
--- a/packages/react/src/Renderer.tsx
+++ b/packages/react/src/Renderer.tsx
@@ -31,7 +31,10 @@ import type { RendererProps } from '@jsonforms/core';
  * @template P type of any renderer props
  * @template S state of the Renderer
  */
-export class RendererComponent<P extends RendererProps, S = {}> extends React.Component<P, S> {
+export class RendererComponent<
+  P extends RendererProps,
+  S = {}
+> extends React.Component<P, S> {
   constructor(props: P) {
     super(props);
   }
@@ -42,12 +45,12 @@ export class RendererComponent<P extends RendererProps, S = {}> extends React.Co
  *
  * @template P type of any renderer props
  */
-export interface StatelessRenderer<P extends RendererProps> extends React.StatelessComponent<P> {
-
-}
+export type StatelessRenderer<P extends RendererProps> =
+  React.StatelessComponent<P>;
 
 /**
  * Represents a Renderer, which might either be a component or a function.
  */
 export type Renderer =
-  RendererComponent<RendererProps & any, {}> | StatelessRenderer<RendererProps & any>;
+  | RendererComponent<RendererProps & any, {}>
+  | StatelessRenderer<RendererProps & any>;
diff --git a/packages/react/src/UnknownRenderer.tsx b/packages/react/src/UnknownRenderer.tsx
index a3531126c..e273d11a9 100644
--- a/packages/react/src/UnknownRenderer.tsx
+++ b/packages/react/src/UnknownRenderer.tsx
@@ -41,9 +41,7 @@ export interface UnknownRendererProps {
 export class UnknownRenderer extends Component<UnknownRendererProps, any> {
   render() {
     return (
-      <div style={{color: 'red'}}>
-        No applicable {this.props.type} found.
-      </div>
+      <div style={{ color: 'red' }}>No applicable {this.props.type} found.</div>
     );
   }
 }
diff --git a/packages/react/src/redux/JsonFormsReduxContext.tsx b/packages/react/src/redux/JsonFormsReduxContext.tsx
index 24c179868..8b4ccaf87 100644
--- a/packages/react/src/redux/JsonFormsReduxContext.tsx
+++ b/packages/react/src/redux/JsonFormsReduxContext.tsx
@@ -39,12 +39,16 @@ import React from 'react';
 // This import will be aliased to '@jsonforms/react' via rollup
 import { JsonFormsContext, JsonFormsReduxContextProps } from '..';
 
-const JsonFormsReduxProvider = ({ children, dispatch, ...other }: JsonFormsReduxContextProps) => {
+const JsonFormsReduxProvider = ({
+  children,
+  dispatch,
+  ...other
+}: JsonFormsReduxContextProps) => {
   return (
     <JsonFormsContext.Provider
       value={{
         dispatch,
-        ...other
+        ...other,
       }}
     >
       {children}
@@ -52,11 +56,9 @@ const JsonFormsReduxProvider = ({ children, dispatch, ...other }: JsonFormsRedux
   );
 };
 
-export const JsonFormsReduxContext = connect(
-  (state: JsonFormsState) => ({
-    ...state.jsonforms
-  })
-)(JsonFormsReduxProvider);
+export const JsonFormsReduxContext = connect((state: JsonFormsState) => ({
+  ...state.jsonforms,
+}))(JsonFormsReduxProvider);
 
 export const jsonformsReducer = (
   additionalReducers = {}
@@ -68,5 +70,5 @@ export const jsonformsReducer = (
     config: configReducer,
     uischemas: uischemaRegistryReducer,
     i18n: i18nReducer,
-    ...additionalReducers
-});
+    ...additionalReducers,
+  });
diff --git a/packages/react/test/JsonFormsContext.test.tsx b/packages/react/test/JsonFormsContext.test.tsx
index 48957365d..c6ca58773 100644
--- a/packages/react/test/JsonFormsContext.test.tsx
+++ b/packages/react/test/JsonFormsContext.test.tsx
@@ -33,11 +33,15 @@ import {
   NOT_APPLICABLE,
   OwnPropsOfEnum,
   rankWith,
-  StatePropsOfControlWithDetail
+  StatePropsOfControlWithDetail,
 } from '@jsonforms/core';
 
 import { JsonForms } from '../src/JsonForms';
-import { withJsonFormsDetailProps, withJsonFormsEnumCellProps, withJsonFormsEnumProps } from '../src/JsonFormsContext';
+import {
+  withJsonFormsDetailProps,
+  withJsonFormsEnumCellProps,
+  withJsonFormsEnumProps,
+} from '../src/JsonFormsContext';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -52,22 +56,22 @@ test('withJsonFormsEnumProps - constant: should supply control and enum props',
     type: 'object',
     properties: {
       name: {
-        const: 'Cambodia'
-      }
+        const: 'Cambodia',
+      },
     },
-    required: ['country']
+    required: ['country'],
   };
 
   const renderers = [
     {
       tester: rankWith(1, () => true),
-      renderer: MockEnumControl
-    }
+      renderer: MockEnumControl,
+    },
   ];
 
   const uischema = {
     type: 'Control',
-    scope: '#/properties/name'
+    scope: '#/properties/name',
   };
 
   const wrapper = mount(
@@ -86,7 +90,9 @@ test('withJsonFormsEnumProps - constant: should supply control and enum props',
   expect(mockEnumControlUnwrappedProps.schema).toEqual(schema.properties.name);
   expect(mockEnumControlUnwrappedProps.path).toEqual('name');
   expect(mockEnumControlUnwrappedProps.id).toEqual('#/properties/name');
-  expect(mockEnumControlUnwrappedProps.options).toEqual([{value: 'Cambodia', label: 'Cambodia'}]);
+  expect(mockEnumControlUnwrappedProps.options).toEqual([
+    { value: 'Cambodia', label: 'Cambodia' },
+  ]);
 });
 
 test('withJsonFormsEnumProps - enum: should supply control and enum props', () => {
@@ -101,22 +107,22 @@ test('withJsonFormsEnumProps - enum: should supply control and enum props', () =
     properties: {
       color: {
         type: 'string',
-        enum: ['red', 'amber', 'green', null]
-      }
+        enum: ['red', 'amber', 'green', null],
+      },
     },
-    required: ['color']
+    required: ['color'],
   };
 
   const renderers = [
     {
       tester: rankWith(1, () => true),
-      renderer: MockEnumControl
-    }
+      renderer: MockEnumControl,
+    },
   ];
 
   const uischema = {
     type: 'Control',
-    scope: '#/properties/color'
+    scope: '#/properties/color',
   };
 
   const wrapper = mount(
@@ -127,16 +133,18 @@ test('withJsonFormsEnumProps - enum: should supply control and enum props', () =
       renderers={renderers}
     />
   );
-  const mockEnumControlUnwrappedProps = wrapper.find(MockEnumControlUnwrapped).props();
+  const mockEnumControlUnwrappedProps = wrapper
+    .find(MockEnumControlUnwrapped)
+    .props();
   expect(mockEnumControlUnwrappedProps.uischema).toEqual(uischema);
   expect(mockEnumControlUnwrappedProps.schema).toEqual(schema.properties.color);
   expect(mockEnumControlUnwrappedProps.path).toEqual('color');
   expect(mockEnumControlUnwrappedProps.id).toEqual('#/properties/color');
   expect(mockEnumControlUnwrappedProps.options).toEqual([
-    {value: 'red', label: 'red'},
-    {value: 'amber', label: 'amber'},
-    {value: 'green', label: 'green'},
-    {value: null, label: 'null'}
+    { value: 'red', label: 'red' },
+    { value: 'amber', label: 'amber' },
+    { value: 'green', label: 'green' },
+    { value: null, label: 'null' },
   ]);
 });
 
@@ -148,19 +156,19 @@ test('withJsonFormsEnumCellProps - constant: should supply control and enum prop
   const MockEnumControl = withJsonFormsEnumCellProps(MockEnumCellUnwrapped);
 
   const schema = {
-    const: 'Cambodia'
+    const: 'Cambodia',
   };
 
   const renderers = [
     {
       tester: rankWith(1, () => true),
-      renderer: MockEnumControl
-    }
+      renderer: MockEnumControl,
+    },
   ];
 
   const uischema = {
     type: 'Control',
-    scope: '#/properties/name'
+    scope: '#/properties/name',
   };
 
   const wrapper = mount(
@@ -177,7 +185,9 @@ test('withJsonFormsEnumCellProps - constant: should supply control and enum prop
 
   expect(mockEnumControlUnwrappedProps.uischema).toEqual(uischema);
   expect(mockEnumControlUnwrappedProps.schema).toEqual(schema);
-  expect(mockEnumControlUnwrappedProps.options).toEqual([{label: 'Cambodia', value: 'Cambodia'}]);
+  expect(mockEnumControlUnwrappedProps.options).toEqual([
+    { label: 'Cambodia', value: 'Cambodia' },
+  ]);
 });
 
 test('withJsonFormsEnumCellProps - enum: should supply control and enum props', () => {
@@ -189,19 +199,19 @@ test('withJsonFormsEnumCellProps - enum: should supply control and enum props',
 
   const schema = {
     type: 'string',
-    enum: ['red', 'amber', 'green', null]
+    enum: ['red', 'amber', 'green', null],
   };
 
   const renderers = [
     {
       tester: rankWith(1, () => true),
-      renderer: MockEnumControl
-    }
+      renderer: MockEnumControl,
+    },
   ];
 
   const uischema = {
     type: 'Control',
-    scope: '#/properties/color'
+    scope: '#/properties/color',
   };
 
   const wrapper = mount(
@@ -212,14 +222,16 @@ test('withJsonFormsEnumCellProps - enum: should supply control and enum props',
       renderers={renderers}
     />
   );
-  const mockEnumControlUnwrappedProps = wrapper.find(MockEnumCellUnwrapped).props();
+  const mockEnumControlUnwrappedProps = wrapper
+    .find(MockEnumCellUnwrapped)
+    .props();
   expect(mockEnumControlUnwrappedProps.uischema).toEqual(uischema);
   expect(mockEnumControlUnwrappedProps.schema).toEqual(schema);
   expect(mockEnumControlUnwrappedProps.options).toEqual([
-    {value: 'red', label: 'red'},
-    {value: 'amber', label: 'amber'},
-    {value: 'green', label: 'green'},
-    {value: null, label: 'null'}
+    { value: 'red', label: 'red' },
+    { value: 'amber', label: 'amber' },
+    { value: 'green', label: 'green' },
+    { value: null, label: 'null' },
   ]);
 });
 
@@ -237,16 +249,16 @@ test('withJsonFormsDetailProps - should use uischemas props', () => {
         type: 'string',
       },
       bar: {
-        type: 'number'
-      }
-    }
+        type: 'number',
+      },
+    },
   };
 
   const renderers = [
     {
       tester: rankWith(1, () => true),
-      renderer: MockBasicRenderer
-    }
+      renderer: MockBasicRenderer,
+    },
   ];
 
   const uischemas = [
@@ -259,20 +271,20 @@ test('withJsonFormsDetailProps - should use uischemas props', () => {
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/foo'
+            scope: '#/properties/foo',
           },
           {
             type: 'Control',
-            scope: '#/properties/bar'
-          }
-        ]
-      }
-    }
+            scope: '#/properties/bar',
+          },
+        ],
+      },
+    },
   ];
 
   const uischema = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
 
   const wrapper = mount(
@@ -304,16 +316,16 @@ test('withJsonFormsDetailProps - should update uischemas after change', () => {
         type: 'string',
       },
       bar: {
-        type: 'number'
-      }
-    }
+        type: 'number',
+      },
+    },
   };
 
   const renderers = [
     {
       tester: rankWith(1, () => true),
-      renderer: MockBasicRenderer
-    }
+      renderer: MockBasicRenderer,
+    },
   ];
 
   const newUischemas = [
@@ -326,20 +338,20 @@ test('withJsonFormsDetailProps - should update uischemas after change', () => {
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/foo'
+            scope: '#/properties/foo',
           },
           {
             type: 'Control',
-            scope: '#/properties/bar'
-          }
-        ]
-      }
-    }
+            scope: '#/properties/bar',
+          },
+        ],
+      },
+    },
   ];
 
   const uischema = {
     type: 'Control',
-    scope: '#'
+    scope: '#',
   };
 
   const wrapper = mount(
diff --git a/packages/react/test/renderers/JsonForms.test.tsx b/packages/react/test/renderers/JsonForms.test.tsx
index 02117db30..dbfd220cf 100644
--- a/packages/react/test/renderers/JsonForms.test.tsx
+++ b/packages/react/test/renderers/JsonForms.test.tsx
@@ -48,19 +48,18 @@ import {
   unregisterRenderer,
 } from '@jsonforms/core';
 import { isEqual } from 'lodash';
-import Enzyme from 'enzyme';
-import { mount, shallow } from 'enzyme';
+import Enzyme, { mount, shallow } from 'enzyme';
 import type { StatelessRenderer } from '../../src/Renderer';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import {
   JsonForms,
   JsonFormsDispatch,
-  JsonFormsDispatchRenderer
+  JsonFormsDispatchRenderer,
 } from '../../src/JsonForms';
 import {
   JsonFormsStateProvider,
   useJsonForms,
-  withJsonFormsControlProps
+  withJsonFormsControlProps,
 } from '../../src/JsonFormsContext';
 import { JsonFormsReduxContext } from '../../src/redux';
 import { DispatchCell } from '../../src/DispatchCell';
@@ -103,12 +102,14 @@ export const initJsonFormsStore = ({
       core: {
         data,
         schema,
-        uischema
+        uischema,
       },
-      ...props
-    }
+      ...props,
+    },
   };
-  const reducer = combineReducers({ jsonforms: combineReducers(jsonFormsReducerConfig) });
+  const reducer = combineReducers({
+    jsonforms: combineReducers(jsonFormsReducerConfig),
+  });
   return createStore(reducer, initState);
 };
 
@@ -126,26 +127,26 @@ const fixture = {
   data: { foo: 'John Doe' },
   uischema: {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   },
   schema: {
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
+        type: 'string',
       },
       stringArray: {
         type: 'array',
-        items: { type: 'number' }
-      }
-    }
-  }
+        items: { type: 'number' },
+      },
+    },
+  },
 };
 
 test('JsonForms renderer should report about missing renderer', () => {
   const store = initJsonFormsStore({
     data: fixture.data,
-    uischema: fixture.uischema
+    uischema: fixture.uischema,
   });
 
   const wrapper = mount(
@@ -163,7 +164,7 @@ test('JsonForms renderer should report about missing renderer', () => {
 test('JsonForms renderer should pick most applicable renderer', () => {
   const store = initJsonFormsStore({
     data: fixture.data,
-    uischema: fixture.uischema
+    uischema: fixture.uischema,
   });
   store.dispatch(registerRenderer(() => 10, CustomRenderer1));
   store.dispatch(registerRenderer(() => 5, CustomRenderer2));
@@ -185,7 +186,7 @@ test('JsonForms renderer should not consider any de-registered renderers', () =>
   const tester3 = () => 10;
   const store = initJsonFormsStore({
     data: fixture.data,
-    uischema: fixture.uischema
+    uischema: fixture.uischema,
   });
   store.dispatch(registerRenderer(tester1, CustomRenderer1));
   store.dispatch(registerRenderer(tester2, CustomRenderer2));
@@ -232,13 +233,13 @@ test('ids should be unique within the same form', () => {
     elements: [
       {
         type: 'Control',
-        scope: '#/properties/foo'
+        scope: '#/properties/foo',
       },
       {
         type: 'Control',
-        scope: '#/properties/foo'
-      }
-    ]
+        scope: '#/properties/foo',
+      },
+    ],
   };
 
   const store = initJsonFormsStore({
@@ -248,13 +249,13 @@ test('ids should be unique within the same form', () => {
     renderers: [
       {
         tester: rankWith(10, uiTypeIs('HorizontalLayout')),
-        renderer: FakeLayout
-      }
-    ]
+        renderer: FakeLayout,
+      },
+    ],
   });
 
   const ids: string[] = [];
-  const MyCustomRenderer: StatelessRenderer<any> = props => {
+  const MyCustomRenderer: StatelessRenderer<any> = (props) => {
     ids.push(props.id);
     return <div>Custom</div>;
   };
@@ -277,24 +278,27 @@ test('render schema with $ref', () => {
   const schemaWithRef = {
     definitions: {
       n: {
-        type: 'number'
-      }
+        type: 'number',
+      },
     },
     type: 'object',
     properties: {
       foo: {
-        $ref: '#/definitions/n'
-      }
-    }
+        $ref: '#/definitions/n',
+      },
+    },
   };
 
-  const tester = rankWith(1, schemaMatches(schema => schema.type === 'number'));
+  const tester = rankWith(
+    1,
+    schemaMatches((schema) => schema.type === 'number')
+  );
 
   const renderers = [
     {
       tester: tester,
-      renderer: CustomRenderer2
-    }
+      renderer: CustomRenderer2,
+    },
   ];
 
   const wrapper = mount(
@@ -316,42 +320,48 @@ test('updates schema with ref', () => {
   const schemaWithRef = {
     definitions: {
       n: {
-        type: 'number'
-      }
+        type: 'number',
+      },
     },
     type: 'object',
     properties: {
       foo: {
-        $ref: '#/definitions/n'
-      }
-    }
+        $ref: '#/definitions/n',
+      },
+    },
   };
   const resolvedSchema: any = {
     definitions: {
       n: {
-        type: 'number'
-      }
+        type: 'number',
+      },
     },
     type: 'object',
     properties: {
       foo: {
-        type: 'number'
-      }
-    }
+        type: 'number',
+      },
+    },
   };
 
-  const tester1 = rankWith(1, schemaMatches(schema => schema.type === 'string'))
-  const tester2 = rankWith(1, schemaMatches(schema => schema.type === 'number'))
+  const tester1 = rankWith(
+    1,
+    schemaMatches((schema) => schema.type === 'string')
+  );
+  const tester2 = rankWith(
+    1,
+    schemaMatches((schema) => schema.type === 'number')
+  );
 
   const renderers = [
     {
       tester: tester1,
-      renderer: CustomRenderer1
+      renderer: CustomRenderer1,
     },
     {
       tester: tester2,
-      renderer: CustomRenderer2
-    }
+      renderer: CustomRenderer2,
+    },
   ];
 
   const wrapper = mount(
@@ -376,7 +386,7 @@ test('updates schema with ref', () => {
 test('JsonForms renderer should pick most applicable renderer via ownProps', () => {
   const store = initJsonFormsStore({
     data: fixture.data,
-    uischema: fixture.uischema
+    uischema: fixture.uischema,
   });
   store.dispatch(registerRenderer(() => 10, CustomRenderer1));
   store.dispatch(registerRenderer(() => 5, CustomRenderer2));
@@ -389,7 +399,7 @@ test('JsonForms renderer should pick most applicable renderer via ownProps', ()
           schema={fixture.schema}
           renderers={[
             { tester: () => 3, renderer: CustomRenderer3 },
-            { tester: () => 1, renderer: CustomRenderer2 }
+            { tester: () => 1, renderer: CustomRenderer2 },
           ]}
         />
       </JsonFormsReduxContext>
@@ -402,7 +412,7 @@ test('JsonForms renderer should pick most applicable renderer via ownProps', ()
 test('JsonForms renderer should pick most applicable cell renderer via ownProps', () => {
   const uiSchema = {
     type: 'Control',
-    scope: '#/properties/stringArray'
+    scope: '#/properties/stringArray',
   };
   const data = { stringArray: ['lol', 'pop'] };
   const schema = {
@@ -410,25 +420,25 @@ test('JsonForms renderer should pick most applicable cell renderer via ownProps'
     properties: {
       stringArray: {
         type: 'array',
-        items: { type: 'string' }
-      }
-    }
+        items: { type: 'string' },
+      },
+    },
   };
   const store = initJsonFormsStore({
     data: data,
     uischema: uiSchema,
-    schema: schema
+    schema: schema,
   });
   store.dispatch(registerCell(() => 50, CellRenderer1));
 
-  const ArrayRenderer: StatelessRenderer<RendererProps> = props => {
+  const ArrayRenderer: StatelessRenderer<RendererProps> = (props) => {
     return (
       <DispatchCell
         schema={props.schema}
         uischema={{
           type: 'Control',
           scope: '#/properties/stringArray',
-          label: false
+          label: false,
         }}
         path={props.path}
         enabled={true}
@@ -455,7 +465,7 @@ test('JsonForms renderer should pick most applicable cell renderer via ownProps'
 test('JsonForms renderer should not fail when there are no renderers in store, but there are in ownProps', () => {
   const store = initJsonFormsStore({
     data: fixture.data,
-    uischema: fixture.uischema
+    uischema: fixture.uischema,
   });
 
   const wrapper = mount(
@@ -476,7 +486,7 @@ test('JsonForms renderer should not fail when there are no renderers in store, b
 test('JsonForms renderer should pick uiSchema from ownProps', () => {
   const store = initJsonFormsStore({
     data: fixture.data,
-    uischema: fixture.uischema
+    uischema: fixture.uischema,
   });
   store.dispatch(
     registerRenderer(
@@ -491,9 +501,9 @@ test('JsonForms renderer should pick uiSchema from ownProps', () => {
     elements: [
       {
         type: 'Control',
-        scope: '#/properties/foo'
-      }
-    ]
+        scope: '#/properties/foo',
+      },
+    ],
   };
   const wrapper = mount(
     <Provider store={store}>
@@ -512,14 +522,14 @@ test('JsonForms renderer should pick schema from ownProps', () => {
     type: 'object',
     properties: {
       foo: {
-        type: 'boolean'
-      }
-    }
+        type: 'boolean',
+      },
+    },
   };
   const store = initJsonFormsStore({
     data: fixture.data,
     uischema: fixture.uischema,
-    schema: fixture.schema
+    schema: fixture.schema,
   });
 
   store.dispatch(
@@ -542,14 +552,14 @@ test('JsonForms renderer should pick schema from ownProps', () => {
 });
 
 test('JsonForms renderer should pick enabled prop from ownProps', () => {
-  const CustomRenderer4: StatelessRenderer<RendererProps> = props => {
+  const CustomRenderer4: StatelessRenderer<RendererProps> = (props) => {
     return <h3>{`${props.enabled}`}</h3>;
   };
 
   const store = initJsonFormsStore({
     data: fixture.data,
     uischema: fixture.uischema,
-    schema: fixture.schema
+    schema: fixture.schema,
   });
 
   store.dispatch(registerRenderer(() => 5, CustomRenderer4));
@@ -571,18 +581,18 @@ test('JsonForms should support two isolated components', () => {
     properties: {
       foo: {
         type: 'string',
-        minLength: 1
-      }
-    }
+        minLength: 1,
+      },
+    },
   };
   const schema2 = {
     type: 'object',
     properties: {
       bar: {
         type: 'number',
-        minimum: 1
-      }
-    }
+        minimum: 1,
+      },
+    },
   };
   const customRenderer1 = () => {
     const ctx = useJsonForms();
@@ -594,8 +604,14 @@ test('JsonForms should support two isolated components', () => {
     const errors = ctx.core.errors;
     return <h2>{errors ? errors.length : 0}</h2>;
   };
-  const fooControl: ControlElement = { type: 'Control', scope: '#/properties/foo' };
-  const barControl: ControlElement = { type: 'Control', scope: '#/properties/bar' };
+  const fooControl: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/foo',
+  };
+  const barControl: ControlElement = {
+    type: 'Control',
+    scope: '#/properties/bar',
+  };
   const wrapper = mount(
     <div>
       <JsonForms
@@ -625,8 +641,8 @@ test('JsonForms should create a JsonFormsStateProvider with initState props', ()
   const renderers = [
     {
       tester: tester,
-      renderer: CustomRenderer2
-    }
+      renderer: CustomRenderer2,
+    },
   ];
 
   const ajv = createAjv();
@@ -655,14 +671,11 @@ test('JsonForms should create a JsonFormsStateProvider with initState props', ()
 });
 
 test('JsonForms should honor config passed via initState props', () => {
-
   const customRenderer = () => {
     const ctx = useJsonForms();
     return <h2>{ctx.config.myConfigProperty}</h2>;
   };
-    const renderers = [
-      { tester: () => 30, renderer: customRenderer }
-  ];
+  const renderers = [{ tester: () => 30, renderer: customRenderer }];
 
   const wrapper = mount(
     <JsonForms
@@ -670,13 +683,13 @@ test('JsonForms should honor config passed via initState props', () => {
       uischema={fixture.uischema}
       schema={fixture.schema}
       renderers={renderers}
-      config={{myConfigProperty: 'true'}}
+      config={{ myConfigProperty: 'true' }}
     />
   );
 
-    wrapper.update();
-    expect(wrapper.find('h2').text()).toBe('true');
-    wrapper.unmount();
+  wrapper.update();
+  expect(wrapper.find('h2').text()).toBe('true');
+  wrapper.unmount();
 });
 
 test('JsonForms should generate an ui schema when uischema is not given', () => {
@@ -684,18 +697,18 @@ test('JsonForms should generate an ui schema when uischema is not given', () =>
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
   const uischema = {
     type: 'VerticalLayout',
     elements: [
       {
         type: 'Control',
-        scope: '#/properties/foo'
-      }
-    ]
+        scope: '#/properties/foo',
+      },
+    ],
   };
 
   const wrapper = shallow(
@@ -715,18 +728,18 @@ test('JsonForms should generate an ui schema when uischema is not valid', () =>
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
   const uischema = {
     type: 'VerticalLayout',
     elements: [
       {
         type: 'Control',
-        scope: '#/properties/foo'
-      }
-    ]
+        scope: '#/properties/foo',
+      },
+    ],
   };
 
   const wrapper = shallow(
@@ -751,20 +764,20 @@ test('JsonForms should generate a schema when schema is not given', () => {
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
-      }
+        type: 'string',
+      },
     },
     additionalProperties: true,
-    required: ['foo']
+    required: ['foo'],
   };
   const uischema = {
     type: 'VerticalLayout',
     elements: [
       {
         type: 'Control',
-        scope: '#/properties/foo'
-      }
-    ]
+        scope: '#/properties/foo',
+      },
+    ],
   };
 
   const wrapper = shallow(
@@ -791,11 +804,11 @@ test('JsonForms should use uischemas', () => {
             type: 'string',
           },
           baz: {
-            type: 'number'
-          }
-        }
-      }
-    }
+            type: 'number',
+          },
+        },
+      },
+    },
   };
 
   const uischemas = [
@@ -808,15 +821,15 @@ test('JsonForms should use uischemas', () => {
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/bar'
+            scope: '#/properties/bar',
           },
           {
             type: 'Control',
-            scope: '#/properties/baz'
-          }
-        ]
-      }
-    }
+            scope: '#/properties/baz',
+          },
+        ],
+      },
+    },
   ];
 
   const wrapper = shallow(
@@ -842,9 +855,9 @@ test('JsonForms should not crash with undefined uischemas', () => {
     type: 'object',
     properties: {
       foo: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   };
 
   const wrapper = shallow(
@@ -867,15 +880,15 @@ test('JsonForms should not crash with undefined uischemas', () => {
 
 test('JsonForms should call onChange handler with new data', (done) => {
   const onChangeHandler = jest.fn();
-  const TestInputRenderer = withJsonFormsControlProps(props => (
-    <input onChange={ev => props.handleChange('foo', ev.target.value)} />
+  const TestInputRenderer = withJsonFormsControlProps((props) => (
+    <input onChange={(ev) => props.handleChange('foo', ev.target.value)} />
   ));
 
   const renderers = [
     {
       tester: () => 10,
-      renderer: TestInputRenderer
-    }
+      renderer: TestInputRenderer,
+    },
   ];
   const wrapper = mount(
     <JsonForms
@@ -889,8 +902,8 @@ test('JsonForms should call onChange handler with new data', (done) => {
 
   wrapper.find('input').simulate('change', {
     target: {
-      value: 'Test Value'
-    }
+      value: 'Test Value',
+    },
   });
 
   // events are debounced for some time, so let's wait
@@ -901,13 +914,12 @@ test('JsonForms should call onChange handler with new data', (done) => {
     expect(lastCallParameter.errors).toEqual([]);
     done();
   }, 50);
-  
 });
 
 test('JsonForms should call onChange handler with errors', (done) => {
   const onChangeHandler = jest.fn();
-  const TestInputRenderer = withJsonFormsControlProps(props => (
-    <input onChange={ev => props.handleChange('foo', ev.target.value)} />
+  const TestInputRenderer = withJsonFormsControlProps((props) => (
+    <input onChange={(ev) => props.handleChange('foo', ev.target.value)} />
   ));
 
   const schema = {
@@ -915,17 +927,17 @@ test('JsonForms should call onChange handler with errors', (done) => {
     properties: {
       foo: {
         type: 'string',
-        minLength: 5
-      }
+        minLength: 5,
+      },
     },
-    required: ['foo']
+    required: ['foo'],
   };
 
   const renderers = [
     {
       tester: () => 10,
-      renderer: TestInputRenderer
-    }
+      renderer: TestInputRenderer,
+    },
   ];
   const wrapper = mount(
     <JsonForms
@@ -939,8 +951,8 @@ test('JsonForms should call onChange handler with errors', (done) => {
 
   wrapper.find('input').simulate('change', {
     target: {
-      value: 'xyz'
-    }
+      value: 'xyz',
+    },
   });
 
   // events are debounced for some time, so let's wait
@@ -952,13 +964,12 @@ test('JsonForms should call onChange handler with errors', (done) => {
     expect(lastCallParameter.errors[0].keyword).toEqual('minLength');
     done();
   }, 50);
-
 });
 
 test('JsonForms should update if data prop is updated', () => {
   const onChangeHandler = jest.fn();
-  const TestInputRenderer = withJsonFormsControlProps(props => (
-    <input onChange={ev => props.handleChange('foo', ev.target.value)} />
+  const TestInputRenderer = withJsonFormsControlProps((props) => (
+    <input onChange={(ev) => props.handleChange('foo', ev.target.value)} />
   ));
 
   const schema = {
@@ -966,17 +977,17 @@ test('JsonForms should update if data prop is updated', () => {
     properties: {
       foo: {
         type: 'string',
-        minLength: 5
-      }
+        minLength: 5,
+      },
     },
-    required: ['foo']
+    required: ['foo'],
   };
 
   const renderers = [
     {
       tester: () => 10,
-      renderer: TestInputRenderer
-    }
+      renderer: TestInputRenderer,
+    },
   ];
   const wrapper = mount(
     <JsonForms
@@ -994,27 +1005,30 @@ test('JsonForms should update if data prop is updated', () => {
 });
 
 test('JsonForms should use additionalErrors if provided', () => {
-
-  const CustomRendererWithError: StatelessRenderer<ControlProps> = ({errors}) => { 
-    return (<h5>{errors}</h5>) 
+  const CustomRendererWithError: StatelessRenderer<ControlProps> = ({
+    errors,
+  }) => {
+    return <h5>{errors}</h5>;
   };
 
   const renderers = [
     {
       tester: () => 1000,
-      renderer: withJsonFormsControlProps(CustomRendererWithError)
-    }
+      renderer: withJsonFormsControlProps(CustomRendererWithError),
+    },
   ];
-  const additionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'foo'
+  const additionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'foo',
+      },
+      message: 'Lorem ipsum',
     },
-    message: 'Lorem ipsum'
-  }];
+  ];
   const wrapper = mount(
     <JsonForms
       data={fixture.data}
@@ -1029,27 +1043,30 @@ test('JsonForms should use additionalErrors if provided', () => {
 });
 
 test('JsonForms should use react to additionalErrors update', () => {
-
-  const CustomRendererWithError: StatelessRenderer<ControlProps> = ({ errors }) => {
-    return (<h5>{errors}</h5>)
+  const CustomRendererWithError: StatelessRenderer<ControlProps> = ({
+    errors,
+  }) => {
+    return <h5>{errors}</h5>;
   };
 
   const renderers = [
     {
       tester: () => 1000,
-      renderer: withJsonFormsControlProps(CustomRendererWithError)
-    }
+      renderer: withJsonFormsControlProps(CustomRendererWithError),
+    },
   ];
-  const additionalErrors = [{
-    instancePath: '',
-    dataPath: '',
-    schemaPath: '#/required',
-    keyword: 'required',
-    params: {
-      missingProperty: 'foo'
+  const additionalErrors = [
+    {
+      instancePath: '',
+      dataPath: '',
+      schemaPath: '#/required',
+      keyword: 'required',
+      params: {
+        missingProperty: 'foo',
+      },
+      message: 'Lorem ipsum',
     },
-    message: 'Lorem ipsum'
-  }];
+  ];
   const wrapper = mount(
     <JsonForms
       data={fixture.data}
@@ -1062,18 +1079,20 @@ test('JsonForms should use react to additionalErrors update', () => {
   expect(wrapper.find('h5').text()).toBe('Lorem ipsum');
 
   wrapper.setProps({
-    additionalErrors: [{
-      instancePath: '',
-      dataPath: '',
-      schemaPath: '#/required',
-      keyword: 'required',
-      params: {
-        missingProperty: 'foo'
+    additionalErrors: [
+      {
+        instancePath: '',
+        dataPath: '',
+        schemaPath: '#/required',
+        keyword: 'required',
+        params: {
+          missingProperty: 'foo',
+        },
+        message: 'Foobar',
       },
-      message: 'Foobar'
-    }]
+    ],
   });
   wrapper.update();
   expect(wrapper.find('h5').text()).toBe('Foobar');
   wrapper.unmount();
-});
\ No newline at end of file
+});
diff --git a/packages/vanilla-renderers/example/index.ts b/packages/vanilla-renderers/example/index.ts
index 067a5fcfe..beea4f77b 100644
--- a/packages/vanilla-renderers/example/index.ts
+++ b/packages/vanilla-renderers/example/index.ts
@@ -23,10 +23,7 @@
   THE SOFTWARE.
 */
 import { createThemeSelection } from './theme.switcher';
-import {
-  vanillaCells,
-  vanillaRenderers,
-} from '../src';
+import { vanillaCells, vanillaRenderers } from '../src';
 import { renderExample } from '../../examples-react/src/index';
 
 renderExample(vanillaRenderers, vanillaCells);
diff --git a/packages/vanilla-renderers/example/theme.switcher.ts b/packages/vanilla-renderers/example/theme.switcher.ts
index 697f6abd6..9c4e7864d 100644
--- a/packages/vanilla-renderers/example/theme.switcher.ts
+++ b/packages/vanilla-renderers/example/theme.switcher.ts
@@ -24,7 +24,7 @@
 */
 const knownThemes: { [key: string]: string } = {
   normal: 'Normal Label Top',
-  dark: 'Dark label Top'
+  dark: 'Dark label Top',
 };
 const changeTheme = (style: string) => {
   document.body.className = style;
@@ -34,7 +34,7 @@ export const createThemeSelection = () => {
 
   const select = document.createElement('select');
   select.id = 'example_theme';
-  Object.keys(knownThemes).forEach(key => {
+  Object.keys(knownThemes).forEach((key) => {
     const style = knownThemes[key];
     const option = document.createElement('option');
     option.value = key;
diff --git a/packages/vanilla-renderers/src/actions/index.ts b/packages/vanilla-renderers/src/actions/index.ts
index 70061483f..a251b7864 100644
--- a/packages/vanilla-renderers/src/actions/index.ts
+++ b/packages/vanilla-renderers/src/actions/index.ts
@@ -29,17 +29,17 @@ export const UNREGISTER_STYLE = 'UNREGISTER_STYLE';
 export const registerStyle = (styleName: string, classNames: string[]) => ({
   type: REGISTER_STYLE,
   name: styleName,
-  classNames
+  classNames,
 });
 
 export const unregisterStyle = (styleName: string) => ({
   type: UNREGISTER_STYLE,
-  name: styleName
+  name: styleName,
 });
 
 export const registerStyles = (
   styleDefs: { name: string; classNames: string[] }[]
 ) => ({
   type: REGISTER_STYLES,
-  styles: styleDefs
+  styles: styleDefs,
 });
diff --git a/packages/vanilla-renderers/src/cells/BooleanCell.tsx b/packages/vanilla-renderers/src/cells/BooleanCell.tsx
index 3b6c26301..efb76ebe6 100644
--- a/packages/vanilla-renderers/src/cells/BooleanCell.tsx
+++ b/packages/vanilla-renderers/src/cells/BooleanCell.tsx
@@ -34,24 +34,23 @@ import type { StatelessComponent } from 'react';
 import type { VanillaRendererProps } from '../index';
 import { withVanillaBooleanCellProps } from '../util/index';
 
-export const BooleanCell: StatelessComponent<CellProps> =
-  (props: CellProps & VanillaRendererProps) => {
-    const { data, className, id, enabled, uischema, path, handleChange } = props;
-
-    return (
-      <input
-        type='checkbox'
-        checked={!!data}
-        onChange={ev =>
-          handleChange(path, ev.target.checked)
-        }
-        className={className}
-        id={id}
-        disabled={!enabled}
-        autoFocus={uischema.options && uischema.options.focus}
-      />
-    );
-  };
+export const BooleanCell: StatelessComponent<CellProps> = (
+  props: CellProps & VanillaRendererProps
+) => {
+  const { data, className, id, enabled, uischema, path, handleChange } = props;
+
+  return (
+    <input
+      type='checkbox'
+      checked={!!data}
+      onChange={(ev) => handleChange(path, ev.target.checked)}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      autoFocus={uischema.options && uischema.options.focus}
+    />
+  );
+};
 
 /**
  * Default tester for boolean controls.
diff --git a/packages/vanilla-renderers/src/cells/DateCell.tsx b/packages/vanilla-renderers/src/cells/DateCell.tsx
index 688563425..48eddc490 100644
--- a/packages/vanilla-renderers/src/cells/DateCell.tsx
+++ b/packages/vanilla-renderers/src/cells/DateCell.tsx
@@ -40,7 +40,7 @@ export const DateCell = (props: CellProps & VanillaRendererProps) => {
     <input
       type='date'
       value={data || ''}
-      onChange={ev => handleChange(path, ev.target.value)}
+      onChange={(ev) => handleChange(path, ev.target.value)}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla-renderers/src/cells/DateTimeCell.tsx b/packages/vanilla-renderers/src/cells/DateTimeCell.tsx
index 0b5088e92..a842c9bb9 100644
--- a/packages/vanilla-renderers/src/cells/DateTimeCell.tsx
+++ b/packages/vanilla-renderers/src/cells/DateTimeCell.tsx
@@ -36,14 +36,14 @@ import { withVanillaCellProps } from '../util/index';
 export const DateTimeCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
   const toISOString = (inputDateTime: string) => {
-    return (inputDateTime === '' ? '' : inputDateTime + ':00.000Z');
+    return inputDateTime === '' ? '' : inputDateTime + ':00.000Z';
   };
 
   return (
     <input
       type='datetime-local'
       value={(data || '').substr(0, 16)}
-      onChange={ev => handleChange(path, toISOString(ev.target.value))}
+      onChange={(ev) => handleChange(path, toISOString(ev.target.value))}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla-renderers/src/cells/EnumCell.tsx b/packages/vanilla-renderers/src/cells/EnumCell.tsx
index 51d481043..b6d53c9c1 100644
--- a/packages/vanilla-renderers/src/cells/EnumCell.tsx
+++ b/packages/vanilla-renderers/src/cells/EnumCell.tsx
@@ -29,13 +29,33 @@ import {
   RankedTester,
   rankWith,
 } from '@jsonforms/core';
-import { TranslateProps, withJsonFormsEnumCellProps, withTranslateProps } from '@jsonforms/react';
+import {
+  TranslateProps,
+  withJsonFormsEnumCellProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import { i18nDefaults, withVanillaEnumCellProps } from '../util';
 import type { VanillaRendererProps } from '../index';
 
-export const EnumCell = (props: EnumCellProps & VanillaRendererProps & TranslateProps) => {
-  const { data, className, id, enabled, schema, uischema, path, handleChange, options, t } = props;
-  const noneOptionLabel = useMemo(() => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path}), [t, schema, uischema, path]);
+export const EnumCell = (
+  props: EnumCellProps & VanillaRendererProps & TranslateProps
+) => {
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    schema,
+    uischema,
+    path,
+    handleChange,
+    options,
+    t,
+  } = props;
+  const noneOptionLabel = useMemo(
+    () => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+    [t, schema, uischema, path]
+  );
   return (
     <select
       className={className}
@@ -43,17 +63,26 @@ export const EnumCell = (props: EnumCellProps & VanillaRendererProps & Translate
       disabled={!enabled}
       autoFocus={uischema.options && uischema.options.focus}
       value={data || ''}
-      onChange={ev => handleChange(path, ev.target.selectedIndex === 0 ? undefined : ev.target.value)}
+      onChange={(ev) =>
+        handleChange(
+          path,
+          ev.target.selectedIndex === 0 ? undefined : ev.target.value
+        )
+      }
     >
-      {
-        [<option value={''} key={'jsonforms.enum.none'}>{noneOptionLabel}</option>]
-          .concat(
-            options.map(optionValue =>
-              (
-                <option value={optionValue.value} label={optionValue.label} key={optionValue.value}/>
-              )
-            )
-          )}
+      {[
+        <option value={''} key={'jsonforms.enum.none'}>
+          {noneOptionLabel}
+        </option>,
+      ].concat(
+        options.map((optionValue) => (
+          <option
+            value={optionValue.value}
+            label={optionValue.label}
+            key={optionValue.value}
+          />
+        ))
+      )}
     </select>
   );
 };
@@ -63,4 +92,6 @@ export const EnumCell = (props: EnumCellProps & VanillaRendererProps & Translate
  */
 export const enumCellTester: RankedTester = rankWith(2, isEnumControl);
 
-export default withJsonFormsEnumCellProps(withTranslateProps(withVanillaEnumCellProps(EnumCell)));
+export default withJsonFormsEnumCellProps(
+  withTranslateProps(withVanillaEnumCellProps(EnumCell))
+);
diff --git a/packages/vanilla-renderers/src/cells/IntegerCell.tsx b/packages/vanilla-renderers/src/cells/IntegerCell.tsx
index dd9e5673d..4e56ca649 100644
--- a/packages/vanilla-renderers/src/cells/IntegerCell.tsx
+++ b/packages/vanilla-renderers/src/cells/IntegerCell.tsx
@@ -27,14 +27,14 @@ import {
   CellProps,
   isIntegerControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import type { VanillaRendererProps } from '../index';
 import { withVanillaCellProps } from '../util/index';
 
 const toNumber = (value: string) =>
-      value === '' ? undefined : parseInt(value, 10);
+  value === '' ? undefined : parseInt(value, 10);
 
 export const IntegerCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
@@ -44,7 +44,7 @@ export const IntegerCell = (props: CellProps & VanillaRendererProps) => {
       type='number'
       step='1'
       value={data ?? ''}
-      onChange={ev => handleChange(path, toNumber(ev.target.value))}
+      onChange={(ev) => handleChange(path, toNumber(ev.target.value))}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla-renderers/src/cells/NumberCell.tsx b/packages/vanilla-renderers/src/cells/NumberCell.tsx
index 651a3fc1b..c8c925b94 100644
--- a/packages/vanilla-renderers/src/cells/NumberCell.tsx
+++ b/packages/vanilla-renderers/src/cells/NumberCell.tsx
@@ -33,8 +33,7 @@ import { withJsonFormsCellProps } from '@jsonforms/react';
 import type { VanillaRendererProps } from '../index';
 import { withVanillaCellProps } from '../util/index';
 
-const toNumber = (value: string) =>
-      value === '' ? undefined : Number(value);
+const toNumber = (value: string) => (value === '' ? undefined : Number(value));
 
 export const NumberCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
@@ -44,7 +43,7 @@ export const NumberCell = (props: CellProps & VanillaRendererProps) => {
       type='number'
       step='0.1'
       value={data ?? ''}
-      onChange={ev => handleChange(path, toNumber(ev.target.value))}
+      onChange={(ev) => handleChange(path, toNumber(ev.target.value))}
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla-renderers/src/cells/NumberFormatCell.tsx b/packages/vanilla-renderers/src/cells/NumberFormatCell.tsx
index e2fc645e8..7a4f90eab 100644
--- a/packages/vanilla-renderers/src/cells/NumberFormatCell.tsx
+++ b/packages/vanilla-renderers/src/cells/NumberFormatCell.tsx
@@ -34,16 +34,11 @@ import { withJsonFormsCellProps } from '@jsonforms/react';
 import type { VanillaRendererProps } from '../index';
 import { withVanillaCellProps } from '../util/index';
 
-export const NumberFormatCell = (props: CellProps & VanillaRendererProps & Formatted<number|undefined>) => {
-  const {
-    className,
-    id,
-    enabled,
-    uischema,
-    path,
-    handleChange,
-    schema
-  } = props;
+export const NumberFormatCell = (
+  props: CellProps & VanillaRendererProps & Formatted<number | undefined>
+) => {
+  const { className, id, enabled, uischema, path, handleChange, schema } =
+    props;
   const maxLength = schema.maxLength;
   const formattedNumber: string = props.toFormatted(props.data);
 
@@ -61,7 +56,9 @@ export const NumberFormatCell = (props: CellProps & VanillaRendererProps & Forma
       id={id}
       disabled={!enabled}
       autoFocus={uischema.options && uischema.options.focus}
-      maxLength={uischema.options && uischema.options.restrict ? maxLength : undefined}
+      maxLength={
+        uischema.options && uischema.options.restrict ? maxLength : undefined
+      }
       size={uischema.options && uischema.options.trim ? maxLength : undefined}
     />
   );
@@ -71,6 +68,9 @@ export const NumberFormatCell = (props: CellProps & VanillaRendererProps & Forma
  * Default tester for text-based/string controls.
  * @type {RankedTester}
  */
-export const numberFormatCellTester: RankedTester = rankWith(4, isNumberFormatControl);
+export const numberFormatCellTester: RankedTester = rankWith(
+  4,
+  isNumberFormatControl
+);
 
 export default withJsonFormsCellProps(withVanillaCellProps(NumberFormatCell));
diff --git a/packages/vanilla-renderers/src/cells/SliderCell.tsx b/packages/vanilla-renderers/src/cells/SliderCell.tsx
index 78a1f1dcd..98ad26ad0 100644
--- a/packages/vanilla-renderers/src/cells/SliderCell.tsx
+++ b/packages/vanilla-renderers/src/cells/SliderCell.tsx
@@ -34,7 +34,8 @@ import type { VanillaRendererProps } from '../index';
 import { withVanillaCellProps } from '../util/index';
 
 export const SliderCell = (props: CellProps & VanillaRendererProps) => {
-  const { data, className, id, enabled, uischema, schema, path, handleChange } = props;
+  const { data, className, id, enabled, uischema, schema, path, handleChange } =
+    props;
 
   return (
     <div style={{ display: 'flex' }}>
@@ -43,7 +44,7 @@ export const SliderCell = (props: CellProps & VanillaRendererProps) => {
         max={schema.maximum}
         min={schema.minimum}
         value={data || schema.default}
-        onChange={ev => handleChange(path, Number(ev.target.value))}
+        onChange={(ev) => handleChange(path, Number(ev.target.value))}
         className={className}
         id={id}
         disabled={!enabled}
diff --git a/packages/vanilla-renderers/src/cells/TextAreaCell.tsx b/packages/vanilla-renderers/src/cells/TextAreaCell.tsx
index 90d080ef6..79185b856 100644
--- a/packages/vanilla-renderers/src/cells/TextAreaCell.tsx
+++ b/packages/vanilla-renderers/src/cells/TextAreaCell.tsx
@@ -35,12 +35,15 @@ import { withVanillaCellProps } from '../util/index';
 import merge from 'lodash/merge';
 
 export const TextAreaCell = (props: CellProps & VanillaRendererProps) => {
-  const { data, className, id, enabled, config, uischema, path, handleChange } = props;
+  const { data, className, id, enabled, config, uischema, path, handleChange } =
+    props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
   return (
     <textarea
       value={data || ''}
-      onChange={ev => handleChange(path, ev.target.value === '' ? undefined : ev.target.value)}
+      onChange={(ev) =>
+        handleChange(path, ev.target.value === '' ? undefined : ev.target.value)
+      }
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla-renderers/src/cells/TextCell.tsx b/packages/vanilla-renderers/src/cells/TextCell.tsx
index 1e93b156b..339a2f972 100644
--- a/packages/vanilla-renderers/src/cells/TextCell.tsx
+++ b/packages/vanilla-renderers/src/cells/TextCell.tsx
@@ -27,7 +27,7 @@ import {
   CellProps,
   isStringControl,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsCellProps } from '@jsonforms/react';
 import type { VanillaRendererProps } from '../index';
@@ -44,7 +44,7 @@ export const TextCell = (props: CellProps & VanillaRendererProps) => {
     uischema,
     schema,
     path,
-    handleChange
+    handleChange,
   } = props;
   const maxLength = schema.maxLength;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
@@ -52,7 +52,9 @@ export const TextCell = (props: CellProps & VanillaRendererProps) => {
     <input
       type='text'
       value={data || ''}
-      onChange={ev => handleChange(path, ev.target.value === '' ? undefined : ev.target.value)}
+      onChange={(ev) =>
+        handleChange(path, ev.target.value === '' ? undefined : ev.target.value)
+      }
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla-renderers/src/cells/TimeCell.tsx b/packages/vanilla-renderers/src/cells/TimeCell.tsx
index 9273895bb..3944592ab 100644
--- a/packages/vanilla-renderers/src/cells/TimeCell.tsx
+++ b/packages/vanilla-renderers/src/cells/TimeCell.tsx
@@ -46,7 +46,7 @@ const appendSecondsIfNecessary = (value: unknown) => {
     return splitValue.join(':');
   }
   return value;
-}
+};
 
 export const TimeCell = (props: CellProps & VanillaRendererProps) => {
   const { data, className, id, enabled, uischema, path, handleChange } = props;
@@ -55,7 +55,9 @@ export const TimeCell = (props: CellProps & VanillaRendererProps) => {
     <input
       type='time'
       value={data || ''}
-      onChange={ev => handleChange(path, appendSecondsIfNecessary(ev.target.value))}
+      onChange={(ev) =>
+        handleChange(path, appendSecondsIfNecessary(ev.target.value))
+      }
       className={className}
       id={id}
       disabled={!enabled}
diff --git a/packages/vanilla-renderers/src/cells/index.ts b/packages/vanilla-renderers/src/cells/index.ts
index 45f7a600e..d098afd0c 100644
--- a/packages/vanilla-renderers/src/cells/index.ts
+++ b/packages/vanilla-renderers/src/cells/index.ts
@@ -57,6 +57,6 @@ export {
   TextAreaCell,
   textAreaCellTester,
   TimeCell,
-  timeCellTester
+  timeCellTester,
 };
 export { Customizable };
diff --git a/packages/vanilla-renderers/src/complex/LabelRenderer.tsx b/packages/vanilla-renderers/src/complex/LabelRenderer.tsx
index 51d06f5f3..0bc49d77d 100644
--- a/packages/vanilla-renderers/src/complex/LabelRenderer.tsx
+++ b/packages/vanilla-renderers/src/complex/LabelRenderer.tsx
@@ -37,19 +37,17 @@ export const labelRendererTester: RankedTester = rankWith(1, uiTypeIs('Label'));
 /**
  * Default renderer for a label.
  */
-export const LabelRenderer: FunctionComponent<LabelProps & VanillaRendererProps> =
-  ({ text, visible, getStyleAsClassName }) => {
-    const classNames = getStyleAsClassName('label-control');
-    const isHidden = !visible;
-
-    return (
-      <label
-        hidden={isHidden}
-        className={classNames}
-      >
-        {text}
-      </label>
-    );
-  };
+export const LabelRenderer: FunctionComponent<
+  LabelProps & VanillaRendererProps
+> = ({ text, visible, getStyleAsClassName }) => {
+  const classNames = getStyleAsClassName('label-control');
+  const isHidden = !visible;
+
+  return (
+    <label hidden={isHidden} className={classNames}>
+      {text}
+    </label>
+  );
+};
 
 export default withVanillaControlProps(withJsonFormsLabelProps(LabelRenderer));
diff --git a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
index 4a1160fd1..a6c245b44 100644
--- a/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
+++ b/packages/vanilla-renderers/src/complex/TableArrayControl.tsx
@@ -40,7 +40,7 @@ import {
   Resolve,
   Test,
   getControlPath,
-  encode
+  encode,
 } from '@jsonforms/core';
 import { DispatchCell, withJsonFormsArrayControlProps } from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
@@ -60,10 +60,12 @@ export const tableArrayControlTester: RankedTester = rankWith(
   or(isObjectArrayControl, isPrimitiveArrayControl)
 );
 
-class TableArrayControl extends React.Component<ArrayControlProps & VanillaRendererProps, any> {
-
+class TableArrayControl extends React.Component<
+  ArrayControlProps & VanillaRendererProps,
+  any
+> {
   confirmDelete = (path: string, index: number) => {
-    const p = path.substring(0, path.lastIndexOf(('.')));
+    const p = path.substring(0, path.lastIndexOf('.'));
     this.props.removeItems(p, [index])();
   };
 
@@ -80,7 +82,7 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
       label,
       getStyleAsClassName,
       childErrors,
-      translations
+      translations,
     } = this.props;
 
     const controlElement = uischema as ControlElement;
@@ -90,16 +92,18 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
     const validationClass = getStyleAsClassName('array.table.validation');
     const controlClass = [
       getStyleAsClassName('array.table'),
-      convertToValidClassName(controlElement.scope)
+      convertToValidClassName(controlElement.scope),
     ].join(' ');
     const createControlElement = (key?: string): ControlElement => ({
       type: 'Control',
       label: false,
-      scope: schema.type === 'object' ? `#/properties/${key}` : '#'
+      scope: schema.type === 'object' ? `#/properties/${key}` : '#',
     });
     const isValid = errors.length === 0;
     const divClassNames = [validationClass]
-      .concat(isValid ? '' : getStyleAsClassName('array.table.validation.error'))
+      .concat(
+        isValid ? '' : getStyleAsClassName('array.table.validation.error')
+      )
       .join(' ');
 
     return (
@@ -113,21 +117,23 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
             {translations.addTooltip}
           </button>
         </header>
-        <div className={divClassNames}>
-          {!isValid ? errors : ''}
-        </div>
+        <div className={divClassNames}>{!isValid ? errors : ''}</div>
         <table className={tableClass}>
           <thead>
             <tr>
               {schema.properties ? (
                 fpflow(
                   fpkeys,
-                  fpfilter(prop => schema.properties[prop].type !== 'array'),
-                  fpmap(prop => <th key={prop}>{schema.properties[prop].title ?? fpstartCase(prop)}</th>)
+                  fpfilter((prop) => schema.properties[prop].type !== 'array'),
+                  fpmap((prop) => (
+                    <th key={prop}>
+                      {schema.properties[prop].title ?? fpstartCase(prop)}
+                    </th>
+                  ))
                 )(schema.properties)
               ) : (
-                  <th>Items</th>
-                )}
+                <th>Items</th>
+              )}
               <th>Valid</th>
               <th>&nbsp;</th>
             </tr>
@@ -138,87 +144,92 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
                 <td>{translations.noDataMessage}</td>
               </tr>
             ) : (
-                data.map((_child, index) => {
-                  const childPath = Paths.compose(
-                    path,
-                    `${index}`
-                  );
-                  // TODO
-                  const errorsPerEntry: any[] = filter(childErrors, error => {
-                    const errorPath = getControlPath(error);
-                    return errorPath.startsWith(childPath);
-                  });
+              data.map((_child, index) => {
+                const childPath = Paths.compose(path, `${index}`);
+                // TODO
+                const errorsPerEntry: any[] = filter(childErrors, (error) => {
+                  const errorPath = getControlPath(error);
+                  return errorPath.startsWith(childPath);
+                });
 
-                  const validationClassName = getStyleAsClassName('array.validation');
-                  const errorValidationClassName = getStyleAsClassName('array.validation.error');
-                  const errorClassNames = errorsPerEntry ? 
-                    [validationClassName].concat(errorValidationClassName).join(' ') : 
-                    validationClassName;
+                const validationClassName =
+                  getStyleAsClassName('array.validation');
+                const errorValidationClassName = getStyleAsClassName(
+                  'array.validation.error'
+                );
+                const errorClassNames = errorsPerEntry
+                  ? [validationClassName]
+                      .concat(errorValidationClassName)
+                      .join(' ')
+                  : validationClassName;
 
-                  return (
-                    <tr key={childPath}>
-                      {schema.properties ? (
-                        fpflow(
-                          fpkeys,
-                          fpfilter(
-                            prop => schema.properties[prop].type !== 'array'
-                          ),
-                          fpmap(prop => {
-                            const childPropPath = Paths.compose(
-                              childPath,
-                              prop.toString()
-                            );
-                            return (
-                              <td key={childPropPath}>
-                                <DispatchCell
-                                  schema={Resolve.schema(schema, `#/properties/${encode(prop)}`, rootSchema)}
-                                  uischema={createControlElement(encode(prop))}
-                                  path={childPath + '.' + prop}
-                                />
-                              </td>
-                            );
-                          })
-                        )(schema.properties)
-                      ) : (
-                          <td
-                            key={Paths.compose(
-                              childPath,
-                              index.toString()
-                            )}
-                          >
-                            <DispatchCell
-                              schema={schema}
-                              uischema={createControlElement()}
-                              path={childPath}
-                            />
-                          </td>
-                        )}
-                      <td>
-                        {errorsPerEntry ? (
-                          <span className={errorClassNames}
-                          >
-                            {join(errorsPerEntry.map(e => e.message), ' and ')}
-                          </span>
-                        ) : (
-                            <span className={errorClassNames}>OK</span>
-                          )}
-                      </td>
-                      <td>
-                        <button
-                          aria-label={translations.removeAriaLabel}
-                          onClick={() => {
-                            if (window.confirm(translations.deleteDialogMessage)) {
-                              this.confirmDelete(childPath, index);
-                            }
-                          }}
-                        >
-                          {translations.removeTooltip}
-                        </button>
+                return (
+                  <tr key={childPath}>
+                    {schema.properties ? (
+                      fpflow(
+                        fpkeys,
+                        fpfilter(
+                          (prop) => schema.properties[prop].type !== 'array'
+                        ),
+                        fpmap((prop) => {
+                          const childPropPath = Paths.compose(
+                            childPath,
+                            prop.toString()
+                          );
+                          return (
+                            <td key={childPropPath}>
+                              <DispatchCell
+                                schema={Resolve.schema(
+                                  schema,
+                                  `#/properties/${encode(prop)}`,
+                                  rootSchema
+                                )}
+                                uischema={createControlElement(encode(prop))}
+                                path={childPath + '.' + prop}
+                              />
+                            </td>
+                          );
+                        })
+                      )(schema.properties)
+                    ) : (
+                      <td key={Paths.compose(childPath, index.toString())}>
+                        <DispatchCell
+                          schema={schema}
+                          uischema={createControlElement()}
+                          path={childPath}
+                        />
                       </td>
-                    </tr>
-                  );
-                })
-              )}
+                    )}
+                    <td>
+                      {errorsPerEntry ? (
+                        <span className={errorClassNames}>
+                          {join(
+                            errorsPerEntry.map((e) => e.message),
+                            ' and '
+                          )}
+                        </span>
+                      ) : (
+                        <span className={errorClassNames}>OK</span>
+                      )}
+                    </td>
+                    <td>
+                      <button
+                        aria-label={translations.removeAriaLabel}
+                        onClick={() => {
+                          if (
+                            window.confirm(translations.deleteDialogMessage)
+                          ) {
+                            this.confirmDelete(childPath, index);
+                          }
+                        }}
+                      >
+                        {translations.removeTooltip}
+                      </button>
+                    </td>
+                  </tr>
+                );
+              })
+            )}
           </tbody>
         </table>
       </div>
@@ -226,4 +237,6 @@ class TableArrayControl extends React.Component<ArrayControlProps & VanillaRende
   }
 }
 
-export default withVanillaControlProps(withJsonFormsArrayControlProps(TableArrayControl));
+export default withVanillaControlProps(
+  withJsonFormsArrayControlProps(TableArrayControl)
+);
diff --git a/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx b/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
index d4552188c..4e2b1b0b2 100644
--- a/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
+++ b/packages/vanilla-renderers/src/complex/array/ArrayControlRenderer.tsx
@@ -24,8 +24,18 @@
 */
 import range from 'lodash/range';
 import React, { useMemo } from 'react';
-import { ArrayControlProps, composePaths, createDefaultValue, findUISchema, Helpers, ControlElement } from '@jsonforms/core';
-import { JsonFormsDispatch,withJsonFormsArrayControlProps } from '@jsonforms/react';
+import {
+  ArrayControlProps,
+  composePaths,
+  createDefaultValue,
+  findUISchema,
+  Helpers,
+  ControlElement,
+} from '@jsonforms/core';
+import {
+  JsonFormsDispatch,
+  withJsonFormsArrayControlProps,
+} from '@jsonforms/react';
 import type { VanillaRendererProps } from '../../index';
 import { withVanillaControlProps } from '../../util';
 
@@ -47,19 +57,29 @@ export const ArrayControl = ({
   getStyleAsClassName,
   renderers,
   rootSchema,
-  translations
+  translations,
 }: ArrayControlProps & VanillaRendererProps) => {
-	
   const controlElement = uischema as ControlElement;
   const childUiSchema = useMemo(
-    () => findUISchema(uischemas, schema, uischema.scope, path, undefined, uischema, rootSchema),
+    () =>
+      findUISchema(
+        uischemas,
+        schema,
+        uischema.scope,
+        path,
+        undefined,
+        uischema,
+        rootSchema
+      ),
     [uischemas, schema, uischema.scope, path, uischema, rootSchema]
   );
   const isValid = errors.length === 0;
   const validationClass = getStyleAsClassName('array.control.validation');
   const divClassNames = [validationClass]
-    .concat(isValid ? '' : getStyleAsClassName('array.control.validation.error'))
-    .join(' ');  
+    .concat(
+      isValid ? '' : getStyleAsClassName('array.control.validation.error')
+    )
+    .join(' ');
   const buttonClassAdd = getStyleAsClassName('array.control.add');
   const labelClass = getStyleAsClassName('array.control.label');
   const childControlsClass = getStyleAsClassName('array.child.controls');
@@ -67,26 +87,25 @@ export const ArrayControl = ({
   const buttonClassDown = getStyleAsClassName('array.child.controls.down');
   const buttonClassDelete = getStyleAsClassName('array.child.controls.delete');
   const controlClass = [
-      getStyleAsClassName('array.control'),
-      convertToValidClassName(controlElement.scope)
-    ].join(' ');
-  
+    getStyleAsClassName('array.control'),
+    convertToValidClassName(controlElement.scope),
+  ].join(' ');
+
   return (
     <div className={controlClass}>
       <header>
         <label className={labelClass}>{label}</label>
         <button
-            className={buttonClassAdd}
-            onClick={addItem(path, createDefaultValue(schema))}
-        >Add to {label}
-	    </button>
+          className={buttonClassAdd}
+          onClick={addItem(path, createDefaultValue(schema))}
+        >
+          Add to {label}
+        </button>
       </header>
-      <div className={divClassNames}>
-        {errors}
-      </div>      
+      <div className={divClassNames}>{errors}</div>
       <div className={classNames.children}>
         {data ? (
-          range(0, data.length).map(index => {
+          range(0, data.length).map((index) => {
             const childPath = composePaths(path, `${index}`);
             return (
               <div key={index}>
@@ -96,99 +115,116 @@ export const ArrayControl = ({
                   path={childPath}
                   key={childPath}
                   renderers={renderers}
-                />                
+                />
                 <div className={childControlsClass}>
                   <button
                     className={buttonClassUp}
-              	    aria-label={translations.upAriaLabel}
+                    aria-label={translations.upAriaLabel}
                     onClick={() => {
-                      moveUp(path,index)();
-                  }}>{translations.up}</button>
+                      moveUp(path, index)();
+                    }}
+                  >
+                    {translations.up}
+                  </button>
                   <button
                     className={buttonClassDown}
                     aria-label={translations.downAriaLabel}
                     onClick={() => {
-                      moveDown(path,index)();
-                  }}>{translations.down}</button>
+                      moveDown(path, index)();
+                    }}
+                  >
+                    {translations.down}
+                  </button>
                   <button
                     className={buttonClassDelete}
                     aria-label={translations.removeAriaLabel}
                     onClick={() => {
-                      if (window.confirm('Are you sure you wish to delete this item?')) {
-                        removeItems(path,[index])();
+                      if (
+                        window.confirm(
+                          'Are you sure you wish to delete this item?'
+                        )
+                      ) {
+                        removeItems(path, [index])();
                       }
-                  }}>{translations.removeTooltip}</button>
+                    }}
+                  >
+                    {translations.removeTooltip}
+                  </button>
                 </div>
               </div>
             );
           })
         ) : (
-            <p>{translations.noDataMessage}</p>
+          <p>{translations.noDataMessage}</p>
         )}
       </div>
     </div>
   );
 };
 
+export const ArrayControlRenderer = ({
+  schema,
+  uischema,
+  data,
+  path,
+  rootSchema,
+  uischemas,
+  addItem,
+  getStyle,
+  getStyleAsClassName,
+  removeItems,
+  moveUp,
+  moveDown,
+  id,
+  visible,
+  enabled,
+  errors,
+  translations,
+}: ArrayControlProps & VanillaRendererProps) => {
+  const controlElement = uischema as ControlElement;
+  const labelDescription = Helpers.createLabelDescriptionFrom(
+    controlElement,
+    schema
+  );
+  const label = labelDescription.show ? labelDescription.text : '';
+  const controlClassName = `control ${Helpers.convertToValidClassName(
+    controlElement.scope
+  )}`;
+  const fieldSetClassName = getStyleAsClassName('array.layout');
+  const buttonClassName = getStyleAsClassName('array.button');
+  const childrenClassName = getStyleAsClassName('array.children');
+  const classNames: { [className: string]: string } = {
+    wrapper: controlClassName,
+    fieldSet: fieldSetClassName,
+    button: buttonClassName,
+    children: childrenClassName,
+  };
 
-export const ArrayControlRenderer =
-    ({
-        schema,
-        uischema,
-        data,
-        path,
-        rootSchema,
-        uischemas,
-        addItem,
-        getStyle,
-        getStyleAsClassName,
-        removeItems,
-        moveUp,
-        moveDown,        
-        id,
-        visible,
-        enabled,
-        errors,
-        translations
-    }: ArrayControlProps & VanillaRendererProps) => {
-        const controlElement = uischema as ControlElement;
-        const labelDescription = Helpers.createLabelDescriptionFrom(controlElement, schema);
-        const label = labelDescription.show ? labelDescription.text : '';
-        const controlClassName =
-            `control ${(Helpers.convertToValidClassName(controlElement.scope))}`;
-        const fieldSetClassName = getStyleAsClassName('array.layout');
-        const buttonClassName = getStyleAsClassName('array.button');
-        const childrenClassName = getStyleAsClassName('array.children');
-        const classNames: { [className: string]: string } = {
-            wrapper: controlClassName,
-            fieldSet: fieldSetClassName,
-            button: buttonClassName,
-            children: childrenClassName
-        };
+  return (
+    <ArrayControl
+      classNames={classNames}
+      data={data}
+      label={label}
+      path={path}
+      schema={schema}
+      errors={errors}
+      addItem={addItem}
+      removeItems={removeItems}
+      moveUp={moveUp}
+      moveDown={moveDown}
+      uischema={uischema}
+      uischemas={uischemas}
+      getStyleAsClassName={getStyleAsClassName}
+      rootSchema={rootSchema}
+      id={id}
+      visible={visible}
+      enabled={enabled}
+      getStyle={getStyle}
+      translations={translations}
+    />
+  );
+};
 
-        return (
-            <ArrayControl
-                classNames={classNames}
-                data={data}
-                label={label}
-                path={path}
-                schema={schema}
-                errors={errors}
-                addItem={addItem}
-                removeItems={removeItems}
-                moveUp={moveUp}
-                moveDown={moveDown}
-                uischema={uischema}
-                uischemas={uischemas}
-                getStyleAsClassName={getStyleAsClassName}
-                rootSchema={rootSchema}
-                id={id}
-                visible={visible}
-                enabled={enabled}
-                getStyle={getStyle}
-                translations={translations}
-            />
-        );
-    };
-    
-export default withVanillaControlProps(withJsonFormsArrayControlProps(ArrayControlRenderer));
+export default withVanillaControlProps(
+  withJsonFormsArrayControlProps(ArrayControlRenderer)
+);
diff --git a/packages/vanilla-renderers/src/complex/array/index.ts b/packages/vanilla-renderers/src/complex/array/index.ts
index b4f599f48..2cd3e0954 100644
--- a/packages/vanilla-renderers/src/complex/array/index.ts
+++ b/packages/vanilla-renderers/src/complex/array/index.ts
@@ -25,7 +25,7 @@
 import {
   isObjectArrayWithNesting,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import ArrayControlRenderer, { ArrayControl } from './ArrayControlRenderer';
 export { ArrayControlRenderer, ArrayControl };
diff --git a/packages/vanilla-renderers/src/complex/categorization/CategorizationList.tsx b/packages/vanilla-renderers/src/complex/categorization/CategorizationList.tsx
index 7de5e0974..7f53925b4 100644
--- a/packages/vanilla-renderers/src/complex/categorization/CategorizationList.tsx
+++ b/packages/vanilla-renderers/src/complex/categorization/CategorizationList.tsx
@@ -23,11 +23,18 @@
   THE SOFTWARE.
 */
 import React, { useMemo } from 'react';
-import { Categorization, Category, deriveLabelForUISchemaElement, Translator } from '@jsonforms/core';
+import {
+  Categorization,
+  Category,
+  deriveLabelForUISchemaElement,
+  Translator,
+} from '@jsonforms/core';
 import { isCategorization } from './tester';
 
-const getCategoryClassName = (category: Category, selectedCategory: Category): string =>
-  selectedCategory === category ? 'selected' : '';
+const getCategoryClassName = (
+  category: Category,
+  selectedCategory: Category
+): string => (selectedCategory === category ? 'selected' : '');
 
 export interface CategorizationProps {
   categorization: Categorization;
@@ -39,56 +46,53 @@ export interface CategorizationProps {
   t: Translator;
 }
 
-export const CategorizationList  = (
-  {
-    categorization,
-    selectedCategory,
-    depth,
-    onSelect,
-    subcategoriesClassName,
-    groupClassName,
-    t
-  }: CategorizationProps) => {
-
-  const categoryLabels = useMemo(() =>
-     categorization.elements.map(cat => deriveLabelForUISchemaElement(cat, t)),
-  [categorization, t])
+export const CategorizationList = ({
+  categorization,
+  selectedCategory,
+  depth,
+  onSelect,
+  subcategoriesClassName,
+  groupClassName,
+  t,
+}: CategorizationProps) => {
+  const categoryLabels = useMemo(
+    () =>
+      categorization.elements.map((cat) =>
+        deriveLabelForUISchemaElement(cat, t)
+      ),
+    [categorization, t]
+  );
 
   return (
     <ul className={subcategoriesClassName}>
-      {
-        categorization.elements.map((category, idx) => {
-          if (isCategorization(category)) {
-            return (
-              <li
-                key={categoryLabels[idx]}
-                className={groupClassName}
-              >
-                <span>{categoryLabels[idx]}</span>
-                <CategorizationList
-                  categorization={category}
-                  selectedCategory={selectedCategory}
-                  depth={depth + 1}
-                  onSelect={onSelect}
-                  subcategoriesClassName={subcategoriesClassName}
-                  groupClassName={groupClassName}
-                  t={t}
-                />
-              </li>
-            );
-          } else {
-            return (
-              <li
-                key={categoryLabels[idx]}
-                onClick={onSelect(category)}
-                className={getCategoryClassName(category, selectedCategory)}
-              >
-                <span>{categoryLabels[idx]}</span>
-              </li>
-            );
-          }
-        })
-      }
+      {categorization.elements.map((category, idx) => {
+        if (isCategorization(category)) {
+          return (
+            <li key={categoryLabels[idx]} className={groupClassName}>
+              <span>{categoryLabels[idx]}</span>
+              <CategorizationList
+                categorization={category}
+                selectedCategory={selectedCategory}
+                depth={depth + 1}
+                onSelect={onSelect}
+                subcategoriesClassName={subcategoriesClassName}
+                groupClassName={groupClassName}
+                t={t}
+              />
+            </li>
+          );
+        } else {
+          return (
+            <li
+              key={categoryLabels[idx]}
+              onClick={onSelect(category)}
+              className={getCategoryClassName(category, selectedCategory)}
+            >
+              <span>{categoryLabels[idx]}</span>
+            </li>
+          );
+        }
+      })}
     </ul>
   );
-}
+};
diff --git a/packages/vanilla-renderers/src/complex/categorization/CategorizationRenderer.tsx b/packages/vanilla-renderers/src/complex/categorization/CategorizationRenderer.tsx
index 98a9f55c5..ada4ffc41 100644
--- a/packages/vanilla-renderers/src/complex/categorization/CategorizationRenderer.tsx
+++ b/packages/vanilla-renderers/src/complex/categorization/CategorizationRenderer.tsx
@@ -23,12 +23,13 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import type {
-  Categorization,
-  Category,
-  LayoutProps
-} from '@jsonforms/core';
-import { RendererComponent, TranslateProps, withJsonFormsLayoutProps, withTranslateProps } from '@jsonforms/react';
+import type { Categorization, Category, LayoutProps } from '@jsonforms/core';
+import {
+  RendererComponent,
+  TranslateProps,
+  withJsonFormsLayoutProps,
+  withTranslateProps,
+} from '@jsonforms/react';
 import { CategorizationList } from './CategorizationList';
 import { SingleCategory } from './SingleCategory';
 import { isCategorization } from './tester';
@@ -104,4 +105,6 @@ class CategorizationRenderer extends RendererComponent<
   }
 }
 
-export default withVanillaControlProps(withTranslateProps(withJsonFormsLayoutProps(CategorizationRenderer)));
+export default withVanillaControlProps(
+  withTranslateProps(withJsonFormsLayoutProps(CategorizationRenderer))
+);
diff --git a/packages/vanilla-renderers/src/complex/categorization/SingleCategory.tsx b/packages/vanilla-renderers/src/complex/categorization/SingleCategory.tsx
index 70e956505..71d8f5d29 100644
--- a/packages/vanilla-renderers/src/complex/categorization/SingleCategory.tsx
+++ b/packages/vanilla-renderers/src/complex/categorization/SingleCategory.tsx
@@ -35,17 +35,13 @@ export interface CategoryProps {
 export const SingleCategory = ({ category, schema, path }: CategoryProps) => (
   // TODO: add selected style
   <div id='categorization.detail'>
-    {
-      (category.elements || []).map((child, index) =>
-        (
-          <JsonFormsDispatch
-            key={`${path}-${index}`}
-            uischema={child}
-            schema={schema}
-            path={path}
-          />
-        )
-      )
-    }
+    {(category.elements || []).map((child, index) => (
+      <JsonFormsDispatch
+        key={`${path}-${index}`}
+        uischema={child}
+        schema={schema}
+        path={path}
+      />
+    ))}
   </div>
 );
diff --git a/packages/vanilla-renderers/src/complex/categorization/index.ts b/packages/vanilla-renderers/src/complex/categorization/index.ts
index e7784a361..b3effd3e7 100644
--- a/packages/vanilla-renderers/src/complex/categorization/index.ts
+++ b/packages/vanilla-renderers/src/complex/categorization/index.ts
@@ -32,7 +32,7 @@ export {
   CategorizationList,
   CategorizationProps,
   CategorizationRenderer,
-  SingleCategory
+  SingleCategory,
 };
 
 export default CategorizationRenderer;
diff --git a/packages/vanilla-renderers/src/complex/categorization/tester.ts b/packages/vanilla-renderers/src/complex/categorization/tester.ts
index e2f2d41b6..f4dabbef9 100644
--- a/packages/vanilla-renderers/src/complex/categorization/tester.ts
+++ b/packages/vanilla-renderers/src/complex/categorization/tester.ts
@@ -29,7 +29,7 @@ import {
   Category,
   RankedTester,
   rankWith,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 
 export const isCategorization = (
@@ -38,14 +38,14 @@ export const isCategorization = (
 
 export const categorizationTester: RankedTester = rankWith(
   1,
-  and(uiTypeIs('Categorization'), uischema => {
+  and(uiTypeIs('Categorization'), (uischema) => {
     const hasCategory = (element: Categorization): boolean => {
       if (isEmpty(element.elements)) {
         return false;
       }
 
       return element.elements
-        .map(elem =>
+        .map((elem) =>
           isCategorization(elem) ? hasCategory(elem) : elem.type === 'Category'
         )
         .reduce((prev, curr) => prev && curr, true);
diff --git a/packages/vanilla-renderers/src/complex/index.ts b/packages/vanilla-renderers/src/complex/index.ts
index 26ceb091d..709c682b3 100644
--- a/packages/vanilla-renderers/src/complex/index.ts
+++ b/packages/vanilla-renderers/src/complex/index.ts
@@ -26,7 +26,7 @@ import ArrayControl, { arrayControlTester } from './array';
 import Categorization, { categorizationTester } from './categorization';
 import LabelRenderer, { labelRendererTester } from './LabelRenderer';
 import TableArrayControl, {
-  tableArrayControlTester
+  tableArrayControlTester,
 } from './TableArrayControl';
 
 export {
@@ -37,5 +37,5 @@ export {
   LabelRenderer,
   labelRendererTester,
   TableArrayControl,
-  tableArrayControlTester
+  tableArrayControlTester,
 };
diff --git a/packages/vanilla-renderers/src/controls/InputControl.tsx b/packages/vanilla-renderers/src/controls/InputControl.tsx
index 9d053ceb3..2bb0f6c2a 100644
--- a/packages/vanilla-renderers/src/controls/InputControl.tsx
+++ b/packages/vanilla-renderers/src/controls/InputControl.tsx
@@ -32,12 +32,12 @@ import {
   isDescriptionHidden,
   NOT_APPLICABLE,
   RankedTester,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import {
   Control,
   DispatchCell,
-  withJsonFormsControlProps
+  withJsonFormsControlProps,
 } from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
 import type { VanillaRendererProps } from '../index';
@@ -62,7 +62,7 @@ export class InputControl extends Control<
       required,
       path,
       cells,
-      config
+      config,
     } = this.props;
 
     const isValid = errors.length === 0;
@@ -80,9 +80,9 @@ export class InputControl extends Control<
     );
     const testerContext = {
       rootSchema: rootSchema,
-      config: config
+      config: config,
     };
-    const cell = maxBy(cells, r => r.tester(uischema, schema, testerContext));
+    const cell = maxBy(cells, (r) => r.tester(uischema, schema, testerContext));
     if (
       cell === undefined ||
       cell.tester(uischema, schema, testerContext) === NOT_APPLICABLE
diff --git a/packages/vanilla-renderers/src/controls/OneOfRadioGroupControl.tsx b/packages/vanilla-renderers/src/controls/OneOfRadioGroupControl.tsx
index 55dc339bf..822a1ddb2 100644
--- a/packages/vanilla-renderers/src/controls/OneOfRadioGroupControl.tsx
+++ b/packages/vanilla-renderers/src/controls/OneOfRadioGroupControl.tsx
@@ -36,7 +36,9 @@ import type { VanillaRendererProps } from '../index';
 import { withJsonFormsOneOfEnumProps } from '@jsonforms/react';
 import { RadioGroup } from './RadioGroup';
 
-export const OneOfRadioGroupControl = (props: ControlProps & VanillaRendererProps) => {
+export const OneOfRadioGroupControl = (
+  props: ControlProps & VanillaRendererProps
+) => {
   return <RadioGroup {...props} />;
 };
 
@@ -45,4 +47,6 @@ export const oneOfRadioGroupControlTester: RankedTester = rankWith(
   and(isOneOfEnumControl, optionIs('format', 'radio'))
 );
 
-export default withVanillaControlProps(withJsonFormsOneOfEnumProps(OneOfRadioGroupControl));
+export default withVanillaControlProps(
+  withJsonFormsOneOfEnumProps(OneOfRadioGroupControl)
+);
diff --git a/packages/vanilla-renderers/src/controls/RadioGroup.tsx b/packages/vanilla-renderers/src/controls/RadioGroup.tsx
index 5128dad6d..3540649bf 100644
--- a/packages/vanilla-renderers/src/controls/RadioGroup.tsx
+++ b/packages/vanilla-renderers/src/controls/RadioGroup.tsx
@@ -27,7 +27,7 @@ import {
   computeLabel,
   ControlProps,
   isDescriptionHidden,
-  OwnPropsOfEnum
+  OwnPropsOfEnum,
 } from '@jsonforms/core';
 import type { VanillaRendererProps } from '../index';
 import { findStyleAsClassName } from '../reducers/styling';
@@ -49,14 +49,26 @@ export const RadioGroup = ({
   config,
   enabled,
   path,
-  handleChange
+  handleChange,
 }: ControlProps & VanillaRendererProps & OwnPropsOfEnum) => {
   const contextStyles = useStyles();
   const [isFocused, setFocus] = useState(false);
-  const radioControl = useMemo(() => findStyleAsClassName(contextStyles)('control.radio'), [contextStyles]);
-  const radioOption = useMemo(() => findStyleAsClassName(contextStyles)('control.radio.option'), [contextStyles]);
-  const radioInput = useMemo(() => findStyleAsClassName(contextStyles)('control.radio.input'), [contextStyles]);
-  const radioLabel = useMemo(() => findStyleAsClassName(contextStyles)('control.radio.label'), [contextStyles]);
+  const radioControl = useMemo(
+    () => findStyleAsClassName(contextStyles)('control.radio'),
+    [contextStyles]
+  );
+  const radioOption = useMemo(
+    () => findStyleAsClassName(contextStyles)('control.radio.option'),
+    [contextStyles]
+  );
+  const radioInput = useMemo(
+    () => findStyleAsClassName(contextStyles)('control.radio.input'),
+    [contextStyles]
+  );
+  const radioLabel = useMemo(
+    () => findStyleAsClassName(contextStyles)('control.radio.label'),
+    [contextStyles]
+  );
   const isValid = errors.length === 0;
   const divClassNames = [classNames.validation]
     .concat(isValid ? classNames.description : classNames.validationError)
@@ -73,7 +85,8 @@ export const RadioGroup = ({
   if (hasRadioClass) {
     groupStyle = {
       display: 'flex',
-      flexDirection: ('vertical' === appliedUiSchemaOptions.orientation) ? 'column' : 'row'
+      flexDirection:
+        'vertical' === appliedUiSchemaOptions.orientation ? 'column' : 'row',
     };
   }
   return (
@@ -91,7 +104,7 @@ export const RadioGroup = ({
         )}
       </label>
       <div className={radioControl} style={groupStyle}>
-        {options.map(option => (
+        {options.map((option) => (
           <div key={option.label} className={radioOption}>
             <input
               type='radio'
@@ -99,14 +112,11 @@ export const RadioGroup = ({
               id={option.value}
               name={id}
               checked={data === option.value}
-              onChange={ev => handleChange(path, ev.currentTarget.value)}
+              onChange={(ev) => handleChange(path, ev.currentTarget.value)}
               disabled={!enabled}
               className={radioInput}
             />
-            <label
-              htmlFor={option.value}
-              className={radioLabel}
-            >
+            <label htmlFor={option.value} className={radioLabel}>
               {option.label}
             </label>
           </div>
@@ -118,4 +128,3 @@ export const RadioGroup = ({
     </div>
   );
 };
-
diff --git a/packages/vanilla-renderers/src/controls/RadioGroupControl.tsx b/packages/vanilla-renderers/src/controls/RadioGroupControl.tsx
index 1386c1240..11a797af4 100644
--- a/packages/vanilla-renderers/src/controls/RadioGroupControl.tsx
+++ b/packages/vanilla-renderers/src/controls/RadioGroupControl.tsx
@@ -27,13 +27,17 @@ import {
   and,
   ControlProps,
   isEnumControl,
-  optionIs, RankedTester, rankWith
+  optionIs,
+  RankedTester,
+  rankWith,
 } from '@jsonforms/core';
 import { withJsonFormsEnumProps } from '@jsonforms/react';
 import { RadioGroup } from './RadioGroup';
 import { withVanillaControlProps } from '../util';
 import type { VanillaRendererProps } from '../index';
-export const RadioGroupControl = (props: ControlProps & VanillaRendererProps) => {
+export const RadioGroupControl = (
+  props: ControlProps & VanillaRendererProps
+) => {
   return <RadioGroup {...props} />;
 };
 
@@ -41,4 +45,6 @@ export const radioGroupControlTester: RankedTester = rankWith(
   3,
   and(isEnumControl, optionIs('format', 'radio'))
 );
-export default withVanillaControlProps(withJsonFormsEnumProps(RadioGroupControl));
+export default withVanillaControlProps(
+  withJsonFormsEnumProps(RadioGroupControl)
+);
diff --git a/packages/vanilla-renderers/src/controls/index.ts b/packages/vanilla-renderers/src/controls/index.ts
index fa601cad6..4035bbe9d 100644
--- a/packages/vanilla-renderers/src/controls/index.ts
+++ b/packages/vanilla-renderers/src/controls/index.ts
@@ -23,13 +23,17 @@
   THE SOFTWARE.
 */
 import InputControl, { inputControlTester } from './InputControl';
-import RadioGroupControl, { radioGroupControlTester } from './RadioGroupControl';
-import OneOfRadioGroupControl, { oneOfRadioGroupControlTester } from './OneOfRadioGroupControl';
+import RadioGroupControl, {
+  radioGroupControlTester,
+} from './RadioGroupControl';
+import OneOfRadioGroupControl, {
+  oneOfRadioGroupControlTester,
+} from './OneOfRadioGroupControl';
 export {
   InputControl,
   inputControlTester,
   RadioGroupControl,
   radioGroupControlTester,
   OneOfRadioGroupControl,
-  oneOfRadioGroupControlTester
+  oneOfRadioGroupControlTester,
 };
diff --git a/packages/vanilla-renderers/src/index.ts b/packages/vanilla-renderers/src/index.ts
index b6ccc7caa..bdd518bfc 100644
--- a/packages/vanilla-renderers/src/index.ts
+++ b/packages/vanilla-renderers/src/index.ts
@@ -43,10 +43,17 @@ import {
   TextCell,
   textCellTester,
   TimeCell,
-  timeCellTester
+  timeCellTester,
 } from './cells';
 
-import { InputControl, inputControlTester, RadioGroupControl, radioGroupControlTester, OneOfRadioGroupControl, oneOfRadioGroupControlTester,  } from './controls';
+import {
+  InputControl,
+  inputControlTester,
+  RadioGroupControl,
+  radioGroupControlTester,
+  OneOfRadioGroupControl,
+  oneOfRadioGroupControlTester,
+} from './controls';
 
 import {
   ArrayControl,
@@ -56,7 +63,7 @@ import {
   LabelRenderer,
   labelRendererTester,
   TableArrayControl,
-  tableArrayControlTester
+  tableArrayControlTester,
 } from './complex';
 
 import {
@@ -65,7 +72,7 @@ import {
   HorizontalLayout,
   horizontalLayoutTester,
   VerticalLayout,
-  verticalLayoutTester
+  verticalLayoutTester,
 } from './layouts';
 import DateTimeCell from './cells/DateTimeCell';
 
@@ -118,7 +125,7 @@ export const vanillaRenderers: { tester: RankedTester; renderer: any }[] = [
   { tester: tableArrayControlTester, renderer: TableArrayControl },
   { tester: groupTester, renderer: GroupLayout },
   { tester: verticalLayoutTester, renderer: VerticalLayout },
-  { tester: horizontalLayoutTester, renderer: HorizontalLayout }
+  { tester: horizontalLayoutTester, renderer: HorizontalLayout },
 ];
 
 export const vanillaCells: { tester: RankedTester; cell: any }[] = [
@@ -131,5 +138,5 @@ export const vanillaCells: { tester: RankedTester; cell: any }[] = [
   { tester: sliderCellTester, cell: SliderCell },
   { tester: textAreaCellTester, cell: TextAreaCell },
   { tester: textCellTester, cell: TextCell },
-  { tester: timeCellTester, cell: TimeCell }
+  { tester: timeCellTester, cell: TimeCell },
 ];
diff --git a/packages/vanilla-renderers/src/layouts/GroupLayout.tsx b/packages/vanilla-renderers/src/layouts/GroupLayout.tsx
index fdee7d9bd..6cd9b5ecb 100644
--- a/packages/vanilla-renderers/src/layouts/GroupLayout.tsx
+++ b/packages/vanilla-renderers/src/layouts/GroupLayout.tsx
@@ -24,7 +24,13 @@
 */
 import isEmpty from 'lodash/isEmpty';
 import React, { FunctionComponent } from 'react';
-import { GroupLayout, LayoutProps, RankedTester, rankWith, uiTypeIs } from '@jsonforms/core';
+import {
+  GroupLayout,
+  LayoutProps,
+  RankedTester,
+  rankWith,
+  uiTypeIs,
+} from '@jsonforms/core';
 import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import { renderChildren } from './util';
 import type { VanillaRendererProps } from '../index';
@@ -37,14 +43,18 @@ import { withVanillaControlProps } from '../util';
  */
 export const groupTester: RankedTester = rankWith(1, uiTypeIs('Group'));
 
-export const GroupLayoutRenderer = (props: LayoutProps & VanillaRendererProps) => {
-  const {data, ...otherProps} = props;
+export const GroupLayoutRenderer = (
+  props: LayoutProps & VanillaRendererProps
+) => {
+  const { data, ...otherProps } = props;
   // We don't hand over data to the layout renderer to avoid rerendering it with every data change
-  return <GroupLayoutRendererComponent {...otherProps}/>;
-}
+  return <GroupLayoutRendererComponent {...otherProps} />;
+};
 
-const GroupLayoutRendererComponent: FunctionComponent<LayoutProps & VanillaRendererProps> = React.memo((
-  {
+const GroupLayoutRendererComponent: FunctionComponent<
+  LayoutProps & VanillaRendererProps
+> = React.memo(
+  ({
     schema,
     uischema,
     path,
@@ -52,29 +62,33 @@ const GroupLayoutRendererComponent: FunctionComponent<LayoutProps & VanillaRende
     visible,
     label,
     getStyle,
-    getStyleAsClassName
+    getStyleAsClassName,
   }: LayoutProps & VanillaRendererProps) => {
-  const group = uischema as GroupLayout;
-  const elementsSize = group.elements ? group.elements.length : 0;
-  const classNames = getStyleAsClassName('group.layout');
-  const childClassNames = ['group-layout-item']
-    .concat(getStyle('group.layout.item', elementsSize))
-    .join(' ');
+    const group = uischema as GroupLayout;
+    const elementsSize = group.elements ? group.elements.length : 0;
+    const classNames = getStyleAsClassName('group.layout');
+    const childClassNames = ['group-layout-item']
+      .concat(getStyle('group.layout.item', elementsSize))
+      .join(' ');
 
-  return (
-    <fieldset
-      className={classNames}
-      hidden={visible === undefined || visible === null ? false : !visible}
-    >
-      {
-        !isEmpty(label) ?
+    return (
+      <fieldset
+        className={classNames}
+        hidden={visible === undefined || visible === null ? false : !visible}
+      >
+        {!isEmpty(label) ? (
           <legend className={getStyleAsClassName('group.label')}>
             {label}
-          </legend> : ''
-      }
-      {renderChildren(group, schema, childClassNames, path, enabled)}
-    </fieldset>
-  );
-});
+          </legend>
+        ) : (
+          ''
+        )}
+        {renderChildren(group, schema, childClassNames, path, enabled)}
+      </fieldset>
+    );
+  }
+);
 
-export default withVanillaControlProps(withJsonFormsLayoutProps(GroupLayoutRenderer));
+export default withVanillaControlProps(
+  withJsonFormsLayoutProps(GroupLayoutRenderer)
+);
diff --git a/packages/vanilla-renderers/src/layouts/HorizontalLayout.tsx b/packages/vanilla-renderers/src/layouts/HorizontalLayout.tsx
index 155f6f6a5..9ffed0b23 100644
--- a/packages/vanilla-renderers/src/layouts/HorizontalLayout.tsx
+++ b/packages/vanilla-renderers/src/layouts/HorizontalLayout.tsx
@@ -28,7 +28,7 @@ import {
   RankedTester,
   rankWith,
   RendererProps,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
@@ -40,47 +40,63 @@ import { VanillaRendererProps } from '../index';
  * Default tester for a horizontal layout.
  * @type {RankedTester}
  */
-export const horizontalLayoutTester: RankedTester = rankWith(1, uiTypeIs('HorizontalLayout'));
+export const horizontalLayoutTester: RankedTester = rankWith(
+  1,
+  uiTypeIs('HorizontalLayout')
+);
 
-export const HorizontalLayoutRenderer = (props: RendererProps & VanillaRendererProps) => {
-  const {data, ...otherProps} = props;
+export const HorizontalLayoutRenderer = (
+  props: RendererProps & VanillaRendererProps
+) => {
+  const { data, ...otherProps } = props;
   // We don't hand over data to the layout renderer to avoid rerendering it with every data change
-  return <HorizontalLayoutRendererComponent {...otherProps}/>;
-}
+  return <HorizontalLayoutRendererComponent {...otherProps} />;
+};
 
-const HorizontalLayoutRendererComponent: FunctionComponent<RendererProps & VanillaRendererProps> = React.memo((
-  {
+const HorizontalLayoutRendererComponent: FunctionComponent<
+  RendererProps & VanillaRendererProps
+> = React.memo(
+  ({
     schema,
     uischema,
     getStyle,
     getStyleAsClassName,
     enabled,
     visible,
-    path
-  }: RendererProps & VanillaRendererProps
-) => {
-
-  const horizontalLayout = uischema as HorizontalLayout;
-  const elementsSize = horizontalLayout.elements ? horizontalLayout.elements.length : 0;
-  const layoutClassName = getStyleAsClassName('horizontal.layout');
-  const childClassNames = ['horizontal-layout-item']
-    .concat(getStyle('horizontal.layout.item', elementsSize))
-    .join(' ');
+    path,
+  }: RendererProps & VanillaRendererProps) => {
+    const horizontalLayout = uischema as HorizontalLayout;
+    const elementsSize = horizontalLayout.elements
+      ? horizontalLayout.elements.length
+      : 0;
+    const layoutClassName = getStyleAsClassName('horizontal.layout');
+    const childClassNames = ['horizontal-layout-item']
+      .concat(getStyle('horizontal.layout.item', elementsSize))
+      .join(' ');
 
-  return (
-    <JsonFormsLayout
-      className={layoutClassName}
-      visible={visible}
-      enabled={enabled}
-      path={path}
-      uischema={uischema}
-      schema={schema}
-      getStyle={getStyle}
-      getStyleAsClassName={getStyleAsClassName}
-    >
-      {renderChildren(horizontalLayout, schema, childClassNames, path, enabled)}
-    </JsonFormsLayout>
-  );
-});
+    return (
+      <JsonFormsLayout
+        className={layoutClassName}
+        visible={visible}
+        enabled={enabled}
+        path={path}
+        uischema={uischema}
+        schema={schema}
+        getStyle={getStyle}
+        getStyleAsClassName={getStyleAsClassName}
+      >
+        {renderChildren(
+          horizontalLayout,
+          schema,
+          childClassNames,
+          path,
+          enabled
+        )}
+      </JsonFormsLayout>
+    );
+  }
+);
 
-export default withVanillaControlProps(withJsonFormsLayoutProps(HorizontalLayoutRenderer, false));
+export default withVanillaControlProps(
+  withJsonFormsLayoutProps(HorizontalLayoutRenderer, false)
+);
diff --git a/packages/vanilla-renderers/src/layouts/JsonFormsLayout.tsx b/packages/vanilla-renderers/src/layouts/JsonFormsLayout.tsx
index 4f2b37405..bc5fd7eef 100644
--- a/packages/vanilla-renderers/src/layouts/JsonFormsLayout.tsx
+++ b/packages/vanilla-renderers/src/layouts/JsonFormsLayout.tsx
@@ -26,9 +26,11 @@ import React from 'react';
 import { RendererProps } from '@jsonforms/core';
 import { VanillaRendererProps, WithChildren } from '../index';
 
-export const JsonFormsLayout =
-    ({ className, children, visible }: RendererProps & VanillaRendererProps & WithChildren) => {
-
+export const JsonFormsLayout = ({
+  className,
+  children,
+  visible,
+}: RendererProps & VanillaRendererProps & WithChildren) => {
   return (
     <div
       className={className}
diff --git a/packages/vanilla-renderers/src/layouts/VerticalLayout.tsx b/packages/vanilla-renderers/src/layouts/VerticalLayout.tsx
index e3d6b6e81..33015fd08 100644
--- a/packages/vanilla-renderers/src/layouts/VerticalLayout.tsx
+++ b/packages/vanilla-renderers/src/layouts/VerticalLayout.tsx
@@ -28,7 +28,7 @@ import {
   rankWith,
   RendererProps,
   uiTypeIs,
-  VerticalLayout
+  VerticalLayout,
 } from '@jsonforms/core';
 import { withJsonFormsLayoutProps } from '@jsonforms/react';
 import { withVanillaControlProps } from '../util';
@@ -40,46 +40,57 @@ import { VanillaRendererProps } from '../index';
  * Default tester for a vertical layout.
  * @type {RankedTester}
  */
-export const verticalLayoutTester: RankedTester = rankWith(1, uiTypeIs('VerticalLayout'));
+export const verticalLayoutTester: RankedTester = rankWith(
+  1,
+  uiTypeIs('VerticalLayout')
+);
 
-export const VerticalLayoutRenderer = (props: RendererProps & VanillaRendererProps) => {
-  const {data, ...otherProps} = props;
+export const VerticalLayoutRenderer = (
+  props: RendererProps & VanillaRendererProps
+) => {
+  const { data, ...otherProps } = props;
   // We don't hand over data to the layout renderer to avoid rerendering it with every data change
-  return <VerticalLayoutRendererComponent {...otherProps}/>;
-}
+  return <VerticalLayoutRendererComponent {...otherProps} />;
+};
 
-const VerticalLayoutRendererComponent: FunctionComponent<RendererProps & VanillaRendererProps> = React.memo((
-  {
+const VerticalLayoutRendererComponent: FunctionComponent<
+  RendererProps & VanillaRendererProps
+> = React.memo(
+  ({
     schema,
     uischema,
     path,
     visible,
     enabled,
     getStyle,
-    getStyleAsClassName
+    getStyleAsClassName,
   }: RendererProps & VanillaRendererProps) => {
+    const verticalLayout = uischema as VerticalLayout;
+    const elementsSize = verticalLayout.elements
+      ? verticalLayout.elements.length
+      : 0;
+    const layoutClassName = getStyleAsClassName('vertical.layout');
+    const childClassNames = ['vertical-layout-item']
+      .concat(getStyle('vertical.layout.item', elementsSize))
+      .join(' ');
 
-  const verticalLayout = uischema as VerticalLayout;
-  const elementsSize = verticalLayout.elements ? verticalLayout.elements.length : 0;
-  const layoutClassName = getStyleAsClassName('vertical.layout');
-  const childClassNames = ['vertical-layout-item']
-    .concat(getStyle('vertical.layout.item', elementsSize))
-    .join(' ');
+    return (
+      <JsonFormsLayout
+        className={layoutClassName}
+        uischema={uischema}
+        schema={schema}
+        visible={visible}
+        enabled={enabled}
+        path={path}
+        getStyle={getStyle}
+        getStyleAsClassName={getStyleAsClassName}
+      >
+        {renderChildren(verticalLayout, schema, childClassNames, path, enabled)}
+      </JsonFormsLayout>
+    );
+  }
+);
 
-  return (
-    <JsonFormsLayout
-      className={layoutClassName}
-      uischema={uischema}
-      schema={schema}
-      visible={visible}
-      enabled={enabled}
-      path={path}
-      getStyle={getStyle}
-      getStyleAsClassName={getStyleAsClassName}
-    >
-      {renderChildren(verticalLayout, schema, childClassNames, path, enabled)}
-    </JsonFormsLayout>
-  );
-});
-
-export default withVanillaControlProps(withJsonFormsLayoutProps(VerticalLayoutRenderer, false));
+export default withVanillaControlProps(
+  withJsonFormsLayoutProps(VerticalLayoutRenderer, false)
+);
diff --git a/packages/vanilla-renderers/src/layouts/index.ts b/packages/vanilla-renderers/src/layouts/index.ts
index 682209caa..8c4c49fa7 100644
--- a/packages/vanilla-renderers/src/layouts/index.ts
+++ b/packages/vanilla-renderers/src/layouts/index.ts
@@ -32,5 +32,5 @@ export {
   HorizontalLayout,
   horizontalLayoutTester,
   VerticalLayout,
-  verticalLayoutTester
+  verticalLayoutTester,
 };
diff --git a/packages/vanilla-renderers/src/reducers/index.ts b/packages/vanilla-renderers/src/reducers/index.ts
index 333fd5ea7..6399fa137 100644
--- a/packages/vanilla-renderers/src/reducers/index.ts
+++ b/packages/vanilla-renderers/src/reducers/index.ts
@@ -26,11 +26,11 @@ import { findStyle, findStyleAsClassName, stylingReducer } from './styling';
 import { JsonFormsState } from '@jsonforms/core';
 export { stylingReducer };
 
-export const getStyle = (state: JsonFormsState) => (
-  styleName: string,
-  ...args: any[]
-): string[] => findStyle(state.jsonforms.styles)(styleName, args);
-export const getStyleAsClassName = (state: JsonFormsState) => (
-  styleName: string,
-  ...args: any[]
-) => findStyleAsClassName(state.jsonforms.styles)(styleName, args);
+export const getStyle =
+  (state: JsonFormsState) =>
+  (styleName: string, ...args: any[]): string[] =>
+    findStyle(state.jsonforms.styles)(styleName, args);
+export const getStyleAsClassName =
+  (state: JsonFormsState) =>
+  (styleName: string, ...args: any[]) =>
+    findStyleAsClassName(state.jsonforms.styles)(styleName, args);
diff --git a/packages/vanilla-renderers/src/reducers/styling.ts b/packages/vanilla-renderers/src/reducers/styling.ts
index 2a7de25d2..ecb56bb78 100644
--- a/packages/vanilla-renderers/src/reducers/styling.ts
+++ b/packages/vanilla-renderers/src/reducers/styling.ts
@@ -31,7 +31,7 @@ import { StyleDef } from '../styles';
 
 const removeStyle = (styles: StyleDef[], name: string) => {
   const copy = styles.slice();
-  remove(copy, styleDef => styleDef.name === name);
+  remove(copy, (styleDef) => styleDef.name === name);
 
   return copy;
 };
@@ -43,23 +43,26 @@ const registerStyle = (styles: StyleDef[], { name, classNames }: StyleDef) => {
   return copy;
 };
 
-export const findStyle = (styles: StyleDef[]) => (
-  style: string,
-  ...args: any[]
-): string[] => {
-  const foundStyles = filter(styles, s => s.name === style);
-  return reduce(foundStyles, (res: string[], style: StyleDef) => {
-    if (typeof style.classNames === 'function') {
-      return res.concat(style.classNames(args));
-    }
-    return res.concat(style.classNames);
-  }, []);
-};
+export const findStyle =
+  (styles: StyleDef[]) =>
+  (style: string, ...args: any[]): string[] => {
+    const foundStyles = filter(styles, (s) => s.name === style);
+    return reduce(
+      foundStyles,
+      (res: string[], style: StyleDef) => {
+        if (typeof style.classNames === 'function') {
+          return res.concat(style.classNames(args));
+        }
+        return res.concat(style.classNames);
+      },
+      []
+    );
+  };
 
-export const findStyleAsClassName = (styles: StyleDef[]) => (
-  style: string,
-  ...args: any[]
-): string => join(findStyle(styles)(style, args), ' ');
+export const findStyleAsClassName =
+  (styles: StyleDef[]) =>
+  (style: string, ...args: any[]): string =>
+    join(findStyle(styles)(style, args), ' ');
 
 // TODO
 export const stylingReducer = (state: StyleDef[] = [], action: any) => {
@@ -67,7 +70,7 @@ export const stylingReducer = (state: StyleDef[] = [], action: any) => {
     case REGISTER_STYLE: {
       return registerStyle(state, {
         name: action.name,
-        classNames: action.classNames
+        classNames: action.classNames,
       });
     }
     case REGISTER_STYLES: {
diff --git a/packages/vanilla-renderers/src/styles/styleContext.ts b/packages/vanilla-renderers/src/styles/styleContext.ts
index ba45a4bdc..8873fa253 100644
--- a/packages/vanilla-renderers/src/styles/styleContext.ts
+++ b/packages/vanilla-renderers/src/styles/styleContext.ts
@@ -31,12 +31,10 @@ export interface StyleContext {
 }
 
 const defaultContext: StyleContext = {
-  styles: vanillaStyles
+  styles: vanillaStyles,
 };
 
-export const JsonFormsStyleContext = React.createContext(
-  defaultContext
-);
+export const JsonFormsStyleContext = React.createContext(defaultContext);
 
 export const useStyleContext = (): StyleContext =>
   useContext(JsonFormsStyleContext);
diff --git a/packages/vanilla-renderers/src/styles/styles.ts b/packages/vanilla-renderers/src/styles/styles.ts
index 005640f69..9b284bc4d 100644
--- a/packages/vanilla-renderers/src/styles/styles.ts
+++ b/packages/vanilla-renderers/src/styles/styles.ts
@@ -39,138 +39,138 @@ export interface StyleDef {
 export const vanillaStyles: StyleDef[] = [
   {
     name: 'control',
-    classNames: ['control']
+    classNames: ['control'],
   },
   {
     name: 'control.trim',
-    classNames: ['trim']
+    classNames: ['trim'],
   },
   {
     name: 'control.input',
-    classNames: ['input']
+    classNames: ['input'],
   },
   {
     name: 'control.select',
-    classNames: ['select']
+    classNames: ['select'],
   },
   {
     name: 'control.checkbox',
-    classNames: ['checkbox']
+    classNames: ['checkbox'],
   },
   {
     name: 'control.radio',
-    classNames: ['radio']
+    classNames: ['radio'],
   },
   {
     name: 'control.radio.option',
-    classNames: ['radio-option']
+    classNames: ['radio-option'],
   },
   {
     name: 'control.radio.input',
-    classNames: ['radio-input']
+    classNames: ['radio-input'],
   },
   {
     name: 'control.radio.label',
-    classNames: ['radio-label']
+    classNames: ['radio-label'],
   },
   {
     name: 'control.validation.error',
-    classNames: ['validation_error']
+    classNames: ['validation_error'],
   },
   {
     name: 'control.validation',
-    classNames: ['validation']
+    classNames: ['validation'],
   },
   {
     name: 'categorization',
-    classNames: ['categorization']
+    classNames: ['categorization'],
   },
   {
     name: 'categorization.master',
-    classNames: ['categorization-master']
+    classNames: ['categorization-master'],
   },
   {
     name: 'categorization.detail',
-    classNames: ['categorization-detail']
+    classNames: ['categorization-detail'],
   },
   {
     name: 'category.group',
-    classNames: ['category-group']
+    classNames: ['category-group'],
   },
   {
     name: 'category.subcategories',
-    classNames: ['category-subcategories']
+    classNames: ['category-subcategories'],
   },
   {
     name: 'array.layout',
-    classNames: ['array-layout']
+    classNames: ['array-layout'],
   },
   {
     name: 'array.children',
-    classNames: ['children']
+    classNames: ['children'],
   },
   {
     name: 'group.layout',
-    classNames: ['group-layout']
+    classNames: ['group-layout'],
   },
   {
     name: 'horizontal.layout',
-    classNames: ['horizontal-layout']
+    classNames: ['horizontal-layout'],
   },
   {
     name: 'horizontal.layout.item',
-    classNames: ([size]: number[]) => [`horizontal-layout-${size}`]
+    classNames: ([size]: number[]) => [`horizontal-layout-${size}`],
   },
   {
     name: 'vertical.layout',
-    classNames: ['vertical-layout']
+    classNames: ['vertical-layout'],
   },
   {
     name: 'array.table.validation.error',
-    classNames: ['validation_error']
+    classNames: ['validation_error'],
   },
   {
     name: 'array.table.validation',
-    classNames: ['validation']
+    classNames: ['validation'],
   },
   {
     name: 'array.table',
-    classNames: ['array-table-layout', 'control']
+    classNames: ['array-table-layout', 'control'],
   },
   {
     name: 'array.control.validation.error',
-    classNames: ['validation_error']
+    classNames: ['validation_error'],
   },
   {
     name: 'array.control.validation',
-    classNames: ['validation']
+    classNames: ['validation'],
   },
   {
     name: 'array.control.add',
-    classNames: ['button-add']
-  },  
+    classNames: ['button-add'],
+  },
   {
     name: 'array.child.controls',
-    classNames: ['child-controls']
+    classNames: ['child-controls'],
   },
   {
     name: 'array.child.controls.up',
-    classNames: ['button-up']
-  },  
+    classNames: ['button-up'],
+  },
   {
     name: 'array.child.controls.down',
-    classNames: ['button-down']
-  },  
+    classNames: ['button-down'],
+  },
   {
     name: 'array.child.controls.delete',
-    classNames: ['button-delete']
-  },  
+    classNames: ['button-delete'],
+  },
   {
     name: 'array.control',
-    classNames: ['array-control-layout', 'control']
-  },    
+    classNames: ['array-control-layout', 'control'],
+  },
   {
     name: 'input.description',
-    classNames: ['input-description']
-  }
+    classNames: ['input-description'],
+  },
 ];
diff --git a/packages/vanilla-renderers/src/util/i18nDefaults.ts b/packages/vanilla-renderers/src/util/i18nDefaults.ts
index f959ec9d0..508ce9cef 100644
--- a/packages/vanilla-renderers/src/util/i18nDefaults.ts
+++ b/packages/vanilla-renderers/src/util/i18nDefaults.ts
@@ -1,3 +1,3 @@
 export const i18nDefaults = {
-    'enum.none': 'None'
-}
+  'enum.none': 'None',
+};
diff --git a/packages/vanilla-renderers/src/util/index.tsx b/packages/vanilla-renderers/src/util/index.tsx
index 69f0b54cc..81296a2d8 100644
--- a/packages/vanilla-renderers/src/util/index.tsx
+++ b/packages/vanilla-renderers/src/util/index.tsx
@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 export * from './i18nDefaults';
-import React from 'react';
+import React, { ComponentType, useMemo } from 'react';
 import isEmpty from 'lodash/isEmpty';
 import {
   ControlElement,
@@ -35,12 +35,11 @@ import {
   OwnPropsOfRenderer,
   RendererProps,
   StatePropsOfCell,
-  StatePropsOfControl
+  StatePropsOfControl,
 } from '@jsonforms/core';
 import { useJsonForms } from '@jsonforms/react';
 import { getStyle, getStyleAsClassName } from '../reducers';
 import { VanillaRendererProps } from '../index';
-import { ComponentType, useMemo } from 'react';
 import { findStyle, findStyleAsClassName } from '../reducers/styling';
 import { useStyles } from '../styles';
 
@@ -51,12 +50,14 @@ import { useStyles } from '../styles';
  * @param mapStateToProps existing mapStateToProps function
  * @returns {VanillaControlStateProps} vanilla-specific control props
  */
-export const addVanillaControlProps = <P extends StatePropsOfControl>(
-  mapStateToProps: (s: JsonFormsState, p: OwnPropsOfControl) => P
-) => (
-  state: JsonFormsState,
-  ownProps: OwnPropsOfControl
-): StatePropsOfControl & VanillaRendererProps => {
+export const addVanillaControlProps =
+  <P extends StatePropsOfControl>(
+    mapStateToProps: (s: JsonFormsState, p: OwnPropsOfControl) => P
+  ) =>
+  (
+    state: JsonFormsState,
+    ownProps: OwnPropsOfControl
+  ): StatePropsOfControl & VanillaRendererProps => {
     const props: StatePropsOfControl = mapStateToProps(state, ownProps);
     const config = getConfig(state);
     const trim = config.trim;
@@ -71,9 +72,13 @@ export const addVanillaControlProps = <P extends StatePropsOfControl>(
       classNames = classNames.concat(getStyle(state)('control.trim'));
     }
     const labelClass = getStyleAsClassName(state)('control.label');
-    const descriptionClassName = getStyleAsClassName(state)('input.description');
-    const validationClassName = getStyleAsClassName(state)('control.validation');
-    const validationErrorClassName = getStyleAsClassName(state)('control.validation.error');
+    const descriptionClassName =
+      getStyleAsClassName(state)('input.description');
+    const validationClassName =
+      getStyleAsClassName(state)('control.validation');
+    const validationErrorClassName = getStyleAsClassName(state)(
+      'control.validation.error'
+    );
     const inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
 
     return {
@@ -86,56 +91,85 @@ export const addVanillaControlProps = <P extends StatePropsOfControl>(
         label: labelClass,
         description: descriptionClassName,
         validation: validationClassName,
-        validationError: validationErrorClassName
-      }
+        validationError: validationErrorClassName,
+      },
     };
   };
 
-export const withVanillaControlProps = (Component: ComponentType<any>) => (props: any) => {
-  const ctx = useJsonForms();
-  const contextStyles = useStyles();
-  const controlElement = props.uischema as ControlElement;
-  const config = ctx.config;
-  const trim = config && config.trim;
-  const styles = useMemo(() => findStyle(contextStyles)('control'), [contextStyles]);
-  let classNames: string[] = !isEmpty(controlElement.scope)
-    ? styles.concat([`${convertToValidClassName(controlElement.scope)}`])
-    : [''];
-
-  if (trim) {
-    classNames = classNames.concat(findStyle(contextStyles)('control.trim'));
-  }
-  const isValid = isEmpty(props.errors);
-  const labelClass = useMemo(() => findStyleAsClassName(contextStyles)('control.label'), [contextStyles]);
-  const descriptionClassName = useMemo(() => findStyleAsClassName(contextStyles)('input.description'), [contextStyles]);
-  const validationClassName = useMemo(() => findStyleAsClassName(contextStyles)('control.validation'), [contextStyles]);
-  const validationErrorClassName = useMemo(() => findStyleAsClassName(contextStyles)('control.validation.error'), [contextStyles]);
-  const inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
-
-  const getStyleAsClassName = useMemo(() => findStyleAsClassName(contextStyles), [contextStyles]);
-  const getStyle = useMemo(() => findStyle(contextStyles), [contextStyles]);
-
-  const wrapper = classNames.join(' ');
-  const input = inputClassName.join(' ');
-
-  const classNamesProp = useMemo(() => ({
-    wrapper,
-    input,
-    label: labelClass,
-    description: descriptionClassName,
-    validation: validationClassName,
-    validationError: validationErrorClassName
-  }), [wrapper, input, labelClass, descriptionClassName, validationClassName, validationErrorClassName]);
-
-  return (
-    <Component
-      {...props}
-      getStyleAsClassName={getStyleAsClassName}
-      getStyle={getStyle}
-      classNames={classNamesProp}
-    />
-  );
-}
+export const withVanillaControlProps =
+  (Component: ComponentType<any>) => (props: any) => {
+    const ctx = useJsonForms();
+    const contextStyles = useStyles();
+    const controlElement = props.uischema as ControlElement;
+    const config = ctx.config;
+    const trim = config && config.trim;
+    const styles = useMemo(
+      () => findStyle(contextStyles)('control'),
+      [contextStyles]
+    );
+    let classNames: string[] = !isEmpty(controlElement.scope)
+      ? styles.concat([`${convertToValidClassName(controlElement.scope)}`])
+      : [''];
+
+    if (trim) {
+      classNames = classNames.concat(findStyle(contextStyles)('control.trim'));
+    }
+    const isValid = isEmpty(props.errors);
+    const labelClass = useMemo(
+      () => findStyleAsClassName(contextStyles)('control.label'),
+      [contextStyles]
+    );
+    const descriptionClassName = useMemo(
+      () => findStyleAsClassName(contextStyles)('input.description'),
+      [contextStyles]
+    );
+    const validationClassName = useMemo(
+      () => findStyleAsClassName(contextStyles)('control.validation'),
+      [contextStyles]
+    );
+    const validationErrorClassName = useMemo(
+      () => findStyleAsClassName(contextStyles)('control.validation.error'),
+      [contextStyles]
+    );
+    const inputClassName = ['validate'].concat(isValid ? 'valid' : 'invalid');
+
+    const getStyleAsClassName = useMemo(
+      () => findStyleAsClassName(contextStyles),
+      [contextStyles]
+    );
+    const getStyle = useMemo(() => findStyle(contextStyles), [contextStyles]);
+
+    const wrapper = classNames.join(' ');
+    const input = inputClassName.join(' ');
+
+    const classNamesProp = useMemo(
+      () => ({
+        wrapper,
+        input,
+        label: labelClass,
+        description: descriptionClassName,
+        validation: validationClassName,
+        validationError: validationErrorClassName,
+      }),
+      [
+        wrapper,
+        input,
+        labelClass,
+        descriptionClassName,
+        validationClassName,
+        validationErrorClassName,
+      ]
+    );
+
+    return (
+      <Component
+        {...props}
+        getStyleAsClassName={getStyleAsClassName}
+        getStyle={getStyle}
+        classNames={classNamesProp}
+      />
+    );
+  };
 
 /**
  * Add vanilla props to the return value of calling the given
@@ -144,30 +178,34 @@ export const withVanillaControlProps = (Component: ComponentType<any>) => (props
  * @param mapStateToProps an existing mapStateToProps function for retrieving layout props
  * @returns {VanillaLayoutProps} vanilla specific layout props
  */
-export const addVanillaLayoutProps = (
-  mapStateToProps: (s: JsonFormsState, p: OwnPropsOfRenderer) => RendererProps
-) => (
-  state: JsonFormsState,
-  ownProps: OwnPropsOfRenderer
-): RendererProps & VanillaRendererProps => {
+export const addVanillaLayoutProps =
+  (
+    mapStateToProps: (s: JsonFormsState, p: OwnPropsOfRenderer) => RendererProps
+  ) =>
+  (
+    state: JsonFormsState,
+    ownProps: OwnPropsOfRenderer
+  ): RendererProps & VanillaRendererProps => {
     const props = mapStateToProps(state, ownProps);
 
     return {
       ...props,
       getStyleAsClassName: getStyleAsClassName(state),
-      getStyle: getStyle(state)
+      getStyle: getStyle(state),
     };
   };
 
-export const addVanillaCellProps = (
-  mapStateToCellsProps: (
-    s: JsonFormsState,
-    p: OwnPropsOfCell
-  ) => StatePropsOfCell
-) => (
-  state: JsonFormsState,
-  ownProps: OwnPropsOfCell
-): StatePropsOfCell & VanillaRendererProps => {
+export const addVanillaCellProps =
+  (
+    mapStateToCellsProps: (
+      s: JsonFormsState,
+      p: OwnPropsOfCell
+    ) => StatePropsOfCell
+  ) =>
+  (
+    state: JsonFormsState,
+    ownProps: OwnPropsOfCell
+  ): StatePropsOfCell & VanillaRendererProps => {
     const props = mapStateToCellsProps(state, ownProps);
     const inputClassName = ['validate'].concat(
       props.isValid ? 'valid' : 'invalid'
@@ -176,41 +214,36 @@ export const addVanillaCellProps = (
       ...props,
       className: inputClassName.join(' '),
       getStyleAsClassName: getStyleAsClassName(state),
-      getStyle: getStyle(state)
+      getStyle: getStyle(state),
     };
   };
 
-const withVanillaCellPropsForType = (type: string) => (
-  Component: ComponentType<any>
-) => (props: any) => {
-  const inputClassName = ['validate'].concat(
-    props.isValid ? 'valid' : 'invalid'
-  );
-  const styles = useStyles();
-  const definedStyle = findStyleAsClassName(styles)(type);
-  if (definedStyle) {
-    inputClassName.push(definedStyle);
-  }
-
-  return (
-    <Component
-      {...props}
-      getStyleAsClassName={findStyleAsClassName(styles)}
-      getStyle={findStyle(styles)}
-      className={inputClassName.join(' ')}
-    />
-  );
-};
-
-export const withVanillaCellProps = withVanillaCellPropsForType(
-  'control.input'
-);
-
-export const withVanillaEnumCellProps = withVanillaCellPropsForType(
-  'control.select'
-);
-
-export const withVanillaBooleanCellProps = withVanillaCellPropsForType(
-  'control.checkbox'
-);
+const withVanillaCellPropsForType =
+  (type: string) => (Component: ComponentType<any>) => (props: any) => {
+    const inputClassName = ['validate'].concat(
+      props.isValid ? 'valid' : 'invalid'
+    );
+    const styles = useStyles();
+    const definedStyle = findStyleAsClassName(styles)(type);
+    if (definedStyle) {
+      inputClassName.push(definedStyle);
+    }
+
+    return (
+      <Component
+        {...props}
+        getStyleAsClassName={findStyleAsClassName(styles)}
+        getStyle={findStyle(styles)}
+        className={inputClassName.join(' ')}
+      />
+    );
+  };
+
+export const withVanillaCellProps =
+  withVanillaCellPropsForType('control.input');
+
+export const withVanillaEnumCellProps =
+  withVanillaCellPropsForType('control.select');
 
+export const withVanillaBooleanCellProps =
+  withVanillaCellPropsForType('control.checkbox');
diff --git a/packages/vanilla-renderers/test/renderers/ArrayControl.test.tsx b/packages/vanilla-renderers/test/renderers/ArrayControl.test.tsx
index 01714df0f..5b6176e03 100644
--- a/packages/vanilla-renderers/test/renderers/ArrayControl.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/ArrayControl.test.tsx
@@ -44,19 +44,19 @@ const fixture = {
           type: 'object',
           properties: {
             x: { type: 'integer' },
-            y: { type: 'integer' }
-          }
-        }
-      }
-    }
+            y: { type: 'integer' },
+          },
+        },
+      },
+    },
   },
   uischema: {
     type: 'Control',
-    scope: '#/properties/test'
+    scope: '#/properties/test',
   },
   data: {
-    test: [{ x: 1, y: 3 }]
-  }
+    test: [{ x: 1, y: 3 }],
+  },
 };
 
 describe('Array control renderer', () => {
@@ -64,11 +64,10 @@ describe('Array control renderer', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const cells = [{ tester: integerCellTester, cell: IntegerCell }];
     const wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, cells, core }}>
-        <ArrayControl
-          schema={fixture.schema}
-          uischema={fixture.uischema}
-        />
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, cells, core }}
+      >
+        <ArrayControl schema={fixture.schema} uischema={fixture.uischema} />
       </JsonFormsStateProvider>
     );
 
diff --git a/packages/vanilla-renderers/test/renderers/BooleanCell.test.tsx b/packages/vanilla-renderers/test/renderers/BooleanCell.test.tsx
index dc7b0995b..aeb50ffed 100644
--- a/packages/vanilla-renderers/test/renderers/BooleanCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/BooleanCell.test.tsx
@@ -24,11 +24,7 @@
 */
 
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -42,7 +38,7 @@ Enzyme.configure({ adapter: new Adapter() });
 
 const control: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 const fixture = {
@@ -52,17 +48,17 @@ const fixture = {
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.checkbox',
-      classNames: ['checkbox']
+      classNames: ['checkbox'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 describe('Boolean cell tester', () => {
@@ -70,66 +66,75 @@ describe('Boolean cell tester', () => {
     expect(booleanCellTester(undefined, undefined, undefined)).toBe(-1);
     expect(booleanCellTester(null, undefined, undefined)).toBe(-1);
     expect(booleanCellTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-    expect(booleanCellTester({ type: 'Control' }, undefined, undefined)).toBe(-1);
+    expect(booleanCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+      -1
+    );
   });
 
   test('tester with wrong prop type', () => {
     const controlElement: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      booleanCellTester(controlElement, {
-        type: 'object',
-        properties: { foo: { type: 'string' } }
-      },
-      undefined),
+      booleanCellTester(
+        controlElement,
+        {
+          type: 'object',
+          properties: { foo: { type: 'string' } },
+        },
+        undefined
+      )
     ).toBe(-1);
   });
 
   test('tester with wrong prop type, but sibling has correct one', () => {
     const controlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      booleanCellTester(controlElement, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'string'
+      booleanCellTester(
+        controlElement,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'string',
+            },
+            bar: {
+              type: 'boolean',
+            },
           },
-          bar: {
-            type: 'boolean'
-          }
-        }
-      },
-      undefined)
+        },
+        undefined
+      )
     ).toBe(-1);
   });
 
   test('tester with matching prop type', () => {
     const controlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
-      booleanCellTester(controlElement, {
-        type: 'object',
-        properties: {
-          foo: {
-            type: 'boolean'
-          }
-        }
-      },
-      undefined)
+      booleanCellTester(
+        controlElement,
+        {
+          type: 'object',
+          properties: {
+            foo: {
+              type: 'boolean',
+            },
+          },
+        },
+        undefined
+      )
     ).toBe(2);
   });
-
 });
 
 describe('Boolean cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -139,30 +144,30 @@ describe('Boolean cell', () => {
       type: 'object',
       properties: {
         firstBooleanCell: { type: 'boolean' },
-        secondBooleanCell: { type: 'boolean' }
-      }
+        secondBooleanCell: { type: 'boolean' },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstBooleanCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/secondBooleanCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [firstControlElement, secondControlElement]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
       firstBooleanCell: true,
-      secondBooleanCell: false
+      secondBooleanCell: false,
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -180,8 +185,8 @@ describe('Boolean cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -198,8 +203,8 @@ describe('Boolean cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -214,7 +219,7 @@ describe('Boolean cell', () => {
   test('autofocus inactive by default', () => {
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -230,7 +235,11 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -243,7 +252,11 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -254,7 +267,7 @@ describe('Boolean cell', () => {
 
   test('update via input event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -264,7 +277,11 @@ describe('Boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -276,7 +293,7 @@ describe('Boolean cell', () => {
   test('update via action', () => {
     const data = { foo: false };
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, data);
     wrapper = mount(
@@ -286,12 +303,16 @@ describe('Boolean cell', () => {
             onChangeData.data = data;
           }}
         />
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     core.data = { ...core.data, foo: false };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     expect(input.checked).toBe(false);
     expect(onChangeData.data.foo).toBe(false);
@@ -301,12 +322,16 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     expect(input.value).toEqual('');
   });
@@ -315,12 +340,16 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     expect(input.value).toEqual('');
   });
@@ -329,12 +358,16 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
     core.data = { ...core.data, bar: 11 };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     expect(input.props().checked).toBe(true);
   });
@@ -343,12 +376,16 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     core.data = { ...core.data, null: false };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     expect(input.checked).toBe(true);
   });
@@ -357,11 +394,15 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: false };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.checked).toBe(true);
@@ -371,7 +412,11 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} enabled={false} />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          enabled={false}
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -382,7 +427,11 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -393,7 +442,11 @@ describe('Boolean cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <BooleanCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <BooleanCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
diff --git a/packages/vanilla-renderers/test/renderers/CategorizationRenderer.test.tsx b/packages/vanilla-renderers/test/renderers/CategorizationRenderer.test.tsx
index 6980dc73d..2f9295128 100644
--- a/packages/vanilla-renderers/test/renderers/CategorizationRenderer.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/CategorizationRenderer.test.tsx
@@ -33,7 +33,9 @@ import {
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import CategorizationRenderer, { categorizationTester } from '../../src/complex/categorization';
+import CategorizationRenderer, {
+  categorizationTester,
+} from '../../src/complex/categorization';
 import { initCore } from '../util';
 import { vanillaRenderers } from '../../src';
 
@@ -42,7 +44,7 @@ Enzyme.configure({ adapter: new Adapter() });
 const category: Category = {
   type: 'Category',
   label: 'B',
-  elements: []
+  elements: [],
 };
 
 const fixture = {
@@ -51,51 +53,43 @@ const fixture = {
     type: 'object',
     properties: {
       name: {
-        type: 'string'
-      }
-    }
+        type: 'string',
+      },
+    },
   },
   uischema: {
     type: 'Categorization',
     label: 'A',
-    elements: [category]
-  }
+    elements: [category],
+  },
 };
 
 describe('Categorization tester', () => {
   test('tester', () => {
     expect(categorizationTester(undefined, undefined, undefined)).toBe(-1);
     expect(categorizationTester(null, undefined, undefined)).toBe(-1);
-    expect(categorizationTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-    expect(categorizationTester({ type: 'Categorization' }, undefined, undefined)).toBe(-1);
+    expect(categorizationTester({ type: 'Foo' }, undefined, undefined)).toBe(
+      -1
+    );
+    expect(
+      categorizationTester({ type: 'Categorization' }, undefined, undefined)
+    ).toBe(-1);
   });
 
   test('tester with null elements and no schema', () => {
     const uischema: Layout = {
       type: 'Categorization',
-      elements: null
+      elements: null,
     };
-    expect(
-      categorizationTester(
-        uischema,
-        undefined,
-        undefined
-      )
-    ).toBe(-1);
+    expect(categorizationTester(uischema, undefined, undefined)).toBe(-1);
   });
 
   test('tester with empty elements and no schema', () => {
     const uischema: Layout = {
       type: 'Categorization',
-      elements: []
+      elements: [],
     };
-    expect(
-      categorizationTester(
-        uischema,
-        undefined,
-        undefined
-      )
-    ).toBe(-1);
+    expect(categorizationTester(uischema, undefined, undefined)).toBe(-1);
   });
 
   test('apply tester with single unknown element and no schema', () => {
@@ -103,17 +97,11 @@ describe('Categorization tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Foo'
+          type: 'Foo',
         },
-      ]
+      ],
     };
-    expect(
-      categorizationTester(
-        uischema,
-        undefined,
-        undefined
-      )
-    ).toBe(-1);
+    expect(categorizationTester(uischema, undefined, undefined)).toBe(-1);
   });
 
   test('tester with single category and no schema', () => {
@@ -121,17 +109,11 @@ describe('Categorization tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Category'
-        }
-      ]
+          type: 'Category',
+        },
+      ],
     };
-    expect(
-      categorizationTester(
-        categorization,
-        undefined,
-        undefined
-      )
-    ).toBe(1);
+    expect(categorizationTester(categorization, undefined, undefined)).toBe(1);
   });
 
   test('tester with nested categorization and single category and no schema', () => {
@@ -139,20 +121,15 @@ describe('Categorization tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Category'
-        }
-      ]
+          type: 'Category',
+        },
+      ],
     };
     const categorization: Layout = {
       type: 'Categorization',
-      elements: [nestedCategorization]
+      elements: [nestedCategorization],
     };
-    expect(
-      categorizationTester(
-        categorization,
-        undefined,
-        undefined)
-    ).toBe(1);
+    expect(categorizationTester(categorization, undefined, undefined)).toBe(1);
   });
 
   test('tester with nested categorizations, but no category and no schema', () => {
@@ -160,17 +137,11 @@ describe('Categorization tester', () => {
       type: 'Categorization',
       elements: [
         {
-          type: 'Categorization'
-        }
-      ]
+          type: 'Categorization',
+        },
+      ],
     };
-    expect(
-      categorizationTester(
-        categorization,
-        undefined,
-        undefined
-      )
-    ).toBe(-1);
+    expect(categorizationTester(categorization, undefined, undefined)).toBe(-1);
   });
 
   test('tester with nested categorizations, null elements and no schema', () => {
@@ -180,17 +151,11 @@ describe('Categorization tester', () => {
         {
           type: 'Categorization',
           label: 'Test',
-          elements: null
-        }
-      ]
+          elements: null,
+        },
+      ],
     };
-    expect(
-      categorizationTester(
-        categorization,
-        undefined,
-        undefined
-      )
-    ).toBe(-1);
+    expect(categorizationTester(categorization, undefined, undefined)).toBe(-1);
   });
 
   test('tester with nested categorizations, empty elements and no schema', () => {
@@ -199,22 +164,15 @@ describe('Categorization tester', () => {
       elements: [
         {
           type: 'Categorization',
-          elements: []
-        }
-      ]
+          elements: [],
+        },
+      ],
     };
-    expect(
-      categorizationTester(
-        categorization,
-        undefined,
-        undefined
-      )
-    ).toBe(-1);
+    expect(categorizationTester(categorization, undefined, undefined)).toBe(-1);
   });
 });
 
 describe('Categorization renderer', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -224,13 +182,13 @@ describe('Categorization renderer', () => {
       type: 'object',
       properties: {
         name: {
-          type: 'string'
-        }
-      }
+          type: 'string',
+        },
+      },
     };
     const nameControl = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const innerCat: Categorization = {
       type: 'Categorization',
@@ -239,9 +197,9 @@ describe('Categorization renderer', () => {
         {
           type: 'Category',
           label: 'A',
-          elements: [nameControl]
-        }
-      ]
+          elements: [nameControl],
+        },
+      ],
     };
     const uischema: Categorization = {
       type: 'Categorization',
@@ -251,18 +209,15 @@ describe('Categorization renderer', () => {
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl]
-        }
-      ]
+          elements: [nameControl],
+        },
+      ],
     };
     const core = initCore(schema, uischema, fixture.data);
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <CategorizationRenderer
-          schema={schema}
-          uischema={uischema}
-          />
+        <CategorizationRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
@@ -301,10 +256,10 @@ describe('Categorization renderer', () => {
   });
 
   test('render on click', () => {
-    const data = { 'name': 'Foo' };
+    const data = { name: 'Foo' };
     const nameControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const innerCategorization: Categorization = {
       type: 'Categorization',
@@ -313,9 +268,9 @@ describe('Categorization renderer', () => {
         {
           type: 'Category',
           label: 'A',
-          elements: [nameControl]
+          elements: [nameControl],
         },
-      ]
+      ],
     };
     const uischema: Categorization = {
       type: 'Categorization',
@@ -325,28 +280,25 @@ describe('Categorization renderer', () => {
         {
           type: 'Category',
           label: 'B',
-          elements: [nameControl, nameControl]
+          elements: [nameControl, nameControl],
         },
         {
           type: 'Category',
           label: 'C',
-          elements: undefined
+          elements: undefined,
         },
         {
           type: 'Category',
           label: 'D',
-          elements: null
+          elements: null,
         },
-      ]
+      ],
     };
     const core = initCore(fixture.schema, uischema, data);
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <CategorizationRenderer
-          schema={fixture.schema}
-          uischema={uischema}
-          />
+        <CategorizationRenderer schema={fixture.schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
@@ -391,9 +343,9 @@ describe('Categorization renderer', () => {
         {
           type: 'Category',
           label: 'B',
-          elements: []
-        }
-      ]
+          elements: [],
+        },
+      ],
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
@@ -403,7 +355,7 @@ describe('Categorization renderer', () => {
           schema={fixture.schema}
           uischema={uischema}
           visible={false}
-          />
+        />
       </JsonFormsStateProvider>
     );
 
@@ -419,18 +371,15 @@ describe('Categorization renderer', () => {
         {
           type: 'Category',
           label: 'B',
-          elements: []
-        }
-      ]
+          elements: [],
+        },
+      ],
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <CategorizationRenderer
-          schema={fixture.schema}
-          uischema={uischema}
-          />
+        <CategorizationRenderer schema={fixture.schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
 
diff --git a/packages/vanilla-renderers/test/renderers/DateCell.test.tsx b/packages/vanilla-renderers/test/renderers/DateCell.test.tsx
index 8141eff13..98430cbf7 100644
--- a/packages/vanilla-renderers/test/renderers/DateCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/DateCell.test.tsx
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -47,19 +43,19 @@ const fixture = {
   data: { foo: '1980-04-04' },
   schema: {
     type: 'string',
-    format: 'date'
+    format: 'date',
   },
   uischema: control,
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 describe('Date cell tester', () => {
@@ -124,7 +120,6 @@ describe('Date cell tester', () => {
 });
 
 describe('Date cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -134,33 +129,30 @@ describe('Date cell', () => {
       type: 'object',
       properties: {
         firstDate: { type: 'string', format: 'date' },
-        secondDate: { type: 'string', format: 'date' }
-      }
+        secondDate: { type: 'string', format: 'date' },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstDate',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/secondDate',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [
-        firstControlElement,
-        secondControlElement
-      ]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
-      'firstDate': '1980-04-04',
-      'secondDate': '1980-04-04'
+      firstDate: '1980-04-04',
+      secondDate: '1980-04-04',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -178,8 +170,8 @@ describe('Date cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
@@ -197,8 +189,8 @@ describe('Date cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -213,7 +205,7 @@ describe('Date cell', () => {
   test('autofocus inactive by default', () => {
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -229,7 +221,11 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -242,7 +238,11 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -253,7 +253,7 @@ describe('Date cell', () => {
 
   test('update via event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -263,7 +263,11 @@ describe('Date cell', () => {
             onChangeData.data = data;
           }}
         />
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -275,11 +279,15 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('1961-04-12');
@@ -289,11 +297,15 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('');
@@ -303,11 +315,15 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('');
@@ -317,12 +333,16 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
     core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     expect(input.props().value).toBe('1980-04-04');
   });
@@ -331,12 +351,16 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
     core.data = { ...core.data, null: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     expect(input.props().value).toBe('1980-04-04');
   });
@@ -345,12 +369,16 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
     core.data = { ...core.data, undefined: '1961-04-12' };
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core }} );
+    wrapper.setProps({ initState: { renderers: vanillaRenderers, core } });
     wrapper.update();
     expect(input.props().value).toBe('1980-04-04');
   });
@@ -359,7 +387,11 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} enabled={false} />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          enabled={false}
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -370,7 +402,11 @@ describe('Date cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core }}>
-        <DateCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <DateCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
diff --git a/packages/vanilla-renderers/test/renderers/DateTimeCell.test.tsx b/packages/vanilla-renderers/test/renderers/DateTimeCell.test.tsx
index d78ee17b3..40bde90b0 100644
--- a/packages/vanilla-renderers/test/renderers/DateTimeCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/DateTimeCell.test.tsx
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -43,22 +39,22 @@ const control: ControlElement = {
 };
 
 const fixture = {
-  data: { 'foo': '1980-04-04T13:37:00.000Z' },
+  data: { foo: '1980-04-04T13:37:00.000Z' },
   schema: {
     type: 'string',
-    format: 'date-time'
+    format: 'date-time',
   },
   uischema: control,
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 describe('Date time cell tester', () => {
@@ -66,7 +62,9 @@ describe('Date time cell tester', () => {
     expect(dateTimeCellTester(undefined, undefined, undefined)).toBe(-1);
     expect(dateTimeCellTester(null, undefined, undefined)).toBe(-1);
     expect(dateTimeCellTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-    expect(dateTimeCellTester({ type: 'Control' }, undefined, undefined)).toBe(-1);
+    expect(dateTimeCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+      -1
+    );
   });
 
   test('tester with wrong prop type', () => {
@@ -123,7 +121,6 @@ describe('Date time cell tester', () => {
 });
 
 describe('date time cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -133,33 +130,30 @@ describe('date time cell', () => {
       type: 'object',
       properties: {
         firstDate: { type: 'string', format: 'date-time' },
-        secondDate: { type: 'string', format: 'date-time' }
-      }
+        secondDate: { type: 'string', format: 'date-time' },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstDate',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/secondDate',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [
-        firstControlElement,
-        secondControlElement
-      ]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
-      'firstDate': '1980-04-04T13:37:00.000Z',
-      'secondDate': '1980-04-04T13:37:00.000Z'
+      firstDate: '1980-04-04T13:37:00.000Z',
+      secondDate: '1980-04-04T13:37:00.000Z',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -177,18 +171,14 @@ describe('date time cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <DateTimeCell
-          schema={fixture.schema}
-          uischema={uischema}
-          path='foo'
-        />
+        <DateTimeCell schema={fixture.schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode();
@@ -200,18 +190,14 @@ describe('date time cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <DateTimeCell
-          schema={fixture.schema}
-          uischema={uischema}
-          path='foo'
-        />
+        <DateTimeCell schema={fixture.schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -221,17 +207,13 @@ describe('date time cell', () => {
   test('autofocus inactive by default', () => {
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <DateTimeCell
-          schema={fixture.schema}
-          uischema={uischema}
-          path='foo'
-        />
+        <DateTimeCell schema={fixture.schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -275,7 +257,7 @@ describe('date time cell', () => {
 
   test('update via event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -309,7 +291,7 @@ describe('date time cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '1961-04-12T20:15:00.000Z' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('1961-04-12T20:15');
@@ -327,7 +309,7 @@ describe('date time cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('');
@@ -345,7 +327,7 @@ describe('date time cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('');
@@ -363,7 +345,7 @@ describe('date time cell', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input');
     expect(input.props().value).toBe('1980-04-04T13:37');
@@ -382,7 +364,7 @@ describe('date time cell', () => {
     );
     const input = wrapper.find('input');
     core.data = { ...core.data, null: '1961-04-12T20:15:00.000Z' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(input.props().value).toBe('1980-04-04T13:37');
   });
@@ -400,7 +382,7 @@ describe('date time cell', () => {
     );
     const input = wrapper.find('input');
     core.data = { ...core.data, undefined: '1961-04-12T20:15:00.000Z' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(input.props().value).toBe('1980-04-04T13:37');
   });
diff --git a/packages/vanilla-renderers/test/renderers/EnumCell.test.tsx b/packages/vanilla-renderers/test/renderers/EnumCell.test.tsx
index 40a249a3b..d444c0685 100644
--- a/packages/vanilla-renderers/test/renderers/EnumCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/EnumCell.test.tsx
@@ -38,7 +38,7 @@ const control: ControlElement = {
 };
 
 const fixture = {
-  data: { 'foo': 'a' },
+  data: { foo: 'a' },
   schema: {
     type: 'string',
     enum: ['a', 'b'],
@@ -47,13 +47,13 @@ const fixture = {
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 test('tester', () => {
@@ -78,16 +78,16 @@ test('tester with wrong prop type, but sibling has correct one', () => {
     enumCellTester(
       fixture.uischema,
       {
-        'type': 'object',
-        'properties': {
-          'foo': {
-            'type': 'string'
+        type: 'object',
+        properties: {
+          foo: {
+            type: 'string',
+          },
+          bar: {
+            type: 'string',
+            enum: ['a', 'b'],
           },
-          'bar': {
-            'type': 'string',
-            'enum': ['a', 'b']
-          }
-        }
+        },
       },
       undefined
     )
@@ -99,13 +99,13 @@ test('tester with matching string type', () => {
     enumCellTester(
       fixture.uischema,
       {
-        'type': 'object',
-        'properties': {
-          'foo': {
-            'type': 'string',
-            'enum': ['a', 'b']
-          }
-        }
+        type: 'object',
+        properties: {
+          foo: {
+            type: 'string',
+            enum: ['a', 'b'],
+          },
+        },
       },
       undefined
     )
@@ -118,13 +118,13 @@ test('tester with matching numeric type', () => {
     enumCellTester(
       fixture.uischema,
       {
-        'type': 'object',
-        'properties': {
-          'foo': {
-            'type': 'number',
-            'enum': [1, 2]
-          }
-        }
+        type: 'object',
+        properties: {
+          foo: {
+            type: 'number',
+            enum: [1, 2],
+          },
+        },
       },
       undefined
     )
@@ -132,7 +132,6 @@ test('tester with matching numeric type', () => {
 });
 
 describe('Enum cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -141,7 +140,11 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -158,7 +161,11 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -170,7 +177,7 @@ describe('Enum cell', () => {
 
   test('update via input event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -180,7 +187,11 @@ describe('Enum cell', () => {
             onChangeData.data = data;
           }}
         />
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const select = wrapper.find('select');
@@ -190,7 +201,7 @@ describe('Enum cell', () => {
 
   test('empty selection should lead to data deletion', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -200,7 +211,11 @@ describe('Enum cell', () => {
             onChangeData.data = data;
           }}
         />
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     expect(onChangeData.data.foo).toBe('a');
@@ -210,16 +225,20 @@ describe('Enum cell', () => {
   });
 
   test('update via action', () => {
-    const data = { 'foo': 'b' };
+    const data = { foo: 'b' };
     const core = initCore(fixture.schema, fixture.uischema, data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const select = wrapper.find('select').getDOMNode() as HTMLSelectElement;
     core.data = { ...core.data, foo: 'b' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(select.value).toBe('b');
     expect(select.selectedIndex).toBe(2);
@@ -229,12 +248,16 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const select = wrapper.find('select').getDOMNode() as HTMLSelectElement;
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(select.selectedIndex).toBe(0);
     expect(select.value).toBe('');
@@ -244,12 +267,16 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const select = wrapper.find('select').getDOMNode() as HTMLSelectElement;
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(select.selectedIndex).toBe(0);
     expect(select.value).toBe('');
@@ -259,11 +286,15 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const select = wrapper.find('select').getDOMNode() as HTMLSelectElement;
     expect(select.selectedIndex).toBe(1);
@@ -274,11 +305,15 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: false };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const select = wrapper.find('select').getDOMNode() as HTMLSelectElement;
     expect(select.selectedIndex).toBe(1);
@@ -289,11 +324,15 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: false };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const select = wrapper.find('select').getDOMNode() as HTMLSelectElement;
     expect(select.selectedIndex).toBe(1);
@@ -304,7 +343,11 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} enabled={false} />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          enabled={false}
+        />
       </JsonFormsStateProvider>
     );
     const select = wrapper.find('select');
@@ -315,10 +358,14 @@ describe('Enum cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <EnumCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <EnumCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const select = wrapper.find('select');
     expect(select.props().disabled).toBe(false);
   });
-})
+});
diff --git a/packages/vanilla-renderers/test/renderers/GroupLayout.test.tsx b/packages/vanilla-renderers/test/renderers/GroupLayout.test.tsx
index 8901fcf8f..e4f569cd1 100644
--- a/packages/vanilla-renderers/test/renderers/GroupLayout.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/GroupLayout.test.tsx
@@ -27,7 +27,9 @@ import { GroupLayout } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import GroupLayoutRenderer, { groupTester } from '../../src/layouts/GroupLayout';
+import GroupLayoutRenderer, {
+  groupTester,
+} from '../../src/layouts/GroupLayout';
 import { initCore } from '../util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -35,8 +37,8 @@ Enzyme.configure({ adapter: new Adapter() });
 const fixture = {
   uischema: {
     type: 'Group',
-    elements: [{ type: 'Control' }]
-  }
+    elements: [{ type: 'Control' }],
+  },
 };
 
 test('tester', () => {
@@ -47,7 +49,6 @@ test('tester', () => {
 });
 
 describe('Group layout', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -77,7 +78,7 @@ describe('Group layout', () => {
   test('render with null elements', () => {
     const uischema: GroupLayout = {
       type: 'Group',
-      elements: null
+      elements: null,
     };
     const core = initCore({}, uischema, {});
     wrapper = mount(
@@ -93,10 +94,7 @@ describe('Group layout', () => {
   test('render with children', () => {
     const uischema: GroupLayout = {
       type: 'Group',
-      elements: [
-        { type: 'Control' },
-        { type: 'Control' }
-      ]
+      elements: [{ type: 'Control' }, { type: 'Control' }],
     };
     const core = initCore({}, uischema, {});
     wrapper = mount(
@@ -113,10 +111,7 @@ describe('Group layout', () => {
     const core = initCore({}, fixture.uischema, {});
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <GroupLayoutRenderer
-          uischema={fixture.uischema}
-          visible={false}
-        />
+        <GroupLayoutRenderer uischema={fixture.uischema} visible={false} />
       </JsonFormsStateProvider>
     );
     const groupLayout = wrapper.find('.group-layout');
@@ -127,10 +122,7 @@ describe('Group layout', () => {
     const core = initCore({}, fixture.uischema, {});
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <GroupLayoutRenderer
-          uischema={fixture.uischema}
-          enabled={false}
-        />
+        <GroupLayoutRenderer uischema={fixture.uischema} enabled={false} />
       </JsonFormsStateProvider>
     );
     const child = wrapper.find('JsonFormsDispatchRenderer');
diff --git a/packages/vanilla-renderers/test/renderers/HorizontalLayout.test.tsx b/packages/vanilla-renderers/test/renderers/HorizontalLayout.test.tsx
index ba3c492c1..10e7df465 100644
--- a/packages/vanilla-renderers/test/renderers/HorizontalLayout.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/HorizontalLayout.test.tsx
@@ -23,14 +23,11 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  HorizontalLayout,
-  UISchemaElement
-} from '@jsonforms/core';
+import { HorizontalLayout, UISchemaElement } from '@jsonforms/core';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import HorizontalLayoutRenderer, {
-  horizontalLayoutTester
+  horizontalLayoutTester,
 } from '../../src/layouts/HorizontalLayout';
 import { initCore } from '../util';
 import { JsonFormsStateProvider } from '@jsonforms/react';
@@ -40,26 +37,29 @@ Enzyme.configure({ adapter: new Adapter() });
 const fixture = {
   uischema: {
     type: 'HorizontalLayout',
-    elements: [{ type: 'Control' }]
-  }
+    elements: [{ type: 'Control' }],
+  },
 };
 
 test('tester', () => {
   expect(horizontalLayoutTester(undefined, undefined, undefined)).toBe(-1);
   expect(horizontalLayoutTester(null, undefined, undefined)).toBe(-1);
-  expect(horizontalLayoutTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-  expect(horizontalLayoutTester({ type: 'HorizontalLayout' }, undefined, undefined)).toBe(1);
+  expect(horizontalLayoutTester({ type: 'Foo' }, undefined, undefined)).toBe(
+    -1
+  );
+  expect(
+    horizontalLayoutTester({ type: 'HorizontalLayout' }, undefined, undefined)
+  ).toBe(1);
 });
 
 describe('Horizontal layout', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
 
   test('render with undefined elements', () => {
     const uischema: UISchemaElement = {
-      type: 'HorizontalLayout'
+      type: 'HorizontalLayout',
     };
     const core = initCore({}, uischema, {});
     wrapper = mount(
@@ -68,7 +68,9 @@ describe('Horizontal layout', () => {
       </JsonFormsStateProvider>
     );
 
-    const horizontalLayout = wrapper.find('JsonFormsLayout').getDOMNode() as HTMLDivElement;
+    const horizontalLayout = wrapper
+      .find('JsonFormsLayout')
+      .getDOMNode() as HTMLDivElement;
 
     expect(horizontalLayout).toBeDefined();
     expect(horizontalLayout.children).toHaveLength(0);
@@ -77,7 +79,7 @@ describe('Horizontal layout', () => {
   test('render with null elements', () => {
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: null
+      elements: null,
     };
     const core = initCore({}, uischema, {});
     wrapper = mount(
@@ -93,10 +95,7 @@ describe('Horizontal layout', () => {
   test('render with children', () => {
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [
-        { type: 'Control' },
-        { type: 'Control' }
-      ]
+      elements: [{ type: 'Control' }, { type: 'Control' }],
     };
     const core = initCore({}, uischema, {});
     wrapper = mount(
@@ -104,7 +103,9 @@ describe('Horizontal layout', () => {
         <HorizontalLayoutRenderer uischema={uischema} />
       </JsonFormsStateProvider>
     );
-    const horizontalLayout = wrapper.find('JsonFormsLayout').getDOMNode() as HTMLDivElement;
+    const horizontalLayout = wrapper
+      .find('JsonFormsLayout')
+      .getDOMNode() as HTMLDivElement;
     expect(horizontalLayout).toBeDefined();
     expect(horizontalLayout.children).toHaveLength(2);
   });
@@ -113,13 +114,12 @@ describe('Horizontal layout', () => {
     const core = initCore({}, fixture.uischema, {});
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <HorizontalLayoutRenderer
-          uischema={fixture.uischema}
-          visible={false}
-        />
+        <HorizontalLayoutRenderer uischema={fixture.uischema} visible={false} />
       </JsonFormsStateProvider>
     );
-    const horizontalLayout = wrapper.find('JsonFormsLayout').getDOMNode() as HTMLDivElement;
+    const horizontalLayout = wrapper
+      .find('JsonFormsLayout')
+      .getDOMNode() as HTMLDivElement;
     expect(horizontalLayout.hidden).toBe(true);
   });
 
@@ -130,7 +130,9 @@ describe('Horizontal layout', () => {
         <HorizontalLayoutRenderer uischema={fixture.uischema} />
       </JsonFormsStateProvider>
     );
-    const horizontalLayout = wrapper.find('JsonFormsLayout').getDOMNode() as HTMLDivElement;
+    const horizontalLayout = wrapper
+      .find('JsonFormsLayout')
+      .getDOMNode() as HTMLDivElement;
     expect(horizontalLayout.hidden).toBe(false);
   });
 });
diff --git a/packages/vanilla-renderers/test/renderers/InputControl.test.tsx b/packages/vanilla-renderers/test/renderers/InputControl.test.tsx
index 5e6d1646e..3bdc52bbd 100644
--- a/packages/vanilla-renderers/test/renderers/InputControl.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/InputControl.test.tsx
@@ -23,22 +23,16 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema
-} from '@jsonforms/core';
-import { JsonFormsDispatch } from '@jsonforms/react';
-import { JsonFormsStateProvider } from '@jsonforms/react';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
+import { JsonFormsDispatch, JsonFormsStateProvider } from '@jsonforms/react';
 import { vanillaRenderers } from '../../src';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import '../../src';
 import HorizontalLayoutRenderer, {
-  horizontalLayoutTester
+  horizontalLayoutTester,
 } from '../../src/layouts/HorizontalLayout';
 import InputControl, {
-  inputControlTester
+  inputControlTester,
 } from '../../src/controls/InputControl';
 import BooleanCell, { booleanCellTester } from '../../src/cells/BooleanCell';
 import TextCell, { textCellTester } from '../../src/cells/TextCell';
@@ -54,30 +48,31 @@ const fixture = {
     type: 'object',
     properties: {
       foo: {
-        type: 'boolean'
-      }
-    }
+        type: 'boolean',
+      },
+    },
   },
   uischema: {
     type: 'Control',
-    scope: '#/properties/foo'
-  }
+    scope: '#/properties/foo',
+  },
 };
 
 test('tester', () => {
   expect(inputControlTester(undefined, undefined, undefined)).toBe(-1);
   expect(inputControlTester(null, undefined, undefined)).toBe(-1);
   expect(inputControlTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-  expect(inputControlTester({ type: 'Control' }, undefined, undefined)).toBe(-1);
+  expect(inputControlTester({ type: 'Control' }, undefined, undefined)).toBe(
+    -1
+  );
   const control: ControlElement = {
     type: 'Control',
-    scope: '#/properties/foo'
+    scope: '#/properties/foo',
   };
   expect(inputControlTester(control, undefined, undefined)).toBe(1);
 });
 
 describe('Input control', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -87,39 +82,41 @@ describe('Input control', () => {
       type: 'object',
       properties: {
         firstBooleanCell: { type: 'boolean' },
-        secondBooleanCell: { type: 'boolean' }
-      }
+        secondBooleanCell: { type: 'boolean' },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstBooleanCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: 'properties/secondBooleanCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [firstControlElement, secondControlElement]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
       firstBooleanCell: true,
-      secondBooleanCell: false
+      secondBooleanCell: false,
     };
     const core = initCore(schema, uischema, data);
     const renderes = [
       { tester: inputControlTester, renderer: InputControl },
-      { tester: horizontalLayoutTester, renderer: HorizontalLayoutRenderer }
+      { tester: horizontalLayoutTester, renderer: HorizontalLayoutRenderer },
     ];
     const cells = [{ tester: booleanCellTester, cell: BooleanCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <JsonFormsDispatch />
       </JsonFormsStateProvider>
     );
@@ -150,7 +147,9 @@ describe('Input control', () => {
     expect(input).toBeDefined();
     expect(input).not.toBeNull();
 
-    const validation = wrapper.find('.validation').getDOMNode() as HTMLDivElement;
+    const validation = wrapper
+      .find('.validation')
+      .getDOMNode() as HTMLDivElement;
     expect(validation.tagName).toBe('DIV');
     expect(validation.children).toHaveLength(0);
   });
@@ -159,13 +158,15 @@ describe('Input control', () => {
     const uischema: ControlElement = {
       type: 'Control',
       scope: '#/properties/foo',
-      label: false
+      label: false,
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: booleanCellTester, cell: BooleanCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <JsonFormsDispatch />
       </JsonFormsStateProvider>
     );
@@ -182,7 +183,9 @@ describe('Input control', () => {
     expect(input).toBeDefined();
     expect(input).not.toBeNull();
 
-    const validation = wrapper.find('.validation').getDOMNode() as HTMLDivElement;
+    const validation = wrapper
+      .find('.validation')
+      .getDOMNode() as HTMLDivElement;
     expect(validation.tagName).toBe('DIV');
     expect(validation.children).toHaveLength(0);
   });
@@ -223,12 +226,21 @@ describe('Input control', () => {
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: booleanCellTester, cell: BooleanCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <InputControl schema={fixture.schema} uischema={fixture.uischema} />
       </JsonFormsStateProvider>
     );
-    const newCore = {...core, data: {...core.data, foo: 2}};
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core: newCore, cells, renderes }} );
+    const newCore = { ...core, data: { ...core.data, foo: 2 } };
+    wrapper.setProps({
+      initState: {
+        renderers: vanillaRenderers,
+        core: newCore,
+        cells,
+        renderes,
+      },
+    });
     const validation = wrapper.find('.validation');
     expect(validation.text()).toBe('must be boolean');
   });
@@ -238,12 +250,21 @@ describe('Input control', () => {
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: booleanCellTester, cell: BooleanCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <InputControl schema={fixture.schema} uischema={fixture.uischema} />
       </JsonFormsStateProvider>
     );
-    const newCore = {...core, data: {...core.data, foo: 3}};
-    wrapper.setProps({ initState: { renderers: vanillaRenderers, core: newCore, cells, renderes }} );
+    const newCore = { ...core, data: { ...core.data, foo: 3 } };
+    wrapper.setProps({
+      initState: {
+        renderers: vanillaRenderers,
+        core: newCore,
+        cells,
+        renderes,
+      },
+    });
     const validation = wrapper.find('.validation');
     expect(validation.text()).toBe('must be boolean');
   });
@@ -253,7 +274,9 @@ describe('Input control', () => {
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: booleanCellTester, cell: BooleanCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <JsonFormsDispatch />
       </JsonFormsStateProvider>
     );
@@ -265,14 +288,18 @@ describe('Input control', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: booleanCellTester, cell: BooleanCell }];
-    const styleContextValue = { styles: [
-      {
-        name: 'control.validation',
-        classNames: ['custom-validation']
-      },
-    ]};
+    const styleContextValue = {
+      styles: [
+        {
+          name: 'control.validation',
+          classNames: ['custom-validation'],
+        },
+      ],
+    };
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <JsonFormsStyleContext.Provider value={styleContextValue}>
           <JsonFormsDispatch />
         </JsonFormsStyleContext.Provider>
@@ -287,14 +314,16 @@ describe('Input control', () => {
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: booleanCellTester, cell: BooleanCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <JsonFormsDispatch />
       </JsonFormsStateProvider>
     );
     const validation = wrapper.find('.validation');
     core.data = { ...core.data, foo: 3 };
     core.data = { ...core.data, foo: true };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(validation.text()).toBe('');
   });
@@ -304,48 +333,54 @@ describe('Input control', () => {
       type: 'object',
       properties: {
         name: {
-          type: 'string'
+          type: 'string',
         },
         personalData: {
           type: 'object',
           properties: {
             middleName: {
-              type: 'string'
+              type: 'string',
             },
             lastName: {
-              type: 'string'
-            }
+              type: 'string',
+            },
           },
-          required: ['middleName', 'lastName']
-        }
+          required: ['middleName', 'lastName'],
+        },
       },
-      required: ['name']
+      required: ['name'],
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
-      scope: '#/properties/personalData/properties/middleName'
+      scope: '#/properties/personalData/properties/middleName',
     };
     const thirdControlElement: ControlElement = {
       type: 'Control',
-      scope: '#/properties/personalData/properties/lastName'
+      scope: '#/properties/personalData/properties/lastName',
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [firstControlElement, secondControlElement, thirdControlElement]
+      elements: [
+        firstControlElement,
+        secondControlElement,
+        thirdControlElement,
+      ],
     };
     const data = {
       name: 'John Doe',
-      personalData: {}
+      personalData: {},
     };
     const core = initCore(schema, uischema, data);
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: textCellTester, cell: TextCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <HorizontalLayoutRenderer schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
@@ -360,14 +395,14 @@ describe('Input control', () => {
       properties: {
         dateCell: {
           type: 'string',
-          format: 'date'
-        }
+          format: 'date',
+        },
       },
-      required: ['dateCell']
+      required: ['dateCell'],
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/dateCell'
+      scope: '#/properties/dateCell',
     };
     const core = initCore(schema, uischema, {});
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
@@ -387,13 +422,13 @@ describe('Input control', () => {
       properties: {
         dateCell: {
           type: 'string',
-          format: 'date'
-        }
-      }
+          format: 'date',
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/dateCell'
+      scope: '#/properties/dateCell',
     };
     const core = initCore(schema, uischema, {});
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
@@ -413,13 +448,13 @@ describe('Input control', () => {
       properties: {
         name: {
           type: 'string',
-          description: 'Enter your first name'
-        }
-      }
+          description: 'Enter your first name',
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const data = { isFocused: false };
     const core = initCore(schema, uischema, data);
@@ -442,13 +477,13 @@ describe('Input control', () => {
       properties: {
         name: {
           type: 'string',
-          description: 'Enter your first name'
-        }
-      }
+          description: 'Enter your first name',
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const data = { isFocused: false };
     const core = initCore(schema, uischema, data);
@@ -469,20 +504,22 @@ describe('Input control', () => {
       properties: {
         name: {
           type: 'string',
-          description: 'Enter your first name'
-        }
-      }
+          description: 'Enter your first name',
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const data = { isFocused: false };
     const core = initCore(schema, uischema, data);
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: textCellTester, cell: DateCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <JsonFormsDispatch />
       </JsonFormsStateProvider>
     );
@@ -500,20 +537,22 @@ describe('Input control', () => {
       type: 'object',
       properties: {
         name: {
-          type: 'string'
-        }
-      }
+          type: 'string',
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const data = { isFocused: false };
     const core = initCore(schema, uischema, data);
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
     const cells = [{ tester: textCellTester, cell: DateCell }];
     wrapper = mount(
-      <JsonFormsStateProvider initState={{ renderers: vanillaRenderers, core, cells, renderes }}>
+      <JsonFormsStateProvider
+        initState={{ renderers: vanillaRenderers, core, cells, renderes }}
+      >
         <JsonFormsDispatch />
       </JsonFormsStateProvider>
     );
@@ -526,13 +565,13 @@ describe('Input control', () => {
       type: 'object',
       properties: {
         expectedValue: {
-          type: ['string', 'integer', 'number', 'boolean']
-        }
-      }
+          type: ['string', 'integer', 'number', 'boolean'],
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/expectedValue'
+      scope: '#/properties/expectedValue',
     };
     const core = initCore(schema, uischema, {});
     const renderes = [{ tester: inputControlTester, renderer: InputControl }];
diff --git a/packages/vanilla-renderers/test/renderers/IntegerCell.test.tsx b/packages/vanilla-renderers/test/renderers/IntegerCell.test.tsx
index 9f5b44337..2afee2791 100644
--- a/packages/vanilla-renderers/test/renderers/IntegerCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/IntegerCell.test.tsx
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -43,22 +39,22 @@ const control: ControlElement = {
 };
 
 const fixture = {
-  data: { 'foo': 42 },
+  data: { foo: 42 },
   schema: {
     type: 'integer',
-    minimum: 5
+    minimum: 5,
   },
   uischema: control,
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 describe('Integer cell tester', () => {
@@ -66,11 +62,13 @@ describe('Integer cell tester', () => {
     expect(integerCellTester(undefined, undefined, undefined)).toBe(-1);
     expect(integerCellTester(null, undefined, undefined)).toBe(-1);
     expect(integerCellTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-    expect(integerCellTester({ type: 'Control' }, undefined, undefined)).toBe(-1);
+    expect(integerCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+      -1
+    );
 
     const controlElement: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
       integerCellTester(
@@ -82,7 +80,10 @@ describe('Integer cell tester', () => {
     expect(
       integerCellTester(
         controlElement,
-        { type: 'object', properties: { foo: { type: 'string' }, bar: { type: 'integer' } } },
+        {
+          type: 'object',
+          properties: { foo: { type: 'string' }, bar: { type: 'integer' } },
+        },
         undefined
       )
     ).toBe(-1);
@@ -90,14 +91,13 @@ describe('Integer cell tester', () => {
       integerCellTester(
         controlElement,
         { type: 'object', properties: { foo: { type: 'integer' } } },
-        undefined)
+        undefined
+      )
     ).toBe(2);
   });
-
 });
 
 describe('Integer cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -107,33 +107,30 @@ describe('Integer cell', () => {
       type: 'object',
       properties: {
         firstIntegerCell: { type: 'integer', minimum: 5 },
-        secondIntegerCell: { type: 'integer', minimum: 5 }
-      }
+        secondIntegerCell: { type: 'integer', minimum: 5 },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstIntegerCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/secondIntegerCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [
-        firstControlElement,
-        secondControlElement
-      ]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
-      'firstIntegerCell': 10,
-      'secondIntegerCell': 12
+      firstIntegerCell: 10,
+      secondIntegerCell: 12,
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -151,8 +148,8 @@ describe('Integer cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -169,8 +166,8 @@ describe('Integer cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
@@ -186,7 +183,7 @@ describe('Integer cell', () => {
   test('autofocus inactive by default', () => {
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
@@ -203,7 +200,11 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -217,7 +218,11 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -229,7 +234,7 @@ describe('Integer cell', () => {
 
   test('update via input event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -239,7 +244,11 @@ describe('Integer cell', () => {
             onChangeData.data = data;
           }}
         />
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -248,16 +257,20 @@ describe('Integer cell', () => {
   });
 
   test('update via action', () => {
-    const data = { 'foo': 13 };
+    const data = { foo: 13 };
     const core = initCore(fixture.schema, fixture.uischema, data);
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: 42 };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('42');
@@ -267,11 +280,15 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('');
@@ -281,11 +298,15 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('');
@@ -295,11 +316,15 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 11 };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('42');
@@ -309,11 +334,15 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 13 };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('42');
@@ -323,11 +352,15 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 13 };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('42');
@@ -337,7 +370,11 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} enabled={false} />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          enabled={false}
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -348,7 +385,11 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -359,7 +400,11 @@ describe('Integer cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, { foo: 0 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <IntegerCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <IntegerCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
diff --git a/packages/vanilla-renderers/test/renderers/LabelControl.test.tsx b/packages/vanilla-renderers/test/renderers/LabelControl.test.tsx
index 9d7d3c447..0653d87f1 100644
--- a/packages/vanilla-renderers/test/renderers/LabelControl.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/LabelControl.test.tsx
@@ -28,7 +28,7 @@ import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import LabelRenderer, {
-  labelRendererTester
+  labelRendererTester,
 } from '../../src/complex/LabelRenderer';
 import { initCore } from '../util';
 import { JsonFormsStyleContext } from '../../src/styles';
@@ -39,15 +39,15 @@ const fixture = {
   data: { name: 'Foo' },
   schema: {
     type: 'object',
-    properties: { name: { type: 'string' } }
+    properties: { name: { type: 'string' } },
   },
   uischema: { type: 'Label', text: 'Bar' },
   styles: [
     {
       name: 'label-control',
-      classNames: ['jsf-label']
-    }
-  ]
+      classNames: ['jsf-label'],
+    },
+  ],
 };
 
 describe('Label tester', () => {
@@ -55,12 +55,13 @@ describe('Label tester', () => {
     expect(labelRendererTester(undefined, undefined, undefined)).toBe(-1);
     expect(labelRendererTester(null, undefined, undefined)).toBe(-1);
     expect(labelRendererTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-    expect(labelRendererTester({ type: 'Label' }, undefined, undefined)).toBe(1);
+    expect(labelRendererTester({ type: 'Label' }, undefined, undefined)).toBe(
+      1
+    );
   });
 });
 
 describe('Label', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -71,10 +72,7 @@ describe('Label', () => {
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <JsonFormsStyleContext.Provider value={{ styles: fixture.styles }}>
-          <LabelRenderer
-            schema={fixture.schema}
-            uischema={uischema}
-            />
+          <LabelRenderer schema={fixture.schema} uischema={uischema} />
         </JsonFormsStyleContext.Provider>
       </JsonFormsStateProvider>
     );
@@ -87,17 +85,14 @@ describe('Label', () => {
   test('render with null text', () => {
     const uischema: LabelElement = {
       type: 'Label',
-      text: null
+      text: null,
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <JsonFormsStyleContext.Provider value={{ styles: fixture.styles }}>
-          <LabelRenderer
-            schema={fixture.schema}
-            uischema={uischema}
-            />
+          <LabelRenderer schema={fixture.schema} uischema={uischema} />
         </JsonFormsStyleContext.Provider>
       </JsonFormsStateProvider>
     );
@@ -111,10 +106,7 @@ describe('Label', () => {
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <JsonFormsStyleContext.Provider value={{ styles: fixture.styles }}>
-          <LabelRenderer
-            schema={fixture.schema}
-            uischema={fixture.uischema}
-            />
+          <LabelRenderer schema={fixture.schema} uischema={fixture.uischema} />
         </JsonFormsStyleContext.Provider>
       </JsonFormsStateProvider>
     );
@@ -143,10 +135,7 @@ describe('Label', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <LabelRenderer
-          schema={fixture.schema}
-          uischema={fixture.uischema}
-        />
+        <LabelRenderer schema={fixture.schema} uischema={fixture.uischema} />
       </JsonFormsStateProvider>
     );
     const label = wrapper.find('label').getDOMNode() as HTMLLabelElement;
diff --git a/packages/vanilla-renderers/test/renderers/NumberCell.test.tsx b/packages/vanilla-renderers/test/renderers/NumberCell.test.tsx
index e381b86ad..733b81f89 100644
--- a/packages/vanilla-renderers/test/renderers/NumberCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/NumberCell.test.tsx
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -43,22 +39,22 @@ const controlElement: ControlElement = {
 };
 
 const fixture = {
-  data: { 'foo': 3.14 },
+  data: { foo: 3.14 },
   schema: {
     type: 'number',
-    minimum: 5
+    minimum: 5,
   },
   uischema: controlElement,
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 describe('Number cell tester', () => {
@@ -66,13 +62,15 @@ describe('Number cell tester', () => {
     expect(numberCellTester(undefined, undefined, undefined)).toBe(-1);
     expect(numberCellTester(null, undefined, undefined)).toBe(-1);
     expect(numberCellTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-    expect(numberCellTester({ type: 'Control' }, undefined, undefined)).toBe(-1);
+    expect(numberCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+      -1
+    );
   });
 
   test('tester with wrong schema type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
       numberCellTester(
@@ -81,9 +79,9 @@ describe('Number cell tester', () => {
           type: 'object',
           properties: {
             foo: {
-              type: 'string'
-            }
-          }
+              type: 'string',
+            },
+          },
         },
         undefined
       )
@@ -93,7 +91,7 @@ describe('Number cell tester', () => {
   test('tester with wrong schema type, but sibling has correct one', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
       numberCellTester(
@@ -102,12 +100,12 @@ describe('Number cell tester', () => {
           type: 'object',
           properties: {
             foo: {
-              type: 'string'
+              type: 'string',
             },
             bar: {
-              type: 'number'
-            }
-          }
+              type: 'number',
+            },
+          },
         },
         undefined
       )
@@ -117,7 +115,7 @@ describe('Number cell tester', () => {
   test('tester with machting schema type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
       numberCellTester(
@@ -126,9 +124,9 @@ describe('Number cell tester', () => {
           type: 'object',
           properties: {
             foo: {
-              type: 'number'
-            }
-          }
+              type: 'number',
+            },
+          },
         },
         undefined
       )
@@ -137,7 +135,6 @@ describe('Number cell tester', () => {
 });
 
 describe('Number cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -147,33 +144,30 @@ describe('Number cell', () => {
       type: 'object',
       properties: {
         firstNumberCell: { type: 'number', minimum: 5 },
-        secondNumberCell: { type: 'number', minimum: 5 }
-      }
+        secondNumberCell: { type: 'number', minimum: 5 },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstNumberCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/secondNumberCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [
-        firstControlElement,
-        secondControlElement
-      ]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
-      'firstNumberCell': 3.14,
-      'secondNumberCell': 5.12
+      firstNumberCell: 3.14,
+      secondNumberCell: 5.12,
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -192,8 +186,8 @@ describe('Number cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -210,8 +204,8 @@ describe('Number cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
 
@@ -227,7 +221,7 @@ describe('Number cell', () => {
   test('autofocus inactive by default', () => {
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -241,7 +235,7 @@ describe('Number cell', () => {
 
   test('render', () => {
     const schema: JsonSchema = { type: 'number' };
-    const core = initCore(schema, fixture.uischema, { 'foo': 3.14 });
+    const core = initCore(schema, fixture.uischema, { foo: 3.14 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <NumberCell schema={schema} uischema={fixture.uischema} path='foo' />
@@ -258,7 +252,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -270,7 +268,7 @@ describe('Number cell', () => {
 
   test('update via input event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -280,7 +278,11 @@ describe('Number cell', () => {
             onChangeData.data = data;
           }}
         />
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -293,7 +295,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, { foo: 2.72 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -308,7 +314,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -322,7 +332,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -336,7 +350,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -350,7 +368,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -364,7 +386,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 13 };
@@ -378,7 +404,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} enabled={false} />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          enabled={false}
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -389,7 +419,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -400,7 +434,11 @@ describe('Number cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, { foo: 0 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <NumberCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <NumberCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
diff --git a/packages/vanilla-renderers/test/renderers/RadioGroupControl.test.tsx b/packages/vanilla-renderers/test/renderers/RadioGroupControl.test.tsx
index 4c23579cd..e1dc26f3a 100644
--- a/packages/vanilla-renderers/test/renderers/RadioGroupControl.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/RadioGroupControl.test.tsx
@@ -22,18 +22,18 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import {
-  isEnumControl,
-    isOneOfEnumControl,
-  rankWith,
-} from '@jsonforms/core';
+import { isEnumControl, isOneOfEnumControl, rankWith } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import * as React from 'react';
 import * as _ from 'lodash';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import '../../src';
-import { vanillaStyles, RadioGroupControl, OneOfRadioGroupControl, JsonFormsStyleContext } from '../../src';
+import {
+  vanillaStyles,
+  RadioGroupControl,
+  OneOfRadioGroupControl,
+  JsonFormsStyleContext,
+} from '../../src';
 import { initCore } from '../util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -45,140 +45,174 @@ const fixture = {
     properties: {
       foo: {
         type: 'string',
-        enum: ['A', 'B', 'C', 'D']
-      }
-    }
+        enum: ['A', 'B', 'C', 'D'],
+      },
+    },
   },
   uischema: {
     type: 'Control',
-    scope: '#/properties/foo'
-  }
+    scope: '#/properties/foo',
+  },
 };
 
 const oneOfFixture = {
-    data: { foo: 'b' },
-    schema: {
-        type: 'object',
-        properties: {
-            foo: {
-                oneOf: [
-                    { const: 'a', title: 'A' },
-                    { const: 'b', title: 'B' },
-                    { const: 'c', title: 'C' }
-                ]
-            }
-        }
+  data: { foo: 'b' },
+  schema: {
+    type: 'object',
+    properties: {
+      foo: {
+        oneOf: [
+          { const: 'a', title: 'A' },
+          { const: 'b', title: 'B' },
+          { const: 'c', title: 'C' },
+        ],
+      },
     },
-    uischema: {
-        type: 'Control',
-        scope: '#/properties/foo'
-    }
+  },
+  uischema: {
+    type: 'Control',
+    scope: '#/properties/foo',
+  },
 };
 
 describe('Radio group control', () => {
-
-    let wrapper: ReactWrapper;
-
-    afterEach(() => wrapper.unmount());
-
-    test('render enum', () => {
-        const renderers = [{ tester: rankWith(10, isEnumControl), renderer: RadioGroupControl }];
-        const core = initCore(fixture.schema, fixture.uischema, fixture.data);
-        wrapper = mount(
-            <JsonFormsStateProvider initState={{ core, renderers }}>
-                <RadioGroupControl schema={fixture.schema} uischema={fixture.uischema} />
-            </JsonFormsStateProvider>
-        );
-
-        const radioButtons = wrapper.find('input[type="radio"]');
-        expect(radioButtons).toHaveLength(4);
-
-        // make sure one option is selected and expect "D"
-        const currentlyChecked = radioButtons.filter('input[checked=true]');
-        expect(currentlyChecked).toHaveLength(1);
-        expect((currentlyChecked.getDOMNode() as HTMLInputElement).value).toBe('D');
+  let wrapper: ReactWrapper;
+
+  afterEach(() => wrapper.unmount());
+
+  test('render enum', () => {
+    const renderers = [
+      { tester: rankWith(10, isEnumControl), renderer: RadioGroupControl },
+    ];
+    const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ core, renderers }}>
+        <RadioGroupControl
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const radioButtons = wrapper.find('input[type="radio"]');
+    expect(radioButtons).toHaveLength(4);
+
+    // make sure one option is selected and expect "D"
+    const currentlyChecked = radioButtons.filter('input[checked=true]');
+    expect(currentlyChecked).toHaveLength(1);
+    expect((currentlyChecked.getDOMNode() as HTMLInputElement).value).toBe('D');
+  });
+
+  test('render enum with CSS classes', () => {
+    const renderers = [
+      { tester: rankWith(10, isEnumControl), renderer: RadioGroupControl },
+    ];
+    const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ core, renderers }}>
+        <RadioGroupControl
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const radioControl = wrapper.find('.radio');
+    expect(radioControl).toHaveLength(1);
+    expect(radioControl.prop('style')).toEqual({
+      display: 'flex',
+      flexDirection: 'row',
     });
 
-    test('render enum with CSS classes', () => {
-        const renderers = [{ tester: rankWith(10, isEnumControl), renderer: RadioGroupControl }];
-        const core = initCore(fixture.schema, fixture.uischema, fixture.data);
-        wrapper = mount(
-            <JsonFormsStateProvider initState={{ core, renderers }}>
-                <RadioGroupControl schema={fixture.schema} uischema={fixture.uischema} />
-            </JsonFormsStateProvider>
-        );
-
-        const radioControl = wrapper.find('.radio');
-        expect(radioControl).toHaveLength(1);
-        expect(radioControl.prop('style')).toEqual({
-          display: 'flex', flexDirection: 'row'
-        });
-
-        const radioOptions = wrapper.find('.radio-option');
-        expect(radioOptions).toHaveLength(4);
-
-        const radioInput = wrapper.find('.radio-input');
-        expect(radioInput).toHaveLength(4);
-
-        const radioLabel = wrapper.find('.radio-label');
-        expect(radioLabel).toHaveLength(4);
-    });
+    const radioOptions = wrapper.find('.radio-option');
+    expect(radioOptions).toHaveLength(4);
 
-    test('do not render inline styles in radio if radio class is overwritten', () => {
-        const renderers = [{ tester: rankWith(10, isEnumControl), renderer: RadioGroupControl }];
-        const core = initCore(fixture.schema, fixture.uischema, fixture.data);
-        const customStyles = vanillaStyles.map(style => {
-          if (style.name !== 'control.radio') { return style; }
-
-          return {
-            name: style.name,
-            classNames: ['radio-custom-class']
-          };
-        });
-        wrapper = mount(
-            <JsonFormsStyleContext.Provider value={{ styles: customStyles }}>
-              <JsonFormsStateProvider initState={{ core, renderers }}>
-                <RadioGroupControl schema={fixture.schema} uischema={fixture.uischema} />
-              </JsonFormsStateProvider>
-            </JsonFormsStyleContext.Provider>
-        );
-
-        const radioControl = wrapper.find('.radio-custom-class');
-        expect(radioControl.prop('style')).toEqual({});
-    });
+    const radioInput = wrapper.find('.radio-input');
+    expect(radioInput).toHaveLength(4);
 
-    test('render oneOf', () => {
-        const renderers = [{ tester: rankWith(10, isOneOfEnumControl), renderer: OneOfRadioGroupControl }];
-        const core = initCore(oneOfFixture.schema, oneOfFixture.uischema, oneOfFixture.data);
-        wrapper = mount(
-            <JsonFormsStateProvider initState={{ core, renderers }}>
-                <OneOfRadioGroupControl schema={oneOfFixture.schema} uischema={oneOfFixture.uischema} />
-            </JsonFormsStateProvider>
-        );
-
-        const radioButtons = wrapper.find('input[type="radio"]');
-        expect(radioButtons).toHaveLength(3);
-        const currentlyChecked = radioButtons.filter('input[checked=true]');
-        expect(currentlyChecked).toHaveLength(1);
-        expect((currentlyChecked.getDOMNode() as HTMLInputElement).value).toBe('b');
-    });
+    const radioLabel = wrapper.find('.radio-label');
+    expect(radioLabel).toHaveLength(4);
+  });
+
+  test('do not render inline styles in radio if radio class is overwritten', () => {
+    const renderers = [
+      { tester: rankWith(10, isEnumControl), renderer: RadioGroupControl },
+    ];
+    const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+    const customStyles = vanillaStyles.map((style) => {
+      if (style.name !== 'control.radio') {
+        return style;
+      }
 
-    test('Radio group should have only one selected option', () => {
-        const renderers = [{ tester: rankWith(10, isEnumControl), renderer: RadioGroupControl }];
-        const core = initCore(fixture.schema, fixture.uischema, fixture.data);
-        wrapper = mount(
-            <JsonFormsStateProvider initState={{ core, renderers }}>
-                <RadioGroupControl schema={fixture.schema} uischema={fixture.uischema} />
-            </JsonFormsStateProvider>
-        );
-
-        // change and verify selection
-        core.data = { ...core.data, foo: 'A' };
-        core.data = { ...core.data, foo: 'B' };
-        wrapper.setProps({ initState: { core } });
-        wrapper.update();
-        const currentlyChecked = wrapper.find('input[checked=true]');
-        expect(currentlyChecked).toHaveLength(1);
-        expect((currentlyChecked.getDOMNode() as HTMLInputElement).value).toBe('B');
+      return {
+        name: style.name,
+        classNames: ['radio-custom-class'],
+      };
     });
+    wrapper = mount(
+      <JsonFormsStyleContext.Provider value={{ styles: customStyles }}>
+        <JsonFormsStateProvider initState={{ core, renderers }}>
+          <RadioGroupControl
+            schema={fixture.schema}
+            uischema={fixture.uischema}
+          />
+        </JsonFormsStateProvider>
+      </JsonFormsStyleContext.Provider>
+    );
+
+    const radioControl = wrapper.find('.radio-custom-class');
+    expect(radioControl.prop('style')).toEqual({});
+  });
+
+  test('render oneOf', () => {
+    const renderers = [
+      {
+        tester: rankWith(10, isOneOfEnumControl),
+        renderer: OneOfRadioGroupControl,
+      },
+    ];
+    const core = initCore(
+      oneOfFixture.schema,
+      oneOfFixture.uischema,
+      oneOfFixture.data
+    );
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ core, renderers }}>
+        <OneOfRadioGroupControl
+          schema={oneOfFixture.schema}
+          uischema={oneOfFixture.uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    const radioButtons = wrapper.find('input[type="radio"]');
+    expect(radioButtons).toHaveLength(3);
+    const currentlyChecked = radioButtons.filter('input[checked=true]');
+    expect(currentlyChecked).toHaveLength(1);
+    expect((currentlyChecked.getDOMNode() as HTMLInputElement).value).toBe('b');
+  });
+
+  test('Radio group should have only one selected option', () => {
+    const renderers = [
+      { tester: rankWith(10, isEnumControl), renderer: RadioGroupControl },
+    ];
+    const core = initCore(fixture.schema, fixture.uischema, fixture.data);
+    wrapper = mount(
+      <JsonFormsStateProvider initState={{ core, renderers }}>
+        <RadioGroupControl
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+        />
+      </JsonFormsStateProvider>
+    );
+
+    // change and verify selection
+    core.data = { ...core.data, foo: 'A' };
+    core.data = { ...core.data, foo: 'B' };
+    wrapper.setProps({ initState: { core } });
+    wrapper.update();
+    const currentlyChecked = wrapper.find('input[checked=true]');
+    expect(currentlyChecked).toHaveLength(1);
+    expect((currentlyChecked.getDOMNode() as HTMLInputElement).value).toBe('B');
+  });
 });
diff --git a/packages/vanilla-renderers/test/renderers/SliderCell.test.tsx b/packages/vanilla-renderers/test/renderers/SliderCell.test.tsx
index f55147ddf..a496c186f 100644
--- a/packages/vanilla-renderers/test/renderers/SliderCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/SliderCell.test.tsx
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -39,28 +35,28 @@ Enzyme.configure({ adapter: new Adapter() });
 
 const controlElement: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 const fixture = {
-  data: { 'foo': 5 },
+  data: { foo: 5 },
   schema: {
     type: 'number',
     maximum: 10,
     minimum: 2,
-    default: 6
+    default: 6,
   },
   uischema: controlElement,
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 describe('Slider cell tester', () => {
@@ -68,7 +64,9 @@ describe('Slider cell tester', () => {
     expect(sliderCellTester(undefined, undefined, undefined)).toBe(-1);
     expect(sliderCellTester(null, undefined, undefined)).toBe(-1);
     expect(sliderCellTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-    expect(sliderCellTester({ type: 'Control' }, undefined, undefined)).toBe(-1);
+    expect(sliderCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+      -1
+    );
   });
 
   test('tester with wrong schema type', () => {
@@ -79,8 +77,8 @@ describe('Slider cell tester', () => {
         {
           type: 'object',
           properties: {
-            foo: { type: 'string' }
-          }
+            foo: { type: 'string' },
+          },
         },
         undefined
       )
@@ -96,8 +94,8 @@ describe('Slider cell tester', () => {
           type: 'object',
           properties: {
             foo: { type: 'string' },
-            bar: { type: 'number' }
-          }
+            bar: { type: 'number' },
+          },
         },
         undefined
       )
@@ -112,8 +110,8 @@ describe('Slider cell tester', () => {
         {
           type: 'object',
           properties: {
-            foo: { type: 'number' }
-          }
+            foo: { type: 'number' },
+          },
         },
         undefined
       )
@@ -129,9 +127,9 @@ describe('Slider cell tester', () => {
           properties: {
             foo: {
               type: 'number',
-              minimum: 2
-            }
-          }
+              minimum: 2,
+            },
+          },
         },
         undefined
       )
@@ -147,9 +145,9 @@ describe('Slider cell tester', () => {
           properties: {
             foo: {
               type: 'number',
-              maximum: 10
-            }
-          }
+              maximum: 10,
+            },
+          },
         },
         undefined
       )
@@ -166,9 +164,9 @@ describe('Slider cell tester', () => {
             foo: {
               type: 'number',
               maximum: 10,
-              minimum: 2
-            }
-          }
+              minimum: 2,
+            },
+          },
         },
         undefined
       )
@@ -185,9 +183,9 @@ describe('Slider cell tester', () => {
             foo: {
               type: 'integer',
               maximum: 10,
-              minimum: 2
-            }
-          }
+              minimum: 2,
+            },
+          },
         },
         undefined
       )
@@ -197,7 +195,7 @@ describe('Slider cell tester', () => {
   test('tester with matching schema type (number) with default', () => {
     const control: ControlElement = {
       ...fixture.uischema,
-      options: { slider: true }
+      options: { slider: true },
     };
     expect(
       sliderCellTester(
@@ -209,9 +207,9 @@ describe('Slider cell tester', () => {
               type: 'number',
               maximum: 10,
               minimum: 2,
-              default: 3
-            }
-          }
+              default: 3,
+            },
+          },
         },
         undefined
       )
@@ -231,9 +229,9 @@ describe('Slider cell tester', () => {
               type: 'integer',
               maximum: 10,
               minimum: 2,
-              default: 4
-            }
-          }
+              default: 4,
+            },
+          },
         },
         undefined
       )
@@ -242,7 +240,6 @@ describe('Slider cell tester', () => {
 });
 
 describe('Slider cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -252,33 +249,30 @@ describe('Slider cell', () => {
       type: 'object',
       properties: {
         firstSliderCell: { type: 'number', minimum: 5, maximum: 10 },
-        secondSliderCell: { type: 'number', minimum: 5, maximum: 10 }
-      }
+        secondSliderCell: { type: 'number', minimum: 5, maximum: 10 },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstSliderCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/secondSliderCell',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [
-        firstControlElement,
-        secondControlElement
-      ]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
       firstSliderCell: 3.14,
-      secondSliderCell: 5.12
+      secondSliderCell: 5.12,
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -296,16 +290,12 @@ describe('Slider cell', () => {
     const uischema: ControlElement = {
       type: 'Control',
       scope: '#/properties/foo',
-      options: { focus: true }
+      options: { focus: true },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <SliderCell
-          schema={fixture.schema}
-          uischema={uischema}
-          path='foo'
-        />
+        <SliderCell schema={fixture.schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -316,16 +306,12 @@ describe('Slider cell', () => {
     const uischema: ControlElement = {
       type: 'Control',
       scope: '#/properties/foo',
-      options: { focus: false }
+      options: { focus: false },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <SliderCell
-          schema={fixture.schema}
-          uischema={uischema}
-          path='foo'
-        />
+        <SliderCell schema={fixture.schema} uischema={uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -355,18 +341,14 @@ describe('Slider cell', () => {
           type: 'number',
           maximum: 10,
           minimum: 2,
-          default: 6
-        }
-      }
+          default: 6,
+        },
+      },
     };
-    const core = initCore(schema, fixture.uischema, { 'foo': 5 });
+    const core = initCore(schema, fixture.uischema, { foo: 5 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <SliderCell
-          schema={schema}
-          uischema={fixture.uischema}
-          path='foo'
-        />
+        <SliderCell schema={schema} uischema={fixture.uischema} path='foo' />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -394,7 +376,7 @@ describe('Slider cell', () => {
 
   test('update via input event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -418,7 +400,7 @@ describe('Slider cell', () => {
   });
 
   test('update via action', () => {
-    const core = initCore(fixture.schema, fixture.uischema, { 'foo': 3 });
+    const core = initCore(fixture.schema, fixture.uischema, { foo: 3 });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <SliderCell
diff --git a/packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx b/packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx
index 632d5b923..0065d2b93 100644
--- a/packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/TableArrayControl.test.tsx
@@ -24,14 +24,13 @@
 */
 import * as React from 'react';
 import * as _ from 'lodash';
-import {
-  ControlElement,
-  HorizontalLayout,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout } from '@jsonforms/core';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import { JsonFormsStateProvider } from '@jsonforms/react';
-import TableArrayControl, { tableArrayControlTester, } from '../../src/complex/TableArrayControl';
+import TableArrayControl, {
+  tableArrayControlTester,
+} from '../../src/complex/TableArrayControl';
 import HorizontalLayoutRenderer from '../../src/layouts/HorizontalLayout';
 import '../../src';
 import { initCore, TestEmitter } from '../util';
@@ -49,19 +48,19 @@ const fixture = {
           type: 'object',
           properties: {
             x: { type: 'integer' },
-            y: { type: 'integer' }
-          }
-        }
-      }
-    }
+            y: { type: 'integer' },
+          },
+        },
+      },
+    },
   },
   uischema: {
     type: 'Control',
-    scope: '#/properties/test'
+    scope: '#/properties/test',
   },
   data: {
-    test: [{ x: 1, y: 3 }]
-  }
+    test: [{ x: 1, y: 3 }],
+  },
 };
 
 const fixture2 = {
@@ -77,26 +76,26 @@ const fixture2 = {
               type: 'integer',
               title: 'Column X',
             },
-            y: { type: 'integer' }
-          }
-        }
-      }
-    }
+            y: { type: 'integer' },
+          },
+        },
+      },
+    },
   },
   uischema: {
     type: 'Control',
-    scope: '#/properties/test'
+    scope: '#/properties/test',
   },
   data: {
-    test: [{ x: 1, y: 3 }]
-  }
+    test: [{ x: 1, y: 3 }],
+  },
 };
 
 describe('Table array tester', () => {
   test('tester with recursive document ref only', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#'
+      scope: '#',
     };
     expect(tableArrayControlTester(control, undefined, undefined)).toBe(-1);
   });
@@ -104,7 +103,7 @@ describe('Table array tester', () => {
   test(' tester with prop of wrong type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/x'
+      scope: '#/properties/x',
     };
     expect(
       tableArrayControlTester(
@@ -112,8 +111,8 @@ describe('Table array tester', () => {
         {
           type: 'object',
           properties: {
-            x: { type: 'integer' }
-          }
+            x: { type: 'integer' },
+          },
         },
         undefined
       )
@@ -123,7 +122,7 @@ describe('Table array tester', () => {
   test('tester with correct prop type, but without items', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
       tableArrayControlTester(
@@ -131,8 +130,8 @@ describe('Table array tester', () => {
         {
           type: 'object',
           properties: {
-            foo: { type: 'array' }
-          }
+            foo: { type: 'array' },
+          },
         },
         undefined
       )
@@ -142,7 +141,7 @@ describe('Table array tester', () => {
   test('tester with correct prop type, but different item types', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
       tableArrayControlTester(
@@ -152,12 +151,9 @@ describe('Table array tester', () => {
           properties: {
             foo: {
               type: 'array',
-              items: [
-                { type: 'integer' },
-                { type: 'string' },
-              ]
-            }
-          }
+              items: [{ type: 'integer' }, { type: 'string' }],
+            },
+          },
         },
         undefined
       )
@@ -167,7 +163,7 @@ describe('Table array tester', () => {
   test('tester with primitive item type', () => {
     const control: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     expect(
       tableArrayControlTester(
@@ -177,9 +173,9 @@ describe('Table array tester', () => {
           properties: {
             foo: {
               type: 'array',
-              items: { type: 'integer' }
-            }
-          }
+              items: { type: 'integer' },
+            },
+          },
         },
         undefined
       )
@@ -189,17 +185,19 @@ describe('Table array tester', () => {
   test('tester', () => {
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/test'
+      scope: '#/properties/test',
     };
 
-    expect(tableArrayControlTester(uischema, fixture.schema, undefined)).toBe(3);
+    expect(tableArrayControlTester(uischema, fixture.schema, undefined)).toBe(
+      3
+    );
   });
 
-  test('tester - wrong type', () => expect(tableArrayControlTester({ type: 'Foo' }, null, undefined)).toBe(-1));
+  test('tester - wrong type', () =>
+    expect(tableArrayControlTester({ type: 'Foo' }, null, undefined)).toBe(-1));
 });
 
 describe('Table array control', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -266,15 +264,12 @@ describe('Table array control', () => {
     const control: ControlElement = {
       label: false,
       type: 'Control',
-      scope: '#/properties/test'
+      scope: '#/properties/test',
     };
     const core = initCore(fixture.schema, control, {});
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TableArrayControl
-          schema={fixture.schema}
-          uischema={control}
-        />
+        <TableArrayControl schema={fixture.schema} uischema={control} />
       </JsonFormsStateProvider>
     );
 
@@ -336,15 +331,15 @@ describe('Table array control', () => {
     const headers = wrapper.find('thead').find('th');
 
     // the first property has a title, so we expect it to be rendered as the first column heading
-    expect(headers.at(0).text()).toEqual("Column X");
+    expect(headers.at(0).text()).toEqual('Column X');
 
     // the second property has no title, so we expect to see the property name in start case
-    expect(headers.at(1).text()).toEqual("Y");
+    expect(headers.at(1).text()).toEqual('Y');
   });
 
   test('render new child (empty init data)', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, { test: [] });
     wrapper = mount(
@@ -371,9 +366,11 @@ describe('Table array control', () => {
 
   test('render new child (undefined data)', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
-    const core = initCore(fixture.schema, fixture.uischema, { test: undefined });
+    const core = initCore(fixture.schema, fixture.uischema, {
+      test: undefined,
+    });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <TestEmitter
@@ -398,7 +395,7 @@ describe('Table array control', () => {
 
   test('render new child (null data)', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, { test: null });
     wrapper = mount(
@@ -425,7 +422,7 @@ describe('Table array control', () => {
 
   test('render new child', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -455,27 +452,26 @@ describe('Table array control', () => {
           type: 'array',
           items: {
             type: 'string',
-            maxLength: 3
-          }
-        }
-      }
+            maxLength: 3,
+          },
+        },
+      },
     };
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/test'
+      scope: '#/properties/test',
     };
     const core = initCore(schema, uischema, { test: ['foo', 'bars'] });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TableArrayControl
-          schema={schema}
-          uischema={uischema}
-        />
+        <TableArrayControl schema={schema} uischema={uischema} />
       </JsonFormsStateProvider>
     );
     const rows = wrapper.find('tr');
     const lastRow = rows.last().getDOMNode() as HTMLTableRowElement;
-    expect(lastRow.children.item(1).textContent).toBe('must NOT have more than 3 characters');
+    expect(lastRow.children.item(1).textContent).toBe(
+      'must NOT have more than 3 characters'
+    );
     expect(rows).toHaveLength(3);
   });
 
@@ -493,13 +489,26 @@ describe('Table array control', () => {
     const children = wrapper.find('tbody').getDOMNode();
     expect(children.childNodes).toHaveLength(1);
 
-    core.data = { ...core.data, test: [{ x: 1, y: 3 }, { x: 2, y: 3 }] };
-    wrapper.setProps({ initState: { core }} );
+    core.data = {
+      ...core.data,
+      test: [
+        { x: 1, y: 3 },
+        { x: 2, y: 3 },
+      ],
+    };
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(children.childNodes).toHaveLength(2);
 
-    core.data = { ...core.data, undefined: [{ x: 1, y: 3 }, { x: 2, y: 3 }, { x: 3, y: 3 }] };
-    wrapper.setProps({ initState: { core }} );
+    core.data = {
+      ...core.data,
+      undefined: [
+        { x: 1, y: 3 },
+        { x: 2, y: 3 },
+        { x: 3, y: 3 },
+      ],
+    };
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(children.childNodes).toHaveLength(2);
   });
@@ -544,7 +553,7 @@ describe('Table array control', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, test: 2 };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const validation = wrapper.find('.validation').getDOMNode();
     expect(validation.textContent).toBe('must be array');
@@ -561,7 +570,7 @@ describe('Table array control', () => {
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, test: 3 };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const validation = wrapper.find('.validation').getDOMNode();
     expect(validation.textContent).toBe('must be array');
@@ -593,11 +602,11 @@ describe('Table array control', () => {
     );
     const validation = wrapper.find('.validation').getDOMNode();
     core.data = { ...core.data, test: 3 };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(validation.textContent).toBe('must be array');
     core.data = { ...core.data, test: [] };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(validation.textContent).toBe('');
   });
@@ -611,30 +620,33 @@ describe('Table array control', () => {
           type: 'object',
           properties: {
             middleName: { type: 'string' },
-            lastName: { type: 'string' }
+            lastName: { type: 'string' },
           },
-          required: ['middleName', 'lastName']
-        }
+          required: ['middleName', 'lastName'],
+        },
       },
-      required: ['name']
+      required: ['name'],
     };
     const firstControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const secondControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/personalData/properties/middleName'
+      scope: '#/properties/personalData/properties/middleName',
     };
     const thirdControl: ControlElement = {
       type: 'Control',
-      scope: '#/properties/personalData/properties/lastName'
+      scope: '#/properties/personalData/properties/lastName',
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [firstControl, secondControl, thirdControl]
+      elements: [firstControl, secondControl, thirdControl],
     };
-    const core = initCore(fixture.schema, fixture.uischema, {name: 'John Doe', personalData: {} });
+    const core = initCore(fixture.schema, fixture.uischema, {
+      name: 'John Doe',
+      personalData: {},
+    });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <HorizontalLayoutRenderer schema={schema} uischema={uischema} />
@@ -642,7 +654,11 @@ describe('Table array control', () => {
     );
     const validation = wrapper.find('.valdiation');
     expect(validation.at(0).getDOMNode().textContent).toBe('');
-    expect(validation.at(1).getDOMNode().textContent).toBe('is a required property');
-    expect(validation.at(2).getDOMNode().textContent).toBe('is a required property');
+    expect(validation.at(1).getDOMNode().textContent).toBe(
+      'is a required property'
+    );
+    expect(validation.at(2).getDOMNode().textContent).toBe(
+      'is a required property'
+    );
   });
 });
diff --git a/packages/vanilla-renderers/test/renderers/TextAreaCell.test.tsx b/packages/vanilla-renderers/test/renderers/TextAreaCell.test.tsx
index 97544ce1f..9123ecb9d 100644
--- a/packages/vanilla-renderers/test/renderers/TextAreaCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/TextAreaCell.test.tsx
@@ -23,15 +23,11 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import TextAreaCell, { textAreaCellTester, } from '../../src/cells/TextAreaCell';
+import TextAreaCell, { textAreaCellTester } from '../../src/cells/TextAreaCell';
 import HorizontalLayoutRenderer from '../../src/layouts/HorizontalLayout';
 import { initCore, TestEmitter } from '../util';
 
@@ -39,30 +35,29 @@ Enzyme.configure({ adapter: new Adapter() });
 
 const controlElement: ControlElement = {
   type: 'Control',
-  scope: '#/properties/name'
+  scope: '#/properties/name',
 };
 
 const fixture = {
-  data: { 'name': 'Foo' },
+  data: { name: 'Foo' },
   schema: {
     type: 'string',
-    minLength: 3
+    minLength: 3,
   },
   uischema: controlElement,
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 describe('Text area cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -72,33 +67,30 @@ describe('Text area cell', () => {
       type: 'object',
       properties: {
         firstName: { type: 'string', minLength: 3 },
-        lastName: { type: 'string', minLength: 3 }
-      }
+        lastName: { type: 'string', minLength: 3 },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstName',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/lastName',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [
-        firstControlElement,
-        secondControlElement
-      ]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
-      'firstName': 'Foo',
-      'lastName': 'Boo'
+      firstName: 'Foo',
+      lastName: 'Boo',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -116,8 +108,8 @@ describe('Text area cell', () => {
       type: 'Control',
       scope: '#/properties/name',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -134,8 +126,8 @@ describe('Text area cell', () => {
       type: 'Control',
       scope: '#/properties/name',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -150,7 +142,7 @@ describe('Text area cell', () => {
   test('autofocus inactive by default', () => {
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -166,10 +158,16 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
-    const textarea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textarea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     expect(textarea.value).toBe('Foo');
   });
 
@@ -177,7 +175,11 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -189,7 +191,7 @@ describe('Text area cell', () => {
 
   test('update via input event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -199,7 +201,11 @@ describe('Text area cell', () => {
             onChangeData.data = data;
           }}
         />
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -212,13 +218,19 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
-    const textarea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textarea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     expect(textarea.value).toBe('Bar');
   });
 
@@ -226,12 +238,18 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
-    const textArea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textArea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     core.data = { ...core.data, name: undefined };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(textArea.value).toBe('');
   });
@@ -240,13 +258,19 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: null };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
-    const textArea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textArea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     expect(textArea.value).toBe('');
   });
 
@@ -254,13 +278,19 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, firstname: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
-    const textArea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textArea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     expect(textArea.value).toBe('Foo');
   });
 
@@ -268,13 +298,19 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
-    const textArea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textArea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     expect(textArea.value).toBe('Foo');
   });
 
@@ -282,12 +318,18 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
-    const textArea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textArea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     core.data = { ...core.data, undefined: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(textArea.value).toBe('Foo');
   });
@@ -296,10 +338,16 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} enabled={false} />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          enabled={false}
+        />
       </JsonFormsStateProvider>
     );
-    const textArea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textArea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     expect(textArea.disabled).toBe(true);
   });
 
@@ -307,10 +355,16 @@ describe('Text area cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextAreaCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextAreaCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
-    const textArea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textArea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     expect(textArea.disabled).toBe(false);
   });
 
@@ -319,8 +373,8 @@ describe('Text area cell', () => {
       type: 'Control',
       scope: '#/properties/name',
       options: {
-        placeholder: 'Placeholder for name field'
-      }
+        placeholder: 'Placeholder for name field',
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -328,7 +382,9 @@ describe('Text area cell', () => {
         <TextAreaCell schema={fixture.schema} uischema={uischema} path='name' />
       </JsonFormsStateProvider>
     );
-    const textArea = wrapper.find('textarea').getDOMNode() as HTMLTextAreaElement;
+    const textArea = wrapper
+      .find('textarea')
+      .getDOMNode() as HTMLTextAreaElement;
     expect(textArea.placeholder).toBe('Placeholder for name field');
   });
 });
@@ -338,7 +394,15 @@ describe('Text area cell tester', () => {
     expect(textAreaCellTester(undefined, undefined, undefined)).toBe(-1);
     expect(textAreaCellTester(null, undefined, undefined)).toBe(-1);
     expect(textAreaCellTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-    expect(textAreaCellTester({ type: 'Control' }, undefined, undefined)).toBe(-1);
-    expect(textAreaCellTester({ type: 'Control', options: { multi: true } }, undefined, undefined)).toBe(2);
+    expect(textAreaCellTester({ type: 'Control' }, undefined, undefined)).toBe(
+      -1
+    );
+    expect(
+      textAreaCellTester(
+        { type: 'Control', options: { multi: true } },
+        undefined,
+        undefined
+      )
+    ).toBe(2);
   });
 });
diff --git a/packages/vanilla-renderers/test/renderers/TextCell.test.tsx b/packages/vanilla-renderers/test/renderers/TextCell.test.tsx
index 56809395d..cba476550 100644
--- a/packages/vanilla-renderers/test/renderers/TextCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/TextCell.test.tsx
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -42,31 +38,31 @@ const defaultSize = 20;
 
 const controlElement: ControlElement = {
   type: 'Control',
-  scope: '#/properties/name'
+  scope: '#/properties/name',
 };
 
 const fixture = {
   data: { name: 'Foo' },
   minLengthSchema: {
     type: 'string',
-    minLength: 3
+    minLength: 3,
   },
   maxLengthSchema: {
     type: 'string',
-    maxLength: 5
+    maxLength: 5,
   },
   schema: { type: 'string' },
   uischema: controlElement,
   styles: [
     {
       name: 'control',
-      classNames: ['control']
+      classNames: ['control'],
     },
     {
       name: 'control.validation',
-      classNames: ['validation']
-    }
-  ]
+      classNames: ['validation'],
+    },
+  ],
 };
 
 test('Text cell tester', () => {
@@ -77,7 +73,6 @@ test('Text cell tester', () => {
 });
 
 describe('Text cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -87,24 +82,27 @@ describe('Text cell', () => {
       type: 'object',
       properties: {
         firstName: { type: 'string' },
-        lastName: { type: 'string' }
-      }
+        lastName: { type: 'string' },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstName',
-      options: { focus: true }
+      options: { focus: true },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/lastName',
-      options: { focus: true }
+      options: { focus: true },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [firstControlElement, secondControlElement]
+      elements: [firstControlElement, secondControlElement],
     };
-    const core = initCore(schema, uischema, { firstName: 'Foo', lastName: 'Boo' });
+    const core = initCore(schema, uischema, {
+      firstName: 'Foo',
+      lastName: 'Boo',
+    });
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <HorizontalLayoutRenderer schema={schema} uischema={uischema} />
@@ -119,7 +117,7 @@ describe('Text cell', () => {
     const uischema: ControlElement = {
       type: 'Control',
       scope: '#/properties/name',
-      options: { focus: true }
+      options: { focus: true },
     };
     const core = initCore(fixture.minLengthSchema, uischema, fixture.data);
     wrapper = mount(
@@ -139,12 +137,16 @@ describe('Text cell', () => {
     const uischema: ControlElement = {
       type: 'Control',
       scope: '#/properties/name',
-      options: { focus: false }
+      options: { focus: false },
     };
     const core = initCore(fixture.minLengthSchema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode();
@@ -152,10 +154,18 @@ describe('Text cell', () => {
   });
 
   test('autofocus inactive by default', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode();
@@ -166,8 +176,8 @@ describe('Text cell', () => {
     const schema: JsonSchema = {
       type: 'object',
       properties: {
-        name: { type: 'string' }
-      }
+        name: { type: 'string' },
+      },
     };
     const core = initCore(schema, fixture.uischema, { name: 'Foo' });
     wrapper = mount(
@@ -183,7 +193,11 @@ describe('Text cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -195,9 +209,13 @@ describe('Text cell', () => {
 
   test('update via input event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
         <TestEmitter
@@ -205,7 +223,11 @@ describe('Text cell', () => {
             onChangeData.data = data;
           }}
         />
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -214,94 +236,151 @@ describe('Text cell', () => {
   });
 
   test('update via action', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     core.data = { ...core.data, name: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(input.value).toBe('Bar');
   });
 
   test('update with undefined value', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: undefined };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('');
   });
 
   test('update with null value', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, name: null };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('');
   });
 
   test('update with wrong ref', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, firstname: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('Foo');
   });
 
   test('update with null ref', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('Foo');
   });
 
   test('update with undefined ref', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, undefined: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('Foo');
   });
 
   test('disable', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' enabled={false} />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+          enabled={false}
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -309,10 +388,18 @@ describe('Text cell', () => {
   });
 
   test('enabled by default', () => {
-    const core = initCore(fixture.minLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.minLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.minLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.minLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -324,8 +411,8 @@ describe('Text cell', () => {
       type: 'Control',
       scope: '#/properties/name',
       options: {
-        placeholder: 'Placeholder for name field'
-      }
+        placeholder: 'Placeholder for name field',
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -343,13 +430,17 @@ describe('Text cell', () => {
       scope: '#/properties/name',
       options: {
         trim: true,
-        restrict: true
-      }
+        restrict: true,
+      },
     };
     const core = initCore(fixture.maxLengthSchema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.maxLengthSchema} uischema={uischema} path='name' />
+        <TextCell
+          schema={fixture.maxLengthSchema}
+          uischema={uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -363,13 +454,17 @@ describe('Text cell', () => {
       scope: '#/properties/name',
       options: {
         trim: true,
-        restrict: false
-      }
+        restrict: false,
+      },
     };
     const core = initCore(fixture.maxLengthSchema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.maxLengthSchema} uischema={uischema} path='name' />
+        <TextCell
+          schema={fixture.maxLengthSchema}
+          uischema={uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -383,13 +478,17 @@ describe('Text cell', () => {
       scope: '#/properties/name',
       options: {
         trim: false,
-        restrict: true
-      }
+        restrict: true,
+      },
     };
     const core = initCore(fixture.maxLengthSchema, uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.maxLengthSchema} uischema={uischema} path='name' />
+        <TextCell
+          schema={fixture.maxLengthSchema}
+          uischema={uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -398,10 +497,18 @@ describe('Text cell', () => {
   });
 
   test('do not use maxLength by default', () => {
-    const core = initCore(fixture.maxLengthSchema, fixture.uischema, fixture.data);
+    const core = initCore(
+      fixture.maxLengthSchema,
+      fixture.uischema,
+      fixture.data
+    );
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.maxLengthSchema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.maxLengthSchema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -415,8 +522,8 @@ describe('Text cell', () => {
       scope: '#/properties/name',
       options: {
         trim: true,
-        restrict: true
-      }
+        restrict: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -435,8 +542,8 @@ describe('Text cell', () => {
       scope: '#/properties/name',
       options: {
         trim: true,
-        restrict: false
-      }
+        restrict: false,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -455,8 +562,8 @@ describe('Text cell', () => {
       scope: '#/properties/name',
       options: {
         trim: false,
-        restrict: true
-      }
+        restrict: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -473,7 +580,11 @@ describe('Text cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TextCell schema={fixture.schema} uischema={fixture.uischema} path='name' />
+        <TextCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='name'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
diff --git a/packages/vanilla-renderers/test/renderers/TimeCell.test.tsx b/packages/vanilla-renderers/test/renderers/TimeCell.test.tsx
index 870eca35d..b2438a25b 100644
--- a/packages/vanilla-renderers/test/renderers/TimeCell.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/TimeCell.test.tsx
@@ -23,11 +23,7 @@
   THE SOFTWARE.
 */
 import * as React from 'react';
-import {
-  ControlElement,
-  HorizontalLayout,
-  JsonSchema,
-} from '@jsonforms/core';
+import { ControlElement, HorizontalLayout, JsonSchema } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
@@ -39,20 +35,19 @@ Enzyme.configure({ adapter: new Adapter() });
 
 const controlElement: ControlElement = {
   type: 'Control',
-  scope: '#/properties/foo'
+  scope: '#/properties/foo',
 };
 
 const fixture = {
-  data: { 'foo': '13:37' },
+  data: { foo: '13:37' },
   schema: {
     type: 'string',
-    format: 'time'
+    format: 'time',
   },
-  uischema: controlElement
+  uischema: controlElement,
 };
 
 describe('Time cell tester', () => {
-
   test('tester', () => {
     expect(timeCellTester(undefined, undefined, undefined)).toBe(-1);
     expect(timeCellTester(null, undefined, undefined)).toBe(-1);
@@ -85,7 +80,7 @@ describe('Time cell tester', () => {
             foo: { type: 'string' },
             bar: {
               type: 'string',
-              format: 'time'
+              format: 'time',
             },
           },
         },
@@ -114,7 +109,6 @@ describe('Time cell tester', () => {
 });
 
 describe('Time cell', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
@@ -124,33 +118,30 @@ describe('Time cell', () => {
       type: 'object',
       properties: {
         firstDate: { type: 'string', format: 'date' },
-        secondDate: { type: 'string', format: 'date' }
-      }
+        secondDate: { type: 'string', format: 'date' },
+      },
     };
     const firstControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/firstDate',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const secondControlElement: ControlElement = {
       type: 'Control',
       scope: '#/properties/secondDate',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const uischema: HorizontalLayout = {
       type: 'HorizontalLayout',
-      elements: [
-        firstControlElement,
-        secondControlElement
-      ]
+      elements: [firstControlElement, secondControlElement],
     };
     const data = {
-      'firstDate': '1980-04-04',
-      'secondDate': '1980-04-04'
+      firstDate: '1980-04-04',
+      secondDate: '1980-04-04',
     };
     const core = initCore(schema, uischema, data);
     wrapper = mount(
@@ -168,8 +159,8 @@ describe('Time cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: true
-      }
+        focus: true,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -186,8 +177,8 @@ describe('Time cell', () => {
       type: 'Control',
       scope: '#/properties/foo',
       options: {
-        focus: false
-      }
+        focus: false,
+      },
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -202,7 +193,7 @@ describe('Time cell', () => {
   test('autofocus inactive by default', () => {
     const uischema: ControlElement = {
       type: 'Control',
-      scope: '#/properties/foo'
+      scope: '#/properties/foo',
     };
     const core = initCore(fixture.schema, uischema, fixture.data);
     wrapper = mount(
@@ -218,7 +209,11 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -231,7 +226,11 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
 
@@ -243,7 +242,7 @@ describe('Time cell', () => {
 
   test('update via event', () => {
     const onChangeData: any = {
-      data: undefined
+      data: undefined,
     };
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
@@ -253,7 +252,11 @@ describe('Time cell', () => {
             onChangeData.data = data;
           }}
         />
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input');
@@ -266,11 +269,15 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: '20:15' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('20:15');
@@ -280,11 +287,15 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: null };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('');
@@ -294,11 +305,15 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, foo: undefined };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('');
@@ -308,11 +323,15 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, bar: 'Bar' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('13:37');
@@ -322,11 +341,15 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     core.data = { ...core.data, null: '20:15' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     expect(input.value).toBe('13:37');
@@ -336,12 +359,16 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
     core.data = { ...core.data, undefined: '20:15' };
-    wrapper.setProps({ initState: { core }} );
+    wrapper.setProps({ initState: { core } });
     wrapper.update();
     expect(input.value).toBe('13:37');
   });
@@ -350,7 +377,12 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' enabled={false} />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+          enabled={false}
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
@@ -361,7 +393,11 @@ describe('Time cell', () => {
     const core = initCore(fixture.schema, fixture.uischema, fixture.data);
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <TimeCell schema={fixture.schema} uischema={fixture.uischema} path='foo' />
+        <TimeCell
+          schema={fixture.schema}
+          uischema={fixture.uischema}
+          path='foo'
+        />
       </JsonFormsStateProvider>
     );
     const input = wrapper.find('input').getDOMNode() as HTMLInputElement;
diff --git a/packages/vanilla-renderers/test/renderers/VerticalLayout.test.tsx b/packages/vanilla-renderers/test/renderers/VerticalLayout.test.tsx
index f82e0bdf8..3b4c0593a 100644
--- a/packages/vanilla-renderers/test/renderers/VerticalLayout.test.tsx
+++ b/packages/vanilla-renderers/test/renderers/VerticalLayout.test.tsx
@@ -27,7 +27,9 @@ import { UISchemaElement, VerticalLayout } from '@jsonforms/core';
 import { JsonFormsStateProvider } from '@jsonforms/react';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import Enzyme, { mount, ReactWrapper } from 'enzyme';
-import VerticalLayoutRenderer, { verticalLayoutTester } from '../../src/layouts/VerticalLayout';
+import VerticalLayoutRenderer, {
+  verticalLayoutTester,
+} from '../../src/layouts/VerticalLayout';
 import { initCore } from '../util';
 
 Enzyme.configure({ adapter: new Adapter() });
@@ -36,18 +38,19 @@ test('tester', () => {
   expect(verticalLayoutTester(undefined, undefined, undefined)).toBe(-1);
   expect(verticalLayoutTester(null, undefined, undefined)).toBe(-1);
   expect(verticalLayoutTester({ type: 'Foo' }, undefined, undefined)).toBe(-1);
-  expect(verticalLayoutTester({ type: 'VerticalLayout' }, undefined, undefined)).toBe(1);
+  expect(
+    verticalLayoutTester({ type: 'VerticalLayout' }, undefined, undefined)
+  ).toBe(1);
 });
 
 describe('Vertical layout', () => {
-
   let wrapper: ReactWrapper;
 
   afterEach(() => wrapper.unmount());
 
   test('render with undefined elements', () => {
     const uischema: UISchemaElement = {
-      type: 'VerticalLayout'
+      type: 'VerticalLayout',
     };
     const core = initCore({}, uischema, {});
     wrapper = mount(
@@ -62,7 +65,7 @@ describe('Vertical layout', () => {
   test('render with null elements', () => {
     const uischema: VerticalLayout = {
       type: 'VerticalLayout',
-      elements: null
+      elements: null,
     };
     const core = initCore({}, uischema, {});
     wrapper = mount(
@@ -77,7 +80,7 @@ describe('Vertical layout', () => {
   test('render with children', () => {
     const uischema: VerticalLayout = {
       type: 'VerticalLayout',
-      elements: [{ type: 'Control' }, { type: 'Control' }]
+      elements: [{ type: 'Control' }, { type: 'Control' }],
     };
     const core = initCore({}, uischema, {});
     wrapper = mount(
@@ -100,13 +103,12 @@ describe('Vertical layout', () => {
 
     wrapper = mount(
       <JsonFormsStateProvider initState={{ core }}>
-        <VerticalLayoutRenderer
-          uischema={uischema}
-          visible={false}
-        />
+        <VerticalLayoutRenderer uischema={uischema} visible={false} />
       </JsonFormsStateProvider>
     );
-    const verticalLayout = wrapper.find('JsonFormsLayout').getDOMNode() as HTMLDivElement;
+    const verticalLayout = wrapper
+      .find('JsonFormsLayout')
+      .getDOMNode() as HTMLDivElement;
     expect(verticalLayout.hidden).toBe(true);
   });
 
@@ -122,7 +124,9 @@ describe('Vertical layout', () => {
         <VerticalLayoutRenderer uischema={uischema} />
       </JsonFormsStateProvider>
     );
-    const verticalLayout = wrapper.find('JsonFormsLayout').getDOMNode() as HTMLDivElement;
+    const verticalLayout = wrapper
+      .find('JsonFormsLayout')
+      .getDOMNode() as HTMLDivElement;
     expect(verticalLayout.hidden).toBe(false);
   });
 });
diff --git a/packages/vanilla-renderers/test/styling.registry.test.ts b/packages/vanilla-renderers/test/styling.registry.test.ts
index 0d7a16615..c81667f04 100644
--- a/packages/vanilla-renderers/test/styling.registry.test.ts
+++ b/packages/vanilla-renderers/test/styling.registry.test.ts
@@ -27,7 +27,7 @@ import { registerStyle, registerStyles, unregisterStyle } from '../src/actions';
 import { stylingReducer } from '../src/reducers';
 import { findStyle, findStyleAsClassName } from '../src/reducers/styling';
 
-test('register single style', t => {
+test('register single style', (t) => {
   const after = stylingReducer(
     [],
     registerStyle('button', ['btn', 'btn-primary'])
@@ -35,36 +35,36 @@ test('register single style', t => {
   t.deepEqual(findStyle(after)('button'), ['btn', 'btn-primary']);
 });
 
-test('register styles', t => {
+test('register styles', (t) => {
   const after = stylingReducer(
     [],
     registerStyles([
       {
         name: 'button',
-        classNames: ['btn', 'btn-primary']
+        classNames: ['btn', 'btn-primary'],
       },
       {
         name: 'select',
-        classNames: ['custom-select']
-      }
+        classNames: ['custom-select'],
+      },
     ])
   );
   t.deepEqual(findStyle(after)('button'), ['btn', 'btn-primary']);
   t.deepEqual(findStyle(after)('select'), ['custom-select']);
 });
 
-test('unregister style', t => {
+test('unregister style', (t) => {
   const after = stylingReducer(
     [
       { name: 'button', classNames: ['btn', 'btn-primary'] },
-      { name: 'select', classNames: ['custom-select'] }
+      { name: 'select', classNames: ['custom-select'] },
     ],
     unregisterStyle('button')
   );
   t.is(after.length, 1);
 });
 
-test('return classNames as concatenated string', t => {
+test('return classNames as concatenated string', (t) => {
   const after = stylingReducer(
     [],
     registerStyle('button', ['btn', 'btn-primary'])
@@ -74,7 +74,7 @@ test('return classNames as concatenated string', t => {
   t.is(findStyleAsClassName(after)('something'), '');
 });
 
-test('overwrite any existing style', t => {
+test('overwrite any existing style', (t) => {
   const after = stylingReducer(
     [],
     registerStyle('button', ['btn', 'btn-primary'])
diff --git a/packages/vanilla-renderers/test/util.ts b/packages/vanilla-renderers/test/util.ts
index 18673c58d..f46700390 100644
--- a/packages/vanilla-renderers/test/util.ts
+++ b/packages/vanilla-renderers/test/util.ts
@@ -23,19 +23,19 @@
   THE SOFTWARE.
 */
 
-import {
-  createAjv,
-  JsonSchema,
-  UISchemaElement
-} from '@jsonforms/core';
+import { createAjv, JsonSchema, UISchemaElement } from '@jsonforms/core';
 import { JsonFormsReactProps, useJsonForms } from '@jsonforms/react';
 import React from 'react';
 
-export const initCore = (schema: JsonSchema, uischema: UISchemaElement, data?: any) => {
+export const initCore = (
+  schema: JsonSchema,
+  uischema: UISchemaElement,
+  data?: any
+) => {
   return { schema, uischema, data, ajv: createAjv() };
 };
 
-export const TestEmitter : React.FC<JsonFormsReactProps> = ({onChange}) => {
+export const TestEmitter: React.FC<JsonFormsReactProps> = ({ onChange }) => {
   const ctx = useJsonForms();
   const { data, errors } = ctx.core;
   React.useEffect(() => {
diff --git a/packages/vue/vue-vanilla/dev/components/App.vue b/packages/vue/vue-vanilla/dev/components/App.vue
index 803b34234..910d0490b 100644
--- a/packages/vue/vue-vanilla/dev/components/App.vue
+++ b/packages/vue/vue-vanilla/dev/components/App.vue
@@ -11,17 +11,22 @@ import get from 'lodash/get';
 
 // mergeStyles combines all classes from both styles definitions into one
 const myStyles = mergeStyles(defaultStyles, {
-  control: { root: 'my-control' }
+  control: { root: 'my-control' },
 });
 
 const examples = getExamples();
 
 export default defineComponent({
-  name: 'app',
+  name: 'App',
   components: {
-    JsonForms
+    JsonForms,
   },
-  data: function() {
+  provide() {
+    return {
+      styles: myStyles,
+    };
+  },
+  data: function () {
     const i18n: Partial<JsonFormsI18nState> = { locale: 'en' };
     const additionalErrors: ErrorObject[] = [];
     return {
@@ -30,17 +35,17 @@ export default defineComponent({
       currentExampleName: examples[0].name,
       examples,
       config: {
-        hideRequiredAsterisk: true
+        hideRequiredAsterisk: true,
       },
       i18n,
-      additionalErrors
+      additionalErrors,
     };
   },
   computed: {
     example() {
       const name = (this as any).currentExampleName;
-      return examples.find(ex => ex.name === name)!;
-    }
+      return examples.find((ex) => ex.name === name)!;
+    },
   },
   methods: {
     onChange(event: JsonFormsChangeEvent) {
@@ -53,7 +58,10 @@ export default defineComponent({
     translationChange(event: any) {
       try {
         const input = JSON.parse(event.target.value);
-        (this as any).i18n.translate = (key: string, defaultMessage: string | undefined) => {
+        (this as any).i18n.translate = (
+          key: string,
+          defaultMessage: string | undefined
+        ) => {
           const translated = get(input, key) as string;
           return translated ?? defaultMessage;
         };
@@ -62,43 +70,27 @@ export default defineComponent({
       }
     },
   },
-  provide() {
-    return {
-      styles: myStyles
-    };
-  }
 });
 </script>
 
-<style scoped>
-.form {
-  max-width: 500px;
-  flex: 1;
-}
-.container {
-  display: flex;
-}
-.data {
-  flex: 1;
-}
-</style>
-
 <template>
   <div class="container">
     <div className="example-selector">
       <h4>Select Example:</h4>
-      <select @change="onExampleChange($event)" v-model="currentExampleName">
+      <select v-model="currentExampleName" @change="onExampleChange($event)">
         <option
           v-for="option in examples"
           :key="option.name"
           :value="option.name"
           :label="option.label"
-          >{{ option.label }}</option
         >
+          {{ option.label }}
+        </option>
       </select>
       <div class="data">
         <h5>data</h5>
-        <pre>{{ JSON.stringify(data, null, 2) }}
+        <pre
+          >{{ JSON.stringify(data, null, 2) }}
         </pre>
         <h5>i18n translator</h5>
         <textarea @change="translationChange"></textarea>
@@ -115,8 +107,22 @@ export default defineComponent({
         :config="config"
         :i18n="i18n"
         :additional-errors="additionalErrors"
-        @change="onChange">
+        @change="onChange"
+      >
       </json-forms>
     </div>
   </div>
 </template>
+
+<style scoped>
+.form {
+  max-width: 500px;
+  flex: 1;
+}
+.container {
+  display: flex;
+}
+.data {
+  flex: 1;
+}
+</style>
diff --git a/packages/vue/vue-vanilla/src/array/ArrayListElement.vue b/packages/vue/vue-vanilla/src/array/ArrayListElement.vue
index 781f325a4..62e8da464 100644
--- a/packages/vue/vue-vanilla/src/array/ArrayListElement.vue
+++ b/packages/vue/vue-vanilla/src/array/ArrayListElement.vue
@@ -1,27 +1,27 @@
 <template>
   <div :class="styles.arrayList.item">
-    <div @click="expandClicked" :class="toolbarClasses">
+    <div :class="toolbarClasses" @click="expandClicked">
       <div :class="styles.arrayList.itemLabel">{{ label }}</div>
       <button
-        @click="moveUpClicked"
         :disabled="!moveUpEnabled"
         :class="styles.arrayList.itemMoveUp"
         type="button"
+        @click="moveUpClicked"
       >
         ↑
       </button>
       <button
-        @click="moveDownClicked"
         :disabled="!moveDownEnabled"
         :class="styles.arrayList.itemMoveDown"
         type="button"
+        @click="moveDownClicked"
       >
         ↓
       </button>
       <button
-        @click="deleteClicked"
         :class="styles.arrayList.itemDelete"
         type="button"
+        @click="deleteClicked"
       >
         🗙
       </button>
@@ -37,62 +37,64 @@ import { defineComponent, PropType } from 'vue';
 import { classes, Styles } from '../styles';
 
 const listItem = defineComponent({
-  name: 'array-list-element',
+  name: 'ArrayListElement',
   props: {
     initiallyExpanded: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     label: {
       required: false,
       type: String,
-      default: ''
+      default: '',
     },
     moveUpEnabled: {
       required: false,
       type: Boolean,
-      default: true
+      default: true,
     },
     moveDownEnabled: {
       required: false,
       type: Boolean,
-      default: true
+      default: true,
     },
     moveUp: {
       required: false,
       type: Function,
-      default: undefined
+      default: undefined,
     },
     moveDown: {
       required: false,
       type: Function,
-      default: undefined
+      default: undefined,
     },
     delete: {
       required: false,
       type: Function,
-      default: undefined
+      default: undefined,
     },
     styles: {
       required: true,
-      type: Object as PropType<Styles>
-    }
+      type: Object as PropType<Styles>,
+    },
   },
   data() {
     return {
-      expanded: this.initiallyExpanded
+      expanded: this.initiallyExpanded,
     };
   },
   computed: {
     contentClasses(): string {
-      return classes`${this.styles.arrayList.itemContent} ${this.expanded &&
-        this.styles.arrayList.itemExpanded}`;
+      return classes`${this.styles.arrayList.itemContent} ${
+        this.expanded && this.styles.arrayList.itemExpanded
+      }`;
     },
     toolbarClasses(): string {
-      return classes`${this.styles.arrayList.itemToolbar} ${this.expanded &&
-        this.styles.arrayList.itemExpanded}`;
-    }
+      return classes`${this.styles.arrayList.itemToolbar} ${
+        this.expanded && this.styles.arrayList.itemExpanded
+      }`;
+    },
   },
   methods: {
     expandClicked(): void {
@@ -109,8 +111,8 @@ const listItem = defineComponent({
     deleteClicked(event: Event): void {
       event.stopPropagation();
       this.delete?.();
-    }
-  }
+    },
+  },
 });
 
 export default listItem;
diff --git a/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue b/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
index 4f390c7f8..2674df945 100644
--- a/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
+++ b/packages/vue/vue-vanilla/src/array/ArrayListRenderer.vue
@@ -3,8 +3,8 @@
     <legend :class="styles.arrayList.legend">
       <button
         :class="styles.arrayList.addButton"
-        @click="addButtonClick"
         type="button"
+        @click="addButtonClick"
       >
         +
       </button>
@@ -18,10 +18,10 @@
       :class="styles.arrayList.itemWrapper"
     >
       <array-list-element
-        :moveUp="moveUp(control.path, index)"
-        :moveUpEnabled="index > 0"
-        :moveDown="moveDown(control.path, index)"
-        :moveDownEnabled="index < control.data.length - 1"
+        :move-up="moveUp(control.path, index)"
+        :move-up-enabled="index > 0"
+        :move-down="moveDown(control.path, index)"
+        :move-down-enabled="index < control.data.length - 1"
         :delete="removeItems(control.path, [index])"
         :label="childLabelForIndex(index)"
         :styles="styles"
@@ -37,7 +37,7 @@
       </array-list-element>
     </div>
     <div v-if="noData" :class="styles.arrayList.noData">
-      {{control.translations.noDataMessage}}
+      {{ control.translations.noDataMessage }}
     </div>
   </fieldset>
 </template>
@@ -49,26 +49,26 @@ import {
   JsonFormsRendererRegistryEntry,
   rankWith,
   ControlElement,
-  schemaTypeIs
+  schemaTypeIs,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
   DispatchRenderer,
   rendererProps,
   useJsonFormsArrayControl,
-  RendererProps
+  RendererProps,
 } from '../../config/jsonforms';
 import { useVanillaArrayControl } from '../util';
 import ArrayListElement from './ArrayListElement.vue';
 
 const controlRenderer = defineComponent({
-  name: 'array-list-renderer',
+  name: 'ArrayListRenderer',
   components: {
     ArrayListElement,
-    DispatchRenderer
+    DispatchRenderer,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
     return useVanillaArrayControl(useJsonFormsArrayControl(props));
@@ -76,7 +76,7 @@ const controlRenderer = defineComponent({
   computed: {
     noData(): boolean {
       return !this.control.data || this.control.data.length === 0;
-    }
+    },
   },
   methods: {
     composePaths,
@@ -86,14 +86,14 @@ const controlRenderer = defineComponent({
         this.control.path,
         createDefaultValue(this.control.schema)
       )();
-    }
-  }
+    },
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, schemaTypeIs('array'))
+  tester: rankWith(2, schemaTypeIs('array')),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/array/index.ts b/packages/vue/vue-vanilla/src/array/index.ts
index 2d7e3c0b8..83d9c9029 100644
--- a/packages/vue/vue-vanilla/src/array/index.ts
+++ b/packages/vue/vue-vanilla/src/array/index.ts
@@ -2,6 +2,4 @@ export { default as ArrayListRenderer } from './ArrayListRenderer.vue';
 
 import { entry as arrayListRendererEntry } from './ArrayListRenderer.vue';
 
-export const arrayRenderers = [
-  arrayListRendererEntry
-]
+export const arrayRenderers = [arrayListRendererEntry];
diff --git a/packages/vue/vue-vanilla/src/controls/BooleanControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/BooleanControlRenderer.vue
index 59c816fa5..d8332eb82 100644
--- a/packages/vue/vue-vanilla/src/controls/BooleanControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/BooleanControlRenderer.vue
@@ -2,13 +2,13 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <input
+      :id="control.id + '-input'"
       type="checkbox"
       :class="styles.control.input"
-      :id="control.id + '-input'"
       :checked="!!control.data"
       :disabled="!control.enabled"
       :autofocus="appliedOptions.focus"
@@ -25,30 +25,37 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isBooleanControl
+  isBooleanControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'boolean-control-renderer',
+  name: 'BooleanControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target => target.checked);
-  }
+    return useVanillaControl(
+      useJsonFormsControl(props),
+      (target) => target.checked
+    );
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(1, isBooleanControl)
+  tester: rankWith(1, isBooleanControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue b/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue
index 72b044370..9880e1008 100644
--- a/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue
+++ b/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <div v-if="visible" :class="styles.control.root" :id="id">
+  <div v-if="visible" :id="id" :class="styles.control.root">
     <label :for="id + '-input'" :class="styles.control.label">
       {{ computedLabel }}
     </label>
@@ -19,51 +19,51 @@ import { Styles } from '../styles';
 import { Options } from '../util';
 
 export default defineComponent({
-  name: 'control-wrapper',
+  name: 'ControlWrapper',
   props: {
     id: {
-      required: true as true,
-      type: String
+      required: true as const,
+      type: String,
     },
     description: {
-      required: false as false,
+      required: false as const,
       type: String,
-      default: undefined
+      default: undefined,
     },
     errors: {
-      required: false as false,
+      required: false as const,
       type: String,
-      default: undefined
+      default: undefined,
     },
     label: {
-      required: false as false,
+      required: false as const,
       type: String,
-      default: undefined
+      default: undefined,
     },
     appliedOptions: {
-      required: false as false,
+      required: false as const,
       type: Object as PropType<Options>,
-      default: undefined
+      default: undefined,
     },
     visible: {
-      required: false as false,
+      required: false as const,
       type: Boolean,
-      default: true
+      default: true,
     },
     required: {
-      required: false as false,
+      required: false as const,
       type: Boolean,
-      default: false
+      default: false,
     },
     isFocused: {
-      required: false as false,
+      required: false as const,
       type: Boolean,
-      default: false
+      default: false,
     },
     styles: {
       required: true,
-      type: Object as PropType<Styles>
-    }
+      type: Object as PropType<Styles>,
+    },
   },
   computed: {
     showDescription(): boolean {
@@ -80,7 +80,7 @@ export default defineComponent({
         this.required,
         !!this.appliedOptions?.hideRequiredAsterisk
       );
-    }
-  }
+    },
+  },
 });
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/DateControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/DateControlRenderer.vue
index 07117a191..14ef0e8ff 100644
--- a/packages/vue/vue-vanilla/src/controls/DateControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/DateControlRenderer.vue
@@ -2,12 +2,12 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <input
-      type="date"
       :id="control.id + '-input'"
+      type="date"
       :class="styles.control.input"
       :value="control.data"
       :disabled="!control.enabled"
@@ -25,23 +25,30 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isDateControl
+  isDateControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'date-control-renderer',
+  name: 'DateControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined);
+    return useVanillaControl(
+      useJsonFormsControl(props),
+      (target) => target.value || undefined
+    );
   },
 });
 
@@ -49,6 +56,6 @@ export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, isDateControl)
+  tester: rankWith(2, isDateControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/DateTimeControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/DateTimeControlRenderer.vue
index aff2833c3..39b0400b0 100644
--- a/packages/vue/vue-vanilla/src/controls/DateTimeControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/DateTimeControlRenderer.vue
@@ -2,12 +2,12 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <input
-      type="datetime-local"
       :id="control.id + '-input'"
+      type="datetime-local"
       :class="styles.control.input"
       :value="dataTime"
       :disabled="!control.enabled"
@@ -25,10 +25,14 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isDateTimeControl
+  isDateTimeControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
@@ -37,20 +41,22 @@ const toISOString = (inputDateTime: string) => {
 };
 
 const controlRenderer = defineComponent({
-  name: 'datetime-control-renderer',
+  name: 'DatetimeControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target => toISOString(target.value));
+    return useVanillaControl(useJsonFormsControl(props), (target) =>
+      toISOString(target.value)
+    );
   },
   computed: {
     dataTime(): string {
       return (this.control.data ?? '').substr(0, 16);
-    }
+    },
   },
 });
 
@@ -58,6 +64,6 @@ export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, isDateTimeControl)
+  tester: rankWith(2, isDateTimeControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/EnumControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/EnumControlRenderer.vue
index c2a63fa2e..d713e584f 100644
--- a/packages/vue/vue-vanilla/src/controls/EnumControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/EnumControlRenderer.vue
@@ -2,8 +2,8 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <select
       :id="control.id + '-select'"
@@ -15,16 +15,15 @@
       @focus="isFocused = true"
       @blur="isFocused = false"
     >
-      <option value="" key="empty" :class="styles.control.option"/>
+      <option key="empty" value="" :class="styles.control.option" />
       <option
         v-for="optionElement in control.options"
         :key="optionElement.value"
         :value="optionElement.value"
         :label="optionElement.label"
         :class="styles.control.option"
-      >
-      </option
-    ></select>
+      ></option>
+    </select>
   </control-wrapper>
 </template>
 
@@ -33,30 +32,36 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isEnumControl
+  isEnumControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsEnumControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsEnumControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'enum-control-renderer',
+  name: 'EnumControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsEnumControl(props), target => target.selectedIndex === 0 ? undefined : target.value);
-  }
+    return useVanillaControl(useJsonFormsEnumControl(props), (target) =>
+      target.selectedIndex === 0 ? undefined : target.value
+    );
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, isEnumControl)
+  tester: rankWith(2, isEnumControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
index 14e6106ec..7dd3855a4 100644
--- a/packages/vue/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/EnumOneOfControlRenderer.vue
@@ -2,8 +2,8 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <select
       :id="control.id + '-input'"
@@ -15,16 +15,15 @@
       @focus="isFocused = true"
       @blur="isFocused = false"
     >
-      <option value="" key="empty" :class="styles.control.option"/>
+      <option key="empty" value="" :class="styles.control.option" />
       <option
         v-for="optionElement in control.options"
         :key="optionElement.value"
         :value="optionElement.value"
         :label="optionElement.label"
         :class="styles.control.option"
-      >
-      </option
-    ></select>
+      ></option>
+    </select>
   </control-wrapper>
 </template>
 
@@ -33,30 +32,36 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isOneOfEnumControl
+  isOneOfEnumControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsOneOfEnumControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsOneOfEnumControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'enum-oneof-control-renderer',
+  name: 'EnumOneofControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsOneOfEnumControl(props), target => target.selectedIndex === 0 ? undefined : target.value );
-  }
+    return useVanillaControl(useJsonFormsOneOfEnumControl(props), (target) =>
+      target.selectedIndex === 0 ? undefined : target.value
+    );
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, isOneOfEnumControl)
+  tester: rankWith(2, isOneOfEnumControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/IntegerControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/IntegerControlRenderer.vue
index 8f72afb5c..0e0654c5d 100644
--- a/packages/vue/vue-vanilla/src/controls/IntegerControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/IntegerControlRenderer.vue
@@ -2,13 +2,13 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <input
+      :id="control.id + '-input'"
       type="number"
       :step="1"
-      :id="control.id + '-input'"
       :class="styles.control.input"
       :value="control.data"
       :disabled="!control.enabled"
@@ -26,23 +26,29 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isIntegerControl
+  isIntegerControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'integer-control-renderer',
+  name: 'IntegerControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target => target.value === '' ? undefined : parseInt(target.value, 10));
+    return useVanillaControl(useJsonFormsControl(props), (target) =>
+      target.value === '' ? undefined : parseInt(target.value, 10)
+    );
   },
 });
 
@@ -50,6 +56,6 @@ export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(1, isIntegerControl)
+  tester: rankWith(1, isIntegerControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/MultiStringControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/MultiStringControlRenderer.vue
index 6d785e8dc..0d1b80e36 100644
--- a/packages/vue/vue-vanilla/src/controls/MultiStringControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/MultiStringControlRenderer.vue
@@ -2,8 +2,8 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <textarea
       :id="control.id + '-input'"
@@ -26,30 +26,37 @@ import {
   rankWith,
   isStringControl,
   isMultiLineControl,
-  and
+  and,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'multi-string-control-renderer',
+  name: 'MultiStringControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined);
-  }
+    return useVanillaControl(
+      useJsonFormsControl(props),
+      (target) => target.value || undefined
+    );
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, and(isStringControl, isMultiLineControl))
+  tester: rankWith(2, and(isStringControl, isMultiLineControl)),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/NumberControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/NumberControlRenderer.vue
index f98bdeefa..418dca983 100644
--- a/packages/vue/vue-vanilla/src/controls/NumberControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/NumberControlRenderer.vue
@@ -2,13 +2,13 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <input
+      :id="control.id + '-input'"
       type="number"
       :step="step"
-      :id="control.id + '-input'"
       :class="styles.control.input"
       :value="control.data"
       :disabled="!control.enabled"
@@ -26,23 +26,27 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isNumberControl
+  isNumberControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'number-control-renderer',
+  name: 'NumberControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target =>
+    return useVanillaControl(useJsonFormsControl(props), (target) =>
       target.value === '' ? undefined : Number(target.value)
     );
   },
@@ -50,14 +54,14 @@ const controlRenderer = defineComponent({
     step(): number {
       const options: any = this.appliedOptions;
       return options.step ?? 0.1;
-    }
-  }
+    },
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(1, isNumberControl)
+  tester: rankWith(1, isNumberControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/StringControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/StringControlRenderer.vue
index 02e59dd11..958126a33 100644
--- a/packages/vue/vue-vanilla/src/controls/StringControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/StringControlRenderer.vue
@@ -2,8 +2,8 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <input
       :id="control.id + '-input'"
@@ -24,30 +24,37 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isStringControl
+  isStringControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'string-control-renderer',
+  name: 'StringControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined);
-  }
+    return useVanillaControl(
+      useJsonFormsControl(props),
+      (target) => target.value || undefined
+    );
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(1, isStringControl)
+  tester: rankWith(1, isStringControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/TimeControlRenderer.vue b/packages/vue/vue-vanilla/src/controls/TimeControlRenderer.vue
index 2e2510083..edae10174 100644
--- a/packages/vue/vue-vanilla/src/controls/TimeControlRenderer.vue
+++ b/packages/vue/vue-vanilla/src/controls/TimeControlRenderer.vue
@@ -2,12 +2,12 @@
   <control-wrapper
     v-bind="controlWrapper"
     :styles="styles"
-    :isFocused="isFocused"
-    :appliedOptions="appliedOptions"
+    :is-focused="isFocused"
+    :applied-options="appliedOptions"
   >
     <input
-      type="time"
       :id="control.id + '-input'"
+      type="time"
       :class="styles.control.input"
       :value="control.data"
       :disabled="!control.enabled"
@@ -25,30 +25,37 @@ import {
   ControlElement,
   JsonFormsRendererRegistryEntry,
   rankWith,
-  isTimeControl
+  isTimeControl,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
-import { rendererProps, useJsonFormsControl, RendererProps } from '../../config/jsonforms';
+import {
+  rendererProps,
+  useJsonFormsControl,
+  RendererProps,
+} from '../../config/jsonforms';
 import { default as ControlWrapper } from './ControlWrapper.vue';
 import { useVanillaControl } from '../util';
 
 const controlRenderer = defineComponent({
-  name: 'time-control-renderer',
+  name: 'TimeControlRenderer',
   components: {
-    ControlWrapper
+    ControlWrapper,
   },
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props: RendererProps<ControlElement>) {
-    return useVanillaControl(useJsonFormsControl(props), target => target.value || undefined);
-  }
+    return useVanillaControl(
+      useJsonFormsControl(props),
+      (target) => target.value || undefined
+    );
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(2, isTimeControl)
+  tester: rankWith(2, isTimeControl),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/controls/index.ts b/packages/vue/vue-vanilla/src/controls/index.ts
index c229132f2..6bfaa073a 100644
--- a/packages/vue/vue-vanilla/src/controls/index.ts
+++ b/packages/vue/vue-vanilla/src/controls/index.ts
@@ -4,12 +4,11 @@ export { default as MultiStringControlRenderer } from './MultiStringControlRende
 export { default as NumberControlRenderer } from './NumberControlRenderer.vue';
 export { default as IntegerControlRenderer } from './IntegerControlRenderer.vue';
 export { default as EnumControlRenderer } from './EnumControlRenderer.vue';
-export { default as oneOfEnumControlRenderer} from './EnumOneOfControlRenderer.vue';
-export { default as DateControlRenderer} from './DateControlRenderer.vue';
-export { default as DateTimeControlRenderer} from './DateTimeControlRenderer.vue';
-export { default as TimeControlRenderer} from './TimeControlRenderer.vue';
-export { default as BooleanControlRenderer } from './BooleanControlRenderer.vue'
-
+export { default as oneOfEnumControlRenderer } from './EnumOneOfControlRenderer.vue';
+export { default as DateControlRenderer } from './DateControlRenderer.vue';
+export { default as DateTimeControlRenderer } from './DateTimeControlRenderer.vue';
+export { default as TimeControlRenderer } from './TimeControlRenderer.vue';
+export { default as BooleanControlRenderer } from './BooleanControlRenderer.vue';
 
 import { entry as stringControlRendererEntry } from './StringControlRenderer.vue';
 import { entry as multiStringControlRendererEntry } from './MultiStringControlRenderer.vue';
@@ -20,9 +19,7 @@ import { entry as oneOfEnumControlRendererEntry } from './EnumOneOfControlRender
 import { entry as dateControlRendererEntry } from './DateControlRenderer.vue';
 import { entry as dateTimeControlRendererEntry } from './DateTimeControlRenderer.vue';
 import { entry as timeControlRendererEntry } from './TimeControlRenderer.vue';
-import { entry as booleanControlRendererEntry} from './BooleanControlRenderer.vue';
-
-
+import { entry as booleanControlRendererEntry } from './BooleanControlRenderer.vue';
 
 export const controlRenderers = [
   stringControlRendererEntry,
@@ -34,5 +31,5 @@ export const controlRenderers = [
   dateControlRendererEntry,
   dateTimeControlRendererEntry,
   timeControlRendererEntry,
-  booleanControlRendererEntry
-]
+  booleanControlRendererEntry,
+];
diff --git a/packages/vue/vue-vanilla/src/index.ts b/packages/vue/vue-vanilla/src/index.ts
index c95c1c93e..90770dbcd 100644
--- a/packages/vue/vue-vanilla/src/index.ts
+++ b/packages/vue/vue-vanilla/src/index.ts
@@ -1,7 +1,7 @@
 export * from './array';
 export * from './controls';
 export * from './layouts';
-export * from './renderers'
+export * from './renderers';
 export * from './styles';
 export * from './util';
 export * from './label';
diff --git a/packages/vue/vue-vanilla/src/label/LabelRenderer.vue b/packages/vue/vue-vanilla/src/label/LabelRenderer.vue
index e83dab5bf..d9e836765 100644
--- a/packages/vue/vue-vanilla/src/label/LabelRenderer.vue
+++ b/packages/vue/vue-vanilla/src/label/LabelRenderer.vue
@@ -9,30 +9,30 @@ import {
   JsonFormsRendererRegistryEntry,
   LabelElement,
   rankWith,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
   rendererProps,
   RendererProps,
-  useJsonFormsLabel
+  useJsonFormsLabel,
 } from '../../config/jsonforms';
 import { useVanillaLabel } from '../util';
 
 const labelRenderer = defineComponent({
-  name: 'label-renderer',
+  name: 'LabelRenderer',
   props: {
-    ...rendererProps<LabelElement>()
+    ...rendererProps<LabelElement>(),
   },
   setup(props: RendererProps<LabelElement>) {
     return useVanillaLabel(useJsonFormsLabel(props));
-  }
+  },
 });
 
 export default labelRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: labelRenderer,
-  tester: rankWith(1, uiTypeIs('Label'))
+  tester: rankWith(1, uiTypeIs('Label')),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/label/index.ts b/packages/vue/vue-vanilla/src/label/index.ts
index fd3444d32..dc85818c9 100644
--- a/packages/vue/vue-vanilla/src/label/index.ts
+++ b/packages/vue/vue-vanilla/src/label/index.ts
@@ -2,6 +2,4 @@ export { default as LabelRenderer } from './LabelRenderer.vue';
 
 import { entry as labelRendererEntry } from './LabelRenderer.vue';
 
-export const labelRenderers = [
-  labelRendererEntry
-]
+export const labelRenderers = [labelRendererEntry];
diff --git a/packages/vue/vue-vanilla/src/layouts/GroupRenderer.vue b/packages/vue/vue-vanilla/src/layouts/GroupRenderer.vue
index 4c9da529a..24c03c131 100644
--- a/packages/vue/vue-vanilla/src/layouts/GroupRenderer.vue
+++ b/packages/vue/vue-vanilla/src/layouts/GroupRenderer.vue
@@ -27,34 +27,34 @@ import {
   rankWith,
   and,
   isLayout,
-  uiTypeIs
+  uiTypeIs,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
   DispatchRenderer,
   rendererProps,
   useJsonFormsLayout,
-  RendererProps
+  RendererProps,
 } from '../../config/jsonforms';
 import { useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
-  name: 'group-renderer',
+  name: 'GroupRenderer',
   components: {
-    DispatchRenderer
+    DispatchRenderer,
   },
   props: {
-    ...rendererProps<Layout>()
+    ...rendererProps<Layout>(),
   },
   setup(props: RendererProps<Layout>) {
     return useVanillaLayout(useJsonFormsLayout(props));
-  }
+  },
 });
 
 export default layoutRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: layoutRenderer,
-  tester: rankWith(2, and(isLayout, uiTypeIs('Group')))
+  tester: rankWith(2, and(isLayout, uiTypeIs('Group'))),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/layouts/LayoutRenderer.vue b/packages/vue/vue-vanilla/src/layouts/LayoutRenderer.vue
index 28a9538f0..b3a30f5be 100644
--- a/packages/vue/vue-vanilla/src/layouts/LayoutRenderer.vue
+++ b/packages/vue/vue-vanilla/src/layouts/LayoutRenderer.vue
@@ -22,24 +22,24 @@ import {
   isLayout,
   JsonFormsRendererRegistryEntry,
   Layout,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
   DispatchRenderer,
   rendererProps,
   useJsonFormsLayout,
-  RendererProps
+  RendererProps,
 } from '../../config/jsonforms';
 import { useVanillaLayout } from '../util';
 
 const layoutRenderer = defineComponent({
-  name: 'layout-renderer',
+  name: 'LayoutRenderer',
   components: {
-    DispatchRenderer
+    DispatchRenderer,
   },
   props: {
-    ...rendererProps<Layout>()
+    ...rendererProps<Layout>(),
   },
   setup(props: RendererProps<Layout>) {
     return useVanillaLayout(useJsonFormsLayout(props));
@@ -49,14 +49,14 @@ const layoutRenderer = defineComponent({
       return this.layout.direction === 'row'
         ? this.styles.horizontalLayout
         : this.styles.verticalLayout;
-    }
-  }
+    },
+  },
 });
 
 export default layoutRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: layoutRenderer,
-  tester: rankWith(1, isLayout)
+  tester: rankWith(1, isLayout),
 };
 </script>
diff --git a/packages/vue/vue-vanilla/src/layouts/index.ts b/packages/vue/vue-vanilla/src/layouts/index.ts
index a0763d3f4..f85b8e7c4 100644
--- a/packages/vue/vue-vanilla/src/layouts/index.ts
+++ b/packages/vue/vue-vanilla/src/layouts/index.ts
@@ -2,9 +2,6 @@ export { default as LayoutRenderer } from './LayoutRenderer.vue';
 export { default as GroupRenderer } from './GroupRenderer.vue';
 
 import { entry as layoutRendererEntry } from './LayoutRenderer.vue';
-import { entry as groupRendererEntry} from './GroupRenderer.vue';
+import { entry as groupRendererEntry } from './GroupRenderer.vue';
 
-export const layoutRenderers = [
-  layoutRendererEntry,
-  groupRendererEntry
-]
+export const layoutRenderers = [layoutRendererEntry, groupRendererEntry];
diff --git a/packages/vue/vue-vanilla/src/renderers.ts b/packages/vue/vue-vanilla/src/renderers.ts
index 8aa9710bc..18465cc74 100644
--- a/packages/vue/vue-vanilla/src/renderers.ts
+++ b/packages/vue/vue-vanilla/src/renderers.ts
@@ -7,5 +7,5 @@ export const vanillaRenderers = [
   ...controlRenderers,
   ...layoutRenderers,
   ...arrayRenderers,
-  ...labelRenderers
+  ...labelRenderers,
 ];
diff --git a/packages/vue/vue-vanilla/src/styles/defaultStyles.ts b/packages/vue/vue-vanilla/src/styles/defaultStyles.ts
index dee01ad3e..f7515d2e3 100644
--- a/packages/vue/vue-vanilla/src/styles/defaultStyles.ts
+++ b/packages/vue/vue-vanilla/src/styles/defaultStyles.ts
@@ -1,4 +1,4 @@
-import { Styles } from "./styles";
+import { Styles } from './styles';
 
 export const defaultStyles: Styles = {
   control: {
@@ -10,20 +10,20 @@ export const defaultStyles: Styles = {
     error: 'error',
     textarea: 'text-area',
     select: 'select',
-    option: 'option'
+    option: 'option',
   },
   verticalLayout: {
     root: 'vertical-layout',
-    item: 'vertical-layout-item'
+    item: 'vertical-layout-item',
   },
   horizontalLayout: {
     root: 'horizontal-layout',
-    item: 'horizontal-layout-item'
+    item: 'horizontal-layout-item',
   },
   group: {
     root: 'group',
     label: 'group-label',
-    item: 'group-item'
+    item: 'group-item',
   },
   arrayList: {
     root: 'array-list',
@@ -39,9 +39,9 @@ export const defaultStyles: Styles = {
     itemExpanded: 'expanded',
     itemMoveUp: 'array-list-item-move-up',
     itemMoveDown: 'array-list-item-move-down',
-    itemDelete: 'array-list-item-delete'
+    itemDelete: 'array-list-item-delete',
   },
   label: {
-    root: 'label-element'
-  }
+    root: 'label-element',
+  },
 };
diff --git a/packages/vue/vue-vanilla/src/styles/styles.ts b/packages/vue/vue-vanilla/src/styles/styles.ts
index 0e6458265..292f43d21 100644
--- a/packages/vue/vue-vanilla/src/styles/styles.ts
+++ b/packages/vue/vue-vanilla/src/styles/styles.ts
@@ -9,7 +9,7 @@ const createEmptyStyles = (): Styles => ({
   horizontalLayout: {},
   group: {},
   arrayList: {},
-  label: {}
+  label: {},
 });
 
 export interface Styles {
diff --git a/packages/vue/vue-vanilla/src/styles/util.ts b/packages/vue/vue-vanilla/src/styles/util.ts
index d02005f5c..9e3c1a947 100644
--- a/packages/vue/vue-vanilla/src/styles/util.ts
+++ b/packages/vue/vue-vanilla/src/styles/util.ts
@@ -12,13 +12,16 @@ export const classes = (strings: TemplateStringsArray, ...variables: any[]) => {
 
 /**
  * Helper function to merge two styles definitions. The contained classes will be combined, not overwritten.
- * 
+ *
  * Example usage:
  * ```ts
  * const myStyles = mergeStyles(defaultStyles, { control: { root: 'mycontrol' } });
  * ```
  */
-export const mergeStyles = (stylesA: Partial<Styles>, stylesB: Partial<Styles>): Partial<Styles> => {
+export const mergeStyles = (
+  stylesA: Partial<Styles>,
+  stylesB: Partial<Styles>
+): Partial<Styles> => {
   const styles = cloneDeep(stylesA);
   mergeWith(styles, stylesB, (aValue, bValue) => {
     if (typeof aValue === 'string' && typeof bValue === 'string') {
diff --git a/packages/vue/vue-vanilla/src/util/composition.ts b/packages/vue/vue-vanilla/src/util/composition.ts
index cfb4111f1..e630175da 100644
--- a/packages/vue/vue-vanilla/src/util/composition.ts
+++ b/packages/vue/vue-vanilla/src/util/composition.ts
@@ -6,7 +6,7 @@ import {
   composePaths,
   findUISchema,
   getFirstPrimitiveProp,
-  Resolve
+  Resolve,
 } from '@jsonforms/core';
 
 /**
@@ -16,7 +16,7 @@ export const useVanillaControl = <
   I extends { control: any; handleChange: any }
 >(
   input: I,
-  adaptTarget: (target: any) => any = v => v.value
+  adaptTarget: (target: any) => any = (v) => v.value
 ) => {
   const appliedOptions = computed(() =>
     merge(
@@ -32,14 +32,8 @@ export const useVanillaControl = <
   };
 
   const controlWrapper = computed(() => {
-    const {
-      id,
-      description,
-      errors,
-      label,
-      visible,
-      required
-    } = input.control.value;
+    const { id, description, errors, label, visible, required } =
+      input.control.value;
     return { id, description, errors, label, visible, required };
   });
 
@@ -49,7 +43,7 @@ export const useVanillaControl = <
     isFocused,
     appliedOptions,
     controlWrapper,
-    onChange
+    onChange,
   };
 };
 
@@ -67,7 +61,7 @@ export const useVanillaLayout = <I extends { layout: any }>(input: I) => {
   return {
     ...input,
     styles: useStyles(input.layout.value.uischema),
-    appliedOptions
+    appliedOptions,
   };
 };
 
@@ -85,7 +79,7 @@ export const useVanillaLabel = <I extends { label: any }>(input: I) => {
   return {
     ...input,
     styles: useStyles(input.label.value.uischema),
-    appliedOptions
+    appliedOptions,
   };
 };
 
@@ -136,6 +130,6 @@ export const useVanillaArrayControl = <I extends { control: any }>(
     styles: useStyles(input.control.value.uischema),
     appliedOptions,
     childUiSchema,
-    childLabelForIndex
+    childLabelForIndex,
   };
 };
diff --git a/packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts
index 25aa1c82e..cfccf04fe 100644
--- a/packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/array/ArrayListRenderer.spec.ts
@@ -5,12 +5,12 @@ const schema = {
   type: 'array',
   title: 'My Array',
   items: {
-    type: 'string'
-  }
+    type: 'string',
+  },
 };
 const uischema = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 describe('ArrayListRenderer.vue', () => {
@@ -61,8 +61,8 @@ describe('ArrayListRenderer.vue', () => {
   it('all buttons have type button', async () => {
     const wrapper = mountJsonForms(['a'], schema, uischema);
     const buttons = wrapper.findAll('button');
-    for (let button of buttons) {
-      let type = button.attributes('type');
+    for (const button of buttons) {
+      const type = button.attributes('type');
       expect(type).to.equal('button');
     }
   });
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/BooleanControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/BooleanControlRenderer.spec.ts
index adc5ad5e0..b50a50d72 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/BooleanControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/BooleanControlRenderer.spec.ts
@@ -3,14 +3,14 @@ import { mountJsonForms } from '../util';
 
 const schema = {
   type: 'boolean',
-  title: 'My Boolean'
+  title: 'My Boolean',
 };
 const uischema = {
   type: 'Control',
   scope: '#',
   options: {
-    placeholder: 'boolean placeholder'
-  }
+    placeholder: 'boolean placeholder',
+  },
 };
 
 describe('BooleanControlRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/DateControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/DateControlRenderer.spec.ts
index 2de0dcf09..43a70c8aa 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/DateControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/DateControlRenderer.spec.ts
@@ -4,14 +4,14 @@ import { mountJsonForms } from '../util';
 const schema = {
   type: 'string',
   title: 'My Date',
-  format: 'date'
+  format: 'date',
 };
 const uischema = {
   type: 'Control',
   scope: '#',
   options: {
-    placeholder: 'date placeholder'
-  }
+    placeholder: 'date placeholder',
+  },
 };
 
 describe('DateControlRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/DateTimeControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/DateTimeControlRenderer.spec.ts
index 361f1e268..0d3fc59c8 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/DateTimeControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/DateTimeControlRenderer.spec.ts
@@ -4,29 +4,41 @@ import { mountJsonForms } from '../util';
 const schema = {
   type: 'string',
   title: 'My Date Time',
-  format: 'date-time'
+  format: 'date-time',
 };
 const uischema = {
   type: 'Control',
   scope: '#',
   options: {
-    placeholder: 'date-time placeholder'
-  }
+    placeholder: 'date-time placeholder',
+  },
 };
 
 describe('DateTimeControlRenderer.vue', () => {
   it('renders a date time input', () => {
-    const wrapper = mountJsonForms('2021-03-09T21:54:00.000Z', schema, uischema);
+    const wrapper = mountJsonForms(
+      '2021-03-09T21:54:00.000Z',
+      schema,
+      uischema
+    );
     expect(wrapper.find('input[type="datetime-local"]').exists()).to.be.true;
   });
 
   it('renders title as label', () => {
-    const wrapper = mountJsonForms('2021-03-09T21:54:00.000Z', schema, uischema);
+    const wrapper = mountJsonForms(
+      '2021-03-09T21:54:00.000Z',
+      schema,
+      uischema
+    );
     expect(wrapper.find('label').text()).to.equal('My Date Time');
   });
 
   it('emits a data change', async () => {
-    const wrapper = mountJsonForms('2021-03-09T21:54:00.000Z', schema, uischema);
+    const wrapper = mountJsonForms(
+      '2021-03-09T21:54:00.000Z',
+      schema,
+      uischema
+    );
     const input = wrapper.find('input');
     await input.setValue('2021-03-10T21:10');
     await input.trigger('blur');
@@ -34,7 +46,11 @@ describe('DateTimeControlRenderer.vue', () => {
   });
 
   it('should have a placeholder', async () => {
-    const wrapper = mountJsonForms('2021-03-09T21:54:00.000Z', schema, uischema);
+    const wrapper = mountJsonForms(
+      '2021-03-09T21:54:00.000Z',
+      schema,
+      uischema
+    );
     const input = wrapper.find('input');
     const placeholder = input.attributes('placeholder');
     expect(placeholder).to.equal('date-time placeholder');
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts
index 6e7e2ce18..58cb1c0e6 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/EnumControlRenderer.spec.ts
@@ -4,11 +4,11 @@ import { mountJsonForms } from '../util';
 const schema = {
   type: 'string',
   title: 'My Enum',
-  enum: ['a', 'b']
+  enum: ['a', 'b'],
 };
 const uischema = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 describe('EnumControlRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts
index d3b2b7c54..371b55458 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/EnumOneOfControlRenderer.spec.ts
@@ -5,12 +5,13 @@ const schema = {
   type: 'string',
   title: 'My OneOf Enum',
   oneOf: [
-    { const: 'a', title: 'Foo'}, { const: 'b', title: 'Bar'}
-  ]
+    { const: 'a', title: 'Foo' },
+    { const: 'b', title: 'Bar' },
+  ],
 };
 const uischema = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 describe('EnumOneOfControlRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/IntegerControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/IntegerControlRenderer.spec.ts
index b11cd7c28..23128196f 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/IntegerControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/IntegerControlRenderer.spec.ts
@@ -3,11 +3,11 @@ import { mountJsonForms } from '../util';
 
 const schema = {
   type: 'integer',
-  title: 'My Integer'
+  title: 'My Integer',
 };
 const uischema = {
   type: 'Control',
-  scope: '#'
+  scope: '#',
 };
 
 describe('IntegerControlRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/MultiStringControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/MultiStringControlRenderer.spec.ts
index 7f93b0dea..6f5edc7fe 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/MultiStringControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/MultiStringControlRenderer.spec.ts
@@ -3,14 +3,14 @@ import { mountJsonForms } from '../util';
 
 const schema = {
   type: 'string',
-  title: 'My Multi String'
+  title: 'My Multi String',
 };
 const uischema = {
   type: 'Control',
   scope: '#',
   options: {
-    multi: true
-  }
+    multi: true,
+  },
 };
 
 describe('MultiStringControlRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/NumberControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/NumberControlRenderer.spec.ts
index 01fbc1851..346d44ba6 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/NumberControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/NumberControlRenderer.spec.ts
@@ -3,14 +3,14 @@ import { mountJsonForms } from '../util';
 
 const schema = {
   type: 'number',
-  title: 'My Number'
+  title: 'My Number',
 };
 const uischema = {
   type: 'Control',
   scope: '#',
   options: {
-    placeholder: 'number placeholder'
-  }
+    placeholder: 'number placeholder',
+  },
 };
 
 describe('NumberControlRenderer.vue', () => {
@@ -30,7 +30,7 @@ describe('NumberControlRenderer.vue', () => {
     await input.setValue(2);
     expect(wrapper.vm.data).to.equal(2);
   });
-  
+
   it('should have a placeholder', async () => {
     const wrapper = mountJsonForms(1, schema, uischema);
     const input = wrapper.find('input');
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/StringControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/StringControlRenderer.spec.ts
index 65a75f563..ec0a87291 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/StringControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/StringControlRenderer.spec.ts
@@ -3,14 +3,14 @@ import { mountJsonForms } from '../util';
 
 const schema = {
   type: 'string',
-  title: 'My String'
+  title: 'My String',
 };
 const uischema = {
   type: 'Control',
   scope: '#',
   options: {
-    placeholder: 'string placeholder'
-  }
+    placeholder: 'string placeholder',
+  },
 };
 
 describe('StringControlRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/controls/TimeControlRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/controls/TimeControlRenderer.spec.ts
index ce8211e06..d09937244 100644
--- a/packages/vue/vue-vanilla/tests/unit/controls/TimeControlRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/controls/TimeControlRenderer.spec.ts
@@ -4,14 +4,14 @@ import { mountJsonForms } from '../util';
 const schema = {
   type: 'string',
   title: 'My Time',
-  format: 'time'
+  format: 'time',
 };
 const uischema = {
   type: 'Control',
   scope: '#',
   options: {
-    placeholder: 'time placeholder'
-  }
+    placeholder: 'time placeholder',
+  },
 };
 
 describe('TimeControlRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/form/JsonForms.spec.ts b/packages/vue/vue-vanilla/tests/unit/form/JsonForms.spec.ts
index 4bc1df19e..9c4f7d73d 100644
--- a/packages/vue/vue-vanilla/tests/unit/form/JsonForms.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/form/JsonForms.spec.ts
@@ -2,7 +2,7 @@ import { expect } from 'chai';
 import { mountJsonForms } from '../util';
 
 const schema = {
-  type: 'string'
+  type: 'string',
 };
 const uischema = {
   type: 'HorizontalLayout',
@@ -12,28 +12,28 @@ const uischema = {
       elements: [
         {
           type: 'Control',
-          scope: '#'
+          scope: '#',
         },
         {
           type: 'Control',
-          scope: '#'
-        }
-      ]
+          scope: '#',
+        },
+      ],
     },
     {
       type: 'VerticalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#'
+          scope: '#',
         },
         {
           type: 'Control',
-          scope: '#'
-        }
-      ]
-    }
-  ]
+          scope: '#',
+        },
+      ],
+    },
+  ],
 };
 const reducedUiSchema = {
   type: 'HorizontalLayout',
@@ -43,15 +43,15 @@ const reducedUiSchema = {
       elements: [
         {
           type: 'Control',
-          scope: '#'
+          scope: '#',
         },
         {
           type: 'Control',
-          scope: '#'
-        }
-      ]
-    }
-  ]
+          scope: '#',
+        },
+      ],
+    },
+  ],
 };
 
 describe('JsonForms.vue', () => {
@@ -63,7 +63,7 @@ describe('JsonForms.vue', () => {
   it('reacts to uischema changes', async () => {
     const wrapper = mountJsonForms('', schema, uischema);
     await wrapper.setProps({
-      uischema: reducedUiSchema
+      uischema: reducedUiSchema,
     });
     expect(wrapper.findAll('input').length).to.equal(2);
   });
diff --git a/packages/vue/vue-vanilla/tests/unit/label/LabelRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/label/LabelRenderer.spec.ts
index 96341e42c..cf8733209 100644
--- a/packages/vue/vue-vanilla/tests/unit/label/LabelRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/label/LabelRenderer.spec.ts
@@ -6,7 +6,7 @@ const schema = {
 };
 const uischema = {
   type: 'Label',
-  text: 'My Label'
+  text: 'My Label',
 };
 
 describe('LabelRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/layouts/GroupRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/layouts/GroupRenderer.spec.ts
index cecd8c64f..111f3d588 100644
--- a/packages/vue/vue-vanilla/tests/unit/layouts/GroupRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/layouts/GroupRenderer.spec.ts
@@ -10,13 +10,13 @@ const uischema = {
   elements: [
     {
       type: 'Control',
-      scope: '#'
+      scope: '#',
     },
     {
       type: 'Control',
-      scope: '#'
-    }
-  ]
+      scope: '#',
+    },
+  ],
 };
 
 describe('GroupRenderer.vue', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/layouts/LayoutRenderer.spec.ts b/packages/vue/vue-vanilla/tests/unit/layouts/LayoutRenderer.spec.ts
index b233268a0..4274fed79 100644
--- a/packages/vue/vue-vanilla/tests/unit/layouts/LayoutRenderer.spec.ts
+++ b/packages/vue/vue-vanilla/tests/unit/layouts/LayoutRenderer.spec.ts
@@ -9,18 +9,18 @@ const vertical = {
   elements: [
     {
       type: 'Control',
-      scope: '#'
+      scope: '#',
     },
     {
       type: 'Control',
-      scope: '#'
-    }
-  ]
+      scope: '#',
+    },
+  ],
 };
 const horizontal = {
   ...vertical,
-  type: "HorizontalLayout"
-}
+  type: 'HorizontalLayout',
+};
 
 describe('LayoutRenderer.vue', () => {
   it('renders a vertical container div', () => {
diff --git a/packages/vue/vue-vanilla/tests/unit/util/TestComponent.vue b/packages/vue/vue-vanilla/tests/unit/util/TestComponent.vue
index 0a6003a99..227379e3d 100644
--- a/packages/vue/vue-vanilla/tests/unit/util/TestComponent.vue
+++ b/packages/vue/vue-vanilla/tests/unit/util/TestComponent.vue
@@ -5,22 +5,22 @@ import { vanillaRenderers } from '../../../src';
 import { JsonFormsChangeEvent } from '@jsonforms/vue';
 
 export default defineComponent({
-  name: 'test-component',
+  name: 'TestComponent',
   components: {
-    JsonForms
+    JsonForms,
   },
   props: ['initialData', 'schema', 'uischema', 'config'],
   data() {
     return {
       renderers: Object.freeze(vanillaRenderers),
-      data: this.initialData
+      data: this.initialData,
     };
   },
   methods: {
-    onChange(event: JsonFormsChangeEvent){
+    onChange(event: JsonFormsChangeEvent) {
       this.data = event.data;
-    }
-  }
+    },
+  },
 });
 </script>
 
diff --git a/packages/vue/vue-vanilla/tests/unit/util/util.ts b/packages/vue/vue-vanilla/tests/unit/util/util.ts
index bd66f0cc7..e1174bf8d 100644
--- a/packages/vue/vue-vanilla/tests/unit/util/util.ts
+++ b/packages/vue/vue-vanilla/tests/unit/util/util.ts
@@ -8,6 +8,6 @@ export const mountJsonForms = (
   config?: any
 ) => {
   return mount(TestComponent, {
-    props: { initialData: data, schema, uischema, config }
+    props: { initialData: data, schema, uischema, config },
   });
 };
diff --git a/packages/vue/vue/dev/components/App.vue b/packages/vue/vue/dev/components/App.vue
index 9ce43af56..8903aff76 100644
--- a/packages/vue/vue/dev/components/App.vue
+++ b/packages/vue/vue/dev/components/App.vue
@@ -1,26 +1,26 @@
 <script lang="ts">
-import { defineComponent } from "../../config";
+import { defineComponent } from '../../config';
 import { JsonForms, JsonFormsChangeEvent } from '../../src';
 import { vueRenderers } from '../renderers';
 
 export default defineComponent({
-  name: 'app',
+  name: 'App',
   components: {
-    JsonForms
+    JsonForms,
   },
-  data: function() {
+  data: function () {
     return {
       renderers: Object.freeze(vueRenderers),
       data: {
-        number: 5
+        number: 5,
       },
       schema: {
         properties: {
           number: {
-            type: 'number'
-          }
-        }
-      } as any
+            type: 'number',
+          },
+        },
+      } as any,
     };
   },
   methods: {
@@ -28,25 +28,25 @@ export default defineComponent({
       this.schema = {
         properties: {
           name: {
-            type: 'string'
-          }
-        }
+            type: 'string',
+          },
+        },
       };
     },
     onChange(event: JsonFormsChangeEvent) {
       console.log(event);
       this.data = event.data;
-    }
-  }
+    },
+  },
 });
 </script>
 
 <template>
   <div id="app">
     <json-forms
-      v-bind:data="data"
-      v-bind:schema="schema"
-      v-bind:renderers="renderers"
+      :data="data"
+      :schema="schema"
+      :renderers="renderers"
       @change="onChange"
     />
     <button @click="setSchema">Set Schema</button>
diff --git a/packages/vue/vue/dev/renderers/ControlRenderer.vue b/packages/vue/vue/dev/renderers/ControlRenderer.vue
index 8a15cbdb6..50c39563c 100644
--- a/packages/vue/vue/dev/renderers/ControlRenderer.vue
+++ b/packages/vue/vue/dev/renderers/ControlRenderer.vue
@@ -17,34 +17,25 @@
       Computed Props:
       <pre>{{ JSON.stringify(control, null, 2) }}</pre>
     </div>
-    <input v-bind:value="control.data" @change="onChange" />
-    <div class="error" v-if="control.errors">{{ control.errors }}</div>
+    <input :value="control.data" @change="onChange" />
+    <div v-if="control.errors" class="error">{{ control.errors }}</div>
   </div>
 </template>
 
-<style scoped>
-.error {
-  color: red;
-}
-pre {
-  background-color: lightgray;
-}
-</style>
-
 <script lang="ts">
 import {
   ControlElement,
   isControl,
   JsonFormsRendererRegistryEntry,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import { rendererProps, useJsonFormsControl } from '../../src/';
 
 const controlRenderer = defineComponent({
-  name: 'control-renderer',
+  name: 'ControlRenderer',
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props) {
     return useJsonFormsControl(props);
@@ -55,14 +46,23 @@ const controlRenderer = defineComponent({
         this.control.path,
         (event.target as HTMLInputElement).value
       );
-    }
-  }
+    },
+  },
 });
 
 export default controlRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(1, isControl)
+  tester: rankWith(1, isControl),
 };
 </script>
+
+<style scoped>
+.error {
+  color: red;
+}
+pre {
+  background-color: lightgray;
+}
+</style>
diff --git a/packages/vue/vue/dev/renderers/LayoutRenderer.vue b/packages/vue/vue/dev/renderers/LayoutRenderer.vue
index b8c1b9ac2..ee716d1e4 100644
--- a/packages/vue/vue/dev/renderers/LayoutRenderer.vue
+++ b/packages/vue/vue/dev/renderers/LayoutRenderer.vue
@@ -20,54 +20,54 @@
     <div>Children:</div>
     <div
       v-for="(element, index) in layout.uischema.elements"
-      v-bind:key="`${layout.path}-${index}`"
+      :key="`${layout.path}-${index}`"
     >
       <dispatch-renderer
-        v-bind:schema="layout.schema"
-        v-bind:uischema="element"
-        v-bind:path="layout.path"
+        :schema="layout.schema"
+        :uischema="element"
+        :path="layout.path"
       />
     </div>
   </div>
 </template>
 
-<style scoped>
-pre {
-  background-color: lightgray;
-}
-</style>
-
 <script lang="ts">
 import {
   isLayout,
   JsonFormsRendererRegistryEntry,
   Layout,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
-import { defineComponent } from "../../config";
+import { defineComponent } from '../../config';
 import {
   DispatchRenderer,
   rendererProps,
-  useJsonFormsLayout
+  useJsonFormsLayout,
 } from '../../src/';
 
 const layoutRenderer = defineComponent({
-  name: 'layout-renderer',
+  name: 'LayoutRenderer',
   components: {
-    DispatchRenderer
+    DispatchRenderer,
   },
   props: {
-    ...rendererProps<Layout>()
+    ...rendererProps<Layout>(),
   },
   setup(props) {
     return useJsonFormsLayout(props);
-  }
+  },
 });
 
 export default layoutRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: layoutRenderer,
-  tester: rankWith(1, isLayout)
+  tester: rankWith(1, isLayout),
 };
 </script>
+
+<style scoped>
+pre {
+  background-color: lightgray;
+}
+</style>
diff --git a/packages/vue/vue/dev/renderers/index.ts b/packages/vue/vue/dev/renderers/index.ts
index 90ba0c1e5..647024813 100644
--- a/packages/vue/vue/dev/renderers/index.ts
+++ b/packages/vue/vue/dev/renderers/index.ts
@@ -1,7 +1,4 @@
 import { entry as layoutRendererEntry } from './LayoutRenderer.vue';
 import { entry as controlRendererEntry } from './ControlRenderer.vue';
 
-export const vueRenderers = [
-  layoutRendererEntry,
-  controlRendererEntry
-]
+export const vueRenderers = [layoutRendererEntry, controlRendererEntry];
diff --git a/packages/vue/vue/src/components/DispatchCell.vue b/packages/vue/vue/src/components/DispatchCell.vue
index ac5b9e140..95786e3ed 100644
--- a/packages/vue/vue/src/components/DispatchCell.vue
+++ b/packages/vue/vue/src/components/DispatchCell.vue
@@ -1,5 +1,5 @@
 <template>
-  <component v-bind:is="determinedCell" v-bind="cell"></component>
+  <component :is="determinedCell" v-bind="cell"></component>
 </template>
 
 <script lang="ts">
@@ -8,22 +8,25 @@ import UnknownRenderer from './UnknownRenderer.vue';
 import maxBy from 'lodash/maxBy';
 import {
   rendererProps,
-  useJsonFormsDispatchCell
+  useJsonFormsDispatchCell,
 } from '../jsonFormsCompositions';
 import { ControlElement } from '@jsonforms/core';
 
 export default defineComponent({
-  name: 'dispatch-cell',
+  name: 'DispatchCell',
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props) {
     return useJsonFormsDispatchCell(props);
   },
   computed: {
     determinedCell(): any {
-      const testerContext = { rootSchema: this.cell.rootSchema, config: this.config };
-      const cell = maxBy(this.cell.cells, r =>
+      const testerContext = {
+        rootSchema: this.cell.rootSchema,
+        config: this.config,
+      };
+      const cell = maxBy(this.cell.cells, (r) =>
         r.tester(this.cell.uischema, this.cell.schema, testerContext)
       );
       if (
@@ -34,7 +37,7 @@ export default defineComponent({
       } else {
         return cell.cell;
       }
-    }
-  }
+    },
+  },
 });
 </script>
diff --git a/packages/vue/vue/src/components/DispatchRenderer.vue b/packages/vue/vue/src/components/DispatchRenderer.vue
index 62d8d7e03..86433c7f4 100644
--- a/packages/vue/vue/src/components/DispatchRenderer.vue
+++ b/packages/vue/vue/src/components/DispatchRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <component v-bind:is="determinedRenderer" v-bind="renderer"></component>
+  <component :is="determinedRenderer" v-bind="renderer"></component>
 </template>
 
 <script lang="ts">
@@ -9,28 +9,35 @@ import maxBy from 'lodash/maxBy';
 import { rendererProps, useJsonFormsRenderer } from '../jsonFormsCompositions';
 
 export default defineComponent({
-  name: 'dispatch-renderer',
+  name: 'DispatchRenderer',
   props: {
-    ...rendererProps()
+    ...rendererProps(),
   },
   setup(props) {
     return useJsonFormsRenderer(props);
   },
   computed: {
     determinedRenderer(): any {
-      const testerContext = { rootSchema: this.rootSchema, config: this.config };
-      const renderer = maxBy(this.renderer.renderers, r =>
+      const testerContext = {
+        rootSchema: this.rootSchema,
+        config: this.config,
+      };
+      const renderer = maxBy(this.renderer.renderers, (r) =>
         r.tester(this.renderer.uischema, this.renderer.schema, testerContext)
       );
       if (
         renderer === undefined ||
-        renderer.tester(this.renderer.uischema, this.renderer.schema, testerContext) === -1
+        renderer.tester(
+          this.renderer.uischema,
+          this.renderer.schema,
+          testerContext
+        ) === -1
       ) {
         return UnknownRenderer;
       } else {
         return renderer.renderer;
       }
-    }
-  }
+    },
+  },
 });
 </script>
diff --git a/packages/vue/vue/src/components/JsonForms.vue b/packages/vue/vue/src/components/JsonForms.vue
index 555351adc..9f8c60d20 100644
--- a/packages/vue/vue/src/components/JsonForms.vue
+++ b/packages/vue/vue/src/components/JsonForms.vue
@@ -1,14 +1,13 @@
 <template>
   <dispatch-renderer
-    v-bind:schema="jsonforms.core.schema"
-    v-bind:uischema="jsonforms.core.uischema"
-    v-bind:path="''"
+    :schema="jsonforms.core.schema"
+    :uischema="jsonforms.core.uischema"
+    :path="''"
   />
 </template>
 
 <script lang="ts">
-import { PropType, reactive } from 'vue';
-import { defineComponent } from 'vue';
+import { PropType, reactive, defineComponent } from 'vue';
 import {
   coreReducer,
   Actions,
@@ -23,7 +22,7 @@ import {
   JsonFormsCellRendererRegistryEntry,
   CoreActions,
   i18nReducer,
-  JsonFormsI18nState
+  JsonFormsI18nState,
 } from '@jsonforms/core';
 import { JsonFormsChangeEvent, MaybeReadonly } from '../types';
 import DispatchRenderer from './DispatchRenderer.vue';
@@ -37,71 +36,79 @@ const isObject = (elem: any): elem is Object => {
 const EMPTY: ErrorObject[] = reactive([]);
 
 export default defineComponent({
-  name: 'json-forms',
+  name: 'JsonForms',
   components: {
-    DispatchRenderer
+    DispatchRenderer,
+  },
+  provide() {
+    return {
+      jsonforms: this.jsonforms,
+      dispatch: this.dispatch,
+    };
   },
-  emits: ['change'],
   props: {
     data: {
       required: true,
-      type: [String, Number, Boolean, Array, Object] as PropType<any>
+      type: [String, Number, Boolean, Array, Object] as PropType<any>,
     },
     schema: {
       required: false,
       type: [Object, Boolean] as PropType<JsonSchema>,
-      default: undefined
+      default: undefined,
     },
     uischema: {
       required: false,
       type: Object as PropType<UISchemaElement>,
-      default: undefined
+      default: undefined,
     },
     renderers: {
       required: true,
-      type: Array as PropType<MaybeReadonly<JsonFormsRendererRegistryEntry[]>>
+      type: Array as PropType<MaybeReadonly<JsonFormsRendererRegistryEntry[]>>,
     },
     cells: {
       required: false,
-      type: Array as PropType<MaybeReadonly<JsonFormsCellRendererRegistryEntry[]>>,
-      default: () => []
+      type: Array as PropType<
+        MaybeReadonly<JsonFormsCellRendererRegistryEntry[]>
+      >,
+      default: () => [],
     },
     config: {
       required: false,
       type: Object as PropType<any>,
-      default: undefined
+      default: undefined,
     },
     readonly: {
       required: false,
       type: Boolean,
-      default: false
+      default: false,
     },
     uischemas: {
       required: false,
       type: Array as PropType<MaybeReadonly<JsonFormsUISchemaRegistryEntry[]>>,
-      default: () => []
+      default: () => [],
     },
     validationMode: {
       required: false,
       type: String as PropType<ValidationMode>,
-      default: 'ValidateAndShow'
+      default: 'ValidateAndShow',
     },
     ajv: {
       required: false,
       type: Object as PropType<Ajv>,
-      default: undefined
+      default: undefined,
     },
     i18n: {
       required: false,
       type: Object as PropType<JsonFormsI18nState>,
-      default: undefined
+      default: undefined,
     },
     additionalErrors: {
       required: false,
       type: Array as PropType<ErrorObject[]>,
-      default: () => EMPTY
+      default: () => EMPTY,
     },
   },
+  emits: ['change'],
   data() {
     const dataToUse = this.data;
     const generatorData = isObject(dataToUse) ? dataToUse : {};
@@ -111,14 +118,14 @@ export default defineComponent({
       const initialCore = {
         data: dataToUse,
         schema: schemaToUse,
-        uischema: uischemaToUse
+        uischema: uischemaToUse,
       };
       const core = coreReducer(
         initialCore,
         Actions.init(dataToUse, schemaToUse, uischemaToUse, {
           validationMode: this.validationMode,
           ajv: this.ajv,
-          additionalErrors: this.additionalErrors
+          additionalErrors: this.additionalErrors,
         })
       );
       return core;
@@ -130,14 +137,39 @@ export default defineComponent({
       jsonforms: {
         core: initCore(),
         config: configReducer(undefined, Actions.setConfig(this.config)),
-        i18n: i18nReducer(this.i18n, Actions.updateI18n(this.i18n?.locale, this.i18n?.translate, this.i18n?.translateError)),
+        i18n: i18nReducer(
+          this.i18n,
+          Actions.updateI18n(
+            this.i18n?.locale,
+            this.i18n?.translate,
+            this.i18n?.translateError
+          )
+        ),
         renderers: this.renderers,
         cells: this.cells,
         uischemas: this.uischemas,
-        readonly: this.readonly
-      }
+        readonly: this.readonly,
+      },
     };
   },
+  computed: {
+    coreDataToUpdate(): any {
+      return [
+        this.dataToUse,
+        this.schemaToUse,
+        this.uischemaToUse,
+        this.validationMode,
+        this.ajv,
+        this.additionalErrors,
+      ];
+    },
+    eventToEmit(): JsonFormsChangeEvent {
+      return {
+        data: this.jsonforms.core.data,
+        errors: this.jsonforms.core.errors,
+      };
+    },
+  },
   watch: {
     schema(newSchema) {
       const generatorData = isObject(this.data) ? this.data : {};
@@ -168,7 +200,7 @@ export default defineComponent({
           Actions.setConfig(newConfig)
         );
       },
-      deep: true
+      deep: true,
     },
     readonly(newReadonly) {
       this.jsonforms.readonly = newReadonly;
@@ -176,11 +208,16 @@ export default defineComponent({
     coreDataToUpdate() {
       this.jsonforms.core = coreReducer(
         this.jsonforms.core as JsonFormsCore,
-        Actions.updateCore(this.dataToUse, this.schemaToUse, this.uischemaToUse, {
-          validationMode: this.validationMode,
-          ajv: this.ajv,
-          additionalErrors: this.additionalErrors
-        })
+        Actions.updateCore(
+          this.dataToUse,
+          this.schemaToUse,
+          this.uischemaToUse,
+          {
+            validationMode: this.validationMode,
+            ajv: this.ajv,
+            additionalErrors: this.additionalErrors,
+          }
+        )
       );
     },
     eventToEmit(newEvent) {
@@ -190,47 +227,30 @@ export default defineComponent({
       handler(newI18n) {
         this.jsonforms.i18n = i18nReducer(
           this.jsonforms.i18n,
-          Actions.updateI18n(newI18n?.locale, newI18n?.translate, newI18n?.translateError)
+          Actions.updateI18n(
+            newI18n?.locale,
+            newI18n?.translate,
+            newI18n?.translateError
+          )
         );
       },
-      deep: true
-    }
-  },
-  computed: {
-    coreDataToUpdate(): any {
-      return [
-        this.dataToUse,
-        this.schemaToUse,
-        this.uischemaToUse,
-        this.validationMode,
-        this.ajv,
-        this.additionalErrors
-      ];
+      deep: true,
     },
-    eventToEmit(): JsonFormsChangeEvent {
-      return {
-        data: this.jsonforms.core.data,
-        errors: this.jsonforms.core.errors
-      };
-    }
   },
   mounted() {
     // emit an inital change so clients can react to error validation and default data insertion
     this.$emit('change', {
       data: this.jsonforms.core.data,
-      errors: this.jsonforms.core.errors
+      errors: this.jsonforms.core.errors,
     });
   },
   methods: {
     dispatch(action: CoreActions) {
-      this.jsonforms.core = coreReducer(this.jsonforms.core as JsonFormsCore, action);
-    }
+      this.jsonforms.core = coreReducer(
+        this.jsonforms.core as JsonFormsCore,
+        action
+      );
+    },
   },
-  provide() {
-    return {
-      jsonforms: this.jsonforms,
-      dispatch: this.dispatch
-    };
-  }
 });
 </script>
diff --git a/packages/vue/vue/src/components/UnknownRenderer.vue b/packages/vue/vue/src/components/UnknownRenderer.vue
index 476baa415..18c880180 100644
--- a/packages/vue/vue/src/components/UnknownRenderer.vue
+++ b/packages/vue/vue/src/components/UnknownRenderer.vue
@@ -6,6 +6,6 @@
 import { defineComponent } from 'vue';
 
 export default defineComponent({
-  name: 'unknown-renderer'
+  name: 'UnknownRenderer',
 });
 </script>
diff --git a/packages/vue/vue/src/components/index.ts b/packages/vue/vue/src/components/index.ts
index 0f864fa55..d31b0e01b 100644
--- a/packages/vue/vue/src/components/index.ts
+++ b/packages/vue/vue/src/components/index.ts
@@ -1,4 +1,4 @@
 export { default as DispatchRenderer } from './DispatchRenderer.vue';
 export { default as DispatchCell } from './DispatchCell.vue';
 export { default as JsonForms } from './JsonForms.vue';
-export { default as UnknownRenderer } from './UnknownRenderer.vue'
+export { default as UnknownRenderer } from './UnknownRenderer.vue';
diff --git a/packages/vue/vue/src/jsonFormsCompositions.ts b/packages/vue/vue/src/jsonFormsCompositions.ts
index 5daa05e89..3fb1aa266 100644
--- a/packages/vue/vue/src/jsonFormsCompositions.ts
+++ b/packages/vue/vue/src/jsonFormsCompositions.ts
@@ -34,7 +34,7 @@ import {
   mapStateToMultiEnumControlProps,
   mapDispatchToMultiEnumProps,
   mapStateToLabelProps,
-  LabelElement
+  LabelElement,
 } from '@jsonforms/core';
 import {
   PropType,
@@ -43,7 +43,7 @@ import {
   inject,
   onBeforeMount,
   onUnmounted,
-  ref
+  ref,
 } from 'vue';
 
 /**
@@ -57,41 +57,37 @@ import {
  */
 export const rendererProps = <U = UISchemaElement>() => ({
   schema: {
-    required: true as true,
-    type: [Object, Boolean] as PropType<
-      JsonSchema
-    >
+    required: true as const,
+    type: [Object, Boolean] as PropType<JsonSchema>,
   },
   uischema: {
-    required: true as true,
-    type: Object as PropType<U>
+    required: true as const,
+    type: Object as PropType<U>,
   },
   path: {
-    required: true as true,
-    type: String
+    required: true as const,
+    type: String,
   },
   enabled: {
-    required: false as false,
+    required: false as const,
     type: Boolean,
-    default: undefined
+    default: undefined,
   },
   renderers: {
     required: false,
     type: Array as PropType<JsonFormsRendererRegistryEntry[]>,
-    default: undefined
+    default: undefined,
   },
   cells: {
     required: false,
-    type: Array as PropType<
-      JsonFormsCellRendererRegistryEntry[]
-    >,
-    default: undefined
+    type: Array as PropType<JsonFormsCellRendererRegistryEntry[]>,
+    default: undefined,
   },
   config: {
     required: false,
     type: Object,
-    default: undefined
-  }
+    default: undefined,
+  },
 });
 
 /**
@@ -100,35 +96,31 @@ export const rendererProps = <U = UISchemaElement>() => ({
  */
 export const masterListItemProps = () => ({
   index: {
-    required: true as true,
-    type: Number
+    required: true as const,
+    type: Number,
   },
   selected: {
-    required: true as true,
-    type: Boolean
+    required: true as const,
+    type: Boolean,
   },
   path: {
-    required: true as true,
-    type: String
+    required: true as const,
+    type: String,
   },
   schema: {
-    required: true as true,
-    type: [Object, Boolean] as PropType<
-      JsonSchema
-    >
+    required: true as const,
+    type: [Object, Boolean] as PropType<JsonSchema>,
   },
   handleSelect: {
-    required: false as false,
+    required: false as const,
     type: Function as PropType<(index: number) => void>,
-    default: undefined
+    default: undefined,
   },
   removeItem: {
-    required: false as false,
-    type: Function as PropType<
-      (path: string, value: number) => void
-    >,
-    default: undefined
-  }
+    required: false as const,
+    type: Function as PropType<(path: string, value: number) => void>,
+    default: undefined,
+  },
 });
 
 export interface RendererProps<U = UISchemaElement> {
@@ -174,7 +166,7 @@ export function useControl<R, D, P extends {}>(
   const control = computed(() => ({
     ...props,
     ...stateMap({ jsonforms }, props),
-    id: id.value
+    id: id.value,
   }));
 
   const dispatchMethods = dispatchMap?.(dispatch);
@@ -193,8 +185,8 @@ export function useControl<R, D, P extends {}>(
   });
 
   return {
-    control: (control as unknown) as ComputedRef<R>,
-    ...dispatchMethods
+    control: control as unknown as ComputedRef<R>,
+    ...dispatchMethods,
   };
 }
 
@@ -304,7 +296,11 @@ export const useJsonFormsOneOfControl = (props: ControlProps) => {
  * Dispatch changes via the provided `handleChange` method.
  */
 export const useJsonFormsMultiEnumControl = (props: ControlProps) => {
-  return useControl(props, mapStateToMultiEnumControlProps, mapDispatchToMultiEnumProps);
+  return useControl(
+    props,
+    mapStateToMultiEnumControlProps,
+    mapDispatchToMultiEnumProps
+  );
 };
 
 export interface LayoutProps extends RendererProps {
@@ -372,13 +368,13 @@ export const useJsonFormsRenderer = (props: RendererProps) => {
 
   const rootSchema = computed(() => rawProps.value.rootSchema);
   const renderer = computed(() => {
-    const { rootSchema, ...rest} = rawProps.value;
+    const { rootSchema, ...rest } = rawProps.value;
     return rest;
   });
 
   return {
     renderer,
-    rootSchema
+    rootSchema,
   };
 };
 
@@ -433,9 +429,9 @@ export const useJsonFormsEnumCell = (props: ControlProps) => {
  */
 export const useJsonFormsOneOfEnumCell = (props: ControlProps) => {
   const { control, ...other } = useControl(
-      props,
-      mapStateToOneOfEnumCellProps,
-      mapDispatchToControlProps
+    props,
+    mapStateToOneOfEnumCellProps,
+    mapDispatchToControlProps
   );
   return { cell: control, ...other };
 };
diff --git a/packages/vue/vue/src/types.ts b/packages/vue/vue/src/types.ts
index 240eaed52..4ed76941b 100644
--- a/packages/vue/vue/src/types.ts
+++ b/packages/vue/vue/src/types.ts
@@ -2,16 +2,16 @@ import {
   CoreActions,
   Dispatch,
   JsonFormsCore,
-  JsonFormsSubStates
+  JsonFormsSubStates,
 } from '@jsonforms/core';
 
 export interface InjectJsonFormsState {
   jsonforms: JsonFormsSubStates;
 }
 export interface InjectJsonFormsDispatch {
-  dispatch: Dispatch<CoreActions>
+  dispatch: Dispatch<CoreActions>;
 }
 
-export type JsonFormsChangeEvent = Pick<JsonFormsCore, 'data' | 'errors'>
+export type JsonFormsChangeEvent = Pick<JsonFormsCore, 'data' | 'errors'>;
 
-export type MaybeReadonly<T> = T | Readonly<T>
+export type MaybeReadonly<T> = T | Readonly<T>;
diff --git a/packages/vue/vue/tests/testHelper.ts b/packages/vue/vue/tests/testHelper.ts
index 6f4372f34..4eddba447 100644
--- a/packages/vue/vue/tests/testHelper.ts
+++ b/packages/vue/vue/tests/testHelper.ts
@@ -1 +1 @@
-export const bindings = <B> (b:B) : B => b;
+export const bindings = <B>(b: B): B => b;
diff --git a/packages/vue/vue/tests/unit/JsonForms.spec.ts b/packages/vue/vue/tests/unit/JsonForms.spec.ts
index 11c097830..b91a1ff96 100644
--- a/packages/vue/vue/tests/unit/JsonForms.spec.ts
+++ b/packages/vue/vue/tests/unit/JsonForms.spec.ts
@@ -1,38 +1,48 @@
-import { JsonFormsUISchemaRegistryEntry } from '@jsonforms/core';
+import { JsonFormsUISchemaRegistryEntry, Generate } from '@jsonforms/core';
 import { shallowMount } from '@vue/test-utils';
 import { JsonForms } from '../../src';
-import { Generate } from '@jsonforms/core';
 import { bindings } from '../testHelper';
 
 describe('JsonForms.vue', () => {
   it('uses undefined as schema prop when not given', () => {
     const data = { number: 5 };
     const renderers: JsonFormsUISchemaRegistryEntry[] = [];
-    const wrapper = shallowMount(JsonForms, bindings({
-      props: { data, renderers }
-    }));
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, renderers },
+      })
+    );
     expect(wrapper.props('schema')).toBe(undefined);
   });
 
   it('generates schema when not given via prop', () => {
     const data = { number: 5.5 };
     const renderers: JsonFormsUISchemaRegistryEntry[] = [];
-    const wrapper = shallowMount(JsonForms, bindings({
-      props: { data, renderers }
-    }));
-    expect((wrapper.vm as any).jsonforms.core.schema).toEqual(Generate.jsonSchema(data));
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, renderers },
+      })
+    );
+    expect((wrapper.vm as any).jsonforms.core.schema).toEqual(
+      Generate.jsonSchema(data)
+    );
   });
 
   it('generates ui schema when not given via prop', () => {
     const data = { number: 5.5 };
     const schema = {
       type: 'object',
-      properties: { number: { type: 'number' } }
+      properties: { number: { type: 'number' } },
     };
     const renderers: JsonFormsUISchemaRegistryEntry[] = [];
-    const wrapper = shallowMount(JsonForms, bindings({
-      props: { data, schema, renderers }
-    }));
+    const wrapper = shallowMount(
+      JsonForms,
+      bindings({
+        props: { data, schema, renderers },
+      })
+    );
     expect((wrapper.vm as any).jsonforms.core.uischema).toEqual(
       Generate.uiSchema(schema)
     );

From 1f124e81b4c1ea411107fa5190d8fb7b4e2a8963 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Fri, 14 Apr 2023 13:06:06 +0200
Subject: [PATCH 13/17] Format remaining files with prettier

Part of #1551
---
 .devcontainer/devcontainer.json               |  46 +++---
 .github/config/changelog.json                 |   4 +-
 .github/workflows/ci.yaml                     |  52 +++----
 .github/workflows/release.yaml                |   2 +-
 .prettierrc.js                                |   2 +-
 .vscode/extensions.json                       |   4 +-
 .vscode/settings.json                         |  16 +-
 MIGRATION.md                                  |  90 +++++++-----
 README.md                                     |  30 ++--
 ROADMAP.md                                    |   8 +-
 lerna.json                                    |  13 +-
 packages/angular-material/.prettierrc.js      |   2 +-
 packages/angular-material/README.md           |  60 ++++----
 .../example/index.bundled.html                |  38 +++--
 packages/angular-material/example/index.html  |  40 ++---
 .../angular-material/rollup.example.config.js |  25 ++--
 .../test-config/karma-test-shim.js            |   5 +-
 .../test-config/karma.conf.js                 |  28 ++--
 .../test-config/protractor.conf.js            |  16 +-
 .../test-config/webpack.test.js               |  30 ++--
 .../angular-material/test/tsconfig.test.json  |  13 +-
 packages/angular-material/tsconfig.cjs.json   |   2 +-
 .../angular-material/webpack/webpack.build.js |  18 +--
 .../angular-material/webpack/webpack.dev.js   |  68 +++++----
 packages/angular-test/.prettierrc.js          |   2 +-
 packages/angular-test/tsconfig.json           |   8 +-
 packages/angular/.prettierrc.js               |   2 +-
 packages/angular/README.md                    |  83 ++++++-----
 packages/angular/test/tsconfig.test.json      |  13 +-
 packages/angular/tsconfig.cjs.json            |   2 +-
 packages/core/.nycrc                          |   8 +-
 packages/core/README.md                       |   6 +-
 packages/core/rollup.config.js                |  22 +--
 packages/core/tsconfig.json                   |   8 +-
 packages/examples-app/README.md               |   2 +-
 packages/examples-app/index.html              |  33 ++---
 packages/examples-app/prepare-examples-app.js |   6 +-
 packages/examples-react/.prettierrc.js        |   2 +-
 packages/examples-react/public/index.html     |  17 ++-
 packages/examples-react/src/App.css           |   6 +-
 packages/examples/.prettierrc.js              |   2 +-
 packages/examples/README.md                   |   2 +-
 packages/examples/rollup.config.js            |  24 +--
 packages/examples/tsconfig.json               |   8 +-
 packages/material-renderers/.prettierrc.js    |   2 +-
 packages/material-renderers/README.md         |  33 ++---
 .../example/index.bundled.html                |  26 ++--
 .../material-renderers/example/index.html     |  26 ++--
 packages/material-renderers/rollup.config.js  |  24 +--
 .../rollup.example.config.js                  |  25 ++--
 packages/material-renderers/tsconfig.json     |   8 +-
 .../material-renderers/webpack/webpack.dev.js |  12 +-
 packages/react/.prettierrc.js                 |   2 +-
 packages/react/README.md                      |  54 +++----
 packages/react/__mocks__/react.js             |   4 +-
 packages/react/rollup.config.js               |  52 +++----
 packages/react/tsconfig.json                  |  10 +-
 packages/react/tsconfig.redux.json            |   6 +-
 packages/vanilla-renderers/.nycrc             |   8 +-
 packages/vanilla-renderers/.prettierrc.js     |   2 +-
 packages/vanilla-renderers/README.md          |  30 ++--
 packages/vanilla-renderers/Styles.md          |  36 +++++
 .../vanilla-renderers/example/example.css     | 139 +++++++++---------
 .../example/index.bundled.html                |  48 +++---
 packages/vanilla-renderers/example/index.html |  48 +++---
 packages/vanilla-renderers/rollup.config.js   |  24 +--
 .../rollup.example.config.js                  |  27 ++--
 packages/vanilla-renderers/tsconfig.json      |   8 +-
 .../vanilla-renderers/webpack/webpack.dev.js  |  18 +--
 packages/vue/vue-vanilla/.prettierrc.js       |   2 +-
 packages/vue/vue-vanilla/README.md            |  68 +++++----
 packages/vue/vue-vanilla/babel.config.js      |   4 +-
 .../vue-vanilla/example/index.bundled.html    |  26 ++--
 packages/vue/vue-vanilla/rollup.config.js     |  42 +++---
 .../vue/vue-vanilla/rollup.example.config.js  |  20 +--
 packages/vue/vue-vanilla/shims-vue.d.ts       |   8 +-
 packages/vue/vue-vanilla/tsconfig.json        |   2 +-
 packages/vue/vue-vanilla/vanilla.css          |  11 +-
 packages/vue/vue/.prettierrc.js               |   2 +-
 packages/vue/vue/README.md                    | 114 +++++++-------
 packages/vue/vue/babel.config.js              |   4 +-
 packages/vue/vue/jest.config.js               |   4 +-
 packages/vue/vue/rollup.config.js             |  40 ++---
 packages/vue/vue/shims-vue.d.ts               |   8 +-
 packages/vue2/vue2-vanilla/README.md          |  71 +++++----
 packages/vue2/vue2-vanilla/babel.config.js    |   4 +-
 packages/vue2/vue2-vanilla/jest.config.js     |   2 +-
 packages/vue2/vue2-vanilla/rollup.config.js   |  42 +++---
 packages/vue2/vue2-vanilla/shims-vue.d.ts     |   4 +-
 packages/vue2/vue2-vanilla/vue.config.js      |   4 +-
 packages/vue2/vue2/README.md                  | 118 +++++++--------
 packages/vue2/vue2/babel.config.js            |   4 +-
 packages/vue2/vue2/jest.config.js             |   2 +-
 packages/vue2/vue2/rollup.config.js           |  42 +++---
 packages/vue2/vue2/shims-vue.d.ts             |   4 +-
 packages/vue2/vue2/vue.config.js              |   4 +-
 webpack/webpack.base.js                       |  90 ++++++------
 webpack/webpack.dev.base.js                   |  48 +++---
 98 files changed, 1193 insertions(+), 1141 deletions(-)

diff --git a/.devcontainer/devcontainer.json b/.devcontainer/devcontainer.json
index 0337654b0..a6195ce26 100644
--- a/.devcontainer/devcontainer.json
+++ b/.devcontainer/devcontainer.json
@@ -1,26 +1,26 @@
 // For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
 // https://github.com/microsoft/vscode-dev-containers/tree/v0.191.1/containers/javascript-node
 {
-	"name": "Node.js",
-	"build": {
-		"dockerfile": "Dockerfile",
-		// Update 'VARIANT' to pick a Node version: 14, 16
-		"args": {
-			"VARIANT": "14"
-		}
-	},
-	// Set *default* container specific settings.json values on container create.
-	// Add the IDs of extensions you want installed when the container is created.
-	"customizations": {
-		"extensions": [
-			"DavidAnson.vscode-markdownlint",
-			"dbaeumer.vscode-eslint",
-			"esbenp.prettier-vscode",
-			"vue.volar"
-		]
-	},
-	// Use 'postCreateCommand' to run commands after the container is created.
-	"postCreateCommand": "npm ci && npm run init && npm run build",
-	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
-	"remoteUser": "node"
-}
\ No newline at end of file
+  "name": "Node.js",
+  "build": {
+    "dockerfile": "Dockerfile",
+    // Update 'VARIANT' to pick a Node version: 14, 16
+    "args": {
+      "VARIANT": "14"
+    }
+  },
+  // Set *default* container specific settings.json values on container create.
+  // Add the IDs of extensions you want installed when the container is created.
+  "customizations": {
+    "extensions": [
+      "DavidAnson.vscode-markdownlint",
+      "dbaeumer.vscode-eslint",
+      "esbenp.prettier-vscode",
+      "vue.volar"
+    ]
+  },
+  // Use 'postCreateCommand' to run commands after the container is created.
+  "postCreateCommand": "npm ci && npm run init && npm run build",
+  // Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
+  "remoteUser": "node"
+}
diff --git a/.github/config/changelog.json b/.github/config/changelog.json
index 586fc7c7c..04256b89c 100644
--- a/.github/config/changelog.json
+++ b/.github/config/changelog.json
@@ -2,7 +2,5 @@
   "sort": "DESC",
   "pr_template": "- [${{LABELS}}] ${{TITLE}} (#${{NUMBER}})",
   "template": "${{UNCATEGORIZED}}",
-  "ignore_labels": [
-    "dependencies"
-  ]
+  "ignore_labels": ["dependencies"]
 }
diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 7a5d0a379..f661027ea 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -15,29 +15,29 @@ jobs:
           - windows-latest
     name: Run on ${{ matrix.os }}
     steps:
-    - uses: actions/checkout@v2
-    - name: Setup node
-      uses: actions/setup-node@v2
-      with:
-        node-version: 14
-    - name: Build
-      run: |
-        npm ci
-        npm run init
-        npm run build
-        npm run bundle
-    - name: Test
-      if: matrix.os == 'windows-latest'
-      run: |
-        npm run test
-    - name: Test & Coverage
-      if: matrix.os == 'ubuntu-latest'
-      run: |
-        npm run test-cov
-        npm run check-format
-        npm run merge-report && cat coverage/lcov.info
-    - name: Upload Coveralls Report
-      if: success() && matrix.os == 'ubuntu-latest'
-      uses: coverallsapp/github-action@master
-      with:
-        github-token: ${{ secrets.GITHUB_TOKEN }}
+      - uses: actions/checkout@v2
+      - name: Setup node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+      - name: Build
+        run: |
+          npm ci
+          npm run init
+          npm run build
+          npm run bundle
+      - name: Test
+        if: matrix.os == 'windows-latest'
+        run: |
+          npm run test
+      - name: Test & Coverage
+        if: matrix.os == 'ubuntu-latest'
+        run: |
+          npm run test-cov
+          npm run check-format
+          npm run merge-report && cat coverage/lcov.info
+      - name: Upload Coveralls Report
+        if: success() && matrix.os == 'ubuntu-latest'
+        uses: coverallsapp/github-action@master
+        with:
+          github-token: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index a23551150..8a001f488 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -6,7 +6,7 @@ on:
 
 jobs:
   release:
-    if: | 
+    if: |
       startsWith(github.ref, 'refs/tags/v') &&
       !contains(github.ref, 'alpha') &&
       !contains(github.ref, 'beta') &&
diff --git a/.prettierrc.js b/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index 157515469..460ca3db3 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -6,8 +6,8 @@
     "DavidAnson.vscode-markdownlint",
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
-    "ms-vscode-remote.remote-containers",
+    "ms-vscode-remote.remote-containers"
   ],
   // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
   "unwantedRecommendations": []
-}
\ No newline at end of file
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 106611d51..9c94fbac5 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -12,38 +12,38 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
-    },
+    }
   },
   "[javascriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
-    },
+    }
   },
   "[json]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode",
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "[typescript]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
-    },
+    }
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
-    },
+    }
   },
   "[vue]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": {
       "source.fixAll.eslint": true
-    },
+    }
   },
   "search.exclude": {
     "**/docs": true,
     "**/node_modules": true,
     "**/lib": true
-  },
-}
\ No newline at end of file
+  }
+}
diff --git a/MIGRATION.md b/MIGRATION.md
index 909c8b287..9458c2f80 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -24,8 +24,16 @@ interface TesterContext {
   config: any;
 }
 
-type Tester = (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => boolean;
-type RankedTester = (uischema: UISchemaElement, schema: JsonSchema, context: TesterContext) => number;
+type Tester = (
+  uischema: UISchemaElement,
+  schema: JsonSchema,
+  context: TesterContext
+) => boolean;
+type RankedTester = (
+  uischema: UISchemaElement,
+  schema: JsonSchema,
+  context: TesterContext
+) => number;
 ```
 
 This allows the testers to resolve any `$ref` they might encounter in their handed over `schema` by using the context's `rootSchema`.
@@ -50,7 +58,10 @@ To restore the old behavior, you can use `json-schema-ref-parser` or other libra
 ```ts
 import React, { useState } from 'react';
 import { JsonForms } from '@jsonforms/react';
-import { materialCells, materialRenderers } from '@jsonforms/material-renderers';
+import {
+  materialCells,
+  materialRenderers,
+} from '@jsonforms/material-renderers';
 import $RefParser from '@apidevtools/json-schema-ref-parser';
 import JsonRefs from 'json-refs';
 
@@ -58,22 +69,26 @@ import mySchemaWithReferences from 'myschema.json';
 
 const refParserOptions = {
   dereference: {
-    circular: false
-  }
-}
+    circular: false,
+  },
+};
 
 function App() {
   const [data, setData] = useState(initialData);
   const [resolvedSchema, setSchema] = useState();
 
   useEffect(() => {
-    $RefParser.dereference(mySchemaWithReferences).then(res => setSchema(res.$schema));
+    $RefParser
+      .dereference(mySchemaWithReferences)
+      .then((res) => setSchema(res.$schema));
     // or
-    JsonRefs.resolveRefs(mySchemaWithReferences).then(res => setSchema(res.resolved));
-  },[]);
+    JsonRefs.resolveRefs(mySchemaWithReferences).then((res) =>
+      setSchema(res.resolved)
+    );
+  }, []);
 
-  if(resolvedSchema === undefined) {
-    return <div> Loading... </div>
+  if (resolvedSchema === undefined) {
+    return <div> Loading... </div>;
   }
 
   return (
@@ -143,12 +158,12 @@ export const schema = {
   type: 'object',
   properties: {
     name: {
-      type: 'string'
-    }
+      type: 'string',
+    },
   },
-  required: ['name']
+  required: ['name'],
 };
-export const data = {name: 'Send email to Adrian'};
+export const data = { name: 'Send email to Adrian' };
 
 @Component({
   selector: 'app-root',
@@ -160,7 +175,7 @@ export const data = {name: 'Send email to Adrian'};
       [renderers]="renderers"
       (dataChange)="onDataChange($event)"
     ></jsonforms>
-  `
+  `,
 })
 export class AppComponent {
   readonly renderers = angularMaterialRenderers;
@@ -201,15 +216,12 @@ All current Redux functionally can also be achieved with the standalone version.
 Previously the store was initialized like this:
 
 ```ts
-const store = createStore(
-  combineReducers({ jsonforms: jsonformsReducer() }),
-  {
-    jsonforms: {
-      cells: materialCells,
-      renderers: materialRenderers
-    }
-  }
-);
+const store = createStore(combineReducers({ jsonforms: jsonformsReducer() }), {
+  jsonforms: {
+    cells: materialCells,
+    renderers: materialRenderers,
+  },
+});
 store.dispatch(Actions.init(data, schema, uischema));
 return (
   <Provider store={store}>
@@ -250,7 +262,7 @@ Within the standalone version, the renderer can just be provided to the `<JsonFo
 const renderers = [
   ...materialRenderers,
   // register custom renderer
-  { tester: customControlTester, renderer: CustomControl }
+  { tester: customControlTester, renderer: CustomControl },
 ];
 
 const MyApp = () => (
@@ -259,7 +271,6 @@ const MyApp = () => (
     renderers={renderers}
   />
 );
-
 ```
 
 ##### Example 3: Listen to data and validation changes
@@ -286,7 +297,10 @@ If you want to keep using the Redux variant of JSON Forms for now (which is not
 The new imports are available at `@jsonforms/react/lib/redux`, i.e.
 
 ```ts
-import { jsonformsReducer, JsonFormsReduxProvider } from '@jsonforms/react/lib/redux';
+import {
+  jsonformsReducer,
+  JsonFormsReduxProvider,
+} from '@jsonforms/react/lib/redux';
 ```
 
 ## Migrating from JSON Forms 1.x (AngularJS 1.x)
@@ -298,8 +312,8 @@ The complexity of the migration of an existing JSON Forms 1.x application, which
 There are two big changes between JSON Forms 1 and JSON Forms 2 you need to understand when migrating your existing application.
 
 1. JSON Forms 2.x does not rely on any specific UI framework [or library].
-  The `2.0.0` initial release featured renderers based on [React](https://reactjs.org).
-  An [Angular](https://angular.io) based renderer set was released with `2.1.0`.
+   The `2.0.0` initial release featured renderers based on [React](https://reactjs.org).
+   An [Angular](https://angular.io) based renderer set was released with `2.1.0`.
 
 2. Since JSON Forms 2.x maintains its internal state via [redux](https://redux.js.org/), you will need to add it as a dependency to your application.
 
@@ -314,20 +328,20 @@ Instead of:
 
 ```ts
 const uischema = {
-    type: 'Control',
-    scope: {
-        $ref: '#/properties/name'
-    }
-}
+  type: 'Control',
+  scope: {
+    $ref: '#/properties/name',
+  },
+};
 ```
 
 simply write:
 
 ```ts
 const uischema = {
-    type: 'Control',
-    scope: '#/properties/name'
-}
+  type: 'Control',
+  scope: '#/properties/name',
+};
 ```
 
 Otherwise the UI schema remains unchanged and works like in JSON Forms 1.x.
diff --git a/README.md b/README.md
index 36cb2cb4e..6923a41de 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 ## Documentation
 
@@ -32,28 +32,28 @@ In addition, EclipseSource also offers [professional support](https://jsonforms.
 
 ### First time setup
 
-* Install [node.js](https://nodejs.org/) (only Node 14 and npm 6 is currently supported)
-* Clone this repository
-* Install dependencies: `npm ci`
-* Hook up dependencies between packages: `npm run init`
+- Install [node.js](https://nodejs.org/) (only Node 14 and npm 6 is currently supported)
+- Clone this repository
+- Install dependencies: `npm ci`
+- Hook up dependencies between packages: `npm run init`
 
 ### VS Code dev container
 
 As an alternative to the first time setup, you can use the provided [VS Code dev container](https://code.visualstudio.com/docs/remote/containers) configured in [devcontainer.json](.devcontainer/devcontainer.json).
 
-* Execute command: `Remote Containers: Reopen in container`
-* Wait until the container is built and loaded
-* First time setup and an initial build of all packages has been executed in the container
+- Execute command: `Remote Containers: Reopen in container`
+- Wait until the container is built and loaded
+- First time setup and an initial build of all packages has been executed in the container
 
 ### Build & Testing
 
-* Build (all packages): `npm run build`
-* Test (all packages): `npm run test`
-* Clean (delete `dist` folder of all packages): `npm run clean`
-* Run React Vanilla examples: `cd packages/vanilla && npm run dev`
-* Run React Material examples: `cd packages/material && npm run dev`
-* Run Angular Material examples: `cd packages/angular-material && npm run dev`
-* Run Vue Vanilla dev setup: `cd packages/vue/vue-vanilla && npm run serve`
+- Build (all packages): `npm run build`
+- Test (all packages): `npm run test`
+- Clean (delete `dist` folder of all packages): `npm run clean`
+- Run React Vanilla examples: `cd packages/vanilla && npm run dev`
+- Run React Material examples: `cd packages/material && npm run dev`
+- Run Angular Material examples: `cd packages/angular-material && npm run dev`
+- Run Vue Vanilla dev setup: `cd packages/vue/vue-vanilla && npm run serve`
 
 ### Dependency & Release management
 
diff --git a/ROADMAP.md b/ROADMAP.md
index 916d7eccc..f58e51c5b 100644
--- a/ROADMAP.md
+++ b/ROADMAP.md
@@ -3,8 +3,10 @@
 This roadmap defines our current view on how we will continue with the development of JSON Forms on a very coarse-grained level and is subject to change at any time:
 
 H1/2023
- * Improve developer tooling
- * Improve release process to allow for more and less effort releases
+
+- Improve developer tooling
+- Improve release process to allow for more and less effort releases
 
 H2/2023
- * Improve adopter experience
+
+- Improve adopter experience
diff --git a/lerna.json b/lerna.json
index b30a9f999..4eadf9103 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,14 +1,5 @@
 {
-  "packages": [
-    "packages/*",
-    "packages/vue/*",
-    "packages/vue2/*"
-  ],
+  "packages": ["packages/*", "packages/vue/*", "packages/vue2/*"],
   "version": "3.1.0-alpha.1",
-  "nohoist": [
-    "core-js",
-    "vue",
-    "rollup-plugin-vue",
-    "@vue/test-utils"
-  ]
+  "nohoist": ["core-js", "vue", "rollup-plugin-vue", "@vue/test-utils"]
 }
diff --git a/packages/angular-material/.prettierrc.js b/packages/angular-material/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/angular-material/.prettierrc.js
+++ b/packages/angular-material/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/angular-material/README.md b/packages/angular-material/README.md
index 817807d30..c8ab6e12a 100644
--- a/packages/angular-material/README.md
+++ b/packages/angular-material/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -25,11 +25,11 @@ Use the `json-forms` component for each form you want to render and hand over th
 Example component file `app.component.ts`:
 
 ```ts
-import { Component } from "@angular/core";
-import { angularMaterialRenderers } from "@jsonforms/angular-material";
+import { Component } from '@angular/core';
+import { angularMaterialRenderers } from '@jsonforms/angular-material';
 
 @Component({
-  selector: "app-root",
+  selector: 'app-root',
   template: `<jsonforms
     [data]="data"
     [schema]="schema"
@@ -40,65 +40,66 @@ import { angularMaterialRenderers } from "@jsonforms/angular-material";
 export class AppComponent {
   renderers = angularMaterialRenderers;
   uischema = {
-    type: "VerticalLayout",
+    type: 'VerticalLayout',
     elements: [
       {
-        type: "Control",
+        type: 'Control',
         label: false,
-        scope: "#/properties/done",
+        scope: '#/properties/done',
       },
       {
-        type: "Control",
-        scope: "#/properties/name",
+        type: 'Control',
+        scope: '#/properties/name',
       },
       {
-        type: "HorizontalLayout",
+        type: 'HorizontalLayout',
         elements: [
           {
-            type: "Control",
-            scope: "#/properties/due_date",
+            type: 'Control',
+            scope: '#/properties/due_date',
           },
           {
-            type: "Control",
-            scope: "#/properties/recurrence",
+            type: 'Control',
+            scope: '#/properties/recurrence',
           },
         ],
       },
     ],
   };
   schema = {
-    type: "object",
+    type: 'object',
     properties: {
       name: {
-        type: "string",
+        type: 'string',
         minLength: 1,
       },
       done: {
-        type: "boolean",
+        type: 'boolean',
       },
       due_date: {
-        type: "string",
-        format: "date",
+        type: 'string',
+        format: 'date',
       },
       recurrence: {
-        type: "string",
-        enum: ["Never", "Daily", "Weekly", "Monthly"],
+        type: 'string',
+        enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
       },
     },
-    required: ["name", "due_date"],
+    required: ['name', 'due_date'],
   };
   data = {};
 }
 ```
+
 Example module file `app.module.ts`:
 
 ```ts
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { JsonFormsModule } from "@jsonforms/angular";
-import { JsonFormsAngularMaterialModule } from "@jsonforms/angular-material";
-import { AppComponent } from "./app.component";
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { JsonFormsModule } from '@jsonforms/angular';
+import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
+import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
@@ -111,8 +112,7 @@ import { AppComponent } from "./app.component";
   schemas: [],
   bootstrap: [AppComponent],
 })
-
-export class AppModule { }
+export class AppModule {}
 ```
 
 ## License
diff --git a/packages/angular-material/example/index.bundled.html b/packages/angular-material/example/index.bundled.html
index 3c6ae29cf..52c0b9b0b 100644
--- a/packages/angular-material/example/index.bundled.html
+++ b/packages/angular-material/example/index.bundled.html
@@ -1,22 +1,30 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>JSON Forms Angular Material RendererSet</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="indigo-pink.css" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" type='text/css'>
-  <link href='https://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100' rel='stylesheet' type='text/css'>
-</head>
-<body>
-  <app-root></app-root>
-</body>
-<script src="bundle.js"></script>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Forms Angular Material RendererSet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link href="indigo-pink.css" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+  <script src="bundle.js"></script>
 </html>
 
 <!--
 Copyright 2017-2018 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
--->
\ No newline at end of file
+-->
diff --git a/packages/angular-material/example/index.html b/packages/angular-material/example/index.html
index 780779fd7..7eb9fa2b8 100644
--- a/packages/angular-material/example/index.html
+++ b/packages/angular-material/example/index.html
@@ -1,25 +1,31 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Tour of Heroes</title>
-  <base href="/">
+  <head>
+    <meta charset="utf-8" />
+    <title>Tour of Heroes</title>
+    <base href="/" />
 
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <link href="assets/indigo-pink.css" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
-        rel="stylesheet">
-  <link href='http://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100' rel='stylesheet' type='text/css'>
-</head>
-<body>
-  <app-root></app-root>
-</body>
-<script src="assets/bundle.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="favicon.ico" />
+    <link href="assets/indigo-pink.css" rel="stylesheet" />
+    <link
+      href="https://fonts.googleapis.com/icon?family=Material+Icons"
+      rel="stylesheet"
+    />
+    <link
+      href="http://fonts.googleapis.com/css?family=Roboto:400,900,700,500,300,100"
+      rel="stylesheet"
+      type="text/css"
+    />
+  </head>
+  <body>
+    <app-root></app-root>
+  </body>
+  <script src="assets/bundle.js"></script>
 </html>
 
 <!-- 
 Copyright 2017-2018 Google Inc. All Rights Reserved.
 Use of this source code is governed by an MIT-style license that
 can be found in the LICENSE file at http://angular.io/license
--->
\ No newline at end of file
+-->
diff --git a/packages/angular-material/rollup.example.config.js b/packages/angular-material/rollup.example.config.js
index 8869b27b6..7d0495919 100644
--- a/packages/angular-material/rollup.example.config.js
+++ b/packages/angular-material/rollup.example.config.js
@@ -8,13 +8,13 @@ import typescript from 'rollup-plugin-typescript2';
 
 /**
  * @type {import('rollup').RollupOptions}
-*/
+ */
 const config = {
   input: 'example/main.ts',
   output: {
     file: 'example/dist/bundle.js',
     format: 'iife',
-    sourcemap: true
+    sourcemap: true,
   },
   plugins: [
     replace({
@@ -30,23 +30,24 @@ const config = {
       tsconfigOverride: {
         compilerOptions: {
           // Do not emit typescript declarations for our bundled example app
-          declaration: false
-        }
-    }}),
+          declaration: false,
+        },
+      },
+    }),
     copy({
       targets: [
         {
           src: '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
-          dest: 'example/dist'
+          dest: 'example/dist',
         },
         {
           src: 'example/index.bundled.html',
           dest: 'example/dist',
-          rename: () => 'index.html'
-        }
-      ]
+          rename: () => 'index.html',
+        },
+      ],
     }),
-  ]
-}
+  ],
+};
 
-export default config;
\ No newline at end of file
+export default config;
diff --git a/packages/angular-material/test-config/karma-test-shim.js b/packages/angular-material/test-config/karma-test-shim.js
index cb0112587..de240f3e5 100755
--- a/packages/angular-material/test-config/karma-test-shim.js
+++ b/packages/angular-material/test-config/karma-test-shim.js
@@ -18,4 +18,7 @@ appContext.keys().forEach(appContext);
 var testing = require('@angular/core/testing');
 var browser = require('@angular/platform-browser-dynamic/testing');
 
-testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
+testing.TestBed.initTestEnvironment(
+  browser.BrowserDynamicTestingModule,
+  browser.platformBrowserDynamicTesting()
+);
diff --git a/packages/angular-material/test-config/karma.conf.js b/packages/angular-material/test-config/karma.conf.js
index 7ef05799f..7cecf6925 100755
--- a/packages/angular-material/test-config/karma.conf.js
+++ b/packages/angular-material/test-config/karma.conf.js
@@ -1,6 +1,6 @@
 var webpackConfig = require('./webpack.test.js');
 
-module.exports = function(config) {
+module.exports = function (config) {
   var _config = {
     basePath: '../',
 
@@ -9,36 +9,38 @@ module.exports = function(config) {
     files: [
       {
         pattern: './test-config/karma-test-shim.js',
-        watched: true
-      }
+        watched: true,
+      },
     ],
 
     preprocessors: {
-      './test-config/karma-test-shim.js': ['webpack', 'sourcemap']
+      './test-config/karma-test-shim.js': ['webpack', 'sourcemap'],
     },
 
     webpack: webpackConfig,
 
     webpackMiddleware: {
-      stats: 'errors-only'
+      stats: 'errors-only',
     },
 
     webpackServer: {
-      noInfo: true
+      noInfo: true,
     },
 
     browserConsoleLogOptions: {
       level: 'log',
       format: '%b %T: %m',
-      terminal: true
+      terminal: true,
     },
 
     coverageIstanbulReporter: {
-      reports: [ 'html', 'lcovonly' ],
-      fixWebpackSourcePaths: true
+      reports: ['html', 'lcovonly'],
+      fixWebpackSourcePaths: true,
     },
 
-    reporters: config.coverage ? ['kjhtml', 'dots', 'coverage-istanbul'] : ['kjhtml', 'dots'],
+    reporters: config.coverage
+      ? ['kjhtml', 'dots', 'coverage-istanbul']
+      : ['kjhtml', 'dots'],
     port: 9876,
 
     colors: true,
@@ -48,10 +50,10 @@ module.exports = function(config) {
     customLaunchers: {
       ChromeHeadlessNoSandbox: {
         base: 'ChromeHeadless',
-        flags: ['--no-sandbox']
-      }
+        flags: ['--no-sandbox'],
+      },
     },
-    singleRun: false
+    singleRun: false,
   };
 
   config.set(_config);
diff --git a/packages/angular-material/test-config/protractor.conf.js b/packages/angular-material/test-config/protractor.conf.js
index 8a0a7fc2f..9f0daec9a 100644
--- a/packages/angular-material/test-config/protractor.conf.js
+++ b/packages/angular-material/test-config/protractor.conf.js
@@ -5,11 +5,9 @@ const { SpecReporter } = require('jasmine-spec-reporter');
 
 exports.config = {
   allScriptsTimeout: 11000,
-  specs: [
-    '../e2e/**/*.e2e-spec.ts'
-  ],
+  specs: ['../e2e/**/*.e2e-spec.ts'],
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome',
   },
   directConnect: true,
   baseUrl: 'http://localhost:8100/',
@@ -17,12 +15,14 @@ exports.config = {
   jasmineNodeOpts: {
     showColors: true,
     defaultTimeoutInterval: 30000,
-    print: function() {}
+    print: function () {},
   },
   onPrepare() {
     require('ts-node').register({
-      project: 'e2e/tsconfig.e2e.json'
+      project: 'e2e/tsconfig.e2e.json',
     });
-    jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
-  }
+    jasmine
+      .getEnv()
+      .addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
+  },
 };
diff --git a/packages/angular-material/test-config/webpack.test.js b/packages/angular-material/test-config/webpack.test.js
index 2ab5a0645..431c39eb7 100755
--- a/packages/angular-material/test-config/webpack.test.js
+++ b/packages/angular-material/test-config/webpack.test.js
@@ -5,7 +5,7 @@ module.exports = {
   devtool: 'inline-source-map',
 
   resolve: {
-    extensions: ['.ts', '.js']
+    extensions: ['.ts', '.js'],
   },
 
   module: {
@@ -16,19 +16,19 @@ module.exports = {
         options: {
           plugins: [
             '@babel/plugin-proposal-optional-chaining',
-            '@babel/plugin-proposal-nullish-coalescing-operator'
-          ]
+            '@babel/plugin-proposal-nullish-coalescing-operator',
+          ],
         },
-        exclude: /node_modules/
+        exclude: /node_modules/,
       },
       {
         test: /\.ts$/,
         loaders: [
           {
-            loader: 'ts-loader'
+            loader: 'ts-loader',
           },
-          'angular2-template-loader'
-        ]
+          'angular2-template-loader',
+        ],
       },
       {
         test: /.+\.ts$/,
@@ -36,18 +36,18 @@ module.exports = {
         loader: 'istanbul-instrumenter-loader',
         enforce: 'post',
         query: {
-          esModules: true
-        }
+          esModules: true,
+        },
       },
       {
         test: /\.html$/,
-        loader: 'html-loader?attrs=false'
+        loader: 'html-loader?attrs=false',
       },
       {
         test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-        loader: 'null-loader'
-      }
-    ]
+        loader: 'null-loader',
+      },
+    ],
   },
 
   plugins: [
@@ -56,8 +56,8 @@ module.exports = {
       /(angular(\\|\/)core(\\|\/)@angular)/,
       root('./src'), // location of your src
       {} // a map of your routes
-    )
-  ]
+    ),
+  ],
 };
 
 function root(localPath) {
diff --git a/packages/angular-material/test/tsconfig.test.json b/packages/angular-material/test/tsconfig.test.json
index 46da1c60a..8b6cff6dc 100644
--- a/packages/angular-material/test/tsconfig.test.json
+++ b/packages/angular-material/test/tsconfig.test.json
@@ -5,14 +5,7 @@
     "target": "es6",
     "inlineSourceMap": true
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude":[
-    "node_modules"
-  ],
-  "files": [
-    "../src/index.ts"
-  ]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "files": ["../src/index.ts"]
 }
diff --git a/packages/angular-material/tsconfig.cjs.json b/packages/angular-material/tsconfig.cjs.json
index b04d624eb..b0c215c3d 100644
--- a/packages/angular-material/tsconfig.cjs.json
+++ b/packages/angular-material/tsconfig.cjs.json
@@ -5,5 +5,5 @@
     "sourceMap": true,
     "target": "es5",
     "module": "commonjs"
-  },
+  }
 }
diff --git a/packages/angular-material/webpack/webpack.build.js b/packages/angular-material/webpack/webpack.build.js
index 062808dcb..3a676b9a7 100644
--- a/packages/angular-material/webpack/webpack.build.js
+++ b/packages/angular-material/webpack/webpack.build.js
@@ -2,12 +2,12 @@ const merge = require('webpack-merge');
 const baseConfig = require('../../../webpack/webpack.build.base.js');
 
 module.exports = merge(baseConfig, {
-    output: {
-        filename: "jsonforms-angular-material.js",
-        library: "JSONFormsAngularMaterial"
-      },
-      externals: {
-          '@jsonforms/core': 'JSONFormsCore',
-          '@jsonforms/angular': 'JSONFormsAngular'
-    },
-});
\ No newline at end of file
+  output: {
+    filename: 'jsonforms-angular-material.js',
+    library: 'JSONFormsAngularMaterial',
+  },
+  externals: {
+    '@jsonforms/core': 'JSONFormsCore',
+    '@jsonforms/angular': 'JSONFormsAngular',
+  },
+});
diff --git a/packages/angular-material/webpack/webpack.dev.js b/packages/angular-material/webpack/webpack.dev.js
index b0d25d9bd..6189cdcc7 100644
--- a/packages/angular-material/webpack/webpack.dev.js
+++ b/packages/angular-material/webpack/webpack.dev.js
@@ -1,37 +1,45 @@
 var webpack = require('webpack');
-const path = require("path");
+const path = require('path');
 const merge = require('webpack-merge');
-var copyWebpackPlugin = require("copy-webpack-plugin");
+var copyWebpackPlugin = require('copy-webpack-plugin');
 const baseConfig = require('../../../webpack/webpack.base.js');
 
 module.exports = merge(baseConfig, {
-    entry: [
-        'webpack-dev-server/client?http://localhost:8080',
-        'webpack/hot/dev-server',
-        './example/main.ts'
-    ],
-    output: {
-      publicPath: "/assets/",
-      filename: "bundle.js"
-    },
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './example/main.ts',
+  ],
+  output: {
+    publicPath: '/assets/',
+    filename: 'bundle.js',
+  },
 
-    devServer: {
-        contentBase: './example'
-    },
-    plugins: [
-        new webpack.HotModuleReplacementPlugin(),
-        new copyWebpackPlugin([
-            { from: '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css' }
-        ])
-        
+  devServer: {
+    contentBase: './example',
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin(),
+    new copyWebpackPlugin([
+      {
+        from: '../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css',
+      },
+    ]),
+  ],
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        exclude: /node_modules/,
+        loader: 'html-loader?exportAsEs6Default',
+      },
+    ],
+  },
+  resolve: {
+    // manually link to angular path in case of dev
+    modules: [
+      path.resolve(__dirname, '../../angular/node_modules'),
+      'node_modules',
     ],
-    module: {
-      rules: [
-       { test: /\.html$/, exclude: /node_modules/, loader: 'html-loader?exportAsEs6Default'}
-      ]
-    },
-    resolve: {
-        // manually link to angular path in case of dev
-        modules: [path.resolve(__dirname, "../../angular/node_modules"), "node_modules"]
-    }
-});
\ No newline at end of file
+  },
+});
diff --git a/packages/angular-test/.prettierrc.js b/packages/angular-test/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/angular-test/.prettierrc.js
+++ b/packages/angular-test/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/angular-test/tsconfig.json b/packages/angular-test/tsconfig.json
index 5c9f3f825..9af7ef8c9 100644
--- a/packages/angular-test/tsconfig.json
+++ b/packages/angular-test/tsconfig.json
@@ -4,10 +4,6 @@
     "outDir": "./lib",
     "sourceMap": true
   },
-  "exclude":[
-    "node_modules"
-  ],
-  "files": [
-    "./src/index.ts"
-  ]
+  "exclude": ["node_modules"],
+  "files": ["./src/index.ts"]
 }
diff --git a/packages/angular/.prettierrc.js b/packages/angular/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/angular/.prettierrc.js
+++ b/packages/angular/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/angular/README.md b/packages/angular/README.md
index 1afb1bf33..c71fe53c9 100644
--- a/packages/angular/README.md
+++ b/packages/angular/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -20,30 +20,30 @@ Use the `JsonForms` component to render a form for your data.
 
 Mandatory props:
 
-* `data: any` - the data to show
-* `renderers: JsonFormsRendererRegistryEntry[]` - the Angular renderer set to use
+- `data: any` - the data to show
+- `renderers: JsonFormsRendererRegistryEntry[]` - the Angular renderer set to use
 
 Optional props:
 
-* `schema: JsonSchema` - the data schema for the given data. Will be generated when not given.
-* `uischema: UISchemaElement` - the UI schema for the given data schema. Will be generated when not given.
-* `config: any` - form-wide options. May contain default ui schema options.
-* `readonly: boolean` - whether all controls shall be readonly.
-* `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching
-* `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form
-* `ajv: AJV` - custom Ajv instance for the form
-* `locale` - string, for example for formatting numbers 
-* `dataChange` - event emitter which is called on each data change, containing the updated data and the validation result.
-* `errors` - event emitter which is called with all validations errors.
+- `schema: JsonSchema` - the data schema for the given data. Will be generated when not given.
+- `uischema: UISchemaElement` - the UI schema for the given data schema. Will be generated when not given.
+- `config: any` - form-wide options. May contain default ui schema options.
+- `readonly: boolean` - whether all controls shall be readonly.
+- `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching
+- `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form
+- `ajv: AJV` - custom Ajv instance for the form
+- `locale` - string, for example for formatting numbers
+- `dataChange` - event emitter which is called on each data change, containing the updated data and the validation result.
+- `errors` - event emitter which is called with all validations errors.
 
 Example component file `app.component.ts`:
 
 ```ts
-import { Component } from "@angular/core";
-import { angularMaterialRenderers } from "@jsonforms/angular-material";
+import { Component } from '@angular/core';
+import { angularMaterialRenderers } from '@jsonforms/angular-material';
 
 @Component({
-  selector: "app-root",
+  selector: 'app-root',
   template: `<jsonforms
     [data]="data"
     [schema]="schema"
@@ -54,52 +54,52 @@ import { angularMaterialRenderers } from "@jsonforms/angular-material";
 export class AppComponent {
   renderers = angularMaterialRenderers;
   uischema = {
-    type: "VerticalLayout",
+    type: 'VerticalLayout',
     elements: [
       {
-        type: "Control",
+        type: 'Control',
         label: false,
-        scope: "#/properties/done",
+        scope: '#/properties/done',
       },
       {
-        type: "Control",
-        scope: "#/properties/name",
+        type: 'Control',
+        scope: '#/properties/name',
       },
       {
-        type: "HorizontalLayout",
+        type: 'HorizontalLayout',
         elements: [
           {
-            type: "Control",
-            scope: "#/properties/due_date",
+            type: 'Control',
+            scope: '#/properties/due_date',
           },
           {
-            type: "Control",
-            scope: "#/properties/recurrence",
+            type: 'Control',
+            scope: '#/properties/recurrence',
           },
         ],
       },
     ],
   };
   schema = {
-    type: "object",
+    type: 'object',
     properties: {
       name: {
-        type: "string",
+        type: 'string',
         minLength: 1,
       },
       done: {
-        type: "boolean",
+        type: 'boolean',
       },
       due_date: {
-        type: "string",
-        format: "date",
+        type: 'string',
+        format: 'date',
       },
       recurrence: {
-        type: "string",
-        enum: ["Never", "Daily", "Weekly", "Monthly"],
+        type: 'string',
+        enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
       },
     },
-    required: ["name", "due_date"],
+    required: ['name', 'due_date'],
   };
   data = {};
 }
@@ -108,12 +108,12 @@ export class AppComponent {
 Example module file:
 
 ```ts
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
-import { JsonFormsModule } from "@jsonforms/angular";
-import { JsonFormsAngularMaterialModule } from "@jsonforms/angular-material";
-import { AppComponent } from "./app.component";
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { JsonFormsModule } from '@jsonforms/angular';
+import { JsonFormsAngularMaterialModule } from '@jsonforms/angular-material';
+import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [AppComponent],
@@ -126,8 +126,7 @@ import { AppComponent } from "./app.component";
   schemas: [],
   bootstrap: [AppComponent],
 })
-
-export class AppModule { }
+export class AppModule {}
 ```
 
 ## License
diff --git a/packages/angular/test/tsconfig.test.json b/packages/angular/test/tsconfig.test.json
index 46da1c60a..8b6cff6dc 100644
--- a/packages/angular/test/tsconfig.test.json
+++ b/packages/angular/test/tsconfig.test.json
@@ -5,14 +5,7 @@
     "target": "es6",
     "inlineSourceMap": true
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx"
-  ],
-  "exclude":[
-    "node_modules"
-  ],
-  "files": [
-    "../src/index.ts"
-  ]
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"],
+  "files": ["../src/index.ts"]
 }
diff --git a/packages/angular/tsconfig.cjs.json b/packages/angular/tsconfig.cjs.json
index b04d624eb..b0c215c3d 100644
--- a/packages/angular/tsconfig.cjs.json
+++ b/packages/angular/tsconfig.cjs.json
@@ -5,5 +5,5 @@
     "sourceMap": true,
     "target": "es5",
     "module": "commonjs"
-  },
+  }
 }
diff --git a/packages/core/.nycrc b/packages/core/.nycrc
index beb1ac33c..e960adbe9 100644
--- a/packages/core/.nycrc
+++ b/packages/core/.nycrc
@@ -1,6 +1,6 @@
 {
-   "extends": "@istanbuljs/nyc-config-typescript",
-   "lines": 40,
-   "all": true,
-   "check-coverage": true
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "lines": 40,
+  "all": true,
+  "check-coverage": true
 }
diff --git a/packages/core/README.md b/packages/core/README.md
index ff6dfe8ca..933bfb881 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -13,6 +13,7 @@ In order to use JSON Forms Core you need to decide which UI framework you would
 JSON Forms currently supports [React](https://github.com/eclipsesource/jsonforms/blob/master/packages/react), [Angular](https://github.com/eclipsesource/jsonforms/blob/master/packages/angular) and [Vue](https://github.com/eclipsesource/jsonforms/blob/master/packages/vue).
 
 The following seeds are available:
+
 - [React Seed](https://github.com/eclipsesource/jsonforms-react-seed)
 - [Angular Seed](https://github.com/eclipsesource/jsonforms-angular-seed)
 - [Vue Seed](https://github.com/eclipsesource/jsonforms-vue-seed)
@@ -44,7 +45,6 @@ For questions and discussions please use the [JSON Forms board](https://jsonform
 You can also reach us via [email](mailto:jsonforms@eclipsesource.com?subject=JSON%20Forms).
 In addition, EclipseSource also offers [professional support](https://jsonforms.io/support) for JSON Forms.
 
-
 ## Migration
 
-See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms.
\ No newline at end of file
+See our [migration guide](https://github.com/eclipsesource/jsonforms/blob/master/MIGRATION.md) when updating JSON Forms.
diff --git a/packages/core/rollup.config.js b/packages/core/rollup.config.js
index 1261f27b7..723854467 100644
--- a/packages/core/rollup.config.js
+++ b/packages/core/rollup.config.js
@@ -6,7 +6,7 @@ const packageJson = require('./package.json');
 
 const baseConfig = {
   input: 'src/index.ts',
-  external: [...Object.keys(packageJson.dependencies), /^lodash\/.*/]
+  external: [...Object.keys(packageJson.dependencies), /^lodash\/.*/],
 };
 
 export default [
@@ -15,30 +15,30 @@ export default [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript(),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           compilerOptions: {
-            target: 'ES5'
-          }
-        }
+            target: 'ES5',
+          },
+        },
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] })
-    ]
-  }
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+    ],
+  },
 ];
diff --git a/packages/core/tsconfig.json b/packages/core/tsconfig.json
index 5c9f3f825..9af7ef8c9 100644
--- a/packages/core/tsconfig.json
+++ b/packages/core/tsconfig.json
@@ -4,10 +4,6 @@
     "outDir": "./lib",
     "sourceMap": true
   },
-  "exclude":[
-    "node_modules"
-  ],
-  "files": [
-    "./src/index.ts"
-  ]
+  "exclude": ["node_modules"],
+  "files": ["./src/index.ts"]
 }
diff --git a/packages/examples-app/README.md b/packages/examples-app/README.md
index c7112e3db..c1698de93 100644
--- a/packages/examples-app/README.md
+++ b/packages/examples-app/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
diff --git a/packages/examples-app/index.html b/packages/examples-app/index.html
index 75c9e2bf7..9fb592ffc 100644
--- a/packages/examples-app/index.html
+++ b/packages/examples-app/index.html
@@ -1,19 +1,18 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Forms Examples</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>JSON Forms Examples</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-
-<body>
-  <h1>JSON Forms Examples</h1>
-  <ul>
-    <li><a href="react-vanilla">React Vanilla Renderers</a></li>
-    <li><a href="react-material">React Material Renderers</a></li>
-    <li><a href="angular-material">Angular Material Renderers</a></li>
-    <li><a href="vue-vanilla">Vue Vanilla Renderers</a></li>
-  </ul>
-</body>
-</html>
\ No newline at end of file
+  <body>
+    <h1>JSON Forms Examples</h1>
+    <ul>
+      <li><a href="react-vanilla">React Vanilla Renderers</a></li>
+      <li><a href="react-material">React Material Renderers</a></li>
+      <li><a href="angular-material">Angular Material Renderers</a></li>
+      <li><a href="vue-vanilla">Vue Vanilla Renderers</a></li>
+    </ul>
+  </body>
+</html>
diff --git a/packages/examples-app/prepare-examples-app.js b/packages/examples-app/prepare-examples-app.js
index 3db3b1ed8..22d2cacc2 100644
--- a/packages/examples-app/prepare-examples-app.js
+++ b/packages/examples-app/prepare-examples-app.js
@@ -14,8 +14,8 @@ const examples = {
   'react-vanilla': join(packagesDir, 'vanilla-renderers', 'example', 'dist'),
   'react-material': join(packagesDir, 'material-renderers', 'example', 'dist'),
   'angular-material': join(packagesDir, 'angular-material', 'example', 'dist'),
-  'vue-vanilla': join(packagesDir, 'vue', 'vue-vanilla', 'example', 'dist')
-}
+  'vue-vanilla': join(packagesDir, 'vue', 'vue-vanilla', 'example', 'dist'),
+};
 
 // Clean and recreate dist dir
 console.log('Clean and recreate dist dir...');
@@ -26,7 +26,7 @@ mkdirSync(distDir, { recursive: true });
 console.log('Copy index.html...');
 console.log('Copy example apps...');
 copyFileSync(join(__dirname, 'index.html'), join(distDir, 'index.html'));
-Object.keys(examples).forEach(key => {
+Object.keys(examples).forEach((key) => {
   console.log(`Copying example ${key}...`);
   const path = examples[key];
   copySync(path, join(distDir, key));
diff --git a/packages/examples-react/.prettierrc.js b/packages/examples-react/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/examples-react/.prettierrc.js
+++ b/packages/examples-react/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/examples-react/public/index.html b/packages/examples-react/public/index.html
index ed0ebafa1..29aba544c 100644
--- a/packages/examples-react/public/index.html
+++ b/packages/examples-react/public/index.html
@@ -1,15 +1,18 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="theme-color" content="#000000">
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="theme-color" content="#000000" />
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -22,9 +25,7 @@
     <title>React App</title>
   </head>
   <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
     <div id="root"></div>
     <!--
       This HTML file is a template.
diff --git a/packages/examples-react/src/App.css b/packages/examples-react/src/App.css
index f5a9dec8d..d5035310b 100644
--- a/packages/examples-react/src/App.css
+++ b/packages/examples-react/src/App.css
@@ -165,6 +165,8 @@ body {
 .react-tabs .panel-wrapper .react-tabs__tab-panel {
   display: none;
 }
-.react-tabs .panel-wrapper .react-tabs__tab-panel.react-tabs__tab-panel--selected {
+.react-tabs
+  .panel-wrapper
+  .react-tabs__tab-panel.react-tabs__tab-panel--selected {
   display: block;
-}
\ No newline at end of file
+}
diff --git a/packages/examples/.prettierrc.js b/packages/examples/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/examples/.prettierrc.js
+++ b/packages/examples/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/examples/README.md b/packages/examples/README.md
index 51cd843ca..b3d9a435e 100644
--- a/packages/examples/README.md
+++ b/packages/examples/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
diff --git a/packages/examples/rollup.config.js b/packages/examples/rollup.config.js
index c8a7a5a26..e9f14fc97 100644
--- a/packages/examples/rollup.config.js
+++ b/packages/examples/rollup.config.js
@@ -9,8 +9,8 @@ const baseConfig = {
   external: [
     ...Object.keys(packageJson.dependencies),
     ...Object.keys(packageJson.peerDependencies),
-    /^lodash\/.*/
-  ]
+    /^lodash\/.*/,
+  ],
 };
 
 export default [
@@ -19,30 +19,30 @@ export default [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript(),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           compilerOptions: {
-            target: 'ES5'
-          }
-        }
+            target: 'ES5',
+          },
+        },
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] })
-    ]
-  }
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+    ],
+  },
 ];
diff --git a/packages/examples/tsconfig.json b/packages/examples/tsconfig.json
index e6216e859..427bc4b99 100644
--- a/packages/examples/tsconfig.json
+++ b/packages/examples/tsconfig.json
@@ -4,10 +4,6 @@
     "outDir": "lib",
     "sourceMap": true
   },
-  "exclude":[
-    "node_modules"
-  ],
-  "files": [
-    "./src/index.ts"
-  ]
+  "exclude": ["node_modules"],
+  "files": ["./src/index.ts"]
 }
diff --git a/packages/material-renderers/.prettierrc.js b/packages/material-renderers/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/material-renderers/.prettierrc.js
+++ b/packages/material-renderers/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/material-renderers/README.md b/packages/material-renderers/README.md
index 27a00985b..4f0d0d45b 100644
--- a/packages/material-renderers/README.md
+++ b/packages/material-renderers/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -24,12 +24,11 @@ npm i --save @jsonforms/core @jsonforms/react @jsonforms/material-renderers
 
 Use the `JsonForms` component for each form you want to render and hand over the renderer set.
 
-
 ```ts
 import React, { useState } from 'react';
 import {
   materialRenderers,
-  materialCells
+  materialCells,
 } from '@jsonforms/material-renderers';
 import { JsonForms } from '@jsonforms/react';
 
@@ -38,21 +37,21 @@ const schema = {
   properties: {
     name: {
       type: 'string',
-      minLength: 1
+      minLength: 1,
     },
     done: {
-      type: 'boolean'
+      type: 'boolean',
     },
     due_date: {
       type: 'string',
-      format: 'date'
+      format: 'date',
     },
     recurrence: {
       type: 'string',
-      enum: ['Never', 'Daily', 'Weekly', 'Monthly']
-    }
+      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
+    },
   },
-  required: ['name', 'due_date']
+  required: ['name', 'due_date'],
 };
 
 const uischema = {
@@ -61,26 +60,26 @@ const uischema = {
     {
       type: 'Control',
       label: false,
-      scope: '#/properties/done'
+      scope: '#/properties/done',
     },
     {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/due_date'
+          scope: '#/properties/due_date',
         },
         {
           type: 'Control',
-          scope: '#/properties/recurrence'
-        }
-      ]
-    }
-  ]
+          scope: '#/properties/recurrence',
+        },
+      ],
+    },
+  ],
 };
 
 const initialData = {};
diff --git a/packages/material-renderers/example/index.bundled.html b/packages/material-renderers/example/index.bundled.html
index 9d8f11f83..456e2fd45 100644
--- a/packages/material-renderers/example/index.bundled.html
+++ b/packages/material-renderers/example/index.bundled.html
@@ -1,16 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Forms React Material RendererSet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="bundle.css" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>JSON Forms React Material RendererSet</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="bundle.css">
-</head>
-
-<body>
-  <div id="root"></div>
-</body>
-<script src="bundle.js"></script>
-
-</html>
\ No newline at end of file
+  <body>
+    <div id="root"></div>
+  </body>
+  <script src="bundle.js"></script>
+</html>
diff --git a/packages/material-renderers/example/index.html b/packages/material-renderers/example/index.html
index c62e8101b..f1b289b56 100644
--- a/packages/material-renderers/example/index.html
+++ b/packages/material-renderers/example/index.html
@@ -1,16 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Forms React Material RendererSet</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>JSON Forms React Material RendererSet</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-</head>
-
-<body>
-  <div id="root"></div>
-</body>
-<script src="assets/bundle.js"></script>
-
-</html>
\ No newline at end of file
+  <body>
+    <div id="root"></div>
+  </body>
+  <script src="assets/bundle.js"></script>
+</html>
diff --git a/packages/material-renderers/rollup.config.js b/packages/material-renderers/rollup.config.js
index db2c9fbaf..5a782851d 100644
--- a/packages/material-renderers/rollup.config.js
+++ b/packages/material-renderers/rollup.config.js
@@ -12,8 +12,8 @@ const baseConfig = {
     'react',
     /^lodash\/.*/,
     /^@material-ui\/.*/,
-    /^dayjs\/.*/
-  ]
+    /^dayjs\/.*/,
+  ],
 };
 
 export default [
@@ -22,30 +22,30 @@ export default [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript(),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           compilerOptions: {
-            target: 'ES5'
-          }
-        }
+            target: 'ES5',
+          },
+        },
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] })
-    ]
-  }
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+    ],
+  },
 ];
diff --git a/packages/material-renderers/rollup.example.config.js b/packages/material-renderers/rollup.example.config.js
index cfe7d2adf..1cc764d06 100644
--- a/packages/material-renderers/rollup.example.config.js
+++ b/packages/material-renderers/rollup.example.config.js
@@ -8,13 +8,13 @@ import typescript from 'rollup-plugin-typescript2';
 
 /**
  * @type {import('rollup').RollupOptions}
-*/
+ */
 const config = {
   input: 'example/index.ts',
   output: {
     file: 'example/dist/bundle.js',
     format: 'iife',
-    sourcemap: true
+    sourcemap: true,
   },
   plugins: [
     replace({
@@ -30,23 +30,24 @@ const config = {
       tsconfigOverride: {
         compilerOptions: {
           // Do not emit typescript declarations for our bundled example app
-          declaration: false
-        }
-    }}),
+          declaration: false,
+        },
+      },
+    }),
     copy({
       targets: [
         {
           src: 'example/index.bundled.html',
           dest: 'example/dist',
-          rename: () => 'index.html'
+          rename: () => 'index.html',
         },
         {
           src: '../examples-react/src/logo.svg',
-          dest: 'example/dist/assets'
-        }
-      ]
+          dest: 'example/dist/assets',
+        },
+      ],
     }),
-  ]
-}
+  ],
+};
 
-export default config;
\ No newline at end of file
+export default config;
diff --git a/packages/material-renderers/tsconfig.json b/packages/material-renderers/tsconfig.json
index e6216e859..427bc4b99 100644
--- a/packages/material-renderers/tsconfig.json
+++ b/packages/material-renderers/tsconfig.json
@@ -4,10 +4,6 @@
     "outDir": "lib",
     "sourceMap": true
   },
-  "exclude":[
-    "node_modules"
-  ],
-  "files": [
-    "./src/index.ts"
-  ]
+  "exclude": ["node_modules"],
+  "files": ["./src/index.ts"]
 }
diff --git a/packages/material-renderers/webpack/webpack.dev.js b/packages/material-renderers/webpack/webpack.dev.js
index 0d5030e53..7034a58e0 100644
--- a/packages/material-renderers/webpack/webpack.dev.js
+++ b/packages/material-renderers/webpack/webpack.dev.js
@@ -1,11 +1,9 @@
 const merge = require('webpack-merge');
 const baseConfig = require('../../../webpack/webpack.dev.base.js');
-var copyWebpackPlugin = require("copy-webpack-plugin");
+var copyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = merge(baseConfig, {
-    plugins: [
-        new copyWebpackPlugin([
-            { from: '../examples-react/src/logo.svg'  },
-        ])
-    ],
-});
\ No newline at end of file
+  plugins: [
+    new copyWebpackPlugin([{ from: '../examples-react/src/logo.svg' }]),
+  ],
+});
diff --git a/packages/react/.prettierrc.js b/packages/react/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/react/.prettierrc.js
+++ b/packages/react/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/react/README.md b/packages/react/README.md
index 92d3550df..813ef51bd 100644
--- a/packages/react/README.md
+++ b/packages/react/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -20,20 +20,20 @@ Use the `JsonForms` component to render a form for your data.
 
 Mandatory props:
 
-* `data: any` - the data to show
-* `renderers: JsonFormsRendererRegistryEntry[]` - the React renderer set to use
+- `data: any` - the data to show
+- `renderers: JsonFormsRendererRegistryEntry[]` - the React renderer set to use
 
 Optional props:
 
-* `schema: JsonSchema` - the data schema for the given data. Will be generated when not given.
-* `uischema: UISchemaElement` - the UI schema for the given data schema. Will be generated when not given.
-* `cells: JsonFormsCellRendererRegistryEntry[]` - the React cell renderer set to use
-* `config: any` - form-wide options. May contain default ui schema options.
-* `readonly: boolean` - whether all controls shall be readonly.
-* `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching
-* `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form
-* `ajv: AJV` - custom Ajv instance for the form
-* `onChange` - callback which is called on each data change, containing the updated data and the validation result.
+- `schema: JsonSchema` - the data schema for the given data. Will be generated when not given.
+- `uischema: UISchemaElement` - the UI schema for the given data schema. Will be generated when not given.
+- `cells: JsonFormsCellRendererRegistryEntry[]` - the React cell renderer set to use
+- `config: any` - form-wide options. May contain default ui schema options.
+- `readonly: boolean` - whether all controls shall be readonly.
+- `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching
+- `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form
+- `ajv: AJV` - custom Ajv instance for the form
+- `onChange` - callback which is called on each data change, containing the updated data and the validation result.
 
 Example:
 
@@ -41,7 +41,7 @@ Example:
 import React, { useState } from 'react';
 import {
   materialRenderers,
-  materialCells
+  materialCells,
 } from '@jsonforms/material-renderers';
 import { JsonForms } from '@jsonforms/react';
 
@@ -50,21 +50,21 @@ const schema = {
   properties: {
     name: {
       type: 'string',
-      minLength: 1
+      minLength: 1,
     },
     done: {
-      type: 'boolean'
+      type: 'boolean',
     },
     due_date: {
       type: 'string',
-      format: 'date'
+      format: 'date',
     },
     recurrence: {
       type: 'string',
-      enum: ['Never', 'Daily', 'Weekly', 'Monthly']
-    }
+      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
+    },
   },
-  required: ['name', 'due_date']
+  required: ['name', 'due_date'],
 };
 const uischema = {
   type: 'VerticalLayout',
@@ -72,26 +72,26 @@ const uischema = {
     {
       type: 'Control',
       label: false,
-      scope: '#/properties/done'
+      scope: '#/properties/done',
     },
     {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/due_date'
+          scope: '#/properties/due_date',
         },
         {
           type: 'Control',
-          scope: '#/properties/recurrence'
-        }
-      ]
-    }
-  ]
+          scope: '#/properties/recurrence',
+        },
+      ],
+    },
+  ],
 };
 const initialData = {};
 function App() {
diff --git a/packages/react/__mocks__/react.js b/packages/react/__mocks__/react.js
index 8d9d7e154..899f4b70d 100644
--- a/packages/react/__mocks__/react.js
+++ b/packages/react/__mocks__/react.js
@@ -1,2 +1,2 @@
-const React = require('react')
-module.exports = Object.assign({}, React, { useEffect: React.useLayoutEffect })
+const React = require('react');
+module.exports = Object.assign({}, React, { useEffect: React.useLayoutEffect });
diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
index 60e110a44..55428a545 100644
--- a/packages/react/rollup.config.js
+++ b/packages/react/rollup.config.js
@@ -10,8 +10,8 @@ const baseConfig = {
   external: [
     ...Object.keys(packageJson.dependencies),
     ...Object.keys(packageJson.peerDependencies),
-    /^lodash\/.*/
-  ]
+    /^lodash\/.*/,
+  ],
 };
 
 const baseReduxConfig = {
@@ -22,8 +22,8 @@ const baseReduxConfig = {
     ...Object.keys(packageJson.optionalPeerDependencies),
     /^lodash\/.*/,
     '@jsonforms/react',
-    'redux'
-  ]
+    'redux',
+  ],
 };
 
 export default [
@@ -32,31 +32,31 @@ export default [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript(),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           compilerOptions: {
-            target: 'ES5'
-          }
-        }
+            target: 'ES5',
+          },
+        },
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] })
-    ]
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+    ],
   },
   // Redux compatibility
   {
@@ -64,40 +64,40 @@ export default [
     output: {
       file: 'lib/redux/index.js',
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       alias({
-        entries: [{ find: '..', replacement: '@jsonforms/react' }]
+        entries: [{ find: '..', replacement: '@jsonforms/react' }],
       }),
       typescript({
         tsconfig: './tsconfig.redux.json',
-        useTsconfigDeclarationDir: true
+        useTsconfigDeclarationDir: true,
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] })
-    ]
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+    ],
   },
   {
     ...baseReduxConfig,
     output: {
       file: 'lib/redux/index.cjs.js',
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       alias({
-        entries: [{ find: '..', replacement: '@jsonforms/react' }]
+        entries: [{ find: '..', replacement: '@jsonforms/react' }],
       }),
       typescript({
         tsconfig: './tsconfig.redux.json',
         useTsconfigDeclarationDir: true,
         tsconfigOverride: {
           compilerOptions: {
-            target: 'ES5'
-          }
-        }
+            target: 'ES5',
+          },
+        },
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] })
-    ]
-  }
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+    ],
+  },
 ];
diff --git a/packages/react/tsconfig.json b/packages/react/tsconfig.json
index 5b1336bd1..9af7ef8c9 100644
--- a/packages/react/tsconfig.json
+++ b/packages/react/tsconfig.json
@@ -2,12 +2,8 @@
   "extends": "../../tsconfig.base",
   "compilerOptions": {
     "outDir": "./lib",
-    "sourceMap": true,
+    "sourceMap": true
   },
-  "exclude":[
-    "node_modules"
-  ],
-  "files": [
-    "./src/index.ts"
-  ]
+  "exclude": ["node_modules"],
+  "files": ["./src/index.ts"]
 }
diff --git a/packages/react/tsconfig.redux.json b/packages/react/tsconfig.redux.json
index 0e3861ad9..16f89f7c0 100644
--- a/packages/react/tsconfig.redux.json
+++ b/packages/react/tsconfig.redux.json
@@ -3,9 +3,7 @@
   "compilerOptions": {
     "outDir": "./lib/redux",
     "declarationDir": "./lib",
-    "sourceMap": true,
+    "sourceMap": true
   },
-  "files": [
-    "./src/redux/index.ts"
-  ]
+  "files": ["./src/redux/index.ts"]
 }
diff --git a/packages/vanilla-renderers/.nycrc b/packages/vanilla-renderers/.nycrc
index 531c88241..e898fd003 100644
--- a/packages/vanilla-renderers/.nycrc
+++ b/packages/vanilla-renderers/.nycrc
@@ -1,6 +1,6 @@
 {
-   "extends": "@istanbuljs/nyc-config-typescript",
-   "lines": 80,
-   "all": true,
-   "check-coverage": true
+  "extends": "@istanbuljs/nyc-config-typescript",
+  "lines": 80,
+  "all": true,
+  "check-coverage": true
 }
diff --git a/packages/vanilla-renderers/.prettierrc.js b/packages/vanilla-renderers/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/vanilla-renderers/.prettierrc.js
+++ b/packages/vanilla-renderers/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/vanilla-renderers/README.md b/packages/vanilla-renderers/README.md
index 365e027c5..cd54db10d 100644
--- a/packages/vanilla-renderers/README.md
+++ b/packages/vanilla-renderers/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -36,21 +36,21 @@ const schema = {
   properties: {
     name: {
       type: 'string',
-      minLength: 1
+      minLength: 1,
     },
     done: {
-      type: 'boolean'
+      type: 'boolean',
     },
     due_date: {
       type: 'string',
-      format: 'date'
+      format: 'date',
     },
     recurrence: {
       type: 'string',
-      enum: ['Never', 'Daily', 'Weekly', 'Monthly']
-    }
+      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
+    },
   },
-  required: ['name', 'due_date']
+  required: ['name', 'due_date'],
 };
 const uischema = {
   type: 'VerticalLayout',
@@ -58,26 +58,26 @@ const uischema = {
     {
       type: 'Control',
       label: false,
-      scope: '#/properties/done'
+      scope: '#/properties/done',
     },
     {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/due_date'
+          scope: '#/properties/due_date',
         },
         {
           type: 'Control',
-          scope: '#/properties/recurrence'
-        }
-      ]
-    }
-  ]
+          scope: '#/properties/recurrence',
+        },
+      ],
+    },
+  ],
 };
 const initialData = {};
 function App() {
diff --git a/packages/vanilla-renderers/Styles.md b/packages/vanilla-renderers/Styles.md
index 9c3b48c38..bc91c462f 100644
--- a/packages/vanilla-renderers/Styles.md
+++ b/packages/vanilla-renderers/Styles.md
@@ -1,24 +1,39 @@
 # Style handling in the Vanilla Renderer Set
+
 ## List of all Style Ids and hardcoded classNames
+
 ### ArrayRenderer
+
 #### Hardcoded ClassNames
+
 - control
+
 #### Ids
+
 - array.layout &rightarrow; id for the whole control
 - array.button &rightarrow; id for the add button
 - array.children &rightarrow; id for the area of the children
+
 ### CategorizationRenderer
+
 #### Ids
+
 - categorization &rightarrow; id for the whole control
 - categorization.master &rightarrow; id for the master part
 - categorization.detail &rightarrow; id for the detail part
 - category.subcategories &rightarrow; id for a new list in the master
 - category.group &rightarrow; id for a categorization in the master list
+
 ### LabelRenderer
+
 #### Ids
+
 - label-control &rightarrow; id for the label
+
 ### TableArrayRenderer
+
 #### Ids
+
 - array.table &rightarrow; id for the whole control
 - array.table.table &rightarrow; id for the table
 - array.table.label &rightarrow; id for the label in the header
@@ -26,29 +41,49 @@
 - array.table.validation &rightarrow; id for the validation field
 - array.table.validation.error &rightarrow; id for the validation error field
 - array.validation.error &rightarrow; id for the validation column if activated
+
 ### GroupRenderer
+
 #### Hardcoded ClassNames
+
 - group-layout-item &rightarrow; class for a child
+
 #### Ids
+
 - group.layout &rightarrow; id for the group
 - group.label &rightarrow; id for the group label
 - group.layout.item &rightarrow; id for each wrapper of the children of the group
+
 ### HorizontalLayoutRenderer
+
 #### Hardcoded ClassNames
+
 - horizontal-layout-item &rightarrow; class for a child
+
 #### Ids
+
 - horizontal.layout &rightarrow; id for the horizontal layout
 - horizontal.layout.item &rightarrow; id for each wrapper of the children of the horizontal layout
+
 ### VerticalLayoutRenderer
+
 #### Hardcoded ClassNames
+
 - vertical-layout-item &rightarrow; class for a child
+
 #### Ids
+
 - vertical.layout &rightarrow; id for the vertical layout
 - vertical.layout.item &rightarrow; id for each wrapper of the children of the vertical layout
+
 ### Controls
+
 #### Hardcoded ClassNames
+
 - validate valid/invalid &rightarrow; id for the input of control indicating whether it is valid or not
+
 #### Ids
+
 - control &rightarrow; id for the whole control
 - control.label &rightarrow; id for the label of control
 - control.validation &rightarrow; id for the validation of control
@@ -56,6 +91,7 @@
 - input.description &rightarrow; id for the description of control
 
 ## Example of styling id contributions
+
 By default, the `vanillaStyles` defined in [src/styles/styles.ts](./src/styles/styles.ts) are applied.
 These can be overwritten via the `JsonFormsStyleContext`.
 The following example will completely replace the default styles.
diff --git a/packages/vanilla-renderers/example/example.css b/packages/vanilla-renderers/example/example.css
index 9df5ddf2e..d1e1949ca 100644
--- a/packages/vanilla-renderers/example/example.css
+++ b/packages/vanilla-renderers/example/example.css
@@ -46,46 +46,47 @@ input {
   display: inline-flex;
 }
 
-.control.trim>*:first-child {
+.control.trim > *:first-child {
   margin-right: 0;
 }
 
-.control>* {
+.control > * {
   margin-left: 0.25em;
 }
 
-.control>*:first-child {
+.control > *:first-child {
   margin-left: 0;
   margin-right: -0.25em;
 }
 
-.control>label {
+.control > label {
   font-weight: bold;
   color: var(--jsf-main-fg-color);
 }
 
-.control>.validation:empty {
+.control > .validation:empty {
   margin-left: 0;
 }
 
-.control>.input-description, .control>.validation {
+.control > .input-description,
+.control > .validation {
   font-size: 0.75rem;
   text-align: left;
   margin-top: 0.5em;
   min-height: 1em;
-  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
   line-height: 1em;
 }
 
-.control>.validation {
+.control > .validation {
   color: var(--jsf-validation-color);
 }
 
-.control>.input-description {
+.control > .input-description {
   color: var(--jsf-description-color);
 }
 
-.control>.input {
+.control > .input {
   border-style: solid;
   border-width: thin;
   border-radius: 0.2em;
@@ -94,11 +95,11 @@ input {
   color: var(--jsf-main-fg-color);
 }
 
-.control>input.input {
+.control > input.input {
   background-color: transparent;
 }
 
-.control.validation_error>.input {
+.control.validation_error > .input {
   border-color: var(--jsf-validation-color);
 }
 
@@ -117,7 +118,7 @@ input {
   display: none;
 }
 
-.vertical-layout>* {
+.vertical-layout > * {
   flex: 1;
 }
 
@@ -131,7 +132,7 @@ input {
   display: none;
 }
 
-.horizontal-layout>* {
+.horizontal-layout > * {
   flex: 1;
 }
 
@@ -148,7 +149,7 @@ input {
   display: none;
 }
 
-.group-layout>legend {
+.group-layout > legend {
   padding: 0 0.5em;
   font-weight: bold;
   color: var(--jsf-main-fg-color);
@@ -163,53 +164,53 @@ input {
   display: none;
 }
 
-.categorization>* {
+.categorization > * {
   border-style: solid;
   border-width: thin;
   border-color: var(--jsf-border-color);
   border-radius: 0.2em;
 }
 
-.categorization>*:first-child {
+.categorization > *:first-child {
   margin-right: 0.25em;
 }
 
-.categorization>.categorization-master {
+.categorization > .categorization-master {
   flex: 1;
 }
 
-.categorization>.categorization-master ul {
+.categorization > .categorization-master ul {
   list-style-type: none;
   font-weight: normal;
 }
 
-.categorization>.categorization-master ul>li>span {
+.categorization > .categorization-master ul > li > span {
   cursor: pointer;
   display: block;
   color: var(--jsf-main-fg-color);
 }
 
-.categorization>.categorization-master ul>li>span:hover {
+.categorization > .categorization-master ul > li > span:hover {
   font-weight: bold;
 }
 
-.categorization>.categorization-master ul>li.category-group>ul {
+.categorization > .categorization-master ul > li.category-group > ul {
   padding-left: 0.5em;
 }
 
-.categorization>.categorization-master ul>li.category-group>span {
+.categorization > .categorization-master ul > li.category-group > span {
   cursor: default;
 }
 
-.categorization>.categorization-master ul>li.category-group>span:hover {
+.categorization > .categorization-master ul > li.category-group > span:hover {
   font-weight: normal;
 }
 
-.categorization>.categorization-master ul>li.selected>span {
+.categorization > .categorization-master ul > li.selected > span {
   font-weight: bold;
 }
 
-.categorization>.categorization-detail {
+.categorization > .categorization-detail {
   flex: 3;
 }
 
@@ -218,19 +219,19 @@ input {
   flex-direction: column;
 }
 
-.jsf-treeMasterDetail>.jsf-treeMasterDetail-content {
+.jsf-treeMasterDetail > .jsf-treeMasterDetail-content {
   display: flex;
   flex-direction: row;
 }
 
-.jsf-treeMasterDetail>.jsf-treeMasterDetail-content>* {
+.jsf-treeMasterDetail > .jsf-treeMasterDetail-content > * {
   border-style: solid;
   border-width: thin;
   border-color: var(--jsf-border-color);
   border-radius: 0.2em;
 }
 
-.jsf-treeMasterDetail>.jsf-treeMasterDetail-content>*:first-child {
+.jsf-treeMasterDetail > .jsf-treeMasterDetail-content > *:first-child {
   margin-right: 0.25em;
 }
 
@@ -256,12 +257,12 @@ input {
   padding-left: 1.5em;
 }
 
-.jsf-treeMasterDetail-master li>div {
+.jsf-treeMasterDetail-master li > div {
   display: flex;
   flex-direction: row;
 }
 
-.jsf-treeMasterDetail-master li>div>.icon {
+.jsf-treeMasterDetail-master li > div > .icon {
   flex-basis: 1em;
   min-height: 1em;
   margin-right: 0.25em;
@@ -269,24 +270,24 @@ input {
   background-position: center;
 }
 
-.jsf-treeMasterDetail-master li>div>.icon.folder {
+.jsf-treeMasterDetail-master li > div > .icon.folder {
   background-image: url('./icons/folder.png');
 }
 
-.jsf-treeMasterDetail-master li>div>.icon.page {
+.jsf-treeMasterDetail-master li > div > .icon.page {
   background-image: url('./icons/page.png');
 }
 
-.jsf-treeMasterDetail-master li>div>.icon.drive {
+.jsf-treeMasterDetail-master li > div > .icon.drive {
   background-image: url('./icons/drive.png');
 }
 
-.jsf-treeMasterDetail-master li.selected>div>.label {
+.jsf-treeMasterDetail-master li.selected > div > .label {
   font-weight: bold;
-  background-color: lightgray
+  background-color: lightgray;
 }
 
-.jsf-treeMasterDetail-master li>div>.label {
+.jsf-treeMasterDetail-master li > div > .label {
   display: flex;
   flex: 1;
   margin-right: 1em;
@@ -296,18 +297,19 @@ input {
 
 /* TODO: Needed? */
 
-.jsf-treeMasterDetail-master li>div>.label>span:first-child:empty {
+.jsf-treeMasterDetail-master li > div > .label > span:first-child:empty {
   background: #ffff00;
   min-height: 1em;
 }
 
-.jsf-treeMasterDetail-master li>div>.label:hover {
+.jsf-treeMasterDetail-master li > div > .label:hover {
   font-weight: bold;
   cursor: pointer;
   background-color: var(--jsf-modest-bg-color);
 }
 
-.jsf-treeMasterDetail-master li>div>.label>.add, .jsf-treeMasterDetail-master li>div>.label>.remove {
+.jsf-treeMasterDetail-master li > div > .label > .add,
+.jsf-treeMasterDetail-master li > div > .label > .remove {
   display: none;
   cursor: pointer;
   margin-left: 0.25em;
@@ -315,16 +317,20 @@ input {
   font-weight: normal;
 }
 
-.jsf-treeMasterDetail-master li>div>.label:hover>.add, .jsf-treeMasterDetail-master li>div>.label:hover>.remove {
+.jsf-treeMasterDetail-master li > div > .label:hover > .add,
+.jsf-treeMasterDetail-master li > div > .label:hover > .remove {
   display: flex;
   justify-content: center;
 }
 
-.jsf-treeMasterDetail-master li>div>.label:hover>.add:hover, .jsf-treeMasterDetail-master li>div>.label:hover>.remove:hover {
+.jsf-treeMasterDetail-master li > div > .label:hover > .add:hover,
+.jsf-treeMasterDetail-master li > div > .label:hover > .remove:hover {
   background-color: var(--jsf-modest-bg-highlight-color);
 }
 
-.jsf-treeMasterDetail-master li::before, .jsf-treeMasterDetail-master li::after, .jsf-treeMasterDetail-master ul::after {
+.jsf-treeMasterDetail-master li::before,
+.jsf-treeMasterDetail-master li::after,
+.jsf-treeMasterDetail-master ul::after {
   content: '';
   position: absolute;
   left: 0.2em;
@@ -352,23 +358,23 @@ input {
   display: none;
 }
 
-.jsf-treeMasterDetail-master>ul>li::after {
+.jsf-treeMasterDetail-master > ul > li::after {
   top: 0.5em;
 }
 
-.jsf-treeMasterDetail-master>ul>li:last-child::after {
+.jsf-treeMasterDetail-master > ul > li:last-child::after {
   display: none;
 }
 
-.jsf-treeMasterDetail-master>ul>li:only-child::before {
+.jsf-treeMasterDetail-master > ul > li:only-child::before {
   display: none;
 }
 
-.jsf-treeMasterDetail-master>ul>li:only-child {
+.jsf-treeMasterDetail-master > ul > li:only-child {
   padding-left: 0.25em;
 }
 
-jsonforms-tree>dialog>.content {
+jsonforms-tree > dialog > .content {
   display: flex;
   flex-direction: column;
 }
@@ -387,36 +393,38 @@ jsonforms-tree>dialog>.content {
   display: none;
 }
 
-.array-layout>legend {
+.array-layout > legend {
   padding: 0 0.5em;
   font-weight: bold;
 }
 
-.array-layout>legend>label {
+.array-layout > legend > label {
   margin-right: 1em;
   color: var(--jsf-main-fg-color);
 }
 
-.array-layout>.children>* {
+.array-layout > .children > * {
   border-bottom: 1px solid var(--jsf-border-color);
   display: block;
 }
 
-.array-layout>.children>*:last-child {
+.array-layout > .children > *:last-child {
   border-bottom: none;
 }
 
-.array-table-layout.control>header, .array-control-layout.control>header {
+.array-table-layout.control > header,
+.array-control-layout.control > header {
   display: flex;
   margin: 0.25em;
 }
 
-.array-table-layout header label, .array-control-layout header label {
+.array-table-layout header label,
+.array-control-layout header label {
   flex: 1;
   font-weight: bold;
 }
 
-.array-control-layout.control>.children .child-controls {
+.array-control-layout.control > .children .child-controls {
   display: flex;
   justify-content: flex-end;
   margin: 0 1em 0.75em 0;
@@ -428,7 +436,7 @@ jsonforms-tree>dialog>.content {
   flex-direction: column;
 }
 
-.array-table-layout table.control>* {
+.array-table-layout table.control > * {
   margin: 0;
 }
 
@@ -436,14 +444,16 @@ jsonforms-tree>dialog>.content {
   display: flex;
 }
 
-.array-table-layout table, .array-table-layout th, .array-table-layout td {
+.array-table-layout table,
+.array-table-layout th,
+.array-table-layout td {
   border: 1px solid var(--jsf-border-color);
   border-collapse: collapse;
 }
 
 .array-table-layout th {
   padding: 5px;
-  flex: 1
+  flex: 1;
 }
 
 .array-table-layout td {
@@ -451,13 +461,10 @@ jsonforms-tree>dialog>.content {
   flex: 1;
 }
 
-.array-table-layout td>* {
+.array-table-layout td > * {
   flex: 1;
 }
-.array-control-layout .children>div {
-	border-top: 1px solid var(--jsf-border-color);
-	padding-top: 10px;
-} 
-
-
-
+.array-control-layout .children > div {
+  border-top: 1px solid var(--jsf-border-color);
+  padding-top: 10px;
+}
diff --git a/packages/vanilla-renderers/example/index.bundled.html b/packages/vanilla-renderers/example/index.bundled.html
index 725bd2629..bff34751e 100644
--- a/packages/vanilla-renderers/example/index.bundled.html
+++ b/packages/vanilla-renderers/example/index.bundled.html
@@ -1,27 +1,25 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Forms React Vanilla RendererSet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="example.css" />
+    <link rel="stylesheet" href="example.dark.css" />
+    <link rel="stylesheet" href="bundle.css" />
+    <style type="text/css">
+      #theme {
+        position: absolute;
+        color: whitesmoke;
+        top: 0.25em;
+        left: 0.25em;
+      }
+    </style>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>JSON Forms React Vanilla RendererSet</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="example.css">
-  <link rel="stylesheet" href="example.dark.css">
-  <link rel="stylesheet" href="bundle.css">
-  <style type="text/css">
-    #theme {
-      position: absolute;
-      color: whitesmoke;
-      top: 0.25em;
-      left: 0.25em;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="theme"></div>
-  <div id="root"></div>
-</body>
-<script src="bundle.js"></script>
-
-</html>
\ No newline at end of file
+  <body>
+    <div id="theme"></div>
+    <div id="root"></div>
+  </body>
+  <script src="bundle.js"></script>
+</html>
diff --git a/packages/vanilla-renderers/example/index.html b/packages/vanilla-renderers/example/index.html
index 7c3ea2683..fa43367b7 100644
--- a/packages/vanilla-renderers/example/index.html
+++ b/packages/vanilla-renderers/example/index.html
@@ -1,27 +1,25 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Forms React Vanilla RendererSet</title>
+    <base href="/" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="assets/example.css" />
+    <link rel="stylesheet" href="assets/example.dark.css" />
+    <style type="text/css">
+      #theme {
+        position: absolute;
+        color: whitesmoke;
+        top: 0.25em;
+        left: 0.25em;
+      }
+    </style>
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>JSON Forms React Vanilla RendererSet</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="assets/example.css">
-  <link rel="stylesheet" href="assets/example.dark.css">
-  <style type="text/css">
-    #theme {
-      position: absolute;
-      color: whitesmoke;
-      top: 0.25em;
-      left: 0.25em;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="theme"></div>
-  <div id="root"></div>
-</body>
-<script src="assets/bundle.js"></script>
-
-</html>
\ No newline at end of file
+  <body>
+    <div id="theme"></div>
+    <div id="root"></div>
+  </body>
+  <script src="assets/bundle.js"></script>
+</html>
diff --git a/packages/vanilla-renderers/rollup.config.js b/packages/vanilla-renderers/rollup.config.js
index 7479309a4..bb960efe4 100644
--- a/packages/vanilla-renderers/rollup.config.js
+++ b/packages/vanilla-renderers/rollup.config.js
@@ -12,8 +12,8 @@ const baseConfig = {
     'react',
     /^lodash\/.*/,
     /^@material-ui\/.*/,
-    /^dayjs\/.*/
-  ]
+    /^dayjs\/.*/,
+  ],
 };
 
 export default [
@@ -22,30 +22,30 @@ export default [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript(),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           compilerOptions: {
-            target: 'ES5'
-          }
-        }
+            target: 'ES5',
+          },
+        },
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] })
-    ]
-  }
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx'] }),
+    ],
+  },
 ];
diff --git a/packages/vanilla-renderers/rollup.example.config.js b/packages/vanilla-renderers/rollup.example.config.js
index 51b6e47c8..15c114557 100644
--- a/packages/vanilla-renderers/rollup.example.config.js
+++ b/packages/vanilla-renderers/rollup.example.config.js
@@ -8,13 +8,13 @@ import typescript from 'rollup-plugin-typescript2';
 
 /**
  * @type {import('rollup').RollupOptions}
-*/
+ */
 const config = {
   input: 'example/index.ts',
   output: {
     file: 'example/dist/bundle.js',
     format: 'iife',
-    sourcemap: true
+    sourcemap: true,
   },
   plugins: [
     replace({
@@ -30,27 +30,28 @@ const config = {
       tsconfigOverride: {
         compilerOptions: {
           // Do not emit typescript declarations for our bundled example app
-          declaration: false
-        }
-    }}),
+          declaration: false,
+        },
+      },
+    }),
     copy({
       targets: [
         {
           src: 'example/example*.css',
-          dest: 'example/dist'
+          dest: 'example/dist',
         },
         {
           src: 'example/index.bundled.html',
           dest: 'example/dist',
-          rename: () => 'index.html'
+          rename: () => 'index.html',
         },
         {
           src: '../examples-react/src/logo.svg',
-          dest: 'example/dist/assets'
-        }
-      ]
+          dest: 'example/dist/assets',
+        },
+      ],
     }),
-  ]
-}
+  ],
+};
 
-export default config;
\ No newline at end of file
+export default config;
diff --git a/packages/vanilla-renderers/tsconfig.json b/packages/vanilla-renderers/tsconfig.json
index e6216e859..427bc4b99 100644
--- a/packages/vanilla-renderers/tsconfig.json
+++ b/packages/vanilla-renderers/tsconfig.json
@@ -4,10 +4,6 @@
     "outDir": "lib",
     "sourceMap": true
   },
-  "exclude":[
-    "node_modules"
-  ],
-  "files": [
-    "./src/index.ts"
-  ]
+  "exclude": ["node_modules"],
+  "files": ["./src/index.ts"]
 }
diff --git a/packages/vanilla-renderers/webpack/webpack.dev.js b/packages/vanilla-renderers/webpack/webpack.dev.js
index ace5e5412..75b050248 100644
--- a/packages/vanilla-renderers/webpack/webpack.dev.js
+++ b/packages/vanilla-renderers/webpack/webpack.dev.js
@@ -1,13 +1,13 @@
 const merge = require('webpack-merge');
 const baseConfig = require('../../../webpack/webpack.dev.base.js');
-var copyWebpackPlugin = require("copy-webpack-plugin");
+var copyWebpackPlugin = require('copy-webpack-plugin');
 
 module.exports = merge(baseConfig, {
-    plugins: [
-        new copyWebpackPlugin([
-            { from: './example/example.css' },
-            { from: './example/example.dark.css' },
-            { from: '../examples-react/src/logo.svg'  },
-        ])
-    ],
-});
\ No newline at end of file
+  plugins: [
+    new copyWebpackPlugin([
+      { from: './example/example.css' },
+      { from: './example/example.dark.css' },
+      { from: '../examples-react/src/logo.svg' },
+    ]),
+  ],
+});
diff --git a/packages/vue/vue-vanilla/.prettierrc.js b/packages/vue/vue-vanilla/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/vue/vue-vanilla/.prettierrc.js
+++ b/packages/vue/vue-vanilla/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/vue/vue-vanilla/README.md b/packages/vue/vue-vanilla/README.md
index 12976d9f0..dce2c8997 100644
--- a/packages/vue/vue-vanilla/README.md
+++ b/packages/vue/vue-vanilla/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex Forms in the blink of an eye*
+_Complex Forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -24,8 +24,12 @@ Also add the packages to the transpile dependencies in the `vue.config.js` file:
 
 ```js
 module.exports = {
-    transpileDependencies: ['@jsonforms/core', '@jsonforms/vue2', '@jsonforms/vue2-vanilla']
-}
+  transpileDependencies: [
+    '@jsonforms/core',
+    '@jsonforms/vue2',
+    '@jsonforms/vue2-vanilla',
+  ],
+};
 ```
 
 Use the `json-forms` component for each form you want to render and hand over the renderer set.
@@ -39,42 +43,42 @@ import { defineComponent } from 'vue';
 const renderers = [
   ...vanillaRenderers,
   // here you can add custom renderers
-]
+];
 
 export default defineComponent({
   components: {
-    JsonForms
+    JsonForms,
   },
   data() {
     return {
       renderers: Object.freeze(renderers),
-      
+
       data: {
-        number: 5
+        number: 5,
       },
       schema: {
         properties: {
           number: {
-            type: 'number'
-          }
-        }
+            type: 'number',
+          },
+        },
       },
       uischema: {
         type: 'VerticalLayout',
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/number'
-          }
-        ]
-      }
+            scope: '#/properties/number',
+          },
+        ],
+      },
     };
   },
   methods: {
     onChange(event) {
       this.data = event.data;
     },
-  }
+  },
 });
 </script>
 <template>
@@ -108,39 +112,45 @@ If you want to fall back to `defaultStyles` or combine them with your own classe
 ```vue
 <script>
 import { JsonForms } from '@jsonforms/vue';
-import { defaultStyles, mergeStyles, vanillaRenderers } from '@jsonforms/vue-vanilla'
+import {
+  defaultStyles,
+  mergeStyles,
+  vanillaRenderers,
+} from '@jsonforms/vue-vanilla';
 import { defineComponent } from 'vue';
 
 // mergeStyles combines all classes from both styles definitions
-const myStyles = mergeStyles(defaultStyles, { control: { root: 'my-control' } });
+const myStyles = mergeStyles(defaultStyles, {
+  control: { root: 'my-control' },
+});
 
 export default defineComponent({
   name: 'app',
   components: {
-    JsonForms
+    JsonForms,
   },
   data() {
     return {
       renderers: Object.freeze(vanillaRenderers),
       data: {
-        number: 5
+        number: 5,
       },
       schema: {
         properties: {
           number: {
-            type: 'number'
-          }
-        }
+            type: 'number',
+          },
+        },
       },
       uischema: {
         type: 'VerticalLayout',
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/number'
-          }
-        ]
-      }
+            scope: '#/properties/number',
+          },
+        ],
+      },
     };
   },
   methods: {
@@ -150,9 +160,9 @@ export default defineComponent({
   },
   provide() {
     return {
-      styles: myStyles
-    }
-  }
+      styles: myStyles,
+    };
+  },
 });
 </script>
 <template>
diff --git a/packages/vue/vue-vanilla/babel.config.js b/packages/vue/vue-vanilla/babel.config.js
index 951215a39..493d815d0 100644
--- a/packages/vue/vue-vanilla/babel.config.js
+++ b/packages/vue/vue-vanilla/babel.config.js
@@ -6,7 +6,7 @@ module.exports = {
     process.env.NODE_ENV === 'test'
       ? [
           '@babel/plugin-proposal-optional-chaining',
-          '@babel/plugin-proposal-nullish-coalescing-operator'
+          '@babel/plugin-proposal-nullish-coalescing-operator',
         ]
-      : []
+      : [],
 };
diff --git a/packages/vue/vue-vanilla/example/index.bundled.html b/packages/vue/vue-vanilla/example/index.bundled.html
index 6f3490282..43e5e652d 100644
--- a/packages/vue/vue-vanilla/example/index.bundled.html
+++ b/packages/vue/vue-vanilla/example/index.bundled.html
@@ -1,16 +1,14 @@
-<!doctype html>
+<!DOCTYPE html>
 <html>
+  <head>
+    <meta charset="utf-8" />
+    <title>JSON Forms Vue Vanilla RendererSet</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="bundle.css" />
+  </head>
 
-<head>
-  <meta charset="utf-8">
-  <title>JSON Forms Vue Vanilla RendererSet</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="bundle.css">
-</head>
-
-<body>
-  <div id="app"></div>
-</body>
-<script src="bundle.js"></script>
-
-</html>
\ No newline at end of file
+  <body>
+    <div id="app"></div>
+  </body>
+  <script src="bundle.js"></script>
+</html>
diff --git a/packages/vue/vue-vanilla/rollup.config.js b/packages/vue/vue-vanilla/rollup.config.js
index 22f5a1e5d..7ff07e13b 100644
--- a/packages/vue/vue-vanilla/rollup.config.js
+++ b/packages/vue/vue-vanilla/rollup.config.js
@@ -12,8 +12,8 @@ const baseConfig = {
   external: [
     ...Object.keys(packageJson.dependencies),
     ...Object.keys(packageJson.peerDependencies),
-    /^lodash\/.*/
-  ]
+    /^lodash\/.*/,
+  ],
 };
 
 const buildFormats = [
@@ -22,63 +22,63 @@ const buildFormats = [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           include: null,
-          exclude: ['node_modules', 'tests', 'dev']
-        }
+          exclude: ['node_modules', 'tests', 'dev'],
+        },
       }),
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       vue({
         css: false,
         template: {
-          isProduction: true
-        }
+          isProduction: true,
+        },
       }),
       babel({
         exclude: 'node_modules/**',
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           include: null,
           exclude: ['node_modules', 'tests', 'dev'],
-          target: 'ES5'
-        }
+          target: 'ES5',
+        },
       }),
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       vue({
         css: false,
         template: {
-          isProduction: true
-        }
+          isProduction: true,
+        },
       }),
       babel({
         exclude: 'node_modules/**',
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] })
-    ]
-  }
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
+    ],
+  },
 ];
 
 export default buildFormats;
diff --git a/packages/vue/vue-vanilla/rollup.example.config.js b/packages/vue/vue-vanilla/rollup.example.config.js
index 99f88d83a..a8e1232c7 100644
--- a/packages/vue/vue-vanilla/rollup.example.config.js
+++ b/packages/vue/vue-vanilla/rollup.example.config.js
@@ -9,13 +9,13 @@ import vue from 'rollup-plugin-vue';
 
 /**
  * @type {import('rollup').RollupOptions}
-*/
+ */
 const config = {
   input: 'dev/serve.ts',
   output: {
     file: 'example/dist/bundle.js',
     format: 'iife',
-    sourcemap: true
+    sourcemap: true,
   },
   plugins: [
     replace({
@@ -33,20 +33,20 @@ const config = {
         include: null,
         compilerOptions: {
           // Do not emit typescript declarations for our bundled example app
-          declaration: false
-        }
-      }
+          declaration: false,
+        },
+      },
     }),
     copy({
       targets: [
         {
           src: 'example/index.bundled.html',
           dest: 'example/dist',
-          rename: () => 'index.html'
+          rename: () => 'index.html',
         },
-      ]
+      ],
     }),
-  ]
-}
+  ],
+};
 
-export default config;
\ No newline at end of file
+export default config;
diff --git a/packages/vue/vue-vanilla/shims-vue.d.ts b/packages/vue/vue-vanilla/shims-vue.d.ts
index 98fd0ee33..907465b24 100644
--- a/packages/vue/vue-vanilla/shims-vue.d.ts
+++ b/packages/vue/vue-vanilla/shims-vue.d.ts
@@ -1,7 +1,7 @@
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 
-  export const entry
+  export const entry;
 }
diff --git a/packages/vue/vue-vanilla/tsconfig.json b/packages/vue/vue-vanilla/tsconfig.json
index d3a527d0c..43751195e 100644
--- a/packages/vue/vue-vanilla/tsconfig.json
+++ b/packages/vue/vue-vanilla/tsconfig.json
@@ -14,7 +14,7 @@
     "sourceMap": true,
     "outDir": "./lib",
     "types": ["node", "vue", "mocha", "chai"],
-    "lib": ["esnext", "dom", "dom.iterable", "scripthost"],
+    "lib": ["esnext", "dom", "dom.iterable", "scripthost"]
   },
   "exclude": ["node_modules", "lib"]
 }
diff --git a/packages/vue/vue-vanilla/vanilla.css b/packages/vue/vue-vanilla/vanilla.css
index a301f4d26..725eb57d2 100644
--- a/packages/vue/vue-vanilla/vanilla.css
+++ b/packages/vue/vue-vanilla/vanilla.css
@@ -8,7 +8,8 @@
   flex-direction: column;
 }
 
-.horizontal-layout-item, .vertical-layout-item {
+.horizontal-layout-item,
+.vertical-layout-item {
   flex: 1;
 }
 
@@ -28,7 +29,7 @@
 .control > .wrapper > input,
 .control > .wrapper > select,
 .control > .wrapper > textarea {
-  flex: 1
+  flex: 1;
 }
 
 .control > .error,
@@ -54,11 +55,11 @@
   cursor: pointer;
 }
 .array-list-item-toolbar > button:disabled {
-  cursor:initial;
+  cursor: initial;
 }
 
 .array-list-item-label {
-  background-color: rgb(238,238,238);
+  background-color: rgb(238, 238, 238);
   flex: 1;
   padding-left: 0.5em;
   height: 1.5em;
@@ -75,4 +76,4 @@
 
 .array-list-item-content.expanded {
   display: block;
-}
\ No newline at end of file
+}
diff --git a/packages/vue/vue/.prettierrc.js b/packages/vue/vue/.prettierrc.js
index 6391982a0..2c26853c4 100644
--- a/packages/vue/vue/.prettierrc.js
+++ b/packages/vue/vue/.prettierrc.js
@@ -3,4 +3,4 @@ module.exports = {
   singleQuote: true,
   jsxSingleQuote: true,
   endOfLine: 'auto',
-}
\ No newline at end of file
+};
diff --git a/packages/vue/vue/README.md b/packages/vue/vue/README.md
index 441a14b42..3465de1c1 100644
--- a/packages/vue/vue/README.md
+++ b/packages/vue/vue/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -18,23 +18,23 @@ Use the `json-forms` component for each form you want to render.
 
 Mandatory props:
 
-* `data: any` - the data to show
-* `renderers: JsonFormsRendererRegistryEntry[]` - the Vue renderer set to use
+- `data: any` - the data to show
+- `renderers: JsonFormsRendererRegistryEntry[]` - the Vue renderer set to use
 
 Optional props:
 
-* `schema: JsonSchema` - the data schema for the given data. Will be generated when not given.
-* `uischema: UISchemaElement` - the ui schema for the given data schema. Will be generated when not given.
-* `cells: JsonFormsCellRendererRegistryEntry[]` - the Vue cell renderer set to use
-* `config: any` - form-wide options. May contain default ui schema options.
-* `readonly: boolean` - whether all controls shall be readonly.
-* `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching
-* `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form
-* `ajv: AJV` - custom Ajv instance for the form
+- `schema: JsonSchema` - the data schema for the given data. Will be generated when not given.
+- `uischema: UISchemaElement` - the ui schema for the given data schema. Will be generated when not given.
+- `cells: JsonFormsCellRendererRegistryEntry[]` - the Vue cell renderer set to use
+- `config: any` - form-wide options. May contain default ui schema options.
+- `readonly: boolean` - whether all controls shall be readonly.
+- `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching
+- `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form
+- `ajv: AJV` - custom Ajv instance for the form
 
 Events:
 
-* `change: {data: any; errors: AJVError[]}` - Whenever data and/or errors change this event is emitted.
+- `change: {data: any; errors: AJVError[]}` - Whenever data and/or errors change this event is emitted.
 
 Example:
 
@@ -51,38 +51,38 @@ Example:
 ```ts
 export default defineComponent({
   components: {
-    JsonForms
+    JsonForms,
   },
   data() {
     return {
       // freeze renderers for performance gains
       renderers: Object.freeze(renderers),
       data: {
-        number: 5
+        number: 5,
       },
       schema: {
         properties: {
           number: {
-            type: 'number'
-          }
-        }
+            type: 'number',
+          },
+        },
       },
       uischema: {
         type: 'VerticalLayout',
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/number'
-          }
-        ]
-      }
+            scope: '#/properties/number',
+          },
+        ],
+      },
     };
   },
   methods: {
     onChange(event: JsonFormsChangeEvent) {
       this.data = event.data;
-    }
-  }
+    },
+  },
 });
 ```
 
@@ -102,7 +102,7 @@ import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
 const controlRenderer = defineComponent({
   name: 'control-renderer',
   props: {
-    ...rendererProps<ControlElement>()
+    ...rendererProps<ControlElement>(),
   },
   setup(props) {
     return useJsonFormsControl(props);
@@ -113,17 +113,17 @@ const controlRenderer = defineComponent({
         this.control.path,
         (event.target as HTMLInputElement).value
       );
-    }
-  }
+    },
+  },
 });
 export default controlRenderer;
 ```
 
-* You can use the provided `rendererProps` factory which declares all props required for each renderer.
-    When using Typescript you can specify a `UISchemaElement` type to declare that you only expect UI schema elements of that type.
-* In `setup` call the appropriate binding for your renderer.
-    Here we use `useJsonFormsControl` which will work on any `Control` element and provides a `control` property containing calculated attributes like `data`, `description`, `errors`, `enabled` and many more.
-    It also provides a `handleChange(path,value)` method with which the managed data can be updated.
+- You can use the provided `rendererProps` factory which declares all props required for each renderer.
+  When using Typescript you can specify a `UISchemaElement` type to declare that you only expect UI schema elements of that type.
+- In `setup` call the appropriate binding for your renderer.
+  Here we use `useJsonFormsControl` which will work on any `Control` element and provides a `control` property containing calculated attributes like `data`, `description`, `errors`, `enabled` and many more.
+  It also provides a `handleChange(path,value)` method with which the managed data can be updated.
 
 ```html
 <div>
@@ -139,11 +139,11 @@ You can see how some of the `control` properties are bound against the input, in
 import {
   isControl,
   JsonFormsRendererRegistryEntry,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(1, isControl)
+  tester: rankWith(1, isControl),
 };
 ```
 
@@ -162,33 +162,33 @@ import {
   isLayout,
   JsonFormsRendererRegistryEntry,
   Layout,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
   DispatchRenderer,
   rendererProps,
-  useJsonFormsLayout
+  useJsonFormsLayout,
 } from '@jsonforms/vue';
 
 const layoutRenderer = defineComponent({
   name: 'layout-renderer',
   components: {
-    DispatchRenderer
+    DispatchRenderer,
   },
   props: {
-    ...rendererProps<Layout>()
+    ...rendererProps<Layout>(),
   },
   setup(props) {
     return useJsonFormsLayout(props);
-  }
+  },
 });
 
 export default layoutRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: layoutRenderer,
-  tester: rankWith(1, isLayout)
+  tester: rankWith(1, isLayout),
 };
 ```
 
@@ -223,40 +223,40 @@ These can be used to implement more advanced use cases like hierarchical enablem
 The following bindings can be used for `Control` elements and provide a `control` property and `handleChange` method.
 The `useJsonFormsArrayControl` additionally provides `addItem`, `removeItems`, `moveUp` and `moveDown` methods.
 
-* `useJsonFormsControl`
-* `useJsonFormsControlWithDetail`
-* `useJsonFormsEnumControl`
-* `useJsonFormsOneOfEnumControl`
-* `useJsonFormsArrayControl`
-* `useJsonFormsAllOfControl`
-* `useJsonFormsAnyOfControl`
-* `useJsonFormsOneOfControl`
+- `useJsonFormsControl`
+- `useJsonFormsControlWithDetail`
+- `useJsonFormsEnumControl`
+- `useJsonFormsOneOfEnumControl`
+- `useJsonFormsArrayControl`
+- `useJsonFormsAllOfControl`
+- `useJsonFormsAnyOfControl`
+- `useJsonFormsOneOfControl`
 
 The following bindings can be used for `Layout` elements and provide a `layout` property.
 `useJsonFormsArrayLayout` is a mix between `Control` and `Layout` as it's meant for showing `array` elements within a specific layout.
 
-* `useJsonFormsLayout`
-* `useJsonFormsArrayLayout`
+- `useJsonFormsLayout`
+- `useJsonFormsArrayLayout`
 
 The following binding can be used for any renderer.
 It's main use case is within dispatch renderers.
 The binding provides a `renderer` property.
 
-* `useJsonFormsRenderer`
+- `useJsonFormsRenderer`
 
 Besides `renderers` JSON Forms also supports a separate `cells` registry.
 Cells are meant to be simpler as normal renderers, rendering simplified inputs to be used within more complex structures like tables.
 The following bindings can be used for cells and provide a `cell` property and `handleChange` method.
 
-* `useJsonFormsDispatchCell`
-* `useJsonFormsCell`
-* `useJsonFormsEnumCell`
+- `useJsonFormsDispatchCell`
+- `useJsonFormsCell`
+- `useJsonFormsEnumCell`
 
 The last binding is a special one, meant to be used within lists of master-detail controls.
 In contrast to all other bindings it's not meant to be registered as an own `renderer` or `cell`.
 The binding provides an `item` propery.
 
-* `useJsonFormsMasterListItem`
+- `useJsonFormsMasterListItem`
 
 #### Custom binding
 
@@ -272,15 +272,15 @@ const useCustomBinding = (props) => {
 
   return {
     // use props, jsonforms and dispatch to construct own binding
-  }
-}
+  };
+};
 ```
 
 Of course these can also be directly injected into your components, e.g.
 
 ```ts
 const myComponent = defineComponent({
-  inject: ['jsonforms', 'dispatch']
+  inject: ['jsonforms', 'dispatch'],
 });
 ```
 
diff --git a/packages/vue/vue/babel.config.js b/packages/vue/vue/babel.config.js
index 951215a39..493d815d0 100644
--- a/packages/vue/vue/babel.config.js
+++ b/packages/vue/vue/babel.config.js
@@ -6,7 +6,7 @@ module.exports = {
     process.env.NODE_ENV === 'test'
       ? [
           '@babel/plugin-proposal-optional-chaining',
-          '@babel/plugin-proposal-nullish-coalescing-operator'
+          '@babel/plugin-proposal-nullish-coalescing-operator',
         ]
-      : []
+      : [],
 };
diff --git a/packages/vue/vue/jest.config.js b/packages/vue/vue/jest.config.js
index d4bb2299d..350fbba59 100644
--- a/packages/vue/vue/jest.config.js
+++ b/packages/vue/vue/jest.config.js
@@ -1,6 +1,6 @@
 module.exports = {
   preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
   transform: {
-    '^.+\\.vue$': 'vue-jest'
-  }
+    '^.+\\.vue$': 'vue-jest',
+  },
 };
diff --git a/packages/vue/vue/rollup.config.js b/packages/vue/vue/rollup.config.js
index e7d789e4b..7ff07e13b 100644
--- a/packages/vue/vue/rollup.config.js
+++ b/packages/vue/vue/rollup.config.js
@@ -12,8 +12,8 @@ const baseConfig = {
   external: [
     ...Object.keys(packageJson.dependencies),
     ...Object.keys(packageJson.peerDependencies),
-    /^lodash\/.*/
-  ]
+    /^lodash\/.*/,
+  ],
 };
 
 const buildFormats = [
@@ -22,63 +22,63 @@ const buildFormats = [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           include: null,
-          exclude: ['node_modules', 'tests', 'dev']
-        }
+          exclude: ['node_modules', 'tests', 'dev'],
+        },
       }),
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       vue({
         css: false,
         template: {
-          isProduction: true
-        }
+          isProduction: true,
+        },
       }),
       babel({
         exclude: 'node_modules/**',
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         tsconfigOverride: {
           include: null,
           exclude: ['node_modules', 'tests', 'dev'],
-          target: "ES5"
-        }
+          target: 'ES5',
+        },
       }),
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       vue({
         css: false,
         template: {
-          isProduction: true
-        }
+          isProduction: true,
+        },
       }),
       babel({
         exclude: 'node_modules/**',
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
-    ]
-  }
+    ],
+  },
 ];
 
 export default buildFormats;
diff --git a/packages/vue/vue/shims-vue.d.ts b/packages/vue/vue/shims-vue.d.ts
index 98fd0ee33..907465b24 100644
--- a/packages/vue/vue/shims-vue.d.ts
+++ b/packages/vue/vue/shims-vue.d.ts
@@ -1,7 +1,7 @@
 declare module '*.vue' {
-  import type { DefineComponent } from 'vue'
-  const component: DefineComponent<{}, {}, any>
-  export default component
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
 
-  export const entry
+  export const entry;
 }
diff --git a/packages/vue2/vue2-vanilla/README.md b/packages/vue2/vue2-vanilla/README.md
index ec7473142..41ee67230 100644
--- a/packages/vue2/vue2-vanilla/README.md
+++ b/packages/vue2/vue2-vanilla/README.md
@@ -1,7 +1,6 @@
-
 # JSON Forms - More Forms. Less Code
 
-*Complex Forms in the blink of an eye*
+_Complex Forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -26,8 +25,12 @@ Also add the packages to the transpile dependencies in the `vue.config.js` file:
 
 ```js
 module.exports = {
-    transpileDependencies: ['@jsonforms/core', '@jsonforms/vue2', '@jsonforms/vue2-vanilla']
-}
+  transpileDependencies: [
+    '@jsonforms/core',
+    '@jsonforms/vue2',
+    '@jsonforms/vue2-vanilla',
+  ],
+};
 ```
 
 Use the `json-forms` component for each form you want to render and hand over the renderer set.
@@ -35,34 +38,34 @@ Use the `json-forms` component for each form you want to render and hand over th
 ```vue
 <script>
 import { JsonForms } from '@jsonforms/vue2';
-import { vanillaRenderers } from '@jsonforms/vue2-vanilla'
-import { defineComponent } from "vue";
+import { vanillaRenderers } from '@jsonforms/vue2-vanilla';
+import { defineComponent } from 'vue';
 
 const renderers = [
   ...vanillaRenderers,
   // here you can add custom renderers
-]
+];
 
 const schema = {
   type: 'object',
   properties: {
     name: {
       type: 'string',
-      minLength: 1
+      minLength: 1,
     },
     done: {
-      type: 'boolean'
+      type: 'boolean',
     },
     due_date: {
       type: 'string',
-      format: 'date'
+      format: 'date',
     },
     recurrence: {
       type: 'string',
-      enum: ['Never', 'Daily', 'Weekly', 'Monthly']
-    }
+      enum: ['Never', 'Daily', 'Weekly', 'Monthly'],
+    },
   },
-  required: ['name', 'due_date']
+  required: ['name', 'due_date'],
 };
 
 const uischema = {
@@ -71,33 +74,33 @@ const uischema = {
     {
       type: 'Control',
       label: false,
-      scope: '#/properties/done'
+      scope: '#/properties/done',
     },
     {
       type: 'Control',
-      scope: '#/properties/name'
+      scope: '#/properties/name',
     },
     {
       type: 'HorizontalLayout',
       elements: [
         {
           type: 'Control',
-          scope: '#/properties/due_date'
+          scope: '#/properties/due_date',
         },
         {
           type: 'Control',
-          scope: '#/properties/recurrence'
-        }
-      ]
-    }
-  ]
+          scope: '#/properties/recurrence',
+        },
+      ],
+    },
+  ],
 };
 const data = {};
 
 export default defineComponent({
   name: 'app',
   components: {
-    JsonForms
+    JsonForms,
   },
   data() {
     return {
@@ -111,7 +114,7 @@ export default defineComponent({
     onChange(event) {
       this.data = event.data;
     },
-  }
+  },
 });
 </script>
 <template>
@@ -145,21 +148,27 @@ If you want to fall back to `defaultStyles` or combine them with your own classe
 ```vue
 <script>
 import { JsonForms } from '@jsonforms/vue2';
-import { defaultStyles, mergeStyles, vanillaRenderers } from '@jsonforms/vue2-vanilla'
-import { defineComponent } from "vue";
+import {
+  defaultStyles,
+  mergeStyles,
+  vanillaRenderers,
+} from '@jsonforms/vue2-vanilla';
+import { defineComponent } from 'vue';
 
 const renderers = [
   ...vanillaRenderers,
   // here you can add custom renderers
-]
+];
 
 // mergeStyles combines all classes from both styles definitions
-const myStyles = mergeStyles(defaultStyles, { control: { root: 'my-control' } });
+const myStyles = mergeStyles(defaultStyles, {
+  control: { root: 'my-control' },
+});
 
 export default defineComponent({
   name: 'app',
   components: {
-    JsonForms
+    JsonForms,
   },
   data() {
     return {
@@ -176,9 +185,9 @@ export default defineComponent({
   },
   provide() {
     return {
-      styles: myStyles
-    }
-  }
+      styles: myStyles,
+    };
+  },
 });
 </script>
 <template>
diff --git a/packages/vue2/vue2-vanilla/babel.config.js b/packages/vue2/vue2-vanilla/babel.config.js
index 951215a39..493d815d0 100644
--- a/packages/vue2/vue2-vanilla/babel.config.js
+++ b/packages/vue2/vue2-vanilla/babel.config.js
@@ -6,7 +6,7 @@ module.exports = {
     process.env.NODE_ENV === 'test'
       ? [
           '@babel/plugin-proposal-optional-chaining',
-          '@babel/plugin-proposal-nullish-coalescing-operator'
+          '@babel/plugin-proposal-nullish-coalescing-operator',
         ]
-      : []
+      : [],
 };
diff --git a/packages/vue2/vue2-vanilla/jest.config.js b/packages/vue2/vue2-vanilla/jest.config.js
index f9d5bfe80..beaf54d9b 100644
--- a/packages/vue2/vue2-vanilla/jest.config.js
+++ b/packages/vue2/vue2-vanilla/jest.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
 };
diff --git a/packages/vue2/vue2-vanilla/rollup.config.js b/packages/vue2/vue2-vanilla/rollup.config.js
index 89454629c..efdc0de96 100644
--- a/packages/vue2/vue2-vanilla/rollup.config.js
+++ b/packages/vue2/vue2-vanilla/rollup.config.js
@@ -12,8 +12,8 @@ const baseConfig = {
   external: [
     ...Object.keys(packageJson.dependencies),
     ...Object.keys(packageJson.peerDependencies),
-    /^lodash\/.*/
-  ]
+    /^lodash\/.*/,
+  ],
 };
 
 const buildFormats = [
@@ -22,39 +22,39 @@ const buildFormats = [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         check: false, // types are incompatible with Vue3
         tsconfigOverride: {
           include: null,
-          exclude: ['node_modules', 'tests', 'dev']
-        }
+          exclude: ['node_modules', 'tests', 'dev'],
+        },
       }),
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       vue({
         css: false,
         template: {
-          isProduction: true
-        }
+          isProduction: true,
+        },
       }),
       babel({
         exclude: 'node_modules/**',
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
@@ -62,25 +62,25 @@ const buildFormats = [
         tsconfigOverride: {
           include: null,
           exclude: ['node_modules', 'tests', 'dev'],
-          target: 'ES5'
-        }
+          target: 'ES5',
+        },
       }),
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       vue({
         css: false,
         template: {
-          isProduction: true
-        }
+          isProduction: true,
+        },
       }),
       babel({
         exclude: 'node_modules/**',
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] })
-    ]
-  }
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
+    ],
+  },
 ];
 
 export default buildFormats;
diff --git a/packages/vue2/vue2-vanilla/shims-vue.d.ts b/packages/vue2/vue2-vanilla/shims-vue.d.ts
index 0660bd67a..8f6f41026 100644
--- a/packages/vue2/vue2-vanilla/shims-vue.d.ts
+++ b/packages/vue2/vue2-vanilla/shims-vue.d.ts
@@ -1,4 +1,4 @@
-declare module "*.vue" {
-  import Vue from "vue";
+declare module '*.vue' {
+  import Vue from 'vue';
   export default Vue;
 }
diff --git a/packages/vue2/vue2-vanilla/vue.config.js b/packages/vue2/vue2-vanilla/vue.config.js
index 198678878..e06f4228a 100644
--- a/packages/vue2/vue2-vanilla/vue.config.js
+++ b/packages/vue2/vue2-vanilla/vue.config.js
@@ -1,7 +1,7 @@
 module.exports = {
-  chainWebpack: config => {
+  chainWebpack: (config) => {
     // remove typecheck
     config.plugins.delete('fork-ts-checker');
     return config;
-  }
+  },
 };
diff --git a/packages/vue2/vue2/README.md b/packages/vue2/vue2/README.md
index 37a0c9246..04f1f4bdf 100644
--- a/packages/vue2/vue2/README.md
+++ b/packages/vue2/vue2/README.md
@@ -1,6 +1,6 @@
 # JSON Forms - More Forms. Less Code
 
-*Complex forms in the blink of an eye*
+_Complex forms in the blink of an eye_
 
 JSON Forms eliminates the tedious task of writing fully-featured forms by hand by leveraging the capabilities of JSON, JSON Schema and Javascript.
 
@@ -19,23 +19,23 @@ Use the `json-forms` component for each form you want to render.
 
 Mandatory props:
 
-* `data: any` - the data to show
-* `renderers: JsonFormsRendererRegistryEntry[]` - the Vue renderer set to use
+- `data: any` - the data to show
+- `renderers: JsonFormsRendererRegistryEntry[]` - the Vue renderer set to use
 
 Optional props:
 
-* `schema: JsonSchema` - the data schema for the given data. Will be generated when not given.
-* `uischema: UISchemaElement` - the ui schema for the given data schema. Will be generated when not given.
-* `cells: JsonFormsCellRendererRegistryEntry[]` - the Vue cell renderer set to use
-* `config: any` - form-wide options. May contain default ui schema options.
-* `readonly: boolean` - whether all controls shall be readonly.
-* `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching
-* `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form
-* `ajv: AJV` - custom Ajv instance for the form
+- `schema: JsonSchema` - the data schema for the given data. Will be generated when not given.
+- `uischema: UISchemaElement` - the ui schema for the given data schema. Will be generated when not given.
+- `cells: JsonFormsCellRendererRegistryEntry[]` - the Vue cell renderer set to use
+- `config: any` - form-wide options. May contain default ui schema options.
+- `readonly: boolean` - whether all controls shall be readonly.
+- `uischemas: JsonFormsUiSchemaEntry[]` - registry for dynamic ui schema dispatching
+- `validationMode: 'ValidateAndShow' | 'ValidateAndHide' | 'NoValidation'` - the validation mode for the form
+- `ajv: AJV` - custom Ajv instance for the form
 
 Events:
 
-* `change: {data: any; errors: AJVError[]}` - Whenever data and/or errors change this event is emitted.
+- `change: {data: any; errors: AJVError[]}` - Whenever data and/or errors change this event is emitted.
 
 Example:
 
@@ -52,38 +52,38 @@ Example:
 ```ts
 export default defineComponent({
   components: {
-    JsonForms
+    JsonForms,
   },
   data() {
     return {
       // freeze renderers for performance gains
       renderers: Object.freeze(renderers),
       data: {
-        number: 5
+        number: 5,
       },
       schema: {
         properties: {
           number: {
-            type: 'number'
-          }
-        }
+            type: 'number',
+          },
+        },
       },
       uischema: {
         type: 'VerticalLayout',
         elements: [
           {
             type: 'Control',
-            scope: '#/properties/number'
-          }
-        ]
-      }
+            scope: '#/properties/number',
+          },
+        ],
+      },
     };
   },
   methods: {
     onChange(event) {
       this.data = event.data;
-    }
-  }
+    },
+  },
 });
 ```
 
@@ -103,9 +103,9 @@ import { rendererProps, useJsonFormsControl } from '@jsonforms/vue';
 const controlRenderer = defineComponent({
   name: 'control-renderer',
   props: {
-    ...rendererProps()
+    ...rendererProps(),
   },
-  setup(props:any) {
+  setup(props: any) {
     return useJsonFormsControl(props);
   },
   methods: {
@@ -114,17 +114,17 @@ const controlRenderer = defineComponent({
         this.control.path,
         (event.target as HTMLInputElement).value
       );
-    }
-  }
+    },
+  },
 });
 export default controlRenderer;
 ```
 
-* You can use the provided `rendererProps` factory which declares all props required for each renderer.
-    When using Typescript you can specify a `UISchemaElement` type to declare that you only expect UI schema elements of that type.
-* In `setup` call the appropriate binding for your renderer.
-    Here we use `useJsonFormsControl` which will work on any `Control` element and provides a `control` property containing calculated attributes like `data`, `description`, `errors`, `enabled` and many more.
-    It also provides a `handleChange(path,value)` method with which the managed data can be updated.
+- You can use the provided `rendererProps` factory which declares all props required for each renderer.
+  When using Typescript you can specify a `UISchemaElement` type to declare that you only expect UI schema elements of that type.
+- In `setup` call the appropriate binding for your renderer.
+  Here we use `useJsonFormsControl` which will work on any `Control` element and provides a `control` property containing calculated attributes like `data`, `description`, `errors`, `enabled` and many more.
+  It also provides a `handleChange(path,value)` method with which the managed data can be updated.
 
 ```html
 <div>
@@ -140,11 +140,11 @@ You can see how some of the `control` properties are bound against the input, in
 import {
   isControl,
   JsonFormsRendererRegistryEntry,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: controlRenderer,
-  tester: rankWith(1, isControl)
+  tester: rankWith(1, isControl),
 };
 ```
 
@@ -163,33 +163,33 @@ import {
   isLayout,
   JsonFormsRendererRegistryEntry,
   Layout,
-  rankWith
+  rankWith,
 } from '@jsonforms/core';
 import { defineComponent } from 'vue';
 import {
   DispatchRenderer,
   rendererProps,
-  useJsonFormsLayout
+  useJsonFormsLayout,
 } from '@jsonforms/vue';
 
 const layoutRenderer = defineComponent({
   name: 'layout-renderer',
   components: {
-    DispatchRenderer
+    DispatchRenderer,
   },
   props: {
-    ...rendererProps()
+    ...rendererProps(),
   },
-  setup(props:any) {
+  setup(props: any) {
     return useJsonFormsLayout(props);
-  }
+  },
 });
 
 export default layoutRenderer;
 
 export const entry: JsonFormsRendererRegistryEntry = {
   renderer: layoutRenderer,
-  tester: rankWith(1, isLayout)
+  tester: rankWith(1, isLayout),
 };
 ```
 
@@ -224,40 +224,40 @@ These can be used to implement more advanced use cases like hierarchical enablem
 The following bindings can be used for `Control` elements and provide a `control` property and `handleChange` method.
 The `useJsonFormsArrayControl` additionally provides `addItem`, `removeItems`, `moveUp` and `moveDown` methods.
 
-* `useJsonFormsControl`
-* `useJsonFormsControlWithDetail`
-* `useJsonFormsEnumControl`
-* `useJsonFormsOneOfEnumControl`
-* `useJsonFormsArrayControl`
-* `useJsonFormsAllOfControl`
-* `useJsonFormsAnyOfControl`
-* `useJsonFormsOneOfControl`
+- `useJsonFormsControl`
+- `useJsonFormsControlWithDetail`
+- `useJsonFormsEnumControl`
+- `useJsonFormsOneOfEnumControl`
+- `useJsonFormsArrayControl`
+- `useJsonFormsAllOfControl`
+- `useJsonFormsAnyOfControl`
+- `useJsonFormsOneOfControl`
 
 The following bindings can be used for `Layout` elements and provide a `layout` property.
 `useJsonFormsArrayLayout` is a mix between `Control` and `Layout` as it's meant for showing `array` elements within a specific layout.
 
-* `useJsonFormsLayout`
-* `useJsonFormsArrayLayout`
+- `useJsonFormsLayout`
+- `useJsonFormsArrayLayout`
 
 The following binding can be used for any renderer.
 It's main use case is within dispatch renderers.
 The binding provides a `renderer` property.
 
-* `useJsonFormsRenderer`
+- `useJsonFormsRenderer`
 
 Besides `renderers` JSON Forms also supports a separate `cells` registry.
 Cells are meant to be simpler as normal renderers, rendering simplified inputs to be used within more complex structures like tables.
 The following bindings can be used for cells and provide a `cell` property and `handleChange` method.
 
-* `useJsonFormsDispatchCell`
-* `useJsonFormsCell`
-* `useJsonFormsEnumCell`
+- `useJsonFormsDispatchCell`
+- `useJsonFormsCell`
+- `useJsonFormsEnumCell`
 
 The last binding is a special one, meant to be used within lists of master-detail controls.
 In contrast to all other bindings it's not meant to be registered as an own `renderer` or `cell`.
 The binding provides an `item` propery.
 
-* `useJsonFormsMasterListItem`
+- `useJsonFormsMasterListItem`
 
 #### Custom binding
 
@@ -273,15 +273,15 @@ const useCustomBinding = (props) => {
 
   return {
     // use props, jsonforms and dispatch to construct own binding
-  }
-}
+  };
+};
 ```
 
 Of course these can also be directly injected into your components, e.g.
 
 ```ts
 const myComponent = defineComponent({
-  inject: ['jsonforms', 'dispatch']
+  inject: ['jsonforms', 'dispatch'],
 });
 ```
 
diff --git a/packages/vue2/vue2/babel.config.js b/packages/vue2/vue2/babel.config.js
index 951215a39..493d815d0 100644
--- a/packages/vue2/vue2/babel.config.js
+++ b/packages/vue2/vue2/babel.config.js
@@ -6,7 +6,7 @@ module.exports = {
     process.env.NODE_ENV === 'test'
       ? [
           '@babel/plugin-proposal-optional-chaining',
-          '@babel/plugin-proposal-nullish-coalescing-operator'
+          '@babel/plugin-proposal-nullish-coalescing-operator',
         ]
-      : []
+      : [],
 };
diff --git a/packages/vue2/vue2/jest.config.js b/packages/vue2/vue2/jest.config.js
index f9d5bfe80..beaf54d9b 100644
--- a/packages/vue2/vue2/jest.config.js
+++ b/packages/vue2/vue2/jest.config.js
@@ -1,3 +1,3 @@
 module.exports = {
-  preset: "@vue/cli-plugin-unit-jest/presets/typescript-and-babel",
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
 };
diff --git a/packages/vue2/vue2/rollup.config.js b/packages/vue2/vue2/rollup.config.js
index 89454629c..efdc0de96 100644
--- a/packages/vue2/vue2/rollup.config.js
+++ b/packages/vue2/vue2/rollup.config.js
@@ -12,8 +12,8 @@ const baseConfig = {
   external: [
     ...Object.keys(packageJson.dependencies),
     ...Object.keys(packageJson.peerDependencies),
-    /^lodash\/.*/
-  ]
+    /^lodash\/.*/,
+  ],
 };
 
 const buildFormats = [
@@ -22,39 +22,39 @@ const buildFormats = [
     output: {
       file: packageJson.module,
       format: 'esm',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
         check: false, // types are incompatible with Vue3
         tsconfigOverride: {
           include: null,
-          exclude: ['node_modules', 'tests', 'dev']
-        }
+          exclude: ['node_modules', 'tests', 'dev'],
+        },
       }),
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       vue({
         css: false,
         template: {
-          isProduction: true
-        }
+          isProduction: true,
+        },
       }),
       babel({
         exclude: 'node_modules/**',
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
-      visualizer({ open: false })
-    ]
+      visualizer({ open: false }),
+    ],
   },
   {
     ...baseConfig,
     output: {
       file: packageJson.main,
       format: 'cjs',
-      sourcemap: true
+      sourcemap: true,
     },
     plugins: [
       typescript({
@@ -62,25 +62,25 @@ const buildFormats = [
         tsconfigOverride: {
           include: null,
           exclude: ['node_modules', 'tests', 'dev'],
-          target: 'ES5'
-        }
+          target: 'ES5',
+        },
       }),
       alias({
-        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        resolve: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
       vue({
         css: false,
         template: {
-          isProduction: true
-        }
+          isProduction: true,
+        },
       }),
       babel({
         exclude: 'node_modules/**',
-        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue']
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.vue'],
       }),
-      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] })
-    ]
-  }
+      cleanup({ extensions: ['js', 'ts', 'jsx', 'tsx', 'vue'] }),
+    ],
+  },
 ];
 
 export default buildFormats;
diff --git a/packages/vue2/vue2/shims-vue.d.ts b/packages/vue2/vue2/shims-vue.d.ts
index 0660bd67a..8f6f41026 100644
--- a/packages/vue2/vue2/shims-vue.d.ts
+++ b/packages/vue2/vue2/shims-vue.d.ts
@@ -1,4 +1,4 @@
-declare module "*.vue" {
-  import Vue from "vue";
+declare module '*.vue' {
+  import Vue from 'vue';
   export default Vue;
 }
diff --git a/packages/vue2/vue2/vue.config.js b/packages/vue2/vue2/vue.config.js
index 198678878..e06f4228a 100644
--- a/packages/vue2/vue2/vue.config.js
+++ b/packages/vue2/vue2/vue.config.js
@@ -1,7 +1,7 @@
 module.exports = {
-  chainWebpack: config => {
+  chainWebpack: (config) => {
     // remove typecheck
     config.plugins.delete('fork-ts-checker');
     return config;
-  }
+  },
 };
diff --git a/webpack/webpack.base.js b/webpack/webpack.base.js
index ce8806b7d..6ff205f88 100644
--- a/webpack/webpack.base.js
+++ b/webpack/webpack.base.js
@@ -1,55 +1,59 @@
-const path = require("path");
+const path = require('path');
 module.exports = {
-    output: {
-        path: path.resolve("./", "lib"),
-    },
+  output: {
+    path: path.resolve('./', 'lib'),
+  },
 
-    // Enable sourcemaps for debugging webpack's output.
-    devtool: "source-map",
+  // Enable sourcemaps for debugging webpack's output.
+  devtool: 'source-map',
 
-    resolve: {
-        // Add '.ts' as resolvable extensions.
-        extensions: [".ts", ".js", ".tsx"],
-    },
+  resolve: {
+    // Add '.ts' as resolvable extensions.
+    extensions: ['.ts', '.js', '.tsx'],
+  },
 
-    module: {
-        rules: [
-          { enforce: 'pre', test: /\.js$/, exclude: /node_modules/, loader: 'source-map-loader' },
+  module: {
+    rules: [
+      {
+        enforce: 'pre',
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'source-map-loader',
+      },
+      {
+        test: /\.tsx?$/, // All ts and tsx files will be process by
+        use: [
+          // first ts-loader, then babel-loader
           {
-            test: /\.tsx?$/, 						  // All ts and tsx files will be process by
-            use: [
-              // first ts-loader, then babel-loader
-              {
-                loader: 'babel-loader',
-                options: {
-                  plugins: [
-                    '@babel/plugin-proposal-optional-chaining',
-                    '@babel/plugin-proposal-nullish-coalescing-operator'
-                  ]
-                }
-              },
-              { loader: 'ts-loader'}
-            ], 
-            exclude: /node_modules/,                   // ignore node_modules
-          },
-          {
-            test: /\.jsx?$/,                          // all js and jsx files will be processed by
-            loader: 'babel-loader',                   // babel-loader
+            loader: 'babel-loader',
             options: {
               plugins: [
                 '@babel/plugin-proposal-optional-chaining',
-                '@babel/plugin-proposal-nullish-coalescing-operator'
-              ]
+                '@babel/plugin-proposal-nullish-coalescing-operator',
+              ],
             },
-            exclude: /node_modules/                  // ignore node_modules
           },
-        ]
-    },
+          { loader: 'ts-loader' },
+        ],
+        exclude: /node_modules/, // ignore node_modules
+      },
+      {
+        test: /\.jsx?$/, // all js and jsx files will be processed by
+        loader: 'babel-loader', // babel-loader
+        options: {
+          plugins: [
+            '@babel/plugin-proposal-optional-chaining',
+            '@babel/plugin-proposal-nullish-coalescing-operator',
+          ],
+        },
+        exclude: /node_modules/, // ignore node_modules
+      },
+    ],
+  },
 
-    // When importing a module whose path matches one of the following, just
-    // assume a corresponding global variable exists and use that instead.
-    // This is important because it allows us to avoid bundling all of our
-    // dependencies, which allows browsers to cache those libraries between builds.
-    externals: {
-    },
+  // When importing a module whose path matches one of the following, just
+  // assume a corresponding global variable exists and use that instead.
+  // This is important because it allows us to avoid bundling all of our
+  // dependencies, which allows browsers to cache those libraries between builds.
+  externals: {},
 };
diff --git a/webpack/webpack.dev.base.js b/webpack/webpack.dev.base.js
index d6df12f87..f25a39dc2 100644
--- a/webpack/webpack.dev.base.js
+++ b/webpack/webpack.dev.base.js
@@ -3,29 +3,31 @@ const merge = require('webpack-merge');
 const baseConfig = require('./webpack.base.js');
 
 module.exports = merge(baseConfig, {
-    mode: 'development',
-    entry: [
-        'webpack-dev-server/client?http://localhost:8080',
-        'webpack/hot/dev-server',
-        './src/index.ts',
-        '../examples/src/index.ts',
-        './example/index.ts'
-    ],
-    output: {
-        publicPath: "/assets/",
-        filename: "bundle.js"
-    },
+  mode: 'development',
+  entry: [
+    'webpack-dev-server/client?http://localhost:8080',
+    'webpack/hot/dev-server',
+    './src/index.ts',
+    '../examples/src/index.ts',
+    './example/index.ts',
+  ],
+  output: {
+    publicPath: '/assets/',
+    filename: 'bundle.js',
+  },
 
-    devServer: {
-        contentBase: './example'
-    },
-    plugins: [
-        new webpack.HotModuleReplacementPlugin(),
+  devServer: {
+    contentBase: './example',
+  },
+  plugins: [new webpack.HotModuleReplacementPlugin()],
+  module: {
+    rules: [
+      {
+        test: /\.html$/,
+        exclude: /node_modules/,
+        loader: 'html-loader?exportAsEs6Default',
+      },
+      { test: /\.css$/, use: ['style-loader', 'css-loader'] },
     ],
-    module: {
-        rules: [
-            { test: /\.html$/, exclude: /node_modules/, loader: 'html-loader?exportAsEs6Default' },
-            { test: /\.css$/, use: ['style-loader', 'css-loader'] }
-        ]
-    },
+  },
 });

From 437feda3bb04bb562d8419aea3f9e3eee4e7b8e2 Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Fri, 21 Apr 2023 11:18:00 +0200
Subject: [PATCH 14/17] Fix ESLint issues

Fix remaining ESLint issues with these exceptions that will be handled in a follow up
- import/no-named-as-default in vanilla-renderers, material-renderers
- no-prototype-builtins
- @typescript-eslint/no-explicit-any
- typescript-eslint/ban-types

Part of #1551
---
 .../src/controls/autocomplete.renderer.ts     |  12 +-
 .../src/other/label.renderer.ts               |   7 +-
 .../src/other/master-detail/master.ts         |   6 +-
 .../src/other/table.renderer.ts               |   4 +-
 .../test/autocomplete-control.spec.ts         |   2 +-
 packages/angular/src/abstract-control.ts      |   3 +-
 .../angular/src/jsonforms-root.component.ts   |   6 +-
 packages/core/src/actions/actions.ts          |  50 ++--
 packages/core/src/generators/Generate.ts      |   2 +
 packages/core/src/generators/schema.ts        |   4 +
 packages/core/src/generators/uischema.ts      |   3 +-
 packages/core/src/reducers/uischemas.ts       |   3 +-
 packages/core/src/util/cell.ts                |   6 +-
 packages/core/src/util/renderer.ts            |   6 +-
 packages/core/test/util/cell.test.ts          |   5 +-
 packages/examples-react/src/App.tsx           |  16 +-
 .../src/examples/additional-errors.ts         |   4 +-
 packages/examples/src/examples/dates.ts       |   6 +-
 .../examples/src/examples/generate-dynamic.ts |   2 +-
 packages/examples/src/examples/i18n.ts        |   2 +
 .../examples/list-with-detail-primitives.ts   |  12 +-
 .../examples/list-with-detail-registered.ts   |   6 +-
 .../examples/src/examples/list-with-detail.ts |   8 +-
 .../src/examples/nestedCategorization.ts      |   1 -
 packages/examples/src/examples/radioGroup.ts  |   6 +-
 .../src/complex/CombinatorProperties.tsx      |   2 +
 .../src/complex/DeleteDialog.tsx              |  72 +++---
 .../src/complex/MaterialEnumArrayRenderer.tsx |   2 +-
 .../src/complex/MaterialTableControl.tsx      |  90 +++----
 .../src/complex/TableToolbar.tsx              |  26 +-
 .../src/layouts/ArrayToolbar.tsx              |  72 +++---
 .../src/layouts/ExpandPanelRenderer.tsx       |  12 +-
 .../src/layouts/MaterialGroupLayout.tsx       |  50 ++--
 .../src/mui-controls/MuiCheckbox.tsx          |  62 ++---
 .../src/mui-controls/MuiInputInteger.tsx      |  64 +++--
 .../src/mui-controls/MuiInputNumber.tsx       |   4 +-
 .../src/mui-controls/MuiInputNumberFormat.tsx | 100 ++++----
 .../src/mui-controls/MuiInputText.tsx         | 172 +++++++------
 .../src/mui-controls/MuiInputTime.tsx         |   4 +-
 .../src/mui-controls/MuiSelect.tsx            |  93 ++++---
 .../src/mui-controls/MuiToggle.tsx            |  60 ++---
 .../material-renderers/src/util/layout.tsx    |   9 +-
 .../renderers/MaterialNativeControl.test.tsx  |   1 +
 .../renderers/MaterialTextControl.test.tsx    |   5 +-
 packages/react/src/JsonForms.tsx              |  88 ++++---
 packages/react/src/JsonFormsContext.tsx       | 226 +++++++++++-------
 packages/react/src/Renderer.tsx               |   4 +
 packages/react/src/UnknownRenderer.tsx        |   3 +-
 .../react/test/renderers/JsonForms.test.tsx   |  14 +-
 .../src/controls/RadioGroup.tsx               |   3 +-
 .../src/layouts/GroupLayout.tsx               |  66 +++--
 .../src/layouts/HorizontalLayout.tsx          |  74 +++---
 .../src/layouts/VerticalLayout.tsx            |  68 +++---
 packages/vanilla-renderers/src/util/index.tsx |  43 ++--
 .../vue/vue-vanilla/dev/components/App.vue    |   1 +
 .../src/controls/ControlWrapper.vue           |   2 +-
 .../vue/vue-vanilla/src/util/composition.ts   |   2 +-
 .../tests/unit/util/TestComponent.vue         |   1 +
 packages/vue/vue/dev/components/App.vue       |   2 +-
 .../vue/vue/dev/renderers/LayoutRenderer.vue  |   2 +-
 packages/vue/vue/src/components/JsonForms.vue |   2 +
 packages/vue/vue/src/jsonFormsCompositions.ts |   8 +-
 62 files changed, 880 insertions(+), 811 deletions(-)

diff --git a/packages/angular-material/src/controls/autocomplete.renderer.ts b/packages/angular-material/src/controls/autocomplete.renderer.ts
index 23d3e0ef9..3af32412a 100644
--- a/packages/angular-material/src/controls/autocomplete.renderer.ts
+++ b/packages/angular-material/src/controls/autocomplete.renderer.ts
@@ -22,7 +22,12 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnInit,
+} from '@angular/core';
 import type { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { JsonFormsAngularService, JsonFormsControl } from '@jsonforms/angular';
 import {
@@ -96,7 +101,10 @@ import { map, startWith } from 'rxjs/operators';
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AutocompleteControlRenderer extends JsonFormsControl {
+export class AutocompleteControlRenderer
+  extends JsonFormsControl
+  implements OnInit
+{
   @Input() options: string[];
   filteredOptions: Observable<string[]>;
   shouldFilter: boolean;
diff --git a/packages/angular-material/src/other/label.renderer.ts b/packages/angular-material/src/other/label.renderer.ts
index 3bbf50451..e5ff352b3 100644
--- a/packages/angular-material/src/other/label.renderer.ts
+++ b/packages/angular-material/src/other/label.renderer.ts
@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import { Component } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
   JsonFormsAngularService,
   JsonFormsBaseRenderer,
@@ -42,7 +42,10 @@ import { Subscription } from 'rxjs';
   selector: 'LabelRenderer',
   template: ` <label class="mat-title" fxFlex> {{ label }} </label> `,
 })
-export class LabelRenderer extends JsonFormsBaseRenderer<LabelElement> {
+export class LabelRenderer
+  extends JsonFormsBaseRenderer<LabelElement>
+  implements OnDestroy, OnInit
+{
   label: string;
   visible: boolean;
 
diff --git a/packages/angular-material/src/other/master-detail/master.ts b/packages/angular-material/src/other/master-detail/master.ts
index 0f3802dd7..8b8f58b3d 100644
--- a/packages/angular-material/src/other/master-detail/master.ts
+++ b/packages/angular-material/src/other/master-detail/master.ts
@@ -28,6 +28,7 @@ import {
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
+  OnInit,
 } from '@angular/core';
 import {
   JsonFormsAngularService,
@@ -146,7 +147,10 @@ export const removeSchemaKeywords = (path: string) => {
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class MasterListComponent extends JsonFormsArrayControl {
+export class MasterListComponent
+  extends JsonFormsArrayControl
+  implements OnInit
+{
   masterItems: any[];
   selectedItem: any;
   selectedItemIdx: number;
diff --git a/packages/angular-material/src/other/table.renderer.ts b/packages/angular-material/src/other/table.renderer.ts
index 94072d0f1..7cdcdb991 100644
--- a/packages/angular-material/src/other/table.renderer.ts
+++ b/packages/angular-material/src/other/table.renderer.ts
@@ -23,7 +23,7 @@
   THE SOFTWARE.
 */
 import startCase from 'lodash/startCase';
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import {
   JsonFormsAngularService,
   JsonFormsArrayControl,
@@ -137,7 +137,7 @@ import {
   `,
   styles: ['table {width: 100%;}', '.cdk-column-action { width: 15%}'],
 })
-export class TableRenderer extends JsonFormsArrayControl {
+export class TableRenderer extends JsonFormsArrayControl implements OnInit {
   detailUiSchema: UISchemaElement;
   displayedColumns: string[];
   items: ColumnDescription[];
diff --git a/packages/angular-material/test/autocomplete-control.spec.ts b/packages/angular-material/test/autocomplete-control.spec.ts
index 7a6a8b00f..d014878d0 100644
--- a/packages/angular-material/test/autocomplete-control.spec.ts
+++ b/packages/angular-material/test/autocomplete-control.spec.ts
@@ -233,7 +233,7 @@ describe('AutoComplete control Input Event Tests', () => {
     fixture = TestBed.createComponent(componentUT);
     component = fixture.componentInstance;
     zone = TestBed.inject(NgZone);
-    spyOn(zone, 'runOutsideAngular').and.callFake((fn: Function) => fn());
+    spyOn(zone, 'runOutsideAngular').and.callFake((fn: () => any) => fn());
     inputElement = fixture.debugElement.query(By.css('input')).nativeElement;
   });
 
diff --git a/packages/angular/src/abstract-control.ts b/packages/angular/src/abstract-control.ts
index ab5263591..1052c21b8 100644
--- a/packages/angular/src/abstract-control.ts
+++ b/packages/angular/src/abstract-control.ts
@@ -140,8 +140,7 @@ export abstract class JsonFormsAbstractControl<
     return this.error ? { error: this.error } : null;
   };
 
-  // @ts-ignore
-  mapAdditionalProps(props: Props) {
+  mapAdditionalProps(_props: Props) {
     // do nothing by default
   }
 
diff --git a/packages/angular/src/jsonforms-root.component.ts b/packages/angular/src/jsonforms-root.component.ts
index 92d9aa5b1..2172a3573 100644
--- a/packages/angular/src/jsonforms-root.component.ts
+++ b/packages/angular/src/jsonforms-root.component.ts
@@ -24,6 +24,7 @@
 */
 import {
   Component,
+  DoCheck,
   EventEmitter,
   Input,
   OnChanges,
@@ -42,12 +43,15 @@ import {
 } from '@jsonforms/core';
 import Ajv, { ErrorObject } from 'ajv';
 import { JsonFormsAngularService, USE_STATE_VALUE } from './jsonforms.service';
+
+// TODO Can this be rewritten to not use DoCheck and OnChanges?
+/* eslint-disable @angular-eslint/no-conflicting-lifecycle */
 @Component({
   selector: 'jsonforms',
   template: '<jsonforms-outlet></jsonforms-outlet>',
   providers: [JsonFormsAngularService],
 })
-export class JsonForms implements OnChanges, OnInit {
+export class JsonForms implements DoCheck, OnChanges, OnInit {
   @Input() uischema: UISchemaElement;
   @Input() schema: JsonSchema;
   @Input() data: any;
diff --git a/packages/core/src/actions/actions.ts b/packages/core/src/actions/actions.ts
index 7061e51b4..c167dba19 100644
--- a/packages/core/src/actions/actions.ts
+++ b/packages/core/src/actions/actions.ts
@@ -32,33 +32,29 @@ import type { RankedTester } from '../testers';
 import type { UISchemaTester, ValidationMode } from '../reducers';
 import type { ErrorTranslator, Translator } from '../i18n';
 
-export const INIT: 'jsonforms/INIT' = 'jsonforms/INIT';
-export const UPDATE_CORE: 'jsonforms/UPDATE_CORE' = `jsonforms/UPDATE_CORE`;
-export const SET_AJV: 'jsonforms/SET_AJV' = 'jsonforms/SET_AJV';
-export const UPDATE_DATA: 'jsonforms/UPDATE' = 'jsonforms/UPDATE';
-export const UPDATE_ERRORS: 'jsonforms/UPDATE_ERRORS' =
-  'jsonforms/UPDATE_ERRORS';
-export const VALIDATE: 'jsonforms/VALIDATE' = 'jsonforms/VALIDATE';
-export const ADD_RENDERER: 'jsonforms/ADD_RENDERER' = 'jsonforms/ADD_RENDERER';
-export const REMOVE_RENDERER: 'jsonforms/REMOVE_RENDERER' =
-  'jsonforms/REMOVE_RENDERER';
-export const ADD_CELL: 'jsonforms/ADD_CELL' = 'jsonforms/ADD_CELL';
-export const REMOVE_CELL: 'jsonforms/REMOVE_CELL' = 'jsonforms/REMOVE_CELL';
-export const SET_CONFIG: 'jsonforms/SET_CONFIG' = 'jsonforms/SET_CONFIG';
-export const ADD_UI_SCHEMA: 'jsonforms/ADD_UI_SCHEMA' = `jsonforms/ADD_UI_SCHEMA`;
-export const REMOVE_UI_SCHEMA: 'jsonforms/REMOVE_UI_SCHEMA' = `jsonforms/REMOVE_UI_SCHEMA`;
-export const SET_SCHEMA: 'jsonforms/SET_SCHEMA' = `jsonforms/SET_SCHEMA`;
-export const SET_UISCHEMA: 'jsonforms/SET_UISCHEMA' = `jsonforms/SET_UISCHEMA`;
-export const SET_VALIDATION_MODE: 'jsonforms/SET_VALIDATION_MODE' =
-  'jsonforms/SET_VALIDATION_MODE';
-
-export const SET_LOCALE: 'jsonforms/SET_LOCALE' = `jsonforms/SET_LOCALE`;
-export const SET_TRANSLATOR: 'jsonforms/SET_TRANSLATOR' =
-  'jsonforms/SET_TRANSLATOR';
-export const UPDATE_I18N: 'jsonforms/UPDATE_I18N' = 'jsonforms/UPDATE_I18N';
-
-export const ADD_DEFAULT_DATA: 'jsonforms/ADD_DEFAULT_DATA' = `jsonforms/ADD_DEFAULT_DATA`;
-export const REMOVE_DEFAULT_DATA: 'jsonforms/REMOVE_DEFAULT_DATA' = `jsonforms/REMOVE_DEFAULT_DATA`;
+export const INIT = 'jsonforms/INIT' as const;
+export const UPDATE_CORE = 'jsonforms/UPDATE_CORE' as const;
+export const SET_AJV = 'jsonforms/SET_AJV' as const;
+export const UPDATE_DATA = 'jsonforms/UPDATE' as const;
+export const UPDATE_ERRORS = 'jsonforms/UPDATE_ERRORS' as const;
+export const VALIDATE = 'jsonforms/VALIDATE' as const;
+export const ADD_RENDERER = 'jsonforms/ADD_RENDERER' as const;
+export const REMOVE_RENDERER = 'jsonforms/REMOVE_RENDERER' as const;
+export const ADD_CELL = 'jsonforms/ADD_CELL' as const;
+export const REMOVE_CELL = 'jsonforms/REMOVE_CELL' as const;
+export const SET_CONFIG = 'jsonforms/SET_CONFIG' as const;
+export const ADD_UI_SCHEMA = 'jsonforms/ADD_UI_SCHEMA' as const;
+export const REMOVE_UI_SCHEMA = 'jsonforms/REMOVE_UI_SCHEMA' as const;
+export const SET_SCHEMA = 'jsonforms/SET_SCHEMA' as const;
+export const SET_UISCHEMA = 'jsonforms/SET_UISCHEMA' as const;
+export const SET_VALIDATION_MODE = 'jsonforms/SET_VALIDATION_MODE' as const;
+
+export const SET_LOCALE = 'jsonforms/SET_LOCALE' as const;
+export const SET_TRANSLATOR = 'jsonforms/SET_TRANSLATOR' as const;
+export const UPDATE_I18N = 'jsonforms/UPDATE_I18N' as const;
+
+export const ADD_DEFAULT_DATA = 'jsonforms/ADD_DEFAULT_DATA' as const;
+export const REMOVE_DEFAULT_DATA = 'jsonforms/REMOVE_DEFAULT_DATA' as const;
 
 export type CoreActions =
   | InitAction
diff --git a/packages/core/src/generators/Generate.ts b/packages/core/src/generators/Generate.ts
index 0be6af566..25a63d500 100644
--- a/packages/core/src/generators/Generate.ts
+++ b/packages/core/src/generators/Generate.ts
@@ -28,6 +28,8 @@ import { createControlElement, generateDefaultUISchema } from './uischema';
 import type { ControlElement, JsonSchema, UISchemaElement } from '../';
 
 export const Generate: {
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
   jsonSchema(instance: Object, options?: any): JsonSchema;
   uiSchema(
     jsonSchema: JsonSchema,
diff --git a/packages/core/src/generators/schema.ts b/packages/core/src/generators/schema.ts
index efafb87ea..ddbf85add 100644
--- a/packages/core/src/generators/schema.ts
+++ b/packages/core/src/generators/schema.ts
@@ -52,6 +52,8 @@ class Gen {
     private findOption: (props: Properties) => (optionName: string) => any
   ) {}
 
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
   schemaObject = (data: Object): JsonSchema4 => {
     const props: Properties = this.properties(data);
     const schema: JsonSchema4 = {
@@ -143,6 +145,8 @@ class Gen {
  * @returns {JsonSchema} the generated schema
  */
 export const generateJsonSchema = (
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
   instance: Object,
   options: any = {}
 ): JsonSchema4 => {
diff --git a/packages/core/src/generators/uischema.ts b/packages/core/src/generators/uischema.ts
index 336e3ab7c..10dea9fbc 100644
--- a/packages/core/src/generators/uischema.ts
+++ b/packages/core/src/generators/uischema.ts
@@ -191,11 +191,12 @@ const generateUISchema = (
     /* falls through */
     case 'integer':
     /* falls through */
-    case 'boolean':
+    case 'boolean': {
       const controlObject: ControlElement = createControlElement(currentRef);
       schemaElements.push(controlObject);
 
       return controlObject;
+    }
     default:
       throw new Error('Unknown type: ' + JSON.stringify(jsonSchema));
   }
diff --git a/packages/core/src/reducers/uischemas.ts b/packages/core/src/reducers/uischemas.ts
index 37c3f2c8c..442eed7ad 100644
--- a/packages/core/src/reducers/uischemas.ts
+++ b/packages/core/src/reducers/uischemas.ts
@@ -50,10 +50,11 @@ export const uischemaRegistryReducer: Reducer<
       return state
         .slice()
         .concat({ tester: action.tester, uischema: action.uischema });
-    case REMOVE_UI_SCHEMA:
+    case REMOVE_UI_SCHEMA: {
       const copy = state.slice();
       remove(copy, (entry) => entry.tester === action.tester);
       return copy;
+    }
     default:
       return state;
   }
diff --git a/packages/core/src/util/cell.ts b/packages/core/src/util/cell.ts
index 32e194aa5..75869a090 100644
--- a/packages/core/src/util/cell.ts
+++ b/packages/core/src/util/cell.ts
@@ -26,7 +26,6 @@
 import isEmpty from 'lodash/isEmpty';
 import {
   getErrorTranslator,
-  JsonFormsCellRendererRegistryEntry,
   getAjv,
   getConfig,
   getData,
@@ -34,6 +33,7 @@ import {
   getSchema,
   getTranslator,
 } from '../reducers';
+import type { JsonFormsCellRendererRegistryEntry } from '../reducers';
 import type { AnyAction, Dispatch } from './type';
 import { Resolve } from './util';
 import { isInherentlyEnabled, isVisible } from './runtime';
@@ -51,8 +51,6 @@ import { getCombinedErrorMessage, getI18nKeyPrefix } from '../i18n';
 import type { JsonFormsState } from '../store';
 import type { JsonSchema } from '../models';
 
-export type { JsonFormsCellRendererRegistryEntry };
-
 export interface OwnPropsOfCell extends OwnPropsOfControl {
   data?: any;
 }
@@ -176,7 +174,7 @@ export const mapStateToDispatchCellProps = (
   ownProps: OwnPropsOfCell
 ): DispatchCellStateProps => {
   const props: StatePropsOfCell = mapStateToCellProps(state, ownProps);
-  const { renderers, cells, ...otherOwnProps } = ownProps;
+  const { renderers: _renderers, cells, ...otherOwnProps } = ownProps;
   return {
     ...props,
     ...otherOwnProps,
diff --git a/packages/core/src/util/renderer.ts b/packages/core/src/util/renderer.ts
index 7abb5fe89..e16b2a9c7 100644
--- a/packages/core/src/util/renderer.ts
+++ b/packages/core/src/util/renderer.ts
@@ -34,8 +34,6 @@ import {
 import find from 'lodash/find';
 import {
   getUISchemas,
-  JsonFormsCellRendererRegistryEntry,
-  JsonFormsRendererRegistryEntry,
   getAjv,
   getCells,
   getConfig,
@@ -47,6 +45,10 @@ import {
   getSubErrorsAt,
   getTranslator,
   getUiSchema,
+} from '../reducers';
+import type {
+  JsonFormsCellRendererRegistryEntry,
+  JsonFormsRendererRegistryEntry,
   JsonFormsUISchemaRegistryEntry,
 } from '../reducers';
 import type { RankedTester } from '../testers';
diff --git a/packages/core/test/util/cell.test.ts b/packages/core/test/util/cell.test.ts
index 621c22d44..71abafc1d 100644
--- a/packages/core/test/util/cell.test.ts
+++ b/packages/core/test/util/cell.test.ts
@@ -282,6 +282,9 @@ test('mapStateToCellProps - translated error', (t) => {
     path: 'firstName',
   };
   const state = createState(coreUISchema);
+  if (state.jsonforms.core === undefined) {
+    fail('Failed to create jsonforms core state');
+  }
   const schema = state.jsonforms.core?.schema as JsonSchema;
   const data = state.jsonforms.core?.data as any;
   // mark firstName as required, delete the value from data, then get errors from ajv from the compiled schema
@@ -289,7 +292,7 @@ test('mapStateToCellProps - translated error', (t) => {
   delete data.firstName;
   const ajv = createAjv();
   const v = ajv.compile(schema);
-  state.jsonforms.core!.errors = validate(v, data);
+  state.jsonforms.core.errors = validate(v, data);
   // add a mock i18n state to verify that the error gets translated
   state.jsonforms.i18n = {
     translateError: (error) => `i18n-error:${error.keyword}`,
diff --git a/packages/examples-react/src/App.tsx b/packages/examples-react/src/App.tsx
index 891a5f873..d34d2c31c 100644
--- a/packages/examples-react/src/App.tsx
+++ b/packages/examples-react/src/App.tsx
@@ -75,17 +75,17 @@ const App = ({ examples, cells, renderers }: AppProps) => {
   );
   const [currentIndex, setIndex] = useState<number>(0);
   const [dataAsString, setDataAsString] = useState<any>('');
-  const [props, setProps] = useState<any>(
+  const [exampleProps, setExampleProps] = useState(
     getProps(currentExample, cells, renderers)
   );
   const [showPanel, setShowPanel] = useState<boolean>(true);
   const schemaAsString = useMemo(
-    () => JSON.stringify(props.schema, null, 2),
-    [props.schema]
+    () => JSON.stringify(exampleProps.schema, null, 2),
+    [exampleProps.schema]
   );
   const uiSchemaAsString = useMemo(
-    () => JSON.stringify(props.uischema, null, 2),
-    [props.uischema]
+    () => JSON.stringify(exampleProps.uischema, null, 2),
+    [exampleProps.uischema]
   );
 
   const actions: Action[] = currentExample.actions;
@@ -104,7 +104,7 @@ const App = ({ examples, cells, renderers }: AppProps) => {
     const example = examples[exampleID];
     setIndex(exampleID);
     setExample(example);
-    setProps(getProps(example, cells, renderers));
+    setExampleProps(getProps(example, cells, renderers));
     window.location.hash = example.name;
     if (example.name == 'huge') {
       setShowPanel(false);
@@ -181,7 +181,7 @@ const App = ({ examples, cells, renderers }: AppProps) => {
                   <button
                     className='action-button'
                     onClick={() =>
-                      setProps((oldProps: JsonFormsInitStateProps) =>
+                      setExampleProps((oldProps: JsonFormsInitStateProps) =>
                         action.apply(oldProps)
                       )
                     }
@@ -194,7 +194,7 @@ const App = ({ examples, cells, renderers }: AppProps) => {
               <div className='demo'>
                 <JsonForms
                   key={currentIndex}
-                  {...props}
+                  {...exampleProps}
                   onChange={({ data }) => changeData(data)}
                 />
               </div>
diff --git a/packages/examples/src/examples/additional-errors.ts b/packages/examples/src/examples/additional-errors.ts
index 14f9537a9..4b158715a 100644
--- a/packages/examples/src/examples/additional-errors.ts
+++ b/packages/examples/src/examples/additional-errors.ts
@@ -27,9 +27,9 @@ import { StateProps } from '../example';
 import { registerExamples } from '../register';
 import { schema, uischema, data } from './person';
 
-const additionalErrors: ErrorObject[] = [];
+export const additionalErrors: ErrorObject[] = [];
 
-const actions = [
+export const actions = [
   {
     label: 'Add additional error',
     apply: (props: StateProps) => {
diff --git a/packages/examples/src/examples/dates.ts b/packages/examples/src/examples/dates.ts
index c878cf12d..6bebcfdb2 100644
--- a/packages/examples/src/examples/dates.ts
+++ b/packages/examples/src/examples/dates.ts
@@ -24,7 +24,7 @@
 */
 import { registerExamples } from '../register';
 
-const schema = {
+export const schema = {
   type: 'object',
   properties: {
     schemaBased: {
@@ -66,7 +66,7 @@ const schema = {
     },
   },
 };
-const uischema = {
+export const uischema = {
   type: 'VerticalLayout',
   elements: [
     {
@@ -126,7 +126,7 @@ const uischema = {
   ],
 };
 
-const data = {
+export const data = {
   schemaBased: {
     date: new Date().toISOString().substr(0, 10),
     time: '13:37',
diff --git a/packages/examples/src/examples/generate-dynamic.ts b/packages/examples/src/examples/generate-dynamic.ts
index a0db02723..ada9b3f3c 100644
--- a/packages/examples/src/examples/generate-dynamic.ts
+++ b/packages/examples/src/examples/generate-dynamic.ts
@@ -25,7 +25,7 @@
 import { StateProps } from '../example';
 import { registerExamples } from '../register';
 
-const actions = [
+export const actions = [
   {
     label: 'Change data',
     apply: (props: StateProps) => {
diff --git a/packages/examples/src/examples/i18n.ts b/packages/examples/src/examples/i18n.ts
index 7f891c262..52c43a46d 100644
--- a/packages/examples/src/examples/i18n.ts
+++ b/packages/examples/src/examples/i18n.ts
@@ -32,6 +32,8 @@ import {
   Translator,
 } from '@jsonforms/core';
 import get from 'lodash/get';
+// TODO change import when types are available for ajv-i18n (from v4.x)
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const localize = require('ajv-i18n');
 
 export const onChange =
diff --git a/packages/examples/src/examples/list-with-detail-primitives.ts b/packages/examples/src/examples/list-with-detail-primitives.ts
index 720ce1482..cad936d53 100644
--- a/packages/examples/src/examples/list-with-detail-primitives.ts
+++ b/packages/examples/src/examples/list-with-detail-primitives.ts
@@ -24,10 +24,10 @@
 */
 import { registerExamples } from '../register';
 
-const data = {
+export const data = {
   'an-array-of-strings': ['foo', 'bar', 'foobar'],
 };
-const schema = {
+export const schema = {
   type: 'object',
   properties: {
     'an-array-of-strings': {
@@ -38,7 +38,7 @@ const schema = {
     },
   },
 };
-const uischema = {
+export const uischema = {
   type: 'ListWithDetail',
   scope: '#/properties/an-array-of-strings',
 };
@@ -53,10 +53,10 @@ registerExamples([
   },
 ]);
 
-const data_number = {
+export const data_number = {
   'an-array-of-numbers': [1, 2, 3],
 };
-const schema_number = {
+export const schema_number = {
   type: 'object',
   properties: {
     'an-array-of-numbers': {
@@ -67,7 +67,7 @@ const schema_number = {
     },
   },
 };
-const uischema_number = {
+export const uischema_number = {
   type: 'ListWithDetail',
   scope: '#/properties/an-array-of-numbers',
 };
diff --git a/packages/examples/src/examples/list-with-detail-registered.ts b/packages/examples/src/examples/list-with-detail-registered.ts
index c06fbe1ef..8cc6928ea 100644
--- a/packages/examples/src/examples/list-with-detail-registered.ts
+++ b/packages/examples/src/examples/list-with-detail-registered.ts
@@ -24,7 +24,7 @@
 */
 import { registerExamples } from '../register';
 
-const data = {
+export const data = {
   warehouseitems: [
     {
       name: 'Fantasy Book',
@@ -53,7 +53,7 @@ const data = {
   ],
 };
 
-const schema = {
+export const schema = {
   definitions: {
     warehouseitem: {
       type: 'object',
@@ -85,7 +85,7 @@ const schema = {
   },
 };
 
-const uischema = {
+export const uischema = {
   type: 'ListWithDetail',
   scope: '#/properties/warehouseitems',
   options: {
diff --git a/packages/examples/src/examples/list-with-detail.ts b/packages/examples/src/examples/list-with-detail.ts
index 1ffd5d90d..a4c9415bb 100644
--- a/packages/examples/src/examples/list-with-detail.ts
+++ b/packages/examples/src/examples/list-with-detail.ts
@@ -24,7 +24,7 @@
 */
 import { registerExamples } from '../register';
 
-const data = {
+export const data = {
   orders: [
     {
       customer: {
@@ -54,7 +54,7 @@ const data = {
   ],
 };
 
-const schema = {
+export const schema = {
   definitions: {
     order: {
       type: 'object',
@@ -105,7 +105,7 @@ const schema = {
   },
 };
 
-const uischema = {
+export const uischema = {
   type: 'ListWithDetail',
   scope: '#/properties/orders',
   options: {
@@ -195,7 +195,7 @@ const uischema = {
   },
 };
 
-const uischemaNoLabelRef = {
+export const uischemaNoLabelRef = {
   type: 'ListWithDetail',
   scope: '#/properties/orders',
   options: {
diff --git a/packages/examples/src/examples/nestedCategorization.ts b/packages/examples/src/examples/nestedCategorization.ts
index 45b1f7689..03c7e5e53 100644
--- a/packages/examples/src/examples/nestedCategorization.ts
+++ b/packages/examples/src/examples/nestedCategorization.ts
@@ -118,7 +118,6 @@ export const uischema = {
         },
       ],
     },
-    ,
     {
       type: 'Category',
       label: 'Cat3',
diff --git a/packages/examples/src/examples/radioGroup.ts b/packages/examples/src/examples/radioGroup.ts
index 0da69fceb..1c777cb3d 100644
--- a/packages/examples/src/examples/radioGroup.ts
+++ b/packages/examples/src/examples/radioGroup.ts
@@ -24,9 +24,9 @@
 */
 import { registerExamples } from '../register';
 
-const data = {};
+export const data = {};
 
-const schema = {
+export const schema = {
   type: 'object',
   properties: {
     exampleRadioEnum: {
@@ -43,7 +43,7 @@ const schema = {
     },
   },
 };
-const uischema = {
+export const uischema = {
   type: 'VerticalLayout',
   elements: [
     {
diff --git a/packages/material-renderers/src/complex/CombinatorProperties.tsx b/packages/material-renderers/src/complex/CombinatorProperties.tsx
index 90443dfd7..c74c3c7fd 100644
--- a/packages/material-renderers/src/complex/CombinatorProperties.tsx
+++ b/packages/material-renderers/src/complex/CombinatorProperties.tsx
@@ -38,6 +38,8 @@ export const isLayout = (uischema: UISchemaElement): uischema is Layout =>
 
 export class CombinatorProperties extends React.Component<
   CombinatorPropertiesProps,
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
   {}
 > {
   render() {
diff --git a/packages/material-renderers/src/complex/DeleteDialog.tsx b/packages/material-renderers/src/complex/DeleteDialog.tsx
index 65c3c7fa9..23d16a3ae 100644
--- a/packages/material-renderers/src/complex/DeleteDialog.tsx
+++ b/packages/material-renderers/src/complex/DeleteDialog.tsx
@@ -47,40 +47,38 @@ export interface WithDeleteDialogSupport {
   openDeleteDialog(path: string, data: number): void;
 }
 
-export const DeleteDialog = React.memo(
-  ({
-    open,
-    onClose,
-    onConfirm,
-    onCancel,
-    title,
-    message,
-    acceptText,
-    declineText,
-  }: DeleteDialogProps) => {
-    return (
-      <Dialog
-        open={open}
-        keepMounted
-        onClose={onClose}
-        aria-labelledby='alert-dialog-confirmdelete-title'
-        aria-describedby='alert-dialog-confirmdelete-description'
-      >
-        <DialogTitle id='alert-dialog-confirmdelete-title'>{title}</DialogTitle>
-        <DialogContent>
-          <DialogContentText id='alert-dialog-confirmdelete-description'>
-            {message}
-          </DialogContentText>
-        </DialogContent>
-        <DialogActions>
-          <Button onClick={onCancel} color='primary'>
-            {declineText}
-          </Button>
-          <Button onClick={onConfirm} color='primary'>
-            {acceptText}
-          </Button>
-        </DialogActions>
-      </Dialog>
-    );
-  }
-);
+export const DeleteDialog = React.memo(function DeleteDialog({
+  open,
+  onClose,
+  onConfirm,
+  onCancel,
+  title,
+  message,
+  acceptText,
+  declineText,
+}: DeleteDialogProps) {
+  return (
+    <Dialog
+      open={open}
+      keepMounted
+      onClose={onClose}
+      aria-labelledby='alert-dialog-confirmdelete-title'
+      aria-describedby='alert-dialog-confirmdelete-description'
+    >
+      <DialogTitle id='alert-dialog-confirmdelete-title'>{title}</DialogTitle>
+      <DialogContent>
+        <DialogContentText id='alert-dialog-confirmdelete-description'>
+          {message}
+        </DialogContentText>
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel} color='primary'>
+          {declineText}
+        </Button>
+        <Button onClick={onConfirm} color='primary'>
+          {acceptText}
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+});
diff --git a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
index 63a55176f..d42120ea3 100644
--- a/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialEnumArrayRenderer.tsx
@@ -34,7 +34,7 @@ export const MaterialEnumArrayRenderer = ({
   data,
   addItem,
   removeItem,
-  handleChange,
+  handleChange: _handleChange,
   ...otherProps
 }: ControlProps & OwnPropsOfEnum & DispatchPropsOfMultiEnumControl) => {
   return (
diff --git a/packages/material-renderers/src/complex/MaterialTableControl.tsx b/packages/material-renderers/src/complex/MaterialTableControl.tsx
index 4fe04a604..a4c097103 100644
--- a/packages/material-renderers/src/complex/MaterialTableControl.tsx
+++ b/packages/material-renderers/src/complex/MaterialTableControl.tsx
@@ -148,9 +148,11 @@ interface TableHeaderCellProps {
   title: string;
 }
 
-const TableHeaderCell = React.memo(({ title }: TableHeaderCellProps) => (
-  <TableCell>{title}</TableCell>
-));
+const TableHeaderCell = React.memo(function TableHeaderCell({
+  title,
+}: TableHeaderCellProps) {
+  return <TableCell>{title}</TableCell>;
+});
 
 interface NonEmptyCellProps extends OwnPropsOfNonEmptyCell {
   rootSchema: JsonSchema;
@@ -212,48 +214,46 @@ interface NonEmptyCellComponentProps {
   cells?: JsonFormsCellRendererRegistryEntry[];
   isValid: boolean;
 }
-const NonEmptyCellComponent = React.memo(
-  ({
-    path,
-    propName,
-    schema,
-    rootSchema,
-    errors,
-    enabled,
-    renderers,
-    cells,
-    isValid,
-  }: NonEmptyCellComponentProps) => {
-    return (
-      <NoBorderTableCell>
-        {schema.properties ? (
-          <DispatchCell
-            schema={Resolve.schema(
-              schema,
-              `#/properties/${encode(propName)}`,
-              rootSchema
-            )}
-            uischema={controlWithoutLabel(`#/properties/${encode(propName)}`)}
-            path={path}
-            enabled={enabled}
-            renderers={renderers}
-            cells={cells}
-          />
-        ) : (
-          <DispatchCell
-            schema={schema}
-            uischema={controlWithoutLabel('#')}
-            path={path}
-            enabled={enabled}
-            renderers={renderers}
-            cells={cells}
-          />
-        )}
-        <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
-      </NoBorderTableCell>
-    );
-  }
-);
+const NonEmptyCellComponent = React.memo(function NonEmptyCellComponent({
+  path,
+  propName,
+  schema,
+  rootSchema,
+  errors,
+  enabled,
+  renderers,
+  cells,
+  isValid,
+}: NonEmptyCellComponentProps) {
+  return (
+    <NoBorderTableCell>
+      {schema.properties ? (
+        <DispatchCell
+          schema={Resolve.schema(
+            schema,
+            `#/properties/${encode(propName)}`,
+            rootSchema
+          )}
+          uischema={controlWithoutLabel(`#/properties/${encode(propName)}`)}
+          path={path}
+          enabled={enabled}
+          renderers={renderers}
+          cells={cells}
+        />
+      ) : (
+        <DispatchCell
+          schema={schema}
+          uischema={controlWithoutLabel('#')}
+          path={path}
+          enabled={enabled}
+          renderers={renderers}
+          cells={cells}
+        />
+      )}
+      <FormHelperText error={!isValid}>{!isValid && errors}</FormHelperText>
+    </NoBorderTableCell>
+  );
+});
 
 const NonEmptyCell = (ownProps: OwnPropsOfNonEmptyCell) => {
   const ctx = useJsonForms();
diff --git a/packages/material-renderers/src/complex/TableToolbar.tsx b/packages/material-renderers/src/complex/TableToolbar.tsx
index a248e7279..04dc67f31 100644
--- a/packages/material-renderers/src/complex/TableToolbar.tsx
+++ b/packages/material-renderers/src/complex/TableToolbar.tsx
@@ -52,17 +52,17 @@ const fixedCellSmall = {
   paddingRight: 0,
 };
 
-const TableToolbar = React.memo(
-  ({
-    numColumns,
-    errors,
-    label,
-    path,
-    addItem,
-    schema,
-    enabled,
-    translations,
-  }: MaterialTableToolbarProps) => (
+const TableToolbar = React.memo(function TableToolbar({
+  numColumns,
+  errors,
+  label,
+  path,
+  addItem,
+  schema,
+  enabled,
+  translations,
+}: MaterialTableToolbarProps) {
+  return (
     <TableRow>
       <NoBorderTableCell colSpan={numColumns}>
         <Grid
@@ -104,7 +104,7 @@ const TableToolbar = React.memo(
         </NoBorderTableCell>
       ) : null}
     </TableRow>
-  )
-);
+  );
+});
 
 export default TableToolbar;
diff --git a/packages/material-renderers/src/layouts/ArrayToolbar.tsx b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
index bedd6ae3a..9969c55d0 100644
--- a/packages/material-renderers/src/layouts/ArrayToolbar.tsx
+++ b/packages/material-renderers/src/layouts/ArrayToolbar.tsx
@@ -11,47 +11,45 @@ export interface ArrayLayoutToolbarProps {
   createDefault(): any;
   translations: ArrayTranslations;
 }
-export const ArrayLayoutToolbar = React.memo(
-  ({
-    label,
-    errors,
-    addItem,
-    path,
-    createDefault,
-    translations,
-  }: ArrayLayoutToolbarProps) => {
-    return (
-      <Toolbar disableGutters={true}>
-        <Grid container alignItems='center' justifyContent='space-between'>
+export const ArrayLayoutToolbar = React.memo(function ArrayLayoutToolbar({
+  label,
+  errors,
+  addItem,
+  path,
+  createDefault,
+  translations,
+}: ArrayLayoutToolbarProps) {
+  return (
+    <Toolbar disableGutters={true}>
+      <Grid container alignItems='center' justifyContent='space-between'>
+        <Grid item>
+          <Typography variant={'h6'}>{label}</Typography>
+        </Grid>
+        {errors.length !== 0 && (
           <Grid item>
-            <Typography variant={'h6'}>{label}</Typography>
+            <ValidationIcon id='tooltip-validation' errorMessages={errors} />
           </Grid>
-          {errors.length !== 0 && (
+        )}
+        <Grid item>
+          <Grid container>
             <Grid item>
-              <ValidationIcon id='tooltip-validation' errorMessages={errors} />
-            </Grid>
-          )}
-          <Grid item>
-            <Grid container>
-              <Grid item>
-                <Tooltip
-                  id='tooltip-add'
-                  title={translations.addTooltip}
-                  placement='bottom'
+              <Tooltip
+                id='tooltip-add'
+                title={translations.addTooltip}
+                placement='bottom'
+              >
+                <IconButton
+                  aria-label={translations.addAriaLabel}
+                  onClick={addItem(path, createDefault())}
+                  size='large'
                 >
-                  <IconButton
-                    aria-label={translations.addAriaLabel}
-                    onClick={addItem(path, createDefault())}
-                    size='large'
-                  >
-                    <AddIcon />
-                  </IconButton>
-                </Tooltip>
-              </Grid>
+                  <AddIcon />
+                </IconButton>
+              </Tooltip>
             </Grid>
           </Grid>
         </Grid>
-      </Toolbar>
-    );
-  }
-);
+      </Grid>
+    </Toolbar>
+  );
+});
diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
index d7c982dc6..aa5092037 100644
--- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -284,11 +284,13 @@ export const ctxDispatchToExpandPanelProps: (
  * @param ownProps any own props
  * @returns {StatePropsOfControl} state props for a control
  */
-export const withContextToExpandPanelProps =
-  (
-    Component: ComponentType<ExpandPanelProps>
-  ): ComponentType<OwnPropsOfExpandPanel> =>
-  ({ ctx, props }: JsonFormsStateContext & ExpandPanelProps) => {
+export const withContextToExpandPanelProps = (
+  Component: ComponentType<ExpandPanelProps>
+): ComponentType<OwnPropsOfExpandPanel> =>
+  function WithContextToExpandPanelProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & ExpandPanelProps) {
     const dispatchProps = ctxDispatchToExpandPanelProps(ctx.dispatch);
     const { childLabelProp, schema, path, index, uischemas } = props;
     const childPath = composePaths(path, `${index}`);
diff --git a/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx b/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
index 1ebc1bac0..66a3bdce2 100644
--- a/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
+++ b/packages/material-renderers/src/layouts/MaterialGroupLayout.tsx
@@ -42,32 +42,30 @@ import { withJsonFormsLayoutProps } from '@jsonforms/react';
 export const groupTester: RankedTester = rankWith(1, uiTypeIs('Group'));
 const style: { [x: string]: any } = { marginBottom: '10px' };
 
-const GroupComponent = React.memo(
-  ({
-    visible,
-    enabled,
-    uischema,
-    label,
-    ...props
-  }: MaterialLabelableLayoutRendererProps) => {
-    const groupLayout = uischema as GroupLayout;
-    return (
-      <Hidden xsUp={!visible}>
-        <Card style={style}>
-          {!isEmpty(label) && <CardHeader title={label} />}
-          <CardContent>
-            <MaterialLayoutRenderer
-              {...props}
-              visible={visible}
-              enabled={enabled}
-              elements={groupLayout.elements}
-            />
-          </CardContent>
-        </Card>
-      </Hidden>
-    );
-  }
-);
+const GroupComponent = React.memo(function GroupComponent({
+  visible,
+  enabled,
+  uischema,
+  label,
+  ...props
+}: MaterialLabelableLayoutRendererProps) {
+  const groupLayout = uischema as GroupLayout;
+  return (
+    <Hidden xsUp={!visible}>
+      <Card style={style}>
+        {!isEmpty(label) && <CardHeader title={label} />}
+        <CardContent>
+          <MaterialLayoutRenderer
+            {...props}
+            visible={visible}
+            enabled={enabled}
+            elements={groupLayout.elements}
+          />
+        </CardContent>
+      </Card>
+    </Hidden>
+  );
+});
 
 export const MaterializedGroupLayoutRenderer = ({
   uischema,
diff --git a/packages/material-renderers/src/mui-controls/MuiCheckbox.tsx b/packages/material-renderers/src/mui-controls/MuiCheckbox.tsx
index c3d7048d7..529790b31 100644
--- a/packages/material-renderers/src/mui-controls/MuiCheckbox.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiCheckbox.tsx
@@ -31,35 +31,35 @@ interface MuiCheckboxInputProps {
   inputProps?: InputProps['inputProps'];
 }
 
-export const MuiCheckbox = React.memo(
-  (props: CellProps & WithClassname & MuiCheckboxInputProps) => {
-    const {
-      data,
-      className,
-      id,
-      enabled,
-      uischema,
-      path,
-      handleChange,
-      config,
-      inputProps,
-    } = props;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const inputPropsMerged = merge({}, inputProps, {
-      autoFocus: !!appliedUiSchemaOptions.focus,
-    });
-    // !! causes undefined value to be converted to false, otherwise has no effect
-    const checked = !!data;
+export const MuiCheckbox = React.memo(function MuiCheckbox(
+  props: CellProps & WithClassname & MuiCheckboxInputProps
+) {
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    uischema,
+    path,
+    handleChange,
+    config,
+    inputProps,
+  } = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const inputPropsMerged = merge({}, inputProps, {
+    autoFocus: !!appliedUiSchemaOptions.focus,
+  });
+  // !! causes undefined value to be converted to false, otherwise has no effect
+  const checked = !!data;
 
-    return (
-      <Checkbox
-        checked={checked}
-        onChange={(_ev, isChecked) => handleChange(path, isChecked)}
-        className={className}
-        id={id}
-        disabled={!enabled}
-        inputProps={inputPropsMerged}
-      />
-    );
-  }
-);
+  return (
+    <Checkbox
+      checked={checked}
+      onChange={(_ev, isChecked) => handleChange(path, isChecked)}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      inputProps={inputPropsMerged}
+    />
+  );
+});
diff --git a/packages/material-renderers/src/mui-controls/MuiInputInteger.tsx b/packages/material-renderers/src/mui-controls/MuiInputInteger.tsx
index c973c207c..971aced1d 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputInteger.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputInteger.tsx
@@ -32,42 +32,34 @@ const toNumber = (value: string) =>
   value === '' ? undefined : parseInt(value, 10);
 const eventToValue = (ev: any) => toNumber(ev.target.value);
 
-export const MuiInputInteger = React.memo(
-  (props: CellProps & WithClassname) => {
-    const {
-      data,
-      className,
-      id,
-      enabled,
-      uischema,
-      path,
-      handleChange,
-      config,
-    } = props;
-    const inputProps = { step: '1' };
+export const MuiInputInteger = React.memo(function MuiInputInteger(
+  props: CellProps & WithClassname
+) {
+  const { data, className, id, enabled, uischema, path, handleChange, config } =
+    props;
+  const inputProps = { step: '1' };
 
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
 
-    const [inputValue, onChange] = useDebouncedChange(
-      handleChange,
-      '',
-      data,
-      path,
-      eventToValue
-    );
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
 
-    return (
-      <Input
-        type='number'
-        value={inputValue}
-        onChange={onChange}
-        className={className}
-        id={id}
-        disabled={!enabled}
-        autoFocus={appliedUiSchemaOptions.focus}
-        inputProps={inputProps}
-        fullWidth={true}
-      />
-    );
-  }
-);
+  return (
+    <Input
+      type='number'
+      value={inputValue}
+      onChange={onChange}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      autoFocus={appliedUiSchemaOptions.focus}
+      inputProps={inputProps}
+      fullWidth={true}
+    />
+  );
+});
diff --git a/packages/material-renderers/src/mui-controls/MuiInputNumber.tsx b/packages/material-renderers/src/mui-controls/MuiInputNumber.tsx
index cf7bd8500..f0ad1ebf0 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputNumber.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputNumber.tsx
@@ -31,7 +31,9 @@ import { useDebouncedChange } from '../util';
 const toNumber = (value: string) =>
   value === '' ? undefined : parseFloat(value);
 const eventToValue = (ev: any) => toNumber(ev.target.value);
-export const MuiInputNumber = React.memo((props: CellProps & WithClassname) => {
+export const MuiInputNumber = React.memo(function MuiInputNumber(
+  props: CellProps & WithClassname
+) {
   const { data, className, id, enabled, uischema, path, handleChange, config } =
     props;
   const inputProps = { step: '0.1' };
diff --git a/packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx b/packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx
index 59daae324..a4a5eb39b 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputNumberFormat.tsx
@@ -28,55 +28,55 @@ import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
-export const MuiInputNumberFormat = React.memo(
-  (props: CellProps & WithClassname & Formatted<number>) => {
-    const {
-      className,
-      id,
-      enabled,
-      uischema,
-      isValid,
-      path,
-      handleChange,
-      schema,
-      config,
-    } = props;
-    const maxLength = schema.maxLength;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    let inputProps;
-    if (appliedUiSchemaOptions.restrict) {
-      inputProps = { maxLength: maxLength };
-    } else {
-      inputProps = {};
-    }
-    const formattedNumber = props.toFormatted(props.data);
+export const MuiInputNumberFormat = React.memo(function MuiInputNumberFormat(
+  props: CellProps & WithClassname & Formatted<number>
+) {
+  const {
+    className,
+    id,
+    enabled,
+    uischema,
+    isValid,
+    path,
+    handleChange,
+    schema,
+    config,
+  } = props;
+  const maxLength = schema.maxLength;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  let inputProps;
+  if (appliedUiSchemaOptions.restrict) {
+    inputProps = { maxLength: maxLength };
+  } else {
+    inputProps = {};
+  }
+  const formattedNumber = props.toFormatted(props.data);
 
-    const validStringNumber = useCallback(
-      (ev: any) => props.fromFormatted(ev.currentTarget.value),
-      [props.fromFormatted]
-    );
-    const [inputValue, onChange] = useDebouncedChange(
-      handleChange,
-      '',
-      formattedNumber,
-      path,
-      validStringNumber
-    );
+  const validStringNumber = useCallback(
+    (ev: any) => props.fromFormatted(ev.currentTarget.value),
+    [props.fromFormatted]
+  );
+  const [inputValue, onChange] = useDebouncedChange(
+    handleChange,
+    '',
+    formattedNumber,
+    path,
+    validStringNumber
+  );
 
-    return (
-      <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 (
+    <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}
+    />
+  );
+});
diff --git a/packages/material-renderers/src/mui-controls/MuiInputText.tsx b/packages/material-renderers/src/mui-controls/MuiInputText.tsx
index e9c3c2618..4bae190a2 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputText.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputText.tsx
@@ -44,97 +44,95 @@ interface MuiTextInputProps {
 const eventToValue = (ev: any) =>
   ev.target.value === '' ? undefined : ev.target.value;
 
-export const MuiInputText = React.memo(
-  (props: CellProps & WithClassname & MuiTextInputProps) => {
-    const [showAdornment, setShowAdornment] = useState(false);
-    const {
-      data,
-      config,
-      className,
-      id,
-      enabled,
-      uischema,
-      isValid,
-      path,
-      handleChange,
-      schema,
-      muiInputProps,
-      inputComponent,
-    } = props;
-    const maxLength = schema.maxLength;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    let inputProps: InputBaseComponentProps;
-    if (appliedUiSchemaOptions.restrict) {
-      inputProps = { maxLength: maxLength };
-    } else {
-      inputProps = {};
-    }
+export const MuiInputText = React.memo(function MuiInputText(
+  props: CellProps & WithClassname & MuiTextInputProps
+) {
+  const [showAdornment, setShowAdornment] = useState(false);
+  const {
+    data,
+    config,
+    className,
+    id,
+    enabled,
+    uischema,
+    isValid,
+    path,
+    handleChange,
+    schema,
+    muiInputProps,
+    inputComponent,
+  } = props;
+  const maxLength = schema.maxLength;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  let inputProps: InputBaseComponentProps;
+  if (appliedUiSchemaOptions.restrict) {
+    inputProps = { maxLength: maxLength };
+  } else {
+    inputProps = {};
+  }
 
-    inputProps = merge(inputProps, muiInputProps);
+  inputProps = merge(inputProps, muiInputProps);
 
-    if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
-      inputProps.size = maxLength;
-    }
+  if (appliedUiSchemaOptions.trim && maxLength !== undefined) {
+    inputProps.size = maxLength;
+  }
 
-    const [inputText, onChange, onClear] = useDebouncedChange(
-      handleChange,
-      '',
-      data,
-      path,
-      eventToValue
-    );
-    const onPointerEnter = () => setShowAdornment(true);
-    const onPointerLeave = () => setShowAdornment(false);
+  const [inputText, onChange, onClear] = useDebouncedChange(
+    handleChange,
+    '',
+    data,
+    path,
+    eventToValue
+  );
+  const onPointerEnter = () => setShowAdornment(true);
+  const onPointerLeave = () => setShowAdornment(false);
 
-    const theme: JsonFormsTheme = useTheme();
+  const theme: JsonFormsTheme = useTheme();
 
-    const closeStyle = {
-      background:
-        theme.jsonforms?.input?.delete?.background ||
-        theme.palette.background.default,
-      borderRadius: '50%',
-    };
+  const closeStyle = {
+    background:
+      theme.jsonforms?.input?.delete?.background ||
+      theme.palette.background.default,
+    borderRadius: '50%',
+  };
 
-    return (
-      <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={
-          <InputAdornment
-            position='end'
-            style={{
-              display:
-                !showAdornment || !enabled || data === undefined
-                  ? 'none'
-                  : 'flex',
-              position: 'absolute',
-              right: 0,
-            }}
+  return (
+    <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={
+        <InputAdornment
+          position='end'
+          style={{
+            display:
+              !showAdornment || !enabled || data === undefined
+                ? 'none'
+                : 'flex',
+            position: 'absolute',
+            right: 0,
+          }}
+        >
+          <IconButton
+            aria-label='Clear input field'
+            onClick={onClear}
+            size='large'
           >
-            <IconButton
-              aria-label='Clear input field'
-              onClick={onClear}
-              size='large'
-            >
-              <Close style={closeStyle} />
-            </IconButton>
-          </InputAdornment>
-        }
-        inputComponent={inputComponent}
-      />
-    );
-  }
-);
+            <Close style={closeStyle} />
+          </IconButton>
+        </InputAdornment>
+      }
+      inputComponent={inputComponent}
+    />
+  );
+});
diff --git a/packages/material-renderers/src/mui-controls/MuiInputTime.tsx b/packages/material-renderers/src/mui-controls/MuiInputTime.tsx
index d75401fe5..49718bdfe 100644
--- a/packages/material-renderers/src/mui-controls/MuiInputTime.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiInputTime.tsx
@@ -28,7 +28,9 @@ import { Input } from '@mui/material';
 import merge from 'lodash/merge';
 import { useDebouncedChange } from '../util';
 
-export const MuiInputTime = React.memo((props: CellProps & WithClassname) => {
+export const MuiInputTime = React.memo(function MuiInputTime(
+  props: CellProps & WithClassname
+) {
   const { data, className, id, enabled, uischema, path, handleChange, config } =
     props;
   const appliedUiSchemaOptions = merge({}, config, uischema.options);
diff --git a/packages/material-renderers/src/mui-controls/MuiSelect.tsx b/packages/material-renderers/src/mui-controls/MuiSelect.tsx
index 9549143cd..ae6e2a023 100644
--- a/packages/material-renderers/src/mui-controls/MuiSelect.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiSelect.tsx
@@ -30,51 +30,50 @@ import merge from 'lodash/merge';
 import { TranslateProps } from '@jsonforms/react';
 import { i18nDefaults } from '../util';
 
-export const MuiSelect = React.memo(
-  (props: EnumCellProps & WithClassname & TranslateProps) => {
-    const {
-      data,
-      className,
-      id,
-      enabled,
-      schema,
-      uischema,
-      path,
-      handleChange,
-      options,
-      config,
-      t,
-    } = props;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const noneOptionLabel = useMemo(
-      () =>
-        t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
-      [t, schema, uischema, path]
-    );
+export const MuiSelect = React.memo(function MuiSelect(
+  props: EnumCellProps & WithClassname & TranslateProps
+) {
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    schema,
+    uischema,
+    path,
+    handleChange,
+    options,
+    config,
+    t,
+  } = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const noneOptionLabel = useMemo(
+    () => t('enum.none', i18nDefaults['enum.none'], { schema, uischema, path }),
+    [t, schema, uischema, path]
+  );
 
-    return (
-      <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'}
-      >
-        {[
-          <MenuItem value={''} key='jsonforms.enum.none'>
-            <em>{noneOptionLabel}</em>
-          </MenuItem>,
-        ].concat(
-          options.map((optionValue) => (
-            <MenuItem value={optionValue.value} key={optionValue.value}>
-              {optionValue.label}
-            </MenuItem>
-          ))
-        )}
-      </Select>
-    );
-  }
-);
+  return (
+    <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'}
+    >
+      {[
+        <MenuItem value={''} key='jsonforms.enum.none'>
+          <em>{noneOptionLabel}</em>
+        </MenuItem>,
+      ].concat(
+        options.map((optionValue) => (
+          <MenuItem value={optionValue.value} key={optionValue.value}>
+            {optionValue.label}
+          </MenuItem>
+        ))
+      )}
+    </Select>
+  );
+});
diff --git a/packages/material-renderers/src/mui-controls/MuiToggle.tsx b/packages/material-renderers/src/mui-controls/MuiToggle.tsx
index 620cc46cd..ce2e808d5 100644
--- a/packages/material-renderers/src/mui-controls/MuiToggle.tsx
+++ b/packages/material-renderers/src/mui-controls/MuiToggle.tsx
@@ -31,34 +31,34 @@ interface MuiToggleInputProps {
   inputProps?: InputProps['inputProps'];
 }
 
-export const MuiToggle = React.memo(
-  (props: CellProps & WithClassname & MuiToggleInputProps) => {
-    const {
-      data,
-      className,
-      id,
-      enabled,
-      uischema,
-      path,
-      handleChange,
-      config,
-      inputProps,
-    } = props;
-    const appliedUiSchemaOptions = merge({}, config, uischema.options);
-    const inputPropsMerged = merge({}, inputProps, {
-      autoFocus: !!appliedUiSchemaOptions.focus,
-    });
-    const checked = !!data;
+export const MuiToggle = React.memo(function MuiToggle(
+  props: CellProps & WithClassname & MuiToggleInputProps
+) {
+  const {
+    data,
+    className,
+    id,
+    enabled,
+    uischema,
+    path,
+    handleChange,
+    config,
+    inputProps,
+  } = props;
+  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const inputPropsMerged = merge({}, inputProps, {
+    autoFocus: !!appliedUiSchemaOptions.focus,
+  });
+  const checked = !!data;
 
-    return (
-      <Switch
-        checked={checked}
-        onChange={(_ev, isChecked) => handleChange(path, isChecked)}
-        className={className}
-        id={id}
-        disabled={!enabled}
-        inputProps={inputPropsMerged}
-      />
-    );
-  }
-);
+  return (
+    <Switch
+      checked={checked}
+      onChange={(_ev, isChecked) => handleChange(path, isChecked)}
+      className={className}
+      id={id}
+      disabled={!enabled}
+      inputProps={inputPropsMerged}
+    />
+  );
+});
diff --git a/packages/material-renderers/src/util/layout.tsx b/packages/material-renderers/src/util/layout.tsx
index 837194764..259d3b908 100644
--- a/packages/material-renderers/src/util/layout.tsx
+++ b/packages/material-renderers/src/util/layout.tsx
@@ -103,9 +103,12 @@ export interface AjvProps {
   ajv: Ajv;
 }
 
-export const withAjvProps =
-  <P extends {}>(Component: ComponentType<AjvProps & P>) =>
-  (props: P) => {
+// TODO fix @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const withAjvProps = <P extends {}>(
+  Component: ComponentType<AjvProps & P>
+) =>
+  function WithAjvProps(props: P) {
     const ctx = useJsonForms();
     const ajv = getAjv({ jsonforms: { ...ctx } });
 
diff --git a/packages/material-renderers/test/renderers/MaterialNativeControl.test.tsx b/packages/material-renderers/test/renderers/MaterialNativeControl.test.tsx
index 3bf4e184d..0c6987dd7 100644
--- a/packages/material-renderers/test/renderers/MaterialNativeControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialNativeControl.test.tsx
@@ -52,6 +52,7 @@ const createMaterialNativeControl = (props: ControlProps) => {
 
 const defaultControlProps = (): ControlProps => {
   return {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     handleChange: () => {},
     enabled: false,
     visible: true,
diff --git a/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx b/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx
index 639021d2b..caa3a241d 100644
--- a/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx
+++ b/packages/material-renderers/test/renderers/MaterialTextControl.test.tsx
@@ -53,6 +53,7 @@ const createMaterialTextControl = (props: ControlProps) => {
 
 const defaultControlProps = (): ControlProps => {
   return {
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
     handleChange: () => {},
     enabled: true,
     visible: true,
@@ -98,7 +99,7 @@ describe('Material text control', () => {
     const props = defaultControlProps();
     wrapper = mount(createMaterialTextControl(props));
     // call onPointerEnter prop manually as the tests seem to ignore 'pointerenter' events, 'mouseover' events work however.
-    wrapper.find(Input).props().onPointerEnter.call(this);
+    wrapper.find(Input).props().onPointerEnter?.call(this);
     wrapper.update();
     expect(wrapper.find(InputAdornment).props().style).not.toHaveProperty(
       'display',
@@ -111,7 +112,7 @@ describe('Material text control', () => {
     delete props.data;
     wrapper = mount(createMaterialTextControl(props));
     // call onPointerEnter prop manually as the tests seem to ignore 'pointerenter' events, 'mouseover' events work however.
-    wrapper.find(Input).props().onPointerEnter.call(this);
+    wrapper.find(Input).props().onPointerEnter?.call(this);
     wrapper.update();
     expect(wrapper.find(InputAdornment).props().style).toHaveProperty(
       'display',
diff --git a/packages/react/src/JsonForms.tsx b/packages/react/src/JsonForms.tsx
index d256f89bc..7d06bcd8c 100644
--- a/packages/react/src/JsonForms.tsx
+++ b/packages/react/src/JsonForms.tsx
@@ -103,53 +103,51 @@ export class JsonFormsDispatchRenderer extends React.Component<
   }
 }
 
-const TestAndRender = React.memo(
-  (props: {
-    uischema: UISchemaElement;
-    schema: JsonSchema;
-    rootSchema: JsonSchema;
-    path: string;
-    enabled: boolean;
-    renderers: JsonFormsRendererRegistryEntry[];
-    cells: JsonFormsCellRendererRegistryEntry[];
-    id: string;
-    config: any;
-  }) => {
-    const testerContext = useMemo(
-      () => ({
-        rootSchema: props.rootSchema,
-        config: props.config,
-      }),
-      [props.rootSchema, props.config]
-    );
-    const renderer = useMemo(
-      () =>
-        maxBy(props.renderers, (r) =>
-          r.tester(props.uischema, props.schema, testerContext)
-        ),
-      [props.renderers, props.uischema, props.schema, testerContext]
+const TestAndRender = React.memo(function TestAndRender(props: {
+  uischema: UISchemaElement;
+  schema: JsonSchema;
+  rootSchema: JsonSchema;
+  path: string;
+  enabled: boolean;
+  renderers: JsonFormsRendererRegistryEntry[];
+  cells: JsonFormsCellRendererRegistryEntry[];
+  id: string;
+  config: any;
+}) {
+  const testerContext = useMemo(
+    () => ({
+      rootSchema: props.rootSchema,
+      config: props.config,
+    }),
+    [props.rootSchema, props.config]
+  );
+  const renderer = useMemo(
+    () =>
+      maxBy(props.renderers, (r) =>
+        r.tester(props.uischema, props.schema, testerContext)
+      ),
+    [props.renderers, props.uischema, props.schema, testerContext]
+  );
+  if (
+    renderer === undefined ||
+    renderer.tester(props.uischema, props.schema, testerContext) === -1
+  ) {
+    return <UnknownRenderer type={'renderer'} />;
+  } else {
+    const Render = renderer.renderer;
+    return (
+      <Render
+        uischema={props.uischema}
+        schema={props.schema}
+        path={props.path}
+        enabled={props.enabled}
+        renderers={props.renderers}
+        cells={props.cells}
+        id={props.id}
+      />
     );
-    if (
-      renderer === undefined ||
-      renderer.tester(props.uischema, props.schema, testerContext) === -1
-    ) {
-      return <UnknownRenderer type={'renderer'} />;
-    } else {
-      const Render = renderer.renderer;
-      return (
-        <Render
-          uischema={props.uischema}
-          schema={props.schema}
-          path={props.path}
-          enabled={props.enabled}
-          renderers={props.renderers}
-          cells={props.cells}
-          id={props.id}
-        />
-      );
-    }
   }
-);
+});
 
 /**
  * @deprecated Since Version 3.0 this optimization renderer is no longer necessary.
diff --git a/packages/react/src/JsonFormsContext.tsx b/packages/react/src/JsonFormsContext.tsx
index be05d4fd0..75f8bc369 100644
--- a/packages/react/src/JsonFormsContext.tsx
+++ b/packages/react/src/JsonFormsContext.tsx
@@ -470,182 +470,225 @@ interface WithContext {
   ctx: JsonFormsStateContext;
 }
 
-export const withJsonFormsContext =
-  (Component: ComponentType<WithContext & any>): ComponentType<any> =>
-  (props: any) => {
+export const withJsonFormsContext = (
+  Component: ComponentType<WithContext & any>
+): ComponentType<any> =>
+  function WithJsonFormsContext(props: any) {
     const ctx = useJsonForms();
     return <Component ctx={ctx} props={props} />;
   };
 
-export const withContextToJsonFormsRendererProps =
-  (
-    Component: ComponentType<JsonFormsProps>
-  ): ComponentType<OwnPropsOfJsonFormsRenderer> =>
-  ({ ctx, props }: JsonFormsStateContext & JsonFormsProps) => {
+export const withContextToJsonFormsRendererProps = (
+  Component: ComponentType<JsonFormsProps>
+): ComponentType<OwnPropsOfJsonFormsRenderer> =>
+  function WithContextToJsonFormsRendererProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & JsonFormsProps) {
     const contextProps = ctxToJsonFormsRendererProps(ctx, props);
     return <Component {...props} {...contextProps} />;
   };
 
-const withContextToControlProps =
-  (Component: ComponentType<ControlProps>): ComponentType<OwnPropsOfControl> =>
-  ({ ctx, props }: JsonFormsStateContext & ControlProps) => {
+const withContextToControlProps = (
+  Component: ComponentType<ControlProps>
+): ComponentType<OwnPropsOfControl> =>
+  function WithContextToControlProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & ControlProps) {
     const controlProps = ctxToControlProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
     return <Component {...props} {...controlProps} {...dispatchProps} />;
   };
 
-const withContextToLayoutProps =
-  (
-    Component: ComponentType<LayoutProps>
-  ): ComponentType<OwnPropsOfJsonFormsRenderer> =>
-  ({ ctx, props }: JsonFormsStateContext & LayoutProps) => {
+const withContextToLayoutProps = (
+  Component: ComponentType<LayoutProps>
+): ComponentType<OwnPropsOfJsonFormsRenderer> =>
+  function WithContextToLayoutProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & LayoutProps) {
     const layoutProps = ctxToLayoutProps(ctx, props);
     return <Component {...props} {...layoutProps} />;
   };
 
-const withContextToOneOfProps =
-  (
-    Component: ComponentType<CombinatorRendererProps>
-  ): ComponentType<OwnPropsOfControl> =>
-  ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
+const withContextToOneOfProps = (
+  Component: ComponentType<CombinatorRendererProps>
+): ComponentType<OwnPropsOfControl> =>
+  function WithContextToOneOfProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & CombinatorRendererProps) {
     const oneOfProps = ctxToOneOfProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
     return <Component {...props} {...oneOfProps} {...dispatchProps} />;
   };
 
-const withContextToAnyOfProps =
-  (
-    Component: ComponentType<CombinatorRendererProps>
-  ): ComponentType<OwnPropsOfControl> =>
-  ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
+const withContextToAnyOfProps = (
+  Component: ComponentType<CombinatorRendererProps>
+): ComponentType<OwnPropsOfControl> =>
+  function WithContextToAnyOfProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & CombinatorRendererProps) {
     const oneOfProps = ctxToAnyOfProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
     return <Component {...props} {...oneOfProps} {...dispatchProps} />;
   };
 
-const withContextToAllOfProps =
-  (
-    Component: ComponentType<CombinatorRendererProps>
-  ): ComponentType<OwnPropsOfControl> =>
-  ({ ctx, props }: JsonFormsStateContext & CombinatorRendererProps) => {
+const withContextToAllOfProps = (
+  Component: ComponentType<CombinatorRendererProps>
+): ComponentType<OwnPropsOfControl> =>
+  function WithContextToAllOfProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & CombinatorRendererProps) {
     const allOfProps = ctxToAllOfProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
     return <Component {...props} {...allOfProps} {...dispatchProps} />;
   };
 
-const withContextToDetailProps =
-  (
-    Component: ComponentType<StatePropsOfControlWithDetail>
-  ): ComponentType<OwnPropsOfControl> =>
-  ({ ctx, props }: JsonFormsStateContext & StatePropsOfControlWithDetail) => {
+const withContextToDetailProps = (
+  Component: ComponentType<StatePropsOfControlWithDetail>
+): ComponentType<OwnPropsOfControl> =>
+  function WithContextToDetailProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & StatePropsOfControlWithDetail) {
     const detailProps = ctxToControlWithDetailProps(ctx, props);
     return <Component {...props} {...detailProps} />;
   };
 
-const withContextToArrayLayoutProps =
-  (
-    Component: ComponentType<ArrayLayoutProps>
-  ): ComponentType<OwnPropsOfControl> =>
-  ({ ctx, props }: JsonFormsStateContext & ArrayLayoutProps) => {
+const withContextToArrayLayoutProps = (
+  Component: ComponentType<ArrayLayoutProps>
+): ComponentType<OwnPropsOfControl> =>
+  function WithContextToArrayLayoutProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & ArrayLayoutProps) {
     const arrayLayoutProps = ctxToArrayLayoutProps(ctx, props);
     const dispatchProps = ctxDispatchToArrayControlProps(ctx.dispatch);
     return <Component {...props} {...arrayLayoutProps} {...dispatchProps} />;
   };
 
-const withContextToArrayControlProps =
-  (
-    Component: ComponentType<ArrayControlProps>
-  ): ComponentType<OwnPropsOfControl> =>
-  ({ ctx, props }: JsonFormsStateContext & ArrayControlProps) => {
+const withContextToArrayControlProps = (
+  Component: ComponentType<ArrayControlProps>
+): ComponentType<OwnPropsOfControl> =>
+  function WithContextToArrayControlProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & ArrayControlProps) {
     const stateProps = ctxToArrayControlProps(ctx, props);
     const dispatchProps = ctxDispatchToArrayControlProps(ctx.dispatch);
 
     return <Component {...props} {...stateProps} {...dispatchProps} />;
   };
 
-const withContextToMasterListItemProps =
-  (
-    Component: ComponentType<StatePropsOfMasterItem>
-  ): ComponentType<OwnPropsOfMasterListItem> =>
-  ({ ctx, props }: JsonFormsStateContext & StatePropsOfMasterItem) => {
+const withContextToMasterListItemProps = (
+  Component: ComponentType<StatePropsOfMasterItem>
+): ComponentType<OwnPropsOfMasterListItem> =>
+  function WithContextToMasterListItemProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & StatePropsOfMasterItem) {
     const stateProps = ctxToMasterListItemProps(ctx, props);
     return <Component {...props} {...stateProps} />;
   };
 
-const withContextToCellProps =
-  (Component: ComponentType<CellProps>): ComponentType<OwnPropsOfCell> =>
-  ({ ctx, props }: JsonFormsStateContext & CellProps) => {
+const withContextToCellProps = (
+  Component: ComponentType<CellProps>
+): ComponentType<OwnPropsOfCell> =>
+  function WithContextToCellProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & CellProps) {
     const cellProps = ctxToCellProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
 
     return <Component {...props} {...dispatchProps} {...cellProps} />;
   };
 
-const withContextToDispatchCellProps =
-  (
-    Component: ComponentType<DispatchCellProps>
-  ): ComponentType<OwnPropsOfCell> =>
-  ({ ctx, props }: JsonFormsStateContext & CellProps) => {
+const withContextToDispatchCellProps = (
+  Component: ComponentType<DispatchCellProps>
+): ComponentType<OwnPropsOfCell> =>
+  function WithContextToDispatchCellProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & CellProps) {
     const cellProps = ctxToDispatchCellProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
 
     return <Component {...props} {...dispatchProps} {...cellProps} />;
   };
 
-const withContextToEnumCellProps =
-  (
-    Component: ComponentType<EnumCellProps>
-  ): ComponentType<OwnPropsOfEnumCell> =>
-  ({ ctx, props }: JsonFormsStateContext & EnumCellProps) => {
+const withContextToEnumCellProps = (
+  Component: ComponentType<EnumCellProps>
+): ComponentType<OwnPropsOfEnumCell> =>
+  function WithContextToEnumCellProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & EnumCellProps) {
     const cellProps = ctxToEnumCellProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
     return <Component {...props} {...dispatchProps} {...cellProps} />;
   };
 
-const withContextToEnumProps =
-  (
-    Component: ComponentType<ControlProps & OwnPropsOfEnum>
-  ): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
-  ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
+const withContextToEnumProps = (
+  Component: ComponentType<ControlProps & OwnPropsOfEnum>
+): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+  function WithContextToEnumProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) {
     const stateProps = ctxToEnumControlProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
 
     return <Component {...props} {...dispatchProps} {...stateProps} />;
   };
 
-const withContextToOneOfEnumCellProps =
-  (
-    Component: ComponentType<EnumCellProps>
-  ): ComponentType<OwnPropsOfEnumCell> =>
-  ({ ctx, props }: JsonFormsStateContext & EnumCellProps) => {
+const withContextToOneOfEnumCellProps = (
+  Component: ComponentType<EnumCellProps>
+): ComponentType<OwnPropsOfEnumCell> =>
+  function WithContextToOneOfEnumCellProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & EnumCellProps) {
     const cellProps = ctxToOneOfEnumCellProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
     return <Component {...props} {...dispatchProps} {...cellProps} />;
   };
 
-const withContextToOneOfEnumProps =
-  (
-    Component: ComponentType<ControlProps & OwnPropsOfEnum>
-  ): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
-  ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
+const withContextToOneOfEnumProps = (
+  Component: ComponentType<ControlProps & OwnPropsOfEnum>
+): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+  function WithContextToOneOfEnumProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) {
     const stateProps = ctxToOneOfEnumControlProps(ctx, props);
     const dispatchProps = ctxDispatchToControlProps(ctx.dispatch);
     return <Component {...props} {...dispatchProps} {...stateProps} />;
   };
 
-const withContextToMultiEnumProps =
-  (
-    Component: ComponentType<ControlProps & OwnPropsOfEnum>
-  ): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
-  ({ ctx, props }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) => {
+const withContextToMultiEnumProps = (
+  Component: ComponentType<ControlProps & OwnPropsOfEnum>
+): ComponentType<OwnPropsOfControl & OwnPropsOfEnum> =>
+  function WithContextToMultiEnumProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & ControlProps & OwnPropsOfEnum) {
     const stateProps = ctxToMultiEnumControlProps(ctx, props);
     const dispatchProps = ctxDispatchToMultiEnumProps(ctx.dispatch);
     return <Component {...props} {...dispatchProps} {...stateProps} />;
   };
 
-const withContextToLabelProps =
-  (Component: ComponentType<LabelProps>): ComponentType<OwnPropsOfLabel> =>
-  ({ ctx, props }: JsonFormsStateContext & LabelProps & OwnPropsOfLabel) => {
+const withContextToLabelProps = (
+  Component: ComponentType<LabelProps>
+): ComponentType<OwnPropsOfLabel> =>
+  function WithContextToLabelProps({
+    ctx,
+    props,
+  }: JsonFormsStateContext & LabelProps & OwnPropsOfLabel) {
     const stateProps = ctxToLabelProps(ctx, props);
     return <Component {...props} {...stateProps} />;
   };
@@ -813,9 +856,12 @@ export interface TranslateProps {
   locale: string;
 }
 
-export const withTranslateProps =
-  <P extends {}>(Component: ComponentType<TranslateProps & P>) =>
-  (props: P) => {
+// TODO fix @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/ban-types
+export const withTranslateProps = <P extends {}>(
+  Component: ComponentType<TranslateProps & P>
+) =>
+  function WithTranslateProps(props: P) {
     const ctx = useJsonForms();
     const locale = ctx.i18n?.locale ?? defaultJsonFormsI18nState.locale;
     const t = ctx.i18n?.translate ?? defaultJsonFormsI18nState.translate;
diff --git a/packages/react/src/Renderer.tsx b/packages/react/src/Renderer.tsx
index a0e1b4cc1..b07cdca19 100644
--- a/packages/react/src/Renderer.tsx
+++ b/packages/react/src/Renderer.tsx
@@ -33,6 +33,8 @@ import type { RendererProps } from '@jsonforms/core';
  */
 export class RendererComponent<
   P extends RendererProps,
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
   S = {}
 > extends React.Component<P, S> {
   constructor(props: P) {
@@ -52,5 +54,7 @@ export type StatelessRenderer<P extends RendererProps> =
  * Represents a Renderer, which might either be a component or a function.
  */
 export type Renderer =
+  // TODO fix @typescript-eslint/ban-types
+  // eslint-disable-next-line @typescript-eslint/ban-types
   | RendererComponent<RendererProps & any, {}>
   | StatelessRenderer<RendererProps & any>;
diff --git a/packages/react/src/UnknownRenderer.tsx b/packages/react/src/UnknownRenderer.tsx
index e273d11a9..f1be994d1 100644
--- a/packages/react/src/UnknownRenderer.tsx
+++ b/packages/react/src/UnknownRenderer.tsx
@@ -22,8 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
-import { Component } from 'react';
+import React, { Component } from 'react';
 
 /**
  * Props of an {@link UnknownRenderer}
diff --git a/packages/react/test/renderers/JsonForms.test.tsx b/packages/react/test/renderers/JsonForms.test.tsx
index dbfd220cf..a26c07787 100644
--- a/packages/react/test/renderers/JsonForms.test.tsx
+++ b/packages/react/test/renderers/JsonForms.test.tsx
@@ -255,7 +255,7 @@ test('ids should be unique within the same form', () => {
   });
 
   const ids: string[] = [];
-  const MyCustomRenderer: StatelessRenderer<any> = (props) => {
+  const MyCustomRenderer: StatelessRenderer<any> = (props: any) => {
     ids.push(props.id);
     return <div>Custom</div>;
   };
@@ -431,7 +431,9 @@ test('JsonForms renderer should pick most applicable cell renderer via ownProps'
   });
   store.dispatch(registerCell(() => 50, CellRenderer1));
 
-  const ArrayRenderer: StatelessRenderer<RendererProps> = (props) => {
+  const ArrayRenderer: StatelessRenderer<RendererProps> = (
+    props: RendererProps
+  ) => {
     return (
       <DispatchCell
         schema={props.schema}
@@ -552,7 +554,9 @@ test('JsonForms renderer should pick schema from ownProps', () => {
 });
 
 test('JsonForms renderer should pick enabled prop from ownProps', () => {
-  const CustomRenderer4: StatelessRenderer<RendererProps> = (props) => {
+  const CustomRenderer4: StatelessRenderer<RendererProps> = (
+    props: RendererProps
+  ) => {
     return <h3>{`${props.enabled}`}</h3>;
   };
 
@@ -1007,7 +1011,7 @@ test('JsonForms should update if data prop is updated', () => {
 test('JsonForms should use additionalErrors if provided', () => {
   const CustomRendererWithError: StatelessRenderer<ControlProps> = ({
     errors,
-  }) => {
+  }: ControlProps) => {
     return <h5>{errors}</h5>;
   };
 
@@ -1045,7 +1049,7 @@ test('JsonForms should use additionalErrors if provided', () => {
 test('JsonForms should use react to additionalErrors update', () => {
   const CustomRendererWithError: StatelessRenderer<ControlProps> = ({
     errors,
-  }) => {
+  }: ControlProps) => {
     return <h5>{errors}</h5>;
   };
 
diff --git a/packages/vanilla-renderers/src/controls/RadioGroup.tsx b/packages/vanilla-renderers/src/controls/RadioGroup.tsx
index 3540649bf..94456b1a5 100644
--- a/packages/vanilla-renderers/src/controls/RadioGroup.tsx
+++ b/packages/vanilla-renderers/src/controls/RadioGroup.tsx
@@ -22,7 +22,7 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   computeLabel,
   ControlProps,
@@ -33,7 +33,6 @@ import type { VanillaRendererProps } from '../index';
 import { findStyleAsClassName } from '../reducers/styling';
 import { useStyles } from '../styles';
 import merge from 'lodash/merge';
-import { useMemo, useState } from 'react';
 
 export const RadioGroup = ({
   classNames,
diff --git a/packages/vanilla-renderers/src/layouts/GroupLayout.tsx b/packages/vanilla-renderers/src/layouts/GroupLayout.tsx
index 6cd9b5ecb..d103976b0 100644
--- a/packages/vanilla-renderers/src/layouts/GroupLayout.tsx
+++ b/packages/vanilla-renderers/src/layouts/GroupLayout.tsx
@@ -46,48 +46,44 @@ export const groupTester: RankedTester = rankWith(1, uiTypeIs('Group'));
 export const GroupLayoutRenderer = (
   props: LayoutProps & VanillaRendererProps
 ) => {
-  const { data, ...otherProps } = props;
+  const { data: _data, ...otherProps } = props;
   // We don't hand over data to the layout renderer to avoid rerendering it with every data change
   return <GroupLayoutRendererComponent {...otherProps} />;
 };
 
 const GroupLayoutRendererComponent: FunctionComponent<
   LayoutProps & VanillaRendererProps
-> = React.memo(
-  ({
-    schema,
-    uischema,
-    path,
-    enabled,
-    visible,
-    label,
-    getStyle,
-    getStyleAsClassName,
-  }: LayoutProps & VanillaRendererProps) => {
-    const group = uischema as GroupLayout;
-    const elementsSize = group.elements ? group.elements.length : 0;
-    const classNames = getStyleAsClassName('group.layout');
-    const childClassNames = ['group-layout-item']
-      .concat(getStyle('group.layout.item', elementsSize))
-      .join(' ');
+> = React.memo(function GroupLayoutRendererComponent({
+  schema,
+  uischema,
+  path,
+  enabled,
+  visible,
+  label,
+  getStyle,
+  getStyleAsClassName,
+}: LayoutProps & VanillaRendererProps) {
+  const group = uischema as GroupLayout;
+  const elementsSize = group.elements ? group.elements.length : 0;
+  const classNames = getStyleAsClassName('group.layout');
+  const childClassNames = ['group-layout-item']
+    .concat(getStyle('group.layout.item', elementsSize))
+    .join(' ');
 
-    return (
-      <fieldset
-        className={classNames}
-        hidden={visible === undefined || visible === null ? false : !visible}
-      >
-        {!isEmpty(label) ? (
-          <legend className={getStyleAsClassName('group.label')}>
-            {label}
-          </legend>
-        ) : (
-          ''
-        )}
-        {renderChildren(group, schema, childClassNames, path, enabled)}
-      </fieldset>
-    );
-  }
-);
+  return (
+    <fieldset
+      className={classNames}
+      hidden={visible === undefined || visible === null ? false : !visible}
+    >
+      {!isEmpty(label) ? (
+        <legend className={getStyleAsClassName('group.label')}>{label}</legend>
+      ) : (
+        ''
+      )}
+      {renderChildren(group, schema, childClassNames, path, enabled)}
+    </fieldset>
+  );
+});
 
 export default withVanillaControlProps(
   withJsonFormsLayoutProps(GroupLayoutRenderer)
diff --git a/packages/vanilla-renderers/src/layouts/HorizontalLayout.tsx b/packages/vanilla-renderers/src/layouts/HorizontalLayout.tsx
index 9ffed0b23..586ad142d 100644
--- a/packages/vanilla-renderers/src/layouts/HorizontalLayout.tsx
+++ b/packages/vanilla-renderers/src/layouts/HorizontalLayout.tsx
@@ -48,54 +48,46 @@ export const horizontalLayoutTester: RankedTester = rankWith(
 export const HorizontalLayoutRenderer = (
   props: RendererProps & VanillaRendererProps
 ) => {
-  const { data, ...otherProps } = props;
+  const { data: _data, ...otherProps } = props;
   // We don't hand over data to the layout renderer to avoid rerendering it with every data change
   return <HorizontalLayoutRendererComponent {...otherProps} />;
 };
 
 const HorizontalLayoutRendererComponent: FunctionComponent<
   RendererProps & VanillaRendererProps
-> = React.memo(
-  ({
-    schema,
-    uischema,
-    getStyle,
-    getStyleAsClassName,
-    enabled,
-    visible,
-    path,
-  }: RendererProps & VanillaRendererProps) => {
-    const horizontalLayout = uischema as HorizontalLayout;
-    const elementsSize = horizontalLayout.elements
-      ? horizontalLayout.elements.length
-      : 0;
-    const layoutClassName = getStyleAsClassName('horizontal.layout');
-    const childClassNames = ['horizontal-layout-item']
-      .concat(getStyle('horizontal.layout.item', elementsSize))
-      .join(' ');
+> = React.memo(function HorizontalLayoutRendererComponent({
+  schema,
+  uischema,
+  getStyle,
+  getStyleAsClassName,
+  enabled,
+  visible,
+  path,
+}: RendererProps & VanillaRendererProps) {
+  const horizontalLayout = uischema as HorizontalLayout;
+  const elementsSize = horizontalLayout.elements
+    ? horizontalLayout.elements.length
+    : 0;
+  const layoutClassName = getStyleAsClassName('horizontal.layout');
+  const childClassNames = ['horizontal-layout-item']
+    .concat(getStyle('horizontal.layout.item', elementsSize))
+    .join(' ');
 
-    return (
-      <JsonFormsLayout
-        className={layoutClassName}
-        visible={visible}
-        enabled={enabled}
-        path={path}
-        uischema={uischema}
-        schema={schema}
-        getStyle={getStyle}
-        getStyleAsClassName={getStyleAsClassName}
-      >
-        {renderChildren(
-          horizontalLayout,
-          schema,
-          childClassNames,
-          path,
-          enabled
-        )}
-      </JsonFormsLayout>
-    );
-  }
-);
+  return (
+    <JsonFormsLayout
+      className={layoutClassName}
+      visible={visible}
+      enabled={enabled}
+      path={path}
+      uischema={uischema}
+      schema={schema}
+      getStyle={getStyle}
+      getStyleAsClassName={getStyleAsClassName}
+    >
+      {renderChildren(horizontalLayout, schema, childClassNames, path, enabled)}
+    </JsonFormsLayout>
+  );
+});
 
 export default withVanillaControlProps(
   withJsonFormsLayoutProps(HorizontalLayoutRenderer, false)
diff --git a/packages/vanilla-renderers/src/layouts/VerticalLayout.tsx b/packages/vanilla-renderers/src/layouts/VerticalLayout.tsx
index 33015fd08..520301a46 100644
--- a/packages/vanilla-renderers/src/layouts/VerticalLayout.tsx
+++ b/packages/vanilla-renderers/src/layouts/VerticalLayout.tsx
@@ -48,48 +48,46 @@ export const verticalLayoutTester: RankedTester = rankWith(
 export const VerticalLayoutRenderer = (
   props: RendererProps & VanillaRendererProps
 ) => {
-  const { data, ...otherProps } = props;
+  const { data: _data, ...otherProps } = props;
   // We don't hand over data to the layout renderer to avoid rerendering it with every data change
   return <VerticalLayoutRendererComponent {...otherProps} />;
 };
 
 const VerticalLayoutRendererComponent: FunctionComponent<
   RendererProps & VanillaRendererProps
-> = React.memo(
-  ({
-    schema,
-    uischema,
-    path,
-    visible,
-    enabled,
-    getStyle,
-    getStyleAsClassName,
-  }: RendererProps & VanillaRendererProps) => {
-    const verticalLayout = uischema as VerticalLayout;
-    const elementsSize = verticalLayout.elements
-      ? verticalLayout.elements.length
-      : 0;
-    const layoutClassName = getStyleAsClassName('vertical.layout');
-    const childClassNames = ['vertical-layout-item']
-      .concat(getStyle('vertical.layout.item', elementsSize))
-      .join(' ');
+> = React.memo(function VerticalLayoutRendererComponent({
+  schema,
+  uischema,
+  path,
+  visible,
+  enabled,
+  getStyle,
+  getStyleAsClassName,
+}: RendererProps & VanillaRendererProps) {
+  const verticalLayout = uischema as VerticalLayout;
+  const elementsSize = verticalLayout.elements
+    ? verticalLayout.elements.length
+    : 0;
+  const layoutClassName = getStyleAsClassName('vertical.layout');
+  const childClassNames = ['vertical-layout-item']
+    .concat(getStyle('vertical.layout.item', elementsSize))
+    .join(' ');
 
-    return (
-      <JsonFormsLayout
-        className={layoutClassName}
-        uischema={uischema}
-        schema={schema}
-        visible={visible}
-        enabled={enabled}
-        path={path}
-        getStyle={getStyle}
-        getStyleAsClassName={getStyleAsClassName}
-      >
-        {renderChildren(verticalLayout, schema, childClassNames, path, enabled)}
-      </JsonFormsLayout>
-    );
-  }
-);
+  return (
+    <JsonFormsLayout
+      className={layoutClassName}
+      uischema={uischema}
+      schema={schema}
+      visible={visible}
+      enabled={enabled}
+      path={path}
+      getStyle={getStyle}
+      getStyleAsClassName={getStyleAsClassName}
+    >
+      {renderChildren(verticalLayout, schema, childClassNames, path, enabled)}
+    </JsonFormsLayout>
+  );
+});
 
 export default withVanillaControlProps(
   withJsonFormsLayoutProps(VerticalLayoutRenderer, false)
diff --git a/packages/vanilla-renderers/src/util/index.tsx b/packages/vanilla-renderers/src/util/index.tsx
index 81296a2d8..511ee2f5f 100644
--- a/packages/vanilla-renderers/src/util/index.tsx
+++ b/packages/vanilla-renderers/src/util/index.tsx
@@ -96,8 +96,8 @@ export const addVanillaControlProps =
     };
   };
 
-export const withVanillaControlProps =
-  (Component: ComponentType<any>) => (props: any) => {
+export const withVanillaControlProps = (Component: ComponentType<any>) =>
+  function WithVanillaControlProps(props: any) {
     const ctx = useJsonForms();
     const contextStyles = useStyles();
     const controlElement = props.uischema as ControlElement;
@@ -219,25 +219,26 @@ export const addVanillaCellProps =
   };
 
 const withVanillaCellPropsForType =
-  (type: string) => (Component: ComponentType<any>) => (props: any) => {
-    const inputClassName = ['validate'].concat(
-      props.isValid ? 'valid' : 'invalid'
-    );
-    const styles = useStyles();
-    const definedStyle = findStyleAsClassName(styles)(type);
-    if (definedStyle) {
-      inputClassName.push(definedStyle);
-    }
-
-    return (
-      <Component
-        {...props}
-        getStyleAsClassName={findStyleAsClassName(styles)}
-        getStyle={findStyle(styles)}
-        className={inputClassName.join(' ')}
-      />
-    );
-  };
+  (type: string) => (Component: ComponentType<any>) =>
+    function WithVanillaCellPropsForType(props: any) {
+      const inputClassName = ['validate'].concat(
+        props.isValid ? 'valid' : 'invalid'
+      );
+      const styles = useStyles();
+      const definedStyle = findStyleAsClassName(styles)(type);
+      if (definedStyle) {
+        inputClassName.push(definedStyle);
+      }
+
+      return (
+        <Component
+          {...props}
+          getStyleAsClassName={findStyleAsClassName(styles)}
+          getStyle={findStyle(styles)}
+          className={inputClassName.join(' ')}
+        />
+      );
+    };
 
 export const withVanillaCellProps =
   withVanillaCellPropsForType('control.input');
diff --git a/packages/vue/vue-vanilla/dev/components/App.vue b/packages/vue/vue-vanilla/dev/components/App.vue
index 910d0490b..58f19a12c 100644
--- a/packages/vue/vue-vanilla/dev/components/App.vue
+++ b/packages/vue/vue-vanilla/dev/components/App.vue
@@ -44,6 +44,7 @@ export default defineComponent({
   computed: {
     example() {
       const name = (this as any).currentExampleName;
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       return examples.find((ex) => ex.name === name)!;
     },
   },
diff --git a/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue b/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue
index 9880e1008..666331b5e 100644
--- a/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue
+++ b/packages/vue/vue-vanilla/src/controls/ControlWrapper.vue
@@ -22,7 +22,7 @@ export default defineComponent({
   name: 'ControlWrapper',
   props: {
     id: {
-      required: true as const,
+      required: true,
       type: String,
     },
     description: {
diff --git a/packages/vue/vue-vanilla/src/util/composition.ts b/packages/vue/vue-vanilla/src/util/composition.ts
index e630175da..009e1d932 100644
--- a/packages/vue/vue-vanilla/src/util/composition.ts
+++ b/packages/vue/vue-vanilla/src/util/composition.ts
@@ -120,7 +120,7 @@ export const useVanillaArrayControl = <I extends { control: any }>(
       input.control.value.data,
       composePaths(`${index}`, childLabelProp)
     );
-    if (labelValue === undefined || labelValue === null || labelValue === NaN) {
+    if (labelValue === undefined || labelValue === null || isNaN(labelValue)) {
       return '';
     }
     return `${labelValue}`;
diff --git a/packages/vue/vue-vanilla/tests/unit/util/TestComponent.vue b/packages/vue/vue-vanilla/tests/unit/util/TestComponent.vue
index 227379e3d..8e3f764a1 100644
--- a/packages/vue/vue-vanilla/tests/unit/util/TestComponent.vue
+++ b/packages/vue/vue-vanilla/tests/unit/util/TestComponent.vue
@@ -9,6 +9,7 @@ export default defineComponent({
   components: {
     JsonForms,
   },
+  // eslint-disable-next-line vue/require-prop-types
   props: ['initialData', 'schema', 'uischema', 'config'],
   data() {
     return {
diff --git a/packages/vue/vue/dev/components/App.vue b/packages/vue/vue/dev/components/App.vue
index 8903aff76..10f5b6a4f 100644
--- a/packages/vue/vue/dev/components/App.vue
+++ b/packages/vue/vue/dev/components/App.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-import { defineComponent } from '../../config';
+import { defineComponent } from 'vue';
 import { JsonForms, JsonFormsChangeEvent } from '../../src';
 import { vueRenderers } from '../renderers';
 
diff --git a/packages/vue/vue/dev/renderers/LayoutRenderer.vue b/packages/vue/vue/dev/renderers/LayoutRenderer.vue
index ee716d1e4..19ebfd7bc 100644
--- a/packages/vue/vue/dev/renderers/LayoutRenderer.vue
+++ b/packages/vue/vue/dev/renderers/LayoutRenderer.vue
@@ -38,7 +38,7 @@ import {
   Layout,
   rankWith,
 } from '@jsonforms/core';
-import { defineComponent } from '../../config';
+import { defineComponent } from 'vue';
 import {
   DispatchRenderer,
   rendererProps,
diff --git a/packages/vue/vue/src/components/JsonForms.vue b/packages/vue/vue/src/components/JsonForms.vue
index 9f8c60d20..c65bc05aa 100644
--- a/packages/vue/vue/src/components/JsonForms.vue
+++ b/packages/vue/vue/src/components/JsonForms.vue
@@ -29,6 +29,8 @@ import DispatchRenderer from './DispatchRenderer.vue';
 
 import Ajv, { ErrorObject } from 'ajv';
 
+// TODO fix @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/ban-types
 const isObject = (elem: any): elem is Object => {
   return elem && typeof elem === 'object';
 };
diff --git a/packages/vue/vue/src/jsonFormsCompositions.ts b/packages/vue/vue/src/jsonFormsCompositions.ts
index 3fb1aa266..bfdac3a90 100644
--- a/packages/vue/vue/src/jsonFormsCompositions.ts
+++ b/packages/vue/vue/src/jsonFormsCompositions.ts
@@ -141,15 +141,21 @@ export type Required<T> = T extends object
   ? { [P in keyof T]-?: NonNullable<T[P]> }
   : T;
 
+// TODO fix @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/ban-types, @typescript-eslint/no-unused-vars
 export function useControl<R, D, P extends {}>(
   props: P,
   stateMap: (state: JsonFormsState, props: P) => R
 ): { control: ComputedRef<Required<R>> };
+// TODO fix @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/ban-types
 export function useControl<R, D, P extends {}>(
   props: P,
   stateMap: (state: JsonFormsState, props: P) => R,
   dispatchMap: (dispatch: Dispatch<CoreActions>) => D
 ): { control: ComputedRef<Required<R>> } & D;
+// TODO fix @typescript-eslint/ban-types
+// eslint-disable-next-line @typescript-eslint/ban-types
 export function useControl<R, D, P extends {}>(
   props: P,
   stateMap: (state: JsonFormsState, props: P) => R,
@@ -368,7 +374,7 @@ export const useJsonFormsRenderer = (props: RendererProps) => {
 
   const rootSchema = computed(() => rawProps.value.rootSchema);
   const renderer = computed(() => {
-    const { rootSchema, ...rest } = rawProps.value;
+    const { rootSchema: _rootSchema, ...rest } = rawProps.value;
     return rest;
   });
 

From 8c82d781b838d04a2a511472873330dcafe5e6fb Mon Sep 17 00:00:00 2001
From: Lucas Koehler <lkoehler@eclipsesource.com>
Date: Fri, 21 Apr 2023 11:21:35 +0200
Subject: [PATCH 15/17] Execute ESLint on CI for Ubuntu builds

Part of #1551
---
 .github/workflows/ci.yaml | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index f661027ea..5ab0439a8 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -26,6 +26,9 @@ jobs:
           npm run init
           npm run build
           npm run bundle
+      - name: Lint
+        if: matrix.os == 'ubuntu-latest'
+        run: npm run lint
       - name: Test
         if: matrix.os == 'windows-latest'
         run: |

From d4f629b52e7bbcb6b2740332eeb5fd5bcea780bd Mon Sep 17 00:00:00 2001
From: Stefan Dirix <sdirix@eclipsesource.com>
Date: Fri, 21 Apr 2023 13:45:19 +0200
Subject: [PATCH 16/17] Export all unwrapped React Material renderers

Previously only the control renderers were made available unwrapped. Now all unwrapped
React Material renderers are exported.

Implements #1687

Contributed on behalf of STMicroelectronics
---
 .../additional/ListWithDetailMasterItem.tsx   |   2 +-
 .../src/additional/index.ts                   |  12 +-
 .../src/additional/unwrapped.ts               |  32 ++++++
 .../src/complex/CombinatorProperties.tsx      |  10 +-
 .../complex/MaterialArrayControlRenderer.tsx  |  14 ++-
 .../material-renderers/src/complex/index.ts   |  59 +++++-----
 .../src/complex/unwrapped.ts                  |  39 +++++++
 .../material-renderers/src/controls/index.ts  | 106 ++++++------------
 .../src/controls/unwrapped.ts                 |  57 ++++++++++
 packages/material-renderers/src/index.ts      |  15 ++-
 .../src/layouts/ExpandPanelRenderer.tsx       |   2 +-
 .../material-renderers/src/layouts/index.ts   |  13 ++-
 .../src/layouts/unwrapped.ts                  |  41 +++++++
 .../src/mui-controls/index.ts                 |   4 +-
 14 files changed, 295 insertions(+), 111 deletions(-)
 create mode 100644 packages/material-renderers/src/additional/unwrapped.ts
 create mode 100644 packages/material-renderers/src/complex/unwrapped.ts
 create mode 100644 packages/material-renderers/src/controls/unwrapped.ts
 create mode 100644 packages/material-renderers/src/layouts/unwrapped.ts

diff --git a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
index 850c0bab2..121afdb09 100644
--- a/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
+++ b/packages/material-renderers/src/additional/ListWithDetailMasterItem.tsx
@@ -35,7 +35,7 @@ import {
 import DeleteIcon from '@mui/icons-material/Delete';
 import React from 'react';
 
-const ListWithDetailMasterItem = ({
+export const ListWithDetailMasterItem = ({
   index,
   childLabel,
   selected,
diff --git a/packages/material-renderers/src/additional/index.ts b/packages/material-renderers/src/additional/index.ts
index ddf8d0eab..4583f9ffc 100644
--- a/packages/material-renderers/src/additional/index.ts
+++ b/packages/material-renderers/src/additional/index.ts
@@ -25,8 +25,16 @@
 import MaterialLabelRenderer, {
   materialLabelRendererTester,
 } from './MaterialLabelRenderer';
-export { MaterialLabelRenderer, materialLabelRendererTester };
+
 import MaterialListWithDetailRenderer, {
   materialListWithDetailTester,
 } from './MaterialListWithDetailRenderer';
-export { MaterialListWithDetailRenderer, materialListWithDetailTester };
+
+export {
+  MaterialLabelRenderer,
+  materialLabelRendererTester,
+  MaterialListWithDetailRenderer,
+  materialListWithDetailTester,
+};
+
+export * from './ListWithDetailMasterItem';
diff --git a/packages/material-renderers/src/additional/unwrapped.ts b/packages/material-renderers/src/additional/unwrapped.ts
new file mode 100644
index 000000000..e100a3d65
--- /dev/null
+++ b/packages/material-renderers/src/additional/unwrapped.ts
@@ -0,0 +1,32 @@
+/*
+  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 { MaterialLabelRenderer } from './MaterialLabelRenderer';
+
+import { MaterialListWithDetailRenderer } from './MaterialListWithDetailRenderer';
+
+export const UnwrappedAdditional = {
+  MaterialLabelRenderer,
+  MaterialListWithDetailRenderer,
+};
diff --git a/packages/material-renderers/src/complex/CombinatorProperties.tsx b/packages/material-renderers/src/complex/CombinatorProperties.tsx
index c74c3c7fd..630316ff8 100644
--- a/packages/material-renderers/src/complex/CombinatorProperties.tsx
+++ b/packages/material-renderers/src/complex/CombinatorProperties.tsx
@@ -23,7 +23,12 @@
   THE SOFTWARE.
 */
 import React from 'react';
-import { Generate, JsonSchema, Layout, UISchemaElement } from '@jsonforms/core';
+import {
+  Generate,
+  JsonSchema,
+  UISchemaElement,
+  isLayout,
+} from '@jsonforms/core';
 import { JsonFormsDispatch } from '@jsonforms/react';
 import omit from 'lodash/omit';
 
@@ -33,9 +38,6 @@ interface CombinatorPropertiesProps {
   path: string;
 }
 
-export const isLayout = (uischema: UISchemaElement): uischema is Layout =>
-  uischema.hasOwnProperty('elements');
-
 export class CombinatorProperties extends React.Component<
   CombinatorPropertiesProps,
   // TODO fix @typescript-eslint/ban-types
diff --git a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
index ae9bc6e6d..fe830be6c 100644
--- a/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
+++ b/packages/material-renderers/src/complex/MaterialArrayControlRenderer.tsx
@@ -23,7 +23,14 @@
   THE SOFTWARE.
 */
 import React, { useCallback, useState } from 'react';
-import { ArrayLayoutProps } from '@jsonforms/core';
+import {
+  ArrayLayoutProps,
+  RankedTester,
+  isObjectArrayControl,
+  isPrimitiveArrayControl,
+  or,
+  rankWith,
+} from '@jsonforms/core';
 import { withJsonFormsArrayLayoutProps } from '@jsonforms/react';
 import { MaterialTableControl } from './MaterialTableControl';
 import { Hidden } from '@mui/material';
@@ -68,4 +75,9 @@ export const MaterialArrayControlRenderer = (props: ArrayLayoutProps) => {
   );
 };
 
+export const materialArrayControlTester: RankedTester = rankWith(
+  3,
+  or(isObjectArrayControl, isPrimitiveArrayControl)
+);
+
 export default withJsonFormsArrayLayoutProps(MaterialArrayControlRenderer);
diff --git a/packages/material-renderers/src/complex/index.ts b/packages/material-renderers/src/complex/index.ts
index d2648a17c..8331cb781 100644
--- a/packages/material-renderers/src/complex/index.ts
+++ b/packages/material-renderers/src/complex/index.ts
@@ -22,42 +22,45 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
-import {
-  isObjectArrayControl,
-  isPrimitiveArrayControl,
-  or,
-  RankedTester,
-  rankWith,
-} from '@jsonforms/core';
-import MaterialArrayControlRenderer from './MaterialArrayControlRenderer';
-import MaterialObjectRenderer, {
-  materialObjectControlTester,
-} from './MaterialObjectRenderer';
 import MaterialAllOfRenderer, {
   materialAllOfControlTester,
 } from './MaterialAllOfRenderer';
 import MaterialAnyOfRenderer, {
   materialAnyOfControlTester,
 } from './MaterialAnyOfRenderer';
+import MaterialArrayControlRenderer, {
+  materialArrayControlTester,
+} from './MaterialArrayControlRenderer';
+import MaterialEnumArrayRenderer, {
+  materialEnumArrayRendererTester,
+} from './MaterialEnumArrayRenderer';
+import MaterialObjectRenderer, {
+  materialObjectControlTester,
+} from './MaterialObjectRenderer';
 import MaterialOneOfRenderer, {
   materialOneOfControlTester,
 } from './MaterialOneOfRenderer';
-import MaterialEnumArrayRenderer, {
+
+export {
+  materialAllOfControlTester,
+  MaterialAllOfRenderer,
+  materialAnyOfControlTester,
+  MaterialAnyOfRenderer,
+  materialArrayControlTester,
+  MaterialArrayControlRenderer,
   materialEnumArrayRendererTester,
-} from './MaterialEnumArrayRenderer';
+  MaterialEnumArrayRenderer,
+  materialObjectControlTester,
+  MaterialObjectRenderer,
+  materialOneOfControlTester,
+  MaterialOneOfRenderer,
+};
+
+export * from './CombinatorProperties';
+export * from './DeleteDialog';
+export * from './MaterialTableControl';
+export * from './TableToolbar';
+export * from './ValidationIcon';
 
-export const materialArrayControlTester: RankedTester = rankWith(
-  3,
-  or(isObjectArrayControl, isPrimitiveArrayControl)
-);
-export { MaterialArrayControlRenderer };
-export { MaterialObjectRenderer };
-export { MaterialAllOfRenderer };
-export { MaterialAnyOfRenderer };
-export { MaterialOneOfRenderer };
-export { MaterialEnumArrayRenderer };
-export { materialObjectControlTester };
-export { materialAllOfControlTester };
-export { materialAnyOfControlTester };
-export { materialOneOfControlTester };
-export { materialEnumArrayRendererTester };
+import NoBorderTableCell from './NoBorderTableCell';
+export { NoBorderTableCell };
diff --git a/packages/material-renderers/src/complex/unwrapped.ts b/packages/material-renderers/src/complex/unwrapped.ts
new file mode 100644
index 000000000..63b5bb6d9
--- /dev/null
+++ b/packages/material-renderers/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,
+};
diff --git a/packages/material-renderers/src/controls/index.ts b/packages/material-renderers/src/controls/index.ts
index 54001061b..7bc6820f3 100644
--- a/packages/material-renderers/src/controls/index.ts
+++ b/packages/material-renderers/src/controls/index.ts
@@ -22,119 +22,83 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+import MaterialAnyOfStringOrEnumControl, {
+  materialAnyOfStringOrEnumControlTester,
+} from './MaterialAnyOfStringOrEnumControl';
 import MaterialBooleanControl, {
   materialBooleanControlTester,
-  MaterialBooleanControl as MaterialBooleanControlUnwrapped,
 } from './MaterialBooleanControl';
 import MaterialBooleanToggleControl, {
   materialBooleanToggleControlTester,
-  MaterialBooleanToggleControl as MaterialBooleanToggleControlUnwrapped,
 } from './MaterialBooleanToggleControl';
-import MaterialEnumControl, {
-  materialEnumControlTester,
-  MaterialEnumControl as MaterialEnumControlUnwrapped,
-} from './MaterialEnumControl';
-import MaterialNativeControl, {
-  materialNativeControlTester,
-  MaterialNativeControl as MaterialNativeControlUnwrapped,
-} from './MaterialNativeControl';
 import MaterialDateControl, {
   materialDateControlTester,
-  MaterialDateControl as MaterialDateControlUnwrapped,
 } from './MaterialDateControl';
 import MaterialDateTimeControl, {
   materialDateTimeControlTester,
-  MaterialDateTimeControl as MaterialDateTimeControlUnwrapped,
 } from './MaterialDateTimeControl';
-import MaterialTimeControl, {
-  materialTimeControlTester,
-  MaterialTimeControl as MaterialTimeControlUnwrapped,
-} from './MaterialTimeControl';
-import MaterialSliderControl, {
-  materialSliderControlTester,
-  MaterialSliderControl as MaterialSliderControlUnwrapped,
-} from './MaterialSliderControl';
-import MaterialRadioGroupControl, {
-  materialRadioGroupControlTester,
-  MaterialRadioGroupControl as MaterialRadioGroupControlUnwrapped,
-} from './MaterialRadioGroupControl';
+import MaterialEnumControl, {
+  materialEnumControlTester,
+} from './MaterialEnumControl';
 import MaterialIntegerControl, {
   materialIntegerControlTester,
-  MaterialIntegerControl as MaterialIntegerControlUnwrapped,
 } from './MaterialIntegerControl';
+import MaterialNativeControl, {
+  materialNativeControlTester,
+} from './MaterialNativeControl';
 import MaterialNumberControl, {
   materialNumberControlTester,
-  MaterialNumberControl as MaterialNumberControlUnwrapped,
 } from './MaterialNumberControl';
-import MaterialTextControl, {
-  materialTextControlTester,
-  MaterialTextControl as MaterialTextControlUnwrapped,
-} from './MaterialTextControl';
-
-import MaterialAnyOfStringOrEnumControl, {
-  materialAnyOfStringOrEnumControlTester,
-  MaterialAnyOfStringOrEnumControl as MaterialAnyOfStringOrEnumControlUnwrapped,
-} from './MaterialAnyOfStringOrEnumControl';
-
 import MaterialOneOfEnumControl, {
   materialOneOfEnumControlTester,
-  MaterialOneOfEnumControl as MaterialOneOfEnumControlUnwrapped,
 } from './MaterialOneOfEnumControl';
-
 import MaterialOneOfRadioGroupControl, {
   materialOneOfRadioGroupControlTester,
-  MaterialOneOfRadioGroupControl as MaterialOneOfRadioGroupControlUnwrapped,
 } from './MaterialOneOfRadioGroupControl';
-
-export const Unwrapped = {
-  MaterialBooleanControl: MaterialBooleanControlUnwrapped,
-  MaterialBooleanToggleControl: MaterialBooleanToggleControlUnwrapped,
-  MaterialEnumControl: MaterialEnumControlUnwrapped,
-  MaterialNativeControl: MaterialNativeControlUnwrapped,
-  MaterialDateControl: MaterialDateControlUnwrapped,
-  MaterialDateTimeControl: MaterialDateTimeControlUnwrapped,
-  MaterialTimeControl: MaterialTimeControlUnwrapped,
-  MaterialSliderControl: MaterialSliderControlUnwrapped,
-  MaterialRadioGroupControl: MaterialRadioGroupControlUnwrapped,
-  MaterialIntegerControl: MaterialIntegerControlUnwrapped,
-  MaterialNumberControl: MaterialNumberControlUnwrapped,
-  MaterialTextControl: MaterialTextControlUnwrapped,
-  MaterialAnyOfStringOrEnumControl: MaterialAnyOfStringOrEnumControlUnwrapped,
-  MaterialOneOfEnumControl: MaterialOneOfEnumControlUnwrapped,
-  MaterialOneOfRadioGroupControl: MaterialOneOfRadioGroupControlUnwrapped,
-};
+import MaterialRadioGroupControl, {
+  materialRadioGroupControlTester,
+} from './MaterialRadioGroupControl';
+import MaterialSliderControl, {
+  materialSliderControlTester,
+} from './MaterialSliderControl';
+import MaterialTextControl, {
+  materialTextControlTester,
+} from './MaterialTextControl';
+import MaterialTimeControl, {
+  materialTimeControlTester,
+} from './MaterialTimeControl';
 
 export {
+  MaterialAnyOfStringOrEnumControl,
+  materialAnyOfStringOrEnumControlTester,
   MaterialBooleanControl,
   materialBooleanControlTester,
   MaterialBooleanToggleControl,
   materialBooleanToggleControlTester,
-  MaterialEnumControl,
-  materialEnumControlTester,
-  MaterialNativeControl,
-  materialNativeControlTester,
   MaterialDateControl,
   materialDateControlTester,
   MaterialDateTimeControl,
   materialDateTimeControlTester,
-  MaterialTimeControl,
-  materialTimeControlTester,
-  MaterialSliderControl,
-  materialSliderControlTester,
-  MaterialRadioGroupControl,
-  materialRadioGroupControlTester,
+  MaterialEnumControl,
+  materialEnumControlTester,
   MaterialIntegerControl,
   materialIntegerControlTester,
+  MaterialNativeControl,
+  materialNativeControlTester,
   MaterialNumberControl,
   materialNumberControlTester,
-  MaterialTextControl,
-  materialTextControlTester,
-  MaterialAnyOfStringOrEnumControl,
-  materialAnyOfStringOrEnumControlTester,
   MaterialOneOfEnumControl,
   materialOneOfEnumControlTester,
   MaterialOneOfRadioGroupControl,
   materialOneOfRadioGroupControlTester,
+  MaterialRadioGroupControl,
+  materialRadioGroupControlTester,
+  MaterialSliderControl,
+  materialSliderControlTester,
+  MaterialTextControl,
+  materialTextControlTester,
+  MaterialTimeControl,
+  materialTimeControlTester,
 };
 
 export * from './MaterialInputControl';
diff --git a/packages/material-renderers/src/controls/unwrapped.ts b/packages/material-renderers/src/controls/unwrapped.ts
new file mode 100644
index 000000000..506f59d28
--- /dev/null
+++ b/packages/material-renderers/src/controls/unwrapped.ts
@@ -0,0 +1,57 @@
+/*
+  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 { MaterialAnyOfStringOrEnumControl } from './MaterialAnyOfStringOrEnumControl';
+import { MaterialBooleanControl } from './MaterialBooleanControl';
+import { MaterialBooleanToggleControl } from './MaterialBooleanToggleControl';
+import { MaterialDateControl } from './MaterialDateControl';
+import { MaterialDateTimeControl } from './MaterialDateTimeControl';
+import { MaterialEnumControl } from './MaterialEnumControl';
+import { MaterialIntegerControl } from './MaterialIntegerControl';
+import { MaterialNativeControl } from './MaterialNativeControl';
+import { MaterialNumberControl } from './MaterialNumberControl';
+import { MaterialOneOfEnumControl } from './MaterialOneOfEnumControl';
+import { MaterialOneOfRadioGroupControl } from './MaterialOneOfRadioGroupControl';
+import { MaterialRadioGroupControl } from './MaterialRadioGroupControl';
+import { MaterialSliderControl } from './MaterialSliderControl';
+import { MaterialTextControl } from './MaterialTextControl';
+import { MaterialTimeControl } from './MaterialTimeControl';
+
+export const UnwrappedControls = {
+  MaterialAnyOfStringOrEnumControl,
+  MaterialBooleanControl,
+  MaterialBooleanToggleControl,
+  MaterialDateControl,
+  MaterialDateTimeControl,
+  MaterialEnumControl,
+  MaterialIntegerControl,
+  MaterialNativeControl,
+  MaterialNumberControl,
+  MaterialOneOfEnumControl,
+  MaterialOneOfRadioGroupControl,
+  MaterialSliderControl,
+  MaterialRadioGroupControl,
+  MaterialTextControl,
+  MaterialTimeControl,
+};
diff --git a/packages/material-renderers/src/index.ts b/packages/material-renderers/src/index.ts
index 7a26642cd..cf456e906 100644
--- a/packages/material-renderers/src/index.ts
+++ b/packages/material-renderers/src/index.ts
@@ -116,10 +116,11 @@ import MaterialCategorizationStepperLayout, {
   materialCategorizationStepperTester,
 } from './layouts/MaterialCategorizationStepperLayout';
 
+export * from './additional';
+export * from './cells';
 export * from './complex';
 export * from './controls';
 export * from './layouts';
-export * from './cells';
 export * from './mui-controls';
 export * from './util';
 
@@ -203,3 +204,15 @@ export const materialCells: JsonFormsCellRendererRegistryEntry[] = [
   { tester: materialTextCellTester, cell: MaterialTextCell },
   { tester: materialTimeCellTester, cell: MaterialTimeCell },
 ];
+
+import { UnwrappedAdditional } from './additional/unwrapped';
+import { UnwrappedComplex } from './complex/unwrapped';
+import { UnwrappedControls } from './controls/unwrapped';
+import { UnwrappedLayouts } from './layouts/unwrapped';
+
+export const Unwrapped = {
+  ...UnwrappedAdditional,
+  ...UnwrappedComplex,
+  ...UnwrappedControls,
+  ...UnwrappedLayouts,
+};
diff --git a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
index aa5092037..8dad438e9 100644
--- a/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
+++ b/packages/material-renderers/src/layouts/ExpandPanelRenderer.tsx
@@ -223,7 +223,7 @@ const ExpandPanelRendererComponent = (props: ExpandPanelProps) => {
   );
 };
 
-const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
+export const ExpandPanelRenderer = React.memo(ExpandPanelRendererComponent);
 
 /**
  * Maps state to dispatch properties of an expand pandel control.
diff --git a/packages/material-renderers/src/layouts/index.ts b/packages/material-renderers/src/layouts/index.ts
index 5e89babb6..98788c02f 100644
--- a/packages/material-renderers/src/layouts/index.ts
+++ b/packages/material-renderers/src/layouts/index.ts
@@ -22,6 +22,11 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+import ExpandPanelRenderer, {
+  ctxDispatchToExpandPanelProps,
+  withContextToExpandPanelProps,
+  withJsonFormsExpandPanelProps,
+} from './ExpandPanelRenderer';
 import MaterialGroupLayout, {
   materialGroupTester,
 } from './MaterialGroupLayout';
@@ -39,8 +44,12 @@ import MaterialArrayLayout, {
 } from './MaterialArrayLayoutRenderer';
 
 export {
-  materialArrayLayoutTester,
+  ExpandPanelRenderer,
+  ctxDispatchToExpandPanelProps,
+  withContextToExpandPanelProps,
+  withJsonFormsExpandPanelProps,
   MaterialArrayLayout,
+  materialArrayLayoutTester,
   MaterialCategorizationLayout,
   materialCategorizationTester,
   MaterialGroupLayout,
@@ -50,3 +59,5 @@ export {
   MaterialVerticalLayout,
   materialVerticalLayoutTester,
 };
+
+export * from './ArrayToolbar';
diff --git a/packages/material-renderers/src/layouts/unwrapped.ts b/packages/material-renderers/src/layouts/unwrapped.ts
new file mode 100644
index 000000000..6b4c58cec
--- /dev/null
+++ b/packages/material-renderers/src/layouts/unwrapped.ts
@@ -0,0 +1,41 @@
+/*
+  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 { ExpandPanelRenderer as ExpandPanelRendererUnwrapped } from './ExpandPanelRenderer';
+import { MaterializedGroupLayoutRenderer } from './MaterialGroupLayout';
+import { MaterialHorizontalLayoutRenderer } from './MaterialHorizontalLayout';
+import { MaterialVerticalLayoutRenderer } from './MaterialVerticalLayout';
+import { MaterialCategorizationLayoutRenderer } from './MaterialCategorizationLayout';
+import { MaterialArrayLayoutRenderer } from './MaterialArrayLayoutRenderer';
+
+export const UnwrappedLayouts = {
+  ExpandPanelRenderer: ExpandPanelRendererUnwrapped,
+  MaterialArrayLayout: MaterialArrayLayoutRenderer,
+  MaterialCategorizationLayout: MaterialCategorizationLayoutRenderer,
+  MaterialGroupLayout: MaterializedGroupLayoutRenderer,
+  MaterialHorizontalLayout: MaterialHorizontalLayoutRenderer,
+  MaterialVerticalLayout: MaterialVerticalLayoutRenderer,
+};
+
+export * from './ArrayToolbar';
diff --git a/packages/material-renderers/src/mui-controls/index.ts b/packages/material-renderers/src/mui-controls/index.ts
index 1fd8f7c44..822f092af 100644
--- a/packages/material-renderers/src/mui-controls/index.ts
+++ b/packages/material-renderers/src/mui-controls/index.ts
@@ -22,10 +22,12 @@
   OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
   THE SOFTWARE.
 */
+export * from './MuiAutocomplete';
 export * from './MuiCheckbox';
-export * from './MuiSelect';
 export * from './MuiInputInteger';
 export * from './MuiInputNumber';
 export * from './MuiInputNumberFormat';
 export * from './MuiInputText';
 export * from './MuiInputTime';
+export * from './MuiSelect';
+export * from './MuiToggle';

From 1e1ccad5f7ebfaf80412c8af3e422faebb12d0d5 Mon Sep 17 00:00:00 2001
From: Stefan Dirix <sdirix@eclipsesource.com>
Date: Fri, 21 Apr 2023 15:46:04 +0200
Subject: [PATCH 17/17] v3.1.0-alpha.2

---
 lerna.json                                   | 15 ++++++++++++---
 packages/angular-material/package-lock.json  |  2 +-
 packages/angular-material/package.json       | 14 +++++++-------
 packages/angular-test/package.json           |  6 +++---
 packages/angular/package.json                |  6 +++---
 packages/core/package.json                   |  2 +-
 packages/examples-app/package.json           |  2 +-
 packages/examples-react/package.json         |  8 ++++----
 packages/examples/package.json               |  6 +++---
 packages/material-renderers/package.json     | 10 +++++-----
 packages/react/package.json                  |  6 +++---
 packages/vanilla-renderers/package.json      | 10 +++++-----
 packages/vue/vue-vanilla/package-lock.json   |  2 +-
 packages/vue/vue-vanilla/package.json        | 12 ++++++------
 packages/vue/vue/package-lock.json           |  2 +-
 packages/vue/vue/package.json                |  8 ++++----
 packages/vue2/vue2-vanilla/package-lock.json |  2 +-
 packages/vue2/vue2-vanilla/package.json      | 10 +++++-----
 packages/vue2/vue2/package-lock.json         |  2 +-
 packages/vue2/vue2/package.json              |  6 +++---
 20 files changed, 70 insertions(+), 61 deletions(-)

diff --git a/lerna.json b/lerna.json
index 4eadf9103..506e14a72 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,14 @@
 {
-  "packages": ["packages/*", "packages/vue/*", "packages/vue2/*"],
-  "version": "3.1.0-alpha.1",
-  "nohoist": ["core-js", "vue", "rollup-plugin-vue", "@vue/test-utils"]
+  "packages": [
+    "packages/*",
+    "packages/vue/*",
+    "packages/vue2/*"
+  ],
+  "version": "3.1.0-alpha.2",
+  "nohoist": [
+    "core-js",
+    "vue",
+    "rollup-plugin-vue",
+    "@vue/test-utils"
+  ]
 }
diff --git a/packages/angular-material/package-lock.json b/packages/angular-material/package-lock.json
index b3829ad3d..a5c2d542e 100644
--- a/packages/angular-material/package-lock.json
+++ b/packages/angular-material/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@jsonforms/angular-material",
-	"version": "3.1.0-alpha.1",
+	"version": "3.1.0-alpha.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/packages/angular-material/package.json b/packages/angular-material/package.json
index 422111502..ffc6fd0f4 100644
--- a/packages/angular-material/package.json
+++ b/packages/angular-material/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/angular-material",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Material Renderer Set for Angular module of JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -69,8 +69,8 @@
     "@angular/material": "^12.0.0 || ^13.0.0 || ^14.0.0",
     "@angular/platform-browser": "^12.0.0 || ^13.0.0 || ^14.0.0",
     "@angular/router": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@jsonforms/angular": "3.1.0-alpha.1",
-    "@jsonforms/core": "3.1.0-alpha.1",
+    "@jsonforms/angular": "3.1.0-alpha.2",
+    "@jsonforms/core": "3.1.0-alpha.2",
     "core-js": "^2.5.3",
     "rxjs": "^6.5.3 || ^7.4.0"
   },
@@ -94,10 +94,10 @@
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",
     "@angular/router": "^12.0.0",
-    "@jsonforms/angular": "^3.1.0-alpha.1",
-    "@jsonforms/angular-test": "^3.1.0-alpha.1",
-    "@jsonforms/core": "^3.1.0-alpha.1",
-    "@jsonforms/examples": "^3.1.0-alpha.1",
+    "@jsonforms/angular": "^3.1.0-alpha.2",
+    "@jsonforms/angular-test": "^3.1.0-alpha.2",
+    "@jsonforms/core": "^3.1.0-alpha.2",
+    "@jsonforms/examples": "^3.1.0-alpha.2",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
diff --git a/packages/angular-test/package.json b/packages/angular-test/package.json
index 1b93d30af..caa85930b 100644
--- a/packages/angular-test/package.json
+++ b/packages/angular-test/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@jsonforms/angular-test",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "private": true,
   "main": "./lib/index.js",
   "dependencies": {
-    "@jsonforms/angular": "^3.1.0-alpha.1",
-    "@jsonforms/core": "^3.1.0-alpha.1"
+    "@jsonforms/angular": "^3.1.0-alpha.2",
+    "@jsonforms/core": "^3.1.0-alpha.2"
   },
   "devDependencies": {
     "@angular-eslint/eslint-plugin": "^12.0.0",
diff --git a/packages/angular/package.json b/packages/angular/package.json
index fa0ed3df8..ed518a8e8 100644
--- a/packages/angular/package.json
+++ b/packages/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/angular",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Angular module of JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -68,7 +68,7 @@
   "peerDependencies": {
     "@angular/core": "^12.0.0 || ^13.0.0 || ^14.0.0",
     "@angular/forms": "^12.0.0 || ^13.0.0 || ^14.0.0",
-    "@jsonforms/core": "3.1.0-alpha.1",
+    "@jsonforms/core": "3.1.0-alpha.2",
     "rxjs": "^6.5.3 || ^7.4.0"
   },
   "devDependencies": {
@@ -80,7 +80,7 @@
     "@angular/compiler-cli": "^12.0.0",
     "@angular/core": "^12.0.0",
     "@angular/forms": "^12.0.0",
-    "@jsonforms/core": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
     "ava": "~2.4.0",
diff --git a/packages/core/package.json b/packages/core/package.json
index 96ecc48b5..d03683799 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/core",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Core module of JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
diff --git a/packages/examples-app/package.json b/packages/examples-app/package.json
index 5be9076e6..f6d4d82e1 100644
--- a/packages/examples-app/package.json
+++ b/packages/examples-app/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/examples-app",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "private": true,
   "license": "MIT",
   "type": "module",
diff --git a/packages/examples-react/package.json b/packages/examples-react/package.json
index 3b703a1ba..4bc8d2cbc 100644
--- a/packages/examples-react/package.json
+++ b/packages/examples-react/package.json
@@ -1,11 +1,11 @@
 {
   "name": "@jsonforms/examples-react",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "private": true,
   "dependencies": {
-    "@jsonforms/core": "^3.1.0-alpha.1",
-    "@jsonforms/examples": "^3.1.0-alpha.1",
-    "@jsonforms/react": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
+    "@jsonforms/examples": "^3.1.0-alpha.2",
+    "@jsonforms/react": "^3.1.0-alpha.2",
     "@mui/material": "~5.2.2",
     "@types/react-highlight": "^0.12.5",
     "@types/react-tabs": "^2.3.3",
diff --git a/packages/examples/package.json b/packages/examples/package.json
index 7a8c6eb3a..f43b14cd2 100644
--- a/packages/examples/package.json
+++ b/packages/examples/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/examples",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "JSON Forms Example Data",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -46,10 +46,10 @@
     "ajv-i18n": "^3.5.0"
   },
   "peerDependencies": {
-    "@jsonforms/core": "3.1.0-alpha.1"
+    "@jsonforms/core": "3.1.0-alpha.2"
   },
   "devDependencies": {
-    "@jsonforms/core": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
     "@typescript-eslint/parser": "^5.54.1",
     "eslint": "^7.32.0",
diff --git a/packages/material-renderers/package.json b/packages/material-renderers/package.json
index 605f1d5eb..b2781cbc9 100644
--- a/packages/material-renderers/package.json
+++ b/packages/material-renderers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/material-renderers",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Material Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -82,8 +82,8 @@
   "peerDependencies": {
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "3.1.0-alpha.1",
-    "@jsonforms/react": "3.1.0-alpha.1",
+    "@jsonforms/core": "3.1.0-alpha.2",
+    "@jsonforms/react": "3.1.0-alpha.2",
     "@mui/icons-material": "~5.2.2",
     "@mui/material": "~5.2.2",
     "@mui/x-date-pickers": "^5.0.0-beta.5"
@@ -91,8 +91,8 @@
   "devDependencies": {
     "@emotion/react": "^11.5.0",
     "@emotion/styled": "^11.3.0",
-    "@jsonforms/core": "^3.1.0-alpha.1",
-    "@jsonforms/react": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
+    "@jsonforms/react": "^3.1.0-alpha.2",
     "@mui/icons-material": "~5.2.0",
     "@mui/material": "~5.2.2",
     "@mui/x-date-pickers": "^5.0.0-beta.5",
diff --git a/packages/react/package.json b/packages/react/package.json
index 7b15f9b09..a7511ba75 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/react",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "React module of JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -85,14 +85,14 @@
     "lodash": "^4.17.15"
   },
   "peerDependencies": {
-    "@jsonforms/core": "3.1.0-alpha.1",
+    "@jsonforms/core": "3.1.0-alpha.2",
     "react": "^16.12.0 || ^17.0.0 || ^18.0.0"
   },
   "optionalPeerDependencies": {
     "react-redux": "^7.1.3"
   },
   "devDependencies": {
-    "@jsonforms/core": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
     "@rollup/plugin-alias": "^3.1.8",
     "@types/enzyme": "^3.10.3",
     "@types/object-hash": "^1.3.0",
diff --git a/packages/vanilla-renderers/package.json b/packages/vanilla-renderers/package.json
index ebf54ff34..dc8cb4114 100644
--- a/packages/vanilla-renderers/package.json
+++ b/packages/vanilla-renderers/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/vanilla-renderers",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Default Renderer Set for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -44,14 +44,14 @@
     "customization"
   ],
   "peerDependencies": {
-    "@jsonforms/core": "3.1.0-alpha.1",
-    "@jsonforms/react": "3.1.0-alpha.1",
+    "@jsonforms/core": "3.1.0-alpha.2",
+    "@jsonforms/react": "3.1.0-alpha.2",
     "react": "^16.12.0 || ^17.0.0 || ^18.0.0"
   },
   "devDependencies": {
     "@istanbuljs/nyc-config-typescript": "^1.0.2",
-    "@jsonforms/core": "^3.1.0-alpha.1",
-    "@jsonforms/react": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
+    "@jsonforms/react": "^3.1.0-alpha.2",
     "@rollup/plugin-commonjs": "^23.0.3",
     "@rollup/plugin-json": "^5.0.2",
     "@rollup/plugin-node-resolve": "^15.0.1",
diff --git a/packages/vue/vue-vanilla/package-lock.json b/packages/vue/vue-vanilla/package-lock.json
index eeb303015..9fe6098c1 100644
--- a/packages/vue/vue-vanilla/package-lock.json
+++ b/packages/vue/vue-vanilla/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@jsonforms/vue-vanilla",
-	"version": "3.1.0-alpha.1",
+	"version": "3.1.0-alpha.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/packages/vue/vue-vanilla/package.json b/packages/vue/vue-vanilla/package.json
index f62480061..60c86b4c8 100644
--- a/packages/vue/vue-vanilla/package.json
+++ b/packages/vue/vue-vanilla/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/vue-vanilla",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Vue 3 Vanilla renderers for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -58,8 +58,8 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.9.0",
-    "@jsonforms/core": "^3.1.0-alpha.1",
-    "@jsonforms/vue": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
+    "@jsonforms/vue": "^3.1.0-alpha.2",
     "@types/chai": "^4.2.11",
     "@types/jest": "^24.0.23",
     "@types/mocha": "^5.2.4",
@@ -69,8 +69,8 @@
     "@vue/cli-plugin-typescript": "~4.5.18",
     "@vue/cli-plugin-unit-mocha": "~4.5.18",
     "@vue/cli-service": "~4.5.18",
-    "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/compiler-sfc": "^3.2.26",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.0.2",
     "chai": "^4.1.2",
     "cross-env": "^7.0.2",
@@ -94,8 +94,8 @@
     "vue-jest": "^5.0.0-0"
   },
   "peerDependencies": {
-    "@jsonforms/core": "3.1.0-alpha.1",
-    "@jsonforms/vue": "3.1.0-alpha.1",
+    "@jsonforms/core": "3.1.0-alpha.2",
+    "@jsonforms/vue": "3.1.0-alpha.2",
     "vue": "^3.2.26"
   }
 }
diff --git a/packages/vue/vue/package-lock.json b/packages/vue/vue/package-lock.json
index 11a5b6e37..5314139db 100644
--- a/packages/vue/vue/package-lock.json
+++ b/packages/vue/vue/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@jsonforms/vue",
-	"version": "3.1.0-alpha.1",
+	"version": "3.1.0-alpha.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/packages/vue/vue/package.json b/packages/vue/vue/package.json
index 18d93d644..140b78c9d 100644
--- a/packages/vue/vue/package.json
+++ b/packages/vue/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/vue",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Vue 3 module of JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -50,7 +50,7 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.9.0",
-    "@jsonforms/core": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
     "@rollup/plugin-alias": "^3.1.8",
     "@types/jest": "^24.0.23",
     "@typescript-eslint/eslint-plugin": "^5.54.1",
@@ -59,8 +59,8 @@
     "@vue/cli-plugin-typescript": "~4.5.18",
     "@vue/cli-plugin-unit-jest": "~4.5.18",
     "@vue/cli-service": "~4.5.18",
-    "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/compiler-sfc": "^3.2.26",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.0.2",
     "core-js": "^3.9.1",
     "cross-env": "^7.0.2",
@@ -82,7 +82,7 @@
     "vue-jest": "^5.0.0-0"
   },
   "peerDependencies": {
-    "@jsonforms/core": "3.1.0-alpha.1",
+    "@jsonforms/core": "3.1.0-alpha.2",
     "vue": "^3.2.26"
   }
 }
diff --git a/packages/vue2/vue2-vanilla/package-lock.json b/packages/vue2/vue2-vanilla/package-lock.json
index e1838c572..31be17e26 100644
--- a/packages/vue2/vue2-vanilla/package-lock.json
+++ b/packages/vue2/vue2-vanilla/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@jsonforms/vue2-vanilla",
-	"version": "3.1.0-alpha.1",
+	"version": "3.1.0-alpha.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/packages/vue2/vue2-vanilla/package.json b/packages/vue2/vue2-vanilla/package.json
index 5d7fc927f..beb66c1fe 100644
--- a/packages/vue2/vue2-vanilla/package.json
+++ b/packages/vue2/vue2-vanilla/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/vue2-vanilla",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Vue 2 Vanilla renderers for JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -55,8 +55,8 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.9.0",
-    "@jsonforms/core": "^3.1.0-alpha.1",
-    "@jsonforms/vue2": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
+    "@jsonforms/vue2": "^3.1.0-alpha.2",
     "@rollup/plugin-alias": "^3.1.8",
     "@types/jest": "^24.0.23",
     "@vue/cli-plugin-babel": "~4.5.18",
@@ -80,8 +80,8 @@
     "vue-template-compiler": "^2.7.0"
   },
   "peerDependencies": {
-    "@jsonforms/core": "3.1.0-alpha.1",
-    "@jsonforms/vue2": "3.1.0-alpha.1",
+    "@jsonforms/core": "3.1.0-alpha.2",
+    "@jsonforms/vue2": "3.1.0-alpha.2",
     "vue": "^2.7.0"
   }
 }
diff --git a/packages/vue2/vue2/package-lock.json b/packages/vue2/vue2/package-lock.json
index 4cbd29e19..94ac3a22a 100644
--- a/packages/vue2/vue2/package-lock.json
+++ b/packages/vue2/vue2/package-lock.json
@@ -1,6 +1,6 @@
 {
 	"name": "@jsonforms/vue2",
-	"version": "3.1.0-alpha.1",
+	"version": "3.1.0-alpha.2",
 	"lockfileVersion": 1,
 	"requires": true,
 	"dependencies": {
diff --git a/packages/vue2/vue2/package.json b/packages/vue2/vue2/package.json
index 391a65dc8..167365335 100644
--- a/packages/vue2/vue2/package.json
+++ b/packages/vue2/vue2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@jsonforms/vue2",
-  "version": "3.1.0-alpha.1",
+  "version": "3.1.0-alpha.2",
   "description": "Vue 2 module of JSON Forms",
   "repository": "https://github.com/eclipsesource/jsonforms",
   "bugs": "https://github.com/eclipsesource/jsonforms/issues",
@@ -51,7 +51,7 @@
     "@babel/core": "^7.9.0",
     "@babel/preset-env": "^7.9.5",
     "@babel/preset-typescript": "^7.9.0",
-    "@jsonforms/core": "^3.1.0-alpha.1",
+    "@jsonforms/core": "^3.1.0-alpha.2",
     "@rollup/plugin-alias": "^3.1.8",
     "@types/jest": "^24.0.23",
     "@vue/cli-plugin-babel": "~4.5.18",
@@ -73,7 +73,7 @@
     "vue-template-compiler": "^2.7.0"
   },
   "peerDependencies": {
-    "@jsonforms/core": "3.1.0-alpha.1",
+    "@jsonforms/core": "3.1.0-alpha.2",
     "vue": "^2.7.0"
   }
 }