@progress/kendo-react-grid 8.3.0-develop.9 → 8.4.0-develop.1

package/StatusBar.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 E=require("react"),h=require("@progress/kendo-react-common");function O(r){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const o in r)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(r,o);Object.defineProperty(s,o,n.get?n:{enumerable:!0,get:()=>r[o]})}}return s.default=r,Object.freeze(s)}const c=O(E),b=r=>{const{data:s=[]}=r;return c.createElement("div",{className:"k-selection-aggregates k-grid-selection-aggregates"},s.map((o,n)=>c.createElement("div",{key:n},c.createElement("span",{className:"k-selection-aggregates-item-text"},o.type,": "),c.createElement("span",{className:"k-selection-aggregates-item-value"},o.formattedValue))))};b.displayName="KendoReactGridStatusBar";const p=r=>{var o;const s=r.slice();for(let n=0;n<s.length;n++)for(;s[n]&&((o=s[n].children)!=null&&o.length);)s.splice(n,1,...s[n].children);return s},j=r=>{const{dataItems:s,target:o,selectedField:n}=r,y=p(o.columns).map(e=>e.field).filter(e=>e&&typeof e=="string").map(e=>h.getter(e)),S=h.getter(n),t={dates:[],numbers:[],booleans:[],others:[]},D=e=>{typeof e=="number"?t.numbers.push(e):typeof e=="boolean"?t.booleans.push(e):e instanceof Date?t.dates.push(e):t.others.push(e)};s.forEach(e=>{const a=S(e);a&&a.forEach(l=>{D(y[l](e))})});const u=t.dates.map(e=>e.getTime()),g=t.booleans.filter(e=>e).length,m=t.booleans.filter(e=>!e).length,i=t.numbers.length?t.numbers.reduce((e,a)=>e+=a,0):void 0,d={sum:i,average:typeof i=="number"?i/t.numbers.length:void 0,min:t.numbers.length?Math.min(...t.numbers):void 0,max:t.numbers.length?Math.max(...t.numbers):void 0,count:t.numbers.length+t.booleans.length+t.dates.length+t.others.length,isTrue:g>0?g:void 0,isFalse:m>0?m:void 0,earliest:t.dates.length?new Date(Math.min(...u)):void 0,latest:t.dates.length?new Date(Math.max(...u)):void 0},v=(e,a)=>(a==="sum"||a==="average")&&typeof e=="number"?e.toFixed(2):(a==="earliest"||a==="latest")&&e instanceof Date?e.toLocaleDateString():String(e),f=[];return Object.keys(d).forEach(e=>{const a=e,l=d[a];l!==void 0&&f.push({type:a,value:l,formattedValue:v(l,a)})}),f};exports.StatusBar=b;exports.getStatusData=j;exports.leafColumns=p;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react"),h=require("@progress/kendo-react-common");function O(r){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const o in r)if(o!=="default"){const n=Object.getOwnPropertyDescriptor(r,o);Object.defineProperty(s,o,n.get?n:{enumerable:!0,get:()=>r[o]})}}return s.default=r,Object.freeze(s)}const l=O(E),b=r=>{const{data:s=[]}=r;return l.createElement("div",{className:"k-selection-aggregates k-grid-selection-aggregates"},s.map((o,n)=>l.createElement("div",{key:n},l.createElement("span",{className:"k-selection-aggregates-item-text"},o.type,": "),l.createElement("span",{className:"k-selection-aggregates-item-value"},o.formattedValue))))};b.displayName="KendoReactGridStatusBar";const p=r=>{var o;const s=r.slice();for(let n=0;n<s.length;n++)for(;s[n]&&((o=s[n].children)!=null&&o.length);)s.splice(n,1,...s[n].children);return s},j=r=>{const{dataItems:s,target:o,selectedField:n}=r,y=p(o.columns).map(e=>e.field).filter(e=>e&&typeof e=="string").map(e=>h.getter(e)),S=h.getter(n),t={dates:[],numbers:[],booleans:[],others:[]},D=e=>{typeof e=="number"?t.numbers.push(e):typeof e=="boolean"?t.booleans.push(e):e instanceof Date?t.dates.push(e):t.others.push(e)};s.forEach(e=>{const a=S(e);a&&a.forEach(c=>{D(y[c](e))})});const u=t.dates.map(e=>e.getTime()),g=t.booleans.filter(e=>e).length,m=t.booleans.filter(e=>!e).length,i=t.numbers.length?t.numbers.reduce((e,a)=>e+=a,0):void 0,d={sum:i,average:typeof i=="number"?i/t.numbers.length:void 0,min:t.numbers.length?Math.min(...t.numbers):void 0,max:t.numbers.length?Math.max(...t.numbers):void 0,count:t.numbers.length+t.booleans.length+t.dates.length+t.others.length,isTrue:g>0?g:void 0,isFalse:m>0?m:void 0,earliest:t.dates.length?new Date(Math.min(...u)):void 0,latest:t.dates.length?new Date(Math.max(...u)):void 0},v=(e,a)=>(a==="sum"||a==="average")&&typeof e=="number"?e.toFixed(2):(a==="earliest"||a==="latest")&&e instanceof Date?e.toLocaleDateString():String(e),f=[];return Object.keys(d).forEach(e=>{const a=e,c=d[a];c!==void 0&&f.push({type:a,value:c,formattedValue:v(c,a)})}),f};exports.StatusBar=b;exports.getStatusData=j;exports.leafColumns=p;

