gantt-lib 0.72.2 → 0.73.0

package/dist/index.mjs

@@ -4151,6 +4151,26 @@ var CopyIcon = () => /* @__PURE__ */ jsxs9(
     ]
   }
 );
+var UngroupIcon = () => /* @__PURE__ */ jsxs9(
+  "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__ */ jsx12("path", { d: "M3 12h10" }),
+      /* @__PURE__ */ jsx12("path", { d: "m6 9-3 3 3 3" }),
+      /* @__PURE__ */ jsx12("path", { d: "M13 6h8" }),
+      /* @__PURE__ */ jsx12("path", { d: "M13 18h8" })
+    ]
+  }
+);
 var TASK_COLOR_PALETTE = [
   // { label: "Палисандр", value: "#A61E4D" },
   // { label: "Киноварь", value: "#E8590C" },
@@ -4583,6 +4603,7 @@ var TaskListRow = React9.memo(
     onToggleCollapse,
     onPromoteTask,
     onDemoteTask,
+    onUngroupTask,
     onDuplicateTask,
     canDemoteTask = true,
     isLastChild = true,
@@ -4594,7 +4615,8 @@ var TaskListRow = React9.memo(
     businessDays,
     isFilterMatch = false,
     isFilterHideMode = false,
-    resolvedColumns
+    resolvedColumns,
+    taskListMenuCommands = []
   }) => {
     const [editingColumnId, setEditingColumnId] = useState4(null);
     const editingName = editingColumnId === "name";
@@ -4628,6 +4650,7 @@ var TaskListRow = React9.memo(
       [task.id, allTasks]
     );
     const isChild = task.parentId !== void 0;
+    const isMilestoneRow = normalizedTask.type === "milestone";
     const weekendPredicate = useMemo7(
       () => createCustomDayPredicate({ customDays, isWeekend: isWeekend3 }),
       [customDays, isWeekend3]
@@ -5150,6 +5173,38 @@ var TaskListRow = React9.memo(
       },
       [allTasks, isParent, onTasksChange, task]
     );
+    const handleUngroup = useCallback4(
+      (e) => {
+        e.stopPropagation();
+        setContextMenuOpen(false);
+        onUngroupTask?.(task.id);
+      },
+      [onUngroupTask, task.id]
+    );
+    const visibleCustomMenuCommands = useMemo7(
+      () => 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 = useCallback4(
+      (command) => (e) => {
+        e.stopPropagation();
+        if (command.closeOnSelect !== false) {
+          setContextMenuOpen(false);
+          setColorMenuOpen(false);
+        }
+        command.onSelect(task);
+      },
+      [task]
+    );
     const handleAddClick = useCallback4(
       (e) => {
         e.stopPropagation();
@@ -5576,7 +5631,7 @@ var TaskListRow = React9.memo(
           "aria-hidden": "true"
         }
       ),
-      !editingName && (onInsertAfter || onDelete || onPromoteTask || onDemoteTask || onDuplicateTask || onTasksChange) && /* @__PURE__ */ jsxs9("div", { className: "gantt-tl-name-actions", children: [
+      !editingName && (onInsertAfter || onDelete || onPromoteTask || onDemoteTask || onUngroupTask || onDuplicateTask || onTasksChange || hasContextMenu) && /* @__PURE__ */ jsxs9("div", { className: "gantt-tl-name-actions", children: [
         onInsertAfter && /* @__PURE__ */ jsx12(
           "button",
           {
@@ -5622,7 +5677,7 @@ var TaskListRow = React9.memo(
             onDemote: onDemoteTask ? handleDemote : void 0
           }
         ),
-        (onDuplicateTask || onDelete || onTasksChange) && /* @__PURE__ */ jsxs9(Popover, { open: contextMenuOpen, onOpenChange: (open) => {
+        hasContextMenu && /* @__PURE__ */ jsxs9(Popover, { open: contextMenuOpen, onOpenChange: (open) => {
           setContextMenuOpen(open);
           if (!open) setColorMenuOpen(false);
         }, children: [
@@ -5715,6 +5770,32 @@ var TaskListRow = React9.memo(
                 ]
               }
             ),
+            visibleCustomMenuCommands.map((command) => /* @__PURE__ */ jsxs9(
+              "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__ */ jsxs9(
+              "button",
+              {
+                type: "button",
+                className: "gantt-tl-context-menu-item",
+                onClick: handleUngroup,
+                children: [
+                  /* @__PURE__ */ jsx12(UngroupIcon, {}),
+                  "\u0420\u0430\u0437\u0433\u0440\u0443\u043F\u043F\u0438\u0440\u043E\u0432\u0430\u0442\u044C"
+                ]
+              }
+            ),
             onDelete && /* @__PURE__ */ jsxs9(
               "button",
               {
@@ -6410,6 +6491,7 @@ var TaskList = ({
   onToggleCollapse: externalOnToggleCollapse,
   onPromoteTask,
   onDemoteTask,
+  onUngroupTask,
   customDays,
   isWeekend: isWeekend3,
   businessDays,
@@ -6417,7 +6499,8 @@ var TaskList = ({
   filterMode = "highlight",
   filteredTaskIds = /* @__PURE__ */ new Set(),
   isFilterActive = false,
-  additionalColumns
+  additionalColumns,
+  taskListMenuCommands
 }) => {
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState6(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
@@ -7081,6 +7164,7 @@ var TaskList = ({
                 onToggleCollapse: handleToggleCollapse,
                 onPromoteTask,
                 onDemoteTask: onDemoteTask ? handleDemoteWrapper : void 0,
+                onUngroupTask,
                 onDuplicateTask: onReorder ? handleDuplicateTask : void 0,
                 canDemoteTask,
                 isLastChild: lastChildIds.has(task.id),
@@ -7092,7 +7176,8 @@ var TaskList = ({
                 businessDays,
                 isFilterMatch: filterMode === "highlight" ? highlightedTaskIds.has(task.id) : false,
                 isFilterHideMode: filterMode === "hide" && isFilterActive,
-                resolvedColumns
+                resolvedColumns,
+                taskListMenuCommands
               }
             ),
             pendingInsertDisplayTaskId === task.id && /* @__PURE__ */ jsx14(
@@ -7512,6 +7597,7 @@ function GanttChartInner(props, ref) {
     onReorder,
     onPromoteTask,
     onDemoteTask,
+    onUngroupTask,
     enableAddTask = true,
     viewMode = "day",
     customDays,
@@ -7524,7 +7610,8 @@ function GanttChartInner(props, ref) {
     highlightedTaskIds,
     disableTaskDrag = false,
     showChart = true,
-    additionalColumns
+    additionalColumns,
+    taskListMenuCommands
   } = props;
   const containerRef = useRef7(null);
   const scrollContainerRef = useRef7(null);
@@ -7940,6 +8027,33 @@ function GanttChartInner(props, ref) {
     };
     onTasksChange?.([updatedDemotedTask]);
   }, [tasks, onTasksChange, onDemoteTask]);
+  const handleUngroupTask = useCallback6((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 = useRef7(null);
   const handlePanStart = useCallback6((e) => {
     if (e.button !== 0) return;
@@ -8018,6 +8132,7 @@ function GanttChartInner(props, ref) {
             onToggleCollapse: handleToggleCollapse,
             onPromoteTask: onPromoteTask ?? handlePromoteTask,
             onDemoteTask: onDemoteTask ?? handleDemoteTask,
+            onUngroupTask: onUngroupTask ?? handleUngroupTask,
             highlightedTaskIds: taskListHighlightedTaskIds,
             customDays,
             isWeekend: isWeekend3,
@@ -8025,7 +8140,8 @@ function GanttChartInner(props, ref) {
             filterMode,
             filteredTaskIds: matchedTaskIds,
             isFilterActive: !!taskFilter,
-            additionalColumns
+            additionalColumns,
+            taskListMenuCommands
           }
         ),
         /* @__PURE__ */ jsxs12(