@progress/kendo-react-grid/toolbar-tools/GridToolbarColumnsChooser.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 te=require("react"),oe=require("react-dom"),y=require("@progress/kendo-react-buttons"),h=require("@progress/kendo-react-common"),b=require("@progress/kendo-react-inputs"),F=require("@progress/kendo-svg-icons"),ne=require("../columnMenu/GridColumnMenuItemContent.js"),n=require("../messages/index.js"),le=require("../utils/GridContext.js"),re=require("@progress/kendo-react-intl"),se=require("./adaptiveContent/GridAdaptiveToolbarColumnChooser.js"),ce=require("@progress/kendo-react-popup"),K=require("@progress/kendo-react-indicators"),ae=require("./adaptiveContext/GridToolbarAdaptiveContext.js");function ue(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const r in l)if(r!=="default"){const u=Object.getOwnPropertyDescriptor(l,r);Object.defineProperty(s,r,u.get?u:{enumerable:!0,get:()=>l[r]})}}return s.default=l,Object.freeze(s)}const t=ue(te),_=l=>{var L,P;const s=t.useContext(le.GridContext),r=s.columnsState,u=s.onColumnsStateChange,[k,f]=t.useState(!1),[d,V]=t.useState(""),[H,S]=t.useState(!1),B=r.reduce((e,o)=>({...e,[o.id||""]:!o.hidden}),{}),[c,p]=t.useState(B),i=t.useRef(null),v=t.useRef(null),R=t.useRef(null),M=t.useRef(0),m=re.useLocalization(),W=h.useDocument(i),A=t.useMemo(()=>(r==null?void 0:r.filter(e=>{var o;return(o=e.title||e.field)==null?void 0:o.toLowerCase().includes(d.toLowerCase())}))||[],[r,d]),g=t.useMemo(()=>Object.values(c).filter(e=>e).length,[c]),C=t.useMemo(()=>g===(r==null?void 0:r.length),[r,g]),I=t.useCallback(e=>{var z;e.preventDefault();const a=(w=>(w==null?void 0:w.map(j=>({...j,hidden:!c[j.id||""]})))||[])(r);u&&u(a),(z=l.onCloseMenu)==null||z.call(void 0),f(!1)},[r,u,l.onCloseMenu,c]),T=e=>{e.preventDefault(),p(B),S(!1)},q=t.useCallback(()=>{const e={...c};Object.keys(e).forEach((o,a)=>e[o]=C&&a===0?!0:!C),p(e),S(!0)},[c,C]),D=t.useCallback((e,o)=>{const a={...c};a[o||""]=e,p(a),S(!0)},[c]),x=e=>{V(String(e.target.value))},J=e=>{e.preventDefault(),f(!k)},E=t.useMemo(()=>l.show!==void 0?l.show:k,[l.show,k]),N=()=>{var e;l.onCloseMenu&&l.onCloseMenu(),f(!1),i.current&&((e=i.current.element)==null||e.focus())},Q=e=>{const o=h.getActiveElement(document);clearTimeout(M.current),M.current=window.setTimeout(()=>{!s.mobileMode&&o&&e.relatedTarget!==i.current&&v.current&&!v.current.contains(o)&&N()})},U=()=>{clearTimeout(M.current)},{onFocus:X,onBlur:Y}=h.useAsyncFocusBlur({onFocus:e=>U(),onBlur:e=>Q(e)}),Z=e=>{var o;(o=R.current)==null||o.triggerMouseEvent(e)},$=e=>{var o;(o=R.current)==null||o.triggerKeyboardEvent(e)},ee=e=>{!e.isAnchorClicked&&f(!1)},G=t.createElement(ne.GridColumnMenuItemContent,{show:!0},t.createElement("form",{onSubmit:I,onReset:T,className:"k-filter-menu"},t.createElement("div",{className:"k-filter-menu-container"},t.createElement(b.TextBox,{className:"k-searchbox",value:d,onChange:x,size:s.mobileMode?"large":"medium",prefix:()=>t.createElement(b.InputPrefix,null,t.createElement(h.IconWrap,{name:"search",icon:F.searchIcon}))}),t.createElement("ul",{className:"k-reset k-multicheck-wrap"},!d&&t.createElement("li",{className:"k-item k-check-all-wrap"},t.createElement(b.Checkbox,{checked:C,onChange:q,label:m.toLanguageString(n.filterSelectAll,n.messages[n.filterSelectAll]),size:s.mobileMode?"large":"medium"})),A.map(e=>t.createElement("li",{key:e.id,className:"k-item"},t.createElement(b.Checkbox,{disabled:c[e.id||""]&&g===1,checked:c[e.id||""],onChange:o=>{var a;return D(!!((a=o.target.element)!=null&&a.checked),e.id)},label:e.title||e.field,size:s.mobileMode?"large":"medium"})))),t.createElement("div",{className:"k-filter-selected-items"},g," ",m.toLanguageString(n.columnMenuColumnChooserSelectedItems,n.messages[n.columnMenuColumnChooserSelectedItems])),t.createElement("div",{className:"k-actions k-actions-start k-actions-horizontal"},t.createElement(y.Button,{type:"submit",themeColor:"primary"},m.toLanguageString(n.filterApplyButton,n.messages[n.filterApplyButton])),t.createElement(y.Button,{type:"reset"},m.toLanguageString(n.filterResetButton,n.messages[n.filterResetButton])))))),O=t.createElement(y.Button,{ref:i,togglable:!0,selected:E,svgIcon:l.svgIcon?l.svgIcon:l.icon?void 0:F.columnsIcon,icon:l.icon,size:s.mobileMode?"large":"medium",className:h.classNames("k-toolbar-button",{"k-icon-button":s.mobileMode}),title:m.toLanguageString(n.toolbarColumnsChooser,n.messages[n.toolbarColumnsChooser]),onClick:J},!s.mobileMode&&m.toLanguageString(n.toolbarColumnsChooser,n.messages[n.toolbarColumnsChooser]));return t.createElement(t.Fragment,null,H?t.createElement(K.BadgeContainer,null,O,t.createElement(K.Badge,{themeColor:"primary"})):O,s.mobileMode?t.createElement(ae.GridToolbarAdaptiveProvider,null,oe.createPortal(t.createElement(se.GridAdaptiveToolbarColumnChooser,{computedShow:E,filter:d,filtered:A,selectedColumns:c,allSelected:C,checkedCount:g,onClose:N,onApply:I,onReset:T,onFilter:x,onCheckChange:D,onSelectAll:q},G),(L=W())==null?void 0:L.body)):t.createElement(ce.Popup,{anchor:(P=i.current)==null?void 0:P.element,show:E,popupClass:"k-grid-columnmenu-popup",onMouseDownOutside:ee},t.createElement("div",{ref:v,onBlur:Y,onFocus:X,onMouseDown:Z,onKeyDown:$,className:"k-column-menu k-column-menu-md"},G)))};_.displayName="KendoReactGridToolbarColumnsChooser";exports.GridToolbarColumnsChooser=_;