@progress/kendo-react-grid
Version:
React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package
106 lines (105 loc) • 3.95 kB
JavaScript
/**
* @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";
import * as o from "react";
import { Popup as z } from "@progress/kendo-react-popup";
import { TABBABLE_ELEMENTS as F, Navigation as L, IconWrap as v, getActiveElement as W, Keys as P } from "@progress/kendo-react-common";
import { moreVerticalIcon as V } from "@progress/kendo-svg-icons";
import { columnMenu as k, messages as _ } from "../messages/index.mjs";
import { useLocalization as H } from "@progress/kendo-react-intl";
const O = [".k-columnmenu-item-content", ".k-filter-menu-container"].map((t) => F.map((u) => `${t} ${u}`)), G = [[".k-tabstrip-items"], [".k-columnmenu-item"], ...O], Y = (t) => {
const [u, a] = o.useState(!1), l = o.useRef(null), s = o.useRef(null), r = o.useRef(null), i = o.useRef(0), { columnMenu: E, ...p } = t, { column: g, columnMenuIcon: m, navigatable: w } = t, b = H(), M = g.title || g.field, C = M ? `${M} ` : "", D = "#", y = (e) => {
const n = W(document);
clearTimeout(i.current), i.current = window.setTimeout(() => {
n && e.relatedTarget !== l.current && s.current && !s.current.contains(n) && f();
});
}, T = () => {
clearTimeout(i.current);
}, S = (e) => {
e.preventDefault(), u && t.onCloseMenu && t.onCloseMenu(), a(!u);
}, f = () => {
t.onCloseMenu && t.onCloseMenu(), a(!1), !t.navigatable && l.current && l.current.focus();
}, K = (e) => {
var n;
if (e.keyCode === P.tab) {
const c = e.target, h = c && ((n = c.closest(".k-grid")) == null ? void 0 : n.getElementsByClassName("k-grid-content")[0]);
h && h.scrollWidth > h.clientWidth && c.scrollIntoView({ inline: "center" });
}
}, d = o.useMemo(() => t.show !== void 0 ? t.show : u, [t.show, u]), B = (e) => {
var n;
(n = r.current) == null || n.triggerKeyboardEvent(e);
}, I = (e) => {
var n;
(n = r.current) == null || n.triggerMouseEvent(e);
}, A = (e, n, c) => {
c.preventDefault(), c.shiftKey ? n.focusPrevious(e) : n.focusNext(e);
}, N = (e, n, c) => {
e && e.click();
}, R = (e, n, c) => {
c.preventDefault(), f();
}, $ = (e, n, c) => {
c.preventDefault(), n.focusElement(e);
}, x = (e) => {
!e.isAnchorClicked && a(!1);
};
return o.useEffect(() => (d && s.current && (r.current = new L({
tabIndex: 0,
root: s,
selectors: G,
keyboardEvents: {
keydown: {
Tab: A,
Enter: N,
Escape: R
}
},
mouseEvents: {
mousedown: $
}
}), r.current.focusElement(r.current.first, null)), () => {
r.current && (r.current = null);
}), [d]), /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement(
"a",
{
className: "k-grid-header-menu k-grid-column-menu",
ref: l,
onClick: S,
onKeyDown: K,
href: D,
tabIndex: w ? -1 : void 0,
"aria-label": `${w ? "" : C}${b.toLanguageString(
k,
_[k]
)}`
},
m ? /* @__PURE__ */ o.createElement(v, { name: m.name, icon: m }) : /* @__PURE__ */ o.createElement(v, { name: "more-vertical", icon: V })
), /* @__PURE__ */ o.createElement(
z,
{
anchor: l.current,
show: d,
popupClass: "k-column-menu k-column-menu-popup k-grid-columnmenu-popup",
onMouseDownOutside: x
},
/* @__PURE__ */ o.createElement(
"div",
{
ref: s,
onBlur: y,
onFocus: T,
onMouseDown: I,
onKeyDown: B,
style: { outline: "none" }
},
E && /* @__PURE__ */ o.createElement(E, { ...p, onCloseMenu: f })
)
));
};
export {
Y as GridColumnMenuWrapper
};