@xaypay/tui 0.0.112 → 0.0.114

package/dist/index.js

@@ -254,6 +254,9 @@ const compereConfigs = () => {
 
   return _.merge(packageConfig, projectConfig);
 };
+const hasOwnerProperty = (object, property) => {
+  return Object.prototype.hasOwnProperty.call(object, property);
+};
 
 const SvgCheckboxUnchecked = ({
   title,
@@ -409,6 +412,11 @@ const TH = ({
   handleHeaderItemClick,
   handleCheckArrowActionHeader
 }) => {
+  const handleCheckArrowAction = (e, object, property) => {
+    if (hasOwnerProperty(object, property)) {
+      handleCheckArrowActionHeader(e, object);
+    }
+  };
   return /*#__PURE__*/React__default["default"].createElement("th", {
     style: {
       width: 'auto',
@@ -428,9 +436,9 @@ const TH = ({
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: Object.prototype.hasOwnProperty.call(item, 'checkBox') ? 'space-between' : 'center'
+      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
     }
-  }, item.hasOwnProperty('checkBox') ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
+  }, hasOwnerProperty(item, 'checkBox') ? /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     float: "left",
     checked: item.checkBox.checked,
@@ -442,8 +450,8 @@ const TH = ({
     style: {
       margin: '0px'
     },
-    onClick: Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? e => handleCheckArrowActionHeader(e, item) : _ => _
-  }, item.type === 'show' ? item.content : Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
+    onClick: e => handleCheckArrowAction(e, item, 'arrowComponent')
+  }, item.type === 'show' ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : '')));
 };
 
 const TD = ({
@@ -476,6 +484,34 @@ const TD = ({
     };
     handleBodyActionClick(e, actionData);
   };
+  const handleCheckActions = (e, object, property, objectIndex) => {
+    if (hasOwnerProperty(object, property)) {
+      handleBodyAction(e, {
+        item: object,
+        itemIndex: objectIndex
+      });
+    }
+  };
+  const handleMoreOptions = (item, index, optionItem, innerIndex, optionIndex, options) => {
+    handleMoreOptionsClick({
+      item,
+      index,
+      options,
+      optionItem,
+      innerIndex,
+      optionIndex
+    });
+  };
+  const handleContentList = (e, item, index, innerIndex, listContentId, listContent, listContentIndex) => {
+    handleContentListClick(e, {
+      item,
+      index,
+      innerIndex,
+      listContentId,
+      listContent,
+      listContentIndex
+    });
+  };
   return /*#__PURE__*/React__default["default"].createElement("td", {
     style: {
       width: 'auto',
@@ -488,7 +524,7 @@ const TD = ({
       textAlign: tBodyTextAlign,
       fontFamily: tBodyFontFamily,
       fontWeight: tBodyFontWeight,
-      boxShadow: Object.prototype.hasOwnProperty.call(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : ''
+      boxShadow: hasOwnerProperty(item, 'colorStatus') ? `inset 3px 0px 0px 0px ${item.colorStatus}` : ''
     }
   }, Array.isArray(item) ? item.length > 0 ? item.map((newItem, newIndex) => {
     if (newItem && !Array.isArray(newItem) && typeof newItem === 'object') {
@@ -497,16 +533,13 @@ const TD = ({
           width: '32px',
           height: '32px',
           marginRight: '10px',
-          cursor: Object.prototype.hasOwnProperty.call(newItem, 'type') ? 'pointer' : 'auto'
+          cursor: hasOwnerProperty(newItem, 'type') ? 'pointer' : 'auto'
         },
         id: newItem.id,
         type: newItem.type,
         className: styles$c['td-span'],
         key: `${newItem.id}_${newIndex}`,
-        onClick: Object.prototype.hasOwnProperty.call(newItem, 'type') ? e => handleBodyAction(e, {
-          item: newItem,
-          itemIndex: newIndex
-        }) : _ => _
+        onClick: e => handleCheckActions(e, newItem, 'type', newIndex)
       }, newItem.content);
     } else if (newItem && Array.isArray(newItem)) {
       return /*#__PURE__*/React__default["default"].createElement("span", {
@@ -522,15 +555,12 @@ const TD = ({
             width: '32px',
             height: '32px',
             marginRight: '10px',
-            cursor: Object.prototype.hasOwnProperty.call(iT, 'type') ? 'pointer' : 'auto'
+            cursor: hasOwnerProperty(iT, 'type') ? 'pointer' : 'auto'
           },
           id: iT.id ? iT.id : '',
           type: iT.type ? iT.type : '',
           className: styles$c['td-span'],
-          onClick: Object.prototype.hasOwnProperty.call(iT, 'type') ? e => handleBodyAction(e, {
-            item: iT,
-            itemIndex: iN
-          }) : _ => _,
+          onClick: e => handleCheckActions(e, iT, 'type', iN),
           key: `${iT.id || iT.content}_${iN}`
         }, iT.content);
       }));
@@ -543,18 +573,18 @@ const TD = ({
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: Object.prototype.hasOwnProperty.call(item, 'contentList') || Object.prototype.hasOwnProperty.call(item, 'checkBox') ? 'space-between' : 'center'
+      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
     }
-  }, Object.prototype.hasOwnProperty.call(item, 'contentList') && /*#__PURE__*/React__default["default"].createElement("div", {
+  }, !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && (!hasOwnerProperty(item, 'rightArrow') || item.rightArrow !== true) ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
     id: item.id,
     style: {
       width: '21px',
       height: '21px',
       cursor: 'pointer'
     },
-    onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex),
+    onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
     className: styles$c['td-span']
-  }, item.status === 'close' ? item.closeArrow : item.openArrow), Object.prototype.hasOwnProperty.call(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
+  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default["default"].createElement(SingleCheckbox, {
     data: item,
     index: index,
     innerIndex: innerIndex,
@@ -565,15 +595,16 @@ const TD = ({
     unCheckedColor: item.checkBox.unCheckedColor
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      marginLeft: item.contentList ? '10px' : '0px'
+      marginLeft: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '0px' : '10px' : hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow') ? '10px' : '0px' : '0px',
+      marginRight: hasOwnerProperty(item, 'contentList') && (!hasOwnerProperty(item, 'hideArrow') || item.hideArrow !== true) ? hasOwnerProperty(item, 'rightArrow') ? item.rightArrow === true ? '10px' : '0px' : '0px' : '0px'
     }
   }, /*#__PURE__*/React__default["default"].createElement("p", {
     style: {
       margin: '0px',
-      cursor: Object.prototype.hasOwnProperty.call(item, 'arrowComponent') || Object.prototype.hasOwnProperty.call(item, 'dots') ? 'pointer' : 'auto'
+      cursor: hasOwnerProperty(item, 'arrowComponent') || hasOwnerProperty(item, 'dots') ? 'pointer' : 'auto'
     },
-    onClick: Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : Object.prototype.hasOwnProperty.call(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
-  }, item.content ? item.content : Object.prototype.hasOwnProperty.call(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : Object.prototype.hasOwnProperty.call(item, 'dots') ? /*#__PURE__*/React__default["default"].createElement("span", {
+    onClick: hasOwnerProperty(item, 'arrowComponent') ? () => handleCheckArrowAction(item, item.checkIndex) : hasOwnerProperty(item, 'dots') ? e => handleCheckDots(e, item, index, innerIndex) : _ => _
+  }, item.content ? item.content : hasOwnerProperty(item, 'arrowComponent') ? item.status === 'close' ? item.closeArrow : item.openArrow : hasOwnerProperty(item, 'dots') ? /*#__PURE__*/React__default["default"].createElement("span", {
     style: {
       display: 'block',
       position: 'relative'
@@ -594,7 +625,7 @@ const TD = ({
       backgroundColor: '#FFFFFF',
       boxShadow: '0px 0px 20px 0px #3C393E4D'
     }
-  }, Object.prototype.hasOwnProperty.call(item, 'options') && item.options.map((optionItem, optionIndex) => {
+  }, hasOwnerProperty(item, 'options') && item.options.map((optionItem, optionIndex) => {
     return /*#__PURE__*/React__default["default"].createElement("span", {
       key: `${optionItem.content}_${optionIndex}`,
       className: styles$c['dots-option-item'],
@@ -603,14 +634,7 @@ const TD = ({
         fontSize: '14px',
         fontFamily: 'Noto Sans Armenian'
       },
-      onClick: () => handleMoreOptionsClick({
-        item,
-        index,
-        optionItem,
-        innerIndex,
-        optionIndex,
-        options: item.options
-      })
+      onClick: () => handleMoreOptions(item, index, optionItem, innerIndex, optionIndex, item.options)
     }, /*#__PURE__*/React__default["default"].createElement("span", {
       style: {
         marginRight: '10px'
@@ -621,11 +645,12 @@ const TD = ({
         textAlign: 'left',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis'
+        textOverflow: 'ellipsis',
+        marginBottom: '5px'
       },
       title: optionItem.content
     }, optionItem.content));
-  }))) : ''), Object.prototype.hasOwnProperty.call(item, 'contentList') && /*#__PURE__*/React__default["default"].createElement("div", {
+  }))) : ''), hasOwnerProperty(item, 'contentList') && /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       overflow: 'auto',
       marginTop: '10px',
@@ -641,16 +666,18 @@ const TD = ({
         color: openListColor,
         maxWidth: (item.content.length * 9 <= 100 ? 100 : item.content.length * 9) + 'px'
       },
-      onClick: e => handleContentListClick(e, {
-        item,
-        index,
-        innerIndex,
-        listContentId: innerItem.id,
-        listContent: innerItem.content,
-        listContentIndex: innerItemIndex
-      })
+      onClick: e => handleContentList(e, item, index, innerIndex, innerItem.id, innerItem.content, innerItemIndex)
     }, innerItem.content);
-  })))) : '');
+  }))), !hasOwnerProperty(item, 'hideArrow') && item.hideArrow !== false && hasOwnerProperty(item, 'rightArrow') && item.rightArrow === true ? hasOwnerProperty(item, 'contentList') && (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && /*#__PURE__*/React__default["default"].createElement("div", {
+    id: item.id,
+    style: {
+      width: '21px',
+      height: '21px',
+      cursor: 'pointer'
+    },
+    onClick: () => handleOpenCloseRowSingleArrow(index, innerIndex, item),
+    className: styles$c['td-span']
+  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '') : '');
 };
 
 const SvgUpArrow = ({
@@ -738,7 +765,7 @@ const Table = ({
     bodyData.map((item, index) => {
       if (index === data.index) {
         item.map((innerItem, innerIndex) => {
-          if (Object.prototype.hasOwnProperty.call(innerItem, 'arrowComponent')) {
+          if (hasOwnerProperty(innerItem, 'arrowComponent')) {
             removeItemIndex = innerIndex;
           }
         });
@@ -762,7 +789,7 @@ const Table = ({
       let removeItemIndex;
       let headerWithoutArrow;
       header.map((item, index) => {
-        if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+        if (hasOwnerProperty(item, 'arrowComponent')) {
           removeItemIndex = index;
         }
       });
@@ -802,7 +829,7 @@ const Table = ({
     let checkedItems = [];
     data.map((item, index) => {
       item.map((innerItem, innerIndex) => {
-        if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+        if (hasOwnerProperty(innerItem, 'checkBox')) {
           if (!checkedItems[innerIndex]) {
             checkedItems[innerIndex] = [];
           }
@@ -882,7 +909,7 @@ const Table = ({
         checkableItemBool = !item.checkBox.checked;
         item.checkBox.checked = !item.checkBox.checked;
       }
-      if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+      if (hasOwnerProperty(item, 'arrowComponent')) {
         removeItemIndex = index;
       }
       return item;
@@ -890,11 +917,13 @@ const Table = ({
     const newUpdatedBody = updatedBody.map((item, index) => {
       return item.map((innerItem, innerIndex) => {
         if (checkableItemIndex === innerIndex) {
-          innerItem.checkBox.checked = checkableItemBool;
-          checkableBodyRowItems.push({
-            column: innerIndex,
-            columnItem: innerItem
-          });
+          if (!hasOwnerProperty(innerItem.checkBox, 'disabled') || innerItem.checkBox.disabled !== true) {
+            innerItem.checkBox.checked = checkableItemBool;
+            checkableBodyRowItems.push({
+              column: innerIndex,
+              columnItem: innerItem
+            });
+          }
           handleHeaderCheckedUpdate({
             row: index,
             column: innerIndex,
@@ -932,7 +961,7 @@ const Table = ({
     const updatedBody = body.slice().map(item => Object.values(item));
     const newData = updatedBody.map((item, index) => {
       return item.map((innerItem, innerIndex) => {
-        if (innerItem.id === data.id && innerItem.content == data.content && Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
+        if (innerItem.id === data.id && innerItem.content == data.content && hasOwnerProperty(innerItem, 'checkBox')) {
           innerItem.checkBox.checked = !innerItem.checkBox.checked;
           handleHeaderCheckedUpdate({
             row: index,
@@ -989,7 +1018,7 @@ const Table = ({
   const handleCheckArrowAction = (item, rowPosition) => {
     const status = item.status;
     const checkedOpenableRow = body[rowPosition].map(innerItem => {
-      if (Object.prototype.hasOwnProperty.call(innerItem, 'status')) {
+      if (hasOwnerProperty(innerItem, 'status')) {
         if (status === 'close') {
           innerItem.status = 'open';
         } else {
@@ -1003,7 +1032,8 @@ const Table = ({
       return [...prev];
     });
   };
-  const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex) => {
+  const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex, clickableItem) => {
+    console.log(clickableItem, 'clickableItem');
     let single = {};
     const allArrows = [];
     const checkedOpenableRow = body[arrowRowIndex].map((item, index) => {
@@ -1015,13 +1045,13 @@ const Table = ({
         }
         single = item;
       }
-      if (Object.prototype.hasOwnProperty.call(item, 'status') && !Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+      if (hasOwnerProperty(item, 'status') && !hasOwnerProperty(item, 'arrowComponent')) {
         allArrows.push(item);
       }
       return item;
     });
     const checkedOpenableRowArrow = checkedOpenableRow.map(item => {
-      if (Object.prototype.hasOwnProperty.call(item, 'arrowComponent')) {
+      if (hasOwnerProperty(item, 'arrowComponent')) {
         if (single && single.status === 'close') {
           item.status = 'close';
         } else if (single && single.status === 'open') {
@@ -1030,6 +1060,9 @@ const Table = ({
           }
         }
       }
+      if (hasOwnerProperty(clickableItem, 'theSame') && hasOwnerProperty(item, 'theSame') && clickableItem.theSame === item.theSame) {
+        item.status = clickableItem.status;
+      }
       return item;
     });
     setBody(prev => {
@@ -1051,7 +1084,7 @@ const Table = ({
     });
     const checkedOpenableAllRowsBody = body.map(innerItem => {
       return innerItem.map(iElem => {
-        if (Object.prototype.hasOwnProperty.call(iElem, 'status')) {
+        if (hasOwnerProperty(iElem, 'status')) {
           if (item.status === 'open') {
             iElem.status = 'open';
           } else {
@@ -1068,7 +1101,7 @@ const Table = ({
     e.stopPropagation();
     const checkBodyMore = body.map((elemItem, elemIndex) => {
       return elemItem.map((elemInnerItem, elemInnerIndex) => {
-        if (elemIndex === index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+        if (elemIndex === index && hasOwnerProperty(elemInnerItem, 'dots')) {
           if (elemInnerIndex === innerIndex) {
             if (item.dotsStatus === 'deActive') {
               elemInnerItem.dotsStatus = 'active';
@@ -1076,7 +1109,7 @@ const Table = ({
               elemInnerItem.dotsStatus = 'deActive';
             }
           }
-        } else if (elemIndex !== index && Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+        } else if (elemIndex !== index && hasOwnerProperty(elemInnerItem, 'dots')) {
           if (elemInnerIndex === innerIndex) {
             elemInnerItem.dotsStatus = 'deActive';
           }
@@ -1086,20 +1119,6 @@ const Table = ({
     });
     setBody(() => checkBodyMore);
   };
-  const handleCheckDisable = (arr, disableArr) => {
-    let headerWithDisabled = [];
-    if (disableArr && disableArr.length > 0) {
-      headerWithDisabled = arr.map((item, index) => {
-        if (disableArr[index]) {
-          if (Object.prototype.hasOwnProperty.call(item, 'checkBox')) {
-            item.checkBox.disabled = true;
-          }
-        }
-        return item;
-      });
-    }
-    return headerWithDisabled;
-  };
   const handleContentListClick = (e, data) => {
     e.stopPropagation();
     const {
@@ -1138,7 +1157,7 @@ const Table = ({
   const handleTableClick = () => {
     const checkBodyMore = body.map(elemItem => {
       return elemItem.map(elemInnerItem => {
-        if (Object.prototype.hasOwnProperty.call(elemInnerItem, 'dots')) {
+        if (hasOwnerProperty(elemInnerItem, 'dots')) {
           elemInnerItem.dotsStatus = 'deActive';
         }
         return elemInnerItem;
@@ -1155,8 +1174,8 @@ const Table = ({
       const checkForInsertArrow = handleTransformDataForInsertArrow(checkBodyForChackedItems, arrowColumnCount, 'body');
       const insert = checkForInsertArrow.map((item, index) => {
         item.map((innerItem, innerIndex) => {
-          if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
-            if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
+          if (hasOwnerProperty(innerItem, 'checkBox')) {
+            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
               if (innerItem.checkBox.disabled === true) {
                 if (!disabledArray[innerIndex]) {
                   disabledArray[innerIndex] = {
@@ -1175,8 +1194,8 @@ const Table = ({
     } else {
       const insert = checkBodyForChackedItems.map((item, index) => {
         item.map((innerItem, innerIndex) => {
-          if (Object.prototype.hasOwnProperty.call(innerItem, 'checkBox')) {
-            if (Object.prototype.hasOwnProperty.call(innerItem.checkBox, 'disabled')) {
+          if (hasOwnerProperty(innerItem, 'checkBox')) {
+            if (hasOwnerProperty(innerItem.checkBox, 'disabled')) {
               if (innerItem.checkBox.disabled === true) {
                 if (!disabledArray[innerIndex]) {
                   disabledArray[innerIndex] = {
@@ -1201,11 +1220,9 @@ const Table = ({
       const header = dataHeader.slice();
       const arrowColumnCount = handleSetInsertIndex(header, arrowColumn);
       const checkForInsertArrow = handleTransformDataForInsertArrow(header, arrowColumnCount, 'header');
-      const headerWithDisabled = handleCheckDisable(checkForInsertArrow, disableArr);
-      setHeader(() => headerWithDisabled.length > 0 ? headerWithDisabled : checkForInsertArrow);
+      setHeader(() => checkForInsertArrow);
     } else {
-      const headerWithDisabled = handleCheckDisable(dataHeader, disableArr);
-      setHeader(() => headerWithDisabled.length > 0 ? headerWithDisabled : dataHeader);
+      setHeader(() => dataHeader);
     }
   }, [dataHeader, arrowColumn, arrowShow, disableArr]);
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("table", {
@@ -1343,6 +1360,26 @@ const SvgPrev = ({
   fill: "#3C393E"
 }));
 
+const SvgZoom = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React__namespace.createElement("svg", _extends({
+  width: "32",
+  height: "32",
+  viewBox: "0 0 32 32",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  "aria-labelledby": titleId
+}, props), title ? /*#__PURE__*/React__namespace.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React__namespace.createElement("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M3 14C3 7.925 7.925 3 14 3s11 4.925 11 11-4.925 11-11 11S3 20.075 3 14ZM14 1C6.82 1 1 6.82 1 14s5.82 13 13 13c3.23 0 6.185-1.178 8.458-3.128l6.835 6.835a1 1 0 0 0 1.414-1.414l-6.835-6.835A12.949 12.949 0 0 0 27 14c0-7.18-5.82-13-13-13Zm1 9a1 1 0 1 0-2 0v3h-3a1 1 0 1 0 0 2h3v3a1 1 0 1 0 2 0v-3h3a1 1 0 1 0 0-2h-3v-3Z",
+  fill: "#fff"
+}));
+
 const SvgCloseIcon = ({
   title,
   titleId,
@@ -1388,6 +1425,7 @@ const Modal = ({
   height,
   padding,
   setShow,
+  zoomIcon,
   selected,
   children,
   minWidth,
@@ -1404,17 +1442,18 @@ const Modal = ({
   borderStyle,
   borderWidth,
   borderColor,
+  imageMargin,
+  showZoomIcon,
   outsideClose,
   headerWeight,
   headerHeight,
+  imageMaxWidth,
   justifyContent,
+  imageWrapWidth,
   backgroundColor,
+  imageWrapHeight,
   grayDecorHeight,
-  layerBackgroundColor,
-  imageMargin,
-  imageMaxWidth,
-  imageWrapWidth,
-  imageWrapHeight
+  layerBackgroundColor
 }) => {
   const [select, setSelect] = React.useState(0);
   const [innerData, setInnerData] = React.useState([]);
@@ -1446,6 +1485,11 @@ const Modal = ({
       handleCloseModal();
     }
   };
+  const handleOpenInNewTab = url => {
+    const imageLink = document.createElement('a');
+    imageLink.href = url, imageLink.target = '_blank';
+    imageLink.click();
+  };
   React.useEffect(() => {
     if (type === 'images') {
       if (data) {
@@ -1593,11 +1637,12 @@ const Modal = ({
     }
   }, innerData && innerData.length > 0 && innerData.map((item, index) => {
     if (select === index) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (!item.hasOwnProperty('url')) {
+      if (!hasOwnerProperty(item, 'url')) {
         alert('Please add url property in data prop on each element');
       } else {
-        return /*#__PURE__*/React__default["default"].createElement("img", {
+        return /*#__PURE__*/React__default["default"].createElement("span", {
+          key: `${item.url}_${item.id ? item.id : '007'}_${index}`
+        }, /*#__PURE__*/React__default["default"].createElement("img", {
           style: {
             display: 'block',
             objectFit: 'cover',
@@ -1608,9 +1653,26 @@ const Modal = ({
             height: imageHeight ? imageHeight : configStyles.MODAL.imageHeight,
             maxWidth: imageMaxWidth ? imageMaxWidth : configStyles.MODAL.imageMaxWidth
           },
-          src: item.url,
-          key: item.id ? item.id : index
-        });
+          src: item.url
+        }), showZoomIcon ? /*#__PURE__*/React__default["default"].createElement("div", {
+          style: {
+            top: '0px',
+            left: '0px',
+            zIndex: '10',
+            right: '0px',
+            bottom: '0px',
+            margin: 'auto',
+            display: 'flex',
+            maxWidth: '40px',
+            maxHeight: '40px',
+            cursor: 'pointer',
+            overflow: 'hidden',
+            position: 'absolute',
+            alignItems: 'center',
+            justifyContent: 'center'
+          },
+          onClick: () => handleOpenInNewTab(item.url)
+        }, zoomIcon ? zoomIcon : /*#__PURE__*/React__default["default"].createElement(SvgZoom, null)) : '');
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement("button", {
@@ -1656,26 +1718,28 @@ Modal.propTypes = {
   mMaxWidth: PropTypes__default["default"].string,
   minHeight: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
+  zoomIcon: PropTypes__default["default"].element,
   alignItems: PropTypes__default["default"].string,
   mMaxHeight: PropTypes__default["default"].string,
   headerText: PropTypes__default["default"].string,
   imageWidth: PropTypes__default["default"].string,
   headerSize: PropTypes__default["default"].string,
   outsideClose: PropTypes__default["default"].bool,
+  showZoomIcon: PropTypes__default["default"].bool,
+  imageMargin: PropTypes__default["default"].string,
   borderStyle: PropTypes__default["default"].string,
   borderWidth: PropTypes__default["default"].string,
   headerColor: PropTypes__default["default"].string,
   imageHeight: PropTypes__default["default"].string,
   headerWeight: PropTypes__default["default"].string,
   headerHeight: PropTypes__default["default"].string,
+  imageMaxWidth: PropTypes__default["default"].string,
   justifyContent: PropTypes__default["default"].string,
+  imageWrapWidth: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   grayDecorHeight: PropTypes__default["default"].string,
-  layerBackgroundColor: PropTypes__default["default"].string,
-  imageMargin: PropTypes__default["default"].string,
-  imageMaxWidth: PropTypes__default["default"].string,
-  imageWrapWidth: PropTypes__default["default"].string,
-  imageWrapHeight: PropTypes__default["default"].string
+  imageWrapHeight: PropTypes__default["default"].string,
+  layerBackgroundColor: PropTypes__default["default"].string
 };
 Modal.defaultProps = {
   type: 'content'
@@ -1727,6 +1791,7 @@ const Input = ({
   maxNumSize,
   labelColor,
   errorColor,
+  withoutDot,
   borderRight,
   placeholder,
   errorZindex,
@@ -1872,6 +1937,15 @@ const Input = ({
           change(newStr);
         }
       }
+      if (withoutDot && !/^\d+$/.test(currentValue)) {
+        const newStr = currentValue.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+          return b + c.replace(/\./g, '');
+        });
+        setInnerValue(newStr);
+        if (change) {
+          change(newStr);
+        }
+      }
       if (currentValue === '') {
         setInnerValue('');
         if (change) {
@@ -2004,6 +2078,15 @@ const Input = ({
               change(newStr);
             }
           }
+          if (withoutDot && !/^\d+$/.test(value)) {
+            const newStr = value.replace(/[^0-9]/g, '').replace(/^([^.]*\.)(.*)$/, function (_, b, c) {
+              return b + c.replace(/\./g, '');
+            });
+            setInnerValue(newStr);
+            if (change) {
+              change(newStr);
+            }
+          }
           if (value === '') {
             setInnerValue('');
             if (change) {
@@ -2143,6 +2226,7 @@ Input.propTypes = {
   padding: PropTypes__default["default"].string,
   fontSize: PropTypes__default["default"].string,
   tooltip: PropTypes__default["default"].element,
+  withoutDot: PropTypes__default["default"].bool,
   marginTop: PropTypes__default["default"].string,
   transform: PropTypes__default["default"].string,
   className: PropTypes__default["default"].string,
@@ -2500,8 +2584,7 @@ const Select = ({
   };
   const isObjectEmpty = obj => {
     for (var key in obj) {
-      // eslint-disable-next-line no-prototype-builtins
-      if (obj.hasOwnProperty(key)) {
+      if (hasOwnerProperty(obj, key)) {
         return false;
       }
     }
@@ -3411,7 +3494,7 @@ for (let i = 0; i < 256; ++i) {
 function unsafeStringify(arr, offset = 0) {
   // Note: Be careful editing this code!  It's been tuned for performance
   // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
-  return byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]];
+  return (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase();
 }
 
 const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);
@@ -3631,6 +3714,7 @@ const FileItem = /*#__PURE__*/React__default["default"].memo(({
     }, time));
     return () => {
       setI(_ => _);
+      setT(_ => _);
       clearTimeout(t);
       clearInterval(i);
     };
@@ -3890,6 +3974,7 @@ const NewFile = ({
   listItemPadding,
   progressFontSize,
   borderHoverColor,
+  maxCHoosenLength,
   listItemErrorSize,
   progressTrackColor,
   fileAreaImageWidth,
@@ -3900,9 +3985,11 @@ const NewFile = ({
   progressSuccessColor,
   progressLoadingColor,
   hiddenBackgroundColor,
+  maxCHoosenLengthError,
   extentionsRowMarginTop,
   listItemBackgroundColor,
-  listItemBackgroundErrorColor
+  listItemBackgroundErrorColor,
+  maxCHoosenLengthErrorHideTime
 }) => {
   const ref = React.useRef(null);
   const inpRef = React.useRef(null);
@@ -3910,13 +3997,10 @@ const NewFile = ({
   const [error, setError] = React.useState('');
   const [isHover, setIsHover] = React.useState(false);
   const [singleFile, setSingleFile] = React.useState(null);
+  const [choosenFileCount, setChoosenFileCount] = React.useState(0);
   const [image, setImage] = React.useState(!multiple ? defaultData ? defaultData.type !== 'application/pdf' ? defaultData.url : 'pdf' : null : null);
   const configStyles = compereConfigs();
   const handleRemoveComponent = () => {
-    // eslint-disable-next-line react/no-find-dom-node
-    const node = ReactDOM__default["default"].findDOMNode(ref.current);
-    const parent = node.parentNode;
-    parent.removeChild(node);
     if (!multiple) {
       removeFile && removeFile(singleFile);
     } else {
@@ -3928,11 +4012,47 @@ const NewFile = ({
     setImage(null);
     removeFile && removeFile(singleFile);
   };
-  const handleChange = e => {
-    const file = e.target.files;
-    if (multiple) {
-      setError('');
-      setImage(null);
+  const handleUploadFiles = file => {
+    if (maxCHoosenLength && choosenFileCount > 0) {
+      if (file.length > choosenFileCount || file.length + memoizedItems.length > choosenFileCount) {
+        setError(maxCHoosenLengthError ? maxCHoosenLengthError : `Դիմումին կարող եք կցել առավելագույնը ${choosenFileCount} ֆայլ`);
+        const clearFunc = () => {
+          clearTimeout(time);
+        };
+        const time = setTimeout(() => {
+          setError('');
+          clearFunc();
+        }, maxCHoosenLengthErrorHideTime && typeof maxCHoosenLengthErrorHideTime === 'number' ? Math.round(maxCHoosenLengthErrorHideTime) : 3000);
+      } else {
+        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()
+                });
+              } else {
+                change({
+                  file: file[ix],
+                  uuid: v4(),
+                  check: formatError
+                });
+              }
+            } else {
+              change({
+                file: file[ix],
+                uuid: v4(),
+                check: maxSizeError
+              });
+            }
+          }
+        }
+      }
+    } else {
       for (let ix = 0; ix < file.length; ix++) {
         if (file[ix]) {
           if (file[ix].size <= maxSize * Math.pow(2, 20)) {
@@ -3960,6 +4080,14 @@ const NewFile = ({
           }
         }
       }
+    }
+  };
+  const handleChange = e => {
+    const file = e.target.files;
+    if (multiple) {
+      setError('');
+      setImage(null);
+      handleUploadFiles(file);
       if (file.length === 0 && memoizedItems.length === 0) {
         setError(noChoosenFile);
       }
@@ -4041,7 +4169,18 @@ const NewFile = ({
     if (multiple && !removeFile) {
       alert('Please add removeFile prop on NewFile component, it is a require in multiple mode');
     }
-  }, [multiple, removeFile, filesArray && filesArray.length, defaultData]);
+    if (maxCHoosenLength) {
+      if (typeof maxCHoosenLength !== 'number') {
+        alert('maxCHoosenLength prop must be a number, please check it!');
+      } else {
+        if (maxCHoosenLength <= 0) {
+          setChoosenFileCount(1);
+        } else {
+          setChoosenFileCount(Math.round(maxCHoosenLength));
+        }
+      }
+    }
+  }, [multiple, removeFile, filesArray && filesArray.length, defaultData, maxCHoosenLength]);
   React.useEffect(() => {
     if (deleteComponent && !removeComponent) {
       alert('Please add removeComponent prop on NewFile component it is require when deleteComponent prop is true');
@@ -4243,6 +4382,7 @@ NewFile.propTypes = {
   backgroundColor: PropTypes__default["default"].string,
   change: PropTypes__default["default"].func.isRequired,
   listItemPadding: PropTypes__default["default"].string,
+  maxCHoosenLength: PropTypes__default["default"].number,
   progressFontSize: PropTypes__default["default"].string,
   borderHoverColor: PropTypes__default["default"].string,
   listItemErrorSize: PropTypes__default["default"].string,
@@ -4255,9 +4395,11 @@ NewFile.propTypes = {
   progressSuccessColor: PropTypes__default["default"].string,
   progressLoadingColor: PropTypes__default["default"].string,
   hiddenBackgroundColor: PropTypes__default["default"].string,
+  maxCHoosenLengthError: PropTypes__default["default"].string,
   extentionsRowMarginTop: PropTypes__default["default"].string,
   listItemBackgroundColor: PropTypes__default["default"].string,
   listItemBackgroundErrorColor: PropTypes__default["default"].string,
+  maxCHoosenLengthErrorHideTime: PropTypes__default["default"].number,
   filesArray: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
   fileExtensions: PropTypes__default["default"].arrayOf(PropTypes__default["default"].string)
 };
@@ -4412,16 +4554,10 @@ const Textarea = ({
     if (maxLength) {
       if (value.length > maxLength) {
         onChange(value.substr(0, maxLength));
-        setError('Նիշերի քանակը գերազանցում է');
-      } else {
-        setError('');
       }
     } else {
       if (value.length > configStyles.TEXTAREA.maxLength) {
-        setError('Նիշերի քանակը գերազանցում է');
         onChange(value.substr(0, configStyles.TEXTAREA.maxLength));
-      } else {
-        setError('');
       }
     }
   };
@@ -4632,7 +4768,7 @@ Typography.propTypes = {
   textDecoration: PropTypes__default["default"].string,
   backgroundColor: PropTypes__default["default"].string,
   variant: PropTypes__default["default"].oneOf(Object.values(TypographyType)),
-  size: PropTypes__default["default"].oneOf([PropTypes__default["default"].string, PropTypes__default["default"].number])
+  size: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
 };
 Typography.defaultProps = {
   variant: 'p'
@@ -5220,8 +5356,7 @@ const NewAutocomplete = ({
       alert('Please add options prop');
     }
     options && options.length > 0 && options.map(item => {
-      // eslint-disable-next-line no-prototype-builtins
-      if (!item.hasOwnProperty(keyNames.name)) {
+      if (!hasOwnerProperty(item, keyNames.name)) {
         alert(`Please add ${keyNames.name} property in items of options array`);
       }
     });