@rjsf/core 5.2.0 → 5.3.0

package/dist/core.esm.js

@@ -1,16 +1,18 @@
-import React, { Component, useState, useCallback, useEffect, useReducer, useMemo, forwardRef } from 'react';
-import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplate, TranslatableString, isCustomWidget, getWidget, optionsList, deepEquals, ERRORS_KEY, asNumber, REF_KEY, orderProperties, PROPERTIES_KEY, ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, ONE_OF_KEY, mergeObjects, UI_OPTIONS_KEY, descriptionId, getSchemaType, ID_KEY, hasWidget, titleId, getInputProps, examplesId, ariaDescribedByIds, getSubmitButtonOptions, errorId, helpId, canExpand, parseDateString, toDateString, pad, schemaRequiresTrueValue, enumOptionsValueForIndex, enumOptionsIsSelected, optionId, enumOptionsSelectValue, enumOptionsDeselectValue, utcToLocal, localToUTC, dataURItoBlob, enumOptionsIndexForValue, englishStringTranslator, createSchemaUtils, shouldRender, isObject as isObject$1, RJSF_ADDITONAL_PROPERTIES_FLAG, NAME_KEY } from '@rjsf/utils';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { Component, useState, useCallback, useEffect, useReducer, useMemo, createRef, forwardRef } from 'react';
+import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplate, TranslatableString, isCustomWidget, getWidget, optionsList, deepEquals, ERRORS_KEY, asNumber, REF_KEY, orderProperties, PROPERTIES_KEY, ADDITIONAL_PROPERTY_FLAG, ANY_OF_KEY, ONE_OF_KEY, mergeObjects, UI_OPTIONS_KEY, descriptionId, getSchemaType, ID_KEY, hasWidget, titleId, getInputProps, examplesId, ariaDescribedByIds, getSubmitButtonOptions, errorId, helpId, canExpand, parseDateString, toDateString, pad, schemaRequiresTrueValue, enumOptionsValueForIndex, enumOptionsIsSelected, optionId, enumOptionsSelectValue, enumOptionsDeselectValue, utcToLocal, localToUTC, dataURItoBlob, enumOptionsIndexForValue, englishStringTranslator, createSchemaUtils, shouldRender, UI_GLOBAL_OPTIONS_KEY, isObject as isObject$1, RJSF_ADDITONAL_PROPERTIES_FLAG, NAME_KEY } from '@rjsf/utils';
 import get from 'lodash-es/get';
 import isEmpty from 'lodash-es/isEmpty';
 import _pick from 'lodash-es/pick';
 import _toPath from 'lodash-es/toPath';
+import cloneDeep from 'lodash-es/cloneDeep';
 import isObject from 'lodash-es/isObject';
 import set from 'lodash-es/set';
 import { nanoid } from 'nanoid';
 import omit from 'lodash-es/omit';
+import Markdown from 'markdown-to-jsx';
 import has from 'lodash-es/has';
 import unset from 'lodash-es/unset';
-import Markdown from 'markdown-to-jsx';
 
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
@@ -147,6 +149,31 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         _this._handleAddClick(event, index);
       };
     };
