@majoo-ui/react 1.52.10 → 1.53.0

package/index.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
-})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('prop-types'), require('@stitches/react'), require('@majoo-ui/core'), require('@majoo-ui/icons'), require('react-transition-group'), require('react/jsx-runtime'), require('@majoo-ui/helpers'), require('@radix-ui/react-avatar'), require('@radix-ui/react-tooltip'), require('@radix-ui/react-progress'), require('@radix-ui/react-label'), require('@radix-ui/react-checkbox'), require('@radix-ui/react-radio-group'), require('react-number-format'), require('@radix-ui/react-switch'), require('downshift'), require('react-infinite-scroller'), require('lodash.debounce'), require('otp-input-react'), require('@floating-ui/react-dom-interactions'), require('@radix-ui/react-slider'), require('@radix-ui/react-tabs'), require('@radix-ui/react-separator'), require('@radix-ui/react-toggle-group'), require('@radix-ui/react-dialog'), require('@radix-ui/react-accordion'), require('dayzed'), require('moment'), require('react-table'), require('react-dom'), require('@radix-ui/react-alert-dialog'), require('@radix-ui/react-dropdown-menu'), require('@radix-ui/react-aspect-ratio'), require('react-color/lib/components/common'), require('react-color/lib/helpers/color'), require('react-step-wizard'), require('react-ui-scrollspy'), require('@react-google-maps/api'), require('superagent'), require('recharts'), require('draft-js'), require('react-draft-wysiwyg'), require('react-contextmenu'), require('react-image-crop'), require('browser-image-compression'), require('react-table-sticky')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'react', 'prop-types', '@stitches/react', '@majoo-ui/core', '@majoo-ui/icons', 'react-transition-group', 'react/jsx-runtime', '@majoo-ui/helpers', '@radix-ui/react-avatar', '@radix-ui/react-tooltip', '@radix-ui/react-progress', '@radix-ui/react-label', '@radix-ui/react-checkbox', '@radix-ui/react-radio-group', 'react-number-format', '@radix-ui/react-switch', 'downshift', 'react-infinite-scroller', 'lodash.debounce', 'otp-input-react', '@floating-ui/react-dom-interactions', '@radix-ui/react-slider', '@radix-ui/react-tabs', '@radix-ui/react-separator', '@radix-ui/react-toggle-group', '@radix-ui/react-dialog', '@radix-ui/react-accordion', 'dayzed', 'moment', 'react-table', 'react-dom', '@radix-ui/react-alert-dialog', '@radix-ui/react-dropdown-menu', '@radix-ui/react-aspect-ratio', 'react-color/lib/components/common', 'react-color/lib/helpers/color', 'react-step-wizard', 'react-ui-scrollspy', '@react-google-maps/api', 'superagent', 'recharts', 'draft-js', 'react-draft-wysiwyg', 'react-contextmenu', 'react-image-crop', 'browser-image-compression', 'react-table-sticky'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.React = {}, global.React, global.PropTypes, global.react, global.core, global.icons, global.reactTransitionGroup, global.jsxRuntime, global.helpers, global.AvatarPrimitive, global.TooltipPrimitive, global.ProgressPrimitive, global.LabelPrimitive, global.CheckboxPrimitive, global.RadioGroupPrimitive, global.NumberFormat, global.SwitchPrimitive, global.Downshift, global.InfiniteScroll, global.debounce, global.OTPInput, global.reactDomInteractions, global.SliderPrimitive, global.TabsPrimitive, global.SeparatorPrimitive, global.ToggleGroupPrimitive, global.DialogPrimitive, global.AccordionPrimitive, global.dayzed, global.moment, global.reactTable, global.ReactDOM, global.ADialog, global.DropdownMenuPrimitive, global.AspectRatioPrimitive, global.common, global.color, global.StepWizard$1, global.ScrollSpy, global.api, global.request, global.recharts, global.draftJs, global.reactDraftWysiwyg, global.reactContextmenu, global.ReactCrop, global.imageCompressionComponent, global.reactTableSticky));
+})(this, (function (exports, React, PropTypes, react, core, icons, reactTransitionGroup, jsxRuntime, helpers, AvatarPrimitive, TooltipPrimitive, ProgressPrimitive, LabelPrimitive, CheckboxPrimitive, RadioGroupPrimitive, NumberFormat, SwitchPrimitive, Downshift, InfiniteScroll, debounce, OTPInput, reactDomInteractions, SliderPrimitive, TabsPrimitive, SeparatorPrimitive, ToggleGroupPrimitive, DialogPrimitive, AccordionPrimitive, dayzed, moment, reactTable, ReactDOM, ADialog, DropdownMenuPrimitive, AspectRatioPrimitive, common, color, StepWizard$1, ScrollSpy, api, request, recharts, draftJs, reactDraftWysiwyg, reactContextmenu, ReactCrop, imageCompressionComponent, reactTableSticky) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -4913,7 +4913,7 @@
   const {
     zIndices: zIndices$1
   } = core.foundations;
-  const slideUpAndFade$1 = keyframes({
+  const slideUpAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateY(2px)'
@@ -4923,7 +4923,7 @@
       transform: 'translateY(0)'
     }
   });
-  const slideRightAndFade$1 = keyframes({
+  const slideRightAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateX(-2px)'
@@ -4933,7 +4933,7 @@
       transform: 'translateX(0)'
     }
   });
-  const slideDownAndFade$1 = keyframes({
+  const slideDownAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateY(-2px)'
@@ -4943,7 +4943,7 @@
       transform: 'translateY(0)'
     }
   });
