@rjsf/antd 5.0.0-beta.2 → 5.0.0-beta.20

package/dist/antd.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react'), require('antd/lib/button'), require('antd/lib/col'), require('antd/lib/row'), require('@rjsf/utils'), require('classnames'), require('antd/lib/config-provider/context'), require('antd/lib/input'), require('antd/lib/input-number'), require('antd/lib/alert'), require('antd/lib/list'), require('antd/lib/space'), require('@ant-design/icons/ExclamationCircleOutlined'), require('@ant-design/icons/ArrowDownOutlined'), require('@ant-design/icons/ArrowUpOutlined'), require('@ant-design/icons/DeleteOutlined'), require('@ant-design/icons/PlusCircleOutlined'), require('antd/lib/form'), require('lodash-es/isObject'), require('lodash-es/isNumber'), require('antd/lib/checkbox'), require('dayjs'), require('rc-picker/lib/generate/dayjs'), require('antd/lib/date-picker/generatePicker'), require('antd/lib/radio'), require('antd/lib/slider'), require('antd/lib/select')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react', 'antd/lib/button', 'antd/lib/col', 'antd/lib/row', '@rjsf/utils', 'classnames', 'antd/lib/config-provider/context', 'antd/lib/input', 'antd/lib/input-number', 'antd/lib/alert', 'antd/lib/list', 'antd/lib/space', '@ant-design/icons/ExclamationCircleOutlined', '@ant-design/icons/ArrowDownOutlined', '@ant-design/icons/ArrowUpOutlined', '@ant-design/icons/DeleteOutlined', '@ant-design/icons/PlusCircleOutlined', 'antd/lib/form', 'lodash-es/isObject', 'lodash-es/isNumber', 'antd/lib/checkbox', 'dayjs', 'rc-picker/lib/generate/dayjs', 'antd/lib/date-picker/generatePicker', 'antd/lib/radio', 'antd/lib/slider', 'antd/lib/select'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/antd"] = {}, global.core, global.React, global.Button, global.Col, global.Row, global.utils, global.classNames, global.context, global.Input, global.InputNumber, global.Alert, global.List, global.Space, global.ExclamationCircleOutlined, global.ArrowDownOutlined, global.ArrowUpOutlined, global.DeleteOutlined, global.PlusCircleOutlined, global.Form$1, global.isObject, global.isNumber, global.Checkbox, global.dayjs, global.dayjsGenerateConfig, global.generatePicker, global.Radio, global.Slider, global.Select));
-})(this, (function (exports, core, React, Button, Col, Row, utils, classNames, context, Input, InputNumber, Alert, List, Space, ExclamationCircleOutlined, ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusCircleOutlined, Form$1, isObject, isNumber, Checkbox, dayjs, dayjsGenerateConfig, generatePicker, Radio, Slider, Select) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react'), require('antd/lib/button'), require('antd/lib/col'), require('antd/lib/row'), require('@rjsf/utils'), require('classnames'), require('antd/lib/config-provider/context'), require('antd/lib/input'), require('antd/lib/input-number'), require('antd/lib/alert'), require('antd/lib/list'), require('antd/lib/space'), require('@ant-design/icons/ExclamationCircleOutlined'), require('@ant-design/icons/ArrowDownOutlined'), require('@ant-design/icons/ArrowUpOutlined'), require('@ant-design/icons/DeleteOutlined'), require('@ant-design/icons/PlusCircleOutlined'), require('antd/lib/form'), require('lodash-es/isObject'), require('lodash-es/isNumber'), require('lodash-es/isString'), require('antd/lib/checkbox'), require('dayjs'), require('rc-picker/lib/generate/dayjs'), require('antd/lib/date-picker/generatePicker'), require('antd/lib/radio'), require('antd/lib/slider'), require('antd/lib/select')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react', 'antd/lib/button', 'antd/lib/col', 'antd/lib/row', '@rjsf/utils', 'classnames', 'antd/lib/config-provider/context', 'antd/lib/input', 'antd/lib/input-number', 'antd/lib/alert', 'antd/lib/list', 'antd/lib/space', '@ant-design/icons/ExclamationCircleOutlined', '@ant-design/icons/ArrowDownOutlined', '@ant-design/icons/ArrowUpOutlined', '@ant-design/icons/DeleteOutlined', '@ant-design/icons/PlusCircleOutlined', 'antd/lib/form', 'lodash-es/isObject', 'lodash-es/isNumber', 'lodash-es/isString', 'antd/lib/checkbox', 'dayjs', 'rc-picker/lib/generate/dayjs', 'antd/lib/date-picker/generatePicker', 'antd/lib/radio', 'antd/lib/slider', 'antd/lib/select'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/antd"] = {}, global.core, global.React, global.Button, global.Col, global.Row, global.utils, global.classNames, global.context, global.Input, global.InputNumber, global.Alert, global.List, global.Space, global.ExclamationCircleOutlined, global.ArrowDownOutlined, global.ArrowUpOutlined, global.DeleteOutlined, global.PlusCircleOutlined, global.Form$1, global.isObject, global.isNumber, global.isString, global.Checkbox, global.dayjs, global.dayjsGenerateConfig, global.generatePicker, global.Radio, global.Slider, global.Select));
+})(this, (function (exports, core, React, Button, Col, Row, utils, classNames, context, Input, InputNumber, Alert, List, Space, ExclamationCircleOutlined, ArrowDownOutlined, ArrowUpOutlined, DeleteOutlined, PlusCircleOutlined, Form$1, isObject, isNumber, isString, Checkbox, dayjs, dayjsGenerateConfig, generatePicker, Radio, Slider, Select) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -24,6 +24,7 @@
   var Form__default = /*#__PURE__*/_interopDefaultLegacy(Form$1);
   var isObject__default = /*#__PURE__*/_interopDefaultLegacy(isObject);
   var isNumber__default = /*#__PURE__*/_interopDefaultLegacy(isNumber);
+  var isString__default = /*#__PURE__*/_interopDefaultLegacy(isString);
   var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
   var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
   var dayjsGenerateConfig__default = /*#__PURE__*/_interopDefaultLegacy(dayjsGenerateConfig);
@@ -32,37 +33,38 @@
   var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
   var Select__default = /*#__PURE__*/_interopDefaultLegacy(Select);
 
-  const BTN_GRP_STYLE = {
+  var BTN_GRP_STYLE = {
     width: "100%"
   };
-  const BTN_STYLE = {
+  var BTN_STYLE = {
     width: "calc(100% / 3)"
   };
-
-  const ArrayFieldItemTemplate = _ref => {
-    let {
-      children,
-      disabled,
-      formContext,
-      hasMoveDown,
-      hasMoveUp,
-      hasRemove,
-      hasToolbar,
-      index,
-      onDropIndexClick,
-      onReorderClick,
-      readonly,
-      registry
-    } = _ref;
-    const {
-      MoveDownButton,
-      MoveUpButton,
-      RemoveButton
-    } = registry.templates.ButtonTemplates;
-    const {
-      rowGutter = 24,
-      toolbarAlign = "top"
-    } = formContext;
+  /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+   *
+   * @param props - The `ArrayFieldTemplateItemType` props for the component
+   */
+  function ArrayFieldItemTemplate(props) {
+    var children = props.children,
+      disabled = props.disabled,
+      hasMoveDown = props.hasMoveDown,
+      hasMoveUp = props.hasMoveUp,
+      hasRemove = props.hasRemove,
+      hasToolbar = props.hasToolbar,
+      index = props.index,
+      onDropIndexClick = props.onDropIndexClick,
+      onReorderClick = props.onReorderClick,
+      readonly = props.readonly,
+      registry = props.registry,
+      uiSchema = props.uiSchema;
+    var _registry$templates$B = registry.templates.ButtonTemplates,
+      MoveDownButton = _registry$templates$B.MoveDownButton,
+      MoveUpButton = _registry$templates$B.MoveUpButton,
+      RemoveButton = _registry$templates$B.RemoveButton;
+    var _registry$formContext = registry.formContext,
+      _registry$formContext2 = _registry$formContext.rowGutter,
+      rowGutter = _registry$formContext2 === void 0 ? 24 : _registry$formContext2,
+      _registry$formContext3 = _registry$formContext.toolbarAlign,
+      toolbarAlign = _registry$formContext3 === void 0 ? "top" : _registry$formContext3;
     return /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
       align: toolbarAlign,
       key: "array-item-" + index,
@@ -76,174 +78,182 @@
     }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
       disabled: disabled || readonly || !hasMoveUp,
       onClick: onReorderClick(index, index - 1),
-      style: BTN_STYLE
+      style: BTN_STYLE,
+      uiSchema: uiSchema,
+      registry: registry
     }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
       disabled: disabled || readonly || !hasMoveDown,
       onClick: onReorderClick(index, index + 1),
-      style: BTN_STYLE
+      style: BTN_STYLE,
+      uiSchema: uiSchema,
+      registry: registry
     }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
       disabled: disabled || readonly,
       onClick: onDropIndexClick(index),
-      style: BTN_STYLE
+      style: BTN_STYLE,
+      uiSchema: uiSchema,
+      registry: registry
     }))));
