@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
61 lines (60 loc) • 2.37 kB
JavaScript
"use client";
import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
import { useDirection } from "../../../core/DirectionProvider/DirectionProvider.mjs";
import { Menu } from "../../Menu/Menu.mjs";
import { useMenubarContext, useMenubarMenuContext } from "../Menubar.context.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Menubar/MenubarDropdown/MenubarDropdown.tsx
function MenubarDropdown(props) {
const { onKeyDown, onMouseEnter, onMouseLeave, ...others } = props;
const ctx = useMenubarContext();
const menuCtx = useMenubarMenuContext();
const { dir } = useDirection();
const handleMouseEnter = createEventHandler(onMouseEnter, () => ctx.cancelClose());
const handleMouseLeave = createEventHandler(onMouseLeave, () => {
if (ctx.trigger === "hover") ctx.scheduleClose();
});
const switchToAdjacent = (direction) => {
const nextIndex = ctx.getAdjacentIndex(menuCtx.index, direction);
if (nextIndex !== menuCtx.index) {
ctx.setActiveIndex(nextIndex);
ctx.openMenu(nextIndex, "click");
ctx.focusMenuItem(nextIndex, "first");
}
};
const handleKeyDown = createEventHandler(onKeyDown, (event) => {
const target = event.target;
if (event.key === "Tab") {
ctx.focusTarget(menuCtx.index);
ctx.closeMenu();
return;
}
if (target.closest("[data-menu-dropdown]") !== event.currentTarget) return;
const forwardKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
const backKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
if (event.key === forwardKey) {
if (target.closest("[data-menu-item]")?.hasAttribute("data-sub-menu-item")) return;
event.preventDefault();
switchToAdjacent(1);
} else if (event.key === backKey) {
event.preventDefault();
switchToAdjacent(-1);
} else if (event.key === "Escape") {
const index = menuCtx.index;
ctx.setActiveIndex(index);
window.setTimeout(() => ctx.focusTarget(index), 0);
}
});
return /* @__PURE__ */ jsx(Menu.Dropdown, {
...others,
"data-menubar-dropdown": ctx.id,
"data-mantine-stop-propagation": true,
onKeyDown: handleKeyDown,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave
});
}
MenubarDropdown.displayName = "@mantine/core/MenubarDropdown";
//#endregion
export { MenubarDropdown };
//# sourceMappingURL=MenubarDropdown.mjs.map