@rjsf/core 5.1.0 → 5.2.1

package/dist/core.esm.js

@@ -1,5 +1,6 @@
-import React, { Component, useState, useCallback, useEffect, useReducer, useMemo, forwardRef } from 'react';
-import { isFixedItems, allowAdditionalItems, getUiOptions, ITEMS_KEY, getTemplate, 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, 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, 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';
@@ -10,6 +11,7 @@ import { nanoid } from 'nanoid';
 import omit from 'lodash-es/omit';
 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++) {
@@ -189,7 +191,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           onChange = _this$props3.onChange,
           errorSchema = _this$props3.errorSchema;
         var newErrorSchema;
-        if (_this.props.errorSchema) {
+        if (errorSchema) {
           newErrorSchema = {};
           for (var idx in errorSchema) {
             var i = parseInt(idx);
@@ -230,7 +232,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);
@@ -290,10 +292,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
@@ -366,14 +368,15 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       uiSchema = _this$props7.uiSchema,
       idSchema = _this$props7.idSchema,
       registry = _this$props7.registry;
-    var schemaUtils = registry.schemaUtils;
+    var schemaUtils = registry.schemaUtils,
+      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: "Missing items definition",
+        reason: translateString(TranslatableString.MissingItems),
         registry: registry
       });
     }
