@app-studio/web 0.3.53 → 0.3.55

package/dist/web.cjs.development.js

@@ -1063,12 +1063,9 @@ var CheckboxView = function CheckboxView(_ref) {
   };
   var handleChange = function handleChange() {
     if (!isReadOnly && !isDisabled) {
-      if (isChecked === undefined) {
-        setIsSelected(!isSelected);
-      } else {
-        if (onChange) onChange(!isChecked);
-        if (onValueChange) onValueChange(!isChecked);
-      }
+      if (setIsSelected) setIsSelected(!isSelected);
+      if (onChange) onChange(!isChecked);
+      if (onValueChange) onValueChange(!isChecked);
     }
   };
   var checkboxStyle = {
@@ -2576,8 +2573,8 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
     newOptions = _React$useState[0],
     setNewOptions = _React$useState[1];
   var _React$useState2 = React__default.useState(placeholder != null ? placeholder : countryList[0].name),
-    selected = _React$useState2[0],
-    setSelected = _React$useState2[1];
+    value = _React$useState2[0],
+    setValue = _React$useState2[1];
   var _React$useState3 = React__default.useState(true),
     hide = _React$useState3[0],
     setHide = _React$useState3[1];
@@ -2596,8 +2593,8 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
     setIsHovered: setIsHovered,
     isFocused: isFocused,
     setIsFocused: setIsFocused,
-    selected: selected,
-    setSelected: setSelected
+    value: value,
+    setValue: setValue
   };
 };
 
