@rjsf/semantic-ui 5.1.0 → 5.2.1

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

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@rjsf/core');
 var semanticUiReact = require('semantic-ui-react');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var utils = require('@rjsf/utils');
 var nanoid = require('nanoid');
+var react = require('react');
 var map = require('lodash/map');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var map__default = /*#__PURE__*/_interopDefaultLegacy(map);
 
 function _extends() {
@@ -45,16 +45,19 @@ var _excluded$4 = ["uiSchema", "registry", "color"];
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
 function AddButton(_ref) {
-  var color = _ref.color,
+  var registry = _ref.registry,
+    color = _ref.color,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
-    title: "Add Item",
+  var translateString = registry.translateString;
+  return jsxRuntime.jsx(semanticUiReact.Button, _extends({
+    title: translateString(utils.TranslatableString.AddItemButton),
     color: color
   }, props, {
     icon: true,
-    size: "tiny"
-  }), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Icon, {
-    name: "plus"
+    size: 'tiny',
+    children: jsxRuntime.jsx(semanticUiReact.Icon, {
+      name: 'plus'
+    })
   }));
 }
 
@@ -108,8 +111,8 @@ function getSemanticErrorProps(_ref2) {
     options = _ref2$options === void 0 ? {} : _ref2$options,
     _ref2$defaultProps = _ref2.defaultProps,
     defaultProps = _ref2$defaultProps === void 0 ? {
-      size: "small",
-      pointing: "above"
+      size: 'small',
+      pointing: 'above'
     } : _ref2$defaultProps;
   var formContextProps = formContext.semantic && formContext.semantic.errorOptions;
   var semanticOptions = utils.getUiOptions(uiSchema).semantic;
@@ -139,7 +142,7 @@ function cleanClassNames(classNameArr, omit) {
   // returning them as a string
   return [].concat(new Set(classList.filter(function (cn) {
     return !omit.includes(cn);
-  }))).join(" ");
+  }))).join(' ');
 }
 /**
  *
@@ -152,14 +155,14 @@ function cleanClassNames(classNameArr, omit) {
 function MaybeWrap(_ref3) {
   var wrap = _ref3.wrap,
     _ref3$component = _ref3.component,
-    Component = _ref3$component === void 0 ? "div" : _ref3$component,
+    Component = _ref3$component === void 0 ? 'div' : _ref3$component,
     props = _objectWithoutPropertiesLoose(_ref3, _excluded$3);
-  return wrap ? /*#__PURE__*/React__default["default"].createElement(Component, _extends({}, props)) : props.children;
+  return wrap ? jsxRuntime.jsx(Component, _extends({}, props)) : props.children;
 }
 
 var gridStyle = function gridStyle(vertical) {
   return {
-    display: "grid",
+    display: 'grid',
     gridTemplateColumns: "1fr " + (vertical ? 65 : 110) + "px"
   };
 };
