@rjsf/mui 5.1.0 → 5.2.1

package/dist/mui.cjs.development.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@rjsf/core');
-var React = require('react');
+var jsxRuntime = require('react/jsx-runtime');
 var AddIcon = require('@mui/icons-material/Add');
 var IconButton = require('@mui/material/IconButton');
+var utils = require('@rjsf/utils');
 var Box = require('@mui/material/Box');
 var Grid = require('@mui/material/Grid');
 var Paper = require('@mui/material/Paper');
-var utils = require('@rjsf/utils');
 var TextField = require('@mui/material/TextField');
 var Typography = require('@mui/material/Typography');
 var ErrorIcon = require('@mui/icons-material/Error');
@@ -37,7 +37,6 @@ var MenuItem = require('@mui/material/MenuItem');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var AddIcon__default = /*#__PURE__*/_interopDefaultLegacy(AddIcon);
 var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
 var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
@@ -99,12 +98,15 @@ var _excluded$4 = ["uiSchema", "registry"];
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */
 function AddButton(_ref) {
-  var props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], _extends({
-    title: "Add Item"
+  var registry = _ref.registry,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+  var translateString = registry.translateString;
+  return jsxRuntime.jsx(IconButton__default["default"], _extends({
+    title: translateString(utils.TranslatableString.AddItemButton)
   }, props, {
-    color: "primary"
-  }), /*#__PURE__*/React__default["default"].createElement(AddIcon__default["default"], null));
+    color: 'primary',
+    children: jsxRuntime.jsx(AddIcon__default["default"], {})
+  }));
 }
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
@@ -132,45 +134,51 @@ function ArrayFieldItemTemplate(props) {
     flex: 1,
     paddingLeft: 6,
     paddingRight: 6,
-    fontWeight: "bold",
+    fontWeight: 'bold',
     minWidth: 0
   };
-  return /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+  return jsxRuntime.jsxs(Grid__default["default"], {
     container: true,
-    alignItems: "center"
-  }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    item: true,
-    xs: true,
-    style: {
-      overflow: "auto"
-    }
-  }, /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
-    mb: 2
-  }, /*#__PURE__*/React__default["default"].createElement(Paper__default["default"], {
-    elevation: 2
-  }, /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
-    p: 2
-  }, children)))), hasToolbar && /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    item: true
-  }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
-    style: btnStyle,
-    disabled: disabled || readonly || !hasMoveUp,
-    onClick: onReorderClick(index, index - 1),
-    uiSchema: uiSchema,
-    registry: registry
-  }), (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveDownButton, {
-    style: btnStyle,
-    disabled: disabled || readonly || !hasMoveDown,
-    onClick: onReorderClick(index, index + 1),
-    uiSchema: uiSchema,
-    registry: registry
-  }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-    style: btnStyle,
-    disabled: disabled || readonly,
-    onClick: onDropIndexClick(index),
-    uiSchema: uiSchema,
-    registry: registry
-  })));
+    alignItems: 'center',
+    children: [jsxRuntime.jsx(Grid__default["default"], {
+      item: true,
+      xs: true,
+      style: {
+        overflow: 'auto'
+      },
+      children: jsxRuntime.jsx(Box__default["default"], {
+        mb: 2,
+        children: jsxRuntime.jsx(Paper__default["default"], {
+          elevation: 2,
+          children: jsxRuntime.jsx(Box__default["default"], {
+            p: 2,
+            children: children
+          })
+        })
+      })
+    }), hasToolbar && jsxRuntime.jsxs(Grid__default["default"], {
+      item: true,
+      children: [(hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveUpButton, {
+        style: btnStyle,
+        disabled: disabled || readonly || !hasMoveUp,
+        onClick: onReorderClick(index, index - 1),
+        uiSchema: uiSchema,
+        registry: registry
+      }), (hasMoveUp || hasMoveDown) && jsxRuntime.jsx(MoveDownButton, {
+        style: btnStyle,
+        disabled: disabled || readonly || !hasMoveDown,
+        onClick: onReorderClick(index, index + 1),
+        uiSchema: uiSchema,
+        registry: registry
+      }), hasRemove && jsxRuntime.jsx(RemoveButton, {
+        style: btnStyle,
+        disabled: disabled || readonly,
+        onClick: onDropIndexClick(index),
+        uiSchema: uiSchema,
+        registry: registry
+      })]
+    })]
+  });
 }
 
 var _excluded$3 = ["key"];
