@rjsf/mui 5.0.0-beta.2 → 5.0.0-beta.20

package/dist/mui.umd.development.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react'), require('@mui/icons-material/Add'), require('@mui/material/IconButton'), require('@mui/material/Box'), require('@mui/material/Grid'), require('@mui/material/Paper'), require('@rjsf/utils'), require('@mui/material/TextField'), require('@mui/material/Typography'), require('@mui/icons-material/Error'), require('@mui/material/List'), require('@mui/material/ListItem'), require('@mui/material/ListItemIcon'), require('@mui/material/ListItemText'), require('@mui/icons-material/ArrowDownward'), require('@mui/icons-material/ArrowUpward'), require('@mui/icons-material/Remove'), require('@mui/material/FormControl'), require('@mui/material/FormHelperText'), require('@mui/material/InputLabel'), require('@mui/material/OutlinedInput'), require('@mui/material/Button'), require('@mui/material/Divider'), require('@mui/material/Checkbox'), require('@mui/material/FormControlLabel'), require('@mui/material/FormGroup'), require('@mui/material/FormLabel'), require('@mui/material/Radio'), require('@mui/material/RadioGroup'), require('@mui/material/Slider'), require('@mui/material/MenuItem')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react', '@mui/icons-material/Add', '@mui/material/IconButton', '@mui/material/Box', '@mui/material/Grid', '@mui/material/Paper', '@rjsf/utils', '@mui/material/TextField', '@mui/material/Typography', '@mui/icons-material/Error', '@mui/material/List', '@mui/material/ListItem', '@mui/material/ListItemIcon', '@mui/material/ListItemText', '@mui/icons-material/ArrowDownward', '@mui/icons-material/ArrowUpward', '@mui/icons-material/Remove', '@mui/material/FormControl', '@mui/material/FormHelperText', '@mui/material/InputLabel', '@mui/material/OutlinedInput', '@mui/material/Button', '@mui/material/Divider', '@mui/material/Checkbox', '@mui/material/FormControlLabel', '@mui/material/FormGroup', '@mui/material/FormLabel', '@mui/material/Radio', '@mui/material/RadioGroup', '@mui/material/Slider', '@mui/material/MenuItem'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/mui"] = {}, global.core, global.React, global.AddIcon, global.IconButton, global.Box, global.Grid, global.Paper, global.utils, global.TextField, global.Typography, global.ErrorIcon, global.List, global.ListItem, global.ListItemIcon, global.ListItemText, global.ArrowDownwardIcon, global.ArrowUpwardIcon, global.RemoveIcon, global.FormControl, global.FormHelperText, global.InputLabel, global.Input, global.Button, global.Divider, global.Checkbox, global.FormControlLabel, global.FormGroup, global.FormLabel, global.Radio, global.RadioGroup, global.Slider, global.MenuItem));
-})(this, (function (exports, core, React, AddIcon, IconButton, Box, Grid, Paper, utils, TextField, Typography, ErrorIcon, List, ListItem, ListItemIcon, ListItemText, ArrowDownwardIcon, ArrowUpwardIcon, RemoveIcon, FormControl, FormHelperText, InputLabel, Input, Button, Divider, Checkbox, FormControlLabel, FormGroup, FormLabel, Radio, RadioGroup, Slider, MenuItem) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@rjsf/core'), require('react'), require('@mui/icons-material/Add'), require('@mui/material/IconButton'), require('@mui/material/Box'), require('@mui/material/Grid'), require('@mui/material/Paper'), require('@rjsf/utils'), require('@mui/material/TextField'), require('@mui/material/Typography'), require('@mui/icons-material/Error'), require('@mui/material/List'), require('@mui/material/ListItem'), require('@mui/material/ListItemIcon'), require('@mui/material/ListItemText'), require('@mui/icons-material/ArrowDownward'), require('@mui/icons-material/ArrowUpward'), require('@mui/icons-material/Remove'), require('@mui/material/FormHelperText'), require('@mui/material/FormControl'), require('@mui/material/Button'), require('@mui/material/Divider'), require('@mui/material/InputLabel'), require('@mui/material/OutlinedInput'), require('@mui/material/Checkbox'), require('@mui/material/FormControlLabel'), require('@mui/material/FormGroup'), require('@mui/material/FormLabel'), require('@mui/material/Radio'), require('@mui/material/RadioGroup'), require('@mui/material/Slider'), require('@mui/material/MenuItem')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@rjsf/core', 'react', '@mui/icons-material/Add', '@mui/material/IconButton', '@mui/material/Box', '@mui/material/Grid', '@mui/material/Paper', '@rjsf/utils', '@mui/material/TextField', '@mui/material/Typography', '@mui/icons-material/Error', '@mui/material/List', '@mui/material/ListItem', '@mui/material/ListItemIcon', '@mui/material/ListItemText', '@mui/icons-material/ArrowDownward', '@mui/icons-material/ArrowUpward', '@mui/icons-material/Remove', '@mui/material/FormHelperText', '@mui/material/FormControl', '@mui/material/Button', '@mui/material/Divider', '@mui/material/InputLabel', '@mui/material/OutlinedInput', '@mui/material/Checkbox', '@mui/material/FormControlLabel', '@mui/material/FormGroup', '@mui/material/FormLabel', '@mui/material/Radio', '@mui/material/RadioGroup', '@mui/material/Slider', '@mui/material/MenuItem'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global["@rjsf/mui"] = {}, global.core, global.React, global.AddIcon, global.IconButton, global.Box, global.Grid, global.Paper, global.utils, global.TextField, global.Typography, global.ErrorIcon, global.List, global.ListItem, global.ListItemIcon, global.ListItemText, global.ArrowDownwardIcon, global.ArrowUpwardIcon, global.RemoveIcon, global.FormHelperText, global.FormControl, global.Button, global.Divider, global.InputLabel, global.Input, global.Checkbox, global.FormControlLabel, global.FormGroup, global.FormLabel, global.Radio, global.RadioGroup, global.Slider, global.MenuItem));
+})(this, (function (exports, core, React, AddIcon, IconButton, Box, Grid, Paper, utils, TextField, Typography, ErrorIcon, List, ListItem, ListItemIcon, ListItemText, ArrowDownwardIcon, ArrowUpwardIcon, RemoveIcon, FormHelperText, FormControl, Button, Divider, InputLabel, Input, Checkbox, FormControlLabel, FormGroup, FormLabel, Radio, RadioGroup, Slider, MenuItem) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -22,12 +22,12 @@
   var ArrowDownwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowDownwardIcon);
   var ArrowUpwardIcon__default = /*#__PURE__*/_interopDefaultLegacy(ArrowUpwardIcon);
   var RemoveIcon__default = /*#__PURE__*/_interopDefaultLegacy(RemoveIcon);
-  var FormControl__default = /*#__PURE__*/_interopDefaultLegacy(FormControl);
   var FormHelperText__default = /*#__PURE__*/_interopDefaultLegacy(FormHelperText);
-  var InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(InputLabel);
-  var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
+  var FormControl__default = /*#__PURE__*/_interopDefaultLegacy(FormControl);
   var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
   var Divider__default = /*#__PURE__*/_interopDefaultLegacy(Divider);
+  var InputLabel__default = /*#__PURE__*/_interopDefaultLegacy(InputLabel);
+  var Input__default = /*#__PURE__*/_interopDefaultLegacy(Input);
   var Checkbox__default = /*#__PURE__*/_interopDefaultLegacy(Checkbox);
   var FormControlLabel__default = /*#__PURE__*/_interopDefaultLegacy(FormControlLabel);
   var FormGroup__default = /*#__PURE__*/_interopDefaultLegacy(FormGroup);
@@ -37,34 +37,67 @@
   var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
   var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
 
-  const AddButton = props => {
-    return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], {
-      title: "Add Item",
-      ...props,
+  function _extends() {
+    _extends = Object.assign ? Object.assign.bind() : function (target) {
+      for (var i = 1; i < arguments.length; i++) {
+        var source = arguments[i];
+        for (var key in source) {
+          if (Object.prototype.hasOwnProperty.call(source, key)) {
+            target[key] = source[key];
+          }
+        }
+      }
+      return target;
+    };
+    return _extends.apply(this, arguments);
+  }
+  function _objectWithoutPropertiesLoose(source, excluded) {
+    if (source == null) return {};
+    var target = {};
+    var sourceKeys = Object.keys(source);
+    var key, i;
+    for (i = 0; i < sourceKeys.length; i++) {
+      key = sourceKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      target[key] = source[key];
+    }
+    return target;
+  }
+
+  var _excluded$4 = ["uiSchema", "registry"];
+  /** 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"
+    }, props, {
       color: "primary"
-    }, /*#__PURE__*/React__default["default"].createElement(AddIcon__default["default"], null));
-  };
+    }), /*#__PURE__*/React__default["default"].createElement(AddIcon__default["default"], null));
+  }
 