-  };
-
-  ArrayFieldItemTemplate.defaultProps = {
-    formContext: {}
-  };
+  }
 
   function _extends() {
     _extends = Object.assign ? Object.assign.bind() : function (target) {
       for (var i = 1; i < arguments.length; i++) {
         var source = arguments[i];
-
         for (var key in source) {
           if (Object.prototype.hasOwnProperty.call(source, key)) {
             target[key] = source[key];
           }
         }
       }
-
       return target;
     };
     return _extends.apply(this, arguments);
   }
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
 
-  const DESCRIPTION_COL_STYLE$1 = {
+  var _excluded$1 = ["key"];
+  var DESCRIPTION_COL_STYLE$1 = {
     paddingBottom: "8px"
   };
+  /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+   *
+   * @param props - The `ArrayFieldTemplateItemType` props for the component
+   */
+  function ArrayFieldTemplate(props) {
+    var canAdd = props.canAdd,
+      className = props.className,
+      disabled = props.disabled,
+      formContext = props.formContext,
+      idSchema = props.idSchema,
+      items = props.items,
+      onAddClick = props.onAddClick,
+      readonly = props.readonly,
+      registry = props.registry,
+      required = props.required,
+      schema = props.schema,
+      title = props.title,
+      uiSchema = props.uiSchema;
+    var uiOptions = utils.getUiOptions(uiSchema);
+    var ArrayFieldDescriptionTemplate = utils.getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
+    var ArrayFieldItemTemplate = utils.getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
+    var ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+    // Button templates are not overridden in the uiSchema
+    var AddButton = registry.templates.ButtonTemplates.AddButton;
+    var _formContext$labelAli = formContext.labelAlign,
+      labelAlign = _formContext$labelAli === void 0 ? "right" : _formContext$labelAli,
+      _formContext$rowGutte = formContext.rowGutter,
+      rowGutter = _formContext$rowGutte === void 0 ? 24 : _formContext$rowGutte;
+    return /*#__PURE__*/React__default["default"].createElement(context.ConfigConsumer, null, function (configProps) {
+      var getPrefixCls = configProps.getPrefixCls;
+      var prefixCls = getPrefixCls("form");
+      var labelClsBasic = prefixCls + "-item-label";
+      var labelColClassName = classNames__default["default"](labelClsBasic, labelAlign === "left" && labelClsBasic + "-left"
+      // labelCol.className,
+      );
+
+      return /*#__PURE__*/React__default["default"].createElement("fieldset", {
+        className: className,
+        id: idSchema.$id
+      }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
+        gutter: rowGutter
+      }, (uiOptions.title || title) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        className: labelColClassName,
+        span: 24
+      }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldTitleTemplate, {
+        idSchema: idSchema,
+        required: required,
+        title: uiOptions.title || title,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry
+      })), (uiOptions.description || schema.description) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        span: 24,
+        style: DESCRIPTION_COL_STYLE$1
+      }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
+        description: uiOptions.description || schema.description || "",
+        idSchema: idSchema,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry
+      })), /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        className: "row array-item-list",
+        span: 24
+      }, items && items.map(function (_ref) {
+        var key = _ref.key,
+          itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+        return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
+          key: key
+        }, itemProps));
+      })), canAdd && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        span: 24
+      }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
+        gutter: rowGutter,
+        justify: "end"
+      }, /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        flex: "192px"
+      }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
+        className: "array-item-add",
+        disabled: disabled || readonly,
+        onClick: onAddClick,
+        uiSchema: uiSchema,
+        registry: registry
+      }))))));
+    });
+  }
 
-  const ArrayFieldTemplate = _ref => {
-    let {
-      canAdd,
-      className,
-      disabled,
-      formContext,
-      // formData,
-      idSchema,
-      items,
-      onAddClick,
-      prefixCls,
-      readonly,
-      registry,
-      required,
-      schema,
-      title,
-      uiSchema
-    } = _ref;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const ArrayFieldDescriptionTemplate = utils.getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
-    const ArrayFieldItemTemplate = utils.getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-    const ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
-
-    const {
-      ButtonTemplates: {
-        AddButton
-      }
-    } = registry.templates;
-    const {
-      labelAlign = "right",
-      rowGutter = 24
-    } = formContext;
-    const labelClsBasic = prefixCls + "-item-label";
-    const labelColClassName = classNames__default["default"](labelClsBasic, labelAlign === "left" && labelClsBasic + "-left" // labelCol.className,
-    );
-    return /*#__PURE__*/React__default["default"].createElement("fieldset", {
-      className: className,
-      id: idSchema.$id
-    }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
-      gutter: rowGutter
-    }, (uiOptions.title || title) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      className: labelColClassName,
-      span: 24
-    }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldTitleTemplate, {
-      idSchema: idSchema,
-      required: required,
-      title: uiOptions.title || title,
-      uiSchema: uiSchema,
-      registry: registry
-    })), (uiOptions.description || schema.description) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      span: 24,
-      style: DESCRIPTION_COL_STYLE$1
-    }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
-      description: uiOptions.description || schema.description,
-      idSchema: idSchema,
-      uiSchema: uiSchema,
-      registry: registry
-    })), /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      className: "row array-item-list",
-      span: 24
-    }, items && items.map(itemProps => /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({}, itemProps, {
-      formContext: formContext
-    })))), canAdd && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      span: 24
-    }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
-      gutter: rowGutter,
-      justify: "end"
-    }, /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      flex: "192px"
-    }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
-      className: "array-item-add",
-      disabled: disabled || readonly,
-      onClick: onAddClick
-    }))))));
-  };
-
-  var ArrayFieldTemplate$1 = /*#__PURE__*/context.withConfigConsumer({
-    prefixCls: "form"
-  })(ArrayFieldTemplate);
-
-  const INPUT_STYLE$2 = {
+  var INPUT_STYLE$2 = {
     width: "100%"
   };
-
-  const TextWidget = _ref => {
-    let {
-      // autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      placeholder,
-      readonly,
-      // required,
-      schema,
-      value,
-      type
-    } = _ref;
-    const inputProps = utils.getInputProps(schema, type, options, false);
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-
-    const handleNumberChange = nextValue => onChange(nextValue);
-
-    const handleTextChange = _ref2 => {
-      let {
-        target
-      } = _ref2;
+  /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
+   * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
+   * It can be customized/overridden for other themes or individual implementations as needed.
+   *
+   * @param props - The `WidgetProps` for this template
+   */
+  function BaseInputTemplate(props) {
+    var disabled = props.disabled,
+      formContext = props.formContext,
+      id = props.id,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      options = props.options,
+      placeholder = props.placeholder,
+      readonly = props.readonly,
+      schema = props.schema,
+      value = props.value,
+      type = props.type;
+    var inputProps = utils.getInputProps(schema, type, options, false);
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var handleNumberChange = function handleNumberChange(nextValue) {
+      return onChange(nextValue);
+    };
+    var handleTextChange = function handleTextChange(_ref) {
+      var target = _ref.target;
       return onChange(target.value === "" ? options.emptyValue : target.value);
     };
-
-    const handleBlur = _ref3 => {
-      let {
-        target
-      } = _ref3;
+    var handleBlur = function handleBlur(_ref2) {
+      var target = _ref2.target;
       return onBlur(id, target.value);
     };
-
-    const handleFocus = _ref4 => {
-      let {
-        target
-      } = _ref4;
+    var handleFocus = function handleFocus(_ref3) {
+      var target = _ref3.target;
       return onFocus(id, target.value);
     };
-
-    return inputProps.type === "number" || inputProps.type === "integer" ? /*#__PURE__*/React__default["default"].createElement(InputNumber__default["default"], _extends({
+    var input = inputProps.type === "number" || inputProps.type === "integer" ? /*#__PURE__*/React__default["default"].createElement(InputNumber__default["default"], _extends({
       disabled: disabled || readonlyAsDisabled && readonly,
       id: id,
       name: id,
@@ -251,9 +261,11 @@
       onChange: !readonly ? handleNumberChange : undefined,
       onFocus: !readonly ? handleFocus : undefined,
       placeholder: placeholder,
-      style: INPUT_STYLE$2
+      style: INPUT_STYLE$2,
+      list: schema.examples ? utils.examplesId(id) : undefined
     }, inputProps, {
-      value: value
+      value: value,
+      "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
     })) : /*#__PURE__*/React__default["default"].createElement(Input__default["default"], _extends({
       disabled: disabled || readonlyAsDisabled && readonly,
       id: id,
@@ -262,53 +274,67 @@
       onChange: !readonly ? handleTextChange : undefined,
       onFocus: !readonly ? handleFocus : undefined,
       placeholder: placeholder,
-      style: INPUT_STYLE$2
+      style: INPUT_STYLE$2,
+      list: schema.examples ? utils.examplesId(id) : undefined
     }, inputProps, {
-      value: value
+      value: value,
+      "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
     }));
-  };
-
-  const DescriptionField = _ref => {
-    let {
-      description,
-      id // registry,
+    return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, input, Array.isArray(schema.examples) && /*#__PURE__*/React__default["default"].createElement("datalist", {
+      id: utils.examplesId(id)
+    }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
+      return /*#__PURE__*/React__default["default"].createElement("option", {
+        key: example,
+        value: example
+      });
+    })));
+  }
 
-    } = _ref;
+  /** The `DescriptionField` is the template to use to render the description of a field
+   *
+   * @param props - The `DescriptionFieldProps` for this component
+   */
+  function DescriptionField(props) {
+    var id = props.id,
+      description = props.description;
+    if (!description) {
+      return null;
+    }
     return /*#__PURE__*/React__default["default"].createElement("span", {
       id: id
     }, description);
-  };
-
-  const ErrorList = _ref => {
-    let {
-      // errorSchema,
-      errors // formContext,
-      // schema,
-      // uiSchema,
-
-    } = _ref;
-
-    const renderErrors = () => /*#__PURE__*/React__default["default"].createElement(List__default["default"], {
-      className: "list-group",
-      size: "small"
-    }, errors.map((error, index) => /*#__PURE__*/React__default["default"].createElement(List__default["default"].Item, {
-      key: index
-    }, /*#__PURE__*/React__default["default"].createElement(Space__default["default"], null, /*#__PURE__*/React__default["default"].createElement(ExclamationCircleOutlined__default["default"], null), error.stack))));
+  }
 
+  /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+   *
+   * @param props - The `ErrorListProps` for this component
+   */
+  function ErrorList(_ref) {
+    var errors = _ref.errors;
+    var renderErrors = function renderErrors() {
+      return /*#__PURE__*/React__default["default"].createElement(List__default["default"], {
+        className: "list-group",
+        size: "small"
+      }, errors.map(function (error, index) {
+        return /*#__PURE__*/React__default["default"].createElement(List__default["default"].Item, {
+          key: index
+        }, /*#__PURE__*/React__default["default"].createElement(Space__default["default"], null, /*#__PURE__*/React__default["default"].createElement(ExclamationCircleOutlined__default["default"], null), error.stack));
+      }));
+    };
     return /*#__PURE__*/React__default["default"].createElement(Alert__default["default"], {
       className: "panel panel-danger errors",
       description: renderErrors(),
       message: "Errors",
       type: "error"
     });
-  };
+  }
 
+  var _excluded = ["iconType", "icon", "uiSchema", "registry"];
   function IconButton(props) {
-    const {
-      iconType = "default",
-      icon,
-      ...otherProps
-    } = props;
+    var _props$iconType = props.iconType,
+      iconType = _props$iconType === void 0 ? "default" : _props$iconType,
+      icon = props.icon,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
     return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], _extends({
       type: iconType,
       icon: icon
@@ -338,162 +364,90 @@
     }));
   }
   function RemoveButton(props) {
+    // The `block` prop is not part of the `IconButtonProps` defined in the template, so get it from the uiSchema instead
+    var options = utils.getUiOptions(props.uiSchema);
     return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
       title: "Remove"
     }, props, {
       danger: true,
+      block: !!options.block,
       iconType: "primary",
       icon: /*#__PURE__*/React__default["default"].createElement(DeleteOutlined__default["default"], null)
     }));
   }
 
