gantt-task-react-powern 0.6.38 → 0.6.39

package/dist/index.js

@@ -22,6 +22,10 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure undefined");
+}
+
 function _unsupportedIterableToArray(o, minLen) {
   if (!o) return;
   if (typeof o === "string") return _arrayLikeToArray(o, minLen);
@@ -354,7 +358,7 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
     }
   }), {
     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", {
+  }), cell("id", 0.8, "ID"), cell("wbs", 0.8, "WBS Code / Activity ID"), cell("name", 1.8, "IM TESTING"), cell("plannedStart", 0.6, "Planned Start", {
     title: "Planned Start"
   }), cell("plannedEnd", 0.6, "Planned End", {
     title: "Planned End"
@@ -746,6 +750,43 @@ var Tooltip = function Tooltip(_ref) {
     type: type
   }));
 };
+
+function getOffTime(task, taskStart, taskEnd, _message) {
+  var start = taskStart.getTime();
+  var end = taskEnd.getTime();
+  var startWeek = Math.floor((start / 86400000 + 4) / 7);
+  var endWeek = Math.floor((end / 86400000 + 4) / 7);
+  var offTime = 0;
+
+  if (task.calendar) {
+    if (task.calendar.off_days && task.calendar.off_days.length) {
+      for (var d = 0; d < task.calendar.off_days.length || 0; d++) {
+        for (var w = startWeek; w <= endWeek; w++) {
+          var dayOfTheWeek = task.calendar.off_days[d];
+          var offDay = 86400000 * (7 * w - 4 + dayOfTheWeek);
+
+          if (offDay >= start && offDay <= end) {
+            offTime += 86400000;
+          }
+        }
+      }
+    }
+
+    if (task.calendar.holidays && task.calendar.holidays.length) {
+      for (var h = 0; h < task.calendar.holidays.length || 0; h++) {
+        var holiday = task.calendar.holidays[h];
+        var holiday_timestamp = new Date(holiday).getTime();
+
+        if (holiday_timestamp >= start && holiday_timestamp <= end) {
+          offTime += 86400000;
+        }
+      }
+    }
+  }
+
+  return offTime;
+}
+
 var StandardTooltipContent = function StandardTooltipContent(_ref2) {
   var _task$plannedDuration, _task$actualDuration;
 
@@ -757,8 +798,8 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     fontSize: fontSize,
     fontFamily: fontFamily
   };
-  var computedPlannedDuration = task.start && task.end && task.end.getTime() - task.start.getTime() > 0 ? Math.max(1, Math.round((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24))) : (_task$plannedDuration = task.plannedDuration) != null ? _task$plannedDuration : 0;
-  var computedActualDuration = task.actualStart && task.actualEnd && task.actualEnd.getTime() - task.actualStart.getTime() > 0 ? Math.max(1, Math.round((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24))) : (_task$actualDuration = task.actualDuration) != null ? _task$actualDuration : 0;
+  var computedPlannedDuration = task.start && task.end && task.end.getTime() - task.start.getTime() > 0 ? Math.max(1, Math.round((task.end.getTime() - task.start.getTime() - getOffTime(task, task.start, task.end)) / (1000 * 60 * 60 * 24))) : (_task$plannedDuration = task.plannedDuration) != null ? _task$plannedDuration : 0;
+  var computedActualDuration = task.actualStart && task.actualEnd && task.actualEnd.getTime() - task.actualStart.getTime() > 0 ? Math.max(1, Math.round((task.actualEnd.getTime() - task.actualStart.getTime() - getOffTime(task, task.actualStart, task.actualEnd)) / (1000 * 60 * 60 * 24))) : (_task$actualDuration = task.actualDuration) != null ? _task$actualDuration : 0;
   if (type == "planned") return React__default.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
     style: style