-  const ArrayFieldItemTemplate = props => {
-    const {
-      children,
-      disabled,
-      hasToolbar,
-      hasMoveDown,
-      hasMoveUp,
-      hasRemove,
-      index,
-      onDropIndexClick,
-      onReorderClick,
-      readonly,
-      registry
-    } = props;
-    const {
-      MoveDownButton,
-      MoveUpButton,
-      RemoveButton
-    } = registry.templates.ButtonTemplates;
-    const btnStyle = {
+  /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
+   *
+   * @param props - The `ArrayFieldTemplateItemType` props for the component
+   */
+  function ArrayFieldItemTemplate(props) {
+    var children = props.children,
+      disabled = props.disabled,
+      hasToolbar = props.hasToolbar,
+      hasMoveDown = props.hasMoveDown,
+      hasMoveUp = props.hasMoveUp,
+      hasRemove = props.hasRemove,
+      index = props.index,
+      onDropIndexClick = props.onDropIndexClick,
+      onReorderClick = props.onReorderClick,
+      readonly = props.readonly,
+      uiSchema = props.uiSchema,
+      registry = props.registry;
+    var _registry$templates$B = registry.templates.ButtonTemplates,
+      MoveDownButton = _registry$templates$B.MoveDownButton,
+      MoveUpButton = _registry$templates$B.MoveUpButton,
+      RemoveButton = _registry$templates$B.RemoveButton;
+    var btnStyle = {
       flex: 1,
       paddingLeft: 6,
       paddingRight: 6,
@@ -91,42 +124,47 @@
     }, (hasMoveUp || hasMoveDown) && /*#__PURE__*/React__default["default"].createElement(MoveUpButton, {
       style: btnStyle,
       disabled: disabled || readonly || !hasMoveUp,
-      onClick: onReorderClick(index, index - 1)
+      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)
+      onClick: onReorderClick(index, index + 1),
+      uiSchema: uiSchema,
+      registry: registry
     }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
       style: btnStyle,
       disabled: disabled || readonly,
-      onClick: onDropIndexClick(index)
+      onClick: onDropIndexClick(index),
+      uiSchema: uiSchema,
+      registry: registry
     })));
-  };
-
-  const ArrayFieldTemplate = props => {
-    const {
-      canAdd,
-      disabled,
-      idSchema,
-      uiSchema,
-      items,
-      onAddClick,
-      readonly,
-      registry,
-      required,
-      schema,
-      title
-    } = props;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const ArrayFieldDescriptionTemplate = utils.getTemplate("ArrayFieldDescriptionTemplate", registry, uiOptions);
-    const ArrayFieldItemTemplate = utils.getTemplate("ArrayFieldItemTemplate", registry, uiOptions);
-    const ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
+  }
 
