@progress/kendo-react-grid 5.10.0-dev.202211241147 → 5.10.0-dev.202212021149

package/dist/es/Grid.js

@@ -513,7 +513,7 @@ var Grid = /** @class */ (function (_super) {
                         }
                     }
                     if (column.cell) {
-                        return React.createElement(column.cell, __assign({ key: columnKey }, cellProps));
+                        return React.createElement(column.cell, __assign({ key: columnKey }, cellProps, { locked: _this.props.lockGroups }));
                     }
                     return currentColumnIsInEdit
                         ? React.createElement(GridEditCell, __assign({ key: columnKey }, cellProps))
@@ -570,7 +570,7 @@ var Grid = /** @class */ (function (_super) {
                     currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount_1;
                     body.push((React.createElement("tr", { key: detailRowId, className: isAlt ? 'k-detail-row k-alt' : 'k-detail-row', style: { visibility: hidden(rowIndex) ? 'hidden' : '' }, role: "row", "aria-rowindex": currentAriaRowIndex },
                         _this.props.group && _this.props.group.map(function (group, idx) {
-                            return (React.createElement(GridGroupCell, { id: '', dataIndex: item.dataIndex, field: group.field, dataItem: item.dataItem, key: idx, style: {}, ariaColumnIndex: 1 + idx, isSelected: false }));
+                            return (React.createElement(GridGroupCell, { id: '', dataIndex: item.dataIndex, field: group.field, dataItem: item.dataItem, key: idx, style: {}, ariaColumnIndex: 1 + idx, isSelected: false, locked: _this.props.lockGroups }));
                         }),
                         _this.props.expandField &&
                             React.createElement(GridDetailHierarchyCell, { id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
@@ -774,7 +774,7 @@ var Grid = /** @class */ (function (_super) {
             columnIndexOffset++;
         }
         for (var i = 0; i < groupCount; i++) {
-            this._columns.unshift(__assign(__assign({}, defaultServiceProps), { isAccessible: false, cell: GridGroupCell, field: 'value' }));
+            this._columns.unshift(__assign(__assign({}, defaultServiceProps), { isAccessible: false, cell: GridGroupCell, field: 'value', locked: this.props.lockGroups }));
             columnIndexOffset++;
         }
         this._columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });

package/dist/es/cells/GridGroupCell.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { Keys } from '@progress/kendo-react-common';
+import { classNames, Keys } from '@progress/kendo-react-common';
 import { useTableKeyboardNavigation } from '@progress/kendo-react-data-tools';
 import { useLocalization } from '@progress/kendo-react-intl';
 import * as React from 'react';
@@ -38,14 +38,10 @@ export var GridGroupCell = function (props) {
             });
         }
     }, [expanded, onChange, dataItem, dataIndex]);
-    if (columnIndex === undefined || level === undefined || columnIndex < level ||
-        columnsCount === undefined || rowType !== 'groupHeader' || dataItem[definedField] === undefined) {
-        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: "k-group-cell", role: "presentation" }));
-    }
-    else if (columnIndex <= level) {
+    var renderCellCollapse = function (colspan, styles) {
         var baseMessage = expanded ? groupCollapse : groupExpand;
         var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
-        defaultRendering = (React.createElement("td", __assign({ style: props.style, key: 'g-colspan', colSpan: columnsCount - columnIndex, role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
+        return (React.createElement("td", __assign({ style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
             React.createElement("p", { className: "k-reset" },
                 React.createElement("a", { onClick: function (e) {
                         e.preventDefault();
@@ -62,6 +58,18 @@ export var GridGroupCell = function (props) {
                 ((dataItem[definedField] instanceof Date) && dataItem[definedField].toString) ?
                     dataItem[definedField].toString() :
                     dataItem[definedField])));
+    };
+    if (columnIndex === undefined || level === undefined || columnIndex < level ||
+        columnsCount === undefined || rowType !== 'groupHeader' || dataItem[definedField] === undefined) {
+        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: classNames('k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "presentation" }));
+    }
+    else if (columnIndex <= level && !props.locked) {
+        defaultRendering = renderCellCollapse(columnsCount - columnIndex, {});
+    }
+    else if (columnIndex <= level && props.locked) {
+        defaultRendering = (React.createElement(React.Fragment, null,
+            renderCellCollapse(0, { position: 'sticky', zIndex: 2 }),
+            React.createElement("td", { colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
     }
     return render ?
         render.call(undefined, defaultRendering, props) :

package/dist/es/drag/GroupingIndicator.js

@@ -73,7 +73,7 @@ var GroupingIndicator = /** @class */ (function (_super) {
         var localizationService = provideLocalizationService(this);
         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" },
+                React.createElement("div", { className: "k-group-indicator", role: "button" },
                     React.createElement("a", { className: "k-link", href: "#", tabIndex: -1, onClick: this.sortChange },
                         React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.dir + '-small' }),
                         this.props.title),

package/dist/es/header/FilterRow.js

@@ -118,7 +118,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: _this.headerCellClassName(column.field, column.locked) || undefined }, ariaAttrs), filterCellProps && (column.filterCell ?
+            return (React.createElement(HeaderThElement, __assign({ key: key, columnId: navigationTools.getFilterColumnId(column.id), navigatable: column.navigatable, style: style, className: _this.headerCellClassName(column.field, column.locked) || undefined, role: "columnheader" }, ariaAttrs), filterCellProps && (column.filterCell ?
                 React.createElement(column.filterCell, __assign({}, filterCellProps)) :
                 React.createElement(GridFilterCell, __assign({}, filterCellProps)))));
         });

package/dist/es/header/GroupPanel.js

@@ -16,7 +16,7 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
 import { GroupingIndicator } from '../drag/GroupingIndicator';
 import { registerForLocalization, provideLocalizationService as intl } from '@progress/kendo-react-intl';
-import { messages, groupPanelEmpty as messageKey } from './../messages';
+import { messages, groupPanelEmpty as messageKey, groupPanelAriaLabel } from './../messages';
 /**
  * @hidden
  */
@@ -45,7 +45,7 @@ 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" },
+        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" },
                 !groups.length && intl(this).toLanguageString(messageKey, messages[messageKey]),

package/dist/es/header/Header.js

@@ -98,7 +98,7 @@ var Header = /** @class */ (function (_super) {
             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; } }, this.props.cols),
-                    React.createElement("thead", __assign({ role: "presentation" }, tableKeyboardNavigationHeaderAttributes),
+                    React.createElement("thead", __assign({ role: "rowgroup" }, tableKeyboardNavigationHeaderAttributes),
                         this.props.headerRow,
                         this.props.filterRow)))));
     };

package/dist/es/header/HeaderRow.js

@@ -121,7 +121,7 @@ var HeaderRow = /** @class */ (function (_super) {
                 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 }),
+            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, role: "columnheader" }),
                 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) {

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

@@ -50,4 +50,8 @@ export interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
      * A function for overriding the default rendering of the cell.
      */
     render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GridCellProps) => React.ReactElement<HTMLTableCellElement> | null;
+    /**
+     * @hidden
+     */
+    locked?: boolean | undefined;
 }

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

@@ -285,4 +285,10 @@ export interface GridProps extends KendoReactComponentBaseProps {
      * The accessible label of the Grid.
      */
     ariaLabel?: string;
+    /**
+     * Defines if the group descriptor columns are locked (frozen or sticky).
+     * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
+     * Defaults to `false`.
+     */
+    lockGroups?: boolean;
 }

package/dist/es/messages/index.d.ts

@@ -94,6 +94,10 @@ export declare const sortAriaLabel = "grid.sortAriaLabel";
  * @hidden
  */
 export declare const filterAriaLabel = "grid.filterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const groupPanelAriaLabel = "grid.groupPanelAriaLabel";
 /**
  * @hidden
  */
@@ -142,6 +146,7 @@ export declare const messages: {
     "grid.filterChooseOperator": string;
     "grid.filterSelectedItems": string;
     "grid.filterAriaLabel": string;
+    "grid.groupPanelAriaLabel": string;
     'grid.filterEqOperator': string;
     'grid.filterNotEqOperator': string;
     'grid.filterIsNullOperator': string;

package/dist/es/messages/index.js

@@ -95,6 +95,10 @@ export var sortAriaLabel = 'grid.sortAriaLabel';
  * @hidden
  */
 export var filterAriaLabel = 'grid.filterAriaLabel';
+/**
+ * @hidden
+ */
+export var groupPanelAriaLabel = 'grid.groupPanelAriaLabel';
 /**
  * @hidden
  */
@@ -143,6 +147,7 @@ export var messages = (_a = {},
     _a[filterChooseOperator] = 'Choose Operator',
     _a[filterSelectedItems] = 'selected items',
     _a[filterAriaLabel] = 'Filter',
+    _a[groupPanelAriaLabel] = 'Group panel',
     _a['grid.filterEqOperator'] = 'Is equal to',
     _a['grid.filterNotEqOperator'] = 'Is not equal to',
     _a['grid.filterIsNullOperator'] = 'Is null',

package/dist/es/package-metadata.js

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

@@ -516,7 +516,7 @@ var Grid = /** @class */ (function (_super) {
                         }
                     }
                     if (column.cell) {
-                        return React.createElement(column.cell, __assign({ key: columnKey }, cellProps));
+                        return React.createElement(column.cell, __assign({ key: columnKey }, cellProps, { locked: _this.props.lockGroups }));
                     }
                     return currentColumnIsInEdit
                         ? React.createElement(GridEditCell_1.GridEditCell, __assign({ key: columnKey }, cellProps))
@@ -573,7 +573,7 @@ var Grid = /** @class */ (function (_super) {
                     currentAriaRowIndex = absoluteIndex + rowIndexStart + detailRowCount_1;
                     body.push((React.createElement("tr", { key: detailRowId, className: isAlt ? 'k-detail-row k-alt' : 'k-detail-row', style: { visibility: hidden(rowIndex) ? 'hidden' : '' }, role: "row", "aria-rowindex": currentAriaRowIndex },
                         _this.props.group && _this.props.group.map(function (group, idx) {
-                            return (React.createElement(GridGroupCell_1.GridGroupCell, { id: '', dataIndex: item.dataIndex, field: group.field, dataItem: item.dataItem, key: idx, style: {}, ariaColumnIndex: 1 + idx, isSelected: false }));
+                            return (React.createElement(GridGroupCell_1.GridGroupCell, { id: '', dataIndex: item.dataIndex, field: group.field, dataItem: item.dataItem, key: idx, style: {}, ariaColumnIndex: 1 + idx, isSelected: false, locked: _this.props.lockGroups }));
                         }),
                         _this.props.expandField &&
                             React.createElement(GridDetailHierarchyCell_1.GridDetailHierarchyCell, { id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
@@ -777,7 +777,7 @@ var Grid = /** @class */ (function (_super) {
             columnIndexOffset++;
         }
         for (var i = 0; i < groupCount; i++) {
-            this._columns.unshift(__assign(__assign({}, defaultServiceProps), { isAccessible: false, cell: GridGroupCell_1.GridGroupCell, field: 'value' }));
+            this._columns.unshift(__assign(__assign({}, defaultServiceProps), { isAccessible: false, cell: GridGroupCell_1.GridGroupCell, field: 'value', locked: this.props.lockGroups }));
             columnIndexOffset++;
         }
         this._columns.slice(columnIndexOffset).forEach(function (c) { return c.parentIndex >= 0 && (c.parentIndex += columnIndexOffset); });

package/dist/npm/cells/GridGroupCell.js

@@ -41,14 +41,10 @@ var GridGroupCell = function (props) {
             });
         }
     }, [expanded, onChange, dataItem, dataIndex]);
-    if (columnIndex === undefined || level === undefined || columnIndex < level ||
-        columnsCount === undefined || rowType !== 'groupHeader' || dataItem[definedField] === undefined) {
-        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: "k-group-cell", role: "presentation" }));
-    }
-    else if (columnIndex <= level) {
+    var renderCellCollapse = function (colspan, styles) {
         var baseMessage = expanded ? messages_1.groupCollapse : messages_1.groupExpand;
         var message = localization.toLanguageString(baseMessage, messages_1.messages[baseMessage]);
-        defaultRendering = (React.createElement("td", __assign({ style: props.style, key: 'g-colspan', colSpan: columnsCount - columnIndex, role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
+        return (React.createElement("td", __assign({ style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler }, navigationAttributes),
             React.createElement("p", { className: "k-reset" },
                 React.createElement("a", { onClick: function (e) {
                         e.preventDefault();
@@ -65,6 +61,18 @@ var GridGroupCell = function (props) {
                 ((dataItem[definedField] instanceof Date) && dataItem[definedField].toString) ?
                     dataItem[definedField].toString() :
                     dataItem[definedField])));
+    };
+    if (columnIndex === undefined || level === undefined || columnIndex < level ||
+        columnsCount === undefined || rowType !== 'groupHeader' || dataItem[definedField] === undefined) {
+        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: (0, kendo_react_common_1.classNames)('k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "presentation" }));
+    }
+    else if (columnIndex <= level && !props.locked) {
+        defaultRendering = renderCellCollapse(columnsCount - columnIndex, {});
+    }
+    else if (columnIndex <= level && props.locked) {
+        defaultRendering = (React.createElement(React.Fragment, null,
+            renderCellCollapse(0, { position: 'sticky', zIndex: 2 }),
+            React.createElement("td", { colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
     }
     return render ?
         render.call(undefined, defaultRendering, props) :

package/dist/npm/drag/GroupingIndicator.js

@@ -76,7 +76,7 @@ var GroupingIndicator = /** @class */ (function (_super) {
         var localizationService = (0, kendo_react_intl_1.provideLocalizationService)(this);
         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" },
+                React.createElement("div", { className: "k-group-indicator", role: "button" },
                     React.createElement("a", { className: "k-link", href: "#", tabIndex: -1, onClick: this.sortChange },
                         React.createElement("span", { className: 'k-icon k-i-sort-' + this.props.dir + '-small' }),
                         this.props.title),

package/dist/npm/header/FilterRow.js

@@ -121,7 +121,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: _this.headerCellClassName(column.field, column.locked) || undefined }, 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: _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({}, filterCellProps)))));
         });

package/dist/npm/header/GroupPanel.js

@@ -48,7 +48,7 @@ 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" },
+        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" },
                 !groups.length && (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelEmpty, messages_1.messages[messages_1.groupPanelEmpty]),

package/dist/npm/header/Header.js

@@ -101,7 +101,7 @@ var Header = /** @class */ (function (_super) {
             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; } }, this.props.cols),
-                    React.createElement("thead", __assign({ role: "presentation" }, kendo_react_data_tools_1.tableKeyboardNavigationHeaderAttributes),
+                    React.createElement("thead", __assign({ role: "rowgroup" }, kendo_react_data_tools_1.tableKeyboardNavigationHeaderAttributes),
                         this.props.headerRow,
                         this.props.filterRow)))));
     };

package/dist/npm/header/HeaderRow.js

@@ -124,7 +124,7 @@ var HeaderRow = /** @class */ (function (_super) {
                 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 }),
+            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, role: "columnheader" }),
                 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) {

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

@@ -50,4 +50,8 @@ export interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
      * A function for overriding the default rendering of the cell.
      */
     render?: (defaultRendering: React.ReactElement<HTMLTableCellElement> | null, props: GridCellProps) => React.ReactElement<HTMLTableCellElement> | null;
+    /**
+     * @hidden
+     */
+    locked?: boolean | undefined;
 }

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

@@ -285,4 +285,10 @@ export interface GridProps extends KendoReactComponentBaseProps {
      * The accessible label of the Grid.
      */
     ariaLabel?: string;
+    /**
+     * Defines if the group descriptor columns are locked (frozen or sticky).
+     * Locked columns are the columns that are visible at all times while the user scrolls the component horizontally.
+     * Defaults to `false`.
+     */
+    lockGroups?: boolean;
 }

package/dist/npm/messages/index.d.ts

@@ -94,6 +94,10 @@ export declare const sortAriaLabel = "grid.sortAriaLabel";
  * @hidden
  */
 export declare const filterAriaLabel = "grid.filterAriaLabel";
+/**
+ * @hidden
+ */
+export declare const groupPanelAriaLabel = "grid.groupPanelAriaLabel";
 /**
  * @hidden
  */
@@ -142,6 +146,7 @@ export declare const messages: {
     "grid.filterChooseOperator": string;
     "grid.filterSelectedItems": string;
     "grid.filterAriaLabel": string;
+    "grid.groupPanelAriaLabel": string;
     'grid.filterEqOperator': string;
     'grid.filterNotEqOperator': string;
     'grid.filterIsNullOperator': string;

package/dist/npm/messages/index.js

@@ -1,7 +1,7 @@
 "use strict";
 var _a;
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.pagerMessagesMap = exports.messages = exports.detailCollapse = exports.detailExpand = exports.groupCollapse = exports.groupExpand = exports.filterAriaLabel = exports.sortAriaLabel = exports.filterSelectedItems = exports.filterChooseOperator = exports.filterCheckAll = exports.searchPlaceholder = exports.sortDescending = exports.sortAscending = exports.filterTitle = exports.filterSubmitButton = exports.filterClearButton = exports.ungroupColumn = exports.groupColumn = exports.groupPanelEmpty = exports.pagerTotalPages = exports.pagerOf = exports.pagerPage = exports.pagerItemPerPage = exports.pagerLastPage = exports.pagerNextPage = exports.pagerPreviousPage = exports.pagerFirstPage = exports.pagerInfo = exports.noRecords = void 0;
+exports.pagerMessagesMap = exports.messages = exports.detailCollapse = exports.detailExpand = exports.groupCollapse = exports.groupExpand = exports.groupPanelAriaLabel = exports.filterAriaLabel = exports.sortAriaLabel = exports.filterSelectedItems = exports.filterChooseOperator = exports.filterCheckAll = exports.searchPlaceholder = exports.sortDescending = exports.sortAscending = exports.filterTitle = exports.filterSubmitButton = exports.filterClearButton = exports.ungroupColumn = exports.groupColumn = exports.groupPanelEmpty = exports.pagerTotalPages = exports.pagerOf = exports.pagerPage = exports.pagerItemPerPage = exports.pagerLastPage = exports.pagerNextPage = exports.pagerPreviousPage = exports.pagerFirstPage = exports.pagerInfo = exports.noRecords = void 0;
 /**
  * @hidden
  */
@@ -98,6 +98,10 @@ exports.sortAriaLabel = 'grid.sortAriaLabel';
  * @hidden
  */
 exports.filterAriaLabel = 'grid.filterAriaLabel';
+/**
+ * @hidden
+ */
+exports.groupPanelAriaLabel = 'grid.groupPanelAriaLabel';
 /**
  * @hidden
  */
@@ -146,6 +150,7 @@ exports.messages = (_a = {},
     _a[exports.filterChooseOperator] = 'Choose Operator',
     _a[exports.filterSelectedItems] = 'selected items',
     _a[exports.filterAriaLabel] = 'Filter',
+    _a[exports.groupPanelAriaLabel] = 'Group panel',
     _a['grid.filterEqOperator'] = 'Is equal to',
     _a['grid.filterNotEqOperator'] = 'Is not equal to',
     _a['grid.filterIsNullOperator'] = 'Is null',

package/dist/npm/package-metadata.js

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