@progress/kendo-react-layout
Version:
React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package
200 lines (199 loc) • 7.29 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2026 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as i from "react";
import { getActiveElement as F, classNames as v, IconWrap as B } from "@progress/kendo-react-common";
import { Popup as y } from "@progress/kendo-react-popup";
import { shouldOpenItem as x, isFirstItemFromSiblings as S } from "../utils/itemsIdsUtils.mjs";
import { getDOMElementId as M, convertBoolDirectionToString as R, getPopupSettings as G } from "../utils/misc.mjs";
import { MenuItemLink as V } from "./MenuItemLink.mjs";
import { MenuItemArrow as w } from "./MenuItemArrow.mjs";
const A = (e) => {
const { parentItemId: a } = e, c = a !== void 0 ? (o) => {
e.onMouseOver(a), o.stopPropagation();
} : void 0, I = a !== void 0 ? (o) => {
e.onMouseLeave(a), o.stopPropagation();
} : void 0;
let t;
return e.role ? t = e.role : a !== void 0 ? t = "menu" : t = "menubar", /* @__PURE__ */ i.createElement(
"ul",
{
className: e.className,
role: t,
id: a !== void 0 ? M(e.menuGuid, a) : void 0,
onMouseOver: c,
onMouseLeave: I,
"aria-orientation": e["aria-orientation"]
},
e.items.length > 0 ? e.items.map((o, l) => /* @__PURE__ */ i.createElement(
W,
{
item: o,
animate: e.animate,
isMenuVertical: e.isMenuVertical,
isDirectionRightToLeft: e.isDirectionRightToLeft,
focusedItemId: e.focusedItemId,
lastItemIdToBeOpened: e.lastItemIdToBeOpened,
tabbableItemId: e.tabbableItemId,
itemRender: e.itemRender,
linkRender: e.linkRender,
menuGuid: e.menuGuid,
onMouseOver: e.onMouseOver,
onMouseLeave: e.onMouseLeave,
onBlur: e.onBlur,
onFocus: e.onFocus,
onClick: e.onClick,
onOriginalItemNeeded: e.onOriginalItemNeeded,
onPopupClose: e.onPopupClose,
key: l
}
)) : null
);
}, W = (e) => {
const a = i.useRef(null), c = i.useRef(!0), I = i.useRef(void 0), t = e.item, o = t.id, l = M(e.menuGuid, o), b = t.separator, O = t.render || e.itemRender, k = t.linkRender || e.linkRender, g = t.contentParentItemId ? t.contentRender : null, d = t.items.length > 0 && x(o, e.lastItemIdToBeOpened) && !c.current;
i.useEffect(() => {
var f, s, m;
const n = e.focusedItemId, r = e.item.id, u = I.current;
if (c.current)
n && n === r && ((f = a.current) == null || f.focus({ preventScroll: !0 })), c.current = !1;
else if (n) {
const T = F(document);
u !== n && n === r && // https://github.com/telerik/kendo-react/issues/216 :
// No need to focus the wrapping menu item DOM element
// when a child DOM element was clicked.
!((s = a.current) != null && s.contains(T)) && ((m = a.current) == null || m.focus({ preventScroll: !0 }));
}
I.current = n;
});
const E = (n) => {
e.onMouseOver(o), n.stopPropagation();
}, L = (n) => {
e.onMouseLeave(o), n.stopPropagation();
}, h = (n) => {
e.onPopupClose(o, n);
}, C = () => {
const n = t.contentParentItemId, r = g;
return /* @__PURE__ */ i.createElement("div", { className: "k-content", role: "presentation" }, /* @__PURE__ */ i.createElement(r, { item: e.onOriginalItemNeeded(n), itemId: n }));
}, D = () => {
if (k) {
const u = k;
return /* @__PURE__ */ i.createElement(
u,
{
item: e.onOriginalItemNeeded(t.id),
itemId: t.id,
opened: d,
dir: R(e.isDirectionRightToLeft)
}
);
}
const n = O, r = n ? /* @__PURE__ */ i.createElement(n, { item: e.onOriginalItemNeeded(t.id), itemId: t.id, key: "1" }) : /* @__PURE__ */ i.createElement("span", { className: "k-menu-link-text" }, t.text);
return /* @__PURE__ */ i.createElement(V, { url: t.url, opened: d }, t.icon || t.svgIcon ? /* @__PURE__ */ i.createElement(B, { name: t.icon, icon: t.svgIcon, key: "0" }) : null, r, t.items.length > 0 ? /* @__PURE__ */ i.createElement("span", { className: "k-menu-expand-arrow", "aria-hidden": !0 }, /* @__PURE__ */ i.createElement(
w,
{
itemId: t.id,
verticalMenu: e.isMenuVertical,
dir: R(e.isDirectionRightToLeft),
key: "2"
}
)) : null);
}, N = () => {
const n = e.animate, { anchorAlign: r, popupAlign: u, collision: f, animationDirection: s } = G(
o,
e.isMenuVertical,
e.isDirectionRightToLeft
);
let m;
return n === !0 ? m = { openDuration: 300, closeDuration: 300, direction: s } : n === !1 ? m = !1 : m = {
openDuration: (n == null ? void 0 : n.openDuration) || 300,
closeDuration: (n == null ? void 0 : n.closeDuration) || 300,
direction: (n == null ? void 0 : n.direction) || s
}, /* @__PURE__ */ i.createElement(
y,
{
anchor: a.current,
show: d,
popupClass: v("k-menu-popup", { "k-rtl": e.isDirectionRightToLeft }),
anchorAlign: r,
popupAlign: u,
collision: f,
animate: m,
onClose: h,
key: "1"
},
/* @__PURE__ */ i.createElement(
A,
{
parentItemId: o,
animate: e.animate,
items: t.items,
menuGuid: e.menuGuid,
focusedItemId: e.focusedItemId,
lastItemIdToBeOpened: e.lastItemIdToBeOpened,
tabbableItemId: e.tabbableItemId,
itemRender: e.itemRender,
linkRender: e.linkRender,
isMenuVertical: e.isMenuVertical,
isDirectionRightToLeft: e.isDirectionRightToLeft,
className: "k-group k-menu-group k-reset k-menu-group-md",
onMouseOver: e.onMouseOver,
onMouseLeave: e.onMouseLeave,
onBlur: e.onBlur,
onFocus: e.onFocus,
onClick: e.onClick,
onOriginalItemNeeded: e.onOriginalItemNeeded,
onPopupClose: e.onPopupClose
}
)
);
}, P = v(
"k-item",
"k-menu-item",
{
"k-first": S(o),
"k-last": t.isLastFromSiblings,
"k-disabled": t.disabled
},
t.cssClass
);
return /* @__PURE__ */ i.createElement(i.Fragment, null, b ? /* @__PURE__ */ i.createElement(
"li",
{
className: "k-separator k-item",
"aria-hidden": !0,
key: l,
id: l,
ref: a
}
) : /* @__PURE__ */ i.createElement(
"li",
{
id: l,
className: P,
style: t.cssStyle,
tabIndex: o === e.tabbableItemId ? 0 : -1,
onMouseOver: E,
onMouseLeave: L,
onBlur: (n) => e.onBlur(o, n),
onFocus: () => e.onFocus(o),
onClick: (n) => e.onClick(n, o),
role: "menuitem",
"aria-disabled": t.disabled ? !0 : void 0,
"aria-haspopup": t.items.length > 0 ? !0 : void 0,
"aria-expanded": t.items.length > 0 ? d : void 0,
"aria-label": t.text,
"aria-owns": d ? l : void 0,
ref: a,
key: l
},
g ? C() : D()
), N());
};
export {
W as MenuItemInternal,
A as MenuItemInternalsList
};