@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
45 lines (44 loc) • 1.91 kB
JavaScript
"use client";
import { getRefProp } from "../../../core/utils/get-ref-prop/get-ref-prop.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 { factory } from "../../../core/factory/factory.mjs";
import { usePopoverContext } from "../Popover.context.mjs";
import { cloneElement } from "react";
import { useMergedRef } from "@mantine/hooks";
import cx from "clsx";
//#region packages/@mantine/core/src/components/Popover/PopoverTarget/PopoverTarget.tsx
const defaultProps = {
refProp: "ref",
popupType: "dialog"
};
const PopoverTarget = factory((props) => {
const { children, refProp, popupType, ref, ...others } = useProps("PopoverTarget", defaultProps, props);
const child = getSingleElementChild(children);
if (!child) throw new Error("Popover.Target component children should be an element or a component that accepts ref. Fragments, strings, numbers and other primitive values are not supported");
const forwardedProps = others;
const ctx = usePopoverContext();
const targetRef = useMergedRef(ctx.reference, getRefProp(child), ref);
const accessibleProps = ctx.withRoles ? {
"aria-haspopup": popupType,
"aria-expanded": ctx.opened,
"aria-controls": ctx.opened ? ctx.getDropdownId() : void 0,
id: ctx.getTargetId()
} : {};
const childProps = child.props;
return cloneElement(child, {
...forwardedProps,
...accessibleProps,
...ctx.targetProps,
className: cx(ctx.targetProps.className, forwardedProps.className, childProps.className),
[refProp]: targetRef,
...!ctx.controlled ? { onClick: (event) => {
ctx.onToggle();
childProps.onClick?.(event);
} } : null
});
});
PopoverTarget.displayName = "@mantine/core/PopoverTarget";
//#endregion
export { PopoverTarget };
//# sourceMappingURL=PopoverTarget.mjs.map