@@ -191,55 +199,59 @@ function ArrayFieldTemplate(props) {
     schema = props.schema,
     title = props.title;
   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(Paper__default["default"], {
-    elevation: 2
-  }, /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
-    p: 2
-  }, /*#__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(Grid__default["default"], {
-    container: true,
-    key: "array-item-list-" + idSchema.$id
-  }, items && items.map(function (_ref) {
-    var key = _ref.key,
-      itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-    return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
-      key: key
-    }, itemProps));
-  }), canAdd && /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    item: true
-  }, /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
-    mt: 2
-  }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
-    className: "array-item-add",
-    onClick: onAddClick,
-    disabled: disabled || readonly,
-    uiSchema: uiSchema,
-    registry: registry
-  })))))));
+  return jsxRuntime.jsx(Paper__default["default"], {
+    elevation: 2,
+    children: jsxRuntime.jsxs(Box__default["default"], {
+      p: 2,
+      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(Grid__default["default"], {
+        container: true,
+        children: [items && items.map(function (_ref) {
+          var key = _ref.key,
+            itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+          return jsxRuntime.jsx(ArrayFieldItemTemplate, _extends({}, itemProps), key);
+        }), canAdd && jsxRuntime.jsx(Grid__default["default"], {
+          container: true,
+          justifyContent: 'flex-end',
+          children: jsxRuntime.jsx(Grid__default["default"], {
+            item: true,
+            children: jsxRuntime.jsx(Box__default["default"], {
+              mt: 2,
+              children: jsxRuntime.jsx(AddButton, {
+                className: 'array-item-add',
+                onClick: onAddClick,
+                disabled: disabled || readonly,
+                uiSchema: uiSchema,
+                registry: registry
+              })
+            })
+          })
+        })]
+      }, "array-item-list-" + idSchema.$id)]
+    })
+  });
 }
 
-var _excluded$2 = ["id", "placeholder", "required", "readonly", "disabled", "type", "label", "value", "onChange", "onBlur", "onFocus", "autofocus", "options", "schema", "uiSchema", "rawErrors", "formContext", "registry"],
+var _excluded$2 = ["id", "name", "placeholder", "required", "readonly", "disabled", "type", "label", "value", "onChange", "onChangeOverride", "onBlur", "onFocus", "autofocus", "options", "schema", "uiSchema", "rawErrors", "formContext", "registry", "InputLabelProps"],
   _excluded2$1 = ["step", "min", "max"];
+var TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file'];
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
  * It is used as the template for rendering many of the <input> based widgets that differ by `type` and callbacks only.
  * It can be customized/overridden for other themes or individual implementations as needed.
@@ -256,6 +268,7 @@ function BaseInputTemplate(props) {
     label = props.label,
     value = props.value,
     onChange = props.onChange,
+    onChangeOverride = props.onChangeOverride,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
     autofocus = props.autofocus,
@@ -265,6 +278,7 @@ function BaseInputTemplate(props) {
     _props$rawErrors = props.rawErrors,
     rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
     registry = props.registry,
+    InputLabelProps = props.InputLabelProps,
     textFieldProps = _objectWithoutPropertiesLoose(props, _excluded$2);
   var inputProps = utils.getInputProps(schema, type, options);
   // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
@@ -283,7 +297,7 @@ function BaseInputTemplate(props) {
   }, rest);
   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(_ref2) {
     var value = _ref2.target.value;
@@ -295,30 +309,36 @@ function BaseInputTemplate(props) {
   };
   var schemaUtils = registry.schemaUtils;
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], _extends({
-    id: id,
-    name: id,
-    placeholder: placeholder,
-    label: displayLabel ? label || schema.title : false,
-    autoFocus: autofocus,
-    required: required,
-    disabled: disabled || readonly
-  }, otherProps, {
-    value: value || value === 0 ? value : "",
-    error: rawErrors.length > 0,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus
-  }, textFieldProps, {
-    "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
-    });
-  })));
+  var DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? _extends({}, InputLabelProps, {
+    shrink: true
+  }) : InputLabelProps;
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(TextField__default["default"], _extends({
+      id: id,
+      name: id,
+      placeholder: placeholder,
+      label: displayLabel ? label || schema.title : false,
+      autoFocus: autofocus,
+      required: required,
+      disabled: disabled || readonly
+    }, otherProps, {
+      value: value || value === 0 ? value : '',
+      error: rawErrors.length > 0,
+      onChange: onChangeOverride || _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      InputLabelProps: DisplayInputLabelProps
+    }, textFieldProps, {
+      "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
+    })), 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
@@ -329,13 +349,14 @@ function DescriptionField(props) {
   var id = props.id,
     description = props.description;
   if (description) {
-    return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
+    return jsxRuntime.jsx(Typography__default["default"], {
       id: id,
-      variant: "subtitle2",
+      variant: 'subtitle2',
       style: {
-        marginTop: "5px"
-      }
-    }, description);
+        marginTop: '5px'
+      },
+      children: description
+    });
   }
   return null;
 }
@@ -345,25 +366,33 @@ function DescriptionField(props) {
  * @param props - The `ErrorListProps` for this component
  */
 function ErrorList(_ref) {
-  var errors = _ref.errors;
-  return /*#__PURE__*/React__default["default"].createElement(Paper__default["default"], {
-    elevation: 2
-  }, /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
-    mb: 2,
-    p: 2
-  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    variant: "h6"
-  }, "Errors"), /*#__PURE__*/React__default["default"].createElement(List__default["default"], {
-    dense: true
-  }, errors.map(function (error, i) {
-    return /*#__PURE__*/React__default["default"].createElement(ListItem__default["default"], {
-      key: i
-    }, /*#__PURE__*/React__default["default"].createElement(ListItemIcon__default["default"], null, /*#__PURE__*/React__default["default"].createElement(ErrorIcon__default["default"], {
-      color: "error"
-    })), /*#__PURE__*/React__default["default"].createElement(ListItemText__default["default"], {
-      primary: error.stack
-    }));
-  }))));
+  var errors = _ref.errors,
+    registry = _ref.registry;
+  var translateString = registry.translateString;
+  return jsxRuntime.jsx(Paper__default["default"], {
+    elevation: 2,
+    children: jsxRuntime.jsxs(Box__default["default"], {
+      mb: 2,
+      p: 2,
+      children: [jsxRuntime.jsx(Typography__default["default"], {
+        variant: 'h6',
+        children: translateString(utils.TranslatableString.ErrorsLabel)
+      }), jsxRuntime.jsx(List__default["default"], {
+        dense: true,
+        children: errors.map(function (error, i) {
+          return jsxRuntime.jsxs(ListItem__default["default"], {
+            children: [jsxRuntime.jsx(ListItemIcon__default["default"], {
+              children: jsxRuntime.jsx(ErrorIcon__default["default"], {
+                color: 'error'
+              })
+            }), jsxRuntime.jsx(ListItemText__default["default"], {
+              primary: error.stack
+            })]
+          }, i);
+        })
+      })]
+    })
+  });
 }
 
 var _excluded$1 = ["icon", "color", "uiSchema", "registry"],
