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

package/dist/npm/Grid.d.ts

@@ -65,7 +65,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
             buttonCount: PropTypes.Requireable<number>;
             info: PropTypes.Requireable<boolean>;
             type: PropTypes.Requireable<string>;
-            pageSizes: PropTypes.Requireable<boolean | number[]>;
+            pageSizes: PropTypes.Requireable<boolean | (number | null)[]>;
             previousNext: PropTypes.Requireable<boolean>;
         }>>;
         pageSize: PropTypes.Requireable<number>;
@@ -102,7 +102,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
         navigatable: PropTypes.Requireable<boolean>;
     };
     /** @hidden */
-    static contextType: React.Context<TableKeyboardNavigationContextType>;
+    static contextType: React.Context<TableKeyboardNavigationContextType | undefined>;
     protected dragLogic: CommonDragLogic;
     private _columns;
     private _columnsMap;
@@ -187,7 +187,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
     /**
      * @hidden
      */
-    getSnapshotBeforeUpdate(): any;
+    getSnapshotBeforeUpdate(): null;
     /**
      * @hidden
      */

package/dist/npm/Grid.js

@@ -25,10 +25,14 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __spreadArray = (this && this.__spreadArray) || function (to, from) {
-    for (var i = 0, il = from.length, j = to.length; i < il; i++, j++)
-        to[j] = from[i];
-    return to;
+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;
@@ -100,6 +104,7 @@ 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.headerElementRef = React.createRef();
@@ -108,7 +113,7 @@ var Grid = /** @class */ (function (_super) {
         _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.
          *
@@ -125,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);
                 }
@@ -159,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) {
@@ -169,8 +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) {
@@ -180,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) {
@@ -234,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 ?
@@ -264,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);
@@ -321,7 +328,7 @@ 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: false,
         configurable: true
@@ -358,8 +365,8 @@ var Grid = /** @class */ (function (_super) {
      * @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,
@@ -385,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,
@@ -444,13 +451,13 @@ 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 }));
@@ -458,7 +465,7 @@ var Grid = /** @class */ (function (_super) {
                     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,
@@ -466,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,
@@ -505,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;
@@ -554,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';
@@ -572,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) }))));
                 }
             });
         }
@@ -581,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;
@@ -596,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) {
@@ -622,7 +629,7 @@ 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;
@@ -655,7 +662,7 @@ 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 _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);
         }
