@thepocman/gantt-task-react 1.0.24 → 1.0.27

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

@@ -1862,7 +1862,7 @@ const tooltipDefaultContainer = "_tooltipDefaultContainer_qip67_1";
 const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_qip67_13";
 const tooltipDetailsContainer = "_tooltipDetailsContainer_qip67_25";
 const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_qip67_49";
-const styles$j = {
+const styles$i = {
   tooltipDefaultContainer,
   tooltipDefaultContainerParagraph,
   tooltipDetailsContainer,
@@ -1902,12 +1902,12 @@ const StandardTooltipContent = ({ task, fontSize, fontFamily }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$j.tooltipDefaultContainer,
+      className: styles$i.tooltipDefaultContainer,
       style: style2,
       children: [
         /* @__PURE__ */ 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__ */ jsx("p", { className: styles$j.tooltipDefaultContainerParagraph, children: `Duration: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} day(s)` }),
-        /* @__PURE__ */ jsx("p", { className: styles$j.tooltipDefaultContainerParagraph, children: !!task.progress && `Progress: ${task.progress} %` })
+        task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsx("p", { className: styles$i.tooltipDefaultContainerParagraph, children: `Duration: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} day(s)` }),
+        /* @__PURE__ */ jsx("p", { className: styles$i.tooltipDefaultContainerParagraph, children: !!task.progress && `Progress: ${task.progress} %` })
       ]
     }
   );
@@ -1989,7 +1989,7 @@ const useGroupedVirtualization = (_containerRef, rowIndexToTasksMap, taskHeight)
   ];
 };
 const button$2 = "_button_1eue5_1";
