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

package/dist/es/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;
@@ -148,10 +148,15 @@ export declare class Grid extends React.Component<GridProps, {}> {
      * ReactDOM.render(<App />, document.querySelector('my-app'));
      * ```
      */
-    readonly columns: GridColumnProps[];
-    private readonly document;
+    get columns(): GridColumnProps[];
+    /**
+     * Returns the HTML element of the Grid component.
+     */
+    get element(): HTMLDivElement | null;
+    private get document();
     private headerRef;
-    private element;
+    private headerElementRef;
+    private _element;
     private tableElement;
     private vs;
     private columnResize;
@@ -159,7 +164,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
     private forceUpdateTimeout;
     private isRtl;
     private _gridId;
-    private readonly _header;
+    private get _header();
     constructor(props: GridProps);
     /**
      * Method to allow the scroll to be set to a specific row index.
@@ -182,7 +187,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
     /**
      * @hidden
      */
-    getSnapshotBeforeUpdate(): any;
+    getSnapshotBeforeUpdate(): null;
     /**
      * @hidden
      */

package/dist/es/Grid.js

@@ -2,10 +2,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 __());
@@ -22,6 +24,15 @@ 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));
+};
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { dispatchEvent, classNames, getter, guid, setScrollbarWidth, canUseDOM } from '@progress/kendo-react-common';
@@ -90,9 +101,11 @@ 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;
@@ -114,8 +127,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,8 +172,8 @@ var Grid = /** @class */ (function (_super) {
             });
             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._gridId, selectedField: _this.props.selectedField }, _this.getArguments(event)));
+                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) {
@@ -170,7 +183,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) {
@@ -188,12 +202,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) {
@@ -224,7 +238,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 ?
@@ -313,7 +327,17 @@ var Grid = /** @class */ (function (_super) {
             var shuffledColumns = this._columns.filter(function (q) { return q.declarationIndex >= 0 && q.parentIndex === -1; });
             return 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", {
@@ -324,14 +348,14 @@ 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
     });
     /**
@@ -426,15 +450,15 @@ var Grid = /** @class */ (function (_super) {
         this._data = [];
         var resolvedGroupsCount = 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, { 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, { 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, { 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 || 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, { columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || 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, { 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, { 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 || 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, { columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || 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());
@@ -453,15 +477,15 @@ var Grid = /** @class */ (function (_super) {
                         return null;
                     }
                     var columnKey = column.id ? column.id : columnIndex;
-                    var className = "" + (column.className ? column.className + ' ' : '')
-                        + ("" + (column.locked ? 'k-grid-content-sticky' : ''));
+                    var className = "".concat(column.className ? column.className + ' ' : '')
+                        + "".concat(column.locked ? 'k-grid-content-sticky' : '');
                     var style = column.left !== undefined
                         ? !_this.isRtl
                             ? { left: column.left, right: column.right }
                             : { left: column.right, right: column.left }
                         : {};
                     var cellProps = {
-                        id: navigationTools.generateNavigatableId(rowId + "-" + String(columnIndex), idPrefix),
+                        id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix),
                         colSpan: colSpans[columnIndex],
                         dataItem: item.dataItem,
                         field: column.field,
@@ -552,8 +576,8 @@ var Grid = /** @class */ (function (_super) {
                             return (React.createElement(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, { id: navigationTools.generateNavigatableId(detailRowId + "-dhcell", idPrefix) }),
-                        React.createElement(GridDetailCell, { dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: navigationTools.generateNavigatableId(detailRowId + "-dcell", idPrefix) }))));
+                            React.createElement(GridDetailHierarchyCell, { id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
+                        React.createElement(GridDetailCell, { dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix) }))));
                 }
             });
         }
@@ -576,7 +600,7 @@ var Grid = /** @class */ (function (_super) {
         var tableDisplay = this.props.columnVirtualization ? 'block' : 'table';
         if (this.props.scrollable === 'none') {
             return (React.createElement(TableKeyboardNavigationContext.Provider, { value: this.contextStateRef.current },
-                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: 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 }, tableKeyboardNavigationScopeAttributes),
+                React.createElement("div", __assign({ id: this.props.id, style: this.props.style, className: 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 }, tableKeyboardNavigationScopeAttributes),
                     toolbar,
                     groupingPanel,
                     React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
@@ -605,7 +629,7 @@ var Grid = /** @class */ (function (_super) {
             React.createElement("div", __assign({ style: wrapperStyle, className: 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 }, tableKeyboardNavigationScopeAttributes),
                 toolbar,
@@ -636,23 +660,23 @@ var Grid = /** @class */ (function (_super) {
         if (this.props.onSelectionChange) {
             var event_1 = options.event, dataItem = options.dataItem, dataIndex = options.dataIndex, columnIndex = options.columnIndex;
             var _a = 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 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 {
@@ -661,7 +685,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();
@@ -678,7 +702,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) {
@@ -749,11 +773,11 @@ 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, field: this.props.expandField, headerClassName: 'k-hierarchy-cell k-header', id: navigationTools.generateNavigatableId("" + this._columns.length, idPrefix, 'column') }));
+            this._columns.unshift(__assign(__assign({}, defaultServiceProps), { cell: GridHierarchyCell, field: this.props.expandField, headerClassName: 'k-hierarchy-cell k-header', id: navigationTools.generateNavigatableId("".concat(this._columns.length), idPrefix, 'column') }));
             columnIndexOffset++;
         }
         for (var i = 0; i < groupCount; i++) {
-            this._columns.unshift(__assign({}, defaultServiceProps, { isAccessible: false, cell: GridGroupCell, field: 'value' }));
+            this._columns.unshift(__assign(__assign({}, defaultServiceProps), { isAccessible: false, cell: GridGroupCell, field: 'value' }));
             columnIndexOffset++;
         }
         this._columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });

package/dist/es/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/es/GridColumn.js

@@ -28,7 +28,7 @@ GridColumn.propTypes = {
     sortable: PropTypes.oneOfType([
         PropTypes.bool,
         PropTypes.shape({
-            allowUnsort: PropTypes.bool
+            allowUnsort: PropTypes.bool.isRequired
         })
     ]),
     cell: PropTypes.any,

package/dist/es/GridNoRecords.js

@@ -2,10 +2,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 __());

package/dist/es/GridToolbar.js

@@ -2,10 +2,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 __());

package/dist/es/ScrollMode.js

@@ -0,0 +1 @@
+export {};

package/dist/es/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/es/VirtualScroll.js

@@ -4,6 +4,7 @@ import * as React from 'react';
  */
 var VirtualScroll = /** @class */ (function () {
     function VirtualScroll(cached) {
+        this.table = null;
         this.containerHeight = 0;
         this.topCacheCount = 0; // 4;
         this.attendedSkip = 0; // -4;
@@ -12,6 +13,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;
@@ -29,7 +32,7 @@ var VirtualScroll = /** @class */ (function () {
         get: function () {
             return this.containerRef.current;
         },
-        enumerable: true,
+        enumerable: false,
         configurable: true
     });
     Object.defineProperty(VirtualScroll.prototype, "rowHeights", {
@@ -58,15 +61,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/es/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/es/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/es/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/es/cells/GridFilterCell.js

@@ -2,10 +2,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 __());

package/dist/es/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/es/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/es/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/es/columnMenu/GridColumnMenuCheckboxFilter.d.ts

@@ -98,11 +98,11 @@ export declare class GridColumnMenuCheckboxFilter extends React.Component<GridCo
     /**
      * @hidden
      */
-    clear: (e: React.SyntheticEvent<any, Event>) => void;
+    clear: (e: React.SyntheticEvent<any>) => void;
     /**
      * @hidden
      */
-    submit: (e: React.SyntheticEvent<any, Event>) => void;
+    submit: (e: React.SyntheticEvent<any>) => void;
     /**
      * @hidden
      */

package/dist/es/columnMenu/GridColumnMenuCheckboxFilter.js

@@ -2,10 +2,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 __());
@@ -22,6 +24,15 @@ 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));
+};
 import * as React from 'react';
 import { GridColumnMenuItem } from './GridColumnMenuItem';
 import { GridColumnMenuItemGroup } from './GridColumnMenuItemGroup';
@@ -170,7 +181,7 @@ var GridColumnMenuCheckboxFilter = /** @class */ (function (_super) {
         _this.handleCheckBoxChange = function (e, value) {
             var field = _this.props.column.field || '';
             var newFilter = __assign({}, _this.state.currentFilter);
-            var filters = _this.state.currentFilter.filters.slice() || [];
+            var filters = __spreadArray([], _this.state.currentFilter.filters, true) || [];
             var fieldFilters = [];
             if (_this.compositeFilterIndex !== -1 && newFilter.filters[_this.compositeFilterIndex].filters && value !== 'all') {
                 fieldFilters = newFilter.filters[_this.compositeFilterIndex].filters;
@@ -212,7 +223,7 @@ var GridColumnMenuCheckboxFilter = /** @class */ (function (_super) {
         _this.isAllSelected = function () {
             var isAllChecked = false;
             if (_this.state.currentFilter) {
-                var filters_1 = _this.state.currentFilter.filters.slice();
+                var filters_1 = __spreadArray([], _this.state.currentFilter.filters, true);
                 if (_this.compositeFilterIndex === -1) {
                     return false;
                 }
@@ -263,7 +274,7 @@ var GridColumnMenuCheckboxFilter = /** @class */ (function (_super) {
         var expandState = this.isControlled() ? this.props.expanded : this.state.expanded;
         var filterValues = [];
         if (this.state.currentFilter) {
-            var currentFilter = this.state.currentFilter.filters.slice();
+            var currentFilter = __spreadArray([], this.state.currentFilter.filters, true);
             this.compositeFilterIndex = currentFilter.findIndex(function (filter) {
                 if (filter.filters && filter.filters.length > 0) {
                     return filter.filters[0].field === column.field;

package/dist/es/columnMenu/GridColumnMenuFilter.d.ts

@@ -6,11 +6,11 @@ import { ComponentType } from 'react';
 /**
  * @hidden
  */
-export declare const rootFilterOrDefault: (rootFilter: CompositeFilterDescriptor) => CompositeFilterDescriptor;
+export declare const rootFilterOrDefault: (rootFilter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor;
 /**
  * @hidden
  */
-export declare const filterGroupByField: (field: string, filter: CompositeFilterDescriptor) => CompositeFilterDescriptor;
+export declare const filterGroupByField: (field: string, filter: CompositeFilterDescriptor | undefined) => CompositeFilterDescriptor | null;
 /**
  * The props of the GridColumnMenuFilter component.
  */
@@ -141,7 +141,7 @@ export declare class GridColumnMenuFilter extends React.Component<GridColumnMenu
     /**
      * @hidden
      */
-    clear: (event: React.SyntheticEvent<any, Event>) => void;
+    clear: (event: React.SyntheticEvent<any>) => void;
     /**
      * @hidden
      */
@@ -149,7 +149,7 @@ export declare class GridColumnMenuFilter extends React.Component<GridColumnMenu
     /**
      * @hidden
      */
-    submit: (event: React.SyntheticEvent<any, Event>) => void;
+    submit: (event: React.SyntheticEvent<any>) => void;
     /**
      * @hidden
      */