@dust-tt/sparkle 0.2.243 → 0.2.244-rc
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/cjs/index.js +28 -7
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/components/Tooltip.d.ts.map +1 -1
- package/dist/esm/components/Tooltip.js +29 -8
- package/dist/esm/components/Tooltip.js.map +1 -1
- package/dist/sparkle.css +0 -20
- package/package.json +1 -1
- package/src/components/Tooltip.tsx +31 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAI3D,MAAM,WAAW,YAAY;IAC3B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IAC7B,eAAe,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACnC;AAED,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,QAAkB,EAClB,eAAe,GAChB,EAAE,YAAY,qBA4Fd"}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
import { __read } from "tslib";
|
|
2
|
-
import React, { useEffect, useState } from "react";
|
|
2
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
3
3
|
import { classNames } from "../lib/utils";
|
|
4
4
|
export function Tooltip(_a) {
|
|
5
5
|
var children = _a.children, label = _a.label, _b = _a.position, position = _b === void 0 ? "above" : _b, contentChildren = _a.contentChildren;
|
|
6
6
|
var _c = __read(useState(false), 2), isHovered = _c[0], setIsHovered = _c[1];
|
|
7
7
|
var _d = __read(useState(null), 2), timerId = _d[0], setTimerId = _d[1];
|
|
8
8
|
var _e = __read(useState(false), 2), isTouchDevice = _e[0], setIsTouchDevice = _e[1];
|
|
9
|
+
var _f = __read(useState({ top: 0, left: 0 }), 2), tooltipPosition = _f[0], setTooltipPosition = _f[1];
|
|
10
|
+
var triggerRef = useRef(null);
|
|
9
11
|
var handleMouseOver = function () {
|
|
10
12
|
var id = window.setTimeout(function () {
|
|
11
13
|
setIsHovered(true);
|
|
14
|
+
updateTooltipPosition();
|
|
12
15
|
}, 600);
|
|
13
16
|
setTimerId(id);
|
|
14
17
|
};
|
|
@@ -18,6 +21,15 @@ export function Tooltip(_a) {
|
|
|
18
21
|
}
|
|
19
22
|
setIsHovered(false);
|
|
20
23
|
};
|
|
24
|
+
var updateTooltipPosition = function () {
|
|
25
|
+
if (triggerRef.current) {
|
|
26
|
+
var rect = triggerRef.current.getBoundingClientRect();
|
|
27
|
+
setTooltipPosition({
|
|
28
|
+
top: position === "above" ? rect.top - 10 : rect.bottom + 10,
|
|
29
|
+
left: rect.left + rect.width / 2,
|
|
30
|
+
});
|
|
31
|
+
}
|
|
32
|
+
};
|
|
21
33
|
useEffect(function () {
|
|
22
34
|
setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
|
|
23
35
|
return function () {
|
|
@@ -26,20 +38,29 @@ export function Tooltip(_a) {
|
|
|
26
38
|
}
|
|
27
39
|
};
|
|
28
40
|
}, [timerId]);
|
|
41
|
+
useEffect(function () {
|
|
42
|
+
window.addEventListener("scroll", updateTooltipPosition);
|
|
43
|
+
window.addEventListener("resize", updateTooltipPosition);
|
|
44
|
+
return function () {
|
|
45
|
+
window.removeEventListener("scroll", updateTooltipPosition);
|
|
46
|
+
window.removeEventListener("resize", updateTooltipPosition);
|
|
47
|
+
};
|
|
48
|
+
}, []);
|
|
29
49
|
if (isTouchDevice) {
|
|
30
50
|
return React.createElement(React.Fragment, null, children);
|
|
31
51
|
}
|
|
32
|
-
var baseClasses = classNames("s-
|
|
33
|
-
var hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none";
|
|
52
|
+
var baseClasses = classNames("s-fixed s-z-50 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform", "s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark");
|
|
53
|
+
var hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none";
|
|
34
54
|
var visibleClasses = "-s-translate-y-0 s-opacity-100";
|
|
35
55
|
var hiddenOnMobileClasses = "s-hidden sm:s-block";
|
|
36
|
-
var tooltipCenterClasses = "
|
|
37
|
-
var tooltipPositionClasses = position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
|
|
38
|
-
// if tooltip text is too long we need to wrap it
|
|
56
|
+
var tooltipCenterClasses = "-s-translate-x-1/2";
|
|
39
57
|
var labelLength = (label === null || label === void 0 ? void 0 : label.length) || 0;
|
|
40
58
|
var labelClasses = labelLength > 80 ? "s-w-[38em]" : "s-whitespace-nowrap";
|
|
41
|
-
return (React.createElement("div", { onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
|
|
59
|
+
return (React.createElement("div", { ref: triggerRef, onMouseEnter: handleMouseOver, onMouseLeave: handleMouseLeave, className: "s-relative s-inline-block" },
|
|
42
60
|
children,
|
|
43
|
-
React.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses,
|
|
61
|
+
React.createElement("div", { className: classNames("".concat(isHovered ? visibleClasses : hiddenClasses), baseClasses, hiddenOnMobileClasses, tooltipCenterClasses, contentChildren ? "" : labelClasses), style: {
|
|
62
|
+
top: "".concat(tooltipPosition.top, "px"),
|
|
63
|
+
left: "".concat(tooltipPosition.left, "px"),
|
|
64
|
+
}, onAnimationEnd: function () { return setIsHovered(false); } }, contentChildren || label)));
|
|
44
65
|
}
|
|
45
66
|
//# sourceMappingURL=Tooltip.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip.tsx"],"names":[],"mappings":"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"}
|
package/dist/sparkle.css
CHANGED
|
@@ -805,18 +805,10 @@ select {
|
|
|
805
805
|
bottom: 1.5rem;
|
|
806
806
|
}
|
|
807
807
|
|
|
808
|
-
.s-bottom-full {
|
|
809
|
-
bottom: 100%;
|
|
810
|
-
}
|
|
811
|
-
|
|
812
808
|
.s-left-0 {
|
|
813
809
|
left: 0px;
|
|
814
810
|
}
|
|
815
811
|
|
|
816
|
-
.s-left-1\/2 {
|
|
817
|
-
left: 50%;
|
|
818
|
-
}
|
|
819
|
-
|
|
820
812
|
.s-right-0 {
|
|
821
813
|
right: 0px;
|
|
822
814
|
}
|
|
@@ -829,10 +821,6 @@ select {
|
|
|
829
821
|
top: 0px;
|
|
830
822
|
}
|
|
831
823
|
|
|
832
|
-
.s-top-full {
|
|
833
|
-
top: 100%;
|
|
834
|
-
}
|
|
835
|
-
|
|
836
824
|
.s-z-0 {
|
|
837
825
|
z-index: 0;
|
|
838
826
|
}
|
|
@@ -905,10 +893,6 @@ select {
|
|
|
905
893
|
margin-bottom: 0.25rem;
|
|
906
894
|
}
|
|
907
895
|
|
|
908
|
-
.s-mb-2 {
|
|
909
|
-
margin-bottom: 0.5rem;
|
|
910
|
-
}
|
|
911
|
-
|
|
912
896
|
.s-ml-1 {
|
|
913
897
|
margin-left: 0.25rem;
|
|
914
898
|
}
|
|
@@ -949,10 +933,6 @@ select {
|
|
|
949
933
|
margin-top: 4rem;
|
|
950
934
|
}
|
|
951
935
|
|
|
952
|
-
.s-mt-2 {
|
|
953
|
-
margin-top: 0.5rem;
|
|
954
|
-
}
|
|
955
|
-
|
|
956
936
|
.s-mt-4 {
|
|
957
937
|
margin-top: 1rem;
|
|
958
938
|
}
|
package/package.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
|
1
|
+
import React, { useEffect, useRef, useState } from "react";
|
|
2
2
|
|
|
3
3
|
import { classNames } from "@sparkle/lib/utils";
|
|
4
4
|
|
|
@@ -18,10 +18,13 @@ export function Tooltip({
|
|
|
18
18
|
const [isHovered, setIsHovered] = useState(false);
|
|
19
19
|
const [timerId, setTimerId] = useState<number | null>(null);
|
|
20
20
|
const [isTouchDevice, setIsTouchDevice] = useState(false);
|
|
21
|
+
const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
|
|
22
|
+
const triggerRef = useRef<HTMLDivElement>(null);
|
|
21
23
|
|
|
22
24
|
const handleMouseOver = () => {
|
|
23
25
|
const id = window.setTimeout(() => {
|
|
24
26
|
setIsHovered(true);
|
|
27
|
+
updateTooltipPosition();
|
|
25
28
|
}, 600);
|
|
26
29
|
setTimerId(id);
|
|
27
30
|
};
|
|
@@ -33,6 +36,16 @@ export function Tooltip({
|
|
|
33
36
|
setIsHovered(false);
|
|
34
37
|
};
|
|
35
38
|
|
|
39
|
+
const updateTooltipPosition = () => {
|
|
40
|
+
if (triggerRef.current) {
|
|
41
|
+
const rect = triggerRef.current.getBoundingClientRect();
|
|
42
|
+
setTooltipPosition({
|
|
43
|
+
top: position === "above" ? rect.top - 10 : rect.bottom + 10,
|
|
44
|
+
left: rect.left + rect.width / 2,
|
|
45
|
+
});
|
|
46
|
+
}
|
|
47
|
+
};
|
|
48
|
+
|
|
36
49
|
useEffect(() => {
|
|
37
50
|
setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
|
|
38
51
|
return () => {
|
|
@@ -42,27 +55,34 @@ export function Tooltip({
|
|
|
42
55
|
};
|
|
43
56
|
}, [timerId]);
|
|
44
57
|
|
|
58
|
+
useEffect(() => {
|
|
59
|
+
window.addEventListener("scroll", updateTooltipPosition);
|
|
60
|
+
window.addEventListener("resize", updateTooltipPosition);
|
|
61
|
+
return () => {
|
|
62
|
+
window.removeEventListener("scroll", updateTooltipPosition);
|
|
63
|
+
window.removeEventListener("resize", updateTooltipPosition);
|
|
64
|
+
};
|
|
65
|
+
}, []);
|
|
66
|
+
|
|
45
67
|
if (isTouchDevice) {
|
|
46
68
|
return <>{children}</>;
|
|
47
69
|
}
|
|
48
70
|
|
|
49
71
|
const baseClasses = classNames(
|
|
50
|
-
"s-
|
|
72
|
+
"s-fixed s-z-50 s-px-3 s-py-2 s-text-sm s-rounded-xl s-border s-shadow-md s-transition-all s-duration-500 s-ease-out s-transform",
|
|
51
73
|
"s-border-structure-100 dark:s-border-structure-50-dark s-bg-structure-0 dark:s-bg-structure-100-dark s-text-element-700 dark:s-text-element-600-dark"
|
|
52
74
|
);
|
|
53
|
-
const hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none";
|
|
75
|
+
const hiddenClasses = "s-translate-y-2 s-opacity-0 s-pointer-events-none";
|
|
54
76
|
const visibleClasses = "-s-translate-y-0 s-opacity-100";
|
|
55
77
|
const hiddenOnMobileClasses = "s-hidden sm:s-block";
|
|
56
|
-
const tooltipCenterClasses = "
|
|
57
|
-
const tooltipPositionClasses =
|
|
58
|
-
position === "above" ? "s-bottom-full s-mb-2" : "s-top-full s-mt-2";
|
|
78
|
+
const tooltipCenterClasses = "-s-translate-x-1/2";
|
|
59
79
|
|
|
60
|
-
// if tooltip text is too long we need to wrap it
|
|
61
80
|
const labelLength = label?.length || 0;
|
|
62
81
|
const labelClasses = labelLength > 80 ? "s-w-[38em]" : "s-whitespace-nowrap";
|
|
63
82
|
|
|
64
83
|
return (
|
|
65
84
|
<div
|
|
85
|
+
ref={triggerRef}
|
|
66
86
|
onMouseEnter={handleMouseOver}
|
|
67
87
|
onMouseLeave={handleMouseLeave}
|
|
68
88
|
className="s-relative s-inline-block"
|
|
@@ -73,10 +93,13 @@ export function Tooltip({
|
|
|
73
93
|
`${isHovered ? visibleClasses : hiddenClasses}`,
|
|
74
94
|
baseClasses,
|
|
75
95
|
hiddenOnMobileClasses,
|
|
76
|
-
tooltipPositionClasses,
|
|
77
96
|
tooltipCenterClasses,
|
|
78
97
|
contentChildren ? "" : labelClasses
|
|
79
98
|
)}
|
|
99
|
+
style={{
|
|
100
|
+
top: `${tooltipPosition.top}px`,
|
|
101
|
+
left: `${tooltipPosition.left}px`,
|
|
102
|
+
}}
|
|
80
103
|
onAnimationEnd={() => setIsHovered(false)}
|
|
81
104
|
>
|
|
82
105
|
{contentChildren || label}
|