@progress/kendo-react-gantt - npm Package Compare versions

Comparing version 4.7.0-dev.202106111018 to 4.7.0-dev.202106141548

dist/es/components/BaseView.js

@@ -25,4 +25,4 @@ var __assign = (this && this.__assign) || function () {
     var slotLevels = props.slotLevels, slotWidth = props.slotWidth, timelineHeaderCell = props.timelineHeaderCell;
-    var _a = 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;
-    var _b = 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;
+    var _a = 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 = 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 = useGanttRowHeightContext();
@@ -238,3 +238,3 @@ var toolbarHeight = useGanttToolbarHeightContext();
         React.createElement("div", { className: 'k-gantt-content', ref: contentRef, style: { height: "calc(100% - " + toolbarHeight + "px)" } },
-            React.createElement(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, 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, afterContent: (React.createElement(React.Fragment, null,
+            React.createElement(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, { key: getter(dependencyModelFields.id)(dependency), dependency: dependency }); })),
@@ -241,0 +241,0 @@ 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 }))),

dist/es/components/GanttTask.js

@@ -136,3 +136,3 @@ var __assign = (this && this.__assign) || function () {
                 'k-task-milestone': true,
-                'k-state-selected': taskSelected
+                'k-state-selected': taskSelected && !Array.isArray(taskSelected)
             }), style: taskStyles, ref: taskElementRef }, (_a = {}, _a[TASK_ID_ATT] = taskId, _a), { onClick: onClickHandler, onDoubleClick: onDoubleClickHandler, onContextMenu: onContextMenuHandler }),
@@ -148,3 +148,3 @@ React.createElement("div", { className: 'k-task-milestone-content' }),
                 'k-task-single': !isSummaryTask,
-                'k-state-selected': taskSelected
+                'k-state-selected': taskSelected && !Array.isArray(taskSelected)
             }), ref: taskElementRef, style: taskStyles }, (_b = {}, _b[TASK_ID_ATT] = taskId, _b), { onClick: onClickHandler, onDoubleClick: onDoubleClickHandler, onContextMenu: onContextMenuHandler }),
@@ -151,0 +151,0 @@ isSummaryTask ?

dist/es/components/GanttTreelist.d.ts

@@ -81,2 +81,3 @@ import * as React from 'react';
     protected dragLogic: CommonDragLogic;
+    private _treeListId;
     private contextStateRef;
@@ -121,2 +122,3 @@ private navigationStateRef;
     private onHeaderSelectionChange;
+    private selectionRelease;
     private onSortChange;
@@ -133,2 +135,3 @@ private onFilterChange;
     private getEventArguments;
+    private getLeafDataItems;
 }

dist/es/components/GanttTreelist.js

@@ -37,4 +37,4 @@ var __extends = (this && this.__extends) || (function () {
 import * as PropTypes from 'prop-types';
-import { classNames, noop, canUseDOM, getter } from '@progress/kendo-react-common';
-import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, TableKeyboardNavigationContext, tableKeyboardNavigation, tableKeyboardNavigationScopeAttributes, tableKeyboardNavigationTools as navigationTools, tableKeyboardNavigationBodyAttributes } from '@progress/kendo-react-data-tools';
+import { classNames, noop, canUseDOM, getter, guid } from '@progress/kendo-react-common';
+import { Header, HeaderRow, FilterRow as TreeListFilterRow, ColumnResize, CommonDragLogic, DragClue, DropClue, tableColumnsVirtualization, TableKeyboardNavigationContext, tableKeyboardNavigation, tableKeyboardNavigationScopeAttributes, tableKeyboardNavigationTools as navigationTools, tableKeyboardNavigationBodyAttributes, getSelectionOptions, TableSelection } from '@progress/kendo-react-data-tools';
 import { TreeListCell, TreeListNoRecords, TreeListRow, setHeaderRowsTop, tableRowsVirtualization } from '@progress/kendo-react-treelist';
@@ -58,2 +58,3 @@ import { isExpanded, hasChildren } from '../utils';
         _this.element = null;
+        _this._treeListId = guid();
         _this.contextStateRef = { current: undefined };
@@ -85,2 +86,7 @@ _this.navigationStateRef = { current: undefined };
             });
+            if (_this.props.onKeyDown) {
+                var _a = 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)));
+            }
         };
@@ -210,3 +216,4 @@ _this.onFocus = function (event) {
                     syntheticEvent: event.syntheticEvent,
-                    target: _this
+                    target: _this,
+                    dataItems: _this.getLeafDataItems()
                 };
@@ -216,2 +223,8 @@ _this.props.onHeaderSelectionChange.call(undefined, headerSelectionEvent);
         };
+        _this.selectionRelease = function (event) {
+            if (_this.props.onSelectionChange) {
+                var selectionEvent = __assign({ syntheticEvent: undefined, target: _this, selectedField: _this.props.selectedField || '', componentId: _this._treeListId, dataItems: _this.getLeafDataItems(), dataItem: null, level: [] }, event);
+                _this.props.onSelectionChange.call(undefined, selectionEvent);
+            }
+        };
         _this.onSortChange = function (syntheticEvent, sort, field) {
@@ -290,2 +303,5 @@ _this.onDataStateChange(_this.props.onSortChange, { sort: sort, field: field }, syntheticEvent);
         };
+        _this.getLeafDataItems = function () {
+            return _this.flatData.map(function (item) { return item.dataItem; });
+        };
         _this.dragLogic = new CommonDragLogic(_this.onColumnReorder, noop, noop);
@@ -374,3 +390,3 @@ _this.columnResize = new ColumnResize(_this.onColumnResize);
         }), colSpans = _f.colSpans, hiddenColumns = _f.hiddenColumns;