@@ -372,38 +401,42 @@ function MuiIconButton(props) {
   var icon = props.icon,
     color = props.color,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], _extends({}, otherProps, {
-    size: "small",
-    color: color
-  }), icon);
+  return jsxRuntime.jsx(IconButton__default["default"], _extends({}, otherProps, {
+    size: 'small',
+    color: color,
+    children: icon
+  }));
 }
 function MoveDownButton(props) {
-  return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, _extends({
-    title: "Move down"
+  var translateString = props.registry.translateString;
+  return jsxRuntime.jsx(MuiIconButton, _extends({
+    title: translateString(utils.TranslatableString.MoveDownButton)
   }, props, {
-    icon: /*#__PURE__*/React__default["default"].createElement(ArrowDownwardIcon__default["default"], {
-      fontSize: "small"
+    icon: jsxRuntime.jsx(ArrowDownwardIcon__default["default"], {
+      fontSize: 'small'
     })
   }));
 }
 function MoveUpButton(props) {
-  return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, _extends({
-    title: "Move up"
+  var translateString = props.registry.translateString;
+  return jsxRuntime.jsx(MuiIconButton, _extends({
+    title: translateString(utils.TranslatableString.MoveUpButton)
   }, props, {
-    icon: /*#__PURE__*/React__default["default"].createElement(ArrowUpwardIcon__default["default"], {
-      fontSize: "small"
+    icon: jsxRuntime.jsx(ArrowUpwardIcon__default["default"], {
+      fontSize: 'small'
     })
   }));
 }
 function RemoveButton(props) {
   var iconType = props.iconType,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
-  return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, _extends({
-    title: "Remove"
+  var translateString = otherProps.registry.translateString;
+  return jsxRuntime.jsx(MuiIconButton, _extends({
+    title: translateString(utils.TranslatableString.RemoveButton)
   }, otherProps, {
-    color: "error",
-    icon: /*#__PURE__*/React__default["default"].createElement(RemoveIcon__default["default"], {
-      fontSize: iconType === "default" ? undefined : "small"
+    color: 'error',
+    icon: jsxRuntime.jsx(RemoveIcon__default["default"], {
+      fontSize: iconType === 'default' ? undefined : 'small'
     })
   }));
 }
@@ -420,17 +453,19 @@ function FieldErrorTemplate(props) {
     return null;
   }
   var id = utils.errorId(idSchema);
-  return /*#__PURE__*/React__default["default"].createElement(List__default["default"], {
+  return jsxRuntime.jsx(List__default["default"], {
     dense: true,
-    disablePadding: true
-  }, errors.map(function (error, i) {
-    return /*#__PURE__*/React__default["default"].createElement(ListItem__default["default"], {
-      key: i,
-      disableGutters: true
-    }, /*#__PURE__*/React__default["default"].createElement(FormHelperText__default["default"], {
-      id: id
-    }, error));
-  }));
+    disablePadding: true,
+    children: errors.map(function (error, i) {
+      return jsxRuntime.jsx(ListItem__default["default"], {
+        disableGutters: true,
+        children: jsxRuntime.jsx(FormHelperText__default["default"], {
+          id: id,
+          children: error
+        })
+      }, i);
+    })
+  });
 }
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
@@ -444,9 +479,10 @@ function FieldHelpTemplate(props) {
     return null;
   }
   var id = utils.helpId(idSchema);
-  return /*#__PURE__*/React__default["default"].createElement(FormHelperText__default["default"], {
-    id: id
-  }, help);
+  return jsxRuntime.jsx(FormHelperText__default["default"], {
+    id: id,
+    children: help
+  });
 }
 
 /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
@@ -476,15 +512,16 @@ function FieldTemplate(props) {
     uiSchema = props.uiSchema,
     registry = props.registry;
   var uiOptions = utils.getUiOptions(uiSchema);
-  var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
+  var WrapIfAdditionalTemplate = utils.getTemplate('WrapIfAdditionalTemplate', 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, {
+  return jsxRuntime.jsx(WrapIfAdditionalTemplate, {
     classNames: classNames,
     style: style,
     disabled: disabled,
@@ -496,15 +533,18 @@ function FieldTemplate(props) {
     required: required,
     schema: schema,
     uiSchema: uiSchema,
-    registry: registry
-  }, /*#__PURE__*/React__default["default"].createElement(FormControl__default["default"], {
-    fullWidth: true,
-    error: rawErrors.length ? true : false,
-    required: required
-  }, children, displayLabel && rawDescription ? /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    variant: "caption",
-    color: "textSecondary"
-  }, rawDescription) : null, errors, help));
+    registry: registry,
+    children: jsxRuntime.jsxs(FormControl__default["default"], {
+      fullWidth: true,
+      error: rawErrors.length ? true : false,
+      required: required,
+      children: [children, displayLabel && rawDescription ? jsxRuntime.jsx(Typography__default["default"], {
+        variant: 'caption',
+        color: 'textSecondary',
+        children: rawDescription
+      }) : null, errors, help]
+    })
+  });
 }
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
@@ -527,54 +567,59 @@ function ObjectFieldTemplate(props) {
     onAddClick = props.onAddClick,
     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;
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, (uiOptions.title || title) && /*#__PURE__*/React__default["default"].createElement(TitleFieldTemplate, {
-    id: utils.titleId(idSchema),
-    title: title,
-    required: required,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), (uiOptions.description || description) && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-    id: utils.descriptionId(idSchema),
-    description: uiOptions.description || description,
-    schema: schema,
-    uiSchema: uiSchema,
-    registry: registry
-  }), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    container: true,
-    spacing: 2,
-    style: {
-      marginTop: "10px"
-    }
-  }, properties.map(function (element, index) {
-    return (
-      // Remove the <Grid> if the inner element is hidden as the <Grid>
-      // itself would otherwise still take up space.
-      element.hidden ? element.content : /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-        item: true,
-        xs: 12,
-        key: index,
-        style: {
-          marginBottom: "10px"
-        }
-      }, element.content)
-    );
-  }), utils.canExpand(schema, uiSchema, formData) && /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    container: true,
-    justifyContent: "flex-end"
-  }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    item: true
-  }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
-    className: "object-property-expand",
-    onClick: onAddClick(schema),
-    disabled: disabled || readonly,
-    uiSchema: uiSchema,
-    registry: registry
-  })))));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [(uiOptions.title || title) && jsxRuntime.jsx(TitleFieldTemplate, {
+      id: utils.titleId(idSchema),
+      title: title,
+      required: required,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), (uiOptions.description || description) && jsxRuntime.jsx(DescriptionFieldTemplate, {
+      id: utils.descriptionId(idSchema),
+      description: uiOptions.description || description,
+      schema: schema,
+      uiSchema: uiSchema,
+      registry: registry
+    }), jsxRuntime.jsxs(Grid__default["default"], {
+      container: true,
+      spacing: 2,
+      style: {
+        marginTop: '10px'
+      },
+      children: [properties.map(function (element, index) {
+        return (
+          // Remove the <Grid> if the inner element is hidden as the <Grid>
+          // itself would otherwise still take up space.
+          element.hidden ? element.content : jsxRuntime.jsx(Grid__default["default"], {
+            item: true,
+            xs: 12,
+            style: {
+              marginBottom: '10px'
+            },
+            children: element.content
+          }, index)
+        );
+      }), utils.canExpand(schema, uiSchema, formData) && jsxRuntime.jsx(Grid__default["default"], {
+        container: true,
+        justifyContent: 'flex-end',
+        children: jsxRuntime.jsx(Grid__default["default"], {
+          item: true,
+          children: jsxRuntime.jsx(AddButton, {
+            className: 'object-property-expand',
+            onClick: onAddClick(schema),
+            disabled: disabled || readonly,
+            uiSchema: uiSchema,
+            registry: registry
+          })
+        })
+      })]
+    })]
+  });
 }
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
@@ -589,13 +634,16 @@ function SubmitButton(_ref) {
   if (norender) {
     return null;
   }
-  return /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
-    marginTop: 3
-  }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], _extends({
-    type: "submit",
-    variant: "contained",
-    color: "primary"
-  }, submitButtonProps), submitText));
+  return jsxRuntime.jsx(Box__default["default"], {
+    marginTop: 3,
+    children: jsxRuntime.jsx(Button__default["default"], _extends({
+      type: 'submit',
+      variant: 'contained',
+      color: 'primary'
+    }, submitButtonProps, {
+      children: submitText
+    }))
+  });
 }
 
 /** The `TitleField` is the template to use to render the title of a field
@@ -605,13 +653,15 @@ function SubmitButton(_ref) {
 function TitleField(_ref) {
   var id = _ref.id,
     title = _ref.title;
-  return /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
+  return jsxRuntime.jsxs(Box__default["default"], {
     id: id,
     mb: 1,
-    mt: 1
-  }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
-    variant: "h5"
-  }, title), /*#__PURE__*/React__default["default"].createElement(Divider__default["default"], null));
+    mt: 1,
+    children: [jsxRuntime.jsx(Typography__default["default"], {
+      variant: 'h5',
+      children: title
+    }), jsxRuntime.jsx(Divider__default["default"], {})]
+  });
 }
 
 /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
