@progress/kendo-react-grid 5.20.0-dev.202310040609 → 5.20.0-dev.202310061256

package/dist/es/Grid.js

@@ -637,7 +637,7 @@ var Grid = /** @class */ (function (_super) {
         var statusBar = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridStatusBar'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
-        var groupingPanel = groupable && (React.createElement(GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle, ariaControls: this._gridRoleElementId }));
+        var groupingPanel = groupable && (React.createElement(GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle, ariaControls: this._gridRoleElementId, onContextMenu: this.onContextMenu }));
         var _g = this.props, sort = _g.sort, sortable = _g.sortable, group = _g.group, filter = _g.filter, filterable = _g.filterable, _h = _g.filterOperators, filterOperators = _h === void 0 ? operators : _h, headerCellRender = _g.headerCellRender, columnMenu = _g.columnMenu;
         var header = (React.createElement(Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap, this.isRtl), filterRow: this.props.filterable && React.createElement(FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: getColumnWidth(column) })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;

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

@@ -3,10 +3,12 @@ import * as React from 'react';
  * @hidden
  */
 export interface GroupingIndicatorProps {
+    index: number;
     title: string;
     dir: 'asc' | 'desc';
     onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onSortChange?: (event: React.MouseEvent<HTMLDivElement>, dir: string) => void;
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any) => void;
     onDrag?: (draggableEvent: any, element: HTMLDivElement) => void;
     onPress?: (draggableEvent: any, element: HTMLDivElement) => void;
     onRelease?: (draggableEvent: any) => void;
@@ -30,5 +32,6 @@ export declare class GroupingIndicator extends React.Component<GroupingIndicator
     onRelease: (data: any) => void;
     sortChange: (event: React.MouseEvent<HTMLDivElement>) => void;
     groupRemove: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
     render(): JSX.Element;
 }

package/dist/es/drag/GroupingIndicator.js

@@ -13,6 +13,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import * as React from 'react';
 import { Draggable, IconWrap } from '@progress/kendo-react-common';
 import { registerForLocalization } from '@progress/kendo-react-intl';
@@ -66,13 +77,23 @@ var GroupingIndicator = /** @class */ (function (_super) {
                 _this.props.onRemove(event);
             }
         };
