@progress/kendo-react-grid 5.12.0-dev.202303130940 → 5.12.0-dev.202303141413

package/dist/es/Grid.d.ts

@@ -206,6 +206,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
      * @hidden
      */
     render(): JSX.Element;
+    private onContextMenu;
     private getVirtualScroll;
     private isAllData;
     private initializeVirtualization;

package/dist/es/Grid.js

@@ -147,6 +147,18 @@ var Grid = /** @class */ (function (_super) {
         _this.fitColumns = function (columnIds) {
             _this.columnResize.dblClickHandler(null, columnIds);
         };
+        _this.onContextMenu = function (event, dataItem, field) {
+            if (_this.props.onContextMenu) {
+                var ev = {
+                    target: _this,
+                    syntheticEvent: event,
+                    nativeEvent: event.nativeEvent,
+                    dataItem: dataItem,
+                    field: field
+                };
+                _this.props.onContextMenu.call(undefined, ev);
+            }
+        };
         _this.getVirtualScroll = function (props) {
             var rowHeight = props.rowHeight, detailRowHeight = props.detailRowHeight, detail = props.detail, expandField = props.expandField, groupable = props.groupable;
             var hasAllData = _this.isAllData();
@@ -611,7 +623,7 @@ var Grid = /** @class */ (function (_super) {
                         }
                     }
                     var Cell = column.cell || (currentColumnIsInEdit && GridEditCell) || GridCell;
-                    return (React.createElement(Cell, { key: columnKey, locked: _this.props.lockGroups, id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix), colSpan: colSpans[columnIndex], dataItem: item.dataItem, field: column.field, editor: column.editor, format: column.format, className: className, render: _this.props.cellRender, onChange: _this.itemChange, selectionChange: (_this.props.onSelectionChange) ?
+                    return (React.createElement(Cell, { onContextMenu: _this.onContextMenu, key: columnKey, locked: _this.props.lockGroups, id: navigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix), colSpan: colSpans[columnIndex], dataItem: item.dataItem, field: column.field, editor: column.editor, format: column.format, className: className, render: _this.props.cellRender, onChange: _this.itemChange, selectionChange: (_this.props.onSelectionChange) ?
                             (function (e) { _this.selectionChange({ event: e, dataItem: item.dataItem, dataIndex: rowDataIndex, columnIndex: columnIndex }); }) :
                             undefined, columnIndex: columnIndex, columnsCount: leafColumns.length, rowType: item.rowType, level: item.level, expanded: item.expanded, dataIndex: item.dataIndex, style: style, ariaColumnIndex: column.ariaColumnIndex, isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1 }));
                 }),
@@ -677,7 +689,7 @@ var Grid = /** @class */ (function (_super) {
                         }),
                         _this.props.expandField &&
                             React.createElement(GridDetailHierarchyCell, { id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
-                        React.createElement(GridDetailCell, { dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix) }))));
+                        React.createElement(GridDetailCell, { onContextMenu: _this.onContextMenu, dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix) }))));
                 }
             });
         }
