welcome-ui
Version:
Customizable design system with react, typescript, tailwindcss and ariakit.
233 lines (232 loc) • 7.6 kB
JavaScript
"use client";
import { jsx as T, jsxs as $, Fragment as Y } from "react/jsx-runtime";
import { H as J, a as K, u as Q, c as U, b as X, d as Z, e as ee } from "./GVVKDT6A-BnYN-H7C.js";
import { e as te, f as x, c as H, b as A, _ as C, i as N, x as oe, a as b, d as z, z as g, q as re, S as ne, u as y, G as D, H as P, I as O } from "./OE2EFRVA-C3721cM3.js";
import { c as se } from "./NI3IVY7K-DxnarnKs.js";
import { a as F, c as L, b as ae, d as M, u as ie } from "./RTNCFSKZ-P4icqVD0.js";
import ue, { useRef as le, useEffect as w, forwardRef as ce, useState as pe, useCallback as de } from "react";
import { c as ve } from "./index-PAaZGbyz.js";
var k = te(
[K],
[J]
), me = k.useContext, V = k.useProviderContext, fe = k.ScopedContextProvider, Se = "div", he = H(
function(r) {
var t = r, {
store: e,
portal: c = !0,
gutter: s = 8,
preserveTabOrder: v = !1,
hideOnHoverOutside: d = !0,
hideOnInteractOutside: f = !0
} = t, a = C(t, [
"store",
"portal",
"gutter",
"preserveTabOrder",
"hideOnHoverOutside",
"hideOnInteractOutside"
]);
const p = V();
e = e || p, N(
e,
process.env.NODE_ENV !== "production" && "Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component."
), a = oe(
a,
(i) => /* @__PURE__ */ T(fe, { value: e, children: i }),
[e]
);
const S = e.useState(
(i) => i.type === "description" ? "tooltip" : "none"
);
return a = b({ role: S }, a), a = Q(z(b({}, a), {
store: e,
portal: c,
gutter: s,
preserveTabOrder: v,
hideOnHoverOutside(i) {
if (g(d, i)) return !1;
const u = e == null ? void 0 : e.getState().anchorElement;
return u ? !("focusVisible" in u.dataset) : !0;
},
hideOnInteractOutside: (i) => {
if (g(f, i)) return !1;
const u = e == null ? void 0 : e.getState().anchorElement;
return u ? !re(u, i.target) : !0;
}
})), a;
}
), Te = se(
x(function(r) {
const t = he(r);
return A(Se, t);
}),
V
), be = "div", m = L({
activeStore: null
});
function j(o) {
return () => {
const { activeStore: r } = m.getState();
r === o && m.setState("activeStore", null);
};
}
var _e = H(
function(r) {
var t = r, { store: e, showOnHover: c = !0 } = t, s = C(t, ["store", "showOnHover"]);
const v = V();
e = e || v, N(
e,
process.env.NODE_ENV !== "production" && "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component."
);
const d = le(!1);
w(() => F(e, ["mounted"], (n) => {
n.mounted || (d.current = !1);
}), [e]), w(() => {
if (e)
return ne(
// 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.
j(e),
F(e, ["mounted", "skipTimeout"], (n) => {
if (!e) return;
if (n.mounted) {
const { activeStore: h } = m.getState();
return h !== e && (h == null || h.hide()), m.setState("activeStore", e);
}
const l = setTimeout(
j(e),
n.skipTimeout
);
return () => clearTimeout(l);
})
);
}, [e]);
const f = s.onMouseEnter, a = y((n) => {
f == null || f(n), d.current = !0;
}), p = s.onFocusVisible, S = y((n) => {
p == null || p(n), !n.defaultPrevented && (e == null || e.setAnchorElement(n.currentTarget), e == null || e.show());
}), i = s.onBlur, u = y((n) => {
if (i == null || i(n), n.defaultPrevented) return;
const { activeStore: l } = m.getState();
d.current = !1, l === e && m.setState("activeStore", null);
}), _ = e.useState("type"), E = e.useState((n) => {
var l;
return (l = n.contentElement) == null ? void 0 : l.id;
});
return s = z(b({
"aria-labelledby": _ === "label" ? E : void 0
}, s), {
onMouseEnter: a,
onFocusVisible: S,
onBlur: u
}), s = U(b({
store: e,
showOnHover(n) {
if (!d.current || g(c, n)) return !1;
const { activeStore: l } = m.getState();
return l ? (e == null || e.show(), !1) : !0;
}
}, s)), s;
}
), Ee = x(function(r) {
const t = _e(r);
return A(be, t);
}), Pe = "div", Oe = H(
function(r) {
var t = r, { store: e, size: c = 16 } = t, s = C(t, ["store", "size"]);
const v = me();
return e = e || v, N(
e,
process.env.NODE_ENV !== "production" && "TooltipArrow must be wrapped in a Tooltip component."
), s = X(b({ store: e, size: c }, s)), s;
}
), ye = x(function(r) {
const t = Oe(r);
return A(Pe, t);
});
function ge(o = {}) {
var r;
process.env.NODE_ENV !== "production" && o.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 t = (r = o.store) == null ? void 0 : r.getState(), e = Z(D(O({}, o), {
placement: P(
o.placement,
t == null ? void 0 : t.placement,
"top"
),
hideTimeout: P(o.hideTimeout, t == null ? void 0 : t.hideTimeout, 0)
})), c = D(O({}, e.getState()), {
type: P(o.type, t == null ? void 0 : t.type, "description"),
skipTimeout: P(o.skipTimeout, t == null ? void 0 : t.skipTimeout, 300)
}), s = L(c, e, o.store);
return O(O({}, e), s);
}
function we(o, r, t) {
return M(o, t, "type"), M(o, t, "skipTimeout"), ee(o, r, t);
}
function xe(o = {}) {
const [r, t] = ae(ge, o);
return we(r, t, o);
}
const He = "_root_1d43p_2", Ae = "_childItem_1d43p_22", Ce = {
root: He,
childItem: Ae
}, B = ve(Ce), Fe = ce(
({
children: o,
className: r = "",
content: t,
fixed: e = !1,
gutter: c = 8,
placement: s = e ? "top" : "bottom",
withArrow: v = !1,
...d
}, f) => {
var I;
const a = xe({ animated: 300, placement: s }), { anchorElement: p, mounted: S, popoverElement: i } = ie(a), { render: u, setState: _ } = a, [E, n] = pe({ x: 0, y: 0 }), l = () => {
i && Object.assign(i.style, {
display: S ? "block" : "none",
left: `${E.x}px`,
position: "absolute",
top: `${E.y + window.scrollY + 20}px`
});
}, h = de(() => {
_("animating", !1);
}, [_]), q = (I = o == null ? void 0 : o.props) != null && I.disabled ? ue.Children.only(/* @__PURE__ */ T("span", { className: B("childItem"), children: o })) : o;
return w(() => {
function R({ clientX: G, clientY: W }) {
n({ x: G, y: W }), u();
}
if (p && !e)
return p.addEventListener("mousemove", R), () => {
p.removeEventListener("mousemove", R);
};
}, [u, e, p]), t ? /* @__PURE__ */ $(Y, { children: [
/* @__PURE__ */ T(Ee, { render: q, store: a }),
/* @__PURE__ */ $(
Te,
{
className: B("root", r),
fixed: e,
gutter: c,
onTransitionEnd: h,
ref: f,
render: /* @__PURE__ */ T("div", { ...d }),
store: a,
updatePosition: e ? void 0 : l,
children: [
v ? /* @__PURE__ */ T(ye, {}) : null,
t
]
}
)
] }) : o;
}
);
export {
Fe as Tooltip
};