@teamturing/react-kit 2.12.0 → 2.14.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/core/Overlay/index.d.ts +18 -0
- package/dist/core/OverlayPopper/index.d.ts +16 -0
- package/dist/core/Pagination/index.d.ts +327 -0
- package/dist/core/Pill/index.d.ts +47 -0
- package/dist/hook/useFocusTrap.d.ts +13 -0
- package/dist/hook/useFocusZone.d.ts +15 -0
- package/dist/index.d.ts +12 -0
- package/dist/index.js +3323 -581
- package/esm/core/Dialog/index.js +8 -36
- package/esm/core/Overlay/index.js +92 -0
- package/esm/core/OverlayPopper/index.js +69 -0
- package/esm/core/Pagination/index.js +273 -0
- package/esm/core/Pill/index.js +129 -0
- package/esm/hook/useFocusTrap.js +39 -0
- package/esm/hook/useFocusZone.js +35 -0
- package/esm/index.js +8 -0
- package/esm/node_modules/@floating-ui/core/dist/floating-ui.core.js +475 -0
- package/esm/node_modules/@floating-ui/dom/dist/floating-ui.dom.js +599 -0
- package/esm/node_modules/@floating-ui/react-dom/dist/floating-ui.react-dom.js +229 -0
- package/esm/node_modules/@floating-ui/utils/dist/floating-ui.utils.js +121 -0
- package/esm/node_modules/@floating-ui/utils/dom/dist/floating-ui.utils.dom.js +128 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/focus-trap.js +105 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/focus-zone.js +436 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/polyfills/event-listener-signal.js +38 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/utils/iterate-focusable-elements.js +65 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/utils/unique-id.js +6 -0
- package/esm/node_modules/@primer/behaviors/dist/esm/utils/user-agent.js +9 -0
- package/esm/packages/utils/esm/noop.js +6 -0
- package/package.json +5 -2
|
@@ -0,0 +1,599 @@
|
|
|
1
|
+
import { computePosition as computePosition$1 } from '../../core/dist/floating-ui.core.js';
|
|
2
|
+
export { detectOverflow, flip, offset, shift } from '../../core/dist/floating-ui.core.js';
|
|
3
|
+
import { createCoords, rectToClientRect, round, floor, max, min } from '../../utils/dist/floating-ui.utils.js';
|
|
4
|
+
import { getOverflowAncestors, isElement, getWindow, getComputedStyle, getDocumentElement, isHTMLElement, isWebKit, getNodeName, isOverflowElement, getNodeScroll, isTableElement, isContainingBlock, getContainingBlock, getParentNode, isLastTraversableNode } from '../../utils/dom/dist/floating-ui.utils.dom.js';
|
|
5
|
+
|
|
6
|
+
function getCssDimensions(element) {
|
|
7
|
+
const css = getComputedStyle(element);
|
|
8
|
+
// In testing environments, the `width` and `height` properties are empty
|
|
9
|
+
// strings for SVG elements, returning NaN. Fallback to `0` in this case.
|
|
10
|
+
let width = parseFloat(css.width) || 0;
|
|
11
|
+
let height = parseFloat(css.height) || 0;
|
|
12
|
+
const hasOffset = isHTMLElement(element);
|
|
13
|
+
const offsetWidth = hasOffset ? element.offsetWidth : width;
|
|
14
|
+
const offsetHeight = hasOffset ? element.offsetHeight : height;
|
|
15
|
+
const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
|
|
16
|
+
if (shouldFallback) {
|
|
17
|
+
width = offsetWidth;
|
|
18
|
+
height = offsetHeight;
|
|
19
|
+
}
|
|
20
|
+
return {
|
|
21
|
+
width,
|
|
22
|
+
height,
|
|
23
|
+
$: shouldFallback
|
|
24
|
+
};
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
function unwrapElement(element) {
|
|
28
|
+
return !isElement(element) ? element.contextElement : element;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
function getScale(element) {
|
|
32
|
+
const domElement = unwrapElement(element);
|
|
33
|
+
if (!isHTMLElement(domElement)) {
|
|
34
|
+
return createCoords(1);
|
|
35
|
+
}
|
|
36
|
+
const rect = domElement.getBoundingClientRect();
|
|
37
|
+
const {
|
|
38
|
+
width,
|
|
39
|
+
height,
|
|
40
|
+
$
|
|
41
|
+
} = getCssDimensions(domElement);
|
|
42
|
+
let x = ($ ? round(rect.width) : rect.width) / width;
|
|
43
|
+
let y = ($ ? round(rect.height) : rect.height) / height;
|
|
44
|
+
|
|
45
|
+
// 0, NaN, or Infinity should always fallback to 1.
|
|
46
|
+
|
|
47
|
+
if (!x || !Number.isFinite(x)) {
|
|
48
|
+
x = 1;
|
|
49
|
+
}
|
|
50
|
+
if (!y || !Number.isFinite(y)) {
|
|
51
|
+
y = 1;
|
|
52
|
+
}
|
|
53
|
+
return {
|
|
54
|
+
x,
|
|
55
|
+
y
|
|
56
|
+
};
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
const noOffsets = /*#__PURE__*/createCoords(0);
|
|
60
|
+
function getVisualOffsets(element) {
|
|
61
|
+
const win = getWindow(element);
|
|
62
|
+
if (!isWebKit() || !win.visualViewport) {
|
|
63
|
+
return noOffsets;
|
|
64
|
+
}
|
|
65
|
+
return {
|
|
66
|
+
x: win.visualViewport.offsetLeft,
|
|
67
|
+
y: win.visualViewport.offsetTop
|
|
68
|
+
};
|
|
69
|
+
}
|
|
70
|
+
function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
|
|
71
|
+
if (isFixed === void 0) {
|
|
72
|
+
isFixed = false;
|
|
73
|
+
}
|
|
74
|
+
if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
|
|
75
|
+
return false;
|
|
76
|
+
}
|
|
77
|
+
return isFixed;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
|
|
81
|
+
if (includeScale === void 0) {
|
|
82
|
+
includeScale = false;
|
|
83
|
+
}
|
|
84
|
+
if (isFixedStrategy === void 0) {
|
|
85
|
+
isFixedStrategy = false;
|
|
86
|
+
}
|
|
87
|
+
const clientRect = element.getBoundingClientRect();
|
|
88
|
+
const domElement = unwrapElement(element);
|
|
89
|
+
let scale = createCoords(1);
|
|
90
|
+
if (includeScale) {
|
|
91
|
+
if (offsetParent) {
|
|
92
|
+
if (isElement(offsetParent)) {
|
|
93
|
+
scale = getScale(offsetParent);
|
|
94
|
+
}
|
|
95
|
+
} else {
|
|
96
|
+
scale = getScale(element);
|
|
97
|
+
}
|
|
98
|
+
}
|
|
99
|
+
const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
|
|
100
|
+
let x = (clientRect.left + visualOffsets.x) / scale.x;
|
|
101
|
+
let y = (clientRect.top + visualOffsets.y) / scale.y;
|
|
102
|
+
let width = clientRect.width / scale.x;
|
|
103
|
+
let height = clientRect.height / scale.y;
|
|
104
|
+
if (domElement) {
|
|
105
|
+
const win = getWindow(domElement);
|
|
106
|
+
const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
|
|
107
|
+
let currentIFrame = win.frameElement;
|
|
108
|
+
while (currentIFrame && offsetParent && offsetWin !== win) {
|
|
109
|
+
const iframeScale = getScale(currentIFrame);
|
|
110
|
+
const iframeRect = currentIFrame.getBoundingClientRect();
|
|
111
|
+
const css = getComputedStyle(currentIFrame);
|
|
112
|
+
const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
|
|
113
|
+
const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
|
|
114
|
+
x *= iframeScale.x;
|
|
115
|
+
y *= iframeScale.y;
|
|
116
|
+
width *= iframeScale.x;
|
|
117
|
+
height *= iframeScale.y;
|
|
118
|
+
x += left;
|
|
119
|
+
y += top;
|
|
120
|
+
currentIFrame = getWindow(currentIFrame).frameElement;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
return rectToClientRect({
|
|
124
|
+
width,
|
|
125
|
+
height,
|
|
126
|
+
x,
|
|
127
|
+
y
|
|
128
|
+
});
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
|
|
132
|
+
let {
|
|
133
|
+
rect,
|
|
134
|
+
offsetParent,
|
|
135
|
+
strategy
|
|
136
|
+
} = _ref;
|
|
137
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
138
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
139
|
+
if (offsetParent === documentElement) {
|
|
140
|
+
return rect;
|
|
141
|
+
}
|
|
142
|
+
let scroll = {
|
|
143
|
+
scrollLeft: 0,
|
|
144
|
+
scrollTop: 0
|
|
145
|
+
};
|
|
146
|
+
let scale = createCoords(1);
|
|
147
|
+
const offsets = createCoords(0);
|
|
148
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && strategy !== 'fixed') {
|
|
149
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
150
|
+
scroll = getNodeScroll(offsetParent);
|
|
151
|
+
}
|
|
152
|
+
if (isHTMLElement(offsetParent)) {
|
|
153
|
+
const offsetRect = getBoundingClientRect(offsetParent);
|
|
154
|
+
scale = getScale(offsetParent);
|
|
155
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
156
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
157
|
+
}
|
|
158
|
+
}
|
|
159
|
+
return {
|
|
160
|
+
width: rect.width * scale.x,
|
|
161
|
+
height: rect.height * scale.y,
|
|
162
|
+
x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x,
|
|
163
|
+
y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y
|
|
164
|
+
};
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
function getClientRects(element) {
|
|
168
|
+
return Array.from(element.getClientRects());
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
function getWindowScrollBarX(element) {
|
|
172
|
+
// If <html> has a CSS width greater than the viewport, then this will be
|
|
173
|
+
// incorrect for RTL.
|
|
174
|
+
return getBoundingClientRect(getDocumentElement(element)).left + getNodeScroll(element).scrollLeft;
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
// Gets the entire size of the scrollable document area, even extending outside
|
|
178
|
+
// of the `<html>` and `<body>` rect bounds if horizontally scrollable.
|
|
179
|
+
function getDocumentRect(element) {
|
|
180
|
+
const html = getDocumentElement(element);
|
|
181
|
+
const scroll = getNodeScroll(element);
|
|
182
|
+
const body = element.ownerDocument.body;
|
|
183
|
+
const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
|
|
184
|
+
const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
|
|
185
|
+
let x = -scroll.scrollLeft + getWindowScrollBarX(element);
|
|
186
|
+
const y = -scroll.scrollTop;
|
|
187
|
+
if (getComputedStyle(body).direction === 'rtl') {
|
|
188
|
+
x += max(html.clientWidth, body.clientWidth) - width;
|
|
189
|
+
}
|
|
190
|
+
return {
|
|
191
|
+
width,
|
|
192
|
+
height,
|
|
193
|
+
x,
|
|
194
|
+
y
|
|
195
|
+
};
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
function getViewportRect(element, strategy) {
|
|
199
|
+
const win = getWindow(element);
|
|
200
|
+
const html = getDocumentElement(element);
|
|
201
|
+
const visualViewport = win.visualViewport;
|
|
202
|
+
let width = html.clientWidth;
|
|
203
|
+
let height = html.clientHeight;
|
|
204
|
+
let x = 0;
|
|
205
|
+
let y = 0;
|
|
206
|
+
if (visualViewport) {
|
|
207
|
+
width = visualViewport.width;
|
|
208
|
+
height = visualViewport.height;
|
|
209
|
+
const visualViewportBased = isWebKit();
|
|
210
|
+
if (!visualViewportBased || visualViewportBased && strategy === 'fixed') {
|
|
211
|
+
x = visualViewport.offsetLeft;
|
|
212
|
+
y = visualViewport.offsetTop;
|
|
213
|
+
}
|
|
214
|
+
}
|
|
215
|
+
return {
|
|
216
|
+
width,
|
|
217
|
+
height,
|
|
218
|
+
x,
|
|
219
|
+
y
|
|
220
|
+
};
|
|
221
|
+
}
|
|
222
|
+
|
|
223
|
+
// Returns the inner client rect, subtracting scrollbars if present.
|
|
224
|
+
function getInnerBoundingClientRect(element, strategy) {
|
|
225
|
+
const clientRect = getBoundingClientRect(element, true, strategy === 'fixed');
|
|
226
|
+
const top = clientRect.top + element.clientTop;
|
|
227
|
+
const left = clientRect.left + element.clientLeft;
|
|
228
|
+
const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
|
|
229
|
+
const width = element.clientWidth * scale.x;
|
|
230
|
+
const height = element.clientHeight * scale.y;
|
|
231
|
+
const x = left * scale.x;
|
|
232
|
+
const y = top * scale.y;
|
|
233
|
+
return {
|
|
234
|
+
width,
|
|
235
|
+
height,
|
|
236
|
+
x,
|
|
237
|
+
y
|
|
238
|
+
};
|
|
239
|
+
}
|
|
240
|
+
function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
|
|
241
|
+
let rect;
|
|
242
|
+
if (clippingAncestor === 'viewport') {
|
|
243
|
+
rect = getViewportRect(element, strategy);
|
|
244
|
+
} else if (clippingAncestor === 'document') {
|
|
245
|
+
rect = getDocumentRect(getDocumentElement(element));
|
|
246
|
+
} else if (isElement(clippingAncestor)) {
|
|
247
|
+
rect = getInnerBoundingClientRect(clippingAncestor, strategy);
|
|
248
|
+
} else {
|
|
249
|
+
const visualOffsets = getVisualOffsets(element);
|
|
250
|
+
rect = {
|
|
251
|
+
...clippingAncestor,
|
|
252
|
+
x: clippingAncestor.x - visualOffsets.x,
|
|
253
|
+
y: clippingAncestor.y - visualOffsets.y
|
|
254
|
+
};
|
|
255
|
+
}
|
|
256
|
+
return rectToClientRect(rect);
|
|
257
|
+
}
|
|
258
|
+
function hasFixedPositionAncestor(element, stopNode) {
|
|
259
|
+
const parentNode = getParentNode(element);
|
|
260
|
+
if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
|
|
261
|
+
return false;
|
|
262
|
+
}
|
|
263
|
+
return getComputedStyle(parentNode).position === 'fixed' || hasFixedPositionAncestor(parentNode, stopNode);
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
// A "clipping ancestor" is an `overflow` element with the characteristic of
|
|
267
|
+
// clipping (or hiding) child elements. This returns all clipping ancestors
|
|
268
|
+
// of the given element up the tree.
|
|
269
|
+
function getClippingElementAncestors(element, cache) {
|
|
270
|
+
const cachedResult = cache.get(element);
|
|
271
|
+
if (cachedResult) {
|
|
272
|
+
return cachedResult;
|
|
273
|
+
}
|
|
274
|
+
let result = getOverflowAncestors(element, [], false).filter(el => isElement(el) && getNodeName(el) !== 'body');
|
|
275
|
+
let currentContainingBlockComputedStyle = null;
|
|
276
|
+
const elementIsFixed = getComputedStyle(element).position === 'fixed';
|
|
277
|
+
let currentNode = elementIsFixed ? getParentNode(element) : element;
|
|
278
|
+
|
|
279
|
+
// https://developer.mozilla.org/en-US/docs/Web/CSS/Containing_block#identifying_the_containing_block
|
|
280
|
+
while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
|
|
281
|
+
const computedStyle = getComputedStyle(currentNode);
|
|
282
|
+
const currentNodeIsContaining = isContainingBlock(currentNode);
|
|
283
|
+
if (!currentNodeIsContaining && computedStyle.position === 'fixed') {
|
|
284
|
+
currentContainingBlockComputedStyle = null;
|
|
285
|
+
}
|
|
286
|
+
const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === 'static' && !!currentContainingBlockComputedStyle && ['absolute', 'fixed'].includes(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
|
|
287
|
+
if (shouldDropCurrentNode) {
|
|
288
|
+
// Drop non-containing blocks.
|
|
289
|
+
result = result.filter(ancestor => ancestor !== currentNode);
|
|
290
|
+
} else {
|
|
291
|
+
// Record last containing block for next iteration.
|
|
292
|
+
currentContainingBlockComputedStyle = computedStyle;
|
|
293
|
+
}
|
|
294
|
+
currentNode = getParentNode(currentNode);
|
|
295
|
+
}
|
|
296
|
+
cache.set(element, result);
|
|
297
|
+
return result;
|
|
298
|
+
}
|
|
299
|
+
|
|
300
|
+
// Gets the maximum area that the element is visible in due to any number of
|
|
301
|
+
// clipping ancestors.
|
|
302
|
+
function getClippingRect(_ref) {
|
|
303
|
+
let {
|
|
304
|
+
element,
|
|
305
|
+
boundary,
|
|
306
|
+
rootBoundary,
|
|
307
|
+
strategy
|
|
308
|
+
} = _ref;
|
|
309
|
+
const elementClippingAncestors = boundary === 'clippingAncestors' ? getClippingElementAncestors(element, this._c) : [].concat(boundary);
|
|
310
|
+
const clippingAncestors = [...elementClippingAncestors, rootBoundary];
|
|
311
|
+
const firstClippingAncestor = clippingAncestors[0];
|
|
312
|
+
const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
|
|
313
|
+
const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
|
|
314
|
+
accRect.top = max(rect.top, accRect.top);
|
|
315
|
+
accRect.right = min(rect.right, accRect.right);
|
|
316
|
+
accRect.bottom = min(rect.bottom, accRect.bottom);
|
|
317
|
+
accRect.left = max(rect.left, accRect.left);
|
|
318
|
+
return accRect;
|
|
319
|
+
}, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
|
|
320
|
+
return {
|
|
321
|
+
width: clippingRect.right - clippingRect.left,
|
|
322
|
+
height: clippingRect.bottom - clippingRect.top,
|
|
323
|
+
x: clippingRect.left,
|
|
324
|
+
y: clippingRect.top
|
|
325
|
+
};
|
|
326
|
+
}
|
|
327
|
+
|
|
328
|
+
function getDimensions(element) {
|
|
329
|
+
return getCssDimensions(element);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
|
|
333
|
+
const isOffsetParentAnElement = isHTMLElement(offsetParent);
|
|
334
|
+
const documentElement = getDocumentElement(offsetParent);
|
|
335
|
+
const isFixed = strategy === 'fixed';
|
|
336
|
+
const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
|
|
337
|
+
let scroll = {
|
|
338
|
+
scrollLeft: 0,
|
|
339
|
+
scrollTop: 0
|
|
340
|
+
};
|
|
341
|
+
const offsets = createCoords(0);
|
|
342
|
+
if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
|
|
343
|
+
if (getNodeName(offsetParent) !== 'body' || isOverflowElement(documentElement)) {
|
|
344
|
+
scroll = getNodeScroll(offsetParent);
|
|
345
|
+
}
|
|
346
|
+
if (isOffsetParentAnElement) {
|
|
347
|
+
const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
|
|
348
|
+
offsets.x = offsetRect.x + offsetParent.clientLeft;
|
|
349
|
+
offsets.y = offsetRect.y + offsetParent.clientTop;
|
|
350
|
+
} else if (documentElement) {
|
|
351
|
+
offsets.x = getWindowScrollBarX(documentElement);
|
|
352
|
+
}
|
|
353
|
+
}
|
|
354
|
+
return {
|
|
355
|
+
x: rect.left + scroll.scrollLeft - offsets.x,
|
|
356
|
+
y: rect.top + scroll.scrollTop - offsets.y,
|
|
357
|
+
width: rect.width,
|
|
358
|
+
height: rect.height
|
|
359
|
+
};
|
|
360
|
+
}
|
|
361
|
+
|
|
362
|
+
function getTrueOffsetParent(element, polyfill) {
|
|
363
|
+
if (!isHTMLElement(element) || getComputedStyle(element).position === 'fixed') {
|
|
364
|
+
return null;
|
|
365
|
+
}
|
|
366
|
+
if (polyfill) {
|
|
367
|
+
return polyfill(element);
|
|
368
|
+
}
|
|
369
|
+
return element.offsetParent;
|
|
370
|
+
}
|
|
371
|
+
|
|
372
|
+
// Gets the closest ancestor positioned element. Handles some edge cases,
|
|
373
|
+
// such as table ancestors and cross browser bugs.
|
|
374
|
+
function getOffsetParent(element, polyfill) {
|
|
375
|
+
const window = getWindow(element);
|
|
376
|
+
if (!isHTMLElement(element)) {
|
|
377
|
+
return window;
|
|
378
|
+
}
|
|
379
|
+
let offsetParent = getTrueOffsetParent(element, polyfill);
|
|
380
|
+
while (offsetParent && isTableElement(offsetParent) && getComputedStyle(offsetParent).position === 'static') {
|
|
381
|
+
offsetParent = getTrueOffsetParent(offsetParent, polyfill);
|
|
382
|
+
}
|
|
383
|
+
if (offsetParent && (getNodeName(offsetParent) === 'html' || getNodeName(offsetParent) === 'body' && getComputedStyle(offsetParent).position === 'static' && !isContainingBlock(offsetParent))) {
|
|
384
|
+
return window;
|
|
385
|
+
}
|
|
386
|
+
return offsetParent || getContainingBlock(element) || window;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
const getElementRects = async function (_ref) {
|
|
390
|
+
let {
|
|
391
|
+
reference,
|
|
392
|
+
floating,
|
|
393
|
+
strategy
|
|
394
|
+
} = _ref;
|
|
395
|
+
const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
|
|
396
|
+
const getDimensionsFn = this.getDimensions;
|
|
397
|
+
return {
|
|
398
|
+
reference: getRectRelativeToOffsetParent(reference, await getOffsetParentFn(floating), strategy),
|
|
399
|
+
floating: {
|
|
400
|
+
x: 0,
|
|
401
|
+
y: 0,
|
|
402
|
+
...(await getDimensionsFn(floating))
|
|
403
|
+
}
|
|
404
|
+
};
|
|
405
|
+
};
|
|
406
|
+
|
|
407
|
+
function isRTL(element) {
|
|
408
|
+
return getComputedStyle(element).direction === 'rtl';
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
const platform = {
|
|
412
|
+
convertOffsetParentRelativeRectToViewportRelativeRect,
|
|
413
|
+
getDocumentElement,
|
|
414
|
+
getClippingRect,
|
|
415
|
+
getOffsetParent,
|
|
416
|
+
getElementRects,
|
|
417
|
+
getClientRects,
|
|
418
|
+
getDimensions,
|
|
419
|
+
getScale,
|
|
420
|
+
isElement,
|
|
421
|
+
isRTL
|
|
422
|
+
};
|
|
423
|
+
|
|
424
|
+
// https://samthor.au/2021/observing-dom/
|
|
425
|
+
function observeMove(element, onMove) {
|
|
426
|
+
let io = null;
|
|
427
|
+
let timeoutId;
|
|
428
|
+
const root = getDocumentElement(element);
|
|
429
|
+
function cleanup() {
|
|
430
|
+
clearTimeout(timeoutId);
|
|
431
|
+
io && io.disconnect();
|
|
432
|
+
io = null;
|
|
433
|
+
}
|
|
434
|
+
function refresh(skip, threshold) {
|
|
435
|
+
if (skip === void 0) {
|
|
436
|
+
skip = false;
|
|
437
|
+
}
|
|
438
|
+
if (threshold === void 0) {
|
|
439
|
+
threshold = 1;
|
|
440
|
+
}
|
|
441
|
+
cleanup();
|
|
442
|
+
const {
|
|
443
|
+
left,
|
|
444
|
+
top,
|
|
445
|
+
width,
|
|
446
|
+
height
|
|
447
|
+
} = element.getBoundingClientRect();
|
|
448
|
+
if (!skip) {
|
|
449
|
+
onMove();
|
|
450
|
+
}
|
|
451
|
+
if (!width || !height) {
|
|
452
|
+
return;
|
|
453
|
+
}
|
|
454
|
+
const insetTop = floor(top);
|
|
455
|
+
const insetRight = floor(root.clientWidth - (left + width));
|
|
456
|
+
const insetBottom = floor(root.clientHeight - (top + height));
|
|
457
|
+
const insetLeft = floor(left);
|
|
458
|
+
const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
|
|
459
|
+
const options = {
|
|
460
|
+
rootMargin,
|
|
461
|
+
threshold: max(0, min(1, threshold)) || 1
|
|
462
|
+
};
|
|
463
|
+
let isFirstUpdate = true;
|
|
464
|
+
function handleObserve(entries) {
|
|
465
|
+
const ratio = entries[0].intersectionRatio;
|
|
466
|
+
if (ratio !== threshold) {
|
|
467
|
+
if (!isFirstUpdate) {
|
|
468
|
+
return refresh();
|
|
469
|
+
}
|
|
470
|
+
if (!ratio) {
|
|
471
|
+
timeoutId = setTimeout(() => {
|
|
472
|
+
refresh(false, 1e-7);
|
|
473
|
+
}, 100);
|
|
474
|
+
} else {
|
|
475
|
+
refresh(false, ratio);
|
|
476
|
+
}
|
|
477
|
+
}
|
|
478
|
+
isFirstUpdate = false;
|
|
479
|
+
}
|
|
480
|
+
|
|
481
|
+
// Older browsers don't support a `document` as the root and will throw an
|
|
482
|
+
// error.
|
|
483
|
+
try {
|
|
484
|
+
io = new IntersectionObserver(handleObserve, {
|
|
485
|
+
...options,
|
|
486
|
+
// Handle <iframe>s
|
|
487
|
+
root: root.ownerDocument
|
|
488
|
+
});
|
|
489
|
+
} catch (e) {
|
|
490
|
+
io = new IntersectionObserver(handleObserve, options);
|
|
491
|
+
}
|
|
492
|
+
io.observe(element);
|
|
493
|
+
}
|
|
494
|
+
refresh(true);
|
|
495
|
+
return cleanup;
|
|
496
|
+
}
|
|
497
|
+
|
|
498
|
+
/**
|
|
499
|
+
* Automatically updates the position of the floating element when necessary.
|
|
500
|
+
* Should only be called when the floating element is mounted on the DOM or
|
|
501
|
+
* visible on the screen.
|
|
502
|
+
* @returns cleanup function that should be invoked when the floating element is
|
|
503
|
+
* removed from the DOM or hidden from the screen.
|
|
504
|
+
* @see https://floating-ui.com/docs/autoUpdate
|
|
505
|
+
*/
|
|
506
|
+
function autoUpdate(reference, floating, update, options) {
|
|
507
|
+
if (options === void 0) {
|
|
508
|
+
options = {};
|
|
509
|
+
}
|
|
510
|
+
const {
|
|
511
|
+
ancestorScroll = true,
|
|
512
|
+
ancestorResize = true,
|
|
513
|
+
elementResize = typeof ResizeObserver === 'function',
|
|
514
|
+
layoutShift = typeof IntersectionObserver === 'function',
|
|
515
|
+
animationFrame = false
|
|
516
|
+
} = options;
|
|
517
|
+
const referenceEl = unwrapElement(reference);
|
|
518
|
+
const ancestors = ancestorScroll || ancestorResize ? [...(referenceEl ? getOverflowAncestors(referenceEl) : []), ...getOverflowAncestors(floating)] : [];
|
|
519
|
+
ancestors.forEach(ancestor => {
|
|
520
|
+
ancestorScroll && ancestor.addEventListener('scroll', update, {
|
|
521
|
+
passive: true
|
|
522
|
+
});
|
|
523
|
+
ancestorResize && ancestor.addEventListener('resize', update);
|
|
524
|
+
});
|
|
525
|
+
const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
|
|
526
|
+
let reobserveFrame = -1;
|
|
527
|
+
let resizeObserver = null;
|
|
528
|
+
if (elementResize) {
|
|
529
|
+
resizeObserver = new ResizeObserver(_ref => {
|
|
530
|
+
let [firstEntry] = _ref;
|
|
531
|
+
if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
|
|
532
|
+
// Prevent update loops when using the `size` middleware.
|
|
533
|
+
// https://github.com/floating-ui/floating-ui/issues/1740
|
|
534
|
+
resizeObserver.unobserve(floating);
|
|
535
|
+
cancelAnimationFrame(reobserveFrame);
|
|
536
|
+
reobserveFrame = requestAnimationFrame(() => {
|
|
537
|
+
resizeObserver && resizeObserver.observe(floating);
|
|
538
|
+
});
|
|
539
|
+
}
|
|
540
|
+
update();
|
|
541
|
+
});
|
|
542
|
+
if (referenceEl && !animationFrame) {
|
|
543
|
+
resizeObserver.observe(referenceEl);
|
|
544
|
+
}
|
|
545
|
+
resizeObserver.observe(floating);
|
|
546
|
+
}
|
|
547
|
+
let frameId;
|
|
548
|
+
let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
|
|
549
|
+
if (animationFrame) {
|
|
550
|
+
frameLoop();
|
|
551
|
+
}
|
|
552
|
+
function frameLoop() {
|
|
553
|
+
const nextRefRect = getBoundingClientRect(reference);
|
|
554
|
+
if (prevRefRect && (nextRefRect.x !== prevRefRect.x || nextRefRect.y !== prevRefRect.y || nextRefRect.width !== prevRefRect.width || nextRefRect.height !== prevRefRect.height)) {
|
|
555
|
+
update();
|
|
556
|
+
}
|
|
557
|
+
prevRefRect = nextRefRect;
|
|
558
|
+
frameId = requestAnimationFrame(frameLoop);
|
|
559
|
+
}
|
|
560
|
+
update();
|
|
561
|
+
return () => {
|
|
562
|
+
ancestors.forEach(ancestor => {
|
|
563
|
+
ancestorScroll && ancestor.removeEventListener('scroll', update);
|
|
564
|
+
ancestorResize && ancestor.removeEventListener('resize', update);
|
|
565
|
+
});
|
|
566
|
+
cleanupIo && cleanupIo();
|
|
567
|
+
resizeObserver && resizeObserver.disconnect();
|
|
568
|
+
resizeObserver = null;
|
|
569
|
+
if (animationFrame) {
|
|
570
|
+
cancelAnimationFrame(frameId);
|
|
571
|
+
}
|
|
572
|
+
};
|
|
573
|
+
}
|
|
574
|
+
|
|
575
|
+
/**
|
|
576
|
+
* Computes the `x` and `y` coordinates that will place the floating element
|
|
577
|
+
* next to a reference element when it is given a certain CSS positioning
|
|
578
|
+
* strategy.
|
|
579
|
+
*/
|
|
580
|
+
const computePosition = (reference, floating, options) => {
|
|
581
|
+
// This caches the expensive `getClippingElementAncestors` function so that
|
|
582
|
+
// multiple lifecycle resets re-use the same result. It only lives for a
|
|
583
|
+
// single call. If other functions become expensive, we can add them as well.
|
|
584
|
+
const cache = new Map();
|
|
585
|
+
const mergedOptions = {
|
|
586
|
+
platform,
|
|
587
|
+
...options
|
|
588
|
+
};
|
|
589
|
+
const platformWithCache = {
|
|
590
|
+
...mergedOptions.platform,
|
|
591
|
+
_c: cache
|
|
592
|
+
};
|
|
593
|
+
return computePosition$1(reference, floating, {
|
|
594
|
+
...mergedOptions,
|
|
595
|
+
platform: platformWithCache
|
|
596
|
+
});
|
|
597
|
+
};
|
|
598
|
+
|
|
599
|
+
export { autoUpdate, computePosition, getOverflowAncestors, platform };
|