@rjsf/core 5.0.0-beta.11 → 5.0.0-beta.12

package/dist/core.esm.js

@@ -1,8 +1,8 @@
 import React, { Component, useState, useCallback, useEffect, useReducer, useMemo, forwardRef } from 'react';
 import { isFixedItems, allowAdditionalItems, ITEMS_KEY, getUiOptions, getTemplate, isCustomWidget, getWidget, optionsList, guessType, deepEquals, asNumber, REF_KEY, orderProperties, PROPERTIES_KEY, ADDITIONAL_PROPERTY_FLAG, mergeObjects, getSchemaType, ID_KEY, hasWidget, getInputProps, getSubmitButtonOptions, canExpand, parseDateString, toDateString, pad, schemaRequiresTrueValue, utcToLocal, localToUTC, dataURItoBlob, processSelectValue, isObject as isObject$1, createSchemaUtils, shouldRender, RJSF_ADDITONAL_PROPERTIES_FLAG, NAME_KEY } from '@rjsf/utils';
-import _pick from 'lodash-es/pick';
 import get from 'lodash-es/get';
 import _isEmpty from 'lodash-es/isEmpty';
+import _pick from 'lodash-es/pick';
 import isObject from 'lodash-es/isObject';
 import set from 'lodash-es/set';
 import { nanoid } from 'nanoid';
@@ -11,7 +11,6 @@ import has from 'lodash-es/has';
 import omit from 'lodash-es/omit';
 
 /** Used to generate a unique ID for an element in a row */
-
 function generateRowId() {
   return nanoid();
 }
