gantt-lib 0.86.1 → 0.87.0

package/dist/index.mjs

@@ -4642,6 +4642,8 @@ var TaskListRow = React9.memo(
     isFilterMatch = false,
     isFilterHideMode = false,
     resolvedColumns,
+    isTaskSelected = false,
+    onTaskSelectionChange,
     taskListMenuCommands = []
   }) => {
     const [editingColumnId, setEditingColumnId] = useState4(null);
@@ -5435,6 +5437,23 @@ var TaskListRow = React9.memo(
     const isSelectedDependencyOwner = selectedChip != null && selectedChip.successorId === task.id;
     const startDateISO = toISODate2(normalizedTask.startDate);
     const endDateISO = editingDuration ? getEndDate(normalizedTask.startDate, durationValue) : toISODate2(normalizedTask.endDate);
+    const selectionCell = /* @__PURE__ */ jsx12(
+      "div",
+      {
+        className: "gantt-tl-cell gantt-tl-cell-selection",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsx12(
+          "input",
+          {
+            type: "checkbox",
+            className: "gantt-tl-selection-checkbox",
+            "aria-label": `\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0437\u0430\u0434\u0430\u0447\u0443 ${taskNumber ? `${taskNumber}. ` : ""}${task.name}`,
+            checked: isTaskSelected,
+            onChange: (event) => onTaskSelectionChange?.(task.id, event.target.checked)
+          }
+        )
+      }
+    );
     const numberCell = /* @__PURE__ */ jsxs9(
       "div",
       {
@@ -6152,6 +6171,7 @@ var TaskListRow = React9.memo(
       }
     );
     const builtInCells = {
+      selection: selectionCell,
       number: numberCell,
       name: nameCell,
       startDate: startDateCell,
@@ -6304,6 +6324,7 @@ var NewTaskRow = ({
 
 // src/components/TaskList/columns/createBuiltInColumns.tsx
 var BUILT_IN_COLUMN_WIDTHS = {
+  selection: 36,
   number: 40,
   name: 200,
   startDate: 90,
@@ -6314,7 +6335,7 @@ var BUILT_IN_COLUMN_WIDTHS = {
   actions: 80
 };
 function createBuiltInColumns(opts) {
-  return [
+  const columns = [
     { id: "number", header: "\u2116", width: BUILT_IN_COLUMN_WIDTHS.number, renderCell: () => null },
     { id: "name", header: "\u0418\u043C\u044F", width: BUILT_IN_COLUMN_WIDTHS.name, renderCell: () => null },
     { id: "startDate", header: "\u041D\u0430\u0447\u0430\u043B\u043E", width: BUILT_IN_COLUMN_WIDTHS.startDate, renderCell: () => null },
@@ -6323,6 +6344,15 @@ function createBuiltInColumns(opts) {
     { id: "progress", header: "%", width: BUILT_IN_COLUMN_WIDTHS.progress, renderCell: () => null },
     { id: "dependencies", header: null, width: BUILT_IN_COLUMN_WIDTHS.dependencies, renderCell: () => null }
   ];
+  if (opts?.enableTaskMultiSelect) {
+    columns.unshift({
+      id: "selection",
+      header: null,
+      width: BUILT_IN_COLUMN_WIDTHS.selection,
+      renderCell: () => null
+    });
+  }
+  return columns;
 }
 
 // src/components/TaskList/columns/resolveTaskListColumns.ts
@@ -6383,6 +6413,7 @@ import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var LINK_TYPE_ORDER2 = ["FS", "SS", "FF", "SF"];
 var MIN_TASK_LIST_WIDTH = 530;
 var BUILT_IN_CSS_CLASSES = {
+  selection: "gantt-tl-cell-selection",
   number: "gantt-tl-cell-number",
   name: "gantt-tl-cell-name",
   startDate: "gantt-tl-cell-date",
@@ -6458,6 +6489,30 @@ function getTaskNumber(tasks, taskIndex) {
   }
   return `${parentNumber}.${siblingIndex + 1}`;
 }
+var SelectAllCheckbox = ({
+  checked,
+  indeterminate,
+  onChange
+}) => {
+  const ref = useRef6(null);
+  useEffect6(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ jsx14(
+    "input",
+    {
+      ref,
+      type: "checkbox",
+      className: "gantt-tl-selection-checkbox",
+      "aria-label": "\u0412\u044B\u0431\u0440\u0430\u0442\u044C \u0432\u0441\u0435 \u0432\u0438\u0434\u0438\u043C\u044B\u0435 \u0437\u0430\u0434\u0430\u0447\u0438",
+      checked,
+      onChange: (event) => onChange(event.target.checked),
+      onClick: (event) => event.stopPropagation()
+    }
+  );
+};
 var TaskList = ({
   tasks,
   rowHeight,
@@ -6488,6 +6543,9 @@ var TaskList = ({
   isWeekend: isWeekend3,
   businessDays,
   highlightedTaskIds = /* @__PURE__ */ new Set(),
+  enableTaskMultiSelect = false,
+  selectedTaskIds,
+  onSelectedTaskIdsChange,
   filterMode = "highlight",
   filteredTaskIds = /* @__PURE__ */ new Set(),
   isFilterActive = false,
@@ -6495,6 +6553,14 @@ var TaskList = ({
   hiddenTaskListColumns,
   taskListMenuCommands
 }) => {
+  const [internalSelectedTaskIds, setInternalSelectedTaskIds] = useState6(/* @__PURE__ */ new Set());
+  const effectiveSelectedTaskIds = selectedTaskIds ?? internalSelectedTaskIds;
+  const emitSelectedTaskIdsChange = useCallback5((nextSelectedTaskIds) => {
+    if (!selectedTaskIds) {
+      setInternalSelectedTaskIds(nextSelectedTaskIds);
+    }
+    onSelectedTaskIdsChange?.(nextSelectedTaskIds);
+  }, [onSelectedTaskIdsChange, selectedTaskIds]);
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = useState6(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
   const handleToggleCollapse = externalOnToggleCollapse ?? useCallback5((parentId) => {
@@ -6541,6 +6607,33 @@ var TaskList = ({
     ),
     [visibleTasks]
   );
+  const visibleTaskIds = useMemo8(() => visibleTasks.map((task) => task.id), [visibleTasks]);
+  const selectedVisibleTaskCount = useMemo8(
+    () => visibleTaskIds.filter((taskId) => effectiveSelectedTaskIds.has(taskId)).length,
+    [effectiveSelectedTaskIds, visibleTaskIds]
+  );
+  const areAllVisibleTasksSelected = visibleTaskIds.length > 0 && selectedVisibleTaskCount === visibleTaskIds.length;
+  const areSomeVisibleTasksSelected = selectedVisibleTaskCount > 0 && !areAllVisibleTasksSelected;
+  const handleToggleTaskSelection = useCallback5((taskId, checked) => {
+    const nextSelectedTaskIds = new Set(effectiveSelectedTaskIds);
+    if (checked) {
+      nextSelectedTaskIds.add(taskId);
+    } else {
+      nextSelectedTaskIds.delete(taskId);
+    }
+    emitSelectedTaskIdsChange(nextSelectedTaskIds);
+  }, [effectiveSelectedTaskIds, emitSelectedTaskIdsChange]);
+  const handleToggleAllVisibleTaskSelection = useCallback5((checked) => {
+    const nextSelectedTaskIds = new Set(effectiveSelectedTaskIds);
+    for (const taskId of visibleTaskIds) {
+      if (checked) {
+        nextSelectedTaskIds.add(taskId);
+      } else {
+        nextSelectedTaskIds.delete(taskId);
+      }
+    }
+    emitSelectedTaskIdsChange(nextSelectedTaskIds);
+  }, [effectiveSelectedTaskIds, emitSelectedTaskIdsChange, visibleTaskIds]);
   const originalTaskNumberMap = useMemo8(
     () => {
       const numberMap = /* @__PURE__ */ new Map();
@@ -7022,7 +7115,10 @@ var TaskList = ({
     const duplicatedTasks = duplicateTaskSubtree(taskId, orderedTasks);
     onReorder?.(duplicatedTasks);
   }, [orderedTasks, onReorder]);
-  const builtInColumns = useMemo8(() => createBuiltInColumns({ businessDays }), [businessDays]);
+  const builtInColumns = useMemo8(
+    () => createBuiltInColumns({ businessDays, enableTaskMultiSelect }),
+    [businessDays, enableTaskMultiSelect]
+  );
   const resolvedColumns = useMemo8(
     () => resolveTaskListColumns(
       builtInColumns,
@@ -7046,6 +7142,24 @@ var TaskList = ({
       style: { "--tasklist-width": `${effectiveTaskListWidth}px` },
       children: /* @__PURE__ */ jsxs11("div", { className: "gantt-tl-table", children: [
         /* @__PURE__ */ jsx14("div", { className: "gantt-tl-header", style: { height: `${tableHeaderHeight}px` }, children: resolvedColumns.map((col) => {
+          if (col.id === "selection") {
+            return /* @__PURE__ */ jsx14(
+              "div",
+              {
+                className: "gantt-tl-headerCell gantt-tl-cell-selection",
+                "data-column-id": "selection",
+                children: /* @__PURE__ */ jsx14(
+                  SelectAllCheckbox,
+                  {
+                    checked: areAllVisibleTasksSelected,
+                    indeterminate: areSomeVisibleTasksSelected,
+                    onChange: handleToggleAllVisibleTaskSelection
+                  }
+                )
+              },
+              col.id
+            );
+          }
           if (col.id === "dependencies") {
             return /* @__PURE__ */ jsxs11(
               "div",
@@ -7171,6 +7285,8 @@ var TaskList = ({
                 isFilterMatch: filterMode === "highlight" ? highlightedTaskIds.has(task.id) : false,
                 isFilterHideMode: filterMode === "hide" && isFilterActive,
                 resolvedColumns,
+                isTaskSelected: effectiveSelectedTaskIds.has(task.id),
+                onTaskSelectionChange: handleToggleTaskSelection,
                 taskListMenuCommands
               }
             ),
@@ -9251,6 +9367,9 @@ function TaskGanttChartInner(props, ref) {
     collapsedParentIds: externalCollapsedParentIds,
     onToggleCollapse: externalOnToggleCollapse,
     highlightedTaskIds,
+    enableTaskMultiSelect = false,
+    selectedTaskIds,
+    onSelectedTaskIdsChange,
     disableTaskDrag = false,
     showChart = true,
     additionalColumns,
@@ -9821,6 +9940,9 @@ function TaskGanttChartInner(props, ref) {
                 onDemoteTask: onDemoteTask ?? handleDemoteTask,
                 onUngroupTask: onUngroupTask ?? handleUngroupTask,
                 highlightedTaskIds: taskListHighlightedTaskIds,
+                enableTaskMultiSelect,
+                selectedTaskIds,
+                onSelectedTaskIdsChange,
                 customDays,
                 isWeekend: isWeekend3,
                 businessDays,