@sybilion/uilib 1.3.30 → 1.3.31

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 (3) hide show
  1. package/dist/esm/components/ui/Tooltip/Tooltip.js +15 -6
  2. package/package.json +1 -1
  3. package/src/components/ui/Tooltip/Tooltip.tsx +21 -7
package/dist/esm/components/ui/Tooltip/Tooltip.js CHANGED
@@ -23,7 +23,6 @@ function getPopperWrapper(contentEl) {
23
23
  return null;
24
24
  return wrapper;
25
25
  }
26
- const OVER_TRIGGER_OFFSET = { left: -12, top: -7 };
27
26
  const TRIGGER_TEXT_STYLE_PROPS = [
28
27
  'font-family',
29
28
  'font-size',
@@ -66,21 +65,31 @@ function clearTriggerTextStyles(contentEl) {
66
65
  contentEl.style.removeProperty(prop);
67
66
  }
68
67
  }
68
+ function parsePx(value) {
69
+ return Number.parseFloat(value) || 0;
70
+ }
69
71
  function applyOverTriggerStyles(contentEl, triggerEl) {
70
72
  const wrapper = getPopperWrapper(contentEl);
71
73
  if (!wrapper)
72
74
  return;
73
75
  const rect = triggerEl.getBoundingClientRect();
74
- const computed = window.getComputedStyle(triggerEl);
76
+ const triggerComputed = window.getComputedStyle(triggerEl);
77
+ const contentComputed = window.getComputedStyle(contentEl);
78
+ const paddingLeft = parsePx(contentComputed.paddingLeft);
79
+ const paddingRight = parsePx(contentComputed.paddingRight);
80
+ const paddingTop = parsePx(contentComputed.paddingTop);
81
+ const borderLeft = parsePx(contentComputed.borderLeftWidth);
82
+ const borderRight = parsePx(contentComputed.borderRightWidth);
83
+ const borderTop = parsePx(contentComputed.borderTopWidth);
75
84
  wrapper.style.setProperty('position', 'fixed', 'important');
76
- wrapper.style.setProperty('left', `${rect.left + OVER_TRIGGER_OFFSET.left}px`, 'important');
77
- wrapper.style.setProperty('top', `${rect.top + OVER_TRIGGER_OFFSET.top}px`, 'important');
85
+ wrapper.style.setProperty('left', `${rect.left - paddingLeft - borderLeft}px`, 'important');
86
+ wrapper.style.setProperty('top', `${rect.top - paddingTop - borderTop}px`, 'important');
78
87
  wrapper.style.setProperty('transform', 'none', 'important');
79
88
  wrapper.style.setProperty('min-width', '0', 'important');
80
- wrapper.style.setProperty('width', `${rect.width}px`, 'important');
89
+ wrapper.style.setProperty('width', `${rect.width + paddingLeft + paddingRight + borderLeft + borderRight}px`, 'important');
81
90
  contentEl.style.width = '100%';
82
91
  contentEl.style.boxSizing = 'border-box';
83
- applyTriggerTextStyles(contentEl, computed);
92
+ applyTriggerTextStyles(contentEl, triggerComputed);
84
93
  }
85
94
  function clearOverTriggerStyles(contentEl) {
86
95
  if (!contentEl)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sybilion/uilib",
3
- "version": "1.3.30",
3
+ "version": "1.3.31",
4
4
  "description": "Sybilion Design System — React UI components (Webpack + Stylus)",
5
5
  "publishConfig": {
6
6
  "access": "public",
package/src/components/ui/Tooltip/Tooltip.tsx CHANGED
@@ -44,8 +44,6 @@ function getPopperWrapper(contentEl: HTMLElement): HTMLElement | null {
44
44
  return wrapper;
45
45
  }
46
46
 
47
- const OVER_TRIGGER_OFFSET = { left: -12, top: -7 };
48
-
49
47
  const TRIGGER_TEXT_STYLE_PROPS = [
50
48
  'font-family',
51
49
  'font-size',
@@ -94,6 +92,10 @@ function clearTriggerTextStyles(contentEl: HTMLElement) {
94
92
  }
95
93
  }
96
94
 
95
+ function parsePx(value: string) {
96
+ return Number.parseFloat(value) || 0;
97
+ }
98
+
97
99
  function applyOverTriggerStyles(
98
100
  contentEl: HTMLElement,
99
101
  triggerEl: HTMLElement,
@@ -102,26 +104,38 @@ function applyOverTriggerStyles(
102
104
  if (!wrapper) return;
103
105
 
104
106
  const rect = triggerEl.getBoundingClientRect();
105
- const computed = window.getComputedStyle(triggerEl);
107
+ const triggerComputed = window.getComputedStyle(triggerEl);
108
+ const contentComputed = window.getComputedStyle(contentEl);
109
+
110
+ const paddingLeft = parsePx(contentComputed.paddingLeft);
111
+ const paddingRight = parsePx(contentComputed.paddingRight);
112
+ const paddingTop = parsePx(contentComputed.paddingTop);
113
+ const borderLeft = parsePx(contentComputed.borderLeftWidth);
114
+ const borderRight = parsePx(contentComputed.borderRightWidth);
115
+ const borderTop = parsePx(contentComputed.borderTopWidth);
106
116
 
107
117
  wrapper.style.setProperty('position', 'fixed', 'important');
108
118
  wrapper.style.setProperty(
109
119
  'left',
110
- `${rect.left + OVER_TRIGGER_OFFSET.left}px`,
120
+ `${rect.left - paddingLeft - borderLeft}px`,
111
121
  'important',
112
122
  );
113
123
  wrapper.style.setProperty(
114
124
  'top',
115
- `${rect.top + OVER_TRIGGER_OFFSET.top}px`,
125
+ `${rect.top - paddingTop - borderTop}px`,
116
126
  'important',
117
127
  );
118
128
  wrapper.style.setProperty('transform', 'none', 'important');
119
129
  wrapper.style.setProperty('min-width', '0', 'important');
120
- wrapper.style.setProperty('width', `${rect.width}px`, 'important');
130
+ wrapper.style.setProperty(
131
+ 'width',
132
+ `${rect.width + paddingLeft + paddingRight + borderLeft + borderRight}px`,
133
+ 'important',
134
+ );
121
135
 
122
136
  contentEl.style.width = '100%';
123
137
  contentEl.style.boxSizing = 'border-box';
124
- applyTriggerTextStyles(contentEl, computed);
138
+ applyTriggerTextStyles(contentEl, triggerComputed);
125
139
  }
126
140
 
127
141
  function clearOverTriggerStyles(contentEl: HTMLElement | null) {