@progress/kendo-react-grid/toolbar-tools/GridToolbarGroup.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 x=require("react"),ee=require("react-dom"),te=require("../utils/GridContext.js"),F=require("@progress/kendo-react-buttons"),g=require("@progress/kendo-svg-icons"),ne=require("@progress/kendo-react-intl"),i=require("../messages/index.js"),u=require("@progress/kendo-react-common"),P=require("@progress/kendo-react-indicators"),oe=require("@progress/kendo-react-popup"),ae=require("./adaptiveContext/GridToolbarAdaptiveContext.js"),re=require("./adaptiveContent/GridAdaptiveToolbarGroup.js");function le(l){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const c in l)if(c!=="default"){const f=Object.getOwnPropertyDescriptor(l,c);Object.defineProperty(o,c,f.get?f:{enumerable:!0,get:()=>l[c]})}}return o.default=l,Object.freeze(o)}const e=le(x),z=l=>{var A,O;const o=e.useContext(te.GridContext),c=o.columnsState,f=o.groupable,a=o.group,w=o.defaultGroup,[I,k]=e.useState(!0),[j,p]=e.useState(!1),[b,C]=e.useState(!1),m=e.useRef(null),v=e.useRef(null),M=e.useRef(null),h=e.useRef(0),E=ne.useLocalization(),L=u.useDocument(m);e.useEffect(()=>{w||a!=null&&a.length?(p(!0),k(!1)):p(!1)},[w,a]);const N=e.useMemo(()=>(c==null?void 0:c.filter(t=>{var n;return(n=t.title||t.field)==null?void 0:n.toLowerCase()}))||[],[c]),d=e.useCallback(()=>{var t;l.onCloseMenu&&l.onCloseMenu(),C(!1),m.current&&((t=m.current.element)==null||t.focus())},[l]),D=e.useCallback((t,n)=>{if(t.preventDefault(),!(n!=null&&n.field))return;const r=(a||[]).slice(),s=r.findIndex($=>$.field===n.field);s>-1?r.splice(s,1):r.push({field:n.field}),o.groupChange(r,t),k(!1),p(!0)},[o,a]),T=e.useCallback((t,n)=>{if(t.preventDefault(),!(n!=null&&n.field))return;const r=(a||[]).filter(s=>s.field!==n.field);o.groupChange(r,t),r.length===0&&(k(!0),p(!1),d())},[d,o,a]),S=e.useCallback((t,n)=>{if(n===0)return;const r=[...a||[]],s=r[n-1];r[n-1]=r[n],r[n]=s,o.groupChange(r,t)},[a,o]),y=e.useCallback((t,n)=>{if(n===a.length-1)return;const r=[...a||[]],s=r[n+1];r[n+1]=r[n],r[n]=s,o.groupChange(r,t)},[a,o]),K=e.useCallback((t,n)=>{const r=c==null?void 0:c.find(s=>s.field===t.field);return e.createElement(e.Fragment,null,a&&a.length!==1&&e.createElement("span",{className:"k-group-menu-item-actions"},e.createElement("span",{className:u.classNames("k-group-menu-item-action k-group-menu-item-up-action",{"k-disabled":n===0}),"aria-disabled":n===0,onClick:s=>S(s,n)},e.createElement(u.SvgIcon,{icon:g.chevronUpIcon})),e.createElement("span",{className:u.classNames("k-group-menu-item-action k-group-menu-item-down-action",{"k-disabled":n===a.length-1}),"aria-disabled":n===a.length-1,onClick:s=>y(s,n)},e.createElement(u.SvgIcon,{icon:g.chevronDownIcon}))),e.createElement("span",{className:"k-group-item-text"},(r==null?void 0:r.title)||t.field),e.createElement("span",{className:"k-spacer"}),e.createElement("span",{className:"k-group-menu-item-actions"},e.createElement("span",{className:"k-group-menu-item-action k-group-menu-item-remove-action",onClick:s=>T(s,t)},e.createElement(u.SvgIcon,{icon:g.xCircleIcon,size:o.mobileMode?"large":"medium"}))))},[c,o.mobileMode,a,T,y,S]),_=e.useCallback(t=>e.createElement(e.Fragment,null,e.createElement("span",{className:"k-group-item-text"},t.title||t.field),e.createElement("span",{className:"k-spacer"}),e.createElement("span",{className:"k-group-menu-item-actions"},e.createElement("span",{className:"k-group-menu-item-action k-group-menu-item-add-action",onClick:n=>D(n,t)},e.createElement(u.SvgIcon,{icon:g.plusCircleIcon,size:o.mobileMode?"large":"medium"})))),[o.mobileMode,D]),U=t=>{t.preventDefault(),C(!b)},G=e.useMemo(()=>{var t;return(t=l.show)!=null?t:b},[l.show,b]),V=t=>{const n=u.getActiveElement(document);clearTimeout(h.current),h.current=window.setTimeout(()=>{!o.mobileMode&&n&&t.relatedTarget!==m.current&&v.current&&!v.current.contains(n)&&d()})},H=()=>{clearTimeout(h.current)},{onFocus:J,onBlur:Q}=u.useAsyncFocusBlur({onFocus:t=>H(),onBlur:t=>V(t)}),W=t=>{var n;(n=M.current)==null||n.triggerMouseEvent(t)},X=t=>{var n;(n=M.current)==null||n.triggerKeyboardEvent(t)},Y=t=>{!t.isAnchorClicked&&C(!1)},B=e.useCallback(t=>{o.groupChange([],t),k(!0),p(!1),d()},[d,o]),R=e.createElement(e.Fragment,null,a&&a.length>0&&e.createElement("div",{className:"k-group-menu-item-wrap"},a==null?void 0:a.map((t,n)=>e.createElement("div",{className:"k-group-menu-item",key:t.field},K(t,n)))),e.createElement("div",{className:"k-group-menu-item-wrap"},N.filter(t=>!(a!=null&&a.some(n=>n.field===t.field))).map(t=>t.field==="value"?null:e.createElement("div",{className:"k-group-menu-item",key:t.id},_(t))))),Z=e.useMemo(()=>l.svgIcon?l.svgIcon:l.icon?void 0:g.groupIcon,[l.icon,l.svgIcon]),q=e.createElement(F.Button,{ref:m,togglable:!0,selected:G,svgIcon:Z,icon:l.icon,size:o.mobileMode?"large":"medium",className:u.classNames("k-toolbar-button",{"k-icon-button":o.mobileMode}),title:E.toLanguageString(i.toolbarGroup,i.messages[i.toolbarGroup]),onClick:U},!o.mobileMode&&E.toLanguageString(i.toolbarGroup,i.messages[i.toolbarGroup]));return f&&e.createElement(e.Fragment,null,j?e.createElement(P.BadgeContainer,null,q,e.createElement(P.Badge,{themeColor:"primary"})):q,o.mobileMode?e.createElement(ae.GridToolbarAdaptiveProvider,null,ee.createPortal(e.createElement(re.GridAdaptiveToolbarGroup,{filtered:N,computedShow:G,isDisabledButton:I,toolContent:R,onClose:d,onClear:B}),(A=L())==null?void 0:A.body)):e.createElement(oe.Popup,{anchor:(O=m.current)==null?void 0:O.element,show:G,popupClass:"k-grid-columnmenu-popup",onMouseDownOutside:Y},e.createElement("div",{ref:v,onBlur:Q,onFocus:J,onMouseDown:W,onKeyDown:X,className:"k-group-menu k-group-menu-md"},R,e.createElement("div",{className:"k-actions k-actions-stretched k-actions-horizontal k-column-menu-footer"},e.createElement(F.Button,{svgIcon:g.xIcon,onClick:B,disabled:I},E.toLanguageString(i.groupClearButton,i.messages[i.groupClearButton]))))))};z.displayName="KendoReactGridToolbarGroup";exports.GridToolbarGroup=z;