@progress/kendo-react-grid 16.2.0-develop.6 → 16.2.0-develop.8

package/drag/ColumnResize.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../utils/index.js"),W=1,x=20;class S{constructor(a){this.columns=[],this.columnsState=[],this.resizable=!1,this.isRtl=!1,this.setIsRtl=c=>{this.isRtl=c},this.initWidths=()=>{var l;const c=((l=this.colGroupMain)==null?void 0:l.children)||[],o=p.getFlatColumnsState(this.columnsState),n=this.columns.filter(e=>{var r;return!((r=e.children)!=null&&r.length)});for(let e=0;e<c.length;e++){const r=n[e];let t="";const i=o.find(d=>d.id===n[e].id);i&&(t=this.applyWidthConstraints(i,r)),this.colGroups.forEach(d=>{d.children[e].width=t})}},this.dragHandler=(c,o,n,l)=>{const e=c.originalEvent;l||(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation());const r=n.closest("th");if(!r)return;const t=r.clientWidth;let i=t;if(this.isRtl?i+=n.getBoundingClientRect().right-n.offsetWidth/2-c.clientX:i+=c.clientX-n.getBoundingClientRect().left-n.offsetWidth/2,!l&&Math.abs(i-t)<1)return;this.fixateInitialWidths(r.parentElement.clientWidth),this.setWidths(o,Math.floor(i)/t);const d=this.columns.filter(s=>!s.children.length).findIndex(s=>s.id===o.id);this.onResize(d,t,i,e,l,this.columnsState,o.id)},this.dblClickHandler=(c,o)=>{const n=this.columns.filter(h=>o.indexOf(h.id)>-1),l=p.getFlatColumnsState(this.columnsState);if(!this.colGroupMain||!n.length)return;const e={},r=n;for(;r.length>0;){const h=r.pop();if(!h)break;h.children.length?r.push(...h.children):e[h.id]=h}const t=this.columns.filter(h=>!h.children.length),i=[];t.forEach((h,u)=>{e[h.id]&&i.push(u)});const d=this.colGroups,s=d.map(h=>h.parentElement);s.forEach(h=>h.classList.add("k-autofitting"));const f=[];d.forEach(h=>{i.forEach(u=>{h.children[u]&&(h.children[u].width="",f[u]=Math.max(f[u]||0,h.children[u].offsetWidth+W))})}),d.forEach(h=>{i.forEach(u=>{if(h.children[u]){h.children[u].width=f[u]+"px";const g=l.find(m=>m.id===t[u].id);g&&(g.width=f[u])}})}),s.forEach(h=>h.classList.remove("k-autofitting")),this.onResize(i[0],0,0,c,!0,this.columnsState,o[0])},this.updateColElements=c=>{const o=this.columns.filter(l=>!l.hidden&&!l.children.length);let n=1e-10;for(let l=0;l<c.length;l++){const e=c[l],r=o.findIndex(f=>f.id===e.id),t=parseFloat((e.width||0).toString()),i=Math.floor(t);n+=t-i;const d=i+Math.floor(n);n-=Math.floor(n);const s=o.find(f=>f.id===e.id);if(!s)return;this.colGroups.forEach(f=>{if(f.children[r]){const h=parseInt(f.children[r].width,10);f.children[r].width=d+"px",this.updateNextLockedCol(f.parentElement,s,h-d)}})}},this.onResize=a}get colGroups(){return[this.colGroupMain,this.colGroupHeader,this.colGroupFooter,this.colGroupStickyHeader,this.colGroupStickyFooter,this.colGroupPinnedTop,this.colGroupPinnedBottom].filter(Boolean)}applyWidthConstraints(a,c,o=1){if(!a.width)return a.width||"";const n=a.width.toString();if(n.includes("%")){const f=parseFloat(n)*o,h=Math.max(0,Math.min(100,f));return a.width=h+"%",a.width}let e=parseFloat(n)*o;const r=c.minResizableWidth===void 0?10:c.minResizableWidth,t=c.minWidth,i=t!==void 0?Math.max(r,t):r,d=c.maxWidth;return e<i&&(e=i),d!==void 0&&e>d&&(e=d),a.width=e,e}fixateInitialWidths(a){var r;let c=0;const o=((r=this.colGroupMain)==null?void 0:r.children)||[];for(let t=0;t<o.length;t++)o[t].width?a-=o[t].clientWidth:c++;if(c===0)return;const n=Math.floor(a/c),l=p.getFlatColumnsState(this.columnsState),e=this.columns.filter(t=>!t.children.length);for(let t=0;t<o.length;t++){const i=o[t],d=i.width?i.clientWidth:n,s=l.find(f=>f.id===e[t].id);s&&(s.width=d.toString()),this.colGroups.forEach(f=>{f.children[t].width=d})}}setWidths(a,c){const o=p.getFlatColumnsState(this.columnsState),n=this.columns.findIndex(t=>t.id===a.id),l=[];let e=a.children.filter(t=>!t.hidden).length;for(let t=n+1;t<this.columns.length&&!(e<=0);t++){const i=this.columns[t];i.children.length?e+=i.children.filter(d=>!d.hidden).length:l.push(i),e--}l.length===0&&l.push(a);const r=[];l.forEach(t=>{const i=o.find(d=>d.id===t.id);i&&(this.applyWidthConstraints(i,t,c),r.push(i))}),this.updateColElements(r)}updateNextLockedCol(a,c,o){const n=c.index,l=this.colGroupMain.parentElement.closest(".k-grid"),e=l==null?void 0:l.clientWidth,r=this.columns.filter(t=>t.locked).map(t=>parseInt(t.width+"",10)).reduce((t,i)=>t+i,0);!c.locked||e<=r+x||this.columns.forEach(t=>{if(t!=null&&t.locked&&o){const i=a==null?void 0:a.querySelectorAll('[aria-colindex="'+t.ariaColumnIndex+'"]');i==null||i.forEach(d=>{const s=d.style;this.isRtl?(t.index>n&&s&&s.right&&(s.right=parseInt(s.right,10)-o+"px"),t.index<n&&s&&s.left&&(s.left=parseInt(s.left,10)-o+"px")):(t.index>n&&s&&s.left&&(s.left=parseInt(s.left,10)-o+"px"),t.index<n&&s&&s.right&&(s.right=parseInt(s.right,10)-o+"px"))})}})}}exports.ColumnResize=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const p=require("../utils/index.js"),W=1,w=20;class S{constructor(f){this.columns=[],this.columnsState=[],this.resizable=!1,this.isRtl=!1,this.setIsRtl=c=>{this.isRtl=c},this.initWidths=()=>{var l;const c=((l=this.colGroupMain)==null?void 0:l.children)||[],o=p.getFlatColumnsState(this.columnsState),s=this.columns.filter(e=>{var r;return!((r=e.children)!=null&&r.length)});for(let e=0;e<c.length;e++){const r=s[e];let t="";const i=o.find(d=>d.id===s[e].id);i&&(t=this.applyWidthConstraints(i,r)),this.colGroups.forEach(d=>{d.children[e].width=t})}},this.dragHandler=(c,o,s,l)=>{const e=c.originalEvent;l||(e.preventDefault(),e.stopPropagation(),e.stopImmediatePropagation());const r=s.closest("th");if(!r)return;const t=r.clientWidth;let i=t;if(this.isRtl?i+=s.getBoundingClientRect().right-s.offsetWidth/2-c.clientX:i+=c.clientX-s.getBoundingClientRect().left-s.offsetWidth/2,!l&&Math.abs(i-t)<1)return;this.fixateInitialWidths(r.parentElement.clientWidth),this.setWidths(o,Math.floor(i)/t);const d=this.columns.filter(n=>!n.children.length).findIndex(n=>n.id===o.id);this.onResize(d,t,i,e,l,this.columnsState,o.id)},this.dblClickHandler=(c,o)=>{const s=this.columns.filter(h=>o.indexOf(h.id)>-1),l=p.getFlatColumnsState(this.columnsState);if(!this.colGroupMain||!s.length)return;const e={},r=s;for(;r.length>0;){const h=r.pop();if(!h)break;h.children.length?r.push(...h.children):e[h.id]=h}const t=this.columns.filter(h=>!h.children.length),i=[];t.forEach((h,u)=>{e[h.id]&&i.push(u)});const d=this.colGroups,n=d.map(h=>h.parentElement);n.forEach(h=>h.classList.add("k-autofitting"));const a=[];d.forEach(h=>{i.forEach(u=>{h.children[u]&&(h.children[u].width="",a[u]=Math.max(a[u]||0,h.children[u].offsetWidth+W))})}),d.forEach(h=>{i.forEach(u=>{if(h.children[u]){h.children[u].width=a[u]+"px";const g=l.find(m=>m.id===t[u].id);g&&(g.width=a[u],t[u].width=a[u])}})}),n.forEach(h=>h.classList.remove("k-autofitting")),this.onResize(i[0],0,0,c,!0,this.columnsState,o[0])},this.updateColElements=c=>{const o=this.columns.filter(l=>!l.hidden&&!l.children.length);let s=1e-10;for(let l=0;l<c.length;l++){const e=c[l],r=o.findIndex(a=>a.id===e.id),t=parseFloat((e.width||0).toString()),i=Math.floor(t);s+=t-i;const d=i+Math.floor(s);s-=Math.floor(s);const n=o.find(a=>a.id===e.id);if(!n)return;this.colGroups.forEach(a=>{if(a.children[r]){const h=parseInt(a.children[r].width,10);a.children[r].width=d+"px",this.updateNextLockedCol(a.parentElement,n,h-d)}})}},this.onResize=f}get colGroups(){return[this.colGroupMain,this.colGroupHeader,this.colGroupFooter,this.colGroupStickyHeader,this.colGroupStickyFooter,this.colGroupPinnedTop,this.colGroupPinnedBottom].filter(Boolean)}applyWidthConstraints(f,c,o=1){if(!f.width)return f.width||"";const s=f.width.toString();if(s.includes("%")){const a=parseFloat(s)*o,h=Math.max(0,Math.min(100,a));return f.width=h+"%",f.width}let e=parseFloat(s)*o;const r=c.minResizableWidth===void 0?10:c.minResizableWidth,t=c.minWidth,i=t!==void 0?Math.max(r,t):r,d=c.maxWidth;return e<i&&(e=i),d!==void 0&&e>d&&(e=d),f.width=e,e}fixateInitialWidths(f){var r;let c=0;const o=((r=this.colGroupMain)==null?void 0:r.children)||[];for(let t=0;t<o.length;t++)o[t].width?f-=o[t].clientWidth:c++;if(c===0)return;const s=Math.floor(f/c),l=p.getFlatColumnsState(this.columnsState),e=this.columns.filter(t=>!t.children.length);for(let t=0;t<o.length;t++){const i=o[t],d=i.width?i.clientWidth:s,n=l.find(a=>a.id===e[t].id);n&&(n.width=d.toString(),e[t].width=n.width),this.colGroups.forEach(a=>{a.children[t].width=d})}}setWidths(f,c){const o=p.getFlatColumnsState(this.columnsState),s=this.columns.findIndex(t=>t.id===f.id),l=[];let e=f.children.filter(t=>!t.hidden).length;for(let t=s+1;t<this.columns.length&&!(e<=0);t++){const i=this.columns[t];i.children.length?e+=i.children.filter(d=>!d.hidden).length:l.push(i),e--}l.length===0&&l.push(s>=0?this.columns[s]:f);const r=[];l.forEach(t=>{const i=o.find(d=>d.id===t.id);i&&(this.applyWidthConstraints(i,t,c),t.width=i.width,r.push(i))}),this.updateColElements(r)}updateNextLockedCol(f,c,o){const s=c.index,l=this.colGroupMain.parentElement.closest(".k-grid"),e=l==null?void 0:l.clientWidth,r=this.columns.filter(t=>t.locked).map(t=>parseInt(t.width+"",10)).reduce((t,i)=>t+i,0);!c.locked||e<=r+w||this.columns.forEach(t=>{if(t!=null&&t.locked&&o){const i=f==null?void 0:f.querySelectorAll('[aria-colindex="'+t.ariaColumnIndex+'"]');i==null||i.forEach(d=>{const n=d.style;this.isRtl?(t.index>s&&n&&n.right&&(n.right=parseInt(n.right,10)-o+"px"),t.index<s&&n&&n.left&&(n.left=parseInt(n.left,10)-o+"px")):(t.index>s&&n&&n.left&&(n.left=parseInt(n.left,10)-o+"px"),t.index<s&&n&&n.right&&(n.right=parseInt(n.right,10)-o+"px"))})}})}}exports.ColumnResize=S;

