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

package/columnMenu/GridColumnMenuWrapper.mjs

@@ -6,125 +6,161 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as o from "react";
-import { Popup as V } from "@progress/kendo-react-popup";
-import { useDocument as _, Navigation as H, classNames as U, IconWrap as D, FOCUSABLE_ELEMENTS as q, getActiveElement as J } from "@progress/kendo-react-common";
-import { moreVerticalIcon as Q } from "@progress/kendo-svg-icons";
-import { columnMenu as b, messages as X } from "../messages/index.mjs";
-import { useLocalization as Y } from "@progress/kendo-react-intl";
-import { GridContext as Z } from "../utils/GridContext.mjs";
-import { GridColumnMenuAdaptiveProvider as O } from "./adaptiveContext/GridColumnMenuAdaptiveContext.mjs";
-import { GridAdaptiveColumnMenu as j } from "./adaptiveContent/GridAdaptiveColumnMenu.mjs";
-import ee from "react-dom";
-const ne = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) => q.map((c) => `${r} ${c}`)), oe = [[".k-columnmenu-item"], ...ne], de = (r) => {
-  var y;
-  const c = o.useContext(Z), [d, M] = o.useState(!1), u = o.useRef(null), a = o.useRef(null), l = o.useRef(null), h = o.useRef(0), A = _(u), { columnMenu: i, ...C } = r, { column: s, columnMenuIcon: g, navigatable: p } = r, T = Y(), w = s.title || s.field, S = w ? `${w} ` : "", x = "#", N = (n) => {
-    const e = J(document);
-    clearTimeout(h.current), h.current = window.setTimeout(() => {
-      !c.mobileMode && e && n.relatedTarget !== u.current && a.current && !a.current.contains(e) && m();
+import * as t from "react";
+import { Popup as X } from "@progress/kendo-react-popup";
+import { useDocument as Y, Navigation as Z, classNames as O, IconWrap as L, FOCUSABLE_ELEMENTS as j, getActiveElement as ee } from "@progress/kendo-react-common";
+import { moreVerticalIcon as ne } from "@progress/kendo-svg-icons";
+import { columnMenu as x, messages as te } from "../messages/index.mjs";
+import { useLocalization as oe } from "@progress/kendo-react-intl";
+import { GridContext as re } from "../utils/GridContext.mjs";
+import { GridColumnMenuAdaptiveProvider as ce } from "./adaptiveContext/GridColumnMenuAdaptiveContext.mjs";
+import { GridAdaptiveColumnMenu as se } from "./adaptiveContent/GridAdaptiveColumnMenu.mjs";
+import le from "react-dom";
+const ue = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) => j.map((l) => `${r} ${l}`)), ie = [[".k-columnmenu-item"], ...ue], Me = (r) => {
+  var D;
+  const l = t.useContext(re), [h, g] = t.useState(!1), u = t.useRef(null), f = t.useRef(null), i = t.useRef(null), v = t.useRef(0), G = Y(u), { columnMenu: d, ...p } = r, { column: a, columnMenuIcon: C, navigatable: w } = r, N = oe(), y = a.title || a.field, B = y ? `${y} ` : "", F = "#", I = (n) => {
+    const e = ee(document);
+    clearTimeout(v.current), v.current = window.setTimeout(() => {
+      !l.mobileMode && e && n.relatedTarget !== u.current && f.current && !f.current.contains(e) && E();
     });
-  }, F = () => {
-    clearTimeout(h.current);
-  }, I = (n) => {
-    n.preventDefault(), d && r.onCloseMenu && r.onCloseMenu(), M(!d);
-  }, m = () => {
-    r.onCloseMenu && r.onCloseMenu(), M(!1), !r.navigatable && u.current && u.current.focus();
-  }, K = (n) => {
+  }, K = () => {
+    clearTimeout(v.current);
+  }, z = (n) => {
+    n.preventDefault(), h && r.onCloseMenu && r.onCloseMenu(), g(!h);
+  }, E = () => {
+    r.onCloseMenu && r.onCloseMenu(), g(!1), !r.navigatable && u.current && u.current.focus();
+  }, P = (n) => {
     var e;
     if (n.key === "Tab") {
-      const t = n.target, f = t && ((e = t.closest(".k-grid")) == null ? void 0 : e.getElementsByClassName("k-grid-content")[0]);
-      f && f.scrollWidth > f.clientWidth && t.scrollIntoView({ inline: "center" });
+      const o = n.target, s = o && ((e = o.closest(".k-grid")) == null ? void 0 : e.getElementsByClassName("k-grid-content")[0]);
+      s && s.scrollWidth > s.clientWidth && o.scrollIntoView({ inline: "center" });
     }
-  }, E = o.useMemo(() => r.show !== void 0 ? r.show : d, [r.show, d]), R = (n) => {
+  }, m = t.useMemo(() => r.show !== void 0 ? r.show : h, [r.show, h]);
+  t.useEffect(() => {
+    var R;
+    if (!m || !u.current)
+      return;
+    const n = u.current, e = n.closest(".k-grid-header-wrap"), o = [];
+    let s = n.closest(".k-grid");
+    for (; s; ) {
+      const c = (R = s.parentElement) == null ? void 0 : R.closest(".k-grid-content, .k-virtual-content");
+      if (c)
+        o.push(c), s = c.closest(".k-grid");
+      else
+        break;
+    }
+    const k = () => {
+      g(!1), r.onCloseMenu && r.onCloseMenu();
+    }, A = () => {
+      k();
+    }, S = () => {
+      const c = n.getBoundingClientRect();
+      for (const Q of o) {
+        const T = Q.getBoundingClientRect();
+        if (c.bottom < T.top || c.top > T.bottom) {
+          k();
+          return;
+        }
+      }
+    };
+    return e && e.addEventListener("scroll", A), o.forEach((c) => {
+      c.addEventListener("scroll", S);
+    }), () => {
+      e && e.removeEventListener("scroll", A), o.forEach((c) => {
+        c.removeEventListener("scroll", S);
+      });
+    };
+  }, [m]);
+  const W = (n) => {
     var e;
-    (e = l.current) == null || e.triggerKeyboardEvent(n);
-  }, G = (n) => {
+    (e = i.current) == null || e.triggerKeyboardEvent(n);
+  }, $ = (n) => {
     var e;
-    (e = l.current) == null || e.triggerMouseEvent(n);
-  }, P = (n, e, t) => {
-    t.preventDefault(), t.shiftKey ? e.focusPrevious(n) : e.focusNext(n);
-  }, $ = (n, e, t) => {
-    n && (t.preventDefault(), n.click());
-  }, z = (n, e, t) => {
-    t.preventDefault(), m();
-  }, B = (n, e, t) => {
+    (e = i.current) == null || e.triggerMouseEvent(n);
+  }, V = (n, e, o) => {
+    o.preventDefault(), o.shiftKey ? e.focusPrevious(n) : e.focusNext(n);
+  }, H = (n, e, o) => {
+    n && (o.preventDefault(), n.click());
+  }, _ = (n, e, o) => {
+    o.preventDefault(), E();
+  }, U = (n, e, o) => {
     e.focusElement(n);
-  }, L = (n) => {
-    !n.isAnchorClicked && M(!1);
-  }, v = o.useCallback(
+  }, q = (n) => {
+    !n.isAnchorClicked && g(!1);
+  }, M = t.useCallback(
     (n, e) => {
-      const t = [];
+      const o = [];
       if (!e || typeof e != "object")
         return !1;
       if (Array.isArray(e.filters)) {
-        for (const f of e.filters)
-          if (v(n, f))
+        for (const s of e.filters)
+          if (M(n, s))
             return !0;
       }
-      return "field" in e && typeof e.field == "string" && t.push(e.field), t.includes(n);
+      return "field" in e && typeof e.field == "string" && o.push(e.field), o.includes(n);
     },
     []
-  ), k = o.useCallback((n, e) => !e || !Array.isArray(e) ? !1 : e.some((t) => t.field === n), []), W = o.useMemo(() => s.field && (v(s.field, c.filter) || k(s.field, c.group)), [s.field, c.filter, c.group, v, k]);
-  return o.useEffect(() => (E && a.current && (l.current = new H({
+  ), b = t.useCallback((n, e) => !e || !Array.isArray(e) ? !1 : e.some((o) => o.field === n), []), J = t.useMemo(() => a.field && (M(a.field, l.filter) || b(a.field, l.group)), [a.field, l.filter, l.group, M, b]);
+  return t.useEffect(() => (m && f.current && (i.current = new Z({
     tabIndex: 0,
-    root: a,
-    selectors: oe,
+    root: f,
+    selectors: ie,
     keyboardEvents: {
-      keydown: { Tab: P, Enter: $, Escape: z }
+      keydown: { Tab: V, Enter: H, Escape: _ }
     },
-    mouseEvents: { mousedown: B }
-  }), l.current.focusElement(l.current.first, null)), () => {
-    l.current && (l.current = null);
-  }), [E]), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
+    mouseEvents: { mousedown: U }
+  }), i.current.focusElement(i.current.first, null)), () => {
+    i.current && (i.current = null);
+  }), [m]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "a",
     {
-      className: U("k-grid-header-menu k-grid-column-menu", {
-        "k-active": W
+      className: O("k-grid-header-menu k-grid-column-menu", {
+        "k-active": J
       }),
       ref: u,
-      onClick: I,
-      onKeyDown: K,
-      href: x,
-      tabIndex: p ? -1 : void 0,
-      "aria-label": `${p ? "" : S}${T.toLanguageString(
-        b,
-        X[b]
+      onClick: z,
+      onKeyDown: P,
+      href: F,
+      tabIndex: w ? -1 : void 0,
+      "aria-label": `${w ? "" : B}${N.toLanguageString(
+        x,
+        te[x]
       )}`
     },
-    g ? /* @__PURE__ */ o.createElement(D, { name: g.name, icon: g }) : /* @__PURE__ */ o.createElement(D, { name: "more-vertical", icon: Q })
-  ), /* @__PURE__ */ o.createElement(O, null, c.mobileMode ? /* @__PURE__ */ o.createElement(o.Fragment, null, ee.createPortal(
-    /* @__PURE__ */ o.createElement(
-      j,
+    C ? /* @__PURE__ */ t.createElement(L, { name: C.name, icon: C }) : /* @__PURE__ */ t.createElement(L, { name: "more-vertical", icon: ne })
+  ), /* @__PURE__ */ t.createElement(ce, null, l.mobileMode ? /* @__PURE__ */ t.createElement(t.Fragment, null, le.createPortal(
+    /* @__PURE__ */ t.createElement(
+      se,
       {
-        computedShow: E,
-        ColumnMenu: i,
-        closeMenu: m
+        computedShow: m,
+        ColumnMenu: d,
+        closeMenu: E
       },
-      i && /* @__PURE__ */ o.createElement(i, { ...C, onCloseMenu: m })
+      d && /* @__PURE__ */ t.createElement(d, { ...p, onCloseMenu: E })
     ),
-    (y = A()) == null ? void 0 : y.body
-  )) : /* @__PURE__ */ o.createElement(
-    V,
+    (D = G()) == null ? void 0 : D.body
+  )) : /* @__PURE__ */ t.createElement(
+    X,
     {
       anchor: u.current,
-      show: E,
+      show: m,
       popupClass: "k-grid-columnmenu-popup",
-      onMouseDownOutside: L
+      onMouseDownOutside: q
     },
-    /* @__PURE__ */ o.createElement(
+    /* @__PURE__ */ t.createElement(
       "div",
       {
-        ref: a,
-        onBlur: N,
-        onFocus: F,
-        onMouseDown: G,
-        onKeyDown: R,
+        ref: f,
+        onBlur: I,
+        onFocus: K,
+        onMouseDown: $,
+        onKeyDown: W,
         className: "k-column-menu k-column-menu-md"
       },
-      i && /* @__PURE__ */ o.createElement(i, { ...C, onCloseMenu: m })
+      d && /* @__PURE__ */ t.createElement(d, { ...p, onCloseMenu: E })
     )
   )));
 };
 export {
-  de as GridColumnMenuWrapper
+  Me as GridColumnMenuWrapper
 };

package/components/GridEditDialog.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),x=require("react-dom"),I=require("@progress/kendo-react-layout"),u=require("@progress/kendo-react-buttons"),r=require("@progress/kendo-react-labels"),M=require("@progress/kendo-react-intl"),_=require("@progress/kendo-react-dateinputs"),O=require("@progress/kendo-react-common"),E=require("@progress/kendo-svg-icons"),D=require("@progress/kendo-react-inputs"),C=require("@progress/kendo-react-data-tools"),B=require("@progress/kendo-react-dialogs"),c=require("@progress/kendo-react-form"),w=require("../utils/GridContext.js"),o=require("../messages/index.js");function z(n){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const l in n)if(l!=="default"){const i=Object.getOwnPropertyDescriptor(n,l);Object.defineProperty(d,l,i.get?i:{enumerable:!0,get:()=>n[l]})}}return d.default=n,Object.freeze(d)}const e=z(q),A=n=>{var h;const d=M.useLocalization(),l=O.useAdaptiveModeContext(),i=e.useContext(w.GridContext),g=(a,t)=>{i.onDialogEditSubmit&&i.onDialogEditSubmit({dataItem:a,syntheticEvent:t})},s=a=>{i.onDialogEditCancel&&i.onDialogEditCancel({syntheticEvent:a})},N=a=>{const{validationMessage:t,visited:P,id:f,valid:V,editor:F,value:b,label:k,...S}=a,T=i.mobileMode?"large":"medium";switch(F){case"numeric":return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(D.NumericTextBox,{...S,size:T,value:b,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));case"date":return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(_.DatePicker,{valid:!0,...S,value:b,adaptive:i.mobileMode,size:T,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));case"boolean":return e.createElement("div",{className:"k-form-field-wrap"},e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":  ",e.createElement(D.Checkbox,{...S,size:T,value:b,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));default:return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(D.TextBox,{...S,size:T,value:b||"",[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)))}},p=d.toLanguageString(o.editDialogTitle,o.messages[o.editDialogTitle]),L=d.toLanguageString(o.editDialogSaveButtonTitle,o.messages[o.editDialogSaveButtonTitle]),y=d.toLanguageString(o.editDialogCancelButtonTitle,o.messages[o.editDialogCancelButtonTitle]),R={animation:!0,navigatable:!1,navigatableElements:[],expand:!0,title:i.adpativeTitle||p,suffixActions:e.createElement(u.Button,{svgIcon:E.xIcon,onClick:s,fillMode:"flat"}),animationStyles:l&&i.adaptiveColumnMenuRef<=l.small?{top:0,width:"100%",height:"100%"}:void 0,className:"k-adaptive-actionsheet",position:l&&i.adaptiveColumnMenuRef<=l.small?"fullscreen":void 0},{customEditDialog:v}=n,m=(h=n.columns)==null?void 0:h.filter(a=>a.editable);return e.createElement(e.Fragment,null,x.createPortal(e.createElement(e.Fragment,null,i.mobileMode?e.createElement(e.Fragment,null,v?e.createElement(v,{columns:n.columns,dataItem:n.dataItem,onSubmit:g,onCancel:s}):e.createElement(c.Form,{initialValues:n.dataItem,onSubmit:g,id:"kendo-grid-edit-dialog",render:a=>e.createElement(I.ActionSheet,{...R},e.createElement(I.ActionSheetContent,null,e.createElement(c.FormElement,null,m==null?void 0:m.map(t=>e.createElement(c.FieldWrapper,{key:t.field},e.createElement(c.Field,{name:t.field,id:t.field,editor:t.editor,component:N,label:t.title||t.field,validator:t==null?void 0:t.validator}))))),e.createElement(I.ActionSheetFooter,null,e.createElement(u.Button,{onClick:s,type:"reset",icon:"cancel",size:"large",svgIcon:E.cancelIcon},y),e.createElement(u.Button,{type:"submit",themeColor:"primary",size:"large",disabled:!a.allowSubmit||!a.valid,onClick:a.onSubmit,icon:"save",svgIcon:E.saveIcon},L)))})):v?e.createElement(v,{columns:n.columns,dataItem:n.dataItem,onSubmit:g,onCancel:s}):e.createElement(c.Form,{initialValues:n.dataItem,onSubmit:g,id:"kendo-grid-edit-dialog",render:a=>e.createElement(B.Dialog,{title:p,width:450,onClose:t=>s(t.syntheticEvent)},e.createElement(c.FormElement,null,m==null?void 0:m.map(t=>e.createElement(c.FieldWrapper,{key:t.field},e.createElement(c.Field,{name:t.field,id:t.field,editor:t.editor,component:N,label:t.title||t.field,validator:t==null?void 0:t.validator})))),e.createElement(B.DialogActionsBar,{layout:"start"},e.createElement(u.Button,{type:"submit",themeColor:"primary",disabled:!a.allowSubmit||!a.valid,onClick:a.onSubmit,icon:"save",svgIcon:E.saveIcon},L),e.createElement(u.Button,{onClick:s,type:"reset",icon:"cancel",svgIcon:E.cancelIcon},y)))})),document.body))};exports.GridEditDialog=A;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),x=require("react-dom"),I=require("@progress/kendo-react-layout"),u=require("@progress/kendo-react-buttons"),r=require("@progress/kendo-react-labels"),M=require("@progress/kendo-react-intl"),_=require("@progress/kendo-react-dateinputs"),O=require("@progress/kendo-react-common"),E=require("@progress/kendo-svg-icons"),D=require("@progress/kendo-react-inputs"),C=require("@progress/kendo-react-data-tools"),B=require("@progress/kendo-react-dialogs"),c=require("@progress/kendo-react-form"),w=require("../utils/GridContext.js"),o=require("../messages/index.js");function z(n){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const i in n)if(i!=="default"){const l=Object.getOwnPropertyDescriptor(n,i);Object.defineProperty(d,i,l.get?l:{enumerable:!0,get:()=>n[i]})}}return d.default=n,Object.freeze(d)}const e=z(q),A=n=>{var h;const d=M.useLocalization(),i=O.useAdaptiveModeContext(),l=e.useContext(w.GridContext),g=(a,t)=>{l.onDialogEditSubmit&&l.onDialogEditSubmit({dataItem:a,syntheticEvent:t})},m=a=>{l.onDialogEditCancel&&l.onDialogEditCancel({syntheticEvent:a})},N=a=>{const{validationMessage:t,visited:P,id:f,valid:V,editor:F,value:b,label:k,...S}=a,T=l.mobileMode?"large":"medium";switch(F){case"numeric":return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(D.NumericTextBox,{...S,size:T,value:b,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));case"date":return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(_.DatePicker,{valid:!0,...S,value:b,adaptive:l.mobileMode,size:T,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));case"boolean":return e.createElement("div",{className:"k-form-field-wrap"},e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":  ",e.createElement(D.Checkbox,{...S,size:T,value:b,[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)));default:return e.createElement(e.Fragment,null,e.createElement(r.Label,{editorId:f,className:"k-form-label"},k,":"),e.createElement("div",{className:"k-form-field-wrap"},e.createElement(D.TextBox,{...S,size:T,value:b||"",[C.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),t&&e.createElement(r.Error,null,t)))}},p=d.toLanguageString(o.editDialogTitle,o.messages[o.editDialogTitle]),L=d.toLanguageString(o.editDialogSaveButtonTitle,o.messages[o.editDialogSaveButtonTitle]),y=d.toLanguageString(o.editDialogCancelButtonTitle,o.messages[o.editDialogCancelButtonTitle]),R={animation:!0,navigatable:!1,navigatableElements:[],expand:!0,title:l.adpativeTitle||p,suffixActions:e.createElement(u.Button,{svgIcon:E.xIcon,onClick:m,fillMode:"flat"}),animationStyles:i&&l.adaptiveColumnMenuRef<=i.small?{top:0,width:"100%",height:"100%"}:void 0,className:"k-adaptive-actionsheet",position:i&&l.adaptiveColumnMenuRef<=i.small?"fullscreen":void 0},{customEditDialog:v}=n,s=(h=n.columns)==null?void 0:h.filter(a=>a.editable);return e.createElement(e.Fragment,null,x.createPortal(e.createElement(e.Fragment,null,l.mobileMode?e.createElement(e.Fragment,null,v?e.createElement(v,{columns:n.columns,dataItem:n.dataItem,onSubmit:g,onCancel:m}):e.createElement(c.Form,{initialValues:n.dataItem,onSubmit:g,id:"kendo-grid-edit-dialog",render:a=>e.createElement(I.ActionSheet,{...R},e.createElement(I.ActionSheetContent,null,e.createElement(c.FormElement,null,s==null?void 0:s.map(t=>e.createElement(c.FieldWrapper,{key:t.field},e.createElement(c.Field,{name:t.field,id:t.field,editor:t.editor,component:N,label:t.title||t.field,validator:t.validator}))))),e.createElement(I.ActionSheetFooter,null,e.createElement(u.Button,{onClick:m,type:"reset",icon:"cancel",size:"large",svgIcon:E.cancelIcon},y),e.createElement(u.Button,{type:"submit",themeColor:"primary",size:"large",disabled:!a.allowSubmit||!a.valid,onClick:a.onSubmit,icon:"save",svgIcon:E.saveIcon},L)))})):v?e.createElement(v,{columns:n.columns,dataItem:n.dataItem,onSubmit:g,onCancel:m}):e.createElement(c.Form,{initialValues:n.dataItem,onSubmit:g,id:"kendo-grid-edit-dialog",render:a=>e.createElement(B.Dialog,{title:p,width:450,onClose:t=>m(t.syntheticEvent)},e.createElement(c.FormElement,null,s==null?void 0:s.map(t=>e.createElement(c.FieldWrapper,{key:t.field},e.createElement(c.Field,{name:t.field,id:t.field,editor:t.editor,component:N,label:t.title||t.field,validator:t.validator})))),e.createElement(B.DialogActionsBar,{layout:"start"},e.createElement(u.Button,{type:"submit",themeColor:"primary",disabled:!a.allowSubmit||!a.valid,onClick:a.onSubmit,icon:"save",svgIcon:E.saveIcon},L),e.createElement(u.Button,{onClick:m,type:"reset",icon:"cancel",svgIcon:E.cancelIcon},y)))})),document.body))};exports.GridEditDialog=A;

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";