@@ -633,59 +683,68 @@ 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 keyLabel = label + " Key"; // i18n ?
+  var RemoveButton = templates.ButtonTemplates.RemoveButton;
+  var keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
   var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
   var btnStyle = {
     flex: 1,
     paddingLeft: 6,
     paddingRight: 6,
-    fontWeight: "bold"
+    fontWeight: 'bold'
   };
   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(Grid__default["default"], {
+  return jsxRuntime.jsxs(Grid__default["default"], {
     container: true,
-    key: id + "-key",
-    alignItems: "center",
+    alignItems: 'center',
     spacing: 2,
     className: classNames,
-    style: style
-  }, /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    item: true,
-    xs: true
-  }, /*#__PURE__*/React__default["default"].createElement(FormControl__default["default"], {
-    fullWidth: true,
-    required: required
-  }, /*#__PURE__*/React__default["default"].createElement(InputLabel__default["default"], null, keyLabel), /*#__PURE__*/React__default["default"].createElement(Input__default["default"], {
-    defaultValue: label,
-    disabled: disabled || readonly,
-    id: id + "-key",
-    name: id + "-key",
-    onBlur: !readonly ? handleBlur : undefined,
-    type: "text"
-  }))), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    item: true,
-    xs: true
-  }, children), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-    item: true
-  }, /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
-    iconType: "default",
-    style: btnStyle,
-    disabled: disabled || readonly,
-    onClick: onDropPropertyClick(label),
-    uiSchema: uiSchema,
-    registry: registry
-  })));
+    style: style,
+    children: [jsxRuntime.jsx(Grid__default["default"], {
+      item: true,
+      xs: true,
+      children: jsxRuntime.jsxs(FormControl__default["default"], {
+        fullWidth: true,
+        required: required,
+        children: [jsxRuntime.jsx(InputLabel__default["default"], {
+          children: keyLabel
+        }), jsxRuntime.jsx(Input__default["default"], {
+          defaultValue: label,
+          disabled: disabled || readonly,
+          id: id + "-key",
+          name: id + "-key",
+          onBlur: !readonly ? handleBlur : undefined,
+          type: 'text'
+        })]
+      })
+    }), jsxRuntime.jsx(Grid__default["default"], {
+      item: true,
+      xs: true,
+      children: children
+    }), jsxRuntime.jsx(Grid__default["default"], {
+      item: true,
+      children: jsxRuntime.jsx(RemoveButton, {
+        iconType: 'default',
+        style: btnStyle,
+        disabled: disabled || readonly,
+        onClick: onDropPropertyClick(label),
+        uiSchema: uiSchema,
+        registry: registry
+      })
+    })]
+  }, id + "-key");
 }
 
 function generateTemplates() {
@@ -743,11 +802,11 @@ function CheckboxWidget(props) {
     var value = _ref2.target.value;
     return onFocus(id, value);
   };
-  return /*#__PURE__*/React__default["default"].createElement(FormControlLabel__default["default"], {
-    control: /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+  return jsxRuntime.jsx(FormControlLabel__default["default"], {
+    control: jsxRuntime.jsx(Checkbox__default["default"], {
       id: id,
       name: id,
-      checked: typeof value === "undefined" ? false : Boolean(value),
+      checked: typeof value === 'undefined' ? false : Boolean(value),
       required: required,
       disabled: disabled || readonly,
       autoFocus: autofocus,
@@ -756,7 +815,7 @@ function CheckboxWidget(props) {
       onFocus: _onFocus,
       "aria-describedby": utils.ariaDescribedByIds(id)
     }),
-    label: label || ""
+    label: label || ''
   });
 }
 
@@ -801,73 +860,35 @@ function CheckboxesWidget(_ref) {
     var value = _ref4.target.value;
     return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, emptyValue));
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FormLabel__default["default"], {
-    required: required,
-    htmlFor: id
-  }, label || schema.title), /*#__PURE__*/React__default["default"].createElement(FormGroup__default["default"], {
-    id: id,
-    row: !!inline
-  }, 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;
-    var checkbox = /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
-      id: utils.optionId(id, index),
-      name: id,
-      checked: checked,
-      disabled: disabled || itemDisabled || readonly,
-      autoFocus: autofocus && index === 0,
-      onChange: _onChange(index),
-      onBlur: _onBlur,
-      onFocus: _onFocus,
-      "aria-describedby": utils.ariaDescribedByIds(id)
-    });
-    return /*#__PURE__*/React__default["default"].createElement(FormControlLabel__default["default"], {
-      control: checkbox,
-      key: index,
-      label: option.label
-    });
-  })));
-}
-
-/** 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.
- *
- * @param props - The `WidgetProps` for this component
- */
-function DateWidget(props) {
-  var options = props.options,
-    registry = props.registry;
-  var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-  return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-    type: "date",
-    InputLabelProps: {
-      shrink: true
-    }
-  }, props));
-}
-
-/** The `DateTimeWidget` component uses the `BaseInputTemplate` changing the type to `datetime-local` and transforms
- * the value to/from utc using the appropriate utility functions.
- *
- * @param props - The `WidgetProps` for this component
- */
-function DateTimeWidget(props) {
-  var options = props.options,
-    registry = props.registry;
-  var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-  var value = utils.utcToLocal(props.value);
-  var onChange = function onChange(value) {
-    props.onChange(utils.localToUTC(value));
-  };
-  return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
-    type: "datetime-local",
-    InputLabelProps: {
-      shrink: true
-    }
-  }, props, {
-    value: value,
-    onChange: onChange
-  }));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(FormLabel__default["default"], {
+      required: required,
+      htmlFor: id,
+      children: label || schema.title
+    }), jsxRuntime.jsx(FormGroup__default["default"], {
+      id: id,
+      row: !!inline,
+      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;
+        var checkbox = jsxRuntime.jsx(Checkbox__default["default"], {
+          id: utils.optionId(id, index),
+          name: id,
+          checked: checked,
+          disabled: disabled || itemDisabled || readonly,
+          autoFocus: autofocus && index === 0,
+          onChange: _onChange(index),
+          onBlur: _onBlur,
+          onFocus: _onFocus,
+          "aria-describedby": utils.ariaDescribedByIds(id)
+        });
+        return jsxRuntime.jsx(FormControlLabel__default["default"], {
+          control: checkbox,
+          label: option.label
+        }, index);
+      })
+    })]
+  });
 }
 
 /** The `RadioWidget` is a widget for rendering a radio group.
@@ -903,33 +924,36 @@ function RadioWidget(_ref) {
   };
   var row = options ? options.inline : false;
   var selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions);
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FormLabel__default["default"], {
-    required: required,
-    htmlFor: id
-  }, label || schema.title), /*#__PURE__*/React__default["default"].createElement(RadioGroup__default["default"], {
-    id: id,
-    name: id,
-    value: selectedIndex,
-    row: row,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-    var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-    var radio = /*#__PURE__*/React__default["default"].createElement(FormControlLabel__default["default"], {
-      control: /*#__PURE__*/React__default["default"].createElement(Radio__default["default"], {
-        name: id,
-        id: utils.optionId(id, index),
-        color: "primary"
-      }),
-      label: option.label,
-      value: String(index),
-      key: index,
-      disabled: disabled || itemDisabled || readonly
-    });
-    return radio;
-  })));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(FormLabel__default["default"], {
+      required: required,
+      htmlFor: id,
+      children: label || schema.title
+    }), jsxRuntime.jsx(RadioGroup__default["default"], {
+      id: id,
+      name: id,
+      value: selectedIndex,
+      row: row,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id),
+      children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+        var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        var radio = jsxRuntime.jsx(FormControlLabel__default["default"], {
+          control: jsxRuntime.jsx(Radio__default["default"], {
+            name: id,
+            id: utils.optionId(id, index),
+            color: 'primary'
+          }),
+          label: option.label,
+          value: String(index),
+          disabled: disabled || itemDisabled || readonly
+        }, index);
+        return radio;
+      })
+    })]
+  });
 }
 
 /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
