@progress/kendo-react-grid 4.11.0 → 4.13.0-dev.202111231559

package/dist/es/Grid.d.ts

@@ -150,15 +150,16 @@ export declare class Grid extends React.Component<GridProps, {}> {
      */
     readonly columns: GridColumnProps[];
     private readonly document;
+    private headerRef;
     private element;
     private tableElement;
     private vs;
     private columnResize;
-    private _header;
     private _footer;
     private forceUpdateTimeout;
     private isRtl;
     private _gridId;
+    private readonly _header;
     constructor(props: GridProps);
     /**
      * Method to allow the scroll to be set to a specific row index.

package/dist/es/Grid.js

@@ -91,9 +91,9 @@ var Grid = /** @class */ (function (_super) {
         _this.contextStateRef = { current: undefined };
         _this.navigationStateRef = { current: undefined };
         _this.wrapperScrollTop = 0;
+        _this.headerRef = React.createRef();
         _this.element = null;
         _this.tableElement = null;
-        _this._header = null;
         _this._footer = null;
         _this.forceUpdateTimeout = undefined;
         _this.isRtl = false;
@@ -327,6 +327,13 @@ var Grid = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Grid.prototype, "_header", {
+        get: function () {
+            return this.headerRef.current;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -427,9 +434,7 @@ var Grid = /** @class */ (function (_super) {
             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: function (h) {
-                _this._header = h;
-            }, 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 }), 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, 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 ?
                     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());
@@ -605,9 +610,7 @@ var Grid = /** @class */ (function (_super) {
                 groupingPanel,
                 header,
                 React.createElement("div", { className: "k-grid-container", role: "presentation" },
-                    React.createElement("div", { ref: function (container) {
-                            _this.vs.container = container;
-                        }, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
+                    React.createElement("div", { ref: this.vs.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
                         React.createElement("div", { style: { 'position': 'relative' }, role: "presentation" },
                             React.createElement(TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
                                     _this.vs.table = table;

package/dist/es/VirtualScroll.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { Page } from './paging/Page';
+import * as React from 'react';
 /**
  * @hidden
  */
 export declare class VirtualScroll {
-    container: HTMLDivElement | null;
     table: HTMLTableElement | null;
     containerHeight: number;
     topCacheCount: number;
@@ -19,6 +18,8 @@ export declare class VirtualScroll {
     heightContainer: any;
     fixedScroll: boolean;
     askedSkip: number | undefined;
+    containerRef: React.RefObject<HTMLDivElement>;
+    readonly container: HTMLDivElement | null;
     private prevScrollPos;
     private syncTimeout;
     private tableTranslate;

package/dist/es/VirtualScroll.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 /**
  * @hidden
  */
@@ -14,6 +15,7 @@ var VirtualScroll = /** @class */ (function () {
         this.heightContainer = null;
         this.fixedScroll = false;
         this.askedSkip = undefined;
+        this.containerRef = React.createRef();
         this.prevScrollPos = 0;
         this.tableTranslate = 0;
         this.scrollSyncing = false;
@@ -23,6 +25,13 @@ var VirtualScroll = /** @class */ (function () {
         }
         this.scrollHandler = this.scrollHandler.bind(this);
     }
+    Object.defineProperty(VirtualScroll.prototype, "container", {
+        get: function () {
+            return this.containerRef.current;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(VirtualScroll.prototype, "rowHeights", {
         /**
          * @return - The row heights in an array.

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

@@ -19,13 +19,21 @@ export interface ColumnMenuStateProps {
  * The GridColumnMenuWrapper component.
  */
 export declare class GridColumnMenuWrapper extends React.Component<GridColumnMenuWrapperProps, ColumnMenuStateProps> {
+    /** @hidden */
     readonly state: ColumnMenuStateProps;
+    /** @hidden */
     _anchor: HTMLDivElement | null;
+    /** @hidden */
     _content: HTMLDivElement | null;
+    /** @hidden */
     blurTimeout: any;
+    /** @hidden */
     blur: () => void;
+    /** @hidden */
     focus: () => void;
+    /** @hidden */
     anchorClick: () => void;
+    /** @hidden */
     closeMenu: () => void;
     render(): JSX.Element;
 }

package/dist/es/columnMenu/GridColumnMenuWrapper.js

@@ -40,20 +40,26 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
     __extends(GridColumnMenuWrapper, _super);
     function GridColumnMenuWrapper() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        /** @hidden */
         _this.state = {
             show: false
         };
+        /** @hidden */
         _this.blurTimeout = undefined;
+        /** @hidden */
         _this.blur = function () {
             clearTimeout(_this.blurTimeout);
             _this.blurTimeout = window.setTimeout(function () { _this.closeMenu(); });
         };
+        /** @hidden */
         _this.focus = function () {
             clearTimeout(_this.blurTimeout);
         };
+        /** @hidden */
         _this.anchorClick = function () {
             _this.setState({ show: !_this.state.show }, function () { return _this.state.show && _this._content && _this._content.focus(); });
         };
+        /** @hidden */
         _this.closeMenu = function () {
             _this.setState({ show: false });
         };

package/dist/es/drag/ColumnDraggable.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { DragClue } from '@progress/kendo-react-data-tools';
+import { Header } from '../header/Header';
 /**
  * @hidden
  */
@@ -7,6 +9,9 @@ export interface ColumnDraggableProps {
     dragHandler?: (draggableEvent: any, element: HTMLTableRowElement | HTMLDivElement) => void;
     releaseHandler?: (draggableEvent: any) => void;
     ariaRowIndex?: number;
+    dragClue?: React.RefObject<DragClue | null> | null;
+    headerRef?: React.RefObject<Header | null> | null;
+    containerRef?: React.RefObject<HTMLDivElement | null> | null;
 }
 /**
  * @hidden

package/dist/es/drag/ColumnDraggable.js

@@ -51,7 +51,7 @@ var ColumnDraggable = /** @class */ (function (_super) {
     }
     ColumnDraggable.prototype.render = function () {
         var _this = this;
-        return (React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { _this.draggable = component; } },
+        return (React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, hint: this.props.dragClue, autoScroll: { boundaryElementRef: this.props.headerRef, direction: { horizontal: true, vertical: false } }, scrollContainer: this.props.containerRef || undefined, ref: function (component) { _this.draggable = component; } },
             React.createElement("tr", { style: { touchAction: 'none' }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)));
     };
     return ColumnDraggable;

package/dist/es/drag/CommonDragLogic.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { DragClue, DropClue } from '@progress/kendo-react-data-tools';
 import { ExtendedColumnProps } from '../GridColumn';
 /**
@@ -8,6 +9,8 @@ export declare type handler = (prevIndex: number, nextIndex: number, nativeEvent
  * @hidden
  */
 export declare class CommonDragLogic {
+    refDragElementClue: React.RefObject<DragClue>;
+    refDropElementClue: React.RefObject<DropClue>;
     columns: ExtendedColumnProps[];
     reorderable: boolean;
     groupable: boolean;
@@ -18,13 +21,13 @@ export declare class CommonDragLogic {
     private columnReorder;
     private groupReorder;
     private columnToGroup;
-    private dropElementClue;
-    private dragElementClue;
     private groupPanelDivElement;
+    readonly dragClueRef: React.RefObject<DragClue | null>;
+    readonly dropClueRef: React.RefObject<DropClue | null>;
+    private readonly dragElementClue;
+    private readonly dropElementClue;
     constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);
     refGroupPanelDiv: (e: HTMLDivElement) => void;
-    refDropElementClue: (e: DropClue) => void;
-    refDragElementClue: (e: DragClue) => void;
     pressHandler: (event: any, element: HTMLDivElement | HTMLTableRowElement) => void;
     dragHandler: (event: any, element: HTMLDivElement | HTMLTableRowElement) => void;
     releaseHandler: (event: any) => void;

package/dist/es/drag/CommonDragLogic.js

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { getIndex } from '@progress/kendo-react-data-tools';
 /**
  * @hidden
@@ -5,24 +6,18 @@ import { getIndex } from '@progress/kendo-react-data-tools';
 var CommonDragLogic = /** @class */ (function () {
     function CommonDragLogic(columnReorder, groupReorder, columnToGroup) {
         var _this = this;
+        this.refDragElementClue = React.createRef();
+        this.refDropElementClue = React.createRef();
         this.reorderable = false;
         this.groupable = false;
         this.startColumn = -1;
         this.startGroup = -1;
         this.currentColumn = -1;
         this.currentGroup = -1;
-        this.dropElementClue = null;
-        this.dragElementClue = null;
         this.groupPanelDivElement = null;
         this.refGroupPanelDiv = function (e) {
             _this.groupPanelDivElement = e;
         };
-        this.refDropElementClue = function (e) {
-            _this.dropElementClue = e;
-        };
-        this.refDragElementClue = function (e) {
-            _this.dragElementClue = e;
-        };
         this.pressHandler = function (event, element) {
             var startColumn = _this.getColumnIndex(event, element);
             _this.startGroup = _this.getGroupIndex(event);
@@ -88,6 +83,34 @@ var CommonDragLogic = /** @class */ (function () {
         this.groupReorder = groupReorder;
         this.columnToGroup = columnToGroup;
     }
+    Object.defineProperty(CommonDragLogic.prototype, "dragClueRef", {
+        get: function () {
+            return this.refDragElementClue;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CommonDragLogic.prototype, "dropClueRef", {
+        get: function () {
+            return this.refDropElementClue;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CommonDragLogic.prototype, "dragElementClue", {
+        get: function () {
+            return this.refDragElementClue.current;
+        },
+        enumerable: true,
+        configurable: true
+    });
+    Object.defineProperty(CommonDragLogic.prototype, "dropElementClue", {
+        get: function () {
+            return this.refDropElementClue.current;
+        },
+        enumerable: true,
+        configurable: true
+    });
     CommonDragLogic.prototype.getColumnIndex = function (event, parent) {
         if (!parent || (parent.parentElement === this.groupPanelDivElement)) {
             return -1;

package/dist/es/header/Header.d.ts

@@ -18,11 +18,12 @@ export interface HeaderProps {
  * @hidden
  */
 export declare class Header extends React.Component<HeaderProps, {}> {
-    private element;
+    private elementRef;
     private headerWrap;
     private table;
     private syncScroll;
     private scrollbarWidth;
+    readonly element: HTMLDivElement | null;
     componentDidMount(): void;
     /**
      *

package/dist/es/header/Header.js

@@ -32,7 +32,7 @@ var Header = /** @class */ (function (_super) {
     __extends(Header, _super);
     function Header() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.element = null;
+        _this.elementRef = React.createRef();
         _this.headerWrap = null;
         _this.table = null;
         _this.syncScroll = false;
@@ -53,6 +53,13 @@ var Header = /** @class */ (function (_super) {
         };
         return _this;
     }
+    Object.defineProperty(Header.prototype, "element", {
+        get: function () {
+            return this.elementRef.current;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Header.prototype.componentDidMount = function () {
         var rtl = isRtl(this.element);
         if (this.props.columnResize) {
@@ -86,7 +93,7 @@ var Header = /** @class */ (function (_super) {
                 this.props.headerRow,
                 this.props.filterRow));
         }
-        return (React.createElement("div", { ref: function (div) { _this.element = div; }, className: classNames('k-grid-header', { 'k-grid-draggable-header': this.props.draggable }), role: "presentation" },
+        return (React.createElement("div", { ref: this.elementRef, className: classNames('k-grid-header', { 'k-grid-draggable-header': this.props.draggable }), role: "presentation" },
             React.createElement("div", { ref: function (div) { _this.headerWrap = div; }, className: "k-grid-header-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, onScroll: this.onScroll, role: "presentation" },
                 React.createElement("table", { ref: function (table) { _this.table = table; }, role: "presentation" },
                     React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupHeader = e; }, role: "presentation" }, this.props.cols),

package/dist/es/header/HeaderRow.js

@@ -162,7 +162,7 @@ var HeaderRow = /** @class */ (function (_super) {
         this.serviceIndex = 0;
         this.index = -1;
         return this.props.columnsMap.map(function (rowIndexes, i) {
-            return _this.props.pressHandler && (React.createElement(ColumnDraggable, { key: i, pressHandler: _this.props.pressHandler, dragHandler: _this.props.dragHandler, releaseHandler: _this.props.releaseHandler, ariaRowIndex: i + 1 }, _this.cells(rowIndexes))) || React.createElement("tr", { role: "row", "aria-rowindex": i + 1 }, _this.cells(rowIndexes));
+            return _this.props.pressHandler && (React.createElement(ColumnDraggable, { key: i, pressHandler: _this.props.pressHandler, dragHandler: _this.props.dragHandler, releaseHandler: _this.props.releaseHandler, ariaRowIndex: i + 1, dragClue: _this.props.dragClue, headerRef: _this.props.headerRef, containerRef: _this.props.containerRef }, _this.cells(rowIndexes))) || React.createElement("tr", { role: "row", "aria-rowindex": i + 1 }, _this.cells(rowIndexes));
         });
     };
     return HeaderRow;

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637236452,
+    publishDate: 1637682566,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning'
 };

package/dist/npm/Grid.d.ts

@@ -150,15 +150,16 @@ export declare class Grid extends React.Component<GridProps, {}> {
      */
     readonly columns: GridColumnProps[];
     private readonly document;
+    private headerRef;
     private element;
     private tableElement;
     private vs;
     private columnResize;
-    private _header;
     private _footer;
     private forceUpdateTimeout;
     private isRtl;
     private _gridId;
+    private readonly _header;
     constructor(props: GridProps);
     /**
      * Method to allow the scroll to be set to a specific row index.

package/dist/npm/Grid.js

@@ -93,9 +93,9 @@ var Grid = /** @class */ (function (_super) {
         _this.contextStateRef = { current: undefined };
         _this.navigationStateRef = { current: undefined };
         _this.wrapperScrollTop = 0;
+        _this.headerRef = React.createRef();
         _this.element = null;
         _this.tableElement = null;
-        _this._header = null;
         _this._footer = null;
         _this.forceUpdateTimeout = undefined;
         _this.isRtl = false;
@@ -329,6 +329,13 @@ var Grid = /** @class */ (function (_super) {
         enumerable: true,
         configurable: true
     });
+    Object.defineProperty(Grid.prototype, "_header", {
+        get: function () {
+            return this.headerRef.current;
+        },
+        enumerable: true,
+        configurable: true
+    });
     /**
      * @hidden
      */
@@ -429,9 +436,7 @@ var Grid = /** @class */ (function (_super) {
             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: function (h) {
-                _this._header = h;
-            }, 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 }), 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, 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 ?
                     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());
@@ -607,9 +612,7 @@ var Grid = /** @class */ (function (_super) {
                 groupingPanel,
                 header,
                 React.createElement("div", { className: "k-grid-container", role: "presentation" },
-                    React.createElement("div", { ref: function (container) {
-                            _this.vs.container = container;
-                        }, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
+                    React.createElement("div", { ref: this.vs.containerRef, className: "k-grid-content k-virtual-content", onScroll: this.scrollHandler, role: "presentation" },
                         React.createElement("div", { style: { 'position': 'relative' }, role: "presentation" },
                             React.createElement(kendo_react_data_tools_1.TableSelection, { selectable: this.props.selectable, onRelease: this.selectionRelease, childRef: function (table) {
                                     _this.vs.table = table;

package/dist/npm/VirtualScroll.d.ts

@@ -1,10 +1,9 @@
-/// <reference types="react" />
 import { Page } from './paging/Page';
+import * as React from 'react';
 /**
  * @hidden
  */
 export declare class VirtualScroll {
-    container: HTMLDivElement | null;
     table: HTMLTableElement | null;
     containerHeight: number;
     topCacheCount: number;
@@ -19,6 +18,8 @@ export declare class VirtualScroll {
     heightContainer: any;
     fixedScroll: boolean;
     askedSkip: number | undefined;
+    containerRef: React.RefObject<HTMLDivElement>;
+    readonly container: HTMLDivElement | null;
     private prevScrollPos;
     private syncTimeout;
     private tableTranslate;

package/dist/npm/VirtualScroll.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+var React = require("react");
 /**
  * @hidden
  */
@@ -16,6 +17,7 @@ var VirtualScroll = /** @class */ (function () {
         this.heightContainer = null;
         this.fixedScroll = false;
         this.askedSkip = undefined;
+        this.containerRef = React.createRef();
         this.prevScrollPos = 0;
         this.tableTranslate = 0;
         this.scrollSyncing = false;
@@ -25,6 +27,13 @@ var VirtualScroll = /** @class */ (function () {
         }
         this.scrollHandler = this.scrollHandler.bind(this);
     }
+    Object.defineProperty(VirtualScroll.prototype, "container", {
+        get: function () {
+            return this.containerRef.current;
+        },
+        enumerable: true,
+        configurable: true
+    });
     Object.defineProperty(VirtualScroll.prototype, "rowHeights", {
         /**
          * @return - The row heights in an array.

package/dist/npm/columnMenu/GridColumnMenuWrapper.d.ts

@@ -19,13 +19,21 @@ export interface ColumnMenuStateProps {
  * The GridColumnMenuWrapper component.
  */
 export declare class GridColumnMenuWrapper extends React.Component<GridColumnMenuWrapperProps, ColumnMenuStateProps> {
+    /** @hidden */
     readonly state: ColumnMenuStateProps;
+    /** @hidden */
     _anchor: HTMLDivElement | null;
+    /** @hidden */
     _content: HTMLDivElement | null;
+    /** @hidden */
     blurTimeout: any;
+    /** @hidden */
     blur: () => void;
+    /** @hidden */
     focus: () => void;
+    /** @hidden */
     anchorClick: () => void;
+    /** @hidden */
     closeMenu: () => void;
     render(): JSX.Element;
 }

package/dist/npm/columnMenu/GridColumnMenuWrapper.js

@@ -42,20 +42,26 @@ var GridColumnMenuWrapper = /** @class */ (function (_super) {
     __extends(GridColumnMenuWrapper, _super);
     function GridColumnMenuWrapper() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
+        /** @hidden */
         _this.state = {
             show: false
         };
+        /** @hidden */
         _this.blurTimeout = undefined;
+        /** @hidden */
         _this.blur = function () {
             clearTimeout(_this.blurTimeout);
             _this.blurTimeout = window.setTimeout(function () { _this.closeMenu(); });
         };
+        /** @hidden */
         _this.focus = function () {
             clearTimeout(_this.blurTimeout);
         };
+        /** @hidden */
         _this.anchorClick = function () {
             _this.setState({ show: !_this.state.show }, function () { return _this.state.show && _this._content && _this._content.focus(); });
         };
+        /** @hidden */
         _this.closeMenu = function () {
             _this.setState({ show: false });
         };

package/dist/npm/drag/ColumnDraggable.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { DragClue } from '@progress/kendo-react-data-tools';
+import { Header } from '../header/Header';
 /**
  * @hidden
  */
@@ -7,6 +9,9 @@ export interface ColumnDraggableProps {
     dragHandler?: (draggableEvent: any, element: HTMLTableRowElement | HTMLDivElement) => void;
     releaseHandler?: (draggableEvent: any) => void;
     ariaRowIndex?: number;
+    dragClue?: React.RefObject<DragClue | null> | null;
+    headerRef?: React.RefObject<Header | null> | null;
+    containerRef?: React.RefObject<HTMLDivElement | null> | null;
 }
 /**
  * @hidden

package/dist/npm/drag/ColumnDraggable.js

@@ -53,7 +53,7 @@ var ColumnDraggable = /** @class */ (function (_super) {
     }
     ColumnDraggable.prototype.render = function () {
         var _this = this;
-        return (React.createElement(kendo_react_common_1.Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { _this.draggable = component; } },
+        return (React.createElement(kendo_react_common_1.Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, hint: this.props.dragClue, autoScroll: { boundaryElementRef: this.props.headerRef, direction: { horizontal: true, vertical: false } }, scrollContainer: this.props.containerRef || undefined, ref: function (component) { _this.draggable = component; } },
             React.createElement("tr", { style: { touchAction: 'none' }, role: "row", "aria-rowindex": this.props.ariaRowIndex }, this.props.children)));
     };
     return ColumnDraggable;

package/dist/npm/drag/CommonDragLogic.d.ts

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { DragClue, DropClue } from '@progress/kendo-react-data-tools';
 import { ExtendedColumnProps } from '../GridColumn';
 /**
@@ -8,6 +9,8 @@ export declare type handler = (prevIndex: number, nextIndex: number, nativeEvent
  * @hidden
  */
 export declare class CommonDragLogic {
+    refDragElementClue: React.RefObject<DragClue>;
+    refDropElementClue: React.RefObject<DropClue>;
     columns: ExtendedColumnProps[];
     reorderable: boolean;
     groupable: boolean;
@@ -18,13 +21,13 @@ export declare class CommonDragLogic {
     private columnReorder;
     private groupReorder;
     private columnToGroup;
-    private dropElementClue;
-    private dragElementClue;
     private groupPanelDivElement;
+    readonly dragClueRef: React.RefObject<DragClue | null>;
+    readonly dropClueRef: React.RefObject<DropClue | null>;
+    private readonly dragElementClue;
+    private readonly dropElementClue;
     constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);
     refGroupPanelDiv: (e: HTMLDivElement) => void;
-    refDropElementClue: (e: DropClue) => void;
-    refDragElementClue: (e: DragClue) => void;
     pressHandler: (event: any, element: HTMLDivElement | HTMLTableRowElement) => void;
     dragHandler: (event: any, element: HTMLDivElement | HTMLTableRowElement) => void;
     releaseHandler: (event: any) => void;