gantt-task-react-v 1.8.0 → 1.8.1

package/dist/components/gantt/use-tablelist-resize.d.ts

@@ -5,6 +5,5 @@ export declare const useTableListResize: (clientColumns: readonly Column[] | und
     taskListWidth: number,
     tableWidth: number,
     onTableResizeStart: (clientX: number) => void,
-    onColumnResizeStart: (columnIndex: number, clientX: number) => void,
-    handleColumnVisibilityChange: (columnId: string, hidden: boolean) => void
+    onColumnResizeStart: (columnIndex: number, clientX: number) => void
 ];

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

@@ -5378,16 +5378,22 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
   useEffect(() => {
     if (clientColumns) {
       setColumns([...clientColumns]);
-      const visibleColumns = clientColumns.filter((col) => !col.hidden);
+      const currentColumnIds = clientColumns.map((col) => col.id);
+      const newColumnIds = clientColumns.map((col) => col.id);
+      const widthOfAddedColumns = clientColumns.filter((col) => !currentColumnIds.includes(col.id)).reduce((res, { width }) => res + width, 0);
+      const widthOfRemovedColumns = clientColumns.filter((col) => !newColumnIds.includes(col.id)).reduce((res, { width }) => res + width, 0);
       setTableWidth(
-        visibleColumns.reduce((res, { width }) => res + width, 0) + extraWidth
+        (prev) => Math.min(
+          prev + widthOfAddedColumns - widthOfRemovedColumns,
+          clientColumns.reduce((res, { width }) => res + width, 0) + extraWidth
+        )
       );
     }
   }, [clientColumns, extraWidth]);
   const [tableResizeEvent, setTableResizeEvent] = useState(null);
   const [columnResizeEvent, setColumnResizeEvent] = useState(null);
   const [tableWidthState, setTableWidth] = useState(
-    () => columnsState.filter((c) => !c.hidden).reduce((res, { width }) => res + width, 0) + extraWidth
+    () => columnsState.reduce((res, { width }) => res + width, 0) + extraWidth
   );
   const onTableResizeStart = (clientX) => {
     const newTableResizeEvent = {
@@ -5405,19 +5411,9 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
       initialTableWidth: tableWidthState
     });
   };
-  const handleColumnVisibilityChange = (columnId, hidden2) => {
-    setColumns((prev) => {
-      const next = prev.map(
-        (col) => col.id === columnId ? { ...col, hidden: hidden2 } : col
-      );
-      const visibleWidth = next.filter((c) => !c.hidden).reduce((s, { width }) => s + width, 0) + extraWidth;
-      setTableWidth(visibleWidth);
-      return next;
-    });
-  };
   const isResizeTableInProgress = Boolean(tableResizeEvent);
   const isResizeColumnInProgress = Boolean(columnResizeEvent);