package/drag/ColumnResize.mjs

@@ -5,44 +5,44 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { getFlatColumnsState as p } from "../utils/index.mjs";
-const W = 1, x = 20;
+import { getFlatColumnsState as u } from "../utils/index.mjs";
+const W = 1, w = 20;
 class S {
-  constructor(a) {
+  constructor(f) {
     this.columns = [], this.columnsState = [], this.resizable = !1, this.isRtl = !1, this.setIsRtl = (c) => {
       this.isRtl = c;
     }, this.initWidths = () => {
       var l;
-      const c = ((l = this.colGroupMain) == null ? void 0 : l.children) || [], o = p(this.columnsState), n = this.columns.filter((e) => {
+      const c = ((l = this.colGroupMain) == null ? void 0 : l.children) || [], o = u(this.columnsState), s = this.columns.filter((e) => {
         var r;
         return !((r = e.children) != null && r.length);
       });
       for (let e = 0; e < c.length; e++) {
-        const r = n[e];
+        const r = s[e];
         let t = "";
-        const i = o.find((d) => d.id === n[e].id);
+        const i = o.find((d) => d.id === s[e].id);
         i && (t = this.applyWidthConstraints(i, r)), this.colGroups.forEach((d) => {
           d.children[e].width = t;
         });
       }
-    }, this.dragHandler = (c, o, n, l) => {
+    }, this.dragHandler = (c, o, s, l) => {
       const e = c.originalEvent;
       l || (e.preventDefault(), e.stopPropagation(), e.stopImmediatePropagation());
-      const r = n.closest("th");
+      const r = s.closest("th");
       if (!r)
         return;
       const t = r.clientWidth;
       let i = t;
-      if (this.isRtl ? i += n.getBoundingClientRect().right - n.offsetWidth / 2 - c.clientX : i += c.clientX - n.getBoundingClientRect().left - n.offsetWidth / 2, !l && Math.abs(i - t) < 1)
+      if (this.isRtl ? i += s.getBoundingClientRect().right - s.offsetWidth / 2 - c.clientX : i += c.clientX - s.getBoundingClientRect().left - s.offsetWidth / 2, !l && Math.abs(i - t) < 1)
         return;
       this.fixateInitialWidths(r.parentElement.clientWidth), this.setWidths(o, Math.floor(i) / t);
-      const d = this.columns.filter((s) => !s.children.length).findIndex((s) => s.id === o.id);
+      const d = this.columns.filter((n) => !n.children.length).findIndex((n) => n.id === o.id);
       this.onResize(d, t, i, e, l, this.columnsState, o.id);
     }, this.dblClickHandler = (c, o) => {
-      const n = this.columns.filter((h) => o.indexOf(h.id) > -1), l = p(this.columnsState);
-      if (!this.colGroupMain || !n.length)
+      const s = this.columns.filter((h) => o.indexOf(h.id) > -1), l = u(this.columnsState);
+      if (!this.colGroupMain || !s.length)
         return;
-      const e = {}, r = n;
+      const e = {}, r = s;
       for (; r.length > 0; ) {
         const h = r.pop();
         if (!h)
@@ -50,47 +50,47 @@ class S {
         h.children.length ? r.push(...h.children) : e[h.id] = h;
       }
       const t = this.columns.filter((h) => !h.children.length), i = [];
-      t.forEach((h, u) => {
-        e[h.id] && i.push(u);
+      t.forEach((h, p) => {
+        e[h.id] && i.push(p);
       });
-      const d = this.colGroups, s = d.map((h) => h.parentElement);
-      s.forEach((h) => h.classList.add("k-autofitting"));
-      const f = [];
+      const d = this.colGroups, n = d.map((h) => h.parentElement);
+      n.forEach((h) => h.classList.add("k-autofitting"));
+      const a = [];
       d.forEach((h) => {
-        i.forEach((u) => {
-          h.children[u] && (h.children[u].width = "", f[u] = Math.max(
-            f[u] || 0,
-            h.children[u].offsetWidth + W
+        i.forEach((p) => {
+          h.children[p] && (h.children[p].width = "", a[p] = Math.max(
+            a[p] || 0,
+            h.children[p].offsetWidth + W
           ));
         });
       }), d.forEach((h) => {
-        i.forEach((u) => {
-          if (h.children[u]) {
-            h.children[u].width = f[u] + "px";
-            const g = l.find((m) => m.id === t[u].id);
-            g && (g.width = f[u]);
+        i.forEach((p) => {
+          if (h.children[p]) {
+            h.children[p].width = a[p] + "px";
+            const g = l.find((m) => m.id === t[p].id);
+            g && (g.width = a[p], t[p].width = a[p]);
           }
         });
-      }), s.forEach((h) => h.classList.remove("k-autofitting")), this.onResize(i[0], 0, 0, c, !0, this.columnsState, o[0]);
+      }), n.forEach((h) => h.classList.remove("k-autofitting")), this.onResize(i[0], 0, 0, c, !0, this.columnsState, o[0]);
     }, this.updateColElements = (c) => {
       const o = this.columns.filter((l) => !l.hidden && !l.children.length);
-      let n = 1e-10;
+      let s = 1e-10;
       for (let l = 0; l < c.length; l++) {
-        const e = c[l], r = o.findIndex((f) => f.id === e.id), t = parseFloat((e.width || 0).toString()), i = Math.floor(t);
-        n += t - i;
-        const d = i + Math.floor(n);
-        n -= Math.floor(n);
-        const s = o.find((f) => f.id === e.id);
-        if (!s)
+        const e = c[l], r = o.findIndex((a) => a.id === e.id), t = parseFloat((e.width || 0).toString()), i = Math.floor(t);
+        s += t - i;
+        const d = i + Math.floor(s);
+        s -= Math.floor(s);
+        const n = o.find((a) => a.id === e.id);
+        if (!n)
           return;
-        this.colGroups.forEach((f) => {
-          if (f.children[r]) {
-            const h = parseInt(f.children[r].width, 10);
-            f.children[r].width = d + "px", this.updateNextLockedCol(f.parentElement, s, h - d);
+        this.colGroups.forEach((a) => {
+          if (a.children[r]) {
+            const h = parseInt(a.children[r].width, 10);
+            a.children[r].width = d + "px", this.updateNextLockedCol(a.parentElement, n, h - d);
           }
         });
       }
-    }, this.onResize = a;
+    }, this.onResize = f;
   }
   get colGroups() {
     return [
@@ -103,56 +103,56 @@ class S {
       this.colGroupPinnedBottom
     ].filter(Boolean);
   }
-  applyWidthConstraints(a, c, o = 1) {
-    if (!a.width)
-      return a.width || "";
-    const n = a.width.toString();
-    if (n.includes("%")) {
-      const f = parseFloat(n) * o, h = Math.max(0, Math.min(100, f));
-      return a.width = h + "%", a.width;
+  applyWidthConstraints(f, c, o = 1) {
+    if (!f.width)
+      return f.width || "";
+    const s = f.width.toString();
+    if (s.includes("%")) {
+      const a = parseFloat(s) * o, h = Math.max(0, Math.min(100, a));
+      return f.width = h + "%", f.width;
     }
-    let e = parseFloat(n) * o;
+    let e = parseFloat(s) * o;
     const r = c.minResizableWidth === void 0 ? 10 : c.minResizableWidth, t = c.minWidth, i = t !== void 0 ? Math.max(r, t) : r, d = c.maxWidth;
-    return e < i && (e = i), d !== void 0 && e > d && (e = d), a.width = e, e;
+    return e < i && (e = i), d !== void 0 && e > d && (e = d), f.width = e, e;
   }
-  fixateInitialWidths(a) {
+  fixateInitialWidths(f) {
     var r;
     let c = 0;
     const o = ((r = this.colGroupMain) == null ? void 0 : r.children) || [];
     for (let t = 0; t < o.length; t++)
-      o[t].width ? a -= o[t].clientWidth : c++;
+      o[t].width ? f -= o[t].clientWidth : c++;
     if (c === 0)
       return;
-    const n = Math.floor(a / c), l = p(this.columnsState), e = this.columns.filter((t) => !t.children.length);
+    const s = Math.floor(f / c), l = u(this.columnsState), e = this.columns.filter((t) => !t.children.length);
     for (let t = 0; t < o.length; t++) {
-      const i = o[t], d = i.width ? i.clientWidth : n, s = l.find((f) => f.id === e[t].id);
-      s && (s.width = d.toString()), this.colGroups.forEach((f) => {
-        f.children[t].width = d;
+      const i = o[t], d = i.width ? i.clientWidth : s, n = l.find((a) => a.id === e[t].id);
+      n && (n.width = d.toString(), e[t].width = n.width), this.colGroups.forEach((a) => {
+        a.children[t].width = d;
       });
     }
   }
-  setWidths(a, c) {
-    const o = p(this.columnsState), n = this.columns.findIndex((t) => t.id === a.id), l = [];
-    let e = a.children.filter((t) => !t.hidden).length;
-    for (let t = n + 1; t < this.columns.length && !(e <= 0); t++) {
+  setWidths(f, c) {
+    const o = u(this.columnsState), s = this.columns.findIndex((t) => t.id === f.id), l = [];
+    let e = f.children.filter((t) => !t.hidden).length;
+    for (let t = s + 1; t < this.columns.length && !(e <= 0); t++) {
       const i = this.columns[t];
       i.children.length ? e += i.children.filter((d) => !d.hidden).length : l.push(i), e--;
     }
-    l.length === 0 && l.push(a);
+    l.length === 0 && l.push(s >= 0 ? this.columns[s] : f);
     const r = [];
     l.forEach((t) => {
       const i = o.find((d) => d.id === t.id);
-      i && (this.applyWidthConstraints(i, t, c), r.push(i));
+      i && (this.applyWidthConstraints(i, t, c), t.width = i.width, r.push(i));
     }), this.updateColElements(r);
   }
-  updateNextLockedCol(a, c, o) {
-    const n = c.index, l = this.colGroupMain.parentElement.closest(".k-grid"), e = l == null ? void 0 : l.clientWidth, r = this.columns.filter((t) => t.locked).map((t) => parseInt(t.width + "", 10)).reduce((t, i) => t + i, 0);
-    !c.locked || e <= r + x || this.columns.forEach((t) => {
+  updateNextLockedCol(f, c, o) {
+    const s = c.index, l = this.colGroupMain.parentElement.closest(".k-grid"), e = l == null ? void 0 : l.clientWidth, r = this.columns.filter((t) => t.locked).map((t) => parseInt(t.width + "", 10)).reduce((t, i) => t + i, 0);
+    !c.locked || e <= r + w || this.columns.forEach((t) => {
       if (t != null && t.locked && o) {
-        const i = a == null ? void 0 : a.querySelectorAll('[aria-colindex="' + t.ariaColumnIndex + '"]');
+        const i = f == null ? void 0 : f.querySelectorAll('[aria-colindex="' + t.ariaColumnIndex + '"]');
         i == null || i.forEach((d) => {
-          const s = d.style;
-          this.isRtl ? (t.index > n && s && s.right && (s.right = parseInt(s.right, 10) - o + "px"), t.index < n && s && s.left && (s.left = parseInt(s.left, 10) - o + "px")) : (t.index > n && s && s.left && (s.left = parseInt(s.left, 10) - o + "px"), t.index < n && s && s.right && (s.right = parseInt(s.right, 10) - o + "px"));
+          const n = d.style;
+          this.isRtl ? (t.index > s && n && n.right && (n.right = parseInt(n.right, 10) - o + "px"), t.index < s && n && n.left && (n.left = parseInt(n.left, 10) - o + "px")) : (t.index > s && n && n.left && (n.left = parseInt(n.left, 10) - o + "px"), t.index < s && n && n.right && (n.right = parseInt(n.right, 10) - o + "px"));
         });
       }
     });

package/interfaces/GridScrollableSettings.d.ts

@@ -23,11 +23,20 @@ export interface GridScrollableSettings {
      * Controls the scrollbar rendering style.
      *
      * - `default`—Uses the native browser scrollbar (default).
-     * - `proxied`—Renders a custom overlay scrollbar on top of the content area.
-     *   The overlay appears on hover or scroll and hides when idle,
+     * - `proxied`—Renders a native scrollbar-based overlay on top of the content area,
      *   eliminating the white-space flash during virtual scrolling jumps.
      *
      * @default 'default'
      */
     scrollbar?: 'default' | 'proxied';
+    /**
+     * Multiplies the scrolling distance reported by mouse-wheel and trackpad input.
+     * Applies to the `scrollable` and `virtual` modes with both scrollbar styles.
+     *
+     * Must be a positive, finite number. Values that are zero, negative, `NaN`, or `Infinity`
+     * fall back to the default.
+     *
+     * @default 1
+     */
+    wheelMultiplier?: number;
 }

package/interfaces/VirtualScrollInterface.d.ts

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { Page } from '../paging/Page';
-import { SyntheticEvent } from 'react';
+import { RefObject, SyntheticEvent } from 'react';
 import { RowHeightService } from '@progress/kendo-react-common';
 /**
  * @hidden
@@ -24,6 +24,7 @@ export interface VirtualScrollInterface {
     tableTransform: string;
     rowHeightService?: RowHeightService;
     scrollbarOverlaySpacerElement: HTMLDivElement | null;
+    overlaySyncingRef: RefObject<boolean> | null;
     reset: () => void;
     scrollHandler(e: SyntheticEvent<HTMLDivElement>): void;
     scrollToPosition(scrollTop: number, e: SyntheticEvent<HTMLDivElement>, deferTranslate?: boolean): void;

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-grid",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1789468825,version:"16.2.0-develop.6",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=Object.freeze({name:"@progress/kendo-react-grid",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1789735540,version:"16.2.0-develop.8",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"});exports.packageMetadata=e;

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = Object.freeze({
     productName: 'KendoReact',
     productCode: 'KENDOUIREACT',
     productCodes: ['KENDOUIREACT'],
-    publishDate: 1789468825,
-    version: '16.2.0-develop.6',
+    publishDate: 1789735540,
+    version: '16.2.0-develop.8',
     licensingDocsUrl: 'https://www.telerik.com/kendo-react-ui/components/my-license/'
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-grid",
-  "version": "16.2.0-develop.6",
+  "version": "16.2.0-develop.8",
   "description": "React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
@@ -30,21 +30,21 @@
     "@progress/kendo-drawing": "^1.25.5",
     "@progress/kendo-file-saver": "^1.1.1",
     "@progress/kendo-licensing": "^1.7.2",
-    "@progress/kendo-react-animation": "16.2.0-develop.6",
-    "@progress/kendo-react-buttons": "16.2.0-develop.6",
-    "@progress/kendo-react-common": "16.2.0-develop.6",
-    "@progress/kendo-react-data-tools": "16.2.0-develop.6",
-    "@progress/kendo-react-dateinputs": "16.2.0-develop.6",
-    "@progress/kendo-react-indicators": "16.2.0-develop.6",
-    "@progress/kendo-react-form": "16.2.0-develop.6",
-    "@progress/kendo-react-labels": "16.2.0-develop.6",
-    "@progress/kendo-react-dialogs": "16.2.0-develop.6",
-    "@progress/kendo-react-dropdowns": "16.2.0-develop.6",
-    "@progress/kendo-react-inputs": "16.2.0-develop.6",
-    "@progress/kendo-react-intl": "16.2.0-develop.6",
-    "@progress/kendo-react-popup": "16.2.0-develop.6",
-    "@progress/kendo-react-layout": "16.2.0-develop.6",
-    "@progress/kendo-react-conversational-ui": "16.2.0-develop.6",
+    "@progress/kendo-react-animation": "16.2.0-develop.8",
+    "@progress/kendo-react-buttons": "16.2.0-develop.8",
+    "@progress/kendo-react-common": "16.2.0-develop.8",
+    "@progress/kendo-react-data-tools": "16.2.0-develop.8",
+    "@progress/kendo-react-dateinputs": "16.2.0-develop.8",
+    "@progress/kendo-react-indicators": "16.2.0-develop.8",
+    "@progress/kendo-react-form": "16.2.0-develop.8",
+    "@progress/kendo-react-labels": "16.2.0-develop.8",
+    "@progress/kendo-react-dialogs": "16.2.0-develop.8",
+    "@progress/kendo-react-dropdowns": "16.2.0-develop.8",
+    "@progress/kendo-react-inputs": "16.2.0-develop.8",
+    "@progress/kendo-react-intl": "16.2.0-develop.8",
+    "@progress/kendo-react-popup": "16.2.0-develop.8",
+    "@progress/kendo-react-layout": "16.2.0-develop.8",
+    "@progress/kendo-react-conversational-ui": "16.2.0-develop.8",
     "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
@@ -155,7 +155,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1789468825,
+      "publishDate": 1789735540,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },

package/utils/proxiedScrollOverlay.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { GridScrollableSettings } from '../interfaces/GridScrollableSettings';
+import { ScrollMode } from '../ScrollMode';
+/**
+ * @hidden
+ */
+export interface ScrollableOverlaySettings {
+    overlayScrollbar: boolean;
+    wheelMultiplier: number;
+}
+/**
+ * @hidden
+ */
+export declare function getScrollableOverlaySettings(scrollable: ScrollMode | GridScrollableSettings | undefined): ScrollableOverlaySettings;
+/**
+ * @hidden
+ * Reports whether the proxied scrollbar overlay is currently scrolled to its bottom edge.
+ * Must be called BEFORE the overlay's spacer height is updated for a new page — its
+ * `scrollHeight` reflects the size from the PREVIOUS render, which is what "was it at the
+ * bottom" needs to check against. Only reports true when the page being applied is genuinely
+ * the last page — the overlay's own scrollTop can still read "at bottom" from a stale prior
+ * position (e.g. right after scrolling back up), which would otherwise incorrectly snap the
+ * content back down.
+ */
+export declare function isOverlayAtBottom(scrollbarOverlaySpacerElement: HTMLDivElement | null, isLastPageLoad: boolean): boolean;
+/**
+ * @hidden
+ */
+export interface OverlayBottomPin {
+    scrollbarOverlay: HTMLDivElement;
+    overlayScrollTop: number;
+    contentScrollTop: number;
+}
+/**
+ * @hidden
+ * Computes the scrollTop values needed to keep the proxied scrollbar overlay pinned to the
+ * bottom, or `null` when there's no overlay/container to pin. Must be called AFTER the
+ * overlay's spacer height has been updated for the new page, so `scrollHeight` reflects the
+ * new size — pair with `isOverlayAtBottom()` (called before the resize) to decide whether to
+ * apply the result.
+ */
+export declare function getOverlayBottomPin(scrollbarOverlaySpacerElement: HTMLDivElement | null, container: HTMLDivElement | null): OverlayBottomPin | null;

package/utils/proxiedScrollOverlay.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function e(i){const o=typeof i=="object"?i:void 0,t=o==null?void 0:o.wheelMultiplier;return{overlayScrollbar:(o==null?void 0:o.scrollbar)==="proxied",wheelMultiplier:typeof t=="number"&&Number.isFinite(t)&&t>0?t:1}}function l(i,o){const t=i==null?void 0:i.parentElement;return o&&!!t&&t.scrollHeight-t.clientHeight-t.scrollTop<=1}function n(i,o){const t=i==null?void 0:i.parentElement;return!t||!o?null:{scrollbarOverlay:t,overlayScrollTop:t.scrollHeight-t.clientHeight,contentScrollTop:o.scrollHeight-o.clientHeight}}exports.getOverlayBottomPin=n;exports.getScrollableOverlaySettings=e;exports.isOverlayAtBottom=l;

package/utils/proxiedScrollOverlay.mjs

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+function n(i) {
+  const o = typeof i == "object" ? i : void 0, t = o == null ? void 0 : o.wheelMultiplier;
+  return {
+    overlayScrollbar: (o == null ? void 0 : o.scrollbar) === "proxied",
+    wheelMultiplier: typeof t == "number" && Number.isFinite(t) && t > 0 ? t : 1
+  };
+}
+function u(i, o) {
+  const t = i == null ? void 0 : i.parentElement;
+  return o && !!t && t.scrollHeight - t.clientHeight - t.scrollTop <= 1;
+}
+function l(i, o) {
+  const t = i == null ? void 0 : i.parentElement;
+  return !t || !o ? null : {
+    scrollbarOverlay: t,
+    overlayScrollTop: t.scrollHeight - t.clientHeight,
+    contentScrollTop: o.scrollHeight - o.clientHeight
+  };
+}
+export {
+  l as getOverlayBottomPin,
+  n as getScrollableOverlaySettings,
+  u as isOverlayAtBottom
+};

package/utils/wheelTouchScroll.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface WheelTouchScrollOptions {
+    wheelMultiplier: number;
+    overlayRequiresCustomWheel: boolean;
+}
+/**
+ * @hidden
+ * Attaches native (non-React) wheel and touch listeners to `container` so the grid can apply a
+ * `wheelMultiplier` and/or restore scrolling when the proxied overlay hides native overflow.
+ * Returns a cleanup function that removes the listeners.
+ */
+export declare function attachWheelTouchScroll(container: HTMLDivElement, options: WheelTouchScrollOptions): () => void;

package/utils/wheelTouchScroll.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const A=16,X=1,W=2,I=.95,d=.1;function b(e,S){const{wheelMultiplier:m,overlayRequiresCustomWheel:M}=S;let f;const _=()=>{var t;if(f===void 0){const i=(t=e.ownerDocument.defaultView)==null?void 0:t.getComputedStyle(e).lineHeight;f=Number.parseFloat(i||"")||A}return f},L=t=>{if(t.ctrlKey||t.metaKey||!t.deltaY&&!t.deltaX)return;const i=e.scrollTop,h=e.scrollLeft;let l=t.deltaX,s=t.deltaY;if(t.shiftKey&&!l&&(l=s,s=0),t.deltaMode===X){const c=_();l*=c,s*=c}else t.deltaMode===W&&(l*=e.clientWidth,s*=e.clientHeight);e.scrollTop+=s*m,e.scrollLeft+=l*m,(e.scrollTop!==i||e.scrollLeft!==h)&&t.preventDefault()};e.addEventListener("wheel",L,{passive:!1});let r;if(M){let t=0,i=0,h=0,l=0,s=0,c;const T=()=>{c!==void 0&&(cancelAnimationFrame(c),c=void 0)},p=()=>{e.scrollTop+=s,e.scrollLeft+=l,s*=I,l*=I,Math.abs(s)>d||Math.abs(l)>d?c=requestAnimationFrame(p):c=void 0},E=o=>{o.touches.length===1&&(T(),l=0,s=0,t=o.touches[0].clientX,i=o.touches[0].clientY,h=o.timeStamp)},n=o=>{if(o.touches.length!==1)return;const a=o.touches[0],v=t-a.clientX,g=i-a.clientY,H=Math.min(Math.max(o.timeStamp-h,1),100),Y=e.scrollTop,y=e.scrollLeft;e.scrollTop+=g,e.scrollLeft+=v,s=g/H*(1e3/60),l=v/H*(1e3/60),t=a.clientX,i=a.clientY,h=o.timeStamp,(e.scrollTop!==Y||e.scrollLeft!==y)&&o.preventDefault()},u=o=>{o.touches.length>0||(Math.abs(s)>d||Math.abs(l)>d)&&(c=requestAnimationFrame(p))};e.addEventListener("touchstart",E,{passive:!0}),e.addEventListener("touchmove",n,{passive:!1}),e.addEventListener("touchend",u,{passive:!0}),e.addEventListener("touchcancel",u,{passive:!0}),r=()=>{T(),e.removeEventListener("touchstart",E),e.removeEventListener("touchmove",n),e.removeEventListener("touchend",u),e.removeEventListener("touchcancel",u)}}return()=>{e.removeEventListener("wheel",L),r==null||r()}}exports.attachWheelTouchScroll=b;

package/utils/wheelTouchScroll.mjs

@@ -0,0 +1,57 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+function O(e, n) {
+  const { wheelMultiplier: L, overlayRequiresCustomWheel: N } = n;
+  let u;
+  const v = () => {
+    var t;
+    if (u === void 0) {
+      const i = (t = e.ownerDocument.defaultView) == null ? void 0 : t.getComputedStyle(e).lineHeight;
+      u = Number.parseFloat(i || "") || 16;
+    }
+    return u;
+  }, a = (t) => {
+    if (t.ctrlKey || t.metaKey || !t.deltaY && !t.deltaX)
+      return;
+    const i = e.scrollTop, h = e.scrollLeft;
+    let l = t.deltaX, s = t.deltaY;
+    if (t.shiftKey && !l && (l = s, s = 0), t.deltaMode === 1) {
+      const c = v();
+      l *= c, s *= c;
+    } else t.deltaMode === 2 && (l *= e.clientWidth, s *= e.clientHeight);
+    e.scrollTop += s * L, e.scrollLeft += l * L, (e.scrollTop !== i || e.scrollLeft !== h) && t.preventDefault();
+  };
+  e.addEventListener("wheel", a, { passive: !1 });
+  let E;
+  if (N) {
+    let t = 0, i = 0, h = 0, l = 0, s = 0, c;
+    const I = () => {
+      c !== void 0 && (cancelAnimationFrame(c), c = void 0);
+    }, d = () => {
+      e.scrollTop += s, e.scrollLeft += l, s *= 0.95, l *= 0.95, Math.abs(s) > 0.1 || Math.abs(l) > 0.1 ? c = requestAnimationFrame(d) : c = void 0;
+    }, _ = (o) => {
+      o.touches.length === 1 && (I(), l = 0, s = 0, t = o.touches[0].clientX, i = o.touches[0].clientY, h = o.timeStamp);
+    }, f = (o) => {
+      if (o.touches.length !== 1)
+        return;
+      const r = o.touches[0], m = t - r.clientX, p = i - r.clientY, H = Math.min(Math.max(o.timeStamp - h, 1), 100), A = e.scrollTop, C = e.scrollLeft;
+      e.scrollTop += p, e.scrollLeft += m, s = p / H * (1e3 / 60), l = m / H * (1e3 / 60), t = r.clientX, i = r.clientY, h = o.timeStamp, (e.scrollTop !== A || e.scrollLeft !== C) && o.preventDefault();
+    }, T = (o) => {
+      o.touches.length > 0 || (Math.abs(s) > 0.1 || Math.abs(l) > 0.1) && (c = requestAnimationFrame(d));
+    };
+    e.addEventListener("touchstart", _, { passive: !0 }), e.addEventListener("touchmove", f, { passive: !1 }), e.addEventListener("touchend", T, { passive: !0 }), e.addEventListener("touchcancel", T, { passive: !0 }), E = () => {
+      I(), e.removeEventListener("touchstart", _), e.removeEventListener("touchmove", f), e.removeEventListener("touchend", T), e.removeEventListener("touchcancel", T);
+    };
+  }
+  return () => {
+    e.removeEventListener("wheel", a), E == null || E();
+  };
+}
+export {
+  O as attachWheelTouchScroll
+};