@xaypay/tui 0.0.96 → 0.0.98

package/dist/index.es.js

@@ -66,9 +66,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,
@@ -190,63 +190,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();
-  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.createElement("canvas", {
-    id: "myChart",
-    width: width,
-    height: height
-  });
-};
-Chart.propTypes = {
-  width: PropTypes.number,
-  height: PropTypes.number
-};
-
 const SvgCheckboxUnchecked = ({
   title,
   titleId,
@@ -328,6 +271,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.array,
   dataHeader: PropTypes.array,
@@ -457,6 +423,7 @@ const Modal = ({
   headerColor,
   borderStyle,
   borderWidth,
+  borderColor,
   outsideClose,
   headerWeight,
   headerHeight,
@@ -489,6 +456,11 @@ const Modal = ({
       }
     }
   };
+  const handleESC = e => {
+    if (e.key === 'Escape') {
+      handleCloseModal();
+    }
+  };
   useEffect(() => {
     if (type === 'images') {
       if (data) {
@@ -514,9 +486,11 @@ const Modal = ({
     }
   }, [selected]);
   useEffect(() => {
+    document.addEventListener('keydown', handleESC, false);
     return () => {
       setSelect(0);
       setInnerData([]);
+      document.removeEventListener('keydown', handleESC, false);
     };
   }, []);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -611,7 +585,8 @@ const Modal = ({
       justifyContent: 'center',
       overflow: 'auto',
       borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
-      borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle
+      borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
+      borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
     }
   }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default.createElement("div", {
     style: {
@@ -700,7 +675,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);
 
@@ -3676,14 +3651,21 @@ const Pagination = ({
     }
   };
   let lastPage = paginationRange[paginationRange.length - 1];
-  return /*#__PURE__*/React__default.createElement("ul", {
+  return /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      display: 'flex',
+      margin: '0 auto',
+      alignItems: 'center',
+      justifyContent: 'center'
+    }
+  }, /*#__PURE__*/React__default.createElement("ul", {
     className: classProps
   }, /*#__PURE__*/React__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.createElement(SvgNextarrow, null)), paginationRange.map((pageNumber, id) => {
     if (pageNumber === Dots) {
@@ -3715,7 +3697,7 @@ const Pagination = ({
     onClick: onNext,
     disabled: currentPageNumber === lastPage ? true : false,
     className: `${styles$2["pagination-btn"]} pagination-btn-rem`
-  }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null)), goTo && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement(SvgNextarrow, null))), goTo && /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("input", {
     onKeyDown: handleKeyDown,
     onInput: handleChangeInput,
     type: "number",
@@ -3973,6 +3955,7 @@ 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();
@@ -4008,6 +3991,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({
@@ -4073,7 +4057,7 @@ const NewAutocomplete = ({
         backgroundColor: contentBottomRowBackgroundColor ? contentBottomRowBackgroundColor : configStyles.NEWAUTOCOMPLETE.contentBottomRowBackgroundColor
       }
     }, item[keyNames.name]);
-  }))) : innerOptions.length <= 0 ? /*#__PURE__*/React__default.createElement("span", {
+  }))) : innerOptions.length <= 0 ? innerError ? '' : /*#__PURE__*/React__default.createElement("span", {
     style: {
       position: 'absolute',
       zIndex: '9999999999',
@@ -4114,6 +4098,9 @@ const NewAutocomplete = ({
       setInnerValue('');
     }
   }, [selected]);
+  useEffect(() => {
+    setInnerError(errorMessage);
+  }, [errorMessage]);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, label ? /*#__PURE__*/React__default.createElement("label", {
     style: {
       color: labelColor ? labelColor : configStyles.NEWAUTOCOMPLETE.labelColor,
@@ -4167,7 +4154,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.createElement("span", {
+  }, props)), innerError ? /*#__PURE__*/React__default.createElement("span", {
     style: {
       left: '0px',
       position: 'absolute',
@@ -4176,7 +4163,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.string,
@@ -4258,4 +4245,4 @@ NewAutocomplete.defaultProps = {
   disabled: false
 };
 
-export { Autocomplate, Button, Captcha, Chart, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, SingleCheckbox, Stepper, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };
+export { Autocomplate, Button, Captcha, Checkbox, File, Input, InputTypes, Modal, NewAutocomplete, NewFile, Pagination, Radio, Select, SingleCheckbox, Stepper, Textarea, Toaster, Tooltip, Typography, TypographyType, toast };

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,
@@ -487,6 +453,7 @@ const Modal = ({
   headerColor,
   borderStyle,
   borderWidth,
+  borderColor,
   outsideClose,
   headerWeight,
   headerHeight,
@@ -519,6 +486,11 @@ const Modal = ({
       }
     }
   };
+  const handleESC = e => {
+    if (e.key === 'Escape') {
+      handleCloseModal();
+    }
+  };
   React.useEffect(() => {
     if (type === 'images') {
       if (data) {
@@ -544,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", {
@@ -641,7 +615,8 @@ const Modal = ({
       justifyContent: 'center',
       overflow: 'auto',
       borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
-      borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle
+      borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
+      borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor
     }
   }, type === 'content' ? children ? children : '' : /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
@@ -730,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);
 
@@ -3706,14 +3681,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) {
@@ -3745,7 +3727,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",
@@ -4003,6 +3985,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();
@@ -4038,6 +4021,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({
@@ -4103,7 +4087,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',
@@ -4144,6 +4128,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,
@@ -4197,7 +4184,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',
@@ -4206,7 +4193,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,
@@ -4291,7 +4278,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.96",
+  "version": "0.0.98",
   "description": "",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

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/modal/index.js

@@ -33,6 +33,7 @@ export const Modal = ({
     headerColor,
     borderStyle,
     borderWidth,
+    borderColor,
     outsideClose,
     headerWeight,
     headerHeight,
@@ -70,6 +71,12 @@ export const Modal = ({
         }
     };
 
+    const handleESC = (e) => {
+        if (e.key === 'Escape') {
+            handleCloseModal();
+        }
+    };
+
     useEffect(() => {
         if (type === 'images') {
             if (data) {
@@ -97,9 +104,11 @@ export const Modal = ({
     }, [selected]);
 
     useEffect(() => {
+        document.addEventListener('keydown', handleESC, false);
         return () => {
             setSelect(0);
             setInnerData([]);
+            document.removeEventListener('keydown', handleESC, false);
         }
     }, []);
 
@@ -216,7 +225,8 @@ export const Modal = ({
                                 justifyContent: 'center',
                                 overflow: 'auto',
                                 borderWidth: borderWidth ? borderWidth : configStyles.MODAL.borderWidth,
-                                borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle
+                                borderStyle: borderStyle ? borderStyle : configStyles.MODAL.borderStyle,
+                                borderColor: borderColor ? borderColor : configStyles.MODAL.borderColor,
                             }}
                         >
                             {

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>
                         : ''
                 }

package/src/components/pagination/index.js

@@ -108,103 +108,111 @@ export const Pagination = ({
 
     let lastPage = paginationRange[paginationRange.length - 1];
     return (
-        <ul className={classProps}>
-            <button
-                style={{
-                    transform: 'rotate(180deg)'
-                }}
-                onClick={onPrevious}
-                disabled={currentPage === 1 ? true : false}
-                className={`${styles["pagination-btn"]} pagination-btn-rem`}
-            >
-                <SvgNextarrow />
-            </button>
+        <div
+        style={{
+            display: 'flex',
+            margin: '0 auto',
+            alignItems: 'center',
+            justifyContent: 'center',
+        }}
+        >
+            <ul className={classProps}>
+                <button
+                    style={{
+                        transform: 'rotate(180deg)'
+                    }}
+                    onClick={onPrevious}
+                    disabled={currentPageNumber === 1 ? true : false}
+                    className={`${styles["pagination-btn"]} pagination-btn-rem`}
+                >
+                    <SvgNextarrow />
+                </button>
+
+                {paginationRange.map((pageNumber, id) => {
+                    if (pageNumber === Dots) {
+                        let currentPageIndex = paginationRange.indexOf(currentPageNumber);
+                        return (
+                            <li
+                                key={id}
+                                className={classnames(
+                                    `${styles["pagination-jump-next"]} pagination-jump-next-rem`,
+                                    styles.listItem
+                                )}
+                                onClick={
+                                    id < currentPageIndex
+                                        ? onPreviousFive
+                                        : onNextFive
+                                }
+                                disabled={currentPageIndex === 0 ? true : false}
+                            >
+                                {id < currentPageIndex ? (
+                                    <>
+                                        <span
+                                            className={
+                                                `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
+                                            }
+                                        >
+                                            <DotsIcon />
+                                        </span>
+                                        <span
+                                            className={
+                                                `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
+                                            }
+                                            style={{
+                                                transform: 'rotate(180deg)'
+                                            }}
+                                        >
+                                            <SvgNextarrow />
+                                        </span>
+                                    </>
+                                ) : (
+                                    <>
+                                        <span
+                                            className={
+                                                `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
+                                            }
+                                        >
+                                            <DotsIcon />
+                                        </span>
+                                        <span
+                                            className={
+                                                `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
+                                            }
+                                        >
+                                            <SvgNextarrow />
+                                        </span>
+                                    </>
+                                )}
+                            </li>
+                        );
+                    }
 
-            {paginationRange.map((pageNumber, id) => {
-                if (pageNumber === Dots) {
-                    let currentPageIndex = paginationRange.indexOf(currentPageNumber);
                     return (
                         <li
+                            onClick={() => onPageChange(pageNumber)}
                             key={id}
                             className={classnames(
-                                `${styles["pagination-jump-next"]} pagination-jump-next-rem`,
-                                styles.listItem
+                                `${
+                                    pageNumber === currentPageNumber
+                                        ? styles.selected
+                                        : styles.listItem
+                                }`,
+                                `${styles["pagination-item"]} pagination-item-rem`
                             )}
-                            onClick={
-                                id < currentPageIndex
-                                    ? onPreviousFive
-                                    : onNextFive
-                            }
-                            disabled={currentPageIndex === 0 ? true : false}
                         >
-                            {id < currentPageIndex ? (
-                                <>
-                                    <span
-                                        className={
-                                            `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-                                        }
-                                    >
-                                        <DotsIcon />
-                                    </span>
-                                    <span
-                                        className={
-                                            `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-                                        }
-                                        style={{
-                                            transform: 'rotate(180deg)'
-                                        }}
-                                    >
-                                        <SvgNextarrow />
-                                    </span>
-                                </>
-                            ) : (
-                                <>
-                                    <span
-                                        className={
-                                            `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
-                                        }
-                                    >
-                                        <DotsIcon />
-                                    </span>
-                                    <span
-                                        className={
-                                            `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
-                                        }
-                                    >
-                                        <SvgNextarrow />
-                                    </span>
-                                </>
-                            )}
+                            {pageNumber}
                         </li>
                     );
-                }
-
-                return (
-                    <li
-                        onClick={() => onPageChange(pageNumber)}
-                        key={id}
-                        className={classnames(
-                            `${
-                                pageNumber === currentPageNumber
-                                    ? styles.selected
-                                    : styles.listItem
-                            }`,
-                            `${styles["pagination-item"]} pagination-item-rem`
-                        )}
-                    >
-                        {pageNumber}
-                    </li>
-                );
-            })}
-
-            <button
-                onClick={onNext}
-                disabled={currentPageNumber === lastPage ? true : false}
-                className={`${styles["pagination-btn"]} pagination-btn-rem`}
-            >
-                <SvgNextarrow />
-            </button>
+                })}
 
+                <button
+                    onClick={onNext}
+                    disabled={currentPageNumber === lastPage ? true : false}
+                    className={`${styles["pagination-btn"]} pagination-btn-rem`}
+                >
+                    <SvgNextarrow />
+                </button>
+            </ul>
             {
                 goTo && <div>
                     <input
@@ -234,7 +242,7 @@ export const Pagination = ({
                     >Էջ</span>
                 </div>
             }
-        </ul>
+        </div>
     );
 };
 

package/src/index.js

@@ -1,5 +1,4 @@
 export * from './components/file';
-export * from './components/chart';
 export * from './components/table';
 export * from './components/modal';
 export * from './components/input';

package/tui.config.js

@@ -397,6 +397,7 @@ module.exports = {
         layerBackgroundColor: 'rgba(0,0,0,0.4)',              // for modal parent layer background color
         borderWidth: '20px',                                  // for modal padding from border transparent
         borderStyle: 'solid',                                 // for modal border style
+        borderColor: 'transparent',                           // for modal border color
     },
     // default properties for <Table /> component
     TABLE: {

package/src/components/chart/chart.stories.js

@@ -1,16 +0,0 @@
-import React from "react";
-import { Chart } from './index';
-
-export default {
-  component: Chart,
-  title: "Components/Chart",
-};
-
-const Template = (args) => {
-    return <Chart width={500} height={200} {...args} />;
-};
-
-export const Default = Template.bind({});
-Default.args = {
-  
-};

package/src/components/chart/index.js

@@ -1,42 +0,0 @@
-import React, { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { compereConfigs } from './../../utils';
-
-import styles from "./chart.module.css";
-
-export const Chart = ({
-    width,
-    height
-}) => {
-    const configStyles = compereConfigs();
-    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 (
-        <canvas id='myChart' width={width} height={height}></canvas>
-    );
-};
-
-Chart.propTypes = {
-    width: PropTypes.number,
-    height: PropTypes.number,
-};