@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.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
- padding: "16px 8px 16px 8px",
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
- padding: "16px 8px 16px 8px",
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, _d;
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
- (_d = refTable.current) == null ? void 0 : _d.removeAttribute("pin-right");
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,