@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
61 lines (60 loc) • 2.61 kB
JavaScript
"use client";
const require_create_event_handler = require("../../../core/utils/create-event-handler/create-event-handler.cjs");
const require_DirectionProvider = require("../../../core/DirectionProvider/DirectionProvider.cjs");
const require_Menu = require("../../Menu/Menu.cjs");
const require_Menubar_context = require("../Menubar.context.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Menubar/MenubarDropdown/MenubarDropdown.tsx
function MenubarDropdown(props) {
const { onKeyDown, onMouseEnter, onMouseLeave, ...others } = props;
const ctx = require_Menubar_context.useMenubarContext();
const menuCtx = require_Menubar_context.useMenubarMenuContext();
const { dir } = require_DirectionProvider.useDirection();
const handleMouseEnter = require_create_event_handler.createEventHandler(onMouseEnter, () => ctx.cancelClose());
const handleMouseLeave = require_create_event_handler.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 = require_create_event_handler.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__ */ (0, react_jsx_runtime.jsx)(require_Menu.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
exports.MenubarDropdown = MenubarDropdown;
//# sourceMappingURL=MenubarDropdown.cjs.map