@progress/kendo-react-grid 14.5.0-develop.9 → 15.0.0-develop.1

package/cells/datacell/utils.mjs

@@ -5,38 +5,44 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { getNestedValue as m } from "../../utils/index.mjs";
+import { getNestedValue as r } from "../../utils/index.mjs";
 import { GRID_COL_INDEX_ATTRIBUTE as u } from "../../constants/index.mjs";
-import { uGrid as s, classNames as r } from "@progress/kendo-react-common";
+import { uGrid as s, classNames as o } from "@progress/kendo-react-common";
 const y = (e) => {
-  var d, n;
-  let t = null, i = null;
-  const a = e.unstyled, c = a && a.uGrid ? a.uGrid : s;
+  var n, c;
+  let t = null, a = null;
+  const i = e.unstyled, d = i && i.uGrid ? i.uGrid : s;
   if (e.rowType === "groupFooter")
     t = {
-      className: e.className
+      className: o(d.td({}), e.className),
+      role: "gridcell"
     };
   else if (e.rowType !== "groupHeader") {
     if (e.field !== void 0) {
-      const l = m(e.field, e.dataItem);
-      l != null && (i = e.intl && e.format ? e.intl.format(e.format, l) : l.toString());
+      const l = r(e.field, e.dataItem);
+      l != null && (a = e.intl && e.format ? e.intl.format(e.format, l) : l.toString());
     }
-    const o = r(
-      c.td({ selected: e.isSelected, highlighted: e.isHighlighted, sorted: e.isSorted, alt: e.isAlt }),
+    const m = o(
+      d.td({
+        selected: e.isSelected,
+        highlighted: e.isHighlighted,
+        sorted: e.isSorted,
+        alt: e.isAlt
+      }),
       e.className
     );
     t = {
-      rowSpan: (n = (d = e._rowSpan) == null ? void 0 : d.count) != null ? n : void 0,
+      rowSpan: (c = (n = e._rowSpan) == null ? void 0 : n.count) != null ? c : void 0,
       colSpan: e.colSpan,
       style: e.style,
-      className: o,
+      className: m,
       role: "gridcell",
       "aria-colindex": e.ariaColumnIndex,
       "aria-selected": e.isSelected,
       [u]: e.columnIndex
     };
   }
-  return { tdProps: t, content: i };
+  return { tdProps: t, content: a };
 }, N = (e) => {
   var t;
   return (t = e.cells) == null ? void 0 : t[e.rowType || "data"];

package/columnMenu/GridColumnMenuFilterCell.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),d=require("@progress/kendo-react-dropdowns"),m=require("@progress/kendo-react-inputs"),h=require("@progress/kendo-react-dateinputs"),c=require("../filterCommon.js"),x=require("../utils/GridContext.js");function p(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,i.get?i:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const o=p(b),D=e=>{const t=o.useContext(x.GridContext),a=()=>{if(e.filterType==="boolean")return;const n=e.operators.find(r=>r.operator===e.operator)||null;return o.createElement(d.DropDownList,{adaptive:t.adaptive,size:t.mobileMode?"large":"medium",value:n,onChange:s,data:e.operators,textField:"text"})},i=n=>{c.cellInputChange(n.value,n.syntheticEvent,e)},s=n=>{c.cellOperatorChange(n,e.value,e.onChange)},g=n=>{c.cellBoolDropdownChange(n,e.onChange)},C=(n,r,u)=>{switch(n){case"numeric":return o.createElement(m.NumericTextBox,{value:r,size:t.mobileMode?"large":"medium",onChange:i,rangeOnEnter:!1});case"date":return o.createElement(h.DatePicker,{value:r,size:t.mobileMode?"large":"medium",onChange:i});case"boolean":{const f=l=>l==null;return o.createElement(d.DropDownList,{adaptive:t.adaptive,onChange:g,size:t.mobileMode?"large":"medium",value:u.find(l=>l.operator===(f(r)?"":r)),data:u,textField:"text"})}default:return o.createElement(m.TextBox,{size:t.mobileMode?"large":"medium",value:r||"",onChange:i})}};return o.createElement(o.Fragment,null,a(),C(e.filterType,e.value,e.booleanValues))};exports.GridColumnMenuFilterCell=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const b=require("react"),d=require("@progress/kendo-react-dropdowns"),m=require("@progress/kendo-react-inputs"),h=require("@progress/kendo-react-dateinputs"),c=require("../filterCommon.js"),x=require("../utils/GridContext.js");function p(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const a in e)if(a!=="default"){const i=Object.getOwnPropertyDescriptor(e,a);Object.defineProperty(t,a,i.get?i:{enumerable:!0,get:()=>e[a]})}}return t.default=e,Object.freeze(t)}const o=p(b),D=e=>{const t=o.useContext(x.GridContext),a=()=>{if(e.filterType==="boolean")return;const n=e.operators.find(r=>r.operator===e.operator)||null;return o.createElement(d.DropDownList,{adaptive:t.adaptive,size:t.mobileMode?"large":"medium",value:n,onChange:s,data:e.operators,textField:"text"})},i=n=>{c.cellInputChange(n.value,n.syntheticEvent,e,!1)},s=n=>{c.cellOperatorChange(n,e.value,e.onChange)},g=n=>{c.cellBoolDropdownChange(n,e.onChange)},C=(n,r,u)=>{switch(n){case"numeric":return o.createElement(m.NumericTextBox,{value:r,size:t.mobileMode?"large":"medium",onChange:i,rangeOnEnter:!1});case"date":return o.createElement(h.DatePicker,{value:r,size:t.mobileMode?"large":"medium",onChange:i});case"boolean":{const f=l=>l==null;return o.createElement(d.DropDownList,{adaptive:t.adaptive,onChange:g,size:t.mobileMode?"large":"medium",value:u.find(l=>l.operator===(f(r)?"":r)),data:u,textField:"text"})}default:return o.createElement(m.TextBox,{size:t.mobileMode?"large":"medium",value:r||"",onChange:i})}};return o.createElement(o.Fragment,null,a(),C(e.filterType,e.value,e.booleanValues))};exports.GridColumnMenuFilterCell=D;

