@xaypay/tui 0.0.72 → 0.0.73

package/dist/index.es.js

@@ -461,7 +461,7 @@ const Typography = ({
       textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
       textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
       backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
-      color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
+      color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
     },
     ...props,
     className: classProps,
@@ -1261,7 +1261,13 @@ const Select = ({
     }
   }, [opened]);
   useEffect(() => {
-    selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
+    if (selected) {
+      if (selected.length > 0) {
+        setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
+      } else {
+        setNewSelected([]);
+      }
+    }
     if (!multiple) {
       options && options.length > 0 && setExistOptions(options);
     } else {
@@ -1278,7 +1284,7 @@ const Select = ({
       });
       setExistOptions(modifiedOptions);
     }
-  }, [options, multiple, selected]);
+  }, [options, multiple, selected, selected.length]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default.createElement("label", {
@@ -2515,9 +2521,12 @@ const NewFile = ({
   borderColor,
   uploadColor,
   defaultData,
+  formatError,
   errorMessage,
   fileSizeText,
+  maxSizeError,
   progressColor,
+  noChoosenFile,
   fileExtensions,
   listItemHeight,
   backgroundColor,
@@ -2576,20 +2585,20 @@ const NewFile = ({
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: 'ֆայլի սխալ ֆորմատ'
+                check: formatError
               });
             }
           } else {
             change({
               file: file[ix],
               uuid: v4(),
-              check: 'առավելագույն ծավալ'
+              check: maxSizeError
             });
           }
         }
       }
       if (file.length === 0 && memoizedItems.length === 0) {
-        setError('Ֆայլը ընտրված չէ');
+        setError(noChoosenFile);
       }
     } else {
       if (file[0]) {
@@ -2605,16 +2614,16 @@ const NewFile = ({
             }
           } else {
             setImage(null);
-            setError('ֆայլի սխալ ֆորմատ');
+            setError(formatError);
           }
         } else {
           setImage(null);
-          setError('առավելագույն ծավալ');
+          setError(maxSizeError);
         }
       }
       if (file.length === 0) {
         setImage(null);
-        setError('Ֆայլը ընտրված չէ');
+        setError(noChoosenFile);
       }
     }
   };
@@ -2846,12 +2855,15 @@ NewFile.propTypes = {
   labelSize: PropTypes.string,
   labelColor: PropTypes.string,
   errorColor: PropTypes.string,
+  formatError: PropTypes.string,
   putFileHere: PropTypes.string,
   borderColor: PropTypes.string,
   uploadColor: PropTypes.string,
   defaultData: PropTypes.object,
+  maxSizeError: PropTypes.string,
   errorMessage: PropTypes.string,
   fileSizeText: PropTypes.string,
+  noChoosenFile: PropTypes.string,
   progressColor: PropTypes.string,
   deleteComponent: PropTypes.bool,
   listItemHeight: PropTypes.string,
@@ -3062,7 +3074,7 @@ Textarea.propTypes = {
   labelRequiredColor: PropTypes.string
 };
 
-var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}";
+var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
 var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
 styleInject(css_248z$1);
 
