@rjsf/chakra-ui 5.0.0-beta.11 → 5.0.0-beta.13

package/dist/chakra-ui.cjs.development.js

@@ -41,39 +41,32 @@ 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$2 = ["uiSchema"];
-
 var AddButton = function AddButton(_ref) {
   var props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
-
   return React__default["default"].createElement(react.Button, _extends({
     leftIcon: React__default["default"].createElement(icons.AddIcon, null)
   }, props), "Add Item");
@@ -81,21 +74,21 @@ var AddButton = function AddButton(_ref) {
 
 var ArrayFieldItemTemplate = 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;
+    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;
+    MoveDownButton = _registry$templates$B.MoveDownButton,
+    MoveUpButton = _registry$templates$B.MoveUpButton,
+    RemoveButton = _registry$templates$B.RemoveButton;
   var onRemoveClick = React.useMemo(function () {
     return onDropIndexClick(index);
   }, [index, onDropIndexClick]);
@@ -129,24 +122,23 @@ var ArrayFieldItemTemplate = function ArrayFieldItemTemplate(props) {
 };
 
 var _excluded$1 = ["key"];
-
 var ArrayFieldTemplate = 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;
+    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 ArrayFieldTitleTemplate = utils.getTemplate("ArrayFieldTitleTemplate", registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(ArrayFieldTitleTemplate, {
     idSchema: idSchema,
@@ -165,8 +157,7 @@ var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
     key: "array-item-list-" + idSchema.$id
   }, React__default["default"].createElement(react.GridItem, null, items.length > 0 && items.map(function (_ref) {
     var key = _ref.key,
-        itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
-
+      itemProps = _objectWithoutPropertiesLoose(_ref, _excluded$1);
     return React__default["default"].createElement(ArrayFieldItemTemplate, _extends({
       key: key
     }, itemProps));
@@ -184,7 +175,7 @@ var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
 
 function getChakra(_ref) {
   var _ref$uiSchema = _ref.uiSchema,
-      uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
+    uiSchema = _ref$uiSchema === void 0 ? {} : _ref$uiSchema;
   var chakraProps = uiSchema["ui:options"] && uiSchema["ui:options"].chakra || {};
   Object.keys(chakraProps).forEach(function (key) {
     /**
@@ -203,43 +194,39 @@ function getChakra(_ref) {
 
 var BaseInputTemplate = function BaseInputTemplate(props) {
   var id = props.id,
-      type = props.type,
-      value = props.value,
-      label = props.label,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      options = props.options,
-      required = props.required,
-      readonly = props.readonly,
-      rawErrors = props.rawErrors,
-      autofocus = props.autofocus,
-      placeholder = props.placeholder,
-      disabled = props.disabled,
-      registry = props.registry;
+    type = props.type,
+    value = props.value,
+    label = props.label,
+    schema = props.schema,
+    uiSchema = props.uiSchema,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    options = props.options,
+    required = props.required,
+    readonly = props.readonly,
+    rawErrors = props.rawErrors,
+    autofocus = props.autofocus,
+    placeholder = props.placeholder,
+    disabled = props.disabled,
+    registry = props.registry;
   var inputProps = utils.getInputProps(schema, type, options);
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
   var schemaUtils = registry.schemaUtils;
-
   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);
   };
-
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   return React__namespace.createElement(react.FormControl, _extends({
     mb: 1
@@ -274,12 +261,10 @@ var BaseInputTemplate = function BaseInputTemplate(props) {
 
 var DescriptionField = function DescriptionField(_ref) {
   var description = _ref.description,
-      id = _ref.id;
-
+    id = _ref.id;
   if (!description) {
     return null;
   }
-
   if (typeof description === "string") {
     return React__default["default"].createElement(react.Text, {
       id: id,
@@ -287,7 +272,6 @@ var DescriptionField = function DescriptionField(_ref) {
       mb: 4
     }, description);
   }
-
   return React__default["default"].createElement(React__default["default"].Fragment, null, description);
 };
 
@@ -313,11 +297,9 @@ var _excluded = ["icon", "iconType", "uiSchema"];
  * props used in Template:
  * icon, tabIndex, disabled, onClick
  */
-
 var ChakraIconButton = /*#__PURE__*/React.memo(function (props) {
   var icon = props.icon,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
+    otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   return React__default["default"].createElement(react.IconButton, _extends({
     "aria-label": props.title
   }, otherProps, {
@@ -351,16 +333,13 @@ 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;
-
+    errors = _props$errors === void 0 ? [] : _props$errors,
+    idSchema = props.idSchema;
   if (errors.length === 0) {
     return null;
   }
-
   var id = idSchema.$id + "__error";
   return React__default["default"].createElement(react.List, null, errors.map(function (error, i) {
     return React__default["default"].createElement(react.ListItem, {
@@ -375,15 +354,12 @@ function FieldErrorTemplate(props) {
  *
  * @param props - The `FieldHelpProps` to be rendered
  */
-
 function FieldHelpTemplate(props) {
   var idSchema = props.idSchema,
-      help = props.help;
-
+    help = props.help;
   if (!help) {
     return null;
   }
-
   var id = idSchema.$id + "__help";
   return React__default["default"].createElement(react.FormHelperText, {
     id: id
@@ -392,27 +368,26 @@ function FieldHelpTemplate(props) {
 
 var FieldTemplate = function FieldTemplate(props) {
   var id = props.id,
-      children = props.children,
-      classNames = props.classNames,
-      disabled = props.disabled,
-      displayLabel = props.displayLabel,
-      hidden = props.hidden,
-      label = props.label,
-      onDropPropertyClick = props.onDropPropertyClick,
-      onKeyChange = props.onKeyChange,
-      readonly = props.readonly,
-      registry = props.registry,
-      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;
+    children = props.children,
+    classNames = props.classNames,
+    disabled = props.disabled,
+    displayLabel = props.displayLabel,
+    hidden = props.hidden,
+    label = props.label,
+    onDropPropertyClick = props.onDropPropertyClick,
+    onKeyChange = props.onKeyChange,
+    readonly = props.readonly,
+    registry = props.registry,
+    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;
   var uiOptions = utils.getUiOptions(uiSchema);
   var WrapIfAdditionalTemplate = utils.getTemplate("WrapIfAdditionalTemplate", registry, uiOptions);
-
   if (hidden) {
     return React__default["default"].createElement("div", {
       style: {
@@ -420,7 +395,6 @@ var FieldTemplate = function FieldTemplate(props) {
       }
     }, children);
   }
-
   return React__default["default"].createElement(WrapIfAdditionalTemplate, {
     classNames: classNames,
     disabled: disabled,
@@ -443,21 +417,21 @@ var FieldTemplate = function FieldTemplate(props) {
 
 var ObjectFieldTemplate = 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;
+    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 DescriptionFieldTemplate = utils.getTemplate("DescriptionFieldTemplate", registry, uiOptions);
+  // Button templates are not overridden in the uiSchema
   var AddButton = registry.templates.ButtonTemplates.AddButton;
   return React__default["default"].createElement(React__default["default"].Fragment, null, (uiOptions.title || title) && React__default["default"].createElement(TitleFieldTemplate, {
     id: idSchema.$id + "-title",
@@ -491,16 +465,13 @@ var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
 
 var SubmitButton = function SubmitButton(_ref) {
   var uiSchema = _ref.uiSchema;
-
   var _getSubmitButtonOptio = utils.getSubmitButtonOptions(uiSchema),
-      submitText = _getSubmitButtonOptio.submitText,
-      norender = _getSubmitButtonOptio.norender,
-      submitButtonProps = _getSubmitButtonOptio.props;
-
+    submitText = _getSubmitButtonOptio.submitText,
+    norender = _getSubmitButtonOptio.norender,
+    submitButtonProps = _getSubmitButtonOptio.props;
   if (norender) {
     return null;
   }
-
   return React__default["default"].createElement(react.Box, {
     marginTop: 3
   }, React__default["default"].createElement(react.Button, _extends({
@@ -511,7 +482,7 @@ var SubmitButton = function SubmitButton(_ref) {
 
 var TitleField = function TitleField(_ref) {
   var id = _ref.id,
-      title = _ref.title;
+    title = _ref.title;
   return React__default["default"].createElement(react.Box, {
     id: id,
     mt: 1,
@@ -523,34 +494,30 @@ var TitleField = function TitleField(_ref) {
 
 var WrapIfAdditionalTemplate = function WrapIfAdditionalTemplate(props) {
   var children = props.children,
-      classNames = props.classNames,
-      disabled = props.disabled,
-      id = props.id,
-      label = props.label,
-      onDropPropertyClick = props.onDropPropertyClick,
-      onKeyChange = props.onKeyChange,
-      readonly = props.readonly,
-      registry = props.registry,
-      required = props.required,
-      schema = props.schema,
-      uiSchema = props.uiSchema; // Button templates are not overridden in the uiSchema
-
+    classNames = props.classNames,
+    disabled = props.disabled,
+    id = props.id,
+    label = props.label,
+    onDropPropertyClick = props.onDropPropertyClick,
+    onKeyChange = props.onKeyChange,
+    readonly = props.readonly,
+    registry = props.registry,
+    required = props.required,
+    schema = props.schema,
+    uiSchema = props.uiSchema;
+  // Button templates are not overridden in the uiSchema
   var RemoveButton = registry.templates.ButtonTemplates.RemoveButton;
   var additional = (utils.ADDITIONAL_PROPERTY_FLAG in schema);
-
   if (!additional) {
     return React__default["default"].createElement("div", {
       className: classNames
     }, children);
   }
-
   var keyLabel = label + " Key";
-
   var handleBlur = function handleBlur(_ref) {
     var target = _ref.target;
     return onKeyChange(target.value);
   };
-
   return React__default["default"].createElement(react.Grid, {
     key: id + "-key",
     className: classNames,
@@ -599,85 +566,69 @@ var Templates = {
 
 var rangeOptions = function rangeOptions(start, stop) {
   var options = [];
-
   for (var i = start; i <= stop; i++) {
     options.push({
       value: i,
       label: utils.pad(i, 2)
     });
   }
-
   return options;
 };
-
 var readyForChange = function readyForChange(state) {
   return Object.keys(state).every(function (key) {
     return typeof state[key] !== "undefined" && state[key] !== -1;
   });
 };
-
 var AltDateWidget = function AltDateWidget(props) {
   var autofocus = props.autofocus,
-      disabled = props.disabled,
-      id = props.id,
-      onBlur = props.onBlur,
-      onChange = props.onChange,
-      onFocus = props.onFocus,
-      options = props.options,
-      readonly = props.readonly,
-      registry = props.registry,
-      showTime = props.showTime,
-      value = props.value;
+    disabled = props.disabled,
+    id = props.id,
+    onBlur = props.onBlur,
+    onChange = props.onChange,
+    onFocus = props.onFocus,
+    options = props.options,
+    readonly = props.readonly,
+    registry = props.registry,
+    showTime = props.showTime,
+    value = props.value;
   var SelectWidget = registry.widgets.SelectWidget;
-
   var _useState = React.useState(utils.parseDateString(value, showTime)),
-      state = _useState[0],
-      setState = _useState[1];
-
+    state = _useState[0],
+    setState = _useState[1];
   React.useEffect(function () {
     setState(utils.parseDateString(value, showTime));
   }, [showTime, value]);
-
   var handleChange = function handleChange(property, nextValue) {
     var _extends2;
-
     var nextState = _extends({}, state, (_extends2 = {}, _extends2[property] = typeof nextValue === "undefined" ? -1 : nextValue, _extends2));
-
     if (readyForChange(nextState)) {
       onChange(utils.toDateString(nextState, showTime));
     } else {
       setState(nextState);
     }
   };
-
   var handleNow = function handleNow(event) {
     event.preventDefault();
-
     if (disabled || readonly) {
       return;
     }
-
     var nextState = utils.parseDateString(new Date().toJSON(), showTime);
     onChange(utils.toDateString(nextState, showTime));
   };
-
   var handleClear = function handleClear(event) {
     event.preventDefault();
-
     if (disabled || readonly) {
       return;
     }
-
     onChange(undefined);
   };
-
   var dateElementProps = function dateElementProps() {
     var year = state.year,
-        month = state.month,
-        day = state.day,
-        hour = state.hour,
-        minute = state.minute,
-        second = state.second;
+      month = state.month,
+      day = state.day,
+      hour = state.hour,
+      minute = state.minute,
+      second = state.second;
     var data = [{
       type: "year",
       range: options.yearsRange,
@@ -691,7 +642,6 @@ var AltDateWidget = function AltDateWidget(props) {
       range: [1, 31],
       value: day
     }];
-
     if (showTime) {
       data.push({
         type: "hour",
@@ -707,10 +657,8 @@ var AltDateWidget = function AltDateWidget(props) {
         value: second
       });
     }
-
     return data;
   };
-
   var renderDateElement = function renderDateElement(elemProps) {
     var value = elemProps.value ? elemProps.value : undefined;
     return React__default["default"].createElement(SelectWidget, _extends({}, elemProps, {
@@ -729,7 +677,6 @@ var AltDateWidget = function AltDateWidget(props) {
       value: value
     }));
   };
-
   return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(react.Box, {
     display: "flex",
     flexWrap: "wrap",
@@ -766,7 +713,6 @@ var AltDateWidget = function AltDateWidget(props) {
     }
   }, "Clear")));
 };
-
 AltDateWidget.defaultProps = {
   autofocus: false,
   disabled: false,
@@ -783,41 +729,36 @@ var AltDateTimeWidget = function AltDateTimeWidget(props) {
     showTime: true
   }));
 };
-
 AltDateTimeWidget.defaultProps = /*#__PURE__*/_extends({}, AltDateWidget.defaultProps, {
   showTime: true
 });
 
 var CheckboxWidget = function CheckboxWidget(props) {
   var id = props.id,
-      value = props.value,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      required = props.required,
-      label = props.label,
-      uiSchema = props.uiSchema;
+    value = props.value,
+    disabled = props.disabled,
+    readonly = props.readonly,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    required = props.required,
+    label = props.label,
+    uiSchema = props.uiSchema;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
   var _onChange = function _onChange(_ref) {
     var checked = _ref.target.checked;
     return onChange(checked);
   };
-
   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);
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -833,6 +774,7 @@ var CheckboxWidget = function CheckboxWidget(props) {
   }, label && React__default["default"].createElement(react.Text, null, 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
@@ -842,27 +784,27 @@ var CheckboxWidget = function CheckboxWidget(props) {
 // const deselectValue = (value, selected) => {
 //   return selected.filter((v) => v !== value);
 // };
-
 var CheckboxesWidget = function CheckboxesWidget(props) {
   var id = props.id,
-      disabled = props.disabled,
-      options = props.options,
-      value = props.value,
-      readonly = props.readonly,
-      _onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      required = props.required,
-      label = props.label,
-      uiSchema = props.uiSchema,
-      _props$rawErrors = props.rawErrors,
-      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-      schema = props.schema;
+    disabled = props.disabled,
+    options = props.options,
+    value = props.value,
+    readonly = props.readonly,
+    _onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    required = props.required,
+    label = props.label,
+    uiSchema = props.uiSchema,
+    _props$rawErrors = props.rawErrors,
+    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+    schema = props.schema;
   var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled;
+    enumDisabled = options.enumDisabled;
   var chakraProps = getChakra({
     uiSchema: uiSchema
-  }); // const _onChange = option => ({ target: { checked } }) => {
+  });
+  // const _onChange = option => ({ target: { checked } }) => {
   //   const all = enumOptions.map(({ value }) => value)
   //   if (checked) {
   //     onChange(selectValue(option.value, value, all))
@@ -870,17 +812,14 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
   //     onChange(deselectValue(option.value, value))
   //   }
   // }
-
   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 row = options ? options.inline : false;
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
@@ -917,33 +856,30 @@ var CheckboxesWidget = function CheckboxesWidget(props) {
 
 var RadioWidget = 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,
-      uiSchema = _ref.uiSchema;
+    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,
+    uiSchema = _ref.uiSchema;
   var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled;
+    enumDisabled = options.enumDisabled;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
   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);
   };
-
   var row = options ? options.inline : false;
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
@@ -975,44 +911,38 @@ var RadioWidget = function RadioWidget(_ref) {
 
 var RangeWidget = function RangeWidget(_ref) {
   var value = _ref.value,
-      readonly = _ref.readonly,
-      disabled = _ref.disabled,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      options = _ref.options,
-      schema = _ref.schema,
-      uiSchema = _ref.uiSchema,
-      onChange = _ref.onChange,
-      label = _ref.label,
-      id = _ref.id,
-      registry = _ref.registry;
+    readonly = _ref.readonly,
+    disabled = _ref.disabled,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    options = _ref.options,
+    schema = _ref.schema,
+    uiSchema = _ref.uiSchema,
+    onChange = _ref.onChange,
+    label = _ref.label,
+    id = _ref.id,
+    registry = _ref.registry;
   var schemaUtils = registry.schemaUtils;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
   var sliderWidgetProps = _extends({
     value: value,
     label: label,
     id: id
   }, utils.rangeSpec(schema));
-
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
-
   var _onChange = function _onChange(value) {
     return onChange(value === undefined ? 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);
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps), displayLabel ? React__default["default"].createElement(react.FormLabel, {
@@ -1029,52 +959,47 @@ var RangeWidget = function RangeWidget(_ref) {
 
 var SelectWidget = function SelectWidget(props) {
   var schema = props.schema,
-      id = props.id,
-      options = props.options,
-      label = props.label,
-      placeholder = props.placeholder,
-      multiple = props.multiple,
-      required = props.required,
-      disabled = props.disabled,
-      readonly = props.readonly,
-      value = props.value,
-      autofocus = props.autofocus,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      _props$rawErrors = props.rawErrors,
-      rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
-      uiSchema = props.uiSchema;
+    id = props.id,
+    options = props.options,
+    label = props.label,
+    placeholder = props.placeholder,
+    multiple = props.multiple,
+    required = props.required,
+    disabled = props.disabled,
+    readonly = props.readonly,
+    value = props.value,
+    autofocus = props.autofocus,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    _props$rawErrors = props.rawErrors,
+    rawErrors = _props$rawErrors === void 0 ? [] : _props$rawErrors,
+    uiSchema = props.uiSchema;
   var enumOptions = options.enumOptions,
-      enumDisabled = options.enumDisabled;
+    enumDisabled = options.enumDisabled;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
   var _onMultiChange = function _onMultiChange(e) {
     return onChange(utils.processSelectValue(schema, e.map(function (v) {
       return v.value;
     }), options));
   };
-
   var _onChange = function _onChange(e) {
     return onChange(utils.processSelectValue(schema, e.value, options));
   };
-
   var _onBlur = function _onBlur(_ref) {
     var value = _ref.target.value;
     return onBlur(id, utils.processSelectValue(schema, value, options));
   };
-
   var _onFocus = function _onFocus(_ref2) {
     var value = _ref2.target.value;
     return onFocus(id, utils.processSelectValue(schema, value, options));
   };
-
   var _valueLabelMap = {};
   enumOptions.map(function (option) {
     var value = option.value,
-        label = option.label;
+      label = option.label;
     _valueLabelMap[value] = label;
     option["isDisabled"] = enumDisabled && enumDisabled.indexOf(value) != -1;
   });
@@ -1103,7 +1028,7 @@ var SelectWidget = function SelectWidget(props) {
     isMulti: isMultiple,
     options: enumOptions,
     placeholder: placeholder,
-    closeMenuOnSelect: false,
+    closeMenuOnSelect: !isMultiple,
     onBlur: _onBlur,
     onChange: isMultiple ? _onMultiChange : _onChange,
     onFocus: _onFocus,
@@ -1114,42 +1039,38 @@ var SelectWidget = function SelectWidget(props) {
 
 var TextareaWidget = function TextareaWidget(_ref) {
   var id = _ref.id,
-      placeholder = _ref.placeholder,
-      value = _ref.value,
-      label = _ref.label,
-      disabled = _ref.disabled,
-      autofocus = _ref.autofocus,
-      readonly = _ref.readonly,
-      onBlur = _ref.onBlur,
-      onFocus = _ref.onFocus,
-      onChange = _ref.onChange,
-      options = _ref.options,
-      schema = _ref.schema,
-      uiSchema = _ref.uiSchema,
-      required = _ref.required,
-      rawErrors = _ref.rawErrors,
-      registry = _ref.registry;
+    placeholder = _ref.placeholder,
+    value = _ref.value,
+    label = _ref.label,
+    disabled = _ref.disabled,
+    autofocus = _ref.autofocus,
+    readonly = _ref.readonly,
+    onBlur = _ref.onBlur,
+    onFocus = _ref.onFocus,
+    onChange = _ref.onChange,
+    options = _ref.options,
+    schema = _ref.schema,
+    uiSchema = _ref.uiSchema,
+    required = _ref.required,
+    rawErrors = _ref.rawErrors,
+    registry = _ref.registry;
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
   var schemaUtils = registry.schemaUtils;
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
-
   var _onChange = function _onChange(_ref2) {
     var value = _ref2.target.value;
     return onChange(value === "" ? options.emptyValue : value);
   };
-
   var _onBlur = function _onBlur(_ref3) {
     var value = _ref3.target.value;
     return onBlur(id, value);
   };
-
   var _onFocus = function _onFocus(_ref4) {
     var value = _ref4.target.value;
     return onFocus(id, value);
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -1173,38 +1094,34 @@ var TextareaWidget = function TextareaWidget(_ref) {
 
 var UpDownWidget = function UpDownWidget(props) {
   var id = props.id,
-      schema = props.schema,
-      uiSchema = props.uiSchema,
-      readonly = props.readonly,
-      disabled = props.disabled,
-      label = props.label,
-      value = props.value,
-      onChange = props.onChange,
-      onBlur = props.onBlur,
-      onFocus = props.onFocus,
-      rawErrors = props.rawErrors,
-      required = props.required,
-      registry = props.registry;
+    schema = props.schema,
+    uiSchema = props.uiSchema,
+    readonly = props.readonly,
+    disabled = props.disabled,
+    label = props.label,
+    value = props.value,
+    onChange = props.onChange,
+    onBlur = props.onBlur,
+    onFocus = props.onFocus,
+    rawErrors = props.rawErrors,
+    required = props.required,
+    registry = props.registry;
   var schemaUtils = registry.schemaUtils;
   var displayLabel = schemaUtils.getDisplayLabel(schema, uiSchema) && (!!label || !!schema.title);
   var chakraProps = getChakra({
     uiSchema: uiSchema
   });
-
   var _onChange = function _onChange(value) {
     return onChange(value);
   };
-
   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);
   };
-
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -1265,7 +1182,6 @@ var Form = /*#__PURE__*/core.withTheme(Theme);
 
   It is located at the bottom of the styles string.
  */
-
 var CSSReset = function CSSReset() {
   return React__namespace.createElement(react$1.Global, {
     styles: "\n      html {\n        line-height: 1.5;\n        -webkit-text-size-adjust: 100%;\n        font-family: system-ui, sans-serif;\n        -webkit-font-smoothing: antialiased;\n        text-rendering: optimizeLegibility;\n        -moz-osx-font-smoothing: grayscale;\n        touch-action: manipulation;\n      }\n      body {\n        position: relative;\n        min-height: 100%;\n        font-feature-settings: 'kern';\n      }\n      *,\n      *::before,\n      *::after {\n        border-width: 0;\n        border-style: solid;\n        box-sizing: border-box;\n      }\n      main {\n        display: block;\n      }\n      hr {\n        border-top-width: 1px;\n        box-sizing: content-box;\n        height: 0;\n        overflow: visible;\n      }\n      pre,\n      code,\n      kbd,\n      samp {\n        font-family: SFMono-Regular,  Menlo, Monaco, Consolas, monospace;\n        font-size: 1em;\n      }\n      a {\n        background-color: transparent;\n        color: inherit;\n        text-decoration: inherit;\n      }\n      abbr[title] {\n        border-bottom: none;\n        text-decoration: underline;\n        -webkit-text-decoration: underline dotted;\n        text-decoration: underline dotted;\n      }\n      b,\n      strong {\n        font-weight: bold;\n      }\n      small {\n        font-size: 80%;\n      }\n      sub,\n      sup {\n        font-size: 75%;\n        line-height: 0;\n        position: relative;\n        vertical-align: baseline;\n      }\n      sub {\n        bottom: -0.25em;\n      }\n      sup {\n        top: -0.5em;\n      }\n      img {\n        border-style: none;\n      }\n      button,\n      input,\n      optgroup,\n      select,\n      textarea {\n        font-family: inherit;\n        font-size: 100%;\n        line-height: 1.15;\n        margin: 0;\n      }\n      button,\n      input {\n        overflow: visible;\n      }\n      button,\n      select {\n        text-transform: none;\n      }\n      button::-moz-focus-inner,\n      [type=\"button\"]::-moz-focus-inner,\n      [type=\"reset\"]::-moz-focus-inner,\n      [type=\"submit\"]::-moz-focus-inner {\n        border-style: none;\n        padding: 0;\n      }\n      fieldset {\n        padding: 0.35em 0.75em 0.625em;\n      }\n      legend {\n        box-sizing: border-box;\n        color: inherit;\n        display: table;\n        max-width: 100%;\n        padding: 0;\n        white-space: normal;\n      }\n      progress {\n        vertical-align: baseline;\n      }\n      textarea {\n        overflow: auto;\n      }\n      [type=\"checkbox\"],\n      [type=\"radio\"] {\n        box-sizing: border-box;\n        padding: 0;\n      }\n      [type=\"number\"]::-webkit-inner-spin-button,\n      [type=\"number\"]::-webkit-outer-spin-button {\n        -webkit-appearance: none !important;\n      }\n      input[type=\"number\"] {\n        -moz-appearance: textfield;\n      }\n      [type=\"search\"] {\n        -webkit-appearance: textfield;\n        outline-offset: -2px;\n      }\n      [type=\"search\"]::-webkit-search-decoration {\n        -webkit-appearance: none !important;\n      }\n      ::-webkit-file-upload-button {\n        -webkit-appearance: button;\n        font: inherit;\n      }\n      details {\n        display: block;\n      }\n      summary {\n        display: list-item;\n      }\n      template {\n        display: none;\n      }\n      [hidden] {\n        display: none !important;\n      }\n      body,\n      blockquote,\n      dl,\n      dd,\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6,\n      hr,\n      figure,\n      p,\n      pre {\n        margin: 0;\n      }\n      button {\n        background: transparent;\n        padding: 0;\n      }\n      fieldset {\n        margin: 0;\n        padding: 0;\n      }\n      ol,\n      ul {\n        margin: 0;\n        padding: 0;\n      }\n      textarea {\n        resize: vertical;\n      }\n      button,\n      [role=\"button\"] {\n        cursor: pointer;\n      }\n      button::-moz-focus-inner {\n        border: 0 !important;\n      }\n      table {\n        border-collapse: collapse;\n      }\n      h1,\n      h2,\n      h3,\n      h4,\n      h5,\n      h6 {\n        font-size: inherit;\n        font-weight: inherit;\n      }\n      button,\n      input,\n      optgroup,\n      select,\n      textarea {\n        padding: 0;\n        line-height: inherit;\n        color: inherit;\n      }\n      img,\n      svg,\n      video,\n      canvas,\n      audio,\n      iframe,\n      embed,\n      object {\n        display: block;\n      }\n      img,\n      video {\n        max-width: 100%;\n        height: auto;\n      }\n      [data-js-focus-visible] :focus:not([data-focus-visible-added]) {\n        outline: none;\n        box-shadow: none;\n      }\n      select::-ms-expand {\n        display: none;\n      }\n      input {\n        border-width: revert;\n        border-color: revert;\n        border-style: revert;\n      }\n      .array-item > hr {\n        margin-top: 16px;\n        margin-bottom: 16px;\n      }\n    "
@@ -1286,7 +1202,6 @@ var CSSReset = function CSSReset() {
  * From: https://codesandbox.io/s/p98y9o7jz0?file=/src/frame-provider.js:0-650
  * Also see: https://github.com/emotion-js/emotion/issues/760#issuecomment-404353706
  */
-
 var memoizedCreateCacheWithContainer = /*#__PURE__*/weakMemoize__default["default"](function (container) {
   var newCache = createCache__default["default"]({
     container: container,