gantt-task-react-v 1.6.16 → 1.6.17

package/dist/components/task-list/index.d.ts

@@ -43,5 +43,6 @@ export type TaskListProps = {
     canToggleColumns?: boolean;
     onColumnVisibilityChange?: OnColumnVisibilityChange;
     tableBottom?: TableRenderBottomProps;
+    onTaskInlineEdit?: (task: RenderTask, columnId: string, newValue: unknown) => void;
 };
 export declare const TaskList: React.NamedExoticComponent<TaskListProps>;

package/dist/components/task-list/task-list-table-row/inline-edit-cell.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+import type { ColumnEditType } from "../../../types";
+export interface InlineEditCellProps {
+    value: unknown;
+    editType?: ColumnEditType;
+    editOptions?: {
+        value: string;
+        label: string;
+    }[];
+    onCommit: (value: unknown) => void;
+    onCancel: () => void;
+}
+/**
+ * Built-in inline editor rendered inside a table cell.
+ * Supports text, number, date, and select types.
+ */
+export declare const InlineEditCell: React.FC<InlineEditCellProps>;

package/dist/gantt-task-react.es.js

@@ -4589,7 +4589,7 @@ const tooltipDefaultContainerTexts = "_tooltipDefaultContainerTexts_16o9s_17";
 const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_16o9s_31";
 const tooltipDetailsContainer = "_tooltipDetailsContainer_16o9s_47";
 const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_16o9s_71";
