@app-studio/web 0.3.52 → 0.3.54

package/dist/web.esm.js

@@ -1056,12 +1056,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 = {
@@ -2569,8 +2566,8 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
     newOptions = _React$useState[0],
     setNewOptions = _React$useState[1];
   var _React$useState2 = React.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.useState(true),
     hide = _React$useState3[0],
     setHide = _React$useState3[1];
@@ -2589,8 +2586,8 @@ var useCountryPickerState = function useCountryPickerState(_ref) {
     setIsHovered: setIsHovered,
     isFocused: isFocused,
     setIsFocused: setIsFocused,
-    selected: selected,
-    setSelected: setSelected
+    value: value,
+    setValue: setValue
   };
 };
 
@@ -2871,6 +2868,7 @@ var FieldContent = function FieldContent(_ref) {
     backgroundColor: "color.white",
     transition: "padding 0.2s ease",
     justifyContent: "space-between",
+    marginBottom: 5,
     fontSize: Typography.fontSizes[size],
     // filter={isHovered ?  'brightness(1)':'brightness(0.97)'}
     cursor: isDisabled ? 'not-allowed' : isReadOnly ? 'auto' : 'pointer'
@@ -2933,7 +2931,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.createElement(Element, Object.assign({
     as: "ul"
@@ -3022,7 +3020,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,
@@ -3062,8 +3060,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: {},
@@ -3085,7 +3083,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) {
@@ -3093,22 +3092,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);
   };
-  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,
@@ -3140,7 +3138,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: selected,
+    value: value,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -3164,7 +3162,7 @@ var CountryPickerView = function CountryPickerView(_ref3) {
     onBlur: handleBlur,
     onFocus: handleFocus
   }, fieldStyles, props, {
-    value: selected,
+    value: value,
     onChange: handleChange
   }))), React.createElement(FieldIcons, null, hide ? React.createElement(ArrowDownSvg, {
     size: IconSizes$3[size],
@@ -3345,7 +3343,7 @@ var DatePicker = DatePickerComponent;
 var useTextFieldState = function useTextFieldState(_ref) {
   var label = _ref.label,
     placeholder = _ref.placeholder,
-    value = _ref.value;
+    defaultValue = _ref.defaultValue;
   var _useState = useState(label != null ? label : placeholder),
     hint = _useState[0],
     setHint = _useState[1];
@@ -3355,9 +3353,12 @@ var useTextFieldState = function useTextFieldState(_ref) {
   var _useState3 = useState(false),
     isHovered = _useState3[0],
     setIsHovered = _useState3[1];
-  var _useState4 = useState(value || ''),
-    inputValue = _useState4[0],
-    setInputValue = _useState4[1];
+  var _useState4 = useState(defaultValue || ''),
+    value = _useState4[0],
+    setValue = _useState4[1];
+  useMemo(function () {
+    setHint(isFocused && !value ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
+  }, [value, isFocused, label, placeholder]);
   return {
     hint: hint,
     setHint: setHint,
@@ -3365,8 +3366,8 @@ var useTextFieldState = function useTextFieldState(_ref) {
     setIsFocused: setIsFocused,
     isHovered: isHovered,
     setIsHovered: setIsHovered,
-    inputValue: inputValue,
-    setInputValue: setInputValue
+    setValue: setValue,
+    value: value
   };
 };
 
@@ -3381,7 +3382,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", "type", "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.createElement(Input, Object.assign({
     type: "text"
@@ -3392,12 +3393,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,
@@ -3431,14 +3431,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,
@@ -3447,9 +3445,6 @@ var TextFieldView = function TextFieldView(_ref) {
     getColor = _useTheme.getColor;
   var IconColor = getColor('color.blueGray.700');
   var isWithLabel = !!(isFocused && label);
-  useMemo(function () {
-    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
-  }, [inputValue, isFocused, label, placeholder]);
   var fieldStyles = _extends({
     margin: 0,
     paddingVertical: 8,
@@ -3482,16 +3477,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({
@@ -3521,7 +3518,7 @@ var TextFieldView = function TextFieldView(_ref) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: inputValue,
+    value: value,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -3538,7 +3535,7 @@ var TextFieldView = function TextFieldView(_ref) {
   }, styles), label), React.createElement(TextFieldInput, Object.assign({
     id: id,
     name: name,
-    value: inputValue,
+    value: value,
     readOnly: isReadOnly,
     disabled: isDisabled,
     autoFocus: isAutoFocus,
@@ -3548,9 +3545,9 @@ var TextFieldView = function TextFieldView(_ref) {
     autoComplete: "off"
   }, fieldStyles, props, {
     onChange: handleChange
-  }, onChangeText && {
-    onChangeText: handleChange
-  }))), (rightChild || isClearable && inputValue) && React.createElement(FieldIcons, null, rightChild && React.createElement(React.Fragment, null, rightChild), isClearable && inputValue && !isReadOnly && !isDisabled && React.createElement(CloseSvg, {
+  }, onChange && {
+    onChange: handleChange
+  }))), (rightChild || isClearable && value) && React.createElement(FieldIcons, null, rightChild && React.createElement(React.Fragment, null, rightChild), isClearable && value && !isReadOnly && !isDisabled && React.createElement(CloseSvg, {
     size: Typography.fontSizes[size],
     color: IconColor,
     onClick: handleClear
@@ -3594,7 +3591,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.useState(true),
     hide = _React$useState[0],
     setHide = _React$useState[1];
@@ -3604,12 +3601,12 @@ var useSelectState = function useSelectState(_ref) {
   var _React$useState3 = React.useState(false),
     isFocused = _React$useState3[0],
     setIsFocused = _React$useState3[1];
-  var _React$useState4 = React.useState(defaultSelected),
-    selected = _React$useState4[0],
-    setSelected = _React$useState4[1];
+  var _React$useState4 = React.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,
@@ -3637,9 +3634,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,
@@ -3678,7 +3675,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,
@@ -3695,9 +3692,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.createElement(Text, Object.assign({}, fieldStyles), (selected === '' || selected && selected.length === 0) && !!placeholder ? placeholder : React.createElement(React.Fragment, null, typeof selected === 'string' ? selected : selected && selected.length > 0 && React.createElement(Horizontal, {
+  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, {
     gap: 6
-  }, selected.map(function (option) {
+  }, value.map(function (option) {
     return React.createElement(MultiSelect, {
       key: option,
       option: option,
@@ -3708,7 +3705,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,
@@ -3730,7 +3727,7 @@ var HiddenSelect = function HiddenSelect(_ref3) {
     width: 0,
     height: 0,
     position: "absolute",
-    value: selected,
+    value: value,
     disabled: isDisabled,
     readOnly: isReadOnly,
     onChange: handleChange,
@@ -3827,7 +3824,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,
@@ -3869,8 +3866,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,
@@ -3890,18 +3887,19 @@ var SelectView = function SelectView(_ref6) {
   };
   var handleCallback = 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.createElement(FieldContainer, {
@@ -3918,7 +3916,7 @@ var SelectView = function SelectView(_ref6) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: selected,
+    value: value,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -3937,7 +3935,7 @@ var SelectView = function SelectView(_ref6) {
     name: name,
     options: options,
     onChange: onChange,
-    selected: selected,
+    value: value,
     isDisabled: isDisabled,
     isReadOnly: isReadOnly,
     isMulti: isMulti,
@@ -3945,7 +3943,7 @@ var SelectView = function SelectView(_ref6) {
   }, props)), React.createElement(SelectBox, {
     size: size,
     styles: styles,
-    selected: selected,
+    value: value,
     isDisabled: isDisabled,
     placeholder: placeholder,
     removeOption: handleRemoveOption
@@ -4158,7 +4156,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() {
@@ -4185,6 +4183,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',
@@ -4204,43 +4203,44 @@ var Switch = SwitchComponent;
 var useTextAreaState = function useTextAreaState(_ref) {
   var label = _ref.label,
     placeholder = _ref.placeholder,
-    defaultValue = _ref.defaultValue,
-    value = _ref.value;
+    defaultValue = _ref.defaultValue;
   var _useState = useState(label != null ? label : placeholder),
     hint = _useState[0],
     setHint = _useState[1];
   var _useState2 = useState(false),
     isHovered = _useState2[0],
     setIsHovered = _useState2[1];
-  var _useState3 = useState(value || defaultValue || ''),
-    inputValue = _useState3[0],
-    setInputValue = _useState3[1];
+  var _useState3 = useState(defaultValue || ''),
+    value = _useState3[0],
+    setValue = _useState3[1];
   var _useState4 = useState(false),
     isFocused = _useState4[0],
     setIsFocused = _useState4[1];
+  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", "defaultValue", "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,
@@ -4272,10 +4272,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,
@@ -4290,9 +4288,6 @@ var TextAreaView = function TextAreaView(_ref) {
     } : _ref$styles,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$t);
   var isWithLabel = !!(isFocused && label);
-  useMemo(function () {
-    setHint(isFocused && !inputValue ? placeholder != null ? placeholder : '' : label != null ? label : placeholder);
-  }, [inputValue, isFocused, label, placeholder]);
   var fieldStyles = _extends({
     margin: 0,
     paddingVertical: 8,
@@ -4324,11 +4319,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.createElement(FieldContainer, {
@@ -4343,7 +4338,7 @@ var TextAreaView = function TextAreaView(_ref) {
     styles: styles,
     shadow: shadow,
     variant: variant,
-    value: inputValue,
+    value: value,
     color: colorScheme,
     isHovered: isHovered,
     isDisabled: isDisabled,
@@ -4363,7 +4358,7 @@ var TextAreaView = function TextAreaView(_ref) {
     name: name,
     rows: maxRows,
     cols: maxCols,
-    value: inputValue,
+    value: value,
     readOnly: isReadOnly,
     disabled: isDisabled,
     autoFocus: isAutoFocus,