gantt-task-react-v 1.7.2 → 1.7.4

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";
@@ -10450,7 +10455,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 +10475,28 @@ 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;
-      }
       for (let i = 0; i < columns.length; i++) {
         if (columns[i].pinned === "left") {
           result[i] = {
-            position: "sticky",
-            left: leftOffset,
-            zIndex: 1,
+            position: "relative",
+            transform: "translateX(var(--pinned-translate-left, 0px))",
+            zIndex: 2,
             backgroundColor: "inherit"
           };
-          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,
+            position: "relative",
+            transform: "translateX(var(--pinned-translate-right, 0px))",
+            zIndex: 2,
             backgroundColor: "inherit"
           };
-          rightOffset += columns[i].width;
         }
       }
       return result;
-    }, [columns, moveHandleProps, isOverlay2, task.type, task.id]);
+    }, [columns]);
     return /* @__PURE__ */ jsxs(
       "div",
       {
@@ -11169,17 +11167,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 +11292,7 @@ const TaskListInner = ({
     /* @__PURE__ */ jsxs(
       "div",
       {
-        ref: taskListHorizontalScrollRef,
+        ref: setHorizontalScrollRef,
         className: styles$e.taskListHorizontalScroll,
         style: {
           width: tableWidth
@@ -11271,7 +11307,7 @@ const TaskListInner = ({
               allColumns,
               canToggleColumns: !!canToggleColumns,
               onColumnResizeStart,
-              onColumnVisibilityChange,
+              onColumnVisibilityChange: handleColumnVisibilityChange,
               canResizeColumns
             }
           ),
@@ -11556,17 +11592,19 @@ const GanttTodayInner = ({
   ] });
 };
 const GanttToday = memo(GanttTodayInner);
-const calendarBottomText = "_calendarBottomText_15t8b_1";
-const calendarTopTick = "_calendarTopTick_15t8b_25";
-const calendarTopText = "_calendarTopText_15t8b_35";
-const calendarHeader = "_calendarHeader_15t8b_61";
-const calendar = "_calendar_15t8b_1";
-const calendarDragging$1 = "_calendarDragging_15t8b_85";
+const calendarBottomText = "_calendarBottomText_1mt8w_1";
+const calendarTopTick = "_calendarTopTick_1mt8w_31";
+const calendarTopText = "_calendarTopText_1mt8w_41";
+const calendarHeader = "_calendarHeader_1mt8w_67";
+const calendarBottomSeparator = "_calendarBottomSeparator_1mt8w_81";
+const calendar = "_calendar_1mt8w_1";
+const calendarDragging$1 = "_calendarDragging_1mt8w_103";
 const styles$c = {
   calendarBottomText,
   calendarTopTick,
   calendarTopText,
   calendarHeader,
+  calendarBottomSeparator,
   calendar,
   calendarDragging: calendarDragging$1
 };
@@ -11773,6 +11811,19 @@ const Calendar = ({
     for (let i = startColumnIndex; i <= endColumnIndex; i++) {
       const date = getDate(i);
       const bottomValue = renderBottomHeaderByDate(date, i);
+      bottomValues2.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: additionalLeftSpace + columnWidth * i,
+            y1: 0,
+            x2: additionalLeftSpace + columnWidth * i,
+            y2: headerHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          `year-sep-${i}`
+        )
+      );
       bottomValues2.push(
         renderBottomText(
           columnWidth * i + columnWidth * 0.5,
@@ -11806,9 +11857,35 @@ const Calendar = ({
     const topValues2 = [];
     const bottomValues2 = [];
     const topDefaultHeight = headerHeight * 0.5;
+    bottomValues2.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          y1: topDefaultHeight,
+          x2: fullSvgWidth,
+          y2: topDefaultHeight,
+          className: styles$c.calendarBottomSeparator
+        },
+        "month-top-border"
+      )
+    );
     for (let i = startColumnIndex; i <= endColumnIndex; i++) {
       const date = getDate(i);
       const bottomValue = renderBottomHeaderByDate(date, i);
+      bottomValues2.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: additionalLeftSpace + columnWidth * i,
+            y1: topDefaultHeight,
+            x2: additionalLeftSpace + columnWidth * i,
+            y2: headerHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          `month-sep-${i}`
+        )
+      );
       bottomValues2.push(
         renderBottomText(
           additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
@@ -11850,6 +11927,19 @@ const Calendar = ({
     const bottomValues2 = [];
     let weeksCount = 1;
     const topDefaultHeight = headerHeight * 0.5;
+    bottomValues2.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          y1: topDefaultHeight,
+          x2: fullSvgWidth,
+          y2: topDefaultHeight,
+          className: styles$c.calendarBottomSeparator
+        },
+        "week-top-border"
+      )
+    );
     for (let i = endColumnIndex; i >= startColumnIndex; i--) {
       const date = getDate(i);
       const month = date.getMonth();
@@ -11859,6 +11949,19 @@ const Calendar = ({
         topValue = renderTopHeaderByDate(date);
       }
       const bottomValue = renderBottomHeaderByDate(date, i);
+      bottomValues2.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: additionalLeftSpace + columnWidth * i,
+            y1: topDefaultHeight,
+            x2: additionalLeftSpace + columnWidth * i,
+            y2: headerHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          `week-sep-${i}`
+        )
+      );
       bottomValues2.push(
         renderBottomText(
           additionalLeftSpace + columnWidth * (i + +rtl),
@@ -11894,11 +11997,37 @@ const Calendar = ({
     const bottomValues2 = [];
     const topDefaultHeight = headerHeight * 0.5;
     const renderedMonths = /* @__PURE__ */ new Set();
+    bottomValues2.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          y1: topDefaultHeight,
+          x2: fullSvgWidth,
+          y2: topDefaultHeight,
+          className: styles$c.calendarBottomSeparator
+        },
+        "day-top-border"
+      )
+    );
     for (let i = startColumnIndex; i <= endColumnIndex; i++) {
       const date = getDate(i);
       const bottomValue = renderBottomHeaderByDate(date, i);
       const month = date.getMonth();
       const fullYear = date.getFullYear();
+      bottomValues2.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: additionalLeftSpace + columnWidth * i,
+            y1: topDefaultHeight,
+            x2: additionalLeftSpace + columnWidth * i,
+            y2: headerHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          `day-sep-${i}`
+        )
+      );
       bottomValues2.push(
         renderBottomText(
           additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
@@ -11938,9 +12067,35 @@ const Calendar = ({
     const bottomValues2 = [];
     const ticks = dateSetup.viewMode === ViewMode.HalfDay ? 2 : 4;
     const topDefaultHeight = headerHeight * 0.5;
+    bottomValues2.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          y1: topDefaultHeight,
+          x2: fullSvgWidth,
+          y2: topDefaultHeight,
+          className: styles$c.calendarBottomSeparator
+        },
+        "partday-top-border"
+      )
+    );
     for (let i = startColumnIndex; i <= endColumnIndex; i++) {
       const date = getDate(i);
       const bottomValue = renderBottomHeaderByDate(date, i);
+      bottomValues2.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: additionalLeftSpace + columnWidth * i,
+            y1: topDefaultHeight,
+            x2: additionalLeftSpace + columnWidth * i,
+            y2: headerHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          `partday-sep-${i}`
+        )
+      );
       bottomValues2.push(
         renderBottomText(
           additionalLeftSpace + columnWidth * (i + +rtl),
@@ -11978,9 +12133,35 @@ const Calendar = ({
     const bottomValues2 = [];
     const topDefaultHeight = headerHeight * 0.5;
     const renderedDates = /* @__PURE__ */ new Set();
+    bottomValues2.push(
+      /* @__PURE__ */ jsx(
+        "line",
+        {
+          x1: 0,
+          y1: topDefaultHeight,
+          x2: fullSvgWidth,
+          y2: topDefaultHeight,
+          className: styles$c.calendarBottomSeparator
+        },
+        "hour-top-border"
+      )
+    );
     for (let i = startColumnIndex; i <= endColumnIndex; i++) {
       const date = getDate(i);
       const bottomValue = renderBottomHeaderByDate(date, i);
+      bottomValues2.push(
+        /* @__PURE__ */ jsx(
+          "line",
+          {
+            x1: additionalLeftSpace + columnWidth * i,
+            y1: topDefaultHeight,
+            x2: additionalLeftSpace + columnWidth * i,
+            y2: headerHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          `hour-sep-${i}`
+        )
+      );
       bottomValues2.push(
         renderBottomText(
           additionalLeftSpace + columnWidth * (i + +rtl),

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";
@@ -10467,7 +10472,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 +10492,28 @@
       }, [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;
-        }
         for (let i = 0; i < columns.length; i++) {
           if (columns[i].pinned === "left") {
             result[i] = {
-              position: "sticky",
-              left: leftOffset,
-              zIndex: 1,
+              position: "relative",
+              transform: "translateX(var(--pinned-translate-left, 0px))",
+              zIndex: 2,
               backgroundColor: "inherit"
             };
-            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,
+              position: "relative",
+              transform: "translateX(var(--pinned-translate-right, 0px))",
+              zIndex: 2,
               backgroundColor: "inherit"
             };
-            rightOffset += columns[i].width;
           }
         }
         return result;
-      }, [columns, moveHandleProps, isOverlay2, task.type, task.id]);
+      }, [columns]);
       return /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
@@ -11186,17 +11184,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 +11309,7 @@
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          ref: taskListHorizontalScrollRef,
+          ref: setHorizontalScrollRef,
           className: styles$e.taskListHorizontalScroll,
           style: {
             width: tableWidth
@@ -11288,7 +11324,7 @@
                 allColumns,
                 canToggleColumns: !!canToggleColumns,
                 onColumnResizeStart,
-                onColumnVisibilityChange,
+                onColumnVisibilityChange: handleColumnVisibilityChange,
                 canResizeColumns
               }
             ),
@@ -11573,17 +11609,19 @@
     ] });
   };
   const GanttToday = React.memo(GanttTodayInner);
-  const calendarBottomText = "_calendarBottomText_15t8b_1";
-  const calendarTopTick = "_calendarTopTick_15t8b_25";
-  const calendarTopText = "_calendarTopText_15t8b_35";
-  const calendarHeader = "_calendarHeader_15t8b_61";
-  const calendar = "_calendar_15t8b_1";
-  const calendarDragging$1 = "_calendarDragging_15t8b_85";
+  const calendarBottomText = "_calendarBottomText_1mt8w_1";
+  const calendarTopTick = "_calendarTopTick_1mt8w_31";
+  const calendarTopText = "_calendarTopText_1mt8w_41";
+  const calendarHeader = "_calendarHeader_1mt8w_67";
+  const calendarBottomSeparator = "_calendarBottomSeparator_1mt8w_81";
+  const calendar = "_calendar_1mt8w_1";
+  const calendarDragging$1 = "_calendarDragging_1mt8w_103";
   const styles$c = {
     calendarBottomText,
     calendarTopTick,
     calendarTopText,
     calendarHeader,
+    calendarBottomSeparator,
     calendar,
     calendarDragging: calendarDragging$1
   };
@@ -11790,6 +11828,19 @@
       for (let i = startColumnIndex; i <= endColumnIndex; i++) {
         const date = getDate(i);
         const bottomValue = renderBottomHeaderByDate(date, i);
+        bottomValues2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: additionalLeftSpace + columnWidth * i,
+              y1: 0,
+              x2: additionalLeftSpace + columnWidth * i,
+              y2: headerHeight,
+              className: styles$c.calendarBottomSeparator
+            },
+            `year-sep-${i}`
+          )
+        );
         bottomValues2.push(
           renderBottomText(
             columnWidth * i + columnWidth * 0.5,
@@ -11823,9 +11874,35 @@
       const topValues2 = [];
       const bottomValues2 = [];
       const topDefaultHeight = headerHeight * 0.5;
+      bottomValues2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            y1: topDefaultHeight,
+            x2: fullSvgWidth,
+            y2: topDefaultHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          "month-top-border"
+        )
+      );
       for (let i = startColumnIndex; i <= endColumnIndex; i++) {
         const date = getDate(i);
         const bottomValue = renderBottomHeaderByDate(date, i);
+        bottomValues2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: additionalLeftSpace + columnWidth * i,
+              y1: topDefaultHeight,
+              x2: additionalLeftSpace + columnWidth * i,
+              y2: headerHeight,
+              className: styles$c.calendarBottomSeparator
+            },
+            `month-sep-${i}`
+          )
+        );
         bottomValues2.push(
           renderBottomText(
             additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
@@ -11867,6 +11944,19 @@
       const bottomValues2 = [];
       let weeksCount = 1;
       const topDefaultHeight = headerHeight * 0.5;
+      bottomValues2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            y1: topDefaultHeight,
+            x2: fullSvgWidth,
+            y2: topDefaultHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          "week-top-border"
+        )
+      );
       for (let i = endColumnIndex; i >= startColumnIndex; i--) {
         const date = getDate(i);
         const month = date.getMonth();
@@ -11876,6 +11966,19 @@
           topValue = renderTopHeaderByDate(date);
         }
         const bottomValue = renderBottomHeaderByDate(date, i);
