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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -884,27 +884,39 @@ const Counter = ({
884
884
  };
885
885
 
886
886
  /* eslint-disable react-hooks/rules-of-hooks */
887
- const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
888
- const {
889
- columns,
890
- dataSource = [],
891
- isLoading,
892
- withSelectedRow,
893
- onSelectedRow,
894
- onSort,
895
- sortDescFirst,
896
- styles,
897
- sortingState,
898
- headerSticky,
899
- manualSorting,
900
- onRowClick
901
- } = props;
887
+ const getCommonPinningStyles = column => {
888
+ const isPinned = column.getIsPinned();
889
+ const isLastLeftPinnedColumn = isPinned === 'left' && column.getIsLastColumn('left');
890
+ const isFirstRightPinnedColumn = isPinned === 'right' && column.getIsFirstColumn('right');
891
+ return {
892
+ // eslint-disable-next-line no-nested-ternary
893
+ boxShadow: isLastLeftPinnedColumn ? '-4px 0 4px -4px gray inset' : isFirstRightPinnedColumn ? '4px 0 4px -4px gray inset' : undefined,
894
+ left: isPinned === 'left' ? `${column.getStart('left')}px` : undefined,
895
+ right: isPinned === 'right' ? `${column.getAfter('right')}px` : undefined,
896
+ opacity: isPinned ? 0.95 : 1,
897
+ position: isPinned ? 'sticky' : 'relative',
898
+ width: column.getSize(),
899
+ zIndex: isPinned ? 1 : 0
900
+ };
901
+ };
902
+ const useDataTable = ({
903
+ columns,
904
+ dataSource = [],
905
+ withSelectedRow,
906
+ onSelectedRow,
907
+ onSort,
908
+ sortDescFirst,
909
+ sortingState,
910
+ manualSorting,
911
+ columnPinning
912
+ }) => {
902
913
  const [isFirstLoad, setIsFirstLoad] = React.useState(true);
903
914
  const [sorting, setSorting] = React.useState(sortingState !== null && sortingState !== void 0 ? sortingState : []);
904
915
  const [rowSelection, onRowSelectionChange] = React.useState({});
905
916
  const dataColumns = React.useMemo(() => columns, [columns]);
906
917
  const checkboxColumn = React.useMemo(() => [{
907
918
  id: 'select',
919
+ size: 32,
908
920
  header: ({
909
921
  table
910
922
  }) => /*#__PURE__*/React.createElement(react.Checkbox, Object.assign({
@@ -942,6 +954,7 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
942
954
  manualSorting,
943
955
  sortDescFirst,
944
956
  state: {
957
+ columnPinning,
945
958
  sorting,
946
959
  rowSelection
947
960
  },
@@ -961,9 +974,6 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
961
974
  onSelectedRow(rowData);
962
975
  }
963
976
  }, [flatRows]);
964
- React.useImperativeHandle(ref, () => ({
965
- toggleAllRowsSelected
966
- }));
967
977
  React.useEffect(() => {
968
978
  if (onSort && !isFirstLoad) {
969
979
  onSort(sorting);
@@ -972,19 +982,57 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
972
982
  React.useEffect(() => {
973
983
  setIsFirstLoad(false);
974
984
  }, []);
975
- return /*#__PURE__*/React.createElement(react.Box, Object.assign({}, props), isLoading && /*#__PURE__*/React.createElement(react.Flex, {
976
- w: "100%",
977
- h: "100%",
978
- pos: "absolute",
979
- bg: "white",
985
+ return {
986
+ table,
987
+ toggleAllRowsSelected,
988
+ generateColumn
989
+ };
990
+ };
991
+ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
992
+ const {
993
+ isLoading,
994
+ styles,
995
+ headerSticky,
996
+ onRowClick
997
+ } = props;
998
+ const {
999
+ table,
1000
+ toggleAllRowsSelected,
1001
+ generateColumn
1002
+ } = useDataTable(props);
1003
+ React.useImperativeHandle(ref, () => ({
1004
+ toggleAllRowsSelected
1005
+ }));
1006
+ 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 ? {
1007
+ position: 'sticky',
1008
+ top: 0,
1009
+ bg: 'white',
1010
+ zIndex: 1
1011
+ } : {})), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
1012
+ mx: "2",
1013
+ key: headerGroup.id
1014
+ }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map((header, index) => /*#__PURE__*/React.createElement(react.Th, Object.assign({
1015
+ key: header.id,
1016
+ colSpan: header.colSpan,
1017
+ width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`
1018
+ }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/React.createElement(react.Flex, {
1019
+ "data-test-id": "CT_component_data-table_loader",
1020
+ textTransform: "capitalize",
980
1021
  align: "center",
981
- justify: "center",
982
- zIndex: 2
983
- }, /*#__PURE__*/React.createElement(react.Spinner, {
984
- color: "primary.500",
985
- thickness: "4px",
986
- size: "lg"
987
- })), /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, (headerSticky ? {
1022
+ gap: 2
1023
+ }, reactTable.flexRender(header.column.columnDef.header, header.getContext()))))))), /*#__PURE__*/React.createElement(react.Tbody, null, [...Array(5)].map(num => /*#__PURE__*/React.createElement(react.Tr, {
1024
+ mx: "2",
1025
+ key: num
1026
+ }, [...Array(generateColumn().length)].map(i => /*#__PURE__*/React.createElement(react.Td, {
1027
+ key: i,
1028
+ width: 210
1029
+ }, /*#__PURE__*/React.createElement(react.Skeleton, {
1030
+ startColor: "gray.50",
1031
+ endColor: "gray.100",
1032
+ key: i,
1033
+ h: "30px",
1034
+ w: "100%"
1035
+ }))))))), /*#__PURE__*/React.createElement(react.Table, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.table), /*#__PURE__*/React.createElement(react.Thead, Object.assign({}, (headerSticky ? {
988
1036
  position: 'sticky',
989
1037
  top: 0,
990
1038
  bg: 'white',
@@ -992,11 +1040,15 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
992
1040
  } : {})), table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React.createElement(react.Tr, Object.assign({
993
1041
  key: headerGroup.id,
994
1042
  bg: react.useColorModeValue('initial', 'ebony-clay.700')
995
- }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map(header => {
1043
+ }, styles === null || styles === void 0 ? void 0 : styles.tableRow), headerGroup.headers.map((header, index) => {
996
1044
  var _ref;
997
1045
  return /*#__PURE__*/React.createElement(react.Th, Object.assign({
998
1046
  key: header.id,
999
- colSpan: header.colSpan
1047
+ colSpan: header.colSpan,
1048
+ width: `${header.getSize() + (index === 0 || index === headerGroup.headers.length - 1 ? 16 : 0)}px`,
1049
+ style: {
1050
+ ...getCommonPinningStyles(header.column)
1051
+ }
1000
1052
  }, styles === null || styles === void 0 ? void 0 : styles.tableColumnHeader), /*#__PURE__*/React.createElement(react.Flex, {
1001
1053
  "data-test-id": `CT_Container_TableHeader_${header.id}`,
1002
1054
  textTransform: "capitalize",
@@ -1014,27 +1066,54 @@ const DataTable = /*#__PURE__*/React.forwardRef((props, ref) => {
1014
1066
  }[header.column.getIsSorted()]) !== null && _ref !== void 0 ? _ref : /*#__PURE__*/React.createElement(icons.UpDownIcon, {
1015
1067
  h: 2
1016
1068
  }))));
1017
- })))), /*#__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({
1018
- "data-test-id": "6aZAeefGHBA2oG1wLuv-L",
1019
- key: row.id
1020
- }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
1021
- css: react$1.css`
1022
- &:last-child {
1023
- td {
1024
- border-bottom: none;
1069
+ })))), /*#__PURE__*/React.createElement(react.Tbody, Object.assign({}, styles === null || styles === void 0 ? void 0 : styles.tableBody), table.getRowModel().rows.map(row => {
1070
+ const trRef = React.useRef();
1071
+ return /*#__PURE__*/React.createElement(react.Tr, Object.assign({
1072
+ "data-test-id": "-RU0hNYGRzeVM3HQ4cXHl",
1073
+ tabindex: "0",
1074
+ ref: trRef,
1075
+ key: row.id
1076
+ }, styles === null || styles === void 0 ? void 0 : styles.tableRow, {
1077
+ css: react$1.css`
1078
+ &:last-child {
1079
+ td {
1080
+ border-bottom: none;
1081
+ }
1025
1082
  }
1026
- }
1027
- `,
1028
- onClick: () => {
1029
- if (onRowClick) {
1030
- onRowClick(row.original);
1083
+ `,
1084
+ onMouseDown: () => {
1085
+ var _trRef$current;
1086
+ (_trRef$current = trRef.current) === null || _trRef$current === void 0 ? void 0 : _trRef$current.setAttribute('data-active', 'true');
1087
+ },
1088
+ onMouseUp: () => {
1089
+ var _trRef$current2;
1090
+ (_trRef$current2 = trRef.current) === null || _trRef$current2 === void 0 ? void 0 : _trRef$current2.removeAttribute('data-active');
1091
+ },
1092
+ onClick: () => {
1093
+ if (onRowClick) {
1094
+ onRowClick(row.original);
1095
+ }
1031
1096
  }
1032
- }
1033
- }), row.getVisibleCells().map(cell => /*#__PURE__*/React.createElement(react.Td, Object.assign({
1034
- key: cell.id,
1035
- fontSize: "text.sm",
1036
- color: react.useColorModeValue('dark.800', 'dark.300')
1037
- }, styles === null || styles === void 0 ? void 0 : styles.tableCell), reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()))))))));
1097
+ }), row.getVisibleCells().map(cell => /*#__PURE__*/React.createElement(react.Td, Object.assign({
1098
+ "data-test-id": `CT_Component_TableCell_${cell.id}`,
1099
+ key: cell.id,
1100
+ fontSize: "text.sm",
1101
+ color: react.useColorModeValue('dark.800', 'dark.300'),
1102
+ style: {
1103
+ ...getCommonPinningStyles(cell.column)
1104
+ }
1105
+ }, styles === null || styles === void 0 ? void 0 : styles.tableCell), /*#__PURE__*/React.createElement(react.Box, {
1106
+ tabIndex: 0,
1107
+ display: "inline-block",
1108
+ cursor: "auto",
1109
+ "data-test-id": `CT_Component_TableCell_Content-${cell.id}`,
1110
+ onMouseUp: e => e.stopPropagation(),
1111
+ onMouseDown: e => e.stopPropagation(),
1112
+ onClick: e => {
1113
+ e.stopPropagation();
1114
+ }
1115
+ }, reactTable.flexRender(cell.column.columnDef.cell, cell.getContext())))));
1116
+ }))));
1038
1117
  });
1039
1118
  /* eslint-disable react/default-props-match-prop-types */
1040
1119
  DataTable.defaultProps = {
@@ -1052,7 +1131,8 @@ DataTable.defaultProps = {
1052
1131
  sortingState: [],
1053
1132
  sortDescFirst: false,
1054
1133
  headerSticky: false,
1055
- onRowClick: undefined
1134
+ onRowClick: undefined,
1135
+ columnPinning: undefined
1056
1136
  };
1057
1137
 
1058
1138
  const Styles = () => {
@@ -4657,7 +4737,8 @@ const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
4657
4737
  table: {
4658
4738
  fontVariantNumeric: 'lining-nums tabular-nums',
4659
4739
  borderCollapse: 'collapse',
4660
- width: 'full'
4740
+ width: 'full',
4741
+ tableLayout: 'fixed'
4661
4742
  },
4662
4743
  th: {
4663
4744
  fontFamily: 'heading',
@@ -4668,11 +4749,39 @@ const baseStyle$7 = /*#__PURE__*/definePartsStyle$7({
4668
4749
  height: '50px',
4669
4750
  color: /*#__PURE__*/themeTools.mode('neutral.900', 'white'),
4670
4751
  fontSize: 'text.sm',
4671
- lineHeight: '18px'
4752
+ lineHeight: '18px',
4753
+ backgroundColor: 'neutral.50',
4754
+ '&:first-of-type': {
4755
+ pl: 6
4756
+ },
4757
+ '&:last-of-type': {
4758
+ pr: 6
4759
+ }
4760
+ },
4761
+ tbody: {
4762
+ tr: {
4763
+ cursor: 'pointer',
4764
+ _hover: {
4765
+ backgroundColor: 'neutral.200'
4766
+ },
4767
+ '&[data-active="true"]': {
4768
+ backgroundColor: 'neutral.100'
4769
+ }
4770
+ }
4672
4771
  },
4673
4772
  td: {
4773
+ backgroundColor: 'neutral.50',
4674
4774
  textAlign: 'start',
4675
- height: '56px'
4775
+ height: '56px',
4776
+ '&:first-of-type': {
4777
+ pl: 6
4778
+ },
4779
+ '&:last-of-type': {
4780
+ pr: 6
4781
+ },
4782
+ _disabled: {
4783
+ opacity: 0.5
4784
+ }
4676
4785
  },
4677
4786
  caption: {
4678
4787
  mt: 4,
@@ -4767,14 +4876,14 @@ const variants$4 = {
4767
4876
  const sizes$2 = {
4768
4877
  sm: /*#__PURE__*/definePartsStyle$7({
4769
4878
  th: {
4770
- px: '4',
4771
- py: '1',
4879
+ px: '2',
4880
+ py: '4',
4772
4881
  lineHeight: '4',
4773
4882
  fontSize: 'xs'
4774
4883
  },
4775
4884
  td: {
4776
- px: '4',
4777
- py: '2',
4885
+ px: '2',
4886
+ py: '4',
4778
4887
  fontSize: 'sm',
4779
4888
  lineHeight: '4'
4780
4889
  },
@@ -4789,24 +4898,12 @@ const sizes$2 = {
4789
4898
  px: '2',
4790
4899
  py: '4',
4791
4900
  lineHeight: '4',
4792
- fontSize: 'xs',
4793
- '&:first-of-type': {
4794
- pl: 6
4795
- },
4796
- '&:last-of-type': {
4797
- pr: 6
4798
- }
4901
+ fontSize: 'xs'
4799
4902
  },
4800
4903
  td: {
4801
4904
  px: '2',
4802
4905
  py: '4',
4803
- lineHeight: '5',
4804
- '&:first-of-type': {
4805
- pl: 6
4806
- },
4807
- '&:last-of-type': {
4808
- pr: 6
4809
- }
4906
+ lineHeight: '5'
4810
4907
  },
4811
4908
  caption: {
4812
4909
  px: '6',
@@ -4816,14 +4913,14 @@ const sizes$2 = {
4816
4913
  }),
4817
4914
  lg: /*#__PURE__*/definePartsStyle$7({
4818
4915
  th: {
4819
- px: '8',
4916
+ px: '2',
4820
4917
  py: '4',
4821
4918
  lineHeight: '5',
4822
4919
  fontSize: 'sm'
4823
4920
  },
4824
4921
  td: {
4825
- px: '8',
4826
- py: '5',
4922
+ px: '2',
4923
+ py: '4',
4827
4924
  lineHeight: '6'
4828
4925
  },
4829
4926
  caption: {
@@ -6114,6 +6211,7 @@ exports.Uploader = Uploader;
6114
6211
  exports.getTheme = getTheme;
6115
6212
  exports.theme = theme;
6116
6213
  exports.useAlertStyles = useAlertStyles;
6214
+ exports.useDataTable = useDataTable;
6117
6215
  exports.useFetcher = useFetcher;
6118
6216
  exports.useInternalUI = useInternalUI;
6119
6217
  //# sourceMappingURL=internal-ui.cjs.development.js.map