@rjsf/mui 5.9.0 → 5.11.1

package/dist/mui.esm.js

@@ -30,46 +30,22 @@ import RadioGroup from '@mui/material/RadioGroup';
 import Slider from '@mui/material/Slider';
 import MenuItem from '@mui/material/MenuItem';
 
-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 registry = _ref.registry,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
-  var translateString = registry.translateString;
-  return jsx(IconButton, _extends({
-    title: translateString(TranslatableString.AddItemButton)
-  }, props, {
+function AddButton({
+  uiSchema,
+  registry,
+  ...props
+}) {
+  const {
+    translateString
+  } = registry;
+  return jsx(IconButton, {
+    title: translateString(TranslatableString.AddItemButton),
+    ...props,
     color: 'primary',
     children: jsx(AddIcon, {})
-  }));
+  });
 }
 
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
@@ -77,26 +53,29 @@ function AddButton(_ref) {
  * @param props - The `ArrayFieldTemplateItemType` props for the component
  */
 function ArrayFieldItemTemplate(props) {
-  var children = props.children,
-    disabled = props.disabled,
-    hasToolbar = props.hasToolbar,
-    hasCopy = props.hasCopy,
-    hasMoveDown = props.hasMoveDown,
-    hasMoveUp = props.hasMoveUp,
-    hasRemove = props.hasRemove,
-    index = props.index,
-    onCopyIndexClick = props.onCopyIndexClick,
-    onDropIndexClick = props.onDropIndexClick,
-    onReorderClick = props.onReorderClick,
-    readonly = props.readonly,
-    uiSchema = props.uiSchema,
-    registry = props.registry;
-  var _registry$templates$B = registry.templates.ButtonTemplates,
-    CopyButton = _registry$templates$B.CopyButton,
-    MoveDownButton = _registry$templates$B.MoveDownButton,
-    MoveUpButton = _registry$templates$B.MoveUpButton,
-    RemoveButton = _registry$templates$B.RemoveButton;
-  var btnStyle = {
+  const {
+    children,
+    disabled,
+    hasToolbar,
+    hasCopy,
+    hasMoveDown,
+    hasMoveUp,
+    hasRemove,
+    index,
+    onCopyIndexClick,
+    onDropIndexClick,
+    onReorderClick,
+    readonly,
+    uiSchema,
+    registry
+  } = props;
+  const {
+    CopyButton,
+    MoveDownButton,
+    MoveUpButton,
+    RemoveButton
+  } = registry.templates.ButtonTemplates;
+  const btnStyle = {
     flex: 1,
     paddingLeft: 6,
     paddingRight: 6,
@@ -153,29 +132,34 @@ function ArrayFieldItemTemplate(props) {
   });
 }
 
-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 = getUiOptions(uiSchema);
-  var ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
-  var ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
-  var ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
+  const {
+    canAdd,
+    disabled,
+    idSchema,
+    uiSchema,
+    items,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
+  const ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
+  const ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
-  var AddButton = registry.templates.ButtonTemplates.AddButton;
+  const {
+    ButtonTemplates: {
+      AddButton
+    }
+  } = registry.templates;
   return jsx(Paper, {
     elevation: 2,
     children: jsxs(Box, {
@@ -195,11 +179,12 @@ function ArrayFieldTemplate(props) {
         registry: registry
       }), jsxs(Grid, {
         container: true,
-        children: [items && items.map(function (_ref) {
-          var key = _ref.key,
-            itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$3);
-          return jsx(ArrayFieldItemTemplate, _extends({}, itemProps), key);
-        }), canAdd && jsx(Grid, {
+        children: [items && items.map(({
+          key,
+          ...itemProps
+        }) => jsx(ArrayFieldItemTemplate, {
+          ...itemProps
+        }, key)), canAdd && jsx(Grid, {
           container: true,
           justifyContent: 'flex-end',
           children: jsx(Grid, {
@@ -216,14 +201,12 @@ function ArrayFieldTemplate(props) {
             })
           })
         })]
-      }, "array-item-list-" + idSchema.$id)]
+      }, `array-item-list-${idSchema.$id}`)]
     })
   });
 }
 
