gantt-task-react-powern 0.6.32 → 0.6.33

package/dist/index.js

@@ -270,7 +270,7 @@ var getMonday = function getMonday(date) {
   return new Date(date.setDate(diff));
 };
 
-var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
+var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderResizeHandle":"_ddPJg","ganttTable_HeaderItem":"_WuQ0f"};
 
 var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   var headerHeight = _ref.headerHeight,
@@ -279,7 +279,64 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
       rowWidth = _ref.rowWidth,
       scheduleType = _ref.scheduleType,
       allSelected = _ref.allSelected,
-      onSelectAll = _ref.onSelectAll;
+      onSelectAll = _ref.onSelectAll,
+      columnWidths = _ref.columnWidths,
+      onColumnResize = _ref.onColumnResize;
+
+  var widthOf = function widthOf(colId, factor) {
+    var _columnWidths$colId;
+
+    return (_columnWidths$colId = columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths[colId]) != null ? _columnWidths$colId : parseInt(rowWidth) * factor;
+  };
+
+  var startResize = function startResize(colId, startWidth) {
+    return function (e) {
+      if (!onColumnResize) return;
+      e.preventDefault();
+      e.stopPropagation();
+      var startX = e.clientX;
+
+      var onMove = function onMove(ev) {
+        onColumnResize(colId, startWidth + (ev.clientX - startX));
+      };
+
+      var onUp = function onUp() {
+        document.removeEventListener("mousemove", onMove);
+        document.removeEventListener("mouseup", onUp);
+      };
+
+      document.addEventListener("mousemove", onMove);
+      document.addEventListener("mouseup", onUp);
+    };
+  };
+
+  var cell = function cell(colId, factor, content, opts) {
+    if (opts === void 0) {
+      opts = {};
+    }
+
+    var _opts = opts,
+        title = _opts.title,
+        _opts$resizable = _opts.resizable,
+        resizable = _opts$resizable === void 0 ? true : _opts$resizable;
+    var width = widthOf(colId, factor);
+    return React__default.createElement("div", {
+      className: styles.ganttTable_HeaderItem,
+      style: {
+        minWidth: width,
+        maxWidth: width,
+        position: "relative"
+      },
+      title: title
+    }, content, resizable && onColumnResize && React__default.createElement("div", {
+      className: styles.ganttTable_HeaderResizeHandle,
+      style: {
+        height: headerHeight - 2
+      },
+      onMouseDown: startResize(colId, width)
+    }));
+  };
+
   return React__default.createElement("div", {
     className: styles.ganttTable,
     style: {
@@ -291,156 +348,33 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
     style: {
       height: headerHeight - 2
     }
-  }, onSelectAll && React__default.createElement("div", null, React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.3,
-      maxWidth: parseInt(rowWidth) * 0.3
-    }
-  }, React__default.createElement("input", {
+  }, onSelectAll && cell("select", 0.3, React__default.createElement("input", {
     type: "checkbox",
     checked: allSelected,
     onChange: function onChange(e) {
       return onSelectAll(e.target.checked);
     }
-  }))), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.8,
-      maxWidth: parseInt(rowWidth) * 0.8
-    }
-  }, "ID"), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.2
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.8,
-      maxWidth: parseInt(rowWidth) * 0.8
-    }
-  }, "WBS Code / Activity ID"), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.2
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 1.8,
-      maxWidth: parseInt(rowWidth) * 1.8
-    }
-  }, "Task"), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.2
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.6
-    },
+  }), {
+    resizable: false
+  }), cell("id", 0.8, "ID"), cell("wbs", 0.8, "WBS Code / Activity ID"), cell("name", 1.8, "Task"), cell("plannedStart", 0.6, "Planned Start", {
     title: "Planned Start"
-  }, "Planned Start"), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.25
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.6
-    },
+  }), cell("plannedEnd", 0.6, "Planned End", {
     title: "Planned End"
-  }, "Planned End"), scheduleType === "lookAhead" && React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.6
-    },
-    title: "Planned Start"
-  }, "Actual Start"), scheduleType === "lookAhead" && React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.25
-    }
-  }), scheduleType === "lookAhead" && React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.6
-    },
-    title: "Planned End"
-  }, "Actual End"), scheduleType === "main" && React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.25
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.6,
-      maxWidth: parseInt(rowWidth) * 0.6
-    },
+  }), scheduleType === "lookAhead" && React__default.createElement(React__default.Fragment, null, cell("actualStart", 0.6, "Actual Start", {
+    title: "Actual Start"
+  }), cell("actualEnd", 0.6, "Actual End", {
+    title: "Actual End"
+  })), scheduleType === "main" && React__default.createElement(React__default.Fragment, null, cell("percentComplete", 0.6, "% Complete", {
     title: "% Complete"
-  }, "% Complete"), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.25
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.6,
-      maxWidth: parseInt(rowWidth) * 0.6
-    },
+  }), cell("plannedDuration", 0.6, "Planned Duration", {
     title: "Planned Duration"
-  }, "Planned Duration"), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.25
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.7,
-      maxWidth: parseInt(rowWidth) * 0.7
-    },
+  }), cell("remainingDuration", 0.7, "Remaining Duration", {
     title: "Remaining Duration"
-  }, "Remaining Duration"), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.25
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.6,
-      maxWidth: parseInt(rowWidth) * 0.6
-    },
+  }), cell("actualDuration", 0.6, "Actual Duration", {
     title: "Actual Duration"
-  }, "Actual Duration"), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderSeparator,
-    style: {
-      height: headerHeight * 0.5,
-      marginTop: headerHeight * 0.25
-    }
-  }), React__default.createElement("div", {
-    className: styles.ganttTable_HeaderItem,
-    style: {
-      minWidth: parseInt(rowWidth) * 0.8,
-      maxWidth: parseInt(rowWidth) * 0.8
-    },
+  }), cell("durationType", 0.8, "Duration Type", {
     title: "Duration Type"
-  }, "Duration Type"))));
+  }))));
 };
 
 var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListLookAheadRow":"_GzvG4","taskListMilestoneRow":"_3Ykml","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
