@progress/kendo-react-grid 7.5.0-develop.19 → 7.5.0-develop.20

package/columnMenu/GridColumnMenuWrapper.js

@@ -5,4 +5,4 @@
  * 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 N=require("react"),O=require("@progress/kendo-react-popup"),i=require("@progress/kendo-react-common"),P=require("@progress/kendo-svg-icons"),E=require("../messages/index.js"),_=require("@progress/kendo-react-intl");function j(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const u=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(r,l,u.get?u:{enumerable:!0,get:()=>e[l]})}}return r.default=e,Object.freeze(r)}const o=j(N),z=[".k-columnmenu-item-content",".k-filter-menu-container"].map(e=>i.TABBABLE_ELEMENTS.map(r=>`${e} ${r}`)),W=[[".k-tabstrip-items"],[".k-columnmenu-item"],...z],$=e=>{const[r,l]=o.useState(!1),u=o.useRef(null),a=o.useRef(null),s=o.useRef(null),m=o.useRef(0),{columnMenu:h,...v}=e,{column:b}=e,w=_.useLocalization(),k=b.title||b.field,M=k?`${k} `:"",y="#",p=n=>{const t=i.getActiveElement(document);clearTimeout(m.current),m.current=window.setTimeout(()=>{t&&n.relatedTarget!==u.current&&a.current&&!a.current.contains(t)&&f()})},C=()=>{clearTimeout(m.current)},D=n=>{n.preventDefault(),r&&e.onCloseMenu&&e.onCloseMenu(),l(!r)},f=()=>{e.onCloseMenu&&e.onCloseMenu(),l(!1),!e.navigatable&&u.current&&u.current.focus()},S=n=>{var t;if(n.keyCode===i.Keys.tab){const c=n.target,g=c&&((t=c.closest(".k-grid"))==null?void 0:t.getElementsByClassName("k-grid-content")[0]);g&&g.scrollWidth>g.clientWidth&&c.scrollIntoView({inline:"center"})}},d=o.useMemo(()=>e.show!==void 0?e.show:r,[e.show,r]),T=n=>{var t;(t=s.current)==null||t.triggerKeyboardEvent(n)},R=n=>{var t;(t=s.current)==null||t.triggerMouseEvent(n)},I=(n,t,c)=>{c.preventDefault(),c.shiftKey?t.focusPrevious(n):t.focusNext(n)},K=(n,t,c)=>{n&&n.click()},q=(n,t,c)=>{c.preventDefault(),f()},B=(n,t,c)=>{c.preventDefault(),t.focusElement(n)};return o.useEffect(()=>(d&&a.current&&(s.current=new i.Navigation({tabIndex:0,root:a,selectors:W,keyboardEvents:{keydown:{Tab:I,Enter:K,Escape:q}},mouseEvents:{mousedown:B}}),s.current.focusElement(s.current.first,null)),()=>{s.current&&(s.current=null)}),[d]),o.createElement(o.Fragment,null,o.createElement("a",{className:"k-grid-header-menu k-grid-column-menu",ref:u,onClick:D,onKeyDown:S,href:y,tabIndex:e.navigatable?-1:void 0,"aria-label":`${M}${w.toLanguageString(E.columnMenu,E.messages[E.columnMenu])}`},o.createElement(i.IconWrap,{name:"filter",icon:P.moreVerticalIcon})),o.createElement(O.Popup,{anchor:u.current,show:d,popupClass:"k-column-menu k-column-menu-popup k-grid-columnmenu-popup"},o.createElement("div",{ref:a,onBlur:p,onFocus:C,onMouseDown:R,onKeyDown:T,style:{outline:"none"}},h&&o.createElement(h,{...v,onCloseMenu:f}))))};exports.GridColumnMenuWrapper=$;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),P=require("@progress/kendo-react-popup"),a=require("@progress/kendo-react-common"),W=require("@progress/kendo-svg-icons"),h=require("../messages/index.js"),_=require("@progress/kendo-react-intl");function j(e){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const u=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(r,l,u.get?u:{enumerable:!0,get:()=>e[l]})}}return r.default=e,Object.freeze(r)}const o=j(O),z=[".k-columnmenu-item-content",".k-filter-menu-container"].map(e=>a.TABBABLE_ELEMENTS.map(r=>`${e} ${r}`)),$=[[".k-tabstrip-items"],[".k-columnmenu-item"],...z],x=e=>{const[r,l]=o.useState(!1),u=o.useRef(null),i=o.useRef(null),s=o.useRef(null),m=o.useRef(0),{columnMenu:b,...M}=e,{column:k,columnMenuIcon:f}=e,w=_.useLocalization(),v=k.title||k.field,p=v?`${v} `:"",y="#",C=n=>{const t=a.getActiveElement(document);clearTimeout(m.current),m.current=window.setTimeout(()=>{t&&n.relatedTarget!==u.current&&i.current&&!i.current.contains(t)&&d()})},D=()=>{clearTimeout(m.current)},S=n=>{n.preventDefault(),r&&e.onCloseMenu&&e.onCloseMenu(),l(!r)},d=()=>{e.onCloseMenu&&e.onCloseMenu(),l(!1),!e.navigatable&&u.current&&u.current.focus()},T=n=>{var t;if(n.keyCode===a.Keys.tab){const c=n.target,E=c&&((t=c.closest(".k-grid"))==null?void 0:t.getElementsByClassName("k-grid-content")[0]);E&&E.scrollWidth>E.clientWidth&&c.scrollIntoView({inline:"center"})}},g=o.useMemo(()=>e.show!==void 0?e.show:r,[e.show,r]),I=n=>{var t;(t=s.current)==null||t.triggerKeyboardEvent(n)},R=n=>{var t;(t=s.current)==null||t.triggerMouseEvent(n)},K=(n,t,c)=>{c.preventDefault(),c.shiftKey?t.focusPrevious(n):t.focusNext(n)},q=(n,t,c)=>{n&&n.click()},B=(n,t,c)=>{c.preventDefault(),d()},N=(n,t,c)=>{c.preventDefault(),t.focusElement(n)};return o.useEffect(()=>(g&&i.current&&(s.current=new a.Navigation({tabIndex:0,root:i,selectors:$,keyboardEvents:{keydown:{Tab:K,Enter:q,Escape:B}},mouseEvents:{mousedown:N}}),s.current.focusElement(s.current.first,null)),()=>{s.current&&(s.current=null)}),[g]),o.createElement(o.Fragment,null,o.createElement("a",{className:"k-grid-header-menu k-grid-column-menu",ref:u,onClick:S,onKeyDown:T,href:y,tabIndex:e.navigatable?-1:void 0,"aria-label":`${p}${w.toLanguageString(h.columnMenu,h.messages[h.columnMenu])}`},f?o.createElement(a.IconWrap,{name:f.name,icon:f}):o.createElement(a.IconWrap,{name:"more-vertical",icon:W.moreVerticalIcon})),o.createElement(P.Popup,{anchor:u.current,show:g,popupClass:"k-column-menu k-column-menu-popup k-grid-columnmenu-popup"},o.createElement("div",{ref:i,onBlur:C,onFocus:D,onMouseDown:R,onKeyDown:I,style:{outline:"none"}},b&&o.createElement(b,{...M,onCloseMenu:d}))))};exports.GridColumnMenuWrapper=x;

