@thepocman/gantt-task-react 1.0.24 → 1.0.27

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

@@ -1875,7 +1875,7 @@
   const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_qip67_13";
   const tooltipDetailsContainer = "_tooltipDetailsContainer_qip67_25";
   const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_qip67_49";
-  const styles$j = {
+  const styles$i = {
     tooltipDefaultContainer,
     tooltipDefaultContainerParagraph,
     tooltipDetailsContainer,
@@ -1915,12 +1915,12 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: styles$j.tooltipDefaultContainer,
+        className: styles$i.tooltipDefaultContainer,
         style: style2,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: fontSize + 6 }, children: `${task.name}: ${task.start.getDate()}-${task.start.getMonth() + 1}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() + 1}-${task.end.getFullYear()}` }),
-          task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$j.tooltipDefaultContainerParagraph, children: `Duration: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} day(s)` }),
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$j.tooltipDefaultContainerParagraph, children: !!task.progress && `Progress: ${task.progress} %` })
+          task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$i.tooltipDefaultContainerParagraph, children: `Duration: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} day(s)` }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$i.tooltipDefaultContainerParagraph, children: !!task.progress && `Progress: ${task.progress} %` })
         ]
       }
     );
@@ -2002,7 +2002,7 @@
     ];
   };
   const button$2 = "_button_1eue5_1";
-  const styles$i = {
+  const styles$h = {
     button: button$2
   };
   const AddColumn = (props) => {
@@ -2020,14 +2020,14 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, style: {
       "color": colors.barLabelColor
-    }, className: styles$i.button, children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon(task) : "+" });
+    }, className: styles$h.button, children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon(task) : "+" });
   };
   const taskListNameWrapper = "_taskListNameWrapper_1un0e_1";
   const dragging = "_dragging_1un0e_11";
   const taskListExpander = "_taskListExpander_1un0e_19";
   const taskListEmptyExpander = "_taskListEmptyExpander_1un0e_35";
   const taskName = "_taskName_1un0e_45";
-  const styles$h = {
+  const styles$g = {
     taskListNameWrapper,
     dragging,
     taskListExpander,
@@ -2070,7 +2070,7 @@
       "div",
       {
         "data-testid": `title-table-cell-${name}`,
-        className: `${styles$h.taskListNameWrapper}`,
+        className: `${styles$g.taskListNameWrapper}`,
         style: {
           paddingLeft: depth * nestedTaskNameOffset
         },
@@ -2079,7 +2079,7 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: `${styles$h.taskListExpander} ${!hasChildren ? styles$h.taskListEmptyExpander : ""}`,
+              className: `${styles$g.taskListExpander} ${!hasChildren ? styles$g.taskListEmptyExpander : ""}`,
               onClick,
               style: {
                 width: expandIconWidth
@@ -2089,7 +2089,7 @@
           ),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
             color: colors.barLabelColor
-          }, className: styles$h.taskName, children: [
+          }, className: styles$g.taskName, children: [
             isShowTaskNumbers && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
               indexStr,
               " "
@@ -3186,7 +3186,7 @@
     }, children: dependencies.map(({ name }) => name).join(", ") });
   };
   const button$1 = "_button_1eue5_1";
-  const styles$g = {
+  const styles$f = {
     button: button$1
   };
   const DeleteColumn = (props) => {
@@ -3198,10 +3198,10 @@
     }, [task, handleDeleteTasks]);
     return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, style: {
       "color": colors.barLabelColor
-    }, className: styles$g.button, children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon(task) : "-" });
+    }, className: styles$f.button, children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon(task) : "-" });
   };
   const button = "_button_ys66g_1";