@@ -191,40 +194,47 @@ function ArrayFieldItemTemplate(props) {
     horizontalButtons = _uiOptions$semantic$h === void 0 ? false : _uiOptions$semantic$h,
     _uiOptions$semantic$w = _uiOptions$semantic.wrapItem,
     wrapItem = _uiOptions$semantic$w === void 0 ? false : _uiOptions$semantic$w;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "array-item"
-  }, /*#__PURE__*/React__default["default"].createElement(MaybeWrap, {
-    wrap: wrapItem,
-    component: semanticUiReact.Segment
-  }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid, {
-    style: index !== 0 ? _extends({}, gridStyle(!horizontalButtons), {
-      alignItems: "center"
-    }) : gridStyle(!horizontalButtons)
-  }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
-    width: 16,
-    verticalAlign: "middle"
-  }, children), hasToolbar && /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, null, (hasMoveUp || hasMoveDown || hasRemove) && /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button.Group, {
-    size: "mini",
-    vertical: !horizontalButtons
-  }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
-    className: "array-item-move-up",
-    disabled: disabled || readonly || !hasMoveUp,
-    onClick: onReorderClick(index, index - 1),
-    uiSchema: uiSchema,
-    registry: registry
-  }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
-    className: "array-item-move-down",
-    disabled: disabled || readonly || !hasMoveDown,
-    onClick: onReorderClick(index, index + 1),
-    uiSchema: uiSchema,
-    registry: registry
-  }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-    className: "array-item-remove",
-    disabled: disabled || readonly,
-    onClick: onDropIndexClick(index),
-    uiSchema: uiSchema,
-    registry: registry
-  }))))));
+  return jsxRuntime.jsx("div", {
+    className: 'array-item',
+    children: jsxRuntime.jsx(MaybeWrap, {
+      wrap: wrapItem,
+      component: semanticUiReact.Segment,
+      children: jsxRuntime.jsxs(semanticUiReact.Grid, {
+        style: index !== 0 ? _extends({}, gridStyle(!horizontalButtons), {
+          alignItems: 'center'
+        }) : gridStyle(!horizontalButtons),
+        children: [jsxRuntime.jsx(semanticUiReact.Grid.Column, {
+          width: 16,
+          verticalAlign: 'middle',
+          children: children
+        }), hasToolbar && jsxRuntime.jsx(semanticUiReact.Grid.Column, {
+          children: (hasMoveUp || hasMoveDown || hasRemove) && jsxRuntime.jsxs(semanticUiReact.Button.Group, {
+            size: 'mini',
+            vertical: !horizontalButtons,
+            children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
+              className: 'array-item-move-up',
+              disabled: disabled || readonly || !hasMoveUp,
+              onClick: onReorderClick(index, index - 1),
+              uiSchema: uiSchema,
+              registry: registry
+            }), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
+              className: 'array-item-move-down',
+              disabled: disabled || readonly || !hasMoveDown,
+              onClick: onReorderClick(index, index + 1),
+              uiSchema: uiSchema,
+              registry: registry
+            }), hasRemove && jsxRuntime.jsx(RemoveButton, {
+              className: 'array-item-remove',
+              disabled: disabled || readonly,
+              onClick: onDropIndexClick(index),
+              uiSchema: uiSchema,
+              registry: registry
+            })]
+          })
+        })]
+      })
+    })
+  });
 }
 
 var _excluded$2 = ["key", "uiSchema"];
@@ -261,57 +271,58 @@ function ArrayFieldTemplate(props) {
     wrapItem: wrapItem
   };
   var uiOptions = utils.getUiOptions(uiSchema);
