@rjsf/semantic-ui 5.0.0-beta.8 → 5.0.0

package/dist/semantic-ui.umd.development.js

@@ -1,185 +1,200 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('semantic-ui-react'), require('react'), require('@rjsf/utils'), require('prop-types'), require('nanoid'), require('lodash-es')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'semantic-ui-react', 'react', '@rjsf/utils', 'prop-types', 'nanoid', 'lodash-es'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/semantic-ui"] = {}, global.core, global.semanticUiReact, global.React, global.utils, global.PropTypes, global.nanoid, global._));
-})(this, (function (exports, core, semanticUiReact, React, utils, PropTypes, nanoid, _) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('semantic-ui-react'), require('react'), require('@rjsf/utils'), require('nanoid'), require('lodash-es/map')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'semantic-ui-react', 'react', '@rjsf/utils', 'nanoid', 'lodash-es/map'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/semantic-ui"] = {}, global.core, global.semanticUiReact, global.React, global.utils, global.nanoid, global.map));
+})(this, (function (exports, core, semanticUiReact, React, utils, nanoid, map) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-  var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
-  var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+  var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
 
   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;
+  }
 
-  function AddButton(props) {
+  var _excluded$4 = ["uiSchema", "registry", "color"];
+  /** The `AddButton` renders a button that represent the `Add` action on a form
+   */
+  function AddButton(_ref) {
+    var color = _ref.color,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
-      title: "Add Item"
+      title: "Add Item",
+      color: color
     }, props, {
       icon: true,
-      size: "tiny",
-      labelPosition: "left"
+      size: "tiny"
     }), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Icon, {
       name: "plus"
     }));
   }
 
-  /**
-   * Extract props meant for semantic UI components from props that are
-   * passed to Widgets, Templates and Fields.
-   * @param {Object} params
-   * @param {Object?} params.formContext
-   * @param {Object?} params.uiSchema
-   * @param {Object?} params.options
-   * @param {Object?} params.defaultSchemaProps
-   * @param {Object?} params.defaultContextProps
-   * @returns {any}
+  var _excluded$3 = ["wrap", "component"];
+  /**
+   * Extract props meant for semantic UI components from props that are
+   * passed to Widgets, Templates and Fields.
+   * @param {Object} params
+   * @param {Object?} params.formContext
+   * @param {Object?} params.uiSchema
+   * @param {Object?} params.options
+   * @param {Object?} params.defaultSchemaProps
+   * @param {Object?} params.defaultContextProps
+   * @returns {any}
    */
-
   function getSemanticProps(_ref) {
-    let {
-      formContext = {},
-      uiSchema = {},
-      options = {},
-      defaultSchemaProps = {
+    var _ref$formContext = _ref.formContext,
+      formContext = _ref$formContext === void 0 ? {} : _ref$formContext,
+      _ref$uiSchema = _ref.uiSchema,
+      uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema,
+      _ref$options = _ref.options,
+      options = _ref$options === void 0 ? {} : _ref$options,
+      _ref$defaultSchemaPro = _ref.defaultSchemaProps,
+      defaultSchemaProps = _ref$defaultSchemaPro === void 0 ? {
         fluid: true,
         inverted: false
-      },
-      defaultContextProps = {}
-    } = _ref;
-    const formContextProps = formContext.semantic;
-    let schemaProps = uiSchema["ui:options"] && uiSchema["ui:options"].semantic;
-    let optionProps = options.semantic; // formContext props should overide other props
-
-    return Object.assign({}, { ...(defaultSchemaProps && defaultSchemaProps)
-    }, { ...(defaultContextProps && defaultContextProps)
-    }, schemaProps, optionProps, formContextProps);
+      } : _ref$defaultSchemaPro,
+      _ref$defaultContextPr = _ref.defaultContextProps,
+      defaultContextProps = _ref$defaultContextPr === void 0 ? {} : _ref$defaultContextPr;
+    var formContextProps = formContext.semantic;
+    var schemaProps = utils.getUiOptions(uiSchema).semantic;
+    var optionProps = options.semantic;
+    // formContext props should overide other props
+    return Object.assign({}, _extends({}, defaultSchemaProps), _extends({}, defaultContextProps), schemaProps, optionProps, formContextProps);
   }
-  /**
-   * Extract error props meant for semantic UI components from props that are
-   * passed to Widgets, Templates and Fields.
-   * @param {Object} params
-   * @param {Object?} params.formContext
-   * @param {Object?} params.uiSchema
-   * @param {Object?} params.defaultProps
-   * @returns {any}
+  /**
+   * Extract error props meant for semantic UI components from props that are
+   * passed to Widgets, Templates and Fields.
+   * @param {Object} params
+   * @param {Object?} params.formContext
+   * @param {Object?} params.uiSchema
+   * @param {Object?} params.defaultProps
+   * @returns {any}
    */
-
   function getSemanticErrorProps(_ref2) {
-    let {
-      formContext = {},
-      uiSchema = {},
-      options = {},
-      defaultProps = {
+    var _ref2$formContext = _ref2.formContext,
+      formContext = _ref2$formContext === void 0 ? {} : _ref2$formContext,
+      _ref2$uiSchema = _ref2.uiSchema,
+      uiSchema = _ref2$uiSchema === void 0 ? {} : _ref2$uiSchema,
+      _ref2$options = _ref2.options,
+      options = _ref2$options === void 0 ? {} : _ref2$options,
+      _ref2$defaultProps = _ref2.defaultProps,
+      defaultProps = _ref2$defaultProps === void 0 ? {
         size: "small",
         pointing: "above"
-      }
-    } = _ref2;
-    const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
-    const schemaProps = uiSchema["ui:options"] && uiSchema["ui:options"].semantic && uiSchema["ui:options"].semantic.errorOptions;
-    const optionProps = options.semantic && options.semantic.errorOptions;
-    return Object.assign({}, { ...(defaultProps && defaultProps)
-    }, schemaProps, optionProps, formContextProps);
+      } : _ref2$defaultProps;
+    var formContextProps = formContext.semantic && formContext.semantic.errorOptions;
+    var semanticOptions = utils.getUiOptions(uiSchema).semantic;
+    var schemaProps = semanticOptions && semanticOptions.errorOptions;
+    var optionProps = options.semantic && options.semantic.errorOptions;
+    return Object.assign({}, _extends({}, defaultProps), schemaProps, optionProps, formContextProps);
   }