package/StatusBar.mjs

@@ -21,7 +21,9 @@ const D = (r) => {
       n.splice(a, 1, ...n[a].children);
   return n;
 }, N = (r) => {
-  const { dataItems: n, target: o, selectedField: a } = r, p = D(o.columns).map((e) => e.field).filter((e) => e && typeof e == "string").map((e) => f(e)), b = f(a), t = { dates: [], numbers: [], booleans: [], others: [] }, y = (e) => {
+  const { dataItems: n, target: o, selectedField: a } = r, p = D(o.columns).map((e) => e.field).filter((e) => e && typeof e == "string").map(
+    (e) => f(e)
+  ), b = f(a), t = { dates: [], numbers: [], booleans: [], others: [] }, y = (e) => {
     typeof e == "number" ? t.numbers.push(e) : typeof e == "boolean" ? t.booleans.push(e) : e instanceof Date ? t.dates.push(e) : t.others.push(e);
   };
   n.forEach((e) => {

package/cells/GridFilterCell.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 f=require("react"),g=require("@progress/kendo-react-buttons"),l=require("@progress/kendo-react-dropdowns"),c=require("@progress/kendo-react-inputs"),C=require("@progress/kendo-react-dateinputs"),n=require("../messages/index.js"),u=require("@progress/kendo-react-intl"),h=require("@progress/kendo-svg-icons"),p=require("../filterCommon.js"),m=require("@progress/kendo-react-common");function b(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 i=b(f);class d extends i.Component{constructor(e){super(e),this._inputRef=i.createRef(),this.renderOperatorEditor=t=>{if(this.props.filterType==="boolean")return;const o=this.props.operators.find(r=>r.operator===this.props.operator)||null;return i.createElement(l.DropDownList,{size:this.props.size,value:o,onChange:this.operatorChange,className:"k-dropdown-operator",iconClassName:"k-i-filter k-icon",svgIcon:h.filterIcon,data:this.props.operators,textField:"text",title:t.toLanguageString(n.filterChooseOperator,n.messages[n.filterChooseOperator]),popupSettings:{width:""}})},this.inputChange=this.inputChange.bind(this),this.clear=this.clear.bind(this),this.operatorChange=this.operatorChange.bind(this),this.boolDropdownChange=this.boolDropdownChange.bind(this)}render(){const e=u.provideLocalizationService(this),t=i.createElement("div",{className:"k-filtercell"},i.createElement("div",{className:"k-filtercell-wrapper"},this.filterComponent(this.props.filterType,this.props.value,this.props.booleanValues),i.createElement("div",{className:"k-filtercell-operator"},this.renderOperatorEditor(e)," ",i.createElement(g.Button,{size:this.props.size,icon:"filter-clear",svgIcon:h.filterClearIcon,className:m.classNames({"k-clear-button-visible":!!(!(this.props.value===null||this.props.value==="")||this.props.operator)}),title:e.toLanguageString(n.filterClearButton,n.messages[n.filterClearButton]),type:"button",onClick:this.clear,disabled:!(!(this.props.value===null||this.props.value==="")||this.props.operator)}))));return this.props.render?this.props.render.call(void 0,t,this.props):t}inputChange(e,t){p.cellInputChange(e,t,this.props)}operatorChange(e){p.cellOperatorChange(e,this.props.value,this.props.onChange)}boolDropdownChange(e){p.cellBoolDropdownChange(e,this.props.onChange)}clear(e){e.preventDefault(),this.props.onChange({value:"",operator:"",syntheticEvent:e}),this._inputRef.current&&(this._inputRef.current.element.value="",setTimeout(()=>{this._inputRef.current.element.focus()},0))}filterComponent(e,t,o){switch(e){case"numeric":return i.createElement(c.NumericTextBox,{ref:this._inputRef,size:this.props.size,value:t,onChange:r=>{this.inputChange(r.value,r.syntheticEvent)},title:this.props.title,ariaLabel:this.props.ariaLabel});case"date":return i.createElement(C.DatePicker,{ref:this._inputRef,size:this.props.size,value:t,onChange:r=>{this.inputChange(r.value,r.syntheticEvent)},title:this.props.title,ariaLabel:this.props.ariaLabel});case"boolean":{const r=a=>a==null;return i.createElement(l.DropDownList,{ref:this._inputRef,size:this.props.size,onChange:this.boolDropdownChange,value:o.find(a=>a.operator===(r(t)?"":t)),data:o,textField:"text",title:this.props.title,ariaLabel:this.props.ariaLabel})}default:return i.createElement(c.TextBox,{ref:this._inputRef,size:this.props.size,value:t||"",onChange:r=>{this.inputChange(r.target.value,r.syntheticEvent)},title:this.props.title,"aria-label":this.props.ariaLabel})}}}u.registerForLocalization(d);exports.GridFilterCell=d;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const g=require("react"),f=require("@progress/kendo-react-buttons"),l=require("@progress/kendo-react-dropdowns"),c=require("@progress/kendo-react-inputs"),C=require("@progress/kendo-react-dateinputs"),a=require("../messages/index.js"),u=require("@progress/kendo-react-intl"),h=require("@progress/kendo-svg-icons"),p=require("../filterCommon.js"),m=require("@progress/kendo-react-common");function b(n){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const t in n)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(n,t);Object.defineProperty(e,t,s.get?s:{enumerable:!0,get:()=>n[t]})}}return e.default=n,Object.freeze(e)}const i=b(g);class d extends i.Component{constructor(e){super(e),this._inputRef=i.createRef(),this.renderOperatorEditor=t=>{if(this.props.filterType==="boolean")return;let s;const r=this.props.operators.find(o=>o.operator===this.props.operator)||null;return i.createElement(l.DropDownList,{ref:o=>s=o,size:this.props.size,value:r,onChange:this.operatorChange,className:"k-dropdown-operator",iconClassName:"k-i-filter k-icon",svgIcon:h.filterIcon,data:this.props.operators,textField:"text",title:t.toLanguageString(a.filterChooseOperator,a.messages[a.filterChooseOperator]),popupSettings:{width:"",onMouseDownOutside:function(o){!o.isAnchorClicked&&o.state&&o.state.props.show&&s&&s.togglePopup()}}})},this.inputChange=this.inputChange.bind(this),this.clear=this.clear.bind(this),this.operatorChange=this.operatorChange.bind(this),this.boolDropdownChange=this.boolDropdownChange.bind(this)}render(){const e=u.provideLocalizationService(this),t=i.createElement("div",{className:"k-filtercell"},i.createElement("div",{className:"k-filtercell-wrapper"},this.filterComponent(this.props.filterType,this.props.value,this.props.booleanValues),i.createElement("div",{className:"k-filtercell-operator"},this.renderOperatorEditor(e)," ",i.createElement(f.Button,{size:this.props.size,icon:"filter-clear",svgIcon:h.filterClearIcon,className:m.classNames({"k-clear-button-visible":!!(!(this.props.value===null||this.props.value==="")||this.props.operator)}),title:e.toLanguageString(a.filterClearButton,a.messages[a.filterClearButton]),type:"button",onClick:this.clear,disabled:!(!(this.props.value===null||this.props.value==="")||this.props.operator)}))));return this.props.render?this.props.render.call(void 0,t,this.props):t}inputChange(e,t){p.cellInputChange(e,t,this.props)}operatorChange(e){p.cellOperatorChange(e,this.props.value,this.props.onChange)}boolDropdownChange(e){p.cellBoolDropdownChange(e,this.props.onChange)}clear(e){e.preventDefault(),this.props.onChange({value:"",operator:"",syntheticEvent:e}),this._inputRef.current&&(this._inputRef.current.element.value="",setTimeout(()=>{this._inputRef.current.element.focus()},0))}filterComponent(e,t,s){switch(e){case"numeric":return i.createElement(c.NumericTextBox,{ref:this._inputRef,size:this.props.size,value:t,onChange:r=>{this.inputChange(r.value,r.syntheticEvent)},title:this.props.title,ariaLabel:this.props.ariaLabel});case"date":return i.createElement(C.DatePicker,{ref:this._inputRef,size:this.props.size,value:t,onChange:r=>{this.inputChange(r.value,r.syntheticEvent)},title:this.props.title,ariaLabel:this.props.ariaLabel,popupSettings:{onMouseDownOutside:r=>{!r.isAnchorClicked&&r.state&&r.state.props.show&&this._inputRef&&this._inputRef.current.togglePopup()}}});case"boolean":{const r=o=>o==null;return i.createElement(l.DropDownList,{ref:this._inputRef,size:this.props.size,onChange:this.boolDropdownChange,value:s.find(o=>o.operator===(r(t)?"":t)),data:s,textField:"text",title:this.props.title,ariaLabel:this.props.ariaLabel,popupSettings:{onMouseDownOutside:o=>{!o.isAnchorClicked&&o.state&&o.state.props.show&&this._inputRef&&this._inputRef.current.togglePopup()}}})}default:return i.createElement(c.TextBox,{ref:this._inputRef,size:this.props.size,value:t||"",onChange:r=>{this.inputChange(r.target.value,r.syntheticEvent)},title:this.props.title,"aria-label":this.props.ariaLabel})}}}u.registerForLocalization(d);exports.GridFilterCell=d;

package/cells/GridFilterCell.mjs

@@ -6,36 +6,41 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-import * as i from "react";
+import * as o from "react";
 import { Button as h } from "@progress/kendo-react-buttons";
-import { DropDownList as a } from "@progress/kendo-react-dropdowns";
+import { DropDownList as p } from "@progress/kendo-react-dropdowns";
 import { TextBox as c, NumericTextBox as u } from "@progress/kendo-react-inputs";
-import { DatePicker as m } from "@progress/kendo-react-dateinputs";
-import { filterChooseOperator as n, messages as p, filterClearButton as l } from "../messages/index.mjs";
-import { provideLocalizationService as f, registerForLocalization as d } from "@progress/kendo-react-intl";
-import { filterIcon as g, filterClearIcon as C } from "@progress/kendo-svg-icons";
-import { cellInputChange as v, cellOperatorChange as b, cellBoolDropdownChange as z } from "../filterCommon.mjs";
+import { DatePicker as f } from "@progress/kendo-react-dateinputs";
+import { filterChooseOperator as n, messages as a, filterClearButton as l } from "../messages/index.mjs";
+import { provideLocalizationService as d, registerForLocalization as g } from "@progress/kendo-react-intl";
+import { filterIcon as m, filterClearIcon as C } from "@progress/kendo-svg-icons";
+import { cellInputChange as b, cellOperatorChange as v, cellBoolDropdownChange as w } from "../filterCommon.mjs";
 import { classNames as E } from "@progress/kendo-react-common";
-class L extends i.Component {
-  constructor(e) {
-    super(e), this._inputRef = i.createRef(), this.renderOperatorEditor = (t) => {
+class R extends o.Component {
+  constructor(r) {
+    super(r), this._inputRef = o.createRef(), this.renderOperatorEditor = (i) => {
       if (this.props.filterType === "boolean")
         return;
-      const o = this.props.operators.find((r) => r.operator === this.props.operator) || null;
-      return /* @__PURE__ */ i.createElement(
-        a,
+      let s;
+      const e = this.props.operators.find((t) => t.operator === this.props.operator) || null;
+      return /* @__PURE__ */ o.createElement(
+        p,
         {
+          ref: (t) => s = t,
           size: this.props.size,
-          value: o,
+          value: e,
           onChange: this.operatorChange,
           className: "k-dropdown-operator",
           iconClassName: "k-i-filter k-icon",
-          svgIcon: g,
+          svgIcon: m,
           data: this.props.operators,
           textField: "text",
-          title: t.toLanguageString(n, p[n]),
+          title: i.toLanguageString(n, a[n]),
           popupSettings: {
-            width: ""
+            width: "",
+            onMouseDownOutside: function(t) {
+              !t.isAnchorClicked && t.state && t.state.props.show && s && s.togglePopup();
+            }
           }
         }
       );
@@ -45,7 +50,7 @@ class L extends i.Component {
    * @hidden
    */
   render() {
-    const e = f(this), t = /* @__PURE__ */ i.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ i.createElement("div", { className: "k-filtercell-wrapper" }, this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues), /* @__PURE__ */ i.createElement("div", { className: "k-filtercell-operator" }, this.renderOperatorEditor(e), " ", /* @__PURE__ */ i.createElement(
+    const r = d(this), i = /* @__PURE__ */ o.createElement("div", { className: "k-filtercell" }, /* @__PURE__ */ o.createElement("div", { className: "k-filtercell-wrapper" }, this.filterComponent(this.props.filterType, this.props.value, this.props.booleanValues), /* @__PURE__ */ o.createElement("div", { className: "k-filtercell-operator" }, this.renderOperatorEditor(r), " ", /* @__PURE__ */ o.createElement(
       h,
       {
         size: this.props.size,
@@ -54,83 +59,93 @@ class L extends i.Component {
         className: E({
           "k-clear-button-visible": !!(!(this.props.value === null || this.props.value === "") || this.props.operator)
         }),
-        title: e.toLanguageString(l, p[l]),
+        title: r.toLanguageString(l, a[l]),
         type: "button",
         onClick: this.clear,
         disabled: !(!(this.props.value === null || this.props.value === "") || this.props.operator)
       }
     ))));
-    return this.props.render ? this.props.render.call(void 0, t, this.props) : t;
+    return this.props.render ? this.props.render.call(void 0, i, this.props) : i;
   }
-  inputChange(e, t) {
-    v(e, t, this.props);
+  inputChange(r, i) {
+    b(r, i, this.props);
   }
-  operatorChange(e) {
-    b(e, this.props.value, this.props.onChange);
+  operatorChange(r) {
+    v(r, this.props.value, this.props.onChange);
   }
-  boolDropdownChange(e) {
-    z(e, this.props.onChange);
+  boolDropdownChange(r) {
+    w(r, this.props.onChange);
   }
-  clear(e) {
-    e.preventDefault(), this.props.onChange({ value: "", operator: "", syntheticEvent: e }), this._inputRef.current && (this._inputRef.current.element.value = "", setTimeout(() => {
+  clear(r) {
+    r.preventDefault(), this.props.onChange({ value: "", operator: "", syntheticEvent: r }), this._inputRef.current && (this._inputRef.current.element.value = "", setTimeout(() => {
       this._inputRef.current.element.focus();
     }, 0));
   }
-  filterComponent(e, t, o) {
-    switch (e) {
+  filterComponent(r, i, s) {
+    switch (r) {
       case "numeric":
-        return /* @__PURE__ */ i.createElement(
+        return /* @__PURE__ */ o.createElement(
           u,
           {
             ref: this._inputRef,
             size: this.props.size,
-            value: t,
-            onChange: (r) => {
-              this.inputChange(r.value, r.syntheticEvent);
+            value: i,
+            onChange: (e) => {
+              this.inputChange(e.value, e.syntheticEvent);
             },
             title: this.props.title,
             ariaLabel: this.props.ariaLabel
           }
         );
       case "date":
-        return /* @__PURE__ */ i.createElement(
-          m,
+        return /* @__PURE__ */ o.createElement(
+          f,
           {
             ref: this._inputRef,
             size: this.props.size,
-            value: t,
-            onChange: (r) => {
-              this.inputChange(r.value, r.syntheticEvent);
+            value: i,
+            onChange: (e) => {
+              this.inputChange(e.value, e.syntheticEvent);
             },
             title: this.props.title,
-            ariaLabel: this.props.ariaLabel
+            ariaLabel: this.props.ariaLabel,
+            popupSettings: {
+              onMouseDownOutside: (e) => {
+                !e.isAnchorClicked && e.state && e.state.props.show && this._inputRef && this._inputRef.current.togglePopup();
+              }
+            }
           }
         );
       case "boolean": {
-        const r = (s) => s == null;
-        return /* @__PURE__ */ i.createElement(
-          a,
+        const e = (t) => t == null;
+        return /* @__PURE__ */ o.createElement(
+          p,
           {
             ref: this._inputRef,
             size: this.props.size,
             onChange: this.boolDropdownChange,
-            value: o.find((s) => s.operator === (r(t) ? "" : t)),
-            data: o,
+            value: s.find((t) => t.operator === (e(i) ? "" : i)),
+            data: s,
             textField: "text",
             title: this.props.title,
-            ariaLabel: this.props.ariaLabel
+            ariaLabel: this.props.ariaLabel,
+            popupSettings: {
+              onMouseDownOutside: (t) => {
+                !t.isAnchorClicked && t.state && t.state.props.show && this._inputRef && this._inputRef.current.togglePopup();
+              }
+            }
           }
         );
       }
       default:
-        return /* @__PURE__ */ i.createElement(
+        return /* @__PURE__ */ o.createElement(
           c,
           {
             ref: this._inputRef,
             size: this.props.size,
-            value: t || "",
-            onChange: (r) => {
-              this.inputChange(r.target.value, r.syntheticEvent);
+            value: i || "",
+            onChange: (e) => {
+              this.inputChange(e.target.value, e.syntheticEvent);
             },
             title: this.props.title,
             "aria-label": this.props.ariaLabel
@@ -139,7 +154,7 @@ class L extends i.Component {
     }
   }
 }
-d(L);
+g(R);
 export {
-  L as GridFilterCell
+  R as GridFilterCell
 };

package/columnMenu/GridColumnMenuColumnsList.mjs

@@ -14,21 +14,35 @@ import { Button as f } from "@progress/kendo-react-buttons";
 import { useLocalization as I } from "@progress/kendo-react-intl";
 import { filterSelectAll as h, messages as u, filterApplyButton as g, filterResetButton as E } from "../messages/index.mjs";
 const R = (l) => {
-  const [a, S] = t.useState(""), d = l.columns.reduce((e, n) => ({ ...e, [n.id || ""]: !!l.columnsState.find((o) => o.id === n.id) }), {}), [c, m] = t.useState(d), b = t.useMemo(() => l.columns.filter((e) => {
-    var n;
-    return (n = e.title || e.field) == null ? void 0 : n.toLowerCase().includes(a.toLowerCase());
-  }), [l.columns, a]), r = I(), N = t.useCallback(() => {
+  const [a, S] = t.useState(""), d = l.columns.reduce(
+    (e, n) => ({ ...e, [n.id || ""]: !!l.columnsState.find((o) => o.id === n.id) }),
+    {}
+  ), [c, m] = t.useState(d), b = t.useMemo(
+    () => l.columns.filter((e) => {
+      var n;
+      return (n = e.title || e.field) == null ? void 0 : n.toLowerCase().includes(a.toLowerCase());
+    }),
+    [l.columns, a]
+  ), r = I(), N = t.useCallback(() => {
     const e = l.columns.filter((n) => c[n.id || ""]);
     l.onColumnsChange.call(void 0, e), l.onCloseMenu.call(void 0);
   }, [c, l.columns, l.onColumnsChange, l.onCloseMenu]), x = () => {
     m(d);
-  }, s = t.useMemo(() => Object.values(c).filter((e) => e).length, [c]), i = t.useMemo(() => s === l.columns.length, [l.columns, s]), y = t.useCallback(() => {
+  }, s = t.useMemo(
+    () => Object.values(c).filter((e) => e).length,
+    [c]
+  ), i = t.useMemo(() => s === l.columns.length, [l.columns, s]), y = t.useCallback(() => {
     const e = { ...c };
-    Object.keys(e).forEach((n, o) => e[n] = i && o === 0 ? !0 : !i), m(e);
-  }, [c, i]), L = t.useCallback((e, n) => {
-    const o = { ...c };
-    o[n || ""] = e, m(o);
-  }, [c]), v = (e) => {
+    Object.keys(e).forEach(
+      (n, o) => e[n] = i && o === 0 ? !0 : !i
+    ), m(e);
+  }, [c, i]), L = t.useCallback(
+    (e, n) => {
+      const o = { ...c };
+      o[n || ""] = e, m(o);
+    },
+    [c]
+  ), v = (e) => {
     S(String(e.target.value));
   };
   return /* @__PURE__ */ t.createElement("form", { className: "k-filter-menu" }, /* @__PURE__ */ t.createElement("div", { className: "k-filter-menu-container" }, /* @__PURE__ */ t.createElement(

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

package/columnMenu/GridColumnMenuWrapper.mjs

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