gantt-task-react-v 1.7.6 → 1.7.8

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;
       }
@@ -10459,6 +10457,16 @@ const TaskListTableRowInner = forwardRef(
       }
       return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : "var(--gantt-background-color, #fff)";
     }, [isEven, isOverlay2, isSelected]);
+    const pinnedBgColor = useMemo(() => {
+      if (isOverlay2) {
+        return "var(--gantt-table-drag-task-background-color)";
+      }
+      if (isSelected) {
+        const base = isEven ? "var(--gantt-table-even-background-color, #f5f5f5)" : "var(--gantt-background-color, #fff)";
+        return `linear-gradient(var(--gantt-table-selected-task-background-color), var(--gantt-table-selected-task-background-color)), linear-gradient(${base}, ${base})`;
+      }
+      return isEven ? "var(--gantt-table-even-background-color)" : "var(--gantt-background-color, #fff)";
+    }, [isEven, isOverlay2, isSelected]);
     const rowClassName = useMemo(() => {
       const classNames = [styles$h.taskListTableRow];
       if (moveOverPosition === "after") {
@@ -10477,39 +10485,29 @@ 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,
+        background: pinnedBgColor
+      };
       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))"
           };
         }
       }
       return result;
-    }, [columns, backgroundColor]);
+    }, [columns, pinnedBgColor]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -11346,7 +11344,7 @@ const TaskListInner = ({
                         distances.minimumRowDisplayed * distances.rowHeight
                       ),
                       backgroundSize: `100% ${fullRowHeight * 2}px`,
-                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
                     },
                     children: /* @__PURE__ */ jsx(
                       RenderTaskListTable,
@@ -14461,7 +14459,7 @@ const TaskGanttInner = (props) => {
       backgroundPositionX: additionalLeftSpace || void 0,
       backgroundImage: [
         `linear-gradient(to right, #ebeff2 1px, transparent 2px)`,
-        `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+        `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
       ].join(", ")
     }),
     [

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;
         }
@@ -10476,6 +10474,16 @@
         }
         return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : "var(--gantt-background-color, #fff)";
       }, [isEven, isOverlay2, isSelected]);
+      const pinnedBgColor = React.useMemo(() => {
+        if (isOverlay2) {
+          return "var(--gantt-table-drag-task-background-color)";
+        }
+        if (isSelected) {
+          const base = isEven ? "var(--gantt-table-even-background-color, #f5f5f5)" : "var(--gantt-background-color, #fff)";
+          return `linear-gradient(var(--gantt-table-selected-task-background-color), var(--gantt-table-selected-task-background-color)), linear-gradient(${base}, ${base})`;
+        }
+        return isEven ? "var(--gantt-table-even-background-color)" : "var(--gantt-background-color, #fff)";
+      }, [isEven, isOverlay2, isSelected]);
       const rowClassName = React.useMemo(() => {
         const classNames = [styles$h.taskListTableRow];
         if (moveOverPosition === "after") {
@@ -10494,39 +10502,29 @@
       }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
       const pinnedStyles = React.useMemo(() => {
         const result = {};
-        const pinnedBg = backgroundColor || "var(--gantt-background-color, #fff)";
+        const pinnedBase = {
+          position: "relative",
+          zIndex: 3,
+          background: pinnedBgColor
+        };
         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))"
             };
           }
         }
         return result;
-      }, [columns, backgroundColor]);
+      }, [columns, pinnedBgColor]);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -11363,7 +11361,7 @@
                           distances.minimumRowDisplayed * distances.rowHeight
                         ),
                         backgroundSize: `100% ${fullRowHeight * 2}px`,
-                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         RenderTaskListTable,
@@ -14478,7 +14476,7 @@
         backgroundPositionX: additionalLeftSpace || void 0,
         backgroundImage: [
           `linear-gradient(to right, #ebeff2 1px, transparent 2px)`,
-          `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
+          `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
         ].join(", ")
       }),
       [

package/package.json

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