@rjsf/core 5.0.0-beta.15 → 5.0.0-beta.17

package/dist/core.umd.development.js

@@ -1,8 +1,8 @@
 (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["@rjsf/core"] = {}, 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/has'), require('lodash-es/unset'), 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/has', 'lodash-es/unset', '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.has, global.unset, global.omit));
+})(this, (function (exports, React, utils, get, _isEmpty, _pick, isObject, set, nanoid, has, unset, omit) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -12,8 +12,8 @@
   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 unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
   var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 
   function _defineProperties(target, props) {
@@ -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) {
@@ -102,6 +102,20 @@
     }
     throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
   }
+  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.");
+    }
+    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"],
     _excluded2 = ["widget"],
@@ -161,42 +175,11 @@
         return schemaUtils.getDefaultFormState(itemSchema);
       };
       _this.onAddClick = function (event) {
-        if (event) {
-          event.preventDefault();
-        }
-        var onChange = _this.props.onChange;
-        var keyedFormData = _this.state.keyedFormData;
-        var newKeyedFormDataRow = {
-          key: generateRowId(),
-          item: _this._getNewFormDataRow()
-        };
-        var newKeyedFormData = [].concat(keyedFormData, [newKeyedFormDataRow]);
-        _this.setState({
-          keyedFormData: newKeyedFormData,
-          updatedKeyedFormData: true
-        }, function () {
-          return onChange(keyedToPlainFormData(newKeyedFormData));
-        });
+        _this._handleAddClick(event);
       };
       _this.onAddIndexClick = function (index) {
         return function (event) {
-          if (event) {
-            event.preventDefault();
-          }
-          var onChange = _this.props.onChange;
-          var keyedFormData = _this.state.keyedFormData;
-          var newKeyedFormDataRow = {
-            key: generateRowId(),
-            item: _this._getNewFormDataRow()
-          };
-          var newKeyedFormData = [].concat(keyedFormData);
-          newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
-          _this.setState({
-            keyedFormData: newKeyedFormData,
-            updatedKeyedFormData: true
-          }, function () {
-            return onChange(keyedToPlainFormData(newKeyedFormData));
-          });
+          _this._handleAddClick(event, index);
         };
       };
       _this.onDropIndexClick = function (index) {
@@ -375,6 +358,42 @@
     /** Returns the default form information for an item based on the schema for that item. Deals with the possibility
      * that the schema is fixed and allows additional items.
      */;
+    /** Callback handler for when the user clicks on the add or add at index buttons. Creates a new row of keyed form data
+     * either at the end of the list (when index is not specified) or inserted at the `index` when it is, adding it into
+     * the state, and then returning `onChange()` with the plain form data converted from the keyed data
+     *
+     * @param event - The event for the click
+     * @param [index] - The optional index at which to add the new data
+     */
+    _proto._handleAddClick = function _handleAddClick(event, index) {
+      if (event) {
+        event.preventDefault();
+      }
+      var onChange = this.props.onChange;
+      var keyedFormData = this.state.keyedFormData;
+      var newKeyedFormDataRow = {
+        key: generateRowId(),
+        item: this._getNewFormDataRow()
+      };
+      var newKeyedFormData = [].concat(keyedFormData);
+      if (index !== undefined) {
+        newKeyedFormData.splice(index, 0, newKeyedFormDataRow);
+      } else {
+        newKeyedFormData.push(newKeyedFormDataRow);
+      }
+      this.setState({
+        keyedFormData: newKeyedFormData,
+        updatedKeyedFormData: true
+      }, function () {
+        return onChange(keyedToPlainFormData(newKeyedFormData));
+      });
+    }
+    /** Callback handler for when the user clicks on the add button. Creates a new row of keyed form data at the end of
+     * the list, adding it into the state, and then returning `onChange()` with the plain form data converted from the
+     * keyed data
+     *
+     * @param event - The event for the click
+     */;
     /** Renders the `ArrayField` depending on the specific needs of the schema and uischema elements
      */
     _proto.render = function render() {
@@ -443,8 +462,9 @@
       var _schemaItems = isObject__default["default"](schema.items) ? schema.items : {};
       var itemsSchema = schemaUtils.retrieveSchema(_schemaItems);
       var formData = keyedToPlainFormData(this.state.keyedFormData);
+      var canAdd = this.canAddItem(formData);
       var arrayProps = {
-        canAdd: this.canAddItem(formData),
+        canAdd: canAdd,
         items: keyedFormData.map(function (keyedItem, index) {
           var key = keyedItem.key,
             item = keyedItem.item;
@@ -458,6 +478,7 @@
             key: key,
             index: index,
             name: name && name + "-" + index,
+            canAdd: canAdd,
             canMoveUp: index > 0,
             canMoveDown: index < formData.length - 1,
             itemSchema: itemSchema,
@@ -468,7 +489,8 @@
             autofocus: autofocus && index === 0,
             onBlur: onBlur,
             onFocus: onFocus,
-            rawErrors: rawErrors
+            rawErrors: rawErrors,
+            totalItems: keyedFormData.length
           });
         }),
         className: "field field-array field-array-of-" + itemsSchema.type,
@@ -520,7 +542,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,
@@ -576,7 +598,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,
@@ -630,7 +652,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,
@@ -695,8 +717,9 @@
         items = items.concat(new Array(itemSchemas.length - items.length));
       }
       // These are the props passed into the render function
