@xaypay/tui 0.0.118 → 0.0.119

package/dist/index.es.js

@@ -526,6 +526,7 @@ const TD = ({
       fontWeight: tBodyFontWeight,
       minWidth: tableColumnMinWidth,
       maxWidth: tableColumnMaxWidth,
+      whiteSpace: Array.isArray(item) ? 'nowrap' : 'wrap',
       borderColor: hideBorder ? 'transparent' : '#eeeeee',
       boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
       borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
@@ -602,9 +603,9 @@ const TD = ({
     unCheckedColor: item.checkBox.unCheckedColor
   }), /*#__PURE__*/React__default.createElement("div", {
     style: {
-      flexShrink: 10,
-      marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '10px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '10px' : '0px' : '0px',
-      marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '10px' : '0px' : '0px' : '0px'
+      flexShrink: 11,
+      marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '11px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '11px' : '0px' : '0px',
+      marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '11px' : '0px' : '0px' : '0px'
     }
   }, /*#__PURE__*/React__default.createElement("p", {
     style: {
@@ -3600,8 +3601,8 @@ const Captcha = ({
     className: classProps
   }, label && /*#__PURE__*/React__default.createElement("p", {
     style: {
-      fontSize: size ? size : configStyles.Captcha.size,
-      color: color ? color : configStyles.Captcha.color
+      fontSize: size ? size : configStyles.CAPTCHA.size,
+      color: color ? color : configStyles.CAPTCHA.color
     }
   }, label), /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -4135,6 +4136,7 @@ const NewFile = ({
   change,
   border,
   upload,
+  preview,
   maxSize,
   maxWidth,
   disabled,
@@ -4158,6 +4160,12 @@ const NewFile = ({
   maxSizeError,
   progressColor,
   noChoosenFile,
+  uploadBtnFont,
+  uploadBtnSize,
+  uploadBtnLabel,
+  uploadBtnColor,
+  uploadBtnHeight,
+  uploadBtnBackgroundColor,
   fileExtensions,
   listItemHeight,
   backgroundColor,
@@ -4203,6 +4211,7 @@ const NewFile = ({
   };
   const handleRemoveFile = () => {
     setImage(null);
+    setSingleFile(null);
     removeFile && removeFile(singleFile);
   };
   const handleUploadFiles = file => {
@@ -4456,7 +4465,7 @@ const NewFile = ({
       fontSize: size ? size : configStyles.FILE.size,
       fontWeight: weight ? weight : configStyles.FILE.weight
     }
-  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default.createElement(SvgHeic, null) : /*#__PURE__*/React__default.createElement("img", {
+  }, !multiple && image && preview ? image === 'pdf' ? /*#__PURE__*/React__default.createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default.createElement(SvgHeic, null) : /*#__PURE__*/React__default.createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -4467,7 +4476,7 @@ const NewFile = ({
       height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.FILE.fileAreaImageHeight
     },
     alt: "file preview"
-  }) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SvgUpload, null)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
+  }) : preview ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(SvgUpload, null)), /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("p", {
     style: {
       margin: '0px'
     }
@@ -4483,7 +4492,35 @@ const NewFile = ({
     style: {
       margin: '0px'
     }
-  }, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, "\u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default.createElement("div", {
+  }, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      width: '100%',
+      padding: '5px',
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React__default.createElement(Button, {
+    contentWidth: true,
+    onClick: _ => _,
+    font: uploadBtnFont ? uploadBtnFont : configStyles.FILE.uploadBtnFont,
+    size: uploadBtnSize ? uploadBtnSize : configStyles.FILE.uploadBtnSize,
+    label: uploadBtnLabel ? uploadBtnLabel : configStyles.FILE.uploadBtnLabel,
+    color: uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor,
+    height: uploadBtnHeight ? uploadBtnHeight : configStyles.FILE.uploadBtnHeight,
+    hoverColor: uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor,
+    backgroundColor: uploadBtnBackgroundColor ? uploadBtnBackgroundColor : configStyles.FILE.uploadBtnBackgroundColor,
+    backgroundHoverColor: uploadBtnBackgroundColor ? uploadBtnBackgroundColor : configStyles.FILE.uploadBtnBackgroundColor
+  }), /*#__PURE__*/React__default.createElement("p", {
+    style: {
+      margin: '0px',
+      marginLeft: '5px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }
+  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default.createElement("span", null, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, " \u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -4543,6 +4580,7 @@ const NewFile = ({
 NewFile.propTypes = {
   or: PropTypes.string,
   size: PropTypes.string,
+  preview: PropTypes.bool,
   label: PropTypes.string,
   color: PropTypes.string,
   height: PropTypes.string,
@@ -4553,6 +4591,7 @@ NewFile.propTypes = {
   upload: PropTypes.string,
   weight: PropTypes.number,
   maxSize: PropTypes.number,
+  maxWidth: PropTypes.string,
   removeFile: PropTypes.func,
   className: PropTypes.string,
   errorSize: PropTypes.string,
@@ -4572,6 +4611,12 @@ NewFile.propTypes = {
   progressColor: PropTypes.string,
   deleteComponent: PropTypes.bool,
   removeComponent: PropTypes.func,
+  uploadBtnFont: PropTypes.string,
+  uploadBtnSize: PropTypes.string,
+  uploadBtnLabel: PropTypes.string,
+  uploadBtnColor: PropTypes.string,
+  uploadBtnHeight: PropTypes.string,
+  uploadBtnBackgroundColor: PropTypes.string,
   listItemHeight: PropTypes.string,
   backgroundColor: PropTypes.string,
   change: PropTypes.func.isRequired,
@@ -4599,6 +4644,7 @@ NewFile.propTypes = {
 };
 NewFile.defaultProps = {
   maxSize: 10,
+  preview: true,
   timeForRemoveError: 5000,
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic']
 };
@@ -4696,6 +4742,10 @@ Checkbox.defaultProps = {
 var css_248z$4 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
 styleInject(css_248z$4);
 
+const PositionSide = {
+  TOP: 'top',
+  BOTTOM: 'bottom'
+};
 const Textarea = ({
   size,
   label,
@@ -4730,7 +4780,8 @@ const Textarea = ({
   borderFocusColor,
   borderHoverColor,
   labelMarginBottom,
-  showCharacterCount
+  showCharacterCount,
+  characterCountPosition
 }) => {
   const [error, setError] = useState('');
   const [isHover, setIsHover] = useState(false);
@@ -4770,18 +4821,16 @@ const Textarea = ({
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
-    if (value === '') {
-      setError('');
-    }
-    setInnerValue(value);
-  }, [value, onChange]);
-  useEffect(() => {
     if (errorMessage) {
       setError(errorMessage);
     } else {
       setError('');
     }
-  }, [errorMessage]);
+    if (value === '') {
+      setError('');
+    }
+    setInnerValue(value);
+  }, [value, onChange, errorMessage]);
   return /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: width ? width : configStyles.TEXTAREA.width
@@ -4802,7 +4851,7 @@ const Textarea = ({
       display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
     }
-  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && /*#__PURE__*/React__default.createElement("span", {
+  }, label, required && /*#__PURE__*/React__default.createElement("sup", null, /*#__PURE__*/React__default.createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default.createElement("span", {
     style: {
       color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
       fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
@@ -4835,14 +4884,29 @@ const Textarea = ({
     placeholder: placeholder,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }), error ? /*#__PURE__*/React__default.createElement("span", {
+  }), showCharacterCount && maxLength && characterCountPosition === 'bottom' && /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      float: 'right'
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+      fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
+    }
+  }, maxLength - value.length, " \u0576\u056B\u0577")), error ? /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      clear: 'both',
+      wordBreak: 'break-all',
+      maxWidth: width ? width : configStyles.TEXTAREA.width
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
     style: {
       display: 'inline-block',
       fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
       color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
       marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop
     }
-  }, error) : '');
+  }, error)) : '');
 };
 Textarea.propTypes = {
   size: PropTypes.string,
@@ -4878,7 +4942,11 @@ Textarea.propTypes = {
   borderFocusColor: PropTypes.string,
   borderHoverColor: PropTypes.string,
   labelMarginBottom: PropTypes.string,
-  onChange: PropTypes.func.isRequired
+  onChange: PropTypes.func.isRequired,
+  characterCountPosition: PropTypes.oneOf(Object.values(PositionSide))
+};
+Textarea.defaultProps = {
+  characterCountPosition: 'top'
 };
 
 var css_248z$3 = "";
@@ -5734,4 +5802,4 @@ NewAutocomplete.defaultProps = {
   disabled: false
 };
 
-export { Autocomplate, Button, Captcha, Checkbox, DirectionMode, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, RadioDirectionMode, Select, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Checkbox, DirectionMode, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, PositionSide, Radio, RadioDirectionMode, Select, Stepper, Table, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };

package/dist/index.js

@@ -556,6 +556,7 @@ const TD = ({
       fontWeight: tBodyFontWeight,
       minWidth: tableColumnMinWidth,
       maxWidth: tableColumnMaxWidth,
+      whiteSpace: Array.isArray(item) ? 'nowrap' : 'wrap',
       borderColor: hideBorder ? 'transparent' : '#eeeeee',
       boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
       borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
@@ -632,9 +633,9 @@ const TD = ({
     unCheckedColor: item.checkBox.unCheckedColor
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      flexShrink: 10,
-      marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '10px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '10px' : '0px' : '0px',
-      marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '10px' : '0px' : '0px' : '0px'
+      flexShrink: 11,
+      marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '11px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '11px' : '0px' : '0px',
+      marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '11px' : '0px' : '0px' : '0px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
@@ -3630,8 +3631,8 @@ const Captcha = ({
     className: classProps
   }, label && /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
-      fontSize: size ? size : configStyles.Captcha.size,
-      color: color ? color : configStyles.Captcha.color
+      fontSize: size ? size : configStyles.CAPTCHA.size,
+      color: color ? color : configStyles.CAPTCHA.color
     }
   }, label), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -4165,6 +4166,7 @@ const NewFile = ({
   change,
   border,
   upload,
+  preview,
   maxSize,
   maxWidth,
   disabled,
@@ -4188,6 +4190,12 @@ const NewFile = ({
   maxSizeError,
   progressColor,
   noChoosenFile,
+  uploadBtnFont,
+  uploadBtnSize,
+  uploadBtnLabel,
+  uploadBtnColor,
+  uploadBtnHeight,
+  uploadBtnBackgroundColor,
   fileExtensions,
   listItemHeight,
   backgroundColor,
@@ -4233,6 +4241,7 @@ const NewFile = ({
   };
   const handleRemoveFile = () => {
     setImage(null);
+    setSingleFile(null);
     removeFile && removeFile(singleFile);
   };
   const handleUploadFiles = file => {
@@ -4486,7 +4495,7 @@ const NewFile = ({
       fontSize: size ? size : configStyles.FILE.size,
       fontWeight: weight ? weight : configStyles.FILE.weight
     }
-  }, !multiple && image ? image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : /*#__PURE__*/React__default["default"].createElement("img", {
+  }, !multiple && image && preview ? image === 'pdf' ? /*#__PURE__*/React__default["default"].createElement(SvgPdf, null) : image === 'heif' || image === 'heic' ? /*#__PURE__*/React__default["default"].createElement(SvgHeic, null) : /*#__PURE__*/React__default["default"].createElement("img", {
     src: image,
     style: {
       display: 'block',
@@ -4497,7 +4506,7 @@ const NewFile = ({
       height: fileAreaImageHeight ? fileAreaImageHeight : configStyles.FILE.fileAreaImageHeight
     },
     alt: "file preview"
-  }) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(SvgUpload, null)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
+  }) : preview ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement(SvgUpload, null)), /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px'
     }
@@ -4513,7 +4522,35 @@ const NewFile = ({
     style: {
       margin: '0px'
     }
-  }, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, "\u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )")))), /*#__PURE__*/React__default["default"].createElement("div", {
+  }, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, " \u0544\u0532 (", ' ', fileExtensions.toString().split(',').join(', '), " )"))) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      width: '100%',
+      padding: '5px',
+      display: 'flex',
+      alignItems: 'center',
+      boxSizing: 'border-box',
+      justifyContent: 'space-between'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Button, {
+    contentWidth: true,
+    onClick: _ => _,
+    font: uploadBtnFont ? uploadBtnFont : configStyles.FILE.uploadBtnFont,
+    size: uploadBtnSize ? uploadBtnSize : configStyles.FILE.uploadBtnSize,
+    label: uploadBtnLabel ? uploadBtnLabel : configStyles.FILE.uploadBtnLabel,
+    color: uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor,
+    height: uploadBtnHeight ? uploadBtnHeight : configStyles.FILE.uploadBtnHeight,
+    hoverColor: uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor,
+    backgroundColor: uploadBtnBackgroundColor ? uploadBtnBackgroundColor : configStyles.FILE.uploadBtnBackgroundColor,
+    backgroundHoverColor: uploadBtnBackgroundColor ? uploadBtnBackgroundColor : configStyles.FILE.uploadBtnBackgroundColor
+  }), /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      margin: '0px',
+      marginLeft: '5px',
+      overflow: 'hidden',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    }
+  }, singleFile ? singleFile[0].name : /*#__PURE__*/React__default["default"].createElement("span", null, fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText, " ", maxSize, " \u0544\u0532 ( ", fileExtensions.toString().split(',').join(', '), " )"))))), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       position: 'absolute',
       top: '0px',
@@ -4573,6 +4610,7 @@ const NewFile = ({
 NewFile.propTypes = {
   or: PropTypes__default["default"].string,
   size: PropTypes__default["default"].string,
+  preview: PropTypes__default["default"].bool,
   label: PropTypes__default["default"].string,
   color: PropTypes__default["default"].string,
   height: PropTypes__default["default"].string,
@@ -4583,6 +4621,7 @@ NewFile.propTypes = {
   upload: PropTypes__default["default"].string,
   weight: PropTypes__default["default"].number,
   maxSize: PropTypes__default["default"].number,
+  maxWidth: PropTypes__default["default"].string,
   removeFile: PropTypes__default["default"].func,
   className: PropTypes__default["default"].string,
   errorSize: PropTypes__default["default"].string,
@@ -4602,6 +4641,12 @@ NewFile.propTypes = {
   progressColor: PropTypes__default["default"].string,
   deleteComponent: PropTypes__default["default"].bool,
   removeComponent: PropTypes__default["default"].func,
+  uploadBtnFont: PropTypes__default["default"].string,
+  uploadBtnSize: PropTypes__default["default"].string,
+  uploadBtnLabel: PropTypes__default["default"].string,
+  uploadBtnColor: PropTypes__default["default"].string,
+  uploadBtnHeight: PropTypes__default["default"].string,
+  uploadBtnBackgroundColor: PropTypes__default["default"].string,
   listItemHeight: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func.isRequired,
@@ -4629,6 +4674,7 @@ NewFile.propTypes = {
 };
 NewFile.defaultProps = {
   maxSize: 10,
+  preview: true,
   timeForRemoveError: 5000,
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic']
 };
@@ -4726,6 +4772,10 @@ Checkbox.defaultProps = {
 var css_248z$4 = "textarea{-webkit-appearance:none}textarea::-webkit-scrollbar{width:6px}textarea::-webkit-scrollbar-track{background:#eee}textarea::-webkit-scrollbar-thumb,textarea::-webkit-scrollbar-track{border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;-o-border-radius:3px}textarea::-webkit-scrollbar-thumb{background:#d1d1d1}";
 styleInject(css_248z$4);
 
+const PositionSide = {
+  TOP: 'top',
+  BOTTOM: 'bottom'
+};
 const Textarea = ({
   size,
   label,
@@ -4760,7 +4810,8 @@ const Textarea = ({
   borderFocusColor,
   borderHoverColor,
   labelMarginBottom,
-  showCharacterCount
+  showCharacterCount,
+  characterCountPosition
 }) => {
   const [error, setError] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
@@ -4800,18 +4851,16 @@ const Textarea = ({
     if (!onChange) {
       alert('Please add onChange function on Textarea component');
     }
-    if (value === '') {
-      setError('');
-    }
-    setInnerValue(value);
-  }, [value, onChange]);
-  React.useEffect(() => {
     if (errorMessage) {
       setError(errorMessage);
     } else {
       setError('');
     }
-  }, [errorMessage]);
+    if (value === '') {
+      setError('');
+    }
+    setInnerValue(value);
+  }, [value, onChange, errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       width: width ? width : configStyles.TEXTAREA.width
@@ -4832,7 +4881,7 @@ const Textarea = ({
       display: labelDisplay ? labelDisplay : configStyles.TEXTAREA.labelDisplay,
       fontWeight: labelWeight ? labelWeight : configStyles.TEXTAREA.labelWeight
     }
-  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && /*#__PURE__*/React__default["default"].createElement("span", {
+  }, label, required && /*#__PURE__*/React__default["default"].createElement("sup", null, /*#__PURE__*/React__default["default"].createElement(SvgRequired, null))) : '', showCharacterCount && maxLength && characterCountPosition === 'top' && /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
       fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
@@ -4865,14 +4914,29 @@ const Textarea = ({
     placeholder: placeholder,
     onMouseEnter: handleMouseEnter,
     onMouseLeave: handleMouseLeave
-  }), error ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }), showCharacterCount && maxLength && characterCountPosition === 'bottom' && /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      float: 'right'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+      fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize
+    }
+  }, maxLength - value.length, " \u0576\u056B\u0577")), error ? /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      clear: 'both',
+      wordBreak: 'break-all',
+      maxWidth: width ? width : configStyles.TEXTAREA.width
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'inline-block',
       fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
       color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
       marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop
     }
-  }, error) : '');
+  }, error)) : '');
 };
 Textarea.propTypes = {
   size: PropTypes__default["default"].string,
@@ -4908,7 +4972,11 @@ Textarea.propTypes = {
   borderFocusColor: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
   labelMarginBottom: PropTypes__default["default"].string,
-  onChange: PropTypes__default["default"].func.isRequired
+  onChange: PropTypes__default["default"].func.isRequired,
+  characterCountPosition: PropTypes__default["default"].oneOf(Object.values(PositionSide))
+};
+Textarea.defaultProps = {
+  characterCountPosition: 'top'
 };
 
 var css_248z$3 = "";
@@ -5776,6 +5844,7 @@ exports.Modal = Modal;
 exports.NewAutocomplete = NewAutocomplete;
 exports.NewFile = NewFile;
 exports.Pagination = Pagination;
+exports.PositionSide = PositionSide;
 exports.Radio = Radio;
 exports.RadioDirectionMode = RadioDirectionMode;
 exports.Select = Select;

package/package.json

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

package/src/components/captcha/index.js

@@ -42,8 +42,8 @@ export const Captcha = ({ size, color, range, label, className, getRange }) => {
             {label && (
                 <p
                     style={{
-                        fontSize: size ? size : configStyles.Captcha.size,
-                        color: color ? color : configStyles.Captcha.color,
+                        fontSize: size ? size : configStyles.CAPTCHA.size,
+                        color: color ? color : configStyles.CAPTCHA.color,
                     }}
                 >
                     {label}

package/src/components/newFile/index.js

@@ -6,6 +6,7 @@ import classnames from 'classnames'
 import FileItem from './fileItem'
 
 import { compereConfigs } from './../../utils'
+import { Button } from './../button'
 
 import SvgPdf from './../icon/PDF'
 import SvgHeic from './../icon/Heic'
@@ -26,6 +27,7 @@ export const NewFile = ({
     change,
     border,
     upload,
+    preview,
     maxSize,
     maxWidth,
     disabled,
@@ -49,6 +51,14 @@ export const NewFile = ({
     maxSizeError,
     progressColor,
     noChoosenFile,
+
+    uploadBtnFont,
+    uploadBtnSize,
+    uploadBtnLabel,
+    uploadBtnColor,
+    uploadBtnHeight,
+    uploadBtnBackgroundColor,
+
     fileExtensions,
     listItemHeight,
     backgroundColor,
@@ -99,6 +109,7 @@ export const NewFile = ({
 
     const handleRemoveFile = () => {
         setImage(null)
+        setSingleFile(null)
         removeFile && removeFile(singleFile)
     }
 
@@ -422,7 +433,7 @@ export const NewFile = ({
                         fontWeight: weight ? weight : configStyles.FILE.weight,
                     }}
                 >
-                    {!multiple && image ? (
+                    {!multiple && image && preview ? (
                         image === 'pdf' ? (
                             <SvgPdf />
                         ) : image === 'heif' || image === 'heic' ? (
@@ -445,7 +456,7 @@ export const NewFile = ({
                                 alt="file preview"
                             />
                         )
-                    ) : (
+                    ) : preview ? (
                         <>
                             <div>
                                 <SvgUpload />
@@ -482,11 +493,63 @@ export const NewFile = ({
                                         margin: '0px',
                                     }}
                                 >
-                                    {fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText} {maxSize}ՄԲ ({' '}
+                                    {fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText} {maxSize} ՄԲ ({' '}
                                     {fileExtensions.toString().split(',').join(', ')} )
                                 </p>
                             </div>
                         </>
+                    ) : (
+                        <>
+                            <div
+                                style={{
+                                    width: '100%',
+                                    padding: '5px',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    boxSizing: 'border-box',
+                                    justifyContent: 'space-between',
+                                }}
+                            >
+                                <Button
+                                    contentWidth
+                                    onClick={(_) => _}
+                                    font={uploadBtnFont ? uploadBtnFont : configStyles.FILE.uploadBtnFont}
+                                    size={uploadBtnSize ? uploadBtnSize : configStyles.FILE.uploadBtnSize}
+                                    label={uploadBtnLabel ? uploadBtnLabel : configStyles.FILE.uploadBtnLabel}
+                                    color={uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor}
+                                    height={uploadBtnHeight ? uploadBtnHeight : configStyles.FILE.uploadBtnHeight}
+                                    hoverColor={uploadBtnColor ? uploadBtnColor : configStyles.FILE.uploadBtnColor}
+                                    backgroundColor={
+                                        uploadBtnBackgroundColor
+                                            ? uploadBtnBackgroundColor
+                                            : configStyles.FILE.uploadBtnBackgroundColor
+                                    }
+                                    backgroundHoverColor={
+                                        uploadBtnBackgroundColor
+                                            ? uploadBtnBackgroundColor
+                                            : configStyles.FILE.uploadBtnBackgroundColor
+                                    }
+                                />
+                                <p
+                                    style={{
+                                        margin: '0px',
+                                        marginLeft: '5px',
+                                        overflow: 'hidden',
+                                        whiteSpace: 'nowrap',
+                                        textOverflow: 'ellipsis',
+                                    }}
+                                >
+                                    {singleFile ? (
+                                        singleFile[0].name
+                                    ) : (
+                                        <span>
+                                            {fileSizeText ? fileSizeText : configStyles.FILE.fileSizeText} {maxSize} ՄԲ
+                                            ( {fileExtensions.toString().split(',').join(', ')} )
+                                        </span>
+                                    )}
+                                </p>
+                            </div>
+                        </>
                     )}
                 </div>
 
@@ -595,6 +658,7 @@ export const NewFile = ({
 NewFile.propTypes = {
     or: PropTypes.string,
     size: PropTypes.string,
+    preview: PropTypes.bool,
     label: PropTypes.string,
     color: PropTypes.string,
     height: PropTypes.string,
@@ -605,6 +669,7 @@ NewFile.propTypes = {
     upload: PropTypes.string,
     weight: PropTypes.number,
     maxSize: PropTypes.number,
+    maxWidth: PropTypes.string,
     removeFile: PropTypes.func,
     className: PropTypes.string,
     errorSize: PropTypes.string,
@@ -624,6 +689,14 @@ NewFile.propTypes = {
     progressColor: PropTypes.string,
     deleteComponent: PropTypes.bool,
     removeComponent: PropTypes.func,
+
+    uploadBtnFont: PropTypes.string,
+    uploadBtnSize: PropTypes.string,
+    uploadBtnLabel: PropTypes.string,
+    uploadBtnColor: PropTypes.string,
+    uploadBtnHeight: PropTypes.string,
+    uploadBtnBackgroundColor: PropTypes.string,
+
     listItemHeight: PropTypes.string,
     backgroundColor: PropTypes.string,
     change: PropTypes.func.isRequired,
@@ -652,6 +725,7 @@ NewFile.propTypes = {
 
 NewFile.defaultProps = {
     maxSize: 10,
+    preview: true,
     timeForRemoveError: 5000,
     fileExtensions: ['jpg', 'jpeg', 'png', 'pdf', 'heic'],
 }

package/src/components/newFile/newFile.stories.js

@@ -13,6 +13,7 @@ export default {
 
 const Template = (args) => {
     const [files, setFiles] = useState([])
+    const [secondFiles, setSecondFiles] = useState([])
 
     const handleChange = (file) => {
         setFiles((prev) => {
@@ -28,18 +29,53 @@ const Template = (args) => {
         alert(`You want to remove component with id, ${componentId}`)
     }
 
+    const secondHandleChange = (file) => {
+        setSecondFiles((prev) => {
+            return [...prev, file]
+        })
+    }
+
+    const secondHandleRemove = (id) => {
+        setSecondFiles((prevItems) => prevItems.filter((item) => item.uuid !== id))
+    }
+
+    const secondHandleRemoveComponent = (componentId) => {
+        alert(`You want to remove component with id, ${componentId}`)
+    }
+
     return (
-        <NewFile
-            {...args}
-            removeFromDOM
-            componentId={2}
-            filesArray={files}
-            change={handleChange}
-            removeFile={handleRemove}
-            removeComponent={handleRemoveComponent}
-            formatError="Փաստաթղթի ֆորմատը չի համապատասխանում"
-            maxSizeError="Փաստաթուղթը գերազանցում է առավելագույն չափը"
-        />
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+            }}
+        >
+            <NewFile
+                {...args}
+                removeFromDOM
+                componentId={2}
+                filesArray={files}
+                change={handleChange}
+                removeFile={handleRemove}
+                removeComponent={handleRemoveComponent}
+                formatError="Փաստաթղթի ֆորմատը չի համապատասխանում"
+                maxSizeError="Փաստաթուղթը գերազանցում է առավելագույն չափը"
+            />
+
+            <NewFile
+                {...args}
+                removeFromDOM
+                height="50px"
+                preview={false}
+                componentId={2}
+                filesArray={secondFiles}
+                change={secondHandleChange}
+                removeFile={secondHandleRemove}
+                removeComponent={secondHandleRemoveComponent}
+                formatError="Փաստաթղթի ֆորմատը չի համապատասխանում"
+                maxSizeError="Փաստաթուղթը գերազանցում է առավելագույն չափը"
+            />
+        </div>
     )
 }
 

package/src/components/table/td.js

@@ -90,6 +90,7 @@ const TD = ({
                 fontWeight: tBodyFontWeight,
                 minWidth: tableColumnMinWidth,
                 maxWidth: tableColumnMaxWidth,
+                whiteSpace: Array.isArray(item) ? 'nowrap' : 'wrap',
                 borderColor: hideBorder ? 'transparent' : '#eeeeee',
                 boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : '',
                 borderTopLeftRadius: rowItem && innerIndex === 0 ? rowRadius : '0px',
@@ -219,16 +220,16 @@ const TD = ({
 
                     <div
                         style={{
-                            flexShrink: 10,
+                            flexShrink: 11,
                             marginLeft:
                                 hasOwnerProperty(item, 'contentList') &&
                                 (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
                                     ? hasOwnerProperty(item, 'rightArrow')
                                         ? item.rightArrow === true
                                             ? '0px'
-                                            : '10px'
+                                            : '11px'
                                         : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')
-                                        ? '10px'
+                                        ? '11px'
                                         : '0px'
                                     : '0px',
                             marginRight:
@@ -236,7 +237,7 @@ const TD = ({
                                 (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true)
                                     ? hasOwnerProperty(item, 'rightArrow')
                                         ? item.rightArrow === true
-                                            ? '10px'
+                                            ? '11px'
                                             : '0px'
                                         : '0px'
                                     : '0px',

package/src/components/textarea/index.js

@@ -7,6 +7,11 @@ import SvgRequired from './../icon/Required'
 
 import './textarea.module.css'
 
+export const PositionSide = {
+    TOP: 'top',
+    BOTTOM: 'bottom',
+}
+
 export const Textarea = ({
     size,
     label,
@@ -42,6 +47,7 @@ export const Textarea = ({
     borderHoverColor,
     labelMarginBottom,
     showCharacterCount,
+    characterCountPosition,
 }) => {
     const [error, setError] = useState('')
     const [isHover, setIsHover] = useState(false)
@@ -90,20 +96,18 @@ export const Textarea = ({
             alert('Please add onChange function on Textarea component')
         }
 
-        if (value === '') {
-            setError('')
-        }
-
-        setInnerValue(value)
-    }, [value, onChange])
-
-    useEffect(() => {
         if (errorMessage) {
             setError(errorMessage)
         } else {
             setError('')
         }
-    }, [errorMessage])
+
+        if (value === '') {
+            setError('')
+        }
+
+        setInnerValue(value)
+    }, [value, onChange, errorMessage])
 
     return (
         <div
@@ -141,7 +145,7 @@ export const Textarea = ({
                     ''
                 )}
 
-                {showCharacterCount && maxLength && (
+                {showCharacterCount && maxLength && characterCountPosition === 'top' && (
                     <span
                         style={{
                             color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
@@ -195,17 +199,42 @@ export const Textarea = ({
                 onMouseEnter={handleMouseEnter}
                 onMouseLeave={handleMouseLeave}
             ></textarea>
+            {showCharacterCount && maxLength && characterCountPosition === 'bottom' && (
+                <div
+                    style={{
+                        float: 'right',
+                    }}
+                >
+                    <span
+                        style={{
+                            color: labelColor ? labelColor : configStyles.TEXTAREA.labelColor,
+                            fontSize: labelSize ? labelSize : configStyles.TEXTAREA.labelSize,
+                        }}
+                    >
+                        {maxLength - value.length} նիշ
+                    </span>
+                </div>
+            )}
+
             {error ? (
-                <span
+                <div
                     style={{
-                        display: 'inline-block',
-                        fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
-                        color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
-                        marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop,
+                        clear: 'both',
+                        wordBreak: 'break-all',
+                        maxWidth: width ? width : configStyles.TEXTAREA.width,
                     }}
                 >
-                    {error}
-                </span>
+                    <span
+                        style={{
+                            display: 'inline-block',
+                            fontSize: errorSize ? errorSize : configStyles.TEXTAREA.errorSize,
+                            color: errorColor ? errorColor : configStyles.TEXTAREA.errorColor,
+                            marginTop: marginTop ? marginTop : configStyles.TEXTAREA.marginTop,
+                        }}
+                    >
+                        {error}
+                    </span>
+                </div>
             ) : (
                 ''
             )}
@@ -248,4 +277,9 @@ Textarea.propTypes = {
     borderHoverColor: PropTypes.string,
     labelMarginBottom: PropTypes.string,
     onChange: PropTypes.func.isRequired,
+    characterCountPosition: PropTypes.oneOf(Object.values(PositionSide)),
+}
+
+Textarea.defaultProps = {
+    characterCountPosition: 'top',
 }

package/src/components/textarea/textarea.stories.js

@@ -1,9 +1,14 @@
 import React, { useState } from 'react'
-import { Textarea } from '.'
+import { Textarea, PositionSide } from '.'
 
 export default {
     Comment: Textarea,
     title: 'Components/Textarea',
+    argsType: {
+        characterCountPosition: {
+            options: Object.values(PositionSide),
+        },
+    },
 }
 
 const Template = (args) => {
@@ -47,4 +52,5 @@ Default.args = {
     showCharacterCount: true, // for showing textarea character count
     borderHoverColor: '#3C393E',
     borderFocusColor: '#00236A',
+    characterCountPosition: 'top',
 }

package/src/stories/changelog.stories.mdx

@@ -116,9 +116,47 @@ import StackAlt from './assets/stackalt.svg';
 
 # Changelog
 
-### v0.0.59
-
-1. Change: errorMesage to errorMessage (in all components)
+### v0.0.119
+1. Bugfix: white space
+2. Change: Textarea show error message logic
+3. Change: errorMessage location in useEffect
+4. Add: posibility to change character coount position in textarea component
+5. Add: posibility use NewFile component without preview mode
+6. Add: props preview for NewFile, uploadBtnFont, uploadBtnSize, uploadBtnLabel, uploadBtnColor, uploadBtnHeight, uploadBtnBackgroundColor
+7. Change: captcha to uppercase, Add: second file component in story
+
+### v0.0.118
+
+1. Change: Radio component implementation 
+2. Refactor: structure Radio component, Add: possibility custom styles
+3. Add: props on table component, for min max width, open list font-size and font family
+4. Remove: dots from table open list
+
+### v0.0.117
+1. Add: call toString function on every content with value 0 in table component
+2. Add: font family prop on input, select, newautocomplete, textarea components
+3. Fix: configStyles declaration position
+
+### v0.0.116
+1. Change: property check in Select component
+2. Add: CheckboxGroup component
+3. Change: SingleCheckbox component, check props in TUI usage and configuration sections
+4. Add: hover logic on modal component for show zoom icon
+5. Change: show content logic in table component
+6. Set: prop type array or object in checkbox component
+7. Add: hideBorder boolean prop on table component for hide borders
+8. Set: css outline none, on button component
+9. Change: Proptypes.oneOf to Proptypes.oneOfType for checkbox
+10. Refactor: className props for all components
+11. Change: table body textAlign show logic, Add: the same logic for header
+12. Add: tHeadTextAlign prop in propTypes object in Table component
+13. Change: configStyles variable declaration place
+14. Add: errorSize prop in config just for set value by default
+15. Add: posibility on table to show row as items, see props in configuration tab
+
+### v0.0.115
+Refactor: table check sortingArrows property logic
+Add: maxLength prop to global config for input component, set highest value by default 255 characters
 
 ### v0.0.60
 
@@ -128,4 +166,7 @@ import StackAlt from './assets/stackalt.svg';
 4. Change: select prop jsonData to options always get an array
 5. Add: new functionality on select component, multiple mode
 
+### v0.0.59
+
+1. Change: errorMesage to errorMessage (in all components)
 

package/src/stories/configuration.stories.mdx

@@ -589,6 +589,13 @@ import StackAlt from './assets/stackalt.svg';
   putFileHere: 'Տեղադրել ֆայլը այստեղ',                 // for file place text
   hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)',       // for file place background color when hover on file place and there is a choosen file
   listItemBackgroundErrorColor: 'rgba(255, 0, 0, 0.7)', // for file multiple mode error background color
+
+  uploadBtnFont: 'Arial', // for button font familty
+  uploadBtnSize: '14px', // for button font size
+  uploadBtnLabel: 'Բեռնել', // for button text
+  uploadBtnColor: '#fff', // for button color
+  uploadBtnHeight: '30px', // for button height
+  uploadBtnBackgroundColor: 'rgba(0, 35, 106, 1)' // for button background color
 }
 ```
 

package/tui.config.js

@@ -388,6 +388,13 @@ module.exports = {
         putFileHere: 'Տեղադրել ֆայլը այստեղ', // for file place text
         hiddenBackgroundColor: 'rgba(60, 57, 62, 0.4)', // for file place background color when hover on file place and there is a choosen file
         listItemBackgroundErrorColor: '#F6F8F8', // for file multiple mode error background color
+
+        uploadBtnFont: 'Arial', // for button font familty
+        uploadBtnSize: '14px', // for button font size
+        uploadBtnLabel: 'Բեռնել', // for button text
+        uploadBtnColor: '#fff', // for button color
+        uploadBtnHeight: '30px', // for button height
+        uploadBtnBackgroundColor: 'rgba(0, 35, 106, 1)' // for button background color
     },
     // default properties for <Modal /> component
     MODAL: {