gantt-lib 0.133.1 → 0.134.1

package/README.md

@@ -159,6 +159,8 @@ Main component that renders the interactive Gantt chart.
 | `containerHeight` | `number \| string` | `undefined` | Container height in px, `%`, `vh`, or auto. |
 | `showTaskList` | `boolean` | `false` | Shows the left-side task list. |
 | `showChart` | `boolean` | `true` | Hides the chart area when set to `false`. |
+| `showTaskDateLabels` | `boolean` | `true` | Shows the task date range to the left of each task bar. |
+| `showTaskNames` | `boolean` | `true` | Shows the task name to the right of each task bar. |
 | `showBaseline` | `boolean` | `false` | Renders baselines for tasks with `baselineStartDate` and `baselineEndDate`. |
 | `taskListWidth` | `number` | `660` | Requested width of the task list panel. |
 | `taskListColumnWidths` | `TaskListColumnWidthMap` | `undefined` | Width overrides for built-in and custom TaskList columns. |

package/dist/index.d.mts

@@ -618,6 +618,10 @@ interface TaskChartSharedProps<TTask extends Task = Task> {
     skeletonStartOffsetDays?: number;
     /** Add a stable per-row backward jitter to skeleton chart bars, in days. */
     skeletonStartJitterDays?: number;
+    /** Render date ranges to the left of task bars in Gantt mode (default: true). */
+    showTaskDateLabels?: boolean;
+    /** Render task names to the right of task bars in Gantt mode (default: true). */
+    showTaskNames?: boolean;
     /** Optional vertical timeline markers such as deadlines and checkpoints. */
     timelineMarkers?: TimelineMarker[];
     /** Additional custom columns to render in the TaskList after built-in columns */
@@ -822,6 +826,10 @@ interface TaskRowProps {
     isDependencyDragActive?: boolean;
     /** Active chart view mode */
     viewMode?: 'day' | 'week' | 'month';
+    /** Render the date range label to the left of the task bar (default: true). */
+    showTaskDateLabels?: boolean;
+    /** Render the task name to the right of the task bar (default: true). */
+    showTaskNames?: boolean;
 }
 /**
  * TaskRow component - renders a single task row with a task bar

package/dist/index.d.ts

@@ -618,6 +618,10 @@ interface TaskChartSharedProps<TTask extends Task = Task> {
     skeletonStartOffsetDays?: number;
     /** Add a stable per-row backward jitter to skeleton chart bars, in days. */
     skeletonStartJitterDays?: number;
+    /** Render date ranges to the left of task bars in Gantt mode (default: true). */
+    showTaskDateLabels?: boolean;
+    /** Render task names to the right of task bars in Gantt mode (default: true). */
+    showTaskNames?: boolean;
     /** Optional vertical timeline markers such as deadlines and checkpoints. */
     timelineMarkers?: TimelineMarker[];
     /** Additional custom columns to render in the TaskList after built-in columns */
@@ -822,6 +826,10 @@ interface TaskRowProps {
     isDependencyDragActive?: boolean;
     /** Active chart view mode */
     viewMode?: 'day' | 'week' | 'month';
+    /** Render the date range label to the left of the task bar (default: true). */
+    showTaskDateLabels?: boolean;
+    /** Render the task name to the right of the task bar (default: true). */
+    showTaskNames?: boolean;
 }
 /**
  * TaskRow component - renders a single task row with a task bar

package/dist/index.js

@@ -3988,7 +3988,13 @@ var useTaskDrag = (options) => {
   const rawHookTask = allTasks.find((t) => t.id === taskId);
   const hookTask = rawHookTask ? normalizeTaskDatesForType(rawHookTask) : void 0;
   const hookTaskIsMilestone = hookTask ? isMilestoneTask(hookTask) : false;
+  const authoritativeStartTime = parseUTCDate(hookTask?.startDate ?? initialStartDate).getTime();
+  const authoritativeEndTime = parseUTCDate(hookTask?.endDate ?? initialEndDate).getTime();
   const isOwnerRef = (0, import_react2.useRef)(false);
+  const authoritativeRangeRef = (0, import_react2.useRef)({
+    start: authoritativeStartTime,
+    end: authoritativeEndTime
+  });
   const effectiveLocked = locked || disableTaskDrag;
   const [isDragging, setIsDragging] = (0, import_react2.useState)(false);
   const [dragMode, setDragMode] = (0, import_react2.useState)(null);
@@ -4015,6 +4021,17 @@ var useTaskDrag = (options) => {
     const width = Math.round((duration + 1) * dayWidth);
     return { left, width };
   }, [initialStartDate, initialEndDate, monthStart, dayWidth, hookTaskIsMilestone]);
+  (0, import_react2.useEffect)(() => {
+    const nextRange = {
+      start: authoritativeStartTime,
+      end: authoritativeEndTime
+    };
+    const previousRange = authoritativeRangeRef.current;
+    authoritativeRangeRef.current = nextRange;
+    if ((previousRange.start !== nextRange.start || previousRange.end !== nextRange.end) && isOwnerRef.current && globalActiveDrag?.taskId === taskId) {
+      cancelDrag();
+    }
+  }, [authoritativeStartTime, authoritativeEndTime, taskId]);
   (0, import_react2.useEffect)(() => {
     if (isOwnerRef.current && globalActiveDrag) return;
     const { left, width } = getInitialPosition();
@@ -4361,10 +4378,10 @@ var useTaskDrag = (options) => {
 // src/components/TaskRow/TaskRow.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var arePropsEqual = (prevProps, nextProps) => {
-  return prevProps.task.id === nextProps.task.id && prevProps.task.name === nextProps.task.name && prevProps.task.startDate === nextProps.task.startDate && prevProps.task.endDate === nextProps.task.endDate && prevProps.task.baselineStartDate === nextProps.task.baselineStartDate && prevProps.task.baselineEndDate === nextProps.task.baselineEndDate && prevProps.task.type === nextProps.task.type && prevProps.task.color === nextProps.task.color && prevProps.task.progress === nextProps.task.progress && prevProps.task.accepted === nextProps.task.accepted && prevProps.monthStart.getTime() === nextProps.monthStart.getTime() && prevProps.dayWidth === nextProps.dayWidth && prevProps.rowHeight === nextProps.rowHeight && prevProps.overridePosition?.left === nextProps.overridePosition?.left && prevProps.overridePosition?.width === nextProps.overridePosition?.width && prevProps.previewPositionStore === nextProps.previewPositionStore && prevProps.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.task.locked === nextProps.task.locked && prevProps.task.synced === nextProps.task.synced && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks && prevProps.isCritical === nextProps.isCritical && prevProps.showBaseline === nextProps.showBaseline && prevProps.isFilterMatch === nextProps.isFilterMatch && prevProps.businessDays === nextProps.businessDays && prevProps.customDays === nextProps.customDays && prevProps.isWeekend === nextProps.isWeekend && prevProps.disableTaskDrag === nextProps.disableTaskDrag && prevProps.disableDependencyEditing === nextProps.disableDependencyEditing && prevProps.isDependencyDragActive === nextProps.isDependencyDragActive && prevProps.viewMode === nextProps.viewMode;
+  return prevProps.task.id === nextProps.task.id && prevProps.task.name === nextProps.task.name && prevProps.task.startDate === nextProps.task.startDate && prevProps.task.endDate === nextProps.task.endDate && prevProps.task.baselineStartDate === nextProps.task.baselineStartDate && prevProps.task.baselineEndDate === nextProps.task.baselineEndDate && prevProps.task.type === nextProps.task.type && prevProps.task.color === nextProps.task.color && prevProps.task.progress === nextProps.task.progress && prevProps.task.accepted === nextProps.task.accepted && prevProps.monthStart.getTime() === nextProps.monthStart.getTime() && prevProps.dayWidth === nextProps.dayWidth && prevProps.rowHeight === nextProps.rowHeight && prevProps.overridePosition?.left === nextProps.overridePosition?.left && prevProps.overridePosition?.width === nextProps.overridePosition?.width && prevProps.previewPositionStore === nextProps.previewPositionStore && prevProps.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.task.locked === nextProps.task.locked && prevProps.task.synced === nextProps.task.synced && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks && prevProps.isCritical === nextProps.isCritical && prevProps.showBaseline === nextProps.showBaseline && prevProps.isFilterMatch === nextProps.isFilterMatch && prevProps.businessDays === nextProps.businessDays && prevProps.customDays === nextProps.customDays && prevProps.isWeekend === nextProps.isWeekend && prevProps.disableTaskDrag === nextProps.disableTaskDrag && prevProps.disableDependencyEditing === nextProps.disableDependencyEditing && prevProps.isDependencyDragActive === nextProps.isDependencyDragActive && prevProps.viewMode === nextProps.viewMode && prevProps.showTaskDateLabels === nextProps.showTaskDateLabels && prevProps.showTaskNames === nextProps.showTaskNames;
 };
 var TaskRow = import_react3.default.memo(
-  ({ task, monthStart, dayWidth, rowHeight, onTasksChange, onScheduleIntent, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, overridePosition, previewPositionStore, onCascadeProgress, onCascade, divider, highlightExpiredTasks, isCritical = false, showBaseline = false, isFilterMatch = false, businessDays, customDays, isWeekend: isWeekend3, disableTaskDrag = false, disableDependencyEditing = false, onDependencyPortPointerDown, isDependencyDragActive = false, viewMode = "day" }) => {
+  ({ task, monthStart, dayWidth, rowHeight, onTasksChange, onScheduleIntent, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, overridePosition, previewPositionStore, onCascadeProgress, onCascade, divider, highlightExpiredTasks, isCritical = false, showBaseline = false, isFilterMatch = false, businessDays, customDays, isWeekend: isWeekend3, disableTaskDrag = false, disableDependencyEditing = false, onDependencyPortPointerDown, isDependencyDragActive = false, viewMode = "day", showTaskDateLabels = true, showTaskNames = true }) => {
     const defaultParentBarColor = "#782FC4";
     const { divider: taskDivider } = task;
     const normalizedTask = (0, import_react3.useMemo)(() => normalizeTaskDatesForType(task), [task]);
@@ -4640,7 +4657,7 @@ var TaskRow = import_react3.default.memo(
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            showTaskDateLabels && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
               "div",
               {
                 className: `gantt-tr-leftLabels ${task.locked ? "gantt-tr-leftLabels-locked" : ""}`,
@@ -4685,7 +4702,7 @@ var TaskRow = import_react3.default.memo(
                     progressWidth,
                     "%"
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  showTaskNames && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
                     "span",
                     {
                       className: "gantt-tr-externalTaskName",
@@ -14156,6 +14173,8 @@ function TaskGanttChartInner(props, ref) {
     skeletonRowCount = 0,
     skeletonStartOffsetDays = 0,
     skeletonStartJitterDays = 0,
+    showTaskDateLabels = true,
+    showTaskNames = true,
     timelineMarkers,
     additionalColumns,
     hiddenTaskListColumns,
@@ -15594,7 +15613,9 @@ function TaskGanttChartInner(props, ref) {
                                     disableDependencyEditing,
                                     onDependencyPortPointerDown: handleDependencyPortPointerDown,
                                     isDependencyDragActive: dependencyCreationDrag !== null,
-                                    viewMode
+                                    viewMode,
+                                    showTaskDateLabels,
+                                    showTaskNames
                                   }
                                 )
                               },