@rjsf/core 5.0.0-beta.16 → 5.0.0-beta.18

package/dist/core.cjs.development.js

@@ -5,26 +5,26 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var utils = require('@rjsf/utils');
 var get = require('lodash/get');
-var _isEmpty = require('lodash/isEmpty');
+var isEmpty = require('lodash/isEmpty');
 var _pick = require('lodash/pick');
 var isObject = require('lodash/isObject');
 var set = require('lodash/set');
 var nanoid = require('nanoid');
-var unset = require('lodash/unset');
-var has = require('lodash/has');
 var omit = require('lodash/omit');
+var has = require('lodash/has');
+var unset = require('lodash/unset');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var get__default = /*#__PURE__*/_interopDefaultLegacy(get);
-var _isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(_isEmpty);
+var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
 var _pick__default = /*#__PURE__*/_interopDefaultLegacy(_pick);
 var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
 var set__default = /*#__PURE__*/_interopDefaultLegacy(set);
-var unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
-var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
+var has__default = /*#__PURE__*/_interopDefaultLegacy(has);
+var unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
 
 function _defineProperties(target, props) {
   for (var i = 0; i < props.length; i++) {
@@ -32,7 +32,7 @@ function _defineProperties(target, props) {
     descriptor.enumerable = descriptor.enumerable || false;
     descriptor.configurable = true;
     if ("value" in descriptor) descriptor.writable = true;
-    Object.defineProperty(target, descriptor.key, descriptor);
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
   }
 }
 function _createClass(Constructor, protoProps, staticProps) {
@@ -81,36 +81,19 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   }
   return target;
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
+function _toPrimitive(input, hint) {
+  if (typeof input !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (typeof res !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+  return (hint === "string" ? String : Number)(input);
+}
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return typeof key === "symbol" ? key : String(key);
 }
 
 var _excluded$9 = ["widget"],
@@ -538,7 +521,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       options = _objectWithoutPropertiesLoose(_getUiOptions2, _excluded$9);
     var Widget = utils.getWidget(schema, widget, widgets);
     return /*#__PURE__*/React__default["default"].createElement(Widget, {
-      id: idSchema && idSchema.$id,
+      id: idSchema.$id,
       multiple: true,
       onChange: this.onSelectChange,
       onBlur: onBlur,
@@ -594,7 +577,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       options = _objectWithoutPropertiesLoose(_getUiOptions3, _excluded2);
     var Widget = utils.getWidget(schema, widget, widgets);
     return /*#__PURE__*/React__default["default"].createElement(Widget, {
-      id: idSchema && idSchema.$id,
+      id: idSchema.$id,
       multiple: true,
       onChange: this.onSelectChange,
       onBlur: onBlur,
@@ -648,7 +631,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     var Widget = utils.getWidget(schema, widget, widgets);
     return /*#__PURE__*/React__default["default"].createElement(Widget, {
       options: options,
-      id: idSchema && idSchema.$id,
+      id: idSchema.$id,
       multiple: true,
       onChange: this.onSelectChange,
       onBlur: onBlur,
@@ -941,7 +924,7 @@ function BooleanField(props) {
     }),
     schema: schema,
     uiSchema: uiSchema,
-    id: idSchema && idSchema.$id,
+    id: idSchema.$id,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -957,7 +940,7 @@ function BooleanField(props) {
   });
 }
 
-var _excluded$7 = ["widget"];
+var _excluded$7 = ["widget", "placeholder", "autofocus", "autocomplete"];
 /** 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`.
  *
@@ -973,38 +956,28 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
     var _this;
     _this = _Component.call(this, props) || this;
     _this.onOptionChange = function (option) {
-      var selectedOption = parseInt(option, 10);
+      var selectedOption = _this.state.selectedOption;
       var _this$props = _this.props,
         formData = _this$props.formData,
         onChange = _this$props.onChange,
         options = _this$props.options,
         registry = _this$props.registry;
       var schemaUtils = registry.schemaUtils;
-      var newOption = schemaUtils.retrieveSchema(options[selectedOption], formData);
-      // If the new option is of type object and the current data is an object,
-      // discard properties added using the old option.
-      var newFormData = undefined;
-      if (utils.guessType(formData) === "object" && (newOption.type === "object" || newOption.properties)) {
-        newFormData = Object.assign({}, formData);
-        var optionsToDiscard = options.slice();
-        optionsToDiscard.splice(selectedOption, 1);
-        // Discard any data added using other options
-        for (var _iterator = _createForOfIteratorHelperLoose(optionsToDiscard), _step; !(_step = _iterator()).done;) {
-          var _option = _step.value;
-          if (_option.properties) {
-            for (var key in _option.properties) {
-              if (key in newFormData) {
-                unset__default["default"](newFormData, key);
-              }
-            }
-          }
-        }
+      var intOption = option !== undefined ? parseInt(option, 10) : -1;
+      if (intOption === selectedOption) {
+        return;
+      }
+      var newOption = intOption >= 0 ? schemaUtils.retrieveSchema(options[intOption], formData) : undefined;
+      var oldOption = selectedOption >= 0 ? schemaUtils.retrieveSchema(options[selectedOption], formData) : undefined;
+      var newFormData = schemaUtils.sanitizeDataForNewSchema(newOption, oldOption, formData);
+      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");
       }
-      // 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
-      onChange(schemaUtils.getDefaultFormState(options[selectedOption], newFormData, "excludeObjectChildren"), undefined, _this.getFieldId());
+      onChange(newFormData, undefined, _this.getFieldId());
       _this.setState({
-        selectedOption: parseInt(option, 10)
+        selectedOption: intOption
       });
     };
     var _this$props2 = _this.props,
@@ -1046,8 +1019,8 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
    */;
   _proto.getMatchingOption = function getMatchingOption(selectedOption, formData, options) {
     var schemaUtils = this.props.registry.schemaUtils;
-    var option = schemaUtils.getMatchingOption(formData, options);
-    if (option !== 0) {
+    var option = schemaUtils.getClosestMatchingOption(formData, options, selectedOption);
+    if (option > 0) {
       return option;
     }
     // If the form data matches none of the options, use the currently selected
@@ -1070,23 +1043,13 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
    */;
   _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,
-      _this$props5$readonly = _this$props5.readonly,
-      readonly = _this$props5$readonly === void 0 ? false : _this$props5$readonly,
-      _this$props5$hideErro = _this$props5.hideError,
-      hideError = _this$props5$hideErro === void 0 ? false : _this$props5$hideErro,
       _this$props5$errorSch = _this$props5.errorSchema,
       errorSchema = _this$props5$errorSch === void 0 ? {} : _this$props5$errorSch,
-      formData = _this$props5.formData,
       formContext = _this$props5.formContext,
-      idPrefix = _this$props5.idPrefix,
-      idSeparator = _this$props5.idSeparator,
-      idSchema = _this$props5.idSchema,
       onBlur = _this$props5.onBlur,
-      onChange = _this$props5.onChange,
       onFocus = _this$props5.onFocus,
       options = _this$props5.options,
       registry = _this$props5.registry,
@@ -1098,10 +1061,15 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
     var _getUiOptions = utils.getUiOptions(uiSchema),
       _getUiOptions$widget = _getUiOptions.widget,
       widget = _getUiOptions$widget === void 0 ? "select" : _getUiOptions$widget,
+      placeholder = _getUiOptions.placeholder,
+      autofocus = _getUiOptions.autofocus,
+      autocomplete = _getUiOptions.autocomplete,
       uiOptions = _objectWithoutPropertiesLoose(_getUiOptions, _excluded$7);
     var Widget = utils.getWidget({
       type: "number"
     }, widget, widgets);
+    var rawErrors = get__default["default"](errorSchema, utils.ERRORS_KEY, []);
+    var fieldErrorSchema = omit__default["default"](errorSchema, [utils.ERRORS_KEY]);
     var option = options[selectedOption] || null;
     var optionSchema;
     if (option) {
@@ -1121,7 +1089,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       className: "panel panel-default panel-body"
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "form-group"
-    }, /*#__PURE__*/React__default["default"].createElement(Widget, _extends({
+    }, /*#__PURE__*/React__default["default"].createElement(Widget, {
       id: this.getFieldId(),
       schema: {
         type: "number",
@@ -1130,32 +1098,23 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
       onChange: this.onOptionChange,
       onBlur: onBlur,
       onFocus: onFocus,
+      disabled: disabled || isEmpty__default["default"](enumOptions),
+      multiple: false,
+      rawErrors: rawErrors,
+      errorSchema: fieldErrorSchema,
       value: selectedOption,
-      options: {
+      options: _extends({
         enumOptions: enumOptions
-      },
+      }, uiOptions),
       registry: registry,
-      formContext: formContext
-    }, uiOptions, {
-      label: ""
-    }))), option !== null && /*#__PURE__*/React__default["default"].createElement(_SchemaField, {
-      name: name,
-      schema: optionSchema,
-      uiSchema: uiSchema,
-      errorSchema: errorSchema,
-      idSchema: idSchema,
-      idPrefix: idPrefix,
-      idSeparator: idSeparator,
-      formData: formData,
       formContext: formContext,
-      onChange: onChange,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      registry: registry,
-      disabled: disabled,
-      readonly: readonly,
-      hideError: hideError
-    }));
+      placeholder: placeholder,
+      autocomplete: autocomplete,
+      autofocus: autofocus,
+      label: ""
+    })), option !== null && /*#__PURE__*/React__default["default"].createElement(_SchemaField, _extends({}, this.props, {
+      schema: optionSchema
+    })));
   };
   return AnyOfField;
 }(React.Component);
@@ -1291,7 +1250,7 @@ var ObjectField = /*#__PURE__*/function (_Component) {
         duplicateKeySuffixSeparator = _getUiOptions$duplica === void 0 ? "-" : _getUiOptions$duplica;
       var index = 0;
       var newKey = preferredKey;
-      while (newKey in formData) {
+      while (has__default["default"](formData, newKey)) {
         newKey = "" + preferredKey + duplicateKeySuffixSeparator + ++index;
       }
       return newKey;
@@ -1334,12 +1293,16 @@ var ObjectField = /*#__PURE__*/function (_Component) {
         var type = undefined;
         if (isObject__default["default"](schema.additionalProperties)) {
           type = schema.additionalProperties.type;
-          if (utils.REF_KEY in schema.additionalProperties) {
+          var apSchema = schema.additionalProperties;
+          if (utils.REF_KEY in apSchema) {
             var schemaUtils = registry.schemaUtils;
-            var refSchema = schemaUtils.retrieveSchema({
-              $ref: schema.additionalProperties[utils.REF_KEY]
+            apSchema = schemaUtils.retrieveSchema({
+              $ref: apSchema[utils.REF_KEY]
             }, formData);
-            type = refSchema.type;
+            type = apSchema.type;
+          }
+          if (!type && (utils.ANY_OF_KEY in apSchema || utils.ONE_OF_KEY in apSchema)) {
+            type = "object";
           }
         }
         var newKey = _this.getAvailableKey("newKey", newFormData);
@@ -1602,10 +1565,10 @@ function SchemaFieldRender(props) {
   var _ref = errorSchema || {},
     __errors = _ref.__errors,
     fieldErrorSchema = _objectWithoutPropertiesLoose(_ref, _excluded$6);
-  // See #439: uiSchema: Don't pass consumed class names to child components
-  var fieldUiSchema = omit__default["default"](uiSchema, ["ui:classNames", "classNames"]);
-  if ("ui:options" in fieldUiSchema) {
-    fieldUiSchema["ui:options"] = omit__default["default"](fieldUiSchema["ui:options"], ["classNames"]);
+  // See #439: uiSchema: Don't pass consumed class names or style to child components
+  var fieldUiSchema = omit__default["default"](uiSchema, ["ui:classNames", "classNames", "ui:style"]);
+  if (utils.UI_OPTIONS_KEY in fieldUiSchema) {
+    fieldUiSchema[utils.UI_OPTIONS_KEY] = omit__default["default"](fieldUiSchema[utils.UI_OPTIONS_KEY], ["classNames", "style"]);
   }
   var field = /*#__PURE__*/React__default["default"].createElement(FieldComponent, _extends({}, props, {
     onChange: handleFieldComponentChange,
@@ -1662,7 +1625,7 @@ function SchemaFieldRender(props) {
   });
   var fieldProps = {
     description: /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-      id: id + "__description",
+      id: utils.descriptionId(id),
       description: description,
       schema: schema,
       uiSchema: uiSchema,
@@ -1685,6 +1648,7 @@ function SchemaFieldRender(props) {
     hideError: hideError,
     displayLabel: displayLabel,
     classNames: classNames.join(" ").trim(),
+    style: uiOptions.style,
     formContext: formContext,
     formData: formData,
     schema: schema,
@@ -1801,7 +1765,7 @@ function StringField(props) {
     }),
     schema: schema,
     uiSchema: uiSchema,
-    id: idSchema && idSchema.$id,
+    id: idSchema.$id,
     label: title === undefined ? name : title,
     value: formData,
     onChange: onChange,
@@ -1867,9 +1831,8 @@ function ArrayFieldDescriptionTemplate(props) {
     return null;
   }
   var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, options);
-  var id = idSchema.$id + "__description";
   return /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: id,
+    id: utils.descriptionId(idSchema),
     description: description,
     schema: schema,
     uiSchema: uiSchema,
@@ -2014,9 +1977,8 @@ function ArrayFieldTitleTemplate(props) {
     return null;
   }
   var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
-  var id = idSchema.$id + "__title";
   return /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-    id: id,
+    id: utils.titleId(idSchema),
     title: title,
     required: required,
     schema: schema,
@@ -2079,13 +2041,14 @@ function BaseInputTemplate(props) {
     autoFocus: autofocus,
     value: inputValue
   }, inputProps, {
-    list: schema.examples ? "examples_" + id : undefined,
+    list: schema.examples ? utils.examplesId(id) : undefined,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
   })), Array.isArray(schema.examples) && /*#__PURE__*/React__default["default"].createElement("datalist", {
     key: "datalist_" + id,
-    id: "examples_" + id
+    id: utils.examplesId(id)
   }, [].concat(new Set(schema.examples.concat(schema["default"] ? [schema["default"]] : []))).map(function (example) {
     return /*#__PURE__*/React__default["default"].createElement("option", {
       key: example,
@@ -2292,7 +2255,7 @@ function FieldErrorTemplate(props) {
   if (errors.length === 0) {
     return null;
   }
-  var id = idSchema.$id + "__error";
+  var id = utils.errorId(idSchema);
   return /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("ul", {
     id: id,
     className: "error-detail bs-callout bs-callout-info"
@@ -2316,7 +2279,7 @@ function FieldHelpTemplate(props) {
   if (!help) {
     return null;
   }
-  var id = idSchema.$id + "__help";
+  var id = utils.helpId(idSchema);
   if (typeof help === "string") {
     return /*#__PURE__*/React__default["default"].createElement("p", {
       id: id,
@@ -2356,14 +2319,14 @@ function ObjectFieldTemplate(props) {
   return /*#__PURE__*/React__default["default"].createElement("fieldset", {
     id: idSchema.$id
   }, (options.title || title) && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-    id: idSchema.$id + "__title",
+    id: utils.titleId(idSchema),
     title: options.title || title,
     required: required,
     schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), (options.description || description) && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: idSchema.$id + "__description",
+    id: utils.descriptionId(idSchema),
     description: options.description || description,
     schema: schema,
     uiSchema: uiSchema,
@@ -2417,6 +2380,7 @@ function UnsupportedField(props) {
 function WrapIfAdditionalTemplate(props) {
   var id = props.id,
     classNames = props.classNames,
+    style = props.style,
     disabled = props.disabled,
     label = props.label,
     onKeyChange = props.onKeyChange,
@@ -2433,11 +2397,13 @@ function WrapIfAdditionalTemplate(props) {
   var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames
+      className: classNames,
+      style: style
     }, children);
   }
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classNames
+    className: classNames,
+    style: style
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: "row"
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -2581,7 +2547,8 @@ function DateElement(_ref) {
     onBlur: onBlur,
     onFocus: onFocus,
     registry: registry,
-    label: ""
+    label: "",
+    "aria-describedby": utils.ariaDescribedByIds(rootId)
   });
 }
 /** The `AltDateWidget` is an alternative widget for rendering date properties.
@@ -2719,7 +2686,7 @@ function CheckboxWidget(_ref) {
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "checkbox " + (disabled || readonly ? "disabled" : "")
   }, schema.description && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: id + "__description",
+    id: utils.descriptionId(id),
     description: schema.description,
     schema: schema,
     uiSchema: uiSchema,
@@ -2734,24 +2701,11 @@ function CheckboxWidget(_ref) {
     autoFocus: autofocus,
     onChange: handleChange,
     onBlur: handleBlur,
-    onFocus: handleFocus
+    onFocus: handleFocus,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }), /*#__PURE__*/React__default["default"].createElement("span", null, label)));
 }
 
-function selectValue(value, selected, all) {
-  var at = all.indexOf(value);
-  var updated = selected.slice(0, at).concat(value, selected.slice(at));
-  // As inserting values at predefined index positions doesn't work with empty
-  // arrays, we need to reorder the updated selection to match the initial order
-  return updated.sort(function (a, b) {
-    return Number(all.indexOf(a) > all.indexOf(b));
-  });
-}
-function deselectValue(value, selected) {
-  return selected.filter(function (v) {
-    return v !== value;
-  });
-}
 /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
  *  It is typically used to represent an array of enums.
  *
@@ -2770,32 +2724,30 @@ function CheckboxesWidget(_ref) {
     autofocus = _ref$autofocus === void 0 ? false : _ref$autofocus,
     readonly = _ref.readonly,
     onChange = _ref.onChange;
+  var checkboxesValues = Array.isArray(value) ? value : [value];
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: "checkboxes",
     id: id
   }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-    var checked = value.indexOf(option.value) !== -1;
+    var checked = checkboxesValues.includes(option.value);
     var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) != -1;
     var disabledCls = disabled || itemDisabled || readonly ? "disabled" : "";
     var handleChange = function handleChange(event) {
-      var all = enumOptions.map(function (_ref2) {
-        var value = _ref2.value;
-        return value;
-      });
       if (event.target.checked) {
-        onChange(selectValue(option.value, value, all));
+        onChange(utils.enumOptionsSelectValue(option.value, checkboxesValues, enumOptions));
       } else {
-        onChange(deselectValue(option.value, value));
+        onChange(utils.enumOptionsDeselectValue(option.value, checkboxesValues));
       }
     };
     var checkbox = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
       type: "checkbox",
-      id: id + "-" + option.value,
+      id: utils.optionId(id, option),
       name: id,
       checked: checked,
       disabled: disabled || itemDisabled || readonly,
       autoFocus: autofocus && index === 0,
-      onChange: handleChange
+      onChange: handleChange,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
     return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
       key: option.value,
@@ -2991,7 +2943,8 @@ function FileWidget(_ref2) {
     defaultValue: "",
     autoFocus: autofocus,
     multiple: multiple,
-    accept: options.accept ? String(options.accept) : undefined
+    accept: options.accept ? String(options.accept) : undefined,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   })), /*#__PURE__*/React__default["default"].createElement(FilesInfo, {
     filesInfo: filesInfo
   }));
@@ -3068,7 +3021,7 @@ function RadioWidget(_ref) {
     };
     var radio = /*#__PURE__*/React__default["default"].createElement("span", null, /*#__PURE__*/React__default["default"].createElement("input", {
       type: "radio",
-      id: id + "-" + option.value,
+      id: utils.optionId(id, option),
       checked: checked,
       name: name,
       required: required,
@@ -3077,7 +3030,8 @@ function RadioWidget(_ref) {
       autoFocus: autofocus && i === 0,
       onChange: handleChange,
       onBlur: handleBlur,
-      onFocus: handleFocus
+      onFocus: handleFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     }), /*#__PURE__*/React__default["default"].createElement("span", null, option.label));
     return inline ? /*#__PURE__*/React__default["default"].createElement("label", {
       key: option.value,
@@ -3163,7 +3117,8 @@ function SelectWidget(_ref) {
     autoFocus: autofocus,
     onBlur: handleBlur,
     onFocus: handleFocus,
-    onChange: handleChange
+    onChange: handleChange,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   }, !multiple && schema["default"] === undefined && /*#__PURE__*/React__default["default"].createElement("option", {
     value: ""
   }, placeholder), Array.isArray(enumOptions) && enumOptions.map(function (_ref2, i) {
@@ -3221,7 +3176,8 @@ function TextareaWidget(_ref) {
     rows: options.rows,
     onBlur: handleBlur,
     onFocus: handleFocus,
-    onChange: handleChange
+    onChange: handleChange,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   });
 }
 TextareaWidget.defaultProps = {
@@ -3358,7 +3314,7 @@ var Form = /*#__PURE__*/function (_Component) {
               var formValue = get__default["default"](formData, path);
               // adds path to fieldNames if it points to a value
               // or an empty object/array
-              if (typeof formValue !== "object" || _isEmpty__default["default"](formValue)) {
+              if (typeof formValue !== "object" || isEmpty__default["default"](formValue)) {
                 acc.push(path);
               }
             });
@@ -3794,9 +3750,9 @@ function withTheme(themeProps) {
       widgets = _ref.widgets,
       templates = _ref.templates,
       directProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-    fields = _extends({}, themeProps.fields, fields);
-    widgets = _extends({}, themeProps.widgets, widgets);
-    templates = _extends({}, themeProps.templates, templates, {
+    fields = _extends({}, themeProps === null || themeProps === void 0 ? void 0 : themeProps.fields, fields);
+    widgets = _extends({}, themeProps === null || themeProps === void 0 ? void 0 : themeProps.widgets, widgets);
+    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__default["default"].createElement(Form, _extends({}, themeProps, directProps, {