gantt-lib 0.2.0 → 0.3.1

package/dist/index.mjs

@@ -1092,29 +1092,51 @@ var useTaskDrag = (options) => {
 // src/components/TaskRow/TaskRow.tsx
 import { jsx as jsx2, jsxs as jsxs2 } from "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.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.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.task.locked === nextProps.task.locked && prevProps.task.divider === nextProps.task.divider;
+  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.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.allTasks === nextProps.allTasks && prevProps.disableConstraints === nextProps.disableConstraints && prevProps.task.locked === nextProps.task.locked && prevProps.task.divider === nextProps.task.divider && prevProps.highlightExpiredTasks === nextProps.highlightExpiredTasks;
 };
 var TaskRow = React2.memo(
-  ({ task, monthStart, dayWidth, rowHeight, onChange, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, overridePosition, onCascadeProgress, onCascade, divider }) => {
+  ({ task, monthStart, dayWidth, rowHeight, onChange, onDragStateChange, rowIndex, allTasks, enableAutoSchedule, disableConstraints, overridePosition, onCascadeProgress, onCascade, divider, highlightExpiredTasks }) => {
     const { divider: taskDivider } = task;
     const taskStartDate = useMemo2(() => parseUTCDate(task.startDate), [task.startDate]);
     const taskEndDate = useMemo2(() => parseUTCDate(task.endDate), [task.endDate]);
+    const isExpired = useMemo2(() => {
+      if (!highlightExpiredTasks) return false;
+      const now = /* @__PURE__ */ new Date();
+      const today = new Date(Date.UTC(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate()));
+      const tomorrow = new Date(Date.UTC(today.getUTCFullYear(), today.getUTCMonth(), today.getUTCDate() + 1));
+      const taskStart = parseUTCDate(task.startDate);
+      const taskEnd = parseUTCDate(task.endDate);
+      const actualProgress = task.progress ?? 0;
+      if (actualProgress >= 100) {
+        return false;
+      }
+      const msPerDay = 1e3 * 60 * 60 * 24;
+      const taskDuration = taskEnd.getTime() - taskStart.getTime() + msPerDay;
+      const isTaskEndingTodayOrTomorrow = today.getUTCFullYear() === taskEnd.getUTCFullYear() && today.getUTCMonth() === taskEnd.getUTCMonth() && today.getUTCDate() === taskEnd.getUTCDate() || tomorrow.getUTCFullYear() === taskEnd.getUTCFullYear() && tomorrow.getUTCMonth() === taskEnd.getUTCMonth() && tomorrow.getUTCDate() === taskEnd.getUTCDate();
+      const elapsedCutoff = isTaskEndingTodayOrTomorrow ? new Date(today.getTime() - msPerDay) : today;
+      const daysFromStart = elapsedCutoff.getTime() - taskStart.getTime();
+      const todayPosition = Math.min(100, Math.max(0, daysFromStart / taskDuration * 100));
+      return actualProgress < todayPosition;
+    }, [task.startDate, task.endDate, task.progress, highlightExpiredTasks]);
     const { left, width } = useMemo2(
       () => calculateTaskBar(taskStartDate, taskEndDate, monthStart, dayWidth),
       [taskStartDate, taskEndDate, monthStart, dayWidth]
     );
-    const barColor = task.color || "var(--gantt-task-bar-default-color)";
+    const barColor = isExpired ? "var(--gantt-expired-color)" : task.color || "var(--gantt-task-bar-default-color)";
     const progressWidth = useMemo2(() => {
       if (task.progress === void 0 || task.progress <= 0) return 0;
       return Math.min(100, Math.max(0, Math.round(task.progress)));
     }, [task.progress]);
     const progressColor = useMemo2(() => {
+      if (isExpired) {
+        return "color-mix(in srgb, var(--gantt-expired-color) 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)`;
-    }, [progressWidth, task.accepted, task.color]);
+    }, [isExpired, progressWidth, task.accepted, task.color]);
     const handleDragEnd = (result) => {
       const updatedTask = {
         ...task,
@@ -1604,7 +1626,8 @@ var PopoverContent = ({
   align = "start",
   side = "bottom",
   portal = true,
-  collisionPadding = 8
+  collisionPadding = 8,
+  onInteractOutside
 }) => {
   const content = /* @__PURE__ */ jsx7(
     RadixPopover.Content,
@@ -1614,6 +1637,7 @@ var PopoverContent = ({
       side,
       collisionPadding,
       sideOffset: 4,
+      onInteractOutside,
       children
     }
   );
@@ -1938,10 +1962,9 @@ var DepChip = ({
   const depPrefix = formatDepDescription(dep.type, lag);
   const depName = predecessorName ?? dep.taskId;
   return /* @__PURE__ */ jsxs9(Popover, { open: isSelected, onOpenChange: (open) => {
-    if (!open) onChipSelectClear();
   }, children: [
-    /* @__PURE__ */ jsxs9("span", { className: "gantt-tl-dep-chip-wrapper", children: [
-      /* @__PURE__ */ jsx12(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx12(
+    /* @__PURE__ */ jsx12(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs9("span", { className: "gantt-tl-dep-chip-wrapper", children: [
+      /* @__PURE__ */ jsx12(
         "span",
         {
           className: `gantt-tl-dep-chip${isSelected ? " gantt-tl-dep-chip-selected" : ""}`,
@@ -1951,7 +1974,7 @@ var DepChip = ({
             lag != null && lag !== 0 ? lag > 0 ? `+${lag}` : `${lag}` : ""
           ] })
         }
-      ) }),
+      ),
       !disableDependencyEditing && /* @__PURE__ */ jsx12(
         "button",
         {
@@ -1962,11 +1985,28 @@ var DepChip = ({
           children: /* @__PURE__ */ jsx12(TrashIcon, {})
         }
       )
-    ] }),
-    /* @__PURE__ */ jsxs9(PopoverContent, { portal: true, side: "bottom", align: "start", className: "gantt-tl-dep-info-popover", children: [
-      /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-info-prefix", children: depPrefix }),
-      /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-info-name", children: depName })
-    ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs9(
+      PopoverContent,
+      {
+        portal: true,
+        side: "bottom",
+        align: "start",
+        className: "gantt-tl-dep-info-popover",
+        onInteractOutside: (event) => {
+          const target = event.target;
+          if (target?.closest?.(".gantt-tl-dep-chip") || target?.closest?.(".gantt-tl-dep-delete-label") || target?.closest?.(".gantt-tl-dep-chip-trash")) {
+            event.preventDefault();
+          } else {
+            onChipSelectClear();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-info-prefix", children: depPrefix }),
+          /* @__PURE__ */ jsx12("span", { className: "gantt-tl-dep-info-name", children: depName })
+        ]
+      }
+    )
   ] });
 };
 var toISODate = (value) => {
@@ -2462,7 +2502,8 @@ var GanttChart = forwardRef(({
   showTaskList = false,
   taskListWidth = 520,
   disableTaskNameEditing = false,
-  disableDependencyEditing = false
+  disableDependencyEditing = false,
+  highlightExpiredTasks = false
 }, ref) => {
   const scrollContainerRef = useRef5(null);
   const [selectedTaskId, setSelectedTaskId] = useState6(null);
@@ -2734,7 +2775,8 @@ var GanttChart = forwardRef(({
                     disableConstraints: disableConstraints ?? false,
                     overridePosition: cascadeOverrides.get(task.id),
                     onCascadeProgress: handleCascadeProgress,
-                    onCascade: handleCascade
+                    onCascade: handleCascade,
+                    highlightExpiredTasks
                   },
                   task.id
                 ))