@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.
- package/dist/components/data-table/__stories__/datatable.stories.d.ts +2 -1
- package/dist/components/data-table/components/data-table.d.ts +8 -2
- package/dist/components/data-table/index.d.ts +0 -1
- package/dist/config/theme/components/table.d.ts +29 -12
- package/dist/index.d.mts +549 -0
- package/dist/index.d.ts +549 -5
- package/dist/index.js +9768 -5
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +9760 -0
- package/dist/index.mjs.map +1 -0
- package/dist/internal-ui.cjs.development.js +174 -76
- package/dist/internal-ui.cjs.development.js.map +1 -1
- package/dist/internal-ui.cjs.production.min.js +9 -9
- package/dist/internal-ui.cjs.production.min.js.map +1 -1
- package/dist/internal-ui.esm.js +176 -79
- package/dist/internal-ui.esm.js.map +1 -1
- package/package.json +10 -11
- package/dist/components/data-table/types/table-core.d.ts +0 -1
@@ -884,27 +884,39 @@ const Counter = ({
|
|
884
884
|
};
|
885
885
|
|
886
886
|
/* eslint-disable react-hooks/rules-of-hooks */
|
887
|
-
const
|
888
|
-
const
|
889
|
-
|
890
|
-
|
891
|
-
|
892
|
-
|
893
|
-
|
894
|
-
|
895
|
-
|
896
|
-
|
897
|
-
|
898
|
-
|
899
|
-
|
900
|
-
|
901
|
-
|
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
|
976
|
-
|
977
|
-
|
978
|
-
|
979
|
-
|
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
|
-
|
982
|
-
|
983
|
-
|
984
|
-
|
985
|
-
|
986
|
-
|
987
|
-
|
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 =>
|
1018
|
-
|
1019
|
-
|
1020
|
-
|
1021
|
-
|
1022
|
-
|
1023
|
-
|
1024
|
-
|
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
|
-
|
1029
|
-
|
1030
|
-
|
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
|
-
|
1034
|
-
|
1035
|
-
|
1036
|
-
|
1037
|
-
|
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: '
|
4771
|
-
py: '
|
4879
|
+
px: '2',
|
4880
|
+
py: '4',
|
4772
4881
|
lineHeight: '4',
|
4773
4882
|
fontSize: 'xs'
|
4774
4883
|
},
|
4775
4884
|
td: {
|
4776
|
-
px: '
|
4777
|
-
py: '
|
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: '
|
4916
|
+
px: '2',
|
4820
4917
|
py: '4',
|
4821
4918
|
lineHeight: '5',
|
4822
4919
|
fontSize: 'sm'
|
4823
4920
|
},
|
4824
4921
|
td: {
|
4825
|
-
px: '
|
4826
|
-
py: '
|
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
|