@primer/react-brand/esm/Tooltip/Tooltip.js

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

import e from "../node_modules/clsx/dist/clsx.js";
import { useId as t } from "../hooks/useId.js";
import { useProvidedRefOrCreate as n } from "../hooks/useRef.js";
import r from "./Tooltip.module.js";
import '../packages/design-tokens/lib/design-tokens/css/tokens/functional/components/tooltip/colors-with-modes-BrRCxJ2E.css';/* empty css                                                                                                     */
import i, { Children as a, useEffect as o, useRef as s, useState as c } from "react";
import { jsx as l, jsxs as u } from "react/jsx-runtime";
import { getAnchoredPosition as d } from "@primer/behaviors";
import { apply as f, isSupported as p } from "@oddbird/popover-polyfill/fn";
//#region src/Tooltip/Tooltip.tsx
var m = {
	n: {
		side: "outside-top",
		align: "center"
	},
	e: {
		side: "outside-right",
		align: "center"
	},
	s: {
		side: "outside-bottom",
		align: "center"
	},
	w: {
		side: "outside-left",
		align: "center"
	}
}, h = {
	"outside-top-center": "n",
	"outside-right-center": "e",
	"outside-bottom-center": "s",
	"outside-left-center": "w"
}, g = [
	"a[href]",
	"button:not(:disabled)",
	"summary",
	"select",
	"input:not([type=hidden])",
	"textarea"
], _ = (e) => g.some((t) => e.matches(t)) || e.hasAttribute("role") && e.getAttribute("role") === "button", v = i.createContext({}), y = i.forwardRef(({ direction: g = "s", text: y, type: b = "description", children: x, id: S, className: C, ...w }, T) => {
	let E = t(S), D = a.only(x) ?? null, O = n(T), k = s(null), A = s(null), [j, M] = c(g), N = i.useCallback(() => {
		A.current &&= (clearTimeout(A.current), null), k.current && O.current && !k.current.matches(":popover-open") && k.current.showPopover();
	}, [k, O]), P = i.useCallback(() => {
		A.current = setTimeout(() => {
			k.current && O.current && k.current.matches(":popover-open") && k.current.hidePopover();
		}, 200);
	}, [k, O]);
	return o(() => () => {
		A.current && clearTimeout(A.current);
	}, [A]), o(() => {
		if (!k.current || !O.current) return;
		let e = _(O.current), t = O.current.childNodes, n = Array.from(t).some((e) => e instanceof HTMLElement && _(e));
		if (!(e || n) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The `Tooltip` component expects a single React element that contains interactive content. Consider using a `<button>` or equivalent interactive element instead."), b === "label") {
			let e = O.current.hasAttribute("aria-label"), t = Array.from(O.current.childNodes).some((e) => e instanceof HTMLElement && e.hasAttribute("aria-label"));
			(e || t) && (process.env.NODE_ENV === "development" || process.env.NODE_ENV === "test") && console.warn("The label type `Tooltip` is going to be used here to label the trigger element. Please remove the aria-label from the trigger element.");
		}
		typeof window < "u" && (p() || f());
		let r = k.current, i = O.current;
		r.setAttribute("popover", "auto");
		let a = {
			side: m[g].side,
			align: m[g].align,
			anchorOffset: 8
		}, o = () => {
			let { top: e, left: t, anchorAlign: n, anchorSide: o } = d(r, i, a);
			r.style.top = `${e}px`, r.style.left = `${t}px`;
			let s = h[`${o}-${n}`];
			M(s);
		};
		return r.addEventListener("toggle", o), () => {
			r.removeEventListener("toggle", o);
		};
	}, [
		k,
		O,
		g,
		b
	]), /* @__PURE__ */ u(v.Provider, {
		value: { tooltipId: E },
		children: [D && i.cloneElement(D, {
			ref: O,
			"aria-describedby": b === "description" ? E : D.props["aria-describedby"],
			"aria-labelledby": b === "label" ? E : D.props["aria-labelledby"],
			onBlur: (e) => {
				P(), D.props.onBlur?.(e);
			},
			onFocus: (e) => {
				N(), D.props.onFocus?.(e);
			},
			onMouseEnter: (e) => {
				N(), D.props.onMouseEnter?.(e);
			},
			onMouseLeave: (e) => {
				P(), D.props.onMouseLeave?.(e);
			}
		}), /* @__PURE__ */ l("div", {
			className: e(r.Tooltip, C),
			ref: k,
			"data-direction": j,
			...w,
			role: b === "description" ? "tooltip" : void 0,
			"aria-hidden": b === "label" ? !0 : void 0,
			id: E,
			onMouseEnter: N,
			onMouseLeave: P,
			children: y
		})]
	});
});
//#endregion
export { y as Tooltip, v as TooltipContext };

//# sourceMappingURL=Tooltip.js.map