package/columnMenu/GridColumnMenuFilterCell.mjs

@@ -8,7 +8,7 @@
 "use client";
 import * as n from "react";
 import { DropDownList as m } from "@progress/kendo-react-dropdowns";
-import { TextBox as h, NumericTextBox as s } from "@progress/kendo-react-inputs";
+import { TextBox as s, NumericTextBox as h } from "@progress/kendo-react-inputs";
 import { DatePicker as f } from "@progress/kendo-react-dateinputs";
 import { cellOperatorChange as x, cellInputChange as E, cellBoolDropdownChange as b } from "../filterCommon.mjs";
 import { GridContext as p } from "../utils/GridContext.mjs";
@@ -29,7 +29,7 @@ const w = (e) => {
       }
     );
   }, i = (t) => {
-    E(t.value, t.syntheticEvent, e);
+    E(t.value, t.syntheticEvent, e, !1);
   }, c = (t) => {
     x(t, e.value, e.onChange);
   }, u = (t) => {
@@ -38,7 +38,7 @@ const w = (e) => {
     switch (t) {
       case "numeric":
         return /* @__PURE__ */ n.createElement(
-          s,
+          h,
           {
             value: r,
             size: o.mobileMode ? "large" : "medium",
@@ -71,7 +71,7 @@ const w = (e) => {
       }
       default:
         return /* @__PURE__ */ n.createElement(
-          h,
+          s,
           {
             size: o.mobileMode ? "large" : "medium",
             value: r || "",

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),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;
+"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;

package/columnMenu/GridColumnMenuWrapper.mjs

@@ -6,54 +6,54 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
+import * as o from "react";
 import { Popup as V } from "@progress/kendo-react-popup";
-import { useDocument as _, Navigation as H, classNames as q, IconWrap as D, TABBABLE_ELEMENTS as J, getActiveElement as Q } from "@progress/kendo-react-common";
-import { moreVerticalIcon as U } from "@progress/kendo-svg-icons";
+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) => J.map((c) => `${r} ${c}`)), te = [[".k-tabstrip-items"], [".k-columnmenu-item"], ...ne], de = (r) => {
+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 = 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 = _(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);
+  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 !== s.current && i.current && !i.current.contains(e) && m();
+      !c.mobileMode && e && n.relatedTarget !== u.current && a.current && !a.current.contains(e) && m();
     });
-  }, B = () => {
+  }, F = () => {
     clearTimeout(h.current);
   }, 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();
+    r.onCloseMenu && r.onCloseMenu(), M(!1), !r.navigatable && u.current && u.current.focus();
   }, K = (n) => {
     var e;
     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" });
+      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" });
     }
-  }, E = t.useMemo(() => r.show !== void 0 ? r.show : d, [r.show, d]), R = (n) => {
+  }, E = o.useMemo(() => r.show !== void 0 ? r.show : d, [r.show, d]), R = (n) => {
     var e;
     (e = l.current) == null || e.triggerKeyboardEvent(n);
-  }, F = (n) => {
+  }, G = (n) => {
     var e;
     (e = l.current) == null || e.triggerMouseEvent(n);
-  }, G = (n, e, o) => {
-    o.preventDefault(), o.shiftKey ? e.focusPrevious(n) : e.focusNext(n);
-  }, P = (n, e, o) => {
-    n && (o.preventDefault(), n.click());
-  }, $ = (n, e, o) => {
-    o.preventDefault(), m();
-  }, z = (n, e, o) => {
+  }, 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.focusElement(n);
   }, L = (n) => {
     !n.isAnchorClicked && M(!1);
-  }, v = t.useCallback(
+  }, v = o.useCallback(
     (n, e) => {
-      const o = [];
+      const t = [];
       if (!e || typeof e != "object")
         return !1;
       if (Array.isArray(e.filters)) {
@@ -61,67 +61,67 @@ const ne = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((r) =>
           if (v(n, f))
             return !0;
       }
-      return "field" in e && typeof e.field == "string" && o.push(e.field), o.includes(n);
+      return "field" in e && typeof e.field == "string" && t.push(e.field), t.includes(n);
     },
     []
-  ), k = t.useCallback((n, e) => !e || !Array.isArray(e) ? !1 : e.some((o) => o.field === n), []), W = t.useMemo(() => u.field && (v(u.field, c.filter) || k(u.field, c.group)), [u.field, c.filter, c.group, v, k]);
-  return t.useEffect(() => (E && i.current && (l.current = new H({
+  ), 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({
     tabIndex: 0,
-    root: i,
-    selectors: te,
+    root: a,
+    selectors: oe,
     keyboardEvents: {
-      keydown: { Tab: G, Enter: P, Escape: $ }
+      keydown: { Tab: P, Enter: $, Escape: z }
     },
-    mouseEvents: { mousedown: z }
+    mouseEvents: { mousedown: B }
   }), l.current.focusElement(l.current.first, null)), () => {
     l.current && (l.current = null);
-  }), [E]), /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
+  }), [E]), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
     "a",
     {
-      className: q("k-grid-header-menu k-grid-column-menu", {
+      className: U("k-grid-header-menu k-grid-column-menu", {
         "k-active": W
       }),
-      ref: s,
+      ref: u,
       onClick: I,
       onKeyDown: K,
       href: x,
-      tabIndex: C ? -1 : void 0,
-      "aria-label": `${C ? "" : S}${T.toLanguageString(
+      tabIndex: p ? -1 : void 0,
+      "aria-label": `${p ? "" : S}${T.toLanguageString(
         b,
         X[b]
       )}`
     },
-    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(
+    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,
       {
         computedShow: E,
-        ColumnMenu: a,
+        ColumnMenu: i,
         closeMenu: m
       },
-      a && /* @__PURE__ */ t.createElement(a, { ...p, onCloseMenu: m })
+      i && /* @__PURE__ */ o.createElement(i, { ...C, onCloseMenu: m })
     ),
     (y = A()) == null ? void 0 : y.body
-  )) : /* @__PURE__ */ t.createElement(
+  )) : /* @__PURE__ */ o.createElement(
     V,
     {
-      anchor: s.current,
+      anchor: u.current,
       show: E,
       popupClass: "k-grid-columnmenu-popup",
       onMouseDownOutside: L
     },
-    /* @__PURE__ */ t.createElement(
+    /* @__PURE__ */ o.createElement(
       "div",
       {
-        ref: i,
+        ref: a,
         onBlur: N,
-        onFocus: B,
-        onMouseDown: F,
+        onFocus: F,
+        onMouseDown: G,
         onKeyDown: R,
         className: "k-column-menu k-column-menu-md"
       },
-      a && /* @__PURE__ */ t.createElement(a, { ...p, onCloseMenu: m })
+      i && /* @__PURE__ */ o.createElement(i, { ...C, onCloseMenu: m })
     )
   )));
 };