gantt-lib 0.86.0 → 0.87.0

package/dist/index.d.mts

@@ -303,7 +303,7 @@ declare const progressInRange: (min: number, max: number) => TaskPredicate;
  */
 declare const nameContains: (substring: string, caseSensitive?: boolean) => TaskPredicate;
 
-type BuiltInTaskListColumnId = 'number' | 'name' | 'startDate' | 'endDate' | 'duration' | 'progress' | 'dependencies' | 'actions';
+type BuiltInTaskListColumnId = 'selection' | 'number' | 'name' | 'startDate' | 'endDate' | 'duration' | 'progress' | 'dependencies' | 'actions';
 type TaskListColumnId = BuiltInTaskListColumnId | (string & {});
 type TaskListColumnAnchor = {
     after: BuiltInTaskListColumnId | string;
@@ -495,6 +495,12 @@ interface GanttModeProps<TTask extends Task = Task> {
     onToggleCollapse?: (parentId: string) => void;
     /** Task IDs to highlight in the task list (for search results) */
     highlightedTaskIds?: Set<string>;
+    /** Enable a leading checkbox column for multi-selecting task rows (default: false) */
+    enableTaskMultiSelect?: boolean;
+    /** Controlled selected task IDs for multi-select mode */
+    selectedTaskIds?: Set<string>;
+    /** Callback when multi-selected task IDs change */
+    onSelectedTaskIdsChange?: (taskIds: Set<string>) => void;
     /** Disable task drag and resize on the calendar grid (default: false) */
     disableTaskDrag?: boolean;
     /** Show calendar chart area (default: true) */
@@ -766,6 +772,12 @@ interface TaskListProps {
     businessDays?: boolean;
     /** Task IDs highlighted by the active filter */
     highlightedTaskIds?: Set<string>;
+    /** Enable a leading checkbox column for multi-selecting task rows (default: false) */
+    enableTaskMultiSelect?: boolean;
+    /** Controlled selected task IDs for multi-select mode */
+    selectedTaskIds?: Set<string>;
+    /** Callback when multi-selected task IDs change */
+    onSelectedTaskIdsChange?: (taskIds: Set<string>) => void;
     /** 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 */

package/dist/index.d.ts

@@ -303,7 +303,7 @@ declare const progressInRange: (min: number, max: number) => TaskPredicate;
  */
 declare const nameContains: (substring: string, caseSensitive?: boolean) => TaskPredicate;
 
-type BuiltInTaskListColumnId = 'number' | 'name' | 'startDate' | 'endDate' | 'duration' | 'progress' | 'dependencies' | 'actions';
+type BuiltInTaskListColumnId = 'selection' | 'number' | 'name' | 'startDate' | 'endDate' | 'duration' | 'progress' | 'dependencies' | 'actions';
 type TaskListColumnId = BuiltInTaskListColumnId | (string & {});
 type TaskListColumnAnchor = {
     after: BuiltInTaskListColumnId | string;
@@ -495,6 +495,12 @@ interface GanttModeProps<TTask extends Task = Task> {
     onToggleCollapse?: (parentId: string) => void;
     /** Task IDs to highlight in the task list (for search results) */
     highlightedTaskIds?: Set<string>;
+    /** Enable a leading checkbox column for multi-selecting task rows (default: false) */
+    enableTaskMultiSelect?: boolean;
+    /** Controlled selected task IDs for multi-select mode */
+    selectedTaskIds?: Set<string>;
+    /** Callback when multi-selected task IDs change */
+    onSelectedTaskIdsChange?: (taskIds: Set<string>) => void;
     /** Disable task drag and resize on the calendar grid (default: false) */
     disableTaskDrag?: boolean;
     /** Show calendar chart area (default: true) */
@@ -766,6 +772,12 @@ interface TaskListProps {
     businessDays?: boolean;
     /** Task IDs highlighted by the active filter */
     highlightedTaskIds?: Set<string>;
+    /** Enable a leading checkbox column for multi-selecting task rows (default: false) */
+    enableTaskMultiSelect?: boolean;
+    /** Controlled selected task IDs for multi-select mode */
+    selectedTaskIds?: Set<string>;
+    /** Callback when multi-selected task IDs change */
+    onSelectedTaskIdsChange?: (taskIds: Set<string>) => void;
     /** 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 */

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: [
@@ -4756,6 +4757,8 @@ var TaskListRow = import_react10.default.memo(
     isFilterMatch = false,
     isFilterHideMode = false,
     resolvedColumns,
+    isTaskSelected = false,
+    onTaskSelectionChange,
     taskListMenuCommands = []
   }) => {
     const [editingColumnId, setEditingColumnId] = (0, import_react10.useState)(null);
@@ -5549,6 +5552,23 @@ var TaskListRow = import_react10.default.memo(
     const isSelectedDependencyOwner = selectedChip != null && selectedChip.successorId === task.id;
     const startDateISO = toISODate2(normalizedTask.startDate);
     const endDateISO = editingDuration ? getEndDate(normalizedTask.startDate, durationValue) : toISODate2(normalizedTask.endDate);
+    const selectionCell = /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        className: "gantt-tl-cell gantt-tl-cell-selection",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            className: "gantt-tl-selection-checkbox",
+            "aria-label": `\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0437\u0430\u0434\u0430\u0447\u0443 ${taskNumber ? `${taskNumber}. ` : ""}${task.name}`,
+            checked: isTaskSelected,
+            onChange: (event) => onTaskSelectionChange?.(task.id, event.target.checked)
+          }
+        )
+      }
+    );
     const numberCell = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
@@ -6266,6 +6286,7 @@ var TaskListRow = import_react10.default.memo(
       }
     );
     const builtInCells = {
+      selection: selectionCell,
       number: numberCell,
       name: nameCell,
       startDate: startDateCell,
@@ -6292,6 +6313,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),
@@ -6417,6 +6439,7 @@ var NewTaskRow = ({
 
 // src/components/TaskList/columns/createBuiltInColumns.tsx
 var BUILT_IN_COLUMN_WIDTHS = {
+  selection: 36,
   number: 40,
   name: 200,
   startDate: 90,
@@ -6427,7 +6450,7 @@ var BUILT_IN_COLUMN_WIDTHS = {
   actions: 80
 };
 function createBuiltInColumns(opts) {
-  return [
+  const columns = [
     { id: "number", header: "\u2116", width: BUILT_IN_COLUMN_WIDTHS.number, renderCell: () => null },
     { id: "name", header: "\u0418\u043C\u044F", width: BUILT_IN_COLUMN_WIDTHS.name, renderCell: () => null },
     { id: "startDate", header: "\u041D\u0430\u0447\u0430\u043B\u043E", width: BUILT_IN_COLUMN_WIDTHS.startDate, renderCell: () => null },
@@ -6436,6 +6459,15 @@ function createBuiltInColumns(opts) {
     { id: "progress", header: "%", width: BUILT_IN_COLUMN_WIDTHS.progress, renderCell: () => null },
     { id: "dependencies", header: null, width: BUILT_IN_COLUMN_WIDTHS.dependencies, renderCell: () => null }
   ];
+  if (opts?.enableTaskMultiSelect) {
+    columns.unshift({
+      id: "selection",
+      header: null,
+      width: BUILT_IN_COLUMN_WIDTHS.selection,
+      renderCell: () => null
+    });
+  }
+  return columns;
 }
 
 // src/components/TaskList/columns/resolveTaskListColumns.ts
@@ -6496,6 +6528,7 @@ var import_jsx_runtime14 = require("react/jsx-runtime");
 var LINK_TYPE_ORDER2 = ["FS", "SS", "FF", "SF"];
 var MIN_TASK_LIST_WIDTH = 530;
 var BUILT_IN_CSS_CLASSES = {
+  selection: "gantt-tl-cell-selection",
   number: "gantt-tl-cell-number",
   name: "gantt-tl-cell-name",
   startDate: "gantt-tl-cell-date",
@@ -6571,6 +6604,30 @@ function getTaskNumber(tasks, taskIndex) {
   }
   return `${parentNumber}.${siblingIndex + 1}`;
 }
+var SelectAllCheckbox = ({
+  checked,
+  indeterminate,
+  onChange
+}) => {
+  const ref = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      className: "gantt-tl-selection-checkbox",
+      "aria-label": "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435 \u0432\u0438\u0434\u0438\u043C\u044B\u0435 \u0437\u0430\u0434\u0430\u0447\u0438",
+      checked,
+      onChange: (event) => onChange(event.target.checked),
+      onClick: (event) => event.stopPropagation()
+    }
+  );
+};
 var TaskList = ({
   tasks,
   rowHeight,
@@ -6601,6 +6658,9 @@ var TaskList = ({
   isWeekend: isWeekend3,
   businessDays,
   highlightedTaskIds = /* @__PURE__ */ new Set(),
+  enableTaskMultiSelect = false,
+  selectedTaskIds,
+  onSelectedTaskIdsChange,
   filterMode = "highlight",
   filteredTaskIds = /* @__PURE__ */ new Set(),
   isFilterActive = false,
@@ -6608,6 +6668,14 @@ var TaskList = ({
   hiddenTaskListColumns,
   taskListMenuCommands
 }) => {
+  const [internalSelectedTaskIds, setInternalSelectedTaskIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
+  const effectiveSelectedTaskIds = selectedTaskIds ?? internalSelectedTaskIds;
+  const emitSelectedTaskIdsChange = (0, import_react12.useCallback)((nextSelectedTaskIds) => {
+    if (!selectedTaskIds) {
+      setInternalSelectedTaskIds(nextSelectedTaskIds);
+    }
+    onSelectedTaskIdsChange?.(nextSelectedTaskIds);
+  }, [onSelectedTaskIdsChange, selectedTaskIds]);
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
   const handleToggleCollapse = externalOnToggleCollapse ?? (0, import_react12.useCallback)((parentId) => {
@@ -6654,6 +6722,33 @@ var TaskList = ({
     ),
     [visibleTasks]
   );
+  const visibleTaskIds = (0, import_react12.useMemo)(() => visibleTasks.map((task) => task.id), [visibleTasks]);
+  const selectedVisibleTaskCount = (0, import_react12.useMemo)(
+    () => visibleTaskIds.filter((taskId) => effectiveSelectedTaskIds.has(taskId)).length,
+    [effectiveSelectedTaskIds, visibleTaskIds]
+  );
+  const areAllVisibleTasksSelected = visibleTaskIds.length > 0 && selectedVisibleTaskCount === visibleTaskIds.length;
+  const areSomeVisibleTasksSelected = selectedVisibleTaskCount > 0 && !areAllVisibleTasksSelected;
+  const handleToggleTaskSelection = (0, import_react12.useCallback)((taskId, checked) => {
+    const nextSelectedTaskIds = new Set(effectiveSelectedTaskIds);
+    if (checked) {
+      nextSelectedTaskIds.add(taskId);
+    } else {
+      nextSelectedTaskIds.delete(taskId);
+    }
+    emitSelectedTaskIdsChange(nextSelectedTaskIds);
+  }, [effectiveSelectedTaskIds, emitSelectedTaskIdsChange]);
+  const handleToggleAllVisibleTaskSelection = (0, import_react12.useCallback)((checked) => {
+    const nextSelectedTaskIds = new Set(effectiveSelectedTaskIds);
+    for (const taskId of visibleTaskIds) {
+      if (checked) {
+        nextSelectedTaskIds.add(taskId);
+      } else {
+        nextSelectedTaskIds.delete(taskId);
+      }
+    }
+    emitSelectedTaskIdsChange(nextSelectedTaskIds);
+  }, [effectiveSelectedTaskIds, emitSelectedTaskIdsChange, visibleTaskIds]);
   const originalTaskNumberMap = (0, import_react12.useMemo)(
     () => {
       const numberMap = /* @__PURE__ */ new Map();
@@ -7135,7 +7230,10 @@ var TaskList = ({
     const duplicatedTasks = duplicateTaskSubtree(taskId, orderedTasks);
     onReorder?.(duplicatedTasks);
   }, [orderedTasks, onReorder]);
-  const builtInColumns = (0, import_react12.useMemo)(() => createBuiltInColumns({ businessDays }), [businessDays]);
+  const builtInColumns = (0, import_react12.useMemo)(
+    () => createBuiltInColumns({ businessDays, enableTaskMultiSelect }),
+    [businessDays, enableTaskMultiSelect]
+  );
   const resolvedColumns = (0, import_react12.useMemo)(
     () => resolveTaskListColumns(
       builtInColumns,
@@ -7159,6 +7257,24 @@ var TaskList = ({
       style: { "--tasklist-width": `${effectiveTaskListWidth}px` },
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gantt-tl-table", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-header", style: { height: `${tableHeaderHeight}px` }, children: resolvedColumns.map((col) => {
+          if (col.id === "selection") {
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: "gantt-tl-headerCell gantt-tl-cell-selection",
+                "data-column-id": "selection",
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  SelectAllCheckbox,
+                  {
+                    checked: areAllVisibleTasksSelected,
+                    indeterminate: areSomeVisibleTasksSelected,
+                    onChange: handleToggleAllVisibleTaskSelection
+                  }
+                )
+              },
+              col.id
+            );
+          }
           if (col.id === "dependencies") {
             return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "div",
@@ -7284,6 +7400,8 @@ var TaskList = ({
                 isFilterMatch: filterMode === "highlight" ? highlightedTaskIds.has(task.id) : false,
                 isFilterHideMode: filterMode === "hide" && isFilterActive,
                 resolvedColumns,
+                isTaskSelected: effectiveSelectedTaskIds.has(task.id),
+                onTaskSelectionChange: handleToggleTaskSelection,
                 taskListMenuCommands
               }
             ),
@@ -9364,6 +9482,9 @@ function TaskGanttChartInner(props, ref) {
     collapsedParentIds: externalCollapsedParentIds,
     onToggleCollapse: externalOnToggleCollapse,
     highlightedTaskIds,
+    enableTaskMultiSelect = false,
+    selectedTaskIds,
+    onSelectedTaskIdsChange,
     disableTaskDrag = false,
     showChart = true,
     additionalColumns,
@@ -9631,6 +9752,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);
@@ -9863,157 +10018,169 @@ 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,
+                enableTaskMultiSelect,
+                selectedTaskIds,
+                onSelectedTaskIdsChange,
+                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
+                        ))
+                      ]
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
     }
   ) });
 }