@@ -746,7 +758,7 @@ var Grid = /** @class */ (function (_super) {
                                     _this.tableElement = table;
                                 } },
                                 React.createElement("table", { className: classNames('k-table k-grid-table', (_c = {
-                                            'k-grid-md': !this.props.size
+                                            'k-table-md': !this.props.size
                                         },
                                         _c["k-table-".concat(kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                                         _c)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },

package/dist/es/cells/GridCell.js

@@ -20,8 +20,13 @@ export var GridCell = function (props) {
     var defaultRendering = null;
     var intl = useInternationalization();
     var navigationAttributes = useTableKeyboardNavigation(props.id);
+    var onContextMenu = React.useCallback(function (event) {
+        if (props.onContextMenu) {
+            props.onContextMenu.call(undefined, event, props.dataItem, props.field);
+        }
+    }, [props.onContextMenu, props.dataItem, props.field]);
     if (props.rowType === 'groupFooter') {
-        defaultRendering = React.createElement("td", { className: props.className });
+        defaultRendering = React.createElement("td", { onContextMenu: onContextMenu, className: props.className });
     }
     else if (props.field !== undefined && props.rowType !== 'groupHeader') {
         var data = getNestedValue(props.field, props.dataItem);
@@ -32,7 +37,7 @@ export var GridCell = function (props) {
                 data.toString();
         }
         var className = classNames('k-table-td', props.className, { 'k-selected': props.isSelected });
-        defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_a = {}, _a[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes), dataAsString));
+        defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_a = {}, _a[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes), dataAsString));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/es/cells/GridDetailCell.d.ts

@@ -8,6 +8,7 @@ export interface GridDetailCellProps {
     dataIndex: number;
     detail: React.ComponentType<GridDetailRowProps>;
     id: string;
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any) => void;
 }
 /** @hidden */
 export declare const GridDetailCell: (props: GridDetailCellProps) => JSX.Element;

package/dist/es/cells/GridDetailCell.js

@@ -15,6 +15,11 @@ import * as React from 'react';
 export var GridDetailCell = function (props) {
     var colSpan = props.colSpan, ariaColIndex = props.ariaColIndex, dataItem = props.dataItem, dataIndex = props.dataIndex, id = props.id;
     var navigationAttributes = useTableKeyboardNavigation(id);
-    return (React.createElement("td", __assign({ className: "k-table-td k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
+    var onContextMenu = React.useCallback(function (event) {
+        if (props.onContextMenu) {
+            props.onContextMenu.call(undefined, event, props.dataItem);
+        }
+    }, [props.onContextMenu, props.dataItem]);
+    return (React.createElement("td", __assign({ onContextMenu: onContextMenu, className: "k-table-td k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
         React.createElement(props.detail, { dataItem: dataItem, dataIndex: dataIndex })));
 };

package/dist/es/cells/GridEditCell.js

@@ -42,6 +42,11 @@ export var GridEditCell = function (props) {
             });
         }
     }, [props.onChange, props.dataItem, props.dataIndex, props.field]);
+    var onContextMenu = React.useCallback(function (event) {
+        if (props.onContextMenu) {
+            props.onContextMenu.call(undefined, event, props.dataItem, props.field);
+        }
+    }, [props.onContextMenu, props.dataItem, props.field]);
     var inputChange = React.useCallback(function (e) {
         if (props.onChange) {
             props.onChange({
@@ -55,20 +60,20 @@ export var GridEditCell = function (props) {
     }, [props.onChange, props.dataItem, props.dataIndex, props.field]);
     switch (props.editor) {
         case 'numeric':
-            defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_b = {}, _b[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _b), { role: 'gridcell' }, navigationAttributes),
+            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_b = {}, _b[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _b), { role: 'gridcell' }, navigationAttributes),
                 React.createElement(NumericTextBox, { width: "100%", value: (data === undefined) ? null : data, onChange: inputChange })));
             break;
         case 'date':
-            defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_c = {}, _c[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _c), { role: 'gridcell' }, navigationAttributes),
+            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_c = {}, _c[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _c), { role: 'gridcell' }, navigationAttributes),
                 React.createElement(DatePicker, { width: "100%", value: data, onChange: inputChange })));
             break;
         case 'boolean':
-            defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_d = {}, _d[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _d), { role: 'gridcell' }, navigationAttributes),
+            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_d = {}, _d[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _d), { role: 'gridcell' }, navigationAttributes),
                 React.createElement("input", { checked: data || false, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
                 React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId })));
             break;
         default:
-            defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_e = {}, _e[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _e), { role: 'gridcell' }, navigationAttributes),
+            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_e = {}, _e[GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _e), { role: 'gridcell' }, navigationAttributes),
                 React.createElement("input", { style: { width: '100%' }, className: "k-input", value: data || '', onChange: handleOnChange })));
     }
     return props.render ?

package/dist/es/cells/GridGroupCell.js

@@ -39,10 +39,15 @@ export var GridGroupCell = function (props) {
             });
         }
     }, [expanded, onChange, dataItem, dataIndex]);
