@frontify/fondue
Version:
Design system of Frontify
254 lines (253 loc) • 8.93 kB
JavaScript
import { jsxs as c, Fragment as ue, jsx as e } from "react/jsx-runtime";
import { useLink as be } from "@react-aria/link";
import { useState as h, useRef as P, useMemo as ge, useCallback as y, useEffect as D, useLayoutEffect as he, cloneElement as V } from "react";
import { usePopper as ye } from "react-popper";
import { Button as W } from "../Button/Button.es.js";
import { ButtonSize as Y, ButtonEmphasis as q, ButtonStyle as G } from "../Button/ButtonTypes.es.js";
import { Portal as Se } from "../Portal/Portal.es.js";
import { useMemoizedId as ve } from "../../hooks/useMemoizedId.es.js";
import { FOCUS_VISIBLE_STYLE as xe } from "../../utilities/focusStyle.es.js";
import { merge as p } from "../../utilities/merge.es.js";
import { BrightHeader as Ee, brightHeaderArrowBackgroundColors as T } from "./BrightHeader.es.js";
const J = {
small: "tw-pt-2",
large: "tw-pt-3"
}, K = {
small: "tw-pb-2",
large: "tw-pb-3"
}, Ce = {
"top-Start": "top-start",
"bottom-Start": "bottom-start",
"left-Start": "left-start",
"right-Start": "right-start",
"top-Middle": "top",
"right-Middle": "right",
"bottom-Middle": "bottom",
"left-Middle": "left"
}, Le = (r, t, i) => {
switch (!0) {
case r.toString().includes("top".toLowerCase()):
return "before:tw-border-t-0 before:tw-border-l-0 tw-bottom-[-6px] before:tw-bg-primary";
case r.toString().includes("right".toLowerCase()):
return p([
"before:tw-border-t-0 before:tw-border-r-0 tw-left-[-5px]",
t && // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
i === "Start" && r.toString().includes("Start".toLowerCase()) ? T[t] : "before:tw-bg-primary"
]);
case r.toString().includes("bottom".toLowerCase()):
return p([
"before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px]",
t ? T[t] : "before:tw-bg-primary"
]);
case r.toString().includes("left".toLowerCase()):
return p([
"before:tw-border-b-0 before:tw-border-l-0 tw-right-[-5px]",
t && // eslint-disable-next-line @typescript-eslint/no-unsafe-enum-comparison
i === "Start" && r.toString().includes("Start".toLowerCase()) ? T[t] : "before:tw-bg-primary"
]);
default:
return "before:tw-border-b-0 before:tw-border-r-0 tw-top-[-6px] before:tw-primary";
}
}, Te = ({
enablePortal: r = !1,
children: t
}) => r ? /* @__PURE__ */ e(Se, { children: t }) : t, ke = ({
content: r,
tooltipIcon: t,
heading: i,
headingIcon: S,
linkUrl: m,
linkLabel: Q,
brightHeader: E,
buttons: o,
children: X,
position: k = "bottom",
alignment: N = "Middle",
withStrongBorder: z = !1,
withArrow: u,
flip: Z = !0,
triggerElement: A,
hoverDelay: M = 200,
enterDelay: C = 0,
open: O = !1,
disabled: H = !1,
enablePortal: U = !1,
hidden: ee = !1,
"data-test-id": R = "tooltip"
}) => {
var j;
const [L, te] = h(
null
), [s, a] = h(!1), B = P(null), d = ee || H, { linkProps: re } = be({ isDisabled: d }, B), oe = ge(
() => m || o || i || S,
[m, o, i, S]
), se = Ce[`${k}-${N}`], [b, le] = h(null), [v, ne] = h(null), [ie, ae] = h(null), F = ve(), f = ye(L, b, {
placement: se,
strategy: "fixed",
modifiers: [
{
name: "arrow",
options: {
element: ie
}
},
{
name: "eventListeners",
options: { scroll: s, resize: s }
},
{
name: "offset",
options: {
offset: [0, u ? 10 : 5]
}
},
{
name: "flip",
enabled: Z
}
]
}), de = ((j = f.state) == null ? void 0 : j.placement) ?? k, pe = Le(de, E, N), n = P(null), fe = y(() => {
n.current && clearTimeout(n.current), n.current = setTimeout(() => a(!1), M);
}, [M]), _ = y(() => {
if (n.current && clearTimeout(n.current), C) {
n.current = setTimeout(() => a(!0), C);
return;
}
a(!0);
}, [C]), we = y(
(l) => {
var w;
const g = (w = l.composedPath) == null ? void 0 : w.call(l);
g && [L, v, b].some((I) => I && g.includes(I)) && _();
},
[_, b, v, L]
), ce = y(
(l) => {
const { relatedTarget: g } = l;
(!g || ![b, v].some((w) => w == null ? void 0 : w.contains(g))) && a(!1);
},
[b, v]
), $ = d ? {} : {
onMouseOver: (l) => we(l.nativeEvent),
onMouseLeave: fe,
onFocus: () => a(!0),
onBlur: ce
};
D(() => {
n.current && clearTimeout(n.current), a(d ? !1 : O);
}, [O, d]);
const x = y(
(l) => {
s && l.key === "Escape" && a(!1);
},
[s]
);
return he(() => {
typeof f.update == "function" && s && f.update();
}, [s]), D(() => (s ? window.addEventListener("keydown", x) : window.removeEventListener("keydown", x), () => {
window.removeEventListener("keydown", x);
}), [x, s]), /* @__PURE__ */ c(ue, { children: [
/* @__PURE__ */ e("div", { ...$, ref: ne, children: /* @__PURE__ */ e("div", { ref: te, "aria-describedby": F, role: "tooltip", children: A }) }),
/* @__PURE__ */ e(Te, { enablePortal: U, children: /* @__PURE__ */ c(
"div",
{
ref: le,
"aria-hidden": d,
className: p([
"tw-popper-container tw-inline-block tw-max-w-[200px] tw-bg-primary tw-rounded-md tw-shadow-mid tw-text-primary-on-primary tw-z-[120000]",
!s && "tw-opacity-0 tw-h-0 tw-w-0 tw-overflow-hidden",
z && "tw-border tw-border-line-mid"
]),
"data-test-id": R,
role: "tooltip",
id: F,
style: f.styles.popper,
...f.attributes.popper,
...$,
children: [
E ? /* @__PURE__ */ e(Ee, { headerStyle: E }) : null,
/* @__PURE__ */ c(
"div",
{
className: p([
"tw-px-3 tw-bg-primary tw-rounded-md tw-relative tw-z-[120000]",
oe ? J.large : J.small,
m ? K.large : K.small
]),
children: [
i ? /* @__PURE__ */ c("h4", { className: "tw-flex tw-text-m tw-font-bold tw-mb-1", children: [
S && /* @__PURE__ */ e("span", { className: "tw-mr-1.5", children: V(S, { size: 20 }) }),
i
] }) : null,
/* @__PURE__ */ c("div", { className: "tw-flex", children: [
t ? /* @__PURE__ */ e("span", { className: "tw-shrink-0 tw-mr-1 tw-leading-4", children: V(t, { size: 16 }) }) : null,
/* @__PURE__ */ e("span", { className: "tw-text-s tw-min-w-0 tw-break-words", children: r })
] }),
m ? /* @__PURE__ */ e(
"a",
{
...re,
"data-test-id": `${R}-link`,
ref: B,
href: m,
target: "_blank",
rel: "noopener noreferrer",
className: p([
"tw-text-xs tw-text-black-40 tw-underline tw-mt-1",
xe
]),
children: Q ?? "Click here to learn more."
}
) : null,
o ? /* @__PURE__ */ c("div", { className: "tw-flex tw-flex-row-reverse tw-gap-x-1 tw-mt-4", children: [
o.length > 0 && /* @__PURE__ */ e(
W,
{
style: G.Default,
emphasis: q.Strong,
size: Y.Small,
onClick: o[0].action,
disabled: d,
children: o[0].label
}
),
o.length === 2 && /* @__PURE__ */ e(
W,
{
style: G.Default,
emphasis: q.Default,
size: Y.Small,
onClick: o[1].action,
disabled: d,
children: o[1].label
}
)
] }) : null
]
}
),
/* @__PURE__ */ e("div", { "aria-hidden": "true", children: /* @__PURE__ */ e(
"div",
{
"data-test-id": "popover-arrow",
"data-popper-arrow": u,
ref: ae,
style: f.styles.arrow,
className: p([
u && "tw-popper-arrow tw-z-[110000] tw-absolute tw-w-3 tw-h-3 tw-pointer-events-none before:tw-absolute before:tw-w-3 before:tw-h-3 before:tw-rotate-45 before:tw-border",
u && pe,
z ? "before:tw-border-line-strong" : u && "before:tw-border-line"
])
}
) }),
X
]
}
) })
] });
};
ke.displayName = "FondueLegacyTooltip";
export {
ke as LegacyTooltip
};
//# sourceMappingURL=LegacyTooltip.es.js.map