@rjsf/mui 5.0.0-beta.1 → 5.0.0-beta.11

package/README.md

@@ -8,10 +8,10 @@
 <br />
 <p align="center">
   <a href="https://github.com/rjsf-team/react-jsonschema-form">
-    <img src="https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/material-ui/logo.png" alt="Logo" width="120" height="120">
+    <img src="https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/7ebc86621d8df8c21f0c39bcca6d476f6f7a2051/packages/mui/logo.png" alt="Logo" width="120" height="120">
   </a>
 
-  <h3 align="center">@rjsf/material-ui</h3>
+  <h3 align="center">@rjsf/mui</h3>
 
   <p align="center">
   Material UI 5 theme, fields and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form/"><code>react-jsonschema-form</code></a>.
@@ -30,12 +30,14 @@
 <!-- TABLE OF CONTENTS -->
 
 ## Table of Contents
-
+- [Table of Contents](#table-of-contents)
 - [About The Project](#about-the-project)
+  - [Built With](#built-with)
 - [Getting Started](#getting-started)
   - [Prerequisites](#prerequisites)
   - [Installation](#installation)
 - [Usage](#usage)
+  - [Material UI version 5](#material-ui-version-5)
 - [Roadmap](#roadmap)
 - [Contributing](#contributing)
 - [Contact](#contact)
@@ -44,7 +46,7 @@
 
 ## About The Project
 
-[![@rjsf/material-ui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/material-ui)
+[![@rjsf/material-ui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/mui)
 
 Exports `material-ui` version 4 and 5 themes, fields and widgets for `react-jsonschema-form`.
 

package/dist/index.d.ts

@@ -1,6 +1,60 @@
-import MuiForm from "./MuiForm/MuiForm";
-export { default as Form } from "./MuiForm";
-export { default as Templates } from "./Templates";
-export { default as Theme } from "./Theme";
-export { default as Widgets } from "./Widgets";
-export default MuiForm;
+/// <reference types="react" />
+import * as react from 'react';
+import { ComponentType } from 'react';
+import { FormProps, ThemeProps } from '@rjsf/core';
+import * as _rjsf_utils from '@rjsf/utils';
+import { IconButtonProps, FieldErrorProps, FieldHelpProps } from '@rjsf/utils';
+
+declare const MuiForm: ComponentType<FormProps>;
+
+declare function MoveDownButton(props: IconButtonProps): JSX.Element;
+declare function MoveUpButton(props: IconButtonProps): JSX.Element;
+declare function RemoveButton(props: IconButtonProps): JSX.Element;
+
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
+declare function FieldErrorTemplate(props: FieldErrorProps): JSX.Element | null;
+
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+declare function FieldHelpTemplate(props: FieldHelpProps): JSX.Element | null;
+
+declare const _default$1: {
+    ArrayFieldItemTemplate: (props: _rjsf_utils.ArrayFieldTemplateItemType<any, any>) => JSX.Element;
+    ArrayFieldTemplate: (props: _rjsf_utils.ArrayFieldTemplateProps<any, any>) => JSX.Element;
+    BaseInputTemplate: ({ id, placeholder, required, readonly, disabled, type, label, value, onChange, onBlur, onFocus, autofocus, options, schema, uiSchema, rawErrors, formContext, registry, ...textFieldProps }: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+    ButtonTemplates: {
+        AddButton: react.ComponentType<_rjsf_utils.IconButtonProps<any, any>>;
+        MoveDownButton: typeof MoveDownButton;
+        MoveUpButton: typeof MoveUpButton;
+        RemoveButton: typeof RemoveButton;
+        SubmitButton: react.ComponentType<_rjsf_utils.SubmitButtonProps<any, any>>;
+    };
+    DescriptionFieldTemplate: ({ description, id }: _rjsf_utils.DescriptionFieldProps<any, any>) => JSX.Element | null;
+    ErrorListTemplate: ({ errors }: _rjsf_utils.ErrorListProps<any, any>) => JSX.Element;
+    FieldErrorTemplate: typeof FieldErrorTemplate;
+    FieldHelpTemplate: typeof FieldHelpTemplate;
+    FieldTemplate: ({ id, children, classNames, disabled, displayLabel, hidden, label, onDropPropertyClick, onKeyChange, readonly, required, rawErrors, errors, help, rawDescription, schema, uiSchema, registry, }: _rjsf_utils.FieldTemplateProps<any, any>) => JSX.Element;
+    ObjectFieldTemplate: ({ description, title, properties, required, disabled, readonly, uiSchema, idSchema, schema, formData, onAddClick, registry, }: _rjsf_utils.ObjectFieldTemplateProps<any, any>) => JSX.Element;
+    TitleFieldTemplate: ({ id, title }: _rjsf_utils.TitleFieldProps<any, any>) => JSX.Element;
+    WrapIfAdditionalTemplate: ({ children, classNames, disabled, id, label, onDropPropertyClick, onKeyChange, readonly, required, schema, uiSchema, registry, }: _rjsf_utils.WrapIfAdditionalTemplateProps<any, any>) => JSX.Element;
+};
+
+declare const Theme: ThemeProps;
+
+declare const _default: {
+    CheckboxWidget: (props: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+    CheckboxesWidget: ({ schema, label, id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus, }: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+    DateWidget: (props: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+    DateTimeWidget: (props: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+    RadioWidget: ({ id, schema, options, value, required, disabled, readonly, label, onChange, onBlur, onFocus, }: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+    RangeWidget: ({ value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, id, }: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+    SelectWidget: ({ schema, id, options, label, required, disabled, readonly, value, multiple, autofocus, onChange, onBlur, onFocus, rawErrors, }: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+    TextareaWidget: (props: _rjsf_utils.WidgetProps<any, any>) => JSX.Element;
+};
+
+export { MuiForm as Form, _default$1 as Templates, Theme, _default as Widgets, MuiForm as default };

package/dist/mui.cjs.development.js

@@ -20,12 +20,12 @@ var ListItemText = require('@mui/material/ListItemText');
 var ArrowDownwardIcon = require('@mui/icons-material/ArrowDownward');
 var ArrowUpwardIcon = require('@mui/icons-material/ArrowUpward');
 var RemoveIcon = require('@mui/icons-material/Remove');
-var FormControl = require('@mui/material/FormControl');
 var FormHelperText = require('@mui/material/FormHelperText');
-var InputLabel = require('@mui/material/InputLabel');
-var Input = require('@mui/material/OutlinedInput');
+var FormControl = require('@mui/material/FormControl');
 var Button = require('@mui/material/Button');
 var Divider = require('@mui/material/Divider');
+var InputLabel = require('@mui/material/InputLabel');
+var Input = require('@mui/material/OutlinedInput');
 var Checkbox = require('@mui/material/Checkbox');
 var FormControlLabel = require('@mui/material/FormControlLabel');
 var FormGroup = require('@mui/material/FormGroup');
@@ -53,12 +53,12 @@ var ListItemText__default = /*#__PURE__*/_interopDefaultLegacy(ListItemText);
 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);
@@ -68,7 +68,11 @@ var RadioGroup__default = /*#__PURE__*/_interopDefaultLegacy(RadioGroup);
 var Slider__default = /*#__PURE__*/_interopDefaultLegacy(Slider);
 var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
 
-const AddButton = props => {
+const AddButton = _ref => {
+  let {
+    uiSchema,
+    ...props
+  } = _ref;
   return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], {
     title: "Add Item",
     ...props,
@@ -88,6 +92,7 @@ const ArrayFieldItemTemplate = props => {
     onDropIndexClick,
     onReorderClick,
     readonly,
+    uiSchema,
     registry
   } = props;
   const {
@@ -122,15 +127,18 @@ const ArrayFieldItemTemplate = props => {
   }, (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
   }), (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
   }), hasRemove && /*#__PURE__*/React__default["default"].createElement(RemoveButton, {
     style: btnStyle,
     disabled: disabled || readonly,
-    onClick: onDropIndexClick(index)
+    onClick: onDropIndexClick(index),
+    uiSchema: uiSchema
   })));
 };
 
@@ -165,12 +173,14 @@ const ArrayFieldTemplate = props => {
   }, /*#__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"], {
@@ -195,7 +205,8 @@ const ArrayFieldTemplate = props => {
   }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
     className: "array-item-add",
     onClick: onAddClick,
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema
   })))))));
 };
 
@@ -233,7 +244,10 @@ const BaseInputTemplate = _ref => {
     inputProps: {
       step,
       min,
-      max
+      max,
+      ...(schema.examples ? {
+        list: "examples_" + id
+      } : undefined)
     },
     ...rest
   };
@@ -269,8 +283,9 @@ const BaseInputTemplate = _ref => {
     schemaUtils
   } = registry;
   const displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema);
-  return /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], {
     id: id,
+    name: id,
     placeholder: placeholder,
     label: displayLabel ? label || schema.title : false,
     autoFocus: autofocus,
@@ -283,7 +298,14 @@ const BaseInputTemplate = _ref => {
     onBlur: _onBlur,
     onFocus: _onFocus,
     ...textFieldProps
-  });
+  }), schema.examples && /*#__PURE__*/React__default["default"].createElement("datalist", {
+    id: "examples_" + id
+  }, schema.examples.concat(schema.default ? [schema.default] : []).map(example => {
+    return /*#__PURE__*/React__default["default"].createElement("option", {
+      key: example,
+      value: example
+    });
+  })));
 };
 
 const DescriptionField = _ref => {
@@ -333,6 +355,7 @@ function MuiIconButton(props) {
   const {
     icon,
     color,
+    uiSchema,
     ...otherProps
   } = props;
   return /*#__PURE__*/React__default["default"].createElement(IconButton__default["default"], { ...otherProps,
@@ -373,77 +396,55 @@ function RemoveButton(props) {
   });
 }
 
-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 ?
+/** The `FieldErrorTemplate` component renders the errors local to the particular field
+ *
+ * @param props - The `FieldErrorProps` for the errors being rendered
+ */
 
-  const additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-  const btnStyle = {
-    flex: 1,
-    paddingLeft: 6,
-    paddingRight: 6,
-    fontWeight: "bold"
-  };
+function FieldErrorTemplate(props) {
+  const {
+    errors = [],
+    idSchema
+  } = props;
 
-  if (!additional) {
-    return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: classNames
-    }, children);
+  if (errors.length === 0) {
+    return null;
   }
 
-  const handleBlur = _ref2 => {
-    let {
-      target
-    } = _ref2;
-    return onKeyChange(target.value);
-  };
+  const id = idSchema.$id + "__error";
+  return /*#__PURE__*/React__default["default"].createElement(List__default["default"], {
+    dense: true,
+    disablePadding: true
+  }, errors.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));
+  }));
+}
 
-  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)
-  })));
-};
+/** The `FieldHelpTemplate` component renders any help desired for a field
+ *
+ * @param props - The `FieldHelpProps` to be rendered
+ */
+
+function FieldHelpTemplate(props) {
+  const {
+    idSchema,
+    help
+  } = props;
+
+  if (!help) {
+    return null;
+  }
+
+  const id = idSchema.$id + "__help";
+  return /*#__PURE__*/React__default["default"].createElement(FormHelperText__default["default"], {
+    id: id
+  }, help);
+}
 
 const FieldTemplate = _ref => {
   let {
@@ -459,11 +460,15 @@ const FieldTemplate = _ref => {
     readonly,
     required,
     rawErrors = [],
-    rawHelp,
+    errors,
+    help,
     rawDescription,
     schema,
+    uiSchema,
     registry
   } = _ref;
+  const uiOptions = utils.getUiOptions(uiSchema);
+  const WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
 
   if (hidden) {
     return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -473,7 +478,7 @@ const FieldTemplate = _ref => {
     }, children);
   }
 
-  return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditional, {
+  return /*#__PURE__*/React__default["default"].createElement(WrapIfAdditionalTemplate, {
     classNames: classNames,
     disabled: disabled,
     id: id,
@@ -483,6 +488,7 @@ const FieldTemplate = _ref => {
     readonly: readonly,
     required: required,
     schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   }, /*#__PURE__*/React__default["default"].createElement(FormControl__default["default"], {
     fullWidth: true,
@@ -491,19 +497,7 @@ const FieldTemplate = _ref => {
   }, 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)));
+  }, rawDescription) : null, errors, help));
 };
 
 const ObjectFieldTemplate = _ref => {
@@ -534,11 +528,14 @@ const ObjectFieldTemplate = _ref => {
     id: idSchema.$id + "-title",
     title: title,
     required: required,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), (uiOptions.description || description) && /*#__PURE__*/React__default["default"].createElement(DescriptionFieldTemplate, {
     id: idSchema.$id + "-description",
     description: uiOptions.description || description,
+    schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   }), /*#__PURE__*/React__default["default"].createElement(Grid__default["default"], {
     container: true,
@@ -563,7 +560,8 @@ const ObjectFieldTemplate = _ref => {
   }, /*#__PURE__*/React__default["default"].createElement(AddButton, {
     className: "object-property-expand",
     onClick: onAddClick(schema),
-    disabled: disabled || readonly
+    disabled: disabled || readonly,
+    uiSchema: uiSchema
   })))));
 };
 
@@ -602,6 +600,81 @@ const TitleField = _ref => {
   }, title), /*#__PURE__*/React__default["default"].createElement(Divider__default["default"], null));
 };
 