-        var dataRow = function (item, inEdit, rowId, isRowExpanded) { return columnsWithColGroup.map(function (column, columnIndex) {
+        var dataRow = function (item, inEdit, rowId, isRowExpanded, rowDataIndex, selectedValue) { return columnsWithColGroup.map(function (column, columnIndex) {
             if (hiddenColumns[columnIndex]) {
@@ -391,3 +407,3 @@ return null;
                 selectionChange: (_this.props.onSelectionChange) ? (function (e) {
-                    _this.onSelectionChange(e, item);
+                    _this.onSelectionChange({ event: e, item: item, columnIndex: columnIndex, dataIndex: rowDataIndex });
                 }) : undefined,
@@ -405,3 +421,4 @@ level: item.level,
                     borderRightWidth: column.rightBorder ? '1px' : ''
-                } || {}
+                } || {},
+                isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1
             };
@@ -436,2 +453,3 @@ if (inEdit && column.editCell) {
             var isRowExpanded = isExpanded(item.dataItem, _this.props.expandField);
+            var selectedValue = _this.props.selectedField ? getter(_this.props.selectedField)(item.dataItem) : undefined;
             var rowProps = {
@@ -455,7 +473,8 @@ key: rowId,
                 ariaSetSize: item.levelCount,
-                ariaPosInSet: item.level[item.level.length - 1] + 1
+                ariaPosInSet: item.level[item.level.length - 1] + 1,
+                isSelected: typeof selectedValue === 'boolean' && selectedValue
             };
             var EditRow = _this.props.editRow;
             var Row = _this.props.row || TreeListRow;
-            var cells = dataRow(item, inEdit, rowId, isRowExpanded);
+            var cells = dataRow(item, inEdit, rowId, isRowExpanded, rowIndex, selectedValue);
             return inEdit && EditRow ?
@@ -471,9 +490,14 @@ React.createElement(EditRow, __assign({}, rowProps), cells) :
         var virtualScroll = this.props.columnVirtualization || this.props.scrollable === 'virtual';
+        var tableUserSelect = this.props.selectable && this.props.selectable.drag ? 'none' : undefined;
+        var tableProps = (this.props.tableProps || {});
         return (React.createElement(TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
             React.createElement("div", __assign({ style: this.props.style, className: 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": columnsWithColGroup.length, role: 'treegrid' }, tableKeyboardNavigationScopeAttributes),
                 this.props.toolbar,
-                React.createElement("table", __assign({}, (this.props.tableProps || {}), { ref: function (e) { return _this.tableElement = e; }, role: 'presentation' }),
-                    colGroups,
-                    header,
-                    React.createElement("tbody", __assign({}, tableKeyboardNavigationBodyAttributes, { ref: function (e) { return _this.tbodyElement = e; }, role: 'presentation' }), body)),
+                React.createElement(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' }),
+                        colGroups,
+                        header,
+                        React.createElement("tbody", __assign({}, tableKeyboardNavigationBodyAttributes, { ref: function (e) { return _this.tbodyElement = e; }, role: 'presentation' }), body))),
                 this.props.pager && (React.createElement(this.props.pager, { className: "k-grid-pager", total: total, skip: skip, take: take, onPageChange: this.onPageChange })),
@@ -505,5 +529,8 @@ clues,
     });
-    GanttTreeList.prototype.onSelectionChange = function (event, item) {
+    GanttTreeList.prototype.onSelectionChange = function (options) {
         if (this.props.onSelectionChange) {
-            var selectionEvent = __assign({}, this.getEventArguments(event.syntheticEvent), { dataItem: item.dataItem, level: item.level });
+            var event_1 = options.event, item = options.item, dataIndex = options.dataIndex, columnIndex = options.columnIndex;
+            var _a = 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 || '' });
             this.props.onSelectionChange.call(undefined, selectionEvent);
@@ -510,0 +537,0 @@ }

dist/es/constants/index.d.ts

 import { MS_PER_DAY, MS_PER_HOUR, MS_PER_MINUTE } from '@progress/kendo-date-math';
 import { TaskModelFields } from '../interfaces/TaskModelFields';
 import { DependencyModelFields } from '../interfaces/DependencyModelFields';
+/** The attribute required by the Gantt selection on Gantt `tr` elements. */
+export declare const GANTT_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
+/** The attribute required by the Gantt selection on Gantt `td` elements. */
+export declare const GANTT_COL_INDEX_ATTRIBUTE = "data-grid-col-index";
+/** Attribute which disable selection start from this element. */
+export declare const GANTT_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";
 /** @hidden */
@@ -5,0 +11,0 @@ export { MS_PER_HOUR, MS_PER_MINUTE, MS_PER_DAY };

dist/es/constants/index.js

 var _a, _b;
 import { MS_PER_DAY, MS_PER_HOUR, MS_PER_MINUTE } from '@progress/kendo-date-math';
+import { TABLE_COL_INDEX_ATTRIBUTE, TABLE_ROW_INDEX_ATTRIBUTE, TABLE_PREVENT_SELECTION_ELEMENT } from '@progress/kendo-react-data-tools';
+/** The attribute required by the Gantt selection on Gantt `tr` elements. */
+export var GANTT_ROW_INDEX_ATTRIBUTE = TABLE_ROW_INDEX_ATTRIBUTE;
+/** The attribute required by the Gantt selection on Gantt `td` elements. */
+export var GANTT_COL_INDEX_ATTRIBUTE = TABLE_COL_INDEX_ATTRIBUTE;
+/** Attribute which disable selection start from this element. */
+export var GANTT_PREVENT_SELECTION_ELEMENT = TABLE_PREVENT_SELECTION_ELEMENT;
 /** @hidden */
@@ -4,0 +11,0 @@ export { MS_PER_HOUR, MS_PER_MINUTE, MS_PER_DAY };

dist/es/context/GanttContext.d.ts

@@ -5,3 +5,3 @@ import * as React from 'react';
 import { GanttView } from '../interfaces/GanttView';
-import { TreeListDataStateChangeEvent, TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListExpandChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent } from '@progress/kendo-react-treelist';
+import { TreeListDataStateChangeEvent, TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListExpandChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListKeyDownEvent, TreeListSelectionChangeEvent, TreeListHeaderSelectionChangeEvent } from '@progress/kendo-react-treelist';
 import { DateRange } from '../interfaces/DateRange';
@@ -83,2 +83,5 @@ import { GanttBaseProps } from '../interfaces/GanttBaseProps';
     onDependencyCreate?: (args: GanttDependencyCreateEvent) => void;
+    onKeyDown?: (args: TreeListKeyDownEvent) => void;
+    onSelectionChange?: (args: TreeListSelectionChangeEvent) => void;
+    onHeaderSelectionChange?: (args: TreeListHeaderSelectionChangeEvent) => void;
 };
@@ -85,0 +88,0 @@ /** @hidden */

dist/es/context/GanttContext.js

@@ -72,3 +72,6 @@ import * as React from 'react';
     onColumnReorder: noop,
-    onDependencyCreate: noop
+    onDependencyCreate: noop,
+    onKeyDown: noop,
+    onSelectionChange: noop,
+    onHeaderSelectionChange: noop
 });
@@ -75,0 +78,0 @@ /** @hidden */

dist/es/Gantt.js

@@ -34,3 +34,3 @@ var __assign = (this && this.__assign) || function () {
     validatePackage(packageMetadata);
-    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.taskData, taskData = _b === void 0 ? defaultProps.taskData : _b, _c = props.dependencyData, dependencyData = _c === void 0 ? defaultProps.dependencyData : _c, style = props.style, className = props.className, noRecords = props.noRecords, timezone = props.timezone, _d = props.rowHeight, rowHeight = _d === void 0 ? defaultProps.rowHeight : _d, resizable = props.resizable, reorderable = props.reorderable, sortable = props.sortable, sort = props.sort, filter = props.filter, columnMenuFilter = props.columnMenuFilter, columnMenu = props.columnMenu, navigatable = props.navigatable, toolbar = props.toolbar, row = props.row;
+    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.taskData, taskData = _b === void 0 ? defaultProps.taskData : _b, _c = props.dependencyData, dependencyData = _c === void 0 ? defaultProps.dependencyData : _c, style = props.style, className = props.className, noRecords = props.noRecords, timezone = props.timezone, _d = props.rowHeight, rowHeight = _d === void 0 ? defaultProps.rowHeight : _d, resizable = props.resizable, reorderable = props.reorderable, sortable = props.sortable, sort = props.sort, filter = props.filter, columnMenuFilter = props.columnMenuFilter, columnMenu = props.columnMenu, navigatable = props.navigatable, toolbar = props.toolbar, row = props.row, selectable = props.selectable;
     var intl = useInternationalization();
@@ -106,2 +106,17 @@ var taskModelFields = React.useMemo(function () { return getTaskModelFields(props.taskModelFields); }, [props.taskModelFields]).fields;
     }, [props.onSortChange]);
+    var handleKeyDown = React.useCallback(function (event) {
+        if (props.onKeyDown) {
+            props.onKeyDown.call(undefined, __assign({}, event, { target: ganttRef.current }));
+        }
+    }, [props.onKeyDown]);
+    var handleSelectionChange = React.useCallback(function (event) {
+        if (props.onSelectionChange) {
+            props.onSelectionChange.call(undefined, __assign({}, event, { target: ganttRef.current }));
+        }
+    }, [props.onSelectionChange]);
+    var handleHeaderSelectionChange = React.useCallback(function (event) {
+        if (props.onHeaderSelectionChange) {
+            props.onHeaderSelectionChange.call(undefined, __assign({}, event, { target: ganttRef.current }));
+        }
+    }, [props.onHeaderSelectionChange]);
     var handleFilterChange = React.useCallback(function (event) {
@@ -213,3 +228,4 @@ if (props.onFilterChange) {
             navigatable: navigatable,
-            row: row
+            row: row,
+            selectable: selectable
         }, events: {
@@ -226,3 +242,6 @@ onDataStateChange: handleDataStateChange,
             onColumnReorder: handleColumnReorder,
-            onDependencyCreate: props.onDependencyCreate && handleDependencyCreate
+            onDependencyCreate: props.onDependencyCreate && handleDependencyCreate,
+            onKeyDown: handleKeyDown,
+            onSelectionChange: handleSelectionChange,
+            onHeaderSelectionChange: handleHeaderSelectionChange
         }, taskEvents: {
@@ -229,0 +248,0 @@ onTaskClick: handleTaskClick,

dist/es/interfaces/events.d.ts

@@ -6,2 +6,3 @@ import { SortDescriptor, FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { AddDirection } from './AddDirection';
+import { TableKeyDownEvent, TableSelectionChangeEvent } from '@progress/kendo-react-data-tools';
 /**
@@ -118,2 +119,25 @@ * Represents the base event object of the Gantt.
 /**
+ * Represents the object of the `onKeyDownEvent` Gantt event.
+ */
+export interface GanttKeyDownEvent extends GanttEvent, TableKeyDownEvent<GanttHandle> {
+}
+/**
+ * Represents the object of the `onHeaderSelectionChange` Gantt event.
+ */
+export interface GanttHeaderSelectionChangeEvent extends GanttEvent {
+    /**
+     * The field of the column in which the cell is located.
+     */
+    field?: string;
+}
+/**
+ * Represents the object of the `onSelectionChange` Gantt event.
+ */
+export interface GanttSelectionChangeEvent extends GanttEvent, TableSelectionChangeEvent<GanttHandle> {
+    /**
+     * An array of indexes of each parent and current item in the data tree.
+     */
+    level: number[];
+}
+/**
  * Called every time the user changes the active `view`.
@@ -120,0 +144,0 @@ */

dist/es/interfaces/GanttBaseProps.d.ts

@@ -7,2 +7,3 @@ /// <reference types="react" />
 import { GanttRowProps } from './GanttRowProps';
+import { GanttSelectableSettings } from './GanttSelectableSettings';
 /**
@@ -59,2 +60,6 @@ * @hidden
     row?: React.ComponentType<GanttRowProps>;
+    /**
+     * The Gantt selectable settings.
+     */
+    selectable?: GanttSelectableSettings;
 }

dist/es/interfaces/GanttCellProps.d.ts

@@ -32,2 +32,6 @@ /// <reference types="react" />
     render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GanttCellProps) => React.ReactElement<HTMLTableCellElement> | null;
+    /**
+     * Indicates if the cell is selected.
+     */
+    isSelected: boolean;
 }

dist/es/interfaces/GanttProps.d.ts

@@ -6,3 +6,3 @@ /// <reference types="react" />
 import { GanttView } from './GanttView';
-import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttColumnMenuFilterChangeEvent, GanttAddClickEvent, GanttTaskContextMenuEvent, GanttTaskClickEvent, GanttTaskDoubleClickEvent, GanttRowDoubleClickEvent, GanttRowContextMenuEvent, GanttTaskRemoveClickEvent, GanttDependencyCreateEvent } from './events';
+import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttColumnMenuFilterChangeEvent, GanttAddClickEvent, GanttTaskContextMenuEvent, GanttTaskClickEvent, GanttTaskDoubleClickEvent, GanttRowDoubleClickEvent, GanttRowContextMenuEvent, GanttTaskRemoveClickEvent, GanttDependencyCreateEvent, GanttKeyDownEvent, GanttSelectionChangeEvent, GanttHeaderSelectionChangeEvent } from './events';
 import { DataItem } from './DataItem';
@@ -132,2 +132,14 @@ /**
     onDependencyCreate?: (event: GanttDependencyCreateEvent) => void;
+    /**
+     * Fires when the user press keyboard key.
+     */
+    onKeyDown?: (event: GanttKeyDownEvent) => void;
+    /**
+     * Fires when the user tries to select or deselect a row or cell.
+     */
+    onSelectionChange?: (event: GanttSelectionChangeEvent) => void;
+    /**
+     * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`
+     */
+    onHeaderSelectionChange?: (event: GanttHeaderSelectionChangeEvent) => void;
 }

dist/es/interfaces/GanttRowProps.d.ts

@@ -88,2 +88,6 @@ /// <reference types="react" />
     ariaPosInSet?: number;
+    /**
+     * Indicates if the row is selected.
+     */
+    isSelected: boolean;
 }