-  var ArrayFieldDescriptionTemplate = utils.getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
-  var ArrayFieldItemTemplate = utils.getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-  var ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  var ArrayFieldDescriptionTemplate = utils.getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
+  var ArrayFieldItemTemplate = utils.getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
+  var ArrayFieldTitleTemplate = utils.getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
-  return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: cleanClassNames([className, utils.isFixedItems(schema) ? "" : "sortable-form-fields"])
-  }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldTitleTemplate, {
-    idSchema: idSchema,
-    title: uiOptions.title || title,
-    schema: schema,
-    uiSchema: uiSchema,
-    required: required,
-    registry: registry
-  }), /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
-    idSchema: idSchema,
-    description: uiOptions.description || schema.description,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), /*#__PURE__*/React__default["default"].createElement("div", {
-    key: "array-item-list-" + idSchema.$id
-  }, /*#__PURE__*/React__default["default"].createElement("div", {
-    className: "row array-item-list"
-  }, items && items.map(function (_ref) {
-    var _extends2;
-    var key = _ref.key,
-      _ref$uiSchema = _ref.uiSchema,
-      itemUiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-    // Merge in the semantic props from the ArrayFieldTemplate into each of the items
-    var mergedUiSchema = _extends({}, itemUiSchema, (_extends2 = {}, _extends2[utils.UI_OPTIONS_KEY] = _extends({}, itemUiSchema[utils.UI_OPTIONS_KEY], {
-      semantic: semantic
-    }), _extends2));
-    return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
-      key: key
-    }, props, {
-      uiSchema: mergedUiSchema
-    }));
-  })), canAdd && /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginTop: "1rem",
-      position: "relative",
-      textAlign: "right"
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
-    onClick: onAddClick,
-    disabled: disabled || readonly,
-    uiSchema: uiSchema,
-    registry: registry
-  }))));
+  return jsxRuntime.jsxs("div", {
+    className: cleanClassNames([className, utils.isFixedItems(schema) ? '' : 'sortable-form-fields']),
+    children: [jsxRuntime.jsx(ArrayFieldTitleTemplate, {
+      idSchema: idSchema,
+      title: uiOptions.title || title,
+      schema: schema,
+      uiSchema: uiSchema,
+      required: required,
+      registry: registry
+    }), jsxRuntime.jsx(ArrayFieldDescriptionTemplate, {
+      idSchema: idSchema,
+      description: uiOptions.description || schema.description,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), jsxRuntime.jsxs("div", {
+      children: [jsxRuntime.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);
+          // Merge in the semantic props from the ArrayFieldTemplate into each of the items
+          var mergedUiSchema = _extends({}, itemUiSchema, (_extends2 = {}, _extends2[utils.UI_OPTIONS_KEY] = _extends({}, itemUiSchema[utils.UI_OPTIONS_KEY], {
+            semantic: semantic
+          }), _extends2));
+          return jsxRuntime.jsx(ArrayFieldItemTemplate, _extends({}, props, {
+            uiSchema: mergedUiSchema
+          }), key);
+        })
+      }), canAdd && jsxRuntime.jsx("div", {
+        style: {
+          marginTop: '1rem',
+          position: 'relative',
+          textAlign: 'right'
+        },
+        children: jsxRuntime.jsx(AddButton, {
+          onClick: onAddClick,
+          disabled: disabled || readonly,
+          uiSchema: uiSchema,
+          registry: registry
+        })
+      })]
+    }, "array-item-list-" + idSchema.$id)]
+  });
 }
 
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
@@ -329,6 +340,7 @@ function BaseInputTemplate(props) {
     readonly = props.readonly,
     disabled = props.disabled,
     onChange = props.onChange,
+    onChangeOverride = props.onChangeOverride,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     autofocus = props.autofocus,
@@ -349,7 +361,7 @@ function BaseInputTemplate(props) {
   var schemaUtils = registry.schemaUtils;
   var _onChange = function _onChange(_ref) {
     var value = _ref.target.value;
-    return onChange(value === "" ? options.emptyValue : value);
+    return onChange(value === '' ? options.emptyValue : value);
   };
   var _onBlur = function _onBlur() {
     return onBlur && onBlur(id, value);
@@ -358,32 +370,33 @@ function BaseInputTemplate(props) {
     return onFocus && onFocus(id, value);
   };
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Input, _extends({
-    key: id,
-    id: id,
-    name: id,
-    placeholder: placeholder
-  }, inputProps, {
-    label: displayLabel ? label || schema.title : false,
-    required: required,
-    autoFocus: autofocus,
-    disabled: disabled || readonly,
-    list: schema.examples ? utils.examplesId(id) : undefined
-  }, semanticProps, {
-    value: value || value === 0 ? value : "",
-    error: rawErrors.length > 0,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
-  })), Array.isArray(schema.examples) && /*#__PURE__*/React__default["default"].createElement("datalist", {
-    id: utils.examplesId(id)
-  }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
-    return /*#__PURE__*/React__default["default"].createElement("option", {
-      key: example,
-      value: example
-    });
-  })));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(semanticUiReact.Form.Input, _extends({
+      id: id,
+      name: id,
+      placeholder: placeholder
+    }, inputProps, {
+      label: displayLabel ? label || schema.title : false,
+      required: required,
+      autoFocus: autofocus,
+      disabled: disabled || readonly,
+      list: schema.examples ? utils.examplesId(id) : undefined
+    }, semanticProps, {
+      value: value || value === 0 ? value : '',
+      error: rawErrors.length > 0,
+      onChange: onChangeOverride || _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
+    }), id), Array.isArray(schema.examples) && jsxRuntime.jsx("datalist", {
+      id: utils.examplesId(id),
+      children: schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
+        return jsxRuntime.jsx("option", {
+          value: example
+        }, example);
+      })
+    })]
+  });
 }
 
 /** The `DescriptionField` is the template to use to render the description of a field
@@ -396,10 +409,11 @@ function DescriptionField(props) {
   if (!description) {
     return null;
   }
-  return /*#__PURE__*/React__default["default"].createElement("p", {
+  return jsxRuntime.jsx("p", {
     id: id,
-    className: "sui-description"
-  }, description);
+    className: 'sui-description',
+    children: description
+  });
 }
 
 /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
