gantt-lib 0.72.1 → 0.73.0

package/dist/index.js

@@ -4246,6 +4246,26 @@ var CopyIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     ]
   }
 );
+var UngroupIcon = () => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M3 12h10" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 9-3 3 3 3" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M13 6h8" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M13 18h8" })
+    ]
+  }
+);
 var TASK_COLOR_PALETTE = [
   // { label: "Палисандр", value: "#A61E4D" },
   // { label: "Киноварь", value: "#E8590C" },
@@ -4678,6 +4698,7 @@ var TaskListRow = import_react10.default.memo(
     onToggleCollapse,
     onPromoteTask,
     onDemoteTask,
+    onUngroupTask,
     onDuplicateTask,
     canDemoteTask = true,
     isLastChild = true,
@@ -4689,7 +4710,8 @@ var TaskListRow = import_react10.default.memo(
     businessDays,
     isFilterMatch = false,
     isFilterHideMode = false,
-    resolvedColumns
+    resolvedColumns,
+    taskListMenuCommands = []
   }) => {
     const [editingColumnId, setEditingColumnId] = (0, import_react10.useState)(null);
     const editingName = editingColumnId === "name";
@@ -4723,6 +4745,7 @@ var TaskListRow = import_react10.default.memo(
       [task.id, allTasks]
     );
     const isChild = task.parentId !== void 0;
+    const isMilestoneRow = normalizedTask.type === "milestone";
     const weekendPredicate = (0, import_react10.useMemo)(
       () => createCustomDayPredicate({ customDays, isWeekend: isWeekend3 }),
       [customDays, isWeekend3]
@@ -5245,6 +5268,38 @@ var TaskListRow = import_react10.default.memo(
       },
       [allTasks, isParent, onTasksChange, task]
     );
+    const handleUngroup = (0, import_react10.useCallback)(
+      (e) => {
+        e.stopPropagation();
+        setContextMenuOpen(false);
+        onUngroupTask?.(task.id);
+      },
+      [onUngroupTask, task.id]
+    );
+    const visibleCustomMenuCommands = (0, import_react10.useMemo)(
+      () => taskListMenuCommands.filter(
+        (command) => {
+          const scope = command.scope ?? "all";
+          if (scope === "group" && !isParent) return false;
+          if (scope === "linear" && (isParent || isMilestoneRow)) return false;
+          if (scope === "milestone" && !isMilestoneRow) return false;
+          return command.isVisible?.(task) ?? true;
+        }
+      ),
+      [taskListMenuCommands, task, isParent, isMilestoneRow]
+    );
+    const hasContextMenu = visibleCustomMenuCommands.length > 0 || !!onDuplicateTask || !!onDelete || !!onTasksChange || isParent && !!onUngroupTask;
+    const handleCustomMenuCommandClick = (0, import_react10.useCallback)(
+      (command) => (e) => {
+        e.stopPropagation();
+        if (command.closeOnSelect !== false) {
+          setContextMenuOpen(false);
+          setColorMenuOpen(false);
+        }
+        command.onSelect(task);
+      },
+      [task]
+    );
     const handleAddClick = (0, import_react10.useCallback)(
       (e) => {
         e.stopPropagation();
@@ -5671,7 +5726,7 @@ var TaskListRow = import_react10.default.memo(
           "aria-hidden": "true"
         }
       ),
-      !editingName && (onInsertAfter || onDelete || onPromoteTask || onDemoteTask || onDuplicateTask || onTasksChange) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-name-actions", children: [
+      !editingName && (onInsertAfter || onDelete || onPromoteTask || onDemoteTask || onUngroupTask || onDuplicateTask || onTasksChange || hasContextMenu) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "gantt-tl-name-actions", children: [
         onInsertAfter && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "button",
           {
@@ -5717,7 +5772,7 @@ var TaskListRow = import_react10.default.memo(
             onDemote: onDemoteTask ? handleDemote : void 0
           }
         ),
-        (onDuplicateTask || onDelete || onTasksChange) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Popover, { open: contextMenuOpen, onOpenChange: (open) => {
+        hasContextMenu && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Popover, { open: contextMenuOpen, onOpenChange: (open) => {
           setContextMenuOpen(open);
           if (!open) setColorMenuOpen(false);
         }, children: [
@@ -5810,6 +5865,32 @@ var TaskListRow = import_react10.default.memo(
                 ]
               }
             ),
+            visibleCustomMenuCommands.map((command) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: `gantt-tl-context-menu-item${command.danger ? " gantt-tl-context-menu-item-danger" : ""}`,
+                onClick: handleCustomMenuCommandClick(command),
+                disabled: command.isDisabled?.(task) ?? false,
+                children: [
+                  command.icon,
+                  command.label
+                ]
+              },
+              command.id
+            )),
+            isParent && onUngroupTask && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+              "button",
+              {
+                type: "button",
+                className: "gantt-tl-context-menu-item",
+                onClick: handleUngroup,
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(UngroupIcon, {}),
+                  "\u0420\u0430\u0437\u0433\u0440\u0443\u043F\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C"
+                ]
+              }
+            ),
             onDelete && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
               "button",
               {
@@ -6505,6 +6586,7 @@ var TaskList = ({
   onToggleCollapse: externalOnToggleCollapse,
   onPromoteTask,
   onDemoteTask,
+  onUngroupTask,
   customDays,
   isWeekend: isWeekend3,
   businessDays,
@@ -6512,7 +6594,8 @@ var TaskList = ({
   filterMode = "highlight",
   filteredTaskIds = /* @__PURE__ */ new Set(),
   isFilterActive = false,
-  additionalColumns
+  additionalColumns,
+  taskListMenuCommands
 }) => {
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
@@ -7176,6 +7259,7 @@ var TaskList = ({
                 onToggleCollapse: handleToggleCollapse,
                 onPromoteTask,
                 onDemoteTask: onDemoteTask ? handleDemoteWrapper : void 0,
+                onUngroupTask,
                 onDuplicateTask: onReorder ? handleDuplicateTask : void 0,
                 canDemoteTask,
                 isLastChild: lastChildIds.has(task.id),
@@ -7187,7 +7271,8 @@ var TaskList = ({
                 businessDays,
                 isFilterMatch: filterMode === "highlight" ? highlightedTaskIds.has(task.id) : false,
                 isFilterHideMode: filterMode === "hide" && isFilterActive,
-                resolvedColumns
+                resolvedColumns,
+                taskListMenuCommands
               }
             ),
             pendingInsertDisplayTaskId === task.id && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
@@ -7245,8 +7330,13 @@ var TaskList = ({
 };
 
 // src/components/GanttChart/print.ts
-function getPrintDocumentTitle({ header, title, fileName }) {
-  return header?.projectName || title || header?.serviceName || fileName || "Gantt chart";
+function getPrintDocumentTitle({
+  header,
+  documentTitle,
+  title,
+  fileName
+}) {
+  return documentTitle || fileName || title || header?.projectName || header?.serviceName || "Gantt chart";
 }
 function formatHeaderExportDate(exportDate) {
   if (!exportDate) return null;
@@ -7541,6 +7631,7 @@ async function printGanttChart({
   sourceContainer,
   printContent,
   header,
+  documentTitle,
   title,
   fileName,
   orientation
@@ -7552,7 +7643,7 @@ async function printGanttChart({
     if (!printWindow || !printDocument) {
       throw new Error("Unable to create print frame");
     }
-    const printTitle = getPrintDocumentTitle({ header, title, fileName });
+    const printTitle = getPrintDocumentTitle({ header, documentTitle, title, fileName });
     printDocument.open();
     printDocument.write('<!doctype html><html><head><meta charset="utf-8" /></head><body></body></html>');
     printDocument.close();
@@ -7601,6 +7692,7 @@ function GanttChartInner(props, ref) {
     onReorder,
     onPromoteTask,
     onDemoteTask,
+    onUngroupTask,
     enableAddTask = true,
     viewMode = "day",
     customDays,
@@ -7613,7 +7705,8 @@ function GanttChartInner(props, ref) {
     highlightedTaskIds,
     disableTaskDrag = false,
     showChart = true,
-    additionalColumns
+    additionalColumns,
+    taskListMenuCommands
   } = props;
   const containerRef = (0, import_react13.useRef)(null);
   const scrollContainerRef = (0, import_react13.useRef)(null);
@@ -7920,6 +8013,7 @@ function GanttChartInner(props, ref) {
     }
     if (includeChart) {
       chartClone?.classList.remove("gantt-chart-hidden");
+      if (chartClone) chartClone.style.display = "";
     } else {
       chartClone?.remove();
     }
@@ -7928,6 +8022,7 @@ function GanttChartInner(props, ref) {
       sourceContainer,
       printContent,
       header: options?.header,
+      documentTitle: options?.documentTitle,
       title: options?.title,
       fileName: options?.fileName,
       orientation: options?.orientation
@@ -8027,6 +8122,33 @@ function GanttChartInner(props, ref) {
     };
     onTasksChange?.([updatedDemotedTask]);
   }, [tasks, onTasksChange, onDemoteTask]);
+  const handleUngroupTask = (0, import_react13.useCallback)((taskId) => {
+    if (onUngroupTask) {
+      onUngroupTask(taskId);
+      return;
+    }
+    const parentTask = tasks.find((task) => task.id === taskId);
+    if (!parentTask) return;
+    const hasDirectChildren = tasks.some((task) => task.parentId === taskId);
+    if (!hasDirectChildren) return;
+    const changedTasks = [];
+    for (const task of tasks) {
+      if (task.id === taskId) continue;
+      const nextParentId = task.parentId === taskId ? parentTask.parentId : task.parentId;
+      const nextDependencies = task.dependencies?.filter((dep) => dep.taskId !== taskId);
+      if (nextParentId !== task.parentId || nextDependencies?.length !== task.dependencies?.length) {
+        changedTasks.push({
+          ...task,
+          parentId: nextParentId,
+          dependencies: nextDependencies
+        });
+      }
+    }
+    if (changedTasks.length > 0) {
+      onTasksChange?.(changedTasks);
+    }
+    onDelete?.(taskId);
+  }, [tasks, onTasksChange, onDelete, onUngroupTask]);
   const panStateRef = (0, import_react13.useRef)(null);
   const handlePanStart = (0, import_react13.useCallback)((e) => {
     if (e.button !== 0) return;
@@ -8105,6 +8227,7 @@ function GanttChartInner(props, ref) {
             onToggleCollapse: handleToggleCollapse,
             onPromoteTask: onPromoteTask ?? handlePromoteTask,
             onDemoteTask: onDemoteTask ?? handleDemoteTask,
+            onUngroupTask: onUngroupTask ?? handleUngroupTask,
             highlightedTaskIds: taskListHighlightedTaskIds,
             customDays,
             isWeekend: isWeekend3,
@@ -8112,103 +8235,111 @@ function GanttChartInner(props, ref) {
             filterMode,
             filteredTaskIds: matchedTaskIds,
             isFilterActive: !!taskFilter,
-            additionalColumns
+            additionalColumns,
+            taskListMenuCommands
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: showChart ? "gantt-chartSurface" : "gantt-chartSurface gantt-chart-hidden", style: { minWidth: `${gridWidth}px`, flex: 1 }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-            TimeScaleHeader_default,
-            {
-              days: dateRange,
-              dayWidth,
-              headerHeight,
-              viewMode,
-              isCustomWeekend
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
-            "div",
-            {
-              className: "gantt-taskArea",
-              style: {
-                position: "relative",
-                width: `${gridWidth}px`
-              },
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  GridBackground_default,
-                  {
-                    dateRange,
-                    dayWidth,
-                    totalHeight: totalGridHeight,
-                    viewMode,
-                    isCustomWeekend
-                  }
-                ),
-                todayInRange && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TodayIndicator_default, { monthStart, dayWidth }),
-                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-                  DependencyLines_default,
-                  {
-                    tasks: previewVisibleTasks,
-                    allTasks: previewNormalizedTasks,
-                    collapsedParentIds,
-                    monthStart,
-                    dayWidth,
-                    rowHeight,
-                    gridWidth,
-                    dragOverrides: dependencyOverrides,
-                    selectedDep: selectedChip,
-                    businessDays,
-                    weekendPredicate: isCustomWeekend
-                  }
-                ),
-                dragGuideLines && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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,
-                    isFilterMatch: filterMode === "highlight" ? matchedTaskIds.has(task.id) : false,
-                    businessDays,
-                    customDays,
-                    isWeekend: isWeekend3,
-                    disableTaskDrag
+        /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.jsx)("div", { className: "gantt-stickyHeader", style: { width: `${gridWidth}px` }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                TimeScaleHeader_default,
+                {
+                  days: dateRange,
+                  dayWidth,
+                  headerHeight,
+                  viewMode,
+                  isCustomWeekend
+                }
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                "div",
+                {
+                  className: "gantt-taskArea",
+                  style: {
+                    position: "relative",
+                    width: `${gridWidth}px`
                   },
-                  task.id
-                ))
-              ]
-            }
-          )
-        ] })
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      GridBackground_default,
+                      {
+                        dateRange,
+                        dayWidth,
+                        totalHeight: totalGridHeight,
+                        viewMode,
+                        isCustomWeekend
+                      }
+                    ),
+                    todayInRange && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TodayIndicator_default, { monthStart, dayWidth }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                      DependencyLines_default,
+                      {
+                        tasks: previewVisibleTasks,
+                        allTasks: previewNormalizedTasks,
+                        collapsedParentIds,
+                        monthStart,
+                        dayWidth,
+                        rowHeight,
+                        gridWidth,
+                        dragOverrides: dependencyOverrides,
+                        selectedDep: selectedChip,
+                        businessDays,
+                        weekendPredicate: isCustomWeekend
+                      }
+                    ),
+                    dragGuideLines && /* @__PURE__ */ (0, import_jsx_runtime15.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_runtime15.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,
+                        isFilterMatch: filterMode === "highlight" ? matchedTaskIds.has(task.id) : false,
+                        businessDays,
+                        customDays,
+                        isWeekend: isWeekend3,
+                        disableTaskDrag
+                      },
+                      task.id
+                    ))
+                  ]
+                }
+              )
+            ]
+          }
+        )
       ] })
     }
   ) });