dist/es/main.d.ts

@@ -6,3 +6,3 @@ import { Gantt } from './Gantt';
 import { GanttYearView } from './views/GanttYearView';
-import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttColumnMenuFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttRowContextMenuEvent, GanttRowDoubleClickEvent, GanttTaskClickEvent, GanttTaskContextMenuEvent, GanttTaskDoubleClickEvent, GanttTaskRemoveClickEvent } from './interfaces/events';
+import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttColumnMenuFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttRowContextMenuEvent, GanttRowDoubleClickEvent, GanttTaskClickEvent, GanttTaskContextMenuEvent, GanttTaskDoubleClickEvent, GanttTaskRemoveClickEvent, GanttKeyDownEvent, GanttSelectionChangeEvent, GanttHeaderSelectionChangeEvent } from './interfaces/events';
 import { GanttTextFilter, GanttTextFilterProps } from './cells/FilterCells/GanttTextFilter';
@@ -21,2 +21,5 @@ import { GanttNumericFilter, GanttNumericFilterProps } from './cells/FilterCells/GanttNumericFilter';
 import { GanttRowProps } from './interfaces/GanttRowProps';
-export { Gantt, GanttDayView, GanttWeekView, GanttMonthView, GanttYearView, GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttColumnMenuFilterChangeEvent, GanttExpandChangeEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttRowClickEvent, GanttRowContextMenuEvent, GanttRowDoubleClickEvent, GanttTaskClickEvent, GanttTaskContextMenuEvent, GanttTaskDoubleClickEvent, GanttTaskRemoveClickEvent, orderBy, filterBy, mapTree, extendDataItem, createDataTree, removeTask, addTask, updateTask, addDependency, GanttTextFilter, GanttTextFilterProps, GanttNumericFilter, GanttNumericFilterProps, GanttBooleanFilter, GanttBooleanFilterProps, GanttDateFilter, GanttDateFilterProps, GanttViewProps, GanttRow, GanttRowProps, GanttForm, GanttFormStateChangeEvent, GanttRemoveDialog, GanttRemoveDialogStateChangeEvent, GanttViewTimelineHeaderCellProps, GanttSlotType };
+import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
+import { GanttSelectableMode, GanttSelectableSettings } from './interfaces/GanttSelectableSettings';
+import { GANTT_COL_INDEX_ATTRIBUTE, GANTT_PREVENT_SELECTION_ELEMENT, GANTT_ROW_INDEX_ATTRIBUTE } from './constants';
+export { Gantt, GanttDayView, GanttWeekView, GanttMonthView, GanttYearView, GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttColumnMenuFilterChangeEvent, GanttExpandChangeEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttRowClickEvent, GanttRowContextMenuEvent, GanttRowDoubleClickEvent, GanttTaskClickEvent, GanttTaskContextMenuEvent, GanttTaskDoubleClickEvent, GanttTaskRemoveClickEvent, GanttKeyDownEvent, GanttSelectionChangeEvent, GanttHeaderSelectionChangeEvent, orderBy, filterBy, mapTree, extendDataItem, createDataTree, removeTask, addTask, updateTask, addDependency, GanttTextFilter, GanttTextFilterProps, GanttNumericFilter, GanttNumericFilterProps, GanttBooleanFilter, GanttBooleanFilterProps, GanttDateFilter, GanttDateFilterProps, GanttViewProps, GanttRow, GanttRowProps, GanttForm, GanttFormStateChangeEvent, GanttRemoveDialog, GanttRemoveDialogStateChangeEvent, GanttViewTimelineHeaderCellProps, GanttSlotType, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, GanttSelectableMode, GanttSelectableSettings, GANTT_COL_INDEX_ATTRIBUTE, GANTT_ROW_INDEX_ATTRIBUTE, GANTT_PREVENT_SELECTION_ELEMENT };

