react-tooltip 5.14.0 → 5.15.0-beta.1041.0

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 (20) hide show
  1. package/dist/react-tooltip.cjs +137 -37
  2. package/dist/react-tooltip.cjs.map +1 -1
  3. package/dist/react-tooltip.css +14 -9
  4. package/dist/react-tooltip.d.ts +3 -1
  5. package/dist/react-tooltip.min.cjs +2 -2
  6. package/dist/react-tooltip.min.cjs.map +1 -1
  7. package/dist/react-tooltip.min.css +1 -1
  8. package/dist/react-tooltip.min.mjs +2 -2
  9. package/dist/react-tooltip.min.mjs.map +1 -1
  10. package/dist/react-tooltip.mjs +137 -38
  11. package/dist/react-tooltip.mjs.map +1 -1
  12. package/dist/react-tooltip.umd.js +1043 -943
  13. package/dist/react-tooltip.umd.js.map +1 -1
  14. package/dist/react-tooltip.umd.min.js +2 -2
  15. package/dist/react-tooltip.umd.min.js.map +1 -1
  16. package/package.json +1 -1
  17. package/esbuild.config.dev.mjs +0 -30
  18. package/esbuild.config.prod.mjs +0 -99
  19. package/jest.config.ts +0 -214
  20. package/prebuild.js +0 -33
package/dist/react-tooltip.umd.js CHANGED
@@ -6,956 +6,1056 @@
6
6
  * @license MIT
7
7
  */