+        _this.onContextMenu = function (event) {
+            var dataItem = {
+                title: _this.props.title,
+                dir: _this.props.dir,
+                index: _this.props.index
+            };
+            if (_this.props.onContextMenu) {
+                _this.props.onContextMenu.call(undefined, event, { dataItem: __assign({}, dataItem) });
+            }
+        };
         return _this;
     }
     GroupingIndicator.prototype.render = function () {
         var _this = 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-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", onClick: this.sortChange, role: "button", style: { touchAction: 'none' } },
+            React.createElement("div", { className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", onClick: this.sortChange, onContextMenu: this.onContextMenu, role: "button", style: { touchAction: 'none' } },
                 React.createElement("span", null,
                     React.createElement(IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? sortAscSmallIcon : sortDescSmallIcon, size: 'small' })),
                 React.createElement("span", { className: 'k-chip-content' }, this.props.title),

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

@@ -9,6 +9,7 @@ export interface GroupPanelProps extends ColumnDraggableProps {
     groupChange: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLElement>) => void;
     refCallback: (e: HTMLDivElement | null) => void;
     resolveTitle: (field: string) => string;
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any, field?: string) => void;
     ariaControls: string;
 }
 /**

package/dist/es/header/GroupPanel.js

@@ -40,11 +40,11 @@ var GroupPanel = /** @class */ (function (_super) {
     GroupPanel.prototype.render = function () {
         var _this = this;
         var groupsProp = this.props.group || [];
-        var groups = groupsProp.map(function (groupDesc, index) { return (React.createElement(GroupingIndicator, { key: index, dir: groupDesc.dir || 'asc', title: _this.props.resolveTitle(groupDesc.field), onRemove: function (event) {
+        var groups = groupsProp.map(function (groupDesc, index) { return (React.createElement(GroupingIndicator, { key: index, index: index, dir: groupDesc.dir || 'asc', title: _this.props.resolveTitle(groupDesc.field), onRemove: function (event) {
                 _this.onGroupRemove(event, index);
             }, onSortChange: function (event, dir) {
                 _this.onGroupSortChange(event, index, groupDesc, dir);
-            }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler })); });
+            }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler, onContextMenu: _this.props.onContextMenu })); });
         return (React.createElement("div", { ref: this.props.refCallback, className: "k-grouping-header", role: "toolbar", "aria-label": intl(this).toLanguageString(groupPanelAriaLabel, messages[groupPanelAriaLabel]), "aria-controls": this.props.ariaControls || '' },
             React.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, groups),
             React.createElement("div", { className: "k-grouping-drop-container" },

package/dist/es/header/HeaderRow.js

@@ -102,7 +102,8 @@ var HeaderRow = /** @class */ (function (_super) {
                         field: column.field,
                         title: column.title,
                         locked: column.locked,
-                        filter: column.filter
+                        filter: column.filter,
+                        id: column.id
                     },
                     sortable: sortable && _this.props.sortable,
                     sort: _this.props.sort,

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

@@ -18,4 +18,8 @@ export interface GridColumnMenuColumnProps {
      * @hidden
      */
     title?: string;
+    /**
+     * The column id.
+     */
+    id?: 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: 1696398308,
+    publishDate: 1696595463,
     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

@@ -640,7 +640,7 @@ var Grid = /** @class */ (function (_super) {
         var statusBar = children.filter(function (child) { return child && child.type &&
             child.type.displayName === 'KendoReactGridStatusBar'; });
         var leafColumns = this._columns.filter(function (c) { return c.children.length === 0; });
-        var groupingPanel = groupable && (React.createElement(GroupPanel_1.GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle, ariaControls: this._gridRoleElementId }));
+        var groupingPanel = groupable && (React.createElement(GroupPanel_1.GroupPanel, { group: this.props.group || [], groupChange: this.groupChange, pressHandler: this.dragLogic.pressHandler, dragHandler: this.dragLogic.dragHandler, releaseHandler: this.dragLogic.releaseHandler, refCallback: this.dragLogic.refGroupPanelDiv, resolveTitle: this.resolveTitle, ariaControls: this._gridRoleElementId, onContextMenu: this.onContextMenu }));
         var _g = this.props, sort = _g.sort, sortable = _g.sortable, group = _g.group, filter = _g.filter, filterable = _g.filterable, _h = _g.filterOperators, filterOperators = _h === void 0 ? filterCommon_1.operators : _h, headerCellRender = _g.headerCellRender, columnMenu = _g.columnMenu;
         var header = (React.createElement(Header_1.Header, { size: this.props.size, columnResize: this.columnResize, staticHeaders: this.props.scrollable !== 'none', scrollableDataElement: function () { return _this.vs.container; }, draggable: this.props.reorderable || groupable, ref: this.headerRef, elemRef: this.headerElementRef, headerRow: this.getHeaderRow(sort, sortable, group, groupable, filter, filterable, filterOperators, headerCellRender, columnMenu, this._columns, this._columnsMap, this.isRtl), filterRow: this.props.filterable && React.createElement(FilterRow_1.FilterRow, { cells: this.props.cells, size: this.props.size, columns: this._columns, filter: this.props.filter, filterOperators: this.props.filterOperators || filterCommon_1.operators, filterChange: this.filterChange, sort: this.props.sort, cellRender: this.props.filterCellRender, isRtl: this.isRtl, ariaRowIndex: this._columnsMap.length + 1 }) || undefined, cols: leafColumns.map(function (column, index) { return (React.createElement("col", { key: index.toString(), width: (0, index_1.getColumnWidth)(column) })); }) }));
         var scrollLeft = this.vs && this.vs.container && this.vs.container.scrollLeft || 0;

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

@@ -3,10 +3,12 @@ import * as React from 'react';
  * @hidden
  */
 export interface GroupingIndicatorProps {
+    index: number;
     title: string;
     dir: 'asc' | 'desc';
     onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
     onSortChange?: (event: React.MouseEvent<HTMLDivElement>, dir: string) => void;
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any) => void;
     onDrag?: (draggableEvent: any, element: HTMLDivElement) => void;
     onPress?: (draggableEvent: any, element: HTMLDivElement) => void;
     onRelease?: (draggableEvent: any) => void;
@@ -30,5 +32,6 @@ export declare class GroupingIndicator extends React.Component<GroupingIndicator
     onRelease: (data: any) => void;
     sortChange: (event: React.MouseEvent<HTMLDivElement>) => void;
     groupRemove: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    onContextMenu: (event: React.MouseEvent<HTMLElement>) => void;
     render(): JSX.Element;
 }

package/dist/npm/drag/GroupingIndicator.js

@@ -14,6 +14,17 @@ var __extends = (this && this.__extends) || (function () {
         d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
     };
 })();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.GroupingIndicator = void 0;
 var React = require("react");
@@ -69,13 +80,23 @@ var GroupingIndicator = /** @class */ (function (_super) {
                 _this.props.onRemove(event);
             }
         };
+        _this.onContextMenu = function (event) {
+            var dataItem = {
+                title: _this.props.title,
+                dir: _this.props.dir,
+                index: _this.props.index
+            };
+            if (_this.props.onContextMenu) {
+                _this.props.onContextMenu.call(undefined, event, { dataItem: __assign({}, dataItem) });
+            }
+        };
         return _this;
     }
     GroupingIndicator.prototype.render = function () {
         var _this = 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-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", onClick: this.sortChange, role: "button", style: { touchAction: 'none' } },
+            React.createElement("div", { className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md", onClick: this.sortChange, onContextMenu: this.onContextMenu, role: "button", style: { touchAction: 'none' } },
                 React.createElement("span", null,
                     React.createElement(kendo_react_common_1.IconWrap, { name: 'sort-' + dir + '-small', icon: dir === 'asc' ? kendo_svg_icons_1.sortAscSmallIcon : kendo_svg_icons_1.sortDescSmallIcon, size: 'small' })),
                 React.createElement("span", { className: 'k-chip-content' }, this.props.title),

package/dist/npm/header/GroupPanel.d.ts

@@ -9,6 +9,7 @@ export interface GroupPanelProps extends ColumnDraggableProps {
     groupChange: (groups: GroupDescriptor[], event: React.MouseEvent<HTMLElement>) => void;
     refCallback: (e: HTMLDivElement | null) => void;
     resolveTitle: (field: string) => string;
+    onContextMenu?: (event: React.MouseEvent<HTMLElement>, dataItem: any, field?: string) => void;
     ariaControls: string;
 }
 /**

package/dist/npm/header/GroupPanel.js

@@ -43,11 +43,11 @@ var GroupPanel = /** @class */ (function (_super) {
     GroupPanel.prototype.render = function () {
         var _this = this;
         var groupsProp = this.props.group || [];
-        var groups = groupsProp.map(function (groupDesc, index) { return (React.createElement(GroupingIndicator_1.GroupingIndicator, { key: index, dir: groupDesc.dir || 'asc', title: _this.props.resolveTitle(groupDesc.field), onRemove: function (event) {
+        var groups = groupsProp.map(function (groupDesc, index) { return (React.createElement(GroupingIndicator_1.GroupingIndicator, { key: index, index: index, dir: groupDesc.dir || 'asc', title: _this.props.resolveTitle(groupDesc.field), onRemove: function (event) {
                 _this.onGroupRemove(event, index);
             }, onSortChange: function (event, dir) {
                 _this.onGroupSortChange(event, index, groupDesc, dir);
-            }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler })); });
+            }, onPress: _this.props.pressHandler, onDrag: _this.props.dragHandler, onRelease: _this.props.releaseHandler, onContextMenu: _this.props.onContextMenu })); });
         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]), "aria-controls": this.props.ariaControls || '' },
             React.createElement("div", { className: "k-chip-list k-chip-list-md", role: "none" }, groups),
             React.createElement("div", { className: "k-grouping-drop-container" },

package/dist/npm/header/HeaderRow.js

@@ -105,7 +105,8 @@ var HeaderRow = /** @class */ (function (_super) {
                         field: column.field,
                         title: column.title,
                         locked: column.locked,
-                        filter: column.filter
+                        filter: column.filter,
+                        id: column.id
                     },
                     sortable: sortable && _this.props.sortable,
                     sort: _this.props.sort,

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

@@ -18,4 +18,8 @@ export interface GridColumnMenuColumnProps {
      * @hidden
      */
     title?: string;
+    /**
+     * The column id.
+     */
+    id?: string;
 }

package/dist/npm/package-metadata.js

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