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

package/README.md

@@ -65,6 +65,7 @@ Exports `chakra-ui` theme, fields and widgets for `react-jsonschema-form`.
 ### Prerequisites
 
 - `@chakra-ui/react >= 1.7.0`
+- `chakra-react-select >= 3.3.8`
 - `react >= 17.0.0`
 - `framer-motion >= 5.0.0`
 - `@rjsf/core >= 2.0.0`

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

@@ -151,12 +151,14 @@ var ArrayFieldTemplate = function ArrayFieldTemplate(props) {
   return React__default["default"].createElement(react.Box, null, React__default["default"].createElement(ArrayFieldTitleTemplate, {
     idSchema: idSchema,
     title: uiOptions.title || title,
+    schema: schema,
     uiSchema: uiSchema,
     required: required,
     registry: registry
-  }), (uiOptions.description || schema.description) && React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
+  }), React__default["default"].createElement(ArrayFieldDescriptionTemplate, {
     idSchema: idSchema,
     description: uiOptions.description || schema.description,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), React__default["default"].createElement(react.Grid, {
@@ -461,11 +463,14 @@ var ObjectFieldTemplate = function ObjectFieldTemplate(props) {
     id: idSchema.$id + "-title",
     title: uiOptions.title || title,
     required: required,
+    schema: schema,
     uiSchema: uiSchema,
     registry: registry
   }), (uiOptions.description || description) && React__default["default"].createElement(DescriptionFieldTemplate, {
     id: idSchema.$id + "-description",
     description: uiOptions.description || description,
+    schema: schema,
+    uiSchema: uiSchema,
     registry: registry
   }), React__default["default"].createElement(react.Grid, {
     gap: description ? 2 : 6,
@@ -1044,10 +1049,7 @@ var SelectWidget = function SelectWidget(props) {
       enumDisabled = options.enumDisabled;
   var chakraProps = getChakra({
     uiSchema: uiSchema
-  }); // TODO: Default emptyValue should be string when multi select is implemented
-  // const emptyValue = multiple ? [] : "";
-
-  var emptyValue = "";
+  });
 
   var _onMultiChange = function _onMultiChange(e) {
     return onChange(utils.processSelectValue(schema, e.map(function (v) {
@@ -1055,21 +1057,37 @@ var SelectWidget = function SelectWidget(props) {
     }), options));
   };
 
-  var _onChange = function _onChange(_ref) {
-    var value = _ref.target.value;
-    return onChange(utils.processSelectValue(schema, value, options));
+  var _onChange = function _onChange(e) {
+    return onChange(utils.processSelectValue(schema, e.value, options));
   };
 
-  var _onBlur = function _onBlur(_ref2) {
-    var value = _ref2.target.value;
+  var _onBlur = function _onBlur(_ref) {
+    var value = _ref.target.value;
     return onBlur(id, utils.processSelectValue(schema, value, options));
   };
 
-  var _onFocus = function _onFocus(_ref3) {
-    var value = _ref3.target.value;
+  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;
+    _valueLabelMap[value] = label;
+    option["isDisabled"] = enumDisabled && enumDisabled.indexOf(value) != -1;
+  });
+  var isMultiple = typeof multiple !== "undefined" && Boolean(enumOptions);
+  var formValue = isMultiple ? (value || []).map(function (v) {
+    return {
+      label: _valueLabelMap[v] || v,
+      value: v
+    };
+  }) : {
+    label: _valueLabelMap[value] || value || "",
+    value: value || ""
+  };
   return React__default["default"].createElement(react.FormControl, _extends({
     mb: 1
   }, chakraProps, {
@@ -1078,40 +1096,20 @@ var SelectWidget = function SelectWidget(props) {
     isReadOnly: readonly,
     isInvalid: rawErrors && rawErrors.length > 0
   }), (label || schema.title) && React__default["default"].createElement(react.FormLabel, {
-    htmlFor: typeof multiple !== "undefined" && enumOptions ? undefined : id
-  }, label || schema.title), typeof multiple !== "undefined" && enumOptions ? React__default["default"].createElement(chakraReactSelect.Select, {
+    htmlFor: isMultiple ? undefined : id
+  }, label || schema.title), React__default["default"].createElement(chakraReactSelect.Select, {
     inputId: id,
     name: id,
-    isMulti: true,
+    isMulti: isMultiple,
     options: enumOptions,
     placeholder: placeholder,
     closeMenuOnSelect: false,
-    onChange: _onMultiChange,
-    value: value.map(function (v) {
-      return {
-        label: v,
-        value: v
-      };
-    })
-  }) : React__default["default"].createElement(react.Select, {
-    id: id,
-    name: id,
-    placeholder: placeholder !== "" ? placeholder : " ",
-    value: typeof value === "undefined" ? emptyValue : value.toString(),
-    autoFocus: autofocus,
     onBlur: _onBlur,
-    onChange: _onChange,
-    onFocus: _onFocus
-  }, enumOptions.map(function (_ref4, i) {
-    var value = _ref4.value,
-        label = _ref4.label;
-    var disabled = enumDisabled && enumDisabled.indexOf(value) != -1;
-    return React__default["default"].createElement("option", {
-      key: i,
-      value: value,
-      disabled: disabled
-    }, label);
-  })));
+    onChange: isMultiple ? _onMultiChange : _onChange,
+    onFocus: _onFocus,
+    autoFocus: autofocus,
+    value: formValue
+  }));
 };
 
 var TextareaWidget = function TextareaWidget(_ref) {