-  const VERTICAL_LABEL_COL$1 = {
-    span: 24
-  };
-  const VERTICAL_WRAPPER_COL$1 = {
-    span: 24
-  };
-  const INPUT_STYLE$1 = {
-    width: "100%"
-  };
-
-  const WrapIfAdditional = _ref => {
-    let {
-      children,
-      classNames,
-      disabled,
-      formContext,
-      id,
-      label,
-      onDropPropertyClick,
-      onKeyChange,
-      readonly,
-      required,
-      registry,
-      schema
-    } = _ref;
-    const {
-      colon,
-      labelCol = VERTICAL_LABEL_COL$1,
-      readonlyAsDisabled = true,
-      rowGutter = 24,
-      toolbarAlign = "top",
-      wrapperCol = VERTICAL_WRAPPER_COL$1,
-      wrapperStyle
-    } = formContext;
-    const {
-      RemoveButton
-    } = registry.templates.ButtonTemplates;
-    const keyLabel = label + " Key"; // i18n ?
-
-    const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-
-    if (!additional) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classNames
-      }, children);
+  /** The `FieldErrorTemplate` component renders the errors local to the particular field
+   *
+   * @param props - The `FieldErrorProps` for the errors being rendered
+   */
+  function FieldErrorTemplate(props) {
+    var _props$errors = props.errors,
+      errors = _props$errors === void 0 ? [] : _props$errors,
+      idSchema = props.idSchema;
+    if (errors.length === 0) {
+      return null;
     }
-
-    const handleBlur = _ref2 => {
-      let {
-        target
-      } = _ref2;
-      return onKeyChange(target.value);
-    };
-
+    var id = utils.errorId(idSchema);
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames
-    }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
-      align: toolbarAlign,
-      gutter: rowGutter
-    }, /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      className: "form-additional",
-      flex: "1"
-    }, /*#__PURE__*/React__default["default"].createElement("div", {
-      className: "form-group"
-    }, /*#__PURE__*/React__default["default"].createElement(Form__default["default"].Item, {
-      colon: colon,
-      className: "form-group",
-      hasFeedback: true,
-      htmlFor: id + "-key",
-      label: keyLabel,
-      labelCol: labelCol,
-      required: required,
-      style: wrapperStyle,
-      wrapperCol: wrapperCol
-    }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
-      className: "form-control",
-      defaultValue: label,
-      disabled: disabled || readonlyAsDisabled && readonly,
-      id: id + "-key",
-      name: id + "-key",
-      onBlur: !readonly ? handleBlur : undefined,
-      style: INPUT_STYLE$1,
-      type: "text"
-    })))), /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      className: "form-additional",
-      flex: "1"
-    }, children), /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      flex: "192px"
-    }, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-      block: true,
-      className: "array-item-remove",
-      disabled: disabled || readonly,
-      onClick: onDropPropertyClick(label)
-    }))));
-  };
+      id: id
+    }, errors.map(function (error) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        key: "field-" + id + "-error-" + error
+      }, error);
+    }));
+  }
 
-  const VERTICAL_LABEL_COL = {
+  var VERTICAL_LABEL_COL$1 = {
     span: 24
   };
-  const VERTICAL_WRAPPER_COL = {
+  var VERTICAL_WRAPPER_COL$1 = {
     span: 24
   };
-
-  const FieldTemplate = _ref => {
-    let {
-      children,
-      classNames,
-      description,
-      disabled,
-      displayLabel,
-      // errors,
-      formContext,
-      help,
-      hidden,
-      id,
-      label,
-      onDropPropertyClick,
-      onKeyChange,
-      rawErrors,
-      rawHelp,
-      readonly,
-      registry,
-      required,
-      schema // uiSchema,
-
-    } = _ref;
-    const {
-      colon,
-      labelCol = VERTICAL_LABEL_COL,
-      wrapperCol = VERTICAL_WRAPPER_COL,
-      wrapperStyle
-    } = formContext;
-
+  /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+   * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+   *
+   * @param props - The `FieldTemplateProps` for this component
+   */
+  function FieldTemplate(props) {
+    var children = props.children,
+      classNames = props.classNames,
+      style = props.style,
+      description = props.description,
+      disabled = props.disabled,
+      displayLabel = props.displayLabel,
+      errors = props.errors,
+      formContext = props.formContext,
+      help = props.help,
+      hidden = props.hidden,
+      id = props.id,
+      label = props.label,
+      onDropPropertyClick = props.onDropPropertyClick,
+      onKeyChange = props.onKeyChange,
+      rawErrors = props.rawErrors,
+      rawDescription = props.rawDescription,
+      rawHelp = props.rawHelp,
+      readonly = props.readonly,
+      registry = props.registry,
+      required = props.required,
+      schema = props.schema,
+      uiSchema = props.uiSchema;
+    var colon = formContext.colon,
+      _formContext$labelCol = formContext.labelCol,
+      labelCol = _formContext$labelCol === void 0 ? VERTICAL_LABEL_COL$1 : _formContext$labelCol,
+      _formContext$wrapperC = formContext.wrapperCol,
+      wrapperCol = _formContext$wrapperC === void 0 ? VERTICAL_WRAPPER_COL$1 : _formContext$wrapperC,
+      wrapperStyle = formContext.wrapperStyle;
+    var uiOptions = utils.getUiOptions(uiSchema);
+    var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
     if (hidden) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "field-hidden"
       }, children);
     }
-
-    const renderFieldErrors = () => [...new Set(rawErrors)].map(error => /*#__PURE__*/React__default["default"].createElement("div", {
-      key: "field-" + id + "-error-" + error
-    }, error));
-
-    return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditional, {
+    return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, {
       classNames: classNames,
+      style: style,
       disabled: disabled,
-      formContext: formContext,
       id: id,
       label: label,
       onDropPropertyClick: onDropPropertyClick,
@@ -501,360 +455,484 @@
       readonly: readonly,
       required: required,
       schema: schema,
+      uiSchema: uiSchema,
       registry: registry
     }, id === "root" ? children : /*#__PURE__*/React__default["default"].createElement(Form__default["default"].Item, {
       colon: colon,
-      extra: description,
+      extra: rawDescription && description,
       hasFeedback: schema.type !== "array" && schema.type !== "object",
-      help: !!rawHelp && help || !!rawErrors && renderFieldErrors(),
+      help: !!rawHelp && help || (rawErrors !== null && rawErrors !== void 0 && rawErrors.length ? errors : undefined),
       htmlFor: id,
       label: displayLabel && label,
       labelCol: labelCol,
       required: required,
       style: wrapperStyle,
-      validateStatus: rawErrors ? "error" : undefined,
+      validateStatus: rawErrors !== null && rawErrors !== void 0 && rawErrors.length ? "error" : undefined,
       wrapperCol: wrapperCol
     }, children));
-  };
+  }
 