-const styles$i = {
+const styles$h = {
   button: button$2
 };
 const AddColumn = (props) => {
@@ -2007,14 +2007,14 @@ const AddColumn = (props) => {
   }
   return /* @__PURE__ */ 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,
@@ -2057,7 +2057,7 @@ const TitleColumn = (props) => {
     "div",
     {
       "data-testid": `title-table-cell-${name}`,
-      className: `${styles$h.taskListNameWrapper}`,
+      className: `${styles$g.taskListNameWrapper}`,
       style: {
         paddingLeft: depth * nestedTaskNameOffset
       },
@@ -2066,7 +2066,7 @@ const TitleColumn = (props) => {
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `${styles$h.taskListExpander} ${!hasChildren ? styles$h.taskListEmptyExpander : ""}`,
+            className: `${styles$g.taskListExpander} ${!hasChildren ? styles$g.taskListEmptyExpander : ""}`,
             onClick,
             style: {
               width: expandIconWidth
@@ -2076,7 +2076,7 @@ const TitleColumn = (props) => {
         ),
         /* @__PURE__ */ jsxs("div", { style: {
           color: colors.barLabelColor
-        }, className: styles$h.taskName, children: [
+        }, className: styles$g.taskName, children: [
           isShowTaskNumbers && /* @__PURE__ */ jsxs("b", { children: [
             indexStr,
             " "
@@ -3173,7 +3173,7 @@ const DependenciesColumn = ({
   }, children: dependencies.map(({ name }) => name).join(", ") });
 };
 const button$1 = "_button_1eue5_1";
-const styles$g = {
+const styles$f = {
   button: button$1
 };
 const DeleteColumn = (props) => {
@@ -3185,10 +3185,10 @@ const DeleteColumn = (props) => {
   }, [task, handleDeleteTasks]);
   return /* @__PURE__ */ 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) => {
@@ -3200,7 +3200,7 @@ const EditColumn = (props) => {
   }, [task, handleEditTask]);
   return /* @__PURE__ */ 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] = useState(() => {
@@ -3406,7 +3406,7 @@ const ganttTableWrapper = "_ganttTableWrapper_1ogga_15";
 const taskListResizer = "_taskListResizer_1ogga_79";
 const taskListContent = "_taskListContent_1ogga_127";
 const hidden = "_hidden_1ogga_147";
-const styles$e = {
+const styles$d = {
   ganttTableRoot,
   ganttTableWrapper,
   taskListResizer,
@@ -3474,11 +3474,11 @@ const TaskListInner = ({
     fullRowHeight
   );
   const renderedIndexes = enableTaskGrouping ? groupedIndexes : optimizedIndexes;
-  return /* @__PURE__ */ jsxs("div", { className: styles$e.ganttTableRoot, ref: taskListRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$d.ganttTableRoot, ref: taskListRef, children: [
     /* @__PURE__ */ jsxs(
       "div",
       {
-        className: styles$e.ganttTableWrapper,
+        className: styles$d.ganttTableWrapper,
         style: {
           width: tableWidth
         },
@@ -3501,7 +3501,7 @@ const TaskListInner = ({
           /* @__PURE__ */ jsx(
             "div",
             {
-              className: styles$e.taskListContent,
+              className: styles$d.taskListContent,
               ref: taskListContentRef,
               onScroll: onScrollTableListContentVertically,
               children: /* @__PURE__ */ jsx(
@@ -3564,7 +3564,7 @@ const TaskListInner = ({
     /* @__PURE__ */ jsx(
       "div",
       {
-        className: styles$e.taskListResizer,
+        className: styles$d.taskListResizer,
         onMouseDown: (event) => {
           onTableResizeStart(event.clientX);
         },
@@ -3585,7 +3585,7 @@ const ganttTable_HeaderContent = "_ganttTable_HeaderContent_1ndeo_29";
 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,
@@ -3682,7 +3682,7 @@ const TaskListHeaderDefaultInner = (props) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$d.ganttTable_Header,
+      className: styles$c.ganttTable_Header,
       style: {
         height: headerHeight,
         fontFamily,
@@ -3693,7 +3693,7 @@ const TaskListHeaderDefaultInner = (props) => {
           index2 > 0 && /* @__PURE__ */ jsx(
             "div",
             {
-              className: styles$d.ganttTable_HeaderSeparator,
+              className: styles$c.ganttTable_HeaderSeparator,
               style: {
                 height: headerHeight * 0.5,
                 marginTop: headerHeight * 0.2
@@ -3704,14 +3704,14 @@ const TaskListHeaderDefaultInner = (props) => {
             "div",
             {
               "data-testid": `table-column-header-${title}`,
-              className: styles$d.ganttTable_HeaderItem,
+              className: styles$c.ganttTable_HeaderItem,
               style: {
                 minWidth: width,
                 maxWidth: width
               },
               children: [
-                /* @__PURE__ */ jsxs("div", { className: styles$d.ganttTable_HeaderContent, children: [
-                  /* @__PURE__ */ jsx("div", { className: styles$d.ganttTable_HeaderTitle, children: title }),
+                /* @__PURE__ */ jsxs("div", { className: styles$c.ganttTable_HeaderContent, children: [
+                  /* @__PURE__ */ jsx("div", { className: styles$c.ganttTable_HeaderTitle, children: title }),
                   title === "Name" && /* @__PURE__ */ jsx(
                     TaskListHeaderActions,
                     {
@@ -3726,7 +3726,7 @@ const TaskListHeaderDefaultInner = (props) => {
                   "div",
                   {
                     "data-testid": `table-column-header-resize-handle-${title}`,
-                    className: styles$d.resizer,
+                    className: styles$c.resizer,
                     onMouseDown: (event) => {
                       onColumnResizeStart(index2, event.clientX);
                     },
@@ -3756,7 +3756,7 @@ const dropAfter = "_dropAfter_1e35i_57";
 const dropAfterLighten = "_dropAfterLighten_1e35i_81";
 const dropBefore = "_dropBefore_1e35i_105";
 const dropBeforeLighten = "_dropBeforeLighten_1e35i_127";
-const styles$c = {
+const styles$b = {
   taskListTableRow,
   taskListTableRowGrabbing,
   cut,
@@ -3968,7 +3968,7 @@ const TaskListTableRowInner = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `${styles$c.taskListTableRow} ${isCut ? styles$c.cut : ""}`,
+      className: `${styles$b.taskListTableRow} ${isCut ? styles$b.cut : ""}`,
       onMouseDown: onRootMouseDown,
       style: {
         height: fullRowHeight,
@@ -3986,7 +3986,7 @@ const TaskListTableRowInner = ({
           return /* @__PURE__ */ jsx(
             "div",
             {
-              className: styles$c.taskListCell,
+              className: styles$b.taskListCell,
               style: {
                 minWidth: width,
                 maxWidth: width
@@ -3994,7 +3994,7 @@ const TaskListTableRowInner = ({
               children: /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: styles$c.taskListCellInner,
+                  className: styles$b.taskListCellInner,
                   onDragEnter: () => {
                     setHoveringState({
                       hoveringBefore: false,
@@ -4034,7 +4034,7 @@ const TaskListTableRowInner = ({
           "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,
@@ -4064,7 +4064,7 @@ const TaskListTableRowInner = ({
           "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,
@@ -4106,7 +4106,7 @@ const checkHasChildren = (task, childTasksMap) => {
   return childs.length > 0;
 };
 const taskListWrapper = "_taskListWrapper_5941j_1";
-const styles$b = {
+const styles$a = {
   taskListWrapper
 };
 const TaskListTableDefaultInner = ({
@@ -4292,7 +4292,7 @@ const TaskListTableDefaultInner = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$b.taskListWrapper,
+      className: styles$a.taskListWrapper,
       style: { fontFamily, fontSize },
       children: renderedListWithOffset
     }
@@ -4446,7 +4446,7 @@ const calendarBottomText = "_calendarBottomText_lemhx_13";
 const calendarTopTick = "_calendarTopTick_lemhx_35";
 const calendarTopText = "_calendarTopText_lemhx_43";
 const calendarHeader = "_calendarHeader_lemhx_65";
-const styles$a = {
+const styles$9 = {
   calendarMain,
   calendarBottomText,
   calendarTopTick,
@@ -4470,7 +4470,7 @@ const TopPartOfCalendar = ({
         y1: y1Line,
         x2: x1Line,
         y2: y2Line,
-        className: styles$a.calendarTopTick
+        className: styles$9.calendarTopTick
       }
     ),
     value !== null && /* @__PURE__ */ jsx(
@@ -4478,7 +4478,7 @@ const TopPartOfCalendar = ({
       {
         y: yText,
         x: xText,
-        className: styles$a.calendarTopText,
+        className: styles$9.calendarTopText,
         style: { fill: colors.barLabelColor },
         children: value
       }
@@ -4527,7 +4527,7 @@ const Calendar = ({
           {
             y: headerHeight * 0.8,
             x: columnWidth * i2 + columnWidth * 0.5,
-            className: styles$a.calendarBottomText,
+            className: styles$9.calendarBottomText,
             style: { fill: colors.barLabelColor },
             children: bottomValue
           },
@@ -4568,7 +4568,7 @@ const Calendar = ({
           {
             y: headerHeight * 0.8,
             x: additionalLeftSpace + columnWidth * i2 + columnWidth * 0.5,
-            className: styles$a.calendarBottomText,
+            className: styles$9.calendarBottomText,
             style: { fill: colors.barLabelColor },
             children: halfYear
           },
@@ -4611,7 +4611,7 @@ const Calendar = ({
           {
             y: headerHeight * 0.8,
             x: additionalLeftSpace + columnWidth * i2 + columnWidth * 0.5,
-            className: styles$a.calendarBottomText,
+            className: styles$9.calendarBottomText,
             style: { fill: colors.barLabelColor },
             children: quarter
           },
@@ -4653,7 +4653,7 @@ const Calendar = ({
           {
             y: headerHeight * 0.8,
             x: additionalLeftSpace + columnWidth * i2 + columnWidth * 0.5,
-            className: styles$a.calendarBottomText,
+            className: styles$9.calendarBottomText,
             style: { fill: colors.barLabelColor },
             children: bottomValue
           },
@@ -4708,7 +4708,7 @@ const Calendar = ({
           {
             y: headerHeight * 0.8,
             x: additionalLeftSpace + columnWidth * (i2 + +rtl),
-            className: styles$a.calendarBottomText,
+            className: styles$9.calendarBottomText,
             style: { fill: colors.barLabelColor },
             children: bottomValue
           },
@@ -4753,7 +4753,7 @@ const Calendar = ({
           {
             y: headerHeight * 0.8,
             x: additionalLeftSpace + columnWidth * i2 + columnWidth * 0.5,
-            className: styles$a.calendarBottomText,
+            className: styles$9.calendarBottomText,
             style: { fill: colors.barLabelColor },
             children: bottomValue
           },
@@ -4800,7 +4800,7 @@ const Calendar = ({
           {
             y: headerHeight * 0.8,
             x: additionalLeftSpace + columnWidth * (i2 + +rtl),
-            className: styles$a.calendarBottomText,
+            className: styles$9.calendarBottomText,
             fontFamily,
             style: { fill: colors.barLabelColor },
             children: bottomValue
@@ -4845,7 +4845,7 @@ const Calendar = ({
           {
             y: headerHeight * 0.8,
             x: additionalLeftSpace + columnWidth * (i2 + +rtl),
-            className: styles$a.calendarBottomText,
+            className: styles$9.calendarBottomText,
             fontFamily,
             style: { fill: colors.barLabelColor },
             children: bottomValue
@@ -4909,7 +4909,7 @@ const Calendar = ({
     case ViewMode.Hour:
       [topValues, bottomValues] = getCalendarValuesForHour();
   }
-  return /* @__PURE__ */ jsx("div", { className: styles$a.calendarMain, style: { width: fullSvgWidth }, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: styles$9.calendarMain, style: { width: fullSvgWidth }, children: /* @__PURE__ */ jsx(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -4923,6 +4923,34 @@ const Calendar = ({
     }
   ) });
 };
+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,
@@ -4931,7 +4959,11 @@ const GridBodyInner = ({
   todayColor,
   rtl,
   startDate,
-  viewMode
+  viewMode,
+  dividerColor,
+  startColumnIndex,
+  endColumnIndex,
+  getDate
 }) => {
   const today = useMemo(() => {
     if (isUnknownDates) {
@@ -4960,7 +4992,57 @@ const GridBodyInner = ({
     todayColor,
     viewMode
   ]);
-  return /* @__PURE__ */ jsx("g", { className: "gridBody", children: /* @__PURE__ */ jsx("g", { className: "today", children: today }) });
+  const verticalDividers = useMemo(() => {
+    const dividers = [];
+    for (let i2 = startColumnIndex; i2 <= endColumnIndex; i2++) {
+      const currentDate = getDate(i2);
+      const previousDate = i2 > startColumnIndex ? getDate(i2 - 1) : null;
+      if (shouldDrawVerticalDivider(
+        currentDate,
+        previousDate,
+        viewMode,
+        isUnknownDates,
+        i2,
+        startColumnIndex
+      )) {
+        console.log("Drawing divider at column", i2, "date", currentDate);
+        const x3 = additionalLeftSpace + columnWidth * i2;
+        console.log("debugging x:", x3);
+        console.log("divider color", dividerColor);
+        dividers.push(
+          /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: x3,
+              x2: x3,
+              y1: 0,
+              y2: ganttFullHeight,
+              stroke: dividerColor,
+              opacity: 0.15,
+              strokeWidth: 5
+            },
+            `divider-${i2}`
+          )
+        );
+      }
+    }
+    return dividers;
+  }, [
+    additionalLeftSpace,
+    columnWidth,
+    ganttFullHeight,
+    viewMode,
+    isUnknownDates,
+    startColumnIndex,
+    endColumnIndex,
+    getDate,
+    dividerColor
+  ]);
+  console.log("verticalDividers :>> ", verticalDividers);
+  return /* @__PURE__ */ jsxs("g", { className: "gridBody", children: [
+    /* @__PURE__ */ jsx("g", { className: "today", children: today }),
+    /* @__PURE__ */ jsx("g", { className: "verticalDividers", children: verticalDividers })
+  ] });
 };
 const GridBody = memo(GridBodyInner);
 function isWeekend(dirtyDate) {
@@ -5164,7 +5246,7 @@ const Grid = (props) => {
 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
@@ -5194,13 +5276,13 @@ const hoverVisibleWrapper$1 = "_hoverVisibleWrapper_11ld1_1";
 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,
@@ -5247,7 +5329,7 @@ const FixDependencyPositionInner = ({
   return /* @__PURE__ */ jsxs(
     "g",
     {
-      className: styles$8.wrapper,
+      className: styles$7.wrapper,
       fill: color,
       stroke: color,
       onMouseDown: handleFixPosition,
@@ -5256,7 +5338,7 @@ const FixDependencyPositionInner = ({
           "path",
           {
             d: d4,
-            className: styles$8.mainPath
+            className: styles$7.mainPath
           }
         ),
         /* @__PURE__ */ jsx(
@@ -5266,7 +5348,7 @@ const FixDependencyPositionInner = ({
             y: y3,
             width: width + dependencyFixIndent,
             height,
-            className: styles$8.clickZone
+            className: styles$7.clickZone
           }
         ),
         /* @__PURE__ */ jsx("polygon", { points: trianglePoints })
@@ -5278,7 +5360,7 @@ const FixDependencyPosition = memo(FixDependencyPositionInner);
 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
@@ -5415,12 +5497,12 @@ const ArrowInner = ({
       "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__ */ jsx("path", { d: path, className: styles$7.clickZone }),
-          /* @__PURE__ */ jsx("path", { className: styles$7.mainPath, d: path }),
+          onArrowDoubleClick && /* @__PURE__ */ jsx("path", { d: path, className: styles$6.clickZone }),
+          /* @__PURE__ */ jsx("path", { className: styles$6.mainPath, d: path }),
           /* @__PURE__ */ jsx("polygon", { points: trianglePoints })
         ]
       }
@@ -5472,7 +5554,7 @@ const drownPathAndTriangle = (indexForm, fromX1, fromX2, fromY, isTaskFromLeftSi
   return [path, trianglePoints];
 };
 const relationLine = "_relationLine_ftzm9_1";
-const styles$6 = {
+const styles$5 = {
   relationLine
 };
 const RelationLine = ({
@@ -5488,14 +5570,98 @@ const RelationLine = ({
       x2: x22,
       y1,
       y2: y22,
-      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: x3,
+  y: y3,
+  width,
+  height,
+  isLeft,
+  color,
+  handleFixWidth
+}) => {
+  const halfHeight = useMemo(
+    () => Math.round(height / 2),
+    [height]
+  );
+  const d4 = useMemo(() => {
+    return `M ${x3} ${y3}
+      v ${height}
+      M ${x3} ${y3 + halfHeight}
+      h ${isLeft ? -width : width}
+    `;
+  }, [
+    x3,
+    y3,
+    width,
+    height,
+    halfHeight,
+    isLeft
+  ]);
+  const trianglePoints = useMemo(
+    () => generateTrianglePoints(
+      isLeft ? x3 - width : x3 + width,
+      y3 + halfHeight,
+      5,
+      isLeft
+    ),
+    [
+      x3,
+      y3,
+      width,
+      halfHeight,
+      isLeft
+    ]
+  );
+  return /* @__PURE__ */ jsxs(
+    "g",
+    {
+      className: styles$4.wrapper,
+      fill: color,
+      stroke: color,
+      onMouseDown: handleFixWidth,
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: d4,
+            className: styles$4.mainPath
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "rect",
+          {
+            x: isLeft ? x3 - width - 2 : x3 - 2,
+            y: y3 - 5,
+            width: width + 5,
+            height: height + 5,
+            className: styles$4.clickZone
+          }
+        ),
+        /* @__PURE__ */ jsx("polygon", { points: trianglePoints })
+      ]
+    }
+  );
+};
+const BarFixWidth = 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
@@ -5587,7 +5753,7 @@ const BarDisplay = ({
             ry: barCornerRadius,
             rx: barCornerRadius,
             fill: barColor,
-            className: styles$5.barBackground
+            className: styles$3.barBackground
           }
         ),
         /* @__PURE__ */ jsx(
@@ -5623,7 +5789,7 @@ const BarDateHandle = ({
       y: y3,
       width,
       height,
-      className: styles$5.barHandle,
+      className: styles$3.barHandle,
       ry: barCornerRadius,
       rx: barCornerRadius,
       onMouseDown: (e2) => {
@@ -5647,7 +5813,7 @@ const BarProgressHandle = ({
     "polygon",
     {
       "data-testid": `task-progress-handle-${taskName2}`,
-      className: styles$5.barHandle,
+      className: styles$3.barHandle,
       points: progressPoint,
       onMouseDown: (e2) => {
         startMoveProgress(e2.clientX);
@@ -5664,7 +5830,7 @@ const BarProgressHandle = ({
 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
@@ -5672,7 +5838,7 @@ const styles$4 = {
 const projectWrapper = "_projectWrapper_1maxt_1";
 const projectBackground = "_projectBackground_1maxt_11";
 const projectTop = "_projectTop_1maxt_21";
-const styles$3 = {
+const styles$2 = {
   projectWrapper,
   projectBackground,
   projectTop
@@ -5747,7 +5913,7 @@ const ProjectDisplay = ({
         }
       },
       tabIndex: 0,
-      className: styles$3.projectWrapper,
+      className: styles$2.projectWrapper,
       children: [
         /* @__PURE__ */ jsx(
           "rect",
@@ -5759,7 +5925,7 @@ const ProjectDisplay = ({
             height: taskHeight,
             rx: barCornerRadius,
             ry: barCornerRadius,
-            className: styles$3.projectBackground
+            className: styles$2.projectBackground
           }
         ),
         /* @__PURE__ */ jsx(
@@ -5784,13 +5950,13 @@ const ProjectDisplay = ({
             height: taskHalfHeight,
             rx: barCornerRadius,
             ry: barCornerRadius,
-            className: styles$3.projectTop
+            className: styles$2.projectTop
           }
         ),
         /* @__PURE__ */ jsx(
           "polygon",
           {
-            className: styles$3.projectTop,
+            className: styles$2.projectTop,
             points: projectLeftTriangle,
             fill: barColor
           }
@@ -5798,7 +5964,7 @@ const ProjectDisplay = ({
         /* @__PURE__ */ jsx(
           "polygon",
           {
-            className: styles$3.projectTop,
+            className: styles$2.projectTop,
             points: projectRightTriangle,
             fill: barColor
           }
@@ -5903,7 +6069,7 @@ const Bar = ({
   return /* @__PURE__ */ jsxs(
     "g",
     {
-      className: `${styles$5.barWrapper} ${styles$4.barRelationHandleWrapper}`,
+      className: `${styles$3.barWrapper} ${stylesRelationHandle.barRelationHandleWrapper}`,
       tabIndex: 0,
       children: [
         barDisplay,
@@ -5944,6 +6110,28 @@ const Bar = ({
     }
   );
 };
+const BarRelationHandleInner = ({
+  dataTestid,
+  isRelationDrawMode,
+  radius,
+  startDrawRelation,
+  x: x3,
+  y: y3
+}) => {
+  return /* @__PURE__ */ jsx(
+    "circle",
+    {
+      "data-testid": dataTestid,
+      cx: x3,
+      cy: y3,
+      r: radius,
+      className: `${stylesRelationHandle.barRelationHandle} ${isRelationDrawMode ? stylesRelationHandle.barRelationHandle_drawMode : ""}`,
+      onMouseDown: startDrawRelation,
+      onTouchStart: startDrawRelation
+    }
+  );
+};
+const BarRelationHandle = memo(BarRelationHandleInner);
 const BarSmall = ({
   children: relationhandles,
   colorStyles,
@@ -5975,7 +6163,7 @@ const BarSmall = ({
   return /* @__PURE__ */ jsxs(
     "g",
     {
-      className: `${styles$5.barWrapper} ${styles$4.barRelationHandleWrapper}`,
+      className: `${styles$3.barWrapper} ${stylesRelationHandle.barRelationHandleWrapper}`,
       tabIndex: 0,
       children: [
         /* @__PURE__ */ jsx(
@@ -6015,7 +6203,7 @@ const BarSmall = ({
 };
 const milestoneWrapper = "_milestoneWrapper_vcirf_1";
 const milestoneBackground = "_milestoneBackground_vcirf_11";
-const styles$2 = {
+const styles$1 = {
   milestoneWrapper,
   milestoneBackground
 };
@@ -6050,7 +6238,7 @@ const Milestone = ({
     "g",
     {
       tabIndex: 0,
-      className: `${styles$2.milestoneWrapper} ${styles$4.barRelationHandleWrapper}`,
+      className: `${styles$1.milestoneWrapper} ${stylesRelationHandle.barRelationHandleWrapper}`,
       children: [
         /* @__PURE__ */ jsx(
           "rect",
@@ -6064,7 +6252,7 @@ const Milestone = ({
             rx: barCornerRadius,
             ry: barCornerRadius,
             transform,
-            className: styles$2.milestoneBackground,
+            className: styles$1.milestoneBackground,
             onMouseDown: (e2) => {
               onTaskEventStart("move", e2.clientX);
             },
@@ -6081,6 +6269,12 @@ const Milestone = ({
     }
   );
 };
+const barLabel = "_barLabel_y0tyg_1";
+const barLabelOutside = "_barLabelOutside_y0tyg_25";
+const style = {
+  barLabel,
+  barLabelOutside
+};
 const TaskWarningInner = ({
   rtl,
   outOfParentWarnings = void 0,
@@ -6152,118 +6346,6 @@ const TaskWarningInner = ({
   ] });
 };
 const TaskWarning = 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: x3,
-  y: y3,
-  width,
-  height,
-  isLeft,
-  color,
-  handleFixWidth
-}) => {
-  const halfHeight = useMemo(
-    () => Math.round(height / 2),
-    [height]
-  );
-  const d4 = useMemo(() => {
-    return `M ${x3} ${y3}
-      v ${height}
-      M ${x3} ${y3 + halfHeight}
-      h ${isLeft ? -width : width}
-    `;
-  }, [
-    x3,
-    y3,
-    width,
-    height,
-    halfHeight,
-    isLeft
-  ]);
-  const trianglePoints = useMemo(
-    () => generateTrianglePoints(
-      isLeft ? x3 - width : x3 + width,
-      y3 + halfHeight,
-      5,
-      isLeft
-    ),
-    [
-      x3,
-      y3,
-      width,
-      halfHeight,
-      isLeft
-    ]
-  );
-  return /* @__PURE__ */ jsxs(
-    "g",
-    {
-      className: styles$1.wrapper,
-      fill: color,
-      stroke: color,
-      onMouseDown: handleFixWidth,
-      children: [
-        /* @__PURE__ */ jsx(
-          "path",
-          {
-            d: d4,
-            className: styles$1.mainPath
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "rect",
-          {
-            x: isLeft ? x3 - width - 2 : x3 - 2,
-            y: y3 - 5,
-            width: width + 5,
-            height: height + 5,
-            className: styles$1.clickZone
-          }
-        ),
-        /* @__PURE__ */ jsx("polygon", { points: trianglePoints })
-      ]
-    }
-  );
-};
-const BarFixWidth = memo(BarFixWidthInner);
-const BarRelationHandleInner = ({
-  dataTestid,
-  isRelationDrawMode,
-  radius,
-  startDrawRelation,
-  x: x3,
-  y: y3
-}) => {
-  return /* @__PURE__ */ jsx(
-    "circle",
-    {
-      "data-testid": dataTestid,
-      cx: x3,
-      cy: y3,
-      r: radius,
-      className: `${styles$4.barRelationHandle} ${isRelationDrawMode ? styles$4.barRelationHandle_drawMode : ""}`,
-      onMouseDown: startDrawRelation,
-      onTouchStart: startDrawRelation
-    }
-  );
-};
-const BarRelationHandle = memo(BarRelationHandleInner);
 const TaskItemInner = (props) => {
   const {
     childOutOfParentWarnings,
@@ -6520,7 +6602,7 @@ const TaskItemInner = (props) => {
             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__ */ jsx(
@@ -6721,7 +6803,12 @@ const TaskGanttContent = ({
                   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()) ?? "";
+                  }
                 }
               )
             },
@@ -6900,7 +6987,6 @@ const TaskGanttInner = (props) => {
     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 = useMemo(
     () => ({
       height: Math.max(ganttFullHeight, minimumRowDisplayed * rowHeight),
@@ -6992,7 +7078,7 @@ const TaskGanttInner = (props) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$9.ganttTaskRoot,
+      className: styles$8.ganttTaskRoot,
       ref: ganttTaskRootRef,
       onScroll: onVerticalScrollbarScrollX,
       dir: "ltr",
@@ -7002,7 +7088,7 @@ const TaskGanttInner = (props) => {
           "div",
           {
             ref: ganttTaskContentRef,
-            className: styles$9.ganttTaskContent,
+            className: styles$8.ganttTaskContent,
             style: containerStyle,
             onScroll: onScrollVertically,
             children: [
@@ -11619,6 +11705,8 @@ const defaultColors = {
   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"
@@ -12979,6 +13067,7 @@ const Gantt = ({
     rtl,
     startDate,
     todayColor: colorStyles.todayColor,
+    dividerColor: colorStyles.dividerColor,
     holidayBackgroundColor: colorStyles.holidayBackgroundColor,
     viewMode,
     startColumnIndex,
@@ -13176,7 +13265,7 @@ const Gantt = ({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$9.wrapper,
+      className: styles$8.wrapper,
       onKeyDown: handleKeyDown,
       tabIndex: 0,
       ref: wrapperRef,