-    const {
-      ButtonTemplates: {
-        AddButton
-      }
-    } = registry.templates;
+  var _excluded$3 = ["key"];
+  /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
+   *
+   * @param props - The `ArrayFieldTemplateItemType` props for the component
+   */
+  function ArrayFieldTemplate(props) {
+    var canAdd = props.canAdd,
+      disabled = props.disabled,
+      idSchema = props.idSchema,
+      uiSchema = props.uiSchema,
+      items = props.items,
+      onAddClick = props.onAddClick,
+      readonly = props.readonly,
+      registry = props.registry,
+      required = props.required,
+      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);
+    // 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"], {
@@ -134,26 +172,25 @@
     }, /*#__PURE__*/React__default["default"].createElement(ArrayFieldTitleTemplate, {
       idSchema: idSchema,
       title: uiOptions.title || title,
+      schema: schema,
       uiSchema: uiSchema,
       required: required,
       registry: registry
-    }), (uiOptions.description || schema.description) && /*#__PURE__*/React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
+    }), /*#__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(_ref => {
-      let {
-        key,
-        ...itemProps
-      } = _ref;
-      return /*#__PURE__*/React__default["default"].createElement(ArrayFieldItemTemplate, {
-        key: key,
-        ...itemProps
-      });
+    }, 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"
@@ -164,103 +201,102 @@
     }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
       className: "array-item-add",
       onClick: onAddClick,
-      disabled: disabled || readonly
+      disabled: disabled || readonly,
+      uiSchema: uiSchema,
+      registry: registry
     })))))));
-  };
-
-  const BaseInputTemplate = _ref => {
-    let {
-      id,
-      placeholder,
-      required,
-      readonly,
-      disabled,
-      type,
-      label,
-      value,
-      onChange,
-      onBlur,
-      onFocus,
-      autofocus,
-      options,
-      schema,
-      uiSchema,
-      rawErrors = [],
-      formContext,
-      registry,
-      ...textFieldProps
-    } = _ref;
-    const inputProps = utils.getInputProps(schema, type, options); // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
-
-    const {
-      step,
-      min,
-      max,
-      ...rest
-    } = inputProps;
-    const otherProps = {
-      inputProps: {
-        step,
-        min,
-        max
-      },
-      ...rest
-    };
+  }
 
-    const _onChange = _ref2 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref2;
+  var _excluded$2 = ["id", "placeholder", "required", "readonly", "disabled", "type", "label", "value", "onChange", "onBlur", "onFocus", "autofocus", "options", "schema", "uiSchema", "rawErrors", "formContext", "registry"],
+    _excluded2$1 = ["step", "min", "max"];
+  /** 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.
+   *
+   * @param props - The `WidgetProps` for this template
+   */
+  function BaseInputTemplate(props) {
+    var id = props.id,
+      placeholder = props.placeholder,
+      required = props.required,
+      readonly = props.readonly,
+      disabled = props.disabled,
+      type = props.type,
+      label = props.label,
+      value = props.value,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      autofocus = props.autofocus,
+      options = props.options,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+      registry = props.registry,
+      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
+    var step = inputProps.step,
+      min = inputProps.min,
+      max = inputProps.max,
+      rest = _objectWithoutPropertiesLoose(inputProps, _excluded2$1);
+    var otherProps = _extends({
+      inputProps: _extends({
+        step: step,
+        min: min,
+        max: max
+      }, schema.examples ? {
+        list: utils.examplesId(id)
+      } : undefined)
+    }, rest);
+    var _onChange = function _onChange(_ref) {
+      var value = _ref.target.value;
       return onChange(value === "" ? options.emptyValue : value);
     };
-
-    const _onBlur = _ref3 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref3;
+    var _onBlur = function _onBlur(_ref2) {
+      var value = _ref2.target.value;
       return onBlur(id, value);
     };
-
-    const _onFocus = _ref4 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref4;
+    var _onFocus = function _onFocus(_ref3) {
+      var value = _ref3.target.value;
       return onFocus(id, value);
     };
-
-    const {
-      schemaUtils
-    } = registry;
-    const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
-    return /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], {
+    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,
+      disabled: disabled || readonly
+    }, otherProps, {
       value: value || value === 0 ? value : "",
       error: rawErrors.length > 0,
       onChange: _onChange,
       onBlur: _onBlur,
-      onFocus: _onFocus,
-      ...textFieldProps
-    });
-  };
-
-  const DescriptionField = _ref => {
-    let {
-      description,
-      id
-    } = _ref;
+      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
+      });
+    })));
+  }
 
+  /** The `DescriptionField` is the template to use to render the description of a field
+   *
+   * @param props - The `DescriptionFieldProps` for this component
+   */
+  function DescriptionField(props) {
+    var id = props.id,
+      description = props.description;
     if (description) {
       return /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
         id: id,
@@ -270,14 +306,15 @@
         }
       }, description);
     }
-
     return null;
-  };
+  }
 
-  const ErrorList = _ref => {
-    let {
-      errors
-    } = _ref;
+  /** The `ErrorList` component is the template that renders the all the errors associated with the fields in the `Form`
+   *
+   * @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"], {
@@ -287,7 +324,7 @@
       variant: "h6"
     }, "Errors"), /*#__PURE__*/React__default["default"].createElement(List__default["default"], {
       dense: true
-    }, errors.map((error, i) => {
+    }, 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"], {
@@ -296,144 +333,119 @@
         primary: error.stack
       }));
     }))));