-const styles$n = {
+const styles$o = {
   tooltipDefaultContainer,
   tooltipDefaultContainerTexts,
   tooltipDefaultContainerParagraph,
@@ -4632,26 +4632,26 @@ const StandardTooltipContent = ({ task }) => {
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: styles$n.tooltipDefaultContainer,
+      className: styles$o.tooltipDefaultContainer,
       style: { fontSize: "var(--gantt-font-size)" },
       children: [
         /* @__PURE__ */ jsx("b", { style: { fontSize: "var(--gantt-font-size)" }, children: `${task.name}: ${task.start.getDate()}-${task.start.getMonth() + 1}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() + 1}-${task.end.getFullYear()}` }),
-        /* @__PURE__ */ jsxs("div", { className: styles$n.tooltipDefaultContainerTexts, children: [
+        /* @__PURE__ */ jsxs("div", { className: styles$o.tooltipDefaultContainerTexts, children: [
           task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsx(
             "p",
             {
-              className: styles$n.tooltipDefaultContainerParagraph,
+              className: styles$o.tooltipDefaultContainerParagraph,
               children: `${locale.tooltip.duration},: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} ${locale.suffix.days}`
             }
           ),
-          !!locale.tooltip.progress && /* @__PURE__ */ jsx("p", { className: styles$n.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
+          !!locale.tooltip.progress && /* @__PURE__ */ jsx("p", { className: styles$o.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
         ] })
       ]
     }
   );
 };
 const scroll = "_scroll_hp3qb_1";
-const styles$m = {
+const styles$n = {
   scroll
 };
 const VerticalScroll = ({
@@ -4672,7 +4672,7 @@ const VerticalScroll = ({
         marginLeft: rtl ? void 0 : "-1rem",
         pointerEvents: isChangeInProgress ? "none" : void 0
       },
-      className: styles$m.scroll,
+      className: styles$n.scroll,
       onScroll,
       ref: verticalScrollbarRef,
       children: /* @__PURE__ */ jsx("div", { style: { height: ganttFullHeight, width: 1 } })
@@ -4750,7 +4750,7 @@ const dragging = "_dragging_16z6n_15";
 const taskListExpander = "_taskListExpander_16z6n_23";
 const taskListEmptyExpander = "_taskListEmptyExpander_16z6n_45";
 const taskName = "_taskName_16z6n_55";
-const styles$l = {
+const styles$m = {
   taskListNameWrapper,
   dragging,
   taskListExpander,
@@ -4827,7 +4827,7 @@ const TitleColumn = ({
     "div",
     {
       "data-testid": `title-table-cell-${name}`,
-      className: `${styles$l.taskListNameWrapper}`,
+      className: `${styles$m.taskListNameWrapper}`,
       style: {
         paddingLeft: depth * nestedTaskNameOffset
       },
@@ -4836,7 +4836,7 @@ const TitleColumn = ({
         /* @__PURE__ */ jsx(
           "div",
           {
-            className: `gantt-expander ${styles$l.taskListExpander} ${!hasChildren ? styles$l.taskListEmptyExpander : ""}`,
+            className: `gantt-expander ${styles$m.taskListExpander} ${!hasChildren ? styles$m.taskListEmptyExpander : ""}`,
             style: {
               left: depth * nestedTaskNameOffset
             },
@@ -4847,7 +4847,7 @@ const TitleColumn = ({
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: styles$l.taskName,
+            className: styles$m.taskName,
             style: { fontWeight: isProject ? "bold" : "regular" },
             children: [
               isShowTaskNumbers && /* @__PURE__ */ jsxs("b", { children: [
@@ -4902,7 +4902,7 @@ const DependenciesColumn = ({
   return /* @__PURE__ */ jsx(Fragment, { children: dependencies.map(({ name }) => name).join(", ") });
 };
 const button = "_button_l55x0_1";
-const styles$k = {
+const styles$l = {
   button
 };
 const DeleteIcon = (props) => /* @__PURE__ */ jsxs(
@@ -4936,7 +4936,7 @@ const DeleteColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$k.button,
+      className: styles$l.button,
       children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon() : /* @__PURE__ */ jsx(DeleteIcon, {})
     }
   );
@@ -4971,7 +4971,7 @@ const EditColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$k.button,
+      className: styles$l.button,
       children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon() : /* @__PURE__ */ jsx(EditIcon, {})
     }
   );
@@ -5012,7 +5012,7 @@ const AddColumn = ({
         e.stopPropagation();
       },
       onClick,
-      className: styles$k.button,
+      className: styles$l.button,
       children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon() : /* @__PURE__ */ jsx(AddIcon, {})
     }
   );
@@ -5545,7 +5545,7 @@ const checkbox = "_checkbox_rjfhl_141";
 const columnLabel = "_columnLabel_rjfhl_157";
 const dropdownTitle = "_dropdownTitle_rjfhl_169";
 const divider = "_divider_rjfhl_211";
-const styles$j = {
+const styles$k = {
   toggleWrapper,
   toggleButton,
   dropdown,
@@ -5621,38 +5621,38 @@ const ColumnVisibilityToggleInner = ({
   if (toggleableColumns.length === 0) {
     return null;
   }
-  return /* @__PURE__ */ jsxs("div", { className: styles$j.toggleWrapper, ref: wrapperRef, children: [
+  return /* @__PURE__ */ jsxs("div", { className: styles$k.toggleWrapper, ref: wrapperRef, children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: styles$j.toggleButton,
+        className: styles$k.toggleButton,
         onClick: toggleDropdown,
         title: "Toggle column visibility",
         type: "button",
         children: /* @__PURE__ */ jsx(ColumnsIcon, {})
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { className: styles$j.dropdown, children: [
-      /* @__PURE__ */ jsx("div", { className: styles$j.dropdownTitle, children: "Columns" }),
-      /* @__PURE__ */ jsx("div", { className: styles$j.divider }),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: styles$k.dropdown, children: [
+      /* @__PURE__ */ jsx("div", { className: styles$k.dropdownTitle, children: "Columns" }),
+      /* @__PURE__ */ jsx("div", { className: styles$k.divider }),
       toggleableColumns.map((column) => {
         const isVisible = !column.hidden;
         return /* @__PURE__ */ jsxs(
           "label",
           {
-            className: styles$j.dropdownItem,
+            className: styles$k.dropdownItem,
             onClick: (e) => e.stopPropagation(),
             children: [
               /* @__PURE__ */ jsx(
                 "input",
                 {
                   type: "checkbox",
-                  className: styles$j.checkbox,
+                  className: styles$k.checkbox,
                   checked: isVisible,
                   onChange: () => handleToggle(column.id, !!column.hidden)
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: styles$j.columnLabel, children: column.title || column.id })
+              /* @__PURE__ */ jsx("span", { className: styles$k.columnLabel, children: column.title || column.id })
             ]
           },
           column.id
@@ -5668,7 +5668,7 @@ const ganttTable_HeaderMoveTask = "_ganttTable_HeaderMoveTask_5goa0_27";
 const ganttTable_HeaderSeparator = "_ganttTable_HeaderSeparator_5goa0_39";
 const ganttTable_HeaderItem = "_ganttTable_HeaderItem_5goa0_53";
 const resizer = "_resizer_5goa0_77";
-const styles$i = {
+const styles$j = {
   ganttTable,
   ganttTable_Header,
   ganttTable_HeaderMoveTask,
@@ -5720,7 +5720,7 @@ const TaskListTableHeadersDefaultInner = ({
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: styles$i.ganttTable,
+      className: styles$j.ganttTable,
       style: {
         fontFamily: "var(--gantt-font-family)",
         fontSize: "var(--gantt-font-size)"
@@ -5728,18 +5728,18 @@ const TaskListTableHeadersDefaultInner = ({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: styles$i.ganttTable_Header,
+          className: styles$j.ganttTable_Header,
           style: {
             height: headerHeight - 2
           },
           children: [
-            canMoveTasks && /* @__PURE__ */ jsx("div", { className: styles$i.ganttTable_HeaderMoveTask }),
+            canMoveTasks && /* @__PURE__ */ jsx("div", { className: styles$j.ganttTable_HeaderMoveTask }),
             columns.map(({ title: title2, width, canResize }, index2) => {
               return /* @__PURE__ */ jsxs(Fragment$1, { children: [
                 index2 > 0 && !!title2 && /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: styles$i.ganttTable_HeaderSeparator,
+                    className: styles$j.ganttTable_HeaderSeparator,
                     style: {
                       height: headerHeight * 0.5,
                       marginTop: headerHeight * 0.2
@@ -5750,7 +5750,7 @@ const TaskListTableHeadersDefaultInner = ({
                   "div",
                   {
                     "data-testid": `table-column-header-${title2}`,
-                    className: styles$i.ganttTable_HeaderItem,
+                    className: styles$j.ganttTable_HeaderItem,
                     style: {
                       minWidth: width,
                       maxWidth: width,
@@ -5762,7 +5762,7 @@ const TaskListTableHeadersDefaultInner = ({
                         "div",
                         {
                           "data-testid": `table-column-header-resize-handle-${title2}`,
-                          className: styles$i.resizer,
+                          className: styles$j.resizer,
                           onMouseDown: (event) => {
                             onColumnResizeStart(index2, event.clientX);
                           },
@@ -5782,7 +5782,7 @@ const TaskListTableHeadersDefaultInner = ({
             canToggleColumns && /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$i.ganttTable_HeaderItem,
+                className: styles$j.ganttTable_HeaderItem,
                 style: { minWidth: 28, maxWidth: 28 },
                 children: /* @__PURE__ */ jsx(
                   ColumnVisibilityToggle,
@@ -9990,7 +9990,7 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
 }
 [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
 const taskListWrapper$1 = "_taskListWrapper_196te_3";
-const styles$h = {
+const styles$i = {
   taskListWrapper: taskListWrapper$1
 };
 function getDragDepth(offset2, indentationWidth2) {
@@ -10176,7 +10176,7 @@ const dragIndicator = "_dragIndicator_1yqtr_99";
 const dragIndicatorIcon = "_dragIndicatorIcon_1yqtr_119";
 const isCut = "_isCut_1yqtr_135";
 const taskListCell = "_taskListCell_1yqtr_167";
-const styles$g = {
+const styles$h = {
   taskListTableRow,
   isAfter,
   isBefore,
@@ -10202,6 +10202,105 @@ const DragIndicatorIcon = (props) => /* @__PURE__ */ jsxs(
     ]
   }
 );
+const inlineEditWrapper = "_inlineEditWrapper_118p4_1";
+const inlineEditInput = "_inlineEditInput_118p4_19";
+const styles$g = {
+  inlineEditWrapper,
+  inlineEditInput
+};
+const InlineEditCell = ({
+  value,
+  editType = "text",
+  editOptions,
+  onCommit,
+  onCancel
+}) => {
+  const inputRef = useRef(null);
+  const [localValue, setLocalValue] = useState(
+    () => formatForInput(value, editType)
+  );
+  useEffect(() => {
+    const el = inputRef.current;
+    if (el) {
+      el.focus();
+      if ("select" in el && editType !== "select") {
+        el.select();
+      }
+    }
+  }, [editType]);
+  const commitValue = useCallback(() => {
+    const parsed = parseFromInput(localValue, editType);
+    onCommit(parsed);
+  }, [localValue, editType, onCommit]);
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        commitValue();
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        onCancel();
+      }
+      e.stopPropagation();
+    },
+    [commitValue, onCancel]
+  );
+  const handleBlur = useCallback(() => {
+    commitValue();
+  }, [commitValue]);
+  const stopPropagation2 = useCallback((e) => {
+    e.stopPropagation();
+  }, []);
+  if (editType === "select") {
+    return /* @__PURE__ */ jsx("div", { className: styles$g.inlineEditWrapper, onMouseDown: stopPropagation2, children: /* @__PURE__ */ jsx(
+      "select",
+      {
+        ref: inputRef,
+        className: styles$g.inlineEditInput,
+        value: localValue,
+        onChange: (e) => setLocalValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur,
+        children: editOptions == null ? void 0 : editOptions.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx("div", { className: styles$g.inlineEditWrapper, onMouseDown: stopPropagation2, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      ref: inputRef,
+      className: styles$g.inlineEditInput,
+      type: editType === "number" ? "number" : editType === "date" ? "date" : "text",
+      value: localValue,
+      onChange: (e) => setLocalValue(e.target.value),
+      onKeyDown: handleKeyDown,
+      onBlur: handleBlur
+    }
+  ) });
+};
+function formatForInput(value, editType) {
+  if (value == null)
+    return "";
+  if (editType === "date") {
+    if (value instanceof Date) {
+      return value.toISOString().slice(0, 10);
+    }
+    if (typeof value === "string")
+      return value.slice(0, 10);
+  }
+  return String(value);
+}
+function parseFromInput(raw, editType) {
+  if (editType === "number") {
+    const n = Number(raw);
+    return Number.isNaN(n) ? raw : n;
+  }
+  if (editType === "date") {
+    const d = new Date(raw);
+    return Number.isNaN(d.getTime()) ? raw : d;
+  }
+  return raw;
+}
 const TaskListTableRowInner = forwardRef(
   (props, ref) => {
     const {
@@ -10234,9 +10333,11 @@ const TaskListTableRowInner = forwardRef(
       task,
       moveHandleProps,
       isOverlay: isOverlay2,
-      moveOverPosition
+      moveOverPosition,
+      onTaskInlineEdit
     } = props;
     const { id, comparisonLevel = 1 } = task;
+    const [editingColumnId, setEditingColumnId] = useState(null);
     const onRootMouseDown = useCallback(
       (event) => {
         event.preventDefault();
@@ -10329,18 +10430,18 @@ const TaskListTableRowInner = forwardRef(
       return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : void 0;
     }, [isEven, isOverlay2, isSelected]);
     const rowClassName = useMemo(() => {
-      const classNames = [styles$g.taskListTableRow];
+      const classNames = [styles$h.taskListTableRow];
       if (moveOverPosition === "after") {
-        classNames.push(styles$g.isAfter);
+        classNames.push(styles$h.isAfter);
       }
       if (moveOverPosition === "before") {
-        classNames.push(styles$g.isBefore);
+        classNames.push(styles$h.isBefore);
       }
       if (isOverlay2 && !isDragging) {
-        classNames.push(styles$g.isOverlay);
+        classNames.push(styles$h.isOverlay);
       }
       if (isCut2) {
-        classNames.push(styles$g.isCut);
+        classNames.push(styles$h.isCut);
       }
       return classNames.join(" ");
     }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
@@ -10389,20 +10490,72 @@ const TaskListTableRowInner = forwardRef(
         },
         onContextMenu,
         children: [
-          task.type !== "project" && task.id !== "no-project-asigned" && !isOverlay2 && moveHandleProps ? /* @__PURE__ */ jsx("div", { className: `${styles$g.dragIndicator}`, ...moveHandleProps, children: /* @__PURE__ */ jsx(DragIndicatorIcon, { className: styles$g.dragIndicatorIcon }) }) : /* @__PURE__ */ jsx("div", {}),
-          columns.map(({ id: id2, component: Component, width }, index2) => {
+          task.type !== "project" && task.id !== "no-project-asigned" && !isOverlay2 && moveHandleProps ? /* @__PURE__ */ jsx("div", { className: `${styles$h.dragIndicator}`, ...moveHandleProps, children: /* @__PURE__ */ jsx(DragIndicatorIcon, { className: styles$h.dragIndicatorIcon }) }) : /* @__PURE__ */ jsx("div", {}),
+          columns.map((col, index2) => {
+            const { id: colId, component: Component, width } = col;
+            const isEditingCell = editingColumnId === colId;
+            const resolveValue = (c) => {
+              const t = columnData.task;
+              if (c.getValueFromTask)
+                return c.getValueFromTask(t);
+              if (t.type !== "empty" && t.payload && c.id in t.payload)
+                return t.payload[c.id];
+              return t[c.id];
+            };
+            const handleStartEdit = () => {
+              if (col.editable && onTaskInlineEdit) {
+                setEditingColumnId(colId);
+              }
+            };
+            const handleCommitEdit = (newValue) => {
+              setEditingColumnId(null);
+              if (onTaskInlineEdit) {
+                onTaskInlineEdit(task, colId, newValue);
+              }
+            };
+            const handleCancelEdit = () => {
+              setEditingColumnId(null);
+            };
+            const cellColumnData = {
+              ...columnData,
+              isEditing: isEditingCell,
+              onStartEdit: handleStartEdit,
+              onCommitEdit: handleCommitEdit,
+              onCancelEdit: handleCancelEdit
+            };
             return /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$g.taskListCell,
+                className: styles$h.taskListCell,
                 style: {
                   minWidth: width,
                   maxWidth: width,
                   ...pinnedStyles[index2]
                 },
-                children: /* @__PURE__ */ jsx(Component, { data: columnData })
+                onDoubleClick: col.editable && onTaskInlineEdit && !isEditingCell ? (e) => {
+                  e.stopPropagation();
+                  handleStartEdit();
+                } : void 0,
+                children: isEditingCell ? col.editComponent ? /* @__PURE__ */ jsx(
+                  col.editComponent,
+                  {
+                    data: cellColumnData,
+                    value: resolveValue(col),
+                    onCommit: handleCommitEdit,
+                    onCancel: handleCancelEdit
+                  }
+                ) : /* @__PURE__ */ jsx(
+                  InlineEditCell,
+                  {
+                    value: resolveValue(col),
+                    editType: col.editType,
+                    editOptions: col.editOptions,
+                    onCommit: handleCommitEdit,
+                    onCancel: handleCancelEdit
+                  }
+                ) : /* @__PURE__ */ jsx(Component, { data: cellColumnData })
               },
-              `${id2}-${index2}`
+              `${colId}-${index2}`
             );
           })
         ]
@@ -10805,7 +10958,7 @@ const TaskListSortableTableDefaultInner = (props) => {
             children: /* @__PURE__ */ jsx(
               "div",
               {
-                className: styles$h.taskListWrapper,
+                className: styles$i.taskListWrapper,
                 style: {
                   fontFamily: "var(--gantt-font-family)",
                   fontSize: "var(--gantt-font-size)"
@@ -10968,7 +11121,8 @@ const TaskListInner = ({
   canReorderTasks,
   canToggleColumns,
   onColumnVisibilityChange,
-  tableBottom
+  tableBottom,
+  onTaskInlineEdit
 }) => {
   const [
     allColumns,
@@ -11028,7 +11182,8 @@ const TaskListInner = ({
         scrollToTask,
         selectTaskOnMouseDown,
         task,
-        depth
+        depth,
+        onTaskInlineEdit
       };
     },
     [
@@ -11052,7 +11207,8 @@ const TaskListInner = ({
       onExpanderClick,
       scrollToTask,
       selectTaskOnMouseDown,
-      selectedIdsMirror
+      selectedIdsMirror,
+      onTaskInlineEdit
     ]
   );
   const RenderTaskListTable = canReorderTasks ? TaskListSortableTable : TaskListTable;

package/dist/gantt-task-react.umd.js

@@ -4606,7 +4606,7 @@
   const tooltipDefaultContainerParagraph = "_tooltipDefaultContainerParagraph_16o9s_31";
   const tooltipDetailsContainer = "_tooltipDetailsContainer_16o9s_47";
   const tooltipDetailsContainerHidden = "_tooltipDetailsContainerHidden_16o9s_71";
-  const styles$n = {
+  const styles$o = {
     tooltipDefaultContainer,
     tooltipDefaultContainerTexts,
     tooltipDefaultContainerParagraph,
@@ -4649,26 +4649,26 @@
     return /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
-        className: styles$n.tooltipDefaultContainer,
+        className: styles$o.tooltipDefaultContainer,
         style: { fontSize: "var(--gantt-font-size)" },
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("b", { style: { fontSize: "var(--gantt-font-size)" }, children: `${task.name}: ${task.start.getDate()}-${task.start.getMonth() + 1}-${task.start.getFullYear()} - ${task.end.getDate()}-${task.end.getMonth() + 1}-${task.end.getFullYear()}` }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$n.tooltipDefaultContainerTexts, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$o.tooltipDefaultContainerTexts, children: [
             task.end.getTime() - task.start.getTime() !== 0 && /* @__PURE__ */ jsxRuntime.jsx(
               "p",
               {
-                className: styles$n.tooltipDefaultContainerParagraph,
+                className: styles$o.tooltipDefaultContainerParagraph,
                 children: `${locale.tooltip.duration},: ${~~((task.end.getTime() - task.start.getTime()) / (1e3 * 60 * 60 * 24))} ${locale.suffix.days}`
               }
             ),
-            !!locale.tooltip.progress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$n.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
+            !!locale.tooltip.progress && /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles$o.tooltipDefaultContainerParagraph, children: !!task.progress && `${locale.tooltip.progress}: ${task.progress} %` })
           ] })
         ]
       }
     );
   };
   const scroll = "_scroll_hp3qb_1";
-  const styles$m = {
+  const styles$n = {
     scroll
   };
   const VerticalScroll = ({
@@ -4689,7 +4689,7 @@
           marginLeft: rtl ? void 0 : "-1rem",
           pointerEvents: isChangeInProgress ? "none" : void 0
         },
-        className: styles$m.scroll,
+        className: styles$n.scroll,
         onScroll,
         ref: verticalScrollbarRef,
         children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height: ganttFullHeight, width: 1 } })
@@ -4767,7 +4767,7 @@
   const taskListExpander = "_taskListExpander_16z6n_23";
   const taskListEmptyExpander = "_taskListEmptyExpander_16z6n_45";
   const taskName = "_taskName_16z6n_55";
-  const styles$l = {
+  const styles$m = {
     taskListNameWrapper,
     dragging,
     taskListExpander,
@@ -4844,7 +4844,7 @@
       "div",
       {
         "data-testid": `title-table-cell-${name}`,
-        className: `${styles$l.taskListNameWrapper}`,
+        className: `${styles$m.taskListNameWrapper}`,
         style: {
           paddingLeft: depth * nestedTaskNameOffset
         },
@@ -4853,7 +4853,7 @@
           /* @__PURE__ */ jsxRuntime.jsx(
             "div",
             {
-              className: `gantt-expander ${styles$l.taskListExpander} ${!hasChildren ? styles$l.taskListEmptyExpander : ""}`,
+              className: `gantt-expander ${styles$m.taskListExpander} ${!hasChildren ? styles$m.taskListEmptyExpander : ""}`,
               style: {
                 left: depth * nestedTaskNameOffset
               },
@@ -4864,7 +4864,7 @@
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
-              className: styles$l.taskName,
+              className: styles$m.taskName,
               style: { fontWeight: isProject ? "bold" : "regular" },
               children: [
                 isShowTaskNumbers && /* @__PURE__ */ jsxRuntime.jsxs("b", { children: [
@@ -4919,7 +4919,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: dependencies.map(({ name }) => name).join(", ") });
   };
   const button = "_button_l55x0_1";
-  const styles$k = {
+  const styles$l = {
     button
   };
   const DeleteIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
@@ -4953,7 +4953,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$k.button,
+        className: styles$l.button,
         children: (icons == null ? void 0 : icons.renderDeleteIcon) ? icons.renderDeleteIcon() : /* @__PURE__ */ jsxRuntime.jsx(DeleteIcon, {})
       }
     );
@@ -4988,7 +4988,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$k.button,
+        className: styles$l.button,
         children: (icons == null ? void 0 : icons.renderEditIcon) ? icons.renderEditIcon() : /* @__PURE__ */ jsxRuntime.jsx(EditIcon, {})
       }
     );
@@ -5029,7 +5029,7 @@
           e.stopPropagation();
         },
         onClick,
-        className: styles$k.button,
+        className: styles$l.button,
         children: (icons == null ? void 0 : icons.renderAddIcon) ? icons.renderAddIcon() : /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {})
       }
     );
@@ -5562,7 +5562,7 @@
   const columnLabel = "_columnLabel_rjfhl_157";
   const dropdownTitle = "_dropdownTitle_rjfhl_169";
   const divider = "_divider_rjfhl_211";
-  const styles$j = {
+  const styles$k = {
     toggleWrapper,
     toggleButton,
     dropdown,
@@ -5638,38 +5638,38 @@
     if (toggleableColumns.length === 0) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$j.toggleWrapper, ref: wrapperRef, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$k.toggleWrapper, ref: wrapperRef, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
-          className: styles$j.toggleButton,
+          className: styles$k.toggleButton,
           onClick: toggleDropdown,
           title: "Toggle column visibility",
           type: "button",
           children: /* @__PURE__ */ jsxRuntime.jsx(ColumnsIcon, {})
         }
       ),
-      isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$j.dropdown, children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.dropdownTitle, children: "Columns" }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.divider }),
+      isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles$k.dropdown, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$k.dropdownTitle, children: "Columns" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$k.divider }),
         toggleableColumns.map((column) => {
           const isVisible = !column.hidden;
           return /* @__PURE__ */ jsxRuntime.jsxs(
             "label",
             {
-              className: styles$j.dropdownItem,
+              className: styles$k.dropdownItem,
               onClick: (e) => e.stopPropagation(),
               children: [
                 /* @__PURE__ */ jsxRuntime.jsx(
                   "input",
                   {
                     type: "checkbox",
-                    className: styles$j.checkbox,
+                    className: styles$k.checkbox,
                     checked: isVisible,
                     onChange: () => handleToggle(column.id, !!column.hidden)
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$j.columnLabel, children: column.title || column.id })
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles$k.columnLabel, children: column.title || column.id })
               ]
             },
             column.id
@@ -5685,7 +5685,7 @@
   const ganttTable_HeaderSeparator = "_ganttTable_HeaderSeparator_5goa0_39";
   const ganttTable_HeaderItem = "_ganttTable_HeaderItem_5goa0_53";
   const resizer = "_resizer_5goa0_77";
-  const styles$i = {
+  const styles$j = {
     ganttTable,
     ganttTable_Header,
     ganttTable_HeaderMoveTask,
@@ -5737,7 +5737,7 @@
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
-        className: styles$i.ganttTable,
+        className: styles$j.ganttTable,
         style: {
           fontFamily: "var(--gantt-font-family)",
           fontSize: "var(--gantt-font-size)"
@@ -5745,18 +5745,18 @@
         children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
-            className: styles$i.ganttTable_Header,
+            className: styles$j.ganttTable_Header,
             style: {
               height: headerHeight - 2
             },
             children: [
-              canMoveTasks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$i.ganttTable_HeaderMoveTask }),
+              canMoveTasks && /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$j.ganttTable_HeaderMoveTask }),
               columns.map(({ title: title2, width, canResize }, index2) => {
                 return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
                   index2 > 0 && !!title2 && /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {
-                      className: styles$i.ganttTable_HeaderSeparator,
+                      className: styles$j.ganttTable_HeaderSeparator,
                       style: {
                         height: headerHeight * 0.5,
                         marginTop: headerHeight * 0.2
@@ -5767,7 +5767,7 @@
                     "div",
                     {
                       "data-testid": `table-column-header-${title2}`,
-                      className: styles$i.ganttTable_HeaderItem,
+                      className: styles$j.ganttTable_HeaderItem,
                       style: {
                         minWidth: width,
                         maxWidth: width,
@@ -5779,7 +5779,7 @@
                           "div",
                           {
                             "data-testid": `table-column-header-resize-handle-${title2}`,
-                            className: styles$i.resizer,
+                            className: styles$j.resizer,
                             onMouseDown: (event) => {
                               onColumnResizeStart(index2, event.clientX);
                             },
@@ -5799,7 +5799,7 @@
               canToggleColumns && /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: styles$i.ganttTable_HeaderItem,
+                  className: styles$j.ganttTable_HeaderItem,
                   style: { minWidth: 28, maxWidth: 28 },
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     ColumnVisibilityToggle,
@@ -10007,7 +10007,7 @@
   }
   [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
   const taskListWrapper$1 = "_taskListWrapper_196te_3";
-  const styles$h = {
+  const styles$i = {
     taskListWrapper: taskListWrapper$1
   };
   function getDragDepth(offset2, indentationWidth2) {
@@ -10193,7 +10193,7 @@
   const dragIndicatorIcon = "_dragIndicatorIcon_1yqtr_119";
   const isCut = "_isCut_1yqtr_135";
   const taskListCell = "_taskListCell_1yqtr_167";
-  const styles$g = {
+  const styles$h = {
     taskListTableRow,
     isAfter,
     isBefore,
@@ -10219,6 +10219,105 @@
       ]
     }
   );
+  const inlineEditWrapper = "_inlineEditWrapper_118p4_1";
+  const inlineEditInput = "_inlineEditInput_118p4_19";
+  const styles$g = {
+    inlineEditWrapper,
+    inlineEditInput
+  };
+  const InlineEditCell = ({
+    value,
+    editType = "text",
+    editOptions,
+    onCommit,
+    onCancel
+  }) => {
+    const inputRef = React.useRef(null);
+    const [localValue, setLocalValue] = React.useState(
+      () => formatForInput(value, editType)
+    );
+    React.useEffect(() => {
+      const el = inputRef.current;
+      if (el) {
+        el.focus();
+        if ("select" in el && editType !== "select") {
+          el.select();
+        }
+      }
+    }, [editType]);
+    const commitValue = React.useCallback(() => {
+      const parsed = parseFromInput(localValue, editType);
+      onCommit(parsed);
+    }, [localValue, editType, onCommit]);
+    const handleKeyDown = React.useCallback(
+      (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          commitValue();
+        } else if (e.key === "Escape") {
+          e.preventDefault();
+          onCancel();
+        }
+        e.stopPropagation();
+      },
+      [commitValue, onCancel]
+    );
+    const handleBlur = React.useCallback(() => {
+      commitValue();
+    }, [commitValue]);
+    const stopPropagation2 = React.useCallback((e) => {
+      e.stopPropagation();
+    }, []);
+    if (editType === "select") {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$g.inlineEditWrapper, onMouseDown: stopPropagation2, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "select",
+        {
+          ref: inputRef,
+          className: styles$g.inlineEditInput,
+          value: localValue,
+          onChange: (e) => setLocalValue(e.target.value),
+          onKeyDown: handleKeyDown,
+          onBlur: handleBlur,
+          children: editOptions == null ? void 0 : editOptions.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        }
+      ) });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles$g.inlineEditWrapper, onMouseDown: stopPropagation2, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        ref: inputRef,
+        className: styles$g.inlineEditInput,
+        type: editType === "number" ? "number" : editType === "date" ? "date" : "text",
+        value: localValue,
+        onChange: (e) => setLocalValue(e.target.value),
+        onKeyDown: handleKeyDown,
+        onBlur: handleBlur
+      }
+    ) });
+  };
+  function formatForInput(value, editType) {
+    if (value == null)
+      return "";
+    if (editType === "date") {
+      if (value instanceof Date) {
+        return value.toISOString().slice(0, 10);
+      }
+      if (typeof value === "string")
+        return value.slice(0, 10);
+    }
+    return String(value);
+  }
+  function parseFromInput(raw, editType) {
+    if (editType === "number") {
+      const n = Number(raw);
+      return Number.isNaN(n) ? raw : n;
+    }
+    if (editType === "date") {
+      const d = new Date(raw);
+      return Number.isNaN(d.getTime()) ? raw : d;
+    }
+    return raw;
+  }
   const TaskListTableRowInner = React.forwardRef(
     (props, ref) => {
       const {
@@ -10251,9 +10350,11 @@
         task,
         moveHandleProps,
         isOverlay: isOverlay2,
-        moveOverPosition
+        moveOverPosition,
+        onTaskInlineEdit
       } = props;
       const { id, comparisonLevel = 1 } = task;
+      const [editingColumnId, setEditingColumnId] = React.useState(null);
       const onRootMouseDown = React.useCallback(
         (event) => {
           event.preventDefault();
@@ -10346,18 +10447,18 @@
         return isSelected ? "var(--gantt-table-selected-task-background-color)" : isEven ? "var(--gantt-table-even-background-color)" : void 0;
       }, [isEven, isOverlay2, isSelected]);
       const rowClassName = React.useMemo(() => {
-        const classNames = [styles$g.taskListTableRow];
+        const classNames = [styles$h.taskListTableRow];
         if (moveOverPosition === "after") {
-          classNames.push(styles$g.isAfter);
+          classNames.push(styles$h.isAfter);
         }
         if (moveOverPosition === "before") {
-          classNames.push(styles$g.isBefore);
+          classNames.push(styles$h.isBefore);
         }
         if (isOverlay2 && !isDragging) {
-          classNames.push(styles$g.isOverlay);
+          classNames.push(styles$h.isOverlay);
         }
         if (isCut2) {
-          classNames.push(styles$g.isCut);
+          classNames.push(styles$h.isCut);
         }
         return classNames.join(" ");
       }, [isCut2, moveOverPosition, isOverlay2, isDragging]);
@@ -10406,20 +10507,72 @@
           },
           onContextMenu,
           children: [
-            task.type !== "project" && task.id !== "no-project-asigned" && !isOverlay2 && moveHandleProps ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$g.dragIndicator}`, ...moveHandleProps, children: /* @__PURE__ */ jsxRuntime.jsx(DragIndicatorIcon, { className: styles$g.dragIndicatorIcon }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
-            columns.map(({ id: id2, component: Component, width }, index2) => {
+            task.type !== "project" && task.id !== "no-project-asigned" && !isOverlay2 && moveHandleProps ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${styles$h.dragIndicator}`, ...moveHandleProps, children: /* @__PURE__ */ jsxRuntime.jsx(DragIndicatorIcon, { className: styles$h.dragIndicatorIcon }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", {}),
+            columns.map((col, index2) => {
+              const { id: colId, component: Component, width } = col;
+              const isEditingCell = editingColumnId === colId;
+              const resolveValue = (c) => {
+                const t = columnData.task;
+                if (c.getValueFromTask)
+                  return c.getValueFromTask(t);
+                if (t.type !== "empty" && t.payload && c.id in t.payload)
+                  return t.payload[c.id];
+                return t[c.id];
+              };
+              const handleStartEdit = () => {
+                if (col.editable && onTaskInlineEdit) {
+                  setEditingColumnId(colId);
+                }
+              };
+              const handleCommitEdit = (newValue) => {
+                setEditingColumnId(null);
+                if (onTaskInlineEdit) {
+                  onTaskInlineEdit(task, colId, newValue);
+                }
+              };
+              const handleCancelEdit = () => {
+                setEditingColumnId(null);
+              };
+              const cellColumnData = {
+                ...columnData,
+                isEditing: isEditingCell,
+                onStartEdit: handleStartEdit,
+                onCommitEdit: handleCommitEdit,
+                onCancelEdit: handleCancelEdit
+              };
               return /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: styles$g.taskListCell,
+                  className: styles$h.taskListCell,
                   style: {
                     minWidth: width,
                     maxWidth: width,
                     ...pinnedStyles[index2]
                   },
-                  children: /* @__PURE__ */ jsxRuntime.jsx(Component, { data: columnData })
+                  onDoubleClick: col.editable && onTaskInlineEdit && !isEditingCell ? (e) => {
+                    e.stopPropagation();
+                    handleStartEdit();
+                  } : void 0,
+                  children: isEditingCell ? col.editComponent ? /* @__PURE__ */ jsxRuntime.jsx(
+                    col.editComponent,
+                    {
+                      data: cellColumnData,
+                      value: resolveValue(col),
+                      onCommit: handleCommitEdit,
+                      onCancel: handleCancelEdit
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(
+                    InlineEditCell,
+                    {
+                      value: resolveValue(col),
+                      editType: col.editType,
+                      editOptions: col.editOptions,
+                      onCommit: handleCommitEdit,
+                      onCancel: handleCancelEdit
+                    }
+                  ) : /* @__PURE__ */ jsxRuntime.jsx(Component, { data: cellColumnData })
                 },
-                `${id2}-${index2}`
+                `${colId}-${index2}`
               );
             })
           ]
@@ -10822,7 +10975,7 @@
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: styles$h.taskListWrapper,
+                  className: styles$i.taskListWrapper,
                   style: {
                     fontFamily: "var(--gantt-font-family)",
                     fontSize: "var(--gantt-font-size)"
@@ -10985,7 +11138,8 @@
     canReorderTasks,
     canToggleColumns,
     onColumnVisibilityChange,
-    tableBottom
+    tableBottom,
+    onTaskInlineEdit
   }) => {
     const [
       allColumns,
@@ -11045,7 +11199,8 @@
           scrollToTask,
           selectTaskOnMouseDown,
           task,
-          depth
+          depth,
+          onTaskInlineEdit
         };
       },
       [
@@ -11069,7 +11224,8 @@
         onExpanderClick,
         scrollToTask,
         selectTaskOnMouseDown,
-        selectedIdsMirror
+        selectedIdsMirror,
+        onTaskInlineEdit
       ]
     );
     const RenderTaskListTable = canReorderTasks ? TaskListSortableTable : TaskListTable;

package/dist/style.css

@@ -389,6 +389,33 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+._inlineEditWrapper_118p4_1 {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+}
+
+._inlineEditInput_118p4_19 {
+  width: 100%;
+  height: 80%;
+  border: 1px solid var(--gantt-table-selected-task-background-color, #1976d2);
+  border-radius: 2px;
+  outline: none;
+  padding: 2px 4px;
+  font-family: inherit;
+  font-size: inherit;
+  box-sizing: border-box;
+  background: #fff;
+}
+
+._inlineEditInput_118p4_19:focus {
+  border-color: var(--gantt-table-selected-task-background-color, #1976d2);
+  box-shadow: 0 0 0 1px
+    var(--gantt-table-selected-task-background-color, #1976d2);
+}
 /*noinspection CssUnresolvedCustomProperty*/
 ._taskListWrapper_196te_3 {
   display: table;

package/dist/types/internal-types.d.ts

@@ -190,6 +190,10 @@ export type TaskListTableRowProps = {
     selectTaskOnMouseDown: (taskId: string, event: MouseEvent) => void;
     style?: CSSProperties;
     task: RenderTask;
+    /**
+     * Callback when a cell value is committed via inline editing.
+     */
+    onTaskInlineEdit?: (task: RenderTask, columnId: string, newValue: unknown) => void;
 };
 export interface TaskListHeaderProps {
     headerHeight: number;

package/dist/types/public-types.d.ts

@@ -198,6 +198,11 @@ export interface GanttTaskListProps {
      * Invokes on double click on a task list row. Receives the task data.
      */
     onDoubleClickTaskRow?: (task: RenderTask) => void;
+    /**
+     * Callback when a cell value is committed via inline editing.
+     * Return a promise that resolves to the updated task, or void.
+     */
+    onTaskInlineEdit?: (task: RenderTask, columnId: string, newValue: unknown) => void | Promise<void>;
 }
 export interface TableRenderBottomProps {
     height?: number;
@@ -449,10 +454,44 @@ export type ColumnData = {
     isShowTaskNumbers: boolean;
     onExpanderClick: (task: Task) => void;
     task: RenderTask;
+    /**
+     * Whether this cell is currently in inline-edit mode.
+     */
+    isEditing?: boolean;
+    /**
+     * Call to enter inline-edit mode for this column/cell.
+     */
+    onStartEdit?: () => void;
+    /**
+     * Commit the edited value. `value` is the new raw value for the column.
+     */
+    onCommitEdit?: (value: unknown) => void;
+    /**
+     * Cancel inline editing and revert to display mode.
+     */
+    onCancelEdit?: () => void;
 };
 export type ColumnProps = {
     data: ColumnData;
 };
+/**
+ * The type of inline editor to render when no custom `editComponent` is provided.
+ * - `"text"` – a plain text input (default)
+ * - `"date"` – a date input (`<input type="date">`)
+ * - `"number"` – a numeric input
+ * - `"select"` – a `<select>` dropdown (provide `editOptions`)
+ */
+export type ColumnEditType = "text" | "date" | "number" | "select";
+export type EditColumnProps = {
+    /** Current column data (task, etc.) */
+    data: ColumnData;
+    /** Current raw value of the cell */
+    value: unknown;
+    /** Called with the new value when editing is finished */
+    onCommit: (value: unknown) => void;
+    /** Called to cancel editing */
+    onCancel: () => void;
+};
 export type Column = {
     id: string;
     component: ComponentType<ColumnProps>;
@@ -468,6 +507,31 @@ export type Column = {
      * Hide this column from the table. Defaults to false.
      */
     hidden?: boolean;
+    /**
+     * Enable inline editing for this column. Defaults to false.
+     */
+    editable?: boolean;
+    /**
+     * The built-in editor type. Defaults to `"text"`.
+     */
+    editType?: ColumnEditType;
+    /**
+     * Options for the `"select"` edit type.
+     */
+    editOptions?: {
+        value: string;
+        label: string;
+    }[];
+    /**
+     * Custom edit component. When provided it replaces the built-in editor.
+     */
+    editComponent?: ComponentType<EditColumnProps>;
+    /**
+     * Resolve the raw value from the task for this column.
+     * Used by the built-in editor and passed to custom `editComponent`.
+     * Falls back to `task.payload?.[column.id]` then `(task as any)[column.id]`.
+     */
+    getValueFromTask?: (task: RenderTask) => unknown;
 };
 export type OnResizeColumn = (nextColumns: readonly Column[], columnIndex: number, deltaWidth: number) => void;
 export type OnColumnVisibilityChange = (columnId: string, hidden: boolean) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gantt-task-react-v",
-  "version": "1.6.16",
+  "version": "1.6.17",
   "description": "Interactive Gantt Chart for React with TypeScript.",
   "author": "aguilanbon",
   "homepage": "https://github.com/aguilanbon/gantt-task-react-v",