@@ -407,14 +421,21 @@ function DescriptionField(props) {
  * @param props - The `ErrorListProps` for this component
  */
 function ErrorList(_ref) {
-  var errors = _ref.errors;
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message, {
-    negative: true
-  }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.Header, null, "Errors"), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.List, null, errors.map(function (error, index) {
-    return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message.Item, {
-      key: "error-" + index
-    }, error.stack);
-  })));
+  var errors = _ref.errors,
+    registry = _ref.registry;
+  var translateString = registry.translateString;
+  return jsxRuntime.jsxs(semanticUiReact.Message, {
+    negative: true,
+    children: [jsxRuntime.jsx(semanticUiReact.Message.Header, {
+      children: translateString(utils.TranslatableString.ErrorsLabel)
+    }), jsxRuntime.jsx(semanticUiReact.Message.List, {
+      children: errors.map(function (error, index) {
+        return jsxRuntime.jsx(semanticUiReact.Message.Item, {
+          children: error.stack
+        }, "error-" + index);
+      })
+    })]
+  });
 }
 
 var _excluded$1 = ["icon", "iconType", "color", "className", "uiSchema", "registry"];
@@ -424,7 +445,7 @@ function IconButton(props) {
     color = props.color,
     className = props.className,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
+  return jsxRuntime.jsx(semanticUiReact.Button, _extends({
     icon: icon,
     size: iconType,
     color: color,
@@ -432,31 +453,34 @@ function IconButton(props) {
   }, otherProps));
 }
 function MoveDownButton(props) {
-  return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
-    title: "Move down"
+  var translateString = props.registry.translateString;
+  return jsxRuntime.jsx(IconButton, _extends({
+    title: translateString(utils.TranslatableString.MoveDownButton)
   }, props, {
-    icon: "angle down"
+    icon: 'angle down'
   }));
 }
 function MoveUpButton(props) {
-  return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
-    title: "Move up"
+  var translateString = props.registry.translateString;
+  return jsxRuntime.jsx(IconButton, _extends({
+    title: translateString(utils.TranslatableString.MoveUpButton)
   }, props, {
-    icon: "angle up"
+    icon: 'angle up'
   }));
 }
 function RemoveButton(props) {
-  return /*#__PURE__*/React__default["default"].createElement(IconButton, _extends({
-    title: "Remove"
+  var translateString = props.registry.translateString;
+  return jsxRuntime.jsx(IconButton, _extends({
+    title: translateString(utils.TranslatableString.RemoveButton)
   }, props, {
-    icon: "trash"
+    icon: 'trash'
   }));
 }
 
 var DEFAULT_OPTIONS$1 = {
   options: {
-    pointing: "above",
-    size: "small"
+    pointing: 'above',
+    size: 'small'
   }
 };
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
@@ -477,20 +501,22 @@ function FieldErrorTemplate(_ref) {
   var pointing = options.pointing,
     size = options.size;
   if (errors && errors.length > 0) {
-    var id = idSchema.$id + "__error";
-    return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Label, {
+    var id = utils.errorId(idSchema);
+    return jsxRuntime.jsx(semanticUiReact.Label, {
       id: id,
-      color: "red",
-      pointing: pointing || "above",
-      size: size || "small",
-      basic: true
-    }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.List, {
-      bulleted: true
-    }, errors.map(function (error) {
-      return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.List.Item, {
-        key: nanoid.nanoid()
-      }, error);
-    })));
+      color: 'red',
+      pointing: pointing || 'above',
+      size: size || 'small',
+      basic: true,
+      children: jsxRuntime.jsx(semanticUiReact.List, {
+        bulleted: true,
+        children: errors.map(function (error) {
+          return jsxRuntime.jsx(semanticUiReact.List.Item, {
+            children: error
+          }, nanoid.nanoid());
+        })
+      })
+    });
   }
   return null;
 }
@@ -503,9 +529,9 @@ function FieldHelpTemplate(props) {
   var idSchema = props.idSchema,
     help = props.help;
   if (help) {
-    var id = idSchema.$id + "__help";
-    return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Message, {
-      size: "mini",
+    var id = utils.helpId(idSchema);
+    return jsxRuntime.jsx(semanticUiReact.Message, {
+      size: 'mini',
       info: true,
       id: id,
       content: help
@@ -539,16 +565,17 @@ function FieldTemplate(props) {
   var wrapLabel = semanticProps.wrapLabel,
     wrapContent = semanticProps.wrapContent;
   var uiOptions = utils.getUiOptions(uiSchema);
-  var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
-  var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+  var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
+  var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
   if (hidden) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return jsxRuntime.jsx("div", {
       style: {
-        display: "none"
-      }
-    }, children);
+        display: 'none'
+      },
+      children: children
+    });
   }
-  return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, _extends({
+  return jsxRuntime.jsx(WrapIfAdditionalTemplate, _extends({
     classNames: classNames,
     style: style,
     id: id,
@@ -556,23 +583,27 @@ function FieldTemplate(props) {
     registry: registry,
     schema: schema,
     uiSchema: uiSchema
-  }, otherProps), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, {
-    key: id,
-    widths: "equal",
-    grouped: true
-  }, /*#__PURE__*/React__default["default"].createElement(MaybeWrap, {
-    wrap: wrapContent,
-    className: "sui-field-content"
-  }, children, displayLabel && rawDescription && /*#__PURE__*/React__default["default"].createElement(MaybeWrap, {
-    wrap: wrapLabel,
-    className: "sui-field-label"
-  }, rawDescription && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: utils.descriptionId(id),
-    description: rawDescription,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  })), help, errors)));
+  }, otherProps, {
+    children: jsxRuntime.jsx(semanticUiReact.Form.Group, {
+      widths: 'equal',
+      grouped: true,
+      children: jsxRuntime.jsxs(MaybeWrap, {
+        wrap: wrapContent,
+        className: 'sui-field-content',
+        children: [children, displayLabel && rawDescription && jsxRuntime.jsx(MaybeWrap, {
+          wrap: wrapLabel,
+          className: 'sui-field-label',
+          children: rawDescription && jsxRuntime.jsx(DescriptionFieldTemplate, {
+            id: utils.descriptionId(id),
+            description: rawDescription,
+            schema: schema,
+            uiSchema: uiSchema,
+            registry: registry
+          })
+        }), help, errors]
+      })
+    }, id)
+  }));
 }
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -595,42 +626,48 @@ function ObjectFieldTemplate(props) {
     idSchema = props.idSchema,
     registry = props.registry;
   var uiOptions = utils.getUiOptions(uiSchema);
-  var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
-  var DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+  var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, uiOptions);
+  var DescriptionFieldTemplate = utils.getTemplate('DescriptionFieldTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   var fieldTitle = uiOptions.title || title;
   var fieldDescription = uiOptions.description || description;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, fieldTitle && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-    id: utils.titleId(idSchema),
-    title: fieldTitle,
-    required: required,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), fieldDescription && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: utils.descriptionId(idSchema),
-    description: fieldDescription,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), properties.map(function (prop) {
-    return prop.content;
-  }), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
-    width: 16,
-    verticalAlign: "middle"
-  }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Row, null, /*#__PURE__*/React__default["default"].createElement("div", {
-    style: {
-      marginTop: "1rem",
-      position: "relative",
-      textAlign: "right"
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
-    onClick: onAddClick(schema),
-    disabled: disabled || readonly,
-    uiSchema: uiSchema,
-    registry: registry
-  })))));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [fieldTitle && jsxRuntime.jsx(TitleFieldTemplate, {
+      id: utils.titleId(idSchema),
+      title: fieldTitle,
+      required: required,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), fieldDescription && jsxRuntime.jsx(DescriptionFieldTemplate, {
+      id: utils.descriptionId(idSchema),
+      description: fieldDescription,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), properties.map(function (prop) {
+      return prop.content;
+    }), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(semanticUiReact.Grid.Column, {
+      width: 16,
+      verticalAlign: 'middle',
+      children: jsxRuntime.jsx(semanticUiReact.Grid.Row, {
+        children: jsxRuntime.jsx("div", {
+          style: {
+            marginTop: '1rem',
+            position: 'relative',
+            textAlign: 'right'
+          },
+          children: jsxRuntime.jsx(AddButton, {
+            onClick: onAddClick(schema),
+            disabled: disabled || readonly,
+            uiSchema: uiSchema,
+            registry: registry
+          })
+        })
+      })
+    })]
+  });
 }
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
@@ -645,10 +682,12 @@ function SubmitButton(_ref) {
   if (norender) {
     return null;
   }
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Button, _extends({
-    type: "submit",
+  return jsxRuntime.jsx(semanticUiReact.Button, _extends({
+    type: 'submit',
     primary: true
-  }, submitButtonProps), submitText);
+  }, submitButtonProps, {
+    children: submitText
+  }));
 }
 
 var DEFAULT_OPTIONS = {
@@ -670,11 +709,12 @@ function TitleField(_ref) {
   if (!title) {
     return null;
   }
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Header, _extends({
+  return jsxRuntime.jsx(semanticUiReact.Header, _extends({
     id: id
   }, semanticProps, {
-    as: "h5"
-  }), title);
+    as: 'h5',
+    children: title
+  }));
 }
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
@@ -696,60 +736,71 @@ function WrapIfAdditionalTemplate(props) {
     schema = props.schema,
     uiSchema = props.uiSchema,
     registry = props.registry;
+  var templates = registry.templates,
+    translateString = registry.translateString;
   // Button templates are not overridden in the uiSchema
-  var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+  var RemoveButton = templates.ButtonTemplates.RemoveButton;
+  var keyLabel = translateString(utils.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 keyLabel = label + " Key"; // i18n ?
   var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
+    return jsxRuntime.jsx("div", {
       className: classNames,
-      style: style
-    }, children);
+      style: style,
+      children: children
+    });
   }
   var handleBlur = function handleBlur(_ref) {
     var target = _ref.target;
     return onKeyChange(target.value);
   };