8
8
  (function (global, factory) {
9
- typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('@floating-ui/dom')) :
10
- typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', '@floating-ui/dom'], factory) :
11
- (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTooltip = {}, global.React, global.classNames, global.FloatingUIDOM));
9
+ typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('classnames'), require('@floating-ui/dom')) :
10
+ typeof define === 'function' && define.amd ? define(['exports', 'react', 'classnames', '@floating-ui/dom'], factory) :
11
+ (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.ReactTooltip = {}, global.React, global.classNames, global.FloatingUIDOM));
12
12
  })(this, (function (exports, React, classNames, dom) { 'use strict';
13
13
 
14
- function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
14
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
15
15
 
16
- var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
- var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
16
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
+ var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
18
18
 
19
- function styleInject(css, ref) {
20
- if ( ref === void 0 ) ref = {};
21
- var insertAt = ref.insertAt;
22
-
23
- if (!css || typeof document === 'undefined') { return; }
19
+ const REACT_TOOLTIP_STYLES_ID = 'react-tooltip-styles';
20
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, default-param-last
21
+ function injectStyle(css, id = REACT_TOOLTIP_STYLES_ID, ref) {
22
+ if (!ref) {
23
+ // eslint-disable-next-line no-param-reassign
24
+ ref = {};
25
+ }
26
+ const { insertAt } = ref;
27
+ if (!css || typeof document === 'undefined' || document.getElementById(REACT_TOOLTIP_STYLES_ID)) {
28
+ return;
29
+ }
30
+ const head = document.head || document.getElementsByTagName('head')[0];
31
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any
32
+ const style = document.createElement('style');
33
+ style.id = id;
34
+ style.type = 'text/css';
35
+ if (insertAt === 'top') {
36
+ if (head.firstChild) {
37
+ head.insertBefore(style, head.firstChild);
38
+ }
39
+ else {
40
+ head.appendChild(style);
41
+ }
42
+ }
43
+ else {
44
+ head.appendChild(style);
45
+ }
46
+ if (style.styleSheet) {
47
+ style.styleSheet.cssText = css;
48
+ }
49
+ else {
50
+ style.appendChild(document.createTextNode(css));
51
+ }
52
+ }
53
+ function removeStyle(id = REACT_TOOLTIP_STYLES_ID) {
54
+ const style = document.getElementById(id);
55
+ style === null || style === void 0 ? void 0 : style.remove();
56
+ }
24
57
 
25
- var head = document.head || document.getElementsByTagName('head')[0];
26
- var style = document.createElement('style');
27
- style.type = 'text/css';
58
+ /* eslint-disable @typescript-eslint/no-explicit-any */
59
+ /**
60
+ * This function debounce the received function
61
+ * @param { function } func Function to be debounced
62
+ * @param { number } wait Time to wait before execut the function
63
+ * @param { boolean } immediate Param to define if the function will be executed immediately
64
+ */
65
+ const debounce = (func, wait, immediate) => {
66
+ let timeout = null;
67
+ return function debounced(...args) {
68
+ const later = () => {
69
+ timeout = null;
70
+ if (!immediate) {
71
+ func.apply(this, args);
72
+ }
73
+ };
74
+ if (immediate && !timeout) {
75
+ /**
76
+ * there's not need to clear the timeout
77
+ * since we expect it to resolve and set `timeout = null`
78
+ */
79
+ func.apply(this, args);
80
+ timeout = setTimeout(later, wait);
81
+ }
82
+ if (!immediate) {
83
+ if (timeout) {
84
+ clearTimeout(timeout);
85
+ }
86
+ timeout = setTimeout(later, wait);
87
+ }
88
+ };
89
+ };
28
90
 
29
- if (insertAt === 'top') {
30
- if (head.firstChild) {
31
- head.insertBefore(style, head.firstChild);
32
- } else {
33
- head.appendChild(style);
34
- }
35
- } else {
36
- head.appendChild(style);
91
+ const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
92
+ const DEFAULT_CONTEXT_DATA = {
93
+ anchorRefs: new Set(),
94
+ activeAnchor: { current: null },
95
+ attach: () => {
96
+ /* attach anchor element */
97
+ },
98
+ detach: () => {
99
+ /* detach anchor element */
100
+ },
101
+ setActiveAnchor: () => {
102
+ /* set active anchor */
103
+ },
104
+ };
105
+ const DEFAULT_CONTEXT_DATA_WRAPPER = {
106
+ getTooltipData: () => DEFAULT_CONTEXT_DATA,
107
+ };
108
+ const TooltipContext = React.createContext(DEFAULT_CONTEXT_DATA_WRAPPER);
109
+ /**
110
+ * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
111
+ * See https://react-tooltip.com/docs/getting-started
112
+ */
113
+ const TooltipProvider = ({ children }) => {
114
+ const [anchorRefMap, setAnchorRefMap] = React.useState({
115
+ [DEFAULT_TOOLTIP_ID]: new Set(),
116
+ });
117
+ const [activeAnchorMap, setActiveAnchorMap] = React.useState({
118
+ [DEFAULT_TOOLTIP_ID]: { current: null },
119
+ });
120
+ const attach = (tooltipId, ...refs) => {
121
+ setAnchorRefMap((oldMap) => {
122
+ var _a;
123
+ const tooltipRefs = (_a = oldMap[tooltipId]) !== null && _a !== void 0 ? _a : new Set();
124
+ refs.forEach((ref) => tooltipRefs.add(ref));
125
+ // create new object to trigger re-render
126
+ return { ...oldMap, [tooltipId]: new Set(tooltipRefs) };
127
+ });
128
+ };
129
+ const detach = (tooltipId, ...refs) => {
130
+ setAnchorRefMap((oldMap) => {
131
+ const tooltipRefs = oldMap[tooltipId];
132
+ if (!tooltipRefs) {
133
+ // tooltip not found
134
+ // maybe thow error?
135
+ return oldMap;
136
+ }
137
+ refs.forEach((ref) => tooltipRefs.delete(ref));
138
+ // create new object to trigger re-render
139
+ return { ...oldMap };
140
+ });
141
+ };
142
+ const setActiveAnchor = (tooltipId, ref) => {
143
+ setActiveAnchorMap((oldMap) => {
144
+ var _a;
145
+ if (((_a = oldMap[tooltipId]) === null || _a === void 0 ? void 0 : _a.current) === ref.current) {
146
+ return oldMap;
147
+ }
148
+ // create new object to trigger re-render
149
+ return { ...oldMap, [tooltipId]: ref };
150
+ });
151
+ };
152
+ const getTooltipData = React.useCallback((tooltipId = DEFAULT_TOOLTIP_ID) => {
153
+ var _a, _b;
154
+ return ({
155
+ anchorRefs: (_a = anchorRefMap[tooltipId]) !== null && _a !== void 0 ? _a : new Set(),
156
+ activeAnchor: (_b = activeAnchorMap[tooltipId]) !== null && _b !== void 0 ? _b : { current: null },
157
+ attach: (...refs) => attach(tooltipId, ...refs),
158
+ detach: (...refs) => detach(tooltipId, ...refs),
159
+ setActiveAnchor: (ref) => setActiveAnchor(tooltipId, ref),
160
+ });
161
+ }, [anchorRefMap, activeAnchorMap, attach, detach]);
162
+ const context = React.useMemo(() => {
163
+ return {
164
+ getTooltipData,
165
+ };
166
+ }, [getTooltipData]);
167
+ return React__default["default"].createElement(TooltipContext.Provider, { value: context }, children);
168
+ };
169
+ function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
170
+ return React.useContext(TooltipContext).getTooltipData(tooltipId);
37
171
  }
38
172
 
39
- if (style.styleSheet) {
40
- style.styleSheet.cssText = css;
41
- } else {
42
- style.appendChild(document.createTextNode(css));
43
- }
44
- }
45
-
46
- var css_248z$1 = ":root {\n --rt-color-white: #fff;\n --rt-color-dark: #222;\n --rt-color-success: #8dc572;\n --rt-color-error: #be6464;\n --rt-color-warning: #f0ad4e;\n --rt-color-info: #337ab7;\n --rt-opacity: 0.9;\n}\n";
47
- styleInject(css_248z$1);
48
-
49
- /* eslint-disable @typescript-eslint/no-explicit-any */
50
- /**
51
- * This function debounce the received function
52
- * @param { function } func Function to be debounced
53
- * @param { number } wait Time to wait before execut the function
54
- * @param { boolean } immediate Param to define if the function will be executed immediately
55
- */
56
- const debounce = (func, wait, immediate) => {
57
- let timeout = null;
58
- return function debounced(...args) {
59
- const later = () => {
60
- timeout = null;
61
- if (!immediate) {
62
- func.apply(this, args);
63
- }
64
- };
65
- if (immediate && !timeout) {
66
- /**
67
- * there's not need to clear the timeout
68
- * since we expect it to resolve and set `timeout = null`
69
- */
70
- func.apply(this, args);
71
- timeout = setTimeout(later, wait);
72
- }
73
- if (!immediate) {
74
- if (timeout) {
75
- clearTimeout(timeout);
76
- }
77
- timeout = setTimeout(later, wait);
78
- }
79
- };
80
- };
81
-
82
- const DEFAULT_TOOLTIP_ID = 'DEFAULT_TOOLTIP_ID';
83
- const DEFAULT_CONTEXT_DATA = {
84
- anchorRefs: new Set(),
85
- activeAnchor: { current: null },
86
- attach: () => {
87
- /* attach anchor element */
88
- },
89
- detach: () => {
90
- /* detach anchor element */
91
- },
92
- setActiveAnchor: () => {
93
- /* set active anchor */
94
- },
95
- };
96
- const DEFAULT_CONTEXT_DATA_WRAPPER = {
97
- getTooltipData: () => DEFAULT_CONTEXT_DATA,
98
- };
99
- const TooltipContext = React.createContext(DEFAULT_CONTEXT_DATA_WRAPPER);
100
- /**
101
- * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
102
- * See https://react-tooltip.com/docs/getting-started
103
- */
104
- const TooltipProvider = ({ children }) => {
105
- const [anchorRefMap, setAnchorRefMap] = React.useState({
106
- [DEFAULT_TOOLTIP_ID]: new Set(),
107
- });
108
- const [activeAnchorMap, setActiveAnchorMap] = React.useState({
109
- [DEFAULT_TOOLTIP_ID]: { current: null },
110
- });
111
- const attach = (tooltipId, ...refs) => {
112
- setAnchorRefMap((oldMap) => {
113
- var _a;
114
- const tooltipRefs = (_a = oldMap[tooltipId]) !== null && _a !== void 0 ? _a : new Set();
115
- refs.forEach((ref) => tooltipRefs.add(ref));
116
- // create new object to trigger re-render
117
- return { ...oldMap, [tooltipId]: new Set(tooltipRefs) };
118
- });
119
- };
120
- const detach = (tooltipId, ...refs) => {
121
- setAnchorRefMap((oldMap) => {
122
- const tooltipRefs = oldMap[tooltipId];
123
- if (!tooltipRefs) {
124
- // tooltip not found
125
- // maybe thow error?
126
- return oldMap;
127
- }
128
- refs.forEach((ref) => tooltipRefs.delete(ref));
129
- // create new object to trigger re-render
130
- return { ...oldMap };
131
- });
132
- };
133
- const setActiveAnchor = (tooltipId, ref) => {
134
- setActiveAnchorMap((oldMap) => {
135
- var _a;
136
- if (((_a = oldMap[tooltipId]) === null || _a === void 0 ? void 0 : _a.current) === ref.current) {
137
- return oldMap;
138
- }
139
- // create new object to trigger re-render
140
- return { ...oldMap, [tooltipId]: ref };
141
- });
142
- };
143
- const getTooltipData = React.useCallback((tooltipId = DEFAULT_TOOLTIP_ID) => {
144
- var _a, _b;
145
- return ({
146
- anchorRefs: (_a = anchorRefMap[tooltipId]) !== null && _a !== void 0 ? _a : new Set(),
147
- activeAnchor: (_b = activeAnchorMap[tooltipId]) !== null && _b !== void 0 ? _b : { current: null },
148
- attach: (...refs) => attach(tooltipId, ...refs),
149
- detach: (...refs) => detach(tooltipId, ...refs),
150
- setActiveAnchor: (ref) => setActiveAnchor(tooltipId, ref),
151
- });
152
- }, [anchorRefMap, activeAnchorMap, attach, detach]);
153
- const context = React.useMemo(() => {
154
- return {
155
- getTooltipData,
156
- };
157
- }, [getTooltipData]);
158
- return React__default["default"].createElement(TooltipContext.Provider, { value: context }, children);
159
- };
160
- function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
161
- return React.useContext(TooltipContext).getTooltipData(tooltipId);
162
- }
163
-
164
- /**
165
- * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
166
- * See https://react-tooltip.com/docs/getting-started
167
- */
168
- const TooltipWrapper = ({ tooltipId, children, className, place, content, html, variant, offset, wrapper, events, positionStrategy, delayShow, delayHide, }) => {
169
- const { attach, detach } = useTooltip(tooltipId);
170
- const anchorRef = React.useRef(null);
171
- React.useEffect(() => {
172
- attach(anchorRef);
173
- return () => {
174
- detach(anchorRef);
175
- };
176
- }, []);
177
- return (React__default["default"].createElement("span", { ref: anchorRef, className: classNames__default["default"]('react-tooltip-wrapper', className), "data-tooltip-place": place, "data-tooltip-content": content, "data-tooltip-html": html, "data-tooltip-variant": variant, "data-tooltip-offset": offset, "data-tooltip-wrapper": wrapper, "data-tooltip-events": events, "data-tooltip-position-strategy": positionStrategy, "data-tooltip-delay-show": delayShow, "data-tooltip-delay-hide": delayHide }, children));
178
- };
179
-
180
- const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
181
-
182
- const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [dom.offset(Number(offsetValue)), dom.flip(), dom.shift({ padding: 5 })], }) => {
183
- if (!elementReference) {
184
- // elementReference can be null or undefined and we will not compute the position
185
- // eslint-disable-next-line no-console
186
- // console.error('The reference element for tooltip was not defined: ', elementReference)
187
- return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
188
- }
189
- if (tooltipReference === null) {
190
- return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
191
- }
192
- const middleware = middlewares;
193
- if (tooltipArrowReference) {
194
- middleware.push(dom.arrow({ element: tooltipArrowReference, padding: 5 }));
195
- return dom.computePosition(elementReference, tooltipReference, {
196
- placement: place,
197
- strategy,
198
- middleware,
199
- }).then(({ x, y, placement, middlewareData }) => {
200
- var _a, _b;
201
- const styles = { left: `${x}px`, top: `${y}px` };
202
- const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
203
- const staticSide = (_b = {
204
- top: 'bottom',
205
- right: 'left',
206
- bottom: 'top',
207
- left: 'right',
208
- }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
209
- const arrowStyle = {
210
- left: arrowX != null ? `${arrowX}px` : '',
211
- top: arrowY != null ? `${arrowY}px` : '',
212
- right: '',
213
- bottom: '',
214
- [staticSide]: '-4px',
215
- };
216
- return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
217
- });
218
- }
219
- return dom.computePosition(elementReference, tooltipReference, {
220
- placement: 'bottom',
221
- strategy,
222
- middleware,
223
- }).then(({ x, y, placement }) => {
224
- const styles = { left: `${x}px`, top: `${y}px` };
225
- return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement };
226
- });
227
- };
228
-
229
- var css_248z = ".styles-module_tooltip__mnnfp {\n visibility: hidden;\n width: max-content;\n position: absolute;\n top: 0;\n left: 0;\n padding: 8px 16px;\n border-radius: 3px;\n font-size: 90%;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n will-change: opacity, visibility;\n}\n\n.styles-module_fixed__7ciUi {\n position: fixed;\n}\n\n.styles-module_arrow__K0L3T {\n position: absolute;\n background: inherit;\n width: 8px;\n height: 8px;\n transform: rotate(45deg);\n}\n\n.styles-module_noArrow__T8y2L {\n display: none;\n}\n\n.styles-module_clickable__Bv9o7 {\n pointer-events: auto;\n}\n\n.styles-module_show__2NboJ {\n visibility: visible;\n opacity: var(--rt-opacity);\n}\n\n/** Types variant **/\n.styles-module_dark__xNqje {\n background: var(--rt-color-dark);\n color: var(--rt-color-white);\n}\n\n.styles-module_light__Z6W-X {\n background-color: var(--rt-color-white);\n color: var(--rt-color-dark);\n}\n\n.styles-module_success__A2AKt {\n background-color: var(--rt-color-success);\n color: var(--rt-color-white);\n}\n\n.styles-module_warning__SCK0X {\n background-color: var(--rt-color-warning);\n color: var(--rt-color-white);\n}\n\n.styles-module_error__JvumD {\n background-color: var(--rt-color-error);\n color: var(--rt-color-white);\n}\n\n.styles-module_info__BWdHW {\n background-color: var(--rt-color-info);\n color: var(--rt-color-white);\n}\n";
230
- var styles = {"tooltip":"styles-module_tooltip__mnnfp","fixed":"styles-module_fixed__7ciUi","arrow":"styles-module_arrow__K0L3T","noArrow":"styles-module_noArrow__T8y2L","clickable":"styles-module_clickable__Bv9o7","show":"styles-module_show__2NboJ","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
231
- styleInject(css_248z);
232
-
233
- const Tooltip = ({
234
- // props
235
- id, className, classNameArrow, variant = 'dark', anchorId, anchorSelect, place = 'top', offset = 10, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, style: externalStyles, position, afterShow, afterHide,
236
- // props handled by controller
237
- content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, }) => {
238
- const tooltipRef = React.useRef(null);
239
- const tooltipArrowRef = React.useRef(null);
240
- const tooltipShowDelayTimerRef = React.useRef(null);
241
- const tooltipHideDelayTimerRef = React.useRef(null);
242
- const [actualPlacement, setActualPlacement] = React.useState(place);
243
- const [inlineStyles, setInlineStyles] = React.useState({});
244
- const [inlineArrowStyles, setInlineArrowStyles] = React.useState({});
245
- const [show, setShow] = React.useState(false);
246
- const [rendered, setRendered] = React.useState(false);
247
- const wasShowing = React.useRef(false);
248
- const lastFloatPosition = React.useRef(null);
249
- /**
250
- * @todo Remove this in a future version (provider/wrapper method is deprecated)
251
- */
252
- const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id);
253
- const hoveringTooltip = React.useRef(false);
254
- const [anchorsBySelect, setAnchorsBySelect] = React.useState([]);
255
- const mounted = React.useRef(false);
256
- const shouldOpenOnClick = openOnClick || events.includes('click');
257
- /**
258
- * useLayoutEffect runs before useEffect,
259
- * but should be used carefully because of caveats
260
- * https://beta.reactjs.org/reference/react/useLayoutEffect#caveats
261
- */
262
- useIsomorphicLayoutEffect(() => {
263
- mounted.current = true;
264
- return () => {
265
- mounted.current = false;
266
- };
267
- }, []);
268
- React.useEffect(() => {
269
- if (!show) {
270
- /**
271
- * this fixes weird behavior when switching between two anchor elements very quickly
272
- * remove the timeout and switch quickly between two adjancent anchor elements to see it
273
- *
274
- * in practice, this means the tooltip is not immediately removed from the DOM on hide
275
- */
276
- const timeout = setTimeout(() => {
277
- setRendered(false);
278
- }, 150);
279
- return () => {
280
- clearTimeout(timeout);
281
- };
282
- }
283
- return () => null;
284
- }, [show]);
285
- const handleShow = (value) => {
286
- if (!mounted.current) {
287
- return;
288
- }
289
- if (value) {
290
- setRendered(true);
291
- }
292
- /**
293
- * wait for the component to render and calculate position
294
- * before actually showing
295
- */
296
- setTimeout(() => {
297
- if (!mounted.current) {
298
- return;
299
- }
300
- setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(value);
301
- if (isOpen === undefined) {
302
- setShow(value);
303
- }
304
- }, 10);
305
- };
306
- /**
307
- * this replicates the effect from `handleShow()`
308
- * when `isOpen` is changed from outside
309
- */
310
- React.useEffect(() => {
311
- if (isOpen === undefined) {
312
- return () => null;
313
- }
314
- if (isOpen) {
315
- setRendered(true);
316
- }
317
- const timeout = setTimeout(() => {
318
- setShow(isOpen);
319
- }, 10);
320
- return () => {
321
- clearTimeout(timeout);
322
- };
323
- }, [isOpen]);
324
- React.useEffect(() => {
325
- if (show === wasShowing.current) {
326
- return;
327
- }
328
- wasShowing.current = show;
329
- if (show) {
330
- afterShow === null || afterShow === void 0 ? void 0 : afterShow();
331
- }
332
- else {
333
- afterHide === null || afterHide === void 0 ? void 0 : afterHide();
334
- }
335
- }, [show]);
336
- const handleShowTooltipDelayed = () => {
337
- if (tooltipShowDelayTimerRef.current) {
338
- clearTimeout(tooltipShowDelayTimerRef.current);
339
- }
340
- tooltipShowDelayTimerRef.current = setTimeout(() => {
341
- handleShow(true);
342
- }, delayShow);
343
- };
344
- const handleHideTooltipDelayed = (delay = delayHide) => {
345
- if (tooltipHideDelayTimerRef.current) {
346
- clearTimeout(tooltipHideDelayTimerRef.current);
347
- }
348
- tooltipHideDelayTimerRef.current = setTimeout(() => {
349
- if (hoveringTooltip.current) {
350
- return;
351
- }
352
- handleShow(false);
353
- }, delay);
354
- };
355
- const handleShowTooltip = (event) => {
356
- var _a;
357
- if (!event) {
358
- return;
359
- }
360
- const target = ((_a = event.currentTarget) !== null && _a !== void 0 ? _a : event.target);
361
- if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
362
- /**
363
- * this happens when the target is removed from the DOM
364
- * at the same time the tooltip gets triggered
365
- */
366
- setActiveAnchor(null);
367
- setProviderActiveAnchor({ current: null });
368
- return;
369
- }
370
- if (delayShow) {
371
- handleShowTooltipDelayed();
372
- }
373
- else {
374
- handleShow(true);
375
- }
376
- setActiveAnchor(target);
377
- setProviderActiveAnchor({ current: target });
378
- if (tooltipHideDelayTimerRef.current) {
379
- clearTimeout(tooltipHideDelayTimerRef.current);
380
- }
381
- };
382
- const handleHideTooltip = () => {
383
- if (clickable) {
384
- // allow time for the mouse to reach the tooltip, in case there's a gap
385
- handleHideTooltipDelayed(delayHide || 100);
386
- }
387
- else if (delayHide) {
388
- handleHideTooltipDelayed();
389
- }
390
- else {
391
- handleShow(false);
392
- }
393
- if (tooltipShowDelayTimerRef.current) {
394
- clearTimeout(tooltipShowDelayTimerRef.current);
395
- }
396
- };
397
- const handleTooltipPosition = ({ x, y }) => {
398
- const virtualElement = {
399
- getBoundingClientRect() {
400
- return {
401
- x,
402
- y,
403
- width: 0,
404
- height: 0,
405
- top: y,
406
- left: x,
407
- right: x,
408
- bottom: y,
409
- };
410
- },
411
- };
412
- computeTooltipPosition({
413
- place,
414
- offset,
415
- elementReference: virtualElement,
416
- tooltipReference: tooltipRef.current,
417
- tooltipArrowReference: tooltipArrowRef.current,
418
- strategy: positionStrategy,
419
- middlewares,
420
- }).then((computedStylesData) => {
421
- if (Object.keys(computedStylesData.tooltipStyles).length) {
422
- setInlineStyles(computedStylesData.tooltipStyles);
423
- }
424
- if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
425
- setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
426
- }
427
- setActualPlacement(computedStylesData.place);
428
- });
429
- };
430
- const handleMouseMove = (event) => {
431
- if (!event) {
432
- return;
433
- }
434
- const mouseEvent = event;
435
- const mousePosition = {
436
- x: mouseEvent.clientX,
437
- y: mouseEvent.clientY,
438
- };
439
- handleTooltipPosition(mousePosition);
440
- lastFloatPosition.current = mousePosition;
441
- };
442
- const handleClickTooltipAnchor = (event) => {
443
- handleShowTooltip(event);
444
- if (delayHide) {
445
- handleHideTooltipDelayed();
446
- }
447
- };
448
- const handleClickOutsideAnchors = (event) => {
449
- var _a;
450
- const anchorById = document.querySelector(`[id='${anchorId}']`);
451
- const anchors = [anchorById, ...anchorsBySelect];
452
- if (anchors.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(event.target))) {
453
- return;
454
- }
455
- if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
456
- return;
457
- }
458
- handleShow(false);
459
- };
460
- const handleEsc = (event) => {
461
- if (event.key !== 'Escape') {
462
- return;
463
- }
464
- handleShow(false);
465
- };
466
- // debounce handler to prevent call twice when
467
- // mouse enter and focus events being triggered toggether
468
- const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
469
- const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true);
470
- React.useEffect(() => {
471
- var _a, _b;
472
- const elementRefs = new Set(anchorRefs);
473
- anchorsBySelect.forEach((anchor) => {
474
- elementRefs.add({ current: anchor });
475
- });
476
- const anchorById = document.querySelector(`[id='${anchorId}']`);
477
- if (anchorById) {
478
- elementRefs.add({ current: anchorById });
479
- }
480
- if (closeOnScroll) {
481
- window.addEventListener('scroll', debouncedHandleHideTooltip);
482
- }
483
- if (closeOnResize) {
484
- window.addEventListener('resize', debouncedHandleHideTooltip);
485
- }
486
- if (closeOnEsc) {
487
- window.addEventListener('keydown', handleEsc);
488
- }
489
- const enabledEvents = [];
490
- if (shouldOpenOnClick) {
491
- window.addEventListener('click', handleClickOutsideAnchors);
492
- enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor });
493
- }
494
- else {
495
- enabledEvents.push({ event: 'mouseenter', listener: debouncedHandleShowTooltip }, { event: 'mouseleave', listener: debouncedHandleHideTooltip }, { event: 'focus', listener: debouncedHandleShowTooltip }, { event: 'blur', listener: debouncedHandleHideTooltip });
496
- if (float) {
497
- enabledEvents.push({
498
- event: 'mousemove',
499
- listener: handleMouseMove,
500
- });
501
- }
502
- }
503
- const handleMouseEnterTooltip = () => {
504
- hoveringTooltip.current = true;
505
- };
506
- const handleMouseLeaveTooltip = () => {
507
- hoveringTooltip.current = false;
508
- handleHideTooltip();
509
- };
510
- if (clickable && !shouldOpenOnClick) {
511
- (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', handleMouseEnterTooltip);
512
- (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', handleMouseLeaveTooltip);
513
- }
514
- enabledEvents.forEach(({ event, listener }) => {
515
- elementRefs.forEach((ref) => {
516
- var _a;
517
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, listener);
518
- });
519
- });
520
- return () => {
521
- var _a, _b;
522
- if (closeOnScroll) {
523
- window.removeEventListener('scroll', debouncedHandleHideTooltip);
524
- }
525
- if (closeOnResize) {
526
- window.removeEventListener('resize', debouncedHandleHideTooltip);
527
- }
528
- if (shouldOpenOnClick) {
529
- window.removeEventListener('click', handleClickOutsideAnchors);
530
- }
531
- if (closeOnEsc) {
532
- window.removeEventListener('keydown', handleEsc);
533
- }
534
- if (clickable && !shouldOpenOnClick) {
535
- (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', handleMouseEnterTooltip);
536
- (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', handleMouseLeaveTooltip);
537
- }
538
- enabledEvents.forEach(({ event, listener }) => {
539
- elementRefs.forEach((ref) => {
540
- var _a;
541
- (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, listener);
542
- });
543
- });
544
- };
545
- /**
546
- * rendered is also a dependency to ensure anchor observers are re-registered
547
- * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
548
- */
549
- }, [rendered, anchorRefs, anchorsBySelect, closeOnEsc, events]);
550
- React.useEffect(() => {
551
- let selector = anchorSelect !== null && anchorSelect !== void 0 ? anchorSelect : '';
552
- if (!selector && id) {
553
- selector = `[data-tooltip-id='${id}']`;
554
- }
555
- const documentObserverCallback = (mutationList) => {
556
- const newAnchors = [];
557
- mutationList.forEach((mutation) => {
558
- if (mutation.type === 'attributes' && mutation.attributeName === 'data-tooltip-id') {
559
- const newId = mutation.target.getAttribute('data-tooltip-id');
560
- if (newId === id) {
561
- newAnchors.push(mutation.target);
562
- }
563
- }
564
- if (mutation.type !== 'childList') {
565
- return;
566
- }
567
- if (activeAnchor) {
568
- [...mutation.removedNodes].some((node) => {
569
- var _a;
570
- if ((_a = node === null || node === void 0 ? void 0 : node.contains) === null || _a === void 0 ? void 0 : _a.call(node, activeAnchor)) {
571
- setRendered(false);
572
- handleShow(false);
573
- setActiveAnchor(null);
574
- return true;
575
- }
576
- return false;
577
- });
578
- }
579
- if (!selector) {
580
- return;
581
- }
582
- try {
583
- const elements = [...mutation.addedNodes].filter((node) => node.nodeType === 1);
584
- newAnchors.push(
585
- // the element itself is an anchor
586
- ...elements.filter((element) => element.matches(selector)));
587
- newAnchors.push(
588
- // the element has children which are anchors
589
- ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
590
- }
591
- catch (_a) {
592
- /**
593
- * invalid CSS selector.
594
- * already warned on tooltip controller
595
- */
596
- }
597
- });
598
- if (newAnchors.length) {
599
- setAnchorsBySelect((anchors) => [...anchors, ...newAnchors]);
600
- }
601
- };
602
- const documentObserver = new MutationObserver(documentObserverCallback);
603
- // watch for anchor being removed from the DOM
604
- documentObserver.observe(document.body, {
605
- childList: true,
606
- subtree: true,
607
- attributes: true,
608
- attributeFilter: ['data-tooltip-id'],
609
- });
610
- return () => {
611
- documentObserver.disconnect();
612
- };
613
- }, [id, anchorSelect, activeAnchor]);
614
- const updateTooltipPosition = () => {
615
- if (position) {
616
- // if `position` is set, override regular and `float` positioning
617
- handleTooltipPosition(position);
618
- return;
619
- }
620
- if (float) {
621
- if (lastFloatPosition.current) {
622
- /*
623
- Without this, changes to `content`, `place`, `offset`, ..., will only
624
- trigger a position calculation after a `mousemove` event.
625
-
626
- To see why this matters, comment this line, run `yarn dev` and click the
627
- "Hover me!" anchor.
628
- */
629
- handleTooltipPosition(lastFloatPosition.current);
630
- }
631
- // if `float` is set, override regular positioning
632
- return;
633
- }
634
- computeTooltipPosition({
635
- place,
636
- offset,
637
- elementReference: activeAnchor,
638
- tooltipReference: tooltipRef.current,
639
- tooltipArrowReference: tooltipArrowRef.current,
640
- strategy: positionStrategy,
641
- middlewares,
642
- }).then((computedStylesData) => {
643
- if (!mounted.current) {
644
- // invalidate computed positions after remount
645
- return;
646
- }
647
- if (Object.keys(computedStylesData.tooltipStyles).length) {
648
- setInlineStyles(computedStylesData.tooltipStyles);
649
- }
650
- if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
651
- setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
652
- }
653
- setActualPlacement(computedStylesData.place);
654
- });
655
- };
656
- React.useEffect(() => {
657
- updateTooltipPosition();
658
- }, [show, activeAnchor, content, externalStyles, place, offset, positionStrategy, position]);
659
- React.useEffect(() => {
660
- if (!(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current)) {
661
- return () => null;
662
- }
663
- const contentObserver = new ResizeObserver(() => {
664
- updateTooltipPosition();
665
- });
666
- contentObserver.observe(contentWrapperRef.current);
667
- return () => {
668
- contentObserver.disconnect();
669
- };
670
- }, [content, contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current]);
671
- React.useEffect(() => {
672
- var _a;
673
- const anchorById = document.querySelector(`[id='${anchorId}']`);
674
- const anchors = [...anchorsBySelect, anchorById];
675
- if (!activeAnchor || !anchors.includes(activeAnchor)) {
676
- /**
677
- * if there is no active anchor,
678
- * or if the current active anchor is not amongst the allowed ones,
679
- * reset it
680
- */
681
- setActiveAnchor((_a = anchorsBySelect[0]) !== null && _a !== void 0 ? _a : anchorById);
682
- }
683
- }, [anchorId, anchorsBySelect, activeAnchor]);
684
- React.useEffect(() => {
685
- return () => {
686
- if (tooltipShowDelayTimerRef.current) {
687
- clearTimeout(tooltipShowDelayTimerRef.current);
688
- }
689
- if (tooltipHideDelayTimerRef.current) {
690
- clearTimeout(tooltipHideDelayTimerRef.current);
691
- }
692
- };
693
- }, []);
694
- React.useEffect(() => {
695
- let selector = anchorSelect;
696
- if (!selector && id) {
697
- selector = `[data-tooltip-id='${id}']`;
698
- }
699
- if (!selector) {
700
- return;
701
- }
702
- try {
703
- const anchors = Array.from(document.querySelectorAll(selector));
704
- setAnchorsBySelect(anchors);
705
- }
706
- catch (_a) {
707
- // warning was already issued in the controller
708
- setAnchorsBySelect([]);
709
- }
710
- }, [id, anchorSelect]);
711
- const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0;
712
- return rendered ? (React__default["default"].createElement(WrapperElement, { id: id, role: "tooltip", className: classNames__default["default"]('react-tooltip', styles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
713
- [styles['show']]: canShow,
714
- [styles['fixed']]: positionStrategy === 'fixed',
715
- [styles['clickable']]: clickable,
716
- }), style: { ...externalStyles, ...inlineStyles }, ref: tooltipRef },
717
- content,
718
- React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', styles['arrow'], classNameArrow, {
719
- /**
720
- * changed from dash `no-arrow` to camelcase because of:
721
- * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
722
- */
723
- [styles['noArrow']]: noArrow,
724
- }), style: inlineArrowStyles, ref: tooltipArrowRef }))) : null;
725
- };
726
-
727
- /* eslint-disable react/no-danger */
728
- const TooltipContent = ({ content }) => {
729
- return React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: content } });
730
- };
731
-
732
- const TooltipController = ({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, style, position, isOpen, setIsOpen, afterShow, afterHide, }) => {
733
- const [tooltipContent, setTooltipContent] = React.useState(content);
734
- const [tooltipHtml, setTooltipHtml] = React.useState(html);
735
- const [tooltipPlace, setTooltipPlace] = React.useState(place);
736
- const [tooltipVariant, setTooltipVariant] = React.useState(variant);
737
- const [tooltipOffset, setTooltipOffset] = React.useState(offset);
738
- const [tooltipDelayShow, setTooltipDelayShow] = React.useState(delayShow);
739
- const [tooltipDelayHide, setTooltipDelayHide] = React.useState(delayHide);
740
- const [tooltipFloat, setTooltipFloat] = React.useState(float);
741
- const [tooltipHidden, setTooltipHidden] = React.useState(hidden);
742
- const [tooltipWrapper, setTooltipWrapper] = React.useState(wrapper);
743
- const [tooltipEvents, setTooltipEvents] = React.useState(events);
744
- const [tooltipPositionStrategy, setTooltipPositionStrategy] = React.useState(positionStrategy);
745
- const [activeAnchor, setActiveAnchor] = React.useState(null);
746
- /**
747
- * @todo Remove this in a future version (provider/wrapper method is deprecated)
748
- */
749
- const { anchorRefs, activeAnchor: providerActiveAnchor } = useTooltip(id);
750
- const getDataAttributesFromAnchorElement = (elementReference) => {
751
- const dataAttributes = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttributeNames().reduce((acc, name) => {
752
- var _a;
753
- if (name.startsWith('data-tooltip-')) {
754
- const parsedAttribute = name.replace(/^data-tooltip-/, '');
755
- acc[parsedAttribute] = (_a = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttribute(name)) !== null && _a !== void 0 ? _a : null;
756
- }
757
- return acc;
758
- }, {});
759
- return dataAttributes;
760
- };
761
- const applyAllDataAttributesFromAnchorElement = (dataAttributes) => {
762
- const handleDataAttributes = {
763
- place: (value) => {
764
- var _a;
765
- setTooltipPlace((_a = value) !== null && _a !== void 0 ? _a : place);
766
- },
767
- content: (value) => {
768
- setTooltipContent(value !== null && value !== void 0 ? value : content);
769
- },
770
- html: (value) => {
771
- setTooltipHtml(value !== null && value !== void 0 ? value : html);
772
- },
773
- variant: (value) => {
774
- var _a;
775
- setTooltipVariant((_a = value) !== null && _a !== void 0 ? _a : variant);
776
- },
777
- offset: (value) => {
778
- setTooltipOffset(value === null ? offset : Number(value));
779
- },
780
- wrapper: (value) => {
781
- var _a;
782
- setTooltipWrapper((_a = value) !== null && _a !== void 0 ? _a : wrapper);
783
- },
784
- events: (value) => {
785
- const parsed = value === null || value === void 0 ? void 0 : value.split(' ');
786
- setTooltipEvents(parsed !== null && parsed !== void 0 ? parsed : events);
787
- },
788
- 'position-strategy': (value) => {
789
- var _a;
790
- setTooltipPositionStrategy((_a = value) !== null && _a !== void 0 ? _a : positionStrategy);
791
- },
792
- 'delay-show': (value) => {
793
- setTooltipDelayShow(value === null ? delayShow : Number(value));
794
- },
795
- 'delay-hide': (value) => {
796
- setTooltipDelayHide(value === null ? delayHide : Number(value));
797
- },
798
- float: (value) => {
799
- setTooltipFloat(value === null ? float : value === 'true');
800
- },
801
- hidden: (value) => {
802
- setTooltipHidden(value === null ? hidden : value === 'true');
803
- },
804
- };
805
- // reset unset data attributes to default values
806
- // without this, data attributes from the last active anchor will still be used
807
- Object.values(handleDataAttributes).forEach((handler) => handler(null));
808
- Object.entries(dataAttributes).forEach(([key, value]) => {
809
- var _a;
810
- (_a = handleDataAttributes[key]) === null || _a === void 0 ? void 0 : _a.call(handleDataAttributes, value);
811
- });
812
- };
813
- React.useEffect(() => {
814
- setTooltipContent(content);
815
- }, [content]);
816
- React.useEffect(() => {
817
- setTooltipHtml(html);
818
- }, [html]);
819
- React.useEffect(() => {
820
- setTooltipPlace(place);
821
- }, [place]);
822
- React.useEffect(() => {
823
- setTooltipVariant(variant);
824
- }, [variant]);
825
- React.useEffect(() => {
826
- setTooltipOffset(offset);
827
- }, [offset]);
828
- React.useEffect(() => {
829
- setTooltipDelayShow(delayShow);
830
- }, [delayShow]);
831
- React.useEffect(() => {
832
- setTooltipDelayHide(delayHide);
833
- }, [delayHide]);
834
- React.useEffect(() => {
835
- setTooltipFloat(float);
836
- }, [float]);
837
- React.useEffect(() => {
838
- setTooltipHidden(hidden);
839
- }, [hidden]);
840
- React.useEffect(() => {
841
- setTooltipPositionStrategy(positionStrategy);
842
- }, [positionStrategy]);
843
- React.useEffect(() => {
844
- var _a;
845
- const elementRefs = new Set(anchorRefs);
846
- let selector = anchorSelect;
847
- if (!selector && id) {
848
- selector = `[data-tooltip-id='${id}']`;
849
- }
850
- if (selector) {
851
- try {
852
- const anchorsBySelect = document.querySelectorAll(selector);
853
- anchorsBySelect.forEach((anchor) => {
854
- elementRefs.add({ current: anchor });
855
- });
856
- }
857
- catch (_b) {
858
- {
859
- // eslint-disable-next-line no-console
860
- console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
861
- }
862
- }
863
- }
864
- const anchorById = document.querySelector(`[id='${anchorId}']`);
865
- if (anchorById) {
866
- elementRefs.add({ current: anchorById });
867
- }
868
- if (!elementRefs.size) {
869
- return () => null;
870
- }
871
- const anchorElement = (_a = activeAnchor !== null && activeAnchor !== void 0 ? activeAnchor : anchorById) !== null && _a !== void 0 ? _a : providerActiveAnchor.current;
872
- const observerCallback = (mutationList) => {
873
- mutationList.forEach((mutation) => {
874
- var _a;
875
- if (!anchorElement ||
876
- mutation.type !== 'attributes' ||
877
- !((_a = mutation.attributeName) === null || _a === void 0 ? void 0 : _a.startsWith('data-tooltip-'))) {
878
- return;
879
- }
880
- // make sure to get all set attributes, since all unset attributes are reset
881
- const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
882
- applyAllDataAttributesFromAnchorElement(dataAttributes);
883
- });
884
- };
885
- // Create an observer instance linked to the callback function
886
- const observer = new MutationObserver(observerCallback);
887
- // do not check for subtree and childrens, we only want to know attribute changes
888
- // to stay watching `data-attributes-*` from anchor element
889
- const observerConfig = { attributes: true, childList: false, subtree: false };
890
- if (anchorElement) {
891
- const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
892
- applyAllDataAttributesFromAnchorElement(dataAttributes);
893
- // Start observing the target node for configured mutations
894
- observer.observe(anchorElement, observerConfig);
895
- }
896
- return () => {
897
- // Remove the observer when the tooltip is destroyed
898
- observer.disconnect();
899
- };
900
- }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
901
- /**
902
- * content priority: children < render or content < html
903
- * children should be lower priority so that it can be used as the "default" content
904
- */
905
- let renderedContent = children;
906
- const contentWrapperRef = React.useRef(null);
907
- if (render) {
908
- const rendered = render({ content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : null, activeAnchor });
909
- renderedContent = rendered ? (React__default["default"].createElement("div", { ref: contentWrapperRef, className: "react-tooltip-content-wrapper" }, rendered)) : null;
910
- }
911
- else if (tooltipContent) {
912
- renderedContent = tooltipContent;
913
- }
914
- if (tooltipHtml) {
915
- renderedContent = React__default["default"].createElement(TooltipContent, { content: tooltipHtml });
916
- }
917
- const props = {
918
- id,
919
- anchorId,
920
- anchorSelect,
921
- className,
922
- classNameArrow,
923
- content: renderedContent,
924
- contentWrapperRef,
925
- place: tooltipPlace,
926
- variant: tooltipVariant,
927
- offset: tooltipOffset,
928
- wrapper: tooltipWrapper,
929
- events: tooltipEvents,
930
- openOnClick,
931
- positionStrategy: tooltipPositionStrategy,
932
- middlewares,
933
- delayShow: tooltipDelayShow,
934
- delayHide: tooltipDelayHide,
935
- float: tooltipFloat,
936
- hidden: tooltipHidden,
937
- noArrow,
938
- clickable,
939
- closeOnEsc,
940
- closeOnScroll,
941
- closeOnResize,
942
- style,
943
- position,
944
- isOpen,
945
- setIsOpen,
946
- afterShow,
947
- afterHide,
948
- activeAnchor,
949
- setActiveAnchor: (anchor) => setActiveAnchor(anchor),
950
- };
951
- return React__default["default"].createElement(Tooltip, { ...props });
952
- };
953
-
954
- exports.Tooltip = TooltipController;
955
- exports.TooltipProvider = TooltipProvider;
956
- exports.TooltipWrapper = TooltipWrapper;
957
-
958
- Object.defineProperty(exports, '__esModule', { value: true });
173
+ /**
174
+ * @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
175
+ * See https://react-tooltip.com/docs/getting-started
176
+ */
177
+ const TooltipWrapper = ({ tooltipId, children, className, place, content, html, variant, offset, wrapper, events, positionStrategy, delayShow, delayHide, }) => {
178
+ const { attach, detach } = useTooltip(tooltipId);
179
+ const anchorRef = React.useRef(null);
180
+ React.useEffect(() => {
181
+ attach(anchorRef);
182
+ return () => {
183
+ detach(anchorRef);
184
+ };
185
+ }, []);
186
+ return (React__default["default"].createElement("span", { ref: anchorRef, className: classNames__default["default"]('react-tooltip-wrapper', className), "data-tooltip-place": place, "data-tooltip-content": content, "data-tooltip-html": html, "data-tooltip-variant": variant, "data-tooltip-offset": offset, "data-tooltip-wrapper": wrapper, "data-tooltip-events": events, "data-tooltip-position-strategy": positionStrategy, "data-tooltip-delay-show": delayShow, "data-tooltip-delay-hide": delayHide }, children));
187
+ };
188
+
189
+ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
190
+
191
+ const computeTooltipPosition = async ({ elementReference = null, tooltipReference = null, tooltipArrowReference = null, place = 'top', offset: offsetValue = 10, strategy = 'absolute', middlewares = [dom.offset(Number(offsetValue)), dom.flip(), dom.shift({ padding: 5 })], }) => {
192
+ if (!elementReference) {
193
+ // elementReference can be null or undefined and we will not compute the position
194
+ // eslint-disable-next-line no-console
195
+ // console.error('The reference element for tooltip was not defined: ', elementReference)
196
+ return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
197
+ }
198
+ if (tooltipReference === null) {
199
+ return { tooltipStyles: {}, tooltipArrowStyles: {}, place };
200
+ }
201
+ const middleware = middlewares;
202
+ if (tooltipArrowReference) {
203
+ middleware.push(dom.arrow({ element: tooltipArrowReference, padding: 5 }));
204
+ return dom.computePosition(elementReference, tooltipReference, {
205
+ placement: place,
206
+ strategy,
207
+ middleware,
208
+ }).then(({ x, y, placement, middlewareData }) => {
209
+ var _a, _b;
210
+ const styles = { left: `${x}px`, top: `${y}px` };
211
+ const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
212
+ const staticSide = (_b = {
213
+ top: 'bottom',
214
+ right: 'left',
215
+ bottom: 'top',
216
+ left: 'right',
217
+ }[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
218
+ const arrowStyle = {
219
+ left: arrowX != null ? `${arrowX}px` : '',
220
+ top: arrowY != null ? `${arrowY}px` : '',
221
+ right: '',
222
+ bottom: '',
223
+ [staticSide]: '-4px',
224
+ };
225
+ return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle, place: placement };
226
+ });
227
+ }
228
+ return dom.computePosition(elementReference, tooltipReference, {
229
+ placement: 'bottom',
230
+ strategy,
231
+ middleware,
232
+ }).then(({ x, y, placement }) => {
233
+ const styles = { left: `${x}px`, top: `${y}px` };
234
+ return { tooltipStyles: styles, tooltipArrowStyles: {}, place: placement };
235
+ });
236
+ };
237
+
238
+ var coreStyles = {"tooltip":"core-styles-module_tooltip__3vRRp","fixed":"core-styles-module_fixed__pcSol","arrow":"core-styles-module_arrow__cvMwQ","noArrow":"core-styles-module_noArrow__xock6","clickable":"core-styles-module_clickable__ZuTTB","show":"core-styles-module_show__Nt9eE"};
239
+
240
+ var styles = {"arrow":"styles-module_arrow__K0L3T","dark":"styles-module_dark__xNqje","light":"styles-module_light__Z6W-X","success":"styles-module_success__A2AKt","warning":"styles-module_warning__SCK0X","error":"styles-module_error__JvumD","info":"styles-module_info__BWdHW"};
241
+
242
+ const Tooltip = ({
243
+ // props
244
+ id, className, classNameArrow, variant = 'dark', anchorId, anchorSelect, place = 'top', offset = 10, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, wrapper: WrapperElement, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, style: externalStyles, position, afterShow, afterHide,
245
+ // props handled by controller
246
+ content, contentWrapperRef, isOpen, setIsOpen, activeAnchor, setActiveAnchor, }) => {
247
+ const tooltipRef = React.useRef(null);
248
+ const tooltipArrowRef = React.useRef(null);
249
+ const tooltipShowDelayTimerRef = React.useRef(null);
250
+ const tooltipHideDelayTimerRef = React.useRef(null);
251
+ const [actualPlacement, setActualPlacement] = React.useState(place);
252
+ const [inlineStyles, setInlineStyles] = React.useState({});
253
+ const [inlineArrowStyles, setInlineArrowStyles] = React.useState({});
254
+ const [show, setShow] = React.useState(false);
255
+ const [rendered, setRendered] = React.useState(false);
256
+ const wasShowing = React.useRef(false);
257
+ const lastFloatPosition = React.useRef(null);
258
+ /**
259
+ * @todo Remove this in a future version (provider/wrapper method is deprecated)
260
+ */
261
+ const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id);
262
+ const hoveringTooltip = React.useRef(false);
263
+ const [anchorsBySelect, setAnchorsBySelect] = React.useState([]);
264
+ const mounted = React.useRef(false);
265
+ const shouldOpenOnClick = openOnClick || events.includes('click');
266
+ /**
267
+ * useLayoutEffect runs before useEffect,
268
+ * but should be used carefully because of caveats
269
+ * https://beta.reactjs.org/reference/react/useLayoutEffect#caveats
270
+ */
271
+ useIsomorphicLayoutEffect(() => {
272
+ mounted.current = true;
273
+ return () => {
274
+ mounted.current = false;
275
+ };
276
+ }, []);
277
+ React.useEffect(() => {
278
+ if (!show) {
279
+ /**
280
+ * this fixes weird behavior when switching between two anchor elements very quickly
281
+ * remove the timeout and switch quickly between two adjancent anchor elements to see it
282
+ *
283
+ * in practice, this means the tooltip is not immediately removed from the DOM on hide
284
+ */
285
+ const timeout = setTimeout(() => {
286
+ setRendered(false);
287
+ }, 150);
288
+ return () => {
289
+ clearTimeout(timeout);
290
+ };
291
+ }
292
+ return () => null;
293
+ }, [show]);
294
+ const handleShow = (value) => {
295
+ if (!mounted.current) {
296
+ return;
297
+ }
298
+ if (value) {
299
+ setRendered(true);
300
+ }
301
+ /**
302
+ * wait for the component to render and calculate position
303
+ * before actually showing
304
+ */
305
+ setTimeout(() => {
306
+ if (!mounted.current) {
307
+ return;
308
+ }
309
+ setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(value);
310
+ if (isOpen === undefined) {
311
+ setShow(value);
312
+ }
313
+ }, 10);
314
+ };
315
+ /**
316
+ * this replicates the effect from `handleShow()`
317
+ * when `isOpen` is changed from outside
318
+ */
319
+ React.useEffect(() => {
320
+ if (isOpen === undefined) {
321
+ return () => null;
322
+ }
323
+ if (isOpen) {
324
+ setRendered(true);
325
+ }
326
+ const timeout = setTimeout(() => {
327
+ setShow(isOpen);
328
+ }, 10);
329
+ return () => {
330
+ clearTimeout(timeout);
331
+ };
332
+ }, [isOpen]);
333
+ React.useEffect(() => {
334
+ if (show === wasShowing.current) {
335
+ return;
336
+ }
337
+ wasShowing.current = show;
338
+ if (show) {
339
+ afterShow === null || afterShow === void 0 ? void 0 : afterShow();
340
+ }
341
+ else {
342
+ afterHide === null || afterHide === void 0 ? void 0 : afterHide();
343
+ }
344
+ }, [show]);
345
+ const handleShowTooltipDelayed = () => {
346
+ if (tooltipShowDelayTimerRef.current) {
347
+ clearTimeout(tooltipShowDelayTimerRef.current);
348
+ }
349
+ tooltipShowDelayTimerRef.current = setTimeout(() => {
350
+ handleShow(true);
351
+ }, delayShow);
352
+ };
353
+ const handleHideTooltipDelayed = (delay = delayHide) => {
354
+ if (tooltipHideDelayTimerRef.current) {
355
+ clearTimeout(tooltipHideDelayTimerRef.current);
356
+ }
357
+ tooltipHideDelayTimerRef.current = setTimeout(() => {
358
+ if (hoveringTooltip.current) {
359
+ return;
360
+ }
361
+ handleShow(false);
362
+ }, delay);
363
+ };
364
+ const handleShowTooltip = (event) => {
365
+ var _a;
366
+ if (!event) {
367
+ return;
368
+ }
369
+ const target = ((_a = event.currentTarget) !== null && _a !== void 0 ? _a : event.target);
370
+ if (!(target === null || target === void 0 ? void 0 : target.isConnected)) {
371
+ /**
372
+ * this happens when the target is removed from the DOM
373
+ * at the same time the tooltip gets triggered
374
+ */
375
+ setActiveAnchor(null);
376
+ setProviderActiveAnchor({ current: null });
377
+ return;
378
+ }
379
+ if (delayShow) {
380
+ handleShowTooltipDelayed();
381
+ }
382
+ else {
383
+ handleShow(true);
384
+ }
385
+ setActiveAnchor(target);
386
+ setProviderActiveAnchor({ current: target });
387
+ if (tooltipHideDelayTimerRef.current) {
388
+ clearTimeout(tooltipHideDelayTimerRef.current);
389
+ }
390
+ };
391
+ const handleHideTooltip = () => {
392
+ if (clickable) {
393
+ // allow time for the mouse to reach the tooltip, in case there's a gap
394
+ handleHideTooltipDelayed(delayHide || 100);
395
+ }
396
+ else if (delayHide) {
397
+ handleHideTooltipDelayed();
398
+ }
399
+ else {
400
+ handleShow(false);
401
+ }
402
+ if (tooltipShowDelayTimerRef.current) {
403
+ clearTimeout(tooltipShowDelayTimerRef.current);
404
+ }
405
+ };
406
+ const handleTooltipPosition = ({ x, y }) => {
407
+ const virtualElement = {
408
+ getBoundingClientRect() {
409
+ return {
410
+ x,
411
+ y,
412
+ width: 0,
413
+ height: 0,
414
+ top: y,
415
+ left: x,
416
+ right: x,
417
+ bottom: y,
418
+ };
419
+ },
420
+ };
421
+ computeTooltipPosition({
422
+ place,
423
+ offset,
424
+ elementReference: virtualElement,
425
+ tooltipReference: tooltipRef.current,
426
+ tooltipArrowReference: tooltipArrowRef.current,
427
+ strategy: positionStrategy,
428
+ middlewares,
429
+ }).then((computedStylesData) => {
430
+ if (Object.keys(computedStylesData.tooltipStyles).length) {
431
+ setInlineStyles(computedStylesData.tooltipStyles);
432
+ }
433
+ if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
434
+ setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
435
+ }
436
+ setActualPlacement(computedStylesData.place);
437
+ });
438
+ };
439
+ const handleMouseMove = (event) => {
440
+ if (!event) {
441
+ return;
442
+ }
443
+ const mouseEvent = event;
444
+ const mousePosition = {
445
+ x: mouseEvent.clientX,
446
+ y: mouseEvent.clientY,
447
+ };
448
+ handleTooltipPosition(mousePosition);
449
+ lastFloatPosition.current = mousePosition;
450
+ };
451
+ const handleClickTooltipAnchor = (event) => {
452
+ handleShowTooltip(event);
453
+ if (delayHide) {
454
+ handleHideTooltipDelayed();
455
+ }
456
+ };
457
+ const handleClickOutsideAnchors = (event) => {
458
+ var _a;
459
+ const anchorById = document.querySelector(`[id='${anchorId}']`);
460
+ const anchors = [anchorById, ...anchorsBySelect];
461
+ if (anchors.some((anchor) => anchor === null || anchor === void 0 ? void 0 : anchor.contains(event.target))) {
462
+ return;
463
+ }
464
+ if ((_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target)) {
465
+ return;
466
+ }
467
+ handleShow(false);
468
+ };
469
+ const handleEsc = (event) => {
470
+ if (event.key !== 'Escape') {
471
+ return;
472
+ }
473
+ handleShow(false);
474
+ };
475
+ // debounce handler to prevent call twice when
476
+ // mouse enter and focus events being triggered toggether
477
+ const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true);
478
+ const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true);
479
+ React.useEffect(() => {
480
+ var _a, _b;
481
+ const elementRefs = new Set(anchorRefs);
482
+ anchorsBySelect.forEach((anchor) => {
483
+ elementRefs.add({ current: anchor });
484
+ });
485
+ const anchorById = document.querySelector(`[id='${anchorId}']`);
486
+ if (anchorById) {
487
+ elementRefs.add({ current: anchorById });
488
+ }
489
+ if (closeOnScroll) {
490
+ window.addEventListener('scroll', debouncedHandleHideTooltip);
491
+ }
492
+ if (closeOnResize) {
493
+ window.addEventListener('resize', debouncedHandleHideTooltip);
494
+ }
495
+ if (closeOnEsc) {
496
+ window.addEventListener('keydown', handleEsc);
497
+ }
498
+ const enabledEvents = [];
499
+ if (shouldOpenOnClick) {
500
+ window.addEventListener('click', handleClickOutsideAnchors);
501
+ enabledEvents.push({ event: 'click', listener: handleClickTooltipAnchor });
502
+ }
503
+ else {
504
+ enabledEvents.push({ event: 'mouseenter', listener: debouncedHandleShowTooltip }, { event: 'mouseleave', listener: debouncedHandleHideTooltip }, { event: 'focus', listener: debouncedHandleShowTooltip }, { event: 'blur', listener: debouncedHandleHideTooltip });
505
+ if (float) {
506
+ enabledEvents.push({
507
+ event: 'mousemove',
508
+ listener: handleMouseMove,
509
+ });
510
+ }
511
+ }
512
+ const handleMouseEnterTooltip = () => {
513
+ hoveringTooltip.current = true;
514
+ };
515
+ const handleMouseLeaveTooltip = () => {
516
+ hoveringTooltip.current = false;
517
+ handleHideTooltip();
518
+ };
519
+ if (clickable && !shouldOpenOnClick) {
520
+ (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', handleMouseEnterTooltip);
521
+ (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', handleMouseLeaveTooltip);
522
+ }
523
+ enabledEvents.forEach(({ event, listener }) => {
524
+ elementRefs.forEach((ref) => {
525
+ var _a;
526
+ (_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, listener);
527
+ });
528
+ });
529
+ return () => {
530
+ var _a, _b;
531
+ if (closeOnScroll) {
532
+ window.removeEventListener('scroll', debouncedHandleHideTooltip);
533
+ }
534
+ if (closeOnResize) {
535
+ window.removeEventListener('resize', debouncedHandleHideTooltip);
536
+ }
537
+ if (shouldOpenOnClick) {
538
+ window.removeEventListener('click', handleClickOutsideAnchors);
539
+ }
540
+ if (closeOnEsc) {
541
+ window.removeEventListener('keydown', handleEsc);
542
+ }
543
+ if (clickable && !shouldOpenOnClick) {
544
+ (_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', handleMouseEnterTooltip);
545
+ (_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', handleMouseLeaveTooltip);
546
+ }
547
+ enabledEvents.forEach(({ event, listener }) => {
548
+ elementRefs.forEach((ref) => {
549
+ var _a;
550
+ (_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, listener);
551
+ });
552
+ });
553
+ };
554
+ /**
555
+ * rendered is also a dependency to ensure anchor observers are re-registered
556
+ * since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
557
+ */
558
+ }, [rendered, anchorRefs, anchorsBySelect, closeOnEsc, events]);
559
+ React.useEffect(() => {
560
+ let selector = anchorSelect !== null && anchorSelect !== void 0 ? anchorSelect : '';
561
+ if (!selector && id) {
562
+ selector = `[data-tooltip-id='${id}']`;
563
+ }
564
+ const documentObserverCallback = (mutationList) => {
565
+ const newAnchors = [];
566
+ mutationList.forEach((mutation) => {
567
+ if (mutation.type === 'attributes' && mutation.attributeName === 'data-tooltip-id') {
568
+ const newId = mutation.target.getAttribute('data-tooltip-id');
569
+ if (newId === id) {
570
+ newAnchors.push(mutation.target);
571
+ }
572
+ }
573
+ if (mutation.type !== 'childList') {
574
+ return;
575
+ }
576
+ if (activeAnchor) {
577
+ [...mutation.removedNodes].some((node) => {
578
+ var _a;
579
+ if ((_a = node === null || node === void 0 ? void 0 : node.contains) === null || _a === void 0 ? void 0 : _a.call(node, activeAnchor)) {
580
+ setRendered(false);
581
+ handleShow(false);
582
+ setActiveAnchor(null);
583
+ return true;
584
+ }
585
+ return false;
586
+ });
587
+ }
588
+ if (!selector) {
589
+ return;
590
+ }
591
+ try {
592
+ const elements = [...mutation.addedNodes].filter((node) => node.nodeType === 1);
593
+ newAnchors.push(
594
+ // the element itself is an anchor
595
+ ...elements.filter((element) => element.matches(selector)));
596
+ newAnchors.push(
597
+ // the element has children which are anchors
598
+ ...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
599
+ }
600
+ catch (_a) {
601
+ /**
602
+ * invalid CSS selector.
603
+ * already warned on tooltip controller
604
+ */
605
+ }
606
+ });
607
+ if (newAnchors.length) {
608
+ setAnchorsBySelect((anchors) => [...anchors, ...newAnchors]);
609
+ }
610
+ };
611
+ const documentObserver = new MutationObserver(documentObserverCallback);
612
+ // watch for anchor being removed from the DOM
613
+ documentObserver.observe(document.body, {
614
+ childList: true,
615
+ subtree: true,
616
+ attributes: true,
617
+ attributeFilter: ['data-tooltip-id'],
618
+ });
619
+ return () => {
620
+ documentObserver.disconnect();
621
+ };
622
+ }, [id, anchorSelect, activeAnchor]);
623
+ const updateTooltipPosition = () => {
624
+ if (position) {
625
+ // if `position` is set, override regular and `float` positioning
626
+ handleTooltipPosition(position);
627
+ return;
628
+ }
629
+ if (float) {
630
+ if (lastFloatPosition.current) {
631
+ /*
632
+ Without this, changes to `content`, `place`, `offset`, ..., will only
633
+ trigger a position calculation after a `mousemove` event.
634
+
635
+ To see why this matters, comment this line, run `yarn dev` and click the
636
+ "Hover me!" anchor.
637
+ */
638
+ handleTooltipPosition(lastFloatPosition.current);
639
+ }
640
+ // if `float` is set, override regular positioning
641
+ return;
642
+ }
643
+ computeTooltipPosition({
644
+ place,
645
+ offset,
646
+ elementReference: activeAnchor,
647
+ tooltipReference: tooltipRef.current,
648
+ tooltipArrowReference: tooltipArrowRef.current,
649
+ strategy: positionStrategy,
650
+ middlewares,
651
+ }).then((computedStylesData) => {
652
+ if (!mounted.current) {
653
+ // invalidate computed positions after remount
654
+ return;
655
+ }
656
+ if (Object.keys(computedStylesData.tooltipStyles).length) {
657
+ setInlineStyles(computedStylesData.tooltipStyles);
658
+ }
659
+ if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
660
+ setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
661
+ }
662
+ setActualPlacement(computedStylesData.place);
663
+ });
664
+ };
665
+ React.useEffect(() => {
666
+ updateTooltipPosition();
667
+ }, [show, activeAnchor, content, externalStyles, place, offset, positionStrategy, position]);
668
+ React.useEffect(() => {
669
+ if (!(contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current)) {
670
+ return () => null;
671
+ }
672
+ const contentObserver = new ResizeObserver(() => {
673
+ updateTooltipPosition();
674
+ });
675
+ contentObserver.observe(contentWrapperRef.current);
676
+ return () => {
677
+ contentObserver.disconnect();
678
+ };
679
+ }, [content, contentWrapperRef === null || contentWrapperRef === void 0 ? void 0 : contentWrapperRef.current]);
680
+ React.useEffect(() => {
681
+ var _a;
682
+ const anchorById = document.querySelector(`[id='${anchorId}']`);
683
+ const anchors = [...anchorsBySelect, anchorById];
684
+ if (!activeAnchor || !anchors.includes(activeAnchor)) {
685
+ /**
686
+ * if there is no active anchor,
687
+ * or if the current active anchor is not amongst the allowed ones,
688
+ * reset it
689
+ */
690
+ setActiveAnchor((_a = anchorsBySelect[0]) !== null && _a !== void 0 ? _a : anchorById);
691
+ }
692
+ }, [anchorId, anchorsBySelect, activeAnchor]);
693
+ React.useEffect(() => {
694
+ return () => {
695
+ if (tooltipShowDelayTimerRef.current) {
696
+ clearTimeout(tooltipShowDelayTimerRef.current);
697
+ }
698
+ if (tooltipHideDelayTimerRef.current) {
699
+ clearTimeout(tooltipHideDelayTimerRef.current);
700
+ }
701
+ };
702
+ }, []);
703
+ React.useEffect(() => {
704
+ let selector = anchorSelect;
705
+ if (!selector && id) {
706
+ selector = `[data-tooltip-id='${id}']`;
707
+ }
708
+ if (!selector) {
709
+ return;
710
+ }
711
+ try {
712
+ const anchors = Array.from(document.querySelectorAll(selector));
713
+ setAnchorsBySelect(anchors);
714
+ }
715
+ catch (_a) {
716
+ // warning was already issued in the controller
717
+ setAnchorsBySelect([]);
718
+ }
719
+ }, [id, anchorSelect]);
720
+ const canShow = !hidden && content && show && Object.keys(inlineStyles).length > 0;
721
+ return rendered ? (React__default["default"].createElement(WrapperElement, { id: id, role: "tooltip", className: classNames__default["default"]('react-tooltip', coreStyles['tooltip'], styles[variant], className, `react-tooltip__place-${actualPlacement}`, {
722
+ [coreStyles['show']]: canShow,
723
+ [coreStyles['fixed']]: positionStrategy === 'fixed',
724
+ [coreStyles['clickable']]: clickable,
725
+ }), style: { ...externalStyles, ...inlineStyles }, ref: tooltipRef },
726
+ content,
727
+ React__default["default"].createElement(WrapperElement, { className: classNames__default["default"]('react-tooltip-arrow', coreStyles['arrow'], styles['arrow'], classNameArrow, {
728
+ /**
729
+ * changed from dash `no-arrow` to camelcase because of:
730
+ * https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
731
+ */
732
+ [coreStyles['noArrow']]: noArrow,
733
+ }), style: inlineArrowStyles, ref: tooltipArrowRef }))) : null;
734
+ };
735
+
736
+ /* eslint-disable react/no-danger */
737
+ const TooltipContent = ({ content }) => {
738
+ return React__default["default"].createElement("span", { dangerouslySetInnerHTML: { __html: content } });
739
+ };
740
+
741
+ const TooltipController = ({ id, anchorId, anchorSelect, content, html, render, className, classNameArrow, variant = 'dark', place = 'top', offset = 10, wrapper = 'div', children = null, events = ['hover'], openOnClick = false, positionStrategy = 'absolute', middlewares, delayShow = 0, delayHide = 0, float = false, hidden = false, noArrow = false, clickable = false, closeOnEsc = false, closeOnScroll = false, closeOnResize = false, style, position, isOpen, setIsOpen, afterShow, afterHide, }) => {
742
+ const [tooltipContent, setTooltipContent] = React.useState(content);
743
+ const [tooltipHtml, setTooltipHtml] = React.useState(html);
744
+ const [tooltipPlace, setTooltipPlace] = React.useState(place);
745
+ const [tooltipVariant, setTooltipVariant] = React.useState(variant);
746
+ const [tooltipOffset, setTooltipOffset] = React.useState(offset);
747
+ const [tooltipDelayShow, setTooltipDelayShow] = React.useState(delayShow);
748
+ const [tooltipDelayHide, setTooltipDelayHide] = React.useState(delayHide);
749
+ const [tooltipFloat, setTooltipFloat] = React.useState(float);
750
+ const [tooltipHidden, setTooltipHidden] = React.useState(hidden);
751
+ const [tooltipWrapper, setTooltipWrapper] = React.useState(wrapper);
752
+ const [tooltipEvents, setTooltipEvents] = React.useState(events);
753
+ const [tooltipPositionStrategy, setTooltipPositionStrategy] = React.useState(positionStrategy);
754
+ const [activeAnchor, setActiveAnchor] = React.useState(null);
755
+ /**
756
+ * @todo Remove this in a future version (provider/wrapper method is deprecated)
757
+ */
758
+ const { anchorRefs, activeAnchor: providerActiveAnchor } = useTooltip(id);
759
+ const getDataAttributesFromAnchorElement = (elementReference) => {
760
+ const dataAttributes = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttributeNames().reduce((acc, name) => {
761
+ var _a;
762
+ if (name.startsWith('data-tooltip-')) {
763
+ const parsedAttribute = name.replace(/^data-tooltip-/, '');
764
+ acc[parsedAttribute] = (_a = elementReference === null || elementReference === void 0 ? void 0 : elementReference.getAttribute(name)) !== null && _a !== void 0 ? _a : null;
765
+ }
766
+ return acc;
767
+ }, {});
768
+ return dataAttributes;
769
+ };
770
+ const applyAllDataAttributesFromAnchorElement = (dataAttributes) => {
771
+ const handleDataAttributes = {
772
+ place: (value) => {
773
+ var _a;
774
+ setTooltipPlace((_a = value) !== null && _a !== void 0 ? _a : place);
775
+ },
776
+ content: (value) => {
777
+ setTooltipContent(value !== null && value !== void 0 ? value : content);
778
+ },
779
+ html: (value) => {
780
+ setTooltipHtml(value !== null && value !== void 0 ? value : html);
781
+ },
782
+ variant: (value) => {
783
+ var _a;
784
+ setTooltipVariant((_a = value) !== null && _a !== void 0 ? _a : variant);
785
+ },
786
+ offset: (value) => {
787
+ setTooltipOffset(value === null ? offset : Number(value));
788
+ },
789
+ wrapper: (value) => {
790
+ var _a;
791
+ setTooltipWrapper((_a = value) !== null && _a !== void 0 ? _a : wrapper);
792
+ },
793
+ events: (value) => {
794
+ const parsed = value === null || value === void 0 ? void 0 : value.split(' ');
795
+ setTooltipEvents(parsed !== null && parsed !== void 0 ? parsed : events);
796
+ },
797
+ 'position-strategy': (value) => {
798
+ var _a;
799
+ setTooltipPositionStrategy((_a = value) !== null && _a !== void 0 ? _a : positionStrategy);
800
+ },
801
+ 'delay-show': (value) => {
802
+ setTooltipDelayShow(value === null ? delayShow : Number(value));
803
+ },
804
+ 'delay-hide': (value) => {
805
+ setTooltipDelayHide(value === null ? delayHide : Number(value));
806
+ },
807
+ float: (value) => {
808
+ setTooltipFloat(value === null ? float : value === 'true');
809
+ },
810
+ hidden: (value) => {
811
+ setTooltipHidden(value === null ? hidden : value === 'true');
812
+ },
813
+ };
814
+ // reset unset data attributes to default values
815
+ // without this, data attributes from the last active anchor will still be used
816
+ Object.values(handleDataAttributes).forEach((handler) => handler(null));
817
+ Object.entries(dataAttributes).forEach(([key, value]) => {
818
+ var _a;
819
+ (_a = handleDataAttributes[key]) === null || _a === void 0 ? void 0 : _a.call(handleDataAttributes, value);
820
+ });
821
+ };
822
+ React.useEffect(() => {
823
+ setTooltipContent(content);
824
+ }, [content]);
825
+ React.useEffect(() => {
826
+ setTooltipHtml(html);
827
+ }, [html]);
828
+ React.useEffect(() => {
829
+ setTooltipPlace(place);
830
+ }, [place]);
831
+ React.useEffect(() => {
832
+ setTooltipVariant(variant);
833
+ }, [variant]);
834
+ React.useEffect(() => {
835
+ setTooltipOffset(offset);
836
+ }, [offset]);
837
+ React.useEffect(() => {
838
+ setTooltipDelayShow(delayShow);
839
+ }, [delayShow]);
840
+ React.useEffect(() => {
841
+ setTooltipDelayHide(delayHide);
842
+ }, [delayHide]);
843
+ React.useEffect(() => {
844
+ setTooltipFloat(float);
845
+ }, [float]);
846
+ React.useEffect(() => {
847
+ setTooltipHidden(hidden);
848
+ }, [hidden]);
849
+ React.useEffect(() => {
850
+ setTooltipPositionStrategy(positionStrategy);
851
+ }, [positionStrategy]);
852
+ React.useEffect(() => {
853
+ var _a;
854
+ const elementRefs = new Set(anchorRefs);
855
+ let selector = anchorSelect;
856
+ if (!selector && id) {
857
+ selector = `[data-tooltip-id='${id}']`;
858
+ }
859
+ if (selector) {
860
+ try {
861
+ const anchorsBySelect = document.querySelectorAll(selector);
862
+ anchorsBySelect.forEach((anchor) => {
863
+ elementRefs.add({ current: anchor });
864
+ });
865
+ }
866
+ catch (_b) {
867
+ {
868
+ // eslint-disable-next-line no-console
869
+ console.warn(`[react-tooltip] "${selector}" is not a valid CSS selector`);
870
+ }
871
+ }
872
+ }
873
+ const anchorById = document.querySelector(`[id='${anchorId}']`);
874
+ if (anchorById) {
875
+ elementRefs.add({ current: anchorById });
876
+ }
877
+ if (!elementRefs.size) {
878
+ return () => null;
879
+ }
880
+ const anchorElement = (_a = activeAnchor !== null && activeAnchor !== void 0 ? activeAnchor : anchorById) !== null && _a !== void 0 ? _a : providerActiveAnchor.current;
881
+ const observerCallback = (mutationList) => {
882
+ mutationList.forEach((mutation) => {
883
+ var _a;
884
+ if (!anchorElement ||
885
+ mutation.type !== 'attributes' ||
886
+ !((_a = mutation.attributeName) === null || _a === void 0 ? void 0 : _a.startsWith('data-tooltip-'))) {
887
+ return;
888
+ }
889
+ // make sure to get all set attributes, since all unset attributes are reset
890
+ const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
891
+ applyAllDataAttributesFromAnchorElement(dataAttributes);
892
+ });
893
+ };
894
+ // Create an observer instance linked to the callback function
895
+ const observer = new MutationObserver(observerCallback);
896
+ // do not check for subtree and childrens, we only want to know attribute changes
897
+ // to stay watching `data-attributes-*` from anchor element
898
+ const observerConfig = { attributes: true, childList: false, subtree: false };
899
+ if (anchorElement) {
900
+ const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
901
+ applyAllDataAttributesFromAnchorElement(dataAttributes);
902
+ // Start observing the target node for configured mutations
903
+ observer.observe(anchorElement, observerConfig);
904
+ }
905
+ return () => {
906
+ // Remove the observer when the tooltip is destroyed
907
+ observer.disconnect();
908
+ };
909
+ }, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
910
+ /**
911
+ * content priority: children < render or content < html
912
+ * children should be lower priority so that it can be used as the "default" content
913
+ */
914
+ let renderedContent = children;
915
+ const contentWrapperRef = React.useRef(null);
916
+ if (render) {
917
+ const rendered = render({ content: tooltipContent !== null && tooltipContent !== void 0 ? tooltipContent : null, activeAnchor });
918
+ renderedContent = rendered ? (React__default["default"].createElement("div", { ref: contentWrapperRef, className: "react-tooltip-content-wrapper" }, rendered)) : null;
919
+ }
920
+ else if (tooltipContent) {
921
+ renderedContent = tooltipContent;
922
+ }
923
+ if (tooltipHtml) {
924
+ renderedContent = React__default["default"].createElement(TooltipContent, { content: tooltipHtml });
925
+ }
926
+ const props = {
927
+ id,
928
+ anchorId,
929
+ anchorSelect,
930
+ className,
931
+ classNameArrow,
932
+ content: renderedContent,
933
+ contentWrapperRef,
934
+ place: tooltipPlace,
935
+ variant: tooltipVariant,
936
+ offset: tooltipOffset,
937
+ wrapper: tooltipWrapper,
938
+ events: tooltipEvents,
939
+ openOnClick,
940
+ positionStrategy: tooltipPositionStrategy,
941
+ middlewares,
942
+ delayShow: tooltipDelayShow,
943
+ delayHide: tooltipDelayHide,
944
+ float: tooltipFloat,
945
+ hidden: tooltipHidden,
946
+ noArrow,
947
+ clickable,
948
+ closeOnEsc,
949
+ closeOnScroll,
950
+ closeOnResize,
951
+ style,
952
+ position,
953
+ isOpen,
954
+ setIsOpen,
955
+ afterShow,
956
+ afterHide,
957
+ activeAnchor,
958
+ setActiveAnchor: (anchor) => setActiveAnchor(anchor),
959
+ };
960
+ return React__default["default"].createElement(Tooltip, { ...props });
961
+ };
962
+
963
+ // those content will be replaced in build time with the `react-tooltip.css` builded content
964
+ const TooltipCoreStyles = `:root {
965
+ --rt-color-white: #fff;
966
+ --rt-color-dark: #222;
967
+ --rt-color-success: #8dc572;
968
+ --rt-color-error: #be6464;
969
+ --rt-color-warning: #f0ad4e;
970
+ --rt-color-info: #337ab7;
971
+ --rt-opacity: 0.9;
972
+ }
973
+
974
+ .core-styles-module_tooltip__3vRRp {
975
+ visibility: hidden;
976
+ width: max-content;
977
+ position: absolute;
978
+ top: 0;
979
+ left: 0;
980
+ padding: 8px 16px;
981
+ border-radius: 3px;
982
+ font-size: 90%;
983
+ pointer-events: none;
984
+ opacity: 0;
985
+ transition: opacity 0.3s ease-out;
986
+ will-change: opacity, visibility;
987
+ }
988
+
989
+ .core-styles-module_fixed__pcSol {
990
+ position: fixed;
991
+ }
992
+
993
+ .core-styles-module_arrow__cvMwQ {
994
+ position: absolute;
995
+ background: inherit;
996
+ }
997
+
998
+ .core-styles-module_noArrow__xock6 {
999
+ display: none;
1000
+ }
1001
+
1002
+ .core-styles-module_clickable__ZuTTB {
1003
+ pointer-events: auto;
1004
+ }
1005
+
1006
+ .core-styles-module_show__Nt9eE {
1007
+ visibility: visible;
1008
+ opacity: var(--rt-opacity);
1009
+ }
1010
+
1011
+ `;
1012
+ const TooltipStyles = `
1013
+
1014
+ .styles-module_arrow__K0L3T {
1015
+ width: 8px;
1016
+ height: 8px;
1017
+ transform: rotate(45deg);
1018
+ }
1019
+
1020
+ /** Types variant **/
1021
+ .styles-module_dark__xNqje {
1022
+ background: var(--rt-color-dark);
1023
+ color: var(--rt-color-white);
1024
+ }
1025
+
1026
+ .styles-module_light__Z6W-X {
1027
+ background-color: var(--rt-color-white);
1028
+ color: var(--rt-color-dark);
1029
+ }
1030
+
1031
+ .styles-module_success__A2AKt {
1032
+ background-color: var(--rt-color-success);
1033
+ color: var(--rt-color-white);
1034
+ }
1035
+
1036
+ .styles-module_warning__SCK0X {
1037
+ background-color: var(--rt-color-warning);
1038
+ color: var(--rt-color-white);
1039
+ }
1040
+
1041
+ .styles-module_error__JvumD {
1042
+ background-color: var(--rt-color-error);
1043
+ color: var(--rt-color-white);
1044
+ }
1045
+
1046
+ .styles-module_info__BWdHW {
1047
+ background-color: var(--rt-color-info);
1048
+ color: var(--rt-color-white);
1049
+ }
1050
+ `;
1051
+ injectStyle(TooltipCoreStyles, 'react-tooltip-core-styles');
1052
+ injectStyle(TooltipStyles);
1053
+
1054
+ exports.Tooltip = TooltipController;
1055
+ exports.TooltipProvider = TooltipProvider;
1056
+ exports.TooltipWrapper = TooltipWrapper;
1057
+ exports.removeStyle = removeStyle;
1058
+
1059
+ Object.defineProperty(exports, '__esModule', { value: true });
959
1060
 
960
1061
  }));
961
- //# sourceMappingURL=react-tooltip.umd.js.map