@caseparts-org/caseblocks 0.0.106 → 0.0.107
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/atoms/Tooltip/Tooltip.js +79 -73
- package/package.json +1 -1
|
@@ -1,121 +1,127 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import * as
|
|
1
|
+
import { jsxs as W, Fragment as X, jsx as O } from "react/jsx-runtime";
|
|
2
|
+
import * as r from "react";
|
|
3
3
|
import { c as S } from "../../clsx-OuTLNxxd.js";
|
|
4
|
-
import { r as
|
|
5
|
-
import '../../assets/Tooltip.css';const
|
|
6
|
-
tooltip:
|
|
7
|
-
content:
|
|
4
|
+
import { r as Y } from "../../index-B4KbmMH3.js";
|
|
5
|
+
import '../../assets/Tooltip.css';const A = "_tooltip_17o7a_1", D = "_content_17o7a_11", j = {
|
|
6
|
+
tooltip: A,
|
|
7
|
+
content: D
|
|
8
8
|
};
|
|
9
|
-
function
|
|
10
|
-
return
|
|
9
|
+
function $(a) {
|
|
10
|
+
return a ? a.includes(" ") ? a : `${a} center` : "top center";
|
|
11
11
|
}
|
|
12
|
-
function
|
|
13
|
-
const v =
|
|
12
|
+
function q(a) {
|
|
13
|
+
const v = $(a).toLowerCase(), [s, n] = v.split(" ");
|
|
14
14
|
return { side: ["top", "right", "bottom", "left"].includes(s) ? s : "top", align: n === "left" || n === "top" ? "start" : n === "right" || n === "bottom" ? "end" : "center" };
|
|
15
15
|
}
|
|
16
|
-
function
|
|
17
|
-
const o =
|
|
16
|
+
function G(a, v, s, n, h = 0) {
|
|
17
|
+
const o = a.getBoundingClientRect(), d = v.getBoundingClientRect(), m = window.pageXOffset || document.documentElement.scrollLeft || 0, p = window.pageYOffset || document.documentElement.scrollTop || 0;
|
|
18
18
|
let l = 0, c = 0;
|
|
19
|
-
s === "top" ? l =
|
|
19
|
+
s === "top" ? l = p + o.top - d.height - h : s === "bottom" ? l = p + o.bottom + h : s === "left" ? c = m + o.left - d.width - h : s === "right" && (c = m + o.right + h), s === "top" || s === "bottom" ? n === "start" ? c = m + o.left : n === "end" ? c = m + o.right - d.width : c = m + o.left + o.width / 2 - d.width / 2 : n === "start" ? l = p + o.top : n === "end" ? l = p + o.bottom - d.height : l = p + o.top + o.height / 2 - d.height / 2;
|
|
20
20
|
const R = window.innerWidth, t = window.innerHeight;
|
|
21
|
-
return l = Math.max(
|
|
21
|
+
return l = Math.max(p + 4, Math.min(p + t - d.height - 4, l)), c = Math.max(m + 4, Math.min(m + R - d.width - 4, c)), { top: l, left: c };
|
|
22
22
|
}
|
|
23
|
-
const
|
|
24
|
-
tooltipClassName:
|
|
23
|
+
const U = ({
|
|
24
|
+
tooltipClassName: a,
|
|
25
25
|
contentClassName: v,
|
|
26
26
|
children: s,
|
|
27
27
|
trigger: n,
|
|
28
28
|
position: h,
|
|
29
29
|
disabled: o,
|
|
30
|
-
openDelay:
|
|
30
|
+
openDelay: d = 150,
|
|
31
31
|
closeDelay: m = 100,
|
|
32
|
-
leaveGraceMs:
|
|
32
|
+
leaveGraceMs: p = 0,
|
|
33
33
|
tooltipOffset: l = 4
|
|
34
34
|
}) => {
|
|
35
|
-
const { side: c, align: R } =
|
|
35
|
+
const { side: c, align: R } = q(h), [t, P] = r.useState(!1), [w, z] = r.useState(null), b = r.useRef(null), C = r.useRef(null), g = r.useRef(null), L = r.useRef(null), y = r.useRef(null), E = r.useRef(!1), B = r.useId(), u = (e) => {
|
|
36
36
|
e.current && (window.clearTimeout(e.current), e.current = null);
|
|
37
|
-
},
|
|
38
|
-
|
|
37
|
+
}, k = () => {
|
|
38
|
+
u(g), u(L), u(y);
|
|
39
39
|
};
|
|
40
|
-
|
|
41
|
-
const
|
|
42
|
-
o || t || (
|
|
40
|
+
r.useEffect(() => () => k(), []);
|
|
41
|
+
const F = () => {
|
|
42
|
+
o || t || (u(g), g.current = window.setTimeout(() => P(!0), d));
|
|
43
|
+
}, H = () => {
|
|
44
|
+
const e = b.current;
|
|
45
|
+
if (e && e.matches(":hover") || E.current) {
|
|
46
|
+
T();
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
P(!1);
|
|
50
|
+
}, T = () => {
|
|
51
|
+
t && (u(L), L.current = window.setTimeout(H, m));
|
|
43
52
|
}, _ = () => {
|
|
44
|
-
t && (p(L), L.current = window.setTimeout(() => {
|
|
45
|
-
const e = b.current;
|
|
46
|
-
e && e.matches(":hover") || E.current || P(!1);
|
|
47
|
-
}, m));
|
|
48
|
-
}, z = () => {
|
|
49
53
|
if (t) {
|
|
50
|
-
if (
|
|
51
|
-
|
|
54
|
+
if (u(y), p <= 0) {
|
|
55
|
+
T();
|
|
52
56
|
return;
|
|
53
57
|
}
|
|
54
58
|
y.current = window.setTimeout(() => {
|
|
55
|
-
E.current ||
|
|
56
|
-
},
|
|
59
|
+
E.current || T();
|
|
60
|
+
}, p);
|
|
57
61
|
}
|
|
58
|
-
},
|
|
59
|
-
e == null || e(
|
|
60
|
-
},
|
|
62
|
+
}, x = (e, i) => (f) => {
|
|
63
|
+
e == null || e(f), i == null || i(f);
|
|
64
|
+
}, N = r.cloneElement(n, {
|
|
61
65
|
ref: (e) => {
|
|
62
|
-
const { ref:
|
|
63
|
-
typeof
|
|
66
|
+
const { ref: i } = n;
|
|
67
|
+
typeof i == "function" ? i(e) : i && (i.current = e), b.current = e;
|
|
64
68
|
},
|
|
65
|
-
onPointerEnter:
|
|
66
|
-
|
|
69
|
+
onPointerEnter: x(n.props.onPointerEnter, () => {
|
|
70
|
+
u(L), u(y), t || F();
|
|
71
|
+
}),
|
|
72
|
+
onPointerLeave: x(n.props.onPointerLeave, () => {
|
|
73
|
+
u(g), _();
|
|
67
74
|
}),
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
"aria-describedby": t ? "tooltip-popup" : void 0,
|
|
75
|
+
onFocus: x(n.props.onFocus, F),
|
|
76
|
+
onBlur: x(n.props.onBlur, T),
|
|
77
|
+
"aria-describedby": t ? B : void 0,
|
|
72
78
|
style: { ...n.props.style || {}, outline: "none" }
|
|
73
79
|
});
|
|
74
|
-
return
|
|
75
|
-
o && t && (
|
|
76
|
-
}, [o]),
|
|
80
|
+
return r.useEffect(() => {
|
|
81
|
+
o && t && (k(), P(!1));
|
|
82
|
+
}, [o]), r.useEffect(() => {
|
|
77
83
|
if (!t) return;
|
|
78
|
-
const e = (
|
|
79
|
-
|
|
84
|
+
const e = (i) => {
|
|
85
|
+
i.key === "Escape" && P(!1);
|
|
80
86
|
};
|
|
81
87
|
return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
|
|
82
|
-
}, [t]),
|
|
88
|
+
}, [t]), r.useLayoutEffect(() => {
|
|
83
89
|
if (!t) {
|
|
84
|
-
|
|
90
|
+
z(null);
|
|
85
91
|
return;
|
|
86
92
|
}
|
|
87
|
-
const e = b.current,
|
|
88
|
-
if (!e || !
|
|
89
|
-
const
|
|
90
|
-
|
|
93
|
+
const e = b.current, i = C.current;
|
|
94
|
+
if (!e || !i) return;
|
|
95
|
+
const f = () => {
|
|
96
|
+
z(G(e, i, c, R, l));
|
|
91
97
|
};
|
|
92
|
-
return
|
|
93
|
-
window.removeEventListener("resize",
|
|
98
|
+
return f(), window.addEventListener("resize", f), window.addEventListener("scroll", f, !0), () => {
|
|
99
|
+
window.removeEventListener("resize", f), window.removeEventListener("scroll", f, !0);
|
|
94
100
|
};
|
|
95
|
-
}, [t, c, R, s, l]),
|
|
101
|
+
}, [t, c, R, s, l]), r.useEffect(() => {
|
|
96
102
|
if (!t) return;
|
|
97
|
-
const e = (
|
|
98
|
-
const
|
|
99
|
-
if (!
|
|
100
|
-
const M =
|
|
101
|
-
!
|
|
103
|
+
const e = (i) => {
|
|
104
|
+
const f = b.current, I = C.current;
|
|
105
|
+
if (!f || !I) return;
|
|
106
|
+
const M = i.target;
|
|
107
|
+
!f.contains(M) && !I.contains(M) && (E.current = !1, _());
|
|
102
108
|
};
|
|
103
109
|
return document.addEventListener("pointermove", e), () => document.removeEventListener("pointermove", e);
|
|
104
|
-
}, [t]),
|
|
110
|
+
}, [t]), r.useEffect(() => {
|
|
105
111
|
t || (E.current = !1);
|
|
106
|
-
}, [t]), /* @__PURE__ */
|
|
107
|
-
|
|
108
|
-
t && typeof document < "u" &&
|
|
112
|
+
}, [t]), /* @__PURE__ */ W(X, { children: [
|
|
113
|
+
N,
|
|
114
|
+
t && typeof document < "u" && Y.createPortal(
|
|
109
115
|
/* @__PURE__ */ O(
|
|
110
116
|
"div",
|
|
111
117
|
{
|
|
112
|
-
id:
|
|
113
|
-
ref:
|
|
118
|
+
id: B,
|
|
119
|
+
ref: C,
|
|
114
120
|
role: "tooltip",
|
|
115
121
|
"aria-hidden": !t,
|
|
116
122
|
"data-side": c,
|
|
117
123
|
"data-align": R,
|
|
118
|
-
className: S(j.tooltip,
|
|
124
|
+
className: S(j.tooltip, a),
|
|
119
125
|
style: {
|
|
120
126
|
position: "absolute",
|
|
121
127
|
top: (w == null ? void 0 : w.top) ?? 0,
|
|
@@ -124,10 +130,10 @@ const K = ({
|
|
|
124
130
|
zIndex: 10
|
|
125
131
|
},
|
|
126
132
|
onPointerEnter: () => {
|
|
127
|
-
E.current = !0,
|
|
133
|
+
E.current = !0, u(L), u(y);
|
|
128
134
|
},
|
|
129
135
|
onPointerLeave: () => {
|
|
130
|
-
E.current = !1,
|
|
136
|
+
E.current = !1, _();
|
|
131
137
|
},
|
|
132
138
|
children: /* @__PURE__ */ O("div", { className: S(j.content, v), children: s })
|
|
133
139
|
}
|
|
@@ -137,5 +143,5 @@ const K = ({
|
|
|
137
143
|
] });
|
|
138
144
|
};
|
|
139
145
|
export {
|
|
140
|
-
|
|
146
|
+
U as Tooltip
|
|
141
147
|
};
|