@@ -3151,6 +3163,7 @@ const SvgNextarrow = ({
 }));
 
 const Pagination = ({
+  goTo,
   onChange,
   totalCount,
   siblingCount,
@@ -3158,6 +3171,8 @@ const Pagination = ({
   offset,
   className
 }) => {
+  const [inpVal, setInpVal] = useState('');
+  const [error, setError] = useState(false);
   const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
@@ -3200,6 +3215,40 @@ const Pagination = ({
   const onPreviousFive = e => {
     currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
   };
+  const handleChangeInput = e => {
+    setError(false);
+    if (e.target.value.trim() !== '') {
+      const val = parseInt(e.target.value);
+      if (Number.isInteger(val)) {
+        setInpVal(val);
+      } else {
+        setInpVal('');
+      }
+    } else {
+      setInpVal('');
+    }
+  };
+  const handleKeyDown = e => {
+    const forbiddenKeys = ["e", ".", "+", "-"];
+    if (forbiddenKeys.includes(e.key)) {
+      e.preventDefault();
+    }
+    if (e.keyCode === 13) {
+      if (inpVal === '') {
+        setError(true);
+      } else {
+        if (inpVal <= 1) {
+          setInpVal(1);
+          onPageChange(1);
+        } else if (inpVal >= totalCount / offset) {
+          setInpVal(Math.ceil(totalCount / offset));
+          onPageChange(Math.ceil(totalCount / offset));
+        } else {
+          onPageChange(inpVal);
+        }
+      }
+    }
+  };
   let lastPage = paginationRange[paginationRange.length - 1];
   return /*#__PURE__*/React__default.createElement("ul", {
     className: classProps
@@ -3207,9 +3256,9 @@ const Pagination = ({
     style: {
       transform: 'rotate(180deg)'
     },
-    className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
-    disabled: currentPage === 1 ? true : false
+    disabled: currentPage === 1 ? true : false,
+    className: `${styles$1["pagination-btn"]} pagination-btn-rem`
   }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
@@ -3238,11 +3287,35 @@ const Pagination = ({
     }, pageNumber);
   }), /*#__PURE__*/React__default.createElement("button", {
     onClick: onNext,
-    className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
-    disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)));
+    disabled: currentPageNumber === lastPage ? true : false,
+    className: `${styles$1["pagination-btn"]} pagination-btn-rem`
+  }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), goTo && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
+    onKeyDown: handleKeyDown,
+    onInput: handleChangeInput,
+    type: "number",
+    style: {
+      width: '53px',
+      height: '30px',
+      outline: 'none',
+      color: '#3C393E',
+      fontSize: '13px',
+      margin: '0px 6px',
+      fontWeight: '500',
+      textAlign: 'center',
+      border: '1px solid',
+      borderRadius: '6px',
+      borderColor: error ? 'red' : '#00236a'
+    },
+    value: inpVal
+  }), /*#__PURE__*/React__default.createElement("span", {
+    style: {
+      color: '#3C393E',
+      fontSize: '13px'
+    }
+  }, "\u0537\u057B")));
 };
 Pagination.propTypes = {
+  goTo: PropTypes.bool,
   offset: PropTypes.number,
   totalCount: PropTypes.number,
   className: PropTypes.string,

package/dist/index.js

@@ -491,7 +491,7 @@ const Typography = ({
       textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform' + variant],
       textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration' + variant],
       backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor' + variant],
-      color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
+      color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color' + variant] : color ? color : configStyles.TYPOGRAPHY['color' + variant]
     },
     ...props,
     className: classProps,
@@ -1291,7 +1291,13 @@ const Select = ({
     }
   }, [opened]);
   React.useEffect(() => {
-    selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
+    if (selected) {
+      if (selected.length > 0) {
+        setNewSelected(isObjectEmpty(selected[0]) ? [] : selected);
+      } else {
+        setNewSelected([]);
+      }
+    }
     if (!multiple) {
       options && options.length > 0 && setExistOptions(options);
     } else {
@@ -1308,7 +1314,7 @@ const Select = ({
       });
       setExistOptions(modifiedOptions);
     }
-  }, [options, multiple, selected]);
+  }, [options, multiple, selected, selected.length]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: classProps
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {
@@ -2545,9 +2551,12 @@ const NewFile = ({
   borderColor,
   uploadColor,
   defaultData,
+  formatError,
   errorMessage,
   fileSizeText,
+  maxSizeError,
   progressColor,
+  noChoosenFile,
   fileExtensions,
   listItemHeight,
   backgroundColor,
@@ -2606,20 +2615,20 @@ const NewFile = ({
               change({
                 file: file[ix],
                 uuid: v4(),
-                check: 'ֆայլի սխալ ֆորմատ'
+                check: formatError
               });
             }
           } else {
             change({
               file: file[ix],
               uuid: v4(),
-              check: 'առավելագույն ծավալ'
+              check: maxSizeError
             });
           }
         }
       }
       if (file.length === 0 && memoizedItems.length === 0) {
-        setError('Ֆայլը ընտրված չէ');
+        setError(noChoosenFile);
       }
     } else {
       if (file[0]) {
@@ -2635,16 +2644,16 @@ const NewFile = ({
             }
           } else {
             setImage(null);
-            setError('ֆայլի սխալ ֆորմատ');
+            setError(formatError);
           }
         } else {
           setImage(null);
-          setError('առավելագույն ծավալ');
+          setError(maxSizeError);
         }
       }
       if (file.length === 0) {
         setImage(null);
-        setError('Ֆայլը ընտրված չէ');
+        setError(noChoosenFile);
       }
     }
   };
