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

package/dist/npm/Grid.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 __());
@@ -23,7 +25,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.Grid = void 0;
 var React = require("react");
 var PropTypes = require("prop-types");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
@@ -92,14 +104,16 @@ var Grid = /** @class */ (function (_super) {
         _this._columnsMap = [[]];
         _this.contextStateRef = { current: undefined };
         _this.navigationStateRef = { current: undefined };
+        _this._data = [];
         _this.wrapperScrollTop = 0;
         _this.headerRef = React.createRef();
-        _this.element = null;
+        _this.headerElementRef = React.createRef();
+        _this._element = null;
         _this.tableElement = null;
         _this._footer = null;
         _this.forceUpdateTimeout = undefined;
         _this.isRtl = false;
-        _this._gridId = kendo_react_common_1.guid();
+        _this._gridId = (0, kendo_react_common_1.guid)();
         /**
          * Method to allow the scroll to be set to a specific row index.
          *
@@ -116,8 +130,8 @@ var Grid = /** @class */ (function (_super) {
             }
             else if (_this.element) {
                 var selectedRow = rowIndex < 1
-                    ? _this.element.querySelector("tbody > tr:nth-child(" + 1 + ")")
-                    : _this.element.querySelector("tbody > tr:nth-child(" + rowIndex + ")");
+                    ? _this.element.querySelector("tbody > tr:nth-child(".concat(1, ")"))
+                    : _this.element.querySelector("tbody > tr:nth-child(".concat(rowIndex, ")"));
                 if (selectedRow) {
                     selectedRow.scrollIntoView(true);
                 }
@@ -150,7 +164,7 @@ var Grid = /** @class */ (function (_super) {
             if (_this.vs) {
                 _this.vs.scrollHandler(event);
             }
-            kendo_react_common_1.dispatchEvent(_this.props.onScroll, event, _this, undefined);
+            (0, kendo_react_common_1.dispatchEvent)(_this.props.onScroll, event, _this, undefined);
             _this.wrapperScrollTop = scrollTop;
         };
         _this.onKeyDown = function (event) {
@@ -160,9 +174,9 @@ var Grid = /** @class */ (function (_super) {
                 onNavigationAction: _this.onNavigationAction
             });
             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._gridId, selectedField: _this.props.selectedField }, _this.getArguments(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._gridId, selectedField: _this.props.selectedField }, _this.getArguments(event));
+                _this.props.onKeyDown.call(undefined, ev);
             }
         };
         _this.onFocus = function (event) {
@@ -172,7 +186,8 @@ var Grid = /** @class */ (function (_super) {
         };
         _this.onNavigationAction = function (options) {
             if (_this.props.onNavigationAction) {
-                _this.props.onNavigationAction.call(undefined, __assign({ focusElement: options.focusElement }, _this.getArguments(options.event)));
+                var ev = __assign({ focusElement: options.focusElement }, _this.getArguments(options.event));
+                _this.props.onNavigationAction.call(undefined, ev);
             }
         };
         _this.rowClick = function (e, item) {
@@ -190,12 +205,12 @@ var Grid = /** @class */ (function (_super) {
             if (event.field === _this.props.expandField || _this.props.group && event.field === undefined) {
                 var expandChange = _this.props.onExpandChange;
                 if (expandChange) {
-                    expandChange.call(undefined, __assign({}, _this.getArguments(event.syntheticEvent), { dataItem: event.dataItem, dataIndex: event.dataIndex, value: event.value }));
+                    expandChange.call(undefined, __assign(__assign({}, _this.getArguments(event.syntheticEvent)), { dataItem: event.dataItem, dataIndex: event.dataIndex, value: event.value }));
                 }
                 return;
             }
             if (itemChange) {
-                itemChange.call(undefined, __assign({}, _this.getArguments(event.syntheticEvent), { dataItem: event.dataItem, field: event.field, value: event.value }));
+                itemChange.call(undefined, __assign(__assign({}, _this.getArguments(event.syntheticEvent)), { dataItem: event.dataItem, field: event.field, value: event.value }));
             }
         };
         _this.onHeaderSelectionChange = function (event) {
@@ -226,7 +241,7 @@ var Grid = /** @class */ (function (_super) {
             _this.raiseDataEvent(_this.props.onSortChange, { sort: sort }, { sort: sort }, syntheticEvent);
         };
         _this.filterChange = function (filter, syntheticEvent) {
-            _this.raiseDataEvent(_this.props.onFilterChange, { filter: filter }, { filter: filter, skip: 0 }, syntheticEvent);
+            _this.raiseDataEvent(_this.props.onFilterChange, { filter: filter }, { filter: filter || undefined, skip: 0 }, syntheticEvent);
         };
         _this.groupChange = function (groups, event) {
             var syntheticEvent = event.nativeEvent ?
@@ -256,7 +271,7 @@ var Grid = /** @class */ (function (_super) {
         _this.getLeafDataItems = function () {
             return _this._data.filter(function (item) { return item.rowType === 'data'; }).map(function (item) { return item.dataItem; });
         };
-        kendo_react_common_2.validatePackage(package_metadata_1.packageMetadata);
+        (0, kendo_react_common_2.validatePackage)(package_metadata_1.packageMetadata);
         var groupable = _this.props.groupable === true ||
             (typeof _this.props.groupable === 'object') && _this.props.groupable.enabled !== false;
         _this.vs = new VirtualScroll_1.VirtualScroll(groupable || props.rowHeight === undefined || props.rowHeight === 0);
@@ -313,9 +328,19 @@ var Grid = /** @class */ (function (_super) {
         // tslint:enable:max-line-length
         get: function () {
             var shuffledColumns = this._columns.filter(function (q) { return q.declarationIndex >= 0 && q.parentIndex === -1; });
-            return index_1.sanitizeColumns(shuffledColumns);
+            return (0, index_1.sanitizeColumns)(shuffledColumns);
         },
-        enumerable: true,
+        enumerable: false,
+        configurable: true
+    });
+    Object.defineProperty(Grid.prototype, "element", {
+        /**
+         * Returns the HTML element of the Grid component.
+         */
+        get: function () {
+            return this._element;
+        },
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(Grid.prototype, "document", {
@@ -326,22 +351,22 @@ var Grid = /** @class */ (function (_super) {
             // useful only for user actions
             return (this.element && this.element.ownerDocument) || document;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(Grid.prototype, "_header", {
         get: function () {
             return this.headerRef.current;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     /**
      * @hidden
      */
     Grid.prototype.componentDidMount = function () {
-        kendo_react_common_1.setScrollbarWidth();
-        var rtl = kendo_react_data_tools_1.isRtl(this.element);
+        (0, kendo_react_common_1.setScrollbarWidth)();
+        var rtl = (0, kendo_react_data_tools_1.isRtl)(this.element);
         this.isRtl = rtl;
         kendo_react_data_tools_1.tableKeyboardNavigation.onComponentDidMount({
             scope: this.element || undefined,
@@ -367,7 +392,7 @@ var Grid = /** @class */ (function (_super) {
      * @hidden
      */
     Grid.prototype.componentDidUpdate = function () {
-        kendo_react_common_1.setScrollbarWidth();
+        (0, kendo_react_common_1.setScrollbarWidth)();
         kendo_react_data_tools_1.tableKeyboardNavigation.onComponentDidUpdate({
             scope: this.element || undefined,
             contextStateRef: this.contextStateRef,
@@ -426,21 +451,21 @@ var Grid = /** @class */ (function (_super) {
         }
         var groupingFooter = (typeof this.props.groupable === 'object') && this.props.groupable.footer || 'none';
         this._data = [];
-        var resolvedGroupsCount = index_1.flatData(this._data, propsData, groupingFooter, { index: this.props.skip || 0 }, this.props.group !== undefined, this.props.expandField);
+        var resolvedGroupsCount = (0, index_1.flatData)(this._data, propsData, groupingFooter, { index: this.props.skip || 0 }, this.props.group !== undefined, this.props.expandField);
         var children = React.Children.toArray(this.props.children);
-        this.initColumns(children.filter(function (child) { return child &&
+        this.initColumns(children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridColumn'; }), resolvedGroupsCount);
-        var toolbar = children.filter(function (child) { return child &&
+        var toolbar = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridToolbar'; });
-        var noRecords = children.filter(function (child) { return child &&
+        var noRecords = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridNoRecords'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
         var groupingPanel = groupable && (React.createElement(GroupPanel_1.GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle }));
-        var header = (React.createElement(Header_1.Header, { columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, headerRow: React.createElement(HeaderRow_1.HeaderRow, { sort: this.props.sort, sortable: this.props.sortable, sortChange: this.sortChange, group: this.props.group || [], groupable: groupable, groupChange: this.groupChange, filter: this.props.filter, filterable: this.props.filterable, filterOperators: this.props.filterOperators || filterCommon_1.operators, filterChange: this.filterChange, columnMenu: this.props.columnMenu, selectionChange: this.onHeaderSelectionChange, columns: this._columns, columnResize: this.columnResize, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, columnsMap: this._columnsMap, cellRender: this.props.headerCellRender, isRtl: this.isRtl, dragClue: this.dragLogic.dragClueRef, headerRef: this.headerRef, containerRef: this.vs.containerRef }), filterRow: this.props.filterable && React.createElement(FilterRow_1.FilterRow, { columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || filterCommon_1.operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
+        var header = (React.createElement(Header_1.Header, { columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: React.createElement(HeaderRow_1.HeaderRow, { sort: this.props.sort, sortable: this.props.sortable, sortChange: this.sortChange, group: this.props.group || [], groupable: groupable, groupChange: this.groupChange, filter: this.props.filter, filterable: this.props.filterable, filterOperators: this.props.filterOperators || filterCommon_1.operators, filterChange: this.filterChange, columnMenu: this.props.columnMenu, selectionChange: this.onHeaderSelectionChange, columns: this._columns, columnResize: this.columnResize, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, columnsMap: this._columnsMap, cellRender: this.props.headerCellRender, isRtl: this.isRtl, dragClue: this.dragLogic.dragClueRef, headerRef: this.headerElementRef, containerRef: this.vs.containerRef }), filterRow: this.props.filterable && React.createElement(FilterRow_1.FilterRow, { columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || filterCommon_1.operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: column.width !== undefined ?
                     Math.floor(parseFloat(column.width.toString())) + 'px' : undefined })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;
         var tableWidth = parseFloat(((this.props.style || {}).width || '').toString());
-        var _a = kendo_react_data_tools_1.tableColumnsVirtualization({
+        var _a = (0, kendo_react_data_tools_1.tableColumnsVirtualization)({
             enabled: this.props.columnVirtualization,
             columns: leafColumns,
             tableViewPortWidth: tableWidth,
@@ -448,22 +473,22 @@ var Grid = /** @class */ (function (_super) {
         }), colSpans = _a.colSpans, isColHidden = _a.hiddenColumns;
         var dataRow = function (item, rowId, rowDataIndex) {
             var isInEdit = false;
-            var selectedValue = _this.props.selectedField ? index_1.getNestedValue(_this.props.selectedField, item.dataItem) : undefined;
+            var selectedValue = _this.props.selectedField ? (0, index_1.getNestedValue)(_this.props.selectedField, item.dataItem) : undefined;
             return {
                 row: leafColumns.map(function (column, columnIndex) {
                     if (isColHidden[columnIndex]) {
                         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 style = column.left !== undefined
                         ? !_this.isRtl
                             ? { left: column.left, right: column.right }
                             : { left: column.right, right: column.left }
                         : {};
                     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,
@@ -487,7 +512,7 @@ var Grid = /** @class */ (function (_super) {
                     };
                     var currentColumnIsInEdit = false;
                     if (column.editable && _this.props.editField) {
-                        var inEdit = index_1.getNestedValue(_this.props.editField, item.dataItem);
+                        var inEdit = (0, index_1.getNestedValue)(_this.props.editField, item.dataItem);
                         if (inEdit === true || inEdit === column.field) {
                             isInEdit = true;
                             currentColumnIsInEdit = true;
@@ -536,7 +561,7 @@ var Grid = /** @class */ (function (_super) {
                     dataIndex_1++;
                 }
                 var isAlt = absoluteDataIndex % 2 === 0;
-                var dataItemKey = _this.props.dataItemKey && kendo_react_common_1.getter(_this.props.dataItemKey)(item.dataItem);
+                var dataItemKey = _this.props.dataItemKey && (0, kendo_react_common_1.getter)(_this.props.dataItemKey)(item.dataItem);
                 var absoluteIndex = rowIndex + (_this.vs.propsSkip || 0);
                 var rowId = dataItemKey ? dataItemKey : 'ai' + absoluteIndex;
                 var detailRowId = rowId + '_1';
@@ -554,8 +579,8 @@ var Grid = /** @class */ (function (_super) {
                             return (React.createElement(GridGroupCell_1.GridGroupCell, { id: '', dataIndex: item.dataIndex, field: group.field, dataItem: item.dataItem, key: idx, style: {}, ariaColumnIndex: 1 + idx, isSelected: false }));
                         }),
                         _this.props.expandField &&
-                            React.createElement(GridDetailHierarchyCell_1.GridDetailHierarchyCell, { id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId(detailRowId + "-dhcell", idPrefix) }),
-                        React.createElement(GridDetailCell_1.GridDetailCell, { dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId(detailRowId + "-dcell", idPrefix) }))));
+                            React.createElement(GridDetailHierarchyCell_1.GridDetailHierarchyCell, { id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
+                        React.createElement(GridDetailCell_1.GridDetailCell, { dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix) }))));
                 }
             });
         }
@@ -563,7 +588,7 @@ var Grid = /** @class */ (function (_super) {
             body.push((React.createElement("tr", { key: "no-records", className: "k-grid-norecords", "aria-rowindex": rowIndexStart },
                 React.createElement("td", { colSpan: leafColumns.length }, noRecords.length ? noRecords : React.createElement(GridNoRecords_1.GridNoRecords, null)))));
         }
-        var pagerProps = __assign({ className: 'k-grid-pager', onPageChange: this.pagerPageChange, total: total, skip: this.vs.propsSkip || 0, take: (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 10, messagesMap: messages_1.pagerMessagesMap }, (GridPagerSettings_1.normalize(this.props.pageable || {})));
+        var pagerProps = __assign({ className: 'k-grid-pager', onPageChange: this.pagerPageChange, total: total, skip: this.vs.propsSkip || 0, take: (this.props.take !== undefined ? this.props.take : this.props.pageSize) || 10, messagesMap: messages_1.pagerMessagesMap }, ((0, GridPagerSettings_1.normalize)(this.props.pageable || {})));
         var pager = this.props.pager ? React.createElement(this.props.pager, __assign({}, pagerProps)) : React.createElement(kendo_react_data_tools_1.Pager, __assign({}, pagerProps));
         var sorted = function (field) {
             return _this.props.sort && _this.props.sort.filter(function (descriptor) { return descriptor.field === field; }).length > 0;
@@ -578,7 +603,7 @@ var Grid = /** @class */ (function (_super) {
         var tableDisplay = this.props.columnVirtualization ? 'block' : 'table';
         if (this.props.scrollable === 'none') {
             return (React.createElement(kendo_react_data_tools_1.TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: kendo_react_common_1.classNames('k-widget k-grid', this.props.className), "aria-colcount": leafColumns.length, "aria-rowcount": total, ref: function (el) { _this.element = el; }, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
+                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: (0, kendo_react_common_1.classNames)('k-widget k-grid', this.props.className), "aria-colcount": leafColumns.length, "aria-rowcount": total, ref: function (el) { _this._element = el; }, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                     toolbar,
                     groupingPanel,
                     React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
@@ -604,10 +629,10 @@ var Grid = /** @class */ (function (_super) {
             }
         }
         return (React.createElement(kendo_react_data_tools_1.TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-            React.createElement("div", __assign({ style: wrapperStyle, className: kendo_react_common_1.classNames('k-widget k-grid', {
+            React.createElement("div", __assign({ style: wrapperStyle, className: (0, kendo_react_common_1.classNames)('k-widget k-grid', {
                     'k-grid-virtual': this.props.scrollable === 'virtual'
                 }, this.props.className), ref: function (el) {
-                    _this.element = el;
+                    _this._element = el;
                     _this.resetTableWidth();
                 }, role: "grid", "aria-colcount": leafColumns.length, "aria-rowcount": total, onKeyDown: this.onKeyDown, onFocus: this.onFocus }, kendo_react_data_tools_1.tableKeyboardNavigationScopeAttributes),
                 toolbar,
@@ -637,24 +662,24 @@ var Grid = /** @class */ (function (_super) {
     Grid.prototype.selectionChange = function (options) {
         if (this.props.onSelectionChange) {
             var event_1 = options.event, dataItem = options.dataItem, 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.getArguments(event_1.syntheticEvent), { dataItem: dataItem, 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._gridId, 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.getArguments(event_1.syntheticEvent)), { dataItem: dataItem, 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._gridId, selectedField: this.props.selectedField || '' });
             this.props.onSelectionChange.call(undefined, selectionEvent);
         }
     };
     Grid.prototype.raiseDataEvent = function (handler, data, moreData, syntheticEvent) {
         var dataStateChange = this.props.onDataStateChange;
         if (handler) {
-            handler.call(undefined, __assign({}, this.getArguments(syntheticEvent), data));
+            var ev = __assign(__assign({}, this.getArguments(syntheticEvent)), data);
+            handler.call(undefined, ev);
         }
         else if (dataStateChange) {
-            dataStateChange.call(undefined, __assign({}, this.getArguments(syntheticEvent), { dataState: __assign({}, this.getDataState(), moreData) }));
+            dataStateChange.call(undefined, __assign(__assign({}, this.getArguments(syntheticEvent)), { dataState: __assign(__assign({}, this.getDataState()), moreData) }));
         }
     };
     Grid.prototype.columnReorder = function (prev, next, nativeEvent) {
-        var _this = this;
         var _a;
+        var _this = this;
         var depth = this._columns[prev].depth;
         var end = function (index) {
             do {
@@ -663,7 +688,7 @@ var Grid = /** @class */ (function (_super) {
             return index;
         };
         var spliced = this._columns.splice(prev, end(prev) - prev);
-        (_a = this._columns).splice.apply(_a, [prev < next ? end(next - spliced.length) : next, 0].concat(spliced));
+        (_a = this._columns).splice.apply(_a, __spreadArray([prev < next ? end(next - spliced.length) : next, 0], spliced, false));
         this._columns.filter(function (q) { return q.declarationIndex >= 0; }).forEach(function (c, i) { return c.orderIndex = i; });
         var eventColumnProps = this.columns;
         this.forceUpdate();
@@ -680,7 +705,7 @@ var Grid = /** @class */ (function (_super) {
             return;
         }
         var group = this.props.group.slice();
-        group.splice.apply(group, [nextIndex, 0].concat(group.splice(prevIndex, 1)));
+        group.splice.apply(group, __spreadArray([nextIndex, 0], group.splice(prevIndex, 1), false));
         this.groupChange(group, nativeEvent);
     };
     Grid.prototype.columnToGroup = function (columnIndex, groupIndex, nativeEvent) {
@@ -719,9 +744,9 @@ var Grid = /** @class */ (function (_super) {
     Grid.prototype.initColumns = function (columnElements, groupCount) {
         var _this = this;
         var idPrefix = kendo_react_data_tools_1.tableKeyboardNavigationTools.getIdPrefix(this.navigationStateRef);
-        this._columns = index_1.readColumns(columnElements, this.columns, { prevId: 0, idPrefix: idPrefix });
+        this._columns = (0, index_1.readColumns)(columnElements, this.columns, { prevId: 0, idPrefix: idPrefix });
         if (this._columns.length === 0) {
-            this._columns = index_1.autoGenerateColumns(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: idPrefix });
+            this._columns = (0, index_1.autoGenerateColumns)(this.props.data, this.props.group, this.props.expandField, { prevId: 0, idPrefix: idPrefix });
         }
         if (this.props.selectedField) {
             this._columns.filter(function (c) { return c.field === _this.props.selectedField; }).forEach(function (c) {
@@ -751,15 +776,15 @@ var Grid = /** @class */ (function (_super) {
         };
         var columnIndexOffset = 0;
         if (this.props.expandField && (this.props.onExpandChange) && this.props.detail) {
-            this._columns.unshift(__assign({}, defaultServiceProps, { cell: GridHierarchyCell_1.GridHierarchyCell, field: this.props.expandField, headerClassName: 'k-hierarchy-cell k-header', id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("" + this._columns.length, idPrefix, 'column') }));
+            this._columns.unshift(__assign(__assign({}, defaultServiceProps), { cell: GridHierarchyCell_1.GridHierarchyCell, field: this.props.expandField, headerClassName: 'k-hierarchy-cell k-header', id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(this._columns.length), idPrefix, 'column') }));
             columnIndexOffset++;
         }
         for (var i = 0; i < groupCount; i++) {
-            this._columns.unshift(__assign({}, defaultServiceProps, { isAccessible: false, cell: GridGroupCell_1.GridGroupCell, field: 'value' }));
+            this._columns.unshift(__assign(__assign({}, defaultServiceProps), { isAccessible: false, cell: GridGroupCell_1.GridGroupCell, field: 'value' }));
             columnIndexOffset++;
         }
         this._columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });
-        this._columnsMap = kendo_react_data_tools_1.mapColumns(this._columns);
+        this._columnsMap = (0, kendo_react_data_tools_1.mapColumns)(this._columns);
         this.columnResize.columns = this._columns;
         this.dragLogic.columns = this._columns;
     };

package/dist/npm/GridColumn.d.ts

@@ -3,7 +3,7 @@ import { GridColumnProps } from './interfaces/GridColumnProps';
 /**
  * @hidden
  */
-export declare const GridColumn: React.StatelessComponent<GridColumnProps>;
+export declare const GridColumn: React.FunctionComponent<GridColumnProps>;
 /**
  * @hidden
  */

package/dist/npm/GridColumn.js

@@ -1,10 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridColumn = void 0;
 var PropTypes = require("prop-types");
 /**
  * @hidden
  */
-exports.GridColumn = function (_) { return null; };
+var GridColumn = function (_) { return null; };
+exports.GridColumn = GridColumn;
 /**
  * @hidden
  */
@@ -30,7 +32,7 @@ exports.GridColumn.propTypes = {
     sortable: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.shape({
-            allowUnsort: PropTypes.bool
+            allowUnsort: PropTypes.bool.isRequired
         })
     ]),
     cell: PropTypes.any,

package/dist/npm/GridNoRecords.js

@@ -3,16 +3,19 @@ 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 __());
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridNoRecords = void 0;
 var React = require("react");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var messages_1 = require("./messages");
@@ -51,7 +54,7 @@ var GridNoRecords = /** @class */ (function (_super) {
      * @hidden
      */
     GridNoRecords.prototype.render = function () {
-        return this.props.children || kendo_react_intl_1.provideLocalizationService(this).toLanguageString(messages_1.noRecords, messages_1.messages[messages_1.noRecords]);
+        return this.props.children || (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.noRecords, messages_1.messages[messages_1.noRecords]);
     };
     /**
      * @hidden
@@ -60,4 +63,4 @@ var GridNoRecords = /** @class */ (function (_super) {
     return GridNoRecords;
 }(React.Component));
 exports.GridNoRecords = GridNoRecords;
-kendo_react_intl_1.registerForLocalization(GridNoRecords);
+(0, kendo_react_intl_1.registerForLocalization)(GridNoRecords);

package/dist/npm/GridToolbar.js

@@ -3,16 +3,19 @@ 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 __());
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridToolbar = void 0;
 var React = require("react");
 /**
  * Represents the GridToolbar component.

package/dist/npm/VirtualScroll.d.ts

@@ -13,13 +13,13 @@ export declare class VirtualScroll {
     scrollableVirtual: boolean;
     realSkip: number;
     pageSize: number;
-    PageChange: (event: Page, syntheticEvent: React.SyntheticEvent<any>) => void;
+    PageChange: ((event: Page, syntheticEvent: React.SyntheticEvent<any>) => void) | null;
     tableBody: HTMLTableSectionElement | null;
-    heightContainer: any;
+    heightContainer: null;
     fixedScroll: boolean;
     askedSkip: number | undefined;
     containerRef: React.RefObject<HTMLDivElement>;
-    readonly container: HTMLDivElement | null;
+    get container(): HTMLDivElement | null;
     private prevScrollPos;
     private syncTimeout;
     private tableTranslate;
@@ -28,7 +28,7 @@ export declare class VirtualScroll {
     /**
      * @return - The row heights in an array.
      */
-    readonly rowHeights: Array<{
+    get rowHeights(): Array<{
         line: number;
         acc: number;
     }>;

package/dist/npm/VirtualScroll.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.VirtualScroll = void 0;
 var React = require("react");
 /**
  * @hidden
  */
 var VirtualScroll = /** @class */ (function () {
     function VirtualScroll(cached) {
+        this.table = null;
         this.containerHeight = 0;
         this.topCacheCount = 0; // 4;
         this.attendedSkip = 0; // -4;
@@ -14,6 +16,8 @@ var VirtualScroll = /** @class */ (function () {
         this.scrollableVirtual = false;
         this.realSkip = 0;
         this.pageSize = 0;
+        this.PageChange = null;
+        this.tableBody = null;
         this.heightContainer = null;
         this.fixedScroll = false;
         this.askedSkip = undefined;
@@ -31,7 +35,7 @@ var VirtualScroll = /** @class */ (function () {
         get: function () {
             return this.containerRef.current;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(VirtualScroll.prototype, "rowHeights", {
@@ -60,15 +64,17 @@ var VirtualScroll = /** @class */ (function () {
             }
             return result;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     VirtualScroll.prototype.changePage = function (skip, e) {
         this.attendedSkip = skip - this.topCacheCount;
-        this.PageChange({
-            skip: Math.max(0, skip - this.topCacheCount),
-            take: this.pageSize
-        }, e);
+        if (this.PageChange) {
+            this.PageChange({
+                skip: Math.max(0, skip - this.topCacheCount),
+                take: this.pageSize
+            }, e);
+        }
     };
     VirtualScroll.prototype.translate = function (dY) {
         this.tableTranslate = dY;

package/dist/npm/cells/GridCell.d.ts

@@ -1,2 +1,3 @@
+import * as React from 'react';
 import { GridCellProps } from '../interfaces/GridCellProps';
-export declare const GridCell: (props: GridCellProps) => any;
+export declare const GridCell: (props: GridCellProps) => React.ReactElement<HTMLTableCellElement, string | React.JSXElementConstructor<any>> | null;

package/dist/npm/cells/GridCell.js

@@ -11,32 +11,34 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridCell = void 0;
 var React = require("react");
 var utils_1 = require("./../utils");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var constants_1 = require("../constants");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
-exports.GridCell = function (props) {
+var GridCell = function (props) {
     var _a;
     var defaultRendering = null;
-    var intl = kendo_react_intl_1.useInternationalization();
-    var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
+    var intl = (0, kendo_react_intl_1.useInternationalization)();
+    var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
     if (props.rowType === 'groupFooter') {
         defaultRendering = React.createElement("td", { className: props.className });
     }
     else if (props.field !== undefined && props.rowType !== 'groupHeader') {
-        var data = utils_1.getNestedValue(props.field, props.dataItem);
+        var data = (0, utils_1.getNestedValue)(props.field, props.dataItem);
         var dataAsString = '';
         if (data !== undefined && data !== null) {
             dataAsString = props.format ?
                 intl.format(props.format, data) :
                 data.toString();
         }
-        var className = kendo_react_common_1.classNames(props.className, { 'k-selected': props.isSelected });
+        var className = (0, kendo_react_common_1.classNames)(props.className, { 'k-selected': props.isSelected });
         defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_a = {}, _a[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes), dataAsString));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :
         defaultRendering;
 };
+exports.GridCell = GridCell;

package/dist/npm/cells/GridDetailCell.js

@@ -11,12 +11,14 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridDetailCell = void 0;
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var React = require("react");
 /** @hidden */
-exports.GridDetailCell = function (props) {
+var GridDetailCell = function (props) {
     var colSpan = props.colSpan, ariaColIndex = props.ariaColIndex, dataItem = props.dataItem, dataIndex = props.dataIndex, id = props.id;
-    var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(id);
+    var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(id);
     return (React.createElement("td", __assign({ className: "k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
         React.createElement(props.detail, { dataItem: dataItem, dataIndex: dataIndex })));
 };
+exports.GridDetailCell = GridDetailCell;

package/dist/npm/cells/GridDetailHierarchyCell.js

@@ -11,10 +11,12 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.GridDetailHierarchyCell = void 0;
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var React = require("react");
 /** @hidden */
-exports.GridDetailHierarchyCell = function (props) {
-    var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
+var GridDetailHierarchyCell = function (props) {
+    var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
     return (React.createElement("td", __assign({ className: "k-hierarchy-cell" }, navigationAttributes)));
 };
+exports.GridDetailHierarchyCell = GridDetailHierarchyCell;