@vonage/vivid 4.9.0 → 4.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/custom-elements.json +2792 -83
  2. package/lib/badge/badge.d.ts +1 -1
  3. package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
  4. package/lib/button/button.d.ts +1 -1
  5. package/lib/checkbox/checkbox.d.ts +8 -2
  6. package/lib/checkbox/checkbox.form-associated.d.ts +10 -0
  7. package/lib/dialog/dialog.d.ts +4 -0
  8. package/lib/divider/divider.d.ts +11 -2
  9. package/lib/enums.d.ts +1 -0
  10. package/lib/fab/fab.d.ts +1 -1
  11. package/lib/file-picker/file-picker.d.ts +3 -0
  12. package/lib/icon/icon.d.ts +2 -1
  13. package/lib/slider/slider.d.ts +30 -6
  14. package/lib/slider/slider.form-associated.d.ts +10 -0
  15. package/lib/split-button/split-button.d.ts +1 -1
  16. package/lib/tabs/tabs.d.ts +1 -0
  17. package/lib/text-field/text-field.d.ts +1 -0
  18. package/package.json +1 -1
  19. package/shared/aria-global2.cjs +93 -0
  20. package/shared/aria-global2.js +91 -0
  21. package/shared/breadcrumb-item.cjs +2 -89
  22. package/shared/breadcrumb-item.js +1 -88
  23. package/shared/definition11.cjs +201 -5
  24. package/shared/definition11.js +199 -4
  25. package/shared/definition15.cjs +49 -90
  26. package/shared/definition15.js +50 -91
  27. package/shared/definition16.cjs +9 -7
  28. package/shared/definition16.js +9 -7
  29. package/shared/definition20.cjs +16 -11
  30. package/shared/definition20.js +16 -11
  31. package/shared/definition21.cjs +34 -4
  32. package/shared/definition21.js +34 -4
  33. package/shared/definition22.cjs +32 -51
  34. package/shared/definition22.js +33 -52
  35. package/shared/definition24.cjs +156 -2
  36. package/shared/definition24.js +157 -3
  37. package/shared/definition25.cjs +106 -56
  38. package/shared/definition25.js +106 -56
  39. package/shared/definition29.cjs +1 -1
  40. package/shared/definition29.js +1 -1
  41. package/shared/definition30.cjs +1 -1
  42. package/shared/definition30.js +1 -1
  43. package/shared/definition35.cjs +2 -2
  44. package/shared/definition35.js +2 -2
  45. package/shared/definition37.cjs +1 -1
  46. package/shared/definition37.js +1 -1
  47. package/shared/definition4.cjs +5 -6
  48. package/shared/definition4.js +1 -2
  49. package/shared/definition40.cjs +11 -4
  50. package/shared/definition40.js +8 -1
  51. package/shared/definition42.cjs +3 -22
  52. package/shared/definition42.js +2 -21
  53. package/shared/definition43.cjs +1 -2
  54. package/shared/definition43.js +1 -2
  55. package/shared/definition44.js +1 -1
  56. package/shared/definition47.cjs +369 -502
  57. package/shared/definition47.js +370 -503
  58. package/shared/definition5.cjs +5 -5
  59. package/shared/definition5.js +2 -2
  60. package/shared/definition51.cjs +1 -1
  61. package/shared/definition51.js +1 -1
  62. package/shared/definition52.cjs +63 -26
  63. package/shared/definition52.js +63 -26
  64. package/shared/definition56.cjs +45 -43
  65. package/shared/definition56.js +45 -43
  66. package/shared/definition57.cjs +1 -1
  67. package/shared/definition57.js +1 -1
  68. package/shared/definition64.cjs +242 -79
  69. package/shared/definition64.js +242 -79
  70. package/shared/definition7.cjs +1 -1
  71. package/shared/definition7.js +1 -1
  72. package/shared/definition8.cjs +1 -1
  73. package/shared/definition8.js +1 -1
  74. package/shared/enums.cjs +1 -0
  75. package/shared/enums.js +1 -0
  76. package/shared/form-associated.js +1 -1
  77. package/shared/{patterns → foundation/anchor}/anchor.d.ts +1 -1
  78. package/shared/foundation/button/button.d.ts +27 -0
  79. package/shared/foundation/button/button.template.d.ts +4 -0
  80. package/shared/foundation/button/index.d.ts +2 -0
  81. package/shared/foundation/patterns/index.d.ts +1 -0
  82. package/shared/icon.cjs +11 -5
  83. package/shared/icon.js +11 -5
  84. package/shared/index.cjs +22 -2
  85. package/shared/index.js +22 -2
  86. package/shared/key-codes2.js +1 -1
  87. package/shared/patterns/form-elements/form-elements.d.ts +6 -6
  88. package/shared/presentationDate.cjs +4328 -4042
  89. package/shared/presentationDate.js +4327 -4041
  90. package/shared/slider.template.cjs +23 -1
  91. package/shared/slider.template.js +21 -2
  92. package/styles/core/all.css +1 -1
  93. package/styles/core/theme.css +1 -1
  94. package/styles/core/typography.css +1 -1
  95. package/styles/tokens/theme-dark.css +35 -14
  96. package/styles/tokens/theme-light.css +35 -14
  97. package/styles/tokens/vivid-2-compat.css +1 -1
  98. package/vivid.api.json +62 -5
  99. package/shared/aria2.cjs +0 -11
  100. package/shared/aria2.js +0 -9
  101. package/shared/button.cjs +0 -202
  102. package/shared/button.js +0 -200
  103. /package/shared/{patterns → foundation/patterns}/aria-global.d.ts +0 -0
