@ctlyst.id/internal-ui 2.1.10 → 2.1.11-canary.1

package/dist/internal-ui.cjs.development.js

@@ -884,27 +884,39 @@ const Counter = ({
 };
 
 /* eslint-disable react-hooks/rules-of-hooks */
-const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const {
-    columns,
-    dataSource = [],
-    isLoading,
-    withSelectedRow,
-    onSelectedRow,
-    onSort,
-    sortDescFirst,
-    styles,
-    sortingState,
-    headerSticky,
-    manualSorting,
-    onRowClick
-  } = props;
+const getCommonPinningStyles = column => {
+  const isPinned = column.getIsPinned();
+  const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
+  const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
+  return {
+    // eslint-disable-next-line no-nested-ternary
+    boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : isFirstRightPinnedColumn ? '4px 0 4px -4px gray inset' : undefined,
+    left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
+    right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
+    opacity: isPinned ? 0.95 : 1,
+    position: isPinned ? 'sticky' : 'relative',
+    width: column.getSize(),
+    zIndex: isPinned ? 1 : 0
+  };
+};
+const useDataTable = ({
+  columns,
+  dataSource = [],
+  withSelectedRow,
+  onSelectedRow,
+  onSort,
+  sortDescFirst,
+  sortingState,
+  manualSorting,
+  columnPinning
+}) => {
   const [isFirstLoad, setIsFirstLoad] = React.useState(true);
   const [sorting, setSorting] = React.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
   const [rowSelection, onRowSelectionChange] = React.useState({});
   const dataColumns = React.useMemo(() => columns, [columns]);
   const checkboxColumn = React.useMemo(() => [{
     id: 'select',
+    size: 32,
     header: ({
       table
     }) => /*#__PURE__*/React.createElement(react.Checkbox, Object.assign({
@@ -942,6 +954,7 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
     manualSorting,
     sortDescFirst,
     state: {
+      columnPinning,
       sorting,
       rowSelection
     },
@@ -961,9 +974,6 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
       onSelectedRow(rowData);
     }
   }, [flatRows]);
-  React.useImperativeHandle(ref, () => ({
-    toggleAllRowsSelected
-  }));
   React.useEffect(() => {
     if (onSort && !isFirstLoad) {
       onSort(sorting);
@@ -972,19 +982,57 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
   React.useEffect(() => {
     setIsFirstLoad(false);
   }, []);
-  return /*#__PURE__*/React.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React.createElement(react.Flex, {
-    w: "100%",
-    h: "100%",
-    pos: "absolute",
-    bg: "white",
+  return {
+    table,
+    toggleAllRowsSelected,
+    generateColumn
+  };
+};
+const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    isLoading,
+    styles,
+    headerSticky,
+    onRowClick
+  } = props;
+  const {
+    table,
+    toggleAllRowsSelected,
+    generateColumn
+  } = useDataTable(props);
+  React.useImperativeHandle(ref, () => ({
+    toggleAllRowsSelected
+  }));
+  return /*#__PURE__*/React.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, (headerSticky ? {
+    position: 'sticky',
+    top: 0,
+    bg: 'white',
+    zIndex: 1
+  } : {})), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
+    mx: "2",
+    key: headerGroup.id
+  }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map((header, index) => /*#__PURE__*/React.createElement(react.Th, Object.assign({
+    key: header.id,
+    colSpan: header.colSpan,
+    width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`
+  }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/React.createElement(react.Flex, {
+    "data-test-id": "CT_component_data-table_loader",
+    textTransform: "capitalize",
     align: "center",
-    justify: "center",
-    zIndex: 2
-  }, /*#__PURE__*/React.createElement(react.Spinner, {
-    color: "primary.500",
-    thickness: "4px",
-    size: "lg"
-  })), /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, (headerSticky ? {
+    gap: 2
+  }, reactTable.flexRender(header.column.columnDef.header, header.getContext()))))))), /*#__PURE__*/React.createElement(react.Tbody, null, [...Array(5)].map(num => /*#__PURE__*/React.createElement(react.Tr, {
+    mx: "2",
+    key: num
+  }, [...Array(generateColumn().length)].map(i => /*#__PURE__*/React.createElement(react.Td, {
+    key: i,
+    width: 210
+  }, /*#__PURE__*/React.createElement(react.Skeleton, {
+    startColor: "gray.50",
+    endColor: "gray.100",
+    key: i,
+    h: "30px",
+    w: "100%"
+  }))))))), /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, (headerSticky ? {
     position: 'sticky',
     top: 0,
     bg: 'white',
@@ -992,11 +1040,15 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
   } : {})), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
     key: headerGroup.id,
     bg: react.useColorModeValue('initial', 'ebony-clay.700')
-  }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map(header => {
+  }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map((header, index) => {
     var _ref;
     return /*#__PURE__*/React.createElement(react.Th, Object.assign({
       key: header.id,
-      colSpan: header.colSpan
+      colSpan: header.colSpan,
+      width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
+      style: {
+        ...getCommonPinningStyles(header.column)
+      }
     }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/React.createElement(react.Flex, {
       "data-test-id": `CT_Container_TableHeader_${header.id}`,
       textTransform: "capitalize",
@@ -1014,27 +1066,54 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
     }[header.column.getIsSorted()]) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/React.createElement(icons.UpDownIcon, {
       h: 2
     }))));
-  })))), /*#__PURE__*/React.createElement(react.Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
-    "data-test-id": "6aZAeefGHBA2oG1wLuv-L",
-    key: row.id
-  }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
-    css: react$1.css`
-                &:last-child {
-                  td {
-                    border-bottom: none;
+  })))), /*#__PURE__*/React.createElement(react.Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => {
+    const trRef = React.useRef();
+    return /*#__PURE__*/React.createElement(react.Tr, Object.assign({
+      "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
+      tabindex: "0",
+      ref: trRef,
+      key: row.id
+    }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
+      css: react$1.css`
+                  &:last-child {
+                    td {
+                      border-bottom: none;
+                    }
                   }
-                }
-              `,
-    onClick: () => {
-      if (onRowClick) {
-        onRowClick(row.original);
+                `,
+      onMouseDown: () => {
+        var _trRef$current;
+        (_trRef$current = trRef.current) === null || _trRef$current === void 0 ? void 0 : _trRef$current.setAttribute('data-active', 'true');
+      },
+      onMouseUp: () => {
+        var _trRef$current2;
+        (_trRef$current2 = trRef.current) === null || _trRef$current2 === void 0 ? void 0 : _trRef$current2.removeAttribute('data-active');
+      },
+      onClick: () => {
+        if (onRowClick) {
+          onRowClick(row.original);
+        }
       }
-    }
-  }), row.getVisibleCells().map(cell => /*#__PURE__*/React.createElement(react.Td, Object.assign({
-    key: cell.id,
-    fontSize: "text.sm",
-    color: react.useColorModeValue('dark.800', 'dark.300')
-  }, styles === null || styles === void 0 ? void 0 : styles.tableCell), reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))))))));
+    }), row.getVisibleCells().map(cell => /*#__PURE__*/React.createElement(react.Td, Object.assign({
+      "data-test-id": `CT_Component_TableCell_${cell.id}`,
+      key: cell.id,
+      fontSize: "text.sm",
+      color: react.useColorModeValue('dark.800', 'dark.300'),
+      style: {
+        ...getCommonPinningStyles(cell.column)
+      }
+    }, styles === null || styles === void 0 ? void 0 : styles.tableCell), /*#__PURE__*/React.createElement(react.Box, {
+      tabIndex: 0,
+      display: "inline-block",
+      cursor: "auto",
+      "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
+      onMouseUp: e => e.stopPropagation(),
+      onMouseDown: e => e.stopPropagation(),
+      onClick: e => {
+        e.stopPropagation();
+      }
+    }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())))));
+  }))));
 });
 /* eslint-disable react/default-props-match-prop-types */
 DataTable.defaultProps = {
@@ -1052,7 +1131,8 @@ DataTable.defaultProps = {
   sortingState: [],
   sortDescFirst: false,
   headerSticky: false,
-  onRowClick: undefined
+  onRowClick: undefined,
+  columnPinning: undefined
 };
 
 const Styles = () => {
@@ -4657,7 +4737,8 @@ const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
   table: {
     fontVariantNumeric: 'lining-nums tabular-nums',
     borderCollapse: 'collapse',
-    width: 'full'
+    width: 'full',
+    tableLayout: 'fixed'
   },
   th: {
     fontFamily: 'heading',
@@ -4668,11 +4749,39 @@ const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
     height: '50px',
     color: /*#__PURE__*/themeTools.mode('neutral.900', 'white'),
     fontSize: 'text.sm',
-    lineHeight: '18px'
+    lineHeight: '18px',
+    backgroundColor: 'neutral.50',
+    '&:first-of-type': {
+      pl: 6
+    },
+    '&:last-of-type': {
+      pr: 6
+    }
+  },
+  tbody: {
+    tr: {
+      cursor: 'pointer',
+      _hover: {
+        backgroundColor: 'neutral.200'
+      },
+      '&[data-active="true"]': {
+        backgroundColor: 'neutral.100'
+      }
+    }
   },
   td: {
+    backgroundColor: 'neutral.50',
     textAlign: 'start',
-    height: '56px'
+    height: '56px',
+    '&:first-of-type': {
+      pl: 6
+    },
+    '&:last-of-type': {
+      pr: 6
+    },
+    _disabled: {
+      opacity: 0.5
+    }
   },
   caption: {
     mt: 4,
@@ -4767,14 +4876,14 @@ const variants$4 = {
 const sizes$2 = {
   sm: /*#__PURE__*/definePartsStyle$7({
     th: {
-      px: '4',
-      py: '1',
+      px: '2',
+      py: '4',
       lineHeight: '4',
       fontSize: 'xs'
     },
     td: {
-      px: '4',
-      py: '2',
+      px: '2',
+      py: '4',
       fontSize: 'sm',
       lineHeight: '4'
     },
@@ -4789,24 +4898,12 @@ const sizes$2 = {
       px: '2',
       py: '4',
       lineHeight: '4',
-      fontSize: 'xs',
-      '&:first-of-type': {
-        pl: 6
-      },
-      '&:last-of-type': {
-        pr: 6
-      }
+      fontSize: 'xs'
     },
     td: {
       px: '2',
       py: '4',
-      lineHeight: '5',
-      '&:first-of-type': {
-        pl: 6
-      },
-      '&:last-of-type': {
-        pr: 6
-      }
+      lineHeight: '5'
     },
     caption: {
       px: '6',
@@ -4816,14 +4913,14 @@ const sizes$2 = {
   }),
   lg: /*#__PURE__*/definePartsStyle$7({
     th: {
-      px: '8',
+      px: '2',
       py: '4',
       lineHeight: '5',
       fontSize: 'sm'
     },
     td: {
-      px: '8',
-      py: '5',
+      px: '2',
+      py: '4',
       lineHeight: '6'
     },
     caption: {
@@ -6114,6 +6211,7 @@ exports.Uploader = Uploader;
 exports.getTheme = getTheme;
 exports.theme = theme;
 exports.useAlertStyles = useAlertStyles;
+exports.useDataTable = useDataTable;
 exports.useFetcher = useFetcher;
 exports.useInternalUI = useInternalUI;
 //# sourceMappingURL=internal-ui.cjs.development.js.map