dist/es/main.js

@@ -15,3 +15,5 @@ import { Gantt } from './Gantt';
 import { GanttRow } from './rows/GanttRow';
-export { Gantt, GanttDayView, GanttWeekView, GanttMonthView, GanttYearView, orderBy, filterBy, mapTree, extendDataItem, createDataTree, removeTask, addTask, updateTask, addDependency, GanttTextFilter, GanttNumericFilter, GanttBooleanFilter, GanttDateFilter, GanttRow, GanttForm, GanttRemoveDialog };
+import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
+import { GANTT_COL_INDEX_ATTRIBUTE, GANTT_PREVENT_SELECTION_ELEMENT, GANTT_ROW_INDEX_ATTRIBUTE } from './constants';
+export { Gantt, GanttDayView, GanttWeekView, GanttMonthView, GanttYearView, orderBy, filterBy, mapTree, extendDataItem, createDataTree, removeTask, addTask, updateTask, addDependency, GanttTextFilter, GanttNumericFilter, GanttBooleanFilter, GanttDateFilter, GanttRow, GanttForm, GanttRemoveDialog, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, GANTT_COL_INDEX_ATTRIBUTE, GANTT_ROW_INDEX_ATTRIBUTE, GANTT_PREVENT_SELECTION_ELEMENT };
 //# sourceMappingURL=main.js.map

dist/es/package-metadata.js

