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

package/VirtualScroll.d.ts

@@ -24,14 +24,18 @@ export declare class VirtualScroll implements VirtualScrollInterface {
     fixedScroll: boolean;
     tableTransform: string;
     rowHeightService?: RowHeightService;
+    scrollbarOverlaySpacerElement: HTMLDivElement | null;
     private reactVersion;
     private scrollSyncing;
+    private pendingTranslate;
+    private deferredScrollTop;
     private firstToLoad;
     private lastScrollTop;
     private firstLoaded;
     private lastLoaded;
     constructor();
     reset(): void;
+    scrollToPosition(scrollTop: number, e: React.SyntheticEvent<HTMLDivElement>, deferTranslate?: boolean): void;
     scrollHandler(e: React.SyntheticEvent<HTMLDivElement>): void;
     update(): void;
     private loadPage;

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 c=require("react"),n=require("./utils/index.js");function f(r){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const e in r)if(e!=="default"){const i=Object.getOwnPropertyDescriptor(r,e);Object.defineProperty(t,e,i.get?i:{enumerable:!0,get:()=>r[e]})}}return t.default=r,Object.freeze(t)}const d=f(c),g=.3;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(){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))}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,o=!i;this.lastScrollTop=e;const a=this.container.offsetHeight;let s=this.rowHeightService.index(e);const l=this.rowHeightService.index(e+a),h=Math.max(s+this.pageSize-this.total,0);s=Math.max(s-h,0),o&&l>=this.lastLoaded&&this.lastLoaded<this.total-1?(this.firstToLoad=s,this.loadPage(t)):(i&&s<this.firstToLoad||s>this.lastLoaded||l<this.firstLoaded)&&this.loadPageWithBuffer(s,h,i,t)}update(){var e;const t=this.getItemHeights();if(this.firstLoaded>this.firstToLoad){const i=Math.min(this.firstLoaded-this.firstToLoad,this.pageSize),o=this.getTotalHeight(i,t),a=this.getExpectedTotalHeight(i),s=o-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))}loadPageWithBuffer(t,e,i,o){const a=i?Math.max(Math.floor(this.pageSize*g)-e,0):0;this.firstToLoad=Math.max(t-a,0),this.loadPage(o)}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=n.firefox?Math.min(n.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.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,o)=>i+o,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;
+"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;

package/VirtualScroll.mjs

@@ -5,12 +5,12 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as l from "react";
-import { firefox as n, firefoxMaxHeight as c } from "./utils/index.mjs";
-const f = 0.3;
-class u {
+import * as c from "react";
+import { firefox as f, firefoxMaxHeight as d } from "./utils/index.mjs";
+const g = 0.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.reactVersion = Number.parseFloat(l.version), this.scrollSyncing = !1, 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.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) {
@@ -19,35 +19,40 @@ class u {
     }
     this.container && this.container.scrollTop !== 0 && (this.scrollSyncing = !0, this.container.scrollTop = 0, this.lastScrollTop = 0, this.translate(0, !0));
   }
+  scrollToPosition(t, i, e = !1) {
+    var n;
+    if (!this.scrollableVirtual || !this.rowHeightService)
+      return;
+    e && (this.pendingTranslate = !0, this.deferredScrollTop = t);
+    const s = this.lastScrollTop >= t, o = !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);
+  }
   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, s = this.lastScrollTop >= i, o = !s;
-    this.lastScrollTop = i;
-    const r = this.container.offsetHeight;
-    let e = this.rowHeightService.index(i);
-    const a = this.rowHeightService.index(i + r), h = Math.max(e + this.pageSize - this.total, 0);
-    e = Math.max(e - h, 0), o && a >= this.lastLoaded && this.lastLoaded < this.total - 1 ? (this.firstToLoad = e, this.loadPage(t)) : (s && e < this.firstToLoad || e > this.lastLoaded || a < this.firstLoaded) && this.loadPageWithBuffer(e, h, s, t);
+    !this.scrollableVirtual || !this.container || !this.table || !this.rowHeightService || this.scrollToPosition(this.container.scrollTop, t);
   }
   update() {
     var i;
     const t = this.getItemHeights();
     if (this.firstLoaded > this.firstToLoad) {
-      const s = Math.min(this.firstLoaded - this.firstToLoad, this.pageSize), o = this.getTotalHeight(s, t), r = this.getExpectedTotalHeight(s), e = o - r;
-      e !== 0 && this.adjustScroll(e);
+      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);
     }