-  const DESCRIPTION_COL_STYLE = {
+  var DESCRIPTION_COL_STYLE = {
     paddingBottom: "8px"
   };
-
-  const ObjectFieldTemplate = _ref => {
-    let {
-      description,
-      disabled,
-      formContext,
-      formData,
-      idSchema,
-      onAddClick,
-      prefixCls,
-      properties,
-      readonly,
-      required,
-      registry,
-      schema,
-      title,
-      uiSchema
-    } = _ref;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
-    const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
-
-    const {
-      ButtonTemplates: {
-        AddButton
-      }
-    } = registry.templates;
-    const {
-      colSpan = 24,
-      labelAlign = "right",
-      rowGutter = 24
-    } = formContext;
-    const labelClsBasic = prefixCls + "-item-label";
-    const labelColClassName = classNames__default["default"](labelClsBasic, labelAlign === "left" && labelClsBasic + "-left" // labelCol.className,
-    );
-
-    const findSchema = element => element.content.props.schema;
-
-    const findSchemaType = element => findSchema(element).type;
-
-    const findUiSchema = element => element.content.props.uiSchema;
-
-    const findUiSchemaField = element => utils.getUiOptions(findUiSchema(element)).field;
-
-    const findUiSchemaWidget = element => utils.getUiOptions(findUiSchema(element)).widget;
-
-    const calculateColSpan = element => {
-      const type = findSchemaType(element);
-      const field = findUiSchemaField(element);
-      const widget = findUiSchemaWidget(element);
-      const defaultColSpan = properties.length < 2 || // Single or no field in object.
+  /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
+   * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
+   * the properties.
+   *
+   * @param props - The `ObjectFieldTemplateProps` for this component
+   */
+  function ObjectFieldTemplate(props) {
+    var description = props.description,
+      disabled = props.disabled,
+      formContext = props.formContext,
+      formData = props.formData,
+      idSchema = props.idSchema,
+      onAddClick = props.onAddClick,
+      properties = props.properties,
+      readonly = props.readonly,
+      required = props.required,
+      registry = props.registry,
+      schema = props.schema,
+      title = props.title,
+      uiSchema = props.uiSchema;
+    var uiOptions = utils.getUiOptions(uiSchema);
+    var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
+    var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+    // Button templates are not overridden in the uiSchema
+    var AddButton = registry.templates.ButtonTemplates.AddButton;
+    var _formContext$colSpan = formContext.colSpan,
+      colSpan = _formContext$colSpan === void 0 ? 24 : _formContext$colSpan,
+      _formContext$labelAli = formContext.labelAlign,
+      labelAlign = _formContext$labelAli === void 0 ? "right" : _formContext$labelAli,
+      _formContext$rowGutte = formContext.rowGutter,
+      rowGutter = _formContext$rowGutte === void 0 ? 24 : _formContext$rowGutte;
+    var findSchema = function findSchema(element) {
+      return element.content.props.schema;
+    };
+    var findSchemaType = function findSchemaType(element) {
+      return findSchema(element).type;
+    };
+    var findUiSchema = function findUiSchema(element) {
+      return element.content.props.uiSchema;
+    };
+    var findUiSchemaField = function findUiSchemaField(element) {
+      return utils.getUiOptions(findUiSchema(element)).field;
+    };
+    var findUiSchemaWidget = function findUiSchemaWidget(element) {
+      return utils.getUiOptions(findUiSchema(element)).widget;
+    };
+    var calculateColSpan = function calculateColSpan(element) {
+      var type = findSchemaType(element);
+      var field = findUiSchemaField(element);
+      var widget = findUiSchemaWidget(element);
+      var defaultColSpan = properties.length < 2 ||
+      // Single or no field in object.
       type === "object" || type === "array" || widget === "textarea" ? 24 : 12;
-
       if (isObject__default["default"](colSpan)) {
-        return colSpan[widget] || colSpan[field] || colSpan[type] || defaultColSpan;
+        var colSpanObj = colSpan;
+        if (isString__default["default"](widget)) {
+          return colSpanObj[widget];
+        }
+        if (isString__default["default"](field)) {
+          return colSpanObj[field];
+        }
+        if (isString__default["default"](type)) {
+          return colSpanObj[type];
+        }
       }
-
       if (isNumber__default["default"](colSpan)) {
         return colSpan;
       }
-
       return defaultColSpan;
     };
+    return /*#__PURE__*/React__default["default"].createElement(context.ConfigConsumer, null, function (configProps) {
+      var getPrefixCls = configProps.getPrefixCls;
+      var prefixCls = getPrefixCls("form");
+      var labelClsBasic = prefixCls + "-item-label";
+      var labelColClassName = classNames__default["default"](labelClsBasic, labelAlign === "left" && labelClsBasic + "-left"
+      // labelCol.className,
+      );
+
+      return /*#__PURE__*/React__default["default"].createElement("fieldset", {
+        id: idSchema.$id
+      }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
+        gutter: rowGutter
+      }, (uiOptions.title || title) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        className: labelColClassName,
+        span: 24
+      }, /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
+        id: utils.titleId(idSchema),
+        title: uiOptions.title || title,
+        required: required,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry
+      })), (uiOptions.description || description) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        span: 24,
+        style: DESCRIPTION_COL_STYLE
+      }, /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
+        id: utils.descriptionId(idSchema),
+        description: uiOptions.description || description,
+        schema: schema,
+        uiSchema: uiSchema,
+        registry: registry
+      })), properties.filter(function (e) {
+        return !e.hidden;
+      }).map(function (element) {
+        return /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+          key: element.name,
+          span: calculateColSpan(element)
+        }, element.content);
+      })), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        span: 24
+      }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
+        gutter: rowGutter,
+        justify: "end"
+      }, /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+        flex: "192px"
+      }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
+        className: "object-property-expand",
+        disabled: disabled || readonly,
+        onClick: onAddClick(schema),
+        uiSchema: uiSchema,
+        registry: registry
+      })))));
+    });
+  }
 
