@rjsf/semantic-ui 5.10.0 → 5.11.2

package/dist/semantic-ui.esm.js

@@ -6,54 +6,29 @@ import { nanoid } from 'nanoid';
 import { createElement } from 'react';
 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) {
-  var registry = _ref.registry,
-    color = _ref.color,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var translateString = registry.translateString;
-  return jsx(Button, _extends({
+function AddButton({
+  uiSchema,
+  registry,
+  color,
+  ...props
+}) {
+  const {
+    translateString
+  } = registry;
+  return jsx(Button, {
     title: translateString(TranslatableString.AddItemButton),
-    color: color
-  }, props, {
+    color: color,
+    ...props,
     icon: true,
     size: 'tiny',
     children: jsx(Icon, {
       name: 'plus'
     })
-  }));
+  });
 }
 
-var _excluded$3 = ["wrap", "component"];
 /**
  * Extract props meant for semantic UI components from props that are
  * passed to Widgets, Templates and Fields.
@@ -65,25 +40,25 @@ var _excluded$3 = ["wrap", "component"];
  * @param {Object?} params.defaultContextProps
  * @returns {any}
  */
-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 = getUiOptions(uiSchema).semantic;
-  var optionProps = options.semantic;
+function getSemanticProps({
+  formContext = {},
+  uiSchema = {},
+  options = {},
+  defaultSchemaProps = {
+    fluid: true,
+    inverted: false
+  },
+  defaultContextProps = {}
+}) {
+  const formContextProps = formContext.semantic;
+  const schemaProps = getUiOptions(uiSchema).semantic;
+  const optionProps = options.semantic;
   // formContext props should overide other props
-  return Object.assign({}, _extends({}, defaultSchemaProps), _extends({}, defaultContextProps), schemaProps, optionProps, formContextProps);
+  return Object.assign({}, {
+    ...defaultSchemaProps
+  }, {
+    ...defaultContextProps
+  }, schemaProps, optionProps, formContextProps);
 }
 /**
  * Extract error props meant for semantic UI components from props that are
@@ -94,23 +69,22 @@ function getSemanticProps(_ref) {
  * @param {Object?} params.defaultProps
  * @returns {any}
  */
-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 semanticOptions = getUiOptions(uiSchema).semantic;
-  var schemaProps = semanticOptions && semanticOptions.errorOptions;
-  var optionProps = options.semantic && options.semantic.errorOptions;
-  return Object.assign({}, _extends({}, defaultProps), schemaProps, optionProps, formContextProps);
+function getSemanticErrorProps({
+  formContext = {},
+  uiSchema = {},
+  options = {},
+  defaultProps = {
+    size: 'small',
+    pointing: 'above'
+  }
+}) {
+  const formContextProps = formContext.semantic && formContext.semantic.errorOptions;
+  const semanticOptions = getUiOptions(uiSchema).semantic;
+  const schemaProps = semanticOptions && semanticOptions.errorOptions;
+  const optionProps = options.semantic && options.semantic.errorOptions;
+  return Object.assign({}, {
+    ...defaultProps
+  }, schemaProps, optionProps, formContextProps);
 }
 /**
  * Combine multiple strings containing class names into a single string,
@@ -121,20 +95,13 @@ function getSemanticErrorProps(_ref2) {
  * @param {Array} omit
  * @returns {string}
  */
-function cleanClassNames(classNameArr, omit) {
-  if (omit === void 0) {
-    omit = [];
-  }
+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+/));
-  }, []);
+  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(' ');
 }
 /**
  *
@@ -144,60 +111,63 @@ function cleanClassNames(classNameArr, omit) {
  * @returns {*}
  * @constructor
  */