+    var onContextMenu = React.useCallback(function (event) {
+        if (props.onContextMenu) {
+            props.onContextMenu.call(undefined, event, props.dataItem, props.field);
+        }
+    }, [props.onContextMenu, props.dataItem, props.field]);
     var renderCellCollapse = function (colspan, styles) {
         var baseMessage = expanded ? groupCollapse : groupExpand;
         var message = localization.toLanguageString(baseMessage, messages[baseMessage]);
-        return (React.createElement("td", __assign({ className: 'k-table-td', 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),
+        return (React.createElement("td", __assign({ className: 'k-table-td', style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler, onContextMenu: onContextMenu }, navigationAttributes),
             React.createElement("p", { className: "k-reset" },
                 React.createElement("a", { onClick: function (e) {
                         e.preventDefault();
@@ -63,7 +68,7 @@ export var GridGroupCell = function (props) {
     };
     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-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "gridcell" }));
+        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: classNames('k-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "gridcell", onContextMenu: onContextMenu }));
     }
     else if (columnIndex <= level && !props.locked) {
         defaultRendering = renderCellCollapse(columnsCount - columnIndex, {});
@@ -71,7 +76,7 @@ export var GridGroupCell = function (props) {
     else if (columnIndex <= level && props.locked) {
         defaultRendering = (React.createElement(React.Fragment, null,
             renderCellCollapse(0, { position: 'sticky', zIndex: 2 }),
-            React.createElement("td", { className: 'k-table-td', role: 'gridcell', colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
+            React.createElement("td", { className: 'k-table-td', role: 'gridcell', colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 }, onContextMenu: onContextMenu })));
     }
     return render ?
         render.call(undefined, defaultRendering, props) :

package/dist/es/footer/Footer.js

@@ -58,7 +58,7 @@ 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 = {
-                            'k-grid-md': !this.props.size
+                            'k-table-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" },

package/dist/es/header/GroupPanel.js

@@ -46,7 +46,7 @@ var GroupPanel = /** @class */ (function (_super) {
                 _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", role: "toolbar", "aria-label": intl(this).toLanguageString(groupPanelAriaLabel, messages[groupPanelAriaLabel]) },
-            React.createElement("div", { className: "k-chip-list k-chip-list-md" }, groups),
+            React.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, groups),
             React.createElement("div", { className: "k-grouping-drop-container" },
                 !groups.length && intl(this).toLanguageString(messageKey, messages[messageKey]),
                 "\u00A0")));

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

@@ -54,4 +54,8 @@ export interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
      * @hidden
      */
     locked?: boolean | undefined;
+    /**
+     * The event that is fired when the ContextMenu is activated.
+     */
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any, field?: string) => void;
 }

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

@@ -1,7 +1,7 @@
 import { ComponentType } from 'react';
 import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
 import { GridGroupableSettings } from './GridGroupableSettings';
-import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridEvent, GridRowDoubleClickEvent, GridNavigationActionEvent, GridKeyDownEvent } from './events';
+import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridEvent, GridRowDoubleClickEvent, GridNavigationActionEvent, GridKeyDownEvent, GridContextMenuEvent } from './events';
 import { ScrollMode } from '../ScrollMode';
 import { GridCellProps } from './GridCellProps';
 import { GridFilterCellProps } from './GridFilterCellProps';
@@ -305,4 +305,8 @@ export interface GridProps extends KendoReactComponentBaseProps {
      * @default `medium`
      */
     size?: 'small' | 'medium';
+    /**
+     * The event that is fired when the ContextMenu is activated.
+     */
+    onContextMenu?: (event: GridContextMenuEvent) => void;
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SortDescriptor, CompositeFilterDescriptor, GroupDescriptor, State } from '@progress/kendo-data-query';
 import { Grid } from '../Grid';
 import { Page } from '../paging/Page';
@@ -119,6 +120,23 @@ export interface GridHeaderSelectionChangeEvent extends GridEvent {
      */
     selectedField: string;
 }
+/**
+ * Represents the object of the `onContextMenu` Grid event.
+ */
+export interface GridContextMenuEvent extends GridEvent {
+    /**
+     * The data object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     * The field to which the cell is bound.
+     */
+    field?: string;
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.MouseEvent<any>;
+}
 /**
  * Represents the object of the `GridNavigationActionEvent` Grid event.
  */

package/dist/es/package-metadata.js

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

package/dist/npm/Grid.d.ts

@@ -206,6 +206,7 @@ export declare class Grid extends React.Component<GridProps, {}> {
      * @hidden
      */
     render(): JSX.Element;
+    private onContextMenu;
     private getVirtualScroll;
     private isAllData;
     private initializeVirtualization;

package/dist/npm/Grid.js

@@ -150,6 +150,18 @@ var Grid = /** @class */ (function (_super) {
         _this.fitColumns = function (columnIds) {
             _this.columnResize.dblClickHandler(null, columnIds);
         };
+        _this.onContextMenu = function (event, dataItem, field) {
+            if (_this.props.onContextMenu) {
+                var ev = {
+                    target: _this,
+                    syntheticEvent: event,
+                    nativeEvent: event.nativeEvent,
+                    dataItem: dataItem,
+                    field: field
+                };
+                _this.props.onContextMenu.call(undefined, ev);
+            }
+        };
         _this.getVirtualScroll = function (props) {
             var rowHeight = props.rowHeight, detailRowHeight = props.detailRowHeight, detail = props.detail, expandField = props.expandField, groupable = props.groupable;
             var hasAllData = _this.isAllData();
@@ -614,7 +626,7 @@ var Grid = /** @class */ (function (_super) {
                         }
                     }
                     var Cell = column.cell || (currentColumnIsInEdit && GridEditCell_1.GridEditCell) || GridCell_1.GridCell;
-                    return (React.createElement(Cell, { key: columnKey, locked: _this.props.lockGroups, id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix), colSpan: colSpans[columnIndex], dataItem: item.dataItem, field: column.field, editor: column.editor, format: column.format, className: className, render: _this.props.cellRender, onChange: _this.itemChange, selectionChange: (_this.props.onSelectionChange) ?
+                    return (React.createElement(Cell, { onContextMenu: _this.onContextMenu, key: columnKey, locked: _this.props.lockGroups, id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(rowId, "-").concat(String(columnIndex)), idPrefix), colSpan: colSpans[columnIndex], dataItem: item.dataItem, field: column.field, editor: column.editor, format: column.format, className: className, render: _this.props.cellRender, onChange: _this.itemChange, selectionChange: (_this.props.onSelectionChange) ?
                             (function (e) { _this.selectionChange({ event: e, dataItem: item.dataItem, dataIndex: rowDataIndex, columnIndex: columnIndex }); }) :
                             undefined, columnIndex: columnIndex, columnsCount: leafColumns.length, rowType: item.rowType, level: item.level, expanded: item.expanded, dataIndex: item.dataIndex, style: style, ariaColumnIndex: column.ariaColumnIndex, isSelected: Array.isArray(selectedValue) && selectedValue.indexOf(columnIndex) > -1 }));
                 }),
@@ -680,7 +692,7 @@ var Grid = /** @class */ (function (_super) {
                         }),
                         _this.props.expandField &&
                             React.createElement(GridDetailHierarchyCell_1.GridDetailHierarchyCell, { id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(detailRowId, "-dhcell"), idPrefix) }),
-                        React.createElement(GridDetailCell_1.GridDetailCell, { dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix) }))));
+                        React.createElement(GridDetailCell_1.GridDetailCell, { onContextMenu: _this.onContextMenu, dataItem: item.dataItem, dataIndex: item.dataIndex, colSpan: detailColspan, ariaColIndex: 2 + (_this.props.group ? _this.props.group.length : 0), detail: _this.props.detail, id: kendo_react_data_tools_1.tableKeyboardNavigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix) }))));
                 }
             });
         }