@@ -416,7 +419,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;
@@ -471,8 +474,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`
    */;
@@ -505,8 +508,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,
@@ -558,11 +562,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,
@@ -611,12 +616,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,
@@ -632,7 +638,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       formContext: formContext,
       autofocus: autofocus,
       rawErrors: rawErrors,
-      label: ""
+      label: ''
     });
   }
   /** Renders an array that has a maximum limit of items
@@ -648,7 +654,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,
@@ -684,7 +690,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,
@@ -729,8 +735,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`.
@@ -786,7 +792,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       return has[key];
     });
     return {
-      children: /*#__PURE__*/React.createElement(ItemSchemaField, {
+      children: jsx(ItemSchemaField, {
         name: name,
         index: index,
         schema: itemSchema,
@@ -808,7 +814,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
         autofocus: autofocus,
         rawErrors: rawErrors
       }),
-      className: "array-item",
+      className: 'array-item',
       disabled: disabled,
       canAdd: canAdd,
       hasToolbar: has.toolbar,
@@ -830,8 +836,11 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   _createClass(ArrayField, [{
     key: "itemTitle",
     get: function get$1() {
-      var schema = this.props.schema;
-      return get(schema, [ITEMS_KEY, "title"], get(schema, [ITEMS_KEY, "description"], "Item"));
+      var _this$props14 = this.props,
+        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 ArrayField;
@@ -860,19 +869,22 @@ function BooleanField(props) {
     rawErrors = props.rawErrors;
   var title = schema.title;
   var widgets = registry.widgets,
-    formContext = registry.formContext;
+    formContext = registry.formContext,
+    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);
+  var no = translateString(TranslatableString.NoLabel);
   var enumOptions;
   if (Array.isArray(schema.oneOf)) {
     enumOptions = optionsList({
       oneOf: schema.oneOf.map(function (option) {
         if (isObject(option)) {
           return _extends({}, option, {
-            title: option.title || (option["const"] === true ? "Yes" : "No")
+            title: option.title || (option["const"] === true ? yes : no)
           });
         }
         return undefined;
@@ -886,14 +898,14 @@ 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],
-        label: enums[0] ? "Yes" : "No"
+        label: enums[0] ? yes : no
       }, {
         value: enums[1],
-        label: enums[1] ? "Yes" : "No"
+        label: enums[1] ? yes : no
       }];
     } else {
       enumOptions = optionsList({
@@ -903,13 +915,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,
@@ -926,9 +939,6 @@ function BooleanField(props) {
 }
 
 var _excluded$7 = ["widget", "placeholder", "autofocus", "autocomplete", "title"];
-/** The prefix used when a oneOf option does not have a title
- */
-var UNKNOWN_OPTION_PREFIX = "Option";
 /** The `AnyOfField` component is used to render a field in the schema that is an `anyOf`, `allOf` or `oneOf`. It tracks
  * the currently selected option and cleans up any irrelevant data in `formData`.
  *
@@ -962,7 +972,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({
@@ -1049,12 +1059,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,
@@ -1067,14 +1078,15 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       schema = _this$props5.schema,
       uiSchema = _this$props5.uiSchema;
     var widgets = registry.widgets,
-      fields = registry.fields;
+      fields = registry.fields,
+      translateString = registry.translateString;
     var _SchemaField = fields.SchemaField;
     var _this$state2 = this.state,
       selectedOption = _this$state2.selectedOption,
       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,
@@ -1082,7 +1094,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]);
@@ -1095,43 +1107,47 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
         type: baseType
       });
     }
-    var optionLabel = title ? title + " " + UNKNOWN_OPTION_PREFIX.toLowerCase() : UNKNOWN_OPTION_PREFIX;
+    var translateEnum = title ? TranslatableString.TitleOptionPrefix : TranslatableString.OptionPrefix;
+    var translateParams = title ? [title] : [];
     var enumOptions = retrievedOptions.map(function (opt, index) {
       return {
-        label: opt.title || optionLabel + " " + (index + 1),
+        label: opt.title || translateString(translateEnum, translateParams.concat(String(index + 1))),
         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);
@@ -1182,27 +1198,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
   }));
@@ -1243,7 +1259,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);
@@ -1264,7 +1280,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
       var uiSchema = _this.props.uiSchema;
       var _getUiOptions = getUiOptions(uiSchema),
         _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)) {
@@ -1319,10 +1335,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);
@@ -1353,22 +1369,22 @@ var ObjectField = /*#__PURE__*/function (_Component) {
    * @param type - The type of the new additional schema property
    */
   _proto.getDefaultValue = function getDefaultValue(type) {
+    var translateString = this.props.registry.translateString;
     switch (type) {
-      case "string":
-        return "New Value";
-      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':
       default:
         // We don't have a datatype for some reason (perhaps additionalProperties was true)
-        return "New Value";
+        return translateString(TranslatableString.NewStringDefault);
     }
   }
   /** Handles the adding of a new additional property on the given `schema`. Calls the `onChange` callback once the new
@@ -1415,25 +1431,31 @@ var ObjectField = /*#__PURE__*/function (_Component) {
       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: [jsxs("p", {
+          className: 'config-error',
+          style: {
+            color: 'red'
+          },
+          children: ["Invalid ", name || 'root', " object field configuration:", jsx("em", {
+            children: 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,
       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], {}),
@@ -1454,7 +1476,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
             readonly: readonly,
             hideError: hideError,
             onDropPropertyClick: _this2.onDropPropertyClick
-          }),
+          }, name),
           name: name,
           readonly: readonly,
           disabled: disabled,
@@ -1472,7 +1494,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
     }));
   };
@@ -1482,13 +1504,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
@@ -1502,15 +1524,16 @@ var COMPONENT_TYPES = {
  */
 function getFieldComponent(schema, uiOptions, idSchema, registry) {
   var field = uiOptions.field;
-  var fields = registry.fields;
-  if (typeof field === "function") {
+  var fields = registry.fields,
+    translateString = registry.translateString;
+  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
@@ -1520,11 +1543,11 @@ 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: "Unknown field type " + schema.type,
+      reason: translateString(TranslatableString.UnknownFieldType, [String(schema.type)]),
       registry: registry
     });
   };
@@ -1554,17 +1577,17 @@ function SchemaFieldRender(props) {
   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);
+  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]);
@@ -1583,11 +1606,11 @@ function SchemaFieldRender(props) {
     __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,
@@ -1608,15 +1631,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);
@@ -1624,7 +1647,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,
@@ -1632,7 +1655,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,
@@ -1641,7 +1664,7 @@ function SchemaFieldRender(props) {
     registry: registry
   });
   var fieldProps = {
-    description: /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
+    description: jsx(DescriptionFieldTemplate, {
       id: descriptionId(id),
       description: description,
       schema: schema,
@@ -1650,7 +1673,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,
@@ -1664,7 +1687,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,
@@ -1674,68 +1697,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
@@ -1766,7 +1793,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;
   }
@@ -1774,16 +1801,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,
@@ -1848,8 +1876,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,
@@ -1884,39 +1912,43 @@ 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
+        }), hasRemove && jsx(RemoveButton, {
+          style: btnStyle,
+          disabled: disabled || readonly,
+          onClick: onDropIndexClick(index),
+          uiSchema: uiSchema,
+          registry: registry
+        })]
+      })
+    })]
+  });
 }
 
 var _excluded$4 = ["key"];