-  /**
-   * Combine multiple strings containing class names into a single string,
-   * removing duplicates. E.g.
-   * cleanClassNames('bar', 'baz bar', 'x y ', undefined)
-   * // 'bar baz x y'
-   * @param {Array} classNameArr
-   * @param {Array} omit
-   * @returns {string}
+  /**
+   * Combine multiple strings containing class names into a single string,
+   * removing duplicates. E.g.
+   * cleanClassNames('bar', 'baz bar', 'x y ', undefined)
+   * // 'bar baz x y'
+   * @param {Array} classNameArr
+   * @param {Array} omit
+   * @returns {string}
    */
-
   function cleanClassNames(classNameArr, omit) {
     if (omit === void 0) {
       omit = [];
     }
-
     // Split each arg on whitespace, and add it to an array. Skip false-y args
     // like "" and undefined.
-    const classList = classNameArr.filter(Boolean).reduce((previous, current) => previous.concat(current.trim().split(/\s+/)), []); // Remove any class names from omit, and make the rest unique before
+    var classList = classNameArr.filter(Boolean).reduce(function (previous, current) {
+      return previous.concat(current.trim().split(/\s+/));
+    }, []);
+    // Remove any class names from omit, and make the rest unique before
     // returning them as a string
-
-    return [...new Set(classList.filter(cn => !omit.includes(cn)))].join(" ");
+    return [].concat(new Set(classList.filter(function (cn) {
+      return !omit.includes(cn);
+    }))).join(" ");
   }
-  /**
-   *
-   * @param {boolean} wrap
-   * @param Component
-   * @param {Object} props
-   * @returns {*}
-   * @constructor
+  /**
+   *
+   * @param {boolean} wrap
+   * @param Component
+   * @param {Object} props
+   * @returns {*}
+   * @constructor
    */
-
   function MaybeWrap(_ref3) {
-    let {
-      wrap,
-      component: Component = "div",
-      ...props
-    } = _ref3;
-    return wrap ? /*#__PURE__*/React__default["default"].createElement(Component, props) : props.children;
-  }
-
-  const gridStyle = vertical => ({
-    display: "grid",
-    gridTemplateColumns: "1fr " + (vertical ? 65 : 110) + "px"
-  }); // checks if it's the first array item
-
-
-  function isInitialArrayItem(props) {
-    // no underscore because im not sure if we want to import a library here
-    const {
-      idSchema
-    } = props.children.props;
-    return idSchema.target && idSchema.conditions;
+    var wrap = _ref3.wrap,
+      _ref3$component = _ref3.component,
+      Component = _ref3$component === void 0 ? "div" : _ref3$component,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
+    return wrap ? /*#__PURE__*/React__default["default"].createElement(Component, _extends({}, props)) : props.children;
   }
 
-  const ArrayFieldItemTemplate = props => {
-    const {
-      children,
-      disabled,
-      hasToolbar,
-      hasMoveDown,
-      hasMoveUp,
-      hasRemove,
-      horizontalButtons,
-      index,
-      onDropIndexClick,
-      onReorderClick,
-      readonly,
-      wrapItem,
-      registry
-    } = props;
-    const {
-      MoveDownButton,
-      MoveUpButton,
-      RemoveButton
-    } = registry.templates.ButtonTemplates;
+  var gridStyle = function gridStyle(vertical) {
+    return {
+      display: "grid",
+      gridTemplateColumns: "1fr " + (vertical ? 65 : 110) + "px"
+    };
+  };
+  /** 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,
+      hasToolbar = props.hasToolbar,
+      hasMoveDown = props.hasMoveDown,
+      hasMoveUp = props.hasMoveUp,
+      hasRemove = props.hasRemove,
+      index = props.index,
+      onDropIndexClick = props.onDropIndexClick,
+      onReorderClick = props.onReorderClick,
+      readonly = props.readonly,
+      uiSchema = props.uiSchema,
+      registry = props.registry;
+    var _registry$templates$B = registry.templates.ButtonTemplates,
+      MoveDownButton = _registry$templates$B.MoveDownButton,
+      MoveUpButton = _registry$templates$B.MoveUpButton,
+      RemoveButton = _registry$templates$B.RemoveButton;
+    var uiOptions = utils.getUiOptions(uiSchema);
+    // Pull the semantic props out of the uiOptions that were put in via the ArrayFieldTemplate
+    var _uiOptions$semantic = uiOptions.semantic,
+      _uiOptions$semantic$h = _uiOptions$semantic.horizontalButtons,
+      horizontalButtons = _uiOptions$semantic$h === void 0 ? false : _uiOptions$semantic$h,
+      _uiOptions$semantic$w = _uiOptions$semantic.wrapItem,
+      wrapItem = _uiOptions$semantic$w === void 0 ? false : _uiOptions$semantic$w;
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: "array-item"
     }, /*#__PURE__*/React__default["default"].createElement(MaybeWrap, {
       wrap: wrapItem,
       component: semanticUiReact.Segment
     }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid, {
-      style: !isInitialArrayItem(props) ? { ...gridStyle(!horizontalButtons),
+      style: index !== 0 ? _extends({}, gridStyle(!horizontalButtons), {
         alignItems: "center"
-      } : gridStyle(!horizontalButtons)
+      }) : gridStyle(!horizontalButtons)
     }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
       width: 16,
       verticalAlign: "middle"
@@ -189,83 +204,98 @@
     }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
       className: "array-item-move-up",
       disabled: disabled || readonly || !hasMoveUp,
-      onClick: onReorderClick(index, index - 1)
+      onClick: onReorderClick(index, index - 1),
+      uiSchema: uiSchema,
+      registry: registry
     }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
       className: "array-item-move-down",
       disabled: disabled || readonly || !hasMoveDown,
-      onClick: onReorderClick(index, index + 1)
+      onClick: onReorderClick(index, index + 1),
+      uiSchema: uiSchema,
+      registry: registry
     }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
       className: "array-item-remove",
       disabled: disabled || readonly,
-      onClick: onDropIndexClick(index)
+      onClick: onDropIndexClick(index),
+      uiSchema: uiSchema,
+      registry: registry
     }))))));
-  };
+  }
 
