@xaypay/tui 0.0.97 → 0.0.99

package/dist/index.js

@@ -96,9 +96,9 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$g = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
+var css_248z$f = ".file-module_file-form__l13d5{align-items:center;background:#fbfbfb;border:2px dashed;border-radius:6px;cursor:pointer;display:flex;flex-direction:column;height:190px;justify-content:space-between;overflow:hidden;padding:4px 0;position:relative;width:100%}.file-module_file-form-wrap__qY--B:before{background:rgba(60,57,62,.4);border-radius:6px;content:\"\";height:100%;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transition:opacity .24s;width:100%;z-index:1}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover:before{opacity:1;pointer-events:unset}.file-module_file-form-wrap__qY--B.file-module_active__L1gPt:hover .file-module_delete-upload-icon__PWN66{opacity:1}.file-module_file-form-inner-upload__tq3Dn{align-items:center;display:flex;flex-direction:column;justify-content:space-between;padding-bottom:16px;padding-top:48px}.file-module_file-form-inner-upload__tq3Dn>img{display:block;margin-bottom:14px}.file-module_upload-info__a8GFs{margin-bottom:40px;max-width:150px;text-align:center}.file-module_upload-info-txt__l11uN{color:#0da574}.file-module_file-form__l13d5.file-module_default__t7KU0{border-color:#d1d1d1}.file-module_file-form__l13d5.file-module_error__H-M4Z{border-color:#e00!important}.file-module_file-form__l13d5.file-module_accept__WTW6V{border-color:#00236a}.file-module_delete-upload-icon__PWN66{align-items:center;background:#fff;border-radius:6px;cursor:pointer;display:flex;height:26px;justify-content:center;opacity:0;position:absolute;right:10px;top:10px;transition:opacity .24s;width:26px;z-index:11}.file-module_delete-upload-icon__PWN66>i{color:#00236a;font-size:16px}.file-module_upload-file-content__QHMjn{align-items:center;display:flex;height:100%;justify-content:center;max-height:190px;overflow:hidden;position:relative;width:100%}.file-module_upload-file-content__QHMjn>img{display:block;height:auto;max-height:95%;object-fit:contain;width:27.8rem}.file-module_file-form-title__zWTSB{margin-bottom:10px;max-width:390px;word-break:break-all}.file-module_file-form-wrap__qY--B{position:relative;transform:translateZ(0)}";
 var styles$c = {"file-form-wrap":"file-module_file-form-wrap__qY--B","file-form":"file-module_file-form__l13d5","active":"file-module_active__L1gPt","delete-upload-icon":"file-module_delete-upload-icon__PWN66","file-form-inner-upload":"file-module_file-form-inner-upload__tq3Dn","upload-info":"file-module_upload-info__a8GFs","upload-info-txt":"file-module_upload-info-txt__l11uN","default":"file-module_default__t7KU0","error":"file-module_error__H-M4Z","accept":"file-module_accept__WTW6V","upload-file-content":"file-module_upload-file-content__QHMjn","file-form-title":"file-module_file-form-title__zWTSB"};