-    return /*#__PURE__*/React__default["default"].createElement("fieldset", {
-      id: idSchema.$id
-    }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
-      gutter: rowGutter
-    }, uiOptions.title !== false && (uiOptions.title || title) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      className: labelColClassName,
-      span: 24
-    }, /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-      id: idSchema.$id + "-title",
-      required: required,
-      title: uiOptions.title || title,
-      uiSchema: uiSchema,
-      registry: registry
-    })), uiOptions.description !== false && (uiOptions.description || description) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      span: 24,
-      style: DESCRIPTION_COL_STYLE
-    }, /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-      description: uiOptions.description || description,
-      id: idSchema.$id + "-description",
-      registry: registry
-    })), properties.filter(e => !e.hidden).map(element => /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      key: element.name,
-      span: calculateColSpan(element)
-    }, element.content))), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      span: 24
-    }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
-      gutter: rowGutter,
-      justify: "end"
-    }, /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
-      flex: "192px"
-    }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
-      className: "object-property-expand",
-      disabled: disabled || readonly,
-      onClick: onAddClick(schema)
-    })))));
-  };
-
-  var ObjectFieldTemplate$1 = /*#__PURE__*/context.withConfigConsumer({
-    prefixCls: "form"
-  })(ObjectFieldTemplate);
-
-  var SubmitButton = (_ref => {
-    let {
-      uiSchema
-    } = _ref;
-    const {
-      submitText,
-      norender,
-      props: submitButtonProps
-    } = utils.getSubmitButtonOptions(uiSchema);
-
+  /** The `SubmitButton` renders a button that represent the `Submit` action on a form
+   */
+  function SubmitButton(_ref) {
+    var uiSchema = _ref.uiSchema;
+    var _getSubmitButtonOptio = utils.getSubmitButtonOptions(uiSchema),
+      submitText = _getSubmitButtonOptio.submitText,
+      norender = _getSubmitButtonOptio.norender,
+      submitButtonProps = _getSubmitButtonOptio.props;
     if (norender) {
       return null;
     }
-
     return /*#__PURE__*/React__default["default"].createElement(Button__default["default"], _extends({
       type: "submit"
     }, submitButtonProps, {
       htmlType: "submit"
     }), submitText);
-  });
-
-  const TitleField = _ref => {
-    let {
-      id,
-      prefixCls,
-      required,
-      registry,
-      title
-    } = _ref;
-    const {
-      formContext
-    } = registry;
-    const {
-      colon = true
-    } = formContext;
-    let labelChildren = title;
+  }
 
+  /** The `TitleField` is the template to use to render the title of a field
+   *
+   * @param props - The `TitleFieldProps` for this component
+   */
+  function TitleField(_ref) {
+    var id = _ref.id,
+      required = _ref.required,
+      registry = _ref.registry,
+      title = _ref.title;
+    var formContext = registry.formContext;
+    var _formContext$colon = formContext.colon,
+      colon = _formContext$colon === void 0 ? true : _formContext$colon;
+    var labelChildren = title;
     if (colon && typeof title === "string" && title.trim() !== "") {
       labelChildren = title.replace(/[：:]\s*$/, "");
     }
-
-    const labelClassName = classNames__default["default"]({
-      [prefixCls + "-item-required"]: required,
-      [prefixCls + "-item-no-colon"]: !colon
-    });
-
-    const handleLabelClick = () => {
+    var handleLabelClick = function handleLabelClick() {
       if (!id) {
         return;
       }
-
-      const control = document.querySelector("[id=\"" + id + "\"]");
-
+      var control = document.querySelector("[id=\"" + id + "\"]");
       if (control && control.focus) {
         control.focus();
       }
     };
+    return title ? /*#__PURE__*/React__default["default"].createElement(context.ConfigConsumer, null, function (configProps) {
+      var _classNames;
+      var getPrefixCls = configProps.getPrefixCls;
+      var prefixCls = getPrefixCls("form");
+      var labelClassName = classNames__default["default"]((_classNames = {}, _classNames[prefixCls + "-item-required"] = required, _classNames[prefixCls + "-item-no-colon"] = !colon, _classNames));
+      return /*#__PURE__*/React__default["default"].createElement("label", {
+        className: labelClassName,
+        htmlFor: id,
+        onClick: handleLabelClick,
+        title: typeof title === "string" ? title : ""
+      }, labelChildren);
+    }) : null;
+  }
 
-    return title ? /*#__PURE__*/React__default["default"].createElement("label", {
-      className: labelClassName,
-      htmlFor: id,
-      onClick: handleLabelClick,
-      title: typeof title === "string" ? title : ""
-    }, labelChildren) : null;
+  var VERTICAL_LABEL_COL = {
+    span: 24
   };
-
-  TitleField.defaultProps = {
-    formContext: {}
+  var VERTICAL_WRAPPER_COL = {
+    span: 24
+  };
+  var INPUT_STYLE$1 = {
+    width: "100%"
   };
-  var TitleField$1 = /*#__PURE__*/context.withConfigConsumer({
-    prefixCls: "form"
-  })(TitleField);
+  /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+   * part of an `additionalProperties` part of a schema.
+   *
+   * @param props - The `WrapIfAdditionalProps` for this component
+   */
+  function WrapIfAdditionalTemplate(props) {
+    var _extends2;
+    var children = props.children,
+      classNames = props.classNames,
+      style = props.style,
+      disabled = props.disabled,
+      id = props.id,
+      label = props.label,
+      onDropPropertyClick = props.onDropPropertyClick,
+      onKeyChange = props.onKeyChange,
+      readonly = props.readonly,
+      required = props.required,
+      registry = props.registry,
+      schema = props.schema,
+      uiSchema = props.uiSchema;
+    var _registry$formContext = registry.formContext,
+      colon = _registry$formContext.colon,
+      _registry$formContext2 = _registry$formContext.labelCol,
+      labelCol = _registry$formContext2 === void 0 ? VERTICAL_LABEL_COL : _registry$formContext2,
+      _registry$formContext3 = _registry$formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _registry$formContext3 === void 0 ? true : _registry$formContext3,
+      _registry$formContext4 = _registry$formContext.rowGutter,
+      rowGutter = _registry$formContext4 === void 0 ? 24 : _registry$formContext4,
+      _registry$formContext5 = _registry$formContext.toolbarAlign,
+      toolbarAlign = _registry$formContext5 === void 0 ? "top" : _registry$formContext5,
+      _registry$formContext6 = _registry$formContext.wrapperCol,
+      wrapperCol = _registry$formContext6 === void 0 ? VERTICAL_WRAPPER_COL : _registry$formContext6,
+      wrapperStyle = _registry$formContext.wrapperStyle;
+    // Button templates are not overridden in the uiSchema
+    var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+    var keyLabel = label + " Key"; // i18n ?
+    var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
+    if (!additional) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classNames,
+        style: style
+      }, children);
+    }
+    var handleBlur = function handleBlur(_ref) {
+      var target = _ref.target;
+      return onKeyChange(target.value);
+    };
+    // The `block` prop is not part of the `IconButtonProps` defined in the template, so put it into the uiSchema instead
+    var uiOptions = uiSchema ? uiSchema[utils.UI_OPTIONS_KEY] : {};
+    var buttonUiOptions = _extends({}, uiSchema, (_extends2 = {}, _extends2[utils.UI_OPTIONS_KEY] = _extends({}, uiOptions, {
+      block: true
+    }), _extends2));
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classNames,
+      style: style
+    }, /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
+      align: toolbarAlign,
+      gutter: rowGutter
+    }, /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+      className: "form-additional",
+      flex: "1"
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      className: "form-group"
+    }, /*#__PURE__*/React__default["default"].createElement(Form__default["default"].Item, {
+      colon: colon,
+      className: "form-group",
+      hasFeedback: true,
+      htmlFor: id + "-key",
+      label: keyLabel,
+      labelCol: labelCol,
+      required: required,
+      style: wrapperStyle,
+      wrapperCol: wrapperCol
+    }, /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
+      className: "form-control",
+      defaultValue: label,
+      disabled: disabled || readonlyAsDisabled && readonly,
+      id: id + "-key",
+      name: id + "-key",
+      onBlur: !readonly ? handleBlur : undefined,
+      style: INPUT_STYLE$1,
+      type: "text"
+    })))), /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+      className: "form-additional",
+      flex: "1"
+    }, children), /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
+      flex: "192px"
+    }, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
+      className: "array-item-remove",
+      disabled: disabled || readonly,
+      onClick: onDropPropertyClick(label),
+      uiSchema: buttonUiOptions,
+      registry: registry
+    }))));
+  }
 
