@progress/kendo-react-data-tools/columnmenu/ColumnMenu.js

Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * 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 ue=require("react"),ae=require("@progress/kendo-react-popup"),me=require("@progress/kendo-react-intl"),fe=require("@progress/kendo-data-query"),T=require("./ColumnMenuItem.js"),F=require("./ColumnMenuFilters.js"),A=require("./ColumnMenuFilterLogic.js"),de=require("./ColumnMenuFilterForm.js"),g=require("../messages/index.js"),L=require("@progress/kendo-react-common"),Ce=require("../package-metadata.js"),S=require("@progress/kendo-svg-icons");function ge(l){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const c in l)if(c!=="default"){const t=Object.getOwnPropertyDescriptor(l,c);Object.defineProperty(m,c,t.get?t:{enumerable:!0,get:()=>l[c]})}}return m.default=l,Object.freeze(m)}const e=ge(ue),E=l=>{const m=!L.validatePackage(Ce.packageMetadata,{component:"ColumnMenu"}),c=e.useRef([]),{field:t,filter:n,sort:f=c.current,onSortChange:s,onFilterChange:M,initialFilter:k,sortAsc:B=!1,sortDesc:O=!1,filterContent:N=[],expandFilters:D=!1}=l,[d,P]=e.useState(!1),[I,j]=e.useState(D),[r,b]=e.useState(t&&k?k(t):null),q=e.useRef(null),w=e.useRef(null),x=e.useRef(null),R=e.useRef(!1),p=e.useCallback(()=>(n||[]).find(o=>o.filters.every(i=>!fe.isCompositeFilterDescriptor(i)&&i.field===t)),[n,t]),C=e.useCallback(()=>{P(!1)},[]),K=e.useCallback(()=>{if(R.current){R.current=!1;return}clearTimeout(x.current),x.current=window.setTimeout(()=>{C()})},[C]),U=e.useCallback(()=>clearTimeout(x.current),[]),V=e.useCallback(o=>{R.current=d&&o.currentTarget===q.current},[d]),X=e.useCallback(()=>{P(!d),t&&k&&(j(d?!1:D),b(d?r:p()||k(t)))},[p,t,d,r,k,D]);e.useEffect(()=>{d&&w.current&&w.current.focus()},[d]);const Y=e.useCallback(()=>j(!I),[I]),h=e.useCallback((o,i)=>{const u=[...f],a=u.findIndex(se=>se.field===t),v={field:t,dir:i};a>=0?u[a].dir!==v.dir?u.splice(a,1,v):u.splice(a,1):u.push(v),C(),s&&s.call(void 0,o,u,t)},[f,t,s,C]),W=e.useCallback((o,i,u)=>{const a={...r,filters:[...r.filters]},v=a.filters.indexOf(u);a.filters.splice(v,1,i),b(a)},[r]),Z=e.useCallback(o=>{o.preventDefault();const i=(n||[]).slice(),u=p(),a=u?i.indexOf(u):-1;a>=0?i.splice(a,1,r):i.push(r),C(),M&&M.call(void 0,o,i,t)},[n,r,t,M,C,p]),$=e.useCallback(o=>{const i=(n||[]).slice(),u=p(),a=u?i.indexOf(u):-1;a>=0&&i.splice(a,1),k&&b(k(t)),C(),M&&M.call(void 0,o,i,t)},[n,t,M,k,C,p]),ee=e.useCallback(o=>h(o,"asc"),[h]),te=e.useCallback(o=>h(o,"desc"),[h]),ne=e.useCallback(o=>r&&b({...r,logic:o.value.logic}),[r]),_=f.find(o=>o.field===t)||{dir:""},[z,Q,G]=N,y=me.useLocalization(),le=B||O?e.createElement("div",{className:"k-columnmenu-item-wrapper",key:"sorting"},B&&e.createElement(T.ColumnMenuItem,{title:y.toLanguageString(g.columnMenuSortAscending,g.messages[g.columnMenuSortAscending]),iconClass:"k-i-sort-asc-small",svgIcon:S.sortAscSmallIcon,selected:_.dir==="asc",onClick:ee}),O&&e.createElement(T.ColumnMenuItem,{title:y.toLanguageString(g.columnMenuSortDescending,g.messages[g.columnMenuSortDescending]),iconClass:"k-i-sort-desc-small",svgIcon:S.sortDescSmallIcon,selected:_.dir==="desc",onClick:te})):null,oe=r&&N.length>0?e.createElement("div",{className:"k-columnmenu-item-wrapper",key:"filtering"},e.createElement(T.ColumnMenuItem,{iconClass:"k-i-filter",svgIcon:S.filterIcon,title:y.toLanguageString(g.columnMenuFilterTitle,g.messages[g.columnMenuFilterTitle]),onClick:Y}),e.createElement(de.ColumnMenuFilterForm,{show:I,onSubmit:Z,onReset:$},z&&e.createElement(z,{filter:r.filters[0],onFilterChange:W}),Q&&e.createElement(Q,{value:r.logic,onChange:ne}),G&&e.createElement(G,{filter:r.filters[1],onFilterChange:W}))):null,H=[le,oe],re=e.createElement("span",{ref:q,onClick:X,onMouseDown:V,className:"k-grid-header-menu k-grid-column-menu"+(p()?" k-active":""),key:"button"},e.createElement(L.IconWrap,{name:"filter",icon:S.filterIcon})),ie=e.createElement(ae.Popup,{anchor:q.current,show:d,key:"popup",popupClass:"k-column-menu k-column-menu-popup"},e.createElement("div",{ref:w,tabIndex:0,onBlur:K,onFocus:U,style:{outline:"none"}},l.itemsRender?l.itemsRender.call(void 0,H,{closeMenu:C,field:t}):H)),ce=m?e.createElement(L.WatermarkOverlay,null):e.createElement(e.Fragment,null),J=[re,ie,ce];return e.createElement(e.Fragment,null,l.render?l.render.call(void 0,J):J)},ke=l=>{const{field:m,...c}=l,t=e.useCallback(s=>({logic:"and",filters:[{operator:"contains",field:s,value:""},{operator:"contains",field:s,value:""}]}),[]),n=!!l.field,f=n?[F.ColumnMenuTextFilter,A.ColumnMenuFilterLogic,F.ColumnMenuTextFilter]:[];return e.createElement(E,{sortAsc:n,sortDesc:n,filterContent:f,initialFilter:n?t:void 0,field:m,...c})},pe=l=>{const{field:m,...c}=l,t=e.useCallback(s=>({logic:"or",filters:[{operator:"eq",field:s,value:null},{operator:"eq",field:s,value:null}]}),[]),n=!!l.field,f=n?[F.ColumnMenuNumericFilter,A.ColumnMenuFilterLogic,F.ColumnMenuNumericFilter]:[];return e.createElement(E,{sortAsc:n,sortDesc:n,filterContent:f,initialFilter:n?t:void 0,field:m,...c})},Fe=l=>{const{field:m,...c}=l,t=e.useCallback(s=>({logic:"or",filters:[{operator:"eq",field:s,value:null},{operator:"eq",field:s,value:null}]}),[]),n=!!l.field,f=n?[F.ColumnMenuDateFilter,A.ColumnMenuFilterLogic,F.ColumnMenuDateFilter]:[];return e.createElement(E,{sortAsc:n,sortDesc:n,filterContent:f,initialFilter:n?t:void 0,field:m,...c})},Me=l=>{const{field:m,...c}=l,t=e.useCallback(s=>({logic:"and",filters:[{operator:"eq",field:s,value:!1}]}),[]),n=!!l.field,f=n?[F.ColumnMenuBooleanFilter]:[];return e.createElement(E,{sortAsc:n,sortDesc:n,filterContent:f,initialFilter:n?t:void 0,field:m,...c})};exports.ColumnMenuBooleanColumn=Me;exports.ColumnMenuDateColumn=Fe;exports.ColumnMenuNumericColumn=pe;exports.ColumnMenuTextColumn=ke;