@progress/kendo-react-grid 7.4.0-develop.8 → 7.4.0

package/cells/GridEditCell.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 b=require("react"),f=require("../utils/index.js"),h=require("@progress/kendo-react-inputs"),E=require("@progress/kendo-react-dateinputs"),g=require("@progress/kendo-react-common"),y=require("@progress/kendo-react-data-tools"),r=require("../constants/index.js");function N(e){const n=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(n,a,i.get?i:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=N(b),S=e=>{const n=f.getNestedValue(e.field,e.dataItem);let a=null;const i=g.classNames("k-table-td","k-grid-edit-cell",{"k-selected":e.isSelected},e.className),I=g.useId(),u=y.useTableKeyboardNavigation(e.id);let c=null,d=null;const s=t.useCallback(l=>{if(e.onChange){const k=l.target.type==="checkbox"?l.target.checked:l.target.value;e.onChange({dataItem:e.dataItem,dataIndex:e.dataIndex,field:e.field,syntheticEvent:l,value:k})}},[e.onChange,e.dataItem,e.dataIndex,e.field]),o=t.useCallback(l=>{e.onContextMenu&&e.onContextMenu.call(void 0,l,e.dataItem,e.field)},[e.onContextMenu,e.dataItem,e.field]),C=t.useCallback(l=>{e.onChange&&e.onChange({dataItem:e.dataItem,dataIndex:e.dataIndex,field:e.field,syntheticEvent:l.syntheticEvent,value:l.value})},[e.onChange,e.dataItem,e.dataIndex,e.field]);switch(e.editor){case"numeric":{c={onContextMenu:o,colSpan:e.colSpan,style:e.style,className:i,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[r.GRID_COL_INDEX_ATTRIBUTE]:e.columnIndex,role:"gridcell",...u},d=t.createElement(h.NumericTextBox,{width:"100%",value:n===void 0?null:n,onChange:C}),a=t.createElement("td",{...c},d);break}case"date":c={onContextMenu:o,colSpan:e.colSpan,style:e.style,className:i,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[r.GRID_COL_INDEX_ATTRIBUTE]:e.columnIndex,role:"gridcell",...u},d=t.createElement(E.DatePicker,{width:"100%",value:n,onChange:C}),a=t.createElement("td",{...c},d);break;case"boolean":c={onContextMenu:o,colSpan:e.colSpan,style:e.style,className:i,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[r.GRID_COL_INDEX_ATTRIBUTE]:e.columnIndex,role:"gridcell",...u},d=[t.createElement("span",{key:1,className:"k-checkbox-wrap"},t.createElement("input",{checked:n||!1,id:I,type:"checkbox",className:"k-checkbox k-checkbox-md k-rounded-md",onChange:s})),t.createElement("label",{className:"k-checkbox-label",htmlFor:I,key:2})],a=t.createElement("td",{...c},d);break;default:c={onContextMenu:o,colSpan:e.colSpan,style:e.style,className:i,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[r.GRID_COL_INDEX_ATTRIBUTE]:e.columnIndex,role:"gridcell",...u},d=t.createElement("input",{style:{width:"100%"},className:"k-input",value:n||"",onChange:s}),a=t.createElement("td",{...c},d)}const x=e.editor||"text",m=e.cells;if(m&&m.edit&&m.edit[x]){const l=m.edit[x];return t.createElement(l,{...e,tdProps:c},d)}return e.render?e.render.call(void 0,a,e):a};exports.GridEditCell=S;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),b=require("../utils/index.js"),N=require("@progress/kendo-react-inputs"),f=require("@progress/kendo-react-dateinputs"),g=require("@progress/kendo-react-common"),E=require("@progress/kendo-react-data-tools"),r=require("../constants/index.js");function _(e){const n=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(n,a,i.get?i:{enumerable:!0,get:()=>e[a]})}}return n.default=e,Object.freeze(n)}const t=_(T),h=e=>{const n=b.getNestedValue(e.field,e.dataItem);let a=null;const i=g.classNames("k-table-td","k-grid-edit-cell",{"k-selected":e.isSelected},e.className),I=g.useId(),u=E.useTableKeyboardNavigation(e.id);let c=null,d=null;const C=t.useCallback(l=>{if(e.onChange){const k=l.target.type==="checkbox"?l.target.checked:l.target.value;e.onChange({dataItem:e.dataItem,dataIndex:e.dataIndex,field:e.field,syntheticEvent:l,value:k})}},[e.onChange,e.dataItem,e.dataIndex,e.field]),o=t.useCallback(l=>{e.onContextMenu&&e.onContextMenu.call(void 0,l,e.dataItem,e.field)},[e.onContextMenu,e.dataItem,e.field]),s=t.useCallback(l=>{e.onChange&&e.onChange({dataItem:e.dataItem,dataIndex:e.dataIndex,field:e.field,syntheticEvent:l.syntheticEvent,value:l.value})},[e.onChange,e.dataItem,e.dataIndex,e.field]);switch(e.editor){case"numeric":{c={onContextMenu:o,colSpan:e.colSpan,style:e.style,className:i,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[r.GRID_COL_INDEX_ATTRIBUTE]:e.columnIndex,role:"gridcell",...u},d=t.createElement(N.NumericTextBox,{value:n===void 0?null:n,onChange:s,[E.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),a=t.createElement("td",{...c},d);break}case"date":c={onContextMenu:o,colSpan:e.colSpan,style:e.style,className:i,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[r.GRID_COL_INDEX_ATTRIBUTE]:e.columnIndex,role:"gridcell",...u},d=t.createElement(f.DatePicker,{value:n,onChange:s,[E.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),a=t.createElement("td",{...c},d);break;case"boolean":c={onContextMenu:o,colSpan:e.colSpan,style:e.style,className:i,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[r.GRID_COL_INDEX_ATTRIBUTE]:e.columnIndex,role:"gridcell",...u},d=[t.createElement("span",{key:1,className:"k-checkbox-wrap"},t.createElement("input",{checked:n||!1,id:I,type:"checkbox",className:"k-checkbox k-checkbox-md k-rounded-md",onChange:C})),t.createElement("label",{className:"k-checkbox-label",htmlFor:I,key:2})],a=t.createElement("td",{...c},d);break;default:c={onContextMenu:o,colSpan:e.colSpan,style:e.style,className:i,"aria-colindex":e.ariaColumnIndex,"aria-selected":e.isSelected,[r.GRID_COL_INDEX_ATTRIBUTE]:e.columnIndex,role:"gridcell",...u},d=t.createElement("input",{style:{width:"100%"},className:"k-input",value:n||"",onChange:C,[E.TABLE_PREVENT_SELECTION_ELEMENT]:!0}),a=t.createElement("td",{...c},d)}const x=e.editor||"text",m=e.cells;if(m&&m.edit&&m.edit[x]){const l=m.edit[x];return t.createElement(l,{...e,tdProps:c},d)}return e.render?e.render.call(void 0,a,e):a};exports.GridEditCell=h;

package/cells/GridEditCell.mjs

@@ -7,20 +7,20 @@
  */
 "use client";
 import * as a from "react";
-import { getNestedValue as f } from "../utils/index.mjs";
-import { NumericTextBox as b } from "@progress/kendo-react-inputs";
-import { DatePicker as r } from "@progress/kendo-react-dateinputs";
+import { getNestedValue as r } from "../utils/index.mjs";
+import { NumericTextBox as E } from "@progress/kendo-react-inputs";
+import { DatePicker as b } from "@progress/kendo-react-dateinputs";
 import { classNames as s, useId as N } from "@progress/kendo-react-common";
-import { useTableKeyboardNavigation as S } from "@progress/kendo-react-data-tools";
+import { useTableKeyboardNavigation as S, TABLE_PREVENT_SELECTION_ELEMENT as C } from "@progress/kendo-react-data-tools";
 import { GRID_COL_INDEX_ATTRIBUTE as x } from "../constants/index.mjs";
-const R = (e) => {
-  const c = f(e.field, e.dataItem);
+const L = (e) => {
+  const c = r(e.field, e.dataItem);
   let d = null;
   const i = s("k-table-td", "k-grid-edit-cell", {
     "k-selected": e.isSelected
-  }, e.className), C = N(), m = S(e.id);
+  }, e.className), I = N(), m = S(e.id);
   let l = null, n = null;
-  const I = a.useCallback(
+  const k = a.useCallback(
     (t) => {
       if (e.onChange) {
         const h = t.target.type === "checkbox" ? t.target.checked : t.target.value;
@@ -36,7 +36,7 @@ const R = (e) => {
     [e.onChange, e.dataItem, e.dataIndex, e.field]
   ), u = a.useCallback((t) => {
     e.onContextMenu && e.onContextMenu.call(void 0, t, e.dataItem, e.field);
-  }, [e.onContextMenu, e.dataItem, e.field]), k = a.useCallback(
+  }, [e.onContextMenu, e.dataItem, e.field]), g = a.useCallback(
     (t) => {
       e.onChange && e.onChange({
         dataItem: e.dataItem,
@@ -61,11 +61,11 @@ const R = (e) => {
         role: "gridcell",
         ...m
       }, n = /* @__PURE__ */ a.createElement(
-        b,
+        E,
         {
-          width: "100%",
           value: c === void 0 ? null : c,
-          onChange: k
+          onChange: g,
+          [C]: !0
         }
       ), d = /* @__PURE__ */ a.createElement(
         "td",
@@ -88,11 +88,11 @@ const R = (e) => {
         role: "gridcell",
         ...m
       }, n = /* @__PURE__ */ a.createElement(
-        r,
+        b,
         {
-          width: "100%",
           value: c,
-          onChange: k
+          onChange: g,
+          [C]: !0
         }
       ), d = /* @__PURE__ */ a.createElement(
         "td",
@@ -118,13 +118,13 @@ const R = (e) => {
           "input",
           {
             checked: c || !1,
-            id: C,
+            id: I,
             type: "checkbox",
             className: "k-checkbox k-checkbox-md k-rounded-md",
-            onChange: I
+            onChange: k
           }
         )),
-        /* @__PURE__ */ a.createElement("label", { className: "k-checkbox-label", htmlFor: C, key: 2 })
+        /* @__PURE__ */ a.createElement("label", { className: "k-checkbox-label", htmlFor: I, key: 2 })
       ], d = /* @__PURE__ */ a.createElement(
         "td",
         {
@@ -150,7 +150,8 @@ const R = (e) => {
           style: { width: "100%" },
           className: "k-input",
           value: c || "",
-          onChange: I
+          onChange: k,
+          [C]: !0
         }
       ), d = /* @__PURE__ */ a.createElement(
         "td",
@@ -160,13 +161,13 @@ const R = (e) => {
         n
       );
   }
-  const g = e.editor || "text", o = e.cells;
-  if (o && o.edit && o.edit[g]) {
-    const t = o.edit[g];
+  const f = e.editor || "text", o = e.cells;
+  if (o && o.edit && o.edit[f]) {
+    const t = o.edit[f];
     return /* @__PURE__ */ a.createElement(t, { ...e, tdProps: l }, n);
   }
   return e.render ? e.render.call(void 0, d, e) : d;
 };
 export {
-  R as GridEditCell
+  L as GridEditCell
 };

package/columnMenu/GridColumnMenuFilter.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 P=require("react"),E=require("@progress/kendo-data-query"),B=require("./GridColumnMenuItem.js"),L=require("./GridColumnMenuItemGroup.js"),U=require("./GridColumnMenuItemContent.js"),M=require("@progress/kendo-react-intl"),a=require("../filterCommon.js"),f=require("../messages/index.js"),T=require("./GridColumnMenuFilterUI.js"),b=require("@progress/kendo-react-buttons"),j=require("@progress/kendo-svg-icons");function w(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const l in c)if(l!=="default"){const e=Object.getOwnPropertyDescriptor(c,l);Object.defineProperty(i,l,e.get?e:{enumerable:!0,get:()=>c[l]})}}return i.default=c,Object.freeze(i)}const u=w(P),g=c=>c||{filters:[],logic:"and"},h=(c,i)=>g(i).filters.filter(t=>E.isCompositeFilterDescriptor(t)?t.filters&&t.filters.length&&t.filters.length<=2&&!t.filters.find(r=>E.isCompositeFilterDescriptor(r)||r.field!==c):!1)[0]||null,v=class v extends u.Component{constructor(i){super(i),this.removeGroup=(e,t)=>{const r=[...t.filters],n=r.findIndex(o=>o===e);return n>-1&&r.splice(n,1),{...t,filters:r}},this.insertGroup=(e,t)=>({...t,filters:[e,...t.filters]}),this.isControlled=()=>this.props.expanded!==void 0,this.onFilterExpand=()=>{const e=this.isControlled(),t=!(e?this.props.expanded:this.state.expanded);this.props.onExpandChange&&this.props.onExpandChange(t),e||this.setState({expanded:t})},this.firstFilterChange=e=>{this.filterChange(0,e)},this.secondFilterChange=e=>{this.filterChange(1,e)},this.filterChange=(e,t)=>{const r=this.state.filterGroup.filters.map((n,o)=>o===e?{...n,value:t.value,operator:t.operator}:n);this.setState({filterGroup:{...this.state.filterGroup,filters:r}})},this.logicChange=e=>{this.setState({filterGroup:{...this.state.filterGroup,logic:e.target.value.operator}})},this.clear=e=>{if(e.preventDefault(),!this.props.onFilterChange)return;const t=this.props.column.field,r=g(this.props.filter),n=h(t,this.props.filter),o=r.filters.filter(s=>s!==n);o.length?this.props.onFilterChange({...r,filters:o},e):this.props.onFilterChange(null,e),this.props.onCloseMenu&&this.props.onCloseMenu()},this.currentFilterGroup=()=>({...this.state.filterGroup,filters:this.state.filterGroup.filters.filter(e=>e.value!==void 0&&e.value!==null&&e.value!==""||e.value===null&&e.operator)}),this.submit=e=>{if(e.preventDefault(),!this.props.onFilterChange)return;const t=this.props.column.field,r=g(this.props.filter),n=h(t,this.props.filter),o=this.currentFilterGroup();let s=null;if(n&&o.filters.length>0){const p=r.filters.map(d=>d===n?o:d);s={...r,filters:p}}else if(o.filters.length===0){const p=r.filters.filter(d=>d!==n);p.length&&(s={...r,filters:p})}else s={...r,filters:[...r.filters,o]};this.props.onFilterChange(s,e),this.props.onCloseMenu&&this.props.onCloseMenu()};let l;if(i.column&&i.column.field){const e=a.getFilterType(i.column.filter),t=a.getDefaultOperator(i.filterOperators,e);l=h(i.column.field,i.filter),l=l?{...l,filters:l.filters.map(r=>({...r}))}:{logic:"and",filters:[{field:i.column.field,operator:t,value:a.IsUnaryFilter(t)?null:void 0},{field:i.column.field,operator:t,value:a.IsUnaryFilter(t)?null:void 0}]},l.filters.filter(r=>r.field===i.column.field).length===1&&l.filters.splice(1,0,{field:i.column.field,operator:t})}this.state={expanded:i.expanded||!1,filterGroup:l}}render(){const{column:i,filterUI:l,hideSecondFilter:e,filterOperators:t}=this.props;if(!i||!i.field)return u.createElement("div",null);const r=a.getFilterType(i.filter),n=e!==void 0?e:a.defaultHideSecondFilter[r],o=M.provideLocalizationService(this),s=this.state.filterGroup.filters,p=a.operatorMap(t[r],o),d=a.operatorMap(a.booleanFilterValues,o),D={field:i.field,value:s[0].value,operator:s[0].operator,operators:p,booleanValues:d,onChange:this.firstFilterChange,filterType:r},O={field:i.field,value:s[1].value,operator:s[1].operator,operators:p,booleanValues:d,onChange:this.secondFilterChange,filterType:r},G=this.state.filterGroup.logic,y=a.operatorMap(a.filterLogicList,o),C={value:y.find(F=>F.operator===(G===null?"":G)),onChange:this.logicChange,data:y},I=l,S={firstFilterProps:D,secondFilterProps:O,logicData:C.data,logicValue:C.value,onLogicChange:C.onChange,hideSecondFilter:n},k=this.currentFilterGroup().filters.length!==0||a.IsUnaryFilter(s[0].operator)||a.IsUnaryFilter(s[1].operator),q=this.isControlled()?this.props.expanded:this.state.expanded,x=this.props.alwaysExpand;return u.createElement(L.GridColumnMenuItemGroup,null,!x&&u.createElement(B.GridColumnMenuItem,{title:o.toLanguageString(f.filterTitle,f.messages[f.filterTitle]),iconClass:"k-i-filter",svgIcon:j.filterIcon,onClick:this.onFilterExpand}),u.createElement(U.GridColumnMenuItemContent,{show:x||!!q},u.createElement("form",{className:"k-filter-menu",onSubmit:this.submit,onReset:this.clear,onKeyDown:F=>F.stopPropagation()},u.createElement("div",{className:"k-filter-menu-container"},I?u.createElement(I,{...S}):u.createElement(T.GridColumnMenuFilterUI,{...S}),u.createElement("div",{className:"k-actions k-actions-stretched"},u.createElement(b.Button,{themeColor:"primary",disabled:!k},o.toLanguageString(f.filterSubmitButton,f.messages[f.filterSubmitButton])),u.createElement(b.Button,{type:"reset"},o.toLanguageString(f.filterClearButton,f.messages[f.filterClearButton])))))))}};v.active=(i,l)=>!!h(i,l);let m=v;M.registerForLocalization(m);exports.GridColumnMenuFilter=m;exports.filterGroupByField=h;exports.rootFilterOrDefault=g;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),y=require("@progress/kendo-data-query"),L=require("./GridColumnMenuItem.js"),P=require("./GridColumnMenuItemGroup.js"),U=require("./GridColumnMenuItemContent.js"),b=require("@progress/kendo-react-intl"),a=require("../filterCommon.js"),f=require("../messages/index.js"),T=require("./GridColumnMenuFilterUI.js"),E=require("@progress/kendo-react-buttons"),j=require("@progress/kendo-svg-icons");function R(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const l in c)if(l!=="default"){const e=Object.getOwnPropertyDescriptor(c,l);Object.defineProperty(i,l,e.get?e:{enumerable:!0,get:()=>c[l]})}}return i.default=c,Object.freeze(i)}const u=R(B),g=c=>c||{filters:[],logic:"and"},h=(c,i)=>g(i).filters.filter(t=>y.isCompositeFilterDescriptor(t)?t.filters&&t.filters.length&&t.filters.length<=2&&!t.filters.find(r=>y.isCompositeFilterDescriptor(r)||r.field!==c):!1)[0]||null,F=class F extends u.Component{constructor(i){super(i),this.removeGroup=(e,t)=>{const r=[...t.filters],n=r.findIndex(o=>o===e);return n>-1&&r.splice(n,1),{...t,filters:r}},this.insertGroup=(e,t)=>({...t,filters:[e,...t.filters]}),this.isControlled=()=>this.props.expanded!==void 0,this.onFilterExpand=()=>{const e=this.isControlled(),t=!(e?this.props.expanded:this.state.expanded);this.props.onExpandChange&&this.props.onExpandChange(t),e||this.setState({expanded:t})},this.firstFilterChange=e=>{this.filterChange(0,e)},this.secondFilterChange=e=>{this.filterChange(1,e)},this.filterChange=(e,t)=>{const r=this.state.filterGroup.filters.map((n,o)=>o===e?{...n,value:t.value,operator:t.operator}:n);this.setState({filterGroup:{...this.state.filterGroup,filters:r}})},this.logicChange=e=>{this.setState({filterGroup:{...this.state.filterGroup,logic:e.target.value.operator}})},this.clear=e=>{if(e.preventDefault(),!this.props.onFilterChange)return;const t=this.props.column.field,r=g(this.props.filter),n=h(t,this.props.filter),o=r.filters.filter(s=>s!==n);o.length?this.props.onFilterChange({...r,filters:o},e):this.props.onFilterChange(null,e),this.props.onCloseMenu&&this.props.onCloseMenu()},this.currentFilterGroup=()=>({...this.state.filterGroup,filters:this.state.filterGroup.filters.filter(e=>e.value!==void 0&&e.value!==null&&e.value!==""||e.value===null&&e.operator)}),this.submit=e=>{if(e.preventDefault(),!this.props.onFilterChange)return;const t=this.props.column.field,r=g(this.props.filter),n=h(t,this.props.filter),o=this.currentFilterGroup();let s=null;if(n&&o.filters.length>0){const p=r.filters.map(d=>d===n?o:d);s={...r,filters:p}}else if(o.filters.length===0){const p=r.filters.filter(d=>d!==n);p.length&&(s={...r,filters:p})}else s={...r,filters:[...r.filters,o]};this.props.onFilterChange(s,e),this.props.onCloseMenu&&this.props.onCloseMenu()};let l;if(i.column&&i.column.field){const e=a.getFilterType(i.column.filter),t=a.getDefaultOperator(i.filterOperators,e);l=h(i.column.field,i.filter),l=l?{...l,filters:l.filters.map(r=>({...r}))}:{logic:"and",filters:[{field:i.column.field,operator:t,value:a.IsUnaryFilter(t)?null:void 0},{field:i.column.field,operator:t,value:a.IsUnaryFilter(t)?null:void 0}]},l.filters.filter(r=>r.field===i.column.field).length===1&&l.filters.splice(1,0,{field:i.column.field,operator:t})}this.state={expanded:i.expanded||!1,filterGroup:l}}render(){const{column:i,filterUI:l,hideSecondFilter:e,filterOperators:t}=this.props;if(!i||!i.field)return u.createElement("div",null);const r=a.getFilterType(i.filter),n=e!==void 0?e:a.defaultHideSecondFilter[r],o=b.provideLocalizationService(this),s=this.state.filterGroup.filters,p=a.operatorMap(t[r],o),d=a.operatorMap(a.booleanFilterValues,o),M={field:i.field,value:s[0].value,operator:s[0].operator,operators:p,booleanValues:d,onChange:this.firstFilterChange,filterType:r},O={field:i.field,value:s[1].value,operator:s[1].operator,operators:p,booleanValues:d,onChange:this.secondFilterChange,filterType:r},v=this.state.filterGroup.logic,G=a.operatorMap(a.filterLogicList,o),C={value:G.find(q=>q.operator===(v===null?"":v)),onChange:this.logicChange,data:G},I=l,S={firstFilterProps:M,secondFilterProps:O,logicData:C.data,logicValue:C.value,onLogicChange:C.onChange,hideSecondFilter:n},D=this.currentFilterGroup().filters.length!==0||a.IsUnaryFilter(s[0].operator)||a.IsUnaryFilter(s[1].operator),k=this.isControlled()?this.props.expanded:this.state.expanded,x=this.props.alwaysExpand;return u.createElement(P.GridColumnMenuItemGroup,null,!x&&u.createElement(L.GridColumnMenuItem,{title:o.toLanguageString(f.filterTitle,f.messages[f.filterTitle]),iconClass:"k-i-filter",svgIcon:j.filterIcon,onClick:this.onFilterExpand}),u.createElement(U.GridColumnMenuItemContent,{show:x||!!k},u.createElement("form",{className:"k-filter-menu",onSubmit:this.submit,onReset:this.clear},u.createElement("div",{className:"k-filter-menu-container"},I?u.createElement(I,{...S}):u.createElement(T.GridColumnMenuFilterUI,{...S}),u.createElement("div",{className:"k-actions k-actions-stretched"},u.createElement(E.Button,{themeColor:"primary",disabled:!D},o.toLanguageString(f.filterSubmitButton,f.messages[f.filterSubmitButton])),u.createElement(E.Button,{type:"reset"},o.toLanguageString(f.filterClearButton,f.messages[f.filterClearButton])))))))}};F.active=(i,l)=>!!h(i,l);let m=F;b.registerForLocalization(m);exports.GridColumnMenuFilter=m;exports.filterGroupByField=h;exports.rootFilterOrDefault=g;

package/columnMenu/GridColumnMenuFilter.mjs

@@ -7,17 +7,17 @@
  */
 "use client";
 import * as a from "react";
-import { isCompositeFilterDescriptor as L } from "@progress/kendo-data-query";
-import { GridColumnMenuItem as B } from "./GridColumnMenuItem.mjs";
-import { GridColumnMenuItemGroup as T } from "./GridColumnMenuItemGroup.mjs";
+import { isCompositeFilterDescriptor as y } from "@progress/kendo-data-query";
+import { GridColumnMenuItem as T } from "./GridColumnMenuItem.mjs";
+import { GridColumnMenuItemGroup as w } from "./GridColumnMenuItemGroup.mjs";
 import { GridColumnMenuItemContent as z } from "./GridColumnMenuItemContent.mjs";
 import { provideLocalizationService as N, registerForLocalization as H } from "@progress/kendo-react-intl";
-import { getFilterType as D, getDefaultOperator as R, IsUnaryFilter as c, operatorMap as g, booleanFilterValues as K, filterLogicList as j, defaultHideSecondFilter as q } from "../filterCommon.mjs";
-import { filterTitle as b, messages as C, filterSubmitButton as M, filterClearButton as P } from "../messages/index.mjs";
-import { GridColumnMenuFilterUI as A } from "./GridColumnMenuFilterUI.mjs";
+import { getFilterType as L, getDefaultOperator as R, IsUnaryFilter as c, operatorMap as m, booleanFilterValues as j, filterLogicList as q, defaultHideSecondFilter as A } from "../filterCommon.mjs";
+import { filterTitle as b, messages as g, filterSubmitButton as D, filterClearButton as M } from "../messages/index.mjs";
+import { GridColumnMenuFilterUI as J } from "./GridColumnMenuFilterUI.mjs";
 import { Button as k } from "@progress/kendo-react-buttons";
-import { filterIcon as J } from "@progress/kendo-svg-icons";
-const F = (h) => h || { filters: [], logic: "and" }, u = (h, i) => F(i).filters.filter((t) => L(t) ? t.filters && t.filters.length && t.filters.length <= 2 && !t.filters.find((r) => L(r) || r.field !== h) : !1)[0] || null, G = class G extends a.Component {
+import { filterIcon as K } from "@progress/kendo-svg-icons";
+const C = (h) => h || { filters: [], logic: "and" }, u = (h, i) => C(i).filters.filter((t) => y(t) ? t.filters && t.filters.length && t.filters.length <= 2 && !t.filters.find((r) => y(r) || r.field !== h) : !1)[0] || null, v = class v extends a.Component {
   constructor(i) {
     super(i), this.removeGroup = (e, t) => {
       const r = [...t.filters], s = r.findIndex((l) => l === e);
@@ -62,7 +62,7 @@ const F = (h) => h || { filters: [], logic: "and" }, u = (h, i) => F(i).filters.
     }, this.clear = (e) => {
       if (e.preventDefault(), !this.props.onFilterChange)
         return;
-      const t = this.props.column.field, r = F(this.props.filter), s = u(t, this.props.filter), l = r.filters.filter((n) => n !== s);
+      const t = this.props.column.field, r = C(this.props.filter), s = u(t, this.props.filter), l = r.filters.filter((n) => n !== s);
       l.length ? this.props.onFilterChange({ ...r, filters: l }, e) : this.props.onFilterChange(null, e), this.props.onCloseMenu && this.props.onCloseMenu();
     }, this.currentFilterGroup = () => ({
       ...this.state.filterGroup,
@@ -70,7 +70,7 @@ const F = (h) => h || { filters: [], logic: "and" }, u = (h, i) => F(i).filters.
     }), this.submit = (e) => {
       if (e.preventDefault(), !this.props.onFilterChange)
         return;
-      const t = this.props.column.field, r = F(this.props.filter), s = u(t, this.props.filter), l = this.currentFilterGroup();
+      const t = this.props.column.field, r = C(this.props.filter), s = u(t, this.props.filter), l = this.currentFilterGroup();
       let n = null;
       if (s && l.filters.length > 0) {
         const f = r.filters.map((p) => p === s ? l : p);
@@ -93,7 +93,7 @@ const F = (h) => h || { filters: [], logic: "and" }, u = (h, i) => F(i).filters.
     };
     let o;
     if (i.column && i.column.field) {
-      const e = D(i.column.filter), t = R(i.filterOperators, e);
+      const e = L(i.column.filter), t = R(i.filterOperators, e);
       o = u(i.column.field, i.filter), o = o ? {
         ...o,
         filters: o.filters.map((r) => ({ ...r }))
@@ -117,7 +117,7 @@ const F = (h) => h || { filters: [], logic: "and" }, u = (h, i) => F(i).filters.
     const { column: i, filterUI: o, hideSecondFilter: e, filterOperators: t } = this.props;
     if (!i || !i.field)
       return /* @__PURE__ */ a.createElement("div", null);
-    const r = D(i.filter), s = e !== void 0 ? e : q[r], l = N(this), n = this.state.filterGroup.filters, f = g(t[r], l), p = g(K, l), O = {
+    const r = L(i.filter), s = e !== void 0 ? e : A[r], l = N(this), n = this.state.filterGroup.filters, f = m(t[r], l), p = m(j, l), O = {
       field: i.field,
       value: n[0].value,
       operator: n[0].operator,
@@ -125,7 +125,7 @@ const F = (h) => h || { filters: [], logic: "and" }, u = (h, i) => F(i).filters.
       booleanValues: p,
       onChange: this.firstFilterChange,
       filterType: r
-    }, U = {
+    }, P = {
       field: i.field,
       value: n[1].value,
       operator: n[1].operator,
@@ -133,56 +133,55 @@ const F = (h) => h || { filters: [], logic: "and" }, u = (h, i) => F(i).filters.
       booleanValues: p,
       onChange: this.secondFilterChange,
       filterType: r
-    }, x = this.state.filterGroup.logic, E = g(j, l), d = {
-      value: E.find((m) => m.operator === (x === null ? "" : x)),
+    }, G = this.state.filterGroup.logic, x = m(q, l), d = {
+      value: x.find((B) => B.operator === (G === null ? "" : G)),
       onChange: this.logicChange,
-      data: E
-    }, S = o, I = {
+      data: x
+    }, E = o, S = {
       firstFilterProps: O,
-      secondFilterProps: U,
+      secondFilterProps: P,
       logicData: d.data,
       logicValue: d.value,
       onLogicChange: d.onChange,
       hideSecondFilter: s
-    }, V = this.currentFilterGroup().filters.length !== 0 || c(n[0].operator) || c(n[1].operator), w = this.isControlled() ? this.props.expanded : this.state.expanded, y = this.props.alwaysExpand;
-    return /* @__PURE__ */ a.createElement(T, null, !y && /* @__PURE__ */ a.createElement(
-      B,
+    }, U = this.currentFilterGroup().filters.length !== 0 || c(n[0].operator) || c(n[1].operator), V = this.isControlled() ? this.props.expanded : this.state.expanded, I = this.props.alwaysExpand;
+    return /* @__PURE__ */ a.createElement(w, null, !I && /* @__PURE__ */ a.createElement(
+      T,
       {
-        title: l.toLanguageString(b, C[b]),
+        title: l.toLanguageString(b, g[b]),
         iconClass: "k-i-filter",
-        svgIcon: J,
+        svgIcon: K,
         onClick: this.onFilterExpand
       }
-    ), /* @__PURE__ */ a.createElement(z, { show: y || !!w }, /* @__PURE__ */ a.createElement(
+    ), /* @__PURE__ */ a.createElement(z, { show: I || !!V }, /* @__PURE__ */ a.createElement(
       "form",
       {
         className: "k-filter-menu",
         onSubmit: this.submit,
-        onReset: this.clear,
-        onKeyDown: (m) => m.stopPropagation()
+        onReset: this.clear
       },
-      /* @__PURE__ */ a.createElement("div", { className: "k-filter-menu-container" }, S ? /* @__PURE__ */ a.createElement(S, { ...I }) : /* @__PURE__ */ a.createElement(A, { ...I }), /* @__PURE__ */ a.createElement("div", { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ a.createElement(
+      /* @__PURE__ */ a.createElement("div", { className: "k-filter-menu-container" }, E ? /* @__PURE__ */ a.createElement(E, { ...S }) : /* @__PURE__ */ a.createElement(J, { ...S }), /* @__PURE__ */ a.createElement("div", { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ a.createElement(
         k,
         {
           themeColor: "primary",
-          disabled: !V
+          disabled: !U
         },
-        l.toLanguageString(M, C[M])
+        l.toLanguageString(D, g[D])
       ), /* @__PURE__ */ a.createElement(
         k,
         {
           type: "reset"
         },
-        l.toLanguageString(P, C[P])
+        l.toLanguageString(M, g[M])
       )))
     )));
   }
 };
-G.active = (i, o) => !!u(i, o);
-let v = G;
-H(v);
+v.active = (i, o) => !!u(i, o);
+let F = v;
+H(F);
 export {
-  v as GridColumnMenuFilter,
+  F as GridColumnMenuFilter,
   u as filterGroupByField,
-  F as rootFilterOrDefault
+  C as rootFilterOrDefault
 };

package/columnMenu/GridColumnMenuItem.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 l=require("react"),r=require("@progress/kendo-react-common");function a(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const o=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,o.get?o:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const c=a(l);class i extends c.Component{render(){const{title:n,iconClass:e,svgIcon:o,selected:s}=this.props;return c.createElement("div",{onClick:this.props.onClick,className:`k-columnmenu-item ${s?"k-selected":""}`},(e||o)&&c.createElement(r.IconWrap,{name:e&&r.toIconName(e),icon:o}),n)}}exports.GridColumnMenuItem=i;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("react"),o=require("@progress/kendo-react-common");function i(t){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const e in t)if(e!=="default"){const c=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(n,e,c.get?c:{enumerable:!0,get:()=>t[e]})}}return n.default=t,Object.freeze(n)}const r=i(a),u=t=>{const{title:n,iconClass:e,svgIcon:c,selected:l}=t;return r.createElement("div",{onClick:t.onClick,className:`k-columnmenu-item ${l?"k-selected":""}`},(e||c)&&r.createElement(o.IconWrap,{name:e&&o.toIconName(e),icon:c}),n)};exports.GridColumnMenuItem=u;

package/columnMenu/GridColumnMenuItem.mjs

@@ -6,17 +6,12 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as t from "react";
-import { IconWrap as s, toIconName as m } from "@progress/kendo-react-common";
-class l extends t.Component {
-  /**
-   * @hidden
-   */
-  render() {
-    const { title: o, iconClass: e, svgIcon: n, selected: c } = this.props;
-    return /* @__PURE__ */ t.createElement("div", { onClick: this.props.onClick, className: `k-columnmenu-item ${c ? "k-selected" : ""}` }, (e || n) && /* @__PURE__ */ t.createElement(s, { name: e && m(e), icon: n }), o);
-  }
-}
+import * as c from "react";
+import { IconWrap as l, toIconName as i } from "@progress/kendo-react-common";
+const r = (t) => {
+  const { title: o, iconClass: e, svgIcon: n, selected: m } = t;
+  return /* @__PURE__ */ c.createElement("div", { onClick: t.onClick, className: `k-columnmenu-item ${m ? "k-selected" : ""}` }, (e || n) && /* @__PURE__ */ c.createElement(l, { name: e && i(e), icon: n }), o);
+};
 export {
-  l as GridColumnMenuItem
+  r as GridColumnMenuItem
 };

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 h=require("react"),m=require("@progress/kendo-react-popup"),u=require("@progress/kendo-react-common"),p=require("@progress/kendo-svg-icons"),c=require("../messages/index.js"),d=require("@progress/kendo-react-intl");function f(s){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const t in s)if(t!=="default"){const o=Object.getOwnPropertyDescriptor(s,t);Object.defineProperty(e,t,o.get?o:{enumerable:!0,get:()=>s[t]})}}return e.default=s,Object.freeze(e)}const n=f(h);class g extends n.Component{constructor(){super(...arguments),this.state={show:!1},this._anchor=null,this._content=null,this.blurTimeout=void 0,this.willBlur=!1,this.blur=()=>{if(this.willBlur){this.willBlur=!1;return}clearTimeout(this.blurTimeout),this.blurTimeout=window.setTimeout(()=>{this.closeMenu()})},this.focus=()=>{clearTimeout(this.blurTimeout)},this.anchorClick=e=>{e.preventDefault(),this.state.show&&this.props.onCloseMenu&&this.props.onCloseMenu(),this.setState({show:!this.state.show},()=>this.state.show&&this._content&&this._content.focus())},this.closeMenu=()=>{this.props.onCloseMenu&&this.props.onCloseMenu(),this.setState({show:!1})},this.onAnchorMouseDown=e=>{this.willBlur=this.state.show&&e.currentTarget===this._anchor},this.onAnchorKeyDown=e=>{var t;if(e.keyCode===u.Keys.tab){const o=e.target,r=o&&((t=o.closest(".k-grid"))==null?void 0:t.getElementsByClassName("k-grid-content")[0]);r&&r.scrollWidth>r.clientWidth&&o.scrollIntoView({inline:"center"})}}}render(){const{columnMenu:e,...t}=this.props,{column:o}=this.props,r=d.provideLocalizationService(this),i=o.title||o.field,a=i?`${i} `:"";return n.createElement(n.Fragment,null,n.createElement("a",{className:"k-grid-header-menu k-grid-column-menu",ref:l=>this._anchor=l,onClick:this.anchorClick,onMouseDown:this.onAnchorMouseDown,onKeyDown:this.onAnchorKeyDown,href:"#","aria-label":`${a}${r.toLanguageString(c.columnMenu,c.messages[c.columnMenu])}`},n.createElement(u.IconWrap,{name:"filter",icon:p.filterIcon})),n.createElement(m.Popup,{anchor:this._anchor,show:this.state.show,popupClass:"k-column-menu k-column-menu-popup k-grid-columnmenu-popup"},n.createElement("div",{ref:l=>this._content=l,tabIndex:0,onBlur:this.blur,onFocus:this.focus,style:{outline:"none"}},e&&n.createElement(e,{...t,onCloseMenu:this.closeMenu}))))}}exports.GridColumnMenuWrapper=g;
+"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.filterIcon})),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=$;

package/columnMenu/GridColumnMenuWrapper.mjs

@@ -7,85 +7,108 @@
  */
 "use client";
 import * as t from "react";
-import { Popup as h } from "@progress/kendo-react-popup";
-import { Keys as u, IconWrap as a } from "@progress/kendo-react-common";
-import { filterIcon as m } from "@progress/kendo-svg-icons";
-import { columnMenu as l, messages as p } from "../messages/index.mjs";
-import { provideLocalizationService as f } from "@progress/kendo-react-intl";
-class k extends t.Component {
-  constructor() {
-    super(...arguments), this.state = {
-      show: !1
-    }, this._anchor = null, this._content = null, this.blurTimeout = void 0, this.willBlur = !1, this.blur = () => {
-      if (this.willBlur) {
-        this.willBlur = !1;
-        return;
+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 { filterIcon as L } from "@progress/kendo-svg-icons";
+import { columnMenu as w, messages as W } 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(
+  (u) => `${o} ${u}`
+)), P = [
+  [".k-tabstrip-items"],
+  [".k-columnmenu-item"],
+  ...H
+], 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 = _(), g = h.title || h.field, M = g ? `${g} ` : "", b = "#", p = (e) => {
+    const n = A(document);
+    clearTimeout(a.current), a.current = window.setTimeout(() => {
+      n && e.relatedTarget !== l.current && s.current && !s.current.contains(n) && i();
+    });
+  }, y = () => {
+    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) => {
+    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" });
+    }
+  }, m = t.useMemo(() => o.show !== void 0 ? o.show : u, [o.show, u]), T = (e) => {
+    var n;
+    (n = c.current) == null || n.triggerKeyboardEvent(e);
+  }, S = (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) => {
+    e && e.click();
+  }, I = (e, n, r) => {
+    r.preventDefault(), i();
+  }, N = (e, n, r) => {
+    r.preventDefault(), n.focusElement(e);
+  };
+  return t.useEffect(() => (m && s.current && (c.current = new x({
+    tabIndex: 0,
+    root: s,
+    selectors: P,
+    keyboardEvents: {
+      keydown: {
+        Tab: K,
+        Enter: B,
+        Escape: I
       }
-      clearTimeout(this.blurTimeout), this.blurTimeout = window.setTimeout(() => {
-        this.closeMenu();
-      });
-    }, this.focus = () => {
-      clearTimeout(this.blurTimeout);
-    }, this.anchorClick = (e) => {
-      e.preventDefault(), this.state.show && this.props.onCloseMenu && this.props.onCloseMenu(), this.setState(
-        {
-          show: !this.state.show
-        },
-        () => this.state.show && this._content && this._content.focus()
-      );
-    }, this.closeMenu = () => {
-      this.props.onCloseMenu && this.props.onCloseMenu(), this.setState({ show: !1 });
-    }, this.onAnchorMouseDown = (e) => {
-      this.willBlur = this.state.show && e.currentTarget === this._anchor;
-    }, this.onAnchorKeyDown = (e) => {
-      var n;
-      if (e.keyCode === u.tab) {
-        const o = e.target, s = o && ((n = o.closest(".k-grid")) == null ? void 0 : n.getElementsByClassName("k-grid-content")[0]);
-        s && s.scrollWidth > s.clientWidth && o.scrollIntoView({ inline: "center" });
-      }
-    };
-  }
-  render() {
-    const { columnMenu: e, ...n } = this.props, { column: o } = this.props, s = f(this), i = o.title || o.field, c = i ? `${i} ` : "";
-    return /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(
-      "a",
+    },
+    mouseEvents: {
+      mousedown: N
+    }
+  }), c.current.focusElement(c.current.first, null)), () => {
+    c.current && (c.current = null);
+  }), [m]), /* @__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,
+      tabIndex: o.navigatable ? -1 : void 0,
+      "aria-label": `${M}${k.toLanguageString(w, W[w])}`
+    },
+    /* @__PURE__ */ t.createElement(z, { name: "filter", icon: L })
+  ), /* @__PURE__ */ t.createElement(
+    R,
+    {
+      anchor: l.current,
+      show: m,
+      popupClass: "k-column-menu k-column-menu-popup k-grid-columnmenu-popup"
+    },
+    /* @__PURE__ */ t.createElement(
+      "div",
       {
-        className: "k-grid-header-menu k-grid-column-menu",
-        ref: (r) => this._anchor = r,
-        onClick: this.anchorClick,
-        onMouseDown: this.onAnchorMouseDown,
-        onKeyDown: this.onAnchorKeyDown,
-        href: "#",
-        "aria-label": `${c}${s.toLanguageString(l, p[l])}`
+        ref: s,
+        onBlur: p,
+        onFocus: y,
+        onMouseDown: S,
+        onKeyDown: T,
+        style: { outline: "none" }
       },
-      /* @__PURE__ */ t.createElement(a, { name: "filter", icon: m })
-    ), /* @__PURE__ */ t.createElement(
-      h,
-      {
-        anchor: this._anchor,
-        show: this.state.show,
-        popupClass: "k-column-menu k-column-menu-popup k-grid-columnmenu-popup"
-      },
-      /* @__PURE__ */ t.createElement(
-        "div",
+      E && /* @__PURE__ */ t.createElement(
+        E,
         {
-          ref: (r) => this._content = r,
-          tabIndex: 0,
-          onBlur: this.blur,
-          onFocus: this.focus,
-          style: { outline: "none" }
-        },
-        e && /* @__PURE__ */ t.createElement(
-          e,
-          {
-            ...n,
-            onCloseMenu: this.closeMenu
-          }
-        )
+          ...v,
+          onCloseMenu: i
+        }
       )
-    ));
-  }
-}
+    )
+  ));
+};
 export {
-  k as GridColumnMenuWrapper
+  Q as GridColumnMenuWrapper
 };