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

package/dist/core.cjs.development.js

@@ -10,8 +10,8 @@ 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 unset = require('lodash/unset');
 var omit = require('lodash/omit');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,8 +22,8 @@ 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 unset__default = /*#__PURE__*/_interopDefaultLegacy(unset);
 var omit__default = /*#__PURE__*/_interopDefaultLegacy(omit);
 
 function _defineProperties(target, props) {
@@ -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) {
@@ -112,6 +112,20 @@ function _createForOfIteratorHelperLoose(o, allowArrayLike) {
   }
   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"],
@@ -171,42 +185,11 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       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) {
@@ -385,6 +368,42 @@ var ArrayField = /*#__PURE__*/function (_Component) {
   /** 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() {
@@ -453,8 +472,9 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     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;
@@ -468,6 +488,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           key: key,
           index: index,
           name: name && name + "-" + index,
+          canAdd: canAdd,
           canMoveUp: index > 0,
           canMoveDown: index < formData.length - 1,
           itemSchema: itemSchema,
@@ -478,7 +499,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           autofocus: autofocus && index === 0,
           onBlur: onBlur,
           onFocus: onFocus,
-          rawErrors: rawErrors
+          rawErrors: rawErrors,
+          totalItems: keyedFormData.length
         });
       }),
       className: "field field-array field-array-of-" + itemsSchema.type,
@@ -530,7 +552,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,
@@ -586,7 +608,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,
@@ -640,7 +662,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,
@@ -705,8 +727,9 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       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,
@@ -726,6 +749,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           key: key,
           index: index,
           name: name && name + "-" + index,
+          canAdd: canAdd,
           canRemove: additional,
           canMoveUp: index >= itemSchemas.length + 1,
           canMoveDown: additional && index < items.length - 1,
@@ -737,7 +761,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
           autofocus: autofocus && index === 0,
           onBlur: onBlur,
           onFocus: onFocus,
-          rawErrors: rawErrors
+          rawErrors: rawErrors,
+          totalItems: keyedFormData.length
         });
       }),
       onAddClick: this.onAddClick,
@@ -762,6 +787,7 @@ var ArrayField = /*#__PURE__*/function (_Component) {
     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,
@@ -776,7 +802,8 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       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,
@@ -829,11 +856,13 @@ var ArrayField = /*#__PURE__*/function (_Component) {
       }),
       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,
@@ -926,7 +955,7 @@ function BooleanField(props) {
     }),
     schema: schema,
     uiSchema: uiSchema,
-    id: idSchema && idSchema.$id,
+    id: idSchema.$id,
     onChange: onChange,
     onFocus: onFocus,
     onBlur: onBlur,
@@ -978,7 +1007,7 @@ var AnyOfField = /*#__PURE__*/function (_Component) {
           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);
               }
             }
@@ -1276,7 +1305,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;
@@ -1587,10 +1616,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,
@@ -1647,7 +1676,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,
@@ -1670,6 +1699,7 @@ function SchemaFieldRender(props) {
     hideError: hideError,
     displayLabel: displayLabel,
     classNames: classNames.join(" ").trim(),
+    style: uiOptions.style,
     formContext: formContext,
     formData: formData,
     schema: schema,
@@ -1786,7 +1816,7 @@ function StringField(props) {
     }),
     schema: schema,
     uiSchema: uiSchema,
-    id: idSchema && idSchema.$id,
+    id: idSchema.$id,
     label: title === undefined ? name : title,
     value: formData,
     onChange: onChange,
@@ -1852,9 +1882,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,
@@ -1906,17 +1935,20 @@ function ArrayFieldItemTemplate(props) {
     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
   }))));
 }
 
@@ -1972,7 +2004,8 @@ function ArrayFieldTemplate(props) {
     className: "array-item-add",
     onClick: onAddClick,
     disabled: disabled || readonly,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }));
 }
 
@@ -1995,9 +2028,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,
@@ -2060,13 +2092,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,
@@ -2094,7 +2127,7 @@ function SubmitButton(_ref) {
   }), 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,
@@ -2139,7 +2172,8 @@ function RemoveButton(props) {
 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", {
@@ -2150,7 +2184,8 @@ function AddButton(_ref) {
     className: "btn-add col-xs-12",
     title: "Add",
     onClick: onClick,
-    disabled: disabled
+    disabled: disabled,
+    registry: registry
   })));
 }
 
@@ -2271,7 +2306,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"
@@ -2295,7 +2330,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,
@@ -2335,14 +2370,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,
@@ -2353,7 +2388,8 @@ function ObjectFieldTemplate(props) {
     className: "object-property-expand",
     onClick: onAddClick(schema),
     disabled: disabled || readonly,
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }));
 }
 
@@ -2395,6 +2431,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,
@@ -2411,11 +2448,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", {
@@ -2445,7 +2484,8 @@ function WrapIfAdditionalTemplate(props) {
     },
     disabled: disabled || readonly,
     onClick: onDropPropertyClick(label),
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }))));
 }
 
@@ -2558,7 +2598,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.
@@ -2696,7 +2737,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,
@@ -2711,24 +2752,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.
  *
@@ -2747,32 +2775,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,
@@ -2968,7 +2994,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
   }));
@@ -3045,7 +3072,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,
@@ -3054,7 +3081,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,
@@ -3140,7 +3168,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) {
@@ -3198,7 +3227,8 @@ function TextareaWidget(_ref) {
     rows: options.rows,
     onBlur: handleBlur,
     onFocus: handleFocus,
-    onChange: handleChange
+    onChange: handleChange,
+    "aria-describedby": utils.ariaDescribedByIds(id)
   });
 }
 TextareaWidget.defaultProps = {
@@ -3583,9 +3613,10 @@ var Form = /*#__PURE__*/function (_Component) {
     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) {
@@ -3754,7 +3785,8 @@ var Form = /*#__PURE__*/function (_Component) {
       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;