@@ -8,3 +8,3 @@ /**
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1623406284,
+    publishDate: 1623685259,
     version: '',
@@ -11,0 +11,0 @@ licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'

dist/npm/components/BaseView.js

@@ -27,4 +27,4 @@ "use strict";
     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;
-    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;
+    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();
@@ -240,3 +240,3 @@ var toolbarHeight = GanttContext_1.useGanttToolbarHeightContext();
         React.createElement("div", { className: 'k-gantt-content', ref: contentRef, style: { height: "calc(100% - " + 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, 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, afterContent: (React.createElement(React.Fragment, null,
+            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 }); })),
@@ -243,0 +243,0 @@ 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 }))),

dist/npm/components/GanttTask.js

@@ -138,3 +138,3 @@ "use strict";
                 'k-task-milestone': true,
-                'k-state-selected': taskSelected
+                'k-state-selected': taskSelected && !Array.isArray(taskSelected)
             }), style: taskStyles, ref: taskElementRef }, (_a = {}, _a[constants_1.TASK_ID_ATT] = taskId, _a), { onClick: onClickHandler, onDoubleClick: onDoubleClickHandler, onContextMenu: onContextMenuHandler }),
@@ -150,3 +150,3 @@ React.createElement("div", { className: 'k-task-milestone-content' }),
                 'k-task-single': !isSummaryTask,
-                'k-state-selected': taskSelected
+                'k-state-selected': taskSelected && !Array.isArray(taskSelected)
             }), ref: taskElementRef, style: taskStyles }, (_b = {}, _b[constants_1.TASK_ID_ATT] = taskId, _b), { onClick: onClickHandler, onDoubleClick: onDoubleClickHandler, onContextMenu: onContextMenuHandler }),
@@ -153,0 +153,0 @@ isSummaryTask ?

dist/npm/components/GanttTreelist.d.ts

@@ -81,2 +81,3 @@ import * as React from 'react';
     protected dragLogic: CommonDragLogic;
+    private _treeListId;
     private contextStateRef;
@@ -121,2 +122,3 @@ private navigationStateRef;
     private onHeaderSelectionChange;
+    private selectionRelease;
     private onSortChange;
@@ -133,2 +135,3 @@ private onFilterChange;
     private getEventArguments;
+    private getLeafDataItems;
 }

dist/npm/components/GanttTreelist.js

@@ -59,2 +59,3 @@ "use strict";
         _this.element = null;
+        _this._treeListId = kendo_react_common_1.guid();
         _this.contextStateRef = { current: undefined };
@@ -86,2 +87,7 @@ _this.navigationStateRef = { current: undefined };
             });
+            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)));
+            }
         };
@@ -211,3 +217,4 @@ _this.onFocus = function (event) {
                     syntheticEvent: event.syntheticEvent,
-                    target: _this
+                    target: _this,
+                    dataItems: _this.getLeafDataItems()
                 };
@@ -217,2 +224,8 @@ _this.props.onHeaderSelectionChange.call(undefined, headerSelectionEvent);
         };
+        _this.selectionRelease = function (event) {
+            if (_this.props.onSelectionChange) {
+                var selectionEvent = __assign({ syntheticEvent: undefined, target: _this, selectedField: _this.props.selectedField || '', componentId: _this._treeListId, dataItems: _this.getLeafDataItems(), dataItem: null, level: [] }, event);
+                _this.props.onSelectionChange.call(undefined, selectionEvent);
+            }
+        };
         _this.onSortChange = function (syntheticEvent, sort, field) {
@@ -291,2 +304,5 @@ _this.onDataStateChange(_this.props.onSortChange, { sort: sort, field: field }, syntheticEvent);
         };
+        _this.getLeafDataItems = function () {
+            return _this.flatData.map(function (item) { return item.dataItem; });
+        };
         _this.dragLogic = new kendo_react_data_tools_1.CommonDragLogic(_this.onColumnReorder, kendo_react_common_1.noop, kendo_react_common_1.noop);
@@ -375,3 +391,3 @@ _this.columnResize = new kendo_react_data_tools_1.ColumnResize(_this.onColumnResize);
         }), colSpans = _f.colSpans, hiddenColumns = _f.hiddenColumns;
-        var dataRow = function (item, inEdit, rowId, isRowExpanded) { return columnsWithColGroup.map(function (column, columnIndex) {
+        var dataRow = function (item, inEdit, rowId, isRowExpanded, rowDataIndex, selectedValue) { return columnsWithColGroup.map(function (column, columnIndex) {
             if (hiddenColumns[columnIndex]) {
@@ -392,3 +408,3 @@ return null;
                 selectionChange: (_this.props.onSelectionChange) ? (function (e) {
-                    _this.onSelectionChange(e, item);
+                    _this.onSelectionChange({ event: e, item: item, columnIndex: columnIndex, dataIndex: rowDataIndex });
                 }) : undefined,
@@ -406,3 +422,4 @@ level: item.level,
                     borderRightWidth: column.rightBorder ? '1px' : ''
-                } || {}
+                } || {},
+                isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1
             };
@@ -437,2 +454,3 @@ if (inEdit && column.editCell) {
             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 rowProps = {
@@ -456,7 +474,8 @@ key: rowId,
                 ariaSetSize: item.levelCount,
-                ariaPosInSet: item.level[item.level.length - 1] + 1
+                ariaPosInSet: item.level[item.level.length - 1] + 1,
+                isSelected: typeof selectedValue === 'boolean' && selectedValue
             };
             var EditRow = _this.props.editRow;
             var Row = _this.props.row || kendo_react_treelist_1.TreeListRow;
-            var cells = dataRow(item, inEdit, rowId, isRowExpanded);
+            var cells = dataRow(item, inEdit, rowId, isRowExpanded, rowIndex, selectedValue);
             return inEdit && EditRow ?
@@ -472,9 +491,14 @@ React.createElement(EditRow, __assign({}, rowProps), cells) :
         var virtualScroll = this.props.columnVirtualization || this.props.scrollable === 'virtual';
+        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": columnsWithColGroup.length, role: 'treegrid' }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                 this.props.toolbar,
-                React.createElement("table", __assign({}, (this.props.tableProps || {}), { ref: function (e) { return _this.tableElement = e; }, role: 'presentation' }),
-                    colGroups,
-                    header,
-                    React.createElement("tbody", __assign({}, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes, { ref: function (e) { return _this.tbodyElement = e; }, role: 'presentation' }), body)),
+                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' }),
+                        colGroups,
+                        header,
+                        React.createElement("tbody", __assign({}, kendo_react_data_tools_1.tableKeyboardNavigationBodyAttributes, { ref: function (e) { return _this.tbodyElement = e; }, role: 'presentation' }), body))),
                 this.props.pager && (React.createElement(this.props.pager, { className: "k-grid-pager", total: total, skip: skip, take: take, onPageChange: this.onPageChange })),
@@ -506,5 +530,8 @@ clues,
     });
-    GanttTreeList.prototype.onSelectionChange = function (event, item) {
+    GanttTreeList.prototype.onSelectionChange = function (options) {
         if (this.props.onSelectionChange) {
-            var selectionEvent = __assign({}, this.getEventArguments(event.syntheticEvent), { dataItem: item.dataItem, level: item.level });
+            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 || '' });
             this.props.onSelectionChange.call(undefined, selectionEvent);
@@ -511,0 +538,0 @@ }

dist/npm/constants/index.d.ts

 import { MS_PER_DAY, MS_PER_HOUR, MS_PER_MINUTE } from '@progress/kendo-date-math';
 import { TaskModelFields } from '../interfaces/TaskModelFields';
 import { DependencyModelFields } from '../interfaces/DependencyModelFields';
+/** The attribute required by the Gantt selection on Gantt `tr` elements. */
+export declare const GANTT_ROW_INDEX_ATTRIBUTE = "data-grid-row-index";
+/** The attribute required by the Gantt selection on Gantt `td` elements. */
+export declare const GANTT_COL_INDEX_ATTRIBUTE = "data-grid-col-index";
+/** Attribute which disable selection start from this element. */
+export declare const GANTT_PREVENT_SELECTION_ELEMENT = "data-prevent-selection";
 /** @hidden */
