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