@@ -484,7 +418,15 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       taskLabelRenderer = _ref$taskLabelRendere === void 0 ? function (t) {
     return " " + t.name;
   } : _ref$taskLabelRendere,
-      virtualItems = _ref.virtualItems;
+      virtualItems = _ref.virtualItems,
+      columnWidths = _ref.columnWidths;
+
+  var widthOf = function widthOf(colId, factor) {
+    var _columnWidths$colId;
+
+    return (_columnWidths$colId = columnWidths === null || columnWidths === void 0 ? void 0 : columnWidths[colId]) != null ? _columnWidths$colId : parseInt(rowWidth) * factor;
+  };
+
   var toLocaleDateString = React.useMemo(function () {
     return toLocaleDateStringFactory(locale);
   }, [locale]);
@@ -556,8 +498,8 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
     }, onTaskSelect && React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
-        minWidth: parseInt(rowWidth) * 0.3,
-        maxWidth: parseInt(rowWidth) * 0.3
+        minWidth: widthOf("select", 0.3),
+        maxWidth: widthOf("select", 0.3)
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText,
@@ -579,8 +521,8 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
     }))), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
-        minWidth: parseInt(rowWidth) * 0.8,
-        maxWidth: parseInt(rowWidth) * 0.8
+        minWidth: widthOf("id", 0.8),
+        maxWidth: widthOf("id", 0.8)
       },
       title: t.id
     }, React__default.createElement("div", {
@@ -606,15 +548,15 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
     }, "\u2714") : ""))), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
-        minWidth: parseInt(rowWidth) * 0.8,
-        maxWidth: parseInt(rowWidth) * 0.8
+        minWidth: widthOf("wbs", 0.8),
+        maxWidth: widthOf("wbs", 0.8)
       },
       title: t.optionalId ? t.optionalId : ""
     }, t.optionalId), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
-        minWidth: parseInt(rowWidth) * 1.8,
-        maxWidth: parseInt(rowWidth) * 1.8
+        minWidth: widthOf("name", 1.8),
+        maxWidth: widthOf("name", 1.8)
       },
       title: t.name
     }, React__default.createElement("div", {
@@ -622,32 +564,32 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
     }, taskLabelRenderer(t))), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
-        minWidth: parseInt(rowWidth) * 0.6,
-        maxWidth: parseInt(rowWidth) * 0.6
+        minWidth: widthOf("plannedStart", 0.6),
+        maxWidth: widthOf("plannedStart", 0.6)
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
     }, "\xA0", toLocaleDateString(t.start, dateTimeOptions))), React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
-        minWidth: parseInt(rowWidth) * 0.6,
-        maxWidth: parseInt(rowWidth) * 0.6
+        minWidth: widthOf("plannedEnd", 0.6),
+        maxWidth: widthOf("plannedEnd", 0.6)
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
     }, "\xA0", toLocaleDateString(t.end, dateTimeOptions))), scheduleType === "lookAhead" && React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
