@majoo-ui/react 1.55.37 → 1.55.38

package/index.esm.js

@@ -2264,7 +2264,7 @@ Flex$1.defaultProps = {
 };
 Flex$1.displayName = 'Flex';
 
-const _excluded$B = ["children"],
+const _excluded$C = ["children"],
   _excluded2$4 = ["children"];
 var _jsxFileName$12 = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/layout/grid/Grid.js";
 const GridComponent = styled('div', {
@@ -2440,7 +2440,7 @@ const Grid = _ref => {
   let {
       children
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
   return /*#__PURE__*/React__default.createElement(GridComponent, _extends({}, props, {
     css: Object.assign({}, props.css, {
       gridAutoColumns: props.autoColumns,
@@ -2520,7 +2520,7 @@ GridItem.propTypes = {
 };
 GridItem.displayName = 'Grid Item';
 
-const _excluded$A = ["children", "isCollapse", "css", "contentHeader"];
+const _excluded$B = ["children", "isCollapse", "css", "contentHeader"];
 var _jsxFileName$11 = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/layout/pageContainer/PageContainer.js";
 const StyledDiv$2 = styled(Flex$1, {
   justifyContent: 'center',
@@ -2549,7 +2549,7 @@ const PageContainer = _ref => {
       css,
       contentHeader
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
   return /*#__PURE__*/React__default.createElement(StyledDiv$2, _extends({
     id: "retina-container",
     css: Object.assign({
@@ -2878,7 +2878,7 @@ const Link = /*#__PURE__*/React.forwardRef((_a, forwardedRef) => {
   }), void 0);
 });
 
-const _excluded$z = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
+const _excluded$A = ["id", "title", "description", "position", "dismissAfter", "variant", "onClick", "onRemove", "isExternalOfAction", "onClickOfAction", "captionOfAction", "hrefOfAction"];
 var _jsxFileName$10 = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/toast/Toast.js";
 const TOAST_WIDTH = 576;
 const ANIMATION_DURATION = 400;
@@ -3046,7 +3046,7 @@ const Toast = _ref => {
       captionOfAction,
       hrefOfAction
     } = _ref,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+    rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
   const [isOpen, setIsOpen] = React.useState(false);
   const close = React.useCallback(() => {
     setIsOpen(false);
@@ -3226,6 +3226,7 @@ Toast.defaultProps = {
 
 const ToastContext = /*#__PURE__*/React.createContext({});
 
+const _excluded$z = ["preventDuplicate"];
 var _jsxFileName$$ = "/Users/apple/Documents/project/majoo/majoo-ui/packages/react/src/components/toast/ToastContainer.js";
 const ToastBox = styled(Flex$1, {
   position: 'fixed',
@@ -3285,15 +3286,19 @@ const ToastContainer = ({
       lineNumber: 44,
       columnNumber: 7
     }
-  }, toasts.map(toast => {
+  }, toasts.map((item, index) => {
+    const {
+        preventDuplicate
+      } = item,
+      toast = _objectWithoutPropertiesLoose(item, _excluded$z);
     return /*#__PURE__*/React.createElement(Toast, _extends({
-      key: toast.id,
+      key: preventDuplicate ? toast.id : `${toast.id}-${index}`,
       onRemove: () => removeToast(toast.id)
     }, toast, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$$,
-        lineNumber: 46,
+        lineNumber: 47,
         columnNumber: 18
       }
     }));
@@ -3323,9 +3328,12 @@ const ToastProvider = ({
   };
   const addToast = React.useCallback(toast => {
     const toastInstance = createToastInstance(toast);
-    if (!toasts.some(currToast => toast.id === currToast.id) || !toast.preventDuplicate) {
-      setToasts(toastItems => [...toastItems, toastInstance]);
-    }
+    setToasts(toastItems => {
+      if (!toastItems.some(currToast => toast.id === currToast.id) || !toast.preventDuplicate) {
+        return [...toastItems, toastInstance];
+      }
+      return toastItems;
+    });
     return toastInstance;
   }, [toasts, setToasts]);
   const removeToast = React.useCallback(id => {
@@ -3339,7 +3347,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 43,
+      lineNumber: 47,
       columnNumber: 5
     }
   }, children, /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3348,7 +3356,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 45,
+      lineNumber: 49,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3357,7 +3365,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 49,
+      lineNumber: 53,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3366,7 +3374,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 53,
+      lineNumber: 57,
       columnNumber: 7
     }
   }), /*#__PURE__*/React.createElement(ToastContainer, {
@@ -3375,7 +3383,7 @@ const ToastProvider = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$_,
-      lineNumber: 57,
+      lineNumber: 61,
       columnNumber: 7
     }
   }));
@@ -9923,7 +9931,7 @@ const TagWrapper$1 = styled(Box, {
 const OptionWrapper$1 = styled('div', {
   display: 'none',
   overflow: 'hidden',
-  zIndex: 1,
+  zIndex: 12,
   borderRadius: '$sm',
   backgroundColor: '$bgWhite',
   boxShadow: '0px 2px 12px #00000014',
@@ -10526,78 +10534,82 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 671,
       columnNumber: 13
     }
-  }), isOpen && items.map((item, index) => /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
-    key: item.id
-  }, getItemProps({
-    item,
-    index: index,
-    disabled: item.isDisabled
-  }), {
-    css: {
-      backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
-      cursor: item.isDisabled ? 'not-allowed' : 'pointer',
-      color: item.isDisabled ? '$textDisable' : 'textPrimary'
-    },
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 674,
-      columnNumber: 19
-    }
-  }), /*#__PURE__*/React__default.createElement(IconWrapper, {
-    css: {
-      width: '16px',
-      height: '16px',
-      border: '1px solid $bgBorder',
-      cursor: item.isDisabled ? 'not-allowed' : 'pointer'
-    },
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 687,
-      columnNumber: 21
-    }
-  }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
-    color: colors$5.iconDisable,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 696,
-      columnNumber: 25
-    }
-  }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
-    color: colors$5.iconGreen,
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 700,
-      columnNumber: 27
-    }
-  }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 707,
-      columnNumber: 25
-    }
-  }, "-") : /*#__PURE__*/React__default.createElement("div", {
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 709,
-      columnNumber: 25
-    }
-  })), /*#__PURE__*/React__default.createElement(Item$3, {
-    css: {
-      backgroundColor: 'unset'
-    },
-    __self: undefined,
-    __source: {
-      fileName: _jsxFileName$w,
-      lineNumber: 712,
-      columnNumber: 21
-    }
-  }, item.name)))) : /*#__PURE__*/React__default.createElement(Option, _extends({
+  }), isOpen && items.map((item, index) => {
+    var _item$render;
+    return /*#__PURE__*/React__default.createElement(ItemWrapper$1, _extends({
+      key: item.id
+    }, getItemProps({
+      item,
+      index: index,
+      disabled: item.isDisabled
+    }), {
+      css: {
+        backgroundColor: highlightedIndex === index ? '$bgGray' : 'white',
+        cursor: item.isDisabled ? 'not-allowed' : 'pointer',
+        color: item.isDisabled ? '$textDisable' : 'textPrimary'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 674,
+        columnNumber: 19
+      }
+    }), /*#__PURE__*/React__default.createElement(IconWrapper, {
+      css: {
+        width: '16px',
+        height: '16px',
+        border: '1px solid $bgBorder',
+        cursor: item.isDisabled ? 'not-allowed' : 'pointer'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 687,
+        columnNumber: 21
+      }
+    }, item.isDisabled ? /*#__PURE__*/React__default.createElement(CheckOutline, {
+      color: colors$5.iconDisable,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 696,
+        columnNumber: 25
+      }
+    }) : selectedValue.includes(item.id) && (item.isDisabled === false || item.isDisabled === undefined) && /*#__PURE__*/React__default.createElement(CheckOutline, {
+      color: colors$5.iconGreen,
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 700,
+        columnNumber: 27
+      }
+    }), showSelectAll && (item === null || item === void 0 ? void 0 : item.id) === '!all' && selectedValue !== null && selectedValue !== void 0 && selectedValue.length && (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue.length) < (items === null || items === void 0 ? void 0 : items.length) ? /*#__PURE__*/React__default.createElement(IndeterminateFilled, {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 707,
+        columnNumber: 25
+      }
+    }, "-") : /*#__PURE__*/React__default.createElement("div", {
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 709,
+        columnNumber: 25
+      }
+    })), /*#__PURE__*/React__default.createElement(Item$3, {
+      css: {
+        backgroundColor: 'unset',
+        width: '100%'
+      },
+      __self: undefined,
+      __source: {
+        fileName: _jsxFileName$w,
+        lineNumber: 712,
+        columnNumber: 21
+      }
+    }, item.render ? (_item$render = item.render) === null || _item$render === void 0 ? void 0 : _item$render.call(item, item.name) : item.name));
+  })) : /*#__PURE__*/React__default.createElement(Option, _extends({
     css: {
       height: 'auto'
     }
@@ -10607,14 +10619,14 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 717,
+      lineNumber: 719,
       columnNumber: 13
     }
   }), /*#__PURE__*/React__default.createElement(StyledDiv, {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 718,
+      lineNumber: 720,
       columnNumber: 15
     }
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -10624,7 +10636,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 719,
+      lineNumber: 721,
       columnNumber: 17
     }
   }, /*#__PURE__*/React__default.createElement(CircleInfoOutline, {
@@ -10636,7 +10648,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
     __self: undefined,
     __source: {
       fileName: _jsxFileName$w,
-      lineNumber: 720,
+      lineNumber: 722,
       columnNumber: 19
     }
   })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -18724,7 +18736,14 @@ const TableContainer$3 = styled('div', {
   maxWidth: '100%',
   position: 'relative',
   height: '100%',
-  overflow: 'auto'
+  overflow: 'auto',
+  variants: {
+    decoration: {
+      true: {
+        overflow: 'unset'
+      }
+    }
+  }
 });
 const TableContent$3 = styled('table', {
   width: '100%',
@@ -18750,12 +18769,8 @@ const TableHead$3 = styled('thead', {
     hiddenHeader: {
       true: {
         opacity: 0,
-        '& > tr > th': {
-          height: '0px !important',
-          '& > div': {
-            marginTop: '-50px'
-          }
-        }
+        zIndex: -100,
+        border: 'none'
       }
     }
   }
@@ -19249,6 +19264,104 @@ function Table({
       })
     }), void 0);
   };