package/columnMenu/GridColumnMenuWrapper.mjs

@@ -7,108 +7,108 @@
  */
 "use client";
 import * as t from "react";
-import { Popup as R } from "@progress/kendo-react-popup";
-import { TABBABLE_ELEMENTS as $, Navigation as x, IconWrap as z, getActiveElement as A, Keys as F } from "@progress/kendo-react-common";
-import { moreVerticalIcon as L } from "@progress/kendo-svg-icons";
-import { columnMenu as w, messages as W } from "../messages/index.mjs";
-import { useLocalization as V } from "@progress/kendo-react-intl";
-const _ = [
+import { Popup as x } from "@progress/kendo-react-popup";
+import { TABBABLE_ELEMENTS as z, Navigation as A, IconWrap as v, getActiveElement as F, Keys as L } from "@progress/kendo-react-common";
+import { moreVerticalIcon as W } from "@progress/kendo-svg-icons";
+import { columnMenu as M, messages as V } from "../messages/index.mjs";
+import { useLocalization as _ } from "@progress/kendo-react-intl";
+const H = [
   ".k-columnmenu-item-content",
   ".k-filter-menu-container"
-].map((o) => $.map(
+].map((o) => z.map(
   (u) => `${o} ${u}`
-)), H = [
+)), P = [
   [".k-tabstrip-items"],
   [".k-columnmenu-item"],
-  ..._
-], Q = (o) => {
-  const [u, d] = t.useState(!1), l = t.useRef(null), s = t.useRef(null), c = t.useRef(null), a = t.useRef(0), { columnMenu: E, ...v } = o, { column: h } = o, k = V(), g = h.title || h.field, M = g ? `${g} ` : "", b = "#", p = (e) => {
-    const n = A(document);
+  ...H
+], U = (o) => {
+  const [u, E] = t.useState(!1), l = t.useRef(null), s = t.useRef(null), r = t.useRef(null), a = t.useRef(0), { columnMenu: h, ...k } = o, { column: g, columnMenuIcon: i } = o, b = _(), w = g.title || g.field, p = w ? `${w} ` : "", y = "#", C = (e) => {
+    const n = F(document);
     clearTimeout(a.current), a.current = window.setTimeout(() => {
-      n && e.relatedTarget !== l.current && s.current && !s.current.contains(n) && i();
+      n && e.relatedTarget !== l.current && s.current && !s.current.contains(n) && m();
     });
-  }, y = () => {
+  }, D = () => {
     clearTimeout(a.current);
-  }, C = (e) => {
-    e.preventDefault(), u && o.onCloseMenu && o.onCloseMenu(), d(!u);
-  }, i = () => {
-    o.onCloseMenu && o.onCloseMenu(), d(!1), !o.navigatable && l.current && l.current.focus();
-  }, D = (e) => {
+  }, T = (e) => {
+    e.preventDefault(), u && o.onCloseMenu && o.onCloseMenu(), E(!u);
+  }, m = () => {
+    o.onCloseMenu && o.onCloseMenu(), E(!1), !o.navigatable && l.current && l.current.focus();
+  }, S = (e) => {
     var n;
-    if (e.keyCode === F.tab) {
-      const r = e.target, f = r && ((n = r.closest(".k-grid")) == null ? void 0 : n.getElementsByClassName("k-grid-content")[0]);
-      f && f.scrollWidth > f.clientWidth && r.scrollIntoView({ inline: "center" });
+    if (e.keyCode === L.tab) {
+      const c = e.target, d = c && ((n = c.closest(".k-grid")) == null ? void 0 : n.getElementsByClassName("k-grid-content")[0]);
+      d && d.scrollWidth > d.clientWidth && c.scrollIntoView({ inline: "center" });
     }
-  }, m = t.useMemo(() => o.show !== void 0 ? o.show : u, [o.show, u]), T = (e) => {
+  }, f = t.useMemo(() => o.show !== void 0 ? o.show : u, [o.show, u]), K = (e) => {
     var n;
-    (n = c.current) == null || n.triggerKeyboardEvent(e);
-  }, S = (e) => {
+    (n = r.current) == null || n.triggerKeyboardEvent(e);
+  }, B = (e) => {
     var n;
-    (n = c.current) == null || n.triggerMouseEvent(e);
-  }, K = (e, n, r) => {
-    r.preventDefault(), r.shiftKey ? n.focusPrevious(e) : n.focusNext(e);
-  }, B = (e, n, r) => {
+    (n = r.current) == null || n.triggerMouseEvent(e);
+  }, I = (e, n, c) => {
+    c.preventDefault(), c.shiftKey ? n.focusPrevious(e) : n.focusNext(e);
+  }, N = (e, n, c) => {
     e && e.click();
-  }, I = (e, n, r) => {
-    r.preventDefault(), i();
-  }, N = (e, n, r) => {
-    r.preventDefault(), n.focusElement(e);
+  }, R = (e, n, c) => {
+    c.preventDefault(), m();
+  }, $ = (e, n, c) => {
+    c.preventDefault(), n.focusElement(e);
   };
-  return t.useEffect(() => (m && s.current && (c.current = new x({
+  return t.useEffect(() => (f && s.current && (r.current = new A({
     tabIndex: 0,
     root: s,
-    selectors: H,
+    selectors: P,
     keyboardEvents: {
       keydown: {
-        Tab: K,
-        Enter: B,
-        Escape: I
+        Tab: I,
+        Enter: N,
+        Escape: R
       }
     },
     mouseEvents: {
-      mousedown: N
+      mousedown: $
     }
-  }), c.current.focusElement(c.current.first, null)), () => {
-    c.current && (c.current = null);
-  }), [m]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  }), r.current.focusElement(r.current.first, null)), () => {
+    r.current && (r.current = null);
+  }), [f]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
     "a",
     {
       className: "k-grid-header-menu k-grid-column-menu",
       ref: l,
-      onClick: C,
-      onKeyDown: D,
-      href: b,
+      onClick: T,
+      onKeyDown: S,
+      href: y,
       tabIndex: o.navigatable ? -1 : void 0,
-      "aria-label": `${M}${k.toLanguageString(w, W[w])}`
+      "aria-label": `${p}${b.toLanguageString(M, V[M])}`
     },
-    /* @__PURE__ */ t.createElement(z, { name: "filter", icon: L })
+    i ? /* @__PURE__ */ t.createElement(v, { name: i.name, icon: i }) : /* @__PURE__ */ t.createElement(v, { name: "more-vertical", icon: W })
   ), /* @__PURE__ */ t.createElement(
-    R,
+    x,
     {
       anchor: l.current,
-      show: m,
+      show: f,
       popupClass: "k-column-menu k-column-menu-popup k-grid-columnmenu-popup"
     },
     /* @__PURE__ */ t.createElement(
       "div",
       {
         ref: s,
-        onBlur: p,
-        onFocus: y,
-        onMouseDown: S,
-        onKeyDown: T,
+        onBlur: C,
+        onFocus: D,
+        onMouseDown: B,
+        onKeyDown: K,
         style: { outline: "none" }
       },
-      E && /* @__PURE__ */ t.createElement(
-        E,
+      h && /* @__PURE__ */ t.createElement(
+        h,
         {
-          ...v,
-          onCloseMenu: i
+          ...k,
+          onCloseMenu: m
         }
       )
     )
   ));
 };
 export {
-  Q as GridColumnMenuWrapper
+  U as GridColumnMenuWrapper
 };