@@ -2876,12 +2885,15 @@ NewFile.propTypes = {
   labelSize: PropTypes__default["default"].string,
   labelColor: PropTypes__default["default"].string,
   errorColor: PropTypes__default["default"].string,
+  formatError: PropTypes__default["default"].string,
   putFileHere: PropTypes__default["default"].string,
   borderColor: PropTypes__default["default"].string,
   uploadColor: PropTypes__default["default"].string,
   defaultData: PropTypes__default["default"].object,
+  maxSizeError: PropTypes__default["default"].string,
   errorMessage: PropTypes__default["default"].string,
   fileSizeText: PropTypes__default["default"].string,
+  noChoosenFile: PropTypes__default["default"].string,
   progressColor: PropTypes__default["default"].string,
   deleteComponent: PropTypes__default["default"].bool,
   listItemHeight: PropTypes__default["default"].string,
@@ -3092,7 +3104,7 @@ Textarea.propTypes = {
   labelRequiredColor: PropTypes__default["default"].string
 };
 
-var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}";
+var css_248z$1 = ".pagination-module_listItem__b1-WN:focus{background-color:#4caf50;color:#fff}.pagination-module_listItem__b1-WN:hover:not(.pagination-module_active__KwBDp){background-color:#ddd}.pagination-module_pagination-bar__MrtYT{display:flex;flex-direction:row;flex-wrap:nowrap;gap:8px;justify-content:center}.pagination-module_pagination-btn__w8Yh8{border:none;border-radius:6px;outline:none}.pagination-module_pagination-btn__w8Yh8,.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{align-items:center;background-color:#fff;box-shadow:0 0 0 1px #eee;cursor:pointer;display:flex;height:34px;justify-content:center;width:34px}.pagination-module_pagination-item__t3emS,.pagination-module_pagination-jump-next__LAb9Z{border-radius:6px;flex:0 0 auto;font-size:13px;line-height:16px;position:relative;transition:background-color .24s}.pagination-module_pagination-item__t3emS:hover{background-color:#eee}.pagination-module_pagination-item__t3emS.pagination-module_selected__EXzCA{background-color:#00236a;color:#fff}.pagination-module_pagination-jump-next-arrow__aEVD8,.pagination-module_pagination-jump-next-txt__e7nFj{align-items:center;bottom:0;display:flex;font-size:12px;justify-content:center;left:0;line-height:14px;margin:auto;position:absolute;right:0;top:0;transition:opacity .24s,color .24s}.pagination-module_pagination-jump-next-arrow__aEVD8{opacity:0}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-arrow__aEVD8{opacity:1}.pagination-module_pagination-jump-next__LAb9Z:hover .pagination-module_pagination-jump-next-txt__e7nFj{opacity:0}i{color:#3c393e;font-size:12px;line-height:12px}input::-webkit-inner-spin-button,input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}";
 var styles$1 = {"listItem":"pagination-module_listItem__b1-WN","active":"pagination-module_active__KwBDp","pagination-bar":"pagination-module_pagination-bar__MrtYT","pagination-btn":"pagination-module_pagination-btn__w8Yh8","pagination-item":"pagination-module_pagination-item__t3emS","pagination-jump-next":"pagination-module_pagination-jump-next__LAb9Z","selected":"pagination-module_selected__EXzCA","pagination-jump-next-txt":"pagination-module_pagination-jump-next-txt__e7nFj","pagination-jump-next-arrow":"pagination-module_pagination-jump-next-arrow__aEVD8"};
 styleInject(css_248z$1);
 