-  const rangeOptions = (start, stop) => {
-    let options = [];
+  function generateTemplates() {
+    return {
+      ArrayFieldItemTemplate: ArrayFieldItemTemplate,
+      ArrayFieldTemplate: ArrayFieldTemplate,
+      BaseInputTemplate: BaseInputTemplate,
+      ButtonTemplates: {
+        AddButton: AddButton,
+        MoveDownButton: MoveDownButton,
+        MoveUpButton: MoveUpButton,
+        RemoveButton: RemoveButton,
+        SubmitButton: SubmitButton
+      },
+      DescriptionFieldTemplate: DescriptionField,
+      ErrorListTemplate: ErrorList,
+      FieldErrorTemplate: FieldErrorTemplate,
+      FieldTemplate: FieldTemplate,
+      ObjectFieldTemplate: ObjectFieldTemplate,
+      TitleFieldTemplate: TitleField,
+      WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
+    };
+  }
+  var index$1 = /*#__PURE__*/generateTemplates();
 
-    for (let i = start; i <= stop; i++) {
+  var rangeOptions = function rangeOptions(start, stop) {
+    var options = [];
+    for (var i = start; i <= stop; i++) {
       options.push({
         value: i,
         label: utils.pad(i, 2)
       });
     }
-
     return options;
   };
-
-  const readyForChange = state => {
-    return Object.keys(state).every(key => typeof state[key] !== "undefined" && state[key] !== -1);
+  var readyForChange = function readyForChange(state) {
+    return Object.values(state).every(function (value) {
+      return value !== -1;
+    });
   };
-
-  const AltDateWidget = _ref => {
-    let {
-      autofocus,
-      disabled,
-      formContext,
-      id,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      readonly,
-      registry,
-      showTime,
-      value
-    } = _ref;
-    const {
-      SelectWidget
-    } = registry.widgets;
-    const {
-      rowGutter = 24
-    } = formContext;
-    const [state, setState] = React.useState(utils.parseDateString(value, showTime));
-    React.useEffect(() => {
+  function dateElementProps(state, time, yearsRange) {
+    if (yearsRange === void 0) {
+      yearsRange = [1900, new Date().getFullYear() + 2];
+    }
+    var year = state.year,
+      month = state.month,
+      day = state.day,
+      hour = state.hour,
+      minute = state.minute,
+      second = state.second;
+    var data = [{
+      type: "year",
+      range: yearsRange,
+      value: year
+    }, {
+      type: "month",
+      range: [1, 12],
+      value: month
+    }, {
+      type: "day",
+      range: [1, 31],
+      value: day
+    }];
+    if (time) {
+      data.push({
+        type: "hour",
+        range: [0, 23],
+        value: hour || -1
+      }, {
+        type: "minute",
+        range: [0, 59],
+        value: minute || -1
+      }, {
+        type: "second",
+        range: [0, 59],
+        value: second || -1
+      });
+    }
+    return data;
+  }
+  function AltDateWidget(props) {
+    var autofocus = props.autofocus,
+      disabled = props.disabled,
+      formContext = props.formContext,
+      id = props.id,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      options = props.options,
+      readonly = props.readonly,
+      registry = props.registry,
+      showTime = props.showTime,
+      value = props.value;
+    var SelectWidget = registry.widgets.SelectWidget;
+    var _formContext$rowGutte = formContext.rowGutter,
+      rowGutter = _formContext$rowGutte === void 0 ? 24 : _formContext$rowGutte;
+    var _useState = React.useState(utils.parseDateString(value, showTime)),
+      state = _useState[0],
+      setState = _useState[1];
+    React.useEffect(function () {
       setState(utils.parseDateString(value, showTime));
     }, [showTime, value]);
-
-    const handleChange = (property, nextValue) => {
-      const nextState = { ...state,
-        [property]: typeof nextValue === "undefined" ? -1 : nextValue
-      };
-
+    var handleChange = function handleChange(property, nextValue) {
+      var _extends2;
+      var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === "undefined" ? -1 : nextValue, _extends2));
       if (readyForChange(nextState)) {
         onChange(utils.toDateString(nextState, showTime));
       } else {
         setState(nextState);
       }
     };
-
-    const handleNow = event => {
+    var handleNow = function handleNow(event) {
       event.preventDefault();
-
       if (disabled || readonly) {
         return;
       }
-
-      const nextState = utils.parseDateString(new Date().toJSON(), showTime);
+      var nextState = utils.parseDateString(new Date().toJSON(), showTime);
       onChange(utils.toDateString(nextState, showTime));
     };
-
-    const handleClear = event => {
+    var handleClear = function handleClear(event) {
       event.preventDefault();
-
       if (disabled || readonly) {
         return;
       }
-
       onChange(undefined);
     };
-
-    const dateElementProps = () => {
-      const {
-        year,
-        month,
-        day,
-        hour,
-        minute,
-        second
-      } = state;
-      const data = [{
-        type: "year",
-        range: options.yearsRange,
-        value: year
-      }, {
-        type: "month",
-        range: [1, 12],
-        value: month
-      }, {
-        type: "day",
-        range: [1, 31],
-        value: day
-      }];
-
-      if (showTime) {
-        data.push({
-          type: "hour",
-          range: [0, 23],
-          value: hour
-        }, {
-          type: "minute",
-          range: [0, 59],
-          value: minute
-        }, {
-          type: "second",
-          range: [0, 59],
-          value: second
-        });
-      }
-
-      return data;
+    var renderDateElement = function renderDateElement(elemProps) {
+      return /*#__PURE__*/React__default["default"].createElement(SelectWidget, {
+        autofocus: elemProps.autofocus,
+        className: "form-control",
+        disabled: elemProps.disabled,
+        id: elemProps.id,
+        name: elemProps.name,
+        onBlur: elemProps.onBlur,
+        onChange: function onChange(elemValue) {
+          return elemProps.select(elemProps.type, elemValue);
+        },
+        onFocus: elemProps.onFocus,
+        options: {
+          enumOptions: rangeOptions(elemProps.range[0], elemProps.range[1])
+        },
+        placeholder: elemProps.type,
+        readonly: elemProps.readonly,
+        schema: {
+          type: "integer"
+        },
+        value: elemProps.value,
+        registry: registry,
+        label: "",
+        "aria-describedby": utils.ariaDescribedByIds(id)
+      });
     };
-
-    const renderDateElement = elemProps => /*#__PURE__*/React__default["default"].createElement(SelectWidget, {
-      autofocus: elemProps.autofocus,
-      className: "form-control",
-      disabled: elemProps.disabled,
-      id: elemProps.id,
-      onBlur: elemProps.onBlur,
-      onChange: elemValue => elemProps.select(elemProps.type, elemValue),
-      onFocus: elemProps.onFocus,
-      options: {
-        enumOptions: rangeOptions(elemProps.range[0], elemProps.range[1])
-      },
-      placeholder: elemProps.type,
-      readonly: elemProps.readonly,
-      schema: {
-        type: "integer"
-      },
-      value: elemProps.value
-    });
-
     return /*#__PURE__*/React__default["default"].createElement(Row__default["default"], {
       gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)]
-    }, dateElementProps().map((elemProps, i) => {
-      const elemId = id + "_" + elemProps.type;
+    }, dateElementProps(state, showTime, options.yearsRange).map(function (elemProps, i) {
+      var elemId = id + "_" + elemProps.type;
       return /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
         flex: "88px",
         key: elemId
-      }, renderDateElement({ ...elemProps,
+      }, renderDateElement(_extends({}, elemProps, {
         autofocus: autofocus && i === 0,
-        disabled,
+        disabled: disabled,
         id: elemId,
-        onBlur,
-        onFocus,
-        readonly,
-        registry,
+        name: id,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        readonly: readonly,
+        registry: registry,
         select: handleChange,
         // NOTE: antd components accept -1 rather than issue a warning
         // like material-ui, so we need to convert -1 to undefined here.
         value: elemProps.value < 0 ? undefined : elemProps.value
-      }));
+      })));
     }), !options.hideNowButton && /*#__PURE__*/React__default["default"].createElement(Col__default["default"], {
       flex: "88px"
     }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
@@ -871,8 +949,7 @@
       onClick: handleClear,
       type: "primary"
     }, "Clear")));
-  };
-
+  }
   AltDateWidget.defaultProps = {
     autofocus: false,
     disabled: false,
@@ -883,173 +960,157 @@
     showTime: false
   };
 
-  const AltDateTimeWidget = props => {
-    const {
-      AltDateWidget
-    } = props.registry.widgets;
+  function AltDateTimeWidget(props) {
+    var AltDateWidget = props.registry.widgets.AltDateWidget;
     return /*#__PURE__*/React__default["default"].createElement(AltDateWidget, _extends({
       showTime: true
     }, props));
-  };
-
-  AltDateTimeWidget.defaultProps = { ...AltDateWidget.defaultProps,
+  }
+  AltDateTimeWidget.defaultProps = /*#__PURE__*/_extends({}, AltDateWidget.defaultProps, {
     showTime: true
-  };
-
-  const CheckboxesWidget = _ref => {
-    let {
-      autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      // placeholder,
-      readonly,
-      // required,
-      // schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-    const {
-      enumOptions,
-      enumDisabled,
-      inline
-    } = options;
-
-    const handleChange = nextValue => onChange(nextValue);
+  });
 
-    const handleBlur = _ref2 => {
-      let {
-        target
-      } = _ref2;
+  /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+   *  It is typically used to represent an array of enums.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function CheckboxesWidget(_ref) {
+    var autofocus = _ref.autofocus,
+      disabled = _ref.disabled,
+      formContext = _ref.formContext,
+      id = _ref.id,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      options = _ref.options,
+      readonly = _ref.readonly,
+      value = _ref.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled,
+      inline = options.inline;
+    var handleChange = function handleChange(nextValue) {
+      return onChange(nextValue);
+    };
+    var handleBlur = function handleBlur(_ref2) {
+      var target = _ref2.target;
       return onBlur(id, target.value);
     };
-
-    const handleFocus = _ref3 => {
-      let {
-        target
-      } = _ref3;
+    var handleFocus = function handleFocus(_ref3) {
+      var target = _ref3.target;
       return onFocus(id, target.value);
     };
-
-    return Array.isArray(enumOptions) && enumOptions.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"].Group, {
-      disabled: disabled || readonlyAsDisabled && readonly,
+    // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+    // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+    var extraProps = {
       id: id,
-      name: id,
       onBlur: !readonly ? handleBlur : undefined,
+      onFocus: !readonly ? handleFocus : undefined
+    };
+    return Array.isArray(enumOptions) && enumOptions.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"].Group, _extends({
+      disabled: disabled || readonlyAsDisabled && readonly,
+      name: id,
       onChange: !readonly ? handleChange : undefined,
-      onFocus: !readonly ? handleFocus : undefined,
       value: value
-    }, enumOptions.map((_ref4, i) => {
-      let {
-        value: optionValue,
-        label: optionLabel
-      } = _ref4;
+    }, extraProps, {
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }), Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
       return /*#__PURE__*/React__default["default"].createElement("span", {
-        key: optionValue
+        key: option.value
       }, /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+        id: utils.optionId(id, option),
+        name: id,
         autoFocus: i === 0 ? autofocus : false,
-        disabled: enumDisabled && enumDisabled.indexOf(value) !== -1,
-        value: optionValue
-      }, optionLabel), !inline && /*#__PURE__*/React__default["default"].createElement("br", null));
+        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
+        value: option.value
+      }, option.label), !inline && /*#__PURE__*/React__default["default"].createElement("br", null));
     })) : null;
