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

package/dist/core.umd.development.js

@@ -1,20 +1,20 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash-es/get'), require('lodash-es/isEmpty'), require('lodash-es/pick'), require('lodash-es/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/unset'), require('lodash-es/has'), require('lodash-es/omit')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash-es/get', 'lodash-es/isEmpty', 'lodash-es/pick', 'lodash-es/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/unset', 'lodash-es/has', 'lodash-es/omit'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.React, global.utils, global.get, global._isEmpty, global._pick, global.isObject, global.set, global.nanoid, global.unset, global.has, global.omit));
-})(this, (function (exports, React, utils, get, _isEmpty, _pick, isObject, set, nanoid, unset, has, omit) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('@rjsf/utils'), require('lodash-es/get'), require('lodash-es/isEmpty'), require('lodash-es/pick'), require('lodash-es/isObject'), require('lodash-es/set'), require('nanoid'), require('lodash-es/omit'), require('lodash-es/has'), require('lodash-es/unset')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', '@rjsf/utils', 'lodash-es/get', 'lodash-es/isEmpty', 'lodash-es/pick', 'lodash-es/isObject', 'lodash-es/set', 'nanoid', 'lodash-es/omit', 'lodash-es/has', 'lodash-es/unset'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.JSONSchemaForm = {}, global.React, global.utils, global.get, global.isEmpty, global._pick, global.isObject, global.set, global.nanoid, global.omit, global.has, global.unset));
+})(this, (function (exports, React, utils, get, isEmpty, _pick, isObject, set, nanoid, omit, has, unset) { 'use strict';
 
   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++) {
@@ -22,7 +22,7 @@
       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) {
@@ -71,36 +71,19 @@
     }
     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"],
@@ -528,7 +511,7 @@
         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,
@@ -584,7 +567,7 @@
         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,
@@ -638,7 +621,7 @@
       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,
@@ -931,7 +914,7 @@
       }),
       schema: schema,
       uiSchema: uiSchema,
-      id: idSchema && idSchema.$id,
+      id: idSchema.$id,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -947,7 +930,7 @@
     });
   }
 
-  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`.
    *
@@ -963,38 +946,28 @@
       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;
         }
-        // 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());
+        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");
+        }
+        onChange(newFormData, undefined, _this.getFieldId());
         _this.setState({
-          selectedOption: parseInt(option, 10)
+          selectedOption: intOption
         });
       };
       var _this$props2 = _this.props,
@@ -1036,8 +1009,8 @@
      */;
     _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
@@ -1060,23 +1033,13 @@
      */;
     _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,
@@ -1088,10 +1051,15 @@
       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) {
@@ -1111,7 +1079,7 @@
         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",
@@ -1120,32 +1088,23 @@
         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);
@@ -1281,7 +1240,7 @@
           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;
@@ -1324,12 +1283,16 @@
           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);
@@ -1592,10 +1555,10 @@
     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,
@@ -1652,7 +1615,7 @@
     });
     var fieldProps = {
       description: /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-        id: id + "__description",
+        id: utils.descriptionId(id),
         description: description,
         schema: schema,
         uiSchema: uiSchema,
@@ -1675,6 +1638,7 @@
       hideError: hideError,
       displayLabel: displayLabel,
       classNames: classNames.join(" ").trim(),
+      style: uiOptions.style,
       formContext: formContext,
       formData: formData,
       schema: schema,
@@ -1791,7 +1755,7 @@
       }),
       schema: schema,
       uiSchema: uiSchema,
-      id: idSchema && idSchema.$id,
+      id: idSchema.$id,
       label: title === undefined ? name : title,
       value: formData,
       onChange: onChange,
@@ -1857,9 +1821,8 @@
       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,
@@ -2004,9 +1967,8 @@
       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,
@@ -2069,13 +2031,14 @@
       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,
@@ -2282,7 +2245,7 @@
     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"
@@ -2306,7 +2269,7 @@
     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,
@@ -2346,14 +2309,14 @@
     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,
@@ -2407,6 +2370,7 @@
   function WrapIfAdditionalTemplate(props) {
     var id = props.id,
       classNames = props.classNames,
+      style = props.style,
       disabled = props.disabled,
       label = props.label,
       onKeyChange = props.onKeyChange,
@@ -2423,11 +2387,13 @@
     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", {
@@ -2571,7 +2537,8 @@
       onBlur: onBlur,
       onFocus: onFocus,
       registry: registry,
-      label: ""
+      label: "",
+      "aria-describedby": utils.ariaDescribedByIds(rootId)
     });
   }
   /** The `AltDateWidget` is an alternative widget for rendering date properties.
@@ -2709,7 +2676,7 @@
     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,
@@ -2724,24 +2691,11 @@
       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.
    *
@@ -2760,32 +2714,30 @@
       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,
@@ -2981,7 +2933,8 @@
       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
     }));
@@ -3058,7 +3011,7 @@
       };
       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,
@@ -3067,7 +3020,8 @@
         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,
@@ -3153,7 +3107,8 @@
       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) {
@@ -3211,7 +3166,8 @@
       rows: options.rows,
       onBlur: handleBlur,
       onFocus: handleFocus,
-      onChange: handleChange
+      onChange: handleChange,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     });
   }
   TextareaWidget.defaultProps = {
@@ -3348,7 +3304,7 @@
                 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);
                 }
               });
@@ -3784,9 +3740,9 @@
         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, {