@@ -1938,42 +1970,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
@@ -1994,8 +2026,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,
@@ -2005,7 +2037,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.
@@ -2021,6 +2053,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,
@@ -2028,19 +2061,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;
@@ -2050,29 +2083,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
@@ -2087,50 +2121,58 @@ 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 MoveDownButton(props) {
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    title: "Move down",
-    className: "array-item-move-down"
+  var translateString = props.registry.translateString;
+  return jsx(IconButton, _extends({
+    title: translateString(TranslatableString.MoveDownButton),
+    className: 'array-item-move-down'
   }, props, {
-    icon: "arrow-down"
+    icon: 'arrow-down'
   }));
 }
 function MoveUpButton(props) {
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    title: "Move up",
-    className: "array-item-move-up"
+  var translateString = props.registry.translateString;
+  return jsx(IconButton, _extends({
+    title: translateString(TranslatableString.MoveUpButton),
+    className: 'array-item-move-up'
   }, props, {
-    icon: "arrow-up"
+    icon: 'arrow-up'
   }));
 }
 function RemoveButton(props) {
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
-    title: "Remove",
-    className: "array-item-remove"
+  var translateString = props.registry.translateString;
+  return jsx(IconButton, _extends({
+    title: translateString(TranslatableString.RemoveButton),
+    className: 'array-item-remove'
   }, props, {
-    iconType: "danger",
-    icon: "remove"
+    iconType: 'danger',
+    icon: 'remove'
   }));
 }
 
@@ -2141,19 +2183,22 @@ function AddButton(_ref) {
     onClick = _ref.onClick,
     disabled = _ref.disabled,
     registry = _ref.registry;
-  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: "Add",
-    onClick: onClick,
-    disabled: disabled,
-    registry: registry
-  })));
+  var translateString = registry.translateString;
+  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() {
@@ -2176,16 +2221,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
+    });
   }
 }
 
@@ -2194,24 +2241,30 @@ function DescriptionField(props) {
  * @param props - The `ErrorListProps` for this component
  */
 function ErrorList(_ref) {
-  var errors = _ref.errors;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "panel panel-danger errors"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "panel-heading"
-  }, /*#__PURE__*/React.createElement("h3", {
-    className: "panel-title"
-  }, "Errors")), /*#__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);
-  })));
+  var errors = _ref.errors,
+    registry = _ref.registry;
+  var translateString = registry.translateString;
+  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
@@ -2223,12 +2276,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
@@ -2249,17 +2304,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
@@ -2274,17 +2332,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
@@ -2298,16 +2359,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
@@ -2330,37 +2393,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
@@ -2369,11 +2433,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
@@ -2384,10 +2450,29 @@ function TitleField(props) {
 function UnsupportedField(props) {
   var schema = props.schema,
     idSchema = props.idSchema,
-    reason = props.reason;
-  return /*#__PURE__*/React.createElement("div", {
-    className: "unsupported-field"
-  }, /*#__PURE__*/React.createElement("p", null, "Unsupported field schema", idSchema && idSchema.$id && /*#__PURE__*/React.createElement("span", null, " for", " field ", /*#__PURE__*/React.createElement("code", null, idSchema.$id)), reason && /*#__PURE__*/React.createElement("em", null, ": ", reason), "."), schema && /*#__PURE__*/React.createElement("pre", null, JSON.stringify(schema, null, 2)));
+    reason = props.reason,
+    registry = props.registry;
+  var translateString = registry.translateString;
+  var translateEnum = TranslatableString.UnsupportedField;
+  var translateParams = [];
+  if (idSchema && idSchema.$id) {
+    translateEnum = TranslatableString.UnsupportedFieldWithId;
+    translateParams.push(idSchema.$id);
+  }
+  if (reason) {
+    translateEnum = translateEnum === TranslatableString.UnsupportedField ? TranslatableString.UnsupportedFieldWithReason : TranslatableString.UnsupportedFieldWithIdAndReason;
+    translateParams.push(reason);
+  }
+  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
@@ -2409,51 +2494,60 @@ function WrapIfAdditionalTemplate(props) {
     children = props.children,
     uiSchema = props.uiSchema,
     registry = props.registry;
+  var templates = registry.templates,
+    translateString = registry.translateString;
   // Button templates are not overridden in the uiSchema
-  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
-  var keyLabel = label + " Key"; // i18n ?
+  var RemoveButton = templates.ButtonTemplates.RemoveButton;
+  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() {
@@ -2502,29 +2596,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
     });
@@ -2537,20 +2631,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])
     },
@@ -2565,7 +2661,7 @@ function DateElement(_ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     registry: registry,
-    label: "",
+    label: '',
     "aria-describedby": ariaDescribedByIds(rootId)
   });
 }
@@ -2583,11 +2679,13 @@ 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,
     onChange = _ref2.onChange,
     value = _ref2.value;
+  var translateString = registry.translateString;
   var _useReducer = useReducer(function (state, action) {
       return _extends({}, state, action);
     }, parseDateString(value, time)),
@@ -2621,39 +2719,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
-  }, "Now")), (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
-  }, "Clear")));
+  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"];
@@ -2667,7 +2771,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));
 }