-  const slideLeftAndFade$1 = keyframes({
+  const slideLeftAndFade$2 = keyframes({
     '0%': {
       opacity: 0,
       transform: 'translateX(2px)'
@@ -4970,16 +4970,16 @@
       willChange: 'transform, opacity',
       '&[data-state="delayed-open"]': {
         '&[data-side="top"]': {
-          animationName: slideDownAndFade$1
+          animationName: slideDownAndFade$2
         },
         '&[data-side="right"]': {
-          animationName: slideLeftAndFade$1
+          animationName: slideLeftAndFade$2
         },
         '&[data-side="bottom"]': {
-          animationName: slideUpAndFade$1
+          animationName: slideUpAndFade$2
         },
         '&[data-side="left"]': {
-          animationName: slideRightAndFade$1
+          animationName: slideRightAndFade$2
         }
       }
     }
@@ -9501,7 +9501,7 @@
     alignItems: 'center',
     borderBottom: '1px solid $bgBorder'
   });
-  const Item$2 = styled('div', {
+  const Item$3 = styled('div', {
     overflow: 'hidden',
     backgroundColor: '$bgWhite',
     lineHeight: '20px',
@@ -9997,7 +9997,7 @@
         lineNumber: 617,
         columnNumber: 25
       }
-    })), /*#__PURE__*/React__default["default"].createElement(Item$2, {
+    })), /*#__PURE__*/React__default["default"].createElement(Item$3, {
       css: {
         backgroundColor: 'unset'
       },
@@ -10271,7 +10271,7 @@
     color: '$textGreen',
     height: '100%'
   });
-  const Item$1 = styled('div', {
+  const Item$2 = styled('div', {
     backgroundColor: '$bgWhite',
     cursor: 'pointer',
     lineHeight: '20px'
@@ -10362,7 +10362,7 @@
         lineNumber: 181,
         columnNumber: 11
       }
-    }), /*#__PURE__*/React__default["default"].createElement(Item$1, {
+    }), /*#__PURE__*/React__default["default"].createElement(Item$2, {
       onClick: () => {
         if (onClickItem) onClickItem();
         setOpen(false);
@@ -14320,7 +14320,7 @@
   }
 
   var ButtonGroup = styled(ToggleGroupPrimitive__namespace.Root, {});
-  var Item = styled(ButtonGroupItem, {
+  var Item$1 = styled(ButtonGroupItem, {
     fontSize: '$label',
     lineHeight: '$label',
     letterSpacing: '$label',
@@ -14339,7 +14339,7 @@
       orientation: "vertical"
     }, {
       children: options.map(function (option) {
-        return jsxRuntime.jsx(Item, __assign({
+        return jsxRuntime.jsx(Item$1, __assign({
           isToggle: false,
           disabled: disabled,
           value: option.value,
@@ -17310,6 +17310,130 @@
   };
   Pagination.displayName = 'Pagination';
 
+  var Trigger = function Trigger(props) {
+    return jsxRuntime.jsx(reactContextmenu.ContextMenuTrigger, __assign({}, props, {
+      mouseButton: (props === null || props === void 0 ? void 0 : props.triggerSide) === 'left' ? 0 : undefined
+    }, {
+      children: props === null || props === void 0 ? void 0 : props.children
+    }), void 0);
+  };
+
+  var Menu = function Menu(props) {
+    return jsxRuntime.jsx(reactContextmenu.ContextMenu, __assign({}, props, {
+      children: props === null || props === void 0 ? void 0 : props.children
+    }), void 0);
+  };
+
+  var Item = function Item(props) {
+    return jsxRuntime.jsx(reactContextmenu.MenuItem, __assign({}, props, {
+      children: props === null || props === void 0 ? void 0 : props.children
+    }), void 0);
+  };
+
+  var slideUpAndFade$1 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateY(2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  });
+  var slideRightAndFade$1 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateX(-2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  });
+  var slideDownAndFade$1 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateY(-2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateY(0)'
+    }
+  });
+  var slideLeftAndFade$1 = keyframes({
+    '0%': {
+      opacity: 0,
+      transform: 'translateX(2px)'
+    },
+    '100%': {
+      opacity: 1,
+      transform: 'translateX(0)'
+    }
+  });
+  var ContextMenuTrigger = styled(Trigger);
+  var ContextMenu = styled(Menu, {
+    width: 'auto',
+    minWidth: 143,
+    maxWidth: 243,
+    backgroundColor: 'white',
+    borderRadius: 4,
+    padding: 8,
+    zIndex: '$sticky',
+    boxShadow: '0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)',
+    '@media (prefers-reduced-motion: no-preference)': {
+      animationDuration: '400ms',
+      animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+      animationFillMode: 'forwards',
+      willChange: 'transform, opacity',
+      '&[data-state="open"]': {
+        '&[data-side="top"]': {
+          animationName: slideDownAndFade$1
+        },
+        '&[data-side="right"]': {
+          animationName: slideLeftAndFade$1
+        },
+        '&[data-side="bottom"]': {
+          animationName: slideUpAndFade$1
+        },
+        '&[data-side="left"]': {
+          animationName: slideRightAndFade$1
+        }
+      }
+    }
+  });
+  var ContextMenuItem = styled(Item, {
+    all: 'unset',
+    fontSize: 14,
+    lineHeight: 1.5,
+    borderRadius: 3,
+    display: 'flex',
+    alignItems: 'center',
+    height: 'calc(36px - 8px)',
+    padding: '4px 0',
+    position: 'relative',
+    userSelect: 'none',
+    color: '$textPrimary',
+    '&[data-disabled]': {
+      color: colors$4.gray400,
+      pointerEvents: 'none'
+    },
+    '&:hover': {
+      cursor: 'pointer',
+      backgroundColor: colors$4.gray100
+    },
+    '&:active': {
+      backgroundColor: colors$4.gray150
+    },
+    '&:focus': {
+      backgroundColor: colors$4.gray100
+    }
+  });
+  var ContextMenuSeparator = styled('div', {
+    height: 1,
+    backgroundColor: colors$4.gray150,
+    margin: 5
+  });
+
   var TableContainer$4 = styled(Flex$1, {
     position: 'relative',
     flexDirection: 'column',
@@ -17817,12 +17941,17 @@
         columnOrder = _a.columnOrder,
         customRowsStyle = _a.customRowsStyle,
         isMobileLayout = _a.isMobileLayout,
-        showDuplicatedData = _a.showDuplicatedData;
+        showDuplicatedData = _a.showDuplicatedData,
+        onRowClick = _a.onRowClick;
 
     var _o = React.useState(rowLimit),
         limit = _o[0],
         setLimit = _o[1];
 
+    var _p = React.useState({}),
+        dataRow = _p[0],
+        setDataRow = _p[1];
+
     var getInitialState = function getInitialState() {
       var initialState = {};
 
@@ -17867,11 +17996,11 @@
         gotoPage = instance.gotoPage,
         setPageSize = instance.setPageSize,
         toggleRowSelected = instance.toggleRowSelected,
-        _p = instance.state,
-        pageIndex = _p.pageIndex,
-        pageSize = _p.pageSize,
-        sortBy = _p.sortBy,
-        selectedRowIds = _p.selectedRowIds,
+        _q = instance.state,
+        pageIndex = _q.pageIndex,
+        pageSize = _q.pageSize,
+        sortBy = _q.sortBy,
+        selectedRowIds = _q.selectedRowIds,
         setHiddenColumns = instance.setHiddenColumns,
         setColumnOrder = instance.setColumnOrder;
 
@@ -17979,6 +18108,56 @@
         });
       }
     }, [data, selectedIds]);
+
+    var getOptionsMenu = function getOptionsMenu() {
+      var _a, _b;
+
+      var options = [];
+
+      for (var i = 0; i < (page === null || page === void 0 ? void 0 : page.length); i++) {
+        prepareRow(page[i]);
+
+        for (var j = 0; j < page[i].cells.length; j++) {
+          var column = (_b = (_a = page[i]) === null || _a === void 0 ? void 0 : _a.cells[j]) === null || _b === void 0 ? void 0 : _b.column;
+
+          if (column === null || column === void 0 ? void 0 : column.options) {
+            options = column === null || column === void 0 ? void 0 : column.options;
+          }
+        }
+      }
+
+      return options;
+    };
+
+    var renderContextMenu = function renderContextMenu() {
+      var options = getOptionsMenu();
+      return jsxRuntime.jsx(ContextMenu, __assign({
+        id: "context-menu-table"
+      }, {
+        children: options === null || options === void 0 ? void 0 : options.map(function (option, index) {
+          return jsxRuntime.jsxs(React__namespace.Fragment, {
+            children: [jsxRuntime.jsx(ContextMenuItem, __assign({
+              data: {
+                row: dataRow
+              },
+              onClick: function () {
+                return option === null || option === void 0 ? void 0 : option.onClick({
+                  row: dataRow
+                });
+              }
+            }, {
+              children: option === null || option === void 0 ? void 0 : option.title
+            }), void 0), index !== (options === null || options === void 0 ? void 0 : options.length) - 1 && jsxRuntime.jsx(ContextMenuSeparator, {}, void 0)]
+          }, index);
+        })
+      }), void 0);
+    };
+
+    var handleRowClick = function handleRowClick(row, i) {
+      onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i);
+      setDataRow(row);
+    };
+
     return jsxRuntime.jsxs(Box, __assign({
       css: {
         position: 'relative',
@@ -18006,11 +18185,11 @@
           children: "Loading .... "
         }), void 0)
       }), void 0), !isMobile ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-        children: [jsxRuntime.jsx(TableContainer$3, __assign({
+        children: [jsxRuntime.jsxs(TableContainer$3, __assign({
           css: css,
           ref: scrollerRef
         }, {
-          children: renderInfiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
+          children: [renderInfiniteScrollWrapper(jsxRuntime.jsxs(TableContent$3, __assign({}, getTableProps(), {
             children: [jsxRuntime.jsx(TableHead$3, __assign({
               css: headerCss
             }, {
@@ -18050,7 +18229,7 @@
               })
             }), void 0), jsxRuntime.jsx(TableBody$3, __assign({}, getTableBodyProps(), {
               children: page.map(function (row, i) {
-                var _a;
+                var _a, _b;
 
                 prepareRow(row);
                 var subRowCells = row.cells.filter(function (cell) {
@@ -18062,6 +18241,11 @@
                 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.values).length) {
@@ -18083,13 +18267,41 @@
                     children: row.cells.filter(function (cell) {
                       return !cell.column.isSubRow;
                     }).map(function (cell) {
+                      var _a, _b;
+
                       return jsxRuntime.jsx(TableCell$3, __assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                         css: __assign(__assign({
-                          padding: cell.column.accessor ? '20px 8px' : '20px 20px',
-                          verticalAlign: cell.column.accessor ? cellAlign : 'center'
-                        }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column))
+                          padding: !isContextMenu || ['expander', 'selection', 'menu', 'eye'].includes((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id) ? cell.column.accessor ? '20px 8px' : '20px 20px' : '',
+                          verticalAlign: cell.column.accessor ? cellAlign : 'center',
+                          cursor: onRowClick ? 'pointer' : 'unset'
+                        }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column)),
+                        onClick: function () {
+                          return handleRowClick(row, i);
+                        }
                       }, {
-                        children: cell.render('Cell')
+                        children: jsxRuntime.jsx(ConditionalWrapper, __assign({
+                          condition: isContextMenu && !['expander', 'selection', 'menu', 'eye'].includes((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id),
+                          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) {
@@ -18133,7 +18345,7 @@
                 }, row.id);
               })
             }), void 0)]
-          }), void 0))
+          }), void 0)), renderContextMenu()]
         }), void 0), !isInfiniteScroll && jsxRuntime.jsx(Box, __assign({
           css: {
             width: '100%'
@@ -18914,6 +19126,7 @@
 
   const rowMenuColumn = (options, icon, config) => ({
     id: 'menu',
+    options,
     Header: () => null,
     Cell: props => {
       const defaultConfig = {
@@ -18937,7 +19150,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 36,
+          lineNumber: 37,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuTrigger, {
@@ -18945,7 +19158,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 37,
+          lineNumber: 38,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -18958,7 +19171,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 38,
+          lineNumber: 39,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
@@ -18966,21 +19179,21 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 39,
+          lineNumber: 40,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 39,
+          lineNumber: 40,
           columnNumber: 70
         }
       })))), /*#__PURE__*/React__default["default"].createElement(DropdownMenuPortal, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 42,
+          lineNumber: 43,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuContent, {
@@ -19003,7 +19216,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 43,
+          lineNumber: 44,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -19011,7 +19224,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 63,
+          lineNumber: 64,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(DropdownMenuItem, {
@@ -19023,7 +19236,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 64,
+          lineNumber: 65,
           columnNumber: 19
         }
       }, option.title), /*#__PURE__*/React__default["default"].createElement(DropdownMenuSeparator, {
@@ -19034,7 +19247,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 73,
+          lineNumber: 74,
           columnNumber: 19
         }
       })))))), /*#__PURE__*/React__default["default"].createElement(ModalDialog, {
@@ -19045,7 +19258,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 79,
+          lineNumber: 80,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -19053,7 +19266,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 80,
+          lineNumber: 81,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19066,28 +19279,28 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 81,
+          lineNumber: 82,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconButton, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 82,
+          lineNumber: 83,
           columnNumber: 15
         }
       }, icon || /*#__PURE__*/React__default["default"].createElement(icons.EllipsisHorizontalOutline, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 82,
+          lineNumber: 83,
           columnNumber: 36
         }
       })))), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 85,
+          lineNumber: 86,
           columnNumber: 11
         }
       }, mobileTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -19097,7 +19310,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 86,