-  function ArrayFieldTemplate(_ref) {
-    let {
-      uiSchema,
-      idSchema,
-      canAdd,
-      className,
-      classNames,
-      disabled,
-      formContext,
-      items,
-      onAddClick,
-      options,
-      readOnly,
-      required,
-      schema,
-      title,
-      registry
-    } = _ref;
-    const semanticProps = getSemanticProps({
-      options,
-      uiSchema,
-      formContext,
+  var _excluded$2 = ["key", "uiSchema"];
+  /** 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 uiSchema = props.uiSchema,
+      idSchema = props.idSchema,
+      canAdd = props.canAdd,
+      className = props.className,
+      disabled = props.disabled,
+      formContext = props.formContext,
+      items = props.items,
+      onAddClick = props.onAddClick,
+      readonly = props.readonly,
+      required = props.required,
+      schema = props.schema,
+      title = props.title,
+      registry = props.registry;
+    var semanticProps = getSemanticProps({
+      uiSchema: uiSchema,
+      formContext: formContext,
       defaultSchemaProps: {
         horizontalButtons: false,
         wrapItem: false
       }
     });
-    const {
-      horizontalButtons,
-      wrapItem
-    } = semanticProps;
-    const itemProps = {
-      horizontalButtons,
-      wrapItem
+    var horizontalButtons = semanticProps.horizontalButtons,
+      wrapItem = semanticProps.wrapItem;
+    var semantic = {
+      horizontalButtons: horizontalButtons,
+      wrapItem: wrapItem
     };
-    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 fieldTitle = uiOptions.title || title;
-    const fieldDescription = uiOptions.description || schema.description;
+    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;
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: cleanClassNames([className, classNames, utils.isFixedItems(schema) ? "" : "sortable-form-fields"])
+      className: cleanClassNames([className, utils.isFixedItems(schema) ? "" : "sortable-form-fields"])
     }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldTitleTemplate, {
       idSchema: idSchema,
-      title: fieldTitle,
+      title: uiOptions.title || title,
+      schema: schema,
       uiSchema: uiSchema,
       required: required,
       registry: registry
-    }), fieldDescription && /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
+    }), /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
       idSchema: idSchema,
-      description: fieldDescription,
+      description: uiOptions.description || schema.description,
+      schema: schema,
       uiSchema: uiSchema,
       registry: registry
     }), /*#__PURE__*/React__default["default"].createElement("div", {
       key: "array-item-list-" + idSchema.$id
     }, /*#__PURE__*/React__default["default"].createElement("div", {
       className: "row array-item-list"
-    }, items && items.map(props => /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({}, props, itemProps)))), canAdd && /*#__PURE__*/React__default["default"].createElement("div", {
+    }, items && items.map(function (_ref) {
+      var _extends2;
+      var key = _ref.key,
+        _ref$uiSchema = _ref.uiSchema,
+        itemUiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema,
+        props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+      // Merge in the semantic props from the ArrayFieldTemplate into each of the items
+      var mergedUiSchema = _extends({}, itemUiSchema, (_extends2 = {}, _extends2[utils.UI_OPTIONS_KEY] = _extends({}, itemUiSchema[utils.UI_OPTIONS_KEY], {
+        semantic: semantic
+      }), _extends2));
+      return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
+        key: key
+      }, props, {
+        uiSchema: mergedUiSchema
+      }));
+    })), canAdd && /*#__PURE__*/React__default["default"].createElement("div", {
       style: {
         marginTop: "1rem",
         position: "relative",
@@ -273,76 +303,77 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
       onClick: onAddClick,
-      disabled: disabled || readOnly
+      disabled: disabled || readonly,
+      uiSchema: uiSchema,
+      registry: registry
     }))));
   }
 
+  /** 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) {
-    const {
-      id,
-      placeholder,
-      name,
-      label,
-      value,
-      required,
-      readonly,
-      disabled,
-      onChange,
-      onBlur,
-      onFocus,
-      autofocus,
-      options,
-      schema,
-      uiSchema,
-      formContext,
-      type,
-      registry,
-      rawErrors = []
-    } = props;
-    const inputProps = utils.getInputProps(schema, type, options);
-    const semanticProps = getSemanticProps({
-      uiSchema,
-      formContext,
-      options
+    var id = props.id,
+      placeholder = props.placeholder,
+      label = props.label,
+      value = props.value,
+      required = props.required,
+      readonly = props.readonly,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      autofocus = props.autofocus,
+      options = props.options,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      formContext = props.formContext,
+      type = props.type,
+      registry = props.registry,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
+    var inputProps = utils.getInputProps(schema, type, options);
+    var semanticProps = getSemanticProps({
+      uiSchema: uiSchema,
+      formContext: formContext,
+      options: options
     });
-    const {
-      schemaUtils
-    } = registry; // eslint-disable-next-line no-shadow
-
-    const _onChange = _ref => {
-      let {
-        target: {
-          value
-        }
-      } = _ref;
+    var schemaUtils = registry.schemaUtils;
+    var _onChange = function _onChange(_ref) {
+      var value = _ref.target.value;
       return onChange(value === "" ? options.emptyValue : value);
     };
-
-    const _onBlur = () => onBlur && onBlur(id, value);
-
-    const _onFocus = () => onFocus && onFocus(id, value);
-
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
+    var _onBlur = function _onBlur() {
+      return onBlur && onBlur(id, value);
+    };
+    var _onFocus = function _onFocus() {
+      return onFocus && onFocus(id, value);
+    };
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Input, _extends({
       key: id,
       id: id,
+      name: id,
       placeholder: placeholder
     }, inputProps, {
       label: displayLabel ? label || schema.title : false,
       required: required,
       autoFocus: autofocus,
       disabled: disabled || readonly,
-      name: name,
-      list: schema.examples ? "examples_" + id : undefined
+      list: schema.examples ? utils.examplesId(id) : undefined
     }, semanticProps, {
       value: value || value === 0 ? value : "",
       error: rawErrors.length > 0,
       onChange: _onChange,
       onBlur: _onBlur,
-      onFocus: _onFocus
-    })), schema.examples && /*#__PURE__*/React__default["default"].createElement("datalist", {
-      id: "examples_" + id
-    }, schema.examples.concat(schema.default ? [schema.default] : []).map(example => {
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
+    })), 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
@@ -350,64 +381,51 @@
     })));
   }
 