@@ -1,10 +1,15 @@
1
1
  import { F as FoundationElement, D as DOM, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
2
- import { B as Button, a as buttonRegistries } from './definition11.js';
2
+ import { c as Button, a as buttonRegistries } from './definition11.js';
3
3
  import { E as Elevation, e as elevationRegistries } from './definition63.js';
4
4
  import { r as ref } from './ref.js';
5
5
  import { w as when } from './when.js';
6
6
  import { c as classNames } from './class-names.js';
7
7
 
8
+ /**
9
+ * Custom positioning reference element.
10
+ * @see https://floating-ui.com/docs/virtual-elements
11
+ */
12
+
8
13
  const sides = ['top', 'right', 'bottom', 'left'];
9
14
  const alignments = ['start', 'end'];
10
15
  const placements = /*#__PURE__*/sides.reduce((acc, side) => acc.concat(side, side + "-" + alignments[0], side + "-" + alignments[1]), []);
@@ -119,12 +124,21 @@ function getPaddingObject(padding) {
119
124
  };
120
125
  }
121
126
  function rectToClientRect(rect) {
127
+ const {
128
+ x,
129
+ y,
130
+ width,
131
+ height
132
+ } = rect;
122
133
  return {
123
- ...rect,
124
- top: rect.y,
125
- left: rect.x,
126
- right: rect.x + rect.width,
127
- bottom: rect.y + rect.height
134
+ width,
135
+ height,
136
+ top: y,
137
+ left: x,
138
+ right: x + width,
139
+ bottom: y + height,
140
+ x,
141
+ y
128
142
  };
129
143
  }
130
144
 
@@ -186,7 +200,7 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
186
200
 
187
201
  /**
188
202
  * Computes the `x` and `y` coordinates that will place the floating element
189
- * next to a reference element when it is given a certain positioning strategy.
203
+ * next to a given reference element.
190
204
  *
191
205
  * This export does not have any `platform` interface logic. You will need to
192
206
  * write one for the platform you are using Floating UI with.
@@ -264,7 +278,6 @@ const computePosition$1 = async (reference, floating, config) => {
264
278
  } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
265
279
  }
266
280
  i = -1;
267
- continue;
268
281
  }
269
282
  }
270
283
  return {
@@ -314,9 +327,10 @@ async function detectOverflow(state, options) {
314
327
  strategy
315
328
  }));
316
329
  const rect = elementContext === 'floating' ? {
317
- ...rects.floating,
318
330
  x,
319
- y
331
+ y,
332
+ width: rects.floating.width,
333
+ height: rects.floating.height
320
334
  } : rects.reference;
321
335
  const offsetParent = await (platform.getOffsetParent == null ? void 0 : platform.getOffsetParent(elements.floating));
322
336
  const offsetScale = (await (platform.isElement == null ? void 0 : platform.isElement(offsetParent))) ? (await (platform.getScale == null ? void 0 : platform.getScale(offsetParent))) || {
@@ -327,6 +341,7 @@ async function detectOverflow(state, options) {
327
341
  y: 1
328
342
  };
329
343
  const elementClientRect = rectToClientRect(platform.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform.convertOffsetParentRelativeRectToViewportRelativeRect({
344
+ elements,
330
345
  rect,
331
346
  offsetParent,
332
347
  strategy
@@ -344,7 +359,7 @@ async function detectOverflow(state, options) {
344
359
  * appears centered to the reference element.
345
360
  * @see https://floating-ui.com/docs/arrow
346
361
  */
