@progress/kendo-react-grid/toolbar-tools/GridToolbarCheckboxFilter.js

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid 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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const qe=require("react"),ye=require("react-dom"),E=require("@progress/kendo-react-common"),De=require("../columnMenu/GridColumnMenuItem.js"),we=require("../columnMenu/GridColumnMenuItemContent.js"),Ne=require("../columnMenu/GridColumnMenuItemGroup.js"),Ae=require("../utils/GridContext.js"),F=require("@progress/kendo-svg-icons"),ce=require("@progress/kendo-data-query"),B=require("@progress/kendo-react-buttons"),V=require("@progress/kendo-react-inputs"),o=require("../messages/index.js"),Ge=require("@progress/kendo-react-intl"),se=require("../utils/index.js"),Oe=require("../columnMenu/GridColumnMenuCheckboxFilter.js"),Te=require("./adaptiveContent/GridAdaptiveToolbarCheckboxFilter.js"),Pe=require("@progress/kendo-react-popup"),ue=require("@progress/kendo-react-indicators"),Le=require("./adaptiveContext/GridToolbarAdaptiveContext.js");function Ve(l){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const k in l)if(k!=="default"){const v=Object.getOwnPropertyDescriptor(l,k);Object.defineProperty(m,k,v.get?v:{enumerable:!0,get:()=>l[k]})}}return m.default=l,Object.freeze(m)}const n=Ve(qe),je={uniqueData:!0},de=l=>{var oe,ie;const{uniqueData:m=je.uniqueData,svgIcon:k,icon:v}=l,c=n.useContext(Ae.GridContext),C=c.columnsRef,M=c.defaultFilter,[D,I]=n.useState(!1),x=n.useRef(null),w=n.useRef(null),j=n.useRef(null),N=n.useRef(0),g=Ge.useLocalization(),i=n.useRef(null),fe=E.useDocument(x),A=()=>M?E.clone(M):{filters:[],logic:"and"},me=()=>{var r;const e=(r=i==null?void 0:i.current)==null?void 0:r.field;return A().filters.findIndex(u=>u.filters&&u.filters.length>0&&u.filters[0].field===e)},b=(e,t)=>{var u;const a=((u=i==null?void 0:i.current)==null?void 0:u.field)||"",r=e.map(d=>se.getNestedValue(a,d));return t?r.filter((d,y)=>r.indexOf(d)===y):r},s=n.useRef(me()),[ge,S]=n.useState(!1),[h,z]=n.useState((C==null?void 0:C.map(e=>({column:e,expanded:!1})))||[]),[K,_]=n.useState(""),[q,p]=n.useState(b(l.data,m)||[]),[R,$]=n.useState(b(l.data,!1)||[]),[f,H]=n.useState(A()),[he,Q]=n.useState(!1),ke=g.toLanguageString(o.filterClearButton,o.messages[o.filterClearButton]),W=n.useMemo(()=>(C==null?void 0:C.filter(e=>{var t;return(t=e.title||e.field)==null?void 0:t.toLowerCase()}))||[],[C]);n.useEffect(()=>{M&&S(!0)},[M]),n.useEffect(()=>{var a;const e=((a=i==null?void 0:i.current)==null?void 0:a.field)||"",t=l.data.map(r=>se.getNestedValue(e,r));Oe.isArrayEqual(t,R)||(p(t),$(t))},[R,l.data]),n.useEffect(()=>{h.find(e=>e.expanded)&&p(b(l.data,m)||[])},[h,l.data,m]);const J=n.useCallback(e=>{const t=f.filters.some(a=>a.field===e.field);return n.createElement(n.Fragment,null,e.title||e.field,t&&n.createElement("span",{className:"k-columnmenu-indicators"},n.createElement(E.SvgIcon,{key:1,icon:F.filterIcon})))},[f]),U=n.useCallback((e,t)=>{z(a=>(i.current=t,a.map(r=>r.column.field===t.field?{...r,expanded:!r.expanded}:{...r,expanded:!1}))),p(b(l.data,m)||[]),$(b(l.data,m)||[]),Q(!he)},[]),X=e=>{var r;const t=l.searchBoxFilterOperator?l.searchBoxFilterOperator:"startswith",a={logic:"and",filters:[{field:(r=i==null?void 0:i.current)==null?void 0:r.field,operator:t,value:e.target.value,ignoreCase:!0}]};_(e.target.value),p(b(ce.filterBy(l.data||[],a),m))},Ce=()=>{var a;const e=l.searchBoxFilterOperator?l.searchBoxFilterOperator:"startswith",t={logic:"and",filters:[{field:(a=i==null?void 0:i.current)==null?void 0:a.field,operator:e,value:"",ignoreCase:!0}]};_(""),p(b(ce.filterBy(l.data||[],t),m))},Y=()=>{let e=!1;if(f){const t=[...f.filters];return s.current===-1?!1:(e=q.every(a=>s.current!==-1&&t[s.current].filters?t[s.current].filters.findIndex(u=>u.value===a)>=0:!1),e)}return e},G=(e,t)=>{var y;const a=((y=i==null?void 0:i.current)==null?void 0:y.field)||"",r={...f},u=[...f.filters];let d=[];if(s.current!==-1&&r.filters[s.current].filters&&t!=="all"&&(d=r.filters[s.current].filters),e.value&&t==="all")q.forEach(L=>{d.push({field:a,operator:"eq",value:L})});else if(e.value)d.push({field:a,operator:"eq",value:t});else if(f){const L=d.findIndex(Se=>Se.value===t);d.splice(L,1)}r.logic="and",s.current!==-1?u[s.current]={logic:"or",filters:d}:u.push({logic:"or",filters:d}),(!e.value&&t==="all"||d.length===0)&&u.splice(s.current,1),r.filters=u,H(r)},O=[];if(f){const e=[...f.filters];s.current=e.findIndex(t=>{var a;return t.filters&&t.filters.length>0?t.filters[0].field===((a=i==null?void 0:i.current)==null?void 0:a.field):!1}),s.current!==-1&&e[s.current].filters.length>0&&e[s.current].filters.forEach(t=>{var a;t.field===((a=i==null?void 0:i.current)==null?void 0:a.field)&&O.push(t.value)})}const T=O.filter((e,t)=>O.indexOf(e)===t),Z=e=>{if(e.preventDefault(),!c.filterChange)return;const t=f||null;t!==null&&t.filters.length>0?(s.current>=0&&t.filters.splice(s.current,1),c.filterChange(t,e)):c.filterChange(null,e),l.onCloseMenu&&l.onCloseMenu(),S(!1)},ee=e=>{if(e.preventDefault(),!c.filterChange)return;const t=f||null;c.filterChange(t,e),l.onCloseMenu&&l.onCloseMenu(),S(!0),I(!1)},te=l.searchBox?n.createElement(l.searchBox,{value:K,onChange:X}):n.createElement("div",{className:`k-searchbox k-textbox k-input k-input-solid ${c!=null&&c.mobileMode?"k-input-lg":"k-input-md"}`},n.createElement(E.IconWrap,{className:"k-input-icon",name:"search",icon:F.searchIcon}),n.createElement(V.Input,{className:"k-input-inner",type:"text",placeholder:g.toLanguageString(o.searchPlaceholder,o.messages[o.searchPlaceholder]),value:K,onChange:e=>X(e.nativeEvent)}),n.createElement(B.Button,{type:"button",rounded:null,className:"k-input-button",onClick:Ce,icon:"x","aria-label":ke,svgIcon:F.xIcon})),be=()=>{Q(!1)},Ee=e=>{e.preventDefault(),I(!D)},xe=e=>{!e.isAnchorClicked&&I(!1)},P=n.useMemo(()=>l.show!==void 0?l.show:D,[l.show,D]),ve=e=>{const t=E.getActiveElement(document);clearTimeout(N.current),N.current=window.setTimeout(()=>{!c.mobileMode&&t&&e.relatedTarget!==x.current&&w.current&&!w.current.contains(t)&&ne()})},ne=()=>{var e;l.onCloseMenu&&l.onCloseMenu(),I(!1),x.current&&((e=x.current.element)==null||e.focus())},pe=()=>{clearTimeout(N.current)},{onFocus:Fe,onBlur:Be}=E.useAsyncFocusBlur({onFocus:e=>pe(),onBlur:e=>ve(e)}),Me=e=>{var t;(t=j.current)==null||t.triggerMouseEvent(e)},Ie=e=>{var t;(t=j.current)==null||t.triggerKeyboardEvent(e)},re=e=>{if(e.preventDefault(),!c.filterChange)return;const t=f||null;t!==null&&t.filters.length>0?(t.filters=[],c.filterChange(t,e)):c.filterChange(null,e),H(A()),S(!1),z(a=>a.map(r=>({...r,expanded:!1})))},le=n.createElement(B.Button,{ref:x,togglable:!0,selected:P,svgIcon:k||(v?void 0:F.filterIcon),icon:v,size:c.mobileMode?"large":"medium",className:E.classNames("k-toolbar-button",{"k-icon-button":c.mobileMode}),title:g.toLanguageString(o.toolbarCheckboxFilter,o.messages[o.toolbarCheckboxFilter]),onClick:Ee},!c.mobileMode&&g.toLanguageString(o.toolbarCheckboxFilter,o.messages[o.toolbarCheckboxFilter])),ae=n.createElement(n.Fragment,null,W.map(e=>{var t,a;return e.filterable&&n.createElement(Ne.GridColumnMenuItemGroup,{key:e.id},n.createElement("div",{className:"k-expander"},n.createElement(De.GridColumnMenuItem,{title:J(e),expandable:!0,expanded:!!((t=h==null?void 0:h.find(r=>r.column.field===e.field))!=null&&t.expanded),onClick:r=>U(r,e)})),n.createElement(we.GridColumnMenuItemContent,{show:!!((a=h==null?void 0:h.find(r=>r.column.field===e.field))!=null&&a.expanded)},n.createElement("form",{className:"k-filter-menu",onSubmit:ee,onReset:Z},n.createElement("div",{className:"k-filter-menu-container"},te,n.createElement("ul",{className:"k-multicheck-wrap"},n.createElement("li",{className:"k-item k-check-all-wrap"},n.createElement(V.Checkbox,{label:g.toLanguageString(o.filterCheckAll,o.messages[o.filterCheckAll]),onChange:r=>G(r,"all"),checked:Y()})),q.map((r,u)=>n.createElement("li",{className:"k-item",key:u},n.createElement(V.Checkbox,{label:String(r),onChange:d=>G(d,r),checked:T.includes(r)})))),n.createElement("div",{className:"k-filter-selected-items"},T.length+" "+g.toLanguageString(o.filterSelectedItems,o.messages[o.filterSelectedItems])),n.createElement("div",{className:"k-actions k-hstack k-justify-content-stretch"},n.createElement(B.Button,{themeColor:"primary",type:"submit"},g.toLanguageString(o.filterSubmitButton,o.messages[o.filterSubmitButton])),n.createElement(B.Button,{className:"k-button",type:"reset"},g.toLanguageString(o.filterClearButton,o.messages[o.filterClearButton])))))))}),n.createElement("div",{className:"k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer"},n.createElement(B.Button,{svgIcon:F.filterClearIcon,onClick:re},g.toLanguageString(o.filterClearAllButton,o.messages[o.filterClearAllButton]))));return n.createElement(n.Fragment,null,ge?n.createElement(ue.BadgeContainer,null,le,n.createElement(ue.Badge,{themeColor:"primary"})):le,c.mobileMode?n.createElement(Le.GridToolbarAdaptiveProvider,null,ye.createPortal(n.createElement(Te.GridAdaptiveToolbarCheckboxFilter,{filtered:W,computedShow:P,expandState:h,currentData:q,uniqueFilterValues:T,searchBox:te,renderTitle:J,onBackView:be,isAllSelected:Y,handleCheckBoxChange:G,clear:Z,submit:ee,onClose:ne,onFilterExpand:U,handleClearAllFilters:re},ae),(oe=fe())==null?void 0:oe.body)):n.createElement(Pe.Popup,{anchor:(ie=x.current)==null?void 0:ie.element,show:P,popupClass:"k-grid-columnmenu-popup",onMouseDownOutside:xe},n.createElement("div",{ref:w,onBlur:Be,onFocus:Fe,onMouseDown:Me,onKeyDown:Ie,className:"k-column-menu k-column-menu-md"},ae)))};de.displayName="KendoReactGridToolbarCheckboxFilter";exports.GridToolbarCheckboxFilter=de;