@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
45 lines (44 loc) • 2.02 kB
JavaScript
"use client";
import { createEventHandler } from "../../../core/utils/create-event-handler/create-event-handler.mjs";
import { getSingleElementChild } from "../../../core/utils/get-single-element-child/get-single-element-child.mjs";
import { useProps } from "../../../core/MantineProvider/use-props/use-props.mjs";
import { Popover } from "../../Popover/Popover.mjs";
import { useMenuContext } from "../Menu.context.mjs";
import { cloneElement } from "react";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Menu/MenuTarget/MenuTarget.tsx
const defaultProps = { refProp: "ref" };
function MenuTarget(props) {
const { children, refProp, ...others } = useProps("MenuTarget", defaultProps, props);
const child = getSingleElementChild(children);
if (!child) throw new Error("Menu.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
const ctx = useMenuContext();
const _childProps = child.props;
const onClick = createEventHandler(_childProps.onClick, () => {
if (ctx.trigger === "click") ctx.toggleDropdown();
else if (ctx.trigger === "click-hover") {
ctx.setOpenedViaClick(true);
if (!ctx.opened) ctx.openDropdown();
}
});
const onMouseEnter = createEventHandler(_childProps.onMouseEnter, () => (ctx.trigger === "hover" || ctx.trigger === "click-hover") && ctx.openDropdown());
const onMouseLeave = createEventHandler(_childProps.onMouseLeave, () => {
if (ctx.trigger === "hover") ctx.closeDropdown();
else if (ctx.trigger === "click-hover" && !ctx.openedViaClick) ctx.closeDropdown();
});
return /* @__PURE__ */ jsx(Popover.Target, {
refProp,
popupType: "menu",
...others,
children: cloneElement(child, {
onClick,
onMouseEnter,
onMouseLeave,
"data-expanded": ctx.opened ? true : void 0
})
});
}
MenuTarget.displayName = "@mantine/core/MenuTarget";
//#endregion
export { MenuTarget };
//# sourceMappingURL=MenuTarget.mjs.map