@majoo-ui/react 2.0.1 → 2.1.0-rc.1

package/components/table/Table.esm.js

@@ -0,0 +1,1472 @@
+import 'core-js/modules/es.array.includes.js';
+import 'core-js/modules/es.array.push.js';
+import 'core-js/modules/es.iterator.constructor.js';
+import 'core-js/modules/es.iterator.filter.js';
+import 'core-js/modules/es.iterator.for-each.js';
+import 'core-js/modules/es.iterator.map.js';
+import 'core-js/modules/es.json.parse.js';
+import 'core-js/modules/es.json.stringify.js';
+import { __rest } from 'tslib';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useState, useCallback, useMemo, useRef, useLayoutEffect, useEffect } from 'react';
+import InfiniteScroll from 'react-infinite-scroller';
+import { useTable, useSortBy, useExpanded, usePagination, useRowSelect, useColumnOrder, useMountedLayoutEffect } from 'react-table';
+import { SortableElement, SortableContainer, arrayMove } from 'react-sortable-hoc';
+import Text from '../text/Text.esm.js';
+import Paragraph from '../paragraph/Paragraph.esm.js';
+import Heading from '../heading/Heading.esm.js';
+import ModalDialog, { ModalDialogTrigger, ModalDialogTitle, ModalDialogContent } from '../modalDialog/ModalDialog.esm.js';
+import InputCheckbox from '../form/components/InputCheckbox/InputCheckbox.esm.js';
+import CheckboxGroup from '../form/components/InputCheckbox/CheckboxGroup.esm.js';
+import { Separator } from '../separator/Separator.esm.js';
+import { styled } from '../../config/stitches.config.esm.js';
+import Box from '../../layout/box/Box.esm.js';
+import Flex from '../../layout/flex/Flex.esm.js';
+import { removeUndefinedFields } from '../../utils/object.esm.js';
+import useMediaQuery from '../../utils/useMediaQuery.esm.js';
+import { ConditionalWrapper } from '../../wrapper/ConditionalWrapper.esm.js';
+import { ContextMenuTrigger, ContextMenu, ContextMenuItem, ContextMenuSeparator } from '../contextMenu/ContextMenu.esm.js';
+import MobileTable from './MobileTable.esm.js';
+import { useSticky } from 'react-table-sticky';
+import { useTranslation } from 'react-i18next';
+import { useVirtual } from 'react-virtual';
+import { PlusPrimitive } from '@majoo-ui/icons';
+import '../scrollSync/ScrollSync.esm.js';
+import { ScrollSyncNode } from '../scrollSync/ScrollSyncNode.esm.js';
+import rowDraggableColumn from './components/columns/RowDraggableColumn.esm.js';
+import IconButton from '../iconButton/IconButton.esm.js';
+import { Popover, PopoverTrigger, PopoverContent } from '../popover/Popover.esm.js';
+import Pagination from '../pagination/Pagination.esm.js';
+
+const TableContainer = styled('div', {
+  display: 'block',
+  flexDirection: 'column',
+  maxWidth: '100%',
+  position: 'relative',
+  height: '100%',
+  overflow: 'auto',
+  variants: {
+    decoration: {
+      true: {
+        overflow: 'unset'
+      }
+    }
+  }
+});
+const TableContent = styled('table', {
+  width: '100%',
+  borderSpacing: 0,
+  borderCollapse: 'collapse',
+  '& *[data-sticky-td="true"]': {
+    backgroundColor: '$bgHeader'
+  }
+});
+const TableHead = styled('thead', {
+  position: 'sticky',
+  top: 0,
+  zIndex: '$docked',
+  backgroundColor: '$bgHeader',
+  boxShadow: '0 4px 4px rgba(0, 0, 0, 0.025)',
+  borderBottom: '1pt solid $bgBorder',
+  color: '$textPrimary',
+  variants: {
+    isInfiniteScroll: {
+      true: {
+        top: '-1px'
+      }
+    },
+    hiddenHeader: {
+      true: {
+        visibility: 'collapse'
+      }
+    }
+  }
+});
+const TableHeadRow = styled('tr');
+const TableHeadCell = styled('th', {
+  height: '64px'
+});
+const TableEmptyStateDoodle = styled('div', {
+  width: 'min(200px, 50vw, 25vh)',
+  height: 'min(200px, 50vw, 25vh)',
+  maxWidth: '100%',
+  flexShrink: 0,
+  backgroundSize: 'contain',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  variants: {
+    asset: {
+      emptyData: {
+        backgroundImage: 'var(--brandAssets-emptyData)'
+      },
+      emptySearchData: {
+        backgroundImage: 'var(--brandAssets-emptySearchData)'
+      }
+    }
+  }
+});
+const TableHeaderCellContainer = styled(Flex, {
+  flexDirection: 'row',
+  alignItems: 'center',
+  gap: '$spacing-03',
+  userSelect: 'none',
+  size: '100%',
+  minWidth: 0,
+  padding: '0 $spacing-03',
+  '&::after': {
+    size: '16px',
+    content: `url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`,
+    margin: '0 $spacing-02 $spacing-01 0',
+    opacity: 1,
+    '@lg': {
+      content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23404545'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`,
+      marginRight: 0,
+      opacity: 0
+    }
+  },
+  '&:hover': {
+    backgroundColor: '$bgGray',
+    '&::after': {
+      '@lg': {
+        opacity: 1
+      }
+    }
+  },
+  variants: {
+    isSortedDesc: {
+      false: {
+        backgroundColor: '$bgGray',
+        '&::after': {
+          content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z' transform='rotate(180 12 10.9998)' /%3E%3C/g%3E%3C/svg%3E")`,
+          size: '16px',
+          margin: '0 $spacing-03 $spacing-03 0',
+          opacity: 1,
+          '@lg': {
+            content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23404545'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z' transform='rotate(180 12 10.9998)' /%3E%3C/g%3E%3C/svg%3E")`,
+            marginRight: 0
+          }
+        }
+      },
+      true: {
+        backgroundColor: '$bgGray',
+        '&::after': {
+          content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23A5ABAB'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z'/%3E%3C/g%3E%3C/svg%3E")`,
+          size: '16px',
+          margin: '0 $spacing-03 $spacing-03 0',
+          opacity: 1,
+          '@lg': {
+            content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23404545'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z'/%3E%3C/g%3E%3C/svg%3E")`,
+            marginRight: 0
+          }
+        }
+      }
+    },
+    unsortable: {
+      true: {
+        '&::after': {
+          opacity: 0
+        },
+        '@lg': {
+          '&:hover': {
+            backgroundColor: '$bgGray',
+            '&::after': {
+              opacity: 0
+            }
+          }
+        }
+      }
+    },
+    isMobile: {
+      true: {
+        padding: '0',
+        justifyContent: 'space-between',
+        gap: 0
+      }
+    },
+    isToggleable: {
+      true: {}
+    },
+    isToggled: {
+      true: {
+        '&::after': {
+          opacity: 1
+        }
+      }
+    },
+    darkTheme: {
+      true: {
+        '&::after': {
+          content: `url(data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`,
+          '@lg': {
+            content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m9.38 3.95 2.462 3.134c.338.43.098 1.166-.38 1.166H6.538c-.478 0-.718-.736-.38-1.166L8.62 3.95c.21-.267.55-.267.76 0zM9.38 14.05l2.462-3.134c.338-.43.098-1.166-.38-1.166H6.538c-.478 0-.718.736-.38 1.166L8.62 14.05c.21.267.55.267.76 0z'/%3E%3C/g%3E%3C/svg%3E")`
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [{
+    unsortable: true,
+    isToggleable: true,
+    css: {
+      cursor: 'pointer',
+      '@lg': {
+        '&:hover': {
+          '&::after': {
+            opacity: 1
+          }
+        }
+      }
+    }
+  }, {
+    isToggleable: true,
+    isMobile: true,
+    css: {
+      '&::after': {
+        opacity: 1
+      }
+    }
+  }, {
+    isSortedDesc: true,
+    darkTheme: true,
+    css: {
+      '&::after': {
+        content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z'/%3E%3C/g%3E%3C/svg%3E")`,
+        '@lg': {
+          content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z'/%3E%3C/g%3E%3C/svg%3E")`
+        }
+      }
+    }
+  }, {
+    isSortedDesc: false,
+    darkTheme: true,
+    css: {
+      '&::after': {
+        content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z' transform='rotate(180 12 10.9998)' /%3E%3C/g%3E%3C/svg%3E")`,
+        '@lg': {
+          content: `url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18'%3E%3Cg fill='%23FFFFFF'%3E%3Cpath d='m12.51,8.27l3.28,4.17c0.45,0.58 0.13,1.56 -0.51,1.56l-6.56,0c-0.64,0 -0.96,-0.98 -0.51,-1.56l3.28,-4.17c0.28,-0.36 0.74,-0.36 1.02,0z' transform='rotate(180 12 10.9998)' /%3E%3C/g%3E%3C/svg%3E")`
+        }
+      }
+    }
+  }]
+});
+const TableHeadCellContent = styled(Heading, {
+  backgroundColor: 'transparent',
+  userSelect: 'none',
+  textAlign: 'start',
+  position: 'relative',
+  '& > *': {
+    display: 'inline-flex'
+  },
+  '& > span:last-child': {
+    paddingLeft: '$spacing-03'
+  },
+  variants: {
+    isMobile: {
+      true: {
+        width: '100%'
+      }
+    }
+  }
+});
+const TableBody = styled('tbody', {});
+const TableRow = styled('tr', {
+  borderBottom: '1pt solid $bgBorder',
+  '&:hover': {
+    backgroundColor: '$bgGray',
+    '& *[data-sticky-td="true"]': {
+      backgroundColor: '$bgGray'
+    }
+  },
+  variants: {
+    subRow: {
+      true: {
+        border: 'none',
+        backgroundColor: '$bgGray',
+        '& td': {
+          padding: '$spacing-02 0 $spacing-02 $spacing-03'
+        }
+      }
+    }
+  }
+});
+const Cell = styled('td');
+const TableCell = styled('td', {
+  height: '68px',
+  fontSize: '$short-content-regular',
+  lineHeight: '$short-content-regular',
+  letterSpacing: '$short-content-regular',
+  fontWeight: '400',
+  color: '$textPrimary',
+  wordBreak: 'break-word',
+  variants: {
+    subCell: {
+      true: {
+        height: 'unset'
+      }
+    },
+    headerSubCell: {
+      true: {
+        fontWeight: '600'
+      }
+    }
+  }
+});
+const TableFoot = styled('tfoot', {
+  position: 'sticky',
+  bottom: 0,
+  backgroundColor: '$bgWhite'
+});
+const TableFootRow = styled('tr');
+const TableFootCell = styled('td', {});
+const addOnCellStyle = id => {
+  switch (id) {
+    case 'expander':
+    case 'menu':
+      return {
+        style: {
+          width: '24px'
+        }
+      };
+    case 'selection':
+      return {
+        style: {
+          width: '16px'
+        }
+      };
+    default:
+      return {};
+  }
+};
+const defaultFetchDataParams = {
+  pageIndex: 0,
+  pageSize: 10
+};
+const stickyPositionStyling = column => {
+  if (typeof column.stickyPosition === 'number') {
+    return column.sticky === 'left' ? {
+      position: 'sticky',
+      left: `${column.stickyPosition}px !important`
+    } : {
+      position: 'sticky',
+      right: `${column.stickyPosition}px !important`
+    };
+  }
+  return {};
+};
+const cssAfter = {
+  position: 'absolute',
+  top: 0,
+  bottom: 0,
+  width: 5,
+  transition: 'box-shadow 0.3s',
+  content: '',
+  pointerEvents: 'none',
+  boxSizing: 'border'
+};
+const stickyShadowStyling = (column, tableScrollPosition, scrollAreaWidth) => {
+  if ((column === null || column === void 0 ? void 0 : column.sticky) && (column === null || column === void 0 ? void 0 : column.shadow)) {
+    return column.sticky === 'left' ? {
+      '&::after': Object.assign(Object.assign({}, cssAfter), {
+        right: 0,
+        boxShadow: tableScrollPosition === 'start' || scrollAreaWidth <= 0 ? 'none' : 'inset 10px 0 10px -10px #00000026'
+      })
+    } : {
+      '&::after': Object.assign(Object.assign({}, cssAfter), {
+        left: 0,
+        boxShadow: tableScrollPosition === 'end' || scrollAreaWidth <= 0 ? 'none' : 'inset -10px 0 10px -10px #00000026'
+      })
+    };
+  }
+  return {};
+};
+const formattingData = (rawData, rowGroup) => {
+  if ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.groupKey) && !(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.isManuallyFormatted)) {
+    const {
+      groupKey
+    } = rowGroup;
+    const modifiedData = [];
+    rawData.forEach((item, index) => {
+      if (item[groupKey] && item[groupKey].length > 0) {
+        const newElement = item[groupKey].map((childItem, index) => Object.assign(Object.assign({}, childItem), {
+          isTopChild: index === 0,
+          parentOriginal: item,
+          isBottomChild: index === item[groupKey].length - 1
+        }));
+        modifiedData.push(...newElement);
+      } else {
+        modifiedData.push(item);
+      }
+    });
+    return modifiedData;
+  }
+  return rawData;
+};
+const defaultEmptyDataProps = (t, isMobile) => ({
+  doodleImage: jsx(TableEmptyStateDoodle, {
+    asset: "emptyData",
+    "aria-hidden": "true"
+  }),
+  title: jsx(Paragraph, {
+    paragraph: "shortContentBold",
+    color: "primary",
+    align: "center",
+    css: {
+      marginTop: isMobile ? 0 : '$spacing-05'
+    },
+    children: t('dataNotAvailableTitle', 'Data tidak tersedia')
+  }),
+  description: !isMobile ? jsxs(Paragraph, {
+    paragraph: "shortContentRegular",
+    color: "secondary",
+    align: "center",
+    children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), ' ', t('dataNotAvailableDescription_2', 'di halaman ini')]
+  }) : jsxs(Text, {
+    variant: "caption",
+    color: "secondary",
+    align: "center",
+    children: [t('dataNotAvailableDescription_1', 'Belum ada data yang dapat ditampilkan'), jsx("br", {}), t('dataNotAvailableDescription_2', 'di halaman ini')]
+  })
+});
+const defaultEmptySearchProps = (t, isMobile, query) => ({
+  doodleImage: jsx(TableEmptyStateDoodle, {
+    asset: "emptySearchData",
+    "aria-hidden": "true"
+  }),
+  title: jsx(Paragraph, {
+    paragraph: "shortContentBold",
+    color: "primary",
+    align: "center",
+    css: {
+      marginTop: isMobile ? 0 : '$spacing-05'
+    },
+    children: t('dataNotAvailableTitleSearch', `Oops... ${query} tidak ditemukan`, {
+      query
+    })
+  }),
+  description: !isMobile ? jsxs(Paragraph, {
+    paragraph: "shortContentRegular",
+    color: "secondary",
+    align: "center",
+    children: [t('dataNotAvailableDescriptionSearch_1', 'Coba lagi dengan memasukkan'), ' ', t('dataNotAvailableDescriptionSearch_2', 'kata kunci yang tepat')]
+  }) : jsxs(Text, {
+    variant: "caption",
+    color: "secondary",
+    align: "center",
+    children: [t('dataNotAvailableDescriptionSearch_1', 'Coba lagi dengan memasukkan'), jsx("br", {}), t('dataNotAvailableDescriptionSearch_2', 'kata kunci yang tepat')]
+  })
+});
+function HeaderMenuOption(props) {
+  const {
+    open,
+    onChange,
+    onOpenChange,
+    children,
+    headerGroups,
+    id,
+    filterHeader: items,
+    rowData
+  } = props;
+  const {
+    headers = []
+  } = (headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[0]) || {};
+  const visibleHeaders = headers.filter(column => !column.isSubRow);
+  const isMobile = useMediaQuery('(max-width: 1024px)');
+  if (isMobile) {
+    return jsxs(ModalDialog, {
+      isMobile: true,
+      children: [jsx(ModalDialogTrigger, {
+        asChild: true,
+        children: children
+      }), jsx(ModalDialogTitle, {
+        children: "Tampilkan Kolom"
+      }), jsx(ModalDialogContent, {
+        css: {
+          overflowY: visibleHeaders.filter(val => typeof val.Header === 'string').length > 8 ? 'scroll' : 'none'
+        },
+        children: jsx(Flex, {
+          direction: "column",
+          gap: 3,
+          css: {
+            padding: '$spacing-04'
+          },
+          children: jsx(CheckboxGroup, {
+            disabled: false,
+            onChange: onChange,
+            defaultValue: visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.map(item => item.id),
+            value: items.length > 0 ? items : visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.map(item => item.id),
+            children: visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.filter(val => typeof val.Header === 'string').map((item, index, row) => jsxs(React.Fragment, {
+              children: [jsx(InputCheckbox, {
+                id: `idx-${index}`,
+                label: item.Header,
+                value: item.id,
+                disabled: index === 0
+              }, index), row.length !== index + 1 && jsx(Separator, {})]
+            }, index))
+          })
+        })
+      })]
+    });
+  }
+  return jsxs(Popover, {
+    onClose: onOpenChange,
+    open: open,
+    sideOffset: 10,
+    placement: "bottom-end",
+    children: [jsx(PopoverTrigger, {
+      disabled: false,
+      children: children
+    }), jsx(PopoverContent, {
+      portalled: false,
+      isMobile: false,
+      children: jsx(Flex, {
+        gap: 5,
+        direction: "column",
+        css: {
+          padding: '$spacing-06 $spacing-05',
+          boxShadow: '$medium',
+          backgroundColor: '$bgWhite',
+          maxHeight: 300,
+          minWidth: 167,
+          width: 'max-content',
+          overflowY: visibleHeaders.filter(val => typeof val.Header === 'string').length > 5 ? 'scroll' : 'none'
+        },
+        children: jsx(CheckboxGroup, {
+          disabled: false,
+          onChange: onChange,
+          defaultValue: visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.map(item => item.id),
+          value: items.length > 0 ? items : visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.map(item => item.id),
+          children: visibleHeaders === null || visibleHeaders === void 0 ? void 0 : visibleHeaders.filter(val => typeof val.Header === 'string').map((item, index, row) => jsxs(React.Fragment, {
+            children: [jsx(InputCheckbox, {
+              id: `idx-${index}`,
+              label: item.Header,
+              value: item.id,
+              disabled: index === 0
+            }), row.length !== index + 1 && jsx(Separator, {})]
+          }, index))
+        })
+      })
+    })]
+  });
+}
+const useLocalStorageState = (key, initialValue) => {
+  const [state, setState] = useState(() => {
+    const storedValue = localStorage.getItem(key);
+    return storedValue ? JSON.parse(storedValue) : initialValue;
+  });
+  useEffect(() => {
+    localStorage.setItem(key, JSON.stringify(state));
+    window.dispatchEvent(new Event('storage'));
+  }, [key, state]);
+  return [state, setState];
+};
+const DraggableRow = SortableElement(_a => {
+  var {
+      children
+    } = _a,
+    restProps = __rest(_a, ["children"]);
+  return jsx(TableRow, Object.assign({}, restProps, {
+    children: children
+  }));
+});
+const DraggableContainer = SortableContainer(_a => {
+  var {
+      children
+    } = _a,
+    restProps = __rest(_a, ["children"]);
+  return jsx(TableBody, Object.assign({}, restProps, {
+    children: children
+  }));
+});
+function Table({
+  columns,
+  data: rawData,
+  keyId = 'id',
+  pageIndex: controlledPageIndex = 0,
+  totalPage,
+  totalData = 0,
+  fetchData,
+  hideDataInfo = false,
+  rowsPerPageOptions = [10, 25, 50, 100],
+  emptyDataMessage = 'Tidak ada data',
+  customEmptyDataProps: emptyDataProps,
+  isLoading = false,
+  css,
+  headerCss,
+  hideHeader,
+  onSelectedChange,
+  isInfiniteScroll = false,
+  hasMoreItems = true,
+  rowLimit = 10,
+  cellAlign = 'center',
+  selectedIds,
+  rowGroup,
+  decoration,
+  hiddenColumns,
+  columnOrder,
+  customRowsStyle,
+  isMobileLayout,
+  showDuplicatedData,
+  onRowClick,
+  hidePagination = false,
+  searchQuery,
+  additionalExceptionIds = [],
+  expanded: controlledExpanded = {},
+  onExpandedChange,
+  id = null,
+  onColumnChange,
+  virtualized = true,
+  withoutLimit = false,
+  additionalHeader,
+  outerContainerCss,
+  autoResetExpanded = true,
+  draggable = false,
+  onDragEnd,
+  isExpandableTree,
+  subRows = 'subRows'
+}) {
+  var _a, _b, _c, _d;
+  const [openMenu, setOpen] = useState(false);
+  const [limit, setLimit] = useState(rowLimit);
+  const [dataRow, setDataRow] = useState({});
+  const [tableScrollPosition, setTableScrollPosition] = useState('start');
+  const [scrollAreaWidth, setScrollAreaWidth] = useState(0);
+  const [stateSelectedRowIds, setStateSelectedRowIds] = useState(selectedIds ? Object.keys(selectedIds) : []);
+  const [filterHeader, setFilterHeader] = useLocalStorageState(`menu:${id}`, []);
+  const handleFilterHeaderChange = useCallback(items => {
+    setFilterHeader(items);
+  }, [filterHeader]);
+  const [filteredHeader, setFilteredHeader] = useState([]);
+  const [hasDarkParent, setHasDarkParent] = useState(false);
+  const {
+    t
+  } = useTranslation('MajooUI/table');
+  const isMobile = useMediaQuery(isMobileLayout === undefined ? '(max-width: 1024px)' : isMobileLayout ? '(max-width: 8000px)' : '(max-width: 0px)');
+  const customEmptyDataProps = searchQuery ? defaultEmptySearchProps(t, isMobile, searchQuery) : emptyDataProps || defaultEmptyDataProps(t, isMobile);
+  const getInitialState = () => {
+    const initialState = {};
+    if (fetchData) {
+      Object.assign(initialState, {
+        pageIndex: controlledPageIndex
+      });
+    }
+    if (selectedIds) {
+      Object.assign(initialState, {
+        selectedRowIds: selectedIds
+      });
+    }
+    if (controlledExpanded) {
+      Object.assign(initialState, {
+        expanded: controlledExpanded
+      });
+    }
+    return Object.keys(initialState).length > 0 ? initialState : undefined;
+  };
+  const records = useMemo(() => formattingData(rawData, rowGroup), [rawData, rowGroup]);
+  const filteredColumns = useMemo(() => {
+    if (draggable) {
+      return [rowDraggableColumn,
+      // remove all action column
+      ...columns.filter(item => !['menu', 'expander', 'multiple-expander', 'selection'].includes(item.id))].map(col => Object.assign(Object.assign({}, col), {
+        unsortable: false
+      }));
+    }
+    return columns;
+  }, [draggable, columns]);
+  const instance = useTable({
+    columns: filteredColumns,
+    data: records,
+    initialState: getInitialState(),
+    state: {
+      expanded: controlledExpanded
+    },
+    manualPagination: !!fetchData,
+    manualSortBy: !!fetchData,
+    defaultCanSort: true,
+    pageCount: totalPage || Math.ceil(totalData / limit),
+    autoResetSortBy: false,
+    autoResetExpanded,
+    onExpandedChange,
+    autoResetPage: false,
+    autoResetSelectedRows: false,
+    getRowId: showDuplicatedData ? undefined : row => row[keyId] || JSON.stringify(row),
+    getSubRows: row => row[subRows] || []
+  }, useSortBy, useExpanded, usePagination, useRowSelect, useSticky, useColumnOrder);
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    visibleColumns,
+    prepareRow,
+    rows,
+    page,
+    gotoPage,
+    setPageSize,
+    toggleRowSelected,
+    toggleAllRowsSelected,
+    state: {
+      pageIndex,
+      pageSize,
+      sortBy,
+      selectedRowIds,
+      expanded
+    },
+    setHiddenColumns,
+    setColumnOrder
+  } = instance;
+  const scrollerRef = useRef(null);
+  const rowVirtualizer = useVirtual({
+    parentRef: scrollerRef,
+    size: page === null || page === void 0 ? void 0 : page.length,
+    overscan: isMobile ? 40 : 20,
+    estimateSize: useCallback(() => isMobile ? 44 : 68, [isMobile])
+  });
+  const {
+    virtualItems: virtualRows,
+    totalSize
+  } = rowVirtualizer;
+  const paddingTop = virtualized ? virtualRows.length > 0 ? ((_a = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[0]) === null || _a === void 0 ? void 0 : _a.start) || 0 : 0 : 0;
+  const paddingBottom = virtualized ? virtualRows.length > 0 ? totalSize - (((_b = virtualRows === null || virtualRows === void 0 ? void 0 : virtualRows[virtualRows.length - 1]) === null || _b === void 0 ? void 0 : _b.end) || 0) : 0 : 0;
+  const doFetchData = (pageIndex, pageSize, sortAccessor = sortBy.length > 0 ? sortBy[0].id : undefined, sortDirection = sortBy.length > 0 ? sortBy[0].desc ? 'DESC' : 'ASC' : undefined) => {
+    const fetchParams = removeUndefinedFields({
+      pageIndex,
+      pageSize,
+      sortAccessor,
+      sortDirection
+    });
+    if (fetchData) fetchData(fetchParams);
+  };
+  const renderFooter = () => jsx(Pagination, {
+    hidePagination: hidePagination || isExpandableTree,
+    hideInputPageSection: false,
+    limit: pageSize,
+    currentPage: pageIndex + 1,
+    totalData: totalData,
+    totalPage: totalPage,
+    onLimitChange: selectedItem => {
+      if (selectedItem) {
+        // always reset page when limit changed
+        gotoPage(0);
+        doFetchData(0, selectedItem);
+        setPageSize(selectedItem);
+        setLimit(selectedItem);
+      }
+    },
+    hideDataInfo: hideDataInfo || isExpandableTree,
+    onPageChange: page => {
+      doFetchData(page - 1, pageSize);
+      gotoPage(page - 1);
+    },
+    rowsPerPageOptions: rowsPerPageOptions,
+    css: {
+      backgroundColor: '$bgWhite',
+      padding: '$spacing-04 0',
+      '@md': {
+        padding: '$spacing-06 $spacing-03'
+      }
+    }
+  });
+  const renderInfiniteScrollWrapper = children => jsx(ConditionalWrapper, {
+    condition: isInfiniteScroll && rawData.length > 0,
+    wrapper: children => jsx(InfiniteScroll, {
+      loadMore: _ => {
+        if (!isLoading) doFetchData(controlledPageIndex + 1, rowLimit);
+      },
+      hasMore: hasMoreItems,
+      threshold: 5,
+      useWindow: false,
+      children: children
+    }),
+    children: children
+  });
+  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, {
+      id: "context-menu-table",
+      children: options === null || options === void 0 ? void 0 : options.map((option, index) => {
+        return jsxs(React.Fragment, {
+          children: [jsx(ContextMenuItem, {
+            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
+          }), index !== (options === null || options === void 0 ? void 0 : options.length) - 1 && jsx(ContextMenuSeparator, {})]
+        }, index);
+      })
+    });
+  };
+  const renderRowDecorationReference = (row, isContextMenu, i) => {
+    return jsx(TableRow, Object.assign({
+      css: {
+        display: 'none'
+      }
+    }, row && (row === null || row === void 0 ? void 0 : row.getRowProps) ? row === null || row === void 0 ? void 0 : row.getRowProps() : {}, {
+      children: row.cells.filter(cell => !cell.column.isSubRow).map(cell => {
+        var _a, _b;
+        const collId = (_a = cell === null || cell === void 0 ? void 0 : cell.column) === null || _a === void 0 ? void 0 : _a.id;
+        const exceptionId = (_b = ['expander', 'multiple-expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _b === void 0 ? void 0 : _b.includes(collId);
+        return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+          css: Object.assign(Object.assign({
+            padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 10px' : '',
+            verticalAlign: cell.column.accessor ? cellAlign : 'center',
+            cursor: onRowClick ? 'pointer' : 'unset'
+          }, stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)),
+          onClick: () => {
+            if (!exceptionId) {
+              handleRowClick(row, i);
+            }
+          },
+          children: jsx(ConditionalWrapper, {
+            condition: isContextMenu && !exceptionId,
+            wrapper: children => jsx(ContextMenuTrigger, {
+              id: "context-menu-table",
+              triggerSide: "left",
+              children: jsx(Box, {
+                css: {
+                  cursor: 'pointer',
+                  padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                },
+                onClick: () => handleRowClick(row, i),
+                children: children
+              })
+            }),
+            children: cell.render('Cell')
+          })
+        }));
+      })
+    }));
+  };
+  const renderTableDecorationChild = child => {
+    return jsxs(TableContent, {
+      children: [jsx(TableHead, {
+        css: {
+          '& > tr > th': {
+            height: '0px !important',
+            '& > div': {
+              marginTop: '-50px'
+            }
+          }
+        },
+        hiddenHeader: true,
+        isInfiniteScroll: isInfiniteScroll,
+        children: headerGroups.map(headerGroup => {
+          const visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
+          return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+            children: visibleHeaders.map((column, index) => {
+              const headerRender = column.render('Header');
+              return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
+                title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+              }) : {
+                onClick: column.onToggle
+              }, {
+                style: {
+                  width: column.colWidth,
+                  maxWidth: column.colMaxWidth,
+                  minWidth: column.colMinWidth
+                }
+              }]), {
+                css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss),
+                children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+                  isSortedDesc: column.isSortedDesc,
+                  unsortable: column.unsortable,
+                  isToggleable: !!column.onToggle,
+                  isToggled: column.isToggled,
+                  darkTheme: hasDarkParent,
+                  children: jsx(TableHeadCellContent, {
+                    heading: "headerTable",
+                    children: headerRender.toUpperCase()
+                  })
+                }) : headerRender
+              }));
+            })
+          }));
+        })
+      }), jsx(TableBody, Object.assign({}, getTableBodyProps(), {
+        children: child
+      }))]
+    });
+  };
+  const handleRowClick = (row, i) => {
+    var _a, _b, _c, _d;
+    let clickable = false;
+    for (let i = 0; i < ((_a = row === null || row === void 0 ? void 0 : row.cells) === null || _a === void 0 ? void 0 : _a.length); i++) {
+      const isMenu = ((_d = (_c = (_b = row === null || row === void 0 ? void 0 : row.cells) === null || _b === void 0 ? void 0 : _b[i]) === null || _c === void 0 ? void 0 : _c.column) === null || _d === void 0 ? void 0 : _d.id) === 'menu';
+      clickable = !isMenu;
+    }
+    clickable && (onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(row, i));
+    setDataRow(row);
+  };
+  useLayoutEffect(() => {
+    if (scrollerRef && scrollerRef.current) {
+      setScrollAreaWidth(scrollerRef.current.scrollWidth - scrollerRef.current.clientWidth);
+    }
+  }, [scrollerRef, visibleColumns]);
+  const firstUpdate = useRef(true);
+  useLayoutEffect(() => {
+    if (firstUpdate.current) {
+      firstUpdate.current = false;
+      return;
+    }
+    onExpandedChange === null || onExpandedChange === void 0 ? void 0 : onExpandedChange(expanded);
+  }, [expanded, onExpandedChange]);
+  useEffect(() => {
+    if (hiddenColumns) setHiddenColumns(hiddenColumns);
+  }, [hiddenColumns]);
+  useEffect(() => {
+    if (columnOrder) setColumnOrder(columnOrder);
+  }, [columnOrder]);
+  useEffect(() => {
+    setPageSize(withoutLimit ? totalData : rowLimit);
+  }, [rowLimit, withoutLimit, totalData]);
+  useEffect(() => {
+    gotoPage(controlledPageIndex);
+  }, [controlledPageIndex]);
+  useEffect(() => {
+    if (rawData && rawData.length > 0) doFetchData(0, isInfiniteScroll ? rowLimit : pageSize);
+  }, [sortBy]);
+  useMountedLayoutEffect(() => {
+    if (rawData && rawData.length > 0 && selectedRowIds && onSelectedChange) {
+      const selectIds = Object.keys(selectedRowIds);
+      if (stateSelectedRowIds.length > 0) {
+        if (selectIds.length < stateSelectedRowIds.length) {
+          const filteredSelectedRowIds = stateSelectedRowIds.filter(item => selectIds.includes(item));
+          setStateSelectedRowIds(filteredSelectedRowIds);
+          !filteredSelectedRowIds.length && (onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange([]));
+        } else {
+          selectIds.forEach(item => {
+            if (!stateSelectedRowIds.includes(item)) {
+              setStateSelectedRowIds(prev => [...prev, item]);
+            }
+          });
+        }
+      } else {
+        setStateSelectedRowIds(selectIds.length ? selectIds : []);
+      }
+    }
+  }, [selectedRowIds]);
+  useMountedLayoutEffect(() => {
+    stateSelectedRowIds.length && (onSelectedChange === null || onSelectedChange === void 0 ? void 0 : onSelectedChange(stateSelectedRowIds));
+  }, [stateSelectedRowIds]);
+  useEffect(() => {
+    var _a;
+    if (isInfiniteScroll && rawData.length <= rowLimit) {
+      (_a = scrollerRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+        top: 0
+      });
+    }
+  }, [rawData]);
+  useEffect(() => {
+    if (selectedIds && rawData.length > 0) {
+      const selectedIdsKeys = Object.keys(selectedIds);
+      if (selectedIdsKeys === null || selectedIdsKeys === void 0 ? void 0 : selectedIdsKeys.length) {
+        selectedIdsKeys.map(key => {
+          toggleRowSelected(key, typeof selectedIds === 'object' ? selectedIds[key] : true);
+          return key;
+        });
+      } else if (!onSelectedChange) {
+        toggleAllRowsSelected(false);
+      }
+    }
+  }, [rawData, selectedIds]);
+  useEffect(() => {
+    if (scrollerRef.current && scrollerRef.current.parentElement) {
+      const parentElement = scrollerRef.current.parentElement;
+      const darkParentDiv = parentElement.closest('div[id*="dark"]');
+      setHasDarkParent(!!darkParentDiv);
+    }
+    const listenStorage = () => {
+      const item = JSON.parse(localStorage.getItem(`menu:${id}`));
+      onColumnChange === null || onColumnChange === void 0 ? void 0 : onColumnChange(item);
+      setFilteredHeader(item);
+    };
+    window.addEventListener('storage', listenStorage);
+    return () => {
+      window.removeEventListener('storage', listenStorage);
+    };
+  }, []);
+  const tableRowData = useMemo(() => {
+    const tableData = isExpandableTree ? rows : page;
+    return virtualized ? isInfiniteScroll ? virtualRows : tableData : tableData;
+  }, [virtualized, isExpandableTree, isInfiniteScroll, rows, page, virtualRows]);
+  const onSortEnd = ({
+    oldIndex,
+    newIndex
+  }) => {
+    onDragEnd(arrayMove(records, oldIndex, newIndex));
+  };
+  const cssTableCell = {
+    backgroundColor: '$bgWhite'
+  };
+  return jsxs(Box, {
+    css: Object.assign({
+      position: 'relative',
+      width: `${css && css.width || '100%'}`,
+      height: 'fit-content'
+    }, outerContainerCss),
+    children: [isLoading && jsx(Flex, {
+      justify: "center",
+      align: "center",
+      css: {
+        zIndex: '$docked',
+        position: 'absolute',
+        inset: 0,
+        top: isMobile ? 40 : 64,
+        width: '100%',
+        height: `calc(100% - ${isInfiniteScroll ? 0 : '72px'})`,
+        backgroundColor: '$bgWhite',
+        opacity: 0.8
+      },
+      children: jsx(Text, {
+        variant: "caption",
+        children: "Loading .... "
+      })
+    }), !isMobile || id ? jsxs(Fragment, {
+      children: [jsxs(Box, {
+        css: {
+          position: 'relative'
+        },
+        children: [jsx(ScrollSyncNode, {
+          scroll: "horizontal-only",
+          children: jsxs(TableContainer, {
+            id: "table-container",
+            css: css,
+            ref: scrollerRef,
+            decoration: Boolean(decoration),
+            onScroll: e => {
+              const scrollPosition = e.currentTarget.scrollLeft;
+              if (scrollPosition < 3) {
+                setTableScrollPosition('start');
+              } else if (scrollPosition > scrollAreaWidth - 3) {
+                setTableScrollPosition('end');
+              } else {
+                setTableScrollPosition('between');
+              }
+            },
+            children: [jsx(ConditionalWrapper, {
+              condition: !decoration,
+              wrapper: child => renderInfiniteScrollWrapper(child),
+              children: jsxs(TableContent, Object.assign({}, getTableProps(), {
+                children: [jsx(TableHead, {
+                  hiddenHeader: hideHeader,
+                  css: headerCss,
+                  isInfiniteScroll: isInfiniteScroll,
+                  children: headerGroups.map(headerGroup => {
+                    let visibleHeaders = headerGroup.headers.filter(column => !column.isSubRow);
+                    if (filteredHeader.length > 0 || filterHeader.length > 0) {
+                      visibleHeaders = visibleHeaders.filter(item => filteredHeader.includes(item.id) || filterHeader.includes(item.id));
+                    }
+                    return jsx(TableHeadRow, Object.assign({}, headerGroup.getHeaderGroupProps(), {
+                      children: visibleHeaders.map((column, index) => {
+                        const headerRender = column.render('Header');
+                        return jsx(TableHeadCell, Object.assign({}, column.getHeaderProps(props => [props, !column.unsortable ? column.getSortByToggleProps({
+                          title: t('sortColumnTitle', 'Urutkan') || 'Urutkan'
+                        }) : {
+                          onClick: column.onToggle
+                        }, {
+                          style: {
+                            width: column.colWidth,
+                            maxWidth: column.colMaxWidth,
+                            minWidth: column.colMinWidth
+                          }
+                        }]), {
+                          css: Object.assign(Object.assign(Object.assign(Object.assign({}, stickyPositionStyling(column)), stickyShadowStyling(column, tableScrollPosition, scrollAreaWidth)), column.headerCss), {
+                            position: 'sticky',
+                            zIndex: column.sticky ? '5 !important' : 3,
+                            top: 0
+                          }),
+                          children: typeof headerRender === 'string' ? jsx(TableHeaderCellContainer, {
+                            isSortedDesc: column.isSortedDesc,
+                            unsortable: id ? true : column.unsortable,
+                            isToggleable: !!column.onToggle,
+                            isToggled: column.isToggled,
+                            darkTheme: hasDarkParent,
+                            css: {
+                              width: column.colWidth,
+                              maxWidth: column.colMaxWidth,
+                              minWidth: column.colMinWidth
+                            },
+                            children: jsx(TableHeadCellContent, {
+                              heading: "headerTable",
+                              children: headerRender.toUpperCase()
+                            })
+                          }) : headerRender
+                        }));
+                      })
+                    }));
+                  })
+                }), additionalHeader, draggable ? jsx(DraggableContainer, Object.assign({}, getTableBodyProps(), {
+                  onSortEnd: onSortEnd,
+                  useDragHandle: true,
+                  children: tableRowData.map((dataRow, i) => {
+                    var _a, _b, _c;
+                    const row = virtualized && isInfiniteScroll ? page === null || page === void 0 ? void 0 : page[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
+                    prepareRow(row);
+                    let isContextMenu = Boolean((_a = row.cells.filter(cell => {
+                      var _a, _b;
+                      return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
+                    })) === null || _a === void 0 ? void 0 : _a.length);
+                    let customStyle = {};
+                    let hideRowMenuColumn = false;
+                    if (customRowsStyle && customRowsStyle(row.original).length) {
+                      for (let i = 0; i < customRowsStyle(row.original).length; i++) {
+                        if (customRowsStyle(row.original)[i].predicate) {
+                          const customRowCss = (_b = customRowsStyle(row.original)[i]) === null || _b === void 0 ? void 0 : _b.css;
+                          customStyle = customRowCss || {};
+                          if ((_c = customRowsStyle(row.original)[i]) === null || _c === void 0 ? void 0 : _c.hideRowMenuColumn) {
+                            isContextMenu = false;
+                            hideRowMenuColumn = true;
+                          }
+                        }
+                      }
+                    }
+                    return jsx(React.Fragment, {
+                      children: jsx(DraggableRow, Object.assign({
+                        css: customStyle
+                      }, row && (row === null || row === void 0 ? void 0 : row.getRowProps) ? row === null || row === void 0 ? void 0 : row.getRowProps() : {}, {
+                        index: i,
+                        style: {
+                          zIndex: 999
+                        },
+                        children: row.cells.filter(cell => filteredHeader.length > 0 || filterHeader.length > 0 ? filteredHeader.includes(cell.column.id) || filterHeader.includes(cell.column.id) : cell).filter(cell => !cell.column.isSubRow).map((cell, index, _row) => {
+                          var _a, _b, _c;
+                          let visibleHeaders = (_a = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[0]) === null || _a === void 0 ? void 0 : _a.headers.filter(column => !column.isSubRow);
+                          if (filterHeader.length > 0) {
+                            visibleHeaders = visibleHeaders.filter(item => filterHeader.includes(item.id));
+                          }
+                          const collId = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id;
+                          const exceptionId = (_c = [].concat(additionalExceptionIds)) === null || _c === void 0 ? void 0 : _c.includes(collId);
+                          return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                            css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+                              padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 8px' : '',
+                              verticalAlign: cell.column.accessor ? cellAlign : 'center',
+                              cursor: onRowClick ? 'pointer' : 'unset'
+                            }), stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)), id && {
+                              paddingRight: index + 1 === _row.length ? 30 : null
+                            }),
+                            onClick: () => {
+                              if (!exceptionId) {
+                                handleRowClick(row, i);
+                              }
+                            },
+                            children: jsx(ConditionalWrapper, {
+                              condition: isContextMenu && !exceptionId,
+                              wrapper: children => jsx(ContextMenuTrigger, {
+                                id: "context-menu-table",
+                                triggerSide: "left",
+                                children: jsx(Box, {
+                                  css: {
+                                    cursor: 'pointer',
+                                    padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                                  },
+                                  onClick: () => handleRowClick(row, i),
+                                  children: children
+                                })
+                              }),
+                              children: jsx(Box, {
+                                css: {
+                                  visibility: hideRowMenuColumn && collId === 'menu' ? 'hidden' : 'visible'
+                                },
+                                children: cell.render('Cell')
+                              })
+                            })
+                          }));
+                        })
+                      }))
+                    }, row.id);
+                  })
+                })) : jsxs(TableBody, Object.assign({}, getTableBodyProps(), {
+                  children: [isInfiniteScroll && paddingTop > 0 && jsx("tr", {
+                    children: jsx("td", {
+                      style: {
+                        height: `${paddingTop}px`
+                      }
+                    })
+                  }), (_c = decoration === null || decoration === void 0 ? void 0 : decoration.headerRender) === null || _c === void 0 ? void 0 : _c.call(decoration), decoration && page.map((row, i) => {
+                    var _a;
+                    prepareRow(row);
+                    const isContextMenu = (_a = row.cells.filter(cell => {
+                      var _a, _b;
+                      return (_b = (_a = cell.column) === null || _a === void 0 ? void 0 : _a.options) === null || _b === void 0 ? void 0 : _b.length;
+                    })) === null || _a === void 0 ? void 0 : _a.length;
+                    return i < 1 && renderRowDecorationReference(row, isContextMenu, i);
+                  }), jsx(ConditionalWrapper, {
+                    condition: Boolean(decoration),
+                    wrapper: child => tableRowData && tableRowData.length > 0 ? jsx(TableRow, {
+                      css: {
+                        '&:hover': {
+                          backgroundColor: 'unset'
+                        }
+                      },
+                      children: jsx(TableCell, {
+                        colSpan: (decoration === null || decoration === void 0 ? void 0 : decoration.colSpan) || 12,
+                        children: jsx(Box, {
+                          css: Object.assign({
+                            height: 300,
+                            overflow: 'auto'
+                          }, decoration === null || decoration === void 0 ? void 0 : decoration.css),
+                          children: renderInfiniteScrollWrapper(renderTableDecorationChild(child))
+                        })
+                      })
+                    }) : null,
+                    children: tableRowData.map((dataRow, i) => {
+                      var _a, _b, _c, _d;
+                      const row = virtualized && isInfiniteScroll ? page === null || page === void 0 ? void 0 : page[dataRow === null || dataRow === void 0 ? void 0 : dataRow.index] : dataRow;
+                      prepareRow(row);
+                      const subRowCells = row.cells.filter(cell => cell.column.isSubRow);
+                      const leftAddOnCells = (_a = row.cells.filter(cell => ['expander', 'multiple-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);
+                      let isContextMenu = Boolean((_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 = {};
+                      let hideRowMenuColumn = false;
+                      if (customRowsStyle && customRowsStyle(row.original).length) {
+                        for (let i = 0; i < customRowsStyle(row.original).length; i++) {
+                          if (customRowsStyle(row.original)[i].predicate) {
+                            const customRowCss = (_c = customRowsStyle(row.original)[i]) === null || _c === void 0 ? void 0 : _c.css;
+                            customStyle = customRowCss || {};
+                            if ((_d = customRowsStyle(row.original)[i]) === null || _d === void 0 ? void 0 : _d.hideRowMenuColumn) {
+                              isContextMenu = false;
+                              hideRowMenuColumn = true;
+                            }
+                          }
+                        }
+                      }
+                      return jsxs(React.Fragment, {
+                        children: [((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isTopChild'] && ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender) ? rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.headerRender(row, {
+                          getCellProps: cellProps => ({
+                            css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling({
+                              sticky: cellProps === null || cellProps === void 0 ? void 0 : cellProps.sticky,
+                              stickyPosition: cellProps === null || cellProps === void 0 ? void 0 : cellProps.stickyPosition
+                            })), stickyShadowStyling({
+                              sticky: cellProps === null || cellProps === void 0 ? void 0 : cellProps.sticky,
+                              shadow: cellProps === null || cellProps === void 0 ? void 0 : cellProps.shadow
+                            }, tableScrollPosition, scrollAreaWidth)), cellProps === null || cellProps === void 0 ? void 0 : cellProps.css)
+                          })
+                        }) : jsx(Text, {
+                          variant: "contentButton",
+                          children: row.cells[0].render('Cell')
+                        })), jsx(TableRow, Object.assign({
+                          css: customStyle
+                        }, row && (row === null || row === void 0 ? void 0 : row.getRowProps) ? row === null || row === void 0 ? void 0 : row.getRowProps() : {}, {
+                          children: row.cells.filter(cell => filteredHeader.length > 0 || filterHeader.length > 0 ? filteredHeader.includes(cell.column.id) || filterHeader.includes(cell.column.id) : cell).filter(cell => !cell.column.isSubRow).map((cell, index, _row) => {
+                            var _a, _b, _c;
+                            let visibleHeaders = (_a = headerGroups === null || headerGroups === void 0 ? void 0 : headerGroups[0]) === null || _a === void 0 ? void 0 : _a.headers.filter(column => !column.isSubRow);
+                            if (filterHeader.length > 0) {
+                              visibleHeaders = visibleHeaders.filter(item => filterHeader.includes(item.id));
+                            }
+                            const collId = (_b = cell === null || cell === void 0 ? void 0 : cell.column) === null || _b === void 0 ? void 0 : _b.id;
+                            const exceptionId = (_c = ['expander', 'multiple-expander', 'selection', 'menu', 'eye'].concat(additionalExceptionIds)) === null || _c === void 0 ? void 0 : _c.includes(collId);
+                            return jsx(TableCell, Object.assign({}, cell.getCellProps(addOnCellStyle(cell.column.id)), {
+                              css: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, cssTableCell), {
+                                padding: !isContextMenu || exceptionId ? collId === 'expander' || collId === 'multiple-expander' ? '20px 4px' : '20px 8px' : '',
+                                verticalAlign: cell.column.accessor ? cellAlign : 'center',
+                                cursor: onRowClick ? 'pointer' : 'unset'
+                              }), stickyPositionStyling(cell.column)), stickyShadowStyling(cell.column, tableScrollPosition, scrollAreaWidth)), id && {
+                                paddingRight: index + 1 === _row.length ? 30 : null
+                              }),
+                              onClick: () => {
+                                if (!exceptionId) {
+                                  handleRowClick(row, i);
+                                }
+                              },
+                              children: jsx(ConditionalWrapper, {
+                                condition: isContextMenu && !exceptionId,
+                                wrapper: children => jsx(ContextMenuTrigger, {
+                                  id: "context-menu-table",
+                                  triggerSide: "left",
+                                  children: jsx(Box, {
+                                    css: {
+                                      cursor: 'pointer',
+                                      padding: cell.column.accessor ? '20px 8px' : '20px 20px'
+                                    },
+                                    onClick: () => handleRowClick(row, i),
+                                    children: children
+                                  })
+                                }),
+                                children: jsx(Box, {
+                                  css: {
+                                    visibility: hideRowMenuColumn && collId === 'menu' ? 'hidden' : 'visible'
+                                  },
+                                  children: cell.render('Cell')
+                                })
+                              })
+                            }));
+                          })
+                        })), row.isExpanded ? subRowCells.map((cell, index) => !cell.column.isCustomSubRow ? jsxs(TableRow, {
+                          subRow: true,
+                          children: [leftAddOnCells.map((_, index) => jsx(Cell, {
+                            css: {
+                              backgroundColor: '$bgGray'
+                            }
+                          }, index)), jsxs(React.Fragment, {
+                            children: [jsx(TableCell, {
+                              subCell: true,
+                              colSpan: notNullHeaderColumns.length > 5 ? 2 : 1,
+                              headerSubCell: true,
+                              css: Object.assign(Object.assign({
+                                paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
+                                paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`,
+                                backgroundColor: '$bgGray'
+                              }, stickyPositionStyling(cell.column)), cell.column.headerCss),
+                              children: jsx(Paragraph, {
+                                paragraph: "shortContentBold",
+                                children: cell.column.Header
+                              })
+                            }), jsx(TableCell, {
+                              subCell: true,
+                              colSpan: visibleColumns.length - subRowCells.length,
+                              css: {
+                                paddingTop: `${index === 0 ? '24px' : '13px'} !important`,
+                                paddingBottom: `${index === subRowCells.length - 1 ? '24px' : '13px'} !important`
+                              },
+                              children: jsx(Paragraph, {
+                                paragraph: "shortContentRegular",
+                                children: cell.render('Cell')
+                              })
+                            })]
+                          }, cell.column.id)]
+                        }, cell.column.id) : cell.render('Cell')) : null, ((rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.showGroupingWhenSorted) || sortBy.length <= 0) && row.original['isBottomChild'] && !!(rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender) && (rowGroup === null || rowGroup === void 0 ? void 0 : rowGroup.footerRender(row, {
+                          getCellProps: cellProps => ({
+                            css: Object.assign(Object.assign(Object.assign({}, stickyPositionStyling({
+                              sticky: cellProps === null || cellProps === void 0 ? void 0 : cellProps.sticky,
+                              stickyPosition: cellProps === null || cellProps === void 0 ? void 0 : cellProps.stickyPosition
+                            })), stickyShadowStyling({
+                              sticky: cellProps === null || cellProps === void 0 ? void 0 : cellProps.sticky,
+                              shadow: cellProps === null || cellProps === void 0 ? void 0 : cellProps.shadow
+                            }, tableScrollPosition, scrollAreaWidth)), cellProps === null || cellProps === void 0 ? void 0 : cellProps.css)
+                          })
+                        }))]
+                      }, row.id);
+                    })
+                  }), (_d = decoration === null || decoration === void 0 ? void 0 : decoration.footerRender) === null || _d === void 0 ? void 0 : _d.call(decoration), isInfiniteScroll && paddingBottom > 0 && jsx("tr", {
+                    children: jsx("td", {
+                      style: {
+                        height: `${paddingBottom}px`
+                      }
+                    })
+                  })]
+                }))]
+              }))
+            }), renderContextMenu()]
+          })
+        }), id && jsxs(Fragment, {
+          children: [!hideHeader && jsx(HeaderMenuOption, {
+            rowData: tableRowData,
+            open: openMenu,
+            id: id,
+            onOpenChange: setOpen,
+            onChange: handleFilterHeaderChange,
+            headerGroups: headerGroups,
+            filterHeader: filterHeader,
+            children: jsx(IconButton, {
+              css: {
+                zIndex: '$docked',
+                position: 'absolute',
+                top: '20px',
+                right: -10,
+                '&:hover': {
+                  backgroundColor: '$btnDisable !important'
+                },
+                '&:active': {
+                  backgroundColor: '$iconDisable !important'
+                },
+                backgroundColor: '$bgBorder !important',
+                padding: 0,
+                boxShadow: '0px 22px 43px 0px rgba(0, 0, 0, 0.08), 0px 9px 24px 0px rgba(0, 0, 0, 0.09), 0px 3px 9px 0px rgba(0, 0, 0, 0.13)'
+              },
+              onClick: () => setOpen(!openMenu),
+              buttonType: "secondary",
+              children: jsx(PlusPrimitive, {
+                size: "20"
+              })
+            })
+          }), jsx(Box, {
+            css: {
+              position: 'absolute',
+              top: 0,
+              right: -10,
+              width: 10,
+              height: '100%',
+              boxShadow: tableScrollPosition === 'end' ? 'none' : '-5px 0px 5px -3px #00000026',
+              backgroundColor: '$bgWhite'
+            }
+          })]
+        })]
+      }), !isInfiniteScroll && jsx(Box, {
+        css: {
+          width: '100%'
+        },
+        children: totalData > 0 || isLoading ? renderFooter() : jsxs(Flex, {
+          align: "center",
+          justify: "center",
+          direction: "column",
+          gap: 3,
+          css: {
+            margin: '56px auto 100px',
+            wordBreak: 'break-word'
+          },
+          children: [customEmptyDataProps.doodleImage, customEmptyDataProps.title, customEmptyDataProps.description]
+        })
+      })]
+    }) : jsx(MobileTable, {
+      virtualized: virtualized,
+      ref: scrollerRef,
+      instance: instance,
+      totalData: totalData,
+      customEmptyDataProps: customEmptyDataProps,
+      isInfiniteScroll: isInfiniteScroll,
+      footer: renderFooter(),
+      infiniteScrollWrapper: renderInfiniteScrollWrapper,
+      isLoading: isLoading,
+      rowGroup: rowGroup,
+      hiddenColumns: hiddenColumns,
+      css: css,
+      customRowsStyle: customRowsStyle,
+      cellAlign: cellAlign,
+      renderContextMenu: renderContextMenu,
+      handleRowClick: handleRowClick,
+      additionalExceptionIds: additionalExceptionIds,
+      hideHeader: hideHeader,
+      decoration: decoration,
+      rowVirtualizer: rowVirtualizer
+    })]
+  });
+}
+//Dummy component for mdx docs purpose only
+const TableColumn = _a => {
+  var {
+      id = '{accessor}',
+      Header = () => null,
+      Cell = ({
+        value
+      }) => String(value),
+      isMobileHeader = false,
+      isSubRow = false,
+      isCustomSubRow = false,
+      unsortable = false,
+      isAction = false
+    } = _a;
+    __rest(_a, ["id", "Header", "Cell", "isMobileHeader", "isSubRow", "isCustomSubRow", "unsortable", "isAction"]);
+  return jsx("div", {});
+};
+
+export { Cell, Table, TableBody, TableCell, TableColumn, TableContent, TableFoot, TableFootCell, TableFootRow, TableHead, TableHeadCellContent, TableHeaderCellContainer, TableRow, addOnCellStyle, defaultEmptyDataProps, defaultFetchDataParams };