+          lineNumber: 87,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19112,7 +19325,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 87,
+          lineNumber: 88,
           columnNumber: 13
         }
       }, options.map((option, index) => /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
@@ -19120,7 +19333,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 89,
+          lineNumber: 90,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -19136,7 +19349,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 90,
+          lineNumber: 91,
           columnNumber: 19
         }
       }, /*#__PURE__*/React__default["default"].createElement(Paragraph, {
@@ -19145,7 +19358,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 101,
+          lineNumber: 102,
           columnNumber: 21
         }
       }, option.title)), /*#__PURE__*/React__default["default"].createElement(Separator$2, {
@@ -19153,7 +19366,7 @@
         __self: undefined,
         __source: {
           fileName: _jsxFileName$d,
-          lineNumber: 105,
+          lineNumber: 106,
           columnNumber: 19
         }
       })))))));
@@ -22171,6 +22384,7 @@
   function upload(_a) {
     var url = _a.url,
         file = _a.file,
+        customBody = _a.customBody,
         tokenKey = _a.tokenKey,
         token = _a.token,
         progress = _a.progress,
@@ -22180,8 +22394,18 @@
         onSuccess = _a.onSuccess,
         onProgress = _a.onProgress;
     var promise = new Promise(function (resolve, reject) {
+      var _a;
+
       var formdata = new FormData();
-      formdata.append(reqKey, file);
+
+      if (customBody) {
+        for (var i = 0; i < ((_a = Object.keys(customBody)) === null || _a === void 0 ? void 0 : _a.length); i++) {
+          formdata.append(Object.keys(customBody)[i], customBody[Object.keys(customBody)[i]]);
+        }
+      } else {
+        formdata.append(reqKey, file);
+      }
+
       request__default["default"].post(url).set(tokenKey, token).send(formdata).on('progress', function (e) {
         onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
         progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
@@ -22336,6 +22560,7 @@
     progress,
     loading,
     action,
+    customBodyRequest,
     token,
     tokenKey,
     reqKey,
@@ -22344,7 +22569,8 @@
     disabled,
     errorMessage,
     maxSizeMB,
-    imageCompression
+    imageCompression,
+    hiddenToggleAspect
   }) => {
     const isFile = listType === 'file';
     const imgRef = React.useRef(null);
@@ -22518,6 +22744,7 @@
           upload({
             url: action,
             file: newFile,
+            customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
             token,
             tokenKey,
             reqKey,
@@ -22618,9 +22845,12 @@
           handleUpload(files);
         } else {
           if (onBeforeCrop) {
+            var _files$;
+
             // program to get the dimensions of an image
             const img = document.createElement('img');
             img.src = URL.createObjectURL(files[0]);
+            img.size = files === null || files === void 0 ? void 0 : (_files$ = files[0]) === null || _files$ === void 0 ? void 0 : _files$.size;
 
             img.onload = () => {
               var _onBeforeCrop, _onBeforeCrop$then;
@@ -22808,7 +23038,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 603,
+          lineNumber: 607,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ButtonText, {
@@ -22818,7 +23048,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 604,
+          lineNumber: 608,
           columnNumber: 9
         }
       }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22834,7 +23064,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 614,
+              lineNumber: 618,
               columnNumber: 16
             }
           });
@@ -22846,7 +23076,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 617,
+            lineNumber: 621,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22856,7 +23086,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 618,
+            lineNumber: 622,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22865,7 +23095,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 619,
+            lineNumber: 623,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22878,7 +23108,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 620,
+            lineNumber: 624,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22887,7 +23117,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 628,
+            lineNumber: 632,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -22897,7 +23127,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 630,
+            lineNumber: 634,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -22916,7 +23146,7 @@
             __self: undefined,
             __source: {
               fileName: _jsxFileName$9,
-              lineNumber: 641,
+              lineNumber: 645,
               columnNumber: 16
             }
           });
@@ -22927,7 +23157,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 644,
+            lineNumber: 648,
             columnNumber: 9
           }
         }, /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22937,7 +23167,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 645,