@@ -818,7 +859,7 @@ var VerticalScroll = function VerticalScroll(_ref) {
 };
 
 function getTaskListColumns(scheduleType, hasCheckbox) {
-  const columns = [];
+  var columns = [];
   if (hasCheckbox) columns.push({
     id: "select",
     factor: 0.3
@@ -871,12 +912,13 @@ function getTaskListColumns(scheduleType, hasCheckbox) {
 
   return columns;
 }
-const MIN_COLUMN_WIDTH = 40;
+var MIN_COLUMN_WIDTH = 40;
 function buildDefaultColumnWidths(scheduleType, hasCheckbox, rowWidth) {
-  const base = parseInt(rowWidth) || 0;
-  const widths = {};
+  var base = parseInt(rowWidth) || 0;
+  var widths = {};
 
-  for (const col of getTaskListColumns(scheduleType, hasCheckbox)) {
+  for (var _iterator = _createForOfIteratorHelperLoose(getTaskListColumns(scheduleType, hasCheckbox)), _step; !(_step = _iterator()).done;) {
+    var col = _step.value;
     widths[col.id] = base * col.factor;
   }
 
@@ -979,21 +1021,44 @@ var TaskList = function TaskList(_ref) {
   React.useEffect(function () {
     onContentWidthChange === null || onContentWidthChange === void 0 ? void 0 : onContentWidthChange(contentWidth);
   }, [contentWidth, onContentWidthChange]);
-  var taskIdsKey = React.useMemo(function () {
-    return tasks.map(function (t) {
-      return t.id;
-    }).join("|");
-  }, [tasks]);
-  var selectedTaskIds = React.useMemo(function () {
-    return new Set(selectedTasks);
-  }, [selectedTasks]);
 
   var _useState3 = React.useState([]),
       pendingTaskSelect = _useState3[0],
       setPendingTaskSelect = _useState3[1];
 
   var prevSelectedTasksRef = React.useRef([]);
-  var expandedTasks = React.useRef([]);
+  var expandedTasks = React.useRef(new Set());
+  var taskIndex = React.useMemo(function () {
+    var byId = new Map();
+    var childrenOf = new Map();
+    var roots = [];
+    tasks.forEach(function (task) {
+      return byId.set(task.id, task);
+    });
+    tasks.forEach(function (task) {
+      var parent = getParentWbs(task.id);
+
+      if (parent === undefined) {
+        roots.push(task.id);
+        return;
+      }
+
+      var siblings = childrenOf.get(parent);
+      if (siblings) siblings.push(task.id);else childrenOf.set(parent, [task.id]);
+    });
+    return {
+      byId: byId,
+      childrenOf: childrenOf,
+      roots: roots
+    };
+  }, [tasks]);
+
+  var sameIds = function sameIds(a, b) {
+    return a.length === b.length && a.every(function (id, i) {
+      return id === b[i];
+    });
+  };
+
   var virtualizer = reactVirtual.useVirtualizer({
     count: tasks.length,
     getScrollElement: function getScrollElement() {
@@ -1010,13 +1075,15 @@ var TaskList = function TaskList(_ref) {
     }
   }, [scrollY]);
   React.useEffect(function () {
-    if (onMultiSelect && JSON.stringify(prevSelectedTasksRef.current) !== JSON.stringify(selectedTasks)) {
-      var selectedTaskObjects = tasks.filter(function (task) {
-        return selectedTasks.includes(task.id);
-      });
-      prevSelectedTasksRef.current = [].concat(selectedTasks);
-      onMultiSelect(selectedTaskObjects);
+    if (!onMultiSelect || sameIds(prevSelectedTasksRef.current, selectedTasks)) {
+      return;
     }
+
+    var selected = new Set(selectedTasks);
+    prevSelectedTasksRef.current = selectedTasks;
+    onMultiSelect(tasks.filter(function (task) {
+      return selected.has(task.id);
+    }));
   }, [selectedTasks, tasks, onMultiSelect]);
   React.useEffect(function () {
     if (pendingTaskSelect.length === 0) return;
@@ -1026,19 +1093,19 @@ var TaskList = function TaskList(_ref) {
           selected = _ref2.selected;
 
       if (selected) {
-        recursiveOpen(taskId, tasks);
-        var descendants = getDescendants(taskId, tasks);
+        recursiveOpen(taskId);
+        var descendants = getDescendants(taskId);
         newSelected.add(taskId);
         descendants.forEach(function (d) {
           return newSelected.add(d);
         });
       } else {
-        var _descendants = getDescendants(taskId, tasks);
+        var _descendants = getDescendants(taskId);
 
-        newSelected.delete(taskId);
+        newSelected["delete"](taskId);
 
         _descendants.forEach(function (d) {
-          return newSelected.delete(d);
+          return newSelected["delete"](d);
         });
       }
     });
@@ -1046,63 +1113,60 @@ var TaskList = function TaskList(_ref) {
     setPendingTaskSelect([]);
   }, [pendingTaskSelect]);
   React.useEffect(function () {
-    expandedTasks.current = expandedTasks.current.filter(function (id) {
-      var t = tasks.find(function (task) {
-        return task.id === id;
-      });
-      return t && !t.hideChildren;
+    expandedTasks.current.forEach(function (id) {
+      var task = taskIndex.byId.get(id);
+      if (!task || task.hideChildren) expandedTasks.current["delete"](id);
     });
     if (selectedTasks.length === 0) return;
     var newSelected = new Set();
     selectedTasks.forEach(function (taskId) {
-      if (tasks.find(function (t) {
-        return t.id === taskId;
-      })) {
-        recursiveOpen(taskId, tasks);
-        newSelected.add(taskId);
-        var descendants = getDescendants(taskId, tasks);
-        descendants.forEach(function (d) {
-          return newSelected.add(d);
-        });
-      }
+      if (!taskIndex.byId.has(taskId)) return;
+      recursiveOpen(taskId);
+      newSelected.add(taskId);
+      getDescendants(taskId).forEach(function (d) {
+        return newSelected.add(d);
+      });
     });
     var newSelectedArray = Array.from(newSelected);
 
-    if (JSON.stringify(newSelectedArray) !== JSON.stringify(selectedTasks)) {
+    if (!sameIds(newSelectedArray, selectedTasks)) {
       setSelectedTasks(newSelectedArray);
     }
-  }, [taskIdsKey]);
+  }, [tasks.length]);
 
-  var getDescendants = function getDescendants(taskId, allTasks) {
-    var task = allTasks.find(function (t) {
-      return t.id === taskId;
-    });
-    if (!task) return [];
-    var children = allTasks.filter(function (t) {
-      return getParentWbs(t.id) === taskId;
-    });
-    return children.flatMap(function (child) {
-      return [child.id].concat(getDescendants(child.id, allTasks));
-    });
-  };
+  var getDescendants = function getDescendants(taskId) {
+    var _taskIndex$childrenOf;
 
-  var recursiveOpen = function recursiveOpen(taskId, allTasks) {
-    var task = allTasks.find(function (t) {
-      return t.id === taskId;
-    });
-    if (!task) return;
+    if (!taskIndex.byId.has(taskId)) return [];
+    var out = [];
+    var stack = [].concat((_taskIndex$childrenOf = taskIndex.childrenOf.get(taskId)) != null ? _taskIndex$childrenOf : []).reverse();
 
-    if (!expandedTasks.current.includes(taskId) && task.hideChildren) {
-      onExpanderClick(task);
-      expandedTasks.current = [].concat(expandedTasks.current, [taskId]);
+    while (stack.length) {
+      var id = stack.pop();
+      out.push(id);
+      var children = taskIndex.childrenOf.get(id);
+      if (children) stack.push.apply(stack, [].concat(children).reverse());
     }
 
-    var children = allTasks.filter(function (t) {
-      return getParentWbs(t.id) === taskId;
-    });
-    children.forEach(function (c) {
-      return recursiveOpen(c.id, allTasks);
-    });
+    return out;
+  };
+
+  var recursiveOpen = function recursiveOpen(taskId) {
+    var stack = [taskId];
+
+    while (stack.length) {
+      var id = stack.pop();
+      var task = taskIndex.byId.get(id);
+      var children = taskIndex.childrenOf.get(id);
+      if (!task || !children) continue;
+
+      if (task.hideChildren && !expandedTasks.current.has(id)) {
+        onExpanderClick(task);
+        expandedTasks.current.add(id);
+      }
+
+      stack.push.apply(stack, children);
+    }
   };
 
   var handleTaskSelect = function handleTaskSelect(taskId, selected) {
@@ -1116,10 +1180,12 @@ var TaskList = function TaskList(_ref) {
 
   var handleSelectAll = function handleSelectAll(selected) {
     if (selected) {
-      setSelectedTasks(tasks.map(function (task) {
-        return task.id;
+      setPendingTaskSelect(taskIndex.roots.map(function (taskId) {
+        return {
+          taskId: taskId,
+          selected: true
+        };
       }));
-      setPendingTaskSelect([]);
     } else {
       setSelectedTasks([]);
       setPendingTaskSelect([]);
@@ -1132,9 +1198,7 @@ var TaskList = function TaskList(_ref) {
     fontSize: fontSize,
     rowWidth: rowWidth,
     scheduleType: scheduleType,
-    allSelected: tasks.length > 0 && tasks.every(function (t) {
-      return selectedTaskIds.has(t.id);
-    }),
+    allSelected: tasks.length > 0 && selectedTasks.length === tasks.length,
     onSelectAll: onMultiSelect ? handleSelectAll : undefined,
     columnWidths: columnWidths,
     onColumnResize: handleColumnResize
@@ -1195,15 +1259,15 @@ var TaskList = function TaskList(_ref) {
 };
 
 function parseTimeToMinutes(t) {
-  const parts = t.split(":").map(Number);
+  var parts = t.split(":").map(Number);
   return parts[0] * 60 + parts[1] + (parts[2] ? parts[2] / 60 : 0);
 }
 
 function toDateString(date) {
-  const y = date.getFullYear();
-  const m = String(date.getMonth() + 1).padStart(2, "0");
-  const d = String(date.getDate()).padStart(2, "0");
-  return `${y}-${m}-${d}`;
+  var y = date.getFullYear();
+  var m = String(date.getMonth() + 1).padStart(2, "0");
+  var d = String(date.getDate()).padStart(2, "0");
+  return y + "-" + m + "-" + d;
 }
 
 function isHoliday(date, cal) {
@@ -1220,32 +1284,70 @@ function isOffDay(date, cal) {
     return false;
   }
 }
+var parsedShiftsCache = new WeakMap();
+var offDayCache = new WeakMap();
+
+function parsedShifts(cal) {
+  var shifts = parsedShiftsCache.get(cal);
+
+  if (!shifts) {
+    var _cal$shifts;
+
+    shifts = ((_cal$shifts = cal.shifts) != null ? _cal$shifts : []).map(function (_ref) {
+      var s = _ref[0],
+          e = _ref[1];
+      return {
+        start: parseTimeToMinutes(s),
+        end: parseTimeToMinutes(e)
+      };
+    });
+    parsedShiftsCache.set(cal, shifts);
+  }
+
+  return shifts;
+}
+
+function isOffDayCached(date, cal) {
+  var perCal = offDayCache.get(cal);
+
+  if (!perCal) {
+    perCal = new Map();
+    offDayCache.set(cal, perCal);
+  }
+
+  var key = date.getFullYear() * 10000 + (date.getMonth() + 1) * 100 + date.getDate();
+  var off = perCal.get(key);
+
+  if (off === undefined) {
+    off = isOffDay(date, cal);
+    perCal.set(key, off);
+  }
+
+  return off;
+}
+
+var NO_SHIFTS = [];
 function getShiftsForDay(date, cal) {
-  if (isOffDay(date, cal) || !cal.shifts) return [];
-  return cal.shifts.map(_ref => {
-    let [s, e] = _ref;
-    return {
-      start: parseTimeToMinutes(s),
-      end: parseTimeToMinutes(e)
-    };
-  });
+  if (!cal.shifts || isOffDayCached(date, cal)) return NO_SHIFTS;
+  return parsedShifts(cal);
 }
 function getWorkingIntervals(start, end, cal) {
   if (start >= end) return [];
-  const intervals = [];
-  const cursor = new Date(start);
+  var intervals = [];
+  var cursor = new Date(start);
   cursor.setHours(0, 0, 0, 0);
 
   while (cursor <= end) {
-    const shifts = getShiftsForDay(cursor, cal);
+    var shifts = getShiftsForDay(cursor, cal);
 
-    for (const shift of shifts) {
-      const shiftStart = new Date(cursor);
+    for (var _iterator = _createForOfIteratorHelperLoose(shifts), _step; !(_step = _iterator()).done;) {
+      var shift = _step.value;
+      var shiftStart = new Date(cursor);
       shiftStart.setHours(Math.floor(shift.start / 60), Math.floor(shift.start % 60), Math.round(shift.start % 1 * 60), 0);
-      const shiftEnd = new Date(cursor);
+      var shiftEnd = new Date(cursor);
       shiftEnd.setHours(Math.floor(shift.end / 60), Math.floor(shift.end % 60), Math.round(shift.end % 1 * 60), 0);
-      const intervalStart = shiftStart < start ? start : shiftStart;
-      const intervalEnd = shiftEnd > end ? end : shiftEnd;
+      var intervalStart = shiftStart < start ? start : shiftStart;
+      var intervalEnd = shiftEnd > end ? end : shiftEnd;
 
       if (intervalStart < intervalEnd) {
         intervals.push({
@@ -1261,19 +1363,21 @@ function getWorkingIntervals(start, end, cal) {
   return intervals;
 }
 function snapToWorkingTime(date, cal, direction) {
-  const MAX_DAYS = 60;
-  const result = new Date(date);
+  var MAX_DAYS = 60;
+  var result = new Date(date);
 
-  for (let attempt = 0; attempt < MAX_DAYS * 24 * 60; attempt++) {
-    const dayStart = new Date(result);
+  for (var attempt = 0; attempt < MAX_DAYS * 24 * 60; attempt++) {
+    var dayStart = new Date(result);
     dayStart.setHours(0, 0, 0, 0);
-    const shifts = getShiftsForDay(dayStart, cal);
+    var shifts = getShiftsForDay(dayStart, cal);
 
     if (shifts.length > 0) {
       if (direction === "forward") {
-        const currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
+        var currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
+
+        for (var _iterator2 = _createForOfIteratorHelperLoose(shifts), _step2; !(_step2 = _iterator2()).done;) {
+          var shift = _step2.value;
 
-        for (const shift of shifts) {
           if (currentMins <= shift.end) {
             if (currentMins < shift.start) {
               result.setHours(Math.floor(shift.start / 60), Math.round(shift.start % 60), 0, 0);
@@ -1286,11 +1390,11 @@ function snapToWorkingTime(date, cal, direction) {
         result.setDate(result.getDate() + 1);
         result.setHours(0, 0, 0, 0);
       } else {
-        const currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
+        var _currentMins = result.getHours() * 60 + result.getMinutes() + result.getSeconds() / 60;
 
-        for (let i = shifts.length - 1; i >= 0; i--) {
-          if (currentMins >= shifts[i].start) {
-            if (currentMins > shifts[i].end) {
+        for (var i = shifts.length - 1; i >= 0; i--) {
+          if (_currentMins >= shifts[i].start) {
+            if (_currentMins > shifts[i].end) {
               result.setHours(Math.floor(shifts[i].end / 60), Math.round(shifts[i].end % 60), 0, 0);
             }
 
@@ -1315,69 +1419,72 @@ function snapToWorkingTime(date, cal, direction) {
   return date;
 }
 function getQuarterNumber(date, quarterStart) {
-  const month = date.getMonth();
-  const offset = (month - quarterStart + 12) % 12;
+  var month = date.getMonth();
+  var offset = (month - quarterStart + 12) % 12;
   return Math.floor(offset / 3) + 1;
 }
 
 var styles$5 = {"gridRow":"_2dZTy","gridRowLookAhead":"_2RRca","gridRowLine":"_3rUKi","gridTick":"_RuwuK","gridTickWeekStart":"_1q0EV","gridTickDashed":"_Zh9jh","darkerGridRow":"_2M-tt"};
 
-const GridBody = _ref => {
-  let {
-    tasks,
-    scheduleType,
-    dates,
-    rowHeight,
-    svgWidth,
-    columnWidth,
-    todayColor,
-    weekendColor,
-    rtl,
-    virtualItems = [],
-    visibleStartY,
-    visibleEndY,
-    projectCalendar,
-    viewMode
-  } = _ref;
-  const visibleHeight = visibleEndY - visibleStartY;
-  const now = new Date();
-  const items = virtualItems.length > 0 ? virtualItems : tasks.map((_, i) => ({
-    index: i,
-    start: i * rowHeight,
-    end: (i + 1) * rowHeight,
-    size: rowHeight,
-    key: i
-  }));
+var GridBody = function GridBody(_ref) {
+  var _projectCalendar$week;
+
+  var tasks = _ref.tasks,
+      scheduleType = _ref.scheduleType,
+      dates = _ref.dates,
+      rowHeight = _ref.rowHeight,
+      svgWidth = _ref.svgWidth,
+      columnWidth = _ref.columnWidth,
+      todayColor = _ref.todayColor,
+      weekendColor = _ref.weekendColor,
+      rtl = _ref.rtl,
+      _ref$virtualItems = _ref.virtualItems,
+      virtualItems = _ref$virtualItems === void 0 ? [] : _ref$virtualItems,
+      visibleStartY = _ref.visibleStartY,
+      visibleEndY = _ref.visibleEndY,
+      projectCalendar = _ref.projectCalendar,
+      viewMode = _ref.viewMode;
+  var visibleHeight = visibleEndY - visibleStartY;
+  var now = new Date();
+  var items = virtualItems != null ? virtualItems : tasks.map(function (_, i) {
+    return {
+      index: i,
+      start: i * rowHeight,
+      end: (i + 1) * rowHeight,
+      size: rowHeight,
+      key: i
+    };
+  });
 
-  const isDayOff = date => {
+  var isDayOff = function isDayOff(date) {
     if (projectCalendar) return isOffDay(date, projectCalendar);
-    const d = date.getDay();
+    var d = date.getDay();
     return d === 0 || d === 6;
   };
 
-  const isTodayColumn = i => {
-    const date = dates[i];
-    const next = dates[i + 1];
+  var isTodayColumn = function isTodayColumn(i) {
+    var date = dates[i];
+    var next = dates[i + 1];
     if (next && date <= now && next > now) return true;
 
     if (!next && date <= now) {
-      const prev = dates[i - 1];
-      const step = prev ? date.getTime() - prev.getTime() : 86400000;
-      const end = addToDate(date, step, "millisecond");
+      var prev = dates[i - 1];
+      var step = prev ? date.getTime() - prev.getTime() : 86400000;
+      var end = addToDate(date, step, "millisecond");
       return end > now;
     }
 
     return false;
   };
 
-  const todayRects = [];
-  const offDayRects = [];
-  const weekStartDay = (projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) ?? 1;
+  var todayRects = [];
+  var offDayRects = [];
+  var weekStartDay = (_projectCalendar$week = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) != null ? _projectCalendar$week : 1;
 
-  for (let i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
+  for (var i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
     if (isTodayColumn(i)) {
       todayRects.push(React__default.createElement("rect", {
-        key: `today-${i}`,
+        key: "today-" + i,
         x: rtl ? x + columnWidth : x,
         y: visibleStartY,
         width: columnWidth,
@@ -1387,24 +1494,26 @@ const GridBody = _ref => {
     }
 
     if (viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter) {
-      const pEnd = dates[i + 1] ?? addToDate(dates[i], 1, "day");
-      const periodMs = pEnd.getTime() - dates[i].getTime();
+      var _dates;
+
+      var pEnd = (_dates = dates[i + 1]) != null ? _dates : addToDate(dates[i], 1, "day");
+      var periodMs = pEnd.getTime() - dates[i].getTime();
 
       if (periodMs > 0) {
-        const cursor = new Date(dates[i]);
+        var cursor = new Date(dates[i]);
         cursor.setHours(0, 0, 0, 0);
 
         while (cursor.getTime() < pEnd.getTime()) {
           if (isDayOff(cursor)) {
-            const ds = cursor.getTime() - dates[i].getTime();
-            const de = ds + 86400000;
-            const startFrac = Math.max(0, ds) / periodMs;
-            const endFrac = Math.min(periodMs, de) / periodMs;
-            const rw = (endFrac - startFrac) * columnWidth;
+            var ds = cursor.getTime() - dates[i].getTime();
+            var de = ds + 86400000;
+            var startFrac = Math.max(0, ds) / periodMs;
+            var endFrac = Math.min(periodMs, de) / periodMs;
+            var rw = (endFrac - startFrac) * columnWidth;
 
             if (rw > 0.5) {
               offDayRects.push(React__default.createElement("rect", {
-                key: `offday-${i}-${cursor.getTime()}`,
+                key: "offday-" + i + "-" + cursor.getTime(),
                 x: x + startFrac * columnWidth,
                 y: visibleStartY,
                 width: rw,
@@ -1420,10 +1529,10 @@ const GridBody = _ref => {
     }
   }
 
-  const isDayView = viewMode === exports.ViewMode.Day;
-  const isWeekView = viewMode === exports.ViewMode.Week;
-  const tickLines = dates.map((date, i) => {
-    let tickClass = styles$5.gridTick;
+  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.gridTickWeekStart : styles$5.gridTickDashed;
@@ -1432,7 +1541,7 @@ const GridBody = _ref => {
     }
 
     return React__default.createElement("line", {
-      key: `tick-${i}`,
+      key: "tick-" + i,
       x1: i * columnWidth,
       y1: visibleStartY,
       x2: i * columnWidth,
@@ -1440,9 +1549,9 @@ const GridBody = _ref => {
       className: tickClass
     });
   });
-  const rowBackgrounds = [];
-  const rowLines = [];
-  const rowOverlays = [];
+  var rowBackgrounds = [];
+  var rowLines = [];
+  var rowOverlays = [];
   rowLines.push(React__default.createElement("line", {
     key: "top-line",
     x1: 0,
@@ -1451,16 +1560,17 @@ const GridBody = _ref => {
     y2: visibleStartY,
     className: styles$5.gridRowLine
   }));
-  const showPerRowOffDays = viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter;
+  var showPerRowOffDays = viewMode !== exports.ViewMode.Month && viewMode !== exports.ViewMode.Quarter;
 
-  for (const vi of items) {
-    const task = tasks[vi.index];
+  for (var _iterator = _createForOfIteratorHelperLoose(items), _step; !(_step = _iterator()).done;) {
+    var vi = _step.value;
+    var task = tasks[vi.index];
     if (!task) break;
-    const y = vi.start;
-    const isMilestone = task.type === "milestone";
-    const rowClass = isMilestone ? styles$5.darkerGridRow : scheduleType === "lookAhead" ? styles$5.gridRowLookAhead : styles$5.gridRow;
+    var y = vi.start;
+    var isMilestone = task.type === "milestone";
+    var rowClass = isMilestone ? styles$5.darkerGridRow : scheduleType === "lookAhead" ? styles$5.gridRowLookAhead : styles$5.gridRow;
     rowBackgrounds.push(React__default.createElement("rect", {
-      key: `bg-${vi.key}`,
+      key: "bg-" + vi.key,
       x: 0,
       y: y,
       width: svgWidth,
@@ -1468,7 +1578,7 @@ const GridBody = _ref => {
       className: rowClass
     }));
     rowLines.push(React__default.createElement("line", {
-      key: `line-${vi.key}`,
+      key: "line-" + vi.key,
       x1: 0,
       y1: y + rowHeight,
       x2: svgWidth,
@@ -1477,47 +1587,57 @@ const GridBody = _ref => {
     }));
 
     if (showPerRowOffDays) {
-      const rowEven = vi.index % 2 === 1;
-      const rowFill = isMilestone ? "#e6e4e4" : scheduleType === "lookAhead" ? "#fff" : rowEven ? "#f5f5f5" : "#fff";
+      var rowEven = vi.index % 2 === 1;
+      var rowFill = isMilestone ? "#e6e4e4" : scheduleType === "lookAhead" ? "#fff" : rowEven ? "#f5f5f5" : "#fff";
       rowOverlays.push(React__default.createElement("rect", {
-        key: `row-clean-${vi.key}`,
+        key: "row-clean-" + vi.key,
         x: 0,
         y: y,
         width: svgWidth,
         height: rowHeight,
         fill: rowFill
       }));
-      const cal = task.calendar;
+      var cal = task.calendar;
 
       if (cal) {
-        for (let i = 0, x = 0; i < dates.length; i++, x += columnWidth) {
-          const pEnd = dates[i + 1] ?? addToDate(dates[i], 1, "day");
-          const periodMs = pEnd.getTime() - dates[i].getTime();
-          if (periodMs <= 0) continue;
-          const cursor = new Date(dates[i]);
-          cursor.setHours(0, 0, 0, 0);
-
-          while (cursor.getTime() < pEnd.getTime()) {
-            if (isOffDay(cursor, cal)) {
-              const ds = cursor.getTime() - dates[i].getTime();
-              const de = ds + 86400000;
-              const startFrac = Math.max(0, ds) / periodMs;
-              const endFrac = Math.min(periodMs, de) / periodMs;
-              const rw = (endFrac - startFrac) * columnWidth;
-
-              if (rw > 0.5) {
+        for (var _i = 0, _x = 0; _i < dates.length; _i++, _x += columnWidth) {
+          var _dates2;
+
+          var _pEnd = (_dates2 = dates[_i + 1]) != null ? _dates2 : addToDate(dates[_i], 1, "day");
+
+          var _periodMs = _pEnd.getTime() - dates[_i].getTime();
+
+          if (_periodMs <= 0) continue;
+
+          var _cursor = new Date(dates[_i]);
+
+          _cursor.setHours(0, 0, 0, 0);
+
+          while (_cursor.getTime() < _pEnd.getTime()) {
+            if (isOffDay(_cursor, cal)) {
+              var _ds = _cursor.getTime() - dates[_i].getTime();
+
+              var _de = _ds + 86400000;
+
+              var _startFrac = Math.max(0, _ds) / _periodMs;
+
+              var _endFrac = Math.min(_periodMs, _de) / _periodMs;
+
+              var _rw = (_endFrac - _startFrac) * columnWidth;
+
+              if (_rw > 0.5) {
                 rowOverlays.push(React__default.createElement("rect", {
-                  key: `row-offday-${vi.key}-${cursor.getTime()}`,
-                  x: rtl ? x + columnWidth - (startFrac * columnWidth + rw) : x + startFrac * columnWidth,
+                  key: "row-offday-" + vi.key + "-" + _cursor.getTime(),
+                  x: rtl ? _x + columnWidth - (_startFrac * columnWidth + _rw) : _x + _startFrac * columnWidth,
                   y: y,
-                  width: rw,
+                  width: _rw,
                   height: rowHeight,
                   fill: weekendColor
                 }));
               }
             }
 
-            cursor.setDate(cursor.getDate() + 1);
+            _cursor.setDate(_cursor.getDate() + 1);
           }
         }
       }
@@ -1541,7 +1661,7 @@ const GridBody = _ref => {
   }, todayRects));
 };
 
-const Grid = props => {
+var Grid = function Grid(props) {
   return React__default.createElement("g", {
     className: "grid"
   }, React__default.createElement(GridBody, Object.assign({}, props)));
@@ -1549,17 +1669,16 @@ const Grid = props => {
 
 var styles$6 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTickSolid":"_2X-yN","calendarTickDashed":"_2BaXZ","calendarOffDayHeader":"_24p-y","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
 
-const TopPartOfCalendar = _ref => {
-  let {
-    value,
-    x1Line,
-    y1Line,
-    y2Line,
-    xText,
-    yText,
-    textAnchor = "middle"
-  } = _ref;
-  const textAnchorClass = textAnchor === "start" ? styles$6.textAnchorStart : textAnchor === "middle" ? styles$6.textAnchorMiddle : styles$6.textAnchorEnd;
+var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
+  var value = _ref.value,
+      x1Line = _ref.x1Line,
+      y1Line = _ref.y1Line,
+      y2Line = _ref.y2Line,
+      xText = _ref.xText,
+      yText = _ref.yText,
+      _ref$textAnchor = _ref.textAnchor,
+      textAnchor = _ref$textAnchor === void 0 ? "middle" : _ref$textAnchor;
+  var textAnchorClass = textAnchor === "start" ? styles$6.textAnchorStart : textAnchor === "middle" ? styles$6.textAnchorMiddle : styles$6.textAnchorEnd;
   return React__default.createElement("g", {
     className: "calendarTop"
   }, React__default.createElement("line", {
@@ -1573,41 +1692,41 @@ const TopPartOfCalendar = _ref => {
     key: value + "text",
     y: yText,
     x: xText,
-    className: `${styles$6.calendarTopText} ${textAnchorClass}`
+    className: styles$6.calendarTopText + " " + textAnchorClass
   }, value));
 };
 
-const Calendar = _ref => {
-  let {
-    dateSetup,
-    locale,
-    viewMode,
-    rtl,
-    headerHeight,
-    columnWidth,
-    fontFamily,
-    fontSize,
-    projectCalendar,
-    weekendColor
-  } = _ref;
-
-  const isDayOff = date => {
+var Calendar = function Calendar(_ref) {
+  var dateSetup = _ref.dateSetup,
+      locale = _ref.locale,
+      viewMode = _ref.viewMode,
+      rtl = _ref.rtl,
+      headerHeight = _ref.headerHeight,
+      columnWidth = _ref.columnWidth,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      projectCalendar = _ref.projectCalendar,
+      weekendColor = _ref.weekendColor;
+
+  var isDayOff = function isDayOff(date) {
     if (projectCalendar) return isOffDay(date, projectCalendar);
     return false;
   };
 
-  const shortMonth = date => date.toLocaleString(locale, {
-    month: "short"
-  });
+  var shortMonth = function shortMonth(date) {
+    return date.toLocaleString(locale, {
+      month: "short"
+    });
+  };
 
-  const getCalendarValuesForYear = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const topDefaultHeight = headerHeight * 0.5;
+  var getCalendarValuesForYear = function getCalendarValuesForYear() {
+    var topValues = [];
+    var bottomValues = [];
+    var topDefaultHeight = headerHeight * 0.5;
 
-    for (let i = 0; i < dateSetup.dates.length; i++) {
-      const date = dateSetup.dates[i];
-      const bottomValue = date.getFullYear();
+    for (var i = 0; i < dateSetup.dates.length; i++) {
+      var date = dateSetup.dates[i];
+      var bottomValue = date.getFullYear();
       bottomValues.push(React__default.createElement("text", {
         key: date.getFullYear(),
         y: headerHeight * 0.8,
@@ -1616,8 +1735,8 @@ const Calendar = _ref => {
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        const topValue = date.getFullYear().toString();
-        let xText;
+        var topValue = date.getFullYear().toString();
+        var xText = void 0;
 
         if (rtl) {
           xText = (6 + i + date.getFullYear() + 1) * columnWidth;
@@ -1640,35 +1759,37 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForQuarter = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const offDayRects = [];
-    const quarterStart = (projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) ?? 0;
-    const rowH = headerHeight / 3;
+  var getCalendarValuesForQuarter = function getCalendarValuesForQuarter() {
+    var _projectCalendar$quar;
 
-    for (let i = 0; i < dateSetup.dates.length; i++) {
-      const date = dateSetup.dates[i];
-      const qNum = getQuarterNumber(date, quarterStart);
+    var topValues = [];
+    var bottomValues = [];
+    var offDayRects = [];
+    var quarterStart = (_projectCalendar$quar = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar : 0;
+    var rowH = headerHeight / 3;
 
-      for (let m = 0; m < 3; m++) {
-        const monthDate = addToDate(date, m, "month");
+    for (var i = 0; i < dateSetup.dates.length; i++) {
+      var date = dateSetup.dates[i];
+      var qNum = getQuarterNumber(date, quarterStart);
+
+      for (var m = 0; m < 3; m++) {
+        var monthDate = addToDate(date, m, "month");
         bottomValues.push(React__default.createElement("text", {
-          key: `qmonth-${i}-${m}`,
+          key: "qmonth-" + i + "-" + m,
           y: headerHeight * 0.9,
           x: columnWidth * i + columnWidth * (m * 2 + 1) / 6,
-          className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`
+          className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
         }, shortMonth(monthDate)));
       }
 
       bottomValues.push(React__default.createElement("text", {
-        key: `qlabel-${i}`,
+        key: "qlabel-" + i,
         y: rowH * 1.6,
         x: columnWidth * i + columnWidth * 0.5,
-        className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`
-      }, `Qtr ${qNum}`));
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
+      }, "Qtr " + qNum));
       bottomValues.push(React__default.createElement("line", {
-        key: `qsep-${i}`,
+        key: "qsep-" + i,
         x1: columnWidth * i,
         y1: rowH,
         x2: columnWidth * i,
@@ -1696,14 +1817,14 @@ const Calendar = _ref => {
       }
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        const topValue = date.getFullYear().toString();
-        let span = 0;
+        var topValue = date.getFullYear().toString();
+        var span = 0;
 
-        for (let j = i; j < dateSetup.dates.length && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
+        for (var j = i; j < dateSetup.dates.length && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
           span++;
         }
 
-        const xText = columnWidth * i + columnWidth * span / 2;
+        var xText = columnWidth * i + columnWidth * span / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + i,
           value: topValue,
@@ -1720,36 +1841,38 @@ const Calendar = _ref => {
     return [topValues, bottomValues, offDayRects];
   };
 
-  const getCalendarValuesForMonth = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const offDayRects = [];
-    const topDefaultHeight = headerHeight * 0.5;
-    const quarterStart = (projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) ?? 0;
+  var getCalendarValuesForMonth = function getCalendarValuesForMonth() {
+    var _projectCalendar$quar2;
+
+    var topValues = [];
+    var bottomValues = [];
+    var offDayRects = [];
+    var topDefaultHeight = headerHeight * 0.5;
+    var quarterStart = (_projectCalendar$quar2 = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar2 : 0;
 
-    for (let i = 0; i < dateSetup.dates.length; i++) {
-      const date = dateSetup.dates[i];
-      const bottomValue = shortMonth(date);
+    for (var i = 0; i < dateSetup.dates.length; i++) {
+      var date = dateSetup.dates[i];
+      var bottomValue = shortMonth(date);
       bottomValues.push(React__default.createElement("text", {
         key: bottomValue + date.getFullYear() + i,
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
       }, bottomValue));
-      const qNum = getQuarterNumber(date, quarterStart);
-      const prevDate = i > 0 ? dateSetup.dates[i - 1] : null;
-      const prevQNum = prevDate ? getQuarterNumber(prevDate, quarterStart) : -1;
-      const isNewQuarter = i === 0 || qNum !== prevQNum || date.getFullYear() !== (prevDate ? prevDate.getFullYear() : -1);
+      var qNum = getQuarterNumber(date, quarterStart);
+      var prevDate = i > 0 ? dateSetup.dates[i - 1] : null;
+      var prevQNum = prevDate ? getQuarterNumber(prevDate, quarterStart) : -1;
+      var isNewQuarter = i === 0 || qNum !== prevQNum || date.getFullYear() !== (prevDate ? prevDate.getFullYear() : -1);
 
       if (isNewQuarter) {
-        const topValue = `Qtr ${qNum}, ${date.getFullYear()}`;
-        let span = 0;
+        var topValue = "Qtr " + qNum + ", " + date.getFullYear();
+        var span = 0;
 
-        for (let j = i; j < dateSetup.dates.length && getQuarterNumber(dateSetup.dates[j], quarterStart) === qNum && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
+        for (var j = i; j < dateSetup.dates.length && getQuarterNumber(dateSetup.dates[j], quarterStart) === qNum && dateSetup.dates[j].getFullYear() === date.getFullYear(); j++) {
           span++;
         }
 
-        const xText = rtl ? columnWidth * i + columnWidth * span * 0.5 + columnWidth : columnWidth * i + columnWidth * span / 2;
+        var xText = rtl ? columnWidth * i + columnWidth * span * 0.5 + columnWidth : columnWidth * i + columnWidth * span / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + i,
           value: topValue,
@@ -1763,7 +1886,7 @@ const Calendar = _ref => {
 
         if (i > 0) {
           bottomValues.push(React__default.createElement("line", {
-            key: `qbound-${i}`,
+            key: "qbound-" + i,
             x1: columnWidth * i,
             y1: topDefaultHeight,
             x2: columnWidth * i,
@@ -1777,28 +1900,28 @@ const Calendar = _ref => {
     return [topValues, bottomValues, offDayRects];
   };
 
-  const getCalendarValuesForWeek = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const offDayRects = [];
-    let weeksCount = 1;
-    const topDefaultHeight = headerHeight * 0.5;
-    const dates = dateSetup.dates;
+  var getCalendarValuesForWeek = function getCalendarValuesForWeek() {
+    var topValues = [];
+    var bottomValues = [];
+    var offDayRects = [];
+    var weeksCount = 1;
+    var topDefaultHeight = headerHeight * 0.5;
+    var dates = dateSetup.dates;
 
-    for (let i = dates.length - 1; i >= 0; i--) {
-      const date = dates[i];
-      let topValue = "";
+    for (var i = dates.length - 1; i >= 0; i--) {
+      var date = dates[i];
+      var topValue = "";
 
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
-        topValue = `${shortMonth(date)} ${date.getFullYear()}`;
+        topValue = shortMonth(date) + " " + date.getFullYear();
       }
 
-      const bottomValue = date.getDate().toString();
+      var bottomValue = date.getDate().toString();
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: `${styles$6.calendarTopText} ${styles$6.textAnchorStart}`
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorStart
       }, bottomValue));
 
       if (topValue) {
@@ -1824,21 +1947,23 @@ const Calendar = _ref => {
     return [topValues, bottomValues, offDayRects];
   };
 
-  const getCalendarValuesForDay = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const offDayRects = [];
-    const tickLines = [];
-    const topDefaultHeight = headerHeight * 0.5;
-    const dates = dateSetup.dates;
-    const weekStartDay = (projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) ?? 1;
+  var getCalendarValuesForDay = function getCalendarValuesForDay() {
+    var _projectCalendar$week;
 
-    for (let i = 0; i < dates.length; i++) {
-      const date = dates[i];
+    var topValues = [];
+    var bottomValues = [];
+    var offDayRects = [];
+    var tickLines = [];
+    var topDefaultHeight = headerHeight * 0.5;
+    var dates = dateSetup.dates;
+    var weekStartDay = (_projectCalendar$week = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.week_start) != null ? _projectCalendar$week : 1;
+
+    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}`,
+          key: "offday-header-" + i,
           x: columnWidth * i,
           y: topDefaultHeight,
           width: columnWidth,
@@ -1847,25 +1972,25 @@ const Calendar = _ref => {
         }));
       }
 
-      const isWeekStart = date.getDay() === weekStartDay;
+      var isWeekStart = date.getDay() === weekStartDay;
       tickLines.push(React__default.createElement("line", {
-        key: `tick-day-${i}`,
+        key: "tick-day-" + i,
         x1: columnWidth * i,
         y1: topDefaultHeight,
         x2: columnWidth * i,
         y2: headerHeight,
         className: isWeekStart ? styles$6.calendarTickSolid : styles$6.calendarTickDashed
       }));
-      const bottomValue = columnWidth > 55 ? `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate()}` : `${getLocalDayOfWeek(date, locale, "narrow")},${date.getDate()}`;
+      var bottomValue = columnWidth > 55 ? getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() : getLocalDayOfWeek(date, locale, "narrow") + "," + date.getDate();
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle
       }, bottomValue));
 
       if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
-        const topValue = `${shortMonth(date)} ${date.getFullYear()}`;
+        var topValue = shortMonth(date) + " " + date.getFullYear();
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + i,
           value: topValue,
@@ -1878,10 +2003,11 @@ const Calendar = _ref => {
       }
 
       if (i + 1 === dates.length) {
-        const topValue = `${shortMonth(date)} ${date.getFullYear()}`;
+        var _topValue = shortMonth(date) + " " + date.getFullYear();
+
         topValues.push(React__default.createElement(TopPartOfCalendar, {
-          key: topValue + "last",
-          value: topValue,
+          key: _topValue + "last",
+          value: _topValue,
           x1Line: columnWidth * (i + 1),
           y1Line: 0,
           y2Line: topDefaultHeight,
@@ -1894,28 +2020,28 @@ const Calendar = _ref => {
     return [topValues, bottomValues, offDayRects, tickLines];
   };
 
-  const getCalendarValuesForPartOfDay = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
-    const topDefaultHeight = headerHeight * 0.5;
-    const dates = dateSetup.dates;
+  var getCalendarValuesForPartOfDay = function getCalendarValuesForPartOfDay() {
+    var topValues = [];
+    var bottomValues = [];
+    var ticks = viewMode === exports.ViewMode.HalfDay ? 2 : 4;
+    var topDefaultHeight = headerHeight * 0.5;
+    var dates = dateSetup.dates;
 
-    for (let i = 0; i < dates.length; i++) {
-      const date = dates[i];
-      const bottomValue = getCachedDateTimeFormat(locale, {
+    for (var i = 0; i < dates.length; i++) {
+      var date = dates[i];
+      var bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: `${styles$6.calendarTopText} ${styles$6.textAnchorMiddle}`,
+        className: styles$6.calendarTopText + " " + styles$6.textAnchorMiddle,
         fontFamily: fontFamily
       }, bottomValue));
 
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        const topValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate()} ${shortMonth(date)}`;
+        var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + shortMonth(date);
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -1931,15 +2057,15 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  const getCalendarValuesForHour = () => {
-    const topValues = [];
-    const bottomValues = [];
-    const topDefaultHeight = headerHeight * 0.5;
-    const dates = dateSetup.dates;
+  var getCalendarValuesForHour = function getCalendarValuesForHour() {
+    var topValues = [];
+    var bottomValues = [];
+    var topDefaultHeight = headerHeight * 0.5;
+    var dates = dateSetup.dates;
 
-    for (let i = 0; i < dates.length; i++) {
-      const date = dates[i];
-      const bottomValue = getCachedDateTimeFormat(locale, {
+    for (var i = 0; i < dates.length; i++) {
+      var date = dates[i];
+      var bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React__default.createElement("text", {
@@ -1951,9 +2077,9 @@ const Calendar = _ref => {
       }, bottomValue));
 
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
-        const displayDate = dates[i - 1];
-        const topValue = `${getLocalDayOfWeek(displayDate, locale, "long")}, ${displayDate.getDate()} ${shortMonth(displayDate)}`;
-        const topPosition = (date.getHours() - 24) / 2;
+        var displayDate = dates[i - 1];
+        var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + shortMonth(displayDate);
+        var topPosition = (date.getHours() - 24) / 2;
         topValues.push(React__default.createElement(TopPartOfCalendar, {
           key: topValue + displayDate.getFullYear(),
           value: topValue,
@@ -1969,19 +2095,22 @@ const Calendar = _ref => {
     return [topValues, bottomValues];
   };
 
-  let topValues = [];
-  let bottomValues = [];
-  let extraValues = [];
-  let tickLines = [];
+  var topValues = [];
+  var bottomValues = [];
+  var extraValues = [];
+  var tickLines = [];
 
   switch (dateSetup.viewMode) {
     case exports.ViewMode.Year:
-      [topValues, bottomValues] = getCalendarValuesForYear();
+      var _getCalendarValuesFor = getCalendarValuesForYear();
+
+      topValues = _getCalendarValuesFor[0];
+      bottomValues = _getCalendarValuesFor[1];
       break;
 
     case exports.ViewMode.Quarter:
       {
-        const r = getCalendarValuesForQuarter();
+        var r = getCalendarValuesForQuarter();
         topValues = r[0];
         bottomValues = r[1];
         extraValues = r[2] || [];
@@ -1990,25 +2119,27 @@ const Calendar = _ref => {
 
     case exports.ViewMode.Month:
       {
-        const r = getCalendarValuesForMonth();
-        topValues = r[0];
-        bottomValues = r[1];
-        extraValues = r[2] || [];
+        var _r = getCalendarValuesForMonth();
+
+        topValues = _r[0];
+        bottomValues = _r[1];
+        extraValues = _r[2] || [];
         break;
       }
 
     case exports.ViewMode.Week:
       {
-        const r = getCalendarValuesForWeek();
-        topValues = r[0];
-        bottomValues = r[1];
-        extraValues = r[2] || [];
+        var _r2 = getCalendarValuesForWeek();
+
+        topValues = _r2[0];
+        bottomValues = _r2[1];
+        extraValues = _r2[2] || [];
         break;
       }
 
     case exports.ViewMode.Day:
       {
-        const result = getCalendarValuesForDay();
+        var result = getCalendarValuesForDay();
         topValues = result[0];
         bottomValues = result[1];
         extraValues = result[2];
@@ -2018,11 +2149,17 @@ const Calendar = _ref => {
 
     case exports.ViewMode.QuarterDay:
     case exports.ViewMode.HalfDay:
-      [topValues, bottomValues] = getCalendarValuesForPartOfDay();
+      var _getCalendarValuesFor2 = getCalendarValuesForPartOfDay();
+
+      topValues = _getCalendarValuesFor2[0];
+      bottomValues = _getCalendarValuesFor2[1];
       break;
 
     case exports.ViewMode.Hour:
-      [topValues, bottomValues] = getCalendarValuesForHour();
+      var _getCalendarValuesFor3 = getCalendarValuesForHour();
+
+      topValues = _getCalendarValuesFor3[0];
+      bottomValues = _getCalendarValuesFor3[1];
   }
 
   return React__default.createElement("g", {
@@ -2058,17 +2195,19 @@ function _catch(body, recover) {
 	return result;
 }
 
-const Arrow = _ref => {
-  let {
-    taskFrom,
-    taskTo,
-    rowHeight,
-    taskHeight,
-    arrowIndent,
-    arrowColor,
-    dependencyType
-  } = _ref;
-  let [path, trianglePoints] = drawPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType);
+var Arrow = function Arrow(_ref) {
+  var taskFrom = _ref.taskFrom,
+      taskTo = _ref.taskTo,
+      rowHeight = _ref.rowHeight,
+      taskHeight = _ref.taskHeight,
+      arrowIndent = _ref.arrowIndent,
+      arrowColor = _ref.arrowColor,
+      dependencyType = _ref.dependencyType;
+
+  var _drawPathAndTriangle = drawPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType),
+      path = _drawPathAndTriangle[0],
+      trianglePoints = _drawPathAndTriangle[1];
+
   return React__default.createElement("g", {
     className: "arrow"
   }, React__default.createElement("path", {
@@ -2082,40 +2221,40 @@ const Arrow = _ref => {
   }));
 };
 
-const drawPathAndTriangle = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType) => {
-  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
-  const taskToEndY = taskTo.y + taskHeight / 2;
-  const verticalOffset = indexCompare * (rowHeight / 2);
+var drawPathAndTriangle = function drawPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent, dependencyType) {
+  var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+  var taskToEndY = taskTo.y + taskHeight / 2;
+  var verticalOffset = indexCompare * (rowHeight / 2);
 
-  const minX = t => {
+  var minX = function minX(t) {
     if (t.plannedSegments && t.plannedSegments.length > 0) {
-      const p = t.plannedSegments[0].x1;
+      var p = t.plannedSegments[0].x1;
       if (t.actualSegments && t.actualSegments.length > 0) return Math.min(p, t.actualSegments[0].x1);
       return p;
     }
 
     if (t.actualSegments && t.actualSegments.length > 0) return t.actualSegments[0].x1;
-    const candidates = [];
+    var candidates = [];
     if (t.x2 > t.x1) candidates.push(t.x1);
     if (t.actualx2 > t.actualx1) candidates.push(t.actualx1);
-    return candidates.length > 0 ? Math.min(...candidates) : 0;
+    return candidates.length > 0 ? Math.min.apply(Math, candidates) : 0;
   };
 
-  const maxX = t => {
+  var maxX = function maxX(t) {
     if (t.plannedSegments && t.plannedSegments.length > 0) {
-      const p = t.plannedSegments[t.plannedSegments.length - 1].x2;
+      var p = t.plannedSegments[t.plannedSegments.length - 1].x2;
       if (t.actualSegments && t.actualSegments.length > 0) return Math.max(p, t.actualSegments[t.actualSegments.length - 1].x2);
       return p;
     }
 
     if (t.actualSegments && t.actualSegments.length > 0) return t.actualSegments[t.actualSegments.length - 1].x2;
-    const candidates = [];
+    var candidates = [];
     if (t.x2 > t.x1) candidates.push(t.x2);
     if (t.actualx2 > t.actualx1) candidates.push(t.actualx2);
-    return candidates.length > 0 ? Math.max(...candidates) : 0;
+    return candidates.length > 0 ? Math.max.apply(Math, candidates) : 0;
   };
 
-  let fromPoint, toPoint;
+  var fromPoint, toPoint;
 
   switch (dependencyType) {
     case "SS":
@@ -2139,51 +2278,35 @@ const drawPathAndTriangle = (taskFrom, taskTo, rowHeight, taskHeight, arrowInden
       break;
   }
 
-  const arrowPoints = function (x, y, right) {
+  var arrowPoints = function arrowPoints(x, y, right) {
     if (right === void 0) {
       right = true;
     }
 
-    return right ? `${x},${y} ${x - 5},${y - 5} ${x - 5},${y + 5}` : `${x},${y} ${x + 5},${y - 5} ${x + 5},${y + 5}`;
+    return right ? x + "," + y + " " + (x - 5) + "," + (y - 5) + " " + (x - 5) + "," + (y + 5) : x + "," + y + " " + (x + 5) + "," + (y - 5) + " " + (x + 5) + "," + (y + 5);
   };
 
-  let path;
-  let trianglePoints;
+  var path;
+  var trianglePoints;
 
   switch (dependencyType) {
     case "SS":
-      path = `M ${fromPoint} ${taskFrom.y + taskHeight / 2}
-              H ${fromPoint + Math.min(toPoint - fromPoint, 0) - 2 * arrowIndent}
-              V ${taskToEndY}
-              H ${toPoint - 5}`;
+      path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n              H " + (fromPoint + Math.min(toPoint - fromPoint, 0) - 2 * arrowIndent) + "\n              V " + taskToEndY + "\n              H " + (toPoint - 5);
       trianglePoints = arrowPoints(toPoint, taskToEndY, true);
       break;
 
     case "SF":
-      path = `M ${fromPoint} ${taskFrom.y + taskHeight / 2}
-              H ${fromPoint - 2 * arrowIndent}
-              V ${taskFrom.y + taskHeight / 2 + verticalOffset}
-                ${fromPoint - toPoint > 4 * arrowIndent ? "" : `H ${toPoint + 2 * arrowIndent}`}
-              V ${taskToEndY}
-              H ${toPoint + 5}`;
+      path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n              H " + (fromPoint - 2 * arrowIndent) + "\n              V " + (taskFrom.y + taskHeight / 2 + verticalOffset) + "\n                " + (fromPoint - toPoint > 4 * arrowIndent ? "" : "H " + (toPoint + 2 * arrowIndent)) + "\n              V " + taskToEndY + "\n              H " + (toPoint + 5);
       trianglePoints = arrowPoints(toPoint, taskToEndY, false);
       break;
 
     case "FS":
-      path = `M ${fromPoint} ${taskFrom.y + taskHeight / 2}
-              H ${fromPoint + 2 * arrowIndent}
-              V ${taskFrom.y + taskHeight / 2 + verticalOffset}
-                ${toPoint - fromPoint > 4 * arrowIndent ? "" : `H ${toPoint - 2 * arrowIndent}`}
-              V ${taskToEndY}
-              H ${toPoint - 5}`;
+      path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n              H " + (fromPoint + 2 * arrowIndent) + "\n              V " + (taskFrom.y + taskHeight / 2 + verticalOffset) + "\n                " + (toPoint - fromPoint > 4 * arrowIndent ? "" : "H " + (toPoint - 2 * arrowIndent)) + "\n              V " + taskToEndY + "\n              H " + (toPoint - 5);
       trianglePoints = arrowPoints(toPoint, taskToEndY, true);
       break;
 
     case "FF":
-      path = `M ${fromPoint} ${taskFrom.y + taskHeight / 2}
-              H ${fromPoint + Math.max(toPoint - fromPoint, 0) + 2 * arrowIndent}
-              V ${taskToEndY}
-              H ${toPoint + 5}`;
+      path = "M " + fromPoint + " " + (taskFrom.y + taskHeight / 2) + "\n              H " + (fromPoint + Math.max(toPoint - fromPoint, 0) + 2 * arrowIndent) + "\n              V " + taskToEndY + "\n              H " + (toPoint + 5);
       trianglePoints = arrowPoints(toPoint, taskToEndY, false);
       break;
   }
@@ -2195,25 +2318,25 @@ var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, ro
   var barTasks = tasks.map(function (t, i) {
     return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
   });
+  var indexById = new Map();
+
+  for (var i = 0; i < barTasks.length; i++) {
+    indexById.set(barTasks[i].id, i);
+  }
+
   barTasks = barTasks.map(function (task) {
     var dependencies = task.dependencies || [];
 
-    var _loop = function _loop(j) {
-      var dependence = barTasks.findIndex(function (value) {
-        return value.id === dependencies[j].id;
-      });
+    for (var j = 0; j < dependencies.length; j++) {
+      var dependence = indexById.get(dependencies[j].id);
 
-      if (dependence !== -1 && task.start.getTime() > 0 && task.end.getTime() > 0) {
+      if (dependence !== undefined && task.start.getTime() > 0 && task.end.getTime() > 0) {
         var barchild = _extends({}, task, {
           dependencyType: dependencies[j].type
         });
 
         barTasks[dependence].barChildren.push(barchild);
       }
-    };
-
-    for (var j = 0; j < dependencies.length; j++) {
-      _loop(j);
     }
 
     return task;
@@ -2371,10 +2494,33 @@ var convertToMilestone = function convertToMilestone(task, index, dates, columnW
   });
 };
 
+var dateTimesCache = new WeakMap();
+
+var getDateTimes = function getDateTimes(dates) {
+  var times = dateTimesCache.get(dates);
+
+  if (!times) {
+    times = dates.map(function (d) {
+      return d.getTime();
+    });
+    dateTimesCache.set(dates, times);
+  }
+
+  return times;
+};
+
 var taskXCoordinate = function taskXCoordinate(xDate, dates, columnWidth) {
-  var index = dates.findIndex(function (d) {
-    return d.getTime() >= xDate.getTime();
-  }) - 1;
+  var times = getDateTimes(dates);
+  var target = xDate.getTime();
+  var lo = 0;
+  var hi = times.length - 1;
+
+  while (lo <= hi) {
+    var mid = lo + hi >> 1;
+    if (times[mid] >= target) hi = mid - 1;else lo = mid + 1;
+  }
+
+  var index = (lo === times.length ? -1 : lo) - 1;
 
   if (index < 0) {
     if (dates[dates.length - 1].getTime() <= xDate.getTime()) {
@@ -2686,59 +2832,60 @@ var sortTasks = function sortTasks(taskA, taskB) {
   }
 };
 
-const BarDisplay = _ref => {
-  let {
-    x,
-    y,
-    type,
-    width,
-    height,
-    isSelected,
-    progressX,
-    progressWidth,
-    barCornerRadius,
-    styles,
-    segments,
-    onMouseDown
-  } = _ref;
-
-  const getProcessColor = () => {
+var BarDisplay = function BarDisplay(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      type = _ref.type,
+      width = _ref.width,
+      height = _ref.height,
+      isSelected = _ref.isSelected,
+      progressX = _ref.progressX,
+      progressWidth = _ref.progressWidth,
+      barCornerRadius = _ref.barCornerRadius,
+      styles = _ref.styles,
+      segments = _ref.segments,
+      onMouseDown = _ref.onMouseDown;
+
+  var getProcessColor = function getProcessColor() {
     return isSelected ? styles.progressSelectedColor : styles.progressColor;
   };
 
-  const getBarColor = () => {
+  var getBarColor = function getBarColor() {
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
 
   if (type === "planned") {
     if (segments && segments.length > 0) {
-      const totalWidth = width;
+      var totalWidth = width;
       return React__default.createElement("g", {
         onMouseDown: onMouseDown
-      }, segments.map((seg, idx) => React__default.createElement("rect", {
-        key: `seg-${idx}`,
-        x: seg.x1,
-        width: seg.x2 - seg.x1,
-        y: y,
-        height: height,
-        ry: barCornerRadius,
-        rx: barCornerRadius,
-        fill: getBarColor(),
-        strokeWidth: 2,
-        stroke: styles.criticalPathColor
-      })), progressWidth > 0 && (() => {
-        const rects = [];
-        let remaining = progressWidth;
-
-        for (const seg of segments) {
+      }, segments.map(function (seg, idx) {
+        return React__default.createElement("rect", {
+          key: "seg-" + idx,
+          x: seg.x1,
+          width: seg.x2 - seg.x1,
+          y: y,
+          height: height,
+          ry: barCornerRadius,
+          rx: barCornerRadius,
+          fill: getBarColor(),
+          strokeWidth: 2,
+          stroke: styles.criticalPathColor
+        });
+      }), progressWidth > 0 && function () {
+        var rects = [];
+        var remaining = progressWidth;
+
+        for (var _iterator = _createForOfIteratorHelperLoose(segments), _step; !(_step = _iterator()).done;) {
+          var seg = _step.value;
           if (remaining <= 0) break;
-          const segW = seg.x2 - seg.x1;
-          const ratio = totalWidth > 0 ? segW / totalWidth : 0;
-          const pw = Math.min(remaining, progressWidth * ratio);
+          var segW = seg.x2 - seg.x1;
+          var ratio = totalWidth > 0 ? segW / totalWidth : 0;
+          var pw = Math.min(remaining, progressWidth * ratio);
 
           if (pw > 0) {
             rects.push(React__default.createElement("rect", {
-              key: `prog-${seg.x1}`,
+              key: "prog-" + seg.x1,
               x: seg.x1,
               width: pw,
               y: y,
@@ -2752,7 +2899,7 @@ const BarDisplay = _ref => {
         }
 
         return rects;
-      })());
+      }());
     }
 
     return React__default.createElement("g", {
@@ -2780,16 +2927,18 @@ const BarDisplay = _ref => {
     if (segments && segments.length > 0) {
       return React__default.createElement("g", {
         onMouseDown: onMouseDown
-      }, segments.map((seg, idx) => React__default.createElement("rect", {
-        key: `aseg-${idx}`,
-        x: seg.x1,
-        width: seg.x2 - seg.x1,
-        y: y,
-        height: height,
-        ry: barCornerRadius,
-        rx: barCornerRadius,
-        fill: styles.taskProgressColor
-      })), React__default.createElement("rect", {
+      }, segments.map(function (seg, idx) {
+        return React__default.createElement("rect", {
+          key: "aseg-" + idx,
+          x: seg.x1,
+          width: seg.x2 - seg.x1,
+          y: y,
+          height: height,
+          ry: barCornerRadius,
+          rx: barCornerRadius,
+          fill: styles.taskProgressColor
+        });
+      }), React__default.createElement("rect", {
         x: progressX,
         width: progressWidth,
         y: y,
@@ -2824,15 +2973,13 @@ const BarDisplay = _ref => {
 
 var styles$7 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
 
-const BarDateHandle = _ref => {
-  let {
-    x,
-    y,
-    width,
-    height,
-    barCornerRadius,
-    onMouseDown
-  } = _ref;
+var BarDateHandle = function BarDateHandle(_ref) {
+  var x = _ref.x,
+      y = _ref.y,
+      width = _ref.width,
+      height = _ref.height,
+      barCornerRadius = _ref.barCornerRadius,
+      onMouseDown = _ref.onMouseDown;
   return React__default.createElement("rect", {
     x: x,
     y: y,
@@ -2845,28 +2992,28 @@ const BarDateHandle = _ref => {
   });
 };
 
-const BarProgressHandle = _ref => {
+var BarProgressHandle = function BarProgressHandle(_ref) {
+  _objectDestructuringEmpty(_ref);
+
   return React__default.createElement("div", null);
 };
 
-const Bar = _ref => {
-  let {
-    task,
-    isProgressChangeable,
-    isDateChangeable,
-    rtl,
-    type,
-    onEventStart,
-    isSelected
-  } = _ref;
-  const progressPoint = getProgressPoint(+!rtl * task.progressWidth + task.progressX, task.y, task.height);
-  const handleHeight = task.height / 2 - 1;
-  const plannedSegs = task.plannedSegments;
-  const plannedLeftHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[0].x1 : task.x1;
-  const plannedRightHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[plannedSegs.length - 1].x2 : task.x2;
-  const actualSegs = task.actualSegments;
-  const actualLeftHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[0].x1 : task.actualx1;
-  const actualRightHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[actualSegs.length - 1].x2 : task.actualx2;
+var Bar = function Bar(_ref) {
+  var task = _ref.task,
+      isProgressChangeable = _ref.isProgressChangeable,
+      isDateChangeable = _ref.isDateChangeable,
+      rtl = _ref.rtl,
+      type = _ref.type,
+      onEventStart = _ref.onEventStart,
+      isSelected = _ref.isSelected;
+  var progressPoint = getProgressPoint(+!rtl * task.progressWidth + task.progressX, task.y, task.height);
+  var handleHeight = task.height / 2 - 1;
+  var plannedSegs = task.plannedSegments;
+  var plannedLeftHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[0].x1 : task.x1;
+  var plannedRightHandleX = plannedSegs !== null && plannedSegs !== void 0 && plannedSegs.length ? plannedSegs[plannedSegs.length - 1].x2 : task.x2;
+  var actualSegs = task.actualSegments;
+  var actualLeftHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[0].x1 : task.actualx1;
+  var actualRightHandleX = actualSegs !== null && actualSegs !== void 0 && actualSegs.length ? actualSegs[actualSegs.length - 1].x2 : task.actualx2;
 
   if (type == "planned") {
     if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0 && task.x2 - task.x1 >= 0) return React__default.createElement("g", {
@@ -2892,7 +3039,7 @@ const Bar = _ref => {
       styles: task.styles,
       isSelected: isSelected,
       segments: task.plannedSegments,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         isDateChangeable && onEventStart("move", task, e, "planned");
       }
     }), React__default.createElement("g", {
@@ -2903,7 +3050,7 @@ const Bar = _ref => {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("start", task, e, "planned");
       }
     }), React__default.createElement(BarDateHandle, {
@@ -2912,12 +3059,12 @@ const Bar = _ref => {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("end", task, e, "planned");
       }
     })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("progress", task, e, "planned");
       }
     })));else return React__default.createElement("g", {
@@ -2948,7 +3095,7 @@ const Bar = _ref => {
       styles: task.styles,
       isSelected: isSelected,
       segments: task.actualSegments,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         isDateChangeable && onEventStart("move", task, e, "actual");
       }
     }), React__default.createElement("g", {
@@ -2959,7 +3106,7 @@ const Bar = _ref => {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("start", task, e, "actual");
       }
     }), React__default.createElement(BarDateHandle, {
@@ -2968,12 +3115,12 @@ const Bar = _ref => {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("end", task, e, "actual");
       }
     })), isProgressChangeable && React__default.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: e => {
+      onMouseDown: function onMouseDown(e) {
         onEventStart("progress", task, e, "actual");
       }
     })));
@@ -2985,16 +3132,14 @@ const Bar = _ref => {
   }
 };
 
-const BarSmall = _ref => {
-  let {
-    task,
-    type,
-    isProgressChangeable,
-    isDateChangeable,
-    onEventStart,
-    isSelected
-  } = _ref;
-  const progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
+var BarSmall = function BarSmall(_ref) {
+  var task = _ref.task,
+      type = _ref.type,
+      isProgressChangeable = _ref.isProgressChangeable,
+      isDateChangeable = _ref.isDateChangeable,
+      onEventStart = _ref.onEventStart,
+      isSelected = _ref.isSelected;
+  var progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
   return React__default.createElement("g", {
     className: styles$7.barWrapper,
     tabIndex: 0
@@ -3011,14 +3156,14 @@ const BarSmall = _ref => {
     barCornerRadius: task.barCornerRadius,
     styles: task.styles,
     isSelected: isSelected,
-    onMouseDown: e => {
+    onMouseDown: function onMouseDown(e) {
       isDateChangeable && onEventStart("move", task, e);
     }
   }), React__default.createElement("g", {
     className: "handleGroup"
   }, isProgressChangeable && React__default.createElement(BarProgressHandle, {
     progressPoint: progressPoint,
-    onMouseDown: e => {
+    onMouseDown: function onMouseDown(e) {
       onEventStart("progress", task, e);
     }
   })));
@@ -3026,17 +3171,14 @@ const BarSmall = _ref => {
 
 var styles$8 = {"milestoneWrapper":"_RRr13","milestoneBackground":"_2P2B1"};
 
-const Milestone = _ref => {
-  let {
-    task,
-    isDateChangeable,
-    onEventStart,
-    isSelected
-  } = _ref;
-  const transform = `rotate(45 ${task.x1 + task.height * 0.356} 
-    ${task.y + task.height * 0.85})`;
-
-  const getBarColor = () => {
+var Milestone = function Milestone(_ref) {
+  var task = _ref.task,
+      isDateChangeable = _ref.isDateChangeable,
+      onEventStart = _ref.onEventStart,
+      isSelected = _ref.isSelected;
+  var transform = "rotate(45 " + (task.x1 + task.height * 0.356) + " \n    " + (task.y + task.height * 0.85) + ")";
+
+  var getBarColor = function getBarColor() {
     return isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
   };
 
@@ -3053,10 +3195,10 @@ const Milestone = _ref => {
     ry: task.barCornerRadius,
     transform: transform,
     className: styles$8.milestoneBackground,
-    onMouseDown: e => {
+    onMouseDown: function onMouseDown(e) {
       isDateChangeable && onEventStart("move", task, e, "planned");
     },
-    onDoubleClick: e => {
+    onDoubleClick: function onDoubleClick(e) {
       onEventStart("dblclick", task, e);
     }
   }));
@@ -3064,16 +3206,14 @@ const Milestone = _ref => {
 
 var styles$9 = {"projectWrapper":"_1KJ6x","projectBackground":"_2RbVy","projectTop":"_2pZMF"};
 
-const Project = _ref => {
-  let {
-    task,
-    isSelected
-  } = _ref;
-  const barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
-  const processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
-  const projectWith = task.x2 - task.x1;
-  const projectLeftTriangle = [task.x1, task.y + task.height / 2 - 1, task.x1, task.y + task.height, task.x1 + 15, task.y + task.height / 2 - 1].join(",");
-  const projectRightTriangle = [task.x2, task.y + task.height / 2 - 1, task.x2, task.y + task.height, task.x2 - 15, task.y + task.height / 2 - 1].join(",");
+var Project = function Project(_ref) {
+  var task = _ref.task,
+      isSelected = _ref.isSelected;
+  var barColor = isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
+  var processColor = isSelected ? task.styles.progressSelectedColor : task.styles.progressColor;
+  var projectWith = task.x2 - task.x1;
+  var projectLeftTriangle = [task.x1, task.y + task.height / 2 - 1, task.x1, task.y + task.height, task.x1 + 15, task.y + task.height / 2 - 1].join(",");
+  var projectRightTriangle = [task.x2, task.y + task.height / 2 - 1, task.x2, task.y + task.height, task.x2 - 15, task.y + task.height / 2 - 1].join(",");
   return React__default.createElement("g", {
     tabIndex: 0,
     className: styles$9.projectWrapper
@@ -3114,16 +3254,18 @@ const Project = _ref => {
   }));
 };
 
-const TaskItem = props => {
-  const {
-    task,
-    isDelete,
-    isSelected,
-    onEventStart
-  } = { ...props
-  };
-  const [taskItem, setTaskItem] = React.useState([React__default.createElement("div", null)]);
-  React.useEffect(() => {
+var TaskItem = function TaskItem(props) {
+  var _props = _extends({}, props),
+      task = _props.task,
+      isDelete = _props.isDelete,
+      isSelected = _props.isSelected,
+      onEventStart = _props.onEventStart;
+
+  var _useState = React.useState([React__default.createElement("div", null)]),
+      taskItem = _useState[0],
+      setTaskItem = _useState[1];
+
+  React.useEffect(function () {
     switch (task.typeInternal) {
       case "milestone":
         if (task.x1 >= 0 && task.actualx1 >= 0) setTaskItem([React__default.createElement(Milestone, Object.assign({}, props))]);else setTaskItem([]);
@@ -3139,27 +3281,27 @@ const TaskItem = props => {
 
       default:
         {
-          let taskItem = [];
+          var _taskItem = [];
 
           if ((task === null || task === void 0 ? void 0 : task.x1) >= 0 && (task === null || task === void 0 ? void 0 : task.x2) >= 0) {
-            taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
+            _taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
               type: "planned"
             })));
           }
 
           if ((task === null || task === void 0 ? void 0 : task.actualx1) >= 0 && (task === null || task === void 0 ? void 0 : task.actualx2) >= 0) {
-            taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
+            _taskItem.push(React__default.createElement(Bar, Object.assign({}, props, {
               type: "actual"
             })));
           }
 
-          setTaskItem(taskItem);
+          setTaskItem(_taskItem);
         }
         break;
     }
   }, [task, isSelected]);
   return React__default.createElement("g", null, React__default.createElement("g", {
-    onKeyDown: e => {
+    onKeyDown: function onKeyDown(e) {
       switch (e.key) {
         case "Delete":
           {
@@ -3170,20 +3312,20 @@ const TaskItem = props => {
 
       e.stopPropagation();
     },
-    onMouseEnter: e => {
+    onMouseEnter: function onMouseEnter(e) {
       onEventStart("mouseenter", task, e, "planned");
     },
-    onMouseLeave: e => {
+    onMouseLeave: function onMouseLeave(e) {
       onEventStart("mouseleave", task, e, "planned");
     },
-    onDoubleClick: e => {
+    onDoubleClick: function onDoubleClick(e) {
       onEventStart("dblclick", task, e, "planned");
     },
-    onClick: e => {
+    onClick: function onClick(e) {
       onEventStart("click", task, e, "planned");
     }
   }, taskItem[0]), React__default.createElement("g", {
-    onKeyDown: e => {
+    onKeyDown: function onKeyDown(e) {
       switch (e.key) {
         case "Delete":
           {
@@ -3194,152 +3336,177 @@ const TaskItem = props => {
 
       e.stopPropagation();
     },
-    onMouseEnter: e => {
+    onMouseEnter: function onMouseEnter(e) {
       onEventStart("mouseenter", task, e, "actual");
     },
-    onMouseLeave: e => {
+    onMouseLeave: function onMouseLeave(e) {
       onEventStart("mouseleave", task, e, "actual");
     },
-    onDoubleClick: e => {
+    onDoubleClick: function onDoubleClick(e) {
       onEventStart("dblclick", task, e, "actual");
     },
-    onClick: e => {
+    onClick: function onClick(e) {
       onEventStart("click", task, e, "actual");
     }
   }, taskItem[1]));
 };
 
-const TaskGanttContent = _ref => {
+var TaskGanttContent = function TaskGanttContent(_ref) {
   var _svg$current;
 
-  let {
-    tasks,
-    dates,
-    ganttEvent,
-    selectedTask,
-    rowHeight,
-    columnWidth,
-    timeStep,
-    svg,
-    taskHeight,
-    arrowIndent,
-    fontFamily,
-    fontSize,
-    rtl,
-    virtualItems = [],
-    setGanttEvent,
-    setFailedTask,
-    setSelectedTask,
-    onBarTasksUpdate,
-    onDateChange,
-    onProgressChange,
-    onDoubleClick,
-    onClick,
-    onDelete,
-    onCalendarError,
-    projectCalendar,
-    visibleStartY,
-    visibleEndY,
-    sliderTime
-  } = _ref;
-  const point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
-  const [xStep, setXStep] = React.useState(0);
-  const [initEventX1Delta, setInitEventX1Delta] = React.useState(0);
-  const [isMoving, setIsMoving] = React.useState(false);
-  React.useEffect(() => {
+  var tasks = _ref.tasks,
+      dates = _ref.dates,
+      ganttEvent = _ref.ganttEvent,
+      selectedTask = _ref.selectedTask,
+      rowHeight = _ref.rowHeight,
+      columnWidth = _ref.columnWidth,
+      timeStep = _ref.timeStep,
+      svg = _ref.svg,
+      taskHeight = _ref.taskHeight,
+      arrowIndent = _ref.arrowIndent,
+      fontFamily = _ref.fontFamily,
+      fontSize = _ref.fontSize,
+      rtl = _ref.rtl,
+      _ref$virtualItems = _ref.virtualItems,
+      virtualItems = _ref$virtualItems === void 0 ? [] : _ref$virtualItems,
+      setGanttEvent = _ref.setGanttEvent,
+      setFailedTask = _ref.setFailedTask,
+      setSelectedTask = _ref.setSelectedTask,
+      onBarTasksUpdate = _ref.onBarTasksUpdate,
+      onDateChange = _ref.onDateChange,
+      onProgressChange = _ref.onProgressChange,
+      onDoubleClick = _ref.onDoubleClick,
+      onClick = _ref.onClick,
+      onDelete = _ref.onDelete,
+      onCalendarError = _ref.onCalendarError,
+      projectCalendar = _ref.projectCalendar,
+      visibleStartY = _ref.visibleStartY,
+      visibleEndY = _ref.visibleEndY,
+      sliderTime = _ref.sliderTime;
+  var point = svg === null || svg === void 0 ? void 0 : (_svg$current = svg.current) === null || _svg$current === void 0 ? void 0 : _svg$current.createSVGPoint();
+
+  var _useState = React.useState(0),
+      xStep = _useState[0],
+      setXStep = _useState[1];
+
+  var _useState2 = React.useState(0),
+      initEventX1Delta = _useState2[0],
+      setInitEventX1Delta = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      isMoving = _useState3[0],
+      setIsMoving = _useState3[1];
+
+  React.useEffect(function () {
     if (dates.length < 2) {
       setXStep(timeStep * columnWidth / 86400000);
       return;
     }
 
-    const dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
-    const newXStep = timeStep * columnWidth / dateDelta;
+    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);
   }, [columnWidth, dates, timeStep]);
-  React.useEffect(() => {
-    const handleMouseMove = function (event) {
+  React.useEffect(function () {
+    var handleMouseMove = function handleMouseMove(event) {
       try {
         var _svg$current$getScree;
 
         if (!ganttEvent.changedTask || !point || !(svg !== null && svg !== void 0 && svg.current)) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        const cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
-        const {
-          isChanged,
-          changedTask
-        } = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, ganttEvent.type, xStep, timeStep, initEventX1Delta, rtl);
+        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree = svg.current.getScreenCTM()) === null || _svg$current$getScree === void 0 ? void 0 : _svg$current$getScree.inverse());
+
+        var _handleTaskBySVGMouse = handleTaskBySVGMouseEvent(cursor.x, ganttEvent.action, ganttEvent.changedTask, ganttEvent.type, xStep, timeStep, initEventX1Delta, rtl),
+            isChanged = _handleTaskBySVGMouse.isChanged,
+            changedTask = _handleTaskBySVGMouse.changedTask;
 
         if (isChanged) {
-          let finalTask = { ...changedTask
-          };
-          const dragType = ganttEvent.type;
+          var finalTask = _extends({}, changedTask);
+
+          var dragType = ganttEvent.type;
 
           if (changedTask.calendar && (ganttEvent.action === "end" || ganttEvent.action === "start" || ganttEvent.action === "move")) {
-            const cal = finalTask.calendar;
+            var cal = finalTask.calendar;
 
             if (dragType === "actual") {
               if (ganttEvent.action === "end") {
-                const snapped = snapToWorkingTime(finalTask.actualEnd, cal, "forward");
+                var snapped = snapToWorkingTime(finalTask.actualEnd, cal, "forward");
                 finalTask.actualEnd = snapped;
                 finalTask.actualx2 = taskXCoordinate(snapped, dates, columnWidth);
               } else if (ganttEvent.action === "start") {
-                const snapped = snapToWorkingTime(finalTask.actualStart, cal, "forward");
-                finalTask.actualStart = snapped;
-                finalTask.actualx1 = taskXCoordinate(snapped, dates, columnWidth);
+                var _snapped = snapToWorkingTime(finalTask.actualStart, cal, "forward");
+
+                finalTask.actualStart = _snapped;
+                finalTask.actualx1 = taskXCoordinate(_snapped, dates, columnWidth);
               } else {
-                const snapped = snapToWorkingTime(finalTask.actualStart, cal, "forward");
-                const delta = snapped.getTime() - finalTask.actualStart.getTime();
-                finalTask.actualStart = snapped;
+                var _snapped2 = snapToWorkingTime(finalTask.actualStart, cal, "forward");
+
+                var delta = _snapped2.getTime() - finalTask.actualStart.getTime();
+                finalTask.actualStart = _snapped2;
                 finalTask.actualEnd = new Date(finalTask.actualEnd.getTime() + delta);
                 finalTask.actualx1 = taskXCoordinate(finalTask.actualStart, dates, columnWidth);
                 finalTask.actualx2 = taskXCoordinate(finalTask.actualEnd, dates, columnWidth);
               }
 
-              const actEnd = addToDate(startOfDate(finalTask.actualEnd, "day"), 1, "day");
-              const actIntervals = getWorkingIntervals(finalTask.actualStart, actEnd, cal);
-              const actSegs = actIntervals.map(iv => ({
-                x1: taskXCoordinate(iv.start, dates, columnWidth),
-                x2: taskXCoordinate(iv.end, dates, columnWidth)
-              })).filter(s => s.x2 > s.x1);
+              var actEnd = addToDate(startOfDate(finalTask.actualEnd, "day"), 1, "day");
+              var actIntervals = getWorkingIntervals(finalTask.actualStart, actEnd, cal);
+              var actSegs = actIntervals.map(function (iv) {
+                return {
+                  x1: taskXCoordinate(iv.start, dates, columnWidth),
+                  x2: taskXCoordinate(iv.end, dates, columnWidth)
+                };
+              }).filter(function (s) {
+                return s.x2 > s.x1;
+              });
               finalTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
-              const actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+              var actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
               finalTask.actualDuration = actDays;
             } else {
               if (ganttEvent.action === "end") {
-                const snapped = snapToWorkingTime(finalTask.end, cal, "forward");
-                finalTask.end = snapped;
-                finalTask.x2 = taskXCoordinate(snapped, dates, columnWidth);
+                var _snapped3 = snapToWorkingTime(finalTask.end, cal, "forward");
+
+                finalTask.end = _snapped3;
+                finalTask.x2 = taskXCoordinate(_snapped3, dates, columnWidth);
               } else if (ganttEvent.action === "start") {
-                const snapped = snapToWorkingTime(finalTask.start, cal, "forward");
-                finalTask.start = snapped;
-                finalTask.x1 = taskXCoordinate(snapped, dates, columnWidth);
+                var _snapped4 = snapToWorkingTime(finalTask.start, cal, "forward");
+
+                finalTask.start = _snapped4;
+                finalTask.x1 = taskXCoordinate(_snapped4, dates, columnWidth);
               } else {
-                const snapped = snapToWorkingTime(finalTask.start, cal, "forward");
-                const delta = snapped.getTime() - finalTask.start.getTime();
-                finalTask.start = snapped;
-                finalTask.end = new Date(finalTask.end.getTime() + delta);
+                var _snapped5 = snapToWorkingTime(finalTask.start, cal, "forward");
+
+                var _delta = _snapped5.getTime() - finalTask.start.getTime();
+
+                finalTask.start = _snapped5;
+                finalTask.end = new Date(finalTask.end.getTime() + _delta);
                 finalTask.x1 = taskXCoordinate(finalTask.start, dates, columnWidth);
                 finalTask.x2 = taskXCoordinate(finalTask.end, dates, columnWidth);
               }
 
-              const planEnd = addToDate(startOfDate(finalTask.end, "day"), 1, "day");
-              const planIntervals = getWorkingIntervals(finalTask.start, planEnd, cal);
-              const planSegs = planIntervals.map(iv => ({
-                x1: taskXCoordinate(iv.start, dates, columnWidth),
-                x2: taskXCoordinate(iv.end, dates, columnWidth)
-              })).filter(s => s.x2 > s.x1);
+              var planEnd = addToDate(startOfDate(finalTask.end, "day"), 1, "day");
+              var planIntervals = getWorkingIntervals(finalTask.start, planEnd, cal);
+              var planSegs = planIntervals.map(function (iv) {
+                return {
+                  x1: taskXCoordinate(iv.start, dates, columnWidth),
+                  x2: taskXCoordinate(iv.end, dates, columnWidth)
+                };
+              }).filter(function (s) {
+                return s.x2 > s.x1;
+              });
               finalTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
-              const planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+              var planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
               finalTask.plannedDuration = planDays;
             }
           } else {
             if (dragType === "actual") {
-              const actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
-              finalTask.actualDuration = actDays;
+              var _actDays = Math.max(1, Math.round((finalTask.actualEnd.getTime() - finalTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+
+              finalTask.actualDuration = _actDays;
             } else {
-              const planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
-              finalTask.plannedDuration = planDays;
+              var _planDays = Math.max(1, Math.round((finalTask.end.getTime() - finalTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+
+              finalTask.plannedDuration = _planDays;
             }
           }
 
@@ -3356,42 +3523,41 @@ const TaskGanttContent = _ref => {
       }
     };
 
-    const handleMouseUp = function (event) {
+    var handleMouseUp = function handleMouseUp(event) {
       try {
         var _svg$current$getScree2;
 
-        function _temp5() {
+        var _temp6 = function _temp6() {
           if (!operationSuccess) {
             setFailedTask(originalSelectedTask);
           }
-        }
+        };
 
-        const {
-          action,
-          originalSelectedTask,
-          changedTask,
-          type
-        } = ganttEvent;
+        var action = ganttEvent.action,
+            originalSelectedTask = ganttEvent.originalSelectedTask,
+            changedTask = ganttEvent.changedTask,
+            type = ganttEvent.type;
         if (!changedTask || !point || !(svg !== null && svg !== void 0 && svg.current) || !originalSelectedTask) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        const cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
-        const {
-          changedTask: newChangedTask
-        } = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, type, xStep, timeStep, initEventX1Delta, rtl);
-        const isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.actualStart !== newChangedTask.actualStart || originalSelectedTask.actualEnd !== newChangedTask.actualEnd || originalSelectedTask.progress !== newChangedTask.progress;
-        const dropType = type;
+        var cursor = point.matrixTransform(svg === null || svg === void 0 ? void 0 : (_svg$current$getScree2 = svg.current.getScreenCTM()) === null || _svg$current$getScree2 === void 0 ? void 0 : _svg$current$getScree2.inverse());
+
+        var _handleTaskBySVGMouse2 = handleTaskBySVGMouseEvent(cursor.x, action, changedTask, type, xStep, timeStep, initEventX1Delta, rtl),
+            newChangedTask = _handleTaskBySVGMouse2.changedTask;
+
+        var isNotLikeOriginal = originalSelectedTask.start !== newChangedTask.start || originalSelectedTask.end !== newChangedTask.end || originalSelectedTask.actualStart !== newChangedTask.actualStart || originalSelectedTask.actualEnd !== newChangedTask.actualEnd || originalSelectedTask.progress !== newChangedTask.progress;
+        var dropType = type;
 
         if (newChangedTask.calendar && (action === "move" || action === "end" || action === "start")) {
-          const cal = newChangedTask.calendar;
+          var cal = newChangedTask.calendar;
 
           if (dropType === "actual") {
             if (action === "end") {
-              const snappedEnd = snapToWorkingTime(newChangedTask.actualEnd, cal, "forward");
+              var snappedEnd = snapToWorkingTime(newChangedTask.actualEnd, cal, "forward");
               newChangedTask.actualEnd = snappedEnd;
               newChangedTask.actualx2 = taskXCoordinate(snappedEnd, dates, columnWidth);
             } else if (action === "start") {
-              const snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
+              var snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
 
               if (snappedStart >= newChangedTask.actualEnd) {
                 setFailedTask(originalSelectedTask);
@@ -3408,32 +3574,38 @@ const TaskGanttContent = _ref => {
               newChangedTask.actualStart = snappedStart;
               newChangedTask.actualx1 = taskXCoordinate(snappedStart, dates, columnWidth);
             } else {
-              const snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
-              const delta = snappedStart.getTime() - newChangedTask.actualStart.getTime();
-              newChangedTask.actualStart = snappedStart;
+              var _snappedStart = snapToWorkingTime(newChangedTask.actualStart, cal, "forward");
+
+              var delta = _snappedStart.getTime() - newChangedTask.actualStart.getTime();
+              newChangedTask.actualStart = _snappedStart;
               newChangedTask.actualEnd = new Date(newChangedTask.actualEnd.getTime() + delta);
-              newChangedTask.actualx1 = taskXCoordinate(snappedStart, dates, columnWidth);
+              newChangedTask.actualx1 = taskXCoordinate(_snappedStart, dates, columnWidth);
               newChangedTask.actualx2 = taskXCoordinate(newChangedTask.actualEnd, dates, columnWidth);
             }
 
-            const actEnd = addToDate(startOfDate(newChangedTask.actualEnd, "day"), 1, "day");
-            const actIntervals = getWorkingIntervals(newChangedTask.actualStart, actEnd, cal);
-            const actSegs = actIntervals.map(iv => ({
-              x1: taskXCoordinate(iv.start, dates, columnWidth),
-              x2: taskXCoordinate(iv.end, dates, columnWidth)
-            })).filter(s => s.x2 > s.x1);
+            var actEnd = addToDate(startOfDate(newChangedTask.actualEnd, "day"), 1, "day");
+            var actIntervals = getWorkingIntervals(newChangedTask.actualStart, actEnd, cal);
+            var actSegs = actIntervals.map(function (iv) {
+              return {
+                x1: taskXCoordinate(iv.start, dates, columnWidth),
+                x2: taskXCoordinate(iv.end, dates, columnWidth)
+              };
+            }).filter(function (s) {
+              return s.x2 > s.x1;
+            });
             newChangedTask.actualSegments = actSegs.length > 0 ? actSegs : undefined;
-            const actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+            var actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
             newChangedTask.actualDuration = actDays;
           } else {
             if (action === "end") {
-              const snappedEnd = snapToWorkingTime(newChangedTask.end, cal, "forward");
-              newChangedTask.end = snappedEnd;
-              newChangedTask.x2 = taskXCoordinate(snappedEnd, dates, columnWidth);
+              var _snappedEnd = snapToWorkingTime(newChangedTask.end, cal, "forward");
+
+              newChangedTask.end = _snappedEnd;
+              newChangedTask.x2 = taskXCoordinate(_snappedEnd, dates, columnWidth);
             } else if (action === "start") {
-              const snappedStart = snapToWorkingTime(newChangedTask.start, cal, "forward");
+              var _snappedStart2 = snapToWorkingTime(newChangedTask.start, cal, "forward");
 
-              if (snappedStart >= newChangedTask.end) {
+              if (_snappedStart2 >= newChangedTask.end) {
                 setFailedTask(originalSelectedTask);
                 onCalendarError === null || onCalendarError === void 0 ? void 0 : onCalendarError(newChangedTask, "No working time in selected range");
                 setGanttEvent({
@@ -3445,34 +3617,42 @@ const TaskGanttContent = _ref => {
                 return Promise.resolve();
               }
 
-              newChangedTask.start = snappedStart;
-              newChangedTask.x1 = taskXCoordinate(snappedStart, dates, columnWidth);
+              newChangedTask.start = _snappedStart2;
+              newChangedTask.x1 = taskXCoordinate(_snappedStart2, dates, columnWidth);
             } else {
-              const snappedStart = snapToWorkingTime(newChangedTask.start, cal, "forward");
-              const delta = snappedStart.getTime() - newChangedTask.start.getTime();
-              newChangedTask.start = snappedStart;
-              newChangedTask.end = new Date(newChangedTask.end.getTime() + delta);
-              newChangedTask.x1 = taskXCoordinate(snappedStart, dates, columnWidth);
+              var _snappedStart3 = snapToWorkingTime(newChangedTask.start, cal, "forward");
+
+              var _delta2 = _snappedStart3.getTime() - newChangedTask.start.getTime();
+
+              newChangedTask.start = _snappedStart3;
+              newChangedTask.end = new Date(newChangedTask.end.getTime() + _delta2);
+              newChangedTask.x1 = taskXCoordinate(_snappedStart3, dates, columnWidth);
               newChangedTask.x2 = taskXCoordinate(newChangedTask.end, dates, columnWidth);
             }
 
-            const planEnd = addToDate(startOfDate(newChangedTask.end, "day"), 1, "day");
-            const planIntervals = getWorkingIntervals(newChangedTask.start, planEnd, cal);
-            const planSegs = planIntervals.map(iv => ({
-              x1: taskXCoordinate(iv.start, dates, columnWidth),
-              x2: taskXCoordinate(iv.end, dates, columnWidth)
-            })).filter(s => s.x2 > s.x1);
+            var planEnd = addToDate(startOfDate(newChangedTask.end, "day"), 1, "day");
+            var planIntervals = getWorkingIntervals(newChangedTask.start, planEnd, cal);
+            var planSegs = planIntervals.map(function (iv) {
+              return {
+                x1: taskXCoordinate(iv.start, dates, columnWidth),
+                x2: taskXCoordinate(iv.end, dates, columnWidth)
+              };
+            }).filter(function (s) {
+              return s.x2 > s.x1;
+            });
             newChangedTask.plannedSegments = planSegs.length > 0 ? planSegs : undefined;
-            const planDays = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+            var planDays = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
             newChangedTask.plannedDuration = planDays;
           }
         } else if (action === "move" || action === "end" || action === "start") {
           if (dropType === "actual") {
-            const actDays = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
-            newChangedTask.actualDuration = actDays;
+            var _actDays2 = Math.max(1, Math.round((newChangedTask.actualEnd.getTime() - newChangedTask.actualStart.getTime()) / (1000 * 60 * 60 * 24)));
+
+            newChangedTask.actualDuration = _actDays2;
           } else {
-            const planDays = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
-            newChangedTask.plannedDuration = planDays;
+            var _planDays2 = Math.max(1, Math.round((newChangedTask.end.getTime() - newChangedTask.start.getTime()) / (1000 * 60 * 60 * 24)));
+
+            newChangedTask.plannedDuration = _planDays2;
           }
         }
 
@@ -3487,11 +3667,11 @@ const TaskGanttContent = _ref => {
           action: ""
         });
         setIsMoving(false);
-        let operationSuccess = true;
+        var operationSuccess = true;
 
-        const _temp4 = function () {
+        var _temp7 = function () {
           if ((action === "move" || action === "end" || action === "start") && onDateChange && isNotLikeOriginal) {
-            const _temp = _catch(function () {
+            var _temp8 = _catch(function () {
               return Promise.resolve(onDateChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                 if (result !== undefined) {
                   operationSuccess = result;
@@ -3501,11 +3681,11 @@ const TaskGanttContent = _ref => {
               operationSuccess = false;
             });
 
-            if (_temp && _temp.then) return _temp.then(function () {});
+            if (_temp8 && _temp8.then) return _temp8.then(function () {});
           } else {
-            const _temp3 = function () {
+            var _temp9 = function () {
               if (onProgressChange && isNotLikeOriginal) {
-                const _temp2 = _catch(function () {
+                var _temp10 = _catch(function () {
                   return Promise.resolve(onProgressChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                     if (result !== undefined) {
                       operationSuccess = result;
@@ -3515,15 +3695,15 @@ const TaskGanttContent = _ref => {
                   operationSuccess = false;
                 });
 
-                if (_temp2 && _temp2.then) return _temp2.then(function () {});
+                if (_temp10 && _temp10.then) return _temp10.then(function () {});
               }
             }();
 
-            if (_temp3 && _temp3.then) return _temp3.then(function () {});
+            if (_temp9 && _temp9.then) return _temp9.then(function () {});
           }
         }();
 
-        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
+        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -3536,7 +3716,7 @@ const TaskGanttContent = _ref => {
     }
   }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, onCalendarError, projectCalendar, svg, isMoving, point, rtl, setFailedTask, setGanttEvent, onBarTasksUpdate, dates, columnWidth]);
 
-  const handleBarEventStart = function (action, task, event, type) {
+  var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
     try {
       return Promise.resolve(function () {
         if (!event) {
@@ -3545,15 +3725,15 @@ const TaskGanttContent = _ref => {
           }
         } else return function () {
           if (isKeyboardEvent(event)) {
-            const _temp8 = function () {
+            var _temp14 = function () {
               if (action === "delete") {
-                const _temp7 = function () {
+                var _temp15 = function () {
                   if (onDelete) {
-                    const _temp6 = _catch(function () {
+                    var _temp16 = _catch(function () {
                       return Promise.resolve(onDelete(task)).then(function (result) {
                         if (result !== undefined && result) {
                           setGanttEvent({
-                            action,
+                            action: action,
                             changedTask: task
                           });
                         }
@@ -3562,19 +3742,19 @@ const TaskGanttContent = _ref => {
                       console.error("Error on Delete. " + error);
                     });
 
-                    if (_temp6 && _temp6.then) return _temp6.then(function () {});
+                    if (_temp16 && _temp16.then) return _temp16.then(function () {});
                   }
                 }();
 
-                if (_temp7 && _temp7.then) return _temp7.then(function () {});
+                if (_temp15 && _temp15.then) return _temp15.then(function () {});
               }
             }();
 
-            if (_temp8 && _temp8.then) return _temp8.then(function () {});
+            if (_temp14 && _temp14.then) return _temp14.then(function () {});
           } else if (action === "mouseenter") {
             if (!ganttEvent.action) {
               setGanttEvent({
-                action,
+                action: action,
                 changedTask: task,
                 originalSelectedTask: task,
                 type: type
@@ -3595,17 +3775,17 @@ const TaskGanttContent = _ref => {
 
             if (!(svg !== null && svg !== void 0 && svg.current) || !point) return;
             point.x = event.clientX;
-            const cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
+            var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
             if (type == "planned") setInitEventX1Delta(cursor.x - task.x1);else if (type == "actual") setInitEventX1Delta(cursor.x - task.actualx1);
             setGanttEvent({
-              action,
+              action: action,
               changedTask: task,
               originalSelectedTask: task,
               type: type
             });
           } else {
             setGanttEvent({
-              action,
+              action: action,
               changedTask: task,
               originalSelectedTask: task,
               type: type
@@ -3618,60 +3798,77 @@ const TaskGanttContent = _ref => {
     }
   };
 
-  const getArrows = (isCritical, criticalPathType) => {
-    return tasks.flatMap(_task => {
-      const a = ganttEvent.action;
-      const isDraggingThis = (a === "move" || a === "start" || a === "end" || a === "progress") && !!ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id;
-
-      const _live = isDraggingThis ? { ...ganttEvent.changedTask,
-        y: _task.y
-      } : _task;
-
-      const task = _live.start.getTime() > 0 && _live.end.getTime() > 0 ? _live : undefined;
-
-      if (!task) {
-        return [];
+  var arrowIndex = React__default.useMemo(function () {
+    var entries = [];
+
+    for (var i = 0; i < tasks.length; i++) {
+      var task = tasks[i];
+      var yFrom = task.y + taskHeight / 2;
+
+      for (var _iterator = _createForOfIteratorHelperLoose(task.barChildren), _step; !(_step = _iterator()).done;) {
+        var child = _step.value;
+        var taskTo = tasks[child.index];
+        if (!taskTo) continue;
+        var yTo = taskTo.y + taskHeight / 2;
+        entries.push({
+          from: i,
+          to: child.index,
+          minY: Math.min(yFrom, yTo),
+          maxY: Math.max(yFrom, yTo),
+          dependencyType: child.dependencyType
+        });
       }
+    }
 
-      return task.barChildren.map(child => {
-        const taskTo = tasks[child.index];
-        const fromDrawable = task.x2 > task.x1 || task.actualx2 > task.actualx1;
-        const toDrawable = !!taskTo && (taskTo.x2 > taskTo.x1 || taskTo.actualx2 > taskTo.actualx1);
+    return entries;
+  }, [tasks, taskHeight]);
 
-        if (fromDrawable && toDrawable) {
-          var _task$criticalPathArr;
+  var getArrows = function getArrows(isCritical, criticalPathType) {
+    var out = [];
+    var a = ganttEvent.action;
+    var dragging = (a === "move" || a === "start" || a === "end" || a === "progress") && !!ganttEvent.changedTask;
 
-          const criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(arrow => arrow.taskId === taskTo.id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType));
-          const yFrom = task.y + taskHeight / 2;
-          const yTo = taskTo.y + taskHeight / 2;
-          const minY = Math.min(yFrom, yTo);
-          const maxY = Math.max(yFrom, yTo);
+    var _loop = function _loop() {
+      var _task$criticalPathArr;
 
-          if (maxY < visibleStartY || minY > visibleEndY) {
-            return null;
-          }
+      var e = _step2.value;
+      if (e.maxY < visibleStartY || e.minY > visibleEndY) return "continue";
+      var _task = tasks[e.from];
+      var task = dragging && ganttEvent.changedTask.id === _task.id ? _extends({}, ganttEvent.changedTask, {
+        y: _task.y
+      }) : _task;
+      if (!(task.start.getTime() > 0 && task.end.getTime() > 0)) return "continue";
+      var taskTo = tasks[e.to];
+      var fromDrawable = task.x2 > task.x1 || task.actualx2 > task.actualx1;
+      var toDrawable = taskTo.x2 > taskTo.x1 || taskTo.actualx2 > taskTo.actualx1;
+      if (!fromDrawable || !toDrawable) return "continue";
+      var criticalTask = (_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : _task$criticalPathArr.find(function (arrow) {
+        return arrow.taskId === taskTo.id && (!!arrow.criticalPathType ? arrow.criticalPathType === criticalPathType : !criticalPathType);
+      });
+      if (!!criticalTask !== isCritical) return "continue";
+      out.push(React__default.createElement(Arrow, {
+        key: "Arrow from " + task.id + " to " + taskTo.id + (isCritical ? "-critical" : ""),
+        taskFrom: task,
+        taskTo: taskTo,
+        rowHeight: rowHeight,
+        dependencyType: e.dependencyType,
+        taskHeight: taskHeight,
+        arrowIndent: arrowIndent,
+        arrowColor: (criticalTask === null || criticalTask === void 0 ? void 0 : criticalTask.arrowColor) || "#808080"
+      }));
+    };
 
-          if (!!criticalTask === isCritical) {
-            return React__default.createElement(Arrow, {
-              key: `Arrow from ${task.id} to ${taskTo.id}${isCritical ? "-critical" : ""}`,
-              taskFrom: task,
-              taskTo: taskTo,
-              rowHeight: rowHeight,
-              dependencyType: child.dependencyType,
-              taskHeight: taskHeight,
-              arrowIndent: arrowIndent,
-              arrowColor: (criticalTask === null || criticalTask === void 0 ? void 0 : criticalTask.arrowColor) || "#808080"
-            });
-          }
-        }
+    for (var _iterator2 = _createForOfIteratorHelperLoose(arrowIndex), _step2; !(_step2 = _iterator2()).done;) {
+      var _ret = _loop();
 
-        return null;
-      }).filter(Boolean);
-    });
+      if (_ret === "continue") continue;
+    }
+
+    return out;
   };
 
-  const lineX = sliderTime !== undefined ? taskXCoordinate(new Date(sliderTime), dates, columnWidth) : null;
-  const totalHeight = tasks.length * rowHeight;
+  var lineX = sliderTime !== undefined ? taskXCoordinate(new Date(sliderTime), dates, columnWidth) : null;
+  var totalHeight = tasks.length * rowHeight;
   return React__default.createElement("g", {
     className: "content"
   }, lineX !== null && lineX > 0 && React__default.createElement("line", {
@@ -3689,18 +3886,18 @@ const TaskGanttContent = _ref => {
     className: "bar",
     fontFamily: fontFamily,
     fontSize: fontSize
-  }, virtualItems.map(vi => {
-    const _task = tasks[vi.index];
-    const task = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? { ...ganttEvent.changedTask,
+  }, virtualItems.map(function (vi) {
+    var _task = tasks[vi.index];
+    var task = ganttEvent.changedTask && ganttEvent.changedTask.id === _task.id ? _extends({}, ganttEvent.changedTask, {
       y: 0
-    } : { ..._task,
+    }) : _extends({}, _task, {
       y: 0
-    };
+    });
 
     if (!task && _task.typeInternal === "milestone") {
       return React__default.createElement("g", {
         key: _task.id,
-        transform: `translate(0, ${vi.start})`
+        transform: "translate(0, " + vi.start + ")"
       }, React__default.createElement(Milestone, {
         task: task,
         arrowIndent: arrowIndent,
@@ -3717,7 +3914,7 @@ const TaskGanttContent = _ref => {
     if (!task) {
       return React__default.createElement("g", {
         key: _task.id,
-        transform: `translate(0, ${vi.start})`,
+        transform: "translate(0, " + vi.start + ")",
         style: {
           height: taskHeight
         }
@@ -3726,7 +3923,7 @@ const TaskGanttContent = _ref => {
 
     return React__default.createElement("g", {
       key: task.id,
-      transform: `translate(0, ${vi.start})`
+      transform: "translate(0, " + vi.start + ")"
     }, React__default.createElement(TaskItem, {
       task: task,
       arrowIndent: arrowIndent,
@@ -3851,7 +4048,7 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
 var GANTT_MIN_WIDTH_RATIO = 0.4;
 var TABLE_GANTT_DIVIDER_WIDTH = 20;
 var Gantt = function Gantt(_ref) {
-  var _ref2;
+  var _ref3;
 
   var tasks = _ref.tasks,
       primaryPath = _ref.primaryPath,
@@ -3965,9 +4162,9 @@ var Gantt = function Gantt(_ref) {
       setTableContentWidth = _useState2[1];
 
   var _useState3 = React.useState(function () {
-    var _ganttDateRange = ganttDateRange(tasks, viewMode, preStepsCount),
-        startDateRange = _ganttDateRange[0],
-        endDateRange = _ganttDateRange[1];
+    var _ref2 = tasks ? ganttDateRange(tasks, viewMode, preStepsCount) : [new Date(), new Date()],
+        startDateRange = _ref2[0],
+        endDateRange = _ref2[1];
 
     if (scheduleType === "lookAhead") {
       return {
@@ -4119,7 +4316,7 @@ var Gantt = function Gantt(_ref) {
       setComputedColumnWidth(next);
     }
   }, [viewMode, svgContainerWidth, columnWidthProp, computedColumnWidth]);
-  var columnWidth = (_ref2 = columnWidthProp != null ? columnWidthProp : computedColumnWidth) != null ? _ref2 : 60;
+  var columnWidth = (_ref3 = columnWidthProp != null ? columnWidthProp : computedColumnWidth) != null ? _ref3 : 60;
   var effectiveColumnWidth = React.useMemo(function () {
     if (svgContainerWidth <= 0 || dateSetup.dates.length <= 0) return columnWidth;
 
@@ -4191,9 +4388,9 @@ var Gantt = function Gantt(_ref) {
       filteredTasks = removeHiddenTasks(tasks);
       filteredTasks = filteredTasks.sort(sortTasks);
 
-      var _ganttDateRange2 = ganttDateRange(filteredTasks, viewMode, preStepsCount, (_projectCalendar$quar = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar : 0),
-          startDateRange = _ganttDateRange2[0],
-          endDateRange = _ganttDateRange2[1];
+      var _ganttDateRange = ganttDateRange(filteredTasks, viewMode, preStepsCount, (_projectCalendar$quar = projectCalendar === null || projectCalendar === void 0 ? void 0 : projectCalendar.quarter_start) != null ? _projectCalendar$quar : 0),
+          startDateRange = _ganttDateRange[0],
+          endDateRange = _ganttDateRange[1];
 
       var newDates = seedDates(startDateRange, endDateRange, viewMode);
 
@@ -4223,7 +4420,8 @@ var Gantt = function Gantt(_ref) {
         colorPath(primaryPath, "#ff0000", tasks, "primary");
       }
 
-      setBarTasks(convertToBarTasks(filteredTasks, newDates, effectiveColumnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor));
+      var nextBarTasks = convertToBarTasks(filteredTasks, newDates, effectiveColumnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
+      setBarTasks(nextBarTasks);
       setIsProcessing(false);
     }, delayToRender);
   }, [tasks, viewMode, preStepsCount, rowHeight, barCornerRadius, taskHeight, handleWidth, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor, rtl, shouldNotShowLoadingOverlay, effectiveColumnWidth, projectCalendar]);
@@ -4795,6 +4993,7 @@ function getCriticalPaths(leafTasks) {
     taskChainList.sort(function (a, b) {
       return b.duration - a.duration;
     });
+    console.debug(taskChainList);
     var primaryLeaf = taskChainList[0].parent;
     var primaryPath = [];
 
@@ -4862,59 +5061,76 @@ function getCriticalPaths(leafTasks) {
       secondaryLeaf = _nextPath.task;
     }
 
-    console.debug("Primary", primaryPath);
-    console.debug("Secondary", secondaryPath);
+    console.debug("Primary ", primaryPath);
+    console.debug("Secondary ", secondaryPath);
     return [primaryPath, secondaryPath];
   }
 
   return [[], []];
 }
+
+function getOffTime$1(tIndex, taskMap, start, end) {
+  var startWeek = Math.floor((start / 86400000 + 4) / 7);
+  var endWeek = Math.floor((end / 86400000 + 4) / 7);
+  var offTime = [];
+
+  if (taskMap[tIndex].task.calendar) {
+    if (taskMap[tIndex].task.calendar.off_days && taskMap[tIndex].task.calendar.off_days.length) {
+      for (var d = 0; d < taskMap[tIndex].task.calendar.off_days.length || 0; d++) {
+        for (var w = startWeek; w <= endWeek; w++) {
+          var dayOfTheWeek = taskMap[tIndex].task.calendar.off_days[d];
+          var offDay = 86400000 * (7 * w - 4 + dayOfTheWeek);
+
+          if (offDay >= start && offDay <= end) {
+            offTime.push(offDay);
+          }
+        }
+      }
+    }
+
+    if (taskMap[tIndex].task.calendar.holidays && taskMap[tIndex].task.calendar.holidays.length) {
+      for (var h = 0; h < taskMap[tIndex].task.calendar.holidays.length || 0; h++) {
+        var holiday = taskMap[tIndex].task.calendar.holidays[h];
+        var holiday_timestamp = new Date(holiday).getTime();
+
+        if (holiday_timestamp >= start && holiday_timestamp <= end) {
+          offTime.push(holiday_timestamp);
+        }
+      }
+    }
+  }
+
+  return offTime;
+}
+
 function computeCriticalPath(taskID, taskMap) {
   var task = taskMap[taskID].task;
   var dependents = taskMap[taskID].dependents;
   taskMap[taskID].start = task.start.getTime();
   taskMap[taskID].end = task.end.getTime();
   taskMap[taskID].paths = [];
+  var parent_off_time = getOffTime$1(taskID, taskMap, taskMap[taskID].start, taskMap[taskID].end);
 
   for (var j = 0; j < dependents.length; j++) {
     var depStart = taskMap[dependents[j]].task.start.getTime();
     var depEnd = taskMap[dependents[j]].task.end.getTime();
     var depDuration = depEnd - depStart;
-    var startWeek = Math.floor((depStart / 86400000 + 4) / 7);
-    var endWeek = Math.floor((depEnd / 86400000 + 4) / 7);
-    var offTime = 0;
-
-    if (taskMap[dependents[j]].task.calendar) {
-      if (taskMap[dependents[j]].task.calendar.off_days && taskMap[dependents[j]].task.calendar.off_days.length) {
-        for (var d = 0; d < taskMap[dependents[j]].task.calendar.off_days.length || 0; d++) {
-          for (var w = startWeek; w <= endWeek; w++) {
-            var dayOfTheWeek = taskMap[dependents[j]].task.calendar.off_days[d];
-            var offDay = 86400000 * (7 * w - 4 + dayOfTheWeek);
-
-            if (offDay >= depStart && offDay <= depEnd && (offDay > taskMap[taskID].end || taskMap[taskID].task.calendar.off_days.includes(dayOfTheWeek))) {
-              offTime += 86400000;
-            }
-          }
-        }
-      }
-
-      if (taskMap[dependents[j]].task.calendar.holidays && taskMap[dependents[j]].task.calendar.holidays.length) {
-        for (var h = 0; h < taskMap[dependents[j]].task.calendar.holidays.length || 0; h++) {
-          var holiday = taskMap[dependents[j]].task.calendar.holidays[h];
+    var child_off_time = getOffTime$1(dependents[j], taskMap, depStart, depEnd);
+    var overlap = Math.max(taskMap[taskID].end - depStart, 0);
 
-          if (holiday >= depStart && holiday <= depEnd) {
-            offTime += 86400000;
-          }
-        }
+    for (var t = 0; t < parent_off_time.length; t++) {
+      if (child_off_time.includes(parent_off_time[t])) {
+        parent_off_time.splice(t, 1);
+        t -= 1;
       }
     }
 
-    var overlap = Math.max(taskMap[taskID].end - depStart, 0);
+    var offTime = parent_off_time.length + child_off_time.length;
     var paths = taskMap[dependents[j]].paths;
 
     if (paths && paths.length) {
       for (var k = 0; k < paths.length; k++) {
-        var totalDuration = taskMap[taskID].end - taskMap[taskID].start - overlap - offTime + paths[k].duration;
+        var totalDuration = taskMap[taskID].end - taskMap[taskID].start - overlap - parent_off_time.length * 86400000 + paths[k].duration;
 
         if (taskMap[taskID].paths.length < 2) {
           taskMap[taskID].paths.push({
@@ -4936,7 +5152,7 @@ function computeCriticalPath(taskID, taskMap) {
         }
       }
     } else {
-      var immediateChildDuration = taskMap[taskID].end - taskMap[taskID].start + depDuration - overlap - offTime;
+      var immediateChildDuration = taskMap[taskID].end - taskMap[taskID].start + depDuration - overlap - offTime * 86400000;
 
       if (taskMap[taskID].paths.length < 2) {
         taskMap[taskID].paths.push({
@@ -4966,22 +5182,28 @@ function uncolorAll(tasks) {
   });
 }
 function colorPath(path, color, tasks, criticalPathType) {
-  for (var i = 0; i < path.length; i++) {
-    var longestIDLength = 0;
-    var longestTask = void 0;
+  var byId = new Map();
 
-    for (var j = 0; j < tasks.length; j++) {
-      if (path[i].id === tasks[j].id) {
-        longestTask = tasks[j];
-        break;
-      }
+  for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
+    var task = _step.value;
+    byId.set(task.id, task);
+  }
 
-      if (path[i].id.startsWith(tasks[j].id + ".") && tasks[j].id.length > longestIDLength) {
-        longestIDLength = tasks[j].id.length;
-        longestTask = tasks[j];
-      }
+  var nearest = function nearest(id) {
+    var exact = byId.get(id);
+    if (exact) return exact;
+
+    for (var cut = id.lastIndexOf("."); cut > 0; cut = id.lastIndexOf(".", cut - 1)) {
+      var ancestor = byId.get(id.slice(0, cut));
+      if (ancestor) return ancestor;
     }
 
+    return undefined;
+  };
+
+  for (var i = 0; i < path.length; i++) {
+    var longestTask = nearest(path[i].id);
+
     if (longestTask) {
       var _longestTask$styles;
 
@@ -4993,14 +5215,7 @@ function colorPath(path, color, tasks, criticalPathType) {
   }
 
   var _loop = function _loop(_i9) {
-    var taskFromTasks = void 0;
-
-    for (var _j2 = 0; _j2 < tasks.length; _j2++) {
-      if (path[_i9].id === tasks[_j2].id) {
-        taskFromTasks = tasks[_j2];
-        break;
-      }
-    }
+    var taskFromTasks = byId.get(path[_i9].id);
 
     if (taskFromTasks) {
       var arrows = taskFromTasks.criticalPathArrows;