gantt-lib 0.79.0 → 0.80.0

package/dist/index.mjs

@@ -3,7 +3,7 @@
 "use client";
 
 // src/components/GanttChart/GanttChart.tsx
-import { useMemo as useMemo10, useCallback as useCallback8, useRef as useRef9, useState as useState8, useEffect as useEffect9, useImperativeHandle, forwardRef } from "react";
+import { useMemo as useMemo10, useCallback as useCallback8, useRef as useRef9, useState as useState9, useEffect as useEffect9, useImperativeHandle, forwardRef } from "react";
 
 // src/core/scheduling/dateMath.ts
 var DAY_MS = 24 * 60 * 60 * 1e3;
@@ -2999,7 +2999,7 @@ var arePropsEqual2 = (prevProps, nextProps) => {
   prevProps.viewMode === nextProps.viewMode && prevProps.isCustomWeekend === nextProps.isCustomWeekend;
 };
 var GridBackground = React4.memo(
-  ({ dateRange, dayWidth, totalHeight, viewMode = "day", isCustomWeekend }) => {
+  ({ dateRange, dayWidth, totalHeight, viewMode = "day", isCustomWeekend, className, showWeekendBlocks = true, showGridLines = true }) => {
     const weekGridLines = useMemo4(() => {
       if (viewMode !== "week") return [];
       return calculateWeekGridLines(dateRange, dayWidth);
@@ -3022,13 +3022,13 @@ var GridBackground = React4.memo(
     return /* @__PURE__ */ jsxs3(
       "div",
       {
-        className: "gantt-gb-gridBackground",
+        className: ["gantt-gb-gridBackground", className].filter(Boolean).join(" "),
         style: {
           width: `${gridWidth}px`,
           height: `${totalHeight}px`
         },
         children: [
-          weekendBlocks.map((block, index) => /* @__PURE__ */ jsx4(
+          showWeekendBlocks && weekendBlocks.map((block, index) => /* @__PURE__ */ jsx4(
             "div",
             {
               className: "gantt-gb-weekendBlock",
@@ -3039,7 +3039,7 @@ var GridBackground = React4.memo(
             },
             `weekend-${index}`
           )),
-          viewMode === "week" ? (
+          showGridLines && (viewMode === "week" ? (
             // Week-view: one line per week column boundary
             weekGridLines.map((line, index) => {
               const lineClass = line.isMonthStart ? "gantt-gb-monthSeparator" : "gantt-gb-weekSeparator";
@@ -3080,7 +3080,7 @@ var GridBackground = React4.memo(
                 `gridline-${index}`
               );
             })
-          )
+          ))
         ]
       }
     );
@@ -7242,7 +7242,7 @@ var TaskList = ({
 };
 
 // src/components/ResourceTimelineChart/ResourceTimelineChart.tsx
-import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo9, useRef as useRef8 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect8, useMemo as useMemo9, useRef as useRef8, useState as useState8 } from "react";
 
 // src/utils/resourceTimelineLayout.ts
 var isInvalidDate = (date) => Number.isNaN(date.getTime());
@@ -7333,6 +7333,33 @@ var calculateConflictInfo = (parsedItems) => {
   }
   return result;
 };
+var countConflictOverlaps = (items) => {
+  const conflictsByItemId = new Map(items.map((item) => [item.itemId, item.conflictsWith]));
+  const visited = /* @__PURE__ */ new Set();
+  let overlapCount = 0;
+  for (const item of items) {
+    if (visited.has(item.itemId) || item.conflictsWith.length === 0) {
+      continue;
+    }
+    const stack = [item.itemId];
+    let componentSize = 0;
+    while (stack.length > 0) {
+      const itemId = stack.pop();
+      if (visited.has(itemId)) {
+        continue;
+      }
+      visited.add(itemId);
+      componentSize += 1;
+      for (const conflictId of conflictsByItemId.get(itemId) ?? []) {
+        if (!visited.has(conflictId)) {
+          stack.push(conflictId);
+        }
+      }
+    }
+    overlapCount += Math.max(0, componentSize - 1);
+  }
+  return overlapCount;
+};
 var layoutResourceTimelineItems = (resources, options) => {
   const rows = [];
   const items = [];
@@ -7392,7 +7419,7 @@ var layoutResourceTimelineItems = (resources, options) => {
     }
     const laneCount = Math.max(1, laneEndDays.length);
     const resourceRowHeight = laneCount * options.laneHeight;
-    const conflictCount = laidOutItems.filter((item) => item.conflictsWith.length > 0).length;
+    const conflictCount = countConflictOverlaps(laidOutItems);
     const row = {
       resource,
       resourceId: resource.id,
@@ -7637,7 +7664,8 @@ var DEFAULT_ROW_HEADER_WIDTH = 240;
 var DEFAULT_RESOURCE_ROW_GAP = 8;
 var ITEM_OUTER_VERTICAL_INSET = 2;
 var ITEM_INNER_VERTICAL_INSET = 1;
-var ITEM_HORIZONTAL_INSET = 1;
+var ITEM_START_HORIZONTAL_INSET = 2;
+var ITEM_END_HORIZONTAL_INSET = 1;
 var isValidDate = (date) => !Number.isNaN(date.getTime());
 var collectValidItems = (resources) => {
   return resources.flatMap(
@@ -7659,12 +7687,18 @@ var getVisualItemGeometry = (geometry, laneIndex, laneCount) => {
   const topInset = laneIndex === 0 ? ITEM_OUTER_VERTICAL_INSET : ITEM_INNER_VERTICAL_INSET;
   const bottomInset = laneIndex === laneCount - 1 ? ITEM_OUTER_VERTICAL_INSET : ITEM_INNER_VERTICAL_INSET;
   return {
-    left: geometry.left + ITEM_HORIZONTAL_INSET,
+    left: geometry.left + ITEM_START_HORIZONTAL_INSET,
     top: geometry.top + topInset,
-    width: Math.max(0, geometry.width - ITEM_HORIZONTAL_INSET * 2),
+    width: Math.max(1, geometry.width - ITEM_START_HORIZONTAL_INSET - ITEM_END_HORIZONTAL_INSET),
     height: Math.max(0, geometry.height - topInset - bottomInset)
   };
 };
+var formatOverlapCount = (count) => {
+  const mod10 = count % 10;
+  const mod100 = count % 100;
+  const word = mod10 === 1 && mod100 !== 11 ? "\u043D\u0430\u043B\u043E\u0436\u0435\u043D\u0438\u0435" : mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14) ? "\u043D\u0430\u043B\u043E\u0436\u0435\u043D\u0438\u044F" : "\u043D\u0430\u043B\u043E\u0436\u0435\u043D\u0438\u0439";
+  return `${count} ${word}`;
+};
 var getWeekendOverlaySegments = (startDate, endDate, dayWidth, weekendPredicate) => {
   const segments2 = [];
   const current = new Date(Date.UTC(startDate.getUTCFullYear(), startDate.getUTCMonth(), startDate.getUTCDate()));
@@ -7707,7 +7741,143 @@ var getRangeOverlaySegments = (itemStartDate, ranges, dayWidth) => {
     };
   });
 };
+var clampOverlaySegments = (segments2, maxWidth) => segments2.flatMap((segment) => {
+  const left = Math.max(0, Math.min(segment.left, maxWidth));
+  const right = Math.max(left, Math.min(segment.left + segment.width, maxWidth));
+  const width = right - left;
+  return width > 0 ? [{ left, width }] : [];
+});
 var getDurationValue = (startDate, endDate, businessDays, weekendPredicate) => businessDays ? getBusinessDaysCount(startDate, endDate, weekendPredicate) : Math.max(1, Math.round((endDate.getTime() - startDate.getTime()) / (24 * 60 * 60 * 1e3)) + 1);
+var ResourceHeader = ({
+  resource,
+  resourceId,
+  conflictCount,
+  height,
+  paddingBottom,
+  menuCommands
+}) => {
+  const [menuOpen, setMenuOpen] = useState8(false);
+  const visibleCommands = useMemo9(
+    () => menuCommands.filter((command) => command.isVisible?.(resource) ?? true),
+    [menuCommands, resource]
+  );
+  const hasMenu = visibleCommands.length > 0;
+  const handleCommandClick = (command, event) => {
+    event.stopPropagation();
+    if (command.closeOnSelect !== false) {
+      setMenuOpen(false);
+    }
+    command.onSelect(resource);
+  };
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: `gantt-resourceTimeline-resourceHeader${menuOpen ? " gantt-resourceTimeline-resourceHeaderMenuOpen" : ""}`,
+      "data-resource-row-id": resourceId,
+      style: {
+        height: `${height}px`,
+        paddingBottom: `${paddingBottom}px`
+      },
+      children: [
+        /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceName", children: resource.name }),
+        conflictCount > 0 && /* @__PURE__ */ jsx15(
+          "span",
+          {
+            className: "gantt-resourceTimeline-conflictBadge",
+            "aria-label": formatOverlapCount(conflictCount),
+            title: formatOverlapCount(conflictCount),
+            children: conflictCount
+          }
+        ),
+        hasMenu && /* @__PURE__ */ jsxs12(Popover, { open: menuOpen, onOpenChange: setMenuOpen, children: [
+          /* @__PURE__ */ jsx15(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx15(
+            "button",
+            {
+              className: "gantt-resourceTimeline-resourceMenuButton",
+              type: "button",
+              "aria-label": "\u0414\u0435\u0439\u0441\u0442\u0432\u0438\u044F \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
+              onClick: (event) => {
+                event.stopPropagation();
+                setMenuOpen((open) => !open);
+              },
+              children: /* @__PURE__ */ jsx15("span", { "aria-hidden": "true", children: "\u22EE" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx15(PopoverContent, { className: "gantt-resourceTimeline-resourceMenu", portal: true, align: "end", children: visibleCommands.map((command) => /* @__PURE__ */ jsxs12(
+            "button",
+            {
+              type: "button",
+              className: `gantt-resourceTimeline-resourceMenuItem${command.danger ? " gantt-resourceTimeline-resourceMenuItemDanger" : ""}`,
+              disabled: command.isDisabled?.(resource) ?? false,
+              onClick: (event) => handleCommandClick(command, event),
+              children: [
+                command.icon,
+                command.label
+              ]
+            },
+            command.id
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+var NewResourceRow = ({ height, onConfirm, onCancel }) => {
+  const [nameValue, setNameValue] = useState8("");
+  const inputRef = useRef8(null);
+  const confirmedRef = useRef8(false);
+  useEffect8(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  const handleCancel = () => {
+    confirmedRef.current = true;
+    onCancel();
+  };
+  const handleConfirm = () => {
+    const name = nameValue.trim();
+    if (!name) {
+      handleCancel();
+      return;
+    }
+    confirmedRef.current = true;
+    onConfirm(name);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key === "Enter") {
+      handleConfirm();
+    } else if (event.key === "Escape") {
+      handleCancel();
+    }
+  };
+  const handleBlur = () => {
+    if (!confirmedRef.current) {
+      handleConfirm();
+    }
+  };
+  return /* @__PURE__ */ jsx15(
+    "div",
+    {
+      className: "gantt-resourceTimeline-resourceHeader gantt-resourceTimeline-resourceHeaderNew",
+      style: {
+        height: `${height}px`,
+        paddingBottom: `${DEFAULT_RESOURCE_ROW_GAP}px`
+      },
+      children: /* @__PURE__ */ jsx15(
+        Input,
+        {
+          ref: inputRef,
+          value: nameValue,
+          onChange: (event) => setNameValue(event.target.value),
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          placeholder: "\u041D\u0430\u0437\u0432\u0430\u043D\u0438\u0435 \u0440\u0435\u0441\u0443\u0440\u0441\u0430",
+          className: "gantt-resourceTimeline-resourceInput"
+        }
+      )
+    }
+  );
+};
 function ResourceTimelineChart({
   resources,
   dayWidth = DEFAULT_DAY_WIDTH,
@@ -7725,11 +7895,15 @@ function ResourceTimelineChart({
   renderItem,
   getItemClassName,
   onResourceItemClick,
-  onResourceItemMove
+  onResourceItemMove,
+  onAddResource,
+  enableAddResource = true,
+  resourceMenuCommands = []
 }) {
   const scrollContainerRef = useRef8(null);
   const gridRef = useRef8(null);
   const panStateRef = useRef8(null);
+  const [isCreatingResource, setIsCreatingResource] = useState8(false);
   const validItems = useMemo9(() => collectValidItems(resources), [resources]);
   const dateRange = useMemo9(() => getMultiMonthDays(validItems), [validItems]);
   const monthStart = useMemo9(() => {
@@ -7764,6 +7938,18 @@ function ResourceTimelineChart({
     }
     return map;
   }, [layout.items]);
+  const canAddResource = enableAddResource && Boolean(onAddResource);
+  const resourceAddRowHeight = laneHeight + DEFAULT_RESOURCE_ROW_GAP;
+  const displayTotalHeight = layout.totalHeight + (canAddResource ? resourceAddRowHeight : 0);
+  const handleConfirmNewResource = useCallback7((name) => {
+    onAddResource?.({
+      id: crypto.randomUUID(),
+      name,
+      items: []
+    });
+    setIsCreatingResource(false);
+  }, [onAddResource]);
+  const handleCancelNewResource = useCallback7(() => setIsCreatingResource(false), []);
   const { preview, startDrag } = useResourceItemDrag({
     dayWidth,
     monthStart,
@@ -7858,28 +8044,34 @@ function ResourceTimelineChart({
                   style: { height: `${headerHeight}px` }
                 }
               ),
-              layout.rows.map((row) => /* @__PURE__ */ jsxs12(
-                "div",
+              layout.rows.map((row) => /* @__PURE__ */ jsx15(
+                ResourceHeader,
                 {
-                  className: "gantt-resourceTimeline-resourceHeader",
-                  "data-resource-row-id": row.resourceId,
-                  style: {
-                    height: `${row.resourceRowHeight + DEFAULT_RESOURCE_ROW_GAP}px`,
-                    paddingBottom: `${DEFAULT_RESOURCE_ROW_GAP}px`
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx15("span", { className: "gantt-resourceTimeline-resourceName", children: row.resource.name }),
-                    row.conflictCount > 0 && /* @__PURE__ */ jsx15(
-                      "span",
-                      {
-                        className: "gantt-resourceTimeline-conflictBadge",
-                        "aria-label": `${row.conflictCount} \u043A\u043E\u043D\u0444\u043B\u0438\u043A\u0442\u043E\u0432`,
-                        children: row.conflictCount
-                      }
-                    )
-                  ]
+                  resource: row.resource,
+                  resourceId: row.resourceId,
+                  conflictCount: row.conflictCount,
+                  height: row.resourceRowHeight + DEFAULT_RESOURCE_ROW_GAP,
+                  paddingBottom: DEFAULT_RESOURCE_ROW_GAP,
+                  menuCommands: resourceMenuCommands
                 },
                 row.resourceId
+              )),
+              canAddResource && (isCreatingResource ? /* @__PURE__ */ jsx15(
+                NewResourceRow,
+                {
+                  height: resourceAddRowHeight,
+                  onConfirm: handleConfirmNewResource,
+                  onCancel: handleCancelNewResource
+                }
+              ) : /* @__PURE__ */ jsx15(
+                "button",
+                {
+                  className: "gantt-resourceTimeline-addResourceButton",
+                  type: "button",
+                  style: { height: `${resourceAddRowHeight}px` },
+                  onClick: () => setIsCreatingResource(true),
+                  children: "+ \u0414\u043E\u0431\u0430\u0432\u0438\u0442\u044C \u0440\u0435\u0441\u0443\u0440\u0441"
+                }
               ))
             ]
           }
@@ -7905,14 +8097,14 @@ function ResourceTimelineChart({
                 {
                   ref: gridRef,
                   className: "gantt-resourceTimeline-grid",
-                  style: { width: `${gridWidth}px`, height: `${layout.totalHeight}px` },
+                  style: { width: `${gridWidth}px`, height: `${displayTotalHeight}px` },
                   children: [
                     /* @__PURE__ */ jsx15(
                       GridBackground_default,
                       {
                         dateRange,
                         dayWidth,
-                        totalHeight: layout.totalHeight,
+                        totalHeight: displayTotalHeight,
                         viewMode,
                         isCustomWeekend: weekendPredicate
                       }
@@ -7930,6 +8122,17 @@ function ResourceTimelineChart({
                       },
                       row.resourceId
                     )),
+                    canAddResource && /* @__PURE__ */ jsx15(
+                      "div",
+                      {
+                        className: "gantt-resourceTimeline-row gantt-resourceTimeline-rowNew",
+                        "data-resource-add-row": "true",
+                        style: {
+                          top: `${layout.totalHeight}px`,
+                          height: `${resourceAddRowHeight}px`
+                        }
+                      }
+                    ),
                     Array.from(itemsByResourceId.values()).flatMap(
                       (resourceItems) => resourceItems.map((layoutItem) => {
                         const customClassName = getItemClassName?.(layoutItem.item);
@@ -7955,11 +8158,17 @@ function ResourceTimelineChart({
                         }, layoutItem.laneIndex, laneCount);
                         const overlayStartDate = isDraggingItem ? preview.startDate : layoutItem.startDate;
                         const overlayEndDate = isDraggingItem ? preview.endDate : layoutItem.endDate;
-                        const weekendOverlaySegments = businessDays ? getWeekendOverlaySegments(overlayStartDate, overlayEndDate, dayWidth, weekendPredicate) : [];
-                        const conflictOverlaySegments = getRangeOverlaySegments(
-                          overlayStartDate,
-                          isDraggingItem ? [] : layoutItem.conflictRanges,
-                          dayWidth
+                        const weekendOverlaySegments = businessDays ? clampOverlaySegments(
+                          getWeekendOverlaySegments(overlayStartDate, overlayEndDate, dayWidth, weekendPredicate),
+                          itemGeometry.width
+                        ) : [];
+                        const conflictOverlaySegments = clampOverlaySegments(
+                          getRangeOverlaySegments(
+                            overlayStartDate,
+                            isDraggingItem ? [] : layoutItem.conflictRanges,
+                            dayWidth
+                          ),
+                          itemGeometry.width
                         );
                         const durationValue = getDurationValue(
                           overlayStartDate,
@@ -8456,20 +8665,20 @@ function TaskGanttChartInner(props, ref) {
   const containerRef = useRef9(null);
   const scrollContainerRef = useRef9(null);
   const scrollContentRef = useRef9(null);
-  const [selectedTaskId, setSelectedTaskId] = useState8(null);
-  const [taskListHasRightShadow, setTaskListHasRightShadow] = useState8(false);
-  const [selectedChip, setSelectedChip] = useState8(null);
-  const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState8(/* @__PURE__ */ new Set());
+  const [selectedTaskId, setSelectedTaskId] = useState9(null);
+  const [taskListHasRightShadow, setTaskListHasRightShadow] = useState9(false);
+  const [selectedChip, setSelectedChip] = useState9(null);
+  const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState9(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
-  const [editingTaskId, setEditingTaskId] = useState8(null);
+  const [editingTaskId, setEditingTaskId] = useState9(null);
   const normalizedTasks = useMemo10(() => normalizeHierarchyTasks(tasks), [tasks]);
   const isCustomWeekend = useMemo10(
     () => createCustomDayPredicate({ customDays, isWeekend: isWeekend3 }),
     [customDays, isWeekend3]
   );
   const dateRange = useMemo10(() => getMultiMonthDays(normalizedTasks), [normalizedTasks]);
-  const [validationResult, setValidationResult] = useState8(null);
-  const [cascadeOverrides, setCascadeOverrides] = useState8(/* @__PURE__ */ new Map());
+  const [validationResult, setValidationResult] = useState9(null);
+  const [cascadeOverrides, setCascadeOverrides] = useState9(/* @__PURE__ */ new Map());
   const gridWidth = useMemo10(
     () => Math.round(dateRange.length * dayWidth),
     [dateRange.length, dayWidth]
@@ -8586,9 +8795,9 @@ function TaskGanttChartInner(props, ref) {
     setSelectedTaskId(taskId);
     container.scrollTo({ top: scrollTop, behavior: "smooth" });
   }, [tasks, visibleTasks, rowHeight]);
-  const [dragGuideLines, setDragGuideLines] = useState8(null);
-  const [draggedTaskOverride, setDraggedTaskOverride] = useState8(null);
-  const [previewTasksById, setPreviewTasksById] = useState8(/* @__PURE__ */ new Map());
+  const [dragGuideLines, setDragGuideLines] = useState9(null);
+  const [draggedTaskOverride, setDraggedTaskOverride] = useState9(null);
+  const [previewTasksById, setPreviewTasksById] = useState9(/* @__PURE__ */ new Map());
   useEffect9(() => {
     const result = validateDependencies(tasks);
     setValidationResult(result);
@@ -9118,6 +9327,11 @@ var not = (predicate) => (task) => !predicate(task);
 var withoutDeps = (options = {}) => (task) => {
   if (!task) return false;
   if (options.onlyChildren && !task.parentId) return false;
+  if (options.onlyLeafTasks) {
+    const isParent = (options.tasks ?? []).some((candidate) => candidate.parentId === task.id);
+    const isRegularTask = task.type == null || task.type === "task";
+    if (isParent || !isRegularTask) return false;
+  }
   return !task.dependencies || task.dependencies.length === 0;
 };
 var expired = (referenceDate = /* @__PURE__ */ new Date()) => (task) => isTaskExpired(task, referenceDate);