+  const renderRowDecorationReference = (row, isContextMenu, i) => {
+    return jsx(TableRow$3, Object.assign({
+      css: {
+        display: 'none'
+      }
+    }, row.getRowProps(), {
+      children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
+        var _a, _b;
+        const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+        const exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
+        return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+          css: Object.assign(Object.assign({
+            padding: !isContextMenu || exceptionId ? collId === 'expander' ? '20px 4px' : '20px 8px' : '',
+            verticalAlign: cell.column.accessor ? cellAlign : 'center',
+            cursor: onRowClick ? 'pointer' : 'unset'
+          }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)),
+          onClick: () => {
+            if (!exceptionId) {
+              handleRowClick(row, i);
+            }
+          }
+        }, {
+          children: jsx(ConditionalWrapper, Object.assign({
+            condition: isContextMenu && !exceptionId,
+            wrapper: children => jsx(ContextMenuTrigger, Object.assign({
+              id: "context-menu-table",
+              triggerSide: "left"
+            }, {
+              children: jsx(Box, Object.assign({
+                css: {
+                  cursor: 'pointer',
+                  padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                },
+                onClick: () => handleRowClick(row, i)
+              }, {
+                children: children
+              }), void 0)
+            }), void 0)
+          }, {
+            children: cell.render('Cell')
+          }), void 0)
+        }), void 0);
+      })
+    }), void 0);
+  };
+  const renderTableDecorationChild = child => {
+    return jsxs(TableContent$3, {
+      children: [jsx(TableHead$3, Object.assign({
+        css: {
+          '& > tr > th': {
+            height: '0px !important',
+            '& > div': {
+              marginTop: '-50px'
+            }
+          }
+        },
+        hiddenHeader: true,
+        isInfiniteScroll: isInfiniteScroll
+      }, {
+        children: headerGroups.map(headerGroup => {
+          const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
+          return jsx(TableHeadRow$3, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            children: visibleHeaders.map((column, index) => {
+              const headerRender = column.render('Header');
+              return jsx(TableHeadCell$3, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
+                title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+              }) : {
+                onClick: column.onToggle
+              }, {
+                style: {
+                  width: column.colWidth,
+                  maxWidth: column.colMaxWidth,
+                  minWidth: column.colMinWidth
+                }
+              }]), {
+                css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss)
+              }, {
+                children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, Object.assign({
+                  isSortedDesc: column.isSortedDesc,
+                  unsortable: column.unsortable,
+                  isToggleable: !!column.onToggle,
+                  isToggled: column.isToggled
+                }, {
+                  children: jsx(TableHeadCellContent, Object.assign({
+                    heading: "headerTable"
+                  }, {
+                    children: headerRender.toUpperCase()
+                  }), void 0)
+                }), void 0) : headerRender
+              }), void 0);
+            })
+          }), void 0);
+        })
+      }), void 0), jsx(TableBody$3, Object.assign({}, getTableBodyProps(), {
+        children: child
+      }), void 0)]
+    }, void 0);
+  };
   const handleRowClick = (row, i) => {
     var _a, _b, _c, _d;
     let clickable = false;
@@ -19343,6 +19456,7 @@ function Table({
       children: [jsxs(TableContainer$3, Object.assign({
         css: css,
         ref: scrollerRef,
+        decoration: Boolean(decoration),
         onScroll: e => {
           const scrollPosition = e.currentTarget.scrollLeft;
           if (scrollPosition < 3) {
@@ -19395,110 +19509,142 @@ function Table({
               }), void 0);
             })
           }), void 0), jsxs(TableBody$3, Object.assign({}, getTableBodyProps(), {
-            children: [(_a = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _a === void 0 ? void 0 : _a.call(decoration), page.map((row, i) => {
-              var _a, _b;
+            children: [(_a = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _a === void 0 ? void 0 : _a.call(decoration), decoration && page.map((row, i) => {
+              var _a;
               prepareRow(row);
-              const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
-              const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
-              const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
-              const isContextMenu = (_b = row.cells.filter(cell => {
+              const isContextMenu = (_a = row.cells.filter(cell => {
                 var _a, _b;
                 return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
-              })) === null || _b === void 0 ? void 0 : _b.length;
-              let customStyle = {};
-              if (customRowsStyle && customRowsStyle(row.original).length) {
-                for (let _i2 = 0; _i2 < customRowsStyle(row.original).length; _i2++) {
-                  if (customRowsStyle(row.original)[_i2].predicate) {
-                    customStyle = customRowsStyle(row.original)[_i2].css;
+              })) === null || _a === void 0 ? void 0 : _a.length;
+              return i < 1 && renderRowDecorationReference(row, isContextMenu, i);
+            }), jsx(ConditionalWrapper, Object.assign({
+              condition: Boolean(decoration),
+              wrapper: child => jsx(TableRow$3, Object.assign({
+                css: {
+                  '&:hover': {
+                    backgroundColor: 'unset'
                   }
                 }
-              }
-              return jsxs(React.Fragment, {
-                children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsx(Text$1, Object.assign({
-                  variant: "contentButton"
+              }, {
+                children: jsx(TableCell$3, Object.assign({
+                  colSpan: 12
                 }, {
-                  children: row.cells[0].render('Cell')
-                }), void 0)), jsx(TableRow$3, Object.assign({
-                  css: customStyle
-                }, row.getRowProps(), {
-                  children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
-                    var _a, _b;
-                    const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
-                    const exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
-                    return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                      css: Object.assign(Object.assign({
-                        padding: !isContextMenu || exceptionId ? collId === 'expander' ? '20px 4px' : '20px 8px' : '',
-                        verticalAlign: cell.column.accessor ? cellAlign : 'center',
-                        cursor: onRowClick ? 'pointer' : 'unset'
-                      }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)),
-                      onClick: () => {
-                        if (!exceptionId) {
-                          handleRowClick(row, i);
+                  children: jsx(Box, Object.assign({
+                    css: {
+                      height: 300,
+                      overflow: 'auto'
+                    }
+                  }, {
+                    children: renderInfiniteScrollWrapper(renderTableDecorationChild(child))
+                  }), void 0)
+                }), void 0)
+              }), void 0)
+            }, {
+              children: page.map((row, i) => {
+                var _a, _b;
+                prepareRow(row);
+                const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
+                const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
+                const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
+                const isContextMenu = (_b = row.cells.filter(cell => {
+                  var _a, _b;
+                  return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
+                })) === null || _b === void 0 ? void 0 : _b.length;
+                let customStyle = {};
+                if (customRowsStyle && customRowsStyle(row.original).length) {
+                  for (let _i2 = 0; _i2 < customRowsStyle(row.original).length; _i2++) {
+                    if (customRowsStyle(row.original)[_i2].predicate) {
+                      customStyle = customRowsStyle(row.original)[_i2].css;
+                    }
+                  }
+                }
+                return jsxs(React.Fragment, {
+                  children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row) : jsx(Text$1, Object.assign({
+                    variant: "contentButton"
+                  }, {
+                    children: row.cells[0].render('Cell')
+                  }), void 0)), jsx(TableRow$3, Object.assign({
+                    css: customStyle
+                  }, row.getRowProps(), {
+                    children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
+                      var _a, _b;
+                      const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+                      const exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
+                      return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                        css: Object.assign(Object.assign({
+                          padding: !isContextMenu || exceptionId ? collId === 'expander' ? '20px 4px' : '20px 8px' : '',
+                          verticalAlign: cell.column.accessor ? cellAlign : 'center',
+                          cursor: onRowClick ? 'pointer' : 'unset'
+                        }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)),
+                        onClick: () => {
+                          if (!exceptionId) {
+                            handleRowClick(row, i);
+                          }
                         }
-                      }
-                    }, {
-                      children: jsx(ConditionalWrapper, Object.assign({
-                        condition: isContextMenu && !exceptionId,
-                        wrapper: children => jsx(ContextMenuTrigger, Object.assign({
-                          id: "context-menu-table",
-                          triggerSide: "left"
-                        }, {
-                          children: jsx(Box, Object.assign({
-                            css: {
-                              cursor: 'pointer',
-                              padding: cell.column.accessor ? '20px 8px' : '20px 20px'
-                            },
-                            onClick: () => handleRowClick(row, i)
+                      }, {
+                        children: jsx(ConditionalWrapper, Object.assign({
+                          condition: isContextMenu && !exceptionId,
+                          wrapper: children => jsx(ContextMenuTrigger, Object.assign({
+                            id: "context-menu-table",
+                            triggerSide: "left"
                           }, {
-                            children: children
+                            children: jsx(Box, Object.assign({
+                              css: {
+                                cursor: 'pointer',
+                                padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                              },
+                              onClick: () => handleRowClick(row, i)
+                            }, {
+                              children: children
+                            }), void 0)
                           }), void 0)
+                        }, {
+                          children: cell.render('Cell')
                         }), void 0)
-                      }, {
-                        children: cell.render('Cell')
-                      }), void 0)
-                    }), void 0);
-                  })
-                }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$3, Object.assign({
-                  subRow: true
-                }, {
-                  children: [leftAddOnCells.map((_, index) => jsx("td", {
-                    style: {
-                      backgroundColor: colors$5.bgGray
-                    }
-                  }, index)), jsxs(React.Fragment, {
-                    children: [jsx(TableCell$3, Object.assign({
-                      subCell: true,
-                      colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
-                      headerSubCell: true,
-                      css: Object.assign(Object.assign({
-                        paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
-                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`,
-                        backgroundColor: '$bgGray'
-                      }, stickyPositionStyling(cell.column)), cell.column.headerCss)
-                    }, {
-                      children: jsx(Paragraph, Object.assign({
-                        paragraph: "shortContentBold"
-                      }, {
-                        children: cell.column.Header
-                      }), void 0)
-                    }), void 0), jsx(TableCell$3, Object.assign({
-                      subCell: true,
-                      colSpan: visibleColumns.length - subRowCells.length,
-                      css: {
-                        paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
-                        paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
+                      }), void 0);
+                    })
+                  }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$3, Object.assign({
+                    subRow: true
+                  }, {
+                    children: [leftAddOnCells.map((_, index) => jsx("td", {
+                      style: {
+                        backgroundColor: colors$5.bgGray
                       }
-                    }, {
-                      children: jsx(Paragraph, Object.assign({
-                        paragraph: "shortContentRegular"
+                    }, index)), jsxs(React.Fragment, {
+                      children: [jsx(TableCell$3, Object.assign({
+                        subCell: true,
+                        colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
+                        headerSubCell: true,
+                        css: Object.assign(Object.assign({
+                          paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
+                          paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`,
+                          backgroundColor: '$bgGray'
+                        }, stickyPositionStyling(cell.column)), cell.column.headerCss)
                       }, {
-                        children: cell.render('Cell')
-                      }), void 0)
-                    }), void 0)]
-                  }, cell.column.id)]
-                }), cell.column.id)) : null, ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row))]
-              }, row.id);
-            }), (_b = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _b === void 0 ? void 0 : _b.call(decoration)]
+                        children: jsx(Paragraph, Object.assign({
+                          paragraph: "shortContentBold"
+                        }, {
+                          children: cell.column.Header
+                        }), void 0)
+                      }), void 0), jsx(TableCell$3, Object.assign({
+                        subCell: true,
+                        colSpan: visibleColumns.length - subRowCells.length,
+                        css: {
+                          paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
+                          paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
+                        }
+                      }, {
+                        children: jsx(Paragraph, Object.assign({
+                          paragraph: "shortContentRegular"
+                        }, {
+                          children: cell.render('Cell')
+                        }), void 0)
+                      }), void 0)]
+                    }, cell.column.id)]
+                  }), cell.column.id)) : null, ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row))]
+                }, row.id);
+              })
+            }), void 0), (_b = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _b === void 0 ? void 0 : _b.call(decoration)]
           }), void 0)]
         }), void 0)), renderContextMenu()]
       }), void 0), !isInfiniteScroll && jsx(Box, Object.assign({