-  /* eslint-disable react/prop-types */
-
-  function DescriptionField(_ref) {
-    let {
-      className,
-      description,
-      id
-    } = _ref;
-
-    if (description) {
-      return /*#__PURE__*/React__default["default"].createElement("p", {
-        id: id,
-        className: className || "sui-description"
-      }, description);
+  /** 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("p", {
+      id: id,
+      className: "sui-description"
+    }, description);
   }
 
-  /* eslint-disable react/no-array-index-key */
-  /**
-   *
-   * @param errors
-   * @returns {*}
-   * @constructor
+  /** 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) {
-    let {
-      errors
-    } = _ref;
+    var errors = _ref.errors;
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message, {
       negative: true
-    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.Header, null, "Errors"), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.List, null, errors.map((error, index) => /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.Item, {
-      key: "error-" + index
-    }, error.stack))));
+    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.Header, null, "Errors"), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.List, null, errors.map(function (error, index) {
+      return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.Item, {
+        key: "error-" + index
+      }, error.stack);
+    })));
   }
 
-  ErrorList.propTypes = {
-    errors: PropTypes__default["default"].array
-  };
-
+  var _excluded$1 = ["icon", "iconType", "color", "className", "uiSchema", "registry"];
   function IconButton(props) {
-    const {
-      icon,
-      iconType,
-      className,
-      ...otherProps
-    } = props;
+    var icon = props.icon,
+      iconType = props.iconType,
+      color = props.color,
+      className = props.className,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
       icon: icon,
       size: iconType,
+      color: color,
       className: className
     }, otherProps));
   }
-
-  IconButton.propTypes = {
-    icon: PropTypes__default["default"].string.isRequired,
-    className: PropTypes__default["default"].string
-  };
   function MoveDownButton(props) {
     return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
       title: "Move down"
@@ -430,37 +448,31 @@
     }));
   }
 
-  /* eslint-disable react/no-array-index-key */
-  /**
-   *
-   * @param errors
-   * @param displayError
-   * @returns {*}
-   * @constructor
-   * @return {null}
+  var DEFAULT_OPTIONS$1 = {
+    options: {
+      pointing: "above",
+      size: "small"
+    }
+  };
+  /** The `FieldErrorTemplate` component renders the errors local to the particular field
+   *
+   * @param props - The `FieldErrorProps` for the errors being rendered
    */
-
   function FieldErrorTemplate(_ref) {
-    let {
-      errors,
-      idSchema,
-      uiSchema,
-      registry
-    } = _ref;
-    const {
-      formContext
-    } = registry;
-    const options = getSemanticErrorProps({
-      formContext,
-      uiSchema
+    var errors = _ref.errors,
+      idSchema = _ref.idSchema,
+      uiSchema = _ref.uiSchema,
+      registry = _ref.registry;
+    var formContext = registry.formContext;
+    var options = getSemanticErrorProps({
+      formContext: formContext,
+      uiSchema: uiSchema,
+      defaultProps: DEFAULT_OPTIONS$1
     });
-    const {
-      pointing,
-      size
-    } = options;
-
+    var pointing = options.pointing,
+      size = options.size;
     if (errors && errors.length > 0) {
-      const id = idSchema.$id + "__error";
+      var id = idSchema.$id + "__error";
       return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Label, {
         id: id,
         color: "red",
@@ -469,39 +481,24 @@
         basic: true
       }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.List, {
         bulleted: true
-      }, errors.map(error => /*#__PURE__*/React__default["default"].createElement(semanticUiReact.List.Item, {
-        key: nanoid.nanoid(),
-        content: error
-      }))));
+      }, errors.map(function (error) {
+        return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.List.Item, {
+          key: nanoid.nanoid()
+        }, error);
+      })));
     }
-
     return null;
   }
 
-  FieldErrorTemplate.defaultProps = {
-    options: {
-      pointing: "above",
-      size: "small"
-    }
-  };
-  FieldErrorTemplate.propTypes = {
-    options: PropTypes__default["default"].object,
-    errors: PropTypes__default["default"].array
-  };
-
-  /* eslint-disable react/prop-types */
-  /**
-   * @return {null}
+  /** The `FieldHelpTemplate` component renders any help desired for a field
+   *
+   * @param props - The `FieldHelpProps` to be rendered
    */
-
-  function FieldHelpTemplate(_ref) {
-    let {
-      help,
-      idSchema
-    } = _ref;
-
+  function FieldHelpTemplate(props) {
+    var idSchema = props.idSchema,
+      help = props.help;
     if (help) {
-      const id = idSchema.$id + "__help";
+      var id = idSchema.$id + "__help";
       return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message, {
         size: "mini",
         info: true,
@@ -509,114 +506,36 @@
         content: help
       });
     }
-
     return null;
   }
 
