@progress/kendo-react-grid 11.0.0-develop.7 → 11.0.0-develop.8

package/VirtualScroll.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("react");function g(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>r[t]})}}return i.default=r,Object.freeze(i)}const u=g(p);class f{constructor(i){this.table=null,this.containerHeight=0,this.topCacheCount=0,this.attendedSkip=0,this.propsSkip=0,this.total=0,this.scrollableVirtual=!1,this.realSkip=0,this.pageSize=0,this.PageChange=null,this.tableBodyRef=null,this.fixedScroll=!1,this.askedSkip=void 0,this.containerRef=null,this.tableTransform="",this.prevScrollPos=0,this.tableTranslate=0,this.scrollSyncing=!1,this.reactVersion=Number.parseFloat(u.version),this.topItems=(t,s)=>{if(!this.container||s)return{topItemsCount:0,topItemsHeight:0};const l=this.container.clientHeight,e=Math.ceil(l/t[0].line),n=Math.ceil((t.length-e)/2);let o=0;for(let a=0;a<n;a++)o+=t[a].line+t[a].acc;return{topItemsCount:n,topItemsHeight:o,itemsNeededOnScreen:e+e/2}},this.horizontalScrollbarHeight=()=>this.container?this.container.offsetHeight-this.container.clientHeight:0,i&&(this.topCacheCount=4,this.attendedSkip=-this.topCacheCount),this.scrollHandler=this.scrollHandler.bind(this)}get container(){var i;return(i=this.containerRef)==null?void 0:i.current}get rowHeights(){var l,e;const i=[],t=((l=this.tableBodyRef)==null?void 0:l.current)&&((e=this.tableBodyRef)==null?void 0:e.current.children)||[];let s=0;for(let n=0;n<t.length;n++){if(t[n].className.indexOf("k-grouping-row")>-1){s+=t[n].scrollHeight;continue}t[n].className.indexOf("k-detail-row")>-1?i[i.length-1].line+=t[n].scrollHeight:(i.push({line:t[n].scrollHeight,acc:s}),s=0)}return i}changePage(i,t){this.attendedSkip=i-this.topCacheCount,this.PageChange&&this.PageChange({skip:Math.max(0,i-this.topCacheCount),take:this.pageSize},t)}translate(i,t){this.tableTranslate=i,this.scrollableVirtual&&this.table&&(this.reactVersion<=17||t?this.table.style.transform="translateY("+i+"px)":this.tableTransform="translateY("+i+"px)")}reset(){this.scrollSyncing=!0,!this.fixedScroll&&(this.container&&(this.container.scrollTop=0),this.translate(0,!0))}localScrollUp(i){if(!this.container)return;const t=this.rowHeights,s=this.container.scrollTop;let l=this.tableTranslate,e=0;const{topItemsCount:n,topItemsHeight:o,itemsNeededOnScreen:a}=this.topItems(t,!!this.topCacheCount),h=s-l;if(!(h>o||t.length<=a)){for(;e<this.topCacheCount+this.attendedSkip-this.realSkip+n&&this.propsSkip-e>0&&!(l+(t[t.length-1-e].line+t[t.length-1-e].acc)+h<=s);)l-=t[t.length-1-e].line+t[t.length-1-e].acc,e++;if(e===0&&this.topCacheCount===0&&this.attendedSkip>0&&(l=Math.max(l-t[0].line,0),e=1),this.propsSkip-e<=0&&l>s){this.translate(0),this.changePage(0,i),this.container.scrollTop=0;return}if(l>s&&(l=s),l!==this.tableTranslate){this.translate(Math.max(0,l-o));const c=Math.max(0,this.propsSkip-e-n);this.changePage(c,i)}}}localScrollDown(i){if(!this.container)return;const t=this.rowHeights,s=this.container.scrollTop;let l=this.tableTranslate,e=0;const{topItemsCount:n,topItemsHeight:o,itemsNeededOnScreen:a}=this.topItems(t,!!this.topCacheCount);for(;e<t.length-this.topCacheCount&&!(l+t[e].line+t[e].acc>s);)l+=t[e].line+t[e].acc,e++;n>this.propsSkip+e||t.length<=a||(e>=t.length-this.topCacheCount&&this.propsSkip+e>=this.total?(this.translate(l-o),this.changePage(this.total-1-n,i)):l!==this.tableTranslate&&this.propsSkip+e-n!==this.propsSkip&&(this.translate(l-o),this.changePage(this.propsSkip+e-n,i)))}scrollNonStrict(i){const t=this.total*this.prevScrollPos/this.containerHeight;let s=Math.floor(t);s>=this.total&&(s=this.total-1);const l=Math.min(t-s,1);let e=0;const n=s-this.propsSkip,o=this.rowHeights;n>=0&&n<=1?e=-((o[0].line+o[0].acc)*l):n===-1&&(e=-((o[o.length-1].line+o[o.length-1].acc)*l));const{topItemsCount:a,topItemsHeight:h}=this.topItems(o,!!this.topCacheCount);this.translate(Math.max(0,e-h-this.horizontalScrollbarHeight()+this.containerHeight*t/this.total)),this.changePage(s-a,i)}scrollHandler(i){if(!this.scrollableVirtual)return;if(this.scrollSyncing||!this.container||!this.table){this.scrollSyncing=!1;return}const t=this.container.scrollTop,s=this.prevScrollPos;if(this.prevScrollPos=t,this.askedSkip!==void 0){this.translate(this.containerHeight*this.askedSkip/this.total),this.changePage(this.askedSkip,i),this.prevScrollPos=t,this.askedSkip=void 0;return}t-s<0&&t>this.tableTranslate-this.table.scrollHeight/10?this.localScrollUp(i):t-s>0&&t<this.tableTranslate+this.table.scrollHeight*2/3?this.localScrollDown(i):this.scrollNonStrict(i),this.prevScrollPos=t}}exports.VirtualScroll=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),h=require("./utils/index.js");function g(o){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>o[e]})}}return t.default=o,Object.freeze(t)}const d=g(f);class u{constructor(){this.table=null,this.tableBody=null,this.container=null,this.scrollHeightContainer=null,this.total=0,this.scrollableVirtual=!1,this.pageSize=0,this.PageChange=null,this.fixedScroll=!1,this.tableTransform="",this.reactVersion=Number.parseFloat(d.version),this.scrollSyncing=!1,this.firstToLoad=0,this.lastScrollTop=0,this.firstLoaded=0,this.lastLoaded=0,this.scrollHandler=this.scrollHandler.bind(this)}reset(){this.firstToLoad=0,this.firstLoaded=0,this.lastLoaded=0,this.rowHeightService=void 0,!this.fixedScroll&&this.container&&this.container.scrollTop!==0&&(this.scrollSyncing=!0,this.container.scrollTop=0,this.lastScrollTop=0,this.translate(0,!0))}scrollHandler(t){if(this.scrollSyncing){this.scrollSyncing=!1;return}if(!this.scrollableVirtual||!this.container||!this.table||!this.rowHeightService||!this.container)return;const e=this.container.scrollTop,i=this.lastScrollTop>=e,r=!i;this.lastScrollTop=e;const a=this.container.offsetHeight;let s=this.rowHeightService.index(e);const n=this.rowHeightService.index(e+a),l=Math.max(s+this.pageSize-this.total,0);if(s=Math.max(s-l,0),r&&n>=this.lastLoaded&&this.lastLoaded<this.total-1)this.firstToLoad=s,this.loadPage(t);else if(i&&s<this.firstToLoad){const c=Math.max(Math.floor(this.pageSize*.3)-l,0);this.firstToLoad=Math.max(s-c,0),this.loadPage(t)}}update(){var e;const t=this.getItemHeights();if(this.firstLoaded>this.firstToLoad){const i=Math.min(this.firstLoaded-this.firstToLoad,this.pageSize),r=this.getTotalHeight(i,t),a=this.getExpectedTotalHeight(i),s=r-a;s!==0&&this.adjustScroll(s)}(e=this.rowHeightService)==null||e.update(this.firstToLoad,t),this.setScrollHeightContainerHeight(),this.firstLoaded=this.firstToLoad,this.lastLoaded=this.firstLoaded+t.length-1}loadPage(t){this.rowHeightService&&(this.translate(this.rowHeightService.offset(this.firstToLoad)),this.changePage(this.firstToLoad,t))}translate(t,e){this.scrollableVirtual&&this.table&&(this.reactVersion<=17||e?this.table.style.transform="translateY("+t+"px)":this.tableTransform="translateY("+t+"px)")}changePage(t,e){this.PageChange&&this.PageChange({skip:Math.max(0,t),take:this.pageSize},e)}adjustScroll(t){this.scrollSyncing=!0,this.container&&(this.container.scrollTop+=t)}setScrollHeightContainerHeight(){var t;if(this.scrollableVirtual&&this.scrollHeightContainer){let e=((t=this.rowHeightService)==null?void 0:t.totalHeight())||0;e=h.firefox?Math.min(h.firefoxMaxHeight,e):e,this.scrollHeightContainer.style.height=e+"px"}}getItemHeights(){const t=[];return this.tableBody&&Array.from(this.tableBody.children).forEach(e=>{const i=e.getBoundingClientRect().height;e.classList.contains("k-detail-row")?t[t.length-1]+=i:t.push(i)}),t}getTotalHeight(t,e){return e.slice(0,t).reduce((i,r)=>i+r,0)}getExpectedTotalHeight(t){const e=this.rowHeightService;if(!e)return 0;const i=this.firstToLoad+(t-1);return e.offset(i)+e.height(i)-e.offset(this.firstToLoad)}}exports.VirtualScroll=u;