@@ -3181,6 +3193,7 @@ const SvgNextarrow = ({
 }));
 
 const Pagination = ({
+  goTo,
   onChange,
   totalCount,
   siblingCount,
@@ -3188,6 +3201,8 @@ const Pagination = ({
   offset,
   className
 }) => {
+  const [inpVal, setInpVal] = React.useState('');
+  const [error, setError] = React.useState(false);
   const [siblingCountNumber, setSibilingCountNumber] = React.useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = React.useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = React.useState(totalCount);
@@ -3230,6 +3245,40 @@ const Pagination = ({
   const onPreviousFive = e => {
     currentPageNumber !== 5 ? onPageChange(currentPageNumber - 5) : onPageChange(currentPageNumber - 4);
   };
+  const handleChangeInput = e => {
+    setError(false);
+    if (e.target.value.trim() !== '') {
+      const val = parseInt(e.target.value);
+      if (Number.isInteger(val)) {
+        setInpVal(val);
+      } else {
+        setInpVal('');
+      }
+    } else {
+      setInpVal('');
+    }
+  };
+  const handleKeyDown = e => {
+    const forbiddenKeys = ["e", ".", "+", "-"];
+    if (forbiddenKeys.includes(e.key)) {
+      e.preventDefault();
+    }
+    if (e.keyCode === 13) {
+      if (inpVal === '') {
+        setError(true);
+      } else {
+        if (inpVal <= 1) {
+          setInpVal(1);
+          onPageChange(1);
+        } else if (inpVal >= totalCount / offset) {
+          setInpVal(Math.ceil(totalCount / offset));
+          onPageChange(Math.ceil(totalCount / offset));
+        } else {
+          onPageChange(inpVal);
+        }
+      }
+    }
+  };
   let lastPage = paginationRange[paginationRange.length - 1];
   return /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classProps
@@ -3237,9 +3286,9 @@ const Pagination = ({
     style: {
       transform: 'rotate(180deg)'
     },
-    className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
     onClick: onPrevious,
-    disabled: currentPage === 1 ? true : false
+    disabled: currentPage === 1 ? true : false,
+    className: `${styles$1["pagination-btn"]} pagination-btn-rem`
   }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
       let currentPageIndex = paginationRange.indexOf(currentPageNumber);
@@ -3268,11 +3317,35 @@ const Pagination = ({
     }, pageNumber);
   }), /*#__PURE__*/React__default["default"].createElement("button", {
     onClick: onNext,
-    className: `${styles$1["pagination-btn"]} pagination-btn-rem`,
-    disabled: currentPageNumber === lastPage ? true : false
-  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null)));
+    disabled: currentPageNumber === lastPage ? true : false,
+    className: `${styles$1["pagination-btn"]} pagination-btn-rem`
+  }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null)), goTo && /*#__PURE__*/React__default["default"].createElement("div", null, /*#__PURE__*/React__default["default"].createElement("input", {
+    onKeyDown: handleKeyDown,
+    onInput: handleChangeInput,
+    type: "number",
+    style: {
+      width: '53px',
+      height: '30px',
+      outline: 'none',
+      color: '#3C393E',
+      fontSize: '13px',
+      margin: '0px 6px',
+      fontWeight: '500',
+      textAlign: 'center',
+      border: '1px solid',
+      borderRadius: '6px',
+      borderColor: error ? 'red' : '#00236a'
+    },
+    value: inpVal
+  }), /*#__PURE__*/React__default["default"].createElement("span", {
+    style: {
+      color: '#3C393E',
+      fontSize: '13px'
+    }
+  }, "\u0537\u057B")));
 };
 Pagination.propTypes = {
+  goTo: PropTypes__default["default"].bool,
   offset: PropTypes__default["default"].number,
   totalCount: PropTypes__default["default"].number,
   className: PropTypes__default["default"].string,

package/package.json

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

package/src/components/newFile/index.js

@@ -39,9 +39,12 @@ export const NewFile = ({
     borderColor,
     uploadColor,
     defaultData,
+    formatError,
     errorMessage,
     fileSizeText,
+    maxSizeError,
     progressColor,
+    noChoosenFile,
     fileExtensions,
     listItemHeight,
     backgroundColor,
@@ -106,20 +109,20 @@ export const NewFile = ({
                             change({
                                 file: file[ix],
                                 uuid: uuidv4(),
-                                check: 'ֆայլի սխալ ֆորմատ'
+                                check: formatError
                             });
                         }
                     } else {
                         change({
                             file: file[ix],
                             uuid: uuidv4(),
-                            check: 'առավելագույն ծավալ'
+                            check: maxSizeError
                         });
                     }
                 }
             }
             if (file.length === 0 && memoizedItems.length === 0) {
-                setError('Ֆայլը ընտրված չէ');
+                setError(noChoosenFile);
             }
         } else {
             if (file[0]) {
@@ -135,16 +138,16 @@ export const NewFile = ({
                         }
                     } else {
                         setImage(null);
-                        setError('ֆայլի սխալ ֆորմատ');
+                        setError(formatError);
                     }
                 } else {
                     setImage(null);
-                    setError('առավելագույն ծավալ');
+                    setError(maxSizeError);
                 }
             }
             if (file.length === 0) {
                 setImage(null);
-                setError('Ֆայլը ընտրված չէ');
+                setError(noChoosenFile);
             }
         }
     };
