@rjsf/semantic-ui 5.0.0-beta.9 → 5.0.1

package/dist/semantic-ui.esm.js

@@ -1,186 +1,196 @@
 import { withTheme } from '@rjsf/core';
 import { Button, Icon, Segment, Grid, Form, Message, Label, List, Header, Radio, Input } from 'semantic-ui-react';
 import React from 'react';
-import { getUiOptions, getTemplate, isFixedItems, getInputProps, ADDITIONAL_PROPERTY_FLAG, canExpand, getSubmitButtonOptions, rangeSpec, processSelectValue } from '@rjsf/utils';
-import PropTypes from 'prop-types';
+import { getUiOptions, getTemplate, isFixedItems, UI_OPTIONS_KEY, getInputProps, examplesId, ariaDescribedByIds, descriptionId, titleId, canExpand, getSubmitButtonOptions, ADDITIONAL_PROPERTY_FLAG, schemaRequiresTrueValue, enumOptionsIsSelected, optionId, enumOptionsSelectValue, enumOptionsDeselectValue, enumOptionsValueForIndex, rangeSpec, enumOptionsIndexForValue } from '@rjsf/utils';
 import { nanoid } from 'nanoid';
-import _ from 'lodash-es';
+import map from 'lodash-es/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;
+}
 
+var _excluded$4 = ["uiSchema", "registry", "color"];
+/** The `AddButton` renders a button that represent the `Add` action on a form
+ */
 function AddButton(_ref) {
-  let {
-    uiSchema,
-    ...props
-  } = _ref;
+  var color = _ref.color,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   return /*#__PURE__*/React.createElement(Button, _extends({
-    title: "Add Item"
+    title: "Add Item",
+    color: color
   }, props, {
     icon: true,
-    size: "tiny",
-    labelPosition: "left"
+    size: "tiny"
   }), /*#__PURE__*/React.createElement(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 = 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 = 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.createElement(Component, props) : props.children;
+  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.createElement(Component, _extends({}, 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;
-}
-
-const ArrayFieldItemTemplate = props => {
-  const {
-    children,
-    disabled,
-    hasToolbar,
-    hasMoveDown,
-    hasMoveUp,
-    hasRemove,
-    horizontalButtons,
-    index,
-    onDropIndexClick,
-    onReorderClick,
-    readonly,
-    wrapItem,
-    uiSchema,
-    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 = 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.createElement("div", {
     className: "array-item"
   }, /*#__PURE__*/React.createElement(MaybeWrap, {
     wrap: wrapItem,
     component: Segment
   }, /*#__PURE__*/React.createElement(Grid, {
-    style: !isInitialArrayItem(props) ? { ...gridStyle(!horizontalButtons),
+    style: index !== 0 ? _extends({}, gridStyle(!horizontalButtons), {
       alignItems: "center"
-    } : gridStyle(!horizontalButtons)
+    }) : gridStyle(!horizontalButtons)
   }, /*#__PURE__*/React.createElement(Grid.Column, {
     width: 16,
     verticalAlign: "middle"
@@ -191,85 +201,97 @@ const ArrayFieldItemTemplate = props => {
     className: "array-item-move-up",
     disabled: disabled || readonly || !hasMoveUp,
     onClick: onReorderClick(index, index - 1),
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React.createElement(MoveDownButton, {
     className: "array-item-move-down",
     disabled: disabled || readonly || !hasMoveDown,
     onClick: onReorderClick(index, index + 1),
-    uiSchema: uiSchema
+    uiSchema: uiSchema,
+    registry: registry
   }), hasRemove && /*#__PURE__*/React.createElement(RemoveButton, {
     className: "array-item-remove",
     disabled: disabled || readonly,
     onClick: onDropIndexClick(index),
-    uiSchema: uiSchema
+    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 = getUiOptions(uiSchema);
-  const ArrayFieldDescriptionTemplate = getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
-  const ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-  const ArrayFieldTitleTemplate = 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 = getUiOptions(uiSchema);
+  var ArrayFieldDescriptionTemplate = getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
+  var ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
+  var ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
+  var AddButton = registry.templates.ButtonTemplates.AddButton;
   return /*#__PURE__*/React.createElement("div", {
-    className: cleanClassNames([className, classNames, isFixedItems(schema) ? "" : "sortable-form-fields"])
+    className: cleanClassNames([className, isFixedItems(schema) ? "" : "sortable-form-fields"])
   }, /*#__PURE__*/React.createElement(ArrayFieldTitleTemplate, {
     idSchema: idSchema,
-    title: fieldTitle,
+    title: uiOptions.title || title,
+    schema: schema,
     uiSchema: uiSchema,
     required: required,
     registry: registry
-  }), fieldDescription && /*#__PURE__*/React.createElement(ArrayFieldDescriptionTemplate, {
+  }), /*#__PURE__*/React.createElement(ArrayFieldDescriptionTemplate, {
     idSchema: idSchema,
-    description: fieldDescription,
+    description: uiOptions.description || schema.description,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), /*#__PURE__*/React.createElement("div", {
     key: "array-item-list-" + idSchema.$id
   }, /*#__PURE__*/React.createElement("div", {
     className: "row array-item-list"
-  }, items && items.map(props => /*#__PURE__*/React.createElement(ArrayFieldItemTemplate, _extends({}, props, itemProps)))), canAdd && /*#__PURE__*/React.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[UI_OPTIONS_KEY] = _extends({}, itemUiSchema[UI_OPTIONS_KEY], {
+      semantic: semantic
+    }), _extends2));
+    return /*#__PURE__*/React.createElement(ArrayFieldItemTemplate, _extends({
+      key: key
+    }, props, {
+      uiSchema: mergedUiSchema
+    }));
+  })), canAdd && /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: "1rem",
       position: "relative",
@@ -277,77 +299,77 @@ function ArrayFieldTemplate(_ref) {
     }
   }, /*#__PURE__*/React.createElement(AddButton, {
     onClick: onAddClick,
-    disabled: disabled || readOnly,
-    uiSchema: uiSchema
+    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 = 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 = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(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 ? examplesId(id) : undefined
   }, semanticProps, {
     value: value || value === 0 ? value : "",
     error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
-  })), schema.examples && /*#__PURE__*/React.createElement("datalist", {
-    id: "examples_" + id
-  }, schema.examples.concat(schema.default ? [schema.default] : []).map(example => {
+    onFocus: _onFocus,
+    "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
+  })), Array.isArray(schema.examples) && /*#__PURE__*/React.createElement("datalist", {
+    id: examplesId(id)
+  }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
     return /*#__PURE__*/React.createElement("option", {
       key: example,
       value: example
@@ -355,65 +377,51 @@ function BaseInputTemplate(props) {
   })));
 }
 
-/* eslint-disable react/prop-types */
-
-function DescriptionField(_ref) {
-  let {
-    className,
-    description,
-    id
-  } = _ref;
-
-  if (description) {
-    return /*#__PURE__*/React.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.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.createElement(Message, {
     negative: true
-  }, /*#__PURE__*/React.createElement(Message.Header, null, "Errors"), /*#__PURE__*/React.createElement(Message.List, null, errors.map((error, index) => /*#__PURE__*/React.createElement(Message.Item, {
-    key: "error-" + index
-  }, error.stack))));
+  }, /*#__PURE__*/React.createElement(Message.Header, null, "Errors"), /*#__PURE__*/React.createElement(Message.List, null, errors.map(function (error, index) {
+    return /*#__PURE__*/React.createElement(Message.Item, {
+      key: "error-" + index
+    }, error.stack);
+  })));
 }
 
-ErrorList.propTypes = {
-  errors: PropTypes.array
-};
-
+var _excluded$1 = ["icon", "iconType", "color", "className", "uiSchema", "registry"];
 function IconButton(props) {
-  const {
-    icon,
-    iconType,
-    className,
-    uiSchema,
-    ...otherProps
-  } = props;
+  var icon = props.icon,
+    iconType = props.iconType,
+    color = props.color,
+    className = props.className,
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
   return /*#__PURE__*/React.createElement(Button, _extends({
     icon: icon,
     size: iconType,
+    color: color,
     className: className
   }, otherProps));
 }
-
-IconButton.propTypes = {
-  icon: PropTypes.string.isRequired,
-  className: PropTypes.string
-};
 function MoveDownButton(props) {
   return /*#__PURE__*/React.createElement(IconButton, _extends({
     title: "Move down"
@@ -436,37 +444,31 @@ function RemoveButton(props) {
   }));
 }
 
-/* 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.createElement(Label, {
       id: id,
       color: "red",
@@ -475,38 +477,24 @@ function FieldErrorTemplate(_ref) {
       basic: true
     }, /*#__PURE__*/React.createElement(List, {
       bulleted: true
-    }, errors.map(error => /*#__PURE__*/React.createElement(List.Item, {
-      key: nanoid()
-    }, error))));
+    }, errors.map(function (error) {
+      return /*#__PURE__*/React.createElement(List.Item, {
+        key: nanoid()
+      }, error);
+    })));
   }
-
   return null;
 }
 
-FieldErrorTemplate.defaultProps = {
-  options: {
-    pointing: "above",
-    size: "small"
-  }
-};
-FieldErrorTemplate.propTypes = {
-  options: PropTypes.object,
-  errors: PropTypes.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.createElement(Message, {
       size: "mini",
       info: true,
@@ -514,116 +502,36 @@ function FieldHelpTemplate(_ref) {
       content: help
     });
   }
-
   return null;
 }
 
-FieldHelpTemplate.propTypes = {
-  helpText: PropTypes.string,
-  id: PropTypes.string
-};
-
-const WrapIfAdditional = _ref => {
-  let {
-    children,
-    classNames,
-    disabled,
-    formContext,
-    id,
-    label,
-    onDropPropertyClick,
-    onKeyChange,
-    readonly,
-    required,
-    schema,
-    uiSchema,
-    registry
-  } = _ref;
-  const {
-    RemoveButton
-  } = registry.templates.ButtonTemplates;
-  const {
-    readonlyAsDisabled = true,
-    wrapperStyle
-  } = formContext;
-  const keyLabel = label + " Key"; // i18n ?
-
-  const additional = (ADDITIONAL_PROPERTY_FLAG in schema);
-
-  if (!additional) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: classNames
-    }, children);
-  }
-
-  const handleBlur = _ref2 => {
-    let {
-      target
-    } = _ref2;
-    return onKeyChange(target.value);
-  };
-
-  return /*#__PURE__*/React.createElement("div", {
-    className: classNames,
-    key: id + "-key"
-  }, /*#__PURE__*/React.createElement(Grid, {
-    columns: "equal"
-  }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Column, {
-    className: "form-additional"
-  }, /*#__PURE__*/React.createElement(Form.Group, {
-    widths: "equal",
-    grouped: true
-  }, /*#__PURE__*/React.createElement(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.createElement(Grid.Column, {
-    className: "form-additional",
-    verticalAlign: "middle"
-  }, children), /*#__PURE__*/React.createElement(Grid.Column, null, /*#__PURE__*/React.createElement(RemoveButton, {
-    iconType: "mini",
-    className: "array-item-remove",
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label),
-    uiSchema: uiSchema
-  })))));
-};
-
-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 = getUiOptions(uiSchema);
-  const DescriptionFieldTemplate = 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 = getUiOptions(uiSchema);
+  var WrapIfAdditionalTemplate = getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
+  var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions);
   if (hidden) {
     return /*#__PURE__*/React.createElement("div", {
       style: {
@@ -631,14 +539,15 @@ function FieldTemplate(_ref) {
       }
     }, children);
   }
-
-  return /*#__PURE__*/React.createElement(WrapIfAdditional, _extends({
+  return /*#__PURE__*/React.createElement(WrapIfAdditionalTemplate, _extends({
     classNames: classNames,
+    style: style,
     id: id,
     label: label,
     registry: registry,
+    schema: schema,
     uiSchema: uiSchema
-  }, props), /*#__PURE__*/React.createElement(Form.Group, {
+  }, otherProps), /*#__PURE__*/React.createElement(Form.Group, {
     key: id,
     widths: "equal",
     grouped: true
@@ -649,50 +558,56 @@ function FieldTemplate(_ref) {
     wrap: wrapLabel,
     className: "sui-field-label"
   }, rawDescription && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
-    id: id + "-description",
-    description: rawDescription
+    id: 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 = getUiOptions(uiSchema);
-  const TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, uiOptions);
-  const DescriptionFieldTemplate = 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 = getUiOptions(uiSchema);
+  var TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, uiOptions);
+  var DescriptionFieldTemplate = 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.createElement(React.Fragment, null, fieldTitle && /*#__PURE__*/React.createElement(TitleFieldTemplate, {
-    id: idSchema.$id + "-title",
+    id: titleId(idSchema),
     title: fieldTitle,
     required: required,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), fieldDescription && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
-    id: idSchema.$id + "-description",
+    id: descriptionId(idSchema),
     description: fieldDescription,
+    schema: schema,
+    uiSchema: uiSchema,
     registry: registry
-  }), properties.map(prop => prop.content), canExpand(schema, uiSchema, formData) && /*#__PURE__*/React.createElement(Grid.Column, {
+  }), properties.map(function (prop) {
+    return prop.content;
+  }), canExpand(schema, uiSchema, formData) && /*#__PURE__*/React.createElement(Grid.Column, {
     width: 16,
     verticalAlign: "middle"
   }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement("div", {
@@ -703,120 +618,201 @@ function ObjectFieldTemplate(_ref) {
     }
   }, /*#__PURE__*/React.createElement(AddButton, {
     onClick: onAddClick(schema),
-    disabled: disabled || readOnly,
-    uiSchema: uiSchema
+    disabled: disabled || readonly,
+    uiSchema: uiSchema,
+    registry: registry
   })))));
 }
 
-var SubmitButton = (_ref => {
-  let {
-    uiSchema
-  } = _ref;
-  const {
-    submitText,
-    norender,
-    props: submitButtonProps
-  } = getSubmitButtonOptions(uiSchema);
-
+/** The `SubmitButton` renders a button that represent the `Submit` action on a form
+ */
+function SubmitButton(_ref) {
+  var uiSchema = _ref.uiSchema;
+  var _getSubmitButtonOptio = getSubmitButtonOptions(uiSchema),
+    submitText = _getSubmitButtonOptio.submitText,
+    norender = _getSubmitButtonOptio.norender,
+    _getSubmitButtonOptio2 = _getSubmitButtonOptio.props,
+    submitButtonProps = _getSubmitButtonOptio2 === void 0 ? {} : _getSubmitButtonOptio2;
   if (norender) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement(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 = 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.createElement(Header, _extends({
+    id: id
+  }, semanticProps, {
+    as: "h5"
+  }), title);
+}
 
-  if (title) {
-    return /*#__PURE__*/React.createElement(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 = (ADDITIONAL_PROPERTY_FLAG in schema);
+  if (!additional) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames,
+      style: style
+    }, children);
   }
+  var handleBlur = function handleBlur(_ref) {
+    var target = _ref.target;
+    return onKeyChange(target.value);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames,
+    style: style,
+    key: id + "-key"
+  }, /*#__PURE__*/React.createElement(Grid, {
+    columns: "equal"
+  }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Column, {
+    className: "form-additional"
+  }, /*#__PURE__*/React.createElement(Form.Group, {
+    widths: "equal",
+    grouped: true
+  }, /*#__PURE__*/React.createElement(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.createElement(Grid.Column, {
+    className: "form-additional",
+    verticalAlign: "middle"
+  }, children), /*#__PURE__*/React.createElement(Grid.Column, null, /*#__PURE__*/React.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 = 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.createElement(Form.Checkbox, _extends({
     id: id,
+    name: id,
     disabled: disabled || readonly,
     autoFocus: autofocus
   }, semanticProps, {
@@ -826,219 +822,206 @@ function CheckboxWidget(props) {
     onBlur: _onBlur,
     onFocus: _onFocus,
     required: required,
-    label: displayLabel ? label || schema.title : false
+    label: label || "",
+    "aria-describedby": 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 = 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 = 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(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+      } else {
+        onChange(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.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(TitleFieldTemplate, {
-    id: id + "-title",
+    id: titleId(id),
     title: title,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), /*#__PURE__*/React.createElement(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 = enumOptionsIsSelected(option.value, checkboxesValues);
+    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     return /*#__PURE__*/React.createElement(Form.Checkbox, _extends({
-      id: id + "_" + index,
-      key: id + "_" + index,
+      id: 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": 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(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.createElement(Form.Group, inlineOption, enumOptions.map((option, i) => {
-    const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+  return /*#__PURE__*/React.createElement(Form.Group, _extends({}, inlineOption), Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+    var checked = enumOptionsIsSelected(option.value, value);
+    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     return /*#__PURE__*/React.createElement(Form.Field, _extends({
       required: required,
       control: Radio,
-      name: id + "-radio-" + option.value
+      id: 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": 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, _extends({
     id: id,
     key: id,
-    name: name,
+    name: id,
     type: "range",
     required: required,
     disabled: disabled || readonly
@@ -1047,62 +1030,59 @@ function RangeWidget(props) {
     error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": ariaDescribedByIds(id)
   })), /*#__PURE__*/React.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 = _.map(enumOptions, _ref => {
-    let {
-      label,
-      value
-    } = _ref;
+  var disabledOptions = enumDisabled || [];
+  var options = map(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,
@@ -1111,47 +1091,32 @@ function SelectWidget(props) {
       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(processSelectValue(schema, value, options));
-  }; // eslint-disable-next-line no-shadow
-
-
-  const _onBlur = _ref3 => {
-    let {
-      target: {
-        value
-      }
-    } = _ref3;
-    return onBlur && onBlur(id, 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(enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
   };
-
-  const _onFocus = _ref4 => {
-    let {
-      // eslint-disable-next-line no-shadow
-      target: {
-        value
-      }
-    } = _ref4;
-    return onFocus && onFocus(id, processSelectValue(schema, value, options));
+  // eslint-disable-next-line no-shadow
+  var _onBlur = function _onBlur(_, _ref3) {
+    var value = _ref3.target.value;
+    return onBlur(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
   };
-
+  var _onFocus = function _onFocus(_, _ref4) {
+    var value = _ref4.target.value;
+    return onFocus(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
+  };
+  var selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
   return /*#__PURE__*/React.createElement(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
@@ -1162,91 +1127,99 @@ function SelectWidget(props) {
     options: dropdownOptions,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
+    onFocus: _onFocus,
+    "aria-describedby": 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.createElement(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": 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: Form
-};
+function generateTheme() {
+  return {
+    templates: generateTemplates(),
+    widgets: generateWidgets(),
+    _internalFormWrapper: Form
+  };
+}
+var Theme = /*#__PURE__*/generateTheme();
 
-const SemanticUIForm = /*#__PURE__*/withTheme(Theme);
+function generateForm() {
+  return withTheme(generateTheme());
+}
+var SemanticUIForm = /*#__PURE__*/generateForm();
 
-export { SemanticUIForm as Form, Templates, Theme, Widgets, SemanticUIForm as default };
+export { SemanticUIForm as Form, Templates, Theme, Widgets, SemanticUIForm as default, generateForm, generateTemplates, generateTheme, generateWidgets };
 //# sourceMappingURL=semantic-ui.esm.js.map