gantt-lib 0.85.1 → 0.86.1

package/dist/index.d.ts

@@ -710,7 +710,7 @@ interface TaskListProps {
     rowHeight: number;
     /** Height of the header row in pixels (must match Gantt chart's headerHeight) */
     headerHeight: number;
-    /** Width of the task list overlay in pixels. Values below MIN_TASK_LIST_WIDTH are clamped. */
+    /** Width of the task list overlay in pixels. Values below the visible column width are clamped. */
     taskListWidth?: number;
     /** Callback when tasks are modified via inline edit. Receives array of changed tasks. */
     onTasksChange?: (tasks: Task[]) => void;

package/dist/index.js

@@ -2976,6 +2976,7 @@ var TaskRow = import_react3.default.memo(
       "div",
       {
         "data-filter-match": isFilterMatch ? "true" : "false",
+        "data-gantt-task-row-id": task.id,
         className: `gantt-tr-row ${isFilterMatch ? "gantt-tr-row-filter-match" : ""}`,
         style: { height: `${rowHeight}px` },
         children: [
@@ -6292,6 +6293,7 @@ var TaskListRow = import_react10.default.memo(
           isParent ? "gantt-tl-row-parent" : ""
         ].filter(Boolean).join(" "),
         style: { minHeight: `${rowHeight}px`, position: "relative" },
+        "data-gantt-task-row-id": task.id,
         onClick: handleRowClickInternal,
         onKeyDown: handleRowKeyDown,
         onDragOver: (e) => onDragOver?.(rowIndex, e),
@@ -6575,7 +6577,7 @@ var TaskList = ({
   tasks,
   rowHeight,
   headerHeight,
-  taskListWidth = MIN_TASK_LIST_WIDTH,
+  taskListWidth,
   onTasksChange,
   selectedTaskId,
   onTaskSelect,
@@ -7148,7 +7150,8 @@ var TaskList = ({
     () => resolvedColumns.reduce((sum, col) => sum + (col.width ?? 120), 0),
     [resolvedColumns]
   );
-  const effectiveTaskListWidth = Math.max(taskListWidth, MIN_TASK_LIST_WIDTH, resolvedColumnWidthTotal);
+  const requestedTaskListWidth = taskListWidth ?? Math.min(MIN_TASK_LIST_WIDTH, resolvedColumnWidthTotal);
+  const effectiveTaskListWidth = Math.max(requestedTaskListWidth, resolvedColumnWidthTotal);
   const tableHeaderHeight = headerHeight + 1;
   return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
@@ -9630,6 +9633,40 @@ function TaskGanttChartInner(props, ref) {
   const handleTaskSelect = (0, import_react15.useCallback)((taskId) => {
     setSelectedTaskId(taskId);
   }, []);
+  const hoveredRowElementsRef = (0, import_react15.useRef)([]);
+  const clearHoveredRows = (0, import_react15.useCallback)(() => {
+    for (const element of hoveredRowElementsRef.current) {
+      element.classList.remove("gantt-tl-row-hovered", "gantt-tr-row-hovered");
+    }
+    hoveredRowElementsRef.current = [];
+  }, []);
+  const applyHoveredRows = (0, import_react15.useCallback)((taskId) => {
+    const root = scrollContentRef.current;
+    if (!root) return;
+    clearHoveredRows();
+    const nextHoveredRows = Array.from(
+      root.querySelectorAll("[data-gantt-task-row-id]")
+    ).filter((element) => element.dataset.ganttTaskRowId === taskId);
+    for (const element of nextHoveredRows) {
+      if (element.classList.contains("gantt-tl-row")) {
+        element.classList.add("gantt-tl-row-hovered");
+      }
+      if (element.classList.contains("gantt-tr-row")) {
+        element.classList.add("gantt-tr-row-hovered");
+      }
+    }
+    hoveredRowElementsRef.current = nextHoveredRows;
+  }, [clearHoveredRows]);
+  const handleSharedRowHover = (0, import_react15.useCallback)((event) => {
+    const target = event.target;
+    const row = target.closest("[data-gantt-task-row-id]");
+    const taskId = row?.dataset.ganttTaskRowId;
+    if (!taskId) return;
+    if (hoveredRowElementsRef.current.some((element) => element.dataset.ganttTaskRowId === taskId)) {
+      return;
+    }
+    applyHoveredRows(taskId);
+  }, [applyHoveredRows]);
   const handleToggleCollapse = externalOnToggleCollapse ?? (0, import_react15.useCallback)((parentId) => {
     setInternalCollapsedParentIds((prev) => {
       const next = new Set(prev);
@@ -9862,157 +9899,166 @@ function TaskGanttChartInner(props, ref) {
       className: "gantt-scrollContainer",
       style: { height: containerHeight ?? "auto", cursor: "grab" },
       onMouseDown: handlePanStart,
-      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { ref: scrollContentRef, className: "gantt-scrollContent", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-          TaskList,
-          {
-            tasks: normalizedTasks,
-            rowHeight,
-            headerHeight,
-            taskListWidth,
-            onTasksChange: handleTaskChange,
-            selectedTaskId: selectedTaskId ?? void 0,
-            onTaskSelect: handleTaskSelect,
-            show: showTaskList,
-            hasRightShadow: taskListHasRightShadow,
-            disableTaskNameEditing,
-            disableDependencyEditing,
-            onScrollToTask: scrollToTask,
-            onSelectedChipChange: setSelectedChip,
-            onAdd,
-            onDelete: handleDelete,
-            onInsertAfter: handleInsertAfter,
-            onReorder: handleReorder,
-            editingTaskId,
-            enableAddTask,
-            defaultTaskDurationDays,
-            collapsedParentIds,
-            onToggleCollapse: handleToggleCollapse,
-            onPromoteTask: onPromoteTask ?? handlePromoteTask,
-            onDemoteTask: onDemoteTask ?? handleDemoteTask,
-            onUngroupTask: onUngroupTask ?? handleUngroupTask,
-            highlightedTaskIds: taskListHighlightedTaskIds,
-            customDays,
-            isWeekend: isWeekend3,
-            businessDays,
-            filterMode,
-            filteredTaskIds: matchedTaskIds,
-            isFilterActive: !!taskFilter,
-            additionalColumns,
-            hiddenTaskListColumns,
-            taskListMenuCommands
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-          "div",
-          {
-            className: showChart ? "gantt-chartSurface" : "gantt-chartSurface gantt-chart-hidden",
-            style: { minWidth: `${gridWidth}px`, flex: 1, display: showChart ? void 0 : "none" },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                "div",
-                {
-                  className: "gantt-stickyHeader",
-                  style: { width: `${gridWidth}px`, height: `${timelineHeaderHeight}px` },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                    TimeScaleHeader_default,
+      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+        "div",
+        {
+          ref: scrollContentRef,
+          className: "gantt-scrollContent",
+          onMouseOver: handleSharedRowHover,
+          onMouseLeave: clearHoveredRows,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              TaskList,
+              {
+                tasks: normalizedTasks,
+                rowHeight,
+                headerHeight,
+                taskListWidth,
+                onTasksChange: handleTaskChange,
+                selectedTaskId: selectedTaskId ?? void 0,
+                onTaskSelect: handleTaskSelect,
+                show: showTaskList,
+                hasRightShadow: taskListHasRightShadow,
+                disableTaskNameEditing,
+                disableDependencyEditing,
+                onScrollToTask: scrollToTask,
+                onSelectedChipChange: setSelectedChip,
+                onAdd,
+                onDelete: handleDelete,
+                onInsertAfter: handleInsertAfter,
+                onReorder: handleReorder,
+                editingTaskId,
+                enableAddTask,
+                defaultTaskDurationDays,
+                collapsedParentIds,
+                onToggleCollapse: handleToggleCollapse,
+                onPromoteTask: onPromoteTask ?? handlePromoteTask,
+                onDemoteTask: onDemoteTask ?? handleDemoteTask,
+                onUngroupTask: onUngroupTask ?? handleUngroupTask,
+                highlightedTaskIds: taskListHighlightedTaskIds,
+                customDays,
+                isWeekend: isWeekend3,
+                businessDays,
+                filterMode,
+                filteredTaskIds: matchedTaskIds,
+                isFilterActive: !!taskFilter,
+                additionalColumns,
+                hiddenTaskListColumns,
+                taskListMenuCommands
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+              "div",
+              {
+                className: showChart ? "gantt-chartSurface" : "gantt-chartSurface gantt-chart-hidden",
+                style: { minWidth: `${gridWidth}px`, flex: 1, display: showChart ? void 0 : "none" },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                    "div",
                     {
-                      days: dateRange,
-                      dayWidth,
-                      headerHeight,
-                      viewMode,
-                      isCustomWeekend
+                      className: "gantt-stickyHeader",
+                      style: { width: `${gridWidth}px`, height: `${timelineHeaderHeight}px` },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                        TimeScaleHeader_default,
+                        {
+                          days: dateRange,
+                          dayWidth,
+                          headerHeight,
+                          viewMode,
+                          isCustomWeekend
+                        }
+                      )
                     }
-                  )
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-                "div",
-                {
-                  className: "gantt-taskArea",
-                  style: {
-                    position: "relative",
-                    width: `${gridWidth}px`
-                  },
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      GridBackground_default,
-                      {
-                        dateRange,
-                        dayWidth,
-                        totalHeight: totalGridHeight,
-                        viewMode,
-                        isCustomWeekend
-                      }
-                    ),
-                    todayInRange && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TodayIndicator_default, { monthStart, dayWidth }),
-                    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      DependencyLines_default,
-                      {
-                        tasks: previewVisibleTasks,
-                        allTasks: previewNormalizedTasks,
-                        collapsedParentIds,
-                        monthStart,
-                        dayWidth,
-                        rowHeight,
-                        gridWidth,
-                        dragOverrides: dependencyOverrides,
-                        selectedDep: selectedChip,
-                        businessDays,
-                        weekendPredicate: isCustomWeekend
-                      }
-                    ),
-                    dragGuideLines && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      DragGuideLines_default,
-                      {
-                        isDragging: dragGuideLines.isDragging,
-                        dragMode: dragGuideLines.dragMode,
-                        left: dragGuideLines.left,
-                        width: dragGuideLines.width,
-                        totalHeight: totalGridHeight
-                      }
-                    ),
-                    visibleTasks.map((task, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
-                      TaskRow_default,
-                      {
-                        task,
-                        monthStart,
-                        dayWidth,
-                        rowHeight,
-                        onTasksChange: handleTaskChange,
-                        onDragStateChange: (state) => {
-                          if (state.isDragging) {
-                            setDragGuideLines(state);
-                            setDraggedTaskOverride({ taskId: task.id, left: state.left, width: state.width });
-                          } else {
-                            setDragGuideLines(null);
-                            setDraggedTaskOverride(null);
-                          }
-                        },
-                        rowIndex: index,
-                        allTasks: normalizedTasks,
-                        enableAutoSchedule: enableAutoSchedule ?? false,
-                        disableConstraints: disableConstraints ?? false,
-                        overridePosition: cascadeOverrides.get(task.id),
-                        onCascadeProgress: handleCascadeProgress,
-                        onCascade: handleCascade,
-                        highlightExpiredTasks,
-                        showBaseline,
-                        isFilterMatch: filterMode === "highlight" ? matchedTaskIds.has(task.id) : false,
-                        businessDays,
-                        customDays,
-                        isWeekend: isWeekend3,
-                        disableTaskDrag
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+                    "div",
+                    {
+                      className: "gantt-taskArea",
+                      style: {
+                        position: "relative",
+                        width: `${gridWidth}px`
                       },
-                      task.id
-                    ))
-                  ]
-                }
-              )
-            ]
-          }
-        )
-      ] })
+                      children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                          GridBackground_default,
+                          {
+                            dateRange,
+                            dayWidth,
+                            totalHeight: totalGridHeight,
+                            viewMode,
+                            isCustomWeekend
+                          }
+                        ),
+                        todayInRange && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(TodayIndicator_default, { monthStart, dayWidth }),
+                        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                          DependencyLines_default,
+                          {
+                            tasks: previewVisibleTasks,
+                            allTasks: previewNormalizedTasks,
+                            collapsedParentIds,
+                            monthStart,
+                            dayWidth,
+                            rowHeight,
+                            gridWidth,
+                            dragOverrides: dependencyOverrides,
+                            selectedDep: selectedChip,
+                            businessDays,
+                            weekendPredicate: isCustomWeekend
+                          }
+                        ),
+                        dragGuideLines && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                          DragGuideLines_default,
+                          {
+                            isDragging: dragGuideLines.isDragging,
+                            dragMode: dragGuideLines.dragMode,
+                            left: dragGuideLines.left,
+                            width: dragGuideLines.width,
+                            totalHeight: totalGridHeight
+                          }
+                        ),
+                        visibleTasks.map((task, index) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+                          TaskRow_default,
+                          {
+                            task,
+                            monthStart,
+                            dayWidth,
+                            rowHeight,
+                            onTasksChange: handleTaskChange,
+                            onDragStateChange: (state) => {
+                              if (state.isDragging) {
+                                setDragGuideLines(state);
+                                setDraggedTaskOverride({ taskId: task.id, left: state.left, width: state.width });
+                              } else {
+                                setDragGuideLines(null);
+                                setDraggedTaskOverride(null);
+                              }
+                            },
+                            rowIndex: index,
+                            allTasks: normalizedTasks,
+                            enableAutoSchedule: enableAutoSchedule ?? false,
+                            disableConstraints: disableConstraints ?? false,
+                            overridePosition: cascadeOverrides.get(task.id),
+                            onCascadeProgress: handleCascadeProgress,
+                            onCascade: handleCascade,
+                            highlightExpiredTasks,
+                            showBaseline,
+                            isFilterMatch: filterMode === "highlight" ? matchedTaskIds.has(task.id) : false,
+                            businessDays,
+                            customDays,
+                            isWeekend: isWeekend3,
+                            disableTaskDrag
+                          },
+                          task.id
+                        ))
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   ) });
 }