gantt-lib 0.124.1 → 0.125.0

package/dist/index.d.mts

@@ -1004,6 +1004,10 @@ interface TaskListProps {
     filteredTaskIds?: Set<string>;
     /** Whether filter is currently active (needed to distinguish "no filter" from "filter with no matches") */
     isFilterActive?: boolean;
+    /** Critical path display mode. In 'hide' mode only critical tasks (and their parents) are shown. */
+    criticalPathMode?: 'highlight' | 'hide';
+    /** Task IDs that belong to the critical path (leaves + lifted parents). Used when criticalPathMode === 'hide'. */
+    criticalTaskIds?: Set<string>;
     /** Additional columns to display after built-in columns */
     additionalColumns?: TaskListColumn<any>[];
     /** Built-in or custom TaskList column IDs to hide after column placement is resolved */

package/dist/index.d.ts

@@ -1004,6 +1004,10 @@ interface TaskListProps {
     filteredTaskIds?: Set<string>;
     /** Whether filter is currently active (needed to distinguish "no filter" from "filter with no matches") */
     isFilterActive?: boolean;
+    /** Critical path display mode. In 'hide' mode only critical tasks (and their parents) are shown. */
+    criticalPathMode?: 'highlight' | 'hide';
+    /** Task IDs that belong to the critical path (leaves + lifted parents). Used when criticalPathMode === 'hide'. */
+    criticalTaskIds?: Set<string>;
     /** Additional columns to display after built-in columns */
     additionalColumns?: TaskListColumn<any>[];
     /** Built-in or custom TaskList column IDs to hide after column placement is resolved */

package/dist/index.js

@@ -3177,7 +3177,8 @@ var TaskRow = import_react3.default.memo(
       }
       return calculateTaskBar(baselineStartDate, baselineEndDate, monthStart, dayWidth);
     }, [baselineStartDate, baselineEndDate, milestone, monthStart, dayWidth]);