@@ -2878,6 +2875,7 @@ var FieldContent = function FieldContent(_ref) {
     backgroundColor: "color.white",
     transition: "padding 0.2s ease",
     justifyContent: "space-between",
+    marginBottom: 5,
     fontSize: appStudio.Typography.fontSizes[size],
     // filter={isHovered ?  'brightness(1)':'brightness(0.97)'}
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
@@ -2940,7 +2938,7 @@ var IconSizes$3 = {
   xl: 16
 };
 
-var _excluded$n = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setSelected", "styles"];
+var _excluded$n = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isHovered", "isFocused", "isAutoFocus", "isDisabled", "isReadOnly", "shadow", "newOptions", "size", "variant", "shape", "colorScheme", "onChange", "onBlur", "setHide", "setNewOptions", "setIsHovered", "setIsFocused", "setValue", "styles"];
 var CountryList = function CountryList(props) {
   return React__default.createElement(appStudio.Element, Object.assign({
     as: "ul"
@@ -3029,7 +3027,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
   var id = _ref3.id,
     name = _ref3.name,
     label = _ref3.label,
-    selected = _ref3.selected,
+    value = _ref3.value,
     placeholder = _ref3.placeholder,
     helperText = _ref3.helperText,
     _ref3$hide = _ref3.hide,
@@ -3069,8 +3067,8 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     setIsHovered = _ref3$setIsHovered === void 0 ? function () {} : _ref3$setIsHovered,
     _ref3$setIsFocused = _ref3.setIsFocused,
     setIsFocused = _ref3$setIsFocused === void 0 ? function () {} : _ref3$setIsFocused,
-    _ref3$setSelected = _ref3.setSelected,
-    setSelected = _ref3$setSelected === void 0 ? function () {} : _ref3$setSelected,
+    _ref3$setValue = _ref3.setValue,
+    setValue = _ref3$setValue === void 0 ? function () {} : _ref3$setValue,
     _ref3$styles = _ref3.styles,
     styles = _ref3$styles === void 0 ? {
       text: {},
@@ -3092,7 +3090,8 @@ var CountryPickerView = function CountryPickerView(_ref3) {
   };
   var handleCallback = function handleCallback(option) {
     setHide(!hide);
-    setSelected(option);
+    setValue(option);
+    if (onChange) onChange(option);
   };
   var handleClick = function handleClick() {
     if (!isDisabled && !isReadOnly) {
@@ -3100,22 +3099,21 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     }
   };
   var handleChange = function handleChange(event) {
-    var selectedCountry = event.target.value;
+    var valueCountry = event.target.value;
     var filteredCountries = countryList.filter(function (country) {
-      return country.name.toLowerCase().startsWith(selectedCountry.toLowerCase());
+      return country.name.toLowerCase().startsWith(valueCountry.toLowerCase());
     });
     if (hide) setHide(false);
-    setSelected(event.target.value);
     setNewOptions(filteredCountries);
-    if (onChange) onChange(event);
+    if (onChange) onChange(valueCountry);
   };
   var handleBlur = function handleBlur(event) {
     onBlur(event);
     setIsFocused(false);
   };
-  React.useEffect(function () {
-    if (onChange) onChange(selected); // Call onChange when selectedCountry changes
-  }, [onChange, selected]);
+  // useEffect(() => {
+  //   if (onChange) onChange(value); // Call onChange when valueCountry changes
+  // }, [onChange, value]);
   var isWithLabel = !!(isFocused && label);
   var fieldStyles = _extends({
     margin: 0,
@@ -3147,7 +3145,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: selected,
+    value: value,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -3171,7 +3169,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     onBlur: handleBlur,
     onFocus: handleFocus
   }, fieldStyles, props, {
-    value: selected,
+    value: value,
     onChange: handleChange
   }))), React__default.createElement(FieldIcons, null, hide ? React__default.createElement(ArrowDownSvg, {
     size: IconSizes$3[size],
@@ -3352,7 +3350,7 @@ var DatePicker = DatePickerComponent;
 var useTextFieldState = function useTextFieldState(_ref) {
   var label = _ref.label,
     placeholder = _ref.placeholder,
-    value = _ref.value;
+    defaultValue = _ref.value;
   var _useState = React.useState(label != null ? label : placeholder),
     hint = _useState[0],
     setHint = _useState[1];
@@ -3362,9 +3360,12 @@ var useTextFieldState = function useTextFieldState(_ref) {
   var _useState3 = React.useState(false),
     isHovered = _useState3[0],
     setIsHovered = _useState3[1];
-  var _useState4 = React.useState(value || ''),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
+  var _useState4 = React.useState(defaultValue || ''),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  React.useMemo(function () {
+    setHint(isFocused && !value ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [value, isFocused, label, placeholder]);
   return {
     hint: hint,
     setHint: setHint,
@@ -3372,8 +3373,8 @@ var useTextFieldState = function useTextFieldState(_ref) {
     setIsFocused: setIsFocused,
     isHovered: isHovered,
     setIsHovered: setIsHovered,
-    inputValue: inputValue,
-    setInputValue: setInputValue
+    setValue: setValue,
+    value: value
   };
 };
 
@@ -3388,7 +3389,7 @@ var usePasswordState = function usePasswordState(props) {
   }, textFieldStates);
 };
 
-var _excluded$p = ["id", "name", "label", "value", "hint", "inputValue", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setInputValue", "onClick", "onFocus", "onBlur"];
+var _excluded$p = ["id", "name", "label", "hint", "value", "onChange", "leftChild", "rightChild", "helperText", "placeholder", "onChangeText", "shadow", "styles", "size", "shape", "variant", "colorScheme", "error", "isFocused", "isHovered", "isDisabled", "isReadOnly", "isClearable", "isAutoFocus", "setHint", "setIsFocused", "setIsHovered", "setValue", "onClick", "onFocus", "onBlur"];
 var TextFieldInput = function TextFieldInput(props) {
   return React__default.createElement(appStudio.Input, Object.assign({
     type: "text"
@@ -3399,12 +3400,11 @@ var TextFieldView = function TextFieldView(_ref) {
     name = _ref.name,
     label = _ref.label,
     hint = _ref.hint,
-    inputValue = _ref.inputValue,
+    value = _ref.value,
     onChange = _ref.onChange,
     leftChild = _ref.leftChild,
     rightChild = _ref.rightChild,
     helperText = _ref.helperText,
-    placeholder = _ref.placeholder,
     onChangeText = _ref.onChangeText,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? {} : _ref$shadow,
@@ -3438,14 +3438,12 @@ var TextFieldView = function TextFieldView(_ref) {
     isClearable = _ref$isClearable === void 0 ? true : _ref$isClearable,
     _ref$isAutoFocus = _ref.isAutoFocus,
     isAutoFocus = _ref$isAutoFocus === void 0 ? false : _ref$isAutoFocus,
-    _ref$setHint = _ref.setHint,
-    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
     _ref$setIsFocused = _ref.setIsFocused,
     setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
     _ref$setIsHovered = _ref.setIsHovered,
     setIsHovered = _ref$setIsHovered === void 0 ? function () {} : _ref$setIsHovered,
-    _ref$setInputValue = _ref.setInputValue,
-    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
+    _ref$setValue = _ref.setValue,
+    setValue = _ref$setValue === void 0 ? function () {} : _ref$setValue,
     onFocus = _ref.onFocus,
     _ref$onBlur = _ref.onBlur,
     onBlur = _ref$onBlur === void 0 ? function () {} : _ref$onBlur,
@@ -3454,9 +3452,6 @@ var TextFieldView = function TextFieldView(_ref) {
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
   var isWithLabel = !!(isFocused && label);
-  React.useMemo(function () {
-    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
-  }, [inputValue, isFocused, label, placeholder]);
   var fieldStyles = _extends({
     margin: 0,
     paddingVertical: 8,
@@ -3489,16 +3484,18 @@ var TextFieldView = function TextFieldView(_ref) {
   var handleChange = function handleChange(event) {
     if (typeof event === 'string') {
       //for ios and android
-      setInputValue(event);
+      setValue(event);
       if (onChangeText) onChangeText(event);
+      if (onChange) onChange(event);
     } else {
       //Web
-      setInputValue(event.target.value);
-      if (onChange) onChange(event);
+      setValue(event.target.value);
+      if (onChangeText) onChangeText(event.target.value);
+      if (onChange) onChange(event.target.value);
     }
   };
   var handleClear = function handleClear() {
-    setInputValue('');
+    setValue('');
     //Web
     if (onChange) {
       onBlur({
@@ -3528,7 +3525,7 @@ var TextFieldView = function TextFieldView(_ref) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: inputValue,
+    value: value,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -3545,7 +3542,6 @@ var TextFieldView = function TextFieldView(_ref) {
   }, styles), label), React__default.createElement(TextFieldInput, Object.assign({
     id: id,
     name: name,
-    value: inputValue,
     readOnly: isReadOnly,
     disabled: isDisabled,
     autoFocus: isAutoFocus,
@@ -3554,10 +3550,11 @@ var TextFieldView = function TextFieldView(_ref) {
     onBlur: handleBlur,
     autoComplete: "off"
   }, fieldStyles, props, {
+    onChange: handleChange,
+    value: value
+  }, onChange && {
     onChange: handleChange
-  }, onChangeText && {
-    onChangeText: handleChange
-  }))), (rightChild || isClearable && inputValue) && React__default.createElement(FieldIcons, null, rightChild && React__default.createElement(React__default.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && React__default.createElement(CloseSvg, {
+  }))), (rightChild || isClearable && value) && React__default.createElement(FieldIcons, null, rightChild && React__default.createElement(React__default.Fragment, null, rightChild), isClearable && value && !isReadOnly && !isDisabled && React__default.createElement(CloseSvg, {
     size: appStudio.Typography.fontSizes[size],
     color: IconColor,
     onClick: handleClear
@@ -3601,7 +3598,7 @@ var useSelectState = function useSelectState(_ref) {
   var placeholder = _ref.placeholder,
     isMulti = _ref.isMulti,
     options = _ref.options;
-  var defaultSelected = placeholder ? isMulti ? [] : '' : options[0];
+  var defaultValue = placeholder ? isMulti ? [] : '' : options[0];
   var _React$useState = React__default.useState(true),
     hide = _React$useState[0],
     setHide = _React$useState[1];
@@ -3611,12 +3608,12 @@ var useSelectState = function useSelectState(_ref) {
   var _React$useState3 = React__default.useState(false),
     isFocused = _React$useState3[0],
     setIsFocused = _React$useState3[1];
-  var _React$useState4 = React__default.useState(defaultSelected),
-    selected = _React$useState4[0],
-    setSelected = _React$useState4[1];
+  var _React$useState4 = React__default.useState(defaultValue),
+    value = _React$useState4[0],
+    setValue = _React$useState4[1];
   return {
-    selected: selected,
-    setSelected: setSelected,
+    value: value,
+    setValue: setValue,
     hide: hide,
     setHide: setHide,
     isHovered: isHovered,
@@ -3644,9 +3641,9 @@ var IconSizes$4 = {
 };
 
 var _excluded$r = ["isHovered", "setIsHovered", "option", "size", "callback"],
-  _excluded2$2 = ["id", "name", "selected", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
+  _excluded2$2 = ["id", "name", "value", "onChange", "isMulti", "isDisabled", "isReadOnly", "options"],
   _excluded3$1 = ["option", "size", "removeOption"],
-  _excluded4$1 = ["id", "name", "label", "selected", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setSelected", "setIsHovered", "setIsFocused"];
+  _excluded4$1 = ["id", "name", "label", "value", "placeholder", "helperText", "hide", "error", "isMulti", "isFocused", "isHovered", "isDisabled", "isReadOnly", "options", "shadow", "size", "colorScheme", "shape", "variant", "styles", "onChange", "setHide", "setValue", "setIsHovered", "setIsFocused"];
 var Item = function Item(_ref) {
   var isHovered = _ref.isHovered,
     setIsHovered = _ref.setIsHovered,
@@ -3685,7 +3682,7 @@ var SelectBox = function SelectBox(_ref2) {
       field: {},
       text: {}
     } : _ref2$styles,
-    selected = _ref2.selected,
+    value = _ref2.value,
     isDisabled = _ref2.isDisabled,
     placeholder = _ref2.placeholder,
     _ref2$removeOption = _ref2.removeOption,
@@ -3702,9 +3699,9 @@ 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), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : React__default.createElement(React__default.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && React__default.createElement(Horizontal, {
+  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, {
     gap: 6
-  }, selected.map(function (option) {
+  }, value.map(function (option) {
     return React__default.createElement(MultiSelect, {
       key: option,
       option: option,
@@ -3715,7 +3712,7 @@ var SelectBox = function SelectBox(_ref2) {
 var HiddenSelect = function HiddenSelect(_ref3) {
   var id = _ref3.id,
     name = _ref3.name,
-    selected = _ref3.selected,
+    value = _ref3.value,
     onChange = _ref3.onChange,
     _ref3$isMulti = _ref3.isMulti,
     isMulti = _ref3$isMulti === void 0 ? false : _ref3$isMulti,
@@ -3737,7 +3734,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     width: 0,
     height: 0,
     position: "absolute",
-    value: selected,
+    value: value,
     disabled: isDisabled,
     readOnly: isReadOnly,
     onChange: handleChange,
@@ -3834,7 +3831,7 @@ var SelectView = function SelectView(_ref6) {
   var id = _ref6.id,
     name = _ref6.name,
     label = _ref6.label,
-    selected = _ref6.selected,
+    value = _ref6.value,
     placeholder = _ref6.placeholder,
     helperText = _ref6.helperText,
     _ref6$hide = _ref6.hide,
@@ -3876,8 +3873,8 @@ var SelectView = function SelectView(_ref6) {
     onChange = _ref6$onChange === void 0 ? function () {} : _ref6$onChange,
     _ref6$setHide = _ref6.setHide,
     setHide = _ref6$setHide === void 0 ? function () {} : _ref6$setHide,
-    _ref6$setSelected = _ref6.setSelected,
-    setSelected = _ref6$setSelected === void 0 ? function () {} : _ref6$setSelected,
+    _ref6$setValue = _ref6.setValue,
+    setValue = _ref6$setValue === void 0 ? function () {} : _ref6$setValue,
     _ref6$setIsHovered = _ref6.setIsHovered,
     setIsHovered = _ref6$setIsHovered === void 0 ? function () {} : _ref6$setIsHovered,
     _ref6$setIsFocused = _ref6.setIsFocused,
@@ -3897,18 +3894,19 @@ var SelectView = function SelectView(_ref6) {
   };
   var handleCallback = React.useCallback(function (option) {
     setHide(!hide);
-    if (isMulti && Array.isArray(selected)) {
-      !selected.includes(option) && setSelected([].concat(selected, [option]));
+    if (isMulti && Array.isArray(value)) {
+      !value.includes(option) && setValue([].concat(value, [option]));
     } else {
-      setSelected(option);
+      setValue(option);
     }
-  }, [hide, isMulti, selected]);
-  var handleRemoveOption = function handleRemoveOption(selectedOption) {
-    if (Array.isArray(selected) && selected.includes(selectedOption)) {
-      var newSelected = selected.filter(function (option) {
-        return option !== selectedOption;
+    if (onChange) onChange(option);
+  }, [hide, isMulti, value]);
+  var handleRemoveOption = function handleRemoveOption(valueOption) {
+    if (Array.isArray(value) && value.includes(valueOption)) {
+      var newValue = value.filter(function (option) {
+        return option !== valueOption;
       });
-      setSelected(newSelected.length === 0 ? [] : newSelected);
+      setValue(newValue.length === 0 ? [] : newValue);
     }
   };
   return React__default.createElement(FieldContainer, {
@@ -3925,7 +3923,7 @@ var SelectView = function SelectView(_ref6) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: selected,
+    value: value,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -3944,7 +3942,7 @@ var SelectView = function SelectView(_ref6) {
     name: name,
     options: options,
     onChange: onChange,
-    selected: selected,
+    value: value,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
     isMulti: isMulti,
@@ -3952,7 +3950,7 @@ var SelectView = function SelectView(_ref6) {
   }, props)), React__default.createElement(SelectBox, {
     size: size,
     styles: styles,
-    selected: selected,
+    value: value,
     isDisabled: isDisabled,
     placeholder: placeholder,
     removeOption: handleRemoveOption
@@ -4165,7 +4163,7 @@ var SwitchView = function SwitchView(_ref) {
   var handleToggle = function handleToggle(event) {
     if (!isReadOnly) {
       setOn(!on);
-      if (onChange) onChange(event);
+      if (onChange) onChange(event.target.checked);
     }
   };
   var handleHover = function handleHover() {
@@ -4192,6 +4190,7 @@ var SwitchView = function SwitchView(_ref) {
     cursor: "pointer",
     alignItems: "center",
     borderRadius: 24,
+    marginBottom: 5,
     filter: isHovered && on ? 'brightness(0.9)' : 'brightness(1)',
     transition: "justify-content 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
     backgroundColor: isDisabled ? 'disabled' : on ? colorScheme : 'lightgray',
@@ -4211,43 +4210,44 @@ var Switch = SwitchComponent;
 var useTextAreaState = function useTextAreaState(_ref) {
   var label = _ref.label,
     placeholder = _ref.placeholder,
-    defaultValue = _ref.defaultValue,
-    value = _ref.value;
+    defaultValue = _ref.value;
   var _useState = React.useState(label != null ? label : placeholder),
     hint = _useState[0],
     setHint = _useState[1];
   var _useState2 = React.useState(false),
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
-  var _useState3 = React.useState(value || defaultValue || ''),
-    inputValue = _useState3[0],
-    setInputValue = _useState3[1];
+  var _useState3 = React.useState(defaultValue || ''),
+    value = _useState3[0],
+    setValue = _useState3[1];
   var _useState4 = React.useState(false),
     isFocused = _useState4[0],
     setIsFocused = _useState4[1];
+  React.useMemo(function () {
+    setHint(isFocused && !value ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [value, isFocused, label, placeholder]);
   return {
     hint: hint,
     setHint: setHint,
     isHovered: isHovered,
     setIsHovered: setIsHovered,
-    inputValue: inputValue,
-    setInputValue: setInputValue,
+    value: value,
+    setValue: setValue,
     isFocused: isFocused,
     setIsFocused: setIsFocused
   };
 };
 
-var _excluded$t = ["id", "name", "hint", "error", "value", "label", "shadow", "inputValue", "helperText", "placeholder", "defaultValue", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setInputValue", "setIsFocused", "setIsHovered", "styles"];
+var _excluded$t = ["id", "name", "hint", "error", "value", "label", "shadow", "helperText", "placeholder", "size", "shape", "variant", "colorScheme", "isHovered", "isFocused", "isEditable", "isReadOnly", "isDisabled", "isAutoFocus", "isMultiline", "maxRows", "maxCols", "onBlur", "onChange", "onFocus", "onChangeText", "setHint", "setValue", "setIsFocused", "setIsHovered", "styles"];
 var TextAreaView = function TextAreaView(_ref) {
   var id = _ref.id,
     name = _ref.name,
     hint = _ref.hint,
     error = _ref.error,
+    value = _ref.value,
     label = _ref.label,
     shadow = _ref.shadow,
-    inputValue = _ref.inputValue,
     helperText = _ref.helperText,
-    placeholder = _ref.placeholder,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'sm' : _ref$size,
     _ref$shape = _ref.shape,
@@ -4279,10 +4279,8 @@ var TextAreaView = function TextAreaView(_ref) {
     onChange = _ref.onChange,
     onFocus = _ref.onFocus,
     onChangeText = _ref.onChangeText,
-    _ref$setHint = _ref.setHint,
-    setHint = _ref$setHint === void 0 ? function () {} : _ref$setHint,
-    _ref$setInputValue = _ref.setInputValue,
-    setInputValue = _ref$setInputValue === void 0 ? function () {} : _ref$setInputValue,
+    _ref$setValue = _ref.setValue,
+    setValue = _ref$setValue === void 0 ? function () {} : _ref$setValue,
     _ref$setIsFocused = _ref.setIsFocused,
     setIsFocused = _ref$setIsFocused === void 0 ? function () {} : _ref$setIsFocused,
     _ref$setIsHovered = _ref.setIsHovered,
@@ -4297,9 +4295,6 @@ var TextAreaView = function TextAreaView(_ref) {
     } : _ref$styles,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var isWithLabel = !!(isFocused && label);
-  React.useMemo(function () {
-    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
-  }, [inputValue, isFocused, label, placeholder]);
   var fieldStyles = _extends({
     margin: 0,
     paddingVertical: 8,
@@ -4331,11 +4326,11 @@ var TextAreaView = function TextAreaView(_ref) {
   var handleChange = function handleChange(event) {
     if (typeof event === 'string') {
       //for ios and android
-      setInputValue(event);
+      setValue(event);
       if (onChangeText) onChangeText(event);
     } else {
-      setInputValue(event.target.value);
-      if (onChange) onChange(event);
+      setValue(event.target.value);
+      if (onChange) onChange(event.target.value);
     }
   };
   return React__default.createElement(FieldContainer, {
@@ -4350,7 +4345,7 @@ var TextAreaView = function TextAreaView(_ref) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: inputValue,
+    value: value,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -4370,7 +4365,7 @@ var TextAreaView = function TextAreaView(_ref) {
     name: name,
     rows: maxRows,
     cols: maxCols,
-    value: inputValue,
+    value: value,
     readOnly: isReadOnly,
     disabled: isDisabled,
     autoFocus: isAutoFocus,