gantt-task-react-v 1.7.6 → 1.7.7

package/dist/gantt-task-react.es.js

@@ -5702,9 +5702,8 @@ const TaskListTableHeadersDefaultInner = ({
         result[i] = {
           position: "sticky",
           left: leftOffset,
-          zIndex: 2,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)",
-          paddingRight: 8
+          zIndex: 3,
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
         };
         leftOffset += columns[i].width;
       }
@@ -5715,9 +5714,8 @@ const TaskListTableHeadersDefaultInner = ({
         result[i] = {
           position: "sticky",
           right: rightOffset,
-          zIndex: 2,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)",
-          paddingLeft: 8
+          zIndex: 3,
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
         };
         rightOffset += columns[i].width;
       }
@@ -10477,34 +10475,24 @@ const TaskListTableRowInner = forwardRef(
     }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
     const pinnedStyles = useMemo(() => {
       const result = {};
-      const pinnedBg = backgroundColor || "var(--gantt-background-color, #fff)";
+      const pinnedBase = {
+        position: "relative",
+        zIndex: 3,
+        backgroundColor: backgroundColor || "var(--gantt-background-color, #fff)"
+      };
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
           result[i] = {
-            position: "relative",
-            transform: "translateX(var(--pinned-translate-left, 0px))",
-            zIndex: 2,
-            backgroundColor: pinnedBg,
-            // box-shadow + clip-path create a bulletproof opaque cover that
-            // extends 10px past the cell's right edge, hiding any content
-            // that scrolls underneath.  clip-path trims the shadow to
-            // exactly the cell bounds plus the 10px overhang.
-            boxShadow: `0 0 0 9999px ${pinnedBg}`,
-            clipPath: "inset(0px -10px 0px 0px)",
-            paddingRight: 10
+            ...pinnedBase,
+            transform: "translateX(var(--pinned-translate-left, 0px))"
           };
         }
       }
       for (let i = columns.length - 1; i >= 0; i--) {
         if (columns[i].pinned === "right") {
           result[i] = {
-            position: "relative",
-            transform: "translateX(var(--pinned-translate-right, 0px))",
-            zIndex: 2,
-            backgroundColor: pinnedBg,
-            boxShadow: `0 0 0 9999px ${pinnedBg}`,
-            clipPath: "inset(0px 0px 0px -10px)",
-            paddingLeft: 10
+            ...pinnedBase,
+            transform: "translateX(var(--pinned-translate-right, 0px))"
           };
         }
       }

package/dist/gantt-task-react.umd.js

@@ -5719,9 +5719,8 @@
           result[i] = {
             position: "sticky",
             left: leftOffset,
-            zIndex: 2,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)",
-            paddingRight: 8
+            zIndex: 3,
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
           };
           leftOffset += columns[i].width;
         }
@@ -5732,9 +5731,8 @@
           result[i] = {
             position: "sticky",
             right: rightOffset,
-            zIndex: 2,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)",
-            paddingLeft: 8
+            zIndex: 3,
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
           };
           rightOffset += columns[i].width;
         }
@@ -10494,34 +10492,24 @@
       }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
       const pinnedStyles = React.useMemo(() => {
         const result = {};
-        const pinnedBg = backgroundColor || "var(--gantt-background-color, #fff)";
+        const pinnedBase = {
+          position: "relative",
+          zIndex: 3,
+          backgroundColor: backgroundColor || "var(--gantt-background-color, #fff)"
+        };
         for (let i = 0; i < columns.length; i++) {
           if (columns[i].pinned === "left") {
             result[i] = {
-              position: "relative",
-              transform: "translateX(var(--pinned-translate-left, 0px))",
-              zIndex: 2,
-              backgroundColor: pinnedBg,
-              // box-shadow + clip-path create a bulletproof opaque cover that
-              // extends 10px past the cell's right edge, hiding any content
-              // that scrolls underneath.  clip-path trims the shadow to
-              // exactly the cell bounds plus the 10px overhang.
-              boxShadow: `0 0 0 9999px ${pinnedBg}`,
-              clipPath: "inset(0px -10px 0px 0px)",
-              paddingRight: 10
+              ...pinnedBase,
+              transform: "translateX(var(--pinned-translate-left, 0px))"
             };
           }
         }
         for (let i = columns.length - 1; i >= 0; i--) {
           if (columns[i].pinned === "right") {
             result[i] = {
-              position: "relative",
-              transform: "translateX(var(--pinned-translate-right, 0px))",
-              zIndex: 2,
-              backgroundColor: pinnedBg,
-              boxShadow: `0 0 0 9999px ${pinnedBg}`,
-              clipPath: "inset(0px 0px 0px -10px)",
-              paddingLeft: 10
+              ...pinnedBase,
+              transform: "translateX(var(--pinned-translate-right, 0px))"
             };
           }
         }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.7.6",
+  "version": "1.7.7",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",