@progress/kendo-react-grid 5.10.0-dev.202301111905 → 5.10.0-dev.202301131814

package/dist/es/Grid.js

@@ -677,7 +677,8 @@ var Grid = /** @class */ (function (_super) {
     Grid.prototype.columnReorder = function (prev, next, nativeEvent) {
         var _a;
         var _this = this;
-        var depth = this._columns[prev].depth;
+        var column = this._columns[prev];
+        var depth = column.depth;
         var end = function (index) {
             do {
                 index++;
@@ -691,11 +692,13 @@ var Grid = /** @class */ (function (_super) {
         var eventColumnProps = this.columns;
         this.forceUpdate();
         if (this.props.onColumnReorder) {
-            this.props.onColumnReorder.call(undefined, {
+            var reorderEvent = {
                 target: this,
                 columns: eventColumnProps,
+                columnId: column.id,
                 nativeEvent: nativeEvent
-            });
+            };
+            this.props.onColumnReorder.call(undefined, reorderEvent);
         }
     };
     Grid.prototype.groupReorder = function (prevIndex, nextIndex, nativeEvent) {

package/dist/es/GridToolbar.js

@@ -63,7 +63,9 @@ var GridToolbar = /** @class */ (function (_super) {
      */
     GridToolbar.prototype.render = function () {
         var _a;
-        return (React.createElement("div", { className: classNames('k-toolbar k-grid-toolbar', (_a = {},
+        return (React.createElement("div", { className: classNames('k-toolbar k-grid-toolbar', (_a = {
+                    'k-toolbar-md': !this.props.size
+                },
                 _a["k-toolbar-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                 _a), this.props.className) }, this.props.children));
     };

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

@@ -27,11 +27,12 @@ export declare class CommonDragLogic {
     private get dragElementClue();
     private get dropElementClue();
     constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);
-    refGroupPanelDiv: (e: HTMLDivElement | null) => void;
+    refGroupPanelDiv: (e: any) => void;
     pressHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void;
     dragHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void;
     releaseHandler: (event: any) => void;
     private getColumnIndex;
+    private isTargetGroupingContainer;
     private getGroupIndex;
     private isValid;
     private updateDragElementClue;

package/dist/es/drag/CommonDragLogic.js

@@ -17,7 +17,7 @@ var CommonDragLogic = /** @class */ (function () {
         this.currentGroup = -1;
         this.groupPanelDivElement = null;
         this.refGroupPanelDiv = function (e) {
-            _this.groupPanelDivElement = e;
+            _this.groupPanelDivElement = e.children ? e.children[0] : e;
         };
         this.pressHandler = function (event, element) {
             var startColumn = _this.getColumnIndex(event, element);
@@ -38,10 +38,12 @@ var CommonDragLogic = /** @class */ (function () {
                 return;
             }
             _this.currentColumn = _this.getColumnIndex(event, element);
-            _this.currentGroup = _this.getGroupIndex(event);
-            if (_this.groupPanelDivElement && _this.startGroup >= 0) {
-                _this.currentGroup = Math.min(_this.currentGroup, _this.groupPanelDivElement.children.length - 2);
-            }
+            var groupPanelChildren = _this.groupPanelDivElement && _this.groupPanelDivElement.children;
+            _this.currentGroup = _this.isTargetGroupingContainer(event)
+                ? groupPanelChildren && groupPanelChildren.length
+                    ? groupPanelChildren.length
+                    : 0
+                : _this.getGroupIndex(event);
             var invalidIndex = !_this.isValid();
             if (invalidIndex) {
                 _this.currentColumn = -1;
@@ -49,7 +51,9 @@ var CommonDragLogic = /** @class */ (function () {
             }
             var targetElement = (_this.currentColumn >= 0) ?
                 element.children[_this.columns[_this.currentColumn].index] :
-                _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
+                _this.isTargetGroupingContainer(event)
+                    ? event.originalEvent.target
+                    : _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
             _this.updateDragElementClue(event, element, targetElement, invalidIndex);
             _this.updateDropElementClue(event, element, targetElement, invalidIndex);
         };
@@ -133,6 +137,10 @@ var CommonDragLogic = /** @class */ (function () {
         }
         return -1;
     };
+    CommonDragLogic.prototype.isTargetGroupingContainer = function (event) {
+        var target = event.originalEvent.target;
+        return target.className.indexOf('k-grouping-drop-container') !== -1;
+    };
     CommonDragLogic.prototype.getGroupIndex = function (event) {
         return getIndex(event, this.groupPanelDivElement);
     };
@@ -179,16 +187,19 @@ var CommonDragLogic = /** @class */ (function () {
             return;
         }
         var rect = targetElement.getBoundingClientRect();
+        var groupElement = targetElement.closest('.k-grouping-header');
+        var rectParent = (groupElement || targetElement).getBoundingClientRect();
         var left = rect.left + event.pageX - event.clientX - 6;
-        if (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) {
+        if (!this.isTargetGroupingContainer(event) && (this.currentColumn > this.startColumn
+            || this.currentGroup > this.startGroup && this.startGroup !== -1)) {
             left += rect.width;
         }
-        var top = rect.top + event.pageY - event.clientY;
+        var top = rectParent.top + event.pageY - event.clientY;
         this.dropElementClue.setState({
             visible: true,
             top: top,
             left: left,
-            height: (this.currentColumn >= 0) ? element.clientHeight : rect.height
+            height: (this.currentColumn >= 0) ? element.clientHeight : rectParent.height
         });
     };
     return CommonDragLogic;

package/dist/es/drag/GroupingIndicator.js

@@ -15,10 +15,9 @@ var __extends = (this && this.__extends) || (function () {
 })();
 import * as React from 'react';
 import { Draggable, IconWrap } from '@progress/kendo-react-common';
-import { Button } from '@progress/kendo-react-buttons';
 import { ungroupColumn, messages } from '../messages';
 import { provideLocalizationService, registerForLocalization } from '@progress/kendo-react-intl';
-import { sortAscSmallIcon, sortDescSmallIcon, xIcon } from '@progress/kendo-svg-icons';
+import { sortAscSmallIcon, sortDescSmallIcon, xCircleIcon } from '@progress/kendo-svg-icons';
 /**
  * @hidden
  */
@@ -74,12 +73,13 @@ var GroupingIndicator = /** @class */ (function (_super) {
         var localizationService = provideLocalizationService(this);
         var dir = this.props.dir;
         return (React.createElement(Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { _this.draggable = component; } },
-            React.createElement("div", { className: "k-indicator-container", style: { touchAction: 'none' } },
-                React.createElement("div", { className: "k-group-indicator", role: "button" },
-                    React.createElement("a", { className: "k-link", href: "#", tabIndex: -1, onClick: this.sortChange },
-                        React.createElement(IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon }),
-                        this.props.title),
-                    React.createElement(Button, { fillMode: 'flat', tabIndex: -1, onClick: this.groupRemove, icon: 'x', svgIcon: xIcon, "aria-label": localizationService.toLanguageString(ungroupColumn, messages[ungroupColumn]) })))));
+            React.createElement("div", { className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", role: "button", style: { touchAction: 'none' } },
+                React.createElement("span", { onClick: this.sortChange },
+                    React.createElement(IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon })),
+                React.createElement("span", { className: 'k-chip-content' }, this.props.title),
+                React.createElement("span", { className: "k-chip-actions" },
+                    React.createElement("span", { className: "k-chip-action k-chip-remove-action", onClick: this.groupRemove, "aria-label": localizationService.toLanguageString(ungroupColumn, messages[ungroupColumn]) },
+                        React.createElement(IconWrap, { name: 'x-circle', icon: xCircleIcon }))))));
     };
     return GroupingIndicator;
 }(React.Component));

package/dist/es/footer/Footer.js

@@ -57,7 +57,9 @@ var Footer = /** @class */ (function (_super) {
         }
         return (React.createElement("div", { className: "k-grid-footer", role: "presentation" },
             React.createElement("div", { ref: function (div) { _this.footerWrap = div; }, className: "k-grid-footer-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, role: "presentation" },
-                React.createElement("table", { ref: function (table) { _this.table = table; }, className: classNames('k-table k-grid-footer-table', (_a = {},
+                React.createElement("table", { ref: function (table) { _this.table = table; }, className: classNames('k-table k-grid-footer-table', (_a = {
+                            'k-grid-md': !this.props.size
+                        },
                         _a["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                         _a), this.props.className), role: "presentation" },
                     React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupFooter = e; }, role: "presentation" }, this.props.cols),

package/dist/es/header/FilterRow.js

@@ -119,7 +119,7 @@ var FilterRow = /** @class */ (function (_super) {
                     ? { left: column.left, right: column.right }
                     : { left: column.right, right: column.left }
                 : {};
-            return (React.createElement(HeaderThElement, __assign({ key: key, columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: classNames('k-header', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
+            return (React.createElement(HeaderThElement, __assign({ key: key, columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: classNames('k-table-th', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
                 React.createElement(column.filterCell, __assign({}, filterCellProps)) :
                 React.createElement(GridFilterCell, __assign({ size: _this.props.size }, filterCellProps)))));
         });

package/dist/es/header/GroupPanel.js

@@ -45,9 +45,10 @@ var GroupPanel = /** @class */ (function (_super) {
             }, onSortChange: function (event, dir) {
                 _this.onGroupSortChange(event, index, groupDesc, dir);
             }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler })); });
-        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header k-grouping-header-flex", role: "toolbar", "aria-label": intl(this).toLanguageString(groupPanelAriaLabel, messages[groupPanelAriaLabel]) },
-            groups,
-            React.createElement("div", { className: "k-indicator-container" },
+        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": intl(this).toLanguageString(groupPanelAriaLabel, messages[groupPanelAriaLabel]) },
+            !!groups.length
+                && React.createElement("div", { className: "k-chip-list k-chip-list-md" }, groups),
+            React.createElement("div", { className: "k-grouping-drop-container" },
                 !groups.length && intl(this).toLanguageString(messageKey, messages[messageKey]),
                 "\u00A0")));
     };

package/dist/es/header/Header.js

@@ -97,7 +97,9 @@ var Header = /** @class */ (function (_super) {
         }
         return (React.createElement("div", { ref: this.props.elemRef, 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; }, className: classNames('k-table k-grid-header-table', (_a = {},
+                React.createElement("table", { ref: function (table) { _this.table = table; }, className: classNames('k-table k-grid-header-table', (_a = {
+                            'k-grid-md': !this.props.size
+                        },
                         _a["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                         _a), this.props.className), role: "presentation" },
                     React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupHeader = e; } }, this.props.cols),

package/dist/es/header/HeaderRow.js

@@ -75,6 +75,7 @@ var HeaderRow = /** @class */ (function (_super) {
             var className = classNames({
                 'k-first': column.kFirst,
                 'k-filterable': Boolean(columnMenu),
+                'k-table-th': true,
                 'k-header': true,
                 'k-grid-header-sticky': column.locked,
                 'k-sorted': _this.props.sort && _this.props.sort.some(function (descriptor) { return descriptor.field === column.field; })

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

@@ -202,4 +202,8 @@ export interface GridColumnReorderEvent {
      * The current columns collection.
      */
     columns: GridColumnProps[];
+    /**
+     * The id of the dragged column.
+     */
+    columnId?: string;
 }

package/dist/es/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-react-grid',
     productName: 'KendoReact',
     productCodes: ['KENDOUIREACT', 'KENDOUICOMPLETE'],
-    publishDate: 1673462910,
+    publishDate: 1673632533,
     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.js

@@ -680,7 +680,8 @@ var Grid = /** @class */ (function (_super) {
     Grid.prototype.columnReorder = function (prev, next, nativeEvent) {
         var _a;
         var _this = this;
-        var depth = this._columns[prev].depth;
+        var column = this._columns[prev];
+        var depth = column.depth;
         var end = function (index) {
             do {
                 index++;
@@ -694,11 +695,13 @@ var Grid = /** @class */ (function (_super) {
         var eventColumnProps = this.columns;
         this.forceUpdate();
         if (this.props.onColumnReorder) {
-            this.props.onColumnReorder.call(undefined, {
+            var reorderEvent = {
                 target: this,
                 columns: eventColumnProps,
+                columnId: column.id,
                 nativeEvent: nativeEvent
-            });
+            };
+            this.props.onColumnReorder.call(undefined, reorderEvent);
         }
     };
     Grid.prototype.groupReorder = function (prevIndex, nextIndex, nativeEvent) {

package/dist/npm/GridToolbar.js

@@ -66,7 +66,9 @@ var GridToolbar = /** @class */ (function (_super) {
      */
     GridToolbar.prototype.render = function () {
         var _a;
-        return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-toolbar k-grid-toolbar', (_a = {},
+        return (React.createElement("div", { className: (0, kendo_react_common_1.classNames)('k-toolbar k-grid-toolbar', (_a = {
+                    'k-toolbar-md': !this.props.size
+                },
                 _a["k-toolbar-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                 _a), this.props.className) }, this.props.children));
     };

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

@@ -27,11 +27,12 @@ export declare class CommonDragLogic {
     private get dragElementClue();
     private get dropElementClue();
     constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);
-    refGroupPanelDiv: (e: HTMLDivElement | null) => void;
+    refGroupPanelDiv: (e: any) => void;
     pressHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void;
     dragHandler: (event: any, element: HTMLTableRowElement | HTMLDivElement) => void;
     releaseHandler: (event: any) => void;
     private getColumnIndex;
+    private isTargetGroupingContainer;
     private getGroupIndex;
     private isValid;
     private updateDragElementClue;

package/dist/npm/drag/CommonDragLogic.js

@@ -20,7 +20,7 @@ var CommonDragLogic = /** @class */ (function () {
         this.currentGroup = -1;
         this.groupPanelDivElement = null;
         this.refGroupPanelDiv = function (e) {
-            _this.groupPanelDivElement = e;
+            _this.groupPanelDivElement = e.children ? e.children[0] : e;
         };
         this.pressHandler = function (event, element) {
             var startColumn = _this.getColumnIndex(event, element);
@@ -41,10 +41,12 @@ var CommonDragLogic = /** @class */ (function () {
                 return;
             }
             _this.currentColumn = _this.getColumnIndex(event, element);
-            _this.currentGroup = _this.getGroupIndex(event);
-            if (_this.groupPanelDivElement && _this.startGroup >= 0) {
-                _this.currentGroup = Math.min(_this.currentGroup, _this.groupPanelDivElement.children.length - 2);
-            }
+            var groupPanelChildren = _this.groupPanelDivElement && _this.groupPanelDivElement.children;
+            _this.currentGroup = _this.isTargetGroupingContainer(event)
+                ? groupPanelChildren && groupPanelChildren.length
+                    ? groupPanelChildren.length
+                    : 0
+                : _this.getGroupIndex(event);
             var invalidIndex = !_this.isValid();
             if (invalidIndex) {
                 _this.currentColumn = -1;
@@ -52,7 +54,9 @@ var CommonDragLogic = /** @class */ (function () {
             }
             var targetElement = (_this.currentColumn >= 0) ?
                 element.children[_this.columns[_this.currentColumn].index] :
-                _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
+                _this.isTargetGroupingContainer(event)
+                    ? event.originalEvent.target
+                    : _this.groupPanelDivElement && _this.groupPanelDivElement.children[_this.currentGroup];
             _this.updateDragElementClue(event, element, targetElement, invalidIndex);
             _this.updateDropElementClue(event, element, targetElement, invalidIndex);
         };
@@ -136,6 +140,10 @@ var CommonDragLogic = /** @class */ (function () {
         }
         return -1;
     };
+    CommonDragLogic.prototype.isTargetGroupingContainer = function (event) {
+        var target = event.originalEvent.target;
+        return target.className.indexOf('k-grouping-drop-container') !== -1;
+    };
     CommonDragLogic.prototype.getGroupIndex = function (event) {
         return (0, kendo_react_data_tools_1.getIndex)(event, this.groupPanelDivElement);
     };
@@ -182,16 +190,19 @@ var CommonDragLogic = /** @class */ (function () {
             return;
         }
         var rect = targetElement.getBoundingClientRect();
+        var groupElement = targetElement.closest('.k-grouping-header');
+        var rectParent = (groupElement || targetElement).getBoundingClientRect();
         var left = rect.left + event.pageX - event.clientX - 6;
-        if (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) {
+        if (!this.isTargetGroupingContainer(event) && (this.currentColumn > this.startColumn
+            || this.currentGroup > this.startGroup && this.startGroup !== -1)) {
             left += rect.width;
         }
-        var top = rect.top + event.pageY - event.clientY;
+        var top = rectParent.top + event.pageY - event.clientY;
         this.dropElementClue.setState({
             visible: true,
             top: top,
             left: left,
-            height: (this.currentColumn >= 0) ? element.clientHeight : rect.height
+            height: (this.currentColumn >= 0) ? element.clientHeight : rectParent.height
         });
     };
     return CommonDragLogic;

package/dist/npm/drag/GroupingIndicator.js

@@ -18,7 +18,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupingIndicator = void 0;
 var React = require("react");
 var kendo_react_common_1 = require("@progress/kendo-react-common");
-var kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
 var messages_1 = require("../messages");
 var kendo_react_intl_1 = require("@progress/kendo-react-intl");
 var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
@@ -77,12 +76,13 @@ var GroupingIndicator = /** @class */ (function (_super) {
         var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         var dir = this.props.dir;
         return (React.createElement(kendo_react_common_1.Draggable, { onPress: this.onPress, onDrag: this.onDrag, onRelease: this.onRelease, ref: function (component) { _this.draggable = component; } },
-            React.createElement("div", { className: "k-indicator-container", style: { touchAction: 'none' } },
-                React.createElement("div", { className: "k-group-indicator", role: "button" },
-                    React.createElement("a", { className: "k-link", href: "#", tabIndex: -1, onClick: this.sortChange },
-                        React.createElement(kendo_react_common_1.IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon }),
-                        this.props.title),
-                    React.createElement(kendo_react_buttons_1.Button, { fillMode: 'flat', tabIndex: -1, onClick: this.groupRemove, icon: 'x', svgIcon: kendo_svg_icons_1.xIcon, "aria-label": localizationService.toLanguageString(messages_1.ungroupColumn, messages_1.messages[messages_1.ungroupColumn]) })))));
+            React.createElement("div", { className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", role: "button", style: { touchAction: 'none' } },
+                React.createElement("span", { onClick: this.sortChange },
+                    React.createElement(kendo_react_common_1.IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon })),
+                React.createElement("span", { className: 'k-chip-content' }, this.props.title),
+                React.createElement("span", { className: "k-chip-actions" },
+                    React.createElement("span", { className: "k-chip-action k-chip-remove-action", onClick: this.groupRemove, "aria-label": localizationService.toLanguageString(messages_1.ungroupColumn, messages_1.messages[messages_1.ungroupColumn]) },
+                        React.createElement(kendo_react_common_1.IconWrap, { name: 'x-circle', icon: kendo_svg_icons_1.xCircleIcon }))))));
     };
     return GroupingIndicator;
 }(React.Component));

package/dist/npm/footer/Footer.js

@@ -60,7 +60,9 @@ var Footer = /** @class */ (function (_super) {
         }
         return (React.createElement("div", { className: "k-grid-footer", role: "presentation" },
             React.createElement("div", { ref: function (div) { _this.footerWrap = div; }, className: "k-grid-footer-wrap", style: this.scrollbarWidth ? {} : { borderWidth: 0 }, role: "presentation" },
-                React.createElement("table", { ref: function (table) { _this.table = table; }, className: (0, kendo_react_common_2.classNames)('k-table k-grid-footer-table', (_a = {},
+                React.createElement("table", { ref: function (table) { _this.table = table; }, className: (0, kendo_react_common_2.classNames)('k-table k-grid-footer-table', (_a = {
+                            'k-grid-md': !this.props.size
+                        },
                         _a["k-table-".concat(kendo_react_common_2.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                         _a), this.props.className), role: "presentation" },
                     React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupFooter = e; }, role: "presentation" }, this.props.cols),

package/dist/npm/header/FilterRow.js

@@ -122,7 +122,7 @@ var FilterRow = /** @class */ (function (_super) {
                     ? { left: column.left, right: column.right }
                     : { left: column.right, right: column.left }
                 : {};
-            return (React.createElement(kendo_react_data_tools_1.HeaderThElement, __assign({ key: key, columnId: kendo_react_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: (0, kendo_react_common_1.classNames)('k-header', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
+            return (React.createElement(kendo_react_data_tools_1.HeaderThElement, __assign({ key: key, columnId: kendo_react_data_tools_1.tableKeyboardNavigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: (0, kendo_react_common_1.classNames)('k-table-th', _this.headerCellClassName(column.field, column.locked) || undefined), role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
                 React.createElement(column.filterCell, __assign({}, filterCellProps)) :
                 React.createElement(GridFilterCell_1.GridFilterCell, __assign({ size: _this.props.size }, filterCellProps)))));
         });

package/dist/npm/header/GroupPanel.js

@@ -48,9 +48,10 @@ var GroupPanel = /** @class */ (function (_super) {
             }, onSortChange: function (event, dir) {
                 _this.onGroupSortChange(event, index, groupDesc, dir);
             }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler })); });
-        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header k-grouping-header-flex", role: "toolbar", "aria-label": (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelAriaLabel, messages_1.messages[messages_1.groupPanelAriaLabel]) },
-            groups,
-            React.createElement("div", { className: "k-indicator-container" },
+        return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelAriaLabel, messages_1.messages[messages_1.groupPanelAriaLabel]) },
+            !!groups.length
+                && React.createElement("div", { className: "k-chip-list k-chip-list-md" }, groups),
+            React.createElement("div", { className: "k-grouping-drop-container" },
                 !groups.length && (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelEmpty, messages_1.messages[messages_1.groupPanelEmpty]),
                 "\u00A0")));
     };

package/dist/npm/header/Header.js

@@ -100,7 +100,9 @@ var Header = /** @class */ (function (_super) {
         }
         return (React.createElement("div", { ref: this.props.elemRef, className: (0, kendo_react_common_1.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; }, className: (0, kendo_react_common_1.classNames)('k-table k-grid-header-table', (_a = {},
+                React.createElement("table", { ref: function (table) { _this.table = table; }, className: (0, kendo_react_common_1.classNames)('k-table k-grid-header-table', (_a = {
+                            'k-grid-md': !this.props.size
+                        },
                         _a["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                         _a), this.props.className), role: "presentation" },
                     React.createElement("colgroup", { ref: function (e) { _this.props.columnResize.colGroupHeader = e; } }, this.props.cols),

package/dist/npm/header/HeaderRow.js

@@ -78,6 +78,7 @@ var HeaderRow = /** @class */ (function (_super) {
             var className = (0, kendo_react_common_1.classNames)({
                 'k-first': column.kFirst,
                 'k-filterable': Boolean(columnMenu),
+                'k-table-th': true,
                 'k-header': true,
                 'k-grid-header-sticky': column.locked,
                 'k-sorted': _this.props.sort && _this.props.sort.some(function (descriptor) { return descriptor.field === column.field; })

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

@@ -202,4 +202,8 @@ export interface GridColumnReorderEvent {
      * The current columns collection.
      */
     columns: GridColumnProps[];
+    /**
+     * The id of the dragged column.
+     */
+    columnId?: string;
 }

package/dist/npm/package-metadata.js

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