welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
222 lines (221 loc) • 7.15 kB
JavaScript
"use client";
import './Tooltip.css';
import { jsx as p, jsxs as _, Fragment as Q } from "react/jsx-runtime";
import { H as W, a as Y, u as q, b as z, c as G, d as J } from "./ECBEZ4YM-o09xUuV6.js";
import { b as K, f as A, c as V, a as R, i as I, h as U, A as P, t as X, Q as Z, u as y, x as b } from "./U6HHPQDW-CzxyP5H7.js";
import { c as ee } from "./Z32PU2LQ-DMjfxuT9.js";
import { d as k, c as F, u as te, a as w, b as oe } from "./Q5W46E73-5xQblshY.js";
import ne, { useRef as re, useEffect as g, forwardRef as ae, useState as ie, useCallback as le } from "react";
import { Text as H } from "./Text.js";
import { c as se } from "./index-B6iGEm-i.js";
var M = K(
[Y],
[W]
), x = M.useProviderContext, ue = M.ScopedContextProvider, ce = "div", de = V(
function({
store: e,
portal: o = !0,
gutter: n = 8,
preserveTabOrder: c = !1,
hideOnHoverOutside: s = !0,
hideOnInteractOutside: d = !0,
...i
}) {
const f = x();
return e = e || f, I(
e,
process.env.NODE_ENV !== "production" && "Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component."
), i = U(
i,
(a) => /* @__PURE__ */ p(ue, { value: e, children: a }),
[e]
), i = { role: e.useState(
(a) => a.type === "description" ? "tooltip" : "none"
), ...i }, i = q({
...i,
store: e,
portal: o,
gutter: n,
preserveTabOrder: c,
hideOnHoverOutside(a) {
if (P(s, a)) return !1;
const u = e == null ? void 0 : e.getState().anchorElement;
return u ? !("focusVisible" in u.dataset) : !0;
},
hideOnInteractOutside: (a) => {
if (P(d, a)) return !1;
const u = e == null ? void 0 : e.getState().anchorElement;
return u ? !X(u, a.target) : !0;
}
}), i;
}
), me = ee(
A(function(e) {
const o = de(e);
return R(ce, o);
}),
x
), ve = "div", v = F({
activeStore: null
});
function O(t) {
return () => {
const { activeStore: e } = v.getState();
e === t && v.setState("activeStore", null);
};
}
var fe = V(
function({ store: e, showOnHover: o = !0, ...n }) {
const c = x();
e = e || c, I(
e,
process.env.NODE_ENV !== "production" && "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component."
);
const s = re(!1);
g(() => k(e, ["mounted"], (r) => {
r.mounted || (s.current = !1);
}), [e]), g(() => {
if (e)
return Z(
// Immediately remove the current store from the global store when
// the component unmounts. This is useful, for example, to avoid
// showing tooltips immediately on serial tests.
O(e),
k(e, ["mounted", "skipTimeout"], (r) => {
if (!e) return;
if (r.mounted) {
const { activeStore: S } = v.getState();
return S !== e && (S == null || S.hide()), v.setState("activeStore", e);
}
const l = setTimeout(
O(e),
r.skipTimeout
);
return () => clearTimeout(l);
})
);
}, [e]);
const d = n.onMouseEnter, i = y((r) => {
d == null || d(r), s.current = !0;
}), f = n.onFocusVisible, m = y((r) => {
f == null || f(r), !r.defaultPrevented && (e == null || e.setAnchorElement(r.currentTarget), e == null || e.show());
}), a = n.onBlur, u = y((r) => {
if (a == null || a(r), r.defaultPrevented) return;
const { activeStore: l } = v.getState();
s.current = !1, l === e && v.setState("activeStore", null);
}), h = e.useState("type"), T = e.useState((r) => {
var l;
return (l = r.contentElement) == null ? void 0 : l.id;
});
return n = {
"aria-labelledby": h === "label" ? T : void 0,
...n,
onMouseEnter: i,
onFocusVisible: m,
onBlur: u
}, n = z({
store: e,
showOnHover(r) {
if (!s.current || P(o, r)) return !1;
const { activeStore: l } = v.getState();
return l ? (e == null || e.show(), !1) : !0;
},
...n
}), n;
}
), pe = A(function(e) {
const o = fe(e);
return R(ve, o);
});
function Se(t = {}) {
var e;
process.env.NODE_ENV !== "production" && t.type === "label" && console.warn(
"The `type` option on the tooltip store is deprecated.",
"Render a visually hidden label or use the `aria-label` or `aria-labelledby` attributes on the anchor element instead.",
"See https://ariakit.org/components/tooltip#tooltip-anchors-must-have-accessible-names"
);
const o = (e = t.store) == null ? void 0 : e.getState(), n = G({
...t,
placement: b(
t.placement,
o == null ? void 0 : o.placement,
"top"
),
hideTimeout: b(t.hideTimeout, o == null ? void 0 : o.hideTimeout, 0)
}), c = {
...n.getState(),
type: b(t.type, o == null ? void 0 : o.type, "description"),
skipTimeout: b(t.skipTimeout, o == null ? void 0 : o.skipTimeout, 300)
}, s = F(c, n, t.store);
return {
...n,
...s
};
}
function he(t, e, o) {
return w(t, o, "type"), w(t, o, "skipTimeout"), J(t, e, o);
}
function Te(t = {}) {
const [e, o] = te(Se, t);
return he(e, o, t);
}
const be = "_root_1r2b3_2", ye = "_childItem_1r2b3_24", Ee = {
root: be,
childItem: ye
}, E = se(Ee), Pe = ae(
({
children: t,
className: e = "",
content: o,
fixed: n = !1,
gutter: c = 8,
placement: s = n ? "top" : "bottom",
title: d,
...i
}, f) => {
var C;
const m = Te({ animated: 300, placement: s }), { anchorElement: a, mounted: u, popoverElement: h } = oe(m), { render: T, setState: r } = m, [l, S] = ie({ x: 0, y: 0 }), B = () => {
h && Object.assign(h.style, {
display: u ? "block" : "none",
left: `${l.x}px`,
position: "absolute",
top: `${l.y + window.scrollY + 20}px`
});
}, D = le(() => {
r("animating", !1);
}, [r]), $ = (C = t == null ? void 0 : t.props) != null && C.disabled ? ne.Children.only(/* @__PURE__ */ p("span", { className: E("childItem"), children: t })) : t;
return g(() => {
function N({ clientX: j, clientY: L }) {
S({ x: j, y: L }), T();
}
if (a && !n)
return a.addEventListener("mousemove", N), () => {
a.removeEventListener("mousemove", N);
};
}, [T, n, a]), o ? /* @__PURE__ */ _(Q, { children: [
/* @__PURE__ */ p(pe, { render: $, store: m }),
/* @__PURE__ */ _(
me,
{
className: E("root", e),
fixed: n,
gutter: c,
onTransitionEnd: D,
ref: f,
render: /* @__PURE__ */ p("div", { ...i }),
store: m,
updatePosition: n ? void 0 : B,
children: [
d ? /* @__PURE__ */ p(H, { as: "span", className: E("title"), variant: "label-md-strong", children: d }) : null,
/* @__PURE__ */ p(H, { as: "span", variant: "body-md-strong", children: o })
]
}
)
] }) : t;
}
);
Pe.displayName = "Tooltip";
export {
Pe as Tooltip,
Ee as tooltipClasses
};