-  };
+  }
 
+  var _excluded$1 = ["icon", "color", "uiSchema", "registry"],
+    _excluded2 = ["iconType"];
   function MuiIconButton(props) {
-    const {
-      icon,
-      color,
-      ...otherProps
-    } = props;
-    return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], { ...otherProps,
+    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);
+    }), icon);
   }
   function MoveDownButton(props) {
-    return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, {
-      title: "Move down",
-      ...props,
+    return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, _extends({
+      title: "Move down"
+    }, props, {
       icon: /*#__PURE__*/React__default["default"].createElement(ArrowDownwardIcon__default["default"], {
         fontSize: "small"
       })
-    });
+    }));
   }
   function MoveUpButton(props) {
-    return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, {
-      title: "Move up",
-      ...props,
+    return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, _extends({
+      title: "Move up"
+    }, props, {
       icon: /*#__PURE__*/React__default["default"].createElement(ArrowUpwardIcon__default["default"], {
         fontSize: "small"
       })
-    });
+    }));
   }
   function RemoveButton(props) {
-    const {
-      iconType,
-      ...otherProps
-    } = props;
-    return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, {
-      title: "Remove",
-      ...otherProps,
+    var iconType = props.iconType,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+    return /*#__PURE__*/React__default["default"].createElement(MuiIconButton, _extends({
+      title: "Remove"
+    }, otherProps, {
       color: "error",
       icon: /*#__PURE__*/React__default["default"].createElement(RemoveIcon__default["default"], {
         fontSize: iconType === "default" ? undefined : "small"
       })
-    });
+    }));
   }
 
-  const WrapIfAdditional = _ref => {
-    let {
-      children,
-      classNames,
-      disabled,
-      id,
-      label,
-      onDropPropertyClick,
-      onKeyChange,
-      readonly,
-      required,
-      schema,
-      registry
-    } = _ref;
-    const {
-      RemoveButton
-    } = registry.templates.ButtonTemplates;
-    const keyLabel = label + " Key"; // i18n ?
-
-    const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-    const btnStyle = {
-      flex: 1,
-      paddingLeft: 6,
-      paddingRight: 6,
-      fontWeight: "bold"
-    };
-
-    if (!additional) {
-      return /*#__PURE__*/React__default["default"].createElement("div", {
-        className: classNames
-      }, children);
+  /** The `FieldErrorTemplate` component renders the errors local to the particular field
+   *
+   * @param props - The `FieldErrorProps` for the errors being rendered
+   */
+  function FieldErrorTemplate(props) {
+    var _props$errors = props.errors,
+      errors = _props$errors === void 0 ? [] : _props$errors,
+      idSchema = props.idSchema;
+    if (errors.length === 0) {
+      return null;
     }
+    var id = utils.errorId(idSchema);
+    return /*#__PURE__*/React__default["default"].createElement(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));
+    }));
+  }
 
-    const handleBlur = _ref2 => {
-      let {
-        target
-      } = _ref2;
-      return onKeyChange(target.value);
-    };
-
-    return /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
-      container: true,
-      key: id + "-key",
-      alignItems: "center",
-      spacing: 2,
-      className: classNames
-    }, /*#__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)
-    })));
-  };
-
-  const FieldTemplate = _ref => {
-    let {
-      id,
-      children,
-      classNames,
-      disabled,
-      displayLabel,
-      hidden,
-      label,
-      onDropPropertyClick,
-      onKeyChange,
-      readonly,
-      required,
-      rawErrors = [],
-      rawHelp,
-      rawDescription,
-      schema,
-      registry
-    } = _ref;
+  /** The `FieldHelpTemplate` component renders any help desired for a field
+   *
+   * @param props - The `FieldHelpProps` to be rendered
+   */
+  function FieldHelpTemplate(props) {
+    var idSchema = props.idSchema,
+      help = props.help;
+    if (!help) {
+      return null;
+    }
+    var id = utils.helpId(idSchema);
+    return /*#__PURE__*/React__default["default"].createElement(FormHelperText__default["default"], {
+      id: id
+    }, help);
+  }
 
+  /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
+   * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
+   *
+   * @param props - The `FieldTemplateProps` for this component
+   */
+  function FieldTemplate(props) {
+    var id = props.id,
+      children = props.children,
+      classNames = props.classNames,
+      style = props.style,
+      disabled = props.disabled,
+      displayLabel = props.displayLabel,
+      hidden = props.hidden,
+      label = props.label,
+      onDropPropertyClick = props.onDropPropertyClick,
+      onKeyChange = props.onKeyChange,
+      readonly = props.readonly,
+      required = props.required,
+      _props$rawErrors = props.rawErrors,
+      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+      errors = props.errors,
+      help = props.help,
+      rawDescription = props.rawDescription,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      registry = props.registry;
+    var uiOptions = utils.getUiOptions(uiSchema);
+    var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
     if (hidden) {
       return /*#__PURE__*/React__default["default"].createElement("div", {
         style: {
@@ -441,9 +453,9 @@
         }
       }, children);
     }
-
-    return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditional, {
+    return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, {
       classNames: classNames,
+      style: style,
       disabled: disabled,
       id: id,
       label: label,
@@ -452,6 +464,7 @@
       readonly: readonly,
       required: required,
       schema: schema,
+      uiSchema: uiSchema,
       registry: registry
     }, /*#__PURE__*/React__default["default"].createElement(FormControl__default["default"], {
       fullWidth: true,
@@ -460,54 +473,45 @@
     }, children, displayLabel && rawDescription ? /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       variant: "caption",
       color: "textSecondary"
-    }, rawDescription) : null, rawErrors.length > 0 && /*#__PURE__*/React__default["default"].createElement(List__default["default"], {
-      dense: true,
-      disablePadding: true
-    }, rawErrors.map((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));
-    })), rawHelp && /*#__PURE__*/React__default["default"].createElement(FormHelperText__default["default"], {
-      id: id
-    }, rawHelp)));
-  };
-
-  const ObjectFieldTemplate = _ref => {
-    let {
-      description,
-      title,
-      properties,
-      required,
-      disabled,
-      readonly,
-      uiSchema,
-      idSchema,
-      schema,
-      formData,
-      onAddClick,
-      registry
-    } = _ref;
-    const uiOptions = utils.getUiOptions(uiSchema);
-    const TitleFieldTemplate = utils.getTemplate("TitleFieldTemplate", registry, uiOptions);
-    const DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions); // Button templates are not overridden in the uiSchema
+    }, rawDescription) : null, errors, help));
+  }
 