-    const barColor = isExpired ? "var(--gantt-expired-color)" : task.color || "var(--gantt-task-bar-default-color)";
+    const criticalBarColor = "var(--gantt-critical-path-color, #dc2626)";
+    const barColor = isExpired ? "var(--gantt-expired-color)" : isCritical ? criticalBarColor : task.color || "var(--gantt-task-bar-default-color)";
     const progressWidth = (0, import_react3.useMemo)(() => {
       if (task.progress === void 0 || task.progress <= 0) return 0;
       return Math.min(100, Math.max(0, Math.round(task.progress)));
@@ -3186,21 +3187,31 @@ var TaskRow = import_react3.default.memo(
       if (isExpired) {
         return "color-mix(in srgb, var(--gantt-expired-color) 40%, black)";
       }
+      if (isCritical) {
+        return `color-mix(in srgb, ${criticalBarColor} 40%, black)`;
+      }
       if (progressWidth === 100) {
         return task.accepted ? "var(--gantt-progress-accepted, #22c55e)" : "var(--gantt-progress-completed, #fbbf24)";
       }
       const baseColor = task.color || "var(--gantt-task-bar-default-color)";
       return `color-mix(in srgb, ${baseColor} 40%, black)`;
-    }, [isExpired, progressWidth, task.accepted, task.color]);
+    }, [isCritical, isExpired, progressWidth, task.accepted, task.color]);
     const externalTaskNameColor = (0, import_react3.useMemo)(() => {
       if (isExpired) {
         return "color-mix(in srgb, var(--gantt-expired-color) 40%, black)";
       }
       const baseColor = isParent ? task.color || defaultParentBarColor : task.color || "var(--gantt-task-bar-default-color)";
       return `color-mix(in srgb, ${baseColor} 40%, black)`;
-    }, [defaultParentBarColor, isExpired, isParent, task.color]);
+    }, [defaultParentBarColor, isCritical, isExpired, isParent, task.color]);
     const barStyle = (0, import_react3.useMemo)(() => {
       const parentBarColor = task.color || defaultParentBarColor;
+      if (isCritical && !isExpired) {
+        const c = criticalBarColor;
+        if (isParent) {
+          return { backgroundColor: c, "--gantt-parent-bar-color": c };
+        }
+        return { backgroundColor: c };
+      }
       if (isParent) {
         if (progressWidth >= 100) {
           const c = isExpired ? "color-mix(in srgb, var(--gantt-expired-color) 40%, black)" : `color-mix(in srgb, ${parentBarColor} 40%, black)`;
@@ -3212,7 +3223,7 @@ var TaskRow = import_react3.default.memo(
         return { backgroundColor: progressColor };
       }
       return { backgroundColor: barColor };
-    }, [defaultParentBarColor, isExpired, isParent, progressWidth, barColor, progressColor, task.color]);
+    }, [isCritical, defaultParentBarColor, isExpired, isParent, progressWidth, barColor, progressColor, task.color]);
     const handleDragEnd = (result) => {
       const updatedTask = {
         ...normalizedTask,
@@ -3791,6 +3802,7 @@ var DependencyLines = import_react7.default.memo(({
       for (const task of allTasks) {
         if (positions.has(task.id)) continue;
         if (collapsedParentIds.size > 0 && isTaskHidden(task.id, collapsedParentIds, taskMap)) continue;
+        if (rowIndexByTaskId && !rowIndexByTaskId.has(task.id)) continue;
         hidden.add(task.id);
         const override = dragOverrides?.get(task.id);
         const computed = resolveTaskHorizontalGeometry(task, monthStart, dayWidth, override);
@@ -7703,6 +7715,8 @@ var TaskList = ({
   filterMode = "highlight",
   filteredTaskIds = /* @__PURE__ */ new Set(),
   isFilterActive = false,
+  criticalPathMode,
+  criticalTaskIds,
   additionalColumns,
   hiddenTaskListColumns,
   taskListColumnWidths,
@@ -7763,8 +7777,11 @@ var TaskList = ({
     if (filterMode === "hide" && isFilterActive) {
       tasks2 = tasks2.filter((task) => filteredTaskIds.has(task.id));
     }
+    if (criticalPathMode === "hide" && criticalTaskIds) {
+      tasks2 = tasks2.filter((task) => criticalTaskIds.has(task.id));
+    }
     return tasks2;
-  }, [orderedTasks, collapsedParentIds, filterMode, filteredTaskIds, isFilterActive]);
+  }, [orderedTasks, collapsedParentIds, filterMode, filteredTaskIds, isFilterActive, criticalPathMode, criticalTaskIds]);
   const totalHeight = (0, import_react13.useMemo)(
     () => visibleTasks.length * rowHeight,
     [visibleTasks.length, rowHeight]
@@ -13005,13 +13022,18 @@ function TaskGanttChartInner(props, ref) {
     if (filterMode === "hide") {
       return /* @__PURE__ */ new Set();
     }
-    if ((!highlightedTaskIds || highlightedTaskIds.size === 0) && matchedTaskIds.size === 0) {
+    const criticalHighlightMode = criticalPathMode === "highlight";
+    const hasExternalHighlights = !!highlightedTaskIds && highlightedTaskIds.size > 0;
+    if (!hasExternalHighlights && matchedTaskIds.size === 0 && !criticalHighlightMode) {
       return /* @__PURE__ */ new Set();
     }
     const mergedHighlightedTaskIds = new Set(highlightedTaskIds ?? []);
     matchedTaskIds.forEach((taskId) => mergedHighlightedTaskIds.add(taskId));
+    if (criticalHighlightMode) {
+      criticalTaskIds.forEach((taskId) => mergedHighlightedTaskIds.add(taskId));
+    }
     return mergedHighlightedTaskIds;
-  }, [filterMode, highlightedTaskIds, matchedTaskIds]);
+  }, [filterMode, highlightedTaskIds, matchedTaskIds, criticalPathMode, criticalTaskIds]);
   const totalGridHeight = (0, import_react18.useMemo)(
     () => visibleTasks.length * effectiveRowHeight,
     [effectiveRowHeight, visibleTasks.length]
@@ -13765,6 +13787,8 @@ function TaskGanttChartInner(props, ref) {
                     filterMode,
                     filteredTaskIds: matchedTaskIds,
                     isFilterActive: !!taskFilter,
+                    criticalPathMode,
+                    criticalTaskIds: criticalPathMode === "hide" ? criticalTaskIds : void 0,
                     additionalColumns,
                     hiddenTaskListColumns,
                     taskListColumnWidths,
@@ -14004,7 +14028,7 @@ function TaskGanttChartInner(props, ref) {
                                     onCascade: handleCascade,
                                     highlightExpiredTasks,
                                     showBaseline,
-                                    isFilterMatch: filterMode === "highlight" ? matchedTaskIds.has(task.id) : false,
+                                    isFilterMatch: (filterMode === "highlight" ? matchedTaskIds.has(task.id) : false) || (criticalPathMode === "highlight" ? criticalTaskIds.has(task.id) : false),
                                     isCritical: criticalTaskIds.has(task.id),
                                     businessDays,
                                     customDays,