-  return /*#__PURE__*/React__default["default"].createElement("div", {
+  return jsxRuntime.jsx("div", {
     className: classNames,
     style: style,
-    key: id + "-key"
-  }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid, {
-    columns: "equal"
-  }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Row, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
-    className: "form-additional"
-  }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, {
-    widths: "equal",
-    grouped: true
-  }, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Input, {
-    className: "form-group",
-    hasFeedback: true,
-    fluid: true,
-    htmlFor: "" + id,
-    label: keyLabel,
-    required: required,
-    defaultValue: label,
-    disabled: disabled || readonlyAsDisabled && readonly,
-    id: "" + id,
-    name: "" + id,
-    onBlur: !readonly ? handleBlur : undefined,
-    style: wrapperStyle,
-    type: "text"
-  }))), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, {
-    className: "form-additional",
-    verticalAlign: "middle"
-  }, children), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Grid.Column, null, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-    iconType: "mini",
-    className: "array-item-remove",
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label),
-    uiSchema: uiSchema,
-    registry: registry
-  })))));
+    children: jsxRuntime.jsx(semanticUiReact.Grid, {
+      columns: 'equal',
+      children: jsxRuntime.jsxs(semanticUiReact.Grid.Row, {
+        children: [jsxRuntime.jsx(semanticUiReact.Grid.Column, {
+          className: 'form-additional',
+          children: jsxRuntime.jsx(semanticUiReact.Form.Group, {
+            widths: 'equal',
+            grouped: true,
+            children: jsxRuntime.jsx(semanticUiReact.Form.Input, {
+              className: 'form-group',
+              hasFeedback: true,
+              fluid: true,
+              htmlFor: "" + id,
+              label: keyLabel,
+              required: required,
+              defaultValue: label,
+              disabled: disabled || readonlyAsDisabled && readonly,
+              id: "" + id,
+              name: "" + id,
+              onBlur: !readonly ? handleBlur : undefined,
+              style: wrapperStyle,
+              type: 'text'
+            })
+          })
+        }), jsxRuntime.jsx(semanticUiReact.Grid.Column, {
+          className: 'form-additional',
+          verticalAlign: 'middle',
+          children: children
+        }), jsxRuntime.jsx(semanticUiReact.Grid.Column, {
+          children: jsxRuntime.jsx(RemoveButton, {
+            iconType: 'mini',
+            className: 'array-item-remove',
+            disabled: disabled || readonly,
+            onClick: onDropPropertyClick(label),
+            uiSchema: uiSchema,
+            registry: registry
+          })
+        })]
+      })
+    })
+  }, id + "-key");
 }
 
 function generateTemplates() {
@@ -818,20 +869,20 @@ function CheckboxWidget(props) {
   var _onFocus = function _onFocus() {
     return onFocus && onFocus(id, value);
   };
-  var checked = value == "true" || value == true;
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Checkbox, _extends({
+  var checked = value == 'true' || value == true;
+  return jsxRuntime.jsx(semanticUiReact.Form.Checkbox, _extends({
     id: id,
     name: id,
     disabled: disabled || readonly,
     autoFocus: autofocus
   }, semanticProps, {
-    checked: typeof value === "undefined" ? false : checked,
+    checked: typeof value === 'undefined' ? false : checked,
     error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
     onFocus: _onFocus,
     required: required,
-    label: label || "",
+    label: label || '',
     "aria-describedby": utils.ariaDescribedByIds(id)
   }));
 }
@@ -857,7 +908,7 @@ function CheckboxesWidget(props) {
     _props$rawErrors = props.rawErrors,
     rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
     registry = props.registry;
-  var TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, options);
+  var TitleFieldTemplate = utils.getTemplate('TitleFieldTemplate', registry, options);
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     inline = options.inline;
@@ -893,34 +944,37 @@ function CheckboxesWidget(props) {
   } : {
     grouped: true
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, title && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-    id: utils.titleId(id),
-    title: title,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, _extends({
-    id: id,
-    name: id
-  }, inlineOption), Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-    var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
-    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Checkbox, _extends({
-      id: utils.optionId(id, index),
-      name: id,
-      key: index,
-      label: option.label
-    }, semanticProps, {
-      checked: checked,
-      error: rawErrors.length > 0,
-      disabled: disabled || itemDisabled || readonly,
-      autoFocus: autofocus && index === 0,
-      onChange: _onChange(index),
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": utils.ariaDescribedByIds(id)
-    }));
-  })));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [title && jsxRuntime.jsx(TitleFieldTemplate, {
+      id: utils.titleId(id),
+      title: title,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), jsxRuntime.jsx(semanticUiReact.Form.Group, _extends({
+      id: id,
+      name: id
+    }, inlineOption, {
+      children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+        var checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
+        var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        return jsxRuntime.jsx(semanticUiReact.Form.Checkbox, _extends({
+          id: utils.optionId(id, index),
+          name: id,
+          label: option.label
+        }, semanticProps, {
+          checked: checked,
+          error: rawErrors.length > 0,
+          disabled: disabled || itemDisabled || readonly,
+          autoFocus: autofocus && index === 0,
+          onChange: _onChange(index),
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          "aria-describedby": utils.ariaDescribedByIds(id)
+        }), index);
+      })
+    }))]
+  });
 }
 
 /** The `RadioWidget` is a widget for rendering a radio group.
@@ -965,26 +1019,28 @@ function RadioWidget(props) {
   } : {
     grouped: true
   };
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Group, _extends({}, inlineOption), Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-    var checked = utils.enumOptionsIsSelected(option.value, value);
-    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Field, _extends({
-      required: required,
-      control: semanticUiReact.Radio,
-      id: utils.optionId(id, index),
-      name: id
-    }, semanticProps, {
-      onFocus: _onFocus,
-      onBlur: _onBlur,
-      onChange: _onChange,
-      label: option.label,
-      value: String(index),
-      error: rawErrors.length > 0,
-      key: index,
-      checked: checked,
-      disabled: disabled || itemDisabled || readonly,
-      "aria-describedby": utils.ariaDescribedByIds(id)
-    }));
+  return jsxRuntime.jsx(semanticUiReact.Form.Group, _extends({}, inlineOption, {
+    children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+      var checked = utils.enumOptionsIsSelected(option.value, value);
+      var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+      return /*#__PURE__*/react.createElement(semanticUiReact.Form.Field, _extends({
+        required: required,
+        control: semanticUiReact.Radio,
+        id: utils.optionId(id, index),
+        name: id
+      }, semanticProps, {
+        onFocus: _onFocus,
+        onBlur: _onBlur,
+        onChange: _onChange,
+        label: option.label,
+        value: String(index),
+        error: rawErrors.length > 0,
+        key: index,
+        checked: checked,
+        disabled: disabled || itemDisabled || readonly,
+        "aria-describedby": utils.ariaDescribedByIds(id)
+      }));
+    })
   }));
 }
 