-  FieldHelpTemplate.propTypes = {
-    helpText: PropTypes__default["default"].string,
-    id: PropTypes__default["default"].string
-  };
-
-  const WrapIfAdditional = _ref => {
-    let {
-      children,
-      classNames,
-      disabled,
-      formContext,
-      id,
-      label,
-      onDropPropertyClick,
-      onKeyChange,
-      readonly,
-      required,
-      schema,
-      registry
-    } = _ref;
-    const {
-      RemoveButton
-    } = registry.templates.ButtonTemplates;
-    const {
-      readonlyAsDisabled = true,
-      wrapperStyle
-    } = formContext;
-    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);
-    }
-
-    const handleBlur = _ref2 => {
-      let {
-        target
-      } = _ref2;
-      return onKeyChange(target.value);
-    };
-
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames,
-      key: id + "-key"
-    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid, {
-      columns: "equal"
-    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Row, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
-      className: "form-additional"
-    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, {
-      widths: "equal",
-      grouped: true
-    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Input, {
-      className: "form-group",
-      hasFeedback: true,
-      fluid: true,
-      htmlFor: "" + id,
-      label: keyLabel,
-      required: required,
-      defaultValue: label,
-      disabled: disabled || readonlyAsDisabled && readonly,
-      id: "" + id,
-      name: "" + id,
-      onBlur: !readonly ? handleBlur : undefined,
-      style: wrapperStyle,
-      type: "text"
-    }))), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
-      className: "form-additional",
-      verticalAlign: "middle"
-    }, children), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, null, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-      iconType: "mini",
-      className: "array-item-remove",
-      disabled: disabled || readonly,
-      onClick: onDropPropertyClick(label)
-    })))));
-  };
-
-  function FieldTemplate(_ref) {
-    let {
-      id,
-      children,
-      className,
-      // pass className for styling libs (like styled-components)
-      classNames,
-      displayLabel,
-      label,
-      errors,
-      help,
-      hidden,
-      rawDescription,
-      registry,
-      uiSchema,
-      ...props
-    } = _ref;
-    const semanticProps = getSemanticProps(props);
-    const {
-      wrapLabel,
-      wrapContent
-    } = semanticProps;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
-
+  var _excluded = ["id", "children", "classNames", "style", "displayLabel", "label", "errors", "help", "hidden", "rawDescription", "registry", "schema", "uiSchema"];
+  /** 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 id = props.id,
+      children = props.children,
+      classNames = props.classNames,
+      style = props.style,
+      displayLabel = props.displayLabel,
+      label = props.label,
+      errors = props.errors,
+      help = props.help,
+      hidden = props.hidden,
+      rawDescription = props.rawDescription,
+      registry = props.registry,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+    var semanticProps = getSemanticProps(otherProps);
+    var wrapLabel = semanticProps.wrapLabel,
+      wrapContent = semanticProps.wrapContent;
+    var uiOptions = utils.getUiOptions(uiSchema);
+    var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
+    var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
     if (hidden) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
@@ -624,13 +543,15 @@
         }
       }, children);
     }
-
-    return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditional, _extends({
+    return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, _extends({
       classNames: classNames,
+      style: style,
       id: id,
       label: label,
-      registry: registry
-    }, props), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, {
+      registry: registry,
+      schema: schema,
+      uiSchema: uiSchema
+    }, otherProps), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, {
       key: id,
       widths: "equal",
       grouped: true
@@ -641,50 +562,56 @@
       wrap: wrapLabel,
       className: "sui-field-label"
     }, rawDescription && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-      id: id + "-description",
-      description: rawDescription
+      id: utils.descriptionId(id),
+      description: rawDescription,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
     })), help, errors)));
   }
 
-  /* eslint-disable react/prop-types */
-
-  function ObjectFieldTemplate(_ref) {
-    let {
-      description,
-      onAddClick,
-      title,
-      properties,
-      disabled,
-      readOnly,
-      required,
-      uiSchema,
-      schema,
-      formData,
-      idSchema,
-      registry
-    } = _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 fieldTitle = uiOptions.title || title;
-    const fieldDescription = uiOptions.description || description;
+  /** 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,
+      onAddClick = props.onAddClick,
+      title = props.title,
+      properties = props.properties,
+      disabled = props.disabled,
+      readonly = props.readonly,
+      required = props.required,
+      uiSchema = props.uiSchema,
+      schema = props.schema,
+      formData = props.formData,
+      idSchema = props.idSchema,
+      registry = props.registry;
+    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 fieldTitle = uiOptions.title || title;
+    var fieldDescription = uiOptions.description || description;
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fieldTitle && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-      id: idSchema.$id + "-title",
+      id: utils.titleId(idSchema),
       title: fieldTitle,
       required: required,
+      schema: schema,
       uiSchema: uiSchema,
       registry: registry
     }), fieldDescription && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-      id: idSchema.$id + "-description",
+      id: utils.descriptionId(idSchema),
       description: fieldDescription,
+      schema: schema,
+      uiSchema: uiSchema,
       registry: registry
-    }), properties.map(prop => prop.content), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
+    }), properties.map(function (prop) {
+      return prop.content;
+    }), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
       width: 16,
       verticalAlign: "middle"
     }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Row, null, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -695,119 +622,201 @@
       }
     }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
       onClick: onAddClick(schema),
-      disabled: disabled || readOnly
+      disabled: disabled || readonly,
+      uiSchema: uiSchema,
+      registry: registry
     })))));
   }
 
-  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,
+      _getSubmitButtonOptio2 = _getSubmitButtonOptio.props,
+      submitButtonProps = _getSubmitButtonOptio2 === void 0 ? {} : _getSubmitButtonOptio2;
     if (norender) {
       return null;
     }
-
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
       type: "submit",
       primary: true
     }, submitButtonProps), submitText);
-  });
+  }
 
-  const DEFAULT_OPTIONS = {
-    semantic: {
-      inverted: false,
-      dividing: true
-    }
+  var DEFAULT_OPTIONS = {
+    inverted: false,
+    dividing: true
   };
-
+  /** The `TitleField` is the template to use to render the title of a field
+   *
+   * @param props - The `TitleFieldProps` for this component
+   */
   function TitleField(_ref) {
-    let {
-      id,
-      title,
-      uiSchema
-    } = _ref;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const {
-      semantic
-    } = uiOptions.options || DEFAULT_OPTIONS;
+    var id = _ref.id,
+      title = _ref.title,
+      uiSchema = _ref.uiSchema;
+    var semanticProps = getSemanticProps({
+      uiSchema: uiSchema,
+      defaultSchemaProps: DEFAULT_OPTIONS
+    });
+    if (!title) {
+      return null;
+    }
+    return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Header, _extends({
+      id: id
+    }, semanticProps, {
+      as: "h5"
+    }), title);
+  }
 
-    if (title) {
-      return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Header, _extends({
-        id: id
-      }, semantic, {
-        as: "h5"
-      }), title);
+  /** 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 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,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      registry = props.registry;
+    // Button templates are not overridden in the uiSchema
+    var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+    var _registry$formContext = registry.formContext,
+      _registry$formContext2 = _registry$formContext.readonlyAsDisabled,
+      readonlyAsDisabled = _registry$formContext2 === void 0 ? true : _registry$formContext2,
+      wrapperStyle = _registry$formContext.wrapperStyle;
+    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);
+    };
+    return /*#__PURE__*/React__default["default"].createElement("div", {
+      className: classNames,
+      style: style,
+      key: id + "-key"
+    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid, {
+      columns: "equal"
+    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Row, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
+      className: "form-additional"
+    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, {
+      widths: "equal",
+      grouped: true
+    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Input, {
+      className: "form-group",
+      hasFeedback: true,
+      fluid: true,
+      htmlFor: "" + id,
+      label: keyLabel,
+      required: required,
+      defaultValue: label,
+      disabled: disabled || readonlyAsDisabled && readonly,
+      id: "" + id,
+      name: "" + id,
+      onBlur: !readonly ? handleBlur : undefined,
+      style: wrapperStyle,
+      type: "text"
+    }))), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
+      className: "form-additional",
+      verticalAlign: "middle"
+    }, children), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, null, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
+      iconType: "mini",
+      className: "array-item-remove",
+      disabled: disabled || readonly,
+      onClick: onDropPropertyClick(label),
+      uiSchema: uiSchema,
+      registry: registry
+    })))));
   }
 