-    (i = this.rowHeightService) == null || i.update(this.firstToLoad, t), this.setScrollHeightContainerHeight(), this.firstLoaded = this.firstToLoad, this.lastLoaded = this.firstLoaded + t.length - 1;
+    (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);
   }
   loadPage(t) {
-    this.rowHeightService && (this.translate(this.rowHeightService.offset(this.firstToLoad)), this.changePage(this.firstToLoad, t));
+    this.rowHeightService && (this.pendingTranslate || this.translate(this.rowHeightService.offset(this.firstToLoad)), this.changePage(this.firstToLoad, t));
   }
-  loadPageWithBuffer(t, i, s, o) {
-    const r = s ? Math.max(Math.floor(this.pageSize * f) - i, 0) : 0;
-    this.firstToLoad = Math.max(t - r, 0), this.loadPage(o);
+  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);
   }
   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)"));
@@ -68,27 +73,27 @@ class u {
     var t;
     if (this.scrollableVirtual && this.scrollHeightContainer) {
       let i = ((t = this.rowHeightService) == null ? void 0 : t.totalHeight()) || 0;
-      i = n ? Math.min(c, i) : i, this.scrollHeightContainer.style.height = i + "px";
+      i = f ? Math.min(d, i) : i, this.scrollHeightContainer.style.height = i + "px", this.scrollbarOverlaySpacerElement && (this.scrollbarOverlaySpacerElement.style.height = i + "px");
     }
   }
   getItemHeights() {
     const t = [];
     return this.tableBody && Array.from(this.tableBody.children).forEach((i) => {
-      const s = i.offsetHeight;
-      i.classList.contains("k-detail-row") ? t[t.length - 1] += s : t.push(s);
+      const e = i.offsetHeight;
+      i.classList.contains("k-detail-row") ? t[t.length - 1] += e : t.push(e);
     }), t;
   }
   getTotalHeight(t, i) {
-    return i.slice(0, t).reduce((s, o) => s + o, 0);
+    return i.slice(0, t).reduce((e, s) => e + s, 0);
   }
   getExpectedTotalHeight(t) {
     const i = this.rowHeightService;
     if (!i)
       return 0;
-    const s = this.firstToLoad + (t - 1);
-    return i.offset(s) + i.height(s) - i.offset(this.firstToLoad);
+    const e = this.firstToLoad + (t - 1);
+    return i.offset(e) + i.height(e) - i.offset(this.firstToLoad);
   }
 }
 export {
-  u as VirtualScroll
+  p as VirtualScroll
 };

package/components/VirtualScrollOverlay.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import * as React from 'react';
+/**
+ * @hidden
+ */
+export declare const VirtualScrollOverlay: () => React.JSX.Element;

package/components/VirtualScrollOverlay.js

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const 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;

package/components/VirtualScrollOverlay.mjs

@@ -0,0 +1,65 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"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);
+    };
+    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));
+  };
+  return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement("style", null, g), /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      ref: r.scrollbarContainerRef,
+      onScroll: d,
+      onMouseEnter: t,
+      onPointerDown: u,
+      className: "k-grid-scrollbar-overlay",
+      style: {
+        position: "absolute",
+        right: 0,
+        top: 0,
+        bottom: 0,
+        width: "17px",
+        overflowY: "scroll",
+        overflowX: "hidden",
+        zIndex: 1,
+        opacity: b ? 1 : 0,
+        transition: "opacity 0.3s",
+        scrollbarWidth: "auto",
+        scrollbarColor: "rgba(0,0,0,0.25) transparent"
+      }
+    },
+    /* @__PURE__ */ e.createElement("div", { ref: r.scrollbarSpacerRef })
+  ));
+};
+export {
+  v as VirtualScrollOverlay
+};