react-tooltip 5.8.4-beta.0 → 5.8.4-beta.1
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/cra-app/README.md +70 -0
- package/cra-app/package.json +39 -0
- package/cra-app/public/favicon.ico +0 -0
- package/cra-app/public/index.html +43 -0
- package/cra-app/public/logo192.png +0 -0
- package/cra-app/public/logo512.png +0 -0
- package/cra-app/public/manifest.json +25 -0
- package/cra-app/public/robots.txt +3 -0
- package/cra-app/src/App.css +38 -0
- package/cra-app/src/App.js +30 -0
- package/cra-app/src/App.test.js +8 -0
- package/cra-app/src/index.css +13 -0
- package/cra-app/src/index.js +17 -0
- package/cra-app/src/logo.svg +1 -0
- package/cra-app/src/reportWebVitals.js +13 -0
- package/cra-app/src/setupTests.js +5 -0
- package/cra-app/yarn.lock +9270 -0
- package/dist/react-tooltip.cjs.js +1257 -2947
- package/dist/react-tooltip.cjs.js.map +7 -0
- package/dist/react-tooltip.cjs.min.js +11 -15
- package/dist/react-tooltip.cjs.min.js.map +7 -0
- package/dist/react-tooltip.css +23 -32
- package/dist/react-tooltip.css.map +7 -0
- package/dist/react-tooltip.esm.js +1253 -2937
- package/dist/react-tooltip.esm.js.map +7 -0
- package/dist/react-tooltip.esm.min.js +11 -15
- package/dist/react-tooltip.esm.min.js.map +7 -0
- package/dist/react-tooltip.iife.js +1349 -0
- package/dist/react-tooltip.iife.js.map +7 -0
- package/dist/react-tooltip.iife.min.js +11 -0
- package/dist/react-tooltip.iife.min.js.map +7 -0
- package/dist/react-tooltip.min.css +2 -1
- package/dist/react-tooltip.min.css.map +7 -0
- package/esbuild.config.dev.mjs +32 -0
- package/esbuild.config.prod.mjs +92 -0
- package/package.json +12 -6
- package/tsconfig.json +1 -2
- package/dist/react-tooltip.umd.js +0 -3048
- package/dist/react-tooltip.umd.min.js +0 -15
|
@@ -1,3034 +1,1350 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
*
|
|
10
|
-
* Copyright (c) Facebook, Inc. and its affiliates.
|
|
11
|
-
*
|
|
12
|
-
* This source code is licensed under the MIT license found in the
|
|
13
|
-
* LICENSE file in the root directory of this source tree.
|
|
14
|
-
*/
|
|
15
|
-
|
|
16
|
-
(function (exports) {
|
|
17
|
-
|
|
18
|
-
{
|
|
19
|
-
(function() {
|
|
20
|
-
|
|
21
|
-
var React = require$$0;
|
|
22
|
-
|
|
23
|
-
// ATTENTION
|
|
24
|
-
// When adding new symbols to this file,
|
|
25
|
-
// Please consider also adding to 'react-devtools-shared/src/backend/ReactSymbols'
|
|
26
|
-
// The Symbol used to tag the ReactElement-like types. If there is no native Symbol
|
|
27
|
-
// nor polyfill, then a plain number is used for performance.
|
|
28
|
-
var REACT_ELEMENT_TYPE = 0xeac7;
|
|
29
|
-
var REACT_PORTAL_TYPE = 0xeaca;
|
|
30
|
-
exports.Fragment = 0xeacb;
|
|
31
|
-
var REACT_STRICT_MODE_TYPE = 0xeacc;
|
|
32
|
-
var REACT_PROFILER_TYPE = 0xead2;
|
|
33
|
-
var REACT_PROVIDER_TYPE = 0xeacd;
|
|
34
|
-
var REACT_CONTEXT_TYPE = 0xeace;
|
|
35
|
-
var REACT_FORWARD_REF_TYPE = 0xead0;
|
|
36
|
-
var REACT_SUSPENSE_TYPE = 0xead1;
|
|
37
|
-
var REACT_SUSPENSE_LIST_TYPE = 0xead8;
|
|
38
|
-
var REACT_MEMO_TYPE = 0xead3;
|
|
39
|
-
var REACT_LAZY_TYPE = 0xead4;
|
|
40
|
-
var REACT_BLOCK_TYPE = 0xead9;
|
|
41
|
-
var REACT_SERVER_BLOCK_TYPE = 0xeada;
|
|
42
|
-
var REACT_FUNDAMENTAL_TYPE = 0xead5;
|
|
43
|
-
var REACT_DEBUG_TRACING_MODE_TYPE = 0xeae1;
|
|
44
|
-
var REACT_LEGACY_HIDDEN_TYPE = 0xeae3;
|
|
45
|
-
|
|
46
|
-
if (typeof Symbol === 'function' && Symbol.for) {
|
|
47
|
-
var symbolFor = Symbol.for;
|
|
48
|
-
REACT_ELEMENT_TYPE = symbolFor('react.element');
|
|
49
|
-
REACT_PORTAL_TYPE = symbolFor('react.portal');
|
|
50
|
-
exports.Fragment = symbolFor('react.fragment');
|
|
51
|
-
REACT_STRICT_MODE_TYPE = symbolFor('react.strict_mode');
|
|
52
|
-
REACT_PROFILER_TYPE = symbolFor('react.profiler');
|
|
53
|
-
REACT_PROVIDER_TYPE = symbolFor('react.provider');
|
|
54
|
-
REACT_CONTEXT_TYPE = symbolFor('react.context');
|
|
55
|
-
REACT_FORWARD_REF_TYPE = symbolFor('react.forward_ref');
|
|
56
|
-
REACT_SUSPENSE_TYPE = symbolFor('react.suspense');
|
|
57
|
-
REACT_SUSPENSE_LIST_TYPE = symbolFor('react.suspense_list');
|
|
58
|
-
REACT_MEMO_TYPE = symbolFor('react.memo');
|
|
59
|
-
REACT_LAZY_TYPE = symbolFor('react.lazy');
|
|
60
|
-
REACT_BLOCK_TYPE = symbolFor('react.block');
|
|
61
|
-
REACT_SERVER_BLOCK_TYPE = symbolFor('react.server.block');
|
|
62
|
-
REACT_FUNDAMENTAL_TYPE = symbolFor('react.fundamental');
|
|
63
|
-
symbolFor('react.scope');
|
|
64
|
-
symbolFor('react.opaque.id');
|
|
65
|
-
REACT_DEBUG_TRACING_MODE_TYPE = symbolFor('react.debug_trace_mode');
|
|
66
|
-
symbolFor('react.offscreen');
|
|
67
|
-
REACT_LEGACY_HIDDEN_TYPE = symbolFor('react.legacy_hidden');
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
var MAYBE_ITERATOR_SYMBOL = typeof Symbol === 'function' && Symbol.iterator;
|
|
71
|
-
var FAUX_ITERATOR_SYMBOL = '@@iterator';
|
|
72
|
-
function getIteratorFn(maybeIterable) {
|
|
73
|
-
if (maybeIterable === null || typeof maybeIterable !== 'object') {
|
|
74
|
-
return null;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
var maybeIterator = MAYBE_ITERATOR_SYMBOL && maybeIterable[MAYBE_ITERATOR_SYMBOL] || maybeIterable[FAUX_ITERATOR_SYMBOL];
|
|
78
|
-
|
|
79
|
-
if (typeof maybeIterator === 'function') {
|
|
80
|
-
return maybeIterator;
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
return null;
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
var ReactSharedInternals = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
|
|
87
|
-
|
|
88
|
-
function error(format) {
|
|
89
|
-
{
|
|
90
|
-
for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
|
|
91
|
-
args[_key2 - 1] = arguments[_key2];
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
printWarning('error', format, args);
|
|
95
|
-
}
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
function printWarning(level, format, args) {
|
|
99
|
-
// When changing this logic, you might want to also
|
|
100
|
-
// update consoleWithStackDev.www.js as well.
|
|
101
|
-
{
|
|
102
|
-
var ReactDebugCurrentFrame = ReactSharedInternals.ReactDebugCurrentFrame;
|
|
103
|
-
var stack = '';
|
|
104
|
-
|
|
105
|
-
if (currentlyValidatingElement) {
|
|
106
|
-
var name = getComponentName(currentlyValidatingElement.type);
|
|
107
|
-
var owner = currentlyValidatingElement._owner;
|
|
108
|
-
stack += describeComponentFrame(name, currentlyValidatingElement._source, owner && getComponentName(owner.type));
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
stack += ReactDebugCurrentFrame.getStackAddendum();
|
|
112
|
-
|
|
113
|
-
if (stack !== '') {
|
|
114
|
-
format += '%s';
|
|
115
|
-
args = args.concat([stack]);
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
var argsWithFormat = args.map(function (item) {
|
|
119
|
-
return '' + item;
|
|
120
|
-
}); // Careful: RN currently depends on this prefix
|
|
121
|
-
|
|
122
|
-
argsWithFormat.unshift('Warning: ' + format); // We intentionally don't use spread (or .apply) directly because it
|
|
123
|
-
// breaks IE9: https://github.com/facebook/react/issues/13610
|
|
124
|
-
// eslint-disable-next-line react-internal/no-production-logging
|
|
125
|
-
|
|
126
|
-
Function.prototype.apply.call(console[level], console, argsWithFormat);
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
|
|
130
|
-
// Filter certain DOM attributes (e.g. src, href) if their values are empty strings.
|
|
131
|
-
|
|
132
|
-
var enableScopeAPI = false; // Experimental Create Event Handle API.
|
|
133
|
-
|
|
134
|
-
function isValidElementType(type) {
|
|
135
|
-
if (typeof type === 'string' || typeof type === 'function') {
|
|
136
|
-
return true;
|
|
137
|
-
} // Note: typeof might be other than 'symbol' or 'number' (e.g. if it's a polyfill).
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
if (type === exports.Fragment || type === REACT_PROFILER_TYPE || type === REACT_DEBUG_TRACING_MODE_TYPE || type === REACT_STRICT_MODE_TYPE || type === REACT_SUSPENSE_TYPE || type === REACT_SUSPENSE_LIST_TYPE || type === REACT_LEGACY_HIDDEN_TYPE || enableScopeAPI ) {
|
|
141
|
-
return true;
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
if (typeof type === 'object' && type !== null) {
|
|
145
|
-
if (type.$$typeof === REACT_LAZY_TYPE || type.$$typeof === REACT_MEMO_TYPE || type.$$typeof === REACT_PROVIDER_TYPE || type.$$typeof === REACT_CONTEXT_TYPE || type.$$typeof === REACT_FORWARD_REF_TYPE || type.$$typeof === REACT_FUNDAMENTAL_TYPE || type.$$typeof === REACT_BLOCK_TYPE || type[0] === REACT_SERVER_BLOCK_TYPE) {
|
|
146
|
-
return true;
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
|
|
150
|
-
return false;
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
var BEFORE_SLASH_RE = /^(.*)[\\\/]/;
|
|
155
|
-
function describeComponentFrame (name, source, ownerName) {
|
|
156
|
-
var sourceInfo = '';
|
|
157
|
-
|
|
158
|
-
if (source) {
|
|
159
|
-
var path = source.fileName;
|
|
160
|
-
var fileName = path.replace(BEFORE_SLASH_RE, '');
|
|
161
|
-
|
|
162
|
-
{
|
|
163
|
-
// In DEV, include code for a common special case:
|
|
164
|
-
// prefer "folder/index.js" instead of just "index.js".
|
|
165
|
-
if (/^index\./.test(fileName)) {
|
|
166
|
-
var match = path.match(BEFORE_SLASH_RE);
|
|
167
|
-
|
|
168
|
-
if (match) {
|
|
169
|
-
var pathBeforeSlash = match[1];
|
|
170
|
-
|
|
171
|
-
if (pathBeforeSlash) {
|
|
172
|
-
var folderName = pathBeforeSlash.replace(BEFORE_SLASH_RE, '');
|
|
173
|
-
fileName = folderName + '/' + fileName;
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
sourceInfo = ' (at ' + fileName + ':' + source.lineNumber + ')';
|
|
180
|
-
} else if (ownerName) {
|
|
181
|
-
sourceInfo = ' (created by ' + ownerName + ')';
|
|
182
|
-
}
|
|
183
|
-
|
|
184
|
-
return '\n in ' + (name || 'Unknown') + sourceInfo;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
var Resolved = 1;
|
|
188
|
-
function refineResolvedLazyComponent(lazyComponent) {
|
|
189
|
-
return lazyComponent._status === Resolved ? lazyComponent._result : null;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
function getWrappedName(outerType, innerType, wrapperName) {
|
|
193
|
-
var functionName = innerType.displayName || innerType.name || '';
|
|
194
|
-
return outerType.displayName || (functionName !== '' ? wrapperName + "(" + functionName + ")" : wrapperName);
|
|
195
|
-
}
|
|
196
|
-
|
|
197
|
-
function getComponentName(type) {
|
|
198
|
-
if (type == null) {
|
|
199
|
-
// Host root, text node or just invalid type.
|
|
200
|
-
return null;
|
|
201
|
-
}
|
|
202
|
-
|
|
203
|
-
{
|
|
204
|
-
if (typeof type.tag === 'number') {
|
|
205
|
-
error('Received an unexpected object in getComponentName(). ' + 'This is likely a bug in React. Please file an issue.');
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
|
|
209
|
-
if (typeof type === 'function') {
|
|
210
|
-
return type.displayName || type.name || null;
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
if (typeof type === 'string') {
|
|
214
|
-
return type;
|
|
215
|
-
}
|
|
216
|
-
|
|
217
|
-
switch (type) {
|
|
218
|
-
case exports.Fragment:
|
|
219
|
-
return 'Fragment';
|
|
220
|
-
|
|
221
|
-
case REACT_PORTAL_TYPE:
|
|
222
|
-
return 'Portal';
|
|
223
|
-
|
|
224
|
-
case REACT_PROFILER_TYPE:
|
|
225
|
-
return "Profiler";
|
|
226
|
-
|
|
227
|
-
case REACT_STRICT_MODE_TYPE:
|
|
228
|
-
return 'StrictMode';
|
|
229
|
-
|
|
230
|
-
case REACT_SUSPENSE_TYPE:
|
|
231
|
-
return 'Suspense';
|
|
232
|
-
|
|
233
|
-
case REACT_SUSPENSE_LIST_TYPE:
|
|
234
|
-
return 'SuspenseList';
|
|
235
|
-
}
|
|
236
|
-
|
|
237
|
-
if (typeof type === 'object') {
|
|
238
|
-
switch (type.$$typeof) {
|
|
239
|
-
case REACT_CONTEXT_TYPE:
|
|
240
|
-
return 'Context.Consumer';
|
|
241
|
-
|
|
242
|
-
case REACT_PROVIDER_TYPE:
|
|
243
|
-
return 'Context.Provider';
|
|
244
|
-
|
|
245
|
-
case REACT_FORWARD_REF_TYPE:
|
|
246
|
-
return getWrappedName(type, type.render, 'ForwardRef');
|
|
247
|
-
|
|
248
|
-
case REACT_MEMO_TYPE:
|
|
249
|
-
return getComponentName(type.type);
|
|
250
|
-
|
|
251
|
-
case REACT_BLOCK_TYPE:
|
|
252
|
-
return getComponentName(type.render);
|
|
253
|
-
|
|
254
|
-
case REACT_LAZY_TYPE:
|
|
255
|
-
{
|
|
256
|
-
var thenable = type;
|
|
257
|
-
var resolvedThenable = refineResolvedLazyComponent(thenable);
|
|
258
|
-
|
|
259
|
-
if (resolvedThenable) {
|
|
260
|
-
return getComponentName(resolvedThenable);
|
|
261
|
-
}
|
|
262
|
-
|
|
263
|
-
break;
|
|
264
|
-
}
|
|
265
|
-
}
|
|
266
|
-
}
|
|
267
|
-
|
|
268
|
-
return null;
|
|
269
|
-
}
|
|
270
|
-
|
|
271
|
-
var loggedTypeFailures = {};
|
|
272
|
-
ReactSharedInternals.ReactDebugCurrentFrame;
|
|
273
|
-
var currentlyValidatingElement = null;
|
|
274
|
-
|
|
275
|
-
function setCurrentlyValidatingElement(element) {
|
|
276
|
-
{
|
|
277
|
-
currentlyValidatingElement = element;
|
|
278
|
-
}
|
|
279
|
-
}
|
|
280
|
-
|
|
281
|
-
function checkPropTypes(typeSpecs, values, location, componentName, element) {
|
|
282
|
-
{
|
|
283
|
-
// $FlowFixMe This is okay but Flow doesn't know it.
|
|
284
|
-
var has = Function.call.bind(Object.prototype.hasOwnProperty);
|
|
285
|
-
|
|
286
|
-
for (var typeSpecName in typeSpecs) {
|
|
287
|
-
if (has(typeSpecs, typeSpecName)) {
|
|
288
|
-
var error$1 = void 0; // Prop type validation may throw. In case they do, we don't want to
|
|
289
|
-
// fail the render phase where it didn't fail before. So we log it.
|
|
290
|
-
// After these have been cleaned up, we'll let them throw.
|
|
291
|
-
|
|
292
|
-
try {
|
|
293
|
-
// This is intentionally an invariant that gets caught. It's the same
|
|
294
|
-
// behavior as without this statement except with a better message.
|
|
295
|
-
if (typeof typeSpecs[typeSpecName] !== 'function') {
|
|
296
|
-
var err = Error((componentName || 'React class') + ': ' + location + ' type `' + typeSpecName + '` is invalid; ' + 'it must be a function, usually from the `prop-types` package, but received `' + typeof typeSpecs[typeSpecName] + '`.' + 'This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.');
|
|
297
|
-
err.name = 'Invariant Violation';
|
|
298
|
-
throw err;
|
|
299
|
-
}
|
|
300
|
-
|
|
301
|
-
error$1 = typeSpecs[typeSpecName](values, typeSpecName, componentName, location, null, 'SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED');
|
|
302
|
-
} catch (ex) {
|
|
303
|
-
error$1 = ex;
|
|
304
|
-
}
|
|
305
|
-
|
|
306
|
-
if (error$1 && !(error$1 instanceof Error)) {
|
|
307
|
-
setCurrentlyValidatingElement(element);
|
|
308
|
-
|
|
309
|
-
error('%s: type specification of %s' + ' `%s` is invalid; the type checker ' + 'function must return `null` or an `Error` but returned a %s. ' + 'You may have forgotten to pass an argument to the type checker ' + 'creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and ' + 'shape all require an argument).', componentName || 'React class', location, typeSpecName, typeof error$1);
|
|
310
|
-
|
|
311
|
-
setCurrentlyValidatingElement(null);
|
|
312
|
-
}
|
|
313
|
-
|
|
314
|
-
if (error$1 instanceof Error && !(error$1.message in loggedTypeFailures)) {
|
|
315
|
-
// Only monitor this failure once because there tends to be a lot of the
|
|
316
|
-
// same error.
|
|
317
|
-
loggedTypeFailures[error$1.message] = true;
|
|
318
|
-
setCurrentlyValidatingElement(element);
|
|
319
|
-
|
|
320
|
-
error('Failed %s type: %s', location, error$1.message);
|
|
321
|
-
|
|
322
|
-
setCurrentlyValidatingElement(null);
|
|
323
|
-
}
|
|
324
|
-
}
|
|
325
|
-
}
|
|
326
|
-
}
|
|
327
|
-
}
|
|
328
|
-
|
|
329
|
-
var ReactCurrentOwner = ReactSharedInternals.ReactCurrentOwner;
|
|
330
|
-
var hasOwnProperty = Object.prototype.hasOwnProperty;
|
|
331
|
-
var RESERVED_PROPS = {
|
|
332
|
-
key: true,
|
|
333
|
-
ref: true,
|
|
334
|
-
__self: true,
|
|
335
|
-
__source: true
|
|
336
|
-
};
|
|
337
|
-
var specialPropKeyWarningShown;
|
|
338
|
-
var specialPropRefWarningShown;
|
|
339
|
-
var didWarnAboutStringRefs;
|
|
340
|
-
|
|
341
|
-
{
|
|
342
|
-
didWarnAboutStringRefs = {};
|
|
343
|
-
}
|
|
344
|
-
|
|
345
|
-
function hasValidRef(config) {
|
|
346
|
-
{
|
|
347
|
-
if (hasOwnProperty.call(config, 'ref')) {
|
|
348
|
-
var getter = Object.getOwnPropertyDescriptor(config, 'ref').get;
|
|
349
|
-
|
|
350
|
-
if (getter && getter.isReactWarning) {
|
|
351
|
-
return false;
|
|
352
|
-
}
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
|
|
356
|
-
return config.ref !== undefined;
|
|
357
|
-
}
|
|
358
|
-
|
|
359
|
-
function hasValidKey(config) {
|
|
360
|
-
{
|
|
361
|
-
if (hasOwnProperty.call(config, 'key')) {
|
|
362
|
-
var getter = Object.getOwnPropertyDescriptor(config, 'key').get;
|
|
363
|
-
|
|
364
|
-
if (getter && getter.isReactWarning) {
|
|
365
|
-
return false;
|
|
366
|
-
}
|
|
367
|
-
}
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
return config.key !== undefined;
|
|
371
|
-
}
|
|
372
|
-
|
|
373
|
-
function warnIfStringRefCannotBeAutoConverted(config, self) {
|
|
374
|
-
{
|
|
375
|
-
if (typeof config.ref === 'string' && ReactCurrentOwner.current && self && ReactCurrentOwner.current.stateNode !== self) {
|
|
376
|
-
var componentName = getComponentName(ReactCurrentOwner.current.type);
|
|
377
|
-
|
|
378
|
-
if (!didWarnAboutStringRefs[componentName]) {
|
|
379
|
-
error('Component "%s" contains the string ref "%s". ' + 'Support for string refs will be removed in a future major release. ' + 'This case cannot be automatically converted to an arrow function. ' + 'We ask you to manually fix this case by using useRef() or createRef() instead. ' + 'Learn more about using refs safely here: ' + 'https://reactjs.org/link/strict-mode-string-ref', getComponentName(ReactCurrentOwner.current.type), config.ref);
|
|
380
|
-
|
|
381
|
-
didWarnAboutStringRefs[componentName] = true;
|
|
382
|
-
}
|
|
383
|
-
}
|
|
384
|
-
}
|
|
385
|
-
}
|
|
386
|
-
|
|
387
|
-
function defineKeyPropWarningGetter(props, displayName) {
|
|
388
|
-
{
|
|
389
|
-
var warnAboutAccessingKey = function () {
|
|
390
|
-
if (!specialPropKeyWarningShown) {
|
|
391
|
-
specialPropKeyWarningShown = true;
|
|
392
|
-
|
|
393
|
-
error('%s: `key` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
|
|
394
|
-
}
|
|
395
|
-
};
|
|
396
|
-
|
|
397
|
-
warnAboutAccessingKey.isReactWarning = true;
|
|
398
|
-
Object.defineProperty(props, 'key', {
|
|
399
|
-
get: warnAboutAccessingKey,
|
|
400
|
-
configurable: true
|
|
401
|
-
});
|
|
402
|
-
}
|
|
403
|
-
}
|
|
404
|
-
|
|
405
|
-
function defineRefPropWarningGetter(props, displayName) {
|
|
406
|
-
{
|
|
407
|
-
var warnAboutAccessingRef = function () {
|
|
408
|
-
if (!specialPropRefWarningShown) {
|
|
409
|
-
specialPropRefWarningShown = true;
|
|
410
|
-
|
|
411
|
-
error('%s: `ref` is not a prop. Trying to access it will result ' + 'in `undefined` being returned. If you need to access the same ' + 'value within the child component, you should pass it as a different ' + 'prop. (https://reactjs.org/link/special-props)', displayName);
|
|
412
|
-
}
|
|
413
|
-
};
|
|
414
|
-
|
|
415
|
-
warnAboutAccessingRef.isReactWarning = true;
|
|
416
|
-
Object.defineProperty(props, 'ref', {
|
|
417
|
-
get: warnAboutAccessingRef,
|
|
418
|
-
configurable: true
|
|
419
|
-
});
|
|
420
|
-
}
|
|
421
|
-
}
|
|
422
|
-
/**
|
|
423
|
-
* Factory method to create a new React element. This no longer adheres to
|
|
424
|
-
* the class pattern, so do not use new to call it. Also, instanceof check
|
|
425
|
-
* will not work. Instead test $$typeof field against Symbol.for('react.element') to check
|
|
426
|
-
* if something is a React Element.
|
|
427
|
-
*
|
|
428
|
-
* @param {*} type
|
|
429
|
-
* @param {*} props
|
|
430
|
-
* @param {*} key
|
|
431
|
-
* @param {string|object} ref
|
|
432
|
-
* @param {*} owner
|
|
433
|
-
* @param {*} self A *temporary* helper to detect places where `this` is
|
|
434
|
-
* different from the `owner` when React.createElement is called, so that we
|
|
435
|
-
* can warn. We want to get rid of owner and replace string `ref`s with arrow
|
|
436
|
-
* functions, and as long as `this` and owner are the same, there will be no
|
|
437
|
-
* change in behavior.
|
|
438
|
-
* @param {*} source An annotation object (added by a transpiler or otherwise)
|
|
439
|
-
* indicating filename, line number, and/or other information.
|
|
440
|
-
* @internal
|
|
441
|
-
*/
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
var ReactElement = function (type, key, ref, self, source, owner, props) {
|
|
445
|
-
var element = {
|
|
446
|
-
// This tag allows us to uniquely identify this as a React Element
|
|
447
|
-
$$typeof: REACT_ELEMENT_TYPE,
|
|
448
|
-
// Built-in properties that belong on the element
|
|
449
|
-
type: type,
|
|
450
|
-
key: key,
|
|
451
|
-
ref: ref,
|
|
452
|
-
props: props,
|
|
453
|
-
// Record the component responsible for creating this element.
|
|
454
|
-
_owner: owner
|
|
455
|
-
};
|
|
456
|
-
|
|
457
|
-
{
|
|
458
|
-
// The validation flag is currently mutative. We put it on
|
|
459
|
-
// an external backing store so that we can freeze the whole object.
|
|
460
|
-
// This can be replaced with a WeakMap once they are implemented in
|
|
461
|
-
// commonly used development environments.
|
|
462
|
-
element._store = {}; // To make comparing ReactElements easier for testing purposes, we make
|
|
463
|
-
// the validation flag non-enumerable (where possible, which should
|
|
464
|
-
// include every environment we run tests in), so the test framework
|
|
465
|
-
// ignores it.
|
|
466
|
-
|
|
467
|
-
Object.defineProperty(element._store, 'validated', {
|
|
468
|
-
configurable: false,
|
|
469
|
-
enumerable: false,
|
|
470
|
-
writable: true,
|
|
471
|
-
value: false
|
|
472
|
-
}); // self and source are DEV only properties.
|
|
473
|
-
|
|
474
|
-
Object.defineProperty(element, '_self', {
|
|
475
|
-
configurable: false,
|
|
476
|
-
enumerable: false,
|
|
477
|
-
writable: false,
|
|
478
|
-
value: self
|
|
479
|
-
}); // Two elements created in two different places should be considered
|
|
480
|
-
// equal for testing purposes and therefore we hide it from enumeration.
|
|
481
|
-
|
|
482
|
-
Object.defineProperty(element, '_source', {
|
|
483
|
-
configurable: false,
|
|
484
|
-
enumerable: false,
|
|
485
|
-
writable: false,
|
|
486
|
-
value: source
|
|
487
|
-
});
|
|
488
|
-
|
|
489
|
-
if (Object.freeze) {
|
|
490
|
-
Object.freeze(element.props);
|
|
491
|
-
Object.freeze(element);
|
|
492
|
-
}
|
|
493
|
-
}
|
|
494
|
-
|
|
495
|
-
return element;
|
|
496
|
-
};
|
|
497
|
-
/**
|
|
498
|
-
* https://github.com/reactjs/rfcs/pull/107
|
|
499
|
-
* @param {*} type
|
|
500
|
-
* @param {object} props
|
|
501
|
-
* @param {string} key
|
|
502
|
-
*/
|
|
503
|
-
|
|
504
|
-
function jsxDEV(type, config, maybeKey, source, self) {
|
|
505
|
-
{
|
|
506
|
-
var propName; // Reserved names are extracted
|
|
507
|
-
|
|
508
|
-
var props = {};
|
|
509
|
-
var key = null;
|
|
510
|
-
var ref = null; // Currently, key can be spread in as a prop. This causes a potential
|
|
511
|
-
// issue if key is also explicitly declared (ie. <div {...props} key="Hi" />
|
|
512
|
-
// or <div key="Hi" {...props} /> ). We want to deprecate key spread,
|
|
513
|
-
// but as an intermediary step, we will use jsxDEV for everything except
|
|
514
|
-
// <div {...props} key="Hi" />, because we aren't currently able to tell if
|
|
515
|
-
// key is explicitly declared to be undefined or not.
|
|
516
|
-
|
|
517
|
-
if (maybeKey !== undefined) {
|
|
518
|
-
key = '' + maybeKey;
|
|
519
|
-
}
|
|
520
|
-
|
|
521
|
-
if (hasValidKey(config)) {
|
|
522
|
-
key = '' + config.key;
|
|
523
|
-
}
|
|
524
|
-
|
|
525
|
-
if (hasValidRef(config)) {
|
|
526
|
-
ref = config.ref;
|
|
527
|
-
warnIfStringRefCannotBeAutoConverted(config, self);
|
|
528
|
-
} // Remaining properties are added to a new props object
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
for (propName in config) {
|
|
532
|
-
if (hasOwnProperty.call(config, propName) && !RESERVED_PROPS.hasOwnProperty(propName)) {
|
|
533
|
-
props[propName] = config[propName];
|
|
534
|
-
}
|
|
535
|
-
} // Resolve default props
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
if (type && type.defaultProps) {
|
|
539
|
-
var defaultProps = type.defaultProps;
|
|
540
|
-
|
|
541
|
-
for (propName in defaultProps) {
|
|
542
|
-
if (props[propName] === undefined) {
|
|
543
|
-
props[propName] = defaultProps[propName];
|
|
544
|
-
}
|
|
545
|
-
}
|
|
546
|
-
}
|
|
547
|
-
|
|
548
|
-
if (key || ref) {
|
|
549
|
-
var displayName = typeof type === 'function' ? type.displayName || type.name || 'Unknown' : type;
|
|
550
|
-
|
|
551
|
-
if (key) {
|
|
552
|
-
defineKeyPropWarningGetter(props, displayName);
|
|
553
|
-
}
|
|
554
|
-
|
|
555
|
-
if (ref) {
|
|
556
|
-
defineRefPropWarningGetter(props, displayName);
|
|
557
|
-
}
|
|
558
|
-
}
|
|
559
|
-
|
|
560
|
-
return ReactElement(type, key, ref, self, source, ReactCurrentOwner.current, props);
|
|
561
|
-
}
|
|
562
|
-
}
|
|
563
|
-
|
|
564
|
-
var ReactCurrentOwner$1 = ReactSharedInternals.ReactCurrentOwner;
|
|
565
|
-
ReactSharedInternals.ReactDebugCurrentFrame;
|
|
566
|
-
|
|
567
|
-
function setCurrentlyValidatingElement$1(element) {
|
|
568
|
-
currentlyValidatingElement = element;
|
|
569
|
-
}
|
|
570
|
-
|
|
571
|
-
var propTypesMisspellWarningShown;
|
|
572
|
-
|
|
573
|
-
{
|
|
574
|
-
propTypesMisspellWarningShown = false;
|
|
575
|
-
}
|
|
576
|
-
/**
|
|
577
|
-
* Verifies the object is a ReactElement.
|
|
578
|
-
* See https://reactjs.org/docs/react-api.html#isvalidelement
|
|
579
|
-
* @param {?object} object
|
|
580
|
-
* @return {boolean} True if `object` is a ReactElement.
|
|
581
|
-
* @final
|
|
582
|
-
*/
|
|
583
|
-
|
|
584
|
-
function isValidElement(object) {
|
|
585
|
-
{
|
|
586
|
-
return typeof object === 'object' && object !== null && object.$$typeof === REACT_ELEMENT_TYPE;
|
|
587
|
-
}
|
|
588
|
-
}
|
|
589
|
-
|
|
590
|
-
function getDeclarationErrorAddendum() {
|
|
591
|
-
{
|
|
592
|
-
if (ReactCurrentOwner$1.current) {
|
|
593
|
-
var name = getComponentName(ReactCurrentOwner$1.current.type);
|
|
594
|
-
|
|
595
|
-
if (name) {
|
|
596
|
-
return '\n\nCheck the render method of `' + name + '`.';
|
|
597
|
-
}
|
|
598
|
-
}
|
|
599
|
-
|
|
600
|
-
return '';
|
|
601
|
-
}
|
|
602
|
-
}
|
|
603
|
-
|
|
604
|
-
function getSourceInfoErrorAddendum(source) {
|
|
605
|
-
{
|
|
606
|
-
if (source !== undefined) {
|
|
607
|
-
var fileName = source.fileName.replace(/^.*[\\\/]/, '');
|
|
608
|
-
var lineNumber = source.lineNumber;
|
|
609
|
-
return '\n\nCheck your code at ' + fileName + ':' + lineNumber + '.';
|
|
610
|
-
}
|
|
611
|
-
|
|
612
|
-
return '';
|
|
613
|
-
}
|
|
614
|
-
}
|
|
615
|
-
/**
|
|
616
|
-
* Warn if there's no key explicitly set on dynamic arrays of children or
|
|
617
|
-
* object keys are not valid. This allows us to keep track of children between
|
|
618
|
-
* updates.
|
|
619
|
-
*/
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
var ownerHasKeyUseWarning = {};
|
|
623
|
-
|
|
624
|
-
function getCurrentComponentErrorInfo(parentType) {
|
|
625
|
-
{
|
|
626
|
-
var info = getDeclarationErrorAddendum();
|
|
627
|
-
|
|
628
|
-
if (!info) {
|
|
629
|
-
var parentName = typeof parentType === 'string' ? parentType : parentType.displayName || parentType.name;
|
|
630
|
-
|
|
631
|
-
if (parentName) {
|
|
632
|
-
info = "\n\nCheck the top-level render call using <" + parentName + ">.";
|
|
633
|
-
}
|
|
634
|
-
}
|
|
635
|
-
|
|
636
|
-
return info;
|
|
637
|
-
}
|
|
638
|
-
}
|
|
639
|
-
/**
|
|
640
|
-
* Warn if the element doesn't have an explicit key assigned to it.
|
|
641
|
-
* This element is in an array. The array could grow and shrink or be
|
|
642
|
-
* reordered. All children that haven't already been validated are required to
|
|
643
|
-
* have a "key" property assigned to it. Error statuses are cached so a warning
|
|
644
|
-
* will only be shown once.
|
|
645
|
-
*
|
|
646
|
-
* @internal
|
|
647
|
-
* @param {ReactElement} element Element that requires a key.
|
|
648
|
-
* @param {*} parentType element's parent's type.
|
|
649
|
-
*/
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
function validateExplicitKey(element, parentType) {
|
|
653
|
-
{
|
|
654
|
-
if (!element._store || element._store.validated || element.key != null) {
|
|
655
|
-
return;
|
|
656
|
-
}
|
|
657
|
-
|
|
658
|
-
element._store.validated = true;
|
|
659
|
-
var currentComponentErrorInfo = getCurrentComponentErrorInfo(parentType);
|
|
660
|
-
|
|
661
|
-
if (ownerHasKeyUseWarning[currentComponentErrorInfo]) {
|
|
662
|
-
return;
|
|
663
|
-
}
|
|
664
|
-
|
|
665
|
-
ownerHasKeyUseWarning[currentComponentErrorInfo] = true; // Usually the current owner is the offender, but if it accepts children as a
|
|
666
|
-
// property, it may be the creator of the child that's responsible for
|
|
667
|
-
// assigning it a key.
|
|
668
|
-
|
|
669
|
-
var childOwner = '';
|
|
670
|
-
|
|
671
|
-
if (element && element._owner && element._owner !== ReactCurrentOwner$1.current) {
|
|
672
|
-
// Give the component that originally created this child.
|
|
673
|
-
childOwner = " It was passed a child from " + getComponentName(element._owner.type) + ".";
|
|
674
|
-
}
|
|
675
|
-
|
|
676
|
-
setCurrentlyValidatingElement$1(element);
|
|
677
|
-
|
|
678
|
-
error('Each child in a list should have a unique "key" prop.' + '%s%s See https://reactjs.org/link/warning-keys for more information.', currentComponentErrorInfo, childOwner);
|
|
679
|
-
|
|
680
|
-
setCurrentlyValidatingElement$1(null);
|
|
681
|
-
}
|
|
682
|
-
}
|
|
683
|
-
/**
|
|
684
|
-
* Ensure that every element either is passed in a static location, in an
|
|
685
|
-
* array with an explicit keys property defined, or in an object literal
|
|
686
|
-
* with valid key property.
|
|
687
|
-
*
|
|
688
|
-
* @internal
|
|
689
|
-
* @param {ReactNode} node Statically passed child of any type.
|
|
690
|
-
* @param {*} parentType node's parent's type.
|
|
691
|
-
*/
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
function validateChildKeys(node, parentType) {
|
|
695
|
-
{
|
|
696
|
-
if (typeof node !== 'object') {
|
|
697
|
-
return;
|
|
698
|
-
}
|
|
699
|
-
|
|
700
|
-
if (Array.isArray(node)) {
|
|
701
|
-
for (var i = 0; i < node.length; i++) {
|
|
702
|
-
var child = node[i];
|
|
703
|
-
|
|
704
|
-
if (isValidElement(child)) {
|
|
705
|
-
validateExplicitKey(child, parentType);
|
|
706
|
-
}
|
|
707
|
-
}
|
|
708
|
-
} else if (isValidElement(node)) {
|
|
709
|
-
// This element was passed in a valid location.
|
|
710
|
-
if (node._store) {
|
|
711
|
-
node._store.validated = true;
|
|
712
|
-
}
|
|
713
|
-
} else if (node) {
|
|
714
|
-
var iteratorFn = getIteratorFn(node);
|
|
715
|
-
|
|
716
|
-
if (typeof iteratorFn === 'function') {
|
|
717
|
-
// Entry iterators used to provide implicit keys,
|
|
718
|
-
// but now we print a separate warning for them later.
|
|
719
|
-
if (iteratorFn !== node.entries) {
|
|
720
|
-
var iterator = iteratorFn.call(node);
|
|
721
|
-
var step;
|
|
722
|
-
|
|
723
|
-
while (!(step = iterator.next()).done) {
|
|
724
|
-
if (isValidElement(step.value)) {
|
|
725
|
-
validateExplicitKey(step.value, parentType);
|
|
726
|
-
}
|
|
727
|
-
}
|
|
728
|
-
}
|
|
729
|
-
}
|
|
730
|
-
}
|
|
731
|
-
}
|
|
732
|
-
}
|
|
733
|
-
/**
|
|
734
|
-
* Given an element, validate that its props follow the propTypes definition,
|
|
735
|
-
* provided by the type.
|
|
736
|
-
*
|
|
737
|
-
* @param {ReactElement} element
|
|
738
|
-
*/
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
function validatePropTypes(element) {
|
|
742
|
-
{
|
|
743
|
-
var type = element.type;
|
|
744
|
-
|
|
745
|
-
if (type === null || type === undefined || typeof type === 'string') {
|
|
746
|
-
return;
|
|
747
|
-
}
|
|
748
|
-
|
|
749
|
-
var propTypes;
|
|
750
|
-
|
|
751
|
-
if (typeof type === 'function') {
|
|
752
|
-
propTypes = type.propTypes;
|
|
753
|
-
} else if (typeof type === 'object' && (type.$$typeof === REACT_FORWARD_REF_TYPE || // Note: Memo only checks outer props here.
|
|
754
|
-
// Inner props are checked in the reconciler.
|
|
755
|
-
type.$$typeof === REACT_MEMO_TYPE)) {
|
|
756
|
-
propTypes = type.propTypes;
|
|
757
|
-
} else {
|
|
758
|
-
return;
|
|
759
|
-
}
|
|
760
|
-
|
|
761
|
-
if (propTypes) {
|
|
762
|
-
// Intentionally inside to avoid triggering lazy initializers:
|
|
763
|
-
var name = getComponentName(type);
|
|
764
|
-
checkPropTypes(propTypes, element.props, 'prop', name, element);
|
|
765
|
-
} else if (type.PropTypes !== undefined && !propTypesMisspellWarningShown) {
|
|
766
|
-
propTypesMisspellWarningShown = true; // Intentionally inside to avoid triggering lazy initializers:
|
|
767
|
-
|
|
768
|
-
var _name = getComponentName(type);
|
|
769
|
-
|
|
770
|
-
error('Component %s declared `PropTypes` instead of `propTypes`. Did you misspell the property assignment?', _name || 'Unknown');
|
|
771
|
-
}
|
|
772
|
-
|
|
773
|
-
if (typeof type.getDefaultProps === 'function' && !type.getDefaultProps.isReactClassApproved) {
|
|
774
|
-
error('getDefaultProps is only used on classic React.createClass ' + 'definitions. Use a static property named `defaultProps` instead.');
|
|
775
|
-
}
|
|
776
|
-
}
|
|
777
|
-
}
|
|
778
|
-
/**
|
|
779
|
-
* Given a fragment, validate that it can only be provided with fragment props
|
|
780
|
-
* @param {ReactElement} fragment
|
|
781
|
-
*/
|
|
782
|
-
|
|
783
|
-
|
|
784
|
-
function validateFragmentProps(fragment) {
|
|
785
|
-
{
|
|
786
|
-
var keys = Object.keys(fragment.props);
|
|
787
|
-
|
|
788
|
-
for (var i = 0; i < keys.length; i++) {
|
|
789
|
-
var key = keys[i];
|
|
790
|
-
|
|
791
|
-
if (key !== 'children' && key !== 'key') {
|
|
792
|
-
setCurrentlyValidatingElement$1(fragment);
|
|
793
|
-
|
|
794
|
-
error('Invalid prop `%s` supplied to `React.Fragment`. ' + 'React.Fragment can only have `key` and `children` props.', key);
|
|
795
|
-
|
|
796
|
-
setCurrentlyValidatingElement$1(null);
|
|
797
|
-
break;
|
|
798
|
-
}
|
|
799
|
-
}
|
|
800
|
-
|
|
801
|
-
if (fragment.ref !== null) {
|
|
802
|
-
setCurrentlyValidatingElement$1(fragment);
|
|
803
|
-
|
|
804
|
-
error('Invalid attribute `ref` supplied to `React.Fragment`.');
|
|
805
|
-
|
|
806
|
-
setCurrentlyValidatingElement$1(null);
|
|
807
|
-
}
|
|
808
|
-
}
|
|
809
|
-
}
|
|
810
|
-
|
|
811
|
-
function jsxWithValidation(type, props, key, isStaticChildren, source, self) {
|
|
812
|
-
{
|
|
813
|
-
var validType = isValidElementType(type); // We warn in this case but don't throw. We expect the element creation to
|
|
814
|
-
// succeed and there will likely be errors in render.
|
|
815
|
-
|
|
816
|
-
if (!validType) {
|
|
817
|
-
var info = '';
|
|
818
|
-
|
|
819
|
-
if (type === undefined || typeof type === 'object' && type !== null && Object.keys(type).length === 0) {
|
|
820
|
-
info += ' You likely forgot to export your component from the file ' + "it's defined in, or you might have mixed up default and named imports.";
|
|
821
|
-
}
|
|
822
|
-
|
|
823
|
-
var sourceInfo = getSourceInfoErrorAddendum(source);
|
|
824
|
-
|
|
825
|
-
if (sourceInfo) {
|
|
826
|
-
info += sourceInfo;
|
|
827
|
-
} else {
|
|
828
|
-
info += getDeclarationErrorAddendum();
|
|
829
|
-
}
|
|
830
|
-
|
|
831
|
-
var typeString;
|
|
832
|
-
|
|
833
|
-
if (type === null) {
|
|
834
|
-
typeString = 'null';
|
|
835
|
-
} else if (Array.isArray(type)) {
|
|
836
|
-
typeString = 'array';
|
|
837
|
-
} else if (type !== undefined && type.$$typeof === REACT_ELEMENT_TYPE) {
|
|
838
|
-
typeString = "<" + (getComponentName(type.type) || 'Unknown') + " />";
|
|
839
|
-
info = ' Did you accidentally export a JSX literal instead of a component?';
|
|
840
|
-
} else {
|
|
841
|
-
typeString = typeof type;
|
|
842
|
-
}
|
|
843
|
-
|
|
844
|
-
error('React.jsx: type is invalid -- expected a string (for ' + 'built-in components) or a class/function (for composite ' + 'components) but got: %s.%s', typeString, info);
|
|
845
|
-
}
|
|
846
|
-
|
|
847
|
-
var element = jsxDEV(type, props, key, source, self); // The result can be nullish if a mock or a custom function is used.
|
|
848
|
-
// TODO: Drop this when these are no longer allowed as the type argument.
|
|
849
|
-
|
|
850
|
-
if (element == null) {
|
|
851
|
-
return element;
|
|
852
|
-
} // Skip key warning if the type isn't valid since our key validation logic
|
|
853
|
-
// doesn't expect a non-string/function type and can throw confusing errors.
|
|
854
|
-
// We don't want exception behavior to differ between dev and prod.
|
|
855
|
-
// (Rendering will throw with a helpful message and as soon as the type is
|
|
856
|
-
// fixed, the key warnings will appear.)
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
if (validType) {
|
|
860
|
-
var children = props.children;
|
|
861
|
-
|
|
862
|
-
if (children !== undefined) {
|
|
863
|
-
if (isStaticChildren) {
|
|
864
|
-
if (Array.isArray(children)) {
|
|
865
|
-
for (var i = 0; i < children.length; i++) {
|
|
866
|
-
validateChildKeys(children[i], type);
|
|
867
|
-
}
|
|
868
|
-
|
|
869
|
-
if (Object.freeze) {
|
|
870
|
-
Object.freeze(children);
|
|
871
|
-
}
|
|
872
|
-
} else {
|
|
873
|
-
error('React.jsx: Static children should always be an array. ' + 'You are likely explicitly calling React.jsxs or React.jsxDEV. ' + 'Use the Babel transform instead.');
|
|
874
|
-
}
|
|
875
|
-
} else {
|
|
876
|
-
validateChildKeys(children, type);
|
|
877
|
-
}
|
|
878
|
-
}
|
|
879
|
-
}
|
|
880
|
-
|
|
881
|
-
if (type === exports.Fragment) {
|
|
882
|
-
validateFragmentProps(element);
|
|
883
|
-
} else {
|
|
884
|
-
validatePropTypes(element);
|
|
885
|
-
}
|
|
886
|
-
|
|
887
|
-
return element;
|
|
888
|
-
}
|
|
889
|
-
} // These two functions exist to still get child warnings in dev
|
|
890
|
-
// even with the prod transform. This means that jsxDEV is purely
|
|
891
|
-
// opt-in behavior for better messages but that we won't stop
|
|
892
|
-
// giving you warnings if you use production apis.
|
|
893
|
-
|
|
894
|
-
function jsxWithValidationStatic(type, props, key) {
|
|
895
|
-
{
|
|
896
|
-
return jsxWithValidation(type, props, key, true);
|
|
897
|
-
}
|
|
898
|
-
}
|
|
899
|
-
function jsxWithValidationDynamic(type, props, key) {
|
|
900
|
-
{
|
|
901
|
-
return jsxWithValidation(type, props, key, false);
|
|
902
|
-
}
|
|
903
|
-
}
|
|
904
|
-
|
|
905
|
-
var jsx = jsxWithValidationDynamic ; // we may want to special case jsxs internally to take advantage of static children.
|
|
906
|
-
// for now we can ship identical prod functions
|
|
907
|
-
|
|
908
|
-
var jsxs = jsxWithValidationStatic ;
|
|
909
|
-
|
|
910
|
-
exports.jsx = jsx;
|
|
911
|
-
exports.jsxs = jsxs;
|
|
912
|
-
})();
|
|
913
|
-
}
|
|
914
|
-
} (reactJsxRuntime_development));
|
|
915
|
-
|
|
916
|
-
(function (module) {
|
|
917
|
-
|
|
918
|
-
{
|
|
919
|
-
module.exports = reactJsxRuntime_development;
|
|
920
|
-
}
|
|
921
|
-
} (jsxRuntime));
|
|
922
|
-
|
|
923
|
-
var classnames = {exports: {}};
|
|
924
|
-
|
|
925
|
-
/*!
|
|
926
|
-
Copyright (c) 2018 Jed Watson.
|
|
927
|
-
Licensed under the MIT License (MIT), see
|
|
928
|
-
http://jedwatson.github.io/classnames
|
|
929
|
-
*/
|
|
930
|
-
|
|
931
|
-
(function (module) {
|
|
932
|
-
/* global define */
|
|
933
|
-
|
|
934
|
-
(function () {
|
|
935
|
-
|
|
936
|
-
var hasOwn = {}.hasOwnProperty;
|
|
937
|
-
|
|
938
|
-
function classNames() {
|
|
939
|
-
var classes = [];
|
|
940
|
-
|
|
941
|
-
for (var i = 0; i < arguments.length; i++) {
|
|
942
|
-
var arg = arguments[i];
|
|
943
|
-
if (!arg) continue;
|
|
944
|
-
|
|
945
|
-
var argType = typeof arg;
|
|
946
|
-
|
|
947
|
-
if (argType === 'string' || argType === 'number') {
|
|
948
|
-
classes.push(arg);
|
|
949
|
-
} else if (Array.isArray(arg)) {
|
|
950
|
-
if (arg.length) {
|
|
951
|
-
var inner = classNames.apply(null, arg);
|
|
952
|
-
if (inner) {
|
|
953
|
-
classes.push(inner);
|
|
954
|
-
}
|
|
955
|
-
}
|
|
956
|
-
} else if (argType === 'object') {
|
|
957
|
-
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
|
|
958
|
-
classes.push(arg.toString());
|
|
959
|
-
continue;
|
|
960
|
-
}
|
|
961
|
-
|
|
962
|
-
for (var key in arg) {
|
|
963
|
-
if (hasOwn.call(arg, key) && arg[key]) {
|
|
964
|
-
classes.push(key);
|
|
965
|
-
}
|
|
966
|
-
}
|
|
967
|
-
}
|
|
968
|
-
}
|
|
969
|
-
|
|
970
|
-
return classes.join(' ');
|
|
971
|
-
}
|
|
972
|
-
|
|
973
|
-
if (module.exports) {
|
|
974
|
-
classNames.default = classNames;
|
|
975
|
-
module.exports = classNames;
|
|
976
|
-
} else {
|
|
977
|
-
window.classNames = classNames;
|
|
978
|
-
}
|
|
979
|
-
}());
|
|
980
|
-
} (classnames));
|
|
981
|
-
|
|
982
|
-
var classNames = classnames.exports;
|
|
983
|
-
|
|
984
|
-
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
985
|
-
/**
|
|
986
|
-
* This function debounce the received function
|
|
987
|
-
* @param { function } func Function to be debounced
|
|
988
|
-
* @param { number } wait Time to wait before execut the function
|
|
989
|
-
* @param { boolean } immediate Param to define if the function will be executed immediately
|
|
990
|
-
*/
|
|
991
|
-
const debounce = (func, wait, immediate) => {
|
|
992
|
-
let timeout = null;
|
|
993
|
-
return function debounced(...args) {
|
|
994
|
-
const later = () => {
|
|
995
|
-
timeout = null;
|
|
996
|
-
if (!immediate) {
|
|
997
|
-
func.apply(this, args);
|
|
998
|
-
}
|
|
999
|
-
};
|
|
1000
|
-
if (timeout) {
|
|
1001
|
-
clearTimeout(timeout);
|
|
1002
|
-
}
|
|
1003
|
-
timeout = setTimeout(later, wait);
|
|
1004
|
-
};
|
|
1005
|
-
};
|
|
1006
|
-
|
|
1007
|
-
const TooltipContent = ({ content }) => {
|
|
1008
|
-
return jsxRuntime.exports.jsx("span", { dangerouslySetInnerHTML: { __html: content } });
|
|
1
|
+
var __create = Object.create;
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
6
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
+
var __commonJS = (cb, mod) => function __require() {
|
|
8
|
+
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
|
|
1009
9
|
};
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
},
|
|
1018
|
-
detach: () => {
|
|
1019
|
-
/* detach anchor element */
|
|
1020
|
-
},
|
|
1021
|
-
setActiveAnchor: () => {
|
|
1022
|
-
/* set active anchor */
|
|
1023
|
-
},
|
|
1024
|
-
};
|
|
1025
|
-
const DEFAULT_CONTEXT_DATA_WRAPPER = {
|
|
1026
|
-
getTooltipData: () => DEFAULT_CONTEXT_DATA,
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
1027
17
|
};
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
|
|
1035
|
-
|
|
1036
|
-
|
|
1037
|
-
|
|
1038
|
-
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
|
|
1046
|
-
|
|
1047
|
-
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
|
|
1051
|
-
|
|
1052
|
-
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
|
-
|
|
18
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
19
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
20
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
21
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
22
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
23
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
24
|
+
mod
|
|
25
|
+
));
|
|
26
|
+
|
|
27
|
+
// node_modules/classnames/index.js
|
|
28
|
+
var require_classnames = __commonJS({
|
|
29
|
+
"node_modules/classnames/index.js"(exports, module) {
|
|
30
|
+
(function() {
|
|
31
|
+
"use strict";
|
|
32
|
+
var hasOwn = {}.hasOwnProperty;
|
|
33
|
+
var nativeCodeString = "[native code]";
|
|
34
|
+
function classNames3() {
|
|
35
|
+
var classes = [];
|
|
36
|
+
for (var i3 = 0; i3 < arguments.length; i3++) {
|
|
37
|
+
var arg = arguments[i3];
|
|
38
|
+
if (!arg)
|
|
39
|
+
continue;
|
|
40
|
+
var argType = typeof arg;
|
|
41
|
+
if (argType === "string" || argType === "number") {
|
|
42
|
+
classes.push(arg);
|
|
43
|
+
} else if (Array.isArray(arg)) {
|
|
44
|
+
if (arg.length) {
|
|
45
|
+
var inner = classNames3.apply(null, arg);
|
|
46
|
+
if (inner) {
|
|
47
|
+
classes.push(inner);
|
|
48
|
+
}
|
|
1056
49
|
}
|
|
1057
|
-
|
|
1058
|
-
|
|
1059
|
-
|
|
1060
|
-
|
|
1061
|
-
};
|
|
1062
|
-
const setActiveAnchor = (tooltipId, ref) => {
|
|
1063
|
-
setActiveAnchorMap((oldMap) => {
|
|
1064
|
-
var _a;
|
|
1065
|
-
if (((_a = oldMap[tooltipId]) === null || _a === void 0 ? void 0 : _a.current) === ref.current) {
|
|
1066
|
-
return oldMap;
|
|
50
|
+
} else if (argType === "object") {
|
|
51
|
+
if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes("[native code]")) {
|
|
52
|
+
classes.push(arg.toString());
|
|
53
|
+
continue;
|
|
1067
54
|
}
|
|
1068
|
-
|
|
1069
|
-
|
|
1070
|
-
|
|
1071
|
-
|
|
1072
|
-
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
|
|
1076
|
-
|
|
1077
|
-
|
|
1078
|
-
|
|
1079
|
-
|
|
55
|
+
for (var key in arg) {
|
|
56
|
+
if (hasOwn.call(arg, key) && arg[key]) {
|
|
57
|
+
classes.push(key);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
return classes.join(" ");
|
|
63
|
+
}
|
|
64
|
+
if (typeof module !== "undefined" && module.exports) {
|
|
65
|
+
classNames3.default = classNames3;
|
|
66
|
+
module.exports = classNames3;
|
|
67
|
+
} else if (typeof define === "function" && typeof define.amd === "object" && define.amd) {
|
|
68
|
+
define("classnames", [], function() {
|
|
69
|
+
return classNames3;
|
|
1080
70
|
});
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
};
|
|
1086
|
-
}, [getTooltipData]);
|
|
1087
|
-
return jsxRuntime.exports.jsx(TooltipContext.Provider, { value: context, children: children });
|
|
1088
|
-
};
|
|
1089
|
-
function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
|
|
1090
|
-
return useContext(TooltipContext).getTooltipData(tooltipId);
|
|
1091
|
-
}
|
|
1092
|
-
|
|
1093
|
-
/**
|
|
1094
|
-
* @deprecated Use the `data-tooltip-id` attribute, or the `anchorSelect` prop instead.
|
|
1095
|
-
* See https://react-tooltip.com/docs/getting-started
|
|
1096
|
-
*/
|
|
1097
|
-
const TooltipWrapper = ({ tooltipId, children, className, place, content, html, variant, offset, wrapper, events, positionStrategy, delayShow, delayHide, }) => {
|
|
1098
|
-
const { attach, detach } = useTooltip(tooltipId);
|
|
1099
|
-
const anchorRef = useRef(null);
|
|
1100
|
-
useEffect(() => {
|
|
1101
|
-
attach(anchorRef);
|
|
1102
|
-
return () => {
|
|
1103
|
-
detach(anchorRef);
|
|
1104
|
-
};
|
|
1105
|
-
}, []);
|
|
1106
|
-
return (jsxRuntime.exports.jsx("span", { ref: anchorRef, className: classNames('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: children }));
|
|
1107
|
-
};
|
|
1108
|
-
|
|
1109
|
-
const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
|
|
1110
|
-
|
|
1111
|
-
function getAlignment(placement) {
|
|
1112
|
-
return placement.split('-')[1];
|
|
1113
|
-
}
|
|
1114
|
-
|
|
1115
|
-
function getLengthFromAxis(axis) {
|
|
1116
|
-
return axis === 'y' ? 'height' : 'width';
|
|
1117
|
-
}
|
|
1118
|
-
|
|
1119
|
-
function getSide(placement) {
|
|
1120
|
-
return placement.split('-')[0];
|
|
1121
|
-
}
|
|
1122
|
-
|
|
1123
|
-
function getMainAxisFromPlacement(placement) {
|
|
1124
|
-
return ['top', 'bottom'].includes(getSide(placement)) ? 'x' : 'y';
|
|
1125
|
-
}
|
|
1126
|
-
|
|
1127
|
-
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
1128
|
-
let {
|
|
1129
|
-
reference,
|
|
1130
|
-
floating
|
|
1131
|
-
} = _ref;
|
|
1132
|
-
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
1133
|
-
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
1134
|
-
const mainAxis = getMainAxisFromPlacement(placement);
|
|
1135
|
-
const length = getLengthFromAxis(mainAxis);
|
|
1136
|
-
const commonAlign = reference[length] / 2 - floating[length] / 2;
|
|
1137
|
-
const side = getSide(placement);
|
|
1138
|
-
const isVertical = mainAxis === 'x';
|
|
1139
|
-
let coords;
|
|
1140
|
-
switch (side) {
|
|
1141
|
-
case 'top':
|
|
1142
|
-
coords = {
|
|
1143
|
-
x: commonX,
|
|
1144
|
-
y: reference.y - floating.height
|
|
1145
|
-
};
|
|
1146
|
-
break;
|
|
1147
|
-
case 'bottom':
|
|
1148
|
-
coords = {
|
|
1149
|
-
x: commonX,
|
|
1150
|
-
y: reference.y + reference.height
|
|
1151
|
-
};
|
|
1152
|
-
break;
|
|
1153
|
-
case 'right':
|
|
1154
|
-
coords = {
|
|
1155
|
-
x: reference.x + reference.width,
|
|
1156
|
-
y: commonY
|
|
1157
|
-
};
|
|
1158
|
-
break;
|
|
1159
|
-
case 'left':
|
|
1160
|
-
coords = {
|
|
1161
|
-
x: reference.x - floating.width,
|
|
1162
|
-
y: commonY
|
|
1163
|
-
};
|
|
1164
|
-
break;
|
|
1165
|
-
default:
|
|
1166
|
-
coords = {
|
|
1167
|
-
x: reference.x,
|
|
1168
|
-
y: reference.y
|
|
1169
|
-
};
|
|
1170
|
-
}
|
|
1171
|
-
switch (getAlignment(placement)) {
|
|
1172
|
-
case 'start':
|
|
1173
|
-
coords[mainAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
1174
|
-
break;
|
|
1175
|
-
case 'end':
|
|
1176
|
-
coords[mainAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
1177
|
-
break;
|
|
71
|
+
} else {
|
|
72
|
+
window.classNames = classNames3;
|
|
73
|
+
}
|
|
74
|
+
})();
|
|
1178
75
|
}
|
|
1179
|
-
|
|
1180
|
-
}
|
|
76
|
+
});
|
|
1181
77
|
|
|
1182
|
-
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
|
|
1186
|
-
|
|
1187
|
-
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(floating));
|
|
1198
|
-
{
|
|
1199
|
-
if (platform == null) {
|
|
1200
|
-
console.error(['Floating UI: `platform` property was not passed to config. If you', 'want to use Floating UI on the web, install @floating-ui/dom', 'instead of the /core package. Otherwise, you can create your own', '`platform`: https://floating-ui.com/docs/platform'].join(' '));
|
|
1201
|
-
}
|
|
1202
|
-
if (validMiddleware.filter(_ref => {
|
|
1203
|
-
let {
|
|
1204
|
-
name
|
|
1205
|
-
} = _ref;
|
|
1206
|
-
return name === 'autoPlacement' || name === 'flip';
|
|
1207
|
-
}).length > 1) {
|
|
1208
|
-
throw new Error(['Floating UI: duplicate `flip` and/or `autoPlacement` middleware', 'detected. This will lead to an infinite loop. Ensure only one of', 'either has been passed to the `middleware` array.'].join(' '));
|
|
1209
|
-
}
|
|
1210
|
-
if (!reference || !floating) {
|
|
1211
|
-
console.error(['Floating UI: The reference and/or floating element was not defined', 'when `computePosition()` was called. Ensure that both elements have', 'been created and can be measured.'].join(' '));
|
|
1212
|
-
}
|
|
1213
|
-
}
|
|
1214
|
-
let rects = await platform.getElementRects({
|
|
1215
|
-
reference,
|
|
1216
|
-
floating,
|
|
1217
|
-
strategy
|
|
1218
|
-
});
|
|
1219
|
-
let {
|
|
1220
|
-
x,
|
|
1221
|
-
y
|
|
1222
|
-
} = computeCoordsFromPlacement(rects, placement, rtl);
|
|
1223
|
-
let statefulPlacement = placement;
|
|
1224
|
-
let middlewareData = {};
|
|
1225
|
-
let resetCount = 0;
|
|
1226
|
-
for (let i = 0; i < validMiddleware.length; i++) {
|
|
1227
|
-
const {
|
|
1228
|
-
name,
|
|
1229
|
-
fn
|
|
1230
|
-
} = validMiddleware[i];
|
|
1231
|
-
const {
|
|
1232
|
-
x: nextX,
|
|
1233
|
-
y: nextY,
|
|
1234
|
-
data,
|
|
1235
|
-
reset
|
|
1236
|
-
} = await fn({
|
|
1237
|
-
x,
|
|
1238
|
-
y,
|
|
1239
|
-
initialPlacement: placement,
|
|
1240
|
-
placement: statefulPlacement,
|
|
1241
|
-
strategy,
|
|
1242
|
-
middlewareData,
|
|
1243
|
-
rects,
|
|
1244
|
-
platform,
|
|
1245
|
-
elements: {
|
|
1246
|
-
reference,
|
|
1247
|
-
floating
|
|
1248
|
-
}
|
|
1249
|
-
});
|
|
1250
|
-
x = nextX != null ? nextX : x;
|
|
1251
|
-
y = nextY != null ? nextY : y;
|
|
1252
|
-
middlewareData = {
|
|
1253
|
-
...middlewareData,
|
|
1254
|
-
[name]: {
|
|
1255
|
-
...middlewareData[name],
|
|
1256
|
-
...data
|
|
78
|
+
// src/components/TooltipController/TooltipController.tsx
|
|
79
|
+
import { useEffect as useEffect4, useState as useState3 } from "react";
|
|
80
|
+
|
|
81
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
82
|
+
var import_classnames2 = __toESM(require_classnames());
|
|
83
|
+
import { useEffect as useEffect3, useState as useState2, useRef as useRef2 } from "react";
|
|
84
|
+
|
|
85
|
+
// src/utils/debounce.ts
|
|
86
|
+
var debounce = (func, wait, immediate) => {
|
|
87
|
+
let timeout = null;
|
|
88
|
+
return function debounced(...args) {
|
|
89
|
+
const later = () => {
|
|
90
|
+
timeout = null;
|
|
91
|
+
if (!immediate) {
|
|
92
|
+
func.apply(this, args);
|
|
1257
93
|
}
|
|
1258
94
|
};
|
|
1259
|
-
{
|
|
1260
|
-
|
|
1261
|
-
console.warn(['Floating UI: The middleware lifecycle appears to be running in an', 'infinite loop. This is usually caused by a `reset` continually', 'being returned without a break condition.'].join(' '));
|
|
1262
|
-
}
|
|
95
|
+
if (timeout) {
|
|
96
|
+
clearTimeout(timeout);
|
|
1263
97
|
}
|
|
1264
|
-
|
|
1265
|
-
resetCount++;
|
|
1266
|
-
if (typeof reset === 'object') {
|
|
1267
|
-
if (reset.placement) {
|
|
1268
|
-
statefulPlacement = reset.placement;
|
|
1269
|
-
}
|
|
1270
|
-
if (reset.rects) {
|
|
1271
|
-
rects = reset.rects === true ? await platform.getElementRects({
|
|
1272
|
-
reference,
|
|
1273
|
-
floating,
|
|
1274
|
-
strategy
|
|
1275
|
-
}) : reset.rects;
|
|
1276
|
-
}
|
|
1277
|
-
({
|
|
1278
|
-
x,
|
|
1279
|
-
y
|
|
1280
|
-
} = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
|
|
1281
|
-
}
|
|
1282
|
-
i = -1;
|
|
1283
|
-
continue;
|
|
1284
|
-
}
|
|
1285
|
-
}
|
|
1286
|
-
return {
|
|
1287
|
-
x,
|
|
1288
|
-
y,
|
|
1289
|
-
placement: statefulPlacement,
|
|
1290
|
-
strategy,
|
|
1291
|
-
middlewareData
|
|
98
|
+
timeout = setTimeout(later, wait);
|
|
1292
99
|
};
|
|
1293
100
|
};
|
|
101
|
+
var debounce_default = debounce;
|
|
1294
102
|
|
|
1295
|
-
|
|
1296
|
-
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
bottom: 0,
|
|
1300
|
-
left: 0,
|
|
1301
|
-
...padding
|
|
1302
|
-
};
|
|
1303
|
-
}
|
|
1304
|
-
|
|
1305
|
-
function getSideObjectFromPadding(padding) {
|
|
1306
|
-
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
1307
|
-
top: padding,
|
|
1308
|
-
right: padding,
|
|
1309
|
-
bottom: padding,
|
|
1310
|
-
left: padding
|
|
1311
|
-
};
|
|
1312
|
-
}
|
|
1313
|
-
|
|
1314
|
-
function rectToClientRect(rect) {
|
|
1315
|
-
return {
|
|
1316
|
-
...rect,
|
|
1317
|
-
top: rect.y,
|
|
1318
|
-
left: rect.x,
|
|
1319
|
-
right: rect.x + rect.width,
|
|
1320
|
-
bottom: rect.y + rect.height
|
|
1321
|
-
};
|
|
1322
|
-
}
|
|
1323
|
-
|
|
1324
|
-
/**
|
|
1325
|
-
* Resolves with an object of overflow side offsets that determine how much the
|
|
1326
|
-
* element is overflowing a given clipping boundary.
|
|
1327
|
-
* - positive = overflowing the boundary by that number of pixels
|
|
1328
|
-
* - negative = how many pixels left before it will overflow
|
|
1329
|
-
* - 0 = lies flush with the boundary
|
|
1330
|
-
* @see https://floating-ui.com/docs/detectOverflow
|
|
1331
|
-
*/
|
|
1332
|
-
async function detectOverflow(middlewareArguments, options) {
|
|
1333
|
-
var _await$platform$isEle;
|
|
1334
|
-
if (options === void 0) {
|
|
1335
|
-
options = {};
|
|
1336
|
-
}
|
|
1337
|
-
const {
|
|
1338
|
-
x,
|
|
1339
|
-
y,
|
|
1340
|
-
platform,
|
|
1341
|
-
rects,
|
|
1342
|
-
elements,
|
|
1343
|
-
strategy
|
|
1344
|
-
} = middlewareArguments;
|
|
1345
|
-
const {
|
|
1346
|
-
boundary = 'clippingAncestors',
|
|
1347
|
-
rootBoundary = 'viewport',
|
|
1348
|
-
elementContext = 'floating',
|
|
1349
|
-
altBoundary = false,
|
|
1350
|
-
padding = 0
|
|
1351
|
-
} = options;
|
|
1352
|
-
const paddingObject = getSideObjectFromPadding(padding);
|
|
1353
|
-
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
1354
|
-
const element = elements[altBoundary ? altContext : elementContext];
|
|
1355
|
-
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
1356
|
-
element: ((_await$platform$isEle = await (platform.isElement == null ? void 0 : platform.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || (await (platform.getDocumentElement == null ? void 0 : platform.getDocumentElement(elements.floating))),
|
|
1357
|
-
boundary,
|
|
1358
|
-
rootBoundary,
|
|
1359
|
-
strategy
|
|
1360
|
-
}));
|
|
1361
|
-
const rect = elementContext === 'floating' ? {
|
|
1362
|
-
...rects.floating,
|
|
1363
|
-
x,
|
|
1364
|
-
y
|
|
1365
|
-
} : rects.reference;
|
|
1366
|
-
const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
|
|
1367
|
-
const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
|
|
1368
|
-
x: 1,
|
|
1369
|
-
y: 1
|
|
1370
|
-
} : {
|
|
1371
|
-
x: 1,
|
|
1372
|
-
y: 1
|
|
1373
|
-
};
|
|
1374
|
-
const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
|
|
1375
|
-
rect,
|
|
1376
|
-
offsetParent,
|
|
1377
|
-
strategy
|
|
1378
|
-
}) : rect);
|
|
1379
|
-
return {
|
|
1380
|
-
top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
|
|
1381
|
-
bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
|
|
1382
|
-
left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
|
|
1383
|
-
right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
|
|
1384
|
-
};
|
|
1385
|
-
}
|
|
1386
|
-
|
|
1387
|
-
const min$1 = Math.min;
|
|
1388
|
-
const max$1 = Math.max;
|
|
1389
|
-
|
|
1390
|
-
function within(min$1$1, value, max$1$1) {
|
|
1391
|
-
return max$1(min$1$1, min$1(value, max$1$1));
|
|
1392
|
-
}
|
|
1393
|
-
|
|
1394
|
-
/**
|
|
1395
|
-
* Positions an inner element of the floating element such that it is centered
|
|
1396
|
-
* to the reference element.
|
|
1397
|
-
* @see https://floating-ui.com/docs/arrow
|
|
1398
|
-
*/
|
|
1399
|
-
const arrow = options => ({
|
|
1400
|
-
name: 'arrow',
|
|
1401
|
-
options,
|
|
1402
|
-
async fn(middlewareArguments) {
|
|
1403
|
-
// Since `element` is required, we don't Partial<> the type.
|
|
1404
|
-
const {
|
|
1405
|
-
element,
|
|
1406
|
-
padding = 0
|
|
1407
|
-
} = options || {};
|
|
1408
|
-
const {
|
|
1409
|
-
x,
|
|
1410
|
-
y,
|
|
1411
|
-
placement,
|
|
1412
|
-
rects,
|
|
1413
|
-
platform
|
|
1414
|
-
} = middlewareArguments;
|
|
1415
|
-
if (element == null) {
|
|
1416
|
-
{
|
|
1417
|
-
console.warn('Floating UI: No `element` was passed to the `arrow` middleware.');
|
|
1418
|
-
}
|
|
1419
|
-
return {};
|
|
1420
|
-
}
|
|
1421
|
-
const paddingObject = getSideObjectFromPadding(padding);
|
|
1422
|
-
const coords = {
|
|
1423
|
-
x,
|
|
1424
|
-
y
|
|
1425
|
-
};
|
|
1426
|
-
const axis = getMainAxisFromPlacement(placement);
|
|
1427
|
-
const length = getLengthFromAxis(axis);
|
|
1428
|
-
const arrowDimensions = await platform.getDimensions(element);
|
|
1429
|
-
const minProp = axis === 'y' ? 'top' : 'left';
|
|
1430
|
-
const maxProp = axis === 'y' ? 'bottom' : 'right';
|
|
1431
|
-
const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
|
|
1432
|
-
const startDiff = coords[axis] - rects.reference[axis];
|
|
1433
|
-
const arrowOffsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(element));
|
|
1434
|
-
let clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
|
|
1435
|
-
if (clientSize === 0) {
|
|
1436
|
-
clientSize = rects.floating[length];
|
|
1437
|
-
}
|
|
1438
|
-
const centerToReference = endDiff / 2 - startDiff / 2;
|
|
1439
|
-
|
|
1440
|
-
// Make sure the arrow doesn't overflow the floating element if the center
|
|
1441
|
-
// point is outside the floating element's bounds.
|
|
1442
|
-
const min = paddingObject[minProp];
|
|
1443
|
-
const max = clientSize - arrowDimensions[length] - paddingObject[maxProp];
|
|
1444
|
-
const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
|
|
1445
|
-
const offset = within(min, center, max);
|
|
1446
|
-
|
|
1447
|
-
// If the reference is small enough that the arrow's padding causes it to
|
|
1448
|
-
// to point to nothing for an aligned placement, adjust the offset of the
|
|
1449
|
-
// floating element itself. This stops `shift()` from taking action, but can
|
|
1450
|
-
// be worked around by calling it again after the `arrow()` if desired.
|
|
1451
|
-
const shouldAddOffset = getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min ? paddingObject[minProp] : paddingObject[maxProp]) - arrowDimensions[length] / 2 < 0;
|
|
1452
|
-
const alignmentOffset = shouldAddOffset ? center < min ? min - center : max - center : 0;
|
|
1453
|
-
return {
|
|
1454
|
-
[axis]: coords[axis] - alignmentOffset,
|
|
1455
|
-
data: {
|
|
1456
|
-
[axis]: offset,
|
|
1457
|
-
centerOffset: center - offset
|
|
1458
|
-
}
|
|
1459
|
-
};
|
|
1460
|
-
}
|
|
1461
|
-
});
|
|
1462
|
-
|
|
1463
|
-
const oppositeSideMap = {
|
|
1464
|
-
left: 'right',
|
|
1465
|
-
right: 'left',
|
|
1466
|
-
bottom: 'top',
|
|
1467
|
-
top: 'bottom'
|
|
103
|
+
// src/components/TooltipContent/TooltipContent.tsx
|
|
104
|
+
import { jsx } from "react/jsx-runtime";
|
|
105
|
+
var TooltipContent = ({ content }) => {
|
|
106
|
+
return /* @__PURE__ */ jsx("span", { dangerouslySetInnerHTML: { __html: content } });
|
|
1468
107
|
};
|
|
1469
|
-
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
|
|
1476
|
-
|
|
1477
|
-
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1482
|
-
|
|
108
|
+
var TooltipContent_default = TooltipContent;
|
|
109
|
+
|
|
110
|
+
// src/components/TooltipProvider/TooltipProvider.tsx
|
|
111
|
+
import {
|
|
112
|
+
createContext,
|
|
113
|
+
useCallback,
|
|
114
|
+
useContext,
|
|
115
|
+
useMemo,
|
|
116
|
+
useState
|
|
117
|
+
} from "react";
|
|
118
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
119
|
+
var DEFAULT_TOOLTIP_ID = "DEFAULT_TOOLTIP_ID";
|
|
120
|
+
var DEFAULT_CONTEXT_DATA = {
|
|
121
|
+
anchorRefs: /* @__PURE__ */ new Set(),
|
|
122
|
+
activeAnchor: { current: null },
|
|
123
|
+
attach: () => {
|
|
124
|
+
},
|
|
125
|
+
detach: () => {
|
|
126
|
+
},
|
|
127
|
+
setActiveAnchor: () => {
|
|
1483
128
|
}
|
|
1484
|
-
return {
|
|
1485
|
-
main: mainAlignmentSide,
|
|
1486
|
-
cross: getOppositePlacement(mainAlignmentSide)
|
|
1487
|
-
};
|
|
1488
|
-
}
|
|
1489
|
-
|
|
1490
|
-
const oppositeAlignmentMap = {
|
|
1491
|
-
start: 'end',
|
|
1492
|
-
end: 'start'
|
|
1493
129
|
};
|
|
1494
|
-
|
|
1495
|
-
|
|
1496
|
-
}
|
|
1497
|
-
|
|
1498
|
-
function getExpandedPlacements(placement) {
|
|
1499
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
1500
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
1501
|
-
}
|
|
1502
|
-
|
|
1503
|
-
function getSideList(side, isStart, rtl) {
|
|
1504
|
-
const lr = ['left', 'right'];
|
|
1505
|
-
const rl = ['right', 'left'];
|
|
1506
|
-
const tb = ['top', 'bottom'];
|
|
1507
|
-
const bt = ['bottom', 'top'];
|
|
1508
|
-
switch (side) {
|
|
1509
|
-
case 'top':
|
|
1510
|
-
case 'bottom':
|
|
1511
|
-
if (rtl) return isStart ? rl : lr;
|
|
1512
|
-
return isStart ? lr : rl;
|
|
1513
|
-
case 'left':
|
|
1514
|
-
case 'right':
|
|
1515
|
-
return isStart ? tb : bt;
|
|
1516
|
-
default:
|
|
1517
|
-
return [];
|
|
1518
|
-
}
|
|
1519
|
-
}
|
|
1520
|
-
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
1521
|
-
const alignment = getAlignment(placement);
|
|
1522
|
-
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
1523
|
-
if (alignment) {
|
|
1524
|
-
list = list.map(side => side + "-" + alignment);
|
|
1525
|
-
if (flipAlignment) {
|
|
1526
|
-
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
1527
|
-
}
|
|
1528
|
-
}
|
|
1529
|
-
return list;
|
|
1530
|
-
}
|
|
1531
|
-
|
|
1532
|
-
/**
|
|
1533
|
-
* Changes the placement of the floating element to one that will fit if the
|
|
1534
|
-
* initially specified `placement` does not.
|
|
1535
|
-
* @see https://floating-ui.com/docs/flip
|
|
1536
|
-
*/
|
|
1537
|
-
const flip = function (options) {
|
|
1538
|
-
if (options === void 0) {
|
|
1539
|
-
options = {};
|
|
1540
|
-
}
|
|
1541
|
-
return {
|
|
1542
|
-
name: 'flip',
|
|
1543
|
-
options,
|
|
1544
|
-
async fn(middlewareArguments) {
|
|
1545
|
-
var _middlewareData$flip;
|
|
1546
|
-
const {
|
|
1547
|
-
placement,
|
|
1548
|
-
middlewareData,
|
|
1549
|
-
rects,
|
|
1550
|
-
initialPlacement,
|
|
1551
|
-
platform,
|
|
1552
|
-
elements
|
|
1553
|
-
} = middlewareArguments;
|
|
1554
|
-
const {
|
|
1555
|
-
mainAxis: checkMainAxis = true,
|
|
1556
|
-
crossAxis: checkCrossAxis = true,
|
|
1557
|
-
fallbackPlacements: specifiedFallbackPlacements,
|
|
1558
|
-
fallbackStrategy = 'bestFit',
|
|
1559
|
-
fallbackAxisSideDirection = 'none',
|
|
1560
|
-
flipAlignment = true,
|
|
1561
|
-
...detectOverflowOptions
|
|
1562
|
-
} = options;
|
|
1563
|
-
const side = getSide(placement);
|
|
1564
|
-
const isBasePlacement = getSide(initialPlacement) === initialPlacement;
|
|
1565
|
-
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
1566
|
-
const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
|
|
1567
|
-
if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
|
|
1568
|
-
fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
|
|
1569
|
-
}
|
|
1570
|
-
const placements = [initialPlacement, ...fallbackPlacements];
|
|
1571
|
-
const overflow = await detectOverflow(middlewareArguments, detectOverflowOptions);
|
|
1572
|
-
const overflows = [];
|
|
1573
|
-
let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
|
|
1574
|
-
if (checkMainAxis) {
|
|
1575
|
-
overflows.push(overflow[side]);
|
|
1576
|
-
}
|
|
1577
|
-
if (checkCrossAxis) {
|
|
1578
|
-
const {
|
|
1579
|
-
main,
|
|
1580
|
-
cross
|
|
1581
|
-
} = getAlignmentSides(placement, rects, rtl);
|
|
1582
|
-
overflows.push(overflow[main], overflow[cross]);
|
|
1583
|
-
}
|
|
1584
|
-
overflowsData = [...overflowsData, {
|
|
1585
|
-
placement,
|
|
1586
|
-
overflows
|
|
1587
|
-
}];
|
|
1588
|
-
|
|
1589
|
-
// One or more sides is overflowing.
|
|
1590
|
-
if (!overflows.every(side => side <= 0)) {
|
|
1591
|
-
var _middlewareData$flip2, _overflowsData$find;
|
|
1592
|
-
const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
|
|
1593
|
-
const nextPlacement = placements[nextIndex];
|
|
1594
|
-
if (nextPlacement) {
|
|
1595
|
-
// Try next placement and re-run the lifecycle.
|
|
1596
|
-
return {
|
|
1597
|
-
data: {
|
|
1598
|
-
index: nextIndex,
|
|
1599
|
-
overflows: overflowsData
|
|
1600
|
-
},
|
|
1601
|
-
reset: {
|
|
1602
|
-
placement: nextPlacement
|
|
1603
|
-
}
|
|
1604
|
-
};
|
|
1605
|
-
}
|
|
1606
|
-
|
|
1607
|
-
// First, try to use the one that fits on mainAxis side of overflow.
|
|
1608
|
-
let resetPlacement = (_overflowsData$find = overflowsData.find(d => d.overflows[0] <= 0)) == null ? void 0 : _overflowsData$find.placement;
|
|
1609
|
-
|
|
1610
|
-
// Otherwise fallback.
|
|
1611
|
-
if (!resetPlacement) {
|
|
1612
|
-
switch (fallbackStrategy) {
|
|
1613
|
-
case 'bestFit':
|
|
1614
|
-
{
|
|
1615
|
-
var _overflowsData$map$so;
|
|
1616
|
-
const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
|
|
1617
|
-
if (placement) {
|
|
1618
|
-
resetPlacement = placement;
|
|
1619
|
-
}
|
|
1620
|
-
break;
|
|
1621
|
-
}
|
|
1622
|
-
case 'initialPlacement':
|
|
1623
|
-
resetPlacement = initialPlacement;
|
|
1624
|
-
break;
|
|
1625
|
-
}
|
|
1626
|
-
}
|
|
1627
|
-
if (placement !== resetPlacement) {
|
|
1628
|
-
return {
|
|
1629
|
-
reset: {
|
|
1630
|
-
placement: resetPlacement
|
|
1631
|
-
}
|
|
1632
|
-
};
|
|
1633
|
-
}
|
|
1634
|
-
}
|
|
1635
|
-
return {};
|
|
1636
|
-
}
|
|
1637
|
-
};
|
|
130
|
+
var DEFAULT_CONTEXT_DATA_WRAPPER = {
|
|
131
|
+
getTooltipData: () => DEFAULT_CONTEXT_DATA
|
|
1638
132
|
};
|
|
1639
|
-
|
|
1640
|
-
|
|
1641
|
-
const {
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
|
|
1645
|
-
|
|
1646
|
-
|
|
1647
|
-
const
|
|
1648
|
-
|
|
1649
|
-
|
|
1650
|
-
|
|
1651
|
-
|
|
1652
|
-
|
|
1653
|
-
|
|
1654
|
-
// eslint-disable-next-line prefer-const
|
|
1655
|
-
let {
|
|
1656
|
-
mainAxis,
|
|
1657
|
-
crossAxis,
|
|
1658
|
-
alignmentAxis
|
|
1659
|
-
} = typeof rawValue === 'number' ? {
|
|
1660
|
-
mainAxis: rawValue,
|
|
1661
|
-
crossAxis: 0,
|
|
1662
|
-
alignmentAxis: null
|
|
1663
|
-
} : {
|
|
1664
|
-
mainAxis: 0,
|
|
1665
|
-
crossAxis: 0,
|
|
1666
|
-
alignmentAxis: null,
|
|
1667
|
-
...rawValue
|
|
133
|
+
var TooltipContext = createContext(DEFAULT_CONTEXT_DATA_WRAPPER);
|
|
134
|
+
var TooltipProvider = ({ children }) => {
|
|
135
|
+
const [anchorRefMap, setAnchorRefMap] = useState({
|
|
136
|
+
[DEFAULT_TOOLTIP_ID]: /* @__PURE__ */ new Set()
|
|
137
|
+
});
|
|
138
|
+
const [activeAnchorMap, setActiveAnchorMap] = useState({
|
|
139
|
+
[DEFAULT_TOOLTIP_ID]: { current: null }
|
|
140
|
+
});
|
|
141
|
+
const attach = (tooltipId, ...refs) => {
|
|
142
|
+
setAnchorRefMap((oldMap) => {
|
|
143
|
+
var _a;
|
|
144
|
+
const tooltipRefs = (_a = oldMap[tooltipId]) != null ? _a : /* @__PURE__ */ new Set();
|
|
145
|
+
refs.forEach((ref) => tooltipRefs.add(ref));
|
|
146
|
+
return { ...oldMap, [tooltipId]: new Set(tooltipRefs) };
|
|
147
|
+
});
|
|
1668
148
|
};
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
|
|
1675
|
-
|
|
1676
|
-
|
|
1677
|
-
|
|
149
|
+
const detach = (tooltipId, ...refs) => {
|
|
150
|
+
setAnchorRefMap((oldMap) => {
|
|
151
|
+
const tooltipRefs = oldMap[tooltipId];
|
|
152
|
+
if (!tooltipRefs) {
|
|
153
|
+
return oldMap;
|
|
154
|
+
}
|
|
155
|
+
refs.forEach((ref) => tooltipRefs.delete(ref));
|
|
156
|
+
return { ...oldMap };
|
|
157
|
+
});
|
|
1678
158
|
};
|
|
1679
|
-
|
|
1680
|
-
|
|
1681
|
-
|
|
1682
|
-
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
options: value,
|
|
1692
|
-
async fn(middlewareArguments) {
|
|
1693
|
-
const {
|
|
1694
|
-
x,
|
|
1695
|
-
y
|
|
1696
|
-
} = middlewareArguments;
|
|
1697
|
-
const diffCoords = await convertValueToCoords(middlewareArguments, value);
|
|
159
|
+
const setActiveAnchor = (tooltipId, ref) => {
|
|
160
|
+
setActiveAnchorMap((oldMap) => {
|
|
161
|
+
var _a;
|
|
162
|
+
if (((_a = oldMap[tooltipId]) == null ? void 0 : _a.current) === ref.current) {
|
|
163
|
+
return oldMap;
|
|
164
|
+
}
|
|
165
|
+
return { ...oldMap, [tooltipId]: ref };
|
|
166
|
+
});
|
|
167
|
+
};
|
|
168
|
+
const getTooltipData = useCallback(
|
|
169
|
+
(tooltipId = DEFAULT_TOOLTIP_ID) => {
|
|
170
|
+
var _a, _b;
|
|
1698
171
|
return {
|
|
1699
|
-
|
|
1700
|
-
|
|
1701
|
-
|
|
172
|
+
anchorRefs: (_a = anchorRefMap[tooltipId]) != null ? _a : /* @__PURE__ */ new Set(),
|
|
173
|
+
activeAnchor: (_b = activeAnchorMap[tooltipId]) != null ? _b : { current: null },
|
|
174
|
+
attach: (...refs) => attach(tooltipId, ...refs),
|
|
175
|
+
detach: (...refs) => detach(tooltipId, ...refs),
|
|
176
|
+
setActiveAnchor: (ref) => setActiveAnchor(tooltipId, ref)
|
|
1702
177
|
};
|
|
1703
|
-
}
|
|
1704
|
-
|
|
178
|
+
},
|
|
179
|
+
[anchorRefMap, activeAnchorMap, attach, detach]
|
|
180
|
+
);
|
|
181
|
+
const context = useMemo(() => {
|
|
182
|
+
return {
|
|
183
|
+
getTooltipData
|
|
184
|
+
};
|
|
185
|
+
}, [getTooltipData]);
|
|
186
|
+
return /* @__PURE__ */ jsx2(TooltipContext.Provider, { value: context, children });
|
|
1705
187
|
};
|
|
1706
|
-
|
|
1707
|
-
|
|
1708
|
-
return axis === 'x' ? 'y' : 'x';
|
|
188
|
+
function useTooltip(tooltipId = DEFAULT_TOOLTIP_ID) {
|
|
189
|
+
return useContext(TooltipContext).getTooltipData(tooltipId);
|
|
1709
190
|
}
|
|
1710
|
-
|
|
1711
|
-
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
|
|
1744
|
-
|
|
1745
|
-
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
if (checkMainAxis) {
|
|
1756
|
-
const minSide = mainAxis === 'y' ? 'top' : 'left';
|
|
1757
|
-
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
1758
|
-
const min = mainAxisCoord + overflow[minSide];
|
|
1759
|
-
const max = mainAxisCoord - overflow[maxSide];
|
|
1760
|
-
mainAxisCoord = within(min, mainAxisCoord, max);
|
|
1761
|
-
}
|
|
1762
|
-
if (checkCrossAxis) {
|
|
1763
|
-
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
1764
|
-
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
1765
|
-
const min = crossAxisCoord + overflow[minSide];
|
|
1766
|
-
const max = crossAxisCoord - overflow[maxSide];
|
|
1767
|
-
crossAxisCoord = within(min, crossAxisCoord, max);
|
|
1768
|
-
}
|
|
1769
|
-
const limitedCoords = limiter.fn({
|
|
1770
|
-
...middlewareArguments,
|
|
1771
|
-
[mainAxis]: mainAxisCoord,
|
|
1772
|
-
[crossAxis]: crossAxisCoord
|
|
1773
|
-
});
|
|
1774
|
-
return {
|
|
1775
|
-
...limitedCoords,
|
|
1776
|
-
data: {
|
|
1777
|
-
x: limitedCoords.x - x,
|
|
1778
|
-
y: limitedCoords.y - y
|
|
1779
|
-
}
|
|
1780
|
-
};
|
|
191
|
+
var TooltipProvider_default = TooltipProvider;
|
|
192
|
+
|
|
193
|
+
// src/components/TooltipProvider/TooltipWrapper.tsx
|
|
194
|
+
var import_classnames = __toESM(require_classnames());
|
|
195
|
+
import { useEffect, useRef } from "react";
|
|
196
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
197
|
+
var TooltipWrapper = ({
|
|
198
|
+
tooltipId,
|
|
199
|
+
children,
|
|
200
|
+
className,
|
|
201
|
+
place,
|
|
202
|
+
content,
|
|
203
|
+
html,
|
|
204
|
+
variant,
|
|
205
|
+
offset,
|
|
206
|
+
wrapper,
|
|
207
|
+
events,
|
|
208
|
+
positionStrategy,
|
|
209
|
+
delayShow,
|
|
210
|
+
delayHide
|
|
211
|
+
}) => {
|
|
212
|
+
const { attach, detach } = useTooltip(tooltipId);
|
|
213
|
+
const anchorRef = useRef(null);
|
|
214
|
+
useEffect(() => {
|
|
215
|
+
attach(anchorRef);
|
|
216
|
+
return () => {
|
|
217
|
+
detach(anchorRef);
|
|
218
|
+
};
|
|
219
|
+
}, []);
|
|
220
|
+
return /* @__PURE__ */ jsx3(
|
|
221
|
+
"span",
|
|
222
|
+
{
|
|
223
|
+
ref: anchorRef,
|
|
224
|
+
className: (0, import_classnames.default)("react-tooltip-wrapper", className),
|
|
225
|
+
"data-tooltip-place": place,
|
|
226
|
+
"data-tooltip-content": content,
|
|
227
|
+
"data-tooltip-html": html,
|
|
228
|
+
"data-tooltip-variant": variant,
|
|
229
|
+
"data-tooltip-offset": offset,
|
|
230
|
+
"data-tooltip-wrapper": wrapper,
|
|
231
|
+
"data-tooltip-events": events,
|
|
232
|
+
"data-tooltip-position-strategy": positionStrategy,
|
|
233
|
+
"data-tooltip-delay-show": delayShow,
|
|
234
|
+
"data-tooltip-delay-hide": delayHide,
|
|
235
|
+
children
|
|
1781
236
|
}
|
|
1782
|
-
|
|
237
|
+
);
|
|
1783
238
|
};
|
|
239
|
+
var TooltipWrapper_default = TooltipWrapper;
|
|
1784
240
|
|
|
1785
|
-
|
|
1786
|
-
|
|
1787
|
-
|
|
1788
|
-
|
|
241
|
+
// src/utils/use-isomorphic-layout-effect.ts
|
|
242
|
+
import { useLayoutEffect, useEffect as useEffect2 } from "react";
|
|
243
|
+
var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect2;
|
|
244
|
+
var use_isomorphic_layout_effect_default = useIsomorphicLayoutEffect;
|
|
1789
245
|
|
|
1790
|
-
|
|
1791
|
-
|
|
246
|
+
// node_modules/@floating-ui/core/dist/floating-ui.core.browser.min.mjs
|
|
247
|
+
function t(t2) {
|
|
248
|
+
return t2.split("-")[1];
|
|
1792
249
|
}
|
|
1793
|
-
|
|
1794
|
-
|
|
1795
|
-
const max = Math.max;
|
|
1796
|
-
const round = Math.round;
|
|
1797
|
-
|
|
1798
|
-
function getCssDimensions(element) {
|
|
1799
|
-
const css = getComputedStyle$1(element);
|
|
1800
|
-
let width = parseFloat(css.width);
|
|
1801
|
-
let height = parseFloat(css.height);
|
|
1802
|
-
const offsetWidth = element.offsetWidth;
|
|
1803
|
-
const offsetHeight = element.offsetHeight;
|
|
1804
|
-
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
1805
|
-
if (shouldFallback) {
|
|
1806
|
-
width = offsetWidth;
|
|
1807
|
-
height = offsetHeight;
|
|
1808
|
-
}
|
|
1809
|
-
return {
|
|
1810
|
-
width,
|
|
1811
|
-
height,
|
|
1812
|
-
fallback: shouldFallback
|
|
1813
|
-
};
|
|
250
|
+
function e(t2) {
|
|
251
|
+
return "y" === t2 ? "height" : "width";
|
|
1814
252
|
}
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
return isNode(node) ? (node.nodeName || '').toLowerCase() : '';
|
|
253
|
+
function n(t2) {
|
|
254
|
+
return t2.split("-")[0];
|
|
1818
255
|
}
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
256
|
+
function o(t2) {
|
|
257
|
+
return ["top", "bottom"].includes(n(t2)) ? "x" : "y";
|
|
258
|
+
}
|
|
259
|
+
function i(i3, r3, a3) {
|
|
260
|
+
let { reference: l3, floating: s3 } = i3;
|
|
261
|
+
const c3 = l3.x + l3.width / 2 - s3.width / 2, f3 = l3.y + l3.height / 2 - s3.height / 2, u3 = o(r3), m3 = e(u3), g3 = l3[m3] / 2 - s3[m3] / 2, d3 = "x" === u3;
|
|
262
|
+
let p3;
|
|
263
|
+
switch (n(r3)) {
|
|
264
|
+
case "top":
|
|
265
|
+
p3 = { x: c3, y: l3.y - s3.height };
|
|
266
|
+
break;
|
|
267
|
+
case "bottom":
|
|
268
|
+
p3 = { x: c3, y: l3.y + l3.height };
|
|
269
|
+
break;
|
|
270
|
+
case "right":
|
|
271
|
+
p3 = { x: l3.x + l3.width, y: f3 };
|
|
272
|
+
break;
|
|
273
|
+
case "left":
|
|
274
|
+
p3 = { x: l3.x - s3.width, y: f3 };
|
|
275
|
+
break;
|
|
276
|
+
default:
|
|
277
|
+
p3 = { x: l3.x, y: l3.y };
|
|
1824
278
|
}
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
279
|
+
switch (t(r3)) {
|
|
280
|
+
case "start":
|
|
281
|
+
p3[u3] -= g3 * (a3 && d3 ? -1 : 1);
|
|
282
|
+
break;
|
|
283
|
+
case "end":
|
|
284
|
+
p3[u3] += g3 * (a3 && d3 ? -1 : 1);
|
|
1829
285
|
}
|
|
1830
|
-
return
|
|
1831
|
-
}
|
|
1832
|
-
|
|
1833
|
-
function isHTMLElement(value) {
|
|
1834
|
-
return value instanceof getWindow(value).HTMLElement;
|
|
286
|
+
return p3;
|
|
1835
287
|
}
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
}
|
|
1839
|
-
|
|
1840
|
-
|
|
1841
|
-
}
|
|
1842
|
-
function isShadowRoot(node) {
|
|
1843
|
-
// Browsers without `ShadowRoot` support.
|
|
1844
|
-
if (typeof ShadowRoot === 'undefined') {
|
|
1845
|
-
return false;
|
|
288
|
+
var r = async (t2, e2, n3) => {
|
|
289
|
+
const { placement: o3 = "bottom", strategy: r3 = "absolute", middleware: a3 = [], platform: l3 } = n3, s3 = a3.filter(Boolean), c3 = await (null == l3.isRTL ? void 0 : l3.isRTL(e2));
|
|
290
|
+
let f3 = await l3.getElementRects({ reference: t2, floating: e2, strategy: r3 }), { x: u3, y: m3 } = i(f3, o3, c3), g3 = o3, d3 = {}, p3 = 0;
|
|
291
|
+
for (let n4 = 0; n4 < s3.length; n4++) {
|
|
292
|
+
const { name: a4, fn: h3 } = s3[n4], { x: y3, y: x3, data: w3, reset: v3 } = await h3({ x: u3, y: m3, initialPlacement: o3, placement: g3, strategy: r3, middlewareData: d3, rects: f3, platform: l3, elements: { reference: t2, floating: e2 } });
|
|
293
|
+
u3 = null != y3 ? y3 : u3, m3 = null != x3 ? x3 : m3, d3 = { ...d3, [a4]: { ...d3[a4], ...w3 } }, v3 && p3 <= 50 && (p3++, "object" == typeof v3 && (v3.placement && (g3 = v3.placement), v3.rects && (f3 = true === v3.rects ? await l3.getElementRects({ reference: t2, floating: e2, strategy: r3 }) : v3.rects), { x: u3, y: m3 } = i(f3, g3, c3)), n4 = -1);
|
|
1846
294
|
}
|
|
1847
|
-
|
|
1848
|
-
|
|
295
|
+
return { x: u3, y: m3, placement: g3, strategy: r3, middlewareData: d3 };
|
|
296
|
+
};
|
|
297
|
+
function a(t2) {
|
|
298
|
+
return "number" != typeof t2 ? function(t3) {
|
|
299
|
+
return { top: 0, right: 0, bottom: 0, left: 0, ...t3 };
|
|
300
|
+
}(t2) : { top: t2, right: t2, bottom: t2, left: t2 };
|
|
1849
301
|
}
|
|
1850
|
-
function
|
|
1851
|
-
|
|
1852
|
-
overflow,
|
|
1853
|
-
overflowX,
|
|
1854
|
-
overflowY,
|
|
1855
|
-
display
|
|
1856
|
-
} = getComputedStyle$1(element);
|
|
1857
|
-
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
|
|
302
|
+
function l(t2) {
|
|
303
|
+
return { ...t2, top: t2.y, left: t2.x, right: t2.x + t2.width, bottom: t2.y + t2.height };
|
|
1858
304
|
}
|
|
1859
|
-
function
|
|
1860
|
-
|
|
305
|
+
async function s(t2, e2) {
|
|
306
|
+
var n3;
|
|
307
|
+
void 0 === e2 && (e2 = {});
|
|
308
|
+
const { x: o3, y: i3, platform: r3, rects: s3, elements: c3, strategy: f3 } = t2, { boundary: u3 = "clippingAncestors", rootBoundary: m3 = "viewport", elementContext: g3 = "floating", altBoundary: d3 = false, padding: p3 = 0 } = e2, h3 = a(p3), y3 = c3[d3 ? "floating" === g3 ? "reference" : "floating" : g3], x3 = l(await r3.getClippingRect({ element: null == (n3 = await (null == r3.isElement ? void 0 : r3.isElement(y3))) || n3 ? y3 : y3.contextElement || await (null == r3.getDocumentElement ? void 0 : r3.getDocumentElement(c3.floating)), boundary: u3, rootBoundary: m3, strategy: f3 })), w3 = "floating" === g3 ? { ...s3.floating, x: o3, y: i3 } : s3.reference, v3 = await (null == r3.getOffsetParent ? void 0 : r3.getOffsetParent(c3.floating)), b3 = await (null == r3.isElement ? void 0 : r3.isElement(v3)) && await (null == r3.getScale ? void 0 : r3.getScale(v3)) || { x: 1, y: 1 }, R2 = l(r3.convertOffsetParentRelativeRectToViewportRelativeRect ? await r3.convertOffsetParentRelativeRectToViewportRelativeRect({ rect: w3, offsetParent: v3, strategy: f3 }) : w3);
|
|
309
|
+
return { top: (x3.top - R2.top + h3.top) / b3.y, bottom: (R2.bottom - x3.bottom + h3.bottom) / b3.y, left: (x3.left - R2.left + h3.left) / b3.x, right: (R2.right - x3.right + h3.right) / b3.x };
|
|
1861
310
|
}
|
|
1862
|
-
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
const backdropFilter = css.backdropFilter || css.WebkitBackdropFilter;
|
|
1867
|
-
|
|
1868
|
-
// This is non-exhaustive but covers the most common CSS properties that
|
|
1869
|
-
// create a containing block.
|
|
1870
|
-
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
1871
|
-
return css.transform !== 'none' || css.perspective !== 'none' || (backdropFilter ? backdropFilter !== 'none' : false) || isFirefox && css.willChange === 'filter' || isFirefox && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective'].some(value => css.willChange.includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => {
|
|
1872
|
-
// Add type check for old browsers.
|
|
1873
|
-
const contain = css.contain;
|
|
1874
|
-
return contain != null ? contain.includes(value) : false;
|
|
1875
|
-
});
|
|
311
|
+
var c = Math.min;
|
|
312
|
+
var f = Math.max;
|
|
313
|
+
function u(t2, e2, n3) {
|
|
314
|
+
return f(t2, c(e2, n3));
|
|
1876
315
|
}
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
|
|
1883
|
-
|
|
1884
|
-
|
|
1885
|
-
return
|
|
316
|
+
var m = (n3) => ({ name: "arrow", options: n3, async fn(i3) {
|
|
317
|
+
const { element: r3, padding: l3 = 0 } = n3 || {}, { x: s3, y: c3, placement: f3, rects: m3, platform: g3 } = i3;
|
|
318
|
+
if (null == r3)
|
|
319
|
+
return {};
|
|
320
|
+
const d3 = a(l3), p3 = { x: s3, y: c3 }, h3 = o(f3), y3 = e(h3), x3 = await g3.getDimensions(r3), w3 = "y" === h3 ? "top" : "left", v3 = "y" === h3 ? "bottom" : "right", b3 = m3.reference[y3] + m3.reference[h3] - p3[h3] - m3.floating[y3], R2 = p3[h3] - m3.reference[h3], A2 = await (null == g3.getOffsetParent ? void 0 : g3.getOffsetParent(r3));
|
|
321
|
+
let P3 = A2 ? "y" === h3 ? A2.clientHeight || 0 : A2.clientWidth || 0 : 0;
|
|
322
|
+
0 === P3 && (P3 = m3.floating[y3]);
|
|
323
|
+
const T3 = b3 / 2 - R2 / 2, O3 = d3[w3], D3 = P3 - x3[y3] - d3[v3], E3 = P3 / 2 - x3[y3] / 2 + T3, L3 = u(O3, E3, D3), k2 = null != t(f3) && E3 != L3 && m3.reference[y3] / 2 - (E3 < O3 ? d3[w3] : d3[v3]) - x3[y3] / 2 < 0;
|
|
324
|
+
return { [h3]: p3[h3] - (k2 ? E3 < O3 ? O3 - E3 : D3 - E3 : 0), data: { [h3]: L3, centerOffset: E3 - L3 } };
|
|
325
|
+
} });
|
|
326
|
+
var g = ["top", "right", "bottom", "left"];
|
|
327
|
+
var d = g.reduce((t2, e2) => t2.concat(e2, e2 + "-start", e2 + "-end"), []);
|
|
328
|
+
var p = { left: "right", right: "left", bottom: "top", top: "bottom" };
|
|
329
|
+
function h(t2) {
|
|
330
|
+
return t2.replace(/left|right|bottom|top/g, (t3) => p[t3]);
|
|
1886
331
|
}
|
|
1887
|
-
function
|
|
1888
|
-
|
|
332
|
+
function y(n3, i3, r3) {
|
|
333
|
+
void 0 === r3 && (r3 = false);
|
|
334
|
+
const a3 = t(n3), l3 = o(n3), s3 = e(l3);
|
|
335
|
+
let c3 = "x" === l3 ? a3 === (r3 ? "end" : "start") ? "right" : "left" : "start" === a3 ? "bottom" : "top";
|
|
336
|
+
return i3.reference[s3] > i3.floating[s3] && (c3 = h(c3)), { main: c3, cross: h(c3) };
|
|
1889
337
|
}
|
|
1890
|
-
|
|
1891
|
-
function
|
|
1892
|
-
return
|
|
1893
|
-
}
|
|
1894
|
-
|
|
1895
|
-
|
|
1896
|
-
|
|
1897
|
-
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
|
|
1916
|
-
|
|
1917
|
-
|
|
1918
|
-
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
|
|
1922
|
-
|
|
1923
|
-
y
|
|
1924
|
-
};
|
|
1925
|
-
}
|
|
1926
|
-
|
|
1927
|
-
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
1928
|
-
var _win$visualViewport, _win$visualViewport2;
|
|
1929
|
-
if (includeScale === void 0) {
|
|
1930
|
-
includeScale = false;
|
|
1931
|
-
}
|
|
1932
|
-
if (isFixedStrategy === void 0) {
|
|
1933
|
-
isFixedStrategy = false;
|
|
1934
|
-
}
|
|
1935
|
-
const clientRect = element.getBoundingClientRect();
|
|
1936
|
-
const domElement = unwrapElement(element);
|
|
1937
|
-
let scale = FALLBACK_SCALE;
|
|
1938
|
-
if (includeScale) {
|
|
1939
|
-
if (offsetParent) {
|
|
1940
|
-
if (isElement(offsetParent)) {
|
|
1941
|
-
scale = getScale(offsetParent);
|
|
1942
|
-
}
|
|
1943
|
-
} else {
|
|
1944
|
-
scale = getScale(element);
|
|
1945
|
-
}
|
|
1946
|
-
}
|
|
1947
|
-
const win = domElement ? getWindow(domElement) : window;
|
|
1948
|
-
const addVisualOffsets = !isLayoutViewport() && isFixedStrategy;
|
|
1949
|
-
let x = (clientRect.left + (addVisualOffsets ? ((_win$visualViewport = win.visualViewport) == null ? void 0 : _win$visualViewport.offsetLeft) || 0 : 0)) / scale.x;
|
|
1950
|
-
let y = (clientRect.top + (addVisualOffsets ? ((_win$visualViewport2 = win.visualViewport) == null ? void 0 : _win$visualViewport2.offsetTop) || 0 : 0)) / scale.y;
|
|
1951
|
-
let width = clientRect.width / scale.x;
|
|
1952
|
-
let height = clientRect.height / scale.y;
|
|
1953
|
-
if (domElement) {
|
|
1954
|
-
const win = getWindow(domElement);
|
|
1955
|
-
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
1956
|
-
let currentIFrame = win.frameElement;
|
|
1957
|
-
while (currentIFrame && offsetParent && offsetWin !== win) {
|
|
1958
|
-
const iframeScale = getScale(currentIFrame);
|
|
1959
|
-
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
1960
|
-
const css = getComputedStyle(currentIFrame);
|
|
1961
|
-
iframeRect.x += (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
1962
|
-
iframeRect.y += (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
1963
|
-
x *= iframeScale.x;
|
|
1964
|
-
y *= iframeScale.y;
|
|
1965
|
-
width *= iframeScale.x;
|
|
1966
|
-
height *= iframeScale.y;
|
|
1967
|
-
x += iframeRect.x;
|
|
1968
|
-
y += iframeRect.y;
|
|
1969
|
-
currentIFrame = getWindow(currentIFrame).frameElement;
|
|
1970
|
-
}
|
|
1971
|
-
}
|
|
1972
|
-
return {
|
|
1973
|
-
width,
|
|
1974
|
-
height,
|
|
1975
|
-
top: y,
|
|
1976
|
-
right: x + width,
|
|
1977
|
-
bottom: y + height,
|
|
1978
|
-
left: x,
|
|
1979
|
-
x,
|
|
1980
|
-
y
|
|
1981
|
-
};
|
|
1982
|
-
}
|
|
1983
|
-
|
|
1984
|
-
function getDocumentElement(node) {
|
|
1985
|
-
return ((isNode(node) ? node.ownerDocument : node.document) || window.document).documentElement;
|
|
1986
|
-
}
|
|
1987
|
-
|
|
1988
|
-
function getNodeScroll(element) {
|
|
1989
|
-
if (isElement(element)) {
|
|
1990
|
-
return {
|
|
1991
|
-
scrollLeft: element.scrollLeft,
|
|
1992
|
-
scrollTop: element.scrollTop
|
|
1993
|
-
};
|
|
1994
|
-
}
|
|
1995
|
-
return {
|
|
1996
|
-
scrollLeft: element.pageXOffset,
|
|
1997
|
-
scrollTop: element.pageYOffset
|
|
1998
|
-
};
|
|
1999
|
-
}
|
|
2000
|
-
|
|
2001
|
-
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
2002
|
-
let {
|
|
2003
|
-
rect,
|
|
2004
|
-
offsetParent,
|
|
2005
|
-
strategy
|
|
2006
|
-
} = _ref;
|
|
2007
|
-
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
2008
|
-
const documentElement = getDocumentElement(offsetParent);
|
|
2009
|
-
if (offsetParent === documentElement) {
|
|
2010
|
-
return rect;
|
|
2011
|
-
}
|
|
2012
|
-
let scroll = {
|
|
2013
|
-
scrollLeft: 0,
|
|
2014
|
-
scrollTop: 0
|
|
2015
|
-
};
|
|
2016
|
-
let scale = {
|
|
2017
|
-
x: 1,
|
|
2018
|
-
y: 1
|
|
2019
|
-
};
|
|
2020
|
-
const offsets = {
|
|
2021
|
-
x: 0,
|
|
2022
|
-
y: 0
|
|
2023
|
-
};
|
|
2024
|
-
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
|
|
2025
|
-
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
2026
|
-
scroll = getNodeScroll(offsetParent);
|
|
338
|
+
var x = { start: "end", end: "start" };
|
|
339
|
+
function w(t2) {
|
|
340
|
+
return t2.replace(/start|end/g, (t3) => x[t3]);
|
|
341
|
+
}
|
|
342
|
+
var b = function(e2) {
|
|
343
|
+
return void 0 === e2 && (e2 = {}), { name: "flip", options: e2, async fn(o3) {
|
|
344
|
+
var i3;
|
|
345
|
+
const { placement: r3, middlewareData: a3, rects: l3, initialPlacement: c3, platform: f3, elements: u3 } = o3, { mainAxis: m3 = true, crossAxis: g3 = true, fallbackPlacements: d3, fallbackStrategy: p3 = "bestFit", fallbackAxisSideDirection: x3 = "none", flipAlignment: v3 = true, ...b3 } = e2, R2 = n(r3), A2 = n(c3) === c3, P3 = await (null == f3.isRTL ? void 0 : f3.isRTL(u3.floating)), T3 = d3 || (A2 || !v3 ? [h(c3)] : function(t2) {
|
|
346
|
+
const e3 = h(t2);
|
|
347
|
+
return [w(t2), e3, w(e3)];
|
|
348
|
+
}(c3));
|
|
349
|
+
d3 || "none" === x3 || T3.push(...function(e3, o4, i4, r4) {
|
|
350
|
+
const a4 = t(e3);
|
|
351
|
+
let l4 = function(t2, e4, n3) {
|
|
352
|
+
const o5 = ["left", "right"], i5 = ["right", "left"], r5 = ["top", "bottom"], a5 = ["bottom", "top"];
|
|
353
|
+
switch (t2) {
|
|
354
|
+
case "top":
|
|
355
|
+
case "bottom":
|
|
356
|
+
return n3 ? e4 ? i5 : o5 : e4 ? o5 : i5;
|
|
357
|
+
case "left":
|
|
358
|
+
case "right":
|
|
359
|
+
return e4 ? r5 : a5;
|
|
360
|
+
default:
|
|
361
|
+
return [];
|
|
362
|
+
}
|
|
363
|
+
}(n(e3), "start" === i4, r4);
|
|
364
|
+
return a4 && (l4 = l4.map((t2) => t2 + "-" + a4), o4 && (l4 = l4.concat(l4.map(w)))), l4;
|
|
365
|
+
}(c3, v3, x3, P3));
|
|
366
|
+
const O3 = [c3, ...T3], D3 = await s(o3, b3), E3 = [];
|
|
367
|
+
let L3 = (null == (i3 = a3.flip) ? void 0 : i3.overflows) || [];
|
|
368
|
+
if (m3 && E3.push(D3[R2]), g3) {
|
|
369
|
+
const { main: t2, cross: e3 } = y(r3, l3, P3);
|
|
370
|
+
E3.push(D3[t2], D3[e3]);
|
|
2027
371
|
}
|
|
2028
|
-
if (
|
|
2029
|
-
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
|
|
372
|
+
if (L3 = [...L3, { placement: r3, overflows: E3 }], !E3.every((t2) => t2 <= 0)) {
|
|
373
|
+
var k2, B2;
|
|
374
|
+
const t2 = ((null == (k2 = a3.flip) ? void 0 : k2.index) || 0) + 1, e3 = O3[t2];
|
|
375
|
+
if (e3)
|
|
376
|
+
return { data: { index: t2, overflows: L3 }, reset: { placement: e3 } };
|
|
377
|
+
let n3 = null == (B2 = L3.find((t3) => t3.overflows[0] <= 0)) ? void 0 : B2.placement;
|
|
378
|
+
if (!n3)
|
|
379
|
+
switch (p3) {
|
|
380
|
+
case "bestFit": {
|
|
381
|
+
var C2;
|
|
382
|
+
const t3 = null == (C2 = L3.map((t4) => [t4.placement, t4.overflows.filter((t5) => t5 > 0).reduce((t5, e4) => t5 + e4, 0)]).sort((t4, e4) => t4[1] - e4[1])[0]) ? void 0 : C2[0];
|
|
383
|
+
t3 && (n3 = t3);
|
|
384
|
+
break;
|
|
385
|
+
}
|
|
386
|
+
case "initialPlacement":
|
|
387
|
+
n3 = c3;
|
|
388
|
+
}
|
|
389
|
+
if (r3 !== n3)
|
|
390
|
+
return { reset: { placement: n3 } };
|
|
2033
391
|
}
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
392
|
+
return {};
|
|
393
|
+
} };
|
|
394
|
+
};
|
|
395
|
+
var O = function(e2) {
|
|
396
|
+
return void 0 === e2 && (e2 = 0), { name: "offset", options: e2, async fn(i3) {
|
|
397
|
+
const { x: r3, y: a3 } = i3, l3 = await async function(e3, i4) {
|
|
398
|
+
const { placement: r4, platform: a4, elements: l4 } = e3, s3 = await (null == a4.isRTL ? void 0 : a4.isRTL(l4.floating)), c3 = n(r4), f3 = t(r4), u3 = "x" === o(r4), m3 = ["left", "top"].includes(c3) ? -1 : 1, g3 = s3 && u3 ? -1 : 1, d3 = "function" == typeof i4 ? i4(e3) : i4;
|
|
399
|
+
let { mainAxis: p3, crossAxis: h3, alignmentAxis: y3 } = "number" == typeof d3 ? { mainAxis: d3, crossAxis: 0, alignmentAxis: null } : { mainAxis: 0, crossAxis: 0, alignmentAxis: null, ...d3 };
|
|
400
|
+
return f3 && "number" == typeof y3 && (h3 = "end" === f3 ? -1 * y3 : y3), u3 ? { x: h3 * g3, y: p3 * m3 } : { x: p3 * m3, y: h3 * g3 };
|
|
401
|
+
}(i3, e2);
|
|
402
|
+
return { x: r3 + l3.x, y: a3 + l3.y, data: l3 };
|
|
403
|
+
} };
|
|
404
|
+
};
|
|
405
|
+
function D(t2) {
|
|
406
|
+
return "x" === t2 ? "y" : "x";
|
|
2041
407
|
}
|
|
408
|
+
var E = function(t2) {
|
|
409
|
+
return void 0 === t2 && (t2 = {}), { name: "shift", options: t2, async fn(e2) {
|
|
410
|
+
const { x: i3, y: r3, placement: a3 } = e2, { mainAxis: l3 = true, crossAxis: c3 = false, limiter: f3 = { fn: (t3) => {
|
|
411
|
+
let { x: e3, y: n3 } = t3;
|
|
412
|
+
return { x: e3, y: n3 };
|
|
413
|
+
} }, ...m3 } = t2, g3 = { x: i3, y: r3 }, d3 = await s(e2, m3), p3 = o(n(a3)), h3 = D(p3);
|
|
414
|
+
let y3 = g3[p3], x3 = g3[h3];
|
|
415
|
+
if (l3) {
|
|
416
|
+
const t3 = "y" === p3 ? "bottom" : "right";
|
|
417
|
+
y3 = u(y3 + d3["y" === p3 ? "top" : "left"], y3, y3 - d3[t3]);
|
|
418
|
+
}
|
|
419
|
+
if (c3) {
|
|
420
|
+
const t3 = "y" === h3 ? "bottom" : "right";
|
|
421
|
+
x3 = u(x3 + d3["y" === h3 ? "top" : "left"], x3, x3 - d3[t3]);
|
|
422
|
+
}
|
|
423
|
+
const w3 = f3.fn({ ...e2, [p3]: y3, [h3]: x3 });
|
|
424
|
+
return { ...w3, data: { x: w3.x - i3, y: w3.y - r3 } };
|
|
425
|
+
} };
|
|
426
|
+
};
|
|
2042
427
|
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
return
|
|
428
|
+
// node_modules/@floating-ui/dom/dist/floating-ui.dom.browser.min.mjs
|
|
429
|
+
function n2(t2) {
|
|
430
|
+
var e2;
|
|
431
|
+
return (null == (e2 = t2.ownerDocument) ? void 0 : e2.defaultView) || window;
|
|
2047
432
|
}
|
|
2048
|
-
|
|
2049
|
-
|
|
2050
|
-
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
2051
|
-
function getDocumentRect(element) {
|
|
2052
|
-
const html = getDocumentElement(element);
|
|
2053
|
-
const scroll = getNodeScroll(element);
|
|
2054
|
-
const body = element.ownerDocument.body;
|
|
2055
|
-
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
2056
|
-
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
2057
|
-
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
2058
|
-
const y = -scroll.scrollTop;
|
|
2059
|
-
if (getComputedStyle$1(body).direction === 'rtl') {
|
|
2060
|
-
x += max(html.clientWidth, body.clientWidth) - width;
|
|
2061
|
-
}
|
|
2062
|
-
return {
|
|
2063
|
-
width,
|
|
2064
|
-
height,
|
|
2065
|
-
x,
|
|
2066
|
-
y
|
|
2067
|
-
};
|
|
433
|
+
function o2(t2) {
|
|
434
|
+
return n2(t2).getComputedStyle(t2);
|
|
2068
435
|
}
|
|
2069
|
-
|
|
2070
|
-
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
|
|
2076
|
-
|
|
2077
|
-
// DOM Element detected.
|
|
2078
|
-
node.parentNode ||
|
|
2079
|
-
// ShadowRoot detected.
|
|
2080
|
-
isShadowRoot(node) && node.host ||
|
|
2081
|
-
// Fallback.
|
|
2082
|
-
getDocumentElement(node);
|
|
2083
|
-
return isShadowRoot(result) ? result.host : result;
|
|
436
|
+
var i2 = Math.min;
|
|
437
|
+
var r2 = Math.max;
|
|
438
|
+
var l2 = Math.round;
|
|
439
|
+
function c2(t2) {
|
|
440
|
+
const e2 = o2(t2);
|
|
441
|
+
let n3 = parseFloat(e2.width), i3 = parseFloat(e2.height);
|
|
442
|
+
const r3 = t2.offsetWidth, c3 = t2.offsetHeight, s3 = l2(n3) !== r3 || l2(i3) !== c3;
|
|
443
|
+
return s3 && (n3 = r3, i3 = c3), { width: n3, height: i3, fallback: s3 };
|
|
2084
444
|
}
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
const parentNode = getParentNode(node);
|
|
2088
|
-
if (isLastTraversableNode(parentNode)) {
|
|
2089
|
-
// `getParentNode` will never return a `Document` due to the fallback
|
|
2090
|
-
// check, so it's either the <html> or <body> element.
|
|
2091
|
-
return parentNode.ownerDocument.body;
|
|
2092
|
-
}
|
|
2093
|
-
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
2094
|
-
return parentNode;
|
|
2095
|
-
}
|
|
2096
|
-
return getNearestOverflowAncestor(parentNode);
|
|
445
|
+
function s2(t2) {
|
|
446
|
+
return h2(t2) ? (t2.nodeName || "").toLowerCase() : "";
|
|
2097
447
|
}
|
|
2098
|
-
|
|
2099
|
-
function
|
|
2100
|
-
|
|
2101
|
-
|
|
2102
|
-
|
|
2103
|
-
|
|
2104
|
-
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
2105
|
-
const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
|
|
2106
|
-
const win = getWindow(scrollableAncestor);
|
|
2107
|
-
if (isBody) {
|
|
2108
|
-
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
|
|
2109
|
-
}
|
|
2110
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
|
|
448
|
+
var f2;
|
|
449
|
+
function u2() {
|
|
450
|
+
if (f2)
|
|
451
|
+
return f2;
|
|
452
|
+
const t2 = navigator.userAgentData;
|
|
453
|
+
return t2 && Array.isArray(t2.brands) ? (f2 = t2.brands.map((t3) => t3.brand + "/" + t3.version).join(" "), f2) : navigator.userAgent;
|
|
2111
454
|
}
|
|
2112
|
-
|
|
2113
|
-
|
|
2114
|
-
const win = getWindow(element);
|
|
2115
|
-
const html = getDocumentElement(element);
|
|
2116
|
-
const visualViewport = win.visualViewport;
|
|
2117
|
-
let width = html.clientWidth;
|
|
2118
|
-
let height = html.clientHeight;
|
|
2119
|
-
let x = 0;
|
|
2120
|
-
let y = 0;
|
|
2121
|
-
if (visualViewport) {
|
|
2122
|
-
width = visualViewport.width;
|
|
2123
|
-
height = visualViewport.height;
|
|
2124
|
-
const layoutViewport = isLayoutViewport();
|
|
2125
|
-
if (layoutViewport || !layoutViewport && strategy === 'fixed') {
|
|
2126
|
-
x = visualViewport.offsetLeft;
|
|
2127
|
-
y = visualViewport.offsetTop;
|
|
2128
|
-
}
|
|
2129
|
-
}
|
|
2130
|
-
return {
|
|
2131
|
-
width,
|
|
2132
|
-
height,
|
|
2133
|
-
x,
|
|
2134
|
-
y
|
|
2135
|
-
};
|
|
455
|
+
function a2(t2) {
|
|
456
|
+
return t2 instanceof n2(t2).HTMLElement;
|
|
2136
457
|
}
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
function getInnerBoundingClientRect(element, strategy) {
|
|
2140
|
-
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
2141
|
-
const top = clientRect.top + element.clientTop;
|
|
2142
|
-
const left = clientRect.left + element.clientLeft;
|
|
2143
|
-
const scale = isHTMLElement(element) ? getScale(element) : {
|
|
2144
|
-
x: 1,
|
|
2145
|
-
y: 1
|
|
2146
|
-
};
|
|
2147
|
-
const width = element.clientWidth * scale.x;
|
|
2148
|
-
const height = element.clientHeight * scale.y;
|
|
2149
|
-
const x = left * scale.x;
|
|
2150
|
-
const y = top * scale.y;
|
|
2151
|
-
return {
|
|
2152
|
-
width,
|
|
2153
|
-
height,
|
|
2154
|
-
x,
|
|
2155
|
-
y
|
|
2156
|
-
};
|
|
458
|
+
function d2(t2) {
|
|
459
|
+
return t2 instanceof n2(t2).Element;
|
|
2157
460
|
}
|
|
2158
|
-
function
|
|
2159
|
-
|
|
2160
|
-
return rectToClientRect(getViewportRect(element, strategy));
|
|
2161
|
-
}
|
|
2162
|
-
if (isElement(clippingAncestor)) {
|
|
2163
|
-
return rectToClientRect(getInnerBoundingClientRect(clippingAncestor, strategy));
|
|
2164
|
-
}
|
|
2165
|
-
return rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
|
461
|
+
function h2(t2) {
|
|
462
|
+
return t2 instanceof n2(t2).Node;
|
|
2166
463
|
}
|
|
2167
|
-
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
|
|
2184
|
-
|
|
2185
|
-
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
|
|
464
|
+
function p2(t2) {
|
|
465
|
+
if ("undefined" == typeof ShadowRoot)
|
|
466
|
+
return false;
|
|
467
|
+
return t2 instanceof n2(t2).ShadowRoot || t2 instanceof ShadowRoot;
|
|
468
|
+
}
|
|
469
|
+
function g2(t2) {
|
|
470
|
+
const { overflow: e2, overflowX: n3, overflowY: i3, display: r3 } = o2(t2);
|
|
471
|
+
return /auto|scroll|overlay|hidden|clip/.test(e2 + i3 + n3) && !["inline", "contents"].includes(r3);
|
|
472
|
+
}
|
|
473
|
+
function m2(t2) {
|
|
474
|
+
return ["table", "td", "th"].includes(s2(t2));
|
|
475
|
+
}
|
|
476
|
+
function y2(t2) {
|
|
477
|
+
const e2 = /firefox/i.test(u2()), n3 = o2(t2), i3 = n3.backdropFilter || n3.WebkitBackdropFilter;
|
|
478
|
+
return "none" !== n3.transform || "none" !== n3.perspective || !!i3 && "none" !== i3 || e2 && "filter" === n3.willChange || e2 && !!n3.filter && "none" !== n3.filter || ["transform", "perspective"].some((t3) => n3.willChange.includes(t3)) || ["paint", "layout", "strict", "content"].some((t3) => {
|
|
479
|
+
const e3 = n3.contain;
|
|
480
|
+
return null != e3 && e3.includes(t3);
|
|
481
|
+
});
|
|
482
|
+
}
|
|
483
|
+
function x2() {
|
|
484
|
+
return !/^((?!chrome|android).)*safari/i.test(u2());
|
|
485
|
+
}
|
|
486
|
+
function w2(t2) {
|
|
487
|
+
return ["html", "body", "#document"].includes(s2(t2));
|
|
488
|
+
}
|
|
489
|
+
function v2(t2) {
|
|
490
|
+
return d2(t2) ? t2 : t2.contextElement;
|
|
491
|
+
}
|
|
492
|
+
var b2 = { x: 1, y: 1 };
|
|
493
|
+
function L2(t2) {
|
|
494
|
+
const e2 = v2(t2);
|
|
495
|
+
if (!a2(e2))
|
|
496
|
+
return b2;
|
|
497
|
+
const n3 = e2.getBoundingClientRect(), { width: o3, height: i3, fallback: r3 } = c2(e2);
|
|
498
|
+
let s3 = (r3 ? l2(n3.width) : n3.width) / o3, f3 = (r3 ? l2(n3.height) : n3.height) / i3;
|
|
499
|
+
return s3 && Number.isFinite(s3) || (s3 = 1), f3 && Number.isFinite(f3) || (f3 = 1), { x: s3, y: f3 };
|
|
500
|
+
}
|
|
501
|
+
function E2(t2, e2, o3, i3) {
|
|
502
|
+
var r3, l3;
|
|
503
|
+
void 0 === e2 && (e2 = false), void 0 === o3 && (o3 = false);
|
|
504
|
+
const c3 = t2.getBoundingClientRect(), s3 = v2(t2);
|
|
505
|
+
let f3 = b2;
|
|
506
|
+
e2 && (i3 ? d2(i3) && (f3 = L2(i3)) : f3 = L2(t2));
|
|
507
|
+
const u3 = s3 ? n2(s3) : window, a3 = !x2() && o3;
|
|
508
|
+
let h3 = (c3.left + (a3 && (null == (r3 = u3.visualViewport) ? void 0 : r3.offsetLeft) || 0)) / f3.x, p3 = (c3.top + (a3 && (null == (l3 = u3.visualViewport) ? void 0 : l3.offsetTop) || 0)) / f3.y, g3 = c3.width / f3.x, m3 = c3.height / f3.y;
|
|
509
|
+
if (s3) {
|
|
510
|
+
const t3 = n2(s3), e3 = i3 && d2(i3) ? n2(i3) : i3;
|
|
511
|
+
let o4 = t3.frameElement;
|
|
512
|
+
for (; o4 && i3 && e3 !== t3; ) {
|
|
513
|
+
const t4 = L2(o4), e4 = o4.getBoundingClientRect(), i4 = getComputedStyle(o4);
|
|
514
|
+
e4.x += (o4.clientLeft + parseFloat(i4.paddingLeft)) * t4.x, e4.y += (o4.clientTop + parseFloat(i4.paddingTop)) * t4.y, h3 *= t4.x, p3 *= t4.y, g3 *= t4.x, m3 *= t4.y, h3 += e4.x, p3 += e4.y, o4 = n2(o4).frameElement;
|
|
2192
515
|
}
|
|
2193
|
-
currentNode = getParentNode(currentNode);
|
|
2194
516
|
}
|
|
2195
|
-
|
|
2196
|
-
return result;
|
|
517
|
+
return { width: g3, height: m3, top: p3, right: h3 + g3, bottom: p3 + m3, left: h3, x: h3, y: p3 };
|
|
2197
518
|
}
|
|
2198
|
-
|
|
2199
|
-
|
|
2200
|
-
// clipping ancestors.
|
|
2201
|
-
function getClippingRect(_ref) {
|
|
2202
|
-
let {
|
|
2203
|
-
element,
|
|
2204
|
-
boundary,
|
|
2205
|
-
rootBoundary,
|
|
2206
|
-
strategy
|
|
2207
|
-
} = _ref;
|
|
2208
|
-
const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
2209
|
-
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
2210
|
-
const firstClippingAncestor = clippingAncestors[0];
|
|
2211
|
-
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
2212
|
-
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
2213
|
-
accRect.top = max(rect.top, accRect.top);
|
|
2214
|
-
accRect.right = min(rect.right, accRect.right);
|
|
2215
|
-
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
2216
|
-
accRect.left = max(rect.left, accRect.left);
|
|
2217
|
-
return accRect;
|
|
2218
|
-
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
2219
|
-
return {
|
|
2220
|
-
width: clippingRect.right - clippingRect.left,
|
|
2221
|
-
height: clippingRect.bottom - clippingRect.top,
|
|
2222
|
-
x: clippingRect.left,
|
|
2223
|
-
y: clippingRect.top
|
|
2224
|
-
};
|
|
519
|
+
function R(t2) {
|
|
520
|
+
return ((h2(t2) ? t2.ownerDocument : t2.document) || window.document).documentElement;
|
|
2225
521
|
}
|
|
2226
|
-
|
|
2227
|
-
|
|
2228
|
-
if (isHTMLElement(element)) {
|
|
2229
|
-
return getCssDimensions(element);
|
|
2230
|
-
}
|
|
2231
|
-
return element.getBoundingClientRect();
|
|
522
|
+
function T2(t2) {
|
|
523
|
+
return d2(t2) ? { scrollLeft: t2.scrollLeft, scrollTop: t2.scrollTop } : { scrollLeft: t2.pageXOffset, scrollTop: t2.pageYOffset };
|
|
2232
524
|
}
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
525
|
+
function C(t2) {
|
|
526
|
+
return E2(R(t2)).left + T2(t2).scrollLeft;
|
|
527
|
+
}
|
|
528
|
+
function F(t2) {
|
|
529
|
+
if ("html" === s2(t2))
|
|
530
|
+
return t2;
|
|
531
|
+
const e2 = t2.assignedSlot || t2.parentNode || p2(t2) && t2.host || R(t2);
|
|
532
|
+
return p2(e2) ? e2.host : e2;
|
|
533
|
+
}
|
|
534
|
+
function W(t2) {
|
|
535
|
+
const e2 = F(t2);
|
|
536
|
+
return w2(e2) ? e2.ownerDocument.body : a2(e2) && g2(e2) ? e2 : W(e2);
|
|
537
|
+
}
|
|
538
|
+
function D2(t2, e2) {
|
|
539
|
+
var o3;
|
|
540
|
+
void 0 === e2 && (e2 = []);
|
|
541
|
+
const i3 = W(t2), r3 = i3 === (null == (o3 = t2.ownerDocument) ? void 0 : o3.body), l3 = n2(i3);
|
|
542
|
+
return r3 ? e2.concat(l3, l3.visualViewport || [], g2(i3) ? i3 : []) : e2.concat(i3, D2(i3));
|
|
543
|
+
}
|
|
544
|
+
function S(e2, i3, l3) {
|
|
545
|
+
return "viewport" === i3 ? l(function(t2, e3) {
|
|
546
|
+
const o3 = n2(t2), i4 = R(t2), r3 = o3.visualViewport;
|
|
547
|
+
let l4 = i4.clientWidth, c3 = i4.clientHeight, s3 = 0, f3 = 0;
|
|
548
|
+
if (r3) {
|
|
549
|
+
l4 = r3.width, c3 = r3.height;
|
|
550
|
+
const t3 = x2();
|
|
551
|
+
(t3 || !t3 && "fixed" === e3) && (s3 = r3.offsetLeft, f3 = r3.offsetTop);
|
|
552
|
+
}
|
|
553
|
+
return { width: l4, height: c3, x: s3, y: f3 };
|
|
554
|
+
}(e2, l3)) : d2(i3) ? l(function(t2, e3) {
|
|
555
|
+
const n3 = E2(t2, true, "fixed" === e3), o3 = n3.top + t2.clientTop, i4 = n3.left + t2.clientLeft, r3 = a2(t2) ? L2(t2) : { x: 1, y: 1 };
|
|
556
|
+
return { width: t2.clientWidth * r3.x, height: t2.clientHeight * r3.y, x: i4 * r3.x, y: o3 * r3.y };
|
|
557
|
+
}(i3, l3)) : l(function(t2) {
|
|
558
|
+
const e3 = R(t2), n3 = T2(t2), i4 = t2.ownerDocument.body, l4 = r2(e3.scrollWidth, e3.clientWidth, i4.scrollWidth, i4.clientWidth), c3 = r2(e3.scrollHeight, e3.clientHeight, i4.scrollHeight, i4.clientHeight);
|
|
559
|
+
let s3 = -n3.scrollLeft + C(t2);
|
|
560
|
+
const f3 = -n3.scrollTop;
|
|
561
|
+
return "rtl" === o2(i4).direction && (s3 += r2(e3.clientWidth, i4.clientWidth) - l4), { width: l4, height: c3, x: s3, y: f3 };
|
|
562
|
+
}(R(e2)));
|
|
563
|
+
}
|
|
564
|
+
function A(t2) {
|
|
565
|
+
return a2(t2) && "fixed" !== o2(t2).position ? t2.offsetParent : null;
|
|
566
|
+
}
|
|
567
|
+
function H(t2) {
|
|
568
|
+
const e2 = n2(t2);
|
|
569
|
+
let i3 = A(t2);
|
|
570
|
+
for (; i3 && m2(i3) && "static" === o2(i3).position; )
|
|
571
|
+
i3 = A(i3);
|
|
572
|
+
return i3 && ("html" === s2(i3) || "body" === s2(i3) && "static" === o2(i3).position && !y2(i3)) ? e2 : i3 || function(t3) {
|
|
573
|
+
let e3 = F(t3);
|
|
574
|
+
for (; a2(e3) && !w2(e3); ) {
|
|
575
|
+
if (y2(e3))
|
|
576
|
+
return e3;
|
|
577
|
+
e3 = F(e3);
|
|
578
|
+
}
|
|
2236
579
|
return null;
|
|
2237
|
-
}
|
|
2238
|
-
return element.offsetParent;
|
|
580
|
+
}(t2) || e2;
|
|
2239
581
|
}
|
|
2240
|
-
function
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
|
|
2245
|
-
|
|
2246
|
-
|
|
582
|
+
function O2(t2, e2, n3) {
|
|
583
|
+
const o3 = a2(e2), i3 = R(e2), r3 = E2(t2, true, "fixed" === n3, e2);
|
|
584
|
+
let l3 = { scrollLeft: 0, scrollTop: 0 };
|
|
585
|
+
const c3 = { x: 0, y: 0 };
|
|
586
|
+
if (o3 || !o3 && "fixed" !== n3)
|
|
587
|
+
if (("body" !== s2(e2) || g2(i3)) && (l3 = T2(e2)), a2(e2)) {
|
|
588
|
+
const t3 = E2(e2, true);
|
|
589
|
+
c3.x = t3.x + e2.clientLeft, c3.y = t3.y + e2.clientTop;
|
|
590
|
+
} else
|
|
591
|
+
i3 && (c3.x = C(i3));
|
|
592
|
+
return { x: r3.left + l3.scrollLeft - c3.x, y: r3.top + l3.scrollTop - c3.y, width: r3.width, height: r3.height };
|
|
593
|
+
}
|
|
594
|
+
var P2 = { getClippingRect: function(t2) {
|
|
595
|
+
let { element: e2, boundary: n3, rootBoundary: l3, strategy: c3 } = t2;
|
|
596
|
+
const f3 = "clippingAncestors" === n3 ? function(t3, e3) {
|
|
597
|
+
const n4 = e3.get(t3);
|
|
598
|
+
if (n4)
|
|
599
|
+
return n4;
|
|
600
|
+
let i3 = D2(t3).filter((t4) => d2(t4) && "body" !== s2(t4)), r3 = null;
|
|
601
|
+
const l4 = "fixed" === o2(t3).position;
|
|
602
|
+
let c4 = l4 ? F(t3) : t3;
|
|
603
|
+
for (; d2(c4) && !w2(c4); ) {
|
|
604
|
+
const t4 = o2(c4), e4 = y2(c4);
|
|
605
|
+
(l4 ? e4 || r3 : e4 || "static" !== t4.position || !r3 || !["absolute", "fixed"].includes(r3.position)) ? r3 = t4 : i3 = i3.filter((t5) => t5 !== c4), c4 = F(c4);
|
|
2247
606
|
}
|
|
607
|
+
return e3.set(t3, i3), i3;
|
|
608
|
+
}(e2, this._c) : [].concat(n3), u3 = [...f3, l3], a3 = u3[0], h3 = u3.reduce((t3, n4) => {
|
|
609
|
+
const o3 = S(e2, n4, c3);
|
|
610
|
+
return t3.top = r2(o3.top, t3.top), t3.right = i2(o3.right, t3.right), t3.bottom = i2(o3.bottom, t3.bottom), t3.left = r2(o3.left, t3.left), t3;
|
|
611
|
+
}, S(e2, a3, c3));
|
|
612
|
+
return { width: h3.right - h3.left, height: h3.bottom - h3.top, x: h3.left, y: h3.top };
|
|
613
|
+
}, convertOffsetParentRelativeRectToViewportRelativeRect: function(t2) {
|
|
614
|
+
let { rect: e2, offsetParent: n3, strategy: o3 } = t2;
|
|
615
|
+
const i3 = a2(n3), r3 = R(n3);
|
|
616
|
+
if (n3 === r3)
|
|
617
|
+
return e2;
|
|
618
|
+
let l3 = { scrollLeft: 0, scrollTop: 0 }, c3 = { x: 1, y: 1 };
|
|
619
|
+
const f3 = { x: 0, y: 0 };
|
|
620
|
+
if ((i3 || !i3 && "fixed" !== o3) && (("body" !== s2(n3) || g2(r3)) && (l3 = T2(n3)), a2(n3))) {
|
|
621
|
+
const t3 = E2(n3);
|
|
622
|
+
c3 = L2(n3), f3.x = t3.x + n3.clientLeft, f3.y = t3.y + n3.clientTop;
|
|
2248
623
|
}
|
|
2249
|
-
return
|
|
2250
|
-
}
|
|
624
|
+
return { width: e2.width * c3.x, height: e2.height * c3.y, x: e2.x * c3.x - l3.scrollLeft * c3.x + f3.x, y: e2.y * c3.y - l3.scrollTop * c3.y + f3.y };
|
|
625
|
+
}, isElement: d2, getDimensions: function(t2) {
|
|
626
|
+
return a2(t2) ? c2(t2) : t2.getBoundingClientRect();
|
|
627
|
+
}, getOffsetParent: H, getDocumentElement: R, getScale: L2, async getElementRects(t2) {
|
|
628
|
+
let { reference: e2, floating: n3, strategy: o3 } = t2;
|
|
629
|
+
const i3 = this.getOffsetParent || H, r3 = this.getDimensions;
|
|
630
|
+
return { reference: O2(e2, await i3(n3), o3), floating: { x: 0, y: 0, ...await r3(n3) } };
|
|
631
|
+
}, getClientRects: (t2) => Array.from(t2.getClientRects()), isRTL: (t2) => "rtl" === o2(t2).direction };
|
|
632
|
+
var B = (t2, n3, o3) => {
|
|
633
|
+
const i3 = /* @__PURE__ */ new Map(), r3 = { platform: P2, ...o3 }, l3 = { ...r3.platform, _c: i3 };
|
|
634
|
+
return r(t2, n3, { ...r3, platform: l3 });
|
|
635
|
+
};
|
|
2251
636
|
|
|
2252
|
-
//
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
637
|
+
// src/utils/compute-positions.ts
|
|
638
|
+
var computeTooltipPosition = async ({
|
|
639
|
+
elementReference = null,
|
|
640
|
+
tooltipReference = null,
|
|
641
|
+
tooltipArrowReference = null,
|
|
642
|
+
place = "top",
|
|
643
|
+
offset: offsetValue = 10,
|
|
644
|
+
strategy = "absolute",
|
|
645
|
+
middlewares = [O(Number(offsetValue)), b(), E({ padding: 5 })]
|
|
646
|
+
}) => {
|
|
647
|
+
if (!elementReference) {
|
|
648
|
+
return { tooltipStyles: {}, tooltipArrowStyles: {} };
|
|
2259
649
|
}
|
|
2260
|
-
if (
|
|
2261
|
-
return
|
|
650
|
+
if (tooltipReference === null) {
|
|
651
|
+
return { tooltipStyles: {}, tooltipArrowStyles: {} };
|
|
2262
652
|
}
|
|
2263
|
-
|
|
2264
|
-
|
|
653
|
+
const middleware = middlewares;
|
|
654
|
+
if (tooltipArrowReference) {
|
|
655
|
+
middleware.push(m({ element: tooltipArrowReference, padding: 5 }));
|
|
656
|
+
return B(elementReference, tooltipReference, {
|
|
657
|
+
placement: place,
|
|
658
|
+
strategy,
|
|
659
|
+
middleware
|
|
660
|
+
}).then(({ x: x3, y: y3, placement, middlewareData }) => {
|
|
661
|
+
var _a, _b;
|
|
662
|
+
const styles = { left: `${x3}px`, top: `${y3}px` };
|
|
663
|
+
const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) != null ? _a : { x: 0, y: 0 };
|
|
664
|
+
const staticSide = (_b = {
|
|
665
|
+
top: "bottom",
|
|
666
|
+
right: "left",
|
|
667
|
+
bottom: "top",
|
|
668
|
+
left: "right"
|
|
669
|
+
}[placement.split("-")[0]]) != null ? _b : "bottom";
|
|
670
|
+
const arrowStyle = {
|
|
671
|
+
left: arrowX != null ? `${arrowX}px` : "",
|
|
672
|
+
top: arrowY != null ? `${arrowY}px` : "",
|
|
673
|
+
right: "",
|
|
674
|
+
bottom: "",
|
|
675
|
+
[staticSide]: "-4px"
|
|
676
|
+
};
|
|
677
|
+
return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle };
|
|
678
|
+
});
|
|
679
|
+
}
|
|
680
|
+
return B(elementReference, tooltipReference, {
|
|
681
|
+
placement: "bottom",
|
|
682
|
+
strategy,
|
|
683
|
+
middleware
|
|
684
|
+
}).then(({ x: x3, y: y3 }) => {
|
|
685
|
+
const styles = { left: `${x3}px`, top: `${y3}px` };
|
|
686
|
+
return { tooltipStyles: styles, tooltipArrowStyles: {} };
|
|
687
|
+
});
|
|
688
|
+
};
|
|
2265
689
|
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
|
|
2269
|
-
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
|
|
690
|
+
// esbuild-css-modules-plugin-namespace:./src/components/Tooltip/styles.module.css?esbuild-css-modules-plugin-building
|
|
691
|
+
var styles_module_default = { "arrow": "react-tooltip__arrow_KtSkBq", "clickable": "react-tooltip__clickable_KtSkBq", "dark": "react-tooltip__dark_KtSkBq", "error": "react-tooltip__error_KtSkBq", "fixed": "react-tooltip__fixed_KtSkBq", "info": "react-tooltip__info_KtSkBq", "light": "react-tooltip__light_KtSkBq", "noArrow": "react-tooltip__no-arrow_KtSkBq", "show": "react-tooltip__show_KtSkBq", "success": "react-tooltip__success_KtSkBq", "tooltip": "react-tooltip__tooltip_KtSkBq", "warning": "react-tooltip__warning_KtSkBq" };
|
|
692
|
+
|
|
693
|
+
// src/components/Tooltip/Tooltip.tsx
|
|
694
|
+
import { jsx as jsx4, jsxs } from "react/jsx-runtime";
|
|
695
|
+
var Tooltip = ({
|
|
696
|
+
// props
|
|
697
|
+
id,
|
|
698
|
+
className,
|
|
699
|
+
classNameArrow,
|
|
700
|
+
variant = "dark",
|
|
701
|
+
anchorId,
|
|
702
|
+
anchorSelect,
|
|
703
|
+
place = "top",
|
|
704
|
+
offset = 10,
|
|
705
|
+
events = ["hover"],
|
|
706
|
+
positionStrategy = "absolute",
|
|
707
|
+
middlewares,
|
|
708
|
+
wrapper: WrapperElement,
|
|
709
|
+
children = null,
|
|
710
|
+
delayShow = 0,
|
|
711
|
+
delayHide = 0,
|
|
712
|
+
float = false,
|
|
713
|
+
noArrow = false,
|
|
714
|
+
clickable = false,
|
|
715
|
+
closeOnEsc = false,
|
|
716
|
+
style: externalStyles,
|
|
717
|
+
position,
|
|
718
|
+
afterShow,
|
|
719
|
+
afterHide,
|
|
720
|
+
// props handled by controller
|
|
721
|
+
content,
|
|
722
|
+
html,
|
|
723
|
+
isOpen,
|
|
724
|
+
setIsOpen,
|
|
725
|
+
activeAnchor,
|
|
726
|
+
setActiveAnchor
|
|
727
|
+
}) => {
|
|
728
|
+
const tooltipRef = useRef2(null);
|
|
729
|
+
const tooltipArrowRef = useRef2(null);
|
|
730
|
+
const tooltipShowDelayTimerRef = useRef2(null);
|
|
731
|
+
const tooltipHideDelayTimerRef = useRef2(null);
|
|
732
|
+
const [inlineStyles, setInlineStyles] = useState2({});
|
|
733
|
+
const [inlineArrowStyles, setInlineArrowStyles] = useState2({});
|
|
734
|
+
const [show, setShow] = useState2(false);
|
|
735
|
+
const [rendered, setRendered] = useState2(false);
|
|
736
|
+
const wasShowing = useRef2(false);
|
|
737
|
+
const lastFloatPosition = useRef2(null);
|
|
738
|
+
const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip(id);
|
|
739
|
+
const hoveringTooltip = useRef2(false);
|
|
740
|
+
const [anchorsBySelect, setAnchorsBySelect] = useState2([]);
|
|
741
|
+
const mounted = useRef2(false);
|
|
742
|
+
use_isomorphic_layout_effect_default(() => {
|
|
743
|
+
mounted.current = true;
|
|
744
|
+
return () => {
|
|
745
|
+
mounted.current = false;
|
|
746
|
+
};
|
|
747
|
+
}, []);
|
|
748
|
+
useEffect3(() => {
|
|
749
|
+
if (!show) {
|
|
750
|
+
const timeout = setTimeout(() => {
|
|
751
|
+
setRendered(false);
|
|
752
|
+
}, 150);
|
|
753
|
+
return () => {
|
|
754
|
+
clearTimeout(timeout);
|
|
755
|
+
};
|
|
756
|
+
}
|
|
757
|
+
return () => null;
|
|
758
|
+
}, [show]);
|
|
759
|
+
const handleShow = (value) => {
|
|
760
|
+
if (!mounted.current) {
|
|
761
|
+
return;
|
|
762
|
+
}
|
|
763
|
+
if (value) {
|
|
764
|
+
setRendered(true);
|
|
765
|
+
}
|
|
766
|
+
setTimeout(() => {
|
|
767
|
+
if (!mounted.current) {
|
|
768
|
+
return;
|
|
769
|
+
}
|
|
770
|
+
setIsOpen == null ? void 0 : setIsOpen(value);
|
|
771
|
+
if (isOpen === void 0) {
|
|
772
|
+
setShow(value);
|
|
773
|
+
}
|
|
774
|
+
}, 10);
|
|
775
|
+
};
|
|
776
|
+
useEffect3(() => {
|
|
777
|
+
if (isOpen === void 0) {
|
|
778
|
+
return () => null;
|
|
779
|
+
}
|
|
780
|
+
if (isOpen) {
|
|
781
|
+
setRendered(true);
|
|
782
|
+
}
|
|
783
|
+
const timeout = setTimeout(() => {
|
|
784
|
+
setShow(isOpen);
|
|
785
|
+
}, 10);
|
|
786
|
+
return () => {
|
|
787
|
+
clearTimeout(timeout);
|
|
788
|
+
};
|
|
789
|
+
}, [isOpen]);
|
|
790
|
+
useEffect3(() => {
|
|
791
|
+
if (show === wasShowing.current) {
|
|
792
|
+
return;
|
|
793
|
+
}
|
|
794
|
+
wasShowing.current = show;
|
|
795
|
+
if (show) {
|
|
796
|
+
afterShow == null ? void 0 : afterShow();
|
|
797
|
+
} else {
|
|
798
|
+
afterHide == null ? void 0 : afterHide();
|
|
799
|
+
}
|
|
800
|
+
}, [show]);
|
|
801
|
+
const handleShowTooltipDelayed = () => {
|
|
802
|
+
if (tooltipShowDelayTimerRef.current) {
|
|
803
|
+
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
804
|
+
}
|
|
805
|
+
tooltipShowDelayTimerRef.current = setTimeout(() => {
|
|
806
|
+
handleShow(true);
|
|
807
|
+
}, delayShow);
|
|
2273
808
|
};
|
|
2274
|
-
const
|
|
2275
|
-
|
|
2276
|
-
|
|
809
|
+
const handleHideTooltipDelayed = (delay = delayHide) => {
|
|
810
|
+
if (tooltipHideDelayTimerRef.current) {
|
|
811
|
+
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
812
|
+
}
|
|
813
|
+
tooltipHideDelayTimerRef.current = setTimeout(() => {
|
|
814
|
+
if (hoveringTooltip.current) {
|
|
815
|
+
return;
|
|
816
|
+
}
|
|
817
|
+
handleShow(false);
|
|
818
|
+
}, delay);
|
|
2277
819
|
};
|
|
2278
|
-
|
|
2279
|
-
|
|
2280
|
-
|
|
820
|
+
const handleShowTooltip = (event) => {
|
|
821
|
+
var _a;
|
|
822
|
+
if (!event) {
|
|
823
|
+
return;
|
|
2281
824
|
}
|
|
2282
|
-
if (
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
}
|
|
2287
|
-
|
|
825
|
+
if (delayShow) {
|
|
826
|
+
handleShowTooltipDelayed();
|
|
827
|
+
} else {
|
|
828
|
+
handleShow(true);
|
|
829
|
+
}
|
|
830
|
+
const target = (_a = event.currentTarget) != null ? _a : event.target;
|
|
831
|
+
setActiveAnchor(target);
|
|
832
|
+
setProviderActiveAnchor({ current: target });
|
|
833
|
+
if (tooltipHideDelayTimerRef.current) {
|
|
834
|
+
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
2288
835
|
}
|
|
2289
|
-
}
|
|
2290
|
-
return {
|
|
2291
|
-
x: rect.left + scroll.scrollLeft - offsets.x,
|
|
2292
|
-
y: rect.top + scroll.scrollTop - offsets.y,
|
|
2293
|
-
width: rect.width,
|
|
2294
|
-
height: rect.height
|
|
2295
836
|
};
|
|
2296
|
-
|
|
2297
|
-
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
|
|
2301
|
-
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
|
|
2311
|
-
|
|
2312
|
-
|
|
2313
|
-
|
|
2314
|
-
|
|
2315
|
-
|
|
2316
|
-
|
|
2317
|
-
|
|
2318
|
-
|
|
2319
|
-
|
|
837
|
+
const handleHideTooltip = () => {
|
|
838
|
+
if (clickable) {
|
|
839
|
+
handleHideTooltipDelayed(delayHide || 100);
|
|
840
|
+
} else if (delayHide) {
|
|
841
|
+
handleHideTooltipDelayed();
|
|
842
|
+
} else {
|
|
843
|
+
handleShow(false);
|
|
844
|
+
}
|
|
845
|
+
if (tooltipShowDelayTimerRef.current) {
|
|
846
|
+
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
847
|
+
}
|
|
848
|
+
};
|
|
849
|
+
const handleTooltipPosition = ({ x: x3, y: y3 }) => {
|
|
850
|
+
const virtualElement = {
|
|
851
|
+
getBoundingClientRect() {
|
|
852
|
+
return {
|
|
853
|
+
x: x3,
|
|
854
|
+
y: y3,
|
|
855
|
+
width: 0,
|
|
856
|
+
height: 0,
|
|
857
|
+
top: y3,
|
|
858
|
+
left: x3,
|
|
859
|
+
right: x3,
|
|
860
|
+
bottom: y3
|
|
861
|
+
};
|
|
2320
862
|
}
|
|
2321
863
|
};
|
|
2322
|
-
|
|
2323
|
-
|
|
2324
|
-
|
|
2325
|
-
|
|
2326
|
-
|
|
2327
|
-
|
|
2328
|
-
|
|
2329
|
-
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
|
|
2333
|
-
|
|
2334
|
-
|
|
2335
|
-
|
|
2336
|
-
|
|
2337
|
-
|
|
2338
|
-
platform,
|
|
2339
|
-
...options
|
|
864
|
+
computeTooltipPosition({
|
|
865
|
+
place,
|
|
866
|
+
offset,
|
|
867
|
+
elementReference: virtualElement,
|
|
868
|
+
tooltipReference: tooltipRef.current,
|
|
869
|
+
tooltipArrowReference: tooltipArrowRef.current,
|
|
870
|
+
strategy: positionStrategy,
|
|
871
|
+
middlewares
|
|
872
|
+
}).then((computedStylesData) => {
|
|
873
|
+
if (Object.keys(computedStylesData.tooltipStyles).length) {
|
|
874
|
+
setInlineStyles(computedStylesData.tooltipStyles);
|
|
875
|
+
}
|
|
876
|
+
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
877
|
+
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
878
|
+
}
|
|
879
|
+
});
|
|
2340
880
|
};
|
|
2341
|
-
const
|
|
2342
|
-
|
|
2343
|
-
|
|
881
|
+
const handleMouseMove = (event) => {
|
|
882
|
+
if (!event) {
|
|
883
|
+
return;
|
|
884
|
+
}
|
|
885
|
+
const mouseEvent = event;
|
|
886
|
+
const mousePosition = {
|
|
887
|
+
x: mouseEvent.clientX,
|
|
888
|
+
y: mouseEvent.clientY
|
|
889
|
+
};
|
|
890
|
+
handleTooltipPosition(mousePosition);
|
|
891
|
+
lastFloatPosition.current = mousePosition;
|
|
2344
892
|
};
|
|
2345
|
-
|
|
2346
|
-
|
|
2347
|
-
|
|
2348
|
-
|
|
2349
|
-
}
|
|
2350
|
-
|
|
2351
|
-
const
|
|
2352
|
-
|
|
2353
|
-
|
|
2354
|
-
|
|
2355
|
-
// console.error('The reference element for tooltip was not defined: ', elementReference)
|
|
2356
|
-
return { tooltipStyles: {}, tooltipArrowStyles: {} };
|
|
893
|
+
const handleClickTooltipAnchor = (event) => {
|
|
894
|
+
handleShowTooltip(event);
|
|
895
|
+
if (delayHide) {
|
|
896
|
+
handleHideTooltipDelayed();
|
|
897
|
+
}
|
|
898
|
+
};
|
|
899
|
+
const handleClickOutsideAnchors = (event) => {
|
|
900
|
+
const anchorById = document.querySelector(`[id='${anchorId}']`);
|
|
901
|
+
if (anchorById == null ? void 0 : anchorById.contains(event.target)) {
|
|
902
|
+
return;
|
|
2357
903
|
}
|
|
2358
|
-
if (
|
|
2359
|
-
|
|
904
|
+
if (anchorsBySelect.some((anchor) => anchor.contains(event.target))) {
|
|
905
|
+
return;
|
|
2360
906
|
}
|
|
2361
|
-
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
|
|
2365
|
-
|
|
2366
|
-
strategy,
|
|
2367
|
-
middleware,
|
|
2368
|
-
}).then(({ x, y, placement, middlewareData }) => {
|
|
2369
|
-
var _a, _b;
|
|
2370
|
-
const styles = { left: `${x}px`, top: `${y}px` };
|
|
2371
|
-
const { x: arrowX, y: arrowY } = (_a = middlewareData.arrow) !== null && _a !== void 0 ? _a : { x: 0, y: 0 };
|
|
2372
|
-
const staticSide = (_b = {
|
|
2373
|
-
top: 'bottom',
|
|
2374
|
-
right: 'left',
|
|
2375
|
-
bottom: 'top',
|
|
2376
|
-
left: 'right',
|
|
2377
|
-
}[placement.split('-')[0]]) !== null && _b !== void 0 ? _b : 'bottom';
|
|
2378
|
-
const arrowStyle = {
|
|
2379
|
-
left: arrowX != null ? `${arrowX}px` : '',
|
|
2380
|
-
top: arrowY != null ? `${arrowY}px` : '',
|
|
2381
|
-
right: '',
|
|
2382
|
-
bottom: '',
|
|
2383
|
-
[staticSide]: '-4px',
|
|
2384
|
-
};
|
|
2385
|
-
return { tooltipStyles: styles, tooltipArrowStyles: arrowStyle };
|
|
2386
|
-
});
|
|
907
|
+
handleShow(false);
|
|
908
|
+
};
|
|
909
|
+
const handleEsc = (event) => {
|
|
910
|
+
if (event.key !== "Escape") {
|
|
911
|
+
return;
|
|
2387
912
|
}
|
|
2388
|
-
|
|
2389
|
-
|
|
2390
|
-
|
|
2391
|
-
|
|
2392
|
-
|
|
2393
|
-
|
|
2394
|
-
|
|
913
|
+
handleShow(false);
|
|
914
|
+
};
|
|
915
|
+
const debouncedHandleShowTooltip = debounce_default(handleShowTooltip, 50);
|
|
916
|
+
const debouncedHandleHideTooltip = debounce_default(handleHideTooltip, 50);
|
|
917
|
+
useEffect3(() => {
|
|
918
|
+
var _a, _b;
|
|
919
|
+
const elementRefs = new Set(anchorRefs);
|
|
920
|
+
anchorsBySelect.forEach((anchor) => {
|
|
921
|
+
elementRefs.add({ current: anchor });
|
|
2395
922
|
});
|
|
2396
|
-
};
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
|
|
2405
|
-
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
|
|
2409
|
-
|
|
2410
|
-
|
|
2411
|
-
|
|
2412
|
-
|
|
2413
|
-
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
|
|
2417
|
-
|
|
2418
|
-
|
|
2419
|
-
const hoveringTooltip = useRef(false);
|
|
2420
|
-
const [anchorsBySelect, setAnchorsBySelect] = useState([]);
|
|
2421
|
-
const mounted = useRef(false);
|
|
2422
|
-
/**
|
|
2423
|
-
* useLayoutEffect runs before useEffect,
|
|
2424
|
-
* but should be used carefully because of caveats
|
|
2425
|
-
* https://beta.reactjs.org/reference/react/useLayoutEffect#caveats
|
|
2426
|
-
*/
|
|
2427
|
-
useIsomorphicLayoutEffect(() => {
|
|
2428
|
-
mounted.current = true;
|
|
2429
|
-
return () => {
|
|
2430
|
-
mounted.current = false;
|
|
2431
|
-
};
|
|
2432
|
-
}, []);
|
|
2433
|
-
useEffect(() => {
|
|
2434
|
-
if (!show) {
|
|
2435
|
-
/**
|
|
2436
|
-
* this fixes weird behavior when switching between two anchor elements very quickly
|
|
2437
|
-
* remove the timeout and switch quickly between two adjancent anchor elements to see it
|
|
2438
|
-
*
|
|
2439
|
-
* in practice, this means the tooltip is not immediately removed from the DOM on hide
|
|
2440
|
-
*/
|
|
2441
|
-
const timeout = setTimeout(() => {
|
|
2442
|
-
setRendered(false);
|
|
2443
|
-
}, 150);
|
|
2444
|
-
return () => {
|
|
2445
|
-
clearTimeout(timeout);
|
|
2446
|
-
};
|
|
2447
|
-
}
|
|
2448
|
-
return () => null;
|
|
2449
|
-
}, [show]);
|
|
2450
|
-
const handleShow = (value) => {
|
|
2451
|
-
if (!mounted.current) {
|
|
2452
|
-
return;
|
|
2453
|
-
}
|
|
2454
|
-
if (value) {
|
|
2455
|
-
setRendered(true);
|
|
2456
|
-
}
|
|
2457
|
-
/**
|
|
2458
|
-
* wait for the component to render and calculate position
|
|
2459
|
-
* before actually showing
|
|
2460
|
-
*/
|
|
2461
|
-
setTimeout(() => {
|
|
2462
|
-
if (!mounted.current) {
|
|
2463
|
-
return;
|
|
2464
|
-
}
|
|
2465
|
-
setIsOpen === null || setIsOpen === void 0 ? void 0 : setIsOpen(value);
|
|
2466
|
-
if (isOpen === undefined) {
|
|
2467
|
-
setShow(value);
|
|
2468
|
-
}
|
|
2469
|
-
}, 10);
|
|
2470
|
-
};
|
|
2471
|
-
/**
|
|
2472
|
-
* this replicates the effect from `handleShow()`
|
|
2473
|
-
* when `isOpen` is changed from outside
|
|
2474
|
-
*/
|
|
2475
|
-
useEffect(() => {
|
|
2476
|
-
if (isOpen === undefined) {
|
|
2477
|
-
return () => null;
|
|
2478
|
-
}
|
|
2479
|
-
if (isOpen) {
|
|
2480
|
-
setRendered(true);
|
|
2481
|
-
}
|
|
2482
|
-
const timeout = setTimeout(() => {
|
|
2483
|
-
setShow(isOpen);
|
|
2484
|
-
}, 10);
|
|
2485
|
-
return () => {
|
|
2486
|
-
clearTimeout(timeout);
|
|
2487
|
-
};
|
|
2488
|
-
}, [isOpen]);
|
|
2489
|
-
useEffect(() => {
|
|
2490
|
-
if (show === wasShowing.current) {
|
|
2491
|
-
return;
|
|
2492
|
-
}
|
|
2493
|
-
wasShowing.current = show;
|
|
2494
|
-
if (show) {
|
|
2495
|
-
afterShow === null || afterShow === void 0 ? void 0 : afterShow();
|
|
2496
|
-
}
|
|
2497
|
-
else {
|
|
2498
|
-
afterHide === null || afterHide === void 0 ? void 0 : afterHide();
|
|
2499
|
-
}
|
|
2500
|
-
}, [show]);
|
|
2501
|
-
useEffect(() => {
|
|
2502
|
-
if (rendered) {
|
|
2503
|
-
return;
|
|
2504
|
-
}
|
|
2505
|
-
if (tooltipShowDelayTimerRef.current) {
|
|
2506
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
2507
|
-
}
|
|
2508
|
-
if (tooltipHideDelayTimerRef.current) {
|
|
2509
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
2510
|
-
}
|
|
2511
|
-
}, [rendered]);
|
|
2512
|
-
const handleShowTooltipDelayed = () => {
|
|
2513
|
-
if (tooltipShowDelayTimerRef.current) {
|
|
2514
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
2515
|
-
}
|
|
2516
|
-
tooltipShowDelayTimerRef.current = setTimeout(() => {
|
|
2517
|
-
handleShow(true);
|
|
2518
|
-
}, delayShow);
|
|
2519
|
-
};
|
|
2520
|
-
const handleHideTooltipDelayed = (delay = delayHide) => {
|
|
2521
|
-
if (tooltipHideDelayTimerRef.current) {
|
|
2522
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
2523
|
-
}
|
|
2524
|
-
tooltipHideDelayTimerRef.current = setTimeout(() => {
|
|
2525
|
-
if (hoveringTooltip.current) {
|
|
2526
|
-
return;
|
|
2527
|
-
}
|
|
2528
|
-
handleShow(false);
|
|
2529
|
-
}, delay);
|
|
2530
|
-
};
|
|
2531
|
-
const handleShowTooltip = (event) => {
|
|
2532
|
-
var _a;
|
|
2533
|
-
if (!event) {
|
|
2534
|
-
return;
|
|
2535
|
-
}
|
|
2536
|
-
if (delayShow) {
|
|
2537
|
-
handleShowTooltipDelayed();
|
|
2538
|
-
}
|
|
2539
|
-
else {
|
|
2540
|
-
handleShow(true);
|
|
2541
|
-
}
|
|
2542
|
-
const target = (_a = event.currentTarget) !== null && _a !== void 0 ? _a : event.target;
|
|
2543
|
-
setActiveAnchor(target);
|
|
2544
|
-
setProviderActiveAnchor({ current: target });
|
|
2545
|
-
if (tooltipHideDelayTimerRef.current) {
|
|
2546
|
-
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
2547
|
-
}
|
|
2548
|
-
};
|
|
2549
|
-
const handleHideTooltip = () => {
|
|
2550
|
-
if (clickable) {
|
|
2551
|
-
// allow time for the mouse to reach the tooltip, in case there's a gap
|
|
2552
|
-
handleHideTooltipDelayed(delayHide || 100);
|
|
2553
|
-
}
|
|
2554
|
-
else if (delayHide) {
|
|
2555
|
-
handleHideTooltipDelayed();
|
|
2556
|
-
}
|
|
2557
|
-
else {
|
|
2558
|
-
handleShow(false);
|
|
2559
|
-
}
|
|
2560
|
-
if (tooltipShowDelayTimerRef.current) {
|
|
2561
|
-
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
2562
|
-
}
|
|
2563
|
-
};
|
|
2564
|
-
const handleTooltipPosition = ({ x, y }) => {
|
|
2565
|
-
const virtualElement = {
|
|
2566
|
-
getBoundingClientRect() {
|
|
2567
|
-
return {
|
|
2568
|
-
x,
|
|
2569
|
-
y,
|
|
2570
|
-
width: 0,
|
|
2571
|
-
height: 0,
|
|
2572
|
-
top: y,
|
|
2573
|
-
left: x,
|
|
2574
|
-
right: x,
|
|
2575
|
-
bottom: y,
|
|
2576
|
-
};
|
|
2577
|
-
},
|
|
2578
|
-
};
|
|
2579
|
-
computeTooltipPosition({
|
|
2580
|
-
place,
|
|
2581
|
-
offset,
|
|
2582
|
-
elementReference: virtualElement,
|
|
2583
|
-
tooltipReference: tooltipRef.current,
|
|
2584
|
-
tooltipArrowReference: tooltipArrowRef.current,
|
|
2585
|
-
strategy: positionStrategy,
|
|
2586
|
-
middlewares,
|
|
2587
|
-
}).then((computedStylesData) => {
|
|
2588
|
-
if (Object.keys(computedStylesData.tooltipStyles).length) {
|
|
2589
|
-
setInlineStyles(computedStylesData.tooltipStyles);
|
|
2590
|
-
}
|
|
2591
|
-
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
2592
|
-
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
2593
|
-
}
|
|
923
|
+
const anchorById = document.querySelector(`[id='${anchorId}']`);
|
|
924
|
+
if (anchorById) {
|
|
925
|
+
elementRefs.add({ current: anchorById });
|
|
926
|
+
}
|
|
927
|
+
if (closeOnEsc) {
|
|
928
|
+
window.addEventListener("keydown", handleEsc);
|
|
929
|
+
}
|
|
930
|
+
const enabledEvents = [];
|
|
931
|
+
if (events.find((event) => event === "click")) {
|
|
932
|
+
window.addEventListener("click", handleClickOutsideAnchors);
|
|
933
|
+
enabledEvents.push({ event: "click", listener: handleClickTooltipAnchor });
|
|
934
|
+
}
|
|
935
|
+
if (events.find((event) => event === "hover")) {
|
|
936
|
+
enabledEvents.push(
|
|
937
|
+
{ event: "mouseenter", listener: debouncedHandleShowTooltip },
|
|
938
|
+
{ event: "mouseleave", listener: debouncedHandleHideTooltip },
|
|
939
|
+
{ event: "focus", listener: debouncedHandleShowTooltip },
|
|
940
|
+
{ event: "blur", listener: debouncedHandleHideTooltip }
|
|
941
|
+
);
|
|
942
|
+
if (float) {
|
|
943
|
+
enabledEvents.push({
|
|
944
|
+
event: "mousemove",
|
|
945
|
+
listener: handleMouseMove
|
|
2594
946
|
});
|
|
947
|
+
}
|
|
948
|
+
}
|
|
949
|
+
const handleMouseEnterTooltip = () => {
|
|
950
|
+
hoveringTooltip.current = true;
|
|
2595
951
|
};
|
|
2596
|
-
const
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
}
|
|
2600
|
-
const mouseEvent = event;
|
|
2601
|
-
const mousePosition = {
|
|
2602
|
-
x: mouseEvent.clientX,
|
|
2603
|
-
y: mouseEvent.clientY,
|
|
2604
|
-
};
|
|
2605
|
-
handleTooltipPosition(mousePosition);
|
|
2606
|
-
lastFloatPosition.current = mousePosition;
|
|
2607
|
-
};
|
|
2608
|
-
const handleClickTooltipAnchor = (event) => {
|
|
2609
|
-
handleShowTooltip(event);
|
|
2610
|
-
if (delayHide) {
|
|
2611
|
-
handleHideTooltipDelayed();
|
|
2612
|
-
}
|
|
2613
|
-
};
|
|
2614
|
-
const handleClickOutsideAnchors = (event) => {
|
|
2615
|
-
const anchorById = document.querySelector(`[id='${anchorId}']`);
|
|
2616
|
-
if (anchorById === null || anchorById === void 0 ? void 0 : anchorById.contains(event.target)) {
|
|
2617
|
-
return;
|
|
2618
|
-
}
|
|
2619
|
-
if (anchorsBySelect.some((anchor) => anchor.contains(event.target))) {
|
|
2620
|
-
return;
|
|
2621
|
-
}
|
|
2622
|
-
handleShow(false);
|
|
2623
|
-
};
|
|
2624
|
-
const handleEsc = (event) => {
|
|
2625
|
-
if (event.key !== 'Escape') {
|
|
2626
|
-
return;
|
|
2627
|
-
}
|
|
2628
|
-
handleShow(false);
|
|
952
|
+
const handleMouseLeaveTooltip = () => {
|
|
953
|
+
hoveringTooltip.current = false;
|
|
954
|
+
handleHideTooltip();
|
|
2629
955
|
};
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
|
|
2633
|
-
|
|
2634
|
-
|
|
2635
|
-
|
|
2636
|
-
|
|
2637
|
-
|
|
2638
|
-
|
|
2639
|
-
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
|
|
2646
|
-
|
|
2647
|
-
|
|
2648
|
-
|
|
2649
|
-
|
|
2650
|
-
|
|
2651
|
-
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
|
|
2655
|
-
|
|
2656
|
-
event: 'mousemove',
|
|
2657
|
-
listener: handleMouseMove,
|
|
2658
|
-
});
|
|
2659
|
-
}
|
|
2660
|
-
}
|
|
2661
|
-
const handleMouseEnterTooltip = () => {
|
|
2662
|
-
hoveringTooltip.current = true;
|
|
2663
|
-
};
|
|
2664
|
-
const handleMouseLeaveTooltip = () => {
|
|
2665
|
-
hoveringTooltip.current = false;
|
|
2666
|
-
handleHideTooltip();
|
|
2667
|
-
};
|
|
2668
|
-
if (clickable) {
|
|
2669
|
-
(_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener('mouseenter', handleMouseEnterTooltip);
|
|
2670
|
-
(_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.addEventListener('mouseleave', handleMouseLeaveTooltip);
|
|
2671
|
-
}
|
|
2672
|
-
enabledEvents.forEach(({ event, listener }) => {
|
|
2673
|
-
elementRefs.forEach((ref) => {
|
|
2674
|
-
var _a;
|
|
2675
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.addEventListener(event, listener);
|
|
2676
|
-
});
|
|
2677
|
-
});
|
|
2678
|
-
return () => {
|
|
2679
|
-
var _a, _b;
|
|
2680
|
-
if (events.find((event) => event === 'click')) {
|
|
2681
|
-
window.removeEventListener('click', handleClickOutsideAnchors);
|
|
2682
|
-
}
|
|
2683
|
-
if (closeOnEsc) {
|
|
2684
|
-
window.removeEventListener('keydown', handleEsc);
|
|
2685
|
-
}
|
|
2686
|
-
if (clickable) {
|
|
2687
|
-
(_a = tooltipRef.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('mouseenter', handleMouseEnterTooltip);
|
|
2688
|
-
(_b = tooltipRef.current) === null || _b === void 0 ? void 0 : _b.removeEventListener('mouseleave', handleMouseLeaveTooltip);
|
|
2689
|
-
}
|
|
2690
|
-
enabledEvents.forEach(({ event, listener }) => {
|
|
2691
|
-
elementRefs.forEach((ref) => {
|
|
2692
|
-
var _a;
|
|
2693
|
-
(_a = ref.current) === null || _a === void 0 ? void 0 : _a.removeEventListener(event, listener);
|
|
2694
|
-
});
|
|
2695
|
-
});
|
|
2696
|
-
};
|
|
2697
|
-
/**
|
|
2698
|
-
* rendered is also a dependency to ensure anchor observers are re-registered
|
|
2699
|
-
* since `tooltipRef` becomes stale after removing/adding the tooltip to the DOM
|
|
2700
|
-
*/
|
|
2701
|
-
}, [rendered, anchorRefs, anchorsBySelect, closeOnEsc, events]);
|
|
2702
|
-
useEffect(() => {
|
|
2703
|
-
let selector = anchorSelect !== null && anchorSelect !== void 0 ? anchorSelect : '';
|
|
2704
|
-
if (!selector && id) {
|
|
2705
|
-
selector = `[data-tooltip-id='${id}']`;
|
|
2706
|
-
}
|
|
2707
|
-
const documentObserverCallback = (mutationList) => {
|
|
2708
|
-
const newAnchors = [];
|
|
2709
|
-
mutationList.forEach((mutation) => {
|
|
2710
|
-
if (mutation.type === 'attributes' && mutation.attributeName === 'data-tooltip-id') {
|
|
2711
|
-
const newId = mutation.target.getAttribute('data-tooltip-id');
|
|
2712
|
-
if (newId === id) {
|
|
2713
|
-
newAnchors.push(mutation.target);
|
|
2714
|
-
}
|
|
2715
|
-
}
|
|
2716
|
-
if (mutation.type !== 'childList') {
|
|
2717
|
-
return;
|
|
2718
|
-
}
|
|
2719
|
-
if (activeAnchor) {
|
|
2720
|
-
[...mutation.removedNodes].some((node) => {
|
|
2721
|
-
if (node.contains(activeAnchor)) {
|
|
2722
|
-
setRendered(false);
|
|
2723
|
-
handleShow(false);
|
|
2724
|
-
setActiveAnchor(null);
|
|
2725
|
-
return true;
|
|
2726
|
-
}
|
|
2727
|
-
return false;
|
|
2728
|
-
});
|
|
2729
|
-
}
|
|
2730
|
-
if (!selector) {
|
|
2731
|
-
return;
|
|
2732
|
-
}
|
|
2733
|
-
try {
|
|
2734
|
-
const elements = [...mutation.addedNodes].filter((node) => node.nodeType === 1);
|
|
2735
|
-
newAnchors.push(
|
|
2736
|
-
// the element itself is an anchor
|
|
2737
|
-
...elements.filter((element) => element.matches(selector)));
|
|
2738
|
-
newAnchors.push(
|
|
2739
|
-
// the element has children which are anchors
|
|
2740
|
-
...elements.flatMap((element) => [...element.querySelectorAll(selector)]));
|
|
2741
|
-
}
|
|
2742
|
-
catch (_a) {
|
|
2743
|
-
/**
|
|
2744
|
-
* invalid CSS selector.
|
|
2745
|
-
* already warned on tooltip controller
|
|
2746
|
-
*/
|
|
2747
|
-
}
|
|
2748
|
-
});
|
|
2749
|
-
if (newAnchors.length) {
|
|
2750
|
-
setAnchorsBySelect((anchors) => [...anchors, ...newAnchors]);
|
|
2751
|
-
}
|
|
2752
|
-
};
|
|
2753
|
-
const documentObserver = new MutationObserver(documentObserverCallback);
|
|
2754
|
-
// watch for anchor being removed from the DOM
|
|
2755
|
-
documentObserver.observe(document.body, {
|
|
2756
|
-
childList: true,
|
|
2757
|
-
subtree: true,
|
|
2758
|
-
attributes: true,
|
|
2759
|
-
attributeFilter: ['data-tooltip-id'],
|
|
956
|
+
if (clickable) {
|
|
957
|
+
(_a = tooltipRef.current) == null ? void 0 : _a.addEventListener("mouseenter", handleMouseEnterTooltip);
|
|
958
|
+
(_b = tooltipRef.current) == null ? void 0 : _b.addEventListener("mouseleave", handleMouseLeaveTooltip);
|
|
959
|
+
}
|
|
960
|
+
enabledEvents.forEach(({ event, listener }) => {
|
|
961
|
+
elementRefs.forEach((ref) => {
|
|
962
|
+
var _a2;
|
|
963
|
+
(_a2 = ref.current) == null ? void 0 : _a2.addEventListener(event, listener);
|
|
964
|
+
});
|
|
965
|
+
});
|
|
966
|
+
return () => {
|
|
967
|
+
var _a2, _b2;
|
|
968
|
+
if (events.find((event) => event === "click")) {
|
|
969
|
+
window.removeEventListener("click", handleClickOutsideAnchors);
|
|
970
|
+
}
|
|
971
|
+
if (closeOnEsc) {
|
|
972
|
+
window.removeEventListener("keydown", handleEsc);
|
|
973
|
+
}
|
|
974
|
+
if (clickable) {
|
|
975
|
+
(_a2 = tooltipRef.current) == null ? void 0 : _a2.removeEventListener("mouseenter", handleMouseEnterTooltip);
|
|
976
|
+
(_b2 = tooltipRef.current) == null ? void 0 : _b2.removeEventListener("mouseleave", handleMouseLeaveTooltip);
|
|
977
|
+
}
|
|
978
|
+
enabledEvents.forEach(({ event, listener }) => {
|
|
979
|
+
elementRefs.forEach((ref) => {
|
|
980
|
+
var _a3;
|
|
981
|
+
(_a3 = ref.current) == null ? void 0 : _a3.removeEventListener(event, listener);
|
|
2760
982
|
});
|
|
2761
|
-
|
|
2762
|
-
|
|
2763
|
-
|
|
2764
|
-
|
|
2765
|
-
|
|
2766
|
-
|
|
2767
|
-
|
|
2768
|
-
|
|
2769
|
-
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
|
|
2776
|
-
|
|
2777
|
-
To see why this matters, comment this line, run `yarn dev` and click the
|
|
2778
|
-
"Hover me!" anchor.
|
|
2779
|
-
*/
|
|
2780
|
-
handleTooltipPosition(lastFloatPosition.current);
|
|
2781
|
-
}
|
|
2782
|
-
// if `float` is set, override regular positioning
|
|
2783
|
-
return;
|
|
983
|
+
});
|
|
984
|
+
};
|
|
985
|
+
}, [rendered, anchorRefs, anchorsBySelect, closeOnEsc, events]);
|
|
986
|
+
useEffect3(() => {
|
|
987
|
+
let selector = anchorSelect != null ? anchorSelect : "";
|
|
988
|
+
if (!selector && id) {
|
|
989
|
+
selector = `[data-tooltip-id='${id}']`;
|
|
990
|
+
}
|
|
991
|
+
const documentObserverCallback = (mutationList) => {
|
|
992
|
+
const newAnchors = [];
|
|
993
|
+
mutationList.forEach((mutation) => {
|
|
994
|
+
if (mutation.type === "attributes" && mutation.attributeName === "data-tooltip-id") {
|
|
995
|
+
const newId = mutation.target.getAttribute("data-tooltip-id");
|
|
996
|
+
if (newId === id) {
|
|
997
|
+
newAnchors.push(mutation.target);
|
|
998
|
+
}
|
|
2784
999
|
}
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
offset,
|
|
2788
|
-
elementReference: activeAnchor,
|
|
2789
|
-
tooltipReference: tooltipRef.current,
|
|
2790
|
-
tooltipArrowReference: tooltipArrowRef.current,
|
|
2791
|
-
strategy: positionStrategy,
|
|
2792
|
-
middlewares,
|
|
2793
|
-
}).then((computedStylesData) => {
|
|
2794
|
-
if (!mounted.current) {
|
|
2795
|
-
// invalidate computed positions after remount
|
|
2796
|
-
return;
|
|
2797
|
-
}
|
|
2798
|
-
if (Object.keys(computedStylesData.tooltipStyles).length) {
|
|
2799
|
-
setInlineStyles(computedStylesData.tooltipStyles);
|
|
2800
|
-
}
|
|
2801
|
-
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
2802
|
-
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
2803
|
-
}
|
|
2804
|
-
});
|
|
2805
|
-
}, [show, activeAnchor, content, html, place, offset, positionStrategy, position]);
|
|
2806
|
-
useEffect(() => {
|
|
2807
|
-
var _a;
|
|
2808
|
-
const anchorById = document.querySelector(`[id='${anchorId}']`);
|
|
2809
|
-
const anchors = [...anchorsBySelect, anchorById];
|
|
2810
|
-
if (!activeAnchor || !anchors.includes(activeAnchor)) {
|
|
2811
|
-
/**
|
|
2812
|
-
* if there is no active anchor,
|
|
2813
|
-
* or if the current active anchor is not amongst the allowed ones,
|
|
2814
|
-
* reset it
|
|
2815
|
-
*/
|
|
2816
|
-
setActiveAnchor((_a = anchorsBySelect[0]) !== null && _a !== void 0 ? _a : anchorById);
|
|
1000
|
+
if (mutation.type !== "childList") {
|
|
1001
|
+
return;
|
|
2817
1002
|
}
|
|
2818
|
-
|
|
2819
|
-
|
|
2820
|
-
|
|
2821
|
-
if (
|
|
2822
|
-
|
|
1003
|
+
if (activeAnchor) {
|
|
1004
|
+
;
|
|
1005
|
+
[...mutation.removedNodes].some((node) => {
|
|
1006
|
+
if (node.contains(activeAnchor)) {
|
|
1007
|
+
setRendered(false);
|
|
1008
|
+
handleShow(false);
|
|
1009
|
+
setActiveAnchor(null);
|
|
1010
|
+
return true;
|
|
2823
1011
|
}
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
}
|
|
2827
|
-
};
|
|
2828
|
-
}, []);
|
|
2829
|
-
useEffect(() => {
|
|
2830
|
-
let selector = anchorSelect;
|
|
2831
|
-
if (!selector && id) {
|
|
2832
|
-
selector = `[data-tooltip-id='${id}']`;
|
|
1012
|
+
return false;
|
|
1013
|
+
});
|
|
2833
1014
|
}
|
|
2834
1015
|
if (!selector) {
|
|
2835
|
-
|
|
1016
|
+
return;
|
|
2836
1017
|
}
|
|
2837
1018
|
try {
|
|
2838
|
-
|
|
2839
|
-
|
|
1019
|
+
const elements = [...mutation.addedNodes].filter((node) => node.nodeType === 1);
|
|
1020
|
+
newAnchors.push(
|
|
1021
|
+
...elements.filter(
|
|
1022
|
+
(element) => element.matches(selector)
|
|
1023
|
+
)
|
|
1024
|
+
);
|
|
1025
|
+
newAnchors.push(
|
|
1026
|
+
...elements.flatMap(
|
|
1027
|
+
(element) => [...element.querySelectorAll(selector)]
|
|
1028
|
+
)
|
|
1029
|
+
);
|
|
1030
|
+
} catch (e2) {
|
|
2840
1031
|
}
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
}
|
|
2846
|
-
const
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
1032
|
+
});
|
|
1033
|
+
if (newAnchors.length) {
|
|
1034
|
+
setAnchorsBySelect((anchors) => [...anchors, ...newAnchors]);
|
|
1035
|
+
}
|
|
1036
|
+
};
|
|
1037
|
+
const documentObserver = new MutationObserver(documentObserverCallback);
|
|
1038
|
+
documentObserver.observe(document.body, {
|
|
1039
|
+
childList: true,
|
|
1040
|
+
subtree: true,
|
|
1041
|
+
attributes: true,
|
|
1042
|
+
attributeFilter: ["data-tooltip-id"]
|
|
1043
|
+
});
|
|
1044
|
+
return () => {
|
|
1045
|
+
documentObserver.disconnect();
|
|
1046
|
+
};
|
|
1047
|
+
}, [id, anchorSelect, activeAnchor]);
|
|
1048
|
+
useEffect3(() => {
|
|
1049
|
+
if (position) {
|
|
1050
|
+
handleTooltipPosition(position);
|
|
1051
|
+
return;
|
|
1052
|
+
}
|
|
1053
|
+
if (float) {
|
|
1054
|
+
if (lastFloatPosition.current) {
|
|
1055
|
+
handleTooltipPosition(lastFloatPosition.current);
|
|
1056
|
+
}
|
|
1057
|
+
return;
|
|
1058
|
+
}
|
|
1059
|
+
computeTooltipPosition({
|
|
1060
|
+
place,
|
|
1061
|
+
offset,
|
|
1062
|
+
elementReference: activeAnchor,
|
|
1063
|
+
tooltipReference: tooltipRef.current,
|
|
1064
|
+
tooltipArrowReference: tooltipArrowRef.current,
|
|
1065
|
+
strategy: positionStrategy,
|
|
1066
|
+
middlewares
|
|
1067
|
+
}).then((computedStylesData) => {
|
|
1068
|
+
if (!mounted.current) {
|
|
1069
|
+
return;
|
|
1070
|
+
}
|
|
1071
|
+
if (Object.keys(computedStylesData.tooltipStyles).length) {
|
|
1072
|
+
setInlineStyles(computedStylesData.tooltipStyles);
|
|
1073
|
+
}
|
|
1074
|
+
if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
|
|
1075
|
+
setInlineArrowStyles(computedStylesData.tooltipArrowStyles);
|
|
1076
|
+
}
|
|
1077
|
+
});
|
|
1078
|
+
}, [show, activeAnchor, content, html, place, offset, positionStrategy, position]);
|
|
1079
|
+
useEffect3(() => {
|
|
1080
|
+
var _a;
|
|
1081
|
+
const anchorById = document.querySelector(`[id='${anchorId}']`);
|
|
1082
|
+
const anchors = [...anchorsBySelect, anchorById];
|
|
1083
|
+
if (!activeAnchor || !anchors.includes(activeAnchor)) {
|
|
1084
|
+
setActiveAnchor((_a = anchorsBySelect[0]) != null ? _a : anchorById);
|
|
1085
|
+
}
|
|
1086
|
+
}, [anchorId, anchorsBySelect, activeAnchor]);
|
|
1087
|
+
useEffect3(() => {
|
|
1088
|
+
return () => {
|
|
1089
|
+
if (tooltipShowDelayTimerRef.current) {
|
|
1090
|
+
clearTimeout(tooltipShowDelayTimerRef.current);
|
|
1091
|
+
}
|
|
1092
|
+
if (tooltipHideDelayTimerRef.current) {
|
|
1093
|
+
clearTimeout(tooltipHideDelayTimerRef.current);
|
|
1094
|
+
}
|
|
1095
|
+
};
|
|
1096
|
+
}, []);
|
|
1097
|
+
useEffect3(() => {
|
|
1098
|
+
let selector = anchorSelect;
|
|
1099
|
+
if (!selector && id) {
|
|
1100
|
+
selector = `[data-tooltip-id='${id}']`;
|
|
1101
|
+
}
|
|
1102
|
+
if (!selector) {
|
|
1103
|
+
return;
|
|
1104
|
+
}
|
|
1105
|
+
try {
|
|
1106
|
+
const anchors = Array.from(document.querySelectorAll(selector));
|
|
1107
|
+
setAnchorsBySelect(anchors);
|
|
1108
|
+
} catch (e2) {
|
|
1109
|
+
setAnchorsBySelect([]);
|
|
1110
|
+
}
|
|
1111
|
+
}, [id, anchorSelect]);
|
|
1112
|
+
const hasContentOrChildren = Boolean(html || content || children);
|
|
1113
|
+
const canShow = hasContentOrChildren && show && Object.keys(inlineStyles).length > 0;
|
|
1114
|
+
return rendered ? /* @__PURE__ */ jsxs(
|
|
1115
|
+
WrapperElement,
|
|
1116
|
+
{
|
|
1117
|
+
id,
|
|
1118
|
+
role: "tooltip",
|
|
1119
|
+
className: (0, import_classnames2.default)("react-tooltip", styles_module_default["tooltip"], styles_module_default[variant], className, {
|
|
1120
|
+
[styles_module_default["show"]]: canShow,
|
|
1121
|
+
[styles_module_default["fixed"]]: positionStrategy === "fixed",
|
|
1122
|
+
[styles_module_default["clickable"]]: clickable
|
|
1123
|
+
}),
|
|
1124
|
+
style: { ...externalStyles, ...inlineStyles },
|
|
1125
|
+
ref: tooltipRef,
|
|
1126
|
+
children: [
|
|
1127
|
+
html && /* @__PURE__ */ jsx4(TooltipContent_default, { content: html }) || content || children,
|
|
1128
|
+
/* @__PURE__ */ jsx4(
|
|
1129
|
+
WrapperElement,
|
|
1130
|
+
{
|
|
1131
|
+
className: (0, import_classnames2.default)("react-tooltip-arrow", styles_module_default["arrow"], classNameArrow, {
|
|
1132
|
+
/**
|
|
1133
|
+
* changed from dash `no-arrow` to camelcase because of:
|
|
1134
|
+
* https://github.com/indooorsman/esbuild-css-modules-plugin/issues/42
|
|
1135
|
+
*/
|
|
1136
|
+
[styles_module_default["noArrow"]]: noArrow
|
|
1137
|
+
}),
|
|
1138
|
+
style: inlineArrowStyles,
|
|
1139
|
+
ref: tooltipArrowRef
|
|
1140
|
+
}
|
|
1141
|
+
)
|
|
1142
|
+
]
|
|
1143
|
+
}
|
|
1144
|
+
) : null;
|
|
2855
1145
|
};
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
1146
|
+
var Tooltip_default = Tooltip;
|
|
1147
|
+
|
|
1148
|
+
// src/components/TooltipController/TooltipController.tsx
|
|
1149
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
1150
|
+
var TooltipController = ({
|
|
1151
|
+
id,
|
|
1152
|
+
anchorId,
|
|
1153
|
+
anchorSelect,
|
|
1154
|
+
content,
|
|
1155
|
+
html,
|
|
1156
|
+
className,
|
|
1157
|
+
classNameArrow,
|
|
1158
|
+
variant = "dark",
|
|
1159
|
+
place = "top",
|
|
1160
|
+
offset = 10,
|
|
1161
|
+
wrapper = "div",
|
|
1162
|
+
children = null,
|
|
1163
|
+
events = ["hover"],
|
|
1164
|
+
positionStrategy = "absolute",
|
|
1165
|
+
middlewares,
|
|
1166
|
+
delayShow = 0,
|
|
1167
|
+
delayHide = 0,
|
|
1168
|
+
float = false,
|
|
1169
|
+
noArrow = false,
|
|
1170
|
+
clickable = false,
|
|
1171
|
+
closeOnEsc = false,
|
|
1172
|
+
style,
|
|
1173
|
+
position,
|
|
1174
|
+
isOpen,
|
|
1175
|
+
setIsOpen,
|
|
1176
|
+
afterShow,
|
|
1177
|
+
afterHide
|
|
1178
|
+
}) => {
|
|
1179
|
+
const [tooltipContent, setTooltipContent] = useState3(content);
|
|
1180
|
+
const [tooltipHtml, setTooltipHtml] = useState3(html);
|
|
1181
|
+
const [tooltipPlace, setTooltipPlace] = useState3(place);
|
|
1182
|
+
const [tooltipVariant, setTooltipVariant] = useState3(variant);
|
|
1183
|
+
const [tooltipOffset, setTooltipOffset] = useState3(offset);
|
|
1184
|
+
const [tooltipDelayShow, setTooltipDelayShow] = useState3(delayShow);
|
|
1185
|
+
const [tooltipDelayHide, setTooltipDelayHide] = useState3(delayHide);
|
|
1186
|
+
const [tooltipFloat, setTooltipFloat] = useState3(float);
|
|
1187
|
+
const [tooltipWrapper, setTooltipWrapper] = useState3(wrapper);
|
|
1188
|
+
const [tooltipEvents, setTooltipEvents] = useState3(events);
|
|
1189
|
+
const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState3(positionStrategy);
|
|
1190
|
+
const [activeAnchor, setActiveAnchor] = useState3(null);
|
|
1191
|
+
const { anchorRefs, activeAnchor: providerActiveAnchor } = useTooltip(id);
|
|
1192
|
+
const getDataAttributesFromAnchorElement = (elementReference) => {
|
|
1193
|
+
const dataAttributes = elementReference == null ? void 0 : elementReference.getAttributeNames().reduce((acc, name) => {
|
|
1194
|
+
var _a;
|
|
1195
|
+
if (name.startsWith("data-tooltip-")) {
|
|
1196
|
+
const parsedAttribute = name.replace(/^data-tooltip-/, "");
|
|
1197
|
+
acc[parsedAttribute] = (_a = elementReference == null ? void 0 : elementReference.getAttribute(name)) != null ? _a : null;
|
|
1198
|
+
}
|
|
1199
|
+
return acc;
|
|
1200
|
+
}, {});
|
|
1201
|
+
return dataAttributes;
|
|
1202
|
+
};
|
|
1203
|
+
const applyAllDataAttributesFromAnchorElement = (dataAttributes) => {
|
|
1204
|
+
const handleDataAttributes = {
|
|
1205
|
+
place: (value) => {
|
|
1206
|
+
setTooltipPlace(value != null ? value : place);
|
|
1207
|
+
},
|
|
1208
|
+
content: (value) => {
|
|
1209
|
+
setTooltipContent(value != null ? value : content);
|
|
1210
|
+
},
|
|
1211
|
+
html: (value) => {
|
|
1212
|
+
setTooltipHtml(value != null ? value : html);
|
|
1213
|
+
},
|
|
1214
|
+
variant: (value) => {
|
|
1215
|
+
setTooltipVariant(value != null ? value : variant);
|
|
1216
|
+
},
|
|
1217
|
+
offset: (value) => {
|
|
1218
|
+
setTooltipOffset(value === null ? offset : Number(value));
|
|
1219
|
+
},
|
|
1220
|
+
wrapper: (value) => {
|
|
1221
|
+
setTooltipWrapper(value != null ? value : wrapper);
|
|
1222
|
+
},
|
|
1223
|
+
events: (value) => {
|
|
1224
|
+
const parsed = value == null ? void 0 : value.split(" ");
|
|
1225
|
+
setTooltipEvents(parsed != null ? parsed : events);
|
|
1226
|
+
},
|
|
1227
|
+
"position-strategy": (value) => {
|
|
1228
|
+
setTooltipPositionStrategy(value != null ? value : positionStrategy);
|
|
1229
|
+
},
|
|
1230
|
+
"delay-show": (value) => {
|
|
1231
|
+
setTooltipDelayShow(value === null ? delayShow : Number(value));
|
|
1232
|
+
},
|
|
1233
|
+
"delay-hide": (value) => {
|
|
1234
|
+
setTooltipDelayHide(value === null ? delayHide : Number(value));
|
|
1235
|
+
},
|
|
1236
|
+
float: (value) => {
|
|
1237
|
+
setTooltipFloat(value === null ? float : value === "true");
|
|
1238
|
+
}
|
|
2884
1239
|
};
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
'position-strategy': (value) => {
|
|
2913
|
-
var _a;
|
|
2914
|
-
setTooltipPositionStrategy((_a = value) !== null && _a !== void 0 ? _a : positionStrategy);
|
|
2915
|
-
},
|
|
2916
|
-
'delay-show': (value) => {
|
|
2917
|
-
setTooltipDelayShow(value === null ? delayShow : Number(value));
|
|
2918
|
-
},
|
|
2919
|
-
'delay-hide': (value) => {
|
|
2920
|
-
setTooltipDelayHide(value === null ? delayHide : Number(value));
|
|
2921
|
-
},
|
|
2922
|
-
float: (value) => {
|
|
2923
|
-
setTooltipFloat(value === null ? float : value === 'true');
|
|
2924
|
-
},
|
|
2925
|
-
};
|
|
2926
|
-
// reset unset data attributes to default values
|
|
2927
|
-
// without this, data attributes from the last active anchor will still be used
|
|
2928
|
-
Object.values(handleDataAttributes).forEach((handler) => handler(null));
|
|
2929
|
-
Object.entries(dataAttributes).forEach(([key, value]) => {
|
|
2930
|
-
var _a;
|
|
2931
|
-
(_a = handleDataAttributes[key]) === null || _a === void 0 ? void 0 : _a.call(handleDataAttributes, value);
|
|
1240
|
+
Object.values(handleDataAttributes).forEach((handler) => handler(null));
|
|
1241
|
+
Object.entries(dataAttributes).forEach(([key, value]) => {
|
|
1242
|
+
var _a;
|
|
1243
|
+
(_a = handleDataAttributes[key]) == null ? void 0 : _a.call(handleDataAttributes, value);
|
|
1244
|
+
});
|
|
1245
|
+
};
|
|
1246
|
+
useEffect4(() => {
|
|
1247
|
+
setTooltipContent(content);
|
|
1248
|
+
}, [content]);
|
|
1249
|
+
useEffect4(() => {
|
|
1250
|
+
setTooltipHtml(html);
|
|
1251
|
+
}, [html]);
|
|
1252
|
+
useEffect4(() => {
|
|
1253
|
+
setTooltipPlace(place);
|
|
1254
|
+
}, [place]);
|
|
1255
|
+
useEffect4(() => {
|
|
1256
|
+
var _a;
|
|
1257
|
+
const elementRefs = new Set(anchorRefs);
|
|
1258
|
+
let selector = anchorSelect;
|
|
1259
|
+
if (!selector && id) {
|
|
1260
|
+
selector = `[data-tooltip-id='${id}']`;
|
|
1261
|
+
}
|
|
1262
|
+
if (selector) {
|
|
1263
|
+
try {
|
|
1264
|
+
const anchorsBySelect = document.querySelectorAll(selector);
|
|
1265
|
+
anchorsBySelect.forEach((anchor) => {
|
|
1266
|
+
elementRefs.add({ current: anchor });
|
|
2932
1267
|
});
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
}, [content]);
|
|
2937
|
-
useEffect(() => {
|
|
2938
|
-
setTooltipHtml(html);
|
|
2939
|
-
}, [html]);
|
|
2940
|
-
useEffect(() => {
|
|
2941
|
-
setTooltipPlace(place);
|
|
2942
|
-
}, [place]);
|
|
2943
|
-
useEffect(() => {
|
|
2944
|
-
var _a;
|
|
2945
|
-
const elementRefs = new Set(anchorRefs);
|
|
2946
|
-
let selector = anchorSelect;
|
|
2947
|
-
if (!selector && id) {
|
|
2948
|
-
selector = `[data-tooltip-id='${id}']`;
|
|
2949
|
-
}
|
|
2950
|
-
if (selector) {
|
|
2951
|
-
try {
|
|
2952
|
-
const anchorsBySelect = document.querySelectorAll(selector);
|
|
2953
|
-
anchorsBySelect.forEach((anchor) => {
|
|
2954
|
-
elementRefs.add({ current: anchor });
|
|
2955
|
-
});
|
|
2956
|
-
}
|
|
2957
|
-
catch (_b) {
|
|
2958
|
-
{
|
|
2959
|
-
// eslint-disable-next-line no-console
|
|
2960
|
-
console.warn(`[react-tooltip] "${anchorSelect}" is not a valid CSS selector`);
|
|
2961
|
-
}
|
|
2962
|
-
}
|
|
2963
|
-
}
|
|
2964
|
-
const anchorById = document.querySelector(`[id='${anchorId}']`);
|
|
2965
|
-
if (anchorById) {
|
|
2966
|
-
elementRefs.add({ current: anchorById });
|
|
1268
|
+
} catch (e2) {
|
|
1269
|
+
if (true) {
|
|
1270
|
+
console.warn(`[react-tooltip] "${anchorSelect}" is not a valid CSS selector`);
|
|
2967
1271
|
}
|
|
2968
|
-
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
|
|
2973
|
-
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
|
|
2980
|
-
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
});
|
|
2984
|
-
};
|
|
2985
|
-
// Create an observer instance linked to the callback function
|
|
2986
|
-
const observer = new MutationObserver(observerCallback);
|
|
2987
|
-
// do not check for subtree and childrens, we only want to know attribute changes
|
|
2988
|
-
// to stay watching `data-attributes-*` from anchor element
|
|
2989
|
-
const observerConfig = { attributes: true, childList: false, subtree: false };
|
|
2990
|
-
if (anchorElement) {
|
|
2991
|
-
const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
|
|
2992
|
-
applyAllDataAttributesFromAnchorElement(dataAttributes);
|
|
2993
|
-
// Start observing the target node for configured mutations
|
|
2994
|
-
observer.observe(anchorElement, observerConfig);
|
|
1272
|
+
}
|
|
1273
|
+
}
|
|
1274
|
+
const anchorById = document.querySelector(`[id='${anchorId}']`);
|
|
1275
|
+
if (anchorById) {
|
|
1276
|
+
elementRefs.add({ current: anchorById });
|
|
1277
|
+
}
|
|
1278
|
+
if (!elementRefs.size) {
|
|
1279
|
+
return () => null;
|
|
1280
|
+
}
|
|
1281
|
+
const anchorElement = (_a = activeAnchor != null ? activeAnchor : anchorById) != null ? _a : providerActiveAnchor.current;
|
|
1282
|
+
const observerCallback = (mutationList) => {
|
|
1283
|
+
mutationList.forEach((mutation) => {
|
|
1284
|
+
var _a2;
|
|
1285
|
+
if (!anchorElement || mutation.type !== "attributes" || !((_a2 = mutation.attributeName) == null ? void 0 : _a2.startsWith("data-tooltip-"))) {
|
|
1286
|
+
return;
|
|
2995
1287
|
}
|
|
2996
|
-
|
|
2997
|
-
|
|
2998
|
-
|
|
2999
|
-
|
|
3000
|
-
|
|
3001
|
-
const
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
place: tooltipPlace,
|
|
3010
|
-
variant: tooltipVariant,
|
|
3011
|
-
offset: tooltipOffset,
|
|
3012
|
-
wrapper: tooltipWrapper,
|
|
3013
|
-
events: tooltipEvents,
|
|
3014
|
-
positionStrategy: tooltipPositionStrategy,
|
|
3015
|
-
middlewares,
|
|
3016
|
-
delayShow: tooltipDelayShow,
|
|
3017
|
-
delayHide: tooltipDelayHide,
|
|
3018
|
-
float: tooltipFloat,
|
|
3019
|
-
noArrow,
|
|
3020
|
-
clickable,
|
|
3021
|
-
closeOnEsc,
|
|
3022
|
-
style,
|
|
3023
|
-
position,
|
|
3024
|
-
isOpen,
|
|
3025
|
-
setIsOpen,
|
|
3026
|
-
afterShow,
|
|
3027
|
-
afterHide,
|
|
3028
|
-
activeAnchor,
|
|
3029
|
-
setActiveAnchor: (anchor) => setActiveAnchor(anchor),
|
|
1288
|
+
const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
|
|
1289
|
+
applyAllDataAttributesFromAnchorElement(dataAttributes);
|
|
1290
|
+
});
|
|
1291
|
+
};
|
|
1292
|
+
const observer = new MutationObserver(observerCallback);
|
|
1293
|
+
const observerConfig = { attributes: true, childList: false, subtree: false };
|
|
1294
|
+
if (anchorElement) {
|
|
1295
|
+
const dataAttributes = getDataAttributesFromAnchorElement(anchorElement);
|
|
1296
|
+
applyAllDataAttributesFromAnchorElement(dataAttributes);
|
|
1297
|
+
observer.observe(anchorElement, observerConfig);
|
|
1298
|
+
}
|
|
1299
|
+
return () => {
|
|
1300
|
+
observer.disconnect();
|
|
3030
1301
|
};
|
|
3031
|
-
|
|
1302
|
+
}, [anchorRefs, providerActiveAnchor, activeAnchor, anchorId, anchorSelect]);
|
|
1303
|
+
const props = {
|
|
1304
|
+
id,
|
|
1305
|
+
anchorId,
|
|
1306
|
+
anchorSelect,
|
|
1307
|
+
className,
|
|
1308
|
+
classNameArrow,
|
|
1309
|
+
content: tooltipContent,
|
|
1310
|
+
html: tooltipHtml,
|
|
1311
|
+
place: tooltipPlace,
|
|
1312
|
+
variant: tooltipVariant,
|
|
1313
|
+
offset: tooltipOffset,
|
|
1314
|
+
wrapper: tooltipWrapper,
|
|
1315
|
+
events: tooltipEvents,
|
|
1316
|
+
positionStrategy: tooltipPositionStrategy,
|
|
1317
|
+
middlewares,
|
|
1318
|
+
delayShow: tooltipDelayShow,
|
|
1319
|
+
delayHide: tooltipDelayHide,
|
|
1320
|
+
float: tooltipFloat,
|
|
1321
|
+
noArrow,
|
|
1322
|
+
clickable,
|
|
1323
|
+
closeOnEsc,
|
|
1324
|
+
style,
|
|
1325
|
+
position,
|
|
1326
|
+
isOpen,
|
|
1327
|
+
setIsOpen,
|
|
1328
|
+
afterShow,
|
|
1329
|
+
afterHide,
|
|
1330
|
+
activeAnchor,
|
|
1331
|
+
setActiveAnchor: (anchor) => setActiveAnchor(anchor)
|
|
1332
|
+
};
|
|
1333
|
+
return children ? /* @__PURE__ */ jsx5(Tooltip_default, { ...props, children }) : /* @__PURE__ */ jsx5(Tooltip_default, { ...props });
|
|
3032
1334
|
};
|
|
3033
|
-
|
|
3034
|
-
export {
|
|
1335
|
+
var TooltipController_default = TooltipController;
|
|
1336
|
+
export {
|
|
1337
|
+
TooltipController_default as Tooltip,
|
|
1338
|
+
TooltipProvider_default as TooltipProvider,
|
|
1339
|
+
TooltipWrapper_default as TooltipWrapper
|
|
1340
|
+
};
|
|
1341
|
+
/*! Bundled license information:
|
|
1342
|
+
|
|
1343
|
+
classnames/index.js:
|
|
1344
|
+
(*!
|
|
1345
|
+
Copyright (c) 2018 Jed Watson.
|
|
1346
|
+
Licensed under the MIT License (MIT), see
|
|
1347
|
+
http://jedwatson.github.io/classnames
|
|
1348
|
+
*)
|
|
1349
|
+
*/
|
|
1350
|
+
//# sourceMappingURL=react-tooltip.esm.js.map
|