package/VirtualScroll.mjs

@@ -5,128 +5,86 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as c from "react";
-class g {
-  constructor(i) {
-    this.table = null, this.containerHeight = 0, this.topCacheCount = 0, this.attendedSkip = 0, this.propsSkip = 0, this.total = 0, this.scrollableVirtual = !1, this.realSkip = 0, this.pageSize = 0, this.PageChange = null, this.tableBodyRef = null, this.fixedScroll = !1, this.askedSkip = void 0, this.containerRef = null, this.tableTransform = "", this.prevScrollPos = 0, this.tableTranslate = 0, this.scrollSyncing = !1, this.reactVersion = Number.parseFloat(c.version), this.topItems = (t, l) => {
-      if (!this.container || l)
-        return { topItemsCount: 0, topItemsHeight: 0 };
-      const s = this.container.clientHeight, e = Math.ceil(s / t[0].line), o = Math.ceil((t.length - e) / 2);
-      let n = 0;
-      for (let a = 0; a < o; a++)
-        n += t[a].line + t[a].acc;
-      return {
-        topItemsCount: o,
-        topItemsHeight: n,
-        itemsNeededOnScreen: e + e / 2
-      };
-    }, this.horizontalScrollbarHeight = () => this.container ? this.container.offsetHeight - this.container.clientHeight : 0, i && (this.topCacheCount = 4, this.attendedSkip = -this.topCacheCount), this.scrollHandler = this.scrollHandler.bind(this);
+import * as n from "react";
+import { firefox as c, firefoxMaxHeight as f } from "./utils/index.mjs";
+class u {
+  constructor() {
+    this.table = null, this.tableBody = null, this.container = null, this.scrollHeightContainer = null, this.total = 0, this.scrollableVirtual = !1, this.pageSize = 0, this.PageChange = null, this.fixedScroll = !1, this.tableTransform = "", this.reactVersion = Number.parseFloat(n.version), this.scrollSyncing = !1, this.firstToLoad = 0, this.lastScrollTop = 0, this.firstLoaded = 0, this.lastLoaded = 0, this.scrollHandler = this.scrollHandler.bind(this);
   }
-  get container() {
-    var i;
-    return (i = this.containerRef) == null ? void 0 : i.current;
+  reset() {
+    this.firstToLoad = 0, this.firstLoaded = 0, this.lastLoaded = 0, this.rowHeightService = void 0, !this.fixedScroll && this.container && this.container.scrollTop !== 0 && (this.scrollSyncing = !0, this.container.scrollTop = 0, this.lastScrollTop = 0, this.translate(0, !0));
   }
-  /**
-   * @return - The row heights in an array.
-   */
-  get rowHeights() {
-    var s, e;
-    const i = [], t = ((s = this.tableBodyRef) == null ? void 0 : s.current) && ((e = this.tableBodyRef) == null ? void 0 : e.current.children) || [];
-    let l = 0;
-    for (let o = 0; o < t.length; o++) {
-      if (t[o].className.indexOf("k-grouping-row") > -1) {
-        l += t[o].scrollHeight;
-        continue;
-      }
-      t[o].className.indexOf("k-detail-row") > -1 ? i[i.length - 1].line += t[o].scrollHeight : (i.push({
-        line: t[o].scrollHeight,
-        acc: l
-      }), l = 0);
+  scrollHandler(t) {
+    if (this.scrollSyncing) {
+      this.scrollSyncing = !1;
+      return;
+    }
+    if (!this.scrollableVirtual || !this.container || !this.table || !this.rowHeightService || !this.container)
+      return;
+    const i = this.container.scrollTop, e = this.lastScrollTop >= i, o = !e;
+    this.lastScrollTop = i;
+    const r = this.container.offsetHeight;
+    let s = this.rowHeightService.index(i);
+    const a = this.rowHeightService.index(i + r), h = Math.max(s + this.pageSize - this.total, 0);
+    if (s = Math.max(s - h, 0), o && a >= this.lastLoaded && this.lastLoaded < this.total - 1)
+      this.firstToLoad = s, this.loadPage(t);
+    else if (e && s < this.firstToLoad) {
+      const l = Math.max(Math.floor(this.pageSize * 0.3) - h, 0);
+      this.firstToLoad = Math.max(s - l, 0), this.loadPage(t);
     }
-    return i;
   }
-  changePage(i, t) {
-    this.attendedSkip = i - this.topCacheCount, this.PageChange && this.PageChange(
+  update() {
+    var i;
+    const t = this.getItemHeights();
+    if (this.firstLoaded > this.firstToLoad) {
+      const e = Math.min(this.firstLoaded - this.firstToLoad, this.pageSize), o = this.getTotalHeight(e, t), r = this.getExpectedTotalHeight(e), s = o - r;
+      s !== 0 && this.adjustScroll(s);
+    }
+    (i = this.rowHeightService) == null || i.update(this.firstToLoad, t), this.setScrollHeightContainerHeight(), this.firstLoaded = this.firstToLoad, this.lastLoaded = this.firstLoaded + t.length - 1;
+  }
+  loadPage(t) {
+    this.rowHeightService && (this.translate(this.rowHeightService.offset(this.firstToLoad)), this.changePage(this.firstToLoad, t));
+  }
+  translate(t, i) {
+    this.scrollableVirtual && this.table && (this.reactVersion <= 17 || i ? this.table.style.transform = "translateY(" + t + "px)" : this.tableTransform = "translateY(" + t + "px)");
+  }
+  changePage(t, i) {
+    this.PageChange && this.PageChange(
       {
-        skip: Math.max(0, i - this.topCacheCount),
+        skip: Math.max(0, t),
         take: this.pageSize
       },
-      t
+      i
     );
   }
-  translate(i, t) {
-    this.tableTranslate = i, this.scrollableVirtual && this.table && (this.reactVersion <= 17 || t ? this.table.style.transform = "translateY(" + i + "px)" : this.tableTransform = "translateY(" + i + "px)");
+  adjustScroll(t) {
+    this.scrollSyncing = !0, this.container && (this.container.scrollTop += t);
   }
-  reset() {
-    this.scrollSyncing = !0, !this.fixedScroll && (this.container && (this.container.scrollTop = 0), this.translate(0, !0));
-  }
-  localScrollUp(i) {
-    if (!this.container)
-      return;
-    const t = this.rowHeights, l = this.container.scrollTop;
-    let s = this.tableTranslate, e = 0;
-    const { topItemsCount: o, topItemsHeight: n, itemsNeededOnScreen: a } = this.topItems(
-      t,
-      !!this.topCacheCount
-    ), h = l - s;
-    if (!(h > n || t.length <= a)) {
-      for (; e < this.topCacheCount + this.attendedSkip - this.realSkip + o && this.propsSkip - e > 0 && !(s + (t[t.length - 1 - e].line + t[t.length - 1 - e].acc) + h <= l); )
-        s -= t[t.length - 1 - e].line + t[t.length - 1 - e].acc, e++;
-      if (e === 0 && this.topCacheCount === 0 && this.attendedSkip > 0 && (s = Math.max(s - t[0].line, 0), e = 1), this.propsSkip - e <= 0 && s > l) {
-        this.translate(0), this.changePage(0, i), this.container.scrollTop = 0;
-        return;
-      }
-      if (s > l && (s = l), s !== this.tableTranslate) {
-        this.translate(Math.max(0, s - n));
-        const r = Math.max(0, this.propsSkip - e - o);
-        this.changePage(r, i);
-      }
+  setScrollHeightContainerHeight() {
+    var t;
+    if (this.scrollableVirtual && this.scrollHeightContainer) {
+      let i = ((t = this.rowHeightService) == null ? void 0 : t.totalHeight()) || 0;
+      i = c ? Math.min(f, i) : i, this.scrollHeightContainer.style.height = i + "px";
     }
   }
-  localScrollDown(i) {
-    if (!this.container)
-      return;
-    const t = this.rowHeights, l = this.container.scrollTop;
-    let s = this.tableTranslate, e = 0;
-    const { topItemsCount: o, topItemsHeight: n, itemsNeededOnScreen: a } = this.topItems(
-      t,
-      !!this.topCacheCount
-    );
-    for (; e < t.length - this.topCacheCount && !(s + t[e].line + t[e].acc > l); )
-      s += t[e].line + t[e].acc, e++;
-    o > this.propsSkip + e || t.length <= a || (e >= t.length - this.topCacheCount && this.propsSkip + e >= this.total ? (this.translate(s - n), this.changePage(this.total - 1 - o, i)) : s !== this.tableTranslate && this.propsSkip + e - o !== this.propsSkip && (this.translate(s - n), this.changePage(this.propsSkip + e - o, i)));
+  getItemHeights() {
+    const t = [];
+    return this.tableBody && Array.from(this.tableBody.children).forEach((i) => {
+      const e = i.getBoundingClientRect().height;
+      i.classList.contains("k-detail-row") ? t[t.length - 1] += e : t.push(e);
+    }), t;
   }
-  scrollNonStrict(i) {
-    const t = this.total * this.prevScrollPos / this.containerHeight;
-    let l = Math.floor(t);
-    l >= this.total && (l = this.total - 1);
-    const s = Math.min(t - l, 1);
-    let e = 0;
-    const o = l - this.propsSkip, n = this.rowHeights;
-    o >= 0 && o <= 1 ? e = -((n[0].line + n[0].acc) * s) : o === -1 && (e = -((n[n.length - 1].line + n[n.length - 1].acc) * s));
-    const { topItemsCount: a, topItemsHeight: h } = this.topItems(n, !!this.topCacheCount);
-    this.translate(
-      Math.max(
-        0,
-        e - h - this.horizontalScrollbarHeight() + this.containerHeight * t / this.total
-      )
-    ), this.changePage(l - a, i);
+  getTotalHeight(t, i) {
+    return i.slice(0, t).reduce((e, o) => e + o, 0);
   }
-  scrollHandler(i) {
-    if (!this.scrollableVirtual)
-      return;
-    if (this.scrollSyncing || !this.container || !this.table) {
-      this.scrollSyncing = !1;
-      return;
-    }
-    const t = this.container.scrollTop, l = this.prevScrollPos;
-    if (this.prevScrollPos = t, this.askedSkip !== void 0) {
-      this.translate(this.containerHeight * this.askedSkip / this.total), this.changePage(this.askedSkip, i), this.prevScrollPos = t, this.askedSkip = void 0;
-      return;
-    }
-    t - l < 0 && t > this.tableTranslate - this.table.scrollHeight / 10 ? this.localScrollUp(i) : t - l > 0 && t < this.tableTranslate + this.table.scrollHeight * 2 / 3 ? this.localScrollDown(i) : this.scrollNonStrict(i), this.prevScrollPos = t;
+  getExpectedTotalHeight(t) {
+    const i = this.rowHeightService;
+    if (!i)
+      return 0;
+    const e = this.firstToLoad + (t - 1);
+    return i.offset(e) + i.height(e) - i.offset(this.firstToLoad);
   }
 }
 export {
-  g as VirtualScroll
+  u as VirtualScroll
 };

package/components/GridDraggableRowsContainer.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),A=require("../GridClientWrapper.js"),y=require("@progress/kendo-react-common"),n=require("./utils.js"),L=require("react-dom"),R=require("@progress/kendo-svg-icons"),X=require("../utils/index.js"),E={zIndex:"19000",position:"absolute",display:"none",visibility:"hidden"},S={zIndex:"20000",display:"flex",position:"fixed",visibility:"hidden",pointerEvents:"none"},J=m=>{const{rowReorderSettings:l,columns:w,unstyled:C}=m,{rowReorder:k,reorderRowDragTargetRef:u,reorderRowDropTargetRef:i,activeDragRowDataItemRef:d,tableBodyElementRef:T}=e.useContext(A.GridContext),[N,h]=e.useState(!1),[O,q]=e.useState(R.cancelIcon),b=e.useRef(null),f=e.useRef(null),c=e.useRef(null),I=e.useRef(null),p=e.useRef(!1),D=e.useRef(null),v=typeof l=="object"?l.enabled:l;e.useEffect(()=>{T.current=b.current},[]);const P=r=>{const t=r.originalEvent.target;t.closest(".k-drag-cell")&&(I.current=r.offsetY,p.current=!0,u.current=t.closest(".k-table-row"))},M=r=>{!p.current||!v||!d.current||(u.current&&(u.current.style.userSelect="none"),h(!0))},Y=r=>{if(!p.current&&!f.current)return;const{clientX:t,clientY:o}=r,a=I.current,g={x:t,y:o-a};f.current&&(f.current.style.left=`${g.x}px`,f.current.style.top=`${g.y}px`,f.current.style.visibility="visible"),F(r)},B=r=>{var o;if(!v||!d.current)return;h(!1);const t=Number((o=i.current)==null?void 0:o.getAttribute("absolute-row-index"));k(r,t,D.current),p.current=!1};y.useDraggable(b,{onPress:P,onDragStart:M,onDrag:Y,onDragEnd:B});const F=r=>{D.current=z(r),G()},G=()=>{var a;if(D.current===n.dropDirection.forbidden||!i.current){$();return}V();const r=n.getOffset(i.current);let t=r.top;const o=r.left+(((a=c.current)==null?void 0:a.offsetWidth)||0)/2;D.current===n.dropDirection.after&&(t+=i.current.offsetHeight),c.current&&(c.current.style.top=`${t}px`,c.current.style.left=`${o}px`,c.current.style.visibility="visible")},$=()=>{c.current&&(c.current.style.display="none")},V=()=>{c.current&&(c.current.style.display="")},j=()=>{if(d.current){if(l.dragClue)return typeof l.dragClue=="string"?l.dragClue:l.dragClue(d.current);{const r=w.find(o=>!o.hidden&&o.columnType==="data");return d.current[r.field]}}},z=r=>{if(i.current===u.current||!i.current||n.isDifferentParent(i.current,u.current))return n.dropDirection.forbidden;const t=i.current.getBoundingClientRect(),a=t.height/2,g=r.clientY,x=t.top;let s=null;g<x+a?s=n.dropDirection.before:g>=x+t.height-a&&(s=n.dropDirection.after),(s===n.dropDirection.before&&i.current===u.current.nextElementSibling||s===n.dropDirection.after&&i.current===u.current.previousElementSibling)&&(s=n.dropDirection.forbidden);const W=s===n.dropDirection.forbidden?R.cancelIcon:R.insertMiddleIcon;return q(W),s},H=e.useMemo(j,[d.current]);return e.createElement(e.Fragment,null,N&&L.createPortal(e.createElement(e.Fragment,null,e.createElement("div",{ref:c,style:E,className:y.classNames(C.rowReorder({dropIndicatorMain:!0,dropIndicatorDirection:!0}))},e.createElement("div",{className:"k-drop-hint-start"}),e.createElement("div",{className:"k-drop-hint-line"})),e.createElement("div",{ref:f,style:S,className:y.classNames(C.rowReorder({dragClueMain:!0,dragClueOperation:!0}))},e.createElement(y.SvgIcon,{className:"k-drag-status",icon:O}),H)),document.body),X.cloneReactElement(m.children,{ref:b}))};exports.GridReorderableRowsContainer=J;exports.dropIndicatorStyles=E;exports.hintClueStyles=S;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react"),X=require("../GridClientWrapper.js"),m=require("@progress/kendo-react-common"),n=require("./utils.js"),J=require("react-dom"),b=require("@progress/kendo-svg-icons"),K=require("../utils/index.js"),w={zIndex:"19000",position:"absolute",display:"none",visibility:"hidden"},T={zIndex:"20000",display:"flex",position:"fixed",visibility:"hidden",pointerEvents:"none"},Q=C=>{const{rowReorderSettings:u,columns:k,unstyled:h}=C,{rowReorder:N,reorderRowDragTargetRef:a,reorderRowDropTargetRef:i,activeDragRowDataItemRef:d,tableBodyElementRef:O}=e.useContext(X.GridContext),[q,I]=e.useState(!1),[P,M]=e.useState(b.cancelIcon),y=e.useRef(null),f=e.useRef(null),c=e.useRef(null),v=e.useRef(null),p=e.useRef(!1),D=e.useRef(null),R=e.useRef(null),E=typeof u=="object"?u.enabled:u;e.useEffect(()=>{O.current=y.current},[]);const Y=r=>{var s;const t=r.originalEvent.target;t.closest(".k-drag-cell")&&(v.current=r.offsetY,p.current=!0,a.current=t.closest(".k-table-row"),R.current=(s=a.current)==null?void 0:s.parentElement)},B=r=>{!p.current||!E||!d.current||(a.current&&(a.current.style.userSelect="none"),I(!0))},F=r=>{if(!p.current&&!f.current)return;const{clientX:t,clientY:o}=r,s=v.current,g={x:t,y:o-s};f.current&&(f.current.style.left=`${g.x}px`,f.current.style.top=`${g.y}px`,f.current.style.visibility="visible"),$(r)},G=r=>{var o;if(!E||!d.current)return;I(!1);const t=Number((o=i.current)==null?void 0:o.getAttribute("absolute-row-index"));N(r,t,D.current),p.current=!1,R.current=null};m.useDraggable(y,{onPress:Y,onDragStart:B,onDrag:F,onDragEnd:G});const $=r=>{D.current=W(r),V()},V=()=>{var s;if(D.current===n.dropDirection.forbidden||!i.current){j();return}z();const r=n.getOffset(i.current);let t=r.top;const o=r.left+(((s=c.current)==null?void 0:s.offsetWidth)||0)/2;D.current===n.dropDirection.after&&(t+=i.current.offsetHeight),c.current&&(c.current.style.top=`${t}px`,c.current.style.left=`${o}px`,c.current.style.visibility="visible")},j=()=>{c.current&&(c.current.style.display="none")},z=()=>{c.current&&(c.current.style.display="")},H=()=>{if(d.current){if(u.dragClue){if(typeof u.dragClue=="string")return u.dragClue}else{const r=k.find(o=>!o.hidden&&o.columnType==="data");return d.current[r.field]}return u.dragClue(d.current)}},W=r=>{var S;if(i.current===a.current||!i.current||((S=i.current)==null?void 0:S.parentElement)!==R.current)return n.dropDirection.forbidden;const t=i.current.getBoundingClientRect(),s=t.height/2,g=r.clientY,x=t.top;let l=null;g<x+s?l=n.dropDirection.before:g>=x+t.height-s&&(l=n.dropDirection.after),(l===n.dropDirection.before&&i.current===a.current.nextElementSibling||l===n.dropDirection.after&&i.current===a.current.previousElementSibling)&&(l=n.dropDirection.forbidden);const L=l===n.dropDirection.forbidden?b.cancelIcon:b.insertMiddleIcon;return M(L),l},A=e.useMemo(H,[d.current]);return e.createElement(e.Fragment,null,q&&J.createPortal(e.createElement(e.Fragment,null,e.createElement("div",{ref:c,style:w,className:m.classNames(h.rowReorder({dropIndicatorMain:!0,dropIndicatorDirection:!0}))},e.createElement("div",{className:"k-drop-hint-start"}),e.createElement("div",{className:"k-drop-hint-line"})),e.createElement("div",{ref:f,style:T,className:m.classNames(h.rowReorder({dragClueMain:!0,dragClueOperation:!0}))},e.createElement(m.SvgIcon,{className:"k-drag-status",icon:P}),A)),document.body),K.cloneReactElement(C.children,{ref:y}))};exports.GridReorderableRowsContainer=Q;exports.dropIndicatorStyles=w;exports.hintClueStyles=T;

package/components/GridDraggableRowsContainer.mjs

@@ -7,100 +7,104 @@
  */
 "use client";
 import e from "react";
-import { GridContext as z } from "../GridClientWrapper.mjs";
-import { useDraggable as G, classNames as v, SvgIcon as H } from "@progress/kendo-react-common";
-import { dropDirection as o, getOffset as _, isDifferentParent as j } from "./utils.mjs";
-import A from "react-dom";
-import { cancelIcon as E, insertMiddleIcon as L } from "@progress/kendo-svg-icons";
-import { cloneReactElement as W } from "../utils/index.mjs";
-const X = {
+import { GridContext as H } from "../GridClientWrapper.mjs";
+import { useDraggable as _, classNames as x, SvgIcon as j } from "@progress/kendo-react-common";
+import { dropDirection as o, getOffset as A } from "./utils.mjs";
+import L from "react-dom";
+import { cancelIcon as w, insertMiddleIcon as W } from "@progress/kendo-svg-icons";
+import { cloneReactElement as X } from "../utils/index.mjs";
+const q = {
   zIndex: "19000",
   position: "absolute",
   display: "none",
   visibility: "hidden"
-}, q = {
+}, J = {
   zIndex: "20000",
   display: "flex",
   position: "fixed",
   visibility: "hidden",
   pointerEvents: "none"
-}, ce = (b) => {
-  const { rowReorderSettings: l, columns: x, unstyled: y } = b, {
-    rowReorder: w,
-    reorderRowDragTargetRef: a,
+}, se = (b) => {
+  const { rowReorderSettings: a, columns: S, unstyled: y } = b, {
+    rowReorder: T,
+    reorderRowDragTargetRef: u,
     reorderRowDropTargetRef: i,
     activeDragRowDataItemRef: d,
-    tableBodyElementRef: S
-  } = e.useContext(z), [T, R] = e.useState(!1), [k, N] = e.useState(E), D = e.useRef(null), f = e.useRef(null), c = e.useRef(null), C = e.useRef(null), p = e.useRef(!1), m = e.useRef(null), h = typeof l == "object" ? l.enabled : l;
+    tableBodyElementRef: k
+  } = e.useContext(H), [N, C] = e.useState(!1), [O, P] = e.useState(w), D = e.useRef(null), f = e.useRef(null), c = e.useRef(null), h = e.useRef(null), p = e.useRef(!1), m = e.useRef(null), R = e.useRef(null), E = typeof a == "object" ? a.enabled : a;
   e.useEffect(() => {
-    S.current = D.current;
-  }, []), G(D, {
-    onPress: (t) => {
-      const r = t.originalEvent.target;
-      r.closest(".k-drag-cell") && (C.current = t.offsetY, p.current = !0, a.current = r.closest(".k-table-row"));
+    k.current = D.current;
+  }, []), _(D, {
+    onPress: (r) => {
+      var s;
+      const t = r.originalEvent.target;
+      t.closest(".k-drag-cell") && (h.current = r.offsetY, p.current = !0, u.current = t.closest(".k-table-row"), R.current = (s = u.current) == null ? void 0 : s.parentElement);
     },
-    onDragStart: (t) => {
-      !p.current || !h || !d.current || (a.current && (a.current.style.userSelect = "none"), R(!0));
+    onDragStart: (r) => {
+      !p.current || !E || !d.current || (u.current && (u.current.style.userSelect = "none"), C(!0));
     },
-    onDrag: (t) => {
+    onDrag: (r) => {
       if (!p.current && !f.current)
         return;
-      const { clientX: r, clientY: n } = t, u = C.current, g = { x: r, y: n - u };
-      f.current && (f.current.style.left = `${g.x}px`, f.current.style.top = `${g.y}px`, f.current.style.visibility = "visible"), O(t);
+      const { clientX: t, clientY: n } = r, s = h.current, g = { x: t, y: n - s };
+      f.current && (f.current.style.left = `${g.x}px`, f.current.style.top = `${g.y}px`, f.current.style.visibility = "visible"), M(r);
     },
-    onDragEnd: (t) => {
+    onDragEnd: (r) => {
       var n;
-      if (!h || !d.current)
+      if (!E || !d.current)
         return;
-      R(!1);
-      const r = Number((n = i.current) == null ? void 0 : n.getAttribute("absolute-row-index"));
-      w(t, r, m.current), p.current = !1;
+      C(!1);
+      const t = Number((n = i.current) == null ? void 0 : n.getAttribute("absolute-row-index"));
+      T(r, t, m.current), p.current = !1, R.current = null;
     }
   });
-  const O = (t) => {
-    m.current = F(t), P();
-  }, P = () => {
-    var u;
+  const M = (r) => {
+    m.current = V(r), Y();
+  }, Y = () => {
+    var s;
     if (m.current === o.forbidden || !i.current) {
-      M();
+      B();
       return;
     }
-    Y();
-    const t = _(i.current);
-    let r = t.top;
-    const n = t.left + (((u = c.current) == null ? void 0 : u.offsetWidth) || 0) / 2;
-    m.current === o.after && (r += i.current.offsetHeight), c.current && (c.current.style.top = `${r}px`, c.current.style.left = `${n}px`, c.current.style.visibility = "visible");
-  }, M = () => {
+    F();
+    const r = A(i.current);
+    let t = r.top;
+    const n = r.left + (((s = c.current) == null ? void 0 : s.offsetWidth) || 0) / 2;
+    m.current === o.after && (t += i.current.offsetHeight), c.current && (c.current.style.top = `${t}px`, c.current.style.left = `${n}px`, c.current.style.visibility = "visible");
+  }, B = () => {
     c.current && (c.current.style.display = "none");
-  }, Y = () => {
+  }, F = () => {
     c.current && (c.current.style.display = "");
-  }, B = () => {
+  }, $ = () => {
     if (d.current) {
-      if (l.dragClue)
-        return typeof l.dragClue == "string" ? l.dragClue : l.dragClue(d.current);
-      {
-        const t = x.find((n) => !n.hidden && n.columnType === "data");
-        return d.current[t.field];
+      if (a.dragClue) {
+        if (typeof a.dragClue == "string")
+          return a.dragClue;
+      } else {
+        const r = S.find((n) => !n.hidden && n.columnType === "data");
+        return d.current[r.field];
       }
+      return a.dragClue(d.current);
     }
-  }, F = (t) => {
-    if (i.current === a.current || !i.current)
+  }, V = (r) => {
+    var v;
+    if (i.current === u.current || !i.current)
       return o.forbidden;
-    if (j(i.current, a.current))
+    if (((v = i.current) == null ? void 0 : v.parentElement) !== R.current)
       return o.forbidden;
-    const r = i.current.getBoundingClientRect(), u = r.height / 2, g = t.clientY, I = r.top;
-    let s = null;
-    g < I + u ? s = o.before : g >= I + r.height - u && (s = o.after), s === o.before && i.current === a.current.nextElementSibling ? s = o.forbidden : s === o.after && i.current === a.current.previousElementSibling && (s = o.forbidden);
-    const V = s === o.forbidden ? E : L;
-    return N(V), s;
-  }, $ = e.useMemo(B, [d.current]);
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, T && A.createPortal(
+    const t = i.current.getBoundingClientRect(), s = t.height / 2, g = r.clientY, I = t.top;
+    let l = null;
+    g < I + s ? l = o.before : g >= I + t.height - s && (l = o.after), l === o.before && i.current === u.current.nextElementSibling ? l = o.forbidden : l === o.after && i.current === u.current.previousElementSibling && (l = o.forbidden);
+    const G = l === o.forbidden ? w : W;
+    return P(G), l;
+  }, z = e.useMemo($, [d.current]);
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, N && L.createPortal(
     /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(
       "div",
       {
         ref: c,
-        style: X,
-        className: v(
+        style: q,
+        className: x(
           y.rowReorder({ dropIndicatorMain: !0, dropIndicatorDirection: !0 })
         )
       },
@@ -110,19 +114,19 @@ const X = {
       "div",
       {
         ref: f,
-        style: q,
-        className: v(y.rowReorder({ dragClueMain: !0, dragClueOperation: !0 }))
+        style: J,
+        className: x(y.rowReorder({ dragClueMain: !0, dragClueOperation: !0 }))
       },
-      /* @__PURE__ */ e.createElement(H, { className: "k-drag-status", icon: k }),
-      $
+      /* @__PURE__ */ e.createElement(j, { className: "k-drag-status", icon: O }),
+      z
     )),
     document.body
-  ), W(b.children, {
+  ), X(b.children, {
     ref: D
   }));
 };
 export {
-  ce as GridReorderableRowsContainer,
-  X as dropIndicatorStyles,
-  q as hintClueStyles
+  se as GridReorderableRowsContainer,
+  q as dropIndicatorStyles,
+  J as hintClueStyles
 };

package/components/VirtualScrollHeightContainer.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),c=require("../GridClientWrapper.js");function l(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const o=l(i),a=e=>{const t=o.useContext(c.GridContext);return o.createElement("div",{style:e.isVirtualScroll?{height:t.vsRef.current.containerHeight+"px"}:{}})};exports.VirtualScrollHeightContainer=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react"),c=require("../GridClientWrapper.js");function a(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const r in e)if(r!=="default"){const n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:()=>e[r]})}}return t.default=e,Object.freeze(t)}const o=a(i),l=e=>{const t=o.useContext(c.GridContext);return o.createElement("div",{ref:t.virtualScrollHeightContainerRef})};exports.VirtualScrollHeightContainer=l;

package/components/VirtualScrollHeightContainer.mjs

@@ -7,10 +7,10 @@
  */
 "use client";
 import * as t from "react";
-import { GridContext as o } from "../GridClientWrapper.mjs";
-const n = (e) => {
-  const r = t.useContext(o);
-  return /* @__PURE__ */ t.createElement("div", { style: e.isVirtualScroll ? { height: r.vsRef.current.containerHeight + "px" } : {} });
+import { GridContext as e } from "../GridClientWrapper.mjs";
+const n = (o) => {
+  const r = t.useContext(e);
+  return /* @__PURE__ */ t.createElement("div", { ref: r.virtualScrollHeightContainerRef });
 };
 export {
   n as VirtualScrollHeightContainer

package/components/table/GridTableScrollable.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),c=require("../../GridClientWrapper.js"),o=require("@progress/kendo-react-data-tools");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const a=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,a.get?a:{enumerable:!0,get:()=>e[l]})}}return t.default=e,Object.freeze(t)}const r=i(n),s=e=>{const t=r.useContext(c.GridContext);return r.createElement(o.TableSelection,{selectable:e.selectable,onRelease:t.selectionRelease,childRef:l=>{t.tableElementRef.current=l}},r.createElement("table",{className:e.tableClassName,role:"presentation",style:e.tableStyle,ref:t.tableElementRef},e.children))};exports.GridTableScrollable=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react"),o=require("../../GridClientWrapper.js"),s=require("@progress/kendo-react-data-tools");function i(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(t,l,r.get?r:{enumerable:!0,get:()=>e[l]})}}return t.default=e,Object.freeze(t)}const a=i(c),b=e=>{var r;const t=a.useContext(o.GridContext),l={...e.tableStyle};return(r=t.vsRef.current)!=null&&r.tableTransform&&(l.transform=t.vsRef.current.tableTransform),a.createElement(s.TableSelection,{selectable:e.selectable,onRelease:t.selectionRelease,childRef:n=>{t.tableElementRef.current=n}},a.createElement("table",{className:e.tableClassName,role:"presentation",style:l,ref:t.tableElementRef},e.children))};exports.GridTableScrollable=b;

package/components/table/GridTableScrollable.mjs

@@ -7,31 +7,32 @@
  */
 "use client";
 import * as l from "react";
-import { GridContext as r } from "../../GridClientWrapper.mjs";
-import { TableSelection as n } from "@progress/kendo-react-data-tools";
-const m = (e) => {
-  const t = l.useContext(r);
-  return /* @__PURE__ */ l.createElement(
-    n,
+import { GridContext as o } from "../../GridClientWrapper.mjs";
+import { TableSelection as s } from "@progress/kendo-react-data-tools";
+const b = (t) => {
+  var a;
+  const e = l.useContext(o), r = { ...t.tableStyle };
+  return (a = e.vsRef.current) != null && a.tableTransform && (r.transform = e.vsRef.current.tableTransform), /* @__PURE__ */ l.createElement(
+    s,
     {
-      selectable: e.selectable,
-      onRelease: t.selectionRelease,
-      childRef: (a) => {
-        t.tableElementRef.current = a;
+      selectable: t.selectable,
+      onRelease: e.selectionRelease,
+      childRef: (n) => {
+        e.tableElementRef.current = n;
       }
     },
     /* @__PURE__ */ l.createElement(
       "table",
       {
-        className: e.tableClassName,
+        className: t.tableClassName,
         role: "presentation",
-        style: e.tableStyle,
-        ref: t.tableElementRef
+        style: r,
+        ref: e.tableElementRef
       },
-      e.children
+      t.children
     )
   );
 };
 export {
-  m as GridTableScrollable
+  b as GridTableScrollable
 };

package/components/utils.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 s={before:"before",after:"after",forbidden:"forbidden"},u=(t,n)=>(t==null?void 0:t.parentElement)!==(n==null?void 0:n.parentElement);function r(t){const{clientTop:n,clientLeft:o}=D(t),{pageYOffset:f,pageXOffset:e}=b(t),{top:i,left:c}=t.getBoundingClientRect();return{top:i+f-n,left:c+e-o}}const D=t=>t==null?void 0:t.ownerDocument.documentElement,b=t=>t==null?void 0:t.ownerDocument.defaultView;exports.dropDirection=s;exports.getOffset=r;exports.isDifferentParent=u;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i={before:"before",after:"after",forbidden:"forbidden"};function d(t){const{clientTop:o,clientLeft:f}=s(t),{pageYOffset:c,pageXOffset:n}=u(t),{top:r,left:e}=t.getBoundingClientRect();return{top:r+c-o,left:e+n-f}}const s=t=>t==null?void 0:t.ownerDocument.documentElement,u=t=>t==null?void 0:t.ownerDocument.defaultView;exports.dropDirection=i;exports.getOffset=d;

package/components/utils.mjs

@@ -5,21 +5,20 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-const p = {
+const u = {
   before: "before",
   after: "after",
   forbidden: "forbidden"
-}, D = (t, n) => (t == null ? void 0 : t.parentElement) !== (n == null ? void 0 : n.parentElement);
-function b(t) {
-  const { clientTop: n, clientLeft: o } = e(t), { pageYOffset: f, pageXOffset: c } = u(t), { top: i, left: s } = t.getBoundingClientRect();
+};
+function e(o) {
+  const { clientTop: t, clientLeft: f } = d(o), { pageYOffset: c, pageXOffset: n } = s(o), { top: r, left: i } = o.getBoundingClientRect();
   return {
-    top: i + f - n,
-    left: s + c - o
+    top: r + c - t,
+    left: i + n - f
   };
 }
-const e = (t) => t == null ? void 0 : t.ownerDocument.documentElement, u = (t) => t == null ? void 0 : t.ownerDocument.defaultView;
+const d = (o) => o == null ? void 0 : o.ownerDocument.documentElement, s = (o) => o == null ? void 0 : o.ownerDocument.defaultView;
 export {
-  p as dropDirection,
-  b as getOffset,
-  D as isDifferentParent
+  u as dropDirection,
+  e as getOffset
 };