+const WrapIfAdditionalTemplate = _ref => {
+  let {
+    children,
+    classNames,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    registry
+  } = _ref;
+  // Button templates are not overridden in the uiSchema
+  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);
+  }
+
+  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),
+    uiSchema: uiSchema
+  })));
+};
+
 var Templates = {
   ArrayFieldItemTemplate,
   ArrayFieldTemplate,
@@ -615,9 +688,12 @@ var Templates = {
   },
   DescriptionFieldTemplate: DescriptionField,
   ErrorListTemplate: ErrorList,
+  FieldErrorTemplate,
+  FieldHelpTemplate,
   FieldTemplate,
   ObjectFieldTemplate,
-  TitleFieldTemplate: TitleField
+  TitleFieldTemplate: TitleField,
+  WrapIfAdditionalTemplate
 };
 
 const CheckboxWidget = props => {
@@ -661,6 +737,7 @@ const CheckboxWidget = props => {
   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,
@@ -750,11 +827,12 @@ const CheckboxesWidget = _ref => {
   }, label || schema.title), /*#__PURE__*/React__default["default"].createElement(FormGroup__default["default"], {
     id: id,
     row: !!inline
-  }, enumOptions.map((option, index) => {
+  }, Array.isArray(enumOptions) && enumOptions.map((option, index) => {
     const checked = value.indexOf(option.value) !== -1;
-    const itemDisabled = enumDisabled && enumDisabled.indexOf(option.value) != -1;
+    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     const checkbox = /*#__PURE__*/React__default["default"].createElement(Checkbox__default["default"], {
-      id: id + "_" + index,
+      id: id + "-" + option.value,
+      name: id,
       checked: checked,
       disabled: disabled || itemDisabled || readonly,
       autoFocus: autofocus && index === 0,
@@ -764,7 +842,7 @@ const CheckboxesWidget = _ref => {
     });
     return /*#__PURE__*/React__default["default"].createElement(FormControlLabel__default["default"], {
       control: checkbox,
-      key: index,
+      key: option.value,
       label: option.label
     });
   })));
@@ -853,22 +931,23 @@ const RadioWidget = _ref => {
     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;
+  }, Array.isArray(enumOptions) && enumOptions.map(option => {
+    const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
     const 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: id + "-" + option.value,
+        color: "primary"
       }),
       label: "" + option.label,
       value: "" + option.value,
-      key: i,
+      key: option.value,
       disabled: disabled || itemDisabled || readonly
     });
     return radio;
@@ -893,6 +972,7 @@ const RangeWidget = _ref => {
     value,
     label,
     id,
+    name: id,
     ...utils.rangeSpec(schema)
   };
 
@@ -983,6 +1063,7 @@ const SelectWidget = _ref => {
 
   return /*#__PURE__*/React__default["default"].createElement(TextField__default["default"], {
     id: id,
+    name: id,
     label: label || schema.title,
     select: true,
     value: typeof value === "undefined" ? emptyValue : value,