@primer/react-brand
Version:
Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.
50 lines (49 loc) • 2.01 kB
JavaScript
import e from "../../../node_modules/clsx/dist/clsx.js";
import { Text as t } from "../../../Text/Text.js";
import n from "../../VideoPlayer.module.js";
import { useEffect as r, useRef as i, useState as a } from "react";
import { jsx as o } from "react/jsx-runtime";
//#region src/VideoPlayer/components/VideoTooltip/VideoTooltip.tsx
var s = ({ children: s, className: c, ...l }) => {
let u = i(null), [d, f] = a(!1), p = i(null);
return r(() => {
let e = u.current, t = e?.parentElement;
if (!e || !t) return;
let n = () => {
p.current &&= (clearTimeout(p.current), null);
}, r = (e) => {
e.key === "Escape" && f(!1);
}, i = () => {
f(t === document.activeElement || t.contains(document.activeElement));
}, a = () => {
f(!1);
}, o = () => {
n(), f(!0);
}, s = () => {
n(), p.current = setTimeout(() => {
f(!1);
}, 100);
};
return t.addEventListener("focus", i), t.addEventListener("blur", i), t.addEventListener("focusin", i), t.addEventListener("focusout", i), t.addEventListener("click", a), t.addEventListener("mouseenter", o), t.addEventListener("mouseleave", s), window.addEventListener("keydown", r), () => {
n(), t.removeEventListener("focus", i), t.removeEventListener("blur", i), t.removeEventListener("focusin", i), t.removeEventListener("focusout", i), t.removeEventListener("click", a), t.removeEventListener("mouseenter", o), t.removeEventListener("mouseleave", s), window.removeEventListener("keydown", r);
};
}, [u]), /* @__PURE__ */ o("div", {
className: e(n.VideoPlayer__tooltip, d && n["VideoPlayer__tooltip-visible"], c),
ref: u,
...l,
children: d ? /* @__PURE__ */ o("span", {
className: n.VideoPlayer__tooltipContent,
children: /* @__PURE__ */ o(t, {
className: n.VideoPlayer__tooltipText,
weight: "medium",
children: s
})
}) : /* @__PURE__ */ o("span", {
className: "visually-hidden",
children: s
})
});
};
//#endregion
export { s as VideoTooltip };
//# sourceMappingURL=VideoTooltip.js.map