@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.
- package/custom-elements.json +2792 -83
- package/lib/badge/badge.d.ts +1 -1
- package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
- package/lib/button/button.d.ts +1 -1
- package/lib/checkbox/checkbox.d.ts +8 -2
- package/lib/checkbox/checkbox.form-associated.d.ts +10 -0
- package/lib/dialog/dialog.d.ts +4 -0
- package/lib/divider/divider.d.ts +11 -2
- package/lib/enums.d.ts +1 -0
- package/lib/fab/fab.d.ts +1 -1
- package/lib/file-picker/file-picker.d.ts +3 -0
- package/lib/icon/icon.d.ts +2 -1
- package/lib/slider/slider.d.ts +30 -6
- package/lib/slider/slider.form-associated.d.ts +10 -0
- package/lib/split-button/split-button.d.ts +1 -1
- package/lib/tabs/tabs.d.ts +1 -0
- package/lib/text-field/text-field.d.ts +1 -0
- package/package.json +1 -1
- package/shared/aria-global2.cjs +93 -0
- package/shared/aria-global2.js +91 -0
- package/shared/breadcrumb-item.cjs +2 -89
- package/shared/breadcrumb-item.js +1 -88
- package/shared/definition11.cjs +201 -5
- package/shared/definition11.js +199 -4
- package/shared/definition15.cjs +49 -90
- package/shared/definition15.js +50 -91
- package/shared/definition16.cjs +9 -7
- package/shared/definition16.js +9 -7
- package/shared/definition20.cjs +16 -11
- package/shared/definition20.js +16 -11
- package/shared/definition21.cjs +34 -4
- package/shared/definition21.js +34 -4
- package/shared/definition22.cjs +32 -51
- package/shared/definition22.js +33 -52
- package/shared/definition24.cjs +156 -2
- package/shared/definition24.js +157 -3
- package/shared/definition25.cjs +106 -56
- package/shared/definition25.js +106 -56
- package/shared/definition29.cjs +1 -1
- package/shared/definition29.js +1 -1
- package/shared/definition30.cjs +1 -1
- package/shared/definition30.js +1 -1
- package/shared/definition35.cjs +2 -2
- package/shared/definition35.js +2 -2
- package/shared/definition37.cjs +1 -1
- package/shared/definition37.js +1 -1
- package/shared/definition4.cjs +5 -6
- package/shared/definition4.js +1 -2
- package/shared/definition40.cjs +11 -4
- package/shared/definition40.js +8 -1
- package/shared/definition42.cjs +3 -22
- package/shared/definition42.js +2 -21
- package/shared/definition43.cjs +1 -2
- package/shared/definition43.js +1 -2
- package/shared/definition44.js +1 -1
- package/shared/definition47.cjs +369 -502
- package/shared/definition47.js +370 -503
- package/shared/definition5.cjs +5 -5
- package/shared/definition5.js +2 -2
- package/shared/definition51.cjs +1 -1
- package/shared/definition51.js +1 -1
- package/shared/definition52.cjs +63 -26
- package/shared/definition52.js +63 -26
- package/shared/definition56.cjs +45 -43
- package/shared/definition56.js +45 -43
- package/shared/definition57.cjs +1 -1
- package/shared/definition57.js +1 -1
- package/shared/definition64.cjs +242 -79
- package/shared/definition64.js +242 -79
- package/shared/definition7.cjs +1 -1
- package/shared/definition7.js +1 -1
- package/shared/definition8.cjs +1 -1
- package/shared/definition8.js +1 -1
- package/shared/enums.cjs +1 -0
- package/shared/enums.js +1 -0
- package/shared/form-associated.js +1 -1
- package/shared/{patterns → foundation/anchor}/anchor.d.ts +1 -1
- package/shared/foundation/button/button.d.ts +27 -0
- package/shared/foundation/button/button.template.d.ts +4 -0
- package/shared/foundation/button/index.d.ts +2 -0
- package/shared/foundation/patterns/index.d.ts +1 -0
- package/shared/icon.cjs +11 -5
- package/shared/icon.js +11 -5
- package/shared/index.cjs +22 -2
- package/shared/index.js +22 -2
- package/shared/key-codes2.js +1 -1
- package/shared/patterns/form-elements/form-elements.d.ts +6 -6
- package/shared/presentationDate.cjs +4328 -4042
- package/shared/presentationDate.js +4327 -4041
- package/shared/slider.template.cjs +23 -1
- package/shared/slider.template.js +21 -2
- package/styles/core/all.css +1 -1
- package/styles/core/theme.css +1 -1
- package/styles/core/typography.css +1 -1
- package/styles/tokens/theme-dark.css +35 -14
- package/styles/tokens/theme-light.css +35 -14
- package/styles/tokens/vivid-2-compat.css +1 -1
- package/vivid.api.json +62 -5
- package/shared/aria2.cjs +0 -11
- package/shared/aria2.js +0 -9
- package/shared/button.cjs +0 -202
- package/shared/button.js +0 -200
- /package/shared/{patterns → foundation/patterns}/aria-global.d.ts +0 -0
package/shared/definition64.js
CHANGED
|
@@ -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 {
|
|
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
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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
|
|
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
|
|
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
|
-
|
|
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$
|
|
618
|
-
const placement = (_overflowsData$
|
|
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:
|
|
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
|
|
965
|
-
const
|
|
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 (
|
|
970
|
-
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
|
|
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
|
|
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
|
-
|
|
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
|
|
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(
|
|
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
|
-
|
|
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.
|
|
1087
|
-
scrollTop: element.
|
|
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
|
-
|
|
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
|
|
1234
|
-
|
|
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
|
-
|
|
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
|
|
1322
|
+
const isFixed = strategy === 'fixed';
|
|
1264
1323
|
const documentElement = getDocumentElement(offsetParent);
|
|
1265
|
-
|
|
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
|
-
|
|
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
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
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
|
-
|
|
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
|
|
1482
|
-
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
|
-
|
|
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
|
|
1599
|
+
const win = getWindow(element);
|
|
1600
|
+
if (isTopLayer(element)) {
|
|
1601
|
+
return win;
|
|
1602
|
+
}
|
|
1502
1603
|
if (!isHTMLElement(element)) {
|
|
1503
|
-
|
|
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) &&
|
|
1614
|
+
while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
|
|
1507
1615
|
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
1508
1616
|
}
|
|
1509
|
-
if (offsetParent && (
|
|
1510
|
-
return
|
|
1617
|
+
if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
|
|
1618
|
+
return win;
|
|
1511
1619
|
}
|
|
1512
|
-
return offsetParent || getContainingBlock(element) ||
|
|
1620
|
+
return offsetParent || getContainingBlock(element) || win;
|
|
1513
1621
|
}
|
|
1514
1622
|
|
|
1515
|
-
const getElementRects = async function (
|
|
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
|
-
|
|
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
|
|
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
|
-
},
|
|
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
|
-
|
|
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
|
|
1693
|
-
resizeObserver
|
|
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
|
|
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
|