@app-studio/web 0.7.7 → 0.7.9

package/dist/web.esm.js

@@ -3802,7 +3802,7 @@ var useSelectState = function useSelectState(_ref) {
   var placeholder = _ref.placeholder,
     isMulti = _ref.isMulti,
     options = _ref.options;
-  var defaultValue = placeholder ? isMulti ? [] : '' : options[0];
+  var defaultValue = placeholder ? isMulti ? [] : '' : options[0].value;
   var _React$useState = React.useState(true),
     hide = _React$useState[0],
     setHide = _React$useState[1];
@@ -3878,14 +3878,15 @@ var Item = function Item(_ref) {
     onMouseEnter: handleHover,
     onMouseLeave: handleHover,
     onClick: function onClick() {
-      return handleOptionClick(option);
+      return handleOptionClick(option.value);
     },
     backgroundColor: isHovered ? 'trueGray.100' : 'transparent'
   }, props), React.createElement(Text, Object.assign({
     fontSize: Typography.fontSizes[size]
-  }, style), option));
+  }, style), option.label));
 };
 var SelectBox = function SelectBox(_ref2) {
+  var _option$label;
   var _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'md' : _ref2$size,
     _ref2$styles = _ref2.styles,
@@ -3897,7 +3898,8 @@ var SelectBox = function SelectBox(_ref2) {
     isDisabled = _ref2.isDisabled,
     placeholder = _ref2.placeholder,
     _ref2$removeOption = _ref2.removeOption,
-    removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption;
+    removeOption = _ref2$removeOption === void 0 ? function () {} : _ref2$removeOption,
+    options = _ref2.options;
   var fieldStyles = _extends({
     margin: 0,
     width: '95%',
@@ -3910,7 +3912,10 @@ var SelectBox = function SelectBox(_ref2) {
     color: isDisabled ? 'color.trueGray.600' : 'color.blueGray.700',
     cursor: isDisabled ? 'not-allowed' : 'auto'
   }, styles['field'], styles['text']);
-  return React.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : React.createElement(React.Fragment, null, typeof value === 'string' ? value : value && value.length > 0 && React.createElement(Horizontal, {
+  var option = options.find(function (option) {
+    return option.value === value;
+  });
+  return React.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : React.createElement(React.Fragment, null, typeof value === 'string' ? (_option$label = option == null ? void 0 : option.label) != null ? _option$label : value : value && value.length > 0 && React.createElement(Horizontal, {
     gap: 6
   }, value.map(function (option) {
     return React.createElement(MultiSelect, {
@@ -3952,9 +3957,9 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     multiple: isMulti
   }, props), options.map(function (option) {
     return React.createElement("option", {
-      key: option,
-      value: option
-    }, option);
+      key: option.value,
+      value: option.value
+    }, option.label);
   }));
 };
 var DropDown$1 = function DropDown(_ref4) {
@@ -4011,7 +4016,7 @@ var DropDown$1 = function DropDown(_ref4) {
     }
   }, shadow, styles['dropDown']), options.map(function (option, index) {
     return React.createElement(Item, Object.assign({
-      key: option,
+      key: option.value,
       size: size,
       style: styles['text'],
       option: option,
@@ -4175,6 +4180,7 @@ var SelectView = function SelectView(_ref6) {
     isMulti: isMulti,
     onFocus: handleFocus
   }, props)), React.createElement(SelectBox, {
+    options: options,
     size: size,
     styles: styles,
     value: value,
@@ -4814,6 +4820,10 @@ var FormikCountryPicker = CountryPickerComponent$1;
 var SelectComponent$1 = function SelectComponent(props) {
   var formProps = useFormikInput(props);
   formProps.selected = formProps.value;
+  console.log({
+    formProps: formProps,
+    test: formProps.value
+  });
   var selectStates = useSelectState(props);
   return React.createElement(SelectView, Object.assign({}, selectStates, formProps));
 };