@majoo-ui/react 1.55.37 → 1.55.38

package/index.umd.js

@@ -2374,7 +2374,7 @@
   };
   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', {
@@ -2550,7 +2550,7 @@
     let {
         children
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$C);
     return /*#__PURE__*/React__default["default"].createElement(GridComponent, _extends({}, props, {
       css: Object.assign({}, props.css, {
         gridAutoColumns: props.autoColumns,
@@ -2630,7 +2630,7 @@
   };
   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',
@@ -2659,7 +2659,7 @@
         css,
         contentHeader
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$A);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$B);
     return /*#__PURE__*/React__default["default"].createElement(StyledDiv$2, _extends({
       id: "retina-container",
       css: Object.assign({
@@ -2953,7 +2953,7 @@
     }), 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;
@@ -3121,7 +3121,7 @@
         captionOfAction,
         hrefOfAction
       } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded$z);
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$A);
     const [isOpen, setIsOpen] = React__namespace.useState(false);
     const close = React__namespace.useCallback(() => {
       setIsOpen(false);
@@ -3301,6 +3301,7 @@
 
   const ToastContext = /*#__PURE__*/React__namespace.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',
@@ -3360,15 +3361,19 @@
         lineNumber: 44,
         columnNumber: 7
       }
-    }, toasts.map(toast => {
+    }, toasts.map((item, index) => {
+      const {
+          preventDuplicate
+        } = item,
+        toast = _objectWithoutPropertiesLoose(item, _excluded$z);
       return /*#__PURE__*/React__namespace.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
         }
       }));
@@ -3398,9 +3403,12 @@
     };
     const addToast = React__namespace.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__namespace.useCallback(id => {
@@ -3414,7 +3422,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 43,
+        lineNumber: 47,
         columnNumber: 5
       }
     }, children, /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -3423,7 +3431,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 45,
+        lineNumber: 49,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -3432,7 +3440,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 49,
+        lineNumber: 53,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -3441,7 +3449,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 53,
+        lineNumber: 57,
         columnNumber: 7
       }
     }), /*#__PURE__*/React__namespace.createElement(ToastContainer, {
@@ -3450,7 +3458,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$_,
-        lineNumber: 57,
+        lineNumber: 61,
         columnNumber: 7
       }
     }));
@@ -10041,7 +10049,7 @@
   const OptionWrapper$1 = styled('div', {
     display: 'none',
     overflow: 'hidden',
-    zIndex: 1,
+    zIndex: 12,
     borderRadius: '$sm',
     backgroundColor: '$bgWhite',
     boxShadow: '0px 2px 12px #00000014',
@@ -10644,78 +10652,82 @@
         lineNumber: 671,
         columnNumber: 13
       }
-    }), isOpen && items.map((item, index) => /*#__PURE__*/React__default["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["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["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["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["default"].createElement(IndeterminateFilled, {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 707,
-        columnNumber: 25
-      }
-    }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 709,
-        columnNumber: 25
-      }
-    })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
-      css: {
-        backgroundColor: 'unset'
-      },
-      __self: undefined,
-      __source: {
-        fileName: _jsxFileName$w,
-        lineNumber: 712,
-        columnNumber: 21
-      }
-    }, item.name)))) : /*#__PURE__*/React__default["default"].createElement(Option, _extends({
+    }), isOpen && items.map((item, index) => {
+      var _item$render;
+      return /*#__PURE__*/React__default["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["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["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["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["default"].createElement(IndeterminateFilled, {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 707,
+          columnNumber: 25
+        }
+      }, "-") : /*#__PURE__*/React__default["default"].createElement("div", {
+        __self: undefined,
+        __source: {
+          fileName: _jsxFileName$w,
+          lineNumber: 709,
+          columnNumber: 25
+        }
+      })), /*#__PURE__*/React__default["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["default"].createElement(Option, _extends({
       css: {
         height: 'auto'
       }
@@ -10725,14 +10737,14 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 717,
+        lineNumber: 719,
         columnNumber: 13
       }
     }), /*#__PURE__*/React__default["default"].createElement(StyledDiv, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 718,
+        lineNumber: 720,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -10742,7 +10754,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 719,
+        lineNumber: 721,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default["default"].createElement(icons.CircleInfoOutline, {
@@ -10754,7 +10766,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$w,
-        lineNumber: 720,
+        lineNumber: 722,
         columnNumber: 19
       }
     })), textEmptyItem != null ? textEmptyItem : t('emptyItemText', 'Item tidak ditemukan')))));
@@ -18990,7 +19002,14 @@
     maxWidth: '100%',
     position: 'relative',
     height: '100%',