@@ -5,0 +11,0 @@ export { MS_PER_HOUR, MS_PER_MINUTE, MS_PER_DAY };

dist/npm/constants/index.js

@@ -8,2 +8,9 @@ "use strict";
 exports.MS_PER_MINUTE = kendo_date_math_1.MS_PER_MINUTE;
+var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
+/** The attribute required by the Gantt selection on Gantt `tr` elements. */
+exports.GANTT_ROW_INDEX_ATTRIBUTE = kendo_react_data_tools_1.TABLE_ROW_INDEX_ATTRIBUTE;
+/** The attribute required by the Gantt selection on Gantt `td` elements. */
+exports.GANTT_COL_INDEX_ATTRIBUTE = kendo_react_data_tools_1.TABLE_COL_INDEX_ATTRIBUTE;
+/** Attribute which disable selection start from this element. */
+exports.GANTT_PREVENT_SELECTION_ELEMENT = kendo_react_data_tools_1.TABLE_PREVENT_SELECTION_ELEMENT;
 /** @hidden */
@@ -10,0 +17,0 @@ exports.DEFAULT_DATE = new Date().getTime();

dist/npm/context/GanttContext.d.ts

@@ -5,3 +5,3 @@ import * as React from 'react';
 import { GanttView } from '../interfaces/GanttView';
-import { TreeListDataStateChangeEvent, TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListExpandChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent } from '@progress/kendo-react-treelist';
+import { TreeListDataStateChangeEvent, TreeListSortChangeEvent, TreeListFilterChangeEvent, TreeListColumnMenuFilterChangeEvent, TreeListExpandChangeEvent, TreeListRowClickEvent, TreeListColumnResizeEvent, TreeListColumnReorderEvent, TreeListKeyDownEvent, TreeListSelectionChangeEvent, TreeListHeaderSelectionChangeEvent } from '@progress/kendo-react-treelist';
 import { DateRange } from '../interfaces/DateRange';
@@ -83,2 +83,5 @@ import { GanttBaseProps } from '../interfaces/GanttBaseProps';
     onDependencyCreate?: (args: GanttDependencyCreateEvent) => void;
+    onKeyDown?: (args: TreeListKeyDownEvent) => void;
+    onSelectionChange?: (args: TreeListSelectionChangeEvent) => void;
+    onHeaderSelectionChange?: (args: TreeListHeaderSelectionChangeEvent) => void;
 };
@@ -85,0 +88,0 @@ /** @hidden */

dist/npm/context/GanttContext.js

@@ -74,3 +74,6 @@ "use strict";
     onColumnReorder: kendo_react_common_1.noop,
-    onDependencyCreate: kendo_react_common_1.noop
+    onDependencyCreate: kendo_react_common_1.noop,
+    onKeyDown: kendo_react_common_1.noop,
+    onSelectionChange: kendo_react_common_1.noop,
+    onHeaderSelectionChange: kendo_react_common_1.noop
 });
@@ -77,0 +80,0 @@ /** @hidden */

dist/npm/Gantt.js

@@ -36,3 +36,3 @@ "use strict";
     kendo_licensing_1.validatePackage(package_metadata_1.packageMetadata);
-    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.taskData, taskData = _b === void 0 ? defaultProps.taskData : _b, _c = props.dependencyData, dependencyData = _c === void 0 ? defaultProps.dependencyData : _c, style = props.style, className = props.className, noRecords = props.noRecords, timezone = props.timezone, _d = props.rowHeight, rowHeight = _d === void 0 ? defaultProps.rowHeight : _d, resizable = props.resizable, reorderable = props.reorderable, sortable = props.sortable, sort = props.sort, filter = props.filter, columnMenuFilter = props.columnMenuFilter, columnMenu = props.columnMenu, navigatable = props.navigatable, toolbar = props.toolbar, row = props.row;
+    var _a = props.columns, columns = _a === void 0 ? defaultProps.columns : _a, _b = props.taskData, taskData = _b === void 0 ? defaultProps.taskData : _b, _c = props.dependencyData, dependencyData = _c === void 0 ? defaultProps.dependencyData : _c, style = props.style, className = props.className, noRecords = props.noRecords, timezone = props.timezone, _d = props.rowHeight, rowHeight = _d === void 0 ? defaultProps.rowHeight : _d, resizable = props.resizable, reorderable = props.reorderable, sortable = props.sortable, sort = props.sort, filter = props.filter, columnMenuFilter = props.columnMenuFilter, columnMenu = props.columnMenu, navigatable = props.navigatable, toolbar = props.toolbar, row = props.row, selectable = props.selectable;
     var intl = kendo_react_intl_1.useInternationalization();
