@progress/kendo-react-grid/columnMenu/GridColumnMenuWrapper.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 client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),_=require("@progress/kendo-react-popup"),s=require("@progress/kendo-react-common"),j=require("@progress/kendo-svg-icons"),h=require("../messages/index.js"),z=require("@progress/kendo-react-intl"),F=require("../utils/GridContext.js"),$=require("./adaptiveContext/GridColumnMenuAdaptiveContext.js"),L=require("./adaptiveContent/GridAdaptiveColumnMenu.js"),V=require("react-dom");function H(t){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const c in t)if(c!=="default"){const a=Object.getOwnPropertyDescriptor(t,c);Object.defineProperty(u,c,a.get?a:{enumerable:!0,get:()=>t[c]})}}return u.default=t,Object.freeze(u)}const n=H(W),J=[".k-columnmenu-item-content",".k-filter-menu-container"].map(t=>s.TABBABLE_ELEMENTS.map(u=>`${t} ${u}`)),Q=[[".k-tabstrip-items"],[".k-columnmenu-item"],...J],U=t=>{var p;const u=n.useContext(F.GridContext),[c,a]=n.useState(!1),i=n.useRef(null),m=n.useRef(null),l=n.useRef(null),M=n.useRef(0),D=s.useDocument(i),{columnMenu:d,...b}=t,{column:C,columnMenuIcon:E,navigatable:k}=t,y=z.useLocalization(),w=C.title||C.field,S=w?`${w} `:"",T="#",q=e=>{const o=s.getActiveElement(document);clearTimeout(M.current),M.current=window.setTimeout(()=>{!u.mobileMode&&o&&e.relatedTarget!==i.current&&m.current&&!m.current.contains(o)&&f()})},R=()=>{clearTimeout(M.current)},x=e=>{e.preventDefault(),c&&t.onCloseMenu&&t.onCloseMenu(),a(!c)},f=()=>{t.onCloseMenu&&t.onCloseMenu(),a(!1),!t.navigatable&&i.current&&i.current.focus()},A=e=>{var o;if(e.keyCode===s.Keys.tab){const r=e.target,v=r&&((o=r.closest(".k-grid"))==null?void 0:o.getElementsByClassName("k-grid-content")[0]);v&&v.scrollWidth>v.clientWidth&&r.scrollIntoView({inline:"center"})}},g=n.useMemo(()=>t.show!==void 0?t.show:c,[t.show,c]),I=e=>{var o;(o=l.current)==null||o.triggerKeyboardEvent(e)},O=e=>{var o;(o=l.current)==null||o.triggerMouseEvent(e)},P=(e,o,r)=>{r.preventDefault(),r.shiftKey?o.focusPrevious(e):o.focusNext(e)},G=(e,o,r)=>{e&&(r.preventDefault(),e.click())},K=(e,o,r)=>{r.preventDefault(),f()},N=(e,o,r)=>{o.focusElement(e)},B=e=>{!e.isAnchorClicked&&a(!1)};return n.useEffect(()=>(g&&m.current&&(l.current=new s.Navigation({tabIndex:0,root:m,selectors:Q,keyboardEvents:{keydown:{Tab:P,Enter:G,Escape:K}},mouseEvents:{mousedown:N}}),l.current.focusElement(l.current.first,null)),()=>{l.current&&(l.current=null)}),[g]),n.createElement(n.Fragment,null,n.createElement("a",{className:"k-grid-header-menu k-grid-column-menu",ref:i,onClick:x,onKeyDown:A,href:T,tabIndex:k?-1:void 0,"aria-label":`${k?"":S}${y.toLanguageString(h.columnMenu,h.messages[h.columnMenu])}`},E?n.createElement(s.IconWrap,{name:E.name,icon:E}):n.createElement(s.IconWrap,{name:"more-vertical",icon:j.moreVerticalIcon})),n.createElement($.GridColumnMenuAdaptiveProvider,null,u.mobileMode?n.createElement(n.Fragment,null,V.createPortal(n.createElement(L.GridAdaptiveColumnMenu,{computedShow:g,ColumnMenu:d,closeMenu:f},d&&n.createElement(d,{...b,onCloseMenu:f})),(p=D())==null?void 0:p.body)):n.createElement(_.Popup,{anchor:i.current,show:g,popupClass:"k-grid-columnmenu-popup",onMouseDownOutside:B},n.createElement("div",{ref:m,onBlur:q,onFocus:R,onMouseDown:O,onKeyDown:I,className:"k-column-menu k-column-menu-md"},d&&n.createElement(d,{...b,onCloseMenu:f})))))};exports.GridColumnMenuWrapper=U;