@xaypay/tui 0.2.11 → 0.2.13

package/dist/index.js

@@ -1173,6 +1173,12 @@ var packageResult = {
       font: {
         ...fontObject
       }
+    },
+    order: {
+      color: '#000',
+      font: {
+        ...fontObject
+      }
     }
   },
   // default properties for <Pagination /> component
@@ -1602,7 +1608,22 @@ const File = /*#__PURE__*/React.forwardRef(({
   const [singleFile, setSingleFile] = React.useState(null);
   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 [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url.startsWith('data:image/heif') || defaultData.url.startsWith('data:image/heic') || defaultData.url.startsWith('data:application/octet-stream') ? 'heic' : defaultData.url : 'pdf' : null : null);
+  const handleCheckHeicFormat = async file => {
+    const buffer = await file.arrayBuffer();
+    const dataView = new DataView(buffer);
+    if (dataView.byteLength < 12) return false;
+    for (let i = 0; i < dataView.byteLength - 8; i++) {
+      if (dataView.getUint8(i) === 0x66 && dataView.getUint8(i + 1) === 0x74 && dataView.getUint8(i + 2) === 0x79 && dataView.getUint8(i + 3) === 0x70) {
+        const majorBrand = String.fromCharCode(dataView.getUint8(i + 4), dataView.getUint8(i + 5), dataView.getUint8(i + 6), dataView.getUint8(i + 7));
+        const heicIdentifiers = ['heic', 'heix', 'mif1', 'msf1', 'hevc'];
+        if (heicIdentifiers.includes(majorBrand)) {
+          return Promise.resolve();
+        }
+      }
+    }
+    return Promise.reject();
+  };
   const handleRemoveComponent = () => {
     if (!multiple) {
       removeFile && removeFile(singleFile);
@@ -1631,14 +1652,33 @@ 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()
+                    });
+                    setImage('heic');
+                  }).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 +1700,33 @@ 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()
+                  });
+                  setImage('heic');
+                }).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,15 +1757,23 @@ 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');
+              change(file[0]);
+              setSingleFile(file[0]);
+            } 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');
+                change(file[0]);
+                setSingleFile(file[0]);
+              }).catch(() => {
+                setImage(null);
+                setError(formatError ?? configStyles.FILE.error.format);
+              });
             } else {
+              change(file[0]);
               setImage(URL.createObjectURL(file[0]));
             }
           } else {
@@ -1762,7 +1829,7 @@ const File = /*#__PURE__*/React.forwardRef(({
   }));
   React.useEffect(() => {
     if (!multiple && defaultData) {
-      if (!defaultData.type) {
+      if (!defaultData.type && !defaultData.url.startsWith('data:image/heif') && !defaultData.url.startsWith('data:image/heic') && !defaultData.url.startsWith('data:application/octet-stream')) {
         alert('Please add type in defaultData prop');
       }
       if (!defaultData.url) {
@@ -2307,6 +2374,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 +2411,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 +2432,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 = {};
@@ -2454,28 +2529,38 @@ const TH = ({
   }, item.type === 'show' ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
 };
 
+var img$1 = "data:image/svg+xml,%3csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cmask id='mask0_18604_3112' style='mask-type:luminance' maskUnits='userSpaceOnUse' x='0' y='0' width='24' height='24'%3e%3cpath d='M0 0H24V24H0V0Z' fill='white'/%3e%3c/mask%3e%3cg mask='url(%23mask0_18604_3112)'%3e%3cpath d='M11 18C11 19.1 10.1 20 9 20C7.9 20 7 19.1 7 18C7 16.9 7.9 16 9 16C10.1 16 11 16.9 11 18ZM9 10C7.9 10 7 10.9 7 12C7 13.1 7.9 14 9 14C10.1 14 11 13.1 11 12C11 10.9 10.1 10 9 10ZM9 4C7.9 4 7 4.9 7 6C7 7.1 7.9 8 9 8C10.1 8 11 7.1 11 6C11 4.9 10.1 4 9 4ZM15 8C16.1 8 17 7.1 17 6C17 4.9 16.1 4 15 4C13.9 4 13 4.9 13 6C13 7.1 13.9 8 15 8ZM15 10C13.9 10 13 10.9 13 12C13 13.1 13.9 14 15 14C16.1 14 17 13.1 17 12C17 10.9 16.1 10 15 10ZM15 16C13.9 16 13 16.9 13 18C13 19.1 13.9 20 15 20C16.1 20 17 19.1 17 18C17 16.9 16.1 16 15 16Z' fill='%23A3A5A9'/%3e%3c/g%3e%3c/svg%3e";
+
 const TD = ({
   row,
   item,
   index,
   rowItem,
   rowRadius,
+  dragStart,
+  handleMouseDown,
   hideBorder,
   innerIndex,
   tBodyColor,
+  orderColor,
   borderRight,
-  borderRightColor,
   tBodyPadding,
+  setIsDragging,
+  orderFontSize,
   tBodyFontSize,
   openListColor,
+  orderFontStyle,
   tBodyTextAlign,
+  orderFontFamily,
+  orderFontWeight,
   tBodyFontFamily,
   tBodyFontWeight,
   handleCheckDots,
   openListFontSize,
+  borderRightColor,
   openListFontStyle,
-  openListFontWeight,
   handleCheckedBody,
+  openListFontWeight,
   openListFontFamily,
   tableColumnMinWidth,
   tableColumnMaxWidth,
@@ -2603,7 +2688,26 @@ const TD = ({
     },
     onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
     className: styles$9['td-span']
-  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
+  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'draggableIcon') && /*#__PURE__*/React__default["default"].createElement("div", {
+    draggable: true,
+    style: {
+      width: '24px',
+      height: '24px',
+      cursor: 'grab'
+    },
+    onDragStart: () => dragStart(index)
+  }, /*#__PURE__*/React__default["default"].createElement("img", {
+    src: img$1,
+    alt: "drag"
+  })), hasOwnerProperty(item, 'draggable') && /*#__PURE__*/React__default["default"].createElement("p", {
+    style: {
+      color: orderColor,
+      fontSize: orderFontSize,
+      fontStyle: orderFontStyle,
+      fontFamily: orderFontFamily,
+      fontWeight: orderFontWeight
+    }
+  }, item.order), hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     index: index,
     innerIndex: innerIndex,
@@ -2816,20 +2920,34 @@ const Table = ({
   tBodyFontWeight,
   tBodyFontFamily,
   tBodyRowMarginTop,
+  orderColor,
+  orderFontSize,
+  orderFontStyle,
+  orderFontFamily,
+  orderFontWeight,
   className,
   openListColor,
   openListFontSize,
   openListFontStyle,
   openListFontWeight,
   openListFontFamily,
-  hideBorder
+  hideBorder,
+  draggable,
+  showOrder,
+  draggableColor,
+  getDraggableData
 }) => {
+  const headerRef = React.useRef(null);
+  const draggedRowIndex = React.useRef(null);
   const [body, setBody] = React.useState([]);
   const [header, setHeader] = React.useState([]);
   const [disableArr, setDisableArr] = React.useState([]);
   const [classProps, setClassProps] = React.useState({});
+  const [checkDrag, setCheckDrag] = React.useState(false);
   const [checkedArray, setCheckedArray] = React.useState([]);
   const [configStyles, setConfigStyles] = React.useState({});
+  React.useState(false);
+  const [draggingIndex, setDraggingIndex] = React.useState(null);
   const handleCheckIfArrow = (bodyData, data) => {
     let removeItemIndex;
     let headerWithoutArrow = [];
@@ -3236,66 +3354,172 @@ const Table = ({
     });
     setBody(() => checkBodyMore);
   };
+  const handleDragStart = index => {
+    draggedRowIndex.current = index;
+    setDraggingIndex(() => index);
+  };
+  const handleDrop = index => {
+    let correctData = [];
+    const newRows = body;
+    const [draggedRow] = newRows.splice(draggedRowIndex.current, 1);
+    newRows.splice(index, 0, draggedRow);
+    newRows.map(item => {
+      correctData.push([...item]);
+    });
+    setBody(correctData);
+    getDraggableData && getDraggableData(correctData);
+    setCheckDrag(prev => !prev);
+    draggedRowIndex.current = null;
+    setDraggingIndex(() => null);
+    correctData = null;
+  };
   React.useEffect(() => {
-    let checkedItems = [];
-    const disabledArray = [];
-    const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
-    if (arrowShow) {
-      const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
-      const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
-      const insert = checkForInsertArrow.map((item, index) => {
-        item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-              if (innerItem.checkBox.disabled === true) {
-                if (!disabledArray[innerIndex]) {
-                  disabledArray[innerIndex] = {
-                    rowIndex: index,
-                    columnIndex: innerIndex
-                  };
+    const draggableArray = body && body.length && body.map((item, index) => {
+      if (showOrder) {
+        Object.values(item).map((innerItem, innerIndex) => {
+          if (innerIndex === 1) {
+            innerItem.content = index + 1, innerItem.draggable = true;
+          }
+          return innerItem;
+        });
+      }
+      return item;
+    });
+    getDraggableData && getDraggableData(draggableArray);
+    setBody(() => draggableArray);
+  }, [checkDrag]);
+  React.useEffect(() => {
+    const isEqual = JSON.stringify(body) === JSON.stringify(dataBody);
+    if (!isEqual) {
+      let insert = [];
+      let newArray = [];
+      let checkedItems = [];
+      const disabledArray = [];
+      const checkBodyForChackedItems = dataBody.slice().map(item => Object.values(item));
+      if (arrowShow) {
+        const arrowColumnCount = handleSetInsertIndex(checkBodyForChackedItems[0], arrowColumn);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
+        insert = checkForInsertArrow.map((item, index) => {
+          item.map((innerItem, innerIndex) => {
+            if (hasOwnerProperty(innerItem, 'checkBox')) {
+              if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+                if (innerItem.checkBox.disabled === true) {
+                  if (!disabledArray[innerIndex]) {
+                    disabledArray[innerIndex] = {
+                      rowIndex: index,
+                      columnIndex: innerIndex
+                    };
+                  }
                 }
               }
             }
-          }
+          });
+          return item;
         });
-        return item;
-      });
-      checkedItems = handleSetCheckboxArray(insert);
-      setBody(() => insert);
-    } else {
-      const insert = checkBodyForChackedItems.map((item, index) => {
-        item.map((innerItem, innerIndex) => {
-          if (hasOwnerProperty(innerItem, 'checkBox')) {
-            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
-              if (innerItem.checkBox.disabled === true) {
-                if (!disabledArray[innerIndex]) {
-                  disabledArray[innerIndex] = {
-                    rowIndex: index,
-                    columnIndex: innerIndex
-                  };
+        checkedItems = handleSetCheckboxArray(insert);
+        if (draggable) {
+          newArray = insert && insert.length && insert.map((item, index) => {
+            item.map(innerItem => {
+              if (hasOwnerProperty(innerItem, 'colorStatus')) {
+                innerItem.colorStatus = null;
+              }
+            });
+            if (showOrder) {
+              item.unshift({
+                content: index + 1,
+                draggable: true
+              });
+            }
+            item.unshift({
+              draggableIcon: '',
+              colorStatus: draggableColor
+            });
+            return item;
+          });
+        }
+      } else {
+        insert = checkBodyForChackedItems.map((item, index) => {
+          item.map((innerItem, innerIndex) => {
+            if (hasOwnerProperty(innerItem, 'checkBox')) {
+              if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
+                if (innerItem.checkBox.disabled === true) {
+                  if (!disabledArray[innerIndex]) {
+                    disabledArray[innerIndex] = {
+                      rowIndex: index,
+                      columnIndex: innerIndex
+                    };
+                  }
                 }
               }
             }
-          }
+          });
+          return item;
         });
-        return item;
-      });
-      checkedItems = handleSetCheckboxArray(insert);
-      setBody(() => insert);
+        checkedItems = handleSetCheckboxArray(insert);
+        if (draggable) {
+          newArray = insert && insert.length && insert.map((item, index) => {
+            item.map(innerItem => {
+              if (hasOwnerProperty(innerItem, 'colorStatus')) {
+                innerItem.colorStatus = null;
+              }
+            });
+            if (showOrder) {
+              item.unshift({
+                content: index + 1,
+                draggable: true
+              });
+            }
+            item.unshift({
+              draggableIcon: '',
+              colorStatus: draggableColor
+            });
+            return item;
+          });
+        }
+      }
+      getDraggableData && getDraggableData(newArray && newArray.length ? newArray : insert);
+      setBody(() => newArray && newArray.length ? newArray : insert);
+      setDisableArr(disabledArray);
+      setCheckedArray(() => checkedItems);
     }
-    setDisableArr(disabledArray);
-    setCheckedArray(() => checkedItems);
-  }, [dataBody, arrowColumn, arrowShow]);
+  }, [dataBody, arrowColumn, arrowShow, draggable]);
   React.useEffect(() => {
-    if (arrowShow) {
-      const header = dataHeader.slice();
-      const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
-      const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
-      setHeader(() => checkForInsertArrow);
-    } else {
-      setHeader(() => dataHeader);
+    const isEqual = JSON.stringify(header) === JSON.stringify(dataHeader);
+    if (!isEqual) {
+      let insert = [];
+      let newArray = [];
+      if (arrowShow) {
+        const header = dataHeader.slice();
+        const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
+        const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
+        insert = checkForInsertArrow;
+        if (draggable) {
+          newArray = insert;
+          newArray && newArray.length && newArray.unshift({
+            content: ''
+          });
+          if (showOrder) {
+            newArray.unshift({
+              content: ''
+            });
+          }
+        }
+      } else {
+        if (draggable) {
+          newArray = dataHeader;
+          newArray && newArray.length && newArray.unshift({
+            content: ''
+          });
+          if (showOrder) {
+            newArray.unshift({
+              content: ''
+            });
+          }
+        }
+      }
+      setHeader(() => newArray && newArray.length ? newArray : insert);
     }
-  }, [dataHeader, arrowColumn, arrowShow, disableArr]);
+  }, [dataHeader, arrowColumn, arrowShow, disableArr, draggable]);
   React.useEffect(() => {
     className && setClassProps(() => classnames__default["default"](className ?? configStyles.TABLE.className));
   }, [className]);
@@ -3319,7 +3543,9 @@ const Table = ({
     },
     onClick: handleTableClick,
     className: classProps
-  }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", null, /*#__PURE__*/React__default["default"].createElement("tr", {
+  }, header && header.length > 0 && /*#__PURE__*/React__default["default"].createElement("thead", {
+    ref: headerRef
+  }, /*#__PURE__*/React__default["default"].createElement("tr", {
     style: {
       color: tHeadColor ?? configStyles.TABLE.head.color,
       backgroundColor: tHeadBackgroundColor ?? configStyles.TABLE.head.colors.background,
@@ -3350,6 +3576,9 @@ const Table = ({
     }
   }, body.map((item, index) => {
     return /*#__PURE__*/React__default["default"].createElement("tr", {
+      onDragStart: () => handleDragStart(index),
+      onDragOver: e => e.preventDefault(),
+      onDrop: () => handleDrop(index),
       key: `${item}_${index}`,
       style: {
         backgroundColor: tableRowBGColor ?? configStyles.TABLE.body.row.colors.background,
@@ -3364,6 +3593,7 @@ const Table = ({
         hideBorder: hideBorder,
         innerIndex: innerIndex,
         row: Object.values(item),
+        dragStart: handleDragStart,
         id: item.id ? item.id : '',
         handleCheckDots: handleCheckDots,
         key: `${innerItem}_${index}_${innerIndex}`,
@@ -3378,6 +3608,11 @@ const Table = ({
         handleBodyActionClick: handleBodyActionClick,
         handleMoreOptionsClick: handleMoreOptionsClick,
         handleContentListClick: handleContentListClick,
+        orderColor: orderColor ?? configStyles.TABLE.order.color,
+        orderFontSize: orderFontSize ?? configStyles.TABLE.order.font.size,
+        orderFontStyle: orderFontStyle ?? configStyles.TABLE.order.font.style,
+        orderFontFamily: orderFontFamily ?? configStyles.TABLE.order.font.family,
+        orderFontWeight: orderFontWeight ?? configStyles.TABLE.order.font.weight,
         tBodyColor: tBodyColor ?? configStyles.TABLE.body.color,
         rowItem: tableRowItem ?? configStyles.TABLE.body.row.isItem,
         rowRadius: tableRowRadius ?? configStyles.TABLE.body.row.radius,
@@ -3587,6 +3822,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 +3850,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 +3900,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 +3917,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 +4094,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 +4109,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 +4199,7 @@ const TelInput = ({
   React.useEffect(() => {
     let newValue = '';
     if (value !== undefined && value !== null) {
-      newValue = handleUtilsCheckTypeTel(value, newValue);
+      newValue = handleUtilsCheckTypeTel(value);
     }
     setInnerValue(() => newValue);
   }, [value]);
@@ -4087,6 +4343,7 @@ const NumberInput = ({
   inpStyles,
   minNumSize,
   maxNumSize,
+  insideError,
   inputChange,
   inpAttributes,
   setInnerErrorMessage
@@ -4095,15 +4352,29 @@ 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(() => `Լրացված դաշտի արժեքը պետք է լինի ${innerMinNumSize} - ${maxNumSize} միջակայքում`);
+          insideError && insideError();
+          setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ${Number.MIN_SAFE_INTEGER} - ${Number.MAX_SAFE_INTEGER} թվերի միջակայքում`);
+        }
+      } else if (innerMinNumSize && currentValue < innerMinNumSize || maxNumSize && currentValue > maxNumSize) {
+        if (currentValue === '') {
+          setInnerErrorMessage(() => '');
+        } else {
+          insideError && insideError();
+          if (innerMinNumSize && !maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ պակաս ${innerMinNumSize} - ից`);
+          } else if (!innerMinNumSize && maxNumSize) {
+            setInnerErrorMessage(() => `Լրացված դաշտի արժեքը պետք է լինի ոչ մեծ ${maxNumSize} ֊ ից`);
+          } else if (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 +4382,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 +4423,7 @@ const NumberInput = ({
     },
     min: minNumSize,
     max: maxNumSize,
+    onBlur: handleBlur,
     onInput: handleChange
   });
 };
@@ -4220,6 +4500,7 @@ const Input = ({
   telBorderRightWidth,
   telBorderRightStyle,
   telBorderRightColor,
+  fireInputInsideError,
   backgroundDisableColor,
   telBorderRightColorHover,
   type = 'text'
@@ -4335,7 +4616,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,
@@ -4361,6 +4642,7 @@ const Input = ({
     inputChange: change,
     inpStyles: inpStyles,
     inpAttributes: inpAttributes,
+    insideError: fireInputInsideError,
     minNumSize: minNumSize ? minNumSize : '',
     maxNumSize: maxNumSize ? maxNumSize : '',
     setInnerErrorMessage: setInnerErrorMessage,
@@ -4396,7 +4678,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,
@@ -4472,6 +4754,7 @@ Input.propTypes = {
   labelMarginBottom: PropTypes__default["default"].string,
   regexpErrorMessage: PropTypes__default["default"].string,
   regexp: PropTypes__default["default"].instanceOf(RegExp),
+  fireInputInsideError: PropTypes__default["default"].func,
   telBorderRightWidth: PropTypes__default["default"].string,
   telBorderRightStyle: PropTypes__default["default"].string,
   telBorderRightColor: PropTypes__default["default"].string,