@@ -2692,7 +2796,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
@@ -2706,27 +2810,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.
@@ -2759,41 +2868,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
@@ -2806,9 +2922,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
   }));
@@ -2823,12 +2939,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
   }));
@@ -2844,9 +2960,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) {
@@ -2862,9 +2978,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));
 }
 
@@ -2872,7 +2988,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,
@@ -2883,7 +2999,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,
@@ -2906,24 +3022,29 @@ function processFiles(files) {
   return Promise.all(Array.from(files).map(processFile));
 }
 function FilesInfo(_ref) {
-  var filesInfo = _ref.filesInfo;
+  var filesInfo = _ref.filesInfo,
+    registry = _ref.registry;
   if (filesInfo.length === 0) {
     return null;
   }
-  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("strong", null, name), " (", type, ", ", size, " bytes)");
-  }));
+  var translateString = registry.translateString;
+  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,
@@ -2939,16 +3060,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;
+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]);
@@ -2971,20 +3091,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
-  }));
+  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.
@@ -2995,11 +3113,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
   });
 }
 
@@ -3010,9 +3128,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));
 }
 
@@ -3047,38 +3165,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
@@ -3089,13 +3214,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) {
@@ -3132,7 +3259,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));
@@ -3146,31 +3273,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.
@@ -3193,7 +3322,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;
@@ -3203,11 +3332,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,
@@ -3232,8 +3361,8 @@ 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 `URLWidget` component uses the `BaseInputTemplate` changing the type to `url`.
@@ -3243,9 +3372,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));
 }
 
@@ -3256,9 +3385,9 @@ 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));
 }
 
@@ -3295,7 +3424,8 @@ function getDefaultRegistry() {
     templates: templates(),
     widgets: widgets(),
     rootSchema: {},
-    formContext: {}
+    formContext: {},
+    translateString: englishStringTranslator
   };
 }
 
@@ -3318,7 +3448,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
@@ -3339,22 +3469,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);
               }
             });
@@ -3387,7 +3517,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 = {
@@ -3413,7 +3543,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,
@@ -3453,7 +3583,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);
       }
@@ -3472,20 +3602,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
@@ -3512,10 +3642,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;
@@ -3564,7 +3694,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,
@@ -3616,14 +3746,15 @@ 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,
         uiSchema: uiSchema,
-        formContext: formContext
+        formContext: formContext,
+        registry: registry
       });
     }
     return null;
@@ -3636,12 +3767,14 @@ 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 schemaUtils = this.state.schemaUtils;
     var _getDefaultRegistry = getDefaultRegistry(),
       fields = _getDefaultRegistry.fields,
       templates = _getDefaultRegistry.templates,
       widgets = _getDefaultRegistry.widgets,
-      formContext = _getDefaultRegistry.formContext;
+      formContext = _getDefaultRegistry.formContext,
+      translateString = _getDefaultRegistry.translateString;
     return {
       fields: _extends({}, fields, this.props.fields),
       templates: _extends({}, templates, this.props.templates, {
@@ -3650,13 +3783,14 @@ var Form = /*#__PURE__*/function (_Component) {
       widgets: _extends({}, widgets, this.props.widgets),
       rootSchema: this.props.schema,
       formContext: this.props.formContext || formContext,
-      schemaUtils: schemaUtils
+      schemaUtils: schemaUtils,
+      translateString: customTranslateString || translateString
     };
   }
   /** 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();
@@ -3671,12 +3805,12 @@ var Form = /*#__PURE__*/function (_Component) {
   _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,
+      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;
+      idSeparator = _this$props4$idSepara === void 0 ? '_' : _this$props4$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 {
@@ -3728,7 +3862,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;
@@ -3745,7 +3879,7 @@ var Form = /*#__PURE__*/function (_Component) {
       idPrefix = _this$props6.idPrefix,
       idSeparator = _this$props6.idSeparator,
       _this$props6$classNam = _this$props6.className,
-      className = _this$props6$classNam === void 0 ? "" : _this$props6$classNam,
+      className = _this$props6$classNam === void 0 ? '' : _this$props6$classNam,
       tagName = _this$props6.tagName,
       name = _this$props6.name,
       method = _this$props6.method,
@@ -3762,7 +3896,7 @@ var Form = /*#__PURE__*/function (_Component) {
       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,
+      showErrorList = _this$props6$showErro === void 0 ? 'top' : _this$props6$showErro,
       _internalFormWrapper = _this$props6._internalFormWrapper;
     var _this$state4 = this.state,
       schema = _this$state4.schema,
@@ -3777,9 +3911,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,
@@ -3791,27 +3925,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);
@@ -3830,7 +3965,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,