-  var Templates = {
-    ArrayFieldItemTemplate,
-    ArrayFieldTemplate,
-    BaseInputTemplate,
-    ButtonTemplates: {
-      AddButton,
-      MoveDownButton,
-      MoveUpButton,
-      RemoveButton,
-      SubmitButton
-    },
-    DescriptionFieldTemplate: DescriptionField,
-    ErrorListTemplate: ErrorList,
-    FieldErrorTemplate,
-    FieldHelpTemplate,
-    FieldTemplate,
-    ObjectFieldTemplate,
-    TitleFieldTemplate: TitleField
-  };
+  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,
+      FieldHelpTemplate: FieldHelpTemplate,
+      FieldTemplate: FieldTemplate,
+      ObjectFieldTemplate: ObjectFieldTemplate,
+      TitleFieldTemplate: TitleField,
+      WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
+    };
+  }
+  var Templates = /*#__PURE__*/generateTemplates();
 
+  /** 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) {
-    const {
-      id,
-      value,
-      required,
-      disabled,
-      readonly,
-      label,
-      autofocus,
-      onChange,
-      onBlur,
-      options,
-      onFocus,
-      formContext,
-      schema,
-      uiSchema,
-      registry,
-      rawErrors = []
-    } = props;
-    const semanticProps = getSemanticProps({
-      options,
-      formContext,
-      schema,
-      uiSchema,
+    var id = props.id,
+      value = props.value,
+      disabled = props.disabled,
+      readonly = props.readonly,
+      label = props.label,
+      autofocus = props.autofocus,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      options = props.options,
+      onFocus = props.onFocus,
+      formContext = props.formContext,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
+    var semanticProps = getSemanticProps({
+      options: options,
+      formContext: formContext,
+      uiSchema: uiSchema,
       defaultSchemaProps: {
         inverted: false
       }
     });
-    const {
-      schemaUtils
-    } = registry;
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
-
-    const _onChange = (event, data) => onChange && onChange(data.checked);
-
-    const _onBlur = () => onBlur && onBlur(id, value);
-
-    const _onFocus = () => onFocus && onFocus(id, value);
-
-    const checked = value == "true" || value == true;
+    // Because an unchecked checkbox will cause html5 validation to fail, only add
+    // the "required" attribute if the field value must be "true", due to the
+    // "const" or "enum" keywords
+    var required = utils.schemaRequiresTrueValue(schema);
+    var _onChange = function _onChange(_, data) {
+      return onChange && onChange(data.checked);
+    };
+    var _onBlur = function _onBlur() {
+      return onBlur && onBlur(id, value);
+    };
+    var _onFocus = function _onFocus() {
+      return onFocus && onFocus(id, value);
+    };
+    var checked = value == "true" || value == true;
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Checkbox, _extends({
       id: id,
+      name: id,
       disabled: disabled || readonly,
       autoFocus: autofocus
     }, semanticProps, {
@@ -817,219 +826,206 @@
       onBlur: _onBlur,
       onFocus: _onFocus,
       required: required,
-      label: displayLabel ? label || schema.title : false
+      label: label || "",
+      "aria-describedby": utils.ariaDescribedByIds(id)
     }));
   }
 
-  function selectValue(value, selected, all) {
-    const at = all.indexOf(value);
-    const 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((a, b) => all.indexOf(a) > all.indexOf(b));
-  }
-
-  function deselectValue(value, selected) {
-    return selected.filter(v => v !== value);
-  }
-
+  /** 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(props) {
-    const {
-      id,
-      disabled,
-      options,
-      value,
-      autofocus,
-      readonly,
-      onChange,
-      onBlur,
-      onFocus,
-      formContext,
-      schema,
-      uiSchema,
-      rawErrors = [],
-      registry
-    } = props;
-    const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
-    const {
-      enumOptions,
-      enumDisabled,
-      inline
-    } = options;
-    const {
-      title
-    } = schema;
-    const semanticProps = getSemanticProps({
-      options,
-      formContext,
-      schema,
-      uiSchema,
+    var id = props.id,
+      disabled = props.disabled,
+      options = props.options,
+      value = props.value,
+      autofocus = props.autofocus,
+      readonly = props.readonly,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      formContext = props.formContext,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+      registry = props.registry;
+    var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
+    var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled,
+      inline = options.inline;
+    var checkboxesValues = Array.isArray(value) ? value : [value];
+    var title = schema.title;
+    var semanticProps = getSemanticProps({
+      options: options,
+      formContext: formContext,
+      uiSchema: uiSchema,
       defaultSchemaProps: {
         inverted: false
       }
     });
-
-    const _onChange = option => _ref => {
-      let {
-        target: {
-          checked
+    var _onChange = function _onChange(index) {
+      return function (_ref) {
+        var checked = _ref.target.checked;
+        // eslint-disable-next-line no-shadow
+        if (checked) {
+          onChange(utils.enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+        } else {
+          onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
         }
-      } = _ref;
-      // eslint-disable-next-line no-shadow
-      const all = enumOptions.map(_ref2 => {
-        let {
-          value
-        } = _ref2;
-        return value;
-      });
-
-      if (checked) {
-        onChange(selectValue(option.value, value, all));
-      } else {
-        onChange(deselectValue(option.value, value));
-      }
+      };
     };
-
-    const _onBlur = () => onBlur && onBlur(id, value);
-
-    const _onFocus = () => onFocus && onFocus(id, value);
-
-    const inlineOption = inline ? {
+    var _onBlur = function _onBlur() {
+      return onBlur(id, value);
+    };
+    var _onFocus = function _onFocus() {
+      return onFocus(id, value);
+    };
+    var inlineOption = inline ? {
       inline: true
     } : {
       grouped: true
     };
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, title && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-      id: id + "-title",
+      id: utils.titleId(id),
       title: title,
+      schema: schema,
       uiSchema: uiSchema,
       registry: registry
     }), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, _extends({
-      id: id
-    }, inlineOption), enumOptions.map((option, index) => {
-      const checked = value.indexOf(option.value) !== -1;
-      const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+      id: id,
+      name: id
+    }, inlineOption), Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+      var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
+      var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
       return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Checkbox, _extends({
-        id: id + "_" + index,
-        key: id + "_" + index,
+        id: utils.optionId(id, index),
+        name: id,
+        key: index,
         label: option.label
       }, semanticProps, {
         checked: checked,
         error: rawErrors.length > 0,
         disabled: disabled || itemDisabled || readonly,
         autoFocus: autofocus && index === 0,
-        onChange: _onChange(option),
+        onChange: _onChange(index),
         onBlur: _onBlur,
-        onFocus: _onFocus
+        onFocus: _onFocus,
+        "aria-describedby": utils.ariaDescribedByIds(id)
       }));
     })));
   }
 
+  /** 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(props) {
-    const {
-      id,
-      value,
-      required,
-      disabled,
-      readonly,
-      onChange,
-      onBlur,
-      onFocus,
-      schema,
-      options,
-      formContext,
-      uiSchema,
-      rawErrors = []
-    } = props;
-    const {
-      enumOptions,
-      enumDisabled
-    } = options;
-    const semanticProps = getSemanticProps({
-      formContext,
-      options,
-      uiSchema
-    }); // eslint-disable-next-line no-shadow
-
-    const _onChange = (event, _ref) => {
-      let {
-        value: eventValue
-      } = _ref;
-      return onChange && onChange(schema.type === "boolean" ? eventValue !== "false" : eventValue);
+    var id = props.id,
+      value = props.value,
+      required = props.required,
+      disabled = props.disabled,
+      readonly = props.readonly,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      options = props.options,
+      formContext = props.formContext,
+      uiSchema = props.uiSchema,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
+    var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled,
+      emptyValue = options.emptyValue;
+    var semanticProps = getSemanticProps({
+      formContext: formContext,
+      options: options,
+      uiSchema: uiSchema
+    });
+    var _onChange = function _onChange(_, _ref) {
+      var eventValue = _ref.value;
+      return onChange(utils.enumOptionsValueForIndex(eventValue, enumOptions, emptyValue));
     };
-
-    const _onBlur = () => onBlur && onBlur(id, value);
-
-    const _onFocus = () => onFocus && onFocus(id, value);
-
-    const inlineOption = options.inline ? {
+    var _onBlur = function _onBlur() {
+      return onBlur(id, value);
+    };
+    var _onFocus = function _onFocus() {
+      return onFocus(id, value);
+    };
+    var inlineOption = options.inline ? {
       inline: true
     } : {
       grouped: true
     };
-    return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, inlineOption, enumOptions.map((option, i) => {
-      const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+    return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, _extends({}, inlineOption), Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+      var checked = utils.enumOptionsIsSelected(option.value, value);
+      var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
       return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Field, _extends({
         required: required,
         control: semanticUiReact.Radio,
-        name: id + "-radio-" + option.value
+        id: utils.optionId(id, index),
+        name: id
       }, semanticProps, {
         onFocus: _onFocus,
         onBlur: _onBlur,
-        label: "" + option.label,
-        value: "" + option.value,
-        error: rawErrors.length > 0,
-        key: option.value + "-" + i,
-        checked: value == option.value,
         onChange: _onChange,
-        disabled: disabled || itemDisabled || readonly
+        label: option.label,
+        value: String(index),
+        error: rawErrors.length > 0,
+        key: index,
+        checked: checked,
+        disabled: disabled || itemDisabled || readonly,
+        "aria-describedby": utils.ariaDescribedByIds(id)
       }));
     }));
   }
 
+  /** 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) {
-    const {
-      id,
-      name,
-      value,
-      required,
-      readonly,
-      disabled,
-      onChange,
-      onBlur,
-      onFocus,
-      options,
-      schema,
-      uiSchema,
-      formContext,
-      rawErrors = []
-    } = props;
-    const semanticProps = getSemanticProps({
-      formContext,
-      options,
-      uiSchema,
+    var id = props.id,
+      value = props.value,
+      required = props.required,
+      readonly = props.readonly,
+      disabled = props.disabled,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      options = props.options,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      formContext = props.formContext,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
+    var semanticProps = getSemanticProps({
+      formContext: formContext,
+      options: options,
+      uiSchema: uiSchema,
       defaultSchemaProps: {
         fluid: true
       }
-    }); // eslint-disable-next-line no-shadow
-
-    const _onChange = _ref => {
-      let {
-        target: {
-          value
-        }
-      } = _ref;
+    });
+    // eslint-disable-next-line no-shadow
+    var _onChange = function _onChange(_ref) {
+      var value = _ref.target.value;
       return onChange && onChange(value === "" ? options.emptyValue : value);
     };
-
-    const _onBlur = () => onBlur && onBlur(id, value);
-
-    const _onFocus = () => onFocus && onFocus(id, value);
-
+    var _onBlur = function _onBlur() {
+      return onBlur && onBlur(id, value);
+    };
+    var _onFocus = function _onFocus() {
+      return onFocus && onFocus(id, value);
+    };
     return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Input, _extends({
       id: id,
       key: id,
-      name: name,
+      name: id,
       type: "range",
       required: required,
       disabled: disabled || readonly
@@ -1038,62 +1034,59 @@
       error: rawErrors.length > 0,
       onChange: _onChange,
       onBlur: _onBlur,
-      onFocus: _onFocus
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     })), /*#__PURE__*/React__default["default"].createElement("span", null, value));
   }
 