@@ -956,7 +980,7 @@ function RangeWidget(props) {
     name: id
   }, utils.rangeSpec(schema));
   var _onChange = function _onChange(_, value) {
-    onChange(value ? value : options.emptyValue);
+    onChange(value != null ? value : options.emptyValue);
   };
   var _onBlur = function _onBlur(_ref) {
     var value = _ref.target.value;
@@ -966,21 +990,24 @@ function RangeWidget(props) {
     var value = _ref2.target.value;
     return onFocus(id, value);
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(FormLabel__default["default"], {
-    required: required,
-    htmlFor: id
-  }, label || schema.title), /*#__PURE__*/React__default["default"].createElement(Slider__default["default"], _extends({
-    disabled: disabled || readonly,
-    onChange: _onChange,
-    onBlur: _onBlur,
-    onFocus: _onFocus,
-    valueLabelDisplay: "auto"
-  }, sliderProps, {
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  })));
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+    children: [jsxRuntime.jsx(FormLabel__default["default"], {
+      required: required,
+      htmlFor: id,
+      children: label || schema.title
+    }), jsxRuntime.jsx(Slider__default["default"], _extends({
+      disabled: disabled || readonly,
+      onChange: _onChange,
+      onBlur: _onBlur,
+      onFocus: _onFocus,
+      valueLabelDisplay: 'auto'
+    }, sliderProps, {
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }))]
+  });
 }
 