+        bottomValues2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: additionalLeftSpace + columnWidth * i,
+              y1: topDefaultHeight,
+              x2: additionalLeftSpace + columnWidth * i,
+              y2: headerHeight,
+              className: styles$c.calendarBottomSeparator
+            },
+            `week-sep-${i}`
+          )
+        );
         bottomValues2.push(
           renderBottomText(
             additionalLeftSpace + columnWidth * (i + +rtl),
@@ -11911,11 +12014,37 @@
       const bottomValues2 = [];
       const topDefaultHeight = headerHeight * 0.5;
       const renderedMonths = /* @__PURE__ */ new Set();
+      bottomValues2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            y1: topDefaultHeight,
+            x2: fullSvgWidth,
+            y2: topDefaultHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          "day-top-border"
+        )
+      );
       for (let i = startColumnIndex; i <= endColumnIndex; i++) {
         const date = getDate(i);
         const bottomValue = renderBottomHeaderByDate(date, i);
         const month = date.getMonth();
         const fullYear = date.getFullYear();
+        bottomValues2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: additionalLeftSpace + columnWidth * i,
+              y1: topDefaultHeight,
+              x2: additionalLeftSpace + columnWidth * i,
+              y2: headerHeight,
+              className: styles$c.calendarBottomSeparator
+            },
+            `day-sep-${i}`
+          )
+        );
         bottomValues2.push(
           renderBottomText(
             additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
@@ -11955,9 +12084,35 @@
       const bottomValues2 = [];
       const ticks = dateSetup.viewMode === ViewMode.HalfDay ? 2 : 4;
       const topDefaultHeight = headerHeight * 0.5;
+      bottomValues2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            y1: topDefaultHeight,
+            x2: fullSvgWidth,
+            y2: topDefaultHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          "partday-top-border"
+        )
+      );
       for (let i = startColumnIndex; i <= endColumnIndex; i++) {
         const date = getDate(i);
         const bottomValue = renderBottomHeaderByDate(date, i);
+        bottomValues2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: additionalLeftSpace + columnWidth * i,
+              y1: topDefaultHeight,
+              x2: additionalLeftSpace + columnWidth * i,
+              y2: headerHeight,
+              className: styles$c.calendarBottomSeparator
+            },
+            `partday-sep-${i}`
+          )
+        );
         bottomValues2.push(
           renderBottomText(
             additionalLeftSpace + columnWidth * (i + +rtl),
@@ -11995,9 +12150,35 @@
       const bottomValues2 = [];
       const topDefaultHeight = headerHeight * 0.5;
       const renderedDates = /* @__PURE__ */ new Set();
+      bottomValues2.push(
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: 0,
+            y1: topDefaultHeight,
+            x2: fullSvgWidth,
+            y2: topDefaultHeight,
+            className: styles$c.calendarBottomSeparator
+          },
+          "hour-top-border"
+        )
+      );
       for (let i = startColumnIndex; i <= endColumnIndex; i++) {
         const date = getDate(i);
         const bottomValue = renderBottomHeaderByDate(date, i);
+        bottomValues2.push(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "line",
+            {
+              x1: additionalLeftSpace + columnWidth * i,
+              y1: topDefaultHeight,
+              x2: additionalLeftSpace + columnWidth * i,
+              y2: headerHeight,
+              className: styles$c.calendarBottomSeparator
+            },
+            `hour-sep-${i}`
+          )
+        );
         bottomValues2.push(
           renderBottomText(
             additionalLeftSpace + columnWidth * (i + +rtl),

package/dist/style.css

@@ -534,10 +534,13 @@
 ._ganttTodayCircle_1oyhk_9 {
 
 }
-._calendarBottomText_15t8b_1 {
+._calendarBottomText_1mt8w_1 {
   text-anchor: middle;
   /*noinspection CssUnresolvedCustomProperty*/
-  fill: var(--gantt-calendar-bottom-text-color, var(--gantt-secondary-text-color));
+  fill: var(
+    --gantt-calendar-bottom-text-color,
+    var(--gantt-secondary-text-color)
+  );
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -moz-user-select: none;
@@ -546,12 +549,12 @@
   pointer-events: none;
 }
 
-._calendarTopTick_15t8b_25 {
+._calendarTopTick_1mt8w_31 {
   /*noinspection CssUnresolvedCustomProperty*/
   stroke: var(--gantt-calendar-top-divider-color, var(--gantt-divider-color));
 }
 
-._calendarTopText_15t8b_35 {
+._calendarTopText_1mt8w_41 {
   text-anchor: middle;
   /*noinspection CssUnresolvedCustomProperty*/
   fill: var(--gantt-calendar-top-text-color, var(--gantt-primary-text-color));
@@ -564,19 +567,25 @@
   font-weight: bold;
 }
 
-._calendarHeader_15t8b_61 {
+._calendarHeader_1mt8w_67 {
   fill: transparent;
   /*noinspection CssUnresolvedCustomProperty*/
   stroke: var(--gantt-calendar-stroke-color);
   stroke-width: 1.4;
 }
 
-._calendar_15t8b_1 {
+._calendarBottomSeparator_1mt8w_81 {
+  /*noinspection CssUnresolvedCustomProperty*/
+  stroke: var(--gantt-calendar-stroke-color, #e0e0e0);
+  stroke-width: 1;
+}
+
+._calendar_1mt8w_1 {
   cursor: auto;
   user-select: none;
 }
 
-._calendarDragging_15t8b_85 {
+._calendarDragging_1mt8w_103 {
   cursor: ew-resize;
 }
 ._arrow_clickable_3u3q2_1 {

package/package.json

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