-        minWidth: parseInt(rowWidth) * 0.6,
-        maxWidth: parseInt(rowWidth) * 0.6
+        minWidth: widthOf("actualStart", 0.6),
+        maxWidth: widthOf("actualStart", 0.6)
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
     }, "\xA0", toLocaleDateString(t.actualStart, dateTimeOptions))), scheduleType === "lookAhead" && React__default.createElement("div", {
       className: styles$1.taskListCell,
       style: {
-        minWidth: parseInt(rowWidth) * 0.6,
-        maxWidth: parseInt(rowWidth) * 0.6
+        minWidth: widthOf("actualEnd", 0.6),
+        maxWidth: widthOf("actualEnd", 0.6)
       }
     }, React__default.createElement("div", {
       className: styles$1.taskListText
@@ -667,40 +609,40 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
         className: styles$1.taskListCell,
         style: {
-          minWidth: parseInt(rowWidth) * 0.6,
-          maxWidth: parseInt(rowWidth) * 0.6
+          minWidth: widthOf("percentComplete", 0.6),
+          maxWidth: widthOf("percentComplete", 0.6)
         }
       }, React__default.createElement("div", {
         className: styles$1.taskListText
       }, "\xA0", percentComplete != null ? percentComplete + "%" : "")), React__default.createElement("div", {
         className: styles$1.taskListCell,
         style: {
-          minWidth: parseInt(rowWidth) * 0.6,
-          maxWidth: parseInt(rowWidth) * 0.6
+          minWidth: widthOf("plannedDuration", 0.6),
+          maxWidth: widthOf("plannedDuration", 0.6)
         }
       }, React__default.createElement("div", {
         className: styles$1.taskListText
       }, "\xA0", plannedDuration != null ? plannedDuration : "")), React__default.createElement("div", {
         className: styles$1.taskListCell,
         style: {
-          minWidth: parseInt(rowWidth) * 0.7,
-          maxWidth: parseInt(rowWidth) * 0.7
+          minWidth: widthOf("remainingDuration", 0.7),
+          maxWidth: widthOf("remainingDuration", 0.7)
         }
       }, React__default.createElement("div", {
         className: styles$1.taskListText
       }, "\xA0", remainingDuration != null ? remainingDuration : "")), React__default.createElement("div", {
         className: styles$1.taskListCell,
         style: {
-          minWidth: parseInt(rowWidth) * 0.6,
-          maxWidth: parseInt(rowWidth) * 0.6
+          minWidth: widthOf("actualDuration", 0.6),
+          maxWidth: widthOf("actualDuration", 0.6)
         }
       }, React__default.createElement("div", {
         className: styles$1.taskListText
       }, "\xA0", actualDuration != null ? actualDuration : "")), React__default.createElement("div", {
         className: styles$1.taskListCell,
         style: {
-          minWidth: parseInt(rowWidth) * 0.8,
-          maxWidth: parseInt(rowWidth) * 0.8
+          minWidth: widthOf("durationType", 0.8),
+          maxWidth: widthOf("durationType", 0.8)
         }
       }, React__default.createElement("div", {
         className: styles$1.taskListText
@@ -877,6 +819,73 @@ var VerticalScroll = function VerticalScroll(_ref) {
   }));
 };
 
+function getTaskListColumns(scheduleType, hasCheckbox) {
+  var columns = [];
+  if (hasCheckbox) columns.push({
+    id: "select",
+    factor: 0.3
+  });
+  columns.push({
+    id: "id",
+    factor: 0.8
+  }, {
+    id: "wbs",
+    factor: 0.8
+  }, {
+    id: "name",
+    factor: 1.8
+  }, {
+    id: "plannedStart",
+    factor: 0.6
+  }, {
+    id: "plannedEnd",
+    factor: 0.6
+  });
+
+  if (scheduleType === "lookAhead") {
+    columns.push({
+      id: "actualStart",
+      factor: 0.6
+    }, {
+      id: "actualEnd",
+      factor: 0.6
+    });
+  }
+
+  if (scheduleType === "main") {
+    columns.push({
+      id: "percentComplete",
+      factor: 0.6
+    }, {
+      id: "plannedDuration",
+      factor: 0.6
+    }, {
+      id: "remainingDuration",
+      factor: 0.7
+    }, {
+      id: "actualDuration",
+      factor: 0.6
+    }, {
+      id: "durationType",
+      factor: 0.8
+    });
+  }
+
+  return columns;
+}
+var MIN_COLUMN_WIDTH = 40;
+function buildDefaultColumnWidths(scheduleType, hasCheckbox, rowWidth) {
+  var base = parseInt(rowWidth) || 0;
+  var widths = {};
+
+  for (var _iterator = _createForOfIteratorHelperLoose(getTaskListColumns(scheduleType, hasCheckbox)), _step; !(_step = _iterator()).done;) {
+    var col = _step.value;
+    widths[col.id] = base * col.factor;
+  }
+
+  return widths;
+}
+
 var styles$4 = {"hideScrollbar":"_38emS"};
 
 var TaskList = function TaskList(_ref) {
@@ -901,6 +910,8 @@ var TaskList = function TaskList(_ref) {
       taskLabelRenderer = _ref.taskLabelRenderer,
       onMultiSelect = _ref.onMultiSelect,
       containerWidth = _ref.containerWidth,
+      containerMaxWidth = _ref.containerMaxWidth,
+      onContentWidthChange = _ref.onContentWidthChange,
       innerScrollRef = _ref.innerScrollRef,
       externalHorizontalContainerRef = _ref.horizontalContainerRef;
   var internalHorizontalContainerRef = React.useRef(null);
@@ -926,9 +937,55 @@ var TaskList = function TaskList(_ref) {
       selectedTasks = _useState[0],
       setSelectedTasks = _useState[1];
 
-  var _useState2 = React.useState([]),
-      pendingTaskSelect = _useState2[0],
-      setPendingTaskSelect = _useState2[1];
+  var hasCheckbox = !!onMultiSelect;
+
+  var _useState2 = React.useState(function () {
+    return buildDefaultColumnWidths(scheduleType, hasCheckbox, rowWidth);
+  }),
+      columnWidths = _useState2[0],
+      setColumnWidths = _useState2[1];
+
+  React.useEffect(function () {
+    var defaults = buildDefaultColumnWidths(scheduleType, hasCheckbox, rowWidth);
+    setColumnWidths(function (prev) {
+      var ids = Object.keys(defaults);
+      var sameSet = ids.length === Object.keys(prev).length && ids.every(function (id) {
+        return id in prev;
+      });
+      if (sameSet) return prev;
+      var next = {};
+
+      for (var _i = 0, _ids = ids; _i < _ids.length; _i++) {
+        var _prev$id;
+
+        var id = _ids[_i];
+        next[id] = (_prev$id = prev[id]) != null ? _prev$id : defaults[id];
+      }
+
+      return next;
+    });
+  }, [scheduleType, hasCheckbox, rowWidth]);
+
+  var handleColumnResize = function handleColumnResize(colId, width) {
+    setColumnWidths(function (prev) {
+      var _extends2;
+
+      return _extends({}, prev, (_extends2 = {}, _extends2[colId] = Math.max(MIN_COLUMN_WIDTH, width), _extends2));
+    });
+  };
+
+  var contentWidth = React.useMemo(function () {
+    return Object.values(columnWidths).reduce(function (sum, w) {
+      return sum + w;
+    }, 0);
+  }, [columnWidths]);
+  React.useEffect(function () {
+    onContentWidthChange === null || onContentWidthChange === void 0 ? void 0 : onContentWidthChange(contentWidth);
+  }, [contentWidth, onContentWidthChange]);
+
+  var _useState3 = React.useState([]),
+      pendingTaskSelect = _useState3[0],
+      setPendingTaskSelect = _useState3[1];
 
   var prevSelectedTasksRef = React.useRef([]);
   var expandedTasks = React.useRef([]);
@@ -1076,7 +1133,9 @@ var TaskList = function TaskList(_ref) {
     rowWidth: rowWidth,
     scheduleType: scheduleType,
     allSelected: tasks.length > 0 && selectedTasks.length === tasks.length,
-    onSelectAll: onMultiSelect ? handleSelectAll : undefined
+    onSelectAll: onMultiSelect ? handleSelectAll : undefined,
+    columnWidths: columnWidths,
+    onColumnResize: handleColumnResize
   };
   var selectedTaskId = selectedTask ? selectedTask.id : "";
   var tableProps = {
@@ -1094,15 +1153,19 @@ var TaskList = function TaskList(_ref) {
     selectedTasks: onMultiSelect ? selectedTasks : undefined,
     onTaskSelect: onMultiSelect ? handleTaskSelect : undefined,
     taskLabelRenderer: taskLabelRenderer,
-    virtualItems: virtualizer.getVirtualItems()
+    virtualItems: virtualizer.getVirtualItems(),
+    columnWidths: columnWidths
   };
   return React__default.createElement("div", {
     ref: taskListRef,
-    style: containerWidth != null ? {
-      width: containerWidth,
+    style: containerWidth != null || containerMaxWidth != null ? _extends({}, containerWidth != null ? {
+      width: containerWidth
+    } : {}, containerMaxWidth != null ? {
+      maxWidth: containerMaxWidth
+    } : {}, {
       overflow: "hidden",
       flexShrink: 0
-    } : {}
+    }) : {}
   }, React__default.createElement("div", {
     ref: innerScrollRef,
     className: styles$4.hideScrollbar,
@@ -1259,7 +1322,7 @@ function getQuarterNumber(date, quarterStart) {
   return Math.floor(offset / 3) + 1;
 }
 
-var styles$5 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","gridTickDashed":"_Zh9jh","darkerGridRow":"_2M-tt"};
+var styles$5 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","gridTickWeekStart":"_1q0EV","gridTickDashed":"_Zh9jh","darkerGridRow":"_2M-tt"};
 
 var GridBody = function GridBody(_ref) {
   var _projectCalendar$week;
@@ -1303,7 +1366,8 @@ var GridBody = function GridBody(_ref) {
     if (next && date <= now && next > now) return true;
 
     if (!next && date <= now) {
-      var step = date.getTime() - dates[i - 1].getTime();
+      var prev = dates[i - 1];
+      var step = prev ? date.getTime() - prev.getTime() : 86400000;
       var end = addToDate(date, step, "millisecond");
       return end > now;
     }
@@ -1364,11 +1428,14 @@ var GridBody = function GridBody(_ref) {
   }
 
   var isDayView = viewMode === exports.ViewMode.Day;
+  var isWeekView = viewMode === exports.ViewMode.Week;
   var tickLines = dates.map(function (date, i) {
     var tickClass = styles$5.gridTick;
 
     if (isDayView) {
-      tickClass = date.getDay() === weekStartDay ? styles$5.gridTick : styles$5.gridTickDashed;
+      tickClass = date.getDay() === weekStartDay ? styles$5.gridTickWeekStart : styles$5.gridTickDashed;
+    } else if (isWeekView) {
+      tickClass = styles$5.gridTickWeekStart;
     }
 
     return React__default.createElement("line", {
@@ -1536,7 +1603,13 @@ var Calendar = function Calendar(_ref) {
       columnWidth = _ref.columnWidth,
       fontFamily = _ref.fontFamily,
       fontSize = _ref.fontSize,
-      projectCalendar = _ref.projectCalendar;
+      projectCalendar = _ref.projectCalendar,
+      weekendColor = _ref.weekendColor;
+
+  var isDayOff = function isDayOff(date) {
+    if (projectCalendar) return isOffDay(date, projectCalendar);
+    return false;
+  };
 
   var shortMonth = function shortMonth(date) {
     return date.toLocaleString(locale, {
@@ -1785,6 +1858,18 @@ var Calendar = function Calendar(_ref) {
 
     for (var i = 0; i < dates.length; i++) {
       var date = dates[i];
+
+      if (isDayOff(date)) {
+        offDayRects.push(React__default.createElement("rect", {
+          key: "offday-header-" + i,
+          x: columnWidth * i,
+          y: topDefaultHeight,
+          width: columnWidth,
+          height: headerHeight - topDefaultHeight,
+          fill: weekendColor
+        }));
+      }
+
       var isWeekStart = date.getDay() === weekStartDay;
       tickLines.push(React__default.createElement("line", {
         key: "tick-day-" + i,
@@ -3188,6 +3273,11 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       setIsMoving = _useState3[1];
 
   React.useEffect(function () {
+    if (dates.length < 2) {
+      setXStep(timeStep * columnWidth / 86400000);
+      return;
+    }
+
     var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
     var newXStep = timeStep * columnWidth / dateDelta;
     setXStep(newXStep);
@@ -3815,8 +3905,10 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
   }));
 };
 
+var GANTT_MIN_WIDTH_RATIO = 0.4;
+var TABLE_GANTT_DIVIDER_WIDTH = 20;
 var Gantt = function Gantt(_ref) {
-  var _ref3;
+  var _ref2;
 
   var tasks = _ref.tasks,
       _ref$leafTasks = _ref.leafTasks,
@@ -3924,8 +4016,8 @@ var Gantt = function Gantt(_ref) {
   var tableHScrollRef = React.useRef(null);
 
   var _useState2 = React.useState(0),
-      tableScrollableWidth = _useState2[0],
-      setTableScrollableWidth = _useState2[1];
+      tableContentWidth = _useState2[0],
+      setTableContentWidth = _useState2[1];
 
   var _useState3 = React.useState(function () {
     var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
@@ -3955,22 +4047,21 @@ var Gantt = function Gantt(_ref) {
       taskListWidth = _useState5[0],
       setTaskListWidth = _useState5[1];
 
-  React.useEffect(function () {
-    if (tableHorizontalContainerRef.current) {
-      setTableScrollableWidth(tableHorizontalContainerRef.current.scrollWidth);
-    } else if (tableInnerScrollRef.current) {
-      setTableScrollableWidth(tableInnerScrollRef.current.scrollWidth);
-    }
-  }, [taskListWidth, listCellWidth]);
+  var _useState6 = React.useState(0),
+      wrapperWidth = _useState6[0],
+      setWrapperWidth = _useState6[1];
+
+  var maxTableWidth = wrapperWidth > 0 ? Math.max(100, wrapperWidth * (1 - GANTT_MIN_WIDTH_RATIO) - TABLE_GANTT_DIVIDER_WIDTH) : Infinity;
+  var tableCap = Math.min(maxTableWidth, tableContentWidth > 0 ? tableContentWidth : Infinity);
 
   var handleTableResizeMouseDown = function handleTableResizeMouseDown(e) {
-    var _taskListRef$current$, _taskListRef$current, _ref2, _tableHorizontalConta, _tableHorizontalConta2, _tableInnerScrollRef$, _wrapperRef$current$o, _wrapperRef$current;
+    var _taskListRef$current$, _taskListRef$current;
 
     isDraggingTable.current = true;
     userResizedRef.current = true;
     dragStartX.current = e.clientX;
     dragStartWidth.current = tableContainerWidth != null ? tableContainerWidth : (_taskListRef$current$ = (_taskListRef$current = taskListRef.current) === null || _taskListRef$current === void 0 ? void 0 : _taskListRef$current.offsetWidth) != null ? _taskListRef$current$ : 0;
-    dragMaxWidth.current = (_ref2 = (_tableHorizontalConta = (_tableHorizontalConta2 = tableHorizontalContainerRef.current) === null || _tableHorizontalConta2 === void 0 ? void 0 : _tableHorizontalConta2.scrollWidth) != null ? _tableHorizontalConta : (_tableInnerScrollRef$ = tableInnerScrollRef.current) === null || _tableInnerScrollRef$ === void 0 ? void 0 : _tableInnerScrollRef$.scrollWidth) != null ? _ref2 : Math.max(100, ((_wrapperRef$current$o = (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.offsetWidth) != null ? _wrapperRef$current$o : Infinity) - 200);
+    dragMaxWidth.current = tableCap;
     e.preventDefault();
   };
 
@@ -3994,25 +4085,25 @@ var Gantt = function Gantt(_ref) {
     };
   }, []);
 
-  var _useState6 = React.useState(0),
-      svgContainerWidth = _useState6[0],
-      setSvgContainerWidth = _useState6[1];
+  var _useState7 = React.useState(0),
+      svgContainerWidth = _useState7[0],
+      setSvgContainerWidth = _useState7[1];
 
-  var _useState7 = React.useState(ganttHeight),
-      svgContainerHeight = _useState7[0],
-      setSvgContainerHeight = _useState7[1];
+  var _useState8 = React.useState(ganttHeight),
+      svgContainerHeight = _useState8[0],
+      setSvgContainerHeight = _useState8[1];
 
-  var _useState8 = React.useState([]),
-      barTasks = _useState8[0],
-      setBarTasks = _useState8[1];
+  var _useState9 = React.useState([]),
+      barTasks = _useState9[0],
+      setBarTasks = _useState9[1];
 
   var debounceRef = React.useRef(null);
 
-  var _useState9 = React.useState({
+  var _useState10 = React.useState({
     action: ""
   }),
-      ganttEvent = _useState9[0],
-      setGanttEvent = _useState9[1];
+      ganttEvent = _useState10[0],
+      setGanttEvent = _useState10[1];
 
   var handleBarTasksUpdate = function handleBarTasksUpdate(task) {
     setBarTasks(function (prev) {
@@ -4026,17 +4117,17 @@ var Gantt = function Gantt(_ref) {
     return rowHeight * barFill / 100;
   }, [rowHeight, barFill]);
 
-  var _useState10 = React.useState(),
-      selectedTask = _useState10[0],
-      setSelectedTask = _useState10[1];
-
-  var _useState11 = React.useState(null),
-      failedTask = _useState11[0],
-      setFailedTask = _useState11[1];
+  var _useState11 = React.useState(),
+      selectedTask = _useState11[0],
+      setSelectedTask = _useState11[1];
 
   var _useState12 = React.useState(null),
-      computedColumnWidth = _useState12[0],
-      setComputedColumnWidth = _useState12[1];
+      failedTask = _useState12[0],
+      setFailedTask = _useState12[1];
+
+  var _useState13 = React.useState(null),
+      computedColumnWidth = _useState13[0],
+      setComputedColumnWidth = _useState13[1];
 
   var computedForViewModeRef = React.useRef(null);
   React.useEffect(function () {
@@ -4083,7 +4174,7 @@ var Gantt = function Gantt(_ref) {
       setComputedColumnWidth(next);
     }
   }, [viewMode, svgContainerWidth, columnWidthProp, computedColumnWidth]);
-  var columnWidth = (_ref3 = columnWidthProp != null ? columnWidthProp : computedColumnWidth) != null ? _ref3 : 60;
+  var columnWidth = (_ref2 = columnWidthProp != null ? columnWidthProp : computedColumnWidth) != null ? _ref2 : 60;
   var effectiveColumnWidth = React.useMemo(function () {
     if (svgContainerWidth <= 0 || dateSetup.dates.length <= 0) return columnWidth;
 
@@ -4104,29 +4195,29 @@ var Gantt = function Gantt(_ref) {
     return barTasks.length * rowHeight;
   }, [barTasks.length, rowHeight]);
 
-  var _useState13 = React.useState(0),
-      scrollY = _useState13[0],
-      setScrollY = _useState13[1];
+  var _useState14 = React.useState(0),
+      scrollY = _useState14[0],
+      setScrollY = _useState14[1];
 
-  var _useState14 = React.useState(-1),
-      scrollX = _useState14[0],
-      setScrollX = _useState14[1];
+  var _useState15 = React.useState(-1),
+      scrollX = _useState15[0],
+      setScrollX = _useState15[1];
 
-  var _useState15 = React.useState(false),
-      ignoreScrollEvent = _useState15[0],
-      setIgnoreScrollEvent = _useState15[1];
-
-  var _useState16 = React.useState(0),
-      lastTouchX = _useState16[0],
-      setLastTouchX = _useState16[1];
+  var _useState16 = React.useState(false),
+      ignoreScrollEvent = _useState16[0],
+      setIgnoreScrollEvent = _useState16[1];
 
   var _useState17 = React.useState(0),
-      lastTouchY = _useState17[0],
-      setLastTouchY = _useState17[1];
+      lastTouchX = _useState17[0],
+      setLastTouchX = _useState17[1];
+
+  var _useState18 = React.useState(0),
+      lastTouchY = _useState18[0],
+      setLastTouchY = _useState18[1];
 
-  var _useState18 = React.useState(false),
-      isProcessing = _useState18[0],
-      setIsProcessing = _useState18[1];
+  var _useState19 = React.useState(false),
+      isProcessing = _useState19[0],
+      setIsProcessing = _useState19[1];
 
   var buffer = rowHeight * 10;
   var visibleStartY = scrollY - buffer;
@@ -4247,11 +4338,48 @@ var Gantt = function Gantt(_ref) {
       setTaskListWidth(taskListRef.current.offsetWidth);
     }
   }, [taskListRef, listCellWidth]);
+  React.useEffect(function () {
+    if (!listCellWidth || !taskListRef.current) return;
+    if (typeof ResizeObserver === "undefined") return;
+
+    var measure = function measure() {
+      if (taskListRef.current) {
+        setTaskListWidth(taskListRef.current.offsetWidth);
+      }
+    };
+
+    var observer = new ResizeObserver(measure);
+    observer.observe(taskListRef.current);
+    measure();
+    return function () {
+      return observer.disconnect();
+    };
+  }, [listCellWidth, scheduleType]);
   React.useEffect(function () {
     if (wrapperRef.current) {
       setSvgContainerWidth(wrapperRef.current.offsetWidth - taskListWidth - 20);
     }
-  }, [wrapperRef, taskListWidth]);
+  }, [wrapperRef, taskListWidth, wrapperWidth]);
+  React.useEffect(function () {
+    var node = wrapperRef.current;
+    if (!node) return;
+
+    if (typeof ResizeObserver === "undefined") {
+      setWrapperWidth(node.offsetWidth);
+      return;
+    }
+
+    var measure = function measure() {
+      return setWrapperWidth(node.offsetWidth);
+    };
+
+    var observer = new ResizeObserver(measure);
+    observer.observe(node);
+    measure();
+    return function () {
+      return observer.disconnect();
+    };
+  }, []);
   React.useEffect(function () {
     if (ganttHeight) {
       setSvgContainerHeight(ganttHeight + headerHeight);
@@ -4260,7 +4388,7 @@ var Gantt = function Gantt(_ref) {
     }
   }, [ganttHeight, tasks, headerHeight, rowHeight]);
   React.useEffect(function () {
-    var _wrapperRef$current2, _wrapperRef$current3, _wrapperRef$current4, _wrapperRef$current5;
+    var _wrapperRef$current, _wrapperRef$current2, _wrapperRef$current3, _wrapperRef$current4;
 
     var handleWheel = function handleWheel(event) {
       if (event.shiftKey || event.deltaX) {
@@ -4334,25 +4462,25 @@ var Gantt = function Gantt(_ref) {
       setIgnoreScrollEvent(true);
     };
 
-    (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.addEventListener("wheel", handleWheel, {
+    (_wrapperRef$current = wrapperRef.current) === null || _wrapperRef$current === void 0 ? void 0 : _wrapperRef$current.addEventListener("wheel", handleWheel, {
       passive: false
     });
-    (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.addEventListener("touchmove", handleTouch, {
+    (_wrapperRef$current2 = wrapperRef.current) === null || _wrapperRef$current2 === void 0 ? void 0 : _wrapperRef$current2.addEventListener("touchmove", handleTouch, {
       passive: false
     });
-    (_wrapperRef$current4 = wrapperRef.current) === null || _wrapperRef$current4 === void 0 ? void 0 : _wrapperRef$current4.addEventListener("touchstart", handleLogTouch, {
+    (_wrapperRef$current3 = wrapperRef.current) === null || _wrapperRef$current3 === void 0 ? void 0 : _wrapperRef$current3.addEventListener("touchstart", handleLogTouch, {
       passive: false
     });
-    (_wrapperRef$current5 = wrapperRef.current) === null || _wrapperRef$current5 === void 0 ? void 0 : _wrapperRef$current5.addEventListener("touchend", handleLogTouch, {
+    (_wrapperRef$current4 = wrapperRef.current) === null || _wrapperRef$current4 === void 0 ? void 0 : _wrapperRef$current4.addEventListener("touchend", handleLogTouch, {
       passive: false
     });
     return function () {
-      var _wrapperRef$current6, _wrapperRef$current7, _wrapperRef$current8, _wrapperRef$current9;
+      var _wrapperRef$current5, _wrapperRef$current6, _wrapperRef$current7, _wrapperRef$current8;
 
-      (_wrapperRef$current6 = wrapperRef.current) === null || _wrapperRef$current6 === void 0 ? void 0 : _wrapperRef$current6.removeEventListener("wheel", handleWheel);
-      (_wrapperRef$current7 = wrapperRef.current) === null || _wrapperRef$current7 === void 0 ? void 0 : _wrapperRef$current7.removeEventListener("touchmove", handleTouch);
+      (_wrapperRef$current5 = wrapperRef.current) === null || _wrapperRef$current5 === void 0 ? void 0 : _wrapperRef$current5.removeEventListener("wheel", handleWheel);
+      (_wrapperRef$current6 = wrapperRef.current) === null || _wrapperRef$current6 === void 0 ? void 0 : _wrapperRef$current6.removeEventListener("touchmove", handleTouch);
+      (_wrapperRef$current7 = wrapperRef.current) === null || _wrapperRef$current7 === void 0 ? void 0 : _wrapperRef$current7.removeEventListener("touchend", handleLogTouch);
       (_wrapperRef$current8 = wrapperRef.current) === null || _wrapperRef$current8 === void 0 ? void 0 : _wrapperRef$current8.removeEventListener("touchend", handleLogTouch);
-      (_wrapperRef$current9 = wrapperRef.current) === null || _wrapperRef$current9 === void 0 ? void 0 : _wrapperRef$current9.removeEventListener("touchend", handleLogTouch);
     };
   }, [wrapperRef, scrollY, scrollX, ganttHeight, svgWidth, rtl, ganttFullHeight]);
 
@@ -4478,7 +4606,8 @@ var Gantt = function Gantt(_ref) {
     fontFamily: fontFamily,
     fontSize: fontSize,
     rtl: rtl,
-    projectCalendar: projectCalendar
+    projectCalendar: projectCalendar,
+    weekendColor: weekendColor
   };
   var barProps = {
     tasks: barTasks,
@@ -4537,7 +4666,9 @@ var Gantt = function Gantt(_ref) {
     TaskListTable: TaskListTable,
     taskLabelRenderer: taskLabelRenderer,
     onMultiSelect: onMultiSelect,
-    containerWidth: tableContainerWidth != null ? tableContainerWidth : undefined,
+    containerWidth: userResizedRef.current && tableContainerWidth != null ? Math.min(tableContainerWidth, tableCap) : undefined,
+    containerMaxWidth: tableCap === Infinity ? undefined : tableCap,
+    onContentWidthChange: setTableContentWidth,
     innerScrollRef: tableInnerScrollRef,
     horizontalContainerRef: tableHorizontalContainerRef
   };
@@ -4641,7 +4772,7 @@ var Gantt = function Gantt(_ref) {
     }
   }, React__default.createElement("div", {
     style: {
-      width: tableScrollableWidth
+      width: tableContentWidth
     }
   })), React__default.createElement("div", {
     style: {