@majoo-ui/react 1.52.10 → 1.53.0

package/index.esm.js

@@ -42,6 +42,7 @@ import request from 'superagent';
 import { ResponsiveContainer, LineChart as LineChart$1, XAxis, YAxis, CartesianGrid, Tooltip as Tooltip$2, Line as Line$1 } from 'recharts';
 import { EditorState } from 'draft-js';
 import { Editor } from 'react-draft-wysiwyg';
+import { ContextMenuTrigger as ContextMenuTrigger$1, ContextMenu as ContextMenu$1, MenuItem } from 'react-contextmenu';
 import ReactCrop, { centerCrop, makeAspectCrop } from 'react-image-crop';
 import imageCompressionComponent from 'browser-image-compression';
 import { useSticky } from 'react-table-sticky';
@@ -4833,7 +4834,7 @@ var _jsxFileName$Q = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packa
 const {
   zIndices: zIndices$1
 } = foundations;
-const slideUpAndFade$1 = keyframes({
+const slideUpAndFade$2 = keyframes({
   '0%': {
     opacity: 0,
     transform: 'translateY(2px)'
@@ -4843,7 +4844,7 @@ const slideUpAndFade$1 = keyframes({
     transform: 'translateY(0)'
   }
 });
-const slideRightAndFade$1 = keyframes({
+const slideRightAndFade$2 = keyframes({
   '0%': {
     opacity: 0,
     transform: 'translateX(-2px)'
@@ -4853,7 +4854,7 @@ const slideRightAndFade$1 = keyframes({
     transform: 'translateX(0)'
   }
 });
-const slideDownAndFade$1 = keyframes({
+const slideDownAndFade$2 = keyframes({
   '0%': {
     opacity: 0,
     transform: 'translateY(-2px)'
@@ -4863,7 +4864,7 @@ const slideDownAndFade$1 = keyframes({
     transform: 'translateY(0)'
   }
 });
-const slideLeftAndFade$1 = keyframes({
+const slideLeftAndFade$2 = keyframes({
   '0%': {
     opacity: 0,
     transform: 'translateX(2px)'
@@ -4890,16 +4891,16 @@ const StyledContent$6 = styled(TooltipPrimitive.Content, {
     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
       }
     }
   }
@@ -9364,7 +9365,7 @@ const ItemWrapper$1 = styled(Box, {
   alignItems: 'center',
   borderBottom: '1px solid $bgBorder'
 });
-const Item$2 = styled('div', {
+const Item$3 = styled('div', {
   overflow: 'hidden',
   backgroundColor: '$bgWhite',
   lineHeight: '20px',
@@ -9860,7 +9861,7 @@ const InputSelectCheck = /*#__PURE__*/forwardRef((_ref, ref) => {
       lineNumber: 617,
       columnNumber: 25
     }
-  })), /*#__PURE__*/React__default.createElement(Item$2, {
+  })), /*#__PURE__*/React__default.createElement(Item$3, {
     css: {
       backgroundColor: 'unset'
     },
@@ -10134,7 +10135,7 @@ const ItemWrapper = styled('div', {
   color: '$textGreen',
   height: '100%'
 });
-const Item$1 = styled('div', {
+const Item$2 = styled('div', {
   backgroundColor: '$bgWhite',
   cursor: 'pointer',
   lineHeight: '20px'
@@ -10225,7 +10226,7 @@ function InputCreatable({
       lineNumber: 181,
       columnNumber: 11
     }
-  }), /*#__PURE__*/React__default.createElement(Item$1, {
+  }), /*#__PURE__*/React__default.createElement(Item$2, {
     onClick: () => {
       if (onClickItem) onClickItem();
       setOpen(false);
@@ -14147,7 +14148,7 @@ function useMediaQuery(query) {
 }
 
 const ButtonGroup = styled(ToggleGroupPrimitive.Root, {});
-const Item = styled(ButtonGroupItem, {
+const Item$1 = styled(ButtonGroupItem, {
   fontSize: '$label',
   lineHeight: '$label',
   letterSpacing: '$label',
@@ -14165,7 +14166,7 @@ const AdvancedOption = ({
     type: "single",
     orientation: "vertical"
   }, {
-    children: _options.map(option => jsx(Item, Object.assign({
+    children: _options.map(option => jsx(Item$1, Object.assign({
       isToggle: false,
       disabled: disabled,
       value: option.value,
@@ -17026,6 +17027,130 @@ Pagination.propTypes = {
 };
 Pagination.displayName = 'Pagination';
 
+const Trigger = props => {
+  return jsx(ContextMenuTrigger$1, Object.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);
+};
+
+const Menu = props => {
+  return jsx(ContextMenu$1, Object.assign({}, props, {
+    children: props === null || props === void 0 ? void 0 : props.children
+  }), void 0);
+};
+
+const Item = props => {
+  return jsx(MenuItem, Object.assign({}, props, {
+    children: props === null || props === void 0 ? void 0 : props.children
+  }), void 0);
+};
+
+const slideUpAndFade$1 = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideRightAndFade$1 = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const slideDownAndFade$1 = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateY(-2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateY(0)'
+  }
+});
+const slideLeftAndFade$1 = keyframes({
+  '0%': {
+    opacity: 0,
+    transform: 'translateX(2px)'
+  },
+  '100%': {
+    opacity: 1,
+    transform: 'translateX(0)'
+  }
+});
+const ContextMenuTrigger = styled(Trigger);
+const 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
+      }
+    }
+  }
+});
+const 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
+  }
+});
+const ContextMenuSeparator = styled('div', {
+  height: 1,
+  backgroundColor: colors$4.gray150,
+  margin: 5
+});
+
 const TableContainer$4 = styled(Flex$1, {
   position: 'relative',
   flexDirection: 'column',
@@ -17513,9 +17638,11 @@ function Table({
   columnOrder,
   customRowsStyle,
   isMobileLayout,
-  showDuplicatedData
+  showDuplicatedData,
+  onRowClick
 }) {
   const [limit, setLimit] = useState(rowLimit);
+  const [dataRow, setDataRow] = useState({});
 
   const getInitialState = () => {
     const initialState = {};
@@ -17660,6 +17787,54 @@ function Table({
       });
     }
   }, [data, selectedIds]);
+
+  const getOptionsMenu = () => {
+    var _a, _b;
+
+    let options = [];
+
+    for (let i = 0; i < (page === null || page === void 0 ? void 0 : page.length); i++) {
+      prepareRow(page[i]);
+
+      for (let j = 0; j < page[i].cells.length; j++) {
+        const 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;
+  };
+
+  const renderContextMenu = () => {
+    const options = getOptionsMenu();
+    return jsx(ContextMenu, Object.assign({
+      id: "context-menu-table"
+    }, {
+      children: options === null || options === void 0 ? void 0 : options.map((option, index) => {
+        return jsxs(React.Fragment, {
+          children: [jsx(ContextMenuItem, Object.assign({
+            data: {
+              row: dataRow
+            },
+            onClick: () => 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 && jsx(ContextMenuSeparator, {}, void 0)]
+        }, index);
+      })
+    }), void 0);
+  };
+
+  const handleRowClick = (row, i) => {
+    onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i);
+    setDataRow(row);
+  };
+
   return jsxs(Box, Object.assign({
     css: {
       position: 'relative',
@@ -17687,11 +17862,11 @@ function Table({
         children: "Loading .... "
       }), void 0)
     }), void 0), !isMobile ? jsxs(Fragment, {
-      children: [jsx(TableContainer$3, Object.assign({
+      children: [jsxs(TableContainer$3, Object.assign({
         css: css,
         ref: scrollerRef
       }, {
-        children: renderInfiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
+        children: [renderInfiniteScrollWrapper(jsxs(TableContent$3, Object.assign({}, getTableProps(), {
           children: [jsx(TableHead$3, Object.assign({
             css: headerCss
           }, {
@@ -17727,12 +17902,17 @@ function Table({
             })
           }), void 0), jsx(TableBody$3, Object.assign({}, getTableBodyProps(), {
             children: page.map((row, i) => {
-              var _a;
+              var _a, _b;
 
               prepareRow(row);
               const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
               const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'selection'].includes(cell.column.id))) !== null && _a !== void 0 ? _a : [];
               const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
+              const isContextMenu = (_b = row.cells.filter(cell => {
+                var _a, _b;
+
+                return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
+              })) === null || _b === void 0 ? void 0 : _b.length;
               let customStyle = {};
 
               if (customRowsStyle && customRowsStyle(row.values).length) {
@@ -17752,13 +17932,35 @@ function Table({
                   css: customStyle
                 }, row.getRowProps(), {
                   children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
+                    var _a, _b;
+
                     return jsx(TableCell$3, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
                       css: Object.assign(Object.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: () => handleRowClick(row, i)
                     }, {
-                      children: cell.render('Cell')
+                      children: jsx(ConditionalWrapper, Object.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: children => jsx(ContextMenuTrigger, Object.assign({
+                          id: "context-menu-table",
+                          triggerSide: "left"
+                        }, {
+                          children: jsx(Box, Object.assign({
+                            css: {
+                              cursor: 'pointer',
+                              padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                            },
+                            onClick: () => handleRowClick(row, i)
+                          }, {
+                            children: children
+                          }), void 0)
+                        }), void 0)
+                      }, {
+                        children: cell.render('Cell')
+                      }), void 0)
                     }), void 0);
                   })
                 }), void 0), row.isExpanded ? subRowCells.map((cell, index) => jsxs(TableRow$3, Object.assign({
@@ -17798,7 +18000,7 @@ function Table({
               }, row.id);
             })
           }), void 0)]
-        }), void 0))
+        }), void 0)), renderContextMenu()]
       }), void 0), !isInfiniteScroll && jsx(Box, Object.assign({
         css: {
           width: '100%'
@@ -18572,6 +18774,7 @@ var _jsxFileName$d = "C:\\Users\\Lenovo\\Documents\\code\\majoo\\majoo-ui\\packa
 
 const rowMenuColumn = (options, icon, config) => ({
   id: 'menu',
+  options,
   Header: () => null,
   Cell: props => {
     const defaultConfig = {
@@ -18595,7 +18798,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 36,
+        lineNumber: 37,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuTrigger, {
@@ -18603,7 +18806,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 37,
+        lineNumber: 38,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18616,7 +18819,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 38,
+        lineNumber: 39,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
@@ -18624,21 +18827,21 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 39,
+        lineNumber: 40,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 39,
+        lineNumber: 40,
         columnNumber: 70
       }
     })))), /*#__PURE__*/React__default.createElement(DropdownMenuPortal, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 42,
+        lineNumber: 43,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuContent, {
@@ -18661,7 +18864,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 43,
+        lineNumber: 44,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -18669,7 +18872,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 63,
+        lineNumber: 64,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(DropdownMenuItem, {
@@ -18681,7 +18884,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 64,
+        lineNumber: 65,
         columnNumber: 19
       }
     }, option.title), /*#__PURE__*/React__default.createElement(DropdownMenuSeparator, {
@@ -18692,7 +18895,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 73,
+        lineNumber: 74,
         columnNumber: 19
       }
     })))))), /*#__PURE__*/React__default.createElement(ModalDialog, {
@@ -18703,7 +18906,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 79,
+        lineNumber: 80,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -18711,7 +18914,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 80,
+        lineNumber: 81,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18724,28 +18927,28 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 81,
+        lineNumber: 82,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(IconButton, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 82,
+        lineNumber: 83,
         columnNumber: 15
       }
     }, icon || /*#__PURE__*/React__default.createElement(EllipsisHorizontalOutline, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 82,
+        lineNumber: 83,
         columnNumber: 36
       }
     })))), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 85,
+        lineNumber: 86,
         columnNumber: 11
       }
     }, mobileTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -18755,7 +18958,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 86,
+        lineNumber: 87,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18770,7 +18973,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 87,
+        lineNumber: 88,
         columnNumber: 13
       }
     }, options.map((option, index) => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
@@ -18778,7 +18981,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 89,
+        lineNumber: 90,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(Box, {
@@ -18794,7 +18997,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 90,
+        lineNumber: 91,
         columnNumber: 19
       }
     }, /*#__PURE__*/React__default.createElement(Paragraph, {
@@ -18803,7 +19006,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 101,
+        lineNumber: 102,
         columnNumber: 21
       }
     }, option.title)), /*#__PURE__*/React__default.createElement(Separator$2, {
@@ -18811,7 +19014,7 @@ const rowMenuColumn = (options, icon, config) => ({
       __self: undefined,
       __source: {
         fileName: _jsxFileName$d,
-        lineNumber: 105,
+        lineNumber: 106,
         columnNumber: 19
       }
     })))))));
@@ -21792,6 +21995,7 @@ function imgPreview(image, crop, scale = 1, rotate = 0, ratio) {
 function upload({
   url,
   file,
+  customBody,
   tokenKey,
   token,
   progress,
@@ -21802,8 +22006,18 @@ function upload({
   onProgress
 }) {
   const promise = new Promise((resolve, reject) => {
+    var _a;
+
     const formdata = new FormData();
-    formdata.append(reqKey, file);
+
+    if (customBody) {
+      for (let 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.post(url).set(tokenKey, token).send(formdata).on('progress', e => {
       onProgress === null || onProgress === void 0 ? void 0 : onProgress(e);
       progress === null || progress === void 0 ? void 0 : progress(Math.round(e.percent));
@@ -21958,6 +22172,7 @@ const Upload = ({
   progress,
   loading,
   action,
+  customBodyRequest,
   token,
   tokenKey,
   reqKey,
@@ -21966,7 +22181,8 @@ const Upload = ({
   disabled,
   errorMessage,
   maxSizeMB,
-  imageCompression
+  imageCompression,
+  hiddenToggleAspect
 }) => {
   const isFile = listType === 'file';
   const imgRef = useRef(null);
@@ -22140,6 +22356,7 @@ const Upload = ({
         upload({
           url: action,
           file: newFile,
+          customBody: customBodyRequest === null || customBodyRequest === void 0 ? void 0 : customBodyRequest(newFile),
           token,
           tokenKey,
           reqKey,
@@ -22240,9 +22457,12 @@ const Upload = ({
         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;
@@ -22430,7 +22650,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 603,
+        lineNumber: 607,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ButtonText, {
@@ -22440,7 +22660,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 604,
+        lineNumber: 608,
         columnNumber: 9
       }
     }, replaceLabel && replaceLabel.length > 0 ? replaceLabel : `Ubah Berkas`));
@@ -22456,7 +22676,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 614,
+            lineNumber: 618,
             columnNumber: 16
           }
         });
@@ -22468,7 +22688,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 617,
+          lineNumber: 621,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22478,7 +22698,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 618,
+          lineNumber: 622,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22487,7 +22707,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 619,
+          lineNumber: 623,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22500,7 +22720,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 620,
+          lineNumber: 624,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22509,7 +22729,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 628,
+          lineNumber: 632,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Image, {
@@ -22519,7 +22739,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 630,
+          lineNumber: 634,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22538,7 +22758,7 @@ const Upload = ({
           __self: undefined,
           __source: {
             fileName: _jsxFileName$9,
-            lineNumber: 641,
+            lineNumber: 645,
             columnNumber: 16
           }
         });
@@ -22549,7 +22769,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 644,
+          lineNumber: 648,
           columnNumber: 9
         }
       }, /*#__PURE__*/React__default.createElement(Box, {
@@ -22559,7 +22779,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 645,
+          lineNumber: 649,
           columnNumber: 11
         }
       }, !disabled && /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22568,7 +22788,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 646,
+          lineNumber: 650,
           columnNumber: 27
         }
       }), /*#__PURE__*/React__default.createElement(Box, {
@@ -22581,7 +22801,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 647,
+          lineNumber: 651,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22591,14 +22811,14 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 655,
+          lineNumber: 659,
           columnNumber: 15
         }
       }, /*#__PURE__*/React__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.createElement(Tooltip$1, {
@@ -22606,7 +22826,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 657,
+          lineNumber: 661,
           columnNumber: 17
         }
       }, /*#__PURE__*/React__default.createElement(Text, {
@@ -22621,7 +22841,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 658,
+          lineNumber: 662,
           columnNumber: 19
         }
       }, item.name)))), /*#__PURE__*/React__default.createElement(Box, {
@@ -22634,7 +22854,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 673,
+          lineNumber: 677,
           columnNumber: 13
         }
       }, /*#__PURE__*/React__default.createElement(IconStateFull, {
@@ -22643,7 +22863,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 681,
+          lineNumber: 685,
           columnNumber: 15
         }
       })), /*#__PURE__*/React__default.createElement(Blank, {
@@ -22651,7 +22871,7 @@ const Upload = ({
         __self: undefined,
         __source: {
           fileName: _jsxFileName$9,
-          lineNumber: 683,
+          lineNumber: 687,
           columnNumber: 13
         }
       })), !disabled && renderButtonReplace(index));
@@ -22667,7 +22887,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 694,
+        lineNumber: 698,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22681,7 +22901,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 695,
+        lineNumber: 699,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(LoadingBar, {
@@ -22707,7 +22927,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 696,
+        lineNumber: 700,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Text, {
@@ -22715,14 +22935,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 709,
+        lineNumber: 713,
         columnNumber: 11
       }
     }, `${progress <= 100 ? progress : 100}%`), /*#__PURE__*/React__default.createElement(Text, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 710,
+        lineNumber: 714,
         columnNumber: 11
       }
     }, "Berkas sedang diunggah")));
@@ -22735,7 +22955,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 718,
+        lineNumber: 722,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ContainerUpload, {
@@ -22751,7 +22971,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 719,
+        lineNumber: 723,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Input$2, {
@@ -22763,21 +22983,21 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 730,
+        lineNumber: 734,
         columnNumber: 11
       }
     }), /*#__PURE__*/React__default.createElement(Children, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 731,
+        lineNumber: 735,
         columnNumber: 11
       }
     }, children !== null && children !== void 0 ? children : /*#__PURE__*/React__default.createElement(React__default.Fragment, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 733,
+        lineNumber: 737,
         columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(IconCard, {
@@ -22786,7 +23006,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 734,
+        lineNumber: 738,
         columnNumber: 17
       }
     }, /*#__PURE__*/React__default.createElement(UploadOutline, {
@@ -22794,7 +23014,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 735,
+        lineNumber: 739,
         columnNumber: 19
       }
     })), /*#__PURE__*/React__default.createElement(Text, {
@@ -22804,14 +23024,14 @@ const Upload = ({
       __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.createElement(ErrorMessage, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 744,
+        lineNumber: 748,
         columnNumber: 19
       }
     }, error));
@@ -22822,7 +23042,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 751,
+        lineNumber: 755,
         columnNumber: 7
       }
     }, /*#__PURE__*/React__default.createElement(ModalDialogTrigger, {
@@ -22830,7 +23050,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 752,
+        lineNumber: 756,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement("div", {
@@ -22838,7 +23058,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 753,
+        lineNumber: 757,
         columnNumber: 11
       }
     })), /*#__PURE__*/React__default.createElement(ModalDialogTitle, {
@@ -22851,7 +23071,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 755,
+        lineNumber: 759,
         columnNumber: 9
       }
     }, cropperTitle), /*#__PURE__*/React__default.createElement(ModalDialogContent, {
@@ -22863,7 +23083,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 758,
+        lineNumber: 762,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(ReactCrop, {
@@ -22874,7 +23094,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 759,
+        lineNumber: 763,
         columnNumber: 11
       }
     }, /*#__PURE__*/React__default.createElement(Image, {
@@ -22888,14 +23108,14 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 760,
+        lineNumber: 764,
         columnNumber: 13
       }
     }))), /*#__PURE__*/React__default.createElement(ModalDialogFooter, {
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 763,
+        lineNumber: 767,
         columnNumber: 9
       }
     }, /*#__PURE__*/React__default.createElement(Flex$1, {
@@ -22907,16 +23127,23 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 764,
+        lineNumber: 768,
         columnNumber: 11
       }
-    }, /*#__PURE__*/React__default.createElement(Tooltip$1, {
+    }, hiddenToggleAspect ? /*#__PURE__*/React__default.createElement(Box, {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName$9,
+        lineNumber: 770,
+        columnNumber: 15
+      }
+    }) : /*#__PURE__*/React__default.createElement(Tooltip$1, {
       label: "Aspect Ratio",
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 765,
-        columnNumber: 13
+        lineNumber: 772,
+        columnNumber: 15
       }
     }, /*#__PURE__*/React__default.createElement(ImageOutline, {
       style: {
@@ -22927,15 +23154,15 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 766,
-        columnNumber: 15
+        lineNumber: 773,
+        columnNumber: 17
       }
     })), /*#__PURE__*/React__default.createElement(Flex$1, {
       gap: 4,
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 772,
+        lineNumber: 780,
         columnNumber: 13
       }
     }, /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22944,7 +23171,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 773,
+        lineNumber: 781,
         columnNumber: 15
       }
     }, "Batal"), /*#__PURE__*/React__default.createElement(Button$3, {
@@ -22952,7 +23179,7 @@ const Upload = ({
       __self: this,
       __source: {
         fileName: _jsxFileName$9,
-        lineNumber: 776,
+        lineNumber: 784,
         columnNumber: 15
       }
     }, "Simpan")))));
@@ -22968,7 +23195,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 785,
+      lineNumber: 793,
       columnNumber: 5
     }
   }, !isFile && renderPicture(), isFile && renderFile(), progress || isLoading ? /*#__PURE__*/React__default.createElement(UploadProgress, {
@@ -22977,7 +23204,7 @@ const Upload = ({
     __self: undefined,
     __source: {
       fileName: _jsxFileName$9,
-      lineNumber: 788,
+      lineNumber: 796,
       columnNumber: 32
     }
   }) : renderUpload(), showCropper && renderCropper());
@@ -23107,6 +23334,11 @@ Upload.propTypes = {
    */
   showCropper: PropTypes.bool,
 
+  /**
+   Hidden toggle aspect ratio image cropper.
+   */
+  hiddenToggleAspect: PropTypes.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.
    */
@@ -23132,6 +23364,11 @@ Upload.propTypes = {
    */
   action: PropTypes.string,
 
+  /**
+   Custom body request to upload action.
+   */
+  customBodyRequest: PropTypes.func,
+
   /**
    Contains an authentication token for upload API.
    */
@@ -27578,7 +27815,8 @@ function EditableTableMobile(props) {
   const {
     instance,
     emptyDataMessage,
-    showCheckbox
+    showCheckbox,
+    customRows
   } = props;
   const {
     getTableProps,
@@ -27589,6 +27827,156 @@ function EditableTableMobile(props) {
     state,
     toggleAllRowsExpanded
   } = instance;
+
+  const getCustomRows = (row, renderRow) => {
+    var _a, _b;
+
+    let customStyle = {};
+    let CustomRow;
+    let showInMobile = false;
+
+    if (customRows && customRows(row).length) {
+      for (let i = 0; i < customRows(row).length; 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 = () => {
+            var _a;
+
+            return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+          };
+        }
+      }
+    }
+
+    return {
+      CustomRow,
+      customStyle,
+      showInMobile
+    };
+  };
+
+  const renderTableRow = (row, index, customStyle) => {
+    return jsxs(Fragment, {
+      children: [/*#__PURE__*/createElement$2(TableRow$2, Object.assign({
+        css: customStyle
+      }, row.getRowProps(), {
+        key: `row_mobile_${index}`
+      }), row.cells.map((cell, index) => {
+        var _a, _b;
+
+        const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
+        const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
+        return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
+          style: {
+            minWidth: cell.column.minWidth,
+            width: isSelector ? 10 : cell.column.width,
+            maxWidth: isSelector ? 10 : cell.column.maxWidth
+          }
+        }), {
+          key: index
+        }), jsxs(Flex$1, Object.assign({
+          align: "center",
+          justify: "between",
+          css: {
+            cursor: 'pointer',
+            minHeight: 40
+          }
+        }, {
+          children: [jsx(Box, {
+            children: cell.render('Cell')
+          }, void 0), !isSelector && jsx(Flex$1, Object.assign({
+            justify: "center",
+            align: "center",
+            onClick: () => {
+              if (!Object.keys(state.expanded).includes(row.id)) {
+                toggleAllRowsExpanded(false);
+              }
+
+              row.toggleRowExpanded(!row.isExpanded);
+            }
+          }, {
+            children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
+          }), void 0)]
+        }), void 0));
+      })), /*#__PURE__*/createElement$2(TableRowCollapse, Object.assign({}, row.getRowProps(), {
+        key: `row_mobile_collapse_${index}`,
+        css: {
+          backgroundColor: '$gray50'
+        }
+      }), showCheckbox && jsx(TableCell$2, {}, void 0), jsx(TableCellCollapse, {
+        children: jsx(Collapalse, Object.assign({
+          isOpen: row.isExpanded
+        }, {
+          children: jsx(Flex$1, Object.assign({
+            direction: "column",
+            css: {
+              borderTop: '1pt solid $bgBorder'
+            }
+          }, {
+            children: row.cells.filter(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((cell, index) => {
+              var _a, _b, _c, _d;
+
+              const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
+              const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
+              const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
+              return !isMobileHeader && !isSelector && jsx(Flex$1, Object.assign({
+                direction: "column",
+                justify: "center",
+                css: {
+                  borderBottom: '1pt solid $bgBorder',
+                  padding: '10px 12px',
+                  minHeight: 52
+                }
+              }, {
+                children: jsxs(Grid, Object.assign({
+                  columns: 6,
+                  flow: "row",
+                  css: {
+                    gridRowGap: '$spacing-04',
+                    gridColumnGap: '$spacing-04',
+                    alignItems: 'center'
+                  }
+                }, {
+                  children: [jsx(GridItem, Object.assign({
+                    colSpan: 3
+                  }, {
+                    children: jsx(Heading, Object.assign({
+                      heading: "headerTable",
+                      color: "secondary"
+                    }, {
+                      children: typeof headerRender === 'string' ? jsxs(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) ? jsx(Required$2, {
+                          children: "*"
+                        }, void 0) : '']
+                      }, void 0) : headerRender
+                    }), void 0)
+                  }), void 0), jsx(GridItem, Object.assign({
+                    colSpan: 3
+                  }, {
+                    children: jsx(Flex$1, Object.assign({
+                      justify: "end"
+                    }, {
+                      children: cell.render('Cell')
+                    }), void 0)
+                  }), void 0)]
+                }), void 0)
+              }), index);
+            })
+          }), void 0)
+        }), void 0)
+      }, void 0))]
+    }, void 0);
+  };
+
   return jsx(TableContainer$2, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
@@ -27621,117 +28009,17 @@ function EditableTableMobile(props) {
       }, void 0), jsx(TableBody$2, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
           prepareRow(row);
-          return jsxs(React__default.Fragment, {
-            children: [/*#__PURE__*/createElement$2(TableRow$2, Object.assign({}, row.getRowProps(), {
-              key: `row_mobile_${index}`
-            }), row.cells.map((cell, index) => {
-              var _a, _b;
-
-              const isMobileHeader = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.isMobileHeader;
-              const isSelector = ((_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id) === 'selection';
-              return (isMobileHeader || isSelector) && /*#__PURE__*/createElement$2(TableCell$2, Object.assign({}, cell.getCellProps({
-                style: {
-                  minWidth: cell.column.minWidth,
-                  width: isSelector ? 10 : cell.column.width,
-                  maxWidth: isSelector ? 10 : cell.column.maxWidth
-                }
-              }), {
-                key: index
-              }), jsxs(Flex$1, Object.assign({
-                align: "center",
-                justify: "between",
-                css: {
-                  cursor: 'pointer',
-                  minHeight: 40
-                }
-              }, {
-                children: [jsx(Box, {
-                  children: cell.render('Cell')
-                }, void 0), !isSelector && jsx(Flex$1, Object.assign({
-                  justify: "center",
-                  align: "center",
-                  onClick: () => {
-                    if (!Object.keys(state.expanded).includes(row.id)) {
-                      toggleAllRowsExpanded(false);
-                    }
-
-                    row.toggleRowExpanded(!row.isExpanded);
-                  }
-                }, {
-                  children: row.isExpanded ? jsx(ChevronUpOutline, {}, void 0) : jsx(ChevronDownOutline, {}, void 0)
-                }), void 0)]
-              }), void 0));
-            })), /*#__PURE__*/createElement$2(TableRowCollapse, Object.assign({}, row.getRowProps(), {
-              key: `row_mobile_collapse_${index}`,
-              css: {
-                backgroundColor: '$gray50'
-              }
-            }), showCheckbox && jsx(TableCell$2, {}, void 0), jsx(TableCellCollapse, {
-              children: jsx(Collapalse, Object.assign({
-                isOpen: row.isExpanded
-              }, {
-                children: jsx(Flex$1, Object.assign({
-                  direction: "column",
-                  css: {
-                    borderTop: '1pt solid $bgBorder'
-                  }
-                }, {
-                  children: row.cells.filter(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((cell, index) => {
-                    var _a, _b, _c, _d;
-
-                    const headerRender = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.Header;
-                    const isMobileHeader = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.isMobileHeader;
-                    const isSelector = ((_c = cell === null || cell === void 0 ? void 0 : cell.column) === null || _c === void 0 ? void 0 : _c.id) === 'selection';
-                    return !isMobileHeader && !isSelector && jsx(Flex$1, Object.assign({
-                      direction: "column",
-                      justify: "center",
-                      css: {
-                        borderBottom: '1pt solid $bgBorder',
-                        padding: '10px 12px',
-                        minHeight: 52
-                      }
-                    }, {
-                      children: jsxs(Grid, Object.assign({
-                        columns: 6,
-                        flow: "row",
-                        css: {
-                          gridRowGap: '$spacing-04',
-                          gridColumnGap: '$spacing-04',
-                          alignItems: 'center'
-                        }
-                      }, {
-                        children: [jsx(GridItem, Object.assign({
-                          colSpan: 3
-                        }, {
-                          children: jsx(Heading, Object.assign({
-                            heading: "headerTable",
-                            color: "secondary"
-                          }, {
-                            children: typeof headerRender === 'string' ? jsxs(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) ? jsx(Required$2, {
-                                children: "*"
-                              }, void 0) : '']
-                            }, void 0) : headerRender
-                          }), void 0)
-                        }), void 0), jsx(GridItem, Object.assign({
-                          colSpan: 3
-                        }, {
-                          children: jsx(Flex$1, Object.assign({
-                            justify: "end"
-                          }, {
-                            children: cell.render('Cell')
-                          }), void 0)
-                        }), void 0)]
-                      }), void 0)
-                    }), index);
-                  })
-                }), void 0)
-              }), void 0)
-            }, void 0))]
+          const {
+            customStyle
+          } = getCustomRows(row);
+          const {
+            CustomRow,
+            showInMobile
+          } = getCustomRows(row, () => renderTableRow(row, index, customStyle));
+          return jsx(React__default.Fragment, {
+            children: CustomRow && showInMobile ? jsx(CustomRow, {
+              style: customStyle
+            }, void 0) : renderTableRow(row, index, customStyle)
           }, index);
         })
       }), void 0), rows.length < 1 && jsx(TableFoot$1, {
@@ -28133,6 +28421,67 @@ function EditableTable(props) {
     }
   }, [selectedRowIds, data, onSelectedChange, selectedIndex]);
   const isDesktop = useMediaQuery('(min-width: 767px)');