@@ -108,2 +108,17 @@ var taskModelFields = React.useMemo(function () { return utils_1.getTaskModelFields(props.taskModelFields); }, [props.taskModelFields]).fields;
     }, [props.onSortChange]);
+    var handleKeyDown = React.useCallback(function (event) {
+        if (props.onKeyDown) {
+            props.onKeyDown.call(undefined, __assign({}, event, { target: ganttRef.current }));
+        }
+    }, [props.onKeyDown]);
+    var handleSelectionChange = React.useCallback(function (event) {
+        if (props.onSelectionChange) {
+            props.onSelectionChange.call(undefined, __assign({}, event, { target: ganttRef.current }));
+        }
+    }, [props.onSelectionChange]);
+    var handleHeaderSelectionChange = React.useCallback(function (event) {
+        if (props.onHeaderSelectionChange) {
+            props.onHeaderSelectionChange.call(undefined, __assign({}, event, { target: ganttRef.current }));
+        }
+    }, [props.onHeaderSelectionChange]);
     var handleFilterChange = React.useCallback(function (event) {
@@ -215,3 +230,4 @@ if (props.onFilterChange) {
             navigatable: navigatable,
-            row: row
+            row: row,
+            selectable: selectable
         }, events: {
@@ -228,3 +244,6 @@ onDataStateChange: handleDataStateChange,
             onColumnReorder: handleColumnReorder,
-            onDependencyCreate: props.onDependencyCreate && handleDependencyCreate
+            onDependencyCreate: props.onDependencyCreate && handleDependencyCreate,
+            onKeyDown: handleKeyDown,
+            onSelectionChange: handleSelectionChange,
+            onHeaderSelectionChange: handleHeaderSelectionChange
         }, taskEvents: {
@@ -231,0 +250,0 @@ onTaskClick: handleTaskClick,

dist/npm/interfaces/events.d.ts

@@ -6,2 +6,3 @@ import { SortDescriptor, FilterDescriptor, CompositeFilterDescriptor } from '@progress/kendo-data-query';
 import { AddDirection } from './AddDirection';
+import { TableKeyDownEvent, TableSelectionChangeEvent } from '@progress/kendo-react-data-tools';
 /**
@@ -118,2 +119,25 @@ * Represents the base event object of the Gantt.
 /**
+ * Represents the object of the `onKeyDownEvent` Gantt event.
+ */
+export interface GanttKeyDownEvent extends GanttEvent, TableKeyDownEvent<GanttHandle> {
+}
+/**
+ * Represents the object of the `onHeaderSelectionChange` Gantt event.
+ */
+export interface GanttHeaderSelectionChangeEvent extends GanttEvent {
+    /**
+     * The field of the column in which the cell is located.
+     */
+    field?: string;
+}
+/**
+ * Represents the object of the `onSelectionChange` Gantt event.
+ */
+export interface GanttSelectionChangeEvent extends GanttEvent, TableSelectionChangeEvent<GanttHandle> {
+    /**
+     * An array of indexes of each parent and current item in the data tree.
+     */
+    level: number[];
+}
+/**
  * Called every time the user changes the active `view`.
@@ -120,0 +144,0 @@ */

dist/npm/interfaces/GanttBaseProps.d.ts

@@ -7,2 +7,3 @@ /// <reference types="react" />
 import { GanttRowProps } from './GanttRowProps';
+import { GanttSelectableSettings } from './GanttSelectableSettings';
 /**
@@ -59,2 +60,6 @@ * @hidden
     row?: React.ComponentType<GanttRowProps>;
+    /**
+     * The Gantt selectable settings.
+     */
+    selectable?: GanttSelectableSettings;
 }

dist/npm/interfaces/GanttCellProps.d.ts

@@ -32,2 +32,6 @@ /// <reference types="react" />
     render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GanttCellProps) => React.ReactElement<HTMLTableCellElement> | null;
+    /**
+     * Indicates if the cell is selected.
+     */
+    isSelected: boolean;
 }

dist/npm/interfaces/GanttProps.d.ts

@@ -6,3 +6,3 @@ /// <reference types="react" />
 import { GanttView } from './GanttView';
-import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttColumnMenuFilterChangeEvent, GanttAddClickEvent, GanttTaskContextMenuEvent, GanttTaskClickEvent, GanttTaskDoubleClickEvent, GanttRowDoubleClickEvent, GanttRowContextMenuEvent, GanttTaskRemoveClickEvent, GanttDependencyCreateEvent } from './events';
+import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttColumnMenuFilterChangeEvent, GanttAddClickEvent, GanttTaskContextMenuEvent, GanttTaskClickEvent, GanttTaskDoubleClickEvent, GanttRowDoubleClickEvent, GanttRowContextMenuEvent, GanttTaskRemoveClickEvent, GanttDependencyCreateEvent, GanttKeyDownEvent, GanttSelectionChangeEvent, GanttHeaderSelectionChangeEvent } from './events';
 import { DataItem } from './DataItem';
@@ -132,2 +132,14 @@ /**
     onDependencyCreate?: (event: GanttDependencyCreateEvent) => void;
+    /**
+     * Fires when the user press keyboard key.
+     */
+    onKeyDown?: (event: GanttKeyDownEvent) => void;
+    /**
+     * Fires when the user tries to select or deselect a row or cell.
+     */
+    onSelectionChange?: (event: GanttSelectionChangeEvent) => void;
+    /**
+     * Fires when the user clicks the checkbox of a column header whose `field` matches `selectedField`
+     */
+    onHeaderSelectionChange?: (event: GanttHeaderSelectionChangeEvent) => void;
 }

dist/npm/interfaces/GanttRowProps.d.ts

@@ -88,2 +88,6 @@ /// <reference types="react" />
     ariaPosInSet?: number;
+    /**
+     * Indicates if the row is selected.
+     */
+    isSelected: boolean;
 }

dist/npm/main.d.ts

@@ -6,3 +6,3 @@ import { Gantt } from './Gantt';
 import { GanttYearView } from './views/GanttYearView';