@@ -749,7 +761,7 @@ var Grid = /** @class */ (function (_super) {
                                     _this.tableElement = table;
                                 } },
                                 React.createElement("table", { className: (0, kendo_react_common_1.classNames)('k-table k-grid-table', (_c = {
-                                            'k-grid-md': !this.props.size
+                                            'k-table-md': !this.props.size
                                         },
                                         _c["k-table-".concat(kendo_react_common_1.kendoThemeMaps.sizeMap[this.props.size] || this.props.size)] = this.props.size,
                                         _c)), role: "presentation", style: { userSelect: tableUserSelect, display: tableDisplay } },

package/dist/npm/cells/GridCell.js

@@ -23,8 +23,13 @@ var GridCell = function (props) {
     var defaultRendering = null;
     var intl = (0, kendo_react_intl_1.useInternationalization)();
     var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(props.id);
+    var onContextMenu = React.useCallback(function (event) {
+        if (props.onContextMenu) {
+            props.onContextMenu.call(undefined, event, props.dataItem, props.field);
+        }
+    }, [props.onContextMenu, props.dataItem, props.field]);
     if (props.rowType === 'groupFooter') {
-        defaultRendering = React.createElement("td", { className: props.className });
+        defaultRendering = React.createElement("td", { onContextMenu: onContextMenu, className: props.className });
     }
     else if (props.field !== undefined && props.rowType !== 'groupHeader') {
         var data = (0, utils_1.getNestedValue)(props.field, props.dataItem);
@@ -35,7 +40,7 @@ var GridCell = function (props) {
                 data.toString();
         }
         var className = (0, kendo_react_common_1.classNames)('k-table-td', props.className, { 'k-selected': props.isSelected });
-        defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_a = {}, _a[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes), dataAsString));
+        defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: className, role: 'gridcell', "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_a = {}, _a[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _a), navigationAttributes), dataAsString));
     }
     return props.render ?
         props.render.call(undefined, defaultRendering, props) :