+            lineNumber: 649,
             columnNumber: 11
           }
         }, !disabled && /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -22946,7 +23176,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 646,
+            lineNumber: 650,
             columnNumber: 27
           }
         }), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -22959,7 +23189,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 647,
+            lineNumber: 651,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -22969,14 +23199,14 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 655,
+            lineNumber: 659,
             columnNumber: 15
           }
         }, /*#__PURE__*/React__default["default"].createElement(FileExtension, {
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 656,
+            lineNumber: 660,
             columnNumber: 17
           }
         }, ".", item === null || item === void 0 ? void 0 : (_item$name = item.name) === null || _item$name === void 0 ? void 0 : _item$name.split('.').pop()), /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
@@ -22984,7 +23214,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 657,
+            lineNumber: 661,
             columnNumber: 17
           }
         }, /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -22999,7 +23229,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 658,
+            lineNumber: 662,
             columnNumber: 19
           }
         }, item.name)))), /*#__PURE__*/React__default["default"].createElement(Box, {
@@ -23012,7 +23242,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 673,
+            lineNumber: 677,
             columnNumber: 13
           }
         }, /*#__PURE__*/React__default["default"].createElement(IconStateFull, {
@@ -23021,7 +23251,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 681,
+            lineNumber: 685,
             columnNumber: 15
           }
         })), /*#__PURE__*/React__default["default"].createElement(Blank, {
@@ -23029,7 +23259,7 @@
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 683,
+            lineNumber: 687,
             columnNumber: 13
           }
         })), !disabled && renderButtonReplace(index));