-    const {
-      ButtonTemplates: {
-        AddButton
-      }
-    } = registry.templates;
+  /** 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
+   * the properties.
+   *
+   * @param props - The `ObjectFieldTemplateProps` for this component
+   */
+  function ObjectFieldTemplate(props) {
+    var description = props.description,
+      title = props.title,
+      properties = props.properties,
+      required = props.required,
+      disabled = props.disabled,
+      readonly = props.readonly,
+      uiSchema = props.uiSchema,
+      idSchema = props.idSchema,
+      schema = props.schema,
+      formData = props.formData,
+      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);
+    // 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: idSchema.$id + "-title",
+      id: utils.titleId(idSchema),
       title: title,
       required: required,
+      schema: schema,
       uiSchema: uiSchema,
       registry: registry
     }), (uiOptions.description || description) && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
-      id: idSchema.$id + "-description",
+      id: utils.descriptionId(idSchema),
       description: uiOptions.description || description,
+      schema: schema,
+      uiSchema: uiSchema,
       registry: registry
     }), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
       container: true,
@@ -515,16 +519,20 @@
       style: {
         marginTop: "10px"
       }
-    }, properties.map((element, index) => // 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"], {
+    }, 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"], {
@@ -532,36 +540,40 @@
     }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
       className: "object-property-expand",
       onClick: onAddClick(schema),
-      disabled: disabled || readonly
+      disabled: disabled || readonly,
+      uiSchema: uiSchema,
+      registry: registry
     })))));
-  };
-
-  const SubmitButton = props => {
-    const {
-      submitText,
-      norender,
-      props: submitButtonProps
-    } = utils.getSubmitButtonOptions(props.uiSchema);
+  }
 
+  /** The `SubmitButton` renders a button that represent the `Submit` action on a form
+   */
+  function SubmitButton(_ref) {
+    var uiSchema = _ref.uiSchema;
+    var _getSubmitButtonOptio = utils.getSubmitButtonOptions(uiSchema),
+      submitText = _getSubmitButtonOptio.submitText,
+      norender = _getSubmitButtonOptio.norender,
+      _getSubmitButtonOptio2 = _getSubmitButtonOptio.props,
+      submitButtonProps = _getSubmitButtonOptio2 === void 0 ? {} : _getSubmitButtonOptio2;
     if (norender) {
       return null;
     }
-
     return /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
       marginTop: 3
-    }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], {
+    }, /*#__PURE__*/React__default["default"].createElement(Button__default["default"], _extends({
       type: "submit",
       variant: "contained",
-      color: "primary",
-      ...submitButtonProps
-    }, submitText));
-  };
+      color: "primary"
+    }, submitButtonProps), submitText));
+  }
 
-  const TitleField = _ref => {
-    let {
-      id,
-      title
-    } = _ref;
+  /** The `TitleField` is the template to use to render the title of a field
+   *
+   * @param props - The `TitleFieldProps` for this component
+   */
+  function TitleField(_ref) {
+    var id = _ref.id,
+      title = _ref.title;
     return /*#__PURE__*/React__default["default"].createElement(Box__default["default"], {
       id: id,
       mb: 1,
@@ -569,460 +581,501 @@
     }, /*#__PURE__*/React__default["default"].createElement(Typography__default["default"], {
       variant: "h5"
     }, title), /*#__PURE__*/React__default["default"].createElement(Divider__default["default"], null));
-  };
+  }
 
-  var Templates = {
-    ArrayFieldItemTemplate,
-    ArrayFieldTemplate,
-    BaseInputTemplate,
-    ButtonTemplates: {
-      AddButton,
-      MoveDownButton,
-      MoveUpButton,
-      RemoveButton,
-      SubmitButton
-    },
-    DescriptionFieldTemplate: DescriptionField,
-    ErrorListTemplate: ErrorList,
-    FieldTemplate,
-    ObjectFieldTemplate,
-    TitleFieldTemplate: TitleField
-  };
+  /** The `WrapIfAdditional` component is used by the `FieldTemplate` to rename, or remove properties that are
+   * part of an `additionalProperties` part of a schema.
+   *
+   * @param props - The `WrapIfAdditionalProps` for this component
+   */
+  function WrapIfAdditionalTemplate(props) {
+    var children = props.children,
+      classNames = props.classNames,
+      style = props.style,
+      disabled = props.disabled,
+      id = props.id,
+      label = props.label,
+      onDropPropertyClick = props.onDropPropertyClick,
+      onKeyChange = props.onKeyChange,
+      readonly = props.readonly,
+      required = props.required,
+      schema = props.schema,
+      uiSchema = props.uiSchema,
+      registry = props.registry;
+    // Button templates are not overridden in the uiSchema
+    var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
+    var keyLabel = label + " Key"; // i18n ?
+    var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
+    var btnStyle = {
+      flex: 1,
+      paddingLeft: 6,
+      paddingRight: 6,
+      fontWeight: "bold"
+    };
+    if (!additional) {
+      return /*#__PURE__*/React__default["default"].createElement("div", {
+        className: classNames,
+        style: style
+      }, children);
+    }
+    var handleBlur = function handleBlur(_ref) {
+      var target = _ref.target;
+      return onKeyChange(target.value);
+    };
+    return /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
+      container: true,
+      key: id + "-key",
+      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
+    })));
+  }
 
