@xaypay/tui 0.0.113 → 0.0.115

package/dist/index.es.js

@@ -401,7 +401,7 @@ const TH = ({
       borderTopRightRadius: borderTopRightRadius
     },
     onClick: handleHeaderItemClick,
-    className: `${item.sortingArrows && styles$c['sorting-arrows']}`
+    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$c['sorting-arrows'] : '' : ''}`
   }, /*#__PURE__*/React__default.createElement("div", {
     style: {
       display: 'flex',
@@ -543,18 +543,18 @@ const TD = ({
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: hasOwnerProperty(item, 'contentList') || hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
+      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
     }
-  }, hasOwnerProperty(item, 'contentList') && /*#__PURE__*/React__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.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), hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default.createElement(SingleCheckbox, {
+  }, hasOwnerProperty(item, 'status') && item.status === 'close' ? item.closeArrow : item.openArrow) : '', hasOwnerProperty(item, 'checkBox') && /*#__PURE__*/React__default.createElement(SingleCheckbox, {
     data: item,
     index: index,
     innerIndex: innerIndex,
@@ -565,7 +565,8 @@ const TD = ({
     unCheckedColor: item.checkBox.unCheckedColor
   }), /*#__PURE__*/React__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.createElement("p", {
     style: {
@@ -614,7 +615,8 @@ const TD = ({
         textAlign: 'left',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis'
+        textOverflow: 'ellipsis',
+        marginBottom: '5px'
       },
       title: optionItem.content
     }, optionItem.content));
@@ -636,7 +638,16 @@ const TD = ({
       },
       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.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 = ({
@@ -876,11 +887,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,
@@ -989,7 +1002,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) => {
@@ -1016,6 +1030,9 @@ const Table = ({
           }
         }
       }
+      if (hasOwnerProperty(clickableItem, 'theSame') && hasOwnerProperty(item, 'theSame') && clickableItem.theSame === item.theSame) {
+        item.status = clickableItem.status;
+      }
       return item;
     });
     setBody(prev => {
@@ -1072,20 +1089,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 (hasOwnerProperty(item, 'checkBox')) {
-            item.checkBox.disabled = true;
-          }
-        }
-        return item;
-      });
-    }
-    return headerWithDisabled;
-  };
   const handleContentListClick = (e, data) => {
     e.stopPropagation();
     const {
@@ -1187,11 +1190,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.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("table", {
@@ -1329,6 +1330,26 @@ const SvgPrev = ({
   fill: "#3C393E"
 }));
 
+const SvgZoom = ({
+  title,
+  titleId,
+  ...props
+}) => /*#__PURE__*/React.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.createElement("title", {
+  id: titleId
+}, title) : null, /*#__PURE__*/React.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,
@@ -1374,6 +1395,7 @@ const Modal = ({
   height,
   padding,
   setShow,
+  zoomIcon,
   selected,
   children,
   minWidth,
@@ -1390,17 +1412,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] = useState(0);
   const [innerData, setInnerData] = useState([]);
@@ -1432,6 +1455,11 @@ const Modal = ({
       handleCloseModal();
     }
   };
+  const handleOpenInNewTab = url => {
+    const imageLink = document.createElement('a');
+    imageLink.href = url, imageLink.target = '_blank';
+    imageLink.click();
+  };
   useEffect(() => {
     if (type === 'images') {
       if (data) {
@@ -1582,7 +1610,9 @@ const Modal = ({
       if (!hasOwnerProperty(item, 'url')) {
         alert('Please add url property in data prop on each element');
       } else {
-        return /*#__PURE__*/React__default.createElement("img", {
+        return /*#__PURE__*/React__default.createElement("span", {
+          key: `${item.url}_${item.id ? item.id : '007'}_${index}`
+        }, /*#__PURE__*/React__default.createElement("img", {
           style: {
             display: 'block',
             objectFit: 'cover',
@@ -1593,9 +1623,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.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.createElement(SvgZoom, null)) : '');
       }
     }
   }), innerData && innerData.length > 1 && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", {
@@ -1641,26 +1688,28 @@ Modal.propTypes = {
   mMaxWidth: PropTypes.string,
   minHeight: PropTypes.string,
   className: PropTypes.string,
+  zoomIcon: PropTypes.element,
   alignItems: PropTypes.string,
   mMaxHeight: PropTypes.string,
   headerText: PropTypes.string,
   imageWidth: PropTypes.string,
   headerSize: PropTypes.string,
   outsideClose: PropTypes.bool,
+  showZoomIcon: PropTypes.bool,
+  imageMargin: PropTypes.string,
   borderStyle: PropTypes.string,
   borderWidth: PropTypes.string,
   headerColor: PropTypes.string,
   imageHeight: PropTypes.string,
   headerWeight: PropTypes.string,
   headerHeight: PropTypes.string,
+  imageMaxWidth: PropTypes.string,
   justifyContent: PropTypes.string,
+  imageWrapWidth: PropTypes.string,
   backgroundColor: PropTypes.string,
   grayDecorHeight: PropTypes.string,
-  layerBackgroundColor: PropTypes.string,
-  imageMargin: PropTypes.string,
-  imageMaxWidth: PropTypes.string,
-  imageWrapWidth: PropTypes.string,
-  imageWrapHeight: PropTypes.string
+  imageWrapHeight: PropTypes.string,
+  layerBackgroundColor: PropTypes.string
 };
 Modal.defaultProps = {
   type: 'content'
@@ -1874,10 +1923,11 @@ const Input = ({
         }
       }
     }
-    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
-      setInnerValue(currentValue.substr(0, maxLength));
+    const max = configStyles.INPUT.maxLength || maxLength;
+    if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
+      setInnerValue(currentValue.substr(0, max));
       if (change) {
-        change(currentValue.substr(0, maxLength));
+        change(currentValue.substr(0, max));
       }
     }
     if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
@@ -2018,12 +2068,19 @@ const Input = ({
         if (maxLength && value.length > maxLength && type !== 'tel') {
           setInnerValue(value.substr(0, maxLength));
         }
+        const max = configStyles.INPUT.maxLength || maxLength;
+        if (max && value.length > max && type !== 'tel' && type !== 'number') {
+          setInnerValue(value.substr(0, max));
+          if (change) {
+            change(value.substr(0, max));
+          }
+        }
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
           !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
         }
       }
     }
-  }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
+  }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage, configStyles.INPUT.maxLength]);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${styles$a['input-wrap']}`
   }, label ? /*#__PURE__*/React__default.createElement("label", {

package/dist/index.js

@@ -431,7 +431,7 @@ const TH = ({
       borderTopRightRadius: borderTopRightRadius
     },
     onClick: handleHeaderItemClick,
-    className: `${item.sortingArrows && styles$c['sorting-arrows']}`
+    className: `${hasOwnerProperty(item, 'sortingArrows') ? item.sortingArrows === true ? styles$c['sorting-arrows'] : '' : ''}`
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
       display: 'flex',
@@ -573,18 +573,18 @@ const TD = ({
     style: {
       display: 'flex',
       alignItems: 'flex-start',
-      justifyContent: hasOwnerProperty(item, 'contentList') || hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
+      justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center'
     }
-  }, hasOwnerProperty(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), hasOwnerProperty(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,
@@ -595,7 +595,8 @@ 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: {
@@ -644,7 +645,8 @@ const TD = ({
         textAlign: 'left',
         overflow: 'hidden',
         whiteSpace: 'nowrap',
-        textOverflow: 'ellipsis'
+        textOverflow: 'ellipsis',
+        marginBottom: '5px'
       },
       title: optionItem.content
     }, optionItem.content));
@@ -666,7 +668,16 @@ const TD = ({
       },
       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 = ({
@@ -906,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,
@@ -1019,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) => {
@@ -1046,6 +1060,9 @@ const Table = ({
           }
         }
       }
+      if (hasOwnerProperty(clickableItem, 'theSame') && hasOwnerProperty(item, 'theSame') && clickableItem.theSame === item.theSame) {
+        item.status = clickableItem.status;
+      }
       return item;
     });
     setBody(prev => {
@@ -1102,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 (hasOwnerProperty(item, 'checkBox')) {
-            item.checkBox.disabled = true;
-          }
-        }
-        return item;
-      });
-    }
-    return headerWithDisabled;
-  };
   const handleContentListClick = (e, data) => {
     e.stopPropagation();
     const {
@@ -1217,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", {
@@ -1359,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,
@@ -1404,6 +1425,7 @@ const Modal = ({
   height,
   padding,
   setShow,
+  zoomIcon,
   selected,
   children,
   minWidth,
@@ -1420,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([]);
@@ -1462,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) {
@@ -1612,7 +1640,9 @@ const Modal = ({
       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',
@@ -1623,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", {
@@ -1671,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'
@@ -1904,10 +1953,11 @@ const Input = ({
         }
       }
     }
-    if (maxLength && currentValue.length > maxLength && type !== 'tel') {
-      setInnerValue(currentValue.substr(0, maxLength));
+    const max = configStyles.INPUT.maxLength || maxLength;
+    if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
+      setInnerValue(currentValue.substr(0, max));
       if (change) {
-        change(currentValue.substr(0, maxLength));
+        change(currentValue.substr(0, max));
       }
     }
     if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
@@ -2048,12 +2098,19 @@ const Input = ({
         if (maxLength && value.length > maxLength && type !== 'tel') {
           setInnerValue(value.substr(0, maxLength));
         }
+        const max = configStyles.INPUT.maxLength || maxLength;
+        if (max && value.length > max && type !== 'tel' && type !== 'number') {
+          setInnerValue(value.substr(0, max));
+          if (change) {
+            change(value.substr(0, max));
+          }
+        }
         if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
           !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('');
         }
       }
     }
-  }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage]);
+  }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage, configStyles.INPUT.maxLength]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${styles$a['input-wrap']}`
   }, label ? /*#__PURE__*/React__default["default"].createElement("label", {

package/package.json

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

package/src/components/icon/Zoom.js

@@ -0,0 +1,21 @@
+import * as React from 'react'
+const SvgZoom = ({ title, titleId, ...props }) => (
+    <svg
+        width="32"
+        height="32"
+        viewBox="0 0 32 32"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        aria-labelledby={titleId}
+        {...props}
+    >
+        {title ? <title id={titleId}>{title}</title> : null}
+        <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"
+        />
+    </svg>
+)
+export default SvgZoom

package/src/components/input/index.js

@@ -235,10 +235,12 @@ export const Input = ({
             }
         }
 
-        if (maxLength && currentValue.length > maxLength && type !== 'tel') {
-            setInnerValue(currentValue.substr(0, maxLength))
+        const max = configStyles.INPUT.maxLength || maxLength
+
+        if (max && currentValue.length > max && type !== 'tel' && type !== 'number') {
+            setInnerValue(currentValue.substr(0, max))
             if (change) {
-                change(currentValue.substr(0, maxLength))
+                change(currentValue.substr(0, max))
             }
         }
 
@@ -392,12 +394,30 @@ export const Input = ({
                     setInnerValue(value.substr(0, maxLength))
                 }
 
+                const max = configStyles.INPUT.maxLength || maxLength
+
+                if (max && value.length > max && type !== 'tel' && type !== 'number') {
+                    setInnerValue(value.substr(0, max))
+                    if (change) {
+                        change(value.substr(0, max))
+                    }
+                }
+
                 if (regexp && regexpErrorMessage && !maxLength && type !== 'tel') {
                     !regexp.test(value) ? setInnerErrorMessage(regexpErrorMessage) : setInnerErrorMessage('')
                 }
             }
         }
-    }, [type, value, regexp, maxLength, errorMessage, regexpErrorMessage, telErrorMessage])
+    }, [
+        type,
+        value,
+        regexp,
+        maxLength,
+        errorMessage,
+        regexpErrorMessage,
+        telErrorMessage,
+        configStyles.INPUT.maxLength,
+    ])
 
     return (
         <div className={`${styles['input-wrap']}`}>

package/src/components/modal/index.js

@@ -7,6 +7,7 @@ import styles from './modal.module.css'
 
 import SvgNext from './../icon/Next'
 import SvgPrev from './../icon/Prev'
+import SvgZoom from './../icon/Zoom'
 import SvgCloseIcon from './../icon/CloseIcon'
 import SvgCloseSlide from './../icon/CloseSlide'
 
@@ -18,6 +19,7 @@ export const Modal = ({
     height,
     padding,
     setShow,
+    zoomIcon,
     selected,
     children,
     minWidth,
@@ -34,17 +36,18 @@ export const Modal = ({
     borderStyle,
     borderWidth,
     borderColor,
+    imageMargin,
+    showZoomIcon,
     outsideClose,
     headerWeight,
     headerHeight,
+    imageMaxWidth,
     justifyContent,
+    imageWrapWidth,
     backgroundColor,
+    imageWrapHeight,
     grayDecorHeight,
     layerBackgroundColor,
-    imageMargin,
-    imageMaxWidth,
-    imageWrapWidth,
-    imageWrapHeight,
 }) => {
     const [select, setSelect] = useState(0)
     const [innerData, setInnerData] = useState([])
@@ -82,6 +85,12 @@ export const Modal = ({
         }
     }
 
+    const handleOpenInNewTab = (url) => {
+        const imageLink = document.createElement('a')
+        ;(imageLink.href = url), (imageLink.target = '_blank')
+        imageLink.click()
+    }
+
     useEffect(() => {
         if (type === 'images') {
             if (data) {
@@ -270,30 +279,56 @@ export const Modal = ({
                                                     alert('Please add url property in data prop on each element')
                                                 } else {
                                                     return (
-                                                        <img
-                                                            style={{
-                                                                display: 'block',
-                                                                objectFit: 'cover',
-                                                                objectPosition: 'center',
-                                                                margin: imageMargin
-                                                                    ? imageMargin
-                                                                    : configStyles.MODAL.imageMargin,
-                                                                borderRadius: radius
-                                                                    ? radius
-                                                                    : configStyles.MODAL.radius,
-                                                                width: imageWidth
-                                                                    ? imageWidth
-                                                                    : configStyles.MODAL.imageWidth,
-                                                                height: imageHeight
-                                                                    ? imageHeight
-                                                                    : configStyles.MODAL.imageHeight,
-                                                                maxWidth: imageMaxWidth
-                                                                    ? imageMaxWidth
-                                                                    : configStyles.MODAL.imageMaxWidth,
-                                                            }}
-                                                            src={item.url}
-                                                            key={item.id ? item.id : index}
-                                                        />
+                                                        <span key={`${item.url}_${item.id ? item.id : '007'}_${index}`}>
+                                                            <img
+                                                                style={{
+                                                                    display: 'block',
+                                                                    objectFit: 'cover',
+                                                                    objectPosition: 'center',
+                                                                    margin: imageMargin
+                                                                        ? imageMargin
+                                                                        : configStyles.MODAL.imageMargin,
+                                                                    borderRadius: radius
+                                                                        ? radius
+                                                                        : configStyles.MODAL.radius,
+                                                                    width: imageWidth
+                                                                        ? imageWidth
+                                                                        : configStyles.MODAL.imageWidth,
+                                                                    height: imageHeight
+                                                                        ? imageHeight
+                                                                        : configStyles.MODAL.imageHeight,
+                                                                    maxWidth: imageMaxWidth
+                                                                        ? imageMaxWidth
+                                                                        : configStyles.MODAL.imageMaxWidth,
+                                                                }}
+                                                                src={item.url}
+                                                            />
+                                                            {showZoomIcon ? (
+                                                                <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 : <SvgZoom />}
+                                                                </div>
+                                                            ) : (
+                                                                ''
+                                                            )}
+                                                        </span>
                                                     )
                                                 }
                                             }
@@ -360,26 +395,28 @@ Modal.propTypes = {
     mMaxWidth: PropTypes.string,
     minHeight: PropTypes.string,
     className: PropTypes.string,
+    zoomIcon: PropTypes.element,
     alignItems: PropTypes.string,
     mMaxHeight: PropTypes.string,
     headerText: PropTypes.string,
     imageWidth: PropTypes.string,
     headerSize: PropTypes.string,
     outsideClose: PropTypes.bool,
+    showZoomIcon: PropTypes.bool,
+    imageMargin: PropTypes.string,
     borderStyle: PropTypes.string,
     borderWidth: PropTypes.string,
     headerColor: PropTypes.string,
     imageHeight: PropTypes.string,
     headerWeight: PropTypes.string,
     headerHeight: PropTypes.string,
+    imageMaxWidth: PropTypes.string,
     justifyContent: PropTypes.string,
+    imageWrapWidth: PropTypes.string,
     backgroundColor: PropTypes.string,
     grayDecorHeight: PropTypes.string,
-    layerBackgroundColor: PropTypes.string,
-    imageMargin: PropTypes.string,
-    imageMaxWidth: PropTypes.string,
-    imageWrapWidth: PropTypes.string,
     imageWrapHeight: PropTypes.string,
+    layerBackgroundColor: PropTypes.string,
 }
 
 Modal.defaultProps = {

package/src/components/modal/modal.stories.js

@@ -64,7 +64,7 @@ const Template = ({ className }) => {
                 Change type to {type === 'content' ? 'images' : 'content'}
             </button>
             {show && (
-                <Modal type={type} selected={0} data={data} setShow={setShow} className={className}>
+                <Modal type={type} selected={0} showZoomIcon data={data} setShow={setShow} className={className}>
                     <div
                         style={{
                             width: '400px',

package/src/components/table/index.js

@@ -212,8 +212,10 @@ export 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,
@@ -333,7 +335,8 @@ export const Table = ({
         })
     }
 
-    const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex) => {
+    const handleOpenCloseRowSingleArrow = (arrowRowIndex, arrowIndex, clickableItem) => {
+        console.log(clickableItem, 'clickableItem')
         let single = {}
         const allArrows = []
         const checkedOpenableRow = body[arrowRowIndex].map((item, index) => {
@@ -343,6 +346,7 @@ export const Table = ({
                 } else {
                     item.status = 'close'
                 }
+
                 single = item
             }
 
@@ -363,6 +367,15 @@ export const Table = ({
                     }
                 }
             }
+
+            if (
+                hasOwnerProperty(clickableItem, 'theSame') &&
+                hasOwnerProperty(item, 'theSame') &&
+                clickableItem.theSame === item.theSame
+            ) {
+                item.status = clickableItem.status
+            }
+
             return item
         })
 
@@ -424,21 +437,6 @@ export const Table = ({
         setBody(() => checkBodyMore)
     }
 
-    const handleCheckDisable = (arr, disableArr) => {
-        let headerWithDisabled = []
-        if (disableArr && disableArr.length > 0) {
-            headerWithDisabled = arr.map((item, index) => {
-                if (disableArr[index]) {
-                    if (hasOwnerProperty(item, 'checkBox')) {
-                        item.checkBox.disabled = true
-                    }
-                }
-                return item
-            })
-        }
-        return headerWithDisabled
-    }
-
     const handleContentListClick = (e, data) => {
         e.stopPropagation()
 
@@ -548,17 +546,11 @@ export const Table = ({
     useEffect(() => {
         if (arrowShow) {
             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])
 

package/src/components/table/table.stories.js

@@ -29,7 +29,7 @@ const headerData = [
             checkedColor: 'orange',
             unCheckedColor: 'orange',
         },
-        sortingArrows: true,
+        sortingArrows: false,
     },
     {
         type: 'show',
@@ -76,6 +76,11 @@ const headerData = [
         content: 'Գործողություն',
         sortingArrows: true,
     },
+    {
+        type: 'show',
+        content: 'Գործողություն 2',
+        sortingArrows: true,
+    },
     {
         type: 'show',
         content: <ReactSVG />,
@@ -118,6 +123,9 @@ const bodyData = [
         },
         info: {
             status: 'close',
+            hideArrow: true, // prop for hide open close arrows
+            rightArrow: true, // prop for set arrow side, if true arrow go to right side, if false or if haven't this prop arrow go left ( by defult )
+            theSame: 'to open another list', // prop for open close another list item, IMPORTANT theSame prop in another list should be equal
             openArrow: <ReactSVGArrowUp />,
             closeArrow: <ReactSVGArrowDown />,
             content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -131,6 +139,17 @@ const bodyData = [
         create: {
             content: '27.05.2022',
         },
+        info2: {
+            status: 'close',
+            theSame: 'to open another list', // prop for open close another list item, IMPORTANT theSame prop in another list should be equal
+            content: ' - - ',
+            contentList: [
+                { id: 0, content: <ReactSVGPlus /> },
+                { id: 1, content: <ReactSVGPlus /> },
+                { id: 2, content: <ReactSVGPlus /> },
+                { id: 3, content: <ReactSVGPlus /> },
+            ],
+        },
         actions: [
             {
                 id: 19854,
@@ -198,6 +217,7 @@ const bodyData = [
         },
         info: {
             status: 'close',
+            theSame: 'to open just list',
             openArrow: <ReactSVGArrowUp />,
             closeArrow: <ReactSVGArrowDown />,
             content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -211,6 +231,17 @@ const bodyData = [
         create: {
             content: '27.05.2022',
         },
+        info2: {
+            status: 'close',
+            theSame: 'to open just list',
+            content: ' - - ',
+            contentList: [
+                { id: 0, content: <ReactSVGPlus /> },
+                { id: 1, content: <ReactSVGPlus /> },
+                { id: 2, content: <ReactSVGPlus /> },
+                { id: 3, content: <ReactSVGPlus /> },
+            ],
+        },
         actions: [
             {
                 id: 19954,
@@ -278,6 +309,7 @@ const bodyData = [
         },
         info: {
             status: 'close',
+            theSame: 'to open second list',
             openArrow: <ReactSVGArrowUp />,
             closeArrow: <ReactSVGArrowDown />,
             content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -291,6 +323,17 @@ const bodyData = [
         create: {
             content: '27.05.2022',
         },
+        info2: {
+            status: 'close',
+            theSame: 'to open second list',
+            content: ' - - ',
+            contentList: [
+                { id: 0, content: <ReactSVGPlus /> },
+                { id: 1, content: <ReactSVGPlus /> },
+                { id: 2, content: <ReactSVGPlus /> },
+                { id: 3, content: <ReactSVGPlus /> },
+            ],
+        },
         actions: [
             {
                 id: 20037,
@@ -359,6 +402,7 @@ const bodyData = [
         },
         info: {
             status: 'close',
+            theSame: 'to open third list',
             openArrow: <ReactSVGArrowUp />,
             closeArrow: <ReactSVGArrowDown />,
             content: 'Այլ արտաքին գովազդի տեղադրելու վճար / ԱՁ',
@@ -381,6 +425,17 @@ const bodyData = [
                 },
             ],
         ],
+        info2: {
+            status: 'close',
+            theSame: 'to open third list',
+            content: ' - - ',
+            contentList: [
+                { id: 0, content: <ReactSVGPlus /> },
+                { id: 1, content: <ReactSVGPlus /> },
+                { id: 2, content: <ReactSVGPlus /> },
+                { id: 3, content: <ReactSVGPlus /> },
+            ],
+        },
         actions: [
             [
                 {
@@ -435,7 +490,16 @@ const Template = (args) => {
         console.log(tData, ' data from table click action, with getData props')
     }
 
-    return <Table {...args} dataBody={bodyData} dataHeader={headerData} getData={handleGetData} />
+    return (
+        <Table
+            {...args}
+            arrowColumn={2}
+            arrowShow
+            dataBody={bodyData}
+            dataHeader={headerData}
+            getData={handleGetData}
+        />
+    )
 }
 
 export const Default = Template.bind({})

package/src/components/table/td.js

@@ -149,26 +149,30 @@ const TD = ({
                     style={{
                         display: 'flex',
                         alignItems: 'flex-start',
-                        justifyContent:
-                            hasOwnerProperty(item, 'contentList') || hasOwnerProperty(item, 'checkBox')
-                                ? 'space-between'
-                                : 'center',
+                        justifyContent: hasOwnerProperty(item, 'checkBox') ? 'space-between' : 'center',
                     }}
                 >
-                    {hasOwnerProperty(item, 'contentList') && (
-                        <div
-                            id={item.id}
-                            style={{
-                                width: '21px',
-                                height: '21px',
-                                cursor: 'pointer',
-                            }}
-                            onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex)}
-                            className={styles['td-span']}
-                        >
-                            {item.status === 'close' ? item.closeArrow : item.openArrow}
-                        </div>
-                    )}
+                    {!hasOwnerProperty(item, 'hideArrow') &&
+                    item.hideArrow !== false &&
+                    (!hasOwnerProperty(item, 'rightArrow') || item.rightArrow !== true)
+                        ? hasOwnerProperty(item, 'contentList') &&
+                          (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && (
+                              <div
+                                  id={item.id}
+                                  style={{
+                                      width: '21px',
+                                      height: '21px',
+                                      cursor: 'pointer',
+                                  }}
+                                  onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex, item)}
+                                  className={styles['td-span']}
+                              >
+                                  {hasOwnerProperty(item, 'status') && item.status === 'close'
+                                      ? item.closeArrow
+                                      : item.openArrow}
+                              </div>
+                          )
+                        : ''}
 
                     {hasOwnerProperty(item, 'checkBox') && (
                         <SingleCheckbox
@@ -185,7 +189,26 @@ const TD = ({
 
                     <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',
                         }}
                     >
                         <p
@@ -273,6 +296,7 @@ const TD = ({
                                                                 overflow: 'hidden',
                                                                 whiteSpace: 'nowrap',
                                                                 textOverflow: 'ellipsis',
+                                                                marginBottom: '5px',
                                                             }}
                                                             title={optionItem.content}
                                                         >
@@ -327,6 +351,29 @@ const TD = ({
                             </div>
                         )}
                     </div>
+
+                    {!hasOwnerProperty(item, 'hideArrow') &&
+                    item.hideArrow !== false &&
+                    hasOwnerProperty(item, 'rightArrow') &&
+                    item.rightArrow === true
+                        ? hasOwnerProperty(item, 'contentList') &&
+                          (hasOwnerProperty(item, 'closeArrow') || hasOwnerProperty(item, 'openArrow')) && (
+                              <div
+                                  id={item.id}
+                                  style={{
+                                      width: '21px',
+                                      height: '21px',
+                                      cursor: 'pointer',
+                                  }}
+                                  onClick={() => handleOpenCloseRowSingleArrow(index, innerIndex, item)}
+                                  className={styles['td-span']}
+                              >
+                                  {hasOwnerProperty(item, 'status') && item.status === 'close'
+                                      ? item.closeArrow
+                                      : item.openArrow}
+                              </div>
+                          )
+                        : ''}
                 </div>
             ) : (
                 ''

package/src/components/table/th.js

@@ -40,7 +40,13 @@ const TH = ({
                 borderTopRightRadius: borderTopRightRadius,
             }}
             onClick={handleHeaderItemClick}
-            className={`${item.sortingArrows && styles['sorting-arrows']}`}
+            className={`${
+                hasOwnerProperty(item, 'sortingArrows')
+                    ? item.sortingArrows === true
+                        ? styles['sorting-arrows']
+                        : ''
+                    : ''
+            }`}
         >
             <div
                 style={{

package/src/stories/usage.stories.mdx

@@ -22,6 +22,7 @@ import fileSingleImage from './static/file-single-usage.png';
 import tableComponent from './static/table-component-usage.png';
 import toasterImage from './static/toaster-container-usage.png';
 import autocompleteImage from './static/autocomplete-usage.png';
+import tableBodyStructureNew from './static/table-new-data-structure-usage.png';
 import tableHeaderStructure from './static/table-header-data-structure-usage.png';
 import tableBodyStructureFirst from './static/table-body-data-structure-first-part-usage.png';
 import tableBodyStructureThird from './static/table-body-data-structure-third-part-usage.png';
@@ -185,4 +186,5 @@ import tableBodyStructureSecond from './static/table-body-data-structure-second-
 <img src={tableHeaderStructure} alt="file image" />
 <img src={tableBodyStructureFirst} alt="file image" />
 <img src={tableBodyStructureSecond} alt="file image" />
+<img src={tableBodyStructureNew} alt="file image" />
 <img src={tableBodyStructureThird} alt="file image" />

package/tui.config.js

@@ -32,6 +32,7 @@ module.exports = {
         width: '100%', // for width
         radius: '0px', // for input and also (if there exist left or right icons) icons block border-radius
         className: '', // for input classname (you can set custom class for your custom css)
+        maxLength: 255, // for characters maximum count
         height: '46px', // for height
         required: false, // for showing required mark on label (it meens input is required)
         disabled: false, // for disabled