package/dist/npm/cells/GridDetailCell.d.ts

@@ -8,6 +8,7 @@ export interface GridDetailCellProps {
     dataIndex: number;
     detail: React.ComponentType<GridDetailRowProps>;
     id: string;
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any) => void;
 }
 /** @hidden */
 export declare const GridDetailCell: (props: GridDetailCellProps) => JSX.Element;

package/dist/npm/cells/GridDetailCell.js

@@ -18,7 +18,12 @@ var React = require("react");
 var GridDetailCell = function (props) {
     var colSpan = props.colSpan, ariaColIndex = props.ariaColIndex, dataItem = props.dataItem, dataIndex = props.dataIndex, id = props.id;
     var navigationAttributes = (0, kendo_react_data_tools_1.useTableKeyboardNavigation)(id);
-    return (React.createElement("td", __assign({ className: "k-table-td k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
+    var onContextMenu = React.useCallback(function (event) {
+        if (props.onContextMenu) {
+            props.onContextMenu.call(undefined, event, props.dataItem);
+        }
+    }, [props.onContextMenu, props.dataItem]);
+    return (React.createElement("td", __assign({ onContextMenu: onContextMenu, className: "k-table-td k-detail-cell", colSpan: colSpan, "aria-colindex": ariaColIndex, role: 'gridcell' }, navigationAttributes),
         React.createElement(props.detail, { dataItem: dataItem, dataIndex: dataIndex })));
 };
 exports.GridDetailCell = GridDetailCell;

package/dist/npm/cells/GridEditCell.js

@@ -45,6 +45,11 @@ var GridEditCell = function (props) {
             });
         }
     }, [props.onChange, props.dataItem, props.dataIndex, props.field]);