-  const taskListWidth = columnsState.filter((c) => !c.hidden).reduce((res, { width }) => res + width, 0) + extraWidth;
+  const taskListWidth = columnsState.reduce((res, { width }) => res + width, 0) + extraWidth;
   useEffect(() => {
     if (!isResizeTableInProgress) {
       return void 0;
@@ -5538,8 +5534,7 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
     taskListWidth,
     tableWidthState,
     onTableResizeStart,
-    onColumnResizeStart,
-    handleColumnVisibilityChange
+    onColumnResizeStart
   ];
 };
 const toggleWrapper = "_toggleWrapper_rjfhl_1";
@@ -5693,26 +5688,35 @@ const TaskListTableHeadersDefaultInner = ({
 }) => {
   const pinnedStyles = useMemo(() => {
     const result = {};
-    const base = {
-      position: "relative",
-      zIndex: 3,
-      backgroundColor: "var(--gantt-table-header-background-color, #fff)"
-    };
+    let leftOffset = 0;
+    if (canMoveTasks) {
+      leftOffset = 24;
+    }
     for (let i = 0; i < columns.length; i++) {
       if (columns[i].pinned === "left") {
         result[i] = {
-          ...base,
-          transform: "translateX(var(--pinned-translate-left, 0px))"
+          position: "sticky",
+          left: leftOffset,
+          zIndex: 2,
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
         };
-      } else if (columns[i].pinned === "right") {
+        leftOffset += columns[i].width;
+      }
+    }
+    let rightOffset = 0;
+    for (let i = columns.length - 1; i >= 0; i--) {
+      if (columns[i].pinned === "right") {
         result[i] = {
-          ...base,
-          transform: "translateX(var(--pinned-translate-right, 0px))"
+          position: "sticky",
+          right: rightOffset,
+          zIndex: 2,
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
         };
+        rightOffset += columns[i].width;
       }
     }
     return result;
-  }, [columns]);
+  }, [columns, canMoveTasks]);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -10446,17 +10450,7 @@ const TaskListTableRowInner = forwardRef(
       if (isOverlay2) {
         return "var(--gantt-table-drag-task-background-color)";
       }
-      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)";
+      return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : void 0;
     }, [isEven, isOverlay2, isSelected]);
     const rowClassName = useMemo(() => {
       const classNames = [styles$h.taskListTableRow];
@@ -10476,26 +10470,35 @@ const TaskListTableRowInner = forwardRef(
     }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
     const pinnedStyles = useMemo(() => {
       const result = {};
-      const pinnedBase = {
-        position: "relative",
-        zIndex: 3,
-        background: pinnedBgColor
-      };
+      let leftOffset = 0;
+      if (moveHandleProps || !isOverlay2 && task.type !== "project" && task.id !== "no-project-asigned") {
+        leftOffset = 24;
+      }
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
           result[i] = {
-            ...pinnedBase,
-            transform: "translateX(var(--pinned-translate-left, 0px))"
+            position: "sticky",
+            left: leftOffset,
+            zIndex: 1,
+            backgroundColor: "inherit"
           };
-        } else if (columns[i].pinned === "right") {
+          leftOffset += columns[i].width;
+        }
+      }
+      let rightOffset = 0;
+      for (let i = columns.length - 1; i >= 0; i--) {
+        if (columns[i].pinned === "right") {
           result[i] = {
-            ...pinnedBase,
-            transform: "translateX(var(--pinned-translate-right, 0px))"
+            position: "sticky",
+            right: rightOffset,
+            zIndex: 1,
+            backgroundColor: "inherit"
           };
+          rightOffset += columns[i].width;
         }
       }
       return result;
-    }, [columns, pinnedBgColor]);
+    }, [columns, moveHandleProps, isOverlay2, task.type, task.id]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -11166,60 +11169,17 @@ const TaskListInner = ({
     taskListWidth,
     tableWidth,
     onTableResizeStart,
-    onColumnResizeStart,
-    internalColumnVisibilityChange
+    onColumnResizeStart
   ] = useTableListResize(
     columnsProp,
     canReorderTasks,
     onResizeColumn,
     ganttRef
   );
-  const handleColumnVisibilityChange = useCallback(
-    (columnId, hidden2) => {
-      internalColumnVisibilityChange(columnId, hidden2);
-      if (onColumnVisibilityChange) {
-        onColumnVisibilityChange(columnId, hidden2);
-      }
-    },
-    [internalColumnVisibilityChange, onColumnVisibilityChange]
-  );
-  const columns = useMemo(() => {
-    const visible = allColumns.filter((col) => !col.hidden);
-    const left = visible.filter((col) => col.pinned === "left");
-    const middle = visible.filter((col) => !col.pinned);
-    const right = visible.filter((col) => col.pinned === "right");
-    return [...left, ...middle, ...right];
-  }, [allColumns]);
-  const horizontalScrollRef = useRef(null);
-  const setHorizontalScrollRef = useCallback(
-    (el) => {
-      horizontalScrollRef.current = el;
-      if (taskListHorizontalScrollRef) {
-        taskListHorizontalScrollRef.current = el;
-      }
-    },
-    [taskListHorizontalScrollRef]
+  const columns = useMemo(
+    () => allColumns.filter((col) => !col.hidden),
+    [allColumns]
   );
-  useEffect(() => {
-    const scrollEl = horizontalScrollRef.current;
-    const containerEl = taskListContainerRef.current;
-    if (!scrollEl || !containerEl)
-      return void 0;
-    const update = () => {
-      const sl = scrollEl.scrollLeft;
-      const visibleWidth = scrollEl.clientWidth;
-      const maxSl = Math.max(0, taskListWidth - visibleWidth);
-      const leftVal = `${sl}px`;
-      const rightVal = `${sl - maxSl}px`;
-      scrollEl.style.setProperty("--pinned-translate-left", leftVal);
-      scrollEl.style.setProperty("--pinned-translate-right", rightVal);
-      containerEl.style.setProperty("--pinned-translate-left", leftVal);
-      containerEl.style.setProperty("--pinned-translate-right", rightVal);
-    };
-    update();
-    scrollEl.addEventListener("scroll", update, { passive: true });
-    return () => scrollEl.removeEventListener("scroll", update);
-  }, [taskListContainerRef, taskListWidth, tableWidth]);
   const renderedIndexes = useOptimizedList(
     taskListContainerRef,
     "scrollTop",
@@ -11296,7 +11256,7 @@ const TaskListInner = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: setHorizontalScrollRef,
+        ref: taskListHorizontalScrollRef,
         className: styles$e.taskListHorizontalScroll,
         style: {
           width: tableWidth
@@ -11311,7 +11271,7 @@ const TaskListInner = ({
               allColumns,
               canToggleColumns: !!canToggleColumns,
               onColumnResizeStart,
-              onColumnVisibilityChange: handleColumnVisibilityChange,
+              onColumnVisibilityChange,
               canResizeColumns
             }
           ),
@@ -11337,7 +11297,7 @@ const TaskListInner = ({
                         distances.minimumRowDisplayed * distances.rowHeight
                       ),
                       backgroundSize: `100% ${fullRowHeight * 2}px`,
-                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
+                      backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
                     },
                     children: /* @__PURE__ */ jsx(
                       RenderTaskListTable,
@@ -14452,7 +14412,7 @@ const TaskGanttInner = (props) => {
       backgroundPositionX: additionalLeftSpace || void 0,
       backgroundImage: [
         `linear-gradient(to right, #ebeff2 1px, transparent 2px)`,
-        `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
+        `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
       ].join(", ")
     }),
     [

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

@@ -5395,16 +5395,22 @@
     React.useEffect(() => {
       if (clientColumns) {
         setColumns([...clientColumns]);
-        const visibleColumns = clientColumns.filter((col) => !col.hidden);
+        const currentColumnIds = clientColumns.map((col) => col.id);
+        const newColumnIds = clientColumns.map((col) => col.id);
+        const widthOfAddedColumns = clientColumns.filter((col) => !currentColumnIds.includes(col.id)).reduce((res, { width }) => res + width, 0);
+        const widthOfRemovedColumns = clientColumns.filter((col) => !newColumnIds.includes(col.id)).reduce((res, { width }) => res + width, 0);
         setTableWidth(
-          visibleColumns.reduce((res, { width }) => res + width, 0) + extraWidth
+          (prev) => Math.min(
+            prev + widthOfAddedColumns - widthOfRemovedColumns,
+            clientColumns.reduce((res, { width }) => res + width, 0) + extraWidth
+          )
         );
       }
     }, [clientColumns, extraWidth]);
     const [tableResizeEvent, setTableResizeEvent] = React.useState(null);
     const [columnResizeEvent, setColumnResizeEvent] = React.useState(null);
     const [tableWidthState, setTableWidth] = React.useState(
-      () => columnsState.filter((c) => !c.hidden).reduce((res, { width }) => res + width, 0) + extraWidth
+      () => columnsState.reduce((res, { width }) => res + width, 0) + extraWidth
     );
     const onTableResizeStart = (clientX) => {
       const newTableResizeEvent = {
@@ -5422,19 +5428,9 @@
         initialTableWidth: tableWidthState
       });
     };
-    const handleColumnVisibilityChange = (columnId, hidden2) => {
-      setColumns((prev) => {
-        const next = prev.map(
-          (col) => col.id === columnId ? { ...col, hidden: hidden2 } : col
-        );
-        const visibleWidth = next.filter((c) => !c.hidden).reduce((s, { width }) => s + width, 0) + extraWidth;
-        setTableWidth(visibleWidth);
-        return next;
-      });
-    };
     const isResizeTableInProgress = Boolean(tableResizeEvent);
     const isResizeColumnInProgress = Boolean(columnResizeEvent);
-    const taskListWidth = columnsState.filter((c) => !c.hidden).reduce((res, { width }) => res + width, 0) + extraWidth;
+    const taskListWidth = columnsState.reduce((res, { width }) => res + width, 0) + extraWidth;
     React.useEffect(() => {
       if (!isResizeTableInProgress) {
         return void 0;
@@ -5555,8 +5551,7 @@
       taskListWidth,
       tableWidthState,
       onTableResizeStart,
-      onColumnResizeStart,
-      handleColumnVisibilityChange
+      onColumnResizeStart
     ];
   };
   const toggleWrapper = "_toggleWrapper_rjfhl_1";
@@ -5710,26 +5705,35 @@
   }) => {
     const pinnedStyles = React.useMemo(() => {
       const result = {};
-      const base = {
-        position: "relative",
-        zIndex: 3,
-        backgroundColor: "var(--gantt-table-header-background-color, #fff)"
-      };
+      let leftOffset = 0;
+      if (canMoveTasks) {
+        leftOffset = 24;
+      }
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
           result[i] = {
-            ...base,
-            transform: "translateX(var(--pinned-translate-left, 0px))"
+            position: "sticky",
+            left: leftOffset,
+            zIndex: 2,
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
           };
-        } else if (columns[i].pinned === "right") {
+          leftOffset += columns[i].width;
+        }
+      }
+      let rightOffset = 0;
+      for (let i = columns.length - 1; i >= 0; i--) {
+        if (columns[i].pinned === "right") {
           result[i] = {
-            ...base,
-            transform: "translateX(var(--pinned-translate-right, 0px))"
+            position: "sticky",
+            right: rightOffset,
+            zIndex: 2,
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
           };
+          rightOffset += columns[i].width;
         }
       }
       return result;
-    }, [columns]);
+    }, [columns, canMoveTasks]);
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
@@ -10463,17 +10467,7 @@
         if (isOverlay2) {
           return "var(--gantt-table-drag-task-background-color)";
         }