@@ -663,7 +670,8 @@ var Grid = /** @class */ (function (_super) {
     Grid.prototype.raiseDataEvent = function (handler, data, moreData, syntheticEvent) {
         var dataStateChange = this.props.onDataStateChange;
         if (handler) {
-            handler.call(undefined, __assign(__assign({}, this.getArguments(syntheticEvent)), data));
+            var ev = __assign(__assign({}, this.getArguments(syntheticEvent)), data);
+            handler.call(undefined, ev);
         }
         else if (dataStateChange) {
             dataStateChange.call(undefined, __assign(__assign({}, this.getArguments(syntheticEvent)), { dataState: __assign(__assign({}, this.getDataState()), moreData) }));
@@ -680,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, __spreadArray([prev < next ? end(next - spliced.length) : next, 0], 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();
@@ -697,7 +705,7 @@ var Grid = /** @class */ (function (_super) {
             return;
         }
         var group = this.props.group.slice();
-        group.splice.apply(group, __spreadArray([nextIndex, 0], 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) {
@@ -736,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) {
@@ -768,7 +776,7 @@ var Grid = /** @class */ (function (_super) {
         };
         var columnIndexOffset = 0;
         if (this.props.expandField && (this.props.onExpandChange) && this.props.detail) {
-            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("" + 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++) {
@@ -776,7 +784,7 @@ var Grid = /** @class */ (function (_super) {
             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/GridNoRecords.js

@@ -54,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
@@ -63,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/VirtualScroll.d.ts

@@ -13,9 +13,9 @@ 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>;

package/dist/npm/VirtualScroll.js

@@ -7,6 +7,7 @@ var React = require("react");
  */
 var VirtualScroll = /** @class */ (function () {
     function VirtualScroll(cached) {
+        this.table = null;
         this.containerHeight = 0;
         this.topCacheCount = 0; // 4;
         this.attendedSkip = 0; // -4;
@@ -15,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;
@@ -66,10 +69,12 @@ var VirtualScroll = /** @class */ (function () {
     });
     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

@@ -21,20 +21,20 @@ var kendo_react_common_1 = require("@progress/kendo-react-common");
 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 ?

package/dist/npm/cells/GridDetailCell.js

@@ -17,7 +17,7 @@ var React = require("react");
 /** @hidden */
 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 })));
 };

package/dist/npm/cells/GridDetailHierarchyCell.js

@@ -16,7 +16,7 @@ var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var React = require("react");
 /** @hidden */
 var GridDetailHierarchyCell = function (props) {
-    var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
+    var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
     return (React.createElement("td", __assign({ className: "k-hierarchy-cell" }, navigationAttributes)));
 };
 exports.GridDetailHierarchyCell = GridDetailHierarchyCell;

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

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

package/dist/npm/cells/GridEditCell.js

@@ -24,13 +24,13 @@ var constants_1 = require("../constants");
  */
 var GridEditCell = function (props) {
     var _a, _b, _c, _d, _e;
-    var data = utils_1.getNestedValue(props.field, props.dataItem);
+    var data = (0, utils_1.getNestedValue)(props.field, props.dataItem);
     var defaultRendering = null;
-    var editCellClasses = kendo_react_common_1.classNames('k-grid-edit-cell', (_a = {},
+    var editCellClasses = (0, kendo_react_common_1.classNames)('k-grid-edit-cell', (_a = {},
         _a['k-selected'] = props.isSelected,
         _a), props.className);
-    var inputId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
-    var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
+    var inputId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
+    var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
     var handleOnChange = React.useCallback(function (syntheticEvent) {
         if (props.onChange) {
             var value = syntheticEvent.target.type === 'checkbox' ?

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

@@ -5,7 +5,7 @@ export declare class GridFilterCell extends React.Component<GridFilterCellProps,
     /**
      * @hidden
      */
-    render(): any;
+    render(): string | number | boolean | React.ReactFragment | JSX.Element | null | undefined;
     private renderOperatorEditor;
     private inputChange;
     private operatorChange;

package/dist/npm/cells/GridFilterCell.js

@@ -49,12 +49,12 @@ var GridFilterCell = /** @class */ (function (_super) {
      */
     GridFilterCell.prototype.render = function () {
         var _a;
-        var localizationService = kendo_react_intl_1.provideLocalizationService(this);
+        var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var defaultRendering = (React.createElement("div", { className: "k-filtercell" },
             React.createElement("span", null,
                 this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues),
                 React.createElement("div", { className: "k-filtercell-operator" }, this.renderOperatorEditor(localizationService)),
-                React.createElement(kendo_react_buttons_1.Button, { icon: 'filter-clear', className: kendo_react_common_1.classNames((_a = {},
+                React.createElement(kendo_react_buttons_1.Button, { icon: 'filter-clear', className: (0, kendo_react_common_1.classNames)((_a = {},
                         _a['k-clear-button-visible'] = Boolean(!(this.props.value === null || this.props.value === '') || this.props.operator),
                         _a)), title: localizationService.toLanguageString(messages_1.filterClearButton, messages_1.messages[messages_1.filterClearButton]), type: "button", onClick: this.clear, disabled: !(!(this.props.value === null || this.props.value === '') || this.props.operator) }))));
         if (this.props.render) {
@@ -63,13 +63,13 @@ var GridFilterCell = /** @class */ (function (_super) {
         return defaultRendering;
     };
     GridFilterCell.prototype.inputChange = function (value, e) {
-        filterCommon_1.cellInputChange(value, e, this.props);
+        (0, filterCommon_1.cellInputChange)(value, e, this.props);
     };
     GridFilterCell.prototype.operatorChange = function (event) {
-        filterCommon_1.cellOperatorChange(event, this.props.value, this.props.onChange);
+        (0, filterCommon_1.cellOperatorChange)(event, this.props.value, this.props.onChange);
     };
     GridFilterCell.prototype.boolDropdownChange = function (event) {
-        filterCommon_1.cellBoolDropdownChange(event, this.props.onChange);
+        (0, filterCommon_1.cellBoolDropdownChange)(event, this.props.onChange);
     };
     GridFilterCell.prototype.clear = function (e) {
         e.preventDefault();
@@ -91,4 +91,4 @@ var GridFilterCell = /** @class */ (function (_super) {
     return GridFilterCell;
 }(React.Component));
 exports.GridFilterCell = GridFilterCell;
-kendo_react_intl_1.registerForLocalization(GridFilterCell);
+(0, kendo_react_intl_1.registerForLocalization)(GridFilterCell);

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

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

package/dist/npm/cells/GridGroupCell.js

@@ -24,8 +24,8 @@ var GridGroupCell = function (props) {
     var defaultRendering = null;
     var columnIndex = props.columnIndex, level = props.level, columnsCount = props.columnsCount, rowType = props.rowType, dataItem = props.dataItem, field = props.field, onChange = props.onChange, expanded = props.expanded, render = props.render, dataIndex = props.dataIndex, ariaColumnIndex = props.ariaColumnIndex;
     var definedField = field || '';
-    var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
-    var localization = kendo_react_intl_1.useLocalization();
+    var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
+    var localization = (0, kendo_react_intl_1.useLocalization)();
     var onKeyDownHandler = React.useCallback(function (event) {
         if (event.isDefaultPrevented()) {
             return;

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

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

package/dist/npm/cells/GridHierarchyCell.js

@@ -23,9 +23,9 @@ var messages_1 = require("../messages");
  */
 var GridHierarchyCell = function (props) {
     var defaultRendering = null;
-    var expanded = utils_1.getNestedValue(props.field, props.dataItem);
-    var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
-    var localization = kendo_react_intl_1.useLocalization();
+    var expanded = (0, utils_1.getNestedValue)(props.field, props.dataItem);
+    var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
+    var localization = (0, kendo_react_intl_1.useLocalization)();
     var onKeyDownHandler = React.useCallback(function (event) {
         if (event.isDefaultPrevented()) {
             return;

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

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { GridCellProps } from '../interfaces/GridCellProps';
 /**
  * @hidden
  */
-export declare const GridSelectionCell: (props: GridCellProps) => any;
+export declare const GridSelectionCell: (props: GridCellProps) => JSX.Element | null;

package/dist/npm/cells/GridSelectionCell.js

@@ -25,9 +25,9 @@ var GridSelectionCell = function (props) {
             props.selectionChange({ syntheticEvent: syntheticEvent });
         }
     }, [props.selectionChange]);
-    var inputId = React.useMemo(function () { return kendo_react_common_1.guid(); }, []);
-    var selectedValue = utils_1.getNestedValue(props.field, props.dataItem);
-    var navigationAttributes = kendo_react_data_tools_1.useTableKeyboardNavigation(props.id);
+    var inputId = React.useMemo(function () { return (0, kendo_react_common_1.guid)(); }, []);
+    var selectedValue = (0, utils_1.getNestedValue)(props.field, props.dataItem);
+    var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
     var defaultRendering = props.rowType !== 'groupHeader' ? (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: props.className, "aria-colindex": props.ariaColumnIndex, role: 'gridcell' }, navigationAttributes),
         React.createElement("input", { checked: typeof selectedValue === 'boolean' && selectedValue, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
         React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId }))) : null;