@progress/kendo-react-grid 7.3.0-develop.2 → 7.3.0-develop.4

package/drag/CommonDragLogic.mjs

@@ -9,31 +9,29 @@
 import * as h from "react";
 import { getIndex as a } from "@progress/kendo-react-data-tools";
 class g {
-  constructor(r, i, s) {
+  constructor(e, i, n) {
     this.refDragElementClue = h.createRef(), this.refDropElementClue = h.createRef(), this.columns = [], this.reorderable = !1, this.groupable = !1, this.startColumn = -1, this.startGroup = -1, this.currentColumn = -1, this.currentGroup = -1, this.groupPanelDivElement = null, this.refGroupPanelDiv = (t) => {
       this.groupPanelDivElement = t && t.children ? t.children[0] : t;
-    }, this.pressHandler = (t, e) => {
-      const u = this.getColumnIndex(t, e);
-      if (this.startGroup = this.getGroupIndex(t), u >= 0) {
-        const n = this.columns[u];
-        (n.reorderable && this.reorderable || n.groupable && this.groupable) && (this.startColumn = u);
+    }, this.pressHandler = (t, r) => {
+      const s = this.getColumnIndex(t, r);
+      if (this.startGroup = this.getGroupIndex(t), s >= 0) {
+        const u = this.columns[s];
+        (u.reorderable && this.reorderable || u.groupable && this.groupable) && (this.startColumn = s);
       }
-    }, this.dragHandler = (t, e) => {
+    }, this.dragHandler = (t, r) => {
       if (t.isTouch || t.originalEvent.preventDefault(), t.originalEvent.stopPropagation(), this.startColumn === -1 && this.startGroup === -1)
         return;
-      this.currentColumn = this.getColumnIndex(t, e);
-      const u = this.groupPanelDivElement && this.groupPanelDivElement.children;
-      this.currentGroup = this.isTargetGroupingContainer(t) ? u && u.length ? u.length : 0 : this.getGroupIndex(t);
-      const n = !this.isValid();
-      n && (this.currentColumn = -1, this.currentGroup = -1);
-      const l = this.currentColumn >= 0 ? e.children[this.columns[this.currentColumn].index] : this.isTargetGroupingContainer(t) ? t.originalEvent.target : this.groupPanelDivElement && this.groupPanelDivElement.children[this.currentGroup];
-      this.updateDragElementClue(t, e, l, n), this.updateDropElementClue(t, e, l, n);
+      this.currentColumn = this.getColumnIndex(t, r), this.currentGroup = this.isTargetGroupingContainer(t) ? this.getCurrentGroupsLength : this.getGroupIndex(t);
+      const s = !this.isValid();
+      s && (this.currentColumn = -1, this.currentGroup = -1);
+      const u = this.currentColumn >= 0 ? r.children[this.columns[this.currentColumn].index] : this.isTargetGroupingContainer(t) ? t.originalEvent.target : this.groupPanelDivElement && this.groupPanelDivElement.children[this.currentGroup];
+      this.updateDragElementClue(t, r, u, s), this.updateDropElementClue(t, r, u, s);
     }, this.releaseHandler = (t) => {
-      const e = this.startColumn, u = this.currentColumn, n = this.startGroup, l = this.currentGroup;
+      const r = this.startColumn, s = this.currentColumn, u = this.startGroup, l = this.currentGroup;
       t.originalEvent.preventDefault(), this.dropElementClue && this.dropElementClue.setState({ visible: !1 }), this.dragElementClue && this.dragElementClue.setState({ visible: !1 });
       const o = this.isValid();
-      this.startColumn = this.startGroup = this.currentColumn = this.currentGroup = -1, o && (e >= 0 && u >= 0 ? this.columnReorder(e, u, t.originalEvent) : n >= 0 && l >= 0 ? this.groupReorder(n, l, t.originalEvent) : e >= 0 && l >= 0 && this.columnToGroup(e, l, t.originalEvent));
-    }, this.columnReorder = r, this.groupReorder = i, this.columnToGroup = s;
+      this.startColumn = this.startGroup = this.currentColumn = this.currentGroup = -1, o && (r >= 0 && s >= 0 ? this.columnReorder(r, s, t.originalEvent) : u >= 0 && l >= 0 ? this.groupReorder(u, l, t.originalEvent) : r >= 0 && l >= 0 && this.columnToGroup(r, l, t.originalEvent));
+    }, this.columnReorder = e, this.groupReorder = i, this.columnToGroup = n;
   }
   get dragClueRef() {
     return this.refDragElementClue;
@@ -41,61 +39,65 @@ class g {
   get dropClueRef() {
     return this.refDropElementClue;
   }
+  get getCurrentGroupsLength() {
+    const e = this.groupPanelDivElement && this.groupPanelDivElement.children;
+    return e && e.length || 0;
+  }
   get dragElementClue() {
     return this.refDragElementClue.current;
   }
   get dropElementClue() {
     return this.refDropElementClue.current;
   }
-  getColumnIndex(r, i) {
+  getColumnIndex(e, i) {
     if (!i || i.parentElement === this.groupPanelDivElement)
       return -1;
-    const s = a(r, i);
-    if (s === -1)
+    const n = a(e, i);
+    if (n === -1)
       return -1;
     for (let t = 0; t < i.parentNode.children.length; t++)
       if (i.parentNode.children[t] === i)
-        return this.columns.findIndex((e) => e.index === s && e.depth === t);
+        return this.columns.findIndex((r) => r.index === n && r.depth === t);
     return -1;
   }
-  isTargetGroupingContainer(r) {
-    const i = r.originalEvent.target;
+  isTargetGroupingContainer(e) {
+    const i = e.originalEvent.target;
     return i.className.indexOf ? i.className.indexOf("k-grouping-drop-container") !== -1 : !1;
   }
-  getGroupIndex(r) {
-    return a(r, this.groupPanelDivElement);
+  getGroupIndex(e) {
+    return a(e, this.groupPanelDivElement);
   }
   isValid() {
     return this.startGroup >= 0 ? this.currentGroup >= 0 && this.currentGroup !== this.startGroup : this.startColumn === -1 ? !1 : this.currentGroup >= 0 ? this.columns[this.startColumn].groupable === !0 && this.groupable === !0 : this.reorderable === !0 && this.currentColumn >= 0 && this.currentColumn !== this.startColumn && this.columns[this.startColumn].reorderable === !0 && this.columns[this.currentColumn].parentIndex === this.columns[this.startColumn].parentIndex;
   }
-  updateDragElementClue(r, i, s, t) {
+  updateDragElementClue(e, i, n, t) {
     if (!this.dragElementClue)
       return;
-    const e = this.startColumn >= 0 ? i.children[this.columns[this.startColumn].index].innerText : i.innerText;
+    const r = this.startColumn >= 0 ? i.children[this.columns[this.startColumn].index].innerText : i.innerText;
     this.dragElementClue.setState({
       visible: !0,
-      top: r.pageY + 10,
-      left: r.pageX,
-      innerText: e,
-      status: t || !s ? "k-i-cancel" : "k-i-plus"
+      top: e.pageY + 10,
+      left: e.pageX,
+      innerText: r,
+      status: t || !n ? "k-i-cancel" : "k-i-plus"
     });
   }
-  updateDropElementClue(r, i, s, t) {
+  updateDropElementClue(e, i, n, t) {
     if (!this.dropElementClue)
       return;
-    if (t || !s) {
+    if (t || !n) {
       this.dropElementClue.setState({ visible: !1 });
       return;
     }
-    const e = s.getBoundingClientRect(), n = (s.closest(".k-grouping-header") || s).getBoundingClientRect();
-    let l = e.left + r.pageX - r.clientX - 6;
-    !this.isTargetGroupingContainer(r) && (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) && (l += e.width);
-    const o = n.top + r.pageY - r.clientY;
+    const r = n.getBoundingClientRect(), u = (n.closest(".k-grouping-header") || n).getBoundingClientRect();
+    let l = r.left + e.pageX - e.clientX - 6;
+    !this.isTargetGroupingContainer(e) && (this.currentColumn > this.startColumn || this.currentGroup > this.startGroup && this.startGroup !== -1) && (l += r.width);
+    const o = u.top + e.pageY - e.clientY;
     this.dropElementClue.setState({
       visible: !0,
       top: o,
       left: l,
-      height: this.currentColumn >= 0 ? i.clientHeight : n.height
+      height: this.currentColumn >= 0 ? i.clientHeight : u.height
     });
   }
 }

package/header/HeaderRow.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const I=require("react"),q=require("../interfaces/GridSortSettings.js"),E=require("../drag/ColumnDraggable.js"),M=require("./GridHeaderCell.js"),u=require("@progress/kendo-react-common"),C=require("@progress/kendo-react-data-tools"),b=require("@progress/kendo-react-intl"),f=require("../messages/index.js"),k=require("@progress/kendo-svg-icons"),N=require("../utils/index.js");function O(n){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const r in n)if(r!=="default"){const l=Object.getOwnPropertyDescriptor(n,r);Object.defineProperty(s,r,l.get?l:{enumerable:!0,get:()=>n[r]})}}return s.default=n,Object.freeze(s)}const o=O(I),L={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},P={none:"none",asc:"ascending",desc:"descending"};class R extends o.Component{constructor(s){super(s),this.serviceIndex=0,this.index=-1,this.cellKeyDown=(r,l)=>{r.isDefaultPrevented()||r.keyCode===u.Keys.enter&&this.cellClick(r,l)},this.cells=r=>r.map(l=>{const e=this.props.columns[l],i=this.props.sortable&&e.sortable,a=this.props.sort?this.props.sort.findIndex(t=>t.field===e.field):-1,p=a>=0&&this.props.sort[a].dir||"none",c=e.columnMenu===null?null:e.columnMenu||this.props.columnMenu,S=u.classNames({"k-first":e.kFirst,"k-filterable":!!c,"k-table-th":!0,"k-header":!0,"k-grid-header-sticky":e.locked,"k-sorted":this.props.sort&&this.props.sort.some(t=>t.field===e.field)},e.headerClassName);e.locked===!1&&(e.left=0);const y=e.left!==void 0?this.props.isRtl?{left:e.right,right:e.left}:{left:e.left,right:e.right}:{},D=b.provideLocalizationService(this).toLanguageString(f.sortAriaLabel,f.messages[f.sortAriaLabel]),H=e.isAccessible?{ariaSort:P[p],role:"columnheader",ariaColumnIndex:e.ariaColumnIndex,ariaSelected:!1,ariaDescription:i?D:""}:{role:"presentation"},d=e.declarationIndex>=0?++this.index:--this.serviceIndex,v=e.headerCell?e.headerCell:M.GridHeaderCell,z=o.createElement(v,{key:1,field:e.field,onClick:i&&(t=>this.cellClick(t,e))||void 0,selectionChange:this.props.selectionChange,title:e.title,selectionValue:e.headerSelectionValue,render:this.props.cellRender,children:this.sortIcon(a),columnMenuWrapperProps:{column:{field:e.field,title:e.title,locked:e.locked,filter:e.filter,id:e.id},sortable:i&&this.props.sortable,sort:this.props.sort,onSortChange:this.props.sortChange,filter:this.props.filter,filterable:this.props.filterable&&e.filterable,filterOperators:this.props.filterOperators,onFilterChange:this.props.filterChange,group:this.props.group,groupable:this.props.groupable,onGroupChange:this.props.groupChange,columnMenu:c}}),m={...H,key:d,colSpan:e.colSpan,rowSpan:e.rowSpan,className:S,style:y,columnId:e.id,navigatable:e.navigatable,onKeyDown:i&&(t=>this.cellKeyDown(t,e))||void 0,role:"columnheader"},g=[z,this.props.columnResize&&this.props.columnResize.resizable&&e.resizable&&o.createElement(C.ColumnResizer,{key:2,resize:(t,w,x)=>this.props.columnResize&&this.props.columnResize.dragHandler(t,e,w,x),autofit:t=>this.props.columnResize&&this.props.columnResize.dblClickHandler(t,[e.id])})],h=N.resolveCells(this.props.cells,e.cells);if(h&&h.headerCell){const t=h.headerCell;return o.createElement(t,{key:d,thProps:m,index:l},g)}return o.createElement(C.HeaderThElement,{...m,key:d},g)}),this.cellClick=this.cellClick.bind(this)}cellClick(s,r){if(s.preventDefault(),!this.props.sortChange)return;const{allowUnsort:l,mode:e}=q.normalize(this.props.sortable||!1,r.sortable||!1),i=(this.props.sort||[]).filter(c=>c.field===r.field)[0],a=L[l][i&&i.dir||""],p=e==="single"?[]:(this.props.sort||[]).filter(c=>c.field!==r.field);a!==""&&r.field&&p.push({field:r.field,dir:a}),this.props.sortChange(p,s)}sortIcon(s){return this.props.sort?s>=0&&[o.createElement("span",{key:1,className:"k-sort-icon"},o.createElement(u.IconWrap,{name:"sort-"+this.props.sort[s].dir+"-small",icon:this.props.sort[s].dir==="asc"?k.sortAscSmallIcon:k.sortDescSmallIcon})),this.props.sort.length>1&&o.createElement("span",{key:2,className:"k-sort-icon"},o.createElement("span",{className:"k-sort-order"},s+1))]:null}render(){return this.serviceIndex=0,this.index=-1,this.props.columnsMap.map((s,r)=>this.props.pressHandler&&o.createElement(E.ColumnDraggable,{key:r,pressHandler:this.props.pressHandler,dragHandler:this.props.dragHandler,releaseHandler:this.props.releaseHandler,ariaRowIndex:r+1,dragClue:this.props.dragClue,headerRef:this.props.headerRef,containerRef:this.props.containerRef},this.cells(s))||o.createElement("tr",{key:r,className:"k-table-row",role:"row","aria-rowindex":r+1},this.cells(s)))}}b.registerForLocalization(R);exports.HeaderRow=R;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),v=require("../interfaces/GridSortSettings.js"),E=require("../drag/ColumnDraggable.js"),M=require("./GridHeaderCell.js"),d=require("@progress/kendo-react-common"),b=require("@progress/kendo-react-data-tools"),y=require("@progress/kendo-react-intl"),m=require("../messages/index.js"),k=require("@progress/kendo-svg-icons"),K=require("../utils/index.js");function N(c){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const s in c)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(c,s);Object.defineProperty(r,s,o.get?o:{enumerable:!0,get:()=>c[s]})}}return r.default=c,Object.freeze(r)}const l=N(q),O={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},G={none:"none",asc:"ascending",desc:"descending"};class R extends l.Component{constructor(r){super(r),this.serviceIndex=0,this.index=-1,this.cellKeyDown=(s,o)=>{if(s.isDefaultPrevented())return;const{keyCode:e,metaKey:i,ctrlKey:n}=s;if(this.props.sortable&&o.sortable&&s.keyCode===d.Keys.enter&&this.cellClick(s,o),i&&e===d.Keys.enter||n&&e===d.Keys.space){const a=this.props.columns.findIndex(h=>h.field===o.field);this.props.columnGroupChange&&this.props.columnGroupChange(a,s)}},this.cells=s=>s.map(o=>{const e=this.props.columns[o],i=this.props.sortable&&e.sortable,n=this.props.sort?this.props.sort.findIndex(t=>t.field===e.field):-1,p=n>=0&&this.props.sort[n].dir||"none",a=e.columnMenu===null?null:e.columnMenu||this.props.columnMenu,h=d.classNames({"k-first":e.kFirst,"k-filterable":!!a,"k-table-th":!0,"k-header":!0,"k-grid-header-sticky":e.locked,"k-sorted":this.props.sort&&this.props.sort.some(t=>t.field===e.field)},e.headerClassName);e.locked===!1&&(e.left=0);const S=e.left!==void 0?this.props.isRtl?{left:e.right,right:e.left}:{left:e.left,right:e.right}:{},D=y.provideLocalizationService(this).toLanguageString(m.sortAriaLabel,m.messages[m.sortAriaLabel]),H=e.isAccessible?{ariaSort:G[p],role:"columnheader",ariaColumnIndex:e.ariaColumnIndex,ariaSelected:!1,ariaDescription:i?D:""}:{role:"presentation"},u=e.declarationIndex>=0?++this.index:--this.serviceIndex,x=e.headerCell?e.headerCell:M.GridHeaderCell,z=l.createElement(x,{key:1,field:e.field,onClick:i&&(t=>this.cellClick(t,e))||void 0,selectionChange:this.props.selectionChange,title:e.title,selectionValue:e.headerSelectionValue,render:this.props.cellRender,children:this.sortIcon(n),columnMenuWrapperProps:{column:{field:e.field,title:e.title,locked:e.locked,filter:e.filter,id:e.id},sortable:i&&this.props.sortable,sort:this.props.sort,onSortChange:this.props.sortChange,filter:this.props.filter,filterable:this.props.filterable&&e.filterable,filterOperators:this.props.filterOperators,onFilterChange:this.props.filterChange,group:this.props.group,groupable:this.props.groupable,onGroupChange:this.props.groupChange,columnMenu:a}}),g={...H,key:u,colSpan:e.colSpan,rowSpan:e.rowSpan,className:h,style:S,columnId:e.id,navigatable:e.navigatable,onKeyDown:t=>this.cellKeyDown(t,e),role:"columnheader"},C=[z,this.props.columnResize&&this.props.columnResize.resizable&&e.resizable&&l.createElement(b.ColumnResizer,{key:2,resize:(t,I,w)=>this.props.columnResize&&this.props.columnResize.dragHandler(t,e,I,w),autofit:t=>this.props.columnResize&&this.props.columnResize.dblClickHandler(t,[e.id])})],f=K.resolveCells(this.props.cells,e.cells);if(f&&f.headerCell){const t=f.headerCell;return l.createElement(t,{key:u,thProps:g,index:o},C)}return l.createElement(b.HeaderThElement,{...g,key:u},C)}),this.cellClick=this.cellClick.bind(this)}cellClick(r,s){if(r.preventDefault(),!this.props.sortChange)return;const{allowUnsort:o,mode:e}=v.normalize(this.props.sortable||!1,s.sortable||!1),i=(this.props.sort||[]).filter(a=>a.field===s.field)[0],n=O[o][i&&i.dir||""],p=e==="single"?[]:(this.props.sort||[]).filter(a=>a.field!==s.field);n!==""&&s.field&&p.push({field:s.field,dir:n}),this.props.sortChange(p,r)}sortIcon(r){return this.props.sort?r>=0&&[l.createElement("span",{key:1,className:"k-sort-icon"},l.createElement(d.IconWrap,{name:"sort-"+this.props.sort[r].dir+"-small",icon:this.props.sort[r].dir==="asc"?k.sortAscSmallIcon:k.sortDescSmallIcon})),this.props.sort.length>1&&l.createElement("span",{key:2,className:"k-sort-icon"},l.createElement("span",{className:"k-sort-order"},r+1))]:null}render(){return this.serviceIndex=0,this.index=-1,this.props.columnsMap.map((r,s)=>this.props.pressHandler&&l.createElement(E.ColumnDraggable,{key:s,pressHandler:this.props.pressHandler,dragHandler:this.props.dragHandler,releaseHandler:this.props.releaseHandler,ariaRowIndex:s+1,dragClue:this.props.dragClue,headerRef:this.props.headerRef,containerRef:this.props.containerRef},this.cells(r))||l.createElement("tr",{key:s,className:"k-table-row",role:"row","aria-rowindex":s+1},this.cells(r)))}}y.registerForLocalization(R);exports.HeaderRow=R;

package/header/HeaderRow.mjs

@@ -9,27 +9,33 @@
 import * as o from "react";
 import { normalize as z } from "../interfaces/GridSortSettings.mjs";
 import { ColumnDraggable as H } from "../drag/ColumnDraggable.mjs";
-import { GridHeaderCell as v } from "./GridHeaderCell.mjs";
-import { Keys as w, classNames as x, IconWrap as D } from "@progress/kendo-react-common";
-import { ColumnResizer as E, HeaderThElement as I } from "@progress/kendo-react-data-tools";
+import { GridHeaderCell as I } from "./GridHeaderCell.mjs";
+import { Keys as m, classNames as w, IconWrap as D } from "@progress/kendo-react-common";
+import { ColumnResizer as E, HeaderThElement as v } from "@progress/kendo-react-data-tools";
 import { provideLocalizationService as M, registerForLocalization as N } from "@progress/kendo-react-intl";
-import { sortAriaLabel as f, messages as L } from "../messages/index.mjs";
-import { sortAscSmallIcon as A, sortDescSmallIcon as K } from "@progress/kendo-svg-icons";
-import { resolveCells as F } from "../utils/index.mjs";
-const P = {
+import { sortAriaLabel as g, messages as K } from "../messages/index.mjs";
+import { sortAscSmallIcon as L, sortDescSmallIcon as A } from "@progress/kendo-svg-icons";
+import { resolveCells as G } from "../utils/index.mjs";
+const F = {
   true: { asc: "desc", desc: "", "": "asc" },
   false: { asc: "desc", desc: "asc", "": "asc" }
-}, G = {
+}, P = {
   none: "none",
   asc: "ascending",
   desc: "descending"
 };
 class O extends o.Component {
   constructor(t) {
-    super(t), this.serviceIndex = 0, this.index = -1, this.cellKeyDown = (s, i) => {
-      s.isDefaultPrevented() || s.keyCode === w.enter && this.cellClick(s, i);
-    }, this.cells = (s) => s.map((i) => {
-      const e = this.props.columns[i], l = this.props.sortable && e.sortable, a = this.props.sort ? this.props.sort.findIndex((r) => r.field === e.field) : -1, p = a >= 0 && this.props.sort[a].dir || "none", n = e.columnMenu === null ? null : e.columnMenu || this.props.columnMenu, u = x({
+    super(t), this.serviceIndex = 0, this.index = -1, this.cellKeyDown = (s, l) => {
+      if (s.isDefaultPrevented())
+        return;
+      const { keyCode: e, metaKey: i, ctrlKey: a } = s;
+      if (this.props.sortable && l.sortable && s.keyCode === m.enter && this.cellClick(s, l), i && e === m.enter || a && e === m.space) {
+        const n = this.props.columns.findIndex((c) => c.field === l.field);
+        this.props.columnGroupChange && this.props.columnGroupChange(n, s);
+      }
+    }, this.cells = (s) => s.map((l) => {
+      const e = this.props.columns[l], i = this.props.sortable && e.sortable, a = this.props.sort ? this.props.sort.findIndex((r) => r.field === e.field) : -1, p = a >= 0 && this.props.sort[a].dir || "none", n = e.columnMenu === null ? null : e.columnMenu || this.props.columnMenu, c = w({
         "k-first": e.kFirst,
         "k-filterable": !!n,
         "k-table-th": !0,
@@ -38,20 +44,20 @@ class O extends o.Component {
         "k-sorted": this.props.sort && this.props.sort.some((r) => r.field === e.field)
       }, e.headerClassName);
       e.locked === !1 && (e.left = 0);
-      const g = e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, C = M(this).toLanguageString(f, L[f]), k = e.isAccessible ? {
-        ariaSort: G[p],
+      const C = e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {}, k = M(this).toLanguageString(g, K[g]), b = e.isAccessible ? {
+        ariaSort: P[p],
         role: "columnheader",
         ariaColumnIndex: e.ariaColumnIndex,
         ariaSelected: !1,
-        ariaDescription: l ? C : ""
+        ariaDescription: i ? k : ""
       } : {
         role: "presentation"
-      }, c = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, b = e.headerCell ? e.headerCell : v, R = /* @__PURE__ */ o.createElement(
-        b,
+      }, d = e.declarationIndex >= 0 ? ++this.index : --this.serviceIndex, y = e.headerCell ? e.headerCell : I, R = /* @__PURE__ */ o.createElement(
+        y,
         {
           key: 1,
           field: e.field,
-          onClick: l && ((r) => this.cellClick(r, e)) || void 0,
+          onClick: i && ((r) => this.cellClick(r, e)) || void 0,
           selectionChange: this.props.selectionChange,
           title: e.title,
           selectionValue: e.headerSelectionValue,
@@ -65,7 +71,7 @@ class O extends o.Component {
               filter: e.filter,
               id: e.id
             },
-            sortable: l && this.props.sortable,
+            sortable: i && this.props.sortable,
             sort: this.props.sort,
             onSortChange: this.props.sortChange,
             filter: this.props.filter,
@@ -78,46 +84,46 @@ class O extends o.Component {
             columnMenu: n
           }
         }
-      ), h = {
-        ...k,
-        key: c,
+      ), f = {
+        ...b,
+        key: d,
         colSpan: e.colSpan,
         rowSpan: e.rowSpan,
-        className: u,
-        style: g,
+        className: c,
+        style: C,
         columnId: e.id,
         navigatable: e.navigatable,
-        onKeyDown: l && ((r) => this.cellKeyDown(r, e)) || void 0,
+        onKeyDown: (r) => this.cellKeyDown(r, e),
         role: "columnheader"
-      }, m = [
+      }, u = [
         R,
         this.props.columnResize && this.props.columnResize.resizable && e.resizable && /* @__PURE__ */ o.createElement(
           E,
           {
             key: 2,
-            resize: (r, y, S) => this.props.columnResize && this.props.columnResize.dragHandler(r, e, y, S),
+            resize: (r, S, x) => this.props.columnResize && this.props.columnResize.dragHandler(r, e, S, x),
             autofit: (r) => this.props.columnResize && this.props.columnResize.dblClickHandler(r, [e.id])
           }
         )
-      ], d = F(this.props.cells, e.cells);
-      if (d && d.headerCell) {
-        const r = d.headerCell;
-        return /* @__PURE__ */ o.createElement(r, { key: c, thProps: h, index: i }, m);
+      ], h = G(this.props.cells, e.cells);
+      if (h && h.headerCell) {
+        const r = h.headerCell;
+        return /* @__PURE__ */ o.createElement(r, { key: d, thProps: f, index: l }, u);
       }
       return /* @__PURE__ */ o.createElement(
-        I,
+        v,
         {
-          ...h,
-          key: c
+          ...f,
+          key: d
         },
-        m
+        u
       );
     }), this.cellClick = this.cellClick.bind(this);
   }
   cellClick(t, s) {
     if (t.preventDefault(), !this.props.sortChange)
       return;
-    const { allowUnsort: i, mode: e } = z(this.props.sortable || !1, s.sortable || !1), l = (this.props.sort || []).filter((n) => n.field === s.field)[0], a = P[i][l && l.dir || ""], p = e === "single" ? [] : (this.props.sort || []).filter((n) => n.field !== s.field);
+    const { allowUnsort: l, mode: e } = z(this.props.sortable || !1, s.sortable || !1), i = (this.props.sort || []).filter((n) => n.field === s.field)[0], a = F[l][i && i.dir || ""], p = e === "single" ? [] : (this.props.sort || []).filter((n) => n.field !== s.field);
     a !== "" && s.field && p.push({ field: s.field, dir: a }), this.props.sortChange(p, t);
   }
   sortIcon(t) {
@@ -126,7 +132,7 @@ class O extends o.Component {
         D,
         {
           name: "sort-" + this.props.sort[t].dir + "-small",
-          icon: this.props.sort[t].dir === "asc" ? A : K
+          icon: this.props.sort[t].dir === "asc" ? L : A
         }
       )),
       this.props.sort.length > 1 && /* @__PURE__ */ o.createElement("span", { key: 2, className: "k-sort-icon" }, /* @__PURE__ */ o.createElement("span", { className: "k-sort-order" }, t + 1))

package/index.d.mts

@@ -460,6 +460,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private columnReorder;
     private groupReorder;
     private columnToGroup;
+    private columnGroupChange;
     private resetTableWidth;
     private onClipboard;
     private inActiveElement;
@@ -1391,6 +1392,7 @@ export declare class GridCommonDragLogic {
     private groupPanelDivElement;
     get dragClueRef(): React_2.RefObject<DragClue | null>;
     get dropClueRef(): React_2.RefObject<DropClue | null>;
+    get getCurrentGroupsLength(): number;
     private get dragElementClue();
     private get dropElementClue();
     constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);

package/index.d.ts

@@ -460,6 +460,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private columnReorder;
     private groupReorder;
     private columnToGroup;
+    private columnGroupChange;
     private resetTableWidth;
     private onClipboard;
     private inActiveElement;
@@ -1391,6 +1392,7 @@ export declare class GridCommonDragLogic {
     private groupPanelDivElement;
     get dragClueRef(): React_2.RefObject<DragClue | null>;
     get dropClueRef(): React_2.RefObject<DropClue | null>;
+    get getCurrentGroupsLength(): number;
     private get dragElementClue();
     private get dropElementClue();
     constructor(columnReorder: handler, groupReorder: handler, columnToGroup: handler);

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-grid",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1709742758,
+  publishDate: 1710249743,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-grid",
-  "version": "7.3.0-develop.2",
+  "version": "7.3.0-develop.4",
   "description": "React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -25,15 +25,15 @@
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.19.0",
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-animation": "7.3.0-develop.2",
-    "@progress/kendo-react-buttons": "7.3.0-develop.2",
-    "@progress/kendo-react-common": "7.3.0-develop.2",
-    "@progress/kendo-react-data-tools": "7.3.0-develop.2",
-    "@progress/kendo-react-dateinputs": "7.3.0-develop.2",
-    "@progress/kendo-react-dropdowns": "7.3.0-develop.2",
-    "@progress/kendo-react-inputs": "7.3.0-develop.2",
-    "@progress/kendo-react-intl": "7.3.0-develop.2",
-    "@progress/kendo-react-popup": "7.3.0-develop.2",
+    "@progress/kendo-react-animation": "7.3.0-develop.4",
+    "@progress/kendo-react-buttons": "7.3.0-develop.4",
+    "@progress/kendo-react-common": "7.3.0-develop.4",
+    "@progress/kendo-react-data-tools": "7.3.0-develop.4",
+    "@progress/kendo-react-dateinputs": "7.3.0-develop.4",
+    "@progress/kendo-react-dropdowns": "7.3.0-develop.4",
+    "@progress/kendo-react-inputs": "7.3.0-develop.4",
+    "@progress/kendo-react-intl": "7.3.0-develop.4",
+    "@progress/kendo-react-popup": "7.3.0-develop.4",
     "@progress/kendo-svg-icons": "^2.1.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"