-    overflow: 'auto'
+    overflow: 'auto',
+    variants: {
+      decoration: {
+        true: {
+          overflow: 'unset'
+        }
+      }
+    }
   });
   var TableContent$3 = styled('table', {
     width: '100%',
@@ -19016,12 +19035,8 @@
       hiddenHeader: {
         true: {
           opacity: 0,
-          '& > tr > th': {
-            height: '0px !important',
-            '& > div': {
-              marginTop: '-50px'
-            }
-          }
+          zIndex: -100,
+          border: 'none'
         }
       }
     }
@@ -19551,6 +19566,114 @@
         })
       }), void 0);
     };
+    var renderRowDecorationReference = function renderRowDecorationReference(row, isContextMenu, i) {
+      return jsxRuntime.jsx(TableRow$3, __assign({
+        css: {
+          display: 'none'
+        }
+      }, row.getRowProps(), {
+        children: row.cells.filter(function (cell) {
+          return !cell.column.isSubRow;
+        }).map(function (cell) {
+          var _a, _b;
+          var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+          var exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
+          return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+            css: __assign(__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: function () {
+              if (!exceptionId) {
+                handleRowClick(row, i);
+              }
+            }
+          }, {
+            children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+              condition: isContextMenu && !exceptionId,
+              wrapper: function (children) {
+                return jsxRuntime.jsx(ContextMenuTrigger, __assign({
+                  id: "context-menu-table",
+                  triggerSide: "left"
+                }, {
+                  children: jsxRuntime.jsx(Box, __assign({
+                    css: {
+                      cursor: 'pointer',
+                      padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                    },
+                    onClick: function () {
+                      return handleRowClick(row, i);
+                    }
+                  }, {
+                    children: children
+                  }), void 0)
+                }), void 0);
+              }
+            }, {
+              children: cell.render('Cell')
+            }), void 0)
+          }), void 0);
+        })
+      }), void 0);
+    };
+    var renderTableDecorationChild = function renderTableDecorationChild(child) {
+      return jsxRuntime.jsxs(TableContent$3, {
+        children: [jsxRuntime.jsx(TableHead$3, __assign({
+          css: {
+            '& > tr > th': {
+              height: '0px !important',
+              '& > div': {
+                marginTop: '-50px'
+              }
+            }
+          },
+          hiddenHeader: true,
+          isInfiniteScroll: isInfiniteScroll
+        }, {
+          children: headerGroups.map(function (headerGroup) {
+            var visibleHeaders = headerGroup.headers.filter(function (column) {
+              return !column.isSubRow;
+            });
+            return jsxRuntime.jsx(TableHeadRow$3, __assign({}, headerGroup.getHeaderGroupProps(), {
+              children: visibleHeaders.map(function (column, index) {
+                var headerRender = column.render('Header');
+                return jsxRuntime.jsx(TableHeadCell$3, __assign({}, column.getHeaderProps(function (props) {
+                  return [props, !column.unsortable ? column.getSortByToggleProps({
+                    title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+                  }) : {
+                    onClick: column.onToggle
+                  }, {
+                    style: {
+                      width: column.colWidth,
+                      maxWidth: column.colMaxWidth,
+                      minWidth: column.colMinWidth
+                    }
+                  }];
+                }), {
+                  css: __assign(__assign(__assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss)
+                }, {
+                  children: typeof headerRender === 'string' ? jsxRuntime.jsx(TableHeaderCellContainer, __assign({
+                    isSortedDesc: column.isSortedDesc,
+                    unsortable: column.unsortable,
+                    isToggleable: !!column.onToggle,
+                    isToggled: column.isToggled
+                  }, {
+                    children: jsxRuntime.jsx(TableHeadCellContent, __assign({
+                      heading: "headerTable"
+                    }, {
+                      children: headerRender.toUpperCase()
+                    }), void 0)
+                  }), void 0) : headerRender
+                }), void 0);
+              })
+            }), void 0);
+          })
+        }), void 0), jsxRuntime.jsx(TableBody$3, __assign({}, getTableBodyProps(), {
+          children: child
+        }), void 0)]
+      }, void 0);
+    };
     var handleRowClick = function handleRowClick(row, i) {
       var _a, _b, _c, _d;
       var clickable = false;
@@ -19645,6 +19768,7 @@
         children: [jsxRuntime.jsxs(TableContainer$3, __assign({
           css: css,
           ref: scrollerRef,
+          decoration: Boolean(decoration),
           onScroll: function (e) {
             var scrollPosition = e.currentTarget.scrollLeft;
             if (scrollPosition < 3) {
@@ -19701,126 +19825,160 @@
                 }), void 0);
               })
             }), void 0), jsxRuntime.jsxs(TableBody$3, __assign({}, getTableBodyProps(), {
-              children: [(_b = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _b === void 0 ? void 0 : _b.call(decoration), page.map(function (row, i) {
-                var _a, _b;
+              children: [(_b = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _b === void 0 ? void 0 : _b.call(decoration), decoration && page.map(function (row, i) {
+                var _a;
                 prepareRow(row);
-                var subRowCells = row.cells.filter(function (cell) {
-                  return cell.column.isSubRow;
-                });
-                var leftAddOnCells = (_a = row.cells.filter(function (cell) {
-                  return ['expander', 'selection'].includes(cell.column.id);
-                })) !== null && _a !== void 0 ? _a : [];
-                var notNullHeaderColumns = visibleColumns.filter(function (column) {
-                  return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
-                });
-                var isContextMenu = (_b = row.cells.filter(function (cell) {
+                var isContextMenu = (_a = row.cells.filter(function (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;
-                var customStyle = {};
-                if (customRowsStyle && customRowsStyle(row.original).length) {
-                  for (var i_2 = 0; i_2 < customRowsStyle(row.original).length; i_2++) {
-                    if (customRowsStyle(row.original)[i_2].predicate) {
-                      customStyle = customRowsStyle(row.original)[i_2].css;
+                })) === null || _a === void 0 ? void 0 : _a.length;
+                return i < 1 && renderRowDecorationReference(row, isContextMenu, i);
+              }), jsxRuntime.jsx(ConditionalWrapper, __assign({
+                condition: Boolean(decoration),
+                wrapper: function (child) {
+                  return jsxRuntime.jsx(TableRow$3, __assign({
+                    css: {
+                      '&:hover': {
+                        backgroundColor: 'unset'
+                      }
                     }
-                  }
-                }
-                return jsxRuntime.jsxs(React__namespace.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) : jsxRuntime.jsx(Text$1, __assign({
-                    variant: "contentButton"
                   }, {
-                    children: row.cells[0].render('Cell')
-                  }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({
-                    css: customStyle
-                  }, row.getRowProps(), {
-                    children: row.cells.filter(function (cell) {
-                      return !cell.column.isSubRow;
-                    }).map(function (cell) {
-                      var _a, _b;
-                      var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
-                      var exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
-                      return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
-                        css: __assign(__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: function () {
-                          if (!exceptionId) {
-                            handleRowClick(row, i);
-                          }
+                    children: jsxRuntime.jsx(TableCell$3, __assign({
+                      colSpan: 12
+                    }, {
+                      children: jsxRuntime.jsx(Box, __assign({
+                        css: {
+                          height: 300,
+                          overflow: 'auto'
                         }
                       }, {
-                        children: jsxRuntime.jsx(ConditionalWrapper, __assign({
-                          condition: isContextMenu && !exceptionId,
-                          wrapper: function (children) {
-                            return jsxRuntime.jsx(ContextMenuTrigger, __assign({
-                              id: "context-menu-table",
-                              triggerSide: "left"
-                            }, {
-                              children: jsxRuntime.jsx(Box, __assign({
-                                css: {
-                                  cursor: 'pointer',
-                                  padding: cell.column.accessor ? '20px 8px' : '20px 20px'
-                                },
-                                onClick: function () {
-                                  return handleRowClick(row, i);
-                                }
-                              }, {
-                                children: children
-                              }), void 0)
-                            }), void 0);
-                          }
-                        }, {
-                          children: cell.render('Cell')
-                        }), void 0)
-                      }), void 0);
-                    })
-                  }), void 0), row.isExpanded ? subRowCells.map(function (cell, index) {
-                    return jsxRuntime.jsxs(TableRow$3, __assign({
-                      subRow: true
+                        children: renderInfiniteScrollWrapper(renderTableDecorationChild(child))
+                      }), void 0)
+                    }), void 0)
+                  }), void 0);
+                }
+              }, {
+                children: page.map(function (row, i) {
+                  var _a, _b;
+                  prepareRow(row);
+                  var subRowCells = row.cells.filter(function (cell) {
+                    return cell.column.isSubRow;
+                  });
+                  var leftAddOnCells = (_a = row.cells.filter(function (cell) {
+                    return ['expander', 'selection'].includes(cell.column.id);
+                  })) !== null && _a !== void 0 ? _a : [];
+                  var notNullHeaderColumns = visibleColumns.filter(function (column) {
+                    return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
+                  });
+                  var isContextMenu = (_b = row.cells.filter(function (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;
+                  var customStyle = {};
+                  if (customRowsStyle && customRowsStyle(row.original).length) {
+                    for (var i_2 = 0; i_2 < customRowsStyle(row.original).length; i_2++) {
+                      if (customRowsStyle(row.original)[i_2].predicate) {
+                        customStyle = customRowsStyle(row.original)[i_2].css;
+                      }
+                    }
+                  }
+                  return jsxRuntime.jsxs(React__namespace.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) : jsxRuntime.jsx(Text$1, __assign({
+                      variant: "contentButton"
                     }, {
-                      children: [leftAddOnCells.map(function (_, index) {
-                        return jsxRuntime.jsx("td", {
-                          style: {
-                            backgroundColor: colors$5.bgGray
-                          }
-                        }, index);
-                      }), jsxRuntime.jsxs(React__namespace.Fragment, {
-                        children: [jsxRuntime.jsx(TableCell$3, __assign({
-                          subCell: true,
-                          colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
-                          headerSubCell: true,
+                      children: row.cells[0].render('Cell')
+                    }), void 0)), jsxRuntime.jsx(TableRow$3, __assign({
+                      css: customStyle
+                    }, row.getRowProps(), {
+                      children: row.cells.filter(function (cell) {
+                        return !cell.column.isSubRow;
+                      }).map(function (cell) {
+                        var _a, _b;
+                        var collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+                        var exceptionId = (_b = ['expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
+                        return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                           css: __assign(__assign({
-                            paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
-                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important"),
-                            backgroundColor: '$bgGray'
-                          }, stickyPositionStyling(cell.column)), cell.column.headerCss)
-                        }, {
-                          children: jsxRuntime.jsx(Paragraph, __assign({
-                            paragraph: "shortContentBold"
-                          }, {
-                            children: cell.column.Header
-                          }), void 0)
-                        }), void 0), jsxRuntime.jsx(TableCell$3, __assign({
-                          subCell: true,
-                          colSpan: visibleColumns.length - subRowCells.length,
-                          css: {
-                            paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
-                            paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important")
+                            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: function () {
+                            if (!exceptionId) {
+                              handleRowClick(row, i);
+                            }
                           }
                         }, {
-                          children: jsxRuntime.jsx(Paragraph, __assign({
-                            paragraph: "shortContentRegular"
+                          children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+                            condition: isContextMenu && !exceptionId,
+                            wrapper: function (children) {
+                              return jsxRuntime.jsx(ContextMenuTrigger, __assign({
+                                id: "context-menu-table",
+                                triggerSide: "left"
+                              }, {
+                                children: jsxRuntime.jsx(Box, __assign({
+                                  css: {
+                                    cursor: 'pointer',
+                                    padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                                  },
+                                  onClick: function () {
+                                    return handleRowClick(row, i);
+                                  }
+                                }, {
+                                  children: children
+                                }), void 0)
+                              }), void 0);
+                            }
                           }, {
                             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);
-              }), (_c = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _c === void 0 ? void 0 : _c.call(decoration)]
+                        }), void 0);
+                      })
+                    }), void 0), row.isExpanded ? subRowCells.map(function (cell, index) {
+                      return jsxRuntime.jsxs(TableRow$3, __assign({
+                        subRow: true
+                      }, {
+                        children: [leftAddOnCells.map(function (_, index) {
+                          return jsxRuntime.jsx("td", {
+                            style: {
+                              backgroundColor: colors$5.bgGray
+                            }
+                          }, index);
+                        }), jsxRuntime.jsxs(React__namespace.Fragment, {
+                          children: [jsxRuntime.jsx(TableCell$3, __assign({
+                            subCell: true,
+                            colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
+                            headerSubCell: true,
+                            css: __assign(__assign({
+                              paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
+                              paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important"),
+                              backgroundColor: '$bgGray'
+                            }, stickyPositionStyling(cell.column)), cell.column.headerCss)
+                          }, {
+                            children: jsxRuntime.jsx(Paragraph, __assign({
+                              paragraph: "shortContentBold"
+                            }, {
+                              children: cell.column.Header
+                            }), void 0)
+                          }), void 0), jsxRuntime.jsx(TableCell$3, __assign({
+                            subCell: true,
+                            colSpan: visibleColumns.length - subRowCells.length,
+                            css: {
+                              paddingTop: "".concat(index === 0 ? '24px' : '13px', " !important"),
+                              paddingBottom: "".concat(index === subRowCells.length - 1 ? '24px' : '13px', " !important")
+                            }
+                          }, {
+                            children: jsxRuntime.jsx(Paragraph, __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), (_c = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _c === void 0 ? void 0 : _c.call(decoration)]
             }), void 0)]
           }), void 0)), renderContextMenu()]
         }), void 0), !isInfiniteScroll && jsxRuntime.jsx(Box, __assign({