@ctlyst.id/internal-ui 3.4.3 → 3.4.5

package/dist/index.js

@@ -1280,6 +1280,7 @@ var getCommonPinningStyles = (column) => {
   const isFirstLeftPinnedColumn = isPinned === "left" && column.getIsFirstColumn("left");
   const isLastLeftPinnedColumn = isPinned === "left" && column.getIsLastColumn("left");
   const isFirstRightPinnedColumn = isPinned === "right" && column.getIsFirstColumn("right");
+  const isLastRightPinnedColumn = isPinned === "right" && column.getIsLastColumn("right");
   return {
     left: isPinned === "left" ? `${column.getStart("left")}px` : void 0,
     right: isPinned === "right" ? `${column.getAfter("right")}px` : void 0,
@@ -1289,6 +1290,9 @@ var getCommonPinningStyles = (column) => {
     ...isFirstLeftPinnedColumn ? {
       pl: "16px"
     } : { pl: "8px" },
+    ...isLastRightPinnedColumn ? {
+      pr: "16px"
+    } : { pr: "8px" },
     ...isLastLeftPinnedColumn ? {
       py: "16px",
       pr: "8px",
@@ -1308,7 +1312,7 @@ var getCommonPinningStyles = (column) => {
     } : {},
     ...isFirstRightPinnedColumn ? {
       py: "16px",
-      px: "8px",
+      pl: "8px",
       "&:after": {
         transition: "all 0.3s",
         content: "''",
@@ -1419,18 +1423,27 @@ var useDataTable = ({
   };
 };
 var DataTable = React5.forwardRef((props, ref) => {
-  var _a, _b;
+  var _a, _b, _c, _d, _e, _f, _g;
   const { isLoading, styles, headerSticky, onRowClick, container, columnPinning } = props;
   const { table, toggleAllRowsSelected, generateColumn } = useDataTable(props);
   const refTable = React5.useRef(null);
   React5.useImperativeHandle(ref, () => ({
     toggleAllRowsSelected
   }));
+  const tableResizeHandler = () => {
+    var _a2, _b2, _c2, _d2, _e2;
+    if (((_a2 = refTable.current) == null ? void 0 : _a2.offsetWidth) === ((_b2 = refTable.current) == null ? void 0 : _b2.scrollWidth)) {
+      (_c2 = refTable.current) == null ? void 0 : _c2.removeAttribute("data-pin-right");
+      (_d2 = refTable.current) == null ? void 0 : _d2.removeAttribute("data-pin-left");
+    } else {
+      (_e2 = refTable.current) == null ? void 0 : _e2.setAttribute("data-pin-right", "true");
+    }
+  };
   let lastPinnedColumn = 0;
   React5.useEffect(() => {
     var _a2;
     (_a2 = refTable.current) == null ? void 0 : _a2.addEventListener("scroll", (s) => {
-      var _a3, _b2, _c, _d;
+      var _a3, _b2, _c2, _d2;
       const element = s.currentTarget;
       if (element.scrollLeft > 0) {
         (_a3 = refTable.current) == null ? void 0 : _a3.setAttribute("data-pin-left", "true");
@@ -1438,32 +1451,29 @@ var DataTable = React5.forwardRef((props, ref) => {
         (_b2 = refTable.current) == null ? void 0 : _b2.removeAttribute("data-pin-left");
       }
       if (element.scrollLeft < element.scrollWidth - (lastPinnedColumn + element.offsetWidth)) {
-        (_c = refTable.current) == null ? void 0 : _c.setAttribute("data-pin-right", "true");
+        (_c2 = refTable.current) == null ? void 0 : _c2.setAttribute("data-pin-right", "true");
       } else {
-        (_d = refTable.current) == null ? void 0 : _d.removeAttribute("data-pin-right");
-      }
-    });
-    window.addEventListener("resize", (ev) => {
-      var _a3, _b2, _c, _d, _e;
-      if (((_a3 = refTable.current) == null ? void 0 : _a3.offsetWidth) === ((_b2 = refTable.current) == null ? void 0 : _b2.scrollWidth)) {
-        (_c = refTable.current) == null ? void 0 : _c.removeAttribute("data-pin-right");
-        (_d = refTable.current) == null ? void 0 : _d.removeAttribute("data-pin-left");
-      } else {
-        (_e = refTable.current) == null ? void 0 : _e.setAttribute("data-pin-right", "true");
+        (_d2 = refTable.current) == null ? void 0 : _d2.removeAttribute("data-pin-right");
       }
     });
+    window.addEventListener("resize", tableResizeHandler);
+    return () => {
+      window.removeEventListener("resize", tableResizeHandler);
+    };
   }, []);
+  const hasScroll = ((_a = refTable == null ? void 0 : refTable.current) == null ? void 0 : _a.offsetWidth) && ((_b = refTable == null ? void 0 : refTable.current) == null ? void 0 : _b.scrollWidth) && ((_c = refTable == null ? void 0 : refTable.current) == null ? void 0 : _c.offsetWidth) < ((_d = refTable == null ? void 0 : refTable.current) == null ? void 0 : _d.scrollWidth);
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     import_react28.Box,
     {
       overflowX: "auto",
       overflowY: "hidden",
       position: "relative",
-      pl: ((_a = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _a.length) ? 0 : 4,
-      pr: ((_b = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _b.length) ? 0 : 4,
+      pl: ((_e = columnPinning == null ? void 0 : columnPinning.left) == null ? void 0 : _e.length) ? 0 : 4,
+      pr: ((_f = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _f.length) ? 0 : 4,
       maxW: "100%",
       w: "full",
       ref: refTable,
+      ...((_g = columnPinning == null ? void 0 : columnPinning.right) == null ? void 0 : _g.length) && hasScroll ? { "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)(
@@ -1516,17 +1526,17 @@ var DataTable = React5.forwardRef((props, ref) => {
                       gap: 2,
                       children: [
                         (0, import_react_table.flexRender)(header.column.columnDef.header, header.getContext()),
-                        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+                        (_b2 = header.column.getCanSort() && {
+                          asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
+                          desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
+                        }[header.column.getIsSorted()]) != null ? _b2 : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                           import_react28.Box,
                           {
                             as: "span",
                             cursor: header.column.getCanSort() ? "pointer" : "default",
                             "data-test-id": `CT_Container_SortingIcon_${header.id}`,
                             onClick: header.column.getToggleSortingHandler(),
-                            children: (_b2 = header.column.getCanSort() && {
-                              asc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronUpIcon, { h: 4, w: 4, color: "neutral.500" }),
-                              desc: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.ChevronDownIcon, { h: 4, w: 4, color: "neutral.500" })
-                            }[header.column.getIsSorted()]) != null ? _b2 : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Box, { display: "flex", justifyContent: "center", alignItems: "center", boxSize: 4, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_icons2.UpDownIcon, { color: "neutral.500" }) })
                           }
                         )
                       ]