dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
342 lines (341 loc) • 11.8 kB
JavaScript
import { jsx as f, Fragment as V, jsxs as Y } from "react/jsx-runtime";
import * as s from "react";
import { P as q, c as g, a as X, b as K } from "./index-BVqmUhu5.es.js";
import { u as S } from "./index-DLcqcWxM.es.js";
import { D as W } from "./index-ClNIHY-1.es.js";
import { a as J, u as Q } from "./index-BdfbDt7y.es.js";
import { R as Z, A as ee, c as M, C as te, a as oe } from "./index-Bli6ZByj.es.js";
import { R as re } from "./index-Clo5BFLY.es.js";
import { c as ne } from "./utils-CnvKSirc.es.js";
var se = Symbol("radix.slottable");
// @__NO_SIDE_EFFECTS__
function ae(t) {
const o = ({ children: e }) => /* @__PURE__ */ f(V, { children: e });
return o.displayName = `${t}.Slottable`, o.__radixId = se, o;
}
var [_] = K("Tooltip", [
M
]), D = M(), H = "TooltipProvider", ie = 700, O = "tooltip.open", [le, k] = _(H), F = (t) => {
const {
__scopeTooltip: o,
delayDuration: e = ie,
skipDelayDuration: r = 300,
disableHoverableContent: n = !1,
children: l
} = t, i = s.useRef(!0), v = s.useRef(!1), a = s.useRef(0);
return s.useEffect(() => {
const d = a.current;
return () => window.clearTimeout(d);
}, []), /* @__PURE__ */ f(
le,
{
scope: o,
isOpenDelayedRef: i,
delayDuration: e,
onOpen: s.useCallback(() => {
window.clearTimeout(a.current), i.current = !1;
}, []),
onClose: s.useCallback(() => {
window.clearTimeout(a.current), a.current = window.setTimeout(
() => i.current = !0,
r
);
}, [r]),
isPointerInTransitRef: v,
onPointerInTransitChange: s.useCallback((d) => {
v.current = d;
}, []),
disableHoverableContent: n,
children: l
}
);
};
F.displayName = H;
var R = "Tooltip", [ce, L] = _(R), G = (t) => {
const {
__scopeTooltip: o,
children: e,
open: r,
defaultOpen: n,
onOpenChange: l,
disableHoverableContent: i,
delayDuration: v
} = t, a = k(R, t.__scopeTooltip), d = D(o), [c, p] = s.useState(null), m = J(), u = s.useRef(0), h = i ?? a.disableHoverableContent, y = v ?? a.delayDuration, T = s.useRef(!1), [C, x] = Q({
prop: r,
defaultProp: n ?? !1,
onChange: (N) => {
N ? (a.onOpen(), document.dispatchEvent(new CustomEvent(O))) : a.onClose(), l == null || l(N);
},
caller: R
}), w = s.useMemo(() => C ? T.current ? "delayed-open" : "instant-open" : "closed", [C]), E = s.useCallback(() => {
window.clearTimeout(u.current), u.current = 0, T.current = !1, x(!0);
}, [x]), P = s.useCallback(() => {
window.clearTimeout(u.current), u.current = 0, x(!1);
}, [x]), I = s.useCallback(() => {
window.clearTimeout(u.current), u.current = window.setTimeout(() => {
T.current = !0, x(!0), u.current = 0;
}, y);
}, [y, x]);
return s.useEffect(() => () => {
u.current && (window.clearTimeout(u.current), u.current = 0);
}, []), /* @__PURE__ */ f(Z, { ...d, children: /* @__PURE__ */ f(
ce,
{
scope: o,
contentId: m,
open: C,
stateAttribute: w,
trigger: c,
onTriggerChange: p,
onTriggerEnter: s.useCallback(() => {
a.isOpenDelayedRef.current ? I() : E();
}, [a.isOpenDelayedRef, I, E]),
onTriggerLeave: s.useCallback(() => {
h ? P() : (window.clearTimeout(u.current), u.current = 0);
}, [P, h]),
onOpen: E,
onClose: P,
disableHoverableContent: h,
children: e
}
) });
};
G.displayName = R;
var A = "TooltipTrigger", j = s.forwardRef(
(t, o) => {
const { __scopeTooltip: e, ...r } = t, n = L(A, e), l = k(A, e), i = D(e), v = s.useRef(null), a = S(o, v, n.onTriggerChange), d = s.useRef(!1), c = s.useRef(!1), p = s.useCallback(() => d.current = !1, []);
return s.useEffect(() => () => document.removeEventListener("pointerup", p), [p]), /* @__PURE__ */ f(ee, { asChild: !0, ...i, children: /* @__PURE__ */ f(
q.button,
{
"aria-describedby": n.open ? n.contentId : void 0,
"data-state": n.stateAttribute,
...r,
ref: a,
onPointerMove: g(t.onPointerMove, (m) => {
m.pointerType !== "touch" && !c.current && !l.isPointerInTransitRef.current && (n.onTriggerEnter(), c.current = !0);
}),
onPointerLeave: g(t.onPointerLeave, () => {
n.onTriggerLeave(), c.current = !1;
}),
onPointerDown: g(t.onPointerDown, () => {
n.open && n.onClose(), d.current = !0, document.addEventListener("pointerup", p, { once: !0 });
}),
onFocus: g(t.onFocus, () => {
d.current || n.onOpen();
}),
onBlur: g(t.onBlur, n.onClose),
onClick: g(t.onClick, n.onClose)
}
) });
}
);
j.displayName = A;
var ue = "TooltipPortal", [Se, de] = _(ue, {
forceMount: void 0
}), b = "TooltipContent", B = s.forwardRef(
(t, o) => {
const e = de(b, t.__scopeTooltip), { forceMount: r = e.forceMount, side: n = "top", ...l } = t, i = L(b, t.__scopeTooltip);
return /* @__PURE__ */ f(X, { present: r || i.open, children: i.disableHoverableContent ? /* @__PURE__ */ f($, { side: n, ...l, ref: o }) : /* @__PURE__ */ f(pe, { side: n, ...l, ref: o }) });
}
), pe = s.forwardRef((t, o) => {
const e = L(b, t.__scopeTooltip), r = k(b, t.__scopeTooltip), n = s.useRef(null), l = S(o, n), [i, v] = s.useState(null), { trigger: a, onClose: d } = e, c = n.current, { onPointerInTransitChange: p } = r, m = s.useCallback(() => {
v(null), p(!1);
}, [p]), u = s.useCallback(
(h, y) => {
const T = h.currentTarget, C = { x: h.clientX, y: h.clientY }, x = Te(C, T.getBoundingClientRect()), w = ye(C, x), E = xe(y.getBoundingClientRect()), P = ge([...w, ...E]);
v(P), p(!0);
},
[p]
);
return s.useEffect(() => () => m(), [m]), s.useEffect(() => {
if (a && c) {
const h = (T) => u(T, c), y = (T) => u(T, a);
return a.addEventListener("pointerleave", h), c.addEventListener("pointerleave", y), () => {
a.removeEventListener("pointerleave", h), c.removeEventListener("pointerleave", y);
};
}
}, [a, c, u, m]), s.useEffect(() => {
if (i) {
const h = (y) => {
const T = y.target, C = { x: y.clientX, y: y.clientY }, x = (a == null ? void 0 : a.contains(T)) || (c == null ? void 0 : c.contains(T)), w = !Ce(C, i);
x ? m() : w && (m(), d());
};
return document.addEventListener("pointermove", h), () => document.removeEventListener("pointermove", h);
}
}, [a, c, i, d, m]), /* @__PURE__ */ f($, { ...t, ref: l });
}), [fe, ve] = _(R, { isInside: !1 }), me = /* @__PURE__ */ ae("TooltipContent"), $ = s.forwardRef(
(t, o) => {
const {
__scopeTooltip: e,
children: r,
"aria-label": n,
onEscapeKeyDown: l,
onPointerDownOutside: i,
...v
} = t, a = L(b, e), d = D(e), { onClose: c } = a;
return s.useEffect(() => (document.addEventListener(O, c), () => document.removeEventListener(O, c)), [c]), s.useEffect(() => {
if (a.trigger) {
const p = (m) => {
const u = m.target;
u != null && u.contains(a.trigger) && c();
};
return window.addEventListener("scroll", p, { capture: !0 }), () => window.removeEventListener("scroll", p, { capture: !0 });
}
}, [a.trigger, c]), /* @__PURE__ */ f(
W,
{
asChild: !0,
disableOutsidePointerEvents: !1,
onEscapeKeyDown: l,
onPointerDownOutside: i,
onFocusOutside: (p) => p.preventDefault(),
onDismiss: c,
children: /* @__PURE__ */ Y(
te,
{
"data-state": a.stateAttribute,
...d,
...v,
ref: o,
style: {
...v.style,
"--radix-tooltip-content-transform-origin": "var(--radix-popper-transform-origin)",
"--radix-tooltip-content-available-width": "var(--radix-popper-available-width)",
"--radix-tooltip-content-available-height": "var(--radix-popper-available-height)",
"--radix-tooltip-trigger-width": "var(--radix-popper-anchor-width)",
"--radix-tooltip-trigger-height": "var(--radix-popper-anchor-height)"
},
children: [
/* @__PURE__ */ f(me, { children: r }),
/* @__PURE__ */ f(fe, { scope: e, isInside: !0, children: /* @__PURE__ */ f(re, { id: a.contentId, role: "tooltip", children: n || r }) })
]
}
)
}
);
}
);
B.displayName = b;
var z = "TooltipArrow", he = s.forwardRef(
(t, o) => {
const { __scopeTooltip: e, ...r } = t, n = D(e);
return ve(
z,
e
).isInside ? null : /* @__PURE__ */ f(oe, { ...n, ...r, ref: o });
}
);
he.displayName = z;
function Te(t, o) {
const e = Math.abs(o.top - t.y), r = Math.abs(o.bottom - t.y), n = Math.abs(o.right - t.x), l = Math.abs(o.left - t.x);
switch (Math.min(e, r, n, l)) {
case l:
return "left";
case n:
return "right";
case e:
return "top";
case r:
return "bottom";
default:
throw new Error("unreachable");
}
}
function ye(t, o, e = 5) {
const r = [];
switch (o) {
case "top":
r.push(
{ x: t.x - e, y: t.y + e },
{ x: t.x + e, y: t.y + e }
);
break;
case "bottom":
r.push(
{ x: t.x - e, y: t.y - e },
{ x: t.x + e, y: t.y - e }
);
break;
case "left":
r.push(
{ x: t.x + e, y: t.y - e },
{ x: t.x + e, y: t.y + e }
);
break;
case "right":
r.push(
{ x: t.x - e, y: t.y - e },
{ x: t.x - e, y: t.y + e }
);
break;
}
return r;
}
function xe(t) {
const { top: o, right: e, bottom: r, left: n } = t;
return [
{ x: n, y: o },
{ x: e, y: o },
{ x: e, y: r },
{ x: n, y: r }
];
}
function Ce(t, o) {
const { x: e, y: r } = t;
let n = !1;
for (let l = 0, i = o.length - 1; l < o.length; i = l++) {
const v = o[l], a = o[i], d = v.x, c = v.y, p = a.x, m = a.y;
c > r != m > r && e < (p - d) * (r - c) / (m - c) + d && (n = !n);
}
return n;
}
function ge(t) {
const o = t.slice();
return o.sort((e, r) => e.x < r.x ? -1 : e.x > r.x ? 1 : e.y < r.y ? -1 : e.y > r.y ? 1 : 0), be(o);
}
function be(t) {
if (t.length <= 1) return t.slice();
const o = [];
for (let r = 0; r < t.length; r++) {
const n = t[r];
for (; o.length >= 2; ) {
const l = o[o.length - 1], i = o[o.length - 2];
if ((l.x - i.x) * (n.y - i.y) >= (l.y - i.y) * (n.x - i.x)) o.pop();
else break;
}
o.push(n);
}
o.pop();
const e = [];
for (let r = t.length - 1; r >= 0; r--) {
const n = t[r];
for (; e.length >= 2; ) {
const l = e[e.length - 1], i = e[e.length - 2];
if ((l.x - i.x) * (n.y - i.y) >= (l.y - i.y) * (n.x - i.x)) e.pop();
else break;
}
e.push(n);
}
return e.pop(), o.length === 1 && e.length === 1 && o[0].x === e[0].x && o[0].y === e[0].y ? o : o.concat(e);
}
var we = F, Ee = G, Pe = j, U = B;
const Me = we, He = Ee, Fe = Pe, Re = s.forwardRef(({ className: t, sideOffset: o = 4, ...e }, r) => /* @__PURE__ */ f(
U,
{
ref: r,
sideOffset: o,
className: ne(
"bg-popover text-popover-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 overflow-hidden rounded-md border px-3 py-1.5 text-sm shadow-md",
t
),
...e
}
));
Re.displayName = U.displayName;
export {
He as T,
Re as a,
Me as b,
Fe as c
};
//# sourceMappingURL=tooltip-Dtzkuphk.es.js.map