@progress/kendo-react-grid 16.2.0-develop.5 → 16.2.0-develop.7

package/VirtualScroll.d.ts

@@ -25,6 +25,7 @@ export declare class VirtualScroll implements VirtualScrollInterface {
     tableTransform: string;
     rowHeightService?: RowHeightService;
     scrollbarOverlaySpacerElement: HTMLDivElement | null;
+    overlaySyncingRef: React.RefObject<boolean> | null;
     private reactVersion;
     private scrollSyncing;
     private pendingTranslate;
@@ -44,6 +45,7 @@ export declare class VirtualScroll implements VirtualScrollInterface {
     private changePage;
     private adjustScroll;
     private setScrollHeightContainerHeight;
+    private applyOverlayBottomPin;
     private getItemHeights;
     private getTotalHeight;
     private getExpectedTotalHeight;

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 d=require("react"),f=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 u=g(d),S=.3;class p{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.scrollbarOverlaySpacerElement=null,this.reactVersion=Number.parseFloat(u.version),this.scrollSyncing=!1,this.pendingTranslate=!1,this.deferredScrollTop=0,this.firstToLoad=0,this.lastScrollTop=0,this.firstLoaded=0,this.lastLoaded=0,this.scrollHandler=this.scrollHandler.bind(this)}reset(){if(this.firstToLoad=0,this.firstLoaded=0,this.lastLoaded=0,this.rowHeightService=void 0,this.fixedScroll){this.lastScrollTop=this.container?this.container.scrollTop:0;return}this.container&&this.container.scrollTop!==0&&(this.scrollSyncing=!0,this.container.scrollTop=0,this.lastScrollTop=0,this.translate(0,!0))}scrollToPosition(t,e,i=!1){var c;if(!this.scrollableVirtual||!this.rowHeightService)return;i&&(this.pendingTranslate=!0,this.deferredScrollTop=t);const s=this.lastScrollTop>=t,a=!s;this.lastScrollTop=t;const l=((c=this.container)==null?void 0:c.offsetHeight)||0;let r=this.rowHeightService.index(t);const h=this.rowHeightService.index(t+l),n=Math.max(r+this.pageSize-this.total,0);r=Math.max(r-n,0),a&&h>=this.lastLoaded&&this.lastLoaded<this.total-1?(this.firstToLoad=r,this.loadPage(e)):(s&&r<this.firstToLoad||r>this.lastLoaded||h<this.firstLoaded)&&this.loadPageWithBuffer(r,n,s,e)}scrollHandler(t){if(this.scrollSyncing){this.scrollSyncing=!1;return}!this.scrollableVirtual||!this.container||!this.table||!this.rowHeightService||this.scrollToPosition(this.container.scrollTop,t)}update(){var e;const t=this.getItemHeights();if(this.firstLoaded>this.firstToLoad){const i=Math.min(this.firstLoaded-this.firstToLoad,this.pageSize),s=this.getTotalHeight(i,t),a=this.getExpectedTotalHeight(i),l=s-a;l!==0&&this.adjustScroll(l)}(e=this.rowHeightService)==null||e.update(this.firstToLoad,t),this.setScrollHeightContainerHeight(),this.firstLoaded=this.firstToLoad,this.lastLoaded=this.firstLoaded+t.length-1,this.pendingTranslate&&this.rowHeightService&&(this.translate(this.rowHeightService.offset(this.firstLoaded),!0),this.container&&(this.scrollSyncing=!0,this.container.scrollTop=this.deferredScrollTop),this.pendingTranslate=!1)}loadPage(t){this.rowHeightService&&(this.pendingTranslate||this.translate(this.rowHeightService.offset(this.firstToLoad)),this.changePage(this.firstToLoad,t))}loadPageWithBuffer(t,e,i,s){const a=i?Math.max(Math.floor(this.pageSize*S)-e,0):0;this.firstToLoad=Math.max(t-a,0),this.loadPage(s)}translate(t,e){this.scrollableVirtual&&this.table&&((this.reactVersion<=17||e)&&(this.table.style.transform="translateY("+t+"px)"),this.reactVersion>17&&(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=f.firefox?Math.min(f.firefoxMaxHeight,e):e,this.scrollHeightContainer.style.height=e+"px",this.scrollbarOverlaySpacerElement&&(this.scrollbarOverlaySpacerElement.style.height=e+"px")}}getItemHeights(){const t=[];return this.tableBody&&Array.from(this.tableBody.children).forEach(e=>{const i=e.offsetHeight;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,s)=>i+s,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=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),f=require("./utils/index.js"),d=require("./utils/proxiedScrollOverlay.js");function p(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 S=p(g),u=.3;class T{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.scrollbarOverlaySpacerElement=null,this.overlaySyncingRef=null,this.reactVersion=Number.parseFloat(S.version),this.scrollSyncing=!1,this.pendingTranslate=!1,this.deferredScrollTop=0,this.firstToLoad=0,this.lastScrollTop=0,this.firstLoaded=0,this.lastLoaded=0,this.scrollHandler=this.scrollHandler.bind(this)}reset(){if(this.firstToLoad=0,this.firstLoaded=0,this.lastLoaded=0,this.rowHeightService=void 0,this.fixedScroll){this.lastScrollTop=this.container?this.container.scrollTop:0;return}this.container&&this.container.scrollTop!==0&&(this.scrollSyncing=!0,this.container.scrollTop=0,this.lastScrollTop=0,this.translate(0,!0))}scrollToPosition(t,e,i=!1){var c;if(!this.scrollableVirtual||!this.rowHeightService)return;i&&(this.pendingTranslate=!0,this.deferredScrollTop=t);const s=this.lastScrollTop>=t,r=!s;this.lastScrollTop=t;const a=((c=this.container)==null?void 0:c.offsetHeight)||0;let l=this.rowHeightService.index(t);const h=this.rowHeightService.index(t+a),n=Math.max(l+this.pageSize-this.total,0);l=Math.max(l-n,0),r&&h>=this.lastLoaded&&this.lastLoaded<this.total-1?(this.firstToLoad=l,this.loadPage(e)):s&&l<this.firstToLoad||l>this.lastLoaded||h<this.firstLoaded?this.loadPageWithBuffer(l,n,s,e):i&&this.pendingTranslate&&this.container&&(this.scrollSyncing=!0,this.container.scrollTop=this.deferredScrollTop,this.pendingTranslate=!1)}scrollHandler(t){if(this.scrollSyncing){this.scrollSyncing=!1;return}!this.scrollableVirtual||!this.container||!this.table||!this.rowHeightService||this.scrollToPosition(this.container.scrollTop,t)}update(){var e;const t=this.getItemHeights();if(this.firstLoaded>this.firstToLoad){const i=Math.min(this.firstLoaded-this.firstToLoad,this.pageSize),s=this.getTotalHeight(i,t),r=this.getExpectedTotalHeight(i),a=s-r;a!==0&&this.adjustScroll(a)}(e=this.rowHeightService)==null||e.update(this.firstToLoad,t),this.setScrollHeightContainerHeight(),this.firstLoaded=this.firstToLoad,this.lastLoaded=this.firstLoaded+t.length-1,this.pendingTranslate&&this.rowHeightService&&(this.translate(this.rowHeightService.offset(this.firstLoaded),!0),this.container&&(this.scrollSyncing=!0,this.container.scrollTop=this.deferredScrollTop),this.pendingTranslate=!1)}loadPage(t){this.rowHeightService&&(this.pendingTranslate||this.translate(this.rowHeightService.offset(this.firstToLoad)),this.changePage(this.firstToLoad,t))}loadPageWithBuffer(t,e,i,s){const r=i?Math.max(Math.floor(this.pageSize*u)-e,0):0;this.firstToLoad=Math.max(t-r,0),this.loadPage(s)}translate(t,e){this.scrollableVirtual&&this.table&&((this.reactVersion<=17||e)&&(this.table.style.transform="translateY("+t+"px)"),this.reactVersion>17&&(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;const i=this.firstToLoad+this.pageSize>=this.total,s=d.isOverlayAtBottom(this.scrollbarOverlaySpacerElement,i);e=f.firefox?Math.min(f.firefoxMaxHeight,e):e,this.scrollHeightContainer.style.height=e+"px",this.scrollbarOverlaySpacerElement&&(this.scrollbarOverlaySpacerElement.style.height=e+"px");const r=s?d.getOverlayBottomPin(this.scrollbarOverlaySpacerElement,this.container):null;r&&this.applyOverlayBottomPin(r)}}applyOverlayBottomPin(t){t.scrollbarOverlay.scrollTop!==t.overlayScrollTop&&(this.overlaySyncingRef&&(this.overlaySyncingRef.current=!0),t.scrollbarOverlay.scrollTop=t.overlayScrollTop),this.container&&this.container.scrollTop!==t.contentScrollTop&&(this.scrollSyncing=!0,this.container.scrollTop=t.contentScrollTop),this.deferredScrollTop=t.contentScrollTop,this.lastScrollTop=t.contentScrollTop}getItemHeights(){const t=[];return this.tableBody&&Array.from(this.tableBody.children).forEach(e=>{const i=e.offsetHeight;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,s)=>i+s,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=T;

package/VirtualScroll.mjs

@@ -7,10 +7,11 @@
  */
 import * as c from "react";
 import { firefox as f, firefoxMaxHeight as d } from "./utils/index.mjs";
-const g = 0.3;
-class p {
+import { isOverlayAtBottom as g, getOverlayBottomPin as p } from "./utils/proxiedScrollOverlay.mjs";
+const S = 0.3;
+class L {
   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.scrollbarOverlaySpacerElement = null, this.reactVersion = Number.parseFloat(c.version), this.scrollSyncing = !1, this.pendingTranslate = !1, this.deferredScrollTop = 0, this.firstToLoad = 0, this.lastScrollTop = 0, this.firstLoaded = 0, this.lastLoaded = 0, this.scrollHandler = this.scrollHandler.bind(this);
+    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.scrollbarOverlaySpacerElement = null, this.overlaySyncingRef = null, this.reactVersion = Number.parseFloat(c.version), this.scrollSyncing = !1, this.pendingTranslate = !1, this.deferredScrollTop = 0, this.firstToLoad = 0, this.lastScrollTop = 0, this.firstLoaded = 0, this.lastLoaded = 0, this.scrollHandler = this.scrollHandler.bind(this);
   }
   reset() {
     if (this.firstToLoad = 0, this.firstLoaded = 0, this.lastLoaded = 0, this.rowHeightService = void 0, this.fixedScroll) {
@@ -24,12 +25,12 @@ class p {
     if (!this.scrollableVirtual || !this.rowHeightService)
       return;
     e && (this.pendingTranslate = !0, this.deferredScrollTop = t);
-    const s = this.lastScrollTop >= t, o = !s;
+    const s = this.lastScrollTop >= t, r = !s;
     this.lastScrollTop = t;
-    const a = ((n = this.container) == null ? void 0 : n.offsetHeight) || 0;
-    let r = this.rowHeightService.index(t);
-    const h = this.rowHeightService.index(t + a), l = Math.max(r + this.pageSize - this.total, 0);
-    r = Math.max(r - l, 0), o && h >= this.lastLoaded && this.lastLoaded < this.total - 1 ? (this.firstToLoad = r, this.loadPage(i)) : (s && r < this.firstToLoad || r > this.lastLoaded || h < this.firstLoaded) && this.loadPageWithBuffer(r, l, s, i);
+    const l = ((n = this.container) == null ? void 0 : n.offsetHeight) || 0;
+    let o = this.rowHeightService.index(t);
+    const a = this.rowHeightService.index(t + l), h = Math.max(o + this.pageSize - this.total, 0);
+    o = Math.max(o - h, 0), r && a >= this.lastLoaded && this.lastLoaded < this.total - 1 ? (this.firstToLoad = o, this.loadPage(i)) : s && o < this.firstToLoad || o > this.lastLoaded || a < this.firstLoaded ? this.loadPageWithBuffer(o, h, s, i) : e && this.pendingTranslate && this.container && (this.scrollSyncing = !0, this.container.scrollTop = this.deferredScrollTop, this.pendingTranslate = !1);
   }
   scrollHandler(t) {
     if (this.scrollSyncing) {
@@ -42,8 +43,8 @@ class p {
     var i;
     const t = this.getItemHeights();
     if (this.firstLoaded > this.firstToLoad) {
-      const e = Math.min(this.firstLoaded - this.firstToLoad, this.pageSize), s = this.getTotalHeight(e, t), o = this.getExpectedTotalHeight(e), a = s - o;
-      a !== 0 && this.adjustScroll(a);
+      const e = Math.min(this.firstLoaded - this.firstToLoad, this.pageSize), s = this.getTotalHeight(e, t), r = this.getExpectedTotalHeight(e), l = s - r;
+      l !== 0 && this.adjustScroll(l);
     }
     (i = this.rowHeightService) == null || i.update(this.firstToLoad, t), this.setScrollHeightContainerHeight(), this.firstLoaded = this.firstToLoad, this.lastLoaded = this.firstLoaded + t.length - 1, this.pendingTranslate && this.rowHeightService && (this.translate(this.rowHeightService.offset(this.firstLoaded), !0), this.container && (this.scrollSyncing = !0, this.container.scrollTop = this.deferredScrollTop), this.pendingTranslate = !1);
   }
@@ -51,8 +52,8 @@ class p {
     this.rowHeightService && (this.pendingTranslate || this.translate(this.rowHeightService.offset(this.firstToLoad)), this.changePage(this.firstToLoad, t));
   }
   loadPageWithBuffer(t, i, e, s) {
-    const o = e ? Math.max(Math.floor(this.pageSize * g) - i, 0) : 0;
-    this.firstToLoad = Math.max(t - o, 0), this.loadPage(s);
+    const r = e ? Math.max(Math.floor(this.pageSize * S) - i, 0) : 0;
+    this.firstToLoad = Math.max(t - r, 0), this.loadPage(s);
   }
   translate(t, i) {
     this.scrollableVirtual && this.table && ((this.reactVersion <= 17 || i) && (this.table.style.transform = "translateY(" + t + "px)"), this.reactVersion > 17 && (this.tableTransform = "translateY(" + t + "px)"));
@@ -73,9 +74,15 @@ class p {
     var t;
     if (this.scrollableVirtual && this.scrollHeightContainer) {
       let i = ((t = this.rowHeightService) == null ? void 0 : t.totalHeight()) || 0;
+      const e = this.firstToLoad + this.pageSize >= this.total, s = g(this.scrollbarOverlaySpacerElement, e);
       i = f ? Math.min(d, i) : i, this.scrollHeightContainer.style.height = i + "px", this.scrollbarOverlaySpacerElement && (this.scrollbarOverlaySpacerElement.style.height = i + "px");
+      const r = s ? p(this.scrollbarOverlaySpacerElement, this.container) : null;
+      r && this.applyOverlayBottomPin(r);
     }
   }
+  applyOverlayBottomPin(t) {
+    t.scrollbarOverlay.scrollTop !== t.overlayScrollTop && (this.overlaySyncingRef && (this.overlaySyncingRef.current = !0), t.scrollbarOverlay.scrollTop = t.overlayScrollTop), this.container && this.container.scrollTop !== t.contentScrollTop && (this.scrollSyncing = !0, this.container.scrollTop = t.contentScrollTop), this.deferredScrollTop = t.contentScrollTop, this.lastScrollTop = t.contentScrollTop;
+  }
   getItemHeights() {
     const t = [];
     return this.tableBody && Array.from(this.tableBody.children).forEach((i) => {
@@ -95,5 +102,5 @@ class p {
   }
 }
 export {
-  p as VirtualScroll
+  L as VirtualScroll
 };

package/components/VirtualScrollOverlay.js

@@ -6,11 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const f=require("react"),g=require("../utils/GridContext.js");function p(r){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const l in r)if(l!=="default"){const t=Object.getOwnPropertyDescriptor(r,l);Object.defineProperty(o,l,t.get?t:{enumerable:!0,get:()=>r[l]})}}return o.default=r,Object.freeze(o)}const e=p(f),v=`
-.k-grid-content--hide-scrollbar::-webkit-scrollbar { display: none; }
-
-.k-grid-scrollbar-overlay::-webkit-scrollbar { width: 17px; }
-.k-grid-scrollbar-overlay::-webkit-scrollbar-track { background: transparent; }
-.k-grid-scrollbar-overlay::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border: 4px solid transparent; background-clip: content-box; border-radius: 8px; min-height: 40px; }
-.k-grid-scrollbar-overlay::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); border: 4px solid transparent; background-clip: content-box; border-radius: 8px; }
-`,k=()=>{const r=e.useContext(g.GridContext),[o,l]=e.useState(!1),t=e.useRef(null),a=e.useCallback(()=>{l(!0),t.current!==null&&clearTimeout(t.current),t.current=setTimeout(()=>l(!1),1e3)},[]);e.useEffect(()=>(r.scrollbarShowCallbackRef&&(r.scrollbarShowCallbackRef.current=a),()=>{r.scrollbarShowCallbackRef&&(r.scrollbarShowCallbackRef.current=null),t.current!==null&&clearTimeout(t.current)}),[r.scrollbarShowCallbackRef,a]),e.useEffect(()=>{const n=()=>{r.vScrollDraggingRef&&(r.vScrollDraggingRef.current=!1)};return document.addEventListener("pointerup",n),()=>document.removeEventListener("pointerup",n)},[r.vScrollDraggingRef]);const b=()=>{r.vScrollDraggingRef&&(r.vScrollDraggingRef.current=!0)},d=n=>{var i,s,u;const c=(i=r.scrollbarContainerRef)==null?void 0:i.current;c&&((u=(s=r.vsRef)==null?void 0:s.current)==null||u.scrollToPosition(c.scrollTop,n,!0))};return e.createElement(e.Fragment,null,e.createElement("style",null,v),e.createElement("div",{ref:r.scrollbarContainerRef,onScroll:d,onMouseEnter:a,onPointerDown:b,className:"k-grid-scrollbar-overlay",style:{position:"absolute",right:0,top:0,bottom:0,width:"17px",overflowY:"scroll",overflowX:"hidden",zIndex:1,opacity:o?1:0,transition:"opacity 0.3s",scrollbarWidth:"auto",scrollbarColor:"rgba(0,0,0,0.25) transparent"}},e.createElement("div",{ref:r.scrollbarSpacerRef})))};exports.VirtualScrollOverlay=k;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),m=require("@progress/kendo-react-common"),y=require("../utils/GridContext.js");function S(e){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const t in e)if(t!=="default"){const l=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(o,t,l.get?l:{enumerable:!0,get:()=>e[t]})}}return o.default=e,Object.freeze(o)}const n=S(b),p=16,d=()=>{const e=m.getScrollbarWidth();return typeof e=="number"?e:0},R=()=>{const e=n.useContext(y.GridContext),o=e.dir==="rtl",[t,l]=n.useState(d),f=t||p;n.useEffect(()=>{const r=()=>l(d());return r(),window.addEventListener("resize",r),document.addEventListener("visibilitychange",r),()=>{window.removeEventListener("resize",r),document.removeEventListener("visibilitychange",r)}},[]),n.useEffect(()=>{const r=()=>{e.vScrollDraggingRef&&(e.vScrollDraggingRef.current=!1)};return document.addEventListener("pointerup",r),()=>document.removeEventListener("pointerup",r)},[e.vScrollDraggingRef]);const v=()=>{e.vScrollDraggingRef&&(e.vScrollDraggingRef.current=!0)},g=r=>{var i,a,s,u;const c=(i=e.scrollbarContainerRef)==null?void 0:i.current;if(c){if((a=e.overlaySyncingRef)!=null&&a.current){e.overlaySyncingRef.current=!1;return}(u=(s=e.vsRef)==null?void 0:s.current)==null||u.scrollToPosition(c.scrollTop,r,!0)}};return n.createElement("div",{ref:e.scrollbarContainerRef,onScroll:g,onPointerDown:v,className:"k-grid-scrollbar-overlay",tabIndex:-1,"aria-hidden":"true",style:{position:"absolute",...o?{left:0}:{right:0},top:0,bottom:0,width:f,zIndex:1,overflowY:"scroll",overflowX:"hidden",transform:"translateZ(0)"}},n.createElement("div",{ref:e.scrollbarSpacerRef,style:{width:1}}))};exports.VirtualScrollOverlay=R;

package/components/VirtualScrollOverlay.mjs

@@ -6,60 +6,62 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as e from "react";
-import { GridContext as f } from "../utils/GridContext.mjs";
-const g = `
-.k-grid-content--hide-scrollbar::-webkit-scrollbar { display: none; }
-
-.k-grid-scrollbar-overlay::-webkit-scrollbar { width: 17px; }
-.k-grid-scrollbar-overlay::-webkit-scrollbar-track { background: transparent; }
-.k-grid-scrollbar-overlay::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.25); border: 4px solid transparent; background-clip: content-box; border-radius: 8px; min-height: 40px; }
-.k-grid-scrollbar-overlay::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.4); border: 4px solid transparent; background-clip: content-box; border-radius: 8px; }
-`, v = () => {
-  const r = e.useContext(f), [b, a] = e.useState(!1), l = e.useRef(null), t = e.useCallback(() => {
-    a(!0), l.current !== null && clearTimeout(l.current), l.current = setTimeout(() => a(!1), 1e3);
-  }, []);
-  e.useEffect(() => (r.scrollbarShowCallbackRef && (r.scrollbarShowCallbackRef.current = t), () => {
-    r.scrollbarShowCallbackRef && (r.scrollbarShowCallbackRef.current = null), l.current !== null && clearTimeout(l.current);
-  }), [r.scrollbarShowCallbackRef, t]), e.useEffect(() => {
-    const o = () => {
-      r.vScrollDraggingRef && (r.vScrollDraggingRef.current = !1);
+import * as t from "react";
+import { getScrollbarWidth as m } from "@progress/kendo-react-common";
+import { GridContext as b } from "../utils/GridContext.mjs";
+const S = 16, s = () => {
+  const e = m();
+  return typeof e == "number" ? e : 0;
+}, h = () => {
+  const e = t.useContext(b), a = e.dir === "rtl", [d, f] = t.useState(s), u = d || S;
+  t.useEffect(() => {
+    const r = () => f(s());
+    return r(), window.addEventListener("resize", r), document.addEventListener("visibilitychange", r), () => {
+      window.removeEventListener("resize", r), document.removeEventListener("visibilitychange", r);
     };
-    return document.addEventListener("pointerup", o), () => document.removeEventListener("pointerup", o);
-  }, [r.vScrollDraggingRef]);
-  const u = () => {
-    r.vScrollDraggingRef && (r.vScrollDraggingRef.current = !0);
-  }, d = (o) => {
-    var c, i, s;
-    const n = (c = r.scrollbarContainerRef) == null ? void 0 : c.current;
-    n && ((s = (i = r.vsRef) == null ? void 0 : i.current) == null || s.scrollToPosition(n.scrollTop, o, !0));
+  }, []), t.useEffect(() => {
+    const r = () => {
+      e.vScrollDraggingRef && (e.vScrollDraggingRef.current = !1);
+    };
+    return document.addEventListener("pointerup", r), () => document.removeEventListener("pointerup", r);
+  }, [e.vScrollDraggingRef]);
+  const v = () => {
+    e.vScrollDraggingRef && (e.vScrollDraggingRef.current = !0);
+  }, g = (r) => {
+    var n, l, i, c;
+    const o = (n = e.scrollbarContainerRef) == null ? void 0 : n.current;
+    if (o) {
+      if ((l = e.overlaySyncingRef) != null && l.current) {
+        e.overlaySyncingRef.current = !1;
+        return;
+      }
+      (c = (i = e.vsRef) == null ? void 0 : i.current) == null || c.scrollToPosition(o.scrollTop, r, !0);
+    }
   };
-  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("style", null, g), /* @__PURE__ */ e.createElement(
+  return /* @__PURE__ */ t.createElement(
     "div",
     {
-      ref: r.scrollbarContainerRef,
-      onScroll: d,
-      onMouseEnter: t,
-      onPointerDown: u,
+      ref: e.scrollbarContainerRef,
+      onScroll: g,
+      onPointerDown: v,
       className: "k-grid-scrollbar-overlay",
+      tabIndex: -1,
+      "aria-hidden": "true",
       style: {
         position: "absolute",
-        right: 0,
+        ...a ? { left: 0 } : { right: 0 },
         top: 0,
         bottom: 0,
-        width: "17px",
+        width: u,
+        zIndex: 1,
         overflowY: "scroll",
         overflowX: "hidden",
-        zIndex: 1,
-        opacity: b ? 1 : 0,
-        transition: "opacity 0.3s",
-        scrollbarWidth: "auto",
-        scrollbarColor: "rgba(0,0,0,0.25) transparent"
+        transform: "translateZ(0)"
       }
     },
-    /* @__PURE__ */ e.createElement("div", { ref: r.scrollbarSpacerRef })
-  ));
+    /* @__PURE__ */ t.createElement("div", { ref: e.scrollbarSpacerRef, style: { width: 1 } })
+  );
 };
 export {
-  v as VirtualScrollOverlay
+  h as VirtualScrollOverlay
 };