@donkit-ai/design-system 0.3.4 → 0.3.5

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.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/components/Tooltip.jsx +61 -51
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@donkit-ai/design-system",
3
- "version": "0.3.4",
3
+ "version": "0.3.5",
4
4
  "description": "Donkit Design System - minimal design tokens and React components",
5
5
  "type": "module",
6
6
  "main": "src/index.js",
package/src/components/Tooltip.jsx CHANGED
@@ -16,37 +16,42 @@ export function Tooltip({
16
16
 
17
17
  useEffect(() => {
18
18
  if (isVisible && !position && wrapperRef.current && tooltipRef.current) {
19
- const wrapperRect = wrapperRef.current.getBoundingClientRect();
20
- const tooltipRect = tooltipRef.current.getBoundingClientRect();
21
- const viewportHeight = window.innerHeight;
22
- const viewportWidth = window.innerWidth;
23
-
24
- // Calculate available space in each direction
25
- const spaceTop = wrapperRect.top;
26
- const spaceBottom = viewportHeight - wrapperRect.bottom;
27
- const spaceLeft = wrapperRect.left;
28
- const spaceRight = viewportWidth - wrapperRect.right;
29
-
30
- const tooltipHeight = tooltipRect.height;
31
- const tooltipWidth = tooltipRect.width;
32
-
33
- // Prefer top/bottom first, then left/right
34
- if (spaceTop >= tooltipHeight + 8) {
35
- setComputedPosition('top');
36
- } else if (spaceBottom >= tooltipHeight + 8) {
37
- setComputedPosition('bottom');
38
- } else if (spaceRight >= tooltipWidth + 8) {
39
- setComputedPosition('right');
40
- } else if (spaceLeft >= tooltipWidth + 8) {
41
- setComputedPosition('left');
42
- } else {
43
- // Fallback to direction with most space
44
- const maxSpace = Math.max(spaceTop, spaceBottom, spaceLeft, spaceRight);
45
- if (maxSpace === spaceTop) setComputedPosition('top');
46
- else if (maxSpace === spaceBottom) setComputedPosition('bottom');
47
- else if (maxSpace === spaceRight) setComputedPosition('right');
48
- else setComputedPosition('left');
49
- }
19
+ // Wait for browser to render the tooltip before measuring
20
+ requestAnimationFrame(() => {
21
+ if (!wrapperRef.current || !tooltipRef.current) return;
22
+
23
+ const wrapperRect = wrapperRef.current.getBoundingClientRect();
24
+ const tooltipRect = tooltipRef.current.getBoundingClientRect();
25
+ const viewportHeight = window.innerHeight;
26
+ const viewportWidth = window.innerWidth;
27
+
28
+ // Calculate available space in each direction
29
+ const spaceTop = wrapperRect.top;
30
+ const spaceBottom = viewportHeight - wrapperRect.bottom;
31
+ const spaceLeft = wrapperRect.left;
32
+ const spaceRight = viewportWidth - wrapperRect.right;
33
+
34
+ const tooltipHeight = tooltipRect.height;
35
+ const tooltipWidth = tooltipRect.width;
36
+
37
+ // Prefer top/bottom first, then left/right
38
+ if (spaceTop >= tooltipHeight + 8) {
39
+ setComputedPosition('top');
40
+ } else if (spaceBottom >= tooltipHeight + 8) {
41
+ setComputedPosition('bottom');
42
+ } else if (spaceRight >= tooltipWidth + 8) {
43
+ setComputedPosition('right');
44
+ } else if (spaceLeft >= tooltipWidth + 8) {
45
+ setComputedPosition('left');
46
+ } else {
47
+ // Fallback to direction with most space
48
+ const maxSpace = Math.max(spaceTop, spaceBottom, spaceLeft, spaceRight);
49
+ if (maxSpace === spaceTop) setComputedPosition('top');
50
+ else if (maxSpace === spaceBottom) setComputedPosition('bottom');
51
+ else if (maxSpace === spaceRight) setComputedPosition('right');
52
+ else setComputedPosition('left');
53
+ }
54
+ });
50
55
  } else if (position) {
51
56
  setComputedPosition(position);
52
57
  }
@@ -55,28 +60,33 @@ export function Tooltip({
55
60
  // Check viewport boundaries and adjust position
56
61
  useEffect(() => {
57
62
  if (isVisible && tooltipRef.current && wrapperRef.current) {
58
- const tooltipRect = tooltipRef.current.getBoundingClientRect();
59
- const viewportWidth = window.innerWidth;
60
- const PADDING = 8; // minimum distance from viewport edge
61
-
62
- let xOffset = 0;
63
- let arrowShift = 0;
64
-
65
- // For top/bottom positions, check horizontal overflow
66
- if (computedPosition === 'top' || computedPosition === 'bottom') {
67
- // Check if tooltip overflows on the right
68
- if (tooltipRect.right > viewportWidth - PADDING) {
69
- xOffset = viewportWidth - PADDING - tooltipRect.right;
70
- arrowShift = -xOffset; // arrow moves opposite direction
63
+ // Wait for browser to render the tooltip before measuring
64
+ requestAnimationFrame(() => {
65
+ if (!tooltipRef.current || !wrapperRef.current) return;
66
+
67
+ const tooltipRect = tooltipRef.current.getBoundingClientRect();
68
+ const viewportWidth = window.innerWidth;
69
+ const PADDING = 8; // minimum distance from viewport edge
70
+
71
+ let xOffset = 0;
72
+ let arrowShift = 0;
73
+
74
+ // For top/bottom positions, check horizontal overflow
75
+ if (computedPosition === 'top' || computedPosition === 'bottom') {
76
+ // Check if tooltip overflows on the right
77
+ if (tooltipRect.right > viewportWidth - PADDING) {
78
+ xOffset = viewportWidth - PADDING - tooltipRect.right;
79
+ arrowShift = -xOffset; // arrow moves opposite direction
80
+ }
81
+ // Check if tooltip overflows on the left
82
+ else if (tooltipRect.left < PADDING) {
83
+ xOffset = PADDING - tooltipRect.left;
84
+ arrowShift = -xOffset; // arrow moves opposite direction
85
+ }
71
86
  }
72
- // Check if tooltip overflows on the left
73
- else if (tooltipRect.left < PADDING) {
74
- xOffset = PADDING - tooltipRect.left;
75
- arrowShift = -xOffset; // arrow moves opposite direction
76
- }
77
- }
78
87
 
79
- setOffset({ x: xOffset, arrowOffset: arrowShift });
88
+ setOffset({ x: xOffset, arrowOffset: arrowShift });
89
+ });
80
90
  } else {
81
91
  setOffset({ x: 0, arrowOffset: 0 });
82
92
  }