-function MaybeWrap(_ref3) {
-  var wrap = _ref3.wrap,
-    _ref3$component = _ref3.component,
-    Component = _ref3$component === void 0 ? 'div' : _ref3$component,
-    props = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
-  return wrap ? jsx(Component, _extends({}, props)) : props.children;
+function MaybeWrap({
+  wrap,
+  component: Component = 'div',
+  ...props
+}) {
+  return wrap ? jsx(Component, {
+    ...props
+  }) : props.children;
 }
 
-var gridStyle = function gridStyle(vertical) {
-  return {
-    display: 'grid',
-    gridTemplateColumns: "1fr " + (vertical ? 65 : 150) + "px"
-  };
-};
+const gridStyle = vertical => ({
+  display: 'grid',
+  gridTemplateColumns: `1fr ${vertical ? 65 : 150}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,
-    hasCopy = props.hasCopy,
-    hasMoveDown = props.hasMoveDown,
-    hasMoveUp = props.hasMoveUp,
-    hasRemove = props.hasRemove,
-    index = props.index,
-    onCopyIndexClick = props.onCopyIndexClick,
-    onDropIndexClick = props.onDropIndexClick,
-    onReorderClick = props.onReorderClick,
-    readonly = props.readonly,
-    uiSchema = props.uiSchema,
-    registry = props.registry;
-  var _registry$templates$B = registry.templates.ButtonTemplates,
-    CopyButton = _registry$templates$B.CopyButton,
-    MoveDownButton = _registry$templates$B.MoveDownButton,
-    MoveUpButton = _registry$templates$B.MoveUpButton,
-    RemoveButton = _registry$templates$B.RemoveButton;
-  var uiOptions = getUiOptions(uiSchema);
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    uiSchema,
+    registry
+  } = props;
+  const {
+    CopyButton,
+    MoveDownButton,
+    MoveUpButton,
+    RemoveButton
+  } = registry.templates.ButtonTemplates;
+  const 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 ? true : _uiOptions$semantic$h,
-    _uiOptions$semantic$w = _uiOptions$semantic.wrapItem,
-    wrapItem = _uiOptions$semantic$w === void 0 ? false : _uiOptions$semantic$w;
+  const {
+    horizontalButtons = true,
+    wrapItem = false
+  } = uiOptions.semantic;
   return jsx("div", {
     className: 'array-item',
     children: jsx(MaybeWrap, {
       wrap: wrapItem,
       component: Segment,
       children: jsxs(Grid, {
-        style: _extends({}, gridStyle(!horizontalButtons), {
+        style: {
+          ...gridStyle(!horizontalButtons),
           alignItems: 'center'
-        }),
+        },
         children: [jsx(Grid.Column, {
           width: 16,
           verticalAlign: 'middle',
@@ -238,45 +208,54 @@ function ArrayFieldItemTemplate(props) {
   });
 }
 
-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,
+  const {
+    uiSchema,
+    idSchema,
+    canAdd,
+    className,
+    // classNames, This is not part of the type, so it is likely never passed in
+    disabled,
+    formContext,
+    items,
+    onAddClick,
+    // options, This is not part of the type, so it is likely never passed in
+    readonly,
+    required,
+    schema,
+    title,
+    registry
+  } = props;
+  const semanticProps = getSemanticProps({
+    uiSchema,
+    formContext,
     defaultSchemaProps: {
       horizontalButtons: true,
       wrapItem: false
     }
   });
-  var horizontalButtons = semanticProps.horizontalButtons,
-    wrapItem = semanticProps.wrapItem;
-  var semantic = {
-    horizontalButtons: horizontalButtons,
-    wrapItem: wrapItem
+  const {
+    horizontalButtons,
+    wrapItem
+  } = semanticProps;
+  const semantic = {
+    horizontalButtons,
+    wrapItem
   };
-  var uiOptions = getUiOptions(uiSchema);
-  var ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
-  var ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
-  var ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
+  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
-  var AddButton = registry.templates.ButtonTemplates.AddButton;
+  const {
+    ButtonTemplates: {
+      AddButton
+    }
+  } = registry.templates;
   return jsxs("div", {
     className: cleanClassNames([className, isFixedItems(schema) ? '' : 'sortable-form-fields']),
     children: [jsx(ArrayFieldTitleTemplate, {
@@ -295,19 +274,23 @@ function ArrayFieldTemplate(props) {
     }), jsxs("div", {
       children: [jsx("div", {
         className: 'row array-item-list',
-        children: 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);
+        children: items && items.map(({
+          key,
+          uiSchema: itemUiSchema = {},
+          ...props
+        }) => {
           // 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 jsx(ArrayFieldItemTemplate, _extends({}, props, {
+          const mergedUiSchema = {
+            ...itemUiSchema,
+            [UI_OPTIONS_KEY]: {
+              ...itemUiSchema[UI_OPTIONS_KEY],
+              semantic
+            }
+          };
+          return jsx(ArrayFieldItemTemplate, {
+            ...props,
             uiSchema: mergedUiSchema
-          }), key);
+          }, key);
         })
       }), canAdd && jsx("div", {
         style: {
@@ -322,7 +305,7 @@ function ArrayFieldTemplate(props) {
           registry: registry
         })
       })]
-    }, "array-item-list-" + idSchema.$id)]
+    }, `array-item-list-${idSchema.$id}`)]
   });
 }
 
@@ -333,63 +316,61 @@ function ArrayFieldTemplate(props) {
  * @param props - The `WidgetProps` for this template
  */
 function BaseInputTemplate(props) {
-  var id = props.id,
-    placeholder = props.placeholder,
-    label = props.label,
-    hideLabel = props.hideLabel,
-    value = props.value,
-    required = props.required,
-    readonly = props.readonly,
-    disabled = props.disabled,
-    onChange = props.onChange,
-    onChangeOverride = props.onChangeOverride,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    autofocus = props.autofocus,
-    options = props.options,
-    schema = props.schema,
-    uiSchema = props.uiSchema,
-    formContext = props.formContext,
-    type = props.type,
-    _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 {
+    id,
+    placeholder,
+    label,
+    hideLabel,
+    value,
+    required,
+    readonly,
+    disabled,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
+    formContext,
+    type,
+    rawErrors = []
+  } = props;
+  const inputProps = getInputProps(schema, type, options);
+  const semanticProps = getSemanticProps({
+    uiSchema,
+    formContext,
+    options
   });
-  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);
-  };
+  const _onChange = ({
+    target: {
+      value
+    }
+  }) => onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
   return jsxs(Fragment, {
-    children: [jsx(Form.Input, _extends({
+    children: [jsx(Form.Input, {
       id: id,
       name: id,
-      placeholder: placeholder
-    }, inputProps, {
+      placeholder: placeholder,
+      ...inputProps,
       label: labelValue(label || undefined, hideLabel, false),
       required: required,
       autoFocus: autofocus,
       disabled: disabled || readonly,
-      list: schema.examples ? examplesId(id) : undefined
-    }, semanticProps, {
+      list: schema.examples ? examplesId(id) : undefined,
+      ...semanticProps,
       value: value || value === 0 ? value : '',
       error: rawErrors.length > 0,
       onChange: onChangeOverride || _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
       "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
-    }), id), Array.isArray(schema.examples) && jsx("datalist", {
+    }, id), Array.isArray(schema.examples) && jsx("datalist", {
       id: examplesId(id),
-      children: schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
+      children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map(example => {
         return jsx("option", {
           value: example
         }, example);
@@ -403,8 +384,10 @@ function BaseInputTemplate(props) {
  * @param props - The `DescriptionFieldProps` for this component
  */
 function DescriptionField(props) {
-  var id = props.id,
-    description = props.description;
+  const {
+    id,
+    description
+  } = props;
   if (!description) {
     return null;
   }
@@ -419,72 +402,93 @@ function DescriptionField(props) {
  *
  * @param props - The `ErrorListProps` for this component
  */
-function ErrorList(_ref) {
-  var errors = _ref.errors,
-    registry = _ref.registry;
-  var translateString = registry.translateString;
+function ErrorList({
+  errors,
+  registry
+}) {
+  const {
+    translateString
+  } = registry;
   return jsxs(Message, {
     negative: true,
     children: [jsx(Message.Header, {
       children: translateString(TranslatableString.ErrorsLabel)
     }), jsx(Message.List, {
-      children: errors.map(function (error, index) {
-        return jsx(Message.Item, {
-          children: error.stack
-        }, "error-" + index);
-      })
+      children: errors.map((error, index) => jsx(Message.Item, {
+        children: error.stack
+      }, `error-${index}`))
     })]
   });
 }
 
-var _excluded$1 = ["icon", "iconType", "color", "className", "uiSchema", "registry"];
 function IconButton(props) {
-  var icon = props.icon,
-    iconType = props.iconType,
-    color = props.color,
-    className = props.className,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  return jsx(Button, _extends({
+  const {
+    icon,
+    iconType,
+    color,
+    className,
+    uiSchema,
+    registry,
+    ...otherProps
+  } = props;
+  return jsx(Button, {
     icon: icon,
     size: iconType,
     color: color,
-    className: className
-  }, otherProps));
+    className: className,
+    ...otherProps
+  });
 }
 function CopyButton(props) {
-  var translateString = props.registry.translateString;
-  return jsx(IconButton, _extends({
-    title: translateString(TranslatableString.CopyButton)
-  }, props, {
+  const {
+    registry: {
+      translateString
+    }
+  } = props;
+  return jsx(IconButton, {
+    title: translateString(TranslatableString.CopyButton),
+    ...props,
     icon: 'copy'
-  }));
+  });
 }
 function MoveDownButton(props) {
-  var translateString = props.registry.translateString;
-  return jsx(IconButton, _extends({
-    title: translateString(TranslatableString.MoveDownButton)
-  }, props, {
+  const {
+    registry: {
+      translateString
+    }
+  } = props;
+  return jsx(IconButton, {
+    title: translateString(TranslatableString.MoveDownButton),
+    ...props,
     icon: 'angle down'
-  }));
+  });
 }
 function MoveUpButton(props) {
-  var translateString = props.registry.translateString;
-  return jsx(IconButton, _extends({
-    title: translateString(TranslatableString.MoveUpButton)
-  }, props, {
+  const {
+    registry: {
+      translateString
+    }
+  } = props;
+  return jsx(IconButton, {
+    title: translateString(TranslatableString.MoveUpButton),
+    ...props,
     icon: 'angle up'
-  }));
+  });
 }
 function RemoveButton(props) {
-  var translateString = props.registry.translateString;
-  return jsx(IconButton, _extends({
-    title: translateString(TranslatableString.RemoveButton)
-  }, props, {
+  const {
+    registry: {
+      translateString
+    }
+  } = props;
+  return jsx(IconButton, {
+    title: translateString(TranslatableString.RemoveButton),
+    ...props,
     icon: 'trash'
-  }));
+  });
 }
 
-var DEFAULT_OPTIONS$1 = {
+const DEFAULT_OPTIONS$1 = {
   options: {
     pointing: 'above',
     size: 'small'
@@ -494,21 +498,26 @@ var DEFAULT_OPTIONS$1 = {
  *
  * @param props - The `FieldErrorProps` for the errors being rendered
  */
-function FieldErrorTemplate(_ref) {
-  var errors = _ref.errors,
-    idSchema = _ref.idSchema,
-    uiSchema = _ref.uiSchema,
-    registry = _ref.registry;
-  var formContext = registry.formContext;
-  var options = getSemanticErrorProps({
-    formContext: formContext,
-    uiSchema: uiSchema,
+function FieldErrorTemplate({
+  errors,
+  idSchema,
+  uiSchema,
+  registry
+}) {
+  const {
+    formContext
+  } = registry;
+  const options = getSemanticErrorProps({
+    formContext,
+    uiSchema,
     defaultProps: DEFAULT_OPTIONS$1
   });
-  var pointing = options.pointing,
-    size = options.size;
+  const {
+    pointing,
+    size
+  } = options;
   if (errors && errors.length > 0) {
-    var id = errorId(idSchema);
+    const id = errorId(idSchema);
     return jsx(Label, {
       id: id,
       color: 'red',
@@ -517,11 +526,9 @@ function FieldErrorTemplate(_ref) {
       basic: true,
       children: jsx(List, {
         bulleted: true,
-        children: errors.map(function (error) {
-          return jsx(List.Item, {
-            children: error
-          }, nanoid());
-        })
+        children: errors.map(error => jsx(List.Item, {
+          children: error
+        }, nanoid()))
       })
     });
   }
@@ -533,10 +540,12 @@ function FieldErrorTemplate(_ref) {
  * @param props - The `FieldHelpProps` to be rendered
  */
 function FieldHelpTemplate(props) {
-  var idSchema = props.idSchema,
-    help = props.help;
+  const {
+    idSchema,
+    help
+  } = props;
   if (help) {
-    var id = helpId(idSchema);
+    const id = helpId(idSchema);
     return jsx(Message, {
       size: 'mini',
       info: true,
@@ -547,33 +556,36 @@ function FieldHelpTemplate(props) {
   return null;
 }
 
-var _excluded = ["id", "children", "classNames", "style", "displayLabel", "label", "errors", "help", "hidden", "description", "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,
-    description = props.description,
-    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);
+  const {
+    id,
+    children,
+    classNames,
+    style,
+    displayLabel,
+    label,
+    errors,
+    help,
+    hidden,
+    description,
+    rawDescription,
+    registry,
+    schema,
+    uiSchema,
+    ...otherProps
+  } = props;
+  const semanticProps = getSemanticProps(otherProps);
+  const {
+    wrapLabel,
+    wrapContent
+  } = semanticProps;
+  const uiOptions = getUiOptions(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
   if (hidden) {
     return jsx("div", {
       style: {
@@ -582,15 +594,15 @@ function FieldTemplate(props) {
       children: children
     });
   }
-  return jsx(WrapIfAdditionalTemplate, _extends({
+  return jsx(WrapIfAdditionalTemplate, {
     classNames: classNames,
     style: style,
     id: id,
     label: label,
     registry: registry,
     schema: schema,
-    uiSchema: uiSchema
-  }, otherProps, {
+    uiSchema: uiSchema,
+    ...otherProps,
     children: jsx(Form.Group, {
       widths: 'equal',
       grouped: true,
@@ -604,7 +616,7 @@ function FieldTemplate(props) {
         }), help, errors]
       })
     }, id)
-  }));
+  });
 }
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -614,23 +626,29 @@ function FieldTemplate(props) {
  * @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);
+  const {
+    description,
+    onAddClick,
+    title,
+    properties,
+    disabled,
+    readonly,
+    required,
+    uiSchema,
+    schema,
+    formData,
+    idSchema,
+    registry
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
-  var AddButton = registry.templates.ButtonTemplates.AddButton;
+  const {
+    ButtonTemplates: {
+      AddButton
+    }
+  } = registry.templates;
   return jsxs(Fragment, {
     children: [title && jsx(TitleFieldTemplate, {
       id: titleId(idSchema),
@@ -645,9 +663,7 @@ function ObjectFieldTemplate(props) {
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
-    }), properties.map(function (prop) {
-      return prop.content;
-    }), canExpand(schema, uiSchema, formData) && jsx(Grid.Column, {
+    }), properties.map(prop => prop.content), canExpand(schema, uiSchema, formData) && jsx(Grid.Column, {
       width: 16,
       verticalAlign: 'middle',
       children: jsx(Grid.Row, {
@@ -671,25 +687,26 @@ function ObjectFieldTemplate(props) {
 
 /** 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;
+function SubmitButton({
+  uiSchema
+}) {
+  const {
+    submitText,
+    norender,
+    props: submitButtonProps = {}
+  } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return jsx(Button, _extends({
+  return jsx(Button, {
     type: 'submit',
-    primary: true
-  }, submitButtonProps, {
+    primary: true,
+    ...submitButtonProps,
     children: submitText
-  }));
+  });
 }
 
-var DEFAULT_OPTIONS = {
+const DEFAULT_OPTIONS = {
   inverted: false,
   dividing: true
 };
@@ -697,23 +714,24 @@ var DEFAULT_OPTIONS = {
  *
  * @param props - The `TitleFieldProps` for this component
  */
-function TitleField(_ref) {
-  var id = _ref.id,
-    title = _ref.title,
-    uiSchema = _ref.uiSchema;
-  var semanticProps = getSemanticProps({
-    uiSchema: uiSchema,
+function TitleField({
+  id,
+  title,
+  uiSchema
+}) {
+  const semanticProps = getSemanticProps({
+    uiSchema,
     defaultSchemaProps: DEFAULT_OPTIONS
   });
   if (!title) {
     return null;
   }
-  return jsx(Header, _extends({
-    id: id
-  }, semanticProps, {
+  return jsx(Header, {
+    id: id,
+    ...semanticProps,
     as: 'h5',
     children: title
-  }));
+  });
 }
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
@@ -722,29 +740,35 @@ function TitleField(_ref) {
  * @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;
-  var templates = registry.templates,
-    translateString = registry.translateString;
+  const {
+    children,
+    classNames,
+    style,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    registry
+  } = props;
+  const {
+    templates,
+    translateString
+  } = registry;
   // Button templates are not overridden in the uiSchema
-  var RemoveButton = templates.ButtonTemplates.RemoveButton;
-  var keyLabel = translateString(TranslatableString.KeyLabel, [label]);
-  var _registry$formContext = registry.formContext,
-    _registry$formContext2 = _registry$formContext.readonlyAsDisabled,
-    readonlyAsDisabled = _registry$formContext2 === void 0 ? true : _registry$formContext2,
-    wrapperStyle = _registry$formContext.wrapperStyle;
-  var additional = (ADDITIONAL_PROPERTY_FLAG in schema);
+  const {
+    RemoveButton
+  } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+  const {
+    readonlyAsDisabled = true,
+    wrapperStyle
+  } = registry.formContext;
+  const additional = (ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
     return jsx("div", {
       className: classNames,
@@ -752,10 +776,9 @@ function WrapIfAdditionalTemplate(props) {
       children: children
     });
   }
-  var handleBlur = function handleBlur(_ref) {
-    var target = _ref.target;
-    return onKeyChange(target.value);
-  };
+  const handleBlur = ({
+    target
+  }) => onKeyChange(target.value);
   return jsx("div", {
     className: classNames,
     style: style,
@@ -771,13 +794,13 @@ function WrapIfAdditionalTemplate(props) {
               className: 'form-group',
               hasFeedback: true,
               fluid: true,
-              htmlFor: "" + id,
+              htmlFor: `${id}`,
               label: keyLabel,
               required: required,
               defaultValue: label,
               disabled: disabled || readonlyAsDisabled && readonly,
-              id: "" + id,
-              name: "" + id,
+              id: `${id}`,
+              name: `${id}`,
               onBlur: !readonly ? handleBlur : undefined,
               style: wrapperStyle,
               type: 'text'
@@ -799,30 +822,30 @@ function WrapIfAdditionalTemplate(props) {
         })]
       })
     })
-  }, id + "-key");
+  }, `${id}-key`);
 }
 
 function generateTemplates() {
   return {
-    ArrayFieldItemTemplate: ArrayFieldItemTemplate,
-    ArrayFieldTemplate: ArrayFieldTemplate,
-    BaseInputTemplate: BaseInputTemplate,
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
     ButtonTemplates: {
-      AddButton: AddButton,
-      CopyButton: CopyButton,
-      MoveDownButton: MoveDownButton,
-      MoveUpButton: MoveUpButton,
-      RemoveButton: RemoveButton,
-      SubmitButton: SubmitButton
+      AddButton,
+      CopyButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton,
+      SubmitButton
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
-    FieldErrorTemplate: FieldErrorTemplate,
-    FieldHelpTemplate: FieldHelpTemplate,
-    FieldTemplate: FieldTemplate,
-    ObjectFieldTemplate: ObjectFieldTemplate,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
-    WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
+    WrapIfAdditionalTemplate
   };
 }
 var Templates = /*#__PURE__*/generateTemplates();
@@ -833,49 +856,42 @@ var Templates = /*#__PURE__*/generateTemplates();
  * @param props - The `WidgetProps` for this component
  */
 function CheckboxWidget(props) {
-  var _options$description;
-  var id = props.id,
-    value = props.value,
-    disabled = props.disabled,
-    readonly = props.readonly,
-    _props$label = props.label,
-    label = _props$label === void 0 ? '' : _props$label,
-    hideLabel = props.hideLabel,
-    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,
-    registry = props.registry;
-  var semanticProps = getSemanticProps({
-    options: options,
-    formContext: formContext,
-    uiSchema: uiSchema,
+  const {
+    id,
+    value,
+    disabled,
+    readonly,
+    label = '',
+    hideLabel,
+    autofocus,
+    onChange,
+    onBlur,
+    options,
+    onFocus,
+    formContext,
+    schema,
+    uiSchema,
+    rawErrors = [],
+    registry
+  } = props;
+  const semanticProps = getSemanticProps({
+    options,
+    formContext,
+    uiSchema,
     defaultSchemaProps: {
       inverted: 'false'
     }
   });
-  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
+  const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
   // 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;
-  var description = (_options$description = options.description) != null ? _options$description : schema.description;
+  const required = schemaRequiresTrueValue(schema);
+  const _onChange = (_, data) => onChange && onChange(data.checked);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+  const checked = value == 'true' || value == true;
+  const description = options.description ?? schema.description;
   return jsxs(Fragment, {
     children: [!hideLabel && !!description && jsx(DescriptionFieldTemplate, {
       id: descriptionId(id),
@@ -883,12 +899,12 @@ function CheckboxWidget(props) {
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
-    }), jsx(Form.Checkbox, _extends({
+    }), jsx(Form.Checkbox, {
       id: id,
       name: id,
       disabled: disabled || readonly,
-      autoFocus: autofocus
-    }, semanticProps, {
+      autoFocus: autofocus,
+      ...semanticProps,
       checked: typeof value === 'undefined' ? false : checked,
       error: rawErrors.length > 0,
       onChange: _onChange,
@@ -897,7 +913,7 @@ function CheckboxWidget(props) {
       required: required,
       label: labelValue(label, hideLabel, false),
       "aria-describedby": ariaDescribedByIds(id)
-    }))]
+    })]
   });
 }
 
@@ -907,54 +923,54 @@ function CheckboxWidget(props) {
  * @param props - The `WidgetProps` for this component
  */
 function CheckboxesWidget(props) {
-  var id = props.id,
-    disabled = props.disabled,
-    options = props.options,
-    value = props.value,
-    autofocus = props.autofocus,
-    readonly = props.readonly,
-    label = props.label,
-    hideLabel = props.hideLabel,
-    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 semanticProps = getSemanticProps({
-    options: options,
-    formContext: formContext,
-    uiSchema: uiSchema,
+  const {
+    id,
+    disabled,
+    options,
+    value,
+    autofocus,
+    readonly,
+    label,
+    hideLabel,
+    onChange,
+    onBlur,
+    onFocus,
+    formContext,
+    schema,
+    uiSchema,
+    rawErrors = [],
+    registry
+  } = props;
+  const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, options);
+  const {
+    enumOptions,
+    enumDisabled,
+    inline
+  } = options;
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+  const semanticProps = getSemanticProps({
+    options,
+    formContext,
+    uiSchema,
     defaultSchemaProps: {
       inverted: 'false'
     }
   });
-  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));
-      }
-    };
-  };
-  var _onBlur = function _onBlur() {
-    return onBlur(id, value);
-  };
-  var _onFocus = function _onFocus() {
-    return onFocus(id, value);
+  const _onChange = index => ({
+    target: {
+      checked
+    }
+  }) => {
+    // eslint-disable-next-line no-shadow
+    if (checked) {
+      onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+    } else {
+      onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
+    }
   };
-  var inlineOption = inline ? {
+  const _onBlur = () => onBlur(id, value);
+  const _onFocus = () => onFocus(id, value);
+  const inlineOption = inline ? {
     inline: true
   } : {
     grouped: true
@@ -966,18 +982,18 @@ function CheckboxesWidget(props) {
       schema: schema,
       uiSchema: uiSchema,
       registry: registry
-    }), jsx(Form.Group, _extends({
+    }), jsx(Form.Group, {
       id: id,
-      name: id
-    }, inlineOption, {
-      children: 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 jsx(Form.Checkbox, _extends({
+      name: id,
+      ...inlineOption,
+      children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+        const checked = enumOptionsIsSelected(option.value, checkboxesValues);
+        const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        return jsx(Form.Checkbox, {
           id: optionId(id, index),
           name: id,
-          label: option.label
-        }, semanticProps, {
+          label: option.label,
+          ...semanticProps,
           checked: checked,
           error: rawErrors.length > 0,
           disabled: disabled || itemDisabled || readonly,
@@ -986,9 +1002,9 @@ function CheckboxesWidget(props) {
           onBlur: _onBlur,
           onFocus: _onFocus,
           "aria-describedby": ariaDescribedByIds(id)
-        }), index);
+        }, index);
       })
-    }))]
+    })]
   });
 }
 
@@ -998,52 +1014,53 @@ function CheckboxesWidget(props) {
  * @param props - The `WidgetProps` for this component
  */
 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,
-    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
+  const {
+    id,
+    value,
+    required,
+    disabled,
+    readonly,
+    onChange,
+    onBlur,
+    onFocus,
+    options,
+    formContext,
+    uiSchema,
+    rawErrors = []
+  } = props;
+  const {
+    enumOptions,
+    enumDisabled,
+    emptyValue
+  } = options;
+  const semanticProps = getSemanticProps({
+    formContext,
+    options,
+    uiSchema
   });
-  var _onChange = function _onChange(_, _ref) {
-    var eventValue = _ref.value;
+  const _onChange = (_, {
+    value: eventValue
+  }) => {
     return onChange(enumOptionsValueForIndex(eventValue, enumOptions, emptyValue));
   };
-  var _onBlur = function _onBlur() {
-    return onBlur(id, value);
-  };
-  var _onFocus = function _onFocus() {
-    return onFocus(id, value);
-  };
-  var inlineOption = options.inline ? {
+  const _onBlur = () => onBlur(id, value);
+  const _onFocus = () => onFocus(id, value);
+  const inlineOption = options.inline ? {
     inline: true
   } : {
     grouped: true
   };
-  return jsx(Form.Group, _extends({}, inlineOption, {
-    children: 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__*/createElement(Form.Field, _extends({
+  return jsx(Form.Group, {
+    ...inlineOption,
+    children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+      const checked = enumOptionsIsSelected(option.value, value);
+      const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+      return /*#__PURE__*/createElement(Form.Field, {
         required: required,
         control: Radio,
         id: optionId(id, index),
-        name: id
-      }, semanticProps, {
+        name: id,
+        ...semanticProps,
         onFocus: _onFocus,
         onBlur: _onBlur,
         onChange: _onChange,
@@ -1054,9 +1071,9 @@ function RadioWidget(props) {
         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
@@ -1065,54 +1082,53 @@ function RadioWidget(props) {
  * @param props - The `WidgetProps` for this component
  */
 function RangeWidget(props) {
-  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,
+  const {
+    id,
+    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;
-    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);
-  };
+  const _onChange = ({
+    target: {
+      value
+    }
+  }) => onChange && onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
   return jsxs(Fragment, {
-    children: [jsx(Input, _extends({
+    children: [jsx(Input, {
       id: id,
       name: id,
       type: 'range',
       required: required,
-      disabled: disabled || readonly
-    }, rangeSpec(schema), semanticProps, {
+      disabled: disabled || readonly,
+      ...rangeSpec(schema),
+      ...semanticProps,
       value: value || '',
       error: rawErrors.length > 0,
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
       "aria-describedby": ariaDescribedByIds(id)
-    }), id), jsx("span", {
+    }, id), jsx("span", {
       children: value
     })]
   });
@@ -1125,17 +1141,16 @@ function RangeWidget(props) {
  * @returns {*}
  */
 function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled) {
-  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: String(index)
-    };
-  });
+  const disabledOptions = enumDisabled || [];
+  const options = map(enumOptions, ({
+    label,
+    value
+  }, index) => ({
+    disabled: disabledOptions.indexOf(value) !== -1,
+    key: label,
+    text: label,
+    value: String(index)
+  }));
   return options;
 }
 /** The `SelectWidget` is a widget for rendering dropdowns.
@@ -1144,28 +1159,29 @@ function createDefaultValueOptionsForDropDown(enumOptions, enumDisabled) {
  * @param props - The `WidgetProps` for this component
  */
 function SelectWidget(props) {
-  var uiSchema = props.uiSchema,
-    formContext = props.formContext,
-    id = props.id,
-    options = props.options,
-    label = props.label,
-    hideLabel = props.hideLabel,
-    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,
+  const {
+    uiSchema,
+    formContext,
+    id,
+    options,
+    label,
+    hideLabel,
+    required,
+    disabled,
+    readonly,
+    value,
+    multiple,
+    placeholder,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    rawErrors = []
+  } = props;
+  const semanticProps = getSemanticProps({
+    uiSchema,
+    formContext,
+    options,
     defaultSchemaProps: {
       inverted: 'false',
       selection: true,
@@ -1174,26 +1190,29 @@ function SelectWidget(props) {
       upward: false
     }
   });
-  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 {
+    enumDisabled,
+    enumOptions,
+    emptyValue: optEmptyVal
+  } = options;
+  const emptyValue = multiple ? [] : '';
+  const dropdownOptions = createDefaultValueOptionsForDropDown(enumOptions, enumDisabled);
+  const _onChange = (_, {
+    value
+  }) => onChange(enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
   // 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 jsx(Form.Dropdown, _extends({
+  const _onBlur = (_, {
+    target: {
+      value
+    }
+  }) => onBlur(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
+  const _onFocus = (_, {
+    target: {
+      value
+    }
+  }) => onFocus(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
+  const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
+  return jsx(Form.Dropdown, {
     id: id,
     name: id,
     label: labelValue(label || undefined, hideLabel, false),
@@ -1201,8 +1220,8 @@ function SelectWidget(props) {
     value: typeof value === 'undefined' ? emptyValue : selectedIndexes,
     error: rawErrors.length > 0,
     disabled: disabled,
-    placeholder: placeholder
-  }, semanticProps, {
+    placeholder: placeholder,
+    ...semanticProps,
     required: required,
     autoFocus: autofocus,
     readOnly: readonly,
@@ -1211,7 +1230,7 @@ function SelectWidget(props) {
     onBlur: _onBlur,
     onFocus: _onFocus,
     "aria-describedby": ariaDescribedByIds(id)
-  }), id);
+  }, id);
 }
 
 /** The `TextareaWidget` is a widget for rendering input fields as textarea.
@@ -1219,49 +1238,47 @@ function SelectWidget(props) {
  * @param props - The `WidgetProps` for this component
  */
 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,
-    hideLabel = props.hideLabel,
-    readonly = props.readonly,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    onChange = props.onChange,
-    options = props.options,
-    formContext = props.formContext,
-    _props$rawErrors = props.rawErrors,
-    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors;
-  var semanticProps = getSemanticProps({
-    formContext: formContext,
-    options: options,
+  const {
+    id,
+    placeholder,
+    value,
+    required,
+    disabled,
+    autofocus,
+    label,
+    hideLabel,
+    readonly,
+    onBlur,
+    onFocus,
+    onChange,
+    options,
+    formContext,
+    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;
-    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);
-  };
-  return jsx(Form.TextArea, _extends({
+  const _onChange = ({
+    target: {
+      value
+    }
+  }) => onChange && onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = () => onBlur && onBlur(id, value);
+  const _onFocus = () => onFocus && onFocus(id, value);
+  return jsx(Form.TextArea, {
     id: id,
     name: id,
     label: labelValue(label || undefined, hideLabel, false),
     placeholder: placeholder,
     autoFocus: autofocus,
     required: required,
-    disabled: disabled || readonly
-  }, semanticProps, {
+    disabled: disabled || readonly,
+    ...semanticProps,
     value: value || '',
     error: rawErrors.length > 0,
     rows: options.rows || 5,
@@ -1269,17 +1286,17 @@ function TextareaWidget(props) {
     onBlur: _onBlur,
     onFocus: _onFocus,
     "aria-describedby": ariaDescribedByIds(id)
-  }), id);
+  }, id);
 }
 
 function generateWidgets() {
   return {
-    CheckboxWidget: CheckboxWidget,
-    CheckboxesWidget: CheckboxesWidget,
-    RadioWidget: RadioWidget,
-    RangeWidget: RangeWidget,
-    SelectWidget: SelectWidget,
-    TextareaWidget: TextareaWidget
+    CheckboxWidget,
+    CheckboxesWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget
   };
 }
 var Widgets = /*#__PURE__*/generateWidgets();