-        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)";
+        return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : void 0;
       }, [isEven, isOverlay2, isSelected]);
       const rowClassName = React.useMemo(() => {
         const classNames = [styles$h.taskListTableRow];
@@ -10493,26 +10487,35 @@
       }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
       const pinnedStyles = React.useMemo(() => {
         const result = {};
-        const pinnedBase = {
-          position: "relative",
-          zIndex: 3,
-          background: pinnedBgColor
-        };
+        let leftOffset = 0;
+        if (moveHandleProps || !isOverlay2 && task.type !== "project" && task.id !== "no-project-asigned") {
+          leftOffset = 24;
+        }
         for (let i = 0; i < columns.length; i++) {
           if (columns[i].pinned === "left") {
             result[i] = {
-              ...pinnedBase,
-              transform: "translateX(var(--pinned-translate-left, 0px))"
+              position: "sticky",
+              left: leftOffset,
+              zIndex: 1,
+              backgroundColor: "inherit"
             };
-          } else if (columns[i].pinned === "right") {
+            leftOffset += columns[i].width;
+          }
+        }
+        let rightOffset = 0;
+        for (let i = columns.length - 1; i >= 0; i--) {
+          if (columns[i].pinned === "right") {
             result[i] = {
-              ...pinnedBase,
-              transform: "translateX(var(--pinned-translate-right, 0px))"
+              position: "sticky",
+              right: rightOffset,
+              zIndex: 1,
+              backgroundColor: "inherit"
             };
+            rightOffset += columns[i].width;
           }
         }
         return result;
-      }, [columns, pinnedBgColor]);
+      }, [columns, moveHandleProps, isOverlay2, task.type, task.id]);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -11183,60 +11186,17 @@
       taskListWidth,
       tableWidth,
       onTableResizeStart,
