@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
143 lines (142 loc) • 5.81 kB
JavaScript
"use client";
const require_create_event_handler = require("../../../core/utils/create-event-handler/create-event-handler.cjs");
const require_use_props = require("../../../core/MantineProvider/use-props/use-props.cjs");
const require_DirectionProvider = require("../../../core/DirectionProvider/DirectionProvider.cjs");
const require_UnstyledButton = require("../../UnstyledButton/UnstyledButton.cjs");
const require_Popover = require("../../Popover/Popover.cjs");
const require_Menubar_context = require("../Menubar.context.cjs");
let react_jsx_runtime = require("react/jsx-runtime");
//#region packages/@mantine/core/src/components/Menubar/MenubarTarget/MenubarTarget.tsx
const defaultProps = { refProp: "ref" };
function isPrintableKey(event) {
return event.key.length === 1 && event.key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey;
}
function getTargetLabel(node) {
return (node.textContent ?? "").trim().toLowerCase();
}
function MenubarTarget(props) {
const { children, refProp, className, style, disabled, "data-disabled": dataDisabled, onClick, onMouseEnter, onMouseLeave, onFocus, onKeyDown, ...others } = require_use_props.useProps("MenubarTarget", defaultProps, props);
const ctx = require_Menubar_context.useMenubarContext();
const menuCtx = require_Menubar_context.useMenubarMenuContext();
const { dir } = require_DirectionProvider.useDirection();
const isDisabled = disabled || dataDisabled;
const isActive = ctx.activeIndex === menuCtx.index;
const isUnresolvedTabStop = menuCtx.index === -1 && !isDisabled;
const moveToAdjacent = (direction) => {
const nextIndex = ctx.getAdjacentIndex(menuCtx.index, direction);
ctx.setActiveIndex(nextIndex);
ctx.focusTarget(nextIndex);
if (ctx.openIndex !== null) ctx.openMenu(nextIndex, "click");
};
const openAndFocusItem = (itemPosition) => {
ctx.openMenu(menuCtx.index, "click");
ctx.setActiveIndex(menuCtx.index);
ctx.focusMenuItem(menuCtx.index, itemPosition);
};
const typeAhead = (event) => {
const targets = ctx.getTargets();
if (targets.length === 0) return;
const char = event.key.toLowerCase();
for (let offset = 1; offset <= targets.length; offset += 1) {
const index = (menuCtx.index + offset) % targets.length;
const node = targets[index];
if (node && !node.disabled && !node.hasAttribute("data-disabled") && getTargetLabel(node).startsWith(char)) {
event.preventDefault();
ctx.setActiveIndex(index);
node.focus();
if (ctx.openIndex !== null) ctx.openMenu(index, "click");
break;
}
}
};
const handleClick = require_create_event_handler.createEventHandler(onClick, () => {
if (isDisabled) return;
if (ctx.openIndex === menuCtx.index && ctx.getOpenSource() !== "hover") ctx.closeMenu();
else {
ctx.openMenu(menuCtx.index, "click");
ctx.setActiveIndex(menuCtx.index);
}
});
const handleMouseEnter = require_create_event_handler.createEventHandler(onMouseEnter, () => {
if (isDisabled) return;
ctx.cancelClose();
if (ctx.trigger === "hover") {
ctx.openMenu(menuCtx.index, "hover");
ctx.setActiveIndex(menuCtx.index);
} else if (ctx.openIndex !== null && ctx.openIndex !== menuCtx.index) {
ctx.openMenu(menuCtx.index, "hover");
ctx.setActiveIndex(menuCtx.index);
}
});
const handleMouseLeave = require_create_event_handler.createEventHandler(onMouseLeave, () => {
if (ctx.trigger === "hover") ctx.scheduleClose();
});
const handleFocus = require_create_event_handler.createEventHandler(onFocus, () => ctx.setActiveIndex(menuCtx.index));
const handleKeyDown = require_create_event_handler.createEventHandler(onKeyDown, (event) => {
if (isDisabled) return;
const forwardKey = dir === "rtl" ? "ArrowLeft" : "ArrowRight";
const backKey = dir === "rtl" ? "ArrowRight" : "ArrowLeft";
if (event.key === forwardKey) {
event.preventDefault();
moveToAdjacent(1);
} else if (event.key === backKey) {
event.preventDefault();
moveToAdjacent(-1);
} else if (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ") {
event.preventDefault();
openAndFocusItem("first");
} else if (event.key === "ArrowUp") {
event.preventDefault();
openAndFocusItem("last");
} else if (event.key === "Home") {
event.preventDefault();
const enabled = ctx.getEnabledIndexes();
if (enabled.length > 0) {
ctx.setActiveIndex(enabled[0]);
ctx.focusTarget(enabled[0]);
}
} else if (event.key === "End") {
event.preventDefault();
const enabled = ctx.getEnabledIndexes();
if (enabled.length > 0) {
const last = enabled[enabled.length - 1];
ctx.setActiveIndex(last);
ctx.focusTarget(last);
}
} else if (event.key === "Escape") {
if (menuCtx.opened) ctx.closeMenu();
} else if (event.key === "Tab") {
if (menuCtx.opened) ctx.closeMenu();
} else if (isPrintableKey(event)) typeAhead(event);
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover.Target, {
refProp,
popupType: "menu",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_UnstyledButton.UnstyledButton, {
...others,
unstyled: ctx.unstyled,
role: "menuitem",
tabIndex: isActive || isUnresolvedTabStop ? 0 : -1,
disabled,
"data-menubar-target": true,
"data-menubar-id": menuCtx.id,
"data-disabled": dataDisabled || void 0,
"data-expanded": menuCtx.opened || void 0,
"data-mantine-stop-propagation": menuCtx.opened || void 0,
...ctx.getStyles("target", {
className,
style
}),
onClick: handleClick,
onMouseEnter: handleMouseEnter,
onMouseLeave: handleMouseLeave,
onFocus: handleFocus,
onKeyDown: handleKeyDown,
children
})
});
}
MenubarTarget.displayName = "@mantine/core/MenubarTarget";
//#endregion
exports.MenubarTarget = MenubarTarget;
//# sourceMappingURL=MenubarTarget.cjs.map