-  const CheckboxWidget = props => {
-    const {
-      schema,
-      id,
-      value,
-      disabled,
-      readonly,
-      label,
-      autofocus,
-      onChange,
-      onBlur,
-      onFocus
-    } = props; // Because an unchecked checkbox will cause html5 validation to fail, only add
+  function generateTemplates() {
+    return {
+      ArrayFieldItemTemplate: ArrayFieldItemTemplate,
+      ArrayFieldTemplate: ArrayFieldTemplate,
+      BaseInputTemplate: BaseInputTemplate,
+      ButtonTemplates: {
+        AddButton: AddButton,
+        MoveDownButton: MoveDownButton,
+        MoveUpButton: MoveUpButton,
+        RemoveButton: RemoveButton,
+        SubmitButton: SubmitButton
+      },
+      DescriptionFieldTemplate: DescriptionField,
+      ErrorListTemplate: ErrorList,
+      FieldErrorTemplate: FieldErrorTemplate,
+      FieldHelpTemplate: FieldHelpTemplate,
+      FieldTemplate: FieldTemplate,
+      ObjectFieldTemplate: ObjectFieldTemplate,
+      TitleFieldTemplate: TitleField,
+      WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
+    };
+  }
+  var Templates = /*#__PURE__*/generateTemplates();
+
+  /** The `CheckBoxWidget` is a widget for rendering boolean properties.
+   *  It is typically used to represent a boolean.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function CheckboxWidget(props) {
+    var schema = props.schema,
+      id = props.id,
+      value = props.value,
+      disabled = props.disabled,
+      readonly = props.readonly,
+      label = props.label,
+      autofocus = props.autofocus,
+      onChange = props.onChange,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus;
+    // Because an unchecked checkbox will cause html5 validation to fail, only add
     // the "required" attribute if the field value must be "true", due to the
     // "const" or "enum" keywords
-
-    const required = utils.schemaRequiresTrueValue(schema);
-
-    const _onChange = (_, checked) => onChange(checked);
-
-    const _onBlur = _ref => {
-      let {
-        target: {
-          value
-        }
-      } = _ref;
+    var required = utils.schemaRequiresTrueValue(schema);
+    var _onChange = function _onChange(_, checked) {
+      return onChange(checked);
+    };
+    var _onBlur = function _onBlur(_ref) {
+      var value = _ref.target.value;
       return onBlur(id, value);
     };
-
-    const _onFocus = _ref2 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref2;
+    var _onFocus = function _onFocus(_ref2) {
+      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"], {
         id: id,
+        name: id,
         checked: typeof value === "undefined" ? false : Boolean(value),
         required: required,
         disabled: disabled || readonly,
         autoFocus: autofocus,
         onChange: _onChange,
         onBlur: _onBlur,
-        onFocus: _onFocus
+        onFocus: _onFocus,
+        "aria-describedby": utils.ariaDescribedByIds(id)
       }),
       label: label || ""
     });
-  };
-
-  const selectValue = (value, selected, all) => {
-    const at = all.indexOf(value);
-    const updated = selected.slice(0, at).concat(value, selected.slice(at)); // As inserting values at predefined index positions doesn't work with empty
-    // arrays, we need to reorder the updated selection to match the initial order
-
-    return updated.sort((a, b) => all.indexOf(a) > all.indexOf(b));
-  };
-
-  const deselectValue = (value, selected) => {
-    return selected.filter(v => v !== value);
-  };
-
-  const CheckboxesWidget = _ref => {
-    let {
-      schema,
-      label,
-      id,
-      disabled,
-      options,
-      value,
-      autofocus,
-      readonly,
-      required,
-      onChange,
-      onBlur,
-      onFocus
-    } = _ref;
-    const {
-      enumOptions,
-      enumDisabled,
-      inline
-    } = options;
+  }
 
-    const _onChange = option => _ref2 => {
-      let {
-        target: {
-          checked
+  /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
+   *  It is typically used to represent an array of enums.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function CheckboxesWidget(_ref) {
+    var schema = _ref.schema,
+      label = _ref.label,
+      id = _ref.id,
+      disabled = _ref.disabled,
+      options = _ref.options,
+      value = _ref.value,
+      autofocus = _ref.autofocus,
+      readonly = _ref.readonly,
+      required = _ref.required,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus;
+    var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled,
+      inline = options.inline;
+    var checkboxesValues = Array.isArray(value) ? value : [value];
+    var _onChange = function _onChange(option) {
+      return function (_ref2) {
+        var checked = _ref2.target.checked;
+        if (checked) {
+          onChange(utils.enumOptionsSelectValue(option.value, checkboxesValues, enumOptions));
+        } else {
+          onChange(utils.enumOptionsDeselectValue(option.value, checkboxesValues));
         }
-      } = _ref2;
-      const all = enumOptions.map(_ref3 => {
-        let {
-          value
-        } = _ref3;
-        return value;
-      });
-
-      if (checked) {
-        onChange(selectValue(option.value, value, all));
-      } else {
-        onChange(deselectValue(option.value, value));
-      }
+      };
     };
-
-    const _onBlur = _ref4 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref4;
+    var _onBlur = function _onBlur(_ref3) {
+      var value = _ref3.target.value;
       return onBlur(id, value);
     };
-
-    const _onFocus = _ref5 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref5;
+    var _onFocus = function _onFocus(_ref4) {
+      var value = _ref4.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(FormGroup__default["default"], {
       id: id,
       row: !!inline
-    }, enumOptions.map((option, index) => {
-      const checked = value.indexOf(option.value) !== -1;
-      const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
-      const checkbox = /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
-        id: id + "_" + index,
+    }, Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
+      var checked = checkboxesValues.includes(option.value);
+      var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+      var checkbox = /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
+        id: utils.optionId(id, option),
+        name: id,
         checked: checked,
         disabled: disabled || itemDisabled || readonly,
         autoFocus: autofocus && index === 0,
         onChange: _onChange(option),
         onBlur: _onBlur,
-        onFocus: _onFocus
+        onFocus: _onFocus,
+        "aria-describedby": utils.ariaDescribedByIds(id)
       });
       return /*#__PURE__*/React__default["default"].createElement(FormControlLabel__default["default"], {
         control: checkbox,
-        key: index,
+        key: option.value,
         label: option.label
       });
     })));
