vue-tippy 6.0.0-alpha.37 → 6.0.0-alpha.40

Sign up to get free protection for your applications and to get access to all the features.
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * vue-tippy v6.0.0-alpha.37
2
+ * vue-tippy v6.0.0-alpha.40
3
3
  * (c) 2021
4
4
  * @license MIT
5
5
  */
@@ -165,17 +165,42 @@ function getBasePlacement(placement) {
165
165
  return placement.split('-')[0];
166
166
  }
167
167
 
168
- function getBoundingClientRect(element) {
168
+ var max = Math.max;
169
+ var min = Math.min;
170
+ var round = Math.round;
171
+
172
+ function getBoundingClientRect(element, includeScale) {
173
+ if (includeScale === void 0) {
174
+ includeScale = false;
175
+ }
176
+
169
177
  var rect = element.getBoundingClientRect();
178
+ var scaleX = 1;
179
+ var scaleY = 1;
180
+
181
+ if (isHTMLElement(element) && includeScale) {
182
+ var offsetHeight = element.offsetHeight;
183
+ var offsetWidth = element.offsetWidth; // Do not attempt to divide by 0, otherwise we get `Infinity` as scale
184
+ // Fallback to 1 in case both values are `0`
185
+
186
+ if (offsetWidth > 0) {
187
+ scaleX = round(rect.width) / offsetWidth || 1;
188
+ }
189
+
190
+ if (offsetHeight > 0) {
191
+ scaleY = round(rect.height) / offsetHeight || 1;
192
+ }
193
+ }
194
+
170
195
  return {
171
- width: rect.width,
172
- height: rect.height,
173
- top: rect.top,
174
- right: rect.right,
175
- bottom: rect.bottom,
176
- left: rect.left,
177
- x: rect.left,
178
- y: rect.top
196
+ width: rect.width / scaleX,
197
+ height: rect.height / scaleY,
198
+ top: rect.top / scaleY,
199
+ right: rect.right / scaleX,
200
+ bottom: rect.bottom / scaleY,
201
+ left: rect.left / scaleX,
202
+ x: rect.left / scaleX,
203
+ y: rect.top / scaleY
179
204
  };
180
205
  }
181
206
 
@@ -320,13 +345,13 @@ function getMainAxisFromPlacement(placement) {
320
345
  return ['top', 'bottom'].indexOf(placement) >= 0 ? 'x' : 'y';
321
346
  }
322
347
 
323
- var max = Math.max;
324
- var min = Math.min;
325
- var round = Math.round;
326
-
327
348
  function within(min$1, value, max$1) {
328
349
  return max(min$1, min(value, max$1));
329
350
  }
351
+ function withinMaxClamp(min, value, max) {
352
+ var v = within(min, value, max);
353
+ return v > max ? max : v;
354
+ }
330
355
 
331
356
  function getFreshSideObject() {
332
357
  return {
@@ -439,6 +464,10 @@ var arrow$1 = {
439
464
  requiresIfExists: ['preventOverflow']
440
465
  };
441
466
 
467
+ function getVariation(placement) {
468
+ return placement.split('-')[1];
469
+ }
470
+
442
471
  var unsetSides = {
443
472
  top: 'auto',
444
473
  right: 'auto',
@@ -454,8 +483,8 @@ function roundOffsetsByDPR(_ref) {
454
483
  var win = window;
455
484
  var dpr = win.devicePixelRatio || 1;
456
485
  return {
457
- x: round(round(x * dpr) / dpr) || 0,
458
- y: round(round(y * dpr) / dpr) || 0
486
+ x: round(x * dpr) / dpr || 0,
487
+ y: round(y * dpr) / dpr || 0
459
488
  };
460
489
  }
461
490
 
@@ -465,11 +494,13 @@ function mapToStyles(_ref2) {
465
494
  var popper = _ref2.popper,
466
495
  popperRect = _ref2.popperRect,
467
496
  placement = _ref2.placement,
497
+ variation = _ref2.variation,
468
498
  offsets = _ref2.offsets,
469
499
  position = _ref2.position,
470
500
  gpuAcceleration = _ref2.gpuAcceleration,
471
501
  adaptive = _ref2.adaptive,
472
- roundOffsets = _ref2.roundOffsets;
502
+ roundOffsets = _ref2.roundOffsets,
503
+ isFixed = _ref2.isFixed;
473
504
 
474
505
  var _ref3 = roundOffsets === true ? roundOffsetsByDPR(offsets) : typeof roundOffsets === 'function' ? roundOffsets(offsets) : offsets,
475
506
  _ref3$x = _ref3.x,
@@ -491,7 +522,7 @@ function mapToStyles(_ref2) {
491
522
  if (offsetParent === getWindow(popper)) {
492
523
  offsetParent = getDocumentElement(popper);
493
524
 
494
- if (getComputedStyle(offsetParent).position !== 'static') {
525
+ if (getComputedStyle(offsetParent).position !== 'static' && position === 'absolute') {
495
526
  heightProp = 'scrollHeight';
496
527
  widthProp = 'scrollWidth';
497
528
  }
@@ -500,17 +531,19 @@ function mapToStyles(_ref2) {
500
531
 
501
532
  offsetParent = offsetParent;
502
533
 
503
- if (placement === top) {
504
- sideY = bottom; // $FlowFixMe[prop-missing]
505
-
506
- y -= offsetParent[heightProp] - popperRect.height;
534
+ if (placement === top || (placement === left || placement === right) && variation === end) {
535
+ sideY = bottom;
536
+ var offsetY = isFixed && win.visualViewport ? win.visualViewport.height : // $FlowFixMe[prop-missing]
537
+ offsetParent[heightProp];
538
+ y -= offsetY - popperRect.height;
507
539
  y *= gpuAcceleration ? 1 : -1;
508
540
  }
509
541
 
510
- if (placement === left) {
511
- sideX = right; // $FlowFixMe[prop-missing]
512
-
513
- x -= offsetParent[widthProp] - popperRect.width;
542
+ if (placement === left || (placement === top || placement === bottom) && variation === end) {
543
+ sideX = right;
544
+ var offsetX = isFixed && win.visualViewport ? win.visualViewport.width : // $FlowFixMe[prop-missing]
545
+ offsetParent[widthProp];
546
+ x -= offsetX - popperRect.width;
514
547
  x *= gpuAcceleration ? 1 : -1;
515
548
  }
516
549
  }
@@ -522,7 +555,7 @@ function mapToStyles(_ref2) {
522
555
  if (gpuAcceleration) {
523
556
  var _Object$assign;
524
557
 
525
- return Object.assign({}, commonStyles, (_Object$assign = {}, _Object$assign[sideY] = hasY ? '0' : '', _Object$assign[sideX] = hasX ? '0' : '', _Object$assign.transform = (win.devicePixelRatio || 1) < 2 ? "translate(" + x + "px, " + y + "px)" : "translate3d(" + x + "px, " + y + "px, 0)", _Object$assign));
558
+ 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));
526
559
  }
527
560
 
528
561
  return Object.assign({}, commonStyles, (_Object$assign2 = {}, _Object$assign2[sideY] = hasY ? y + "px" : '', _Object$assign2[sideX] = hasX ? x + "px" : '', _Object$assign2.transform = '', _Object$assign2));
@@ -550,9 +583,11 @@ function computeStyles(_ref4) {
550
583
 
551
584
  var commonStyles = {
552
585
  placement: getBasePlacement(state.placement),
586
+ variation: getVariation(state.placement),
553
587
  popper: state.elements.popper,
554
588
  popperRect: state.rects.popper,
555
- gpuAcceleration: gpuAcceleration
589
+ gpuAcceleration: gpuAcceleration,
590
+ isFixed: state.options.strategy === 'fixed'
556
591
  };
557
592
 
558
593
  if (state.modifiersData.popperOffsets != null) {
@@ -810,7 +845,7 @@ function getInnerBoundingClientRect(element) {
810
845
  }
811
846
 
812
847
  function getClientRectFromMixedType(element, clippingParent) {
813
- return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isHTMLElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
848
+ return clippingParent === viewport ? rectToClientRect(getViewportRect(element)) : isElement(clippingParent) ? getInnerBoundingClientRect(clippingParent) : rectToClientRect(getDocumentRect(getDocumentElement(element)));
814
849
  } // A "clipping parent" is an overflowable container with the characteristic of
815
850
  // clipping (or hiding) overflowing elements with a position different from
816
851
  // `initial`
@@ -827,7 +862,7 @@ function getClippingParents(element) {
827
862
 
828
863
 
829
864
  return clippingParents.filter(function (clippingParent) {
830
- return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body';
865
+ return isElement(clippingParent) && contains(clippingParent, clipperElement) && getNodeName(clippingParent) !== 'body' && (canEscapeClipping ? getComputedStyle(clippingParent).position !== 'static' : true);
831
866
  });
832
867
  } // Gets the maximum area that the element is visible in due to any number of
833
868
  // clipping parents
@@ -852,10 +887,6 @@ function getClippingRect(element, boundary, rootBoundary) {
852
887
  return clippingRect;
853
888
  }
854
889
 
855
- function getVariation(placement) {
856
- return placement.split('-')[1];
857
- }
858
-
859
890
  function computeOffsets(_ref) {
860
891
  var reference = _ref.reference,
861
892
  element = _ref.element,
@@ -941,11 +972,10 @@ function detectOverflow(state, options) {
941
972
  padding = _options$padding === void 0 ? 0 : _options$padding;
942
973
  var paddingObject = mergePaddingObject(typeof padding !== 'number' ? padding : expandToHashMap(padding, basePlacements));
943
974
  var altContext = elementContext === popper ? reference : popper;
944
- var referenceElement = state.elements.reference;
945
975
  var popperRect = state.rects.popper;
946
976
  var element = state.elements[altBoundary ? altContext : elementContext];
947
977
  var clippingClientRect = getClippingRect(isElement(element) ? element : element.contextElement || getDocumentElement(state.elements.popper), boundary, rootBoundary);
948
- var referenceClientRect = getBoundingClientRect(referenceElement);
978
+ var referenceClientRect = getBoundingClientRect(state.elements.reference);
949
979
  var popperOffsets = computeOffsets({
950
980
  reference: referenceClientRect,
951
981
  element: popperRect,
@@ -1332,6 +1362,14 @@ function preventOverflow(_ref) {
1332
1362
  var tetherOffsetValue = typeof tetherOffset === 'function' ? tetherOffset(Object.assign({}, state.rects, {
1333
1363
  placement: state.placement
1334
1364
  })) : tetherOffset;
1365
+ var normalizedTetherOffsetValue = typeof tetherOffsetValue === 'number' ? {
1366
+ mainAxis: tetherOffsetValue,
1367
+ altAxis: tetherOffsetValue
1368
+ } : Object.assign({
1369
+ mainAxis: 0,
1370
+ altAxis: 0
1371
+ }, tetherOffsetValue);
1372
+ var offsetModifierState = state.modifiersData.offset ? state.modifiersData.offset[state.placement] : null;
1335
1373
  var data = {
1336
1374
  x: 0,
1337
1375
  y: 0
@@ -1341,13 +1379,15 @@ function preventOverflow(_ref) {
1341
1379
  return;
1342
1380
  }
1343
1381
 
1344
- if (checkMainAxis || checkAltAxis) {
1382
+ if (checkMainAxis) {
1383
+ var _offsetModifierState$;
1384
+
1345
1385
  var mainSide = mainAxis === 'y' ? top : left;
1346
1386
  var altSide = mainAxis === 'y' ? bottom : right;
1347
1387
  var len = mainAxis === 'y' ? 'height' : 'width';
1348
1388
  var offset = popperOffsets[mainAxis];
1349
- var min$1 = popperOffsets[mainAxis] + overflow[mainSide];
1350
- var max$1 = popperOffsets[mainAxis] - overflow[altSide];
1389
+ var min$1 = offset + overflow[mainSide];
1390
+ var max$1 = offset - overflow[altSide];
1351
1391
  var additive = tether ? -popperRect[len] / 2 : 0;
1352
1392
  var minLen = variation === start ? referenceRect[len] : popperRect[len];
1353
1393
  var maxLen = variation === start ? -popperRect[len] : -referenceRect[len]; // We need to include the arrow in the calculation so the arrow doesn't go
@@ -1367,36 +1407,45 @@ function preventOverflow(_ref) {
1367
1407
  // width or height)
1368
1408
 
1369
1409
  var arrowLen = within(0, referenceRect[len], arrowRect[len]);
1370
- var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - tetherOffsetValue : minLen - arrowLen - arrowPaddingMin - tetherOffsetValue;
1371
- var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + tetherOffsetValue : maxLen + arrowLen + arrowPaddingMax + tetherOffsetValue;
1410
+ var minOffset = isBasePlacement ? referenceRect[len] / 2 - additive - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis : minLen - arrowLen - arrowPaddingMin - normalizedTetherOffsetValue.mainAxis;
1411
+ var maxOffset = isBasePlacement ? -referenceRect[len] / 2 + additive + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis : maxLen + arrowLen + arrowPaddingMax + normalizedTetherOffsetValue.mainAxis;
1372
1412
  var arrowOffsetParent = state.elements.arrow && getOffsetParent(state.elements.arrow);
1373
1413
  var clientOffset = arrowOffsetParent ? mainAxis === 'y' ? arrowOffsetParent.clientTop || 0 : arrowOffsetParent.clientLeft || 0 : 0;
1374
- var offsetModifierValue = state.modifiersData.offset ? state.modifiersData.offset[state.placement][mainAxis] : 0;
1375
- var tetherMin = popperOffsets[mainAxis] + minOffset - offsetModifierValue - clientOffset;
1376
- var tetherMax = popperOffsets[mainAxis] + maxOffset - offsetModifierValue;
1414
+ var offsetModifierValue = (_offsetModifierState$ = offsetModifierState == null ? void 0 : offsetModifierState[mainAxis]) != null ? _offsetModifierState$ : 0;
1415
+ var tetherMin = offset + minOffset - offsetModifierValue - clientOffset;
1416
+ var tetherMax = offset + maxOffset - offsetModifierValue;
1417
+ var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
1418
+ popperOffsets[mainAxis] = preventedOffset;
1419
+ data[mainAxis] = preventedOffset - offset;
1420
+ }
1377
1421
 
1378
- if (checkMainAxis) {
1379
- var preventedOffset = within(tether ? min(min$1, tetherMin) : min$1, offset, tether ? max(max$1, tetherMax) : max$1);
1380
- popperOffsets[mainAxis] = preventedOffset;
1381
- data[mainAxis] = preventedOffset - offset;
1382
- }
1422
+ if (checkAltAxis) {
1423
+ var _offsetModifierState$2;
1383
1424
 
1384
- if (checkAltAxis) {
1385
- var _mainSide = mainAxis === 'x' ? top : left;
1425
+ var _mainSide = mainAxis === 'x' ? top : left;
1386
1426
 
1387
- var _altSide = mainAxis === 'x' ? bottom : right;
1427
+ var _altSide = mainAxis === 'x' ? bottom : right;
1388
1428
 
1389
- var _offset = popperOffsets[altAxis];
1429
+ var _offset = popperOffsets[altAxis];
1390
1430
 
1391
- var _min = _offset + overflow[_mainSide];
1431
+ var _len = altAxis === 'y' ? 'height' : 'width';
1392
1432
 
1393
- var _max = _offset - overflow[_altSide];
1433
+ var _min = _offset + overflow[_mainSide];
1394
1434
 
1395
- var _preventedOffset = within(tether ? min(_min, tetherMin) : _min, _offset, tether ? max(_max, tetherMax) : _max);
1435
+ var _max = _offset - overflow[_altSide];
1396
1436
 
1397
- popperOffsets[altAxis] = _preventedOffset;
1398
- data[altAxis] = _preventedOffset - _offset;
1399
- }
1437
+ var isOriginSide = [top, left].indexOf(basePlacement) !== -1;
1438
+
1439
+ var _offsetModifierValue = (_offsetModifierState$2 = offsetModifierState == null ? void 0 : offsetModifierState[altAxis]) != null ? _offsetModifierState$2 : 0;
1440
+
1441
+ var _tetherMin = isOriginSide ? _min : _offset - referenceRect[_len] - popperRect[_len] - _offsetModifierValue + normalizedTetherOffsetValue.altAxis;
1442
+
1443
+ var _tetherMax = isOriginSide ? _offset + referenceRect[_len] + popperRect[_len] - _offsetModifierValue - normalizedTetherOffsetValue.altAxis : _max;
1444
+
1445
+ var _preventedOffset = tether && isOriginSide ? withinMaxClamp(_tetherMin, _offset, _tetherMax) : within(tether ? _tetherMin : _min, _offset, tether ? _tetherMax : _max);
1446
+
1447
+ popperOffsets[altAxis] = _preventedOffset;
1448
+ data[altAxis] = _preventedOffset - _offset;
1400
1449
  }
1401
1450
 
1402
1451
  state.modifiersData[name] = data;
@@ -1426,16 +1475,24 @@ function getNodeScroll(node) {
1426
1475
  }
1427
1476
  }
1428
1477
 
1478
+ function isElementScaled(element) {
1479
+ var rect = element.getBoundingClientRect();
1480
+ var scaleX = round(rect.width) / element.offsetWidth || 1;
1481
+ var scaleY = round(rect.height) / element.offsetHeight || 1;
1482
+ return scaleX !== 1 || scaleY !== 1;
1483
+ } // Returns the composite rect of an element relative to its offsetParent.
1429
1484
  // Composite means it takes into account transforms as well as layout.
1430
1485
 
1486
+
1431
1487
  function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
1432
1488
  if (isFixed === void 0) {
1433
1489
  isFixed = false;
1434
1490
  }
1435
1491
 
1436
- var documentElement = getDocumentElement(offsetParent);
1437
- var rect = getBoundingClientRect(elementOrVirtualElement);
1438
1492
  var isOffsetParentAnElement = isHTMLElement(offsetParent);
1493
+ var offsetParentIsScaled = isHTMLElement(offsetParent) && isElementScaled(offsetParent);
1494
+ var documentElement = getDocumentElement(offsetParent);
1495
+ var rect = getBoundingClientRect(elementOrVirtualElement, offsetParentIsScaled);
1439
1496
  var scroll = {
1440
1497
  scrollLeft: 0,
1441
1498
  scrollTop: 0
@@ -1452,7 +1509,7 @@ function getCompositeRect(elementOrVirtualElement, offsetParent, isFixed) {
1452
1509
  }
1453
1510
 
1454
1511
  if (isHTMLElement(offsetParent)) {
1455
- offsets = getBoundingClientRect(offsetParent);
1512
+ offsets = getBoundingClientRect(offsetParent, true);
1456
1513
  offsets.x += offsetParent.clientLeft;
1457
1514
  offsets.y += offsetParent.clientTop;
1458
1515
  } else if (documentElement) {
@@ -1542,7 +1599,10 @@ var MISSING_DEPENDENCY_ERROR = 'Popper: modifier "%s" requires "%s", but "%s" mo
1542
1599
  var VALID_PROPERTIES = ['name', 'enabled', 'phase', 'fn', 'effect', 'requires', 'options'];
1543
1600
  function validateModifiers(modifiers) {
1544
1601
  modifiers.forEach(function (modifier) {
1545
- Object.keys(modifier).forEach(function (key) {
1602
+ [].concat(Object.keys(modifier), VALID_PROPERTIES) // IE11-compatible replacement for `new Set(iterable)`
1603
+ .filter(function (value, index, self) {
1604
+ return self.indexOf(value) === index;
1605
+ }).forEach(function (key) {
1546
1606
  switch (key) {
1547
1607
  case 'name':
1548
1608
  if (typeof modifier.name !== 'string') {
@@ -1556,6 +1616,8 @@ function validateModifiers(modifiers) {
1556
1616
  console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"enabled"', '"boolean"', "\"" + String(modifier.enabled) + "\""));
1557
1617
  }
1558
1618
 
1619
+ break;
1620
+
1559
1621
  case 'phase':
1560
1622
  if (modifierPhases.indexOf(modifier.phase) < 0) {
1561
1623
  console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"phase"', "either " + modifierPhases.join(', '), "\"" + String(modifier.phase) + "\""));
@@ -1571,14 +1633,14 @@ function validateModifiers(modifiers) {
1571
1633
  break;
1572
1634
 
1573
1635
  case 'effect':
1574
- if (typeof modifier.effect !== 'function') {
1636
+ if (modifier.effect != null && typeof modifier.effect !== 'function') {
1575
1637
  console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"effect"', '"function"', "\"" + String(modifier.fn) + "\""));
1576
1638
  }
1577
1639
 
1578
1640
  break;
1579
1641
 
1580
1642
  case 'requires':
1581
- if (!Array.isArray(modifier.requires)) {
1643
+ if (modifier.requires != null && !Array.isArray(modifier.requires)) {
1582
1644
  console.error(format(INVALID_MODIFIER_ERROR, modifier.name, '"requires"', '"array"', "\"" + String(modifier.requires) + "\""));
1583
1645
  }
1584
1646
 
@@ -1688,7 +1750,8 @@ function popperGenerator(generatorOptions) {
1688
1750
  var isDestroyed = false;
1689
1751
  var instance = {
1690
1752
  state: state,
1691
- setOptions: function setOptions(options) {
1753
+ setOptions: function setOptions(setOptionsAction) {
1754
+ var options = typeof setOptionsAction === 'function' ? setOptionsAction(state.options) : setOptionsAction;
1692
1755
  cleanupModifierEffects();
1693
1756
  state.options = Object.assign({}, defaultOptions, state.options, options);
1694
1757
  state.scrollParents = {
@@ -1887,7 +1950,7 @@ var createPopper = /*#__PURE__*/popperGenerator({
1887
1950
  }); // eslint-disable-next-line import/no-unused-modules
1888
1951
 
1889
1952
  /**!
1890
- * tippy.js v6.3.1
1953
+ * tippy.js v6.3.7
1891
1954
  * (c) 2017-2021 atomiks
1892
1955
  * MIT License
1893
1956
  */
@@ -1902,6 +1965,9 @@ var TOUCH_OPTIONS = {
1902
1965
  passive: true,
1903
1966
  capture: true
1904
1967
  };
1968
+ var TIPPY_DEFAULT_APPEND_TO = function TIPPY_DEFAULT_APPEND_TO() {
1969
+ return document.body;
1970
+ };
1905
1971
 
1906
1972
  function hasOwnProperty(obj, key) {
1907
1973
  return {}.hasOwnProperty.call(obj, key);
@@ -2027,7 +2093,7 @@ function getOwnerDocument(elementOrElements) {
2027
2093
  element = _normalizeToArray[0]; // Elements created via a <template> have an ownerDocument with no reference to the body
2028
2094
 
2029
2095
 
2030
- return (element == null ? void 0 : (_element$ownerDocumen = element.ownerDocument) == null ? void 0 : _element$ownerDocumen.body) ? element.ownerDocument : document;
2096
+ return element != null && (_element$ownerDocumen = element.ownerDocument) != null && _element$ownerDocumen.body ? element.ownerDocument : document;
2031
2097
  }
2032
2098
  function isCursorOutsideInteractiveBorder(popperTreeData, event) {
2033
2099
  var clientX = event.clientX,
@@ -2063,6 +2129,26 @@ function updateTransitionEndListener(box, action, listener) {
2063
2129
  box[method](event, listener);
2064
2130
  });
2065
2131
  }
2132
+ /**
2133
+ * Compared to xxx.contains, this function works for dom structures with shadow
2134
+ * dom
2135
+ */
2136
+
2137
+ function actualContains(parent, child) {
2138
+ var target = child;
2139
+
2140
+ while (target) {
2141
+ var _target$getRootNode;
2142
+
2143
+ if (parent.contains(target)) {
2144
+ return true;
2145
+ }
2146
+
2147
+ target = target.getRootNode == null ? void 0 : (_target$getRootNode = target.getRootNode()) == null ? void 0 : _target$getRootNode.host;
2148
+ }
2149
+
2150
+ return false;
2151
+ }
2066
2152
 
2067
2153
  var currentInput = {
2068
2154
  isTouch: false
@@ -2126,8 +2212,8 @@ function bindGlobalEventListeners() {
2126
2212
  }
2127
2213
 
2128
2214
  var isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined';
2129
- var ua = isBrowser ? navigator.userAgent : '';
2130
- var isIE = /MSIE |Trident\//.test(ua);
2215
+ var isIE11 = isBrowser ? // @ts-ignore
2216
+ !!window.msCrypto : false;
2131
2217
 
2132
2218
  function createMemoryLeakWarning(method) {
2133
2219
  var txt = method === 'destroy' ? 'n already-' : ' ';
@@ -2202,9 +2288,7 @@ var renderProps = {
2202
2288
  zIndex: 9999
2203
2289
  };
2204
2290
  var defaultProps = Object.assign({
2205
- appendTo: function appendTo() {
2206
- return document.body;
2207
- },
2291
+ appendTo: TIPPY_DEFAULT_APPEND_TO,
2208
2292
  aria: {
2209
2293
  content: 'auto',
2210
2294
  expanded: 'auto'
@@ -2239,7 +2323,7 @@ var defaultProps = Object.assign({
2239
2323
  touch: true,
2240
2324
  trigger: 'mouseenter focus',
2241
2325
  triggerTarget: null
2242
- }, pluginProps, {}, renderProps);
2326
+ }, pluginProps, renderProps);
2243
2327
  var defaultKeys = Object.keys(defaultProps);
2244
2328
  var setDefaultProps = function setDefaultProps(partialProps) {
2245
2329
  /* istanbul ignore else */
@@ -2259,12 +2343,14 @@ function getExtendedPassedProps(passedProps) {
2259
2343
  defaultValue = plugin.defaultValue;
2260
2344
 
2261
2345
  if (name) {
2262
- acc[name] = passedProps[name] !== undefined ? passedProps[name] : defaultValue;
2346
+ var _name;
2347
+
2348
+ acc[name] = passedProps[name] !== undefined ? passedProps[name] : (_name = defaultProps[name]) != null ? _name : defaultValue;
2263
2349
  }
2264
2350
 
2265
2351
  return acc;
2266
2352
  }, {});
2267
- return Object.assign({}, passedProps, {}, pluginProps);
2353
+ return Object.assign({}, passedProps, pluginProps);
2268
2354
  }
2269
2355
  function getDataAttributeProps(reference, plugins) {
2270
2356
  var propKeys = plugins ? Object.keys(getExtendedPassedProps(Object.assign({}, defaultProps, {
@@ -2295,7 +2381,7 @@ function evaluateProps(reference, props) {
2295
2381
  var out = Object.assign({}, props, {
2296
2382
  content: invokeWithArgsOrReturn(props.content, [reference])
2297
2383
  }, props.ignoreAttributes ? {} : getDataAttributeProps(reference, props.plugins));
2298
- out.aria = Object.assign({}, defaultProps.aria, {}, out.aria);
2384
+ out.aria = Object.assign({}, defaultProps.aria, out.aria);
2299
2385
  out.aria = {
2300
2386
  expanded: out.aria.expanded === 'auto' ? props.interactive : out.aria.expanded,
2301
2387
  content: out.aria.content === 'auto' ? props.interactive ? null : 'describedby' : out.aria.content
@@ -2456,7 +2542,7 @@ var mouseMoveListeners = []; // Used by `hideAll()`
2456
2542
 
2457
2543
  var mountedInstances = [];
2458
2544
  function createTippy(reference, passedProps) {
2459
- var props = evaluateProps(reference, Object.assign({}, defaultProps, {}, getExtendedPassedProps(removeUndefinedProps(passedProps)))); // ===========================================================================
2545
+ var props = evaluateProps(reference, Object.assign({}, defaultProps, getExtendedPassedProps(removeUndefinedProps(passedProps)))); // ===========================================================================
2460
2546
  // 🔒 Private members
2461
2547
  // ===========================================================================
2462
2548
 
@@ -2556,10 +2642,9 @@ function createTippy(reference, passedProps) {
2556
2642
  instance.clearDelayTimeouts();
2557
2643
  }
2558
2644
  });
2559
- popper.addEventListener('mouseleave', function (event) {
2645
+ popper.addEventListener('mouseleave', function () {
2560
2646
  if (instance.props.interactive && instance.props.trigger.indexOf('mouseenter') >= 0) {
2561
2647
  getDocument().addEventListener('mousemove', debouncedOnMouseMove);
2562
- debouncedOnMouseMove(event);
2563
2648
  }
2564
2649
  });
2565
2650
  return instance; // ===========================================================================
@@ -2579,7 +2664,7 @@ function createTippy(reference, passedProps) {
2579
2664
  var _instance$props$rende;
2580
2665
 
2581
2666
  // @ts-ignore
2582
- return !!((_instance$props$rende = instance.props.render) == null ? void 0 : _instance$props$rende.$$tippy);
2667
+ return !!((_instance$props$rende = instance.props.render) != null && _instance$props$rende.$$tippy);
2583
2668
  }
2584
2669
 
2585
2670
  function getCurrentTarget() {
@@ -2606,8 +2691,12 @@ function createTippy(reference, passedProps) {
2606
2691
  return getValueAtIndexOrReturn(instance.props.delay, isShow ? 0 : 1, defaultProps.delay);
2607
2692
  }
2608
2693
 
2609
- function handleStyles() {
2610
- popper.style.pointerEvents = instance.props.interactive && instance.state.isVisible ? '' : 'none';
2694
+ function handleStyles(fromHide) {
2695
+ if (fromHide === void 0) {
2696
+ fromHide = false;
2697
+ }
2698
+
2699
+ popper.style.pointerEvents = instance.props.interactive && !fromHide ? '' : 'none';
2611
2700
  popper.style.zIndex = "" + instance.props.zIndex;
2612
2701
  }
2613
2702
 
@@ -2618,7 +2707,7 @@ function createTippy(reference, passedProps) {
2618
2707
 
2619
2708
  pluginsHooks.forEach(function (pluginHooks) {
2620
2709
  if (pluginHooks[hook]) {
2621
- pluginHooks[hook].apply(void 0, args);
2710
+ pluginHooks[hook].apply(pluginHooks, args);
2622
2711
  }
2623
2712
  });
2624
2713
 
@@ -2684,15 +2773,18 @@ function createTippy(reference, passedProps) {
2684
2773
  if (didTouchMove || event.type === 'mousedown') {
2685
2774
  return;
2686
2775
  }
2687
- } // Clicked on interactive popper
2776
+ }
2688
2777
 
2778
+ var actualTarget = event.composedPath && event.composedPath()[0] || event.target; // Clicked on interactive popper
2689
2779
 
2690
- if (instance.props.interactive && popper.contains(event.target)) {
2780
+ if (instance.props.interactive && actualContains(popper, actualTarget)) {
2691
2781
  return;
2692
2782
  } // Clicked on the event listeners target
2693
2783
 
2694
2784
 
2695
- if (getCurrentTarget().contains(event.target)) {
2785
+ if (normalizeToArray(instance.props.triggerTarget || reference).some(function (el) {
2786
+ return actualContains(el, actualTarget);
2787
+ })) {
2696
2788
  if (currentInput.isTouch) {
2697
2789
  return;
2698
2790
  }
@@ -2820,7 +2912,7 @@ function createTippy(reference, passedProps) {
2820
2912
  break;
2821
2913
 
2822
2914
  case 'focus':
2823
- on(isIE ? 'focusout' : 'blur', onBlurOrFocusOut);
2915
+ on(isIE11 ? 'focusout' : 'blur', onBlurOrFocusOut);
2824
2916
  break;
2825
2917
 
2826
2918
  case 'focusin':
@@ -3046,7 +3138,7 @@ function createTippy(reference, passedProps) {
3046
3138
 
3047
3139
  var node = getCurrentTarget();
3048
3140
 
3049
- if (instance.props.interactive && appendTo === defaultProps.appendTo || appendTo === 'parent') {
3141
+ if (instance.props.interactive && appendTo === TIPPY_DEFAULT_APPEND_TO || appendTo === 'parent') {
3050
3142
  parentNode = node.parentNode;
3051
3143
  } else {
3052
3144
  parentNode = invokeWithArgsOrReturn(appendTo, [node]);
@@ -3058,6 +3150,7 @@ function createTippy(reference, passedProps) {
3058
3150
  parentNode.appendChild(popper);
3059
3151
  }
3060
3152
 
3153
+ instance.state.isMounted = true;
3061
3154
  createPopperInstance();
3062
3155
  /* istanbul ignore else */
3063
3156
 
@@ -3165,7 +3258,7 @@ function createTippy(reference, passedProps) {
3165
3258
  invokeHook('onBeforeUpdate', [instance, partialProps]);
3166
3259
  removeListeners();
3167
3260
  var prevProps = instance.props;
3168
- var nextProps = evaluateProps(reference, Object.assign({}, instance.props, {}, partialProps, {
3261
+ var nextProps = evaluateProps(reference, Object.assign({}, prevProps, removeUndefinedProps(partialProps), {
3169
3262
  ignoreAttributes: true
3170
3263
  }));
3171
3264
  instance.props = nextProps;
@@ -3294,7 +3387,6 @@ function createTippy(reference, passedProps) {
3294
3387
  // popper has been positioned for the first time
3295
3388
 
3296
3389
  (_instance$popperInsta2 = instance.popperInstance) == null ? void 0 : _instance$popperInsta2.forceUpdate();
3297
- instance.state.isMounted = true;
3298
3390
  invokeHook('onMount', [instance]);
3299
3391
 
3300
3392
  if (instance.props.animation && getIsDefaultRenderFn()) {
@@ -3341,7 +3433,7 @@ function createTippy(reference, passedProps) {
3341
3433
 
3342
3434
  cleanupInteractiveMouseListeners();
3343
3435
  removeDocumentPress();
3344
- handleStyles();
3436
+ handleStyles(true);
3345
3437
 
3346
3438
  if (getIsDefaultRenderFn()) {
3347
3439
  var _getDefaultTemplateCh4 = getDefaultTemplateChildren(),
@@ -3515,11 +3607,20 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
3515
3607
 
3516
3608
  var individualInstances = tippyInstances;
3517
3609
  var references = [];
3610
+ var triggerTargets = [];
3518
3611
  var currentTarget;
3519
3612
  var overrides = optionalProps.overrides;
3520
3613
  var interceptSetPropsCleanups = [];
3521
3614
  var shownOnCreate = false;
3522
3615
 
3616
+ function setTriggerTargets() {
3617
+ triggerTargets = individualInstances.map(function (instance) {
3618
+ return normalizeToArray(instance.props.triggerTarget || instance.reference);
3619
+ }).reduce(function (acc, item) {
3620
+ return acc.concat(item);
3621
+ }, []);
3622
+ }
3623
+
3523
3624
  function setReferences() {
3524
3625
  references = individualInstances.map(function (instance) {
3525
3626
  return instance.reference;
@@ -3556,7 +3657,7 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
3556
3657
 
3557
3658
 
3558
3659
  function prepareInstance(singleton, target) {
3559
- var index = references.indexOf(target); // bail-out
3660
+ var index = triggerTargets.indexOf(target); // bail-out
3560
3661
 
3561
3662
  if (target === currentTarget) {
3562
3663
  return;
@@ -3569,13 +3670,16 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
3569
3670
  }, {});
3570
3671
  singleton.setProps(Object.assign({}, overrideProps, {
3571
3672
  getReferenceClientRect: typeof overrideProps.getReferenceClientRect === 'function' ? overrideProps.getReferenceClientRect : function () {
3572
- return target.getBoundingClientRect();
3673
+ var _references$index;
3674
+
3675
+ return (_references$index = references[index]) == null ? void 0 : _references$index.getBoundingClientRect();
3573
3676
  }
3574
3677
  }));
3575
3678
  }
3576
3679
 
3577
3680
  enableInstances(false);
3578
3681
  setReferences();
3682
+ setTriggerTargets();
3579
3683
  var plugin = {
3580
3684
  fn: function fn() {
3581
3685
  return {
@@ -3605,7 +3709,7 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
3605
3709
  };
3606
3710
  var singleton = tippy(div(), Object.assign({}, removeProperties(optionalProps, ['overrides']), {
3607
3711
  plugins: [plugin].concat(optionalProps.plugins || []),
3608
- triggerTarget: references,
3712
+ triggerTarget: triggerTargets,
3609
3713
  popperOptions: Object.assign({}, optionalProps.popperOptions, {
3610
3714
  modifiers: [].concat(((_optionalProps$popper = optionalProps.popperOptions) == null ? void 0 : _optionalProps$popper.modifiers) || [], [applyStylesModifier])
3611
3715
  })
@@ -3632,13 +3736,13 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
3632
3736
  } // target is a child tippy instance
3633
3737
 
3634
3738
 
3635
- if (individualInstances.includes(target)) {
3739
+ if (individualInstances.indexOf(target) >= 0) {
3636
3740
  var ref = target.reference;
3637
3741
  return prepareInstance(singleton, ref);
3638
3742
  } // target is a ReferenceElement
3639
3743
 
3640
3744
 
3641
- if (references.includes(target)) {
3745
+ if (references.indexOf(target) >= 0) {
3642
3746
  return prepareInstance(singleton, target);
3643
3747
  }
3644
3748
  };
@@ -3681,9 +3785,10 @@ var createSingleton = function createSingleton(tippyInstances, optionalProps) {
3681
3785
  individualInstances = nextInstances;
3682
3786
  enableInstances(false);
3683
3787
  setReferences();
3684
- interceptSetProps(singleton);
3788
+ setTriggerTargets();
3789
+ interceptSetPropsCleanups = interceptSetProps(singleton);
3685
3790
  singleton.setProps({
3686
- triggerTarget: references
3791
+ triggerTarget: triggerTargets
3687
3792
  });
3688
3793
  };
3689
3794
 
@@ -3698,7 +3803,7 @@ var animateFill = {
3698
3803
  var _instance$props$rende;
3699
3804
 
3700
3805
  // @ts-ignore
3701
- if (!((_instance$props$rende = instance.props.render) == null ? void 0 : _instance$props$rende.$$tippy)) {
3806
+ if (!((_instance$props$rende = instance.props.render) != null && _instance$props$rende.$$tippy)) {
3702
3807
  if (process.env.NODE_ENV !== "production") {
3703
3808
  errorWhen(instance.props.animateFill, 'The `animateFill` plugin requires the default render function.');
3704
3809
  }
@@ -3823,6 +3928,7 @@ var followCursor = {
3823
3928
 
3824
3929
  if (isCursorOverReference || !instance.props.interactive) {
3825
3930
  instance.setProps({
3931
+ // @ts-ignore - unneeded DOMRect properties
3826
3932
  getReferenceClientRect: function getReferenceClientRect() {
3827
3933
  var rect = reference.getBoundingClientRect();
3828
3934
  var x = clientX;
@@ -3959,6 +4065,7 @@ var inlinePositioning = {
3959
4065
  var placement;
3960
4066
  var cursorRectIndex = -1;
3961
4067
  var isInternalUpdate = false;
4068
+ var triedPlacements = [];
3962
4069
  var modifier = {
3963
4070
  name: 'tippyInlinePositioning',
3964
4071
  enabled: true,
@@ -3967,8 +4074,14 @@ var inlinePositioning = {
3967
4074
  var state = _ref2.state;
3968
4075
 
3969
4076
  if (isEnabled()) {
3970
- if (placement !== state.placement) {
4077
+ if (triedPlacements.indexOf(state.placement) !== -1) {
4078
+ triedPlacements = [];
4079
+ }
4080
+
4081
+ if (placement !== state.placement && triedPlacements.indexOf(state.placement) === -1) {
4082
+ triedPlacements.push(state.placement);
3971
4083
  instance.setProps({
4084
+ // @ts-ignore - unneeded DOMRect properties
3972
4085
  getReferenceClientRect: function getReferenceClientRect() {
3973
4086
  return _getReferenceClientRect(state.placement);
3974
4087
  }
@@ -4005,10 +4118,11 @@ var inlinePositioning = {
4005
4118
  var cursorRect = rects.find(function (rect) {
4006
4119
  return rect.left - 2 <= event.clientX && rect.right + 2 >= event.clientX && rect.top - 2 <= event.clientY && rect.bottom + 2 >= event.clientY;
4007
4120
  });
4008
- cursorRectIndex = rects.indexOf(cursorRect);
4121
+ var index = rects.indexOf(cursorRect);
4122
+ cursorRectIndex = index > -1 ? index : cursorRectIndex;
4009
4123
  }
4010
4124
  },
4011
- onUntrigger: function onUntrigger() {
4125
+ onHidden: function onHidden() {
4012
4126
  cursorRectIndex = -1;
4013
4127
  }
4014
4128
  };
@@ -4154,6 +4268,13 @@ tippy.setDefaultProps({
4154
4268
  function useTippy(el, opts = {}, settings = { mount: true }) {
4155
4269
  const vm = vue.getCurrentInstance();
4156
4270
  const instance = vue.ref();
4271
+ const state = vue.ref({
4272
+ isEnabled: false,
4273
+ isVisible: false,
4274
+ isDestroyed: false,
4275
+ isMounted: false,
4276
+ isShown: false,
4277
+ });
4157
4278
  let container = null;
4158
4279
  const getContainer = () => {
4159
4280
  if (container)
@@ -4205,6 +4326,38 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
4205
4326
  ? options.triggerTarget.value
4206
4327
  : options.triggerTarget;
4207
4328
  }
4329
+ options.plugins.push({
4330
+ fn() {
4331
+ return {
4332
+ onCreate() {
4333
+ state.value.isEnabled = true;
4334
+ },
4335
+ onMount() {
4336
+ state.value.isMounted = true;
4337
+ },
4338
+ onShow() {
4339
+ state.value.isMounted = true;
4340
+ state.value.isVisible = true;
4341
+ },
4342
+ onShown() {
4343
+ state.value.isShown = true;
4344
+ },
4345
+ onHide() {
4346
+ state.value.isMounted = false;
4347
+ state.value.isVisible = false;
4348
+ },
4349
+ onHidden() {
4350
+ state.value.isShown = false;
4351
+ },
4352
+ onUnmounted() {
4353
+ state.value.isMounted = false;
4354
+ },
4355
+ onDestroy() {
4356
+ state.value.isDestroyed = true;
4357
+ },
4358
+ };
4359
+ }
4360
+ });
4208
4361
  return options;
4209
4362
  };
4210
4363
  const refresh = () => {
@@ -4243,10 +4396,12 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
4243
4396
  const disable = () => {
4244
4397
  var _a;
4245
4398
  (_a = instance.value) === null || _a === void 0 ? void 0 : _a.disable();
4399
+ state.value.isEnabled = false;
4246
4400
  };
4247
4401
  const enable = () => {
4248
4402
  var _a;
4249
4403
  (_a = instance.value) === null || _a === void 0 ? void 0 : _a.enable();
4404
+ state.value.isEnabled = true;
4250
4405
  };
4251
4406
  const unmount = () => {
4252
4407
  var _a;
@@ -4277,6 +4432,7 @@ function useTippy(el, opts = {}, settings = { mount: true }) {
4277
4432
  enable,
4278
4433
  unmount,
4279
4434
  mount,
4435
+ state,
4280
4436
  };
4281
4437
  if (settings.mount) {
4282
4438
  if (vm) {
@@ -4395,9 +4551,11 @@ props['contentClass'] = {
4395
4551
  };
4396
4552
  const TippyComponent = vue.defineComponent({
4397
4553
  props,
4398
- setup(props, { slots }) {
4554
+ emits: ['state'],
4555
+ setup(props, { slots, emit }) {
4399
4556
  const elem = vue.ref();
4400
4557
  const contentElem = vue.ref();
4558
+ const mounted = vue.ref(false);
4401
4559
  let options = { ...props };
4402
4560
  for (const prop of ['to', 'tag', 'contentTag', 'contentClass']) {
4403
4561
  if (options.hasOwnProperty(prop)) {
@@ -4407,7 +4565,7 @@ const TippyComponent = vue.defineComponent({
4407
4565
  }
4408
4566
  let target = elem;
4409
4567
  if (props.to) {
4410
- if (props.to instanceof Element) {
4568
+ if (typeof Element !== 'undefined' && props.to instanceof Element) {
4411
4569
  target = () => props.to;
4412
4570
  }
4413
4571
  else if (typeof props.to === 'string' || props.to instanceof String) {
@@ -4416,16 +4574,22 @@ const TippyComponent = vue.defineComponent({
4416
4574
  }
4417
4575
  const tippy = useTippy(target, options);
4418
4576
  vue.onMounted(() => {
4419
- if (slots.content)
4420
- tippy.setContent(() => contentElem.value);
4577
+ mounted.value = true;
4578
+ vue.nextTick(() => {
4579
+ if (slots.content)
4580
+ tippy.setContent(() => contentElem.value);
4581
+ });
4421
4582
  });
4422
- return { elem, contentElem, ...tippy };
4583
+ vue.watch(tippy.state, () => {
4584
+ emit('state', vue.unref(tippy.state));
4585
+ }, { immediate: true, deep: true });
4586
+ return { elem, contentElem, mounted, ...tippy };
4423
4587
  },
4424
4588
  render() {
4425
4589
  let slot = this.$slots.default ? this.$slots.default(this) : [];
4426
4590
  return vue.h(this.tag, { ref: 'elem', 'data-v-tippy': '' }, this.$slots.content ? [
4427
4591
  slot,
4428
- vue.h(this.contentTag, { ref: 'contentElem', class: this.contentClass }, this.$slots.content(this))
4592
+ vue.h(this.contentTag, { ref: 'contentElem', style: { display: this.mounted ? 'inherit' : 'none' }, class: this.contentClass }, this.$slots.content(this)),
4429
4593
  ] : slot);
4430
4594
  },
4431
4595
  });