gantt-task-react-powern 0.4.62 → 0.4.63

package/dist/index.modern.js

@@ -18,10 +18,6 @@ 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);
@@ -280,11 +276,13 @@ var getDaysInMonth = function getDaysInMonth(month, year) {
 
 var styles = {"ganttTable":"_3_ygE","ganttTable_Header":"_1nBOt","ganttTable_HeaderSeparator":"_2eZzQ","ganttTable_HeaderItem":"_WuQ0f"};
 
-var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
-  var headerHeight = _ref.headerHeight,
-      fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize,
-      rowWidth = _ref.rowWidth;
+const TaskListHeaderDefault = _ref => {
+  let {
+    headerHeight,
+    fontFamily,
+    fontSize,
+    rowWidth
+  } = _ref;
   return React.createElement("div", {
     className: styles.ganttTable,
     style: {
@@ -341,59 +339,59 @@ var TaskListHeaderDefault = function TaskListHeaderDefault(_ref) {
   }, "Planned End")));
 };
 
-var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU"};
+var styles$1 = {"taskListWrapper":"_3ZbQT","taskListTableRow":"_34SS0","taskListCell":"_3lLk3","taskListNameWrapper":"_nI1Xw","taskListExpander":"_2QjE6","taskListExpanderPlaceholder":"_1fnLB","taskListEmptyExpander":"_2TfEi","taskListText":"_2ZvXU","taskListCheckbox":"_1KIaF"};
 
-var localeDateStringCache = {};
+const localeDateStringCache = {};
 
-var toLocaleDateStringFactory = function toLocaleDateStringFactory(locale) {
-  return function (date, dateTimeOptions) {
-    if (!date || date.getTime() === 0) return "";
-    var key = date.toString();
-    var lds = localeDateStringCache[key];
+const toLocaleDateStringFactory = locale => (date, dateTimeOptions) => {
+  if (!date || date.getTime() === 0) return "";
+  const key = date.toString();
+  let lds = localeDateStringCache[key];
 
-    if (!lds) {
-      lds = date.toLocaleDateString(locale, dateTimeOptions);
-      localeDateStringCache[key] = lds;
-    }
+  if (!lds) {
+    lds = date.toLocaleDateString(locale, dateTimeOptions);
+    localeDateStringCache[key] = lds;
+  }
 
-    return lds;
-  };
+  return lds;
 };
 
-var dateTimeOptions = {
+const dateTimeOptions = {
   year: "numeric",
   month: "numeric",
   day: "numeric"
 };
-var TaskListTableDefault = function TaskListTableDefault(_ref) {
-  var rowHeight = _ref.rowHeight,
-      rowWidth = _ref.rowWidth,
-      tasks = _ref.tasks,
-      leafTasks = _ref.leafTasks,
-      fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize,
-      locale = _ref.locale,
-      onExpanderClick = _ref.onExpanderClick,
-      _ref$taskLabelRendere = _ref.taskLabelRenderer,
-      taskLabelRenderer = _ref$taskLabelRendere === void 0 ? function (t) {
-    return " " + t.name;
-  } : _ref$taskLabelRendere;
-  var toLocaleDateString = useMemo(function () {
-    return toLocaleDateStringFactory(locale);
-  }, [locale]);
-  var leafTaskIds = useMemo(function () {
-    return new Set(leafTasks.map(function (t) {
-      return t.id;
-    }));
-  }, [leafTasks]);
+const TaskListTableDefault = _ref => {
+  let {
+    rowHeight,
+    rowWidth,
+    tasks,
+    leafTasks,
+    fontFamily,
+    fontSize,
+    locale,
+    onExpanderClick,
+    taskLabelRenderer = t => " " + t.name,
+    selectedTaskIds = [],
+    onTaskSelectionChange
+  } = _ref;
+  const toLocaleDateString = useMemo(() => toLocaleDateStringFactory(locale), [locale]);
+
+  const handleCheckboxChange = (taskId, isChecked) => {
+    if (!onTaskSelectionChange) return;
+    const newSelectedIds = isChecked ? [...selectedTaskIds, taskId] : selectedTaskIds.filter(id => id !== taskId);
+    onTaskSelectionChange(newSelectedIds);
+  };
+
+  const leafTaskIds = useMemo(() => new Set(leafTasks.map(t => t.id)), [leafTasks]);
   return React.createElement("div", {
     className: styles$1.taskListWrapper,
     style: {
       fontFamily: fontFamily,
       fontSize: fontSize
     }
-  }, tasks.map(function (t) {
-    var expanderSymbol = "";
+  }, tasks.map(t => {
+    let expanderSymbol = "";
 
     if (!leafTaskIds.has(t.id)) {
       if (t.hideChildren === false) {
@@ -403,13 +401,27 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }
 
+    const isChecked = selectedTaskIds.includes(t.id);
     return React.createElement("div", {
       className: styles$1.taskListTableRow,
       style: {
         height: rowHeight
       },
-      key: t.id + "row"
+      key: `${t.id}row`
     }, React.createElement("div", {
+      className: styles$1.taskListCell,
+      style: {
+        minWidth: "40px",
+        maxWidth: "40px"
+      }
+    }, React.createElement("div", {
+      className: styles$1.taskListCheckbox
+    }, React.createElement("input", {
+      type: "checkbox",
+      checked: isChecked,
+      onChange: e => handleCheckboxChange(t.id, e.target.checked),
+      onClick: e => e.stopPropagation()
+    }))), React.createElement("div", {
       className: styles$1.taskListCell,
       style: {
         minWidth: parseInt(rowWidth) * 0.8,
@@ -419,13 +431,11 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
     }, React.createElement("div", {
       className: styles$1.taskListNameWrapper,
       style: {
-        paddingLeft: t.depth * 4 + "px"
+        paddingLeft: `${t.depth * 4}px`
       }
     }, !leafTaskIds.has(t.id) ? React.createElement("div", {
       className: styles$1.taskListExpander,
-      onClick: function onClick() {
-        return onExpanderClick(t);
-      }
+      onClick: () => onExpanderClick(t)
     }, expanderSymbol) : React.createElement("div", {
       className: styles$1.taskListExpanderPlaceholder
     }), React.createElement("div", {
@@ -453,7 +463,7 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }, React.createElement("div", {
       className: styles$1.taskListText
-    }, "\xA0", toLocaleDateString(t.start, dateTimeOptions))), React.createElement("div", {
+    }, "\u00A0", toLocaleDateString(t.start, dateTimeOptions))), React.createElement("div", {
       className: styles$1.taskListCell,
       style: {
         minWidth: parseInt(rowWidth) * 0.6,
@@ -461,43 +471,38 @@ var TaskListTableDefault = function TaskListTableDefault(_ref) {
       }
     }, React.createElement("div", {
       className: styles$1.taskListText
-    }, "\xA0", toLocaleDateString(t.end, dateTimeOptions))));
+    }, "\u00A0", toLocaleDateString(t.end, dateTimeOptions))));
   }));
 };
 
 var styles$2 = {"tooltipDefaultContainer":"_3T42e","tooltipDefaultContainerParagraph":"_29NTg","tooltipDetailsContainer":"_25P-K","tooltipDetailsContainerHidden":"_3gVAq"};
 
-var Tooltip = function Tooltip(_ref) {
-  var task = _ref.task,
-      type = _ref.type,
-      rowHeight = _ref.rowHeight,
-      rtl = _ref.rtl,
-      svgContainerHeight = _ref.svgContainerHeight,
-      svgContainerWidth = _ref.svgContainerWidth,
-      scrollX = _ref.scrollX,
-      scrollY = _ref.scrollY,
-      arrowIndent = _ref.arrowIndent,
-      fontSize = _ref.fontSize,
-      fontFamily = _ref.fontFamily,
-      headerHeight = _ref.headerHeight,
-      taskListWidth = _ref.taskListWidth,
-      TooltipContent = _ref.TooltipContent;
-  var tooltipRef = useRef(null);
-
-  var _useState = useState(0),
-      relatedY = _useState[0],
-      setRelatedY = _useState[1];
-
-  var _useState2 = useState(0),
-      relatedX = _useState2[0],
-      setRelatedX = _useState2[1];
-
-  useEffect(function () {
+const Tooltip = _ref => {
+  let {
+    task,
+    type,
+    rowHeight,
+    rtl,
+    svgContainerHeight,
+    svgContainerWidth,
+    scrollX,
+    scrollY,
+    arrowIndent,
+    fontSize,
+    fontFamily,
+    headerHeight,
+    taskListWidth,
+    TooltipContent
+  } = _ref;
+  const tooltipRef = useRef(null);
+  const [relatedY, setRelatedY] = useState(0);
+  const [relatedX, setRelatedX] = useState(0);
+  useEffect(() => {
     if (tooltipRef.current) {
-      var tooltipHeight = tooltipRef.current.offsetHeight * 1.1;
-      var tooltipWidth = tooltipRef.current.offsetWidth * 1.1;
-      var newRelatedY = task.index * rowHeight - scrollY + headerHeight;
-      var newRelatedX;
+      const tooltipHeight = tooltipRef.current.offsetHeight * 1.1;
+      const tooltipWidth = tooltipRef.current.offsetWidth * 1.1;
+      let newRelatedY = task.index * rowHeight - scrollY + headerHeight;
+      let newRelatedX;
 
       if (rtl) {
         newRelatedX = task.x1 - arrowIndent * 1.5 - tooltipWidth - scrollX;
@@ -506,7 +511,7 @@ var Tooltip = function Tooltip(_ref) {
           newRelatedX = task.x2 + arrowIndent * 1.5 - scrollX;
         }
 
-        var tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+        const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
 
         if (tooltipLeftmostPoint > svgContainerWidth) {
           newRelatedX = svgContainerWidth - tooltipWidth;
@@ -514,12 +519,10 @@ var Tooltip = function Tooltip(_ref) {
         }
       } else {
         newRelatedX = type == "planned" ? task.x2 + arrowIndent * 1.5 + taskListWidth - scrollX : task.actualx2 + arrowIndent * 1.5 + taskListWidth - scrollX;
+        const tooltipLeftmostPoint = tooltipWidth + newRelatedX;
+        const fullChartWidth = taskListWidth + svgContainerWidth;
 
-        var _tooltipLeftmostPoint = tooltipWidth + newRelatedX;
-
-        var fullChartWidth = taskListWidth + svgContainerWidth;
-
-        if (_tooltipLeftmostPoint > fullChartWidth) {
+        if (tooltipLeftmostPoint > fullChartWidth) {
           newRelatedX = type == "planned" ? task.x1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth : task.actualx1 + taskListWidth - arrowIndent * 1.5 - scrollX - tooltipWidth;
         }
 
@@ -529,7 +532,7 @@ var Tooltip = function Tooltip(_ref) {
         }
       }
 
-      var tooltipLowerPoint = tooltipHeight + newRelatedY - scrollY;
+      const tooltipLowerPoint = tooltipHeight + newRelatedY - scrollY;
 
       if (tooltipLowerPoint > svgContainerHeight - scrollY) {
         newRelatedY = svgContainerHeight - tooltipHeight;
@@ -553,14 +556,16 @@ var Tooltip = function Tooltip(_ref) {
     type: type
   }));
 };
-var StandardTooltipContent = function StandardTooltipContent(_ref2) {
-  var task = _ref2.task,
-      fontSize = _ref2.fontSize,
-      fontFamily = _ref2.fontFamily,
-      type = _ref2.type;
-  var style = {
-    fontSize: fontSize,
-    fontFamily: fontFamily
+const StandardTooltipContent = _ref2 => {
+  let {
+    task,
+    fontSize,
+    fontFamily,
+    type
+  } = _ref2;
+  const style = {
+    fontSize,
+    fontFamily
   };
   if (type == "planned") return React.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
@@ -569,35 +574,37 @@ var StandardTooltipContent = function StandardTooltipContent(_ref2) {
     style: {
       fontSize: fontSize + 6
     }
-  }, task.name + ": Planned dates: "), React.createElement("b", null, task.start.getMonth() + 1 + "/" + task.start.getDate() + "/" + task.start.getFullYear() + " - " + (task.end.getMonth() + 1) + "/" + task.end.getDate() + "/" + task.end.getFullYear()), task.end.getTime() - task.start.getTime() !== 0 && React.createElement("p", {
+  }, `${task.name}: Planned dates: `), React.createElement("b", null, `${task.start.getMonth() + 1}/${task.start.getDate()}/${task.start.getFullYear()} - ${task.end.getMonth() + 1}/${task.end.getDate()}/${task.end.getFullYear()}`), task.end.getTime() - task.start.getTime() !== 0 && React.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, "Duration: " + ~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React.createElement("p", {
+  }, `Duration: ${~~((task.end.getTime() - task.start.getTime()) / (1000 * 60 * 60 * 24))} day(s)`), React.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, !!task.progress && "Progress: " + task.progress + " %"));else return React.createElement("div", {
+  }, !!task.progress && `Progress: ${task.progress} %`));else return React.createElement("div", {
     className: styles$2.tooltipDefaultContainer,
     style: style
   }, React.createElement("b", {
     style: {
       fontSize: fontSize + 6
     }
-  }, task.name + ": Actual dates: "), React.createElement("b", null, task.actualStart.getMonth() + 1 + "/" + task.actualStart.getDate() + "/" + task.actualStart.getFullYear() + " - " + (task.actualEnd.getMonth() + 1) + "/" + task.actualEnd.getDate() + "/" + task.actualEnd.getFullYear()), task.actualEnd.getTime() - task.actualStart.getTime() !== 0 && React.createElement("p", {
+  }, `${task.name}: Actual dates: `), React.createElement("b", null, `${task.actualStart.getMonth() + 1}/${task.actualStart.getDate()}/${task.actualStart.getFullYear()} - ${task.actualEnd.getMonth() + 1}/${task.actualEnd.getDate()}/${task.actualEnd.getFullYear()}`), task.actualEnd.getTime() - task.actualStart.getTime() !== 0 && React.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, "Duration: " + ~~((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24)) + " day(s)"), React.createElement("p", {
+  }, `Duration: ${~~((task.actualEnd.getTime() - task.actualStart.getTime()) / (1000 * 60 * 60 * 24))} day(s)`), React.createElement("p", {
     className: styles$2.tooltipDefaultContainerParagraph
-  }, !!task.progress && "Progress: " + task.progress + " %"));
+  }, !!task.progress && `Progress: ${task.progress} %`));
 };
 
 var styles$3 = {"scroll":"_1eT-t"};
 
-var VerticalScroll = function VerticalScroll(_ref) {
-  var scroll = _ref.scroll,
-      ganttHeight = _ref.ganttHeight,
-      ganttFullHeight = _ref.ganttFullHeight,
-      headerHeight = _ref.headerHeight,
-      rtl = _ref.rtl,
-      onScroll = _ref.onScroll;
-  var scrollRef = useRef(null);
-  useEffect(function () {
+const VerticalScroll = _ref => {
+  let {
+    scroll,
+    ganttHeight,
+    ganttFullHeight,
+    headerHeight,
+    rtl,
+    onScroll
+  } = _ref;
+  const scrollRef = useRef(null);
+  useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = scroll;
     }
@@ -620,50 +627,56 @@ var VerticalScroll = function VerticalScroll(_ref) {
   }));
 };
 
-var TaskList = function TaskList(_ref) {
-  var headerHeight = _ref.headerHeight,
-      fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize,
-      rowWidth = _ref.rowWidth,
-      rowHeight = _ref.rowHeight,
-      scrollY = _ref.scrollY,
-      tasks = _ref.tasks,
-      leafTasks = _ref.leafTasks,
-      selectedTask = _ref.selectedTask,
-      setSelectedTask = _ref.setSelectedTask,
-      onExpanderClick = _ref.onExpanderClick,
-      locale = _ref.locale,
-      ganttHeight = _ref.ganttHeight,
-      taskListRef = _ref.taskListRef,
-      horizontalContainerClass = _ref.horizontalContainerClass,
-      TaskListHeader = _ref.TaskListHeader,
-      TaskListTable = _ref.TaskListTable,
-      taskLabelRenderer = _ref.taskLabelRenderer;
-  var horizontalContainerRef = useRef(null);
-  useEffect(function () {
+const TaskList = _ref => {
+  let {
+    headerHeight,
+    fontFamily,
+    fontSize,
+    rowWidth,
+    rowHeight,
+    scrollY,
+    tasks,
+    leafTasks,
+    selectedTask,
+    setSelectedTask,
+    onExpanderClick,
+    locale,
+    ganttHeight,
+    taskListRef,
+    horizontalContainerClass,
+    TaskListHeader,
+    TaskListTable,
+    taskLabelRenderer,
+    selectedTaskIds,
+    onTaskSelectionChange
+  } = _ref;
+  const horizontalContainerRef = useRef(null);
+  useEffect(() => {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
     }
   }, [scrollY]);
-  var headerProps = {
-    headerHeight: headerHeight,
-    fontFamily: fontFamily,
-    fontSize: fontSize,
-    rowWidth: rowWidth
+  const headerProps = {
+    headerHeight,
+    fontFamily,
+    fontSize,
+    rowWidth
   };
-  var selectedTaskId = selectedTask ? selectedTask.id : "";
-  var tableProps = {
-    rowHeight: rowHeight,
-    rowWidth: rowWidth,
-    fontFamily: fontFamily,
-    fontSize: fontSize,
-    tasks: tasks,
-    leafTasks: leafTasks,
-    locale: locale,
+  const selectedTaskId = selectedTask ? selectedTask.id : "";
+  const tableProps = {
+    rowHeight,
+    rowWidth,
+    fontFamily,
+    fontSize,
+    tasks,
+    leafTasks,
+    locale,
     selectedTaskId: selectedTaskId,
-    setSelectedTask: setSelectedTask,
-    onExpanderClick: onExpanderClick,
-    taskLabelRenderer: taskLabelRenderer
+    setSelectedTask,
+    onExpanderClick,
+    taskLabelRenderer,
+    selectedTaskIds,
+    onTaskSelectionChange
   };
   return React.createElement("div", {
     ref: taskListRef
@@ -678,17 +691,19 @@ var TaskList = function TaskList(_ref) {
 
 var styles$4 = {"gridRow":"_2dZTy","gridRowLine":"_3rUKi","gridTick":"_RuwuK","darkerGridRow":"_2M-tt"};
 
-var GridBody = function GridBody(_ref) {
-  var tasks = _ref.tasks,
-      dates = _ref.dates,
-      rowHeight = _ref.rowHeight,
-      svgWidth = _ref.svgWidth,
-      columnWidth = _ref.columnWidth,
-      todayColor = _ref.todayColor,
-      rtl = _ref.rtl;
-  var y = 0;
-  var gridRows = [];
-  var rowLines = [React.createElement("line", {
+const GridBody = _ref => {
+  let {
+    tasks,
+    dates,
+    rowHeight,
+    svgWidth,
+    columnWidth,
+    todayColor,
+    rtl
+  } = _ref;
+  let y = 0;
+  const gridRows = [];
+  const rowLines = [React.createElement("line", {
     key: "RowLineFirst",
     x: "0",
     y1: 0,
@@ -697,9 +712,8 @@ var GridBody = function GridBody(_ref) {
     className: styles$4.gridRowLine
   })];
 
-  for (var _iterator = _createForOfIteratorHelperLoose(tasks), _step; !(_step = _iterator()).done;) {
-    var task = _step.value;
-    var isDarkerRow = task.type === "milestone";
+  for (const task of tasks) {
+    const isDarkerRow = task.type === "milestone";
     gridRows.push(React.createElement("rect", {
       key: "Row" + task.id,
       x: "0",
@@ -719,13 +733,13 @@ var GridBody = function GridBody(_ref) {
     y += rowHeight;
   }
 
-  var now = new Date();
-  var tickX = 0;
-  var ticks = [];
-  var today = React.createElement("rect", null);
+  const now = new Date();
+  let tickX = 0;
+  const ticks = [];
+  let today = React.createElement("rect", null);
 
-  for (var i = 0; i < dates.length; i++) {
-    var date = dates[i];
+  for (let i = 0; i < dates.length; i++) {
+    const date = dates[i];
     ticks.push(React.createElement("line", {
       key: date.getTime(),
       x1: tickX,
@@ -771,7 +785,7 @@ var GridBody = function GridBody(_ref) {
   }, today));
 };
 
-var Grid = function Grid(props) {
+const Grid = props => {
   return React.createElement("g", {
     className: "grid"
   }, React.createElement(GridBody, Object.assign({}, props)));
@@ -779,16 +793,17 @@ var Grid = function Grid(props) {
 
 var styles$5 = {"calendarBottomText":"_9w8d5","calendarTopTick":"_1rLuZ","calendarTopText":"_2q1Kt","calendarHeader":"_35nLX","textAnchorStart":"_2Shd-","textAnchorMiddle":"_2XXW4","textAnchorEnd":"_3GdnC"};
 
-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$5.textAnchorStart : textAnchor === "middle" ? styles$5.textAnchorMiddle : styles$5.textAnchorEnd;
+const TopPartOfCalendar = _ref => {
+  let {
+    value,
+    x1Line,
+    y1Line,
+    y2Line,
+    xText,
+    yText,
+    textAnchor = "middle"
+  } = _ref;
+  const textAnchorClass = textAnchor === "start" ? styles$5.textAnchorStart : textAnchor === "middle" ? styles$5.textAnchorMiddle : styles$5.textAnchorEnd;
   return React.createElement("g", {
     className: "calendarTop"
   }, React.createElement("line", {
@@ -802,28 +817,30 @@ var TopPartOfCalendar = function TopPartOfCalendar(_ref) {
     key: value + "text",
     y: yText,
     x: xText,
-    className: styles$5.calendarTopText + " " + textAnchorClass
+    className: `${styles$5.calendarTopText} ${textAnchorClass}`
   }, value));
 };
 
-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;
-
-  var getCalendarValuesForYear = function getCalendarValuesForYear() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
-
-    for (var i = 0; i < dateSetup.dates.length; i++) {
-      var date = dateSetup.dates[i];
-      var bottomValue = date.getFullYear();
+const Calendar = _ref => {
+  let {
+    dateSetup,
+    locale,
+    viewMode,
+    rtl,
+    headerHeight,
+    columnWidth,
+    fontFamily,
+    fontSize
+  } = _ref;
+
+  const getCalendarValuesForYear = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
+
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const bottomValue = date.getFullYear();
       bottomValues.push(React.createElement("text", {
         key: date.getFullYear(),
         y: headerHeight * 0.8,
@@ -832,8 +849,8 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        var topValue = date.getFullYear().toString();
-        var xText = void 0;
+        const topValue = date.getFullYear().toString();
+        let xText;
 
         if (rtl) {
           xText = (6 + i + date.getFullYear() + 1) * columnWidth;
@@ -856,25 +873,25 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForQuarter = function getCalendarValuesForQuarter() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
+  const getCalendarValuesForQuarter = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
 
-    for (var i = 0; i < dateSetup.dates.length; i++) {
-      var date = dateSetup.dates[i];
-      var quarter = Math.floor(date.getMonth() / 3) + 1;
-      var bottomValue = "Q" + quarter;
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const quarter = Math.floor(date.getMonth() / 3) + 1;
+      const bottomValue = `Q${quarter}`;
       bottomValues.push(React.createElement("text", {
-        key: bottomValue + "-" + date.getFullYear(),
+        key: `${bottomValue}-${date.getFullYear()}`,
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
         className: styles$5.calendarBottomText
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        var topValue = date.getFullYear().toString();
-        var xText = void 0;
+        const topValue = date.getFullYear().toString();
+        let xText;
 
         if (rtl) {
           xText = (3 + i + quarter) * columnWidth;
@@ -897,26 +914,26 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForMonth = function getCalendarValuesForMonth() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
+  const getCalendarValuesForMonth = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
 
-    for (var i = 0; i < dateSetup.dates.length; i++) {
-      var date = dateSetup.dates[i];
-      var bottomValue = date.toLocaleString(locale, {
+    for (let i = 0; i < dateSetup.dates.length; i++) {
+      const date = dateSetup.dates[i];
+      const bottomValue = date.toLocaleString(locale, {
         month: "short"
       });
       bottomValues.push(React.createElement("text", {
         key: bottomValue + date.getFullYear(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorEnd
+        className: `${styles$5.calendarTopText} ${styles$5.textAnchorEnd}`
       }, bottomValue));
 
       if (i === 0 || date.getFullYear() !== dateSetup.dates[i - 1].getFullYear()) {
-        var topValue = date.getFullYear().toString();
-        var xText = void 0;
+        const topValue = date.getFullYear().toString();
+        let xText;
 
         if (rtl) {
           xText = (6 + i + date.getMonth() + 1) * columnWidth;
@@ -941,27 +958,27 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForWeek = function getCalendarValuesForWeek() {
-    var topValues = [];
-    var bottomValues = [];
-    var weeksCount = 1;
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForWeek = () => {
+    const topValues = [];
+    const bottomValues = [];
+    let weeksCount = 1;
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = dates.length - 1; i >= 0; i--) {
-      var date = dates[i];
-      var topValue = "";
+    for (let i = dates.length - 1; i >= 0; i--) {
+      const date = dates[i];
+      let topValue = "";
 
       if (i === 0 || date.getMonth() !== dates[i - 1].getMonth()) {
-        topValue = getLocaleMonth(date, locale) + ", " + date.getFullYear();
+        topValue = `${getLocaleMonth(date, locale)}, ${date.getFullYear()}`;
       }
 
-      var bottomValue = "W" + getWeekNumberISO8601(date);
+      const bottomValue = `W${getWeekNumberISO8601(date)}`;
       bottomValues.push(React.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorStart
+        className: `${styles$5.calendarTopText} ${styles$5.textAnchorStart}`
       }, bottomValue));
 
       if (topValue) {
@@ -987,24 +1004,24 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForDay = function getCalendarValuesForDay() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForDay = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate().toString();
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate().toString()}`;
       bottomValues.push(React.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * i + columnWidth * 0.5,
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorMiddle
+        className: `${styles$5.calendarTopText} ${styles$5.textAnchorMiddle}`
       }, bottomValue));
 
       if (i + 1 !== dates.length && date.getMonth() !== dates[i + 1].getMonth()) {
-        var topValue = getLocaleMonth(date, locale) + " " + date.getFullYear();
+        const topValue = `${getLocaleMonth(date, locale)} ${date.getFullYear()}`;
         topValues.push(React.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -1020,28 +1037,28 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForPartOfDay = function getCalendarValuesForPartOfDay() {
-    var topValues = [];
-    var bottomValues = [];
-    var ticks = viewMode === ViewMode.HalfDay ? 2 : 4;
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForPartOfDay = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const ticks = viewMode === ViewMode.HalfDay ? 2 : 4;
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = getCachedDateTimeFormat(locale, {
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React.createElement("text", {
         key: date.getTime(),
         y: headerHeight * 0.8,
         x: columnWidth * (i + +rtl),
-        className: styles$5.calendarTopText + " " + styles$5.textAnchorMiddle,
+        className: `${styles$5.calendarTopText} ${styles$5.textAnchorMiddle}`,
         fontFamily: fontFamily
       }, bottomValue));
 
       if (i === 0 || date.getDate() !== dates[i - 1].getDate()) {
-        var topValue = getLocalDayOfWeek(date, locale, "short") + ", " + date.getDate() + " " + getLocaleMonth(date, locale);
+        const topValue = `${getLocalDayOfWeek(date, locale, "short")}, ${date.getDate()} ${getLocaleMonth(date, locale)}`;
         topValues.push(React.createElement(TopPartOfCalendar, {
           key: topValue + date.getFullYear(),
           value: topValue,
@@ -1057,15 +1074,15 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var getCalendarValuesForHour = function getCalendarValuesForHour() {
-    var topValues = [];
-    var bottomValues = [];
-    var topDefaultHeight = headerHeight * 0.5;
-    var dates = dateSetup.dates;
+  const getCalendarValuesForHour = () => {
+    const topValues = [];
+    const bottomValues = [];
+    const topDefaultHeight = headerHeight * 0.5;
+    const dates = dateSetup.dates;
 
-    for (var i = 0; i < dates.length; i++) {
-      var date = dates[i];
-      var bottomValue = getCachedDateTimeFormat(locale, {
+    for (let i = 0; i < dates.length; i++) {
+      const date = dates[i];
+      const bottomValue = getCachedDateTimeFormat(locale, {
         hour: "numeric"
       }).format(date);
       bottomValues.push(React.createElement("text", {
@@ -1077,9 +1094,9 @@ var Calendar = function Calendar(_ref) {
       }, bottomValue));
 
       if (i !== 0 && date.getDate() !== dates[i - 1].getDate()) {
-        var displayDate = dates[i - 1];
-        var topValue = getLocalDayOfWeek(displayDate, locale, "long") + ", " + displayDate.getDate() + " " + getLocaleMonth(displayDate, locale);
-        var topPosition = (date.getHours() - 24) / 2;
+        const displayDate = dates[i - 1];
+        const topValue = `${getLocalDayOfWeek(displayDate, locale, "long")}, ${displayDate.getDate()} ${getLocaleMonth(displayDate, locale)}`;
+        const topPosition = (date.getHours() - 24) / 2;
         topValues.push(React.createElement(TopPartOfCalendar, {
           key: topValue + displayDate.getFullYear(),
           value: topValue,
@@ -1095,58 +1112,37 @@ var Calendar = function Calendar(_ref) {
     return [topValues, bottomValues];
   };
 
-  var topValues = [];
-  var bottomValues = [];
+  let topValues = [];
+  let bottomValues = [];
 
   switch (dateSetup.viewMode) {
     case ViewMode.Year:
-      var _getCalendarValuesFor = getCalendarValuesForYear();
-
-      topValues = _getCalendarValuesFor[0];
-      bottomValues = _getCalendarValuesFor[1];
+      [topValues, bottomValues] = getCalendarValuesForYear();
       break;
 
     case ViewMode.Quarter:
-      var _getCalendarValuesFor2 = getCalendarValuesForQuarter();
-
-      topValues = _getCalendarValuesFor2[0];
-      bottomValues = _getCalendarValuesFor2[1];
+      [topValues, bottomValues] = getCalendarValuesForQuarter();
       break;
 
     case ViewMode.Month:
-      var _getCalendarValuesFor3 = getCalendarValuesForMonth();
-
-      topValues = _getCalendarValuesFor3[0];
-      bottomValues = _getCalendarValuesFor3[1];
+      [topValues, bottomValues] = getCalendarValuesForMonth();
       break;
 
     case ViewMode.Week:
-      var _getCalendarValuesFor4 = getCalendarValuesForWeek();
-
-      topValues = _getCalendarValuesFor4[0];
-      bottomValues = _getCalendarValuesFor4[1];
+      [topValues, bottomValues] = getCalendarValuesForWeek();
       break;
 
     case ViewMode.Day:
-      var _getCalendarValuesFor5 = getCalendarValuesForDay();
-
-      topValues = _getCalendarValuesFor5[0];
-      bottomValues = _getCalendarValuesFor5[1];
+      [topValues, bottomValues] = getCalendarValuesForDay();
       break;
 
     case ViewMode.QuarterDay:
     case ViewMode.HalfDay:
-      var _getCalendarValuesFor6 = getCalendarValuesForPartOfDay();
-
-      topValues = _getCalendarValuesFor6[0];
-      bottomValues = _getCalendarValuesFor6[1];
+      [topValues, bottomValues] = getCalendarValuesForPartOfDay();
       break;
 
     case ViewMode.Hour:
-      var _getCalendarValuesFor7 = getCalendarValuesForHour();
-
-      topValues = _getCalendarValuesFor7[0];
-      bottomValues = _getCalendarValuesFor7[1];
+      [topValues, bottomValues] = getCalendarValuesForHour();
   }
 
   return React.createElement("g", {
@@ -1182,27 +1178,23 @@ function _catch(body, recover) {
 	return result;
 }
 
-var Arrow = function Arrow(_ref) {
-  var taskFrom = _ref.taskFrom,
-      taskTo = _ref.taskTo,
-      rowHeight = _ref.rowHeight,
-      taskHeight = _ref.taskHeight,
-      arrowIndent = _ref.arrowIndent,
-      rtl = _ref.rtl,
-      arrowColor = _ref.arrowColor;
-  var path;
-  var trianglePoints;
+const Arrow = _ref => {
+  let {
+    taskFrom,
+    taskTo,
+    rowHeight,
+    taskHeight,
+    arrowIndent,
+    rtl,
+    arrowColor
+  } = _ref;
+  let path;
+  let trianglePoints;
 
   if (rtl) {
-    var _drownPathAndTriangle = drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
-
-    path = _drownPathAndTriangle[0];
-    trianglePoints = _drownPathAndTriangle[1];
+    [path, trianglePoints] = drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
   } else {
-    var _drownPathAndTriangle2 = drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
-
-    path = _drownPathAndTriangle2[0];
-    trianglePoints = _drownPathAndTriangle2[1];
+    [path, trianglePoints] = drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent);
   }
 
   return React.createElement("g", {
@@ -1218,8 +1210,8 @@ var Arrow = function Arrow(_ref) {
   }));
 };
 
-var drownPathAndTriangle = function drownPathAndTriangle(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
-  var taskToStart, taskFromEnd;
+const drownPathAndTriangle = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) => {
+  let taskToStart, taskFromEnd;
 
   if (taskTo.x1 > 0 && taskTo.actualx1 > 0) {
     taskToStart = Math.min(taskTo.x1, taskTo.actualx1);
@@ -1229,43 +1221,51 @@ var drownPathAndTriangle = function drownPathAndTriangle(taskFrom, taskTo, rowHe
     taskFromEnd = Math.max(taskFrom.x2, taskFrom.actualx2);
   } else if (taskFrom.x2 > 0) taskFromEnd = taskFrom.x2;else if (taskFrom.actualx2 > 0) taskFromEnd = taskFrom.actualx2;else taskFromEnd = 0;
 
-  var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
-  var taskToEndPosition = taskTo.y + taskHeight / 2;
-  var taskFromEndPosition = taskFromEnd + arrowIndent * 2;
-  var taskFromHorizontalOffsetValue = taskFromEndPosition < taskToStart ? "" : "H " + (taskToStart - arrowIndent);
-  var taskToHorizontalOffsetValue = taskFromEndPosition > taskToStart ? arrowIndent : taskToStart - taskFromEnd - arrowIndent;
-  var path = "M " + taskFromEnd + " " + (taskFrom.y + taskHeight / 2) + " \n  h " + arrowIndent + " \n  v " + indexCompare * rowHeight / 2 + " \n  " + taskFromHorizontalOffsetValue + "\n  V " + taskToEndPosition + " \n  h " + taskToHorizontalOffsetValue;
-  var trianglePoints = taskToStart + "," + taskToEndPosition + " \n  " + (taskToStart - 5) + "," + (taskToEndPosition - 5) + " \n  " + (taskToStart - 5) + "," + (taskToEndPosition + 5);
+  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+  const taskToEndPosition = taskTo.y + taskHeight / 2;
+  const taskFromEndPosition = taskFromEnd + arrowIndent * 2;
+  const taskFromHorizontalOffsetValue = taskFromEndPosition < taskToStart ? "" : `H ${taskToStart - arrowIndent}`;
+  const taskToHorizontalOffsetValue = taskFromEndPosition > taskToStart ? arrowIndent : taskToStart - taskFromEnd - arrowIndent;
+  const path = `M ${taskFromEnd} ${taskFrom.y + taskHeight / 2} 
+  h ${arrowIndent} 
+  v ${indexCompare * rowHeight / 2} 
+  ${taskFromHorizontalOffsetValue}
+  V ${taskToEndPosition} 
+  h ${taskToHorizontalOffsetValue}`;
+  const trianglePoints = `${taskToStart},${taskToEndPosition} 
+  ${taskToStart - 5},${taskToEndPosition - 5} 
+  ${taskToStart - 5},${taskToEndPosition + 5}`;
   return [path, trianglePoints];
 };
 
-var drownPathAndTriangleRTL = function drownPathAndTriangleRTL(taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) {
-  var indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
-  var taskToEndPosition = taskTo.y + taskHeight / 2;
-  var taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
-  var taskFromHorizontalOffsetValue = taskFromEndPosition > taskTo.x2 ? "" : "H " + (taskTo.x2 + arrowIndent);
-  var taskToHorizontalOffsetValue = taskFromEndPosition < taskTo.x2 ? -arrowIndent : taskTo.x2 - taskFrom.x1 + arrowIndent;
-  var path = "M " + taskFrom.x1 + " " + (taskFrom.y + taskHeight / 2) + " \n  h " + -arrowIndent + " \n  v " + indexCompare * rowHeight / 2 + " \n  " + taskFromHorizontalOffsetValue + "\n  V " + taskToEndPosition + " \n  h " + taskToHorizontalOffsetValue;
-  var trianglePoints = taskTo.x2 + "," + taskToEndPosition + " \n  " + (taskTo.x2 + 5) + "," + (taskToEndPosition + 5) + " \n  " + (taskTo.x2 + 5) + "," + (taskToEndPosition - 5);
+const drownPathAndTriangleRTL = (taskFrom, taskTo, rowHeight, taskHeight, arrowIndent) => {
+  const indexCompare = taskFrom.index > taskTo.index ? -1 : 1;
+  const taskToEndPosition = taskTo.y + taskHeight / 2;
+  const taskFromEndPosition = taskFrom.x1 - arrowIndent * 2;
+  const taskFromHorizontalOffsetValue = taskFromEndPosition > taskTo.x2 ? "" : `H ${taskTo.x2 + arrowIndent}`;
+  const taskToHorizontalOffsetValue = taskFromEndPosition < taskTo.x2 ? -arrowIndent : taskTo.x2 - taskFrom.x1 + arrowIndent;
+  const path = `M ${taskFrom.x1} ${taskFrom.y + taskHeight / 2} 
+  h ${-arrowIndent} 
+  v ${indexCompare * rowHeight / 2} 
+  ${taskFromHorizontalOffsetValue}
+  V ${taskToEndPosition} 
+  h ${taskToHorizontalOffsetValue}`;
+  const trianglePoints = `${taskTo.x2},${taskToEndPosition} 
+  ${taskTo.x2 + 5},${taskToEndPosition + 5} 
+  ${taskTo.x2 + 5},${taskToEndPosition - 5}`;
   return [path, trianglePoints];
 };
 
-var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
-  var barTasks = tasks.map(function (t, i) {
+const convertToBarTasks = (tasks, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) => {
+  let barTasks = tasks.map((t, i) => {
     return convertToBarTask(t, i, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor);
   });
-  barTasks = barTasks.map(function (task) {
-    var dependencies = task.dependencies || [];
+  barTasks = barTasks.map(task => {
+    const dependencies = task.dependencies || [];
 
-    var _loop = function _loop(j) {
-      var dependence = barTasks.findIndex(function (value) {
-        return value.id === dependencies[j];
-      });
+    for (let j = 0; j < dependencies.length; j++) {
+      const dependence = barTasks.findIndex(value => value.id === dependencies[j]);
       if (dependence !== -1 && task.start.getTime() > 0 && task.end.getTime() > 0) barTasks[dependence].barChildren.push(task);
-    };
-
-    for (var j = 0; j < dependencies.length; j++) {
-      _loop(j);
     }
 
     return task;
@@ -1273,8 +1273,8 @@ var convertToBarTasks = function convertToBarTasks(tasks, dates, columnWidth, ro
   return barTasks;
 };
 
-var convertToBarTask = function convertToBarTask(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
-  var barTask;
+const convertToBarTask = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor, projectProgressColor, projectProgressSelectedColor, projectBackgroundColor, projectBackgroundSelectedColor, milestoneBackgroundColor, milestoneBackgroundSelectedColor) => {
+  let barTask;
 
   switch (task.type) {
     case "milestone":
@@ -1293,13 +1293,13 @@ var convertToBarTask = function convertToBarTask(task, index, dates, columnWidth
   return barTask;
 };
 
-var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) {
-  var x1;
-  var x2;
-  var actualx1;
-  var actualx2;
-  var progressStartWidth;
-  var progressEndWidth;
+const convertToBar = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, rtl, barProgressColor, barProgressSelectedColor, barBackgroundColor, barBackgroundSelectedColor) => {
+  let x1;
+  let x2;
+  let actualx1;
+  let actualx2;
+  let progressStartWidth;
+  let progressEndWidth;
 
   if (rtl) {
     x2 = task.start ? taskXCoordinateRTL(task.start, dates, columnWidth) : -1;
@@ -1315,108 +1315,100 @@ var convertToBar = function convertToBar(task, index, dates, columnWidth, rowHei
 
   progressStartWidth = actualx1 && x1 ? Math.abs(actualx1 - x1) : -1;
   progressEndWidth = actualx2 && x2 ? Math.abs(actualx2 - x2) : -1;
-  var typeInternal = task.type;
-
-  var _progressWithByParams = progressWithByParams(actualx1, actualx2, task.progress, rtl),
-      progressWidth = _progressWithByParams[0],
-      progressX = _progressWithByParams[1];
-
-  var y = taskYCoordinate(index, rowHeight, taskHeight);
-  var hideChildren = task.hideChildren || false;
-
-  var styles = _extends({
+  let typeInternal = task.type;
+  const [progressWidth, progressX] = progressWithByParams(actualx1, actualx2, task.progress, rtl);
+  const y = taskYCoordinate(index, rowHeight, taskHeight);
+  const hideChildren = task.hideChildren || false;
+  const styles = {
     backgroundColor: barBackgroundColor,
     backgroundSelectedColor: barBackgroundSelectedColor,
     progressColor: barProgressColor,
-    progressSelectedColor: barProgressSelectedColor
-  }, task.styles);
-
-  return _extends({}, task, {
-    typeInternal: typeInternal,
-    x1: x1,
-    x2: x2,
-    actualx1: actualx1,
-    actualx2: actualx2,
-    progressStartWidth: progressStartWidth,
-    progressEndWidth: progressEndWidth,
-    y: y,
-    index: index,
-    progressX: progressX,
-    progressWidth: progressWidth,
-    barCornerRadius: barCornerRadius,
-    handleWidth: handleWidth,
-    hideChildren: hideChildren,
+    progressSelectedColor: barProgressSelectedColor,
+    ...task.styles
+  };
+  return { ...task,
+    typeInternal,
+    x1,
+    x2,
+    actualx1,
+    actualx2,
+    progressStartWidth,
+    progressEndWidth,
+    y,
+    index,
+    progressX,
+    progressWidth,
+    barCornerRadius,
+    handleWidth,
+    hideChildren,
     height: taskHeight,
     barChildren: [],
-    styles: styles
-  });
+    styles
+  };
 };
 
-var convertToMilestone = function convertToMilestone(task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor) {
-  var x = task.start && task.end ? taskXCoordinate(task.start, dates, columnWidth) : 0;
-  var y = taskYCoordinate(index, rowHeight, taskHeight);
-  var x1 = task.start && task.end ? x - taskHeight * 0.5 : 0;
-  var x2 = task.start && task.end ? x + taskHeight * 0.5 : 0;
-  var rotatedHeight = taskHeight / 1.414;
-
-  var styles = _extends({
+const convertToMilestone = (task, index, dates, columnWidth, rowHeight, taskHeight, barCornerRadius, handleWidth, milestoneBackgroundColor, milestoneBackgroundSelectedColor) => {
+  const x = task.start && task.end ? taskXCoordinate(task.start, dates, columnWidth) : 0;
+  const y = taskYCoordinate(index, rowHeight, taskHeight);
+  const x1 = task.start && task.end ? x - taskHeight * 0.5 : 0;
+  const x2 = task.start && task.end ? x + taskHeight * 0.5 : 0;
+  const rotatedHeight = taskHeight / 1.414;
+  const styles = {
     backgroundColor: milestoneBackgroundColor,
     backgroundSelectedColor: milestoneBackgroundSelectedColor,
     progressColor: "",
-    progressSelectedColor: ""
-  }, task.styles);
-
-  return _extends({}, task, {
-    x1: x1,
-    x2: x2,
+    progressSelectedColor: "",
+    ...task.styles
+  };
+  return { ...task,
+    x1,
+    x2,
     actualx1: x1,
     actualx2: x2,
     progressStartWidth: 0,
     progressEndWidth: 0,
-    y: y,
-    index: index,
+    y,
+    index,
     progressX: 0,
     progressWidth: 0,
-    barCornerRadius: barCornerRadius,
-    handleWidth: handleWidth,
+    barCornerRadius,
+    handleWidth,
     typeInternal: task.type,
     progress: 0,
     height: rotatedHeight,
     hideChildren: undefined,
     barChildren: [],
-    styles: styles
-  });
+    styles
+  };
 };
 
-var taskXCoordinate = function taskXCoordinate(xDate, dates, columnWidth) {
-  var index = dates.findIndex(function (d) {
-    return d.getTime() >= xDate.getTime();
-  }) - 1;
+const taskXCoordinate = (xDate, dates, columnWidth) => {
+  const index = dates.findIndex(d => d.getTime() >= xDate.getTime()) - 1;
 
   if (index < 0) {
     return 0;
   }
 
-  var remainderMillis = xDate.getTime() - dates[index].getTime();
-  var percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
-  var x = index * columnWidth + percentOfInterval * columnWidth;
+  const remainderMillis = xDate.getTime() - dates[index].getTime();
+  const percentOfInterval = remainderMillis / (dates[index + 1].getTime() - dates[index].getTime());
+  const x = index * columnWidth + percentOfInterval * columnWidth;
   return x;
 };
 
-var taskXCoordinateRTL = function taskXCoordinateRTL(xDate, dates, columnWidth) {
-  var x = taskXCoordinate(xDate, dates, columnWidth);
+const taskXCoordinateRTL = (xDate, dates, columnWidth) => {
+  let x = taskXCoordinate(xDate, dates, columnWidth);
   x += columnWidth;
   return x;
 };
 
-var taskYCoordinate = function taskYCoordinate(index, rowHeight, taskHeight) {
-  var y = index * rowHeight + (rowHeight - taskHeight) / 2;
+const taskYCoordinate = (index, rowHeight, taskHeight) => {
+  const y = index * rowHeight + (rowHeight - taskHeight) / 2;
   return y;
 };
 
-var progressWithByParams = function progressWithByParams(taskX1, taskX2, progress, rtl) {
-  var progressWidth = taskX2 > 0 && taskX1 > 0 ? (taskX2 - taskX1) * progress * 0.01 : 0;
-  var progressX;
+const progressWithByParams = (taskX1, taskX2, progress, rtl) => {
+  const progressWidth = taskX2 > 0 && taskX1 > 0 ? (taskX2 - taskX1) * progress * 0.01 : 0;
+  let progressX;
 
   if (rtl) {
     progressX = taskX2 > 0 ? taskX2 - progressWidth : 0;
@@ -1426,79 +1418,79 @@ var progressWithByParams = function progressWithByParams(taskX1, taskX2, progres
 
   return [progressWidth, progressX];
 };
-var getProgressPoint = function getProgressPoint(progressX, taskY, taskHeight) {
-  var point = [progressX - 5, taskY + taskHeight, progressX + 5, taskY + taskHeight, progressX, taskY + taskHeight - 8.66];
+const getProgressPoint = (progressX, taskY, taskHeight) => {
+  const point = [progressX - 5, taskY + taskHeight, progressX + 5, taskY + taskHeight, progressX, taskY + taskHeight - 8.66];
   return point.join(",");
 };
 
-var startByX = function startByX(x, xStep, task) {
+const startByX = (x, xStep, task) => {
   if (x >= task.x2 - task.handleWidth * 2) {
     x = task.x2 - task.handleWidth * 2;
   }
 
-  var steps = Math.round((x - task.x1) / xStep);
-  var additionalXValue = steps * xStep;
-  var newX = task.x1 + additionalXValue;
+  const steps = Math.round((x - task.x1) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX = task.x1 + additionalXValue;
   return newX;
 };
 
-var startByActualX = function startByActualX(x, xStep, task) {
+const startByActualX = (x, xStep, task) => {
   if (x >= task.actualx2 - task.handleWidth * 2) {
     x = task.actualx2 - task.handleWidth * 2;
   }
 
-  var steps = Math.round((x - task.actualx1) / xStep);
-  var additionalXValue = steps * xStep;
-  var newX = task.actualx1 + additionalXValue;
+  const steps = Math.round((x - task.actualx1) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX = task.actualx1 + additionalXValue;
   return newX;
 };
 
-var endByX = function endByX(x, xStep, task) {
+const endByX = (x, xStep, task) => {
   if (x <= task.x1 + task.handleWidth * 2) {
     x = task.x1 + task.handleWidth * 2;
   }
 
-  var steps = Math.round((x - task.x2) / xStep);
-  var additionalXValue = steps * xStep;
-  var newX = task.x2 + additionalXValue;
+  const steps = Math.round((x - task.x2) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX = task.x2 + additionalXValue;
   return newX;
 };
 
-var endByActualX = function endByActualX(x, xStep, task) {
+const endByActualX = (x, xStep, task) => {
   if (x <= task.actualx1 + task.handleWidth * 2) {
     x = task.actualx1 + task.handleWidth * 2;
   }
 
-  var steps = Math.round((x - task.actualx2) / xStep);
-  var additionalXValue = steps * xStep;
-  var newX = task.actualx2 + additionalXValue;
+  const steps = Math.round((x - task.actualx2) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX = task.actualx2 + additionalXValue;
   return newX;
 };
 
-var moveByX = function moveByX(x, xStep, task) {
-  var steps = Math.round((x - task.x1) / xStep);
-  var additionalXValue = steps * xStep;
-  var newX1 = task.x1 + additionalXValue;
-  var newX2 = newX1 + task.x2 - task.x1;
+const moveByX = (x, xStep, task) => {
+  const steps = Math.round((x - task.x1) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX1 = task.x1 + additionalXValue;
+  const newX2 = newX1 + task.x2 - task.x1;
   return [newX1, newX2];
 };
 
-var moveByActualX = function moveByActualX(x, xStep, task) {
-  var steps = Math.round((x - task.actualx1) / xStep);
-  var additionalXValue = steps * xStep;
-  var newX1 = task.actualx1 + additionalXValue;
-  var newX2 = newX1 + task.actualx2 - task.actualx1;
+const moveByActualX = (x, xStep, task) => {
+  const steps = Math.round((x - task.actualx1) / xStep);
+  const additionalXValue = steps * xStep;
+  const newX1 = task.actualx1 + additionalXValue;
+  const newX2 = newX1 + task.actualx2 - task.actualx1;
   return [newX1, newX2];
 };
 
-var dateByX = function dateByX(x, taskX, taskDate, xStep, timeStep) {
-  var newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
+const dateByX = (x, taskX, taskDate, xStep, timeStep) => {
+  let newDate = new Date((x - taskX) / xStep * timeStep + taskDate.getTime());
   newDate = new Date(newDate.getTime() + (newDate.getTimezoneOffset() - taskDate.getTimezoneOffset()) * 60000);
   return newDate;
 };
 
-var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) {
-  var result;
+const handleTaskBySVGMouseEvent = (svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) => {
+  let result;
 
   switch (selectedTask.type) {
     case "milestone":
@@ -1513,15 +1505,15 @@ var handleTaskBySVGMouseEvent = function handleTaskBySVGMouseEvent(svgX, action,
   return result;
 };
 
-var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) {
-  var changedTask = _extends({}, selectedTask);
-
-  var isChanged = false;
+const handleTaskBySVGMouseEventForBar = (svgX, action, selectedTask, type, xStep, timeStep, initEventX1Delta, rtl) => {
+  const changedTask = { ...selectedTask
+  };
+  let isChanged = false;
 
   switch (action) {
     case "start":
       {
-        var newX1 = type == "planned" ? startByX(svgX, xStep, selectedTask) : startByActualX(svgX, xStep, selectedTask);
+        const newX1 = type == "planned" ? startByX(svgX, xStep, selectedTask) : startByActualX(svgX, xStep, selectedTask);
         if (type == "planned") changedTask.x1 = newX1;else if (type == "actual") changedTask.actualx1 = newX1;
         isChanged = changedTask.x1 !== selectedTask.x1 || changedTask.actualx1 !== selectedTask.actualx1;
 
@@ -1534,10 +1526,7 @@ var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(s
             if (type == "actual") changedTask.actualStart = dateByX(newX1, selectedTask.actualx1, selectedTask.actualStart, xStep, timeStep);
           }
 
-          var _progressWithByParams2 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
-              progressWidth = _progressWithByParams2[0],
-              progressX = _progressWithByParams2[1];
-
+          const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
           changedTask.progressWidth = progressWidth;
           changedTask.progressX = progressX;
         }
@@ -1547,7 +1536,7 @@ var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(s
 
     case "end":
       {
-        var newX2 = type == "planned" ? endByX(svgX, xStep, selectedTask) : endByActualX(svgX, xStep, selectedTask);
+        const newX2 = type == "planned" ? endByX(svgX, xStep, selectedTask) : endByActualX(svgX, xStep, selectedTask);
         if (type == "planned") changedTask.x2 = newX2;else if (type == "actual") changedTask.actualx2 = newX2;
         isChanged = changedTask.x2 !== selectedTask.x2 || changedTask.actualx2 !== selectedTask.actualx2;
 
@@ -1560,12 +1549,9 @@ var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(s
             if (type == "actual") changedTask.actualEnd = dateByX(newX2, selectedTask.actualx2, selectedTask.actualEnd, xStep, timeStep);
           }
 
-          var _progressWithByParams3 = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl),
-              _progressWidth = _progressWithByParams3[0],
-              _progressX = _progressWithByParams3[1];
-
-          changedTask.progressWidth = _progressWidth;
-          changedTask.progressX = _progressX;
+          const [progressWidth, progressX] = progressWithByParams(changedTask.x1, changedTask.x2, changedTask.progress, rtl);
+          changedTask.progressWidth = progressWidth;
+          changedTask.progressX = progressX;
         }
 
         break;
@@ -1573,10 +1559,7 @@ var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(s
 
     case "move":
       {
-        var _ref = type == "planned" ? moveByX(svgX - initEventX1Delta, xStep, selectedTask) : moveByActualX(svgX - initEventX1Delta, xStep, selectedTask),
-            newMoveX1 = _ref[0],
-            newMoveX2 = _ref[1];
-
+        const [newMoveX1, newMoveX2] = type == "planned" ? moveByX(svgX - initEventX1Delta, xStep, selectedTask) : moveByActualX(svgX - initEventX1Delta, xStep, selectedTask);
         if (type == "planned") isChanged = newMoveX1 !== selectedTask.x1;
         if (type == "actual") isChanged = newMoveX1 !== selectedTask.actualx1;
 
@@ -1601,23 +1584,20 @@ var handleTaskBySVGMouseEventForBar = function handleTaskBySVGMouseEventForBar(s
   }
 
   return {
-    isChanged: isChanged,
-    changedTask: changedTask
+    isChanged,
+    changedTask
   };
 };
 
-var handleTaskBySVGMouseEventForMilestone = function handleTaskBySVGMouseEventForMilestone(svgX, action, selectedTask, xStep, timeStep, initEventX1Delta) {
-  var changedTask = _extends({}, selectedTask);
-
-  var isChanged = false;
+const handleTaskBySVGMouseEventForMilestone = (svgX, action, selectedTask, xStep, timeStep, initEventX1Delta) => {
+  const changedTask = { ...selectedTask
+  };
+  let isChanged = false;
 
   switch (action) {
     case "move":
       {
-        var _moveByX = moveByX(svgX - initEventX1Delta, xStep, selectedTask),
-            newMoveX1 = _moveByX[0],
-            newMoveX2 = _moveByX[1];
-
+        const [newMoveX1, newMoveX2] = moveByX(svgX - initEventX1Delta, xStep, selectedTask);
         isChanged = newMoveX1 !== selectedTask.x1;
 
         if (isChanged) {
@@ -1632,8 +1612,8 @@ var handleTaskBySVGMouseEventForMilestone = function handleTaskBySVGMouseEventFo
   }
 
   return {
-    isChanged: isChanged,
-    changedTask: changedTask
+    isChanged,
+    changedTask
   };
 };
 
@@ -1641,21 +1621,13 @@ function isKeyboardEvent(event) {
   return event.key !== undefined;
 }
 function removeHiddenTasks(tasks) {
-  var groupedTasks = tasks.filter(function (t) {
-    return t.hideChildren && t.type === "project";
-  });
+  const groupedTasks = tasks.filter(t => t.hideChildren && t.type === "project");
 
   if (groupedTasks.length > 0) {
-    var _loop = function _loop(i) {
-      var groupedTask = groupedTasks[i];
-      var children = getChildren(tasks, groupedTask);
-      tasks = tasks.filter(function (t) {
-        return children.indexOf(t) === -1;
-      });
-    };
-
-    for (var i = 0; groupedTasks.length > i; i++) {
-      _loop(i);
+    for (let i = 0; groupedTasks.length > i; i++) {
+      const groupedTask = groupedTasks[i];
+      const children = getChildren(tasks, groupedTask);
+      tasks = tasks.filter(t => children.indexOf(t) === -1);
     }
   }
 
@@ -1663,29 +1635,25 @@ function removeHiddenTasks(tasks) {
 }
 
 function getChildren(taskList, task) {
-  var tasks = [];
+  let tasks = [];
 
   if (task.type !== "project") {
-    tasks = taskList.filter(function (t) {
-      return t.dependencies && t.dependencies.indexOf(task.id) !== -1;
-    });
+    tasks = taskList.filter(t => t.dependencies && t.dependencies.indexOf(task.id) !== -1);
   } else {
-    tasks = taskList.filter(function (t) {
-      return t.project && t.project === task.id;
-    });
+    tasks = taskList.filter(t => t.project && t.project === task.id);
   }
 
   var taskChildren = [];
-  tasks.forEach(function (t) {
-    taskChildren.push.apply(taskChildren, getChildren(taskList, t));
+  tasks.forEach(t => {
+    taskChildren.push(...getChildren(taskList, t));
   });
   tasks = tasks.concat(tasks, taskChildren);
   return tasks;
 }
 
-var sortTasks = function sortTasks(taskA, taskB) {
-  var orderA = taskA.displayOrder || Number.MAX_VALUE;
-  var orderB = taskB.displayOrder || Number.MAX_VALUE;
+const sortTasks = (taskA, taskB) => {
+  const orderA = taskA.displayOrder || Number.MAX_VALUE;
+  const orderB = taskB.displayOrder || Number.MAX_VALUE;
 
   if (orderA > orderB) {
     return 1;
@@ -1696,24 +1664,26 @@ var sortTasks = function sortTasks(taskA, taskB) {
   }
 };
 
-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,
-      onMouseDown = _ref.onMouseDown;
-
-  var getProcessColor = function getProcessColor() {
+const BarDisplay = _ref => {
+  let {
+    x,
+    y,
+    type,
+    width,
+    height,
+    isSelected,
+    progressX,
+    progressWidth,
+    barCornerRadius,
+    styles,
+    onMouseDown
+  } = _ref;
+
+  const getProcessColor = () => {
     return isSelected ? styles.progressSelectedColor : styles.progressColor;
   };
 
-  var getBarColor = function getBarColor() {
+  const getBarColor = () => {
     return isSelected ? styles.backgroundSelectedColor : styles.backgroundColor;
   };
 
@@ -1760,13 +1730,15 @@ var BarDisplay = function BarDisplay(_ref) {
 
 var styles$6 = {"barWrapper":"_KxSXS","barHandle":"_3w_5u","barBackground":"_31ERP"};
 
-var BarDateHandle = function BarDateHandle(_ref) {
-  var x = _ref.x,
-      y = _ref.y,
-      width = _ref.width,
-      height = _ref.height,
-      barCornerRadius = _ref.barCornerRadius,
-      onMouseDown = _ref.onMouseDown;
+const BarDateHandle = _ref => {
+  let {
+    x,
+    y,
+    width,
+    height,
+    barCornerRadius,
+    onMouseDown
+  } = _ref;
   return React.createElement("rect", {
     x: x,
     y: y,
@@ -1779,22 +1751,22 @@ var BarDateHandle = function BarDateHandle(_ref) {
   });
 };
 
-var BarProgressHandle = function BarProgressHandle(_ref) {
-  _objectDestructuringEmpty(_ref);
-
+const BarProgressHandle = _ref => {
   return React.createElement("div", null);
 };
 
-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;
+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;
 
   if (type == "planned") {
     if (task.x1 && task.x2) return React.createElement("g", {
@@ -1813,7 +1785,7 @@ var Bar = function Bar(_ref) {
       barCornerRadius: task.barCornerRadius,
       styles: task.styles,
       isSelected: isSelected,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         isDateChangeable && onEventStart("move", task, e, "planned");
       }
     }), React.createElement("g", {
@@ -1824,7 +1796,7 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("start", task, e, "planned");
       }
     }), React.createElement(BarDateHandle, {
@@ -1833,12 +1805,12 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("end", task, e, "planned");
       }
     })), isProgressChangeable && React.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("progress", task, e, "planned");
       }
     })));else return React.createElement("g", {
@@ -1862,7 +1834,7 @@ var Bar = function Bar(_ref) {
       barCornerRadius: task.barCornerRadius,
       styles: task.styles,
       isSelected: isSelected,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         isDateChangeable && onEventStart("move", task, e, "actual");
       }
     }), React.createElement("g", {
@@ -1873,7 +1845,7 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("start", task, e, "actual");
       }
     }), React.createElement(BarDateHandle, {
@@ -1882,12 +1854,12 @@ var Bar = function Bar(_ref) {
       width: task.handleWidth,
       height: handleHeight,
       barCornerRadius: task.barCornerRadius,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("end", task, e, "actual");
       }
     })), isProgressChangeable && React.createElement(BarProgressHandle, {
       progressPoint: progressPoint,
-      onMouseDown: function onMouseDown(e) {
+      onMouseDown: e => {
         onEventStart("progress", task, e, "actual");
       }
     })));
@@ -1899,14 +1871,16 @@ var Bar = function Bar(_ref) {
   }
 };
 
-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);
+const BarSmall = _ref => {
+  let {
+    task,
+    type,
+    isProgressChangeable,
+    isDateChangeable,
+    onEventStart,
+    isSelected
+  } = _ref;
+  const progressPoint = getProgressPoint(task.progressWidth + task.x1, task.y, task.height);
   return React.createElement("g", {
     className: styles$6.barWrapper,
     tabIndex: 0
@@ -1923,14 +1897,14 @@ var BarSmall = function BarSmall(_ref) {
     barCornerRadius: task.barCornerRadius,
     styles: task.styles,
     isSelected: isSelected,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       isDateChangeable && onEventStart("move", task, e);
     }
   }), React.createElement("g", {
     className: "handleGroup"
   }, isProgressChangeable && React.createElement(BarProgressHandle, {
     progressPoint: progressPoint,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       onEventStart("progress", task, e);
     }
   })));
@@ -1938,14 +1912,17 @@ var BarSmall = function BarSmall(_ref) {
 
 var styles$7 = {"milestoneWrapper":"_RRr13","milestoneBackground":"_2P2B1"};
 
-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() {
+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 = () => {
     return isSelected ? task.styles.backgroundSelectedColor : task.styles.backgroundColor;
   };
 
@@ -1962,7 +1939,7 @@ var Milestone = function Milestone(_ref) {
     ry: task.barCornerRadius,
     transform: transform,
     className: styles$7.milestoneBackground,
-    onMouseDown: function onMouseDown(e) {
+    onMouseDown: e => {
       isDateChangeable && onEventStart("move", task, e);
     }
   }));
@@ -1970,14 +1947,16 @@ var Milestone = function Milestone(_ref) {
 
 var styles$8 = {"projectWrapper":"_1KJ6x","projectBackground":"_2RbVy","projectTop":"_2pZMF"};
 
-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(",");
+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(",");
   return React.createElement("g", {
     tabIndex: 0,
     className: styles$8.projectWrapper
@@ -2018,18 +1997,16 @@ var Project = function Project(_ref) {
   }));
 };
 
-var TaskItem = function TaskItem(props) {
-  var _props = _extends({}, props),
-      task = _props.task,
-      isDelete = _props.isDelete,
-      isSelected = _props.isSelected,
-      onEventStart = _props.onEventStart;
-
-  var _useState = useState([React.createElement("div", null)]),
-      taskItem = _useState[0],
-      setTaskItem = _useState[1];
-
-  useEffect(function () {
+const TaskItem = props => {
+  const {
+    task,
+    isDelete,
+    isSelected,
+    onEventStart
+  } = { ...props
+  };
+  const [taskItem, setTaskItem] = useState([React.createElement("div", null)]);
+  useEffect(() => {
     switch (task.typeInternal) {
       case "milestone":
         setTaskItem([React.createElement(Milestone, Object.assign({}, props))]);
@@ -2045,27 +2022,27 @@ var TaskItem = function TaskItem(props) {
 
       default:
         {
-          var _taskItem = [];
+          let taskItem = [];
 
           if (task.x1 && task.x2) {
-            _taskItem.push(React.createElement(Bar, Object.assign({}, props, {
+            taskItem.push(React.createElement(Bar, Object.assign({}, props, {
               type: "planned"
             })));
           }
 
           if (task.actualx1 && task.actualx2) {
-            _taskItem.push(React.createElement(Bar, Object.assign({}, props, {
+            taskItem.push(React.createElement(Bar, Object.assign({}, props, {
               type: "actual"
             })));
           }
 
-          setTaskItem(_taskItem);
+          setTaskItem(taskItem);
         }
         break;
     }
   }, [task, isSelected]);
   return React.createElement("g", null, React.createElement("g", {
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: e => {
       switch (e.key) {
         case "Delete":
           {
@@ -2076,20 +2053,20 @@ var TaskItem = function TaskItem(props) {
 
       e.stopPropagation();
     },
-    onMouseEnter: function onMouseEnter(e) {
+    onMouseEnter: e => {
       onEventStart("mouseenter", task, e, "planned");
     },
-    onMouseLeave: function onMouseLeave(e) {
+    onMouseLeave: e => {
       onEventStart("mouseleave", task, e, "planned");
     },
-    onDoubleClick: function onDoubleClick(e) {
+    onDoubleClick: e => {
       onEventStart("dblclick", task, e, "planned");
     },
-    onClick: function onClick(e) {
+    onClick: e => {
       onEventStart("click", task, e, "planned");
     }
   }, taskItem[0]), React.createElement("g", {
-    onKeyDown: function onKeyDown(e) {
+    onKeyDown: e => {
       switch (e.key) {
         case "Delete":
           {
@@ -2100,82 +2077,74 @@ var TaskItem = function TaskItem(props) {
 
       e.stopPropagation();
     },
-    onMouseEnter: function onMouseEnter(e) {
+    onMouseEnter: e => {
       onEventStart("mouseenter", task, e, "actual");
     },
-    onMouseLeave: function onMouseLeave(e) {
+    onMouseLeave: e => {
       onEventStart("mouseleave", task, e, "actual");
     },
-    onDoubleClick: function onDoubleClick(e) {
+    onDoubleClick: e => {
       onEventStart("dblclick", task, e, "actual");
     },
-    onClick: function onClick(e) {
+    onClick: e => {
       onEventStart("click", task, e, "actual");
     }
   }, taskItem[1]));
 };
 
-var TaskGanttContent = function TaskGanttContent(_ref) {
+const TaskGanttContent = _ref => {
   var _svg$current;
 
-  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,
-      setGanttEvent = _ref.setGanttEvent,
-      setFailedTask = _ref.setFailedTask,
-      setSelectedTask = _ref.setSelectedTask,
-      onDateChange = _ref.onDateChange,
-      onProgressChange = _ref.onProgressChange,
-      onDoubleClick = _ref.onDoubleClick,
-      onClick = _ref.onClick,
-      onDelete = _ref.onDelete;
-  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 = useState(0),
-      xStep = _useState[0],
-      setXStep = _useState[1];
-
-  var _useState2 = useState(0),
-      initEventX1Delta = _useState2[0],
-      setInitEventX1Delta = _useState2[1];
-
-  var _useState3 = useState(false),
-      isMoving = _useState3[0],
-      setIsMoving = _useState3[1];
-
-  useEffect(function () {
-    var dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
-    var newXStep = timeStep * columnWidth / dateDelta;
+  let {
+    tasks,
+    dates,
+    ganttEvent,
+    selectedTask,
+    rowHeight,
+    columnWidth,
+    timeStep,
+    svg,
+    taskHeight,
+    arrowIndent,
+    fontFamily,
+    fontSize,
+    rtl,
+    setGanttEvent,
+    setFailedTask,
+    setSelectedTask,
+    onDateChange,
+    onProgressChange,
+    onDoubleClick,
+    onClick,
+    onDelete
+  } = _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] = useState(0);
+  const [initEventX1Delta, setInitEventX1Delta] = useState(0);
+  const [isMoving, setIsMoving] = useState(false);
+  useEffect(() => {
+    const dateDelta = dates[1].getTime() - dates[0].getTime() - dates[1].getTimezoneOffset() * 60 * 1000 + dates[0].getTimezoneOffset() * 60 * 1000;
+    const newXStep = timeStep * columnWidth / dateDelta;
     setXStep(newXStep);
   }, [columnWidth, dates, timeStep]);
-  useEffect(function () {
-    var handleMouseMove = function handleMouseMove(event) {
+  useEffect(() => {
+    const handleMouseMove = function (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;
-        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;
+        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);
 
         if (isChanged) {
           setGanttEvent({
             action: ganttEvent.action,
-            changedTask: changedTask
+            changedTask
           });
         }
 
@@ -2185,40 +2154,41 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       }
     };
 
-    var handleMouseUp = function handleMouseUp(event) {
+    const handleMouseUp = function (event) {
       try {
         var _svg$current$getScree2;
 
-        var _temp6 = function _temp6() {
+        function _temp5() {
           if (!operationSuccess) {
             setFailedTask(originalSelectedTask);
           }
-        };
+        }
 
-        var action = ganttEvent.action,
-            originalSelectedTask = ganttEvent.originalSelectedTask,
-            changedTask = ganttEvent.changedTask,
-            type = ganttEvent.type;
+        const {
+          action,
+          originalSelectedTask,
+          changedTask,
+          type
+        } = ganttEvent;
         if (!changedTask || !point || !(svg !== null && svg !== void 0 && svg.current) || !originalSelectedTask) return Promise.resolve();
         event.preventDefault();
         point.x = event.clientX;
-        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;
+        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;
         svg.current.removeEventListener("mousemove", handleMouseMove);
         svg.current.removeEventListener("mouseup", handleMouseUp);
         setGanttEvent({
           action: ""
         });
         setIsMoving(false);
-        var operationSuccess = true;
+        let operationSuccess = true;
 
-        var _temp7 = function () {
+        const _temp4 = function () {
           if ((action === "move" || action === "end" || action === "start") && onDateChange && isNotLikeOriginal) {
-            var _temp8 = _catch(function () {
+            const _temp = _catch(function () {
               return Promise.resolve(onDateChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                 if (result !== undefined) {
                   operationSuccess = result;
@@ -2228,11 +2198,11 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
               operationSuccess = false;
             });
 
-            if (_temp8 && _temp8.then) return _temp8.then(function () {});
+            if (_temp && _temp.then) return _temp.then(function () {});
           } else {
-            var _temp9 = function () {
+            const _temp3 = function () {
               if (onProgressChange && isNotLikeOriginal) {
-                var _temp10 = _catch(function () {
+                const _temp2 = _catch(function () {
                   return Promise.resolve(onProgressChange(newChangedTask, newChangedTask.barChildren)).then(function (result) {
                     if (result !== undefined) {
                       operationSuccess = result;
@@ -2242,15 +2212,15 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                   operationSuccess = false;
                 });
 
-                if (_temp10 && _temp10.then) return _temp10.then(function () {});
+                if (_temp2 && _temp2.then) return _temp2.then(function () {});
               }
             }();
 
-            if (_temp9 && _temp9.then) return _temp9.then(function () {});
+            if (_temp3 && _temp3.then) return _temp3.then(function () {});
           }
         }();
 
-        return Promise.resolve(_temp7 && _temp7.then ? _temp7.then(_temp6) : _temp6(_temp7));
+        return Promise.resolve(_temp4 && _temp4.then ? _temp4.then(_temp5) : _temp5(_temp4));
       } catch (e) {
         return Promise.reject(e);
       }
@@ -2263,7 +2233,7 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     }
   }, [ganttEvent, xStep, initEventX1Delta, onProgressChange, timeStep, onDateChange, svg, isMoving, point, rtl, setFailedTask, setGanttEvent]);
 
-  var handleBarEventStart = function handleBarEventStart(action, task, event, type) {
+  const handleBarEventStart = function (action, task, event, type) {
     try {
       return Promise.resolve(function () {
         if (!event) {
@@ -2272,15 +2242,15 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
           }
         } else return function () {
           if (isKeyboardEvent(event)) {
-            var _temp14 = function () {
+            const _temp8 = function () {
               if (action === "delete") {
-                var _temp15 = function () {
+                const _temp7 = function () {
                   if (onDelete) {
-                    var _temp16 = _catch(function () {
+                    const _temp6 = _catch(function () {
                       return Promise.resolve(onDelete(task)).then(function (result) {
                         if (result !== undefined && result) {
                           setGanttEvent({
-                            action: action,
+                            action,
                             changedTask: task
                           });
                         }
@@ -2289,19 +2259,19 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
                       console.error("Error on Delete. " + error);
                     });
 
-                    if (_temp16 && _temp16.then) return _temp16.then(function () {});
+                    if (_temp6 && _temp6.then) return _temp6.then(function () {});
                   }
                 }();
 
-                if (_temp15 && _temp15.then) return _temp15.then(function () {});
+                if (_temp7 && _temp7.then) return _temp7.then(function () {});
               }
             }();
 
-            if (_temp14 && _temp14.then) return _temp14.then(function () {});
+            if (_temp8 && _temp8.then) return _temp8.then(function () {});
           } else if (action === "mouseenter") {
             if (!ganttEvent.action) {
               setGanttEvent({
-                action: action,
+                action,
                 changedTask: task,
                 originalSelectedTask: task,
                 type: type
@@ -2322,17 +2292,17 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
             if (!(svg !== null && svg !== void 0 && svg.current) || !point) return;
             point.x = event.clientX;
-            var cursor = point.matrixTransform((_svg$current$getScree3 = svg.current.getScreenCTM()) === null || _svg$current$getScree3 === void 0 ? void 0 : _svg$current$getScree3.inverse());
+            const 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
@@ -2349,8 +2319,8 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
     className: "content"
   }, React.createElement("g", {
     className: "arrows"
-  }, tasks.map(function (_task) {
-    var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+  }, tasks.map(_task => {
+    const task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
     if (!task) {
       return React.createElement("g", {
@@ -2361,28 +2331,26 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
       });
     }
 
-    return task.barChildren.map(function (child) {
+    return task.barChildren.map(child => {
       var _task$criticalPathArr, _task$criticalPathArr2;
 
       return React.createElement(Arrow, {
-        key: "Arrow from " + task.id + " to " + tasks[child.index].id,
+        key: `Arrow from ${task.id} to ${tasks[child.index].id}`,
         taskFrom: task,
         taskTo: tasks[child.index],
         rowHeight: rowHeight,
         taskHeight: taskHeight,
         arrowIndent: arrowIndent,
         rtl: rtl,
-        arrowColor: ((_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : (_task$criticalPathArr2 = _task$criticalPathArr.find(function (arrow) {
-          return arrow.taskId == tasks[child.index].id;
-        })) === null || _task$criticalPathArr2 === void 0 ? void 0 : _task$criticalPathArr2.arrowColor) || "#808080"
+        arrowColor: ((_task$criticalPathArr = task.criticalPathArrows) === null || _task$criticalPathArr === void 0 ? void 0 : (_task$criticalPathArr2 = _task$criticalPathArr.find(arrow => arrow.taskId == tasks[child.index].id)) === null || _task$criticalPathArr2 === void 0 ? void 0 : _task$criticalPathArr2.arrowColor) || "#808080"
       });
     });
   })), React.createElement("g", {
     className: "bar",
     fontFamily: fontFamily,
     fontSize: fontSize
-  }, tasks.map(function (_task) {
-    var task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
+  }, tasks.map(_task => {
+    const task = _task.start.getTime() > 0 && _task.end.getTime() > 0 ? _task : undefined;
 
     if (!task) {
       return React.createElement("g", {
@@ -2410,27 +2378,27 @@ var TaskGanttContent = function TaskGanttContent(_ref) {
 
 var styles$9 = {"ganttVerticalContainer":"_CZjuD","horizontalContainer":"_2B2zv","wrapper":"_3eULf"};
 
-var TaskGantt = function TaskGantt(_ref) {
-  var gridProps = _ref.gridProps,
-      calendarProps = _ref.calendarProps,
-      barProps = _ref.barProps,
-      ganttHeight = _ref.ganttHeight,
-      scrollY = _ref.scrollY,
-      scrollX = _ref.scrollX;
-  var ganttSVGRef = useRef(null);
-  var horizontalContainerRef = useRef(null);
-  var verticalGanttContainerRef = useRef(null);
-
-  var newBarProps = _extends({}, barProps, {
+const TaskGantt = _ref => {
+  let {
+    gridProps,
+    calendarProps,
+    barProps,
+    ganttHeight,
+    scrollY,
+    scrollX
+  } = _ref;
+  const ganttSVGRef = useRef(null);
+  const horizontalContainerRef = useRef(null);
+  const verticalGanttContainerRef = useRef(null);
+  const newBarProps = { ...barProps,
     svg: ganttSVGRef
-  });
-
-  useEffect(function () {
+  };
+  useEffect(() => {
     if (horizontalContainerRef.current) {
       horizontalContainerRef.current.scrollTop = scrollY;
     }
   }, [scrollY]);
-  useEffect(function () {
+  useEffect(() => {
     if (verticalGanttContainerRef.current) {
       verticalGanttContainerRef.current.scrollLeft = scrollX;
     }
@@ -2464,14 +2432,16 @@ var TaskGantt = function TaskGantt(_ref) {
 
 var styles$a = {"scrollWrapper":"_2k9Ys","scroll":"_19jgW"};
 
-var HorizontalScroll = function HorizontalScroll(_ref) {
-  var scroll = _ref.scroll,
-      svgWidth = _ref.svgWidth,
-      taskListWidth = _ref.taskListWidth,
-      rtl = _ref.rtl,
-      onScroll = _ref.onScroll;
-  var scrollRef = useRef(null);
-  useEffect(function () {
+const HorizontalScroll = _ref => {
+  let {
+    scroll,
+    svgWidth,
+    taskListWidth,
+    rtl,
+    onScroll
+  } = _ref;
+  const scrollRef = useRef(null);
+  useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollLeft = scroll;
     }
@@ -2479,7 +2449,7 @@ var HorizontalScroll = function HorizontalScroll(_ref) {
   return React.createElement("div", {
     dir: "ltr",
     style: {
-      margin: rtl ? "0px " + taskListWidth + "px 0px 0px" : "0px 0px 0px " + taskListWidth + "px"
+      margin: rtl ? `0px ${taskListWidth}px 0px 0px` : `0px 0px 0px ${taskListWidth}px`
     },
     className: styles$a.scrollWrapper,
     onScroll: onScroll,
@@ -2566,7 +2536,9 @@ var Gantt = function Gantt(_ref) {
       onDelete = _ref.onDelete,
       onSelect = _ref.onSelect,
       onExpanderClick = _ref.onExpanderClick,
-      taskLabelRenderer = _ref.taskLabelRenderer;
+      taskLabelRenderer = _ref.taskLabelRenderer,
+      selectedTaskIds = _ref.selectedTaskIds,
+      onTaskSelectionChange = _ref.onTaskSelectionChange;
   var wrapperRef = useRef(null);
   var taskListRef = useRef(null);
 
@@ -2949,7 +2921,9 @@ var Gantt = function Gantt(_ref) {
     onDoubleClick: onDoubleClick,
     TaskListHeader: TaskListHeader,
     TaskListTable: TaskListTable,
-    taskLabelRenderer: taskLabelRenderer
+    taskLabelRenderer: taskLabelRenderer,
+    selectedTaskIds: selectedTaskIds,
+    onTaskSelectionChange: onTaskSelectionChange
   };
   return React.createElement("div", null, React.createElement("div", {
     className: styles$9.wrapper,