@rjsf/semantic-ui 4.2.2 → 5.0.0-beta.2

package/dist/semantic-ui.esm.js

@@ -1,12 +1,13 @@
-import { utils, withTheme } from '@rjsf/core';
-import { Button, Icon, Segment, Grid, Message, Header, Label, List, Form, Radio, Input } from 'semantic-ui-react';
+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 { nanoid } from 'nanoid';
 import _ from 'lodash-es';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -19,33 +20,19 @@ function _extends() {
 
     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) {
-  return React.createElement(Button, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    title: "Add Item"
+  }, props, {
     icon: true,
     size: "tiny",
     labelPosition: "left"
-  }), React.createElement(Icon, {
+  }), /*#__PURE__*/React.createElement(Icon, {
     name: "plus"
-  }), "Add Item");
+  }));
 }
 
 /**
@@ -61,24 +48,23 @@ function AddButton(props) {
  */
 
 function getSemanticProps(_ref) {
-  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
-  } : _ref$defaultSchemaPro,
-      _ref$defaultContextPr = _ref.defaultContextProps,
-      defaultContextProps = _ref$defaultContextPr === void 0 ? {} : _ref$defaultContextPr;
-  var formContextProps = formContext.semantic;
-  var schemaProps = uiSchema["ui:options"] && uiSchema["ui:options"].semantic;
-  var optionProps = options.semantic; // formContext props should overide other props
-
-  return Object.assign({}, _extends({}, defaultSchemaProps && defaultSchemaProps), _extends({}, defaultContextProps && defaultContextProps), schemaProps, optionProps, formContextProps);
+  let {
+    formContext = {},
+    uiSchema = {},
+    options = {},
+    defaultSchemaProps = {
+      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);
 }
 /**
  * Extract error props meant for semantic UI components from props that are
@@ -91,21 +77,20 @@ function getSemanticProps(_ref) {
  */
 
 function getSemanticErrorProps(_ref2) {
-  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$defaultProps;
-  var formContextProps = formContext.semantic && formContext.semantic.errorOptions;
-  var schemaProps = uiSchema["ui:options"] && uiSchema["ui:options"].semantic && uiSchema["ui:options"].semantic.errorOptions;
-  var optionProps = options.semantic && options.semantic.errorOptions;
-  return Object.assign({}, _extends({}, defaultProps && defaultProps), schemaProps, optionProps, formContextProps);
+  let {
+    formContext = {},
+    uiSchema = {},
+    options = {},
+    defaultProps = {
+      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);
 }
 /**
  * Combine multiple strings containing class names into a single string,
@@ -124,14 +109,10 @@ function cleanClassNames(classNameArr, omit) {
 
   // Split each arg on whitespace, and add it to an array. Skip false-y args
   // like "" and undefined.
-  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
+  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
   // returning them as a string
 
-  return [].concat(new Set(classList.filter(function (cn) {
-    return !omit.includes(cn);
-  }))).join(" ");
+  return [...new Set(classList.filter(cn => !omit.includes(cn)))].join(" ");
 }
 /**
  *
@@ -143,235 +124,237 @@ function cleanClassNames(classNameArr, omit) {
  */
 
 function MaybeWrap(_ref3) {
-  var wrap = _ref3.wrap,
-      _ref3$component = _ref3.component,
-      Component = _ref3$component === void 0 ? "div" : _ref3$component,
-      props = _objectWithoutPropertiesLoose(_ref3, ["wrap", "component"]);
-
-  return wrap ? React.createElement(Component, props) : props.children;
+  let {
+    wrap,
+    component: Component = "div",
+    ...props
+  } = _ref3;
+  return wrap ? /*#__PURE__*/React.createElement(Component, props) : props.children;
 }
 
-var isFixedItems = utils.isFixedItems;
-
-var ArrayFieldTitle = function ArrayFieldTitle(_ref) {
-  var TitleField = _ref.TitleField,
-      idSchema = _ref.idSchema,
-      uiSchema = _ref.uiSchema,
-      title = _ref.title;
-
-  if (!title) {
-    return null;
-  }
-
-  var id = idSchema.$id + "__title";
-  return React.createElement(TitleField, {
-    id: id,
-    title: title,
-    options: uiSchema["ui:options"]
-  });
-};
-
-function ArrayFieldDescription(_ref2) {
-  var DescriptionField = _ref2.DescriptionField,
-      idSchema = _ref2.idSchema,
-      description = _ref2.description;
-
-  if (!description) {
-    // See #312: Ensure compatibility with old versions of React.
-    return null;
-  }
-
-  var id = idSchema.$id + "__description";
-  return React.createElement(DescriptionField, {
-    id: id,
-    description: description
-  });
-}
-
-var gridStyle = function gridStyle(vertical) {
-  return {
-    display: "grid",
-    gridTemplateColumns: "1fr " + (vertical ? 65 : 110) + "px"
-  };
-}; // checks if its the first array item
+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
-  var idSchema = props.children.props.idSchema;
+  const {
+    idSchema
+  } = props.children.props;
   return idSchema.target && idSchema.conditions;
-} // Used in the two templates
-
+}
 
