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