-styleInject(css_248z$g);
+styleInject(css_248z$f);
 
 const File = ({
   name,
@@ -220,63 +220,6 @@ File.defaultProps = {
   fileExtensions: ['jpg', 'jpeg', 'png', 'pdf']
 };
 
-const _ = require('lodash');
-const compereConfigs = () => {
-  let projectConfig = {};
-  let packageConfig = {};
-  try {
-    packageConfig = require('../tui.config.js');
-  } catch (e) {
-    try {
-      packageConfig = require('../../tui.config.js');
-    } catch (err) {
-      packageConfig = {};
-    }
-  }
-  try {
-    projectConfig = require('../../../../tui.config.js');
-  } catch (error) {
-    projectConfig = {};
-    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
-  }
-
-  return _.merge(packageConfig, projectConfig);
-};
-
-var css_248z$f = "";
-styleInject(css_248z$f);
-
-const Chart = ({
-  width,
-  height
-}) => {
-  compereConfigs();
-  React.useEffect(() => {
-    const canvas = document.getElementById('myChart');
-    // const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
-    const data = [10, 20, 30, 15, 25];
-    const barWidth = 40;
-    const chartHeight = 200;
-    ctx.clearRect(0, 0, canvas.width, canvas.height);
-    data.forEach((value, index) => {
-      const x = index * (barWidth + 10);
-      const y = chartHeight - value;
-      ctx.fillStyle = 'blue';
-      ctx.fillRect(x, y, barWidth, value);
-    });
-  }, []);
-  return /*#__PURE__*/React__default["default"].createElement("canvas", {
-    id: "myChart",
-    width: width,
-    height: height
-  });
-};
-Chart.propTypes = {
-  width: PropTypes__default["default"].number,
-  height: PropTypes__default["default"].number
-};
-
 const SvgCheckboxUnchecked = ({
   title,
   titleId,
@@ -358,6 +301,29 @@ SingleCheckbox.propTypes = {
 var css_248z$e = ".table-module_sorting-arrows__BaN-G:after{content:\"▲\";font-size:11px;position:absolute;right:0;top:calc(50% - 12px)}.table-module_sorting-arrows__BaN-G:before{bottom:calc(50% - 12px);content:\"▼\";font-size:11px;position:absolute;right:0}.table-module_td-span__XHo6k{cursor:pointer;display:inline-block;position:relative}.table-module_td-span__XHo6k>svg{left:0;position:absolute;top:0;z-index:-1}";
 styleInject(css_248z$e);
 
+const _ = require('lodash');
+const compereConfigs = () => {
+  let projectConfig = {};
+  let packageConfig = {};
+  try {
+    packageConfig = require('../tui.config.js');
+  } catch (e) {
+    try {
+      packageConfig = require('../../tui.config.js');
+    } catch (err) {
+      packageConfig = {};
+    }
+  }
+  try {
+    projectConfig = require('../../../../tui.config.js');
+  } catch (error) {
+    projectConfig = {};
+    // console.log(error, 'Project: if you want to use custom styles, create tui.config.js file in your project root');
+  }
+
+  return _.merge(packageConfig, projectConfig);
+};
+
 ({
   dataBody: PropTypes__default["default"].array,
   dataHeader: PropTypes__default["default"].array,
@@ -520,6 +486,11 @@ const Modal = ({
       }
     }
   };
+  const handleESC = e => {
+    if (e.key === 'Escape') {
+      handleCloseModal();
+    }
+  };
   React.useEffect(() => {
     if (type === 'images') {
       if (data) {
@@ -545,9 +516,11 @@ const Modal = ({
     }
   }, [selected]);
   React.useEffect(() => {
+    document.addEventListener('keydown', handleESC, false);
     return () => {
       setSelect(0);
       setInnerData([]);
+      document.removeEventListener('keydown', handleESC, false);
     };
   }, []);
   return /*#__PURE__*/React__default["default"].createElement("div", {
@@ -732,7 +705,7 @@ Modal.defaultProps = {
   type: 'content'
 };
 
-var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{-webkit-appearance:none;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
+var css_248z$c = ".input-module_input-wrap__NunrE{position:relative;width:100%}.input-module_input-content__kP7lZ{-webkit-appearance:none;display:flex;width:100%}input:-webkit-autofill,input:-webkit-autofill:active,input:-webkit-autofill:focus,input:-webkit-autofill:hover{background-color:inherit!important}input::-ms-clear,input::-ms-reveal{display:none}.input-module_error-message-show__OrVSo{animation-fill-mode:forwards;animation-name:input-module_error-show__9MP6k}.input-module_inp-num__vH7HL::-webkit-inner-spin-button,.input-module_inp-num__vH7HL::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.input-module_inp-num__vH7HL[type=number]{-moz-appearance:textfield}@keyframes input-module_error-show__9MP6k{to{bottom:-20px;transform:scaleX(1);-webkit-transform:scaleX(1);-moz-transform:scaleX(1);-ms-transform:scaleX(1);-o-transform:scaleX(1)}}";
 var styles$a = {"input-wrap":"input-module_input-wrap__NunrE","input-content":"input-module_input-content__kP7lZ","error-message-show":"input-module_error-message-show__OrVSo","error-show":"input-module_error-show__9MP6k","inp-num":"input-module_inp-num__vH7HL"};
 styleInject(css_248z$c);
 
@@ -873,14 +846,42 @@ const Input = ({
           change(`${maxNumSize}`);
         }
       }
-      if (floatToFix && floatToFix > 0 && !Number.isInteger(parseFloat(currentValue))) {
+      if (floatToFix && floatToFix > 0) {
         const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
         const int = floatNumParts[0];
         const float = floatNumParts[1];
-        if (float && float.length > floatToFix) {
-          setInnerValue(`${int}.${float.substr(0, floatToFix)}`);
-          if (change) {
-            change(`${int}.${float.substr(0, floatToFix)}`);
+        if (float) {
+          if (float[0] === '0' || float[0] !== '0') {
+            if (float[1] === undefined) {
+              setInnerValue(`${int}.${float[0]}`);
+              if (change) {
+                change(`${int}.${float[0]}`);
+              }
+            } else if (float[1] === '0') {
+              if (float[2] === undefined || float[2] === '0') {
+                setInnerValue(`${int}.${float[0]}`);
+                if (change) {
+                  change(`${int}.${float[0]}`);
+                }
+              } else if (float[2] !== undefined && float[2] !== '0') {
+                setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                if (change) {
+                  change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                }
+              }
+            } else if (float[1] !== undefined && float[1] !== '0') {
+              if (float[2] === undefined || float[2] === '0') {
+                setInnerValue(`${int}.${float[0]}${float[1]}`);
+                if (change) {
+                  change(`${int}.${float[0]}${float[1]}`);
+                }
+              } else if (float[2] !== undefined && float[2] !== '0') {
+                setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                if (change) {
+                  change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                }
+              }
+            }
           }
         }
       } else if (floatToFix === 0) {
@@ -969,14 +970,51 @@ const Input = ({
               change(`${maxNumSize}`);
             }
           }
-          if (floatToFix && floatToFix > 0 && !Number.isInteger(parseFloat(value))) {
+          if (floatToFix && floatToFix > 0) {
             const floatNumParts = typeof value === 'string' ? value.split('.') : value;
             const int = floatNumParts[0];
             const float = floatNumParts[1];
-            if (float && float.length > floatToFix) {
-              setInnerValue(`${int}.${float.substr(0, floatToFix)}`);
+            if (float) {
+              if (float[0] === '0' || float[0] !== '0') {
+                if (float[1] === undefined) {
+                  setInnerValue(`${int}.${float[0]}`);
+                  if (change) {
+                    change(`${int}.${float[0]}`);
+                  }
+                } else if (float[1] === '0') {
+                  if (float[2] === undefined || float[2] === '0') {
+                    setInnerValue(`${int}.${float[0]}`);
+                    if (change) {
+                      change(`${int}.${float[0]}`);
+                    }
+                  } else if (float[2] !== undefined && float[2] !== '0') {
+                    setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                    if (change) {
+                      change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                    }
+                  }
+                } else if (float[1] !== undefined && float[1] !== '0') {
+                  if (float[2] === undefined || float[2] === '0') {
+                    setInnerValue(`${int}.${float[0]}${float[1]}`);
+                    if (change) {
+                      change(`${int}.${float[0]}${float[1]}`);
+                    }
+                  } else if (float[2] !== undefined && float[2] !== '0') {
+                    setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                    if (change) {
+                      change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                    }
+                  }
+                }
+              }
+            }
+          } else if (floatToFix === 0) {
+            const floatNumParts = typeof value === 'string' ? currentValue.split('.') : value;
+            const int = floatNumParts[0];
+            if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+              setInnerValue(`${int}`);
               if (change) {
-                change(`${int}.${float.substr(0, floatToFix)}`);
+                change(`${int}`);
               }
             }
           }
@@ -1353,11 +1391,12 @@ const SvgArrow = ({
   fill: fillColor ? fillColor : '#3C393E'
 }));
 
-var css_248z$a = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:99999999999}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
-var styles$8 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L"};
+var css_248z$a = ".select-module_select-content__GCMDX{-webkit-appearance:none;display:flex;flex-direction:column;position:relative}.select-module_select-content-top__Aw-fB{align-items:center;-webkit-appearance:none;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.select-module_select-content-bottom__ueZCR{animation:select-module_select-show__391hQ .64s linear forwards;-webkit-animation:select-module_select-show__391hQ .64s linear forwards;left:0;max-height:0;overflow:hidden;position:absolute;width:100%;z-index:99999999999}.select-module_select-content-bottom-inner__NWy2X{display:flex;flex-direction:column;max-height:234px;overflow-x:hidden;overflow-y:auto}.select-module_select-content-top-icon__MBrGK{align-items:center;box-sizing:border-box;display:flex;flex:0 0 auto;padding:0 5px 0 20px}.select-module_select-content-top-icon__MBrGK>div{align-items:center;display:flex;height:14px;justify-content:center;width:14px}.select-module_close-icon__SFNaJ{border-right:1px solid #eee;box-sizing:content-box;padding-right:9px}.select-module_arrow-icon__rjHt-{margin-left:9px;transform-origin:center;transition:all .64s ease;-webkit-transition:all .64s ease;-moz-transition:all .64s ease;-ms-transition:all .64s ease;-o-transition:all .64s ease}.select-module_select-content-bottom-row__eKq5L{align-items:center;display:flex;transition:background-color .24s,color .24s;-webkit-transition:background-color .24s,color .24s;-moz-transition:background-color .24s,color .24s;-ms-transition:background-color .24s,color .24s;-o-transition:background-color .24s,color .24s}.select-module_select-content-bottom-row__eKq5L:last-child{margin-bottom:0}.select-module_ellipsis__uNgol{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@keyframes select-module_select-show__391hQ{to{max-height:234px}}";
+var styles$8 = {"select-content":"select-module_select-content__GCMDX","select-content-top":"select-module_select-content-top__Aw-fB","select-content-bottom":"select-module_select-content-bottom__ueZCR","select-show":"select-module_select-show__391hQ","select-content-bottom-inner":"select-module_select-content-bottom-inner__NWy2X","select-content-top-icon":"select-module_select-content-top-icon__MBrGK","close-icon":"select-module_close-icon__SFNaJ","arrow-icon":"select-module_arrow-icon__rjHt-","select-content-bottom-row":"select-module_select-content-bottom-row__eKq5L","ellipsis":"select-module_ellipsis__uNgol"};
 styleInject(css_248z$a);
 
 const Select = ({
+  dots,
   options,
   multiple,
   disabled,
@@ -1608,17 +1647,18 @@ const Select = ({
       onClick: disabled ? _ => _ : _ => handleSelectItem(option),
       onMouseEnter: disabled ? _ => _ : e => handleMouseEnterOption(e),
       onMouseLeave: disabled ? _ => _ : e => handleMouseLeaveOption(e),
-      className: `${styles$8['select-content-bottom-row']}`,
+      className: `${styles$8['select-content-bottom-row']} ${dots || configStyles.SELECT.dots ? styles$8['ellipsis'] : ''}`,
       style: {
+        overflowWrap: !dots && !configStyles.SELECT.dots ? 'anywhere' : 'break-word',
         color: optionItemColor ? optionItemColor : configStyles.SELECT.optionItemColor,
         cursor: optionItemCursor ? optionItemCursor : configStyles.SELECT.optionItemCursor,
         padding: optionItemPadding ? optionItemPadding : configStyles.SELECT.optionItemPadding,
         fontSize: optionItemFontSize ? optionItemFontSize : configStyles.SELECT.optionItemFontSize,
         boxSizing: optionItemBoxSizing ? optionItemBoxSizing : configStyles.SELECT.optionItemBoxSizing,
-        minHeight: optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
+        minHeight: !dots && !configStyles.SELECT.dots ? 'auto' : optionItemMinHeight ? optionItemMinHeight : configStyles.SELECT.optionItemMinHeight,
         fontWeight: optionItemFontWeight ? optionItemFontWeight : configStyles.SELECT.optionItemFontWeight,
-        lineHeight: optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
-        marginBottom: optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
+        lineHeight: dots || configStyles.SELECT.dots ? '46px' : optionItemLineHeight ? optionItemLineHeight : configStyles.SELECT.optionItemLineHeight,
+        marginBottom: !dots && !configStyles.SELECT.dots ? '10px' : optionItemMarginBottom ? optionItemMarginBottom : configStyles.SELECT.optionItemMarginBottom,
         backgroundColor: optionItemBackgroudColor ? optionItemBackgroudColor : configStyles.SELECT.optionItemBackgroudColor
       }
     }, multiple && multipleCheckbox ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
@@ -1635,6 +1675,7 @@ const Select = ({
   }, errorMessage) : '');
 };
 Select.propTypes = {
+  dots: PropTypes__default["default"].bool,
   options: PropTypes__default["default"].array,
   multiple: PropTypes__default["default"].bool,
   onChange: PropTypes__default["default"].func,
@@ -1955,7 +1996,7 @@ const createToast = ({
     toastParentBlock = document.createElement('div');
     toastParentBlock.style.position = 'fixed';
     toastParentBlock.style.display = 'flex';
-    toastParentBlock.style.zIndex = 99999;
+    toastParentBlock.style.zIndex = 9999999999999999999999999;
     toastParentBlock.style.flexDirection = position === 'top-left' || position === 'top-right' || position === 'top-center' ? 'column-reverse' : 'column';
     toastParentBlock.setAttribute('id', styles$7[position]);
     toastParentBlock.appendChild(toastBlock);
@@ -3708,14 +3749,21 @@ const Pagination = ({
     }
   };
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /*#__PURE__*/React__default["default"].createElement("ul", {
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    style: {
+      display: 'flex',
+      margin: '0 auto',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("ul", {
     className: classProps
   }, /*#__PURE__*/React__default["default"].createElement("button", {
     style: {
       transform: 'rotate(180deg)'
     },
     onClick: onPrevious,
-    disabled: currentPage === 1 ? true : false,
+    disabled: currentPageNumber === 1 ? true : false,
     className: `${styles$2["pagination-btn"]} pagination-btn-rem`
   }, /*#__PURE__*/React__default["default"].createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
@@ -3747,7 +3795,7 @@ const Pagination = ({
     onClick: onNext,
     disabled: currentPageNumber === lastPage ? true : false,
     className: `${styles$2["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", {
+  }, /*#__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",
@@ -4005,6 +4053,7 @@ const NewAutocomplete = ({
   const [show, setShow] = React.useState(false);
   const [isHover, setIsHover] = React.useState(false);
   const [isFocus, setIsFocus] = React.useState(false);
+  const [innerError, setInnerError] = React.useState('');
   const [innerValue, setInnerValue] = React.useState('');
   const [innerOptions, setInnerOptions] = React.useState([]);
   const configStyles = compereConfigs();
@@ -4040,6 +4089,7 @@ const NewAutocomplete = ({
     const value = e.target.value;
     const currentId = e.target.id;
     value.length > 0 ? setShow(true) : setShow(false);
+    setInnerError('');
     setInnerValue(value);
     if (value.length >= searchCount) {
       change({
@@ -4105,7 +4155,7 @@ const NewAutocomplete = ({
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
     }, item[keyNames.name]);
-  }))) : innerOptions.length <= 0 ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }))) : innerOptions.length <= 0 ? innerError ? '' : /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       position: 'absolute',
       zIndex: '9999999999',
@@ -4146,6 +4196,9 @@ const NewAutocomplete = ({
       setInnerValue('');
     }
   }, [selected]);
+  React.useEffect(() => {
+    setInnerError(errorMessage);
+  }, [errorMessage]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, label ? /*#__PURE__*/React__default["default"].createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
@@ -4199,7 +4252,7 @@ const NewAutocomplete = ({
       flexDirection: contentTopDirection ? contentTopDirection : configStyles.NEWAUTOCOMPLETE.contentTopDirection,
       boxShadow: errorMessage ? errorColor ? `0 0 0 2px ${errorColor}` : `0 0 0 2px ${configStyles.NEWAUTOCOMPLETE.errorColor}` : isFocus ? contentTopBorderActive ? contentTopBorderActive : configStyles.NEWAUTOCOMPLETE.contentTopBorderActive : isHover ? contentTopBorderHover ? contentTopBorderHover : configStyles.NEWAUTOCOMPLETE.contentTopBorderHover : contentTopBorder ? contentTopBorder : configStyles.NEWAUTOCOMPLETE.contentTopBorder
     }
-  }, props)), errorMessage ? /*#__PURE__*/React__default["default"].createElement("span", {
+  }, props)), innerError ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       left: '0px',
       position: 'absolute',
@@ -4208,7 +4261,7 @@ const NewAutocomplete = ({
       top: marginTop ? `calc(100% + ${marginTop})` : `calc(100% + ${configStyles.INPUT.marginTop})`,
       maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth
     }
-  }, errorMessage) : '', optionList));
+  }, innerError) : '', optionList));
 };
 NewAutocomplete.propTypes = {
   label: PropTypes__default["default"].string,
@@ -4293,7 +4346,6 @@ NewAutocomplete.defaultProps = {
 exports.Autocomplate = Autocomplate;
 exports.Button = Button;
 exports.Captcha = Captcha;
-exports.Chart = Chart;
 exports.Checkbox = Checkbox;
 exports.File = File;
 exports.Input = Input;

package/package.json

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

package/src/components/input/index.js

@@ -156,17 +156,45 @@ export const Input = ({
                     change(`${maxNumSize}`);
                 }
             }
-            if (floatToFix && floatToFix > 0 && !Number.isInteger(parseFloat(currentValue))) {
+            if (floatToFix && floatToFix > 0) {
                 const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
                 const int = floatNumParts[0];
                 const float = floatNumParts[1];
                 
-                if (float && float.length > floatToFix) {
-                    setInnerValue(`${int}.${float.substr(0, floatToFix)}`);
-                    if (change) {
-                        change(`${int}.${float.substr(0, floatToFix)}`);
+                if (float) {
+                    if (float[0] === '0' || float[0] !== '0') {
+                        if (float[1] === undefined) {
+                            setInnerValue(`${int}.${float[0]}`);
+                            if (change) {
+                                change(`${int}.${float[0]}`);
+                            }
+                        } else if (float[1] === '0') {
+                            if (float[2] === undefined || float[2] === '0') {
+                                setInnerValue(`${int}.${float[0]}`);
+                                if (change) {
+                                    change(`${int}.${float[0]}`);
+                                }
+                            } else if (float[2] !== undefined && float[2] !== '0') {
+                                setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                if (change) {
+                                    change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                }
+                            }
+                        } else if (float[1] !== undefined && float[1] !== '0') {
+                            if (float[2] === undefined || float[2] === '0') {
+                                setInnerValue(`${int}.${float[0]}${float[1]}`);
+                                if (change) {
+                                    change(`${int}.${float[0]}${float[1]}`);
+                                }
+                            } else if (float[2] !== undefined && float[2] !== '0') {
+                                setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                if (change) {
+                                    change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                }
+                            }
+                        }
                     }
-                } 
+                }
             } else if (floatToFix === 0) {
                 const floatNumParts = typeof currentValue === 'string' ? currentValue.split('.') : currentValue;
                 const int = floatNumParts[0];
@@ -262,17 +290,54 @@ export const Input = ({
                             change(`${maxNumSize}`);
                         }
                     }
-                    if (floatToFix && floatToFix > 0 && !Number.isInteger(parseFloat(value))) {
+                    if (floatToFix && floatToFix > 0) {
                         const floatNumParts = typeof value === 'string' ? value.split('.') : value;
                         const int = floatNumParts[0];
                         const float = floatNumParts[1];
                         
-                        if (float && float.length > floatToFix) {
-                            setInnerValue(`${int}.${float.substr(0, floatToFix)}`);
+                        if (float) {
+                            if (float[0] === '0' || float[0] !== '0') {
+                                if (float[1] === undefined) {
+                                    setInnerValue(`${int}.${float[0]}`);
+                                    if (change) {
+                                        change(`${int}.${float[0]}`);
+                                    }
+                                } else if (float[1] === '0') {
+                                    if (float[2] === undefined || float[2] === '0') {
+                                        setInnerValue(`${int}.${float[0]}`);
+                                        if (change) {
+                                            change(`${int}.${float[0]}`);
+                                        }
+                                    } else if (float[2] !== undefined && float[2] !== '0') {
+                                        setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                        if (change) {
+                                            change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                        }
+                                    }
+                                } else if (float[1] !== undefined && float[1] !== '0') {
+                                    if (float[2] === undefined || float[2] === '0') {
+                                        setInnerValue(`${int}.${float[0]}${float[1]}`);
+                                        if (change) {
+                                            change(`${int}.${float[0]}${float[1]}`);
+                                        }
+                                    } else if (float[2] !== undefined && float[2] !== '0') {
+                                        setInnerValue(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                        if (change) {
+                                            change(`${int}.${float[0]}${float[1]}${float[2]}`);
+                                        }
+                                    }
+                                }
+                            }
+                        }
+                    } else if (floatToFix === 0) {
+                        const floatNumParts = typeof value === 'string' ? currentValue.split('.') : value;
+                        const int = floatNumParts[0];
+                        if (floatNumParts && floatNumParts.length > 0 && floatToFix === 0) {
+                            setInnerValue(`${int}`);
                             if (change) {
-                                change(`${int}.${float.substr(0, floatToFix)}`);
+                                change(`${int}`);
                             }
-                        }   
+                        }
                     }
                     if (value === '') {
                         setInnerValue('');

package/src/components/input/input.module.css

@@ -16,6 +16,11 @@ input:-webkit-autofill:active  {
     background-color: inherit !important;
 }
 
+input::-ms-reveal,
+input::-ms-clear {
+    display: none;
+}
+
 .error-message-show {
     animation-name: error-show;
     animation-fill-mode: forwards;

package/src/components/input/input.stories.js

@@ -12,7 +12,7 @@ export default {
 };
 
 const Template = (args) => {
-  const [newVal, setNewVal] = useState('');
+  const [newVal, setNewVal] = useState('5.0100');
   const handleChange = (val) => {
     setNewVal(val);
   };

package/src/components/modal/index.js

@@ -71,6 +71,12 @@ export const Modal = ({
         }
     };
 
+    const handleESC = (e) => {
+        if (e.key === 'Escape') {
+            handleCloseModal();
+        }
+    };
+
     useEffect(() => {
         if (type === 'images') {
             if (data) {
@@ -98,9 +104,11 @@ export const Modal = ({
     }, [selected]);
 
     useEffect(() => {
+        document.addEventListener('keydown', handleESC, false);
         return () => {
             setSelect(0);
             setInnerData([]);
+            document.removeEventListener('keydown', handleESC, false);
         }
     }, []);
 

package/src/components/newAutocomplete/index.js

@@ -87,6 +87,7 @@ export const NewAutocomplete = ({
     const [show, setShow] = useState(false);
     const [isHover, setIsHover] = useState(false);
     const [isFocus, setIsFocus] = useState(false);
+    const [innerError, setInnerError] = useState('');
     const [innerValue, setInnerValue] = useState('');
     const [innerOptions, setInnerOptions] = useState([]);
     const configStyles = compereConfigs();
@@ -131,6 +132,7 @@ export const NewAutocomplete = ({
         const value = e.target.value;
         const currentId = e.target.id;
         value.length > 0 ? setShow(true) : setShow(false);
+        setInnerError('');
         setInnerValue(value);
         if (value.length >= searchCount) {
             change({ name: value, id: currentId });
@@ -218,7 +220,7 @@ export const NewAutocomplete = ({
                         </div>
                     : innerOptions.length <= 0
                         ?
-                            <span
+                        innerError ? '' : <span
                                 style={{
                                     position: 'absolute',
                                     zIndex: '9999999999',
@@ -276,6 +278,10 @@ export const NewAutocomplete = ({
             setInnerValue('');
         }
     }, [selected]);
+
+    useEffect(() => {
+        setInnerError(errorMessage);
+    }, [errorMessage]);
     
     return (
         <>
@@ -351,7 +357,7 @@ export const NewAutocomplete = ({
                 />
 
                 {
-                    errorMessage
+                    innerError
                         ? <span
                             style={{
                                 left: '0px',
@@ -362,7 +368,7 @@ export const NewAutocomplete = ({
                                 maxWidth: contentTopMaxWidth ? contentTopMaxWidth : configStyles.NEWAUTOCOMPLETE.contentTopMaxWidth,
                             }}
                           >
-                            {errorMessage}
+                            {innerError}
                           </span>
                         : ''
                 }