@@ -23045,7 +23275,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 694,
+          lineNumber: 698,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23059,7 +23289,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 695,
+          lineNumber: 699,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(LoadingBar, {
@@ -23085,7 +23315,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 696,
+          lineNumber: 700,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23093,14 +23323,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 709,
+          lineNumber: 713,
           columnNumber: 11
         }
       }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default["default"].createElement(Text, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 710,
+          lineNumber: 714,
           columnNumber: 11
         }
       }, "Berkas sedang diunggah")));
@@ -23113,7 +23343,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 718,
+          lineNumber: 722,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ContainerUpload, {
@@ -23129,7 +23359,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 719,
+          lineNumber: 723,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Input$2, {
@@ -23141,21 +23371,21 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 730,
+          lineNumber: 734,
           columnNumber: 11
         }
       }), /*#__PURE__*/React__default["default"].createElement(Children, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 731,
+          lineNumber: 735,
           columnNumber: 11
         }
       }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 733,
+          lineNumber: 737,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(IconCard, {
@@ -23164,7 +23394,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 734,
+          lineNumber: 738,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.UploadOutline, {
@@ -23172,7 +23402,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 735,
+          lineNumber: 739,
           columnNumber: 19
         }
       })), /*#__PURE__*/React__default["default"].createElement(Text, {
@@ -23182,14 +23412,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 737,
+          lineNumber: 741,
           columnNumber: 17
         }
       }, placeholder !== null && placeholder !== void 0 ? placeholder : `Pilih atau letakkan berkas di sini`)))), error && /*#__PURE__*/React__default["default"].createElement(ErrorMessage, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 744,
+          lineNumber: 748,
           columnNumber: 19
         }
       }, error));
@@ -23200,7 +23430,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 751,
+          lineNumber: 755,
           columnNumber: 7
         }
       }, /*#__PURE__*/React__default["default"].createElement(ModalDialogTrigger, {
@@ -23208,7 +23438,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 752,
+          lineNumber: 756,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -23216,7 +23446,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 753,
+          lineNumber: 757,
           columnNumber: 11
         }
       })), /*#__PURE__*/React__default["default"].createElement(ModalDialogTitle, {
@@ -23229,7 +23459,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 755,
+          lineNumber: 759,
           columnNumber: 9
         }
       }, cropperTitle), /*#__PURE__*/React__default["default"].createElement(ModalDialogContent, {
@@ -23241,7 +23471,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 758,
+          lineNumber: 762,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(ReactCrop__default["default"], {
@@ -23252,7 +23482,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 759,
+          lineNumber: 763,
           columnNumber: 11
         }
       }, /*#__PURE__*/React__default["default"].createElement(Image, {
@@ -23266,14 +23496,14 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 760,
+          lineNumber: 764,
           columnNumber: 13
         }
       }))), /*#__PURE__*/React__default["default"].createElement(ModalDialogFooter, {
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 763,
+          lineNumber: 767,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default["default"].createElement(Flex$1, {
@@ -23285,16 +23515,23 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 764,
+          lineNumber: 768,
           columnNumber: 11
         }
-      }, /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
+      }, hiddenToggleAspect ? /*#__PURE__*/React__default["default"].createElement(Box, {
+        __self: this,
+        __source: {
+          fileName: _jsxFileName$9,
+          lineNumber: 770,
+          columnNumber: 15
+        }
+      }) : /*#__PURE__*/React__default["default"].createElement(Tooltip$1, {
         label: "Aspect Ratio",
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 765,
-          columnNumber: 13
+          lineNumber: 772,
+          columnNumber: 15
         }
       }, /*#__PURE__*/React__default["default"].createElement(icons.ImageOutline, {
         style: {
@@ -23305,15 +23542,15 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 766,
-          columnNumber: 15
+          lineNumber: 773,
+          columnNumber: 17
         }
       })), /*#__PURE__*/React__default["default"].createElement(Flex$1, {
         gap: 4,
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 772,
+          lineNumber: 780,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23322,7 +23559,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 773,
+          lineNumber: 781,
           columnNumber: 15
         }
       }, "Batal"), /*#__PURE__*/React__default["default"].createElement(Button$3, {
@@ -23330,7 +23567,7 @@
         __self: this,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 776,
+          lineNumber: 784,
           columnNumber: 15
         }
       }, "Simpan")))));