-  /**
-   * * Returns and creates an array format required for semantic drop down
-   * @param {array} enumOptions- array of items for the dropdown
-   * @param {array} enumDisabled - array of enum option values to disable
-   * @returns {*}
+  /**
+   * Returns and creates an array format required for semantic drop down
+   * @param {array} enumOptions- array of items for the dropdown
+   * @param {array} enumDisabled - array of enum option values to disable
+   * @returns {*}
    */
-
   function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled) {
-    const disabledOptions = enumDisabled || [];
-    let options = []; // eslint-disable-next-line no-shadow
-
-    options = ___default["default"].map(enumOptions, _ref => {
-      let {
-        label,
-        value
-      } = _ref;
+    var disabledOptions = enumDisabled || [];
+    var options = map__default["default"](enumOptions, function (_ref, index) {
+      var label = _ref.label,
+        value = _ref.value;
       return {
         disabled: disabledOptions.indexOf(value) !== -1,
         key: label,
         text: label,
-        value
+        value: String(index)
       };
     });
     return options;
   }
-
+  /** 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(props) {
-    const {
-      schema,
-      uiSchema,
-      formContext,
-      id,
-      options,
-      name,
-      label,
-      required,
-      disabled,
-      readonly,
-      value,
-      multiple,
-      placeholder,
-      autofocus,
-      onChange,
-      onBlur,
-      onFocus,
-      rawErrors = []
-    } = props;
-    const semanticProps = getSemanticProps({
-      schema,
-      uiSchema,
-      formContext,
-      options,
+    var schema = props.schema,
+      uiSchema = props.uiSchema,
+      formContext = props.formContext,
+      id = props.id,
+      options = props.options,
+      label = props.label,
+      required = props.required,
+      disabled = props.disabled,
+      readonly = props.readonly,
+      value = props.value,
+      multiple = props.multiple,
+      placeholder = props.placeholder,
+      autofocus = props.autofocus,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
+    var semanticProps = getSemanticProps({
+      uiSchema: uiSchema,
+      formContext: formContext,
+      options: options,
       defaultSchemaProps: {
         inverted: "false",
         selection: true,
@@ -1102,47 +1095,32 @@
         upward: false
       }
     });
-    const {
-      enumDisabled,
-      enumOptions
-    } = options;
-    const emptyValue = multiple ? [] : "";
-    const dropdownOptions = createDefaultValueOptionsForDropDown(enumOptions, enumDisabled);
-
-    const _onChange = (event, // eslint-disable-next-line no-shadow
-    _ref2) => {
-      let {
-        value
-      } = _ref2;
-      return onChange && onChange(utils.processSelectValue(schema, value, options));
-    }; // eslint-disable-next-line no-shadow
-
-
-    const _onBlur = _ref3 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref3;
-      return onBlur && onBlur(id, utils.processSelectValue(schema, value, options));
+    var enumDisabled = options.enumDisabled,
+      enumOptions = options.enumOptions,
+      optEmptyVal = options.emptyValue;
+    var emptyValue = multiple ? [] : "";
+    var dropdownOptions = createDefaultValueOptionsForDropDown(enumOptions, enumDisabled);
+    var _onChange = function _onChange(_, _ref2) {
+      var value = _ref2.value;
+      return onChange(utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
     };
-
-    const _onFocus = _ref4 => {
-      let {
-        // eslint-disable-next-line no-shadow
-        target: {
-          value
-        }
-      } = _ref4;
-      return onFocus && onFocus(id, utils.processSelectValue(schema, value, options));
+    // eslint-disable-next-line no-shadow
+    var _onBlur = function _onBlur(_, _ref3) {
+      var value = _ref3.target.value;
+      return onBlur(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
     };
-
+    var _onFocus = function _onFocus(_, _ref4) {
+      var value = _ref4.target.value;
+      return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
+    };
+    var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Dropdown, _extends({
       key: id,
-      name: name,
+      id: id,
+      name: id,
       label: label || schema.title,
       multiple: typeof multiple === "undefined" ? false : multiple,
-      value: typeof value === "undefined" ? emptyValue : value,
+      value: typeof value === "undefined" ? emptyValue : selectedIndexes,
       error: rawErrors.length > 0,
       disabled: disabled,
       placeholder: placeholder
@@ -1153,97 +1131,109 @@
       options: dropdownOptions,
       onChange: _onChange,
       onBlur: _onBlur,
-      onFocus: _onFocus
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     }));
   }
 
+  /** The `TextareaWidget` is a widget for rendering input fields as textarea.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
   function TextareaWidget(props) {
-    const {
-      id,
-      placeholder,
-      value,
-      required,
-      disabled,
-      autofocus,
-      label,
-      name,
-      readonly,
-      onBlur,
-      onFocus,
-      onChange,
-      options,
-      schema,
-      uiSchema,
-      formContext,
-      registry,
-      rawErrors = []
-    } = props;
-    const semanticProps = getSemanticProps({
-      formContext,
-      options,
+    var id = props.id,
+      placeholder = props.placeholder,
+      value = props.value,
+      required = props.required,
+      disabled = props.disabled,
+      autofocus = props.autofocus,
+      label = props.label,
+      readonly = props.readonly,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      onChange = props.onChange,
+      options = props.options,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      formContext = props.formContext,
+      registry = props.registry,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
+    var semanticProps = getSemanticProps({
+      formContext: formContext,
+      options: options,
       defaultSchemaProps: {
         inverted: false
       }
     });
-    const {
-      schemaUtils
-    } = registry; // eslint-disable-next-line no-shadow
-
-    const _onChange = _ref => {
-      let {
-        target: {
-          value
-        }
-      } = _ref;
+    var schemaUtils = registry.schemaUtils;
+    // eslint-disable-next-line no-shadow
+    var _onChange = function _onChange(_ref) {
+      var value = _ref.target.value;
       return onChange && onChange(value === "" ? options.emptyValue : value);
     };
-
-    const _onBlur = () => onBlur && onBlur(id, value);
-
-    const _onFocus = () => onFocus && onFocus(id, value);
-
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
+    var _onBlur = function _onBlur() {
+      return onBlur && onBlur(id, value);
+    };
+    var _onFocus = function _onFocus() {
+      return onFocus && onFocus(id, value);
+    };
+    var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
     return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.TextArea, _extends({
       id: id,
       key: id,
+      name: id,
       label: displayLabel ? label || schema.title : false,
       placeholder: placeholder,
       autoFocus: autofocus,
       required: required,
-      disabled: disabled || readonly,
-      name: name
+      disabled: disabled || readonly
     }, semanticProps, {
       value: value || "",
       error: rawErrors.length > 0,
       rows: options.rows || 5,
       onChange: _onChange,
       onBlur: _onBlur,
-      onFocus: _onFocus
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
     }));
   }
 
-  var Widgets = {
-    CheckboxWidget,
-    CheckboxesWidget,
-    RadioWidget,
-    RangeWidget,
-    SelectWidget,
-    TextareaWidget
-  };
+  function generateWidgets() {
+    return {
+      CheckboxWidget: CheckboxWidget,
+      CheckboxesWidget: CheckboxesWidget,
+      RadioWidget: RadioWidget,
+      RangeWidget: RangeWidget,
+      SelectWidget: SelectWidget,
+      TextareaWidget: TextareaWidget
+    };
+  }
+  var Widgets = /*#__PURE__*/generateWidgets();
 
-  const Theme = {
-    templates: Templates,
-    widgets: Widgets,
-    _internalFormWrapper: semanticUiReact.Form
-  };
+  function generateTheme() {
+    return {
+      templates: generateTemplates(),
+      widgets: generateWidgets(),
+      _internalFormWrapper: semanticUiReact.Form
+    };
+  }
+  var Theme = /*#__PURE__*/generateTheme();
 
-  const SemanticUIForm = /*#__PURE__*/core.withTheme(Theme);
+  function generateForm() {
+    return core.withTheme(generateTheme());
+  }
+  var SemanticUIForm = /*#__PURE__*/generateForm();
 
   exports.Form = SemanticUIForm;
   exports.Templates = Templates;
   exports.Theme = Theme;
   exports.Widgets = Widgets;
   exports["default"] = SemanticUIForm;
+  exports.generateForm = generateForm;
+  exports.generateTemplates = generateTemplates;
+  exports.generateTheme = generateTheme;
+  exports.generateWidgets = generateWidgets;
 
   Object.defineProperty(exports, '__esModule', { value: true });