+    _this.onCopyIndexClick = function (index) {
+      return function (event) {
+        if (event) {
+          event.preventDefault();
+        }
+        var onChange = _this.props.onChange;
+        var keyedFormData = _this.state.keyedFormData;
+        var newKeyedFormDataRow = {
+          key: generateRowId(),
+          item: cloneDeep(keyedFormData[index].item)
+        };
+        var newKeyedFormData = [].concat(keyedFormData);
+        if (index !== undefined) {
+          newKeyedFormData.splice(index + 1, 0, newKeyedFormDataRow);
+        } else {
+          newKeyedFormData.push(newKeyedFormDataRow);
+        }
+        _this.setState({
+          keyedFormData: newKeyedFormData,
+          updatedKeyedFormData: true
+        }, function () {
+          return onChange(keyedToPlainFormData(newKeyedFormData));
+        });
+      };
+    };
     _this.onDropIndexClick = function (index) {
       return function (event) {
         if (event) {
@@ -231,7 +258,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         var newFormData = arrayData.map(function (item, i) {
           // We need to treat undefined items as nulls to have validation.
           // See https://github.com/tdegrunt/jsonschema/issues/206
-          var jsonValue = typeof value === "undefined" ? null : value;
+          var jsonValue = typeof value === 'undefined' ? null : value;
           return index === i ? jsonValue : item;
         });
         onChange(newFormData, errorSchema && errorSchema && _extends({}, errorSchema, (_extends2 = {}, _extends2[index] = newErrorSchema, _extends2)), id);
@@ -291,10 +318,10 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     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");
+      return !itemSchema.type.includes('null');
     }
     // All non-null array item types are inherently required by design
-    return itemSchema.type !== "null";
+    return itemSchema.type !== 'null';
   }
   /** Determines whether more items can be added to the array. If the uiSchema indicates the array doesn't allow adding
    * then false is returned. Otherwise, if the schema indicates that there are a maximum number of items and the
@@ -306,8 +333,9 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   _proto.canAddItem = function canAddItem(formItems) {
     var _this$props6 = this.props,
       schema = _this$props6.schema,
-      uiSchema = _this$props6.uiSchema;
-    var _getUiOptions = getUiOptions(uiSchema),
+      uiSchema = _this$props6.uiSchema,
+      registry = _this$props6.registry;
+    var _getUiOptions = getUiOptions(uiSchema, registry.globalUiOptions),
       addable = _getUiOptions.addable;
     if (addable !== false) {
       // if ui:options.addable was not explicitly set to false, we can add
@@ -371,8 +399,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       translateString = registry.translateString;
     if (!(ITEMS_KEY in schema)) {
       var uiOptions = getUiOptions(uiSchema);
-      var UnsupportedFieldTemplate = getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
-      return /*#__PURE__*/React.createElement(UnsupportedFieldTemplate, {
+      var UnsupportedFieldTemplate = getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
+      return jsx(UnsupportedFieldTemplate, {
         schema: schema,
         idSchema: idSchema,
         reason: translateString(TranslatableString.MissingItems),
@@ -418,7 +446,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       onFocus = _this$props8.onFocus,
       idPrefix = _this$props8.idPrefix,
       _this$props8$idSepara = _this$props8.idSeparator,
-      idSeparator = _this$props8$idSepara === void 0 ? "_" : _this$props8$idSepara,
+      idSeparator = _this$props8$idSepara === void 0 ? '_' : _this$props8$idSepara,
       rawErrors = _this$props8.rawErrors;
     var keyedFormData = this.state.keyedFormData;
     var title = schema.title === undefined ? name : schema.title;
@@ -473,8 +501,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       rawErrors: rawErrors,
       registry: registry
     };
-    var Template = getTemplate("ArrayFieldTemplate", registry, uiOptions);
-    return /*#__PURE__*/React.createElement(Template, _extends({}, arrayProps));
+    var Template = getTemplate('ArrayFieldTemplate', registry, uiOptions);
+    return jsx(Template, _extends({}, arrayProps));
   }
   /** Renders an array using the custom widget provided by the user in the `uiSchema`
    */;
@@ -507,8 +535,9 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       widget = _getUiOptions2.widget,
       options = _objectWithoutPropertiesLoose(_getUiOptions2, _excluded$9);
     var Widget = getWidget(schema, widget, widgets);
-    return /*#__PURE__*/React.createElement(Widget, {
+    return jsx(Widget, {
       id: idSchema.$id,
+      name: name,
       multiple: true,
       onChange: this.onSelectChange,
       onBlur: onBlur,
@@ -560,11 +589,12 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     var enumOptions = optionsList(itemsSchema);
     var _getUiOptions3 = getUiOptions(uiSchema),
       _getUiOptions3$widget = _getUiOptions3.widget,
-      widget = _getUiOptions3$widget === void 0 ? "select" : _getUiOptions3$widget,
+      widget = _getUiOptions3$widget === void 0 ? 'select' : _getUiOptions3$widget,
       options = _objectWithoutPropertiesLoose(_getUiOptions3, _excluded2);
     var Widget = getWidget(schema, widget, widgets);
-    return /*#__PURE__*/React.createElement(Widget, {
+    return jsx(Widget, {
       id: idSchema.$id,
+      name: name,
       multiple: true,
       onChange: this.onSelectChange,
       onBlur: onBlur,
@@ -613,12 +643,13 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       formContext = registry.formContext;
     var _getUiOptions4 = getUiOptions(uiSchema),
       _getUiOptions4$widget = _getUiOptions4.widget,
-      widget = _getUiOptions4$widget === void 0 ? "files" : _getUiOptions4$widget,
+      widget = _getUiOptions4$widget === void 0 ? 'files' : _getUiOptions4$widget,
       options = _objectWithoutPropertiesLoose(_getUiOptions4, _excluded3);
     var Widget = getWidget(schema, widget, widgets);
-    return /*#__PURE__*/React.createElement(Widget, {
+    return jsx(Widget, {
       options: options,
       id: idSchema.$id,
+      name: name,
       multiple: true,
       onChange: this.onSelectChange,
       onBlur: onBlur,
@@ -634,7 +665,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       formContext: formContext,
       autofocus: autofocus,
       rawErrors: rawErrors,
-      label: ""
+      label: ''
     });
   }
   /** Renders an array that has a maximum limit of items
@@ -650,7 +681,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       errorSchema = _this$props12.errorSchema,
       idPrefix = _this$props12.idPrefix,
       _this$props12$idSepar = _this$props12.idSeparator,
-      idSeparator = _this$props12$idSepar === void 0 ? "_" : _this$props12$idSepar,
+      idSeparator = _this$props12$idSepar === void 0 ? '_' : _this$props12$idSepar,
       idSchema = _this$props12.idSchema,
       name = _this$props12.name,
       _this$props12$disable = _this$props12.disabled,
@@ -686,7 +717,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     var canAdd = this.canAddItem(items) && !!additionalSchema;
     var arrayProps = {
       canAdd: canAdd,
-      className: "field field-array field-array-fixed-items",
+      className: 'field field-array field-array-fixed-items',
       disabled: disabled,
       idSchema: idSchema,
       formData: formData,
@@ -731,8 +762,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       formContext: formContext,
       rawErrors: rawErrors
     };
-    var Template = getTemplate("ArrayFieldTemplate", registry, uiOptions);
-    return /*#__PURE__*/React.createElement(Template, _extends({}, arrayProps));
+    var Template = getTemplate('ArrayFieldTemplate', registry, uiOptions);
+    return jsx(Template, _extends({}, arrayProps));
   }
   /** Renders the individual array item using a `SchemaField` along with the additional properties required to be send
    * back to the `ArrayFieldItemTemplate`.
@@ -746,10 +777,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       canAdd = props.canAdd,
       _props$canRemove = props.canRemove,
       canRemove = _props$canRemove === void 0 ? true : _props$canRemove,
-      _props$canMoveUp = props.canMoveUp,
-      canMoveUp = _props$canMoveUp === void 0 ? true : _props$canMoveUp,
-      _props$canMoveDown = props.canMoveDown,
-      canMoveDown = _props$canMoveDown === void 0 ? true : _props$canMoveDown,
+      canMoveUp = props.canMoveUp,
+      canMoveDown = props.canMoveDown,
       itemSchema = props.itemSchema,
       itemData = props.itemData,
       itemUiSchema = props.itemUiSchema,
@@ -771,16 +800,20 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       formContext = _this$props13.formContext;
     var _registry$fields = registry.fields,
       ArraySchemaField = _registry$fields.ArraySchemaField,
-      SchemaField = _registry$fields.SchemaField;
+      SchemaField = _registry$fields.SchemaField,
+      globalUiOptions = registry.globalUiOptions;
     var ItemSchemaField = ArraySchemaField || SchemaField;
-    var _getUiOptions5 = getUiOptions(uiSchema),
+    var _getUiOptions5 = getUiOptions(uiSchema, globalUiOptions),
       _getUiOptions5$ordera = _getUiOptions5.orderable,
       orderable = _getUiOptions5$ordera === void 0 ? true : _getUiOptions5$ordera,
       _getUiOptions5$remova = _getUiOptions5.removable,
-      removable = _getUiOptions5$remova === void 0 ? true : _getUiOptions5$remova;
+      removable = _getUiOptions5$remova === void 0 ? true : _getUiOptions5$remova,
+      _getUiOptions5$copyab = _getUiOptions5.copyable,
+      copyable = _getUiOptions5$copyab === void 0 ? false : _getUiOptions5$copyab;
     var has = {
       moveUp: orderable && canMoveUp,
       moveDown: orderable && canMoveDown,
+      copy: copyable && canAdd,
       remove: removable && canRemove,
       toolbar: false
     };
@@ -788,7 +821,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       return has[key];
     });
     return {
-      children: /*#__PURE__*/React.createElement(ItemSchemaField, {
+      children: jsx(ItemSchemaField, {
         name: name,
         index: index,
         schema: itemSchema,
@@ -810,9 +843,10 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         autofocus: autofocus,
         rawErrors: rawErrors
       }),
-      className: "array-item",
+      className: 'array-item',
       disabled: disabled,
       canAdd: canAdd,
+      hasCopy: has.copy,
       hasToolbar: has.toolbar,
       hasMoveUp: has.moveUp,
       hasMoveDown: has.moveDown,
@@ -821,6 +855,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       totalItems: totalItems,
       key: key,
       onAddIndexClick: this.onAddIndexClick,
+      onCopyIndexClick: this.onCopyIndexClick,
       onDropIndexClick: this.onDropIndexClick,
       onReorderClick: this.onReorderClick,
       readonly: readonly,
@@ -836,7 +871,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         schema = _this$props14.schema,
         registry = _this$props14.registry;
       var translateString = registry.translateString;
-      return get(schema, [ITEMS_KEY, "title"], get(schema, [ITEMS_KEY, "description"], translateString(TranslatableString.ArrayItemTitle)));
+      return get(schema, [ITEMS_KEY, 'title'], get(schema, [ITEMS_KEY, 'description'], translateString(TranslatableString.ArrayItemTitle)));
     }
   }]);
   return ArrayField;
@@ -869,7 +904,7 @@ function BooleanField(props) {
     translateString = registry.translateString;
   var _getUiOptions = getUiOptions(uiSchema),
     _getUiOptions$widget = _getUiOptions.widget,
-    widget = _getUiOptions$widget === void 0 ? "checkbox" : _getUiOptions$widget,
+    widget = _getUiOptions$widget === void 0 ? 'checkbox' : _getUiOptions$widget,
     options = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$8);
   var Widget = getWidget(schema, widget, widgets);
   var yes = translateString(TranslatableString.YesLabel);
@@ -894,7 +929,7 @@ function BooleanField(props) {
     var schemaWithEnumNames = schema;
     var enums = (_schema$enum = schema["enum"]) != null ? _schema$enum : [true, false];
     if (!schemaWithEnumNames.enumNames && enums.length === 2 && enums.every(function (v) {
-      return typeof v === "boolean";
+      return typeof v === 'boolean';
     })) {
       enumOptions = [{
         value: enums[0],
@@ -911,13 +946,14 @@ function BooleanField(props) {
       });
     }
   }
-  return /*#__PURE__*/React.createElement(Widget, {
+  return jsx(Widget, {
     options: _extends({}, options, {
       enumOptions: enumOptions
     }),
     schema: schema,
     uiSchema: uiSchema,
     id: idSchema.$id,
+    name: name,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -967,7 +1003,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       if (newFormData && newOption) {
         // Call getDefaultFormState to make sure defaults are populated on change. Pass "excludeObjectChildren"
         // so that only the root objects themselves are created without adding undefined children properties
-        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, "excludeObjectChildren");
+        newFormData = schemaUtils.getDefaultFormState(newOption, newFormData, 'excludeObjectChildren');
       }
       onChange(newFormData, undefined, _this.getFieldId());
       _this.setState({
@@ -1054,12 +1090,13 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
     var _this$props4 = this.props,
       idSchema = _this$props4.idSchema,
       schema = _this$props4.schema;
-    return "" + idSchema.$id + (schema.oneOf ? "__oneof_select" : "__anyof_select");
+    return "" + idSchema.$id + (schema.oneOf ? '__oneof_select' : '__anyof_select');
   }
   /** Renders the `AnyOfField` selector along with a `SchemaField` for the value of the `formData`
    */;
   _proto.render = function render() {
     var _this$props5 = this.props,
+      name = _this$props5.name,
       baseType = _this$props5.baseType,
       _this$props5$disabled = _this$props5.disabled,
       disabled = _this$props5$disabled === void 0 ? false : _this$props5$disabled,
@@ -1080,7 +1117,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       retrievedOptions = _this$state2.retrievedOptions;
     var _getUiOptions = getUiOptions(uiSchema),
       _getUiOptions$widget = _getUiOptions.widget,
-      widget = _getUiOptions$widget === void 0 ? "select" : _getUiOptions$widget,
+      widget = _getUiOptions$widget === void 0 ? 'select' : _getUiOptions$widget,
       placeholder = _getUiOptions.placeholder,
       autofocus = _getUiOptions.autofocus,
       autocomplete = _getUiOptions.autocomplete,
@@ -1088,7 +1125,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       title = _getUiOptions$title === void 0 ? schema.title : _getUiOptions$title,
       uiOptions = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$7);
     var Widget = getWidget({
-      type: "number"
+      type: 'number'
     }, widget, widgets);
     var rawErrors = get(errorSchema, ERRORS_KEY, []);
     var fieldErrorSchema = omit(errorSchema, [ERRORS_KEY]);
@@ -1109,36 +1146,39 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
         value: index
       };
     });
-    return /*#__PURE__*/React.createElement("div", {
-      className: "panel panel-default panel-body"
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "form-group"
-    }, /*#__PURE__*/React.createElement(Widget, {
-      id: this.getFieldId(),
-      schema: {
-        type: "number",
-        "default": 0
-      },
-      onChange: this.onOptionChange,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      disabled: disabled || isEmpty(enumOptions),
-      multiple: false,
-      rawErrors: rawErrors,
-      errorSchema: fieldErrorSchema,
-      value: selectedOption >= 0 ? selectedOption : undefined,
-      options: _extends({
-        enumOptions: enumOptions
-      }, uiOptions),
-      registry: registry,
-      formContext: formContext,
-      placeholder: placeholder,
-      autocomplete: autocomplete,
-      autofocus: autofocus,
-      label: ""
-    })), option !== null && /*#__PURE__*/React.createElement(_SchemaField, _extends({}, this.props, {
-      schema: optionSchema
-    })));
+    return jsxs("div", {
+      className: 'panel panel-default panel-body',
+      children: [jsx("div", {
+        className: 'form-group',
+        children: jsx(Widget, {
+          id: this.getFieldId(),
+          name: "" + name + (schema.oneOf ? '__oneof_select' : '__anyof_select'),
+          schema: {
+            type: 'number',
+            "default": 0
+          },
+          onChange: this.onOptionChange,
+          onBlur: onBlur,
+          onFocus: onFocus,
+          disabled: disabled || isEmpty(enumOptions),
+          multiple: false,
+          rawErrors: rawErrors,
+          errorSchema: fieldErrorSchema,
+          value: selectedOption >= 0 ? selectedOption : undefined,
+          options: _extends({
+            enumOptions: enumOptions
+          }, uiOptions),
+          registry: registry,
+          formContext: formContext,
+          placeholder: placeholder,
+          autocomplete: autocomplete,
+          autofocus: autofocus,
+          label: ''
+        })
+      }), option !== null && jsx(_SchemaField, _extends({}, this.props, {
+        schema: optionSchema
+      }))]
+    });
   };
   return AnyOfField;
 }(Component);
@@ -1189,27 +1229,27 @@ function NumberField(props) {
     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) === ".") {
+    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
-    var processed = typeof value === "string" && value.match(trailingCharMatcherWithPrefix) ? asNumber(value.replace(trailingCharMatcher, "")) : asNumber(value);
+    var processed = typeof value === 'string' && value.match(trailingCharMatcherWithPrefix) ? asNumber(value.replace(trailingCharMatcher, '')) : asNumber(value);
     onChange(processed);
   }, [onChange]);
-  if (typeof lastValue === "string" && typeof value === "number") {
+  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
-    var re = new RegExp(("" + value).replace(".", "\\.") + "\\.?0*$");
+    var re = new RegExp(("" + value).replace('.', '\\.') + '\\.?0*$');
     // If the cached "lastValue" is a match, use that instead of the formData
     // value to prevent the input value from changing in the UI
     if (lastValue.match(re)) {
       value = lastValue;
     }
   }
-  return /*#__PURE__*/React.createElement(StringField, _extends({}, props, {
+  return jsx(StringField, _extends({}, props, {
     formData: value,
     onChange: handleChange
   }));
@@ -1250,7 +1290,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
           // fields which are "mandated" by the schema, these fields can
           // be set to undefined by clicking a "delete field" button, so
           // set empty values to the empty string.
-          value = "";
+          value = '';
         }
         var newFormData = _extends({}, formData, (_extends2 = {}, _extends2[name] = value, _extends2));
         onChange(newFormData, errorSchema && errorSchema && _extends({}, errorSchema, (_extends3 = {}, _extends3[name] = newErrorSchema, _extends3)), id);
@@ -1268,10 +1308,12 @@ var ObjectField = /*#__PURE__*/function (_Component) {
       };
     };
     _this.getAvailableKey = function (preferredKey, formData) {
-      var uiSchema = _this.props.uiSchema;
-      var _getUiOptions = getUiOptions(uiSchema),
+      var _this$props3 = _this.props,
+        uiSchema = _this$props3.uiSchema,
+        registry = _this$props3.registry;
+      var _getUiOptions = getUiOptions(uiSchema, registry.globalUiOptions),
         _getUiOptions$duplica = _getUiOptions.duplicateKeySuffixSeparator,
-        duplicateKeySuffixSeparator = _getUiOptions$duplica === void 0 ? "-" : _getUiOptions$duplica;
+        duplicateKeySuffixSeparator = _getUiOptions$duplica === void 0 ? '-' : _getUiOptions$duplica;
       var index = 0;
       var newKey = preferredKey;
       while (has(formData, newKey)) {
@@ -1285,10 +1327,10 @@ var ObjectField = /*#__PURE__*/function (_Component) {
         if (oldValue === value) {
           return;
         }
-        var _this$props3 = _this.props,
-          formData = _this$props3.formData,
-          onChange = _this$props3.onChange,
-          errorSchema = _this$props3.errorSchema;
+        var _this$props4 = _this.props,
+          formData = _this$props4.formData,
+          onChange = _this$props4.onChange,
+          errorSchema = _this$props4.errorSchema;
         value = _this.getAvailableKey(value, formData);
         var newFormData = _extends({}, formData);
         var newKeys = (_newKeys = {}, _newKeys[oldValue] = value, _newKeys);
@@ -1309,10 +1351,10 @@ var ObjectField = /*#__PURE__*/function (_Component) {
         if (!schema.additionalProperties) {
           return;
         }
-        var _this$props4 = _this.props,
-          formData = _this$props4.formData,
-          onChange = _this$props4.onChange,
-          registry = _this$props4.registry;
+        var _this$props5 = _this.props,
+          formData = _this$props5.formData,
+          onChange = _this$props5.onChange,
+          registry = _this$props5.registry;
         var newFormData = _extends({}, formData);
         var type = undefined;
         if (isObject(schema.additionalProperties)) {
@@ -1326,10 +1368,10 @@ var ObjectField = /*#__PURE__*/function (_Component) {
             type = apSchema.type;
           }
           if (!type && (ANY_OF_KEY in apSchema || ONE_OF_KEY in apSchema)) {
-            type = "object";
+            type = 'object';
           }
         }
-        var newKey = _this.getAvailableKey("newKey", newFormData);
+        var newKey = _this.getAvailableKey('newKey', newFormData);
         // Cast this to make the `set` work properly
         set(newFormData, newKey, _this.getDefaultValue(type));
         onChange(newFormData);
@@ -1362,17 +1404,17 @@ var ObjectField = /*#__PURE__*/function (_Component) {
   _proto.getDefaultValue = function getDefaultValue(type) {
     var translateString = this.props.registry.translateString;
     switch (type) {
-      case "array":
+      case 'array':
         return [];
-      case "boolean":
+      case 'boolean':
         return false;
-      case "null":
+      case 'null':
         return null;
-      case "number":
+      case 'number':
         return 0;
-      case "object":
+      case 'object':
         return {};
-      case "string":
+      case 'string':
       default:
         // We don't have a datatype for some reason (perhaps additionalProperties was true)
         return translateString(TranslatableString.NewStringDefault);
@@ -1387,60 +1429,67 @@ var ObjectField = /*#__PURE__*/function (_Component) {
    */
   _proto.render = function render() {
     var _this2 = this;
-    var _this$props5 = this.props,
-      rawSchema = _this$props5.schema,
-      _this$props5$uiSchema = _this$props5.uiSchema,
-      uiSchema = _this$props5$uiSchema === void 0 ? {} : _this$props5$uiSchema,
-      formData = _this$props5.formData,
-      errorSchema = _this$props5.errorSchema,
-      idSchema = _this$props5.idSchema,
-      name = _this$props5.name,
-      _this$props5$required = _this$props5.required,
-      required = _this$props5$required === void 0 ? false : _this$props5$required,
-      _this$props5$disabled = _this$props5.disabled,
-      disabled = _this$props5$disabled === void 0 ? false : _this$props5$disabled,
-      _this$props5$readonly = _this$props5.readonly,
-      readonly = _this$props5$readonly === void 0 ? false : _this$props5$readonly,
-      hideError = _this$props5.hideError,
-      idPrefix = _this$props5.idPrefix,
-      idSeparator = _this$props5.idSeparator,
-      onBlur = _this$props5.onBlur,
-      onFocus = _this$props5.onFocus,
-      registry = _this$props5.registry;
+    var _this$props6 = this.props,
+      rawSchema = _this$props6.schema,
+      _this$props6$uiSchema = _this$props6.uiSchema,
+      uiSchema = _this$props6$uiSchema === void 0 ? {} : _this$props6$uiSchema,
+      formData = _this$props6.formData,
+      errorSchema = _this$props6.errorSchema,
+      idSchema = _this$props6.idSchema,
+      name = _this$props6.name,
+      _this$props6$required = _this$props6.required,
+      required = _this$props6$required === void 0 ? false : _this$props6$required,
+      _this$props6$disabled = _this$props6.disabled,
+      disabled = _this$props6$disabled === void 0 ? false : _this$props6$disabled,
+      _this$props6$readonly = _this$props6.readonly,
+      readonly = _this$props6$readonly === void 0 ? false : _this$props6$readonly,
+      hideError = _this$props6.hideError,
+      idPrefix = _this$props6.idPrefix,
+      idSeparator = _this$props6.idSeparator,
+      onBlur = _this$props6.onBlur,
+      onFocus = _this$props6.onFocus,
+      registry = _this$props6.registry;
     var fields = registry.fields,
       formContext = registry.formContext,
-      schemaUtils = registry.schemaUtils;
+      schemaUtils = registry.schemaUtils,
+      translateString = registry.translateString;
     var SchemaField = fields.SchemaField;
     var schema = schemaUtils.retrieveSchema(rawSchema, formData);
     var uiOptions = getUiOptions(uiSchema);
     var _schema$properties = schema.properties,
       schemaProperties = _schema$properties === void 0 ? {} : _schema$properties;
-    var title = schema.title === undefined ? name : schema.title;
+    var title = uiOptions.title || (schema.title === undefined ? name : schema.title);
     var description = uiOptions.description || schema.description;
     var orderedProperties;
     try {
       var properties = Object.keys(schemaProperties);
       orderedProperties = orderProperties(properties, uiOptions.order);
     } catch (err) {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", {
-        className: "config-error",
-        style: {
-          color: "red"
-        }
-      }, "Invalid ", name || "root", " object field configuration:", /*#__PURE__*/React.createElement("em", null, err.message), "."), /*#__PURE__*/React.createElement("pre", null, JSON.stringify(schema)));
+      return jsxs("div", {
+        children: [jsx("p", {
+          className: 'config-error',
+          style: {
+            color: 'red'
+          },
+          children: jsx(Markdown, {
+            children: translateString(TranslatableString.InvalidObjectField, [name || 'root', err.message])
+          })
+        }), jsx("pre", {
+          children: JSON.stringify(schema)
+        })]
+      });
     }
-    var Template = getTemplate("ObjectFieldTemplate", registry, uiOptions);
+    var Template = getTemplate('ObjectFieldTemplate', registry, uiOptions);
     var templateProps = {
-      title: uiOptions.title || title,
+      title: title,
       description: description,
       properties: orderedProperties.map(function (name) {
         var addedByAdditionalProperties = has(schema, [PROPERTIES_KEY, name, ADDITIONAL_PROPERTY_FLAG]);
         var fieldUiSchema = addedByAdditionalProperties ? uiSchema.additionalProperties : uiSchema[name];
-        var hidden = getUiOptions(fieldUiSchema).widget === "hidden";
+        var hidden = getUiOptions(fieldUiSchema).widget === 'hidden';
         var fieldIdSchema = get(idSchema, [name], {});
         return {
-          content: /*#__PURE__*/React.createElement(SchemaField, {
-            key: name,
+          content: jsx(SchemaField, {
             name: name,
             required: _this2.isRequired(name),
             schema: get(schema, [PROPERTIES_KEY, name], {}),
@@ -1461,7 +1510,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
             readonly: readonly,
             hideError: hideError,
             onDropPropertyClick: _this2.onDropPropertyClick
-          }),
+          }, name),
           name: name,
           readonly: readonly,
           disabled: disabled,
@@ -1479,7 +1528,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
       formContext: formContext,
       registry: registry
     };
-    return /*#__PURE__*/React.createElement(Template, _extends({}, templateProps, {
+    return jsx(Template, _extends({}, templateProps, {
       onAddClick: this.handleAddClick
     }));
   };
@@ -1489,13 +1538,13 @@ var ObjectField = /*#__PURE__*/function (_Component) {
 var _excluded$6 = ["__errors"];
 /** The map of component type to FieldName */
 var COMPONENT_TYPES = {
-  array: "ArrayField",
-  "boolean": "BooleanField",
-  integer: "NumberField",
-  number: "NumberField",
-  object: "ObjectField",
-  string: "StringField",
-  "null": "NullField"
+  array: 'ArrayField',
+  "boolean": 'BooleanField',
+  integer: 'NumberField',
+  number: 'NumberField',
+  object: 'ObjectField',
+  string: 'StringField',
+  "null": 'NullField'
 };
 /** Computes and returns which `Field` implementation to return in order to render the field represented by the
  * `schema`. The `uiOptions` are used to alter what potential `Field` implementation is actually returned. If no
@@ -1511,14 +1560,14 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
   var field = uiOptions.field;
   var fields = registry.fields,
     translateString = registry.translateString;
-  if (typeof field === "function") {
+  if (typeof field === 'function') {
     return field;
   }
-  if (typeof field === "string" && field in fields) {
+  if (typeof field === 'string' && field in fields) {
     return fields[field];
   }
   var schemaType = getSchemaType(schema);
-  var type = Array.isArray(schemaType) ? schemaType[0] : schemaType || "";
+  var type = Array.isArray(schemaType) ? schemaType[0] : schemaType || '';
   var 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
@@ -1528,8 +1577,8 @@ function getFieldComponent(schema, uiOptions, idSchema, registry) {
     };
   }
   return componentName in fields ? fields[componentName] : function () {
-    var UnsupportedFieldTemplate = getTemplate("UnsupportedFieldTemplate", registry, uiOptions);
-    return /*#__PURE__*/React.createElement(UnsupportedFieldTemplate, {
+    var UnsupportedFieldTemplate = getTemplate('UnsupportedFieldTemplate', registry, uiOptions);
+    return jsx(UnsupportedFieldTemplate, {
       schema: schema,
       idSchema: idSchema,
       reason: translateString(TranslatableString.UnknownFieldType, [String(schema.type)]),
@@ -1560,19 +1609,20 @@ function SchemaFieldRender(props) {
     _props$wasPropertyKey = props.wasPropertyKeyModified,
     wasPropertyKeyModified = _props$wasPropertyKey === void 0 ? false : _props$wasPropertyKey;
   var formContext = registry.formContext,
-    schemaUtils = registry.schemaUtils;
-  var uiOptions = getUiOptions(uiSchema);
-  var FieldTemplate = getTemplate("FieldTemplate", registry, uiOptions);
-  var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions);
-  var FieldHelpTemplate = getTemplate("FieldHelpTemplate", registry, uiOptions);
-  var FieldErrorTemplate = getTemplate("FieldErrorTemplate", registry, uiOptions);
+    schemaUtils = registry.schemaUtils,
+    globalUiOptions = registry.globalUiOptions;
+  var uiOptions = getUiOptions(uiSchema, globalUiOptions);
+  var FieldTemplate = getTemplate('FieldTemplate', registry, uiOptions);
+  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
+  var FieldHelpTemplate = getTemplate('FieldHelpTemplate', registry, uiOptions);
+  var FieldErrorTemplate = getTemplate('FieldErrorTemplate', registry, uiOptions);
   var schema = schemaUtils.retrieveSchema(_schema, formData);
   var fieldId = _idSchema[ID_KEY];
   var idSchema = 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
    */
-  var handleFieldComponentChange = React.useCallback(function (formData, newErrorSchema, id) {
+  var handleFieldComponentChange = useCallback(function (formData, newErrorSchema, id) {
     var theId = id || fieldId;
     return onChange(formData, newErrorSchema, theId);
   }, [fieldId, onChange]);
@@ -1586,16 +1636,16 @@ function SchemaFieldRender(props) {
   if (Object.keys(schema).length === 0) {
     return null;
   }
-  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
+  var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema, globalUiOptions);
   var _ref = errorSchema || {},
     __errors = _ref.__errors,
     fieldErrorSchema = _objectWithoutPropertiesLoose(_ref, _excluded$6);
   // See #439: uiSchema: Don't pass consumed class names or style to child components
-  var fieldUiSchema = omit(uiSchema, ["ui:classNames", "classNames", "ui:style"]);
+  var fieldUiSchema = omit(uiSchema, ['ui:classNames', 'classNames', 'ui:style']);
   if (UI_OPTIONS_KEY in fieldUiSchema) {
-    fieldUiSchema[UI_OPTIONS_KEY] = omit(fieldUiSchema[UI_OPTIONS_KEY], ["classNames", "style"]);
+    fieldUiSchema[UI_OPTIONS_KEY] = omit(fieldUiSchema[UI_OPTIONS_KEY], ['classNames', 'style']);
   }
-  var field = /*#__PURE__*/React.createElement(FieldComponent, _extends({}, props, {
+  var field = jsx(FieldComponent, _extends({}, props, {
     onChange: handleFieldComponentChange,
     idSchema: idSchema,
     schema: schema,
@@ -1616,15 +1666,15 @@ function SchemaFieldRender(props) {
   } else {
     label = ADDITIONAL_PROPERTY_FLAG in schema ? name : uiOptions.title || props.schema.title || schema.title || name;
   }
-  var description = uiOptions.description || props.schema.description || schema.description || "";
+  var description = uiOptions.description || props.schema.description || schema.description || '';
   var help = uiOptions.help;
-  var hidden = uiOptions.widget === "hidden";
-  var classNames = ["form-group", "field", "field-" + schema.type];
+  var hidden = uiOptions.widget === 'hidden';
+  var classNames = ['form-group', 'field', "field-" + schema.type];
   if (!hideError && __errors && __errors.length > 0) {
-    classNames.push("field-error has-error has-danger");
+    classNames.push('field-error has-error has-danger');
   }
   if (uiSchema !== null && uiSchema !== void 0 && uiSchema.classNames) {
-    if (process.env.NODE_ENV !== "production") {
+    if (process.env.NODE_ENV !== 'production') {
       console.warn("'uiSchema.classNames' is deprecated and may be removed in a major release; Use 'ui:classNames' instead.");
     }
     classNames.push(uiSchema.classNames);
@@ -1632,7 +1682,7 @@ function SchemaFieldRender(props) {
   if (uiOptions.classNames) {
     classNames.push(uiOptions.classNames);
   }
-  var helpComponent = /*#__PURE__*/React.createElement(FieldHelpTemplate, {
+  var helpComponent = jsx(FieldHelpTemplate, {
     help: help,
     idSchema: idSchema,
     schema: schema,
@@ -1640,7 +1690,7 @@ function SchemaFieldRender(props) {
     hasErrors: !hideError && __errors && __errors.length > 0,
     registry: registry
   });
-  var errorsComponent = hideError ? undefined : /*#__PURE__*/React.createElement(FieldErrorTemplate, {
+  var errorsComponent = hideError ? undefined : jsx(FieldErrorTemplate, {
     errors: __errors,
     errorSchema: errorSchema,
     idSchema: idSchema,
@@ -1649,7 +1699,7 @@ function SchemaFieldRender(props) {
     registry: registry
   });
   var fieldProps = {
-    description: /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
+    description: jsx(DescriptionFieldTemplate, {
       id: descriptionId(id),
       description: description,
       schema: schema,
@@ -1658,7 +1708,7 @@ function SchemaFieldRender(props) {
     }),
     rawDescription: description,
     help: helpComponent,
-    rawHelp: typeof help === "string" ? help : undefined,
+    rawHelp: typeof help === 'string' ? help : undefined,
     errors: errorsComponent,
     rawErrors: hideError ? undefined : __errors,
     id: id,
@@ -1672,7 +1722,7 @@ function SchemaFieldRender(props) {
     readonly: readonly,
     hideError: hideError,
     displayLabel: displayLabel,
-    classNames: classNames.join(" ").trim(),
+    classNames: classNames.join(' ').trim(),
     style: uiOptions.style,
     formContext: formContext,
     formData: formData,
@@ -1682,68 +1732,72 @@ function SchemaFieldRender(props) {
   };
   var _AnyOfField = registry.fields.AnyOfField;
   var _OneOfField = registry.fields.OneOfField;
-  var isReplacingAnyOrOneOf = (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:field"]) && (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema["ui:fieldReplacesAnyOrOneOf"]) === true;
-  return /*#__PURE__*/React.createElement(FieldTemplate, _extends({}, fieldProps), /*#__PURE__*/React.createElement(React.Fragment, null, field, schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /*#__PURE__*/React.createElement(_AnyOfField, {
-    name: name,
-    disabled: disabled,
-    readonly: readonly,
-    hideError: hideError,
-    errorSchema: errorSchema,
-    formData: formData,
-    formContext: formContext,
-    idPrefix: idPrefix,
-    idSchema: idSchema,
-    idSeparator: idSeparator,
-    onBlur: props.onBlur,
-    onChange: props.onChange,
-    onFocus: props.onFocus,
-    options: schema.anyOf.map(function (_schema) {
-      return schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData);
-    }),
-    baseType: schema.type,
-    registry: registry,
-    schema: schema,
-    uiSchema: uiSchema
-  }), schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && /*#__PURE__*/React.createElement(_OneOfField, {
-    name: name,
-    disabled: disabled,
-    readonly: readonly,
-    hideError: hideError,
-    errorSchema: errorSchema,
-    formData: formData,
-    formContext: formContext,
-    idPrefix: idPrefix,
-    idSchema: idSchema,
-    idSeparator: idSeparator,
-    onBlur: props.onBlur,
-    onChange: props.onChange,
-    onFocus: props.onFocus,
-    options: schema.oneOf.map(function (_schema) {
-      return schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData);
-    }),
-    baseType: schema.type,
-    registry: registry,
-    schema: schema,
-    uiSchema: uiSchema
-  })));
+  var isReplacingAnyOrOneOf = (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:field']) && (uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema['ui:fieldReplacesAnyOrOneOf']) === true;
+  return jsx(FieldTemplate, _extends({}, fieldProps, {
+    children: jsxs(Fragment, {
+      children: [field, schema.anyOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && jsx(_AnyOfField, {
+        name: name,
+        disabled: disabled,
+        readonly: readonly,
+        hideError: hideError,
+        errorSchema: errorSchema,
+        formData: formData,
+        formContext: formContext,
+        idPrefix: idPrefix,
+        idSchema: idSchema,
+        idSeparator: idSeparator,
+        onBlur: props.onBlur,
+        onChange: props.onChange,
+        onFocus: props.onFocus,
+        options: schema.anyOf.map(function (_schema) {
+          return schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData);
+        }),
+        baseType: schema.type,
+        registry: registry,
+        schema: schema,
+        uiSchema: uiSchema
+      }), schema.oneOf && !isReplacingAnyOrOneOf && !schemaUtils.isSelect(schema) && jsx(_OneOfField, {
+        name: name,
+        disabled: disabled,
+        readonly: readonly,
+        hideError: hideError,
+        errorSchema: errorSchema,
+        formData: formData,
+        formContext: formContext,
+        idPrefix: idPrefix,
+        idSchema: idSchema,
+        idSeparator: idSeparator,
+        onBlur: props.onBlur,
+        onChange: props.onChange,
+        onFocus: props.onFocus,
+        options: schema.oneOf.map(function (_schema) {
+          return schemaUtils.retrieveSchema(isObject(_schema) ? _schema : {}, formData);
+        }),
+        baseType: schema.type,
+        registry: registry,
+        schema: schema,
+        uiSchema: uiSchema
+      })]
+    })
+  }));
 }
 /** 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.
  */
-var SchemaField = /*#__PURE__*/function (_React$Component) {
-  _inheritsLoose(SchemaField, _React$Component);
+var SchemaField = /*#__PURE__*/function (_Component) {
+  _inheritsLoose(SchemaField, _Component);
   function SchemaField() {
-    return _React$Component.apply(this, arguments) || this;
+    return _Component.apply(this, arguments) || this;
   }
   var _proto = SchemaField.prototype;
   _proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
     return !deepEquals(this.props, nextProps);
   };
   _proto.render = function render() {
-    return /*#__PURE__*/React.createElement(SchemaFieldRender, _extends({}, this.props));
+    return jsx(SchemaFieldRender, _extends({}, this.props));
   };
   return SchemaField;
-}(React.Component);
+}(Component);
 
 var _excluded$5 = ["widget", "placeholder"];
 /** The `StringField` component is used to render a schema field that represents a string type
@@ -1774,7 +1828,7 @@ function StringField(props) {
     formContext = registry.formContext,
     schemaUtils = registry.schemaUtils;
   var enumOptions = schemaUtils.isSelect(schema) ? optionsList(schema) : undefined;
-  var defaultWidget = enumOptions ? "select" : "text";
+  var defaultWidget = enumOptions ? 'select' : 'text';
   if (format && hasWidget(schema, format, widgets)) {
     defaultWidget = format;
   }
@@ -1782,16 +1836,17 @@ function StringField(props) {
     _getUiOptions$widget = _getUiOptions.widget,
     widget = _getUiOptions$widget === void 0 ? defaultWidget : _getUiOptions$widget,
     _getUiOptions$placeho = _getUiOptions.placeholder,
-    placeholder = _getUiOptions$placeho === void 0 ? "" : _getUiOptions$placeho,
+    placeholder = _getUiOptions$placeho === void 0 ? '' : _getUiOptions$placeho,
     options = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$5);
   var Widget = getWidget(schema, widget, widgets);
-  return /*#__PURE__*/React.createElement(Widget, {
+  return jsx(Widget, {
     options: _extends({}, options, {
       enumOptions: enumOptions
     }),
     schema: schema,
     uiSchema: uiSchema,
     id: idSchema.$id,
+    name: name,
     label: title === undefined ? name : title,
     value: formData,
     onChange: onChange,
@@ -1856,8 +1911,8 @@ function ArrayFieldDescriptionTemplate(props) {
   if (!description || !displayLabel) {
     return null;
   }
-  var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
+  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
+  return jsx(DescriptionFieldTemplate, {
     id: descriptionId(idSchema),
     description: description,
     schema: schema,
@@ -1878,13 +1933,16 @@ function ArrayFieldItemTemplate(props) {
     hasMoveDown = props.hasMoveDown,
     hasMoveUp = props.hasMoveUp,
     hasRemove = props.hasRemove,
+    hasCopy = props.hasCopy,
     index = props.index,
+    onCopyIndexClick = props.onCopyIndexClick,
     onDropIndexClick = props.onDropIndexClick,
     onReorderClick = props.onReorderClick,
     readonly = props.readonly,
     registry = props.registry,
     uiSchema = props.uiSchema;
   var _registry$templates$B = registry.templates.ButtonTemplates,
+    CopyButton = _registry$templates$B.CopyButton,
     MoveDownButton = _registry$templates$B.MoveDownButton,
     MoveUpButton = _registry$templates$B.MoveUpButton,
     RemoveButton = _registry$templates$B.RemoveButton;
@@ -1892,39 +1950,49 @@ function ArrayFieldItemTemplate(props) {
     flex: 1,
     paddingLeft: 6,
     paddingRight: 6,
-    fontWeight: "bold"
+    fontWeight: 'bold'
   };
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement("div", {
-    className: hasToolbar ? "col-xs-9" : "col-xs-12"
-  }, children), hasToolbar && /*#__PURE__*/React.createElement("div", {
-    className: "col-xs-3 array-item-toolbox"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "btn-group",
-    style: {
-      display: "flex",
-      justifyContent: "space-around"
-    }
-  }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React.createElement(MoveUpButton, {
-    style: btnStyle,
-    disabled: disabled || readonly || !hasMoveUp,
-    onClick: onReorderClick(index, index - 1),
-    uiSchema: uiSchema,
-    registry: registry
-  }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React.createElement(MoveDownButton, {
-    style: btnStyle,
-    disabled: disabled || readonly || !hasMoveDown,
-    onClick: onReorderClick(index, index + 1),
-    uiSchema: uiSchema,
-    registry: registry
-  }), hasRemove && /*#__PURE__*/React.createElement(RemoveButton, {
-    style: btnStyle,
-    disabled: disabled || readonly,
-    onClick: onDropIndexClick(index),
-    uiSchema: uiSchema,
-    registry: registry
-  }))));
+  return jsxs("div", {
+    className: className,
+    children: [jsx("div", {
+      className: hasToolbar ? 'col-xs-9' : 'col-xs-12',
+      children: children
+    }), hasToolbar && jsx("div", {
+      className: 'col-xs-3 array-item-toolbox',
+      children: jsxs("div", {
+        className: 'btn-group',
+        style: {
+          display: 'flex',
+          justifyContent: 'space-around'
+        },
+        children: [(hasMoveUp || hasMoveDown) && jsx(MoveUpButton, {
+          style: btnStyle,
+          disabled: disabled || readonly || !hasMoveUp,
+          onClick: onReorderClick(index, index - 1),
+          uiSchema: uiSchema,
+          registry: registry
+        }), (hasMoveUp || hasMoveDown) && jsx(MoveDownButton, {
+          style: btnStyle,
+          disabled: disabled || readonly || !hasMoveDown,
+          onClick: onReorderClick(index, index + 1),
+          uiSchema: uiSchema,
+          registry: registry
+        }), hasCopy && jsx(CopyButton, {
+          style: btnStyle,
+          disabled: disabled || readonly,
+          onClick: onCopyIndexClick(index),
+          uiSchema: uiSchema,
+          registry: registry
+        }), hasRemove && jsx(RemoveButton, {
+          style: btnStyle,
+          disabled: disabled || readonly,
+          onClick: onDropIndexClick(index),
+          uiSchema: uiSchema,
+          registry: registry
+        })]
+      })
+    })]
+  });
 }
 
 var _excluded$4 = ["key"];
@@ -1946,42 +2014,42 @@ function ArrayFieldTemplate(props) {
     schema = props.schema,
     title = props.title;
   var uiOptions = getUiOptions(uiSchema);
-  var ArrayFieldDescriptionTemplate = getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
-  var ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-  var ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  var ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
+  var ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
+  var ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
-  return /*#__PURE__*/React.createElement("fieldset", {
+  return jsxs("fieldset", {
     className: className,
-    id: idSchema.$id
-  }, /*#__PURE__*/React.createElement(ArrayFieldTitleTemplate, {
-    idSchema: idSchema,
-    title: uiOptions.title || title,
-    required: required,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), /*#__PURE__*/React.createElement(ArrayFieldDescriptionTemplate, {
-    idSchema: idSchema,
-    description: uiOptions.description || schema.description,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "row array-item-list"
-  }, items && items.map(function (_ref) {
-    var key = _ref.key,
-      itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-    return /*#__PURE__*/React.createElement(ArrayFieldItemTemplate, _extends({
-      key: key
-    }, itemProps));
-  })), canAdd && /*#__PURE__*/React.createElement(AddButton, {
-    className: "array-item-add",
-    onClick: onAddClick,
-    disabled: disabled || readonly,
-    uiSchema: uiSchema,
-    registry: registry
-  }));
+    id: idSchema.$id,
+    children: [jsx(ArrayFieldTitleTemplate, {
+      idSchema: idSchema,
+      title: uiOptions.title || title,
+      required: required,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), jsx(ArrayFieldDescriptionTemplate, {
+      idSchema: idSchema,
+      description: uiOptions.description || schema.description,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), jsx("div", {
+      className: 'row array-item-list',
+      children: items && items.map(function (_ref) {
+        var key = _ref.key,
+          itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+        return jsx(ArrayFieldItemTemplate, _extends({}, itemProps), key);
+      })
+    }), canAdd && jsx(AddButton, {
+      className: 'array-item-add',
+      onClick: onAddClick,
+      disabled: disabled || readonly,
+      uiSchema: uiSchema,
+      registry: registry
+    })]
+  });
 }
 
 /** The `ArrayFieldTitleTemplate` component renders a `TitleFieldTemplate` with an `id` derived from
@@ -2002,8 +2070,8 @@ function ArrayFieldTitleTemplate(props) {
   if (!title || !displayLabel) {
     return null;
   }
-  var TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(TitleFieldTemplate, {
+  var TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
+  return jsx(TitleFieldTemplate, {
     id: titleId(idSchema),
     title: title,
     required: required,
@@ -2013,7 +2081,7 @@ function ArrayFieldTitleTemplate(props) {
   });
 }
 
-var _excluded$3 = ["id", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type"];
+var _excluded$3 = ["id", "name", "value", "readonly", "disabled", "autofocus", "onBlur", "onFocus", "onChange", "onChangeOverride", "options", "schema", "uiSchema", "formContext", "registry", "rawErrors", "type"];
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
  * It can be customized/overridden for other themes or individual implementations as needed.
@@ -2029,6 +2097,7 @@ function BaseInputTemplate(props) {
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     onChange = props.onChange,
+    onChangeOverride = props.onChangeOverride,
     options = props.options,
     schema = props.schema,
     type = props.type,
@@ -2036,19 +2105,19 @@ function BaseInputTemplate(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);
+    console.log('No id for', props);
     throw new Error("no id for props " + JSON.stringify(props));
   }
   var inputProps = _extends({}, rest, getInputProps(schema, type, options));
   var inputValue;
-  if (inputProps.type === "number" || inputProps.type === "integer") {
-    inputValue = value || value === 0 ? value : "";
+  if (inputProps.type === 'number' || inputProps.type === 'integer') {
+    inputValue = value || value === 0 ? value : '';
   } else {
-    inputValue = value == null ? "" : value;
+    inputValue = value == null ? '' : value;
   }
   var _onChange = useCallback(function (_ref) {
     var value = _ref.target.value;
-    return onChange(value === "" ? options.emptyValue : value);
+    return onChange(value === '' ? options.emptyValue : value);
   }, [onChange, options]);
   var _onBlur = useCallback(function (_ref2) {
     var value = _ref2.target.value;
@@ -2058,29 +2127,30 @@ function BaseInputTemplate(props) {
     var value = _ref3.target.value;
     return onFocus(id, value);
   }, [onFocus, id]);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("input", _extends({
-    id: id,
-    name: id,
-    className: "form-control",
-    readOnly: readonly,
-    disabled: disabled,
-    autoFocus: autofocus,
-    value: inputValue
-  }, inputProps, {
-    list: schema.examples ? examplesId(id) : undefined,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
-  })), Array.isArray(schema.examples) && /*#__PURE__*/React.createElement("datalist", {
-    key: "datalist_" + id,
-    id: examplesId(id)
-  }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: example,
-      value: example
-    });
-  })));
+  return jsxs(Fragment, {
+    children: [jsx("input", _extends({
+      id: id,
+      name: id,
+      className: 'form-control',
+      readOnly: readonly,
+      disabled: disabled,
+      autoFocus: autofocus,
+      value: inputValue
+    }, inputProps, {
+      list: schema.examples ? examplesId(id) : undefined,
+      onChange: onChangeOverride || _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
+    })), Array.isArray(schema.examples) && jsx("datalist", {
+      id: examplesId(id),
+      children: schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
+        return jsx("option", {
+          value: example
+        }, example);
+      })
+    }, "datalist_" + id)]
+  });
 }
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
@@ -2095,53 +2165,67 @@ function SubmitButton(_ref) {
   if (norender) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("button", _extends({
-    type: "submit"
-  }, submitButtonProps, {
-    className: "btn btn-info " + submitButtonProps.className
-  }), submitText));
+  return jsx("div", {
+    children: jsx("button", _extends({
+      type: 'submit'
+    }, submitButtonProps, {
+      className: "btn btn-info " + submitButtonProps.className,
+      children: submitText
+    }))
+  });
 }
 
 var _excluded$2 = ["iconType", "icon", "className", "uiSchema", "registry"];
 function IconButton(props) {
   var _props$iconType = props.iconType,
-    iconType = _props$iconType === void 0 ? "default" : _props$iconType,
+    iconType = _props$iconType === void 0 ? 'default' : _props$iconType,
     icon = props.icon,
     className = props.className,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded$2);
-  return /*#__PURE__*/React.createElement("button", _extends({
-    type: "button",
+  return jsx("button", _extends({
+    type: 'button',
     className: "btn btn-" + iconType + " " + className
-  }, otherProps), /*#__PURE__*/React.createElement("i", {
-    className: "glyphicon glyphicon-" + icon
+  }, otherProps, {
+    children: jsx("i", {
+      className: "glyphicon glyphicon-" + icon
+    })
+  }));
+}
+function CopyButton(props) {
+  var translateString = props.registry.translateString;
+  return jsx(IconButton, _extends({
+    title: translateString(TranslatableString.CopyButton),
+    className: 'array-item-copy'
+  }, props, {
+    icon: 'copy'
   }));
 }
 function MoveDownButton(props) {
   var translateString = props.registry.translateString;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
+  return jsx(IconButton, _extends({
     title: translateString(TranslatableString.MoveDownButton),
-    className: "array-item-move-down"
+    className: 'array-item-move-down'
   }, props, {
-    icon: "arrow-down"
+    icon: 'arrow-down'
   }));
 }
 function MoveUpButton(props) {
   var translateString = props.registry.translateString;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
+  return jsx(IconButton, _extends({
     title: translateString(TranslatableString.MoveUpButton),
-    className: "array-item-move-up"
+    className: 'array-item-move-up'
   }, props, {
-    icon: "arrow-up"
+    icon: 'arrow-up'
   }));
 }
 function RemoveButton(props) {
   var translateString = props.registry.translateString;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
+  return jsx(IconButton, _extends({
     title: translateString(TranslatableString.RemoveButton),
-    className: "array-item-remove"
+    className: 'array-item-remove'
   }, props, {
-    iconType: "danger",
-    icon: "remove"
+    iconType: 'danger',
+    icon: 'remove'
   }));
 }
 
@@ -2153,25 +2237,28 @@ function AddButton(_ref) {
     disabled = _ref.disabled,
     registry = _ref.registry;
   var translateString = registry.translateString;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("p", {
-    className: "col-xs-3 col-xs-offset-9 text-right " + className
-  }, /*#__PURE__*/React.createElement(IconButton, {
-    iconType: "info",
-    icon: "plus",
-    className: "btn-add col-xs-12",
-    title: translateString(TranslatableString.AddButton),
-    onClick: onClick,
-    disabled: disabled,
-    registry: registry
-  })));
+  return jsx("div", {
+    className: 'row',
+    children: jsx("p", {
+      className: "col-xs-3 col-xs-offset-9 text-right " + className,
+      children: jsx(IconButton, {
+        iconType: 'info',
+        icon: 'plus',
+        className: 'btn-add col-xs-12',
+        title: translateString(TranslatableString.AddButton),
+        onClick: onClick,
+        disabled: disabled,
+        registry: registry
+      })
+    })
+  });
 }
 
 function buttonTemplates() {
   return {
     SubmitButton: SubmitButton,
     AddButton: AddButton,
+    CopyButton: CopyButton,
     MoveDownButton: MoveDownButton,
     MoveUpButton: MoveUpButton,
     RemoveButton: RemoveButton
@@ -2188,16 +2275,18 @@ function DescriptionField(props) {
   if (!description) {
     return null;
   }
-  if (typeof description === "string") {
-    return /*#__PURE__*/React.createElement("p", {
+  if (typeof description === 'string') {
+    return jsx("p", {
       id: id,
-      className: "field-description"
-    }, description);
+      className: 'field-description',
+      children: description
+    });
   } else {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       id: id,
-      className: "field-description"
-    }, description);
+      className: 'field-description',
+      children: description
+    });
   }
 }
 
@@ -2209,23 +2298,27 @@ function ErrorList(_ref) {
   var errors = _ref.errors,
     registry = _ref.registry;
   var translateString = registry.translateString;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "panel panel-danger errors"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "panel-heading"
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: "panel-title"
-  }, translateString(TranslatableString.ErrorsLabel))), /*#__PURE__*/React.createElement("ul", {
-    className: "list-group"
-  }, errors.map(function (error, i) {
-    return /*#__PURE__*/React.createElement("li", {
-      key: i,
-      className: "list-group-item text-danger"
-    }, error.stack);
-  })));
+  return jsxs("div", {
+    className: 'panel panel-danger errors',
+    children: [jsx("div", {
+      className: 'panel-heading',
+      children: jsx("h3", {
+        className: 'panel-title',
+        children: translateString(TranslatableString.ErrorsLabel)
+      })
+    }), jsx("ul", {
+      className: 'list-group',
+      children: errors.map(function (error, i) {
+        return jsx("li", {
+          className: 'list-group-item text-danger',
+          children: error.stack
+        }, i);
+      })
+    })]
+  });
 }
 
-var REQUIRED_FIELD_SYMBOL$1 = "*";
+var REQUIRED_FIELD_SYMBOL$1 = '*';
 /** Renders a label for a field
  *
  * @param props - The `LabelProps` for this component
@@ -2237,12 +2330,14 @@ function Label(props) {
   if (!label) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("label", {
-    className: "control-label",
-    htmlFor: id
-  }, label, required && /*#__PURE__*/React.createElement("span", {
-    className: "required"
-  }, REQUIRED_FIELD_SYMBOL$1));
+  return jsxs("label", {
+    className: 'control-label',
+    htmlFor: id,
+    children: [label, required && jsx("span", {
+      className: 'required',
+      children: REQUIRED_FIELD_SYMBOL$1
+    })]
+  });
 }
 
 /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
@@ -2263,17 +2358,20 @@ function FieldTemplate(props) {
     registry = props.registry,
     uiSchema = props.uiSchema;
   var uiOptions = getUiOptions(uiSchema);
-  var WrapIfAdditionalTemplate = getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
+  var WrapIfAdditionalTemplate = getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
   if (hidden) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "hidden"
-    }, children);
+    return jsx("div", {
+      className: 'hidden',
+      children: children
+    });
   }
-  return /*#__PURE__*/React.createElement(WrapIfAdditionalTemplate, _extends({}, props), displayLabel && /*#__PURE__*/React.createElement(Label, {
-    label: label,
-    required: required,
-    id: id
-  }), displayLabel && description ? description : null, children, errors, help);
+  return jsxs(WrapIfAdditionalTemplate, _extends({}, props, {
+    children: [displayLabel && jsx(Label, {
+      label: label,
+      required: required,
+      id: id
+    }), displayLabel && description ? description : null, children, errors, help]
+  }));
 }
 
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
@@ -2288,17 +2386,20 @@ function FieldErrorTemplate(props) {
     return null;
   }
   var id = errorId(idSchema);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("ul", {
-    id: id,
-    className: "error-detail bs-callout bs-callout-info"
-  }, errors.filter(function (elem) {
-    return !!elem;
-  }).map(function (error, index) {
-    return /*#__PURE__*/React.createElement("li", {
-      className: "text-danger",
-      key: index
-    }, error);
-  })));
+  return jsx("div", {
+    children: jsx("ul", {
+      id: id,
+      className: 'error-detail bs-callout bs-callout-info',
+      children: errors.filter(function (elem) {
+        return !!elem;
+      }).map(function (error, index) {
+        return jsx("li", {
+          className: 'text-danger',
+          children: error
+        }, index);
+      })
+    })
+  });
 }
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
@@ -2312,16 +2413,18 @@ function FieldHelpTemplate(props) {
     return null;
   }
   var id = helpId(idSchema);
-  if (typeof help === "string") {
-    return /*#__PURE__*/React.createElement("p", {
+  if (typeof help === 'string') {
+    return jsx("p", {
       id: id,
-      className: "help-block"
-    }, help);
+      className: 'help-block',
+      children: help
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     id: id,
-    className: "help-block"
-  }, help);
+    className: 'help-block',
+    children: help
+  });
 }
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -2344,37 +2447,38 @@ function ObjectFieldTemplate(props) {
     title = props.title,
     uiSchema = props.uiSchema;
   var options = getUiOptions(uiSchema);
-  var TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, options);
-  var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
+  var TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
+  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
-  return /*#__PURE__*/React.createElement("fieldset", {
-    id: idSchema.$id
-  }, (options.title || title) && /*#__PURE__*/React.createElement(TitleFieldTemplate, {
-    id: titleId(idSchema),
-    title: options.title || title,
-    required: required,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), (options.description || description) && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
-    id: descriptionId(idSchema),
-    description: options.description || description,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), properties.map(function (prop) {
-    return prop.content;
-  }), canExpand(schema, uiSchema, formData) && /*#__PURE__*/React.createElement(AddButton, {
-    className: "object-property-expand",
-    onClick: onAddClick(schema),
-    disabled: disabled || readonly,
-    uiSchema: uiSchema,
-    registry: registry
-  }));
+  return jsxs("fieldset", {
+    id: idSchema.$id,
+    children: [(options.title || title) && jsx(TitleFieldTemplate, {
+      id: titleId(idSchema),
+      title: options.title || title,
+      required: required,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), (options.description || description) && jsx(DescriptionFieldTemplate, {
+      id: descriptionId(idSchema),
+      description: options.description || description,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), properties.map(function (prop) {
+      return prop.content;
+    }), canExpand(schema, uiSchema, formData) && jsx(AddButton, {
+      className: 'object-property-expand',
+      onClick: onAddClick(schema),
+      disabled: disabled || readonly,
+      uiSchema: uiSchema,
+      registry: registry
+    })]
+  });
 }
 
-var REQUIRED_FIELD_SYMBOL = "*";
+var REQUIRED_FIELD_SYMBOL = '*';
 /** The `TitleField` is the template to use to render the title of a field
  *
  * @param props - The `TitleFieldProps` for this component
@@ -2383,11 +2487,13 @@ function TitleField(props) {
   var id = props.id,
     title = props.title,
     required = props.required;
-  return /*#__PURE__*/React.createElement("legend", {
-    id: id
-  }, title, required && /*#__PURE__*/React.createElement("span", {
-    className: "required"
-  }, REQUIRED_FIELD_SYMBOL));
+  return jsxs("legend", {
+    id: id,
+    children: [title, required && jsx("span", {
+      className: 'required',
+      children: REQUIRED_FIELD_SYMBOL
+    })]
+  });
 }
 
 /** The `UnsupportedField` component is used to render a field in the schema is one that is not supported by
@@ -2411,9 +2517,16 @@ function UnsupportedField(props) {
     translateEnum = translateEnum === TranslatableString.UnsupportedField ? TranslatableString.UnsupportedFieldWithReason : TranslatableString.UnsupportedFieldWithIdAndReason;
     translateParams.push(reason);
   }
-  return /*#__PURE__*/React.createElement("div", {
-    className: "unsupported-field"
-  }, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement(Markdown, null, translateString(translateEnum, translateParams))), schema && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(schema, null, 2)));
+  return jsxs("div", {
+    className: 'unsupported-field',
+    children: [jsx("p", {
+      children: jsx(Markdown, {
+        children: translateString(translateEnum, translateParams)
+      })
+    }), schema && jsx("pre", {
+      children: JSON.stringify(schema, null, 2)
+    })]
+  });
 }
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
@@ -2442,46 +2555,53 @@ function WrapIfAdditionalTemplate(props) {
   var keyLabel = translateString(TranslatableString.KeyLabel, [label]);
   var additional = (ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       className: classNames,
-      style: style
-    }, children);
+      style: style,
+      children: children
+    });
   }
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     className: classNames,
-    style: style
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "row"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "col-xs-5 form-additional"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "form-group"
-  }, /*#__PURE__*/React.createElement(Label, {
-    label: keyLabel,
-    required: required,
-    id: id + "-key"
-  }), /*#__PURE__*/React.createElement("input", {
-    className: "form-control",
-    type: "text",
-    id: id + "-key",
-    onBlur: function onBlur(event) {
-      return onKeyChange(event.target.value);
-    },
-    defaultValue: label
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "form-additional form-group col-xs-5"
-  }, children), /*#__PURE__*/React.createElement("div", {
-    className: "col-xs-2"
-  }, /*#__PURE__*/React.createElement(RemoveButton, {
-    className: "array-item-remove btn-block",
-    style: {
-      border: "0"
-    },
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label),
-    uiSchema: uiSchema,
-    registry: registry
-  }))));
+    style: style,
+    children: jsxs("div", {
+      className: 'row',
+      children: [jsx("div", {
+        className: 'col-xs-5 form-additional',
+        children: jsxs("div", {
+          className: 'form-group',
+          children: [jsx(Label, {
+            label: keyLabel,
+            required: required,
+            id: id + "-key"
+          }), jsx("input", {
+            className: 'form-control',
+            type: 'text',
+            id: id + "-key",
+            onBlur: function onBlur(event) {
+              return onKeyChange(event.target.value);
+            },
+            defaultValue: label
+          })]
+        })
+      }), jsx("div", {
+        className: 'form-additional form-group col-xs-5',
+        children: children
+      }), jsx("div", {
+        className: 'col-xs-2',
+        children: jsx(RemoveButton, {
+          className: 'array-item-remove btn-block',
+          style: {
+            border: '0'
+          },
+          disabled: disabled || readonly,
+          onClick: onDropPropertyClick(label),
+          uiSchema: uiSchema,
+          registry: registry
+        })
+      })]
+    })
+  });
 }
 
 function templates() {
@@ -2530,29 +2650,29 @@ function dateElementProps(state, time, yearsRange) {
     minute = state.minute,
     second = state.second;
   var data = [{
-    type: "year",
+    type: 'year',
     range: yearsRange,
     value: year
   }, {
-    type: "month",
+    type: 'month',
     range: [1, 12],
     value: month
   }, {
-    type: "day",
+    type: 'day',
     range: [1, 31],
     value: day
   }];
   if (time) {
     data.push({
-      type: "hour",
+      type: 'hour',
       range: [0, 23],
       value: hour
     }, {
-      type: "minute",
+      type: 'minute',
       range: [0, 59],
       value: minute
     }, {
-      type: "second",
+      type: 'second',
       range: [0, 59],
       value: second
     });
@@ -2565,20 +2685,22 @@ function DateElement(_ref) {
     value = _ref.value,
     select = _ref.select,
     rootId = _ref.rootId,
+    name = _ref.name,
     disabled = _ref.disabled,
     readonly = _ref.readonly,
     autofocus = _ref.autofocus,
     registry = _ref.registry,
     onBlur = _ref.onBlur,
     onFocus = _ref.onFocus;
-  var id = rootId + "_" + type;
+  var id = rootId + '_' + type;
   var SelectWidget = registry.widgets.SelectWidget;
-  return /*#__PURE__*/React.createElement(SelectWidget, {
+  return jsx(SelectWidget, {
     schema: {
-      type: "integer"
+      type: 'integer'
     },
     id: id,
-    className: "form-control",
+    name: name,
+    className: 'form-control',
     options: {
       enumOptions: rangeOptions(range[0], range[1])
     },
@@ -2593,7 +2715,7 @@ function DateElement(_ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     registry: registry,
-    label: "",
+    label: '',
     "aria-describedby": ariaDescribedByIds(rootId)
   });
 }
@@ -2611,6 +2733,7 @@ function AltDateWidget(_ref2) {
     autofocus = _ref2$autofocus === void 0 ? false : _ref2$autofocus,
     options = _ref2.options,
     id = _ref2.id,
+    name = _ref2.name,
     registry = _ref2.registry,
     onBlur = _ref2.onBlur,
     onFocus = _ref2.onFocus,
@@ -2650,39 +2773,45 @@ function AltDateWidget(_ref2) {
     if (disabled || readonly) {
       return;
     }
-    setState(parseDateString("", time));
+    setState(parseDateString('', time));
     onChange(undefined);
   }, [disabled, readonly, time, onChange]);
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "list-inline"
-  }, dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
-    return /*#__PURE__*/React.createElement("li", {
-      className: "list-inline-item",
-      key: i
-    }, /*#__PURE__*/React.createElement(DateElement, _extends({
-      rootId: id,
-      select: handleChange
-    }, elemProps, {
-      disabled: disabled,
-      readonly: readonly,
-      registry: registry,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      autofocus: autofocus && i === 0
-    })));
-  }), (options.hideNowButton !== "undefined" ? !options.hideNowButton : true) && /*#__PURE__*/React.createElement("li", {
-    className: "list-inline-item"
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#",
-    className: "btn btn-info btn-now",
-    onClick: handleSetNow
-  }, translateString(TranslatableString.NowLabel))), (options.hideClearButton !== "undefined" ? !options.hideClearButton : true) && /*#__PURE__*/React.createElement("li", {
-    className: "list-inline-item"
-  }, /*#__PURE__*/React.createElement("a", {
-    href: "#",
-    className: "btn btn-warning btn-clear",
-    onClick: handleClear
-  }, translateString(TranslatableString.ClearLabel))));
+  return jsxs("ul", {
+    className: 'list-inline',
+    children: [dateElementProps(state, time, options.yearsRange).map(function (elemProps, i) {
+      return jsx("li", {
+        className: 'list-inline-item',
+        children: jsx(DateElement, _extends({
+          rootId: id,
+          name: name,
+          select: handleChange
+        }, elemProps, {
+          disabled: disabled,
+          readonly: readonly,
+          registry: registry,
+          onBlur: onBlur,
+          onFocus: onFocus,
+          autofocus: autofocus && i === 0
+        }))
+      }, i);
+    }), (options.hideNowButton !== 'undefined' ? !options.hideNowButton : true) && jsx("li", {
+      className: 'list-inline-item',
+      children: jsx("a", {
+        href: '#',
+        className: 'btn btn-info btn-now',
+        onClick: handleSetNow,
+        children: translateString(TranslatableString.NowLabel)
+      })
+    }), (options.hideClearButton !== 'undefined' ? !options.hideClearButton : true) && jsx("li", {
+      className: 'list-inline-item',
+      children: jsx("a", {
+        href: '#',
+        className: 'btn btn-warning btn-clear',
+        onClick: handleClear,
+        children: translateString(TranslatableString.ClearLabel)
+      })
+    })]
+  });
 }
 
 var _excluded$1 = ["time"];
@@ -2696,7 +2825,7 @@ function AltDateTimeWidget(_ref) {
     time = _ref$time === void 0 ? true : _ref$time,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   var AltDateWidget = props.registry.widgets.AltDateWidget;
-  return /*#__PURE__*/React.createElement(AltDateWidget, _extends({
+  return jsx(AltDateWidget, _extends({
     time: time
   }, props));
 }
@@ -2721,7 +2850,7 @@ function CheckboxWidget(_ref) {
     onFocus = _ref.onFocus,
     onChange = _ref.onChange,
     registry = _ref.registry;
-  var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, options);
+  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
   // Because an unchecked checkbox will cause html5 validation to fail, only add
   // the "required" attribute if the field value must be "true", due to the
   // "const" or "enum" keywords
@@ -2735,27 +2864,32 @@ function CheckboxWidget(_ref) {
   var handleFocus = useCallback(function (event) {
     return onFocus(id, event.target.checked);
   }, [onFocus, id]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "checkbox " + (disabled || readonly ? "disabled" : "")
-  }, schema.description && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
-    id: descriptionId(id),
-    description: schema.description,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement("input", {
-    type: "checkbox",
-    id: id,
-    name: id,
-    checked: typeof value === "undefined" ? false : value,
-    required: required,
-    disabled: disabled || readonly,
-    autoFocus: autofocus,
-    onChange: handleChange,
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    "aria-describedby": ariaDescribedByIds(id)
-  }), /*#__PURE__*/React.createElement("span", null, label)));
+  return jsxs("div", {
+    className: "checkbox " + (disabled || readonly ? 'disabled' : ''),
+    children: [schema.description && jsx(DescriptionFieldTemplate, {
+      id: descriptionId(id),
+      description: schema.description,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), jsxs("label", {
+      children: [jsx("input", {
+        type: 'checkbox',
+        id: id,
+        name: id,
+        checked: typeof value === 'undefined' ? false : value,
+        required: required,
+        disabled: disabled || readonly,
+        autoFocus: autofocus,
+        onChange: handleChange,
+        onBlur: handleBlur,
+        onFocus: handleFocus,
+        "aria-describedby": ariaDescribedByIds(id)
+      }), jsx("span", {
+        children: label
+      })]
+    })]
+  });
 }
 
 /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
@@ -2788,41 +2922,48 @@ function CheckboxesWidget(_ref) {
     var value = _ref3.target.value;
     return onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
   }, [onFocus, id]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "checkboxes",
-    id: id
-  }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-    var checked = enumOptionsIsSelected(option.value, checkboxesValues);
-    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    var disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
-    var handleChange = function handleChange(event) {
-      if (event.target.checked) {
-        onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
-      } else {
-        onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
-      }
-    };
-    var checkbox = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
-      type: "checkbox",
-      id: optionId(id, index),
-      name: id,
-      checked: checked,
-      value: String(index),
-      disabled: disabled || itemDisabled || readonly,
-      autoFocus: autofocus && index === 0,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      "aria-describedby": ariaDescribedByIds(id)
-    }), /*#__PURE__*/React.createElement("span", null, option.label));
-    return inline ? /*#__PURE__*/React.createElement("label", {
-      key: index,
-      className: "checkbox-inline " + disabledCls
-    }, checkbox) : /*#__PURE__*/React.createElement("div", {
-      key: index,
-      className: "checkbox " + disabledCls
-    }, /*#__PURE__*/React.createElement("label", null, checkbox));
-  }));
+  return jsx("div", {
+    className: 'checkboxes',
+    id: id,
+    children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+      var checked = enumOptionsIsSelected(option.value, checkboxesValues);
+      var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+      var disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
+      var handleChange = function handleChange(event) {
+        if (event.target.checked) {
+          onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+        } else {
+          onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
+        }
+      };
+      var checkbox = jsxs("span", {
+        children: [jsx("input", {
+          type: 'checkbox',
+          id: optionId(id, index),
+          name: id,
+          checked: checked,
+          value: String(index),
+          disabled: disabled || itemDisabled || readonly,
+          autoFocus: autofocus && index === 0,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          "aria-describedby": ariaDescribedByIds(id)
+        }), jsx("span", {
+          children: option.label
+        })]
+      });
+      return inline ? jsx("label", {
+        className: "checkbox-inline " + disabledCls,
+        children: checkbox
+      }, index) : jsx("div", {
+        className: "checkbox " + disabledCls,
+        children: jsx("label", {
+          children: checkbox
+        })
+      }, index);
+    })
+  });
 }
 
 /** The `ColorWidget` component uses the `BaseInputTemplate` changing the type to `color` and disables it when it is
@@ -2835,9 +2976,9 @@ function ColorWidget(props) {
     readonly = props.readonly,
     options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
-    type: "color"
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  return jsx(BaseInputTemplate, _extends({
+    type: 'color'
   }, props, {
     disabled: disabled || readonly
   }));
@@ -2852,12 +2993,12 @@ function DateWidget(props) {
   var onChange = props.onChange,
     options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
   var handleChange = useCallback(function (value) {
     return onChange(value || undefined);
   }, [onChange]);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
-    type: "date"
+  return jsx(BaseInputTemplate, _extends({
+    type: 'date'
   }, props, {
     onChange: handleChange
   }));
@@ -2873,9 +3014,9 @@ function DateTimeWidget(props) {
     value = props.value,
     options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
-    type: "datetime-local"
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  return jsx(BaseInputTemplate, _extends({
+    type: 'datetime-local'
   }, props, {
     value: utcToLocal(value),
     onChange: function onChange(value) {
@@ -2891,9 +3032,9 @@ function DateTimeWidget(props) {
 function EmailWidget(props) {
   var options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
-    type: "email"
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  return jsx(BaseInputTemplate, _extends({
+    type: 'email'
   }, props));
 }
 
@@ -2901,7 +3042,7 @@ 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) {
   var name = file.name,
@@ -2912,7 +3053,7 @@ function processFile(file) {
     reader.onerror = reject;
     reader.onload = function (event) {
       var _event$target;
-      if (typeof ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result) === "string") {
+      if (typeof ((_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.result) === 'string') {
         resolve({
           dataURL: addNameToDataURL(event.target.result, name),
           name: name,
@@ -2941,20 +3082,23 @@ function FilesInfo(_ref) {
     return null;
   }
   var translateString = registry.translateString;
-  return /*#__PURE__*/React.createElement("ul", {
-    className: "file-info"
-  }, filesInfo.map(function (fileInfo, key) {
-    var name = fileInfo.name,
-      size = fileInfo.size,
-      type = fileInfo.type;
-    return /*#__PURE__*/React.createElement("li", {
-      key: key
-    }, /*#__PURE__*/React.createElement(Markdown, null, translateString(TranslatableString.FilesInfo, [name, type, String(size)])));
-  }));
+  return jsx("ul", {
+    className: 'file-info',
+    children: filesInfo.map(function (fileInfo, key) {
+      var name = fileInfo.name,
+        size = fileInfo.size,
+        type = fileInfo.type;
+      return jsx("li", {
+        children: jsx(Markdown, {
+          children: translateString(TranslatableString.FilesInfo, [name, type, String(size)])
+        })
+      }, key);
+    })
+  });
 }
 function extractFileInfo(dataURLs) {
   return dataURLs.filter(function (dataURL) {
-    return typeof dataURL !== "undefined";
+    return dataURL;
   }).map(function (dataURL) {
     var _dataURItoBlob = dataURItoBlob(dataURL),
       blob = _dataURItoBlob.blob,
@@ -2970,17 +3114,15 @@ 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) {
-  var multiple = _ref2.multiple,
-    id = _ref2.id,
-    readonly = _ref2.readonly,
-    disabled = _ref2.disabled,
-    onChange = _ref2.onChange,
-    value = _ref2.value,
-    _ref2$autofocus = _ref2.autofocus,
-    autofocus = _ref2$autofocus === void 0 ? false : _ref2$autofocus,
-    options = _ref2.options,
-    registry = _ref2.registry;
+function FileWidget(props) {
+  var disabled = props.disabled,
+    readonly = props.readonly,
+    multiple = props.multiple,
+    onChange = props.onChange,
+    value = props.value,
+    options = props.options,
+    registry = props.registry;
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
   var extractedFilesInfo = useMemo(function () {
     return Array.isArray(value) ? extractFileInfo(value) : extractFileInfo([value]);
   }, [value]);
@@ -3003,21 +3145,18 @@ function FileWidget(_ref2) {
       }
     });
   }, [multiple, onChange]);
-  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, /*#__PURE__*/React.createElement("input", {
-    id: id,
-    name: id,
-    type: "file",
-    disabled: readonly || disabled,
-    onChange: handleChange,
-    defaultValue: "",
-    autoFocus: autofocus,
-    multiple: multiple,
-    accept: options.accept ? String(options.accept) : undefined,
-    "aria-describedby": ariaDescribedByIds(id)
-  })), /*#__PURE__*/React.createElement(FilesInfo, {
-    filesInfo: filesInfo,
-    registry: registry
-  }));
+  return jsxs("div", {
+    children: [jsx(BaseInputTemplate, _extends({}, props, {
+      disabled: disabled || readonly,
+      type: 'file',
+      onChangeOverride: handleChange,
+      value: '',
+      accept: options.accept ? String(options.accept) : undefined
+    })), jsx(FilesInfo, {
+      filesInfo: filesInfo,
+      registry: registry
+    })]
+  });
 }
 
 /** The `HiddenWidget` is a widget for rendering a hidden input field.
@@ -3028,11 +3167,11 @@ function FileWidget(_ref2) {
 function HiddenWidget(_ref) {
   var id = _ref.id,
     value = _ref.value;
-  return /*#__PURE__*/React.createElement("input", {
-    type: "hidden",
+  return jsx("input", {
+    type: 'hidden',
     id: id,
     name: id,
-    value: typeof value === "undefined" ? "" : value
+    value: typeof value === 'undefined' ? '' : value
   });
 }
 
@@ -3043,9 +3182,9 @@ function HiddenWidget(_ref) {
 function PasswordWidget(props) {
   var options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
-    type: "password"
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  return jsx(BaseInputTemplate, _extends({
+    type: 'password'
   }, props));
 }
 
@@ -3080,38 +3219,45 @@ function RadioWidget(_ref) {
     var value = _ref3.target.value;
     return onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
   }, [onFocus, id]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field-radio-group",
-    id: id
-  }, Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
-    var checked = enumOptionsIsSelected(option.value, value);
-    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    var disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
-    var handleChange = function handleChange() {
-      return onChange(option.value);
-    };
-    var radio = /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("input", {
-      type: "radio",
-      id: optionId(id, i),
-      checked: checked,
-      name: name,
-      required: required,
-      value: String(i),
-      disabled: disabled || itemDisabled || readonly,
-      autoFocus: autofocus && i === 0,
-      onChange: handleChange,
-      onBlur: handleBlur,
-      onFocus: handleFocus,
-      "aria-describedby": ariaDescribedByIds(id)
-    }), /*#__PURE__*/React.createElement("span", null, option.label));
-    return inline ? /*#__PURE__*/React.createElement("label", {
-      key: i,
-      className: "radio-inline " + disabledCls
-    }, radio) : /*#__PURE__*/React.createElement("div", {
-      key: i,
-      className: "radio " + disabledCls
-    }, /*#__PURE__*/React.createElement("label", null, radio));
-  }));
+  return jsx("div", {
+    className: 'field-radio-group',
+    id: id,
+    children: Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
+      var checked = enumOptionsIsSelected(option.value, value);
+      var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+      var disabledCls = disabled || itemDisabled || readonly ? 'disabled' : '';
+      var handleChange = function handleChange() {
+        return onChange(option.value);
+      };
+      var radio = jsxs("span", {
+        children: [jsx("input", {
+          type: 'radio',
+          id: optionId(id, i),
+          checked: checked,
+          name: name,
+          required: required,
+          value: String(i),
+          disabled: disabled || itemDisabled || readonly,
+          autoFocus: autofocus && i === 0,
+          onChange: handleChange,
+          onBlur: handleBlur,
+          onFocus: handleFocus,
+          "aria-describedby": ariaDescribedByIds(id)
+        }), jsx("span", {
+          children: option.label
+        })]
+      });
+      return inline ? jsx("label", {
+        className: "radio-inline " + disabledCls,
+        children: radio
+      }, i) : jsx("div", {
+        className: "radio " + disabledCls,
+        children: jsx("label", {
+          children: radio
+        })
+      }, i);
+    })
+  });
 }
 
 /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
