@rjsf/antd 5.2.0 → 5.2.1

package/dist/antd.esm.js

@@ -1,5 +1,5 @@
 import { withTheme } from '@rjsf/core';
-import React, { useState, useEffect } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import Button from 'antd/es/button';
 import Col from 'antd/es/col';
 import Row from 'antd/es/row';
@@ -20,6 +20,7 @@ import Form$1 from 'antd/es/form';
 import isObject from 'lodash-es/isObject';
 import isNumber from 'lodash-es/isNumber';
 import isString from 'lodash-es/isString';
+import { useState, useEffect } from 'react';
 import Checkbox from 'antd/es/checkbox';
 import dayjs from 'dayjs';
 import dayjsGenerateConfig from 'rc-picker/es/generate/dayjs';
@@ -29,10 +30,10 @@ import Slider from 'antd/es/slider';
 import Select from 'antd/es/select';
 
 var BTN_GRP_STYLE = {
-  width: "100%"
+  width: '100%'
 };
 var BTN_STYLE = {
-  width: "calc(100% / 3)"
+  width: 'calc(100% / 3)'
 };
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
@@ -59,36 +60,39 @@ function ArrayFieldItemTemplate(props) {
     _registry$formContext2 = _registry$formContext.rowGutter,
     rowGutter = _registry$formContext2 === void 0 ? 24 : _registry$formContext2,
     _registry$formContext3 = _registry$formContext.toolbarAlign,
-    toolbarAlign = _registry$formContext3 === void 0 ? "top" : _registry$formContext3;
-  return /*#__PURE__*/React.createElement(Row, {
+    toolbarAlign = _registry$formContext3 === void 0 ? 'top' : _registry$formContext3;
+  return jsxs(Row, {
     align: toolbarAlign,
-    key: "array-item-" + index,
-    gutter: rowGutter
-  }, /*#__PURE__*/React.createElement(Col, {
-    flex: "1"
-  }, children), hasToolbar && /*#__PURE__*/React.createElement(Col, {
-    flex: "192px"
-  }, /*#__PURE__*/React.createElement(Button.Group, {
-    style: BTN_GRP_STYLE
-  }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React.createElement(MoveUpButton, {
-    disabled: disabled || readonly || !hasMoveUp,
-    onClick: onReorderClick(index, index - 1),
-    style: BTN_STYLE,
-    uiSchema: uiSchema,
-    registry: registry
-  }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React.createElement(MoveDownButton, {
-    disabled: disabled || readonly || !hasMoveDown,
-    onClick: onReorderClick(index, index + 1),
-    style: BTN_STYLE,
-    uiSchema: uiSchema,
-    registry: registry
-  }), hasRemove && /*#__PURE__*/React.createElement(RemoveButton, {
-    disabled: disabled || readonly,
-    onClick: onDropIndexClick(index),
-    style: BTN_STYLE,
-    uiSchema: uiSchema,
-    registry: registry
-  }))));
+    gutter: rowGutter,
+    children: [jsx(Col, {
+      flex: '1',
+      children: children
+    }), hasToolbar && jsx(Col, {
+      flex: '192px',
+      children: jsxs(Button.Group, {
+        style: BTN_GRP_STYLE,
+        children: [(hasMoveUp || hasMoveDown) && jsx(MoveUpButton, {
+          disabled: disabled || readonly || !hasMoveUp,
+          onClick: onReorderClick(index, index - 1),
+          style: BTN_STYLE,
+          uiSchema: uiSchema,
+          registry: registry
+        }), (hasMoveUp || hasMoveDown) && jsx(MoveDownButton, {
+          disabled: disabled || readonly || !hasMoveDown,
+          onClick: onReorderClick(index, index + 1),
+          style: BTN_STYLE,
+          uiSchema: uiSchema,
+          registry: registry
+        }), hasRemove && jsx(RemoveButton, {
+          disabled: disabled || readonly,
+          onClick: onDropIndexClick(index),
+          style: BTN_STYLE,
+          uiSchema: uiSchema,
+          registry: registry
+        })]
+      })
+    })]
+  }, "array-item-" + index);
 }
 
 function _extends() {
@@ -120,7 +124,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 var _excluded$1 = ["key"];
 var DESCRIPTION_COL_STYLE$1 = {
-  paddingBottom: "8px"
+  paddingBottom: '8px'
 };
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
@@ -141,75 +145,83 @@ function ArrayFieldTemplate(props) {
     title = props.title,
     uiSchema = props.uiSchema;
   var uiOptions = getUiOptions(uiSchema);
-  var ArrayFieldDescriptionTemplate = getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
-  var ArrayFieldItemTemplate = getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-  var ArrayFieldTitleTemplate = getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  var ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
+  var ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
+  var ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   var _formContext$labelAli = formContext.labelAlign,
-    labelAlign = _formContext$labelAli === void 0 ? "right" : _formContext$labelAli,
+    labelAlign = _formContext$labelAli === void 0 ? 'right' : _formContext$labelAli,
     _formContext$rowGutte = formContext.rowGutter,
     rowGutter = _formContext$rowGutte === void 0 ? 24 : _formContext$rowGutte;
-  return /*#__PURE__*/React.createElement(ConfigConsumer, null, function (configProps) {
-    var getPrefixCls = configProps.getPrefixCls;
-    var prefixCls = getPrefixCls("form");
-    var labelClsBasic = prefixCls + "-item-label";
-    var labelColClassName = classNames(labelClsBasic, labelAlign === "left" && labelClsBasic + "-left"
-    // labelCol.className,
-    );
+  return jsx(ConfigConsumer, {
+    children: function children(configProps) {
+      var getPrefixCls = configProps.getPrefixCls;
+      var prefixCls = getPrefixCls('form');
+      var labelClsBasic = prefixCls + "-item-label";
+      var labelColClassName = classNames(labelClsBasic, labelAlign === 'left' && labelClsBasic + "-left"
+      // labelCol.className,
+      );
 
-    return /*#__PURE__*/React.createElement("fieldset", {
-      className: className,
-      id: idSchema.$id
-    }, /*#__PURE__*/React.createElement(Row, {
-      gutter: rowGutter
-    }, (uiOptions.title || title) && /*#__PURE__*/React.createElement(Col, {
-      className: labelColClassName,
-      span: 24
-    }, /*#__PURE__*/React.createElement(ArrayFieldTitleTemplate, {
-      idSchema: idSchema,
-      required: required,
-      title: uiOptions.title || title,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    })), (uiOptions.description || schema.description) && /*#__PURE__*/React.createElement(Col, {
-      span: 24,
-      style: DESCRIPTION_COL_STYLE$1
-    }, /*#__PURE__*/React.createElement(ArrayFieldDescriptionTemplate, {
-      description: uiOptions.description || schema.description || "",
-      idSchema: idSchema,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    })), /*#__PURE__*/React.createElement(Col, {
-      className: "row array-item-list",
-      span: 24
-    }, items && items.map(function (_ref) {
-      var key = _ref.key,
-        itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-      return /*#__PURE__*/React.createElement(ArrayFieldItemTemplate, _extends({
-        key: key
-      }, itemProps));
-    })), canAdd && /*#__PURE__*/React.createElement(Col, {
-      span: 24
-    }, /*#__PURE__*/React.createElement(Row, {
-      gutter: rowGutter,
-      justify: "end"
-    }, /*#__PURE__*/React.createElement(Col, {
-      flex: "192px"
-    }, /*#__PURE__*/React.createElement(AddButton, {
-      className: "array-item-add",
-      disabled: disabled || readonly,
-      onClick: onAddClick,
-      uiSchema: uiSchema,
-      registry: registry
-    }))))));
+      return jsx("fieldset", {
+        className: className,
+        id: idSchema.$id,
+        children: jsxs(Row, {
+          gutter: rowGutter,
+          children: [(uiOptions.title || title) && jsx(Col, {
+            className: labelColClassName,
+            span: 24,
+            children: jsx(ArrayFieldTitleTemplate, {
+              idSchema: idSchema,
+              required: required,
+              title: uiOptions.title || title,
+              schema: schema,
+              uiSchema: uiSchema,
+              registry: registry
+            })
+          }), (uiOptions.description || schema.description) && jsx(Col, {
+            span: 24,
+            style: DESCRIPTION_COL_STYLE$1,
+            children: jsx(ArrayFieldDescriptionTemplate, {
+              description: uiOptions.description || schema.description || '',
+              idSchema: idSchema,
+              schema: schema,
+              uiSchema: uiSchema,
+              registry: registry
+            })
+          }), jsx(Col, {
+            className: 'row array-item-list',
+            span: 24,
+            children: items && items.map(function (_ref) {
+              var key = _ref.key,
+                itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
+              return jsx(ArrayFieldItemTemplate, _extends({}, itemProps), key);
+            })
+          }), canAdd && jsx(Col, {
+            span: 24,
+            children: jsx(Row, {
+              gutter: rowGutter,
+              justify: 'end',
+              children: jsx(Col, {
+                flex: '192px',
+                children: jsx(AddButton, {
+                  className: 'array-item-add',
+                  disabled: disabled || readonly,
+                  onClick: onAddClick,
+                  uiSchema: uiSchema,
+                  registry: registry
+                })
+              })
+            })
+          })]
+        })
+      });
+    }
   });
 }
 
 var INPUT_STYLE$2 = {
-  width: "100%"
+  width: '100%'
 };
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
@@ -223,6 +235,7 @@ function BaseInputTemplate(props) {
     id = props.id,
     onBlur = props.onBlur,
     onChange = props.onChange,
+    onChangeOverride = props.onChangeOverride,
     onFocus = props.onFocus,
     options = props.options,
     placeholder = props.placeholder,
@@ -236,9 +249,9 @@ function BaseInputTemplate(props) {
   var handleNumberChange = function handleNumberChange(nextValue) {
     return onChange(nextValue);
   };
-  var handleTextChange = function handleTextChange(_ref) {
+  var handleTextChange = onChangeOverride ? onChangeOverride : function (_ref) {
     var target = _ref.target;
-    return onChange(target.value === "" ? options.emptyValue : target.value);
+    return onChange(target.value === '' ? options.emptyValue : target.value);
   };
   var handleBlur = function handleBlur(_ref2) {
     var target = _ref2.target;
@@ -248,7 +261,7 @@ function BaseInputTemplate(props) {
     var target = _ref3.target;
     return onFocus(id, target.value);
   };
-  var input = inputProps.type === "number" || inputProps.type === "integer" ? /*#__PURE__*/React.createElement(InputNumber, _extends({
+  var input = inputProps.type === 'number' || inputProps.type === 'integer' ? jsx(InputNumber, _extends({
     disabled: disabled || readonlyAsDisabled && readonly,
     id: id,
     name: id,
@@ -261,7 +274,7 @@ function BaseInputTemplate(props) {
   }, inputProps, {
     value: value,
     "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
-  })) : /*#__PURE__*/React.createElement(Input, _extends({
+  })) : jsx(Input, _extends({
     disabled: disabled || readonlyAsDisabled && readonly,
     id: id,
     name: id,
@@ -275,14 +288,16 @@ function BaseInputTemplate(props) {
     value: value,
     "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
   }));
-  return /*#__PURE__*/React.createElement(React.Fragment, null, input, Array.isArray(schema.examples) && /*#__PURE__*/React.createElement("datalist", {
-    id: examplesId(id)
-  }, schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
-    return /*#__PURE__*/React.createElement("option", {
-      key: example,
-      value: example
-    });
-  })));
+  return jsxs(Fragment, {
+    children: [input, 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) {
+        return jsx("option", {
+          value: example
+        }, example);
+      })
+    })]
+  });
 }
 
 /** The `DescriptionField` is the template to use to render the description of a field
@@ -295,9 +310,10 @@ function DescriptionField(props) {
   if (!description) {
     return null;
   }
-  return /*#__PURE__*/React.createElement("span", {
-    id: id
-  }, description);
+  return jsx("span", {
+    id: id,
+    children: description
+  });
 }
 
 /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
@@ -309,71 +325,74 @@ function ErrorList(_ref) {
     registry = _ref.registry;
   var translateString = registry.translateString;
   var renderErrors = function renderErrors() {
-    return /*#__PURE__*/React.createElement(List, {
-      className: "list-group",
-      size: "small"
-    }, errors.map(function (error, index) {
-      return /*#__PURE__*/React.createElement(List.Item, {
-        key: index
-      }, /*#__PURE__*/React.createElement(Space, null, /*#__PURE__*/React.createElement(ExclamationCircleOutlined, null), error.stack));
-    }));
+    return jsx(List, {
+      className: 'list-group',
+      size: 'small',
+      children: errors.map(function (error, index) {
+        return jsx(List.Item, {
+          children: jsxs(Space, {
+            children: [jsx(ExclamationCircleOutlined, {}), error.stack]
+          })
+        }, index);
+      })
+    });
   };
-  return /*#__PURE__*/React.createElement(Alert, {
-    className: "panel panel-danger errors",
+  return jsx(Alert, {
+    className: 'panel panel-danger errors',
     description: renderErrors(),
     message: translateString(TranslatableString.ErrorsLabel),
-    type: "error"
+    type: 'error'
   });
 }
 
 var _excluded = ["iconType", "icon", "uiSchema", "registry"];
 function IconButton(props) {
   var _props$iconType = props.iconType,
-    iconType = _props$iconType === void 0 ? "default" : _props$iconType,
+    iconType = _props$iconType === void 0 ? 'default' : _props$iconType,
     icon = props.icon,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/React.createElement(Button, _extends({
+  return jsx(Button, _extends({
     type: iconType,
     icon: icon
   }, otherProps));
 }
 function AddButton(props) {
   var translateString = props.registry.translateString;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
+  return jsx(IconButton, _extends({
     title: translateString(TranslatableString.AddItemButton)
   }, props, {
     block: true,
-    iconType: "primary",
-    icon: /*#__PURE__*/React.createElement(PlusCircleOutlined, null)
+    iconType: 'primary',
+    icon: jsx(PlusCircleOutlined, {})
   }));
 }
 function MoveDownButton(props) {
   var translateString = props.registry.translateString;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
+  return jsx(IconButton, _extends({
     title: translateString(TranslatableString.MoveDownButton)
   }, props, {
-    icon: /*#__PURE__*/React.createElement(ArrowDownOutlined, null)
+    icon: jsx(ArrowDownOutlined, {})
   }));
 }
 function MoveUpButton(props) {
   var translateString = props.registry.translateString;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
+  return jsx(IconButton, _extends({
     title: translateString(TranslatableString.MoveUpButton)
   }, props, {
-    icon: /*#__PURE__*/React.createElement(ArrowUpOutlined, null)
+    icon: jsx(ArrowUpOutlined, {})
   }));
 }
 function RemoveButton(props) {
   // The `block` prop is not part of the `IconButtonProps` defined in the template, so get it from the uiSchema instead
   var options = getUiOptions(props.uiSchema);
   var translateString = props.registry.translateString;
-  return /*#__PURE__*/React.createElement(IconButton, _extends({
+  return jsx(IconButton, _extends({
     title: translateString(TranslatableString.RemoveButton)
   }, props, {
     danger: true,
     block: !!options.block,
-    iconType: "primary",
-    icon: /*#__PURE__*/React.createElement(DeleteOutlined, null)
+    iconType: 'primary',
+    icon: jsx(DeleteOutlined, {})
   }));
 }
 
@@ -389,13 +408,14 @@ function FieldErrorTemplate(props) {
     return null;
   }
   var id = errorId(idSchema);
-  return /*#__PURE__*/React.createElement("div", {
-    id: id
-  }, errors.map(function (error) {
-    return /*#__PURE__*/React.createElement("div", {
-      key: "field-" + id + "-error-" + error
-    }, error);
-  }));
+  return jsx("div", {
+    id: id,
+    children: errors.map(function (error) {
+      return jsx("div", {
+        children: error
+      }, "field-" + id + "-error-" + error);
+    })
+  });
 }
 
 var VERTICAL_LABEL_COL$1 = {
@@ -439,13 +459,14 @@ function FieldTemplate(props) {
     wrapperCol = _formContext$wrapperC === void 0 ? VERTICAL_WRAPPER_COL$1 : _formContext$wrapperC,
     wrapperStyle = formContext.wrapperStyle;
   var uiOptions = getUiOptions(uiSchema);
-  var WrapIfAdditionalTemplate = getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
+  var WrapIfAdditionalTemplate = getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
   if (hidden) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "field-hidden"
-    }, children);
+    return jsx("div", {
+      className: 'field-hidden',
+      children: children
+    });
   }
-  return /*#__PURE__*/React.createElement(WrapIfAdditionalTemplate, {
+  return jsx(WrapIfAdditionalTemplate, {
     classNames: classNames,
     style: style,
     disabled: disabled,
@@ -457,24 +478,26 @@ function FieldTemplate(props) {
     required: required,
     schema: schema,
     uiSchema: uiSchema,
-    registry: registry
-  }, id === "root" ? children : /*#__PURE__*/React.createElement(Form$1.Item, {
-    colon: colon,
-    extra: rawDescription && description,
-    hasFeedback: schema.type !== "array" && schema.type !== "object",
-    help: !!rawHelp && help || (rawErrors !== null && rawErrors !== void 0 && rawErrors.length ? errors : undefined),
-    htmlFor: id,
-    label: displayLabel && label,
-    labelCol: labelCol,
-    required: required,
-    style: wrapperStyle,
-    validateStatus: rawErrors !== null && rawErrors !== void 0 && rawErrors.length ? "error" : undefined,
-    wrapperCol: wrapperCol
-  }, children));
+    registry: registry,
+    children: id === 'root' ? children : jsx(Form$1.Item, {
+      colon: colon,
+      extra: rawDescription && description,
+      hasFeedback: schema.type !== 'array' && schema.type !== 'object',
+      help: !!rawHelp && help || (rawErrors !== null && rawErrors !== void 0 && rawErrors.length ? errors : undefined),
+      htmlFor: id,
+      label: displayLabel && label,
+      labelCol: labelCol,
+      required: required,
+      style: wrapperStyle,
+      validateStatus: rawErrors !== null && rawErrors !== void 0 && rawErrors.length ? 'error' : undefined,
+      wrapperCol: wrapperCol,
+      children: children
+    })
+  });
 }
 
 var DESCRIPTION_COL_STYLE = {
-  paddingBottom: "8px"
+  paddingBottom: '8px'
 };
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
  * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
@@ -497,14 +520,14 @@ function ObjectFieldTemplate(props) {
     title = props.title,
     uiSchema = props.uiSchema;
   var uiOptions = getUiOptions(uiSchema);
-  var TitleFieldTemplate = getTemplate("TitleFieldTemplate", registry, uiOptions);
-  var DescriptionFieldTemplate = getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+  var TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
+  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   var _formContext$colSpan = formContext.colSpan,
     colSpan = _formContext$colSpan === void 0 ? 24 : _formContext$colSpan,
     _formContext$labelAli = formContext.labelAlign,
-    labelAlign = _formContext$labelAli === void 0 ? "right" : _formContext$labelAli,
+    labelAlign = _formContext$labelAli === void 0 ? 'right' : _formContext$labelAli,
     _formContext$rowGutte = formContext.rowGutter,
     rowGutter = _formContext$rowGutte === void 0 ? 24 : _formContext$rowGutte;
   var findSchema = function findSchema(element) {
@@ -528,7 +551,7 @@ function ObjectFieldTemplate(props) {
     var widget = findUiSchemaWidget(element);
     var defaultColSpan = properties.length < 2 ||
     // Single or no field in object.
-    type === "object" || type === "array" || widget === "textarea" ? 24 : 12;
+    type === 'object' || type === 'array' || widget === 'textarea' ? 24 : 12;
     if (isObject(colSpan)) {
       var colSpanObj = colSpan;
       if (isString(widget)) {
@@ -546,58 +569,67 @@ function ObjectFieldTemplate(props) {
     }
     return defaultColSpan;
   };
-  return /*#__PURE__*/React.createElement(ConfigConsumer, null, function (configProps) {
-    var getPrefixCls = configProps.getPrefixCls;
-    var prefixCls = getPrefixCls("form");
-    var labelClsBasic = prefixCls + "-item-label";
-    var labelColClassName = classNames(labelClsBasic, labelAlign === "left" && labelClsBasic + "-left"
-    // labelCol.className,
-    );
+  return jsx(ConfigConsumer, {
+    children: function children(configProps) {
+      var getPrefixCls = configProps.getPrefixCls;
+      var prefixCls = getPrefixCls('form');
+      var labelClsBasic = prefixCls + "-item-label";
+      var labelColClassName = classNames(labelClsBasic, labelAlign === 'left' && labelClsBasic + "-left"
+      // labelCol.className,
+      );
 
-    return /*#__PURE__*/React.createElement("fieldset", {
-      id: idSchema.$id
-    }, /*#__PURE__*/React.createElement(Row, {
-      gutter: rowGutter
-    }, (uiOptions.title || title) && /*#__PURE__*/React.createElement(Col, {
-      className: labelColClassName,
-      span: 24
-    }, /*#__PURE__*/React.createElement(TitleFieldTemplate, {
-      id: titleId(idSchema),
-      title: uiOptions.title || title,
-      required: required,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    })), (uiOptions.description || description) && /*#__PURE__*/React.createElement(Col, {
-      span: 24,
-      style: DESCRIPTION_COL_STYLE
-    }, /*#__PURE__*/React.createElement(DescriptionFieldTemplate, {
-      id: descriptionId(idSchema),
-      description: uiOptions.description || description,
-      schema: schema,
-      uiSchema: uiSchema,
-      registry: registry
-    })), properties.filter(function (e) {
-      return !e.hidden;
-    }).map(function (element) {
-      return /*#__PURE__*/React.createElement(Col, {
-        key: element.name,
-        span: calculateColSpan(element)
-      }, element.content);
-    })), canExpand(schema, uiSchema, formData) && /*#__PURE__*/React.createElement(Col, {
-      span: 24
-    }, /*#__PURE__*/React.createElement(Row, {
-      gutter: rowGutter,
-      justify: "end"
-    }, /*#__PURE__*/React.createElement(Col, {
-      flex: "192px"
-    }, /*#__PURE__*/React.createElement(AddButton, {
-      className: "object-property-expand",
-      disabled: disabled || readonly,
-      onClick: onAddClick(schema),
-      uiSchema: uiSchema,
-      registry: registry
-    })))));
+      return jsxs("fieldset", {
+        id: idSchema.$id,
+        children: [jsxs(Row, {
+          gutter: rowGutter,
+          children: [(uiOptions.title || title) && jsx(Col, {
+            className: labelColClassName,
+            span: 24,
+            children: jsx(TitleFieldTemplate, {
+              id: titleId(idSchema),
+              title: uiOptions.title || title,
+              required: required,
+              schema: schema,
+              uiSchema: uiSchema,
+              registry: registry
+            })
+          }), (uiOptions.description || description) && jsx(Col, {
+            span: 24,
+            style: DESCRIPTION_COL_STYLE,
+            children: jsx(DescriptionFieldTemplate, {
+              id: descriptionId(idSchema),
+              description: uiOptions.description || description,
+              schema: schema,
+              uiSchema: uiSchema,
+              registry: registry
+            })
+          }), properties.filter(function (e) {
+            return !e.hidden;
+          }).map(function (element) {
+            return jsx(Col, {
+              span: calculateColSpan(element),
+              children: element.content
+            }, element.name);
+          })]
+        }), canExpand(schema, uiSchema, formData) && jsx(Col, {
+          span: 24,
+          children: jsx(Row, {
+            gutter: rowGutter,
+            justify: 'end',
+            children: jsx(Col, {
+              flex: '192px',
+              children: jsx(AddButton, {
+                className: 'object-property-expand',
+                disabled: disabled || readonly,
+                onClick: onAddClick(schema),
+                uiSchema: uiSchema,
+                registry: registry
+              })
+            })
+          })
+        })]
+      });
+    }
   });
 }
 
@@ -612,11 +644,12 @@ function SubmitButton(_ref) {
   if (norender) {
     return null;
   }
-  return /*#__PURE__*/React.createElement(Button, _extends({
-    type: "submit"
+  return jsx(Button, _extends({
+    type: 'submit'
   }, submitButtonProps, {
-    htmlType: "submit"
-  }), submitText);
+    htmlType: 'submit',
+    children: submitText
+  }));
 }
 
 /** The `TitleField` is the template to use to render the title of a field
@@ -632,8 +665,8 @@ function TitleField(_ref) {
   var _formContext$colon = formContext.colon,
     colon = _formContext$colon === void 0 ? true : _formContext$colon;
   var labelChildren = title;
-  if (colon && typeof title === "string" && title.trim() !== "") {
-    labelChildren = title.replace(/[：:]\s*$/, "");
+  if (colon && typeof title === 'string' && title.trim() !== '') {
+    labelChildren = title.replace(/[：:]\s*$/, '');
   }
   var handleLabelClick = function handleLabelClick() {
     if (!id) {
@@ -644,17 +677,20 @@ function TitleField(_ref) {
       control.focus();
     }
   };
-  return title ? /*#__PURE__*/React.createElement(ConfigConsumer, null, function (configProps) {
-    var _classNames;
-    var getPrefixCls = configProps.getPrefixCls;
-    var prefixCls = getPrefixCls("form");
-    var labelClassName = classNames((_classNames = {}, _classNames[prefixCls + "-item-required"] = required, _classNames[prefixCls + "-item-no-colon"] = !colon, _classNames));
-    return /*#__PURE__*/React.createElement("label", {
-      className: labelClassName,
-      htmlFor: id,
-      onClick: handleLabelClick,
-      title: typeof title === "string" ? title : ""
-    }, labelChildren);
+  return title ? jsx(ConfigConsumer, {
+    children: function children(configProps) {
+      var _classNames;
+      var getPrefixCls = configProps.getPrefixCls;
+      var prefixCls = getPrefixCls('form');
+      var labelClassName = classNames((_classNames = {}, _classNames[prefixCls + "-item-required"] = required, _classNames[prefixCls + "-item-no-colon"] = !colon, _classNames));
+      return jsx("label", {
+        className: labelClassName,
+        htmlFor: id,
+        onClick: handleLabelClick,
+        title: typeof title === 'string' ? title : '',
+        children: labelChildren
+      });
+    }
   }) : null;
 }
 
@@ -665,7 +701,7 @@ var VERTICAL_WRAPPER_COL = {
   span: 24
 };
 var INPUT_STYLE$1 = {
-  width: "100%"
+  width: '100%'
 };
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
  * part of an `additionalProperties` part of a schema.
@@ -696,7 +732,7 @@ function WrapIfAdditionalTemplate(props) {
     _registry$formContext4 = _registry$formContext.rowGutter,
     rowGutter = _registry$formContext4 === void 0 ? 24 : _registry$formContext4,
     _registry$formContext5 = _registry$formContext.toolbarAlign,
-    toolbarAlign = _registry$formContext5 === void 0 ? "top" : _registry$formContext5,
+    toolbarAlign = _registry$formContext5 === void 0 ? 'top' : _registry$formContext5,
     _registry$formContext6 = _registry$formContext.wrapperCol,
     wrapperCol = _registry$formContext6 === void 0 ? VERTICAL_WRAPPER_COL : _registry$formContext6,
     wrapperStyle = _registry$formContext.wrapperStyle;
@@ -707,10 +743,11 @@ function WrapIfAdditionalTemplate(props) {
   var keyLabel = translateString(TranslatableString.KeyLabel, [label]);
   var additional = (ADDITIONAL_PROPERTY_FLAG in schema);
   if (!additional) {
-    return /*#__PURE__*/React.createElement("div", {
+    return jsx("div", {
       className: classNames,
-      style: style
-    }, children);
+      style: style,
+      children: children
+    });
   }
   var handleBlur = function handleBlur(_ref) {
     var target = _ref.target;
@@ -721,48 +758,55 @@ function WrapIfAdditionalTemplate(props) {
   var buttonUiOptions = _extends({}, uiSchema, (_extends2 = {}, _extends2[UI_OPTIONS_KEY] = _extends({}, uiOptions, {
     block: true
   }), _extends2));
-  return /*#__PURE__*/React.createElement("div", {
+  return jsx("div", {
     className: classNames,
-    style: style
-  }, /*#__PURE__*/React.createElement(Row, {
-    align: toolbarAlign,
-    gutter: rowGutter
-  }, /*#__PURE__*/React.createElement(Col, {
-    className: "form-additional",
-    flex: "1"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "form-group"
-  }, /*#__PURE__*/React.createElement(Form$1.Item, {
-    colon: colon,
-    className: "form-group",
-    hasFeedback: true,
-    htmlFor: id + "-key",
-    label: keyLabel,
-    labelCol: labelCol,
-    required: required,
-    style: wrapperStyle,
-    wrapperCol: wrapperCol
-  }, /*#__PURE__*/React.createElement(Input, {
-    className: "form-control",
-    defaultValue: label,
-    disabled: disabled || readonlyAsDisabled && readonly,
-    id: id + "-key",
-    name: id + "-key",
-    onBlur: !readonly ? handleBlur : undefined,
-    style: INPUT_STYLE$1,
-    type: "text"
-  })))), /*#__PURE__*/React.createElement(Col, {
-    className: "form-additional",
-    flex: "1"
-  }, children), /*#__PURE__*/React.createElement(Col, {
-    flex: "192px"
-  }, /*#__PURE__*/React.createElement(RemoveButton, {
-    className: "array-item-remove",
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label),
-    uiSchema: buttonUiOptions,
-    registry: registry
-  }))));
+    style: style,
+    children: jsxs(Row, {
+      align: toolbarAlign,
+      gutter: rowGutter,
+      children: [jsx(Col, {
+        className: 'form-additional',
+        flex: '1',
+        children: jsx("div", {
+          className: 'form-group',
+          children: jsx(Form$1.Item, {
+            colon: colon,
+            className: 'form-group',
+            hasFeedback: true,
+            htmlFor: id + "-key",
+            label: keyLabel,
+            labelCol: labelCol,
+            required: required,
+            style: wrapperStyle,
+            wrapperCol: wrapperCol,
+            children: jsx(Input, {
+              className: 'form-control',
+              defaultValue: label,
+              disabled: disabled || readonlyAsDisabled && readonly,
+              id: id + "-key",
+              name: id + "-key",
+              onBlur: !readonly ? handleBlur : undefined,
+              style: INPUT_STYLE$1,
+              type: 'text'
+            })
+          })
+        })
+      }), jsx(Col, {
+        className: 'form-additional',
+        flex: '1',
+        children: children
+      }), jsx(Col, {
+        flex: '192px',
+        children: jsx(RemoveButton, {
+          className: 'array-item-remove',
+          disabled: disabled || readonly,
+          onClick: onDropPropertyClick(label),
+          uiSchema: buttonUiOptions,
+          registry: registry
+        })
+      })]
+    })
+  });
 }
 
 function generateTemplates() {
@@ -814,29 +858,29 @@ function dateElementProps(state, time, yearsRange) {
     minute = state.minute,
     second = state.second;
   var data = [{
-    type: "year",
+    type: 'year',
     range: yearsRange,
     value: year
   }, {
-    type: "month",
+    type: 'month',
     range: [1, 12],
     value: month
   }, {
-    type: "day",
+    type: 'day',
     range: [1, 31],
     value: day
   }];
   if (time) {
     data.push({
-      type: "hour",
+      type: 'hour',
       range: [0, 23],
       value: hour || -1
     }, {
-      type: "minute",
+      type: 'minute',
       range: [0, 59],
       value: minute || -1
     }, {
-      type: "second",
+      type: 'second',
       range: [0, 59],
       value: second || -1
     });
@@ -869,7 +913,7 @@ function AltDateWidget(props) {
   }, [showTime, value]);
   var handleChange = function handleChange(property, nextValue) {
     var _extends2;
-    var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === "undefined" ? -1 : nextValue, _extends2));
+    var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === 'undefined' ? -1 : nextValue, _extends2));
     if (readyForChange(nextState)) {
       onChange(toDateString(nextState, showTime));
     } else {
@@ -892,9 +936,9 @@ function AltDateWidget(props) {
     onChange(undefined);
   };
   var renderDateElement = function renderDateElement(elemProps) {
-    return /*#__PURE__*/React.createElement(SelectWidget, {
+    return jsx(SelectWidget, {
       autofocus: elemProps.autofocus,
-      className: "form-control",
+      className: 'form-control',
       disabled: elemProps.disabled,
       id: elemProps.id,
       name: elemProps.name,
@@ -909,51 +953,56 @@ function AltDateWidget(props) {
       placeholder: elemProps.type,
       readonly: elemProps.readonly,
       schema: {
-        type: "integer"
+        type: 'integer'
       },
       value: elemProps.value,
       registry: registry,
-      label: "",
+      label: '',
       "aria-describedby": ariaDescribedByIds(id)
     });
   };
-  return /*#__PURE__*/React.createElement(Row, {
-    gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)]
-  }, dateElementProps(state, showTime, options.yearsRange).map(function (elemProps, i) {
-    var elemId = id + "_" + elemProps.type;
-    return /*#__PURE__*/React.createElement(Col, {
-      flex: "88px",
-      key: elemId
-    }, renderDateElement(_extends({}, elemProps, {
-      autofocus: autofocus && i === 0,
-      disabled: disabled,
-      id: elemId,
-      name: id,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      readonly: readonly,
-      registry: registry,
-      select: handleChange,
-      // NOTE: antd components accept -1 rather than issue a warning
-      // like material-ui, so we need to convert -1 to undefined here.
-      value: elemProps.value < 0 ? undefined : elemProps.value
-    })));
-  }), !options.hideNowButton && /*#__PURE__*/React.createElement(Col, {
-    flex: "88px"
-  }, /*#__PURE__*/React.createElement(Button, {
-    block: true,
-    className: "btn-now",
-    onClick: handleNow,
-    type: "primary"
-  }, translateString(TranslatableString.NowLabel))), !options.hideClearButton && /*#__PURE__*/React.createElement(Col, {
-    flex: "88px"
-  }, /*#__PURE__*/React.createElement(Button, {
-    block: true,
-    className: "btn-clear",
-    danger: true,
-    onClick: handleClear,
-    type: "primary"
-  }, translateString(TranslatableString.ClearLabel))));
+  return jsxs(Row, {
+    gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)],
+    children: [dateElementProps(state, showTime, options.yearsRange).map(function (elemProps, i) {
+      var elemId = id + '_' + elemProps.type;
+      return jsx(Col, {
+        flex: '88px',
+        children: renderDateElement(_extends({}, elemProps, {
+          autofocus: autofocus && i === 0,
+          disabled: disabled,
+          id: elemId,
+          name: id,
+          onBlur: onBlur,
+          onFocus: onFocus,
+          readonly: readonly,
+          registry: registry,
+          select: handleChange,
+          // NOTE: antd components accept -1 rather than issue a warning
+          // like material-ui, so we need to convert -1 to undefined here.
+          value: elemProps.value < 0 ? undefined : elemProps.value
+        }))
+      }, elemId);
+    }), !options.hideNowButton && jsx(Col, {
+      flex: '88px',
+      children: jsx(Button, {
+        block: true,
+        className: 'btn-now',
+        onClick: handleNow,
+        type: 'primary',
+        children: translateString(TranslatableString.NowLabel)
+      })
+    }), !options.hideClearButton && jsx(Col, {
+      flex: '88px',
+      children: jsx(Button, {
+        block: true,
+        className: 'btn-clear',
+        danger: true,
+        onClick: handleClear,
+        type: 'primary',
+        children: translateString(TranslatableString.ClearLabel)
+      })
+    })]
+  });
 }
 AltDateWidget.defaultProps = {
   autofocus: false,
@@ -967,7 +1016,7 @@ AltDateWidget.defaultProps = {
 
 function AltDateTimeWidget(props) {
   var AltDateWidget = props.registry.widgets.AltDateWidget;
-  return /*#__PURE__*/React.createElement(AltDateWidget, _extends({
+  return jsx(AltDateWidget, _extends({
     showTime: true
   }, props));
 }
@@ -1016,23 +1065,25 @@ function CheckboxesWidget(_ref) {
     onFocus: !readonly ? handleFocus : undefined
   };
   var selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
-  return Array.isArray(enumOptions) && enumOptions.length > 0 ? /*#__PURE__*/React.createElement(Checkbox.Group, _extends({
+  return Array.isArray(enumOptions) && enumOptions.length > 0 ? jsx(Checkbox.Group, _extends({
     disabled: disabled || readonlyAsDisabled && readonly,
     name: id,
     onChange: !readonly ? handleChange : undefined,
     value: selectedIndexes
   }, extraProps, {
-    "aria-describedby": ariaDescribedByIds(id)
-  }), Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
-    return /*#__PURE__*/React.createElement("span", {
-      key: i
-    }, /*#__PURE__*/React.createElement(Checkbox, {
-      id: optionId(id, i),
-      name: id,
-      autoFocus: i === 0 ? autofocus : false,
-      disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
-      value: String(i)
-    }, option.label), !inline && /*#__PURE__*/React.createElement("br", null));
+    "aria-describedby": ariaDescribedByIds(id),
+    children: Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
+      return jsxs("span", {
+        children: [jsx(Checkbox, {
+          id: optionId(id, i),
+          name: id,
+          autoFocus: i === 0 ? autofocus : false,
+          disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
+          value: String(i),
+          children: option.label
+        }), !inline && jsx("br", {})]
+      }, i);
+    })
   })) : null;
 }
 
@@ -1072,22 +1123,23 @@ function CheckboxWidget(props) {
     onBlur: !readonly ? handleBlur : undefined,
     onFocus: !readonly ? handleFocus : undefined
   };
-  return /*#__PURE__*/React.createElement(Checkbox, _extends({
+  return jsx(Checkbox, _extends({
     autoFocus: autofocus,
-    checked: typeof value === "undefined" ? false : value,
+    checked: typeof value === 'undefined' ? false : value,
     disabled: disabled || readonlyAsDisabled && readonly,
     id: id,
     name: id,
     onChange: !readonly ? handleChange : undefined
   }, extraProps, {
-    "aria-describedby": ariaDescribedByIds(id)
-  }), label);
+    "aria-describedby": ariaDescribedByIds(id),
+    children: label
+  }));
 }
 
 var DatePicker = /*#__PURE__*/generatePicker(dayjsGenerateConfig);
 
 var DATE_PICKER_STYLE$1 = {
-  width: "100%"
+  width: '100%'
 };
 /** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
  * the value to/from utc using the appropriate utility functions.
@@ -1118,7 +1170,7 @@ function DateTimeWidget(props) {
   var getPopupContainer = function getPopupContainer(node) {
     return node.parentNode;
   };
-  return /*#__PURE__*/React.createElement(DatePicker, {
+  return jsx(DatePicker, {
     disabled: disabled || readonlyAsDisabled && readonly,
     getPopupContainer: getPopupContainer,
     id: id,
@@ -1135,7 +1187,7 @@ function DateTimeWidget(props) {
 }
 
 var DATE_PICKER_STYLE = {
-  width: "100%"
+  width: '100%'
 };
 /** The `DateWidget` component uses the `BaseInputTemplate` changing the type to `date` and transforms
  * the value to undefined when it is falsy during the `onChange` handling.
@@ -1155,7 +1207,7 @@ function DateWidget(props) {
   var _formContext$readonly = formContext.readonlyAsDisabled,
     readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
   var handleChange = function handleChange(nextValue) {
-    return onChange(nextValue && nextValue.format("YYYY-MM-DD"));
+    return onChange(nextValue && nextValue.format('YYYY-MM-DD'));
   };
   var handleBlur = function handleBlur() {
     return onBlur(id, value);
@@ -1166,7 +1218,7 @@ function DateWidget(props) {
   var getPopupContainer = function getPopupContainer(node) {
     return node.parentNode;
   };
-  return /*#__PURE__*/React.createElement(DatePicker, {
+  return jsx(DatePicker, {
     disabled: disabled || readonlyAsDisabled && readonly,
     getPopupContainer: getPopupContainer,
     id: id,
@@ -1199,10 +1251,10 @@ function PasswordWidget(props) {
     value = props.value;
   var _formContext$readonly = formContext.readonlyAsDisabled,
     readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
-  var emptyValue = options.emptyValue || "";
+  var emptyValue = options.emptyValue || '';
   var handleChange = function handleChange(_ref) {
     var target = _ref.target;
-    return onChange(target.value === "" ? emptyValue : target.value);
+    return onChange(target.value === '' ? emptyValue : target.value);
   };
   var handleBlur = function handleBlur(_ref2) {
     var target = _ref2.target;
@@ -1212,7 +1264,7 @@ function PasswordWidget(props) {
     var target = _ref3.target;
     return onFocus(id, target.value);
   };
-  return /*#__PURE__*/React.createElement(Input.Password, {
+  return jsx(Input.Password, {
     disabled: disabled || readonlyAsDisabled && readonly,
     id: id,
     name: id,
@@ -1220,7 +1272,7 @@ function PasswordWidget(props) {
     onChange: !readonly ? handleChange : undefined,
     onFocus: !readonly ? handleFocus : undefined,
     placeholder: placeholder,
-    value: value || "",
+    value: value || '',
     "aria-describedby": ariaDescribedByIds(id)
   });
 }
@@ -1259,7 +1311,7 @@ function RadioWidget(_ref) {
     return onFocus(id, enumOptionsValueForIndex(target.value, enumOptions, emptyValue));
   };
   var selectedIndexes = enumOptionsIndexForValue(value, enumOptions);
-  return /*#__PURE__*/React.createElement(Radio.Group, {
+  return jsx(Radio.Group, {
     disabled: disabled || readonlyAsDisabled && readonly,
     id: id,
     name: id,
@@ -1267,17 +1319,18 @@ function RadioWidget(_ref) {
     onBlur: !readonly ? handleBlur : undefined,
     onFocus: !readonly ? handleFocus : undefined,
     value: selectedIndexes,
-    "aria-describedby": ariaDescribedByIds(id)
-  }, Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
-    return /*#__PURE__*/React.createElement(Radio, {
-      id: optionId(id, i),
-      name: id,
-      autoFocus: i === 0 ? autofocus : false,
-      disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
-      key: i,
-      value: String(i)
-    }, option.label);
-  }));
+    "aria-describedby": ariaDescribedByIds(id),
+    children: Array.isArray(enumOptions) && enumOptions.map(function (option, i) {
+      return jsx(Radio, {
+        id: optionId(id, i),
+        name: id,
+        autoFocus: i === 0 ? autofocus : false,
+        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1,
+        value: String(i),
+        children: option.label
+      }, i);
+    })
+  });
 }
 
 /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
@@ -1304,9 +1357,9 @@ function RangeWidget(props) {
     min = _rangeSpec.min,
     max = _rangeSpec.max,
     step = _rangeSpec.step;
-  var emptyValue = options.emptyValue || "";
+  var emptyValue = options.emptyValue || '';
   var handleChange = function handleChange(nextValue) {
-    return onChange(nextValue === "" ? emptyValue : nextValue);
+    return onChange(nextValue === '' ? emptyValue : nextValue);
   };
   var handleBlur = function handleBlur() {
     return onBlur(id, value);
@@ -1321,7 +1374,7 @@ function RangeWidget(props) {
     onBlur: !readonly ? handleBlur : undefined,
     onFocus: !readonly ? handleFocus : undefined
   };
-  return /*#__PURE__*/React.createElement(Slider, _extends({
+  return jsx(Slider, _extends({
     autoFocus: autofocus,
     disabled: disabled || readonlyAsDisabled && readonly,
     id: id,
@@ -1337,7 +1390,7 @@ function RangeWidget(props) {
 }
 
 var SELECT_STYLE = {
-  width: "100%"
+  width: '100%'
 };
 /** The `SelectWidget` is a widget for rendering dropdowns.
  *  It is typically used with string properties constrained with enum options.
@@ -1388,12 +1441,12 @@ function SelectWidget(_ref) {
   var extraProps = {
     name: id
   };
-  return /*#__PURE__*/React.createElement(Select, _extends({
+  return jsx(Select, _extends({
     autoFocus: autofocus,
     disabled: disabled || readonlyAsDisabled && readonly,
     getPopupContainer: getPopupContainer,
     id: id,
-    mode: typeof multiple !== "undefined" ? "multiple" : undefined,
+    mode: typeof multiple !== 'undefined' ? 'multiple' : undefined,
     onBlur: !readonly ? handleBlur : undefined,
     onChange: !readonly ? handleChange : undefined,
     onFocus: !readonly ? handleFocus : undefined,
@@ -1402,20 +1455,21 @@ function SelectWidget(_ref) {
     value: selectedIndexes
   }, extraProps, {
     filterOption: filterOption,
-    "aria-describedby": ariaDescribedByIds(id)
-  }), Array.isArray(enumOptions) && enumOptions.map(function (_ref2, index) {
-    var optionValue = _ref2.value,
-      optionLabel = _ref2.label;
-    return /*#__PURE__*/React.createElement(Select.Option, {
-      disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
-      key: String(index),
-      value: String(index)
-    }, optionLabel);
+    "aria-describedby": ariaDescribedByIds(id),
+    children: Array.isArray(enumOptions) && enumOptions.map(function (_ref2, index) {
+      var optionValue = _ref2.value,
+        optionLabel = _ref2.label;
+      return jsx(Select.Option, {
+        disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
+        value: String(index),
+        children: optionLabel
+      }, String(index));
+    })
   }));
 }
 
 var INPUT_STYLE = {
-  width: "100%"
+  width: '100%'
 };
 /** The `TextareaWidget` is a widget for rendering input fields as textarea.
  *
@@ -1436,7 +1490,7 @@ function TextareaWidget(_ref) {
     readonlyAsDisabled = _formContext$readonly === void 0 ? true : _formContext$readonly;
   var handleChange = function handleChange(_ref2) {
     var target = _ref2.target;
-    return onChange(target.value === "" ? options.emptyValue : target.value);
+    return onChange(target.value === '' ? options.emptyValue : target.value);
   };
   var handleBlur = function handleBlur(_ref3) {
     var target = _ref3.target;
@@ -1449,9 +1503,9 @@ function TextareaWidget(_ref) {
   // Antd's typescript definitions do not contain the following props that are actually necessary and, if provided,
   // they are used, so hacking them in via by spreading `extraProps` on the component to avoid typescript errors
   var extraProps = {
-    type: "textarea"
+    type: 'textarea'
   };
-  return /*#__PURE__*/React.createElement(Input.TextArea, _extends({
+  return jsx(Input.TextArea, _extends({
     disabled: disabled || readonlyAsDisabled && readonly,
     id: id,
     name: id,