@@ -450,12 +453,15 @@ NewFile.propTypes = {
     labelSize: PropTypes.string,
     labelColor: PropTypes.string,
     errorColor: PropTypes.string,
+    formatError: PropTypes.string,
     putFileHere: PropTypes.string,
     borderColor: PropTypes.string,
     uploadColor: PropTypes.string,
     defaultData: PropTypes.object,
+    maxSizeError: PropTypes.string,
     errorMessage: PropTypes.string,
     fileSizeText: PropTypes.string,
+    noChoosenFile: PropTypes.string,
     progressColor: PropTypes.string,
     deleteComponent: PropTypes.bool,
     listItemHeight: PropTypes.string,

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

@@ -33,7 +33,7 @@ const Template = (args) => {
 export const Default = Template.bind({});
 Default.args = {
   label: 'File component',
-  deleteComponent: true,
+  deleteComponent: false,
   disabled: false,
   defaultData: {
     url: 'https://images.pexels.com/photos/753626/pexels-photo-753626.jpeg?auto=compress&cs=tinysrgb&w=1600',

package/src/components/pagination/index.js

@@ -3,12 +3,12 @@ import PropTypes from "prop-types";
 import classnames from "classnames";
 import styles from "./pagination.module.css";
 import { PaginationRange, Dots } from "./paginationRange";
-import Icon from "../icon/Icon";
 
 import DotsIcon from './../../components/icon/Dots';
 import SvgNextarrow from './../../components/icon/Nextarrow';
 
 export const Pagination = ({
+    goTo,
     onChange,
     totalCount,
     siblingCount,
@@ -16,6 +16,8 @@ export const Pagination = ({
     offset,
     className,
 }) => {
+  const [inpVal, setInpVal] = useState('');
+  const [error, setError] = useState(false);
   const [siblingCountNumber, setSibilingCountNumber] = useState(siblingCount);
   const [currentPageNumber, setCurrentPage] = useState(currentPage);
   const [currentTotalCount, setcurrentTotalCount] = useState(totalCount);
@@ -67,6 +69,43 @@ export const Pagination = ({
             : onPageChange(currentPageNumber - 4);
     };
 
+    const handleChangeInput = (e) => {
+        setError(false);
+        if (e.target.value.trim() !== '') {
+            const val = parseInt(e.target.value);
+            if (Number.isInteger(val)) {
+                setInpVal(val);
+            } else {
+                setInpVal('');
+            }
+        } else {
+            setInpVal('');
+        }
+    };
+
+    const handleKeyDown = (e) => {
+        const forbiddenKeys = ["e", ".", "+", "-"];
+        if (forbiddenKeys.includes(e.key)) {
+            e.preventDefault();
+        }
+
+        if (e.keyCode === 13) {
+            if (inpVal === '') {
+                setError(true);
+            } else {
+                if (inpVal <= 1) {
+                    setInpVal(1);
+                    onPageChange(1);
+                } else if (inpVal >= (totalCount / offset)) {
+                    setInpVal(Math.ceil(totalCount / offset));
+                    onPageChange(Math.ceil(totalCount / offset));
+                } else {
+                    onPageChange(inpVal);
+                }
+            }
+        }
+    };
+
     let lastPage = paginationRange[paginationRange.length - 1];
     return (
         <ul className={classProps}>
@@ -74,9 +113,9 @@ export const Pagination = ({
                 style={{
                     transform: 'rotate(180deg)'
                 }}
-                className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 onClick={onPrevious}
                 disabled={currentPage === 1 ? true : false}
+                className={`${styles["pagination-btn"]} pagination-btn-rem`}
             >
                 <SvgNextarrow />
             </button>
@@ -157,18 +196,50 @@ export const Pagination = ({
                     </li>
                 );
             })}
+
             <button
                 onClick={onNext}
-                className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 disabled={currentPageNumber === lastPage ? true : false}
+                className={`${styles["pagination-btn"]} pagination-btn-rem`}
             >
                 <SvgNextarrow />
             </button>
+
+            {
+                goTo && <div>
+                    <input
+                        onKeyDown={handleKeyDown}
+                        onInput={handleChangeInput}
+                        type='number'
+                        style={{
+                            width: '53px',
+                            height: '30px',
+                            outline: 'none',
+                            color: '#3C393E',
+                            fontSize: '13px',
+                            margin: '0px 6px',
+                            fontWeight: '500',
+                            textAlign: 'center',
+                            border: '1px solid',
+                            borderRadius: '6px',
+                            borderColor: error ? 'red' : '#00236a'
+                        }}
+                        value={inpVal}
+                    />
+                    <span
+                        style={{
+                            color: '#3C393E',
+                            fontSize: '13px'
+                        }}
+                    >Էջ</span>
+                </div>
+            }
         </ul>
     );
 };
 
 Pagination.propTypes = {
+    goTo: PropTypes.bool,
     offset: PropTypes.number,
     totalCount: PropTypes.number,
     className: PropTypes.string,

package/src/components/pagination/pagination.module.css

@@ -78,4 +78,16 @@ i {
     font-size: 12px;
     line-height: 12px;
     color: #3C393E;
-}
+}
+
+/* Works for Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Works for Firefox */
+input[type="number"] {
+  -moz-appearance: textfield;
+}

package/src/components/pagination/pagination.stories.js

@@ -316,7 +316,7 @@ const data = [
     phone: "572-905-5251",
   },
 ];
-const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
+const Template = ({ goTo, offset, currentPage, siblingCount, totalCount }) => {
   const [currentPageNumber, setCurrentPageNumber] = useState(currentPage);
   const currentTableData = useMemo(() => {
     const firstPageIndex = (currentPageNumber - 1) * offset;
@@ -351,6 +351,7 @@ const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
         </tbody>
       </table>
       <Pagination
+        goTo={goTo}
         currentPage={currentPage}
         totalCount={totalCount}
         offset={offset}
@@ -364,8 +365,9 @@ const Template = ({ offset, currentPage, siblingCount, totalCount }) => {
 export const Default = Template.bind({});
 
 Default.args = {
+  goTo: false,
   offset: 10,
-  currentPage: 4,
+  currentPage: 1,
   siblingCount: 2,
   totalCount: 44
 };

package/src/components/select/index.js

@@ -170,7 +170,14 @@ export const Select = ({
     }, [opened]);
 
     useEffect(() => {
-        selected && selected.length > 0 && setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
+        if (selected) {
+            if (selected.length > 0) {
+                setNewSelected(isObjectEmpty(selected[0]) ? []: selected );
+            } else {
+                setNewSelected([]);
+            }
+        }
+
         if (!multiple) {
             options && options.length > 0 && setExistOptions(options);
         } else {
@@ -187,7 +194,7 @@ export const Select = ({
             });
             setExistOptions(modifiedOptions);
         }
-    }, [options, multiple, selected]);
+    }, [options, multiple, selected, selected.length]);
     
     return (
         <div className={classProps}>

package/src/components/select/select.stories.js

@@ -25,4 +25,3 @@ Default.args = {
     selected: [{"bbb":"1", "value":"Կենտրոն"}, {"bbb":"2", "value":"Մալաթիա"}],
     keyNames: {name: 'value', id : 'bbb'}
 };
-

package/src/components/typography/index.js

@@ -74,7 +74,7 @@ export const Typography = ({
 				textTransform: textTransform ? textTransform : configStyles.TYPOGRAPHY['textTransform'+variant],
 				textDecoration: textDecoration ? textDecoration : configStyles.TYPOGRAPHY['textDecoration'+variant],
 				backgroundColor: backgroundColor ? backgroundColor : configStyles.TYPOGRAPHY['backgroundColor'+variant],
-				color: isHover ? colorHover ? colorHover : configStyles.TYPOGRAPHY['colorHover'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
+				color: isHover ? colorHover ? colorHover : color ? color : configStyles.TYPOGRAPHY['color'+variant] : color ? color : configStyles.TYPOGRAPHY['color'+variant],
 			},
 			...props,
 			className: classProps,

package/src/components/typography/typography.stories.js

@@ -13,9 +13,10 @@ export const Template = (args) => <>
 	{
 		staticTag.map((tag,key) => {
 			return <Typography
+				{...args}
 				key={key}
 				variant={tag} 
-				color={"#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase()}
+				color='#a3d177'
 			>
 				{tag}
 			</Typography>;

package/src/stories/configuration.stories.mdx

@@ -556,7 +556,10 @@ import StackAlt from './assets/stackalt.svg';
   progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
   progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
   progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+  formatError: 'ֆայլի սխալ ֆորմատ',                     // for file error text when file extention is invalid
+  noChoosenFile: 'Ֆայլը ընտրված չէ',                    // for file error text when file is not choosen
   listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+  maxSizeError: 'Առավելագույն ծավալ',                   // for file error text when choosen file size is more then maxSize prop
   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

package/tui.config.js

@@ -101,14 +101,14 @@ module.exports = {
         sizeh6: '14px',                                    // for variant h6 font size
         sizespan: '12px',                                  // for variant span font size
 
-        textAlignp: '0px',                                 // for variant p text align
-        textAlignh1: '0px',                                // for variant h1 text align
-        textAlignh2: '0px',                                // for variant h2 text align
-        textAlignh3: '0px',                                // for variant h3 text align
-        textAlignh4: '0px',                                // for variant h4 text align
-        textAlignh5: '0px',                                // for variant h5 text align
-        textAlignh6: '0px',                                // for variant h6 text align
-        textAlignspan: '0px',                              // for variant span text align
+        textAlignp: 'left',                                 // for variant p text align
+        textAlignh1: 'left',                                // for variant h1 text align
+        textAlignh2: 'left',                                // for variant h2 text align
+        textAlignh3: 'left',                                // for variant h3 text align
+        textAlignh4: 'left',                                // for variant h4 text align
+        textAlignh5: 'left',                                // for variant h5 text align
+        textAlignh6: 'left',                                // for variant h6 text align
+        textAlignspan: 'left',                              // for variant span text align
 
         weightp: '500',                                    // for variant p font weight
         weighth1: '400',                                   // for variant h1 font weight
@@ -119,15 +119,6 @@ module.exports = {
         weighth6: '600',                                   // for variant h6 font weight
         weightspan: '500',                                 // for variant span font weight
 
-        colorHoverp: '#3C393E',                            // for variant p color in hover mode
-        colorHoverh1: '#3C393E',                           // for variant h1 color in hover mode
-        colorHoverh2: '#3C393E',                           // for variant h2 color in hover mode
-        colorHoverh3: '#3C393E',                           // for variant h3 color in hover mode
-        colorHoverh4: '#3C393E',                           // for variant h4 color in hover mode
-        colorHoverh5: '#3C393E',                           // for variant h5 color in hover mode
-        colorHoverh6: '#3C393E',                           // for variant h6 color in hover mode
-        colorHoverspan: '#3C393E',                         // for variant span color in hover mode
-
         backgroundColorp: 'transparent',                   // for variant p background color
         backgroundColorh1: 'transparent',                  // for variant h1 background color
         backgroundColorh2: 'transparent',                  // for variant h2 background color
@@ -363,7 +354,10 @@ module.exports = {
         progressFailedColor: '#E40E00',                       // for file list item progress backfround color when file upload is failed
         progressSuccessColor: '#069768',                      // for file list item progress background color when file upload is success
         progressLoadingColor: '#051942',                      // for file list item progress background color when file upload is loading
+        formatError: 'ֆայլի սխալ ֆորմատ',                     // for file error text when file extention is invalid
+        noChoosenFile: 'Ֆայլը ընտրված չէ',                    // for file error text when file is not choosen
         listItemBackgroundColor: '#F6F8F8',                   // for file list item background color
+        maxSizeError: 'Առավելագույն ծավալ',                   // for file error text when choosen file size is more then maxSize prop
         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