@progress/kendo-react-grid 4.11.0-dev.202111171558 → 4.12.0-dev.202111220849

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

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps';
+/**
+ * The props of the GridColumnMenuWrapper component.
+ */
+export interface GridColumnMenuWrapperProps extends GridColumnMenuProps {
+    /**
+     * The component to be rendered as content of the Grid column menu.
+     */
+    columnMenu?: React.ComponentType<GridColumnMenuProps> | null;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuStateProps {
+    show: boolean;
+}
+/**
+ * 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/{ColumnMenu.js → GridColumnMenuWrapper.js}

@@ -34,41 +34,46 @@ var __rest = (this && this.__rest) || function (s, e) {
 import * as React from 'react';
 import { Popup } from '@progress/kendo-react-popup';
 /**
- * @hidden
+ * The GridColumnMenuWrapper component.
  */
-var ColumnMenu = /** @class */ (function (_super) {
-    __extends(ColumnMenu, _super);
-    function ColumnMenu() {
+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 });
         };
         return _this;
     }
-    ColumnMenu.prototype.render = function () {
+    GridColumnMenuWrapper.prototype.render = function () {
         var _this = this;
-        var _a = this.props, ChildComponent = _a.render, others = __rest(_a, ["render"]);
+        var _a = this.props, ColumnMenu = _a.columnMenu, others = __rest(_a, ["columnMenu"]);
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: 'k-grid-column-menu k-grid-filter', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick },
                 React.createElement("span", { className: 'k-icon k-i-more-vertical' })),
             React.createElement(Popup, { anchor: this._anchor, show: this.state.show },
-                React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } },
-                    React.createElement(ChildComponent, __assign({}, others, { onCloseMenu: this.closeMenu }))))));
+                React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } }, ColumnMenu && (React.createElement(ColumnMenu, __assign({}, others, { onCloseMenu: this.closeMenu })))))));
     };
-    return ColumnMenu;
+    return GridColumnMenuWrapper;
 }(React.Component));
-export { ColumnMenu };
+export { GridColumnMenuWrapper };

package/dist/es/header/GridHeaderCell.js

