@progress/kendo-react-grid 15.1.0-develop.3 → 15.1.0-develop.4

package/columnMenu/GridColumnMenuWrapper.js

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

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