@progress/kendo-react-grid 15.1.0-develop.1 → 15.1.0-develop.10

package/components/GridEditDialog.mjs

@@ -21,14 +21,14 @@ import { Dialog as Q, DialogActionsBar as U } from "@progress/kendo-react-dialog
 import { Form as T, FormElement as F, FieldWrapper as M, Field as w } from "@progress/kendo-react-form";
 import { GridContext as X } from "../utils/GridContext.mjs";
 import { editDialogTitle as z, messages as S, editDialogSaveButtonTitle as B, editDialogCancelButtonTitle as L } from "../messages/index.mjs";
-const ue = (l) => {
+const ue = (i) => {
   var y;
-  const C = W(), m = q(), i = e.useContext(X), c = (a, t) => {
-    i.onDialogEditSubmit && i.onDialogEditSubmit({ dataItem: a, syntheticEvent: t });
+  const C = W(), m = q(), l = e.useContext(X), c = (a, t) => {
+    l.onDialogEditSubmit && l.onDialogEditSubmit({ dataItem: a, syntheticEvent: t });
   }, n = (a) => {
-    i.onDialogEditCancel && i.onDialogEditCancel({ syntheticEvent: a });
+    l.onDialogEditCancel && l.onDialogEditCancel({ syntheticEvent: a });
   }, k = (a) => {
-    const { validationMessage: t, visited: Y, id: s, valid: Z, editor: R, value: E, label: u, ...f } = a, g = i.mobileMode ? "large" : "medium";
+    const { validationMessage: t, visited: Y, id: s, valid: Z, editor: R, value: E, label: u, ...f } = a, g = l.mobileMode ? "large" : "medium";
     switch (R) {
       case "numeric":
         return /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(v, { editorId: s, className: "k-form-label" }, u, ":"), /* @__PURE__ */ e.createElement("div", { className: "k-form-field-wrap" }, /* @__PURE__ */ e.createElement(
@@ -47,7 +47,7 @@ const ue = (l) => {
             valid: !0,
             ...f,
             value: E,
-            adaptive: i.mobileMode,
+            adaptive: l.mobileMode,
             size: g,
             [p]: !0
           }
@@ -84,28 +84,28 @@ const ue = (l) => {
     navigatable: !1,
     navigatableElements: [],
     expand: !0,
-    title: i.adpativeTitle || I,
+    title: l.adpativeTitle || I,
     suffixActions: /* @__PURE__ */ e.createElement(r, { svgIcon: H, onClick: n, fillMode: "flat" }),
-    animationStyles: m && i.adaptiveColumnMenuRef <= m.small ? { top: 0, width: "100%", height: "100%" } : void 0,
+    animationStyles: m && l.adaptiveColumnMenuRef <= m.small ? { top: 0, width: "100%", height: "100%" } : void 0,
     className: "k-adaptive-actionsheet",
-    position: m && i.adaptiveColumnMenuRef <= m.small ? "fullscreen" : void 0
-  }, { customEditDialog: d } = l, o = (y = l.columns) == null ? void 0 : y.filter((a) => a.editable);
+    position: m && l.adaptiveColumnMenuRef <= m.small ? "fullscreen" : void 0
+  }, { customEditDialog: d } = i, o = (y = i.columns) == null ? void 0 : y.filter((a) => a.editable);
   return /* @__PURE__ */ e.createElement(e.Fragment, null, O.createPortal(
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    /* @__PURE__ */ e.createElement(e.Fragment, null, i.mobileMode ? (
+    /* @__PURE__ */ e.createElement(e.Fragment, null, l.mobileMode ? (
       // eslint-disable-next-line react/jsx-no-useless-fragment
       /* @__PURE__ */ e.createElement(e.Fragment, null, d ? /* @__PURE__ */ e.createElement(
         d,
         {
-          columns: l.columns,
-          dataItem: l.dataItem,
+          columns: i.columns,
+          dataItem: i.dataItem,
           onSubmit: c,
           onCancel: n
         }
       ) : /* @__PURE__ */ e.createElement(
         T,
         {
-          initialValues: l.dataItem,
+          initialValues: i.dataItem,
           onSubmit: c,
           id: "kendo-grid-edit-dialog",
           render: (a) => /* @__PURE__ */ e.createElement(V, { ...A }, /* @__PURE__ */ e.createElement(_, null, /* @__PURE__ */ e.createElement(F, null, o == null ? void 0 : o.map((t) => /* @__PURE__ */ e.createElement(M, { key: t.field }, /* @__PURE__ */ e.createElement(
@@ -116,7 +116,7 @@ const ue = (l) => {
               editor: t.editor,
               component: k,
               label: t.title || t.field,
-              validator: t == null ? void 0 : t.validator
+              validator: t.validator
             }
           ))))), /* @__PURE__ */ e.createElement(G, null, /* @__PURE__ */ e.createElement(
             r,
@@ -146,15 +146,15 @@ const ue = (l) => {
     ) : d ? /* @__PURE__ */ e.createElement(
       d,
       {
-        columns: l.columns,
-        dataItem: l.dataItem,
+        columns: i.columns,
+        dataItem: i.dataItem,
         onSubmit: c,
         onCancel: n
       }
     ) : /* @__PURE__ */ e.createElement(
       T,
       {
-        initialValues: l.dataItem,
+        initialValues: i.dataItem,
         onSubmit: c,
         id: "kendo-grid-edit-dialog",
         render: (a) => /* @__PURE__ */ e.createElement(
@@ -172,7 +172,7 @@ const ue = (l) => {
               editor: t.editor,
               component: k,
               label: t.title || t.field,
-              validator: t == null ? void 0 : t.validator
+              validator: t.validator
             }
           )))),
           /* @__PURE__ */ e.createElement(U, { layout: "start" }, /* @__PURE__ */ e.createElement(

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
+};

package/components/noRecords/GridNoRecordsContainer.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),a=require("@progress/kendo-react-data-tools"),n=require("@progress/kendo-react-common"),l=require("../../utils/GridContext.js");function u(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,r.get?r:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const c=u(d),i=t=>{const o=c.useContext(l.GridContext),e=o.headerRef.current,r=e&&e.table()&&e.table().clientWidth,s=n.uGrid;return c.createElement("div",{key:"no-records",className:n.classNames(s.noRecords({})),style:{width:r}},c.createElement("div",{className:n.classNames(s.noRecordsTemplate({})),[a.KEYBOARD_NAV_DATA_ID]:a.tableKeyboardNavigationTools.generateNavigatableId("no-records",a.tableKeyboardNavigationTools.getIdPrefix(o.navigationStateRef))},t.children))};i.displayName="KendoReactGridNoRecordsContainer";exports.GridNoRecordsContainer=i;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),a=require("@progress/kendo-react-data-tools"),n=require("@progress/kendo-react-common"),l=require("../../utils/GridContext.js");function u(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const r=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(o,e,r.get?r:{enumerable:!0,get:()=>t[e]})}}return o.default=t,Object.freeze(o)}const s=u(d),i=t=>{const o=s.useContext(l.GridContext),e=o.headerRef.current,r=e&&e.table()&&e.table().clientWidth,c=n.uGrid;return s.createElement("div",{key:"no-records",className:n.classNames(c.noRecords({})),style:{width:r}},s.createElement("div",{className:n.classNames(c.noRecordsTemplate({})),style:{minHeight:"4em",height:"auto"},[a.KEYBOARD_NAV_DATA_ID]:a.tableKeyboardNavigationTools.generateNavigatableId("no-records",a.tableKeyboardNavigationTools.getIdPrefix(o.navigationStateRef))},t.children))};i.displayName="KendoReactGridNoRecordsContainer";exports.GridNoRecordsContainer=i;

package/components/noRecords/GridNoRecordsContainer.mjs

@@ -7,21 +7,22 @@
  */
 "use client";
 import * as t from "react";
-import { KEYBOARD_NAV_DATA_ID as i, tableKeyboardNavigationTools as a } from "@progress/kendo-react-data-tools";
-import { classNames as n, uGrid as c } from "@progress/kendo-react-common";
+import { KEYBOARD_NAV_DATA_ID as d, tableKeyboardNavigationTools as a } from "@progress/kendo-react-data-tools";
+import { classNames as i, uGrid as c } from "@progress/kendo-react-common";
 import { GridContext as l } from "../../utils/GridContext.mjs";
-const m = (s) => {
-  const r = t.useContext(l), e = r.headerRef.current, d = e && e.table() && e.table().clientWidth, o = c;
-  return /* @__PURE__ */ t.createElement("div", { key: "no-records", className: n(o.noRecords({})), style: { width: d } }, /* @__PURE__ */ t.createElement(
+const m = (n) => {
+  const o = t.useContext(l), e = o.headerRef.current, s = e && e.table() && e.table().clientWidth, r = c;
+  return /* @__PURE__ */ t.createElement("div", { key: "no-records", className: i(r.noRecords({})), style: { width: s } }, /* @__PURE__ */ t.createElement(
     "div",
     {
-      className: n(o.noRecordsTemplate({})),
-      [i]: a.generateNavigatableId(
+      className: i(r.noRecordsTemplate({})),
+      style: { minHeight: "4em", height: "auto" },
+      [d]: a.generateNavigatableId(
         "no-records",
-        a.getIdPrefix(r.navigationStateRef)
+        a.getIdPrefix(o.navigationStateRef)
       )
     },
-    s.children
+    n.children
   ));
 };
 m.displayName = "KendoReactGridNoRecordsContainer";