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