@progress/kendo-react-grid 7.5.0-develop.9 → 8.0.0-develop.1

package/drag/GroupingIndicator.mjs

@@ -7,10 +7,10 @@
  */
 "use client";
 import * as s from "react";
-import { Draggable as n, IconWrap as o } from "@progress/kendo-react-common";
+import { Keys as o, Draggable as i, IconWrap as n } from "@progress/kendo-react-common";
 import { registerForLocalization as r } from "@progress/kendo-react-intl";
-import { sortAscSmallIcon as i, sortDescSmallIcon as a, xCircleIcon as l } from "@progress/kendo-svg-icons";
-class p extends s.Component {
+import { sortAscSmallIcon as a, sortDescSmallIcon as p, xCircleIcon as l } from "@progress/kendo-svg-icons";
+class c extends s.Component {
   constructor() {
     super(...arguments), this.draggable = null, this.onPress = (e) => {
       const t = this.draggable && this.draggable.element;
@@ -25,6 +25,8 @@ class p extends s.Component {
         const t = this.props.dir === "asc" ? "desc" : "asc";
         this.props.onSortChange(e, t);
       }
+    }, this.handleKeyDown = (e) => {
+      (e.keyCode === o.delete || e.keyCode === o.backspace) && (e.preventDefault(), e.stopPropagation(), this.props.onRemove && this.props.onRemove(e));
     }, this.groupRemove = (e) => {
       e.preventDefault(), e.stopPropagation(), this.props.onRemove && this.props.onRemove(e);
     }, this.onContextMenu = (e) => {
@@ -39,7 +41,7 @@ class p extends s.Component {
   render() {
     const { dir: e } = this.props;
     return /* @__PURE__ */ s.createElement(
-      n,
+      i,
       {
         onPress: this.onPress,
         onDrag: this.onDrag,
@@ -54,14 +56,16 @@ class p extends s.Component {
           className: "k-chip k-chip-md k-chip-solid k-chip-solid-base k-rounded-md",
           onClick: this.sortChange,
           onContextMenu: this.onContextMenu,
+          onKeyDown: this.handleKeyDown,
+          tabIndex: 0,
           role: "button",
           style: { touchAction: "none" }
         },
         /* @__PURE__ */ s.createElement("span", null, /* @__PURE__ */ s.createElement(
-          o,
+          n,
           {
             name: "sort-" + e + "-small",
-            icon: e === "asc" ? i : a,
+            icon: e === "asc" ? a : p,
             size: "small"
           }
         )),
@@ -73,7 +77,7 @@ class p extends s.Component {
             onClick: this.groupRemove
           },
           /* @__PURE__ */ s.createElement(
-            o,
+            n,
             {
               name: "x-circle",
               icon: l,
@@ -85,7 +89,7 @@ class p extends s.Component {
     );
   }
 }
-r(p);
+r(c);
 export {
-  p as GroupingIndicator
+  c as GroupingIndicator
 };

package/footer/FooterRow.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 c=require("react"),a=require("../utils/index.js"),d=require("@progress/kendo-react-common");function f(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const l=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,l.get?l:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const o=f(c);class p extends o.Component{constructor(){super(...arguments),this._element=null,this.renderCell=(e,t)=>{const l={colSpan:e.colSpan!==1?e.colSpan:void 0,style:e.left!==void 0?this.props.isRtl?{left:e.right,right:e.left}:{left:e.left,right:e.right}:{},className:d.classNames("k-table-td",e.locked&&e.left!==void 0?"k-grid-footer-sticky":""),key:t,role:"gridcell","aria-colindex":e.ariaColumnIndex},n={field:e.field,ariaColumnIndex:e.ariaColumnIndex,...l},s=a.resolveCells(this.props.cells,e.cells);if(s&&s.footerCell){const i=s.footerCell;return o.createElement(i,{...n,tdProps:l,index:t})}return e.footerCell&&o.createElement(e.footerCell,{...n,key:t})||o.createElement("td",{...l})}}get element(){return this._element}render(){return o.createElement("tr",{className:"k-table-row",role:"row","aria-rowindex":this.props.ariaRowIndex},a.footerColumns(this.props.columns).map(this.renderCell))}}exports.FooterRow=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),i=require("../utils/index.js"),b=require("@progress/kendo-react-common"),s=require("@progress/kendo-react-data-tools");function C(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const o in t)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(e,o,l.get?l:{enumerable:!0,get:()=>t[o]})}}return e.default=t,Object.freeze(e)}const r=C(g),y=t=>{const{column:e,index:o,isRtl:l,id:d,cells:u}=t,f=s.useTableKeyboardNavigation(d),n={colSpan:e.colSpan!==1?e.colSpan:void 0,style:e.left!==void 0?l?{left:e.right,right:e.left}:{left:e.left,right:e.right}:{},className:b.classNames("k-table-td",e.locked&&e.left!==void 0?"k-grid-footer-sticky":""),key:o,role:"gridcell","aria-colindex":e.ariaColumnIndex,...f},c={field:e.field,ariaColumnIndex:e.ariaColumnIndex,...n},a=i.resolveCells(u,e.cells);if(a&&a.footerCell){const m=a.footerCell;return r.createElement(m,{...c,tdProps:n,index:o})}return e.footerCell&&r.createElement(e.footerCell,{...c,key:o})||r.createElement("td",{...n})},k=t=>r.createElement("tr",{className:"k-table-row",role:"row","aria-rowindex":t.ariaRowIndex},i.footerColumns(t.columns).map((e,o)=>{const l=s.tableKeyboardNavigationTools.generateNavigatableId(`${o}-footercell`,t.idPrefix,"nodata");return r.createElement(y,{key:l,column:e,id:l,index:o,cells:t.cells,isRtl:t.isRtl})}));exports.FooterRow=k;

package/footer/FooterRow.mjs

@@ -6,41 +6,46 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
-import { resolveCells as i, footerColumns as n } from "../utils/index.mjs";
-import { classNames as p } from "@progress/kendo-react-common";
-class c extends t.Component {
-  constructor() {
-    super(...arguments), this._element = null, this.renderCell = (e, r) => {
-      const l = {
-        colSpan: e.colSpan !== 1 ? e.colSpan : void 0,
-        style: e.left !== void 0 ? this.props.isRtl ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {},
-        className: p(
-          "k-table-td",
-          e.locked && e.left !== void 0 ? "k-grid-footer-sticky" : ""
-        ),
-        key: r,
-        role: "gridcell",
-        "aria-colindex": e.ariaColumnIndex
-      }, o = {
-        field: e.field,
-        ariaColumnIndex: e.ariaColumnIndex,
-        ...l
-      }, s = i(this.props.cells, e.cells);
-      if (s && s.footerCell) {
-        const a = s.footerCell;
-        return /* @__PURE__ */ t.createElement(a, { ...o, tdProps: l, index: r });
-      }
-      return e.footerCell && /* @__PURE__ */ t.createElement(e.footerCell, { ...o, key: r }) || /* @__PURE__ */ t.createElement("td", { ...l });
-    };
+import * as o from "react";
+import { footerColumns as f, resolveCells as u } from "../utils/index.mjs";
+import { classNames as C } from "@progress/kendo-react-common";
+import { tableKeyboardNavigationTools as g, useTableKeyboardNavigation as b } from "@progress/kendo-react-data-tools";
+const k = (t) => {
+  const { column: e, index: l, isRtl: r, id: c, cells: s } = t, d = b(c), a = {
+    colSpan: e.colSpan !== 1 ? e.colSpan : void 0,
+    style: e.left !== void 0 ? r ? { left: e.right, right: e.left } : { left: e.left, right: e.right } : {},
+    className: C(
+      "k-table-td",
+      e.locked && e.left !== void 0 ? "k-grid-footer-sticky" : ""
+    ),
+    key: l,
+    role: "gridcell",
+    "aria-colindex": e.ariaColumnIndex,
+    ...d
+  }, n = {
+    field: e.field,
+    ariaColumnIndex: e.ariaColumnIndex,
+    ...a
+  }, i = u(s, e.cells);
+  if (i && i.footerCell) {
+    const m = i.footerCell;
+    return /* @__PURE__ */ o.createElement(m, { ...n, tdProps: a, index: l });
   }
-  get element() {
-    return this._element;
-  }
-  render() {
-    return /* @__PURE__ */ t.createElement("tr", { className: "k-table-row", role: "row", "aria-rowindex": this.props.ariaRowIndex }, n(this.props.columns).map(this.renderCell));
-  }
-}
+  return e.footerCell && /* @__PURE__ */ o.createElement(e.footerCell, { ...n, key: l }) || /* @__PURE__ */ o.createElement("td", { ...a });
+}, I = (t) => /* @__PURE__ */ o.createElement("tr", { className: "k-table-row", role: "row", "aria-rowindex": t.ariaRowIndex }, f(t.columns).map((e, l) => {
+  const r = g.generateNavigatableId(`${l}-footercell`, t.idPrefix, "nodata");
+  return /* @__PURE__ */ o.createElement(
+    k,
+    {
+      key: r,
+      column: e,
+      id: r,
+      index: l,
+      cells: t.cells,
+      isRtl: t.isRtl
+    }
+  );
+}));
 export {
-  c as FooterRow
+  I as FooterRow
 };

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 P=require("react"),j=require("../interfaces/GridSortSettings.js"),L=require("../drag/ColumnDraggable.js"),F=require("./GridHeaderCell.js"),f=require("@progress/kendo-react-common"),M=require("@progress/kendo-react-data-tools"),T=require("@progress/kendo-react-intl"),R=require("../messages/index.js"),E=require("@progress/kendo-svg-icons"),_=require("../utils/index.js");function V(e){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const c in e)if(c!=="default"){const g=Object.getOwnPropertyDescriptor(e,c);Object.defineProperty(m,c,g.get?g:{enumerable:!0,get:()=>e[c]})}}return m.default=e,Object.freeze(m)}const r=V(P),W={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},$={none:"none",asc:"ascending",desc:"descending"},B=e=>{const[m,c]=r.useState(),g=T.useLocalization(),b=r.useRef(null);let q=0,v=-1;const S=(l,n)=>{if(l.preventDefault(),!e.sortChange)return;const{allowUnsort:t,mode:s}=j.normalize(e.sortable||!1,n.sortable||!1),o=(e.sort||[]).filter(i=>i.field===n.field)[0],u=W[t][o&&o.dir||""],d=s==="single"?[]:(e.sort||[]).filter(i=>i.field!==n.field);u!==""&&n.field&&d.push({field:n.field,dir:u}),e.sortChange(d,l)},x=(l,n)=>{if(l.isDefaultPrevented())return;const{keyCode:t,metaKey:s,ctrlKey:o,altKey:u}=l,d=e.sortable&&n.sortable,i=l.target;if(d&&l.keyCode===f.Keys.enter&&i.className.indexOf("k-table-th")!==-1&&S(l,n),e.navigatable){if(e.groupable&&(s&&t===f.Keys.enter||o&&t===f.Keys.space)){l.preventDefault();const C=e.columns.findIndex(h=>h.field===n.field);e.columnGroupChange&&e.columnGroupChange(C,l)}u&&t===f.Keys.down&&(l.preventDefault(),c(n.field),b.current=i)}},I=()=>{c(void 0),b.current&&b.current.getAttribute("tabindex")!=="-1"&&b.current.focus()},K=l=>e.sort?l>=0&&[r.createElement("span",{key:1,className:"k-sort-icon"},r.createElement(f.IconWrap,{name:"sort-"+e.sort[l].dir+"-small",icon:e.sort[l].dir==="asc"?E.sortAscSmallIcon:E.sortDescSmallIcon})),e.sort.length>1&&r.createElement("span",{key:2,className:"k-sort-icon"},r.createElement("span",{className:"k-sort-order"},l+1))]:null,w=l=>l.map(n=>{const t=e.columns[n],s=e.sortable&&t.sortable,o=e.sort?e.sort.findIndex(a=>a.field===t.field):-1,u=o>=0&&e.sort[o].dir||"none",d=t.columnMenu===null?null:t.columnMenu||e.columnMenu,i=f.classNames({"k-first":t.kFirst,"k-filterable":!!d,"k-table-th":!0,"k-header":!0,"k-grid-header-sticky":t.locked,"k-sorted":e.sort&&e.sort.some(a=>a.field===t.field)},t.headerClassName);t.locked===!1&&(t.left=0);const C=t.left!==void 0?e.isRtl?{left:t.right,right:t.left}:{left:t.left,right:t.right}:{},h=g.toLanguageString(R.sortAriaLabel,R.messages[R.sortAriaLabel]),N=t.isAccessible?{ariaSort:$[u],role:"columnheader",ariaColumnIndex:t.ariaColumnIndex,ariaSelected:!1,ariaDescription:s?h:""}:{role:"presentation"},k=t.declarationIndex>=0?++v:--q,O=t.headerCell?t.headerCell:F.GridHeaderCell,D=r.createElement(O,{key:1,field:t.field,onClick:s&&(a=>S(a,t))||void 0,selectionChange:e.selectionChange,title:t.title,selectionValue:t.headerSelectionValue,render:e.cellRender,children:K(o),columnMenuWrapperProps:{column:{field:t.field,title:t.title,locked:t.locked,filter:t.filter,id:t.id},sortable:s&&e.sortable,sort:e.sort,onSortChange:e.sortChange,filter:e.filter,filterable:e.filterable&&t.filterable,filterOperators:e.filterOperators,onFilterChange:e.filterChange,show:m===t.field?!0:void 0,onCloseMenu:I,navigatable:e.navigatable,group:e.group,groupable:e.groupable,onGroupChange:e.groupChange,columnMenu:d}}),H={...N,key:k,colSpan:t.colSpan,rowSpan:t.rowSpan,className:i,style:C,columnId:t.id,navigatable:t.navigatable,onKeyDown:a=>x(a,t),role:"columnheader"},z=[D,e.columnResize&&e.columnResize.resizable&&t.resizable&&r.createElement(M.ColumnResizer,{key:2,resize:(a,A,G)=>e.columnResize&&e.columnResize.dragHandler(a,t,A,G),autofit:a=>e.columnResize&&e.columnResize.dblClickHandler(a,[t.id])})],y=_.resolveCells(e.cells,t.cells);if(y&&y.headerCell){const a=y.headerCell;return r.createElement(a,{...D.props,key:k,thProps:H,index:n},z)}return r.createElement(M.HeaderThElement,{...H,key:k},z)});return e.columnsMap.map((l,n)=>e.pressHandler&&r.createElement(L.ColumnDraggable,{key:n,pressHandler:e.pressHandler,dragHandler:e.dragHandler,releaseHandler:e.releaseHandler,ariaRowIndex:n+1,dragClue:e.dragClue,headerRef:e.headerRef,containerRef:e.containerRef},w(l))||r.createElement("tr",{key:n,className:"k-table-row",role:"row","aria-rowindex":n+1},w(l)))};exports.HeaderRow=B;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const j=require("react"),L=require("../interfaces/GridSortSettings.js"),F=require("../drag/ColumnDraggable.js"),T=require("./GridHeaderCell.js"),f=require("@progress/kendo-react-common"),z=require("@progress/kendo-react-data-tools"),_=require("@progress/kendo-react-intl"),R=require("../messages/index.js"),I=require("@progress/kendo-svg-icons"),V=require("../utils/index.js");function W(e){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const g=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(m,i,g.get?g:{enumerable:!0,get:()=>e[i]})}}return m.default=e,Object.freeze(m)}const r=W(j),$={true:{asc:"desc",desc:"","":"asc"},false:{asc:"desc",desc:"asc","":"asc"}},B={none:"none",asc:"ascending",desc:"descending"},U=e=>{const[m,i]=r.useState(),g=_.useLocalization(),b=r.useRef(null);let E=0,q=-1;const S=(l,n)=>{if(l.preventDefault(),!e.sortChange)return;const{allowUnsort:t,mode:s}=L.normalize(e.sortable||!1,n.sortable||!1),o=(e.sort||[]).filter(c=>c.field===n.field)[0],u=$[t][o&&o.dir||""],d=s==="single"?[]:(e.sort||[]).filter(c=>c.field!==n.field);u!==""&&n.field&&d.push({field:n.field,dir:u}),e.sortChange(d,l)},v=(l,n)=>{if(l.isDefaultPrevented())return;const{keyCode:t,metaKey:s,ctrlKey:o,altKey:u}=l,d=e.sortable&&n.sortable,c=l.target;if(d&&l.keyCode===f.Keys.enter&&c.className.indexOf("k-table-th")!==-1&&S(l,n),e.navigatable){if(e.groupable&&(s&&t===f.Keys.enter||o&&t===f.Keys.space)){l.preventDefault();const C=e.columns.findIndex(h=>h.field===n.field);e.columnGroupChange&&e.columnGroupChange(C,l)}u&&t===f.Keys.down&&(l.preventDefault(),i(n.field),b.current=c)}},x=()=>{i(void 0),b.current&&b.current.getAttribute("tabindex")!=="-1"&&b.current.focus()},K=l=>e.sort?l>=0&&[r.createElement("span",{key:1,className:"k-sort-icon"},r.createElement(f.IconWrap,{name:"sort-"+e.sort[l].dir+"-small",icon:e.sort[l].dir==="asc"?I.sortAscSmallIcon:I.sortDescSmallIcon})),e.sort.length>1&&r.createElement("span",{key:2,className:"k-sort-icon"},r.createElement("span",{className:"k-sort-order"},l+1))]:null,w=l=>l.map(n=>{const t=e.columns[n],s=e.sortable&&t.sortable,o=e.sort?e.sort.findIndex(a=>a.field===t.field):-1,u=o>=0&&e.sort[o].dir||"none",d=t.columnMenu===null?null:t.columnMenu||e.columnMenu,c=t.menuIcon||e.columnMenuIcon,C=f.classNames({"k-first":t.kFirst,"k-filterable":!!d,"k-table-th":!0,"k-header":!0,"k-grid-header-sticky":t.locked,"k-sorted":e.sort&&e.sort.some(a=>a.field===t.field)},t.headerClassName);t.locked===!1&&(t.left=0);const h=t.left!==void 0?e.isRtl?{left:t.right,right:t.left}:{left:t.left,right:t.right}:{},N=g.toLanguageString(R.sortAriaLabel,R.messages[R.sortAriaLabel]),O=t.isAccessible?{ariaSort:B[u],role:"columnheader",ariaColumnIndex:t.ariaColumnIndex,ariaSelected:!1,ariaDescription:s?N:""}:{role:"presentation"},k=t.declarationIndex>=0?++q:--E,A=t.headerCell?t.headerCell:T.GridHeaderCell,D=r.createElement(A,{key:1,field:t.field,onClick:s&&(a=>S(a,t))||void 0,selectionChange:e.selectionChange,title:t.title,selectionValue:t.headerSelectionValue,render:e.cellRender,children:K(o),columnMenuWrapperProps:{column:{field:t.field,title:t.title,locked:t.locked,filter:t.filter,id:t.id},sortable:s&&e.sortable,sort:e.sort,onSortChange:e.sortChange,filter:e.filter,filterable:e.filterable&&t.filterable,filterOperators:e.filterOperators,onFilterChange:e.filterChange,show:m===t.field?!0:void 0,onCloseMenu:x,navigatable:e.navigatable,group:e.group,groupable:e.groupable,onGroupChange:e.groupChange,columnMenu:d,columnMenuIcon:c}}),M={...O,key:k,colSpan:t.colSpan,rowSpan:t.rowSpan,className:C,style:h,columnId:t.id,navigatable:t.navigatable,onKeyDown:a=>v(a,t),role:"columnheader"},H=[D,e.columnResize&&e.columnResize.resizable&&t.resizable&&r.createElement(z.ColumnResizer,{key:2,resize:(a,G,P)=>e.columnResize&&e.columnResize.dragHandler(a,t,G,P),autofit:a=>e.columnResize&&e.columnResize.dblClickHandler(a,[t.id])})],y=V.resolveCells(e.cells,t.cells);if(y&&y.headerCell){const a=y.headerCell;return r.createElement(a,{...D.props,key:k,thProps:M,index:n},H)}return r.createElement(z.HeaderThElement,{...M,key:k},H)});return e.columnsMap.map((l,n)=>e.pressHandler&&r.createElement(F.ColumnDraggable,{key:n,pressHandler:e.pressHandler,dragHandler:e.dragHandler,releaseHandler:e.releaseHandler,ariaRowIndex:n+1,dragClue:e.dragClue,headerRef:e.headerRef,containerRef:e.containerRef},w(l))||r.createElement("tr",{key:n,className:"k-table-row",role:"row","aria-rowindex":n+1},w(l)))};exports.HeaderRow=U;

package/header/HeaderRow.mjs

@@ -7,77 +7,77 @@
  */
 "use client";
 import * as r from "react";
-import { normalize as G } from "../interfaces/GridSortSettings.mjs";
-import { ColumnDraggable as L } from "../drag/ColumnDraggable.mjs";
-import { GridHeaderCell as O } from "./GridHeaderCell.mjs";
-import { classNames as P, Keys as u, IconWrap as V } from "@progress/kendo-react-common";
-import { ColumnResizer as W, HeaderThElement as q } from "@progress/kendo-react-data-tools";
-import { useLocalization as B } from "@progress/kendo-react-intl";
-import { sortAriaLabel as z, messages as T } from "../messages/index.mjs";
-import { sortAscSmallIcon as U, sortDescSmallIcon as j } from "@progress/kendo-svg-icons";
-import { resolveCells as J } from "../utils/index.mjs";
-const Q = {
+import { normalize as L } from "../interfaces/GridSortSettings.mjs";
+import { ColumnDraggable as O } from "../drag/ColumnDraggable.mjs";
+import { GridHeaderCell as P } from "./GridHeaderCell.mjs";
+import { classNames as V, Keys as f, IconWrap as W } from "@progress/kendo-react-common";
+import { ColumnResizer as q, HeaderThElement as B } from "@progress/kendo-react-data-tools";
+import { useLocalization as T } from "@progress/kendo-react-intl";
+import { sortAriaLabel as M, messages as U } from "../messages/index.mjs";
+import { sortAscSmallIcon as j, sortDescSmallIcon as J } from "@progress/kendo-svg-icons";
+import { resolveCells as Q } from "../utils/index.mjs";
+const X = {
   true: { asc: "desc", desc: "", "": "asc" },
   false: { asc: "desc", desc: "asc", "": "asc" }
-}, X = {
+}, Y = {
   none: "none",
   asc: "ascending",
   desc: "descending"
-}, ne = (e) => {
-  const [H, b] = r.useState(), D = B(), f = r.useRef(null);
-  let E = 0, M = -1;
-  const k = (t, a) => {
+}, re = (e) => {
+  const [z, b] = r.useState(), H = T(), u = r.useRef(null);
+  let D = 0, E = -1;
+  const k = (t, n) => {
     if (t.preventDefault(), !e.sortChange)
       return;
-    const { allowUnsort: l, mode: c } = G(e.sortable || !1, a.sortable || !1), o = (e.sort || []).filter((i) => i.field === a.field)[0], d = Q[l][o && o.dir || ""], s = c === "single" ? [] : (e.sort || []).filter((i) => i.field !== a.field);
-    d !== "" && a.field && s.push({ field: a.field, dir: d }), e.sortChange(s, t);
-  }, x = (t, a) => {
+    const { allowUnsort: l, mode: c } = L(e.sortable || !1, n.sortable || !1), o = (e.sort || []).filter((i) => i.field === n.field)[0], d = X[l][o && o.dir || ""], s = c === "single" ? [] : (e.sort || []).filter((i) => i.field !== n.field);
+    d !== "" && n.field && s.push({ field: n.field, dir: d }), e.sortChange(s, t);
+  }, I = (t, n) => {
     if (t.isDefaultPrevented())
       return;
-    const { keyCode: l, metaKey: c, ctrlKey: o, altKey: d } = t, s = e.sortable && a.sortable, i = t.target;
-    if (s && t.keyCode === u.enter && i.className.indexOf("k-table-th") !== -1 && k(t, a), e.navigatable) {
-      if (e.groupable && (c && l === u.enter || o && l === u.space)) {
+    const { keyCode: l, metaKey: c, ctrlKey: o, altKey: d } = t, s = e.sortable && n.sortable, i = t.target;
+    if (s && t.keyCode === f.enter && i.className.indexOf("k-table-th") !== -1 && k(t, n), e.navigatable) {
+      if (e.groupable && (c && l === f.enter || o && l === f.space)) {
         t.preventDefault();
-        const m = e.columns.findIndex((g) => g.field === a.field);
+        const m = e.columns.findIndex((g) => g.field === n.field);
         e.columnGroupChange && e.columnGroupChange(m, t);
       }
-      d && l === u.down && (t.preventDefault(), b(a.field), f.current = i);
+      d && l === f.down && (t.preventDefault(), b(n.field), u.current = i);
     }
-  }, I = () => {
-    b(void 0), f.current && f.current.getAttribute("tabindex") !== "-1" && f.current.focus();
+  }, x = () => {
+    b(void 0), u.current && u.current.getAttribute("tabindex") !== "-1" && u.current.focus();
   }, v = (t) => e.sort ? t >= 0 && [
     /* @__PURE__ */ r.createElement("span", { key: 1, className: "k-sort-icon" }, /* @__PURE__ */ r.createElement(
-      V,
+      W,
       {
         name: "sort-" + e.sort[t].dir + "-small",
-        icon: e.sort[t].dir === "asc" ? U : j
+        icon: e.sort[t].dir === "asc" ? j : J
       }
     )),
     e.sort.length > 1 && /* @__PURE__ */ r.createElement("span", { key: 2, className: "k-sort-icon" }, /* @__PURE__ */ r.createElement("span", { className: "k-sort-order" }, t + 1))
-  ] : null, y = (t) => t.map((a) => {
-    const l = e.columns[a], c = e.sortable && l.sortable, o = e.sort ? e.sort.findIndex((n) => n.field === l.field) : -1, d = o >= 0 && e.sort[o].dir || "none", s = l.columnMenu === null ? null : l.columnMenu || e.columnMenu, i = P({
+  ] : null, y = (t) => t.map((n) => {
+    const l = e.columns[n], c = e.sortable && l.sortable, o = e.sort ? e.sort.findIndex((a) => a.field === l.field) : -1, d = o >= 0 && e.sort[o].dir || "none", s = l.columnMenu === null ? null : l.columnMenu || e.columnMenu, i = l.menuIcon || e.columnMenuIcon, m = V({
       "k-first": l.kFirst,
       "k-filterable": !!s,
       "k-table-th": !0,
       "k-header": !0,
       "k-grid-header-sticky": l.locked,
-      "k-sorted": e.sort && e.sort.some((n) => n.field === l.field)
+      "k-sorted": e.sort && e.sort.some((a) => a.field === l.field)
     }, l.headerClassName);
     l.locked === !1 && (l.left = 0);
-    const m = l.left !== void 0 ? e.isRtl ? { left: l.right, right: l.left } : { left: l.left, right: l.right } : {}, g = D.toLanguageString(z, T[z]), N = l.isAccessible ? {
-      ariaSort: X[d],
+    const g = l.left !== void 0 ? e.isRtl ? { left: l.right, right: l.left } : { left: l.left, right: l.right } : {}, N = H.toLanguageString(M, U[M]), K = l.isAccessible ? {
+      ariaSort: Y[d],
       role: "columnheader",
       ariaColumnIndex: l.ariaColumnIndex,
       ariaSelected: !1,
-      ariaDescription: c ? g : ""
+      ariaDescription: c ? N : ""
     } : {
       role: "presentation"
-    }, h = l.declarationIndex >= 0 ? ++M : --E, K = l.headerCell ? l.headerCell : O, R = /* @__PURE__ */ r.createElement(
-      K,
+    }, h = l.declarationIndex >= 0 ? ++E : --D, A = l.headerCell ? l.headerCell : P, R = /* @__PURE__ */ r.createElement(
+      A,
       {
         key: 1,
         field: l.field,
-        onClick: c && ((n) => k(n, l)) || void 0,
+        onClick: c && ((a) => k(a, l)) || void 0,
         selectionChange: e.selectionChange,
         title: l.title,
         selectionValue: l.headerSelectionValue,
@@ -98,43 +98,44 @@ const Q = {
           filterable: e.filterable && l.filterable,
           filterOperators: e.filterOperators,
           onFilterChange: e.filterChange,
-          show: H === l.field ? !0 : void 0,
-          onCloseMenu: I,
+          show: z === l.field ? !0 : void 0,
+          onCloseMenu: x,
           navigatable: e.navigatable,
           group: e.group,
           groupable: e.groupable,
           onGroupChange: e.groupChange,
-          columnMenu: s
+          columnMenu: s,
+          columnMenuIcon: i
         }
       }
     ), S = {
-      ...N,
+      ...K,
       key: h,
       colSpan: l.colSpan,
       rowSpan: l.rowSpan,
-      className: i,
-      style: m,
+      className: m,
+      style: g,
       columnId: l.id,
       navigatable: l.navigatable,
-      onKeyDown: (n) => x(n, l),
+      onKeyDown: (a) => I(a, l),
       role: "columnheader"
     }, w = [
       R,
       e.columnResize && e.columnResize.resizable && l.resizable && /* @__PURE__ */ r.createElement(
-        W,
+        q,
         {
           key: 2,
-          resize: (n, A, F) => e.columnResize && e.columnResize.dragHandler(n, l, A, F),
-          autofit: (n) => e.columnResize && e.columnResize.dblClickHandler(n, [l.id])
+          resize: (a, F, G) => e.columnResize && e.columnResize.dragHandler(a, l, F, G),
+          autofit: (a) => e.columnResize && e.columnResize.dblClickHandler(a, [l.id])
         }
       )
-    ], C = J(e.cells, l.cells);
+    ], C = Q(e.cells, l.cells);
     if (C && C.headerCell) {
-      const n = C.headerCell;
-      return /* @__PURE__ */ r.createElement(n, { ...R.props, key: h, thProps: S, index: a }, w);
+      const a = C.headerCell;
+      return /* @__PURE__ */ r.createElement(a, { ...R.props, key: h, thProps: S, index: n }, w);
     }
     return /* @__PURE__ */ r.createElement(
-      q,
+      B,
       {
         ...S,
         key: h
@@ -142,21 +143,21 @@ const Q = {
       w
     );
   });
-  return e.columnsMap.map((t, a) => e.pressHandler && /* @__PURE__ */ r.createElement(
-    L,
+  return e.columnsMap.map((t, n) => e.pressHandler && /* @__PURE__ */ r.createElement(
+    O,
     {
-      key: a,
+      key: n,
       pressHandler: e.pressHandler,
       dragHandler: e.dragHandler,
       releaseHandler: e.releaseHandler,
-      ariaRowIndex: a + 1,
+      ariaRowIndex: n + 1,
       dragClue: e.dragClue,
       headerRef: e.headerRef,
       containerRef: e.containerRef
     },
     y(t)
-  ) || /* @__PURE__ */ r.createElement("tr", { key: a, className: "k-table-row", role: "row", "aria-rowindex": a + 1 }, y(t)));
+  ) || /* @__PURE__ */ r.createElement("tr", { key: n, className: "k-table-row", role: "row", "aria-rowindex": n + 1 }, y(t)));
 };
 export {
-  ne as HeaderRow
+  re as HeaderRow
 };

package/index.d.mts

@@ -36,6 +36,7 @@ import { SortDescriptor } from '@progress/kendo-data-query';
 import { SortSettings } from '@progress/kendo-react-data-tools';
 import { State } from '@progress/kendo-data-query';
 import { SVGIcon } from '@progress/kendo-react-common';
+import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
 import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools';
 import { TableDragSelectionReleaseEvent } from '@progress/kendo-react-data-tools';
 import { TableKeyboardNavigationContextType } from '@progress/kendo-react-data-tools';
@@ -327,6 +328,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private _columnsMap;
     private _columnsMutations;
     private _resized;
+    private _focusFirst;
     private _shouldUpdateLeftRight;
     private contextStateRef;
     private navigationStateRef;
@@ -391,6 +393,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private forceUpdateTimeout;
     private isRtl;
     private rowIndex;
+    private headTable;
     private get _header();
     private get _gridId();
     private observer;
@@ -446,6 +449,9 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private onHeaderSelectionChange;
     private selectionRelease;
     private pageChange;
+    private getTotal;
+    private moveToNextPage;
+    private moveToPrevPage;
     private pagerPageChange;
     private sortChange;
     private filterChange;
@@ -472,6 +478,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private getDataState;
     private getArguments;
     private getLeafDataItems;
+    private getSlicedLeafDataItems;
 }
 
 /**
@@ -1188,6 +1195,10 @@ export declare interface GridColumnMenuWrapperProps extends GridColumnMenuProps
      * The component to be rendered as content of the Grid column menu.
      */
     columnMenu?: React_2.ComponentType<GridColumnMenuProps> | null;
+    /**
+     * The icon that overrides the default(three vertical dots) icon displayed in the column menu of each column.
+     */
+    columnMenuIcon?: SVGIcon;
 }
 
 /**
@@ -1238,6 +1249,10 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
      * Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})). Defaults to `text`.
      */
     editor?: 'text' | 'numeric' | 'boolean' | 'date';
+    /**
+     * Overrides the default(three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property.
+     */
+    menuIcon?: SVGIcon;
     /**
      * Defines the component that will be rendered as a cell. If not set, a `GridCell` will be rendered by default.
      */
@@ -2059,6 +2074,10 @@ export declare interface GridPagerSettings {
      * Defines if the pager will be responsive. Defaults to `true`.
      */
     responsive?: boolean;
+    /**
+     * Defines if the pager will be navigatable.
+     */
+    navigatable?: boolean;
 }
 
 /**
@@ -2141,6 +2160,10 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level.
      */
     columnMenu?: null | ComponentType<GridColumnMenuProps>;
+    /**
+     * Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the ([menuIcon]({% slug api_grid_gridcolumnprops %}#toc-menuicon)) property.
+     */
+    columnMenuIcon?: SVGIcon_2;
     /**
      * The [descriptors]({% slug api_kendo-data-query_groupdescriptor %})[] by which the data will be grouped
      * ([more information and examples]({% slug groupingbasics_grid %})).
@@ -2160,6 +2183,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * - `type: PagerType`&mdash;Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values.
      * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size.
      * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons.
+     * - `navigatable: Boolean`&mdash;Defines if the pager will be navigatable.
      */
     pageable?: GridPagerSettings | boolean;
     /**
@@ -2483,6 +2507,14 @@ export declare const GridSelectionCell: (props: GridCellProps) => JSX_2.Element
  * Represents the object of the `onSelectionChange` Grid event.
  */
 export declare interface GridSelectionChangeEvent extends GridEvent, TableSelectionChangeEvent<GridClassComponent> {
+    /**
+     * The dataItem from which the selection starts(Valid for scenarios without checkbox selection).
+     */
+    startDataItem?: any;
+    /**
+     * The dataItem to which the selection ends(Valid for scenarios without checkbox selection)
+     */
+    endDataItem?: any;
 }
 
 /**

package/index.d.ts

@@ -36,6 +36,7 @@ import { SortDescriptor } from '@progress/kendo-data-query';
 import { SortSettings } from '@progress/kendo-react-data-tools';
 import { State } from '@progress/kendo-data-query';
 import { SVGIcon } from '@progress/kendo-react-common';
+import { SVGIcon as SVGIcon_2 } from '@progress/kendo-svg-icons';
 import { TABLE_COL_INDEX_ATTRIBUTE } from '@progress/kendo-react-data-tools';
 import { TableDragSelectionReleaseEvent } from '@progress/kendo-react-data-tools';
 import { TableKeyboardNavigationContextType } from '@progress/kendo-react-data-tools';
@@ -327,6 +328,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private _columnsMap;
     private _columnsMutations;
     private _resized;
+    private _focusFirst;
     private _shouldUpdateLeftRight;
     private contextStateRef;
     private navigationStateRef;
@@ -391,6 +393,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private forceUpdateTimeout;
     private isRtl;
     private rowIndex;
+    private headTable;
     private get _header();
     private get _gridId();
     private observer;
@@ -446,6 +449,9 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private onHeaderSelectionChange;
     private selectionRelease;
     private pageChange;
+    private getTotal;
+    private moveToNextPage;
+    private moveToPrevPage;
     private pagerPageChange;
     private sortChange;
     private filterChange;
@@ -472,6 +478,7 @@ export declare class GridClassComponent extends React_2.Component<GridProps> {
     private getDataState;
     private getArguments;
     private getLeafDataItems;
+    private getSlicedLeafDataItems;
 }
 
 /**
@@ -1188,6 +1195,10 @@ export declare interface GridColumnMenuWrapperProps extends GridColumnMenuProps
      * The component to be rendered as content of the Grid column menu.
      */
     columnMenu?: React_2.ComponentType<GridColumnMenuProps> | null;
+    /**
+     * The icon that overrides the default(three vertical dots) icon displayed in the column menu of each column.
+     */
+    columnMenuIcon?: SVGIcon;
 }
 
 /**
@@ -1238,6 +1249,10 @@ export declare interface GridColumnProps extends Omit<ColumnBaseProps, 'cell'> {
      * Defines the editor type. Used when the column enters the edit mode ([more information and examples]({% slug editing_inline_grid %})). Defaults to `text`.
      */
     editor?: 'text' | 'numeric' | 'boolean' | 'date';
+    /**
+     * Overrides the default(three vertical dots) column menu icon or the icon set through the ([`columnMenuIcon`]({% slug api_grid_gridprops %}#toc-columnmenuicon)) property.
+     */
+    menuIcon?: SVGIcon;
     /**
      * Defines the component that will be rendered as a cell. If not set, a `GridCell` will be rendered by default.
      */
@@ -2059,6 +2074,10 @@ export declare interface GridPagerSettings {
      * Defines if the pager will be responsive. Defaults to `true`.
      */
     responsive?: boolean;
+    /**
+     * Defines if the pager will be navigatable.
+     */
+    navigatable?: boolean;
 }
 
 /**
@@ -2141,6 +2160,10 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * Specifies a React element that will be cloned and rendered inside the column menu of the Grid. Can be overridden on column level.
      */
     columnMenu?: null | ComponentType<GridColumnMenuProps>;
+    /**
+     * Globally overrides the default(three vertical dots) column menu icon for the whole Grid. If set, the prop can be overridden on column level using the ([menuIcon]({% slug api_grid_gridcolumnprops %}#toc-menuicon)) property.
+     */
+    columnMenuIcon?: SVGIcon_2;
     /**
      * The [descriptors]({% slug api_kendo-data-query_groupdescriptor %})[] by which the data will be grouped
      * ([more information and examples]({% slug groupingbasics_grid %})).
@@ -2160,6 +2183,7 @@ export declare interface GridProps extends KendoReactComponentBaseProps {
      * - `type: PagerType`&mdash;Accepts the `numeric` (buttons with numbers) and `input` (input for typing the page number) values.
      * - `pageSizes: Boolean` or `Array<number>`&mdash;Shows a menu for selecting the page size.
      * - `previousNext: Boolean`&mdash;Toggles the **Previous** and **Next** buttons.
+     * - `navigatable: Boolean`&mdash;Defines if the pager will be navigatable.
      */
     pageable?: GridPagerSettings | boolean;
     /**
@@ -2483,6 +2507,14 @@ export declare const GridSelectionCell: (props: GridCellProps) => JSX_2.Element
  * Represents the object of the `onSelectionChange` Grid event.
  */
 export declare interface GridSelectionChangeEvent extends GridEvent, TableSelectionChangeEvent<GridClassComponent> {
+    /**
+     * The dataItem from which the selection starts(Valid for scenarios without checkbox selection).
+     */
+    startDataItem?: any;
+    /**
+     * The dataItem to which the selection ends(Valid for scenarios without checkbox selection)
+     */
+    endDataItem?: any;
 }
 
 /**

package/package-metadata.mjs

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