-function DefaultArrayItem(props) {
-  return React.createElement("div", {
-    className: "array-item",
-    key: props.key
-  }, React.createElement(MaybeWrap, {
-    wrap: props.wrapItem,
+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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "array-item"
+  }, /*#__PURE__*/React.createElement(MaybeWrap, {
+    wrap: wrapItem,
     component: Segment
-  }, React.createElement(Grid, {
-    style: !isInitialArrayItem(props) ? _extends({}, gridStyle(!props.horizontalButtons), {
+  }, /*#__PURE__*/React.createElement(Grid, {
+    style: !isInitialArrayItem(props) ? { ...gridStyle(!horizontalButtons),
       alignItems: "center"
-    }) : gridStyle(!props.horizontalButtons)
-  }, React.createElement(Grid.Column, {
+    } : gridStyle(!horizontalButtons)
+  }, /*#__PURE__*/React.createElement(Grid.Column, {
     width: 16,
     verticalAlign: "middle"
-  }, props.children), props.hasToolbar && React.createElement(Grid.Column, null, (props.hasMoveUp || props.hasMoveDown || props.hasRemove) && React.createElement(Button.Group, {
+  }, children), hasToolbar && /*#__PURE__*/React.createElement(Grid.Column, null, (hasMoveUp || hasMoveDown || hasRemove) && /*#__PURE__*/React.createElement(Button.Group, {
     size: "mini",
-    vertical: !props.horizontalButtons
-  }, (props.hasMoveUp || props.hasMoveDown) && React.createElement(Button, {
-    icon: "angle up",
+    vertical: !horizontalButtons
+  }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React.createElement(MoveUpButton, {
     className: "array-item-move-up",
-    tabIndex: "-1",
-    disabled: props.disabled || props.readOnly || !props.hasMoveUp,
-    onClick: props.onReorderClick(props.index, props.index - 1)
-  }), (props.hasMoveUp || props.hasMoveDown) && React.createElement(Button, {
-    icon: "angle down",
+    disabled: disabled || readonly || !hasMoveUp,
+    onClick: onReorderClick(index, index - 1)
+  }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React.createElement(MoveDownButton, {
     className: "array-item-move-down",
-    tabIndex: "-1",
-    disabled: props.disabled || props.readOnly || !props.hasMoveDown,
-    onClick: props.onReorderClick(props.index, props.index + 1)
-  }), props.hasRemove && React.createElement(Button, {
-    icon: "trash",
+    disabled: disabled || readonly || !hasMoveDown,
+    onClick: onReorderClick(index, index + 1)
+  }), hasRemove && /*#__PURE__*/React.createElement(RemoveButton, {
     className: "array-item-remove",
-    tabIndex: "-1",
-    disabled: props.disabled || props.readOnly,
-    onClick: props.onDropIndexClick(props.index)
+    disabled: disabled || readonly,
+    onClick: onDropIndexClick(index)
   }))))));
-} // Used for arrays that are represented as multiple selection fields
-// (displayed as a multi select or checkboxes)
-
-
-function DefaultFixedArrayFieldTemplate(_ref3) {
-  var uiSchema = _ref3.uiSchema,
-      idSchema = _ref3.idSchema,
-      canAdd = _ref3.canAdd,
-      className = _ref3.className,
-      classNames = _ref3.classNames,
-      disabled = _ref3.disabled,
-      items = _ref3.items,
-      onAddClick = _ref3.onAddClick,
-      readOnly = _ref3.readOnly,
-      required = _ref3.required,
-      schema = _ref3.schema,
-      title = _ref3.title,
-      TitleField = _ref3.TitleField,
-      itemProps = _ref3.itemProps;
-  var fieldTitle = uiSchema["ui:title"] || title;
-  var fieldDescription = uiSchema["ui:description"] || schema.description;
-  return React.createElement("div", {
-    className: cleanClassNames([className, classNames])
-  }, React.createElement(ArrayFieldTitle, {
-    key: "array-field-title-" + idSchema.$id,
-    TitleField: TitleField,
-    idSchema: idSchema,
-    uiSchema: uiSchema,
-    title: fieldTitle,
-    required: required
-  }), fieldDescription && React.createElement("div", {
-    className: "field-description",
-    key: "field-description-" + idSchema.$id
-  }, fieldDescription), React.createElement("div", {
-    key: "array-item-list-" + idSchema.$id
-  }, React.createElement("div", {
-    className: "row array-item-list"
-  }, items && items.map(function (p) {
-    return DefaultArrayItem(_extends({}, p, itemProps));
-  })), canAdd && React.createElement("div", {
-    style: {
-      marginTop: "1rem",
-      position: "relative",
-      textAlign: "right"
-    }
-  }, React.createElement(AddButton, {
-    onClick: onAddClick,
-    disabled: disabled || readOnly
-  }))));
-}
+};
 
-function DefaultNormalArrayFieldTemplate(_ref4) {
-  var uiSchema = _ref4.uiSchema,
-      idSchema = _ref4.idSchema,
-      canAdd = _ref4.canAdd,
-      className = _ref4.className,
-      classNames = _ref4.classNames,
-      disabled = _ref4.disabled,
-      DescriptionField = _ref4.DescriptionField,
-      items = _ref4.items,
-      onAddClick = _ref4.onAddClick,
-      readOnly = _ref4.readOnly,
-      required = _ref4.required,
-      schema = _ref4.schema,
-      title = _ref4.title,
-      TitleField = _ref4.TitleField,
-      itemProps = _ref4.itemProps;
-  var fieldTitle = uiSchema["ui:title"] || title;
-  var fieldDescription = uiSchema["ui:description"] || schema.description;
-  return React.createElement("div", {
-    className: cleanClassNames([className, classNames, "sortable-form-fields"])
-  }, React.createElement(ArrayFieldTitle, {
-    key: "array-field-title-" + idSchema.$id,
-    TitleField: TitleField,
+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,
+    defaultSchemaProps: {
+      horizontalButtons: false,
+      wrapItem: false
+    }
+  });
+  const {
+    horizontalButtons,
+    wrapItem
+  } = semanticProps;
+  const itemProps = {
+    horizontalButtons,
+    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;
+  return /*#__PURE__*/React.createElement("div", {
+    className: cleanClassNames([className, classNames, isFixedItems(schema) ? "" : "sortable-form-fields"])
+  }, /*#__PURE__*/React.createElement(ArrayFieldTitleTemplate, {
     idSchema: idSchema,
-    uiSchema: uiSchema,
     title: fieldTitle,
-    required: required
-  }), fieldDescription && React.createElement(ArrayFieldDescription, {
-    key: "array-field-description-" + idSchema.$id,
-    DescriptionField: DescriptionField,
+    uiSchema: uiSchema,
+    required: required,
+    registry: registry
+  }), fieldDescription && /*#__PURE__*/React.createElement(ArrayFieldDescriptionTemplate, {
     idSchema: idSchema,
-    description: fieldDescription
-  }), React.createElement("div", {
+    description: fieldDescription,
+    uiSchema: uiSchema,
+    registry: registry
+  }), /*#__PURE__*/React.createElement("div", {
     key: "array-item-list-" + idSchema.$id
-  }, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "row array-item-list"
-  }, items && items.map(function (p) {
-    return DefaultArrayItem(_extends({}, p, itemProps));
-  })), canAdd && React.createElement("div", {
+  }, items && items.map(props => /*#__PURE__*/React.createElement(ArrayFieldItemTemplate, _extends({}, props, itemProps)))), canAdd && /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: "1rem",
       position: "relative",
       textAlign: "right"
     }
-  }, React.createElement(AddButton, {
+  }, /*#__PURE__*/React.createElement(AddButton, {
     onClick: onAddClick,
     disabled: disabled || readOnly
   }))));
 }
 
-function ArrayFieldTemplate(props) {
-  var options = props.options,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      formContext = props.formContext;
-  var semanticProps = getSemanticProps({
-    options: options,
-    uiSchema: uiSchema,
-    formContext: formContext,
-    defaultSchemaProps: {
-      horizontalButtons: false,
-      wrapItem: false
-    }
+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 horizontalButtons = semanticProps.horizontalButtons,
-      wrapItem = semanticProps.wrapItem;
-  var itemProps = {
-    horizontalButtons: horizontalButtons,
-    wrapItem: wrapItem
+  const {
+    schemaUtils
+  } = registry; // eslint-disable-next-line no-shadow
+
+  const _onChange = _ref => {
+    let {
+      target: {
+        value
+      }
+    } = _ref;
+    return onChange(value === "" ? options.emptyValue : value);
   };
 
-  if (isFixedItems(schema)) {
-    return React.createElement(DefaultFixedArrayFieldTemplate, _extends({}, props, {
-      itemProps: itemProps
-    }));
-  }
+  const _onBlur = () => onBlur && onBlur(id, value);
+
+  const _onFocus = () => onFocus && onFocus(id, value);
 
-  return React.createElement(DefaultNormalArrayFieldTemplate, _extends({}, props, {
-    itemProps: itemProps
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
+  return /*#__PURE__*/React.createElement(Form.Input, _extends({
+    key: id,
+    id: id,
+    placeholder: placeholder
+  }, inputProps, {
+    label: displayLabel ? label || schema.title : false,
+    required: required,
+    autoFocus: autofocus,
+    disabled: disabled || readonly,
+    name: name
+  }, semanticProps, {
+    value: value || value === 0 ? value : "",
+    error: rawErrors.length > 0,
+    onChange: _onChange,
+    onBlur: _onBlur,
+    onFocus: _onFocus
   }));
 }
 
+/* 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);
+  }
+}
+
 /* eslint-disable react/no-array-index-key */
 /**
  *
@@ -381,61 +364,59 @@ function ArrayFieldTemplate(props) {
  */
 
 function ErrorList(_ref) {
-  var errors = _ref.errors;
-  return React.createElement(Message, {
+  let {
+    errors
+  } = _ref;
+  return /*#__PURE__*/React.createElement(Message, {
     negative: true
-  }, React.createElement(Message.Header, null, "Errors"), React.createElement(Message.List, null, errors.map(function (error, index) {
-    return React.createElement(Message.Item, {
-      key: "error-" + index
-    }, error.stack);
-  })));
+  }, /*#__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))));
 }
 
 ErrorList.propTypes = {
   errors: PropTypes.array
 };
 
-/* eslint-disable react/prop-types */
-
-function DescriptionField(_ref) {
-  var className = _ref.className,
-      description = _ref.description;
-
-  if (description) {
-    return React.createElement("p", {
-      className: className || "sui-description"
-    }, description);
-  }
-}
-
-function TitleField(_ref) {
-  var title = _ref.title,
-      options = _ref.options;
-  var semantic = options.semantic;
-
-  if (title) {
-    return React.createElement(Header, _extends({}, semantic, {
-      as: "h5"
-    }), title);
-  }
+function IconButton(props) {
+  const {
+    icon,
+    iconType,
+    className,
+    ...otherProps
+  } = props;
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    icon: icon,
+    size: iconType,
+    className: className
+  }, otherProps));
 }
 
-TitleField.defaultProps = {
-  options: {
-    semantic: {
-      inverted: false,
-      dividing: true
-    }
-  }
-};
-TitleField.propTypes = {
-  options: PropTypes.object
-};
-
-var Fields = {
-  DescriptionField: DescriptionField,
-  TitleField: TitleField
+IconButton.propTypes = {
+  icon: PropTypes.string.isRequired,
+  className: PropTypes.string
 };
+function MoveDownButton(props) {
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    title: "Move down"
+  }, props, {
+    icon: "angle down"
+  }));
+}
+function MoveUpButton(props) {
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    title: "Move up"
+  }, props, {
+    icon: "angle up"
+  }));
+}
+function RemoveButton(props) {
+  return /*#__PURE__*/React.createElement(IconButton, _extends({
+    title: "Remove"
+  }, props, {
+    icon: "trash"
+  }));
+}
 
 /* eslint-disable react/prop-types */
 /**
@@ -443,11 +424,13 @@ var Fields = {
  */
 
 function HelpField(_ref) {
-  var helpText = _ref.helpText,
-      id = _ref.id;
+  let {
+    helpText,
+    id
+  } = _ref;
 
   if (helpText) {
-    return React.createElement(Message, {
+    return /*#__PURE__*/React.createElement(Message, {
       size: "mini",
       info: true,
       id: id,
@@ -474,25 +457,27 @@ HelpField.propTypes = {
  */
 
 function RawErrors(_ref) {
-  var errors = _ref.errors,
-      options = _ref.options;
-  var pointing = options.pointing,
-      size = options.size;
+  let {
+    errors,
+    options
+  } = _ref;
+  const {
+    pointing,
+    size
+  } = options;
 
   if (errors && errors.length > 0) {
-    return React.createElement(Label, {
+    return /*#__PURE__*/React.createElement(Label, {
       color: "red",
       pointing: pointing || "above",
       size: size || "small",
       basic: true
-    }, React.createElement(List, {
+    }, /*#__PURE__*/React.createElement(List, {
       bulleted: true
-    }, errors.map(function (error) {
-      return React.createElement(List.Item, {
-        key: nanoid(),
-        content: error
-      });
-    })));
+    }, errors.map(error => /*#__PURE__*/React.createElement(List.Item, {
+      key: nanoid(),
+      content: error
+    }))));
   }
 
   return null;
@@ -509,47 +494,56 @@ RawErrors.propTypes = {
   errors: PropTypes.array
 };
 
-var ADDITIONAL_PROPERTY_FLAG = utils.ADDITIONAL_PROPERTY_FLAG;
-
-var WrapIfAdditional = function WrapIfAdditional(_ref) {
-  var children = _ref.children,
-      classNames = _ref.classNames,
-      disabled = _ref.disabled,
-      formContext = _ref.formContext,
-      id = _ref.id,
-      label = _ref.label,
-      onDropPropertyClick = _ref.onDropPropertyClick,
-      onKeyChange = _ref.onKeyChange,
-      readonly = _ref.readonly,
-      required = _ref.required,
-      schema = _ref.schema;
-  var _formContext$readonly = formContext.readonlyAsDisabled,
-      readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly,
-      wrapperStyle = formContext.wrapperStyle;
-  var keyLabel = label + " Key"; // i18n ?
-
-  var additional = schema.hasOwnProperty(ADDITIONAL_PROPERTY_FLAG);
+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 = (ADDITIONAL_PROPERTY_FLAG in schema);
 
   if (!additional) {
-    return React.createElement(React.Fragment, null, children);
+    return /*#__PURE__*/React.createElement("div", {
+      className: classNames
+    }, children);
   }
 
-  var handleBlur = function handleBlur(_ref2) {
-    var target = _ref2.target;
+  const handleBlur = _ref2 => {
+    let {
+      target
+    } = _ref2;
     return onKeyChange(target.value);
   };
 
-  return React.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: classNames,
     key: id + "-key"
-  }, React.createElement(Grid, {
+  }, /*#__PURE__*/React.createElement(Grid, {
     columns: "equal"
-  }, React.createElement(Grid.Row, null, React.createElement(Grid.Column, {
+  }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement(Grid.Column, {
     className: "form-additional"
-  }, React.createElement(Form.Group, {
+  }, /*#__PURE__*/React.createElement(Form.Group, {
     widths: "equal",
     grouped: true
-  }, React.createElement(Form.Input, {
+  }, /*#__PURE__*/React.createElement(Form.Input, {
     className: "form-group",
     hasFeedback: true,
     fluid: true,
@@ -563,159 +557,243 @@ var WrapIfAdditional = function WrapIfAdditional(_ref) {
     onBlur: !readonly ? handleBlur : undefined,
     style: wrapperStyle,
     type: "text"
-  }))), React.createElement(Grid.Column, {
+  }))), /*#__PURE__*/React.createElement(Grid.Column, {
     className: "form-additional",
     verticalAlign: "middle"
-  }, children), React.createElement(Grid.Column, null, React.createElement(Button, {
-    size: "mini",
-    icon: "trash",
+  }, children), /*#__PURE__*/React.createElement(Grid.Column, null, /*#__PURE__*/React.createElement(RemoveButton, {
+    iconType: "mini",
     className: "array-item-remove",
-    tabIndex: "-1",
     disabled: disabled || readonly,
     onClick: onDropPropertyClick(label)
   })))));
 };
 
 function FieldTemplate(_ref) {
-  var id = _ref.id,
-      children = _ref.children,
-      classNames = _ref.classNames,
-      displayLabel = _ref.displayLabel,
-      label = _ref.label,
-      _ref$rawErrors = _ref.rawErrors,
-      rawErrors = _ref$rawErrors === void 0 ? [] : _ref$rawErrors,
-      rawHelp = _ref.rawHelp,
-      hidden = _ref.hidden,
-      rawDescription = _ref.rawDescription,
-      props = _objectWithoutPropertiesLoose(_ref, ["id", "children", "className", "classNames", "displayLabel", "label", "rawErrors", "rawHelp", "hidden", "rawDescription"]);
-
-  var semanticProps = getSemanticProps(props);
-  var wrapLabel = semanticProps.wrapLabel,
-      wrapContent = semanticProps.wrapContent;
-  var errorOptions = getSemanticErrorProps(props);
+  let {
+    id,
+    children,
+    className,
+    // pass className for styling libs (like styled-components)
+    classNames,
+    displayLabel,
+    label,
+    rawErrors = [],
+    rawHelp,
+    hidden,
+    rawDescription,
+    registry,
+    uiSchema,
+    ...props
+  } = _ref;
+  const semanticProps = getSemanticProps(props);
+  const {
+    wrapLabel,
+    wrapContent
+  } = semanticProps;
+  const errorOptions = getSemanticErrorProps(props);
+  const uiOptions = getUiOptions(uiSchema);
+  const DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions);
 
   if (hidden) {
-    return children;
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "none"
+      }
+    }, children);
   }
 
-  return React.createElement(WrapIfAdditional, _extends({
+  return /*#__PURE__*/React.createElement(WrapIfAdditional, _extends({
     classNames: classNames,
     id: id,
-    label: label
-  }, props), React.createElement(Form.Group, {
+    label: label,
+    registry: registry
+  }, props), /*#__PURE__*/React.createElement(Form.Group, {
     key: id,
     widths: "equal",
     grouped: true
-  }, React.createElement(MaybeWrap, {
+  }, /*#__PURE__*/React.createElement(MaybeWrap, {
     wrap: wrapContent,
     className: "sui-field-content"
-  }, children, displayLabel && rawDescription && React.createElement(MaybeWrap, {
+  }, children, displayLabel && rawDescription && /*#__PURE__*/React.createElement(MaybeWrap, {
     wrap: wrapLabel,
     className: "sui-field-label"
-  }, rawDescription && React.createElement(DescriptionField, {
+  }, rawDescription && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
+    id: id + "-description",
     description: rawDescription
-  })), React.createElement(HelpField, {
+  })), /*#__PURE__*/React.createElement(HelpField, {
     helpText: rawHelp,
     id: id + "__help"
-  }), React.createElement(RawErrors, {
+  }), /*#__PURE__*/React.createElement(RawErrors, {
     errors: rawErrors,
     options: errorOptions
   }))));
 }
 
 /* eslint-disable react/prop-types */
-var canExpand = utils.canExpand;
 
 function ObjectFieldTemplate(_ref) {
-  var DescriptionField = _ref.DescriptionField,
-      description = _ref.description,
-      TitleField = _ref.TitleField,
-      onAddClick = _ref.onAddClick,
-      title = _ref.title,
-      properties = _ref.properties,
-      disabled = _ref.disabled,
-      readOnly = _ref.readOnly,
-      required = _ref.required,
-      uiSchema = _ref.uiSchema,
-      schema = _ref.schema,
-      formData = _ref.formData,
-      idSchema = _ref.idSchema;
-  var fieldTitle = uiSchema["ui:title"] || title;
-  var fieldDescription = uiSchema["ui:description"] || description;
-  return React.createElement(React.Fragment, null, fieldTitle && React.createElement(TitleField, {
+  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;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, fieldTitle && /*#__PURE__*/React.createElement(TitleFieldTemplate, {
     id: idSchema.$id + "-title",
     title: fieldTitle,
-    options: uiSchema["ui:options"],
-    required: required
-  }), fieldDescription && React.createElement(DescriptionField, {
+    required: required,
+    uiSchema: uiSchema,
+    registry: registry
+  }), fieldDescription && /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
     id: idSchema.$id + "-description",
-    description: fieldDescription
-  }), properties.map(function (prop) {
-    return prop.content;
-  }), canExpand(schema, uiSchema, formData) && React.createElement(Grid.Column, {
+    description: fieldDescription,
+    registry: registry
+  }), properties.map(prop => prop.content), canExpand(schema, uiSchema, formData) && /*#__PURE__*/React.createElement(Grid.Column, {
     width: 16,
     verticalAlign: "middle"
-  }, React.createElement(Grid.Row, null, React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Grid.Row, null, /*#__PURE__*/React.createElement("div", {
     style: {
       marginTop: "1rem",
       position: "relative",
       textAlign: "right"
     }
-  }, React.createElement(AddButton, {
+  }, /*#__PURE__*/React.createElement(AddButton, {
     onClick: onAddClick(schema),
     disabled: disabled || readOnly
   })))));
 }
 
-var getDisplayLabel = utils.getDisplayLabel;
+var SubmitButton = (_ref => {
+  let {
+    uiSchema
+  } = _ref;
+  const {
+    submitText,
+    norender,
+    props: submitButtonProps
+  } = getSubmitButtonOptions(uiSchema);
+
+  if (norender) {
+    return null;
+  }
+
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    type: "submit",
+    primary: true
+  }, submitButtonProps), submitText);
+});
+
+const DEFAULT_OPTIONS = {
+  semantic: {
+    inverted: false,
+    dividing: true
+  }
+};
+
+function TitleField(_ref) {
+  let {
+    id,
+    title,
+    uiSchema
+  } = _ref;
+  const uiOptions = getUiOptions(uiSchema);
+  const {
+    semantic
+  } = uiOptions.options || DEFAULT_OPTIONS;
+
+  if (title) {
+    return /*#__PURE__*/React.createElement(Header, _extends({
+      id: id
+    }, semantic, {
+      as: "h5"
+    }), title);
+  }
+}
+
+var Templates = {
+  ArrayFieldItemTemplate,
+  ArrayFieldTemplate,
+  BaseInputTemplate,
+  ButtonTemplates: {
+    AddButton,
+    MoveDownButton,
+    MoveUpButton,
+    RemoveButton,
+    SubmitButton
+  },
+  DescriptionFieldTemplate: DescriptionField,
+  ErrorListTemplate: ErrorList,
+  FieldTemplate,
+  ObjectFieldTemplate,
+  TitleFieldTemplate: TitleField
+};
 
 function CheckboxWidget(props) {
-  var id = props.id,
-      value = props.value,
-      required = props.required,
-      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;
-  var semanticProps = getSemanticProps({
-    options: options,
-    formContext: formContext,
-    schema: schema,
-    uiSchema: uiSchema,
+  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,
     defaultSchemaProps: {
       inverted: false
     }
   });
-  var displayLabel = getDisplayLabel(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
+  const {
+    schemaUtils
+  } = registry;
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
 
-  var _onChange = function _onChange(event, data) {
-    return onChange && onChange(data.checked);
-  };
+  const _onChange = (event, data) => onChange && onChange(data.checked);
 
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
+  const _onBlur = () => onBlur && onBlur(id, value);
 
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
+  const _onFocus = () => onFocus && onFocus(id, value);
 
-  var checked = value == "true" || value == true;
-  return React.createElement(Form.Checkbox, _extends({
+  const checked = value == "true" || value == true;
+  return /*#__PURE__*/React.createElement(Form.Checkbox, _extends({
     id: id,
     disabled: disabled || readonly,
     autoFocus: autofocus
   }, semanticProps, {
     checked: typeof value === "undefined" ? false : checked,
+    error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
     onFocus: _onFocus,
@@ -725,89 +803,100 @@ function CheckboxWidget(props) {
 }
 
 function selectValue(value, selected, all) {
-  var at = all.indexOf(value);
-  var updated = selected.slice(0, at).concat(value, selected.slice(at)); // As inserting values at predefined index positions doesn't work with empty
+  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(function (a, b) {
-    return all.indexOf(a) > all.indexOf(b);
-  });
+  return updated.sort((a, b) => all.indexOf(a) > all.indexOf(b));
 }
 
 function deselectValue(value, selected) {
-  return selected.filter(function (v) {
-    return v !== value;
-  });
+  return selected.filter(v => v !== value);
 }
 
 function CheckboxesWidget(props) {
-  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;
-  var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled,
-      inline = options.inline;
-  var title = schema.title;
-  var semanticProps = getSemanticProps({
-    options: options,
-    formContext: formContext,
-    schema: schema,
-    uiSchema: uiSchema,
+  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,
     defaultSchemaProps: {
       inverted: false
     }
   });
 
-  var _onChange = function _onChange(option) {
-    return function (_ref) {
-      var checked = _ref.target.checked;
-      // eslint-disable-next-line no-shadow
-      var all = enumOptions.map(function (_ref2) {
-        var value = _ref2.value;
-        return value;
-      });
-
-      if (checked) {
-        onChange(selectValue(option.value, value, all));
-      } else {
-        onChange(deselectValue(option.value, value));
+  const _onChange = option => _ref => {
+    let {
+      target: {
+        checked
       }
-    };
-  };
+    } = _ref;
+    // eslint-disable-next-line no-shadow
+    const all = enumOptions.map(_ref2 => {
+      let {
+        value
+      } = _ref2;
+      return value;
+    });
 
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
+    if (checked) {
+      onChange(selectValue(option.value, value, all));
+    } else {
+      onChange(deselectValue(option.value, value));
+    }
   };
 
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
+  const _onBlur = () => onBlur && onBlur(id, value);
+
+  const _onFocus = () => onFocus && onFocus(id, value);
 
-  var inlineOption = inline ? {
+  const inlineOption = inline ? {
     inline: true
   } : {
     grouped: true
   };
-  return React.createElement(React.Fragment, null, title && React.createElement(TitleField, {
-    title: title
-  }), React.createElement(Form.Group, inlineOption, enumOptions.map(function (option, index) {
-    var checked = value.indexOf(option.value) !== -1;
-    var itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
-    return React.createElement(Form.Checkbox, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, title && /*#__PURE__*/React.createElement(TitleFieldTemplate, {
+    id: id + "-title",
+    title: title,
+    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;
+    return /*#__PURE__*/React.createElement(Form.Checkbox, _extends({
       id: id + "_" + index,
       key: id + "_" + index,
       label: option.label
     }, semanticProps, {
       checked: checked,
+      error: rawErrors.length > 0,
       disabled: disabled || itemDisabled || readonly,
       autoFocus: autofocus && index === 0,
       onChange: _onChange(option),
@@ -817,116 +906,60 @@ function CheckboxesWidget(props) {
   })));
 }
 
-var getDisplayLabel$1 = utils.getDisplayLabel;
-
-function PasswordWidget(props) {
-  var id = props.id,
-      required = props.required,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      label = props.label,
-      name = props.name,
-      value = props.value,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      autofocus = props.autofocus,
-      options = props.options,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      formContext = props.formContext;
-  var semanticProps = getSemanticProps({
-    schema: schema,
-    uiSchema: uiSchema,
-    formContext: formContext,
-    options: options
-  }); // eslint-disable-next-line no-shadow
-
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange && onChange(value === "" ? options.emptyValue : value);
-  };
-
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
-
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
-
-  var displayLabel = getDisplayLabel$1(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
-  return React.createElement(Form.Input, _extends({
-    id: id,
-    key: id,
-    label: displayLabel ? label || schema.title : false,
-    autoFocus: autofocus,
-    required: required,
-    disabled: disabled || readonly,
-    name: name
-  }, semanticProps, {
-    type: "password",
-    value: value || "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus
-  }));
-}
-
 function RadioWidget(props) {
-  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,
-      schema = props.schema,
-      options = props.options,
-      formContext = props.formContext,
-      uiSchema = props.uiSchema; // Generating a unique field name to identify this set of radio buttons
-
-  var name = Math.random().toString();
-  var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled;
-  var semanticProps = getSemanticProps({
-    formContext: formContext,
-    options: options,
-    uiSchema: uiSchema
+  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
 
-  var _onChange = function _onChange(event, _ref) {
-    var eventValue = _ref.value;
+  const _onChange = (event, _ref) => {
+    let {
+      value: eventValue
+    } = _ref;
     return onChange && onChange(schema.type === "boolean" ? eventValue !== "false" : eventValue);
   };
 
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
+  const _onBlur = () => onBlur && onBlur(id, value);
 
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
+  const _onFocus = () => onFocus && onFocus(id, value);
 
-  var inlineOption = options.inline ? {
+  const inlineOption = options.inline ? {
     inline: true
   } : {
     grouped: true
   };
-  return React.createElement(Form.Group, inlineOption, enumOptions.map(function (option, i) {
-    var itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
-    return React.createElement(Form.Field, _extends({
+  return /*#__PURE__*/React.createElement(Form.Group, inlineOption, enumOptions.map((option, i) => {
+    const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) !== -1;
+    return /*#__PURE__*/React.createElement(Form.Field, _extends({
       required: required,
       control: Radio,
-      name: name
+      name: id + "-radio-" + option.value
     }, 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,
@@ -935,45 +968,46 @@ function RadioWidget(props) {
   }));
 }
 
-var rangeSpec = utils.rangeSpec;
-
 function RangeWidget(props) {
-  var id = props.id,
-      name = props.name,
-      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;
-  var semanticProps = getSemanticProps({
-    formContext: formContext,
-    options: options,
-    uiSchema: uiSchema,
+  const {
+    id,
+    name,
+    value,
+    required,
+    readonly,
+    disabled,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    uiSchema,
+    formContext,
+    rawErrors = []
+  } = props;
+  const semanticProps = getSemanticProps({
+    formContext,
+    options,
+    uiSchema,
     defaultSchemaProps: {
       fluid: true
     }
   }); // eslint-disable-next-line no-shadow
 
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
+  const _onChange = _ref => {
+    let {
+      target: {
+        value
+      }
+    } = _ref;
     return onChange && onChange(value === "" ? options.emptyValue : value);
   };
 
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
+  const _onBlur = () => onBlur && onBlur(id, value);
 
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
+  const _onFocus = () => onFocus && onFocus(id, value);
 
-  return React.createElement(React.Fragment, null, React.createElement(Input, _extends({
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, _extends({
     id: id,
     key: id,
     name: name,
@@ -982,15 +1016,13 @@ function RangeWidget(props) {
     disabled: disabled || readonly
   }, rangeSpec(schema), semanticProps, {
     value: value || "",
+    error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
     onFocus: _onFocus
-  })), React.createElement("span", null, value));
+  })), /*#__PURE__*/React.createElement("span", null, value));
 }
 
-var asNumber = utils.asNumber,
-    guessType = utils.guessType;
-var nums = /*#__PURE__*/new Set(["number", "integer"]);
 /**
  * * Returns and creates an array format required for semantic drop down
  * @param {array} enumOptions- array of items for the dropdown
@@ -999,82 +1031,50 @@ var nums = /*#__PURE__*/new Set(["number", "integer"]);
  */
 
 function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled) {
-  var disabledOptions = enumDisabled || [];
-  var options = []; // eslint-disable-next-line no-shadow
-
-  options = _.map(enumOptions, function (_ref) {
-    var label = _ref.label,
-        value = _ref.value;
+  const disabledOptions = enumDisabled || [];
+  let options = []; // eslint-disable-next-line no-shadow
+
+  options = _.map(enumOptions, _ref => {
+    let {
+      label,
+      value
+    } = _ref;
     return {
       disabled: disabledOptions.indexOf(value) !== -1,
       key: label,
       text: label,
-      value: value
+      value
     };
   });
   return options;
 }
-/**
- * This is a silly limitation in the DOM where option change event values are
- * always retrieved as strings.
- */
-
-
-var processValue = function processValue(schema, value) {
-  // "enum" is a reserved word, so only "type" and "items" can be destructured
-  var type = schema.type,
-      items = schema.items;
-
-  if (value === "") {
-    return undefined;
-  } else if (type === "array" && items && nums.has(items.type)) {
-    return value.map(asNumber);
-  } else if (type === "boolean") {
-    return value === "true" || value === true;
-  } else if (type === "number") {
-    return asNumber(value);
-  } // If type is undefined, but an enum is present, try and infer the type from
-  // the enum values
-
-
-  if (schema.enum) {
-    if (schema.enum.every(function (x) {
-      return guessType(x) === "number";
-    })) {
-      return asNumber(value);
-    } else if (schema.enum.every(function (x) {
-      return guessType(x) === "boolean";
-    })) {
-      return value === "true";
-    }
-  }
-
-  return value;
-};
 
 function SelectWidget(props) {
-  var schema = props.schema,
-      uiSchema = props.uiSchema,
-      formContext = props.formContext,
-      id = props.id,
-      options = props.options,
-      name = props.name,
-      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;
-  var semanticProps = getSemanticProps({
-    schema: schema,
-    uiSchema: uiSchema,
-    formContext: formContext,
-    options: options,
+  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,
     defaultSchemaProps: {
       inverted: "false",
       selection: true,
@@ -1083,34 +1083,48 @@ function SelectWidget(props) {
       upward: false
     }
   });
-  var enumDisabled = options.enumDisabled,
-      enumOptions = options.enumOptions;
-  var emptyValue = multiple ? [] : "";
-  var dropdownOptions = createDefaultValueOptionsForDropDown(enumOptions, enumDisabled);
-
-  var _onChange = function _onChange(event, // eslint-disable-next-line no-shadow
-  _ref2) {
-    var value = _ref2.value;
-    return onChange && onChange(processValue(schema, value));
+  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
 
 
-  var _onBlur = function _onBlur(_ref3) {
-    var value = _ref3.target.value;
-    return onBlur && onBlur(id, processValue(schema, value));
+  const _onBlur = _ref3 => {
+    let {
+      target: {
+        value
+      }
+    } = _ref3;
+    return onBlur && onBlur(id, processSelectValue(schema, value, options));
   };
 
-  var _onFocus = function _onFocus(_ref4) {
-    var value = _ref4.target.value;
-    return onFocus && onFocus(id, processValue(schema, value));
+  const _onFocus = _ref4 => {
+    let {
+      // eslint-disable-next-line no-shadow
+      target: {
+        value
+      }
+    } = _ref4;
+    return onFocus && onFocus(id, processSelectValue(schema, value, options));
   };
 
-  return React.createElement(Form.Dropdown, _extends({
+  return /*#__PURE__*/React.createElement(Form.Dropdown, _extends({
     key: id,
     name: name,
     label: label || schema.title,
     multiple: typeof multiple === "undefined" ? false : multiple,
     value: typeof value === "undefined" ? emptyValue : value,
+    error: rawErrors.length > 0,
     disabled: disabled,
     placeholder: placeholder
   }, semanticProps, {
@@ -1124,50 +1138,53 @@ function SelectWidget(props) {
   }));
 }
 
-var getDisplayLabel$2 = utils.getDisplayLabel;
-
 function TextareaWidget(props) {
-  var id = props.id,
-      placeholder = props.placeholder,
-      value = props.value,
-      required = props.required,
-      disabled = props.disabled,
-      autofocus = props.autofocus,
-      label = props.label,
-      name = props.name,
-      readonly = props.readonly,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      onChange = props.onChange,
-      options = props.options,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      formContext = props.formContext;
-  var semanticProps = getSemanticProps({
-    formContext: formContext,
-    options: options,
+  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,
     defaultSchemaProps: {
       inverted: false
     }
-  }); // eslint-disable-next-line no-shadow
-
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
+  });
+  const {
+    schemaUtils
+  } = registry; // eslint-disable-next-line no-shadow
+
+  const _onChange = _ref => {
+    let {
+      target: {
+        value
+      }
+    } = _ref;
     return onChange && onChange(value === "" ? options.emptyValue : value);
   };
 
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
+  const _onBlur = () => onBlur && onBlur(id, value);
 
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
+  const _onFocus = () => onFocus && onFocus(id, value);
 
-  var displayLabel = getDisplayLabel$2(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
-  return React.createElement(Form.TextArea, _extends({
+  const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
+  return /*#__PURE__*/React.createElement(Form.TextArea, _extends({
     id: id,
     key: id,
     label: displayLabel ? label || schema.title : false,
@@ -1178,6 +1195,7 @@ function TextareaWidget(props) {
     name: name
   }, semanticProps, {
     value: value || "",
+    error: rawErrors.length > 0,
     rows: options.rows || 5,
     onChange: _onChange,
     onBlur: _onBlur,
@@ -1185,410 +1203,23 @@ function TextareaWidget(props) {
   }));
 }
 
-var getDisplayLabel$3 = utils.getDisplayLabel;
-
-function TextWidget(props) {
-  var id = props.id,
-      placeholder = props.placeholder,
-      name = props.name,
-      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;
-  var semanticProps = getSemanticProps({
-    formContext: formContext,
-    options: options,
-    uiSchema: uiSchema
-  }); // eslint-disable-next-line no-shadow
-
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange(value === "" ? options.emptyValue : value);
-  };
-
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
-
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
-
-  var displayLabel = getDisplayLabel$3(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
-  return React.createElement(Form.Input, _extends({
-    key: id,
-    id: id,
-    placeholder: placeholder,
-    type: schema.type === 'string' ? 'text' : "" + schema.type,
-    label: displayLabel ? label || schema.title : false,
-    required: required,
-    autoFocus: autofocus,
-    disabled: disabled || readonly,
-    name: name
-  }, semanticProps, {
-    value: value || value === 0 ? value : "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus
-  }));
-}
-
-var getDisplayLabel$4 = utils.getDisplayLabel;
-
-function UpDownWidget(props) {
-  var id = props.id,
-      name = props.name,
-      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;
-  var semanticProps = getSemanticProps({
-    formContext: formContext,
-    options: options,
-    uiSchema: uiSchema
-  }); // eslint-disable-next-line no-shadow
-
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange && onChange(value);
-  };
-
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
-
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
-
-  var displayLabel = getDisplayLabel$4(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
-  return React.createElement(React.Fragment, null, React.createElement(Form.Input, _extends({
-    id: id,
-    key: id,
-    autoFocus: autofocus,
-    required: required,
-    type: "number",
-    label: displayLabel ? label || schema.title : false,
-    disabled: disabled || readonly,
-    name: name
-  }, semanticProps, {
-    value: value || value === 0 ? value : "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus
-  })));
-}
-
-var getDisplayLabel$5 = utils.getDisplayLabel;
-
-function DateWidget(props) {
-  var id = props.id,
-      required = props.required,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      name = props.name,
-      label = props.label,
-      value = props.value,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      autofocus = props.autofocus,
-      options = props.options,
-      formContext = props.formContext,
-      schema = props.schema,
-      uiSchema = props.uiSchema;
-  var semanticProps = getSemanticProps({
-    uiSchema: uiSchema,
-    schema: schema,
-    formContext: formContext,
-    options: options
-  });
-
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange && onChange(value);
-  };
-
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
-
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
-
-  var displayLabel = getDisplayLabel$5(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
-  return React.createElement(Form.Input, _extends({
-    key: id,
-    id: id,
-    type: "date",
-    label: displayLabel ? label || schema.title : false,
-    required: required,
-    autoFocus: autofocus,
-    disabled: disabled || readonly,
-    name: name
-  }, semanticProps, {
-    value: value || value === 0 ? value : "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus
-  }));
-}
-
-var localToUTC = utils.localToUTC,
-    utcToLocal = utils.utcToLocal,
-    getDisplayLabel$6 = utils.getDisplayLabel;
-
-function DateTimeWidget(props) {
-  var id = props.id,
-      required = props.required,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      name = props.name,
-      label = props.label,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      value = props.value,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      autofocus = props.autofocus,
-      options = props.options,
-      formContext = props.formContext;
-  var semanticProps = getSemanticProps({
-    uiSchema: uiSchema,
-    schema: schema,
-    formContext: formContext,
-    options: options
-  });
-
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange && onChange(localToUTC(value));
-  };
-
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
-
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
-
-  var dateValue = utcToLocal(value);
-  var displayLabel = getDisplayLabel$6(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
-  return React.createElement(Form.Input, _extends({
-    key: id,
-    id: id,
-    type: "datetime-local",
-    label: displayLabel ? label || schema.title : false,
-    required: required,
-    autoFocus: autofocus,
-    disabled: disabled || readonly,
-    name: name
-  }, semanticProps, {
-    value: dateValue,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus
-  }));
-}
-
-var getDisplayLabel$7 = utils.getDisplayLabel;
-
-function EmailWidget(props) {
-  var id = props.id,
-      required = props.required,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      name = props.name,
-      label = props.label,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      value = props.value,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      autofocus = props.autofocus,
-      options = props.options,
-      formContext = props.formContext;
-  var semanticProps = getSemanticProps({
-    schema: schema,
-    uiSchema: uiSchema,
-    formContext: formContext,
-    options: options
-  }); // eslint-disable-next-line no-shadow
-
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange(value === "" ? options.emptyValue : value);
-  };
-
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
-
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
-
-  var displayLabel = getDisplayLabel$7(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
-  return React.createElement(Form.Input, _extends({
-    key: id,
-    id: id,
-    type: "email",
-    label: displayLabel ? label || schema.title : false,
-    required: required,
-    autoFocus: autofocus,
-    disabled: disabled || readonly,
-    name: name
-  }, semanticProps, {
-    value: value || value === 0 ? value : "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus
-  }));
-}
-
-var getDisplayLabel$8 = utils.getDisplayLabel;
-
-function URLWidget(props) {
-  var id = props.id,
-      name = props.name,
-      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;
-  var semanticProps = getSemanticProps({
-    formContext: formContext,
-    options: options,
-    uiSchema: uiSchema
-  }); // eslint-disable-next-line no-shadow
-
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange(value === "" ? options.emptyValue : value);
-  };
-
-  var _onBlur = function _onBlur() {
-    return onBlur && onBlur(id, value);
-  };
-
-  var _onFocus = function _onFocus() {
-    return onFocus && onFocus(id, value);
-  };
-
-  var displayLabel = getDisplayLabel$8(schema, uiSchema
-  /* TODO: , rootSchema */
-  );
-  return React.createElement(Form.Input, _extends({
-    key: id,
-    id: id,
-    type: "url",
-    label: displayLabel ? label || schema.title : false,
-    required: required,
-    autoFocus: autofocus,
-    disabled: disabled || readonly,
-    name: name
-  }, semanticProps, {
-    value: value || value === 0 ? value : "",
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus
-  }));
-}
-
-var getSubmitButtonOptions = utils.getSubmitButtonOptions;
-var SubmitButton = (function (_ref) {
-  var uiSchema = _ref.uiSchema;
-
-  var _getSubmitButtonOptio = getSubmitButtonOptions(uiSchema),
-      submitText = _getSubmitButtonOptio.submitText,
-      norender = _getSubmitButtonOptio.norender,
-      submitButtonProps = _getSubmitButtonOptio.props;
-
-  if (norender) {
-    return null;
-  }
-
-  return React.createElement(Button, _extends({
-    type: "submit",
-    primary: true
-  }, submitButtonProps), submitText);
-});
-
 var Widgets = {
-  CheckboxWidget: CheckboxWidget,
-  CheckboxesWidget: CheckboxesWidget,
-  DateWidget: DateWidget,
-  DateTimeWidget: DateTimeWidget,
-  PasswordWidget: PasswordWidget,
-  EmailWidget: EmailWidget,
-  URLWidget: URLWidget,
-  RadioWidget: RadioWidget,
-  RangeWidget: RangeWidget,
-  SelectWidget: SelectWidget,
-  TextareaWidget: TextareaWidget,
-  TextWidget: TextWidget,
-  UpDownWidget: UpDownWidget,
-  SubmitButton: SubmitButton
+  CheckboxWidget,
+  CheckboxesWidget,
+  RadioWidget,
+  RangeWidget,
+  SelectWidget,
+  TextareaWidget
 };
 
-var getDefaultRegistry = utils.getDefaultRegistry;
-
-var _getDefaultRegistry = /*#__PURE__*/getDefaultRegistry(),
-    fields = _getDefaultRegistry.fields,
-    widgets = _getDefaultRegistry.widgets;
-
-var Theme = {
-  ArrayFieldTemplate: ArrayFieldTemplate,
-  ErrorList: ErrorList,
-  fields: /*#__PURE__*/_extends({}, fields, Fields),
-  FieldTemplate: FieldTemplate,
-  ObjectFieldTemplate: ObjectFieldTemplate,
-  _internalFormWrapper: Form,
-  widgets: /*#__PURE__*/_extends({}, widgets, Widgets)
+const Theme = {
+  templates: Templates,
+  widgets: Widgets,
+  _internalFormWrapper: Form
 };
 
-var SemanticUIForm = /*#__PURE__*/withTheme(Theme);
+const SemanticUIForm = /*#__PURE__*/withTheme(Theme);
 
 export default SemanticUIForm;
-export { ArrayFieldTemplate, FieldTemplate, Fields, ObjectFieldTemplate, SemanticUIForm, Theme, Widgets };
+export { SemanticUIForm as Form, Templates, Theme, Widgets };
 //# sourceMappingURL=semantic-ui.esm.js.map