@ctlyst.id/internal-ui 3.4.0 → 3.4.2
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/index.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +19 -10
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +18 -10
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
@@ -935,6 +935,7 @@ var isCellDisabled = (row, cellId) => {
|
|
935
935
|
};
|
936
936
|
var getCommonPinningStyles = (column) => {
|
937
937
|
const isPinned = column.getIsPinned();
|
938
|
+
const isFirstLeftPinnedColumn = isPinned === "left" && column.getIsFirstColumn("left");
|
938
939
|
const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
|
939
940
|
const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
|
940
941
|
return {
|
@@ -943,8 +944,12 @@ var getCommonPinningStyles = (column) => {
|
|
943
944
|
position: isPinned ? "sticky" : "relative",
|
944
945
|
zIndex: isPinned ? 1 : 0,
|
945
946
|
backgroundColor: "white",
|
947
|
+
...isFirstLeftPinnedColumn ? {
|
948
|
+
pl: "16px"
|
949
|
+
} : { pl: "8px" },
|
946
950
|
...isLastLeftPinnedColumn ? {
|
947
|
-
|
951
|
+
py: "16px",
|
952
|
+
pr: "8px",
|
948
953
|
"&:after": {
|
949
954
|
transition: "all 0.3s",
|
950
955
|
content: "''",
|
@@ -955,12 +960,13 @@ var getCommonPinningStyles = (column) => {
|
|
955
960
|
top: 0,
|
956
961
|
transform: "translateX(100%)"
|
957
962
|
},
|
958
|
-
"[pin-left=true] &:after": {
|
963
|
+
"[data-pin-left=true] &:after": {
|
959
964
|
boxShadow: "inset 14px 0px 20px -10px #00000010"
|
960
965
|
}
|
961
966
|
} : {},
|
962
967
|
...isFirstRightPinnedColumn ? {
|
963
|
-
|
968
|
+
py: "16px",
|
969
|
+
px: "8px",
|
964
970
|
"&:after": {
|
965
971
|
transition: "all 0.3s",
|
966
972
|
content: "''",
|
@@ -971,7 +977,7 @@ var getCommonPinningStyles = (column) => {
|
|
971
977
|
bottom: "-1px",
|
972
978
|
transform: "translateX(-100%)"
|
973
979
|
},
|
974
|
-
"[pin-right=true] &:after": {
|
980
|
+
"[data-pin-right=true] &:after": {
|
975
981
|
boxShadow: "inset -14px 0px 20px -10px #00000010"
|
976
982
|
}
|
977
983
|
} : {}
|
@@ -1071,7 +1077,7 @@ var useDataTable = ({
|
|
1071
1077
|
};
|
1072
1078
|
};
|
1073
1079
|
var DataTable = React5.forwardRef((props, ref) => {
|
1074
|
-
var _a, _b, _c;
|
1080
|
+
var _a, _b, _c, _d;
|
1075
1081
|
const { isLoading, styles, headerSticky, onRowClick, container, columnPinning } = props;
|
1076
1082
|
const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
|
1077
1083
|
const refTable = React5.useRef(null);
|
@@ -1080,17 +1086,17 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1080
1086
|
}));
|
1081
1087
|
let lastPinnedColumn = 0;
|
1082
1088
|
(_a = refTable.current) == null ? void 0 : _a.addEventListener("scroll", (s) => {
|
1083
|
-
var _a2, _b2, _c2,
|
1089
|
+
var _a2, _b2, _c2, _d2;
|
1084
1090
|
const element = s.currentTarget;
|
1085
1091
|
if (element.scrollLeft > 0) {
|
1086
|
-
(_a2 = refTable.current) == null ? void 0 : _a2.setAttribute("pin-left", "true");
|
1092
|
+
(_a2 = refTable.current) == null ? void 0 : _a2.setAttribute("data-pin-left", "true");
|
1087
1093
|
} else {
|
1088
|
-
(_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("pin-left");
|
1094
|
+
(_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("data-pin-left");
|
1089
1095
|
}
|
1090
1096
|
if (element.scrollLeft < element.scrollWidth - (lastPinnedColumn + element.offsetWidth)) {
|
1091
|
-
(_c2 = refTable.current) == null ? void 0 : _c2.setAttribute("pin-right", "true");
|
1097
|
+
(_c2 = refTable.current) == null ? void 0 : _c2.setAttribute("data-pin-right", "true");
|
1092
1098
|
} else {
|
1093
|
-
(
|
1099
|
+
(_d2 = refTable.current) == null ? void 0 : _d2.removeAttribute("data-pin-right");
|
1094
1100
|
}
|
1095
1101
|
});
|
1096
1102
|
return /* @__PURE__ */ jsx24(
|
@@ -1104,6 +1110,7 @@ var DataTable = React5.forwardRef((props, ref) => {
|
|
1104
1110
|
maxW: "100%",
|
1105
1111
|
w: "full",
|
1106
1112
|
ref: refTable,
|
1113
|
+
...((_d = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _d.length) ? { "data-pin-right": true } : {},
|
1107
1114
|
...container,
|
1108
1115
|
children: isLoading ? /* @__PURE__ */ jsxs8(Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
|
1109
1116
|
/* @__PURE__ */ jsx24(Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx24(Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ jsx24(
|
@@ -7971,6 +7978,7 @@ export {
|
|
7971
7978
|
forwardRef13 as forwardRef,
|
7972
7979
|
getSelectAllCheckboxState,
|
7973
7980
|
getTheme,
|
7981
|
+
id,
|
7974
7982
|
isCellDisabled,
|
7975
7983
|
selectStyles,
|
7976
7984
|
theme4 as theme,
|