+      var canAdd = this.canAddItem(items) && !!additionalSchema;
       var arrayProps = {
-        canAdd: this.canAddItem(items) && !!additionalSchema,
+        canAdd: canAdd,
         className: "field field-array field-array-fixed-items",
         disabled: disabled,
         idSchema: idSchema,
@@ -716,6 +739,7 @@
             key: key,
             index: index,
             name: name && name + "-" + index,
+            canAdd: canAdd,
             canRemove: additional,
             canMoveUp: index >= itemSchemas.length + 1,
             canMoveDown: additional && index < items.length - 1,
@@ -727,7 +751,8 @@
             autofocus: autofocus && index === 0,
             onBlur: onBlur,
             onFocus: onFocus,
-            rawErrors: rawErrors
+            rawErrors: rawErrors,
+            totalItems: keyedFormData.length
           });
         }),
         onAddClick: this.onAddClick,
@@ -752,6 +777,7 @@
       var key = props.key,
         index = props.index,
         name = props.name,
+        canAdd = props.canAdd,
         _props$canRemove = props.canRemove,
         canRemove = _props$canRemove === void 0 ? true : _props$canRemove,
         _props$canMoveUp = props.canMoveUp,
@@ -766,7 +792,8 @@
         autofocus = props.autofocus,
         onBlur = props.onBlur,
         onFocus = props.onFocus,
-        rawErrors = props.rawErrors;
+        rawErrors = props.rawErrors,
+        totalItems = props.totalItems;
       var _this$props13 = this.props,
         disabled = _this$props13.disabled,
         hideError = _this$props13.hideError,
@@ -819,11 +846,13 @@
         }),
         className: "array-item",
         disabled: disabled,
+        canAdd: canAdd,
         hasToolbar: has.toolbar,
         hasMoveUp: has.moveUp,
         hasMoveDown: has.moveDown,
         hasRemove: has.remove,
         index: index,
+        totalItems: totalItems,
         key: key,
         onAddIndexClick: this.onAddIndexClick,
         onDropIndexClick: this.onDropIndexClick,
@@ -916,7 +945,7 @@
       }),
       schema: schema,
       uiSchema: uiSchema,
-      id: idSchema && idSchema.$id,
+      id: idSchema.$id,
       onChange: onChange,
       onFocus: onFocus,
       onBlur: onBlur,
@@ -968,7 +997,7 @@
             var _option = _step.value;
             if (_option.properties) {
               for (var key in _option.properties) {
-                if (key in newFormData) {
+                if (has__default["default"](newFormData, key)) {
                   unset__default["default"](newFormData, key);
                 }
               }
@@ -1266,7 +1295,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;
@@ -1577,10 +1606,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,
@@ -1637,7 +1666,7 @@
     });
     var fieldProps = {
       description: /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-        id: id + "__description",
+        id: utils.descriptionId(id),
         description: description,
         schema: schema,
         uiSchema: uiSchema,
@@ -1660,6 +1689,7 @@
       hideError: hideError,
       displayLabel: displayLabel,
       classNames: classNames.join(" ").trim(),
+      style: uiOptions.style,
       formContext: formContext,
       formData: formData,
       schema: schema,
@@ -1776,7 +1806,7 @@
       }),
       schema: schema,
       uiSchema: uiSchema,
-      id: idSchema && idSchema.$id,
+      id: idSchema.$id,
       label: title === undefined ? name : title,
       value: formData,
       onChange: onChange,
