@progress/kendo-react-gantt 5.4.0-dev.202205200719 → 5.4.0-dev.202206061009

package/dist/npm/components/BaseView.js

@@ -10,7 +10,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.BaseView = void 0;
 var React = require("react");
 var GanttContext_1 = require("./../context/GanttContext");
 var GanttViewContext_1 = require("../context/GanttViewContext");
@@ -24,20 +34,20 @@ var GanttTreelist_1 = require("./GanttTreelist");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 exports.BaseView = React.forwardRef(function (props, ref) {
     var slotLevels = props.slotLevels, slotWidth = props.slotWidth, timelineHeaderCell = props.timelineHeaderCell;
-    var _a = GanttContext_1.useGanttPropsContext(), columns = _a.columns, noRecords = _a.noRecords, resizable = _a.resizable, reorderable = _a.reorderable, sortable = _a.sortable, sort = _a.sort, filter = _a.filter, columnMenuFilter = _a.columnMenuFilter, columnMenu = _a.columnMenu, navigatable = _a.navigatable, row = _a.row, selectable = _a.selectable;
-    var _b = GanttContext_1.useGanttEventsContext(), onDataStateChange = _b.onDataStateChange, onSortChange = _b.onSortChange, onFilterChange = _b.onFilterChange, onColumnMenuFilterChange = _b.onColumnMenuFilterChange, onExpandChange = _b.onExpandChange, onRowClick = _b.onRowClick, onRowDoubleClick = _b.onRowDoubleClick, onRowContextMenu = _b.onRowContextMenu, onColumnResize = _b.onColumnResize, onColumnReorder = _b.onColumnReorder, onDependencyCreate = _b.onDependencyCreate, onKeyDown = _b.onKeyDown, onSelectionChange = _b.onSelectionChange, onHeaderSelectionChange = _b.onHeaderSelectionChange;
-    var rowHeight = GanttContext_1.useGanttRowHeightContext();
-    var toolbarHeight = GanttContext_1.useGanttToolbarHeightContext();
-    var taskModelFields = GanttContext_1.useGanttTaskModelFieldsContext();
-    var dependencyModelFields = GanttContext_1.useGanttDependencyModelFieldsContext();
-    var tasksData = GanttContext_1.useGanttTaskDataContext();
-    var dependenciesData = GanttContext_1.useGanttDependencyDataContext();
+    var _a = (0, GanttContext_1.useGanttPropsContext)(), columns = _a.columns, noRecords = _a.noRecords, resizable = _a.resizable, reorderable = _a.reorderable, sortable = _a.sortable, sort = _a.sort, filter = _a.filter, columnMenuFilter = _a.columnMenuFilter, columnMenu = _a.columnMenu, navigatable = _a.navigatable, row = _a.row, selectable = _a.selectable;
+    var _b = (0, GanttContext_1.useGanttEventsContext)(), onDataStateChange = _b.onDataStateChange, onSortChange = _b.onSortChange, onFilterChange = _b.onFilterChange, onColumnMenuFilterChange = _b.onColumnMenuFilterChange, onExpandChange = _b.onExpandChange, onRowClick = _b.onRowClick, onRowDoubleClick = _b.onRowDoubleClick, onRowContextMenu = _b.onRowContextMenu, onColumnResize = _b.onColumnResize, onColumnReorder = _b.onColumnReorder, onDependencyCreate = _b.onDependencyCreate, onKeyDown = _b.onKeyDown, onSelectionChange = _b.onSelectionChange, onHeaderSelectionChange = _b.onHeaderSelectionChange;
+    var rowHeight = (0, GanttContext_1.useGanttRowHeightContext)();
+    var toolbarHeight = (0, GanttContext_1.useGanttToolbarHeightContext)();
+    var taskModelFields = (0, GanttContext_1.useGanttTaskModelFieldsContext)();
+    var dependencyModelFields = (0, GanttContext_1.useGanttDependencyModelFieldsContext)();
+    var tasksData = (0, GanttContext_1.useGanttTaskDataContext)();
+    var dependenciesData = (0, GanttContext_1.useGanttDependencyDataContext)();
     var timelineHeaderRef = React.useRef(null);
     var timelineContentRef = React.useRef(null);
     var treelistRef = React.useRef(null);
     var timelineSvgRef = React.useRef(null);
     var svgLeftRef = React.useRef(0);
-    var idPrefixRef = React.useRef(kendo_react_common_1.guid());
+    var idPrefixRef = React.useRef((0, kendo_react_common_1.guid)());
     var contentRef = React.useRef(null);
     var baseViewRef = React.useRef(null);
     var scrollIntoView = React.useCallback(function (options) {
@@ -54,11 +64,11 @@ exports.BaseView = React.forwardRef(function (props, ref) {
     var startIdRef = React.useRef(null);
     var startDirectionRef = React.useRef(null);
     var _c = React.useState(null), coordinates = _c[0], setCoordinates = _c[1];
-    var timelineHeader = utils_1.getTimelineHeader(slotLevels, timelineHeaderRef, timelineHeaderCell);
-    var timelineContent = utils_1.getTimelineContent(slotLevels, timelineContentRef);
-    var timelineWidth = utils_1.getTimelineWidth(slotLevels, slotWidth);
+    var timelineHeader = (0, utils_1.getTimelineHeader)(slotLevels, timelineHeaderRef, timelineHeaderCell);
+    var timelineContent = (0, utils_1.getTimelineContent)(slotLevels, timelineContentRef);
+    var timelineWidth = (0, utils_1.getTimelineWidth)(slotLevels, slotWidth);
     var _d = React.useMemo(function () {
-        var extendedCols = kendo_react_data_tools_1.readColumns(columns.concat([
+        var extendedCols = (0, kendo_react_data_tools_1.readColumns)(__spreadArray(__spreadArray([], columns, true), [
             {
                 title: '',
                 sortable: false,
@@ -70,7 +80,7 @@ exports.BaseView = React.forwardRef(function (props, ref) {
                 orderIndex: Number.MAX_SAFE_INTEGER,
                 navigatable: false
             }
-        ]), { prevId: 0, idPrefix: idPrefixRef.current });
+        ], false), { prevId: 0, idPrefix: idPrefixRef.current });
         var columnsWidthSum = 0;
         extendedCols.forEach(function (column, index, array) {
             var isLast = index + 1 === array.length;
@@ -91,10 +101,10 @@ exports.BaseView = React.forwardRef(function (props, ref) {
         return {
             extendedColumns: extendedCols,
             columnsWidth: columnsWidthSum,
-            columnsMap: kendo_react_data_tools_1.mapColumns(extendedCols)
+            columnsMap: (0, kendo_react_data_tools_1.mapColumns)(extendedCols)
         };
     }, [columns, timelineWidth]), extendedColumns = _d.extendedColumns, columnsWidth = _d.columnsWidth, columnsMap = _d.columnsMap;
-    var _e = useDictionaryStore_1.useDictionaryStore(), tasksStore = _e[0], dispatchTaskRef = _e[1];
+    var _e = (0, useDictionaryStore_1.useDictionaryStore)(), tasksStore = _e[0], dispatchTaskRef = _e[1];
     var getTimelineHeaderElement = React.useCallback(function () { return timelineHeaderRef.current && timelineHeaderRef.current.parentElement; }, []);
     var positionTimelineContent = function () {
         var timelineHeaderElement = getTimelineHeaderElement();
@@ -137,11 +147,11 @@ exports.BaseView = React.forwardRef(function (props, ref) {
             timelineSvgRef.current.style.left = timelineHeaderElement.offsetLeft - svgLeftRef.current + 'px';
             positionTimelineContent();
         }
-        onColumnResize(__assign({}, event, { columns: currentColumns }));
+        onColumnResize(__assign(__assign({}, event), { columns: currentColumns }));
     }, [onColumnResize]);
     var onColumnReorderHandler = React.useCallback(function (event) {
         var currentColumns = event.columns.slice(0, event.columns.length - 1);
-        onColumnReorder(__assign({}, event, { columns: currentColumns }));
+        onColumnReorder(__assign(__assign({}, event), { columns: currentColumns }));
     }, [onColumnResize]);
     var handleDependencyHandlePress = React.useCallback(function (dragEvent) {
         var ownerDocument = contentRef.current && contentRef.current.ownerDocument ? contentRef.current.ownerDocument : document;
@@ -237,10 +247,10 @@ exports.BaseView = React.forwardRef(function (props, ref) {
             onDependencyHandleDrag: handleDependencyHandleDrag,
             onDependencyHandleRelease: handleDependencyHandleRelease
         } },
-        React.createElement("div", { className: 'k-gantt-content', ref: contentRef, style: { height: "calc(100% - " + toolbarHeight + "px)" } },
+        React.createElement("div", { className: 'k-gantt-content', ref: contentRef, style: { height: "calc(100% - ".concat(toolbarHeight, "px)") } },
             React.createElement(GanttTreelist_1.GanttTreeList, { ref: treelistRef, extendedColumns: extendedColumns, columnsMap: columnsMap, dataItemKey: taskModelFields.id, data: tasksData, idPrefix: idPrefixRef.current, navigatable: navigatable, expandField: taskModelFields.isExpanded, subItemsField: taskModelFields.children, editField: taskModelFields.isInEdit, selectedField: taskModelFields.isSelected, onDataStateChange: onDataStateChange, onSortChange: onSortChange, onFilterChange: onFilterChange, onExpandChange: onExpandChange, onRowClick: onRowClick, onRowDoubleClick: onRowDoubleClick, onRowContextMenu: onRowContextMenu, onColumnResize: onColumnResizeHandler, onColumnReorder: onColumnReorderHandler, onColumnMenuFilterChange: onColumnMenuFilterChange, onKeyDown: onKeyDown, onSelectionChange: onSelectionChange, onHeaderSelectionChange: onHeaderSelectionChange, tableProps: { style: { width: columnsWidth }, className: 'k-table-layout-fixed' }, noRecords: noRecords, rowHeight: rowHeight, resizable: resizable, reorderable: reorderable, sortable: sortable, sort: sort, filter: filter, columnMenuFilter: columnMenuFilter, columnMenu: columnMenu, row: row, selectable: selectable, afterContent: (React.createElement(React.Fragment, null,
-                    React.createElement("svg", { className: 'k-gantt-dependencies-svg', ref: timelineSvgRef, style: { left: 0, top: 0 } }, dependenciesData.map(function (dependency) { return React.createElement(GanttDependency_1.GanttDependency, { key: kendo_react_common_1.getter(dependencyModelFields.id)(dependency), dependency: dependency }); })),
-                    React.createElement("svg", { className: 'k-gantt-dependencies-svg', style: { left: 0, top: 0, zIndex: 3 } }, coordinates && (React.createElement("polyline", { points: coordinates.startX + "," + coordinates.startY + " " + coordinates.endX + "," + coordinates.endY }))),
+                    React.createElement("svg", { className: 'k-gantt-dependencies-svg', ref: timelineSvgRef, style: { left: 0, top: 0 } }, dependenciesData.map(function (dependency) { return React.createElement(GanttDependency_1.GanttDependency, { key: (0, kendo_react_common_1.getter)(dependencyModelFields.id)(dependency), dependency: dependency }); })),
+                    React.createElement("svg", { className: 'k-gantt-dependencies-svg', style: { left: 0, top: 0, zIndex: 3 } }, coordinates && (React.createElement("polyline", { points: "".concat(coordinates.startX, ",").concat(coordinates.startY, " ").concat(coordinates.endX, ",").concat(coordinates.endY) }))),
                     tasksData && tasksData.length ? timelineContent : null)) }))));
 });
 exports.BaseView.displayName = 'KendoReactGanttBaseView';

package/dist/npm/components/GanttDependency.js

@@ -1,25 +1,26 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GanttDependency = void 0;
 var React = require("react");
 var GanttContext_1 = require("./../context/GanttContext");
 var utils_1 = require("../utils");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var GanttViewContext_1 = require("../context/GanttViewContext");
 /** @hidden */
-exports.GanttDependency = function (props) {
+var GanttDependency = function (props) {
     var dependency = props.dependency;
-    var tasksStore = GanttViewContext_1.useGanttViewTasksContext()[0];
+    var tasksStore = (0, GanttViewContext_1.useGanttViewTasksContext)()[0];
     var element = React.useRef(null);
-    var dependencyModelFields = GanttContext_1.useGanttDependencyModelFieldsContext();
-    var rowHeight = GanttContext_1.useGanttRowHeightContext();
+    var dependencyModelFields = (0, GanttContext_1.useGanttDependencyModelFieldsContext)();
+    var rowHeight = (0, GanttContext_1.useGanttRowHeightContext)();
     var _a = React.useState(false), display = _a[0], setDisplay = _a[1];
     var drawCanvas = function () {
         if (element.current === null || tasksStore.current === null) {
             setDisplay(false);
             return;
         }
-        var fromId = tasksStore.current[kendo_react_common_1.getter(dependencyModelFields.fromId)(dependency)];
-        var toId = tasksStore.current[kendo_react_common_1.getter(dependencyModelFields.toId)(dependency)];
+        var fromId = tasksStore.current[(0, kendo_react_common_1.getter)(dependencyModelFields.fromId)(dependency)];
+        var toId = tasksStore.current[(0, kendo_react_common_1.getter)(dependencyModelFields.toId)(dependency)];
         if (!fromId || !toId) {
             setDisplay(false);
             return;
@@ -44,10 +45,10 @@ exports.GanttDependency = function (props) {
             start: toElement.offsetLeft,
             end: toElement.offsetLeft + toElement.offsetWidth
         };
-        var type = kendo_react_common_1.getter(dependencyModelFields.type)(dependency);
-        var points = utils_1.dependencyCoordinates(fromCoordinates, toCoordinates, rowHeight, type);
+        var type = (0, kendo_react_common_1.getter)(dependencyModelFields.type)(dependency);
+        var points = (0, utils_1.dependencyCoordinates)(fromCoordinates, toCoordinates, rowHeight, type);
         if (points && points.length) {
-            element.current.setAttribute('points', points.map(function (point) { return point.left + "," + point.top; }).join(' '));
+            element.current.setAttribute('points', points.map(function (point) { return "".concat(point.left, ",").concat(point.top); }).join(' '));
         }
     };
     React.useEffect(drawCanvas);
@@ -55,4 +56,5 @@ exports.GanttDependency = function (props) {
             display: display ? undefined : 'none'
         } }));
 };
+exports.GanttDependency = GanttDependency;
 exports.GanttDependency.displayName = 'KendoReactGanttDependency';

package/dist/npm/components/GanttTask.js

@@ -11,6 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GanttTask = void 0;
 var React = require("react");
 var GanttContext_1 = require("./../context/GanttContext");
 var utils_1 = require("../utils");
@@ -21,36 +22,36 @@ var constants_1 = require("../constants");
 /** @hidden */
 exports.GanttTask = React.forwardRef(function (props, ref) {
     var _a, _b;
-    var range = GanttContext_1.useGanttDateRangeContext();
-    var taskModelFields = GanttContext_1.useGanttTaskModelFieldsContext();
-    var timelineWidth = GanttViewContext_1.useGanttViewTimelineWidthContext();
-    var dependencyDrag = GanttViewContext_1.useGanttViewDependencyDragContext();
-    var taskEvents = GanttContext_1.useGanttTaskEventsContext();
+    var range = (0, GanttContext_1.useGanttDateRangeContext)();
+    var taskModelFields = (0, GanttContext_1.useGanttTaskModelFieldsContext)();
+    var timelineWidth = (0, GanttViewContext_1.useGanttViewTimelineWidthContext)();
+    var dependencyDrag = (0, GanttViewContext_1.useGanttViewDependencyDragContext)();
+    var taskEvents = (0, GanttContext_1.useGanttTaskEventsContext)();
     var taskElementRef = React.useRef(null);
     var completeElementRef = React.useRef(null);
-    useGanttTask_1.useGanttTask(props.dataItem, kendo_react_common_1.getter(taskModelFields.id)(props.dataItem), ref, taskElementRef);
+    (0, useGanttTask_1.useGanttTask)(props.dataItem, (0, kendo_react_common_1.getter)(taskModelFields.id)(props.dataItem), ref, taskElementRef);
     var slotElementRef = React.useRef(null);
-    var taskId = kendo_react_common_1.getter(taskModelFields.id)(props.dataItem);
-    var taskStart = kendo_react_common_1.getter(taskModelFields.start)(props.dataItem);
-    var taskEnd = kendo_react_common_1.getter(taskModelFields.end)(props.dataItem);
-    var taskTitle = kendo_react_common_1.getter(taskModelFields.title)(props.dataItem);
-    var percentComplete = kendo_react_common_1.getter(taskModelFields.percentComplete)(props.dataItem);
-    var taskChildren = kendo_react_common_1.getter(taskModelFields.children)(props.dataItem);
-    var taskSelected = kendo_react_common_1.getter(taskModelFields.isSelected)(props.dataItem);
+    var taskId = (0, kendo_react_common_1.getter)(taskModelFields.id)(props.dataItem);
+    var taskStart = (0, kendo_react_common_1.getter)(taskModelFields.start)(props.dataItem);
+    var taskEnd = (0, kendo_react_common_1.getter)(taskModelFields.end)(props.dataItem);
+    var taskTitle = (0, kendo_react_common_1.getter)(taskModelFields.title)(props.dataItem);
+    var percentComplete = (0, kendo_react_common_1.getter)(taskModelFields.percentComplete)(props.dataItem);
+    var taskChildren = (0, kendo_react_common_1.getter)(taskModelFields.children)(props.dataItem);
+    var taskSelected = (0, kendo_react_common_1.getter)(taskModelFields.isSelected)(props.dataItem);
     var taskStartTime = taskStart && taskStart.getTime();
     var taskEndTime = taskEnd && taskEnd.getTime();
     var isSummaryTask = taskChildren && taskChildren.length;
     var isMilestone = !isSummaryTask && taskStartTime === taskEndTime;
-    var display = taskStartTime && taskEndTime && utils_1.isInRange(range.start, range.end, taskStart, taskEnd);
+    var display = taskStartTime && taskEndTime && (0, utils_1.isInRange)(range.start, range.end, taskStart, taskEnd);
     var _c = React.useState(false), visible = _c[0], setVisible = _c[1];
     var dependencyStartElementRef = React.useRef(null);
     var dependencyEndElementRef = React.useRef(null);
-    kendo_react_common_1.useDraggable(dependencyStartElementRef, {
+    (0, kendo_react_common_1.useDraggable)(dependencyStartElementRef, {
         onPress: dependencyDrag.onDependencyHandlePress,
         onDrag: dependencyDrag.onDependencyHandleDrag,
         onRelease: dependencyDrag.onDependencyHandleRelease
     });
-    kendo_react_common_1.useDraggable(dependencyEndElementRef, {
+    (0, kendo_react_common_1.useDraggable)(dependencyEndElementRef, {
         onPress: dependencyDrag.onDependencyHandlePress,
         onDrag: dependencyDrag.onDependencyHandleDrag,
         onRelease: dependencyDrag.onDependencyHandleRelease
@@ -112,12 +113,12 @@ exports.GanttTask = React.forwardRef(function (props, ref) {
         var left = (taskStart.getTime() - slotStart.getTime()) * pxPerMillisecond;
         var width = (taskEnd.getTime() - taskStart.getTime()) * pxPerMillisecond;
         var top = (slotElement.offsetHeight - taskElement.offsetHeight) / 2;
-        taskElement.style.left = Math.round(isMilestone ? left - constants_1.MILESTONE_OFFSET : left) + "px";
-        taskElement.style.top = Math.round(top) + "px";
+        taskElement.style.left = "".concat(Math.round(isMilestone ? left - constants_1.MILESTONE_OFFSET : left), "px");
+        taskElement.style.top = "".concat(Math.round(top), "px");
         if (!isMilestone) {
-            taskElement.style.width = Math.round(width) + "px";
+            taskElement.style.width = "".concat(Math.round(width), "px");
             if (completeElement !== null) {
-                completeElement.style.width = Math.round(width * (percentComplete || 0)) + "px";
+                completeElement.style.width = "".concat(Math.round(width * (percentComplete || 0)), "px");
             }
         }
         setVisible(true);
@@ -132,7 +133,7 @@ exports.GanttTask = React.forwardRef(function (props, ref) {
         display: dependencyDrag.draggedId === String(taskId) ? 'block' : undefined
     };
     return (React.createElement("td", { ref: slotElementRef, key: taskId, role: 'presentation' }, isMilestone ?
-        (React.createElement("div", __assign({ "aria-hidden": true, className: kendo_react_common_1.classNames({
+        (React.createElement("div", __assign({ "aria-hidden": true, className: (0, kendo_react_common_1.classNames)({
                 'k-task': true,
                 'k-task-milestone': true,
                 'k-selected': taskSelected && !Array.isArray(taskSelected)
@@ -142,7 +143,7 @@ exports.GanttTask = React.forwardRef(function (props, ref) {
                 (React.createElement("div", __assign({ className: 'k-task-dot k-task-start', ref: dependencyStartElementRef, style: dependencyDragStyles }, constants_1.DEPENDENCY_DRAG_HANDLE_START_ATT))),
             dependencyDrag.isEnabled &&
                 (React.createElement("div", __assign({ className: 'k-task-dot k-task-end', ref: dependencyEndElementRef, style: dependencyDragStyles }, constants_1.DEPENDENCY_DRAG_HANDLE_FINISH_ATT))))) :
-        (React.createElement("div", __assign({ "aria-hidden": true, className: kendo_react_common_1.classNames({
+        (React.createElement("div", __assign({ "aria-hidden": true, className: (0, kendo_react_common_1.classNames)({
                 'k-task': true,
                 'k-task-summary': isSummaryTask,
                 'k-task-single': !isSummaryTask,

package/dist/npm/components/GanttTreelist.d.ts

@@ -2,11 +2,14 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { CommonDragLogic, ExtendedColumnProps, TableKeyboardNavigationContextType } from '@progress/kendo-react-data-tools';
 import { TreeListProps } from '@progress/kendo-react-treelist';
+import { GanttCellProps } from '../interfaces/GanttCellProps';
+import { GanttHeaderCellProps } from '../interfaces/GanttHeaderCellProps';
+import { GanttFilterCellProps } from '../interfaces/GanttFilterCellProps';
 /**
  * @hidden
  */
 export interface GanttTreeListProps extends TreeListProps {
-    extendedColumns: ExtendedColumnProps[];
+    extendedColumns: ExtendedColumnProps<GanttCellProps, GanttHeaderCellProps, GanttFilterCellProps>[];
     columnsMap: number[][];
     afterContent: any;
     dataItemKey: string;
@@ -30,7 +33,7 @@ export declare class GanttTreeList extends React.Component<GanttTreeListProps, {
         }>>;
         onSortChange: PropTypes.Requireable<(...args: any[]) => any>;
         sort: PropTypes.Requireable<any[]>;
-        columns: PropTypes.Requireable<object[]>;
+        columns: PropTypes.Requireable<(object | null)[]>;
         columnVirtualization: PropTypes.Requireable<boolean>;
         filter: PropTypes.Requireable<any[]>;
         onFilterChange: PropTypes.Requireable<(...args: any[]) => any>;
@@ -57,15 +60,15 @@ export declare class GanttTreeList extends React.Component<GanttTreeListProps, {
         onDataStateChange: PropTypes.Requireable<(...args: any[]) => any>;
         onColumnResize: PropTypes.Requireable<(...args: any[]) => any>;
         onColumnReorder: PropTypes.Requireable<(...args: any[]) => any>;
-        extendedColumns: PropTypes.Requireable<object[]>;
-        columnsMap: PropTypes.Requireable<any[][]>;
+        extendedColumns: PropTypes.Requireable<(object | null)[]>;
+        columnsMap: PropTypes.Requireable<(any[] | null)[]>;
         dataItemKey: PropTypes.Validator<string>;
         afterContent: PropTypes.Requireable<any>;
         navigatable: PropTypes.Requireable<boolean>;
         idPrefix: PropTypes.Requireable<string>;
     };
     /** @hidden */
-    static contextType: React.Context<TableKeyboardNavigationContextType>;
+    static contextType: React.Context<TableKeyboardNavigationContextType | undefined>;
     state: TableKeyboardNavigationContextType;
     tableElement: HTMLTableElement | null;
     tbodyElement: HTMLTableSectionElement | null;
@@ -77,14 +80,14 @@ export declare class GanttTreeList extends React.Component<GanttTreeListProps, {
     private flattedData;
     private columnResize;
     private element;
-    protected dragLogic: CommonDragLogic;
+    protected dragLogic: CommonDragLogic<GanttCellProps, GanttHeaderCellProps, GanttFilterCellProps>;
     private _treeListId;
-    private readonly document;
+    private get document();
     private contextStateRef;
     private navigationStateRef;
     constructor(props: GanttTreeListProps);
     scrollIntoView: (options: {
-        rowIndex?: number;
+        rowIndex?: number | undefined;
     }) => void;
     /**
      * @hidden
@@ -93,7 +96,7 @@ export declare class GanttTreeList extends React.Component<GanttTreeListProps, {
     /**
      * @hidden
      */
-    getSnapshotBeforeUpdate(): any;
+    getSnapshotBeforeUpdate(): null;
     /**
      * @hidden
      */
@@ -107,7 +110,7 @@ export declare class GanttTreeList extends React.Component<GanttTreeListProps, {
      */
     render(): JSX.Element;
     private getColumns;
-    private readonly flatData;
+    private get flatData();
     private onKeyDown;
     private onFocus;
     private onRowDrag;

package/dist/npm/components/GanttTreelist.js

@@ -3,10 +3,12 @@ var __extends = (this && this.__extends) || (function () {
     var extendStatics = function (d, b) {
         extendStatics = Object.setPrototypeOf ||
             ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
         return extendStatics(d, b);
     };
     return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
         extendStatics(d, b);
         function __() { this.constructor = d; }
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
@@ -28,11 +30,23 @@ var __rest = (this && this.__rest) || function (s, e) {
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
         t[p] = s[p];
     if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GanttTreeList = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -46,6 +60,10 @@ var GanttTreeList = /** @class */ (function (_super) {
     __extends(GanttTreeList, _super);
     function GanttTreeList(props) {
         var _this = _super.call(this, props) || this;
+        _this.state = {
+            activeId: undefined,
+            level: 0
+        };
         _this.tableElement = null;
         _this.tbodyElement = null;
         _this.wrapperScrollLeft = 0;
@@ -55,7 +73,7 @@ var GanttTreeList = /** @class */ (function (_super) {
         _this.prevData = [];
         _this.flattedData = [];
         _this.element = null;
-        _this._treeListId = kendo_react_common_1.guid();
+        _this._treeListId = (0, kendo_react_common_1.guid)();
         _this.contextStateRef = { current: undefined };
         _this.navigationStateRef = { current: undefined };
         _this.scrollIntoView = function (options) {
@@ -83,9 +101,9 @@ var GanttTreeList = /** @class */ (function (_super) {
                 navigationStateRef: _this.navigationStateRef
             });
             if (_this.props.onKeyDown) {
-                var _a = kendo_react_data_tools_1.getSelectionOptions(_this.props.selectable), mode = _a.mode, cell = _a.cell;
-                _this.props.onKeyDown.call(undefined, __assign({ dataItems: _this.getLeafDataItems(), mode: mode,
-                    cell: cell, componentId: _this._treeListId, selectedField: _this.props.selectedField }, _this.getEventArguments(event)));
+                var _a = (0, kendo_react_data_tools_1.getSelectionOptions)(_this.props.selectable), mode = _a.mode, cell = _a.cell;
+                var ev = __assign({ dataItems: _this.getLeafDataItems(), mode: mode, cell: cell, componentId: _this._treeListId, selectedField: _this.props.selectedField }, _this.getEventArguments(event));
+                _this.props.onKeyDown.call(undefined, ev);
             }
         };
         _this.onFocus = function (event) {
@@ -95,13 +113,13 @@ var GanttTreeList = /** @class */ (function (_super) {
         };
         _this.onRowDrag = function (event) {
             if (_this.props.onRowDrag) {
-                var rowDragEvent = __assign({}, event, { target: _this });
+                var rowDragEvent = __assign(__assign({}, event), { target: _this });
                 _this.props.onRowDrag.call(undefined, rowDragEvent);
             }
         };
         _this.onRowDrop = function (event) {
             if (_this.props.onRowDrop) {
-                var rowDropEvent = __assign({}, event, { target: _this });
+                var rowDropEvent = __assign(__assign({}, event), { target: _this });
                 _this.props.onRowDrop.call(undefined, rowDropEvent);
             }
         };
@@ -114,9 +132,9 @@ var GanttTreeList = /** @class */ (function (_super) {
                 } while (index < extendedColumns.length && extendedColumns[index].depth > depth);
                 return index;
             };
-            var columnsCopy = extendedColumns.slice();
+            var columnsCopy = __spreadArray([], extendedColumns, true);
             var spliced = columnsCopy.splice(prev, end(prev) - prev);
-            columnsCopy.splice.apply(columnsCopy, [prev < next ? end(next - spliced.length) : next, 0].concat(spliced));
+            columnsCopy.splice.apply(columnsCopy, __spreadArray([prev < next ? end(next - spliced.length) : next, 0], spliced, false));
             columnsCopy.filter(function (q) { return q.declarationIndex >= 0; }).forEach(function (c, i) { return c.orderIndex = i; });
             if (_this.props.onColumnReorder) {
                 var columnReorderEvent = {
@@ -189,19 +207,19 @@ var GanttTreeList = /** @class */ (function (_super) {
                 }
             }
             _this.tbodyOffsetTop = table.tBodies[0].offsetTop;
-            kendo_react_treelist_1.setHeaderRowsTop(table, toolbarHeight);
+            (0, kendo_react_treelist_1.setHeaderRowsTop)(table, toolbarHeight);
         };
         _this.onItemChange = function (event) {
             if (event.field === _this.props.expandField) {
                 var expandChange = _this.props.onExpandChange;
                 if (expandChange) {
-                    var expandEvent = __assign({}, _this.getEventArguments(event.syntheticEvent), { dataItem: event.dataItem, level: event.level, value: event.value });
+                    var expandEvent = __assign(__assign({}, _this.getEventArguments(event.syntheticEvent)), { dataItem: event.dataItem, level: event.level, value: event.value });
                     expandChange.call(undefined, expandEvent);
                 }
                 return;
             }
             if (_this.props.onItemChange) {
-                var itemChangeEvent = __assign({}, _this.getEventArguments(event.syntheticEvent), { dataItem: event.dataItem, level: event.level, field: event.field, value: event.value });
+                var itemChangeEvent = __assign(__assign({}, _this.getEventArguments(event.syntheticEvent)), { dataItem: event.dataItem, level: event.level, field: event.field, value: event.value });
                 _this.props.onItemChange.call(undefined, itemChangeEvent);
             }
         };
@@ -231,6 +249,9 @@ var GanttTreeList = /** @class */ (function (_super) {
             _this.onDataStateChange(_this.props.onFilterChange, { filter: filter, field: field }, event.syntheticEvent);
         };
         _this.onColumnMenuFilterChange = function (syntheticEvent, filter, field) {
+            if (!field) {
+                return;
+            }
             var onColumnMenuFilterChange = _this.props.onColumnMenuFilterChange;
             if (!onColumnMenuFilterChange) {
                 return;
@@ -247,8 +268,7 @@ var GanttTreeList = /** @class */ (function (_super) {
         _this.onExpandChange = function (event, dataItem, level) {
             var _a = _this.props, expandField = _a.expandField, onExpandChange = _a.onExpandChange;
             if (expandField && onExpandChange) {
-                var expandChangeEvent = __assign({}, _this.getEventArguments(event), { dataItem: dataItem,
-                    level: level, value: utils_1.isExpanded(dataItem, _this.props.expandField) });
+                var expandChangeEvent = __assign(__assign({}, _this.getEventArguments(event)), { dataItem: dataItem, level: level, value: (0, utils_1.isExpanded)(dataItem, _this.props.expandField) });
                 onExpandChange.call(undefined, expandChangeEvent);
             }
         };
@@ -272,16 +292,16 @@ var GanttTreeList = /** @class */ (function (_super) {
         };
         _this.onPageChange = function (e) {
             if (_this.props.onPageChange) {
-                var pageChangeEvent = __assign({}, _this.getEventArguments(e.syntheticEvent), { skip: e.skip, take: e.take });
+                var pageChangeEvent = __assign(__assign({}, _this.getEventArguments(e.syntheticEvent)), { skip: e.skip, take: e.take });
                 _this.props.onPageChange.call(undefined, pageChangeEvent);
             }
         };
         _this.onDataStateChange = function (handler, data, syntheticEvent) {
             if (handler) {
-                handler.call(undefined, __assign({}, _this.getEventArguments(syntheticEvent), data));
+                handler.call(undefined, __assign(__assign({}, _this.getEventArguments(syntheticEvent)), data));
             }
             if (_this.props.onDataStateChange) {
-                var dataStateEvent = __assign({}, _this.getEventArguments(syntheticEvent), { dataState: __assign({}, _this.getDataState(), data) });
+                var dataStateEvent = __assign(__assign({}, _this.getEventArguments(syntheticEvent)), { dataState: __assign(__assign({}, _this.getDataState()), data) });
                 _this.props.onDataStateChange.call(undefined, dataStateEvent);
             }
         };
@@ -317,7 +337,7 @@ var GanttTreeList = /** @class */ (function (_super) {
             // useful only for user actions
             return (this.element && this.element.ownerDocument) || document;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
@@ -383,7 +403,7 @@ var GanttTreeList = /** @class */ (function (_super) {
         var leafColumns = extendedColumns.filter(function (c) { return c.children.length === 0; });
         var header = (React.createElement(kendo_react_data_tools_1.Header, { headerRow: React.createElement(kendo_react_data_tools_1.HeaderRow, { sort: this.props.sort, sortable: this.props.sortable, sortChange: this.onSortChange, selectionChange: this.onHeaderSelectionChange, columns: extendedColumns, columnsMap: columnsMap, cellRender: this.props.headerCellRender, columnResize: this.columnResize, columnMenu: this.props.columnMenu, columnMenuFilter: this.props.columnMenuFilter, columnMenuFilterChange: this.onColumnMenuFilterChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler }), filterRow: filterable && React.createElement(FilterRow, { columns: leafColumns, filter: this.props.filter, filterChange: this.onFilterChange, sort: this.props.sort, ariaRowIndex: columnsMap.length + 1 }) || undefined, columnResize: this.columnResize }));
         var wrapperStyles = this.props.style || {};
-        var _f = kendo_react_data_tools_1.tableColumnsVirtualization({
+        var _f = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             scrollLeft: this.wrapperScrollLeft,
@@ -394,10 +414,10 @@ var GanttTreeList = /** @class */ (function (_super) {
                 return null;
             }
             var columnKey = column.id ? column.id : columnIndex;
-            var className = "" + (column.className ? column.className + ' ' : '')
-                + ("" + (column.locked ? 'k-grid-content-sticky' : ''));
+            var className = "".concat(column.className ? column.className + ' ' : '')
+                + "".concat(column.locked ? 'k-grid-content-sticky' : '');
             var cellProps = {
-                id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId(rowId + "-" + String(columnIndex), idPrefix),
+                id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix),
                 colSpan: colSpans[columnIndex],
                 dataItem: item.dataItem,
                 field: column.field,
@@ -411,7 +431,7 @@ var GanttTreeList = /** @class */ (function (_super) {
                 level: item.level,
                 expandable: column.expandable,
                 expanded: isRowExpanded,
-                hasChildren: utils_1.hasChildren(item.dataItem, _this.props.subItemsField),
+                hasChildren: (0, utils_1.hasChildren)(item.dataItem, _this.props.subItemsField),
                 colIndex: columnIndex,
                 ariaColumnIndex: column.ariaColumnIndex,
                 onExpandChange: _this.onExpandChange,
@@ -436,7 +456,7 @@ var GanttTreeList = /** @class */ (function (_super) {
             flattedData = flattedData.slice(skip, skip + take);
         }
         if (scrollable === 'virtual') {
-            flattedData = kendo_react_treelist_1.tableRowsVirtualization({
+            flattedData = (0, kendo_react_treelist_1.tableRowsVirtualization)({
                 rows: flattedData,
                 tableViewPortHeight: parseFloat((wrapperStyles.height || wrapperStyles.maxHeight || '').toString()),
                 scrollTop: this.wrapperScrollTop
@@ -446,11 +466,11 @@ var GanttTreeList = /** @class */ (function (_super) {
         var levels = flattedData.map(function (i) { return i.level; });
         var rowIndexStart = columnsMap.length + (filterable ? 1 : 0) + 1;
         var body = flattedData.length > 0 && flattedData.map(function (item, rowIndex) {
-            var inEdit = kendo_react_common_1.getter(_this.props.editField || '')(item.dataItem);
-            var dataItemKeyValue = kendo_react_common_1.getter(_this.props.dataItemKey)(item.dataItem);
+            var inEdit = (0, kendo_react_common_1.getter)(_this.props.editField || '')(item.dataItem);
+            var dataItemKeyValue = (0, kendo_react_common_1.getter)(_this.props.dataItemKey)(item.dataItem);
             var rowId = String(dataItemKeyValue ? dataItemKeyValue : item.level.join('.'));
-            var isRowExpanded = utils_1.isExpanded(item.dataItem, _this.props.expandField);
-            var selectedValue = _this.props.selectedField ? kendo_react_common_1.getter(_this.props.selectedField)(item.dataItem) : undefined;
+            var isRowExpanded = (0, utils_1.isExpanded)(item.dataItem, _this.props.expandField);
+            var selectedValue = _this.props.selectedField ? (0, kendo_react_common_1.getter)(_this.props.selectedField)(item.dataItem) : undefined;
             var rowProps = {
                 key: rowId,
                 level: item.level,
@@ -488,12 +508,12 @@ var GanttTreeList = /** @class */ (function (_super) {
         var tableUserSelect = this.props.selectable && this.props.selectable.drag ? 'none' : undefined;
         var tableProps = (this.props.tableProps || {});
         return (React.createElement(kendo_react_data_tools_1.TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-            React.createElement("div", __assign({ style: this.props.style, className: kendo_react_common_1.classNames('k-widget k-grid', this.props.className, { 'k-treelist-scrollable': scrollable !== 'none' }), ref: function (e) { return _this.element = e; }, onScroll: virtualScroll ? this.onScroll : undefined, onKeyDown: this.onKeyDown, onFocus: this.onFocus, "aria-rowcount": total, "aria-colcount": leafColumns.length, role: 'treegrid' }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
+            React.createElement("div", __assign({ style: this.props.style, className: (0, kendo_react_common_1.classNames)('k-widget k-grid', this.props.className, { 'k-treelist-scrollable': scrollable !== 'none' }), ref: function (e) { return _this.element = e; }, onScroll: virtualScroll ? this.onScroll : undefined, onKeyDown: this.onKeyDown, onFocus: this.onFocus, "aria-rowcount": total, "aria-colcount": leafColumns.length, role: 'treegrid' }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                 this.props.toolbar,
                 React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
                         _this.tableElement = table;
                     } },
-                    React.createElement("table", __assign({}, (this.props.tableProps || {}), { style: __assign({}, (tableProps.style || {}), { userSelect: tableUserSelect }), role: 'presentation' }),
+                    React.createElement("table", __assign({}, (this.props.tableProps || {}), { style: __assign(__assign({}, (tableProps.style || {})), { userSelect: tableUserSelect }), role: 'presentation' }),
                         colGroups,
                         header,
                         React.createElement("tbody", __assign({}, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes, { ref: function (e) { return _this.tbodyElement = e; }, role: 'presentation' }), body))),
@@ -517,20 +537,19 @@ var GanttTreeList = /** @class */ (function (_super) {
                 this.tbodyOffsetTop > 0 &&
                 this.flattedData.length) ?
                 this.flattedData :
-                data.map(function (item) { return (__assign({}, item, itemDataMap())); });
+                data.map(function (item) { return (__assign(__assign({}, item), itemDataMap())); });
             this.prevData = data;
             this.flattedData = flattedData;
             return flattedData;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     GanttTreeList.prototype.onSelectionChange = function (options) {
         if (this.props.onSelectionChange) {
             var event_1 = options.event, item = options.item, dataIndex = options.dataIndex, columnIndex = options.columnIndex;
-            var _a = kendo_react_data_tools_1.getSelectionOptions(this.props.selectable), mode = _a.mode, cell = _a.cell;
-            var selectionEvent = __assign({}, this.getEventArguments(event_1.syntheticEvent), { dataItem: item.dataItem, level: item.level, startColIndex: columnIndex, endColIndex: columnIndex, startRowIndex: dataIndex, endRowIndex: dataIndex, dataItems: this.getLeafDataItems(), altKey: false, ctrlKey: false, shiftKey: false, metaKey: false, mode: mode,
-                cell: cell, isDrag: false, componentId: this._treeListId, selectedField: this.props.selectedField || '' });
+            var _a = (0, kendo_react_data_tools_1.getSelectionOptions)(this.props.selectable), mode = _a.mode, cell = _a.cell;
+            var selectionEvent = __assign(__assign({}, this.getEventArguments(event_1.syntheticEvent)), { dataItem: item.dataItem, level: item.level, startColIndex: columnIndex, endColIndex: columnIndex, startRowIndex: dataIndex, endRowIndex: dataIndex, dataItems: this.getLeafDataItems(), altKey: false, ctrlKey: false, shiftKey: false, metaKey: false, mode: mode, cell: cell, isDrag: false, componentId: this._treeListId, selectedField: this.props.selectedField || '' });
             this.props.onSelectionChange.call(undefined, selectionEvent);
         }
     };

package/dist/npm/components/toolbar/AddButton.d.ts

@@ -1,11 +1,12 @@
 import * as React from 'react';
+import { DataItem } from '../../interfaces/DataItem';
 import { AddDirection } from '../../interfaces/AddDirection';
 /** @hidden */
 export declare const AddButton: React.ForwardRefExoticComponent<{
-    selectedTask: any;
+    selectedTask: DataItem | null;
     onClick: (options: {
         nativeEvent: any;
         syntheticEvent: any;
         direction: AddDirection;
     }) => void;
-} & React.RefAttributes<{}>>;
+} & React.RefAttributes<unknown>>;