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

package/dist/core.cjs.development.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var utils = require('@rjsf/utils');
-var _pick = require('lodash/pick');
 var get = require('lodash/get');
 var _isEmpty = require('lodash/isEmpty');
+var _pick = require('lodash/pick');
 var isObject = require('lodash/isObject');
 var set = require('lodash/set');
 var nanoid = require('nanoid');
@@ -17,9 +17,9 @@ var omit = require('lodash/omit');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var _pick__default = /*#__PURE__*/_interopDefaultLegacy(_pick);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
 var _isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_isEmpty);
+var _pick__default = /*#__PURE__*/_interopDefaultLegacy(_pick);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
 var unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
@@ -27,7 +27,6 @@ var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 
 /** Used to generate a unique ID for an element in a row */
-
 function generateRowId() {
   return nanoid.nanoid();
 }
@@ -36,8 +35,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 {
@@ -51,20 +48,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 React.Component {
   /** Constructs an `ArrayField` from the `props`, generating the initial keyed data from the `formData`
    *
@@ -72,7 +64,6 @@ class ArrayField extends React.Component {
    */
   constructor(props) {
     super(props);
-
     this._getNewFormDataRow = () => {
       const {
         schema,
@@ -82,20 +73,16 @@ class ArrayField extends React.Component {
         schemaUtils
       } = registry;
       let itemSchema = schema.items;
-
       if (utils.isFixedItems(schema) && utils.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;
@@ -112,13 +99,11 @@ class ArrayField extends React.Component {
         updatedKeyedFormData: true
       }, () => onChange(keyedToPlainFormData(newKeyedFormData)));
     };
-
     this.onAddIndexClick = index => {
       return event => {
         if (event) {
           event.preventDefault();
         }
-
         const {
           onChange
         } = this.props;
@@ -137,29 +122,24 @@ class ArrayField extends React.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__default["default"](newErrorSchema, [i], errorSchema[idx]);
             } else if (i > index) {
@@ -167,7 +147,6 @@ class ArrayField extends React.Component {
             }
           }
         }
-
         const newKeyedFormData = keyedFormData.filter((_, i) => i !== index);
         this.setState({
           keyedFormData: newKeyedFormData,
@@ -175,26 +154,21 @@ class ArrayField extends React.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__default["default"](newErrorSchema, [newIndex], errorSchema[index]);
             } else if (i == newIndex) {
@@ -204,32 +178,25 @@ class ArrayField extends React.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) => {
+      return (value, newErrorSchema, id) => {
         const {
           formData,
           onChange,
@@ -242,25 +209,23 @@ class ArrayField extends React.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
+        onChange,
+        idSchema
       } = this.props;
-      onChange(value);
+      onChange(value, undefined, idSchema && idSchema.$id);
     };
-
     const {
       formData: _formData = []
     } = props;
-
     const _keyedFormData = generateKeyedFormData(_formData);
-
     this.state = {
       keyedFormData: _keyedFormData,
       updatedKeyedFormData: false
@@ -272,8 +237,6 @@ class ArrayField extends React.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) {
@@ -281,7 +244,6 @@ class ArrayField extends React.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) => {
@@ -297,8 +259,6 @@ class ArrayField extends React.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
@@ -311,16 +271,13 @@ class ArrayField extends React.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
@@ -330,8 +287,6 @@ class ArrayField extends React.Component {
    * @param formItems - The list of items in the form
    * @returns - True if the item is addable otherwise false
    */
-
-
   canAddItem(formItems) {
     const {
       schema,
@@ -340,7 +295,6 @@ class ArrayField extends React.Component {
     let {
       addable
     } = utils.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
@@ -350,14 +304,12 @@ class ArrayField extends React.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() {
@@ -370,7 +322,6 @@ class ArrayField extends React.Component {
     const {
       schemaUtils
     } = registry;
-
     if (!(utils.ITEMS_KEY in schema)) {
       const uiOptions = utils.getUiOptions(uiSchema);
       const UnsupportedFieldTemplate = utils.getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
@@ -381,30 +332,23 @@ class ArrayField extends React.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 (utils.isCustomWidget(uiSchema)) {
       return this.renderCustomWidget();
     }
-
     if (utils.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,
@@ -432,9 +376,7 @@ class ArrayField extends React.Component {
       formContext
     } = registry;
     const uiOptions = utils.getUiOptions(uiSchema);
-
     const _schemaItems = isObject__default["default"](schema.items) ? schema.items : {};
-
     const itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
     const formData = keyedToPlainFormData(this.state.keyedFormData);
     const arrayProps = {
@@ -443,8 +385,8 @@ class ArrayField extends React.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;
@@ -453,10 +395,10 @@ class ArrayField extends React.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,
@@ -467,7 +409,7 @@ class ArrayField extends React.Component {
           rawErrors
         });
       }),
-      className: "field field-array field-array-of-" + itemsSchema.type,
+      className: `field field-array field-array-of-${itemsSchema.type}`,
       disabled,
       idSchema,
       uiSchema,
@@ -482,13 +424,12 @@ class ArrayField extends React.Component {
       registry
     };
     const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
-    return /*#__PURE__*/React__default["default"].createElement(Template, { ...arrayProps
+    return /*#__PURE__*/React__default["default"].createElement(Template, {
+      ...arrayProps
     });
   }
   /** Renders an array using the custom widget provided by the user in the `uiSchema`
    */
-
-
   renderCustomWidget() {
     const {
       schema,
@@ -541,8 +482,6 @@ class ArrayField extends React.Component {
   }
   /** Renders an array as a set of checkboxes
    */
-
-
   renderMultiSelect() {
     const {
       schema,
@@ -579,7 +518,8 @@ class ArrayField extends React.Component {
       onChange: this.onSelectChange,
       onBlur: onBlur,
       onFocus: onFocus,
-      options: { ...options,
+      options: {
+        ...options,
         enumOptions
       },
       schema: schema,
@@ -598,8 +538,6 @@ class ArrayField extends React.Component {
   }
   /** Renders an array of files using the `FileWidget`
    */
-
-
   renderFiles() {
     const {
       schema,
@@ -649,8 +587,6 @@ class ArrayField extends React.Component {
   }
   /** Renders an array that has a maximum limit of items
    */
-
-
   renderFixedArray() {
     const {
       schema,
@@ -682,20 +618,15 @@ class ArrayField extends React.Component {
       schemaUtils,
       formContext
     } = registry;
-
     const _schemaItems = isObject__default["default"](schema.items) ? schema.items : [];
-
     const itemSchemas = _schemaItems.map((item, index) => schemaUtils.retrieveSchema(item, formData[index]));
-
     const additionalSchema = isObject__default["default"](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",
@@ -706,8 +637,8 @@ class ArrayField extends React.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__default["default"](schema.additionalItems) ? schemaUtils.retrieveSchema(schema.additionalItems, itemCast) : itemSchemas[index];
@@ -718,7 +649,7 @@ class ArrayField extends React.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,
@@ -744,7 +675,8 @@ class ArrayField extends React.Component {
       rawErrors
     };
     const Template = utils.getTemplate("ArrayFieldTemplate", registry, uiOptions);
-    return /*#__PURE__*/React__default["default"].createElement(Template, { ...arrayProps
+    return /*#__PURE__*/React__default["default"].createElement(Template, {
+      ...arrayProps
     });
   }
   /** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
@@ -752,8 +684,6 @@ class ArrayField extends React.Component {
    *
    * @param props - The props for the individual array item to be rendered
    */
-
-
   renderArrayFieldItem(props) {
     const {
       key,
@@ -839,7 +769,6 @@ class ArrayField extends React.Component {
       uiSchema: itemUiSchema
     };
   }
-
 }
 
 /** The `BooleanField` component is used to render a field in the schema is boolean. It constructs `enumOptions` for the
@@ -847,7 +776,6 @@ class ArrayField extends React.Component {
  *
  * @param props - The `FieldProps` for this template
  */
-
 function BooleanField(props) {
   const {
     schema,
@@ -878,46 +806,41 @@ function BooleanField(props) {
   } = utils.getUiOptions(uiSchema);
   const Widget = utils.getWidget(schema, widget, widgets);
   let enumOptions;
-
   if (Array.isArray(schema.oneOf)) {
     enumOptions = utils.optionsList({
       oneOf: schema.oneOf.map(option => {
         if (isObject__default["default"](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;
-    schema.enum = (_schema$enum = schema.enum) != null ? _schema$enum : [true, false];
-
-    if (!schemaWithEnumNames.enumNames && schema.enum && schema.enum.length === 2 && schema.enum.every(v => typeof v === "boolean")) {
+    const enums = schema.enum ?? [true, false];
+    if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(v => typeof v === "boolean")) {
       enumOptions = [{
-        value: schema.enum[0],
-        label: schema.enum[0] ? "Yes" : "No"
+        value: enums[0],
+        label: enums[0] ? "Yes" : "No"
       }, {
-        value: schema.enum[1],
-        label: schema.enum[1] ? "Yes" : "No"
+        value: enums[1],
+        label: enums[1] ? "Yes" : "No"
       }];
     } else {
       enumOptions = utils.optionsList({
-        enum: schema.enum,
+        enum: enums,
         // NOTE: enumNames is deprecated, but still supported for now.
         enumNames: schemaWithEnumNames.enumNames
       });
     }
   }
-
   return /*#__PURE__*/React__default["default"].createElement(Widget, {
-    options: { ...options,
+    options: {
+      ...options,
       enumOptions
     },
     schema: schema,
@@ -943,7 +866,6 @@ function BooleanField(props) {
  *
  * @param props - The `FieldProps` for this template
  */
-
 class AnyOfField extends React.Component {
   /** Constructs an `AnyOfField` with the given `props` to initialize the initially selected option in state
    *
@@ -951,7 +873,6 @@ class AnyOfField extends React.Component {
    */
   constructor(props) {
     super(props);
-
     this.onOptionChange = option => {
       const selectedOption = parseInt(option, 10);
       const {
@@ -963,16 +884,15 @@ class AnyOfField extends React.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 (utils.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) {
@@ -982,15 +902,13 @@ class AnyOfField extends React.Component {
             }
           }
         }
-      } // Call getDefaultFormState to make sure defaults are populated on change.
-
-
-      onChange(schemaUtils.getDefaultFormState(options[selectedOption], newFormData));
+      }
+      // 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
@@ -1005,8 +923,6 @@ class AnyOfField extends React.Component {
    * @param prevProps - The previous `FieldProps` for this template
    * @param prevState - The previous `AnyOfFieldState` for this template
    */
-
-
   componentDidUpdate(prevProps, prevState) {
     const {
       formData,
@@ -1016,14 +932,11 @@ class AnyOfField extends React.Component {
     const {
       selectedOption
     } = this.state;
-
     if (!utils.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
       });
@@ -1035,20 +948,16 @@ class AnyOfField extends React.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
@@ -1058,7 +967,13 @@ class AnyOfField extends React.Component {
    * @param option -
    */
 
-
+  getFieldId() {
+    const {
+      idSchema,
+      schema
+    } = this.props;
+    return `${idSchema.$id}${schema.oneOf ? "__oneof_select" : "__anyof_select"}`;
+  }
   /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
    */
   render() {
@@ -1079,8 +994,7 @@ class AnyOfField extends React.Component {
       onFocus,
       options,
       registry,
-      uiSchema,
-      schema
+      uiSchema
     } = this.props;
     const {
       widgets,
@@ -1101,7 +1015,6 @@ class AnyOfField extends React.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
@@ -1109,9 +1022,8 @@ class AnyOfField extends React.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__default["default"].createElement("div", {
@@ -1119,7 +1031,7 @@ class AnyOfField extends React.Component {
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "form-group"
     }, /*#__PURE__*/React__default["default"].createElement(Widget, {
-      id: "" + idSchema.$id + (schema.oneOf ? "__oneof_select" : "__anyof_select"),
+      id: this.getFieldId(),
       schema: {
         type: "number",
         default: 0
@@ -1154,18 +1066,17 @@ class AnyOfField extends React.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
@@ -1184,7 +1095,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,
@@ -1201,36 +1111,33 @@ function NumberField(props) {
    *
    * @param value - The current value for the change occurring
    */
-
   const handleChange = React.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) ? utils.asNumber(value.replace(trailingCharMatcher, "")) : utils.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__default["default"].createElement(StringField, { ...props,
+  return /*#__PURE__*/React__default["default"].createElement(StringField, {
+    ...props,
     formData: value,
     onChange: handleChange
   });
@@ -1241,30 +1148,25 @@ function NumberField(props) {
  *
  * @param props - The `FieldProps` for this template
  */
-
 class ObjectField extends React.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) => {
+      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
@@ -1275,16 +1177,16 @@ class ObjectField extends React.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();
@@ -1292,13 +1194,13 @@ class ObjectField extends React.Component {
           onChange,
           formData
         } = this.props;
-        const copiedFormData = { ...formData
+        const copiedFormData = {
+          ...formData
         };
         unset__default["default"](copiedFormData, key);
         onChange(copiedFormData);
       };
     };
-
     this.getAvailableKey = (preferredKey, formData) => {
       const {
         uiSchema
@@ -1308,27 +1210,24 @@ class ObjectField extends React.Component {
       } = utils.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
@@ -1343,43 +1242,43 @@ class ObjectField extends React.Component {
         this.setState({
           wasPropertyKeyModified: true
         });
-        onChange(renamedObj, errorSchema && errorSchema && { ...errorSchema,
+        onChange(renamedObj, errorSchema && errorSchema && {
+          ...errorSchema,
           [value]: newErrorSchema
         });
       };
     };
-
     this.handleAddClick = schema => () => {
-      if (!isObject__default["default"](schema.additionalProperties)) {
+      if (!schema.additionalProperties) {
         return;
       }
-
       const {
         formData,
         onChange,
         registry
       } = this.props;
-      let type = schema.additionalProperties.type;
-      const newFormData = { ...formData
+      const newFormData = {
+        ...formData
       };
-
-      if (utils.REF_KEY in schema.additionalProperties) {
-        const {
-          schemaUtils
-        } = registry;
-        const refSchema = schemaUtils.retrieveSchema({
-          $ref: schema.additionalProperties[utils.REF_KEY]
-        }, formData);
-        type = refSchema.type;
+      let type = undefined;
+      if (isObject__default["default"](schema.additionalProperties)) {
+        type = schema.additionalProperties.type;
+        if (utils.REF_KEY in schema.additionalProperties) {
+          const {
+            schemaUtils
+          } = registry;
+          const refSchema = schemaUtils.retrieveSchema({
+            $ref: schema.additionalProperties[utils.REF_KEY]
+          }, formData);
+          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__default["default"](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
@@ -1400,7 +1299,6 @@ class ObjectField extends React.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
@@ -1409,22 +1307,16 @@ class ObjectField extends React.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";
@@ -1436,7 +1328,6 @@ class ObjectField extends React.Component {
    * @param schema - The schema element to which the new property is being added
    */
 
-
   /** Renders the `ObjectField` from the given props
    */
   render() {
@@ -1473,7 +1364,6 @@ class ObjectField extends React.Component {
     const title = schema.title === undefined ? name : schema.title;
     const description = uiOptions.description || schema.description;
     let orderedProperties;
-
     try {
       const properties = Object.keys(schemaProperties);
       orderedProperties = utils.orderProperties(properties, uiOptions.order);
@@ -1485,7 +1375,6 @@ class ObjectField extends React.Component {
         }
       }, "Invalid ", name || "root", " object field configuration:", /*#__PURE__*/React__default["default"].createElement("em", null, err.message), "."), /*#__PURE__*/React__default["default"].createElement("pre", null, JSON.stringify(schema)));
     }
-
     const Template = utils.getTemplate("ObjectFieldTemplate", registry, uiOptions);
     const templateProps = {
       title: uiOptions.title || title,
@@ -1536,15 +1425,14 @@ class ObjectField extends React.Component {
       formContext,
       registry
     };
-    return /*#__PURE__*/React__default["default"].createElement(Template, { ...templateProps,
+    return /*#__PURE__*/React__default["default"].createElement(Template, {
+      ...templateProps,
       onAddClick: this.handleAddClick
     });
   }
-
 }
 
 /** The map of component type to FieldName */
-
 const COMPONENT_TYPES = {
   array: "ArrayField",
   boolean: "BooleanField",
@@ -1564,36 +1452,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 = utils.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 = utils.getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
     return /*#__PURE__*/React__default["default"].createElement(UnsupportedFieldTemplate, {
       schema: schema,
       idSchema: idSchema,
-      reason: "Unknown field type " + schema.type,
+      reason: `Unknown field type ${schema.type}`,
       registry: registry
     });
   };
@@ -1604,8 +1487,6 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
  *
  * @param props - The `FieldProps` for this component
  */
-
-
 function SchemaFieldRender(props) {
   const {
     schema: _schema,
@@ -1633,32 +1514,38 @@ function SchemaFieldRender(props) {
   const FieldHelpTemplate = utils.getTemplate("FieldHelpTemplate", registry, uiOptions);
   const FieldErrorTemplate = utils.getTemplate("FieldErrorTemplate", registry, uiOptions);
   const schema = schemaUtils.retrieveSchema(_schema, formData);
-  const idSchema = utils.mergeObjects(schemaUtils.toIdSchema(schema, _idSchema.$id, formData, idPrefix, idSeparator), _idSchema);
+  const fieldId = _idSchema[utils.ID_KEY];
+  const idSchema = utils.mergeObjects(schemaUtils.toIdSchema(schema, fieldId, formData, idPrefix, idSeparator), _idSchema);
+  /** 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__default["default"].useCallback((formData, newErrorSchema, id) => {
+    const theId = id || fieldId;
+    return onChange(formData, newErrorSchema, theId);
+  }, [fieldId, onChange]);
   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__default["default"](uiSchema, ["ui:classNames", "classNames"]);
-
   if ("ui:options" in fieldUiSchema) {
     fieldUiSchema["ui:options"] = omit__default["default"](fieldUiSchema["ui:options"], ["classNames"]);
   }
-
-  const field = /*#__PURE__*/React__default["default"].createElement(FieldComponent, { ...props,
+  const field = /*#__PURE__*/React__default["default"].createElement(FieldComponent, {
+    ...props,
+    onChange: handleFieldComponentChange,
     idSchema: idSchema,
     schema: schema,
     uiSchema: fieldUiSchema,
@@ -1670,37 +1557,30 @@ function SchemaFieldRender(props) {
     formContext: formContext,
     rawErrors: __errors
   });
-  const id = idSchema[utils.ID_KEY]; // If this schema has a title defined, but the user has set a new key/label, retain their input.
-
+  const id = idSchema[utils.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 = utils.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) {
     {
       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__default["default"].createElement(FieldHelpTemplate, {
     help: help,
     idSchema: idSchema,
@@ -1719,8 +1599,10 @@ function SchemaFieldRender(props) {
   });
   const fieldProps = {
     description: /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-      id: id + "__description",
+      id: `${id}__description`,
       description: description,
+      schema: schema,
+      uiSchema: uiSchema,
       registry: registry
     }),
     rawDescription: description,
@@ -1748,7 +1630,8 @@ function SchemaFieldRender(props) {
   };
   const _AnyOfField = registry.fields.AnyOfField;
   const _OneOfField = registry.fields.OneOfField;
-  return /*#__PURE__*/React__default["default"].createElement(FieldTemplate, { ...fieldProps
+  return /*#__PURE__*/React__default["default"].createElement(FieldTemplate, {
+    ...fieldProps
   }, /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, field, schema.anyOf && !(uiSchema !== null && uiSchema !== void 0 && uiSchema["ui:field"]) && !schemaUtils.isSelect(schema) && /*#__PURE__*/React__default["default"].createElement(_AnyOfField, {
     name: name,
     disabled: disabled,
@@ -1792,25 +1675,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__default["default"].Component {
   shouldComponentUpdate(nextProps) {
     return !utils.deepEquals(this.props, nextProps);
   }
-
   render() {
-    return /*#__PURE__*/React__default["default"].createElement(SchemaFieldRender, { ...this.props
+    return /*#__PURE__*/React__default["default"].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,
@@ -1839,11 +1718,9 @@ function StringField(props) {
   } = registry;
   const enumOptions = schemaUtils.isSelect(schema) ? utils.optionsList(schema) : undefined;
   let defaultWidget = enumOptions ? "select" : "text";
-
   if (format && utils.hasWidget(schema, format, widgets)) {
     defaultWidget = format;
   }
-
   const {
     widget = defaultWidget,
     placeholder = "",
@@ -1851,7 +1728,8 @@ function StringField(props) {
   } = utils.getUiOptions(uiSchema);
   const Widget = utils.getWidget(schema, widget, widgets);
   return /*#__PURE__*/React__default["default"].createElement(Widget, {
-    options: { ...options,
+    options: {
+      ...options,
       enumOptions
     },
     schema: schema,
@@ -1878,7 +1756,6 @@ function StringField(props) {
  *
  * @param props - The `FieldProps` for this template
  */
-
 function NullField(props) {
   const {
     formData,
@@ -1892,43 +1769,48 @@ 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,
     description,
     registry,
+    schema,
     uiSchema
   } = props;
-
-  if (!description) {
+  const options = utils.getUiOptions(uiSchema);
+  const {
+    label: displayLabel = true
+  } = options;
+  if (!description || !displayLabel) {
     return null;
   }
-
-  const options = utils.getUiOptions(uiSchema);
   const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options);
-  const id = idSchema.$id + "__description";
+  const id = `${idSchema.$id}__description`;
   return /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
     id: id,
     description: description,
+    schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   });
 }
@@ -1937,7 +1819,6 @@ function ArrayFieldDescriptionTemplate(props) {
  *
  * @param props - The `ArrayFieldTemplateItemType` props for the component
  */
-
 function ArrayFieldItemTemplate(props) {
   const {
     children,
@@ -1999,7 +1880,6 @@ function ArrayFieldItemTemplate(props) {
  *
  * @param props - The `ArrayFieldTemplateItemType` props for the component
  */
-
 function ArrayFieldTemplate(props) {
   const {
     canAdd,
@@ -2018,8 +1898,8 @@ function ArrayFieldTemplate(props) {
   const uiOptions = utils.getUiOptions(uiSchema);
   const ArrayFieldDescriptionTemplate = utils.getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
   const ArrayFieldItemTemplate = utils.getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-  const ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
-
+  const ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: {
       AddButton
@@ -2032,11 +1912,13 @@ function ArrayFieldTemplate(props) {
     idSchema: idSchema,
     title: uiOptions.title || title,
     required: required,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
-  }), (uiOptions.description || schema.description) && /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
+  }), /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
     idSchema: idSchema,
     description: uiOptions.description || schema.description,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2063,27 +1945,29 @@ function ArrayFieldTemplate(props) {
  *
  * @param props - The `ArrayFieldTitleProps` for the component
  */
-
 function ArrayFieldTitleTemplate(props) {
   const {
     idSchema,
     title,
+    schema,
     uiSchema,
     required,
     registry
   } = props;
-
-  if (!title) {
+  const options = utils.getUiOptions(uiSchema);
+  const {
+    label: displayLabel = true
+  } = options;
+  if (!title || !displayLabel) {
     return null;
   }
-
-  const options = utils.getUiOptions(uiSchema);
   const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
-  const id = idSchema.$id + "__title";
+  const id = `${idSchema.$id}__title`;
   return /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
     id: id,
     title: title,
     required: required,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   });
@@ -2095,7 +1979,6 @@ function ArrayFieldTitleTemplate(props) {
  *
  * @param props - The `WidgetProps` for this template
  */
-
 function BaseInputTemplate(props) {
   const {
     id,
@@ -2114,25 +1997,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,
     ...utils.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 = React.useCallback(_ref => {
     let {
       target: {
@@ -2141,7 +2022,6 @@ function BaseInputTemplate(props) {
     } = _ref;
     return onChange(value === "" ? options.emptyValue : value);
   }, [onChange, options]);
-
   const _onBlur = React.useCallback(_ref2 => {
     let {
       target: {
@@ -2150,7 +2030,6 @@ function BaseInputTemplate(props) {
     } = _ref2;
     return onBlur(id, value);
   }, [onBlur, id]);
-
   const _onFocus = React.useCallback(_ref3 => {
     let {
       target: {
@@ -2159,7 +2038,6 @@ function BaseInputTemplate(props) {
     } = _ref3;
     return onFocus(id, value);
   }, [onFocus, id]);
-
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("input", {
     id: id,
     name: id,
@@ -2169,13 +2047,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__default["default"].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__default["default"].createElement("option", {
     key: example,
     value: example
@@ -2184,7 +2062,6 @@ function BaseInputTemplate(props) {
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
  */
-
 function SubmitButton(_ref) {
   let {
     uiSchema
@@ -2194,15 +2071,13 @@ function SubmitButton(_ref) {
     norender,
     props: submitButtonProps = {}
   } = utils.getSubmitButtonOptions(uiSchema);
-
   if (norender) {
     return null;
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("button", {
     type: "submit",
     ...submitButtonProps,
-    className: "btn btn-info " + submitButtonProps.className
+    className: `btn btn-info ${submitButtonProps.className}`
   }, submitText));
 }
 
@@ -2216,10 +2091,10 @@ function IconButton(props) {
   } = props;
   return /*#__PURE__*/React__default["default"].createElement("button", {
     type: "button",
-    className: "btn btn-" + iconType + " " + className,
+    className: `btn btn-${iconType} ${className}`,
     ...otherProps
   }, /*#__PURE__*/React__default["default"].createElement("i", {
-    className: "glyphicon glyphicon-" + icon
+    className: `glyphicon glyphicon-${icon}`
   }));
 }
 function MoveDownButton(props) {
@@ -2250,7 +2125,6 @@ function RemoveButton(props) {
 
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
-
 function AddButton(_ref) {
   let {
     className,
@@ -2260,7 +2134,7 @@ function AddButton(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row"
   }, /*#__PURE__*/React__default["default"].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__default["default"].createElement(IconButton, {
     iconType: "info",
     icon: "plus",
@@ -2271,29 +2145,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__default["default"].createElement("p", {
       id: id,
@@ -2311,7 +2184,6 @@ function DescriptionField(props) {
  *
  * @param props - The `ErrorListProps` for this component
  */
-
 function ErrorList(_ref) {
   let {
     errors
@@ -2337,18 +2209,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__default["default"].createElement("label", {
     className: "control-label",
     htmlFor: id
@@ -2362,7 +2231,6 @@ function Label(props) {
  *
  * @param props - The `FieldTemplateProps` for this component
  */
-
 function FieldTemplate(props) {
   const {
     id,
@@ -2379,14 +2247,13 @@ function FieldTemplate(props) {
   } = props;
   const uiOptions = utils.getUiOptions(uiSchema);
   const WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
-
   if (hidden) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "hidden"
     }, children);
   }
-
-  return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, { ...props
+  return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, {
+    ...props
   }, displayLabel && /*#__PURE__*/React__default["default"].createElement(Label, {
     label: label,
     required: required,
@@ -2398,18 +2265,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__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("ul", {
     id: id,
     className: "error-detail bs-callout bs-callout-info"
@@ -2425,26 +2289,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__default["default"].createElement("p", {
       id: id,
       className: "help-block"
     }, help);
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     id: id,
     className: "help-block"
@@ -2457,7 +2316,6 @@ function FieldHelpTemplate(props) {
  *
  * @param props - The `ObjectFieldTemplateProps` for this component
  */
-
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -2475,8 +2333,8 @@ function ObjectFieldTemplate(props) {
   } = props;
   const options = utils.getUiOptions(uiSchema);
   const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
-  const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options); // Button templates are not overridden in the uiSchema
-
+  const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options);
+  // Button templates are not overridden in the uiSchema
   const {
     ButtonTemplates: {
       AddButton
@@ -2485,14 +2343,17 @@ function ObjectFieldTemplate(props) {
   return /*#__PURE__*/React__default["default"].createElement("fieldset", {
     id: idSchema.$id
   }, (options.title || title) && /*#__PURE__*/React__default["default"].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__default["default"].createElement(DescriptionFieldTemplate, {
-    id: idSchema.$id + "__description",
+    id: `${idSchema.$id}__description`,
     description: options.description || description,
+    schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   }), properties.map(prop => prop.content), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(AddButton, {
     className: "object-property-expand",
@@ -2507,7 +2368,6 @@ const REQUIRED_FIELD_SYMBOL = "*";
  *
  * @param props - The `TitleFieldProps` for this component
  */
-
 function TitleField(props) {
   const {
     id,
@@ -2526,7 +2386,6 @@ function TitleField(props) {
  *
  * @param props - The `FieldProps` for this template
  */
-
 function UnsupportedField(props) {
   const {
     schema,
@@ -2543,7 +2402,6 @@ function UnsupportedField(props) {
  *
  * @param props - The `WrapIfAdditionalProps` for this component
  */
-
 function WrapIfAdditionalTemplate(props) {
   const {
     id,
@@ -2558,21 +2416,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 = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-
   if (!additional) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: classNames
     }, children);
   }
-
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classNames
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2584,11 +2439,11 @@ function WrapIfAdditionalTemplate(props) {
   }, /*#__PURE__*/React__default["default"].createElement(Label, {
     label: keyLabel,
     required: required,
-    id: id + "-key"
+    id: `${id}-key`
   }), /*#__PURE__*/React__default["default"].createElement("input", {
     className: "form-control",
     type: "text",
-    id: id + "-key",
+    id: `${id}-key`,
     onBlur: event => onKeyChange(event.target.value),
     defaultValue: label
   }))), /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2606,46 +2461,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: utils.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,
@@ -2667,7 +2519,6 @@ function dateElementProps(state, time, yearsRange) {
     range: [1, 31],
     value: day
   }];
-
   if (time) {
     data.push({
       type: "hour",
@@ -2683,10 +2534,8 @@ function dateElementProps(state, time, yearsRange) {
       value: second
     });
   }
-
   return data;
 }
-
 function DateElement(_ref) {
   let {
     type,
@@ -2729,8 +2578,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,
@@ -2746,7 +2593,8 @@ function AltDateWidget(_ref2) {
     value
   } = _ref2;
   const [state, setState] = React.useReducer((state, action) => {
-    return { ...state,
+    return {
+      ...state,
       ...action
     };
   }, utils.parseDateString(value, time));
@@ -2768,21 +2616,17 @@ function AltDateWidget(_ref2) {
   }, []);
   const handleSetNow = React.useCallback(event => {
     event.preventDefault();
-
     if (disabled || readonly) {
       return;
     }
-
     const nowDateObj = utils.parseDateString(new Date().toJSON(), time);
     setState(nowDateObj);
   }, [disabled, readonly, time]);
   const handleClear = React.useCallback(event => {
     event.preventDefault();
-
     if (disabled || readonly) {
       return;
     }
-
     setState(utils.parseDateString("", time));
     onChange(undefined);
   }, [disabled, readonly, time, onChange]);
@@ -2816,7 +2660,6 @@ function AltDateWidget(_ref2) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function AltDateTimeWidget(_ref) {
   let {
     time = true,
@@ -2836,10 +2679,10 @@ function AltDateTimeWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function CheckboxWidget(_ref) {
   let {
     schema,
+    uiSchema,
     options,
     id,
     value,
@@ -2852,19 +2695,21 @@ function CheckboxWidget(_ref) {
     onChange,
     registry
   } = _ref;
-  const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options); // Because an unchecked checkbox will cause html5 validation to fail, only add
+  const DescriptionFieldTemplate = utils.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 = utils.schemaRequiresTrueValue(schema);
   const handleChange = React.useCallback(event => onChange(event.target.checked), [onChange]);
   const handleBlur = React.useCallback(event => onBlur(id, event.target.checked), [onBlur, id]);
   const handleFocus = React.useCallback(event => onFocus(id, event.target.checked), [onFocus, id]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "checkbox " + (disabled || readonly ? "disabled" : "")
+    className: `checkbox ${disabled || readonly ? "disabled" : ""}`
   }, schema.description && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
     id: id + "__description",
     description: schema.description,
+    schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   }), /*#__PURE__*/React__default["default"].createElement("label", null, /*#__PURE__*/React__default["default"].createElement("input", {
     type: "checkbox",
@@ -2882,12 +2727,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);
 }
@@ -2896,8 +2740,6 @@ function deselectValue(value, selected) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
-
 function CheckboxesWidget(_ref) {
   let {
     id,
@@ -2919,7 +2761,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 {
@@ -2927,17 +2768,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__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
       type: "checkbox",
-      id: id + "-" + option.value,
+      id: `${id}-${option.value}`,
       name: id,
       checked: checked,
       disabled: disabled || itemDisabled || readonly,
@@ -2946,10 +2785,10 @@ function CheckboxesWidget(_ref) {
     }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
     return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
       key: option.value,
-      className: "checkbox-inline " + disabledCls
+      className: `checkbox-inline ${disabledCls}`
     }, checkbox) : /*#__PURE__*/React__default["default"].createElement("div", {
       key: option.value,
-      className: "checkbox " + disabledCls
+      className: `checkbox ${disabledCls}`
     }, /*#__PURE__*/React__default["default"].createElement("label", null, checkbox));
   }));
 }
@@ -2959,7 +2798,6 @@ function CheckboxesWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function ColorWidget(props) {
   const {
     disabled,
@@ -2980,7 +2818,6 @@ function ColorWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function DateWidget(props) {
   const {
     onChange,
@@ -3001,7 +2838,6 @@ function DateWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function DateTimeWidget(props) {
   const {
     onChange,
@@ -3022,7 +2858,6 @@ function DateTimeWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function EmailWidget(props) {
   const {
     options,
@@ -3039,10 +2874,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,
@@ -3052,10 +2885,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),
@@ -3072,24 +2903,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__default["default"].createElement("ul", {
     className: "file-info"
   }, filesInfo.map((fileInfo, key) => {
@@ -3103,7 +2929,6 @@ function FilesInfo(_ref) {
     }, /*#__PURE__*/React__default["default"].createElement("strong", null, name), " (", type, ", ", size, " bytes)");
   }));
 }
-
 function extractFileInfo(dataURLs) {
   return dataURLs.filter(dataURL => typeof dataURL !== "undefined").map(dataURL => {
     const {
@@ -3121,8 +2946,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,
@@ -3140,11 +2963,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 {
@@ -3172,7 +2993,6 @@ function FileWidget(_ref2) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function HiddenWidget(_ref) {
   let {
     id,
@@ -3190,7 +3010,6 @@ function HiddenWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function PasswordWidget(props) {
   const {
     options,
@@ -3208,7 +3027,6 @@ function PasswordWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function RadioWidget(_ref) {
   let {
     options,
@@ -3228,9 +3046,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 = React.useCallback(event => onBlur(id, event.target.value), [onBlur, id]);
   const handleFocus = React.useCallback(event => onFocus(id, event.target.value), [onFocus, id]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3240,12 +3058,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__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
       type: "radio",
-      id: id + "-" + option.value,
+      id: `${id}-${option.value}`,
       checked: checked,
       name: name,
       required: required,
@@ -3258,10 +3074,10 @@ function RadioWidget(_ref) {
     }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
     return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
       key: option.value,
-      className: "radio-inline " + disabledCls
+      className: `radio-inline ${disabledCls}`
     }, radio) : /*#__PURE__*/React__default["default"].createElement("div", {
       key: option.value,
-      className: "radio " + disabledCls
+      className: `radio ${disabledCls}`
     }, /*#__PURE__*/React__default["default"].createElement("label", null, radio));
   }));
 }
@@ -3271,7 +3087,6 @@ function RadioWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function RangeWidget(props) {
   const {
     value,
@@ -3295,7 +3110,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.
@@ -3303,8 +3117,6 @@ function getValue(event, multiple) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
-
 function SelectWidget(_ref) {
   let {
     schema,
@@ -3370,7 +3182,6 @@ function SelectWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function TextareaWidget(_ref) {
   let {
     id,
@@ -3425,7 +3236,6 @@ function TextareaWidget(_ref) {
     onChange: handleChange
   });
 }
-
 TextareaWidget.defaultProps = {
   autofocus: false,
   options: {}
@@ -3435,14 +3245,14 @@ TextareaWidget.defaultProps = {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function TextWidget(props) {
   const {
     options,
     registry
   } = props;
   const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, { ...props
+  return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+    ...props
   });
 }
 
@@ -3450,7 +3260,6 @@ function TextWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function URLWidget(props) {
   const {
     options,
@@ -3467,7 +3276,6 @@ function URLWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-
 function UpDownWidget(props) {
   const {
     options,
@@ -3480,44 +3288,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 React.Component {
   /** The ref used to hold the `form` element, this needs to be `any` because `tagName` or `_internalFormWrapper` can
    * provide any possible type here
@@ -3532,36 +3340,30 @@ class Form extends React.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__default["default"](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][utils.RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][utils.NAME_KEY] !== "") {
               acc.push(_obj[key][utils.NAME_KEY]);
             } else {
@@ -3569,12 +3371,9 @@ class Form extends React.Component {
             }
           } else if (key === utils.NAME_KEY && _obj[key] !== "") {
             paths.forEach(path => {
-              path = path.replace(/^\./, "");
-
-              const formValue = get__default["default"](formData, path); // adds path to fieldNames if it points to a value
+              const formValue = get__default["default"](formData, path);
+              // adds path to fieldNames if it points to a value
               // or an empty object/array
-
-
               if (typeof formValue !== "object" || _isEmpty__default["default"](formValue)) {
                 acc.push(path);
               }
@@ -3583,11 +3382,9 @@ class Form extends React.Component {
         });
         return acc;
       };
-
       return getAllPaths(pathSchema);
     };
-
-    this.onChange = (formData, newErrorSchema) => {
+    this.onChange = (formData, newErrorSchema, id) => {
       const {
         extraErrors,
         omitExtraData,
@@ -3600,19 +3397,16 @@ class Form extends React.Component {
         schemaUtils,
         schema
       } = this.state;
-
       if (utils.isObject(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);
@@ -3622,20 +3416,17 @@ class Form extends React.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,
@@ -3651,39 +3442,32 @@ class Form extends React.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,
@@ -3698,14 +3482,12 @@ class Form extends React.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.
@@ -3719,7 +3501,8 @@ class Form extends React.Component {
           schemaValidationErrorSchema: {}
         }, () => {
           if (onSubmit) {
-            onSubmit({ ...this.state,
+            onSubmit({
+              ...this.state,
               formData: newFormData,
               status: "submitted"
             }, event);
@@ -3727,17 +3510,13 @@ class Form extends React.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 && !utils.deepEquals(this.state.formData, this.props.formData)) {
       this.props.onChange(this.state);
     }
-
     this.formElement = /*#__PURE__*/React__default["default"].createRef();
   }
   /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
@@ -3746,15 +3525,11 @@ class Form extends React.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 (!utils.deepEquals(nextState.formData, nextProps.formData) && !utils.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
@@ -3765,8 +3540,6 @@ class Form extends React.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;
@@ -3776,14 +3549,11 @@ class Form extends React.Component {
     const mustValidate = edit && !props.noValidate && liveValidate;
     const rootSchema = schema;
     let schemaUtils = state.schemaUtils;
-
     if (!schemaUtils || schemaUtils.doesSchemaUtilsDiffer(props.validator, rootSchema)) {
       schemaUtils = utils.createSchemaUtils(props.validator, rootSchema);
     }
-
     const formData = schemaUtils.getDefaultFormState(schema, inputFormData);
     const retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-
     const getCurrentErrors = () => {
       if (props.noValidate) {
         return {
@@ -3796,18 +3566,15 @@ class Form extends React.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;
@@ -3819,7 +3586,6 @@ class Form extends React.Component {
       errors = currentErrors.errors;
       errorSchema = currentErrors.errorSchema;
     }
-
     if (props.extraErrors) {
       const merged = schemaUtils.mergeValidationData({
         errorSchema,
@@ -3828,7 +3594,6 @@ class Form extends React.Component {
       errorSchema = merged.errorSchema;
       errors = merged.errors;
     }
-
     const idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema["ui:rootFieldId"], formData, props.idPrefix, props.idSeparator);
     const nextState = {
       schemaUtils,
@@ -3850,8 +3615,6 @@ class Form extends React.Component {
    * @param nextState - The next version of the state
    * @returns - True if the component should be updated, false otherwise
    */
-
-
   shouldComponentUpdate(nextProps, nextState) {
     return utils.shouldRender(this, nextProps, nextState);
   }
@@ -3862,13 +3625,10 @@ class Form extends React.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,
@@ -3878,8 +3638,6 @@ class Form extends React.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,
@@ -3888,13 +3646,11 @@ class Form extends React.Component {
       uiSchema
     } = this.state;
     const {
-      showErrorList,
       formContext
     } = this.props;
     const options = utils.getUiOptions(uiSchema);
     const ErrorListTemplate = utils.getTemplate("ErrorListTemplate", registry, options);
-
-    if (errors && errors.length && showErrorList != false) {
+    if (errors && errors.length) {
       return /*#__PURE__*/React__default["default"].createElement(ErrorListTemplate, {
         errors: errors,
         errorSchema: errorSchema || {},
@@ -3903,7 +3659,6 @@ class Form extends React.Component {
         formContext: formContext
       });
     }
-
     return null;
   }
   /** Returns the `formData` with only the elements specified in the `fields` list
@@ -3912,11 +3667,9 @@ class Form extends React.Component {
    * @param fields - The fields to keep while filtering
    */
 
-
   /** Returns the registry for the form */
   getRegistry() {
     var _this$props$templates;
-
     const {
       schemaUtils
     } = this.state;
@@ -3927,16 +3680,20 @@ class Form extends React.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,
@@ -3945,8 +3702,6 @@ class Form extends React.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", {
@@ -3960,8 +3715,6 @@ class Form extends React.Component {
    *
    * @returns - True if the form is valid, false otherwise.
    */
-
-
   validateForm() {
     const {
       extraErrors,
@@ -3978,14 +3731,12 @@ class Form extends React.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,
@@ -4000,14 +3751,11 @@ class Form extends React.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,
@@ -4027,6 +3775,7 @@ class Form extends React.Component {
       disabled = false,
       readonly = false,
       formContext,
+      showErrorList = "top",
       _internalFormWrapper
     } = this.props;
     const {
@@ -4042,10 +3791,10 @@ class Form extends React.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__default["default"].createElement(FormTag, {
@@ -4062,7 +3811,7 @@ class Form extends React.Component {
       onSubmit: this.onSubmit,
       as: as,
       ref: this.formElement
-    }, this.renderErrors(registry), /*#__PURE__*/React__default["default"].createElement(_SchemaField, {
+    }, showErrorList === "top" && this.renderErrors(registry), /*#__PURE__*/React__default["default"].createElement(_SchemaField, {
       name: "",
       schema: schema,
       uiSchema: uiSchema,
@@ -4080,36 +3829,38 @@ class Form extends React.Component {
       readonly: readonly
     }), children ? children : /*#__PURE__*/React__default["default"].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__*/React.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__default["default"].createElement(Form, { ...themeProps,
+    return /*#__PURE__*/React__default["default"].createElement(Form, {
+      ...themeProps,
       ...directProps,
       fields: fields,
       widgets: widgets,