@@ -1019,7 +1075,7 @@ function RangeWidget(props) {
   // eslint-disable-next-line no-shadow
   var _onChange = function _onChange(_ref) {
     var value = _ref.target.value;
-    return onChange && onChange(value === "" ? options.emptyValue : value);
+    return onChange && onChange(value === '' ? options.emptyValue : value);
   };
   var _onBlur = function _onBlur() {
     return onBlur && onBlur(id, value);
@@ -1027,21 +1083,24 @@ function RangeWidget(props) {
   var _onFocus = function _onFocus() {
     return onFocus && onFocus(id, value);
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Input, _extends({
-    id: id,
-    key: id,
-    name: id,
-    type: "range",
-    required: required,
-    disabled: disabled || readonly
-  }, utils.rangeSpec(schema), semanticProps, {
-    value: value || "",
-    error: rawErrors.length > 0,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  })), /*#__PURE__*/React__default["default"].createElement("span", null, value));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(semanticUiReact.Input, _extends({
+      id: id,
+      name: id,
+      type: 'range',
+      required: required,
+      disabled: disabled || readonly
+    }, utils.rangeSpec(schema), semanticProps, {
+      value: value || '',
+      error: rawErrors.length > 0,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }), id), jsxRuntime.jsx("span", {
+      children: value
+    })]
+  });
 }
 
 /**
@@ -1093,7 +1152,7 @@ function SelectWidget(props) {
     formContext: formContext,
     options: options,
     defaultSchemaProps: {
-      inverted: "false",
+      inverted: 'false',
       selection: true,
       fluid: true,
       scrolling: true,
@@ -1103,7 +1162,7 @@ function SelectWidget(props) {
   var enumDisabled = options.enumDisabled,
     enumOptions = options.enumOptions,
     optEmptyVal = options.emptyValue;
-  var emptyValue = multiple ? [] : "";
+  var emptyValue = multiple ? [] : '';
   var dropdownOptions = createDefaultValueOptionsForDropDown(enumOptions, enumDisabled);
   var _onChange = function _onChange(_, _ref2) {
     var value = _ref2.value;
@@ -1119,13 +1178,12 @@ function SelectWidget(props) {
     return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
   };
   var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.Dropdown, _extends({
-    key: id,
+  return jsxRuntime.jsx(semanticUiReact.Form.Dropdown, _extends({
     id: id,
     name: id,
     label: label || schema.title,
-    multiple: typeof multiple === "undefined" ? false : multiple,
-    value: typeof value === "undefined" ? emptyValue : selectedIndexes,
+    multiple: typeof multiple === 'undefined' ? false : multiple,
+    value: typeof value === 'undefined' ? emptyValue : selectedIndexes,
     error: rawErrors.length > 0,
     disabled: disabled,
     placeholder: placeholder
@@ -1138,7 +1196,7 @@ function SelectWidget(props) {
     onBlur: _onBlur,
     onFocus: _onFocus,
     "aria-describedby": utils.ariaDescribedByIds(id)
-  }));
+  }), id);
 }
 
 /** The `TextareaWidget` is a widget for rendering input fields as textarea.
@@ -1175,7 +1233,7 @@ function TextareaWidget(props) {
   // eslint-disable-next-line no-shadow
   var _onChange = function _onChange(_ref) {
     var value = _ref.target.value;
-    return onChange && onChange(value === "" ? options.emptyValue : value);
+    return onChange && onChange(value === '' ? options.emptyValue : value);
   };
   var _onBlur = function _onBlur() {
     return onBlur && onBlur(id, value);
@@ -1184,9 +1242,8 @@ function TextareaWidget(props) {
     return onFocus && onFocus(id, value);
   };
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
-  return /*#__PURE__*/React__default["default"].createElement(semanticUiReact.Form.TextArea, _extends({
+  return jsxRuntime.jsx(semanticUiReact.Form.TextArea, _extends({
     id: id,
-    key: id,
     name: id,
     label: displayLabel ? label || schema.title : false,
     placeholder: placeholder,
@@ -1194,14 +1251,14 @@ function TextareaWidget(props) {
     required: required,
     disabled: disabled || readonly
   }, semanticProps, {
-    value: value || "",
+    value: value || '',
     error: rawErrors.length > 0,
     rows: options.rows || 5,
     onChange: _onChange,
     onBlur: _onBlur,
     onFocus: _onFocus,
     "aria-describedby": utils.ariaDescribedByIds(id)
-  }));
+  }), id);
 }
 
 function generateWidgets() {