-      onColumnResizeStart,
-      internalColumnVisibilityChange
+      onColumnResizeStart
     ] = useTableListResize(
       columnsProp,
       canReorderTasks,
       onResizeColumn,
       ganttRef
     );
-    const handleColumnVisibilityChange = React.useCallback(
-      (columnId, hidden2) => {
-        internalColumnVisibilityChange(columnId, hidden2);
-        if (onColumnVisibilityChange) {
-          onColumnVisibilityChange(columnId, hidden2);
-        }
-      },
-      [internalColumnVisibilityChange, onColumnVisibilityChange]
-    );
-    const columns = React.useMemo(() => {
-      const visible = allColumns.filter((col) => !col.hidden);
-      const left = visible.filter((col) => col.pinned === "left");
-      const middle = visible.filter((col) => !col.pinned);
-      const right = visible.filter((col) => col.pinned === "right");
-      return [...left, ...middle, ...right];
-    }, [allColumns]);
-    const horizontalScrollRef = React.useRef(null);
-    const setHorizontalScrollRef = React.useCallback(
-      (el) => {
-        horizontalScrollRef.current = el;
-        if (taskListHorizontalScrollRef) {
-          taskListHorizontalScrollRef.current = el;
-        }
-      },
-      [taskListHorizontalScrollRef]
+    const columns = React.useMemo(
+      () => allColumns.filter((col) => !col.hidden),
+      [allColumns]
     );
-    React.useEffect(() => {
-      const scrollEl = horizontalScrollRef.current;
-      const containerEl = taskListContainerRef.current;
-      if (!scrollEl || !containerEl)
-        return void 0;
-      const update = () => {
-        const sl = scrollEl.scrollLeft;
-        const visibleWidth = scrollEl.clientWidth;
-        const maxSl = Math.max(0, taskListWidth - visibleWidth);
-        const leftVal = `${sl}px`;
-        const rightVal = `${sl - maxSl}px`;
-        scrollEl.style.setProperty("--pinned-translate-left", leftVal);
-        scrollEl.style.setProperty("--pinned-translate-right", rightVal);
-        containerEl.style.setProperty("--pinned-translate-left", leftVal);
-        containerEl.style.setProperty("--pinned-translate-right", rightVal);
-      };
-      update();
-      scrollEl.addEventListener("scroll", update, { passive: true });
-      return () => scrollEl.removeEventListener("scroll", update);
-    }, [taskListContainerRef, taskListWidth, tableWidth]);
     const renderedIndexes = useOptimizedList(
       taskListContainerRef,
       "scrollTop",
@@ -11313,7 +11273,7 @@
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          ref: setHorizontalScrollRef,
+          ref: taskListHorizontalScrollRef,
           className: styles$e.taskListHorizontalScroll,
           style: {
             width: tableWidth
@@ -11328,7 +11288,7 @@
                 allColumns,
                 canToggleColumns: !!canToggleColumns,
                 onColumnResizeStart,
-                onColumnVisibilityChange: handleColumnVisibilityChange,
+                onColumnVisibilityChange,
                 canResizeColumns
               }
             ),
@@ -11354,7 +11314,7 @@
                           distances.minimumRowDisplayed * distances.rowHeight
                         ),
                         backgroundSize: `100% ${fullRowHeight * 2}px`,
-                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
+                        backgroundImage: `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
                       },
                       children: /* @__PURE__ */ jsxRuntime.jsx(
                         RenderTaskListTable,
@@ -14469,7 +14429,7 @@
         backgroundPositionX: additionalLeftSpace || void 0,
         backgroundImage: [
           `linear-gradient(to right, #ebeff2 1px, transparent 2px)`,
-          `linear-gradient(to bottom, transparent ${fullRowHeight}px, var(--gantt-table-even-background-color, #f5f5f5) ${fullRowHeight}px)`
+          `linear-gradient(to bottom, transparent ${fullRowHeight}px, #f5f5f5 ${fullRowHeight}px)`
         ].join(", ")
       }),
       [

package/package.json

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