347
- const arrow = options => ({
362
+ const arrow$1 = options => ({
348
363
  name: 'arrow',
349
364
  options,
350
365
  async fn(state) {
@@ -405,7 +420,7 @@ const arrow = options => ({
405
420
  // to point to nothing for an aligned placement, adjust the offset of the
406
421
  // floating element itself. To ensure `shift()` continues to take action,
407
422
  // a single reset is performed when this is true.
408
- const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center != offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
423
+ const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
409
424
  const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max : 0;
410
425
  return {
411
426
  [axis]: coords[axis] + alignmentOffset,
@@ -436,7 +451,7 @@ function getPlacementList(alignment, autoAlignment, allowedPlacements) {
436
451
  * preferred placement. Alternative to `flip`.
437
452
  * @see https://floating-ui.com/docs/autoPlacement
438
453
  */
439
- const autoPlacement = function (options) {
454
+ const autoPlacement$1 = function (options) {
440
455
  if (options === void 0) {
441
456
  options = {};
442
457
  }
@@ -530,7 +545,7 @@ const autoPlacement = function (options) {
530
545
  * clipping boundary. Alternative to `autoPlacement`.
531
546
  * @see https://floating-ui.com/docs/flip
532
547
  */
533
- const flip = function (options) {
548
+ const flip$1 = function (options) {
534
549
  if (options === void 0) {
535
550
  options = {};
536
551
  }
@@ -565,10 +580,12 @@ const flip = function (options) {
565
580
  return {};
566
581
  }
567
582
  const side = getSide(placement);
583
+ const initialSideAxis = getSideAxis(initialPlacement);
568
584
  const isBasePlacement = getSide(initialPlacement) === initialPlacement;
569
585
  const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
570
586
  const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
571
- if (!specifiedFallbackPlacements && fallbackAxisSideDirection !== 'none') {
587
+ const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== 'none';
588
+ if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
572
589
  fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
573
590
  }
574
591
  const placements = [initialPlacement, ...fallbackPlacements];
@@ -614,8 +631,17 @@ const flip = function (options) {
614
631
  switch (fallbackStrategy) {
615
632
  case 'bestFit':
616
633
  {
617
- var _overflowsData$map$so;
618
- const placement = (_overflowsData$map$so = overflowsData.map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$map$so[0];
634
+ var _overflowsData$filter2;
635
+ const placement = (_overflowsData$filter2 = overflowsData.filter(d => {
636
+ if (hasFallbackAxisSideDirection) {
637
+ const currentSideAxis = getSideAxis(d.placement);
638
+ return currentSideAxis === initialSideAxis ||
639
+ // Create a bias to the `y` side axis due to horizontal
640
+ // reading directions favoring greater width.
641
+ currentSideAxis === 'y';
642
+ }
643
+ return true;
644
+ }).map(d => [d.placement, d.overflows.filter(overflow => overflow > 0).reduce((acc, overflow) => acc + overflow, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
619
645
  if (placement) {
620
646
  resetPlacement = placement;
621
647
  }
@@ -655,7 +681,7 @@ function isAnySideFullyClipped(overflow) {
655
681
  * when it is not in the same clipping context as the reference element.
656
682
  * @see https://floating-ui.com/docs/hide
657
683
  */
658
- const hide = function (options) {
684
+ const hide$1 = function (options) {
659
685
  if (options === void 0) {
660
686
  options = {};
661
687
  }
@@ -740,7 +766,7 @@ function getRectsByLine(rects) {
740
766
  * over multiple lines, such as hyperlinks or range selections.
741
767
  * @see https://floating-ui.com/docs/inline
742
768
  */
743
- const inline = function (options) {
769
+ const inline$1 = function (options) {
744
770
  if (options === void 0) {
745
771
  options = {};
746
772
  }
@@ -841,6 +867,7 @@ const inline = function (options) {
841
867
 
842
868
  // For type backwards-compatibility, the `OffsetOptions` type was also
843
869
  // Derivable.
870
+
844
871
  async function convertValueToCoords(state, options) {
845
872
  const {
846
873
  placement,
@@ -865,10 +892,9 @@ async function convertValueToCoords(state, options) {
865
892
  crossAxis: 0,
866
893
  alignmentAxis: null
867
894
  } : {
868
- mainAxis: 0,
869
- crossAxis: 0,
870
- alignmentAxis: null,
871
- ...rawValue
895
+ mainAxis: rawValue.mainAxis || 0,
896
+ crossAxis: rawValue.crossAxis || 0,
897
+ alignmentAxis: rawValue.alignmentAxis
872
898
  };
873
899
  if (alignment && typeof alignmentAxis === 'number') {
874
900
  crossAxis = alignment === 'end' ? alignmentAxis * -1 : alignmentAxis;
@@ -889,7 +915,10 @@ async function convertValueToCoords(state, options) {
889
915
  * object may be passed.
890
916
  * @see https://floating-ui.com/docs/offset
891
917
  */
892
- const offset = function (options) {
918
+ const offset$1 = function (options) {
919
+ if (options === void 0) {
920
+ options = 0;
921
+ }
893
922
  return {
894
923
  name: 'offset',
895
924
  options,
@@ -926,7 +955,7 @@ const offset = function (options) {
926
955
  * width of the reference element.
927
956
  * @see https://floating-ui.com/docs/size
928
957
  */
929
- const size = function (options) {
958
+ const size$1 = function (options) {
930
959
  if (options === void 0) {
931
960
  options = {};
932
961
  }
@@ -934,6 +963,7 @@ const size = function (options) {
934
963
  name: 'size',
935
964
  options,
936
965
  async fn(state) {
966
+ var _state$middlewareData, _state$middlewareData2;
937
967
  const {
938
968
  placement,
939
969
  rects,
@@ -961,17 +991,18 @@ const size = function (options) {
961
991
  widthSide = side;
962
992
  heightSide = alignment === 'end' ? 'top' : 'bottom';
963
993
  }
964
- const overflowAvailableHeight = height - overflow[heightSide];
965
- const overflowAvailableWidth = width - overflow[widthSide];
994
+ const maximumClippingHeight = height - overflow.top - overflow.bottom;
995
+ const maximumClippingWidth = width - overflow.left - overflow.right;
996
+ const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
997
+ const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
966
998
  const noShift = !state.middlewareData.shift;
967
999
  let availableHeight = overflowAvailableHeight;
968
1000
  let availableWidth = overflowAvailableWidth;
969
- if (isYAxis) {
970
- const maximumClippingWidth = width - overflow.left - overflow.right;
971
- availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
972
- } else {
973
- const maximumClippingHeight = height - overflow.top - overflow.bottom;
974
- availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
1001
+ if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
1002
+ availableWidth = maximumClippingWidth;
1003
+ }
1004
+ if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
1005
+ availableHeight = maximumClippingHeight;
975
1006
  }
976
1007
  if (noShift && !alignment) {
977
1008
  const xMin = max(overflow.left, 0);
@@ -1002,6 +1033,9 @@ const size = function (options) {
1002
1033
  };
1003
1034
  };
1004
1035
 
1036
+ function hasWindow() {
1037
+ return typeof window !== 'undefined';
1038
+ }
1005
1039
  function getNodeName(node) {
1006
1040
  if (isNode(node)) {
1007
1041
  return (node.nodeName || '').toLowerCase();
@@ -1013,24 +1047,32 @@ function getNodeName(node) {
1013
1047
  }
1014
1048
  function getWindow(node) {
1015
1049
  var _node$ownerDocument;
1016
- return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
1050
+ return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
1017
1051
  }
1018
1052
  function getDocumentElement(node) {
1019
1053
  var _ref;
1020
1054
  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
1021
1055
  }
1022
1056
  function isNode(value) {
1057
+ if (!hasWindow()) {
1058
+ return false;
1059
+ }
1023
1060
  return value instanceof Node || value instanceof getWindow(value).Node;
1024
1061
  }
1025
1062
  function isElement(value) {
1063
+ if (!hasWindow()) {
1064
+ return false;
1065
+ }
1026
1066
  return value instanceof Element || value instanceof getWindow(value).Element;
1027
1067
  }
1028
1068
  function isHTMLElement(value) {
1069
+ if (!hasWindow()) {
1070
+ return false;
1071
+ }
1029
1072
  return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
1030
1073
  }
1031
1074
  function isShadowRoot(value) {
1032
- // Browsers without `ShadowRoot` support.
1033
- if (typeof ShadowRoot === 'undefined') {
1075
+ if (!hasWindow() || typeof ShadowRoot === 'undefined') {
1034
1076
  return false;
1035
1077
  }
1036
1078
  return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
@@ -1047,9 +1089,18 @@ function isOverflowElement(element) {
1047
1089
  function isTableElement(element) {
1048
1090
  return ['table', 'td', 'th'].includes(getNodeName(element));
1049
1091
  }
1050
- function isContainingBlock(element) {
1092
+ function isTopLayer(element) {
1093
+ return [':popover-open', ':modal'].some(selector => {
1094
+ try {
1095
+ return element.matches(selector);
1096
+ } catch (e) {
1097
+ return false;
1098
+ }
1099
+ });
1100
+ }
1101
+ function isContainingBlock(elementOrCss) {
1051
1102
  const webkit = isWebKit();
1052
- const css = getComputedStyle(element);
1103
+ const css = isElement(elementOrCss) ? getComputedStyle(elementOrCss) : elementOrCss;
1053
1104
 
1054
1105
  // https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
1055
1106
  return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== 'none' : false) || !webkit && (css.filter ? css.filter !== 'none' : false) || ['transform', 'perspective', 'filter'].some(value => (css.willChange || '').includes(value)) || ['paint', 'layout', 'strict', 'content'].some(value => (css.contain || '').includes(value));
@@ -1059,9 +1110,10 @@ function getContainingBlock(element) {
1059
1110
  while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
1060
1111
  if (isContainingBlock(currentNode)) {
1061
1112
  return currentNode;
1062
- } else {
1063
- currentNode = getParentNode(currentNode);
1113
+ } else if (isTopLayer(currentNode)) {
1114
+ return null;
1064
1115
  }
1116
+ currentNode = getParentNode(currentNode);
1065
1117
  }
1066
1118
  return null;
1067
1119
  }
@@ -1083,8 +1135,8 @@ function getNodeScroll(element) {
1083
1135
  };
1084
1136
  }
1085
1137
  return {
1086
- scrollLeft: element.pageXOffset,
1087
- scrollTop: element.pageYOffset
1138
+ scrollLeft: element.scrollX,
1139
+ scrollTop: element.scrollY
1088
1140
  };
1089
1141
  }
1090
1142
  function getParentNode(node) {
@@ -1124,10 +1176,14 @@ function getOverflowAncestors(node, list, traverseIframes) {
1124
1176
  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
1125
1177
  const win = getWindow(scrollableAncestor);
1126
1178
  if (isBody) {
1127
- return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], win.frameElement && traverseIframes ? getOverflowAncestors(win.frameElement) : []);
1179
+ const frameElement = getFrameElement(win);
1180
+ return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
1128
1181
  }
1129
1182
  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
1130
1183
  }
1184
+ function getFrameElement(win) {
1185
+ return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
1186
+ }
1131
1187
 
1132
1188
  function getCssDimensions(element) {
1133
1189
  const css = getComputedStyle(element);
@@ -1230,8 +1286,9 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
1230
1286
  if (domElement) {
1231
1287
  const win = getWindow(domElement);
1232
1288
  const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
1233
- let currentIFrame = win.frameElement;
1234
- while (currentIFrame && offsetParent && offsetWin !== win) {
1289
+ let currentWin = win;
1290
+ let currentIFrame = getFrameElement(currentWin);
1291
+ while (currentIFrame && offsetParent && offsetWin !== currentWin) {
1235
1292
  const iframeScale = getScale(currentIFrame);
1236
1293
  const iframeRect = currentIFrame.getBoundingClientRect();
1237
1294
  const css = getComputedStyle(currentIFrame);
@@ -1243,7 +1300,8 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
1243
1300
  height *= iframeScale.y;
1244
1301
  x += left;
1245
1302
  y += top;
1246
- currentIFrame = getWindow(currentIFrame).frameElement;
1303
+ currentWin = getWindow(currentIFrame);
1304
+ currentIFrame = getFrameElement(currentWin);
1247
1305
  }
1248
1306
  }
1249
1307
  return rectToClientRect({
@@ -1256,13 +1314,15 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
1256
1314
 
1257
1315
  function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
1258
1316
  let {
1317
+ elements,
1259
1318
  rect,
1260
1319
  offsetParent,
1261
1320
  strategy
1262
1321
  } = _ref;
1263
- const isOffsetParentAnElement = isHTMLElement(offsetParent);
1322
+ const isFixed = strategy === 'fixed';
1264
1323
  const documentElement = getDocumentElement(offsetParent);
1265
- if (offsetParent === documentElement) {
1324
+ const topLayer = elements ? isTopLayer(elements.floating) : false;
1325
+ if (offsetParent === documentElement || topLayer && isFixed) {
1266
1326
  return rect;
1267
1327
  }
1268
1328
  let scroll = {
@@ -1271,7 +1331,8 @@ function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
1271
1331
  };
1272
1332
  let scale = createCoords(1);
1273
1333
  const offsets = createCoords(0);
1274
- if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
1334
+ const isOffsetParentAnElement = isHTMLElement(offsetParent);
1335
+ if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
1275
1336
  if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
1276
1337
  scroll = getNodeScroll(offsetParent);
1277
1338
  }
@@ -1294,10 +1355,14 @@ function getClientRects(element) {
1294
1355
  return Array.from(element.getClientRects());
1295
1356
  }
1296
1357
 
1297
- function getWindowScrollBarX(element) {
1298
- // If <html> has a CSS width greater than the viewport, then this will be
1299
- // incorrect for RTL.
1300
- return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
1358
+ // If <html> has a CSS width greater than the viewport, then this will be
1359
+ // incorrect for RTL.
1360
+ function getWindowScrollBarX(element, rect) {
1361
+ const leftScroll = getNodeScroll(element).scrollLeft;
1362
+ if (!rect) {
1363
+ return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
1364
+ }
1365
+ return rect.left + leftScroll;
1301
1366
  }
1302
1367
 
1303
1368
  // Gets the entire size of the scrollable document area, even extending outside
@@ -1432,7 +1497,7 @@ function getClippingRect(_ref) {
1432
1497
  rootBoundary,
1433
1498
  strategy
1434
1499
  } = _ref;
1435
- const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
1500
+ const elementClippingAncestors = boundary === 'clippingAncestors' ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
1436
1501
  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
1437
1502
  const firstClippingAncestor = clippingAncestors[0];
1438
1503
  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
@@ -1452,7 +1517,14 @@ function getClippingRect(_ref) {
1452
1517
  }
1453
1518
 
1454
1519
  function getDimensions(element) {
1455
- return getCssDimensions(element);
1520
+ const {
1521
+ width,
1522
+ height
1523
+ } = getCssDimensions(element);
1524
+ return {
1525
+ width,
1526
+ height
1527
+ };
1456
1528
  }
1457
1529
 
1458
1530
  function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
@@ -1474,17 +1546,34 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
1474
1546
  offsets.x = offsetRect.x + offsetParent.clientLeft;
1475
1547
  offsets.y = offsetRect.y + offsetParent.clientTop;
1476
1548
  } else if (documentElement) {
1549
+ // If the <body> scrollbar appears on the left (e.g. RTL systems). Use
1550
+ // Firefox with layout.scrollbar.side = 3 in about:config to test this.
1477
1551
  offsets.x = getWindowScrollBarX(documentElement);
1478
1552
  }
1479
1553
  }
1554
+ let htmlX = 0;
1555
+ let htmlY = 0;
1556
+ if (documentElement && !isOffsetParentAnElement && !isFixed) {
1557
+ const htmlRect = documentElement.getBoundingClientRect();
1558
+ htmlY = htmlRect.top + scroll.scrollTop;
1559
+ htmlX = htmlRect.left + scroll.scrollLeft -
1560
+ // RTL <body> scrollbar.
1561
+ getWindowScrollBarX(documentElement, htmlRect);
1562
+ }
1563
+ const x = rect.left + scroll.scrollLeft - offsets.x - htmlX;
1564
+ const y = rect.top + scroll.scrollTop - offsets.y - htmlY;
1480
1565
  return {
1481
- x: rect.left + scroll.scrollLeft - offsets.x,
1482
- y: rect.top + scroll.scrollTop - offsets.y,
1566
+ x,
1567
+ y,
1483
1568
  width: rect.width,
1484
1569
  height: rect.height
1485
1570
  };
1486
1571
  }
1487
1572
 
1573
+ function isStaticPositioned(element) {
1574
+ return getComputedStyle(element).position === 'static';
1575
+ }
1576
+
1488
1577
  function getTrueOffsetParent(element, polyfill) {
1489
1578
  if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
1490
1579
  return null;
@@ -1492,40 +1581,56 @@ function getTrueOffsetParent(element, polyfill) {
1492
1581
  if (polyfill) {
1493
1582
  return polyfill(element);
1494
1583
  }
1495
- return element.offsetParent;
1584
+ let rawOffsetParent = element.offsetParent;
1585
+
1586
+ // Firefox returns the <html> element as the offsetParent if it's non-static,
1587
+ // while Chrome and Safari return the <body> element. The <body> element must
1588
+ // be used to perform the correct calculations even if the <html> element is
1589
+ // non-static.
1590
+ if (getDocumentElement(element) === rawOffsetParent) {
1591
+ rawOffsetParent = rawOffsetParent.ownerDocument.body;
1592
+ }
1593
+ return rawOffsetParent;
1496
1594
  }
1497
1595
 
1498
1596
  // Gets the closest ancestor positioned element. Handles some edge cases,
1499
1597
  // such as table ancestors and cross browser bugs.
1500
1598
  function getOffsetParent(element, polyfill) {
1501
- const window = getWindow(element);
1599
+ const win = getWindow(element);
1600
+ if (isTopLayer(element)) {
1601
+ return win;
1602
+ }
1502
1603
  if (!isHTMLElement(element)) {
1503
- return window;
1604
+ let svgOffsetParent = getParentNode(element);
1605
+ while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
1606
+ if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
1607
+ return svgOffsetParent;
1608
+ }
1609
+ svgOffsetParent = getParentNode(svgOffsetParent);
1610
+ }
1611
+ return win;
1504
1612
  }
1505
1613
  let offsetParent = getTrueOffsetParent(element, polyfill);
1506
- while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
1614
+ while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
1507
1615
  offsetParent = getTrueOffsetParent(offsetParent, polyfill);
1508
1616
  }
1509
- if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
1510
- return window;
1617
+ if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
1618
+ return win;
1511
1619
  }
1512
- return offsetParent || getContainingBlock(element) || window;
1620
+ return offsetParent || getContainingBlock(element) || win;
1513
1621
  }
1514
1622
 
1515
- const getElementRects = async function (_ref) {
1516
- let {
1517
- reference,
1518
- floating,
1519
- strategy
1520
- } = _ref;
1623
+ const getElementRects = async function (data) {
1521
1624
  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
1522
1625
  const getDimensionsFn = this.getDimensions;
1626
+ const floatingDimensions = await getDimensionsFn(data.floating);
1523
1627
  return {
1524
- reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
1628
+ reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
1525
1629
  floating: {
1526
1630
  x: 0,
1527
1631
  y: 0,
1528
- ...(await getDimensionsFn(floating))
1632
+ width: floatingDimensions.width,
1633
+ height: floatingDimensions.height
1529
1634
  }
1530
1635
  };
1531
1636
  };
@@ -1553,8 +1658,9 @@ function observeMove(element, onMove) {
1553
1658
  let timeoutId;
1554
1659
  const root = getDocumentElement(element);
1555
1660
  function cleanup() {
1661
+ var _io;
1556
1662
  clearTimeout(timeoutId);
1557
- io && io.disconnect();
1663
+ (_io = io) == null || _io.disconnect();
1558
1664
  io = null;
1559
1665
  }
1560
1666
  function refresh(skip, threshold) {
@@ -1594,9 +1700,11 @@ function observeMove(element, onMove) {
1594
1700
  return refresh();
1595
1701
  }
1596
1702
  if (!ratio) {
1703
+ // If the reference is clipped, the ratio is 0. Throttle the refresh
1704
+ // to prevent an infinite loop of updates.
1597
1705
  timeoutId = setTimeout(() => {
1598
1706
  refresh(false, 1e-7);
1599
- }, 100);
1707
+ }, 1000);
1600
1708
  } else {
1601
1709
  refresh(false, ratio);
1602
1710
  }
@@ -1660,7 +1768,8 @@ function autoUpdate(reference, floating, update, options) {
1660
1768
  resizeObserver.unobserve(floating);
1661
1769
  cancelAnimationFrame(reobserveFrame);
1662
1770
  reobserveFrame = requestAnimationFrame(() => {
1663
- resizeObserver && resizeObserver.observe(floating);
1771
+ var _resizeObserver;
1772
+ (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
1664
1773
  });
1665
1774
  }
1666
1775
  update();
@@ -1685,12 +1794,13 @@ function autoUpdate(reference, floating, update, options) {
1685
1794
  }
1686
1795
  update();
1687
1796
  return () => {
1797
+ var _resizeObserver2;
1688
1798
  ancestors.forEach(ancestor => {
1689
1799
  ancestorScroll && ancestor.removeEventListener('scroll', update);
1690
1800
  ancestorResize && ancestor.removeEventListener('resize', update);
1691
1801
  });
1692
- cleanupIo && cleanupIo();
1693
- resizeObserver && resizeObserver.disconnect();
1802
+ cleanupIo == null || cleanupIo();
1803
+ (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
1694
1804
  resizeObserver = null;
1695
1805
  if (animationFrame) {
1696
1806
  cancelAnimationFrame(frameId);
@@ -1698,10 +1808,63 @@ function autoUpdate(reference, floating, update, options) {
1698
1808
  };
1699
1809
  }
1700
1810
 
1811
+ /**
1812
+ * Modifies the placement by translating the floating element along the
1813
+ * specified axes.
1814
+ * A number (shorthand for `mainAxis` or distance), or an axes configuration
1815
+ * object may be passed.
1816
+ * @see https://floating-ui.com/docs/offset
1817
+ */
1818
+ const offset = offset$1;
1819
+
1820
+ /**
1821
+ * Optimizes the visibility of the floating element by choosing the placement
1822
+ * that has the most space available automatically, without needing to specify a
1823
+ * preferred placement. Alternative to `flip`.
1824
+ * @see https://floating-ui.com/docs/autoPlacement
1825
+ */
1826
+ const autoPlacement = autoPlacement$1;
1827
+
1828
+ /**
1829
+ * Optimizes the visibility of the floating element by flipping the `placement`
1830
+ * in order to keep it in view when the preferred placement(s) will overflow the
1831
+ * clipping boundary. Alternative to `autoPlacement`.
1832
+ * @see https://floating-ui.com/docs/flip
1833
+ */
1834
+ const flip = flip$1;
1835
+
1836
+ /**
1837
+ * Provides data that allows you to change the size of the floating element —
1838
+ * for instance, prevent it from overflowing the clipping boundary or match the
1839
+ * width of the reference element.
1840
+ * @see https://floating-ui.com/docs/size
1841
+ */
1842
+ const size = size$1;
1843
+
1844
+ /**
1845
+ * Provides data to hide the floating element in applicable situations, such as
1846
+ * when it is not in the same clipping context as the reference element.
1847
+ * @see https://floating-ui.com/docs/hide
1848
+ */
1849
+ const hide = hide$1;
1850
+
1851
+ /**
1852
+ * Provides data to position an inner element of the floating element so that it
1853
+ * appears centered to the reference element.
1854
+ * @see https://floating-ui.com/docs/arrow
1855
+ */
1856
+ const arrow = arrow$1;
1857
+
1858
+ /**
1859
+ * Provides improved positioning for inline reference elements that can span
1860
+ * over multiple lines, such as hyperlinks or range selections.
1861
+ * @see https://floating-ui.com/docs/inline
1862
+ */
1863
+ const inline = inline$1;
1864
+
1701
1865
  /**
1702
1866
  * Computes the `x` and `y` coordinates that will place the floating element
1703
- * next to a reference element when it is given a certain CSS positioning
1704
- * strategy.
1867
+ * next to a given reference element.
1705
1868
  */
1706
1869
  const computePosition = (reference, floating, options) => {
1707
1870
  // This caches the expensive `getClippingElementAncestors` function so that