@progress/kendo-react-grid 13.3.0-develop.2 → 13.3.0-develop.4

package/columnMenu/GridColumnMenuWrapper.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=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"),j=require("./adaptiveContext/GridColumnMenuAdaptiveContext.js"),J=require("./adaptiveContent/GridAdaptiveColumnMenu.js"),Q=require("react-dom");function U(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=U($),X=[".k-columnmenu-item-content",".k-filter-menu-container"].map(o=>s.TABBABLE_ELEMENTS.map(c=>`${o} ${c}`)),Y=[[".k-tabstrip-items"],[".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),A=s.useDocument(i),{columnMenu:f,...p}=o,{column:m,columnMenuIcon:v,navigatable:w}=o,S=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.keyCode===s.Keys.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)},K=(n,e,r)=>{r.preventDefault(),r.shiftKey?e.focusPrevious(n):e.focusNext(n)},B=(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),[]),F=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:K,Enter:B,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":F}),ref:i,onClick:G,onKeyDown:I,href:q,tabIndex:w?-1:void 0,"aria-label":`${w?"":T}${S.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(j.GridColumnMenuAdaptiveProvider,null,c.mobileMode?t.createElement(t.Fragment,null,Q.createPortal(t.createElement(J.GridAdaptiveColumnMenu,{computedShow:C,ColumnMenu:f,closeMenu:g},f&&t.createElement(f,{...p,onCloseMenu:g})),(D=A())==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 $=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"),j=require("./adaptiveContext/GridColumnMenuAdaptiveContext.js"),J=require("./adaptiveContent/GridAdaptiveColumnMenu.js"),Q=require("react-dom");function U(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=U($),X=[".k-columnmenu-item-content",".k-filter-menu-container"].map(o=>s.TABBABLE_ELEMENTS.map(c=>`${o} ${c}`)),Y=[[".k-tabstrip-items"],[".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),v=t.useRef(0),A=s.useDocument(i),{columnMenu:f,...p}=o,{column:m,columnMenuIcon:C,navigatable:w}=o,S=V.useLocalization(),b=m.title||m.field,T=b?`${b} `:"",q="#",R=n=>{const e=s.getActiveElement(document);clearTimeout(v.current),v.current=window.setTimeout(()=>{!c.mobileMode&&e&&n.relatedTarget!==i.current&&d.current&&!d.current.contains(e)&&g()})},x=()=>{clearTimeout(v.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"})}},E=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)},B=(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)},[]),y=t.useCallback((n,e)=>!e||!Array.isArray(e)?!1:e.some(r=>r.field===n),[]),F=t.useMemo(()=>m.field&&(h(m.field,c.filter)||y(m.field,c.group)),[m.field,c.filter,c.group,h,y]);return t.useEffect(()=>(E&&d.current&&(l.current=new s.Navigation({tabIndex:0,root:d,selectors:Y,keyboardEvents:{keydown:{Tab:B,Enter:K,Escape:W}},mouseEvents:{mousedown:_}}),l.current.focusElement(l.current.first,null)),()=>{l.current&&(l.current=null)}),[E]),t.createElement(t.Fragment,null,t.createElement("a",{className:s.classNames("k-grid-header-menu k-grid-column-menu",{"k-active":F}),ref:i,onClick:G,onKeyDown:I,href:q,tabIndex:w?-1:void 0,"aria-label":`${w?"":T}${S.toLanguageString(k.columnMenu,k.messages[k.columnMenu])}`},C?t.createElement(s.IconWrap,{name:C.name,icon:C}):t.createElement(s.IconWrap,{name:"more-vertical",icon:O.moreVerticalIcon})),t.createElement(j.GridColumnMenuAdaptiveProvider,null,c.mobileMode?t.createElement(t.Fragment,null,Q.createPortal(t.createElement(J.GridAdaptiveColumnMenu,{computedShow:E,ColumnMenu:f,closeMenu:g},f&&t.createElement(f,{...p,onCloseMenu:g})),(D=A())==null?void 0:D.body)):t.createElement(L.Popup,{anchor:i.current,show:E,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;

package/columnMenu/GridColumnMenuWrapper.mjs

@@ -8,30 +8,30 @@
 "use client";
 import * as t from "react";
 import { Popup as V } from "@progress/kendo-react-popup";
-import { TABBABLE_ELEMENTS as _, useDocument as H, Navigation as q, classNames as J, IconWrap as D, getActiveElement as Q, Keys as U } from "@progress/kendo-react-common";
-import { moreVerticalIcon as X } from "@progress/kendo-svg-icons";
-import { columnMenu as b, messages as Y } from "../messages/index.mjs";
-import { useLocalization as Z } from "@progress/kendo-react-intl";
-import { GridContext as O } from "../utils/GridContext.mjs";
-import { GridColumnMenuAdaptiveProvider as j } from "./adaptiveContext/GridColumnMenuAdaptiveContext.mjs";
-import { GridAdaptiveColumnMenu as ee } from "./adaptiveContent/GridAdaptiveColumnMenu.mjs";
-import ne from "react-dom";
-const te = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) => _.map((c) => `${r} ${c}`)), oe = [[".k-tabstrip-items"], [".k-columnmenu-item"], ...te], Ee = (r) => {
+import { TABBABLE_ELEMENTS as _, useDocument as H, Navigation as q, classNames as J, IconWrap as D, getActiveElement as Q } from "@progress/kendo-react-common";
+import { moreVerticalIcon as U } 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) => _.map((c) => `${r} ${c}`)), te = [[".k-tabstrip-items"], [".k-columnmenu-item"], ...ne], de = (r) => {
   var y;
-  const c = t.useContext(O), [d, M] = t.useState(!1), s = t.useRef(null), i = t.useRef(null), l = t.useRef(null), h = t.useRef(0), A = H(s), { columnMenu: a, ...C } = r, { column: u, columnMenuIcon: g, navigatable: p } = r, T = Z(), w = u.title || u.field, S = w ? `${w} ` : "", x = "#", K = (n) => {
+  const c = t.useContext(Z), [d, M] = t.useState(!1), s = t.useRef(null), i = t.useRef(null), l = t.useRef(null), h = t.useRef(0), A = H(s), { columnMenu: a, ...p } = r, { column: u, columnMenuIcon: g, navigatable: C } = r, T = Y(), w = u.title || u.field, S = w ? `${w} ` : "", x = "#", N = (n) => {
     const e = Q(document);
     clearTimeout(h.current), h.current = window.setTimeout(() => {
       !c.mobileMode && e && n.relatedTarget !== s.current && i.current && !i.current.contains(e) && m();
     });
-  }, N = () => {
+  }, B = () => {
     clearTimeout(h.current);
-  }, B = (n) => {
+  }, I = (n) => {
     n.preventDefault(), d && r.onCloseMenu && r.onCloseMenu(), M(!d);
   }, m = () => {
     r.onCloseMenu && r.onCloseMenu(), M(!1), !r.navigatable && s.current && s.current.focus();
-  }, I = (n) => {
+  }, K = (n) => {
     var e;
-    if (n.keyCode === U.tab) {
+    if (n.key === "Tab") {
       const o = n.target, f = o && ((e = o.closest(".k-grid")) == null ? void 0 : e.getElementsByClassName("k-grid-content")[0]);
       f && f.scrollWidth > f.clientWidth && o.scrollIntoView({ inline: "center" });
     }
@@ -68,7 +68,7 @@ const te = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) =>
   return t.useEffect(() => (E && i.current && (l.current = new q({
     tabIndex: 0,
     root: i,
-    selectors: oe,
+    selectors: te,
     keyboardEvents: {
       keydown: { Tab: G, Enter: P, Escape: $ }
     },
@@ -82,25 +82,25 @@ const te = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) =>
         "k-active": W
       }),
       ref: s,
-      onClick: B,
-      onKeyDown: I,
+      onClick: I,
+      onKeyDown: K,
       href: x,
-      tabIndex: p ? -1 : void 0,
-      "aria-label": `${p ? "" : S}${T.toLanguageString(
+      tabIndex: C ? -1 : void 0,
+      "aria-label": `${C ? "" : S}${T.toLanguageString(
         b,
-        Y[b]
+        X[b]
       )}`
     },
-    g ? /* @__PURE__ */ t.createElement(D, { name: g.name, icon: g }) : /* @__PURE__ */ t.createElement(D, { name: "more-vertical", icon: X })
-  ), /* @__PURE__ */ t.createElement(j, null, c.mobileMode ? /* @__PURE__ */ t.createElement(t.Fragment, null, ne.createPortal(
+    g ? /* @__PURE__ */ t.createElement(D, { name: g.name, icon: g }) : /* @__PURE__ */ t.createElement(D, { name: "more-vertical", icon: U })
+  ), /* @__PURE__ */ t.createElement(O, null, c.mobileMode ? /* @__PURE__ */ t.createElement(t.Fragment, null, ee.createPortal(
     /* @__PURE__ */ t.createElement(
-      ee,
+      j,
       {
         computedShow: E,
         ColumnMenu: a,
         closeMenu: m
       },
-      a && /* @__PURE__ */ t.createElement(a, { ...C, onCloseMenu: m })
+      a && /* @__PURE__ */ t.createElement(a, { ...p, onCloseMenu: m })
     ),
     (y = A()) == null ? void 0 : y.body
   )) : /* @__PURE__ */ t.createElement(
@@ -115,16 +115,16 @@ const te = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) =>
       "div",
       {
         ref: i,
-        onBlur: K,
-        onFocus: N,
+        onBlur: N,
+        onFocus: B,
         onMouseDown: F,
         onKeyDown: R,
         className: "k-column-menu k-column-menu-md"
       },
-      a && /* @__PURE__ */ t.createElement(a, { ...C, onCloseMenu: m })
+      a && /* @__PURE__ */ t.createElement(a, { ...p, onCloseMenu: m })
     )
   )));
 };
 export {
-  Ee as GridColumnMenuWrapper
+  de as GridColumnMenuWrapper
 };