-  const styles$f = {
+  const styles$e = {
     button
   };
   const EditColumn = (props) => {
@@ -3213,7 +3213,7 @@
     }, [task, handleEditTask]);
     return /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick, style: {
       "color": colors.barLabelColor
-    }, className: styles$f.button, children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon(task) : "✎" });
+    }, className: styles$e.button, children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon(task) : "✎" });
   };
   const useTableListResize = (columnsProp, distances, onResizeColumn) => {
     const [columnsState, setColumns] = React.useState(() => {
@@ -3419,7 +3419,7 @@
   const taskListResizer = "_taskListResizer_1ogga_79";
   const taskListContent = "_taskListContent_1ogga_127";
   const hidden = "_hidden_1ogga_147";
-  const styles$e = {
+  const styles$d = {
     ganttTableRoot,
     ganttTableWrapper,
     taskListResizer,
@@ -3487,11 +3487,11 @@
       fullRowHeight
     );
     const renderedIndexes = enableTaskGrouping ? groupedIndexes : optimizedIndexes;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$e.ganttTableRoot, ref: taskListRef, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$d.ganttTableRoot, ref: taskListRef, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
         {
-          className: styles$e.ganttTableWrapper,
+          className: styles$d.ganttTableWrapper,
           style: {
             width: tableWidth
           },
@@ -3514,7 +3514,7 @@
             /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: styles$e.taskListContent,
+                className: styles$d.taskListContent,
                 ref: taskListContentRef,
                 onScroll: onScrollTableListContentVertically,
                 children: /* @__PURE__ */ jsxRuntime.jsx(
@@ -3577,7 +3577,7 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
-          className: styles$e.taskListResizer,
+          className: styles$d.taskListResizer,
           onMouseDown: (event) => {
             onTableResizeStart(event.clientX);
           },
@@ -3598,7 +3598,7 @@
   const ganttTable_HeaderTitle = "_ganttTable_HeaderTitle_1ndeo_41";
   const ganttTable_HeaderItem = "_ganttTable_HeaderItem_1ndeo_49";
   const resizer = "_resizer_1ndeo_75";
-  const styles$d = {
+  const styles$c = {
     ganttTable_Header,
     ganttTable_HeaderSeparator,
     ganttTable_HeaderContent,
@@ -3695,7 +3695,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: styles$d.ganttTable_Header,
+        className: styles$c.ganttTable_Header,
         style: {
           height: headerHeight,
           fontFamily,
@@ -3706,7 +3706,7 @@
             index2 > 0 && /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: styles$d.ganttTable_HeaderSeparator,
+                className: styles$c.ganttTable_HeaderSeparator,
                 style: {
                   height: headerHeight * 0.5,
                   marginTop: headerHeight * 0.2
@@ -3717,14 +3717,14 @@
               "div",
               {
                 "data-testid": `table-column-header-${title}`,
-                className: styles$d.ganttTable_HeaderItem,
+                className: styles$c.ganttTable_HeaderItem,
                 style: {
                   minWidth: width,
                   maxWidth: width
                 },
                 children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$d.ganttTable_HeaderContent, children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$d.ganttTable_HeaderTitle, children: title }),
+                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$c.ganttTable_HeaderContent, children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$c.ganttTable_HeaderTitle, children: title }),
                     title === "Name" && /* @__PURE__ */ jsxRuntime.jsx(
                       TaskListHeaderActions,
                       {
@@ -3739,7 +3739,7 @@
                     "div",
                     {
                       "data-testid": `table-column-header-resize-handle-${title}`,
-                      className: styles$d.resizer,
+                      className: styles$c.resizer,
                       onMouseDown: (event) => {
                         onColumnResizeStart(index2, event.clientX);
                       },
@@ -3769,7 +3769,7 @@
   const dropAfterLighten = "_dropAfterLighten_1e35i_81";
   const dropBefore = "_dropBefore_1e35i_105";
   const dropBeforeLighten = "_dropBeforeLighten_1e35i_127";
-  const styles$c = {
+  const styles$b = {
     taskListTableRow,
     taskListTableRowGrabbing,
     cut,
@@ -3981,7 +3981,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: `${styles$c.taskListTableRow} ${isCut ? styles$c.cut : ""}`,
+        className: `${styles$b.taskListTableRow} ${isCut ? styles$b.cut : ""}`,
         onMouseDown: onRootMouseDown,
         style: {
           height: fullRowHeight,
@@ -3999,7 +3999,7 @@
             return /* @__PURE__ */ jsxRuntime.jsx(
               "div",
               {
-                className: styles$c.taskListCell,
+                className: styles$b.taskListCell,
                 style: {
                   minWidth: width,
                   maxWidth: width
@@ -4007,7 +4007,7 @@
                 children: /* @__PURE__ */ jsxRuntime.jsx(
                   "div",
                   {
-                    className: styles$c.taskListCellInner,
+                    className: styles$b.taskListCellInner,
                     onDragEnter: () => {
                       setHoveringState({
                         hoveringBefore: false,
@@ -4047,7 +4047,7 @@
             "div",
             {
               "data-testid": `table-row-drop-before-${task.name}`,
-              className: `${styles$c.dropBefore} ${hoveringState.hoveringBefore ? styles$c.dropBeforeLighten : ""}`,
+              className: `${styles$b.dropBefore} ${hoveringState.hoveringBefore ? styles$b.dropBeforeLighten : ""}`,
               style: {
                 left: dropPreviewOffset,
                 backgroundColor: hoveringState.hoveringBefore ? colors.taskDragColor : void 0,
@@ -4077,7 +4077,7 @@
             "div",
             {
               "data-testid": `table-row-drop-after-${task.name}`,
-              className: `${styles$c.dropAfter} ${hoveringState.hoveringAfter ? styles$c.dropBeforeLighten : ""}`,
+              className: `${styles$b.dropAfter} ${hoveringState.hoveringAfter ? styles$b.dropBeforeLighten : ""}`,
               style: {
                 left: dropPreviewOffset,
                 backgroundColor: hoveringState.hoveringAfter ? colors.taskDragColor : void 0,
@@ -4119,7 +4119,7 @@
     return childs.length > 0;
   };
   const taskListWrapper = "_taskListWrapper_5941j_1";
-  const styles$b = {
+  const styles$a = {
     taskListWrapper
   };
   const TaskListTableDefaultInner = ({
@@ -4305,7 +4305,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: styles$b.taskListWrapper,
+        className: styles$a.taskListWrapper,
         style: { fontFamily, fontSize },
         children: renderedListWithOffset
       }
@@ -4459,7 +4459,7 @@
   const calendarTopTick = "_calendarTopTick_lemhx_35";
   const calendarTopText = "_calendarTopText_lemhx_43";
   const calendarHeader = "_calendarHeader_lemhx_65";
-  const styles$a = {
+  const styles$9 = {
     calendarMain,
     calendarBottomText,
     calendarTopTick,
@@ -4483,7 +4483,7 @@
           y1: y1Line,
           x2: x1Line,
           y2: y2Line,
-          className: styles$a.calendarTopTick
+          className: styles$9.calendarTopTick
         }
       ),
       value !== null && /* @__PURE__ */ jsxRuntime.jsx(
@@ -4491,7 +4491,7 @@
         {
           y: yText,
           x: xText,
-          className: styles$a.calendarTopText,
+          className: styles$9.calendarTopText,
           style: { fill: colors.barLabelColor },
           children: value
         }
@@ -4540,7 +4540,7 @@
             {
               y: headerHeight * 0.8,
               x: columnWidth * i + columnWidth * 0.5,
-              className: styles$a.calendarBottomText,
+              className: styles$9.calendarBottomText,
               style: { fill: colors.barLabelColor },
               children: bottomValue
             },
@@ -4581,7 +4581,7 @@
             {
               y: headerHeight * 0.8,
               x: additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
-              className: styles$a.calendarBottomText,
+              className: styles$9.calendarBottomText,
               style: { fill: colors.barLabelColor },
               children: halfYear
             },
@@ -4624,7 +4624,7 @@
             {
               y: headerHeight * 0.8,
               x: additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
-              className: styles$a.calendarBottomText,
+              className: styles$9.calendarBottomText,
               style: { fill: colors.barLabelColor },
               children: quarter
             },
@@ -4666,7 +4666,7 @@
             {
               y: headerHeight * 0.8,
               x: additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
-              className: styles$a.calendarBottomText,
+              className: styles$9.calendarBottomText,
               style: { fill: colors.barLabelColor },
               children: bottomValue
             },
@@ -4721,7 +4721,7 @@
             {
               y: headerHeight * 0.8,
               x: additionalLeftSpace + columnWidth * (i + +rtl),
-              className: styles$a.calendarBottomText,
+              className: styles$9.calendarBottomText,
               style: { fill: colors.barLabelColor },
               children: bottomValue
             },
@@ -4766,7 +4766,7 @@
             {
               y: headerHeight * 0.8,
               x: additionalLeftSpace + columnWidth * i + columnWidth * 0.5,
-              className: styles$a.calendarBottomText,
+              className: styles$9.calendarBottomText,
               style: { fill: colors.barLabelColor },
               children: bottomValue
             },
@@ -4813,7 +4813,7 @@
             {
               y: headerHeight * 0.8,
               x: additionalLeftSpace + columnWidth * (i + +rtl),
-              className: styles$a.calendarBottomText,
+              className: styles$9.calendarBottomText,
               fontFamily,
               style: { fill: colors.barLabelColor },
               children: bottomValue
@@ -4858,7 +4858,7 @@
             {
               y: headerHeight * 0.8,
               x: additionalLeftSpace + columnWidth * (i + +rtl),
-              className: styles$a.calendarBottomText,
+              className: styles$9.calendarBottomText,
               fontFamily,
               style: { fill: colors.barLabelColor },
               children: bottomValue
@@ -4922,7 +4922,7 @@
       case ViewMode.Hour:
         [topValues, bottomValues] = getCalendarValuesForHour();
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$a.calendarMain, style: { width: fullSvgWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$9.calendarMain, style: { width: fullSvgWidth }, children: /* @__PURE__ */ jsxRuntime.jsx(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -4936,6 +4936,34 @@
       }
     ) });
   };
+  const shouldDrawVerticalDivider = (currentDate, previousDate, viewMode, isUnknownDates, columnIndex, startColumnIndex) => {
+    if (isUnknownDates)
+      return false;
+    if (columnIndex === startColumnIndex)
+      return true;
+    if (!previousDate)
+      return false;
+    switch (viewMode) {
+      case ViewMode.Year:
+        return currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.HalfYear:
+        return currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.QuarterYear:
+        return Math.ceil((currentDate.getMonth() + 1) / 3) !== Math.ceil((previousDate.getMonth() + 1) / 3) || currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.Month:
+        return currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.Week:
+        return currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.Day:
+        return currentDate.getDate() !== previousDate.getDate() || currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+      case ViewMode.HalfDay:
+      case ViewMode.QuarterDay:
+      case ViewMode.Hour:
+        return currentDate.getDate() !== previousDate.getDate() || currentDate.getMonth() !== previousDate.getMonth() || currentDate.getFullYear() !== previousDate.getFullYear();
+      default:
+        return false;
+    }
+  };
   const GridBodyInner = ({
     additionalLeftSpace,
     columnWidth,
@@ -4944,7 +4972,11 @@
     todayColor,
     rtl,
     startDate,
-    viewMode
+    viewMode,
+    dividerColor,
+    startColumnIndex,
+    endColumnIndex,
+    getDate
   }) => {
     const today = React.useMemo(() => {
       if (isUnknownDates) {
@@ -4973,7 +5005,57 @@
       todayColor,
       viewMode
     ]);
-    return /* @__PURE__ */ jsxRuntime.jsx("g", { className: "gridBody", children: /* @__PURE__ */ jsxRuntime.jsx("g", { className: "today", children: today }) });
+    const verticalDividers = React.useMemo(() => {
+      const dividers = [];
+      for (let i = startColumnIndex; i <= endColumnIndex; i++) {
+        const currentDate = getDate(i);
+        const previousDate = i > startColumnIndex ? getDate(i - 1) : null;
+        if (shouldDrawVerticalDivider(
+          currentDate,
+          previousDate,
+          viewMode,
+          isUnknownDates,
+          i,
+          startColumnIndex
+        )) {
+          console.log("Drawing divider at column", i, "date", currentDate);
+          const x2 = additionalLeftSpace + columnWidth * i;
+          console.log("debugging x:", x2);
+          console.log("divider color", dividerColor);
+          dividers.push(
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "line",
+              {
+                x1: x2,
+                x2,
+                y1: 0,
+                y2: ganttFullHeight,
+                stroke: dividerColor,
+                opacity: 0.15,
+                strokeWidth: 5
+              },
+              `divider-${i}`
+            )
+          );
+        }
+      }
+      return dividers;
+    }, [
+      additionalLeftSpace,
+      columnWidth,
+      ganttFullHeight,
+      viewMode,
+      isUnknownDates,
+      startColumnIndex,
+      endColumnIndex,
+      getDate,
+      dividerColor
+    ]);
+    console.log("verticalDividers :>> ", verticalDividers);
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "gridBody", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("g", { className: "today", children: today }),
+      /* @__PURE__ */ jsxRuntime.jsx("g", { className: "verticalDividers", children: verticalDividers })
+    ] });
   };
   const GridBody = React.memo(GridBodyInner);
   function isWeekend(dirtyDate) {
@@ -5177,7 +5259,7 @@
   const ganttTaskRoot = "_ganttTaskRoot_1mu5y_1";
   const ganttTaskContent = "_ganttTaskContent_1mu5y_83";
   const wrapper$2 = "_wrapper_1mu5y_111";
-  const styles$9 = {
+  const styles$8 = {
     ganttTaskRoot,
     ganttTaskContent,
     wrapper: wrapper$2
@@ -5207,13 +5289,13 @@
   const wrapper$1 = "_wrapper_11ld1_1";
   const mainPath$2 = "_mainPath_11ld1_17";
   const clickZone$2 = "_clickZone_11ld1_35";
-  const styles$8 = {
+  const styles$7 = {
     hoverVisibleWrapper: hoverVisibleWrapper$1,
     wrapper: wrapper$1,
     mainPath: mainPath$2,
     clickZone: clickZone$2
   };
-  const fixPositionContainerClass = styles$8.hoverVisibleWrapper;
+  const fixPositionContainerClass = styles$7.hoverVisibleWrapper;
   const FixDependencyPositionInner = ({
     color,
     dependencyFixIndent,
@@ -5260,7 +5342,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
-        className: styles$8.wrapper,
+        className: styles$7.wrapper,
         fill: color,
         stroke: color,
         onMouseDown: handleFixPosition,
@@ -5269,7 +5351,7 @@
             "path",
             {
               d: d2,
-              className: styles$8.mainPath
+              className: styles$7.mainPath
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5279,7 +5361,7 @@
               y,
               width: width + dependencyFixIndent,
               height,
-              className: styles$8.clickZone
+              className: styles$7.clickZone
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: trianglePoints })
@@ -5291,7 +5373,7 @@
   const arrow_clickable = "_arrow_clickable_1k55i_1";
   const mainPath$1 = "_mainPath_1k55i_9";
   const clickZone$1 = "_clickZone_1k55i_27";
-  const styles$7 = {
+  const styles$6 = {
     arrow_clickable,
     mainPath: mainPath$1,
     clickZone: clickZone$1
@@ -5428,12 +5510,12 @@
         "g",
         {
           "data-testid": `task-arrow-${extremityFrom}-${taskFrom.name}-${extremityTo}-${taskTo.name}`,
-          className: `"arrow" ${styles$7.arrow_clickable}`,
+          className: `"arrow" ${styles$6.arrow_clickable}`,
           onDoubleClick,
           onClick,
           children: [
-            onArrowDoubleClick && /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, className: styles$7.clickZone }),
-            /* @__PURE__ */ jsxRuntime.jsx("path", { className: styles$7.mainPath, d: path }),
+            onArrowDoubleClick && /* @__PURE__ */ jsxRuntime.jsx("path", { d: path, className: styles$6.clickZone }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { className: styles$6.mainPath, d: path }),
             /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: trianglePoints })
           ]
         }
@@ -5485,7 +5567,7 @@
     return [path, trianglePoints];
   };
   const relationLine = "_relationLine_ftzm9_1";
-  const styles$6 = {
+  const styles$5 = {
     relationLine
   };
   const RelationLine = ({
@@ -5501,14 +5583,98 @@
         x2,
         y1,
         y2,
-        className: styles$6.relationLine
+        className: styles$5.relationLine
       }
     );
   };
+  const hoverVisibleWrapper = "_hoverVisibleWrapper_11ld1_1";
+  const wrapper = "_wrapper_11ld1_1";
+  const mainPath = "_mainPath_11ld1_17";
+  const clickZone = "_clickZone_11ld1_35";
+  const styles$4 = {
+    hoverVisibleWrapper,
+    wrapper,
+    mainPath,
+    clickZone
+  };
+  const fixWidthContainerClass = styles$4.hoverVisibleWrapper;
+  const BarFixWidthInner = ({
+    x: x2,
+    y,
+    width,
+    height,
+    isLeft,
+    color,
+    handleFixWidth
+  }) => {
+    const halfHeight = React.useMemo(
+      () => Math.round(height / 2),
+      [height]
+    );
+    const d2 = React.useMemo(() => {
+      return `M ${x2} ${y}
+      v ${height}
+      M ${x2} ${y + halfHeight}
+      h ${isLeft ? -width : width}
+    `;
+    }, [
+      x2,
+      y,
+      width,
+      height,
+      halfHeight,
+      isLeft
+    ]);
+    const trianglePoints = React.useMemo(
+      () => generateTrianglePoints(
+        isLeft ? x2 - width : x2 + width,
+        y + halfHeight,
+        5,
+        isLeft
+      ),
+      [
+        x2,
+        y,
+        width,
+        halfHeight,
+        isLeft
+      ]
+    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "g",
+      {
+        className: styles$4.wrapper,
+        fill: color,
+        stroke: color,
+        onMouseDown: handleFixWidth,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "path",
+            {
+              d: d2,
+              className: styles$4.mainPath
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "rect",
+            {
+              x: isLeft ? x2 - width - 2 : x2 - 2,
+              y: y - 5,
+              width: width + 5,
+              height: height + 5,
+              className: styles$4.clickZone
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: trianglePoints })
+        ]
+      }
+    );
+  };
+  const BarFixWidth = React.memo(BarFixWidthInner);
   const barWrapper = "_barWrapper_1kg71_1";
   const barHandle = "_barHandle_1kg71_11";
   const barBackground = "_barBackground_1kg71_43";
-  const styles$5 = {
+  const styles$3 = {
     barWrapper,
     barHandle,
     barBackground
@@ -5600,7 +5766,7 @@
               ry: barCornerRadius,
               rx: barCornerRadius,
               fill: barColor,
-              className: styles$5.barBackground
+              className: styles$3.barBackground
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5636,7 +5802,7 @@
         y,
         width,
         height,
-        className: styles$5.barHandle,
+        className: styles$3.barHandle,
         ry: barCornerRadius,
         rx: barCornerRadius,
         onMouseDown: (e) => {
@@ -5660,7 +5826,7 @@
       "polygon",
       {
         "data-testid": `task-progress-handle-${taskName2}`,
-        className: styles$5.barHandle,
+        className: styles$3.barHandle,
         points: progressPoint,
         onMouseDown: (e) => {
           startMoveProgress(e.clientX);
@@ -5677,7 +5843,7 @@
   const barRelationHandleWrapper = "_barRelationHandleWrapper_1744h_1";
   const barRelationHandle = "_barRelationHandle_1744h_1";
   const barRelationHandle_drawMode = "_barRelationHandle_drawMode_1744h_1";
-  const styles$4 = {
+  const stylesRelationHandle = {
     barRelationHandleWrapper,
     barRelationHandle,
     barRelationHandle_drawMode
@@ -5685,7 +5851,7 @@
   const projectWrapper = "_projectWrapper_1maxt_1";
   const projectBackground = "_projectBackground_1maxt_11";
   const projectTop = "_projectTop_1maxt_21";
-  const styles$3 = {
+  const styles$2 = {
     projectWrapper,
     projectBackground,
     projectTop
@@ -5760,7 +5926,7 @@
           }
         },
         tabIndex: 0,
-        className: styles$3.projectWrapper,
+        className: styles$2.projectWrapper,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
@@ -5772,7 +5938,7 @@
               height: taskHeight,
               rx: barCornerRadius,
               ry: barCornerRadius,
-              className: styles$3.projectBackground
+              className: styles$2.projectBackground
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -5797,13 +5963,13 @@
               height: taskHalfHeight,
               rx: barCornerRadius,
               ry: barCornerRadius,
-              className: styles$3.projectTop
+              className: styles$2.projectTop
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(
             "polygon",
             {
-              className: styles$3.projectTop,
+              className: styles$2.projectTop,
               points: projectLeftTriangle,
               fill: barColor
             }
@@ -5811,7 +5977,7 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             "polygon",
             {
-              className: styles$3.projectTop,
+              className: styles$2.projectTop,
               points: projectRightTriangle,
               fill: barColor
             }
@@ -5916,7 +6082,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
-        className: `${styles$5.barWrapper} ${styles$4.barRelationHandleWrapper}`,
+        className: `${styles$3.barWrapper} ${stylesRelationHandle.barRelationHandleWrapper}`,
         tabIndex: 0,
         children: [
           barDisplay,
@@ -5957,6 +6123,28 @@
       }
     );
   };
+  const BarRelationHandleInner = ({
+    dataTestid,
+    isRelationDrawMode,
+    radius,
+    startDrawRelation,
+    x: x2,
+    y
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "circle",
+      {
+        "data-testid": dataTestid,
+        cx: x2,
+        cy: y,
+        r: radius,
+        className: `${stylesRelationHandle.barRelationHandle} ${isRelationDrawMode ? stylesRelationHandle.barRelationHandle_drawMode : ""}`,
+        onMouseDown: startDrawRelation,
+        onTouchStart: startDrawRelation
+      }
+    );
+  };
+  const BarRelationHandle = React.memo(BarRelationHandleInner);
   const BarSmall = ({
     children: relationhandles,
     colorStyles,
@@ -5988,7 +6176,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "g",
       {
-        className: `${styles$5.barWrapper} ${styles$4.barRelationHandleWrapper}`,
+        className: `${styles$3.barWrapper} ${stylesRelationHandle.barRelationHandleWrapper}`,
         tabIndex: 0,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
@@ -6028,7 +6216,7 @@
   };
   const milestoneWrapper = "_milestoneWrapper_vcirf_1";
   const milestoneBackground = "_milestoneBackground_vcirf_11";
-  const styles$2 = {
+  const styles$1 = {
     milestoneWrapper,
     milestoneBackground
   };
@@ -6063,7 +6251,7 @@
       "g",
       {
         tabIndex: 0,
-        className: `${styles$2.milestoneWrapper} ${styles$4.barRelationHandleWrapper}`,
+        className: `${styles$1.milestoneWrapper} ${stylesRelationHandle.barRelationHandleWrapper}`,
         children: [
           /* @__PURE__ */ jsxRuntime.jsx(
             "rect",
@@ -6077,7 +6265,7 @@
               rx: barCornerRadius,
               ry: barCornerRadius,
               transform,
-              className: styles$2.milestoneBackground,
+              className: styles$1.milestoneBackground,
               onMouseDown: (e) => {
                 onTaskEventStart("move", e.clientX);
               },
@@ -6094,6 +6282,12 @@
       }
     );
   };
+  const barLabel = "_barLabel_y0tyg_1";
+  const barLabelOutside = "_barLabelOutside_y0tyg_25";
+  const style = {
+    barLabel,
+    barLabelOutside
+  };
   const TaskWarningInner = ({
     rtl,
     outOfParentWarnings = void 0,
@@ -6165,118 +6359,6 @@
     ] });
   };
   const TaskWarning = React.memo(TaskWarningInner);
-  const barLabel = "_barLabel_y0tyg_1";
-  const barLabelOutside = "_barLabelOutside_y0tyg_25";
-  const style = {
-    barLabel,
-    barLabelOutside
-  };
-  const hoverVisibleWrapper = "_hoverVisibleWrapper_11ld1_1";
-  const wrapper = "_wrapper_11ld1_1";
-  const mainPath = "_mainPath_11ld1_17";
-  const clickZone = "_clickZone_11ld1_35";
-  const styles$1 = {
-    hoverVisibleWrapper,
-    wrapper,
-    mainPath,
-    clickZone
-  };
-  const fixWidthContainerClass = styles$1.hoverVisibleWrapper;
-  const BarFixWidthInner = ({
-    x: x2,
-    y,
-    width,
-    height,
-    isLeft,
-    color,
-    handleFixWidth
-  }) => {
-    const halfHeight = React.useMemo(
-      () => Math.round(height / 2),
-      [height]
-    );
-    const d2 = React.useMemo(() => {
-      return `M ${x2} ${y}
-      v ${height}
-      M ${x2} ${y + halfHeight}
-      h ${isLeft ? -width : width}
-    `;
-    }, [
-      x2,
-      y,
-      width,
-      height,
-      halfHeight,
-      isLeft
-    ]);
-    const trianglePoints = React.useMemo(
-      () => generateTrianglePoints(
-        isLeft ? x2 - width : x2 + width,
-        y + halfHeight,
-        5,
-        isLeft
-      ),
-      [
-        x2,
-        y,
-        width,
-        halfHeight,
-        isLeft
-      ]
-    );
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "g",
-      {
-        className: styles$1.wrapper,
-        fill: color,
-        stroke: color,
-        onMouseDown: handleFixWidth,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "path",
-            {
-              d: d2,
-              className: styles$1.mainPath
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "rect",
-            {
-              x: isLeft ? x2 - width - 2 : x2 - 2,
-              y: y - 5,
-              width: width + 5,
-              height: height + 5,
-              className: styles$1.clickZone
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx("polygon", { points: trianglePoints })
-        ]
-      }
-    );
-  };
-  const BarFixWidth = React.memo(BarFixWidthInner);
-  const BarRelationHandleInner = ({
-    dataTestid,
-    isRelationDrawMode,
-    radius,
-    startDrawRelation,
-    x: x2,
-    y
-  }) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "circle",
-      {
-        "data-testid": dataTestid,
-        cx: x2,
-        cy: y,
-        r: radius,
-        className: `${styles$4.barRelationHandle} ${isRelationDrawMode ? styles$4.barRelationHandle_drawMode : ""}`,
-        onMouseDown: startDrawRelation,
-        onTouchStart: startDrawRelation
-      }
-    );
-  };
-  const BarRelationHandle = React.memo(BarRelationHandleInner);
   const TaskItemInner = (props) => {
     const {
       childOutOfParentWarnings,
@@ -6533,7 +6615,7 @@
               y: taskYOffset + taskHeight * 0.5,
               className: isTextInside ? style.barLabel : style.barLabel && style.barLabelOutside,
               ref: textRef,
-              children: task.name
+              children: isTextInside ? task.name : ""
             }
           ),
           (outOfParentWarnings || hasDependencyWarning) && /* @__PURE__ */ jsxRuntime.jsx(
@@ -6734,7 +6816,12 @@
                     fixStartPosition,
                     fixEndPosition,
                     handleDeleteTasks,
-                    colorStyles
+                    colorStyles,
+                    enableTaskGrouping,
+                    getTaskInitials: (task2) => {
+                      var _a2;
+                      return ((_a2 = task2.name) == null ? void 0 : _a2.split(" ").map((word) => word[0]).join("").toUpperCase()) ?? "";
+                    }
                   }
                 )
               },
@@ -6913,7 +7000,6 @@
       height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
       width: (ganttTaskRootRef == null ? void 0 : ganttTaskRootRef.current) ? ganttTaskRootRef.current.clientWidth + ganttTaskRootRef.current.scrollLeft : fullSvgWidth
     };
-    console.log("containerStyle:>> ", containerStyle);
     const gridStyle = React.useMemo(
       () => ({
         height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
@@ -7005,7 +7091,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: styles$9.ganttTaskRoot,
+        className: styles$8.ganttTaskRoot,
         ref: ganttTaskRootRef,
         onScroll: onVerticalScrollbarScrollX,
         dir: "ltr",
@@ -7015,7 +7101,7 @@
             "div",
             {
               ref: ganttTaskContentRef,
-              className: styles$9.ganttTaskContent,
+              className: styles$8.ganttTaskContent,
               style: containerStyle,
               onScroll: onScrollVertically,
               children: [
@@ -11632,6 +11718,8 @@
     selectedTaskBackgroundColor: "rgba(252, 248, 227, 0.5)",
     taskDragColor: "#7474ff",
     todayColor: "rgba(252, 248, 227, 0.5)",
+    dividerColor: "rgba(22, 16, 14, 0.27)",
+    //new color
     contextMenuBoxShadow: "rgb(0 0 0 / 25%) 1px 1px 5px 1px",
     contextMenuBgColor: "#fff",
     contextMenuTextColor: "inherit"
@@ -12992,6 +13080,7 @@
       rtl,
       startDate,
       todayColor: colorStyles.todayColor,
+      dividerColor: colorStyles.dividerColor,
       holidayBackgroundColor: colorStyles.holidayBackgroundColor,
       viewMode,
       startColumnIndex,
@@ -13189,7 +13278,7 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: styles$9.wrapper,
+        className: styles$8.wrapper,
         onKeyDown: handleKeyDown,
         tabIndex: 0,
         ref: wrapperRef,