+
+  const getCustomRows = (row, renderRow) => {
+    var _a;
+
+    let customStyle = {};
+    let CustomRow;
+
+    if (customRows && customRows(row).length) {
+      for (let i = 0; i < customRows(row).length; i++) {
+        if (customRows(row)[i].predicate) {
+          customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
+
+          CustomRow = () => {
+            var _a;
+
+            return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values, renderRow);
+          };
+        }
+      }
+    }
+
+    return {
+      CustomRow,
+      customStyle
+    };
+  };
+
+  const renderTableRow = (row, customStyle) => {
+    return jsx(TableRow$1, Object.assign({
+      css: customStyle
+    }, row.getRowProps(), {
+      children: row.cells.filter(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(cell => {
+        var _a;
+
+        return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsx(TableCell$1, Object.assign({}, cell.getCellProps({
+          style: {
+            minWidth: cell.column.minWidth,
+            width: cell.column.width,
+            maxWidth: cell.column.maxWidth
+          }
+        }), {
+          css: {
+            '@md': {
+              height: rowHeight
+            }
+          }
+        }, {
+          children: jsx(TableCellContent$1, Object.assign({
+            align: align
+          }, {
+            children: cell.render('Cell')
+          }), void 0)
+        }), void 0);
+      })
+    }), void 0);
+  };
+
   return isDesktop ? jsx(TableContainer$1, Object.assign({
     css: props === null || props === void 0 ? void 0 : props.css
   }, {
@@ -28160,62 +28509,19 @@ function EditableTable(props) {
         })
       }, void 0), jsx(TableBody$1, Object.assign({}, getTableBodyProps(), {
         children: rows.map((row, index) => {
-          var _a;
-
           prepareRow(row);
           const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
           const notNullHeaderColumns = visibleColumns.filter(column => typeof column.Header !== 'function' && column.Header !== null && !column.isSubRow);
-          let customStyle = {};
-          let CustomRow;
-
-          if (customRows && customRows(row).length) {
-            for (let i = 0; i < customRows(row).length; i++) {
-              if (customRows(row)[i].predicate) {
-                customStyle = (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.css;
-
-                CustomRow = () => {
-                  var _a;
-
-                  return (_a = customRows(row)[i]) === null || _a === void 0 ? void 0 : _a.Row(row.values);
-                };
-              }
-            }
-          }
-
+          const {
+            customStyle
+          } = getCustomRows(row);
+          const {
+            CustomRow
+          } = getCustomRows(row, () => renderTableRow(row, customStyle));
           return jsxs(React__default.Fragment, {
             children: [CustomRow ? jsx(CustomRow, {
               style: customStyle
-            }, void 0) : jsx(TableRow$1, Object.assign({
-              css: customStyle
-            }, row.getRowProps(), {
-              children: row.cells.filter(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(cell => {
-                var _a;
-
-                return !((_a = cell.column) === null || _a === void 0 ? void 0 : _a.isMobileOnly) && jsx(TableCell$1, Object.assign({}, cell.getCellProps({
-                  style: {
-                    minWidth: cell.column.minWidth,
-                    width: cell.column.width,
-                    maxWidth: cell.column.maxWidth
-                  }
-                }), {
-                  css: {
-                    '@md': {
-                      height: rowHeight
-                    }
-                  }
-                }, {
-                  children: jsx(TableCellContent$1, Object.assign({
-                    align: align
-                  }, {
-                    children: cell.render('Cell')
-                  }), void 0)
-                }), void 0);
-              })
-            }), void 0), subRowCells.map(cell => {
+            }, void 0) : renderTableRow(row, customStyle), subRowCells.map(cell => {
               var _a;
 
               return jsx(TableRow$1, Object.assign({
@@ -28286,7 +28592,8 @@ function EditableTable(props) {
     css: props === null || props === void 0 ? void 0 : props.css,
     instance: instance,
     emptyDataMessage: emptyDataMessage,
-    showCheckbox: showCheckbox
+    showCheckbox: showCheckbox,
+    customRows: customRows
   }, void 0);
 }
 
@@ -32125,4 +32432,4 @@ const useToggle = initialValue => {
   return useReducer(toggleReducer, initialValue);
 };
 
-export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };
+export { ADVANCE_PICKER, Accordion, AccordionContent, AccordionItem, AccordionTrigger, AdvancedOption, AlertDialog, AlertDialogCancel, AlertDialogConfirm, AlertDialogContent, AlertDialogDescription, AlertDialogFunction, AlertDialogRoot, AlertDialogTitle, AlertDialogTrigger, Avatar, BOTTOM_LEFT_POSITION, BOTTOM_RIGHT_POSITION, Badge, Banner, BannerClose, BannerDescription, BannerLink, BannerTitle, Box, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button$3 as Button, ButtonDropdown, ButtonGroup$1 as ButtonGroup, ButtonGroupItem, ButtonPrimitive, Card, CardComponent, CardLineColor, CheckboxGroup, CheckboxTable, ColorPicker$1 as ColorPicker, Colors, ContentEditor, ContextMenu, ContextMenuItem, ContextMenuSeparator, ContextMenuTrigger, DateColumn, DatePicker, DecimalColumn, Device as DevicePreview, Dialog, DialogClose, DialogContent, DialogDescription, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerBody, DrawerClose, DrawerCloseButton, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuArrow, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger, EditableTable, Flex$1 as Flex, FormGroup, FormHelper, FormLabel, Grid, GridItem, Heading, IconButton, IconContainer, Image, ImageDevicePreview, InputCheckbox, InputColorPicker, InputCombobox, InputCounter, InputCreatable, InputDatePicker, InputGroup, InputLeftAddon, InputLeftElement, InputMapPicker, InputNumber, InputOTP, InputPrefix, InputRadio, InputRadioGroup, InputResourceList, InputRightAddon, InputRightElement, InputSearchbox, InputSelect, InputSelectCheck, InputSelectTag, InputSuffix, InputSwitch, TagsInput as InputTags, InputText, InputTextArea, InputTimePicker, LAST_7_DAYS, LAST_MONTH, LAST_TWO_MONTHS, LAST_WEEK, LineChart, Link, LoadingBar, MajooProvider, MapPicker, MobileTable, ModalDialog, ModalDialogContent, ModalDialogFooter, ModalDialogTitle, ModalDialogTrigger, NativeTimePicker, NotificationBadge, OptionWrapper$2 as OptionWrapper, PageContainer, PageDialog, PageDialogContent, PageDialogFooter, PageDialogTitle, PageDialogTrigger, Pagination, Paper, PaperComponent, Paragraph, Popover, PopoverClose, PopoverContent, PopoverTrigger, PriceColumn, Progress$1 as Progress, ProgressIndicator, RANGE_PICKER, ResendOTP, RightSlot, rowExpanderColumn as RowExpanderColumn, rowMenuColumn as RowMenuColumn, rowSelectionColumn as RowSelectionColumn, SINGLE_PICKER, SelectBox, SelectContainer, SelectInputSearch, SelectItem, SelectOption, Separator$2 as Separator, Slider, StepWizard, StepWizardContext, StyledBox, StyledDropdown, StyledInput$1 as StyledInput, StyledSpan, StyledTitle$2 as StyledTitle, THIS_MONTH, THIS_WEEK, TODAY, TOP_LEFT_POSITION, TOP_RIGHT_POSITION, Table, TableBody$3 as TableBody, TableCell$3 as TableCell, TableColumn, TableContent$3 as TableContent, TableFoot$2 as TableFoot, TableFootCell$2 as TableFootCell, TableFootRow$2 as TableFootRow, TableHead$3 as TableHead, TableHeadCellContent, TableHeaderCellContainer, TableOfContent, TableOfContentPage, TableRow$3 as TableRow, Tabs$1 as Tabs, TabsContent$1 as TabsContent, TabsList$1 as TabsList, TabsTrigger$1 as TabsTrigger, Tag, TagStatus, Text$1 as Text, TextVariantsEnum, TimePicker, ToastContext, Tooltip$1 as Tooltip, UPDATE_PICKER, Upload, YESTERDAY, addOnCellStyle, advancePickerDate, advancePickerOptions, defaultFetchDataParams, pickerReducer, useListOption, useToggle };