gantt-lib 0.27.0 → 0.28.0

package/dist/index.d.mts

@@ -569,6 +569,8 @@ interface GanttChartProps {
      * Dependencies are still computed on ALL tasks (normalizedTasks).
      */
     taskFilter?: TaskPredicate;
+    /** Filter mode: 'highlight' shows all tasks with yellow highlight on matches, 'hide' hides non-matching tasks (default: 'highlight') */
+    filterMode?: 'highlight' | 'hide';
     /** Set of collapsed parent task IDs for controlled mode */
     collapsedParentIds?: Set<string>;
     /** Callback when collapse/expand button is clicked (controlled mode) */
@@ -816,6 +818,12 @@ interface TaskListProps {
     businessDays?: boolean;
     /** Task IDs highlighted by the active filter */
     highlightedTaskIds?: Set<string>;
+    /** Filter mode: 'highlight' shows yellow highlight on matches, 'hide' hides non-matching tasks */
+    filterMode?: 'highlight' | 'hide';
+    /** Task IDs that match the filter (used for hide mode). When undefined, no filtering is applied */
+    filteredTaskIds?: Set<string>;
+    /** Whether filter is currently active (needed to distinguish "no filter" from "filter with no matches") */
+    isFilterActive?: boolean;
 }
 /**
  * TaskList component - displays tasks in a table format as an overlay

package/dist/index.d.ts

@@ -569,6 +569,8 @@ interface GanttChartProps {
      * Dependencies are still computed on ALL tasks (normalizedTasks).
      */
     taskFilter?: TaskPredicate;
+    /** Filter mode: 'highlight' shows all tasks with yellow highlight on matches, 'hide' hides non-matching tasks (default: 'highlight') */
+    filterMode?: 'highlight' | 'hide';
     /** Set of collapsed parent task IDs for controlled mode */
     collapsedParentIds?: Set<string>;
     /** Callback when collapse/expand button is clicked (controlled mode) */
@@ -816,6 +818,12 @@ interface TaskListProps {
     businessDays?: boolean;
     /** Task IDs highlighted by the active filter */
     highlightedTaskIds?: Set<string>;
+    /** Filter mode: 'highlight' shows yellow highlight on matches, 'hide' hides non-matching tasks */
+    filterMode?: 'highlight' | 'hide';
+    /** Task IDs that match the filter (used for hide mode). When undefined, no filtering is applied */
+    filteredTaskIds?: Set<string>;
+    /** Whether filter is currently active (needed to distinguish "no filter" from "filter with no matches") */
+    isFilterActive?: boolean;
 }
 /**
  * TaskList component - displays tasks in a table format as an overlay

package/dist/index.js

@@ -3950,7 +3950,8 @@ var TaskListRow = import_react10.default.memo(
     customDays,
     isWeekend: isWeekend3,
     businessDays,
-    isFilterMatch = false
+    isFilterMatch = false,
+    isFilterHideMode = false
   }) => {
     const [editingName, setEditingName] = (0, import_react10.useState)(false);
     const [nameValue, setNameValue] = (0, import_react10.useState)("");
@@ -4714,39 +4715,41 @@ var TaskListRow = import_react10.default.memo(
           ),
           /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-cell gantt-tl-cell-name", children: [
             isChild && !editingName && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-              ancestorContinues.map(
-                (continues, idx) => continues ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              !isFilterHideMode && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+                ancestorContinues.map(
+                  (continues, idx) => continues ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                    "span",
+                    {
+                      style: {
+                        position: "absolute",
+                        left: `${idx * 20 + 9}px`,
+                        top: 0,
+                        height: `${rowHeight}px`,
+                        width: "1.5px",
+                        background: "var(--gantt-hierarchy-line-color)",
+                        borderRadius: "1px",
+                        pointerEvents: "none"
+                      }
+                    },
+                    idx
+                  ) : null
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "span",
                   {
                     style: {
                       position: "absolute",
-                      left: `${idx * 20 + 9}px`,
+                      left: `${(nestingDepth - 1) * 20 + 9}px`,
                       top: 0,
-                      height: `${rowHeight}px`,
+                      height: isLastChild ? `${rowHeight / 2}px` : `${rowHeight}px`,
                       width: "1.5px",
                       background: "var(--gantt-hierarchy-line-color)",
                       borderRadius: "1px",
                       pointerEvents: "none"
                     }
-                  },
-                  idx
-                ) : null
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-                "span",
-                {
-                  style: {
-                    position: "absolute",
-                    left: `${(nestingDepth - 1) * 20 + 9}px`,
-                    top: 0,
-                    height: isLastChild ? `${rowHeight / 2}px` : `${rowHeight}px`,
-                    width: "1.5px",
-                    background: "var(--gantt-hierarchy-line-color)",
-                    borderRadius: "1px",
-                    pointerEvents: "none"
                   }
-                }
-              ),
+                )
+              ] }),
               /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "span",
                 {
@@ -4779,7 +4782,7 @@ var TaskListRow = import_react10.default.memo(
               )
             ] }),
             isParent && !editingName && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-              !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              !isFilterHideMode && !isCollapsed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                 "span",
                 {
                   style: {
@@ -5387,7 +5390,10 @@ var TaskList = ({
   customDays,
   isWeekend: isWeekend3,
   businessDays,
-  highlightedTaskIds = /* @__PURE__ */ new Set()
+  highlightedTaskIds = /* @__PURE__ */ new Set(),
+  filterMode = "highlight",
+  filteredTaskIds = /* @__PURE__ */ new Set(),
+  isFilterActive = false
 }) => {
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
@@ -5419,8 +5425,12 @@ var TaskList = ({
       }
       return false;
     }
-    return orderedTasks.filter((task) => !isAnyAncestorCollapsed(task.parentId));
-  }, [orderedTasks, collapsedParentIds]);
+    let tasks2 = orderedTasks.filter((task) => !isAnyAncestorCollapsed(task.parentId));
+    if (filterMode === "hide" && isFilterActive) {
+      tasks2 = tasks2.filter((task) => filteredTaskIds.has(task.id));
+    }
+    return tasks2;
+  }, [orderedTasks, collapsedParentIds, filterMode, filteredTaskIds, isFilterActive]);
   const totalHeight = (0, import_react12.useMemo)(
     () => visibleTasks.length * rowHeight,
     [visibleTasks.length, rowHeight]
@@ -5431,6 +5441,16 @@ var TaskList = ({
     ),
     [visibleTasks]
   );
+  const originalTaskNumberMap = (0, import_react12.useMemo)(
+    () => {
+      const numberMap = /* @__PURE__ */ new Map();
+      for (let i = 0; i < orderedTasks.length; i++) {
+        numberMap.set(orderedTasks[i].id, getTaskNumber(orderedTasks, i));
+      }
+      return Object.fromEntries(numberMap);
+    },
+    [orderedTasks]
+  );
   const nestingDepthMap = (0, import_react12.useMemo)(() => {
     const depthMap = /* @__PURE__ */ new Map();
     const taskById = new Map(tasks.map((t) => [t.id, t]));
@@ -5852,8 +5872,8 @@ var TaskList = ({
           {
             task,
             rowIndex: index,
-            taskNumber: getTaskNumber(visibleTasks, index),
-            taskNumberMap: visibleTaskNumberMap,
+            taskNumber: originalTaskNumberMap[task.id] || "",
+            taskNumberMap: originalTaskNumberMap,
             rowHeight,
             onTasksChange,
             selectedTaskId,
@@ -5892,7 +5912,8 @@ var TaskList = ({
             customDays,
             isWeekend: isWeekend3,
             businessDays,
-            isFilterMatch: highlightedTaskIds.has(task.id)
+            isFilterMatch: filterMode === "highlight" ? highlightedTaskIds.has(task.id) : false,
+            isFilterHideMode: filterMode === "hide" && isFilterActive
           },
           task.id
         )) }),
@@ -5966,6 +5987,7 @@ var GanttChart = (0, import_react13.forwardRef)(({
   isWeekend: isWeekend3,
   businessDays = true,
   taskFilter,
+  filterMode = "highlight",
   collapsedParentIds: externalCollapsedParentIds,
   onToggleCollapse: externalOnToggleCollapse,
   highlightedTaskIds,
@@ -6001,20 +6023,27 @@ var GanttChart = (0, import_react13.forwardRef)(({
       }
       return false;
     }
-    return normalizedTasks.filter((task) => !isAnyAncestorCollapsed(task.parentId));
-  }, [normalizedTasks, collapsedParentIds]);
+    let tasks2 = normalizedTasks.filter((task) => !isAnyAncestorCollapsed(task.parentId));
+    if (filterMode === "hide" && taskFilter) {
+      tasks2 = tasks2.filter(taskFilter);
+    }
+    return tasks2;
+  }, [normalizedTasks, collapsedParentIds, filterMode, taskFilter]);
   const matchedTaskIds = (0, import_react13.useMemo)(() => {
     if (!taskFilter) return /* @__PURE__ */ new Set();
     return new Set(visibleTasks.filter(taskFilter).map((task) => task.id));
   }, [visibleTasks, taskFilter]);
   const taskListHighlightedTaskIds = (0, import_react13.useMemo)(() => {
+    if (filterMode === "hide") {
+      return /* @__PURE__ */ new Set();
+    }
     if ((!highlightedTaskIds || highlightedTaskIds.size === 0) && matchedTaskIds.size === 0) {
       return /* @__PURE__ */ new Set();
     }
     const mergedHighlightedTaskIds = new Set(highlightedTaskIds ?? []);
     matchedTaskIds.forEach((taskId) => mergedHighlightedTaskIds.add(taskId));
     return mergedHighlightedTaskIds;
-  }, [highlightedTaskIds, matchedTaskIds]);
+  }, [filterMode, highlightedTaskIds, matchedTaskIds]);
   const totalGridHeight = (0, import_react13.useMemo)(
     () => visibleTasks.length * rowHeight,
     [visibleTasks.length, rowHeight]
@@ -6430,7 +6459,10 @@ var GanttChart = (0, import_react13.forwardRef)(({
             highlightedTaskIds: taskListHighlightedTaskIds,
             customDays,
             isWeekend: isWeekend3,
-            businessDays
+            businessDays,
+            filterMode,
+            filteredTaskIds: matchedTaskIds,
+            isFilterActive: !!taskFilter
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: showChart ? "" : "gantt-chart-hidden", style: { minWidth: `${gridWidth}px`, flex: 1 }, children: [
@@ -6515,7 +6547,7 @@ var GanttChart = (0, import_react13.forwardRef)(({
                     onCascadeProgress: handleCascadeProgress,
                     onCascade: handleCascade,
                     highlightExpiredTasks,
-                    isFilterMatch: matchedTaskIds.has(task.id),
+                    isFilterMatch: filterMode === "highlight" ? matchedTaskIds.has(task.id) : false,
                     businessDays,
                     customDays,
                     isWeekend: isWeekend3,