-  };
+  }
 
-  const DateWidget = props => {
-    const {
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, {
+  /** 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
-    });
-  };
-
-  const DateTimeWidget = props => {
-    const {
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    const value = utils.utcToLocal(props.value);
+      }
+    }, props));
+  }
 
-    const onChange = value => {
+  /** 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, {
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({
       type: "datetime-local",
       InputLabelProps: {
         shrink: true
-      },
-      ...props,
+      }
+    }, props, {
       value: value,
       onChange: onChange
-    });
-  };
-
-  const RadioWidget = _ref => {
-    let {
-      id,
-      schema,
-      options,
-      value,
-      required,
-      disabled,
-      readonly,
-      label,
-      onChange,
-      onBlur,
-      onFocus
-    } = _ref;
-    const {
-      enumOptions,
-      enumDisabled
-    } = options;
-
-    const _onChange = (_, value) => onChange(schema.type == "boolean" ? value !== "false" : value);
+    }));
+  }
 
-    const _onBlur = _ref2 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref2;
+  /** The `RadioWidget` is a widget for rendering a radio group.
+   *  It is typically used with a string property constrained with enum options.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function RadioWidget(_ref) {
+    var id = _ref.id,
+      schema = _ref.schema,
+      options = _ref.options,
+      value = _ref.value,
+      required = _ref.required,
+      disabled = _ref.disabled,
+      readonly = _ref.readonly,
+      label = _ref.label,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus;
+    var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled;
+    var _onChange = function _onChange(_, value) {
+      return onChange(schema.type == "boolean" ? value !== "false" : value);
+    };
+    var _onBlur = function _onBlur(_ref2) {
+      var value = _ref2.target.value;
       return onBlur(id, value);
     };
-
-    const _onFocus = _ref3 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref3;
+    var _onFocus = function _onFocus(_ref3) {
+      var value = _ref3.target.value;
       return onFocus(id, value);
     };
-
-    const row = options ? options.inline : false;
+    var row = options ? options.inline : false;
     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: "" + value,
       row: row,
       onChange: _onChange,
       onBlur: _onBlur,
-      onFocus: _onFocus
-    }, enumOptions.map((option, i) => {
-      const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
-      const radio = /*#__PURE__*/React__default["default"].createElement(FormControlLabel__default["default"], {
+      onFocus: _onFocus,
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }, Array.isArray(enumOptions) && enumOptions.map(function (option) {
+      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 + "-" + i,
-          color: "primary",
-          key: i
+          name: id,
+          id: utils.optionId(id, option),
+          color: "primary"
         }),
         label: "" + option.label,
         value: "" + option.value,
-        key: i,
+        key: option.value,
         disabled: disabled || itemDisabled || readonly
       });
       return radio;
     })));
-  };
-
-  const RangeWidget = _ref => {
-    let {
-      value,
-      readonly,
-      disabled,
-      onBlur,
-      onFocus,
-      options,
-      schema,
-      onChange,
-      required,
-      label,
-      id
-    } = _ref;
-    const sliderProps = {
-      value,
-      label,
-      id,
-      ...utils.rangeSpec(schema)
-    };
+  }
 
-    const _onChange = (_, value) => {
-      onChange(value ? options.emptyValue : value);
+  /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
+   * in a div, with the value along side it.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function RangeWidget(props) {
+    var value = props.value,
+      readonly = props.readonly,
+      disabled = props.disabled,
+      onBlur = props.onBlur,
+      onFocus = props.onFocus,
+      options = props.options,
+      schema = props.schema,
+      onChange = props.onChange,
+      required = props.required,
+      label = props.label,
+      id = props.id;
+    var sliderProps = _extends({
+      value: value,
+      label: label,
+      id: id,
+      name: id
+    }, utils.rangeSpec(schema));
+    var _onChange = function _onChange(_, value) {
+      onChange(value ? value : options.emptyValue);
     };
-
-    const _onBlur = _ref2 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref2;
+    var _onBlur = function _onBlur(_ref) {
+      var value = _ref.target.value;
       return onBlur(id, value);
     };
-
-    const _onFocus = _ref3 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref3;
+    var _onFocus = function _onFocus(_ref2) {
+      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,
-      id: id
-    }, label), /*#__PURE__*/React__default["default"].createElement(Slider__default["default"], {
+      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
-    }));
-  };
-
-  const SelectWidget = _ref => {
-    let {
-      schema,
-      id,
-      options,
-      label,
-      required,
-      disabled,
-      readonly,
-      value,
-      multiple,
-      autofocus,
-      onChange,
-      onBlur,
-      onFocus,
-      rawErrors = []
-    } = _ref;
-    const {
-      enumOptions,
-      enumDisabled
-    } = options;
-    const emptyValue = multiple ? [] : "";
+      valueLabelDisplay: "auto"
+    }, sliderProps, {
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    })));
+  }
 