@@ -23346,7 +23583,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 785,
+        lineNumber: 793,
         columnNumber: 5
       }
     }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default["default"].createElement(UploadProgress, {
@@ -23355,7 +23592,7 @@
       __self: undefined,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 788,
+        lineNumber: 796,
         columnNumber: 32
       }
     }) : renderUpload(), showCropper && renderCropper());
@@ -23485,6 +23722,11 @@
      */
     showCropper: PropTypes__default["default"].bool,
 
+    /**
+     Hidden toggle aspect ratio image cropper.
+     */
+    hiddenToggleAspect: PropTypes__default["default"].bool,
+
     /**
      The aspect ratio of the crop, e.g. `1` for a square or `16 / 9` for landscape. Omit/pass undefined for a free-form crop.
      */
@@ -23510,6 +23752,11 @@
      */
     action: PropTypes__default["default"].string,
 
+    /**
+     Custom body request to upload action.
+     */
+    customBodyRequest: PropTypes__default["default"].func,
+
     /**
      Contains an authentication token for upload API.
      */
@@ -27968,7 +28215,8 @@
   function EditableTableMobile(props) {
     var instance = props.instance,
         emptyDataMessage = props.emptyDataMessage,
-        showCheckbox = props.showCheckbox;
+        showCheckbox = props.showCheckbox,
+        customRows = props.customRows;
     var getTableProps = instance.getTableProps,
         getTableBodyProps = instance.getTableBodyProps,
         headerGroups = instance.headerGroups,
@@ -27976,6 +28224,160 @@
         prepareRow = instance.prepareRow,
         state = instance.state,
         toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
+
+    var getCustomRows = function getCustomRows(row, renderRow) {
+      var _a, _b;
+
+      var customStyle = {};
+      var CustomRow;
+      var showInMobile = false;
+
+      if (customRows && customRows(row).length) {
+        var _loop_1 = function _loop_1(i) {
+          if ((_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.showInMobile) {
+            showInMobile = true;
+          }
+
+          if (customRows(row)[i].predicate) {
+            customStyle = (_b = customRows(row)[i]) === null || _b === void 0 ? void 0 : _b.css;
+
+            CustomRow = function () {
+              var _a;
+
+              return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+            };
+          }
+        };
+
+        for (var i = 0; i < customRows(row).length; i++) {
+          _loop_1(i);
+        }
+      }
+
+      return {
+        CustomRow: CustomRow,
+        customStyle: customStyle,
+        showInMobile: showInMobile
+      };
+    };
+
+    var renderTableRow = function renderTableRow(row, index, customStyle) {
+      return jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/React.createElement(TableRow$2, __assign({
+          css: customStyle
+        }, row.getRowProps(), {
+          key: "row_mobile_".concat(index)
+        }), row.cells.map(function (cell, index) {
+          var _a, _b;
+
+          var isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+          var isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+          return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
+            style: {
+              minWidth: cell.column.minWidth,
+              width: isSelector ? 10 : cell.column.width,
+              maxWidth: isSelector ? 10 : cell.column.maxWidth
+            }
+          }), {
+            key: index
+          }), jsxRuntime.jsxs(Flex$1, __assign({
+            align: "center",
+            justify: "between",
+            css: {
+              cursor: 'pointer',
+              minHeight: 40
+            }
+          }, {
+            children: [jsxRuntime.jsx(Box, {
+              children: cell.render('Cell')
+            }, void 0), !isSelector && jsxRuntime.jsx(Flex$1, __assign({
+              justify: "center",
+              align: "center",
+              onClick: function () {
+                if (!Object.keys(state.expanded).includes(row.id)) {
+                  toggleAllRowsExpanded(false);
+                }
+
+                row.toggleRowExpanded(!row.isExpanded);
+              }
+            }, {
+              children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
+            }), void 0)]
+          }), void 0));
+        })), /*#__PURE__*/React.createElement(TableRowCollapse, __assign({}, row.getRowProps(), {
+          key: "row_mobile_collapse_".concat(index),
+          css: {
+            backgroundColor: '$gray50'
+          }
+        }), showCheckbox && jsxRuntime.jsx(TableCell$2, {}, void 0), jsxRuntime.jsx(TableCellCollapse, {
+          children: jsxRuntime.jsx(Collapalse, __assign({
+            isOpen: row.isExpanded
+          }, {
+            children: jsxRuntime.jsx(Flex$1, __assign({
+              direction: "column",
+              css: {
+                borderTop: '1pt solid $bgBorder'
+              }
+            }, {
+              children: row.cells.filter(function (cell) {
+                var _a, _b, _c, _d;
+
+                return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
+              }).map(function (cell, index) {
+                var _a, _b, _c, _d;
+
+                var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
+                var isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+                var isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+                return !isMobileHeader && !isSelector && jsxRuntime.jsx(Flex$1, __assign({
+                  direction: "column",
+                  justify: "center",
+                  css: {
+                    borderBottom: '1pt solid $bgBorder',
+                    padding: '10px 12px',
+                    minHeight: 52
+                  }
+                }, {
+                  children: jsxRuntime.jsxs(Grid, __assign({
+                    columns: 6,
+                    flow: "row",
+                    css: {
+                      gridRowGap: '$spacing-04',
+                      gridColumnGap: '$spacing-04',
+                      alignItems: 'center'
+                    }
+                  }, {
+                    children: [jsxRuntime.jsx(GridItem, __assign({
+                      colSpan: 3
+                    }, {
+                      children: jsxRuntime.jsx(Heading, __assign({
+                        heading: "headerTable",
+                        color: "secondary"
+                      }, {
+                        children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                          children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsxRuntime.jsx(Required$2, {
+                            children: "*"
+                          }, void 0) : '']
+                        }, void 0) : headerRender
+                      }), void 0)
+                    }), void 0), jsxRuntime.jsx(GridItem, __assign({
+                      colSpan: 3
+                    }, {
+                      children: jsxRuntime.jsx(Flex$1, __assign({
+                        justify: "end"
+                      }, {
+                        children: cell.render('Cell')
+                      }), void 0)
+                    }), void 0)]
+                  }), void 0)
+                }), index);
+              })
+            }), void 0)
+          }), void 0)
+        }, void 0))]
+      }, void 0);
+    };
+
     return jsxRuntime.jsx(TableContainer$2, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
@@ -28008,117 +28410,18 @@
         }, void 0), jsxRuntime.jsx(TableBody$2, __assign({}, getTableBodyProps(), {
           children: rows.map(function (row, index) {
             prepareRow(row);
-            return jsxRuntime.jsxs(React__default["default"].Fragment, {
-              children: [/*#__PURE__*/React.createElement(TableRow$2, __assign({}, row.getRowProps(), {
-                key: "row_mobile_".concat(index)
-              }), row.cells.map(function (cell, index) {
-                var _a, _b;
+            var customStyle = getCustomRows(row).customStyle;
 
-                var isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
-                var isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
-                return (isMobileHeader || isSelector) && /*#__PURE__*/React.createElement(TableCell$2, __assign({}, cell.getCellProps({
-                  style: {
-                    minWidth: cell.column.minWidth,
-                    width: isSelector ? 10 : cell.column.width,
-                    maxWidth: isSelector ? 10 : cell.column.maxWidth
-                  }
-                }), {
-                  key: index
-                }), jsxRuntime.jsxs(Flex$1, __assign({
-                  align: "center",
-                  justify: "between",
-                  css: {
-                    cursor: 'pointer',
-                    minHeight: 40
-                  }
-                }, {
-                  children: [jsxRuntime.jsx(Box, {
-                    children: cell.render('Cell')
-                  }, void 0), !isSelector && jsxRuntime.jsx(Flex$1, __assign({
-                    justify: "center",
-                    align: "center",
-                    onClick: function () {
-                      if (!Object.keys(state.expanded).includes(row.id)) {
-                        toggleAllRowsExpanded(false);
-                      }
+            var _a = getCustomRows(row, function () {
+              return renderTableRow(row, index, customStyle);
+            }),
+                CustomRow = _a.CustomRow,
+                showInMobile = _a.showInMobile;
 
-                      row.toggleRowExpanded(!row.isExpanded);
-                    }
-                  }, {
-                    children: row.isExpanded ? jsxRuntime.jsx(icons.ChevronUpOutline, {}, void 0) : jsxRuntime.jsx(icons.ChevronDownOutline, {}, void 0)
-                  }), void 0)]
-                }), void 0));
-              })), /*#__PURE__*/React.createElement(TableRowCollapse, __assign({}, row.getRowProps(), {
-                key: "row_mobile_collapse_".concat(index),
-                css: {
-                  backgroundColor: '$gray50'
-                }
-              }), showCheckbox && jsxRuntime.jsx(TableCell$2, {}, void 0), jsxRuntime.jsx(TableCellCollapse, {
-                children: jsxRuntime.jsx(Collapalse, __assign({
-                  isOpen: row.isExpanded
-                }, {
-                  children: jsxRuntime.jsx(Flex$1, __assign({
-                    direction: "column",
-                    css: {
-                      borderTop: '1pt solid $bgBorder'
-                    }
-                  }, {
-                    children: row.cells.filter(function (cell) {
-                      var _a, _b, _c, _d;
-
-                      return typeof ((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.hidden) === 'boolean' ? !((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) : !((_d = (_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) === null || _d === void 0 ? void 0 : _d.call(_c, cell));
-                    }).map(function (cell, index) {
-                      var _a, _b, _c, _d;
-
-                      var headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                      var isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
-                      var isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
-                      return !isMobileHeader && !isSelector && jsxRuntime.jsx(Flex$1, __assign({
-                        direction: "column",
-                        justify: "center",
-                        css: {
-                          borderBottom: '1pt solid $bgBorder',
-                          padding: '10px 12px',
-                          minHeight: 52
-                        }
-                      }, {
-                        children: jsxRuntime.jsxs(Grid, __assign({
-                          columns: 6,
-                          flow: "row",
-                          css: {
-                            gridRowGap: '$spacing-04',
-                            gridColumnGap: '$spacing-04',
-                            alignItems: 'center'
-                          }
-                        }, {
-                          children: [jsxRuntime.jsx(GridItem, __assign({
-                            colSpan: 3
-                          }, {
-                            children: jsxRuntime.jsx(Heading, __assign({
-                              heading: "headerTable",
-                              color: "secondary"
-                            }, {
-                              children: typeof headerRender === 'string' ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
-                                children: [headerRender === null || headerRender === void 0 ? void 0 : headerRender.toUpperCase(), ((_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.isRequired) ? jsxRuntime.jsx(Required$2, {
-                                  children: "*"
-                                }, void 0) : '']
-                              }, void 0) : headerRender
-                            }), void 0)
-                          }), void 0), jsxRuntime.jsx(GridItem, __assign({
-                            colSpan: 3
-                          }, {
-                            children: jsxRuntime.jsx(Flex$1, __assign({
-                              justify: "end"
-                            }, {
-                              children: cell.render('Cell')
-                            }), void 0)
-                          }), void 0)]
-                        }), void 0)
-                      }), index);
-                    })
-                  }), void 0)
-                }), void 0)
-              }, void 0))]
+            return jsxRuntime.jsx(React__default["default"].Fragment, {
+              children: CustomRow && showInMobile ? jsxRuntime.jsx(CustomRow, {
+                style: customStyle
+              }, void 0) : renderTableRow(row, index, customStyle)
             }, index);
           })
         }), void 0), rows.length < 1 && jsxRuntime.jsx(TableFoot$1, {
@@ -28524,6 +28827,71 @@
       }
     }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
     var isDesktop = useMediaQuery('(min-width: 767px)');
+
+    var getCustomRows = function getCustomRows(row, renderRow) {
+      var _a;
+
+      var customStyle = {};
+      var CustomRow;
+
+      if (customRows && customRows(row).length) {
+        var _loop_1 = function _loop_1(i) {
+          if (customRows(row)[i].predicate) {
+            customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
+
+            CustomRow = function () {
+              var _a;
+
+              return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+            };
+          }
+        };
+
+        for (var i = 0; i < customRows(row).length; i++) {
+          _loop_1(i);
+        }
+      }
+
+      return {
+        CustomRow: CustomRow,
+        customStyle: customStyle
+      };
+    };
+
+    var renderTableRow = function renderTableRow(row, customStyle) {
+      return jsxRuntime.jsx(TableRow$1, __assign({
+        css: customStyle
+      }, row.getRowProps(), {
+        children: row.cells.filter(function (cell) {
+          var _a, _b, _c, _d, _e;
+
+          return !((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isSubRow) && (typeof ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) === 'boolean' ? !((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) : !((_e = (_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.hidden) === null || _e === void 0 ? void 0 : _e.call(_d, cell)));
+        }).map(function (cell) {
+          var _a;
+
+          return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsxRuntime.jsx(TableCell$1, __assign({}, cell.getCellProps({
+            style: {
+              minWidth: cell.column.minWidth,
+              width: cell.column.width,
+              maxWidth: cell.column.maxWidth
+            }
+          }), {
+            css: {
+              '@md': {
+                height: rowHeight
+              }
+            }
+          }, {
+            children: jsxRuntime.jsx(TableCellContent$1, __assign({
+              align: align
+            }, {
+              children: cell.render('Cell')
+            }), void 0)
+          }), void 0);
+        })
+      }), void 0);
+    };
+
     return isDesktop ? jsxRuntime.jsx(TableContainer$1, __assign({
       css: props === null || props === void 0 ? void 0 : props.css
     }, {
@@ -28553,8 +28921,6 @@
           })
         }, void 0), jsxRuntime.jsx(TableBody$1, __assign({}, getTableBodyProps(), {
           children: rows.map(function (row, index) {
-            var _a;
-
             prepareRow(row);
             var subRowCells = row.cells.filter(function (cell) {
               return cell.column.isSubRow;
@@ -28562,61 +28928,14 @@
             var notNullHeaderColumns = visibleColumns.filter(function (column) {
               return typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow;
             });
-            var customStyle = {};
-            var CustomRow;
-
-            if (customRows && customRows(row).length) {
-              var _loop_1 = function _loop_1(i) {
-                if (customRows(row)[i].predicate) {
-                  customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
-
-                  CustomRow = function () {
-                    var _a;
-
-                    return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values);
-                  };
-                }
-              };
-
-              for (var i = 0; i < customRows(row).length; i++) {
-                _loop_1(i);
-              }
-            }
-
+            var customStyle = getCustomRows(row).customStyle;
+            var CustomRow = getCustomRows(row, function () {
+              return renderTableRow(row, customStyle);
+            }).CustomRow;
             return jsxRuntime.jsxs(React__default["default"].Fragment, {
               children: [CustomRow ? jsxRuntime.jsx(CustomRow, {
                 style: customStyle
-              }, void 0) : jsxRuntime.jsx(TableRow$1, __assign({
-                css: customStyle
-              }, row.getRowProps(), {
-                children: row.cells.filter(function (cell) {
-                  var _a, _b, _c, _d, _e;
-
-                  return !((_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isSubRow) && (typeof ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.hidden) === 'boolean' ? !((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.hidden) : !((_e = (_d = cell === null || cell === void 0 ? void 0 : cell.column) === null || _d === void 0 ? void 0 : _d.hidden) === null || _e === void 0 ? void 0 : _e.call(_d, cell)));
-                }).map(function (cell) {
-                  var _a;
-
-                  return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsxRuntime.jsx(TableCell$1, __assign({}, cell.getCellProps({
-                    style: {
-                      minWidth: cell.column.minWidth,
-                      width: cell.column.width,
-                      maxWidth: cell.column.maxWidth
-                    }
-                  }), {
-                    css: {
-                      '@md': {
-                        height: rowHeight
-                      }
-                    }
-                  }, {
-                    children: jsxRuntime.jsx(TableCellContent$1, __assign({
-                      align: align
-                    }, {
-                      children: cell.render('Cell')
-                    }), void 0)
-                  }), void 0);
-                })
-              }), void 0), subRowCells.map(function (cell) {
+              }, void 0) : renderTableRow(row, customStyle), subRowCells.map(function (cell) {
                 var _a;
 
                 return jsxRuntime.jsx(TableRow$1, __assign({
@@ -28687,7 +29006,8 @@
       css: props === null || props === void 0 ? void 0 : props.css,
       instance: instance,
       emptyDataMessage: emptyDataMessage,
-      showCheckbox: showCheckbox
+      showCheckbox: showCheckbox,
+      customRows: customRows
     }, void 0);
   }
 
@@ -32692,6 +33012,10 @@
   exports.ColorPicker = ColorPicker$1;
   exports.Colors = Colors;
   exports.ContentEditor = ContentEditor;
+  exports.ContextMenu = ContextMenu;
+  exports.ContextMenuItem = ContextMenuItem;
+  exports.ContextMenuSeparator = ContextMenuSeparator;
+  exports.ContextMenuTrigger = ContextMenuTrigger;
   exports.DateColumn = DateColumn;
   exports.DatePicker = DatePicker;
   exports.DecimalColumn = DecimalColumn;