gantt-lib 0.86.1 → 0.87.0

package/dist/index.d.mts

@@ -303,7 +303,7 @@ declare const progressInRange: (min: number, max: number) => TaskPredicate;
  */
 declare const nameContains: (substring: string, caseSensitive?: boolean) => TaskPredicate;
 
-type BuiltInTaskListColumnId = 'number' | 'name' | 'startDate' | 'endDate' | 'duration' | 'progress' | 'dependencies' | 'actions';
+type BuiltInTaskListColumnId = 'selection' | 'number' | 'name' | 'startDate' | 'endDate' | 'duration' | 'progress' | 'dependencies' | 'actions';
 type TaskListColumnId = BuiltInTaskListColumnId | (string & {});
 type TaskListColumnAnchor = {
     after: BuiltInTaskListColumnId | string;
@@ -495,6 +495,12 @@ interface GanttModeProps<TTask extends Task = Task> {
     onToggleCollapse?: (parentId: string) => void;
     /** Task IDs to highlight in the task list (for search results) */
     highlightedTaskIds?: Set<string>;
+    /** Enable a leading checkbox column for multi-selecting task rows (default: false) */
+    enableTaskMultiSelect?: boolean;
+    /** Controlled selected task IDs for multi-select mode */
+    selectedTaskIds?: Set<string>;
+    /** Callback when multi-selected task IDs change */
+    onSelectedTaskIdsChange?: (taskIds: Set<string>) => void;
     /** Disable task drag and resize on the calendar grid (default: false) */
     disableTaskDrag?: boolean;
     /** Show calendar chart area (default: true) */
@@ -766,6 +772,12 @@ interface TaskListProps {
     businessDays?: boolean;
     /** Task IDs highlighted by the active filter */
     highlightedTaskIds?: Set<string>;
+    /** Enable a leading checkbox column for multi-selecting task rows (default: false) */
+    enableTaskMultiSelect?: boolean;
+    /** Controlled selected task IDs for multi-select mode */
+    selectedTaskIds?: Set<string>;
+    /** Callback when multi-selected task IDs change */
+    onSelectedTaskIdsChange?: (taskIds: Set<string>) => void;
     /** Filter mode: 'highlight' shows yellow highlight on matches, 'hide' hides non-matching tasks */
     filterMode?: 'highlight' | 'hide';
     /** Task IDs that match the filter (used for hide mode). When undefined, no filtering is applied */

package/dist/index.d.ts

@@ -303,7 +303,7 @@ declare const progressInRange: (min: number, max: number) => TaskPredicate;
  */
 declare const nameContains: (substring: string, caseSensitive?: boolean) => TaskPredicate;
 
-type BuiltInTaskListColumnId = 'number' | 'name' | 'startDate' | 'endDate' | 'duration' | 'progress' | 'dependencies' | 'actions';
+type BuiltInTaskListColumnId = 'selection' | 'number' | 'name' | 'startDate' | 'endDate' | 'duration' | 'progress' | 'dependencies' | 'actions';
 type TaskListColumnId = BuiltInTaskListColumnId | (string & {});
 type TaskListColumnAnchor = {
     after: BuiltInTaskListColumnId | string;
@@ -495,6 +495,12 @@ interface GanttModeProps<TTask extends Task = Task> {
     onToggleCollapse?: (parentId: string) => void;
     /** Task IDs to highlight in the task list (for search results) */
     highlightedTaskIds?: Set<string>;
+    /** Enable a leading checkbox column for multi-selecting task rows (default: false) */
+    enableTaskMultiSelect?: boolean;
+    /** Controlled selected task IDs for multi-select mode */
+    selectedTaskIds?: Set<string>;
+    /** Callback when multi-selected task IDs change */
+    onSelectedTaskIdsChange?: (taskIds: Set<string>) => void;
     /** Disable task drag and resize on the calendar grid (default: false) */
     disableTaskDrag?: boolean;
     /** Show calendar chart area (default: true) */
@@ -766,6 +772,12 @@ interface TaskListProps {
     businessDays?: boolean;
     /** Task IDs highlighted by the active filter */
     highlightedTaskIds?: Set<string>;
+    /** Enable a leading checkbox column for multi-selecting task rows (default: false) */
+    enableTaskMultiSelect?: boolean;
+    /** Controlled selected task IDs for multi-select mode */
+    selectedTaskIds?: Set<string>;
+    /** Callback when multi-selected task IDs change */
+    onSelectedTaskIdsChange?: (taskIds: Set<string>) => void;
     /** Filter mode: 'highlight' shows yellow highlight on matches, 'hide' hides non-matching tasks */
     filterMode?: 'highlight' | 'hide';
     /** Task IDs that match the filter (used for hide mode). When undefined, no filtering is applied */

package/dist/index.js

@@ -4757,6 +4757,8 @@ var TaskListRow = import_react10.default.memo(
     isFilterMatch = false,
     isFilterHideMode = false,
     resolvedColumns,
+    isTaskSelected = false,
+    onTaskSelectionChange,
     taskListMenuCommands = []
   }) => {
     const [editingColumnId, setEditingColumnId] = (0, import_react10.useState)(null);
@@ -5550,6 +5552,23 @@ var TaskListRow = import_react10.default.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__ */ (0, import_jsx_runtime12.jsx)(
+      "div",
+      {
+        className: "gantt-tl-cell gantt-tl-cell-selection",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          "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__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
@@ -6267,6 +6286,7 @@ var TaskListRow = import_react10.default.memo(
       }
     );
     const builtInCells = {
+      selection: selectionCell,
       number: numberCell,
       name: nameCell,
       startDate: startDateCell,
@@ -6419,6 +6439,7 @@ var NewTaskRow = ({
 
 // src/components/TaskList/columns/createBuiltInColumns.tsx
 var BUILT_IN_COLUMN_WIDTHS = {
+  selection: 36,
   number: 40,
   name: 200,
   startDate: 90,
@@ -6429,7 +6450,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 },
@@ -6438,6 +6459,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
@@ -6498,6 +6528,7 @@ var import_jsx_runtime14 = require("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",
@@ -6573,6 +6604,30 @@ function getTaskNumber(tasks, taskIndex) {
   }
   return `${parentNumber}.${siblingIndex + 1}`;
 }
+var SelectAllCheckbox = ({
+  checked,
+  indeterminate,
+  onChange
+}) => {
+  const ref = (0, import_react12.useRef)(null);
+  (0, import_react12.useEffect)(() => {
+    if (ref.current) {
+      ref.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "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,
@@ -6603,6 +6658,9 @@ var TaskList = ({
   isWeekend: isWeekend3,
   businessDays,
   highlightedTaskIds = /* @__PURE__ */ new Set(),
+  enableTaskMultiSelect = false,
+  selectedTaskIds,
+  onSelectedTaskIdsChange,
   filterMode = "highlight",
   filteredTaskIds = /* @__PURE__ */ new Set(),
   isFilterActive = false,
@@ -6610,6 +6668,14 @@ var TaskList = ({
   hiddenTaskListColumns,
   taskListMenuCommands
 }) => {
+  const [internalSelectedTaskIds, setInternalSelectedTaskIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
+  const effectiveSelectedTaskIds = selectedTaskIds ?? internalSelectedTaskIds;
+  const emitSelectedTaskIdsChange = (0, import_react12.useCallback)((nextSelectedTaskIds) => {
+    if (!selectedTaskIds) {
+      setInternalSelectedTaskIds(nextSelectedTaskIds);
+    }
+    onSelectedTaskIdsChange?.(nextSelectedTaskIds);
+  }, [onSelectedTaskIdsChange, selectedTaskIds]);
   const [internalCollapsedParentIds, setInternalCollapsedParentIds] = (0, import_react12.useState)(/* @__PURE__ */ new Set());
   const collapsedParentIds = externalCollapsedParentIds ?? internalCollapsedParentIds;
   const handleToggleCollapse = externalOnToggleCollapse ?? (0, import_react12.useCallback)((parentId) => {
@@ -6656,6 +6722,33 @@ var TaskList = ({
     ),
     [visibleTasks]
   );
+  const visibleTaskIds = (0, import_react12.useMemo)(() => visibleTasks.map((task) => task.id), [visibleTasks]);
+  const selectedVisibleTaskCount = (0, import_react12.useMemo)(
+    () => visibleTaskIds.filter((taskId) => effectiveSelectedTaskIds.has(taskId)).length,
+    [effectiveSelectedTaskIds, visibleTaskIds]
+  );
+  const areAllVisibleTasksSelected = visibleTaskIds.length > 0 && selectedVisibleTaskCount === visibleTaskIds.length;
+  const areSomeVisibleTasksSelected = selectedVisibleTaskCount > 0 && !areAllVisibleTasksSelected;
+  const handleToggleTaskSelection = (0, import_react12.useCallback)((taskId, checked) => {
+    const nextSelectedTaskIds = new Set(effectiveSelectedTaskIds);
+    if (checked) {
+      nextSelectedTaskIds.add(taskId);
+    } else {
+      nextSelectedTaskIds.delete(taskId);
+    }
+    emitSelectedTaskIdsChange(nextSelectedTaskIds);
+  }, [effectiveSelectedTaskIds, emitSelectedTaskIdsChange]);
+  const handleToggleAllVisibleTaskSelection = (0, import_react12.useCallback)((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 = (0, import_react12.useMemo)(
     () => {
       const numberMap = /* @__PURE__ */ new Map();
@@ -7137,7 +7230,10 @@ var TaskList = ({
     const duplicatedTasks = duplicateTaskSubtree(taskId, orderedTasks);
     onReorder?.(duplicatedTasks);
   }, [orderedTasks, onReorder]);
-  const builtInColumns = (0, import_react12.useMemo)(() => createBuiltInColumns({ businessDays }), [businessDays]);
+  const builtInColumns = (0, import_react12.useMemo)(
+    () => createBuiltInColumns({ businessDays, enableTaskMultiSelect }),
+    [businessDays, enableTaskMultiSelect]
+  );
   const resolvedColumns = (0, import_react12.useMemo)(
     () => resolveTaskListColumns(
       builtInColumns,
@@ -7161,6 +7257,24 @@ var TaskList = ({
       style: { "--tasklist-width": `${effectiveTaskListWidth}px` },
       children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "gantt-tl-table", children: [
         /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "gantt-tl-header", style: { height: `${tableHeaderHeight}px` }, children: resolvedColumns.map((col) => {
+          if (col.id === "selection") {
+            return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              "div",
+              {
+                className: "gantt-tl-headerCell gantt-tl-cell-selection",
+                "data-column-id": "selection",
+                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  SelectAllCheckbox,
+                  {
+                    checked: areAllVisibleTasksSelected,
+                    indeterminate: areSomeVisibleTasksSelected,
+                    onChange: handleToggleAllVisibleTaskSelection
+                  }
+                )
+              },
+              col.id
+            );
+          }
           if (col.id === "dependencies") {
             return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
               "div",
@@ -7286,6 +7400,8 @@ var TaskList = ({
                 isFilterMatch: filterMode === "highlight" ? highlightedTaskIds.has(task.id) : false,
                 isFilterHideMode: filterMode === "hide" && isFilterActive,
                 resolvedColumns,
+                isTaskSelected: effectiveSelectedTaskIds.has(task.id),
+                onTaskSelectionChange: handleToggleTaskSelection,
                 taskListMenuCommands
               }
             ),
@@ -9366,6 +9482,9 @@ function TaskGanttChartInner(props, ref) {
     collapsedParentIds: externalCollapsedParentIds,
     onToggleCollapse: externalOnToggleCollapse,
     highlightedTaskIds,
+    enableTaskMultiSelect = false,
+    selectedTaskIds,
+    onSelectedTaskIdsChange,
     disableTaskDrag = false,
     showChart = true,
     additionalColumns,
@@ -9936,6 +10055,9 @@ function TaskGanttChartInner(props, ref) {
                 onDemoteTask: onDemoteTask ?? handleDemoteTask,
                 onUngroupTask: onUngroupTask ?? handleUngroupTask,
                 highlightedTaskIds: taskListHighlightedTaskIds,
+                enableTaskMultiSelect,
+                selectedTaskIds,
+                onSelectedTaskIdsChange,
                 customDays,
                 isWeekend: isWeekend3,
                 businessDays,