-    const _onChange = _ref2 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref2;
+  var _excluded = ["schema", "id", "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.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function SelectWidget(_ref) {
+    var schema = _ref.schema,
+      id = _ref.id,
+      options = _ref.options,
+      label = _ref.label,
+      required = _ref.required,
+      disabled = _ref.disabled,
+      placeholder = _ref.placeholder,
+      readonly = _ref.readonly,
+      value = _ref.value,
+      multiple = _ref.multiple,
+      autofocus = _ref.autofocus,
+      onChange = _ref.onChange,
+      onBlur = _ref.onBlur,
+      onFocus = _ref.onFocus,
+      _ref$rawErrors = _ref.rawErrors,
+      rawErrors = _ref$rawErrors === void 0 ? [] : _ref$rawErrors,
+      textFieldProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+    var enumOptions = options.enumOptions,
+      enumDisabled = options.enumDisabled;
+    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.processSelectValue(schema, value, options));
     };
-
-    const _onBlur = _ref3 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref3;
+    var _onBlur = function _onBlur(_ref3) {
+      var value = _ref3.target.value;
       return onBlur(id, utils.processSelectValue(schema, value, options));
     };
-
-    const _onFocus = _ref4 => {
-      let {
-        target: {
-          value
-        }
-      } = _ref4;
+    var _onFocus = function _onFocus(_ref4) {
+      var value = _ref4.target.value;
       return onFocus(id, utils.processSelectValue(schema, value, options));
     };
-
-    return /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], {
+    return /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], _extends({
       id: id,
+      name: id,
       label: label || schema.title,
-      select: true,
-      value: typeof value === "undefined" ? emptyValue : value,
+      value: isEmpty ? emptyValue : value,
       required: required,
       disabled: disabled || readonly,
       autoFocus: autofocus,
+      placeholder: placeholder,
       error: rawErrors.length > 0,
       onChange: _onChange,
       onBlur: _onBlur,
-      onFocus: _onFocus,
-      InputLabelProps: {
-        shrink: true
-      },
-      SelectProps: {
-        multiple: typeof multiple === "undefined" ? false : multiple
-      }
-    }, enumOptions.map((_ref5, i) => {
-      let {
-        value,
-        label
-      } = _ref5;
-      const disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
+      onFocus: _onFocus
+    }, textFieldProps, {
+      select // Apply this and the following props after the potential overrides defined in textFieldProps
+      : true,
+      InputLabelProps: _extends({}, textFieldProps.InputLabelProps, {
+        shrink: !isEmpty
+      }),
+      SelectProps: _extends({}, textFieldProps.SelectProps, {
+        multiple: multiple
+      }),
+      "aria-describedby": utils.ariaDescribedByIds(id)
+    }), enumOptions.map(function (_ref5, i) {
+      var value = _ref5.value,
+        label = _ref5.label;
+      var disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
       return /*#__PURE__*/React__default["default"].createElement(MenuItem__default["default"], {
         key: i,
         value: value,
         disabled: disabled
       }, label);
     }));
-  };
-
-  const TextareaWidget = props => {
-    const {
-      options,
-      registry
-    } = props;
-    const BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
-    let rows = 5;
+  }
 
+  /** The `TextareaWidget` is a widget for rendering input fields as textarea.
+   *
+   * @param props - The `WidgetProps` for this component
+   */
+  function TextareaWidget(props) {
+    var options = props.options,
+      registry = props.registry;
+    var BaseInputTemplate = utils.getTemplate("BaseInputTemplate", registry, options);
+    var rows = 5;
     if (typeof options.rows === "string" || typeof options.rows === "number") {
       rows = options.rows;
     }
-
-    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, { ...props,
+    return /*#__PURE__*/React__default["default"].createElement(BaseInputTemplate, _extends({}, props, {
       multiline: true,
       rows: rows
-    });
-  };
+    }));
+  }
 
-  var Widgets = {
-    CheckboxWidget,
-    CheckboxesWidget,
-    DateWidget,
-    DateTimeWidget,
-    RadioWidget,
-    RangeWidget,
-    SelectWidget,
-    TextareaWidget
-  };
+  function generateWidgets() {
+    return {
+      CheckboxWidget: CheckboxWidget,
+      CheckboxesWidget: CheckboxesWidget,
+      DateWidget: DateWidget,
+      DateTimeWidget: DateTimeWidget,
+      RadioWidget: RadioWidget,
+      RangeWidget: RangeWidget,
+      SelectWidget: SelectWidget,
+      TextareaWidget: TextareaWidget
+    };
+  }
+  var Widgets = /*#__PURE__*/generateWidgets();
 
-  const Theme = {
-    templates: Templates,
-    widgets: Widgets
-  };
+  function generateTheme() {
+    return {
+      templates: generateTemplates(),
+      widgets: generateWidgets()
+    };
+  }
+  var Theme = /*#__PURE__*/generateTheme();
 
-  const MuiForm = /*#__PURE__*/core.withTheme(Theme);
+  function generateForm() {
+    return core.withTheme(generateTheme());
+  }
+  var MuiForm = /*#__PURE__*/generateForm();
 
   exports.Form = MuiForm;
   exports.Templates = Templates;
   exports.Theme = Theme;
   exports.Widgets = Widgets;
   exports["default"] = MuiForm;
+  exports.generateForm = generateForm;
+  exports.generateTemplates = generateTemplates;
+  exports.generateTheme = generateTheme;
+  exports.generateWidgets = generateWidgets;
 
   Object.defineProperty(exports, '__esModule', { value: true });