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