@mantine/core/esm/components/Tooltip/Tooltip.mjs

React components library focused on usability, accessibility and developer experience

"use client";
import { getDefaultZIndex } from "../../core/utils/get-default-z-index/get-default-z-index.mjs";
import { getRadius } from "../../core/utils/get-size/get-size.mjs";
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 { createVarsResolver } from "../../core/styles-api/create-vars-resolver/create-vars-resolver.mjs";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { useStyles } from "../../core/styles-api/use-styles/use-styles.mjs";
import { factory } from "../../core/factory/factory.mjs";
import { Box } from "../../core/Box/Box.mjs";
import { useDirection } from "../../core/DirectionProvider/DirectionProvider.mjs";
import { FloatingArrow } from "../../utils/Floating/FloatingArrow/FloatingArrow.mjs";
import { getFloatingPosition } from "../../utils/Floating/get-floating-position/get-floating-position.mjs";
import { OptionalPortal } from "../Portal/OptionalPortal.mjs";
import { Transition } from "../Transition/Transition.mjs";
import { getTransitionProps } from "../Transition/get-transition-props/get-transition-props.mjs";
import Tooltip_module_default from "./Tooltip.module.mjs";
import { TooltipFloating } from "./TooltipFloating/TooltipFloating.mjs";
import { TooltipGroup } from "./TooltipGroup/TooltipGroup.mjs";
import { useTooltip } from "./use-tooltip.mjs";
import { cloneElement, useEffect, useRef } from "react";
import { useMergedRef } from "@mantine/hooks";
import cx from "clsx";
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Tooltip/Tooltip.tsx
const defaultProps = {
	position: "top",
	refProp: "ref",
	withinPortal: true,
	arrowSize: 4,
	arrowOffset: 5,
	arrowRadius: 0,
	arrowPosition: "side",
	offset: 5,
	transitionProps: {
		duration: 100,
		transition: "fade"
	},
	events: {
		hover: true,
		focus: false,
		touch: false
	},
	zIndex: getDefaultZIndex("popover"),
	middlewares: {
		flip: true,
		shift: true,
		inline: false
	}
};
const varsResolver = createVarsResolver((theme, { radius, color, variant, autoContrast }) => {
	const colors = theme.variantColorResolver({
		theme,
		color: color || theme.primaryColor,
		autoContrast,
		variant: variant || "filled"
	});
	return { tooltip: {
		"--tooltip-radius": radius === void 0 ? void 0 : getRadius(radius),
		"--tooltip-bg": color ? colors.background : void 0,
		"--tooltip-color": color ? colors.color : void 0
	} };
});
const Tooltip = factory((_props) => {
	const props = useProps("Tooltip", defaultProps, _props);
	const { children, position, refProp, label, openDelay, closeDelay, onPositionChange, opened, defaultOpened, withinPortal, radius, color, classNames, styles, unstyled, style, className, withArrow, arrowSize, arrowOffset, arrowRadius, arrowPosition, offset, transitionProps, multiline, events, zIndex, disabled, onClick, onMouseEnter, onMouseLeave, inline, variant, keepMounted, vars, portalProps, mod, floatingStrategy, middlewares, autoContrast, attributes, target, ref, ...others } = props;
	const { dir } = useDirection();
	const arrowRef = useRef(null);
	const tooltip = useTooltip({
		position: getFloatingPosition(dir, position),
		closeDelay,
		openDelay,
		onPositionChange,
		opened,
		defaultOpened,
		events,
		arrowRef,
		arrowOffset,
		offset: typeof offset === "number" ? offset + (withArrow ? arrowSize / 2 : 0) : offset,
		inline,
		strategy: floatingStrategy,
		middlewares
	});
	useEffect(() => {
		const targetNode = target instanceof HTMLElement ? target : typeof target === "string" ? document.querySelector(target) : target?.current || null;
		if (targetNode) tooltip.reference(targetNode);
	}, [target, tooltip]);
	const getStyles = useStyles({
		name: "Tooltip",
		props,
		classes: Tooltip_module_default,
		className,
		style,
		classNames,
		styles,
		unstyled,
		attributes,
		rootSelector: "tooltip",
		vars,
		varsResolver
	});
	const child = getSingleElementChild(children);
	if (!target && !child) throw new Error("[@mantine/core] Tooltip component children should be an element or a component that accepts ref, fragments, strings, numbers and other primitive values are not supported");
	const tooltipStyles = getStyles("tooltip");
	if (target) {
		const transition = getTransitionProps(transitionProps, {
			duration: 100,
			transition: "fade"
		});
		return /* @__PURE__ */ jsx(Fragment$1, { children: /* @__PURE__ */ jsx(OptionalPortal, {
			...portalProps,
			withinPortal,
			children: /* @__PURE__ */ jsx(Transition, {
				...transition,
				keepMounted,
				mounted: !disabled && !!tooltip.opened,
				duration: tooltip.isGroupPhase ? 10 : transition.duration,
				children: (transitionStyles) => /* @__PURE__ */ jsxs(Box, {
					...others,
					"data-fixed": floatingStrategy === "fixed" || void 0,
					variant,
					mod: [{ multiline }, mod],
					...tooltipStyles,
					...tooltip.getFloatingProps({
						ref: tooltip.floating,
						className: tooltipStyles.className,
						style: {
							...tooltipStyles.style,
							...transitionStyles,
							zIndex,
							top: tooltip.y ?? 0,
							left: tooltip.x ?? 0
						}
					}),
					children: [label, /* @__PURE__ */ jsx(FloatingArrow, {
						ref: arrowRef,
						arrowX: tooltip.arrowX,
						arrowY: tooltip.arrowY,
						visible: withArrow,
						position: tooltip.placement,
						arrowSize,
						arrowOffset,
						arrowRadius,
						arrowPosition,
						...getStyles("arrow")
					})]
				})
			})
		}) });
	}
	const childProps = child.props;
	const targetRef = useMergedRef(tooltip.reference, getRefProp(child), ref);
	const transition = getTransitionProps(transitionProps, {
		duration: 100,
		transition: "fade"
	});
	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(OptionalPortal, {
		...portalProps,
		withinPortal,
		children: /* @__PURE__ */ jsx(Transition, {
			...transition,
			keepMounted,
			mounted: !disabled && !!tooltip.opened,
			duration: tooltip.isGroupPhase ? 10 : transition.duration,
			children: (transitionStyles) => /* @__PURE__ */ jsxs(Box, {
				...others,
				"data-fixed": floatingStrategy === "fixed" || void 0,
				variant,
				mod: [{ multiline }, mod],
				...tooltip.getFloatingProps({
					ref: tooltip.floating,
					className: getStyles("tooltip").className,
					style: {
						...getStyles("tooltip").style,
						...transitionStyles,
						zIndex,
						top: tooltip.y ?? 0,
						left: tooltip.x ?? 0
					}
				}),
				children: [label, /* @__PURE__ */ jsx(FloatingArrow, {
					ref: arrowRef,
					arrowX: tooltip.arrowX,
					arrowY: tooltip.arrowY,
					visible: withArrow,
					position: tooltip.placement,
					arrowSize,
					arrowOffset,
					arrowRadius,
					arrowPosition,
					...getStyles("arrow")
				})]
			})
		})
	}), cloneElement(child, tooltip.getReferenceProps({
		onClick,
		onMouseEnter,
		onMouseLeave,
		onMouseMove: props.onMouseMove,
		onPointerDown: props.onPointerDown,
		onPointerEnter: props.onPointerEnter,
		...childProps,
		className: cx(className, childProps.className),
		[refProp]: targetRef
	}))] });
});
Tooltip.classes = Tooltip_module_default;
Tooltip.varsResolver = varsResolver;
Tooltip.displayName = "@mantine/core/Tooltip";
Tooltip.Floating = TooltipFloating;
Tooltip.Group = TooltipGroup;
//#endregion
export { Tooltip };

//# sourceMappingURL=Tooltip.mjs.map