@xaypay/tui 0.2.10 → 0.2.12

package/dist/index.es.js

@@ -1465,6 +1465,22 @@ const SvgDeleteComponent = ({
   fill: fillColor ? fillColor : '#E00'
 }));
 
+class FileTypeParser {
+  static ftypHeader = new Uint8Array([0x66, 0x74, 0x79, 0x70]);
+  hasISOBaseMediaFile(buffer) {
+    const slicedBuffer = new Uint8Array(buffer.slice(0, 12));
+    return this.check(slicedBuffer, FileTypeParser.ftypHeader, {
+      offset: 4
+    }) && (slicedBuffer[8] & 0x60) !== 0x00;
+  }
+  check(buffer, headers, options) {
+    for (const [index, header] of headers.entries()) {
+      if (header !== buffer[index + options.offset]) return false;
+    }
+    return true;
+  }
+}
+
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/forwardRef(({
   or,
@@ -1572,6 +1588,15 @@ const File = /*#__PURE__*/forwardRef(({
   const [configStyles, setConfigStyles] = useState({});
   const [choosenFileCount, setChoosenFileCount] = useState(0);
   const [image, setImage] = useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
+  const handleCheckHeicFormat = async file => {
+    const buffer = await file.arrayBuffer();
+    const fileTypeParser = new FileTypeParser();
+    const hasISOBaseMediaFile = fileTypeParser.hasISOBaseMediaFile(buffer);
+    if (hasISOBaseMediaFile) {
+      return Promise.resolve();
+    }
+    return Promise.reject();
+  };
   const handleRemoveComponent = () => {
     if (!multiple) {
       removeFile && removeFile(singleFile);
@@ -1600,14 +1625,32 @@ const File = /*#__PURE__*/forwardRef(({
         for (let ix = 0; ix < file.length; ix++) {
           if (file[ix]) {
             if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-              if (fileExtensions.includes(file[ix].type.split('/')[1]) || fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif') {
-                change({
-                  id: '',
-                  check: '',
-                  status: '',
-                  file: file[ix],
-                  uuid: v4()
-                });
+              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
+                if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
+                  handleCheckHeicFormat(file[ix]).then(() => {
+                    change({
+                      id: '',
+                      check: '',
+                      status: '',
+                      file: file[ix],
+                      uuid: v4()
+                    });
+                  }).catch(() => {
+                    change({
+                      file: file[ix],
+                      uuid: v4(),
+                      check: formatError ?? configStyles.FILE.error.format
+                    });
+                  });
+                } else {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                }
               } else {
                 change({
                   file: file[ix],
@@ -1629,14 +1672,32 @@ const File = /*#__PURE__*/forwardRef(({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1]) || fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif') {
-              change({
-                id: '',
-                check: '',
-                status: '',
-                file: file[ix],
-                uuid: v4()
-              });
+            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
+              if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
+                handleCheckHeicFormat(file[ix]).then(() => {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                }).catch(() => {
+                  change({
+                    file: file[ix],
+                    uuid: v4(),
+                    check: formatError ?? configStyles.FILE.error.format
+                  });
+                });
+              } else {
+                change({
+                  id: '',
+                  check: '',
+                  status: '',
+                  file: file[ix],
+                  uuid: v4()
+                });
+              }
             } else {
               change({
                 file: file[ix],
@@ -1667,14 +1728,19 @@ const File = /*#__PURE__*/forwardRef(({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1]) || fileExtensions.includes('heic') && (file[0].type === 'image/heif' || file[0].type === 'image/heic')) {
+          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif'))) {
             setError('');
             change(file);
             setSingleFile(file);
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
-            } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic') {
-              setImage('heic');
+            } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
+              handleCheckHeicFormat(file[0]).then(() => {
+                setImage('heic');
+              }).catch(() => {
+                setImage(null);
+                setError(formatError ?? configStyles.FILE.error.format);
+              });
             } else {
               setImage(URL.createObjectURL(file[0]));
             }
@@ -2276,6 +2342,9 @@ const handleUtilsMouseEnterLeave = (e, behaviourStyle) => {
 };
 const handleUtilsCheckTypeTel = (val, prevVal) => {
   const phoneNumberRegex = /^\d{0,8}$/;
+  if (val.length > 7) {
+    val = val.substr(0, 8);
+  }
   if (!phoneNumberRegex.test(val)) {
     val = prevVal;
   }
@@ -2310,14 +2379,16 @@ const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumS
       }
     }
     if (!regNum.test(val)) {
-      const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
+      let newVal = typeof val === 'number' ? val.toString() : val;
+      const newStr = newVal.replace(/[^0-9.]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
         return b + c.replace(/\.|\․|\.|\,/g, '');
       });
       val = newStr;
     }
   }
   if (withoutDot && !/^\d+$/.test(val)) {
-    const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
+    let newVal = typeof val === 'number' ? val.toString() : val;
+    const newStr = newVal.replace(/[^0-9]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
       return b + c.replace(/\.|\․|\.|\,/g, '');
     });
     val = newStr;
@@ -2329,6 +2400,9 @@ const handleUtilsOpenInNewTab = url => {
   imageLink.href = url, imageLink.target = '_blank';
   imageLink.click();
 };
+const handleRemoveLeadingZeros = str => {
+  return str.replace(/^0+(\d)/, '$1');
+};
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -3556,6 +3630,8 @@ const Modal = ({
   closeAreaBackgroundColor,
   type = 'content'
 }) => {
+  const leftBtnRef = useRef(null);
+  const rightBtnRef = useRef(null);
   const [select, setSelect] = useState(0);
   const [isHover, setIsHover] = useState(false);
   const [innerData, setInnerData] = useState([]);
@@ -3582,6 +3658,17 @@ const Modal = ({
       }
     }
   };
+  const handleNavigateArrow = e => {
+    if (e.key === 'ArrowRight') {
+      if (rightBtnRef.current) {
+        rightBtnRef.current.click();
+      }
+    } else if (e.key === 'ArrowLeft') {
+      if (leftBtnRef.current) {
+        leftBtnRef.current.click();
+      }
+    }
+  };
   const handleESC = e => {
     if (e.key === 'Escape') {
       handleCloseModal();
@@ -3621,7 +3708,10 @@ const Modal = ({
     className && setClassProps(() => classnames(className ?? configStyles.MODAL.className));
   }, [className]);
   useEffect(() => {
-    document.addEventListener('keydown', handleESC, false);
+    document.addEventListener('keydown', e => {
+      handleESC(e);
+      handleNavigateArrow(e);
+    }, false);
     configStylesPromise.then(data => {
       setClassProps(() => classnames(className ?? data.MODAL.className));
       setConfigStyles(() => {
@@ -3635,7 +3725,10 @@ const Modal = ({
     return () => {
       setSelect(0);
       setInnerData([]);
-      document.removeEventListener('keydown', handleESC, false);
+      document.removeEventListener('keydown', e => {
+        handleESC(e);
+        handleNavigateArrow(e);
+      }, false);
     };
   }, []);
   return configStyles.MODAL && /*#__PURE__*/React__default.createElement("div", {
@@ -3809,6 +3902,7 @@ const Modal = ({
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
+    ref: leftBtnRef,
     onClick: () => handleGoTo('prev'),
     style: {
       position: 'absolute',
@@ -3823,6 +3917,7 @@ const Modal = ({
       backgroundColor: 'transparent'
     }
   }, prevIcon ? prevIcon : configStyles.MODAL.icon.prev ? configStyles.MODAL.icon.prev : /*#__PURE__*/React__default.createElement(SvgPrev, null)), /*#__PURE__*/React__default.createElement("button", {
+    ref: rightBtnRef,
     onClick: () => handleGoTo('next'),
     style: {
       position: 'absolute',
@@ -3912,7 +4007,7 @@ const TelInput = ({
   useEffect(() => {
     let newValue = '';
     if (value !== undefined && value !== null) {
-      newValue = handleUtilsCheckTypeTel(value, newValue);
+      newValue = handleUtilsCheckTypeTel(value);
     }
     setInnerValue(() => newValue);
   }, [value]);
@@ -4064,15 +4159,21 @@ const NumberInput = ({
   const [innerMinNumSize, setInnerMinNumSize] = useState(0);
   const handleChange = event => {
     let prevValue = innerValue;
-    let currentValue = event.target.value;
+    let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
     currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots);
     setInnerValue(() => currentValue);
     if (inputChange && currentValue !== prevValue) {
-      if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER || innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
+      if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
+        if (currentValue === '') {
+          setInnerErrorMessage(() => '');
+        } else {
+          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${Number.MIN_SAFE_INTEGER} - ${Number.MAX_SAFE_INTEGER} թվերի միջակայքում`);
+        }
+      } else if (innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
-          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} միջակայքում`);
+          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
         }
       } else if (currentValue >= Number.MIN_SAFE_INTEGER || currentValue <= Number.MAX_SAFE_INTEGER || innerMinNumSize && currentValue >= innerMinNumSize || maxNumSize && currentValue <= maxNumSize) {
         inputChange(currentValue);
@@ -4080,6 +4181,14 @@ const NumberInput = ({
       }
     }
   };
+  const handleBlur = () => {
+    const newVal = handleRemoveLeadingZeros(innerValue);
+    if (parseFloat(newVal) === 0) {
+      inputChange('');
+    } else {
+      inputChange(newVal);
+    }
+  };
   useEffect(() => {
     if (minNumSize && minNumSize < 0) {
       setInnerMinNumSize(0);
@@ -4113,6 +4222,7 @@ const NumberInput = ({
     },
     min: minNumSize,
     max: maxNumSize,
+    onBlur: handleBlur,
     onInput: handleChange
   });
 };
@@ -4304,7 +4414,7 @@ const Input = ({
       boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
       borderTopLeftRadius: radius ?? configStyles.INPUT.radius,
       borderBottomLeftRadius: radius ?? configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
+      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
   }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default.createElement(TelInput, {
     type: type,
@@ -4365,7 +4475,7 @@ const Input = ({
       boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
       borderTopRightRadius: radius ?? configStyles.INPUT.radius,
       borderBottomRightRadius: radius ?? configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
+      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default.createElement(P, {
     animation: animation,
@@ -4932,7 +5042,7 @@ const Select = ({
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$6['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : configStyles.SELECT.arrowIcon ? configStyles.SELECT.arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default.createElement("div", {
+  }, arrowIcon ? arrowIcon : configStyles.SELECT.arrowIcon ? configStyles.SELECT.arrowIcon : /*#__PURE__*/React__default.createElement(SvgArrow, null)) : '')), opened && existOptions && existOptions.length > 0 && !disabled ? /*#__PURE__*/React__default.createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ?? configStyles.SELECT.options.box.shadow,
       borderRadius: optionsBorderRadius ?? configStyles.SELECT.options.radius,

package/dist/index.js

@@ -1496,6 +1496,22 @@ const SvgDeleteComponent = ({
   fill: fillColor ? fillColor : '#E00'
 }));
 
+class FileTypeParser {
+  static ftypHeader = new Uint8Array([0x66, 0x74, 0x79, 0x70]);
+  hasISOBaseMediaFile(buffer) {
+    const slicedBuffer = new Uint8Array(buffer.slice(0, 12));
+    return this.check(slicedBuffer, FileTypeParser.ftypHeader, {
+      offset: 4
+    }) && (slicedBuffer[8] & 0x60) !== 0x00;
+  }
+  check(buffer, headers, options) {
+    for (const [index, header] of headers.entries()) {
+      if (header !== buffer[index + options.offset]) return false;
+    }
+    return true;
+  }
+}
+
 // eslint-disable-next-line react/display-name
 const File = /*#__PURE__*/React.forwardRef(({
   or,
@@ -1603,6 +1619,15 @@ const File = /*#__PURE__*/React.forwardRef(({
   const [configStyles, setConfigStyles] = React.useState({});
   const [choosenFileCount, setChoosenFileCount] = React.useState(0);
   const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
+  const handleCheckHeicFormat = async file => {
+    const buffer = await file.arrayBuffer();
+    const fileTypeParser = new FileTypeParser();
+    const hasISOBaseMediaFile = fileTypeParser.hasISOBaseMediaFile(buffer);
+    if (hasISOBaseMediaFile) {
+      return Promise.resolve();
+    }
+    return Promise.reject();
+  };
   const handleRemoveComponent = () => {
     if (!multiple) {
       removeFile && removeFile(singleFile);
@@ -1631,14 +1656,32 @@ const File = /*#__PURE__*/React.forwardRef(({
         for (let ix = 0; ix < file.length; ix++) {
           if (file[ix]) {
             if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-              if (fileExtensions.includes(file[ix].type.split('/')[1]) || fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif') {
-                change({
-                  id: '',
-                  check: '',
-                  status: '',
-                  file: file[ix],
-                  uuid: v4()
-                });
+              if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
+                if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
+                  handleCheckHeicFormat(file[ix]).then(() => {
+                    change({
+                      id: '',
+                      check: '',
+                      status: '',
+                      file: file[ix],
+                      uuid: v4()
+                    });
+                  }).catch(() => {
+                    change({
+                      file: file[ix],
+                      uuid: v4(),
+                      check: formatError ?? configStyles.FILE.error.format
+                    });
+                  });
+                } else {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                }
               } else {
                 change({
                   file: file[ix],
@@ -1660,14 +1703,32 @@ const File = /*#__PURE__*/React.forwardRef(({
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
-            if (fileExtensions.includes(file[ix].type.split('/')[1]) || fileExtensions.includes('heic') && file[ix].type.split('/')[1] === 'heif') {
-              change({
-                id: '',
-                check: '',
-                status: '',
-                file: file[ix],
-                uuid: v4()
-              });
+            if (fileExtensions.includes(file[ix].type.split('/')[1]) || file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif')) {
+              if ((fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[ix].name.toLowerCase().endsWith('.heic') || file[ix].name.toLowerCase().endsWith('.heif'))) {
+                handleCheckHeicFormat(file[ix]).then(() => {
+                  change({
+                    id: '',
+                    check: '',
+                    status: '',
+                    file: file[ix],
+                    uuid: v4()
+                  });
+                }).catch(() => {
+                  change({
+                    file: file[ix],
+                    uuid: v4(),
+                    check: formatError ?? configStyles.FILE.error.format
+                  });
+                });
+              } else {
+                change({
+                  id: '',
+                  check: '',
+                  status: '',
+                  file: file[ix],
+                  uuid: v4()
+                });
+              }
             } else {
               change({
                 file: file[ix],
@@ -1698,14 +1759,19 @@ const File = /*#__PURE__*/React.forwardRef(({
     } else {
       if (file[0]) {
         if (file[0].size <= maxSize * Math.pow(2, 20)) {
-          if (fileExtensions.includes(file[0].type.split('/')[1]) || fileExtensions.includes('heic') && (file[0].type === 'image/heif' || file[0].type === 'image/heic')) {
+          if (fileExtensions.includes(file[0].type.split('/')[1]) || (fileExtensions.includes('heic') || fileExtensions.includes('heif')) && (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif'))) {
             setError('');
             change(file);
             setSingleFile(file);
             if (file[0].type === 'application/pdf') {
               setImage('pdf');
-            } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic') {
-              setImage('heic');
+            } else if (file[0].type === 'image/heif' || file[0].type === 'image/heic' || file[0].name.toLowerCase().endsWith('.heic') || file[0].name.toLowerCase().endsWith('.heif')) {
+              handleCheckHeicFormat(file[0]).then(() => {
+                setImage('heic');
+              }).catch(() => {
+                setImage(null);
+                setError(formatError ?? configStyles.FILE.error.format);
+              });
             } else {
               setImage(URL.createObjectURL(file[0]));
             }
@@ -2307,6 +2373,9 @@ const handleUtilsMouseEnterLeave = (e, behaviourStyle) => {
 };
 const handleUtilsCheckTypeTel = (val, prevVal) => {
   const phoneNumberRegex = /^\d{0,8}$/;
+  if (val.length > 7) {
+    val = val.substr(0, 8);
+  }
   if (!phoneNumberRegex.test(val)) {
     val = prevVal;
   }
@@ -2341,14 +2410,16 @@ const handleUtilsCheckTypeNumber = (val, prevVal, maxLength, floatToFix, maxNumS
       }
     }
     if (!regNum.test(val)) {
-      const newStr = val.replace(/[^0-9.]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
+      let newVal = typeof val === 'number' ? val.toString() : val;
+      const newStr = newVal.replace(/[^0-9.]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
         return b + c.replace(/\.|\․|\.|\,/g, '');
       });
       val = newStr;
     }
   }
   if (withoutDot && !/^\d+$/.test(val)) {
-    const newStr = val.replace(/[^0-9]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
+    let newVal = typeof val === 'number' ? val.toString() : val;
+    const newStr = newVal.replace(/[^0-9]/g, '').replace(/^([^.]*\.|\․|\.|\,)(.*)$/, function (_, b, c) {
       return b + c.replace(/\.|\․|\.|\,/g, '');
     });
     val = newStr;
@@ -2360,6 +2431,9 @@ const handleUtilsOpenInNewTab = url => {
   imageLink.href = url, imageLink.target = '_blank';
   imageLink.click();
 };
+const handleRemoveLeadingZeros = str => {
+  return str.replace(/^0+(\d)/, '$1');
+};
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -3587,6 +3661,8 @@ const Modal = ({
   closeAreaBackgroundColor,
   type = 'content'
 }) => {
+  const leftBtnRef = React.useRef(null);
+  const rightBtnRef = React.useRef(null);
   const [select, setSelect] = React.useState(0);
   const [isHover, setIsHover] = React.useState(false);
   const [innerData, setInnerData] = React.useState([]);
@@ -3613,6 +3689,17 @@ const Modal = ({
       }
     }
   };
+  const handleNavigateArrow = e => {
+    if (e.key === 'ArrowRight') {
+      if (rightBtnRef.current) {
+        rightBtnRef.current.click();
+      }
+    } else if (e.key === 'ArrowLeft') {
+      if (leftBtnRef.current) {
+        leftBtnRef.current.click();
+      }
+    }
+  };
   const handleESC = e => {
     if (e.key === 'Escape') {
       handleCloseModal();
@@ -3652,7 +3739,10 @@ const Modal = ({
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.MODAL.className));
   }, [className]);
   React.useEffect(() => {
-    document.addEventListener('keydown', handleESC, false);
+    document.addEventListener('keydown', e => {
+      handleESC(e);
+      handleNavigateArrow(e);
+    }, false);
     configStylesPromise.then(data => {
       setClassProps(() => classnames__default["default"](className ?? data.MODAL.className));
       setConfigStyles(() => {
@@ -3666,7 +3756,10 @@ const Modal = ({
     return () => {
       setSelect(0);
       setInnerData([]);
-      document.removeEventListener('keydown', handleESC, false);
+      document.removeEventListener('keydown', e => {
+        handleESC(e);
+        handleNavigateArrow(e);
+      }, false);
     };
   }, []);
   return configStyles.MODAL && /*#__PURE__*/React__default["default"].createElement("div", {
@@ -3840,6 +3933,7 @@ const Modal = ({
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
+    ref: leftBtnRef,
     onClick: () => handleGoTo('prev'),
     style: {
       position: 'absolute',
@@ -3854,6 +3948,7 @@ const Modal = ({
       backgroundColor: 'transparent'
     }
   }, prevIcon ? prevIcon : configStyles.MODAL.icon.prev ? configStyles.MODAL.icon.prev : /*#__PURE__*/React__default["default"].createElement(SvgPrev, null)), /*#__PURE__*/React__default["default"].createElement("button", {
+    ref: rightBtnRef,
     onClick: () => handleGoTo('next'),
     style: {
       position: 'absolute',
@@ -3943,7 +4038,7 @@ const TelInput = ({
   React.useEffect(() => {
     let newValue = '';
     if (value !== undefined && value !== null) {
-      newValue = handleUtilsCheckTypeTel(value, newValue);
+      newValue = handleUtilsCheckTypeTel(value);
     }
     setInnerValue(() => newValue);
   }, [value]);
@@ -4095,15 +4190,21 @@ const NumberInput = ({
   const [innerMinNumSize, setInnerMinNumSize] = React.useState(0);
   const handleChange = event => {
     let prevValue = innerValue;
-    let currentValue = event.target.value;
+    let currentValue = event.target.value.replace(/\.|․|\.|,/g, '.');
     currentValue = handleUtilsCheckTypeNumber(currentValue, prevValue, null, float, maxNumSize, dots);
     setInnerValue(() => currentValue);
     if (inputChange && currentValue !== prevValue) {
-      if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER || innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
+      if (currentValue < Number.MIN_SAFE_INTEGER || currentValue > Number.MAX_SAFE_INTEGER) {
+        if (currentValue === '') {
+          setInnerErrorMessage(() => '');
+        } else {
+          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${Number.MIN_SAFE_INTEGER} - ${Number.MAX_SAFE_INTEGER} թվերի միջակայքում`);
+        }
+      } else if (innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
         if (currentValue === '') {
           setInnerErrorMessage(() => '');
         } else {
-          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} միջակայքում`);
+          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} թվերի միջակայքում`);
         }
       } else if (currentValue >= Number.MIN_SAFE_INTEGER || currentValue <= Number.MAX_SAFE_INTEGER || innerMinNumSize && currentValue >= innerMinNumSize || maxNumSize && currentValue <= maxNumSize) {
         inputChange(currentValue);
@@ -4111,6 +4212,14 @@ const NumberInput = ({
       }
     }
   };
+  const handleBlur = () => {
+    const newVal = handleRemoveLeadingZeros(innerValue);
+    if (parseFloat(newVal) === 0) {
+      inputChange('');
+    } else {
+      inputChange(newVal);
+    }
+  };
   React.useEffect(() => {
     if (minNumSize && minNumSize < 0) {
       setInnerMinNumSize(0);
@@ -4144,6 +4253,7 @@ const NumberInput = ({
     },
     min: minNumSize,
     max: maxNumSize,
+    onBlur: handleBlur,
     onInput: handleChange
   });
 };
@@ -4335,7 +4445,7 @@ const Input = ({
       boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
       borderTopLeftRadius: radius ?? configStyles.INPUT.radius,
       borderBottomLeftRadius: radius ?? configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
+      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
   }, type === 'password' ? show ? leftIcon[1] : leftIcon[0] : leftIcon[0]) : '', type === 'tel' ? /*#__PURE__*/React__default["default"].createElement(TelInput, {
     type: type,
@@ -4396,7 +4506,7 @@ const Input = ({
       boxSizing: boxSizing ?? configStyles.INPUT.box.sizing,
       borderTopRightRadius: radius ?? configStyles.INPUT.radius,
       borderBottomRightRadius: radius ?? configStyles.INPUT.radius,
-      backgroundColor: disabled ? '#FBFBFB' : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
+      backgroundColor: disabled ? backgroundDisableColor ? backgroundDisableColor : configStyles.INPUT.colors.backgroundDisable : backgroundColor ? backgroundColor : configStyles.INPUT.colors.background
     }
   }, type === 'password' ? show ? rightIcon[1] : rightIcon[0] : rightIcon[0]) : ''), tooltip ? tooltip : '', innerErrorMessage ? /*#__PURE__*/React__default["default"].createElement(P, {
     animation: animation,
@@ -4963,7 +5073,7 @@ const Select = ({
       transform: opened ? 'rotate(180deg)' : 'rotate(0deg)'
     },
     className: `${styles$6['arrow-icon']}`
-  }, arrowIcon ? arrowIcon : configStyles.SELECT.arrowIcon ? configStyles.SELECT.arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)) : '')), opened && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
+  }, arrowIcon ? arrowIcon : configStyles.SELECT.arrowIcon ? configStyles.SELECT.arrowIcon : /*#__PURE__*/React__default["default"].createElement(SvgArrow, null)) : '')), opened && existOptions && existOptions.length > 0 && !disabled ? /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       boxShadow: optionsBoxShadow ?? configStyles.SELECT.options.box.shadow,
       borderRadius: optionsBorderRadius ?? configStyles.SELECT.options.radius,

package/package.json

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