-  };
-
-  const CheckboxWidget = _ref => {
-    let {
-      autofocus,
-      disabled,
-      formContext,
-      id,
-      label,
-      onBlur,
-      onChange,
-      onFocus,
-      // options,
-      // placeholder,
-      readonly,
-      // required,
-      // schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
+  }
 
-    const handleChange = _ref2 => {
-      let {
-        target
-      } = _ref2;
+  /** The `CheckBoxWidget` is a widget for rendering boolean properties.
+   *  It is typically used to represent a boolean.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function CheckboxWidget(props) {
+    var autofocus = props.autofocus,
+      disabled = props.disabled,
+      formContext = props.formContext,
+      id = props.id,
+      label = props.label,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      readonly = props.readonly,
+      value = props.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var handleChange = function handleChange(_ref) {
+      var target = _ref.target;
       return onChange(target.checked);
     };
-
-    const handleBlur = _ref3 => {
-      let {
-        target
-      } = _ref3;
+    var handleBlur = function handleBlur(_ref2) {
+      var target = _ref2.target;
       return onBlur(id, target.checked);
     };
-
-    const handleFocus = _ref4 => {
-      let {
-        target
-      } = _ref4;
+    var handleFocus = function handleFocus(_ref3) {
+      var target = _ref3.target;
       return onFocus(id, target.checked);
     };
-
-    return /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+    // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+    // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+    var extraProps = {
+      onBlur: !readonly ? handleBlur : undefined,
+      onFocus: !readonly ? handleFocus : undefined
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], _extends({
       autoFocus: autofocus,
       checked: typeof value === "undefined" ? false : value,
       disabled: disabled || readonlyAsDisabled && readonly,
       id: id,
       name: id,
-      onBlur: !readonly ? handleBlur : undefined,
-      onChange: !readonly ? handleChange : undefined,
-      onFocus: !readonly ? handleFocus : undefined
-    }, label);
-  };
+      onChange: !readonly ? handleChange : undefined
+    }, extraProps, {
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }), label);
+  }
 
-  const DatePicker = /*#__PURE__*/generatePicker__default["default"](dayjsGenerateConfig__default["default"]);
+  var DatePicker = /*#__PURE__*/generatePicker__default["default"](dayjsGenerateConfig__default["default"]);
 
-  const DATE_PICKER_STYLE$1 = {
+  var DATE_PICKER_STYLE$1 = {
     width: "100%"
   };
-
-  const DateTimeWidget = _ref => {
-    let {
-      // autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      onBlur,
-      onChange,
-      onFocus,
-      // options,
-      placeholder,
-      readonly,
-      // required,
-      // schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-
-    const handleChange = nextValue => onChange(nextValue && nextValue.toISOString());
-
-    const handleBlur = () => onBlur(id, value);
-
-    const handleFocus = () => onFocus(id, value);
-
-    const getPopupContainer = node => node.parentNode;
-
+  /** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
+   * the value to/from utc using the appropriate utility functions.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function DateTimeWidget(props) {
+    var disabled = props.disabled,
+      formContext = props.formContext,
+      id = props.id,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      placeholder = props.placeholder,
+      readonly = props.readonly,
+      value = props.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var handleChange = function handleChange(nextValue) {
+      return onChange(nextValue && nextValue.toISOString());
+    };
+    var handleBlur = function handleBlur() {
+      return onBlur(id, value);
+    };
+    var handleFocus = function handleFocus() {
+      return onFocus(id, value);
+    };
+    var getPopupContainer = function getPopupContainer(node) {
+      return node.parentNode;
+    };
     return /*#__PURE__*/React__default["default"].createElement(DatePicker, {
       disabled: disabled || readonlyAsDisabled && readonly,
       getPopupContainer: getPopupContainer,
@@ -1061,43 +1122,43 @@
       placeholder: placeholder,
       showTime: true,
       style: DATE_PICKER_STYLE$1,
-      value: value && dayjs__default["default"](value)
+      value: value && dayjs__default["default"](value),
+      "aria-describedby": utils.ariaDescribedByIds(id)
     });
-  };
+  }
 
-  const DATE_PICKER_STYLE = {
+  var DATE_PICKER_STYLE = {
     width: "100%"
   };
-
-  const DateWidget = _ref => {
-    let {
-      // autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      onBlur,
-      onChange,
-      onFocus,
-      // options,
-      placeholder,
-      readonly,
-      // required,
-      // schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-
-    const handleChange = nextValue => onChange(nextValue && nextValue.format("YYYY-MM-DD"));
-
-    const handleBlur = () => onBlur(id, value);
-
-    const handleFocus = () => onFocus(id, value);
-
-    const getPopupContainer = node => node.parentNode;
-
+  /** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
+   * the value to undefined when it is falsy during the `onChange` handling.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function DateWidget(props) {
+    var disabled = props.disabled,
+      formContext = props.formContext,
+      id = props.id,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      placeholder = props.placeholder,
+      readonly = props.readonly,
+      value = props.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var handleChange = function handleChange(nextValue) {
+      return onChange(nextValue && nextValue.format("YYYY-MM-DD"));
+    };
+    var handleBlur = function handleBlur() {
+      return onBlur(id, value);
+    };
+    var handleFocus = function handleFocus() {
+      return onFocus(id, value);
+    };
+    var getPopupContainer = function getPopupContainer(node) {
+      return node.parentNode;
+    };
     return /*#__PURE__*/React__default["default"].createElement(DatePicker, {
       disabled: disabled || readonlyAsDisabled && readonly,
       getPopupContainer: getPopupContainer,
@@ -1109,53 +1170,41 @@
       placeholder: placeholder,
       showTime: false,
       style: DATE_PICKER_STYLE,
-      value: value && dayjs__default["default"](value)
+      value: value && dayjs__default["default"](value),
+      "aria-describedby": utils.ariaDescribedByIds(id)
     });
-  };
-
-  const PasswordWidget = _ref => {
-    let {
-      // autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      placeholder,
-      readonly,
-      // required,
-      // schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-    const emptyValue = options.emptyValue || "";
+  }
 
-    const handleChange = _ref2 => {
-      let {
-        target
-      } = _ref2;
+  /** The `PasswordWidget` component uses the `BaseInputTemplate` changing the type to `password`.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function PasswordWidget(props) {
+    var disabled = props.disabled,
+      formContext = props.formContext,
+      id = props.id,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      options = props.options,
+      placeholder = props.placeholder,
+      readonly = props.readonly,
+      value = props.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var emptyValue = options.emptyValue || "";
+    var handleChange = function handleChange(_ref) {
+      var target = _ref.target;
       return onChange(target.value === "" ? emptyValue : target.value);
     };
-
-    const handleBlur = _ref3 => {
-      let {
-        target
-      } = _ref3;
+    var handleBlur = function handleBlur(_ref2) {
+      var target = _ref2.target;
       return onBlur(id, target.value);
     };
-
-    const handleFocus = _ref4 => {
-      let {
-        target
-      } = _ref4;
+    var handleFocus = function handleFocus(_ref3) {
+      var target = _ref3.target;
       return onFocus(id, target.value);
     };
-
     return /*#__PURE__*/React__default["default"].createElement(Input__default["default"].Password, {
       disabled: disabled || readonlyAsDisabled && readonly,
       id: id,
@@ -1164,251 +1213,239 @@
       onChange: !readonly ? handleChange : undefined,
       onFocus: !readonly ? handleFocus : undefined,
       placeholder: placeholder,
-      value: value || ""
+      value: value || "",
+      "aria-describedby": utils.ariaDescribedByIds(id)
     });
-  };
-
-  /* eslint-disable no-else-return */
-
-  const RadioWidget = _ref => {
-    let {
-      autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      // placeholder,
-      readonly,
-      // required,
-      schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-    const {
-      enumOptions,
-      enumDisabled
-    } = options;
+  }
 
-    const handleChange = _ref2 => {
-      let {
-        target: {
-          value: nextValue
-        }
-      } = _ref2;
+  /** The `RadioWidget` is a widget for rendering a radio group.
+   *  It is typically used with a string property constrained with enum options.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function RadioWidget(_ref) {
+    var autofocus = _ref.autofocus,
+      disabled = _ref.disabled,
+      formContext = _ref.formContext,
+      id = _ref.id,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      options = _ref.options,
+      readonly = _ref.readonly,
+      schema = _ref.schema,
+      value = _ref.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled;
+    var handleChange = function handleChange(_ref2) {
+      var nextValue = _ref2.target.value;
       return onChange(schema.type === "boolean" ? nextValue !== "false" : nextValue);
     };
-
-    const handleBlur = _ref3 => {
-      let {
-        target
-      } = _ref3;
+    var handleBlur = function handleBlur(_ref3) {
+      var target = _ref3.target;
       return onBlur(id, target.value);
     };
-
-    const handleFocus = _ref4 => {
-      let {
-        target
-      } = _ref4;
+    var handleFocus = function handleFocus(_ref4) {
+      var target = _ref4.target;
       return onFocus(id, target.value);
     };
-
     return /*#__PURE__*/React__default["default"].createElement(Radio__default["default"].Group, {
       disabled: disabled || readonlyAsDisabled && readonly,
       id: id,
       name: id,
-      onBlur: !readonly ? handleBlur : undefined,
       onChange: !readonly ? handleChange : undefined,
+      onBlur: !readonly ? handleBlur : undefined,
       onFocus: !readonly ? handleFocus : undefined,
-      value: "" + value
-    }, enumOptions.map((_ref5, i) => {
-      let {
-        value: optionValue,
-        label: optionLabel
-      } = _ref5;
+      value: "" + value,
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }, Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
       return /*#__PURE__*/React__default["default"].createElement(Radio__default["default"], {
+        id: utils.optionId(id, option),
+        name: id,
         autoFocus: i === 0 ? autofocus : false,
-        disabled: enumDisabled && enumDisabled.indexOf(value) !== -1,
-        key: "" + optionValue,
-        value: "" + optionValue
-      }, optionLabel);
+        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
+        key: option.value,
+        value: "" + option.value
+      }, option.label);
     }));
-  };
-
-  /* eslint-disable no-else-return */
-
-  const RangeWidget = _ref => {
-    let {
-      autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      placeholder,
-      readonly,
-      // required,
-      schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-    const {
-      min,
-      max,
-      step
-    } = utils.rangeSpec(schema);
-    const emptyValue = options.emptyValue || "";
-
-    const handleChange = nextValue => onChange(nextValue === "" ? emptyValue : nextValue);
-
-    const handleBlur = () => onBlur(id, value);
-
-    const handleFocus = () => onFocus(id, value);
+  }
 
-    return /*#__PURE__*/React__default["default"].createElement(Slider__default["default"], {
+  /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+   * in a div, with the value along side it.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function RangeWidget(props) {
+    var autofocus = props.autofocus,
+      disabled = props.disabled,
+      formContext = props.formContext,
+      id = props.id,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      options = props.options,
+      placeholder = props.placeholder,
+      readonly = props.readonly,
+      schema = props.schema,
+      value = props.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var _rangeSpec = utils.rangeSpec(schema),
+      min = _rangeSpec.min,
+      max = _rangeSpec.max,
+      step = _rangeSpec.step;
+    var emptyValue = options.emptyValue || "";
+    var handleChange = function handleChange(nextValue) {
+      return onChange(nextValue === "" ? emptyValue : nextValue);
+    };
+    var handleBlur = function handleBlur() {
+      return onBlur(id, value);
+    };
+    var handleFocus = function handleFocus() {
+      return onFocus(id, value);
+    };
+    // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+    // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+    var extraProps = {
+      placeholder: placeholder,
+      onBlur: !readonly ? handleBlur : undefined,
+      onFocus: !readonly ? handleFocus : undefined
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Slider__default["default"], _extends({
       autoFocus: autofocus,
       disabled: disabled || readonlyAsDisabled && readonly,
       id: id,
       max: max,
       min: min,
-      onBlur: !readonly ? handleBlur : undefined,
       onChange: !readonly ? handleChange : undefined,
-      onFocus: !readonly ? handleFocus : undefined,
-      placeholder: placeholder,
       range: false,
       step: step,
       value: value
-    });
-  };
+    }, extraProps, {
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }));
+  }
 
-  /* eslint-disable no-else-return */
-  const SELECT_STYLE = {
+  var SELECT_STYLE = {
     width: "100%"
   };
-
-  const SelectWidget = _ref => {
-    let {
-      autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      multiple,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      placeholder,
-      readonly,
-      // required,
-      schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-    const {
-      enumOptions,
-      enumDisabled
-    } = options;
-
-    const handleChange = nextValue => onChange(utils.processSelectValue(schema, nextValue, options));
-
-    const handleBlur = () => onBlur(id, utils.processSelectValue(schema, value, options));
-
-    const handleFocus = () => onFocus(id, utils.processSelectValue(schema, value, options));
-
-    const getPopupContainer = node => node.parentNode;
-
-    const stringify = currentValue => Array.isArray(currentValue) ? value.map(String) : String(value);
-
-    return /*#__PURE__*/React__default["default"].createElement(Select__default["default"], {
+  /** The `SelectWidget` is a widget for rendering dropdowns.
+   *  It is typically used with string properties constrained with enum options.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function SelectWidget(_ref) {
+    var autofocus = _ref.autofocus,
+      disabled = _ref.disabled,
+      _ref$formContext = _ref.formContext,
+      formContext = _ref$formContext === void 0 ? {} : _ref$formContext,
+      id = _ref.id,
+      multiple = _ref.multiple,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      options = _ref.options,
+      placeholder = _ref.placeholder,
+      readonly = _ref.readonly,
+      schema = _ref.schema,
+      value = _ref.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled;
+    var handleChange = function handleChange(nextValue) {
+      return onChange(utils.processSelectValue(schema, nextValue, options));
+    };
+    var handleBlur = function handleBlur() {
+      return onBlur(id, utils.processSelectValue(schema, value, options));
+    };
+    var handleFocus = function handleFocus() {
+      return onFocus(id, utils.processSelectValue(schema, value, options));
+    };
+    var filterOption = function filterOption(input, option) {
+      if (option && isString__default["default"](option.label)) {
+        // labels are strings in this context
+        return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
+      }
+      return false;
+    };
+    var getPopupContainer = function getPopupContainer(node) {
+      return node.parentNode;
+    };
+    var stringify = function stringify(currentValue) {
+      return Array.isArray(currentValue) ? value.map(String) : String(value);
+    };
+    // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+    // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+    var extraProps = {
+      name: id
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Select__default["default"], _extends({
       autoFocus: autofocus,
       disabled: disabled || readonlyAsDisabled && readonly,
       getPopupContainer: getPopupContainer,
       id: id,
       mode: typeof multiple !== "undefined" ? "multiple" : undefined,
-      name: id,
       onBlur: !readonly ? handleBlur : undefined,
       onChange: !readonly ? handleChange : undefined,
       onFocus: !readonly ? handleFocus : undefined,
       placeholder: placeholder,
       style: SELECT_STYLE,
       value: typeof value !== "undefined" ? stringify(value) : undefined
-    }, enumOptions.map(_ref2 => {
-      let {
-        value: optionValue,
-        label: optionLabel
-      } = _ref2;
+    }, extraProps, {
+      filterOption: filterOption,
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }), Array.isArray(enumOptions) && enumOptions.map(function (_ref2) {
+      var optionValue = _ref2.value,
+        optionLabel = _ref2.label;
       return /*#__PURE__*/React__default["default"].createElement(Select__default["default"].Option, {
-        disabled: enumDisabled && enumDisabled.indexOf(optionValue) !== -1,
+        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
         key: String(optionValue),
         value: String(optionValue)
       }, optionLabel);
     }));
-  };
-
-  SelectWidget.defaultProps = {
-    formContext: {}
-  };
+  }
 
-  const INPUT_STYLE = {
+  var INPUT_STYLE = {
     width: "100%"
   };
-
-  const TextareaWidget = _ref => {
-    let {
-      // autofocus,
-      disabled,
-      formContext,
-      id,
-      // label,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      placeholder,
-      readonly,
-      // required,
-      // schema,
-      value
-    } = _ref;
-    const {
-      readonlyAsDisabled = true
-    } = formContext;
-
-    const handleChange = _ref2 => {
-      let {
-        target
-      } = _ref2;
+  /** The `TextareaWidget` is a widget for rendering input fields as textarea.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function TextareaWidget(_ref) {
+    var disabled = _ref.disabled,
+      formContext = _ref.formContext,
+      id = _ref.id,
+      onBlur = _ref.onBlur,
+      onChange = _ref.onChange,
+      onFocus = _ref.onFocus,
+      options = _ref.options,
+      placeholder = _ref.placeholder,
+      readonly = _ref.readonly,
+      value = _ref.value;
+    var _formContext$readonly = formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
+    var handleChange = function handleChange(_ref2) {
+      var target = _ref2.target;
       return onChange(target.value === "" ? options.emptyValue : target.value);
     };
-
-    const handleBlur = _ref3 => {
-      let {
-        target
-      } = _ref3;
+    var handleBlur = function handleBlur(_ref3) {
+      var target = _ref3.target;
       return onBlur(id, target.value);
     };
-
-    const handleFocus = _ref4 => {
-      let {
-        target
-      } = _ref4;
+    var handleFocus = function handleFocus(_ref4) {
+      var target = _ref4.target;
       return onFocus(id, target.value);
     };
-
-    return /*#__PURE__*/React__default["default"].createElement(Input__default["default"].TextArea, {
+    // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
+    // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
+    var extraProps = {
+      type: "textarea"
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Input__default["default"].TextArea, _extends({
       disabled: disabled || readonlyAsDisabled && readonly,
       id: id,
       name: id,
@@ -1418,50 +1455,50 @@
       placeholder: placeholder,
       rows: options.rows || 4,
       style: INPUT_STYLE,
-      type: "textarea",
       value: value
-    });
-  };
+    }, extraProps, {
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }));
+  }
 
-  const Widgets = {
-    AltDateTimeWidget,
-    AltDateWidget,
-    CheckboxesWidget,
-    CheckboxWidget,
-    DateTimeWidget,
-    DateWidget,
-    PasswordWidget,
-    RadioWidget,
-    RangeWidget,
-    SelectWidget,
-    TextareaWidget
-  };
-  const Theme = {
-    templates: {
-      ArrayFieldItemTemplate,
-      ArrayFieldTemplate: ArrayFieldTemplate$1,
-      BaseInputTemplate: TextWidget,
-      ButtonTemplates: {
-        AddButton,
-        MoveDownButton,
-        MoveUpButton,
-        RemoveButton,
-        SubmitButton
-      },
-      DescriptionFieldTemplate: DescriptionField,
-      ErrorListTemplate: ErrorList,
-      FieldTemplate,
-      ObjectFieldTemplate: ObjectFieldTemplate$1,
-      TitleFieldTemplate: TitleField$1
-    },
-    widgets: Widgets
-  };
-  const Form = /*#__PURE__*/core.withTheme(Theme);
+  function generateWidgets() {
+    return {
+      AltDateTimeWidget: AltDateTimeWidget,
+      AltDateWidget: AltDateWidget,
+      CheckboxesWidget: CheckboxesWidget,
+      CheckboxWidget: CheckboxWidget,
+      DateTimeWidget: DateTimeWidget,
+      DateWidget: DateWidget,
+      PasswordWidget: PasswordWidget,
+      RadioWidget: RadioWidget,
+      RangeWidget: RangeWidget,
+      SelectWidget: SelectWidget,
+      TextareaWidget: TextareaWidget
+    };
+  }
+  var index = /*#__PURE__*/generateWidgets();
+
+  function generateTheme() {
+    return {
+      templates: generateTemplates(),
+      widgets: generateWidgets()
+    };
+  }
+  var Theme = /*#__PURE__*/generateTheme();
+  function generateForm() {
+    return core.withTheme(generateTheme());
+  }
+  var Form = /*#__PURE__*/generateForm();
 
   exports.Form = Form;
+  exports.Templates = index$1;
   exports.Theme = Theme;
-  exports.Widgets = Widgets;
+  exports.Widgets = index;
   exports["default"] = Form;
+  exports.generateForm = generateForm;
+  exports.generateTemplates = generateTemplates;
+  exports.generateTheme = generateTheme;
+  exports.generateWidgets = generateWidgets;
 
   Object.defineProperty(exports, '__esModule', { value: true });