@@ -3122,13 +3268,15 @@ function RadioWidget(_ref) {
 function RangeWidget(props) {
   var value = props.value,
     BaseInputTemplate = props.registry.templates.BaseInputTemplate;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "field-range-wrapper"
-  }, /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
-    type: "range"
-  }, props)), /*#__PURE__*/React.createElement("span", {
-    className: "range-view"
-  }, value));
+  return jsxs("div", {
+    className: 'field-range-wrapper',
+    children: [jsx(BaseInputTemplate, _extends({
+      type: 'range'
+    }, props)), jsx("span", {
+      className: 'range-view',
+      children: value
+    })]
+  });
 }
 
 function getValue(event, multiple) {
@@ -3165,7 +3313,7 @@ function SelectWidget(_ref) {
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     optEmptyVal = options.emptyValue;
-  var emptyValue = multiple ? [] : "";
+  var emptyValue = multiple ? [] : '';
   var handleFocus = useCallback(function (event) {
     var newValue = getValue(event, multiple);
     return onFocus(id, enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
@@ -3179,31 +3327,33 @@ function SelectWidget(_ref) {
     return onChange(enumOptionsValueForIndex(newValue, enumOptions, optEmptyVal));
   }, [onChange, schema, multiple, options]);
   var selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
-  return /*#__PURE__*/React.createElement("select", {
+  return jsxs("select", {
     id: id,
     name: id,
     multiple: multiple,
-    className: "form-control",
-    value: typeof selectedIndexes === "undefined" ? emptyValue : selectedIndexes,
+    className: 'form-control',
+    value: typeof selectedIndexes === 'undefined' ? emptyValue : selectedIndexes,
     required: required,
     disabled: disabled || readonly,
     autoFocus: autofocus,
     onBlur: handleBlur,
     onFocus: handleFocus,
     onChange: handleChange,
-    "aria-describedby": ariaDescribedByIds(id)
-  }, !multiple && schema["default"] === undefined && /*#__PURE__*/React.createElement("option", {
-    value: ""
-  }, placeholder), Array.isArray(enumOptions) && enumOptions.map(function (_ref2, i) {
-    var value = _ref2.value,
-      label = _ref2.label;
-    var disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
-    return /*#__PURE__*/React.createElement("option", {
-      key: i,
-      value: String(i),
-      disabled: disabled
-    }, label);
-  }));
+    "aria-describedby": ariaDescribedByIds(id),
+    children: [!multiple && schema["default"] === undefined && jsx("option", {
+      value: '',
+      children: placeholder
+    }), Array.isArray(enumOptions) && enumOptions.map(function (_ref2, i) {
+      var value = _ref2.value,
+        label = _ref2.label;
+      var disabled = enumDisabled && enumDisabled.indexOf(value) !== -1;
+      return jsx("option", {
+        value: String(i),
+        disabled: disabled,
+        children: label
+      }, i);
+    })]
+  });
 }
 
 /** The `TextareaWidget` is a widget for rendering input fields as textarea.
@@ -3226,7 +3376,7 @@ function TextareaWidget(_ref) {
     onFocus = _ref.onFocus;
   var handleChange = useCallback(function (_ref2) {
     var value = _ref2.target.value;
-    return onChange(value === "" ? options.emptyValue : value);
+    return onChange(value === '' ? options.emptyValue : value);
   }, [onChange, options.emptyValue]);
   var handleBlur = useCallback(function (_ref3) {
     var value = _ref3.target.value;
@@ -3236,11 +3386,11 @@ function TextareaWidget(_ref) {
     var value = _ref4.target.value;
     return onFocus(id, value);
   }, [id, onFocus]);
-  return /*#__PURE__*/React.createElement("textarea", {
+  return jsx("textarea", {
     id: id,
     name: id,
-    className: "form-control",
-    value: value ? value : "",
+    className: 'form-control',
+    value: value ? value : '',
     placeholder: placeholder,
     required: required,
     disabled: disabled,
@@ -3265,8 +3415,28 @@ TextareaWidget.defaultProps = {
 function TextWidget(props) {
   var options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({}, props));
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  return jsx(BaseInputTemplate, _extends({}, props));
+}
+
+/** The `TimeWidget` component uses the `BaseInputTemplate` changing the type to `time` and transforms
+ * the value to undefined when it is falsy during the `onChange` handling.
+ *
+ * @param props - The `WidgetProps` for this component
+ */
+function TimeWidget(props) {
+  var onChange = props.onChange,
+    options = props.options,
+    registry = props.registry;
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  var handleChange = useCallback(function (value) {
+    return onChange(value ? value + ":00" : undefined);
+  }, [onChange]);
+  return jsx(BaseInputTemplate, _extends({
+    type: 'time'
+  }, props, {
+    onChange: handleChange
+  }));
 }
 
 /** The `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
@@ -3276,9 +3446,9 @@ function TextWidget(props) {
 function URLWidget(props) {
   var options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
-    type: "url"
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  return jsx(BaseInputTemplate, _extends({
+    type: 'url'
   }, props));
 }
 
@@ -3289,32 +3459,33 @@ function URLWidget(props) {
 function UpDownWidget(props) {
   var options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React.createElement(BaseInputTemplate, _extends({
-    type: "number"
+  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  return jsx(BaseInputTemplate, _extends({
+    type: 'number'
   }, props));
 }
 
 function widgets() {
   return {
+    AltDateWidget: AltDateWidget,
+    AltDateTimeWidget: AltDateTimeWidget,
+    CheckboxWidget: CheckboxWidget,
+    CheckboxesWidget: CheckboxesWidget,
+    ColorWidget: ColorWidget,
+    DateWidget: DateWidget,
+    DateTimeWidget: DateTimeWidget,
+    EmailWidget: EmailWidget,
+    FileWidget: FileWidget,
+    HiddenWidget: HiddenWidget,
     PasswordWidget: PasswordWidget,
     RadioWidget: RadioWidget,
-    UpDownWidget: UpDownWidget,
     RangeWidget: RangeWidget,
     SelectWidget: SelectWidget,
     TextWidget: TextWidget,
-    DateWidget: DateWidget,
-    DateTimeWidget: DateTimeWidget,
-    AltDateWidget: AltDateWidget,
-    AltDateTimeWidget: AltDateTimeWidget,
-    EmailWidget: EmailWidget,
-    URLWidget: URLWidget,
     TextareaWidget: TextareaWidget,
-    HiddenWidget: HiddenWidget,
-    ColorWidget: ColorWidget,
-    FileWidget: FileWidget,
-    CheckboxWidget: CheckboxWidget,
-    CheckboxesWidget: CheckboxesWidget
+    TimeWidget: TimeWidget,
+    UpDownWidget: UpDownWidget,
+    URLWidget: URLWidget
   };
 }
 
@@ -3352,7 +3523,7 @@ var Form = /*#__PURE__*/function (_Component) {
     _this.formElement = void 0;
     _this.getUsedFormData = function (formData, fields) {
       // For the case of a single input form
-      if (fields.length === 0 && typeof formData !== "object") {
+      if (fields.length === 0 && typeof formData !== 'object') {
         return formData;
       }
       // _pick has incorrect type definition, it works with string[][], because lodash/hasIn supports it
@@ -3373,22 +3544,22 @@ var Form = /*#__PURE__*/function (_Component) {
           paths = [[]];
         }
         Object.keys(_obj).forEach(function (key) {
-          if (typeof _obj[key] === "object") {
+          if (typeof _obj[key] === 'object') {
             var newPaths = paths.map(function (path) {
               return [].concat(path, [key]);
             });
             // If an object is marked with additionalProperties, all its keys are valid
-            if (_obj[key][RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== "") {
+            if (_obj[key][RJSF_ADDITONAL_PROPERTIES_FLAG] && _obj[key][NAME_KEY] !== '') {
               acc.push(_obj[key][NAME_KEY]);
             } else {
               getAllPaths(_obj[key], acc, newPaths);
             }
-          } else if (key === NAME_KEY && _obj[key] !== "") {
+          } else if (key === NAME_KEY && _obj[key] !== '') {
             paths.forEach(function (path) {
               var formValue = get(formData, path);
               // adds path to fieldNames if it points to a value
               // or an empty object/array
-              if (typeof formValue !== "object" || isEmpty(formValue)) {
+              if (typeof formValue !== 'object' || isEmpty(formValue)) {
                 acc.push(path);
               }
             });
@@ -3421,7 +3592,7 @@ var Form = /*#__PURE__*/function (_Component) {
       var newFormData = formData;
       if (omitExtraData === true && liveOmit === true) {
         var retrievedSchema = schemaUtils.retrieveSchema(schema, formData);
-        var pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", formData);
+        var pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', formData);
         var fieldNames = _this.getFieldNames(pathSchema, formData);
         newFormData = _this.getUsedFormData(formData, fieldNames);
         state = {
@@ -3447,7 +3618,7 @@ var Form = /*#__PURE__*/function (_Component) {
           schemaValidationErrorSchema: schemaValidationErrorSchema
         };
       } else if (!noValidate && newErrorSchema) {
-        var _errorSchema = extraErrors ? mergeObjects(newErrorSchema, extraErrors, "preventDuplicates") : newErrorSchema;
+        var _errorSchema = extraErrors ? mergeObjects(newErrorSchema, extraErrors, 'preventDuplicates') : newErrorSchema;
         state = {
           formData: newFormData,
           errorSchema: _errorSchema,
@@ -3458,6 +3629,21 @@ var Form = /*#__PURE__*/function (_Component) {
         return onChange && onChange(_extends({}, _this.state, state), id);
       });
     };
+    _this.reset = function () {
+      var onChange = _this.props.onChange;
+      var newState = _this.getStateFromProps(_this.props, undefined);
+      var newFormData = newState.formData;
+      var state = {
+        formData: newFormData,
+        errorSchema: {},
+        errors: [],
+        schemaValidationErrors: [],
+        schemaValidationErrorSchema: {}
+      };
+      _this.setState(state, function () {
+        return onChange && onChange(_extends({}, _this.state, state));
+      });
+    };
     _this.onBlur = function (id, data) {
       var onBlur = _this.props.onBlur;
       if (onBlur) {
@@ -3487,7 +3673,7 @@ var Form = /*#__PURE__*/function (_Component) {
         schemaUtils = _this$state2.schemaUtils;
       if (omitExtraData === true) {
         var retrievedSchema = schemaUtils.retrieveSchema(schema, newFormData);
-        var pathSchema = schemaUtils.toPathSchema(retrievedSchema, "", newFormData);
+        var pathSchema = schemaUtils.toPathSchema(retrievedSchema, '', newFormData);
         var fieldNames = _this.getFieldNames(pathSchema, newFormData);
         newFormData = _this.getUsedFormData(newFormData, fieldNames);
       }
@@ -3506,20 +3692,20 @@ var Form = /*#__PURE__*/function (_Component) {
           if (onSubmit) {
             onSubmit(_extends({}, _this.state, {
               formData: newFormData,
-              status: "submitted"
+              status: 'submitted'
             }), event);
           }
         });
       }
     };
     if (!props.validator) {
-      throw new Error("A validator is required for Form functionality to work");
+      throw new Error('A validator is required for Form functionality to work');
     }
     _this.state = _this.getStateFromProps(props, props.formData);
     if (_this.props.onChange && !deepEquals(_this.state.formData, _this.props.formData)) {
       _this.props.onChange(_this.state);
     }
-    _this.formElement = /*#__PURE__*/React.createRef();
+    _this.formElement = /*#__PURE__*/createRef();
     return _this;
   }
   /** React lifecycle method that gets called before new props are provided, updates the state based on new props. It
@@ -3546,10 +3732,10 @@ var Form = /*#__PURE__*/function (_Component) {
    */;
   _proto.getStateFromProps = function getStateFromProps(props, inputFormData) {
     var state = this.state || {};
-    var schema = "schema" in props ? props.schema : this.props.schema;
-    var uiSchema = ("uiSchema" in props ? props.uiSchema : this.props.uiSchema) || {};
-    var edit = typeof inputFormData !== "undefined";
-    var liveValidate = "liveValidate" in props ? props.liveValidate : this.props.liveValidate;
+    var schema = 'schema' in props ? props.schema : this.props.schema;
+    var uiSchema = ('uiSchema' in props ? props.uiSchema : this.props.uiSchema) || {};
+    var edit = typeof inputFormData !== 'undefined';
+    var liveValidate = 'liveValidate' in props ? props.liveValidate : this.props.liveValidate;
     var mustValidate = edit && !props.noValidate && liveValidate;
     var rootSchema = schema;
     var schemaUtils = state.schemaUtils;
@@ -3598,7 +3784,7 @@ var Form = /*#__PURE__*/function (_Component) {
       errorSchema = merged.errorSchema;
       errors = merged.errors;
     }
-    var idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema["ui:rootFieldId"], formData, props.idPrefix, props.idSeparator);
+    var idSchema = schemaUtils.toIdSchema(retrievedSchema, uiSchema['ui:rootFieldId'], formData, props.idPrefix, props.idSeparator);
     var nextState = {
       schemaUtils: schemaUtils,
       schema: schema,
@@ -3650,9 +3836,9 @@ var Form = /*#__PURE__*/function (_Component) {
       uiSchema = _this$state3.uiSchema;
     var formContext = this.props.formContext;
     var options = getUiOptions(uiSchema);
-    var ErrorListTemplate = getTemplate("ErrorListTemplate", registry, options);
+    var ErrorListTemplate = getTemplate('ErrorListTemplate', registry, options);
     if (errors && errors.length) {
-      return /*#__PURE__*/React.createElement(ErrorListTemplate, {
+      return jsx(ErrorListTemplate, {
         errors: errors,
         errorSchema: errorSchema || {},
         schema: schema,
@@ -3671,7 +3857,10 @@ var Form = /*#__PURE__*/function (_Component) {
   /** Returns the registry for the form */
   _proto.getRegistry = function getRegistry() {
     var _this$props$templates;
-    var customTranslateString = this.props.translateString;
+    var _this$props4 = this.props,
+      customTranslateString = _this$props4.translateString,
+      _this$props4$uiSchema = _this$props4.uiSchema,
+      uiSchema = _this$props4$uiSchema === void 0 ? {} : _this$props4$uiSchema;
     var schemaUtils = this.state.schemaUtils;
     var _getDefaultRegistry = getDefaultRegistry(),
       fields = _getDefaultRegistry.fields,
@@ -3688,13 +3877,14 @@ var Form = /*#__PURE__*/function (_Component) {
       rootSchema: this.props.schema,
       formContext: this.props.formContext || formContext,
       schemaUtils: schemaUtils,
-      translateString: customTranslateString || translateString
+      translateString: customTranslateString || translateString,
+      globalUiOptions: uiSchema[UI_GLOBAL_OPTIONS_KEY]
     };
   }
   /** Provides a function that can be used to programmatically submit the `Form` */;
   _proto.submit = function submit() {
     if (this.formElement.current) {
-      this.formElement.current.dispatchEvent(new CustomEvent("submit", {
+      this.formElement.current.dispatchEvent(new CustomEvent('submit', {
         cancelable: true
       }));
       this.formElement.current.requestSubmit();
@@ -3707,14 +3897,14 @@ var Form = /*#__PURE__*/function (_Component) {
    * @param error - The error on which to focus
    */;
   _proto.focusOnError = function focusOnError(error) {
-    var _this$props4 = this.props,
-      _this$props4$idPrefix = _this$props4.idPrefix,
-      idPrefix = _this$props4$idPrefix === void 0 ? "root" : _this$props4$idPrefix,
-      _this$props4$idSepara = _this$props4.idSeparator,
-      idSeparator = _this$props4$idSepara === void 0 ? "_" : _this$props4$idSepara;
+    var _this$props5 = this.props,
+      _this$props5$idPrefix = _this$props5.idPrefix,
+      idPrefix = _this$props5$idPrefix === void 0 ? 'root' : _this$props5$idPrefix,
+      _this$props5$idSepara = _this$props5.idSeparator,
+      idSeparator = _this$props5$idSepara === void 0 ? '_' : _this$props5$idSepara;
     var property = error.property;
     var path = _toPath(property);
-    if (path[0] === "") {
+    if (path[0] === '') {
       // Most of the time the `.foo` property results in the first element being empty, so replace it with the idPrefix
       path[0] = idPrefix;
     } else {
@@ -3737,10 +3927,10 @@ var Form = /*#__PURE__*/function (_Component) {
    * @returns - True if the form is valid, false otherwise.
    */;
   _proto.validateForm = function validateForm() {
-    var _this$props5 = this.props,
-      extraErrors = _this$props5.extraErrors,
-      focusOnFirstError = _this$props5.focusOnFirstError,
-      onError = _this$props5.onError;
+    var _this$props6 = this.props,
+      extraErrors = _this$props6.extraErrors,
+      focusOnFirstError = _this$props6.focusOnFirstError,
+      onError = _this$props6.onError;
     var formData = this.state.formData;
     var schemaUtils = this.state.schemaUtils;
     var schemaValidation = this.validate(formData);
@@ -3766,7 +3956,7 @@ var Form = /*#__PURE__*/function (_Component) {
         if (onError) {
           onError(errors);
         } else {
-          console.error("Form validation failed", errors);
+          console.error('Form validation failed', errors);
         }
       });
       return false;
@@ -3777,31 +3967,31 @@ var Form = /*#__PURE__*/function (_Component) {
    * needed along with the submit button or any children of the form.
    */;
   _proto.render = function render() {
-    var _this$props6 = this.props,
-      children = _this$props6.children,
-      id = _this$props6.id,
-      idPrefix = _this$props6.idPrefix,
-      idSeparator = _this$props6.idSeparator,
-      _this$props6$classNam = _this$props6.className,
-      className = _this$props6$classNam === void 0 ? "" : _this$props6$classNam,
-      tagName = _this$props6.tagName,
-      name = _this$props6.name,
-      method = _this$props6.method,
-      target = _this$props6.target,
-      action = _this$props6.action,
-      autoComplete = _this$props6.autoComplete,
-      enctype = _this$props6.enctype,
-      acceptcharset = _this$props6.acceptcharset,
-      _this$props6$noHtml5V = _this$props6.noHtml5Validate,
-      noHtml5Validate = _this$props6$noHtml5V === void 0 ? false : _this$props6$noHtml5V,
-      _this$props6$disabled = _this$props6.disabled,
-      disabled = _this$props6$disabled === void 0 ? false : _this$props6$disabled,
-      _this$props6$readonly = _this$props6.readonly,
-      readonly = _this$props6$readonly === void 0 ? false : _this$props6$readonly,
-      formContext = _this$props6.formContext,
-      _this$props6$showErro = _this$props6.showErrorList,
-      showErrorList = _this$props6$showErro === void 0 ? "top" : _this$props6$showErro,
-      _internalFormWrapper = _this$props6._internalFormWrapper;
+    var _this$props7 = this.props,
+      children = _this$props7.children,
+      id = _this$props7.id,
+      idPrefix = _this$props7.idPrefix,
+      idSeparator = _this$props7.idSeparator,
+      _this$props7$classNam = _this$props7.className,
+      className = _this$props7$classNam === void 0 ? '' : _this$props7$classNam,
+      tagName = _this$props7.tagName,
+      name = _this$props7.name,
+      method = _this$props7.method,
+      target = _this$props7.target,
+      action = _this$props7.action,
+      autoComplete = _this$props7.autoComplete,
+      enctype = _this$props7.enctype,
+      acceptcharset = _this$props7.acceptcharset,
+      _this$props7$noHtml5V = _this$props7.noHtml5Validate,
+      noHtml5Validate = _this$props7$noHtml5V === void 0 ? false : _this$props7$noHtml5V,
+      _this$props7$disabled = _this$props7.disabled,
+      disabled = _this$props7$disabled === void 0 ? false : _this$props7$disabled,
+      _this$props7$readonly = _this$props7.readonly,
+      readonly = _this$props7$readonly === void 0 ? false : _this$props7$readonly,
+      formContext = _this$props7.formContext,
+      _this$props7$showErro = _this$props7.showErrorList,
+      showErrorList = _this$props7$showErro === void 0 ? 'top' : _this$props7$showErro,
+      _internalFormWrapper = _this$props7._internalFormWrapper;
     var _this$state4 = this.state,
       schema = _this$state4.schema,
       uiSchema = _this$state4.uiSchema,
@@ -3815,9 +4005,9 @@ var Form = /*#__PURE__*/function (_Component) {
     // 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
     var as = _internalFormWrapper ? tagName : undefined;
-    var FormTag = _internalFormWrapper || tagName || "form";
-    return /*#__PURE__*/React.createElement(FormTag, {
-      className: className ? className : "rjsf",
+    var FormTag = _internalFormWrapper || tagName || 'form';
+    return jsxs(FormTag, {
+      className: className ? className : 'rjsf',
       id: id,
       name: name,
       method: method,
@@ -3829,27 +4019,28 @@ var Form = /*#__PURE__*/function (_Component) {
       noValidate: noHtml5Validate,
       onSubmit: this.onSubmit,
       as: as,
-      ref: this.formElement
-    }, showErrorList === "top" && this.renderErrors(registry), /*#__PURE__*/React.createElement(_SchemaField, {
-      name: "",
-      schema: schema,
-      uiSchema: uiSchema,
-      errorSchema: errorSchema,
-      idSchema: idSchema,
-      idPrefix: idPrefix,
-      idSeparator: idSeparator,
-      formContext: formContext,
-      formData: formData,
-      onChange: this.onChange,
-      onBlur: this.onBlur,
-      onFocus: this.onFocus,
-      registry: registry,
-      disabled: disabled,
-      readonly: readonly
-    }), children ? children : /*#__PURE__*/React.createElement(SubmitButton, {
-      uiSchema: uiSchema,
-      registry: registry
-    }), showErrorList === "bottom" && this.renderErrors(registry));
+      ref: this.formElement,
+      children: [showErrorList === 'top' && this.renderErrors(registry), jsx(_SchemaField, {
+        name: '',
+        schema: schema,
+        uiSchema: uiSchema,
+        errorSchema: errorSchema,
+        idSchema: idSchema,
+        idPrefix: idPrefix,
+        idSeparator: idSeparator,
+        formContext: formContext,
+        formData: formData,
+        onChange: this.onChange,
+        onBlur: this.onBlur,
+        onFocus: this.onFocus,
+        registry: registry,
+        disabled: disabled,
+        readonly: readonly
+      }), children ? children : jsx(SubmitButton, {
+        uiSchema: uiSchema,
+        registry: registry
+      }), showErrorList === 'bottom' && this.renderErrors(registry)]
+    });
   };
   return Form;
 }(Component);
@@ -3868,7 +4059,7 @@ function withTheme(themeProps) {
     templates = _extends({}, themeProps === null || themeProps === void 0 ? void 0 : themeProps.templates, templates, {
       ButtonTemplates: _extends({}, themeProps === null || themeProps === void 0 ? void 0 : (_themeProps$templates = themeProps.templates) === null || _themeProps$templates === void 0 ? void 0 : _themeProps$templates.ButtonTemplates, (_templates = templates) === null || _templates === void 0 ? void 0 : _templates.ButtonTemplates)
     });
-    return /*#__PURE__*/React.createElement(Form, _extends({}, themeProps, directProps, {
+    return jsx(Form, _extends({}, themeProps, directProps, {
       fields: fields,
       widgets: widgets,
       templates: templates,