@ctlyst.id/internal-ui 3.4.1 → 3.4.2

package/dist/index.js

@@ -1277,6 +1277,7 @@ var isCellDisabled = (row, cellId) => {
 };
 var getCommonPinningStyles = (column) => {
   const isPinned = column.getIsPinned();
+  const isFirstLeftPinnedColumn = isPinned === "left" && column.getIsFirstColumn("left");
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
   return {
@@ -1285,8 +1286,12 @@ var getCommonPinningStyles = (column) => {
     position: isPinned ? "sticky" : "relative",
     zIndex: isPinned ? 1 : 0,
     backgroundColor: "white",
+    ...isFirstLeftPinnedColumn ? {
+      pl: "16px"
+    } : { pl: "8px" },
     ...isLastLeftPinnedColumn ? {
-      padding: "16px 8px 16px 8px",
+      py: "16px",
+      pr: "8px",
       "&:after": {
         transition: "all 0.3s",
         content: "''",
@@ -1297,12 +1302,13 @@ var getCommonPinningStyles = (column) => {
         top: 0,
         transform: "translateX(100%)"
       },
-      "[pin-left=true] &:after": {
+      "[data-pin-left=true] &:after": {
         boxShadow: "inset 14px 0px 20px -10px #00000010"
       }
     } : {},
     ...isFirstRightPinnedColumn ? {
-      padding: "16px 8px 16px 8px",
+      py: "16px",
+      px: "8px",
       "&:after": {
         transition: "all 0.3s",
         content: "''",
@@ -1313,7 +1319,7 @@ var getCommonPinningStyles = (column) => {
         bottom: "-1px",
         transform: "translateX(-100%)"
       },
-      "[pin-right=true] &:after": {
+      "[data-pin-right=true] &:after": {
         boxShadow: "inset -14px 0px 20px -10px #00000010"
       }
     } : {}
@@ -1413,7 +1419,7 @@ var useDataTable = ({
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  var _a, _b, _c;
+  var _a, _b, _c, _d;
   const { isLoading, styles, headerSticky, onRowClick, container, columnPinning } = props;
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   const refTable = React5.useRef(null);
@@ -1422,17 +1428,17 @@ var DataTable = React5.forwardRef((props, ref) => {
   }));
   let lastPinnedColumn = 0;
   (_a = refTable.current) == null ? void 0 : _a.addEventListener("scroll", (s) => {
-    var _a2, _b2, _c2, _d;
+    var _a2, _b2, _c2, _d2;
     const element = s.currentTarget;
     if (element.scrollLeft > 0) {
-      (_a2 = refTable.current) == null ? void 0 : _a2.setAttribute("pin-left", "true");
+      (_a2 = refTable.current) == null ? void 0 : _a2.setAttribute("data-pin-left", "true");
     } else {
-      (_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("pin-left");
+      (_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("data-pin-left");
     }
     if (element.scrollLeft < element.scrollWidth - (lastPinnedColumn + element.offsetWidth)) {
-      (_c2 = refTable.current) == null ? void 0 : _c2.setAttribute("pin-right", "true");
+      (_c2 = refTable.current) == null ? void 0 : _c2.setAttribute("data-pin-right", "true");
     } else {
-      (_d = refTable.current) == null ? void 0 : _d.removeAttribute("pin-right");
+      (_d2 = refTable.current) == null ? void 0 : _d2.removeAttribute("data-pin-right");
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
@@ -1446,6 +1452,7 @@ var DataTable = React5.forwardRef((props, ref) => {
       maxW: "100%",
       w: "full",
       ref: refTable,
+      ...((_d = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _d.length) ? { "data-pin-right": true } : {},
       ...container,
       children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Table, { ...styles == null ? void 0 : styles.table, "data-loading": "true", children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Thead, { ...(styles == null ? void 0 : styles.tableHead, headerSticky ? { position: "sticky", top: 0, bg: "white", zIndex: 1 } : {}), children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Tr, { mx: "2", ...styles == null ? void 0 : styles.tableRow, children: headerGroup.headers.map((header, index) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(