+    var onContextMenu = React.useCallback(function (event) {
+        if (props.onContextMenu) {
+            props.onContextMenu.call(undefined, event, props.dataItem, props.field);
+        }
+    }, [props.onContextMenu, props.dataItem, props.field]);
     var inputChange = React.useCallback(function (e) {
         if (props.onChange) {
             props.onChange({
@@ -58,20 +63,20 @@ var GridEditCell = function (props) {
     }, [props.onChange, props.dataItem, props.dataIndex, props.field]);
     switch (props.editor) {
         case 'numeric':
-            defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_b = {}, _b[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _b), { role: 'gridcell' }, navigationAttributes),
+            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_b = {}, _b[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _b), { role: 'gridcell' }, navigationAttributes),
                 React.createElement(kendo_react_inputs_1.NumericTextBox, { width: "100%", value: (data === undefined) ? null : data, onChange: inputChange })));
             break;
         case 'date':
-            defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_c = {}, _c[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _c), { role: 'gridcell' }, navigationAttributes),
+            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_c = {}, _c[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _c), { role: 'gridcell' }, navigationAttributes),
                 React.createElement(kendo_react_dateinputs_1.DatePicker, { width: "100%", value: data, onChange: inputChange })));
             break;
         case 'boolean':
-            defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_d = {}, _d[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _d), { role: 'gridcell' }, navigationAttributes),
+            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_d = {}, _d[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _d), { role: 'gridcell' }, navigationAttributes),
                 React.createElement("input", { checked: data || false, id: inputId, type: "checkbox", className: "k-checkbox k-checkbox-md k-rounded-md", onChange: handleOnChange }),
                 React.createElement("label", { className: "k-checkbox-label", htmlFor: inputId })));
             break;
         default:
-            defaultRendering = (React.createElement("td", __assign({ colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_e = {}, _e[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _e), { role: 'gridcell' }, navigationAttributes),
+            defaultRendering = (React.createElement("td", __assign({ onContextMenu: onContextMenu, colSpan: props.colSpan, style: props.style, className: editCellClasses, "aria-colindex": props.ariaColumnIndex, "aria-selected": props.isSelected }, (_e = {}, _e[constants_1.GRID_COL_INDEX_ATTRIBUTE] = props.columnIndex, _e), { role: 'gridcell' }, navigationAttributes),
                 React.createElement("input", { style: { width: '100%' }, className: "k-input", value: data || '', onChange: handleOnChange })));
     }
     return props.render ?

package/dist/npm/cells/GridGroupCell.js

@@ -42,10 +42,15 @@ var GridGroupCell = function (props) {
             });
         }
     }, [expanded, onChange, dataItem, dataIndex]);