@@ -23,6 +23,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import * as React from 'react';
+import { GridColumnMenuWrapper } from '../columnMenu/GridColumnMenuWrapper';
 /**
  * @example
  * ```jsx
@@ -75,12 +76,15 @@ var GridHeaderCell = /** @class */ (function (_super) {
      * @hidden
      */
     GridHeaderCell.prototype.render = function () {
+        var columnMenuWrapperProps = this.props.columnMenuWrapperProps;
         var clickProps = this.props.onClick ? {
             onClick: this.props.onClick
         } : {};
-        var defaultRendering = (React.createElement("span", __assign({ className: 'k-link' }, clickProps),
-            React.createElement("span", { className: 'k-column-title' }, this.props.title || this.props.field || '\u00A0'),
-            this.props.children));
+        var defaultRendering = (React.createElement("span", { className: 'k-cell-inner' },
+            React.createElement("span", __assign({ className: 'k-link' }, clickProps),
+                React.createElement("span", { className: 'k-column-title' }, this.props.title || this.props.field || '\u00A0'),
+                this.props.children),
+            columnMenuWrapperProps.columnMenu && React.createElement(GridColumnMenuWrapper, __assign({}, columnMenuWrapperProps))));
         if (this.props.render) {
             return this.props.render.call(undefined, defaultRendering, this.props);
         }

package/dist/es/header/HeaderRow.js

@@ -27,7 +27,6 @@ import { normalize } from '../interfaces/GridSortSettings';
 import { ColumnResizer } from '../drag/ColumnResizer';
 import { ColumnDraggable } from '../drag/ColumnDraggable';
 import { GridHeaderCell } from './GridHeaderCell';
-import { ColumnMenu } from '../columnMenu/ColumnMenu';
 import { classNames, Keys } from '@progress/kendo-react-common';
 import { HeaderThElement } from '@progress/kendo-react-data-tools';
 import { registerForLocalization, provideLocalizationService as intl } from '@progress/kendo-react-intl';
@@ -69,16 +68,6 @@ var HeaderRow = /** @class */ (function (_super) {
             var sortable = _this.props.sortable && column.sortable;
             var sortIndex = _this.props.sort ? _this.props.sort.findIndex(function (s) { return s.field === column.field; }) : -1;
             var sortDir = sortIndex >= 0 ? ((_this.props.sort)[sortIndex].dir || 'none') : 'none';
-            var headerCellProps = {
-                field: column.field,
-                onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined,
-                selectionChange: _this.props.selectionChange,
-                title: column.title,
-                selectionValue: column.headerSelectionValue,
-                render: _this.props.cellRender,
-                children: _this.sortIcon(sortIndex),
-                key: 1
-            };
             var columnMenu = (column.columnMenu === null) ? null : (column.columnMenu || _this.props.columnMenu);
             var className = classNames({
                 'k-first': column.kFirst,
@@ -102,16 +91,36 @@ var HeaderRow = /** @class */ (function (_super) {
             } : {
                 'role': 'presentation'
             };
+            var columnMenuWrapperProps = {
+                column: {
+                    field: column.field,
+                    filter: column.filter
+                },
+                sortable: sortable && _this.props.sortable,
+                sort: _this.props.sort,
+                onSortChange: _this.props.sortChange,
+                filter: _this.props.filter,
+                filterable: _this.props.filterable && column.filterable,
+                filterOperators: _this.props.filterOperators,
+                onFilterChange: _this.props.filterChange,
+                group: _this.props.group,
+                groupable: _this.props.groupable,
+                onGroupChange: _this.props.groupChange,
+                columnMenu: columnMenu
+            };
+            var headerCellProps = {
+                field: column.field,
+                onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined,
+                selectionChange: _this.props.selectionChange,
+                title: column.title,
+                selectionValue: column.headerSelectionValue,
+                render: _this.props.cellRender,
+                children: _this.sortIcon(sortIndex),
+                columnMenuWrapperProps: columnMenuWrapperProps
+            };
             var key = (column.declarationIndex >= 0) ? ++_this.index : --_this.serviceIndex;
             return (React.createElement(HeaderThElement, __assign({}, ariaAttrs, { key: key, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined }),
-                column.headerCell && React.createElement(column.headerCell, __assign({}, headerCellProps)),
-                !column.headerCell && (React.createElement("span", { className: 'k-cell-inner' },
-                    React.createElement(GridHeaderCell, __assign({}, headerCellProps)),
-                    columnMenu &&
-                        React.createElement(ColumnMenu, { key: 0, column: {
-                                field: column.field,
-                                filter: column.filter
-                            }, sortable: sortable && _this.props.sortable, sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.filter, filterable: _this.props.filterable && column.filterable, filterOperators: _this.props.filterOperators, onFilterChange: _this.props.filterChange, group: _this.props.group, groupable: _this.props.groupable, onGroupChange: _this.props.groupChange, render: columnMenu }))),
+                column.headerCell ? React.createElement(column.headerCell, __assign({}, headerCellProps)) : React.createElement(GridHeaderCell, __assign({}, headerCellProps)),
                 _this.props.columnResize && _this.props.columnResize.resizable && column.resizable &&
                     React.createElement(ColumnResizer, { key: 2, resize: function (e, element, end) {
                             return _this.props.columnResize &&

package/dist/es/interfaces/GridHeaderCellProps.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools';
+import { GridColumnMenuWrapperProps } from '../columnMenu/GridColumnMenuWrapper';
 /**
  * The props of the GridHeaderCell component
  * ([more information]({% slug cells_grid %}#toc-header-cells)).
@@ -9,4 +10,8 @@ export interface GridHeaderCellProps extends HeaderCellBaseProps {
      * A function for overriding the default rendering of the header cell.
      */
     render?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode;
+    /**
+     * The props of the Grid column menu wrapper.
+     */
+    columnMenuWrapperProps: GridColumnMenuWrapperProps;
 }

package/dist/es/main.d.ts

@@ -3,6 +3,7 @@ import { GridProps } from './interfaces/GridProps';
 import { GridColumn } from './GridColumn';
 import { GridColumnProps } from './interfaces/GridColumnProps';
 import { GridColumnMenuProps } from './interfaces/GridColumnMenuProps';
+import { GridColumnMenuWrapper, GridColumnMenuWrapperProps } from './columnMenu/GridColumnMenuWrapper';
 import { GridColumnMenuGroup } from './columnMenu/GridColumnMenuGroup';
 import { GridColumnMenuSort } from './columnMenu/GridColumnMenuSort';
 import { GridColumnMenuFilter } from './columnMenu/GridColumnMenuFilter';
@@ -39,4 +40,4 @@ import { GridSelectableMode } from './interfaces/GridSelectableSettings';
 import { GridColumnMenuFilterUIProps } from './interfaces/GridColumnMenuFilterUIProps';
 import { GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE } from './constants';
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
-export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE };
+export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE };

package/dist/es/main.js

@@ -1,5 +1,6 @@
 import { Grid } from './Grid';
 import { GridColumn } from './GridColumn';
+import { GridColumnMenuWrapper } from './columnMenu/GridColumnMenuWrapper';
 import { GridColumnMenuGroup } from './columnMenu/GridColumnMenuGroup';
 import { GridColumnMenuSort } from './columnMenu/GridColumnMenuSort';
 import { GridColumnMenuFilter } from './columnMenu/GridColumnMenuFilter';
@@ -21,4 +22,4 @@ import { GridColumnMenuItemContent } from './columnMenu/GridColumnMenuItemConten
 import { GridColumnMenuItemGroup } from './columnMenu/GridColumnMenuItemGroup';
 import { GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE } from './constants';
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
-export { Grid, GridColumn, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridRow, GridFilterCell, GridHeaderCell, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridToolbar, GridNoRecords, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE };
+export { Grid, GridColumn, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridRow, GridFilterCell, GridHeaderCell, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridToolbar, GridNoRecords, GridColumnMenuWrapper, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE };

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637164137,
+    publishDate: 1637570381,
     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/columnMenu/GridColumnMenuWrapper.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { GridColumnMenuProps } from '../interfaces/GridColumnMenuProps';
+/**
+ * The props of the GridColumnMenuWrapper component.
+ */
+export interface GridColumnMenuWrapperProps extends GridColumnMenuProps {
+    /**
+     * The component to be rendered as content of the Grid column menu.
+     */
+    columnMenu?: React.ComponentType<GridColumnMenuProps> | null;
+}
+/**
+ * @hidden
+ */
+export interface ColumnMenuStateProps {
+    show: boolean;
+}
+/**
+ * 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/{ColumnMenu.js → GridColumnMenuWrapper.js}

@@ -36,41 +36,46 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
 var kendo_react_popup_1 = require("@progress/kendo-react-popup");
 /**
- * @hidden
+ * The GridColumnMenuWrapper component.
  */
-var ColumnMenu = /** @class */ (function (_super) {
-    __extends(ColumnMenu, _super);
-    function ColumnMenu() {
+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 });
         };
         return _this;
     }
-    ColumnMenu.prototype.render = function () {
+    GridColumnMenuWrapper.prototype.render = function () {
         var _this = this;
-        var _a = this.props, ChildComponent = _a.render, others = __rest(_a, ["render"]);
+        var _a = this.props, ColumnMenu = _a.columnMenu, others = __rest(_a, ["columnMenu"]);
         return (React.createElement(React.Fragment, null,
             React.createElement("div", { className: 'k-grid-column-menu k-grid-filter', ref: function (e) { return _this._anchor = e; }, onClick: this.anchorClick },
                 React.createElement("span", { className: 'k-icon k-i-more-vertical' })),
             React.createElement(kendo_react_popup_1.Popup, { anchor: this._anchor, show: this.state.show },
-                React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } },
-                    React.createElement(ChildComponent, __assign({}, others, { onCloseMenu: this.closeMenu }))))));
+                React.createElement("div", { ref: function (e) { return _this._content = e; }, className: 'k-grid-columnmenu-popup', tabIndex: 0, onBlur: this.blur, onFocus: this.focus, style: { outline: 'none' } }, ColumnMenu && (React.createElement(ColumnMenu, __assign({}, others, { onCloseMenu: this.closeMenu })))))));
     };
-    return ColumnMenu;
+    return GridColumnMenuWrapper;
 }(React.Component));
-exports.ColumnMenu = ColumnMenu;
+exports.GridColumnMenuWrapper = GridColumnMenuWrapper;

package/dist/npm/header/GridHeaderCell.js

@@ -25,6 +25,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 var React = require("react");
+var GridColumnMenuWrapper_1 = require("../columnMenu/GridColumnMenuWrapper");
 /**
  * @example
  * ```jsx
@@ -77,12 +78,15 @@ var GridHeaderCell = /** @class */ (function (_super) {
      * @hidden
      */
     GridHeaderCell.prototype.render = function () {
+        var columnMenuWrapperProps = this.props.columnMenuWrapperProps;
         var clickProps = this.props.onClick ? {
             onClick: this.props.onClick
         } : {};
-        var defaultRendering = (React.createElement("span", __assign({ className: 'k-link' }, clickProps),
-            React.createElement("span", { className: 'k-column-title' }, this.props.title || this.props.field || '\u00A0'),
-            this.props.children));
+        var defaultRendering = (React.createElement("span", { className: 'k-cell-inner' },
+            React.createElement("span", __assign({ className: 'k-link' }, clickProps),
+                React.createElement("span", { className: 'k-column-title' }, this.props.title || this.props.field || '\u00A0'),
+                this.props.children),
+            columnMenuWrapperProps.columnMenu && React.createElement(GridColumnMenuWrapper_1.GridColumnMenuWrapper, __assign({}, columnMenuWrapperProps))));
         if (this.props.render) {
             return this.props.render.call(undefined, defaultRendering, this.props);
         }

package/dist/npm/header/HeaderRow.js

@@ -29,7 +29,6 @@ var GridSortSettings_1 = require("../interfaces/GridSortSettings");
 var ColumnResizer_1 = require("../drag/ColumnResizer");
 var ColumnDraggable_1 = require("../drag/ColumnDraggable");
 var GridHeaderCell_1 = require("./GridHeaderCell");
-var ColumnMenu_1 = require("../columnMenu/ColumnMenu");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
 var kendo_react_data_tools_1 = require("@progress/kendo-react-data-tools");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
@@ -71,16 +70,6 @@ var HeaderRow = /** @class */ (function (_super) {
             var sortable = _this.props.sortable && column.sortable;
             var sortIndex = _this.props.sort ? _this.props.sort.findIndex(function (s) { return s.field === column.field; }) : -1;
             var sortDir = sortIndex >= 0 ? ((_this.props.sort)[sortIndex].dir || 'none') : 'none';
-            var headerCellProps = {
-                field: column.field,
-                onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined,
-                selectionChange: _this.props.selectionChange,
-                title: column.title,
-                selectionValue: column.headerSelectionValue,
-                render: _this.props.cellRender,
-                children: _this.sortIcon(sortIndex),
-                key: 1
-            };
             var columnMenu = (column.columnMenu === null) ? null : (column.columnMenu || _this.props.columnMenu);
             var className = kendo_react_common_1.classNames({
                 'k-first': column.kFirst,
@@ -104,16 +93,36 @@ var HeaderRow = /** @class */ (function (_super) {
             } : {
                 'role': 'presentation'
             };
+            var columnMenuWrapperProps = {
+                column: {
+                    field: column.field,
+                    filter: column.filter
+                },
+                sortable: sortable && _this.props.sortable,
+                sort: _this.props.sort,
+                onSortChange: _this.props.sortChange,
+                filter: _this.props.filter,
+                filterable: _this.props.filterable && column.filterable,
+                filterOperators: _this.props.filterOperators,
+                onFilterChange: _this.props.filterChange,
+                group: _this.props.group,
+                groupable: _this.props.groupable,
+                onGroupChange: _this.props.groupChange,
+                columnMenu: columnMenu
+            };
+            var headerCellProps = {
+                field: column.field,
+                onClick: sortable && (function (e) { return _this.cellClick(e, column); }) || undefined,
+                selectionChange: _this.props.selectionChange,
+                title: column.title,
+                selectionValue: column.headerSelectionValue,
+                render: _this.props.cellRender,
+                children: _this.sortIcon(sortIndex),
+                columnMenuWrapperProps: columnMenuWrapperProps
+            };
             var key = (column.declarationIndex >= 0) ? ++_this.index : --_this.serviceIndex;
             return (React.createElement(kendo_react_data_tools_1.HeaderThElement, __assign({}, ariaAttrs, { key: key, colSpan: column.colSpan, rowSpan: column.rowSpan, className: className, style: style, columnId: column.id, navigatable: column.navigatable, onKeyDown: sortable && (function (e) { return _this.cellKeyDown(e, column); }) || undefined }),
-                column.headerCell && React.createElement(column.headerCell, __assign({}, headerCellProps)),
-                !column.headerCell && (React.createElement("span", { className: 'k-cell-inner' },
-                    React.createElement(GridHeaderCell_1.GridHeaderCell, __assign({}, headerCellProps)),
-                    columnMenu &&
-                        React.createElement(ColumnMenu_1.ColumnMenu, { key: 0, column: {
-                                field: column.field,
-                                filter: column.filter
-                            }, sortable: sortable && _this.props.sortable, sort: _this.props.sort, onSortChange: _this.props.sortChange, filter: _this.props.filter, filterable: _this.props.filterable && column.filterable, filterOperators: _this.props.filterOperators, onFilterChange: _this.props.filterChange, group: _this.props.group, groupable: _this.props.groupable, onGroupChange: _this.props.groupChange, render: columnMenu }))),
+                column.headerCell ? React.createElement(column.headerCell, __assign({}, headerCellProps)) : React.createElement(GridHeaderCell_1.GridHeaderCell, __assign({}, headerCellProps)),
                 _this.props.columnResize && _this.props.columnResize.resizable && column.resizable &&
                     React.createElement(ColumnResizer_1.ColumnResizer, { key: 2, resize: function (e, element, end) {
                             return _this.props.columnResize &&

package/dist/npm/interfaces/GridHeaderCellProps.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { HeaderCellBaseProps } from '@progress/kendo-react-data-tools';
+import { GridColumnMenuWrapperProps } from '../columnMenu/GridColumnMenuWrapper';
 /**
  * The props of the GridHeaderCell component
  * ([more information]({% slug cells_grid %}#toc-header-cells)).
@@ -9,4 +10,8 @@ export interface GridHeaderCellProps extends HeaderCellBaseProps {
      * A function for overriding the default rendering of the header cell.
      */
     render?: (defaultRendering: React.ReactNode | null, props: GridHeaderCellProps) => React.ReactNode;
+    /**
+     * The props of the Grid column menu wrapper.
+     */
+    columnMenuWrapperProps: GridColumnMenuWrapperProps;
 }

package/dist/npm/main.d.ts

@@ -3,6 +3,7 @@ import { GridProps } from './interfaces/GridProps';
 import { GridColumn } from './GridColumn';
 import { GridColumnProps } from './interfaces/GridColumnProps';
 import { GridColumnMenuProps } from './interfaces/GridColumnMenuProps';
+import { GridColumnMenuWrapper, GridColumnMenuWrapperProps } from './columnMenu/GridColumnMenuWrapper';
 import { GridColumnMenuGroup } from './columnMenu/GridColumnMenuGroup';
 import { GridColumnMenuSort } from './columnMenu/GridColumnMenuSort';
 import { GridColumnMenuFilter } from './columnMenu/GridColumnMenuFilter';
@@ -39,4 +40,4 @@ import { GridSelectableMode } from './interfaces/GridSelectableSettings';
 import { GridColumnMenuFilterUIProps } from './interfaces/GridColumnMenuFilterUIProps';
 import { GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE } from './constants';
 import { getSelectedState, getSelectedStateFromKeyDown, setSelectedState } from '@progress/kendo-react-data-tools';
-export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE };
+export { Grid, GridProps, GridColumn, GridColumnProps, GridCellProps, GridCell, GridEditCell, GridGroupCell, GridHierarchyCell, GridDetailRow, GridDetailRowProps, GridRow, GridRowProps, GridFilterCell, GridFilterCellProps, GridHeaderCell, GridHeaderCellProps, GridColumnMenuProps, GridColumnMenuSort, GridColumnMenuFilter, GridColumnMenuGroup, GridColumnMenuItem, GridColumnMenuItemContent, GridColumnMenuItemGroup, GridColumnMenuFilterUI, GridColumnMenuFilterUIProps, GridColumnMenuFilterCell, GridColumnMenuCheckboxFilter, GridColumnMenuCheckboxFilterProps, GridToolbar, GridToolbarProps, GridNoRecords, GridNoRecordsProps, GridSortSettings, GridPagerSettings, GridGroupableSettings, GridFooterCellProps, GridSelectableMode, GridFilterOperators, GridColumnMenuWrapper, GridColumnMenuWrapperProps, getSelectedState, setSelectedState, getSelectedStateFromKeyDown, GRID_COL_INDEX_ATTRIBUTE, GRID_ROW_INDEX_ATTRIBUTE };

package/dist/npm/main.js

@@ -4,6 +4,8 @@ var Grid_1 = require("./Grid");
 exports.Grid = Grid_1.Grid;
 var GridColumn_1 = require("./GridColumn");
 exports.GridColumn = GridColumn_1.GridColumn;
+var GridColumnMenuWrapper_1 = require("./columnMenu/GridColumnMenuWrapper");
+exports.GridColumnMenuWrapper = GridColumnMenuWrapper_1.GridColumnMenuWrapper;
 var GridColumnMenuGroup_1 = require("./columnMenu/GridColumnMenuGroup");
 exports.GridColumnMenuGroup = GridColumnMenuGroup_1.GridColumnMenuGroup;
 var GridColumnMenuSort_1 = require("./columnMenu/GridColumnMenuSort");

package/dist/npm/package-metadata.js

@@ -7,7 +7,7 @@ exports.packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1637164137,
+    publishDate: 1637570381,
     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'
 };