-var _excluded = ["schema", "id", "options", "label", "required", "disabled", "placeholder", "readonly", "value", "multiple", "autofocus", "onChange", "onBlur", "onFocus", "rawErrors", "registry", "uiSchema", "hideError", "formContext"];
+var _excluded = ["schema", "id", "name", "options", "label", "required", "disabled", "placeholder", "readonly", "value", "multiple", "autofocus", "onChange", "onBlur", "onFocus", "rawErrors", "registry", "uiSchema", "hideError", "formContext"];
 /** The `SelectWidget` is a widget for rendering dropdowns.
  *  It is typically used with string properties constrained with enum options.
  *
@@ -1007,9 +1034,9 @@ function SelectWidget(_ref) {
   var enumOptions = options.enumOptions,
     enumDisabled = options.enumDisabled,
     optEmptyVal = options.emptyValue;
-  multiple = typeof multiple === "undefined" ? false : !!multiple;
-  var emptyValue = multiple ? [] : "";
-  var isEmpty = typeof value === "undefined" || multiple && value.length < 1 || !multiple && value === emptyValue;
+  multiple = typeof multiple === 'undefined' ? false : !!multiple;
+  var emptyValue = multiple ? [] : '';
+  var isEmpty = typeof value === 'undefined' || multiple && value.length < 1 || !multiple && value === emptyValue;
   var _onChange = function _onChange(_ref2) {
     var value = _ref2.target.value;
     return onChange(utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
@@ -1023,7 +1050,7 @@ function SelectWidget(_ref) {
     return onFocus(id, utils.enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
   };
   var selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
-  return /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], _extends({
+  return jsxRuntime.jsx(TextField__default["default"], _extends({
     id: id,
     name: id,
     label: label || schema.title,
@@ -1045,16 +1072,17 @@ function SelectWidget(_ref) {
     SelectProps: _extends({}, textFieldProps.SelectProps, {
       multiple: multiple
     }),
-    "aria-describedby": utils.ariaDescribedByIds(id)
-  }), Array.isArray(enumOptions) && enumOptions.map(function (_ref5, i) {
-    var value = _ref5.value,
-      label = _ref5.label;
-    var disabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;
-    return /*#__PURE__*/React__default["default"].createElement(MenuItem__default["default"], {
-      key: i,
-      value: String(i),
-      disabled: disabled
-    }, label);
+    "aria-describedby": utils.ariaDescribedByIds(id),
+    children: Array.isArray(enumOptions) && enumOptions.map(function (_ref5, i) {
+      var value = _ref5.value,
+        label = _ref5.label;
+      var disabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;
+      return jsxRuntime.jsx(MenuItem__default["default"], {
+        value: String(i),
+        disabled: disabled,
+        children: label
+      }, i);
+    })
   }));
 }
 
@@ -1065,12 +1093,12 @@ function SelectWidget(_ref) {
 function TextareaWidget(props) {
   var options = props.options,
     registry = props.registry;
-  var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+  var BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
   var rows = 5;
-  if (typeof options.rows === "string" || typeof options.rows === "number") {
+  if (typeof options.rows === 'string' || typeof options.rows === 'number') {
     rows = options.rows;
   }
-  return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({}, props, {
+  return jsxRuntime.jsx(BaseInputTemplate, _extends({}, props, {
     multiline: true,
     rows: rows
   }));
@@ -1080,8 +1108,6 @@ function generateWidgets() {
   return {
     CheckboxWidget: CheckboxWidget,
     CheckboxesWidget: CheckboxesWidget,
-    DateWidget: DateWidget,
-    DateTimeWidget: DateTimeWidget,
     RadioWidget: RadioWidget,
     RangeWidget: RangeWidget,
     SelectWidget: SelectWidget,