@@ -20,8 +19,6 @@ function generateRowId() {
  * @param formData - The data for the form
  * @returns - The `formData` converted into a `KeyedFormDataType` element
  */
-
-
 function generateKeyedFormData(formData) {
   return !Array.isArray(formData) ? [] : formData.map(item => {
     return {
@@ -35,20 +32,15 @@ function generateKeyedFormData(formData) {
  * @param keyedFormData - The `KeyedFormDataType` to be converted
  * @returns - The inner `formData` item(s) in the `keyedFormData`
  */
-
-
 function keyedToPlainFormData(keyedFormData) {
   if (Array.isArray(keyedFormData)) {
     return keyedFormData.map(keyedItem => keyedItem.item);
   }
-
   return [];
 }
 /** The `ArrayField` component is used to render a field in the schema that is of type `array`. It supports both normal
  * and fixed array, allowing user to add and remove elements from the array data.
  */
-
-
 class ArrayField extends Component {
   /** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData`
    *
@@ -56,7 +48,6 @@ class ArrayField extends Component {
    */
   constructor(props) {
     super(props);
-
     this._getNewFormDataRow = () => {
       const {
         schema,
@@ -66,20 +57,16 @@ class ArrayField extends Component {
         schemaUtils
       } = registry;
       let itemSchema = schema.items;
-
       if (isFixedItems(schema) && allowAdditionalItems(schema)) {
         itemSchema = schema.additionalItems;
-      } // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], F> call on the class
-
-
+      }
+      // Cast this as a T to work around schema utils being for T[] caused by the FieldProps<T[], S, F> call on the class
       return schemaUtils.getDefaultFormState(itemSchema);
     };
-
     this.onAddClick = event => {
       if (event) {
         event.preventDefault();
       }
-
       const {
         onChange
       } = this.props;
@@ -96,13 +83,11 @@ class ArrayField extends Component {
         updatedKeyedFormData: true
       }, () => onChange(keyedToPlainFormData(newKeyedFormData)));
     };
-
     this.onAddIndexClick = index => {
       return event => {
         if (event) {
           event.preventDefault();
         }
-
         const {
           onChange
         } = this.props;
@@ -121,29 +106,24 @@ class ArrayField extends Component {
         }, () => onChange(keyedToPlainFormData(newKeyedFormData)));
       };
     };
-
     this.onDropIndexClick = index => {
       return event => {
         if (event) {
           event.preventDefault();
         }
-
         const {
           onChange,
           errorSchema
         } = this.props;
         const {
           keyedFormData
-        } = this.state; // refs #195: revalidate to ensure properly reindexing errors
-
+        } = this.state;
+        // refs #195: revalidate to ensure properly reindexing errors
         let newErrorSchema;
-
         if (errorSchema) {
           newErrorSchema = {};
-
           for (const idx in errorSchema) {
             const i = parseInt(idx);
-
             if (i < index) {
               set(newErrorSchema, [i], errorSchema[idx]);
             } else if (i > index) {
@@ -151,7 +131,6 @@ class ArrayField extends Component {
             }
           }
         }
-
         const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
         this.setState({
           keyedFormData: newKeyedFormData,
@@ -159,26 +138,21 @@ class ArrayField extends Component {
         }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
       };
     };
-
     this.onReorderClick = (index, newIndex) => {
       return event => {
         if (event) {
           event.preventDefault();
           event.currentTarget.blur();
         }
-
         const {
           onChange,
           errorSchema
         } = this.props;
         let newErrorSchema;
-
         if (this.props.errorSchema) {
           newErrorSchema = {};
-
           for (const idx in errorSchema) {
             const i = parseInt(idx);
-
             if (i == index) {
               set(newErrorSchema, [newIndex], errorSchema[index]);
             } else if (i == newIndex) {
@@ -188,30 +162,23 @@ class ArrayField extends Component {
             }
           }
         }
-
         const {
           keyedFormData
         } = this.state;
-
         function reOrderArray() {
           // Copy item
-          const _newKeyedFormData = keyedFormData.slice(); // Moves item from index to newIndex
-
-
+          const _newKeyedFormData = keyedFormData.slice();
+          // Moves item from index to newIndex
           _newKeyedFormData.splice(index, 1);
-
           _newKeyedFormData.splice(newIndex, 0, keyedFormData[index]);
-
           return _newKeyedFormData;
         }
-
         const newKeyedFormData = reOrderArray();
         this.setState({
           keyedFormData: newKeyedFormData
         }, () => onChange(keyedToPlainFormData(newKeyedFormData), newErrorSchema));
       };
     };
-
     this.onChangeForIndex = index => {
       return (value, newErrorSchema, id) => {
         const {
@@ -226,12 +193,12 @@ class ArrayField extends Component {
           const jsonValue = typeof value === "undefined" ? null : value;
           return index === i ? jsonValue : item;
         });
-        onChange(newFormData, errorSchema && errorSchema && { ...errorSchema,
+        onChange(newFormData, errorSchema && errorSchema && {
+          ...errorSchema,
           [index]: newErrorSchema
         }, id);
       };
     };
-
     this.onSelectChange = value => {
       const {
         onChange,
@@ -239,13 +206,10 @@ class ArrayField extends Component {
       } = this.props;
       onChange(value, undefined, idSchema && idSchema.$id);
     };
-
     const {
       formData: _formData = []
     } = props;
-
     const _keyedFormData = generateKeyedFormData(_formData);
-
     this.state = {
       keyedFormData: _keyedFormData,
       updatedKeyedFormData: false
@@ -257,8 +221,6 @@ class ArrayField extends Component {
    * @param nextProps - The next set of props data
    * @param prevState - The previous set of state data
    */
-
-
   static getDerivedStateFromProps(nextProps, prevState) {
     // Don't call getDerivedStateFromProps if keyed formdata was just updated.
     if (prevState.updatedKeyedFormData) {
@@ -266,7 +228,6 @@ class ArrayField extends Component {
         updatedKeyedFormData: false
       };
     }
-
     const nextFormData = Array.isArray(nextProps.formData) ? nextProps.formData : [];
     const previousKeyedFormData = prevState.keyedFormData || [];
     const newKeyedFormData = nextFormData.length === previousKeyedFormData.length ? previousKeyedFormData.map((previousKeyedFormDatum, index) => {
@@ -282,8 +243,6 @@ class ArrayField extends Component {
   /** Returns the appropriate title for an item by getting first the title from the schema.items, then falling back to
    * the description from the schema.items, and finally the string "Item"
    */
-
-
   get itemTitle() {
     const {
       schema
@@ -296,16 +255,13 @@ class ArrayField extends Component {
    * @param itemSchema - The schema for the item
    * @return - True if the item schema type does not contain the "null" type
    */
-
-
   isItemRequired(itemSchema) {
     if (Array.isArray(itemSchema.type)) {
       // While we don't yet support composite/nullable jsonschema types, it's
       // future-proof to check for requirement against these.
       return !itemSchema.type.includes("null");
-    } // All non-null array item types are inherently required by design
-
-
+    }
+    // All non-null array item types are inherently required by design
     return itemSchema.type !== "null";
   }
   /** Determines whether more items can be added to the array. If the uiSchema indicates the array doesn't allow adding
@@ -315,8 +271,6 @@ class ArrayField extends Component {
    * @param formItems - The list of items in the form
    * @returns - True if the item is addable otherwise false
    */
-
-
   canAddItem(formItems) {
     const {
       schema,
@@ -325,7 +279,6 @@ class ArrayField extends Component {
     let {
       addable
     } = getUiOptions(uiSchema);
-
     if (addable !== false) {
       // if ui:options.addable was not explicitly set to false, we can add
       // another item if we have not exceeded maxItems yet
@@ -335,14 +288,12 @@ class ArrayField extends Component {
         addable = true;
       }
     }
-
     return addable;
   }
   /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
    * that the schema is fixed and allows additional items.
    */
 
-
   /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
    */
   render() {
@@ -355,7 +306,6 @@ class ArrayField extends Component {
     const {
       schemaUtils
     } = registry;
-
     if (!(ITEMS_KEY in schema)) {
       const uiOptions = getUiOptions(uiSchema);
       const UnsupportedFieldTemplate = getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
@@ -366,30 +316,23 @@ class ArrayField extends Component {
         registry: registry
       });
     }
-
     if (schemaUtils.isMultiSelect(schema)) {
       // If array has enum or uniqueItems set to true, call renderMultiSelect() to render the default multiselect widget or a custom widget, if specified.
       return this.renderMultiSelect();
     }
-
     if (isCustomWidget(uiSchema)) {
       return this.renderCustomWidget();
     }
-
     if (isFixedItems(schema)) {
       return this.renderFixedArray();
     }
-
     if (schemaUtils.isFilesArray(schema, uiSchema)) {
       return this.renderFiles();
     }
-
     return this.renderNormalArray();
   }
   /** Renders a normal array without any limitations of length
    */
-
-
   renderNormalArray() {
     const {
       schema,
@@ -417,9 +360,7 @@ class ArrayField extends Component {
       formContext
     } = registry;
     const uiOptions = getUiOptions(uiSchema);
-
     const _schemaItems = isObject(schema.items) ? schema.items : {};
-
     const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
     const formData = keyedToPlainFormData(this.state.keyedFormData);
     const arrayProps = {
@@ -428,8 +369,8 @@ class ArrayField extends Component {
         const {
           key,
           item
-        } = keyedItem; // While we are actually dealing with a single item of type T, the types require a T[], so cast
-
+        } = keyedItem;
+        // While we are actually dealing with a single item of type T, the types require a T[], so cast
         const itemCast = item;
         const itemSchema = schemaUtils.retrieveSchema(_schemaItems, itemCast);
         const itemErrorSchema = errorSchema ? errorSchema[index] : undefined;
@@ -438,10 +379,10 @@ class ArrayField extends Component {
         return this.renderArrayFieldItem({
           key,
           index,
-          name: name && name + "-" + index,
+          name: name && `${name}-${index}`,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
-          itemSchema: itemSchema,
+          itemSchema,
           itemIdSchema,
           itemErrorSchema,
           itemData: itemCast,
@@ -452,7 +393,7 @@ class ArrayField extends Component {
           rawErrors
         });
       }),
-      className: "field field-array field-array-of-" + itemsSchema.type,
+      className: `field field-array field-array-of-${itemsSchema.type}`,
       disabled,
       idSchema,
       uiSchema,
@@ -467,13 +408,12 @@ class ArrayField extends Component {
       registry
     };
     const Template = getTemplate("ArrayFieldTemplate", registry, uiOptions);
-    return /*#__PURE__*/React.createElement(Template, { ...arrayProps
+    return /*#__PURE__*/React.createElement(Template, {
+      ...arrayProps
     });
   }
   /** Renders an array using the custom widget provided by the user in the `uiSchema`
    */
-
-
   renderCustomWidget() {
     const {
       schema,
@@ -526,8 +466,6 @@ class ArrayField extends Component {
   }
   /** Renders an array as a set of checkboxes
    */
-
-
   renderMultiSelect() {
     const {
       schema,
@@ -564,7 +502,8 @@ class ArrayField extends Component {
       onChange: this.onSelectChange,
       onBlur: onBlur,
       onFocus: onFocus,
-      options: { ...options,
+      options: {
+        ...options,
         enumOptions
       },
       schema: schema,
@@ -583,8 +522,6 @@ class ArrayField extends Component {
   }
   /** Renders an array of files using the `FileWidget`
    */
-
-
   renderFiles() {
     const {
       schema,
@@ -634,8 +571,6 @@ class ArrayField extends Component {
   }
   /** Renders an array that has a maximum limit of items
    */
-
-
   renderFixedArray() {
     const {
       schema,
@@ -667,20 +602,15 @@ class ArrayField extends Component {
       schemaUtils,
       formContext
     } = registry;
-
     const _schemaItems = isObject(schema.items) ? schema.items : [];
-
     const itemSchemas = _schemaItems.map((item, index) => schemaUtils.retrieveSchema(item, formData[index]));
-
     const additionalSchema = isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, formData) : null;
-
     if (!items || items.length < itemSchemas.length) {
       // to make sure at least all fixed items are generated
       items = items || [];
       items = items.concat(new Array(itemSchemas.length - items.length));
-    } // These are the props passed into the render function
-
-
+    }
+    // These are the props passed into the render function
     const arrayProps = {
       canAdd: this.canAddItem(items) && !!additionalSchema,
       className: "field field-array field-array-fixed-items",
@@ -691,8 +621,8 @@ class ArrayField extends Component {
         const {
           key,
           item
-        } = keyedItem; // While we are actually dealing with a single item of type T, the types require a T[], so cast
-
+        } = keyedItem;
+        // While we are actually dealing with a single item of type T, the types require a T[], so cast
         const itemCast = item;
         const additional = index >= itemSchemas.length;
         const itemSchema = additional && isObject(schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index];
@@ -703,7 +633,7 @@ class ArrayField extends Component {
         return this.renderArrayFieldItem({
           key,
           index,
-          name: name && name + "-" + index,
+          name: name && `${name}-${index}`,
           canRemove: additional,
           canMoveUp: index >= itemSchemas.length + 1,
           canMoveDown: additional && index < items.length - 1,
@@ -729,7 +659,8 @@ class ArrayField extends Component {
       rawErrors
     };
     const Template = getTemplate("ArrayFieldTemplate", registry, uiOptions);
-    return /*#__PURE__*/React.createElement(Template, { ...arrayProps
+    return /*#__PURE__*/React.createElement(Template, {
+      ...arrayProps
     });
   }
   /** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
@@ -737,8 +668,6 @@ class ArrayField extends Component {
    *
    * @param props - The props for the individual array item to be rendered
    */
-
-
   renderArrayFieldItem(props) {
     const {
       key,
@@ -824,7 +753,6 @@ class ArrayField extends Component {
       uiSchema: itemUiSchema
     };
   }
-
 }
 
 /** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
@@ -832,7 +760,6 @@ class ArrayField extends Component {
  *
  * @param props - The `FieldProps` for this template
  */
-
 function BooleanField(props) {
   const {
     schema,
@@ -863,27 +790,22 @@ function BooleanField(props) {
   } = getUiOptions(uiSchema);
   const Widget = getWidget(schema, widget, widgets);
   let enumOptions;
-
   if (Array.isArray(schema.oneOf)) {
     enumOptions = optionsList({
       oneOf: schema.oneOf.map(option => {
         if (isObject(option)) {
-          return { ...option,
+          return {
+            ...option,
             title: option.title || (option.const === true ? "Yes" : "No")
           };
         }
-
         return undefined;
       }).filter(o => o) // cast away the error that typescript can't grok is fixed
-
     });
   } else {
-    var _schema$enum;
-
     // We deprecated enumNames in v5. It's intentionally omitted from RSJFSchema type, so we need to cast here.
     const schemaWithEnumNames = schema;
-    const enums = (_schema$enum = schema.enum) != null ? _schema$enum : [true, false];
-
+    const enums = schema.enum ?? [true, false];
     if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(v => typeof v === "boolean")) {
       enumOptions = [{
         value: enums[0],
@@ -900,9 +822,9 @@ function BooleanField(props) {
       });
     }
   }
-
   return /*#__PURE__*/React.createElement(Widget, {
-    options: { ...options,
+    options: {
+      ...options,
       enumOptions
     },
     schema: schema,
@@ -928,7 +850,6 @@ function BooleanField(props) {
  *
  * @param props - The `FieldProps` for this template
  */
-
 class AnyOfField extends Component {
   /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
    *
@@ -936,7 +857,6 @@ class AnyOfField extends Component {
    */
   constructor(props) {
     super(props);
-
     this.onOptionChange = option => {
       const selectedOption = parseInt(option, 10);
       const {
@@ -948,16 +868,15 @@ class AnyOfField extends Component {
       const {
         schemaUtils
       } = registry;
-      const newOption = schemaUtils.retrieveSchema(options[selectedOption], formData); // If the new option is of type object and the current data is an object,
+      const newOption = schemaUtils.retrieveSchema(options[selectedOption], formData);
+      // If the new option is of type object and the current data is an object,
       // discard properties added using the old option.
-
       let newFormData = undefined;
-
       if (guessType(formData) === "object" && (newOption.type === "object" || newOption.properties)) {
         newFormData = Object.assign({}, formData);
         const optionsToDiscard = options.slice();
-        optionsToDiscard.splice(selectedOption, 1); // Discard any data added using other options
-
+        optionsToDiscard.splice(selectedOption, 1);
+        // Discard any data added using other options
         for (const option of optionsToDiscard) {
           if (option.properties) {
             for (const key in option.properties) {
@@ -967,15 +886,13 @@ class AnyOfField extends Component {
             }
           }
         }
-      } // Call getDefaultFormState to make sure defaults are populated on change.
-
-
+      }
+      // Call getDefaultFormState to make sure defaults are populated on change.
       onChange(schemaUtils.getDefaultFormState(options[selectedOption], newFormData), undefined, this.getFieldId());
       this.setState({
         selectedOption: parseInt(option, 10)
       });
     };
-
     const {
       formData: _formData,
       options: _options
@@ -990,8 +907,6 @@ class AnyOfField extends Component {
    * @param prevProps - The previous `FieldProps` for this template
    * @param prevState - The previous `AnyOfFieldState` for this template
    */
-
-
   componentDidUpdate(prevProps, prevState) {
     const {
       formData,
@@ -1001,14 +916,11 @@ class AnyOfField extends Component {
     const {
       selectedOption
     } = this.state;
-
     if (!deepEquals(formData, prevProps.formData) && idSchema.$id === prevProps.idSchema.$id) {
       const matchingOption = this.getMatchingOption(selectedOption, formData, options);
-
       if (!prevState || matchingOption === selectedOption) {
         return;
       }
-
       this.setState({
         selectedOption: matchingOption
       });
@@ -1020,20 +932,16 @@ class AnyOfField extends Component {
    * @param options - The list of options to choose from
    * @return - The index of the `option` that best matches the `formData`
    */
-
-
   getMatchingOption(selectedOption, formData, options) {
     const {
       schemaUtils
     } = this.props.registry;
     const option = schemaUtils.getMatchingOption(formData, options);
-
     if (option !== 0) {
       return option;
-    } // If the form data matches none of the options, use the currently selected
+    }
+    // If the form data matches none of the options, use the currently selected
     // option, assuming it's available; otherwise use the first option
-
-
     return selectedOption || 0;
   }
   /** Callback handler to remember what the currently selected option is. In addition to that the `formData` is updated
@@ -1043,18 +951,15 @@ class AnyOfField extends Component {
    * @param option -
    */
 
-
   getFieldId() {
     const {
       idSchema,
       schema
     } = this.props;
-    return "" + idSchema.$id + (schema.oneOf ? "__oneof_select" : "__anyof_select");
+    return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
   }
   /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
    */
-
-
   render() {
     const {
       name,
@@ -1094,7 +999,6 @@ class AnyOfField extends Component {
     }, widget, widgets);
     const option = options[selectedOption] || null;
     let optionSchema;
-
     if (option) {
       // If the subschema doesn't declare a type, infer the type from the
       // parent schema
@@ -1102,9 +1006,8 @@ class AnyOfField extends Component {
         type: baseType
       });
     }
-
     const enumOptions = options.map((option, index) => ({
-      label: option.title || "Option " + (index + 1),
+      label: option.title || `Option ${index + 1}`,
       value: index
     }));
     return /*#__PURE__*/React.createElement("div", {
@@ -1147,18 +1050,17 @@ class AnyOfField extends Component {
       hideError: hideError
     }));
   }
-
 }
 
+// Matches a string that ends in a . character, optionally followed by a sequence of
 // digits followed by any number of 0 characters up until the end of the line.
 // Ensuring that there is at least one prefixed character is important so that
 // you don't incorrectly match against "0".
-
-const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/; // This is used for trimming the trailing 0 and . characters without affecting
+const trailingCharMatcherWithPrefix = /\.([0-9]*0)*$/;
+// This is used for trimming the trailing 0 and . characters without affecting
 // the rest of the string. Its possible to use one RegEx with groups for this
 // functionality, but it is fairly complex compared to simply defining two
 // different matchers.
-
 const trailingCharMatcher = /[0.]0*$/;
 /**
  * The NumberField class has some special handling for dealing with trailing
@@ -1177,7 +1079,6 @@ const trailingCharMatcher = /[0.]0*$/;
  *    value cached in the state. If it matches the cached value, the cached
  *    value is passed to the input instead of the formData value
  */
-
 function NumberField(props) {
   const {
     registry,
@@ -1194,36 +1095,33 @@ function NumberField(props) {
    *
    * @param value - The current value for the change occurring
    */
-
   const handleChange = useCallback(value => {
     // Cache the original value in component state
-    setLastValue(value); // Normalize decimals that don't start with a zero character in advance so
+    setLastValue(value);
+    // Normalize decimals that don't start with a zero character in advance so
     // that the rest of the normalization logic is simpler
-
-    if (("" + value).charAt(0) === ".") {
-      value = "0" + value;
-    } // Check that the value is a string (this can happen if the widget used is a
+    if (`${value}`.charAt(0) === ".") {
+      value = `0${value}`;
+    }
+    // Check that the value is a string (this can happen if the widget used is a
     // <select>, due to an enum declaration etc) then, if the value ends in a
     // trailing decimal point or multiple zeroes, strip the trailing values
-
-
     const processed = typeof value === "string" && value.match(trailingCharMatcherWithPrefix) ? asNumber(value.replace(trailingCharMatcher, "")) : asNumber(value);
     onChange(processed);
   }, [onChange]);
-
   if (typeof lastValue === "string" && typeof value === "number") {
     // Construct a regular expression that checks for a string that consists
     // of the formData value suffixed with zero or one '.' characters and zero
     // or more '0' characters
-    const re = new RegExp(("" + value).replace(".", "\\.") + "\\.?0*$"); // If the cached "lastValue" is a match, use that instead of the formData
+    const re = new RegExp(`${value}`.replace(".", "\\.") + "\\.?0*$");
+    // If the cached "lastValue" is a match, use that instead of the formData
     // value to prevent the input value from changing in the UI
-
     if (lastValue.match(re)) {
       value = lastValue;
     }
   }
-
-  return /*#__PURE__*/React.createElement(StringField, { ...props,
+  return /*#__PURE__*/React.createElement(StringField, {
+    ...props,
     formData: value,
     onChange: handleChange
   });
@@ -1234,30 +1132,25 @@ function NumberField(props) {
  *
  * @param props - The `FieldProps` for this template
  */
-
 class ObjectField extends Component {
   constructor() {
     var _this;
-
     super(...arguments);
     _this = this;
     this.state = {
       wasPropertyKeyModified: false,
       additionalProperties: {}
     };
-
     this.onPropertyChange = function (name, addedByAdditionalProperties) {
       if (addedByAdditionalProperties === void 0) {
         addedByAdditionalProperties = false;
       }
-
       return (value, newErrorSchema, id) => {
         const {
           formData,
           onChange,
           errorSchema
         } = _this.props;
-
         if (value === undefined && addedByAdditionalProperties) {
           // Don't set value = undefined for fields added by
           // additionalProperties. Doing so removes them from the
@@ -1268,16 +1161,16 @@ class ObjectField extends Component {
           // set empty values to the empty string.
           value = "";
         }
-
-        const newFormData = { ...formData,
+        const newFormData = {
+          ...formData,
           [name]: value
         };
-        onChange(newFormData, errorSchema && errorSchema && { ...errorSchema,
+        onChange(newFormData, errorSchema && errorSchema && {
+          ...errorSchema,
           [name]: newErrorSchema
         }, id);
       };
     };
-
     this.onDropPropertyClick = key => {
       return event => {
         event.preventDefault();
@@ -1285,13 +1178,13 @@ class ObjectField extends Component {
           onChange,
           formData
         } = this.props;
-        const copiedFormData = { ...formData
+        const copiedFormData = {
+          ...formData
         };
         unset(copiedFormData, key);
         onChange(copiedFormData);
       };
     };
-
     this.getAvailableKey = (preferredKey, formData) => {
       const {
         uiSchema
@@ -1301,27 +1194,24 @@ class ObjectField extends Component {
       } = getUiOptions(uiSchema);
       let index = 0;
       let newKey = preferredKey;
-
       while (newKey in formData) {
-        newKey = "" + preferredKey + duplicateKeySuffixSeparator + ++index;
+        newKey = `${preferredKey}${duplicateKeySuffixSeparator}${++index}`;
       }
-
       return newKey;
     };
-
     this.onKeyChange = oldValue => {
       return (value, newErrorSchema) => {
         if (oldValue === value) {
           return;
         }
-
         const {
           formData,
           onChange,
           errorSchema
         } = this.props;
         value = this.getAvailableKey(value, formData);
-        const newFormData = { ...formData
+        const newFormData = {
+          ...formData
         };
         const newKeys = {
           [oldValue]: value
@@ -1336,29 +1226,27 @@ class ObjectField extends Component {
         this.setState({
           wasPropertyKeyModified: true
         });
-        onChange(renamedObj, errorSchema && errorSchema && { ...errorSchema,
+        onChange(renamedObj, errorSchema && errorSchema && {
+          ...errorSchema,
           [value]: newErrorSchema
         });
       };
     };
-
     this.handleAddClick = schema => () => {
       if (!schema.additionalProperties) {
         return;
       }
-
       const {
         formData,
         onChange,
         registry
       } = this.props;
-      const newFormData = { ...formData
+      const newFormData = {
+        ...formData
       };
       let type = undefined;
-
       if (isObject(schema.additionalProperties)) {
         type = schema.additionalProperties.type;
-
         if (REF_KEY in schema.additionalProperties) {
           const {
             schemaUtils
@@ -1369,14 +1257,12 @@ class ObjectField extends Component {
           type = refSchema.type;
         }
       }
-
-      const newKey = this.getAvailableKey("newKey", newFormData); // Cast this to make the `set` work properly
-
+      const newKey = this.getAvailableKey("newKey", newFormData);
+      // Cast this to make the `set` work properly
       set(newFormData, newKey, this.getDefaultValue(type));
       onChange(newFormData);
     };
   }
-
   /** Returns a flag indicating whether the `name` field is required in the object schema
    *
    * @param name - The name of the field to check for required-ness
@@ -1397,7 +1283,6 @@ class ObjectField extends Component {
    * @returns - The onPropertyChange callback for the `name` property
    */
 
-
   /** Returns a default value to be used for a new additional schema property of the given `type`
    *
    * @param type - The type of the new additional schema property
@@ -1406,22 +1291,16 @@ class ObjectField extends Component {
     switch (type) {
       case "string":
         return "New Value";
-
       case "array":
         return [];
-
       case "boolean":
         return false;
-
       case "null":
         return null;
-
       case "number":
         return 0;
-
       case "object":
         return {};
-
       default:
         // We don't have a datatype for some reason (perhaps additionalProperties was true)
         return "New Value";
@@ -1433,7 +1312,6 @@ class ObjectField extends Component {
    * @param schema - The schema element to which the new property is being added
    */
 
-
   /** Renders the `ObjectField` from the given props
    */
   render() {
@@ -1470,7 +1348,6 @@ class ObjectField extends Component {
     const title = schema.title === undefined ? name : schema.title;
     const description = uiOptions.description || schema.description;
     let orderedProperties;
-
     try {
       const properties = Object.keys(schemaProperties);
       orderedProperties = orderProperties(properties, uiOptions.order);
@@ -1482,7 +1359,6 @@ class ObjectField extends Component {
         }
       }, "Invalid ", name || "root", " object field configuration:", /*#__PURE__*/React.createElement("em", null, err.message), "."), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(schema)));
     }
-
     const Template = getTemplate("ObjectFieldTemplate", registry, uiOptions);
     const templateProps = {
       title: uiOptions.title || title,
@@ -1533,15 +1409,14 @@ class ObjectField extends Component {
       formContext,
       registry
     };
-    return /*#__PURE__*/React.createElement(Template, { ...templateProps,
+    return /*#__PURE__*/React.createElement(Template, {
+      ...templateProps,
       onAddClick: this.handleAddClick
     });
   }
-
 }
 
 /** The map of component type to FieldName */
-
 const COMPONENT_TYPES = {
   array: "ArrayField",
   boolean: "BooleanField",
@@ -1561,36 +1436,31 @@ const COMPONENT_TYPES = {
  * @param registry - The registry from which fields and templates are obtained
  * @returns - The `Field` component that is used to render the actual field data
  */
-
 function getFieldComponent(schema, uiOptions, idSchema, registry) {
   const field = uiOptions.field;
   const {
     fields
   } = registry;
-
   if (typeof field === "function") {
     return field;
   }
-
   if (typeof field === "string" && field in fields) {
     return fields[field];
   }
-
   const schemaType = getSchemaType(schema);
   const type = Array.isArray(schemaType) ? schemaType[0] : schemaType || "";
-  const componentName = COMPONENT_TYPES[type]; // If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
+  const componentName = COMPONENT_TYPES[type];
+  // If the type is not defined and the schema uses 'anyOf' or 'oneOf', don't
   // render a field and let the MultiSchemaField component handle the form display
-
   if (!componentName && (schema.anyOf || schema.oneOf)) {
     return () => null;
   }
-
   return componentName in fields ? fields[componentName] : () => {
     const UnsupportedFieldTemplate = getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
     return /*#__PURE__*/React.createElement(UnsupportedFieldTemplate, {
       schema: schema,
       idSchema: idSchema,
-      reason: "Unknown field type " + schema.type,
+      reason: `Unknown field type ${schema.type}`,
       registry: registry
     });
   };
@@ -1601,8 +1471,6 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
  *
  * @param props - The `FieldProps` for this component
  */
-
-
 function SchemaFieldRender(props) {
   const {
     schema: _schema,
@@ -1635,7 +1503,6 @@ function SchemaFieldRender(props) {
   /** Intermediary `onChange` handler for field components that will inject the `id` of the current field into the
    * `onChange` chain if it is not already being provided from a deeper level in the hierarchy
    */
-
   const handleFieldComponentChange = React.useCallback((formData, newErrorSchema, id) => {
     const theId = id || fieldId;
     return onChange(formData, newErrorSchema, theId);
@@ -1643,28 +1510,25 @@ function SchemaFieldRender(props) {
   const FieldComponent = getFieldComponent(schema, uiOptions, idSchema, registry);
   const disabled = Boolean(props.disabled || uiOptions.disabled);
   const readonly = Boolean(props.readonly || uiOptions.readonly || props.schema.readOnly || schema.readOnly);
-  const uiSchemaHideError = uiOptions.hideError; // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
-
+  const uiSchemaHideError = uiOptions.hideError;
+  // Set hideError to the value provided in the uiSchema, otherwise stick with the prop to propagate to children
   const hideError = uiSchemaHideError === undefined ? props.hideError : Boolean(uiSchemaHideError);
   const autofocus = Boolean(props.autofocus || uiOptions.autofocus);
-
   if (Object.keys(schema).length === 0) {
     return null;
   }
-
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
   const {
     __errors,
     ...fieldErrorSchema
-  } = errorSchema || {}; // See #439: uiSchema: Don't pass consumed class names to child components
-
+  } = errorSchema || {};
+  // See #439: uiSchema: Don't pass consumed class names to child components
   const fieldUiSchema = omit(uiSchema, ["ui:classNames", "classNames"]);
-
   if ("ui:options" in fieldUiSchema) {
     fieldUiSchema["ui:options"] = omit(fieldUiSchema["ui:options"], ["classNames"]);
   }
-
-  const field = /*#__PURE__*/React.createElement(FieldComponent, { ...props,
+  const field = /*#__PURE__*/React.createElement(FieldComponent, {
+    ...props,
     onChange: handleFieldComponentChange,
     idSchema: idSchema,
     schema: schema,
@@ -1677,37 +1541,30 @@ function SchemaFieldRender(props) {
     formContext: formContext,
     rawErrors: __errors
   });
-  const id = idSchema[ID_KEY]; // If this schema has a title defined, but the user has set a new key/label, retain their input.
-
+  const id = idSchema[ID_KEY];
+  // If this schema has a title defined, but the user has set a new key/label, retain their input.
   let label;
-
   if (wasPropertyKeyModified) {
     label = name;
   } else {
     label = ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
   }
-
   const description = uiOptions.description || props.schema.description || schema.description || "";
   const help = uiOptions.help;
   const hidden = uiOptions.widget === "hidden";
-  const classNames = ["form-group", "field", "field-" + schema.type];
-
+  const classNames = ["form-group", "field", `field-${schema.type}`];
   if (!hideError && __errors && __errors.length > 0) {
     classNames.push("field-error has-error has-danger");
   }
-
   if (uiSchema !== null && uiSchema !== void 0 && uiSchema.classNames) {
     if (process.env.NODE_ENV !== "production") {
       console.warn("'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead.");
     }
-
     classNames.push(uiSchema.classNames);
   }
-
   if (uiOptions.classNames) {
     classNames.push(uiOptions.classNames);
   }
-
   const helpComponent = /*#__PURE__*/React.createElement(FieldHelpTemplate, {
     help: help,
     idSchema: idSchema,
@@ -1726,7 +1583,7 @@ function SchemaFieldRender(props) {
   });
   const fieldProps = {
     description: /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
-      id: id + "__description",
+      id: `${id}__description`,
       description: description,
       schema: schema,
       uiSchema: uiSchema,
@@ -1757,7 +1614,8 @@ function SchemaFieldRender(props) {
   };
   const _AnyOfField = registry.fields.AnyOfField;
   const _OneOfField = registry.fields.OneOfField;
-  return /*#__PURE__*/React.createElement(FieldTemplate, { ...fieldProps
+  return /*#__PURE__*/React.createElement(FieldTemplate, {
+    ...fieldProps
   }, /*#__PURE__*/React.createElement(React.Fragment, null, field, schema.anyOf && !(uiSchema !== null && uiSchema !== void 0 && uiSchema["ui:field"]) && !schemaUtils.isSelect(schema) && /*#__PURE__*/React.createElement(_AnyOfField, {
     name: name,
     disabled: disabled,
@@ -1801,25 +1659,21 @@ function SchemaFieldRender(props) {
 /** The `SchemaField` component determines whether it is necessary to rerender the component based on any props changes
  * and if so, calls the `SchemaFieldRender` component with the props.
  */
-
-
 class SchemaField extends React.Component {
   shouldComponentUpdate(nextProps) {
     return !deepEquals(this.props, nextProps);
   }
-
   render() {
-    return /*#__PURE__*/React.createElement(SchemaFieldRender, { ...this.props
+    return /*#__PURE__*/React.createElement(SchemaFieldRender, {
+      ...this.props
     });
   }
-
 }
 
 /** The `StringField` component is used to render a schema field that represents a string type
  *
  * @param props - The `FieldProps` for this template
  */
-
 function StringField(props) {
   const {
     schema,
@@ -1848,11 +1702,9 @@ function StringField(props) {
   } = registry;
   const enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema) : undefined;
   let defaultWidget = enumOptions ? "select" : "text";
-
   if (format && hasWidget(schema, format, widgets)) {
     defaultWidget = format;
   }
-
   const {
     widget = defaultWidget,
     placeholder = "",
@@ -1860,7 +1712,8 @@ function StringField(props) {
   } = getUiOptions(uiSchema);
   const Widget = getWidget(schema, widget, widgets);
   return /*#__PURE__*/React.createElement(Widget, {
-    options: { ...options,
+    options: {
+      ...options,
       enumOptions
     },
     schema: schema,
@@ -1887,7 +1740,6 @@ function StringField(props) {
  *
  * @param props - The `FieldProps` for this template
  */
-
 function NullField(props) {
   const {
     formData,
@@ -1901,25 +1753,26 @@ function NullField(props) {
   return null;
 }
 
-const fields = {
-  AnyOfField: AnyOfField,
-  ArrayField,
-  // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
-  BooleanField,
-  NumberField,
-  ObjectField,
-  OneOfField: AnyOfField,
-  SchemaField,
-  StringField,
-  NullField
-};
+function fields() {
+  return {
+    AnyOfField: AnyOfField,
+    ArrayField: ArrayField,
+    // ArrayField falls back to SchemaField if ArraySchemaField is not defined, which it isn't by default
+    BooleanField,
+    NumberField,
+    ObjectField,
+    OneOfField: AnyOfField,
+    SchemaField,
+    StringField,
+    NullField
+  };
+}
 
 /** The `ArrayFieldDescriptionTemplate` component renders a `DescriptionFieldTemplate` with an `id` derived from
  * the `idSchema`.
  *
  * @param props - The `ArrayFieldDescriptionProps` for the component
  */
-
 function ArrayFieldDescriptionTemplate(props) {
   const {
     idSchema,
@@ -1932,13 +1785,11 @@ function ArrayFieldDescriptionTemplate(props) {
   const {
     label: displayLabel = true
   } = options;
-
   if (!description || !displayLabel) {
     return null;
   }
-
   const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
-  const id = idSchema.$id + "__description";
+  const id = `${idSchema.$id}__description`;
   return /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
     id: id,
     description: description,
@@ -1952,7 +1803,6 @@ function ArrayFieldDescriptionTemplate(props) {
  *
  * @param props - The `ArrayFieldTemplateItemType` props for the component
  */
-
 function ArrayFieldItemTemplate(props) {
   const {
     children,
@@ -2014,7 +1864,6 @@ function ArrayFieldItemTemplate(props) {
  *
  * @param props - The `ArrayFieldTemplateItemType` props for the component
  */
-
 function ArrayFieldTemplate(props) {
   const {
     canAdd,
@@ -2033,8 +1882,8 @@ function ArrayFieldTemplate(props) {
   const uiOptions = getUiOptions(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
   const ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-  const ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
-
+  const ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: {
       AddButton
@@ -2080,7 +1929,6 @@ function ArrayFieldTemplate(props) {
  *
  * @param props - The `ArrayFieldTitleProps` for the component
  */
-
 function ArrayFieldTitleTemplate(props) {
   const {
     idSchema,
@@ -2094,13 +1942,11 @@ function ArrayFieldTitleTemplate(props) {
   const {
     label: displayLabel = true
   } = options;
-
   if (!title || !displayLabel) {
     return null;
   }
-
   const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, options);
-  const id = idSchema.$id + "__title";
+  const id = `${idSchema.$id}__title`;
   return /*#__PURE__*/React.createElement(TitleFieldTemplate, {
     id: id,
     title: title,
@@ -2117,7 +1963,6 @@ function ArrayFieldTitleTemplate(props) {
  *
  * @param props - The `WidgetProps` for this template
  */
-
 function BaseInputTemplate(props) {
   const {
     id,
@@ -2136,25 +1981,23 @@ function BaseInputTemplate(props) {
     rawErrors,
     type,
     ...rest
-  } = props; // Note: since React 15.2.0 we can't forward unknown element attributes, so we
+  } = props;
+  // Note: since React 15.2.0 we can't forward unknown element attributes, so we
   // exclude the "options" and "schema" ones here.
-
   if (!id) {
     console.log("No id for", props);
-    throw new Error("no id for props " + JSON.stringify(props));
+    throw new Error(`no id for props ${JSON.stringify(props)}`);
   }
-
-  const inputProps = { ...rest,
+  const inputProps = {
+    ...rest,
     ...getInputProps(schema, type, options)
   };
   let inputValue;
-
   if (inputProps.type === "number" || inputProps.type === "integer") {
     inputValue = value || value === 0 ? value : "";
   } else {
     inputValue = value == null ? "" : value;
   }
-
   const _onChange = useCallback(_ref => {
     let {
       target: {
@@ -2163,7 +2006,6 @@ function BaseInputTemplate(props) {
     } = _ref;
     return onChange(value === "" ? options.emptyValue : value);
   }, [onChange, options]);
-
   const _onBlur = useCallback(_ref2 => {
     let {
       target: {
@@ -2172,7 +2014,6 @@ function BaseInputTemplate(props) {
     } = _ref2;
     return onBlur(id, value);
   }, [onBlur, id]);
-
   const _onFocus = useCallback(_ref3 => {
     let {
       target: {
@@ -2181,7 +2022,6 @@ function BaseInputTemplate(props) {
     } = _ref3;
     return onFocus(id, value);
   }, [onFocus, id]);
-
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", {
     id: id,
     name: id,
@@ -2191,13 +2031,13 @@ function BaseInputTemplate(props) {
     autoFocus: autofocus,
     value: inputValue,
     ...inputProps,
-    list: schema.examples ? "examples_" + id : undefined,
+    list: schema.examples ? `examples_${id}` : undefined,
     onChange: _onChange,
     onBlur: _onBlur,
     onFocus: _onFocus
   }), Array.isArray(schema.examples) && /*#__PURE__*/React.createElement("datalist", {
-    key: "datalist_" + id,
-    id: "examples_" + id
+    key: `datalist_${id}`,
+    id: `examples_${id}`
   }, [...new Set(schema.examples.concat(schema.default ? [schema.default] : []))].map(example => /*#__PURE__*/React.createElement("option", {
     key: example,
     value: example
@@ -2206,7 +2046,6 @@ function BaseInputTemplate(props) {
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
  */
-
 function SubmitButton(_ref) {
   let {
     uiSchema
@@ -2216,15 +2055,13 @@ function SubmitButton(_ref) {
     norender,
     props: submitButtonProps = {}
   } = getSubmitButtonOptions(uiSchema);
-
   if (norender) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", {
     type: "submit",
     ...submitButtonProps,
-    className: "btn btn-info " + submitButtonProps.className
+    className: `btn btn-info ${submitButtonProps.className}`
   }, submitText));
 }
 
@@ -2238,10 +2075,10 @@ function IconButton(props) {
   } = props;
   return /*#__PURE__*/React.createElement("button", {
     type: "button",
-    className: "btn btn-" + iconType + " " + className,
+    className: `btn btn-${iconType} ${className}`,
     ...otherProps
   }, /*#__PURE__*/React.createElement("i", {
-    className: "glyphicon glyphicon-" + icon
+    className: `glyphicon glyphicon-${icon}`
   }));
 }
 function MoveDownButton(props) {
@@ -2272,7 +2109,6 @@ function RemoveButton(props) {
 
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
-
 function AddButton(_ref) {
   let {
     className,
@@ -2282,7 +2118,7 @@ function AddButton(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: "row"
   }, /*#__PURE__*/React.createElement("p", {
-    className: "col-xs-3 col-xs-offset-9 text-right " + className
+    className: `col-xs-3 col-xs-offset-9 text-right ${className}`
   }, /*#__PURE__*/React.createElement(IconButton, {
     iconType: "info",
     icon: "plus",
@@ -2293,29 +2129,28 @@ function AddButton(_ref) {
   })));
 }
 
-const buttonTemplates = {
-  SubmitButton,
-  AddButton,
-  MoveDownButton,
-  MoveUpButton,
-  RemoveButton
-};
+function buttonTemplates() {
+  return {
+    SubmitButton,
+    AddButton,
+    MoveDownButton,
+    MoveUpButton,
+    RemoveButton
+  };
+}
 
 /** The `DescriptionField` is the template to use to render the description of a field
  *
  * @param props - The `DescriptionFieldProps` for this component
  */
-
 function DescriptionField(props) {
   const {
     id,
     description
   } = props;
-
   if (!description) {
     return null;
   }
-
   if (typeof description === "string") {
     return /*#__PURE__*/React.createElement("p", {
       id: id,
@@ -2333,7 +2168,6 @@ function DescriptionField(props) {
  *
  * @param props - The `ErrorListProps` for this component
  */
-
 function ErrorList(_ref) {
   let {
     errors
@@ -2359,18 +2193,15 @@ const REQUIRED_FIELD_SYMBOL$1 = "*";
  *
  * @param props - The `LabelProps` for this component
  */
-
 function Label(props) {
   const {
     label,
     required,
     id
   } = props;
-
   if (!label) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("label", {
     className: "control-label",
     htmlFor: id
@@ -2384,7 +2215,6 @@ function Label(props) {
  *
  * @param props - The `FieldTemplateProps` for this component
  */
-
 function FieldTemplate(props) {
   const {
     id,
@@ -2401,14 +2231,13 @@ function FieldTemplate(props) {
   } = props;
   const uiOptions = getUiOptions(uiSchema);
   const WrapIfAdditionalTemplate = getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
-
   if (hidden) {
     return /*#__PURE__*/React.createElement("div", {
       className: "hidden"
     }, children);
   }
-
-  return /*#__PURE__*/React.createElement(WrapIfAdditionalTemplate, { ...props
+  return /*#__PURE__*/React.createElement(WrapIfAdditionalTemplate, {
+    ...props
   }, displayLabel && /*#__PURE__*/React.createElement(Label, {
     label: label,
     required: required,
@@ -2420,18 +2249,15 @@ function FieldTemplate(props) {
  *
  * @param props - The `FieldErrorProps` for the errors being rendered
  */
-
 function FieldErrorTemplate(props) {
   const {
     errors = [],
     idSchema
   } = props;
-
   if (errors.length === 0) {
     return null;
   }
-
-  const id = idSchema.$id + "__error";
+  const id = `${idSchema.$id}__error`;
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
     id: id,
     className: "error-detail bs-callout bs-callout-info"
@@ -2447,26 +2273,21 @@ function FieldErrorTemplate(props) {
  *
  * @param props - The `FieldHelpProps` to be rendered
  */
-
 function FieldHelpTemplate(props) {
   const {
     idSchema,
     help
   } = props;
-
   if (!help) {
     return null;
   }
-
-  const id = idSchema.$id + "__help";
-
+  const id = `${idSchema.$id}__help`;
   if (typeof help === "string") {
     return /*#__PURE__*/React.createElement("p", {
       id: id,
       className: "help-block"
     }, help);
   }
-
   return /*#__PURE__*/React.createElement("div", {
     id: id,
     className: "help-block"
@@ -2479,7 +2300,6 @@ function FieldHelpTemplate(props) {
  *
  * @param props - The `ObjectFieldTemplateProps` for this component
  */
-
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -2497,8 +2317,8 @@ function ObjectFieldTemplate(props) {
   } = props;
   const options = getUiOptions(uiSchema);
   const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, options);
-  const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options); // Button templates are not overridden in the uiSchema
-
+  const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
+  // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: {
       AddButton
@@ -2507,14 +2327,14 @@ function ObjectFieldTemplate(props) {
   return /*#__PURE__*/React.createElement("fieldset", {
     id: idSchema.$id
   }, (options.title || title) && /*#__PURE__*/React.createElement(TitleFieldTemplate, {
-    id: idSchema.$id + "__title",
+    id: `${idSchema.$id}__title`,
     title: options.title || title,
     required: required,
     schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), (options.description || description) && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
-    id: idSchema.$id + "__description",
+    id: `${idSchema.$id}__description`,
     description: options.description || description,
     schema: schema,
     uiSchema: uiSchema,
@@ -2532,7 +2352,6 @@ const REQUIRED_FIELD_SYMBOL = "*";
  *
  * @param props - The `TitleFieldProps` for this component
  */
-
 function TitleField(props) {
   const {
     id,
@@ -2551,7 +2370,6 @@ function TitleField(props) {
  *
  * @param props - The `FieldProps` for this template
  */
-
 function UnsupportedField(props) {
   const {
     schema,
@@ -2568,7 +2386,6 @@ function UnsupportedField(props) {
  *
  * @param props - The `WrapIfAdditionalProps` for this component
  */
-
 function WrapIfAdditionalTemplate(props) {
   const {
     id,
@@ -2583,21 +2400,18 @@ function WrapIfAdditionalTemplate(props) {
     children,
     uiSchema,
     registry
-  } = props; // Button templates are not overridden in the uiSchema
-
+  } = props;
+  // Button templates are not overridden in the uiSchema
   const {
     RemoveButton
   } = registry.templates.ButtonTemplates;
-  const keyLabel = label + " Key"; // i18n ?
-
+  const keyLabel = `${label} Key`; // i18n ?
   const additional = (ADDITIONAL_PROPERTY_FLAG in schema);
-
   if (!additional) {
     return /*#__PURE__*/React.createElement("div", {
       className: classNames
     }, children);
   }
-
   return /*#__PURE__*/React.createElement("div", {
     className: classNames
   }, /*#__PURE__*/React.createElement("div", {
@@ -2609,11 +2423,11 @@ function WrapIfAdditionalTemplate(props) {
   }, /*#__PURE__*/React.createElement(Label, {
     label: keyLabel,
     required: required,
-    id: id + "-key"
+    id: `${id}-key`
   }), /*#__PURE__*/React.createElement("input", {
     className: "form-control",
     type: "text",
-    id: id + "-key",
+    id: `${id}-key`,
     onBlur: event => onKeyChange(event.target.value),
     defaultValue: label
   }))), /*#__PURE__*/React.createElement("div", {
@@ -2631,46 +2445,43 @@ function WrapIfAdditionalTemplate(props) {
   }))));
 }
 
-const templates = {
-  ArrayFieldDescriptionTemplate,
-  ArrayFieldItemTemplate,
-  ArrayFieldTemplate,
-  ArrayFieldTitleTemplate,
-  ButtonTemplates: buttonTemplates,
-  BaseInputTemplate,
-  DescriptionFieldTemplate: DescriptionField,
-  ErrorListTemplate: ErrorList,
-  FieldTemplate,
-  FieldErrorTemplate,
-  FieldHelpTemplate,
-  ObjectFieldTemplate,
-  TitleFieldTemplate: TitleField,
-  UnsupportedFieldTemplate: UnsupportedField,
-  WrapIfAdditionalTemplate
-};
+function templates() {
+  return {
+    ArrayFieldDescriptionTemplate,
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    ArrayFieldTitleTemplate,
+    ButtonTemplates: buttonTemplates(),
+    BaseInputTemplate,
+    DescriptionFieldTemplate: DescriptionField,
+    ErrorListTemplate: ErrorList,
+    FieldTemplate,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    ObjectFieldTemplate,
+    TitleFieldTemplate: TitleField,
+    UnsupportedFieldTemplate: UnsupportedField,
+    WrapIfAdditionalTemplate
+  };
+}
 
 function rangeOptions(start, stop) {
   const options = [];
-
   for (let i = start; i <= stop; i++) {
     options.push({
       value: i,
       label: pad(i, 2)
     });
   }
-
   return options;
 }
-
 function readyForChange(state) {
   return Object.values(state).every(value => value !== -1);
 }
-
 function dateElementProps(state, time, yearsRange) {
   if (yearsRange === void 0) {
     yearsRange = [1900, new Date().getFullYear() + 2];
   }
-
   const {
     year,
     month,
@@ -2692,7 +2503,6 @@ function dateElementProps(state, time, yearsRange) {
     range: [1, 31],
     value: day
   }];
-
   if (time) {
     data.push({
       type: "hour",
@@ -2708,10 +2518,8 @@ function dateElementProps(state, time, yearsRange) {
       value: second
     });
   }
-
   return data;
 }
-
 function DateElement(_ref) {
   let {
     type,
@@ -2754,8 +2562,6 @@ function DateElement(_ref) {
 /** The `AltDateWidget` is an alternative widget for rendering date properties.
  * @param props - The `WidgetProps` for this component
  */
-
-
 function AltDateWidget(_ref2) {
   let {
     time = false,
@@ -2771,7 +2577,8 @@ function AltDateWidget(_ref2) {
     value
   } = _ref2;
   const [state, setState] = useReducer((state, action) => {
-    return { ...state,
+    return {
+      ...state,
       ...action
     };
   }, parseDateString(value, time));
@@ -2793,21 +2600,17 @@ function AltDateWidget(_ref2) {
   }, []);
   const handleSetNow = useCallback(event => {
     event.preventDefault();
-
     if (disabled || readonly) {
       return;
     }
-
     const nowDateObj = parseDateString(new Date().toJSON(), time);
     setState(nowDateObj);
   }, [disabled, readonly, time]);
   const handleClear = useCallback(event => {
     event.preventDefault();
-
     if (disabled || readonly) {
       return;
     }
-
     setState(parseDateString("", time));
     onChange(undefined);
   }, [disabled, readonly, time, onChange]);
@@ -2841,7 +2644,6 @@ function AltDateWidget(_ref2) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function AltDateTimeWidget(_ref) {
   let {
     time = true,
@@ -2861,7 +2663,6 @@ function AltDateTimeWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function CheckboxWidget(_ref) {
   let {
     schema,
@@ -2878,16 +2679,16 @@ function CheckboxWidget(_ref) {
     onChange,
     registry
   } = _ref;
-  const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options); // Because an unchecked checkbox will cause html5 validation to fail, only add
+  const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
+  // Because an unchecked checkbox will cause html5 validation to fail, only add
   // the "required" attribute if the field value must be "true", due to the
   // "const" or "enum" keywords
-
   const required = schemaRequiresTrueValue(schema);
   const handleChange = useCallback(event => onChange(event.target.checked), [onChange]);
   const handleBlur = useCallback(event => onBlur(id, event.target.checked), [onBlur, id]);
   const handleFocus = useCallback(event => onFocus(id, event.target.checked), [onFocus, id]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "checkbox " + (disabled || readonly ? "disabled" : "")
+    className: `checkbox ${disabled || readonly ? "disabled" : ""}`
   }, schema.description && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
     id: id + "__description",
     description: schema.description,
@@ -2910,12 +2711,11 @@ function CheckboxWidget(_ref) {
 
 function selectValue(value, selected, all) {
   const at = all.indexOf(value);
-  const updated = selected.slice(0, at).concat(value, selected.slice(at)); // As inserting values at predefined index positions doesn't work with empty
+  const updated = selected.slice(0, at).concat(value, selected.slice(at));
+  // As inserting values at predefined index positions doesn't work with empty
   // arrays, we need to reorder the updated selection to match the initial order
-
   return updated.sort((a, b) => Number(all.indexOf(a) > all.indexOf(b)));
 }
-
 function deselectValue(value, selected) {
   return selected.filter(v => v !== value);
 }
@@ -2924,8 +2724,6 @@ function deselectValue(value, selected) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
-
 function CheckboxesWidget(_ref) {
   let {
     id,
@@ -2947,7 +2745,6 @@ function CheckboxesWidget(_ref) {
     const checked = value.indexOf(option.value) !== -1;
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) != -1;
     const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
-
     const handleChange = event => {
       const all = enumOptions.map(_ref2 => {
         let {
@@ -2955,17 +2752,15 @@ function CheckboxesWidget(_ref) {
         } = _ref2;
         return value;
       });
-
       if (event.target.checked) {
         onChange(selectValue(option.value, value, all));
       } else {
         onChange(deselectValue(option.value, value));
       }
     };
-
     const checkbox = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
       type: "checkbox",
-      id: id + "-" + option.value,
+      id: `${id}-${option.value}`,
       name: id,
       checked: checked,
       disabled: disabled || itemDisabled || readonly,
@@ -2974,10 +2769,10 @@ function CheckboxesWidget(_ref) {
     }), /*#__PURE__*/React.createElement("span", null, option.label));
     return inline ? /*#__PURE__*/React.createElement("label", {
       key: option.value,
-      className: "checkbox-inline " + disabledCls
+      className: `checkbox-inline ${disabledCls}`
     }, checkbox) : /*#__PURE__*/React.createElement("div", {
       key: option.value,
-      className: "checkbox " + disabledCls
+      className: `checkbox ${disabledCls}`
     }, /*#__PURE__*/React.createElement("label", null, checkbox));
   }));
 }
@@ -2987,7 +2782,6 @@ function CheckboxesWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function ColorWidget(props) {
   const {
     disabled,
@@ -3008,7 +2802,6 @@ function ColorWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function DateWidget(props) {
   const {
     onChange,
@@ -3029,7 +2822,6 @@ function DateWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function DateTimeWidget(props) {
   const {
     onChange,
@@ -3050,7 +2842,6 @@ function DateTimeWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function EmailWidget(props) {
   const {
     options,
@@ -3067,10 +2858,8 @@ function addNameToDataURL(dataURL, name) {
   if (dataURL === null) {
     return null;
   }
-
-  return dataURL.replace(";base64", ";name=" + encodeURIComponent(name) + ";base64");
+  return dataURL.replace(";base64", `;name=${encodeURIComponent(name)};base64`);
 }
-
 function processFile(file) {
   const {
     name,
@@ -3080,10 +2869,8 @@ function processFile(file) {
   return new Promise((resolve, reject) => {
     const reader = new window.FileReader();
     reader.onerror = reject;
-
     reader.onload = event => {
       var _event$target;
-
       if (typeof ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result) === "string") {
         resolve({
           dataURL: addNameToDataURL(event.target.result, name),
@@ -3100,24 +2887,19 @@ function processFile(file) {
         });
       }
     };
-
     reader.readAsDataURL(file);
   });
 }
-
 function processFiles(files) {
   return Promise.all(Array.from(files).map(processFile));
 }
-
 function FilesInfo(_ref) {
   let {
     filesInfo
   } = _ref;
-
   if (filesInfo.length === 0) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement("ul", {
     className: "file-info"
   }, filesInfo.map((fileInfo, key) => {
@@ -3131,7 +2913,6 @@ function FilesInfo(_ref) {
     }, /*#__PURE__*/React.createElement("strong", null, name), " (", type, ", ", size, " bytes)");
   }));
 }
-
 function extractFileInfo(dataURLs) {
   return dataURLs.filter(dataURL => typeof dataURL !== "undefined").map(dataURL => {
     const {
@@ -3149,8 +2930,6 @@ function extractFileInfo(dataURLs) {
  *  The `FileWidget` is a widget for rendering file upload fields.
  *  It is typically used with a string property with data-url format.
  */
-
-
 function FileWidget(_ref2) {
   let {
     multiple,
@@ -3168,11 +2947,9 @@ function FileWidget(_ref2) {
     if (!event.target.files) {
       return;
     }
-
     processFiles(event.target.files).then(filesInfoEvent => {
       setFilesInfo(filesInfoEvent);
       const newValue = filesInfoEvent.map(fileInfo => fileInfo.dataURL);
-
       if (multiple) {
         onChange(newValue);
       } else {
@@ -3200,7 +2977,6 @@ function FileWidget(_ref2) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function HiddenWidget(_ref) {
   let {
     id,
@@ -3218,7 +2994,6 @@ function HiddenWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function PasswordWidget(props) {
   const {
     options,
@@ -3236,7 +3011,6 @@ function PasswordWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function RadioWidget(_ref) {
   let {
     options,
@@ -3256,9 +3030,9 @@ function RadioWidget(_ref) {
     enumOptions,
     enumDisabled,
     inline
-  } = options; // checked={checked} has been moved above name={name}, As mentioned in #349;
+  } = options;
+  // checked={checked} has been moved above name={name}, As mentioned in #349;
   // this is a temporary fix for radio button rendering bug in React, facebook/react#7630.
-
   const handleBlur = useCallback(event => onBlur(id, event.target.value), [onBlur, id]);
   const handleFocus = useCallback(event => onFocus(id, event.target.value), [onFocus, id]);
   return /*#__PURE__*/React.createElement("div", {
@@ -3268,12 +3042,10 @@ function RadioWidget(_ref) {
     const checked = option.value === value;
     const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) != -1;
     const disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
-
     const handleChange = () => onChange(option.value);
-
     const radio = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
       type: "radio",
-      id: id + "-" + option.value,
+      id: `${id}-${option.value}`,
       checked: checked,
       name: name,
       required: required,
@@ -3286,10 +3058,10 @@ function RadioWidget(_ref) {
     }), /*#__PURE__*/React.createElement("span", null, option.label));
     return inline ? /*#__PURE__*/React.createElement("label", {
       key: option.value,
-      className: "radio-inline " + disabledCls
+      className: `radio-inline ${disabledCls}`
     }, radio) : /*#__PURE__*/React.createElement("div", {
       key: option.value,
-      className: "radio " + disabledCls
+      className: `radio ${disabledCls}`
     }, /*#__PURE__*/React.createElement("label", null, radio));
   }));
 }
@@ -3299,7 +3071,6 @@ function RadioWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function RangeWidget(props) {
   const {
     value,
@@ -3323,7 +3094,6 @@ function getValue(event, multiple) {
   if (multiple) {
     return Array.from(event.target.options).slice().filter(o => o.selected).map(o => o.value);
   }
-
   return event.target.value;
 }
 /** The `SelectWidget` is a widget for rendering dropdowns.
@@ -3331,8 +3101,6 @@ function getValue(event, multiple) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
-
 function SelectWidget(_ref) {
   let {
     schema,
@@ -3398,7 +3166,6 @@ function SelectWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function TextareaWidget(_ref) {
   let {
     id,
@@ -3453,7 +3220,6 @@ function TextareaWidget(_ref) {
     onChange: handleChange
   });
 }
-
 TextareaWidget.defaultProps = {
   autofocus: false,
   options: {}
@@ -3463,14 +3229,14 @@ TextareaWidget.defaultProps = {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function TextWidget(props) {
   const {
     options,
     registry
   } = props;
   const BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, { ...props
+  return /*#__PURE__*/React.createElement(BaseInputTemplate, {
+    ...props
   });
 }
 
@@ -3478,7 +3244,6 @@ function TextWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function URLWidget(props) {
   const {
     options,
@@ -3495,7 +3260,6 @@ function URLWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function UpDownWidget(props) {
   const {
     options,
@@ -3508,44 +3272,44 @@ function UpDownWidget(props) {
   });
 }
 
-const widgets = {
-  PasswordWidget,
-  RadioWidget,
-  UpDownWidget,
-  RangeWidget,
-  SelectWidget,
-  TextWidget,
-  DateWidget,
-  DateTimeWidget,
-  AltDateWidget,
-  AltDateTimeWidget,
-  EmailWidget,
-  URLWidget,
-  TextareaWidget,
-  HiddenWidget,
-  ColorWidget,
-  FileWidget,
-  CheckboxWidget,
-  CheckboxesWidget
-};
+function widgets() {
+  return {
+    PasswordWidget,
+    RadioWidget,
+    UpDownWidget,
+    RangeWidget,
+    SelectWidget,
+    TextWidget,
+    DateWidget,
+    DateTimeWidget,
+    AltDateWidget,
+    AltDateTimeWidget,
+    EmailWidget,
+    URLWidget,
+    TextareaWidget,
+    HiddenWidget,
+    ColorWidget,
+    FileWidget,
+    CheckboxWidget,
+    CheckboxesWidget
+  };
+}
 
 /** The default registry consists of all the fields, templates and widgets provided in the core implementation,
  * plus an empty `rootSchema` and `formContext. We omit schemaUtils here because it cannot be defaulted without a
  * rootSchema and validator. It will be added into the computed registry later in the Form.
  */
-
 function getDefaultRegistry() {
   return {
-    fields,
-    templates,
-    widgets,
+    fields: fields(),
+    templates: templates(),
+    widgets: widgets(),
     rootSchema: {},
     formContext: {}
   };
 }
 
 /** The `Form` component renders the outer form and all the fields defined in the `schema` */
-
 class Form extends Component {
   /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
    * provide any possible type here
@@ -3560,36 +3324,30 @@ class Form extends Component {
   constructor(props) {
     super(props);
     this.formElement = void 0;
-
     this.getUsedFormData = (formData, fields) => {
       // For the case of a single input form
       if (fields.length === 0 && typeof formData !== "object") {
         return formData;
       }
-
+      // _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
       const data = _pick(formData, fields);
-
       if (Array.isArray(formData)) {
         return Object.keys(data).map(key => data[key]);
       }
-
       return data;
     };
-
     this.getFieldNames = (pathSchema, formData) => {
       const getAllPaths = function (_obj, acc, paths) {
         if (acc === void 0) {
           acc = [];
         }
-
         if (paths === void 0) {
-          paths = [""];
+          paths = [[]];
         }
-
         Object.keys(_obj).forEach(key => {
           if (typeof _obj[key] === "object") {
-            const newPaths = paths.map(path => path + "." + key); // If an object is marked with additionalProperties, all its keys are valid
-
+            const newPaths = paths.map(path => [...path, key]);
+            // If an object is marked with additionalProperties, all its keys are valid
             if (_obj[key][RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== "") {
               acc.push(_obj[key][NAME_KEY]);
             } else {
@@ -3597,12 +3355,9 @@ class Form extends Component {
             }
           } else if (key === NAME_KEY && _obj[key] !== "") {
             paths.forEach(path => {
-              path = path.replace(/^\./, "");
-
-              const formValue = get(formData, path); // adds path to fieldNames if it points to a value
+              const formValue = get(formData, path);
+              // adds path to fieldNames if it points to a value
               // or an empty object/array
-
-
               if (typeof formValue !== "object" || _isEmpty(formValue)) {
                 acc.push(path);
               }
@@ -3611,10 +3366,8 @@ class Form extends Component {
         });
         return acc;
       };
-
       return getAllPaths(pathSchema);
     };
-
     this.onChange = (formData, newErrorSchema, id) => {
       const {
         extraErrors,
@@ -3628,19 +3381,16 @@ class Form extends Component {
         schemaUtils,
         schema
       } = this.state;
-
       if (isObject$1(formData) || Array.isArray(formData)) {
         const newState = this.getStateFromProps(this.props, formData);
         formData = newState.formData;
       }
-
       const mustValidate = !noValidate && liveValidate;
       let state = {
         formData,
         schema
       };
       let newFormData = formData;
-
       if (omitExtraData === true && liveOmit === true) {
         const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
         const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
@@ -3650,20 +3400,17 @@ class Form extends Component {
           formData: newFormData
         };
       }
-
       if (mustValidate) {
         const schemaValidation = this.validate(newFormData);
         let errors = schemaValidation.errors;
         let errorSchema = schemaValidation.errorSchema;
         const schemaValidationErrors = errors;
         const schemaValidationErrorSchema = errorSchema;
-
         if (extraErrors) {
           const merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
           errorSchema = merged.errorSchema;
           errors = merged.errors;
         }
-
         state = {
           formData: newFormData,
           errors,
@@ -3679,39 +3426,32 @@ class Form extends Component {
           errors: schemaUtils.getValidator().toErrorList(errorSchema)
         };
       }
-
-      this.setState(state, () => onChange && onChange({ ...this.state,
+      this.setState(state, () => onChange && onChange({
+        ...this.state,
         ...state
       }, id));
     };
-
     this.onBlur = (id, data) => {
       const {
         onBlur
       } = this.props;
-
       if (onBlur) {
         onBlur(id, data);
       }
     };
-
     this.onFocus = (id, data) => {
       const {
         onFocus
       } = this.props;
-
       if (onFocus) {
         onFocus(id, data);
       }
     };
-
     this.onSubmit = event => {
       event.preventDefault();
-
       if (event.target !== event.currentTarget) {
         return;
       }
-
       event.persist();
       const {
         omitExtraData,
@@ -3726,14 +3466,12 @@ class Form extends Component {
         schema,
         schemaUtils
       } = this.state;
-
       if (omitExtraData === true) {
         const retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
         const pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
         const fieldNames = this.getFieldNames(pathSchema, newFormData);
         newFormData = this.getUsedFormData(newFormData, fieldNames);
       }
-
       if (noValidate || this.validateForm()) {
         // There are no errors generated through schema validation.
         // Check for user provided errors and update state accordingly.
@@ -3747,7 +3485,8 @@ class Form extends Component {
           schemaValidationErrorSchema: {}
         }, () => {
           if (onSubmit) {
-            onSubmit({ ...this.state,
+            onSubmit({
+              ...this.state,
               formData: newFormData,
               status: "submitted"
             }, event);
@@ -3755,17 +3494,13 @@ class Form extends Component {
         });
       }
     };
-
     if (!props.validator) {
       throw new Error("A validator is required for Form functionality to work");
     }
-
     this.state = this.getStateFromProps(props, props.formData);
-
     if (this.props.onChange && !deepEquals(this.state.formData, this.props.formData)) {
       this.props.onChange(this.state);
     }
-
     this.formElement = /*#__PURE__*/React.createRef();
   }
   /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
@@ -3774,15 +3509,11 @@ class Form extends Component {
    *
    * @param nextProps - The new set of props about to be applied to the `Form`
    */
-
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     const nextState = this.getStateFromProps(nextProps, nextProps.formData);
-
     if (!deepEquals(nextState.formData, nextProps.formData) && !deepEquals(nextState.formData, this.state.formData) && nextProps.onChange) {
       nextProps.onChange(nextState);
     }
-
     this.setState(nextState);
   }
   /** Extracts the updated state from the given `props` and `inputFormData`. As part of this process, the
@@ -3793,8 +3524,6 @@ class Form extends Component {
    * @param inputFormData - The new or current data for the `Form`
    * @returns - The new state for the `Form`
    */
-
-
   getStateFromProps(props, inputFormData) {
     const state = this.state || {};
     const schema = "schema" in props ? props.schema : this.props.schema;
@@ -3804,14 +3533,11 @@ class Form extends Component {
     const mustValidate = edit && !props.noValidate && liveValidate;
     const rootSchema = schema;
     let schemaUtils = state.schemaUtils;
-
     if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema)) {
       schemaUtils = createSchemaUtils(props.validator, rootSchema);
     }
-
     const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
     const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-
     const getCurrentErrors = () => {
       if (props.noValidate) {
         return {
@@ -3824,18 +3550,15 @@ class Form extends Component {
           errorSchema: state.schemaValidationErrorSchema || {}
         };
       }
-
       return {
         errors: state.errors || [],
         errorSchema: state.errorSchema || {}
       };
     };
-
     let errors;
     let errorSchema;
     let schemaValidationErrors = state.schemaValidationErrors;
     let schemaValidationErrorSchema = state.schemaValidationErrorSchema;
-
     if (mustValidate) {
       const schemaValidation = this.validate(formData, schema, schemaUtils);
       errors = schemaValidation.errors;
@@ -3847,7 +3570,6 @@ class Form extends Component {
       errors = currentErrors.errors;
       errorSchema = currentErrors.errorSchema;
     }
-
     if (props.extraErrors) {
       const merged = schemaUtils.mergeValidationData({
         errorSchema,
@@ -3856,7 +3578,6 @@ class Form extends Component {
       errorSchema = merged.errorSchema;
       errors = merged.errors;
     }
-
     const idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema["ui:rootFieldId"], formData, props.idPrefix, props.idSeparator);
     const nextState = {
       schemaUtils,
@@ -3878,8 +3599,6 @@ class Form extends Component {
    * @param nextState - The next version of the state
    * @returns - True if the component should be updated, false otherwise
    */
-
-
   shouldComponentUpdate(nextProps, nextState) {
     return shouldRender(this, nextProps, nextState);
   }
@@ -3890,13 +3609,10 @@ class Form extends Component {
    * @param schema - The schema used to validate against
    * @param altSchemaUtils - The alternate schemaUtils to use for validation
    */
-
-
   validate(formData, schema, altSchemaUtils) {
     if (schema === void 0) {
       schema = this.props.schema;
     }
-
     const schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
     const {
       customValidate,
@@ -3906,8 +3622,6 @@ class Form extends Component {
     return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors);
   }
   /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */
-
-
   renderErrors(registry) {
     const {
       errors,
@@ -3916,13 +3630,11 @@ class Form extends Component {
       uiSchema
     } = this.state;
     const {
-      showErrorList,
       formContext
     } = this.props;
     const options = getUiOptions(uiSchema);
     const ErrorListTemplate = getTemplate("ErrorListTemplate", registry, options);
-
-    if (errors && errors.length && showErrorList != false) {
+    if (errors && errors.length) {
       return /*#__PURE__*/React.createElement(ErrorListTemplate, {
         errors: errors,
         errorSchema: errorSchema || {},
@@ -3931,7 +3643,6 @@ class Form extends Component {
         formContext: formContext
       });
     }
-
     return null;
   }
   /** Returns the `formData` with only the elements specified in the `fields` list
@@ -3940,11 +3651,9 @@ class Form extends Component {
    * @param fields - The fields to keep while filtering
    */
 
-
   /** Returns the registry for the form */
   getRegistry() {
     var _this$props$templates;
-
     const {
       schemaUtils
     } = this.state;
@@ -3955,16 +3664,20 @@ class Form extends Component {
       formContext
     } = getDefaultRegistry();
     return {
-      fields: { ...fields,
+      fields: {
+        ...fields,
         ...this.props.fields
       },
-      templates: { ...templates,
+      templates: {
+        ...templates,
         ...this.props.templates,
-        ButtonTemplates: { ...templates.ButtonTemplates,
+        ButtonTemplates: {
+          ...templates.ButtonTemplates,
           ...((_this$props$templates = this.props.templates) === null || _this$props$templates === void 0 ? void 0 : _this$props$templates.ButtonTemplates)
         }
       },
-      widgets: { ...widgets,
+      widgets: {
+        ...widgets,
         ...this.props.widgets
       },
       rootSchema: this.props.schema,
@@ -3973,8 +3686,6 @@ class Form extends Component {
     };
   }
   /** Provides a function that can be used to programmatically submit the `Form` */
-
-
   submit() {
     if (this.formElement.current) {
       this.formElement.current.dispatchEvent(new CustomEvent("submit", {
@@ -3988,8 +3699,6 @@ class Form extends Component {
    *
    * @returns - True if the form is valid, false otherwise.
    */
-
-
   validateForm() {
     const {
       extraErrors,
@@ -4006,14 +3715,12 @@ class Form extends Component {
     let errorSchema = schemaValidation.errorSchema;
     const schemaValidationErrors = errors;
     const schemaValidationErrorSchema = errorSchema;
-
     if (errors.length > 0) {
       if (extraErrors) {
         const merged = schemaUtils.mergeValidationData(schemaValidation, extraErrors);
         errorSchema = merged.errorSchema;
         errors = merged.errors;
       }
-
       this.setState({
         errors,
         errorSchema,
@@ -4028,14 +3735,11 @@ class Form extends Component {
       });
       return false;
     }
-
     return true;
   }
   /** Renders the `Form` fields inside the <form> | `tagName` or `_internalFormWrapper`, rendering any errors if
    * needed along with the submit button or any children of the form.
    */
-
-
   render() {
     const {
       children,
@@ -4055,6 +3759,7 @@ class Form extends Component {
       disabled = false,
       readonly = false,
       formContext,
+      showErrorList = "top",
       _internalFormWrapper
     } = this.props;
     const {
@@ -4070,10 +3775,10 @@ class Form extends Component {
     } = registry.fields;
     const {
       SubmitButton
-    } = registry.templates.ButtonTemplates; // The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
-    // PropTypes.elementType to use for the inner tag so we'll need to pass `tagName` along if it is provided.
+    } = registry.templates.ButtonTemplates;
+    // The `semantic-ui` and `material-ui` themes have `_internalFormWrapper`s that take an `as` prop that is the
+    // PropTypes.elementType to use for the inner tag, so we'll need to pass `tagName` along if it is provided.
     // NOTE, the `as` prop is native to `semantic-ui` and is emulated in the `material-ui` theme
-
     const as = _internalFormWrapper ? tagName : undefined;
     const FormTag = _internalFormWrapper || tagName || "form";
     return /*#__PURE__*/React.createElement(FormTag, {
@@ -4090,7 +3795,7 @@ class Form extends Component {
       onSubmit: this.onSubmit,
       as: as,
       ref: this.formElement
-    }, this.renderErrors(registry), /*#__PURE__*/React.createElement(_SchemaField, {
+    }, showErrorList === "top" && this.renderErrors(registry), /*#__PURE__*/React.createElement(_SchemaField, {
       name: "",
       schema: schema,
       uiSchema: uiSchema,
@@ -4108,36 +3813,38 @@ class Form extends Component {
       readonly: readonly
     }), children ? children : /*#__PURE__*/React.createElement(SubmitButton, {
       uiSchema: uiSchema
-    }));
+    }), showErrorList === "bottom" && this.renderErrors(registry));
   }
-
 }
 
 /** A Higher-Order component that creates a wrapper around a `Form` with the overrides from the `WithThemeProps` */
-
 function withTheme(themeProps) {
   return /*#__PURE__*/forwardRef((_ref, ref) => {
     var _themeProps$templates, _templates;
-
     let {
       fields,
       widgets,
       templates,
       ...directProps
     } = _ref;
-    fields = { ...themeProps.fields,
+    fields = {
+      ...themeProps.fields,
       ...fields
     };
-    widgets = { ...themeProps.widgets,
+    widgets = {
+      ...themeProps.widgets,
       ...widgets
     };
-    templates = { ...themeProps.templates,
+    templates = {
+      ...themeProps.templates,
       ...templates,
-      ButtonTemplates: { ...(themeProps === null || themeProps === void 0 ? void 0 : (_themeProps$templates = themeProps.templates) === null || _themeProps$templates === void 0 ? void 0 : _themeProps$templates.ButtonTemplates),
+      ButtonTemplates: {
+        ...(themeProps === null || themeProps === void 0 ? void 0 : (_themeProps$templates = themeProps.templates) === null || _themeProps$templates === void 0 ? void 0 : _themeProps$templates.ButtonTemplates),
         ...((_templates = templates) === null || _templates === void 0 ? void 0 : _templates.ButtonTemplates)
       }
     };
-    return /*#__PURE__*/React.createElement(Form, { ...themeProps,
+    return /*#__PURE__*/React.createElement(Form, {
+      ...themeProps,
       ...directProps,
       fields: fields,
       widgets: widgets,