gantt-task-react-v 1.7.3 → 1.7.5

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

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

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

@@ -5378,22 +5378,16 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
   useEffect(() => {
     if (clientColumns) {
       setColumns([...clientColumns]);
-      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);
+      const visibleColumns = clientColumns.filter((col) => !col.hidden);
       setTableWidth(
-        (prev) => Math.min(
-          prev + widthOfAddedColumns - widthOfRemovedColumns,
-          clientColumns.reduce((res, { width }) => res + width, 0) + extraWidth
-        )
+        visibleColumns.reduce((res, { width }) => res + width, 0) + extraWidth
       );
     }
   }, [clientColumns, extraWidth]);
   const [tableResizeEvent, setTableResizeEvent] = useState(null);
   const [columnResizeEvent, setColumnResizeEvent] = useState(null);
   const [tableWidthState, setTableWidth] = useState(
-    () => columnsState.reduce((res, { width }) => res + width, 0) + extraWidth
+    () => columnsState.filter((c) => !c.hidden).reduce((res, { width }) => res + width, 0) + extraWidth
   );
   const onTableResizeStart = (clientX) => {
     const newTableResizeEvent = {
@@ -5411,9 +5405,19 @@ 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.reduce((res, { width }) => res + width, 0) + extraWidth;
+  const taskListWidth = columnsState.filter((c) => !c.hidden).reduce((res, { width }) => res + width, 0) + extraWidth;
   useEffect(() => {
     if (!isResizeTableInProgress) {
       return void 0;
@@ -5534,7 +5538,8 @@ const useTableListResize = (clientColumns, canMoveTasks, onResizeColumn, ganttRe
     taskListWidth,
     tableWidthState,
     onTableResizeStart,
-    onColumnResizeStart
+    onColumnResizeStart,
+    handleColumnVisibilityChange
   ];
 };
 const toggleWrapper = "_toggleWrapper_rjfhl_1";
@@ -5698,7 +5703,8 @@ const TaskListTableHeadersDefaultInner = ({
           position: "sticky",
           left: leftOffset,
           zIndex: 2,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)",
+          paddingRight: 8
         };
         leftOffset += columns[i].width;
       }
@@ -5710,7 +5716,8 @@ const TaskListTableHeadersDefaultInner = ({
           position: "sticky",
           right: rightOffset,
           zIndex: 2,
-          backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+          backgroundColor: "var(--gantt-table-header-background-color, #fff)",
+          paddingLeft: 8
         };
         rightOffset += columns[i].width;
       }
@@ -10450,7 +10457,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)" : void 0;
+      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 rowClassName = useMemo(() => {
       const classNames = [styles$h.taskListTableRow];
@@ -10470,35 +10477,31 @@ const TaskListTableRowInner = forwardRef(
     }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
     const pinnedStyles = useMemo(() => {
       const result = {};
-      let leftOffset = 0;
-      if (moveHandleProps || !isOverlay2 && task.type !== "project" && task.id !== "no-project-asigned") {
-        leftOffset = 24;
-      }
+      const pinnedBg = backgroundColor || "var(--gantt-background-color, #fff)";
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
           result[i] = {
-            position: "sticky",
-            left: leftOffset,
-            zIndex: 1,
-            backgroundColor: "inherit"
+            position: "relative",
+            transform: "translateX(var(--pinned-translate-left, 0px))",
+            zIndex: 2,
+            backgroundColor: pinnedBg,
+            paddingRight: 8
           };
-          leftOffset += columns[i].width;
         }
       }
-      let rightOffset = 0;
       for (let i = columns.length - 1; i >= 0; i--) {
         if (columns[i].pinned === "right") {
           result[i] = {
-            position: "sticky",
-            right: rightOffset,
-            zIndex: 1,
-            backgroundColor: "inherit"
+            position: "relative",
+            transform: "translateX(var(--pinned-translate-right, 0px))",
+            zIndex: 2,
+            backgroundColor: pinnedBg,
+            paddingLeft: 8
           };
-          rightOffset += columns[i].width;
         }
       }
       return result;
-    }, [columns, moveHandleProps, isOverlay2, task.type, task.id]);
+    }, [columns, backgroundColor]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -11169,17 +11172,55 @@ const TaskListInner = ({
     taskListWidth,
     tableWidth,
     onTableResizeStart,
-    onColumnResizeStart
+    onColumnResizeStart,
+    internalColumnVisibilityChange
   ] = useTableListResize(
     columnsProp,
     canReorderTasks,
     onResizeColumn,
     ganttRef
   );
+  const handleColumnVisibilityChange = useCallback(
+    (columnId, hidden2) => {
+      internalColumnVisibilityChange(columnId, hidden2);
+      if (onColumnVisibilityChange) {
+        onColumnVisibilityChange(columnId, hidden2);
+      }
+    },
+    [internalColumnVisibilityChange, onColumnVisibilityChange]
+  );
   const columns = useMemo(
     () => allColumns.filter((col) => !col.hidden),
     [allColumns]
   );
+  const horizontalScrollRef = useRef(null);
+  const setHorizontalScrollRef = useCallback(
+    (el) => {
+      horizontalScrollRef.current = el;
+      if (taskListHorizontalScrollRef) {
+        taskListHorizontalScrollRef.current = el;
+      }
+    },
+    [taskListHorizontalScrollRef]
+  );
+  useEffect(() => {
+    const scrollEl = horizontalScrollRef.current;
+    const containerEl = taskListContainerRef.current;
+    if (!scrollEl || !containerEl)
+      return void 0;
+    const update = () => {
+      const sl = scrollEl.scrollLeft;
+      const maxSl = scrollEl.scrollWidth - scrollEl.clientWidth;
+      containerEl.style.setProperty("--pinned-translate-left", `${sl}px`);
+      containerEl.style.setProperty(
+        "--pinned-translate-right",
+        `${sl - maxSl}px`
+      );
+    };
+    update();
+    scrollEl.addEventListener("scroll", update, { passive: true });
+    return () => scrollEl.removeEventListener("scroll", update);
+  }, [taskListContainerRef, taskListWidth, tableWidth]);
   const renderedIndexes = useOptimizedList(
     taskListContainerRef,
     "scrollTop",
@@ -11256,7 +11297,7 @@ const TaskListInner = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: taskListHorizontalScrollRef,
+        ref: setHorizontalScrollRef,
         className: styles$e.taskListHorizontalScroll,
         style: {
           width: tableWidth
@@ -11271,7 +11312,7 @@ const TaskListInner = ({
               allColumns,
               canToggleColumns: !!canToggleColumns,
               onColumnResizeStart,
-              onColumnVisibilityChange,
+              onColumnVisibilityChange: handleColumnVisibilityChange,
               canResizeColumns
             }
           ),

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

@@ -5395,22 +5395,16 @@
     React.useEffect(() => {
       if (clientColumns) {
         setColumns([...clientColumns]);
-        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);
+        const visibleColumns = clientColumns.filter((col) => !col.hidden);
         setTableWidth(
-          (prev) => Math.min(
-            prev + widthOfAddedColumns - widthOfRemovedColumns,
-            clientColumns.reduce((res, { width }) => res + width, 0) + extraWidth
-          )
+          visibleColumns.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.reduce((res, { width }) => res + width, 0) + extraWidth
+      () => columnsState.filter((c) => !c.hidden).reduce((res, { width }) => res + width, 0) + extraWidth
     );
     const onTableResizeStart = (clientX) => {
       const newTableResizeEvent = {
@@ -5428,9 +5422,19 @@
         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.reduce((res, { width }) => res + width, 0) + extraWidth;
+    const taskListWidth = columnsState.filter((c) => !c.hidden).reduce((res, { width }) => res + width, 0) + extraWidth;
     React.useEffect(() => {
       if (!isResizeTableInProgress) {
         return void 0;
@@ -5551,7 +5555,8 @@
       taskListWidth,
       tableWidthState,
       onTableResizeStart,
-      onColumnResizeStart
+      onColumnResizeStart,
+      handleColumnVisibilityChange
     ];
   };
   const toggleWrapper = "_toggleWrapper_rjfhl_1";
@@ -5715,7 +5720,8 @@
             position: "sticky",
             left: leftOffset,
             zIndex: 2,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)",
+            paddingRight: 8
           };
           leftOffset += columns[i].width;
         }
@@ -5727,7 +5733,8 @@
             position: "sticky",
             right: rightOffset,
             zIndex: 2,
-            backgroundColor: "var(--gantt-table-header-background-color, #fff)"
+            backgroundColor: "var(--gantt-table-header-background-color, #fff)",
+            paddingLeft: 8
           };
           rightOffset += columns[i].width;
         }
@@ -10467,7 +10474,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)" : void 0;
+        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 rowClassName = React.useMemo(() => {
         const classNames = [styles$h.taskListTableRow];
@@ -10487,35 +10494,31 @@
       }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
       const pinnedStyles = React.useMemo(() => {
         const result = {};
-        let leftOffset = 0;
-        if (moveHandleProps || !isOverlay2 && task.type !== "project" && task.id !== "no-project-asigned") {
-          leftOffset = 24;
-        }
+        const pinnedBg = backgroundColor || "var(--gantt-background-color, #fff)";
         for (let i = 0; i < columns.length; i++) {
           if (columns[i].pinned === "left") {
             result[i] = {
-              position: "sticky",
-              left: leftOffset,
-              zIndex: 1,
-              backgroundColor: "inherit"
+              position: "relative",
+              transform: "translateX(var(--pinned-translate-left, 0px))",
+              zIndex: 2,
+              backgroundColor: pinnedBg,
+              paddingRight: 8
             };
-            leftOffset += columns[i].width;
           }
         }
-        let rightOffset = 0;
         for (let i = columns.length - 1; i >= 0; i--) {
           if (columns[i].pinned === "right") {
             result[i] = {
-              position: "sticky",
-              right: rightOffset,
-              zIndex: 1,
-              backgroundColor: "inherit"
+              position: "relative",
+              transform: "translateX(var(--pinned-translate-right, 0px))",
+              zIndex: 2,
+              backgroundColor: pinnedBg,
+              paddingLeft: 8
             };
-            rightOffset += columns[i].width;
           }
         }
         return result;
-      }, [columns, moveHandleProps, isOverlay2, task.type, task.id]);
+      }, [columns, backgroundColor]);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -11186,17 +11189,55 @@
       taskListWidth,
       tableWidth,
       onTableResizeStart,
-      onColumnResizeStart
+      onColumnResizeStart,
+      internalColumnVisibilityChange
     ] = 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(
       () => allColumns.filter((col) => !col.hidden),
       [allColumns]
     );
+    const horizontalScrollRef = React.useRef(null);
+    const setHorizontalScrollRef = React.useCallback(
+      (el) => {
+        horizontalScrollRef.current = el;
+        if (taskListHorizontalScrollRef) {
+          taskListHorizontalScrollRef.current = el;
+        }
+      },
+      [taskListHorizontalScrollRef]
+    );
+    React.useEffect(() => {
+      const scrollEl = horizontalScrollRef.current;
+      const containerEl = taskListContainerRef.current;
+      if (!scrollEl || !containerEl)
+        return void 0;
+      const update = () => {
+        const sl = scrollEl.scrollLeft;
+        const maxSl = scrollEl.scrollWidth - scrollEl.clientWidth;
+        containerEl.style.setProperty("--pinned-translate-left", `${sl}px`);
+        containerEl.style.setProperty(
+          "--pinned-translate-right",
+          `${sl - maxSl}px`
+        );
+      };
+      update();
+      scrollEl.addEventListener("scroll", update, { passive: true });
+      return () => scrollEl.removeEventListener("scroll", update);
+    }, [taskListContainerRef, taskListWidth, tableWidth]);
     const renderedIndexes = useOptimizedList(
       taskListContainerRef,
       "scrollTop",
@@ -11273,7 +11314,7 @@
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          ref: taskListHorizontalScrollRef,
+          ref: setHorizontalScrollRef,
           className: styles$e.taskListHorizontalScroll,
           style: {
             width: tableWidth
@@ -11288,7 +11329,7 @@
                 allColumns,
                 canToggleColumns: !!canToggleColumns,
                 onColumnResizeStart,
-                onColumnVisibilityChange,
+                onColumnVisibilityChange: handleColumnVisibilityChange,
                 canResizeColumns
               }
             ),

package/package.json

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