-var _excluded$2 = ["id", "name", "placeholder", "required", "readonly", "disabled", "type", "label", "hideLabel", "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', 'time'];
+const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
 /** 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.
@@ -231,77 +214,91 @@ var TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
  * @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,
-    hideLabel = props.hideLabel,
-    value = props.value,
-    onChange = props.onChange,
-    onChangeOverride = props.onChangeOverride,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    autofocus = props.autofocus,
-    options = props.options,
-    schema = props.schema,
-    _props$rawErrors = props.rawErrors,
-    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-    InputLabelProps = props.InputLabelProps,
-    textFieldProps = _objectWithoutPropertiesLoose(props, _excluded$2);
-  var inputProps = getInputProps(schema, type, options);
+  const {
+    id,
+    name,
+    // remove this from textFieldProps
+    placeholder,
+    required,
+    readonly,
+    disabled,
+    type,
+    label,
+    hideLabel,
+    value,
+    onChange,
+    onChangeOverride,
+    onBlur,
+    onFocus,
+    autofocus,
+    options,
+    schema,
+    uiSchema,
+    rawErrors = [],
+    formContext,
+    registry,
+    InputLabelProps,
+    ...textFieldProps
+  } = props;
+  const inputProps = 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: examplesId(id)
-    } : undefined)
-  }, rest);
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange(value === '' ? options.emptyValue : value);
-  };
-  var _onBlur = function _onBlur(_ref2) {
-    var value = _ref2.target.value;
-    return onBlur(id, value);
-  };
-  var _onFocus = function _onFocus(_ref3) {
-    var value = _ref3.target.value;
-    return onFocus(id, value);
+  const {
+    step,
+    min,
+    max,
+    ...rest
+  } = inputProps;
+  const otherProps = {
+    inputProps: {
+      step,
+      min,
+      max,
+      ...(schema.examples ? {
+        list: examplesId(id)
+      } : undefined)
+    },
+    ...rest
   };
-  var DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? _extends({}, InputLabelProps, {
+  const _onChange = ({
+    target: {
+      value
+    }
+  }) => onChange(value === '' ? options.emptyValue : value);
+  const _onBlur = ({
+    target: {
+      value
+    }
+  }) => onBlur(id, value);
+  const _onFocus = ({
+    target: {
+      value
+    }
+  }) => onFocus(id, value);
+  const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? {
+    ...InputLabelProps,
     shrink: true
-  }) : InputLabelProps;
+  } : InputLabelProps;
   return jsxs(Fragment, {
-    children: [jsx(TextField, _extends({
+    children: [jsx(TextField, {
       id: id,
       name: id,
       placeholder: placeholder,
       label: labelValue(label || undefined, hideLabel, false),
       autoFocus: autofocus,
       required: required,
-      disabled: disabled || readonly
-    }, otherProps, {
+      disabled: disabled || readonly,
+      ...otherProps,
       value: value || value === 0 ? value : '',
       error: rawErrors.length > 0,
       onChange: onChangeOverride || _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
-      InputLabelProps: DisplayInputLabelProps
-    }, textFieldProps, {
+      InputLabelProps: DisplayInputLabelProps,
+      ...textFieldProps,
       "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
-    })), Array.isArray(schema.examples) && jsx("datalist", {
+    }), Array.isArray(schema.examples) && jsx("datalist", {
       id: examplesId(id),
-      children: schema.examples.concat(schema["default"] && !schema.examples.includes(schema["default"]) ? [schema["default"]] : []).map(function (example) {
+      children: schema.examples.concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : []).map(example => {
         return jsx("option", {
           value: example
         }, example);
@@ -315,8 +312,10 @@ function BaseInputTemplate(props) {
  * @param props - The `DescriptionFieldProps` for this component
  */
 function DescriptionField(props) {
-  var id = props.id,
-    description = props.description;
+  const {
+    id,
+    description
+  } = props;
   if (description) {
     return jsx(Typography, {
       id: id,
@@ -334,10 +333,13 @@ function DescriptionField(props) {
  *
  * @param props - The `ErrorListProps` for this component
  */
-function ErrorList(_ref) {
-  var errors = _ref.errors,
-    registry = _ref.registry;
-  var translateString = registry.translateString;
+function ErrorList({
+  errors,
+  registry
+}) {
+  const {
+    translateString
+  } = registry;
   return jsx(Paper, {
     elevation: 2,
     children: jsxs(Box, {
@@ -348,7 +350,7 @@ function ErrorList(_ref) {
         children: translateString(TranslatableString.ErrorsLabel)
       }), jsx(List, {
         dense: true,
-        children: errors.map(function (error, i) {
+        children: errors.map((error, i) => {
           return jsxs(ListItem, {
             children: [jsx(ListItemIcon, {
               children: jsx(ErrorIcon, {
@@ -364,60 +366,81 @@ function ErrorList(_ref) {
   });
 }
 
-var _excluded$1 = ["icon", "color", "uiSchema", "registry"],
-  _excluded2 = ["iconType"];
 function MuiIconButton(props) {
-  var icon = props.icon,
-    color = props.color,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded$1);
-  return jsx(IconButton, _extends({}, otherProps, {
+  const {
+    icon,
+    color,
+    uiSchema,
+    registry,
+    ...otherProps
+  } = props;
+  return jsx(IconButton, {
+    ...otherProps,
     size: 'small',
     color: color,
     children: icon
-  }));
+  });
 }
 function CopyButton(props) {
-  var translateString = props.registry.translateString;
-  return jsx(MuiIconButton, _extends({
-    title: translateString(TranslatableString.CopyButton)
-  }, props, {
+  const {
+    registry: {
+      translateString
+    }
+  } = props;
+  return jsx(MuiIconButton, {
+    title: translateString(TranslatableString.CopyButton),
+    ...props,
     icon: jsx(CopyIcon, {
       fontSize: 'small'
     })
-  }));
+  });
 }
 function MoveDownButton(props) {
-  var translateString = props.registry.translateString;
-  return jsx(MuiIconButton, _extends({
-    title: translateString(TranslatableString.MoveDownButton)
-  }, props, {
+  const {
+    registry: {
+      translateString
+    }
+  } = props;
+  return jsx(MuiIconButton, {
+    title: translateString(TranslatableString.MoveDownButton),
+    ...props,
     icon: jsx(ArrowDownwardIcon, {
       fontSize: 'small'
     })
-  }));
+  });
 }
 function MoveUpButton(props) {
-  var translateString = props.registry.translateString;
-  return jsx(MuiIconButton, _extends({
-    title: translateString(TranslatableString.MoveUpButton)
-  }, props, {
+  const {
+    registry: {
+      translateString
+    }
+  } = props;
+  return jsx(MuiIconButton, {
+    title: translateString(TranslatableString.MoveUpButton),
+    ...props,
     icon: jsx(ArrowUpwardIcon, {
       fontSize: 'small'
     })
-  }));
+  });
 }
 function RemoveButton(props) {
-  var iconType = props.iconType,
-    otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
-  var translateString = otherProps.registry.translateString;
-  return jsx(MuiIconButton, _extends({
-    title: translateString(TranslatableString.RemoveButton)
-  }, otherProps, {
+  const {
+    iconType,
+    ...otherProps
+  } = props;
+  const {
+    registry: {
+      translateString
+    }
+  } = otherProps;
+  return jsx(MuiIconButton, {
+    title: translateString(TranslatableString.RemoveButton),
+    ...otherProps,
     color: 'error',
     icon: jsx(RemoveIcon, {
       fontSize: iconType === 'default' ? undefined : 'small'
     })
-  }));
+  });
 }
 
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
@@ -425,17 +448,18 @@ function RemoveButton(props) {
  * @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;
+  const {
+    errors = [],
+    idSchema
+  } = props;
   if (errors.length === 0) {
     return null;
   }
-  var id = errorId(idSchema);
+  const id = errorId(idSchema);
   return jsx(List, {
     dense: true,
     disablePadding: true,
-    children: errors.map(function (error, i) {
+    children: errors.map((error, i) => {
       return jsx(ListItem, {
         disableGutters: true,
         children: jsx(FormHelperText, {
@@ -452,12 +476,14 @@ function FieldErrorTemplate(props) {
  * @param props - The `FieldHelpProps` to be rendered
  */
 function FieldHelpTemplate(props) {
-  var idSchema = props.idSchema,
-    help = props.help;
+  const {
+    idSchema,
+    help
+  } = props;
   if (!help) {
     return null;
   }
-  var id = helpId(idSchema);
+  const id = helpId(idSchema);
   return jsx(FormHelperText, {
     id: id,
     children: help
@@ -470,29 +496,30 @@ function FieldHelpTemplate(props) {
  * @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,
-    description = props.description,
-    rawDescription = props.rawDescription,
-    schema = props.schema,
-    uiSchema = props.uiSchema,
-    registry = props.registry;
-  var uiOptions = getUiOptions(uiSchema);
-  var WrapIfAdditionalTemplate = getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
+  const {
+    id,
+    children,
+    classNames,
+    style,
+    disabled,
+    displayLabel,
+    hidden,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    rawErrors = [],
+    errors,
+    help,
+    description,
+    rawDescription,
+    schema,
+    uiSchema,
+    registry
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const WrapIfAdditionalTemplate = getTemplate('WrapIfAdditionalTemplate', registry, uiOptions);
   if (hidden) {
     return jsx("div", {
       style: {
@@ -534,23 +561,29 @@ function FieldTemplate(props) {
  * @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 = getUiOptions(uiSchema);
-  var TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
-  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
+  const {
+    description,
+    title,
+    properties,
+    required,
+    disabled,
+    readonly,
+    uiSchema,
+    idSchema,
+    schema,
+    formData,
+    onAddClick,
+    registry
+  } = props;
+  const uiOptions = getUiOptions(uiSchema);
+  const TitleFieldTemplate = getTemplate('TitleFieldTemplate', registry, uiOptions);
+  const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, uiOptions);
   // Button templates are not overridden in the uiSchema
-  var AddButton = registry.templates.ButtonTemplates.AddButton;
+  const {
+    ButtonTemplates: {
+      AddButton
+    }
+  } = registry.templates;
   return jsxs(Fragment, {
     children: [title && jsx(TitleFieldTemplate, {
       id: titleId(idSchema),
@@ -571,20 +604,17 @@ function ObjectFieldTemplate(props) {
       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 : jsx(Grid, {
-            item: true,
-            xs: 12,
-            style: {
-              marginBottom: '10px'
-            },
-            children: element.content
-          }, index)
-        );
-      }), canExpand(schema, uiSchema, formData) && jsx(Grid, {
+      children: [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 : jsx(Grid, {
+        item: true,
+        xs: 12,
+        style: {
+          marginBottom: '10px'
+        },
+        children: element.content
+      }, index)), canExpand(schema, uiSchema, formData) && jsx(Grid, {
         container: true,
         justifyContent: 'flex-end',
         children: jsx(Grid, {
@@ -604,25 +634,26 @@ function ObjectFieldTemplate(props) {
 
 /** The `SubmitButton` renders a button that represent the `Submit` action on a form
  */
-function SubmitButton(_ref) {
-  var uiSchema = _ref.uiSchema;
-  var _getSubmitButtonOptio = getSubmitButtonOptions(uiSchema),
-    submitText = _getSubmitButtonOptio.submitText,
-    norender = _getSubmitButtonOptio.norender,
-    _getSubmitButtonOptio2 = _getSubmitButtonOptio.props,
-    submitButtonProps = _getSubmitButtonOptio2 === void 0 ? {} : _getSubmitButtonOptio2;
+function SubmitButton({
+  uiSchema
+}) {
+  const {
+    submitText,
+    norender,
+    props: submitButtonProps = {}
+  } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
   return jsx(Box, {
     marginTop: 3,
-    children: jsx(Button, _extends({
+    children: jsx(Button, {
       type: 'submit',
       variant: 'contained',
-      color: 'primary'
-    }, submitButtonProps, {
+      color: 'primary',
+      ...submitButtonProps,
       children: submitText
-    }))
+    })
   });
 }
 
@@ -630,9 +661,10 @@ function SubmitButton(_ref) {
  *
  * @param props - The `TitleFieldProps` for this component
  */
-function TitleField(_ref) {
-  var id = _ref.id,
-    title = _ref.title;
+function TitleField({
+  id,
+  title
+}) {
   return jsxs(Box, {
     id: id,
     mb: 1,
@@ -650,26 +682,32 @@ function TitleField(_ref) {
  * @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;
-  var templates = registry.templates,
-    translateString = registry.translateString;
+  const {
+    children,
+    classNames,
+    style,
+    disabled,
+    id,
+    label,
+    onDropPropertyClick,
+    onKeyChange,
+    readonly,
+    required,
+    schema,
+    uiSchema,
+    registry
+  } = props;
+  const {
+    templates,
+    translateString
+  } = registry;
   // Button templates are not overridden in the uiSchema
-  var RemoveButton = templates.ButtonTemplates.RemoveButton;
-  var keyLabel = translateString(TranslatableString.KeyLabel, [label]);
-  var additional = (ADDITIONAL_PROPERTY_FLAG in schema);
-  var btnStyle = {
+  const {
+    RemoveButton
+  } = templates.ButtonTemplates;
+  const keyLabel = translateString(TranslatableString.KeyLabel, [label]);
+  const additional = (ADDITIONAL_PROPERTY_FLAG in schema);
+  const btnStyle = {
     flex: 1,
     paddingLeft: 6,
     paddingRight: 6,
@@ -682,10 +720,9 @@ function WrapIfAdditionalTemplate(props) {
       children: children
     });
   }
-  var handleBlur = function handleBlur(_ref) {
-    var target = _ref.target;
-    return onKeyChange(target.value);
-  };
+  const handleBlur = ({
+    target
+  }) => onKeyChange(target.value);
   return jsxs(Grid, {
     container: true,
     alignItems: 'center',
@@ -701,8 +738,8 @@ function WrapIfAdditionalTemplate(props) {
         label: keyLabel,
         defaultValue: label,
         disabled: disabled || readonly,
-        id: id + "-key",
-        name: id + "-key",
+        id: `${id}-key`,
+        name: `${id}-key`,
         onBlur: !readonly ? handleBlur : undefined,
         type: 'text'
       })
@@ -721,30 +758,30 @@ function WrapIfAdditionalTemplate(props) {
         registry: registry
       })
     })]
-  }, id + "-key");
+  }, `${id}-key`);
 }
 
 function generateTemplates() {
   return {
-    ArrayFieldItemTemplate: ArrayFieldItemTemplate,
-    ArrayFieldTemplate: ArrayFieldTemplate,
-    BaseInputTemplate: BaseInputTemplate,
+    ArrayFieldItemTemplate,
+    ArrayFieldTemplate,
+    BaseInputTemplate,
     ButtonTemplates: {
-      AddButton: AddButton,
-      CopyButton: CopyButton,
-      MoveDownButton: MoveDownButton,
-      MoveUpButton: MoveUpButton,
-      RemoveButton: RemoveButton,
-      SubmitButton: SubmitButton
+      AddButton,
+      CopyButton,
+      MoveDownButton,
+      MoveUpButton,
+      RemoveButton,
+      SubmitButton
     },
     DescriptionFieldTemplate: DescriptionField,
     ErrorListTemplate: ErrorList,
-    FieldErrorTemplate: FieldErrorTemplate,
-    FieldHelpTemplate: FieldHelpTemplate,
-    FieldTemplate: FieldTemplate,
-    ObjectFieldTemplate: ObjectFieldTemplate,
+    FieldErrorTemplate,
+    FieldHelpTemplate,
+    FieldTemplate,
+    ObjectFieldTemplate,
     TitleFieldTemplate: TitleField,
-    WrapIfAdditionalTemplate: WrapIfAdditionalTemplate
+    WrapIfAdditionalTemplate
   };
 }
 var Templates = /*#__PURE__*/generateTemplates();
@@ -755,39 +792,39 @@ var Templates = /*#__PURE__*/generateTemplates();
  * @param props - The `WidgetProps` for this component
  */
 function CheckboxWidget(props) {
-  var _options$description;
-  var schema = props.schema,
-    id = props.id,
-    value = props.value,
-    disabled = props.disabled,
-    readonly = props.readonly,
-    _props$label = props.label,
-    label = _props$label === void 0 ? '' : _props$label,
-    hideLabel = props.hideLabel,
-    autofocus = props.autofocus,
-    onChange = props.onChange,
-    onBlur = props.onBlur,
-    onFocus = props.onFocus,
-    registry = props.registry,
-    options = props.options,
-    uiSchema = props.uiSchema;
-  var DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
+  const {
+    schema,
+    id,
+    value,
+    disabled,
+    readonly,
+    label = '',
+    hideLabel,
+    autofocus,
+    onChange,
+    onBlur,
+    onFocus,
+    registry,
+    options,
+    uiSchema
+  } = props;
+  const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
   // 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
-  var required = schemaRequiresTrueValue(schema);
-  var _onChange = function _onChange(_, checked) {
-    return onChange(checked);
-  };
-  var _onBlur = function _onBlur(_ref) {
-    var value = _ref.target.value;
-    return onBlur(id, value);
-  };
-  var _onFocus = function _onFocus(_ref2) {
-    var value = _ref2.target.value;
-    return onFocus(id, value);
-  };
-  var description = (_options$description = options.description) != null ? _options$description : schema.description;
+  const required = schemaRequiresTrueValue(schema);
+  const _onChange = (_, checked) => onChange(checked);
+  const _onBlur = ({
+    target: {
+      value
+    }
+  }) => onBlur(id, value);
+  const _onFocus = ({
+    target: {
+      value
+    }
+  }) => onFocus(id, value);
+  const description = options.description ?? schema.description;
   return jsxs(Fragment, {
     children: [!hideLabel && !!description && jsx(DescriptionFieldTemplate, {
       id: descriptionId(id),
@@ -818,42 +855,48 @@ function CheckboxWidget(props) {
  *
  * @param props - The `WidgetProps` for this component
  */
-function CheckboxesWidget(_ref) {
-  var label = _ref.label,
-    hideLabel = _ref.hideLabel,
-    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,
-    emptyValue = options.emptyValue;
-  var checkboxesValues = Array.isArray(value) ? value : [value];
-  var _onChange = function _onChange(index) {
-    return function (_ref2) {
-      var checked = _ref2.target.checked;
-      if (checked) {
-        onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
-      } else {
-        onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
-      }
-    };
-  };
-  var _onBlur = function _onBlur(_ref3) {
-    var value = _ref3.target.value;
-    return onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  };
-  var _onFocus = function _onFocus(_ref4) {
-    var value = _ref4.target.value;
-    return onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
+function CheckboxesWidget({
+  label,
+  hideLabel,
+  id,
+  disabled,
+  options,
+  value,
+  autofocus,
+  readonly,
+  required,
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const {
+    enumOptions,
+    enumDisabled,
+    inline,
+    emptyValue
+  } = options;
+  const checkboxesValues = Array.isArray(value) ? value : [value];
+  const _onChange = index => ({
+    target: {
+      checked
+    }
+  }) => {
+    if (checked) {
+      onChange(enumOptionsSelectValue(index, checkboxesValues, enumOptions));
+    } else {
+      onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
+    }
   };
+  const _onBlur = ({
+    target: {
+      value
+    }
+  }) => onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
+  const _onFocus = ({
+    target: {
+      value
+    }
+  }) => onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
   return jsxs(Fragment, {
     children: [labelValue(jsx(FormLabel, {
       required: required,
@@ -862,10 +905,10 @@ function CheckboxesWidget(_ref) {
     }), hideLabel), jsx(FormGroup, {
       id: id,
       row: !!inline,
-      children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-        var checked = enumOptionsIsSelected(option.value, checkboxesValues);
-        var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-        var checkbox = jsx(Checkbox, {
+      children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+        const checked = enumOptionsIsSelected(option.value, checkboxesValues);
+        const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        const checkbox = jsx(Checkbox, {
           id: optionId(id, index),
           name: id,
           checked: checked,
@@ -890,35 +933,37 @@ function CheckboxesWidget(_ref) {
  *
  * @param props - The `WidgetProps` for this component
  */
-function RadioWidget(_ref) {
-  var _enumOptionsIndexForV;
-  var id = _ref.id,
-    options = _ref.options,
-    value = _ref.value,
-    required = _ref.required,
-    disabled = _ref.disabled,
-    readonly = _ref.readonly,
-    label = _ref.label,
-    hideLabel = _ref.hideLabel,
-    onChange = _ref.onChange,
-    onBlur = _ref.onBlur,
-    onFocus = _ref.onFocus;
-  var enumOptions = options.enumOptions,
-    enumDisabled = options.enumDisabled,
-    emptyValue = options.emptyValue;
-  var _onChange = function _onChange(_, value) {
-    return onChange(enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  };
-  var _onBlur = function _onBlur(_ref2) {
-    var value = _ref2.target.value;
-    return onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  };
-  var _onFocus = function _onFocus(_ref3) {
-    var value = _ref3.target.value;
-    return onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
-  };
-  var row = options ? options.inline : false;
-  var selectedIndex = (_enumOptionsIndexForV = enumOptionsIndexForValue(value, enumOptions)) != null ? _enumOptionsIndexForV : null;
+function RadioWidget({
+  id,
+  options,
+  value,
+  required,
+  disabled,
+  readonly,
+  label,
+  hideLabel,
+  onChange,
+  onBlur,
+  onFocus
+}) {
+  const {
+    enumOptions,
+    enumDisabled,
+    emptyValue
+  } = options;
+  const _onChange = (_, value) => onChange(enumOptionsValueForIndex(value, enumOptions, emptyValue));
+  const _onBlur = ({
+    target: {
+      value
+    }
+  }) => onBlur(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
+  const _onFocus = ({
+    target: {
+      value
+    }
+  }) => onFocus(id, enumOptionsValueForIndex(value, enumOptions, emptyValue));
+  const row = options ? options.inline : false;
+  const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? null;
   return jsxs(Fragment, {
     children: [labelValue(jsx(FormLabel, {
       required: required,
@@ -933,9 +978,9 @@ function RadioWidget(_ref) {
       onBlur: _onBlur,
       onFocus: _onFocus,
       "aria-describedby": ariaDescribedByIds(id),
-      children: Array.isArray(enumOptions) && enumOptions.map(function (option, index) {
-        var itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-        var radio = jsx(FormControlLabel, {
+      children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+        const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+        const radio = jsx(FormControlLabel, {
           control: jsx(Radio, {
             name: id,
             id: optionId(id, index),
@@ -957,96 +1002,112 @@ function RadioWidget(_ref) {
  * @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,
-    hideLabel = props.hideLabel,
-    id = props.id;
-  var sliderProps = _extends({
-    value: value,
-    label: label,
-    id: id,
-    name: id
-  }, rangeSpec(schema));
-  var _onChange = function _onChange(_, value) {
-    onChange(value != null ? value : options.emptyValue);
-  };
-  var _onBlur = function _onBlur(_ref) {
-    var value = _ref.target.value;
-    return onBlur(id, value);
+  const {
+    value,
+    readonly,
+    disabled,
+    onBlur,
+    onFocus,
+    options,
+    schema,
+    onChange,
+    required,
+    label,
+    hideLabel,
+    id
+  } = props;
+  const sliderProps = {
+    value,
+    label,
+    id,
+    name: id,
+    ...rangeSpec(schema)
   };
-  var _onFocus = function _onFocus(_ref2) {
-    var value = _ref2.target.value;
-    return onFocus(id, value);
+  const _onChange = (_, value) => {
+    onChange(value ?? options.emptyValue);
   };
+  const _onBlur = ({
+    target: {
+      value
+    }
+  }) => onBlur(id, value);
+  const _onFocus = ({
+    target: {
+      value
+    }
+  }) => onFocus(id, value);
   return jsxs(Fragment, {
     children: [labelValue(jsx(FormLabel, {
       required: required,
       htmlFor: id,
       children: label || undefined
-    }), hideLabel), jsx(Slider, _extends({
+    }), hideLabel), jsx(Slider, {
       disabled: disabled || readonly,
       onChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
-      valueLabelDisplay: 'auto'
-    }, sliderProps, {
+      valueLabelDisplay: 'auto',
+      ...sliderProps,
       "aria-describedby": ariaDescribedByIds(id)
-    }))]
+    })]
   });
 }
 
-var _excluded = ["schema", "id", "name", "options", "label", "hideLabel", "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 id = _ref.id,
-    options = _ref.options,
-    label = _ref.label,
-    hideLabel = _ref.hideLabel,
-    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,
-    optEmptyVal = options.emptyValue;
+function SelectWidget({
+  schema,
+  id,
+  name,
+  // remove this from textFieldProps
+  options,
+  label,
+  hideLabel,
+  required,
+  disabled,
+  placeholder,
+  readonly,
+  value,
+  multiple,
+  autofocus,
+  onChange,
+  onBlur,
+  onFocus,
+  rawErrors = [],
+  registry,
+  uiSchema,
+  hideError,
+  formContext,
+  ...textFieldProps
+}) {
+  const {
+    enumOptions,
+    enumDisabled,
+    emptyValue: optEmptyVal
+  } = options;
   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(enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
-  };
-  var _onBlur = function _onBlur(_ref3) {
-    var value = _ref3.target.value;
-    return onBlur(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
-  };
-  var _onFocus = function _onFocus(_ref4) {
-    var value = _ref4.target.value;
-    return onFocus(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
-  };
-  var selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
-  return jsx(TextField, _extends({
+  const emptyValue = multiple ? [] : '';
+  const isEmpty = typeof value === 'undefined' || multiple && value.length < 1 || !multiple && value === emptyValue;
+  const _onChange = ({
+    target: {
+      value
+    }
+  }) => onChange(enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
+  const _onBlur = ({
+    target: {
+      value
+    }
+  }) => onBlur(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
+  const _onFocus = ({
+    target: {
+      value
+    }
+  }) => onFocus(id, enumOptionsValueForIndex(value, enumOptions, optEmptyVal));
+  const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, multiple);
+  return jsx(TextField, {
     id: id,
     name: id,
     label: labelValue(label || undefined, hideLabel, false),
@@ -1058,28 +1119,31 @@ function SelectWidget(_ref) {
     error: rawErrors.length > 0,
     onChange: _onChange,
     onBlur: _onBlur,
-    onFocus: _onFocus
-  }, textFieldProps, {
+    onFocus: _onFocus,
+    ...textFieldProps,
     select // Apply this and the following props after the potential overrides defined in textFieldProps
     : true,
-    InputLabelProps: _extends({}, textFieldProps.InputLabelProps, {
+    InputLabelProps: {
+      ...textFieldProps.InputLabelProps,
       shrink: !isEmpty
-    }),
-    SelectProps: _extends({}, textFieldProps.SelectProps, {
-      multiple: multiple
-    }),
+    },
+    SelectProps: {
+      ...textFieldProps.SelectProps,
+      multiple
+    },
     "aria-describedby": 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;
+    children: Array.isArray(enumOptions) && enumOptions.map(({
+      value,
+      label
+    }, i) => {
+      const disabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;
       return jsx(MenuItem, {
         value: String(i),
         disabled: disabled,
         children: label
       }, i);
     })
-  }));
+  });
 }
 
 /** The `TextareaWidget` is a widget for rendering input fields as textarea.
@@ -1087,27 +1151,30 @@ function SelectWidget(_ref) {
  * @param props - The `WidgetProps` for this component
  */
 function TextareaWidget(props) {
-  var options = props.options,
-    registry = props.registry;
-  var BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
-  var rows = 5;
+  const {
+    options,
+    registry
+  } = props;
+  const BaseInputTemplate = getTemplate('BaseInputTemplate', registry, options);
+  let rows = 5;
   if (typeof options.rows === 'string' || typeof options.rows === 'number') {
     rows = options.rows;
   }
-  return jsx(BaseInputTemplate, _extends({}, props, {
+  return jsx(BaseInputTemplate, {
+    ...props,
     multiline: true,
     rows: rows
-  }));
+  });
 }
 
 function generateWidgets() {
   return {
-    CheckboxWidget: CheckboxWidget,
-    CheckboxesWidget: CheckboxesWidget,
-    RadioWidget: RadioWidget,
-    RangeWidget: RangeWidget,
-    SelectWidget: SelectWidget,
-    TextareaWidget: TextareaWidget
+    CheckboxWidget,
+    CheckboxesWidget,
+    RadioWidget,
+    RangeWidget,
+    SelectWidget,
+    TextareaWidget
   };
 }
 var Widgets = /*#__PURE__*/generateWidgets();