@xaypay/tui 0.1.3 → 0.1.5

package/dist/index.es.js

@@ -38,7 +38,7 @@ for (let i = 0; i < 256; ++i) {
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -958,7 +958,7 @@ const File = ({
       setSingleFile(null);
     }
     if (multiple && !removeFile) {
-      alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+      alert('Please add removeFile prop on File component, it is a require in multiple mode');
     }
     if (maxCHoosenLength) {
       if (typeof maxCHoosenLength !== 'number') {
@@ -974,7 +974,7 @@ const File = ({
   }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength]);
   useEffect(() => {
     if (deleteComponent && !removeComponent) {
-      alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
+      alert('Please add removeComponent prop on File component it is require when deleteComponent prop is true');
     }
   }, [deleteComponent]);
   useEffect(() => {
@@ -2768,10 +2768,10 @@ const Modal = ({
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
-      backgroundColor: '#FBFBFB',
       padding: padding ?? merge.MODAL.padding,
       height: headerHeight ?? merge.MODAL.header.height,
-      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
+      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
+      backgroundColor: closeAreaBackgroundColor ?? merge.MODAL.closeAreaBackgroundColor
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default.createElement("p", {
     style: {
@@ -3010,11 +3010,11 @@ const TelInput = ({
   type,
   value,
   radius,
-  inputChange,
   isHover,
   disabled,
   inpStyles,
   errorColor,
+  inputChange,
   phoneDisplay,
   inpAttributes,
   phoneAlignItems,
@@ -3078,6 +3078,7 @@ const TextInput = ({
   inputChange,
   maxLength,
   inpStyles,
+  disabled,
   inpAttributes
 }) => {
   const [innerValue, setInnerValue] = useState('');
@@ -3093,7 +3094,7 @@ const TextInput = ({
     }
   };
   useEffect(() => {
-    let newValue = value;
+    let newValue = '';
     if (value !== undefined && value !== null) {
       newValue = value;
       if (maxLength && value.length > maxLength) {
@@ -3105,6 +3106,7 @@ const TextInput = ({
   return /*#__PURE__*/React__default.createElement("input", {
     type: "text",
     value: innerValue,
+    disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
@@ -3125,6 +3127,7 @@ const PassInput = ({
   inputChange,
   maxLength,
   inpAttributes,
+  disabled,
   inpStyles
 }) => {
   const [innerShow, setInnerShow] = useState('');
@@ -3156,6 +3159,7 @@ const PassInput = ({
   return /*#__PURE__*/React__default.createElement("input", {
     type: innerShow ? 'text' : 'password',
     value: innerValue,
+    disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
@@ -3174,12 +3178,13 @@ const NumberInput = ({
   value,
   float,
   radius,
-  inputChange,
+  disabled,
   maxLength,
   inpStyles,
-  inpAttributes,
   minNumSize,
-  maxNumSize
+  maxNumSize,
+  inputChange,
+  inpAttributes
 }) => {
   const [innerValue, setInnerValue] = useState('');
   const [innerMinNumSize, setInnerMinNumSize] = useState(0);
@@ -3218,6 +3223,7 @@ const NumberInput = ({
   return /*#__PURE__*/React__default.createElement("input", {
     type: "text",
     value: innerValue,
+    disabled: disabled,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
     autoComplete: inpAttributes?.autoComplete,
@@ -3244,7 +3250,7 @@ const InputTypes = {
   PASSWORD: 'password'
 };
 const P = styled.span`
-    animation: ${props => props.errorAnimation ? props.errorAnimation : 'none'};
+    animation: ${true};
 `;
 const Input = ({
   type,
@@ -3266,7 +3272,6 @@ const Input = ({
   leftIcon,
   required,
   disabled,
-  transform,
   iconWidth,
   rightIcon,
   className,
@@ -3296,7 +3301,6 @@ const Input = ({
   errorMarginTop,
   boxShadowHover,
   errorClassName,
-  errorAnimation,
   labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
@@ -3309,7 +3313,6 @@ const Input = ({
   telBorderRightStyle,
   telBorderRightColor,
   backgroundDisableColor,
-  errorAnimationDuration,
   telBorderRightColorHover
 }) => {
   const [show, setShow] = useState(false);
@@ -3328,12 +3331,12 @@ const Input = ({
     color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
     backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
   };
+  const uuid = v4();
   const inpAttributes = {
     placeholder: placeholder ?? '',
-    iName: name ? name : `tui_${random}_tui`,
+    iName: name ? name : `tui_${uuid}_tui`,
     autoComplete: autoComplete ?? merge.INPUT.autoComplete
   };
-  const random = Math.floor(Math.random() * 1000 + 1);
   const classProps = classnames(className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = keyframes`
         100% {
@@ -3346,7 +3349,7 @@ const Input = ({
         }
     `;
   const animation = () => css`
-        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
+        ${errorShow} 240ms forwards
     `;
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -3422,9 +3425,10 @@ const Input = ({
     telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
   }) : type === 'number' ? /*#__PURE__*/React__default.createElement(NumberInput, {
     value: value,
-    inputChange: change,
     dots: withoutDot,
     float: floatToFix,
+    disabled: disabled,
+    inputChange: change,
     maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
@@ -3435,16 +3439,18 @@ const Input = ({
     show: show,
     type: type,
     value: value,
-    inputChange: change,
-    isHover: isHover,
     disabled: disabled,
+    inputChange: change,
+    maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
     radius: radius ?? merge.INPUT.radius
   }) : /*#__PURE__*/React__default.createElement(TextInput, {
     value: value,
+    disabled: disabled,
     inputChange: change,
     inpStyles: inpStyles,
+    maxLength: maxLength,
     inpAttributes: inpAttributes,
     radius: radius ?? merge.INPUT.radius
   }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default.createElement("div", {
@@ -3463,7 +3469,6 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P, {
-    errorAnimation: errorAnimation ?? merge.INPUT.error.animation,
     animation: animation,
     style: {
       margin: '0px',
@@ -3478,7 +3483,7 @@ const Input = ({
       zIndex: errorZindex ?? merge.INPUT.error.zIndex,
       lineHeight: errorLineHeight ?? merge.INPUT.error.lineHeight,
       top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${merge.INPUT.error.marginTop})`,
-      transform: !errorAnimation && !merge.INPUT.error.animation ? 'scale3d(1,1,1)' : transform ? transform : merge.INPUT.error.transform
+      transform: 'scale3d(1,1,1)'
     },
     className: errorClassName ?? merge.INPUT.error.className
   }, innerErrorMessage) : '');
@@ -3500,7 +3505,6 @@ Input.propTypes = {
   padding: PropTypes.string,
   tooltip: PropTypes.element,
   withoutDot: PropTypes.bool,
-  transform: PropTypes.string,
   className: PropTypes.string,
   iconWidth: PropTypes.string,
   boxSizing: PropTypes.string,
@@ -3525,7 +3529,6 @@ Input.propTypes = {
   errorMessage: PropTypes.string,
   phoneDisplay: PropTypes.string,
   autoComplete: PropTypes.string,
-  errorAnimation: PropTypes.bool,
   labelDisplay: PropTypes.string,
   errorPosition: PropTypes.string,
   errorMarginTop: PropTypes.string,
@@ -3544,7 +3547,6 @@ Input.propTypes = {
   telBorderRightColor: PropTypes.string,
   phoneJustifyContent: PropTypes.string,
   backgroundDisableColor: PropTypes.string,
-  errorAnimationDuration: PropTypes.string,
   telBorderRightColorHover: PropTypes.string,
   leftIcon: PropTypes.arrayOf(PropTypes.element),
   rightIcon: PropTypes.arrayOf(PropTypes.element),
@@ -5024,7 +5026,7 @@ const Textarea = ({
       alert('Please add value prop on Textarea component');
     }
     if (errorMessage) {
-      value === '' ? setError(errorMessage) : setError('');
+      setError(errorMessage);
     } else {
       setError('');
     }
@@ -5633,12 +5635,10 @@ const Autocomplete = ({
     value.length > 0 ? setShow(true) : setShow(false);
     setInnerError('');
     setInnerValue(value);
-    if (value.length >= searchCount) {
-      change({
-        name: value,
-        id: currentId
-      });
-    }
+    change({
+      name: value,
+      id: currentId
+    });
   };
   const handleClick = selectedValue => {
     setShow(false);
@@ -5740,7 +5740,10 @@ const Autocomplete = ({
     setInnerError(errorMessage);
   }, [errorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
-    className: classProps
+    className: classProps,
+    style: {
+      width: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth
+    }
   }, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ?? merge.AUTOCOMPLETE.label.color,
@@ -5758,7 +5761,7 @@ const Autocomplete = ({
     style: {
       display: contentDisplay ?? merge.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? merge.AUTOCOMPLETE.parent.position,
-      maxWidth: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth,
+      width: '100%',
       flexDirection: contentDirection ?? merge.AUTOCOMPLETE.parent.direction
     }
   }, /*#__PURE__*/React__default.createElement("input", _extends({

package/dist/index.js

@@ -68,7 +68,7 @@ for (let i = 0; i < 256; ++i) {
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
+  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -988,7 +988,7 @@ const File = ({
       setSingleFile(null);
     }
     if (multiple && !removeFile) {
-      alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
+      alert('Please add removeFile prop on File component, it is a require in multiple mode');
     }
     if (maxCHoosenLength) {
       if (typeof maxCHoosenLength !== 'number') {
@@ -1004,7 +1004,7 @@ const File = ({
   }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength]);
   React.useEffect(() => {
     if (deleteComponent && !removeComponent) {
-      alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
+      alert('Please add removeComponent prop on File component it is require when deleteComponent prop is true');
     }
   }, [deleteComponent]);
   React.useEffect(() => {
@@ -2798,10 +2798,10 @@ const Modal = ({
       display: 'flex',
       alignItems: 'center',
       boxSizing: 'border-box',
-      backgroundColor: '#FBFBFB',
       padding: padding ?? merge.MODAL.padding,
       height: headerHeight ?? merge.MODAL.header.height,
-      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end'
+      justifyContent: headerText && type === 'content' ? 'space-between' : 'flex-end',
+      backgroundColor: closeAreaBackgroundColor ?? merge.MODAL.closeAreaBackgroundColor
     }
   }, headerText && type === 'content' && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
@@ -3040,11 +3040,11 @@ const TelInput = ({
   type,
   value,
   radius,
-  inputChange,
   isHover,
   disabled,
   inpStyles,
   errorColor,
+  inputChange,
   phoneDisplay,
   inpAttributes,
   phoneAlignItems,
@@ -3108,6 +3108,7 @@ const TextInput = ({
   inputChange,
   maxLength,
   inpStyles,
+  disabled,
   inpAttributes
 }) => {
   const [innerValue, setInnerValue] = React.useState('');
@@ -3123,7 +3124,7 @@ const TextInput = ({
     }
   };
   React.useEffect(() => {
-    let newValue = value;
+    let newValue = '';
     if (value !== undefined && value !== null) {
       newValue = value;
       if (maxLength && value.length > maxLength) {
@@ -3135,6 +3136,7 @@ const TextInput = ({
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
+    disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
@@ -3155,6 +3157,7 @@ const PassInput = ({
   inputChange,
   maxLength,
   inpAttributes,
+  disabled,
   inpStyles
 }) => {
   const [innerShow, setInnerShow] = React.useState('');
@@ -3186,6 +3189,7 @@ const PassInput = ({
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: innerShow ? 'text' : 'password',
     value: innerValue,
+    disabled: disabled,
     onInput: handleChange,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
@@ -3204,12 +3208,13 @@ const NumberInput = ({
   value,
   float,
   radius,
-  inputChange,
+  disabled,
   maxLength,
   inpStyles,
-  inpAttributes,
   minNumSize,
-  maxNumSize
+  maxNumSize,
+  inputChange,
+  inpAttributes
 }) => {
   const [innerValue, setInnerValue] = React.useState('');
   const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
@@ -3248,6 +3253,7 @@ const NumberInput = ({
   return /*#__PURE__*/React__default["default"].createElement("input", {
     type: "text",
     value: innerValue,
+    disabled: disabled,
     name: inpAttributes?.iName,
     placeholder: inpAttributes?.placeholder,
     autoComplete: inpAttributes?.autoComplete,
@@ -3274,7 +3280,7 @@ const InputTypes = {
   PASSWORD: 'password'
 };
 const P = styled__default["default"].span`
-    animation: ${props => props.errorAnimation ? props.errorAnimation : 'none'};
+    animation: ${true};
 `;
 const Input = ({
   type,
@@ -3296,7 +3302,6 @@ const Input = ({
   leftIcon,
   required,
   disabled,
-  transform,
   iconWidth,
   rightIcon,
   className,
@@ -3326,7 +3331,6 @@ const Input = ({
   errorMarginTop,
   boxShadowHover,
   errorClassName,
-  errorAnimation,
   labelFontFamily,
   phoneAlignItems,
   errorLineHeight,
@@ -3339,7 +3343,6 @@ const Input = ({
   telBorderRightStyle,
   telBorderRightColor,
   backgroundDisableColor,
-  errorAnimationDuration,
   telBorderRightColorHover
 }) => {
   const [show, setShow] = React.useState(false);
@@ -3358,12 +3361,12 @@ const Input = ({
     color: innerErrorMessage && errorColor ? errorColor : color ? color : merge.INPUT.color,
     backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : merge.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : merge.INPUT.colors.background
   };
+  const uuid = v4();
   const inpAttributes = {
     placeholder: placeholder ?? '',
-    iName: name ? name : `tui_${random}_tui`,
+    iName: name ? name : `tui_${uuid}_tui`,
     autoComplete: autoComplete ?? merge.INPUT.autoComplete
   };
-  const random = Math.floor(Math.random() * 1000 + 1);
   const classProps = classnames__default["default"](className ?? merge.INPUT.className, type === 'number' ? styles$7['inp-num'] : '', styles$7['input-wrap']);
   const errorShow = styled.keyframes`
         100% {
@@ -3376,7 +3379,7 @@ const Input = ({
         }
     `;
   const animation = () => styled.css`
-        ${errorShow} ${errorAnimationDuration ? errorAnimationDuration : merge.INPUT.error.animationDuration} forwards
+        ${errorShow} 240ms forwards
     `;
   const handleMouseEnter = () => {
     setIsHover(true);
@@ -3452,9 +3455,10 @@ const Input = ({
     telBorderRightColorHover: telBorderRightColorHover ?? merge.INPUT.tel.borderRight.colors.hover
   }) : type === 'number' ? /*#__PURE__*/React__default["default"].createElement(NumberInput, {
     value: value,
-    inputChange: change,
     dots: withoutDot,
     float: floatToFix,
+    disabled: disabled,
+    inputChange: change,
     maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
@@ -3465,16 +3469,18 @@ const Input = ({
     show: show,
     type: type,
     value: value,
-    inputChange: change,
-    isHover: isHover,
     disabled: disabled,
+    inputChange: change,
+    maxLength: maxLength,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
     radius: radius ?? merge.INPUT.radius
   }) : /*#__PURE__*/React__default["default"].createElement(TextInput, {
     value: value,
+    disabled: disabled,
     inputChange: change,
     inpStyles: inpStyles,
+    maxLength: maxLength,
     inpAttributes: inpAttributes,
     radius: radius ?? merge.INPUT.radius
   }), rightIcon && rightIcon.length > 0 ? /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3493,7 +3499,6 @@ const Input = ({
       backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : merge.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
-    errorAnimation: errorAnimation ?? merge.INPUT.error.animation,
     animation: animation,
     style: {
       margin: '0px',
@@ -3508,7 +3513,7 @@ const Input = ({
       zIndex: errorZindex ?? merge.INPUT.error.zIndex,
       lineHeight: errorLineHeight ?? merge.INPUT.error.lineHeight,
       top: errorMarginTop ? `calc(100% + ${errorMarginTop})` : `calc(100% + ${merge.INPUT.error.marginTop})`,
-      transform: !errorAnimation && !merge.INPUT.error.animation ? 'scale3d(1,1,1)' : transform ? transform : merge.INPUT.error.transform
+      transform: 'scale3d(1,1,1)'
     },
     className: errorClassName ?? merge.INPUT.error.className
   }, innerErrorMessage) : '');
@@ -3530,7 +3535,6 @@ Input.propTypes = {
   padding: PropTypes__default["default"].string,
   tooltip: PropTypes__default["default"].element,
   withoutDot: PropTypes__default["default"].bool,
-  transform: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
   iconWidth: PropTypes__default["default"].string,
   boxSizing: PropTypes__default["default"].string,
@@ -3555,7 +3559,6 @@ Input.propTypes = {
   errorMessage: PropTypes__default["default"].string,
   phoneDisplay: PropTypes__default["default"].string,
   autoComplete: PropTypes__default["default"].string,
-  errorAnimation: PropTypes__default["default"].bool,
   labelDisplay: PropTypes__default["default"].string,
   errorPosition: PropTypes__default["default"].string,
   errorMarginTop: PropTypes__default["default"].string,
@@ -3574,7 +3577,6 @@ Input.propTypes = {
   telBorderRightColor: PropTypes__default["default"].string,
   phoneJustifyContent: PropTypes__default["default"].string,
   backgroundDisableColor: PropTypes__default["default"].string,
-  errorAnimationDuration: PropTypes__default["default"].string,
   telBorderRightColorHover: PropTypes__default["default"].string,
   leftIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
   rightIcon: PropTypes__default["default"].arrayOf(PropTypes__default["default"].element),
@@ -5054,7 +5056,7 @@ const Textarea = ({
       alert('Please add value prop on Textarea component');
     }
     if (errorMessage) {
-      value === '' ? setError(errorMessage) : setError('');
+      setError(errorMessage);
     } else {
       setError('');
     }
@@ -5663,12 +5665,10 @@ const Autocomplete = ({
     value.length > 0 ? setShow(true) : setShow(false);
     setInnerError('');
     setInnerValue(value);
-    if (value.length >= searchCount) {
-      change({
-        name: value,
-        id: currentId
-      });
-    }
+    change({
+      name: value,
+      id: currentId
+    });
   };
   const handleClick = selectedValue => {
     setShow(false);
@@ -5770,7 +5770,10 @@ const Autocomplete = ({
     setInnerError(errorMessage);
   }, [errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
-    className: classProps
+    className: classProps,
+    style: {
+      width: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth
+    }
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ?? merge.AUTOCOMPLETE.label.color,
@@ -5788,7 +5791,7 @@ const Autocomplete = ({
     style: {
       display: contentDisplay ?? merge.AUTOCOMPLETE.parent.display,
       position: contentPosition ?? merge.AUTOCOMPLETE.parent.position,
-      maxWidth: contentTopMaxWidth ?? merge.AUTOCOMPLETE.maxWidth,
+      width: '100%',
       flexDirection: contentDirection ?? merge.AUTOCOMPLETE.parent.direction
     }
   }, /*#__PURE__*/React__default["default"].createElement("input", _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xaypay/tui",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/tui.config.js

@@ -91,7 +91,7 @@ export default {
 
         colors: {
             background: 'white',
-            backgroundDisable: presetColors.extraLight,
+            backgroundDisable: presetColors.secondary,
         },
         
         font: {...fontObject},
@@ -111,10 +111,7 @@ export default {
             zIndex: '1',
             className: '',
             marginTop: '10px',
-            animation: false,
-            transform: 'scale3d(0,0,0)',
             lineHeight: '19px',
-            animationDuration: '240ms',
 
             font: {...fontObject}
         },
@@ -312,7 +309,7 @@ export default {
             colors: {
                 hover: '#373538',
                 background: presetColors.extraLight,
-                backgroundDisable: presetColors.extraLight,
+                backgroundDisable: presetColors.secondary,
             },
 
             font: {...fontObject}
@@ -443,7 +440,7 @@ export default {
         },
 
         colors: {
-            backgroundDisable: presetColors.extraLight,
+            backgroundDisable: presetColors.secondary,
         },
 
         label: {