+    var onContextMenu = React.useCallback(function (event) {
+        if (props.onContextMenu) {
+            props.onContextMenu.call(undefined, event, props.dataItem, props.field);
+        }
+    }, [props.onContextMenu, props.dataItem, props.field]);
     var renderCellCollapse = function (colspan, styles) {
         var baseMessage = expanded ? messages_1.groupCollapse : messages_1.groupExpand;
         var message = localization.toLanguageString(baseMessage, messages_1.messages[baseMessage]);
-        return (React.createElement("td", __assign({ className: 'k-table-td', 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),
+        return (React.createElement("td", __assign({ className: 'k-table-td', style: __assign(__assign({}, props.style), styles), colSpan: colspan, key: 'g-colspan', role: 'gridcell', "aria-selected": false, "aria-expanded": expanded, "aria-colindex": ariaColumnIndex, onKeyDown: onKeyDownHandler, onContextMenu: onContextMenu }, navigationAttributes),
             React.createElement("p", { className: "k-reset" },
                 React.createElement("a", { onClick: function (e) {
                         e.preventDefault();
@@ -66,7 +71,7 @@ var GridGroupCell = function (props) {
     };
     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-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "gridcell" }));
+        defaultRendering = (React.createElement("td", { style: props.style, key: 'g' + columnIndex, className: (0, kendo_react_common_1.classNames)('k-table-td', 'k-group-cell', { 'k-grid-content-sticky': props.locked }), role: "gridcell", onContextMenu: onContextMenu }));
     }
     else if (columnIndex <= level && !props.locked) {
         defaultRendering = renderCellCollapse(columnsCount - columnIndex, {});
@@ -74,7 +79,7 @@ var GridGroupCell = function (props) {
     else if (columnIndex <= level && props.locked) {
         defaultRendering = (React.createElement(React.Fragment, null,
             renderCellCollapse(0, { position: 'sticky', zIndex: 2 }),
-            React.createElement("td", { className: 'k-table-td', role: 'gridcell', colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 } })));
+            React.createElement("td", { className: 'k-table-td', role: 'gridcell', colSpan: (columnsCount - columnIndex), style: { borderLeftWidth: 0, borderRightWidth: 0 }, onContextMenu: onContextMenu })));
     }
     return render ?
         render.call(undefined, defaultRendering, props) :

package/dist/npm/footer/Footer.js

@@ -61,7 +61,7 @@ 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 = {
-                            'k-grid-md': !this.props.size
+                            'k-table-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" },

package/dist/npm/header/GroupPanel.js

@@ -49,7 +49,7 @@ var GroupPanel = /** @class */ (function (_super) {
                 _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", role: "toolbar", "aria-label": (0, kendo_react_intl_1.provideLocalizationService)(this).toLanguageString(messages_1.groupPanelAriaLabel, messages_1.messages[messages_1.groupPanelAriaLabel]) },
-            React.createElement("div", { className: "k-chip-list k-chip-list-md" }, groups),
+            React.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, 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/interfaces/GridCellProps.d.ts

@@ -54,4 +54,8 @@ export interface GridCellProps extends Omit<CellProps, 'onChange' | 'render'> {
      * @hidden
      */
     locked?: boolean | undefined;
+    /**
+     * The event that is fired when the ContextMenu is activated.
+     */
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any, field?: string) => void;
 }

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

@@ -1,7 +1,7 @@
 import { ComponentType } from 'react';
 import { DataResult, SortDescriptor, CompositeFilterDescriptor, GroupDescriptor } from '@progress/kendo-data-query';
 import { GridGroupableSettings } from './GridGroupableSettings';
-import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridEvent, GridRowDoubleClickEvent, GridNavigationActionEvent, GridKeyDownEvent } from './events';
+import { GridSortChangeEvent, GridFilterChangeEvent, GridPageChangeEvent, GridExpandChangeEvent, GridSelectionChangeEvent, GridHeaderSelectionChangeEvent, GridRowClickEvent, GridItemChangeEvent, GridDataStateChangeEvent, GridColumnResizeEvent, GridColumnReorderEvent, GridGroupChangeEvent, GridEvent, GridRowDoubleClickEvent, GridNavigationActionEvent, GridKeyDownEvent, GridContextMenuEvent } from './events';
 import { ScrollMode } from '../ScrollMode';
 import { GridCellProps } from './GridCellProps';
 import { GridFilterCellProps } from './GridFilterCellProps';
@@ -305,4 +305,8 @@ export interface GridProps extends KendoReactComponentBaseProps {
      * @default `medium`
      */
     size?: 'small' | 'medium';
+    /**
+     * The event that is fired when the ContextMenu is activated.
+     */
+    onContextMenu?: (event: GridContextMenuEvent) => void;
 }

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

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { SortDescriptor, CompositeFilterDescriptor, GroupDescriptor, State } from '@progress/kendo-data-query';
 import { Grid } from '../Grid';
 import { Page } from '../paging/Page';
@@ -119,6 +120,23 @@ export interface GridHeaderSelectionChangeEvent extends GridEvent {
      */
     selectedField: string;
 }
+/**
+ * Represents the object of the `onContextMenu` Grid event.
+ */
+export interface GridContextMenuEvent extends GridEvent {
+    /**
+     * The data object that represents the current row.
+     */
+    dataItem: any;
+    /**
+     * The field to which the cell is bound.
+     */
+    field?: string;
+    /**
+     * A React Synthetic Event.
+     */
+    syntheticEvent: React.MouseEvent<any>;
+}
 /**
  * Represents the object of the `GridNavigationActionEvent` Grid event.
  */

package/dist/npm/package-metadata.js

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