dgz-ui
Version:
Custom ui library using React.js, Shadcn/ui, TailwindCSS, Typescript
337 lines (336 loc) • 11.7 kB
JavaScript
import { j as f } from "./jsx-runtime-C5mzlN2N.js";
import * as s from "react";
import { c as g, P as V } from "./index-D_OzDH1f.js";
import { u as M, a as Y } from "./index-l1ZGtt0d.js";
import { c as q } from "./index-Dmh__Tgi.js";
import { D as X } from "./index-DqTIeHVj.js";
import { a as K, u as W } from "./index-rSIGk0ww.js";
import { c as N, R as J, A as Q, C as Z, a as ee } from "./index-VIo8j85K.js";
import { P as te } from "./index-Do92jweN.js";
import { R as oe } from "./index-CYIFqWxx.js";
import { c as re } from "./utils-B6fNqzRf.js";
var [_, Ie] = q("Tooltip", [
N
]), D = N(), H = "TooltipProvider", ne = 700, A = "tooltip.open", [se, j] = _(H), S = (t) => {
const {
__scopeTooltip: o,
delayDuration: e = ne,
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 p = a.current;
return () => window.clearTimeout(p);
}, []), /* @__PURE__ */ f.jsx(
se,
{
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((p) => {
v.current = p;
}, []),
disableHoverableContent: n,
children: l
}
);
};
S.displayName = H;
var R = "Tooltip", [ae, O] = _(R), G = (t) => {
const {
__scopeTooltip: o,
children: e,
open: r,
defaultOpen: n,
onOpenChange: l,
disableHoverableContent: i,
delayDuration: v
} = t, a = j(R, t.__scopeTooltip), p = D(o), [c, d] = s.useState(null), m = K(), u = s.useRef(0), h = i ?? a.disableHoverableContent, T = v ?? a.delayDuration, x = s.useRef(!1), [C, y] = W({
prop: r,
defaultProp: n ?? !1,
onChange: (I) => {
I ? (a.onOpen(), document.dispatchEvent(new CustomEvent(A))) : a.onClose(), l == null || l(I);
},
caller: R
}), w = s.useMemo(() => C ? x.current ? "delayed-open" : "instant-open" : "closed", [C]), P = s.useCallback(() => {
window.clearTimeout(u.current), u.current = 0, x.current = !1, y(!0);
}, [y]), E = s.useCallback(() => {
window.clearTimeout(u.current), u.current = 0, y(!1);
}, [y]), k = s.useCallback(() => {
window.clearTimeout(u.current), u.current = window.setTimeout(() => {
x.current = !0, y(!0), u.current = 0;
}, T);
}, [T, y]);
return s.useEffect(() => () => {
u.current && (window.clearTimeout(u.current), u.current = 0);
}, []), /* @__PURE__ */ f.jsx(J, { ...p, children: /* @__PURE__ */ f.jsx(
ae,
{
scope: o,
contentId: m,
open: C,
stateAttribute: w,
trigger: c,
onTriggerChange: d,
onTriggerEnter: s.useCallback(() => {
a.isOpenDelayedRef.current ? k() : P();
}, [a.isOpenDelayedRef, k, P]),
onTriggerLeave: s.useCallback(() => {
h ? E() : (window.clearTimeout(u.current), u.current = 0);
}, [E, h]),
onOpen: P,
onClose: E,
disableHoverableContent: h,
children: e
}
) });
};
G.displayName = R;
var L = "TooltipTrigger", F = s.forwardRef(
(t, o) => {
const { __scopeTooltip: e, ...r } = t, n = O(L, e), l = j(L, e), i = D(e), v = s.useRef(null), a = M(o, v, n.onTriggerChange), p = s.useRef(!1), c = s.useRef(!1), d = s.useCallback(() => p.current = !1, []);
return s.useEffect(() => () => document.removeEventListener("pointerup", d), [d]), /* @__PURE__ */ f.jsx(Q, { asChild: !0, ...i, children: /* @__PURE__ */ f.jsx(
te.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(), p.current = !0, document.addEventListener("pointerup", d, { once: !0 });
}),
onFocus: g(t.onFocus, () => {
p.current || n.onOpen();
}),
onBlur: g(t.onBlur, n.onClose),
onClick: g(t.onClick, n.onClose)
}
) });
}
);
F.displayName = L;
var ie = "TooltipPortal", [Me, le] = _(ie, {
forceMount: void 0
}), b = "TooltipContent", B = s.forwardRef(
(t, o) => {
const e = le(b, t.__scopeTooltip), { forceMount: r = e.forceMount, side: n = "top", ...l } = t, i = O(b, t.__scopeTooltip);
return /* @__PURE__ */ f.jsx(V, { present: r || i.open, children: i.disableHoverableContent ? /* @__PURE__ */ f.jsx($, { side: n, ...l, ref: o }) : /* @__PURE__ */ f.jsx(ce, { side: n, ...l, ref: o }) });
}
), ce = s.forwardRef((t, o) => {
const e = O(b, t.__scopeTooltip), r = j(b, t.__scopeTooltip), n = s.useRef(null), l = M(o, n), [i, v] = s.useState(null), { trigger: a, onClose: p } = e, c = n.current, { onPointerInTransitChange: d } = r, m = s.useCallback(() => {
v(null), d(!1);
}, [d]), u = s.useCallback(
(h, T) => {
const x = h.currentTarget, C = { x: h.clientX, y: h.clientY }, y = ve(C, x.getBoundingClientRect()), w = me(C, y), P = he(T.getBoundingClientRect()), E = Te([...w, ...P]);
v(E), d(!0);
},
[d]
);
return s.useEffect(() => () => m(), [m]), s.useEffect(() => {
if (a && c) {
const h = (x) => u(x, c), T = (x) => u(x, a);
return a.addEventListener("pointerleave", h), c.addEventListener("pointerleave", T), () => {
a.removeEventListener("pointerleave", h), c.removeEventListener("pointerleave", T);
};
}
}, [a, c, u, m]), s.useEffect(() => {
if (i) {
const h = (T) => {
const x = T.target, C = { x: T.clientX, y: T.clientY }, y = (a == null ? void 0 : a.contains(x)) || (c == null ? void 0 : c.contains(x)), w = !xe(C, i);
y ? m() : w && (m(), p());
};
return document.addEventListener("pointermove", h), () => document.removeEventListener("pointermove", h);
}
}, [a, c, i, p, m]), /* @__PURE__ */ f.jsx($, { ...t, ref: l });
}), [ue, pe] = _(R, { isInside: !1 }), de = Y("TooltipContent"), $ = s.forwardRef(
(t, o) => {
const {
__scopeTooltip: e,
children: r,
"aria-label": n,
onEscapeKeyDown: l,
onPointerDownOutside: i,
...v
} = t, a = O(b, e), p = D(e), { onClose: c } = a;
return s.useEffect(() => (document.addEventListener(A, c), () => document.removeEventListener(A, c)), [c]), s.useEffect(() => {
if (a.trigger) {
const d = (m) => {
const u = m.target;
u != null && u.contains(a.trigger) && c();
};
return window.addEventListener("scroll", d, { capture: !0 }), () => window.removeEventListener("scroll", d, { capture: !0 });
}
}, [a.trigger, c]), /* @__PURE__ */ f.jsx(
X,
{
asChild: !0,
disableOutsidePointerEvents: !1,
onEscapeKeyDown: l,
onPointerDownOutside: i,
onFocusOutside: (d) => d.preventDefault(),
onDismiss: c,
children: /* @__PURE__ */ f.jsxs(
Z,
{
"data-state": a.stateAttribute,
...p,
...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.jsx(de, { children: r }),
/* @__PURE__ */ f.jsx(ue, { scope: e, isInside: !0, children: /* @__PURE__ */ f.jsx(oe, { id: a.contentId, role: "tooltip", children: n || r }) })
]
}
)
}
);
}
);
B.displayName = b;
var z = "TooltipArrow", fe = s.forwardRef(
(t, o) => {
const { __scopeTooltip: e, ...r } = t, n = D(e);
return pe(
z,
e
).isInside ? null : /* @__PURE__ */ f.jsx(ee, { ...n, ...r, ref: o });
}
);
fe.displayName = z;
function ve(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 me(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 he(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 xe(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], p = v.x, c = v.y, d = a.x, m = a.y;
c > r != m > r && e < (d - p) * (r - c) / (m - c) + p && (n = !n);
}
return n;
}
function Te(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), ye(o);
}
function ye(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 Ce = S, ge = G, be = F, U = B;
const Ne = Ce, He = ge, Se = be, we = s.forwardRef(({ className: t, sideOffset: o = 4, ...e }, r) => /* @__PURE__ */ f.jsx(
U,
{
ref: r,
sideOffset: o,
className: re(
"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
}
));
we.displayName = U.displayName;
export {
He as T,
Se as a,
we as b,
Ne as c
};