@haiilo/catalyst 6.3.2 → 6.4.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/dist/catalyst/catalyst.css +7 -0
- package/dist/catalyst/catalyst.esm.js +1 -1
- package/dist/catalyst/catalyst.esm.js.map +1 -1
- package/dist/catalyst/index.esm.js.map +1 -1
- package/dist/catalyst/p-12fa3edc.js +3 -0
- package/dist/catalyst/p-12fa3edc.js.map +1 -0
- package/dist/catalyst/p-d3a118b5.entry.js +10 -0
- package/dist/catalyst/p-d3a118b5.entry.js.map +1 -0
- package/dist/catalyst/p-dd8ae83e.js.map +1 -1
- package/dist/catalyst/scss/_snippets/_form-label.scss +12 -4
- package/dist/catalyst/scss/fonts/_fonts-mixins.scss +4 -0
- package/dist/catalyst/scss/fonts/_fonts.mixins.ss3v.scss +13 -0
- package/dist/cjs/cat-alert_26.cjs.entry.js +276 -304
- package/dist/cjs/cat-alert_26.cjs.entry.js.map +1 -1
- package/dist/cjs/catalyst.cjs.js +2 -2
- package/dist/cjs/catalyst.cjs.js.map +1 -1
- package/dist/cjs/{index-8d1f4d8e.js → index-b4391019.js} +86 -10
- package/dist/cjs/index-b4391019.js.map +1 -0
- package/dist/cjs/loader.cjs.js +2 -2
- package/dist/cjs/loader.cjs.js.map +1 -1
- package/dist/collection/collection-manifest.json +1 -1
- package/dist/collection/components/cat-button/cat-button.css +14 -2
- package/dist/collection/components/cat-button/cat-button.js +2 -2
- package/dist/collection/components/cat-button/cat-button.js.map +1 -1
- package/dist/collection/components/cat-datepicker/cat-datepicker.js +2 -11
- package/dist/collection/components/cat-datepicker/cat-datepicker.js.map +1 -1
- package/dist/collection/components/cat-dropdown/cat-dropdown.js +21 -21
- package/dist/collection/components/cat-dropdown/cat-dropdown.js.map +1 -1
- package/dist/collection/components/cat-input/cat-input.css +24 -8
- package/dist/collection/components/cat-input/cat-input.js +2 -2
- package/dist/collection/components/cat-input/cat-input.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.css +24 -8
- package/dist/collection/components/cat-select/cat-select.js +4 -7
- package/dist/collection/components/cat-select/cat-select.js.map +1 -1
- package/dist/collection/components/cat-select/cat-select.spec.js +1 -1
- package/dist/collection/components/cat-select/cat-select.spec.js.map +1 -1
- package/dist/collection/components/cat-select-demo/cat-select-demo.js +1 -1
- package/dist/collection/components/cat-select-demo/cat-select-demo.js.map +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js +1 -1
- package/dist/collection/components/cat-tabs/cat-tabs.js.map +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.css +24 -8
- package/dist/collection/components/cat-textarea/cat-textarea.js +1 -1
- package/dist/collection/components/cat-textarea/cat-textarea.js.map +1 -1
- package/dist/collection/components/cat-tooltip/cat-tooltip.js +1 -1
- package/dist/collection/scss/_snippets/_form-label.scss +12 -4
- package/dist/collection/scss/fonts/_fonts-mixins.scss +4 -0
- package/dist/collection/scss/fonts/_fonts.mixins.ss3v.scss +13 -0
- package/dist/collection/utils/find-closest.js +13 -0
- package/dist/collection/utils/find-closest.js.map +1 -0
- package/dist/components/cat-button2.js +1 -1
- package/dist/components/cat-button2.js.map +1 -1
- package/dist/components/cat-datepicker.js +14 -11
- package/dist/components/cat-datepicker.js.map +1 -1
- package/dist/components/cat-dropdown2.js +20 -20
- package/dist/components/cat-dropdown2.js.map +1 -1
- package/dist/components/cat-input2.js +3 -3
- package/dist/components/cat-input2.js.map +1 -1
- package/dist/components/cat-select-demo.js +1 -1
- package/dist/components/cat-select-demo.js.map +1 -1
- package/dist/components/cat-select2.js +4 -7
- package/dist/components/cat-select2.js.map +1 -1
- package/dist/components/cat-tabs.js +1 -1
- package/dist/components/cat-tabs.js.map +1 -1
- package/dist/components/cat-textarea.js +2 -2
- package/dist/components/cat-textarea.js.map +1 -1
- package/dist/components/floating-ui.dom.esm.js +237 -265
- package/dist/components/floating-ui.dom.esm.js.map +1 -1
- package/dist/esm/cat-alert_26.entry.js +276 -304
- package/dist/esm/cat-alert_26.entry.js.map +1 -1
- package/dist/esm/catalyst.js +3 -3
- package/dist/esm/catalyst.js.map +1 -1
- package/dist/esm/{index-16bd9531.js → index-2c703aa8.js} +86 -10
- package/dist/esm/index-2c703aa8.js.map +1 -0
- package/dist/esm/loader.js +3 -3
- package/dist/esm/loader.js.map +1 -1
- package/dist/types/components/cat-button/cat-button.d.ts +1 -1
- package/dist/types/components/cat-datepicker/cat-datepicker.d.ts +0 -1
- package/dist/types/components/cat-dropdown/cat-dropdown.d.ts +1 -0
- package/dist/types/components.d.ts +2 -2
- package/dist/types/stencil-public-runtime.d.ts +6 -2
- package/dist/types/utils/find-closest.d.ts +5 -0
- package/loader/index.d.ts +1 -1
- package/package.json +11 -11
- package/dist/catalyst/p-2257ac13.entry.js +0 -10
- package/dist/catalyst/p-2257ac13.entry.js.map +0 -1
- package/dist/catalyst/p-897412f2.js +0 -3
- package/dist/catalyst/p-897412f2.js.map +0 -1
- package/dist/cjs/index-8d1f4d8e.js.map +0 -1
- package/dist/esm/index-16bd9531.js.map +0 -1
|
@@ -1,17 +1,121 @@
|
|
|
1
|
+
const min = Math.min;
|
|
2
|
+
const max = Math.max;
|
|
3
|
+
const round = Math.round;
|
|
4
|
+
const floor = Math.floor;
|
|
5
|
+
const createCoords = v => ({
|
|
6
|
+
x: v,
|
|
7
|
+
y: v
|
|
8
|
+
});
|
|
9
|
+
const oppositeSideMap = {
|
|
10
|
+
left: 'right',
|
|
11
|
+
right: 'left',
|
|
12
|
+
bottom: 'top',
|
|
13
|
+
top: 'bottom'
|
|
14
|
+
};
|
|
15
|
+
const oppositeAlignmentMap = {
|
|
16
|
+
start: 'end',
|
|
17
|
+
end: 'start'
|
|
18
|
+
};
|
|
19
|
+
function clamp(start, value, end) {
|
|
20
|
+
return max(start, min(value, end));
|
|
21
|
+
}
|
|
22
|
+
function evaluate(value, param) {
|
|
23
|
+
return typeof value === 'function' ? value(param) : value;
|
|
24
|
+
}
|
|
25
|
+
function getSide(placement) {
|
|
26
|
+
return placement.split('-')[0];
|
|
27
|
+
}
|
|
1
28
|
function getAlignment(placement) {
|
|
2
29
|
return placement.split('-')[1];
|
|
3
30
|
}
|
|
4
|
-
|
|
5
|
-
|
|
31
|
+
function getOppositeAxis(axis) {
|
|
32
|
+
return axis === 'x' ? 'y' : 'x';
|
|
33
|
+
}
|
|
34
|
+
function getAxisLength(axis) {
|
|
6
35
|
return axis === 'y' ? 'height' : 'width';
|
|
7
36
|
}
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
return placement.split('-')[0];
|
|
37
|
+
function getSideAxis(placement) {
|
|
38
|
+
return ['top', 'bottom'].includes(getSide(placement)) ? 'y' : 'x';
|
|
11
39
|
}
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
40
|
+
function getAlignmentAxis(placement) {
|
|
41
|
+
return getOppositeAxis(getSideAxis(placement));
|
|
42
|
+
}
|
|
43
|
+
function getAlignmentSides(placement, rects, rtl) {
|
|
44
|
+
if (rtl === void 0) {
|
|
45
|
+
rtl = false;
|
|
46
|
+
}
|
|
47
|
+
const alignment = getAlignment(placement);
|
|
48
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
49
|
+
const length = getAxisLength(alignmentAxis);
|
|
50
|
+
let mainAlignmentSide = alignmentAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
51
|
+
if (rects.reference[length] > rects.floating[length]) {
|
|
52
|
+
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
53
|
+
}
|
|
54
|
+
return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
|
|
55
|
+
}
|
|
56
|
+
function getExpandedPlacements(placement) {
|
|
57
|
+
const oppositePlacement = getOppositePlacement(placement);
|
|
58
|
+
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
59
|
+
}
|
|
60
|
+
function getOppositeAlignmentPlacement(placement) {
|
|
61
|
+
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
62
|
+
}
|
|
63
|
+
function getSideList(side, isStart, rtl) {
|
|
64
|
+
const lr = ['left', 'right'];
|
|
65
|
+
const rl = ['right', 'left'];
|
|
66
|
+
const tb = ['top', 'bottom'];
|
|
67
|
+
const bt = ['bottom', 'top'];
|
|
68
|
+
switch (side) {
|
|
69
|
+
case 'top':
|
|
70
|
+
case 'bottom':
|
|
71
|
+
if (rtl) return isStart ? rl : lr;
|
|
72
|
+
return isStart ? lr : rl;
|
|
73
|
+
case 'left':
|
|
74
|
+
case 'right':
|
|
75
|
+
return isStart ? tb : bt;
|
|
76
|
+
default:
|
|
77
|
+
return [];
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
81
|
+
const alignment = getAlignment(placement);
|
|
82
|
+
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
83
|
+
if (alignment) {
|
|
84
|
+
list = list.map(side => side + "-" + alignment);
|
|
85
|
+
if (flipAlignment) {
|
|
86
|
+
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
return list;
|
|
90
|
+
}
|
|
91
|
+
function getOppositePlacement(placement) {
|
|
92
|
+
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
93
|
+
}
|
|
94
|
+
function expandPaddingObject(padding) {
|
|
95
|
+
return {
|
|
96
|
+
top: 0,
|
|
97
|
+
right: 0,
|
|
98
|
+
bottom: 0,
|
|
99
|
+
left: 0,
|
|
100
|
+
...padding
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
function getPaddingObject(padding) {
|
|
104
|
+
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
105
|
+
top: padding,
|
|
106
|
+
right: padding,
|
|
107
|
+
bottom: padding,
|
|
108
|
+
left: padding
|
|
109
|
+
};
|
|
110
|
+
}
|
|
111
|
+
function rectToClientRect(rect) {
|
|
112
|
+
return {
|
|
113
|
+
...rect,
|
|
114
|
+
top: rect.y,
|
|
115
|
+
left: rect.x,
|
|
116
|
+
right: rect.x + rect.width,
|
|
117
|
+
bottom: rect.y + rect.height
|
|
118
|
+
};
|
|
15
119
|
}
|
|
16
120
|
|
|
17
121
|
function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
@@ -19,13 +123,14 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
19
123
|
reference,
|
|
20
124
|
floating
|
|
21
125
|
} = _ref;
|
|
126
|
+
const sideAxis = getSideAxis(placement);
|
|
127
|
+
const alignmentAxis = getAlignmentAxis(placement);
|
|
128
|
+
const alignLength = getAxisLength(alignmentAxis);
|
|
129
|
+
const side = getSide(placement);
|
|
130
|
+
const isVertical = sideAxis === 'y';
|
|
22
131
|
const commonX = reference.x + reference.width / 2 - floating.width / 2;
|
|
23
132
|
const commonY = reference.y + reference.height / 2 - floating.height / 2;
|
|
24
|
-
const
|
|
25
|
-
const length = getLengthFromAxis(mainAxis);
|
|
26
|
-
const commonAlign = reference[length] / 2 - floating[length] / 2;
|
|
27
|
-
const side = getSide(placement);
|
|
28
|
-
const isVertical = mainAxis === 'x';
|
|
133
|
+
const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
|
|
29
134
|
let coords;
|
|
30
135
|
switch (side) {
|
|
31
136
|
case 'top':
|
|
@@ -60,10 +165,10 @@ function computeCoordsFromPlacement(_ref, placement, rtl) {
|
|
|
60
165
|
}
|
|
61
166
|
switch (getAlignment(placement)) {
|
|
62
167
|
case 'start':
|
|
63
|
-
coords[
|
|
168
|
+
coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
|
|
64
169
|
break;
|
|
65
170
|
case 'end':
|
|
66
|
-
coords[
|
|
171
|
+
coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
|
|
67
172
|
break;
|
|
68
173
|
}
|
|
69
174
|
return coords;
|
|
@@ -161,39 +266,6 @@ const computePosition$1 = async (reference, floating, config) => {
|
|
|
161
266
|
};
|
|
162
267
|
};
|
|
163
268
|
|
|
164
|
-
function evaluate(value, param) {
|
|
165
|
-
return typeof value === 'function' ? value(param) : value;
|
|
166
|
-
}
|
|
167
|
-
|
|
168
|
-
function expandPaddingObject(padding) {
|
|
169
|
-
return {
|
|
170
|
-
top: 0,
|
|
171
|
-
right: 0,
|
|
172
|
-
bottom: 0,
|
|
173
|
-
left: 0,
|
|
174
|
-
...padding
|
|
175
|
-
};
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
function getSideObjectFromPadding(padding) {
|
|
179
|
-
return typeof padding !== 'number' ? expandPaddingObject(padding) : {
|
|
180
|
-
top: padding,
|
|
181
|
-
right: padding,
|
|
182
|
-
bottom: padding,
|
|
183
|
-
left: padding
|
|
184
|
-
};
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
function rectToClientRect(rect) {
|
|
188
|
-
return {
|
|
189
|
-
...rect,
|
|
190
|
-
top: rect.y,
|
|
191
|
-
left: rect.x,
|
|
192
|
-
right: rect.x + rect.width,
|
|
193
|
-
bottom: rect.y + rect.height
|
|
194
|
-
};
|
|
195
|
-
}
|
|
196
|
-
|
|
197
269
|
/**
|
|
198
270
|
* Resolves with an object of overflow side offsets that determine how much the
|
|
199
271
|
* element is overflowing a given clipping boundary on each side.
|
|
@@ -222,7 +294,7 @@ async function detectOverflow(state, options) {
|
|
|
222
294
|
altBoundary = false,
|
|
223
295
|
padding = 0
|
|
224
296
|
} = evaluate(options, state);
|
|
225
|
-
const paddingObject =
|
|
297
|
+
const paddingObject = getPaddingObject(padding);
|
|
226
298
|
const altContext = elementContext === 'floating' ? 'reference' : 'floating';
|
|
227
299
|
const element = elements[altBoundary ? altContext : elementContext];
|
|
228
300
|
const clippingClientRect = rectToClientRect(await platform.getClippingRect({
|
|
@@ -257,82 +329,6 @@ async function detectOverflow(state, options) {
|
|
|
257
329
|
};
|
|
258
330
|
}
|
|
259
331
|
|
|
260
|
-
const min$1 = Math.min;
|
|
261
|
-
const max$1 = Math.max;
|
|
262
|
-
|
|
263
|
-
function within(min$1$1, value, max$1$1) {
|
|
264
|
-
return max$1(min$1$1, min$1(value, max$1$1));
|
|
265
|
-
}
|
|
266
|
-
|
|
267
|
-
const oppositeSideMap = {
|
|
268
|
-
left: 'right',
|
|
269
|
-
right: 'left',
|
|
270
|
-
bottom: 'top',
|
|
271
|
-
top: 'bottom'
|
|
272
|
-
};
|
|
273
|
-
function getOppositePlacement(placement) {
|
|
274
|
-
return placement.replace(/left|right|bottom|top/g, side => oppositeSideMap[side]);
|
|
275
|
-
}
|
|
276
|
-
|
|
277
|
-
function getAlignmentSides(placement, rects, rtl) {
|
|
278
|
-
if (rtl === void 0) {
|
|
279
|
-
rtl = false;
|
|
280
|
-
}
|
|
281
|
-
const alignment = getAlignment(placement);
|
|
282
|
-
const mainAxis = getMainAxisFromPlacement(placement);
|
|
283
|
-
const length = getLengthFromAxis(mainAxis);
|
|
284
|
-
let mainAlignmentSide = mainAxis === 'x' ? alignment === (rtl ? 'end' : 'start') ? 'right' : 'left' : alignment === 'start' ? 'bottom' : 'top';
|
|
285
|
-
if (rects.reference[length] > rects.floating[length]) {
|
|
286
|
-
mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
|
|
287
|
-
}
|
|
288
|
-
return {
|
|
289
|
-
main: mainAlignmentSide,
|
|
290
|
-
cross: getOppositePlacement(mainAlignmentSide)
|
|
291
|
-
};
|
|
292
|
-
}
|
|
293
|
-
|
|
294
|
-
const oppositeAlignmentMap = {
|
|
295
|
-
start: 'end',
|
|
296
|
-
end: 'start'
|
|
297
|
-
};
|
|
298
|
-
function getOppositeAlignmentPlacement(placement) {
|
|
299
|
-
return placement.replace(/start|end/g, alignment => oppositeAlignmentMap[alignment]);
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
function getExpandedPlacements(placement) {
|
|
303
|
-
const oppositePlacement = getOppositePlacement(placement);
|
|
304
|
-
return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
|
|
305
|
-
}
|
|
306
|
-
|
|
307
|
-
function getSideList(side, isStart, rtl) {
|
|
308
|
-
const lr = ['left', 'right'];
|
|
309
|
-
const rl = ['right', 'left'];
|
|
310
|
-
const tb = ['top', 'bottom'];
|
|
311
|
-
const bt = ['bottom', 'top'];
|
|
312
|
-
switch (side) {
|
|
313
|
-
case 'top':
|
|
314
|
-
case 'bottom':
|
|
315
|
-
if (rtl) return isStart ? rl : lr;
|
|
316
|
-
return isStart ? lr : rl;
|
|
317
|
-
case 'left':
|
|
318
|
-
case 'right':
|
|
319
|
-
return isStart ? tb : bt;
|
|
320
|
-
default:
|
|
321
|
-
return [];
|
|
322
|
-
}
|
|
323
|
-
}
|
|
324
|
-
function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
|
|
325
|
-
const alignment = getAlignment(placement);
|
|
326
|
-
let list = getSideList(getSide(placement), direction === 'start', rtl);
|
|
327
|
-
if (alignment) {
|
|
328
|
-
list = list.map(side => side + "-" + alignment);
|
|
329
|
-
if (flipAlignment) {
|
|
330
|
-
list = list.concat(list.map(getOppositeAlignmentPlacement));
|
|
331
|
-
}
|
|
332
|
-
}
|
|
333
|
-
return list;
|
|
334
|
-
}
|
|
335
|
-
|
|
336
332
|
/**
|
|
337
333
|
* Optimizes the visibility of the floating element by flipping the `placement`
|
|
338
334
|
* in order to keep it in view when the preferred placement(s) will overflow the
|
|
@@ -380,11 +376,8 @@ const flip = function (options) {
|
|
|
380
376
|
overflows.push(overflow[side]);
|
|
381
377
|
}
|
|
382
378
|
if (checkCrossAxis) {
|
|
383
|
-
const
|
|
384
|
-
|
|
385
|
-
cross
|
|
386
|
-
} = getAlignmentSides(placement, rects, rtl);
|
|
387
|
-
overflows.push(overflow[main], overflow[cross]);
|
|
379
|
+
const sides = getAlignmentSides(placement, rects, rtl);
|
|
380
|
+
overflows.push(overflow[sides[0]], overflow[sides[1]]);
|
|
388
381
|
}
|
|
389
382
|
overflowsData = [...overflowsData, {
|
|
390
383
|
placement,
|
|
@@ -443,6 +436,8 @@ const flip = function (options) {
|
|
|
443
436
|
};
|
|
444
437
|
};
|
|
445
438
|
|
|
439
|
+
// For type backwards-compatibility, the `OffsetOptions` type was also
|
|
440
|
+
// Derivable.
|
|
446
441
|
async function convertValueToCoords(state, options) {
|
|
447
442
|
const {
|
|
448
443
|
placement,
|
|
@@ -452,7 +447,7 @@ async function convertValueToCoords(state, options) {
|
|
|
452
447
|
const rtl = await (platform.isRTL == null ? void 0 : platform.isRTL(elements.floating));
|
|
453
448
|
const side = getSide(placement);
|
|
454
449
|
const alignment = getAlignment(placement);
|
|
455
|
-
const isVertical =
|
|
450
|
+
const isVertical = getSideAxis(placement) === 'y';
|
|
456
451
|
const mainAxisMulti = ['left', 'top'].includes(side) ? -1 : 1;
|
|
457
452
|
const crossAxisMulti = rtl && isVertical ? -1 : 1;
|
|
458
453
|
const rawValue = evaluate(options, state);
|
|
@@ -513,10 +508,6 @@ const offset = function (options) {
|
|
|
513
508
|
};
|
|
514
509
|
};
|
|
515
510
|
|
|
516
|
-
function getCrossAxis(axis) {
|
|
517
|
-
return axis === 'x' ? 'y' : 'x';
|
|
518
|
-
}
|
|
519
|
-
|
|
520
511
|
/**
|
|
521
512
|
* Optimizes the visibility of the floating element by shifting it in order to
|
|
522
513
|
* keep it in view when it will overflow the clipping boundary.
|
|
@@ -557,8 +548,8 @@ const shift = function (options) {
|
|
|
557
548
|
y
|
|
558
549
|
};
|
|
559
550
|
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
560
|
-
const
|
|
561
|
-
const
|
|
551
|
+
const crossAxis = getSideAxis(getSide(placement));
|
|
552
|
+
const mainAxis = getOppositeAxis(crossAxis);
|
|
562
553
|
let mainAxisCoord = coords[mainAxis];
|
|
563
554
|
let crossAxisCoord = coords[crossAxis];
|
|
564
555
|
if (checkMainAxis) {
|
|
@@ -566,14 +557,14 @@ const shift = function (options) {
|
|
|
566
557
|
const maxSide = mainAxis === 'y' ? 'bottom' : 'right';
|
|
567
558
|
const min = mainAxisCoord + overflow[minSide];
|
|
568
559
|
const max = mainAxisCoord - overflow[maxSide];
|
|
569
|
-
mainAxisCoord =
|
|
560
|
+
mainAxisCoord = clamp(min, mainAxisCoord, max);
|
|
570
561
|
}
|
|
571
562
|
if (checkCrossAxis) {
|
|
572
563
|
const minSide = crossAxis === 'y' ? 'top' : 'left';
|
|
573
564
|
const maxSide = crossAxis === 'y' ? 'bottom' : 'right';
|
|
574
565
|
const min = crossAxisCoord + overflow[minSide];
|
|
575
566
|
const max = crossAxisCoord - overflow[maxSide];
|
|
576
|
-
crossAxisCoord =
|
|
567
|
+
crossAxisCoord = clamp(min, crossAxisCoord, max);
|
|
577
568
|
}
|
|
578
569
|
const limitedCoords = limiter.fn({
|
|
579
570
|
...state,
|
|
@@ -618,8 +609,7 @@ const size = function (options) {
|
|
|
618
609
|
const overflow = await detectOverflow(state, detectOverflowOptions);
|
|
619
610
|
const side = getSide(placement);
|
|
620
611
|
const alignment = getAlignment(placement);
|
|
621
|
-
const
|
|
622
|
-
const isXAxis = axis === 'x';
|
|
612
|
+
const isYAxis = getSideAxis(placement) === 'y';
|
|
623
613
|
const {
|
|
624
614
|
width,
|
|
625
615
|
height
|
|
@@ -638,22 +628,22 @@ const size = function (options) {
|
|
|
638
628
|
const noShift = !state.middlewareData.shift;
|
|
639
629
|
let availableHeight = overflowAvailableHeight;
|
|
640
630
|
let availableWidth = overflowAvailableWidth;
|
|
641
|
-
if (
|
|
631
|
+
if (isYAxis) {
|
|
642
632
|
const maximumClippingWidth = width - overflow.left - overflow.right;
|
|
643
|
-
availableWidth = alignment || noShift ? min
|
|
633
|
+
availableWidth = alignment || noShift ? min(overflowAvailableWidth, maximumClippingWidth) : maximumClippingWidth;
|
|
644
634
|
} else {
|
|
645
635
|
const maximumClippingHeight = height - overflow.top - overflow.bottom;
|
|
646
|
-
availableHeight = alignment || noShift ? min
|
|
636
|
+
availableHeight = alignment || noShift ? min(overflowAvailableHeight, maximumClippingHeight) : maximumClippingHeight;
|
|
647
637
|
}
|
|
648
638
|
if (noShift && !alignment) {
|
|
649
|
-
const xMin = max
|
|
650
|
-
const xMax = max
|
|
651
|
-
const yMin = max
|
|
652
|
-
const yMax = max
|
|
653
|
-
if (
|
|
654
|
-
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max
|
|
639
|
+
const xMin = max(overflow.left, 0);
|
|
640
|
+
const xMax = max(overflow.right, 0);
|
|
641
|
+
const yMin = max(overflow.top, 0);
|
|
642
|
+
const yMax = max(overflow.bottom, 0);
|
|
643
|
+
if (isYAxis) {
|
|
644
|
+
availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
|
|
655
645
|
} else {
|
|
656
|
-
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max
|
|
646
|
+
availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
|
|
657
647
|
}
|
|
658
648
|
}
|
|
659
649
|
await apply({
|
|
@@ -674,18 +664,6 @@ const size = function (options) {
|
|
|
674
664
|
};
|
|
675
665
|
};
|
|
676
666
|
|
|
677
|
-
function getWindow(node) {
|
|
678
|
-
var _node$ownerDocument;
|
|
679
|
-
return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
680
|
-
}
|
|
681
|
-
|
|
682
|
-
function getComputedStyle$1(element) {
|
|
683
|
-
return getWindow(element).getComputedStyle(element);
|
|
684
|
-
}
|
|
685
|
-
|
|
686
|
-
function isNode(value) {
|
|
687
|
-
return value instanceof getWindow(value).Node;
|
|
688
|
-
}
|
|
689
667
|
function getNodeName(node) {
|
|
690
668
|
if (isNode(node)) {
|
|
691
669
|
return (node.nodeName || '').toLowerCase();
|
|
@@ -695,16 +673,29 @@ function getNodeName(node) {
|
|
|
695
673
|
// https://github.com/floating-ui/floating-ui/issues/2317
|
|
696
674
|
return '#document';
|
|
697
675
|
}
|
|
698
|
-
|
|
676
|
+
function getWindow(node) {
|
|
677
|
+
var _node$ownerDocument;
|
|
678
|
+
return (node == null ? void 0 : (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
|
|
679
|
+
}
|
|
680
|
+
function getDocumentElement(node) {
|
|
681
|
+
var _ref;
|
|
682
|
+
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
683
|
+
}
|
|
684
|
+
function isNode(value) {
|
|
685
|
+
return value instanceof Node || value instanceof getWindow(value).Node;
|
|
686
|
+
}
|
|
687
|
+
function isElement(value) {
|
|
688
|
+
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
689
|
+
}
|
|
699
690
|
function isHTMLElement(value) {
|
|
700
691
|
return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
|
|
701
692
|
}
|
|
702
|
-
function isShadowRoot(
|
|
693
|
+
function isShadowRoot(value) {
|
|
703
694
|
// Browsers without `ShadowRoot` support.
|
|
704
695
|
if (typeof ShadowRoot === 'undefined') {
|
|
705
696
|
return false;
|
|
706
697
|
}
|
|
707
|
-
return
|
|
698
|
+
return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
|
|
708
699
|
}
|
|
709
700
|
function isOverflowElement(element) {
|
|
710
701
|
const {
|
|
@@ -712,38 +703,93 @@ function isOverflowElement(element) {
|
|
|
712
703
|
overflowX,
|
|
713
704
|
overflowY,
|
|
714
705
|
display
|
|
715
|
-
} = getComputedStyle
|
|
706
|
+
} = getComputedStyle(element);
|
|
716
707
|
return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !['inline', 'contents'].includes(display);
|
|
717
708
|
}
|
|
718
709
|
function isTableElement(element) {
|
|
719
710
|
return ['table', 'td', 'th'].includes(getNodeName(element));
|
|
720
711
|
}
|
|
721
712
|
function isContainingBlock(element) {
|
|
722
|
-
const
|
|
723
|
-
const css = getComputedStyle
|
|
713
|
+
const webkit = isWebKit();
|
|
714
|
+
const css = getComputedStyle(element);
|
|
724
715
|
|
|
725
716
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
726
|
-
return css.transform !== 'none' || css.perspective !== 'none' || (css.containerType ? css.containerType !== 'normal' : false) || !
|
|
717
|
+
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));
|
|
718
|
+
}
|
|
719
|
+
function getContainingBlock(element) {
|
|
720
|
+
let currentNode = getParentNode(element);
|
|
721
|
+
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
722
|
+
if (isContainingBlock(currentNode)) {
|
|
723
|
+
return currentNode;
|
|
724
|
+
} else {
|
|
725
|
+
currentNode = getParentNode(currentNode);
|
|
726
|
+
}
|
|
727
|
+
}
|
|
728
|
+
return null;
|
|
727
729
|
}
|
|
728
|
-
function
|
|
730
|
+
function isWebKit() {
|
|
729
731
|
if (typeof CSS === 'undefined' || !CSS.supports) return false;
|
|
730
732
|
return CSS.supports('-webkit-backdrop-filter', 'none');
|
|
731
733
|
}
|
|
732
734
|
function isLastTraversableNode(node) {
|
|
733
735
|
return ['html', 'body', '#document'].includes(getNodeName(node));
|
|
734
736
|
}
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
}
|
|
737
|
+
function getComputedStyle(element) {
|
|
738
|
+
return getWindow(element).getComputedStyle(element);
|
|
739
|
+
}
|
|
740
|
+
function getNodeScroll(element) {
|
|
741
|
+
if (isElement(element)) {
|
|
742
|
+
return {
|
|
743
|
+
scrollLeft: element.scrollLeft,
|
|
744
|
+
scrollTop: element.scrollTop
|
|
745
|
+
};
|
|
746
|
+
}
|
|
747
|
+
return {
|
|
748
|
+
scrollLeft: element.pageXOffset,
|
|
749
|
+
scrollTop: element.pageYOffset
|
|
750
|
+
};
|
|
751
|
+
}
|
|
752
|
+
function getParentNode(node) {
|
|
753
|
+
if (getNodeName(node) === 'html') {
|
|
754
|
+
return node;
|
|
755
|
+
}
|
|
756
|
+
const result =
|
|
757
|
+
// Step into the shadow DOM of the parent of a slotted node.
|
|
758
|
+
node.assignedSlot ||
|
|
759
|
+
// DOM Element detected.
|
|
760
|
+
node.parentNode ||
|
|
761
|
+
// ShadowRoot detected.
|
|
762
|
+
isShadowRoot(node) && node.host ||
|
|
763
|
+
// Fallback.
|
|
764
|
+
getDocumentElement(node);
|
|
765
|
+
return isShadowRoot(result) ? result.host : result;
|
|
766
|
+
}
|
|
767
|
+
function getNearestOverflowAncestor(node) {
|
|
768
|
+
const parentNode = getParentNode(node);
|
|
769
|
+
if (isLastTraversableNode(parentNode)) {
|
|
770
|
+
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
771
|
+
}
|
|
772
|
+
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
773
|
+
return parentNode;
|
|
774
|
+
}
|
|
775
|
+
return getNearestOverflowAncestor(parentNode);
|
|
776
|
+
}
|
|
777
|
+
function getOverflowAncestors(node, list) {
|
|
778
|
+
var _node$ownerDocument2;
|
|
779
|
+
if (list === void 0) {
|
|
780
|
+
list = [];
|
|
781
|
+
}
|
|
782
|
+
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
783
|
+
const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
|
|
784
|
+
const win = getWindow(scrollableAncestor);
|
|
785
|
+
if (isBody) {
|
|
786
|
+
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
|
|
787
|
+
}
|
|
788
|
+
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
|
|
789
|
+
}
|
|
744
790
|
|
|
745
791
|
function getCssDimensions(element) {
|
|
746
|
-
const css = getComputedStyle
|
|
792
|
+
const css = getComputedStyle(element);
|
|
747
793
|
// In testing environments, the `width` and `height` properties are empty
|
|
748
794
|
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
749
795
|
let width = parseFloat(css.width) || 0;
|
|
@@ -763,10 +809,6 @@ function getCssDimensions(element) {
|
|
|
763
809
|
};
|
|
764
810
|
}
|
|
765
811
|
|
|
766
|
-
function isElement(value) {
|
|
767
|
-
return value instanceof Element || value instanceof getWindow(value).Element;
|
|
768
|
-
}
|
|
769
|
-
|
|
770
812
|
function unwrapElement(element) {
|
|
771
813
|
return !isElement(element) ? element.contextElement : element;
|
|
772
814
|
}
|
|
@@ -802,7 +844,7 @@ function getScale(element) {
|
|
|
802
844
|
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
803
845
|
function getVisualOffsets(element) {
|
|
804
846
|
const win = getWindow(element);
|
|
805
|
-
if (!
|
|
847
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
806
848
|
return noOffsets;
|
|
807
849
|
}
|
|
808
850
|
return {
|
|
@@ -871,24 +913,6 @@ function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetPar
|
|
|
871
913
|
});
|
|
872
914
|
}
|
|
873
915
|
|
|
874
|
-
function getNodeScroll(element) {
|
|
875
|
-
if (isElement(element)) {
|
|
876
|
-
return {
|
|
877
|
-
scrollLeft: element.scrollLeft,
|
|
878
|
-
scrollTop: element.scrollTop
|
|
879
|
-
};
|
|
880
|
-
}
|
|
881
|
-
return {
|
|
882
|
-
scrollLeft: element.pageXOffset,
|
|
883
|
-
scrollTop: element.pageYOffset
|
|
884
|
-
};
|
|
885
|
-
}
|
|
886
|
-
|
|
887
|
-
function getDocumentElement(node) {
|
|
888
|
-
var _ref;
|
|
889
|
-
return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
|
|
890
|
-
}
|
|
891
|
-
|
|
892
916
|
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
893
917
|
let {
|
|
894
918
|
rect,
|
|
@@ -945,7 +969,7 @@ function getDocumentRect(element) {
|
|
|
945
969
|
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
946
970
|
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
947
971
|
const y = -scroll.scrollTop;
|
|
948
|
-
if (getComputedStyle
|
|
972
|
+
if (getComputedStyle(body).direction === 'rtl') {
|
|
949
973
|
x += max(html.clientWidth, body.clientWidth) - width;
|
|
950
974
|
}
|
|
951
975
|
return {
|
|
@@ -956,47 +980,6 @@ function getDocumentRect(element) {
|
|
|
956
980
|
};
|
|
957
981
|
}
|
|
958
982
|
|
|
959
|
-
function getParentNode(node) {
|
|
960
|
-
if (getNodeName(node) === 'html') {
|
|
961
|
-
return node;
|
|
962
|
-
}
|
|
963
|
-
const result =
|
|
964
|
-
// Step into the shadow DOM of the parent of a slotted node.
|
|
965
|
-
node.assignedSlot ||
|
|
966
|
-
// DOM Element detected.
|
|
967
|
-
node.parentNode ||
|
|
968
|
-
// ShadowRoot detected.
|
|
969
|
-
isShadowRoot(node) && node.host ||
|
|
970
|
-
// Fallback.
|
|
971
|
-
getDocumentElement(node);
|
|
972
|
-
return isShadowRoot(result) ? result.host : result;
|
|
973
|
-
}
|
|
974
|
-
|
|
975
|
-
function getNearestOverflowAncestor(node) {
|
|
976
|
-
const parentNode = getParentNode(node);
|
|
977
|
-
if (isLastTraversableNode(parentNode)) {
|
|
978
|
-
return node.ownerDocument ? node.ownerDocument.body : node.body;
|
|
979
|
-
}
|
|
980
|
-
if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
|
|
981
|
-
return parentNode;
|
|
982
|
-
}
|
|
983
|
-
return getNearestOverflowAncestor(parentNode);
|
|
984
|
-
}
|
|
985
|
-
|
|
986
|
-
function getOverflowAncestors(node, list) {
|
|
987
|
-
var _node$ownerDocument;
|
|
988
|
-
if (list === void 0) {
|
|
989
|
-
list = [];
|
|
990
|
-
}
|
|
991
|
-
const scrollableAncestor = getNearestOverflowAncestor(node);
|
|
992
|
-
const isBody = scrollableAncestor === ((_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.body);
|
|
993
|
-
const win = getWindow(scrollableAncestor);
|
|
994
|
-
if (isBody) {
|
|
995
|
-
return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : []);
|
|
996
|
-
}
|
|
997
|
-
return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor));
|
|
998
|
-
}
|
|
999
|
-
|
|
1000
983
|
function getViewportRect(element, strategy) {
|
|
1001
984
|
const win = getWindow(element);
|
|
1002
985
|
const html = getDocumentElement(element);
|
|
@@ -1008,7 +991,7 @@ function getViewportRect(element, strategy) {
|
|
|
1008
991
|
if (visualViewport) {
|
|
1009
992
|
width = visualViewport.width;
|
|
1010
993
|
height = visualViewport.height;
|
|
1011
|
-
const visualViewportBased =
|
|
994
|
+
const visualViewportBased = isWebKit();
|
|
1012
995
|
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
1013
996
|
x = visualViewport.offsetLeft;
|
|
1014
997
|
y = visualViewport.offsetTop;
|
|
@@ -1062,7 +1045,7 @@ function hasFixedPositionAncestor(element, stopNode) {
|
|
|
1062
1045
|
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
1063
1046
|
return false;
|
|
1064
1047
|
}
|
|
1065
|
-
return getComputedStyle
|
|
1048
|
+
return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
1066
1049
|
}
|
|
1067
1050
|
|
|
1068
1051
|
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
@@ -1075,12 +1058,12 @@ function getClippingElementAncestors(element, cache) {
|
|
|
1075
1058
|
}
|
|
1076
1059
|
let result = getOverflowAncestors(element).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
1077
1060
|
let currentContainingBlockComputedStyle = null;
|
|
1078
|
-
const elementIsFixed = getComputedStyle
|
|
1061
|
+
const elementIsFixed = getComputedStyle(element).position === 'fixed';
|
|
1079
1062
|
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
1080
1063
|
|
|
1081
1064
|
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
1082
1065
|
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
1083
|
-
const computedStyle = getComputedStyle
|
|
1066
|
+
const computedStyle = getComputedStyle(currentNode);
|
|
1084
1067
|
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
1085
1068
|
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
1086
1069
|
currentContainingBlockComputedStyle = null;
|
|
@@ -1145,7 +1128,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1145
1128
|
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
1146
1129
|
scroll = getNodeScroll(offsetParent);
|
|
1147
1130
|
}
|
|
1148
|
-
if (
|
|
1131
|
+
if (isOffsetParentAnElement) {
|
|
1149
1132
|
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
1150
1133
|
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
1151
1134
|
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
@@ -1162,7 +1145,7 @@ function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
|
1162
1145
|
}
|
|
1163
1146
|
|
|
1164
1147
|
function getTrueOffsetParent(element, polyfill) {
|
|
1165
|
-
if (!isHTMLElement(element) || getComputedStyle
|
|
1148
|
+
if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
|
|
1166
1149
|
return null;
|
|
1167
1150
|
}
|
|
1168
1151
|
if (polyfill) {
|
|
@@ -1170,17 +1153,6 @@ function getTrueOffsetParent(element, polyfill) {
|
|
|
1170
1153
|
}
|
|
1171
1154
|
return element.offsetParent;
|
|
1172
1155
|
}
|
|
1173
|
-
function getContainingBlock(element) {
|
|
1174
|
-
let currentNode = getParentNode(element);
|
|
1175
|
-
while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
1176
|
-
if (isContainingBlock(currentNode)) {
|
|
1177
|
-
return currentNode;
|
|
1178
|
-
} else {
|
|
1179
|
-
currentNode = getParentNode(currentNode);
|
|
1180
|
-
}
|
|
1181
|
-
}
|
|
1182
|
-
return null;
|
|
1183
|
-
}
|
|
1184
1156
|
|
|
1185
1157
|
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
1186
1158
|
// such as table ancestors and cross browser bugs.
|
|
@@ -1190,10 +1162,10 @@ function getOffsetParent(element, polyfill) {
|
|
|
1190
1162
|
return window;
|
|
1191
1163
|
}
|
|
1192
1164
|
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
1193
|
-
while (offsetParent && isTableElement(offsetParent) && getComputedStyle
|
|
1165
|
+
while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
|
|
1194
1166
|
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
1195
1167
|
}
|
|
1196
|
-
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle
|
|
1168
|
+
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
|
|
1197
1169
|
return window;
|
|
1198
1170
|
}
|
|
1199
1171
|
return offsetParent || getContainingBlock(element) || window;
|