1 | 'use strict';
|
2 |
|
3 | var index = require('./index-93294e6c.js');
|
4 |
|
5 | var React = require('react');
|
6 |
|
7 | var theming = require('@storybook/theming');
|
8 |
|
9 | var reactDom = require('react-dom');
|
10 |
|
11 | var memoize = require('memoizerific');
|
12 |
|
13 | require('@storybook/csf');
|
14 |
|
15 | require('qs');
|
16 |
|
17 | require('@storybook/client-logger');
|
18 |
|
19 | function _interopDefaultLegacy(e) {
|
20 | return e && typeof e === 'object' && 'default' in e ? e : {
|
21 | 'default': e
|
22 | };
|
23 | }
|
24 |
|
25 | function _interopNamespace(e) {
|
26 | if (e && e.__esModule) return e;
|
27 | var n = Object.create(null);
|
28 |
|
29 | if (e) {
|
30 | Object.keys(e).forEach(function (k) {
|
31 | if (k !== 'default') {
|
32 | var d = Object.getOwnPropertyDescriptor(e, k);
|
33 | Object.defineProperty(n, k, d.get ? d : {
|
34 | enumerable: true,
|
35 | get: function () {
|
36 | return e[k];
|
37 | }
|
38 | });
|
39 | }
|
40 | });
|
41 | }
|
42 |
|
43 | n["default"] = e;
|
44 | return Object.freeze(n);
|
45 | }
|
46 |
|
47 | var React__namespace = _interopNamespace(React);
|
48 |
|
49 | var React__default = _interopDefaultLegacy(React);
|
50 |
|
51 | var memoize__default = _interopDefaultLegacy(memoize);
|
52 |
|
53 | function getNodeName(element) {
|
54 | return element ? (element.nodeName || '').toLowerCase() : null;
|
55 | }
|
56 |
|
57 | function getWindow(node) {
|
58 | if (node == null) {
|
59 | return window;
|
60 | }
|
61 |
|
62 | if (node.toString() !== '[object Window]') {
|
63 | var ownerDocument = node.ownerDocument;
|
64 | return ownerDocument ? ownerDocument.defaultView || window : window;
|
65 | }
|
66 |
|
67 | return node;
|
68 | }
|
69 |
|
70 | function isElement(node) {
|
71 | var OwnElement = getWindow(node).Element;
|
72 | return node instanceof OwnElement || node instanceof Element;
|
73 | }
|
74 |
|
75 | function isHTMLElement(node) {
|
76 | var OwnElement = getWindow(node).HTMLElement;
|
77 | return node instanceof OwnElement || node instanceof HTMLElement;
|
78 | }
|
79 |
|
80 | function isShadowRoot(node) {
|
81 |
|
82 | if (typeof ShadowRoot === 'undefined') {
|
83 | return false;
|
84 | }
|
85 |
|
86 | var OwnElement = getWindow(node).ShadowRoot;
|
87 | return node instanceof OwnElement || node instanceof ShadowRoot;
|
88 | }
|
89 |
|
90 |
|
91 | function applyStyles(_ref) {
|
92 | var state = _ref.state;
|
93 | Object.keys(state.elements).forEach(function (name) {
|
94 | var style = state.styles[name] || {};
|
95 | var attributes = state.attributes[name] || {};
|
96 | var element = state.elements[name];
|
97 |
|
98 | if (!isHTMLElement(element) || !getNodeName(element)) {
|
99 | return;
|
100 | }
|
101 |
|
102 |
|
103 |
|
104 |
|
105 | Object.assign(element.style, style);
|
106 | Object.keys(attributes).forEach(function (name) {
|
107 | var value = attributes[name];
|
108 |
|
109 | if (value === false) {
|
110 | element.removeAttribute(name);
|
111 | } else {
|
112 | element.setAttribute(name, value === true ? '' : value);
|
113 | }
|
114 | });
|
115 | });
|
116 | }
|
117 |
|
118 | function effect$2(_ref2) {
|
119 | var state = _ref2.state;
|
120 | var initialStyles = {
|
121 | popper: {
|
122 | position: state.options.strategy,
|
123 | left: '0',
|
124 | top: '0',
|
125 | margin: '0'
|
126 | },
|
127 | arrow: {
|
128 | position: 'absolute'
|
129 | },
|
130 | reference: {}
|
131 | };
|
132 | Object.assign(state.elements.popper.style, initialStyles.popper);
|
133 | state.styles = initialStyles;
|
134 |
|
135 | if (state.elements.arrow) {
|
136 | Object.assign(state.elements.arrow.style, initialStyles.arrow);
|
137 | }
|
138 |
|
139 | return function () {
|
140 | Object.keys(state.elements).forEach(function (name) {
|
141 | var element = state.elements[name];
|
142 | var attributes = state.attributes[name] || {};
|
143 | var styleProperties = Object.keys(state.styles.hasOwnProperty(name) ? state.styles[name] : initialStyles[name]);
|
144 |
|
145 | var style = styleProperties.reduce(function (style, property) {
|
146 | style[property] = '';
|
147 | return style;
|
148 | }, {});
|
149 |
|
150 | if (!isHTMLElement(element) || !getNodeName(element)) {
|
151 | return;
|
152 | }
|
153 |
|
154 | Object.assign(element.style, style);
|
155 | Object.keys(attributes).forEach(function (attribute) {
|
156 | element.removeAttribute(attribute);
|
157 | });
|
158 | });
|
159 | };
|
160 | }
|
161 |
|
162 |
|
163 | var applyStyles$1 = {
|
164 | name: 'applyStyles',
|
165 | enabled: true,
|
166 | phase: 'write',
|
167 | fn: applyStyles,
|
168 | effect: effect$2,
|
169 | requires: ['computeStyles']
|
170 | };
|
171 |
|
172 | function getBasePlacement(placement) {
|
173 | return placement.split('-')[0];
|
174 | }
|
175 |
|
176 | var max = Math.max;
|
177 | var min = Math.min;
|
178 | var round = Math.round;
|
179 |
|
180 | function getBoundingClientRect(element, includeScale) {
|
181 | if (includeScale === void 0) {
|
182 | includeScale = false;
|
183 | }
|
184 |
|
185 | var rect = element.getBoundingClientRect();
|
186 | var scaleX = 1;
|
187 | var scaleY = 1;
|
188 |
|
189 | if (isHTMLElement(element) && includeScale) {
|
190 | var offsetHeight = element.offsetHeight;
|
191 | var offsetWidth = element.offsetWidth;
|
192 |
|
193 |
|
194 | if (offsetWidth > 0) {
|
195 | scaleX = round(rect.width) / offsetWidth || 1;
|
196 | }
|
197 |
|
198 | if (offsetHeight > 0) {
|
199 | scaleY = round(rect.height) / offsetHeight || 1;
|
200 | }
|
201 | }
|
202 |
|
203 | return {
|
204 | width: rect.width / scaleX,
|
205 | height: rect.height / scaleY,
|
206 | top: rect.top / scaleY,
|
207 | right: rect.right / scaleX,
|
208 | bottom: rect.bottom / scaleY,
|
209 | left: rect.left / scaleX,
|
210 | x: rect.left / scaleX,
|
211 | y: rect.top / scaleY
|
212 | };
|
213 | }
|
214 |
|
215 |
|
216 | function getLayoutRect(element) {
|
217 | var clientRect = getBoundingClientRect(element);
|
218 |
|
219 |
|
220 | var width = element.offsetWidth;
|
221 | var height = element.offsetHeight;
|
222 |
|
223 | if (Math.abs(clientRect.width - width) <= 1) {
|
224 | width = clientRect.width;
|
225 | }
|
226 |
|
227 | if (Math.abs(clientRect.height - height) <= 1) {
|
228 | height = clientRect.height;
|
229 | }
|
230 |
|
231 | return {
|
232 | x: element.offsetLeft,
|
233 | y: element.offsetTop,
|
234 | width: width,
|
235 | height: height
|
236 | };
|
237 | }
|
238 |
|
239 | function contains(parent, child) {
|
240 | var rootNode = child.getRootNode && child.getRootNode();
|
241 |
|
242 | if (parent.contains(child)) {
|
243 | return true;
|
244 | }
|
245 | else if (rootNode && isShadowRoot(rootNode)) {
|
246 | var next = child;
|
247 |
|
248 | do {
|
249 | if (next && parent.isSameNode(next)) {
|
250 | return true;
|
251 | }
|
252 |
|
253 |
|
254 | next = next.parentNode || next.host;
|
255 | } while (next);
|
256 | }
|
257 |
|
258 |
|
259 | return false;
|
260 | }
|
261 |
|
262 | function getComputedStyle(element) {
|
263 | return getWindow(element).getComputedStyle(element);
|
264 | }
|
265 |
|
266 | function isTableElement(element) {
|
267 | return ['table', 'td', 'th'].indexOf(getNodeName(element)) >= 0;
|
268 | }
|
269 |
|
270 | function getDocumentElement(element) {
|
271 |
|
272 | return ((isElement(element) ? element.ownerDocument :
|
273 | element.document) || window.document).documentElement;
|
274 | }
|
275 |
|
276 | function getParentNode(element) {
|
277 | if (getNodeName(element) === 'html') {
|
278 | return element;
|
279 | }
|
280 |
|
281 | return (
|
282 |
|
283 |
|
284 | element.assignedSlot ||
|
285 | element.parentNode || (
|
286 | isShadowRoot(element) ? element.host : null) ||
|
287 |
|
288 | getDocumentElement(element)
|
289 |
|
290 | );
|
291 | }
|
292 |
|
293 | function getTrueOffsetParent(element) {
|
294 | if (!isHTMLElement(element) ||
|
295 | getComputedStyle(element).position === 'fixed') {
|
296 | return null;
|
297 | }
|
298 |
|
299 | return element.offsetParent;
|
300 | }
|
301 |
|
302 |
|
303 |
|
304 | function getContainingBlock(element) {
|
305 | var isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') !== -1;
|
306 | var isIE = navigator.userAgent.indexOf('Trident') !== -1;
|
307 |
|
308 | if (isIE && isHTMLElement(element)) {
|
309 |
|
310 | var elementCss = getComputedStyle(element);
|
311 |
|
312 | if (elementCss.position === 'fixed') {
|
313 | return null;
|
314 | }
|
315 | }
|
316 |
|
317 | var currentNode = getParentNode(element);
|
318 |
|
319 | while (isHTMLElement(currentNode) && ['html', 'body'].indexOf(getNodeName(currentNode)) < 0) {
|
320 | var css = getComputedStyle(currentNode);
|
321 |
|
322 |
|
323 |
|
324 | if (css.transform !== 'none' || css.perspective !== 'none' || css.contain === 'paint' || ['transform', 'perspective'].indexOf(css.willChange) !== -1 || isFirefox && css.willChange === 'filter' || isFirefox && css.filter && css.filter !== 'none') {
|
325 | return currentNode;
|
326 | } else {
|
327 | currentNode = currentNode.parentNode;
|
328 | }
|
329 | }
|
330 |
|
331 | return null;
|
332 | }
|
333 |
|
334 |
|
335 |
|
336 | function getOffsetParent(element) {
|
337 | var window = getWindow(element);
|
338 | var offsetParent = getTrueOffsetParent(element);
|
339 |
|
340 | while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
|
341 | offsetParent = getTrueOffsetParent(offsetParent);
|
342 | }
|
343 |
|
344 | if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static')) {
|
345 | return window;
|
346 | }
|
347 |
|
348 | return offsetParent || getContainingBlock(element) || window;
|
349 | }
|
350 |
|
351 | function getMainAxisFromPlacement(placement) {
|
352 | return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
|
353 | }
|
354 |
|
355 | function within(min$1, value, max$1) {
|
356 | return max(min$1, min(value, max$1));
|
357 | }
|
358 |
|
359 | function withinMaxClamp(min, value, max) {
|
360 | var v = within(min, value, max);
|
361 | return v > max ? max : v;
|
362 | }
|
363 |
|
364 | function getFreshSideObject() {
|
365 | return {
|
366 | top: 0,
|
367 | right: 0,
|
368 | bottom: 0,
|
369 | left: 0
|
370 | };
|
371 | }
|
372 |
|
373 | function mergePaddingObject(paddingObject) {
|
374 | return Object.assign({}, getFreshSideObject(), paddingObject);
|
375 | }
|
376 |
|
377 | function expandToHashMap(value, keys) {
|
378 | return keys.reduce(function (hashMap, key) {
|
379 | hashMap[key] = value;
|
380 | return hashMap;
|
381 | }, {});
|
382 | }
|
383 |
|
384 | var toPaddingObject = function toPaddingObject(padding, state) {
|
385 | padding = typeof padding === 'function' ? padding(Object.assign({}, state.rects, {
|
386 | placement: state.placement
|
387 | })) : padding;
|
388 | return mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, index.basePlacements));
|
389 | };
|
390 |
|
391 | function arrow(_ref) {
|
392 | var _state$modifiersData$;
|
393 |
|
394 | var state = _ref.state,
|
395 | name = _ref.name,
|
396 | options = _ref.options;
|
397 | var arrowElement = state.elements.arrow;
|
398 | var popperOffsets = state.modifiersData.popperOffsets;
|
399 | var basePlacement = getBasePlacement(state.placement);
|
400 | var axis = getMainAxisFromPlacement(basePlacement);
|
401 | var isVertical = [index.left, index.right].indexOf(basePlacement) >= 0;
|
402 | var len = isVertical ? 'height' : 'width';
|
403 |
|
404 | if (!arrowElement || !popperOffsets) {
|
405 | return;
|
406 | }
|
407 |
|
408 | var paddingObject = toPaddingObject(options.padding, state);
|
409 | var arrowRect = getLayoutRect(arrowElement);
|
410 | var minProp = axis === 'y' ? index.top : index.left;
|
411 | var maxProp = axis === 'y' ? index.bottom : index.right;
|
412 | var endDiff = state.rects.reference[len] + state.rects.reference[axis] - popperOffsets[axis] - state.rects.popper[len];
|
413 | var startDiff = popperOffsets[axis] - state.rects.reference[axis];
|
414 | var arrowOffsetParent = getOffsetParent(arrowElement);
|
415 | var clientSize = arrowOffsetParent ? axis === 'y' ? arrowOffsetParent.clientHeight || 0 : arrowOffsetParent.clientWidth || 0 : 0;
|
416 | var centerToReference = endDiff / 2 - startDiff / 2;
|
417 |
|
418 |
|
419 | var min = paddingObject[minProp];
|
420 | var max = clientSize - arrowRect[len] - paddingObject[maxProp];
|
421 | var center = clientSize / 2 - arrowRect[len] / 2 + centerToReference;
|
422 | var offset = within(min, center, max);
|
423 |
|
424 | var axisProp = axis;
|
425 | state.modifiersData[name] = (_state$modifiersData$ = {}, _state$modifiersData$[axisProp] = offset, _state$modifiersData$.centerOffset = offset - center, _state$modifiersData$);
|
426 | }
|
427 |
|
428 | function effect$1(_ref2) {
|
429 | var state = _ref2.state,
|
430 | options = _ref2.options;
|
431 | var _options$element = options.element,
|
432 | arrowElement = _options$element === void 0 ? '[data-popper-arrow]' : _options$element;
|
433 |
|
434 | if (arrowElement == null) {
|
435 | return;
|
436 | }
|
437 |
|
438 |
|
439 | if (typeof arrowElement === 'string') {
|
440 | arrowElement = state.elements.popper.querySelector(arrowElement);
|
441 |
|
442 | if (!arrowElement) {
|
443 | return;
|
444 | }
|
445 | }
|
446 |
|
447 | if (process.env.NODE_ENV !== "production") {
|
448 | if (!isHTMLElement(arrowElement)) {
|
449 | console.error(['Popper: "arrow" element must be an HTMLElement (not an SVGElement).', 'To use an SVG arrow, wrap it in an HTMLElement that will be used as', 'the arrow.'].join(' '));
|
450 | }
|
451 | }
|
452 |
|
453 | if (!contains(state.elements.popper, arrowElement)) {
|
454 | if (process.env.NODE_ENV !== "production") {
|
455 | console.error(['Popper: "arrow" modifier\'s `element` must be a child of the popper', 'element.'].join(' '));
|
456 | }
|
457 |
|
458 | return;
|
459 | }
|
460 |
|
461 | state.elements.arrow = arrowElement;
|
462 | }
|
463 |
|
464 |
|
465 | var arrow$1 = {
|
466 | name: 'arrow',
|
467 | enabled: true,
|
468 | phase: 'main',
|
469 | fn: arrow,
|
470 | effect: effect$1,
|
471 | requires: ['popperOffsets'],
|
472 | requiresIfExists: ['preventOverflow']
|
473 | };
|
474 |
|
475 | function getVariation(placement) {
|
476 | return placement.split('-')[1];
|
477 | }
|
478 |
|
479 | var unsetSides = {
|
480 | top: 'auto',
|
481 | right: 'auto',
|
482 | bottom: 'auto',
|
483 | left: 'auto'
|
484 | };
|
485 |
|
486 |
|
487 |
|
488 | function roundOffsetsByDPR(_ref) {
|
489 | var x = _ref.x,
|
490 | y = _ref.y;
|
491 | var win = window;
|
492 | var dpr = win.devicePixelRatio || 1;
|
493 | return {
|
494 | x: round(x * dpr) / dpr || 0,
|
495 | y: round(y * dpr) / dpr || 0
|
496 | };
|
497 | }
|
498 |
|
499 | function mapToStyles(_ref2) {
|
500 | var _Object$assign2;
|
501 |
|
502 | var popper = _ref2.popper,
|
503 | popperRect = _ref2.popperRect,
|
504 | placement = _ref2.placement,
|
505 | variation = _ref2.variation,
|
506 | offsets = _ref2.offsets,
|
507 | position = _ref2.position,
|
508 | gpuAcceleration = _ref2.gpuAcceleration,
|
509 | adaptive = _ref2.adaptive,
|
510 | roundOffsets = _ref2.roundOffsets,
|
511 | isFixed = _ref2.isFixed;
|
512 | var _offsets$x = offsets.x,
|
513 | x = _offsets$x === void 0 ? 0 : _offsets$x,
|
514 | _offsets$y = offsets.y,
|
515 | y = _offsets$y === void 0 ? 0 : _offsets$y;
|
516 |
|
517 | var _ref3 = typeof roundOffsets === 'function' ? roundOffsets({
|
518 | x: x,
|
519 | y: y
|
520 | }) : {
|
521 | x: x,
|
522 | y: y
|
523 | };
|
524 |
|
525 | x = _ref3.x;
|
526 | y = _ref3.y;
|
527 | var hasX = offsets.hasOwnProperty('x');
|
528 | var hasY = offsets.hasOwnProperty('y');
|
529 | var sideX = index.left;
|
530 | var sideY = index.top;
|
531 | var win = window;
|
532 |
|
533 | if (adaptive) {
|
534 | var offsetParent = getOffsetParent(popper);
|
535 | var heightProp = 'clientHeight';
|
536 | var widthProp = 'clientWidth';
|
537 |
|
538 | if (offsetParent === getWindow(popper)) {
|
539 | offsetParent = getDocumentElement(popper);
|
540 |
|
541 | if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
|
542 | heightProp = 'scrollHeight';
|
543 | widthProp = 'scrollWidth';
|
544 | }
|
545 | }
|
546 |
|
547 |
|
548 | offsetParent = offsetParent;
|
549 |
|
550 | if (placement === index.top || (placement === index.left || placement === index.right) && variation === index.end) {
|
551 | sideY = index.bottom;
|
552 | var offsetY = isFixed && win.visualViewport ? win.visualViewport.height :
|
553 | offsetParent[heightProp];
|
554 | y -= offsetY - popperRect.height;
|
555 | y *= gpuAcceleration ? 1 : -1;
|
556 | }
|
557 |
|
558 | if (placement === index.left || (placement === index.top || placement === index.bottom) && variation === index.end) {
|
559 | sideX = index.right;
|
560 | var offsetX = isFixed && win.visualViewport ? win.visualViewport.width :
|
561 | offsetParent[widthProp];
|
562 | x -= offsetX - popperRect.width;
|
563 | x *= gpuAcceleration ? 1 : -1;
|
564 | }
|
565 | }
|
566 |
|
567 | var commonStyles = Object.assign({
|
568 | position: position
|
569 | }, adaptive && unsetSides);
|
570 |
|
571 | var _ref4 = roundOffsets === true ? roundOffsetsByDPR({
|
572 | x: x,
|
573 | y: y
|
574 | }) : {
|
575 | x: x,
|
576 | y: y
|
577 | };
|
578 |
|
579 | x = _ref4.x;
|
580 | y = _ref4.y;
|
581 |
|
582 | if (gpuAcceleration) {
|
583 | var _Object$assign;
|
584 |
|
585 | return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) <= 1 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
|
586 | }
|
587 |
|
588 | return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
|
589 | }
|
590 |
|
591 | function computeStyles(_ref5) {
|
592 | var state = _ref5.state,
|
593 | options = _ref5.options;
|
594 | var _options$gpuAccelerat = options.gpuAcceleration,
|
595 | gpuAcceleration = _options$gpuAccelerat === void 0 ? true : _options$gpuAccelerat,
|
596 | _options$adaptive = options.adaptive,
|
597 | adaptive = _options$adaptive === void 0 ? true : _options$adaptive,
|
598 | _options$roundOffsets = options.roundOffsets,
|
599 | roundOffsets = _options$roundOffsets === void 0 ? true : _options$roundOffsets;
|
600 |
|
601 | if (process.env.NODE_ENV !== "production") {
|
602 | var transitionProperty = getComputedStyle(state.elements.popper).transitionProperty || '';
|
603 |
|
604 | if (adaptive && ['transform', 'top', 'right', 'bottom', 'left'].some(function (property) {
|
605 | return transitionProperty.indexOf(property) >= 0;
|
606 | })) {
|
607 | console.warn(['Popper: Detected CSS transitions on at least one of the following', 'CSS properties: "transform", "top", "right", "bottom", "left".', '\n\n', 'Disable the "computeStyles" modifier\'s `adaptive` option to allow', 'for smooth transitions, or remove these properties from the CSS', 'transition declaration on the popper element if only transitioning', 'opacity or background-color for example.', '\n\n', 'We recommend using the popper element as a wrapper around an inner', 'element that can have any CSS property transitioned for animations.'].join(' '));
|
608 | }
|
609 | }
|
610 |
|
611 | var commonStyles = {
|
612 | placement: getBasePlacement(state.placement),
|
613 | variation: getVariation(state.placement),
|
614 | popper: state.elements.popper,
|
615 | popperRect: state.rects.popper,
|
616 | gpuAcceleration: gpuAcceleration,
|
617 | isFixed: state.options.strategy === 'fixed'
|
618 | };
|
619 |
|
620 | if (state.modifiersData.popperOffsets != null) {
|
621 | state.styles.popper = Object.assign({}, state.styles.popper, mapToStyles(Object.assign({}, commonStyles, {
|
622 | offsets: state.modifiersData.popperOffsets,
|
623 | position: state.options.strategy,
|
624 | adaptive: adaptive,
|
625 | roundOffsets: roundOffsets
|
626 | })));
|
627 | }
|
628 |
|
629 | if (state.modifiersData.arrow != null) {
|
630 | state.styles.arrow = Object.assign({}, state.styles.arrow, mapToStyles(Object.assign({}, commonStyles, {
|
631 | offsets: state.modifiersData.arrow,
|
632 | position: 'absolute',
|
633 | adaptive: false,
|
634 | roundOffsets: roundOffsets
|
635 | })));
|
636 | }
|
637 |
|
638 | state.attributes.popper = Object.assign({}, state.attributes.popper, {
|
639 | 'data-popper-placement': state.placement
|
640 | });
|
641 | }
|
642 |
|
643 |
|
644 | var computeStyles$1 = {
|
645 | name: 'computeStyles',
|
646 | enabled: true,
|
647 | phase: 'beforeWrite',
|
648 | fn: computeStyles,
|
649 | data: {}
|
650 | };
|
651 | var passive = {
|
652 | passive: true
|
653 | };
|
654 |
|
655 | function effect(_ref) {
|
656 | var state = _ref.state,
|
657 | instance = _ref.instance,
|
658 | options = _ref.options;
|
659 | var _options$scroll = options.scroll,
|
660 | scroll = _options$scroll === void 0 ? true : _options$scroll,
|
661 | _options$resize = options.resize,
|
662 | resize = _options$resize === void 0 ? true : _options$resize;
|
663 | var window = getWindow(state.elements.popper);
|
664 | var scrollParents = [].concat(state.scrollParents.reference, state.scrollParents.popper);
|
665 |
|
666 | if (scroll) {
|
667 | scrollParents.forEach(function (scrollParent) {
|
668 | scrollParent.addEventListener('scroll', instance.update, passive);
|
669 | });
|
670 | }
|
671 |
|
672 | if (resize) {
|
673 | window.addEventListener('resize', instance.update, passive);
|
674 | }
|
675 |
|
676 | return function () {
|
677 | if (scroll) {
|
678 | scrollParents.forEach(function (scrollParent) {
|
679 | scrollParent.removeEventListener('scroll', instance.update, passive);
|
680 | });
|
681 | }
|
682 |
|
683 | if (resize) {
|
684 | window.removeEventListener('resize', instance.update, passive);
|
685 | }
|
686 | };
|
687 | }
|
688 |
|
689 |
|
690 | var eventListeners = {
|
691 | name: 'eventListeners',
|
692 | enabled: true,
|
693 | phase: 'write',
|
694 | fn: function fn() {},
|
695 | effect: effect,
|
696 | data: {}
|
697 | };
|
698 | var hash$1 = {
|
699 | left: 'right',
|
700 | right: 'left',
|
701 | bottom: 'top',
|
702 | top: 'bottom'
|
703 | };
|
704 |
|
705 | function getOppositePlacement(placement) {
|
706 | return placement.replace(/left|right|bottom|top/g, function (matched) {
|
707 | return hash$1[matched];
|
708 | });
|
709 | }
|
710 |
|
711 | var hash = {
|
712 | start: 'end',
|
713 | end: 'start'
|
714 | };
|
715 |
|
716 | function getOppositeVariationPlacement(placement) {
|
717 | return placement.replace(/start|end/g, function (matched) {
|
718 | return hash[matched];
|
719 | });
|
720 | }
|
721 |
|
722 | function getWindowScroll(node) {
|
723 | var win = getWindow(node);
|
724 | var scrollLeft = win.pageXOffset;
|
725 | var scrollTop = win.pageYOffset;
|
726 | return {
|
727 | scrollLeft: scrollLeft,
|
728 | scrollTop: scrollTop
|
729 | };
|
730 | }
|
731 |
|
732 | function getWindowScrollBarX(element) {
|
733 |
|
734 |
|
735 |
|
736 |
|
737 |
|
738 |
|
739 |
|
740 | return getBoundingClientRect(getDocumentElement(element)).left + getWindowScroll(element).scrollLeft;
|
741 | }
|
742 |
|
743 | function getViewportRect(element) {
|
744 | var win = getWindow(element);
|
745 | var html = getDocumentElement(element);
|
746 | var visualViewport = win.visualViewport;
|
747 | var width = html.clientWidth;
|
748 | var height = html.clientHeight;
|
749 | var x = 0;
|
750 | var y = 0;
|
751 |
|
752 |
|
753 |
|
754 |
|
755 |
|
756 | if (visualViewport) {
|
757 | width = visualViewport.width;
|
758 | height = visualViewport.height;
|
759 |
|
760 |
|
761 |
|
762 |
|
763 |
|
764 |
|
765 |
|
766 |
|
767 | if (!/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
|
768 | x = visualViewport.offsetLeft;
|
769 | y = visualViewport.offsetTop;
|
770 | }
|
771 | }
|
772 |
|
773 | return {
|
774 | width: width,
|
775 | height: height,
|
776 | x: x + getWindowScrollBarX(element),
|
777 | y: y
|
778 | };
|
779 | }
|
780 |
|
781 |
|
782 | function getDocumentRect(element) {
|
783 | var _element$ownerDocumen;
|
784 |
|
785 | var html = getDocumentElement(element);
|
786 | var winScroll = getWindowScroll(element);
|
787 | var body = (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body;
|
788 | var width = max(html.scrollWidth, html.clientWidth, body ? body.scrollWidth : 0, body ? body.clientWidth : 0);
|
789 | var height = max(html.scrollHeight, html.clientHeight, body ? body.scrollHeight : 0, body ? body.clientHeight : 0);
|
790 | var x = -winScroll.scrollLeft + getWindowScrollBarX(element);
|
791 | var y = -winScroll.scrollTop;
|
792 |
|
793 | if (getComputedStyle(body || html).direction === 'rtl') {
|
794 | x += max(html.clientWidth, body ? body.clientWidth : 0) - width;
|
795 | }
|
796 |
|
797 | return {
|
798 | width: width,
|
799 | height: height,
|
800 | x: x,
|
801 | y: y
|
802 | };
|
803 | }
|
804 |
|
805 | function isScrollParent(element) {
|
806 |
|
807 | var _getComputedStyle = getComputedStyle(element),
|
808 | overflow = _getComputedStyle.overflow,
|
809 | overflowX = _getComputedStyle.overflowX,
|
810 | overflowY = _getComputedStyle.overflowY;
|
811 |
|
812 | return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
|
813 | }
|
814 |
|
815 | function getScrollParent(node) {
|
816 | if (['html', 'body', '#document'].indexOf(getNodeName(node)) >= 0) {
|
817 |
|
818 | return node.ownerDocument.body;
|
819 | }
|
820 |
|
821 | if (isHTMLElement(node) && isScrollParent(node)) {
|
822 | return node;
|
823 | }
|
824 |
|
825 | return getScrollParent(getParentNode(node));
|
826 | }
|
827 |
|
828 |
|
829 |
|
830 |
|
831 |
|
832 |
|
833 |
|
834 |
|
835 | function listScrollParents(element, list) {
|
836 | var _element$ownerDocumen;
|
837 |
|
838 | if (list === void 0) {
|
839 | list = [];
|
840 | }
|
841 |
|
842 | var scrollParent = getScrollParent(element);
|
843 | var isBody = scrollParent === ((_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body);
|
844 | var win = getWindow(scrollParent);
|
845 | var target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
846 | var updatedList = list.concat(target);
|
847 | return isBody ? updatedList :
|
848 | updatedList.concat(listScrollParents(getParentNode(target)));
|
849 | }
|
850 |
|
851 | function rectToClientRect(rect) {
|
852 | return Object.assign({}, rect, {
|
853 | left: rect.x,
|
854 | top: rect.y,
|
855 | right: rect.x + rect.width,
|
856 | bottom: rect.y + rect.height
|
857 | });
|
858 | }
|
859 |
|
860 | function getInnerBoundingClientRect(element) {
|
861 | var rect = getBoundingClientRect(element);
|
862 | rect.top = rect.top + element.clientTop;
|
863 | rect.left = rect.left + element.clientLeft;
|
864 | rect.bottom = rect.top + element.clientHeight;
|
865 | rect.right = rect.left + element.clientWidth;
|
866 | rect.width = element.clientWidth;
|
867 | rect.height = element.clientHeight;
|
868 | rect.x = rect.left;
|
869 | rect.y = rect.top;
|
870 | return rect;
|
871 | }
|
872 |
|
873 | function getClientRectFromMixedType(element, clippingParent) {
|
874 | return clippingParent === index.viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
|
875 | }
|
876 |
|
877 |
|
878 |
|
879 |
|
880 | function getClippingParents(element) {
|
881 | var clippingParents = listScrollParents(getParentNode(element));
|
882 | var canEscapeClipping = ['absolute', 'fixed'].indexOf(getComputedStyle(element).position) >= 0;
|
883 | var clipperElement = canEscapeClipping && isHTMLElement(element) ? getOffsetParent(element) : element;
|
884 |
|
885 | if (!isElement(clipperElement)) {
|
886 | return [];
|
887 | }
|
888 |
|
889 |
|
890 | return clippingParents.filter(function (clippingParent) {
|
891 | return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
|
892 | });
|
893 | }
|
894 |
|
895 |
|
896 |
|
897 | function getClippingRect(element, boundary, rootBoundary) {
|
898 | var mainClippingParents = boundary === 'clippingParents' ? getClippingParents(element) : [].concat(boundary);
|
899 | var clippingParents = [].concat(mainClippingParents, [rootBoundary]);
|
900 | var firstClippingParent = clippingParents[0];
|
901 | var clippingRect = clippingParents.reduce(function (accRect, clippingParent) {
|
902 | var rect = getClientRectFromMixedType(element, clippingParent);
|
903 | accRect.top = max(rect.top, accRect.top);
|
904 | accRect.right = min(rect.right, accRect.right);
|
905 | accRect.bottom = min(rect.bottom, accRect.bottom);
|
906 | accRect.left = max(rect.left, accRect.left);
|
907 | return accRect;
|
908 | }, getClientRectFromMixedType(element, firstClippingParent));
|
909 | clippingRect.width = clippingRect.right - clippingRect.left;
|
910 | clippingRect.height = clippingRect.bottom - clippingRect.top;
|
911 | clippingRect.x = clippingRect.left;
|
912 | clippingRect.y = clippingRect.top;
|
913 | return clippingRect;
|
914 | }
|
915 |
|
916 | function computeOffsets(_ref) {
|
917 | var reference = _ref.reference,
|
918 | element = _ref.element,
|
919 | placement = _ref.placement;
|
920 | var basePlacement = placement ? getBasePlacement(placement) : null;
|
921 | var variation = placement ? getVariation(placement) : null;
|
922 | var commonX = reference.x + reference.width / 2 - element.width / 2;
|
923 | var commonY = reference.y + reference.height / 2 - element.height / 2;
|
924 | var offsets;
|
925 |
|
926 | switch (basePlacement) {
|
927 | case index.top:
|
928 | offsets = {
|
929 | x: commonX,
|
930 | y: reference.y - element.height
|
931 | };
|
932 | break;
|
933 |
|
934 | case index.bottom:
|
935 | offsets = {
|
936 | x: commonX,
|
937 | y: reference.y + reference.height
|
938 | };
|
939 | break;
|
940 |
|
941 | case index.right:
|
942 | offsets = {
|
943 | x: reference.x + reference.width,
|
944 | y: commonY
|
945 | };
|
946 | break;
|
947 |
|
948 | case index.left:
|
949 | offsets = {
|
950 | x: reference.x - element.width,
|
951 | y: commonY
|
952 | };
|
953 | break;
|
954 |
|
955 | default:
|
956 | offsets = {
|
957 | x: reference.x,
|
958 | y: reference.y
|
959 | };
|
960 | }
|
961 |
|
962 | var mainAxis = basePlacement ? getMainAxisFromPlacement(basePlacement) : null;
|
963 |
|
964 | if (mainAxis != null) {
|
965 | var len = mainAxis === 'y' ? 'height' : 'width';
|
966 |
|
967 | switch (variation) {
|
968 | case index.start:
|
969 | offsets[mainAxis] = offsets[mainAxis] - (reference[len] / 2 - element[len] / 2);
|
970 | break;
|
971 |
|
972 | case index.end:
|
973 | offsets[mainAxis] = offsets[mainAxis] + (reference[len] / 2 - element[len] / 2);
|
974 | break;
|
975 | }
|
976 | }
|
977 |
|
978 | return offsets;
|
979 | }
|
980 |
|
981 | function detectOverflow(state, options) {
|
982 | if (options === void 0) {
|
983 | options = {};
|
984 | }
|
985 |
|
986 | var _options = options,
|
987 | _options$placement = _options.placement,
|
988 | placement = _options$placement === void 0 ? state.placement : _options$placement,
|
989 | _options$boundary = _options.boundary,
|
990 | boundary = _options$boundary === void 0 ? index.clippingParents : _options$boundary,
|
991 | _options$rootBoundary = _options.rootBoundary,
|
992 | rootBoundary = _options$rootBoundary === void 0 ? index.viewport : _options$rootBoundary,
|
993 | _options$elementConte = _options.elementContext,
|
994 | elementContext = _options$elementConte === void 0 ? index.popper : _options$elementConte,
|
995 | _options$altBoundary = _options.altBoundary,
|
996 | altBoundary = _options$altBoundary === void 0 ? false : _options$altBoundary,
|
997 | _options$padding = _options.padding,
|
998 | padding = _options$padding === void 0 ? 0 : _options$padding;
|
999 | var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, index.basePlacements));
|
1000 | var altContext = elementContext === index.popper ? index.reference : index.popper;
|
1001 | var popperRect = state.rects.popper;
|
1002 | var element = state.elements[altBoundary ? altContext : elementContext];
|
1003 | var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
|
1004 | var referenceClientRect = getBoundingClientRect(state.elements.reference);
|
1005 | var popperOffsets = computeOffsets({
|
1006 | reference: referenceClientRect,
|
1007 | element: popperRect,
|
1008 | strategy: 'absolute',
|
1009 | placement: placement
|
1010 | });
|
1011 | var popperClientRect = rectToClientRect(Object.assign({}, popperRect, popperOffsets));
|
1012 | var elementClientRect = elementContext === index.popper ? popperClientRect : referenceClientRect;
|
1013 |
|
1014 |
|
1015 | var overflowOffsets = {
|
1016 | top: clippingClientRect.top - elementClientRect.top + paddingObject.top,
|
1017 | bottom: elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom,
|
1018 | left: clippingClientRect.left - elementClientRect.left + paddingObject.left,
|
1019 | right: elementClientRect.right - clippingClientRect.right + paddingObject.right
|
1020 | };
|
1021 | var offsetData = state.modifiersData.offset;
|
1022 |
|
1023 | if (elementContext === index.popper && offsetData) {
|
1024 | var offset = offsetData[placement];
|
1025 | Object.keys(overflowOffsets).forEach(function (key) {
|
1026 | var multiply = [index.right, index.bottom].indexOf(key) >= 0 ? 1 : -1;
|
1027 | var axis = [index.top, index.bottom].indexOf(key) >= 0 ? 'y' : 'x';
|
1028 | overflowOffsets[key] += offset[axis] * multiply;
|
1029 | });
|
1030 | }
|
1031 |
|
1032 | return overflowOffsets;
|
1033 | }
|
1034 |
|
1035 | function computeAutoPlacement(state, options) {
|
1036 | if (options === void 0) {
|
1037 | options = {};
|
1038 | }
|
1039 |
|
1040 | var _options = options,
|
1041 | placement = _options.placement,
|
1042 | boundary = _options.boundary,
|
1043 | rootBoundary = _options.rootBoundary,
|
1044 | padding = _options.padding,
|
1045 | flipVariations = _options.flipVariations,
|
1046 | _options$allowedAutoP = _options.allowedAutoPlacements,
|
1047 | allowedAutoPlacements = _options$allowedAutoP === void 0 ? index.placements : _options$allowedAutoP;
|
1048 | var variation = getVariation(placement);
|
1049 | var placements = variation ? flipVariations ? index.variationPlacements : index.variationPlacements.filter(function (placement) {
|
1050 | return getVariation(placement) === variation;
|
1051 | }) : index.basePlacements;
|
1052 | var allowedPlacements = placements.filter(function (placement) {
|
1053 | return allowedAutoPlacements.indexOf(placement) >= 0;
|
1054 | });
|
1055 |
|
1056 | if (allowedPlacements.length === 0) {
|
1057 | allowedPlacements = placements;
|
1058 |
|
1059 | if (process.env.NODE_ENV !== "production") {
|
1060 | console.error(['Popper: The `allowedAutoPlacements` option did not allow any', 'placements. Ensure the `placement` option matches the variation', 'of the allowed placements.', 'For example, "auto" cannot be used to allow "bottom-start".', 'Use "auto-start" instead.'].join(' '));
|
1061 | }
|
1062 | }
|
1063 |
|
1064 |
|
1065 | var overflows = allowedPlacements.reduce(function (acc, placement) {
|
1066 | acc[placement] = detectOverflow(state, {
|
1067 | placement: placement,
|
1068 | boundary: boundary,
|
1069 | rootBoundary: rootBoundary,
|
1070 | padding: padding
|
1071 | })[getBasePlacement(placement)];
|
1072 | return acc;
|
1073 | }, {});
|
1074 | return Object.keys(overflows).sort(function (a, b) {
|
1075 | return overflows[a] - overflows[b];
|
1076 | });
|
1077 | }
|
1078 |
|
1079 | function getExpandedFallbackPlacements(placement) {
|
1080 | if (getBasePlacement(placement) === index.auto) {
|
1081 | return [];
|
1082 | }
|
1083 |
|
1084 | var oppositePlacement = getOppositePlacement(placement);
|
1085 | return [getOppositeVariationPlacement(placement), oppositePlacement, getOppositeVariationPlacement(oppositePlacement)];
|
1086 | }
|
1087 |
|
1088 | function flip(_ref) {
|
1089 | var state = _ref.state,
|
1090 | options = _ref.options,
|
1091 | name = _ref.name;
|
1092 |
|
1093 | if (state.modifiersData[name]._skip) {
|
1094 | return;
|
1095 | }
|
1096 |
|
1097 | var _options$mainAxis = options.mainAxis,
|
1098 | checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
|
1099 | _options$altAxis = options.altAxis,
|
1100 | checkAltAxis = _options$altAxis === void 0 ? true : _options$altAxis,
|
1101 | specifiedFallbackPlacements = options.fallbackPlacements,
|
1102 | padding = options.padding,
|
1103 | boundary = options.boundary,
|
1104 | rootBoundary = options.rootBoundary,
|
1105 | altBoundary = options.altBoundary,
|
1106 | _options$flipVariatio = options.flipVariations,
|
1107 | flipVariations = _options$flipVariatio === void 0 ? true : _options$flipVariatio,
|
1108 | allowedAutoPlacements = options.allowedAutoPlacements;
|
1109 | var preferredPlacement = state.options.placement;
|
1110 | var basePlacement = getBasePlacement(preferredPlacement);
|
1111 | var isBasePlacement = basePlacement === preferredPlacement;
|
1112 | var fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipVariations ? [getOppositePlacement(preferredPlacement)] : getExpandedFallbackPlacements(preferredPlacement));
|
1113 | var placements = [preferredPlacement].concat(fallbackPlacements).reduce(function (acc, placement) {
|
1114 | return acc.concat(getBasePlacement(placement) === index.auto ? computeAutoPlacement(state, {
|
1115 | placement: placement,
|
1116 | boundary: boundary,
|
1117 | rootBoundary: rootBoundary,
|
1118 | padding: padding,
|
1119 | flipVariations: flipVariations,
|
1120 | allowedAutoPlacements: allowedAutoPlacements
|
1121 | }) : placement);
|
1122 | }, []);
|
1123 | var referenceRect = state.rects.reference;
|
1124 | var popperRect = state.rects.popper;
|
1125 | var checksMap = new Map();
|
1126 | var makeFallbackChecks = true;
|
1127 | var firstFittingPlacement = placements[0];
|
1128 |
|
1129 | for (var i = 0; i < placements.length; i++) {
|
1130 | var placement = placements[i];
|
1131 |
|
1132 | var _basePlacement = getBasePlacement(placement);
|
1133 |
|
1134 | var isStartVariation = getVariation(placement) === index.start;
|
1135 | var isVertical = [index.top, index.bottom].indexOf(_basePlacement) >= 0;
|
1136 | var len = isVertical ? 'width' : 'height';
|
1137 | var overflow = detectOverflow(state, {
|
1138 | placement: placement,
|
1139 | boundary: boundary,
|
1140 | rootBoundary: rootBoundary,
|
1141 | altBoundary: altBoundary,
|
1142 | padding: padding
|
1143 | });
|
1144 | var mainVariationSide = isVertical ? isStartVariation ? index.right : index.left : isStartVariation ? index.bottom : index.top;
|
1145 |
|
1146 | if (referenceRect[len] > popperRect[len]) {
|
1147 | mainVariationSide = getOppositePlacement(mainVariationSide);
|
1148 | }
|
1149 |
|
1150 | var altVariationSide = getOppositePlacement(mainVariationSide);
|
1151 | var checks = [];
|
1152 |
|
1153 | if (checkMainAxis) {
|
1154 | checks.push(overflow[_basePlacement] <= 0);
|
1155 | }
|
1156 |
|
1157 | if (checkAltAxis) {
|
1158 | checks.push(overflow[mainVariationSide] <= 0, overflow[altVariationSide] <= 0);
|
1159 | }
|
1160 |
|
1161 | if (checks.every(function (check) {
|
1162 | return check;
|
1163 | })) {
|
1164 | firstFittingPlacement = placement;
|
1165 | makeFallbackChecks = false;
|
1166 | break;
|
1167 | }
|
1168 |
|
1169 | checksMap.set(placement, checks);
|
1170 | }
|
1171 |
|
1172 | if (makeFallbackChecks) {
|
1173 |
|
1174 | var numberOfChecks = flipVariations ? 3 : 1;
|
1175 |
|
1176 | var _loop = function _loop(_i) {
|
1177 | var fittingPlacement = placements.find(function (placement) {
|
1178 | var checks = checksMap.get(placement);
|
1179 |
|
1180 | if (checks) {
|
1181 | return checks.slice(0, _i).every(function (check) {
|
1182 | return check;
|
1183 | });
|
1184 | }
|
1185 | });
|
1186 |
|
1187 | if (fittingPlacement) {
|
1188 | firstFittingPlacement = fittingPlacement;
|
1189 | return "break";
|
1190 | }
|
1191 | };
|
1192 |
|
1193 | for (var _i = numberOfChecks; _i > 0; _i--) {
|
1194 | var _ret = _loop(_i);
|
1195 |
|
1196 | if (_ret === "break") break;
|
1197 | }
|
1198 | }
|
1199 |
|
1200 | if (state.placement !== firstFittingPlacement) {
|
1201 | state.modifiersData[name]._skip = true;
|
1202 | state.placement = firstFittingPlacement;
|
1203 | state.reset = true;
|
1204 | }
|
1205 | }
|
1206 |
|
1207 |
|
1208 | var flip$1 = {
|
1209 | name: 'flip',
|
1210 | enabled: true,
|
1211 | phase: 'main',
|
1212 | fn: flip,
|
1213 | requiresIfExists: ['offset'],
|
1214 | data: {
|
1215 | _skip: false
|
1216 | }
|
1217 | };
|
1218 |
|
1219 | function getSideOffsets(overflow, rect, preventedOffsets) {
|
1220 | if (preventedOffsets === void 0) {
|
1221 | preventedOffsets = {
|
1222 | x: 0,
|
1223 | y: 0
|
1224 | };
|
1225 | }
|
1226 |
|
1227 | return {
|
1228 | top: overflow.top - rect.height - preventedOffsets.y,
|
1229 | right: overflow.right - rect.width + preventedOffsets.x,
|
1230 | bottom: overflow.bottom - rect.height + preventedOffsets.y,
|
1231 | left: overflow.left - rect.width - preventedOffsets.x
|
1232 | };
|
1233 | }
|
1234 |
|
1235 | function isAnySideFullyClipped(overflow) {
|
1236 | return [index.top, index.right, index.bottom, index.left].some(function (side) {
|
1237 | return overflow[side] >= 0;
|
1238 | });
|
1239 | }
|
1240 |
|
1241 | function hide(_ref) {
|
1242 | var state = _ref.state,
|
1243 | name = _ref.name;
|
1244 | var referenceRect = state.rects.reference;
|
1245 | var popperRect = state.rects.popper;
|
1246 | var preventedOffsets = state.modifiersData.preventOverflow;
|
1247 | var referenceOverflow = detectOverflow(state, {
|
1248 | elementContext: 'reference'
|
1249 | });
|
1250 | var popperAltOverflow = detectOverflow(state, {
|
1251 | altBoundary: true
|
1252 | });
|
1253 | var referenceClippingOffsets = getSideOffsets(referenceOverflow, referenceRect);
|
1254 | var popperEscapeOffsets = getSideOffsets(popperAltOverflow, popperRect, preventedOffsets);
|
1255 | var isReferenceHidden = isAnySideFullyClipped(referenceClippingOffsets);
|
1256 | var hasPopperEscaped = isAnySideFullyClipped(popperEscapeOffsets);
|
1257 | state.modifiersData[name] = {
|
1258 | referenceClippingOffsets: referenceClippingOffsets,
|
1259 | popperEscapeOffsets: popperEscapeOffsets,
|
1260 | isReferenceHidden: isReferenceHidden,
|
1261 | hasPopperEscaped: hasPopperEscaped
|
1262 | };
|
1263 | state.attributes.popper = Object.assign({}, state.attributes.popper, {
|
1264 | 'data-popper-reference-hidden': isReferenceHidden,
|
1265 | 'data-popper-escaped': hasPopperEscaped
|
1266 | });
|
1267 | }
|
1268 |
|
1269 |
|
1270 | var hide$1 = {
|
1271 | name: 'hide',
|
1272 | enabled: true,
|
1273 | phase: 'main',
|
1274 | requiresIfExists: ['preventOverflow'],
|
1275 | fn: hide
|
1276 | };
|
1277 |
|
1278 | function distanceAndSkiddingToXY(placement, rects, offset) {
|
1279 | var basePlacement = getBasePlacement(placement);
|
1280 | var invertDistance = [index.left, index.top].indexOf(basePlacement) >= 0 ? -1 : 1;
|
1281 |
|
1282 | var _ref = typeof offset === 'function' ? offset(Object.assign({}, rects, {
|
1283 | placement: placement
|
1284 | })) : offset,
|
1285 | skidding = _ref[0],
|
1286 | distance = _ref[1];
|
1287 |
|
1288 | skidding = skidding || 0;
|
1289 | distance = (distance || 0) * invertDistance;
|
1290 | return [index.left, index.right].indexOf(basePlacement) >= 0 ? {
|
1291 | x: distance,
|
1292 | y: skidding
|
1293 | } : {
|
1294 | x: skidding,
|
1295 | y: distance
|
1296 | };
|
1297 | }
|
1298 |
|
1299 | function offset(_ref2) {
|
1300 | var state = _ref2.state,
|
1301 | options = _ref2.options,
|
1302 | name = _ref2.name;
|
1303 | var _options$offset = options.offset,
|
1304 | offset = _options$offset === void 0 ? [0, 0] : _options$offset;
|
1305 | var data = index.placements.reduce(function (acc, placement) {
|
1306 | acc[placement] = distanceAndSkiddingToXY(placement, state.rects, offset);
|
1307 | return acc;
|
1308 | }, {});
|
1309 | var _data$state$placement = data[state.placement],
|
1310 | x = _data$state$placement.x,
|
1311 | y = _data$state$placement.y;
|
1312 |
|
1313 | if (state.modifiersData.popperOffsets != null) {
|
1314 | state.modifiersData.popperOffsets.x += x;
|
1315 | state.modifiersData.popperOffsets.y += y;
|
1316 | }
|
1317 |
|
1318 | state.modifiersData[name] = data;
|
1319 | }
|
1320 |
|
1321 |
|
1322 | var offset$1 = {
|
1323 | name: 'offset',
|
1324 | enabled: true,
|
1325 | phase: 'main',
|
1326 | requires: ['popperOffsets'],
|
1327 | fn: offset
|
1328 | };
|
1329 |
|
1330 | function popperOffsets(_ref) {
|
1331 | var state = _ref.state,
|
1332 | name = _ref.name;
|
1333 |
|
1334 |
|
1335 |
|
1336 |
|
1337 | state.modifiersData[name] = computeOffsets({
|
1338 | reference: state.rects.reference,
|
1339 | element: state.rects.popper,
|
1340 | strategy: 'absolute',
|
1341 | placement: state.placement
|
1342 | });
|
1343 | }
|
1344 |
|
1345 |
|
1346 | var popperOffsets$1 = {
|
1347 | name: 'popperOffsets',
|
1348 | enabled: true,
|
1349 | phase: 'read',
|
1350 | fn: popperOffsets,
|
1351 | data: {}
|
1352 | };
|
1353 |
|
1354 | function getAltAxis(axis) {
|
1355 | return axis === 'x' ? 'y' : 'x';
|
1356 | }
|
1357 |
|
1358 | function preventOverflow(_ref) {
|
1359 | var state = _ref.state,
|
1360 | options = _ref.options,
|
1361 | name = _ref.name;
|
1362 | var _options$mainAxis = options.mainAxis,
|
1363 | checkMainAxis = _options$mainAxis === void 0 ? true : _options$mainAxis,
|
1364 | _options$altAxis = options.altAxis,
|
1365 | checkAltAxis = _options$altAxis === void 0 ? false : _options$altAxis,
|
1366 | boundary = options.boundary,
|
1367 | rootBoundary = options.rootBoundary,
|
1368 | altBoundary = options.altBoundary,
|
1369 | padding = options.padding,
|
1370 | _options$tether = options.tether,
|
1371 | tether = _options$tether === void 0 ? true : _options$tether,
|
1372 | _options$tetherOffset = options.tetherOffset,
|
1373 | tetherOffset = _options$tetherOffset === void 0 ? 0 : _options$tetherOffset;
|
1374 | var overflow = detectOverflow(state, {
|
1375 | boundary: boundary,
|
1376 | rootBoundary: rootBoundary,
|
1377 | padding: padding,
|
1378 | altBoundary: altBoundary
|
1379 | });
|
1380 | var basePlacement = getBasePlacement(state.placement);
|
1381 | var variation = getVariation(state.placement);
|
1382 | var isBasePlacement = !variation;
|
1383 | var mainAxis = getMainAxisFromPlacement(basePlacement);
|
1384 | var altAxis = getAltAxis(mainAxis);
|
1385 | var popperOffsets = state.modifiersData.popperOffsets;
|
1386 | var referenceRect = state.rects.reference;
|
1387 | var popperRect = state.rects.popper;
|
1388 | var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
|
1389 | placement: state.placement
|
1390 | })) : tetherOffset;
|
1391 | var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
|
1392 | mainAxis: tetherOffsetValue,
|
1393 | altAxis: tetherOffsetValue
|
1394 | } : Object.assign({
|
1395 | mainAxis: 0,
|
1396 | altAxis: 0
|
1397 | }, tetherOffsetValue);
|
1398 | var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
|
1399 | var data = {
|
1400 | x: 0,
|
1401 | y: 0
|
1402 | };
|
1403 |
|
1404 | if (!popperOffsets) {
|
1405 | return;
|
1406 | }
|
1407 |
|
1408 | if (checkMainAxis) {
|
1409 | var _offsetModifierState$;
|
1410 |
|
1411 | var mainSide = mainAxis === 'y' ? index.top : index.left;
|
1412 | var altSide = mainAxis === 'y' ? index.bottom : index.right;
|
1413 | var len = mainAxis === 'y' ? 'height' : 'width';
|
1414 | var offset = popperOffsets[mainAxis];
|
1415 | var min$1 = offset + overflow[mainSide];
|
1416 | var max$1 = offset - overflow[altSide];
|
1417 | var additive = tether ? -popperRect[len] / 2 : 0;
|
1418 | var minLen = variation === index.start ? referenceRect[len] : popperRect[len];
|
1419 | var maxLen = variation === index.start ? -popperRect[len] : -referenceRect[len];
|
1420 |
|
1421 |
|
1422 | var arrowElement = state.elements.arrow;
|
1423 | var arrowRect = tether && arrowElement ? getLayoutRect(arrowElement) : {
|
1424 | width: 0,
|
1425 | height: 0
|
1426 | };
|
1427 | var arrowPaddingObject = state.modifiersData['arrow#persistent'] ? state.modifiersData['arrow#persistent'].padding : getFreshSideObject();
|
1428 | var arrowPaddingMin = arrowPaddingObject[mainSide];
|
1429 | var arrowPaddingMax = arrowPaddingObject[altSide];
|
1430 |
|
1431 |
|
1432 |
|
1433 |
|
1434 |
|
1435 | var arrowLen = within(0, referenceRect[len], arrowRect[len]);
|
1436 | var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
|
1437 | var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
|
1438 | var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
|
1439 | var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
|
1440 | var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
|
1441 | var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
|
1442 | var tetherMax = offset + maxOffset - offsetModifierValue;
|
1443 | var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
|
1444 | popperOffsets[mainAxis] = preventedOffset;
|
1445 | data[mainAxis] = preventedOffset - offset;
|
1446 | }
|
1447 |
|
1448 | if (checkAltAxis) {
|
1449 | var _offsetModifierState$2;
|
1450 |
|
1451 | var _mainSide = mainAxis === 'x' ? index.top : index.left;
|
1452 |
|
1453 | var _altSide = mainAxis === 'x' ? index.bottom : index.right;
|
1454 |
|
1455 | var _offset = popperOffsets[altAxis];
|
1456 |
|
1457 | var _len = altAxis === 'y' ? 'height' : 'width';
|
1458 |
|
1459 | var _min = _offset + overflow[_mainSide];
|
1460 |
|
1461 | var _max = _offset - overflow[_altSide];
|
1462 |
|
1463 | var isOriginSide = [index.top, index.left].indexOf(basePlacement) !== -1;
|
1464 |
|
1465 | var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
|
1466 |
|
1467 | var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
|
1468 |
|
1469 | var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
|
1470 |
|
1471 | var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
|
1472 |
|
1473 | popperOffsets[altAxis] = _preventedOffset;
|
1474 | data[altAxis] = _preventedOffset - _offset;
|
1475 | }
|
1476 |
|
1477 | state.modifiersData[name] = data;
|
1478 | }
|
1479 |
|
1480 |
|
1481 | var preventOverflow$1 = {
|
1482 | name: 'preventOverflow',
|
1483 | enabled: true,
|
1484 | phase: 'main',
|
1485 | fn: preventOverflow,
|
1486 | requiresIfExists: ['offset']
|
1487 | };
|
1488 |
|
1489 | function getHTMLElementScroll(element) {
|
1490 | return {
|
1491 | scrollLeft: element.scrollLeft,
|
1492 | scrollTop: element.scrollTop
|
1493 | };
|
1494 | }
|
1495 |
|
1496 | function getNodeScroll(node) {
|
1497 | if (node === getWindow(node) || !isHTMLElement(node)) {
|
1498 | return getWindowScroll(node);
|
1499 | } else {
|
1500 | return getHTMLElementScroll(node);
|
1501 | }
|
1502 | }
|
1503 |
|
1504 | function isElementScaled(element) {
|
1505 | var rect = element.getBoundingClientRect();
|
1506 | var scaleX = round(rect.width) / element.offsetWidth || 1;
|
1507 | var scaleY = round(rect.height) / element.offsetHeight || 1;
|
1508 | return scaleX !== 1 || scaleY !== 1;
|
1509 | }
|
1510 |
|
1511 |
|
1512 |
|
1513 | function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
|
1514 | if (isFixed === void 0) {
|
1515 | isFixed = false;
|
1516 | }
|
1517 |
|
1518 | var isOffsetParentAnElement = isHTMLElement(offsetParent);
|
1519 | var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
|
1520 | var documentElement = getDocumentElement(offsetParent);
|
1521 | var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
|
1522 | var scroll = {
|
1523 | scrollLeft: 0,
|
1524 | scrollTop: 0
|
1525 | };
|
1526 | var offsets = {
|
1527 | x: 0,
|
1528 | y: 0
|
1529 | };
|
1530 |
|
1531 | if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
1532 | if (getNodeName(offsetParent) !== 'body' ||
|
1533 | isScrollParent(documentElement)) {
|
1534 | scroll = getNodeScroll(offsetParent);
|
1535 | }
|
1536 |
|
1537 | if (isHTMLElement(offsetParent)) {
|
1538 | offsets = getBoundingClientRect(offsetParent, true);
|
1539 | offsets.x += offsetParent.clientLeft;
|
1540 | offsets.y += offsetParent.clientTop;
|
1541 | } else if (documentElement) {
|
1542 | offsets.x = getWindowScrollBarX(documentElement);
|
1543 | }
|
1544 | }
|
1545 |
|
1546 | return {
|
1547 | x: rect.left + scroll.scrollLeft - offsets.x,
|
1548 | y: rect.top + scroll.scrollTop - offsets.y,
|
1549 | width: rect.width,
|
1550 | height: rect.height
|
1551 | };
|
1552 | }
|
1553 |
|
1554 | function order(modifiers) {
|
1555 | var map = new Map();
|
1556 | var visited = new Set();
|
1557 | var result = [];
|
1558 | modifiers.forEach(function (modifier) {
|
1559 | map.set(modifier.name, modifier);
|
1560 | });
|
1561 |
|
1562 | function sort(modifier) {
|
1563 | visited.add(modifier.name);
|
1564 | var requires = [].concat(modifier.requires || [], modifier.requiresIfExists || []);
|
1565 | requires.forEach(function (dep) {
|
1566 | if (!visited.has(dep)) {
|
1567 | var depModifier = map.get(dep);
|
1568 |
|
1569 | if (depModifier) {
|
1570 | sort(depModifier);
|
1571 | }
|
1572 | }
|
1573 | });
|
1574 | result.push(modifier);
|
1575 | }
|
1576 |
|
1577 | modifiers.forEach(function (modifier) {
|
1578 | if (!visited.has(modifier.name)) {
|
1579 |
|
1580 | sort(modifier);
|
1581 | }
|
1582 | });
|
1583 | return result;
|
1584 | }
|
1585 |
|
1586 | function orderModifiers(modifiers) {
|
1587 |
|
1588 | var orderedModifiers = order(modifiers);
|
1589 |
|
1590 | return index.modifierPhases.reduce(function (acc, phase) {
|
1591 | return acc.concat(orderedModifiers.filter(function (modifier) {
|
1592 | return modifier.phase === phase;
|
1593 | }));
|
1594 | }, []);
|
1595 | }
|
1596 |
|
1597 | function debounce(fn) {
|
1598 | var pending;
|
1599 | return function () {
|
1600 | if (!pending) {
|
1601 | pending = new Promise(function (resolve) {
|
1602 | Promise.resolve().then(function () {
|
1603 | pending = undefined;
|
1604 | resolve(fn());
|
1605 | });
|
1606 | });
|
1607 | }
|
1608 |
|
1609 | return pending;
|
1610 | };
|
1611 | }
|
1612 |
|
1613 | function format(str) {
|
1614 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
1615 | args[_key - 1] = arguments[_key];
|
1616 | }
|
1617 |
|
1618 | return [].concat(args).reduce(function (p, c) {
|
1619 | return p.replace(/%s/, c);
|
1620 | }, str);
|
1621 | }
|
1622 |
|
1623 | var INVALID_MODIFIER_ERROR = 'Popper: modifier "%s" provided an invalid %s property, expected %s but got %s';
|
1624 | var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" modifier is not available';
|
1625 | var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
|
1626 |
|
1627 | function validateModifiers(modifiers) {
|
1628 | modifiers.forEach(function (modifier) {
|
1629 | [].concat(Object.keys(modifier), VALID_PROPERTIES)
|
1630 | .filter(function (value, index, self) {
|
1631 | return self.indexOf(value) === index;
|
1632 | }).forEach(function (key) {
|
1633 | switch (key) {
|
1634 | case 'name':
|
1635 | if (typeof modifier.name !== 'string') {
|
1636 | console.error(format(INVALID_MODIFIER_ERROR, String(modifier.name), '"name"', '"string"', "\"" + String(modifier.name) + "\""));
|
1637 | }
|
1638 |
|
1639 | break;
|
1640 |
|
1641 | case 'enabled':
|
1642 | if (typeof modifier.enabled !== 'boolean') {
|
1643 | console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
|
1644 | }
|
1645 |
|
1646 | break;
|
1647 |
|
1648 | case 'phase':
|
1649 | if (index.modifierPhases.indexOf(modifier.phase) < 0) {
|
1650 | console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + index.modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
|
1651 | }
|
1652 |
|
1653 | break;
|
1654 |
|
1655 | case 'fn':
|
1656 | if (typeof modifier.fn !== 'function') {
|
1657 | console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"fn"', '"function"', "\"" + String(modifier.fn) + "\""));
|
1658 | }
|
1659 |
|
1660 | break;
|
1661 |
|
1662 | case 'effect':
|
1663 | if (modifier.effect != null && typeof modifier.effect !== 'function') {
|
1664 | console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
|
1665 | }
|
1666 |
|
1667 | break;
|
1668 |
|
1669 | case 'requires':
|
1670 | if (modifier.requires != null && !Array.isArray(modifier.requires)) {
|
1671 | console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
|
1672 | }
|
1673 |
|
1674 | break;
|
1675 |
|
1676 | case 'requiresIfExists':
|
1677 | if (!Array.isArray(modifier.requiresIfExists)) {
|
1678 | console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requiresIfExists"', '"array"', "\"" + String(modifier.requiresIfExists) + "\""));
|
1679 | }
|
1680 |
|
1681 | break;
|
1682 |
|
1683 | case 'options':
|
1684 | case 'data':
|
1685 | break;
|
1686 |
|
1687 | default:
|
1688 | console.error("PopperJS: an invalid property has been provided to the \"" + modifier.name + "\" modifier, valid properties are " + VALID_PROPERTIES.map(function (s) {
|
1689 | return "\"" + s + "\"";
|
1690 | }).join(', ') + "; but \"" + key + "\" was provided.");
|
1691 | }
|
1692 |
|
1693 | modifier.requires && modifier.requires.forEach(function (requirement) {
|
1694 | if (modifiers.find(function (mod) {
|
1695 | return mod.name === requirement;
|
1696 | }) == null) {
|
1697 | console.error(format(MISSING_DEPENDENCY_ERROR, String(modifier.name), requirement, requirement));
|
1698 | }
|
1699 | });
|
1700 | });
|
1701 | });
|
1702 | }
|
1703 |
|
1704 | function uniqueBy(arr, fn) {
|
1705 | var identifiers = new Set();
|
1706 | return arr.filter(function (item) {
|
1707 | var identifier = fn(item);
|
1708 |
|
1709 | if (!identifiers.has(identifier)) {
|
1710 | identifiers.add(identifier);
|
1711 | return true;
|
1712 | }
|
1713 | });
|
1714 | }
|
1715 |
|
1716 | function mergeByName(modifiers) {
|
1717 | var merged = modifiers.reduce(function (merged, current) {
|
1718 | var existing = merged[current.name];
|
1719 | merged[current.name] = existing ? Object.assign({}, existing, current, {
|
1720 | options: Object.assign({}, existing.options, current.options),
|
1721 | data: Object.assign({}, existing.data, current.data)
|
1722 | }) : current;
|
1723 | return merged;
|
1724 | }, {});
|
1725 |
|
1726 | return Object.keys(merged).map(function (key) {
|
1727 | return merged[key];
|
1728 | });
|
1729 | }
|
1730 |
|
1731 | var INVALID_ELEMENT_ERROR = 'Popper: Invalid reference or popper argument provided. They must be either a DOM element or virtual element.';
|
1732 | var INFINITE_LOOP_ERROR = 'Popper: An infinite loop in the modifiers cycle has been detected! The cycle has been interrupted to prevent a browser crash.';
|
1733 | var DEFAULT_OPTIONS = {
|
1734 | placement: 'bottom',
|
1735 | modifiers: [],
|
1736 | strategy: 'absolute'
|
1737 | };
|
1738 |
|
1739 | function areValidElements() {
|
1740 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
1741 | args[_key] = arguments[_key];
|
1742 | }
|
1743 |
|
1744 | return !args.some(function (element) {
|
1745 | return !(element && typeof element.getBoundingClientRect === 'function');
|
1746 | });
|
1747 | }
|
1748 |
|
1749 | function popperGenerator(generatorOptions) {
|
1750 | if (generatorOptions === void 0) {
|
1751 | generatorOptions = {};
|
1752 | }
|
1753 |
|
1754 | var _generatorOptions = generatorOptions,
|
1755 | _generatorOptions$def = _generatorOptions.defaultModifiers,
|
1756 | defaultModifiers = _generatorOptions$def === void 0 ? [] : _generatorOptions$def,
|
1757 | _generatorOptions$def2 = _generatorOptions.defaultOptions,
|
1758 | defaultOptions = _generatorOptions$def2 === void 0 ? DEFAULT_OPTIONS : _generatorOptions$def2;
|
1759 | return function createPopper(reference, popper, options) {
|
1760 | if (options === void 0) {
|
1761 | options = defaultOptions;
|
1762 | }
|
1763 |
|
1764 | var state = {
|
1765 | placement: 'bottom',
|
1766 | orderedModifiers: [],
|
1767 | options: Object.assign({}, DEFAULT_OPTIONS, defaultOptions),
|
1768 | modifiersData: {},
|
1769 | elements: {
|
1770 | reference: reference,
|
1771 | popper: popper
|
1772 | },
|
1773 | attributes: {},
|
1774 | styles: {}
|
1775 | };
|
1776 | var effectCleanupFns = [];
|
1777 | var isDestroyed = false;
|
1778 | var instance = {
|
1779 | state: state,
|
1780 | setOptions: function setOptions(setOptionsAction) {
|
1781 | var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
|
1782 | cleanupModifierEffects();
|
1783 | state.options = Object.assign({}, defaultOptions, state.options, options);
|
1784 | state.scrollParents = {
|
1785 | reference: isElement(reference) ? listScrollParents(reference) : reference.contextElement ? listScrollParents(reference.contextElement) : [],
|
1786 | popper: listScrollParents(popper)
|
1787 | };
|
1788 |
|
1789 |
|
1790 | var orderedModifiers = orderModifiers(mergeByName([].concat(defaultModifiers, state.options.modifiers)));
|
1791 |
|
1792 | state.orderedModifiers = orderedModifiers.filter(function (m) {
|
1793 | return m.enabled;
|
1794 | });
|
1795 |
|
1796 |
|
1797 | if (process.env.NODE_ENV !== "production") {
|
1798 | var modifiers = uniqueBy([].concat(orderedModifiers, state.options.modifiers), function (_ref) {
|
1799 | var name = _ref.name;
|
1800 | return name;
|
1801 | });
|
1802 | validateModifiers(modifiers);
|
1803 |
|
1804 | if (getBasePlacement(state.options.placement) === index.auto) {
|
1805 | var flipModifier = state.orderedModifiers.find(function (_ref2) {
|
1806 | var name = _ref2.name;
|
1807 | return name === 'flip';
|
1808 | });
|
1809 |
|
1810 | if (!flipModifier) {
|
1811 | console.error(['Popper: "auto" placements require the "flip" modifier be', 'present and enabled to work.'].join(' '));
|
1812 | }
|
1813 | }
|
1814 |
|
1815 | var _getComputedStyle = getComputedStyle(popper),
|
1816 | marginTop = _getComputedStyle.marginTop,
|
1817 | marginRight = _getComputedStyle.marginRight,
|
1818 | marginBottom = _getComputedStyle.marginBottom,
|
1819 | marginLeft = _getComputedStyle.marginLeft;
|
1820 |
|
1821 |
|
1822 |
|
1823 | if ([marginTop, marginRight, marginBottom, marginLeft].some(function (margin) {
|
1824 | return parseFloat(margin);
|
1825 | })) {
|
1826 | console.warn(['Popper: CSS "margin" styles cannot be used to apply padding', 'between the popper and its reference element or boundary.', 'To replicate margin, use the `offset` modifier, as well as', 'the `padding` option in the `preventOverflow` and `flip`', 'modifiers.'].join(' '));
|
1827 | }
|
1828 | }
|
1829 |
|
1830 | runModifierEffects();
|
1831 | return instance.update();
|
1832 | },
|
1833 |
|
1834 |
|
1835 |
|
1836 |
|
1837 |
|
1838 | forceUpdate: function forceUpdate() {
|
1839 | if (isDestroyed) {
|
1840 | return;
|
1841 | }
|
1842 |
|
1843 | var _state$elements = state.elements,
|
1844 | reference = _state$elements.reference,
|
1845 | popper = _state$elements.popper;
|
1846 |
|
1847 |
|
1848 | if (!areValidElements(reference, popper)) {
|
1849 | if (process.env.NODE_ENV !== "production") {
|
1850 | console.error(INVALID_ELEMENT_ERROR);
|
1851 | }
|
1852 |
|
1853 | return;
|
1854 | }
|
1855 |
|
1856 |
|
1857 | state.rects = {
|
1858 | reference: getCompositeRect(reference, getOffsetParent(popper), state.options.strategy === 'fixed'),
|
1859 | popper: getLayoutRect(popper)
|
1860 | };
|
1861 |
|
1862 |
|
1863 |
|
1864 |
|
1865 |
|
1866 | state.reset = false;
|
1867 | state.placement = state.options.placement;
|
1868 |
|
1869 |
|
1870 |
|
1871 |
|
1872 | state.orderedModifiers.forEach(function (modifier) {
|
1873 | return state.modifiersData[modifier.name] = Object.assign({}, modifier.data);
|
1874 | });
|
1875 | var __debug_loops__ = 0;
|
1876 |
|
1877 | for (var index = 0; index < state.orderedModifiers.length; index++) {
|
1878 | if (process.env.NODE_ENV !== "production") {
|
1879 | __debug_loops__ += 1;
|
1880 |
|
1881 | if (__debug_loops__ > 100) {
|
1882 | console.error(INFINITE_LOOP_ERROR);
|
1883 | break;
|
1884 | }
|
1885 | }
|
1886 |
|
1887 | if (state.reset === true) {
|
1888 | state.reset = false;
|
1889 | index = -1;
|
1890 | continue;
|
1891 | }
|
1892 |
|
1893 | var _state$orderedModifie = state.orderedModifiers[index],
|
1894 | fn = _state$orderedModifie.fn,
|
1895 | _state$orderedModifie2 = _state$orderedModifie.options,
|
1896 | _options = _state$orderedModifie2 === void 0 ? {} : _state$orderedModifie2,
|
1897 | name = _state$orderedModifie.name;
|
1898 |
|
1899 | if (typeof fn === 'function') {
|
1900 | state = fn({
|
1901 | state: state,
|
1902 | options: _options,
|
1903 | name: name,
|
1904 | instance: instance
|
1905 | }) || state;
|
1906 | }
|
1907 | }
|
1908 | },
|
1909 |
|
1910 |
|
1911 | update: debounce(function () {
|
1912 | return new Promise(function (resolve) {
|
1913 | instance.forceUpdate();
|
1914 | resolve(state);
|
1915 | });
|
1916 | }),
|
1917 | destroy: function destroy() {
|
1918 | cleanupModifierEffects();
|
1919 | isDestroyed = true;
|
1920 | }
|
1921 | };
|
1922 |
|
1923 | if (!areValidElements(reference, popper)) {
|
1924 | if (process.env.NODE_ENV !== "production") {
|
1925 | console.error(INVALID_ELEMENT_ERROR);
|
1926 | }
|
1927 |
|
1928 | return instance;
|
1929 | }
|
1930 |
|
1931 | instance.setOptions(options).then(function (state) {
|
1932 | if (!isDestroyed && options.onFirstUpdate) {
|
1933 | options.onFirstUpdate(state);
|
1934 | }
|
1935 | });
|
1936 |
|
1937 |
|
1938 |
|
1939 |
|
1940 |
|
1941 | function runModifierEffects() {
|
1942 | state.orderedModifiers.forEach(function (_ref3) {
|
1943 | var name = _ref3.name,
|
1944 | _ref3$options = _ref3.options,
|
1945 | options = _ref3$options === void 0 ? {} : _ref3$options,
|
1946 | effect = _ref3.effect;
|
1947 |
|
1948 | if (typeof effect === 'function') {
|
1949 | var cleanupFn = effect({
|
1950 | state: state,
|
1951 | name: name,
|
1952 | instance: instance,
|
1953 | options: options
|
1954 | });
|
1955 |
|
1956 | var noopFn = function noopFn() {};
|
1957 |
|
1958 | effectCleanupFns.push(cleanupFn || noopFn);
|
1959 | }
|
1960 | });
|
1961 | }
|
1962 |
|
1963 | function cleanupModifierEffects() {
|
1964 | effectCleanupFns.forEach(function (fn) {
|
1965 | return fn();
|
1966 | });
|
1967 | effectCleanupFns = [];
|
1968 | }
|
1969 |
|
1970 | return instance;
|
1971 | };
|
1972 | }
|
1973 |
|
1974 | var defaultModifiers = [eventListeners, popperOffsets$1, computeStyles$1, applyStyles$1, offset$1, flip$1, preventOverflow$1, arrow$1, hide$1];
|
1975 | var createPopper = popperGenerator({
|
1976 | defaultModifiers: defaultModifiers
|
1977 | });
|
1978 |
|
1979 | function _setPrototypeOf(o, p) {
|
1980 | _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
|
1981 | o.__proto__ = p;
|
1982 | return o;
|
1983 | };
|
1984 |
|
1985 | return _setPrototypeOf(o, p);
|
1986 | }
|
1987 |
|
1988 | function _inheritsLoose(subClass, superClass) {
|
1989 | subClass.prototype = Object.create(superClass.prototype);
|
1990 | subClass.prototype.constructor = subClass;
|
1991 |
|
1992 | _setPrototypeOf(subClass, superClass);
|
1993 | }
|
1994 |
|
1995 | var ManagerReferenceNodeContext = React__namespace.createContext();
|
1996 | var ManagerReferenceNodeSetterContext = React__namespace.createContext();
|
1997 |
|
1998 | function Manager(_ref) {
|
1999 | var children = _ref.children;
|
2000 |
|
2001 | var _React$useState = React__namespace.useState(null),
|
2002 | referenceNode = _React$useState[0],
|
2003 | setReferenceNode = _React$useState[1];
|
2004 |
|
2005 | var hasUnmounted = React__namespace.useRef(false);
|
2006 | React__namespace.useEffect(function () {
|
2007 | return function () {
|
2008 | hasUnmounted.current = true;
|
2009 | };
|
2010 | }, []);
|
2011 | var handleSetReferenceNode = React__namespace.useCallback(function (node) {
|
2012 | if (!hasUnmounted.current) {
|
2013 | setReferenceNode(node);
|
2014 | }
|
2015 | }, []);
|
2016 | return React__namespace.createElement(ManagerReferenceNodeContext.Provider, {
|
2017 | value: referenceNode
|
2018 | }, React__namespace.createElement(ManagerReferenceNodeSetterContext.Provider, {
|
2019 | value: handleSetReferenceNode
|
2020 | }, children));
|
2021 | }
|
2022 |
|
2023 |
|
2024 |
|
2025 |
|
2026 |
|
2027 |
|
2028 | var unwrapArray = function unwrapArray(arg) {
|
2029 | return Array.isArray(arg) ? arg[0] : arg;
|
2030 | };
|
2031 |
|
2032 |
|
2033 |
|
2034 |
|
2035 |
|
2036 |
|
2037 | var safeInvoke = function safeInvoke(fn) {
|
2038 | if (typeof fn === 'function') {
|
2039 | for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
2040 | args[_key - 1] = arguments[_key];
|
2041 | }
|
2042 |
|
2043 | return fn.apply(void 0, args);
|
2044 | }
|
2045 | };
|
2046 |
|
2047 |
|
2048 |
|
2049 |
|
2050 |
|
2051 | var setRef$1 = function setRef(ref, node) {
|
2052 |
|
2053 | if (typeof ref === 'function') {
|
2054 | return safeInvoke(ref, node);
|
2055 | }
|
2056 | else if (ref != null) {
|
2057 | ref.current = node;
|
2058 | }
|
2059 | };
|
2060 |
|
2061 |
|
2062 |
|
2063 |
|
2064 |
|
2065 | var fromEntries = function fromEntries(entries) {
|
2066 | return entries.reduce(function (acc, _ref) {
|
2067 | var key = _ref[0],
|
2068 | value = _ref[1];
|
2069 | acc[key] = value;
|
2070 | return acc;
|
2071 | }, {});
|
2072 | };
|
2073 |
|
2074 |
|
2075 |
|
2076 |
|
2077 |
|
2078 | var useIsomorphicLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? React__namespace.useLayoutEffect : React__namespace.useEffect;
|
2079 |
|
2080 |
|
2081 | var hasElementType = typeof Element !== 'undefined';
|
2082 | var hasMap = typeof Map === 'function';
|
2083 | var hasSet = typeof Set === 'function';
|
2084 | var hasArrayBuffer = typeof ArrayBuffer === 'function' && !!ArrayBuffer.isView;
|
2085 |
|
2086 | function equal(a, b) {
|
2087 |
|
2088 | if (a === b) return true;
|
2089 |
|
2090 | if (a && b && typeof a == 'object' && typeof b == 'object') {
|
2091 | if (a.constructor !== b.constructor) return false;
|
2092 | var length, i, keys;
|
2093 |
|
2094 | if (Array.isArray(a)) {
|
2095 | length = a.length;
|
2096 | if (length != b.length) return false;
|
2097 |
|
2098 | for (i = length; i-- !== 0;) if (!equal(a[i], b[i])) return false;
|
2099 |
|
2100 | return true;
|
2101 | }
|
2102 |
|
2103 |
|
2104 |
|
2105 |
|
2106 |
|
2107 |
|
2108 |
|
2109 |
|
2110 |
|
2111 |
|
2112 |
|
2113 |
|
2114 |
|
2115 |
|
2116 |
|
2117 |
|
2118 |
|
2119 |
|
2120 |
|
2121 |
|
2122 |
|
2123 | var it;
|
2124 |
|
2125 | if (hasMap && a instanceof Map && b instanceof Map) {
|
2126 | if (a.size !== b.size) return false;
|
2127 | it = a.entries();
|
2128 |
|
2129 | while (!(i = it.next()).done) if (!b.has(i.value[0])) return false;
|
2130 |
|
2131 | it = a.entries();
|
2132 |
|
2133 | while (!(i = it.next()).done) if (!equal(i.value[1], b.get(i.value[0]))) return false;
|
2134 |
|
2135 | return true;
|
2136 | }
|
2137 |
|
2138 | if (hasSet && a instanceof Set && b instanceof Set) {
|
2139 | if (a.size !== b.size) return false;
|
2140 | it = a.entries();
|
2141 |
|
2142 | while (!(i = it.next()).done) if (!b.has(i.value[0])) return false;
|
2143 |
|
2144 | return true;
|
2145 | }
|
2146 |
|
2147 |
|
2148 | if (hasArrayBuffer && ArrayBuffer.isView(a) && ArrayBuffer.isView(b)) {
|
2149 | length = a.length;
|
2150 | if (length != b.length) return false;
|
2151 |
|
2152 | for (i = length; i-- !== 0;) if (a[i] !== b[i]) return false;
|
2153 |
|
2154 | return true;
|
2155 | }
|
2156 |
|
2157 | if (a.constructor === RegExp) return a.source === b.source && a.flags === b.flags;
|
2158 | if (a.valueOf !== Object.prototype.valueOf) return a.valueOf() === b.valueOf();
|
2159 | if (a.toString !== Object.prototype.toString) return a.toString() === b.toString();
|
2160 | keys = Object.keys(a);
|
2161 | length = keys.length;
|
2162 | if (length !== Object.keys(b).length) return false;
|
2163 |
|
2164 | for (i = length; i-- !== 0;) if (!Object.prototype.hasOwnProperty.call(b, keys[i])) return false;
|
2165 |
|
2166 |
|
2167 |
|
2168 |
|
2169 | if (hasElementType && a instanceof Element) return false;
|
2170 |
|
2171 | for (i = length; i-- !== 0;) {
|
2172 | if ((keys[i] === '_owner' || keys[i] === '__v' || keys[i] === '__o') && a.$$typeof) {
|
2173 |
|
2174 |
|
2175 |
|
2176 |
|
2177 |
|
2178 |
|
2179 |
|
2180 | continue;
|
2181 | }
|
2182 |
|
2183 |
|
2184 | if (!equal(a[keys[i]], b[keys[i]])) return false;
|
2185 | }
|
2186 |
|
2187 |
|
2188 |
|
2189 | return true;
|
2190 | }
|
2191 |
|
2192 | return a !== a && b !== b;
|
2193 | }
|
2194 |
|
2195 |
|
2196 | var reactFastCompare = function isEqual(a, b) {
|
2197 | try {
|
2198 | return equal(a, b);
|
2199 | } catch (error) {
|
2200 | if ((error.message || '').match(/stack|recursion/i)) {
|
2201 |
|
2202 |
|
2203 |
|
2204 |
|
2205 |
|
2206 | console.warn('react-fast-compare cannot handle circular refs');
|
2207 | return false;
|
2208 | }
|
2209 |
|
2210 |
|
2211 | throw error;
|
2212 | }
|
2213 | };
|
2214 |
|
2215 | var EMPTY_MODIFIERS$1 = [];
|
2216 |
|
2217 | var usePopper = function usePopper(referenceElement, popperElement, options) {
|
2218 | if (options === void 0) {
|
2219 | options = {};
|
2220 | }
|
2221 |
|
2222 | var prevOptions = React__namespace.useRef(null);
|
2223 | var optionsWithDefaults = {
|
2224 | onFirstUpdate: options.onFirstUpdate,
|
2225 | placement: options.placement || 'bottom',
|
2226 | strategy: options.strategy || 'absolute',
|
2227 | modifiers: options.modifiers || EMPTY_MODIFIERS$1
|
2228 | };
|
2229 |
|
2230 | var _React$useState = React__namespace.useState({
|
2231 | styles: {
|
2232 | popper: {
|
2233 | position: optionsWithDefaults.strategy,
|
2234 | left: '0',
|
2235 | top: '0'
|
2236 | },
|
2237 | arrow: {
|
2238 | position: 'absolute'
|
2239 | }
|
2240 | },
|
2241 | attributes: {}
|
2242 | }),
|
2243 | state = _React$useState[0],
|
2244 | setState = _React$useState[1];
|
2245 |
|
2246 | var updateStateModifier = React__namespace.useMemo(function () {
|
2247 | return {
|
2248 | name: 'updateState',
|
2249 | enabled: true,
|
2250 | phase: 'write',
|
2251 | fn: function fn(_ref) {
|
2252 | var state = _ref.state;
|
2253 | var elements = Object.keys(state.elements);
|
2254 | setState({
|
2255 | styles: fromEntries(elements.map(function (element) {
|
2256 | return [element, state.styles[element] || {}];
|
2257 | })),
|
2258 | attributes: fromEntries(elements.map(function (element) {
|
2259 | return [element, state.attributes[element]];
|
2260 | }))
|
2261 | });
|
2262 | },
|
2263 | requires: ['computeStyles']
|
2264 | };
|
2265 | }, []);
|
2266 | var popperOptions = React__namespace.useMemo(function () {
|
2267 | var newOptions = {
|
2268 | onFirstUpdate: optionsWithDefaults.onFirstUpdate,
|
2269 | placement: optionsWithDefaults.placement,
|
2270 | strategy: optionsWithDefaults.strategy,
|
2271 | modifiers: [].concat(optionsWithDefaults.modifiers, [updateStateModifier, {
|
2272 | name: 'applyStyles',
|
2273 | enabled: false
|
2274 | }])
|
2275 | };
|
2276 |
|
2277 | if (reactFastCompare(prevOptions.current, newOptions)) {
|
2278 | return prevOptions.current || newOptions;
|
2279 | } else {
|
2280 | prevOptions.current = newOptions;
|
2281 | return newOptions;
|
2282 | }
|
2283 | }, [optionsWithDefaults.onFirstUpdate, optionsWithDefaults.placement, optionsWithDefaults.strategy, optionsWithDefaults.modifiers, updateStateModifier]);
|
2284 | var popperInstanceRef = React__namespace.useRef();
|
2285 | useIsomorphicLayoutEffect(function () {
|
2286 | if (popperInstanceRef.current) {
|
2287 | popperInstanceRef.current.setOptions(popperOptions);
|
2288 | }
|
2289 | }, [popperOptions]);
|
2290 | useIsomorphicLayoutEffect(function () {
|
2291 | if (referenceElement == null || popperElement == null) {
|
2292 | return;
|
2293 | }
|
2294 |
|
2295 | var createPopper$1 = options.createPopper || createPopper;
|
2296 | var popperInstance = createPopper$1(referenceElement, popperElement, popperOptions);
|
2297 | popperInstanceRef.current = popperInstance;
|
2298 | return function () {
|
2299 | popperInstance.destroy();
|
2300 | popperInstanceRef.current = null;
|
2301 | };
|
2302 | }, [referenceElement, popperElement, options.createPopper]);
|
2303 | return {
|
2304 | state: popperInstanceRef.current ? popperInstanceRef.current.state : null,
|
2305 | styles: state.styles,
|
2306 | attributes: state.attributes,
|
2307 | update: popperInstanceRef.current ? popperInstanceRef.current.update : null,
|
2308 | forceUpdate: popperInstanceRef.current ? popperInstanceRef.current.forceUpdate : null
|
2309 | };
|
2310 | };
|
2311 |
|
2312 | var NOOP = function NOOP() {
|
2313 | return void 0;
|
2314 | };
|
2315 |
|
2316 | var NOOP_PROMISE = function NOOP_PROMISE() {
|
2317 | return Promise.resolve(null);
|
2318 | };
|
2319 |
|
2320 | var EMPTY_MODIFIERS = [];
|
2321 |
|
2322 | function Popper(_ref) {
|
2323 | var _ref$placement = _ref.placement,
|
2324 | placement = _ref$placement === void 0 ? 'bottom' : _ref$placement,
|
2325 | _ref$strategy = _ref.strategy,
|
2326 | strategy = _ref$strategy === void 0 ? 'absolute' : _ref$strategy,
|
2327 | _ref$modifiers = _ref.modifiers,
|
2328 | modifiers = _ref$modifiers === void 0 ? EMPTY_MODIFIERS : _ref$modifiers,
|
2329 | referenceElement = _ref.referenceElement,
|
2330 | onFirstUpdate = _ref.onFirstUpdate,
|
2331 | innerRef = _ref.innerRef,
|
2332 | children = _ref.children;
|
2333 | var referenceNode = React__namespace.useContext(ManagerReferenceNodeContext);
|
2334 |
|
2335 | var _React$useState = React__namespace.useState(null),
|
2336 | popperElement = _React$useState[0],
|
2337 | setPopperElement = _React$useState[1];
|
2338 |
|
2339 | var _React$useState2 = React__namespace.useState(null),
|
2340 | arrowElement = _React$useState2[0],
|
2341 | setArrowElement = _React$useState2[1];
|
2342 |
|
2343 | React__namespace.useEffect(function () {
|
2344 | setRef$1(innerRef, popperElement);
|
2345 | }, [innerRef, popperElement]);
|
2346 | var options = React__namespace.useMemo(function () {
|
2347 | return {
|
2348 | placement: placement,
|
2349 | strategy: strategy,
|
2350 | onFirstUpdate: onFirstUpdate,
|
2351 | modifiers: [].concat(modifiers, [{
|
2352 | name: 'arrow',
|
2353 | enabled: arrowElement != null,
|
2354 | options: {
|
2355 | element: arrowElement
|
2356 | }
|
2357 | }])
|
2358 | };
|
2359 | }, [placement, strategy, onFirstUpdate, modifiers, arrowElement]);
|
2360 |
|
2361 | var _usePopper = usePopper(referenceElement || referenceNode, popperElement, options),
|
2362 | state = _usePopper.state,
|
2363 | styles = _usePopper.styles,
|
2364 | forceUpdate = _usePopper.forceUpdate,
|
2365 | update = _usePopper.update;
|
2366 |
|
2367 | var childrenProps = React__namespace.useMemo(function () {
|
2368 | return {
|
2369 | ref: setPopperElement,
|
2370 | style: styles.popper,
|
2371 | placement: state ? state.placement : placement,
|
2372 | hasPopperEscaped: state && state.modifiersData.hide ? state.modifiersData.hide.hasPopperEscaped : null,
|
2373 | isReferenceHidden: state && state.modifiersData.hide ? state.modifiersData.hide.isReferenceHidden : null,
|
2374 | arrowProps: {
|
2375 | style: styles.arrow,
|
2376 | ref: setArrowElement
|
2377 | },
|
2378 | forceUpdate: forceUpdate || NOOP,
|
2379 | update: update || NOOP_PROMISE
|
2380 | };
|
2381 | }, [setPopperElement, setArrowElement, placement, state, styles, update, forceUpdate]);
|
2382 | return unwrapArray(children)(childrenProps);
|
2383 | }
|
2384 |
|
2385 |
|
2386 |
|
2387 |
|
2388 |
|
2389 |
|
2390 |
|
2391 |
|
2392 |
|
2393 |
|
2394 |
|
2395 |
|
2396 |
|
2397 |
|
2398 |
|
2399 | var __DEV__ = process.env.NODE_ENV !== 'production';
|
2400 |
|
2401 | var warning = function () {};
|
2402 |
|
2403 | if (__DEV__) {
|
2404 | var printWarning = function printWarning(format, args) {
|
2405 | var len = arguments.length;
|
2406 | args = new Array(len > 1 ? len - 1 : 0);
|
2407 |
|
2408 | for (var key = 1; key < len; key++) {
|
2409 | args[key - 1] = arguments[key];
|
2410 | }
|
2411 |
|
2412 | var argIndex = 0;
|
2413 | var message = 'Warning: ' + format.replace(/%s/g, function () {
|
2414 | return args[argIndex++];
|
2415 | });
|
2416 |
|
2417 | if (typeof console !== 'undefined') {
|
2418 | console.error(message);
|
2419 | }
|
2420 |
|
2421 | try {
|
2422 |
|
2423 |
|
2424 |
|
2425 | throw new Error(message);
|
2426 | } catch (x) {}
|
2427 | };
|
2428 |
|
2429 | warning = function (condition, format, args) {
|
2430 | var len = arguments.length;
|
2431 | args = new Array(len > 2 ? len - 2 : 0);
|
2432 |
|
2433 | for (var key = 2; key < len; key++) {
|
2434 | args[key - 2] = arguments[key];
|
2435 | }
|
2436 |
|
2437 | if (format === undefined) {
|
2438 | throw new Error('`warning(condition, format, ...args)` requires a warning ' + 'message argument');
|
2439 | }
|
2440 |
|
2441 | if (!condition) {
|
2442 | printWarning.apply(null, [format].concat(args));
|
2443 | }
|
2444 | };
|
2445 | }
|
2446 |
|
2447 | var warning_1 = warning;
|
2448 |
|
2449 | function Reference(_ref) {
|
2450 | var children = _ref.children,
|
2451 | innerRef = _ref.innerRef;
|
2452 | var setReferenceNode = React__namespace.useContext(ManagerReferenceNodeSetterContext);
|
2453 | var refHandler = React__namespace.useCallback(function (node) {
|
2454 | setRef$1(innerRef, node);
|
2455 | safeInvoke(setReferenceNode, node);
|
2456 | }, [innerRef, setReferenceNode]);
|
2457 |
|
2458 | React__namespace.useEffect(function () {
|
2459 | return function () {
|
2460 | return setRef$1(innerRef, null);
|
2461 | };
|
2462 | });
|
2463 | React__namespace.useEffect(function () {
|
2464 | warning_1(Boolean(setReferenceNode), '`Reference` should not be used outside of a `Manager` component.');
|
2465 | }, [setReferenceNode]);
|
2466 | return unwrapArray(children)({
|
2467 | ref: refHandler
|
2468 | });
|
2469 | }
|
2470 |
|
2471 | var TooltipContext = React__default["default"].createContext({});
|
2472 |
|
2473 |
|
2474 | var callAll = function callAll() {
|
2475 | for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
|
2476 | fns[_key] = arguments[_key];
|
2477 | }
|
2478 |
|
2479 | return function () {
|
2480 | for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
|
2481 | args[_key2] = arguments[_key2];
|
2482 | }
|
2483 |
|
2484 | return fns.forEach(function (fn) {
|
2485 | return fn && fn.apply(void 0, args);
|
2486 | });
|
2487 | };
|
2488 | };
|
2489 |
|
2490 | var noop = function noop() {
|
2491 | };
|
2492 |
|
2493 | var canUseDOM = function canUseDOM() {
|
2494 | return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
2495 | };
|
2496 |
|
2497 | var setRef = function setRef(ref, node) {
|
2498 | if (typeof ref === 'function') {
|
2499 | return ref(node);
|
2500 | } else if (ref != null) {
|
2501 | ref.current = node;
|
2502 | }
|
2503 | };
|
2504 |
|
2505 | var Tooltip$1 = function (_Component) {
|
2506 | _inheritsLoose(Tooltip, _Component);
|
2507 |
|
2508 | function Tooltip() {
|
2509 | var _this;
|
2510 |
|
2511 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
2512 | args[_key] = arguments[_key];
|
2513 | }
|
2514 |
|
2515 | _this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
2516 | _this.observer = void 0;
|
2517 | _this.tooltipRef = void 0;
|
2518 |
|
2519 | _this.handleOutsideClick = function (event) {
|
2520 | if (_this.tooltipRef && !_this.tooltipRef.contains(event.target)) {
|
2521 | var parentOutsideClickHandler = _this.context.parentOutsideClickHandler;
|
2522 | var _this$props = _this.props,
|
2523 | hideTooltip = _this$props.hideTooltip,
|
2524 | clearScheduled = _this$props.clearScheduled;
|
2525 | clearScheduled();
|
2526 | hideTooltip();
|
2527 |
|
2528 | if (parentOutsideClickHandler) {
|
2529 | parentOutsideClickHandler(event);
|
2530 | }
|
2531 | }
|
2532 | };
|
2533 |
|
2534 | _this.handleOutsideRightClick = function (event) {
|
2535 | if (_this.tooltipRef && !_this.tooltipRef.contains(event.target)) {
|
2536 | var parentOutsideRightClickHandler = _this.context.parentOutsideRightClickHandler;
|
2537 | var _this$props2 = _this.props,
|
2538 | hideTooltip = _this$props2.hideTooltip,
|
2539 | clearScheduled = _this$props2.clearScheduled;
|
2540 | clearScheduled();
|
2541 | hideTooltip();
|
2542 |
|
2543 | if (parentOutsideRightClickHandler) {
|
2544 | parentOutsideRightClickHandler(event);
|
2545 | }
|
2546 | }
|
2547 | };
|
2548 |
|
2549 | _this.addOutsideClickHandler = function () {
|
2550 | document.body.addEventListener('touchend', _this.handleOutsideClick);
|
2551 | document.body.addEventListener('click', _this.handleOutsideClick);
|
2552 | };
|
2553 |
|
2554 | _this.removeOutsideClickHandler = function () {
|
2555 | document.body.removeEventListener('touchend', _this.handleOutsideClick);
|
2556 | document.body.removeEventListener('click', _this.handleOutsideClick);
|
2557 | };
|
2558 |
|
2559 | _this.addOutsideRightClickHandler = function () {
|
2560 | return document.body.addEventListener('contextmenu', _this.handleOutsideRightClick);
|
2561 | };
|
2562 |
|
2563 | _this.removeOutsideRightClickHandler = function () {
|
2564 | return document.body.removeEventListener('contextmenu', _this.handleOutsideRightClick);
|
2565 | };
|
2566 |
|
2567 | _this.getTooltipRef = function (node) {
|
2568 | _this.tooltipRef = node;
|
2569 | setRef(_this.props.innerRef, node);
|
2570 | };
|
2571 |
|
2572 | _this.getArrowProps = function (props) {
|
2573 | if (props === void 0) {
|
2574 | props = {};
|
2575 | }
|
2576 |
|
2577 | return index._extends({}, props, {
|
2578 | style: index._extends({}, props.style, _this.props.arrowProps.style)
|
2579 | });
|
2580 | };
|
2581 |
|
2582 | _this.getTooltipProps = function (props) {
|
2583 | if (props === void 0) {
|
2584 | props = {};
|
2585 | }
|
2586 |
|
2587 | return index._extends({}, props, _this.isTriggeredBy('hover') && {
|
2588 | onMouseEnter: callAll(_this.props.clearScheduled, props.onMouseEnter),
|
2589 | onMouseLeave: callAll(_this.props.hideTooltip, props.onMouseLeave)
|
2590 | }, {
|
2591 | style: index._extends({}, props.style, _this.props.style)
|
2592 | });
|
2593 | };
|
2594 |
|
2595 | _this.contextValue = {
|
2596 | isParentNoneTriggered: _this.props.trigger === 'none',
|
2597 | addParentOutsideClickHandler: _this.addOutsideClickHandler,
|
2598 | addParentOutsideRightClickHandler: _this.addOutsideRightClickHandler,
|
2599 | parentOutsideClickHandler: _this.handleOutsideClick,
|
2600 | parentOutsideRightClickHandler: _this.handleOutsideRightClick,
|
2601 | removeParentOutsideClickHandler: _this.removeOutsideClickHandler,
|
2602 | removeParentOutsideRightClickHandler: _this.removeOutsideRightClickHandler
|
2603 | };
|
2604 | return _this;
|
2605 | }
|
2606 |
|
2607 | var _proto = Tooltip.prototype;
|
2608 |
|
2609 | _proto.componentDidMount = function componentDidMount() {
|
2610 | var _this2 = this;
|
2611 |
|
2612 | var observer = this.observer = new MutationObserver(function () {
|
2613 | _this2.props.update();
|
2614 | });
|
2615 | observer.observe(this.tooltipRef, this.props.mutationObserverOptions);
|
2616 |
|
2617 | if (this.isTriggeredBy('hover') || this.isTriggeredBy('click') || this.isTriggeredBy('right-click')) {
|
2618 | var _this$context = this.context,
|
2619 | removeParentOutsideClickHandler = _this$context.removeParentOutsideClickHandler,
|
2620 | removeParentOutsideRightClickHandler = _this$context.removeParentOutsideRightClickHandler;
|
2621 | this.addOutsideClickHandler();
|
2622 | this.addOutsideRightClickHandler();
|
2623 |
|
2624 | if (removeParentOutsideClickHandler) {
|
2625 | removeParentOutsideClickHandler();
|
2626 | }
|
2627 |
|
2628 | if (removeParentOutsideRightClickHandler) {
|
2629 | removeParentOutsideRightClickHandler();
|
2630 | }
|
2631 | }
|
2632 | };
|
2633 |
|
2634 | _proto.componentDidUpdate = function componentDidUpdate() {
|
2635 | if (this.props.closeOnReferenceHidden && this.props.isReferenceHidden) {
|
2636 | this.props.hideTooltip();
|
2637 | }
|
2638 | };
|
2639 |
|
2640 | _proto.componentWillUnmount = function componentWillUnmount() {
|
2641 | if (this.observer) {
|
2642 | this.observer.disconnect();
|
2643 | }
|
2644 |
|
2645 | if (this.isTriggeredBy('hover') || this.isTriggeredBy('click') || this.isTriggeredBy('right-click')) {
|
2646 | var _this$context2 = this.context,
|
2647 | isParentNoneTriggered = _this$context2.isParentNoneTriggered,
|
2648 | addParentOutsideClickHandler = _this$context2.addParentOutsideClickHandler,
|
2649 | addParentOutsideRightClickHandler = _this$context2.addParentOutsideRightClickHandler;
|
2650 | this.removeOutsideClickHandler();
|
2651 | this.removeOutsideRightClickHandler();
|
2652 | this.handleOutsideClick = undefined;
|
2653 | this.handleOutsideRightClick = undefined;
|
2654 |
|
2655 | if (!isParentNoneTriggered && addParentOutsideClickHandler) {
|
2656 | addParentOutsideClickHandler();
|
2657 | }
|
2658 |
|
2659 | if (!isParentNoneTriggered && addParentOutsideRightClickHandler) {
|
2660 | addParentOutsideRightClickHandler();
|
2661 | }
|
2662 | }
|
2663 | };
|
2664 |
|
2665 | _proto.render = function render() {
|
2666 | var _this$props3 = this.props,
|
2667 | arrowProps = _this$props3.arrowProps,
|
2668 | placement = _this$props3.placement,
|
2669 | tooltip = _this$props3.tooltip;
|
2670 | return React__default["default"].createElement(TooltipContext.Provider, {
|
2671 | value: this.contextValue
|
2672 | }, tooltip({
|
2673 | arrowRef: arrowProps.ref,
|
2674 | getArrowProps: this.getArrowProps,
|
2675 | getTooltipProps: this.getTooltipProps,
|
2676 | placement: placement,
|
2677 | tooltipRef: this.getTooltipRef
|
2678 | }));
|
2679 | };
|
2680 |
|
2681 | _proto.isTriggeredBy = function isTriggeredBy(event) {
|
2682 | var trigger = this.props.trigger;
|
2683 | return trigger === event || Array.isArray(trigger) && trigger.includes(event);
|
2684 | };
|
2685 |
|
2686 | return Tooltip;
|
2687 | }(React.Component);
|
2688 |
|
2689 | Tooltip$1.contextType = TooltipContext;
|
2690 | var DEFAULT_MUTATION_OBSERVER_CONFIG = {
|
2691 | childList: true,
|
2692 | subtree: true
|
2693 | };
|
2694 |
|
2695 | var TooltipTrigger = function (_Component) {
|
2696 | _inheritsLoose(TooltipTrigger, _Component);
|
2697 |
|
2698 | function TooltipTrigger() {
|
2699 | var _this;
|
2700 |
|
2701 | for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
2702 | args[_key] = arguments[_key];
|
2703 | }
|
2704 |
|
2705 | _this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
2706 | _this.state = {
|
2707 | tooltipShown: _this.props.defaultTooltipShown
|
2708 | };
|
2709 | _this.hideTimeout = void 0;
|
2710 | _this.showTimeout = void 0;
|
2711 | _this.popperOffset = void 0;
|
2712 |
|
2713 | _this.setTooltipState = function (state) {
|
2714 | var cb = function cb() {
|
2715 | return _this.props.onVisibilityChange(state.tooltipShown);
|
2716 | };
|
2717 |
|
2718 | _this.isControlled() ? cb() : _this.setState(state, cb);
|
2719 | };
|
2720 |
|
2721 | _this.clearScheduled = function () {
|
2722 | clearTimeout(_this.hideTimeout);
|
2723 | clearTimeout(_this.showTimeout);
|
2724 | };
|
2725 |
|
2726 | _this.showTooltip = function (_ref) {
|
2727 | var pageX = _ref.pageX,
|
2728 | pageY = _ref.pageY;
|
2729 |
|
2730 | _this.clearScheduled();
|
2731 |
|
2732 | var state = {
|
2733 | tooltipShown: true
|
2734 | };
|
2735 |
|
2736 | if (_this.props.followCursor) {
|
2737 | state = index._extends({}, state, {
|
2738 | pageX: pageX,
|
2739 | pageY: pageY
|
2740 | });
|
2741 | }
|
2742 |
|
2743 | _this.showTimeout = window.setTimeout(function () {
|
2744 | return _this.setTooltipState(state);
|
2745 | }, _this.props.delayShow);
|
2746 | };
|
2747 |
|
2748 | _this.hideTooltip = function () {
|
2749 | _this.clearScheduled();
|
2750 |
|
2751 | _this.hideTimeout = window.setTimeout(function () {
|
2752 | return _this.setTooltipState({
|
2753 | tooltipShown: false
|
2754 | });
|
2755 | }, _this.props.delayHide);
|
2756 | };
|
2757 |
|
2758 | _this.toggleTooltip = function (_ref2) {
|
2759 | var pageX = _ref2.pageX,
|
2760 | pageY = _ref2.pageY;
|
2761 | var action = _this.getState() ? 'hideTooltip' : 'showTooltip';
|
2762 |
|
2763 | _this[action]({
|
2764 | pageX: pageX,
|
2765 | pageY: pageY
|
2766 | });
|
2767 | };
|
2768 |
|
2769 | _this.clickToggle = function (event) {
|
2770 | event.preventDefault();
|
2771 | var pageX = event.pageX,
|
2772 | pageY = event.pageY;
|
2773 | var action = _this.props.followCursor ? 'showTooltip' : 'toggleTooltip';
|
2774 |
|
2775 | _this[action]({
|
2776 | pageX: pageX,
|
2777 | pageY: pageY
|
2778 | });
|
2779 | };
|
2780 |
|
2781 | _this.contextMenuToggle = function (event) {
|
2782 | event.preventDefault();
|
2783 | var pageX = event.pageX,
|
2784 | pageY = event.pageY;
|
2785 | var action = _this.props.followCursor ? 'showTooltip' : 'toggleTooltip';
|
2786 |
|
2787 | _this[action]({
|
2788 | pageX: pageX,
|
2789 | pageY: pageY
|
2790 | });
|
2791 | };
|
2792 |
|
2793 | _this.getTriggerProps = function (props) {
|
2794 | if (props === void 0) {
|
2795 | props = {};
|
2796 | }
|
2797 |
|
2798 | return index._extends({}, props, _this.isTriggeredBy('click') && {
|
2799 | onClick: callAll(_this.clickToggle, props.onClick),
|
2800 | onTouchEnd: callAll(_this.clickToggle, props.onTouchEnd)
|
2801 | }, _this.isTriggeredBy('right-click') && {
|
2802 | onContextMenu: callAll(_this.contextMenuToggle, props.onContextMenu)
|
2803 | }, _this.isTriggeredBy('hover') && index._extends({
|
2804 | onMouseEnter: callAll(_this.showTooltip, props.onMouseEnter),
|
2805 | onMouseLeave: callAll(_this.hideTooltip, props.onMouseLeave)
|
2806 | }, _this.props.followCursor && {
|
2807 | onMouseMove: callAll(_this.showTooltip, props.onMouseMove)
|
2808 | }), _this.isTriggeredBy('focus') && {
|
2809 | onFocus: callAll(_this.showTooltip, props.onFocus),
|
2810 | onBlur: callAll(_this.hideTooltip, props.onBlur)
|
2811 | });
|
2812 | };
|
2813 |
|
2814 | return _this;
|
2815 | }
|
2816 |
|
2817 | var _proto = TooltipTrigger.prototype;
|
2818 |
|
2819 | _proto.componentWillUnmount = function componentWillUnmount() {
|
2820 | this.clearScheduled();
|
2821 | };
|
2822 |
|
2823 | _proto.render = function render() {
|
2824 | var _this2 = this;
|
2825 |
|
2826 | var _this$props = this.props,
|
2827 | children = _this$props.children,
|
2828 | tooltip = _this$props.tooltip,
|
2829 | placement = _this$props.placement,
|
2830 | trigger = _this$props.trigger,
|
2831 | getTriggerRef = _this$props.getTriggerRef,
|
2832 | modifiers = _this$props.modifiers,
|
2833 | closeOnReferenceHidden = _this$props.closeOnReferenceHidden,
|
2834 | usePortal = _this$props.usePortal,
|
2835 | portalContainer = _this$props.portalContainer,
|
2836 | followCursor = _this$props.followCursor,
|
2837 | getTooltipRef = _this$props.getTooltipRef,
|
2838 | mutationObserverOptions = _this$props.mutationObserverOptions,
|
2839 | restProps = index._objectWithoutPropertiesLoose(_this$props, ["children", "tooltip", "placement", "trigger", "getTriggerRef", "modifiers", "closeOnReferenceHidden", "usePortal", "portalContainer", "followCursor", "getTooltipRef", "mutationObserverOptions"]);
|
2840 |
|
2841 | var popper = React__default["default"].createElement(Popper, index._extends({
|
2842 | innerRef: getTooltipRef,
|
2843 | placement: placement,
|
2844 | modifiers: [{
|
2845 | name: 'followCursor',
|
2846 | enabled: followCursor,
|
2847 | phase: 'main',
|
2848 | fn: function fn(data) {
|
2849 | _this2.popperOffset = data.state.rects.popper;
|
2850 | }
|
2851 | }].concat(modifiers)
|
2852 | }, restProps), function (_ref3) {
|
2853 | var ref = _ref3.ref,
|
2854 | style = _ref3.style,
|
2855 | placement = _ref3.placement,
|
2856 | arrowProps = _ref3.arrowProps,
|
2857 | isReferenceHidden = _ref3.isReferenceHidden,
|
2858 | update = _ref3.update;
|
2859 |
|
2860 | if (followCursor && _this2.popperOffset) {
|
2861 | var _this2$state = _this2.state,
|
2862 | pageX = _this2$state.pageX,
|
2863 | pageY = _this2$state.pageY;
|
2864 | var _this2$popperOffset = _this2.popperOffset,
|
2865 | width = _this2$popperOffset.width,
|
2866 | height = _this2$popperOffset.height;
|
2867 | var x = pageX + width > window.pageXOffset + document.body.offsetWidth ? pageX - width : pageX;
|
2868 | var y = pageY + height > window.pageYOffset + document.body.offsetHeight ? pageY - height : pageY;
|
2869 | style.transform = "translate3d(" + x + "px, " + y + "px, 0";
|
2870 | }
|
2871 |
|
2872 | return React__default["default"].createElement(Tooltip$1, index._extends({
|
2873 | arrowProps: arrowProps,
|
2874 | closeOnReferenceHidden: closeOnReferenceHidden,
|
2875 | isReferenceHidden: isReferenceHidden,
|
2876 | placement: placement,
|
2877 | update: update,
|
2878 | style: style,
|
2879 | tooltip: tooltip,
|
2880 | trigger: trigger,
|
2881 | mutationObserverOptions: mutationObserverOptions
|
2882 | }, {
|
2883 | clearScheduled: _this2.clearScheduled,
|
2884 | hideTooltip: _this2.hideTooltip,
|
2885 | innerRef: ref
|
2886 | }));
|
2887 | });
|
2888 | return React__default["default"].createElement(Manager, null, React__default["default"].createElement(Reference, {
|
2889 | innerRef: getTriggerRef
|
2890 | }, function (_ref4) {
|
2891 | var ref = _ref4.ref;
|
2892 | return children({
|
2893 | getTriggerProps: _this2.getTriggerProps,
|
2894 | triggerRef: ref
|
2895 | });
|
2896 | }), this.getState() && (usePortal ? reactDom.createPortal(popper, portalContainer) : popper));
|
2897 | };
|
2898 |
|
2899 | _proto.isControlled = function isControlled() {
|
2900 | return this.props.tooltipShown !== undefined;
|
2901 | };
|
2902 |
|
2903 | _proto.getState = function getState() {
|
2904 | return this.isControlled() ? this.props.tooltipShown : this.state.tooltipShown;
|
2905 | };
|
2906 |
|
2907 | _proto.isTriggeredBy = function isTriggeredBy(event) {
|
2908 | var trigger = this.props.trigger;
|
2909 | return trigger === event || Array.isArray(trigger) && trigger.includes(event);
|
2910 | };
|
2911 |
|
2912 | return TooltipTrigger;
|
2913 | }(React.Component);
|
2914 |
|
2915 | TooltipTrigger.defaultProps = {
|
2916 | closeOnReferenceHidden: true,
|
2917 | defaultTooltipShown: false,
|
2918 | delayHide: 0,
|
2919 | delayShow: 0,
|
2920 | followCursor: false,
|
2921 | onVisibilityChange: noop,
|
2922 | placement: 'right',
|
2923 | portalContainer: canUseDOM() ? document.body : null,
|
2924 | trigger: 'hover',
|
2925 | usePortal: canUseDOM(),
|
2926 | mutationObserverOptions: DEFAULT_MUTATION_OBSERVER_CONFIG,
|
2927 | modifiers: []
|
2928 | };
|
2929 | var TooltipTrigger$1 = TooltipTrigger;
|
2930 | const match = memoize__default["default"](1000)((requests, actual, value, fallback = 0) => actual.split('-')[0] === requests ? value : fallback);
|
2931 | const ArrowSpacing = 8;
|
2932 | const Arrow = theming.styled.div({
|
2933 | position: 'absolute',
|
2934 | borderStyle: 'solid'
|
2935 | }, ({
|
2936 | placement
|
2937 | }) => {
|
2938 | let x = 0;
|
2939 | let y = 0;
|
2940 |
|
2941 | switch (true) {
|
2942 | case placement.startsWith('left') || placement.startsWith('right'):
|
2943 | {
|
2944 | y = 8;
|
2945 | break;
|
2946 | }
|
2947 |
|
2948 | case placement.startsWith('top') || placement.startsWith('bottom'):
|
2949 | {
|
2950 | x = 8;
|
2951 | break;
|
2952 | }
|
2953 | }
|
2954 |
|
2955 | const transform = `translate3d(${x}px, ${y}px, 0px)`;
|
2956 | return {
|
2957 | transform
|
2958 | };
|
2959 | }, ({
|
2960 | theme,
|
2961 | color,
|
2962 | placement
|
2963 | }) => ({
|
2964 | bottom: `${match('top', placement, ArrowSpacing * -1, 'auto')}px`,
|
2965 | top: `${match('bottom', placement, ArrowSpacing * -1, 'auto')}px`,
|
2966 | right: `${match('left', placement, ArrowSpacing * -1, 'auto')}px`,
|
2967 | left: `${match('right', placement, ArrowSpacing * -1, 'auto')}px`,
|
2968 | borderBottomWidth: `${match('top', placement, '0', ArrowSpacing)}px`,
|
2969 | borderTopWidth: `${match('bottom', placement, '0', ArrowSpacing)}px`,
|
2970 | borderRightWidth: `${match('left', placement, '0', ArrowSpacing)}px`,
|
2971 | borderLeftWidth: `${match('right', placement, '0', ArrowSpacing)}px`,
|
2972 | borderTopColor: match('top', placement, theme.color[color] || color || theme.base === 'light' ? theming.lighten(theme.background.app) : theming.darken(theme.background.app), 'transparent'),
|
2973 | borderBottomColor: match('bottom', placement, theme.color[color] || color || theme.base === 'light' ? theming.lighten(theme.background.app) : theming.darken(theme.background.app), 'transparent'),
|
2974 | borderLeftColor: match('left', placement, theme.color[color] || color || theme.base === 'light' ? theming.lighten(theme.background.app) : theming.darken(theme.background.app), 'transparent'),
|
2975 | borderRightColor: match('right', placement, theme.color[color] || color || theme.base === 'light' ? theming.lighten(theme.background.app) : theming.darken(theme.background.app), 'transparent')
|
2976 | }));
|
2977 | const Wrapper = theming.styled.div(({
|
2978 | hidden
|
2979 | }) => ({
|
2980 | display: hidden ? 'none' : 'inline-block',
|
2981 | zIndex: 2147483647
|
2982 | }), ({
|
2983 | theme,
|
2984 | color,
|
2985 | hasChrome
|
2986 | }) => hasChrome ? {
|
2987 | background: theme.color[color] || color || theme.base === 'light' ? theming.lighten(theme.background.app) : theming.darken(theme.background.app),
|
2988 | filter: `
|
2989 | drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
|
2990 | drop-shadow(0 1px 3px rgba(0,0,0,0.1))
|
2991 | `,
|
2992 | borderRadius: theme.appBorderRadius * 2,
|
2993 | fontSize: theme.typography.size.s1
|
2994 | } : {});
|
2995 |
|
2996 | const Tooltip = _a => {
|
2997 | var {
|
2998 | placement,
|
2999 | hasChrome,
|
3000 | children,
|
3001 | arrowProps,
|
3002 | tooltipRef,
|
3003 | arrowRef,
|
3004 | color
|
3005 | } = _a,
|
3006 | props = index.__rest(_a, ["placement", "hasChrome", "children", "arrowProps", "tooltipRef", "arrowRef", "color"]);
|
3007 |
|
3008 | return React__default["default"].createElement(Wrapper, Object.assign({
|
3009 | hasChrome: hasChrome,
|
3010 | placement: placement,
|
3011 | ref: tooltipRef
|
3012 | }, props, {
|
3013 | color: color
|
3014 | }), hasChrome && React__default["default"].createElement(Arrow, Object.assign({
|
3015 | placement: placement,
|
3016 | ref: arrowRef
|
3017 | }, arrowProps, {
|
3018 | color: color
|
3019 | })), children);
|
3020 | };
|
3021 |
|
3022 | Tooltip.defaultProps = {
|
3023 | color: undefined,
|
3024 | arrowRef: undefined,
|
3025 | tooltipRef: undefined,
|
3026 | hasChrome: true,
|
3027 | placement: 'top',
|
3028 | arrowProps: {}
|
3029 | };
|
3030 | const {
|
3031 | document: document$1
|
3032 | } = index.window_1;
|
3033 |
|
3034 | const TargetContainer = theming.styled.div`
|
3035 | display: inline-block;
|
3036 | cursor: ${props => props.mode === 'hover' ? 'default' : 'pointer'};
|
3037 | `;
|
3038 | const TargetSvgContainer = theming.styled.g`
|
3039 | cursor: ${props => props.mode === 'hover' ? 'default' : 'pointer'};
|
3040 | `;
|
3041 |
|
3042 | const WithTooltipPure = _a => {
|
3043 | var {
|
3044 | svg,
|
3045 | trigger,
|
3046 | closeOnClick,
|
3047 | placement,
|
3048 | modifiers,
|
3049 | hasChrome,
|
3050 | tooltip,
|
3051 | children,
|
3052 | tooltipShown,
|
3053 | onVisibilityChange
|
3054 | } = _a,
|
3055 | props = index.__rest(_a, ["svg", "trigger", "closeOnClick", "placement", "modifiers", "hasChrome", "tooltip", "children", "tooltipShown", "onVisibilityChange"]);
|
3056 |
|
3057 | const Container = svg ? TargetSvgContainer : TargetContainer;
|
3058 | return React__default["default"].createElement(TooltipTrigger$1, {
|
3059 | placement: placement,
|
3060 | trigger: trigger,
|
3061 | modifiers: modifiers,
|
3062 | tooltipShown: tooltipShown,
|
3063 | onVisibilityChange: onVisibilityChange,
|
3064 | tooltip: ({
|
3065 | getTooltipProps,
|
3066 | getArrowProps,
|
3067 | tooltipRef,
|
3068 | arrowRef,
|
3069 | placement: tooltipPlacement
|
3070 | }) => React__default["default"].createElement(Tooltip, Object.assign({
|
3071 | hasChrome: hasChrome,
|
3072 | placement: tooltipPlacement,
|
3073 | tooltipRef: tooltipRef,
|
3074 | arrowRef: arrowRef,
|
3075 | arrowProps: getArrowProps()
|
3076 | }, getTooltipProps()), typeof tooltip === 'function' ? tooltip({
|
3077 | onHide: () => onVisibilityChange(false)
|
3078 | }) : tooltip)
|
3079 | }, ({
|
3080 | getTriggerProps,
|
3081 | triggerRef
|
3082 | }) =>
|
3083 | React__default["default"].createElement(Container, Object.assign({
|
3084 | ref: triggerRef
|
3085 | }, getTriggerProps(), props), children));
|
3086 | };
|
3087 |
|
3088 | WithTooltipPure.defaultProps = {
|
3089 | svg: false,
|
3090 | trigger: 'hover',
|
3091 | closeOnClick: false,
|
3092 | placement: 'top',
|
3093 | modifiers: [{
|
3094 | name: 'preventOverflow',
|
3095 | options: {
|
3096 | padding: 8
|
3097 | }
|
3098 | }, {
|
3099 | name: 'offset',
|
3100 | options: {
|
3101 | offset: [8, 8]
|
3102 | }
|
3103 | }, {
|
3104 | name: 'arrow',
|
3105 | options: {
|
3106 | padding: 8
|
3107 | }
|
3108 | }],
|
3109 | hasChrome: true,
|
3110 | tooltipShown: false
|
3111 | };
|
3112 |
|
3113 | const WithToolTipState = _a => {
|
3114 | var {
|
3115 | startOpen,
|
3116 | onVisibilityChange: onChange
|
3117 | } = _a,
|
3118 | rest = index.__rest(_a, ["startOpen", "onVisibilityChange"]);
|
3119 |
|
3120 | const [tooltipShown, setTooltipShown] = React.useState(startOpen || false);
|
3121 | const onVisibilityChange = React.useCallback(visibility => {
|
3122 | if (onChange && onChange(visibility) === false) return;
|
3123 | setTooltipShown(visibility);
|
3124 | }, [onChange]);
|
3125 | React.useEffect(() => {
|
3126 | const hide = () => onVisibilityChange(false);
|
3127 |
|
3128 | document$1.addEventListener('keydown', hide, false);
|
3129 |
|
3130 | const iframes = Array.from(document$1.getElementsByTagName('iframe'));
|
3131 | const unbinders = [];
|
3132 | iframes.forEach(iframe => {
|
3133 | const bind = () => {
|
3134 | try {
|
3135 | if (iframe.contentWindow.document) {
|
3136 | iframe.contentWindow.document.addEventListener('click', hide);
|
3137 | unbinders.push(() => {
|
3138 | try {
|
3139 | iframe.contentWindow.document.removeEventListener('click', hide);
|
3140 | } catch (e) {
|
3141 | }
|
3142 | });
|
3143 | }
|
3144 | } catch (e) {
|
3145 | }
|
3146 | };
|
3147 |
|
3148 | bind();
|
3149 |
|
3150 | iframe.addEventListener('load', bind);
|
3151 | unbinders.push(() => {
|
3152 | iframe.removeEventListener('load', bind);
|
3153 | });
|
3154 | });
|
3155 | return () => {
|
3156 | document$1.removeEventListener('keydown', hide);
|
3157 | unbinders.forEach(unbind => {
|
3158 | unbind();
|
3159 | });
|
3160 | };
|
3161 | });
|
3162 | return React__default["default"].createElement(WithTooltipPure, Object.assign({}, rest, {
|
3163 | tooltipShown: tooltipShown,
|
3164 | onVisibilityChange: onVisibilityChange
|
3165 | }));
|
3166 | };
|
3167 |
|
3168 | exports.WithToolTipState = WithToolTipState;
|
3169 | exports.WithTooltip = WithToolTipState;
|
3170 | exports.WithTooltipPure = WithTooltipPure;
|