@app-studio/web 0.7.6 → 0.7.9

package/dist/components/Form/Select/Select/Select.props.d.ts

@@ -1,7 +1,7 @@
 import { CSSProperties } from 'react';
 import { Elevation } from 'src/utils/elevation';
 import { Shadow } from 'app-studio';
-import { SelectStyles, Shape, Size, Variant } from './Select.type';
+import { SelectStyles, Shape, Size, Variant, Option } from './Select.type';
 export interface SelectProps {
     /**
      * The identifier of the select field.
@@ -34,7 +34,7 @@ export interface SelectProps {
     /**
      * An array of options for the select field.
      */
-    options: Array<string>;
+    options: Option[];
     /**
      * If true, allows multiple options to be selected.
      */
@@ -112,6 +112,7 @@ export interface SelectViewProps extends SelectProps {
     setIsFocused: Function;
 }
 export interface SelectBoxProps {
+    options: Option[];
     /**
      * The option that will be selected value
      */
@@ -163,7 +164,7 @@ export interface ItemProps {
     /**
      * Option to be displayed
      */
-    option: string;
+    option: Option;
     /**
      * To set the item's fontSize
      */
@@ -209,7 +210,7 @@ export interface HiddenSelectProps {
     /**
      * List of options
      */
-    options: Array<string>;
+    options: Option[];
     /**
      * other properties
      */
@@ -227,7 +228,7 @@ export interface DropDownProps {
     /**
      * List of options
      */
-    options: Array<string>;
+    options: Option[];
     /**
      * Css styles for the select container and label
      */

package/dist/web.cjs.development.js

@@ -965,7 +965,7 @@ var ButtonView = function ButtonView(_ref) {
     filled: {
       // Defines CSS properties for 'link' variant of the button with conditional styles based on reverse state, includes text decoration.
       backgroundColor: reverse ? 'transparent' : buttonColor,
-      color: reverse ? isLight ? getColor('color.white') : buttonColor : isLight ? buttonColor : getColor('color.white'),
+      color: reverse ? isLight ? 'white' : buttonColor : isLight ? buttonColor : 'white',
       borderWidth: 1,
       borderStyle: 'solid',
       borderColor: reverse ? buttonColor : 'transparent'
@@ -992,7 +992,7 @@ var ButtonView = function ButtonView(_ref) {
     },
     ghost: {
       backgroundColor: reverse ? buttonColor : 'transparent',
-      color: reverse ? 'color.white' : buttonColor,
+      color: reverse ? 'white' : buttonColor,
       borderWidth: 1,
       borderStyle: 'solid',
       borderColor: reverse ? buttonColor : 'transparent'
@@ -3809,7 +3809,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__default.useState(true),
     hide = _React$useState[0],
     setHide = _React$useState[1];
@@ -3885,14 +3885,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__default.createElement(Text, Object.assign({
     fontSize: appStudio.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,
@@ -3904,7 +3905,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%',
@@ -3917,7 +3919,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__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? value : value && value.length > 0 && React__default.createElement(Horizontal, {
+  var option = options.find(function (option) {
+    return option.value === value;
+  });
+  return React__default.createElement(Text, Object.assign({}, fieldStyles), (value === '' || value && value.length === 0) && !!placeholder ? placeholder : React__default.createElement(React__default.Fragment, null, typeof value === 'string' ? (_option$label = option == null ? void 0 : option.label) != null ? _option$label : value : value && value.length > 0 && React__default.createElement(Horizontal, {
     gap: 6
   }, value.map(function (option) {
     return React__default.createElement(MultiSelect, {
@@ -3959,9 +3964,9 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     multiple: isMulti
   }, props), options.map(function (option) {
     return React__default.createElement("option", {
-      key: option,
-      value: option
-    }, option);
+      key: option.value,
+      value: option.value
+    }, option.label);
   }));
 };
 var DropDown$1 = function DropDown(_ref4) {
@@ -4018,7 +4023,7 @@ var DropDown$1 = function DropDown(_ref4) {
     }
   }, shadow, styles['dropDown']), options.map(function (option, index) {
     return React__default.createElement(Item, Object.assign({
-      key: option,
+      key: option.value,
       size: size,
       style: styles['text'],
       option: option,
@@ -4182,6 +4187,7 @@ var SelectView = function SelectView(_ref6) {
     isMulti: isMulti,
     onFocus: handleFocus
   }, props)), React__default.createElement(SelectBox, {
+    options: options,
     size: size,
     styles: styles,
     value: value,
@@ -4821,6 +4827,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__default.createElement(SelectView, Object.assign({}, selectStates, formProps));
 };