-import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttColumnMenuFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttRowContextMenuEvent, GanttRowDoubleClickEvent, GanttTaskClickEvent, GanttTaskContextMenuEvent, GanttTaskDoubleClickEvent, GanttTaskRemoveClickEvent } from './interfaces/events';
+import { GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttColumnMenuFilterChangeEvent, GanttExpandChangeEvent, GanttRowClickEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttRowContextMenuEvent, GanttRowDoubleClickEvent, GanttTaskClickEvent, GanttTaskContextMenuEvent, GanttTaskDoubleClickEvent, GanttTaskRemoveClickEvent, GanttKeyDownEvent, GanttSelectionChangeEvent, GanttHeaderSelectionChangeEvent } from './interfaces/events';
 import { GanttTextFilter, GanttTextFilterProps } from './cells/FilterCells/GanttTextFilter';
@@ -21,2 +21,5 @@ import { GanttNumericFilter, GanttNumericFilterProps } from './cells/FilterCells/GanttNumericFilter';
 import { GanttRowProps } from './interfaces/GanttRowProps';
-export { Gantt, GanttDayView, GanttWeekView, GanttMonthView, GanttYearView, GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttColumnMenuFilterChangeEvent, GanttExpandChangeEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttRowClickEvent, GanttRowContextMenuEvent, GanttRowDoubleClickEvent, GanttTaskClickEvent, GanttTaskContextMenuEvent, GanttTaskDoubleClickEvent, GanttTaskRemoveClickEvent, orderBy, filterBy, mapTree, extendDataItem, createDataTree, removeTask, addTask, updateTask, addDependency, GanttTextFilter, GanttTextFilterProps, GanttNumericFilter, GanttNumericFilterProps, GanttBooleanFilter, GanttBooleanFilterProps, GanttDateFilter, GanttDateFilterProps, GanttViewProps, GanttRow, GanttRowProps, GanttForm, GanttFormStateChangeEvent, GanttRemoveDialog, GanttRemoveDialogStateChangeEvent, GanttViewTimelineHeaderCellProps, GanttSlotType };
+import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
+import { GanttSelectableMode, GanttSelectableSettings } from './interfaces/GanttSelectableSettings';
+import { GANTT_COL_INDEX_ATTRIBUTE, GANTT_PREVENT_SELECTION_ELEMENT, GANTT_ROW_INDEX_ATTRIBUTE } from './constants';
+export { Gantt, GanttDayView, GanttWeekView, GanttMonthView, GanttYearView, GanttViewChangeEvent, GanttDataStateChangeEvent, GanttSortChangeEvent, GanttFilterChangeEvent, GanttColumnMenuFilterChangeEvent, GanttExpandChangeEvent, GanttColumnResizeEvent, GanttColumnReorderEvent, GanttRowClickEvent, GanttRowContextMenuEvent, GanttRowDoubleClickEvent, GanttTaskClickEvent, GanttTaskContextMenuEvent, GanttTaskDoubleClickEvent, GanttTaskRemoveClickEvent, GanttKeyDownEvent, GanttSelectionChangeEvent, GanttHeaderSelectionChangeEvent, orderBy, filterBy, mapTree, extendDataItem, createDataTree, removeTask, addTask, updateTask, addDependency, GanttTextFilter, GanttTextFilterProps, GanttNumericFilter, GanttNumericFilterProps, GanttBooleanFilter, GanttBooleanFilterProps, GanttDateFilter, GanttDateFilterProps, GanttViewProps, GanttRow, GanttRowProps, GanttForm, GanttFormStateChangeEvent, GanttRemoveDialog, GanttRemoveDialogStateChangeEvent, GanttViewTimelineHeaderCellProps, GanttSlotType, getSelectedState, getSelectedStateFromKeyDown, setSelectedState, GanttSelectableMode, GanttSelectableSettings, GANTT_COL_INDEX_ATTRIBUTE, GANTT_ROW_INDEX_ATTRIBUTE, GANTT_PREVENT_SELECTION_ELEMENT };

dist/npm/main.js

@@ -38,2 +38,10 @@ "use strict";
 exports.GanttRow = GanttRow_1.GanttRow;
+var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
+exports.getSelectedState = kendo_react_data_tools_1.getSelectedState;
+exports.getSelectedStateFromKeyDown = kendo_react_data_tools_1.getSelectedStateFromKeyDown;
+exports.setSelectedState = kendo_react_data_tools_1.setSelectedState;
+var constants_1 = require("./constants");
+exports.GANTT_COL_INDEX_ATTRIBUTE = constants_1.GANTT_COL_INDEX_ATTRIBUTE;
+exports.GANTT_PREVENT_SELECTION_ELEMENT = constants_1.GANTT_PREVENT_SELECTION_ELEMENT;
+exports.GANTT_ROW_INDEX_ATTRIBUTE = constants_1.GANTT_ROW_INDEX_ATTRIBUTE;
 //# sourceMappingURL=main.js.map

dist/npm/package-metadata.js

@@ -10,3 +10,3 @@ "use strict";
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1623406284,
+    publishDate: 1623685259,
     version: '',
@@ -13,0 +13,0 @@ licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'

package.json

 {
   "name": "@progress/kendo-react-gantt",
-  "version": "4.7.0-dev.202106111018",
+  "version": "4.7.0-dev.202106141548",
   "description": "KendoReact Gantt package",
@@ -54,3 +54,3 @@ "repository": {
   "dependencies": {
-    "@progress/kendo-react-common": "4.7.0-dev.202106111018",
+    "@progress/kendo-react-common": "4.7.0-dev.202106141548",
     "prop-types": "^15.6.0"
@@ -63,12 +63,12 @@ },
     "@progress/kendo-licensing": "^1.0.1",
-    "@progress/kendo-react-buttons": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-data-tools": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-dateinputs": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-dialogs": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-dropdowns": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-form": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-inputs": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-intl": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-labels": "4.7.0-dev.202106111018",
-    "@progress/kendo-react-treelist": "4.7.0-dev.202106111018"
+    "@progress/kendo-react-buttons": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-data-tools": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-dateinputs": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-dialogs": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-dropdowns": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-form": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-inputs": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-intl": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-labels": "4.7.0-dev.202106141548",
+    "@progress/kendo-react-treelist": "4.7.0-dev.202106141548"
   },
@@ -75,0 +75,0 @@ "@progress": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1689607

increased by2.48%

Number of package files

391

increased by1.56%

Lines of code

12014

increased by2.85%

Dependency changes

• + Added@progress/kendo-react-common@4.7.0-dev.202106141548(transitive)

• - Removed@progress/kendo-react-common@4.7.0-dev.202106111018(transitive)

• Updated@progress/kendo-react-common@4.7.0-dev.202106141548