welcome-ui
Version:
Customizable design system with react • styled-components • styled-system and ariakit.
307 lines (299 loc) • 9.67 kB
JavaScript
"use client";
import { j as p } from "./jsx-runtime-Bqq1Hxg9.mjs";
import Q, { useRef as U, useEffect as C, useState as Z } from "react";
import { Box as tt } from "./Box.mjs";
import { forwardRef as et } from "./System.mjs";
import F, { css as f, th as y } from "@xstyled/styled-components";
import { c as ot, d as rt, e as nt, f as it, g as st, h as at } from "./BYC7LY2E-TZjhdRy3.mjs";
import { c as M, a as ut, b as V, d as A } from "./YV4JVR4I-BLeUul5N.mjs";
import { A as B, B as $, C as P, t as lt, f as z, c as Y, h as L, _ as X, i as K, D as ct, g as E, d as W, X as H, Y as dt, P as pt, b as w } from "./LVA2YJMS-B8X1PCyC.mjs";
import { c as ft } from "./JC64G2H7-ifBZq_RU.mjs";
function vt(t = {}) {
var r;
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 = (r = t.store) == null ? void 0 : r.getState(), e = ot(B(P({}, t), {
placement: $(
t.placement,
o == null ? void 0 : o.placement,
"top"
),
hideTimeout: $(t.hideTimeout, o == null ? void 0 : o.hideTimeout, 0)
})), v = B(P({}, e.getState()), {
type: $(t.type, o == null ? void 0 : o.type, "description"),
skipTimeout: $(t.skipTimeout, o == null ? void 0 : o.skipTimeout, 300)
}), i = M(v, e, t.store);
return P(P({}, e), i);
}
function mt(t, r, o) {
return V(t, o, "type"), V(t, o, "skipTimeout"), rt(t, r, o);
}
function ht(t = {}) {
const [r, o] = ut(vt, t);
return mt(r, o, t);
}
var q = lt(
[it],
[nt]
), k = q.useProviderContext, bt = q.ScopedContextProvider, St = "div", gt = Y(
function(r) {
var o = r, {
store: e,
portal: v = !0,
gutter: i = 8,
preserveTabOrder: g = !1,
hideOnHoverOutside: d = !0,
hideOnInteractOutside: c = !0
} = o, a = X(o, [
"store",
"portal",
"gutter",
"preserveTabOrder",
"hideOnHoverOutside",
"hideOnInteractOutside"
]);
const h = k();
e = e || h, K(
e,
process.env.NODE_ENV !== "production" && "Tooltip must receive a `store` prop or be wrapped in a TooltipProvider component."
), a = ct(
a,
(s) => /* @__PURE__ */ p.jsx(bt, { value: e, children: s }),
[e]
);
const b = e.useState(
(s) => s.type === "description" ? "tooltip" : "none"
);
return a = E({ role: b }, a), a = st(W(E({}, a), {
store: e,
portal: v,
gutter: i,
preserveTabOrder: g,
hideOnHoverOutside(s) {
if (H(d, s)) return !1;
const u = e == null ? void 0 : e.getState().anchorElement;
return u ? !("focusVisible" in u.dataset) : !0;
},
hideOnInteractOutside: (s) => {
if (H(c, s)) return !1;
const u = e == null ? void 0 : e.getState().anchorElement;
return u ? !dt(u, s.target) : !0;
}
})), a;
}
), xt = ft(
z(function(r) {
const o = gt(r);
return L(St, o);
}),
k
), Tt = "div", m = M({
activeStore: null
});
function I(t) {
return () => {
const { activeStore: r } = m.getState();
r === t && m.setState("activeStore", null);
};
}
var yt = Y(
function(r) {
var o = r, { store: e, showOnHover: v = !0 } = o, i = X(o, ["store", "showOnHover"]);
const g = k();
e = e || g, K(
e,
process.env.NODE_ENV !== "production" && "TooltipAnchor must receive a `store` prop or be wrapped in a TooltipProvider component."
);
const d = U(!1);
C(() => A(e, ["mounted"], (n) => {
n.mounted || (d.current = !1);
}), [e]), C(() => {
if (e)
return pt(
// 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.
I(e),
A(e, ["mounted", "skipTimeout"], (n) => {
if (!e) return;
if (n.mounted) {
const { activeStore: x } = m.getState();
return x !== e && (x == null || x.hide()), m.setState("activeStore", e);
}
const l = setTimeout(
I(e),
n.skipTimeout
);
return () => clearTimeout(l);
})
);
}, [e]);
const c = i.onMouseEnter, a = w((n) => {
c == null || c(n), d.current = !0;
}), h = i.onFocusVisible, b = w((n) => {
h == null || h(n), !n.defaultPrevented && (e == null || e.setAnchorElement(n.currentTarget), e == null || e.show());
}), s = i.onBlur, u = w((n) => {
if (s == null || s(n), n.defaultPrevented) return;
const { activeStore: l } = m.getState();
d.current = !1, l === e && m.setState("activeStore", null);
}), O = e.useState("type"), _ = e.useState((n) => {
var l;
return (l = n.contentElement) == null ? void 0 : l.id;
});
return i = W(E({
"aria-labelledby": O === "label" ? _ : void 0
}, i), {
onMouseEnter: a,
onFocusVisible: b,
onBlur: u
}), i = at(E({
store: e,
showOnHover(n) {
if (!d.current || H(v, n)) return !1;
const { activeStore: l } = m.getState();
return l ? (e == null || e.show(), !1) : !0;
}
}, i)), i;
}
), $t = z(function(r) {
const o = yt(r);
return L(Tt, o);
});
const Pt = {
auto: "translate3d(0, 0, 0)",
bottom: "translate3d(0, 4px, 0)",
left: "translate3d(-4px, 0, 0)",
right: "translate3d(4px, 0, 0)",
top: "translate3d(0, -4px, 0)"
}, Et = (t) => {
const r = t == null ? void 0 : t.split("-"), o = r[0];
if (r.length < 2)
return Pt[o];
{
let e = "0, 0";
return (t == "right-end" || t == "bottom-end") && (e = "4px, 4px"), (t == "right-start" || t == "top-end") && (e = "4px, -4px"), (t == "left-end" || t == "bottom-start") && (e = "-4px, 4px"), (t == "left-start" || t == "top-start") && (e = "-4px, -4px"), `translate3d(${e}, 0)`;
}
}, Ot = f`
visibility: visible;
opacity: 1;
transform: translate3d(0, 0, 0);
`, S = 12, T = S * 1.5, N = (t) => t.includes("start") ? T : t.includes("end") ? `calc(100% - ${T + "px"})` : "50%", D = (t, r) => {
const o = r - T < S;
return t.includes("end") ? o ? `${S}px` : `calc(100% - ${T}px)` : t.includes("start") ? o ? `${S}px` : `${T}px` : "50%";
}, _t = F.divBox(
({ fixed: t, placement: r, popoverHeight: o, withArrow: e }) => f`
${y("tooltips")};
transition:
opacity ${y.transition("medium")},
transform ${y.transition("medium")},
visibility ${y.transition("medium")};
visibility: hidden;
opacity: 0;
transform-origin: top center;
z-index: 10;
${t && e && f`
&::after {
content: '';
position: absolute;
background-color: inherit;
width: ${S};
height: ${S};
border-width: inherit;
border-style: solid;
border-color: transparent neutral-60 neutral-60 transparent;
border-bottom-right-radius: inherit;
clip-path: polygon(0% 100%, 0% 100%, 100% 100%, 100% 0%);
z-index: 0;
translate: -50% -50%;
${r.includes("top") && f`
top: 100%;
left: ${N(r)};
rotate: 45deg;
`}
${r.includes("bottom") && f`
bottom: 100%;
left: ${N(r)};
translate: -50% 50%;
rotate: 225deg;
`}
${r.includes("left") && f`
top: ${D(r, o)};
left: 100%;
rotate: -45deg;
`}
${r.includes("right") && f`
top: ${D(r, o)};
left: 0%;
rotate: 135deg;
`}
}
`}
${t && f`
transform: ${Et(r)};
`}
[data-enter] & {
${Ot}
}
`
), wt = F.div`
display: inline-block;
`, Nt = et(
({
children: t,
content: r,
fixed: o = !1,
gutter: e = 8,
placement: v = o ? "top" : "bottom",
withArrow: i,
...g
}, d) => {
var j;
const c = ht({ animated: 300, placement: v }), [a, h] = Z({ x: 0, y: 0 }), { render: b, stopAnimation: s } = c, { anchorElement: u, currentPlacement: O, mounted: _, popoverElement: n } = c.useState(), l = () => {
n && Object.assign(n.style, {
display: _ ? "block" : "none",
left: `${a.x}px`,
position: "absolute",
top: `${a.y + window.scrollY + 20}px`
});
}, x = (j = t == null ? void 0 : t.props) != null && j.disabled ? Q.Children.only(/* @__PURE__ */ p.jsx(wt, { children: t })) : t;
return C(() => {
function R({ clientX: G, clientY: J }) {
h({ x: G, y: J }), b();
}
if (u && !o)
return u.addEventListener("mousemove", R), () => {
u.removeEventListener("mousemove", R);
};
}, [b, o, u]), r ? /* @__PURE__ */ p.jsxs(p.Fragment, { children: [
/* @__PURE__ */ p.jsx($t, { render: x, store: c }),
/* @__PURE__ */ p.jsx(
xt,
{
fixed: o,
gutter: e,
ref: d,
render: /* @__PURE__ */ p.jsx(tt, { ...g }),
store: c,
updatePosition: o ? void 0 : l,
children: /* @__PURE__ */ p.jsx(
_t,
{
fixed: o,
onTransitionEnd: s,
placement: O,
popoverHeight: n == null ? void 0 : n.getBoundingClientRect().height,
withArrow: i,
children: r
}
)
}
)
] }) : t;
}
);
export {
Nt as Tooltip
};