@thepocman/gantt-task-react 1.0.18 → 1.0.20

package/dist/components/calendar/calendar.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { DateSetup, RenderTopHeader, RenderBottomHeader, Distances, ColorStyles } from "../../types/public-types";
+import { ColorStyles, DateSetup, Distances, RenderBottomHeader, RenderTopHeader } from "../../types/public-types";
 export type CalendarProps = {
     additionalLeftSpace: number;
     dateSetup: DateSetup;

package/dist/components/gantt/task-gantt-content.d.ts

@@ -49,4 +49,5 @@ export type TaskGanttContentProps = {
     ContextualPalette?: React.FC<TaskContextualPaletteProps>;
     TaskDependencyContextualPalette?: React.FC<TaskDependencyContextualPaletteProps>;
 };
+export declare const generateRenderId: (task: TaskOrEmpty, index: number) => string;
 export declare const TaskGanttContent: React.FC<TaskGanttContentProps>;

package/dist/components/task-list/task-list.d.ts

@@ -1,6 +1,6 @@
 import type { ComponentType, MouseEvent, RefObject, SyntheticEvent } from "react";
 import React from "react";
-import { ChildByLevelMap, ColorStyles, Column, DateSetup, DependencyMap, Distances, Icons, MapTaskToNestedIndex, OnResizeColumn, RowIndexToTasksMap, Task, TaskListHeaderProps, TaskListTableProps, TaskOrEmpty } from "../../types/public-types";
+import { ChildByLevelMap, ColorStyles, Column, DateSetup, DependencyMap, Distances, Icons, MapTaskToNestedIndex, OnResizeColumn, RowIndexToTasksMap, Task, TaskListHeaderProps, TaskListTableProps, TaskOrEmpty, TaskToRowIndexMap } from "../../types/public-types";
 import { TaskListHeaderActionsProps } from "./TaskListHeaderActions";
 export type TaskListProps = {
     canMoveTasks: boolean;
@@ -29,6 +29,7 @@ export type TaskListProps = {
     icons?: Partial<Icons>;
     isShowTaskNumbers: boolean;
     rowIndexToTasksMap: RowIndexToTasksMap;
+    taskToRowIndexMap: TaskToRowIndexMap;
     mapTaskToNestedIndex: MapTaskToNestedIndex;
     onClick?: (task: TaskOrEmpty) => void;
     onExpanderClick: (task: Task) => void;
@@ -70,6 +71,7 @@ export declare const TaskList: React.NamedExoticComponent<{
     icons?: Partial<Icons>;
     isShowTaskNumbers: boolean;
     rowIndexToTasksMap: RowIndexToTasksMap;
+    taskToRowIndexMap: TaskToRowIndexMap;
     mapTaskToNestedIndex: MapTaskToNestedIndex;
     onClick?: (task: TaskOrEmpty) => void;
     onExpanderClick: (task: Task) => void;

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

@@ -465,7 +465,8 @@ const collectChildren = (arrayRes, mirrorRes, task, childTasksOnLevel, enableTas
   if (comparisonLevel === 1) {
     mirrorRes[task.id] = true;
   }
-  if (task.type === "empty" || (enableTaskGrouping ? task.hideChildren && task.type !== "user" : task.hideChildren)) {
+  const isTaskGroupingEnabled = enableTaskGrouping ? task.hideChildren && task.type !== "user" : task.hideChildren;
+  if (task.type === "empty" || isTaskGroupingEnabled) {
     return;
   }
   const childs = childTasksOnLevel.get(task.id);
@@ -1254,7 +1255,7 @@ const getCriticalPath = (rootTasksMap, childTasksMap, tasksMap, dependencyMargin
   return res;
 };
 function isRealTask(task) {
-  return task.type === "task" || task.type === "milestone" || task.type === "project" || task.type === "user";
+  return task.type === "task" || task.type === "milestone" || task.type === "project" || task.type === "vacation" || task.type === "user";
 }
 const getMapTaskToCoordinatesOnLevel = (task, mapTaskToCoordinates) => {
   const {
@@ -1944,14 +1945,20 @@ const useOptimizedList = (containerRef, property, cellSize) => {
   return indexes;
 };
 const TASK_SPACING = 2;
-const useGroupedVirtualization = (_containerRef, rowIndexToTasksMap, taskHeight) => {
+const useGroupedVirtualization = (_containerRef, rowIndexToTasksMap, taskHeight, taskToRowIndexMap) => {
   const rowEntries = useMemo(() => {
     if (!rowIndexToTasksMap || rowIndexToTasksMap.size === 0)
       return [];
+    if (!taskToRowIndexMap || taskToRowIndexMap.size === 0)
+      return [];
     const rowToHeight = /* @__PURE__ */ new Map();
     for (const levelMap of rowIndexToTasksMap.values()) {
       for (const [rowIndex, tasks] of levelMap.entries()) {
-        const height = tasks.length * (taskHeight + TASK_SPACING);
+        const visibleGroupedTasks = tasks.filter((task) => {
+          var _a;
+          return !((_a = taskToRowIndexMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _a.has(task.id));
+        });
+        const height = visibleGroupedTasks.length * (taskHeight + TASK_SPACING);
         rowToHeight.set(rowIndex, (rowToHeight.get(rowIndex) ?? 0) + height);
       }
     }
@@ -3408,6 +3415,7 @@ const TaskListInner = ({
   dependencyMap,
   distances,
   rowIndexToTasksMap,
+  taskToRowIndexMap,
   fontFamily,
   fontSize,
   fullRowHeight,
@@ -3446,15 +3454,18 @@ const TaskListInner = ({
     onTableResizeStart,
     onColumnResizeStart
   ] = useTableListResize(columnsProp, distances, onResizeColumn);
-  const renderedIndexes = enableTaskGrouping ? useGroupedVirtualization(
+  const groupedIndexes = useGroupedVirtualization(
     taskListContentRef,
     rowIndexToTasksMap,
-    distances.taskHeight
-  ) : useOptimizedList(
+    distances.taskHeight,
+    taskToRowIndexMap
+  );
+  const optimizedIndexes = useOptimizedList(
     taskListContentRef,
     "scrollTop",
     fullRowHeight
   );
+  const renderedIndexes = enableTaskGrouping ? groupedIndexes : optimizedIndexes;
   return /* @__PURE__ */ jsxs("div", { className: styles$e.ganttTableRoot, ref: taskListRef, children: [
     /* @__PURE__ */ jsxs(
       "div",
@@ -4187,6 +4198,7 @@ const TaskListTableDefaultInner = ({
         );
       }
     } else {
+      const seen = /* @__PURE__ */ new Set();
       for (let rowIndex = start; rowIndex <= end; rowIndex++) {
         const taskList = (_a = rowIndexToTasksMap.get(1)) == null ? void 0 : _a.get(rowIndex);
         if (!taskList)
@@ -4195,14 +4207,15 @@ const TaskListTableDefaultInner = ({
           const parent = tasks.find((t2) => t2.id === task.parent);
           if (parent == null ? void 0 : parent.hideChildren)
             continue;
+          if (seen.has(task.id))
+            continue;
+          seen.add(task.id);
           const { id, comparisonLevel } = task;
           let depth = 0;
           let indexStr = "";
-          console.log("comparisonLevel", comparisonLevel);
           const levelMap = mapTaskToNestedIndex.get(comparisonLevel);
           const taskIndex = levelMap == null ? void 0 : levelMap.get(id);
           if (taskIndex) {
-            console.log("object :>> ", [depth, indexStr] = taskIndex);
             [depth, indexStr] = taskIndex;
           }
           renderList.push(
@@ -4278,50 +4291,6 @@ const TaskListTableDefaultInner = ({
   );
 };
 const TaskListTableDefault = memo(TaskListTableDefaultInner);
-const calendarMain = "_calendarMain_lemhx_1";
-const calendarBottomText = "_calendarBottomText_lemhx_13";
-const calendarTopTick = "_calendarTopTick_lemhx_35";
-const calendarTopText = "_calendarTopText_lemhx_43";
-const calendarHeader = "_calendarHeader_lemhx_65";
-const styles$a = {
-  calendarMain,
-  calendarBottomText,
-  calendarTopTick,
-  calendarTopText,
-  calendarHeader
-};
-const TopPartOfCalendar = ({
-  value,
-  x1Line,
-  y1Line,
-  y2Line,
-  xText,
-  yText,
-  colors
-}) => {
-  return /* @__PURE__ */ jsxs("g", { className: "calendarTop", children: [
-    /* @__PURE__ */ jsx(
-      "line",
-      {
-        x1: x1Line,
-        y1: y1Line,
-        x2: x1Line,
-        y2: y2Line,
-        className: styles$a.calendarTopTick
-      }
-    ),
-    value !== null && /* @__PURE__ */ jsx(
-      "text",
-      {
-        y: yText,
-        x: xText,
-        className: styles$a.calendarTopText,
-        style: { fill: colors.barLabelColor },
-        children: value
-      }
-    )
-  ] });
-};
 const defaultRenderBottomHeader = (date, viewMode, dateSetup, index2, isUnknownDates) => {
   if (isUnknownDates) {
     const {
@@ -4451,6 +4420,50 @@ const defaultRenderTopHeader = (date, viewMode, dateSetup) => {
       throw new Error("Unknown viewMode");
   }
 };
+const calendarMain = "_calendarMain_lemhx_1";
+const calendarBottomText = "_calendarBottomText_lemhx_13";
+const calendarTopTick = "_calendarTopTick_lemhx_35";
+const calendarTopText = "_calendarTopText_lemhx_43";
+const calendarHeader = "_calendarHeader_lemhx_65";
+const styles$a = {
+  calendarMain,
+  calendarBottomText,
+  calendarTopTick,
+  calendarTopText,
+  calendarHeader
+};
+const TopPartOfCalendar = ({
+  value,
+  x1Line,
+  y1Line,
+  y2Line,
+  xText,
+  yText,
+  colors
+}) => {
+  return /* @__PURE__ */ jsxs("g", { className: "calendarTop", children: [
+    /* @__PURE__ */ jsx(
+      "line",
+      {
+        x1: x1Line,
+        y1: y1Line,
+        x2: x1Line,
+        y2: y2Line,
+        className: styles$a.calendarTopTick
+      }
+    ),
+    value !== null && /* @__PURE__ */ jsx(
+      "text",
+      {
+        y: yText,
+        x: xText,
+        className: styles$a.calendarTopText,
+        style: { fill: colors.barLabelColor },
+        children: value
+      }
+    )
+  ] });
+};
 const Calendar = ({
   additionalLeftSpace,
   dateSetup,
@@ -5081,9 +5094,9 @@ const Grid = (props) => {
     /* @__PURE__ */ jsx(GridBody, { ...props })
   ] });
 };
-const ganttTaskRoot = "_ganttTaskRoot_jnu0p_1";
-const ganttTaskContent = "_ganttTaskContent_jnu0p_83";
-const wrapper$2 = "_wrapper_jnu0p_111";
+const ganttTaskRoot = "_ganttTaskRoot_1lwsd_1";
+const ganttTaskContent = "_ganttTaskContent_1lwsd_83";
+const wrapper$2 = "_wrapper_1lwsd_111";
 const styles$9 = {
   ganttTaskRoot,
   ganttTaskContent,
@@ -6487,6 +6500,13 @@ const TaskItemInner = (props) => {
   );
 };
 const TaskItem = memo(TaskItemInner);
+const generateRenderId = (task, index2) => {
+  if ("renderId" in task && typeof task.renderId === "string")
+    return task.renderId;
+  if ("type" in task && task.type === "user")
+    return `${task.id}-user`;
+  return `${task.id}-row-${index2}`;
+};
 const TaskGanttContent = ({
   authorizedRelations,
   additionalLeftSpace,
@@ -6532,7 +6552,7 @@ const TaskGanttContent = ({
   taskToRowIndexMap
 }) => {
   const [renderedTasks, renderedArrows, renderedSelectedTasks] = useMemo(() => {
-    var _a;
+    var _a, _b;
     if (!renderedRowIndexes)
       return [null, null, null];
     const [start, end] = renderedRowIndexes;
@@ -6547,7 +6567,7 @@ const TaskGanttContent = ({
         for (let level = 1; level <= comparisonLevels; level++) {
           const levelMap = rowIndexToTasksMap.get(level);
           const rowTasks = levelMap == null ? void 0 : levelMap.get(index2);
-          if (Array.isArray(rowTasks)) {
+          if (rowTasks) {
             tasksAtRow.push(...rowTasks);
           }
         }
@@ -6556,34 +6576,34 @@ const TaskGanttContent = ({
         if (task)
           tasksAtRow.push(task);
       }
-      console.log("tasksAtRow", tasksAtRow);
       for (const task of tasksAtRow) {
         const comparisonLevel = task.comparisonLevel ?? 1;
-        const { id: taskId } = task;
-        if (selectedIdsMirror[taskId] && !addedSelectedTasks[taskId]) {
-          addedSelectedTasks[taskId] = true;
-          const rowIndex = (_a = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _a.get(taskId);
-          if (typeof rowIndex === "number") {
-            selectedTasksRes.push(
-              /* @__PURE__ */ jsx(
-                "rect",
-                {
-                  x: 0,
-                  y: rowIndex * fullRowHeight,
-                  width: "100%",
-                  height: fullRowHeight,
-                  fill: colorStyles.selectedTaskBackgroundColor
-                },
-                `selected-${taskId}`
-              )
-            );
-          }
+        const renderId = generateRenderId(task, index2);
+        const taskId = task.id;
+        const rowIndex = (_a = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _a.get(taskId);
+        if (typeof rowIndex !== "number")
+          continue;
+        const key = `${taskId}-${rowIndex}`;
+        if (selectedIdsMirror[taskId] && !addedSelectedTasks[`${taskId}-${rowIndex}`]) {
+          addedSelectedTasks[key] = true;
+          selectedTasksRes.push(
+            /* @__PURE__ */ jsx(
+              "rect",
+              {
+                x: 0,
+                y: rowIndex * fullRowHeight,
+                width: "100%",
+                height: fullRowHeight,
+                fill: colorStyles.selectedTaskBackgroundColor
+              },
+              `selected-${key}`
+            )
+          );
         }
         if (comparisonLevel > comparisonLevels)
           continue;
         if (task.type === "empty" || task.type === "user")
           continue;
-        const key = `${comparisonLevel}_${task.id}`;
         const criticalPathOnLevel = criticalPaths == null ? void 0 : criticalPaths.get(comparisonLevel);
         const isCritical = !!(criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.tasks.has(task.id));
         const {
@@ -6597,64 +6617,78 @@ const TaskGanttContent = ({
           x1: taskX1,
           x2: taskX2
         } = getTaskCoordinates2(task);
-        tasksRes.push(
-          /* @__PURE__ */ jsx(
-            "svg",
-            {
-              id: task.id,
-              className: "TaskItemClassName",
-              x: containerX + additionalLeftSpace,
-              y: levelY,
-              width: containerWidth,
-              height: fullRowHeight,
-              children: /* @__PURE__ */ jsx(
-                TaskItem,
-                {
-                  getTaskGlobalIndexByRef,
-                  hasChildren: checkHasChildren(task, childTasksMap),
-                  hasDependencyWarning: taskToHasDependencyWarningMap ? checkTaskHasDependencyWarning(task, taskToHasDependencyWarningMap) : false,
-                  progressWidth,
-                  progressX: rtl ? innerX2 : innerX1,
-                  selectTaskOnMouseDown,
-                  task,
-                  taskYOffset,
-                  width,
-                  x1: innerX1,
-                  x2: innerX2,
-                  childOutOfParentWarnings,
-                  distances,
-                  taskHeight,
-                  taskHalfHeight,
-                  isProgressChangeable: !task.isDisabled,
-                  isDateChangeable: !task.isDisabled,
-                  isRelationChangeable: !task.isRelationDisabled,
-                  authorizedRelations,
-                  ganttRelationEvent,
-                  isDelete: !task.isDisabled,
-                  onDoubleClick,
-                  onClick,
-                  onEventStart: handleTaskDragStart,
-                  setTooltipTask,
-                  onRelationStart: handleBarRelationStart,
-                  isSelected: Boolean(selectedIdsMirror[taskId]),
-                  isCritical,
-                  rtl,
-                  fixStartPosition,
-                  fixEndPosition,
-                  handleDeleteTasks,
-                  colorStyles
-                }
-              )
-            },
-            key
-          )
-        );
+        const renderContexts = [];
+        const oneRowDefaultRender = { y: levelY, keySuffix: "default" };
+        renderContexts.push(oneRowDefaultRender);
+        if (enableTaskGrouping && task.parent) {
+          const parentRowIndex = (_b = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _b.get(task.parent);
+          if (typeof parentRowIndex === "number") {
+            const yInUserRow = parentRowIndex * fullRowHeight;
+            renderContexts.push({ y: yInUserRow, keySuffix: "grouped" });
+          }
+        }
+        for (const context of renderContexts) {
+          tasksRes.push(
+            /* @__PURE__ */ jsx(
+              "svg",
+              {
+                id: `${renderId}-${context.keySuffix}`,
+                className: "TaskItemClassName",
+                x: containerX + additionalLeftSpace,
+                y: context.y,
+                width: containerWidth,
+                height: fullRowHeight,
+                children: /* @__PURE__ */ jsx(
+                  TaskItem,
+                  {
+                    getTaskGlobalIndexByRef,
+                    hasChildren: checkHasChildren(task, childTasksMap),
+                    hasDependencyWarning: taskToHasDependencyWarningMap ? checkTaskHasDependencyWarning(task, taskToHasDependencyWarningMap) : false,
+                    progressWidth,
+                    progressX: rtl ? innerX2 : innerX1,
+                    selectTaskOnMouseDown,
+                    task,
+                    taskYOffset,
+                    width,
+                    x1: innerX1,
+                    x2: innerX2,
+                    childOutOfParentWarnings,
+                    distances,
+                    taskHeight,
+                    taskHalfHeight,
+                    isProgressChangeable: !task.isDisabled,
+                    isDateChangeable: !task.isDisabled,
+                    isRelationChangeable: !task.isRelationDisabled,
+                    authorizedRelations,
+                    ganttRelationEvent,
+                    isDelete: !task.isDisabled,
+                    onDoubleClick,
+                    onClick,
+                    onEventStart: handleTaskDragStart,
+                    setTooltipTask,
+                    onRelationStart: handleBarRelationStart,
+                    isSelected: Boolean(selectedIdsMirror[taskId]),
+                    isCritical,
+                    rtl,
+                    fixStartPosition,
+                    fixEndPosition,
+                    handleDeleteTasks,
+                    colorStyles
+                  }
+                )
+              },
+              `${comparisonLevel}_${task.id}_${index2}_${context.keySuffix}`
+            )
+          );
+        }
         const addedDependenciesAtLevel = addedDependencies[comparisonLevel] ?? (addedDependencies[comparisonLevel] = {});
         const addedDependenciesAtTask = addedDependenciesAtLevel[taskId] ?? (addedDependenciesAtLevel[taskId] = {});
         const dependenciesAtLevel = dependencyMap.get(comparisonLevel);
         const dependenciesByTask = dependenciesAtLevel == null ? void 0 : dependenciesAtLevel.get(taskId);
-        dependenciesByTask == null ? void 0 : dependenciesByTask.filter(({ source }) => visibleTasksMirror[source.id]).forEach((dep) => {
+        dependenciesByTask == null ? void 0 : dependenciesByTask.forEach((dep) => {
           var _a2;
+          if (!visibleTasksMirror[dep.source.id])
+            return;
           if (addedDependenciesAtTask[dep.source.id])
             return;
           addedDependenciesAtTask[dep.source.id] = true;
@@ -6698,20 +6732,21 @@ const TaskGanttContent = ({
                   }
                 )
               },
-              `Arrow from ${dep.source.id} to ${taskId} on ${comparisonLevel}`
+              `Arrow from ${dep.source.id} to ${taskId} on ${comparisonLevel} at ${index2}`
             )
           );
         });
         const dependentsAtLevel = dependentMap.get(comparisonLevel);
         const dependentsByTask = dependentsAtLevel == null ? void 0 : dependentsAtLevel.get(taskId);
-        dependentsByTask == null ? void 0 : dependentsByTask.filter(({ dependent }) => visibleTasksMirror[dependent.id]).forEach((dep) => {
-          var _a2, _b;
-          console.log("dependent", dep);
+        dependentsByTask == null ? void 0 : dependentsByTask.forEach((dep) => {
+          var _a2, _b2;
+          if (!visibleTasksMirror[dep.dependent.id])
+            return;
           const addedDepsForDep = addedDependenciesAtLevel[_a2 = dep.dependent.id] ?? (addedDependenciesAtLevel[_a2] = {});
           if (addedDepsForDep[taskId])
             return;
           addedDepsForDep[taskId] = true;
-          const isDepCritical = !!((_b = criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.dependencies.get(dep.dependent.id)) == null ? void 0 : _b.has(task.id));
+          const isDepCritical = !!((_b2 = criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.dependencies.get(dep.dependent.id)) == null ? void 0 : _b2.has(task.id));
           const { x1: toX1, x2: toX2 } = getTaskCoordinates2(dep.dependent);
           const containerX2 = Math.min(toX1, taskX1) - 300;
           const containerWidth2 = Math.max(toX2, taskX2) - containerX2 + 300;
@@ -6751,7 +6786,7 @@ const TaskGanttContent = ({
                   }
                 )
               },
-              `Arrow from ${taskId} to ${dep.dependent.id} on ${comparisonLevel}`
+              `Arrow from ${taskId} to ${dep.dependent.id} on ${comparisonLevel} at ${index2}`
             )
           );
         });
@@ -11448,49 +11483,36 @@ const getMapTaskToRowIndexWithGrouping = (tasks, comparisonLevels, isGrouped = f
   const rowIndexToTasksMap = /* @__PURE__ */ new Map();
   const mapGlobalRowIndexToTask = /* @__PURE__ */ new Map();
   const parentMap = new Map(tasks.map((t2) => [t2.id, t2]));
-  let globalRowIndex = 0;
-  for (let comparisonLevel = 1; comparisonLevel <= comparisonLevels; comparisonLevel++) {
-    const taskToRow = /* @__PURE__ */ new Map();
-    const rowToTask = /* @__PURE__ */ new Map();
-    const rowToTasks = /* @__PURE__ */ new Map();
-    taskToRowIndexMap.set(comparisonLevel, taskToRow);
-    rowIndexToTaskMap.set(comparisonLevel, rowToTask);
-    rowIndexToTasksMap.set(comparisonLevel, rowToTasks);
-    let rowIndex = 0;
-    for (const task of tasks) {
-      if ((task.comparisonLevel ?? 1) !== comparisonLevel)
-        continue;
-      const { id, parent, type } = task;
-      let assignedRowIndex = rowIndex;
-      if (type === "user" || type === "project") {
-        taskToRow.set(id, rowIndex);
-        rowToTask.set(rowIndex, task);
-        rowToTasks.set(rowIndex, [task]);
-        mapGlobalRowIndexToTask.set(globalRowIndex, task);
-        rowIndex++;
-        globalRowIndex++;
+  const rowCounterPerLevel = {};
+  for (let level = 1; level <= comparisonLevels; level++) {
+    taskToRowIndexMap.set(level, /* @__PURE__ */ new Map());
+    rowIndexToTaskMap.set(level, /* @__PURE__ */ new Map());
+    rowIndexToTasksMap.set(level, /* @__PURE__ */ new Map());
+    rowCounterPerLevel[level] = 0;
+  }
+  for (const task of tasks) {
+    const comparisonLevel = task.comparisonLevel ?? 1;
+    const rowIndex = rowCounterPerLevel[comparisonLevel];
+    const taskToRow = taskToRowIndexMap.get(comparisonLevel);
+    const rowToTask = rowIndexToTaskMap.get(comparisonLevel);
+    const rowToTasks = rowIndexToTasksMap.get(comparisonLevel);
+    const { id, parent } = task;
+    const parentTask = parent ? parentMap.get(parent) : null;
+    if (isGrouped && comparisonLevel === 1 && parent && parentTask && parentTask.hideChildren) {
+      const parentRow = taskToRow.get(parent);
+      if (parentRow !== void 0) {
+        const existing = rowToTasks.get(parentRow) ?? [];
+        rowToTasks.set(parentRow, [...existing, task]);
+        taskToRow.set(id, parentRow);
         continue;
       }
-      if (isGrouped && parent) {
-        const parentTask = parentMap.get(parent);
-        const parentRowIndex = taskToRow.get(parent);
-        if ((parentTask == null ? void 0 : parentTask.hideChildren) && parentRowIndex !== void 0) {
-          assignedRowIndex = parentRowIndex;
-        } else {
-          assignedRowIndex = rowIndex;
-          rowIndex++;
-        }
-      } else {
-        assignedRowIndex = rowIndex;
-        rowIndex++;
-      }
-      taskToRow.set(id, assignedRowIndex);
-      rowToTask.set(assignedRowIndex, task);
-      const existing = rowToTasks.get(assignedRowIndex) ?? [];
-      rowToTasks.set(assignedRowIndex, [...existing, task]);
-      mapGlobalRowIndexToTask.set(globalRowIndex, task);
-      globalRowIndex++;
     }
+    taskToRow.set(id, rowIndex);
+    rowToTask.set(rowIndex, task);
+    rowToTasks.set(rowIndex, [task]);
+    const globalIndex = rowIndex * comparisonLevels + (comparisonLevel - 1);
+    mapGlobalRowIndexToTask.set(globalIndex, task);
+    rowCounterPerLevel[comparisonLevel]++;
   }
   return [
     taskToRowIndexMap,
@@ -11788,15 +11810,18 @@ const Gantt = ({
     }
     return totalRows * fullRowHeight;
   }, [enableTaskGrouping, rowIndexToTasksMap, maxLevelLength, fullRowHeight]);
-  const renderedRowIndexes = enableTaskGrouping ? useGroupedVirtualization(
+  const groupedIndexes = useGroupedVirtualization(
     ganttTaskContentRef,
     rowIndexToTasksMap,
-    fullRowHeight
-  ) : useOptimizedList(
+    fullRowHeight,
+    taskToRowIndexMap
+  );
+  const optimizedIndexes = useOptimizedList(
     ganttTaskContentRef,
     "scrollTop",
     fullRowHeight
   );
+  const renderedRowIndexes = enableTaskGrouping ? groupedIndexes : optimizedIndexes;
   const {
     checkHasCopyTasks,
     checkHasCutTasks,
@@ -13051,6 +13076,7 @@ const Gantt = ({
     TaskListTable,
     enableTaskGrouping,
     rowIndexToTasksMap,
+    taskToRowIndexMap,
     canMoveTasks,
     canResizeColumns,
     childTasksMap,

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

@@ -478,7 +478,8 @@
     if (comparisonLevel === 1) {
       mirrorRes[task.id] = true;
     }
-    if (task.type === "empty" || (enableTaskGrouping ? task.hideChildren && task.type !== "user" : task.hideChildren)) {
+    const isTaskGroupingEnabled = enableTaskGrouping ? task.hideChildren && task.type !== "user" : task.hideChildren;
+    if (task.type === "empty" || isTaskGroupingEnabled) {
       return;
     }
     const childs = childTasksOnLevel.get(task.id);
@@ -1267,7 +1268,7 @@
     return res;
   };
   function isRealTask(task) {
-    return task.type === "task" || task.type === "milestone" || task.type === "project" || task.type === "user";
+    return task.type === "task" || task.type === "milestone" || task.type === "project" || task.type === "vacation" || task.type === "user";
   }
   const getMapTaskToCoordinatesOnLevel = (task, mapTaskToCoordinates) => {
     const {
@@ -1957,14 +1958,20 @@
     return indexes;
   };
   const TASK_SPACING = 2;
-  const useGroupedVirtualization = (_containerRef, rowIndexToTasksMap, taskHeight) => {
+  const useGroupedVirtualization = (_containerRef, rowIndexToTasksMap, taskHeight, taskToRowIndexMap) => {
     const rowEntries = React.useMemo(() => {
       if (!rowIndexToTasksMap || rowIndexToTasksMap.size === 0)
         return [];
+      if (!taskToRowIndexMap || taskToRowIndexMap.size === 0)
+        return [];
       const rowToHeight = /* @__PURE__ */ new Map();
       for (const levelMap of rowIndexToTasksMap.values()) {
         for (const [rowIndex, tasks] of levelMap.entries()) {
-          const height = tasks.length * (taskHeight + TASK_SPACING);
+          const visibleGroupedTasks = tasks.filter((task) => {
+            var _a;
+            return !((_a = taskToRowIndexMap.get(task.comparisonLevel ?? 1)) == null ? void 0 : _a.has(task.id));
+          });
+          const height = visibleGroupedTasks.length * (taskHeight + TASK_SPACING);
           rowToHeight.set(rowIndex, (rowToHeight.get(rowIndex) ?? 0) + height);
         }
       }
@@ -3421,6 +3428,7 @@
     dependencyMap,
     distances,
     rowIndexToTasksMap,
+    taskToRowIndexMap,
     fontFamily,
     fontSize,
     fullRowHeight,
@@ -3459,15 +3467,18 @@
       onTableResizeStart,
       onColumnResizeStart
     ] = useTableListResize(columnsProp, distances, onResizeColumn);
-    const renderedIndexes = enableTaskGrouping ? useGroupedVirtualization(
+    const groupedIndexes = useGroupedVirtualization(
       taskListContentRef,
       rowIndexToTasksMap,
-      distances.taskHeight
-    ) : useOptimizedList(
+      distances.taskHeight,
+      taskToRowIndexMap
+    );
+    const optimizedIndexes = useOptimizedList(
       taskListContentRef,
       "scrollTop",
       fullRowHeight
     );
+    const renderedIndexes = enableTaskGrouping ? groupedIndexes : optimizedIndexes;
     return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$e.ganttTableRoot, ref: taskListRef, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(
         "div",
@@ -4200,6 +4211,7 @@
           );
         }
       } else {
+        const seen = /* @__PURE__ */ new Set();
         for (let rowIndex = start; rowIndex <= end; rowIndex++) {
           const taskList = (_a = rowIndexToTasksMap.get(1)) == null ? void 0 : _a.get(rowIndex);
           if (!taskList)
@@ -4208,14 +4220,15 @@
             const parent = tasks.find((t) => t.id === task.parent);
             if (parent == null ? void 0 : parent.hideChildren)
               continue;
+            if (seen.has(task.id))
+              continue;
+            seen.add(task.id);
             const { id, comparisonLevel } = task;
             let depth = 0;
             let indexStr = "";
-            console.log("comparisonLevel", comparisonLevel);
             const levelMap = mapTaskToNestedIndex.get(comparisonLevel);
             const taskIndex = levelMap == null ? void 0 : levelMap.get(id);
             if (taskIndex) {
-              console.log("object :>> ", [depth, indexStr] = taskIndex);
               [depth, indexStr] = taskIndex;
             }
             renderList.push(
@@ -4291,50 +4304,6 @@
     );
   };
   const TaskListTableDefault = React.memo(TaskListTableDefaultInner);
-  const calendarMain = "_calendarMain_lemhx_1";
-  const calendarBottomText = "_calendarBottomText_lemhx_13";
-  const calendarTopTick = "_calendarTopTick_lemhx_35";
-  const calendarTopText = "_calendarTopText_lemhx_43";
-  const calendarHeader = "_calendarHeader_lemhx_65";
-  const styles$a = {
-    calendarMain,
-    calendarBottomText,
-    calendarTopTick,
-    calendarTopText,
-    calendarHeader
-  };
-  const TopPartOfCalendar = ({
-    value,
-    x1Line,
-    y1Line,
-    y2Line,
-    xText,
-    yText,
-    colors
-  }) => {
-    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "calendarTop", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "line",
-        {
-          x1: x1Line,
-          y1: y1Line,
-          x2: x1Line,
-          y2: y2Line,
-          className: styles$a.calendarTopTick
-        }
-      ),
-      value !== null && /* @__PURE__ */ jsxRuntime.jsx(
-        "text",
-        {
-          y: yText,
-          x: xText,
-          className: styles$a.calendarTopText,
-          style: { fill: colors.barLabelColor },
-          children: value
-        }
-      )
-    ] });
-  };
   const defaultRenderBottomHeader = (date, viewMode, dateSetup, index2, isUnknownDates) => {
     if (isUnknownDates) {
       const {
@@ -4464,6 +4433,50 @@
         throw new Error("Unknown viewMode");
     }
   };
+  const calendarMain = "_calendarMain_lemhx_1";
+  const calendarBottomText = "_calendarBottomText_lemhx_13";
+  const calendarTopTick = "_calendarTopTick_lemhx_35";
+  const calendarTopText = "_calendarTopText_lemhx_43";
+  const calendarHeader = "_calendarHeader_lemhx_65";
+  const styles$a = {
+    calendarMain,
+    calendarBottomText,
+    calendarTopTick,
+    calendarTopText,
+    calendarHeader
+  };
+  const TopPartOfCalendar = ({
+    value,
+    x1Line,
+    y1Line,
+    y2Line,
+    xText,
+    yText,
+    colors
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs("g", { className: "calendarTop", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "line",
+        {
+          x1: x1Line,
+          y1: y1Line,
+          x2: x1Line,
+          y2: y2Line,
+          className: styles$a.calendarTopTick
+        }
+      ),
+      value !== null && /* @__PURE__ */ jsxRuntime.jsx(
+        "text",
+        {
+          y: yText,
+          x: xText,
+          className: styles$a.calendarTopText,
+          style: { fill: colors.barLabelColor },
+          children: value
+        }
+      )
+    ] });
+  };
   const Calendar = ({
     additionalLeftSpace,
     dateSetup,
@@ -5094,9 +5107,9 @@
       /* @__PURE__ */ jsxRuntime.jsx(GridBody, { ...props })
     ] });
   };
-  const ganttTaskRoot = "_ganttTaskRoot_jnu0p_1";
-  const ganttTaskContent = "_ganttTaskContent_jnu0p_83";
-  const wrapper$2 = "_wrapper_jnu0p_111";
+  const ganttTaskRoot = "_ganttTaskRoot_1lwsd_1";
+  const ganttTaskContent = "_ganttTaskContent_1lwsd_83";
+  const wrapper$2 = "_wrapper_1lwsd_111";
   const styles$9 = {
     ganttTaskRoot,
     ganttTaskContent,
@@ -6500,6 +6513,13 @@
     );
   };
   const TaskItem = React.memo(TaskItemInner);
+  const generateRenderId = (task, index2) => {
+    if ("renderId" in task && typeof task.renderId === "string")
+      return task.renderId;
+    if ("type" in task && task.type === "user")
+      return `${task.id}-user`;
+    return `${task.id}-row-${index2}`;
+  };
   const TaskGanttContent = ({
     authorizedRelations,
     additionalLeftSpace,
@@ -6545,7 +6565,7 @@
     taskToRowIndexMap
   }) => {
     const [renderedTasks, renderedArrows, renderedSelectedTasks] = React.useMemo(() => {
-      var _a;
+      var _a, _b;
       if (!renderedRowIndexes)
         return [null, null, null];
       const [start, end] = renderedRowIndexes;
@@ -6560,7 +6580,7 @@
           for (let level = 1; level <= comparisonLevels; level++) {
             const levelMap = rowIndexToTasksMap.get(level);
             const rowTasks = levelMap == null ? void 0 : levelMap.get(index2);
-            if (Array.isArray(rowTasks)) {
+            if (rowTasks) {
               tasksAtRow.push(...rowTasks);
             }
           }
@@ -6569,34 +6589,34 @@
           if (task)
             tasksAtRow.push(task);
         }
-        console.log("tasksAtRow", tasksAtRow);
         for (const task of tasksAtRow) {
           const comparisonLevel = task.comparisonLevel ?? 1;
-          const { id: taskId } = task;
-          if (selectedIdsMirror[taskId] && !addedSelectedTasks[taskId]) {
-            addedSelectedTasks[taskId] = true;
-            const rowIndex = (_a = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _a.get(taskId);
-            if (typeof rowIndex === "number") {
-              selectedTasksRes.push(
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  "rect",
-                  {
-                    x: 0,
-                    y: rowIndex * fullRowHeight,
-                    width: "100%",
-                    height: fullRowHeight,
-                    fill: colorStyles.selectedTaskBackgroundColor
-                  },
-                  `selected-${taskId}`
-                )
-              );
-            }
+          const renderId = generateRenderId(task, index2);
+          const taskId = task.id;
+          const rowIndex = (_a = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _a.get(taskId);
+          if (typeof rowIndex !== "number")
+            continue;
+          const key = `${taskId}-${rowIndex}`;
+          if (selectedIdsMirror[taskId] && !addedSelectedTasks[`${taskId}-${rowIndex}`]) {
+            addedSelectedTasks[key] = true;
+            selectedTasksRes.push(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "rect",
+                {
+                  x: 0,
+                  y: rowIndex * fullRowHeight,
+                  width: "100%",
+                  height: fullRowHeight,
+                  fill: colorStyles.selectedTaskBackgroundColor
+                },
+                `selected-${key}`
+              )
+            );
           }
           if (comparisonLevel > comparisonLevels)
             continue;
           if (task.type === "empty" || task.type === "user")
             continue;
-          const key = `${comparisonLevel}_${task.id}`;
           const criticalPathOnLevel = criticalPaths == null ? void 0 : criticalPaths.get(comparisonLevel);
           const isCritical = !!(criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.tasks.has(task.id));
           const {
@@ -6610,64 +6630,78 @@
             x1: taskX1,
             x2: taskX2
           } = getTaskCoordinates2(task);
-          tasksRes.push(
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "svg",
-              {
-                id: task.id,
-                className: "TaskItemClassName",
-                x: containerX + additionalLeftSpace,
-                y: levelY,
-                width: containerWidth,
-                height: fullRowHeight,
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  TaskItem,
-                  {
-                    getTaskGlobalIndexByRef,
-                    hasChildren: checkHasChildren(task, childTasksMap),
-                    hasDependencyWarning: taskToHasDependencyWarningMap ? checkTaskHasDependencyWarning(task, taskToHasDependencyWarningMap) : false,
-                    progressWidth,
-                    progressX: rtl ? innerX2 : innerX1,
-                    selectTaskOnMouseDown,
-                    task,
-                    taskYOffset,
-                    width,
-                    x1: innerX1,
-                    x2: innerX2,
-                    childOutOfParentWarnings,
-                    distances,
-                    taskHeight,
-                    taskHalfHeight,
-                    isProgressChangeable: !task.isDisabled,
-                    isDateChangeable: !task.isDisabled,
-                    isRelationChangeable: !task.isRelationDisabled,
-                    authorizedRelations,
-                    ganttRelationEvent,
-                    isDelete: !task.isDisabled,
-                    onDoubleClick,
-                    onClick,
-                    onEventStart: handleTaskDragStart,
-                    setTooltipTask,
-                    onRelationStart: handleBarRelationStart,
-                    isSelected: Boolean(selectedIdsMirror[taskId]),
-                    isCritical,
-                    rtl,
-                    fixStartPosition,
-                    fixEndPosition,
-                    handleDeleteTasks,
-                    colorStyles
-                  }
-                )
-              },
-              key
-            )
-          );
+          const renderContexts = [];
+          const oneRowDefaultRender = { y: levelY, keySuffix: "default" };
+          renderContexts.push(oneRowDefaultRender);
+          if (enableTaskGrouping && task.parent) {
+            const parentRowIndex = (_b = taskToRowIndexMap.get(comparisonLevel)) == null ? void 0 : _b.get(task.parent);
+            if (typeof parentRowIndex === "number") {
+              const yInUserRow = parentRowIndex * fullRowHeight;
+              renderContexts.push({ y: yInUserRow, keySuffix: "grouped" });
+            }
+          }
+          for (const context of renderContexts) {
+            tasksRes.push(
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  id: `${renderId}-${context.keySuffix}`,
+                  className: "TaskItemClassName",
+                  x: containerX + additionalLeftSpace,
+                  y: context.y,
+                  width: containerWidth,
+                  height: fullRowHeight,
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    TaskItem,
+                    {
+                      getTaskGlobalIndexByRef,
+                      hasChildren: checkHasChildren(task, childTasksMap),
+                      hasDependencyWarning: taskToHasDependencyWarningMap ? checkTaskHasDependencyWarning(task, taskToHasDependencyWarningMap) : false,
+                      progressWidth,
+                      progressX: rtl ? innerX2 : innerX1,
+                      selectTaskOnMouseDown,
+                      task,
+                      taskYOffset,
+                      width,
+                      x1: innerX1,
+                      x2: innerX2,
+                      childOutOfParentWarnings,
+                      distances,
+                      taskHeight,
+                      taskHalfHeight,
+                      isProgressChangeable: !task.isDisabled,
+                      isDateChangeable: !task.isDisabled,
+                      isRelationChangeable: !task.isRelationDisabled,
+                      authorizedRelations,
+                      ganttRelationEvent,
+                      isDelete: !task.isDisabled,
+                      onDoubleClick,
+                      onClick,
+                      onEventStart: handleTaskDragStart,
+                      setTooltipTask,
+                      onRelationStart: handleBarRelationStart,
+                      isSelected: Boolean(selectedIdsMirror[taskId]),
+                      isCritical,
+                      rtl,
+                      fixStartPosition,
+                      fixEndPosition,
+                      handleDeleteTasks,
+                      colorStyles
+                    }
+                  )
+                },
+                `${comparisonLevel}_${task.id}_${index2}_${context.keySuffix}`
+              )
+            );
+          }
           const addedDependenciesAtLevel = addedDependencies[comparisonLevel] ?? (addedDependencies[comparisonLevel] = {});
           const addedDependenciesAtTask = addedDependenciesAtLevel[taskId] ?? (addedDependenciesAtLevel[taskId] = {});
           const dependenciesAtLevel = dependencyMap.get(comparisonLevel);
           const dependenciesByTask = dependenciesAtLevel == null ? void 0 : dependenciesAtLevel.get(taskId);
-          dependenciesByTask == null ? void 0 : dependenciesByTask.filter(({ source }) => visibleTasksMirror[source.id]).forEach((dep) => {
+          dependenciesByTask == null ? void 0 : dependenciesByTask.forEach((dep) => {
             var _a2;
+            if (!visibleTasksMirror[dep.source.id])
+              return;
             if (addedDependenciesAtTask[dep.source.id])
               return;
             addedDependenciesAtTask[dep.source.id] = true;
@@ -6711,20 +6745,21 @@
                     }
                   )
                 },
-                `Arrow from ${dep.source.id} to ${taskId} on ${comparisonLevel}`
+                `Arrow from ${dep.source.id} to ${taskId} on ${comparisonLevel} at ${index2}`
               )
             );
           });
           const dependentsAtLevel = dependentMap.get(comparisonLevel);
           const dependentsByTask = dependentsAtLevel == null ? void 0 : dependentsAtLevel.get(taskId);
-          dependentsByTask == null ? void 0 : dependentsByTask.filter(({ dependent }) => visibleTasksMirror[dependent.id]).forEach((dep) => {
-            var _a2, _b;
-            console.log("dependent", dep);
+          dependentsByTask == null ? void 0 : dependentsByTask.forEach((dep) => {
+            var _a2, _b2;
+            if (!visibleTasksMirror[dep.dependent.id])
+              return;
             const addedDepsForDep = addedDependenciesAtLevel[_a2 = dep.dependent.id] ?? (addedDependenciesAtLevel[_a2] = {});
             if (addedDepsForDep[taskId])
               return;
             addedDepsForDep[taskId] = true;
-            const isDepCritical = !!((_b = criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.dependencies.get(dep.dependent.id)) == null ? void 0 : _b.has(task.id));
+            const isDepCritical = !!((_b2 = criticalPathOnLevel == null ? void 0 : criticalPathOnLevel.dependencies.get(dep.dependent.id)) == null ? void 0 : _b2.has(task.id));
             const { x1: toX1, x2: toX2 } = getTaskCoordinates2(dep.dependent);
             const containerX2 = Math.min(toX1, taskX1) - 300;
             const containerWidth2 = Math.max(toX2, taskX2) - containerX2 + 300;
@@ -6764,7 +6799,7 @@
                     }
                   )
                 },
-                `Arrow from ${taskId} to ${dep.dependent.id} on ${comparisonLevel}`
+                `Arrow from ${taskId} to ${dep.dependent.id} on ${comparisonLevel} at ${index2}`
               )
             );
           });
@@ -11461,49 +11496,36 @@
     const rowIndexToTasksMap = /* @__PURE__ */ new Map();
     const mapGlobalRowIndexToTask = /* @__PURE__ */ new Map();
     const parentMap = new Map(tasks.map((t) => [t.id, t]));
-    let globalRowIndex = 0;
-    for (let comparisonLevel = 1; comparisonLevel <= comparisonLevels; comparisonLevel++) {
-      const taskToRow = /* @__PURE__ */ new Map();
-      const rowToTask = /* @__PURE__ */ new Map();
-      const rowToTasks = /* @__PURE__ */ new Map();
-      taskToRowIndexMap.set(comparisonLevel, taskToRow);
-      rowIndexToTaskMap.set(comparisonLevel, rowToTask);
-      rowIndexToTasksMap.set(comparisonLevel, rowToTasks);
-      let rowIndex = 0;
-      for (const task of tasks) {
-        if ((task.comparisonLevel ?? 1) !== comparisonLevel)
-          continue;
-        const { id, parent, type } = task;
-        let assignedRowIndex = rowIndex;
-        if (type === "user" || type === "project") {
-          taskToRow.set(id, rowIndex);
-          rowToTask.set(rowIndex, task);
-          rowToTasks.set(rowIndex, [task]);
-          mapGlobalRowIndexToTask.set(globalRowIndex, task);
-          rowIndex++;
-          globalRowIndex++;
+    const rowCounterPerLevel = {};
+    for (let level = 1; level <= comparisonLevels; level++) {
+      taskToRowIndexMap.set(level, /* @__PURE__ */ new Map());
+      rowIndexToTaskMap.set(level, /* @__PURE__ */ new Map());
+      rowIndexToTasksMap.set(level, /* @__PURE__ */ new Map());
+      rowCounterPerLevel[level] = 0;
+    }
+    for (const task of tasks) {
+      const comparisonLevel = task.comparisonLevel ?? 1;
+      const rowIndex = rowCounterPerLevel[comparisonLevel];
+      const taskToRow = taskToRowIndexMap.get(comparisonLevel);
+      const rowToTask = rowIndexToTaskMap.get(comparisonLevel);
+      const rowToTasks = rowIndexToTasksMap.get(comparisonLevel);
+      const { id, parent } = task;
+      const parentTask = parent ? parentMap.get(parent) : null;
+      if (isGrouped && comparisonLevel === 1 && parent && parentTask && parentTask.hideChildren) {
+        const parentRow = taskToRow.get(parent);
+        if (parentRow !== void 0) {
+          const existing = rowToTasks.get(parentRow) ?? [];
+          rowToTasks.set(parentRow, [...existing, task]);
+          taskToRow.set(id, parentRow);
           continue;
         }
-        if (isGrouped && parent) {
-          const parentTask = parentMap.get(parent);
-          const parentRowIndex = taskToRow.get(parent);
-          if ((parentTask == null ? void 0 : parentTask.hideChildren) && parentRowIndex !== void 0) {
-            assignedRowIndex = parentRowIndex;
-          } else {
-            assignedRowIndex = rowIndex;
-            rowIndex++;
-          }
-        } else {
-          assignedRowIndex = rowIndex;
-          rowIndex++;
-        }
-        taskToRow.set(id, assignedRowIndex);
-        rowToTask.set(assignedRowIndex, task);
-        const existing = rowToTasks.get(assignedRowIndex) ?? [];
-        rowToTasks.set(assignedRowIndex, [...existing, task]);
-        mapGlobalRowIndexToTask.set(globalRowIndex, task);
-        globalRowIndex++;
       }
+      taskToRow.set(id, rowIndex);
+      rowToTask.set(rowIndex, task);
+      rowToTasks.set(rowIndex, [task]);
+      const globalIndex = rowIndex * comparisonLevels + (comparisonLevel - 1);
+      mapGlobalRowIndexToTask.set(globalIndex, task);
+      rowCounterPerLevel[comparisonLevel]++;
     }
     return [
       taskToRowIndexMap,
@@ -11801,15 +11823,18 @@
       }
       return totalRows * fullRowHeight;
     }, [enableTaskGrouping, rowIndexToTasksMap, maxLevelLength, fullRowHeight]);
-    const renderedRowIndexes = enableTaskGrouping ? useGroupedVirtualization(
+    const groupedIndexes = useGroupedVirtualization(
       ganttTaskContentRef,
       rowIndexToTasksMap,
-      fullRowHeight
-    ) : useOptimizedList(
+      fullRowHeight,
+      taskToRowIndexMap
+    );
+    const optimizedIndexes = useOptimizedList(
       ganttTaskContentRef,
       "scrollTop",
       fullRowHeight
     );
+    const renderedRowIndexes = enableTaskGrouping ? groupedIndexes : optimizedIndexes;
     const {
       checkHasCopyTasks,
       checkHasCutTasks,
@@ -13064,6 +13089,7 @@
       TaskListTable,
       enableTaskGrouping,
       rowIndexToTasksMap,
+      taskToRowIndexMap,
       canMoveTasks,
       canResizeColumns,
       childTasksMap,

package/dist/helpers/get-unique-tasks-from-row-index-to-tasks-map.d.ts

@@ -0,0 +1,2 @@
+import { RowIndexToTasksMap, TaskOrEmpty } from "../types/public-types";
+export declare const getUniqueTasksFromRowIndexToTasksMap: (rowIndexToTasksMap: RowIndexToTasksMap) => TaskOrEmpty[];

package/dist/helpers/use-grouped-optimized-list.d.ts

@@ -1,3 +1,3 @@
-import type { RowIndexToTasksMap } from "../types/public-types";
+import type { RowIndexToTasksMap, TaskToRowIndexMap } from "../types/public-types";
 import type { OptimizedListParams } from "./use-optimized-list";
-export declare const useGroupedVirtualization: (_containerRef: React.RefObject<HTMLElement>, rowIndexToTasksMap: RowIndexToTasksMap, taskHeight: number) => OptimizedListParams;
+export declare const useGroupedVirtualization: (_containerRef: React.RefObject<HTMLElement>, rowIndexToTasksMap: RowIndexToTasksMap, taskHeight: number, taskToRowIndexMap: TaskToRowIndexMap) => OptimizedListParams;

package/dist/style.css

@@ -332,7 +332,7 @@
   stroke: #e0e0e0;
   stroke-width: 1.4;
 }
-._ganttTaskRoot_jnu0p_1 {
+._ganttTaskRoot_1lwsd_1 {
   display: flex;
   flex-direction: column;
   overflow-x: scroll;
@@ -344,7 +344,7 @@
 
 /* Only chrome otherwise the firefox scrollbar has no edge*/
 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
-  ._ganttTaskRoot_jnu0p_1 {
+  ._ganttTaskRoot_1lwsd_1 {
     scrollbar-width: thin;
   }
 }
@@ -373,7 +373,7 @@
   background-clip: padding-box;
 } */
 
-._ganttTaskContent_jnu0p_83 {
+._ganttTaskContent_1lwsd_83 {
   margin: 0;
   padding: 0;
   overflow-x: hidden;
@@ -382,15 +382,15 @@
 
 /* Only chrome otherwise the firefox scrollbar has no edges*/
 @media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
-  ._ganttTaskContent_jnu0p_83 {
+  ._ganttTaskContent_1lwsd_83 {
     scrollbar-width: thin;
   }
 }
 
-._wrapper_jnu0p_111 {
+._wrapper_1lwsd_111 {
   display: grid;
   overflow-x: hidden;
-  overflow-y: hidden;
+  overflow-y: auto;
   padding: 0;
   margin: 0;
   list-style: none;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thepocman/gantt-task-react",
-  "version": "1.0.18",
+  "version": "1.0.20",
   "description": "Fork of gantt-task-react with support for grouped tasks on a single row when collapsed",
   "author": "Adrian Bueno <adrianlbueno@users.noreply.github.com>",
   "homepage": "https://github.com/adrianlbueno/gantt-task-react#readme",