@@ -1842,9 +1872,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,
@@ -1896,17 +1925,20 @@
       style: btnStyle,
       disabled: disabled || readonly || !hasMoveUp,
       onClick: onReorderClick(index, index - 1),
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
       style: btnStyle,
       disabled: disabled || readonly || !hasMoveDown,
       onClick: onReorderClick(index, index + 1),
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
       style: btnStyle,
       disabled: disabled || readonly,
       onClick: onDropIndexClick(index),
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }))));
   }
 
@@ -1962,7 +1994,8 @@
       className: "array-item-add",
       onClick: onAddClick,
       disabled: disabled || readonly,
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }));
   }
 
@@ -1985,9 +2018,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,
@@ -2050,13 +2082,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,
@@ -2084,7 +2117,7 @@
     }), submitText));
   }
 
-  var _excluded$2 = ["iconType", "icon", "className", "uiSchema"];
+  var _excluded$2 = ["iconType", "icon", "className", "uiSchema", "registry"];
   function IconButton(props) {
     var _props$iconType = props.iconType,
       iconType = _props$iconType === void 0 ? "default" : _props$iconType,
@@ -2129,7 +2162,8 @@
   function AddButton(_ref) {
     var className = _ref.className,
       onClick = _ref.onClick,
-      disabled = _ref.disabled;
+      disabled = _ref.disabled,
+      registry = _ref.registry;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "row"
     }, /*#__PURE__*/React__default["default"].createElement("p", {
@@ -2140,7 +2174,8 @@
       className: "btn-add col-xs-12",
       title: "Add",
       onClick: onClick,
-      disabled: disabled
+      disabled: disabled,
+      registry: registry
     })));
   }
 
@@ -2261,7 +2296,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"
@@ -2285,7 +2320,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,
@@ -2325,14 +2360,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,
@@ -2343,7 +2378,8 @@
       className: "object-property-expand",
       onClick: onAddClick(schema),
       disabled: disabled || readonly,
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }));
   }
 
@@ -2385,6 +2421,7 @@
   function WrapIfAdditionalTemplate(props) {
     var id = props.id,
       classNames = props.classNames,
+      style = props.style,
       disabled = props.disabled,
       label = props.label,
       onKeyChange = props.onKeyChange,
@@ -2401,11 +2438,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", {
@@ -2435,7 +2474,8 @@
       },
       disabled: disabled || readonly,
       onClick: onDropPropertyClick(label),
-      uiSchema: uiSchema
+      uiSchema: uiSchema,
+      registry: registry
     }))));
   }
 
@@ -2548,7 +2588,8 @@
       onBlur: onBlur,
       onFocus: onFocus,
       registry: registry,
-      label: ""
+      label: "",
+      "aria-describedby": utils.ariaDescribedByIds(rootId)
     });
   }
   /** The `AltDateWidget` is an alternative widget for rendering date properties.
@@ -2686,7 +2727,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,
@@ -2701,24 +2742,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.
    *
@@ -2737,32 +2765,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,
@@ -2958,7 +2984,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
     }));
@@ -3035,7 +3062,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,
@@ -3044,7 +3071,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,
@@ -3130,7 +3158,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) {
@@ -3188,7 +3217,8 @@
       rows: options.rows,
       onBlur: handleBlur,
       onFocus: handleFocus,
-      onChange: handleChange
+      onChange: handleChange,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     });
   }
   TextareaWidget.defaultProps = {
@@ -3573,9 +3603,10 @@
       var schemaUtils = altSchemaUtils ? altSchemaUtils : this.state.schemaUtils;
       var _this$props3 = this.props,
         customValidate = _this$props3.customValidate,
-        transformErrors = _this$props3.transformErrors;
+        transformErrors = _this$props3.transformErrors,
+        uiSchema = _this$props3.uiSchema;
       var resolvedSchema = schemaUtils.retrieveSchema(schema, formData);
-      return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors);
+      return schemaUtils.getValidator().validateFormData(formData, resolvedSchema, customValidate, transformErrors, uiSchema);
     }
     /** Renders any errors contained in the `state` in using the `ErrorList`, if not disabled by `showErrorList`. */;
     _proto.renderErrors = function renderErrors(registry) {
@@ -3744,7 +3775,8 @@
         disabled: disabled,
         readonly: readonly
       }), children ? children : /*#__PURE__*/React__default["default"].createElement(SubmitButton, {
-        uiSchema: uiSchema
+        uiSchema: uiSchema,
+        registry: registry
       }), showErrorList === "bottom" && this.renderErrors(registry));
     };
     return Form;